[{"data":1,"prerenderedAt":1819},["ShallowReactive",2],{"navigation_docs":3,"-guide-accessibility-aria-and-semantics":226,"-guide-accessibility-aria-and-semantics-surround":1814},[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":75,"body":228,"description":1808,"extension":1809,"links":1810,"meta":1811,"navigation":925,"path":76,"seo":1812,"stem":77,"__hash__":1813},"docs\u002F1.guide\u002F4.accessibility\u002F1.aria-and-semantics.md",{"type":229,"value":230,"toc":1796},"minimark",[231,240,243,254,259,262,388,392,395,507,518,522,531,579,584,587,593,693,698,758,765,768,780,785,1633,1639,1702,1706,1711,1749,1753,1768,1772,1792],[232,233,234,235,239],"p",{},"Floating surfaces are frequently teleported or mounted at the end of the ",[236,237,238],"code",{},"\u003Cbody>"," element to escape overflow clipping and stacking contexts.",[232,241,242],{},"While this solves CSS layout constraints, it severs the DOM relationship between the trigger button and the floating surface. Sighted users see a dropdown directly underneath its button, but assistive technologies (such as screen readers) have no hierarchical parent-child connection to follow.",[232,244,245,246,253],{},"To make floating interfaces accessible, you must bridge this gap using standard ",[247,248,252],"a",{"href":249,"rel":250},"https:\u002F\u002Fwww.w3.org\u002FTR\u002Fwai-aria-1.2\u002F",[251],"nofollow","W3C WAI-ARIA"," roles, states, and properties.",[255,256,258],"h2",{"id":257},"the-semantic-contract","The semantic contract",[232,260,261],{},"A complete floating interface connects the trigger, the surface container, and the internal items through three layers of attributes:",[263,264,265,297,356],"ol",{},[266,267,268,272,273,280,281,288,289,296],"li",{},[269,270,271],"strong",{},"Trigger state:"," Informs the user what kind of surface will open (",[247,274,277],{"href":275,"rel":276},"https:\u002F\u002Fwww.w3.org\u002FTR\u002Fwai-aria-1.2\u002F#aria-haspopup",[251],[236,278,279],{},"aria-haspopup","), whether it is currently visible (",[247,282,285],{"href":283,"rel":284},"https:\u002F\u002Fwww.w3.org\u002FTR\u002Fwai-aria-1.2\u002F#aria-expanded",[251],[236,286,287],{},"aria-expanded","), and the ID of the controlled panel (",[247,290,293],{"href":291,"rel":292},"https:\u002F\u002Fwww.w3.org\u002FTR\u002Fwai-aria-1.2\u002F#aria-controls",[251],[236,294,295],{},"aria-controls",").",[266,298,299,302,303,310,311,310,318,310,325,332,333,340,341,348,349,296],{},[269,300,301],{},"Surface container:"," Declares the purpose of the container (",[247,304,307],{"href":305,"rel":306},"https:\u002F\u002Fwww.w3.org\u002FTR\u002Fwai-aria-1.2\u002F#menu",[251],[236,308,309],{},"role=\"menu\"",", ",[247,312,315],{"href":313,"rel":314},"https:\u002F\u002Fwww.w3.org\u002FTR\u002Fwai-aria-1.2\u002F#listbox",[251],[236,316,317],{},"role=\"listbox\"",[247,319,322],{"href":320,"rel":321},"https:\u002F\u002Fwww.w3.org\u002FTR\u002Fwai-aria-1.2\u002F#dialog",[251],[236,323,324],{},"role=\"dialog\"",[247,326,329],{"href":327,"rel":328},"https:\u002F\u002Fwww.w3.org\u002FTR\u002Fwai-aria-1.2\u002F#tooltip",[251],[236,330,331],{},"role=\"tooltip\"","), whether it is modal (",[247,334,337],{"href":335,"rel":336},"https:\u002F\u002Fwww.w3.org\u002FTR\u002Fwai-aria-1.2\u002F#aria-modal",[251],[236,338,339],{},"aria-modal=\"true\"","), and its accessible name (",[247,342,345],{"href":343,"rel":344},"https:\u002F\u002Fwww.w3.org\u002FTR\u002Fwai-aria-1.2\u002F#aria-labelledby",[251],[236,346,347],{},"aria-labelledby"," or ",[247,350,353],{"href":351,"rel":352},"https:\u002F\u002Fwww.w3.org\u002FTR\u002Fwai-aria-1.2\u002F#aria-label",[251],[236,354,355],{},"aria-label",[266,357,358,361,362,310,369,376,377,310,380,383,384,387],{},[269,359,360],{},"Internal items:"," Identifies interactive elements within lists (",[247,363,366],{"href":364,"rel":365},"https:\u002F\u002Fwww.w3.org\u002FTR\u002Fwai-aria-1.2\u002F#menuitem",[251],[236,367,368],{},"role=\"menuitem\"",[247,370,373],{"href":371,"rel":372},"https:\u002F\u002Fwww.w3.org\u002FTR\u002Fwai-aria-1.2\u002F#option",[251],[236,374,375],{},"role=\"option\"","), along with dynamic states such as ",[236,378,379],{},"aria-disabled",[236,381,382],{},"aria-checked",", or ",[236,385,386],{},"aria-selected",".",[255,389,391],{"id":390},"trigger-attributes","Trigger attributes",[232,393,394],{},"The anchor button requires attributes that describe the disclosure lifecycle:",[396,397,398,414],"table",{},[399,400,401],"thead",{},[402,403,404,408,411],"tr",{},[405,406,407],"th",{},"Attribute",[405,409,410],{},"Purpose",[405,412,413],{},"When to use",[415,416,417,448,469,488],"tbody",{},[402,418,419,427,445],{},[420,421,422],"td",{},[247,423,425],{"href":275,"rel":424},[251],[236,426,279],{},[420,428,429,430,310,433,310,436,310,439,383,442,387],{},"Signals that activating the element reveals a popup. Values include ",[236,431,432],{},"\"menu\"",[236,434,435],{},"\"listbox\"",[236,437,438],{},"\"tree\"",[236,440,441],{},"\"grid\"",[236,443,444],{},"\"dialog\"",[420,446,447],{},"All popup triggers (menus, select pickers, dialog triggers).",[402,449,450,457,466],{},[420,451,452],{},[247,453,455],{"href":283,"rel":454},[251],[236,456,287],{},[420,458,459,460,348,463,296],{},"Communicates whether the popup is currently visible (",[236,461,462],{},"\"true\"",[236,464,465],{},"\"false\"",[420,467,468],{},"All popup triggers except simple tooltips.",[402,470,471,478,485],{},[420,472,473],{},[247,474,476],{"href":291,"rel":475},[251],[236,477,295],{},[420,479,480,481,484],{},"Points to the ",[236,482,483],{},"id"," of the floating surface element.",[420,486,487],{},"Menus, popups, and comboboxes.",[402,489,490,499,502],{},[420,491,492],{},[247,493,496],{"href":494,"rel":495},"https:\u002F\u002Fwww.w3.org\u002FTR\u002Fwai-aria-1.2\u002F#aria-describedby",[251],[236,497,498],{},"aria-describedby",[420,500,501],{},"References an element that provides supplementary descriptive text.",[420,503,504,505,296],{},"Informational tooltips (",[236,506,331],{},[232,508,509,510,512,513,348,515,517],{},"For tooltips, use ",[236,511,498],{}," on the trigger instead of ",[236,514,287],{},[236,516,295],{},". A tooltip does not open an interactive popup: it describes the anchor.",[255,519,521],{"id":520},"surface-roles-and-accessible-naming","Surface roles and accessible naming",[232,523,524,525,530],{},"Every floating surface container needs an explicit role and an accessible name according to the ",[247,526,529],{"href":527,"rel":528},"https:\u002F\u002Fwww.w3.org\u002FWAI\u002FARIA\u002Fapg\u002F",[251],"WAI-ARIA Authoring Practices Guide (APG)",":",[532,533,534,546,557,568],"ul",{},[266,535,536,545],{},[269,537,538,539,544],{},"Menus (",[247,540,542],{"href":305,"rel":541},[251],[236,543,309],{},"):"," For lists of actions or commands (such as \"Edit\", \"Duplicate\", \"Delete\").",[266,547,548,556],{},[269,549,550,551,544],{},"Listboxes (",[247,552,554],{"href":313,"rel":553},[251],[236,555,317],{}," For lists of selectable options (such as form selects and autocomplete suggestion pickers).",[266,558,559,567],{},[269,560,561,562,544],{},"Dialogs (",[247,563,565],{"href":320,"rel":564},[251],[236,566,324],{}," For interactive overlays containing forms, alerts, or multistep workflows.",[266,569,570,578],{},[269,571,572,573,544],{},"Tooltips (",[247,574,576],{"href":327,"rel":575},[251],[236,577,331],{}," For non-interactive descriptions that clarify the purpose of an ambiguous control.",[580,581,583],"h3",{"id":582},"labeling-dialogs-and-surfaces","Labeling dialogs and surfaces",[232,585,586],{},"Screen readers announce a surface container using its accessible name when focus enters.",[232,588,589,590,592],{},"Provide an accessible name using ",[236,591,347],{}," pointing to a heading element inside the surface:",[594,595,600],"pre",{"className":596,"code":597,"language":598,"meta":599,"style":599},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cdiv id=\"settings-dialog\" role=\"dialog\" aria-labelledby=\"dialog-title\" aria-modal=\"true\">\n  \u003Ch2 id=\"dialog-title\">Workspace Settings\u003C\u002Fh2>\n  \u003C!-- Dialog content -->\n\u003C\u002Fdiv>\n","vue","",[236,601,602,670,677,683],{"__ignoreMap":599},[603,604,607,611,615,619,622,625,629,631,634,636,638,641,643,646,648,650,653,655,658,660,662,665,667],"span",{"class":605,"line":606},"line",1,[603,608,610],{"class":609},"sMK4o","\u003C",[603,612,614],{"class":613},"swJcz","div",[603,616,618],{"class":617},"spNyl"," id",[603,620,621],{"class":609},"=",[603,623,624],{"class":609},"\"",[603,626,628],{"class":627},"sfazB","settings-dialog",[603,630,624],{"class":609},[603,632,633],{"class":617}," role",[603,635,621],{"class":609},[603,637,624],{"class":609},[603,639,640],{"class":627},"dialog",[603,642,624],{"class":609},[603,644,645],{"class":617}," aria-labelledby",[603,647,621],{"class":609},[603,649,624],{"class":609},[603,651,652],{"class":627},"dialog-title",[603,654,624],{"class":609},[603,656,657],{"class":617}," aria-modal",[603,659,621],{"class":609},[603,661,624],{"class":609},[603,663,664],{"class":627},"true",[603,666,624],{"class":609},[603,668,669],{"class":609},">\n",[603,671,673],{"class":605,"line":672},2,[603,674,676],{"class":675},"sTEyZ","  \u003Ch2 id=\"dialog-title\">Workspace Settings\u003C\u002Fh2>\n",[603,678,680],{"class":605,"line":679},3,[603,681,682],{"class":675},"  \u003C!-- Dialog content -->\n",[603,684,686,689,691],{"class":605,"line":685},4,[603,687,688],{"class":609},"\u003C\u002F",[603,690,614],{"class":613},[603,692,669],{"class":609},[232,694,695,696,530],{},"If the surface has no visible heading, provide a concise name directly via ",[236,697,355],{},[594,699,701],{"className":596,"code":700,"language":598,"meta":599,"style":599},"\u003Cdiv id=\"quick-actions\" role=\"menu\" aria-label=\"Quick actions\">\n  \u003C!-- Menu items -->\n\u003C\u002Fdiv>\n",[236,702,703,745,750],{"__ignoreMap":599},[603,704,705,707,709,711,713,715,718,720,722,724,726,729,731,734,736,738,741,743],{"class":605,"line":606},[603,706,610],{"class":609},[603,708,614],{"class":613},[603,710,618],{"class":617},[603,712,621],{"class":609},[603,714,624],{"class":609},[603,716,717],{"class":627},"quick-actions",[603,719,624],{"class":609},[603,721,633],{"class":617},[603,723,621],{"class":609},[603,725,624],{"class":609},[603,727,728],{"class":627},"menu",[603,730,624],{"class":609},[603,732,733],{"class":617}," aria-label",[603,735,621],{"class":609},[603,737,624],{"class":609},[603,739,740],{"class":627},"Quick actions",[603,742,624],{"class":609},[603,744,669],{"class":609},[603,746,747],{"class":605,"line":672},[603,748,749],{"class":675},"  \u003C!-- Menu items -->\n",[603,751,752,754,756],{"class":605,"line":679},[603,753,688],{"class":609},[603,755,614],{"class":613},[603,757,669],{"class":609},[255,759,761,762],{"id":760},"automating-semantics-with-userole","Automating semantics with ",[236,763,764],{},"useRole()",[232,766,767],{},"Manually generating unique element IDs and synchronizing attributes across triggers and items adds boilerplate.",[232,769,770,771,775,776,779],{},"VFloat provides ",[247,772,773],{"href":169},[236,774,168],{}," to automate this contract. It monitors ",[236,777,778],{},"node.open"," and dynamically synchronizes ARIA attributes on both elements.",[232,781,782,783,530],{},"Here is a menu component using ",[236,784,168],{},[594,786,788],{"className":596,"code":787,"language":598,"meta":599,"style":599},"\u003Cscript setup lang=\"ts\">\nimport { ref, shallowRef } from \"vue\";\nimport {\n  useClick,\n  useEscapeKey,\n  useFloatingNode,\n  useOutsideClick,\n  usePosition,\n  useRole,\n} from \"v-float\";\n\ninterface ActionItem {\n  id: string;\n  label: string;\n  disabled?: boolean;\n}\n\nconst items = ref\u003CActionItem[]>([\n  { id: \"duplicate\", label: \"Duplicate\" },\n  { id: \"archive\", label: \"Archive\", 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, { placement: \"bottom-start\" });\n\nuseClick(node);\nuseOutsideClick(node);\nuseEscapeKey(node);\n\n\u002F\u002F Synchronize ARIA roles and relationships automatically\nuseRole(node, {\n  role: \"menu\",\n  listRef: itemEls,\n  disabledIndices: (index) => !!items.value[index]?.disabled,\n});\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cbutton ref=\"anchorEl\" type=\"button\">Actions\u003C\u002Fbutton>\n\n  \u003Cul v-if=\"node.open.value\" ref=\"floatingEl\">\n    \u003Cli\n      v-for=\"(item, index) in items\"\n      :key=\"item.id\"\n      :ref=\"(el) => (itemEls[index] = el as HTMLElement | null)\"\n    >\n      {{ item.label }}\n    \u003C\u002Fli>\n  \u003C\u002Ful>\n\u003C\u002Ftemplate>\n",[236,789,790,814,848,855,863,871,879,887,895,903,920,927,939,952,964,978,984,989,1017,1051,1093,1124,1132,1137,1173,1203,1235,1240,1271,1301,1306,1316,1325,1334,1339,1346,1357,1373,1386,1425,1434,1443,1448,1458,1500,1505,1537,1546,1562,1577,1592,1598,1604,1614,1624],{"__ignoreMap":599},[603,791,792,794,797,800,803,805,807,810,812],{"class":605,"line":606},[603,793,610],{"class":609},[603,795,796],{"class":613},"script",[603,798,799],{"class":617}," setup",[603,801,802],{"class":617}," lang",[603,804,621],{"class":609},[603,806,624],{"class":609},[603,808,809],{"class":627},"ts",[603,811,624],{"class":609},[603,813,669],{"class":609},[603,815,816,820,823,826,829,832,835,838,841,843,845],{"class":605,"line":672},[603,817,819],{"class":818},"s7zQu","import",[603,821,822],{"class":609}," {",[603,824,825],{"class":675}," ref",[603,827,828],{"class":609},",",[603,830,831],{"class":675}," shallowRef",[603,833,834],{"class":609}," }",[603,836,837],{"class":818}," from",[603,839,840],{"class":609}," \"",[603,842,598],{"class":627},[603,844,624],{"class":609},[603,846,847],{"class":609},";\n",[603,849,850,852],{"class":605,"line":679},[603,851,819],{"class":818},[603,853,854],{"class":609}," {\n",[603,856,857,860],{"class":605,"line":685},[603,858,859],{"class":675},"  useClick",[603,861,862],{"class":609},",\n",[603,864,866,869],{"class":605,"line":865},5,[603,867,868],{"class":675},"  useEscapeKey",[603,870,862],{"class":609},[603,872,874,877],{"class":605,"line":873},6,[603,875,876],{"class":675},"  useFloatingNode",[603,878,862],{"class":609},[603,880,882,885],{"class":605,"line":881},7,[603,883,884],{"class":675},"  useOutsideClick",[603,886,862],{"class":609},[603,888,890,893],{"class":605,"line":889},8,[603,891,892],{"class":675},"  usePosition",[603,894,862],{"class":609},[603,896,898,901],{"class":605,"line":897},9,[603,899,900],{"class":675},"  useRole",[603,902,862],{"class":609},[603,904,906,909,911,913,916,918],{"class":605,"line":905},10,[603,907,908],{"class":609},"}",[603,910,837],{"class":818},[603,912,840],{"class":609},[603,914,915],{"class":627},"v-float",[603,917,624],{"class":609},[603,919,847],{"class":609},[603,921,923],{"class":605,"line":922},11,[603,924,926],{"emptyLinePlaceholder":925},true,"\n",[603,928,930,933,937],{"class":605,"line":929},12,[603,931,932],{"class":617},"interface",[603,934,936],{"class":935},"sBMFI"," ActionItem",[603,938,854],{"class":609},[603,940,942,945,947,950],{"class":605,"line":941},13,[603,943,944],{"class":613},"  id",[603,946,530],{"class":609},[603,948,949],{"class":935}," string",[603,951,847],{"class":609},[603,953,955,958,960,962],{"class":605,"line":954},14,[603,956,957],{"class":613},"  label",[603,959,530],{"class":609},[603,961,949],{"class":935},[603,963,847],{"class":609},[603,965,967,970,973,976],{"class":605,"line":966},15,[603,968,969],{"class":613},"  disabled",[603,971,972],{"class":609},"?:",[603,974,975],{"class":935}," boolean",[603,977,847],{"class":609},[603,979,981],{"class":605,"line":980},16,[603,982,983],{"class":609},"}\n",[603,985,987],{"class":605,"line":986},17,[603,988,926],{"emptyLinePlaceholder":925},[603,990,992,995,998,1000,1003,1005,1008,1011,1014],{"class":605,"line":991},18,[603,993,994],{"class":617},"const",[603,996,997],{"class":675}," items ",[603,999,621],{"class":609},[603,1001,825],{"class":1002},"s2Zo4",[603,1004,610],{"class":609},[603,1006,1007],{"class":935},"ActionItem",[603,1009,1010],{"class":675},"[]",[603,1012,1013],{"class":609},">",[603,1015,1016],{"class":675},"([\n",[603,1018,1020,1023,1025,1027,1029,1032,1034,1036,1039,1041,1043,1046,1048],{"class":605,"line":1019},19,[603,1021,1022],{"class":609},"  {",[603,1024,618],{"class":613},[603,1026,530],{"class":609},[603,1028,840],{"class":609},[603,1030,1031],{"class":627},"duplicate",[603,1033,624],{"class":609},[603,1035,828],{"class":609},[603,1037,1038],{"class":613}," label",[603,1040,530],{"class":609},[603,1042,840],{"class":609},[603,1044,1045],{"class":627},"Duplicate",[603,1047,624],{"class":609},[603,1049,1050],{"class":609}," },\n",[603,1052,1054,1056,1058,1060,1062,1065,1067,1069,1071,1073,1075,1078,1080,1082,1085,1087,1091],{"class":605,"line":1053},20,[603,1055,1022],{"class":609},[603,1057,618],{"class":613},[603,1059,530],{"class":609},[603,1061,840],{"class":609},[603,1063,1064],{"class":627},"archive",[603,1066,624],{"class":609},[603,1068,828],{"class":609},[603,1070,1038],{"class":613},[603,1072,530],{"class":609},[603,1074,840],{"class":609},[603,1076,1077],{"class":627},"Archive",[603,1079,624],{"class":609},[603,1081,828],{"class":609},[603,1083,1084],{"class":613}," disabled",[603,1086,530],{"class":609},[603,1088,1090],{"class":1089},"sfNiH"," true",[603,1092,1050],{"class":609},[603,1094,1096,1098,1100,1102,1104,1107,1109,1111,1113,1115,1117,1120,1122],{"class":605,"line":1095},21,[603,1097,1022],{"class":609},[603,1099,618],{"class":613},[603,1101,530],{"class":609},[603,1103,840],{"class":609},[603,1105,1106],{"class":627},"delete",[603,1108,624],{"class":609},[603,1110,828],{"class":609},[603,1112,1038],{"class":613},[603,1114,530],{"class":609},[603,1116,840],{"class":609},[603,1118,1119],{"class":627},"Delete",[603,1121,624],{"class":609},[603,1123,1050],{"class":609},[603,1125,1127,1130],{"class":605,"line":1126},22,[603,1128,1129],{"class":675},"])",[603,1131,847],{"class":609},[603,1133,1135],{"class":605,"line":1134},23,[603,1136,926],{"emptyLinePlaceholder":925},[603,1138,1140,1142,1145,1147,1149,1151,1154,1157,1160,1162,1165,1168,1171],{"class":605,"line":1139},24,[603,1141,994],{"class":617},[603,1143,1144],{"class":675}," anchorEl ",[603,1146,621],{"class":609},[603,1148,825],{"class":1002},[603,1150,610],{"class":609},[603,1152,1153],{"class":935},"HTMLElement",[603,1155,1156],{"class":609}," |",[603,1158,1159],{"class":935}," null",[603,1161,1013],{"class":609},[603,1163,1164],{"class":675},"(",[603,1166,1167],{"class":609},"null",[603,1169,1170],{"class":675},")",[603,1172,847],{"class":609},[603,1174,1176,1178,1181,1183,1185,1187,1189,1191,1193,1195,1197,1199,1201],{"class":605,"line":1175},25,[603,1177,994],{"class":617},[603,1179,1180],{"class":675}," floatingEl ",[603,1182,621],{"class":609},[603,1184,825],{"class":1002},[603,1186,610],{"class":609},[603,1188,1153],{"class":935},[603,1190,1156],{"class":609},[603,1192,1159],{"class":935},[603,1194,1013],{"class":609},[603,1196,1164],{"class":675},[603,1198,1167],{"class":609},[603,1200,1170],{"class":675},[603,1202,847],{"class":609},[603,1204,1206,1208,1211,1213,1215,1217,1219,1221,1223,1225,1228,1230,1233],{"class":605,"line":1205},26,[603,1207,994],{"class":617},[603,1209,1210],{"class":675}," itemEls ",[603,1212,621],{"class":609},[603,1214,831],{"class":1002},[603,1216,610],{"class":609},[603,1218,1164],{"class":675},[603,1220,1153],{"class":935},[603,1222,1156],{"class":609},[603,1224,1159],{"class":935},[603,1226,1227],{"class":675},")[]",[603,1229,1013],{"class":609},[603,1231,1232],{"class":675},"([])",[603,1234,847],{"class":609},[603,1236,1238],{"class":605,"line":1237},27,[603,1239,926],{"emptyLinePlaceholder":925},[603,1241,1243,1245,1248,1250,1253,1255,1258,1261,1263,1265,1267,1269],{"class":605,"line":1242},28,[603,1244,994],{"class":617},[603,1246,1247],{"class":675}," node ",[603,1249,621],{"class":609},[603,1251,1252],{"class":1002}," useFloatingNode",[603,1254,1164],{"class":675},[603,1256,1257],{"class":609},"{",[603,1259,1260],{"class":675}," anchorEl",[603,1262,828],{"class":609},[603,1264,1180],{"class":675},[603,1266,908],{"class":609},[603,1268,1170],{"class":675},[603,1270,847],{"class":609},[603,1272,1274,1276,1279,1281,1283,1286,1288,1290,1293,1295,1297,1299],{"class":605,"line":1273},29,[603,1275,126],{"class":1002},[603,1277,1278],{"class":675},"(node",[603,1280,828],{"class":609},[603,1282,822],{"class":609},[603,1284,1285],{"class":613}," placement",[603,1287,530],{"class":609},[603,1289,840],{"class":609},[603,1291,1292],{"class":627},"bottom-start",[603,1294,624],{"class":609},[603,1296,834],{"class":609},[603,1298,1170],{"class":675},[603,1300,847],{"class":609},[603,1302,1304],{"class":605,"line":1303},30,[603,1305,926],{"emptyLinePlaceholder":925},[603,1307,1309,1311,1314],{"class":605,"line":1308},31,[603,1310,144],{"class":1002},[603,1312,1313],{"class":675},"(node)",[603,1315,847],{"class":609},[603,1317,1319,1321,1323],{"class":605,"line":1318},32,[603,1320,160],{"class":1002},[603,1322,1313],{"class":675},[603,1324,847],{"class":609},[603,1326,1328,1330,1332],{"class":605,"line":1327},33,[603,1329,164],{"class":1002},[603,1331,1313],{"class":675},[603,1333,847],{"class":609},[603,1335,1337],{"class":605,"line":1336},34,[603,1338,926],{"emptyLinePlaceholder":925},[603,1340,1342],{"class":605,"line":1341},35,[603,1343,1345],{"class":1344},"sHwdD","\u002F\u002F Synchronize ARIA roles and relationships automatically\n",[603,1347,1349,1351,1353,1355],{"class":605,"line":1348},36,[603,1350,168],{"class":1002},[603,1352,1278],{"class":675},[603,1354,828],{"class":609},[603,1356,854],{"class":609},[603,1358,1360,1363,1365,1367,1369,1371],{"class":605,"line":1359},37,[603,1361,1362],{"class":613},"  role",[603,1364,530],{"class":609},[603,1366,840],{"class":609},[603,1368,728],{"class":627},[603,1370,624],{"class":609},[603,1372,862],{"class":609},[603,1374,1376,1379,1381,1384],{"class":605,"line":1375},38,[603,1377,1378],{"class":613},"  listRef",[603,1380,530],{"class":609},[603,1382,1383],{"class":675}," itemEls",[603,1385,862],{"class":609},[603,1387,1389,1392,1394,1397,1401,1403,1406,1409,1412,1414,1417,1420,1423],{"class":605,"line":1388},39,[603,1390,1391],{"class":1002},"  disabledIndices",[603,1393,530],{"class":609},[603,1395,1396],{"class":609}," (",[603,1398,1400],{"class":1399},"sHdIc","index",[603,1402,1170],{"class":609},[603,1404,1405],{"class":617}," =>",[603,1407,1408],{"class":609}," !!",[603,1410,1411],{"class":675},"items",[603,1413,387],{"class":609},[603,1415,1416],{"class":675},"value[index]",[603,1418,1419],{"class":609},"?.",[603,1421,1422],{"class":675},"disabled",[603,1424,862],{"class":609},[603,1426,1428,1430,1432],{"class":605,"line":1427},40,[603,1429,908],{"class":609},[603,1431,1170],{"class":675},[603,1433,847],{"class":609},[603,1435,1437,1439,1441],{"class":605,"line":1436},41,[603,1438,688],{"class":609},[603,1440,796],{"class":613},[603,1442,669],{"class":609},[603,1444,1446],{"class":605,"line":1445},42,[603,1447,926],{"emptyLinePlaceholder":925},[603,1449,1451,1453,1456],{"class":605,"line":1450},43,[603,1452,610],{"class":609},[603,1454,1455],{"class":613},"template",[603,1457,669],{"class":609},[603,1459,1461,1464,1467,1469,1471,1473,1476,1478,1481,1483,1485,1487,1489,1491,1494,1496,1498],{"class":605,"line":1460},44,[603,1462,1463],{"class":609},"  \u003C",[603,1465,1466],{"class":613},"button",[603,1468,825],{"class":617},[603,1470,621],{"class":609},[603,1472,624],{"class":609},[603,1474,1475],{"class":627},"anchorEl",[603,1477,624],{"class":609},[603,1479,1480],{"class":617}," type",[603,1482,621],{"class":609},[603,1484,624],{"class":609},[603,1486,1466],{"class":627},[603,1488,624],{"class":609},[603,1490,1013],{"class":609},[603,1492,1493],{"class":675},"Actions",[603,1495,688],{"class":609},[603,1497,1466],{"class":613},[603,1499,669],{"class":609},[603,1501,1503],{"class":605,"line":1502},45,[603,1504,926],{"emptyLinePlaceholder":925},[603,1506,1508,1510,1512,1515,1517,1519,1522,1524,1526,1528,1530,1533,1535],{"class":605,"line":1507},46,[603,1509,1463],{"class":609},[603,1511,532],{"class":613},[603,1513,1514],{"class":617}," v-if",[603,1516,621],{"class":609},[603,1518,624],{"class":609},[603,1520,1521],{"class":627},"node.open.value",[603,1523,624],{"class":609},[603,1525,825],{"class":617},[603,1527,621],{"class":609},[603,1529,624],{"class":609},[603,1531,1532],{"class":627},"floatingEl",[603,1534,624],{"class":609},[603,1536,669],{"class":609},[603,1538,1540,1543],{"class":605,"line":1539},47,[603,1541,1542],{"class":609},"    \u003C",[603,1544,1545],{"class":613},"li\n",[603,1547,1549,1552,1554,1556,1559],{"class":605,"line":1548},48,[603,1550,1551],{"class":617},"      v-for",[603,1553,621],{"class":609},[603,1555,624],{"class":609},[603,1557,1558],{"class":627},"(item, index) in items",[603,1560,1561],{"class":609},"\"\n",[603,1563,1565,1568,1570,1572,1575],{"class":605,"line":1564},49,[603,1566,1567],{"class":617},"      :key",[603,1569,621],{"class":609},[603,1571,624],{"class":609},[603,1573,1574],{"class":627},"item.id",[603,1576,1561],{"class":609},[603,1578,1580,1583,1585,1587,1590],{"class":605,"line":1579},50,[603,1581,1582],{"class":617},"      :ref",[603,1584,621],{"class":609},[603,1586,624],{"class":609},[603,1588,1589],{"class":627},"(el) => (itemEls[index] = el as HTMLElement | null)",[603,1591,1561],{"class":609},[603,1593,1595],{"class":605,"line":1594},51,[603,1596,1597],{"class":609},"    >\n",[603,1599,1601],{"class":605,"line":1600},52,[603,1602,1603],{"class":675},"      {{ item.label }}\n",[603,1605,1607,1610,1612],{"class":605,"line":1606},53,[603,1608,1609],{"class":609},"    \u003C\u002F",[603,1611,266],{"class":613},[603,1613,669],{"class":609},[603,1615,1617,1620,1622],{"class":605,"line":1616},54,[603,1618,1619],{"class":609},"  \u003C\u002F",[603,1621,532],{"class":613},[603,1623,669],{"class":609},[603,1625,1627,1629,1631],{"class":605,"line":1626},55,[603,1628,688],{"class":609},[603,1630,1455],{"class":613},[603,1632,669],{"class":609},[232,1634,1635,1636,1638],{},"When this component runs, ",[236,1637,168],{}," performs the following coordination automatically:",[263,1640,1641,1647,1660,1674,1680,1690,1699],{},[266,1642,1643,1644,296],{},"Generates an auto-incremented ID on the floating list if none exists (using Vue's native ",[236,1645,1646],{},"useId",[266,1648,1649,1650,310,1653,1656,1657,1659],{},"Applies ",[236,1651,1652],{},"aria-haspopup=\"menu\"",[236,1654,1655],{},"aria-expanded=\"false\"",", and ",[236,1658,295],{}," to the anchor button.",[266,1661,1662,1663,1665,1666,1668,1669,1671,1672,387],{},"Flips ",[236,1664,287],{}," to ",[236,1667,462],{}," whenever ",[236,1670,1521],{}," becomes ",[236,1673,664],{},[266,1675,1676,1677,1679],{},"Sets ",[236,1678,309],{}," on the floating element.",[266,1681,1682,1683,1686,1687,1689],{},"Traverses ",[236,1684,1685],{},"listRef"," to set ",[236,1688,368],{}," on every item.",[266,1691,1676,1692,1695,1696,387],{},[236,1693,1694],{},"aria-disabled=\"true\""," on items matching ",[236,1697,1698],{},"disabledIndices",[266,1700,1701],{},"Restores all original DOM attributes when the composable unmounts or disables.",[255,1703,1705],{"id":1704},"the-responsibility-boundary","The responsibility boundary",[232,1707,1708,1710],{},[236,1709,168],{}," handles dynamic attribute coordination, but your template markup owns static document semantics:",[532,1712,1713,1727,1739],{},[266,1714,1715,1718,1719,1722,1723,1726],{},[269,1716,1717],{},"Semantic HTML elements:"," Use ",[236,1720,1721],{},"\u003Cbutton type=\"button\">"," for triggers rather than ",[236,1724,1725],{},"\u003Cdiv @click>",". Native buttons provide keyboard activation via Space and Enter for free.",[266,1728,1729,1732,1733,1735,1736,296],{},[269,1730,1731],{},"Accessible trigger names:"," If a button contains only an icon, provide an ",[236,1734,355],{}," directly on the button element (such as ",[236,1737,1738],{},"aria-label=\"More options\"",[266,1740,1741,1744,1745,1748],{},[269,1742,1743],{},"Visible headings:"," For dialogs, create a visible header and pass its ID via ",[236,1746,1747],{},"labelledBy"," so screen readers announce the dialog title immediately on open.",[255,1750,1752],{"id":1751},"official-specifications","Official specifications",[532,1754,1755,1762],{},[266,1756,1757,1761],{},[247,1758,1760],{"href":249,"rel":1759},[251],"W3C WAI-ARIA 1.2 Specification",": Canonical technical definitions for roles, states, and properties.",[266,1763,1764,1767],{},[247,1765,529],{"href":527,"rel":1766},[251],": Recommended interaction and markup patterns for accessible web components.",[255,1769,1771],{"id":1770},"where-to-go-next","Where to go next",[532,1773,1774,1779,1784],{},[266,1775,1776,1778],{},[247,1777,79],{"href":80},": Learn how to manage focus placement, trapping, and return restoration.",[266,1780,1781,1783],{},[247,1782,83],{"href":84},": Implement accessible roving tabindex and virtual focus patterns.",[266,1785,1786,1791],{},[247,1787,1788,1790],{"href":169},[236,1789,168],{}," API",": Full options, type definitions, and parameter references.",[1793,1794,1795],"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 .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .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}",{"title":599,"searchDepth":672,"depth":672,"links":1797},[1798,1799,1800,1803,1805,1806,1807],{"id":257,"depth":672,"text":258},{"id":390,"depth":672,"text":391},{"id":520,"depth":672,"text":521,"children":1801},[1802],{"id":582,"depth":679,"text":583},{"id":760,"depth":672,"text":1804},"Automating semantics with useRole()",{"id":1704,"depth":672,"text":1705},{"id":1751,"depth":672,"text":1752},{"id":1770,"depth":672,"text":1771},"Connect anchors and floating surfaces with ARIA roles, states, and accessibility relationships.","md",null,{},{"title":75,"description":1808},"M2jroObL0NfJ-pHRp-k1qfgA1yeJiMUnDt_kF4pdu3c",[1815,1817],{"title":65,"path":66,"stem":67,"description":1816,"children":-1},"Animate floating elements with Vue transitions and CSS without layout jumps or origin flashes.",{"title":79,"path":80,"stem":81,"description":1818,"children":-1},"Orchestrate focus placement, containment, background isolation, and return restoration for floating surfaces.",1791268049047]