[{"data":1,"prerenderedAt":2824},["ShallowReactive",2],{"navigation_docs":3,"-api-core-use-floating-node":271,"-api-core-use-floating-node-surround":2819},[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":162,"body":273,"description":2813,"extension":2814,"links":2815,"meta":2816,"navigation":348,"path":163,"seo":2817,"stem":164,"__hash__":2818},"docs\u002F2.api\u002F2.core\u002F1.use-floating-node.md",{"type":274,"value":275,"toc":2797},"minimark",[276,283,292,297,975,978,1143,1147,1308,1312,1317,1326,1378,1391,1509,1525,1529,1534,1596,1603,1625,1629,1633,1639,2012,2380,2384,2390,2753,2757,2793],[277,278,279,282],"p",{},[280,281,162],"code",{}," creates a unified composite floating node. It owns element refs and open state, providing a stable identity, spatial containment checks, and reactive hub for positioning and interaction composables.",[277,284,285,287,288,291],{},[280,286,162],{}," acts as both a standalone surface ($N = 0$) and a hierarchical tree node ($N > 0$). It operates as a standalone surface by default, and supports hierarchical composite trees via explicit parent references or opt-in Dependency Injection (",[280,289,290],{},"parent: \"auto\"",").",[293,294,296],"h2",{"id":295},"type","Type",[298,299,304],"pre",{"className":300,"code":301,"language":302,"meta":303,"style":303},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","function useFloatingNode(options: UseFloatingNodeOptions): FloatingNode;\n\ninterface UseFloatingNodeOptions {\n  anchorEl: Ref\u003CAnchorElement>;\n  floatingEl: Ref\u003CFloatingElement>;\n  arrowEl?: Ref\u003CHTMLElement | null>;\n  open?: Ref\u003Cboolean>;\n  parent?: FloatingNode | \"auto\" | null;\n  provide?: boolean;\n}\n\ntype AnchorElement = HTMLElement | VirtualElement | null;\ntype FloatingElement = HTMLElement | null;\ntype FloatingNodeId = symbol;\n\ninterface FloatingNodeElements {\n  anchorEl: Ref\u003CAnchorElement>;\n  floatingEl: Ref\u003CFloatingElement>;\n  arrowEl: Ref\u003CHTMLElement | null>;\n}\n\ninterface FloatingNode {\n  id: FloatingNodeId;\n  refs: FloatingNodeElements;\n  open: Ref\u003Cboolean>;\n  parent: Readonly\u003CShallowRef\u003CFloatingNode | null>>;\n  children: Readonly\u003CShallowRef\u003CReadonlySet\u003CFloatingNode>>>;\n  appendChild: (child: FloatingNode) => () => void;\n  removeChild: (child: FloatingNode) => void;\n  contains: (target: EventTarget | null) => boolean;\n  traverse: (\n    visitor: (node: FloatingNode, depth: number) => TraverseAction,\n    options?: TraverseOptions,\n  ) => boolean;\n}\n\ntype TraverseAction = void | \"skip\" | \"stop\";\n\ninterface TraverseOptions {\n  order?: \"top-down\" | \"bottom-up\";\n}\n","ts","",[280,305,306,343,350,361,382,399,423,440,468,481,487,492,517,535,550,555,565,580,595,614,619,624,633,645,657,672,699,725,759,783,813,825,863,876,889,894,899,930,935,944,970],{"__ignoreMap":303},[307,308,311,315,319,323,327,330,334,337,340],"span",{"class":309,"line":310},"line",1,[307,312,314],{"class":313},"spNyl","function",[307,316,318],{"class":317},"s2Zo4"," useFloatingNode",[307,320,322],{"class":321},"sMK4o","(",[307,324,326],{"class":325},"sHdIc","options",[307,328,329],{"class":321},":",[307,331,333],{"class":332},"sBMFI"," UseFloatingNodeOptions",[307,335,336],{"class":321},"):",[307,338,339],{"class":332}," FloatingNode",[307,341,342],{"class":321},";\n",[307,344,346],{"class":309,"line":345},2,[307,347,349],{"emptyLinePlaceholder":348},true,"\n",[307,351,353,356,358],{"class":309,"line":352},3,[307,354,355],{"class":313},"interface",[307,357,333],{"class":332},[307,359,360],{"class":321}," {\n",[307,362,364,368,370,373,376,379],{"class":309,"line":363},4,[307,365,367],{"class":366},"swJcz","  anchorEl",[307,369,329],{"class":321},[307,371,372],{"class":332}," Ref",[307,374,375],{"class":321},"\u003C",[307,377,378],{"class":332},"AnchorElement",[307,380,381],{"class":321},">;\n",[307,383,385,388,390,392,394,397],{"class":309,"line":384},5,[307,386,387],{"class":366},"  floatingEl",[307,389,329],{"class":321},[307,391,372],{"class":332},[307,393,375],{"class":321},[307,395,396],{"class":332},"FloatingElement",[307,398,381],{"class":321},[307,400,402,405,408,410,412,415,418,421],{"class":309,"line":401},6,[307,403,404],{"class":366},"  arrowEl",[307,406,407],{"class":321},"?:",[307,409,372],{"class":332},[307,411,375],{"class":321},[307,413,414],{"class":332},"HTMLElement",[307,416,417],{"class":321}," |",[307,419,420],{"class":332}," null",[307,422,381],{"class":321},[307,424,426,429,431,433,435,438],{"class":309,"line":425},7,[307,427,428],{"class":366},"  open",[307,430,407],{"class":321},[307,432,372],{"class":332},[307,434,375],{"class":321},[307,436,437],{"class":332},"boolean",[307,439,381],{"class":321},[307,441,443,446,448,450,452,455,459,462,464,466],{"class":309,"line":442},8,[307,444,445],{"class":366},"  parent",[307,447,407],{"class":321},[307,449,339],{"class":332},[307,451,417],{"class":321},[307,453,454],{"class":321}," \"",[307,456,458],{"class":457},"sfazB","auto",[307,460,461],{"class":321},"\"",[307,463,417],{"class":321},[307,465,420],{"class":332},[307,467,342],{"class":321},[307,469,471,474,476,479],{"class":309,"line":470},9,[307,472,473],{"class":366},"  provide",[307,475,407],{"class":321},[307,477,478],{"class":332}," boolean",[307,480,342],{"class":321},[307,482,484],{"class":309,"line":483},10,[307,485,486],{"class":321},"}\n",[307,488,490],{"class":309,"line":489},11,[307,491,349],{"emptyLinePlaceholder":348},[307,493,495,497,500,503,506,508,511,513,515],{"class":309,"line":494},12,[307,496,295],{"class":313},[307,498,499],{"class":332}," AnchorElement",[307,501,502],{"class":321}," =",[307,504,505],{"class":332}," HTMLElement",[307,507,417],{"class":321},[307,509,510],{"class":332}," VirtualElement",[307,512,417],{"class":321},[307,514,420],{"class":332},[307,516,342],{"class":321},[307,518,520,522,525,527,529,531,533],{"class":309,"line":519},13,[307,521,295],{"class":313},[307,523,524],{"class":332}," FloatingElement",[307,526,502],{"class":321},[307,528,505],{"class":332},[307,530,417],{"class":321},[307,532,420],{"class":332},[307,534,342],{"class":321},[307,536,538,540,543,545,548],{"class":309,"line":537},14,[307,539,295],{"class":313},[307,541,542],{"class":332}," FloatingNodeId",[307,544,502],{"class":321},[307,546,547],{"class":332}," symbol",[307,549,342],{"class":321},[307,551,553],{"class":309,"line":552},15,[307,554,349],{"emptyLinePlaceholder":348},[307,556,558,560,563],{"class":309,"line":557},16,[307,559,355],{"class":313},[307,561,562],{"class":332}," FloatingNodeElements",[307,564,360],{"class":321},[307,566,568,570,572,574,576,578],{"class":309,"line":567},17,[307,569,367],{"class":366},[307,571,329],{"class":321},[307,573,372],{"class":332},[307,575,375],{"class":321},[307,577,378],{"class":332},[307,579,381],{"class":321},[307,581,583,585,587,589,591,593],{"class":309,"line":582},18,[307,584,387],{"class":366},[307,586,329],{"class":321},[307,588,372],{"class":332},[307,590,375],{"class":321},[307,592,396],{"class":332},[307,594,381],{"class":321},[307,596,598,600,602,604,606,608,610,612],{"class":309,"line":597},19,[307,599,404],{"class":366},[307,601,329],{"class":321},[307,603,372],{"class":332},[307,605,375],{"class":321},[307,607,414],{"class":332},[307,609,417],{"class":321},[307,611,420],{"class":332},[307,613,381],{"class":321},[307,615,617],{"class":309,"line":616},20,[307,618,486],{"class":321},[307,620,622],{"class":309,"line":621},21,[307,623,349],{"emptyLinePlaceholder":348},[307,625,627,629,631],{"class":309,"line":626},22,[307,628,355],{"class":313},[307,630,339],{"class":332},[307,632,360],{"class":321},[307,634,636,639,641,643],{"class":309,"line":635},23,[307,637,638],{"class":366},"  id",[307,640,329],{"class":321},[307,642,542],{"class":332},[307,644,342],{"class":321},[307,646,648,651,653,655],{"class":309,"line":647},24,[307,649,650],{"class":366},"  refs",[307,652,329],{"class":321},[307,654,562],{"class":332},[307,656,342],{"class":321},[307,658,660,662,664,666,668,670],{"class":309,"line":659},25,[307,661,428],{"class":366},[307,663,329],{"class":321},[307,665,372],{"class":332},[307,667,375],{"class":321},[307,669,437],{"class":332},[307,671,381],{"class":321},[307,673,675,677,679,682,684,687,689,692,694,696],{"class":309,"line":674},26,[307,676,445],{"class":366},[307,678,329],{"class":321},[307,680,681],{"class":332}," Readonly",[307,683,375],{"class":321},[307,685,686],{"class":332},"ShallowRef",[307,688,375],{"class":321},[307,690,691],{"class":332},"FloatingNode",[307,693,417],{"class":321},[307,695,420],{"class":332},[307,697,698],{"class":321},">>;\n",[307,700,702,705,707,709,711,713,715,718,720,722],{"class":309,"line":701},27,[307,703,704],{"class":366},"  children",[307,706,329],{"class":321},[307,708,681],{"class":332},[307,710,375],{"class":321},[307,712,686],{"class":332},[307,714,375],{"class":321},[307,716,717],{"class":332},"ReadonlySet",[307,719,375],{"class":321},[307,721,691],{"class":332},[307,723,724],{"class":321},">>>;\n",[307,726,728,731,733,736,739,741,743,746,749,752,754,757],{"class":309,"line":727},28,[307,729,730],{"class":366},"  appendChild",[307,732,329],{"class":321},[307,734,735],{"class":321}," (",[307,737,738],{"class":325},"child",[307,740,329],{"class":321},[307,742,339],{"class":332},[307,744,745],{"class":321},")",[307,747,748],{"class":313}," =>",[307,750,751],{"class":321}," ()",[307,753,748],{"class":313},[307,755,756],{"class":332}," void",[307,758,342],{"class":321},[307,760,762,765,767,769,771,773,775,777,779,781],{"class":309,"line":761},29,[307,763,764],{"class":366},"  removeChild",[307,766,329],{"class":321},[307,768,735],{"class":321},[307,770,738],{"class":325},[307,772,329],{"class":321},[307,774,339],{"class":332},[307,776,745],{"class":321},[307,778,748],{"class":313},[307,780,756],{"class":332},[307,782,342],{"class":321},[307,784,786,789,791,793,796,798,801,803,805,807,809,811],{"class":309,"line":785},30,[307,787,788],{"class":366},"  contains",[307,790,329],{"class":321},[307,792,735],{"class":321},[307,794,795],{"class":325},"target",[307,797,329],{"class":321},[307,799,800],{"class":332}," EventTarget",[307,802,417],{"class":321},[307,804,420],{"class":332},[307,806,745],{"class":321},[307,808,748],{"class":313},[307,810,478],{"class":332},[307,812,342],{"class":321},[307,814,816,819,821],{"class":309,"line":815},31,[307,817,818],{"class":366},"  traverse",[307,820,329],{"class":321},[307,822,824],{"class":823},"sTEyZ"," (\n",[307,826,828,831,833,835,838,840,842,845,848,850,853,855,857,860],{"class":309,"line":827},32,[307,829,830],{"class":366},"    visitor",[307,832,329],{"class":321},[307,834,735],{"class":321},[307,836,837],{"class":325},"node",[307,839,329],{"class":321},[307,841,339],{"class":332},[307,843,844],{"class":321},",",[307,846,847],{"class":325}," depth",[307,849,329],{"class":321},[307,851,852],{"class":332}," number",[307,854,745],{"class":321},[307,856,748],{"class":313},[307,858,859],{"class":332}," TraverseAction",[307,861,862],{"class":321},",\n",[307,864,866,869,871,874],{"class":309,"line":865},33,[307,867,868],{"class":325},"    options",[307,870,407],{"class":321},[307,872,873],{"class":332}," TraverseOptions",[307,875,862],{"class":321},[307,877,879,882,885,887],{"class":309,"line":878},34,[307,880,881],{"class":823},"  ) ",[307,883,884],{"class":313},"=>",[307,886,478],{"class":332},[307,888,342],{"class":321},[307,890,892],{"class":309,"line":891},35,[307,893,486],{"class":321},[307,895,897],{"class":309,"line":896},36,[307,898,349],{"emptyLinePlaceholder":348},[307,900,902,904,906,908,910,912,914,917,919,921,923,926,928],{"class":309,"line":901},37,[307,903,295],{"class":313},[307,905,859],{"class":332},[307,907,502],{"class":321},[307,909,756],{"class":332},[307,911,417],{"class":321},[307,913,454],{"class":321},[307,915,916],{"class":457},"skip",[307,918,461],{"class":321},[307,920,417],{"class":321},[307,922,454],{"class":321},[307,924,925],{"class":457},"stop",[307,927,461],{"class":321},[307,929,342],{"class":321},[307,931,933],{"class":309,"line":932},38,[307,934,349],{"emptyLinePlaceholder":348},[307,936,938,940,942],{"class":309,"line":937},39,[307,939,355],{"class":313},[307,941,873],{"class":332},[307,943,360],{"class":321},[307,945,947,950,952,954,957,959,961,963,966,968],{"class":309,"line":946},40,[307,948,949],{"class":366},"  order",[307,951,407],{"class":321},[307,953,454],{"class":321},[307,955,956],{"class":457},"top-down",[307,958,461],{"class":321},[307,960,417],{"class":321},[307,962,454],{"class":321},[307,964,965],{"class":457},"bottom-up",[307,967,461],{"class":321},[307,969,342],{"class":321},[307,971,973],{"class":309,"line":972},41,[307,974,486],{"class":321},[293,976,977],{"id":326},"Options",[979,980,981,999],"table",{},[982,983,984],"thead",{},[985,986,987,991,993,996],"tr",{},[988,989,990],"th",{},"Name",[988,992,296],{},[988,994,995],{},"Default",[988,997,998],{},"Notes",[1000,1001,1002,1026,1043,1063,1090,1124],"tbody",{},[985,1003,1004,1010,1015,1018],{},[1005,1006,1007],"td",{},[280,1008,1009],{},"anchorEl",[1005,1011,1012],{},[280,1013,1014],{},"Ref\u003CAnchorElement>",[1005,1016,1017],{},"Required",[1005,1019,1020,1021,1025],{},"Reference element or ",[1022,1023,1024],"a",{"href":85},"virtual element",".",[985,1027,1028,1033,1038,1040],{},[1005,1029,1030],{},[280,1031,1032],{},"floatingEl",[1005,1034,1035],{},[280,1036,1037],{},"Ref\u003CFloatingElement>",[1005,1039,1017],{},[1005,1041,1042],{},"Floating content element.",[985,1044,1045,1050,1055,1060],{},[1005,1046,1047],{},[280,1048,1049],{},"arrowEl",[1005,1051,1052],{},[280,1053,1054],{},"Ref\u003CHTMLElement | null>",[1005,1056,1057],{},[280,1058,1059],{},"ref(null)",[1005,1061,1062],{},"Optional arrow element ref. Automatically created when omitted.",[985,1064,1065,1070,1075,1080],{},[1005,1066,1067],{},[280,1068,1069],{},"open",[1005,1071,1072],{},[280,1073,1074],{},"Ref\u003Cboolean>",[1005,1076,1077],{},[280,1078,1079],{},"ref(false)",[1005,1081,1082,1083,1085,1086,1089],{},"Reactive mutable open state ref. When omitted, an internal ",[280,1084,1079],{}," is created. Pass ",[280,1087,1088],{},"open: ref(true)"," to initialize open.",[985,1091,1092,1097,1102,1107],{},[1005,1093,1094],{},[280,1095,1096],{},"parent",[1005,1098,1099],{},[280,1100,1101],{},"FloatingNode | \"auto\" | null",[1005,1103,1104],{},[280,1105,1106],{},"undefined",[1005,1108,1109,1110,1112,1113,1116,1117,1119,1120,1123],{},"Parent node reference. Omitted\u002F",[280,1111,1106],{}," (default) is standalone; ",[280,1114,1115],{},"\"auto\""," links via DI; ",[280,1118,691],{}," links explicitly; ",[280,1121,1122],{},"null"," isolates.",[985,1125,1126,1131,1135,1140],{},[1005,1127,1128],{},[280,1129,1130],{},"provide",[1005,1132,1133],{},[280,1134,437],{},[1005,1136,1137],{},[280,1138,1139],{},"true",[1005,1141,1142],{},"Whether to provide this node to descendant components via Vue's Dependency Injection.",[293,1144,1146],{"id":1145},"returns","Returns",[979,1148,1149,1159],{},[982,1150,1151],{},[985,1152,1153,1155,1157],{},[988,1154,990],{},[988,1156,296],{},[988,1158,998],{},[1000,1160,1161,1176,1200,1216,1233,1248,1263,1278,1293],{},[985,1162,1163,1168,1173],{},[1005,1164,1165],{},[280,1166,1167],{},"id",[1005,1169,1170],{},[280,1171,1172],{},"FloatingNodeId",[1005,1174,1175],{},"Stable symbol identifying the node in trees.",[985,1177,1178,1183,1188],{},[1005,1179,1180],{},[280,1181,1182],{},"refs",[1005,1184,1185],{},[280,1186,1187],{},"FloatingNodeElements",[1005,1189,1190,1191,1193,1194,1196,1197,1199],{},"Shared ",[280,1192,1009],{},", ",[280,1195,1032],{},", and ",[280,1198,1049],{}," refs.",[985,1201,1202,1206,1210],{},[1005,1203,1204],{},[280,1205,1069],{},[1005,1207,1208],{},[280,1209,1074],{},[1005,1211,1212,1213,291],{},"Reactive mutable open state ref. Mutate directly (",[280,1214,1215],{},"node.open.value = true \u002F false",[985,1217,1218,1222,1227],{},[1005,1219,1220],{},[280,1221,1096],{},[1005,1223,1224],{},[280,1225,1226],{},"Readonly\u003CShallowRef\u003CFloatingNode | null>>",[1005,1228,1229,1230,1232],{},"Intrinsic parent node in the hierarchy. ",[280,1231,1122],{}," for root or standalone nodes.",[985,1234,1235,1240,1245],{},[1005,1236,1237],{},[280,1238,1239],{},"children",[1005,1241,1242],{},[280,1243,1244],{},"Readonly\u003CShallowRef\u003CReadonlySet\u003CFloatingNode>>>",[1005,1246,1247],{},"Immediate child nodes registered under this node.",[985,1249,1250,1255,1260],{},[1005,1251,1252],{},[280,1253,1254],{},"appendChild",[1005,1256,1257],{},[280,1258,1259],{},"(child: FloatingNode) => () => void",[1005,1261,1262],{},"Atomically links a child node under this parent. Returns a teardown function.",[985,1264,1265,1270,1275],{},[1005,1266,1267],{},[280,1268,1269],{},"removeChild",[1005,1271,1272],{},[280,1273,1274],{},"(child: FloatingNode) => void",[1005,1276,1277],{},"Unlinks a child node and clears the child's parent reference.",[985,1279,1280,1285,1290],{},[1005,1281,1282],{},[280,1283,1284],{},"contains",[1005,1286,1287],{},[280,1288,1289],{},"(target: EventTarget | null) => boolean",[1005,1291,1292],{},"Checks whether target is contained in this node or any open descendant.",[985,1294,1295,1300,1305],{},[1005,1296,1297],{},[280,1298,1299],{},"traverse",[1005,1301,1302],{},[280,1303,1304],{},"(visitor, options?) => boolean",[1005,1306,1307],{},"Recursively traverses this node and its descendants in depth-first order.",[293,1309,1311],{"id":1310},"details","Details",[1313,1314,1316],"h3",{"id":1315},"pure-vue-open-state","Pure Vue Open State",[277,1318,1319,1322,1323,1325],{},[280,1320,1321],{},"node.open"," is a standard Vue ",[280,1324,1074],{},". You can drive open state directly in script or templates:",[298,1327,1329],{"className":300,"code":1328,"language":302,"meta":303,"style":303},"\u002F\u002F Mutate state directly\nnode.open.value = true;\nnode.open.value = false;\n",[280,1330,1331,1337,1359],{"__ignoreMap":303},[307,1332,1333],{"class":309,"line":310},[307,1334,1336],{"class":1335},"sHwdD","\u002F\u002F Mutate state directly\n",[307,1338,1339,1341,1343,1345,1347,1350,1353,1357],{"class":309,"line":345},[307,1340,837],{"class":823},[307,1342,1025],{"class":321},[307,1344,1069],{"class":823},[307,1346,1025],{"class":321},[307,1348,1349],{"class":823},"value ",[307,1351,1352],{"class":321},"=",[307,1354,1356],{"class":1355},"sfNiH"," true",[307,1358,342],{"class":321},[307,1360,1361,1363,1365,1367,1369,1371,1373,1376],{"class":309,"line":352},[307,1362,837],{"class":823},[307,1364,1025],{"class":321},[307,1366,1069],{"class":823},[307,1368,1025],{"class":321},[307,1370,1349],{"class":823},[307,1372,1352],{"class":321},[307,1374,1375],{"class":1355}," false",[307,1377,342],{"class":321},[277,1379,1380,1381,1193,1384,1386,1387,1390],{},"When you pass an external ref to ",[280,1382,1383],{},"useFloatingNode({ anchorEl, floatingEl, open: isOpen })",[280,1385,1321],{}," aliases ",[280,1388,1389],{},"isOpen"," directly:",[298,1392,1394],{"className":300,"code":1393,"language":302,"meta":303,"style":303},"const isOpen = ref(false);\nconst node = useFloatingNode({ anchorEl, floatingEl, open: isOpen });\n\n\u002F\u002F Mutating either updates both\nisOpen.value = true;\nconsole.log(node.open.value); \u002F\u002F true\n",[280,1395,1396,1418,1458,1462,1467,1481],{"__ignoreMap":303},[307,1397,1398,1401,1404,1406,1409,1411,1414,1416],{"class":309,"line":310},[307,1399,1400],{"class":313},"const",[307,1402,1403],{"class":823}," isOpen ",[307,1405,1352],{"class":321},[307,1407,1408],{"class":317}," ref",[307,1410,322],{"class":823},[307,1412,1413],{"class":1355},"false",[307,1415,745],{"class":823},[307,1417,342],{"class":321},[307,1419,1420,1422,1425,1427,1429,1431,1434,1437,1439,1442,1444,1447,1449,1451,1454,1456],{"class":309,"line":345},[307,1421,1400],{"class":313},[307,1423,1424],{"class":823}," node ",[307,1426,1352],{"class":321},[307,1428,318],{"class":317},[307,1430,322],{"class":823},[307,1432,1433],{"class":321},"{",[307,1435,1436],{"class":823}," anchorEl",[307,1438,844],{"class":321},[307,1440,1441],{"class":823}," floatingEl",[307,1443,844],{"class":321},[307,1445,1446],{"class":366}," open",[307,1448,329],{"class":321},[307,1450,1403],{"class":823},[307,1452,1453],{"class":321},"}",[307,1455,745],{"class":823},[307,1457,342],{"class":321},[307,1459,1460],{"class":309,"line":352},[307,1461,349],{"emptyLinePlaceholder":348},[307,1463,1464],{"class":309,"line":363},[307,1465,1466],{"class":1335},"\u002F\u002F Mutating either updates both\n",[307,1468,1469,1471,1473,1475,1477,1479],{"class":309,"line":384},[307,1470,1389],{"class":823},[307,1472,1025],{"class":321},[307,1474,1349],{"class":823},[307,1476,1352],{"class":321},[307,1478,1356],{"class":1355},[307,1480,342],{"class":321},[307,1482,1483,1486,1488,1491,1494,1496,1498,1500,1503,1506],{"class":309,"line":401},[307,1484,1485],{"class":823},"console",[307,1487,1025],{"class":321},[307,1489,1490],{"class":317},"log",[307,1492,1493],{"class":823},"(node",[307,1495,1025],{"class":321},[307,1497,1069],{"class":823},[307,1499,1025],{"class":321},[307,1501,1502],{"class":823},"value)",[307,1504,1505],{"class":321},";",[307,1507,1508],{"class":1335}," \u002F\u002F true\n",[277,1510,1511,1512,1193,1514,1516,1517,1519,1520,1522,1523,1025],{},"When you omit ",[280,1513,1069],{},[280,1515,162],{}," creates an internal ",[280,1518,1079],{}," returned as ",[280,1521,1321],{},". If you want the node to start open, pass ",[280,1524,1088],{},[1313,1526,1528],{"id":1527},"hierarchy-parenting-resolution","Hierarchy & Parenting Resolution",[277,1530,1531,1533],{},[280,1532,162],{}," implements a three-tier parenting strategy:",[1535,1536,1537,1560,1580],"ol",{},[1538,1539,1540,1551,1552,1555,1556,1559],"li",{},[1541,1542,1543,1544,1547,1548,745],"strong",{},"Standalone (Default \u002F Omitted \u002F ",[280,1545,1546],{},"parent: undefined"," \u002F ",[280,1549,1550],{},"parent: null",": By default, a floating node is completely independent (",[280,1553,1554],{},"parent.value === null","). It does not inject an ancestor parent, ensuring top-level surfaces (such as tooltips in ",[280,1557,1558],{},"App.vue"," or layout components) never accidentally adopt or get adopted by child floating surfaces.",[1538,1561,1562,1567,1568,1570,1571,1573,1574,1547,1576,1579],{},[1541,1563,1564,1565,745],{},"Opt-In DI (",[280,1566,290],{},": Passing ",[280,1569,290],{}," explicitly discovers and attaches to the nearest ancestor ",[280,1572,691],{}," provided via Vue's Dependency Injection (",[280,1575,1130],{},[280,1577,1578],{},"inject","). This allows multi-component cascading submenus to link automatically without manual prop drilling.",[1538,1581,1582,1588,1589,1591,1592,1595],{},[1541,1583,1584,1585,745],{},"Explicit Parent (",[280,1586,1587],{},"parent: rootNode",": Passing an explicit ",[280,1590,691],{}," links directly to that parent, bypassing DI. This is ideal for flat single-component ",[280,1593,1594],{},"\u003Cscript setup>"," scripts or explicit prop forwarding.",[1313,1597,1599,1600,745],{"id":1598},"spatial-containment-nodecontains","Spatial Containment (",[280,1601,1602],{},"node.contains",[277,1604,1605,1608,1609,1193,1613,1196,1617,1621,1622,1624],{},[280,1606,1607],{},"node.contains(target)"," determines if an event target belongs to the floating surface or any of its open descendants. Interaction composables such as ",[1022,1610,1611],{"href":206},[280,1612,205],{},[1022,1614,1615],{"href":210},[280,1616,209],{},[1022,1618,1619],{"href":194},[280,1620,193],{}," rely on ",[280,1623,1602],{}," to prevent premature dismissals when interacting with nested submenus or child panels.",[293,1626,1628],{"id":1627},"examples","Examples",[1313,1630,1632],{"id":1631},"multi-component-submenu-opt-in-di","Multi-Component Submenu (Opt-In DI)",[277,1634,1635,1636,1638],{},"In multi-component architectures, submenus opt into parent discovery and registration via ",[280,1637,290],{}," without manual prop drilling:",[298,1640,1644],{"className":1641,"code":1642,"language":1643,"meta":303,"style":303},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003C!-- RootMenu.vue -->\n\u003Cscript setup lang=\"ts\">\nimport { ref } from \"vue\";\nimport { useEscapeKey, useFloatingNode, useOutsideClick, usePosition } from \"v-float\";\nimport SubMenu from \".\u002FSubMenu.vue\";\n\nconst anchorEl = ref\u003CHTMLElement | null>(null);\nconst floatingEl = ref\u003CHTMLElement | null>(null);\n\n\u002F\u002F Automatically provides this node to child components (provide defaults to true)\nconst node = useFloatingNode({ anchorEl, floatingEl });\nusePosition(node);\nuseOutsideClick(node);\nuseEscapeKey(node);\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cbutton ref=\"anchorEl\" @click=\"node.open.value = !node.open.value\">Menu\u003C\u002Fbutton>\n  \u003Cdiv v-if=\"node.open.value\" ref=\"floatingEl\" class=\"menu\">\n    \u003CSubMenu \u002F>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n","vue",[280,1645,1646,1651,1675,1700,1736,1755,1759,1789,1818,1822,1827,1853,1862,1870,1878,1887,1891,1900,1941,1984,1995,2004],{"__ignoreMap":303},[307,1647,1648],{"class":309,"line":310},[307,1649,1650],{"class":1335},"\u003C!-- RootMenu.vue -->\n",[307,1652,1653,1655,1658,1661,1664,1666,1668,1670,1672],{"class":309,"line":345},[307,1654,375],{"class":321},[307,1656,1657],{"class":366},"script",[307,1659,1660],{"class":313}," setup",[307,1662,1663],{"class":313}," lang",[307,1665,1352],{"class":321},[307,1667,461],{"class":321},[307,1669,302],{"class":457},[307,1671,461],{"class":321},[307,1673,1674],{"class":321},">\n",[307,1676,1677,1681,1684,1686,1689,1692,1694,1696,1698],{"class":309,"line":352},[307,1678,1680],{"class":1679},"s7zQu","import",[307,1682,1683],{"class":321}," {",[307,1685,1408],{"class":823},[307,1687,1688],{"class":321}," }",[307,1690,1691],{"class":1679}," from",[307,1693,454],{"class":321},[307,1695,1643],{"class":457},[307,1697,461],{"class":321},[307,1699,342],{"class":321},[307,1701,1702,1704,1706,1709,1711,1713,1715,1718,1720,1723,1725,1727,1729,1732,1734],{"class":309,"line":363},[307,1703,1680],{"class":1679},[307,1705,1683],{"class":321},[307,1707,1708],{"class":823}," useEscapeKey",[307,1710,844],{"class":321},[307,1712,318],{"class":823},[307,1714,844],{"class":321},[307,1716,1717],{"class":823}," useOutsideClick",[307,1719,844],{"class":321},[307,1721,1722],{"class":823}," usePosition",[307,1724,1688],{"class":321},[307,1726,1691],{"class":1679},[307,1728,454],{"class":321},[307,1730,1731],{"class":457},"v-float",[307,1733,461],{"class":321},[307,1735,342],{"class":321},[307,1737,1738,1740,1743,1746,1748,1751,1753],{"class":309,"line":384},[307,1739,1680],{"class":1679},[307,1741,1742],{"class":823}," SubMenu ",[307,1744,1745],{"class":1679},"from",[307,1747,454],{"class":321},[307,1749,1750],{"class":457},".\u002FSubMenu.vue",[307,1752,461],{"class":321},[307,1754,342],{"class":321},[307,1756,1757],{"class":309,"line":401},[307,1758,349],{"emptyLinePlaceholder":348},[307,1760,1761,1763,1766,1768,1770,1772,1774,1776,1778,1781,1783,1785,1787],{"class":309,"line":425},[307,1762,1400],{"class":313},[307,1764,1765],{"class":823}," anchorEl ",[307,1767,1352],{"class":321},[307,1769,1408],{"class":317},[307,1771,375],{"class":321},[307,1773,414],{"class":332},[307,1775,417],{"class":321},[307,1777,420],{"class":332},[307,1779,1780],{"class":321},">",[307,1782,322],{"class":823},[307,1784,1122],{"class":321},[307,1786,745],{"class":823},[307,1788,342],{"class":321},[307,1790,1791,1793,1796,1798,1800,1802,1804,1806,1808,1810,1812,1814,1816],{"class":309,"line":442},[307,1792,1400],{"class":313},[307,1794,1795],{"class":823}," floatingEl ",[307,1797,1352],{"class":321},[307,1799,1408],{"class":317},[307,1801,375],{"class":321},[307,1803,414],{"class":332},[307,1805,417],{"class":321},[307,1807,420],{"class":332},[307,1809,1780],{"class":321},[307,1811,322],{"class":823},[307,1813,1122],{"class":321},[307,1815,745],{"class":823},[307,1817,342],{"class":321},[307,1819,1820],{"class":309,"line":470},[307,1821,349],{"emptyLinePlaceholder":348},[307,1823,1824],{"class":309,"line":483},[307,1825,1826],{"class":1335},"\u002F\u002F Automatically provides this node to child components (provide defaults to true)\n",[307,1828,1829,1831,1833,1835,1837,1839,1841,1843,1845,1847,1849,1851],{"class":309,"line":489},[307,1830,1400],{"class":313},[307,1832,1424],{"class":823},[307,1834,1352],{"class":321},[307,1836,318],{"class":317},[307,1838,322],{"class":823},[307,1840,1433],{"class":321},[307,1842,1436],{"class":823},[307,1844,844],{"class":321},[307,1846,1795],{"class":823},[307,1848,1453],{"class":321},[307,1850,745],{"class":823},[307,1852,342],{"class":321},[307,1854,1855,1857,1860],{"class":309,"line":494},[307,1856,171],{"class":317},[307,1858,1859],{"class":823},"(node)",[307,1861,342],{"class":321},[307,1863,1864,1866,1868],{"class":309,"line":519},[307,1865,205],{"class":317},[307,1867,1859],{"class":823},[307,1869,342],{"class":321},[307,1871,1872,1874,1876],{"class":309,"line":537},[307,1873,209],{"class":317},[307,1875,1859],{"class":823},[307,1877,342],{"class":321},[307,1879,1880,1883,1885],{"class":309,"line":552},[307,1881,1882],{"class":321},"\u003C\u002F",[307,1884,1657],{"class":366},[307,1886,1674],{"class":321},[307,1888,1889],{"class":309,"line":557},[307,1890,349],{"emptyLinePlaceholder":348},[307,1892,1893,1895,1898],{"class":309,"line":567},[307,1894,375],{"class":321},[307,1896,1897],{"class":366},"template",[307,1899,1674],{"class":321},[307,1901,1902,1905,1908,1910,1912,1914,1916,1918,1921,1923,1925,1928,1930,1932,1935,1937,1939],{"class":309,"line":582},[307,1903,1904],{"class":321},"  \u003C",[307,1906,1907],{"class":366},"button",[307,1909,1408],{"class":313},[307,1911,1352],{"class":321},[307,1913,461],{"class":321},[307,1915,1009],{"class":457},[307,1917,461],{"class":321},[307,1919,1920],{"class":313}," @click",[307,1922,1352],{"class":321},[307,1924,461],{"class":321},[307,1926,1927],{"class":457},"node.open.value = !node.open.value",[307,1929,461],{"class":321},[307,1931,1780],{"class":321},[307,1933,1934],{"class":823},"Menu",[307,1936,1882],{"class":321},[307,1938,1907],{"class":366},[307,1940,1674],{"class":321},[307,1942,1943,1945,1948,1951,1953,1955,1958,1960,1962,1964,1966,1968,1970,1973,1975,1977,1980,1982],{"class":309,"line":597},[307,1944,1904],{"class":321},[307,1946,1947],{"class":366},"div",[307,1949,1950],{"class":313}," v-if",[307,1952,1352],{"class":321},[307,1954,461],{"class":321},[307,1956,1957],{"class":457},"node.open.value",[307,1959,461],{"class":321},[307,1961,1408],{"class":313},[307,1963,1352],{"class":321},[307,1965,461],{"class":321},[307,1967,1032],{"class":457},[307,1969,461],{"class":321},[307,1971,1972],{"class":313}," class",[307,1974,1352],{"class":321},[307,1976,461],{"class":321},[307,1978,1979],{"class":457},"menu",[307,1981,461],{"class":321},[307,1983,1674],{"class":321},[307,1985,1986,1989,1992],{"class":309,"line":616},[307,1987,1988],{"class":321},"    \u003C",[307,1990,1991],{"class":366},"SubMenu",[307,1993,1994],{"class":321}," \u002F>\n",[307,1996,1997,2000,2002],{"class":309,"line":621},[307,1998,1999],{"class":321},"  \u003C\u002F",[307,2001,1947],{"class":366},[307,2003,1674],{"class":321},[307,2005,2006,2008,2010],{"class":309,"line":626},[307,2007,1882],{"class":321},[307,2009,1897],{"class":366},[307,2011,1674],{"class":321},[298,2013,2015],{"className":1641,"code":2014,"language":1643,"meta":303,"style":303},"\u003C!-- SubMenu.vue -->\n\u003Cscript setup lang=\"ts\">\nimport { ref } from \"vue\";\nimport { useEscapeKey, useFloatingNode, useOutsideClick, usePosition } from \"v-float\";\n\nconst anchorEl = ref\u003CHTMLElement | null>(null);\nconst floatingEl = ref\u003CHTMLElement | null>(null);\n\n\u002F\u002F Opt into DI parenting to link with ancestor RootMenu node\nconst subNode = useFloatingNode({ anchorEl, floatingEl, parent: \"auto\" });\nusePosition(subNode, { placement: \"right-start\" });\nuseOutsideClick(subNode);\nuseEscapeKey(subNode);\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cbutton ref=\"anchorEl\" @click=\"subNode.open.value = !subNode.open.value\">Submenu\u003C\u002Fbutton>\n  \u003Cdiv v-if=\"subNode.open.value\" ref=\"floatingEl\" class=\"submenu\">\n    \u003Cp>Submenu items\u003C\u002Fp>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n",[280,2016,2017,2022,2042,2062,2094,2098,2126,2154,2158,2163,2203,2232,2241,2249,2257,2261,2269,2307,2347,2364,2372],{"__ignoreMap":303},[307,2018,2019],{"class":309,"line":310},[307,2020,2021],{"class":1335},"\u003C!-- SubMenu.vue -->\n",[307,2023,2024,2026,2028,2030,2032,2034,2036,2038,2040],{"class":309,"line":345},[307,2025,375],{"class":321},[307,2027,1657],{"class":366},[307,2029,1660],{"class":313},[307,2031,1663],{"class":313},[307,2033,1352],{"class":321},[307,2035,461],{"class":321},[307,2037,302],{"class":457},[307,2039,461],{"class":321},[307,2041,1674],{"class":321},[307,2043,2044,2046,2048,2050,2052,2054,2056,2058,2060],{"class":309,"line":352},[307,2045,1680],{"class":1679},[307,2047,1683],{"class":321},[307,2049,1408],{"class":823},[307,2051,1688],{"class":321},[307,2053,1691],{"class":1679},[307,2055,454],{"class":321},[307,2057,1643],{"class":457},[307,2059,461],{"class":321},[307,2061,342],{"class":321},[307,2063,2064,2066,2068,2070,2072,2074,2076,2078,2080,2082,2084,2086,2088,2090,2092],{"class":309,"line":363},[307,2065,1680],{"class":1679},[307,2067,1683],{"class":321},[307,2069,1708],{"class":823},[307,2071,844],{"class":321},[307,2073,318],{"class":823},[307,2075,844],{"class":321},[307,2077,1717],{"class":823},[307,2079,844],{"class":321},[307,2081,1722],{"class":823},[307,2083,1688],{"class":321},[307,2085,1691],{"class":1679},[307,2087,454],{"class":321},[307,2089,1731],{"class":457},[307,2091,461],{"class":321},[307,2093,342],{"class":321},[307,2095,2096],{"class":309,"line":384},[307,2097,349],{"emptyLinePlaceholder":348},[307,2099,2100,2102,2104,2106,2108,2110,2112,2114,2116,2118,2120,2122,2124],{"class":309,"line":401},[307,2101,1400],{"class":313},[307,2103,1765],{"class":823},[307,2105,1352],{"class":321},[307,2107,1408],{"class":317},[307,2109,375],{"class":321},[307,2111,414],{"class":332},[307,2113,417],{"class":321},[307,2115,420],{"class":332},[307,2117,1780],{"class":321},[307,2119,322],{"class":823},[307,2121,1122],{"class":321},[307,2123,745],{"class":823},[307,2125,342],{"class":321},[307,2127,2128,2130,2132,2134,2136,2138,2140,2142,2144,2146,2148,2150,2152],{"class":309,"line":425},[307,2129,1400],{"class":313},[307,2131,1795],{"class":823},[307,2133,1352],{"class":321},[307,2135,1408],{"class":317},[307,2137,375],{"class":321},[307,2139,414],{"class":332},[307,2141,417],{"class":321},[307,2143,420],{"class":332},[307,2145,1780],{"class":321},[307,2147,322],{"class":823},[307,2149,1122],{"class":321},[307,2151,745],{"class":823},[307,2153,342],{"class":321},[307,2155,2156],{"class":309,"line":442},[307,2157,349],{"emptyLinePlaceholder":348},[307,2159,2160],{"class":309,"line":470},[307,2161,2162],{"class":1335},"\u002F\u002F Opt into DI parenting to link with ancestor RootMenu node\n",[307,2164,2165,2167,2170,2172,2174,2176,2178,2180,2182,2184,2186,2189,2191,2193,2195,2197,2199,2201],{"class":309,"line":483},[307,2166,1400],{"class":313},[307,2168,2169],{"class":823}," subNode ",[307,2171,1352],{"class":321},[307,2173,318],{"class":317},[307,2175,322],{"class":823},[307,2177,1433],{"class":321},[307,2179,1436],{"class":823},[307,2181,844],{"class":321},[307,2183,1441],{"class":823},[307,2185,844],{"class":321},[307,2187,2188],{"class":366}," parent",[307,2190,329],{"class":321},[307,2192,454],{"class":321},[307,2194,458],{"class":457},[307,2196,461],{"class":321},[307,2198,1688],{"class":321},[307,2200,745],{"class":823},[307,2202,342],{"class":321},[307,2204,2205,2207,2210,2212,2214,2217,2219,2221,2224,2226,2228,2230],{"class":309,"line":489},[307,2206,171],{"class":317},[307,2208,2209],{"class":823},"(subNode",[307,2211,844],{"class":321},[307,2213,1683],{"class":321},[307,2215,2216],{"class":366}," placement",[307,2218,329],{"class":321},[307,2220,454],{"class":321},[307,2222,2223],{"class":457},"right-start",[307,2225,461],{"class":321},[307,2227,1688],{"class":321},[307,2229,745],{"class":823},[307,2231,342],{"class":321},[307,2233,2234,2236,2239],{"class":309,"line":494},[307,2235,205],{"class":317},[307,2237,2238],{"class":823},"(subNode)",[307,2240,342],{"class":321},[307,2242,2243,2245,2247],{"class":309,"line":519},[307,2244,209],{"class":317},[307,2246,2238],{"class":823},[307,2248,342],{"class":321},[307,2250,2251,2253,2255],{"class":309,"line":537},[307,2252,1882],{"class":321},[307,2254,1657],{"class":366},[307,2256,1674],{"class":321},[307,2258,2259],{"class":309,"line":552},[307,2260,349],{"emptyLinePlaceholder":348},[307,2262,2263,2265,2267],{"class":309,"line":557},[307,2264,375],{"class":321},[307,2266,1897],{"class":366},[307,2268,1674],{"class":321},[307,2270,2271,2273,2275,2277,2279,2281,2283,2285,2287,2289,2291,2294,2296,2298,2301,2303,2305],{"class":309,"line":567},[307,2272,1904],{"class":321},[307,2274,1907],{"class":366},[307,2276,1408],{"class":313},[307,2278,1352],{"class":321},[307,2280,461],{"class":321},[307,2282,1009],{"class":457},[307,2284,461],{"class":321},[307,2286,1920],{"class":313},[307,2288,1352],{"class":321},[307,2290,461],{"class":321},[307,2292,2293],{"class":457},"subNode.open.value = !subNode.open.value",[307,2295,461],{"class":321},[307,2297,1780],{"class":321},[307,2299,2300],{"class":823},"Submenu",[307,2302,1882],{"class":321},[307,2304,1907],{"class":366},[307,2306,1674],{"class":321},[307,2308,2309,2311,2313,2315,2317,2319,2322,2324,2326,2328,2330,2332,2334,2336,2338,2340,2343,2345],{"class":309,"line":582},[307,2310,1904],{"class":321},[307,2312,1947],{"class":366},[307,2314,1950],{"class":313},[307,2316,1352],{"class":321},[307,2318,461],{"class":321},[307,2320,2321],{"class":457},"subNode.open.value",[307,2323,461],{"class":321},[307,2325,1408],{"class":313},[307,2327,1352],{"class":321},[307,2329,461],{"class":321},[307,2331,1032],{"class":457},[307,2333,461],{"class":321},[307,2335,1972],{"class":313},[307,2337,1352],{"class":321},[307,2339,461],{"class":321},[307,2341,2342],{"class":457},"submenu",[307,2344,461],{"class":321},[307,2346,1674],{"class":321},[307,2348,2349,2351,2353,2355,2358,2360,2362],{"class":309,"line":597},[307,2350,1988],{"class":321},[307,2352,277],{"class":366},[307,2354,1780],{"class":321},[307,2356,2357],{"class":823},"Submenu items",[307,2359,1882],{"class":321},[307,2361,277],{"class":366},[307,2363,1674],{"class":321},[307,2365,2366,2368,2370],{"class":309,"line":616},[307,2367,1999],{"class":321},[307,2369,1947],{"class":366},[307,2371,1674],{"class":321},[307,2373,2374,2376,2378],{"class":309,"line":621},[307,2375,1882],{"class":321},[307,2377,1897],{"class":366},[307,2379,1674],{"class":321},[1313,2381,2383],{"id":2382},"flat-script-explicit-parent","Flat Script (Explicit Parent)",[277,2385,2386,2387,2389],{},"In flat single-component scripts where submenus are defined in the same ",[280,2388,1594],{},", pass the parent node explicitly:",[298,2391,2393],{"className":1641,"code":2392,"language":1643,"meta":303,"style":303},"\u003Cscript setup lang=\"ts\">\nimport { ref } from \"vue\";\nimport { useEscapeKey, useFloatingNode, useOutsideClick, usePosition } from \"v-float\";\n\nconst rootAnchorEl = ref\u003CHTMLElement | null>(null);\nconst rootFloatingEl = ref\u003CHTMLElement | null>(null);\nconst subAnchorEl = ref\u003CHTMLElement | null>(null);\nconst subFloatingEl = ref\u003CHTMLElement | null>(null);\n\nconst root = useFloatingNode({ anchorEl: rootAnchorEl, floatingEl: rootFloatingEl });\nconst sub = useFloatingNode({ anchorEl: subAnchorEl, floatingEl: subFloatingEl, parent: root });\n\nusePosition(root);\nusePosition(sub, { placement: \"right-start\" });\nuseOutsideClick(root);\nuseEscapeKey(root);\nuseOutsideClick(sub);\nuseEscapeKey(sub);\n\u003C\u002Fscript>\n",[280,2394,2395,2415,2435,2467,2471,2500,2529,2558,2587,2591,2627,2672,2676,2685,2712,2720,2728,2737,2745],{"__ignoreMap":303},[307,2396,2397,2399,2401,2403,2405,2407,2409,2411,2413],{"class":309,"line":310},[307,2398,375],{"class":321},[307,2400,1657],{"class":366},[307,2402,1660],{"class":313},[307,2404,1663],{"class":313},[307,2406,1352],{"class":321},[307,2408,461],{"class":321},[307,2410,302],{"class":457},[307,2412,461],{"class":321},[307,2414,1674],{"class":321},[307,2416,2417,2419,2421,2423,2425,2427,2429,2431,2433],{"class":309,"line":345},[307,2418,1680],{"class":1679},[307,2420,1683],{"class":321},[307,2422,1408],{"class":823},[307,2424,1688],{"class":321},[307,2426,1691],{"class":1679},[307,2428,454],{"class":321},[307,2430,1643],{"class":457},[307,2432,461],{"class":321},[307,2434,342],{"class":321},[307,2436,2437,2439,2441,2443,2445,2447,2449,2451,2453,2455,2457,2459,2461,2463,2465],{"class":309,"line":352},[307,2438,1680],{"class":1679},[307,2440,1683],{"class":321},[307,2442,1708],{"class":823},[307,2444,844],{"class":321},[307,2446,318],{"class":823},[307,2448,844],{"class":321},[307,2450,1717],{"class":823},[307,2452,844],{"class":321},[307,2454,1722],{"class":823},[307,2456,1688],{"class":321},[307,2458,1691],{"class":1679},[307,2460,454],{"class":321},[307,2462,1731],{"class":457},[307,2464,461],{"class":321},[307,2466,342],{"class":321},[307,2468,2469],{"class":309,"line":363},[307,2470,349],{"emptyLinePlaceholder":348},[307,2472,2473,2475,2478,2480,2482,2484,2486,2488,2490,2492,2494,2496,2498],{"class":309,"line":384},[307,2474,1400],{"class":313},[307,2476,2477],{"class":823}," rootAnchorEl ",[307,2479,1352],{"class":321},[307,2481,1408],{"class":317},[307,2483,375],{"class":321},[307,2485,414],{"class":332},[307,2487,417],{"class":321},[307,2489,420],{"class":332},[307,2491,1780],{"class":321},[307,2493,322],{"class":823},[307,2495,1122],{"class":321},[307,2497,745],{"class":823},[307,2499,342],{"class":321},[307,2501,2502,2504,2507,2509,2511,2513,2515,2517,2519,2521,2523,2525,2527],{"class":309,"line":401},[307,2503,1400],{"class":313},[307,2505,2506],{"class":823}," rootFloatingEl ",[307,2508,1352],{"class":321},[307,2510,1408],{"class":317},[307,2512,375],{"class":321},[307,2514,414],{"class":332},[307,2516,417],{"class":321},[307,2518,420],{"class":332},[307,2520,1780],{"class":321},[307,2522,322],{"class":823},[307,2524,1122],{"class":321},[307,2526,745],{"class":823},[307,2528,342],{"class":321},[307,2530,2531,2533,2536,2538,2540,2542,2544,2546,2548,2550,2552,2554,2556],{"class":309,"line":425},[307,2532,1400],{"class":313},[307,2534,2535],{"class":823}," subAnchorEl ",[307,2537,1352],{"class":321},[307,2539,1408],{"class":317},[307,2541,375],{"class":321},[307,2543,414],{"class":332},[307,2545,417],{"class":321},[307,2547,420],{"class":332},[307,2549,1780],{"class":321},[307,2551,322],{"class":823},[307,2553,1122],{"class":321},[307,2555,745],{"class":823},[307,2557,342],{"class":321},[307,2559,2560,2562,2565,2567,2569,2571,2573,2575,2577,2579,2581,2583,2585],{"class":309,"line":442},[307,2561,1400],{"class":313},[307,2563,2564],{"class":823}," subFloatingEl ",[307,2566,1352],{"class":321},[307,2568,1408],{"class":317},[307,2570,375],{"class":321},[307,2572,414],{"class":332},[307,2574,417],{"class":321},[307,2576,420],{"class":332},[307,2578,1780],{"class":321},[307,2580,322],{"class":823},[307,2582,1122],{"class":321},[307,2584,745],{"class":823},[307,2586,342],{"class":321},[307,2588,2589],{"class":309,"line":470},[307,2590,349],{"emptyLinePlaceholder":348},[307,2592,2593,2595,2598,2600,2602,2604,2606,2608,2610,2613,2615,2617,2619,2621,2623,2625],{"class":309,"line":483},[307,2594,1400],{"class":313},[307,2596,2597],{"class":823}," root ",[307,2599,1352],{"class":321},[307,2601,318],{"class":317},[307,2603,322],{"class":823},[307,2605,1433],{"class":321},[307,2607,1436],{"class":366},[307,2609,329],{"class":321},[307,2611,2612],{"class":823}," rootAnchorEl",[307,2614,844],{"class":321},[307,2616,1441],{"class":366},[307,2618,329],{"class":321},[307,2620,2506],{"class":823},[307,2622,1453],{"class":321},[307,2624,745],{"class":823},[307,2626,342],{"class":321},[307,2628,2629,2631,2634,2636,2638,2640,2642,2644,2646,2649,2651,2653,2655,2658,2660,2662,2664,2666,2668,2670],{"class":309,"line":489},[307,2630,1400],{"class":313},[307,2632,2633],{"class":823}," sub ",[307,2635,1352],{"class":321},[307,2637,318],{"class":317},[307,2639,322],{"class":823},[307,2641,1433],{"class":321},[307,2643,1436],{"class":366},[307,2645,329],{"class":321},[307,2647,2648],{"class":823}," subAnchorEl",[307,2650,844],{"class":321},[307,2652,1441],{"class":366},[307,2654,329],{"class":321},[307,2656,2657],{"class":823}," subFloatingEl",[307,2659,844],{"class":321},[307,2661,2188],{"class":366},[307,2663,329],{"class":321},[307,2665,2597],{"class":823},[307,2667,1453],{"class":321},[307,2669,745],{"class":823},[307,2671,342],{"class":321},[307,2673,2674],{"class":309,"line":494},[307,2675,349],{"emptyLinePlaceholder":348},[307,2677,2678,2680,2683],{"class":309,"line":519},[307,2679,171],{"class":317},[307,2681,2682],{"class":823},"(root)",[307,2684,342],{"class":321},[307,2686,2687,2689,2692,2694,2696,2698,2700,2702,2704,2706,2708,2710],{"class":309,"line":537},[307,2688,171],{"class":317},[307,2690,2691],{"class":823},"(sub",[307,2693,844],{"class":321},[307,2695,1683],{"class":321},[307,2697,2216],{"class":366},[307,2699,329],{"class":321},[307,2701,454],{"class":321},[307,2703,2223],{"class":457},[307,2705,461],{"class":321},[307,2707,1688],{"class":321},[307,2709,745],{"class":823},[307,2711,342],{"class":321},[307,2713,2714,2716,2718],{"class":309,"line":552},[307,2715,205],{"class":317},[307,2717,2682],{"class":823},[307,2719,342],{"class":321},[307,2721,2722,2724,2726],{"class":309,"line":557},[307,2723,209],{"class":317},[307,2725,2682],{"class":823},[307,2727,342],{"class":321},[307,2729,2730,2732,2735],{"class":309,"line":567},[307,2731,205],{"class":317},[307,2733,2734],{"class":823},"(sub)",[307,2736,342],{"class":321},[307,2738,2739,2741,2743],{"class":309,"line":582},[307,2740,209],{"class":317},[307,2742,2734],{"class":823},[307,2744,342],{"class":321},[307,2746,2747,2749,2751],{"class":309,"line":597},[307,2748,1882],{"class":321},[307,2750,1657],{"class":366},[307,2752,1674],{"class":321},[293,2754,2756],{"id":2755},"see-also","See Also",[2758,2759,2760,2767,2774,2781,2788],"ul",{},[1538,2761,2762,2766],{},[1022,2763,2764],{"href":172},[280,2765,171],{}," - Add reactive coordinate calculations",[1538,2768,2769,2773],{},[1022,2770,2771],{"href":206},[280,2772,205],{}," - Coordinate outside clicks across node hierarchies",[1538,2775,2776,2780],{},[1022,2777,2778],{"href":210},[280,2779,209],{}," - Coordinate leaf-first Escape key dismissals across node hierarchies",[1538,2782,2783,2787],{},[1022,2784,2785],{"href":190},[280,2786,189],{}," - Toggle open state on click or tap",[1538,2789,2790,2792],{},[1022,2791,36],{"href":37}," - Conceptual guide to floating nodes",[2794,2795,2796],"style",{},"html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}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 .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}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}",{"title":303,"searchDepth":345,"depth":345,"links":2798},[2799,2800,2801,2802,2808,2812],{"id":295,"depth":345,"text":296},{"id":326,"depth":345,"text":977},{"id":1145,"depth":345,"text":1146},{"id":1310,"depth":345,"text":1311,"children":2803},[2804,2805,2806],{"id":1315,"depth":352,"text":1316},{"id":1527,"depth":352,"text":1528},{"id":1598,"depth":352,"text":2807},"Spatial Containment (node.contains)",{"id":1627,"depth":345,"text":1628,"children":2809},[2810,2811],{"id":1631,"depth":352,"text":1632},{"id":2382,"depth":352,"text":2383},{"id":2755,"depth":345,"text":2756},"Create a unified composite floating node with shared refs, open state, and hierarchical coordination.","md",null,{},{"title":162,"description":2813},"rKmuDIQ8BO9v0GdxMlfsnvvD_dUBhVpGNT-IGY4UXJQ",[2820,2822],{"title":152,"path":153,"stem":154,"description":2821,"children":-1},"Shared types, protocols, and data structures across the VFloat library.",{"title":171,"path":172,"stem":173,"description":2823,"children":-1},"Add reactive positioning styles to a floating node using Floating UI.",1791046165701]