[{"data":1,"prerenderedAt":2975},["ShallowReactive",2],{"navigation_docs":3,"-guide-accessibility-keyboard-navigation":271,"-guide-accessibility-keyboard-navigation-surround":2970},[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":106,"body":273,"description":2964,"extension":2965,"links":2966,"meta":2967,"navigation":534,"path":107,"seo":2968,"stem":108,"__hash__":2969},"docs\u002F1.guide\u002F5.accessibility\u002F3.keyboard-navigation.md",{"type":274,"value":275,"toc":2949},"minimark",[276,280,283,352,357,360,385,388,392,406,411,1125,1129,1139,1398,1400,1404,1409,1412,2272,2275,2287,2580,2582,2586,2589,2794,2798,2801,2914,2916,2920,2945],[277,278,279],"p",{},"Predictable keyboard navigation is a core requirement for accessible floating surfaces like menus, listboxes, comboboxes, and submenus.",[277,281,282],{},"In VFloat, keyboard navigation is split into a clean separation of concerns:",[284,285,286,299,316,329],"ol",{},[287,288,289,298],"li",{},[290,291,292],"strong",{},[293,294,295],"a",{"href":223},[296,297,222],"code",{}," moves physical DOM focus between items in standalone composite widgets (menus, tabs, toolbars). Focus lands on the item itself with a single tab stop.",[287,300,301,307,308,311,312,315],{},[290,302,303],{},[293,304,305],{"href":227},[296,306,226],{}," drives virtual focus for text-input widgets (comboboxes, autocompletes). DOM focus stays pinned on the ",[296,309,310],{},"\u003Cinput>"," while ",[296,313,314],{},"aria-activedescendant"," highlights the active option.",[287,317,318,324,325,328],{},[290,319,320],{},[293,321,322],{"href":231},[296,323,230],{}," handles character-based search and jumping, buffering keystrokes and cycling through matching items. Forward matches into either focus model through ",[296,326,327],{},"onMatch",".",[287,330,331,337,338,341,342,345,346,341,349,351],{},[290,332,333],{},[293,334,335],{"href":214},[296,336,213],{}," is a semantic synchronizer. It applies standard ARIA roles and popup states such as ",[296,339,340],{},"aria-expanded"," and ",[296,343,344],{},"aria-controls","; focus-specific states such as ",[296,347,348],{},"tabindex",[296,350,314],{}," stay in your render layer.",[353,354,356],"h2",{"id":355},"keyboard-navigation-strategy","Keyboard navigation strategy",[277,358,359],{},"We separate keyboard navigation into two distinct patterns based on whether the component requires continuous text input:",[361,362,363,375],"ul",{},[287,364,365,371,372,374],{},[290,366,367,368,370],{},"Virtual Focus (",[296,369,314],{},")",": Used exclusively for text-input-driven components (such as Comboboxes, Autocompletes, Searchable Selects). Physical DOM focus remains locked on the ",[296,373,310],{}," to preserve the text cursor, IME composition, and mobile software keyboards, while virtual focus navigates suggestions.",[287,376,377,380,381,384],{},[290,378,379],{},"Physical Roving Focus (Roving Tabindex)",": Used for all standalone composite widgets (such as Menus, Tabs, Toolbars, Trees, and non-searchable Listboxes). Physical DOM focus moves directly to each item, providing native ",[296,382,383],{},":focus-visible"," styling, built-in scroll alignment, and robust screen reader support.",[386,387],"hr",{},[353,389,391],{"id":390},"dom-focus-model-for-menus-and-action-lists","DOM focus model for menus and action lists",[277,393,394,395,397,398,401,402,405],{},"In this model, focus actually shifts into the floating list, and arrow keys move physical DOM focus between list items using a roving ",[296,396,348],{},". Only the active item is focusable (",[296,399,400],{},"tabindex=\"0\"","), while the rest are ignored (",[296,403,404],{},"tabindex=\"-1\"",").",[407,408,410],"h3",{"id":409},"composable-setup","Composable setup",[412,413,418],"pre",{"className":414,"code":415,"language":416,"meta":417,"style":417},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\nimport { ref, shallowRef } from \"vue\";\nimport { useFloatingNode, usePosition, useRovingFocus, useRole } from \"v-float\";\n\ninterface MenuItem {\n  id: string;\n  label: string;\n  disabled?: boolean;\n}\n\nconst items = ref\u003CMenuItem[]>([\n  { id: \"edit\", label: \"Edit Item\" },\n  { id: \"duplicate\", label: \"Duplicate\" },\n  { id: \"archive\", label: \"Archive Item\", disabled: true },\n  { id: \"delete\", label: \"Delete\" },\n]);\n\nconst anchorEl = ref\u003CHTMLElement | null>(null);\nconst floatingEl = ref\u003CHTMLElement | null>(null);\nconst itemEls = shallowRef\u003C(HTMLElement | null)[]>([]);\n\nconst node = useFloatingNode({ anchorEl, floatingEl });\nusePosition(node);\n\n\u002F\u002F 1. Move physical DOM focus across items\nconst { activeIndex, getTabindex } = useRovingFocus(node, {\n  elementsList: itemEls,\n  orientation: \"vertical\",\n  loop: true,\n});\n\n\u002F\u002F 2. Keep ARIA roles synchronized\nuseRole(node, {\n  role: \"menu\",\n  listRef: itemEls,\n  disabledIndices: (idx) => !!items.value[idx]?.disabled,\n});\n\u003C\u002Fscript>\n","vue","",[296,419,420,455,491,529,536,549,563,575,589,595,600,628,663,694,736,767,775,780,815,845,877,882,913,923,928,935,964,978,995,1007,1016,1021,1027,1038,1055,1067,1106,1115],{"__ignoreMap":417},[421,422,425,429,433,437,440,443,446,450,452],"span",{"class":423,"line":424},"line",1,[421,426,428],{"class":427},"sMK4o","\u003C",[421,430,432],{"class":431},"swJcz","script",[421,434,436],{"class":435},"spNyl"," setup",[421,438,439],{"class":435}," lang",[421,441,442],{"class":427},"=",[421,444,445],{"class":427},"\"",[421,447,449],{"class":448},"sfazB","ts",[421,451,445],{"class":427},[421,453,454],{"class":427},">\n",[421,456,458,462,465,469,472,475,478,481,484,486,488],{"class":423,"line":457},2,[421,459,461],{"class":460},"s7zQu","import",[421,463,464],{"class":427}," {",[421,466,468],{"class":467},"sTEyZ"," ref",[421,470,471],{"class":427},",",[421,473,474],{"class":467}," shallowRef",[421,476,477],{"class":427}," }",[421,479,480],{"class":460}," from",[421,482,483],{"class":427}," \"",[421,485,416],{"class":448},[421,487,445],{"class":427},[421,489,490],{"class":427},";\n",[421,492,494,496,498,501,503,506,508,511,513,516,518,520,522,525,527],{"class":423,"line":493},3,[421,495,461],{"class":460},[421,497,464],{"class":427},[421,499,500],{"class":467}," useFloatingNode",[421,502,471],{"class":427},[421,504,505],{"class":467}," usePosition",[421,507,471],{"class":427},[421,509,510],{"class":467}," useRovingFocus",[421,512,471],{"class":427},[421,514,515],{"class":467}," useRole",[421,517,477],{"class":427},[421,519,480],{"class":460},[421,521,483],{"class":427},[421,523,524],{"class":448},"v-float",[421,526,445],{"class":427},[421,528,490],{"class":427},[421,530,532],{"class":423,"line":531},4,[421,533,535],{"emptyLinePlaceholder":534},true,"\n",[421,537,539,542,546],{"class":423,"line":538},5,[421,540,541],{"class":435},"interface",[421,543,545],{"class":544},"sBMFI"," MenuItem",[421,547,548],{"class":427}," {\n",[421,550,552,555,558,561],{"class":423,"line":551},6,[421,553,554],{"class":431},"  id",[421,556,557],{"class":427},":",[421,559,560],{"class":544}," string",[421,562,490],{"class":427},[421,564,566,569,571,573],{"class":423,"line":565},7,[421,567,568],{"class":431},"  label",[421,570,557],{"class":427},[421,572,560],{"class":544},[421,574,490],{"class":427},[421,576,578,581,584,587],{"class":423,"line":577},8,[421,579,580],{"class":431},"  disabled",[421,582,583],{"class":427},"?:",[421,585,586],{"class":544}," boolean",[421,588,490],{"class":427},[421,590,592],{"class":423,"line":591},9,[421,593,594],{"class":427},"}\n",[421,596,598],{"class":423,"line":597},10,[421,599,535],{"emptyLinePlaceholder":534},[421,601,603,606,609,611,614,616,619,622,625],{"class":423,"line":602},11,[421,604,605],{"class":435},"const",[421,607,608],{"class":467}," items ",[421,610,442],{"class":427},[421,612,468],{"class":613},"s2Zo4",[421,615,428],{"class":427},[421,617,618],{"class":544},"MenuItem",[421,620,621],{"class":467},"[]",[421,623,624],{"class":427},">",[421,626,627],{"class":467},"([\n",[421,629,631,634,637,639,641,644,646,648,651,653,655,658,660],{"class":423,"line":630},12,[421,632,633],{"class":427},"  {",[421,635,636],{"class":431}," id",[421,638,557],{"class":427},[421,640,483],{"class":427},[421,642,643],{"class":448},"edit",[421,645,445],{"class":427},[421,647,471],{"class":427},[421,649,650],{"class":431}," label",[421,652,557],{"class":427},[421,654,483],{"class":427},[421,656,657],{"class":448},"Edit Item",[421,659,445],{"class":427},[421,661,662],{"class":427}," },\n",[421,664,666,668,670,672,674,677,679,681,683,685,687,690,692],{"class":423,"line":665},13,[421,667,633],{"class":427},[421,669,636],{"class":431},[421,671,557],{"class":427},[421,673,483],{"class":427},[421,675,676],{"class":448},"duplicate",[421,678,445],{"class":427},[421,680,471],{"class":427},[421,682,650],{"class":431},[421,684,557],{"class":427},[421,686,483],{"class":427},[421,688,689],{"class":448},"Duplicate",[421,691,445],{"class":427},[421,693,662],{"class":427},[421,695,697,699,701,703,705,708,710,712,714,716,718,721,723,725,728,730,734],{"class":423,"line":696},14,[421,698,633],{"class":427},[421,700,636],{"class":431},[421,702,557],{"class":427},[421,704,483],{"class":427},[421,706,707],{"class":448},"archive",[421,709,445],{"class":427},[421,711,471],{"class":427},[421,713,650],{"class":431},[421,715,557],{"class":427},[421,717,483],{"class":427},[421,719,720],{"class":448},"Archive Item",[421,722,445],{"class":427},[421,724,471],{"class":427},[421,726,727],{"class":431}," disabled",[421,729,557],{"class":427},[421,731,733],{"class":732},"sfNiH"," true",[421,735,662],{"class":427},[421,737,739,741,743,745,747,750,752,754,756,758,760,763,765],{"class":423,"line":738},15,[421,740,633],{"class":427},[421,742,636],{"class":431},[421,744,557],{"class":427},[421,746,483],{"class":427},[421,748,749],{"class":448},"delete",[421,751,445],{"class":427},[421,753,471],{"class":427},[421,755,650],{"class":431},[421,757,557],{"class":427},[421,759,483],{"class":427},[421,761,762],{"class":448},"Delete",[421,764,445],{"class":427},[421,766,662],{"class":427},[421,768,770,773],{"class":423,"line":769},16,[421,771,772],{"class":467},"])",[421,774,490],{"class":427},[421,776,778],{"class":423,"line":777},17,[421,779,535],{"emptyLinePlaceholder":534},[421,781,783,785,788,790,792,794,797,800,803,805,808,811,813],{"class":423,"line":782},18,[421,784,605],{"class":435},[421,786,787],{"class":467}," anchorEl ",[421,789,442],{"class":427},[421,791,468],{"class":613},[421,793,428],{"class":427},[421,795,796],{"class":544},"HTMLElement",[421,798,799],{"class":427}," |",[421,801,802],{"class":544}," null",[421,804,624],{"class":427},[421,806,807],{"class":467},"(",[421,809,810],{"class":427},"null",[421,812,370],{"class":467},[421,814,490],{"class":427},[421,816,818,820,823,825,827,829,831,833,835,837,839,841,843],{"class":423,"line":817},19,[421,819,605],{"class":435},[421,821,822],{"class":467}," floatingEl ",[421,824,442],{"class":427},[421,826,468],{"class":613},[421,828,428],{"class":427},[421,830,796],{"class":544},[421,832,799],{"class":427},[421,834,802],{"class":544},[421,836,624],{"class":427},[421,838,807],{"class":467},[421,840,810],{"class":427},[421,842,370],{"class":467},[421,844,490],{"class":427},[421,846,848,850,853,855,857,859,861,863,865,867,870,872,875],{"class":423,"line":847},20,[421,849,605],{"class":435},[421,851,852],{"class":467}," itemEls ",[421,854,442],{"class":427},[421,856,474],{"class":613},[421,858,428],{"class":427},[421,860,807],{"class":467},[421,862,796],{"class":544},[421,864,799],{"class":427},[421,866,802],{"class":544},[421,868,869],{"class":467},")[]",[421,871,624],{"class":427},[421,873,874],{"class":467},"([])",[421,876,490],{"class":427},[421,878,880],{"class":423,"line":879},21,[421,881,535],{"emptyLinePlaceholder":534},[421,883,885,887,890,892,894,896,899,902,904,906,909,911],{"class":423,"line":884},22,[421,886,605],{"class":435},[421,888,889],{"class":467}," node ",[421,891,442],{"class":427},[421,893,500],{"class":613},[421,895,807],{"class":467},[421,897,898],{"class":427},"{",[421,900,901],{"class":467}," anchorEl",[421,903,471],{"class":427},[421,905,822],{"class":467},[421,907,908],{"class":427},"}",[421,910,370],{"class":467},[421,912,490],{"class":427},[421,914,916,918,921],{"class":423,"line":915},23,[421,917,171],{"class":613},[421,919,920],{"class":467},"(node)",[421,922,490],{"class":427},[421,924,926],{"class":423,"line":925},24,[421,927,535],{"emptyLinePlaceholder":534},[421,929,931],{"class":423,"line":930},25,[421,932,934],{"class":933},"sHwdD","\u002F\u002F 1. Move physical DOM focus across items\n",[421,936,938,940,942,945,947,950,952,955,957,960,962],{"class":423,"line":937},26,[421,939,605],{"class":435},[421,941,464],{"class":427},[421,943,944],{"class":467}," activeIndex",[421,946,471],{"class":427},[421,948,949],{"class":467}," getTabindex ",[421,951,908],{"class":427},[421,953,954],{"class":427}," =",[421,956,510],{"class":613},[421,958,959],{"class":467},"(node",[421,961,471],{"class":427},[421,963,548],{"class":427},[421,965,967,970,972,975],{"class":423,"line":966},27,[421,968,969],{"class":431},"  elementsList",[421,971,557],{"class":427},[421,973,974],{"class":467}," itemEls",[421,976,977],{"class":427},",\n",[421,979,981,984,986,988,991,993],{"class":423,"line":980},28,[421,982,983],{"class":431},"  orientation",[421,985,557],{"class":427},[421,987,483],{"class":427},[421,989,990],{"class":448},"vertical",[421,992,445],{"class":427},[421,994,977],{"class":427},[421,996,998,1001,1003,1005],{"class":423,"line":997},29,[421,999,1000],{"class":431},"  loop",[421,1002,557],{"class":427},[421,1004,733],{"class":732},[421,1006,977],{"class":427},[421,1008,1010,1012,1014],{"class":423,"line":1009},30,[421,1011,908],{"class":427},[421,1013,370],{"class":467},[421,1015,490],{"class":427},[421,1017,1019],{"class":423,"line":1018},31,[421,1020,535],{"emptyLinePlaceholder":534},[421,1022,1024],{"class":423,"line":1023},32,[421,1025,1026],{"class":933},"\u002F\u002F 2. Keep ARIA roles synchronized\n",[421,1028,1030,1032,1034,1036],{"class":423,"line":1029},33,[421,1031,213],{"class":613},[421,1033,959],{"class":467},[421,1035,471],{"class":427},[421,1037,548],{"class":427},[421,1039,1041,1044,1046,1048,1051,1053],{"class":423,"line":1040},34,[421,1042,1043],{"class":431},"  role",[421,1045,557],{"class":427},[421,1047,483],{"class":427},[421,1049,1050],{"class":448},"menu",[421,1052,445],{"class":427},[421,1054,977],{"class":427},[421,1056,1058,1061,1063,1065],{"class":423,"line":1057},35,[421,1059,1060],{"class":431},"  listRef",[421,1062,557],{"class":427},[421,1064,974],{"class":467},[421,1066,977],{"class":427},[421,1068,1070,1073,1075,1078,1082,1084,1087,1090,1093,1095,1098,1101,1104],{"class":423,"line":1069},36,[421,1071,1072],{"class":613},"  disabledIndices",[421,1074,557],{"class":427},[421,1076,1077],{"class":427}," (",[421,1079,1081],{"class":1080},"sHdIc","idx",[421,1083,370],{"class":427},[421,1085,1086],{"class":435}," =>",[421,1088,1089],{"class":427}," !!",[421,1091,1092],{"class":467},"items",[421,1094,328],{"class":427},[421,1096,1097],{"class":467},"value[idx]",[421,1099,1100],{"class":427},"?.",[421,1102,1103],{"class":467},"disabled",[421,1105,977],{"class":427},[421,1107,1109,1111,1113],{"class":423,"line":1108},37,[421,1110,908],{"class":427},[421,1112,370],{"class":467},[421,1114,490],{"class":427},[421,1116,1118,1121,1123],{"class":423,"line":1117},38,[421,1119,1120],{"class":427},"\u003C\u002F",[421,1122,432],{"class":431},[421,1124,454],{"class":427},[407,1126,1128],{"id":1127},"template","Template",[277,1130,1131,1132,1134,1135,1138],{},"Render item elements with roving ",[296,1133,348],{}," from ",[296,1136,1137],{},"getTabindex"," and bind dynamic active classes:",[412,1140,1142],{"className":414,"code":1141,"language":416,"meta":417,"style":417},"\u003Ctemplate>\n  \u003Cbutton ref=\"anchorEl\" type=\"button\" @click=\"node.open.value = !node.open.value\">\n    Menu Options\n  \u003C\u002Fbutton>\n\n  \u003Cul v-if=\"node.open.value\" ref=\"floatingEl\" role=\"menu\">\n    \u003Cli\n      v-for=\"(item, index) in items\"\n      :key=\"item.id\"\n      :ref=\"(el) => (itemEls[index] = el as HTMLElement | null)\"\n      role=\"menuitem\"\n      :aria-disabled=\"item.disabled\"\n      :tabindex=\"getTabindex(index)\"\n      :class=\"{ active: activeIndex === index }\"\n    >\n      {{ item.label }}\n    \u003C\u002Fli>\n  \u003C\u002Ful>\n\u003C\u002Ftemplate>\n",[296,1143,1144,1152,1196,1201,1210,1214,1256,1264,1279,1293,1307,1321,1335,1349,1363,1368,1373,1382,1390],{"__ignoreMap":417},[421,1145,1146,1148,1150],{"class":423,"line":424},[421,1147,428],{"class":427},[421,1149,1127],{"class":431},[421,1151,454],{"class":427},[421,1153,1154,1157,1160,1162,1164,1166,1169,1171,1174,1176,1178,1180,1182,1185,1187,1189,1192,1194],{"class":423,"line":457},[421,1155,1156],{"class":427},"  \u003C",[421,1158,1159],{"class":431},"button",[421,1161,468],{"class":435},[421,1163,442],{"class":427},[421,1165,445],{"class":427},[421,1167,1168],{"class":448},"anchorEl",[421,1170,445],{"class":427},[421,1172,1173],{"class":435}," type",[421,1175,442],{"class":427},[421,1177,445],{"class":427},[421,1179,1159],{"class":448},[421,1181,445],{"class":427},[421,1183,1184],{"class":435}," @click",[421,1186,442],{"class":427},[421,1188,445],{"class":427},[421,1190,1191],{"class":448},"node.open.value = !node.open.value",[421,1193,445],{"class":427},[421,1195,454],{"class":427},[421,1197,1198],{"class":423,"line":493},[421,1199,1200],{"class":467},"    Menu Options\n",[421,1202,1203,1206,1208],{"class":423,"line":531},[421,1204,1205],{"class":427},"  \u003C\u002F",[421,1207,1159],{"class":431},[421,1209,454],{"class":427},[421,1211,1212],{"class":423,"line":538},[421,1213,535],{"emptyLinePlaceholder":534},[421,1215,1216,1218,1220,1223,1225,1227,1230,1232,1234,1236,1238,1241,1243,1246,1248,1250,1252,1254],{"class":423,"line":551},[421,1217,1156],{"class":427},[421,1219,361],{"class":431},[421,1221,1222],{"class":435}," v-if",[421,1224,442],{"class":427},[421,1226,445],{"class":427},[421,1228,1229],{"class":448},"node.open.value",[421,1231,445],{"class":427},[421,1233,468],{"class":435},[421,1235,442],{"class":427},[421,1237,445],{"class":427},[421,1239,1240],{"class":448},"floatingEl",[421,1242,445],{"class":427},[421,1244,1245],{"class":435}," role",[421,1247,442],{"class":427},[421,1249,445],{"class":427},[421,1251,1050],{"class":448},[421,1253,445],{"class":427},[421,1255,454],{"class":427},[421,1257,1258,1261],{"class":423,"line":565},[421,1259,1260],{"class":427},"    \u003C",[421,1262,1263],{"class":431},"li\n",[421,1265,1266,1269,1271,1273,1276],{"class":423,"line":577},[421,1267,1268],{"class":435},"      v-for",[421,1270,442],{"class":427},[421,1272,445],{"class":427},[421,1274,1275],{"class":448},"(item, index) in items",[421,1277,1278],{"class":427},"\"\n",[421,1280,1281,1284,1286,1288,1291],{"class":423,"line":591},[421,1282,1283],{"class":435},"      :key",[421,1285,442],{"class":427},[421,1287,445],{"class":427},[421,1289,1290],{"class":448},"item.id",[421,1292,1278],{"class":427},[421,1294,1295,1298,1300,1302,1305],{"class":423,"line":597},[421,1296,1297],{"class":435},"      :ref",[421,1299,442],{"class":427},[421,1301,445],{"class":427},[421,1303,1304],{"class":448},"(el) => (itemEls[index] = el as HTMLElement | null)",[421,1306,1278],{"class":427},[421,1308,1309,1312,1314,1316,1319],{"class":423,"line":602},[421,1310,1311],{"class":435},"      role",[421,1313,442],{"class":427},[421,1315,445],{"class":427},[421,1317,1318],{"class":448},"menuitem",[421,1320,1278],{"class":427},[421,1322,1323,1326,1328,1330,1333],{"class":423,"line":630},[421,1324,1325],{"class":435},"      :aria-disabled",[421,1327,442],{"class":427},[421,1329,445],{"class":427},[421,1331,1332],{"class":448},"item.disabled",[421,1334,1278],{"class":427},[421,1336,1337,1340,1342,1344,1347],{"class":423,"line":665},[421,1338,1339],{"class":435},"      :tabindex",[421,1341,442],{"class":427},[421,1343,445],{"class":427},[421,1345,1346],{"class":448},"getTabindex(index)",[421,1348,1278],{"class":427},[421,1350,1351,1354,1356,1358,1361],{"class":423,"line":696},[421,1352,1353],{"class":435},"      :class",[421,1355,442],{"class":427},[421,1357,445],{"class":427},[421,1359,1360],{"class":448},"{ active: activeIndex === index }",[421,1362,1278],{"class":427},[421,1364,1365],{"class":423,"line":738},[421,1366,1367],{"class":427},"    >\n",[421,1369,1370],{"class":423,"line":769},[421,1371,1372],{"class":467},"      {{ item.label }}\n",[421,1374,1375,1378,1380],{"class":423,"line":777},[421,1376,1377],{"class":427},"    \u003C\u002F",[421,1379,287],{"class":431},[421,1381,454],{"class":427},[421,1383,1384,1386,1388],{"class":423,"line":782},[421,1385,1205],{"class":427},[421,1387,361],{"class":431},[421,1389,454],{"class":427},[421,1391,1392,1394,1396],{"class":423,"line":817},[421,1393,1120],{"class":427},[421,1395,1127],{"class":431},[421,1397,454],{"class":427},[386,1399],{},[353,1401,1403],{"id":1402},"virtual-focus-model-for-comboboxes-and-inputs","Virtual focus model for comboboxes and inputs",[277,1405,1406,1407,328],{},"In this model, DOM focus stays inside a text input or combobox container, allowing the user to keep typing. Arrow keys move a \"virtual focus\" selection, communicating the active choice to screen readers using ",[296,1408,314],{},[407,1410,410],{"id":1411},"composable-setup-1",[412,1413,1415],{"className":414,"code":1414,"language":416,"meta":417,"style":417},"\u003Cscript setup lang=\"ts\">\nimport { computed, ref, shallowRef } from \"vue\";\nimport {\n  useAriaActivedescendant,\n  useEscapeKey,\n  useFloatingNode,\n  useOutsideClick,\n  usePosition,\n  useRole,\n} from \"v-float\";\n\ninterface SearchOption {\n  value: string;\n  label: string;\n}\n\nconst options = ref\u003CSearchOption[]>([\n  { value: \"vue\", label: \"Vue.js\" },\n  { value: \"react\", label: \"React\" },\n  { value: \"svelte\", label: \"Svelte\" },\n]);\n\nconst query = ref(\"\");\nconst isOpen = ref(false);\nconst inputEl = ref\u003CHTMLInputElement | null>(null);\nconst floatingEl = ref\u003CHTMLElement | null>(null);\nconst itemEls = shallowRef\u003C(HTMLElement | null)[]>([]);\n\n\u002F\u002F The input element itself acts as the positioning anchor\nconst node = useFloatingNode({\n  anchorEl: inputEl,\n  floatingEl,\n  open: isOpen,\n});\n\nusePosition(node, {\n  placement: \"bottom-start\",\n  middlewares: {\n    offset: 4,\n    matchWidth: true,\n  },\n});\n\nuseOutsideClick(node);\nuseEscapeKey(node);\n\nconst filteredOptions = computed(() =>\n  options.value.filter((o) => o.label.toLowerCase().includes(query.value.toLowerCase())),\n);\n\nconst { activeIndex, getItemId } = useAriaActivedescendant(node, {\n  elementsList: itemEls,\n  onSelect: (index) => {\n    query.value = filteredOptions.value[index]!.label;\n    node.open.value = false;\n  },\n});\n\nuseRole(node, {\n  role: \"listbox\",\n  listRef: itemEls,\n});\n\u003C\u002Fscript>\n",[296,1416,1417,1437,1466,1472,1479,1486,1493,1500,1507,1514,1528,1532,1541,1552,1562,1566,1570,1592,1622,1652,1682,1688,1692,1712,1732,1762,1790,1818,1822,1827,1842,1854,1861,1873,1881,1885,1895,1911,1920,1934,1946,1952,1961,1966,1975,1984,1989,2009,2072,2079,2084,2111,2122,2141,2175,2197,2202,2211,2216,2227,2243,2254,2263],{"__ignoreMap":417},[421,1418,1419,1421,1423,1425,1427,1429,1431,1433,1435],{"class":423,"line":424},[421,1420,428],{"class":427},[421,1422,432],{"class":431},[421,1424,436],{"class":435},[421,1426,439],{"class":435},[421,1428,442],{"class":427},[421,1430,445],{"class":427},[421,1432,449],{"class":448},[421,1434,445],{"class":427},[421,1436,454],{"class":427},[421,1438,1439,1441,1443,1446,1448,1450,1452,1454,1456,1458,1460,1462,1464],{"class":423,"line":457},[421,1440,461],{"class":460},[421,1442,464],{"class":427},[421,1444,1445],{"class":467}," computed",[421,1447,471],{"class":427},[421,1449,468],{"class":467},[421,1451,471],{"class":427},[421,1453,474],{"class":467},[421,1455,477],{"class":427},[421,1457,480],{"class":460},[421,1459,483],{"class":427},[421,1461,416],{"class":448},[421,1463,445],{"class":427},[421,1465,490],{"class":427},[421,1467,1468,1470],{"class":423,"line":493},[421,1469,461],{"class":460},[421,1471,548],{"class":427},[421,1473,1474,1477],{"class":423,"line":531},[421,1475,1476],{"class":467},"  useAriaActivedescendant",[421,1478,977],{"class":427},[421,1480,1481,1484],{"class":423,"line":538},[421,1482,1483],{"class":467},"  useEscapeKey",[421,1485,977],{"class":427},[421,1487,1488,1491],{"class":423,"line":551},[421,1489,1490],{"class":467},"  useFloatingNode",[421,1492,977],{"class":427},[421,1494,1495,1498],{"class":423,"line":565},[421,1496,1497],{"class":467},"  useOutsideClick",[421,1499,977],{"class":427},[421,1501,1502,1505],{"class":423,"line":577},[421,1503,1504],{"class":467},"  usePosition",[421,1506,977],{"class":427},[421,1508,1509,1512],{"class":423,"line":591},[421,1510,1511],{"class":467},"  useRole",[421,1513,977],{"class":427},[421,1515,1516,1518,1520,1522,1524,1526],{"class":423,"line":597},[421,1517,908],{"class":427},[421,1519,480],{"class":460},[421,1521,483],{"class":427},[421,1523,524],{"class":448},[421,1525,445],{"class":427},[421,1527,490],{"class":427},[421,1529,1530],{"class":423,"line":602},[421,1531,535],{"emptyLinePlaceholder":534},[421,1533,1534,1536,1539],{"class":423,"line":630},[421,1535,541],{"class":435},[421,1537,1538],{"class":544}," SearchOption",[421,1540,548],{"class":427},[421,1542,1543,1546,1548,1550],{"class":423,"line":665},[421,1544,1545],{"class":431},"  value",[421,1547,557],{"class":427},[421,1549,560],{"class":544},[421,1551,490],{"class":427},[421,1553,1554,1556,1558,1560],{"class":423,"line":696},[421,1555,568],{"class":431},[421,1557,557],{"class":427},[421,1559,560],{"class":544},[421,1561,490],{"class":427},[421,1563,1564],{"class":423,"line":738},[421,1565,594],{"class":427},[421,1567,1568],{"class":423,"line":769},[421,1569,535],{"emptyLinePlaceholder":534},[421,1571,1572,1574,1577,1579,1581,1583,1586,1588,1590],{"class":423,"line":777},[421,1573,605],{"class":435},[421,1575,1576],{"class":467}," options ",[421,1578,442],{"class":427},[421,1580,468],{"class":613},[421,1582,428],{"class":427},[421,1584,1585],{"class":544},"SearchOption",[421,1587,621],{"class":467},[421,1589,624],{"class":427},[421,1591,627],{"class":467},[421,1593,1594,1596,1599,1601,1603,1605,1607,1609,1611,1613,1615,1618,1620],{"class":423,"line":782},[421,1595,633],{"class":427},[421,1597,1598],{"class":431}," value",[421,1600,557],{"class":427},[421,1602,483],{"class":427},[421,1604,416],{"class":448},[421,1606,445],{"class":427},[421,1608,471],{"class":427},[421,1610,650],{"class":431},[421,1612,557],{"class":427},[421,1614,483],{"class":427},[421,1616,1617],{"class":448},"Vue.js",[421,1619,445],{"class":427},[421,1621,662],{"class":427},[421,1623,1624,1626,1628,1630,1632,1635,1637,1639,1641,1643,1645,1648,1650],{"class":423,"line":817},[421,1625,633],{"class":427},[421,1627,1598],{"class":431},[421,1629,557],{"class":427},[421,1631,483],{"class":427},[421,1633,1634],{"class":448},"react",[421,1636,445],{"class":427},[421,1638,471],{"class":427},[421,1640,650],{"class":431},[421,1642,557],{"class":427},[421,1644,483],{"class":427},[421,1646,1647],{"class":448},"React",[421,1649,445],{"class":427},[421,1651,662],{"class":427},[421,1653,1654,1656,1658,1660,1662,1665,1667,1669,1671,1673,1675,1678,1680],{"class":423,"line":847},[421,1655,633],{"class":427},[421,1657,1598],{"class":431},[421,1659,557],{"class":427},[421,1661,483],{"class":427},[421,1663,1664],{"class":448},"svelte",[421,1666,445],{"class":427},[421,1668,471],{"class":427},[421,1670,650],{"class":431},[421,1672,557],{"class":427},[421,1674,483],{"class":427},[421,1676,1677],{"class":448},"Svelte",[421,1679,445],{"class":427},[421,1681,662],{"class":427},[421,1683,1684,1686],{"class":423,"line":879},[421,1685,772],{"class":467},[421,1687,490],{"class":427},[421,1689,1690],{"class":423,"line":884},[421,1691,535],{"emptyLinePlaceholder":534},[421,1693,1694,1696,1699,1701,1703,1705,1708,1710],{"class":423,"line":915},[421,1695,605],{"class":435},[421,1697,1698],{"class":467}," query ",[421,1700,442],{"class":427},[421,1702,468],{"class":613},[421,1704,807],{"class":467},[421,1706,1707],{"class":427},"\"\"",[421,1709,370],{"class":467},[421,1711,490],{"class":427},[421,1713,1714,1716,1719,1721,1723,1725,1728,1730],{"class":423,"line":925},[421,1715,605],{"class":435},[421,1717,1718],{"class":467}," isOpen ",[421,1720,442],{"class":427},[421,1722,468],{"class":613},[421,1724,807],{"class":467},[421,1726,1727],{"class":732},"false",[421,1729,370],{"class":467},[421,1731,490],{"class":427},[421,1733,1734,1736,1739,1741,1743,1745,1748,1750,1752,1754,1756,1758,1760],{"class":423,"line":930},[421,1735,605],{"class":435},[421,1737,1738],{"class":467}," inputEl ",[421,1740,442],{"class":427},[421,1742,468],{"class":613},[421,1744,428],{"class":427},[421,1746,1747],{"class":544},"HTMLInputElement",[421,1749,799],{"class":427},[421,1751,802],{"class":544},[421,1753,624],{"class":427},[421,1755,807],{"class":467},[421,1757,810],{"class":427},[421,1759,370],{"class":467},[421,1761,490],{"class":427},[421,1763,1764,1766,1768,1770,1772,1774,1776,1778,1780,1782,1784,1786,1788],{"class":423,"line":937},[421,1765,605],{"class":435},[421,1767,822],{"class":467},[421,1769,442],{"class":427},[421,1771,468],{"class":613},[421,1773,428],{"class":427},[421,1775,796],{"class":544},[421,1777,799],{"class":427},[421,1779,802],{"class":544},[421,1781,624],{"class":427},[421,1783,807],{"class":467},[421,1785,810],{"class":427},[421,1787,370],{"class":467},[421,1789,490],{"class":427},[421,1791,1792,1794,1796,1798,1800,1802,1804,1806,1808,1810,1812,1814,1816],{"class":423,"line":966},[421,1793,605],{"class":435},[421,1795,852],{"class":467},[421,1797,442],{"class":427},[421,1799,474],{"class":613},[421,1801,428],{"class":427},[421,1803,807],{"class":467},[421,1805,796],{"class":544},[421,1807,799],{"class":427},[421,1809,802],{"class":544},[421,1811,869],{"class":467},[421,1813,624],{"class":427},[421,1815,874],{"class":467},[421,1817,490],{"class":427},[421,1819,1820],{"class":423,"line":980},[421,1821,535],{"emptyLinePlaceholder":534},[421,1823,1824],{"class":423,"line":997},[421,1825,1826],{"class":933},"\u002F\u002F The input element itself acts as the positioning anchor\n",[421,1828,1829,1831,1833,1835,1837,1839],{"class":423,"line":1009},[421,1830,605],{"class":435},[421,1832,889],{"class":467},[421,1834,442],{"class":427},[421,1836,500],{"class":613},[421,1838,807],{"class":467},[421,1840,1841],{"class":427},"{\n",[421,1843,1844,1847,1849,1852],{"class":423,"line":1018},[421,1845,1846],{"class":431},"  anchorEl",[421,1848,557],{"class":427},[421,1850,1851],{"class":467}," inputEl",[421,1853,977],{"class":427},[421,1855,1856,1859],{"class":423,"line":1023},[421,1857,1858],{"class":467},"  floatingEl",[421,1860,977],{"class":427},[421,1862,1863,1866,1868,1871],{"class":423,"line":1029},[421,1864,1865],{"class":431},"  open",[421,1867,557],{"class":427},[421,1869,1870],{"class":467}," isOpen",[421,1872,977],{"class":427},[421,1874,1875,1877,1879],{"class":423,"line":1040},[421,1876,908],{"class":427},[421,1878,370],{"class":467},[421,1880,490],{"class":427},[421,1882,1883],{"class":423,"line":1057},[421,1884,535],{"emptyLinePlaceholder":534},[421,1886,1887,1889,1891,1893],{"class":423,"line":1069},[421,1888,171],{"class":613},[421,1890,959],{"class":467},[421,1892,471],{"class":427},[421,1894,548],{"class":427},[421,1896,1897,1900,1902,1904,1907,1909],{"class":423,"line":1108},[421,1898,1899],{"class":431},"  placement",[421,1901,557],{"class":427},[421,1903,483],{"class":427},[421,1905,1906],{"class":448},"bottom-start",[421,1908,445],{"class":427},[421,1910,977],{"class":427},[421,1912,1913,1916,1918],{"class":423,"line":1117},[421,1914,1915],{"class":431},"  middlewares",[421,1917,557],{"class":427},[421,1919,548],{"class":427},[421,1921,1923,1926,1928,1932],{"class":423,"line":1922},39,[421,1924,1925],{"class":431},"    offset",[421,1927,557],{"class":427},[421,1929,1931],{"class":1930},"sbssI"," 4",[421,1933,977],{"class":427},[421,1935,1937,1940,1942,1944],{"class":423,"line":1936},40,[421,1938,1939],{"class":431},"    matchWidth",[421,1941,557],{"class":427},[421,1943,733],{"class":732},[421,1945,977],{"class":427},[421,1947,1949],{"class":423,"line":1948},41,[421,1950,1951],{"class":427},"  },\n",[421,1953,1955,1957,1959],{"class":423,"line":1954},42,[421,1956,908],{"class":427},[421,1958,370],{"class":467},[421,1960,490],{"class":427},[421,1962,1964],{"class":423,"line":1963},43,[421,1965,535],{"emptyLinePlaceholder":534},[421,1967,1969,1971,1973],{"class":423,"line":1968},44,[421,1970,205],{"class":613},[421,1972,920],{"class":467},[421,1974,490],{"class":427},[421,1976,1978,1980,1982],{"class":423,"line":1977},45,[421,1979,209],{"class":613},[421,1981,920],{"class":467},[421,1983,490],{"class":427},[421,1985,1987],{"class":423,"line":1986},46,[421,1988,535],{"emptyLinePlaceholder":534},[421,1990,1992,1994,1997,1999,2001,2003,2006],{"class":423,"line":1991},47,[421,1993,605],{"class":435},[421,1995,1996],{"class":467}," filteredOptions ",[421,1998,442],{"class":427},[421,2000,1445],{"class":613},[421,2002,807],{"class":467},[421,2004,2005],{"class":427},"()",[421,2007,2008],{"class":435}," =>\n",[421,2010,2012,2015,2017,2020,2022,2025,2027,2029,2032,2034,2036,2039,2041,2044,2046,2049,2051,2053,2056,2059,2061,2063,2065,2067,2070],{"class":423,"line":2011},48,[421,2013,2014],{"class":467},"  options",[421,2016,328],{"class":427},[421,2018,2019],{"class":467},"value",[421,2021,328],{"class":427},[421,2023,2024],{"class":613},"filter",[421,2026,807],{"class":467},[421,2028,807],{"class":427},[421,2030,2031],{"class":1080},"o",[421,2033,370],{"class":427},[421,2035,1086],{"class":435},[421,2037,2038],{"class":467}," o",[421,2040,328],{"class":427},[421,2042,2043],{"class":467},"label",[421,2045,328],{"class":427},[421,2047,2048],{"class":613},"toLowerCase",[421,2050,2005],{"class":467},[421,2052,328],{"class":427},[421,2054,2055],{"class":613},"includes",[421,2057,2058],{"class":467},"(query",[421,2060,328],{"class":427},[421,2062,2019],{"class":467},[421,2064,328],{"class":427},[421,2066,2048],{"class":613},[421,2068,2069],{"class":467},"()))",[421,2071,977],{"class":427},[421,2073,2075,2077],{"class":423,"line":2074},49,[421,2076,370],{"class":467},[421,2078,490],{"class":427},[421,2080,2082],{"class":423,"line":2081},50,[421,2083,535],{"emptyLinePlaceholder":534},[421,2085,2087,2089,2091,2093,2095,2098,2100,2102,2105,2107,2109],{"class":423,"line":2086},51,[421,2088,605],{"class":435},[421,2090,464],{"class":427},[421,2092,944],{"class":467},[421,2094,471],{"class":427},[421,2096,2097],{"class":467}," getItemId ",[421,2099,908],{"class":427},[421,2101,954],{"class":427},[421,2103,2104],{"class":613}," useAriaActivedescendant",[421,2106,959],{"class":467},[421,2108,471],{"class":427},[421,2110,548],{"class":427},[421,2112,2114,2116,2118,2120],{"class":423,"line":2113},52,[421,2115,969],{"class":431},[421,2117,557],{"class":427},[421,2119,974],{"class":467},[421,2121,977],{"class":427},[421,2123,2125,2128,2130,2132,2135,2137,2139],{"class":423,"line":2124},53,[421,2126,2127],{"class":613},"  onSelect",[421,2129,557],{"class":427},[421,2131,1077],{"class":427},[421,2133,2134],{"class":1080},"index",[421,2136,370],{"class":427},[421,2138,1086],{"class":435},[421,2140,548],{"class":427},[421,2142,2144,2147,2149,2151,2153,2156,2158,2160,2163,2165,2168,2171,2173],{"class":423,"line":2143},54,[421,2145,2146],{"class":467},"    query",[421,2148,328],{"class":427},[421,2150,2019],{"class":467},[421,2152,954],{"class":427},[421,2154,2155],{"class":467}," filteredOptions",[421,2157,328],{"class":427},[421,2159,2019],{"class":467},[421,2161,2162],{"class":431},"[",[421,2164,2134],{"class":467},[421,2166,2167],{"class":431},"]",[421,2169,2170],{"class":427},"!.",[421,2172,2043],{"class":467},[421,2174,490],{"class":427},[421,2176,2178,2181,2183,2186,2188,2190,2192,2195],{"class":423,"line":2177},55,[421,2179,2180],{"class":467},"    node",[421,2182,328],{"class":427},[421,2184,2185],{"class":467},"open",[421,2187,328],{"class":427},[421,2189,2019],{"class":467},[421,2191,954],{"class":427},[421,2193,2194],{"class":732}," false",[421,2196,490],{"class":427},[421,2198,2200],{"class":423,"line":2199},56,[421,2201,1951],{"class":427},[421,2203,2205,2207,2209],{"class":423,"line":2204},57,[421,2206,908],{"class":427},[421,2208,370],{"class":467},[421,2210,490],{"class":427},[421,2212,2214],{"class":423,"line":2213},58,[421,2215,535],{"emptyLinePlaceholder":534},[421,2217,2219,2221,2223,2225],{"class":423,"line":2218},59,[421,2220,213],{"class":613},[421,2222,959],{"class":467},[421,2224,471],{"class":427},[421,2226,548],{"class":427},[421,2228,2230,2232,2234,2236,2239,2241],{"class":423,"line":2229},60,[421,2231,1043],{"class":431},[421,2233,557],{"class":427},[421,2235,483],{"class":427},[421,2237,2238],{"class":448},"listbox",[421,2240,445],{"class":427},[421,2242,977],{"class":427},[421,2244,2246,2248,2250,2252],{"class":423,"line":2245},61,[421,2247,1060],{"class":431},[421,2249,557],{"class":427},[421,2251,974],{"class":467},[421,2253,977],{"class":427},[421,2255,2257,2259,2261],{"class":423,"line":2256},62,[421,2258,908],{"class":427},[421,2260,370],{"class":467},[421,2262,490],{"class":427},[421,2264,2266,2268,2270],{"class":423,"line":2265},63,[421,2267,1120],{"class":427},[421,2269,432],{"class":431},[421,2271,454],{"class":427},[407,2273,1128],{"id":2274},"template-1",[277,2276,2277,2278,2281,2282,2284,2285,557],{},"Bind ",[296,2279,2280],{},":id=\"getItemId(index)\""," on each option. The ",[296,2283,314],{}," attribute on the input trigger is automatically synchronized by ",[296,2286,226],{},[412,2288,2290],{"className":414,"code":2289,"language":416,"meta":417,"style":417},"\u003Ctemplate>\n  \u003Cinput\n    ref=\"inputEl\"\n    v-model=\"query\"\n    type=\"text\"\n    role=\"combobox\"\n    aria-autocomplete=\"list\"\n    :aria-expanded=\"node.open.value\"\n    @focus=\"node.open.value = true\"\n  \u002F>\n\n  \u003Cul v-if=\"node.open.value\" ref=\"floatingEl\" role=\"listbox\">\n    \u003Cli\n      v-for=\"(item, index) in filteredOptions\"\n      :key=\"item.value\"\n      :id=\"getItemId(index)\"\n      :ref=\"(el) => (itemEls[index] = el as HTMLElement | null)\"\n      role=\"option\"\n      :aria-selected=\"activeIndex === index\"\n      :class=\"{ active: activeIndex === index }\"\n    >\n      {{ item.label }}\n    \u003C\u002Fli>\n  \u003C\u002Ful>\n\u003C\u002Ftemplate>\n",[296,2291,2292,2300,2307,2321,2335,2349,2363,2377,2390,2404,2409,2413,2451,2457,2470,2483,2497,2509,2522,2536,2548,2552,2556,2564,2572],{"__ignoreMap":417},[421,2293,2294,2296,2298],{"class":423,"line":424},[421,2295,428],{"class":427},[421,2297,1127],{"class":431},[421,2299,454],{"class":427},[421,2301,2302,2304],{"class":423,"line":457},[421,2303,1156],{"class":427},[421,2305,2306],{"class":431},"input\n",[421,2308,2309,2312,2314,2316,2319],{"class":423,"line":493},[421,2310,2311],{"class":435},"    ref",[421,2313,442],{"class":427},[421,2315,445],{"class":427},[421,2317,2318],{"class":448},"inputEl",[421,2320,1278],{"class":427},[421,2322,2323,2326,2328,2330,2333],{"class":423,"line":531},[421,2324,2325],{"class":435},"    v-model",[421,2327,442],{"class":427},[421,2329,445],{"class":427},[421,2331,2332],{"class":448},"query",[421,2334,1278],{"class":427},[421,2336,2337,2340,2342,2344,2347],{"class":423,"line":538},[421,2338,2339],{"class":435},"    type",[421,2341,442],{"class":427},[421,2343,445],{"class":427},[421,2345,2346],{"class":448},"text",[421,2348,1278],{"class":427},[421,2350,2351,2354,2356,2358,2361],{"class":423,"line":551},[421,2352,2353],{"class":435},"    role",[421,2355,442],{"class":427},[421,2357,445],{"class":427},[421,2359,2360],{"class":448},"combobox",[421,2362,1278],{"class":427},[421,2364,2365,2368,2370,2372,2375],{"class":423,"line":565},[421,2366,2367],{"class":435},"    aria-autocomplete",[421,2369,442],{"class":427},[421,2371,445],{"class":427},[421,2373,2374],{"class":448},"list",[421,2376,1278],{"class":427},[421,2378,2379,2382,2384,2386,2388],{"class":423,"line":577},[421,2380,2381],{"class":435},"    :aria-expanded",[421,2383,442],{"class":427},[421,2385,445],{"class":427},[421,2387,1229],{"class":448},[421,2389,1278],{"class":427},[421,2391,2392,2395,2397,2399,2402],{"class":423,"line":591},[421,2393,2394],{"class":435},"    @focus",[421,2396,442],{"class":427},[421,2398,445],{"class":427},[421,2400,2401],{"class":448},"node.open.value = true",[421,2403,1278],{"class":427},[421,2405,2406],{"class":423,"line":597},[421,2407,2408],{"class":427},"  \u002F>\n",[421,2410,2411],{"class":423,"line":602},[421,2412,535],{"emptyLinePlaceholder":534},[421,2414,2415,2417,2419,2421,2423,2425,2427,2429,2431,2433,2435,2437,2439,2441,2443,2445,2447,2449],{"class":423,"line":630},[421,2416,1156],{"class":427},[421,2418,361],{"class":431},[421,2420,1222],{"class":435},[421,2422,442],{"class":427},[421,2424,445],{"class":427},[421,2426,1229],{"class":448},[421,2428,445],{"class":427},[421,2430,468],{"class":435},[421,2432,442],{"class":427},[421,2434,445],{"class":427},[421,2436,1240],{"class":448},[421,2438,445],{"class":427},[421,2440,1245],{"class":435},[421,2442,442],{"class":427},[421,2444,445],{"class":427},[421,2446,2238],{"class":448},[421,2448,445],{"class":427},[421,2450,454],{"class":427},[421,2452,2453,2455],{"class":423,"line":665},[421,2454,1260],{"class":427},[421,2456,1263],{"class":431},[421,2458,2459,2461,2463,2465,2468],{"class":423,"line":696},[421,2460,1268],{"class":435},[421,2462,442],{"class":427},[421,2464,445],{"class":427},[421,2466,2467],{"class":448},"(item, index) in filteredOptions",[421,2469,1278],{"class":427},[421,2471,2472,2474,2476,2478,2481],{"class":423,"line":738},[421,2473,1283],{"class":435},[421,2475,442],{"class":427},[421,2477,445],{"class":427},[421,2479,2480],{"class":448},"item.value",[421,2482,1278],{"class":427},[421,2484,2485,2488,2490,2492,2495],{"class":423,"line":769},[421,2486,2487],{"class":435},"      :id",[421,2489,442],{"class":427},[421,2491,445],{"class":427},[421,2493,2494],{"class":448},"getItemId(index)",[421,2496,1278],{"class":427},[421,2498,2499,2501,2503,2505,2507],{"class":423,"line":777},[421,2500,1297],{"class":435},[421,2502,442],{"class":427},[421,2504,445],{"class":427},[421,2506,1304],{"class":448},[421,2508,1278],{"class":427},[421,2510,2511,2513,2515,2517,2520],{"class":423,"line":782},[421,2512,1311],{"class":435},[421,2514,442],{"class":427},[421,2516,445],{"class":427},[421,2518,2519],{"class":448},"option",[421,2521,1278],{"class":427},[421,2523,2524,2527,2529,2531,2534],{"class":423,"line":817},[421,2525,2526],{"class":435},"      :aria-selected",[421,2528,442],{"class":427},[421,2530,445],{"class":427},[421,2532,2533],{"class":448},"activeIndex === index",[421,2535,1278],{"class":427},[421,2537,2538,2540,2542,2544,2546],{"class":423,"line":847},[421,2539,1353],{"class":435},[421,2541,442],{"class":427},[421,2543,445],{"class":427},[421,2545,1360],{"class":448},[421,2547,1278],{"class":427},[421,2549,2550],{"class":423,"line":879},[421,2551,1367],{"class":427},[421,2553,2554],{"class":423,"line":884},[421,2555,1372],{"class":467},[421,2557,2558,2560,2562],{"class":423,"line":915},[421,2559,1377],{"class":427},[421,2561,287],{"class":431},[421,2563,454],{"class":427},[421,2565,2566,2568,2570],{"class":423,"line":925},[421,2567,1205],{"class":427},[421,2569,361],{"class":431},[421,2571,454],{"class":427},[421,2573,2574,2576,2578],{"class":423,"line":930},[421,2575,1120],{"class":427},[421,2577,1127],{"class":431},[421,2579,454],{"class":427},[386,2581],{},[353,2583,2585],{"id":2584},"keyboard-interactions-resolved","Keyboard interactions resolved",[277,2587,2588],{},"Here are the key events handled automatically by the focus models:",[2590,2591,2592,2608],"table",{},[2593,2594,2595],"thead",{},[2596,2597,2598,2602,2605],"tr",{},[2599,2600,2601],"th",{},"Key",[2599,2603,2604],{},"Orientation",[2599,2606,2607],{},"Action",[2609,2610,2611,2627,2641,2656,2670,2688,2704,2717,2729,2753,2773],"tbody",{},[2596,2612,2613,2619,2624],{},[2614,2615,2616],"td",{},[296,2617,2618],{},"ArrowDown",[2614,2620,2621],{},[296,2622,2623],{},"\"vertical\"",[2614,2625,2626],{},"Moves to the next enabled item.",[2596,2628,2629,2634,2638],{},[2614,2630,2631],{},[296,2632,2633],{},"ArrowUp",[2614,2635,2636],{},[296,2637,2623],{},[2614,2639,2640],{},"Moves to the previous enabled item.",[2596,2642,2643,2648,2653],{},[2614,2644,2645],{},[296,2646,2647],{},"ArrowRight",[2614,2649,2650],{},[296,2651,2652],{},"\"horizontal\"",[2614,2654,2655],{},"Moves to the next enabled item (or previous in RTL).",[2596,2657,2658,2663,2667],{},[2614,2659,2660],{},[296,2661,2662],{},"ArrowLeft",[2614,2664,2665],{},[296,2666,2652],{},[2614,2668,2669],{},"Moves to the previous enabled item (or next in RTL).",[2596,2671,2672,2676,2681],{},[2614,2673,2674],{},[296,2675,2647],{},[2614,2677,2678,2680],{},[296,2679,2623],{}," (Menu)",[2614,2682,2683,2684,2687],{},"Fires ",[296,2685,2686],{},"onEnter","; submenu triggers use this to open the child floating node and focus its first item.",[2596,2689,2690,2694,2698],{},[2614,2691,2692],{},[296,2693,2662],{},[2614,2695,2696,2680],{},[296,2697,2623],{},[2614,2699,2683,2700,2703],{},[296,2701,2702],{},"onExit","; submenu panels use this to close the child floating node and return focus to the parent trigger.",[2596,2705,2706,2711,2714],{},[2614,2707,2708],{},[296,2709,2710],{},"Home",[2614,2712,2713],{},"Any",[2614,2715,2716],{},"Moves to the first enabled item.",[2596,2718,2719,2724,2726],{},[2614,2720,2721],{},[296,2722,2723],{},"End",[2614,2725,2713],{},[2614,2727,2728],{},"Moves to the last enabled item.",[2596,2730,2731,2736,2738],{},[2614,2732,2733],{},[296,2734,2735],{},"PageUp",[2614,2737,2713],{},[2614,2739,2740,2741,2744,2745,2748,2749,341,2751,328],{},"Moves up by ",[296,2742,2743],{},"pageSize"," (default ",[296,2746,2747],{},"10",") in ",[296,2750,222],{},[296,2752,226],{},[2596,2754,2755,2760,2762],{},[2614,2756,2757],{},[296,2758,2759],{},"PageDown",[2614,2761,2713],{},[2614,2763,2764,2765,2744,2767,2748,2769,341,2771,328],{},"Moves down by ",[296,2766,2743],{},[296,2768,2747],{},[296,2770,222],{},[296,2772,226],{},[2596,2774,2775,2780,2782],{},[2614,2776,2777],{},[296,2778,2779],{},"Tab",[2614,2781,2713],{},[2614,2783,2784,2785,2789,2790,2793],{},"Passes through to document flow. In non-modal ",[293,2786,2787],{"href":202},[296,2788,201],{}," surfaces, ",[296,2791,2792],{},"closeOnTab"," closes on exit.",[407,2795,2797],{"id":2796},"opening-closed-surfaces-on-arrow-keys","Opening closed surfaces on arrow keys",[277,2799,2800],{},"When keyboard focus is on the anchor trigger or input and the floating surface is closed, arrow keys can initiate disclosure directly:",[2590,2802,2803,2816],{},[2593,2804,2805],{},[2596,2806,2807,2810,2813],{},[2599,2808,2809],{},"Pattern & Key",[2599,2811,2812],{},"Composable & Setting",[2599,2814,2815],{},"Action When Closed",[2609,2817,2818,2833,2846,2863,2878,2897],{},[2596,2819,2820,2825,2830],{},[2614,2821,2822,2824],{},[296,2823,2618],{}," (Menu Button)",[2614,2826,2827],{},[296,2828,2829],{},"useRovingFocus({ openOnArrowKeyDown: true })",[2614,2831,2832],{},"Opens floating element and moves physical focus to first item.",[2596,2834,2835,2839,2843],{},[2614,2836,2837,2824],{},[296,2838,2633],{},[2614,2840,2841],{},[296,2842,2829],{},[2614,2844,2845],{},"Opens floating element and moves physical focus to last item.",[2596,2847,2848,2853,2860],{},[2614,2849,2850,2852],{},[296,2851,2618],{}," (Combobox)",[2614,2854,2855,2744,2857,370],{},[296,2856,226],{},[296,2858,2859],{},"true",[2614,2861,2862],{},"Opens floating element and highlights first option virtually.",[2596,2864,2865,2869,2875],{},[2614,2866,2867,2852],{},[296,2868,2633],{},[2614,2870,2871,2744,2873,370],{},[296,2872,226],{},[296,2874,2859],{},[2614,2876,2877],{},"Opens floating element and highlights last option virtually.",[2596,2879,2880,2885,2891],{},[2614,2881,2882,2852],{},[296,2883,2884],{},"Alt+ArrowDown",[2614,2886,2887,2744,2889,370],{},[296,2888,226],{},[296,2890,2859],{},[2614,2892,2893,2894,405],{},"Opens floating element without moving virtual focus (",[296,2895,2896],{},"index: -1",[2596,2898,2899,2905,2911],{},[2614,2900,2901,2904],{},[296,2902,2903],{},"Alt+ArrowUp"," (Combobox, open)",[2614,2906,2907,2744,2909,370],{},[296,2908,226],{},[296,2910,2859],{},[2614,2912,2913],{},"Closes floating element without clearing active selection.",[386,2915],{},[353,2917,2919],{"id":2918},"where-to-go-next","Where to go next",[361,2921,2922,2928,2935,2940],{},[287,2923,2924,2925,328],{},"Learn how to build multi-level menus in ",[293,2926,2927],{"href":71},"Build Nested Menus",[287,2929,2930,2931,2934],{},"Read the ",[293,2932,2933],{"href":223},"useRovingFocus API"," reference.",[287,2936,2930,2937,2934],{},[293,2938,2939],{"href":227},"useAriaActivedescendant API",[287,2941,2930,2942,2934],{},[293,2943,2944],{"href":231},"useTypeahead API",[2946,2947,2948],"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 .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}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 .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);}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}",{"title":417,"searchDepth":457,"depth":457,"links":2950},[2951,2952,2956,2960,2963],{"id":355,"depth":457,"text":356},{"id":390,"depth":457,"text":391,"children":2953},[2954,2955],{"id":409,"depth":493,"text":410},{"id":1127,"depth":493,"text":1128},{"id":1402,"depth":457,"text":1403,"children":2957},[2958,2959],{"id":1411,"depth":493,"text":410},{"id":2274,"depth":493,"text":1128},{"id":2584,"depth":457,"text":2585,"children":2961},[2962],{"id":2796,"depth":493,"text":2797},{"id":2918,"depth":457,"text":2919},"Add keyboard navigation to floating menus, dropdowns, and nested tree structures.","md",null,{},{"title":106,"description":2964},"m2Y81a8IJL4jKRnPNyW0A4IAO5UWSBbrLuU5Ct-oP0A",[2971,2973],{"title":102,"path":103,"stem":104,"description":2972,"children":-1},"Choose the right focus behavior for anchored and floating UI.",{"title":116,"path":117,"stem":118,"description":2974,"children":-1},"Choose between controlled and uncontrolled open state patterns.",1791046165701]