[{"data":1,"prerenderedAt":1009},["ShallowReactive",2],{"navigation_docs":3,"-guide-accessibility-control-open-state":271,"-guide-accessibility-control-open-state-surround":1004},[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":98,"body":273,"description":998,"extension":999,"links":1000,"meta":1001,"navigation":417,"path":99,"seo":1002,"stem":100,"__hash__":1003},"docs\u002F1.guide\u002F5.accessibility\u002F1.control-open-state.md",{"type":274,"value":275,"toc":991},"minimark",[276,280,283,286,291,309,563,570,574,580,876,882,910,920,924,927,940,943,954,958,964,970,974,987],[277,278,279],"p",{},"Let's talk about open state.",[277,281,282],{},"Most floating surfaces are easiest when VFloat owns the open state for you. But sometimes the parent component needs to stay in charge because the floating surface has to follow routing, forms, or other application rules.",[277,284,285],{},"This page shows both models and when each one makes sense.",[287,288,290],"h2",{"id":289},"the-default-let-vfloat-own-it","The default: let VFloat own it",[277,292,293,294,300,301,304,305,308],{},"If you call ",[295,296,297],"a",{"href":163},[298,299,162],"code",{}," without ",[298,302,303],{},"open",", VFloat creates and owns an internal ",[298,306,307],{},"ref(false)"," for you.",[310,311,316],"pre",{"className":312,"code":313,"language":314,"meta":315,"style":315},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\nimport { ref } from \"vue\";\nimport { useClick, useFloatingNode } from \"v-float\";\n\nconst anchorEl = ref\u003CHTMLElement | null>(null);\nconst floatingEl = ref\u003CHTMLElement | null>(null);\n\nconst node = useFloatingNode({\n  anchorEl,\n  floatingEl,\n});\n\nuseClick(node);\n\u003C\u002Fscript>\n","vue","",[298,317,318,353,383,412,419,459,489,494,511,520,528,538,543,553],{"__ignoreMap":315},[319,320,323,327,331,335,338,341,344,348,350],"span",{"class":321,"line":322},"line",1,[319,324,326],{"class":325},"sMK4o","\u003C",[319,328,330],{"class":329},"swJcz","script",[319,332,334],{"class":333},"spNyl"," setup",[319,336,337],{"class":333}," lang",[319,339,340],{"class":325},"=",[319,342,343],{"class":325},"\"",[319,345,347],{"class":346},"sfazB","ts",[319,349,343],{"class":325},[319,351,352],{"class":325},">\n",[319,354,356,360,363,367,370,373,376,378,380],{"class":321,"line":355},2,[319,357,359],{"class":358},"s7zQu","import",[319,361,362],{"class":325}," {",[319,364,366],{"class":365},"sTEyZ"," ref",[319,368,369],{"class":325}," }",[319,371,372],{"class":358}," from",[319,374,375],{"class":325}," \"",[319,377,314],{"class":346},[319,379,343],{"class":325},[319,381,382],{"class":325},";\n",[319,384,386,388,390,393,396,399,401,403,405,408,410],{"class":321,"line":385},3,[319,387,359],{"class":358},[319,389,362],{"class":325},[319,391,392],{"class":365}," useClick",[319,394,395],{"class":325},",",[319,397,398],{"class":365}," useFloatingNode",[319,400,369],{"class":325},[319,402,372],{"class":358},[319,404,375],{"class":325},[319,406,407],{"class":346},"v-float",[319,409,343],{"class":325},[319,411,382],{"class":325},[319,413,415],{"class":321,"line":414},4,[319,416,418],{"emptyLinePlaceholder":417},true,"\n",[319,420,422,425,428,430,433,435,439,442,445,448,451,454,457],{"class":321,"line":421},5,[319,423,424],{"class":333},"const",[319,426,427],{"class":365}," anchorEl ",[319,429,340],{"class":325},[319,431,366],{"class":432},"s2Zo4",[319,434,326],{"class":325},[319,436,438],{"class":437},"sBMFI","HTMLElement",[319,440,441],{"class":325}," |",[319,443,444],{"class":437}," null",[319,446,447],{"class":325},">",[319,449,450],{"class":365},"(",[319,452,453],{"class":325},"null",[319,455,456],{"class":365},")",[319,458,382],{"class":325},[319,460,462,464,467,469,471,473,475,477,479,481,483,485,487],{"class":321,"line":461},6,[319,463,424],{"class":333},[319,465,466],{"class":365}," floatingEl ",[319,468,340],{"class":325},[319,470,366],{"class":432},[319,472,326],{"class":325},[319,474,438],{"class":437},[319,476,441],{"class":325},[319,478,444],{"class":437},[319,480,447],{"class":325},[319,482,450],{"class":365},[319,484,453],{"class":325},[319,486,456],{"class":365},[319,488,382],{"class":325},[319,490,492],{"class":321,"line":491},7,[319,493,418],{"emptyLinePlaceholder":417},[319,495,497,499,502,504,506,508],{"class":321,"line":496},8,[319,498,424],{"class":333},[319,500,501],{"class":365}," node ",[319,503,340],{"class":325},[319,505,398],{"class":432},[319,507,450],{"class":365},[319,509,510],{"class":325},"{\n",[319,512,514,517],{"class":321,"line":513},9,[319,515,516],{"class":365},"  anchorEl",[319,518,519],{"class":325},",\n",[319,521,523,526],{"class":321,"line":522},10,[319,524,525],{"class":365},"  floatingEl",[319,527,519],{"class":325},[319,529,531,534,536],{"class":321,"line":530},11,[319,532,533],{"class":325},"}",[319,535,456],{"class":365},[319,537,382],{"class":325},[319,539,541],{"class":321,"line":540},12,[319,542,418],{"emptyLinePlaceholder":417},[319,544,546,548,551],{"class":321,"line":545},13,[319,547,189],{"class":432},[319,549,550],{"class":365},"(node)",[319,552,382],{"class":325},[319,554,556,559,561],{"class":321,"line":555},14,[319,557,558],{"class":325},"\u003C\u002F",[319,560,330],{"class":329},[319,562,352],{"class":325},[277,564,565,566,569],{},"This is usually the simplest starting point. The component stays small, and your interaction composables and template all coordinate through ",[298,567,568],{},"node.open",".",[287,571,573],{"id":572},"the-controlled-version","The controlled version",[277,575,576,577,579],{},"When the parent needs to read or react to the open state directly in its own logic, pass your own ",[298,578,303],{}," ref.",[310,581,583],{"className":312,"code":582,"language":314,"meta":315,"style":315},"\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);\nconst open = ref(false);\n\nconst node = useFloatingNode({\n  anchorEl,\n  floatingEl,\n  open,\n});\n\nuseClick(node);\nuseOutsideClick(node);\nuseEscapeKey(node);\n\n\u002F\u002F To change the state programmatically, update the ref or node.open\nfunction close() {\n  open.value = false;\n}\n\u003C\u002Fscript>\n",[298,584,585,605,625,659,663,691,719,740,744,758,764,770,777,785,789,798,807,816,821,828,843,861,867],{"__ignoreMap":315},[319,586,587,589,591,593,595,597,599,601,603],{"class":321,"line":322},[319,588,326],{"class":325},[319,590,330],{"class":329},[319,592,334],{"class":333},[319,594,337],{"class":333},[319,596,340],{"class":325},[319,598,343],{"class":325},[319,600,347],{"class":346},[319,602,343],{"class":325},[319,604,352],{"class":325},[319,606,607,609,611,613,615,617,619,621,623],{"class":321,"line":355},[319,608,359],{"class":358},[319,610,362],{"class":325},[319,612,366],{"class":365},[319,614,369],{"class":325},[319,616,372],{"class":358},[319,618,375],{"class":325},[319,620,314],{"class":346},[319,622,343],{"class":325},[319,624,382],{"class":325},[319,626,627,629,631,633,635,638,640,642,644,647,649,651,653,655,657],{"class":321,"line":385},[319,628,359],{"class":358},[319,630,362],{"class":325},[319,632,392],{"class":365},[319,634,395],{"class":325},[319,636,637],{"class":365}," useEscapeKey",[319,639,395],{"class":325},[319,641,398],{"class":365},[319,643,395],{"class":325},[319,645,646],{"class":365}," useOutsideClick",[319,648,369],{"class":325},[319,650,372],{"class":358},[319,652,375],{"class":325},[319,654,407],{"class":346},[319,656,343],{"class":325},[319,658,382],{"class":325},[319,660,661],{"class":321,"line":414},[319,662,418],{"emptyLinePlaceholder":417},[319,664,665,667,669,671,673,675,677,679,681,683,685,687,689],{"class":321,"line":421},[319,666,424],{"class":333},[319,668,427],{"class":365},[319,670,340],{"class":325},[319,672,366],{"class":432},[319,674,326],{"class":325},[319,676,438],{"class":437},[319,678,441],{"class":325},[319,680,444],{"class":437},[319,682,447],{"class":325},[319,684,450],{"class":365},[319,686,453],{"class":325},[319,688,456],{"class":365},[319,690,382],{"class":325},[319,692,693,695,697,699,701,703,705,707,709,711,713,715,717],{"class":321,"line":461},[319,694,424],{"class":333},[319,696,466],{"class":365},[319,698,340],{"class":325},[319,700,366],{"class":432},[319,702,326],{"class":325},[319,704,438],{"class":437},[319,706,441],{"class":325},[319,708,444],{"class":437},[319,710,447],{"class":325},[319,712,450],{"class":365},[319,714,453],{"class":325},[319,716,456],{"class":365},[319,718,382],{"class":325},[319,720,721,723,726,728,730,732,736,738],{"class":321,"line":491},[319,722,424],{"class":333},[319,724,725],{"class":365}," open ",[319,727,340],{"class":325},[319,729,366],{"class":432},[319,731,450],{"class":365},[319,733,735],{"class":734},"sfNiH","false",[319,737,456],{"class":365},[319,739,382],{"class":325},[319,741,742],{"class":321,"line":496},[319,743,418],{"emptyLinePlaceholder":417},[319,745,746,748,750,752,754,756],{"class":321,"line":513},[319,747,424],{"class":333},[319,749,501],{"class":365},[319,751,340],{"class":325},[319,753,398],{"class":432},[319,755,450],{"class":365},[319,757,510],{"class":325},[319,759,760,762],{"class":321,"line":522},[319,761,516],{"class":365},[319,763,519],{"class":325},[319,765,766,768],{"class":321,"line":530},[319,767,525],{"class":365},[319,769,519],{"class":325},[319,771,772,775],{"class":321,"line":540},[319,773,774],{"class":365},"  open",[319,776,519],{"class":325},[319,778,779,781,783],{"class":321,"line":545},[319,780,533],{"class":325},[319,782,456],{"class":365},[319,784,382],{"class":325},[319,786,787],{"class":321,"line":555},[319,788,418],{"emptyLinePlaceholder":417},[319,790,792,794,796],{"class":321,"line":791},15,[319,793,189],{"class":432},[319,795,550],{"class":365},[319,797,382],{"class":325},[319,799,801,803,805],{"class":321,"line":800},16,[319,802,205],{"class":432},[319,804,550],{"class":365},[319,806,382],{"class":325},[319,808,810,812,814],{"class":321,"line":809},17,[319,811,209],{"class":432},[319,813,550],{"class":365},[319,815,382],{"class":325},[319,817,819],{"class":321,"line":818},18,[319,820,418],{"emptyLinePlaceholder":417},[319,822,824],{"class":321,"line":823},19,[319,825,827],{"class":826},"sHwdD","\u002F\u002F To change the state programmatically, update the ref or node.open\n",[319,829,831,834,837,840],{"class":321,"line":830},20,[319,832,833],{"class":333},"function",[319,835,836],{"class":432}," close",[319,838,839],{"class":325},"()",[319,841,842],{"class":325}," {\n",[319,844,846,848,850,853,856,859],{"class":321,"line":845},21,[319,847,774],{"class":365},[319,849,569],{"class":325},[319,851,852],{"class":365},"value",[319,854,855],{"class":325}," =",[319,857,858],{"class":734}," false",[319,860,382],{"class":325},[319,862,864],{"class":321,"line":863},22,[319,865,866],{"class":325},"}\n",[319,868,870,872,874],{"class":321,"line":869},23,[319,871,558],{"class":325},[319,873,330],{"class":329},[319,875,352],{"class":325},[277,877,878,879,881],{},"When using this pattern, VFloat automatically updates the ",[298,880,303],{}," ref when interaction helpers (like click or hover) trigger open changes.",[277,883,884,885,888,889,892,893,895,896,899,900,903,904,569],{},"To update the state programmatically, mutate ",[298,886,887],{},"node.open.value = false"," (or ",[298,890,891],{},"open.value = false","). Because ",[298,894,568],{}," is a standard Vue ",[298,897,898],{},"Ref\u003Cboolean>",", changes immediately trigger Vue reactivity. Note that closing a node never cascades to related nodes on its own. When family teardown must follow, walk open descendants explicitly using ",[298,901,902],{},"node.traverse((child) => child.open.value = false, { order: \"bottom-up\" })"," on your ",[295,905,907],{"href":906},"\u002Fapi\u002Foverview\u002Ftypes#floatingnode",[298,908,909],{},"FloatingNode",[911,912,913,914,916,917,919],"warning",{},"The ",[298,915,303],{}," ref passed to ",[298,918,162],{}," options must be synchronously mutable. Avoid passing read-only refs or computed properties that defer updates, as they can cause rendering state lag.",[287,921,923],{"id":922},"when-each-model-makes-sense","When each model makes sense",[277,925,926],{},"Choose uncontrolled when:",[928,929,930,934,937],"ul",{},[931,932,933],"li",{},"The surface is local",[931,935,936],{},"The component can own its own lifecycle",[931,938,939],{},"Simplicity matters most",[277,941,942],{},"Choose controlled when:",[928,944,945,948,951],{},[931,946,947],{},"Another component needs to decide whether the surface may open",[931,949,950],{},"Closing the surface should trigger other state updates",[931,952,953],{},"Multiple related surfaces need shared coordination",[287,955,957],{"id":956},"keep-one-node-per-surface","Keep one node per surface",[277,959,960,961,569],{},"Whatever state model you choose, make sure every interaction composable for that surface shares the same ",[298,962,963],{},"node",[277,965,966,967,969],{},"That shared ",[298,968,963],{}," is what lets click, escape handling, and positioning cooperate instead of fighting each other.",[287,971,973],{"id":972},"where-to-go-next","Where to go next",[277,975,976,977,979,980,983,984,569],{},"If you want to understand the shared model behind both versions, read ",[295,978,36],{"href":37},". If you are ready for practical builds, jump to ",[295,981,982],{"href":59},"Build Accessible Tooltips"," or ",[295,985,986],{"href":63},"Build Popovers and Dropdowns",[988,989,990],"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);}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}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}",{"title":315,"searchDepth":355,"depth":355,"links":992},[993,994,995,996,997],{"id":289,"depth":355,"text":290},{"id":572,"depth":355,"text":573},{"id":922,"depth":355,"text":923},{"id":956,"depth":355,"text":957},{"id":972,"depth":355,"text":973},"Control floating open state from your own Vue state and event handling.","md",null,{},{"title":98,"description":998},"IRrvwmiB1G2UEytuQCAljcDSuaKrWlaowMCN9fnK8wY",[1005,1007],{"title":88,"path":89,"stem":90,"description":1006,"children":-1},"Understand how middleware runs and how each step affects positioning.",{"title":102,"path":103,"stem":104,"description":1008,"children":-1},"Choose the right focus behavior for anchored and floating UI.",1791046167663]