[{"data":1,"prerenderedAt":1282},["ShallowReactive",2],{"navigation_docs":3,"-api-middleware-autoplacement":271,"-api-middleware-autoplacement-surround":1277},[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":252,"body":273,"description":1271,"extension":1272,"links":1273,"meta":1274,"navigation":339,"path":253,"seo":1275,"stem":254,"__hash__":1276},"docs\u002F2.api\u002F6.middleware\u002F4.autoplacement.md",{"type":274,"value":275,"toc":1256},"minimark",[276,283,288,503,506,661,665,681,685,690,706,713,722,756,760,766,1219,1223,1252],[277,278,279,282],"p",{},[280,281,252],"code",{}," evaluates available space on all sides of the anchor and selects the placement that fits best. Use it when you have no preferred placement and want the element to dynamically occupy whichever side has the most clearance.",[284,285,287],"h2",{"id":286},"type","Type",[289,290,295],"pre",{"className":291,"code":292,"language":293,"meta":294,"style":294},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","function autoPlacement(options?: AutoPlacementOptions): Middleware;\n\ninterface AutoPlacementOptions {\n  crossAxis?: boolean;\n  alignment?: \"start\" | \"end\" | null;\n  autoAlignment?: boolean;\n  allowedPlacements?: Array\u003CPlacement>;\n  boundary?: Boundary;\n  rootBoundary?: RootBoundary;\n  elementContext?: ElementContext;\n  altBoundary?: boolean;\n  padding?: Padding;\n}\n","ts","",[280,296,297,334,341,352,366,401,413,433,446,459,472,484,497],{"__ignoreMap":294},[298,299,302,306,310,314,318,321,325,328,331],"span",{"class":300,"line":301},"line",1,[298,303,305],{"class":304},"spNyl","function",[298,307,309],{"class":308},"s2Zo4"," autoPlacement",[298,311,313],{"class":312},"sMK4o","(",[298,315,317],{"class":316},"sHdIc","options",[298,319,320],{"class":312},"?:",[298,322,324],{"class":323},"sBMFI"," AutoPlacementOptions",[298,326,327],{"class":312},"):",[298,329,330],{"class":323}," Middleware",[298,332,333],{"class":312},";\n",[298,335,337],{"class":300,"line":336},2,[298,338,340],{"emptyLinePlaceholder":339},true,"\n",[298,342,344,347,349],{"class":300,"line":343},3,[298,345,346],{"class":304},"interface",[298,348,324],{"class":323},[298,350,351],{"class":312}," {\n",[298,353,355,359,361,364],{"class":300,"line":354},4,[298,356,358],{"class":357},"swJcz","  crossAxis",[298,360,320],{"class":312},[298,362,363],{"class":323}," boolean",[298,365,333],{"class":312},[298,367,369,372,374,377,381,384,387,389,392,394,396,399],{"class":300,"line":368},5,[298,370,371],{"class":357},"  alignment",[298,373,320],{"class":312},[298,375,376],{"class":312}," \"",[298,378,380],{"class":379},"sfazB","start",[298,382,383],{"class":312},"\"",[298,385,386],{"class":312}," |",[298,388,376],{"class":312},[298,390,391],{"class":379},"end",[298,393,383],{"class":312},[298,395,386],{"class":312},[298,397,398],{"class":323}," null",[298,400,333],{"class":312},[298,402,404,407,409,411],{"class":300,"line":403},6,[298,405,406],{"class":357},"  autoAlignment",[298,408,320],{"class":312},[298,410,363],{"class":323},[298,412,333],{"class":312},[298,414,416,419,421,424,427,430],{"class":300,"line":415},7,[298,417,418],{"class":357},"  allowedPlacements",[298,420,320],{"class":312},[298,422,423],{"class":323}," Array",[298,425,426],{"class":312},"\u003C",[298,428,429],{"class":323},"Placement",[298,431,432],{"class":312},">;\n",[298,434,436,439,441,444],{"class":300,"line":435},8,[298,437,438],{"class":357},"  boundary",[298,440,320],{"class":312},[298,442,443],{"class":323}," Boundary",[298,445,333],{"class":312},[298,447,449,452,454,457],{"class":300,"line":448},9,[298,450,451],{"class":357},"  rootBoundary",[298,453,320],{"class":312},[298,455,456],{"class":323}," RootBoundary",[298,458,333],{"class":312},[298,460,462,465,467,470],{"class":300,"line":461},10,[298,463,464],{"class":357},"  elementContext",[298,466,320],{"class":312},[298,468,469],{"class":323}," ElementContext",[298,471,333],{"class":312},[298,473,475,478,480,482],{"class":300,"line":474},11,[298,476,477],{"class":357},"  altBoundary",[298,479,320],{"class":312},[298,481,363],{"class":323},[298,483,333],{"class":312},[298,485,487,490,492,495],{"class":300,"line":486},12,[298,488,489],{"class":357},"  padding",[298,491,320],{"class":312},[298,493,494],{"class":323}," Padding",[298,496,333],{"class":312},[298,498,500],{"class":300,"line":499},13,[298,501,502],{"class":312},"}\n",[284,504,505],{"id":317},"Options",[507,508,509,527],"table",{},[510,511,512],"thead",{},[513,514,515,519,521,524],"tr",{},[516,517,518],"th",{},"Name",[516,520,287],{},[516,522,523],{},"Default",[516,525,526],{},"Notes",[528,529,530,555,583,603,621,641],"tbody",{},[513,531,532,538,543,548],{},[533,534,535],"td",{},[280,536,537],{},"crossAxis",[533,539,540],{},[280,541,542],{},"boolean",[533,544,545],{},[280,546,547],{},"false",[533,549,550,551,554],{},"When ",[280,552,553],{},"true",", evaluates perpendicular placements if primary axis sides are blocked.",[513,556,557,562,567,572],{},[533,558,559],{},[280,560,561],{},"alignment",[533,563,564],{},[280,565,566],{},"\"start\" | \"end\" | null",[533,568,569],{},[280,570,571],{},"null",[533,573,574,575,578,579,582],{},"Constrains choices to a fixed alignment (e.g. only ",[280,576,577],{},"\"top-start\"",", ",[280,580,581],{},"\"bottom-start\"",").",[513,584,585,590,594,598],{},[533,586,587],{},[280,588,589],{},"autoAlignment",[533,591,592],{},[280,593,542],{},[533,595,596],{},[280,597,553],{},[533,599,550,600,602],{},[280,601,553],{},", automatically flips alignment to find the best fit.",[513,604,605,610,615,618],{},[533,606,607],{},[280,608,609],{},"allowedPlacements",[533,611,612],{},[280,613,614],{},"Array\u003CPlacement>",[533,616,617],{},"All placements",[533,619,620],{},"Limits the candidate placements evaluated.",[513,622,623,628,633,638],{},[533,624,625],{},[280,626,627],{},"padding",[533,629,630],{},[280,631,632],{},"Padding",[533,634,635],{},[280,636,637],{},"0",[533,639,640],{},"Minimum clearance inset from clipping boundaries.",[513,642,643,648,653,658],{},[533,644,645],{},[280,646,647],{},"boundary",[533,649,650],{},[280,651,652],{},"Boundary",[533,654,655],{},[280,656,657],{},"\"clippingAncestors\"",[533,659,660],{},"Element or rect defining the clipping area.",[284,662,664],{"id":663},"returns","Returns",[277,666,667,669,670,672,673,676,677,680],{},[280,668,252],{}," returns a ",[280,671,234],{}," object with ",[280,674,675],{},"name: \"autoPlacement\"",". It stores internal overflow metrics in ",[280,678,679],{},"middlewareData.value.autoPlacement",".",[284,682,684],{"id":683},"details","Details",[686,687,689],"h3",{"id":688},"pipeline-placement","Pipeline Placement",[277,691,692,694,695,700,701,703,704,680],{},[280,693,252],{}," is an alternative to ",[696,697,698],"a",{"href":245},[280,699,244],{}," and should be placed at the same pipeline step: after ",[280,702,240],{}," and before ",[280,705,248],{},[277,707,708,709,712],{},"When configuring through ",[280,710,711],{},"usePosition(node, { middlewares: { autoPlacement: ... } })",", VFloat positions it automatically.",[686,714,716,717,719,720],{"id":715},"choosing-between-autoplacement-and-flip","Choosing Between ",[280,718,252],{}," and ",[280,721,244],{},[723,724,725,743,750],"ul",{},[726,727,728,729,734,735,738,739,742],"li",{},"Use ",[730,731,732],"strong",{},[280,733,244],{}," when you want predictability: you prefer ",[280,736,737],{},"\"bottom\"",", and only accept ",[280,740,741],{},"\"top\""," as a fallback when bottom overflows.",[726,744,728,745,749],{},[730,746,747],{},[280,748,252],{}," when there is no design preference and you always want whichever side has the most room.",[726,751,752,755],{},[730,753,754],{},"Do not enable both."," Both middlewares attempt to choose the base placement side and will conflict.",[284,757,759],{"id":758},"example","Example",[686,761,763,764],{"id":762},"declarative-usage-in-useposition","Declarative Usage in ",[280,765,171],{},[289,767,771],{"className":768,"code":769,"language":770,"meta":294,"style":294},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\nimport { ref } from \"vue\";\nimport { useFloatingNode, usePosition } from \"v-float\";\n\nconst anchorEl = ref\u003CHTMLElement | null>(null);\nconst floatingEl = ref\u003CHTMLElement | null>(null);\n\nconst node = useFloatingNode({ anchorEl, floatingEl });\nconst { placement } = usePosition(node, {\n  middlewares: {\n    offset: 8,\n    autoPlacement: {\n      allowedPlacements: [\"top\", \"bottom\"],\n      padding: 8,\n    },\n    shift: { padding: 8 },\n  },\n});\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cbutton ref=\"anchorEl\">Anchor\u003C\u002Fbutton>\n  \u003Cdiv v-if=\"node.open\" ref=\"floatingEl\" :data-placement=\"placement\">\n    Automatically placed on whichever side fits best\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n","vue",[280,772,773,798,825,853,857,890,919,923,953,976,986,1000,1009,1040,1052,1058,1078,1084,1093,1103,1108,1118,1149,1194,1200,1210],{"__ignoreMap":294},[298,774,775,777,780,783,786,789,791,793,795],{"class":300,"line":301},[298,776,426],{"class":312},[298,778,779],{"class":357},"script",[298,781,782],{"class":304}," setup",[298,784,785],{"class":304}," lang",[298,787,788],{"class":312},"=",[298,790,383],{"class":312},[298,792,293],{"class":379},[298,794,383],{"class":312},[298,796,797],{"class":312},">\n",[298,799,800,804,807,811,814,817,819,821,823],{"class":300,"line":336},[298,801,803],{"class":802},"s7zQu","import",[298,805,806],{"class":312}," {",[298,808,810],{"class":809},"sTEyZ"," ref",[298,812,813],{"class":312}," }",[298,815,816],{"class":802}," from",[298,818,376],{"class":312},[298,820,770],{"class":379},[298,822,383],{"class":312},[298,824,333],{"class":312},[298,826,827,829,831,834,837,840,842,844,846,849,851],{"class":300,"line":343},[298,828,803],{"class":802},[298,830,806],{"class":312},[298,832,833],{"class":809}," useFloatingNode",[298,835,836],{"class":312},",",[298,838,839],{"class":809}," usePosition",[298,841,813],{"class":312},[298,843,816],{"class":802},[298,845,376],{"class":312},[298,847,848],{"class":379},"v-float",[298,850,383],{"class":312},[298,852,333],{"class":312},[298,854,855],{"class":300,"line":354},[298,856,340],{"emptyLinePlaceholder":339},[298,858,859,862,865,867,869,871,874,876,878,881,883,885,888],{"class":300,"line":368},[298,860,861],{"class":304},"const",[298,863,864],{"class":809}," anchorEl ",[298,866,788],{"class":312},[298,868,810],{"class":308},[298,870,426],{"class":312},[298,872,873],{"class":323},"HTMLElement",[298,875,386],{"class":312},[298,877,398],{"class":323},[298,879,880],{"class":312},">",[298,882,313],{"class":809},[298,884,571],{"class":312},[298,886,887],{"class":809},")",[298,889,333],{"class":312},[298,891,892,894,897,899,901,903,905,907,909,911,913,915,917],{"class":300,"line":403},[298,893,861],{"class":304},[298,895,896],{"class":809}," floatingEl ",[298,898,788],{"class":312},[298,900,810],{"class":308},[298,902,426],{"class":312},[298,904,873],{"class":323},[298,906,386],{"class":312},[298,908,398],{"class":323},[298,910,880],{"class":312},[298,912,313],{"class":809},[298,914,571],{"class":312},[298,916,887],{"class":809},[298,918,333],{"class":312},[298,920,921],{"class":300,"line":415},[298,922,340],{"emptyLinePlaceholder":339},[298,924,925,927,930,932,934,936,939,942,944,946,949,951],{"class":300,"line":435},[298,926,861],{"class":304},[298,928,929],{"class":809}," node ",[298,931,788],{"class":312},[298,933,833],{"class":308},[298,935,313],{"class":809},[298,937,938],{"class":312},"{",[298,940,941],{"class":809}," anchorEl",[298,943,836],{"class":312},[298,945,896],{"class":809},[298,947,948],{"class":312},"}",[298,950,887],{"class":809},[298,952,333],{"class":312},[298,954,955,957,959,962,964,967,969,972,974],{"class":300,"line":448},[298,956,861],{"class":304},[298,958,806],{"class":312},[298,960,961],{"class":809}," placement ",[298,963,948],{"class":312},[298,965,966],{"class":312}," =",[298,968,839],{"class":308},[298,970,971],{"class":809},"(node",[298,973,836],{"class":312},[298,975,351],{"class":312},[298,977,978,981,984],{"class":300,"line":461},[298,979,980],{"class":357},"  middlewares",[298,982,983],{"class":312},":",[298,985,351],{"class":312},[298,987,988,991,993,997],{"class":300,"line":474},[298,989,990],{"class":357},"    offset",[298,992,983],{"class":312},[298,994,996],{"class":995},"sbssI"," 8",[298,998,999],{"class":312},",\n",[298,1001,1002,1005,1007],{"class":300,"line":486},[298,1003,1004],{"class":357},"    autoPlacement",[298,1006,983],{"class":312},[298,1008,351],{"class":312},[298,1010,1011,1014,1016,1019,1021,1024,1026,1028,1030,1033,1035,1038],{"class":300,"line":499},[298,1012,1013],{"class":357},"      allowedPlacements",[298,1015,983],{"class":312},[298,1017,1018],{"class":809}," [",[298,1020,383],{"class":312},[298,1022,1023],{"class":379},"top",[298,1025,383],{"class":312},[298,1027,836],{"class":312},[298,1029,376],{"class":312},[298,1031,1032],{"class":379},"bottom",[298,1034,383],{"class":312},[298,1036,1037],{"class":809},"]",[298,1039,999],{"class":312},[298,1041,1043,1046,1048,1050],{"class":300,"line":1042},14,[298,1044,1045],{"class":357},"      padding",[298,1047,983],{"class":312},[298,1049,996],{"class":995},[298,1051,999],{"class":312},[298,1053,1055],{"class":300,"line":1054},15,[298,1056,1057],{"class":312},"    },\n",[298,1059,1061,1064,1066,1068,1071,1073,1075],{"class":300,"line":1060},16,[298,1062,1063],{"class":357},"    shift",[298,1065,983],{"class":312},[298,1067,806],{"class":312},[298,1069,1070],{"class":357}," padding",[298,1072,983],{"class":312},[298,1074,996],{"class":995},[298,1076,1077],{"class":312}," },\n",[298,1079,1081],{"class":300,"line":1080},17,[298,1082,1083],{"class":312},"  },\n",[298,1085,1087,1089,1091],{"class":300,"line":1086},18,[298,1088,948],{"class":312},[298,1090,887],{"class":809},[298,1092,333],{"class":312},[298,1094,1096,1099,1101],{"class":300,"line":1095},19,[298,1097,1098],{"class":312},"\u003C\u002F",[298,1100,779],{"class":357},[298,1102,797],{"class":312},[298,1104,1106],{"class":300,"line":1105},20,[298,1107,340],{"emptyLinePlaceholder":339},[298,1109,1111,1113,1116],{"class":300,"line":1110},21,[298,1112,426],{"class":312},[298,1114,1115],{"class":357},"template",[298,1117,797],{"class":312},[298,1119,1121,1124,1127,1129,1131,1133,1136,1138,1140,1143,1145,1147],{"class":300,"line":1120},22,[298,1122,1123],{"class":312},"  \u003C",[298,1125,1126],{"class":357},"button",[298,1128,810],{"class":304},[298,1130,788],{"class":312},[298,1132,383],{"class":312},[298,1134,1135],{"class":379},"anchorEl",[298,1137,383],{"class":312},[298,1139,880],{"class":312},[298,1141,1142],{"class":809},"Anchor",[298,1144,1098],{"class":312},[298,1146,1126],{"class":357},[298,1148,797],{"class":312},[298,1150,1152,1154,1157,1160,1162,1164,1167,1169,1171,1173,1175,1178,1180,1183,1185,1187,1190,1192],{"class":300,"line":1151},23,[298,1153,1123],{"class":312},[298,1155,1156],{"class":357},"div",[298,1158,1159],{"class":304}," v-if",[298,1161,788],{"class":312},[298,1163,383],{"class":312},[298,1165,1166],{"class":379},"node.open",[298,1168,383],{"class":312},[298,1170,810],{"class":304},[298,1172,788],{"class":312},[298,1174,383],{"class":312},[298,1176,1177],{"class":379},"floatingEl",[298,1179,383],{"class":312},[298,1181,1182],{"class":304}," :data-placement",[298,1184,788],{"class":312},[298,1186,383],{"class":312},[298,1188,1189],{"class":379},"placement",[298,1191,383],{"class":312},[298,1193,797],{"class":312},[298,1195,1197],{"class":300,"line":1196},24,[298,1198,1199],{"class":809},"    Automatically placed on whichever side fits best\n",[298,1201,1203,1206,1208],{"class":300,"line":1202},25,[298,1204,1205],{"class":312},"  \u003C\u002F",[298,1207,1156],{"class":357},[298,1209,797],{"class":312},[298,1211,1213,1215,1217],{"class":300,"line":1212},26,[298,1214,1098],{"class":312},[298,1216,1115],{"class":357},[298,1218,797],{"class":312},[284,1220,1222],{"id":1221},"see-also","See Also",[723,1224,1225,1232,1239,1246],{},[726,1226,1227,1231],{},[696,1228,1229],{"href":245},[280,1230,244],{}," - Fallback to alternative placements from a preferred starting side",[726,1233,1234,1238],{},[696,1235,1236],{"href":249},[280,1237,248],{}," - Adjusts coordinates to stay inside boundaries",[726,1240,1241,1245],{},[696,1242,1243],{"href":241},[280,1244,240],{}," - Distance between anchor and floating element",[726,1247,1248,1251],{},[696,1249,1250],{"href":81},"Keep Content in View"," - Boundary and placement workflows",[1253,1254,1255],"style",{},"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 pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}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 .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}",{"title":294,"searchDepth":336,"depth":336,"links":1257},[1258,1259,1260,1261,1266,1270],{"id":286,"depth":336,"text":287},{"id":317,"depth":336,"text":505},{"id":663,"depth":336,"text":664},{"id":683,"depth":336,"text":684,"children":1262},[1263,1264],{"id":688,"depth":343,"text":689},{"id":715,"depth":343,"text":1265},"Choosing Between autoPlacement and flip",{"id":758,"depth":336,"text":759,"children":1267},[1268],{"id":762,"depth":343,"text":1269},"Declarative Usage in usePosition",{"id":1221,"depth":336,"text":1222},"Chooses the placement with the greatest available space.","md",null,{},{"title":252,"description":1271},"CAjqsTSaSq5y2zo06Cqt6mKDwAQsdbXwtqfEM9IgiCc",[1278,1280],{"title":248,"path":249,"stem":250,"description":1279,"children":-1},"Keeps the floating element within the available viewport boundary.",{"title":256,"path":257,"stem":258,"description":1281,"children":-1},"Measures available boundary space to constrain or resize the floating element.",1791046165701]