[{"data":1,"prerenderedAt":2018},["ShallowReactive",2],{"navigation_docs":3,"-guide-getting-started-first-menu":226,"-guide-getting-started-first-menu-surround":2013},[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":25,"body":228,"description":2007,"extension":2008,"links":2009,"meta":2010,"navigation":406,"path":26,"seo":2011,"stem":27,"__hash__":2012},"docs\u002F1.guide\u002F1.getting-started\u002F3.first-menu.md",{"type":229,"value":230,"toc":1997},"minimark",[231,235,240,243,249,1170,1174,1177,1267,1287,1291,1300,1331,1342,1346,1354,1413,1432,1439,1443,1446,1475,1505,1509,1517,1580,1587,1632,1636,1639,1830,1867,1871,1874,1955,1993],[232,233,234],"p",{},"In this tutorial, you will build a dropdown menu that opens on click, positions below the trigger, supports Arrow key navigation through its items, and closes on Escape or outside click.",[236,237,239],"h2",{"id":238},"the-complete-example","The complete example",[232,241,242],{},"Here is the complete working component:",[244,245,246],"code-preview",{},[247,248],"first-menu-demo",{},[250,251,252],"code-collapse",{},[253,254,259],"pre",{"className":255,"code":256,"language":257,"meta":258,"style":258},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\nimport { ref } from \"vue\";\nimport {\n  useClick,\n  useEscapeKey,\n  useFloatingNode,\n  useOutsideClick,\n  usePosition,\n  useRovingFocus,\n} from \"v-float\";\n\nconst items = [\"Profile\", \"Settings\", \"Billing\", \"Sign out\"];\n\nconst anchorEl = ref\u003CHTMLElement | null>(null);\nconst floatingEl = ref\u003CHTMLElement | null>(null);\nconst itemEls = ref\u003C(HTMLElement | null)[]>([]);\n\nconst node = useFloatingNode({ anchorEl, floatingEl });\nusePosition(node, {\n  placement: \"bottom-start\",\n  middlewares: {\n    offset: 8,\n  },\n});\n\nuseClick(node);\nuseOutsideClick(node);\nuseEscapeKey(node);\n\nconst { getTabindex } = useRovingFocus(node, {\n  elementsList: itemEls,\n  loop: true,\n  openOnArrowKeyDown: true,\n});\n\nfunction handleSelect(item: string) {\n  console.log(\"Selected:\", item);\n  node.open.value = false;\n}\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cbutton ref=\"anchorEl\" type=\"button\" aria-haspopup=\"menu\" :aria-expanded=\"node.open.value\">\n    Actions\n  \u003C\u002Fbutton>\n\n  \u003Cdiv v-if=\"node.open.value\" ref=\"floatingEl\" role=\"menu\">\n    \u003Cbutton\n      v-for=\"(item, index) in items\"\n      :key=\"item\"\n      :ref=\"(el) => (itemEls[index] = el as HTMLElement | null)\"\n      type=\"button\"\n      role=\"menuitem\"\n      :tabindex=\"getTabindex(index)\"\n      @click=\"handleSelect(item)\"\n    >\n      {{ item }}\n    \u003C\u002Fbutton>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n","vue","",[260,261,262,297,327,335,344,352,360,368,376,384,401,408,462,467,506,536,568,573,604,616,634,644,658,664,673,678,688,697,706,711,735,748,762,774,783,788,812,842,865,871,881,886,896,953,959,969,974,1017,1026,1042,1056,1071,1085,1100,1115,1130,1136,1142,1152,1161],"code",{"__ignoreMap":258},[263,264,267,271,275,279,282,285,288,292,294],"span",{"class":265,"line":266},"line",1,[263,268,270],{"class":269},"sMK4o","\u003C",[263,272,274],{"class":273},"swJcz","script",[263,276,278],{"class":277},"spNyl"," setup",[263,280,281],{"class":277}," lang",[263,283,284],{"class":269},"=",[263,286,287],{"class":269},"\"",[263,289,291],{"class":290},"sfazB","ts",[263,293,287],{"class":269},[263,295,296],{"class":269},">\n",[263,298,300,304,307,311,314,317,320,322,324],{"class":265,"line":299},2,[263,301,303],{"class":302},"s7zQu","import",[263,305,306],{"class":269}," {",[263,308,310],{"class":309},"sTEyZ"," ref",[263,312,313],{"class":269}," }",[263,315,316],{"class":302}," from",[263,318,319],{"class":269}," \"",[263,321,257],{"class":290},[263,323,287],{"class":269},[263,325,326],{"class":269},";\n",[263,328,330,332],{"class":265,"line":329},3,[263,331,303],{"class":302},[263,333,334],{"class":269}," {\n",[263,336,338,341],{"class":265,"line":337},4,[263,339,340],{"class":309},"  useClick",[263,342,343],{"class":269},",\n",[263,345,347,350],{"class":265,"line":346},5,[263,348,349],{"class":309},"  useEscapeKey",[263,351,343],{"class":269},[263,353,355,358],{"class":265,"line":354},6,[263,356,357],{"class":309},"  useFloatingNode",[263,359,343],{"class":269},[263,361,363,366],{"class":265,"line":362},7,[263,364,365],{"class":309},"  useOutsideClick",[263,367,343],{"class":269},[263,369,371,374],{"class":265,"line":370},8,[263,372,373],{"class":309},"  usePosition",[263,375,343],{"class":269},[263,377,379,382],{"class":265,"line":378},9,[263,380,381],{"class":309},"  useRovingFocus",[263,383,343],{"class":269},[263,385,387,390,392,394,397,399],{"class":265,"line":386},10,[263,388,389],{"class":269},"}",[263,391,316],{"class":302},[263,393,319],{"class":269},[263,395,396],{"class":290},"v-float",[263,398,287],{"class":269},[263,400,326],{"class":269},[263,402,404],{"class":265,"line":403},11,[263,405,407],{"emptyLinePlaceholder":406},true,"\n",[263,409,411,414,417,419,422,424,427,429,432,434,437,439,441,443,446,448,450,452,455,457,460],{"class":265,"line":410},12,[263,412,413],{"class":277},"const",[263,415,416],{"class":309}," items ",[263,418,284],{"class":269},[263,420,421],{"class":309}," [",[263,423,287],{"class":269},[263,425,426],{"class":290},"Profile",[263,428,287],{"class":269},[263,430,431],{"class":269},",",[263,433,319],{"class":269},[263,435,436],{"class":290},"Settings",[263,438,287],{"class":269},[263,440,431],{"class":269},[263,442,319],{"class":269},[263,444,445],{"class":290},"Billing",[263,447,287],{"class":269},[263,449,431],{"class":269},[263,451,319],{"class":269},[263,453,454],{"class":290},"Sign out",[263,456,287],{"class":269},[263,458,459],{"class":309},"]",[263,461,326],{"class":269},[263,463,465],{"class":265,"line":464},13,[263,466,407],{"emptyLinePlaceholder":406},[263,468,470,472,475,477,480,482,486,489,492,495,498,501,504],{"class":265,"line":469},14,[263,471,413],{"class":277},[263,473,474],{"class":309}," anchorEl ",[263,476,284],{"class":269},[263,478,310],{"class":479},"s2Zo4",[263,481,270],{"class":269},[263,483,485],{"class":484},"sBMFI","HTMLElement",[263,487,488],{"class":269}," |",[263,490,491],{"class":484}," null",[263,493,494],{"class":269},">",[263,496,497],{"class":309},"(",[263,499,500],{"class":269},"null",[263,502,503],{"class":309},")",[263,505,326],{"class":269},[263,507,509,511,514,516,518,520,522,524,526,528,530,532,534],{"class":265,"line":508},15,[263,510,413],{"class":277},[263,512,513],{"class":309}," floatingEl ",[263,515,284],{"class":269},[263,517,310],{"class":479},[263,519,270],{"class":269},[263,521,485],{"class":484},[263,523,488],{"class":269},[263,525,491],{"class":484},[263,527,494],{"class":269},[263,529,497],{"class":309},[263,531,500],{"class":269},[263,533,503],{"class":309},[263,535,326],{"class":269},[263,537,539,541,544,546,548,550,552,554,556,558,561,563,566],{"class":265,"line":538},16,[263,540,413],{"class":277},[263,542,543],{"class":309}," itemEls ",[263,545,284],{"class":269},[263,547,310],{"class":479},[263,549,270],{"class":269},[263,551,497],{"class":309},[263,553,485],{"class":484},[263,555,488],{"class":269},[263,557,491],{"class":484},[263,559,560],{"class":309},")[]",[263,562,494],{"class":269},[263,564,565],{"class":309},"([])",[263,567,326],{"class":269},[263,569,571],{"class":265,"line":570},17,[263,572,407],{"emptyLinePlaceholder":406},[263,574,576,578,581,583,586,588,591,594,596,598,600,602],{"class":265,"line":575},18,[263,577,413],{"class":277},[263,579,580],{"class":309}," node ",[263,582,284],{"class":269},[263,584,585],{"class":479}," useFloatingNode",[263,587,497],{"class":309},[263,589,590],{"class":269},"{",[263,592,593],{"class":309}," anchorEl",[263,595,431],{"class":269},[263,597,513],{"class":309},[263,599,389],{"class":269},[263,601,503],{"class":309},[263,603,326],{"class":269},[263,605,607,609,612,614],{"class":265,"line":606},19,[263,608,126],{"class":479},[263,610,611],{"class":309},"(node",[263,613,431],{"class":269},[263,615,334],{"class":269},[263,617,619,622,625,627,630,632],{"class":265,"line":618},20,[263,620,621],{"class":273},"  placement",[263,623,624],{"class":269},":",[263,626,319],{"class":269},[263,628,629],{"class":290},"bottom-start",[263,631,287],{"class":269},[263,633,343],{"class":269},[263,635,637,640,642],{"class":265,"line":636},21,[263,638,639],{"class":273},"  middlewares",[263,641,624],{"class":269},[263,643,334],{"class":269},[263,645,647,650,652,656],{"class":265,"line":646},22,[263,648,649],{"class":273},"    offset",[263,651,624],{"class":269},[263,653,655],{"class":654},"sbssI"," 8",[263,657,343],{"class":269},[263,659,661],{"class":265,"line":660},23,[263,662,663],{"class":269},"  },\n",[263,665,667,669,671],{"class":265,"line":666},24,[263,668,389],{"class":269},[263,670,503],{"class":309},[263,672,326],{"class":269},[263,674,676],{"class":265,"line":675},25,[263,677,407],{"emptyLinePlaceholder":406},[263,679,681,683,686],{"class":265,"line":680},26,[263,682,144],{"class":479},[263,684,685],{"class":309},"(node)",[263,687,326],{"class":269},[263,689,691,693,695],{"class":265,"line":690},27,[263,692,160],{"class":479},[263,694,685],{"class":309},[263,696,326],{"class":269},[263,698,700,702,704],{"class":265,"line":699},28,[263,701,164],{"class":479},[263,703,685],{"class":309},[263,705,326],{"class":269},[263,707,709],{"class":265,"line":708},29,[263,710,407],{"emptyLinePlaceholder":406},[263,712,714,716,718,721,723,726,729,731,733],{"class":265,"line":713},30,[263,715,413],{"class":277},[263,717,306],{"class":269},[263,719,720],{"class":309}," getTabindex ",[263,722,389],{"class":269},[263,724,725],{"class":269}," =",[263,727,728],{"class":479}," useRovingFocus",[263,730,611],{"class":309},[263,732,431],{"class":269},[263,734,334],{"class":269},[263,736,738,741,743,746],{"class":265,"line":737},31,[263,739,740],{"class":273},"  elementsList",[263,742,624],{"class":269},[263,744,745],{"class":309}," itemEls",[263,747,343],{"class":269},[263,749,751,754,756,760],{"class":265,"line":750},32,[263,752,753],{"class":273},"  loop",[263,755,624],{"class":269},[263,757,759],{"class":758},"sfNiH"," true",[263,761,343],{"class":269},[263,763,765,768,770,772],{"class":265,"line":764},33,[263,766,767],{"class":273},"  openOnArrowKeyDown",[263,769,624],{"class":269},[263,771,759],{"class":758},[263,773,343],{"class":269},[263,775,777,779,781],{"class":265,"line":776},34,[263,778,389],{"class":269},[263,780,503],{"class":309},[263,782,326],{"class":269},[263,784,786],{"class":265,"line":785},35,[263,787,407],{"emptyLinePlaceholder":406},[263,789,791,794,797,799,803,805,808,810],{"class":265,"line":790},36,[263,792,793],{"class":277},"function",[263,795,796],{"class":479}," handleSelect",[263,798,497],{"class":269},[263,800,802],{"class":801},"sHdIc","item",[263,804,624],{"class":269},[263,806,807],{"class":484}," string",[263,809,503],{"class":269},[263,811,334],{"class":269},[263,813,815,818,821,824,826,828,831,833,835,838,840],{"class":265,"line":814},37,[263,816,817],{"class":309},"  console",[263,819,820],{"class":269},".",[263,822,823],{"class":479},"log",[263,825,497],{"class":273},[263,827,287],{"class":269},[263,829,830],{"class":290},"Selected:",[263,832,287],{"class":269},[263,834,431],{"class":269},[263,836,837],{"class":309}," item",[263,839,503],{"class":273},[263,841,326],{"class":269},[263,843,845,848,850,853,855,858,860,863],{"class":265,"line":844},38,[263,846,847],{"class":309},"  node",[263,849,820],{"class":269},[263,851,852],{"class":309},"open",[263,854,820],{"class":269},[263,856,857],{"class":309},"value",[263,859,725],{"class":269},[263,861,862],{"class":758}," false",[263,864,326],{"class":269},[263,866,868],{"class":265,"line":867},39,[263,869,870],{"class":269},"}\n",[263,872,874,877,879],{"class":265,"line":873},40,[263,875,876],{"class":269},"\u003C\u002F",[263,878,274],{"class":273},[263,880,296],{"class":269},[263,882,884],{"class":265,"line":883},41,[263,885,407],{"emptyLinePlaceholder":406},[263,887,889,891,894],{"class":265,"line":888},42,[263,890,270],{"class":269},[263,892,893],{"class":273},"template",[263,895,296],{"class":269},[263,897,899,902,905,907,909,911,914,916,919,921,923,925,927,930,932,934,937,939,942,944,946,949,951],{"class":265,"line":898},43,[263,900,901],{"class":269},"  \u003C",[263,903,904],{"class":273},"button",[263,906,310],{"class":277},[263,908,284],{"class":269},[263,910,287],{"class":269},[263,912,913],{"class":290},"anchorEl",[263,915,287],{"class":269},[263,917,918],{"class":277}," type",[263,920,284],{"class":269},[263,922,287],{"class":269},[263,924,904],{"class":290},[263,926,287],{"class":269},[263,928,929],{"class":277}," aria-haspopup",[263,931,284],{"class":269},[263,933,287],{"class":269},[263,935,936],{"class":290},"menu",[263,938,287],{"class":269},[263,940,941],{"class":277}," :aria-expanded",[263,943,284],{"class":269},[263,945,287],{"class":269},[263,947,948],{"class":290},"node.open.value",[263,950,287],{"class":269},[263,952,296],{"class":269},[263,954,956],{"class":265,"line":955},44,[263,957,958],{"class":309},"    Actions\n",[263,960,962,965,967],{"class":265,"line":961},45,[263,963,964],{"class":269},"  \u003C\u002F",[263,966,904],{"class":273},[263,968,296],{"class":269},[263,970,972],{"class":265,"line":971},46,[263,973,407],{"emptyLinePlaceholder":406},[263,975,977,979,982,985,987,989,991,993,995,997,999,1002,1004,1007,1009,1011,1013,1015],{"class":265,"line":976},47,[263,978,901],{"class":269},[263,980,981],{"class":273},"div",[263,983,984],{"class":277}," v-if",[263,986,284],{"class":269},[263,988,287],{"class":269},[263,990,948],{"class":290},[263,992,287],{"class":269},[263,994,310],{"class":277},[263,996,284],{"class":269},[263,998,287],{"class":269},[263,1000,1001],{"class":290},"floatingEl",[263,1003,287],{"class":269},[263,1005,1006],{"class":277}," role",[263,1008,284],{"class":269},[263,1010,287],{"class":269},[263,1012,936],{"class":290},[263,1014,287],{"class":269},[263,1016,296],{"class":269},[263,1018,1020,1023],{"class":265,"line":1019},48,[263,1021,1022],{"class":269},"    \u003C",[263,1024,1025],{"class":273},"button\n",[263,1027,1029,1032,1034,1036,1039],{"class":265,"line":1028},49,[263,1030,1031],{"class":277},"      v-for",[263,1033,284],{"class":269},[263,1035,287],{"class":269},[263,1037,1038],{"class":290},"(item, index) in items",[263,1040,1041],{"class":269},"\"\n",[263,1043,1045,1048,1050,1052,1054],{"class":265,"line":1044},50,[263,1046,1047],{"class":277},"      :key",[263,1049,284],{"class":269},[263,1051,287],{"class":269},[263,1053,802],{"class":290},[263,1055,1041],{"class":269},[263,1057,1059,1062,1064,1066,1069],{"class":265,"line":1058},51,[263,1060,1061],{"class":277},"      :ref",[263,1063,284],{"class":269},[263,1065,287],{"class":269},[263,1067,1068],{"class":290},"(el) => (itemEls[index] = el as HTMLElement | null)",[263,1070,1041],{"class":269},[263,1072,1074,1077,1079,1081,1083],{"class":265,"line":1073},52,[263,1075,1076],{"class":277},"      type",[263,1078,284],{"class":269},[263,1080,287],{"class":269},[263,1082,904],{"class":290},[263,1084,1041],{"class":269},[263,1086,1088,1091,1093,1095,1098],{"class":265,"line":1087},53,[263,1089,1090],{"class":277},"      role",[263,1092,284],{"class":269},[263,1094,287],{"class":269},[263,1096,1097],{"class":290},"menuitem",[263,1099,1041],{"class":269},[263,1101,1103,1106,1108,1110,1113],{"class":265,"line":1102},54,[263,1104,1105],{"class":277},"      :tabindex",[263,1107,284],{"class":269},[263,1109,287],{"class":269},[263,1111,1112],{"class":290},"getTabindex(index)",[263,1114,1041],{"class":269},[263,1116,1118,1121,1123,1125,1128],{"class":265,"line":1117},55,[263,1119,1120],{"class":277},"      @click",[263,1122,284],{"class":269},[263,1124,287],{"class":269},[263,1126,1127],{"class":290},"handleSelect(item)",[263,1129,1041],{"class":269},[263,1131,1133],{"class":265,"line":1132},56,[263,1134,1135],{"class":269},"    >\n",[263,1137,1139],{"class":265,"line":1138},57,[263,1140,1141],{"class":309},"      {{ item }}\n",[263,1143,1145,1148,1150],{"class":265,"line":1144},58,[263,1146,1147],{"class":269},"    \u003C\u002F",[263,1149,904],{"class":273},[263,1151,296],{"class":269},[263,1153,1155,1157,1159],{"class":265,"line":1154},59,[263,1156,964],{"class":269},[263,1158,981],{"class":273},[263,1160,296],{"class":269},[263,1162,1164,1166,1168],{"class":265,"line":1163},60,[263,1165,876],{"class":269},[263,1167,893],{"class":273},[263,1169,296],{"class":269},[236,1171,1173],{"id":1172},"set-up-element-and-item-refs","Set up element and item refs",[232,1175,1176],{},"Start by declaring refs for the trigger, the menu panel, and the list of item elements:",[253,1178,1181],{"className":1179,"code":1180,"language":291,"meta":258,"style":258},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","const anchorEl = ref\u003CHTMLElement | null>(null);\nconst floatingEl = ref\u003CHTMLElement | null>(null);\nconst itemEls = ref\u003C(HTMLElement | null)[]>([]);\n",[260,1182,1183,1211,1239],{"__ignoreMap":258},[263,1184,1185,1187,1189,1191,1193,1195,1197,1199,1201,1203,1205,1207,1209],{"class":265,"line":266},[263,1186,413],{"class":277},[263,1188,474],{"class":309},[263,1190,284],{"class":269},[263,1192,310],{"class":479},[263,1194,270],{"class":269},[263,1196,485],{"class":484},[263,1198,488],{"class":269},[263,1200,491],{"class":484},[263,1202,494],{"class":269},[263,1204,497],{"class":309},[263,1206,500],{"class":269},[263,1208,503],{"class":309},[263,1210,326],{"class":269},[263,1212,1213,1215,1217,1219,1221,1223,1225,1227,1229,1231,1233,1235,1237],{"class":265,"line":299},[263,1214,413],{"class":277},[263,1216,513],{"class":309},[263,1218,284],{"class":269},[263,1220,310],{"class":479},[263,1222,270],{"class":269},[263,1224,485],{"class":484},[263,1226,488],{"class":269},[263,1228,491],{"class":484},[263,1230,494],{"class":269},[263,1232,497],{"class":309},[263,1234,500],{"class":269},[263,1236,503],{"class":309},[263,1238,326],{"class":269},[263,1240,1241,1243,1245,1247,1249,1251,1253,1255,1257,1259,1261,1263,1265],{"class":265,"line":329},[263,1242,413],{"class":277},[263,1244,543],{"class":309},[263,1246,284],{"class":269},[263,1248,310],{"class":479},[263,1250,270],{"class":269},[263,1252,497],{"class":309},[263,1254,485],{"class":484},[263,1256,488],{"class":269},[263,1258,491],{"class":484},[263,1260,560],{"class":309},[263,1262,494],{"class":269},[263,1264,565],{"class":309},[263,1266,326],{"class":269},[1268,1269,1270,1276,1281],"ul",{},[1271,1272,1273,1275],"li",{},[260,1274,913],{}," references the button that opens the menu.",[1271,1277,1278,1280],{},[260,1279,1001],{}," references the floating menu container.",[1271,1282,1283,1286],{},[260,1284,1285],{},"itemEls"," holds an array of DOM references to each rendered menu item button.",[236,1288,1290],{"id":1289},"create-the-floating-node","Create the floating node",[232,1292,1293,1294,1299],{},"Pass the element refs into ",[1295,1296,1297],"a",{"href":118},[260,1298,117],{}," to create the node:",[253,1301,1303],{"className":1179,"code":1302,"language":291,"meta":258,"style":258},"const node = useFloatingNode({ anchorEl, floatingEl });\n",[260,1304,1305],{"__ignoreMap":258},[263,1306,1307,1309,1311,1313,1315,1317,1319,1321,1323,1325,1327,1329],{"class":265,"line":266},[263,1308,413],{"class":277},[263,1310,580],{"class":309},[263,1312,284],{"class":269},[263,1314,585],{"class":479},[263,1316,497],{"class":309},[263,1318,590],{"class":269},[263,1320,593],{"class":309},[263,1322,431],{"class":269},[263,1324,513],{"class":309},[263,1326,389],{"class":269},[263,1328,503],{"class":309},[263,1330,326],{"class":269},[232,1332,1333,1334,1337,1338,1341],{},"The returned ",[260,1335,1336],{},"node"," coordinates element references and the reactive ",[260,1339,1340],{},"node.open"," boolean across all composables.",[236,1343,1345],{"id":1344},"position-below-the-button","Position below the button",[232,1347,1348,1349,1353],{},"Pass the node to ",[1295,1350,1351],{"href":127},[260,1352,126],{}," to align the menu:",[253,1355,1357],{"className":1179,"code":1356,"language":291,"meta":258,"style":258},"usePosition(node, {\n  placement: \"bottom-start\",\n  middlewares: {\n    offset: 8,\n  },\n});\n",[260,1358,1359,1369,1383,1391,1401,1405],{"__ignoreMap":258},[263,1360,1361,1363,1365,1367],{"class":265,"line":266},[263,1362,126],{"class":479},[263,1364,611],{"class":309},[263,1366,431],{"class":269},[263,1368,334],{"class":269},[263,1370,1371,1373,1375,1377,1379,1381],{"class":265,"line":299},[263,1372,621],{"class":273},[263,1374,624],{"class":269},[263,1376,319],{"class":269},[263,1378,629],{"class":290},[263,1380,287],{"class":269},[263,1382,343],{"class":269},[263,1384,1385,1387,1389],{"class":265,"line":329},[263,1386,639],{"class":273},[263,1388,624],{"class":269},[263,1390,334],{"class":269},[263,1392,1393,1395,1397,1399],{"class":265,"line":337},[263,1394,649],{"class":273},[263,1396,624],{"class":269},[263,1398,655],{"class":654},[263,1400,343],{"class":269},[263,1402,1403],{"class":265,"line":346},[263,1404,663],{"class":269},[263,1406,1407,1409,1411],{"class":265,"line":354},[263,1408,389],{"class":269},[263,1410,503],{"class":309},[263,1412,326],{"class":269},[1268,1414,1415,1421],{},[1271,1416,1417,1420],{},[260,1418,1419],{},"placement: \"bottom-start\""," aligns the menu below the trigger button along its start edge.",[1271,1422,1423,1426,1427,1431],{},[260,1424,1425],{},"middlewares: { offset: 8 }"," adds an 8-pixel gap below the button using the ",[1295,1428,1429],{"href":196},[260,1430,195],{}," middleware.",[232,1433,1434,1436,1437,820],{},[260,1435,126],{}," applies transform styles directly to ",[260,1438,1001],{},[236,1440,1442],{"id":1441},"add-click-and-dismiss-interactions","Add click and dismiss interactions",[232,1444,1445],{},"Attach the interaction composables to control when the menu opens and closes:",[253,1447,1449],{"className":1179,"code":1448,"language":291,"meta":258,"style":258},"useClick(node);\nuseOutsideClick(node);\nuseEscapeKey(node);\n",[260,1450,1451,1459,1467],{"__ignoreMap":258},[263,1452,1453,1455,1457],{"class":265,"line":266},[263,1454,144],{"class":479},[263,1456,685],{"class":309},[263,1458,326],{"class":269},[263,1460,1461,1463,1465],{"class":265,"line":299},[263,1462,160],{"class":479},[263,1464,685],{"class":309},[263,1466,326],{"class":269},[263,1468,1469,1471,1473],{"class":265,"line":329},[263,1470,164],{"class":479},[263,1472,685],{"class":309},[263,1474,326],{"class":269},[1268,1476,1477,1487,1496],{},[1271,1478,1479,1486],{},[1480,1481,1482],"strong",{},[1295,1483,1484],{"href":145},[260,1485,144],{}," opens and closes the menu when the trigger button is clicked.",[1271,1488,1489,1495],{},[1480,1490,1491],{},[1295,1492,1493],{"href":161},[260,1494,160],{}," closes the menu when clicking anywhere outside the menu and trigger.",[1271,1497,1498,1504],{},[1480,1499,1500],{},[1295,1501,1502],{"href":165},[260,1503,164],{}," closes the menu when pressing Escape.",[236,1506,1508],{"id":1507},"enable-arrow-key-navigation","Enable arrow key navigation",[232,1510,1511,1512,1516],{},"Pass the item references into ",[1295,1513,1514],{"href":178},[260,1515,177],{}," to manage keyboard navigation:",[253,1518,1520],{"className":1179,"code":1519,"language":291,"meta":258,"style":258},"const { getTabindex } = useRovingFocus(node, {\n  elementsList: itemEls,\n  loop: true,\n  openOnArrowKeyDown: true,\n});\n",[260,1521,1522,1542,1552,1562,1572],{"__ignoreMap":258},[263,1523,1524,1526,1528,1530,1532,1534,1536,1538,1540],{"class":265,"line":266},[263,1525,413],{"class":277},[263,1527,306],{"class":269},[263,1529,720],{"class":309},[263,1531,389],{"class":269},[263,1533,725],{"class":269},[263,1535,728],{"class":479},[263,1537,611],{"class":309},[263,1539,431],{"class":269},[263,1541,334],{"class":269},[263,1543,1544,1546,1548,1550],{"class":265,"line":299},[263,1545,740],{"class":273},[263,1547,624],{"class":269},[263,1549,745],{"class":309},[263,1551,343],{"class":269},[263,1553,1554,1556,1558,1560],{"class":265,"line":329},[263,1555,753],{"class":273},[263,1557,624],{"class":269},[263,1559,759],{"class":758},[263,1561,343],{"class":269},[263,1563,1564,1566,1568,1570],{"class":265,"line":337},[263,1565,767],{"class":273},[263,1567,624],{"class":269},[263,1569,759],{"class":758},[263,1571,343],{"class":269},[263,1573,1574,1576,1578],{"class":265,"line":346},[263,1575,389],{"class":269},[263,1577,503],{"class":309},[263,1579,326],{"class":269},[232,1581,1582,1586],{},[1295,1583,1584],{"href":178},[260,1585,177],{}," implements the WAI-ARIA roving tabindex pattern:",[1268,1588,1589,1603,1611,1619],{},[1271,1590,1591,1594,1595,1598,1599,1602],{},[1480,1592,1593],{},"Arrow keys",": Pressing ",[260,1596,1597],{},"ArrowDown"," or ",[260,1600,1601],{},"ArrowUp"," moves DOM focus from one menu item to the next.",[1271,1604,1605,1594,1608,1610],{},[260,1606,1607],{},"loop: true",[260,1609,1597],{}," on the last item loops focus back to the first item.",[1271,1612,1613,1594,1616,1618],{},[260,1614,1615],{},"openOnArrowKeyDown: true",[260,1617,1597],{}," while focused on the trigger button opens the menu and focuses the first item immediately.",[1271,1620,1621,1623,1624,1627,1628,1631],{},[260,1622,1112],{},": Returns ",[260,1625,1626],{},"0"," for the currently focused item and ",[260,1629,1630],{},"-1"," for all other items.",[236,1633,1635],{"id":1634},"bind-elements-in-the-template","Bind elements in the template",[232,1637,1638],{},"Connect the template refs, accessibility attributes, and selection handler:",[253,1640,1642],{"className":255,"code":1641,"language":257,"meta":258,"style":258},"\u003Cbutton ref=\"anchorEl\" type=\"button\" aria-haspopup=\"menu\" :aria-expanded=\"node.open.value\">\n  Actions\n\u003C\u002Fbutton>\n\n\u003Cdiv v-if=\"node.open.value\" ref=\"floatingEl\" role=\"menu\">\n  \u003Cbutton\n    v-for=\"(item, index) in items\"\n    :key=\"item\"\n    :ref=\"(el) => (itemEls[index] = el as HTMLElement | null)\"\n    type=\"button\"\n    role=\"menuitem\"\n    :tabindex=\"getTabindex(index)\"\n    @click=\"handleSelect(item)\"\n  >\n    {{ item }}\n  \u003C\u002Fbutton>\n\u003C\u002Fdiv>\n",[260,1643,1644,1704,1709,1717,1721,1767,1772,1777,1782,1787,1792,1797,1802,1807,1812,1817,1822],{"__ignoreMap":258},[263,1645,1646,1648,1650,1652,1654,1656,1658,1660,1662,1664,1666,1668,1670,1672,1674,1676,1678,1680,1683,1686,1688,1690,1692,1694,1696,1698,1700,1702],{"class":265,"line":266},[263,1647,270],{"class":269},[263,1649,904],{"class":273},[263,1651,310],{"class":277},[263,1653,284],{"class":269},[263,1655,287],{"class":269},[263,1657,913],{"class":290},[263,1659,287],{"class":269},[263,1661,918],{"class":277},[263,1663,284],{"class":269},[263,1665,287],{"class":269},[263,1667,904],{"class":290},[263,1669,287],{"class":269},[263,1671,929],{"class":277},[263,1673,284],{"class":269},[263,1675,287],{"class":269},[263,1677,936],{"class":290},[263,1679,287],{"class":269},[263,1681,1682],{"class":269}," :",[263,1684,1685],{"class":277},"aria-expanded",[263,1687,284],{"class":269},[263,1689,287],{"class":269},[263,1691,1336],{"class":309},[263,1693,820],{"class":269},[263,1695,852],{"class":309},[263,1697,820],{"class":269},[263,1699,857],{"class":309},[263,1701,287],{"class":269},[263,1703,296],{"class":269},[263,1705,1706],{"class":265,"line":299},[263,1707,1708],{"class":309},"  Actions\n",[263,1710,1711,1713,1715],{"class":265,"line":329},[263,1712,876],{"class":269},[263,1714,904],{"class":273},[263,1716,296],{"class":269},[263,1718,1719],{"class":265,"line":337},[263,1720,407],{"emptyLinePlaceholder":406},[263,1722,1723,1725,1727,1729,1731,1733,1735,1737,1739,1741,1743,1745,1747,1749,1751,1753,1755,1757,1759,1761,1763,1765],{"class":265,"line":346},[263,1724,270],{"class":269},[263,1726,981],{"class":273},[263,1728,984],{"class":302},[263,1730,284],{"class":269},[263,1732,287],{"class":269},[263,1734,1336],{"class":309},[263,1736,820],{"class":269},[263,1738,852],{"class":309},[263,1740,820],{"class":269},[263,1742,857],{"class":309},[263,1744,287],{"class":269},[263,1746,310],{"class":277},[263,1748,284],{"class":269},[263,1750,287],{"class":269},[263,1752,1001],{"class":290},[263,1754,287],{"class":269},[263,1756,1006],{"class":277},[263,1758,284],{"class":269},[263,1760,287],{"class":269},[263,1762,936],{"class":290},[263,1764,287],{"class":269},[263,1766,296],{"class":269},[263,1768,1769],{"class":265,"line":354},[263,1770,1771],{"class":309},"  \u003Cbutton\n",[263,1773,1774],{"class":265,"line":362},[263,1775,1776],{"class":309},"    v-for=\"(item, index) in items\"\n",[263,1778,1779],{"class":265,"line":370},[263,1780,1781],{"class":309},"    :key=\"item\"\n",[263,1783,1784],{"class":265,"line":378},[263,1785,1786],{"class":309},"    :ref=\"(el) => (itemEls[index] = el as HTMLElement | null)\"\n",[263,1788,1789],{"class":265,"line":386},[263,1790,1791],{"class":309},"    type=\"button\"\n",[263,1793,1794],{"class":265,"line":403},[263,1795,1796],{"class":309},"    role=\"menuitem\"\n",[263,1798,1799],{"class":265,"line":410},[263,1800,1801],{"class":309},"    :tabindex=\"getTabindex(index)\"\n",[263,1803,1804],{"class":265,"line":464},[263,1805,1806],{"class":309},"    @click=\"handleSelect(item)\"\n",[263,1808,1809],{"class":265,"line":469},[263,1810,1811],{"class":309},"  >\n",[263,1813,1814],{"class":265,"line":508},[263,1815,1816],{"class":309},"    {{ item }}\n",[263,1818,1819],{"class":265,"line":538},[263,1820,1821],{"class":309},"  \u003C\u002Fbutton>\n",[263,1823,1824,1826,1828],{"class":265,"line":570},[263,1825,876],{"class":269},[263,1827,981],{"class":273},[263,1829,296],{"class":269},[1268,1831,1832,1842,1851,1857],{},[1271,1833,1834,1837,1838,1841],{},[260,1835,1836],{},"aria-haspopup=\"menu\""," and ",[260,1839,1840],{},":aria-expanded=\"node.open.value\""," announce the menu state to assistive technologies.",[1271,1843,1844,1847,1848,1850],{},[260,1845,1846],{},":ref=\"(el) => (itemEls[index] = el as HTMLElement | null)\""," collects each rendered item into the ",[260,1849,1285],{}," array.",[1271,1852,1853,1856],{},[260,1854,1855],{},":tabindex=\"getTabindex(index)\""," ensures only one item can receive Tab focus at a time.",[1271,1858,1859,1860,1863,1864,820],{},"Clicking any item triggers ",[260,1861,1862],{},"handleSelect",", executing your action and closing the menu by setting ",[260,1865,1866],{},"node.open.value = false",[236,1868,1870],{"id":1869},"what-happens-at-runtime","What happens at runtime",[232,1872,1873],{},"Here is the lifecycle of the menu in action:",[1875,1876,1877,1890,1905,1914,1927,1940],"ol",{},[1271,1878,1879,1882,1883,1885,1886,1889],{},[1480,1880,1881],{},"Initial state",": The trigger button is visible. ",[260,1884,948],{}," is ",[260,1887,1888],{},"false",", so the menu is not mounted.",[1271,1891,1892,1895,1896,1898,1899,1901,1902,820],{},[1480,1893,1894],{},"Opening",": The user clicks the button or presses ",[260,1897,1597],{},". ",[260,1900,948],{}," becomes ",[260,1903,1904],{},"true",[1271,1906,1907,1910,1911,1913],{},[1480,1908,1909],{},"Mount and position",": Vue renders the menu container and items. ",[260,1912,126],{}," measures both elements and positions the menu below the button with an 8-pixel gap.",[1271,1915,1916,1919,1920,1598,1922,1898,1924,1926],{},[1480,1917,1918],{},"Keyboard navigation",": The user presses ",[260,1921,1597],{},[260,1923,1601],{},[260,1925,177],{}," moves DOM focus through the item list.",[1271,1928,1929,1932,1933,1936,1937,1939],{},[1480,1930,1931],{},"Selection",": The user clicks an item or presses ",[260,1934,1935],{},"Enter",". The callback runs and sets ",[260,1938,1866],{},", unmounting the menu.",[1271,1941,1942,1945,1946,1949,1950,1598,1952,1954],{},[1480,1943,1944],{},"Dismissal",": If the user clicks outside or presses ",[260,1947,1948],{},"Escape"," instead, ",[260,1951,160],{},[260,1953,164],{}," closes the menu.",[1268,1956,1957,1966,1974,1982],{},[1271,1958,1959,1962,1963,1965],{},[1480,1960,1961],{},"Nested submenus",": Read ",[1295,1964,48],{"href":49}," to connect parent and child menus with safe cursor corridors.",[1271,1967,1968,1962,1971,1973],{},[1480,1969,1970],{},"Middlewares and collisions",[1295,1972,57],{"href":58}," to automatically flip and shift the menu if space runs out below the trigger.",[1271,1975,1976,1962,1979,1981],{},[1480,1977,1978],{},"Keyboard focus models",[1295,1980,83],{"href":84}," for an overview of roving tabindex versus active descendant virtualization.",[1271,1983,1984,1987,1988,1992],{},[1480,1985,1986],{},"Roving focus API",": Check ",[1295,1989,1990],{"href":178},[260,1991,177],{}," for the full options and return methods.",[1994,1995,1996],"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 .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}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);}",{"title":258,"searchDepth":299,"depth":299,"links":1998},[1999,2000,2001,2002,2003,2004,2005,2006],{"id":238,"depth":299,"text":239},{"id":1172,"depth":299,"text":1173},{"id":1289,"depth":299,"text":1290},{"id":1344,"depth":299,"text":1345},{"id":1441,"depth":299,"text":1442},{"id":1507,"depth":299,"text":1508},{"id":1634,"depth":299,"text":1635},{"id":1869,"depth":299,"text":1870},"Build an accessible dropdown menu with click triggers, outside dismissal, and keyboard arrow navigation.","md",null,{},{"title":25,"description":2007},"jfcP3nA6xFtjNeGrUDI0rpyVJTwCFupwG5A7wT4tDjM",[2014,2016],{"title":21,"path":22,"stem":23,"description":2015,"children":-1},"Build a hover-triggered tooltip positioned above an anchor button with offset spacing.",{"title":36,"path":37,"stem":38,"description":2017,"children":-1},"A shared context for VFloat composables.",1791268047290]