[{"data":1,"prerenderedAt":1236},["ShallowReactive",2],{"navigation_docs":3,"-guide-advanced-safe-polygon-gotchas":271,"-guide-advanced-safe-polygon-gotchas-surround":1231},[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":120,"body":273,"description":1225,"extension":1226,"links":1227,"meta":1228,"navigation":425,"path":121,"seo":1229,"stem":122,"__hash__":1230},"docs\u002F1.guide\u002F6.advanced\u002F2.safe-polygon-gotchas.md",{"type":274,"value":275,"toc":1216},"minimark",[276,284,289,296,301,314,317,576,595,599,602,606,612,626,906,913,917,926,932,1146,1149,1153,1161,1165,1172,1184,1188,1212],[277,278,279,283],"p",{},[280,281,282],"code",{},"safePolygon"," can make hover-based floating UI feel much better, but it can also make a surface feel oddly sticky if you apply it without thinking about the pointer path.",[285,286,288],"h2",{"id":287},"what-problem-it-solves","What problem it solves",[277,290,291,292,295],{},"When there is a visible gap between the trigger and the floating element, a plain ",[280,293,294],{},"pointerleave"," close is often too eager. The user leaves the trigger while moving toward the floating content, and the UI closes before they get there.",[277,297,298,300],{},[280,299,282],{}," keeps the surface open while the pointer travels through a protected corridor between the anchor and the floating element.",[277,302,303,304,309,310,313],{},"It is an option of ",[305,306,307],"a",{"href":194},[280,308,193],{},", which opens and closes with reason ",[280,311,312],{},"hover"," and never closes a surface pinned by another reason.",[277,315,316],{},"Enabling the corridor with defaults takes one option:",[318,319,324],"pre",{"className":320,"code":321,"language":322,"meta":323,"style":323},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\nimport { ref } from \"vue\";\nimport { useFloatingNode, useHover } from \"v-float\";\n\nconst anchorEl = ref\u003CHTMLElement | null>(null);\nconst floatingEl = ref\u003CHTMLElement | null>(null);\n\nconst node = useFloatingNode({ anchorEl, floatingEl });\n\nuseHover(node, { safePolygon: true });\n\u003C\u002Fscript>\n","vue","",[280,325,326,361,391,420,427,467,497,502,533,538,566],{"__ignoreMap":323},[327,328,331,335,339,343,346,349,352,356,358],"span",{"class":329,"line":330},"line",1,[327,332,334],{"class":333},"sMK4o","\u003C",[327,336,338],{"class":337},"swJcz","script",[327,340,342],{"class":341},"spNyl"," setup",[327,344,345],{"class":341}," lang",[327,347,348],{"class":333},"=",[327,350,351],{"class":333},"\"",[327,353,355],{"class":354},"sfazB","ts",[327,357,351],{"class":333},[327,359,360],{"class":333},">\n",[327,362,364,368,371,375,378,381,384,386,388],{"class":329,"line":363},2,[327,365,367],{"class":366},"s7zQu","import",[327,369,370],{"class":333}," {",[327,372,374],{"class":373},"sTEyZ"," ref",[327,376,377],{"class":333}," }",[327,379,380],{"class":366}," from",[327,382,383],{"class":333}," \"",[327,385,322],{"class":354},[327,387,351],{"class":333},[327,389,390],{"class":333},";\n",[327,392,394,396,398,401,404,407,409,411,413,416,418],{"class":329,"line":393},3,[327,395,367],{"class":366},[327,397,370],{"class":333},[327,399,400],{"class":373}," useFloatingNode",[327,402,403],{"class":333},",",[327,405,406],{"class":373}," useHover",[327,408,377],{"class":333},[327,410,380],{"class":366},[327,412,383],{"class":333},[327,414,415],{"class":354},"v-float",[327,417,351],{"class":333},[327,419,390],{"class":333},[327,421,423],{"class":329,"line":422},4,[327,424,426],{"emptyLinePlaceholder":425},true,"\n",[327,428,430,433,436,438,441,443,447,450,453,456,459,462,465],{"class":329,"line":429},5,[327,431,432],{"class":341},"const",[327,434,435],{"class":373}," anchorEl ",[327,437,348],{"class":333},[327,439,374],{"class":440},"s2Zo4",[327,442,334],{"class":333},[327,444,446],{"class":445},"sBMFI","HTMLElement",[327,448,449],{"class":333}," |",[327,451,452],{"class":445}," null",[327,454,455],{"class":333},">",[327,457,458],{"class":373},"(",[327,460,461],{"class":333},"null",[327,463,464],{"class":373},")",[327,466,390],{"class":333},[327,468,470,472,475,477,479,481,483,485,487,489,491,493,495],{"class":329,"line":469},6,[327,471,432],{"class":341},[327,473,474],{"class":373}," floatingEl ",[327,476,348],{"class":333},[327,478,374],{"class":440},[327,480,334],{"class":333},[327,482,446],{"class":445},[327,484,449],{"class":333},[327,486,452],{"class":445},[327,488,455],{"class":333},[327,490,458],{"class":373},[327,492,461],{"class":333},[327,494,464],{"class":373},[327,496,390],{"class":333},[327,498,500],{"class":329,"line":499},7,[327,501,426],{"emptyLinePlaceholder":425},[327,503,505,507,510,512,514,516,519,522,524,526,529,531],{"class":329,"line":504},8,[327,506,432],{"class":341},[327,508,509],{"class":373}," node ",[327,511,348],{"class":333},[327,513,400],{"class":440},[327,515,458],{"class":373},[327,517,518],{"class":333},"{",[327,520,521],{"class":373}," anchorEl",[327,523,403],{"class":333},[327,525,474],{"class":373},[327,527,528],{"class":333},"}",[327,530,464],{"class":373},[327,532,390],{"class":333},[327,534,536],{"class":329,"line":535},9,[327,537,426],{"emptyLinePlaceholder":425},[327,539,541,543,546,548,550,553,556,560,562,564],{"class":329,"line":540},10,[327,542,193],{"class":440},[327,544,545],{"class":373},"(node",[327,547,403],{"class":333},[327,549,370],{"class":333},[327,551,552],{"class":337}," safePolygon",[327,554,555],{"class":333},":",[327,557,559],{"class":558},"sfNiH"," true",[327,561,377],{"class":333},[327,563,464],{"class":373},[327,565,390],{"class":333},[327,567,569,572,574],{"class":329,"line":568},11,[327,570,571],{"class":333},"\u003C\u002F",[327,573,338],{"class":337},[327,575,360],{"class":333},[277,577,578,579,582,583,586,587,590,591,594],{},"Passing ",[280,580,581],{},"true"," enables the corridor with defaults (",[280,584,585],{},"buffer: 0.5",", ",[280,588,589],{},"requireIntent: true","); pass an object to tune them. The option defaults to ",[280,592,593],{},"false",".",[285,596,598],{"id":597},"the-main-tradeoff","The main tradeoff",[277,600,601],{},"The more forgiving the corridor becomes, the less tightly it matches the visible UI. That can create a strange feeling where the pointer appears to have left the UI, but the surface stays open because the safe area is larger than it looks.",[285,603,605],{"id":604},"background-hover-flicker-in-mega-menus","Background hover flicker in mega-menus",[277,607,608,609,611],{},"In mega-menus, multi-column navigation bars, and dense toolbars, moving diagonally from a trigger to a floating panel means crossing intermediate links and buttons. While ",[280,610,282],{}," keeps the active floating panel open, moving the pointer across background DOM elements still fires their native hover and pointer events. Sibling navigation items flash their hover states as the cursor glides past.",[277,613,614,615,618,619,622,623,555],{},"Pass ",[280,616,617],{},"blockPointerEvents: true"," to prevent underlying elements from receiving pointer events while the cursor stays within the safe corridor. By default, this applies to ",[280,620,621],{},"document.body",". To keep the rest of the page interactive and restrict shielding to a specific container, pass ",[280,624,625],{},"getScope",[318,627,629],{"className":320,"code":628,"language":322,"meta":323,"style":323},"\u003Cscript setup lang=\"ts\">\nimport { ref, useTemplateRef } from \"vue\";\nimport { useFloatingNode, useHover } from \"v-float\";\n\nconst navContainerEl = useTemplateRef\u003CHTMLElement>(\"navContainer\");\nconst anchorEl = ref\u003CHTMLElement | null>(null);\nconst floatingEl = ref\u003CHTMLElement | null>(null);\n\nconst node = useFloatingNode({ anchorEl, floatingEl });\n\nuseHover(node, {\n  safePolygon: {\n    blockPointerEvents: true,\n    getScope: () => navContainerEl.value,\n  },\n});\n\u003C\u002Fscript>\n",[280,630,631,651,676,700,704,734,762,790,794,820,824,835,845,858,882,888,897],{"__ignoreMap":323},[327,632,633,635,637,639,641,643,645,647,649],{"class":329,"line":330},[327,634,334],{"class":333},[327,636,338],{"class":337},[327,638,342],{"class":341},[327,640,345],{"class":341},[327,642,348],{"class":333},[327,644,351],{"class":333},[327,646,355],{"class":354},[327,648,351],{"class":333},[327,650,360],{"class":333},[327,652,653,655,657,659,661,664,666,668,670,672,674],{"class":329,"line":363},[327,654,367],{"class":366},[327,656,370],{"class":333},[327,658,374],{"class":373},[327,660,403],{"class":333},[327,662,663],{"class":373}," useTemplateRef",[327,665,377],{"class":333},[327,667,380],{"class":366},[327,669,383],{"class":333},[327,671,322],{"class":354},[327,673,351],{"class":333},[327,675,390],{"class":333},[327,677,678,680,682,684,686,688,690,692,694,696,698],{"class":329,"line":393},[327,679,367],{"class":366},[327,681,370],{"class":333},[327,683,400],{"class":373},[327,685,403],{"class":333},[327,687,406],{"class":373},[327,689,377],{"class":333},[327,691,380],{"class":366},[327,693,383],{"class":333},[327,695,415],{"class":354},[327,697,351],{"class":333},[327,699,390],{"class":333},[327,701,702],{"class":329,"line":422},[327,703,426],{"emptyLinePlaceholder":425},[327,705,706,708,711,713,715,717,719,721,723,725,728,730,732],{"class":329,"line":429},[327,707,432],{"class":341},[327,709,710],{"class":373}," navContainerEl ",[327,712,348],{"class":333},[327,714,663],{"class":440},[327,716,334],{"class":333},[327,718,446],{"class":445},[327,720,455],{"class":333},[327,722,458],{"class":373},[327,724,351],{"class":333},[327,726,727],{"class":354},"navContainer",[327,729,351],{"class":333},[327,731,464],{"class":373},[327,733,390],{"class":333},[327,735,736,738,740,742,744,746,748,750,752,754,756,758,760],{"class":329,"line":469},[327,737,432],{"class":341},[327,739,435],{"class":373},[327,741,348],{"class":333},[327,743,374],{"class":440},[327,745,334],{"class":333},[327,747,446],{"class":445},[327,749,449],{"class":333},[327,751,452],{"class":445},[327,753,455],{"class":333},[327,755,458],{"class":373},[327,757,461],{"class":333},[327,759,464],{"class":373},[327,761,390],{"class":333},[327,763,764,766,768,770,772,774,776,778,780,782,784,786,788],{"class":329,"line":499},[327,765,432],{"class":341},[327,767,474],{"class":373},[327,769,348],{"class":333},[327,771,374],{"class":440},[327,773,334],{"class":333},[327,775,446],{"class":445},[327,777,449],{"class":333},[327,779,452],{"class":445},[327,781,455],{"class":333},[327,783,458],{"class":373},[327,785,461],{"class":333},[327,787,464],{"class":373},[327,789,390],{"class":333},[327,791,792],{"class":329,"line":504},[327,793,426],{"emptyLinePlaceholder":425},[327,795,796,798,800,802,804,806,808,810,812,814,816,818],{"class":329,"line":535},[327,797,432],{"class":341},[327,799,509],{"class":373},[327,801,348],{"class":333},[327,803,400],{"class":440},[327,805,458],{"class":373},[327,807,518],{"class":333},[327,809,521],{"class":373},[327,811,403],{"class":333},[327,813,474],{"class":373},[327,815,528],{"class":333},[327,817,464],{"class":373},[327,819,390],{"class":333},[327,821,822],{"class":329,"line":540},[327,823,426],{"emptyLinePlaceholder":425},[327,825,826,828,830,832],{"class":329,"line":568},[327,827,193],{"class":440},[327,829,545],{"class":373},[327,831,403],{"class":333},[327,833,834],{"class":333}," {\n",[327,836,838,841,843],{"class":329,"line":837},12,[327,839,840],{"class":337},"  safePolygon",[327,842,555],{"class":333},[327,844,834],{"class":333},[327,846,848,851,853,855],{"class":329,"line":847},13,[327,849,850],{"class":337},"    blockPointerEvents",[327,852,555],{"class":333},[327,854,559],{"class":558},[327,856,857],{"class":333},",\n",[327,859,861,864,866,869,872,875,877,880],{"class":329,"line":860},14,[327,862,863],{"class":440},"    getScope",[327,865,555],{"class":333},[327,867,868],{"class":333}," ()",[327,870,871],{"class":341}," =>",[327,873,874],{"class":373}," navContainerEl",[327,876,594],{"class":333},[327,878,879],{"class":373},"value",[327,881,857],{"class":333},[327,883,885],{"class":329,"line":884},15,[327,886,887],{"class":333},"  },\n",[327,889,891,893,895],{"class":329,"line":890},16,[327,892,528],{"class":333},[327,894,464],{"class":373},[327,896,390],{"class":333},[327,898,900,902,904],{"class":329,"line":899},17,[327,901,571],{"class":333},[327,903,338],{"class":337},[327,905,360],{"class":333},[277,907,908,909,912],{},"Underlying elements within the scoped container stop firing pointer events during corridor transit, eliminating flicker without modifying global CSS. Reference-counted hold tracking ensures that nested menus and overlapping corridors never strand ",[280,910,911],{},"pointer-events"," disabled. Pointer events restore immediately once the pointer enters the floating panel, returns to the anchor, or leaves the corridor.",[285,914,916],{"id":915},"abrupt-closes-on-wide-layouts","Abrupt closes on wide layouts",[277,918,919,920,922,923,925],{},"By default, ",[280,921,282],{}," checks whether the user is still moving toward the floating element (",[280,924,589],{},"). If the cursor slows down below 0.1 px\u002Fms, a 40ms timer triggers closure.",[277,927,928,929,555],{},"In wide layouts or large mega-menus, users travel longer screen distances and often pause briefly mid-transit while reading or reorienting. If 40ms feels too abrupt, increase ",[280,930,931],{},"intentTimeout",[318,933,935],{"className":320,"code":934,"language":322,"meta":323,"style":323},"\u003Cscript setup lang=\"ts\">\nimport { ref } from \"vue\";\nimport { useFloatingNode, useHover } from \"v-float\";\n\nconst anchorEl = ref\u003CHTMLElement | null>(null);\nconst floatingEl = ref\u003CHTMLElement | null>(null);\n\nconst node = useFloatingNode({ anchorEl, floatingEl });\n\nuseHover(node, {\n  safePolygon: {\n    intentTimeout: 100,\n  },\n});\n\u003C\u002Fscript>\n",[280,936,937,957,977,1001,1005,1033,1061,1065,1091,1095,1105,1113,1126,1130,1138],{"__ignoreMap":323},[327,938,939,941,943,945,947,949,951,953,955],{"class":329,"line":330},[327,940,334],{"class":333},[327,942,338],{"class":337},[327,944,342],{"class":341},[327,946,345],{"class":341},[327,948,348],{"class":333},[327,950,351],{"class":333},[327,952,355],{"class":354},[327,954,351],{"class":333},[327,956,360],{"class":333},[327,958,959,961,963,965,967,969,971,973,975],{"class":329,"line":363},[327,960,367],{"class":366},[327,962,370],{"class":333},[327,964,374],{"class":373},[327,966,377],{"class":333},[327,968,380],{"class":366},[327,970,383],{"class":333},[327,972,322],{"class":354},[327,974,351],{"class":333},[327,976,390],{"class":333},[327,978,979,981,983,985,987,989,991,993,995,997,999],{"class":329,"line":393},[327,980,367],{"class":366},[327,982,370],{"class":333},[327,984,400],{"class":373},[327,986,403],{"class":333},[327,988,406],{"class":373},[327,990,377],{"class":333},[327,992,380],{"class":366},[327,994,383],{"class":333},[327,996,415],{"class":354},[327,998,351],{"class":333},[327,1000,390],{"class":333},[327,1002,1003],{"class":329,"line":422},[327,1004,426],{"emptyLinePlaceholder":425},[327,1006,1007,1009,1011,1013,1015,1017,1019,1021,1023,1025,1027,1029,1031],{"class":329,"line":429},[327,1008,432],{"class":341},[327,1010,435],{"class":373},[327,1012,348],{"class":333},[327,1014,374],{"class":440},[327,1016,334],{"class":333},[327,1018,446],{"class":445},[327,1020,449],{"class":333},[327,1022,452],{"class":445},[327,1024,455],{"class":333},[327,1026,458],{"class":373},[327,1028,461],{"class":333},[327,1030,464],{"class":373},[327,1032,390],{"class":333},[327,1034,1035,1037,1039,1041,1043,1045,1047,1049,1051,1053,1055,1057,1059],{"class":329,"line":469},[327,1036,432],{"class":341},[327,1038,474],{"class":373},[327,1040,348],{"class":333},[327,1042,374],{"class":440},[327,1044,334],{"class":333},[327,1046,446],{"class":445},[327,1048,449],{"class":333},[327,1050,452],{"class":445},[327,1052,455],{"class":333},[327,1054,458],{"class":373},[327,1056,461],{"class":333},[327,1058,464],{"class":373},[327,1060,390],{"class":333},[327,1062,1063],{"class":329,"line":499},[327,1064,426],{"emptyLinePlaceholder":425},[327,1066,1067,1069,1071,1073,1075,1077,1079,1081,1083,1085,1087,1089],{"class":329,"line":504},[327,1068,432],{"class":341},[327,1070,509],{"class":373},[327,1072,348],{"class":333},[327,1074,400],{"class":440},[327,1076,458],{"class":373},[327,1078,518],{"class":333},[327,1080,521],{"class":373},[327,1082,403],{"class":333},[327,1084,474],{"class":373},[327,1086,528],{"class":333},[327,1088,464],{"class":373},[327,1090,390],{"class":333},[327,1092,1093],{"class":329,"line":535},[327,1094,426],{"emptyLinePlaceholder":425},[327,1096,1097,1099,1101,1103],{"class":329,"line":540},[327,1098,193],{"class":440},[327,1100,545],{"class":373},[327,1102,403],{"class":333},[327,1104,834],{"class":333},[327,1106,1107,1109,1111],{"class":329,"line":568},[327,1108,840],{"class":337},[327,1110,555],{"class":333},[327,1112,834],{"class":333},[327,1114,1115,1118,1120,1124],{"class":329,"line":837},[327,1116,1117],{"class":337},"    intentTimeout",[327,1119,555],{"class":333},[327,1121,1123],{"class":1122},"sbssI"," 100",[327,1125,857],{"class":333},[327,1127,1128],{"class":329,"line":847},[327,1129,887],{"class":333},[327,1131,1132,1134,1136],{"class":329,"line":860},[327,1133,528],{"class":333},[327,1135,464],{"class":373},[327,1137,390],{"class":333},[327,1139,1140,1142,1144],{"class":329,"line":884},[327,1141,571],{"class":333},[327,1143,338],{"class":337},[327,1145,360],{"class":333},[277,1147,1148],{},"A value between 80ms and 150ms gives users a forgiving pause window. Keep this bounded: excessively high values make menus feel unresponsive when users deliberately move away.",[285,1150,1152],{"id":1151},"opposite-side-departures-skip-the-corridor","Opposite-side departures skip the corridor",[277,1154,1155,1157,1158,1160],{},[280,1156,282],{}," only activates when the pointer exits the anchor toward the floating panel. If the user moves away from the floating panel in the opposite direction (for example, leaving via the left edge of an anchor when the floating panel is positioned to the right), ",[280,1159,193],{}," detects the departure immediately and skips corridor creation. This avoids sticky or sluggish dismissals when the user is navigating away from the floating UI.",[285,1162,1164],{"id":1163},"debug-the-corridor-if-hover-feels-wrong","Debug the corridor if hover feels wrong",[277,1166,1167,1168,1171],{},"If the behavior feels surprising, pass ",[280,1169,1170],{},"safePolygon: { onPolygonChange }"," to inspect the polygon while debugging. Clearing the corridor (on close or re-enter) reports an empty polygon.",[277,1173,1174,1175,1179,1180,1183],{},"For nested menus, ",[305,1176,1177],{"href":194},[280,1178,193],{}," uses intrinsic family awareness (",[280,1181,1182],{},"node.contains()",") so moving into a descendant surface's anchor or floating element does not prematurely close the parent.",[285,1185,1187],{"id":1186},"where-to-go-next","Where to go next",[1189,1190,1191,1199,1205],"ul",{},[1192,1193,1194,1195,1198],"li",{},"Read ",[305,1196,1197],{"href":59},"Build Accessible Tooltips"," for the main workflow.",[1192,1200,1194,1201,1204],{},[305,1202,1203],{"href":71},"Build Nested Menus"," if the hover corridor problem shows up in submenu behavior.",[1192,1206,1194,1207,1211],{},[305,1208,1209],{"href":194},[280,1210,193],{}," for full option contracts and defaults.",[1213,1214,1215],"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 pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}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 .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}",{"title":323,"searchDepth":363,"depth":363,"links":1217},[1218,1219,1220,1221,1222,1223,1224],{"id":287,"depth":363,"text":288},{"id":597,"depth":363,"text":598},{"id":604,"depth":363,"text":605},{"id":915,"depth":363,"text":916},{"id":1151,"depth":363,"text":1152},{"id":1163,"depth":363,"text":1164},{"id":1186,"depth":363,"text":1187},"Avoid common safe polygon edge cases when moving between surfaces.","md",null,{},{"title":120,"description":1225},"2FIsc3svwCXXrNdGOt2meeFwrwY54Yq2xkg-WryzRHE",[1232,1234],{"title":116,"path":117,"stem":118,"description":1233,"children":-1},"Choose between controlled and uncontrolled open state patterns.",{"title":124,"path":125,"stem":126,"description":1235,"children":-1},"Avoid pitfalls when using virtual anchors for cursor-based positioning.",1791046167937]