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