[{"data":1,"prerenderedAt":1052},["ShallowReactive",2],{"navigation_docs":3,"-guide-core-concepts-floating-node":271,"-guide-core-concepts-floating-node-surround":1047},[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":36,"body":273,"description":1041,"extension":1042,"links":1043,"meta":1044,"navigation":687,"path":37,"seo":1045,"stem":38,"__hash__":1046},"docs\u002F1.guide\u002F2.core-concepts\u002F1.floating-node.md",{"type":274,"value":275,"toc":1031},"minimark",[276,285,288,293,296,311,323,327,336,376,384,388,393,396,410,414,421,453,457,460,467,509,522,526,529,567,571,574,1000,1004,1027],[277,278,279,280,284],"p",{},"The ",[281,282,283],"code",{},"FloatingNode"," is the shared object that keeps a floating surface together.",[277,286,287],{},"If you understand the floating node, the rest of the library gets easier to follow. Most confusion in VFloat comes from treating the composables as separate helpers when they are really meant to cooperate through one shared node.",[289,290,292],"h2",{"id":291},"the-three-parts","The three parts",[277,294,295],{},"Every floating surface in VFloat is built from three things:",[297,298,299,303,306],"ul",{},[300,301,302],"li",{},"an anchor element",[300,304,305],{},"a floating element",[300,307,308,309],{},"a shared ",[281,310,283],{},[277,312,313,314,316,317,322],{},"The anchor is the thing the surface is positioned against. The floating element is the surface that appears. The ",[281,315,283],{}," is the composite object returned by ",[318,319,320],"a",{"href":163},[281,321,162],{}," that connects them and lets companion composables coordinate without manual event wiring.",[289,324,326],{"id":325},"why-the-node-exists","Why the node exists",[277,328,329,330,335],{},"VFloat intentionally keeps the shared ",[318,331,333],{"href":332},"\u002Fapi\u002Foverview\u002Ftypes#floatingnode",[281,334,283],{}," small and focused:",[297,337,338,355,360],{},[300,339,340,343,344,347,348,347,351,354],{},[281,341,342],{},"refs"," (",[281,345,346],{},"anchorEl",", ",[281,349,350],{},"floatingEl",[281,352,353],{},"arrowEl",")",[300,356,357],{},[281,358,359],{},"open",[300,361,362,363,347,366,369,370,347,373,354],{},"Hierarchy relations (",[281,364,365],{},"parent",[281,367,368],{},"children",") and tree methods (",[281,371,372],{},"contains",[281,374,375],{},"traverse",[277,377,378,379,383],{},"That grouping matters because companion composables know where to read and write behavior without forcing the public root shape to grow in random directions. Positioning is added separately with ",[318,380,381],{"href":172},[281,382,171],{},", which reads the same node and applies computed geometry. Related surfaces coordinate naturally through the composite node hierarchy without requiring an external tree wrapper.",[289,385,386],{"id":342},[281,387,342],{},[277,389,279,390,392],{},[281,391,342],{}," group is about the DOM relationships.",[277,394,395],{},"It includes:",[297,397,398,402,406],{},[300,399,400],{},[281,401,346],{},[300,403,404],{},[281,405,350],{},[300,407,408],{},[281,409,353],{},[289,411,412],{"id":359},[281,413,359],{},[277,415,416,417,420],{},"The open state is a standard mutable Vue ",[281,418,419],{},"Ref\u003Cboolean>",".",[277,422,423,424,347,428,347,432,347,436,440,441,445,446,449,450,420],{},"Interaction composables such as ",[318,425,426],{"href":194},[281,427,193],{},[318,429,430],{"href":190},[281,431,189],{},[318,433,434],{"href":198},[281,435,197],{},[318,437,438],{"href":206},[281,439,205],{},", and ",[318,442,443],{"href":210},[281,444,209],{}," all coordinate through this same open state by setting ",[281,447,448],{},"node.open.value = true"," or ",[281,451,452],{},"node.open.value = false",[289,454,456],{"id":455},"positioning-lives-next-to-the-node","Positioning lives next to the node",[277,458,459],{},"The node itself does not compute coordinates, run middlewares, or wire auto-update listeners.",[277,461,462,463,466],{},"When a surface needs JavaScript positioning, call ",[281,464,465],{},"usePosition(node)",". That returns geometry fields such as:",[297,468,469,474,479,484,489,494,499,504],{},[300,470,471],{},[281,472,473],{},"x",[300,475,476],{},[281,477,478],{},"y",[300,480,481],{},[281,482,483],{},"placement",[300,485,486],{},[281,487,488],{},"strategy",[300,490,491],{},[281,492,493],{},"middlewareData",[300,495,496],{},[281,497,498],{},"isPositioned",[300,500,501],{},[281,502,503],{},"styles",[300,505,506],{},[281,507,508],{},"update",[277,510,511,512,514,515,518,519,521],{},"Most templates do not even need to bind styles manually because ",[281,513,171],{}," synchronizes them directly to ",[281,516,517],{},"node.refs.floatingEl",". But the return values (including reactive ",[281,520,503],{},") are there when you need manual control or deeper integration.",[289,523,525],{"id":524},"the-core-loop","The core loop",[277,527,528],{},"This is the loop to keep in your head:",[530,531,532,535,542,551,556,561],"ol",{},[300,533,534],{},"You create refs for the anchor and floating element.",[300,536,537,538,420],{},"You pass them into ",[318,539,540],{"href":163},[281,541,162],{},[300,543,544,547,548,420],{},[281,545,546],{},"useFloatingNode()"," returns the shared ",[281,549,550],{},"node",[300,552,553,555],{},[281,554,465],{}," adds positioning and automatically synchronizes styles to the floating element.",[300,557,558,559,420],{},"Other composables read from and write to the same ",[281,560,550],{},[300,562,563,564,420],{},"Your template renders from ",[281,565,566],{},"node.open.value",[289,568,570],{"id":569},"a-minimal-example","A minimal example",[277,572,573],{},"This small example shows the node in use without extra ceremony.",[575,576,581],"pre",{"className":577,"code":578,"language":579,"meta":580,"style":580},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\nimport { ref } from \"vue\";\nimport { useFloatingNode, usePosition, useHover } 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  },\n});\n\nuseHover(node);\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cbutton ref=\"anchorEl\" type=\"button\">Hover me\u003C\u002Fbutton>\n\n  \u003Cdiv v-if=\"node.open.value\" ref=\"floatingEl\">Floating content\u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n","vue","",[281,582,583,618,648,682,689,728,758,763,794,807,826,836,850,856,865,870,880,890,895,905,946,951,991],{"__ignoreMap":580},[584,585,588,592,596,600,603,606,609,613,615],"span",{"class":586,"line":587},"line",1,[584,589,591],{"class":590},"sMK4o","\u003C",[584,593,595],{"class":594},"swJcz","script",[584,597,599],{"class":598},"spNyl"," setup",[584,601,602],{"class":598}," lang",[584,604,605],{"class":590},"=",[584,607,608],{"class":590},"\"",[584,610,612],{"class":611},"sfazB","ts",[584,614,608],{"class":590},[584,616,617],{"class":590},">\n",[584,619,621,625,628,632,635,638,641,643,645],{"class":586,"line":620},2,[584,622,624],{"class":623},"s7zQu","import",[584,626,627],{"class":590}," {",[584,629,631],{"class":630},"sTEyZ"," ref",[584,633,634],{"class":590}," }",[584,636,637],{"class":623}," from",[584,639,640],{"class":590}," \"",[584,642,579],{"class":611},[584,644,608],{"class":590},[584,646,647],{"class":590},";\n",[584,649,651,653,655,658,661,664,666,669,671,673,675,678,680],{"class":586,"line":650},3,[584,652,624],{"class":623},[584,654,627],{"class":590},[584,656,657],{"class":630}," useFloatingNode",[584,659,660],{"class":590},",",[584,662,663],{"class":630}," usePosition",[584,665,660],{"class":590},[584,667,668],{"class":630}," useHover",[584,670,634],{"class":590},[584,672,637],{"class":623},[584,674,640],{"class":590},[584,676,677],{"class":611},"v-float",[584,679,608],{"class":590},[584,681,647],{"class":590},[584,683,685],{"class":586,"line":684},4,[584,686,688],{"emptyLinePlaceholder":687},true,"\n",[584,690,692,695,698,700,703,705,709,712,715,718,721,724,726],{"class":586,"line":691},5,[584,693,694],{"class":598},"const",[584,696,697],{"class":630}," anchorEl ",[584,699,605],{"class":590},[584,701,631],{"class":702},"s2Zo4",[584,704,591],{"class":590},[584,706,708],{"class":707},"sBMFI","HTMLElement",[584,710,711],{"class":590}," |",[584,713,714],{"class":707}," null",[584,716,717],{"class":590},">",[584,719,720],{"class":630},"(",[584,722,723],{"class":590},"null",[584,725,354],{"class":630},[584,727,647],{"class":590},[584,729,731,733,736,738,740,742,744,746,748,750,752,754,756],{"class":586,"line":730},6,[584,732,694],{"class":598},[584,734,735],{"class":630}," floatingEl ",[584,737,605],{"class":590},[584,739,631],{"class":702},[584,741,591],{"class":590},[584,743,708],{"class":707},[584,745,711],{"class":590},[584,747,714],{"class":707},[584,749,717],{"class":590},[584,751,720],{"class":630},[584,753,723],{"class":590},[584,755,354],{"class":630},[584,757,647],{"class":590},[584,759,761],{"class":586,"line":760},7,[584,762,688],{"emptyLinePlaceholder":687},[584,764,766,768,771,773,775,777,780,783,785,787,790,792],{"class":586,"line":765},8,[584,767,694],{"class":598},[584,769,770],{"class":630}," node ",[584,772,605],{"class":590},[584,774,657],{"class":702},[584,776,720],{"class":630},[584,778,779],{"class":590},"{",[584,781,782],{"class":630}," anchorEl",[584,784,660],{"class":590},[584,786,735],{"class":630},[584,788,789],{"class":590},"}",[584,791,354],{"class":630},[584,793,647],{"class":590},[584,795,797,799,802,804],{"class":586,"line":796},9,[584,798,171],{"class":702},[584,800,801],{"class":630},"(node",[584,803,660],{"class":590},[584,805,806],{"class":590}," {\n",[584,808,810,813,816,818,821,823],{"class":586,"line":809},10,[584,811,812],{"class":594},"  placement",[584,814,815],{"class":590},":",[584,817,640],{"class":590},[584,819,820],{"class":611},"bottom",[584,822,608],{"class":590},[584,824,825],{"class":590},",\n",[584,827,829,832,834],{"class":586,"line":828},11,[584,830,831],{"class":594},"  middlewares",[584,833,815],{"class":590},[584,835,806],{"class":590},[584,837,839,842,844,848],{"class":586,"line":838},12,[584,840,841],{"class":594},"    offset",[584,843,815],{"class":590},[584,845,847],{"class":846},"sbssI"," 8",[584,849,825],{"class":590},[584,851,853],{"class":586,"line":852},13,[584,854,855],{"class":590},"  },\n",[584,857,859,861,863],{"class":586,"line":858},14,[584,860,789],{"class":590},[584,862,354],{"class":630},[584,864,647],{"class":590},[584,866,868],{"class":586,"line":867},15,[584,869,688],{"emptyLinePlaceholder":687},[584,871,873,875,878],{"class":586,"line":872},16,[584,874,193],{"class":702},[584,876,877],{"class":630},"(node)",[584,879,647],{"class":590},[584,881,883,886,888],{"class":586,"line":882},17,[584,884,885],{"class":590},"\u003C\u002F",[584,887,595],{"class":594},[584,889,617],{"class":590},[584,891,893],{"class":586,"line":892},18,[584,894,688],{"emptyLinePlaceholder":687},[584,896,898,900,903],{"class":586,"line":897},19,[584,899,591],{"class":590},[584,901,902],{"class":594},"template",[584,904,617],{"class":590},[584,906,908,911,914,916,918,920,922,924,927,929,931,933,935,937,940,942,944],{"class":586,"line":907},20,[584,909,910],{"class":590},"  \u003C",[584,912,913],{"class":594},"button",[584,915,631],{"class":598},[584,917,605],{"class":590},[584,919,608],{"class":590},[584,921,346],{"class":611},[584,923,608],{"class":590},[584,925,926],{"class":598}," type",[584,928,605],{"class":590},[584,930,608],{"class":590},[584,932,913],{"class":611},[584,934,608],{"class":590},[584,936,717],{"class":590},[584,938,939],{"class":630},"Hover me",[584,941,885],{"class":590},[584,943,913],{"class":594},[584,945,617],{"class":590},[584,947,949],{"class":586,"line":948},21,[584,950,688],{"emptyLinePlaceholder":687},[584,952,954,956,959,962,964,966,968,970,972,974,976,978,980,982,985,987,989],{"class":586,"line":953},22,[584,955,910],{"class":590},[584,957,958],{"class":594},"div",[584,960,961],{"class":598}," v-if",[584,963,605],{"class":590},[584,965,608],{"class":590},[584,967,566],{"class":611},[584,969,608],{"class":590},[584,971,631],{"class":598},[584,973,605],{"class":590},[584,975,608],{"class":590},[584,977,350],{"class":611},[584,979,608],{"class":590},[584,981,717],{"class":590},[584,983,984],{"class":630},"Floating content",[584,986,885],{"class":590},[584,988,958],{"class":594},[584,990,617],{"class":590},[584,992,994,996,998],{"class":586,"line":993},23,[584,995,885],{"class":590},[584,997,902],{"class":594},[584,999,617],{"class":590},[289,1001,1003],{"id":1002},"where-to-go-next","Where to go next",[297,1005,1006,1017,1022],{},[300,1007,1008,1009,1012,1013,1016],{},"Read ",[318,1010,1011],{"href":41},"Placement and Positioning"," to understand what ",[281,1014,1015],{},"position"," is really computing.",[300,1018,1008,1019,1021],{},[318,1020,44],{"href":45}," to understand how composables cooperate through open state.",[300,1023,1008,1024,1026],{},[318,1025,21],{"href":22}," if you want to see the concept in a working example again.",[1028,1029,1030],"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 .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":580,"searchDepth":620,"depth":620,"links":1032},[1033,1034,1035,1036,1037,1038,1039,1040],{"id":291,"depth":620,"text":292},{"id":325,"depth":620,"text":326},{"id":342,"depth":620,"text":342},{"id":359,"depth":620,"text":359},{"id":455,"depth":620,"text":456},{"id":524,"depth":620,"text":525},{"id":569,"depth":620,"text":570},{"id":1002,"depth":620,"text":1003},"Understand the shared node object that ties VFloat behavior together.","md",null,{},{"title":36,"description":1041},"dDV-n_pZdoomM9x0V7P2qmywb-kbgJByx_zpyVHz_No",[1048,1050],{"title":25,"path":26,"stem":27,"description":1049,"children":-1},"Build a click-driven popover and see how VFloat changes behavior without changing the core shape.",{"title":40,"path":41,"stem":42,"description":1051,"children":-1},"Learn how placements, strategies, and middleware shape the final position.",1791046167463]