[{"data":1,"prerenderedAt":4126},["ShallowReactive",2],{"navigation_docs":3,"-guide-components-build-nested-menus":271,"-guide-components-build-nested-menus-surround":4121},[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":70,"body":273,"description":4115,"extension":4116,"links":4117,"meta":4118,"navigation":608,"path":71,"seo":4119,"stem":72,"__hash__":4120},"docs\u002F1.guide\u002F3.components\u002F4.build-nested-menus.md",{"type":274,"value":275,"toc":4095},"minimark",[276,280,312,334,337,342,349,359,442,444,448,451,819,822,831,836,1198,1205,1551,1558,2039,2046,2053,2327,2334,2731,2738,3327,3329,3333,3340,4006,4008,4012,4055,4057,4061,4091],[277,278,279],"p",{},"Nested menus (submenus) introduce coordination challenges beyond single-level list navigation:",[281,282,283,287,295,302,305],"ul",{},[284,285,286],"li",{},"Which submenus are currently open?",[284,288,289,290,294],{},"When the user presses the expand key (",[291,292,293],"code",{},"ArrowRight","), how does focus enter the child submenu?",[284,296,297,298,301],{},"When the user presses the collapse key (",[291,299,300],{},"ArrowLeft","), how does focus return to the parent trigger item?",[284,303,304],{},"How do diagonal mouse movements toward the submenu avoid closing it prematurely?",[284,306,307,308,311],{},"When pressing ",[291,309,310],{},"Escape",", how does the system close only the deepest open submenu first?",[277,313,314,315,319,320,323,324,327,328,333],{},"In VFloat, these questions are resolved by the ",[316,317,318],"strong",{},"Unified Composite Node Architecture",". Submenus link directly into their parent floating node (either via opt-in Dependency Injection with ",[291,321,322],{},"parent: \"auto\""," or explicitly via ",[291,325,326],{},"parent: rootNode","), and pair each menu level with ",[329,330,331],"a",{"href":223},[291,332,222],{}," for physical item focus.",[335,336],"hr",{},[338,339,341],"h2",{"id":340},"the-composite-menu-architecture","The Composite Menu Architecture",[277,343,344,345,348],{},"Rather than creating a separate coordinator component, every menu level is a ",[291,346,347],{},"FloatingNode",":",[350,351,356],"pre",{"className":352,"code":354,"language":355},[353],"language-text","┌─────────────────────────────────────────────────────────────┐\n│ Root Menu Node │\n│ • anchorEl: Button │\n│ • floatingEl: RootMenuPanel │\n│ • provides itself to descendants via Vue DI │\n└──────────────────────────────┬──────────────────────────────┘\n │\n Opt-in DI (parent: \"auto\")\n or explicit parent: rootNode\n │\n ▼\n┌─────────────────────────────────────────────────────────────┐\n│ Submenu Node │\n│ • anchorEl: 'Share' Item Trigger │\n│ • floatingEl: SubmenuPanel │\n│ • child of Root Menu Node │\n└─────────────────────────────────────────────────────────────┘\n","text",[291,357,354],{"__ignoreMap":358},"",[360,361,362,371,396,410,433],"ol",{},[284,363,364,367,368,370],{},[316,365,366],{},"Composite linking:"," Submenus discover their parent node through Dependency Injection (",[291,369,322],{},").",[284,372,373,376,377,381,382,386,387,391,392,395],{},[316,374,375],{},"Family-aware interactions:"," ",[329,378,379],{"href":206},[291,380,205],{},", ",[329,383,384],{"href":210},[291,385,209],{},", and ",[329,388,389],{"href":194},[291,390,193],{}," use ",[291,393,394],{},"node.contains()"," to treat child submenus as internal to the parent, preventing accidental dismissals.",[284,397,398,376,401,405,406,409],{},[316,399,400],{},"Safe cursor corridors:",[329,402,403],{"href":194},[291,404,193],{}," with ",[291,407,408],{},"safePolygon: true"," keeps the submenu open while the cursor travels diagonally toward the submenu panel.",[284,411,412,376,415,419,420,423,424,426,427,423,430,432],{},[316,413,414],{},"Intent-driven navigation:",[329,416,417],{"href":223},[291,418,222],{}," fires ",[291,421,422],{},"onEnter"," (",[291,425,293],{},") to open the child submenu and ",[291,428,429],{},"onExit",[291,431,300],{},") to collapse back to the parent trigger.",[284,434,435,438,439,441],{},[316,436,437],{},"Leaf-first Escape:"," Pressing ",[291,440,310],{}," closes the innermost open submenu first with zero global event maps.",[335,443],{},[338,445,447],{"id":446},"complete-multi-component-example","Complete Multi-Component Example",[277,449,450],{},"Here is how compound menu primitives assemble in an application template:",[350,452,456],{"className":453,"code":454,"language":455,"meta":358,"style":358},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Ctemplate>\n \u003CMenuRoot>\n \u003CMenuTrigger>Options\u003C\u002FMenuTrigger>\n \u003CMenuContent>\n \u003Cbutton role=\"menuitem\" type=\"button\">New document\u003C\u002Fbutton>\n \u003Cbutton role=\"menuitem\" type=\"button\">Duplicate\u003C\u002Fbutton>\n\n \u003CMenuSub>\n \u003CMenuSubTrigger>Share\u003C\u002FMenuSubTrigger>\n \u003CMenuSubContent>\n \u003Cbutton role=\"menuitem\" type=\"button\">Copy link\u003C\u002Fbutton>\n \u003Cbutton role=\"menuitem\" type=\"button\">Email invite\u003C\u002Fbutton>\n \u003C\u002FMenuSubContent>\n \u003C\u002FMenuSub>\n\n \u003Cbutton role=\"menuitem\" type=\"button\">Delete\u003C\u002Fbutton>\n \u003C\u002FMenuContent>\n \u003C\u002FMenuRoot>\n\u003C\u002Ftemplate>\n","vue",[291,457,458,474,485,508,518,565,603,610,620,640,650,689,727,737,747,752,790,800,810],{"__ignoreMap":358},[459,460,463,467,471],"span",{"class":461,"line":462},"line",1,[459,464,466],{"class":465},"sMK4o","\u003C",[459,468,470],{"class":469},"swJcz","template",[459,472,473],{"class":465},">\n",[459,475,477,480,483],{"class":461,"line":476},2,[459,478,479],{"class":465}," \u003C",[459,481,482],{"class":469},"MenuRoot",[459,484,473],{"class":465},[459,486,488,491,494,497,501,504,506],{"class":461,"line":487},3,[459,489,490],{"class":465}," \u003C",[459,492,493],{"class":469},"MenuTrigger",[459,495,496],{"class":465},">",[459,498,500],{"class":499},"sTEyZ","Options",[459,502,503],{"class":465},"\u003C\u002F",[459,505,493],{"class":469},[459,507,473],{"class":465},[459,509,511,513,516],{"class":461,"line":510},4,[459,512,490],{"class":465},[459,514,515],{"class":469},"MenuContent",[459,517,473],{"class":465},[459,519,521,524,527,531,534,537,541,543,546,548,550,552,554,556,559,561,563],{"class":461,"line":520},5,[459,522,523],{"class":465}," \u003C",[459,525,526],{"class":469},"button",[459,528,530],{"class":529},"spNyl"," role",[459,532,533],{"class":465},"=",[459,535,536],{"class":465},"\"",[459,538,540],{"class":539},"sfazB","menuitem",[459,542,536],{"class":465},[459,544,545],{"class":529}," type",[459,547,533],{"class":465},[459,549,536],{"class":465},[459,551,526],{"class":539},[459,553,536],{"class":465},[459,555,496],{"class":465},[459,557,558],{"class":499},"New document",[459,560,503],{"class":465},[459,562,526],{"class":469},[459,564,473],{"class":465},[459,566,568,570,572,574,576,578,580,582,584,586,588,590,592,594,597,599,601],{"class":461,"line":567},6,[459,569,523],{"class":465},[459,571,526],{"class":469},[459,573,530],{"class":529},[459,575,533],{"class":465},[459,577,536],{"class":465},[459,579,540],{"class":539},[459,581,536],{"class":465},[459,583,545],{"class":529},[459,585,533],{"class":465},[459,587,536],{"class":465},[459,589,526],{"class":539},[459,591,536],{"class":465},[459,593,496],{"class":465},[459,595,596],{"class":499},"Duplicate",[459,598,503],{"class":465},[459,600,526],{"class":469},[459,602,473],{"class":465},[459,604,606],{"class":461,"line":605},7,[459,607,609],{"emptyLinePlaceholder":608},true,"\n",[459,611,613,615,618],{"class":461,"line":612},8,[459,614,523],{"class":465},[459,616,617],{"class":469},"MenuSub",[459,619,473],{"class":465},[459,621,623,626,629,631,634,636,638],{"class":461,"line":622},9,[459,624,625],{"class":465}," \u003C",[459,627,628],{"class":469},"MenuSubTrigger",[459,630,496],{"class":465},[459,632,633],{"class":499},"Share",[459,635,503],{"class":465},[459,637,628],{"class":469},[459,639,473],{"class":465},[459,641,643,645,648],{"class":461,"line":642},10,[459,644,625],{"class":465},[459,646,647],{"class":469},"MenuSubContent",[459,649,473],{"class":465},[459,651,653,656,658,660,662,664,666,668,670,672,674,676,678,680,683,685,687],{"class":461,"line":652},11,[459,654,655],{"class":465}," \u003C",[459,657,526],{"class":469},[459,659,530],{"class":529},[459,661,533],{"class":465},[459,663,536],{"class":465},[459,665,540],{"class":539},[459,667,536],{"class":465},[459,669,545],{"class":529},[459,671,533],{"class":465},[459,673,536],{"class":465},[459,675,526],{"class":539},[459,677,536],{"class":465},[459,679,496],{"class":465},[459,681,682],{"class":499},"Copy link",[459,684,503],{"class":465},[459,686,526],{"class":469},[459,688,473],{"class":465},[459,690,692,694,696,698,700,702,704,706,708,710,712,714,716,718,721,723,725],{"class":461,"line":691},12,[459,693,655],{"class":465},[459,695,526],{"class":469},[459,697,530],{"class":529},[459,699,533],{"class":465},[459,701,536],{"class":465},[459,703,540],{"class":539},[459,705,536],{"class":465},[459,707,545],{"class":529},[459,709,533],{"class":465},[459,711,536],{"class":465},[459,713,526],{"class":539},[459,715,536],{"class":465},[459,717,496],{"class":465},[459,719,720],{"class":499},"Email invite",[459,722,503],{"class":465},[459,724,526],{"class":469},[459,726,473],{"class":465},[459,728,730,733,735],{"class":461,"line":729},13,[459,731,732],{"class":465}," \u003C\u002F",[459,734,647],{"class":469},[459,736,473],{"class":465},[459,738,740,743,745],{"class":461,"line":739},14,[459,741,742],{"class":465}," \u003C\u002F",[459,744,617],{"class":469},[459,746,473],{"class":465},[459,748,750],{"class":461,"line":749},15,[459,751,609],{"emptyLinePlaceholder":608},[459,753,755,757,759,761,763,765,767,769,771,773,775,777,779,781,784,786,788],{"class":461,"line":754},16,[459,756,523],{"class":465},[459,758,526],{"class":469},[459,760,530],{"class":529},[459,762,533],{"class":465},[459,764,536],{"class":465},[459,766,540],{"class":539},[459,768,536],{"class":465},[459,770,545],{"class":529},[459,772,533],{"class":465},[459,774,536],{"class":465},[459,776,526],{"class":539},[459,778,536],{"class":465},[459,780,496],{"class":465},[459,782,783],{"class":499},"Delete",[459,785,503],{"class":465},[459,787,526],{"class":469},[459,789,473],{"class":465},[459,791,793,796,798],{"class":461,"line":792},17,[459,794,795],{"class":465}," \u003C\u002F",[459,797,515],{"class":469},[459,799,473],{"class":465},[459,801,803,806,808],{"class":461,"line":802},18,[459,804,805],{"class":465}," \u003C\u002F",[459,807,482],{"class":469},[459,809,473],{"class":465},[459,811,813,815,817],{"class":461,"line":812},19,[459,814,503],{"class":465},[459,816,470],{"class":469},[459,818,473],{"class":465},[277,820,821],{},"Here are the compound primitives that make this structure work.",[823,824,826,827,830],"h3",{"id":825},"_1-root-menu-menurootvue","1. Root Menu (",[291,828,829],{},"MenuRoot.vue",")",[277,832,833,835],{},[291,834,162],{}," automatically provides itself to all child components via Vue DI:",[350,837,839],{"className":453,"code":838,"language":455,"meta":358,"style":358},"\u003Cscript setup lang=\"ts\">\nimport { provide, ref } from \"vue\";\nimport { useFloatingNode, usePosition } from \"v-float\";\n\nconst anchorEl = ref\u003CHTMLElement | null>(null);\nconst floatingEl = ref\u003CHTMLElement | null>(null);\n\n\u002F\u002F Automatically provides rootNode to descendant components via DI\nconst rootNode = useFloatingNode({ anchorEl, floatingEl });\n\nusePosition(rootNode, {\n placement: \"bottom-start\",\n middlewares: { offset: 8, flip: true, shift: { padding: 12 } },\n});\n\nprovide(\"MenuRootContext\", { rootNode });\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n \u003Cslot \u002F>\n\u003C\u002Ftemplate>\n",[291,840,841,865,899,926,930,967,996,1000,1006,1036,1040,1052,1069,1120,1128,1132,1158,1166,1170,1178,1189],{"__ignoreMap":358},[459,842,843,845,848,851,854,856,858,861,863],{"class":461,"line":462},[459,844,466],{"class":465},[459,846,847],{"class":469},"script",[459,849,850],{"class":529}," setup",[459,852,853],{"class":529}," lang",[459,855,533],{"class":465},[459,857,536],{"class":465},[459,859,860],{"class":539},"ts",[459,862,536],{"class":465},[459,864,473],{"class":465},[459,866,867,871,874,877,880,883,886,889,892,894,896],{"class":461,"line":476},[459,868,870],{"class":869},"s7zQu","import",[459,872,873],{"class":465}," {",[459,875,876],{"class":499}," provide",[459,878,879],{"class":465},",",[459,881,882],{"class":499}," ref",[459,884,885],{"class":465}," }",[459,887,888],{"class":869}," from",[459,890,891],{"class":465}," \"",[459,893,455],{"class":539},[459,895,536],{"class":465},[459,897,898],{"class":465},";\n",[459,900,901,903,905,908,910,913,915,917,919,922,924],{"class":461,"line":487},[459,902,870],{"class":869},[459,904,873],{"class":465},[459,906,907],{"class":499}," useFloatingNode",[459,909,879],{"class":465},[459,911,912],{"class":499}," usePosition",[459,914,885],{"class":465},[459,916,888],{"class":869},[459,918,891],{"class":465},[459,920,921],{"class":539},"v-float",[459,923,536],{"class":465},[459,925,898],{"class":465},[459,927,928],{"class":461,"line":510},[459,929,609],{"emptyLinePlaceholder":608},[459,931,932,935,938,940,943,945,949,952,955,957,960,963,965],{"class":461,"line":520},[459,933,934],{"class":529},"const",[459,936,937],{"class":499}," anchorEl ",[459,939,533],{"class":465},[459,941,882],{"class":942},"s2Zo4",[459,944,466],{"class":465},[459,946,948],{"class":947},"sBMFI","HTMLElement",[459,950,951],{"class":465}," |",[459,953,954],{"class":947}," null",[459,956,496],{"class":465},[459,958,959],{"class":499},"(",[459,961,962],{"class":465},"null",[459,964,830],{"class":499},[459,966,898],{"class":465},[459,968,969,971,974,976,978,980,982,984,986,988,990,992,994],{"class":461,"line":567},[459,970,934],{"class":529},[459,972,973],{"class":499}," floatingEl ",[459,975,533],{"class":465},[459,977,882],{"class":942},[459,979,466],{"class":465},[459,981,948],{"class":947},[459,983,951],{"class":465},[459,985,954],{"class":947},[459,987,496],{"class":465},[459,989,959],{"class":499},[459,991,962],{"class":465},[459,993,830],{"class":499},[459,995,898],{"class":465},[459,997,998],{"class":461,"line":605},[459,999,609],{"emptyLinePlaceholder":608},[459,1001,1002],{"class":461,"line":612},[459,1003,1005],{"class":1004},"sHwdD","\u002F\u002F Automatically provides rootNode to descendant components via DI\n",[459,1007,1008,1010,1013,1015,1017,1019,1022,1025,1027,1029,1032,1034],{"class":461,"line":622},[459,1009,934],{"class":529},[459,1011,1012],{"class":499}," rootNode ",[459,1014,533],{"class":465},[459,1016,907],{"class":942},[459,1018,959],{"class":499},[459,1020,1021],{"class":465},"{",[459,1023,1024],{"class":499}," anchorEl",[459,1026,879],{"class":465},[459,1028,973],{"class":499},[459,1030,1031],{"class":465},"}",[459,1033,830],{"class":499},[459,1035,898],{"class":465},[459,1037,1038],{"class":461,"line":642},[459,1039,609],{"emptyLinePlaceholder":608},[459,1041,1042,1044,1047,1049],{"class":461,"line":652},[459,1043,171],{"class":942},[459,1045,1046],{"class":499},"(rootNode",[459,1048,879],{"class":465},[459,1050,1051],{"class":465}," {\n",[459,1053,1054,1057,1059,1061,1064,1066],{"class":461,"line":691},[459,1055,1056],{"class":469}," placement",[459,1058,348],{"class":465},[459,1060,891],{"class":465},[459,1062,1063],{"class":539},"bottom-start",[459,1065,536],{"class":465},[459,1067,1068],{"class":465},",\n",[459,1070,1071,1074,1076,1078,1081,1083,1087,1089,1092,1094,1098,1100,1103,1105,1107,1110,1112,1115,1117],{"class":461,"line":729},[459,1072,1073],{"class":469}," middlewares",[459,1075,348],{"class":465},[459,1077,873],{"class":465},[459,1079,1080],{"class":469}," offset",[459,1082,348],{"class":465},[459,1084,1086],{"class":1085},"sbssI"," 8",[459,1088,879],{"class":465},[459,1090,1091],{"class":469}," flip",[459,1093,348],{"class":465},[459,1095,1097],{"class":1096},"sfNiH"," true",[459,1099,879],{"class":465},[459,1101,1102],{"class":469}," shift",[459,1104,348],{"class":465},[459,1106,873],{"class":465},[459,1108,1109],{"class":469}," padding",[459,1111,348],{"class":465},[459,1113,1114],{"class":1085}," 12",[459,1116,885],{"class":465},[459,1118,1119],{"class":465}," },\n",[459,1121,1122,1124,1126],{"class":461,"line":739},[459,1123,1031],{"class":465},[459,1125,830],{"class":499},[459,1127,898],{"class":465},[459,1129,1130],{"class":461,"line":749},[459,1131,609],{"emptyLinePlaceholder":608},[459,1133,1134,1137,1139,1141,1144,1146,1148,1150,1152,1154,1156],{"class":461,"line":754},[459,1135,1136],{"class":942},"provide",[459,1138,959],{"class":499},[459,1140,536],{"class":465},[459,1142,1143],{"class":539},"MenuRootContext",[459,1145,536],{"class":465},[459,1147,879],{"class":465},[459,1149,873],{"class":465},[459,1151,1012],{"class":499},[459,1153,1031],{"class":465},[459,1155,830],{"class":499},[459,1157,898],{"class":465},[459,1159,1160,1162,1164],{"class":461,"line":792},[459,1161,503],{"class":465},[459,1163,847],{"class":469},[459,1165,473],{"class":465},[459,1167,1168],{"class":461,"line":802},[459,1169,609],{"emptyLinePlaceholder":608},[459,1171,1172,1174,1176],{"class":461,"line":812},[459,1173,466],{"class":465},[459,1175,470],{"class":469},[459,1177,473],{"class":465},[459,1179,1181,1183,1186],{"class":461,"line":1180},20,[459,1182,479],{"class":465},[459,1184,1185],{"class":469},"slot",[459,1187,1188],{"class":465}," \u002F>\n",[459,1190,1192,1194,1196],{"class":461,"line":1191},21,[459,1193,503],{"class":465},[459,1195,470],{"class":469},[459,1197,473],{"class":465},[823,1199,1201,1202,830],{"id":1200},"_2-root-trigger-menutriggervue","2. Root Trigger (",[291,1203,1204],{},"MenuTrigger.vue",[350,1206,1208],{"className":453,"code":1207,"language":455,"meta":358,"style":358},"\u003Cscript setup lang=\"ts\">\nimport { inject, ref, watchEffect } from \"vue\";\nimport { useClick } from \"v-float\";\n\nconst { rootNode } = inject\u003Cany>(\"MenuRootContext\");\nconst triggerRef = ref\u003CHTMLButtonElement | null>(null);\n\nwatchEffect(() => {\n rootNode.refs.anchorEl.value = triggerRef.value;\n});\n\nuseClick(rootNode);\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n \u003Cbutton\n ref=\"triggerRef\"\n type=\"button\"\n aria-haspopup=\"menu\"\n :aria-expanded=\"rootNode.open.value\"\n @click=\"rootNode.open.value = !rootNode.open.value\"\n >\n \u003Cslot \u002F>\n \u003C\u002Fbutton>\n\u003C\u002Ftemplate>\n",[291,1209,1210,1230,1260,1281,1285,1319,1349,1353,1368,1400,1408,1412,1421,1429,1433,1441,1448,1463,1476,1490,1504,1518,1524,1533,1542],{"__ignoreMap":358},[459,1211,1212,1214,1216,1218,1220,1222,1224,1226,1228],{"class":461,"line":462},[459,1213,466],{"class":465},[459,1215,847],{"class":469},[459,1217,850],{"class":529},[459,1219,853],{"class":529},[459,1221,533],{"class":465},[459,1223,536],{"class":465},[459,1225,860],{"class":539},[459,1227,536],{"class":465},[459,1229,473],{"class":465},[459,1231,1232,1234,1236,1239,1241,1243,1245,1248,1250,1252,1254,1256,1258],{"class":461,"line":476},[459,1233,870],{"class":869},[459,1235,873],{"class":465},[459,1237,1238],{"class":499}," inject",[459,1240,879],{"class":465},[459,1242,882],{"class":499},[459,1244,879],{"class":465},[459,1246,1247],{"class":499}," watchEffect",[459,1249,885],{"class":465},[459,1251,888],{"class":869},[459,1253,891],{"class":465},[459,1255,455],{"class":539},[459,1257,536],{"class":465},[459,1259,898],{"class":465},[459,1261,1262,1264,1266,1269,1271,1273,1275,1277,1279],{"class":461,"line":487},[459,1263,870],{"class":869},[459,1265,873],{"class":465},[459,1267,1268],{"class":499}," useClick",[459,1270,885],{"class":465},[459,1272,888],{"class":869},[459,1274,891],{"class":465},[459,1276,921],{"class":539},[459,1278,536],{"class":465},[459,1280,898],{"class":465},[459,1282,1283],{"class":461,"line":510},[459,1284,609],{"emptyLinePlaceholder":608},[459,1286,1287,1289,1291,1293,1295,1298,1300,1302,1305,1307,1309,1311,1313,1315,1317],{"class":461,"line":520},[459,1288,934],{"class":529},[459,1290,873],{"class":465},[459,1292,1012],{"class":499},[459,1294,1031],{"class":465},[459,1296,1297],{"class":465}," =",[459,1299,1238],{"class":942},[459,1301,466],{"class":465},[459,1303,1304],{"class":947},"any",[459,1306,496],{"class":465},[459,1308,959],{"class":499},[459,1310,536],{"class":465},[459,1312,1143],{"class":539},[459,1314,536],{"class":465},[459,1316,830],{"class":499},[459,1318,898],{"class":465},[459,1320,1321,1323,1326,1328,1330,1332,1335,1337,1339,1341,1343,1345,1347],{"class":461,"line":567},[459,1322,934],{"class":529},[459,1324,1325],{"class":499}," triggerRef ",[459,1327,533],{"class":465},[459,1329,882],{"class":942},[459,1331,466],{"class":465},[459,1333,1334],{"class":947},"HTMLButtonElement",[459,1336,951],{"class":465},[459,1338,954],{"class":947},[459,1340,496],{"class":465},[459,1342,959],{"class":499},[459,1344,962],{"class":465},[459,1346,830],{"class":499},[459,1348,898],{"class":465},[459,1350,1351],{"class":461,"line":605},[459,1352,609],{"emptyLinePlaceholder":608},[459,1354,1355,1358,1360,1363,1366],{"class":461,"line":612},[459,1356,1357],{"class":942},"watchEffect",[459,1359,959],{"class":499},[459,1361,1362],{"class":465},"()",[459,1364,1365],{"class":529}," =>",[459,1367,1051],{"class":465},[459,1369,1370,1373,1376,1379,1381,1384,1386,1389,1391,1394,1396,1398],{"class":461,"line":622},[459,1371,1372],{"class":499}," rootNode",[459,1374,1375],{"class":465},".",[459,1377,1378],{"class":499},"refs",[459,1380,1375],{"class":465},[459,1382,1383],{"class":499},"anchorEl",[459,1385,1375],{"class":465},[459,1387,1388],{"class":499},"value",[459,1390,1297],{"class":465},[459,1392,1393],{"class":499}," triggerRef",[459,1395,1375],{"class":465},[459,1397,1388],{"class":499},[459,1399,898],{"class":465},[459,1401,1402,1404,1406],{"class":461,"line":642},[459,1403,1031],{"class":465},[459,1405,830],{"class":499},[459,1407,898],{"class":465},[459,1409,1410],{"class":461,"line":652},[459,1411,609],{"emptyLinePlaceholder":608},[459,1413,1414,1416,1419],{"class":461,"line":691},[459,1415,189],{"class":942},[459,1417,1418],{"class":499},"(rootNode)",[459,1420,898],{"class":465},[459,1422,1423,1425,1427],{"class":461,"line":729},[459,1424,503],{"class":465},[459,1426,847],{"class":469},[459,1428,473],{"class":465},[459,1430,1431],{"class":461,"line":739},[459,1432,609],{"emptyLinePlaceholder":608},[459,1434,1435,1437,1439],{"class":461,"line":749},[459,1436,466],{"class":465},[459,1438,470],{"class":469},[459,1440,473],{"class":465},[459,1442,1443,1445],{"class":461,"line":754},[459,1444,479],{"class":465},[459,1446,1447],{"class":469},"button\n",[459,1449,1450,1453,1455,1457,1460],{"class":461,"line":792},[459,1451,1452],{"class":529}," ref",[459,1454,533],{"class":465},[459,1456,536],{"class":465},[459,1458,1459],{"class":539},"triggerRef",[459,1461,1462],{"class":465},"\"\n",[459,1464,1465,1468,1470,1472,1474],{"class":461,"line":802},[459,1466,1467],{"class":529}," type",[459,1469,533],{"class":465},[459,1471,536],{"class":465},[459,1473,526],{"class":539},[459,1475,1462],{"class":465},[459,1477,1478,1481,1483,1485,1488],{"class":461,"line":812},[459,1479,1480],{"class":529}," aria-haspopup",[459,1482,533],{"class":465},[459,1484,536],{"class":465},[459,1486,1487],{"class":539},"menu",[459,1489,1462],{"class":465},[459,1491,1492,1495,1497,1499,1502],{"class":461,"line":1180},[459,1493,1494],{"class":529}," :aria-expanded",[459,1496,533],{"class":465},[459,1498,536],{"class":465},[459,1500,1501],{"class":539},"rootNode.open.value",[459,1503,1462],{"class":465},[459,1505,1506,1509,1511,1513,1516],{"class":461,"line":1191},[459,1507,1508],{"class":529}," @click",[459,1510,533],{"class":465},[459,1512,536],{"class":465},[459,1514,1515],{"class":539},"rootNode.open.value = !rootNode.open.value",[459,1517,1462],{"class":465},[459,1519,1521],{"class":461,"line":1520},22,[459,1522,1523],{"class":465}," >\n",[459,1525,1527,1529,1531],{"class":461,"line":1526},23,[459,1528,490],{"class":465},[459,1530,1185],{"class":469},[459,1532,1188],{"class":465},[459,1534,1536,1538,1540],{"class":461,"line":1535},24,[459,1537,805],{"class":465},[459,1539,526],{"class":469},[459,1541,473],{"class":465},[459,1543,1545,1547,1549],{"class":461,"line":1544},25,[459,1546,503],{"class":465},[459,1548,470],{"class":469},[459,1550,473],{"class":465},[823,1552,1554,1555,830],{"id":1553},"_3-root-content-menucontentvue","3. Root Content (",[291,1556,1557],{},"MenuContent.vue",[350,1559,1561],{"className":453,"code":1560,"language":455,"meta":358,"style":358},"\u003Cscript setup lang=\"ts\">\nimport { inject, ref, shallowRef, watchEffect, provide } from \"vue\";\nimport { useEscapeKey, useOutsideClick, useRovingFocus } from \"v-float\";\n\nconst { rootNode } = inject\u003Cany>(\"MenuRootContext\");\nconst contentRef = ref\u003CHTMLDivElement | null>(null);\nconst itemEls = shallowRef\u003C(HTMLElement | null)[]>([]);\n\nwatchEffect(() => {\n rootNode.refs.floatingEl.value = contentRef.value;\n});\n\nconst { getTabindex } = useRovingFocus(rootNode, {\n elementsList: itemEls,\n loop: true,\n});\n\nuseOutsideClick(rootNode);\nuseEscapeKey(rootNode);\n\nprovide(\"MenuLevelContext\", { node: rootNode, getTabindex, itemEls });\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n \u003CTeleport to=\"body\">\n \u003Cdiv v-if=\"rootNode.open.value\" ref=\"contentRef\" role=\"menu\">\n \u003Cslot \u002F>\n \u003C\u002Fdiv>\n \u003C\u002FTeleport>\n\u003C\u002Ftemplate>\n",[291,1562,1563,1583,1620,1651,1655,1687,1717,1748,1752,1764,1792,1800,1804,1825,1837,1848,1856,1860,1868,1876,1880,1920,1928,1932,1940,1961,2003,2012,2021,2030],{"__ignoreMap":358},[459,1564,1565,1567,1569,1571,1573,1575,1577,1579,1581],{"class":461,"line":462},[459,1566,466],{"class":465},[459,1568,847],{"class":469},[459,1570,850],{"class":529},[459,1572,853],{"class":529},[459,1574,533],{"class":465},[459,1576,536],{"class":465},[459,1578,860],{"class":539},[459,1580,536],{"class":465},[459,1582,473],{"class":465},[459,1584,1585,1587,1589,1591,1593,1595,1597,1600,1602,1604,1606,1608,1610,1612,1614,1616,1618],{"class":461,"line":476},[459,1586,870],{"class":869},[459,1588,873],{"class":465},[459,1590,1238],{"class":499},[459,1592,879],{"class":465},[459,1594,882],{"class":499},[459,1596,879],{"class":465},[459,1598,1599],{"class":499}," shallowRef",[459,1601,879],{"class":465},[459,1603,1247],{"class":499},[459,1605,879],{"class":465},[459,1607,876],{"class":499},[459,1609,885],{"class":465},[459,1611,888],{"class":869},[459,1613,891],{"class":465},[459,1615,455],{"class":539},[459,1617,536],{"class":465},[459,1619,898],{"class":465},[459,1621,1622,1624,1626,1629,1631,1634,1636,1639,1641,1643,1645,1647,1649],{"class":461,"line":487},[459,1623,870],{"class":869},[459,1625,873],{"class":465},[459,1627,1628],{"class":499}," useEscapeKey",[459,1630,879],{"class":465},[459,1632,1633],{"class":499}," useOutsideClick",[459,1635,879],{"class":465},[459,1637,1638],{"class":499}," useRovingFocus",[459,1640,885],{"class":465},[459,1642,888],{"class":869},[459,1644,891],{"class":465},[459,1646,921],{"class":539},[459,1648,536],{"class":465},[459,1650,898],{"class":465},[459,1652,1653],{"class":461,"line":510},[459,1654,609],{"emptyLinePlaceholder":608},[459,1656,1657,1659,1661,1663,1665,1667,1669,1671,1673,1675,1677,1679,1681,1683,1685],{"class":461,"line":520},[459,1658,934],{"class":529},[459,1660,873],{"class":465},[459,1662,1012],{"class":499},[459,1664,1031],{"class":465},[459,1666,1297],{"class":465},[459,1668,1238],{"class":942},[459,1670,466],{"class":465},[459,1672,1304],{"class":947},[459,1674,496],{"class":465},[459,1676,959],{"class":499},[459,1678,536],{"class":465},[459,1680,1143],{"class":539},[459,1682,536],{"class":465},[459,1684,830],{"class":499},[459,1686,898],{"class":465},[459,1688,1689,1691,1694,1696,1698,1700,1703,1705,1707,1709,1711,1713,1715],{"class":461,"line":567},[459,1690,934],{"class":529},[459,1692,1693],{"class":499}," contentRef ",[459,1695,533],{"class":465},[459,1697,882],{"class":942},[459,1699,466],{"class":465},[459,1701,1702],{"class":947},"HTMLDivElement",[459,1704,951],{"class":465},[459,1706,954],{"class":947},[459,1708,496],{"class":465},[459,1710,959],{"class":499},[459,1712,962],{"class":465},[459,1714,830],{"class":499},[459,1716,898],{"class":465},[459,1718,1719,1721,1724,1726,1728,1730,1732,1734,1736,1738,1741,1743,1746],{"class":461,"line":605},[459,1720,934],{"class":529},[459,1722,1723],{"class":499}," itemEls ",[459,1725,533],{"class":465},[459,1727,1599],{"class":942},[459,1729,466],{"class":465},[459,1731,959],{"class":499},[459,1733,948],{"class":947},[459,1735,951],{"class":465},[459,1737,954],{"class":947},[459,1739,1740],{"class":499},")[]",[459,1742,496],{"class":465},[459,1744,1745],{"class":499},"([])",[459,1747,898],{"class":465},[459,1749,1750],{"class":461,"line":612},[459,1751,609],{"emptyLinePlaceholder":608},[459,1753,1754,1756,1758,1760,1762],{"class":461,"line":622},[459,1755,1357],{"class":942},[459,1757,959],{"class":499},[459,1759,1362],{"class":465},[459,1761,1365],{"class":529},[459,1763,1051],{"class":465},[459,1765,1766,1768,1770,1772,1774,1777,1779,1781,1783,1786,1788,1790],{"class":461,"line":642},[459,1767,1372],{"class":499},[459,1769,1375],{"class":465},[459,1771,1378],{"class":499},[459,1773,1375],{"class":465},[459,1775,1776],{"class":499},"floatingEl",[459,1778,1375],{"class":465},[459,1780,1388],{"class":499},[459,1782,1297],{"class":465},[459,1784,1785],{"class":499}," contentRef",[459,1787,1375],{"class":465},[459,1789,1388],{"class":499},[459,1791,898],{"class":465},[459,1793,1794,1796,1798],{"class":461,"line":652},[459,1795,1031],{"class":465},[459,1797,830],{"class":499},[459,1799,898],{"class":465},[459,1801,1802],{"class":461,"line":691},[459,1803,609],{"emptyLinePlaceholder":608},[459,1805,1806,1808,1810,1813,1815,1817,1819,1821,1823],{"class":461,"line":729},[459,1807,934],{"class":529},[459,1809,873],{"class":465},[459,1811,1812],{"class":499}," getTabindex ",[459,1814,1031],{"class":465},[459,1816,1297],{"class":465},[459,1818,1638],{"class":942},[459,1820,1046],{"class":499},[459,1822,879],{"class":465},[459,1824,1051],{"class":465},[459,1826,1827,1830,1832,1835],{"class":461,"line":739},[459,1828,1829],{"class":469}," elementsList",[459,1831,348],{"class":465},[459,1833,1834],{"class":499}," itemEls",[459,1836,1068],{"class":465},[459,1838,1839,1842,1844,1846],{"class":461,"line":749},[459,1840,1841],{"class":469}," loop",[459,1843,348],{"class":465},[459,1845,1097],{"class":1096},[459,1847,1068],{"class":465},[459,1849,1850,1852,1854],{"class":461,"line":754},[459,1851,1031],{"class":465},[459,1853,830],{"class":499},[459,1855,898],{"class":465},[459,1857,1858],{"class":461,"line":792},[459,1859,609],{"emptyLinePlaceholder":608},[459,1861,1862,1864,1866],{"class":461,"line":802},[459,1863,205],{"class":942},[459,1865,1418],{"class":499},[459,1867,898],{"class":465},[459,1869,1870,1872,1874],{"class":461,"line":812},[459,1871,209],{"class":942},[459,1873,1418],{"class":499},[459,1875,898],{"class":465},[459,1877,1878],{"class":461,"line":1180},[459,1879,609],{"emptyLinePlaceholder":608},[459,1881,1882,1884,1886,1888,1891,1893,1895,1897,1900,1902,1905,1907,1910,1912,1914,1916,1918],{"class":461,"line":1191},[459,1883,1136],{"class":942},[459,1885,959],{"class":499},[459,1887,536],{"class":465},[459,1889,1890],{"class":539},"MenuLevelContext",[459,1892,536],{"class":465},[459,1894,879],{"class":465},[459,1896,873],{"class":465},[459,1898,1899],{"class":469}," node",[459,1901,348],{"class":465},[459,1903,1904],{"class":499}," rootNode",[459,1906,879],{"class":465},[459,1908,1909],{"class":499}," getTabindex",[459,1911,879],{"class":465},[459,1913,1723],{"class":499},[459,1915,1031],{"class":465},[459,1917,830],{"class":499},[459,1919,898],{"class":465},[459,1921,1922,1924,1926],{"class":461,"line":1520},[459,1923,503],{"class":465},[459,1925,847],{"class":469},[459,1927,473],{"class":465},[459,1929,1930],{"class":461,"line":1526},[459,1931,609],{"emptyLinePlaceholder":608},[459,1933,1934,1936,1938],{"class":461,"line":1535},[459,1935,466],{"class":465},[459,1937,470],{"class":469},[459,1939,473],{"class":465},[459,1941,1942,1944,1947,1950,1952,1954,1957,1959],{"class":461,"line":1544},[459,1943,479],{"class":465},[459,1945,1946],{"class":469},"Teleport",[459,1948,1949],{"class":529}," to",[459,1951,533],{"class":465},[459,1953,536],{"class":465},[459,1955,1956],{"class":539},"body",[459,1958,536],{"class":465},[459,1960,473],{"class":465},[459,1962,1964,1966,1969,1972,1974,1976,1978,1980,1982,1984,1986,1989,1991,1993,1995,1997,1999,2001],{"class":461,"line":1963},26,[459,1965,490],{"class":465},[459,1967,1968],{"class":469},"div",[459,1970,1971],{"class":529}," v-if",[459,1973,533],{"class":465},[459,1975,536],{"class":465},[459,1977,1501],{"class":539},[459,1979,536],{"class":465},[459,1981,882],{"class":529},[459,1983,533],{"class":465},[459,1985,536],{"class":465},[459,1987,1988],{"class":539},"contentRef",[459,1990,536],{"class":465},[459,1992,530],{"class":529},[459,1994,533],{"class":465},[459,1996,536],{"class":465},[459,1998,1487],{"class":539},[459,2000,536],{"class":465},[459,2002,473],{"class":465},[459,2004,2006,2008,2010],{"class":461,"line":2005},27,[459,2007,523],{"class":465},[459,2009,1185],{"class":469},[459,2011,1188],{"class":465},[459,2013,2015,2017,2019],{"class":461,"line":2014},28,[459,2016,795],{"class":465},[459,2018,1968],{"class":469},[459,2020,473],{"class":465},[459,2022,2024,2026,2028],{"class":461,"line":2023},29,[459,2025,805],{"class":465},[459,2027,1946],{"class":469},[459,2029,473],{"class":465},[459,2031,2033,2035,2037],{"class":461,"line":2032},30,[459,2034,503],{"class":465},[459,2036,470],{"class":469},[459,2038,473],{"class":465},[823,2040,2042,2043,830],{"id":2041},"_4-submenu-container-menusubvue","4. Submenu Container (",[291,2044,2045],{},"MenuSub.vue",[277,2047,2048,2049,2052],{},"Calling ",[291,2050,2051],{},"useFloatingNode({ parent: \"auto\" })"," links to the nearest ancestor floating node via Vue Dependency Injection:",[350,2054,2056],{"className":453,"code":2055,"language":455,"meta":358,"style":358},"\u003Cscript setup lang=\"ts\">\nimport { inject, provide, ref } from \"vue\";\nimport { useFloatingNode } from \"v-float\";\n\nconst anchorEl = ref\u003CHTMLElement | null>(null);\nconst floatingEl = ref\u003CHTMLElement | null>(null);\nconst open = ref(false);\n\n\u002F\u002F Passing parent: \"auto\" links to rootNode via Vue Dependency Injection\nconst subNode = useFloatingNode({ anchorEl, floatingEl, open, parent: \"auto\" });\n\nprovide(\"MenuSubContext\", { subNode });\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n \u003Cslot \u002F>\n\u003C\u002Ftemplate>\n",[291,2057,2058,2078,2106,2126,2130,2158,2186,2206,2210,2215,2262,2266,2291,2299,2303,2311,2319],{"__ignoreMap":358},[459,2059,2060,2062,2064,2066,2068,2070,2072,2074,2076],{"class":461,"line":462},[459,2061,466],{"class":465},[459,2063,847],{"class":469},[459,2065,850],{"class":529},[459,2067,853],{"class":529},[459,2069,533],{"class":465},[459,2071,536],{"class":465},[459,2073,860],{"class":539},[459,2075,536],{"class":465},[459,2077,473],{"class":465},[459,2079,2080,2082,2084,2086,2088,2090,2092,2094,2096,2098,2100,2102,2104],{"class":461,"line":476},[459,2081,870],{"class":869},[459,2083,873],{"class":465},[459,2085,1238],{"class":499},[459,2087,879],{"class":465},[459,2089,876],{"class":499},[459,2091,879],{"class":465},[459,2093,882],{"class":499},[459,2095,885],{"class":465},[459,2097,888],{"class":869},[459,2099,891],{"class":465},[459,2101,455],{"class":539},[459,2103,536],{"class":465},[459,2105,898],{"class":465},[459,2107,2108,2110,2112,2114,2116,2118,2120,2122,2124],{"class":461,"line":487},[459,2109,870],{"class":869},[459,2111,873],{"class":465},[459,2113,907],{"class":499},[459,2115,885],{"class":465},[459,2117,888],{"class":869},[459,2119,891],{"class":465},[459,2121,921],{"class":539},[459,2123,536],{"class":465},[459,2125,898],{"class":465},[459,2127,2128],{"class":461,"line":510},[459,2129,609],{"emptyLinePlaceholder":608},[459,2131,2132,2134,2136,2138,2140,2142,2144,2146,2148,2150,2152,2154,2156],{"class":461,"line":520},[459,2133,934],{"class":529},[459,2135,937],{"class":499},[459,2137,533],{"class":465},[459,2139,882],{"class":942},[459,2141,466],{"class":465},[459,2143,948],{"class":947},[459,2145,951],{"class":465},[459,2147,954],{"class":947},[459,2149,496],{"class":465},[459,2151,959],{"class":499},[459,2153,962],{"class":465},[459,2155,830],{"class":499},[459,2157,898],{"class":465},[459,2159,2160,2162,2164,2166,2168,2170,2172,2174,2176,2178,2180,2182,2184],{"class":461,"line":567},[459,2161,934],{"class":529},[459,2163,973],{"class":499},[459,2165,533],{"class":465},[459,2167,882],{"class":942},[459,2169,466],{"class":465},[459,2171,948],{"class":947},[459,2173,951],{"class":465},[459,2175,954],{"class":947},[459,2177,496],{"class":465},[459,2179,959],{"class":499},[459,2181,962],{"class":465},[459,2183,830],{"class":499},[459,2185,898],{"class":465},[459,2187,2188,2190,2193,2195,2197,2199,2202,2204],{"class":461,"line":605},[459,2189,934],{"class":529},[459,2191,2192],{"class":499}," open ",[459,2194,533],{"class":465},[459,2196,882],{"class":942},[459,2198,959],{"class":499},[459,2200,2201],{"class":1096},"false",[459,2203,830],{"class":499},[459,2205,898],{"class":465},[459,2207,2208],{"class":461,"line":612},[459,2209,609],{"emptyLinePlaceholder":608},[459,2211,2212],{"class":461,"line":622},[459,2213,2214],{"class":1004},"\u002F\u002F Passing parent: \"auto\" links to rootNode via Vue Dependency Injection\n",[459,2216,2217,2219,2222,2224,2226,2228,2230,2232,2234,2237,2239,2242,2244,2247,2249,2251,2254,2256,2258,2260],{"class":461,"line":642},[459,2218,934],{"class":529},[459,2220,2221],{"class":499}," subNode ",[459,2223,533],{"class":465},[459,2225,907],{"class":942},[459,2227,959],{"class":499},[459,2229,1021],{"class":465},[459,2231,1024],{"class":499},[459,2233,879],{"class":465},[459,2235,2236],{"class":499}," floatingEl",[459,2238,879],{"class":465},[459,2240,2241],{"class":499}," open",[459,2243,879],{"class":465},[459,2245,2246],{"class":469}," parent",[459,2248,348],{"class":465},[459,2250,891],{"class":465},[459,2252,2253],{"class":539},"auto",[459,2255,536],{"class":465},[459,2257,885],{"class":465},[459,2259,830],{"class":499},[459,2261,898],{"class":465},[459,2263,2264],{"class":461,"line":652},[459,2265,609],{"emptyLinePlaceholder":608},[459,2267,2268,2270,2272,2274,2277,2279,2281,2283,2285,2287,2289],{"class":461,"line":691},[459,2269,1136],{"class":942},[459,2271,959],{"class":499},[459,2273,536],{"class":465},[459,2275,2276],{"class":539},"MenuSubContext",[459,2278,536],{"class":465},[459,2280,879],{"class":465},[459,2282,873],{"class":465},[459,2284,2221],{"class":499},[459,2286,1031],{"class":465},[459,2288,830],{"class":499},[459,2290,898],{"class":465},[459,2292,2293,2295,2297],{"class":461,"line":729},[459,2294,503],{"class":465},[459,2296,847],{"class":469},[459,2298,473],{"class":465},[459,2300,2301],{"class":461,"line":739},[459,2302,609],{"emptyLinePlaceholder":608},[459,2304,2305,2307,2309],{"class":461,"line":749},[459,2306,466],{"class":465},[459,2308,470],{"class":469},[459,2310,473],{"class":465},[459,2312,2313,2315,2317],{"class":461,"line":754},[459,2314,479],{"class":465},[459,2316,1185],{"class":469},[459,2318,1188],{"class":465},[459,2320,2321,2323,2325],{"class":461,"line":792},[459,2322,503],{"class":465},[459,2324,470],{"class":469},[459,2326,473],{"class":465},[823,2328,2330,2331,830],{"id":2329},"_5-submenu-trigger-menusubtriggervue","5. Submenu Trigger (",[291,2332,2333],{},"MenuSubTrigger.vue",[350,2335,2337],{"className":453,"code":2336,"language":455,"meta":358,"style":358},"\u003Cscript setup lang=\"ts\">\nimport { inject, ref, watchEffect } from \"vue\";\nimport { useHover } from \"v-float\";\n\nconst { subNode } = inject\u003Cany>(\"MenuSubContext\");\nconst triggerRef = ref\u003CHTMLButtonElement | null>(null);\n\nwatchEffect(() => {\n subNode.refs.anchorEl.value = triggerRef.value;\n});\n\nuseHover(subNode, {\n delay: { open: 100, close: 200 },\n safePolygon: true,\n});\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n \u003Cbutton\n ref=\"triggerRef\"\n type=\"button\"\n role=\"menuitem\"\n aria-haspopup=\"menu\"\n :aria-expanded=\"subNode.open.value\"\n @click=\"subNode.open.value = !subNode.open.value\"\n >\n \u003Cslot \u002F>\n \u003Cspan>›\u003C\u002Fspan>\n \u003C\u002Fbutton>\n\u003C\u002Ftemplate>\n",[291,2338,2339,2359,2387,2408,2412,2444,2472,2476,2488,2515,2523,2527,2538,2566,2577,2585,2593,2597,2605,2611,2623,2635,2648,2660,2673,2686,2690,2698,2715,2723],{"__ignoreMap":358},[459,2340,2341,2343,2345,2347,2349,2351,2353,2355,2357],{"class":461,"line":462},[459,2342,466],{"class":465},[459,2344,847],{"class":469},[459,2346,850],{"class":529},[459,2348,853],{"class":529},[459,2350,533],{"class":465},[459,2352,536],{"class":465},[459,2354,860],{"class":539},[459,2356,536],{"class":465},[459,2358,473],{"class":465},[459,2360,2361,2363,2365,2367,2369,2371,2373,2375,2377,2379,2381,2383,2385],{"class":461,"line":476},[459,2362,870],{"class":869},[459,2364,873],{"class":465},[459,2366,1238],{"class":499},[459,2368,879],{"class":465},[459,2370,882],{"class":499},[459,2372,879],{"class":465},[459,2374,1247],{"class":499},[459,2376,885],{"class":465},[459,2378,888],{"class":869},[459,2380,891],{"class":465},[459,2382,455],{"class":539},[459,2384,536],{"class":465},[459,2386,898],{"class":465},[459,2388,2389,2391,2393,2396,2398,2400,2402,2404,2406],{"class":461,"line":487},[459,2390,870],{"class":869},[459,2392,873],{"class":465},[459,2394,2395],{"class":499}," useHover",[459,2397,885],{"class":465},[459,2399,888],{"class":869},[459,2401,891],{"class":465},[459,2403,921],{"class":539},[459,2405,536],{"class":465},[459,2407,898],{"class":465},[459,2409,2410],{"class":461,"line":510},[459,2411,609],{"emptyLinePlaceholder":608},[459,2413,2414,2416,2418,2420,2422,2424,2426,2428,2430,2432,2434,2436,2438,2440,2442],{"class":461,"line":520},[459,2415,934],{"class":529},[459,2417,873],{"class":465},[459,2419,2221],{"class":499},[459,2421,1031],{"class":465},[459,2423,1297],{"class":465},[459,2425,1238],{"class":942},[459,2427,466],{"class":465},[459,2429,1304],{"class":947},[459,2431,496],{"class":465},[459,2433,959],{"class":499},[459,2435,536],{"class":465},[459,2437,2276],{"class":539},[459,2439,536],{"class":465},[459,2441,830],{"class":499},[459,2443,898],{"class":465},[459,2445,2446,2448,2450,2452,2454,2456,2458,2460,2462,2464,2466,2468,2470],{"class":461,"line":567},[459,2447,934],{"class":529},[459,2449,1325],{"class":499},[459,2451,533],{"class":465},[459,2453,882],{"class":942},[459,2455,466],{"class":465},[459,2457,1334],{"class":947},[459,2459,951],{"class":465},[459,2461,954],{"class":947},[459,2463,496],{"class":465},[459,2465,959],{"class":499},[459,2467,962],{"class":465},[459,2469,830],{"class":499},[459,2471,898],{"class":465},[459,2473,2474],{"class":461,"line":605},[459,2475,609],{"emptyLinePlaceholder":608},[459,2477,2478,2480,2482,2484,2486],{"class":461,"line":612},[459,2479,1357],{"class":942},[459,2481,959],{"class":499},[459,2483,1362],{"class":465},[459,2485,1365],{"class":529},[459,2487,1051],{"class":465},[459,2489,2490,2493,2495,2497,2499,2501,2503,2505,2507,2509,2511,2513],{"class":461,"line":622},[459,2491,2492],{"class":499}," subNode",[459,2494,1375],{"class":465},[459,2496,1378],{"class":499},[459,2498,1375],{"class":465},[459,2500,1383],{"class":499},[459,2502,1375],{"class":465},[459,2504,1388],{"class":499},[459,2506,1297],{"class":465},[459,2508,1393],{"class":499},[459,2510,1375],{"class":465},[459,2512,1388],{"class":499},[459,2514,898],{"class":465},[459,2516,2517,2519,2521],{"class":461,"line":642},[459,2518,1031],{"class":465},[459,2520,830],{"class":499},[459,2522,898],{"class":465},[459,2524,2525],{"class":461,"line":652},[459,2526,609],{"emptyLinePlaceholder":608},[459,2528,2529,2531,2534,2536],{"class":461,"line":691},[459,2530,193],{"class":942},[459,2532,2533],{"class":499},"(subNode",[459,2535,879],{"class":465},[459,2537,1051],{"class":465},[459,2539,2540,2543,2545,2547,2549,2551,2554,2556,2559,2561,2564],{"class":461,"line":729},[459,2541,2542],{"class":469}," delay",[459,2544,348],{"class":465},[459,2546,873],{"class":465},[459,2548,2241],{"class":469},[459,2550,348],{"class":465},[459,2552,2553],{"class":1085}," 100",[459,2555,879],{"class":465},[459,2557,2558],{"class":469}," close",[459,2560,348],{"class":465},[459,2562,2563],{"class":1085}," 200",[459,2565,1119],{"class":465},[459,2567,2568,2571,2573,2575],{"class":461,"line":739},[459,2569,2570],{"class":469}," safePolygon",[459,2572,348],{"class":465},[459,2574,1097],{"class":1096},[459,2576,1068],{"class":465},[459,2578,2579,2581,2583],{"class":461,"line":749},[459,2580,1031],{"class":465},[459,2582,830],{"class":499},[459,2584,898],{"class":465},[459,2586,2587,2589,2591],{"class":461,"line":754},[459,2588,503],{"class":465},[459,2590,847],{"class":469},[459,2592,473],{"class":465},[459,2594,2595],{"class":461,"line":792},[459,2596,609],{"emptyLinePlaceholder":608},[459,2598,2599,2601,2603],{"class":461,"line":802},[459,2600,466],{"class":465},[459,2602,470],{"class":469},[459,2604,473],{"class":465},[459,2606,2607,2609],{"class":461,"line":812},[459,2608,479],{"class":465},[459,2610,1447],{"class":469},[459,2612,2613,2615,2617,2619,2621],{"class":461,"line":1180},[459,2614,1452],{"class":529},[459,2616,533],{"class":465},[459,2618,536],{"class":465},[459,2620,1459],{"class":539},[459,2622,1462],{"class":465},[459,2624,2625,2627,2629,2631,2633],{"class":461,"line":1191},[459,2626,1467],{"class":529},[459,2628,533],{"class":465},[459,2630,536],{"class":465},[459,2632,526],{"class":539},[459,2634,1462],{"class":465},[459,2636,2637,2640,2642,2644,2646],{"class":461,"line":1520},[459,2638,2639],{"class":529}," role",[459,2641,533],{"class":465},[459,2643,536],{"class":465},[459,2645,540],{"class":539},[459,2647,1462],{"class":465},[459,2649,2650,2652,2654,2656,2658],{"class":461,"line":1526},[459,2651,1480],{"class":529},[459,2653,533],{"class":465},[459,2655,536],{"class":465},[459,2657,1487],{"class":539},[459,2659,1462],{"class":465},[459,2661,2662,2664,2666,2668,2671],{"class":461,"line":1535},[459,2663,1494],{"class":529},[459,2665,533],{"class":465},[459,2667,536],{"class":465},[459,2669,2670],{"class":539},"subNode.open.value",[459,2672,1462],{"class":465},[459,2674,2675,2677,2679,2681,2684],{"class":461,"line":1544},[459,2676,1508],{"class":529},[459,2678,533],{"class":465},[459,2680,536],{"class":465},[459,2682,2683],{"class":539},"subNode.open.value = !subNode.open.value",[459,2685,1462],{"class":465},[459,2687,2688],{"class":461,"line":1963},[459,2689,1523],{"class":465},[459,2691,2692,2694,2696],{"class":461,"line":2005},[459,2693,490],{"class":465},[459,2695,1185],{"class":469},[459,2697,1188],{"class":465},[459,2699,2700,2702,2704,2706,2709,2711,2713],{"class":461,"line":2014},[459,2701,490],{"class":465},[459,2703,459],{"class":469},[459,2705,496],{"class":465},[459,2707,2708],{"class":499},"›",[459,2710,503],{"class":465},[459,2712,459],{"class":469},[459,2714,473],{"class":465},[459,2716,2717,2719,2721],{"class":461,"line":2023},[459,2718,805],{"class":465},[459,2720,526],{"class":469},[459,2722,473],{"class":465},[459,2724,2725,2727,2729],{"class":461,"line":2032},[459,2726,503],{"class":465},[459,2728,470],{"class":469},[459,2730,473],{"class":465},[823,2732,2734,2735,830],{"id":2733},"_6-submenu-content-menusubcontentvue","6. Submenu Content (",[291,2736,2737],{},"MenuSubContent.vue",[350,2739,2741],{"className":453,"code":2740,"language":455,"meta":358,"style":358},"\u003Cscript setup lang=\"ts\">\nimport { inject, provide, ref, shallowRef, watchEffect } from \"vue\";\nimport { useEscapeKey, useOutsideClick, usePosition, useRovingFocus } from \"v-float\";\n\nconst { subNode } = inject\u003Cany>(\"MenuSubContext\");\nconst contentRef = ref\u003CHTMLDivElement | null>(null);\nconst itemEls = shallowRef\u003C(HTMLElement | null)[]>([]);\n\nwatchEffect(() => {\n subNode.refs.floatingEl.value = contentRef.value;\n});\n\nusePosition(subNode, {\n placement: \"right-start\",\n middlewares: { offset: 4, flip: true, shift: { padding: 12 } },\n});\n\nconst { getTabindex } = useRovingFocus(subNode, {\n elementsList: itemEls,\n loop: true,\n onExit: () => {\n \u002F\u002F ArrowLeft closes this submenu and returns focus to its parent trigger\n subNode.open.value = false;\n },\n});\n\nuseOutsideClick(subNode);\nuseEscapeKey(subNode);\n\nprovide(\"MenuLevelContext\", { node: subNode, getTabindex, itemEls });\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n \u003CTeleport to=\"body\">\n \u003Cdiv v-if=\"subNode.open.value\" ref=\"contentRef\" role=\"menu\">\n \u003Cslot \u002F>\n \u003C\u002Fdiv>\n \u003C\u002FTeleport>\n\u003C\u002Ftemplate>\n",[291,2742,2743,2763,2799,2831,2835,2867,2895,2923,2927,2939,2965,2973,2977,2987,3002,3043,3051,3055,3075,3085,3095,3109,3114,3135,3140,3148,3152,3161,3169,3173,3210,3219,3224,3233,3252,3291,3300,3309,3318],{"__ignoreMap":358},[459,2744,2745,2747,2749,2751,2753,2755,2757,2759,2761],{"class":461,"line":462},[459,2746,466],{"class":465},[459,2748,847],{"class":469},[459,2750,850],{"class":529},[459,2752,853],{"class":529},[459,2754,533],{"class":465},[459,2756,536],{"class":465},[459,2758,860],{"class":539},[459,2760,536],{"class":465},[459,2762,473],{"class":465},[459,2764,2765,2767,2769,2771,2773,2775,2777,2779,2781,2783,2785,2787,2789,2791,2793,2795,2797],{"class":461,"line":476},[459,2766,870],{"class":869},[459,2768,873],{"class":465},[459,2770,1238],{"class":499},[459,2772,879],{"class":465},[459,2774,876],{"class":499},[459,2776,879],{"class":465},[459,2778,882],{"class":499},[459,2780,879],{"class":465},[459,2782,1599],{"class":499},[459,2784,879],{"class":465},[459,2786,1247],{"class":499},[459,2788,885],{"class":465},[459,2790,888],{"class":869},[459,2792,891],{"class":465},[459,2794,455],{"class":539},[459,2796,536],{"class":465},[459,2798,898],{"class":465},[459,2800,2801,2803,2805,2807,2809,2811,2813,2815,2817,2819,2821,2823,2825,2827,2829],{"class":461,"line":487},[459,2802,870],{"class":869},[459,2804,873],{"class":465},[459,2806,1628],{"class":499},[459,2808,879],{"class":465},[459,2810,1633],{"class":499},[459,2812,879],{"class":465},[459,2814,912],{"class":499},[459,2816,879],{"class":465},[459,2818,1638],{"class":499},[459,2820,885],{"class":465},[459,2822,888],{"class":869},[459,2824,891],{"class":465},[459,2826,921],{"class":539},[459,2828,536],{"class":465},[459,2830,898],{"class":465},[459,2832,2833],{"class":461,"line":510},[459,2834,609],{"emptyLinePlaceholder":608},[459,2836,2837,2839,2841,2843,2845,2847,2849,2851,2853,2855,2857,2859,2861,2863,2865],{"class":461,"line":520},[459,2838,934],{"class":529},[459,2840,873],{"class":465},[459,2842,2221],{"class":499},[459,2844,1031],{"class":465},[459,2846,1297],{"class":465},[459,2848,1238],{"class":942},[459,2850,466],{"class":465},[459,2852,1304],{"class":947},[459,2854,496],{"class":465},[459,2856,959],{"class":499},[459,2858,536],{"class":465},[459,2860,2276],{"class":539},[459,2862,536],{"class":465},[459,2864,830],{"class":499},[459,2866,898],{"class":465},[459,2868,2869,2871,2873,2875,2877,2879,2881,2883,2885,2887,2889,2891,2893],{"class":461,"line":567},[459,2870,934],{"class":529},[459,2872,1693],{"class":499},[459,2874,533],{"class":465},[459,2876,882],{"class":942},[459,2878,466],{"class":465},[459,2880,1702],{"class":947},[459,2882,951],{"class":465},[459,2884,954],{"class":947},[459,2886,496],{"class":465},[459,2888,959],{"class":499},[459,2890,962],{"class":465},[459,2892,830],{"class":499},[459,2894,898],{"class":465},[459,2896,2897,2899,2901,2903,2905,2907,2909,2911,2913,2915,2917,2919,2921],{"class":461,"line":605},[459,2898,934],{"class":529},[459,2900,1723],{"class":499},[459,2902,533],{"class":465},[459,2904,1599],{"class":942},[459,2906,466],{"class":465},[459,2908,959],{"class":499},[459,2910,948],{"class":947},[459,2912,951],{"class":465},[459,2914,954],{"class":947},[459,2916,1740],{"class":499},[459,2918,496],{"class":465},[459,2920,1745],{"class":499},[459,2922,898],{"class":465},[459,2924,2925],{"class":461,"line":612},[459,2926,609],{"emptyLinePlaceholder":608},[459,2928,2929,2931,2933,2935,2937],{"class":461,"line":622},[459,2930,1357],{"class":942},[459,2932,959],{"class":499},[459,2934,1362],{"class":465},[459,2936,1365],{"class":529},[459,2938,1051],{"class":465},[459,2940,2941,2943,2945,2947,2949,2951,2953,2955,2957,2959,2961,2963],{"class":461,"line":642},[459,2942,2492],{"class":499},[459,2944,1375],{"class":465},[459,2946,1378],{"class":499},[459,2948,1375],{"class":465},[459,2950,1776],{"class":499},[459,2952,1375],{"class":465},[459,2954,1388],{"class":499},[459,2956,1297],{"class":465},[459,2958,1785],{"class":499},[459,2960,1375],{"class":465},[459,2962,1388],{"class":499},[459,2964,898],{"class":465},[459,2966,2967,2969,2971],{"class":461,"line":652},[459,2968,1031],{"class":465},[459,2970,830],{"class":499},[459,2972,898],{"class":465},[459,2974,2975],{"class":461,"line":691},[459,2976,609],{"emptyLinePlaceholder":608},[459,2978,2979,2981,2983,2985],{"class":461,"line":729},[459,2980,171],{"class":942},[459,2982,2533],{"class":499},[459,2984,879],{"class":465},[459,2986,1051],{"class":465},[459,2988,2989,2991,2993,2995,2998,3000],{"class":461,"line":739},[459,2990,1056],{"class":469},[459,2992,348],{"class":465},[459,2994,891],{"class":465},[459,2996,2997],{"class":539},"right-start",[459,2999,536],{"class":465},[459,3001,1068],{"class":465},[459,3003,3004,3006,3008,3010,3012,3014,3017,3019,3021,3023,3025,3027,3029,3031,3033,3035,3037,3039,3041],{"class":461,"line":749},[459,3005,1073],{"class":469},[459,3007,348],{"class":465},[459,3009,873],{"class":465},[459,3011,1080],{"class":469},[459,3013,348],{"class":465},[459,3015,3016],{"class":1085}," 4",[459,3018,879],{"class":465},[459,3020,1091],{"class":469},[459,3022,348],{"class":465},[459,3024,1097],{"class":1096},[459,3026,879],{"class":465},[459,3028,1102],{"class":469},[459,3030,348],{"class":465},[459,3032,873],{"class":465},[459,3034,1109],{"class":469},[459,3036,348],{"class":465},[459,3038,1114],{"class":1085},[459,3040,885],{"class":465},[459,3042,1119],{"class":465},[459,3044,3045,3047,3049],{"class":461,"line":754},[459,3046,1031],{"class":465},[459,3048,830],{"class":499},[459,3050,898],{"class":465},[459,3052,3053],{"class":461,"line":792},[459,3054,609],{"emptyLinePlaceholder":608},[459,3056,3057,3059,3061,3063,3065,3067,3069,3071,3073],{"class":461,"line":802},[459,3058,934],{"class":529},[459,3060,873],{"class":465},[459,3062,1812],{"class":499},[459,3064,1031],{"class":465},[459,3066,1297],{"class":465},[459,3068,1638],{"class":942},[459,3070,2533],{"class":499},[459,3072,879],{"class":465},[459,3074,1051],{"class":465},[459,3076,3077,3079,3081,3083],{"class":461,"line":812},[459,3078,1829],{"class":469},[459,3080,348],{"class":465},[459,3082,1834],{"class":499},[459,3084,1068],{"class":465},[459,3086,3087,3089,3091,3093],{"class":461,"line":1180},[459,3088,1841],{"class":469},[459,3090,348],{"class":465},[459,3092,1097],{"class":1096},[459,3094,1068],{"class":465},[459,3096,3097,3100,3102,3105,3107],{"class":461,"line":1191},[459,3098,3099],{"class":942}," onExit",[459,3101,348],{"class":465},[459,3103,3104],{"class":465}," ()",[459,3106,1365],{"class":529},[459,3108,1051],{"class":465},[459,3110,3111],{"class":461,"line":1520},[459,3112,3113],{"class":1004}," \u002F\u002F ArrowLeft closes this submenu and returns focus to its parent trigger\n",[459,3115,3116,3119,3121,3124,3126,3128,3130,3133],{"class":461,"line":1526},[459,3117,3118],{"class":499}," subNode",[459,3120,1375],{"class":465},[459,3122,3123],{"class":499},"open",[459,3125,1375],{"class":465},[459,3127,1388],{"class":499},[459,3129,1297],{"class":465},[459,3131,3132],{"class":1096}," false",[459,3134,898],{"class":465},[459,3136,3137],{"class":461,"line":1535},[459,3138,3139],{"class":465}," },\n",[459,3141,3142,3144,3146],{"class":461,"line":1544},[459,3143,1031],{"class":465},[459,3145,830],{"class":499},[459,3147,898],{"class":465},[459,3149,3150],{"class":461,"line":1963},[459,3151,609],{"emptyLinePlaceholder":608},[459,3153,3154,3156,3159],{"class":461,"line":2005},[459,3155,205],{"class":942},[459,3157,3158],{"class":499},"(subNode)",[459,3160,898],{"class":465},[459,3162,3163,3165,3167],{"class":461,"line":2014},[459,3164,209],{"class":942},[459,3166,3158],{"class":499},[459,3168,898],{"class":465},[459,3170,3171],{"class":461,"line":2023},[459,3172,609],{"emptyLinePlaceholder":608},[459,3174,3175,3177,3179,3181,3183,3185,3187,3189,3191,3193,3196,3198,3200,3202,3204,3206,3208],{"class":461,"line":2032},[459,3176,1136],{"class":942},[459,3178,959],{"class":499},[459,3180,536],{"class":465},[459,3182,1890],{"class":539},[459,3184,536],{"class":465},[459,3186,879],{"class":465},[459,3188,873],{"class":465},[459,3190,1899],{"class":469},[459,3192,348],{"class":465},[459,3194,3195],{"class":499}," subNode",[459,3197,879],{"class":465},[459,3199,1909],{"class":499},[459,3201,879],{"class":465},[459,3203,1723],{"class":499},[459,3205,1031],{"class":465},[459,3207,830],{"class":499},[459,3209,898],{"class":465},[459,3211,3213,3215,3217],{"class":461,"line":3212},31,[459,3214,503],{"class":465},[459,3216,847],{"class":469},[459,3218,473],{"class":465},[459,3220,3222],{"class":461,"line":3221},32,[459,3223,609],{"emptyLinePlaceholder":608},[459,3225,3227,3229,3231],{"class":461,"line":3226},33,[459,3228,466],{"class":465},[459,3230,470],{"class":469},[459,3232,473],{"class":465},[459,3234,3236,3238,3240,3242,3244,3246,3248,3250],{"class":461,"line":3235},34,[459,3237,479],{"class":465},[459,3239,1946],{"class":469},[459,3241,1949],{"class":529},[459,3243,533],{"class":465},[459,3245,536],{"class":465},[459,3247,1956],{"class":539},[459,3249,536],{"class":465},[459,3251,473],{"class":465},[459,3253,3255,3257,3259,3261,3263,3265,3267,3269,3271,3273,3275,3277,3279,3281,3283,3285,3287,3289],{"class":461,"line":3254},35,[459,3256,490],{"class":465},[459,3258,1968],{"class":469},[459,3260,1971],{"class":529},[459,3262,533],{"class":465},[459,3264,536],{"class":465},[459,3266,2670],{"class":539},[459,3268,536],{"class":465},[459,3270,882],{"class":529},[459,3272,533],{"class":465},[459,3274,536],{"class":465},[459,3276,1988],{"class":539},[459,3278,536],{"class":465},[459,3280,530],{"class":529},[459,3282,533],{"class":465},[459,3284,536],{"class":465},[459,3286,1487],{"class":539},[459,3288,536],{"class":465},[459,3290,473],{"class":465},[459,3292,3294,3296,3298],{"class":461,"line":3293},36,[459,3295,523],{"class":465},[459,3297,1185],{"class":469},[459,3299,1188],{"class":465},[459,3301,3303,3305,3307],{"class":461,"line":3302},37,[459,3304,795],{"class":465},[459,3306,1968],{"class":469},[459,3308,473],{"class":465},[459,3310,3312,3314,3316],{"class":461,"line":3311},38,[459,3313,805],{"class":465},[459,3315,1946],{"class":469},[459,3317,473],{"class":465},[459,3319,3321,3323,3325],{"class":461,"line":3320},39,[459,3322,503],{"class":465},[459,3324,470],{"class":469},[459,3326,473],{"class":465},[335,3328],{},[338,3330,3332],{"id":3331},"single-component-flat-script-pattern","Single-Component Flat Script Pattern",[277,3334,3335,3336,3339],{},"If you prefer defining nested menus within a single flat ",[291,3337,3338],{},"\u003Cscript setup>",", link the parent node explicitly:",[350,3341,3343],{"className":453,"code":3342,"language":455,"meta":358,"style":358},"\u003Cscript setup lang=\"ts\">\nimport { ref } from \"vue\";\nimport {\n useClick,\n useEscapeKey,\n useFloatingNode,\n useHover,\n useOutsideClick,\n usePosition,\n useRovingFocus,\n} 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 rootItems = ref\u003C(HTMLElement | null)[]>([]);\nconst subItems = ref\u003C(HTMLElement | null)[]>([]);\n\n\u002F\u002F 1. Create nodes with explicit parent reference\nconst root = useFloatingNode({ anchorEl: rootAnchorEl, floatingEl: rootFloatingEl });\nconst sub = useFloatingNode({ anchorEl: subAnchorEl, floatingEl: subFloatingEl, parent: root });\n\n\u002F\u002F 2. Add positioning\nconst rootPos = usePosition(root, { placement: \"bottom-start\" });\nconst subPos = usePosition(sub, { placement: \"right-start\" });\n\n\u002F\u002F 3. Add interactions\nuseClick(root);\nuseOutsideClick(root);\nuseEscapeKey(root);\nuseRovingFocus(root, { elementsList: rootItems });\n\nuseHover(sub, { delay: { open: 100, close: 200 }, safePolygon: true });\nuseOutsideClick(sub);\nuseEscapeKey(sub);\nuseRovingFocus(sub, {\n elementsList: subItems,\n onExit: () => {\n sub.open.value = false;\n },\n});\n\u003C\u002Fscript>\n",[291,3344,3345,3365,3385,3391,3398,3405,3412,3419,3426,3433,3440,3454,3458,3487,3516,3545,3574,3578,3607,3636,3640,3645,3681,3726,3730,3735,3770,3804,3808,3813,3822,3830,3838,3861,3865,3912,3921,3929,3939,3950,3963,3983,3988,3997],{"__ignoreMap":358},[459,3346,3347,3349,3351,3353,3355,3357,3359,3361,3363],{"class":461,"line":462},[459,3348,466],{"class":465},[459,3350,847],{"class":469},[459,3352,850],{"class":529},[459,3354,853],{"class":529},[459,3356,533],{"class":465},[459,3358,536],{"class":465},[459,3360,860],{"class":539},[459,3362,536],{"class":465},[459,3364,473],{"class":465},[459,3366,3367,3369,3371,3373,3375,3377,3379,3381,3383],{"class":461,"line":476},[459,3368,870],{"class":869},[459,3370,873],{"class":465},[459,3372,882],{"class":499},[459,3374,885],{"class":465},[459,3376,888],{"class":869},[459,3378,891],{"class":465},[459,3380,455],{"class":539},[459,3382,536],{"class":465},[459,3384,898],{"class":465},[459,3386,3387,3389],{"class":461,"line":487},[459,3388,870],{"class":869},[459,3390,1051],{"class":465},[459,3392,3393,3396],{"class":461,"line":510},[459,3394,3395],{"class":499}," useClick",[459,3397,1068],{"class":465},[459,3399,3400,3403],{"class":461,"line":520},[459,3401,3402],{"class":499}," useEscapeKey",[459,3404,1068],{"class":465},[459,3406,3407,3410],{"class":461,"line":567},[459,3408,3409],{"class":499}," useFloatingNode",[459,3411,1068],{"class":465},[459,3413,3414,3417],{"class":461,"line":605},[459,3415,3416],{"class":499}," useHover",[459,3418,1068],{"class":465},[459,3420,3421,3424],{"class":461,"line":612},[459,3422,3423],{"class":499}," useOutsideClick",[459,3425,1068],{"class":465},[459,3427,3428,3431],{"class":461,"line":622},[459,3429,3430],{"class":499}," usePosition",[459,3432,1068],{"class":465},[459,3434,3435,3438],{"class":461,"line":642},[459,3436,3437],{"class":499}," useRovingFocus",[459,3439,1068],{"class":465},[459,3441,3442,3444,3446,3448,3450,3452],{"class":461,"line":652},[459,3443,1031],{"class":465},[459,3445,888],{"class":869},[459,3447,891],{"class":465},[459,3449,921],{"class":539},[459,3451,536],{"class":465},[459,3453,898],{"class":465},[459,3455,3456],{"class":461,"line":691},[459,3457,609],{"emptyLinePlaceholder":608},[459,3459,3460,3462,3465,3467,3469,3471,3473,3475,3477,3479,3481,3483,3485],{"class":461,"line":729},[459,3461,934],{"class":529},[459,3463,3464],{"class":499}," rootAnchorEl ",[459,3466,533],{"class":465},[459,3468,882],{"class":942},[459,3470,466],{"class":465},[459,3472,948],{"class":947},[459,3474,951],{"class":465},[459,3476,954],{"class":947},[459,3478,496],{"class":465},[459,3480,959],{"class":499},[459,3482,962],{"class":465},[459,3484,830],{"class":499},[459,3486,898],{"class":465},[459,3488,3489,3491,3494,3496,3498,3500,3502,3504,3506,3508,3510,3512,3514],{"class":461,"line":739},[459,3490,934],{"class":529},[459,3492,3493],{"class":499}," rootFloatingEl ",[459,3495,533],{"class":465},[459,3497,882],{"class":942},[459,3499,466],{"class":465},[459,3501,948],{"class":947},[459,3503,951],{"class":465},[459,3505,954],{"class":947},[459,3507,496],{"class":465},[459,3509,959],{"class":499},[459,3511,962],{"class":465},[459,3513,830],{"class":499},[459,3515,898],{"class":465},[459,3517,3518,3520,3523,3525,3527,3529,3531,3533,3535,3537,3539,3541,3543],{"class":461,"line":749},[459,3519,934],{"class":529},[459,3521,3522],{"class":499}," subAnchorEl ",[459,3524,533],{"class":465},[459,3526,882],{"class":942},[459,3528,466],{"class":465},[459,3530,948],{"class":947},[459,3532,951],{"class":465},[459,3534,954],{"class":947},[459,3536,496],{"class":465},[459,3538,959],{"class":499},[459,3540,962],{"class":465},[459,3542,830],{"class":499},[459,3544,898],{"class":465},[459,3546,3547,3549,3552,3554,3556,3558,3560,3562,3564,3566,3568,3570,3572],{"class":461,"line":754},[459,3548,934],{"class":529},[459,3550,3551],{"class":499}," subFloatingEl ",[459,3553,533],{"class":465},[459,3555,882],{"class":942},[459,3557,466],{"class":465},[459,3559,948],{"class":947},[459,3561,951],{"class":465},[459,3563,954],{"class":947},[459,3565,496],{"class":465},[459,3567,959],{"class":499},[459,3569,962],{"class":465},[459,3571,830],{"class":499},[459,3573,898],{"class":465},[459,3575,3576],{"class":461,"line":792},[459,3577,609],{"emptyLinePlaceholder":608},[459,3579,3580,3582,3585,3587,3589,3591,3593,3595,3597,3599,3601,3603,3605],{"class":461,"line":802},[459,3581,934],{"class":529},[459,3583,3584],{"class":499}," rootItems ",[459,3586,533],{"class":465},[459,3588,882],{"class":942},[459,3590,466],{"class":465},[459,3592,959],{"class":499},[459,3594,948],{"class":947},[459,3596,951],{"class":465},[459,3598,954],{"class":947},[459,3600,1740],{"class":499},[459,3602,496],{"class":465},[459,3604,1745],{"class":499},[459,3606,898],{"class":465},[459,3608,3609,3611,3614,3616,3618,3620,3622,3624,3626,3628,3630,3632,3634],{"class":461,"line":812},[459,3610,934],{"class":529},[459,3612,3613],{"class":499}," subItems ",[459,3615,533],{"class":465},[459,3617,882],{"class":942},[459,3619,466],{"class":465},[459,3621,959],{"class":499},[459,3623,948],{"class":947},[459,3625,951],{"class":465},[459,3627,954],{"class":947},[459,3629,1740],{"class":499},[459,3631,496],{"class":465},[459,3633,1745],{"class":499},[459,3635,898],{"class":465},[459,3637,3638],{"class":461,"line":1180},[459,3639,609],{"emptyLinePlaceholder":608},[459,3641,3642],{"class":461,"line":1191},[459,3643,3644],{"class":1004},"\u002F\u002F 1. Create nodes with explicit parent reference\n",[459,3646,3647,3649,3652,3654,3656,3658,3660,3662,3664,3667,3669,3671,3673,3675,3677,3679],{"class":461,"line":1520},[459,3648,934],{"class":529},[459,3650,3651],{"class":499}," root ",[459,3653,533],{"class":465},[459,3655,907],{"class":942},[459,3657,959],{"class":499},[459,3659,1021],{"class":465},[459,3661,1024],{"class":469},[459,3663,348],{"class":465},[459,3665,3666],{"class":499}," rootAnchorEl",[459,3668,879],{"class":465},[459,3670,2236],{"class":469},[459,3672,348],{"class":465},[459,3674,3493],{"class":499},[459,3676,1031],{"class":465},[459,3678,830],{"class":499},[459,3680,898],{"class":465},[459,3682,3683,3685,3688,3690,3692,3694,3696,3698,3700,3703,3705,3707,3709,3712,3714,3716,3718,3720,3722,3724],{"class":461,"line":1526},[459,3684,934],{"class":529},[459,3686,3687],{"class":499}," sub ",[459,3689,533],{"class":465},[459,3691,907],{"class":942},[459,3693,959],{"class":499},[459,3695,1021],{"class":465},[459,3697,1024],{"class":469},[459,3699,348],{"class":465},[459,3701,3702],{"class":499}," subAnchorEl",[459,3704,879],{"class":465},[459,3706,2236],{"class":469},[459,3708,348],{"class":465},[459,3710,3711],{"class":499}," subFloatingEl",[459,3713,879],{"class":465},[459,3715,2246],{"class":469},[459,3717,348],{"class":465},[459,3719,3651],{"class":499},[459,3721,1031],{"class":465},[459,3723,830],{"class":499},[459,3725,898],{"class":465},[459,3727,3728],{"class":461,"line":1535},[459,3729,609],{"emptyLinePlaceholder":608},[459,3731,3732],{"class":461,"line":1544},[459,3733,3734],{"class":1004},"\u002F\u002F 2. Add positioning\n",[459,3736,3737,3739,3742,3744,3746,3749,3751,3753,3756,3758,3760,3762,3764,3766,3768],{"class":461,"line":1963},[459,3738,934],{"class":529},[459,3740,3741],{"class":499}," rootPos ",[459,3743,533],{"class":465},[459,3745,912],{"class":942},[459,3747,3748],{"class":499},"(root",[459,3750,879],{"class":465},[459,3752,873],{"class":465},[459,3754,3755],{"class":469}," placement",[459,3757,348],{"class":465},[459,3759,891],{"class":465},[459,3761,1063],{"class":539},[459,3763,536],{"class":465},[459,3765,885],{"class":465},[459,3767,830],{"class":499},[459,3769,898],{"class":465},[459,3771,3772,3774,3777,3779,3781,3784,3786,3788,3790,3792,3794,3796,3798,3800,3802],{"class":461,"line":2005},[459,3773,934],{"class":529},[459,3775,3776],{"class":499}," subPos ",[459,3778,533],{"class":465},[459,3780,912],{"class":942},[459,3782,3783],{"class":499},"(sub",[459,3785,879],{"class":465},[459,3787,873],{"class":465},[459,3789,3755],{"class":469},[459,3791,348],{"class":465},[459,3793,891],{"class":465},[459,3795,2997],{"class":539},[459,3797,536],{"class":465},[459,3799,885],{"class":465},[459,3801,830],{"class":499},[459,3803,898],{"class":465},[459,3805,3806],{"class":461,"line":2014},[459,3807,609],{"emptyLinePlaceholder":608},[459,3809,3810],{"class":461,"line":2023},[459,3811,3812],{"class":1004},"\u002F\u002F 3. Add interactions\n",[459,3814,3815,3817,3820],{"class":461,"line":2032},[459,3816,189],{"class":942},[459,3818,3819],{"class":499},"(root)",[459,3821,898],{"class":465},[459,3823,3824,3826,3828],{"class":461,"line":3212},[459,3825,205],{"class":942},[459,3827,3819],{"class":499},[459,3829,898],{"class":465},[459,3831,3832,3834,3836],{"class":461,"line":3221},[459,3833,209],{"class":942},[459,3835,3819],{"class":499},[459,3837,898],{"class":465},[459,3839,3840,3842,3844,3846,3848,3851,3853,3855,3857,3859],{"class":461,"line":3226},[459,3841,222],{"class":942},[459,3843,3748],{"class":499},[459,3845,879],{"class":465},[459,3847,873],{"class":465},[459,3849,3850],{"class":469}," elementsList",[459,3852,348],{"class":465},[459,3854,3584],{"class":499},[459,3856,1031],{"class":465},[459,3858,830],{"class":499},[459,3860,898],{"class":465},[459,3862,3863],{"class":461,"line":3235},[459,3864,609],{"emptyLinePlaceholder":608},[459,3866,3867,3869,3871,3873,3875,3878,3880,3882,3884,3886,3888,3890,3892,3894,3896,3899,3902,3904,3906,3908,3910],{"class":461,"line":3254},[459,3868,193],{"class":942},[459,3870,3783],{"class":499},[459,3872,879],{"class":465},[459,3874,873],{"class":465},[459,3876,3877],{"class":469}," delay",[459,3879,348],{"class":465},[459,3881,873],{"class":465},[459,3883,2241],{"class":469},[459,3885,348],{"class":465},[459,3887,2553],{"class":1085},[459,3889,879],{"class":465},[459,3891,2558],{"class":469},[459,3893,348],{"class":465},[459,3895,2563],{"class":1085},[459,3897,3898],{"class":465}," },",[459,3900,3901],{"class":469}," safePolygon",[459,3903,348],{"class":465},[459,3905,1097],{"class":1096},[459,3907,885],{"class":465},[459,3909,830],{"class":499},[459,3911,898],{"class":465},[459,3913,3914,3916,3919],{"class":461,"line":3293},[459,3915,205],{"class":942},[459,3917,3918],{"class":499},"(sub)",[459,3920,898],{"class":465},[459,3922,3923,3925,3927],{"class":461,"line":3302},[459,3924,209],{"class":942},[459,3926,3918],{"class":499},[459,3928,898],{"class":465},[459,3930,3931,3933,3935,3937],{"class":461,"line":3311},[459,3932,222],{"class":942},[459,3934,3783],{"class":499},[459,3936,879],{"class":465},[459,3938,1051],{"class":465},[459,3940,3941,3943,3945,3948],{"class":461,"line":3320},[459,3942,1829],{"class":469},[459,3944,348],{"class":465},[459,3946,3947],{"class":499}," subItems",[459,3949,1068],{"class":465},[459,3951,3953,3955,3957,3959,3961],{"class":461,"line":3952},40,[459,3954,3099],{"class":942},[459,3956,348],{"class":465},[459,3958,3104],{"class":465},[459,3960,1365],{"class":529},[459,3962,1051],{"class":465},[459,3964,3966,3969,3971,3973,3975,3977,3979,3981],{"class":461,"line":3965},41,[459,3967,3968],{"class":499}," sub",[459,3970,1375],{"class":465},[459,3972,3123],{"class":499},[459,3974,1375],{"class":465},[459,3976,1388],{"class":499},[459,3978,1297],{"class":465},[459,3980,3132],{"class":1096},[459,3982,898],{"class":465},[459,3984,3986],{"class":461,"line":3985},42,[459,3987,3139],{"class":465},[459,3989,3991,3993,3995],{"class":461,"line":3990},43,[459,3992,1031],{"class":465},[459,3994,830],{"class":499},[459,3996,898],{"class":465},[459,3998,4000,4002,4004],{"class":461,"line":3999},44,[459,4001,503],{"class":465},[459,4003,847],{"class":469},[459,4005,473],{"class":465},[335,4007],{},[338,4009,4011],{"id":4010},"edge-cases-solved","Edge Cases Solved",[281,4013,4014,4029,4037,4046],{},[284,4015,4016,4019,4020,4024,4025,4028],{},[316,4017,4018],{},"Outside Click Safety:"," Clicking inside a teleported child submenu does not dismiss the parent menu because ",[329,4021,4022],{"href":206},[291,4023,205],{}," invokes ",[291,4026,4027],{},"node.contains(target)",", which recursively checks open descendants.",[284,4030,4031,438,4034,4036],{},[316,4032,4033],{},"Deepest Escape First:",[291,4035,310],{}," dismisses only the innermost active submenu first through the deterministic leaf-first Escape protocol.",[284,4038,4039,4042,4043,1375],{},[316,4040,4041],{},"Cascading Teardown:"," When the root menu closes, you can tear down all open descendants using ",[291,4044,4045],{},"rootNode.traverse((node) => node.open.value = false, { order: \"bottom-up\" })",[284,4047,4048,4051,4052,1375],{},[316,4049,4050],{},"Safe Traversal Corridor:"," Moving the cursor diagonally across sibling items to enter the submenu is protected by ",[291,4053,4054],{},"useHover({ safePolygon: true })",[335,4056],{},[338,4058,4060],{"id":4059},"where-to-go-next","Where to Go Next",[281,4062,4063,4070,4076,4081,4086],{},[284,4064,4065,4066,4069],{},"Read ",[329,4067,4068],{"href":49},"Tree Coordination Explained"," for the architectural deep dive.",[284,4071,4072,4073,1375],{},"Read the ",[329,4074,4075],{"href":163},"useFloatingNode API Reference",[284,4077,4072,4078,1375],{},[329,4079,4080],{"href":223},"useRovingFocus API Reference",[284,4082,4072,4083,1375],{},[329,4084,4085],{"href":194},"useHover API Reference",[284,4087,4072,4088,1375],{},[329,4089,4090],{"href":107},"Keyboard Navigation Guide",[4092,4093,4094],"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 .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}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 .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 .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 .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .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 .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}",{"title":358,"searchDepth":476,"depth":476,"links":4096},[4097,4098,4112,4113,4114],{"id":340,"depth":476,"text":341},{"id":446,"depth":476,"text":447,"children":4099},[4100,4102,4104,4106,4108,4110],{"id":825,"depth":487,"text":4101},"1. Root Menu (MenuRoot.vue)",{"id":1200,"depth":487,"text":4103},"2. Root Trigger (MenuTrigger.vue)",{"id":1553,"depth":487,"text":4105},"3. Root Content (MenuContent.vue)",{"id":2041,"depth":487,"text":4107},"4. Submenu Container (MenuSub.vue)",{"id":2329,"depth":487,"text":4109},"5. Submenu Trigger (MenuSubTrigger.vue)",{"id":2733,"depth":487,"text":4111},"6. Submenu Content (MenuSubContent.vue)",{"id":3331,"depth":476,"text":3332},{"id":4010,"depth":476,"text":4011},{"id":4059,"depth":476,"text":4060},"Build nested multi-level submenus with composite floating nodes, implicit DI, and safe cursor corridors.","md",null,{},{"title":70,"description":4115},"w-j5-EIwOF4A6fH6VessoT1e0ysloUr_xYxpE-NdkMw",[4122,4124],{"title":66,"path":67,"stem":68,"description":4123,"children":-1},"Build dialogs and modals with focus trapping and dismissal behavior.",{"title":80,"path":81,"stem":82,"description":4125,"children":-1},"Keep floating content within the viewport with middleware and sizing rules.",1791046165701]