[{"data":1,"prerenderedAt":702},["ShallowReactive",2],{"navigation_docs":3,"-guide-core-concepts-interaction-model":271,"-guide-core-concepts-interaction-model-surround":697},[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":44,"body":273,"description":691,"extension":692,"links":693,"meta":694,"navigation":498,"path":45,"seo":695,"stem":46,"__hash__":696},"docs\u002F1.guide\u002F2.core-concepts\u002F3.interaction-model.md",{"type":274,"value":275,"toc":685},"minimark",[276,280,283,288,291,294,297,345,356,360,363,366,373,377,380,649,659,663,681],[277,278,279],"p",{},"VFloat's interaction composables look separate on the surface, but they are meant to work together through one shared state model.",[277,281,282],{},"That shared model is the difference between a pile of event helpers and a composable floating system.",[284,285,287],"h2",{"id":286},"the-core-idea","The core idea",[277,289,290],{},"Interaction composables do not usually position anything themselves. They answer a different question:",[277,292,293],{},"\"When should this floating surface open or close?\"",[277,295,296],{},"Examples:",[298,299,300,310,317,324,331,338],"ul",{},[301,302,303,309],"li",{},[304,305,306],"a",{"href":194},[307,308,193],"code",{}," reacts to pointer movement",[301,311,312,316],{},[304,313,314],{"href":190},[307,315,189],{}," reacts to anchor activation",[301,318,319,323],{},[304,320,321],{"href":206},[307,322,205],{}," reacts to pointer input outside the floating family",[301,325,326,330],{},[304,327,328],{"href":210},[307,329,209],{}," reacts to Escape key presses with leaf-first tree coordination",[301,332,333,337],{},[304,334,335],{"href":198},[307,336,197],{}," reacts to focus and blur",[301,339,340,344],{},[304,341,342],{"href":202},[307,343,201],{}," orchestrates focus while open",[277,346,347,349,350,352,353,355],{},[307,348,205],{}," and ",[307,351,209],{}," are decoupled primitives. Mix and match them based on the exact UX requirements of your surface (e.g. tooltips typically only need ",[307,354,209],{},", whereas modals and dropdowns usually use both).",[284,357,359],{"id":358},"one-node-many-behaviors","One node, many behaviors",[277,361,362],{},"A floating surface often needs more than one interaction rule at once.",[277,364,365],{},"For example, an accessible tooltip may need hover for pointer users and focus for keyboard users. A popover may need click to open, outside click to close, and Escape to close.",[277,367,368,369,372],{},"Those are not competing systems if they all share one ",[307,370,371],{},"node",". They are just different inputs acting on the same open state.",[284,374,376],{"id":375},"a-typical-combination","A typical combination",[277,378,379],{},"This example shows a common click-driven combination:",[381,382,387],"pre",{"className":383,"code":384,"language":385,"meta":386,"style":386},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\nimport { ref } from \"vue\";\nimport { useClick, useEscapeKey, useFloatingNode, useOutsideClick } from \"v-float\";\n\nconst anchorEl = ref\u003CHTMLElement | null>(null);\nconst floatingEl = ref\u003CHTMLElement | null>(null);\n\nconst node = useFloatingNode({ anchorEl, floatingEl });\n\nuseClick(node);\nuseOutsideClick(node);\nuseEscapeKey(node);\n\u003C\u002Fscript>\n","vue","",[307,388,389,424,454,493,500,540,570,575,606,611,621,630,639],{"__ignoreMap":386},[390,391,394,398,402,406,409,412,415,419,421],"span",{"class":392,"line":393},"line",1,[390,395,397],{"class":396},"sMK4o","\u003C",[390,399,401],{"class":400},"swJcz","script",[390,403,405],{"class":404},"spNyl"," setup",[390,407,408],{"class":404}," lang",[390,410,411],{"class":396},"=",[390,413,414],{"class":396},"\"",[390,416,418],{"class":417},"sfazB","ts",[390,420,414],{"class":396},[390,422,423],{"class":396},">\n",[390,425,427,431,434,438,441,444,447,449,451],{"class":392,"line":426},2,[390,428,430],{"class":429},"s7zQu","import",[390,432,433],{"class":396}," {",[390,435,437],{"class":436},"sTEyZ"," ref",[390,439,440],{"class":396}," }",[390,442,443],{"class":429}," from",[390,445,446],{"class":396}," \"",[390,448,385],{"class":417},[390,450,414],{"class":396},[390,452,453],{"class":396},";\n",[390,455,457,459,461,464,467,470,472,475,477,480,482,484,486,489,491],{"class":392,"line":456},3,[390,458,430],{"class":429},[390,460,433],{"class":396},[390,462,463],{"class":436}," useClick",[390,465,466],{"class":396},",",[390,468,469],{"class":436}," useEscapeKey",[390,471,466],{"class":396},[390,473,474],{"class":436}," useFloatingNode",[390,476,466],{"class":396},[390,478,479],{"class":436}," useOutsideClick",[390,481,440],{"class":396},[390,483,443],{"class":429},[390,485,446],{"class":396},[390,487,488],{"class":417},"v-float",[390,490,414],{"class":396},[390,492,453],{"class":396},[390,494,496],{"class":392,"line":495},4,[390,497,499],{"emptyLinePlaceholder":498},true,"\n",[390,501,503,506,509,511,514,516,520,523,526,529,532,535,538],{"class":392,"line":502},5,[390,504,505],{"class":404},"const",[390,507,508],{"class":436}," anchorEl ",[390,510,411],{"class":396},[390,512,437],{"class":513},"s2Zo4",[390,515,397],{"class":396},[390,517,519],{"class":518},"sBMFI","HTMLElement",[390,521,522],{"class":396}," |",[390,524,525],{"class":518}," null",[390,527,528],{"class":396},">",[390,530,531],{"class":436},"(",[390,533,534],{"class":396},"null",[390,536,537],{"class":436},")",[390,539,453],{"class":396},[390,541,543,545,548,550,552,554,556,558,560,562,564,566,568],{"class":392,"line":542},6,[390,544,505],{"class":404},[390,546,547],{"class":436}," floatingEl ",[390,549,411],{"class":396},[390,551,437],{"class":513},[390,553,397],{"class":396},[390,555,519],{"class":518},[390,557,522],{"class":396},[390,559,525],{"class":518},[390,561,528],{"class":396},[390,563,531],{"class":436},[390,565,534],{"class":396},[390,567,537],{"class":436},[390,569,453],{"class":396},[390,571,573],{"class":392,"line":572},7,[390,574,499],{"emptyLinePlaceholder":498},[390,576,578,580,583,585,587,589,592,595,597,599,602,604],{"class":392,"line":577},8,[390,579,505],{"class":404},[390,581,582],{"class":436}," node ",[390,584,411],{"class":396},[390,586,474],{"class":513},[390,588,531],{"class":436},[390,590,591],{"class":396},"{",[390,593,594],{"class":436}," anchorEl",[390,596,466],{"class":396},[390,598,547],{"class":436},[390,600,601],{"class":396},"}",[390,603,537],{"class":436},[390,605,453],{"class":396},[390,607,609],{"class":392,"line":608},9,[390,610,499],{"emptyLinePlaceholder":498},[390,612,614,616,619],{"class":392,"line":613},10,[390,615,189],{"class":513},[390,617,618],{"class":436},"(node)",[390,620,453],{"class":396},[390,622,624,626,628],{"class":392,"line":623},11,[390,625,205],{"class":513},[390,627,618],{"class":436},[390,629,453],{"class":396},[390,631,633,635,637],{"class":392,"line":632},12,[390,634,209],{"class":513},[390,636,618],{"class":436},[390,638,453],{"class":396},[390,640,642,645,647],{"class":392,"line":641},13,[390,643,644],{"class":396},"\u003C\u002F",[390,646,401],{"class":400},[390,648,423],{"class":396},[277,650,651,654,655,658],{},[307,652,653],{},"useOutsideClick(node)"," closes when the user interacts outside the surface (with built-in family awareness so clicking inside child submenus won't dismiss the parent). ",[307,656,657],{},"useEscapeKey(node)"," dismisses on Escape, respecting IME composition and nested tree hierarchy.",[284,660,662],{"id":661},"where-to-go-next","Where to go next",[298,664,665,671],{},[301,666,667,668,670],{},"Read ",[304,669,36],{"href":37}," if you want the deeper model behind the shared root.",[301,672,667,673,676,677,680],{},[304,674,675],{"href":59},"Build Accessible Tooltips"," or ",[304,678,679],{"href":63},"Build Popovers and Dropdowns"," for concrete combinations.",[682,683,684],"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 .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":386,"searchDepth":426,"depth":426,"links":686},[687,688,689,690],{"id":286,"depth":426,"text":287},{"id":358,"depth":426,"text":359},{"id":375,"depth":426,"text":376},{"id":661,"depth":426,"text":662},"Learn how VFloat opens, closes, and coordinates floating surfaces.","md",null,{},{"title":44,"description":691},"jqNy7QONTLxXBr26mtf2NqAxAisPNzO6jHCZXGQpJPE",[698,700],{"title":40,"path":41,"stem":42,"description":699,"children":-1},"Learn how placements, strategies, and middleware shape the final position.",{"title":48,"path":49,"stem":50,"description":701,"children":-1},"Understand how VFloat coordinates nested overlays, submenus, and composite floating surface hierarchies.",1791046167528]