[{"data":1,"prerenderedAt":2978},["ShallowReactive",2],{"navigation_docs":3,"-guide-positioning-middlewares":226,"-guide-positioning-middlewares-surround":2973},[4,90],{"title":5,"icon":6,"path":7,"stem":8,"children":9,"page":28},"Guide","i-lucide-book-open","\u002Fguide","1.guide",[10,29,51,68],{"title":11,"icon":12,"path":13,"stem":14,"children":15,"page":28},"Getting Started","i-lucide-rocket","\u002Fguide\u002Fgetting-started","1.guide\u002F1.getting-started",[16,20,24],{"title":17,"path":18,"stem":19},"Introduction","\u002Fguide\u002Fgetting-started\u002Fintroduction","1.guide\u002F1.getting-started\u002F1.introduction",{"title":21,"path":22,"stem":23},"First Tooltip","\u002Fguide\u002Fgetting-started\u002Ffirst-tooltip","1.guide\u002F1.getting-started\u002F2.first-tooltip",{"title":25,"path":26,"stem":27},"First Menu","\u002Fguide\u002Fgetting-started\u002Ffirst-menu","1.guide\u002F1.getting-started\u002F3.first-menu",false,{"title":30,"icon":31,"path":32,"stem":33,"children":34,"page":28},"Core Concepts","i-lucide-boxes","\u002Fguide\u002Fcore-concepts","1.guide\u002F2.core-concepts",[35,39,43,47],{"title":36,"path":37,"stem":38},"Floating node","\u002Fguide\u002Fcore-concepts\u002Ffloating-node","1.guide\u002F2.core-concepts\u002F1.floating-node",{"title":40,"path":41,"stem":42},"Positioning","\u002Fguide\u002Fcore-concepts\u002Fpositioning","1.guide\u002F2.core-concepts\u002F2.positioning",{"title":44,"path":45,"stem":46},"Interaction model","\u002Fguide\u002Fcore-concepts\u002Finteraction-model","1.guide\u002F2.core-concepts\u002F3.interaction-model",{"title":48,"path":49,"stem":50},"Hierarchy","\u002Fguide\u002Fcore-concepts\u002Fhierarchy","1.guide\u002F2.core-concepts\u002F4.hierarchy",{"title":40,"icon":52,"path":53,"stem":54,"children":55,"page":28},"i-lucide-crosshair","\u002Fguide\u002Fpositioning","1.guide\u002F3.positioning",[56,60,64],{"title":57,"path":58,"stem":59},"Middlewares","\u002Fguide\u002Fpositioning\u002Fmiddlewares","1.guide\u002F3.positioning\u002F1.middlewares",{"title":61,"path":62,"stem":63},"Virtual Anchors","\u002Fguide\u002Fpositioning\u002Fvirtual-anchors","1.guide\u002F3.positioning\u002F2.virtual-anchors",{"title":65,"path":66,"stem":67},"Animations and Transitions","\u002Fguide\u002Fpositioning\u002Fanimations-and-transitions","1.guide\u002F3.positioning\u002F3.animations-and-transitions",{"title":69,"icon":70,"path":71,"stem":72,"children":73,"page":28},"Accessibility","i-lucide-person-standing","\u002Fguide\u002Faccessibility","1.guide\u002F4.accessibility",[74,78,82,86],{"title":75,"path":76,"stem":77},"ARIA & Semantics","\u002Fguide\u002Faccessibility\u002Faria-and-semantics","1.guide\u002F4.accessibility\u002F1.aria-and-semantics",{"title":79,"path":80,"stem":81},"Focus Models","\u002Fguide\u002Faccessibility\u002Ffocus-models","1.guide\u002F4.accessibility\u002F2.focus-models",{"title":83,"path":84,"stem":85},"Keyboard Navigation","\u002Fguide\u002Faccessibility\u002Fkeyboard-navigation","1.guide\u002F4.accessibility\u002F3.keyboard-navigation",{"title":87,"path":88,"stem":89},"Hover & Dismissal","\u002Fguide\u002Faccessibility\u002Fhover-and-dismissal","1.guide\u002F4.accessibility\u002F4.hover-and-dismissal",{"title":91,"icon":92,"path":93,"stem":94,"children":95},"API Reference","i-lucide-code-xml","\u002Fapi","2.api",[96,100,110,120,137,171,188],{"title":97,"path":93,"stem":98,"icon":99},"Overview","2.api\u002Findex","i-lucide-file-text",{"title":101,"icon":102,"path":103,"stem":104,"children":105,"page":28},"Reference","i-lucide-braces","\u002Fapi\u002Foverview","2.api\u002F1.overview",[106],{"title":107,"path":108,"stem":109},"Types","\u002Fapi\u002Foverview\u002Ftypes","2.api\u002F1.overview\u002F1.types",{"title":111,"icon":112,"path":113,"stem":114,"children":115,"page":28},"Core","i-lucide-box","\u002Fapi\u002Fcore","2.api\u002F2.core",[116],{"title":117,"path":118,"stem":119},"useFloatingNode","\u002Fapi\u002Fcore\u002Fuse-floating-node","2.api\u002F2.core\u002F1.use-floating-node",{"title":40,"icon":121,"path":122,"stem":123,"children":124,"page":28},"i-lucide-move","\u002Fapi\u002Fpositioning","2.api\u002F3.positioning",[125,129,133],{"title":126,"path":127,"stem":128},"usePosition","\u002Fapi\u002Fpositioning\u002Fuse-position","2.api\u002F3.positioning\u002F1.use-position",{"title":130,"path":131,"stem":132},"useArrow","\u002Fapi\u002Fpositioning\u002Fuse-arrow","2.api\u002F3.positioning\u002F2.use-arrow",{"title":134,"path":135,"stem":136},"useClientPoint","\u002Fapi\u002Fpositioning\u002Fuse-client-point","2.api\u002F3.positioning\u002F3.use-client-point",{"title":138,"icon":139,"path":140,"stem":141,"children":142,"page":28},"Interactions","i-lucide-mouse-pointer-click","\u002Fapi\u002Finteractions","2.api\u002F4.interactions",[143,147,151,155,159,163,167],{"title":144,"path":145,"stem":146},"useClick","\u002Fapi\u002Finteractions\u002Fuse-click","2.api\u002F4.interactions\u002F1.use-click",{"title":148,"path":149,"stem":150},"useHover","\u002Fapi\u002Finteractions\u002Fuse-hover","2.api\u002F4.interactions\u002F2.use-hover",{"title":152,"path":153,"stem":154},"useFocus","\u002Fapi\u002Finteractions\u002Fuse-focus","2.api\u002F4.interactions\u002F3.use-focus",{"title":156,"path":157,"stem":158},"useFocusTrap","\u002Fapi\u002Finteractions\u002Fuse-focus-trap","2.api\u002F4.interactions\u002F4.use-focus-trap",{"title":160,"path":161,"stem":162},"useOutsideClick","\u002Fapi\u002Finteractions\u002Fuse-outside-click","2.api\u002F4.interactions\u002F5.use-outside-click",{"title":164,"path":165,"stem":166},"useEscapeKey","\u002Fapi\u002Finteractions\u002Fuse-escape-key","2.api\u002F4.interactions\u002F6.use-escape-key",{"title":168,"path":169,"stem":170},"useRole","\u002Fapi\u002Finteractions\u002Fuse-role","2.api\u002F4.interactions\u002F7.use-role",{"title":83,"icon":172,"path":173,"stem":174,"children":175,"page":28},"i-lucide-keyboard","\u002Fapi\u002Fkeyboard-navigation","2.api\u002F5.keyboard-navigation",[176,180,184],{"title":177,"path":178,"stem":179},"useRovingFocus","\u002Fapi\u002Fkeyboard-navigation\u002Fuse-roving-focus","2.api\u002F5.keyboard-navigation\u002F1.use-roving-focus",{"title":181,"path":182,"stem":183},"useAriaActivedescendant","\u002Fapi\u002Fkeyboard-navigation\u002Fuse-aria-activedescendant","2.api\u002F5.keyboard-navigation\u002F2.use-aria-activedescendant",{"title":185,"path":186,"stem":187},"useTypeahead","\u002Fapi\u002Fkeyboard-navigation\u002Fuse-typeahead","2.api\u002F5.keyboard-navigation\u002F3.use-typeahead",{"title":189,"icon":190,"path":191,"stem":192,"children":193,"page":28},"Middleware","i-lucide-blocks","\u002Fapi\u002Fmiddleware","2.api\u002F6.middleware",[194,198,202,206,210,214,218,222],{"title":195,"path":196,"stem":197},"offset","\u002Fapi\u002Fmiddleware\u002Foffset","2.api\u002F6.middleware\u002F1.offset",{"title":199,"path":200,"stem":201},"flip","\u002Fapi\u002Fmiddleware\u002Fflip","2.api\u002F6.middleware\u002F2.flip",{"title":203,"path":204,"stem":205},"shift","\u002Fapi\u002Fmiddleware\u002Fshift","2.api\u002F6.middleware\u002F3.shift",{"title":207,"path":208,"stem":209},"autoPlacement","\u002Fapi\u002Fmiddleware\u002Fautoplacement","2.api\u002F6.middleware\u002F4.autoplacement",{"title":211,"path":212,"stem":213},"size","\u002Fapi\u002Fmiddleware\u002Fsize","2.api\u002F6.middleware\u002F5.size",{"title":215,"path":216,"stem":217},"inline","\u002Fapi\u002Fmiddleware\u002Finline","2.api\u002F6.middleware\u002F6.inline",{"title":219,"path":220,"stem":221},"arrow","\u002Fapi\u002Fmiddleware\u002Farrow","2.api\u002F6.middleware\u002F7.arrow",{"title":223,"path":224,"stem":225},"hide","\u002Fapi\u002Fmiddleware\u002Fhide","2.api\u002F6.middleware\u002F8.hide",{"id":227,"title":57,"body":228,"description":2967,"extension":2968,"links":2969,"meta":2970,"navigation":428,"path":58,"seo":2971,"stem":59,"__hash__":2972},"docs\u002F1.guide\u002F3.positioning\u002F1.middlewares.md",{"type":229,"value":230,"toc":2948},"minimark",[231,235,238,243,246,317,320,696,699,720,724,727,732,739,836,839,843,846,965,968,972,976,985,1014,1025,1077,1081,1084,1140,1147,1228,1233,1321,1330,1334,1341,1405,1411,1415,1425,2054,2065,2069,2076,2455,2465,2469,2472,2535,2539,2542,2598,2602,2605,2796,2801,2906,2912,2916,2945],[232,233,234],"p",{},"Base placement gets floating surfaces close, but real layouts must adapt to screen edges, scroll containers, and dynamic dimensions. In VFloat, that adaptation is handled by middlewares.",[232,236,237],{},"This guide explains how middlewares work, how to configure them declaratively or as a pipeline, and how to solve common collision and sizing problems.",[239,240,242],"h2",{"id":241},"mental-model-successive-geometric-refinement","Mental model: successive geometric refinement",[232,244,245],{},"A middleware is not an isolated setting. It is a step in a sequential pipeline where each middleware receives the coordinates computed by earlier steps and refines them:",[247,248,249,262,271,282,290,301,309],"ol",{},[250,251,252,256,257,261],"li",{},[253,254,255],"strong",{},"Initial placement."," VFloat calculates the unconstrained coordinates for the preferred placement (such as ",[258,259,260],"code",{},"bottom-start",").",[250,263,264,267,268,270],{},[253,265,266],{},"Clearance."," ",[258,269,195],{}," pushes the panel away from the trigger.",[250,272,273,267,276,278,279,281],{},[253,274,275],{},"Side selection.",[258,277,199],{}," or ",[258,280,207],{}," checks available space and selects a viable side.",[250,283,284,267,287,289],{},[253,285,286],{},"Boundary retention.",[258,288,203],{}," slides the panel along the viewport edge to keep it on screen.",[250,291,292,267,295,278,297,300],{},[253,293,294],{},"Dimension constraints.",[258,296,211],{},[258,298,299],{},"matchWidth"," adjusts panel dimensions to fit the viewport or match the trigger.",[250,302,303,267,306,308],{},[253,304,305],{},"Visibility clipping.",[258,307,223],{}," checks whether the anchor is scrolled out of view.",[250,310,311,267,314,316],{},[253,312,313],{},"Indicator alignment.",[258,315,219],{}," centers a pointed indicator against the stabilized panel geometry.",[232,318,319],{},"Here is the baseline stack used by most production dropdowns and tooltips:",[321,322,327],"pre",{"className":323,"code":324,"language":325,"meta":326,"style":326},"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);\nconst open = ref(true);\n\nconst node = useFloatingNode({\n  anchorEl,\n  floatingEl,\n  open,\n});\n\nusePosition(node, {\n  placement: \"bottom-start\",\n  middlewares: {\n    offset: 8,\n    flip: true,\n    shift: { padding: 8 },\n  },\n});\n\u003C\u002Fscript>\n","vue","",[258,328,329,364,394,423,430,470,500,522,527,544,553,561,569,579,584,597,614,624,638,651,671,677,686],{"__ignoreMap":326},[330,331,334,338,342,346,349,352,355,359,361],"span",{"class":332,"line":333},"line",1,[330,335,337],{"class":336},"sMK4o","\u003C",[330,339,341],{"class":340},"swJcz","script",[330,343,345],{"class":344},"spNyl"," setup",[330,347,348],{"class":344}," lang",[330,350,351],{"class":336},"=",[330,353,354],{"class":336},"\"",[330,356,358],{"class":357},"sfazB","ts",[330,360,354],{"class":336},[330,362,363],{"class":336},">\n",[330,365,367,371,374,378,381,384,387,389,391],{"class":332,"line":366},2,[330,368,370],{"class":369},"s7zQu","import",[330,372,373],{"class":336}," {",[330,375,377],{"class":376},"sTEyZ"," ref",[330,379,380],{"class":336}," }",[330,382,383],{"class":369}," from",[330,385,386],{"class":336}," \"",[330,388,325],{"class":357},[330,390,354],{"class":336},[330,392,393],{"class":336},";\n",[330,395,397,399,401,404,407,410,412,414,416,419,421],{"class":332,"line":396},3,[330,398,370],{"class":369},[330,400,373],{"class":336},[330,402,403],{"class":376}," useFloatingNode",[330,405,406],{"class":336},",",[330,408,409],{"class":376}," usePosition",[330,411,380],{"class":336},[330,413,383],{"class":369},[330,415,386],{"class":336},[330,417,418],{"class":357},"v-float",[330,420,354],{"class":336},[330,422,393],{"class":336},[330,424,426],{"class":332,"line":425},4,[330,427,429],{"emptyLinePlaceholder":428},true,"\n",[330,431,433,436,439,441,444,446,450,453,456,459,462,465,468],{"class":332,"line":432},5,[330,434,435],{"class":344},"const",[330,437,438],{"class":376}," anchorEl ",[330,440,351],{"class":336},[330,442,377],{"class":443},"s2Zo4",[330,445,337],{"class":336},[330,447,449],{"class":448},"sBMFI","HTMLElement",[330,451,452],{"class":336}," |",[330,454,455],{"class":448}," null",[330,457,458],{"class":336},">",[330,460,461],{"class":376},"(",[330,463,464],{"class":336},"null",[330,466,467],{"class":376},")",[330,469,393],{"class":336},[330,471,473,475,478,480,482,484,486,488,490,492,494,496,498],{"class":332,"line":472},6,[330,474,435],{"class":344},[330,476,477],{"class":376}," floatingEl ",[330,479,351],{"class":336},[330,481,377],{"class":443},[330,483,337],{"class":336},[330,485,449],{"class":448},[330,487,452],{"class":336},[330,489,455],{"class":448},[330,491,458],{"class":336},[330,493,461],{"class":376},[330,495,464],{"class":336},[330,497,467],{"class":376},[330,499,393],{"class":336},[330,501,503,505,508,510,512,514,518,520],{"class":332,"line":502},7,[330,504,435],{"class":344},[330,506,507],{"class":376}," open ",[330,509,351],{"class":336},[330,511,377],{"class":443},[330,513,461],{"class":376},[330,515,517],{"class":516},"sfNiH","true",[330,519,467],{"class":376},[330,521,393],{"class":336},[330,523,525],{"class":332,"line":524},8,[330,526,429],{"emptyLinePlaceholder":428},[330,528,530,532,535,537,539,541],{"class":332,"line":529},9,[330,531,435],{"class":344},[330,533,534],{"class":376}," node ",[330,536,351],{"class":336},[330,538,403],{"class":443},[330,540,461],{"class":376},[330,542,543],{"class":336},"{\n",[330,545,547,550],{"class":332,"line":546},10,[330,548,549],{"class":376},"  anchorEl",[330,551,552],{"class":336},",\n",[330,554,556,559],{"class":332,"line":555},11,[330,557,558],{"class":376},"  floatingEl",[330,560,552],{"class":336},[330,562,564,567],{"class":332,"line":563},12,[330,565,566],{"class":376},"  open",[330,568,552],{"class":336},[330,570,572,575,577],{"class":332,"line":571},13,[330,573,574],{"class":336},"}",[330,576,467],{"class":376},[330,578,393],{"class":336},[330,580,582],{"class":332,"line":581},14,[330,583,429],{"emptyLinePlaceholder":428},[330,585,587,589,592,594],{"class":332,"line":586},15,[330,588,126],{"class":443},[330,590,591],{"class":376},"(node",[330,593,406],{"class":336},[330,595,596],{"class":336}," {\n",[330,598,600,603,606,608,610,612],{"class":332,"line":599},16,[330,601,602],{"class":340},"  placement",[330,604,605],{"class":336},":",[330,607,386],{"class":336},[330,609,260],{"class":357},[330,611,354],{"class":336},[330,613,552],{"class":336},[330,615,617,620,622],{"class":332,"line":616},17,[330,618,619],{"class":340},"  middlewares",[330,621,605],{"class":336},[330,623,596],{"class":336},[330,625,627,630,632,636],{"class":332,"line":626},18,[330,628,629],{"class":340},"    offset",[330,631,605],{"class":336},[330,633,635],{"class":634},"sbssI"," 8",[330,637,552],{"class":336},[330,639,641,644,646,649],{"class":332,"line":640},19,[330,642,643],{"class":340},"    flip",[330,645,605],{"class":336},[330,647,648],{"class":516}," true",[330,650,552],{"class":336},[330,652,654,657,659,661,664,666,668],{"class":332,"line":653},20,[330,655,656],{"class":340},"    shift",[330,658,605],{"class":336},[330,660,373],{"class":336},[330,662,663],{"class":340}," padding",[330,665,605],{"class":336},[330,667,635],{"class":634},[330,669,670],{"class":336}," },\n",[330,672,674],{"class":332,"line":673},21,[330,675,676],{"class":336},"  },\n",[330,678,680,682,684],{"class":332,"line":679},22,[330,681,574],{"class":336},[330,683,467],{"class":376},[330,685,393],{"class":336},[330,687,689,692,694],{"class":332,"line":688},23,[330,690,691],{"class":336},"\u003C\u002F",[330,693,341],{"class":340},[330,695,363],{"class":336},[232,697,698],{},"In this stack:",[700,701,702,708,714],"ul",{},[250,703,704,707],{},[258,705,706],{},"offset: 8"," creates visual breathing room.",[250,709,710,713],{},[258,711,712],{},"flip: true"," switches to the opposite side if the preferred placement overflows.",[250,715,716,719],{},[258,717,718],{},"shift: { padding: 8 }"," slides the panel along the viewport edge with an 8-pixel margin.",[239,721,723],{"id":722},"two-ways-to-configure-middlewares","Two ways to configure middlewares",[232,725,726],{},"VFloat supports both declarative object configuration and imperative array pipelines.",[728,729,731],"h3",{"id":730},"declarative-object-syntax-recommended","Declarative object syntax (Recommended)",[232,733,734,735,738],{},"When you pass an object to ",[258,736,737],{},"middlewares",", VFloat automatically executes the built-in middlewares in canonical order:",[321,740,743],{"className":741,"code":742,"language":358,"meta":326,"style":326},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","usePosition(node, {\n  placement: \"bottom-start\",\n  middlewares: {\n    offset: 8,\n    flip: true,\n    shift: { padding: 8 },\n    matchWidth: true,\n  },\n});\n",[258,744,745,755,769,777,787,797,813,824,828],{"__ignoreMap":326},[330,746,747,749,751,753],{"class":332,"line":333},[330,748,126],{"class":443},[330,750,591],{"class":376},[330,752,406],{"class":336},[330,754,596],{"class":336},[330,756,757,759,761,763,765,767],{"class":332,"line":366},[330,758,602],{"class":340},[330,760,605],{"class":336},[330,762,386],{"class":336},[330,764,260],{"class":357},[330,766,354],{"class":336},[330,768,552],{"class":336},[330,770,771,773,775],{"class":332,"line":396},[330,772,619],{"class":340},[330,774,605],{"class":336},[330,776,596],{"class":336},[330,778,779,781,783,785],{"class":332,"line":425},[330,780,629],{"class":340},[330,782,605],{"class":336},[330,784,635],{"class":634},[330,786,552],{"class":336},[330,788,789,791,793,795],{"class":332,"line":432},[330,790,643],{"class":340},[330,792,605],{"class":336},[330,794,648],{"class":516},[330,796,552],{"class":336},[330,798,799,801,803,805,807,809,811],{"class":332,"line":472},[330,800,656],{"class":340},[330,802,605],{"class":336},[330,804,373],{"class":336},[330,806,663],{"class":340},[330,808,605],{"class":336},[330,810,635],{"class":634},[330,812,670],{"class":336},[330,814,815,818,820,822],{"class":332,"line":502},[330,816,817],{"class":340},"    matchWidth",[330,819,605],{"class":336},[330,821,648],{"class":516},[330,823,552],{"class":336},[330,825,826],{"class":332,"line":524},[330,827,676],{"class":336},[330,829,830,832,834],{"class":332,"line":529},[330,831,574],{"class":336},[330,833,467],{"class":376},[330,835,393],{"class":336},[232,837,838],{},"Declarative syntax eliminates ordering bugs because VFloat guarantees each middleware runs in its mathematically optimal slot.",[728,840,842],{"id":841},"imperative-array-pipeline","Imperative array pipeline",[232,844,845],{},"If you need a non-standard execution sequence or want to supply raw middleware instances, pass an array directly:",[321,847,849],{"className":741,"code":848,"language":358,"meta":326,"style":326},"import { flip, offset, shift } from \"@floating-ui\u002Fdom\";\n\nusePosition(node, {\n  placement: \"bottom-start\",\n  middlewares: [offset(8), shift({ padding: 8 }), flip()],\n});\n",[258,850,851,883,887,897,911,957],{"__ignoreMap":326},[330,852,853,855,857,860,862,865,867,870,872,874,876,879,881],{"class":332,"line":333},[330,854,370],{"class":369},[330,856,373],{"class":336},[330,858,859],{"class":376}," flip",[330,861,406],{"class":336},[330,863,864],{"class":376}," offset",[330,866,406],{"class":336},[330,868,869],{"class":376}," shift",[330,871,380],{"class":336},[330,873,383],{"class":369},[330,875,386],{"class":336},[330,877,878],{"class":357},"@floating-ui\u002Fdom",[330,880,354],{"class":336},[330,882,393],{"class":336},[330,884,885],{"class":332,"line":366},[330,886,429],{"emptyLinePlaceholder":428},[330,888,889,891,893,895],{"class":332,"line":396},[330,890,126],{"class":443},[330,892,591],{"class":376},[330,894,406],{"class":336},[330,896,596],{"class":336},[330,898,899,901,903,905,907,909],{"class":332,"line":425},[330,900,602],{"class":340},[330,902,605],{"class":336},[330,904,386],{"class":336},[330,906,260],{"class":357},[330,908,354],{"class":336},[330,910,552],{"class":336},[330,912,913,915,917,920,922,924,927,929,931,933,935,938,940,942,944,946,948,950,952,955],{"class":332,"line":432},[330,914,619],{"class":340},[330,916,605],{"class":336},[330,918,919],{"class":376}," [",[330,921,195],{"class":443},[330,923,461],{"class":376},[330,925,926],{"class":634},"8",[330,928,467],{"class":376},[330,930,406],{"class":336},[330,932,869],{"class":443},[330,934,461],{"class":376},[330,936,937],{"class":336},"{",[330,939,663],{"class":340},[330,941,605],{"class":336},[330,943,635],{"class":634},[330,945,380],{"class":336},[330,947,467],{"class":376},[330,949,406],{"class":336},[330,951,859],{"class":443},[330,953,954],{"class":376},"()]",[330,956,552],{"class":336},[330,958,959,961,963],{"class":332,"line":472},[330,960,574],{"class":336},[330,962,467],{"class":376},[330,964,393],{"class":336},[232,966,967],{},"When passing an array, you take full control over the execution order.",[239,969,971],{"id":970},"common-positioning-solutions","Common positioning solutions",[728,973,975],{"id":974},"add-clearance-from-the-trigger","Add clearance from the trigger",[232,977,978,979,984],{},"Use ",[980,981,982],"a",{"href":196},[258,983,195],{}," to create space between the anchor and the floating panel:",[321,986,988],{"className":741,"code":987,"language":358,"meta":326,"style":326},"middlewares: {\n  offset: 8,\n}\n",[258,989,990,998,1009],{"__ignoreMap":326},[330,991,992,994,996],{"class":332,"line":333},[330,993,737],{"class":448},[330,995,605],{"class":336},[330,997,596],{"class":336},[330,999,1000,1003,1005,1007],{"class":332,"line":366},[330,1001,1002],{"class":448},"  offset",[330,1004,605],{"class":336},[330,1006,635],{"class":634},[330,1008,552],{"class":336},[330,1010,1011],{"class":332,"line":396},[330,1012,1013],{"class":336},"}\n",[232,1015,1016,1017,1020,1021,1024],{},"You can also pass an object to set cross-axis offset (",[258,1018,1019],{},"crossAxis",") or alignment-axis offset (",[258,1022,1023],{},"alignmentAxis","):",[321,1026,1028],{"className":741,"code":1027,"language":358,"meta":326,"style":326},"middlewares: {\n  offset: {\n    mainAxis: 8,\n    crossAxis: 4,\n  },\n}\n",[258,1029,1030,1038,1046,1057,1069,1073],{"__ignoreMap":326},[330,1031,1032,1034,1036],{"class":332,"line":333},[330,1033,737],{"class":448},[330,1035,605],{"class":336},[330,1037,596],{"class":336},[330,1039,1040,1042,1044],{"class":332,"line":366},[330,1041,1002],{"class":448},[330,1043,605],{"class":336},[330,1045,596],{"class":336},[330,1047,1048,1051,1053,1055],{"class":332,"line":396},[330,1049,1050],{"class":448},"    mainAxis",[330,1052,605],{"class":336},[330,1054,635],{"class":634},[330,1056,552],{"class":336},[330,1058,1059,1062,1064,1067],{"class":332,"line":425},[330,1060,1061],{"class":448},"    crossAxis",[330,1063,605],{"class":336},[330,1065,1066],{"class":634}," 4",[330,1068,552],{"class":336},[330,1070,1071],{"class":332,"line":432},[330,1072,676],{"class":336},[330,1074,1075],{"class":332,"line":472},[330,1076,1013],{"class":336},[728,1078,1080],{"id":1079},"handle-collisions-flip-vs-auto-placement","Handle collisions: flip vs auto-placement",[232,1082,1083],{},"When the preferred placement runs out of room, you have two mutually exclusive strategies:",[1085,1086,1087,1104],"table",{},[1088,1089,1090],"thead",{},[1091,1092,1093,1098,1101],"tr",{},[1094,1095,1097],"th",{"align":1096},"left","Strategy",[1094,1099,1100],{"align":1096},"When to use",[1094,1102,1103],{"align":1096},"Behavior",[1105,1106,1107,1124],"tbody",{},[1091,1108,1109,1118,1121],{},[1110,1111,1112],"td",{"align":1096},[253,1113,1114],{},[980,1115,1116],{"href":200},[258,1117,199],{},[1110,1119,1120],{"align":1096},"Default choice. Best when you have an intended placement (e.g. dropdown below an input).",[1110,1122,1123],{"align":1096},"Checks the preferred side first. If it overflows, it tries the opposite side or explicit fallback placements.",[1091,1125,1126,1134,1137],{},[1110,1127,1128],{"align":1096},[253,1129,1130],{},[980,1131,1132],{"href":208},[258,1133,207],{},[1110,1135,1136],{"align":1096},"Tooltips, contextual inspectors, and cursor panels.",[1110,1138,1139],{"align":1096},"Checks all eligible sides and places the panel on whichever side has the greatest available space.",[1141,1142,1144,1145],"h4",{"id":1143},"using-flip","Using ",[258,1146,199],{},[321,1148,1150],{"className":741,"code":1149,"language":358,"meta":326,"style":326},"middlewares: {\n  offset: 8,\n  flip: {\n    fallbackPlacements: [\"top-start\", \"right-start\"],\n    padding: 8,\n  },\n}\n",[258,1151,1152,1160,1170,1179,1209,1220,1224],{"__ignoreMap":326},[330,1153,1154,1156,1158],{"class":332,"line":333},[330,1155,737],{"class":448},[330,1157,605],{"class":336},[330,1159,596],{"class":336},[330,1161,1162,1164,1166,1168],{"class":332,"line":366},[330,1163,1002],{"class":448},[330,1165,605],{"class":336},[330,1167,635],{"class":634},[330,1169,552],{"class":336},[330,1171,1172,1175,1177],{"class":332,"line":396},[330,1173,1174],{"class":448},"  flip",[330,1176,605],{"class":336},[330,1178,596],{"class":336},[330,1180,1181,1184,1186,1188,1190,1193,1195,1197,1199,1202,1204,1207],{"class":332,"line":425},[330,1182,1183],{"class":448},"    fallbackPlacements",[330,1185,605],{"class":336},[330,1187,919],{"class":340},[330,1189,354],{"class":336},[330,1191,1192],{"class":357},"top-start",[330,1194,354],{"class":336},[330,1196,406],{"class":336},[330,1198,386],{"class":336},[330,1200,1201],{"class":357},"right-start",[330,1203,354],{"class":336},[330,1205,1206],{"class":340},"]",[330,1208,552],{"class":336},[330,1210,1211,1214,1216,1218],{"class":332,"line":432},[330,1212,1213],{"class":448},"    padding",[330,1215,605],{"class":336},[330,1217,635],{"class":634},[330,1219,552],{"class":336},[330,1221,1222],{"class":332,"line":472},[330,1223,676],{"class":336},[330,1225,1226],{"class":332,"line":502},[330,1227,1013],{"class":336},[1141,1229,1144,1231],{"id":1230},"using-autoplacement",[258,1232,207],{},[321,1234,1236],{"className":741,"code":1235,"language":358,"meta":326,"style":326},"middlewares: {\n  offset: 8,\n  autoPlacement: {\n    allowedPlacements: [\"top\", \"bottom\", \"right\"],\n    padding: 8,\n  },\n}\n",[258,1237,1238,1246,1256,1265,1303,1313,1317],{"__ignoreMap":326},[330,1239,1240,1242,1244],{"class":332,"line":333},[330,1241,737],{"class":448},[330,1243,605],{"class":336},[330,1245,596],{"class":336},[330,1247,1248,1250,1252,1254],{"class":332,"line":366},[330,1249,1002],{"class":448},[330,1251,605],{"class":336},[330,1253,635],{"class":634},[330,1255,552],{"class":336},[330,1257,1258,1261,1263],{"class":332,"line":396},[330,1259,1260],{"class":448},"  autoPlacement",[330,1262,605],{"class":336},[330,1264,596],{"class":336},[330,1266,1267,1270,1272,1274,1276,1279,1281,1283,1285,1288,1290,1292,1294,1297,1299,1301],{"class":332,"line":425},[330,1268,1269],{"class":448},"    allowedPlacements",[330,1271,605],{"class":336},[330,1273,919],{"class":340},[330,1275,354],{"class":336},[330,1277,1278],{"class":357},"top",[330,1280,354],{"class":336},[330,1282,406],{"class":336},[330,1284,386],{"class":336},[330,1286,1287],{"class":357},"bottom",[330,1289,354],{"class":336},[330,1291,406],{"class":336},[330,1293,386],{"class":336},[330,1295,1296],{"class":357},"right",[330,1298,354],{"class":336},[330,1300,1206],{"class":340},[330,1302,552],{"class":336},[330,1304,1305,1307,1309,1311],{"class":332,"line":432},[330,1306,1213],{"class":448},[330,1308,605],{"class":336},[330,1310,635],{"class":634},[330,1312,552],{"class":336},[330,1314,1315],{"class":332,"line":472},[330,1316,676],{"class":336},[330,1318,1319],{"class":332,"line":502},[330,1320,1013],{"class":336},[232,1322,1323,1324,1326,1327,1329],{},"Choose ",[258,1325,199],{}," when you have a preferred side, or ",[258,1328,207],{}," when any roomy side is acceptable. Do not enable both at the same time.",[728,1331,1333],{"id":1332},"slide-along-boundaries-with-shift","Slide along boundaries with shift",[232,1335,978,1336,1340],{},[980,1337,1338],{"href":204},[258,1339,203],{}," to keep the floating panel within the visible viewport along its cross-axis:",[321,1342,1344],{"className":741,"code":1343,"language":358,"meta":326,"style":326},"middlewares: {\n  offset: 8,\n  flip: true,\n  shift: {\n    padding: 8, \u002F\u002F Minimum distance from viewport edges\n  },\n}\n",[258,1345,1346,1354,1364,1374,1383,1397,1401],{"__ignoreMap":326},[330,1347,1348,1350,1352],{"class":332,"line":333},[330,1349,737],{"class":448},[330,1351,605],{"class":336},[330,1353,596],{"class":336},[330,1355,1356,1358,1360,1362],{"class":332,"line":366},[330,1357,1002],{"class":448},[330,1359,605],{"class":336},[330,1361,635],{"class":634},[330,1363,552],{"class":336},[330,1365,1366,1368,1370,1372],{"class":332,"line":396},[330,1367,1174],{"class":448},[330,1369,605],{"class":336},[330,1371,648],{"class":516},[330,1373,552],{"class":336},[330,1375,1376,1379,1381],{"class":332,"line":425},[330,1377,1378],{"class":448},"  shift",[330,1380,605],{"class":336},[330,1382,596],{"class":336},[330,1384,1385,1387,1389,1391,1393],{"class":332,"line":432},[330,1386,1213],{"class":448},[330,1388,605],{"class":336},[330,1390,635],{"class":634},[330,1392,406],{"class":336},[330,1394,1396],{"class":1395},"sHwdD"," \u002F\u002F Minimum distance from viewport edges\n",[330,1398,1399],{"class":332,"line":472},[330,1400,676],{"class":336},[330,1402,1403],{"class":332,"line":502},[330,1404,1013],{"class":336},[232,1406,1407,1408,1410],{},"If the anchor moves near the screen edge, ",[258,1409,203],{}," nudges the panel inward so it remains visible without changing placement sides.",[728,1412,1414],{"id":1413},"constrain-dimensions-and-match-trigger-width","Constrain dimensions and match trigger width",[232,1416,978,1417,1419,1420,1424],{},[258,1418,299],{}," to lock panel width to the trigger (standard for comboboxes and selects), and ",[980,1421,1422],{"href":212},[258,1423,211],{}," to keep panel height within the viewport:",[321,1426,1428],{"className":323,"code":1427,"language":325,"meta":326,"style":326},"\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);\nconst open = ref(true);\n\nconst node = useFloatingNode({ anchorEl, floatingEl, open });\n\nusePosition(node, {\n  placement: \"bottom-start\",\n  middlewares: {\n    offset: 8,\n    flip: true,\n    shift: { padding: 8 },\n    matchWidth: true, \u002F\u002F Automatically sets width to anchor width\n    size: {\n      apply({ availableHeight }) {\n        if (!floatingEl.value) return;\n\n        Object.assign(floatingEl.value.style, {\n          maxHeight: `${Math.max(100, availableHeight - 16)}px`,\n        });\n      },\n    },\n  },\n});\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cbutton ref=\"anchorEl\" class=\"select-trigger\">Select an option\u003C\u002Fbutton>\n\n  \u003Cdiv v-if=\"open\" ref=\"floatingEl\" class=\"select-menu\">\n    \u003C!-- Scrollable list items -->\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cstyle scoped>\n.select-menu {\n  overflow-y: auto;\n}\n\u003C\u002Fstyle>\n",[258,1429,1430,1450,1470,1494,1498,1526,1554,1572,1576,1608,1612,1622,1636,1644,1654,1664,1680,1693,1702,1719,1747,1751,1778,1824,1834,1840,1846,1851,1860,1869,1874,1884,1927,1932,1975,1981,1991,2000,2005,2017,2026,2040,2045],{"__ignoreMap":326},[330,1431,1432,1434,1436,1438,1440,1442,1444,1446,1448],{"class":332,"line":333},[330,1433,337],{"class":336},[330,1435,341],{"class":340},[330,1437,345],{"class":344},[330,1439,348],{"class":344},[330,1441,351],{"class":336},[330,1443,354],{"class":336},[330,1445,358],{"class":357},[330,1447,354],{"class":336},[330,1449,363],{"class":336},[330,1451,1452,1454,1456,1458,1460,1462,1464,1466,1468],{"class":332,"line":366},[330,1453,370],{"class":369},[330,1455,373],{"class":336},[330,1457,377],{"class":376},[330,1459,380],{"class":336},[330,1461,383],{"class":369},[330,1463,386],{"class":336},[330,1465,325],{"class":357},[330,1467,354],{"class":336},[330,1469,393],{"class":336},[330,1471,1472,1474,1476,1478,1480,1482,1484,1486,1488,1490,1492],{"class":332,"line":396},[330,1473,370],{"class":369},[330,1475,373],{"class":336},[330,1477,403],{"class":376},[330,1479,406],{"class":336},[330,1481,409],{"class":376},[330,1483,380],{"class":336},[330,1485,383],{"class":369},[330,1487,386],{"class":336},[330,1489,418],{"class":357},[330,1491,354],{"class":336},[330,1493,393],{"class":336},[330,1495,1496],{"class":332,"line":425},[330,1497,429],{"emptyLinePlaceholder":428},[330,1499,1500,1502,1504,1506,1508,1510,1512,1514,1516,1518,1520,1522,1524],{"class":332,"line":432},[330,1501,435],{"class":344},[330,1503,438],{"class":376},[330,1505,351],{"class":336},[330,1507,377],{"class":443},[330,1509,337],{"class":336},[330,1511,449],{"class":448},[330,1513,452],{"class":336},[330,1515,455],{"class":448},[330,1517,458],{"class":336},[330,1519,461],{"class":376},[330,1521,464],{"class":336},[330,1523,467],{"class":376},[330,1525,393],{"class":336},[330,1527,1528,1530,1532,1534,1536,1538,1540,1542,1544,1546,1548,1550,1552],{"class":332,"line":472},[330,1529,435],{"class":344},[330,1531,477],{"class":376},[330,1533,351],{"class":336},[330,1535,377],{"class":443},[330,1537,337],{"class":336},[330,1539,449],{"class":448},[330,1541,452],{"class":336},[330,1543,455],{"class":448},[330,1545,458],{"class":336},[330,1547,461],{"class":376},[330,1549,464],{"class":336},[330,1551,467],{"class":376},[330,1553,393],{"class":336},[330,1555,1556,1558,1560,1562,1564,1566,1568,1570],{"class":332,"line":502},[330,1557,435],{"class":344},[330,1559,507],{"class":376},[330,1561,351],{"class":336},[330,1563,377],{"class":443},[330,1565,461],{"class":376},[330,1567,517],{"class":516},[330,1569,467],{"class":376},[330,1571,393],{"class":336},[330,1573,1574],{"class":332,"line":524},[330,1575,429],{"emptyLinePlaceholder":428},[330,1577,1578,1580,1582,1584,1586,1588,1590,1593,1595,1598,1600,1602,1604,1606],{"class":332,"line":529},[330,1579,435],{"class":344},[330,1581,534],{"class":376},[330,1583,351],{"class":336},[330,1585,403],{"class":443},[330,1587,461],{"class":376},[330,1589,937],{"class":336},[330,1591,1592],{"class":376}," anchorEl",[330,1594,406],{"class":336},[330,1596,1597],{"class":376}," floatingEl",[330,1599,406],{"class":336},[330,1601,507],{"class":376},[330,1603,574],{"class":336},[330,1605,467],{"class":376},[330,1607,393],{"class":336},[330,1609,1610],{"class":332,"line":546},[330,1611,429],{"emptyLinePlaceholder":428},[330,1613,1614,1616,1618,1620],{"class":332,"line":555},[330,1615,126],{"class":443},[330,1617,591],{"class":376},[330,1619,406],{"class":336},[330,1621,596],{"class":336},[330,1623,1624,1626,1628,1630,1632,1634],{"class":332,"line":563},[330,1625,602],{"class":340},[330,1627,605],{"class":336},[330,1629,386],{"class":336},[330,1631,260],{"class":357},[330,1633,354],{"class":336},[330,1635,552],{"class":336},[330,1637,1638,1640,1642],{"class":332,"line":571},[330,1639,619],{"class":340},[330,1641,605],{"class":336},[330,1643,596],{"class":336},[330,1645,1646,1648,1650,1652],{"class":332,"line":581},[330,1647,629],{"class":340},[330,1649,605],{"class":336},[330,1651,635],{"class":634},[330,1653,552],{"class":336},[330,1655,1656,1658,1660,1662],{"class":332,"line":586},[330,1657,643],{"class":340},[330,1659,605],{"class":336},[330,1661,648],{"class":516},[330,1663,552],{"class":336},[330,1665,1666,1668,1670,1672,1674,1676,1678],{"class":332,"line":599},[330,1667,656],{"class":340},[330,1669,605],{"class":336},[330,1671,373],{"class":336},[330,1673,663],{"class":340},[330,1675,605],{"class":336},[330,1677,635],{"class":634},[330,1679,670],{"class":336},[330,1681,1682,1684,1686,1688,1690],{"class":332,"line":616},[330,1683,817],{"class":340},[330,1685,605],{"class":336},[330,1687,648],{"class":516},[330,1689,406],{"class":336},[330,1691,1692],{"class":1395}," \u002F\u002F Automatically sets width to anchor width\n",[330,1694,1695,1698,1700],{"class":332,"line":626},[330,1696,1697],{"class":340},"    size",[330,1699,605],{"class":336},[330,1701,596],{"class":336},[330,1703,1704,1707,1710,1714,1717],{"class":332,"line":640},[330,1705,1706],{"class":340},"      apply",[330,1708,1709],{"class":336},"({",[330,1711,1713],{"class":1712},"sHdIc"," availableHeight",[330,1715,1716],{"class":336}," })",[330,1718,596],{"class":336},[330,1720,1721,1724,1727,1730,1733,1736,1739,1742,1745],{"class":332,"line":653},[330,1722,1723],{"class":369},"        if",[330,1725,1726],{"class":340}," (",[330,1728,1729],{"class":336},"!",[330,1731,1732],{"class":376},"floatingEl",[330,1734,1735],{"class":336},".",[330,1737,1738],{"class":376},"value",[330,1740,1741],{"class":340},") ",[330,1743,1744],{"class":369},"return",[330,1746,393],{"class":336},[330,1748,1749],{"class":332,"line":673},[330,1750,429],{"emptyLinePlaceholder":428},[330,1752,1753,1756,1758,1761,1763,1765,1767,1769,1771,1774,1776],{"class":332,"line":679},[330,1754,1755],{"class":376},"        Object",[330,1757,1735],{"class":336},[330,1759,1760],{"class":443},"assign",[330,1762,461],{"class":340},[330,1764,1732],{"class":376},[330,1766,1735],{"class":336},[330,1768,1738],{"class":376},[330,1770,1735],{"class":336},[330,1772,1773],{"class":376},"style",[330,1775,406],{"class":336},[330,1777,596],{"class":336},[330,1779,1780,1783,1785,1788,1791,1793,1796,1798,1801,1803,1806,1809,1812,1814,1816,1819,1822],{"class":332,"line":688},[330,1781,1782],{"class":340},"          maxHeight",[330,1784,605],{"class":336},[330,1786,1787],{"class":336}," `${",[330,1789,1790],{"class":376},"Math",[330,1792,1735],{"class":336},[330,1794,1795],{"class":443},"max",[330,1797,461],{"class":376},[330,1799,1800],{"class":634},"100",[330,1802,406],{"class":336},[330,1804,1805],{"class":376}," availableHeight ",[330,1807,1808],{"class":336},"-",[330,1810,1811],{"class":634}," 16",[330,1813,467],{"class":376},[330,1815,574],{"class":336},[330,1817,1818],{"class":357},"px",[330,1820,1821],{"class":336},"`",[330,1823,552],{"class":336},[330,1825,1827,1830,1832],{"class":332,"line":1826},24,[330,1828,1829],{"class":336},"        }",[330,1831,467],{"class":340},[330,1833,393],{"class":336},[330,1835,1837],{"class":332,"line":1836},25,[330,1838,1839],{"class":336},"      },\n",[330,1841,1843],{"class":332,"line":1842},26,[330,1844,1845],{"class":336},"    },\n",[330,1847,1849],{"class":332,"line":1848},27,[330,1850,676],{"class":336},[330,1852,1854,1856,1858],{"class":332,"line":1853},28,[330,1855,574],{"class":336},[330,1857,467],{"class":376},[330,1859,393],{"class":336},[330,1861,1863,1865,1867],{"class":332,"line":1862},29,[330,1864,691],{"class":336},[330,1866,341],{"class":340},[330,1868,363],{"class":336},[330,1870,1872],{"class":332,"line":1871},30,[330,1873,429],{"emptyLinePlaceholder":428},[330,1875,1877,1879,1882],{"class":332,"line":1876},31,[330,1878,337],{"class":336},[330,1880,1881],{"class":340},"template",[330,1883,363],{"class":336},[330,1885,1887,1890,1893,1895,1897,1899,1902,1904,1907,1909,1911,1914,1916,1918,1921,1923,1925],{"class":332,"line":1886},32,[330,1888,1889],{"class":336},"  \u003C",[330,1891,1892],{"class":340},"button",[330,1894,377],{"class":344},[330,1896,351],{"class":336},[330,1898,354],{"class":336},[330,1900,1901],{"class":357},"anchorEl",[330,1903,354],{"class":336},[330,1905,1906],{"class":344}," class",[330,1908,351],{"class":336},[330,1910,354],{"class":336},[330,1912,1913],{"class":357},"select-trigger",[330,1915,354],{"class":336},[330,1917,458],{"class":336},[330,1919,1920],{"class":376},"Select an option",[330,1922,691],{"class":336},[330,1924,1892],{"class":340},[330,1926,363],{"class":336},[330,1928,1930],{"class":332,"line":1929},33,[330,1931,429],{"emptyLinePlaceholder":428},[330,1933,1935,1937,1940,1943,1945,1947,1950,1952,1954,1956,1958,1960,1962,1964,1966,1968,1971,1973],{"class":332,"line":1934},34,[330,1936,1889],{"class":336},[330,1938,1939],{"class":340},"div",[330,1941,1942],{"class":344}," v-if",[330,1944,351],{"class":336},[330,1946,354],{"class":336},[330,1948,1949],{"class":357},"open",[330,1951,354],{"class":336},[330,1953,377],{"class":344},[330,1955,351],{"class":336},[330,1957,354],{"class":336},[330,1959,1732],{"class":357},[330,1961,354],{"class":336},[330,1963,1906],{"class":344},[330,1965,351],{"class":336},[330,1967,354],{"class":336},[330,1969,1970],{"class":357},"select-menu",[330,1972,354],{"class":336},[330,1974,363],{"class":336},[330,1976,1978],{"class":332,"line":1977},35,[330,1979,1980],{"class":1395},"    \u003C!-- Scrollable list items -->\n",[330,1982,1984,1987,1989],{"class":332,"line":1983},36,[330,1985,1986],{"class":336},"  \u003C\u002F",[330,1988,1939],{"class":340},[330,1990,363],{"class":336},[330,1992,1994,1996,1998],{"class":332,"line":1993},37,[330,1995,691],{"class":336},[330,1997,1881],{"class":340},[330,1999,363],{"class":336},[330,2001,2003],{"class":332,"line":2002},38,[330,2004,429],{"emptyLinePlaceholder":428},[330,2006,2008,2010,2012,2015],{"class":332,"line":2007},39,[330,2009,337],{"class":336},[330,2011,1773],{"class":340},[330,2013,2014],{"class":344}," scoped",[330,2016,363],{"class":336},[330,2018,2020,2022,2024],{"class":332,"line":2019},40,[330,2021,1735],{"class":336},[330,2023,1970],{"class":448},[330,2025,596],{"class":336},[330,2027,2029,2033,2035,2038],{"class":332,"line":2028},41,[330,2030,2032],{"class":2031},"sqsOY","  overflow-y",[330,2034,605],{"class":336},[330,2036,2037],{"class":376}," auto",[330,2039,393],{"class":336},[330,2041,2043],{"class":332,"line":2042},42,[330,2044,1013],{"class":336},[330,2046,2048,2050,2052],{"class":332,"line":2047},43,[330,2049,691],{"class":336},[330,2051,1773],{"class":340},[330,2053,363],{"class":336},[232,2055,2056,2057,2060,2061,2064],{},"Applying ",[258,2058,2059],{},"availableHeight"," inside ",[258,2062,2063],{},"size.apply"," guarantees long listboxes scroll gracefully rather than expanding off screen.",[728,2066,2068],{"id":2067},"detect-scrolled-off-anchors-with-hide","Detect scrolled-off anchors with hide",[232,2070,978,2071,2075],{},[980,2072,2073],{"href":224},[258,2074,223],{}," when the anchor is inside a scroll container and may scroll out of view while the floating surface remains open:",[321,2077,2079],{"className":323,"code":2078,"language":325,"meta":326,"style":326},"\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);\nconst open = ref(true);\n\nconst node = useFloatingNode({ anchorEl, floatingEl, open });\n\nconst { middlewareData } = usePosition(node, {\n  placement: \"top\",\n  middlewares: {\n    offset: 8,\n    hide: true,\n  },\n});\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cdiv\n    v-if=\"open\"\n    ref=\"floatingEl\"\n    class=\"tooltip\"\n    :style=\"{\n      visibility: middlewareData.hide?.referenceHidden ? 'hidden' : 'visible',\n    }\"\n  >\n    Tooltip text\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n",[258,2080,2081,2101,2121,2145,2149,2177,2205,2223,2227,2257,2261,2283,2297,2305,2315,2326,2330,2338,2346,2350,2358,2365,2379,2392,2406,2417,2422,2429,2434,2439,2447],{"__ignoreMap":326},[330,2082,2083,2085,2087,2089,2091,2093,2095,2097,2099],{"class":332,"line":333},[330,2084,337],{"class":336},[330,2086,341],{"class":340},[330,2088,345],{"class":344},[330,2090,348],{"class":344},[330,2092,351],{"class":336},[330,2094,354],{"class":336},[330,2096,358],{"class":357},[330,2098,354],{"class":336},[330,2100,363],{"class":336},[330,2102,2103,2105,2107,2109,2111,2113,2115,2117,2119],{"class":332,"line":366},[330,2104,370],{"class":369},[330,2106,373],{"class":336},[330,2108,377],{"class":376},[330,2110,380],{"class":336},[330,2112,383],{"class":369},[330,2114,386],{"class":336},[330,2116,325],{"class":357},[330,2118,354],{"class":336},[330,2120,393],{"class":336},[330,2122,2123,2125,2127,2129,2131,2133,2135,2137,2139,2141,2143],{"class":332,"line":396},[330,2124,370],{"class":369},[330,2126,373],{"class":336},[330,2128,403],{"class":376},[330,2130,406],{"class":336},[330,2132,409],{"class":376},[330,2134,380],{"class":336},[330,2136,383],{"class":369},[330,2138,386],{"class":336},[330,2140,418],{"class":357},[330,2142,354],{"class":336},[330,2144,393],{"class":336},[330,2146,2147],{"class":332,"line":425},[330,2148,429],{"emptyLinePlaceholder":428},[330,2150,2151,2153,2155,2157,2159,2161,2163,2165,2167,2169,2171,2173,2175],{"class":332,"line":432},[330,2152,435],{"class":344},[330,2154,438],{"class":376},[330,2156,351],{"class":336},[330,2158,377],{"class":443},[330,2160,337],{"class":336},[330,2162,449],{"class":448},[330,2164,452],{"class":336},[330,2166,455],{"class":448},[330,2168,458],{"class":336},[330,2170,461],{"class":376},[330,2172,464],{"class":336},[330,2174,467],{"class":376},[330,2176,393],{"class":336},[330,2178,2179,2181,2183,2185,2187,2189,2191,2193,2195,2197,2199,2201,2203],{"class":332,"line":472},[330,2180,435],{"class":344},[330,2182,477],{"class":376},[330,2184,351],{"class":336},[330,2186,377],{"class":443},[330,2188,337],{"class":336},[330,2190,449],{"class":448},[330,2192,452],{"class":336},[330,2194,455],{"class":448},[330,2196,458],{"class":336},[330,2198,461],{"class":376},[330,2200,464],{"class":336},[330,2202,467],{"class":376},[330,2204,393],{"class":336},[330,2206,2207,2209,2211,2213,2215,2217,2219,2221],{"class":332,"line":502},[330,2208,435],{"class":344},[330,2210,507],{"class":376},[330,2212,351],{"class":336},[330,2214,377],{"class":443},[330,2216,461],{"class":376},[330,2218,517],{"class":516},[330,2220,467],{"class":376},[330,2222,393],{"class":336},[330,2224,2225],{"class":332,"line":524},[330,2226,429],{"emptyLinePlaceholder":428},[330,2228,2229,2231,2233,2235,2237,2239,2241,2243,2245,2247,2249,2251,2253,2255],{"class":332,"line":529},[330,2230,435],{"class":344},[330,2232,534],{"class":376},[330,2234,351],{"class":336},[330,2236,403],{"class":443},[330,2238,461],{"class":376},[330,2240,937],{"class":336},[330,2242,1592],{"class":376},[330,2244,406],{"class":336},[330,2246,1597],{"class":376},[330,2248,406],{"class":336},[330,2250,507],{"class":376},[330,2252,574],{"class":336},[330,2254,467],{"class":376},[330,2256,393],{"class":336},[330,2258,2259],{"class":332,"line":546},[330,2260,429],{"emptyLinePlaceholder":428},[330,2262,2263,2265,2267,2270,2272,2275,2277,2279,2281],{"class":332,"line":555},[330,2264,435],{"class":344},[330,2266,373],{"class":336},[330,2268,2269],{"class":376}," middlewareData ",[330,2271,574],{"class":336},[330,2273,2274],{"class":336}," =",[330,2276,409],{"class":443},[330,2278,591],{"class":376},[330,2280,406],{"class":336},[330,2282,596],{"class":336},[330,2284,2285,2287,2289,2291,2293,2295],{"class":332,"line":563},[330,2286,602],{"class":340},[330,2288,605],{"class":336},[330,2290,386],{"class":336},[330,2292,1278],{"class":357},[330,2294,354],{"class":336},[330,2296,552],{"class":336},[330,2298,2299,2301,2303],{"class":332,"line":571},[330,2300,619],{"class":340},[330,2302,605],{"class":336},[330,2304,596],{"class":336},[330,2306,2307,2309,2311,2313],{"class":332,"line":581},[330,2308,629],{"class":340},[330,2310,605],{"class":336},[330,2312,635],{"class":634},[330,2314,552],{"class":336},[330,2316,2317,2320,2322,2324],{"class":332,"line":586},[330,2318,2319],{"class":340},"    hide",[330,2321,605],{"class":336},[330,2323,648],{"class":516},[330,2325,552],{"class":336},[330,2327,2328],{"class":332,"line":599},[330,2329,676],{"class":336},[330,2331,2332,2334,2336],{"class":332,"line":616},[330,2333,574],{"class":336},[330,2335,467],{"class":376},[330,2337,393],{"class":336},[330,2339,2340,2342,2344],{"class":332,"line":626},[330,2341,691],{"class":336},[330,2343,341],{"class":340},[330,2345,363],{"class":336},[330,2347,2348],{"class":332,"line":640},[330,2349,429],{"emptyLinePlaceholder":428},[330,2351,2352,2354,2356],{"class":332,"line":653},[330,2353,337],{"class":336},[330,2355,1881],{"class":340},[330,2357,363],{"class":336},[330,2359,2360,2362],{"class":332,"line":673},[330,2361,1889],{"class":336},[330,2363,2364],{"class":340},"div\n",[330,2366,2367,2370,2372,2374,2376],{"class":332,"line":679},[330,2368,2369],{"class":344},"    v-if",[330,2371,351],{"class":336},[330,2373,354],{"class":336},[330,2375,1949],{"class":357},[330,2377,2378],{"class":336},"\"\n",[330,2380,2381,2384,2386,2388,2390],{"class":332,"line":688},[330,2382,2383],{"class":344},"    ref",[330,2385,351],{"class":336},[330,2387,354],{"class":336},[330,2389,1732],{"class":357},[330,2391,2378],{"class":336},[330,2393,2394,2397,2399,2401,2404],{"class":332,"line":1826},[330,2395,2396],{"class":344},"    class",[330,2398,351],{"class":336},[330,2400,354],{"class":336},[330,2402,2403],{"class":357},"tooltip",[330,2405,2378],{"class":336},[330,2407,2408,2411,2413,2415],{"class":332,"line":1836},[330,2409,2410],{"class":344},"    :style",[330,2412,351],{"class":336},[330,2414,354],{"class":336},[330,2416,543],{"class":357},[330,2418,2419],{"class":332,"line":1842},[330,2420,2421],{"class":357},"      visibility: middlewareData.hide?.referenceHidden ? 'hidden' : 'visible',\n",[330,2423,2424,2427],{"class":332,"line":1848},[330,2425,2426],{"class":357},"    }",[330,2428,2378],{"class":336},[330,2430,2431],{"class":332,"line":1853},[330,2432,2433],{"class":336},"  >\n",[330,2435,2436],{"class":332,"line":1862},[330,2437,2438],{"class":376},"    Tooltip text\n",[330,2440,2441,2443,2445],{"class":332,"line":1871},[330,2442,1986],{"class":336},[330,2444,1939],{"class":340},[330,2446,363],{"class":336},[330,2448,2449,2451,2453],{"class":332,"line":1876},[330,2450,691],{"class":336},[330,2452,1881],{"class":340},[330,2454,363],{"class":336},[232,2456,2457,2458,2461,2462,2464],{},"When ",[258,2459,2460],{},"referenceHidden"," is ",[258,2463,517],{},", the anchor element is clipped by an ancestor scroll container. Hiding the floating surface prevents detached floating panels from hovering over unrelated content.",[239,2466,2468],{"id":2467},"canonical-pipeline-sequence","Canonical pipeline sequence",[232,2470,2471],{},"When you configure middlewares via the declarative object syntax, VFloat executes them in this canonical order:",[247,2473,2474,2481,2488,2497,2504,2513,2520,2527],{},[250,2475,2476,2480],{},[253,2477,2478,1735],{},[258,2479,215],{}," Resolves multi-line client rects for wrapped text anchors.",[250,2482,2483,2487],{},[253,2484,2485,1735],{},[258,2486,195],{}," Adds spacing between anchor and floating element before collision tests.",[250,2489,2490,2496],{},[253,2491,2492,278,2494,1735],{},[258,2493,199],{},[258,2495,207],{}," Selects the side with sufficient room.",[250,2498,2499,2503],{},[253,2500,2501,1735],{},[258,2502,203],{}," Nudges the surface along the cross-axis to stay within viewport bounds.",[250,2505,2506,2512],{},[253,2507,2508,278,2510,1735],{},[258,2509,299],{},[258,2511,211],{}," Constrains width to match anchor or restricts height to available space.",[250,2514,2515,2519],{},[253,2516,2517,1735],{},[258,2518,223],{}," Checks whether anchor or panel is clipped out of view.",[250,2521,2522,2526],{},[253,2523,2524,1735],{},[258,2525,219],{}," Aligns a pointed arrow indicator against the finalized panel coordinates.",[250,2528,2529,2534],{},[253,2530,2531,1735],{},[258,2532,2533],{},"custom"," Runs user-provided custom middlewares.",[728,2536,2538],{"id":2537},"why-order-matters","Why order matters",[232,2540,2541],{},"Middlewares receive the transformed coordinates of preceding steps. If the order changes, calculation results diverge:",[700,2543,2544,2569,2581,2590],{},[250,2545,2546,2554,2555,2559,2560,2562,2563,2565,2566,2568],{},[253,2547,2548,2549,2551,2552,605],{},"Why ",[258,2550,195],{}," runs before ",[258,2553,199],{}," Collision tests must evaluate whether the surface fits ",[2556,2557,2558],"em",{},"including"," its margin. If ",[258,2561,199],{}," ran before ",[258,2564,195],{},", a panel might fit unshifted, only to overflow the viewport once ",[258,2567,195],{}," pushes it outward.",[250,2570,2571,2577,2578,2580],{},[253,2572,2548,2573,2551,2575,605],{},[258,2574,199],{},[258,2576,203],{}," Flipping determines which side of the anchor to use. Shifting slides along that side's boundary edge. If ",[258,2579,203],{}," ran first, the panel would slide along the wrong side before flipping.",[250,2582,2583,2589],{},[253,2584,2548,2585,2551,2587,605],{},[258,2586,211],{},[258,2588,203],{}," Restricting height or width modifies element geometry. Shifting must clamp the element's actual constrained boundaries, not its unconstrained starting size.",[250,2591,2592,2597],{},[253,2593,2548,2594,2596],{},[258,2595,219],{}," runs last:"," Arrow alignment depends on the final, stabilized positions of both anchor and floating panel after all collision and clamping shifts have completed.",[239,2599,2601],{"id":2600},"authoring-custom-middlewares","Authoring custom middlewares",[232,2603,2604],{},"You can create custom middlewares to apply project-specific positioning logic, such as coordinate snapping or boundary clamps:",[321,2606,2608],{"className":741,"code":2607,"language":358,"meta":326,"style":326},"import type { Middleware } from \"@floating-ui\u002Fdom\";\n\nexport function snapToGrid(step = 8): Middleware {\n  return {\n    name: \"snapToGrid\",\n    fn({ x, y }) {\n      return {\n        x: Math.round(x \u002F step) * step,\n        y: Math.round(y \u002F step) * step,\n      };\n    },\n  };\n}\n",[258,2609,2610,2634,2638,2664,2671,2687,2706,2713,2748,2778,2783,2787,2792],{"__ignoreMap":326},[330,2611,2612,2614,2617,2619,2622,2624,2626,2628,2630,2632],{"class":332,"line":333},[330,2613,370],{"class":369},[330,2615,2616],{"class":369}," type",[330,2618,373],{"class":336},[330,2620,2621],{"class":376}," Middleware",[330,2623,380],{"class":336},[330,2625,383],{"class":369},[330,2627,386],{"class":336},[330,2629,878],{"class":357},[330,2631,354],{"class":336},[330,2633,393],{"class":336},[330,2635,2636],{"class":332,"line":366},[330,2637,429],{"emptyLinePlaceholder":428},[330,2639,2640,2643,2646,2649,2651,2654,2656,2658,2660,2662],{"class":332,"line":396},[330,2641,2642],{"class":369},"export",[330,2644,2645],{"class":344}," function",[330,2647,2648],{"class":443}," snapToGrid",[330,2650,461],{"class":336},[330,2652,2653],{"class":1712},"step",[330,2655,2274],{"class":336},[330,2657,635],{"class":634},[330,2659,1024],{"class":336},[330,2661,2621],{"class":448},[330,2663,596],{"class":336},[330,2665,2666,2669],{"class":332,"line":425},[330,2667,2668],{"class":369},"  return",[330,2670,596],{"class":336},[330,2672,2673,2676,2678,2680,2683,2685],{"class":332,"line":432},[330,2674,2675],{"class":340},"    name",[330,2677,605],{"class":336},[330,2679,386],{"class":336},[330,2681,2682],{"class":357},"snapToGrid",[330,2684,354],{"class":336},[330,2686,552],{"class":336},[330,2688,2689,2692,2694,2697,2699,2702,2704],{"class":332,"line":472},[330,2690,2691],{"class":340},"    fn",[330,2693,1709],{"class":336},[330,2695,2696],{"class":1712}," x",[330,2698,406],{"class":336},[330,2700,2701],{"class":1712}," y",[330,2703,1716],{"class":336},[330,2705,596],{"class":336},[330,2707,2708,2711],{"class":332,"line":502},[330,2709,2710],{"class":369},"      return",[330,2712,596],{"class":336},[330,2714,2715,2718,2720,2723,2725,2728,2730,2733,2736,2739,2741,2744,2746],{"class":332,"line":524},[330,2716,2717],{"class":340},"        x",[330,2719,605],{"class":336},[330,2721,2722],{"class":376}," Math",[330,2724,1735],{"class":336},[330,2726,2727],{"class":443},"round",[330,2729,461],{"class":340},[330,2731,2732],{"class":376},"x",[330,2734,2735],{"class":336}," \u002F",[330,2737,2738],{"class":376}," step",[330,2740,1741],{"class":340},[330,2742,2743],{"class":336},"*",[330,2745,2738],{"class":376},[330,2747,552],{"class":336},[330,2749,2750,2753,2755,2757,2759,2761,2763,2766,2768,2770,2772,2774,2776],{"class":332,"line":529},[330,2751,2752],{"class":340},"        y",[330,2754,605],{"class":336},[330,2756,2722],{"class":376},[330,2758,1735],{"class":336},[330,2760,2727],{"class":443},[330,2762,461],{"class":340},[330,2764,2765],{"class":376},"y",[330,2767,2735],{"class":336},[330,2769,2738],{"class":376},[330,2771,1741],{"class":340},[330,2773,2743],{"class":336},[330,2775,2738],{"class":376},[330,2777,552],{"class":336},[330,2779,2780],{"class":332,"line":546},[330,2781,2782],{"class":336},"      };\n",[330,2784,2785],{"class":332,"line":555},[330,2786,1845],{"class":336},[330,2788,2789],{"class":332,"line":563},[330,2790,2791],{"class":336},"  };\n",[330,2793,2794],{"class":332,"line":571},[330,2795,1013],{"class":336},[232,2797,2798,2799,605],{},"To run a custom middleware with declarative options, pass it via ",[258,2800,2533],{},[321,2802,2804],{"className":741,"code":2803,"language":358,"meta":326,"style":326},"usePosition(node, {\n  placement: \"bottom-start\",\n  middlewares: {\n    offset: 8,\n    flip: true,\n    shift: { padding: 8 },\n    custom: [snapToGrid(8)],\n  },\n});\n",[258,2805,2806,2816,2830,2838,2848,2858,2874,2894,2898],{"__ignoreMap":326},[330,2807,2808,2810,2812,2814],{"class":332,"line":333},[330,2809,126],{"class":443},[330,2811,591],{"class":376},[330,2813,406],{"class":336},[330,2815,596],{"class":336},[330,2817,2818,2820,2822,2824,2826,2828],{"class":332,"line":366},[330,2819,602],{"class":340},[330,2821,605],{"class":336},[330,2823,386],{"class":336},[330,2825,260],{"class":357},[330,2827,354],{"class":336},[330,2829,552],{"class":336},[330,2831,2832,2834,2836],{"class":332,"line":396},[330,2833,619],{"class":340},[330,2835,605],{"class":336},[330,2837,596],{"class":336},[330,2839,2840,2842,2844,2846],{"class":332,"line":425},[330,2841,629],{"class":340},[330,2843,605],{"class":336},[330,2845,635],{"class":634},[330,2847,552],{"class":336},[330,2849,2850,2852,2854,2856],{"class":332,"line":432},[330,2851,643],{"class":340},[330,2853,605],{"class":336},[330,2855,648],{"class":516},[330,2857,552],{"class":336},[330,2859,2860,2862,2864,2866,2868,2870,2872],{"class":332,"line":472},[330,2861,656],{"class":340},[330,2863,605],{"class":336},[330,2865,373],{"class":336},[330,2867,663],{"class":340},[330,2869,605],{"class":336},[330,2871,635],{"class":634},[330,2873,670],{"class":336},[330,2875,2876,2879,2881,2883,2885,2887,2889,2892],{"class":332,"line":502},[330,2877,2878],{"class":340},"    custom",[330,2880,605],{"class":336},[330,2882,919],{"class":376},[330,2884,2682],{"class":443},[330,2886,461],{"class":376},[330,2888,926],{"class":634},[330,2890,2891],{"class":376},")]",[330,2893,552],{"class":336},[330,2895,2896],{"class":332,"line":524},[330,2897,676],{"class":336},[330,2899,2900,2902,2904],{"class":332,"line":529},[330,2901,574],{"class":336},[330,2903,467],{"class":376},[330,2905,393],{"class":336},[232,2907,2908,2909,2911],{},"Custom middlewares in ",[258,2910,2533],{}," execute after all built-in middlewares, receiving the fully resolved coordinates.",[239,2913,2915],{"id":2914},"where-to-go-next","Where to go next",[700,2917,2918,2924,2929,2938],{},[250,2919,2920,2921,2923],{},"Read ",[980,2922,61],{"href":62}," to position against pointer coordinates and synthetic elements.",[250,2925,2920,2926,2928],{},[980,2927,65],{"href":66}," to add smooth motion without layout jumps.",[250,2930,2931,2932,2937],{},"Inspect the ",[980,2933,2934,2936],{"href":127},[258,2935,126],{}," API Reference"," for detailed composable signatures and return types.",[250,2939,2931,2940,2944],{},[980,2941,2942,2936],{"href":131},[258,2943,130],{}," to connect pointed indicators.",[1773,2946,2947],{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}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 .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .sqsOY, html code.shiki .sqsOY{--shiki-light:#8796B0;--shiki-default:#B2CCD6;--shiki-dark:#B2CCD6}",{"title":326,"searchDepth":366,"depth":366,"links":2949},[2950,2951,2955,2962,2965,2966],{"id":241,"depth":366,"text":242},{"id":722,"depth":366,"text":723,"children":2952},[2953,2954],{"id":730,"depth":396,"text":731},{"id":841,"depth":396,"text":842},{"id":970,"depth":366,"text":971,"children":2956},[2957,2958,2959,2960,2961],{"id":974,"depth":396,"text":975},{"id":1079,"depth":396,"text":1080},{"id":1332,"depth":396,"text":1333},{"id":1413,"depth":396,"text":1414},{"id":2067,"depth":396,"text":2068},{"id":2467,"depth":366,"text":2468,"children":2963},[2964],{"id":2537,"depth":396,"text":2538},{"id":2600,"depth":366,"text":2601},{"id":2914,"depth":366,"text":2915},"Configure positioning middlewares to handle spacing, collisions, sizing, and boundary constraints.","md",null,{},{"title":57,"description":2967},"rX4h2zb7KphnTkeVyjK5cqtYFTSZpDhplD82Ts-k_uY",[2974,2976],{"title":48,"path":49,"stem":50,"description":2975,"children":-1},"How nested floating surfaces coordinate across teleport boundaries.",{"title":61,"path":62,"stem":63,"description":2977,"children":-1},"Position floating content from pointer coordinates, synthetic rectangles, and dynamic selections.",1791268049017]