[{"data":1,"prerenderedAt":1423},["ShallowReactive",2],{"navigation_docs":3,"-guide-accessibility-hover-and-dismissal":226,"-guide-accessibility-hover-and-dismissal-surround":1418},[4,90],{"title":5,"icon":6,"path":7,"stem":8,"children":9,"page":28},"Guide","i-lucide-book-open","\u002Fguide","1.guide",[10,29,51,68],{"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 Menu","\u002Fguide\u002Fgetting-started\u002Ffirst-menu","1.guide\u002F1.getting-started\u002F3.first-menu",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},"Positioning","\u002Fguide\u002Fcore-concepts\u002Fpositioning","1.guide\u002F2.core-concepts\u002F2.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},"Hierarchy","\u002Fguide\u002Fcore-concepts\u002Fhierarchy","1.guide\u002F2.core-concepts\u002F4.hierarchy",{"title":40,"icon":52,"path":53,"stem":54,"children":55,"page":28},"i-lucide-crosshair","\u002Fguide\u002Fpositioning","1.guide\u002F3.positioning",[56,60,64],{"title":57,"path":58,"stem":59},"Middlewares","\u002Fguide\u002Fpositioning\u002Fmiddlewares","1.guide\u002F3.positioning\u002F1.middlewares",{"title":61,"path":62,"stem":63},"Virtual Anchors","\u002Fguide\u002Fpositioning\u002Fvirtual-anchors","1.guide\u002F3.positioning\u002F2.virtual-anchors",{"title":65,"path":66,"stem":67},"Animations and Transitions","\u002Fguide\u002Fpositioning\u002Fanimations-and-transitions","1.guide\u002F3.positioning\u002F3.animations-and-transitions",{"title":69,"icon":70,"path":71,"stem":72,"children":73,"page":28},"Accessibility","i-lucide-person-standing","\u002Fguide\u002Faccessibility","1.guide\u002F4.accessibility",[74,78,82,86],{"title":75,"path":76,"stem":77},"ARIA & Semantics","\u002Fguide\u002Faccessibility\u002Faria-and-semantics","1.guide\u002F4.accessibility\u002F1.aria-and-semantics",{"title":79,"path":80,"stem":81},"Focus Models","\u002Fguide\u002Faccessibility\u002Ffocus-models","1.guide\u002F4.accessibility\u002F2.focus-models",{"title":83,"path":84,"stem":85},"Keyboard Navigation","\u002Fguide\u002Faccessibility\u002Fkeyboard-navigation","1.guide\u002F4.accessibility\u002F3.keyboard-navigation",{"title":87,"path":88,"stem":89},"Hover & Dismissal","\u002Fguide\u002Faccessibility\u002Fhover-and-dismissal","1.guide\u002F4.accessibility\u002F4.hover-and-dismissal",{"title":91,"icon":92,"path":93,"stem":94,"children":95},"API Reference","i-lucide-code-xml","\u002Fapi","2.api",[96,100,110,120,137,171,188],{"title":97,"path":93,"stem":98,"icon":99},"Overview","2.api\u002Findex","i-lucide-file-text",{"title":101,"icon":102,"path":103,"stem":104,"children":105,"page":28},"Reference","i-lucide-braces","\u002Fapi\u002Foverview","2.api\u002F1.overview",[106],{"title":107,"path":108,"stem":109},"Types","\u002Fapi\u002Foverview\u002Ftypes","2.api\u002F1.overview\u002F1.types",{"title":111,"icon":112,"path":113,"stem":114,"children":115,"page":28},"Core","i-lucide-box","\u002Fapi\u002Fcore","2.api\u002F2.core",[116],{"title":117,"path":118,"stem":119},"useFloatingNode","\u002Fapi\u002Fcore\u002Fuse-floating-node","2.api\u002F2.core\u002F1.use-floating-node",{"title":40,"icon":121,"path":122,"stem":123,"children":124,"page":28},"i-lucide-move","\u002Fapi\u002Fpositioning","2.api\u002F3.positioning",[125,129,133],{"title":126,"path":127,"stem":128},"usePosition","\u002Fapi\u002Fpositioning\u002Fuse-position","2.api\u002F3.positioning\u002F1.use-position",{"title":130,"path":131,"stem":132},"useArrow","\u002Fapi\u002Fpositioning\u002Fuse-arrow","2.api\u002F3.positioning\u002F2.use-arrow",{"title":134,"path":135,"stem":136},"useClientPoint","\u002Fapi\u002Fpositioning\u002Fuse-client-point","2.api\u002F3.positioning\u002F3.use-client-point",{"title":138,"icon":139,"path":140,"stem":141,"children":142,"page":28},"Interactions","i-lucide-mouse-pointer-click","\u002Fapi\u002Finteractions","2.api\u002F4.interactions",[143,147,151,155,159,163,167],{"title":144,"path":145,"stem":146},"useClick","\u002Fapi\u002Finteractions\u002Fuse-click","2.api\u002F4.interactions\u002F1.use-click",{"title":148,"path":149,"stem":150},"useHover","\u002Fapi\u002Finteractions\u002Fuse-hover","2.api\u002F4.interactions\u002F2.use-hover",{"title":152,"path":153,"stem":154},"useFocus","\u002Fapi\u002Finteractions\u002Fuse-focus","2.api\u002F4.interactions\u002F3.use-focus",{"title":156,"path":157,"stem":158},"useFocusTrap","\u002Fapi\u002Finteractions\u002Fuse-focus-trap","2.api\u002F4.interactions\u002F4.use-focus-trap",{"title":160,"path":161,"stem":162},"useOutsideClick","\u002Fapi\u002Finteractions\u002Fuse-outside-click","2.api\u002F4.interactions\u002F5.use-outside-click",{"title":164,"path":165,"stem":166},"useEscapeKey","\u002Fapi\u002Finteractions\u002Fuse-escape-key","2.api\u002F4.interactions\u002F6.use-escape-key",{"title":168,"path":169,"stem":170},"useRole","\u002Fapi\u002Finteractions\u002Fuse-role","2.api\u002F4.interactions\u002F7.use-role",{"title":83,"icon":172,"path":173,"stem":174,"children":175,"page":28},"i-lucide-keyboard","\u002Fapi\u002Fkeyboard-navigation","2.api\u002F5.keyboard-navigation",[176,180,184],{"title":177,"path":178,"stem":179},"useRovingFocus","\u002Fapi\u002Fkeyboard-navigation\u002Fuse-roving-focus","2.api\u002F5.keyboard-navigation\u002F1.use-roving-focus",{"title":181,"path":182,"stem":183},"useAriaActivedescendant","\u002Fapi\u002Fkeyboard-navigation\u002Fuse-aria-activedescendant","2.api\u002F5.keyboard-navigation\u002F2.use-aria-activedescendant",{"title":185,"path":186,"stem":187},"useTypeahead","\u002Fapi\u002Fkeyboard-navigation\u002Fuse-typeahead","2.api\u002F5.keyboard-navigation\u002F3.use-typeahead",{"title":189,"icon":190,"path":191,"stem":192,"children":193,"page":28},"Middleware","i-lucide-blocks","\u002Fapi\u002Fmiddleware","2.api\u002F6.middleware",[194,198,202,206,210,214,218,222],{"title":195,"path":196,"stem":197},"offset","\u002Fapi\u002Fmiddleware\u002Foffset","2.api\u002F6.middleware\u002F1.offset",{"title":199,"path":200,"stem":201},"flip","\u002Fapi\u002Fmiddleware\u002Fflip","2.api\u002F6.middleware\u002F2.flip",{"title":203,"path":204,"stem":205},"shift","\u002Fapi\u002Fmiddleware\u002Fshift","2.api\u002F6.middleware\u002F3.shift",{"title":207,"path":208,"stem":209},"autoPlacement","\u002Fapi\u002Fmiddleware\u002Fautoplacement","2.api\u002F6.middleware\u002F4.autoplacement",{"title":211,"path":212,"stem":213},"size","\u002Fapi\u002Fmiddleware\u002Fsize","2.api\u002F6.middleware\u002F5.size",{"title":215,"path":216,"stem":217},"inline","\u002Fapi\u002Fmiddleware\u002Finline","2.api\u002F6.middleware\u002F6.inline",{"title":219,"path":220,"stem":221},"arrow","\u002Fapi\u002Fmiddleware\u002Farrow","2.api\u002F6.middleware\u002F7.arrow",{"title":223,"path":224,"stem":225},"hide","\u002Fapi\u002Fmiddleware\u002Fhide","2.api\u002F6.middleware\u002F8.hide",{"id":227,"title":87,"body":228,"description":1412,"extension":1413,"links":1414,"meta":1415,"navigation":487,"path":88,"seo":1416,"stem":89,"__hash__":1417},"docs\u002F1.guide\u002F4.accessibility\u002F4.hover-and-dismissal.md",{"type":229,"value":230,"toc":1393},"minimark",[231,235,238,261,264,269,277,299,307,314,321,331,334,956,961,968,971,975,978,985,1030,1033,1039,1046,1061,1069,1073,1079,1091,1102,1106,1112,1117,1121,1128,1131,1134,1149,1155,1158,1165,1176,1180,1183,1192,1203,1322,1329,1333,1358,1362,1389],[232,233,234],"p",{},"Floating surfaces triggered by pointer hover or keyboard focus are among the most common sources of accessibility failures on the web.",[232,236,237],{},"When a tooltip vanishes before a user can move their mouse over it, or when an overlay blocks underlying content and cannot be dismissed without losing keyboard position, the interface fails users relying on screen magnifiers, keyboard navigation, or motor assistance.",[232,239,240,247,248,252,253,256,257,260],{},[241,242,246],"a",{"href":243,"rel":244},"https:\u002F\u002Fwww.w3.org\u002FWAI\u002FWCAG21\u002FUnderstanding\u002Fcontent-on-hover-or-focus.html",[245],"nofollow","WCAG 2.1 Success Criterion 1.4.13 (\"Content on Hover or Focus\")"," establishes three mandatory rules for all hover- and focus-triggered surfaces: ",[249,250,251],"strong",{},"Dismissable",", ",[249,254,255],{},"Hoverable",", and ",[249,258,259],{},"Persistent",".",[232,262,263],{},"This guide explains how VFloat primitives satisfy these requirements.",[265,266,268],"h2",{"id":267},"the-wcag-21-sc-1413-checklist","The WCAG 2.1 SC 1.4.13 checklist",[232,270,271,272,276],{},"Before building any tooltip, hover card, or popover, ensure your surface satisfies the three core criteria defined in ",[241,273,275],{"href":243,"rel":274},[245],"WCAG 2.1 SC 1.4.13",":",[278,279,280,287,293],"ol",{},[281,282,283,286],"li",{},[249,284,285],{},"Dismissable:"," Users must be able to dismiss the floating surface without moving their pointer or keyboard focus.",[281,288,289,292],{},[249,290,291],{},"Hoverable:"," If pointer hover reveals the surface, the pointer must be able to move over the surface content without the surface disappearing.",[281,294,295,298],{},[249,296,297],{},"Persistent:"," The surface must remain visible until the hover or focus trigger is removed, the user explicitly dismisses it, or its content is no longer valid.",[265,300,302,303],{"id":301},"hoverable-bridging-the-cursor-gap-with-safepolygon","Hoverable: bridging the cursor gap with ",[304,305,306],"code",{},"safePolygon",[232,308,309,310,313],{},"When you position a tooltip or hover card with margin or offset middleware (such as ",[304,311,312],{},"offset: 8","), an empty gap separates the trigger button and the floating panel.",[232,315,316,317,320],{},"In standard DOM event handling, the moment the user moves the mouse across that gap, the trigger fires a ",[304,318,319],{},"pointerleave"," event, destroying the floating surface before the cursor ever reaches it. This makes it impossible for screen magnifier users to pan across the tooltip or for motor-impaired users to select text inside it.",[232,322,323,327,328,330],{},[241,324,325],{"href":149},[304,326,148],{}," solves this problem through the ",[304,329,306],{}," option.",[232,332,333],{},"Here is an accessible hover card that remains open while the cursor travels to it:",[335,336,341],"pre",{"className":337,"code":338,"language":339,"meta":340,"style":340},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\nimport { ref } from \"vue\";\nimport {\n  useEscapeKey,\n  useFloatingNode,\n  useFocus,\n  useHover,\n  useOutsideClick,\n  usePosition,\n} from \"v-float\";\n\nconst anchorEl = ref\u003CHTMLElement | null>(null);\nconst floatingEl = ref\u003CHTMLElement | null>(null);\n\nconst node = useFloatingNode({ anchorEl, floatingEl });\nusePosition(node, {\n  placement: \"bottom\",\n  middlewares: { offset: 8 },\n});\n\n\u002F\u002F Enable safe polygon corridor for pointer traversal\nuseHover(node, {\n  safePolygon: true,\n  restMs: 100,\n});\n\nuseFocus(node);\nuseEscapeKey(node);\nuseOutsideClick(node);\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cbutton ref=\"anchorEl\" type=\"button\" aria-describedby=\"user-card\">@alex\u003C\u002Fbutton>\n\n  \u003Cdiv v-if=\"node.open.value\" id=\"user-card\" ref=\"floatingEl\" class=\"card\">\n    \u003Cp>Alex Morgan: Design Engineer\u003C\u002Fp>\n    \u003Ca href=\"\u002Fprofile\">View full profile\u003C\u002Fa>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n","vue","",[304,342,343,378,408,416,425,433,441,449,457,465,482,489,529,559,564,596,608,625,647,656,661,668,679,693,706,715,720,730,739,748,758,763,773,827,832,888,907,937,947],{"__ignoreMap":340},[344,345,348,352,356,360,363,366,369,373,375],"span",{"class":346,"line":347},"line",1,[344,349,351],{"class":350},"sMK4o","\u003C",[344,353,355],{"class":354},"swJcz","script",[344,357,359],{"class":358},"spNyl"," setup",[344,361,362],{"class":358}," lang",[344,364,365],{"class":350},"=",[344,367,368],{"class":350},"\"",[344,370,372],{"class":371},"sfazB","ts",[344,374,368],{"class":350},[344,376,377],{"class":350},">\n",[344,379,381,385,388,392,395,398,401,403,405],{"class":346,"line":380},2,[344,382,384],{"class":383},"s7zQu","import",[344,386,387],{"class":350}," {",[344,389,391],{"class":390},"sTEyZ"," ref",[344,393,394],{"class":350}," }",[344,396,397],{"class":383}," from",[344,399,400],{"class":350}," \"",[344,402,339],{"class":371},[344,404,368],{"class":350},[344,406,407],{"class":350},";\n",[344,409,411,413],{"class":346,"line":410},3,[344,412,384],{"class":383},[344,414,415],{"class":350}," {\n",[344,417,419,422],{"class":346,"line":418},4,[344,420,421],{"class":390},"  useEscapeKey",[344,423,424],{"class":350},",\n",[344,426,428,431],{"class":346,"line":427},5,[344,429,430],{"class":390},"  useFloatingNode",[344,432,424],{"class":350},[344,434,436,439],{"class":346,"line":435},6,[344,437,438],{"class":390},"  useFocus",[344,440,424],{"class":350},[344,442,444,447],{"class":346,"line":443},7,[344,445,446],{"class":390},"  useHover",[344,448,424],{"class":350},[344,450,452,455],{"class":346,"line":451},8,[344,453,454],{"class":390},"  useOutsideClick",[344,456,424],{"class":350},[344,458,460,463],{"class":346,"line":459},9,[344,461,462],{"class":390},"  usePosition",[344,464,424],{"class":350},[344,466,468,471,473,475,478,480],{"class":346,"line":467},10,[344,469,470],{"class":350},"}",[344,472,397],{"class":383},[344,474,400],{"class":350},[344,476,477],{"class":371},"v-float",[344,479,368],{"class":350},[344,481,407],{"class":350},[344,483,485],{"class":346,"line":484},11,[344,486,488],{"emptyLinePlaceholder":487},true,"\n",[344,490,492,495,498,500,503,505,509,512,515,518,521,524,527],{"class":346,"line":491},12,[344,493,494],{"class":358},"const",[344,496,497],{"class":390}," anchorEl ",[344,499,365],{"class":350},[344,501,391],{"class":502},"s2Zo4",[344,504,351],{"class":350},[344,506,508],{"class":507},"sBMFI","HTMLElement",[344,510,511],{"class":350}," |",[344,513,514],{"class":507}," null",[344,516,517],{"class":350},">",[344,519,520],{"class":390},"(",[344,522,523],{"class":350},"null",[344,525,526],{"class":390},")",[344,528,407],{"class":350},[344,530,532,534,537,539,541,543,545,547,549,551,553,555,557],{"class":346,"line":531},13,[344,533,494],{"class":358},[344,535,536],{"class":390}," floatingEl ",[344,538,365],{"class":350},[344,540,391],{"class":502},[344,542,351],{"class":350},[344,544,508],{"class":507},[344,546,511],{"class":350},[344,548,514],{"class":507},[344,550,517],{"class":350},[344,552,520],{"class":390},[344,554,523],{"class":350},[344,556,526],{"class":390},[344,558,407],{"class":350},[344,560,562],{"class":346,"line":561},14,[344,563,488],{"emptyLinePlaceholder":487},[344,565,567,569,572,574,577,579,582,585,588,590,592,594],{"class":346,"line":566},15,[344,568,494],{"class":358},[344,570,571],{"class":390}," node ",[344,573,365],{"class":350},[344,575,576],{"class":502}," useFloatingNode",[344,578,520],{"class":390},[344,580,581],{"class":350},"{",[344,583,584],{"class":390}," anchorEl",[344,586,587],{"class":350},",",[344,589,536],{"class":390},[344,591,470],{"class":350},[344,593,526],{"class":390},[344,595,407],{"class":350},[344,597,599,601,604,606],{"class":346,"line":598},16,[344,600,126],{"class":502},[344,602,603],{"class":390},"(node",[344,605,587],{"class":350},[344,607,415],{"class":350},[344,609,611,614,616,618,621,623],{"class":346,"line":610},17,[344,612,613],{"class":354},"  placement",[344,615,276],{"class":350},[344,617,400],{"class":350},[344,619,620],{"class":371},"bottom",[344,622,368],{"class":350},[344,624,424],{"class":350},[344,626,628,631,633,635,638,640,644],{"class":346,"line":627},18,[344,629,630],{"class":354},"  middlewares",[344,632,276],{"class":350},[344,634,387],{"class":350},[344,636,637],{"class":354}," offset",[344,639,276],{"class":350},[344,641,643],{"class":642},"sbssI"," 8",[344,645,646],{"class":350}," },\n",[344,648,650,652,654],{"class":346,"line":649},19,[344,651,470],{"class":350},[344,653,526],{"class":390},[344,655,407],{"class":350},[344,657,659],{"class":346,"line":658},20,[344,660,488],{"emptyLinePlaceholder":487},[344,662,664],{"class":346,"line":663},21,[344,665,667],{"class":666},"sHwdD","\u002F\u002F Enable safe polygon corridor for pointer traversal\n",[344,669,671,673,675,677],{"class":346,"line":670},22,[344,672,148],{"class":502},[344,674,603],{"class":390},[344,676,587],{"class":350},[344,678,415],{"class":350},[344,680,682,685,687,691],{"class":346,"line":681},23,[344,683,684],{"class":354},"  safePolygon",[344,686,276],{"class":350},[344,688,690],{"class":689},"sfNiH"," true",[344,692,424],{"class":350},[344,694,696,699,701,704],{"class":346,"line":695},24,[344,697,698],{"class":354},"  restMs",[344,700,276],{"class":350},[344,702,703],{"class":642}," 100",[344,705,424],{"class":350},[344,707,709,711,713],{"class":346,"line":708},25,[344,710,470],{"class":350},[344,712,526],{"class":390},[344,714,407],{"class":350},[344,716,718],{"class":346,"line":717},26,[344,719,488],{"emptyLinePlaceholder":487},[344,721,723,725,728],{"class":346,"line":722},27,[344,724,152],{"class":502},[344,726,727],{"class":390},"(node)",[344,729,407],{"class":350},[344,731,733,735,737],{"class":346,"line":732},28,[344,734,164],{"class":502},[344,736,727],{"class":390},[344,738,407],{"class":350},[344,740,742,744,746],{"class":346,"line":741},29,[344,743,160],{"class":502},[344,745,727],{"class":390},[344,747,407],{"class":350},[344,749,751,754,756],{"class":346,"line":750},30,[344,752,753],{"class":350},"\u003C\u002F",[344,755,355],{"class":354},[344,757,377],{"class":350},[344,759,761],{"class":346,"line":760},31,[344,762,488],{"emptyLinePlaceholder":487},[344,764,766,768,771],{"class":346,"line":765},32,[344,767,351],{"class":350},[344,769,770],{"class":354},"template",[344,772,377],{"class":350},[344,774,776,779,782,784,786,788,791,793,796,798,800,802,804,807,809,811,814,816,818,821,823,825],{"class":346,"line":775},33,[344,777,778],{"class":350},"  \u003C",[344,780,781],{"class":354},"button",[344,783,391],{"class":358},[344,785,365],{"class":350},[344,787,368],{"class":350},[344,789,790],{"class":371},"anchorEl",[344,792,368],{"class":350},[344,794,795],{"class":358}," type",[344,797,365],{"class":350},[344,799,368],{"class":350},[344,801,781],{"class":371},[344,803,368],{"class":350},[344,805,806],{"class":358}," aria-describedby",[344,808,365],{"class":350},[344,810,368],{"class":350},[344,812,813],{"class":371},"user-card",[344,815,368],{"class":350},[344,817,517],{"class":350},[344,819,820],{"class":390},"@alex",[344,822,753],{"class":350},[344,824,781],{"class":354},[344,826,377],{"class":350},[344,828,830],{"class":346,"line":829},34,[344,831,488],{"emptyLinePlaceholder":487},[344,833,835,837,840,843,845,847,850,852,855,857,859,861,863,865,867,869,872,874,877,879,881,884,886],{"class":346,"line":834},35,[344,836,778],{"class":350},[344,838,839],{"class":354},"div",[344,841,842],{"class":358}," v-if",[344,844,365],{"class":350},[344,846,368],{"class":350},[344,848,849],{"class":371},"node.open.value",[344,851,368],{"class":350},[344,853,854],{"class":358}," id",[344,856,365],{"class":350},[344,858,368],{"class":350},[344,860,813],{"class":371},[344,862,368],{"class":350},[344,864,391],{"class":358},[344,866,365],{"class":350},[344,868,368],{"class":350},[344,870,871],{"class":371},"floatingEl",[344,873,368],{"class":350},[344,875,876],{"class":358}," class",[344,878,365],{"class":350},[344,880,368],{"class":350},[344,882,883],{"class":371},"card",[344,885,368],{"class":350},[344,887,377],{"class":350},[344,889,891,894,896,898,901,903,905],{"class":346,"line":890},36,[344,892,893],{"class":350},"    \u003C",[344,895,232],{"class":354},[344,897,517],{"class":350},[344,899,900],{"class":390},"Alex Morgan: Design Engineer",[344,902,753],{"class":350},[344,904,232],{"class":354},[344,906,377],{"class":350},[344,908,910,912,914,917,919,921,924,926,928,931,933,935],{"class":346,"line":909},37,[344,911,893],{"class":350},[344,913,241],{"class":354},[344,915,916],{"class":358}," href",[344,918,365],{"class":350},[344,920,368],{"class":350},[344,922,923],{"class":371},"\u002Fprofile",[344,925,368],{"class":350},[344,927,517],{"class":350},[344,929,930],{"class":390},"View full profile",[344,932,753],{"class":350},[344,934,241],{"class":354},[344,936,377],{"class":350},[344,938,940,943,945],{"class":346,"line":939},38,[344,941,942],{"class":350},"  \u003C\u002F",[344,944,839],{"class":354},[344,946,377],{"class":350},[344,948,950,952,954],{"class":346,"line":949},39,[344,951,753],{"class":350},[344,953,770],{"class":354},[344,955,377],{"class":350},[957,958,960],"h3",{"id":959},"how-safe-polygons-work","How safe polygons work",[232,962,963,964,967],{},"When ",[304,965,966],{},"safePolygon: true"," is configured, VFloat calculates a dynamic geometric polygon that connects the cursor's exit coordinates on the trigger to the bounding corners of the floating element.",[232,969,970],{},"As long as the mouse pointer moves within this invisible triangular or trapezoidal corridor toward the floating surface, the close timer is paused. Once the cursor enters the floating element itself, the surface remains open normally.",[957,972,974],{"id":973},"preventing-visual-noise-with-hover-intent","Preventing visual noise with hover intent",[232,976,977],{},"Triggering popups instantly on casual mouse movements creates visual distraction for users with cognitive or attention challenges.",[232,979,980,981,984],{},"The ",[304,982,983],{},"restMs"," option (defaulting to 0ms) requires the pointer to pause briefly over the trigger before opening the surface:",[335,986,989],{"className":987,"code":988,"language":372,"meta":340,"style":340},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","useHover(node, {\n  safePolygon: true,\n  restMs: 150,\n});\n",[304,990,991,1001,1011,1022],{"__ignoreMap":340},[344,992,993,995,997,999],{"class":346,"line":347},[344,994,148],{"class":502},[344,996,603],{"class":390},[344,998,587],{"class":350},[344,1000,415],{"class":350},[344,1002,1003,1005,1007,1009],{"class":346,"line":380},[344,1004,684],{"class":354},[344,1006,276],{"class":350},[344,1008,690],{"class":689},[344,1010,424],{"class":350},[344,1012,1013,1015,1017,1020],{"class":346,"line":410},[344,1014,698],{"class":354},[344,1016,276],{"class":350},[344,1018,1019],{"class":642}," 150",[344,1021,424],{"class":350},[344,1023,1024,1026,1028],{"class":346,"line":418},[344,1025,470],{"class":350},[344,1027,526],{"class":390},[344,1029,407],{"class":350},[232,1031,1032],{},"If the cursor merely travels across the button on its way to another part of the screen, the surface never opens.",[265,1034,1036,1037],{"id":1035},"dismissable-closing-without-moving-focus-via-useescapekey","Dismissable: closing without moving focus via ",[304,1038,164],{},[232,1040,1041,1045],{},[241,1042,1044],{"href":243,"rel":1043},[245],"WCAG 1.4.13"," requires that if additional content obscures page content or input fields, the user must be able to dismiss it without moving their pointer or keyboard focus.",[232,1047,1048,1052,1053,1056,1057,260],{},[241,1049,1050],{"href":165},[304,1051,164],{}," attaches a document-level key listener that sets ",[304,1054,1055],{},"node.open.value = false"," when the user presses ",[1058,1059,1060],"kbd",{},"Escape",[232,1062,1063,1064,260],{},"Because keyboard focus remains untouched on the anchor button, the user can dismiss the obstructing tooltip or card and continue reading without losing their place, satisfying ",[241,1065,1068],{"href":1066,"rel":1067},"https:\u002F\u002Fwww.w3.org\u002FWAI\u002FWCAG21\u002FUnderstanding\u002Fkeyboard.html",[245],"WCAG 2.1 SC 2.1.1 (Keyboard)",[957,1070,1072],{"id":1071},"leaf-first-hierarchy-coordination","Leaf-first hierarchy coordination",[232,1074,1075,1076,1078],{},"When interfaces contain nested menus, stacked dialogs, or a tooltip opened inside a modal, pressing ",[1058,1077,1060],{}," must not dismiss the entire interface at once.",[232,1080,1081,1083,1084,1087,1088,276],{},[304,1082,164],{}," coordinates through ",[304,1085,1086],{},"FloatingNode"," hierarchy to enforce ",[249,1089,1090],{},"leaf-first dismissal",[278,1092,1093,1096,1099],{},[281,1094,1095],{},"Only the deepest, topmost active surface in the tree closes on the first Escape press.",[281,1097,1098],{},"Sibling and parent surfaces remain open.",[281,1100,1101],{},"Subsequent Escape presses close ancestor surfaces one level at a time.",[957,1103,1105],{"id":1104},"international-input-method-safety-ime","International input method safety (IME)",[232,1107,1108,1109,1111],{},"When users type using Input Method Editors (IME) for languages such as Japanese, Chinese, or Korean, pressing ",[1058,1110,1060],{}," cancels the current phonetic composition rather than closing the window.",[232,1113,1114,1116],{},[304,1115,164],{}," inspects keyboard composition events and automatically suppresses dismissal while an IME session is actively composing characters.",[265,1118,1120],{"id":1119},"persistent-avoiding-arbitrary-auto-closing-timers","Persistent: avoiding arbitrary auto-closing timers",[232,1122,1123,1124,1127],{},"A common anti-pattern in floating interfaces is adding a ",[304,1125,1126],{},"setTimeout"," that automatically dismisses a tooltip after three or four seconds.",[232,1129,1130],{},"Automatic timeouts violate WCAG 1.4.13. Users with low vision who rely on screen magnifiers require time to pan across enlarged text. Users with reading difficulties or cognitive impairments must be able to read at their own pace.",[232,1132,1133],{},"A floating surface must remain visible until:",[1135,1136,1137,1140,1143],"ul",{},[281,1138,1139],{},"The user deliberately moves the pointer off both the trigger and the floating surface (and outside the safe corridor).",[281,1141,1142],{},"The user moves keyboard focus away from the trigger.",[281,1144,1145,1146,1148],{},"The user explicitly dismisses the surface via the ",[1058,1147,1060],{}," key.",[265,1150,1152,1153],{"id":1151},"pointer-dismissal-outside-the-family-via-useoutsideclick","Pointer dismissal outside the family via ",[304,1154,160],{},[232,1156,1157],{},"For click-triggered surfaces (popovers, menus, dialogs), users expect clicking anywhere outside the open surface to dismiss it.",[232,1159,1160,1164],{},[241,1161,1162],{"href":161},[304,1163,160],{}," listens for pointer interactions outside the floating family.",[232,1166,1167,1168,1171,1172,1175],{},"Crucially, it is hierarchy-aware: when a modal dialog opens a date picker or select menu teleported to ",[304,1169,1170],{},"document.body",", clicking the teleported date picker is recognized as an internal interaction via ",[304,1173,1174],{},"node.contains()",". The parent dialog does not close prematurely.",[265,1177,1179],{"id":1178},"respecting-user-preferences-for-reduced-motion","Respecting user preferences for reduced motion",[232,1181,1182],{},"Many floating surfaces use CSS scale, zoom, or slide transitions.",[232,1184,1185,1186,1191],{},"For users with vestibular disorders, motion and parallax effects can cause dizziness, nausea, and physical disorientation (",[241,1187,1190],{"href":1188,"rel":1189},"https:\u002F\u002Fwww.w3.org\u002FWAI\u002FWCAG21\u002FUnderstanding\u002Fanimation-from-interactions.html",[245],"WCAG 2.1 SC 2.3.3: Animation from Interactions",").",[232,1193,1194,1195,1202],{},"When styling your floating surfaces, always wrap motion transitions in the standard CSS ",[241,1196,1199],{"href":1197,"rel":1198},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FCSS\u002F@media\u002Fprefers-reduced-motion",[245],[304,1200,1201],{},"@media (prefers-reduced-motion: reduce)"," media query:",[335,1204,1208],{"className":1205,"code":1206,"language":1207,"meta":340,"style":340},"language-css shiki shiki-themes material-theme-lighter material-theme material-theme-palenight",".floating-panel {\n  transition:\n    opacity 150ms ease,\n    transform 150ms ease;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .floating-panel {\n    transition: none;\n    transform: none;\n  }\n}\n","css",[304,1209,1210,1219,1228,1241,1252,1257,1261,1281,1290,1302,1313,1318],{"__ignoreMap":340},[344,1211,1212,1214,1217],{"class":346,"line":347},[344,1213,260],{"class":350},[344,1215,1216],{"class":507},"floating-panel",[344,1218,415],{"class":350},[344,1220,1221,1225],{"class":346,"line":380},[344,1222,1224],{"class":1223},"sqsOY","  transition",[344,1226,1227],{"class":350},":\n",[344,1229,1230,1233,1236,1239],{"class":346,"line":410},[344,1231,1232],{"class":390},"    opacity ",[344,1234,1235],{"class":642},"150ms",[344,1237,1238],{"class":390}," ease",[344,1240,424],{"class":350},[344,1242,1243,1246,1248,1250],{"class":346,"line":418},[344,1244,1245],{"class":390},"    transform ",[344,1247,1235],{"class":642},[344,1249,1238],{"class":390},[344,1251,407],{"class":350},[344,1253,1254],{"class":346,"line":427},[344,1255,1256],{"class":350},"}\n",[344,1258,1259],{"class":346,"line":435},[344,1260,488],{"emptyLinePlaceholder":487},[344,1262,1263,1266,1269,1272,1274,1277,1279],{"class":346,"line":443},[344,1264,1265],{"class":383},"@media",[344,1267,1268],{"class":350}," (",[344,1270,1271],{"class":390},"prefers-reduced-motion",[344,1273,276],{"class":350},[344,1275,1276],{"class":390}," reduce",[344,1278,526],{"class":350},[344,1280,415],{"class":350},[344,1282,1283,1286,1288],{"class":346,"line":451},[344,1284,1285],{"class":350},"  .",[344,1287,1216],{"class":507},[344,1289,415],{"class":350},[344,1291,1292,1295,1297,1300],{"class":346,"line":459},[344,1293,1294],{"class":1223},"    transition",[344,1296,276],{"class":350},[344,1298,1299],{"class":390}," none",[344,1301,407],{"class":350},[344,1303,1304,1307,1309,1311],{"class":346,"line":467},[344,1305,1306],{"class":1223},"    transform",[344,1308,276],{"class":350},[344,1310,1299],{"class":390},[344,1312,407],{"class":350},[344,1314,1315],{"class":346,"line":484},[344,1316,1317],{"class":350},"  }\n",[344,1319,1320],{"class":346,"line":491},[344,1321,1256],{"class":350},[232,1323,1324,1325,1328],{},"In Vue templates, you can also inspect ",[304,1326,1327],{},"window.matchMedia('(prefers-reduced-motion: reduce)')"," to conditionally disable JavaScript-driven transition durations.",[265,1330,1332],{"id":1331},"official-specifications","Official specifications",[1135,1334,1335,1342,1349],{},[281,1336,1337,1341],{},[241,1338,1340],{"href":243,"rel":1339},[245],"W3C Understanding WCAG 2.1 SC 1.4.13: Content on Hover or Focus",": Detailed intent and test criteria for dismissable, hoverable, and persistent content.",[281,1343,1344,1348],{},[241,1345,1347],{"href":1066,"rel":1346},[245],"W3C Understanding WCAG 2.1 SC 2.1.1: Keyboard",": Ensuring all functionality is operable through a keyboard interface.",[281,1350,1351,1357],{},[241,1352,1354,1355],{"href":1197,"rel":1353},[245],"MDN Web Docs: ",[304,1356,1271],{},": Documentation on detecting user motion preferences.",[265,1359,1361],{"id":1360},"where-to-go-next","Where to go next",[1135,1363,1364,1369,1374,1382],{},[281,1365,1366,1368],{},[241,1367,79],{"href":80},": Learn how to manage modal focus containment, inert isolation, and return restoration.",[281,1370,1371,1373],{},[241,1372,21],{"href":22},": Hands-on tutorial building an accessible tooltip with hover and focus.",[281,1375,1376,1381],{},[241,1377,1378,1380],{"href":149},[304,1379,148],{}," API",": Options for hover delay, rest timing, and safe polygons.",[281,1383,1384,1388],{},[241,1385,1386,1380],{"href":165},[304,1387,164],{},": Options and behavior for Escape key handling.",[1390,1391,1392],"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 .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}html .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 .sqsOY, html code.shiki .sqsOY{--shiki-light:#8796B0;--shiki-default:#B2CCD6;--shiki-dark:#B2CCD6}",{"title":340,"searchDepth":380,"depth":380,"links":1394},[1395,1396,1401,1406,1407,1409,1410,1411],{"id":267,"depth":380,"text":268},{"id":301,"depth":380,"text":1397,"children":1398},"Hoverable: bridging the cursor gap with safePolygon",[1399,1400],{"id":959,"depth":410,"text":960},{"id":973,"depth":410,"text":974},{"id":1035,"depth":380,"text":1402,"children":1403},"Dismissable: closing without moving focus via useEscapeKey",[1404,1405],{"id":1071,"depth":410,"text":1072},{"id":1104,"depth":410,"text":1105},{"id":1119,"depth":380,"text":1120},{"id":1151,"depth":380,"text":1408},"Pointer dismissal outside the family via useOutsideClick",{"id":1178,"depth":380,"text":1179},{"id":1331,"depth":380,"text":1332},{"id":1360,"depth":380,"text":1361},"Satisfy WCAG 2.1 Success Criterion 1.4.13 with safe hover corridors, keyboard dismissal, and persistent content.","md",null,{},{"title":87,"description":1412},"OQNa3P1Z79I6k_HSsEM3qAog6jz5xQbjUDxkIbCJ7KE",[1419,1421],{"title":83,"path":84,"stem":85,"description":1420,"children":-1},"Implement accessible keyboard interaction patterns for menus, comboboxes, and composite lists following WAI-ARIA APG standards.",{"title":97,"path":93,"stem":98,"description":1422,"icon":99,"children":-1},"Canonical API reference and composable index for VFloat.",1791268047290]