[{"data":1,"prerenderedAt":1830},["ShallowReactive",2],{"navigation_docs":3,"-api-positioning-use-arrow":271,"-api-positioning-use-arrow-surround":1825},[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":175,"body":273,"description":1819,"extension":1820,"links":1821,"meta":1822,"navigation":377,"path":176,"seo":1823,"stem":177,"__hash__":1824},"docs\u002F2.api\u002F3.positioning\u002F2.use-arrow.md",{"type":274,"value":275,"toc":1806},"minimark",[276,297,309,314,631,635,727,731,807,811,816,833,836,840,857,880,967,977,981,985,1768,1772,1803],[277,278,279,282,283,286,287,286,290,286,293,296],"p",{},[280,281,175],"code",{}," connects an arrow element to a floating node, registers arrow positioning into the node's middleware pipeline, computes physical inset styles (",[280,284,285],{},"top",", ",[280,288,289],{},"bottom",[280,291,292],{},"left",[280,294,295],{},"right","), and automatically applies them to the arrow DOM element.",[277,298,299,300,302,303,308],{},"Use ",[280,301,175],{}," instead of the low-level ",[304,305,306],"a",{"href":265},[280,307,264],{}," middleware when you want automated middleware registration, automatic DOM style synchronization, and scope cleanup.",[310,311,313],"h2",{"id":312},"type","Type",[315,316,321],"pre",{"className":317,"code":318,"language":319,"meta":320,"style":320},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","function useArrow(node: FloatingNode, options?: UseArrowOptions): UseArrowReturn;\n\ntype ApplyArrowStylesFn = (\n  element: HTMLElement,\n  styles: Record\u003Cstring, string>,\n) => void | (() => void);\n\ninterface UseArrowOptions {\n  offset?: MaybeRefOrGetter\u003Cstring>;\n  padding?: MaybeRefOrGetter\u003CPadding>;\n  applyStyles?: MaybeRef\u003Cboolean | undefined> | ApplyArrowStylesFn;\n}\n\ninterface UseArrowReturn {\n  arrowX: ComputedRef\u003Cnumber>;\n  arrowY: ComputedRef\u003Cnumber>;\n  arrowStyles: ComputedRef\u003CRecord\u003Cstring, string>>;\n}\n","ts","",[280,322,323,372,379,394,408,433,464,469,480,499,516,546,552,557,566,584,600,626],{"__ignoreMap":320},[324,325,328,332,336,340,344,347,351,354,357,360,363,366,369],"span",{"class":326,"line":327},"line",1,[324,329,331],{"class":330},"spNyl","function",[324,333,335],{"class":334},"s2Zo4"," useArrow",[324,337,339],{"class":338},"sMK4o","(",[324,341,343],{"class":342},"sHdIc","node",[324,345,346],{"class":338},":",[324,348,350],{"class":349},"sBMFI"," FloatingNode",[324,352,353],{"class":338},",",[324,355,356],{"class":342}," options",[324,358,359],{"class":338},"?:",[324,361,362],{"class":349}," UseArrowOptions",[324,364,365],{"class":338},"):",[324,367,368],{"class":349}," UseArrowReturn",[324,370,371],{"class":338},";\n",[324,373,375],{"class":326,"line":374},2,[324,376,378],{"emptyLinePlaceholder":377},true,"\n",[324,380,382,384,387,390],{"class":326,"line":381},3,[324,383,312],{"class":330},[324,385,386],{"class":349}," ApplyArrowStylesFn",[324,388,389],{"class":338}," =",[324,391,393],{"class":392},"sTEyZ"," (\n",[324,395,397,400,402,405],{"class":326,"line":396},4,[324,398,399],{"class":342},"  element",[324,401,346],{"class":338},[324,403,404],{"class":349}," HTMLElement",[324,406,407],{"class":338},",\n",[324,409,411,414,416,419,422,425,427,430],{"class":326,"line":410},5,[324,412,413],{"class":342},"  styles",[324,415,346],{"class":338},[324,417,418],{"class":349}," Record",[324,420,421],{"class":338},"\u003C",[324,423,424],{"class":349},"string",[324,426,353],{"class":338},[324,428,429],{"class":349}," string",[324,431,432],{"class":338},">,\n",[324,434,436,439,442,445,448,451,454,457,459,462],{"class":326,"line":435},6,[324,437,438],{"class":392},") ",[324,440,441],{"class":330},"=>",[324,443,444],{"class":349}," void",[324,446,447],{"class":338}," |",[324,449,450],{"class":392}," (",[324,452,453],{"class":338},"()",[324,455,456],{"class":330}," =>",[324,458,444],{"class":349},[324,460,461],{"class":392},")",[324,463,371],{"class":338},[324,465,467],{"class":326,"line":466},7,[324,468,378],{"emptyLinePlaceholder":377},[324,470,472,475,477],{"class":326,"line":471},8,[324,473,474],{"class":330},"interface",[324,476,362],{"class":349},[324,478,479],{"class":338}," {\n",[324,481,483,487,489,492,494,496],{"class":326,"line":482},9,[324,484,486],{"class":485},"swJcz","  offset",[324,488,359],{"class":338},[324,490,491],{"class":349}," MaybeRefOrGetter",[324,493,421],{"class":338},[324,495,424],{"class":349},[324,497,498],{"class":338},">;\n",[324,500,502,505,507,509,511,514],{"class":326,"line":501},10,[324,503,504],{"class":485},"  padding",[324,506,359],{"class":338},[324,508,491],{"class":349},[324,510,421],{"class":338},[324,512,513],{"class":349},"Padding",[324,515,498],{"class":338},[324,517,519,522,524,527,529,532,534,537,540,542,544],{"class":326,"line":518},11,[324,520,521],{"class":485},"  applyStyles",[324,523,359],{"class":338},[324,525,526],{"class":349}," MaybeRef",[324,528,421],{"class":338},[324,530,531],{"class":349},"boolean",[324,533,447],{"class":338},[324,535,536],{"class":349}," undefined",[324,538,539],{"class":338},">",[324,541,447],{"class":338},[324,543,386],{"class":349},[324,545,371],{"class":338},[324,547,549],{"class":326,"line":548},12,[324,550,551],{"class":338},"}\n",[324,553,555],{"class":326,"line":554},13,[324,556,378],{"emptyLinePlaceholder":377},[324,558,560,562,564],{"class":326,"line":559},14,[324,561,474],{"class":330},[324,563,368],{"class":349},[324,565,479],{"class":338},[324,567,569,572,574,577,579,582],{"class":326,"line":568},15,[324,570,571],{"class":485},"  arrowX",[324,573,346],{"class":338},[324,575,576],{"class":349}," ComputedRef",[324,578,421],{"class":338},[324,580,581],{"class":349},"number",[324,583,498],{"class":338},[324,585,587,590,592,594,596,598],{"class":326,"line":586},16,[324,588,589],{"class":485},"  arrowY",[324,591,346],{"class":338},[324,593,576],{"class":349},[324,595,421],{"class":338},[324,597,581],{"class":349},[324,599,498],{"class":338},[324,601,603,606,608,610,612,615,617,619,621,623],{"class":326,"line":602},17,[324,604,605],{"class":485},"  arrowStyles",[324,607,346],{"class":338},[324,609,576],{"class":349},[324,611,421],{"class":338},[324,613,614],{"class":349},"Record",[324,616,421],{"class":338},[324,618,424],{"class":349},[324,620,353],{"class":338},[324,622,429],{"class":349},[324,624,625],{"class":338},">>;\n",[324,627,629],{"class":326,"line":628},18,[324,630,551],{"class":338},[310,632,634],{"id":633},"options","Options",[636,637,638,656],"table",{},[639,640,641],"thead",{},[642,643,644,648,650,653],"tr",{},[645,646,647],"th",{},"Name",[645,649,313],{},[645,651,652],{},"Default",[645,654,655],{},"Notes",[657,658,659,679,699],"tbody",{},[642,660,661,666,671,676],{},[662,663,664],"td",{},[280,665,240],{},[662,667,668],{},[280,669,670],{},"MaybeRefOrGetter\u003Cstring>",[662,672,673],{},[280,674,675],{},"\"-4px\"",[662,677,678],{},"Gap or overlap between the arrow tip and the floating element edge.",[642,680,681,686,691,696],{},[662,682,683],{},[280,684,685],{},"padding",[662,687,688],{},[280,689,690],{},"MaybeRefOrGetter\u003CPadding>",[662,692,693],{},[280,694,695],{},"0",[662,697,698],{},"Minimum clearance keeping the arrow away from the floating element corners.",[642,700,701,706,711,716],{},[662,702,703],{},[280,704,705],{},"applyStyles",[662,707,708],{},[280,709,710],{},"MaybeRef\u003Cboolean> | ApplyArrowStylesFn",[662,712,713],{},[280,714,715],{},"true",[662,717,718,719,722,723,726],{},"Whether to automatically synchronize positioning styles to ",[280,720,721],{},"node.refs.arrowEl.value.style",". Pass ",[280,724,725],{},"false"," for manual template binding, or a custom applicator function.",[310,728,730],{"id":729},"returns","Returns",[636,732,733,743],{},[639,734,735],{},[642,736,737,739,741],{},[645,738,647],{},[645,740,313],{},[645,742,655],{},[657,744,745,763,779],{},[642,746,747,752,757],{},[662,748,749],{},[280,750,751],{},"arrowX",[662,753,754],{},[280,755,756],{},"ComputedRef\u003Cnumber>",[662,758,759,760,762],{},"Computed horizontal position in pixels. Falls back to ",[280,761,695],{}," before positioning runs.",[642,764,765,770,774],{},[662,766,767],{},[280,768,769],{},"arrowY",[662,771,772],{},[280,773,756],{},[662,775,776,777,762],{},"Computed vertical position in pixels. Falls back to ",[280,778,695],{},[642,780,781,786,791],{},[662,782,783],{},[280,784,785],{},"arrowStyles",[662,787,788],{},[280,789,790],{},"ComputedRef\u003CRecord\u003Cstring, string>>",[662,792,793,794,286,796,286,798,286,800,802,803,806],{},"Computed CSS style object with physical insets (",[280,795,285],{},[280,797,289],{},[280,799,292],{},[280,801,295],{},"). Empty ",[280,804,805],{},"{}"," before positioned.",[310,808,810],{"id":809},"details","Details",[812,813,815],"h3",{"id":814},"automatic-middleware-registration","Automatic Middleware Registration",[277,817,818,819,821,822,826,827,829,830,832],{},"When called, ",[280,820,175],{}," inspects the node's internal middleware registry provided by ",[304,823,824],{"href":172},[280,825,171],{}," and automatically adds the arrow middleware. It works regardless of whether ",[280,828,175],{}," is declared before or after ",[280,831,171],{}," in your setup script.",[277,834,835],{},"The registration is automatically cleaned up when the calling component unmounts.",[812,837,839],{"id":838},"arrow-element-binding-automatic-styling","Arrow Element Binding & Automatic Styling",[277,841,842,844,845,848,849,852,853,856],{},[280,843,175],{}," measures the element stored in ",[280,846,847],{},"node.refs.arrowEl",". Bind ",[280,850,851],{},"ref=\"arrowEl\""," to the arrow tag in your template and pass it into ",[280,854,855],{},"useFloatingNode({ anchorEl, floatingEl, arrowEl })",".",[277,858,859,860,863,864,866,867,286,869,286,871,286,873,875,876,879],{},"By default (",[280,861,862],{},"applyStyles: true","), ",[280,865,175],{}," automatically applies the computed physical insets (",[280,868,285],{},[280,870,289],{},[280,872,292],{},[280,874,295],{},") directly to ",[280,877,878],{},"arrowEl.value.style",". You only need to provide static CSS for the arrow's shape:",[315,881,885],{"className":882,"code":883,"language":884,"meta":320,"style":320},"language-css shiki shiki-themes material-theme-lighter material-theme material-theme-palenight",".tooltip-arrow {\n  position: absolute;\n  width: 8px;\n  height: 8px;\n  background: inherit;\n  transform: rotate(45deg);\n}\n","css",[280,886,887,896,909,922,933,945,963],{"__ignoreMap":320},[324,888,889,891,894],{"class":326,"line":327},[324,890,856],{"class":338},[324,892,893],{"class":349},"tooltip-arrow",[324,895,479],{"class":338},[324,897,898,902,904,907],{"class":326,"line":374},[324,899,901],{"class":900},"sqsOY","  position",[324,903,346],{"class":338},[324,905,906],{"class":392}," absolute",[324,908,371],{"class":338},[324,910,911,914,916,920],{"class":326,"line":381},[324,912,913],{"class":900},"  width",[324,915,346],{"class":338},[324,917,919],{"class":918},"sbssI"," 8px",[324,921,371],{"class":338},[324,923,924,927,929,931],{"class":326,"line":396},[324,925,926],{"class":900},"  height",[324,928,346],{"class":338},[324,930,919],{"class":918},[324,932,371],{"class":338},[324,934,935,938,940,943],{"class":326,"line":410},[324,936,937],{"class":900},"  background",[324,939,346],{"class":338},[324,941,942],{"class":392}," inherit",[324,944,371],{"class":338},[324,946,947,950,952,955,957,960],{"class":326,"line":435},[324,948,949],{"class":900},"  transform",[324,951,346],{"class":338},[324,953,954],{"class":334}," rotate",[324,956,339],{"class":338},[324,958,959],{"class":918},"45deg",[324,961,962],{"class":338},");\n",[324,964,965],{"class":326,"line":466},[324,966,551],{"class":338},[277,968,969,970,973,974,856],{},"If you prefer manual template binding, pass ",[280,971,972],{},"{ applyStyles: false }"," and bind ",[280,975,976],{},":style=\"arrowStyles\"",[310,978,980],{"id":979},"example","Example",[812,982,984],{"id":983},"automatic-arrow-and-position-styling","Automatic Arrow and Position Styling",[315,986,990],{"className":987,"code":988,"language":989,"meta":320,"style":320},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\nimport { ref } from \"vue\";\nimport { useArrow, useFloatingNode, useHover, usePosition } from \"v-float\";\n\nconst anchorEl = ref\u003CHTMLElement | null>(null);\nconst floatingEl = ref\u003CHTMLElement | null>(null);\nconst arrowEl = ref\u003CHTMLElement | null>(null);\n\nconst node = useFloatingNode({ anchorEl, floatingEl, arrowEl });\nconst { placement } = usePosition(node, {\n  placement: \"top\",\n  middlewares: {\n    offset: 8,\n    flip: true,\n    shift: { padding: 6 },\n  },\n});\n\n\u002F\u002F Automatically synchronizes positioning styles onto arrowEl\nuseArrow(node, {\n  offset: \"-4px\",\n  padding: 6,\n});\n\nuseHover(node);\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cbutton ref=\"anchorEl\">Hover me\u003C\u002Fbutton>\n\n  \u003Cdiv v-if=\"node.open\" ref=\"floatingEl\" class=\"tooltip\" :data-placement=\"placement\">\n    \u003Cspan>Tooltip message\u003C\u002Fspan>\n    \u003Cdiv ref=\"arrowEl\" class=\"tooltip-arrow\" \u002F>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cstyle>\n.tooltip {\n  position: relative;\n  background: #222;\n  color: #fff;\n  padding: 6px 10px;\n  border-radius: 4px;\n}\n\n.tooltip-arrow {\n  position: absolute;\n  width: 8px;\n  height: 8px;\n  background: #222;\n  transform: rotate(45deg);\n}\n\u003C\u002Fstyle>\n","vue",[280,991,992,1019,1046,1082,1086,1119,1148,1177,1181,1216,1238,1253,1262,1274,1287,1307,1312,1320,1324,1331,1342,1358,1369,1378,1383,1393,1403,1408,1418,1449,1454,1511,1530,1561,1571,1580,1585,1595,1604,1616,1631,1646,1661,1674,1679,1684,1693,1704,1715,1726,1739,1754,1759],{"__ignoreMap":320},[324,993,994,996,999,1002,1005,1008,1011,1014,1016],{"class":326,"line":327},[324,995,421],{"class":338},[324,997,998],{"class":485},"script",[324,1000,1001],{"class":330}," setup",[324,1003,1004],{"class":330}," lang",[324,1006,1007],{"class":338},"=",[324,1009,1010],{"class":338},"\"",[324,1012,319],{"class":1013},"sfazB",[324,1015,1010],{"class":338},[324,1017,1018],{"class":338},">\n",[324,1020,1021,1025,1028,1031,1034,1037,1040,1042,1044],{"class":326,"line":374},[324,1022,1024],{"class":1023},"s7zQu","import",[324,1026,1027],{"class":338}," {",[324,1029,1030],{"class":392}," ref",[324,1032,1033],{"class":338}," }",[324,1035,1036],{"class":1023}," from",[324,1038,1039],{"class":338}," \"",[324,1041,989],{"class":1013},[324,1043,1010],{"class":338},[324,1045,371],{"class":338},[324,1047,1048,1050,1052,1054,1056,1059,1061,1064,1066,1069,1071,1073,1075,1078,1080],{"class":326,"line":381},[324,1049,1024],{"class":1023},[324,1051,1027],{"class":338},[324,1053,335],{"class":392},[324,1055,353],{"class":338},[324,1057,1058],{"class":392}," useFloatingNode",[324,1060,353],{"class":338},[324,1062,1063],{"class":392}," useHover",[324,1065,353],{"class":338},[324,1067,1068],{"class":392}," usePosition",[324,1070,1033],{"class":338},[324,1072,1036],{"class":1023},[324,1074,1039],{"class":338},[324,1076,1077],{"class":1013},"v-float",[324,1079,1010],{"class":338},[324,1081,371],{"class":338},[324,1083,1084],{"class":326,"line":396},[324,1085,378],{"emptyLinePlaceholder":377},[324,1087,1088,1091,1094,1096,1098,1100,1103,1105,1108,1110,1112,1115,1117],{"class":326,"line":410},[324,1089,1090],{"class":330},"const",[324,1092,1093],{"class":392}," anchorEl ",[324,1095,1007],{"class":338},[324,1097,1030],{"class":334},[324,1099,421],{"class":338},[324,1101,1102],{"class":349},"HTMLElement",[324,1104,447],{"class":338},[324,1106,1107],{"class":349}," null",[324,1109,539],{"class":338},[324,1111,339],{"class":392},[324,1113,1114],{"class":338},"null",[324,1116,461],{"class":392},[324,1118,371],{"class":338},[324,1120,1121,1123,1126,1128,1130,1132,1134,1136,1138,1140,1142,1144,1146],{"class":326,"line":435},[324,1122,1090],{"class":330},[324,1124,1125],{"class":392}," floatingEl ",[324,1127,1007],{"class":338},[324,1129,1030],{"class":334},[324,1131,421],{"class":338},[324,1133,1102],{"class":349},[324,1135,447],{"class":338},[324,1137,1107],{"class":349},[324,1139,539],{"class":338},[324,1141,339],{"class":392},[324,1143,1114],{"class":338},[324,1145,461],{"class":392},[324,1147,371],{"class":338},[324,1149,1150,1152,1155,1157,1159,1161,1163,1165,1167,1169,1171,1173,1175],{"class":326,"line":466},[324,1151,1090],{"class":330},[324,1153,1154],{"class":392}," arrowEl ",[324,1156,1007],{"class":338},[324,1158,1030],{"class":334},[324,1160,421],{"class":338},[324,1162,1102],{"class":349},[324,1164,447],{"class":338},[324,1166,1107],{"class":349},[324,1168,539],{"class":338},[324,1170,339],{"class":392},[324,1172,1114],{"class":338},[324,1174,461],{"class":392},[324,1176,371],{"class":338},[324,1178,1179],{"class":326,"line":471},[324,1180,378],{"emptyLinePlaceholder":377},[324,1182,1183,1185,1188,1190,1192,1194,1197,1200,1202,1205,1207,1209,1212,1214],{"class":326,"line":482},[324,1184,1090],{"class":330},[324,1186,1187],{"class":392}," node ",[324,1189,1007],{"class":338},[324,1191,1058],{"class":334},[324,1193,339],{"class":392},[324,1195,1196],{"class":338},"{",[324,1198,1199],{"class":392}," anchorEl",[324,1201,353],{"class":338},[324,1203,1204],{"class":392}," floatingEl",[324,1206,353],{"class":338},[324,1208,1154],{"class":392},[324,1210,1211],{"class":338},"}",[324,1213,461],{"class":392},[324,1215,371],{"class":338},[324,1217,1218,1220,1222,1225,1227,1229,1231,1234,1236],{"class":326,"line":501},[324,1219,1090],{"class":330},[324,1221,1027],{"class":338},[324,1223,1224],{"class":392}," placement ",[324,1226,1211],{"class":338},[324,1228,389],{"class":338},[324,1230,1068],{"class":334},[324,1232,1233],{"class":392},"(node",[324,1235,353],{"class":338},[324,1237,479],{"class":338},[324,1239,1240,1243,1245,1247,1249,1251],{"class":326,"line":518},[324,1241,1242],{"class":485},"  placement",[324,1244,346],{"class":338},[324,1246,1039],{"class":338},[324,1248,285],{"class":1013},[324,1250,1010],{"class":338},[324,1252,407],{"class":338},[324,1254,1255,1258,1260],{"class":326,"line":548},[324,1256,1257],{"class":485},"  middlewares",[324,1259,346],{"class":338},[324,1261,479],{"class":338},[324,1263,1264,1267,1269,1272],{"class":326,"line":554},[324,1265,1266],{"class":485},"    offset",[324,1268,346],{"class":338},[324,1270,1271],{"class":918}," 8",[324,1273,407],{"class":338},[324,1275,1276,1279,1281,1285],{"class":326,"line":559},[324,1277,1278],{"class":485},"    flip",[324,1280,346],{"class":338},[324,1282,1284],{"class":1283},"sfNiH"," true",[324,1286,407],{"class":338},[324,1288,1289,1292,1294,1296,1299,1301,1304],{"class":326,"line":568},[324,1290,1291],{"class":485},"    shift",[324,1293,346],{"class":338},[324,1295,1027],{"class":338},[324,1297,1298],{"class":485}," padding",[324,1300,346],{"class":338},[324,1302,1303],{"class":918}," 6",[324,1305,1306],{"class":338}," },\n",[324,1308,1309],{"class":326,"line":586},[324,1310,1311],{"class":338},"  },\n",[324,1313,1314,1316,1318],{"class":326,"line":602},[324,1315,1211],{"class":338},[324,1317,461],{"class":392},[324,1319,371],{"class":338},[324,1321,1322],{"class":326,"line":628},[324,1323,378],{"emptyLinePlaceholder":377},[324,1325,1327],{"class":326,"line":1326},19,[324,1328,1330],{"class":1329},"sHwdD","\u002F\u002F Automatically synchronizes positioning styles onto arrowEl\n",[324,1332,1334,1336,1338,1340],{"class":326,"line":1333},20,[324,1335,175],{"class":334},[324,1337,1233],{"class":392},[324,1339,353],{"class":338},[324,1341,479],{"class":338},[324,1343,1345,1347,1349,1351,1354,1356],{"class":326,"line":1344},21,[324,1346,486],{"class":485},[324,1348,346],{"class":338},[324,1350,1039],{"class":338},[324,1352,1353],{"class":1013},"-4px",[324,1355,1010],{"class":338},[324,1357,407],{"class":338},[324,1359,1361,1363,1365,1367],{"class":326,"line":1360},22,[324,1362,504],{"class":485},[324,1364,346],{"class":338},[324,1366,1303],{"class":918},[324,1368,407],{"class":338},[324,1370,1372,1374,1376],{"class":326,"line":1371},23,[324,1373,1211],{"class":338},[324,1375,461],{"class":392},[324,1377,371],{"class":338},[324,1379,1381],{"class":326,"line":1380},24,[324,1382,378],{"emptyLinePlaceholder":377},[324,1384,1386,1388,1391],{"class":326,"line":1385},25,[324,1387,193],{"class":334},[324,1389,1390],{"class":392},"(node)",[324,1392,371],{"class":338},[324,1394,1396,1399,1401],{"class":326,"line":1395},26,[324,1397,1398],{"class":338},"\u003C\u002F",[324,1400,998],{"class":485},[324,1402,1018],{"class":338},[324,1404,1406],{"class":326,"line":1405},27,[324,1407,378],{"emptyLinePlaceholder":377},[324,1409,1411,1413,1416],{"class":326,"line":1410},28,[324,1412,421],{"class":338},[324,1414,1415],{"class":485},"template",[324,1417,1018],{"class":338},[324,1419,1421,1424,1427,1429,1431,1433,1436,1438,1440,1443,1445,1447],{"class":326,"line":1420},29,[324,1422,1423],{"class":338},"  \u003C",[324,1425,1426],{"class":485},"button",[324,1428,1030],{"class":330},[324,1430,1007],{"class":338},[324,1432,1010],{"class":338},[324,1434,1435],{"class":1013},"anchorEl",[324,1437,1010],{"class":338},[324,1439,539],{"class":338},[324,1441,1442],{"class":392},"Hover me",[324,1444,1398],{"class":338},[324,1446,1426],{"class":485},[324,1448,1018],{"class":338},[324,1450,1452],{"class":326,"line":1451},30,[324,1453,378],{"emptyLinePlaceholder":377},[324,1455,1457,1459,1462,1465,1467,1469,1472,1474,1476,1478,1480,1483,1485,1488,1490,1492,1495,1497,1500,1502,1504,1507,1509],{"class":326,"line":1456},31,[324,1458,1423],{"class":338},[324,1460,1461],{"class":485},"div",[324,1463,1464],{"class":330}," v-if",[324,1466,1007],{"class":338},[324,1468,1010],{"class":338},[324,1470,1471],{"class":1013},"node.open",[324,1473,1010],{"class":338},[324,1475,1030],{"class":330},[324,1477,1007],{"class":338},[324,1479,1010],{"class":338},[324,1481,1482],{"class":1013},"floatingEl",[324,1484,1010],{"class":338},[324,1486,1487],{"class":330}," class",[324,1489,1007],{"class":338},[324,1491,1010],{"class":338},[324,1493,1494],{"class":1013},"tooltip",[324,1496,1010],{"class":338},[324,1498,1499],{"class":330}," :data-placement",[324,1501,1007],{"class":338},[324,1503,1010],{"class":338},[324,1505,1506],{"class":1013},"placement",[324,1508,1010],{"class":338},[324,1510,1018],{"class":338},[324,1512,1514,1517,1519,1521,1524,1526,1528],{"class":326,"line":1513},32,[324,1515,1516],{"class":338},"    \u003C",[324,1518,324],{"class":485},[324,1520,539],{"class":338},[324,1522,1523],{"class":392},"Tooltip message",[324,1525,1398],{"class":338},[324,1527,324],{"class":485},[324,1529,1018],{"class":338},[324,1531,1533,1535,1537,1539,1541,1543,1546,1548,1550,1552,1554,1556,1558],{"class":326,"line":1532},33,[324,1534,1516],{"class":338},[324,1536,1461],{"class":485},[324,1538,1030],{"class":330},[324,1540,1007],{"class":338},[324,1542,1010],{"class":338},[324,1544,1545],{"class":1013},"arrowEl",[324,1547,1010],{"class":338},[324,1549,1487],{"class":330},[324,1551,1007],{"class":338},[324,1553,1010],{"class":338},[324,1555,893],{"class":1013},[324,1557,1010],{"class":338},[324,1559,1560],{"class":338}," \u002F>\n",[324,1562,1564,1567,1569],{"class":326,"line":1563},34,[324,1565,1566],{"class":338},"  \u003C\u002F",[324,1568,1461],{"class":485},[324,1570,1018],{"class":338},[324,1572,1574,1576,1578],{"class":326,"line":1573},35,[324,1575,1398],{"class":338},[324,1577,1415],{"class":485},[324,1579,1018],{"class":338},[324,1581,1583],{"class":326,"line":1582},36,[324,1584,378],{"emptyLinePlaceholder":377},[324,1586,1588,1590,1593],{"class":326,"line":1587},37,[324,1589,421],{"class":338},[324,1591,1592],{"class":485},"style",[324,1594,1018],{"class":338},[324,1596,1598,1600,1602],{"class":326,"line":1597},38,[324,1599,856],{"class":338},[324,1601,1494],{"class":349},[324,1603,479],{"class":338},[324,1605,1607,1609,1611,1614],{"class":326,"line":1606},39,[324,1608,901],{"class":900},[324,1610,346],{"class":338},[324,1612,1613],{"class":392}," relative",[324,1615,371],{"class":338},[324,1617,1619,1621,1623,1626,1629],{"class":326,"line":1618},40,[324,1620,937],{"class":900},[324,1622,346],{"class":338},[324,1624,1625],{"class":338}," #",[324,1627,1628],{"class":392},"222",[324,1630,371],{"class":338},[324,1632,1634,1637,1639,1641,1644],{"class":326,"line":1633},41,[324,1635,1636],{"class":900},"  color",[324,1638,346],{"class":338},[324,1640,1625],{"class":338},[324,1642,1643],{"class":392},"fff",[324,1645,371],{"class":338},[324,1647,1649,1651,1653,1656,1659],{"class":326,"line":1648},42,[324,1650,504],{"class":900},[324,1652,346],{"class":338},[324,1654,1655],{"class":918}," 6px",[324,1657,1658],{"class":918}," 10px",[324,1660,371],{"class":338},[324,1662,1664,1667,1669,1672],{"class":326,"line":1663},43,[324,1665,1666],{"class":900},"  border-radius",[324,1668,346],{"class":338},[324,1670,1671],{"class":918}," 4px",[324,1673,371],{"class":338},[324,1675,1677],{"class":326,"line":1676},44,[324,1678,551],{"class":338},[324,1680,1682],{"class":326,"line":1681},45,[324,1683,378],{"emptyLinePlaceholder":377},[324,1685,1687,1689,1691],{"class":326,"line":1686},46,[324,1688,856],{"class":338},[324,1690,893],{"class":349},[324,1692,479],{"class":338},[324,1694,1696,1698,1700,1702],{"class":326,"line":1695},47,[324,1697,901],{"class":900},[324,1699,346],{"class":338},[324,1701,906],{"class":392},[324,1703,371],{"class":338},[324,1705,1707,1709,1711,1713],{"class":326,"line":1706},48,[324,1708,913],{"class":900},[324,1710,346],{"class":338},[324,1712,919],{"class":918},[324,1714,371],{"class":338},[324,1716,1718,1720,1722,1724],{"class":326,"line":1717},49,[324,1719,926],{"class":900},[324,1721,346],{"class":338},[324,1723,919],{"class":918},[324,1725,371],{"class":338},[324,1727,1729,1731,1733,1735,1737],{"class":326,"line":1728},50,[324,1730,937],{"class":900},[324,1732,346],{"class":338},[324,1734,1625],{"class":338},[324,1736,1628],{"class":392},[324,1738,371],{"class":338},[324,1740,1742,1744,1746,1748,1750,1752],{"class":326,"line":1741},51,[324,1743,949],{"class":900},[324,1745,346],{"class":338},[324,1747,954],{"class":334},[324,1749,339],{"class":338},[324,1751,959],{"class":918},[324,1753,962],{"class":338},[324,1755,1757],{"class":326,"line":1756},52,[324,1758,551],{"class":338},[324,1760,1762,1764,1766],{"class":326,"line":1761},53,[324,1763,1398],{"class":338},[324,1765,1592],{"class":485},[324,1767,1018],{"class":338},[310,1769,1771],{"id":1770},"see-also","See Also",[1773,1774,1775,1783,1790,1797],"ul",{},[1776,1777,1778,1782],"li",{},[304,1779,1780],{"href":265},[280,1781,264],{}," - Low-level Floating UI arrow middleware",[1776,1784,1785,1789],{},[304,1786,1787],{"href":172},[280,1788,171],{}," - Coordinates and positioning engine",[1776,1791,1792,1796],{},[304,1793,1794],{"href":163},[280,1795,162],{}," - Shared element refs container",[1776,1798,1799,1802],{},[304,1800,1801],{"href":81},"Keep Content in View"," - Middleware and alignment guide",[1592,1804,1805],{},"html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}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 pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sqsOY, html code.shiki .sqsOY{--shiki-light:#8796B0;--shiki-default:#B2CCD6;--shiki-dark:#B2CCD6}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}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 .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}",{"title":320,"searchDepth":374,"depth":374,"links":1807},[1808,1809,1810,1811,1815,1818],{"id":312,"depth":374,"text":313},{"id":633,"depth":374,"text":634},{"id":729,"depth":374,"text":730},{"id":809,"depth":374,"text":810,"children":1812},[1813,1814],{"id":814,"depth":381,"text":815},{"id":838,"depth":381,"text":839},{"id":979,"depth":374,"text":980,"children":1816},[1817],{"id":983,"depth":381,"text":984},{"id":1770,"depth":374,"text":1771},"Connects an arrow element to a floating node and computes inset styles.","md",null,{},{"title":175,"description":1819},"YLwF78IgIDJnO34-3rJnaJNW-V8l5-D7GTLH5KVBtr0",[1826,1828],{"title":171,"path":172,"stem":173,"description":1827,"children":-1},"Add reactive positioning styles to a floating node using Floating UI.",{"title":179,"path":180,"stem":181,"description":1829,"children":-1},"Positions a floating element relative to pointer coordinates using a virtual anchor.",1791046165701]