[{"data":1,"prerenderedAt":949},["ShallowReactive",2],{"navigation_docs":3,"-guide-accessibility-focus-models":271,"-guide-accessibility-focus-models-surround":944},[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":102,"body":273,"description":938,"extension":939,"links":940,"meta":941,"navigation":430,"path":103,"seo":942,"stem":104,"__hash__":943},"docs\u002F1.guide\u002F5.accessibility\u002F2.focus-models.md",{"type":274,"value":275,"toc":929},"minimark",[276,280,283,293,298,301,319,322,563,573,577,580,598,605,612,623,630,637,640,839,853,901,905,925],[277,278,279],"p",{},"Focus behavior is one of the easiest places for floating UI to feel either polished or frustrating. VFloat gives you several focus-related tools, but they make more sense when you think in focus models instead of individual options.",[277,281,282],{},"There are two focus questions you will run into again and again:",[284,285,286,290],"ul",{},[287,288,289],"li",{},"Where should DOM focus live?",[287,291,292],{},"What should happen when focus moves?",[294,295,297],"h2",{"id":296},"focus-stays-on-the-trigger","Focus stays on the trigger",[277,299,300],{},"Sometimes the trigger should keep focus while the floating surface behaves like a lightweight companion. This is common for simple tooltips and combobox-like inputs with active descendants.",[284,302,303,316],{},[287,304,305,311,312,315],{},[306,307,308],"a",{"href":198},[309,310,197],"code",{}," detects when the trigger receives ",[309,313,314],{},":focus-visible"," to open the surface, and closes when focus leaves the family.",[287,317,318],{},"Focus never leaves the input or trigger.",[277,320,321],{},"A minimal focus trigger takes one shared node:",[323,324,329],"pre",{"className":325,"code":326,"language":327,"meta":328,"style":328},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\nimport { ref } from \"vue\";\nimport { useFloatingNode, useFocus } from \"v-float\";\n\nconst anchorEl = ref\u003CHTMLElement | null>(null);\nconst floatingEl = ref\u003CHTMLElement | null>(null);\n\nconst node = useFloatingNode({ anchorEl, floatingEl });\n\nuseFocus(node);\n\u003C\u002Fscript>\n","vue","",[309,330,331,366,396,425,432,472,502,507,538,543,553],{"__ignoreMap":328},[332,333,336,340,344,348,351,354,357,361,363],"span",{"class":334,"line":335},"line",1,[332,337,339],{"class":338},"sMK4o","\u003C",[332,341,343],{"class":342},"swJcz","script",[332,345,347],{"class":346},"spNyl"," setup",[332,349,350],{"class":346}," lang",[332,352,353],{"class":338},"=",[332,355,356],{"class":338},"\"",[332,358,360],{"class":359},"sfazB","ts",[332,362,356],{"class":338},[332,364,365],{"class":338},">\n",[332,367,369,373,376,380,383,386,389,391,393],{"class":334,"line":368},2,[332,370,372],{"class":371},"s7zQu","import",[332,374,375],{"class":338}," {",[332,377,379],{"class":378},"sTEyZ"," ref",[332,381,382],{"class":338}," }",[332,384,385],{"class":371}," from",[332,387,388],{"class":338}," \"",[332,390,327],{"class":359},[332,392,356],{"class":338},[332,394,395],{"class":338},";\n",[332,397,399,401,403,406,409,412,414,416,418,421,423],{"class":334,"line":398},3,[332,400,372],{"class":371},[332,402,375],{"class":338},[332,404,405],{"class":378}," useFloatingNode",[332,407,408],{"class":338},",",[332,410,411],{"class":378}," useFocus",[332,413,382],{"class":338},[332,415,385],{"class":371},[332,417,388],{"class":338},[332,419,420],{"class":359},"v-float",[332,422,356],{"class":338},[332,424,395],{"class":338},[332,426,428],{"class":334,"line":427},4,[332,429,431],{"emptyLinePlaceholder":430},true,"\n",[332,433,435,438,441,443,446,448,452,455,458,461,464,467,470],{"class":334,"line":434},5,[332,436,437],{"class":346},"const",[332,439,440],{"class":378}," anchorEl ",[332,442,353],{"class":338},[332,444,379],{"class":445},"s2Zo4",[332,447,339],{"class":338},[332,449,451],{"class":450},"sBMFI","HTMLElement",[332,453,454],{"class":338}," |",[332,456,457],{"class":450}," null",[332,459,460],{"class":338},">",[332,462,463],{"class":378},"(",[332,465,466],{"class":338},"null",[332,468,469],{"class":378},")",[332,471,395],{"class":338},[332,473,475,477,480,482,484,486,488,490,492,494,496,498,500],{"class":334,"line":474},6,[332,476,437],{"class":346},[332,478,479],{"class":378}," floatingEl ",[332,481,353],{"class":338},[332,483,379],{"class":445},[332,485,339],{"class":338},[332,487,451],{"class":450},[332,489,454],{"class":338},[332,491,457],{"class":450},[332,493,460],{"class":338},[332,495,463],{"class":378},[332,497,466],{"class":338},[332,499,469],{"class":378},[332,501,395],{"class":338},[332,503,505],{"class":334,"line":504},7,[332,506,431],{"emptyLinePlaceholder":430},[332,508,510,512,515,517,519,521,524,527,529,531,534,536],{"class":334,"line":509},8,[332,511,437],{"class":346},[332,513,514],{"class":378}," node ",[332,516,353],{"class":338},[332,518,405],{"class":445},[332,520,463],{"class":378},[332,522,523],{"class":338},"{",[332,525,526],{"class":378}," anchorEl",[332,528,408],{"class":338},[332,530,479],{"class":378},[332,532,533],{"class":338},"}",[332,535,469],{"class":378},[332,537,395],{"class":338},[332,539,541],{"class":334,"line":540},9,[332,542,431],{"emptyLinePlaceholder":430},[332,544,546,548,551],{"class":334,"line":545},10,[332,547,197],{"class":445},[332,549,550],{"class":378},"(node)",[332,552,395],{"class":338},[332,554,556,559,561],{"class":334,"line":555},11,[332,557,558],{"class":338},"\u003C\u002F",[332,560,343],{"class":342},[332,562,365],{"class":338},[277,564,565,568,569,572],{},[309,566,567],{},"useFocus(node)"," opens and closes the same node every other interaction composable reads, so it composes with hover or click without extra state. Nested surfaces are recognized automatically as inside the family via ",[309,570,571],{},"node.contains()",".",[294,574,576],{"id":575},"focus-moves-into-the-surface","Focus moves into the surface",[277,578,579],{},"Sometimes the floating content should become the focus destination. This is common for menus, action lists, dialogs, and modal content.",[284,581,582],{},[287,583,584,588,589,593,594,597],{},[306,585,586],{"href":202},[309,587,201],{}," handles the entire surface focus lifecycle: routing initial focus inside on open, trapping or wrapping ",[590,591,592],"kbd",{},"Tab"," navigation, isolating outside content with ",[309,595,596],{},"inert",", and returning focus to the trigger on close.",[294,599,601,604],{"id":600},"usefocus-and-focus-visible-behavior",[309,602,603],{},"useFocus()"," and focus-visible behavior",[277,606,607,611],{},[306,608,609],{"href":198},[309,610,197],{}," is the composable that opens and closes a surface from anchor focus and blur.",[277,613,614,615,618,619,622],{},"One important detail is that it is keyboard-first by default. It respects focus-visible behavior (",[309,616,617],{},"requireFocusVisible: true","), which means pointer-triggered focus does not automatically behave the same way as keyboard-triggered focus. Blur handling is deferred a tick and reads ",[309,620,621],{},"activeElement",", so Shadow DOM and programmatic focus moves close reliably.",[294,624,626,629],{"id":625},"usefocustrap-surface-focus-orchestration",[309,627,628],{},"useFocusTrap()",": surface focus orchestration",[277,631,632,636],{},[306,633,634],{"href":202},[309,635,201],{}," is for surfaces that take focus or must contain focus while open.",[277,638,639],{},"A modal surface takes the same shared node plus one option:",[323,641,643],{"className":325,"code":642,"language":327,"meta":328,"style":328},"\u003Cscript setup lang=\"ts\">\nimport { ref } from \"vue\";\nimport { useFloatingNode, useFocusTrap } from \"v-float\";\n\nconst anchorEl = ref\u003CHTMLElement | null>(null);\nconst floatingEl = ref\u003CHTMLElement | null>(null);\n\nconst node = useFloatingNode({ anchorEl, floatingEl });\n\nuseFocusTrap(node, { modal: true });\n\u003C\u002Fscript>\n",[309,644,645,665,685,710,714,742,770,774,800,804,831],{"__ignoreMap":328},[332,646,647,649,651,653,655,657,659,661,663],{"class":334,"line":335},[332,648,339],{"class":338},[332,650,343],{"class":342},[332,652,347],{"class":346},[332,654,350],{"class":346},[332,656,353],{"class":338},[332,658,356],{"class":338},[332,660,360],{"class":359},[332,662,356],{"class":338},[332,664,365],{"class":338},[332,666,667,669,671,673,675,677,679,681,683],{"class":334,"line":368},[332,668,372],{"class":371},[332,670,375],{"class":338},[332,672,379],{"class":378},[332,674,382],{"class":338},[332,676,385],{"class":371},[332,678,388],{"class":338},[332,680,327],{"class":359},[332,682,356],{"class":338},[332,684,395],{"class":338},[332,686,687,689,691,693,695,698,700,702,704,706,708],{"class":334,"line":398},[332,688,372],{"class":371},[332,690,375],{"class":338},[332,692,405],{"class":378},[332,694,408],{"class":338},[332,696,697],{"class":378}," useFocusTrap",[332,699,382],{"class":338},[332,701,385],{"class":371},[332,703,388],{"class":338},[332,705,420],{"class":359},[332,707,356],{"class":338},[332,709,395],{"class":338},[332,711,712],{"class":334,"line":427},[332,713,431],{"emptyLinePlaceholder":430},[332,715,716,718,720,722,724,726,728,730,732,734,736,738,740],{"class":334,"line":434},[332,717,437],{"class":346},[332,719,440],{"class":378},[332,721,353],{"class":338},[332,723,379],{"class":445},[332,725,339],{"class":338},[332,727,451],{"class":450},[332,729,454],{"class":338},[332,731,457],{"class":450},[332,733,460],{"class":338},[332,735,463],{"class":378},[332,737,466],{"class":338},[332,739,469],{"class":378},[332,741,395],{"class":338},[332,743,744,746,748,750,752,754,756,758,760,762,764,766,768],{"class":334,"line":474},[332,745,437],{"class":346},[332,747,479],{"class":378},[332,749,353],{"class":338},[332,751,379],{"class":445},[332,753,339],{"class":338},[332,755,451],{"class":450},[332,757,454],{"class":338},[332,759,457],{"class":450},[332,761,460],{"class":338},[332,763,463],{"class":378},[332,765,466],{"class":338},[332,767,469],{"class":378},[332,769,395],{"class":338},[332,771,772],{"class":334,"line":504},[332,773,431],{"emptyLinePlaceholder":430},[332,775,776,778,780,782,784,786,788,790,792,794,796,798],{"class":334,"line":509},[332,777,437],{"class":346},[332,779,514],{"class":378},[332,781,353],{"class":338},[332,783,405],{"class":445},[332,785,463],{"class":378},[332,787,523],{"class":338},[332,789,526],{"class":378},[332,791,408],{"class":338},[332,793,479],{"class":378},[332,795,533],{"class":338},[332,797,469],{"class":378},[332,799,395],{"class":338},[332,801,802],{"class":334,"line":540},[332,803,431],{"emptyLinePlaceholder":430},[332,805,806,808,811,813,815,818,821,825,827,829],{"class":334,"line":545},[332,807,201],{"class":445},[332,809,810],{"class":378},"(node",[332,812,408],{"class":338},[332,814,375],{"class":338},[332,816,817],{"class":342}," modal",[332,819,820],{"class":338},":",[332,822,824],{"class":823},"sfNiH"," true",[332,826,382],{"class":338},[332,828,469],{"class":378},[332,830,395],{"class":338},[332,832,833,835,837],{"class":334,"line":555},[332,834,558],{"class":338},[332,836,343],{"class":342},[332,838,365],{"class":338},[277,840,841,842,845,846,849,850,852],{},"Defaults are modal-first: ",[309,843,844],{},"modal: true",", ",[309,847,848],{},"returnFocus: true",", and outside elements are isolated with ",[309,851,596],{}," while open.",[284,854,855,872,882,888],{},[287,856,857,861,862,864,865,868,869,871],{},[858,859,860],"strong",{},"Modals and dialogs."," Traps focus inside, wraps ",[590,863,592],{}," \u002F ",[590,866,867],{},"Shift+Tab",", and applies ",[309,870,596],{}," to the outside page.",[287,873,874,877,878,881],{},[858,875,876],{},"Non-modal surfaces."," Focus is managed without trapping. Opt in to ",[309,879,880],{},"closeOnFocusOut"," when leaving should dismiss.",[287,883,884,887],{},[858,885,886],{},"Return focus."," Safely restores focus to the trigger on close without viewport jumps.",[287,889,890,893,894,896,897,900],{},[858,891,892],{},"Nested families."," Family awareness is built into the node via ",[309,895,571],{},". Closing a parent never cascades on its own; call ",[309,898,899],{},"node.traverse((descendant) => descendant.open.value = false, { order: \"bottom-up\" })"," when teardown must close the entire family cascade.",[294,902,904],{"id":903},"where-to-go-next","Where to go next",[284,906,907,913,919],{},[287,908,909,910,912],{},"Read ",[306,911,106],{"href":107}," for list-level focus decisions.",[287,914,909,915,918],{},[306,916,917],{"href":67},"Build Dialogs and Modals"," for modal focus flows.",[287,920,909,921,924],{},[306,922,923],{"href":133},"List Navigation Gotchas"," for the most common focus mistakes in floating lists.",[926,927,928],"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}",{"title":328,"searchDepth":368,"depth":368,"links":930},[931,932,933,935,937],{"id":296,"depth":368,"text":297},{"id":575,"depth":368,"text":576},{"id":600,"depth":368,"text":934},"useFocus() and focus-visible behavior",{"id":625,"depth":368,"text":936},"useFocusTrap(): surface focus orchestration",{"id":903,"depth":368,"text":904},"Choose the right focus behavior for anchored and floating UI.","md",null,{},{"title":102,"description":938},"qbDxOBGfPBOhD-knoxUF7pRA0EUEuDdyxzqVVVdVgK4",[945,947],{"title":98,"path":99,"stem":100,"description":946,"children":-1},"Control floating open state from your own Vue state and event handling.",{"title":106,"path":107,"stem":108,"description":948,"children":-1},"Add keyboard navigation to floating menus, dropdowns, and nested tree structures.",1791046167698]