[{"data":1,"prerenderedAt":1903},["ShallowReactive",2],{"navigation_docs":3,"-guide-positioning-keep-content-in-view":271,"-guide-positioning-keep-content-in-view-surround":1898},[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":80,"body":273,"description":1892,"extension":1893,"links":1894,"meta":1895,"navigation":433,"path":81,"seo":1896,"stem":82,"__hash__":1897},"docs\u002F1.guide\u002F4.positioning\u002F1.keep-content-in-view.md",{"type":274,"value":275,"toc":1880},"minimark",[276,285,288,293,296,315,318,322,325,697,700,720,724,733,763,767,774,812,816,823,877,881,890,1327,1331,1338,1392,1407,1411,1418,1742,1765,1769,1772,1778,1844,1853,1857,1877],[277,278,279,280,284],"p",{},"Base placement gets you close. Real floating surfaces still run into viewport edges, scroll containers, and size limits. That is where ",[281,282,283],"code",{},"middlewares"," options help.",[277,286,287],{},"This guide treats middleware like a small set of fixes. When you notice a problem, pick the fix that matches it.",[289,290,292],"h2",{"id":291},"start-from-the-problem","Start from the problem",[277,294,295],{},"The easiest way to reason about middleware is to ask:",[297,298,299,303,306,309,312],"ul",{},[300,301,302],"li",{},"Does the surface need space from the anchor?",[300,304,305],{},"Does it need to change sides when space runs out?",[300,307,308],{},"Does it need to stay inside visible boundaries?",[300,310,311],{},"Does it need to resize itself?",[300,313,314],{},"Does it need an arrow?",[277,316,317],{},"Each of those problems maps to a middleware or helper.",[289,319,321],{"id":320},"the-standard-baseline-stack","The standard baseline stack",[277,323,324],{},"This is the stack many production surfaces end up using first.",[326,327,332],"pre",{"className":328,"code":329,"language":330,"meta":331,"style":331},"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});\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","",[281,333,334,369,399,428,435,475,505,527,532,549,558,566,574,584,597,615,625,639,652,672,678,687],{"__ignoreMap":331},[335,336,339,343,347,351,354,357,360,364,366],"span",{"class":337,"line":338},"line",1,[335,340,342],{"class":341},"sMK4o","\u003C",[335,344,346],{"class":345},"swJcz","script",[335,348,350],{"class":349},"spNyl"," setup",[335,352,353],{"class":349}," lang",[335,355,356],{"class":341},"=",[335,358,359],{"class":341},"\"",[335,361,363],{"class":362},"sfazB","ts",[335,365,359],{"class":341},[335,367,368],{"class":341},">\n",[335,370,372,376,379,383,386,389,392,394,396],{"class":337,"line":371},2,[335,373,375],{"class":374},"s7zQu","import",[335,377,378],{"class":341}," {",[335,380,382],{"class":381},"sTEyZ"," ref",[335,384,385],{"class":341}," }",[335,387,388],{"class":374}," from",[335,390,391],{"class":341}," \"",[335,393,330],{"class":362},[335,395,359],{"class":341},[335,397,398],{"class":341},";\n",[335,400,402,404,406,409,412,415,417,419,421,424,426],{"class":337,"line":401},3,[335,403,375],{"class":374},[335,405,378],{"class":341},[335,407,408],{"class":381}," useFloatingNode",[335,410,411],{"class":341},",",[335,413,414],{"class":381}," usePosition",[335,416,385],{"class":341},[335,418,388],{"class":374},[335,420,391],{"class":341},[335,422,423],{"class":362},"v-float",[335,425,359],{"class":341},[335,427,398],{"class":341},[335,429,431],{"class":337,"line":430},4,[335,432,434],{"emptyLinePlaceholder":433},true,"\n",[335,436,438,441,444,446,449,451,455,458,461,464,467,470,473],{"class":337,"line":437},5,[335,439,440],{"class":349},"const",[335,442,443],{"class":381}," anchorEl ",[335,445,356],{"class":341},[335,447,382],{"class":448},"s2Zo4",[335,450,342],{"class":341},[335,452,454],{"class":453},"sBMFI","HTMLElement",[335,456,457],{"class":341}," |",[335,459,460],{"class":453}," null",[335,462,463],{"class":341},">",[335,465,466],{"class":381},"(",[335,468,469],{"class":341},"null",[335,471,472],{"class":381},")",[335,474,398],{"class":341},[335,476,478,480,483,485,487,489,491,493,495,497,499,501,503],{"class":337,"line":477},6,[335,479,440],{"class":349},[335,481,482],{"class":381}," floatingEl ",[335,484,356],{"class":341},[335,486,382],{"class":448},[335,488,342],{"class":341},[335,490,454],{"class":453},[335,492,457],{"class":341},[335,494,460],{"class":453},[335,496,463],{"class":341},[335,498,466],{"class":381},[335,500,469],{"class":341},[335,502,472],{"class":381},[335,504,398],{"class":341},[335,506,508,510,513,515,517,519,523,525],{"class":337,"line":507},7,[335,509,440],{"class":349},[335,511,512],{"class":381}," open ",[335,514,356],{"class":341},[335,516,382],{"class":448},[335,518,466],{"class":381},[335,520,522],{"class":521},"sfNiH","true",[335,524,472],{"class":381},[335,526,398],{"class":341},[335,528,530],{"class":337,"line":529},8,[335,531,434],{"emptyLinePlaceholder":433},[335,533,535,537,540,542,544,546],{"class":337,"line":534},9,[335,536,440],{"class":349},[335,538,539],{"class":381}," node ",[335,541,356],{"class":341},[335,543,408],{"class":448},[335,545,466],{"class":381},[335,547,548],{"class":341},"{\n",[335,550,552,555],{"class":337,"line":551},10,[335,553,554],{"class":381},"  anchorEl",[335,556,557],{"class":341},",\n",[335,559,561,564],{"class":337,"line":560},11,[335,562,563],{"class":381},"  floatingEl",[335,565,557],{"class":341},[335,567,569,572],{"class":337,"line":568},12,[335,570,571],{"class":381},"  open",[335,573,557],{"class":341},[335,575,577,580,582],{"class":337,"line":576},13,[335,578,579],{"class":341},"}",[335,581,472],{"class":381},[335,583,398],{"class":341},[335,585,587,589,592,594],{"class":337,"line":586},14,[335,588,171],{"class":448},[335,590,591],{"class":381},"(node",[335,593,411],{"class":341},[335,595,596],{"class":341}," {\n",[335,598,600,603,606,608,611,613],{"class":337,"line":599},15,[335,601,602],{"class":345},"  placement",[335,604,605],{"class":341},":",[335,607,391],{"class":341},[335,609,610],{"class":362},"bottom-start",[335,612,359],{"class":341},[335,614,557],{"class":341},[335,616,618,621,623],{"class":337,"line":617},16,[335,619,620],{"class":345},"  middlewares",[335,622,605],{"class":341},[335,624,596],{"class":341},[335,626,628,631,633,637],{"class":337,"line":627},17,[335,629,630],{"class":345},"    offset",[335,632,605],{"class":341},[335,634,636],{"class":635},"sbssI"," 8",[335,638,557],{"class":341},[335,640,642,645,647,650],{"class":337,"line":641},18,[335,643,644],{"class":345},"    flip",[335,646,605],{"class":341},[335,648,649],{"class":521}," true",[335,651,557],{"class":341},[335,653,655,658,660,662,665,667,669],{"class":337,"line":654},19,[335,656,657],{"class":345},"    shift",[335,659,605],{"class":341},[335,661,378],{"class":341},[335,663,664],{"class":345}," padding",[335,666,605],{"class":341},[335,668,636],{"class":635},[335,670,671],{"class":341}," },\n",[335,673,675],{"class":337,"line":674},20,[335,676,677],{"class":341},"  },\n",[335,679,681,683,685],{"class":337,"line":680},21,[335,682,579],{"class":341},[335,684,472],{"class":381},[335,686,398],{"class":341},[335,688,690,693,695],{"class":337,"line":689},22,[335,691,692],{"class":341},"\u003C\u002F",[335,694,346],{"class":345},[335,696,368],{"class":341},[277,698,699],{},"Read this stack from left to right:",[297,701,702,708,714],{},[300,703,704,707],{},[281,705,706],{},"middlewares.offset: 8"," creates a visual gap",[300,709,710,713],{},[281,711,712],{},"middlewares.flip: true"," switches sides when the preferred side does not fit",[300,715,716,719],{},[281,717,718],{},"middlewares.shift: { padding: 8 }"," nudges the panel back into view when needed",[289,721,723],{"id":722},"add-space-from-the-trigger","Add space from the trigger",[277,725,726,727,732],{},"Use ",[728,729,730],"a",{"href":241},[281,731,240],{}," to create space between the anchor and the floating panel:",[326,734,737],{"className":735,"code":736,"language":363,"meta":331,"style":331},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","middlewares: {\n  offset: 8,\n}\n",[281,738,739,747,758],{"__ignoreMap":331},[335,740,741,743,745],{"class":337,"line":338},[335,742,283],{"class":453},[335,744,605],{"class":341},[335,746,596],{"class":341},[335,748,749,752,754,756],{"class":337,"line":371},[335,750,751],{"class":453},"  offset",[335,753,605],{"class":341},[335,755,636],{"class":635},[335,757,557],{"class":341},[335,759,760],{"class":337,"line":401},[335,761,762],{"class":341},"}\n",[289,764,766],{"id":765},"flip-when-the-preferred-side-runs-out-of-room","Flip when the preferred side runs out of room",[277,768,726,769,773],{},[728,770,771],{"href":245},[281,772,244],{}," to try opposite or fallback placements when the preferred side runs out of room:",[326,775,777],{"className":735,"code":776,"language":363,"meta":331,"style":331},"middlewares: {\n  offset: 8,\n  flip: true,\n}\n",[281,778,779,787,797,808],{"__ignoreMap":331},[335,780,781,783,785],{"class":337,"line":338},[335,782,283],{"class":453},[335,784,605],{"class":341},[335,786,596],{"class":341},[335,788,789,791,793,795],{"class":337,"line":371},[335,790,751],{"class":453},[335,792,605],{"class":341},[335,794,636],{"class":635},[335,796,557],{"class":341},[335,798,799,802,804,806],{"class":337,"line":401},[335,800,801],{"class":453},"  flip",[335,803,605],{"class":341},[335,805,649],{"class":521},[335,807,557],{"class":341},[335,809,810],{"class":337,"line":430},[335,811,762],{"class":341},[289,813,815],{"id":814},"shift-to-stay-inside-viewport-boundaries","Shift to stay inside viewport boundaries",[277,817,726,818,822],{},[728,819,820],{"href":249},[281,821,248],{}," to slide the floating panel along its cross-axis so it stays within the visible viewport:",[326,824,826],{"className":735,"code":825,"language":363,"meta":331,"style":331},"middlewares: {\n  offset: 8,\n  flip: true,\n  shift: { padding: 8 },\n}\n",[281,827,828,836,846,856,873],{"__ignoreMap":331},[335,829,830,832,834],{"class":337,"line":338},[335,831,283],{"class":453},[335,833,605],{"class":341},[335,835,596],{"class":341},[335,837,838,840,842,844],{"class":337,"line":371},[335,839,751],{"class":453},[335,841,605],{"class":341},[335,843,636],{"class":635},[335,845,557],{"class":341},[335,847,848,850,852,854],{"class":337,"line":401},[335,849,801],{"class":453},[335,851,605],{"class":341},[335,853,649],{"class":521},[335,855,557],{"class":341},[335,857,858,861,863,865,867,869,871],{"class":337,"line":430},[335,859,860],{"class":453},"  shift",[335,862,605],{"class":341},[335,864,378],{"class":341},[335,866,664],{"class":453},[335,868,605],{"class":341},[335,870,636],{"class":635},[335,872,671],{"class":341},[335,874,875],{"class":337,"line":437},[335,876,762],{"class":341},[289,878,880],{"id":879},"match-anchor-width-or-constrain-height","Match anchor width or constrain height",[277,882,726,883,886,887,889],{},[281,884,885],{},"matchWidth"," to automatically lock the panel's width to the trigger's width (common for select dropdowns and comboboxes), or ",[281,888,256],{}," for custom dimension constraints:",[326,891,893],{"className":328,"code":892,"language":330,"meta":331,"style":331},"\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});\nusePosition(node, {\n  placement: \"bottom-start\",\n  middlewares: {\n    offset: 8,\n    flip: true,\n    shift: { padding: 8 },\n    matchWidth: true, \u002F\u002F matches anchor element width\n    size: {\n      apply({ availableHeight }) {\n        if (!floatingEl.value) return;\n\n        Object.assign(floatingEl.value.style, {\n          maxHeight: `${availableHeight - 16}px`,\n        });\n      },\n    },\n  },\n});\n\u003C\u002Fscript>\n",[281,894,895,915,935,959,963,991,1019,1037,1041,1055,1061,1067,1073,1081,1091,1105,1113,1123,1133,1149,1164,1173,1190,1219,1224,1252,1282,1292,1298,1304,1309,1318],{"__ignoreMap":331},[335,896,897,899,901,903,905,907,909,911,913],{"class":337,"line":338},[335,898,342],{"class":341},[335,900,346],{"class":345},[335,902,350],{"class":349},[335,904,353],{"class":349},[335,906,356],{"class":341},[335,908,359],{"class":341},[335,910,363],{"class":362},[335,912,359],{"class":341},[335,914,368],{"class":341},[335,916,917,919,921,923,925,927,929,931,933],{"class":337,"line":371},[335,918,375],{"class":374},[335,920,378],{"class":341},[335,922,382],{"class":381},[335,924,385],{"class":341},[335,926,388],{"class":374},[335,928,391],{"class":341},[335,930,330],{"class":362},[335,932,359],{"class":341},[335,934,398],{"class":341},[335,936,937,939,941,943,945,947,949,951,953,955,957],{"class":337,"line":401},[335,938,375],{"class":374},[335,940,378],{"class":341},[335,942,408],{"class":381},[335,944,411],{"class":341},[335,946,414],{"class":381},[335,948,385],{"class":341},[335,950,388],{"class":374},[335,952,391],{"class":341},[335,954,423],{"class":362},[335,956,359],{"class":341},[335,958,398],{"class":341},[335,960,961],{"class":337,"line":430},[335,962,434],{"emptyLinePlaceholder":433},[335,964,965,967,969,971,973,975,977,979,981,983,985,987,989],{"class":337,"line":437},[335,966,440],{"class":349},[335,968,443],{"class":381},[335,970,356],{"class":341},[335,972,382],{"class":448},[335,974,342],{"class":341},[335,976,454],{"class":453},[335,978,457],{"class":341},[335,980,460],{"class":453},[335,982,463],{"class":341},[335,984,466],{"class":381},[335,986,469],{"class":341},[335,988,472],{"class":381},[335,990,398],{"class":341},[335,992,993,995,997,999,1001,1003,1005,1007,1009,1011,1013,1015,1017],{"class":337,"line":477},[335,994,440],{"class":349},[335,996,482],{"class":381},[335,998,356],{"class":341},[335,1000,382],{"class":448},[335,1002,342],{"class":341},[335,1004,454],{"class":453},[335,1006,457],{"class":341},[335,1008,460],{"class":453},[335,1010,463],{"class":341},[335,1012,466],{"class":381},[335,1014,469],{"class":341},[335,1016,472],{"class":381},[335,1018,398],{"class":341},[335,1020,1021,1023,1025,1027,1029,1031,1033,1035],{"class":337,"line":507},[335,1022,440],{"class":349},[335,1024,512],{"class":381},[335,1026,356],{"class":341},[335,1028,382],{"class":448},[335,1030,466],{"class":381},[335,1032,522],{"class":521},[335,1034,472],{"class":381},[335,1036,398],{"class":341},[335,1038,1039],{"class":337,"line":529},[335,1040,434],{"emptyLinePlaceholder":433},[335,1042,1043,1045,1047,1049,1051,1053],{"class":337,"line":534},[335,1044,440],{"class":349},[335,1046,539],{"class":381},[335,1048,356],{"class":341},[335,1050,408],{"class":448},[335,1052,466],{"class":381},[335,1054,548],{"class":341},[335,1056,1057,1059],{"class":337,"line":551},[335,1058,554],{"class":381},[335,1060,557],{"class":341},[335,1062,1063,1065],{"class":337,"line":560},[335,1064,563],{"class":381},[335,1066,557],{"class":341},[335,1068,1069,1071],{"class":337,"line":568},[335,1070,571],{"class":381},[335,1072,557],{"class":341},[335,1074,1075,1077,1079],{"class":337,"line":576},[335,1076,579],{"class":341},[335,1078,472],{"class":381},[335,1080,398],{"class":341},[335,1082,1083,1085,1087,1089],{"class":337,"line":586},[335,1084,171],{"class":448},[335,1086,591],{"class":381},[335,1088,411],{"class":341},[335,1090,596],{"class":341},[335,1092,1093,1095,1097,1099,1101,1103],{"class":337,"line":599},[335,1094,602],{"class":345},[335,1096,605],{"class":341},[335,1098,391],{"class":341},[335,1100,610],{"class":362},[335,1102,359],{"class":341},[335,1104,557],{"class":341},[335,1106,1107,1109,1111],{"class":337,"line":617},[335,1108,620],{"class":345},[335,1110,605],{"class":341},[335,1112,596],{"class":341},[335,1114,1115,1117,1119,1121],{"class":337,"line":627},[335,1116,630],{"class":345},[335,1118,605],{"class":341},[335,1120,636],{"class":635},[335,1122,557],{"class":341},[335,1124,1125,1127,1129,1131],{"class":337,"line":641},[335,1126,644],{"class":345},[335,1128,605],{"class":341},[335,1130,649],{"class":521},[335,1132,557],{"class":341},[335,1134,1135,1137,1139,1141,1143,1145,1147],{"class":337,"line":654},[335,1136,657],{"class":345},[335,1138,605],{"class":341},[335,1140,378],{"class":341},[335,1142,664],{"class":345},[335,1144,605],{"class":341},[335,1146,636],{"class":635},[335,1148,671],{"class":341},[335,1150,1151,1154,1156,1158,1160],{"class":337,"line":674},[335,1152,1153],{"class":345},"    matchWidth",[335,1155,605],{"class":341},[335,1157,649],{"class":521},[335,1159,411],{"class":341},[335,1161,1163],{"class":1162},"sHwdD"," \u002F\u002F matches anchor element width\n",[335,1165,1166,1169,1171],{"class":337,"line":680},[335,1167,1168],{"class":345},"    size",[335,1170,605],{"class":341},[335,1172,596],{"class":341},[335,1174,1175,1178,1181,1185,1188],{"class":337,"line":689},[335,1176,1177],{"class":345},"      apply",[335,1179,1180],{"class":341},"({",[335,1182,1184],{"class":1183},"sHdIc"," availableHeight",[335,1186,1187],{"class":341}," })",[335,1189,596],{"class":341},[335,1191,1193,1196,1199,1202,1205,1208,1211,1214,1217],{"class":337,"line":1192},23,[335,1194,1195],{"class":374},"        if",[335,1197,1198],{"class":345}," (",[335,1200,1201],{"class":341},"!",[335,1203,1204],{"class":381},"floatingEl",[335,1206,1207],{"class":341},".",[335,1209,1210],{"class":381},"value",[335,1212,1213],{"class":345},") ",[335,1215,1216],{"class":374},"return",[335,1218,398],{"class":341},[335,1220,1222],{"class":337,"line":1221},24,[335,1223,434],{"emptyLinePlaceholder":433},[335,1225,1227,1230,1232,1235,1237,1239,1241,1243,1245,1248,1250],{"class":337,"line":1226},25,[335,1228,1229],{"class":381},"        Object",[335,1231,1207],{"class":341},[335,1233,1234],{"class":448},"assign",[335,1236,466],{"class":345},[335,1238,1204],{"class":381},[335,1240,1207],{"class":341},[335,1242,1210],{"class":381},[335,1244,1207],{"class":341},[335,1246,1247],{"class":381},"style",[335,1249,411],{"class":341},[335,1251,596],{"class":341},[335,1253,1255,1258,1260,1263,1266,1269,1272,1274,1277,1280],{"class":337,"line":1254},26,[335,1256,1257],{"class":345},"          maxHeight",[335,1259,605],{"class":341},[335,1261,1262],{"class":341}," `${",[335,1264,1265],{"class":381},"availableHeight ",[335,1267,1268],{"class":341},"-",[335,1270,1271],{"class":635}," 16",[335,1273,579],{"class":341},[335,1275,1276],{"class":362},"px",[335,1278,1279],{"class":341},"`",[335,1281,557],{"class":341},[335,1283,1285,1288,1290],{"class":337,"line":1284},27,[335,1286,1287],{"class":341},"        }",[335,1289,472],{"class":345},[335,1291,398],{"class":341},[335,1293,1295],{"class":337,"line":1294},28,[335,1296,1297],{"class":341},"      },\n",[335,1299,1301],{"class":337,"line":1300},29,[335,1302,1303],{"class":341},"    },\n",[335,1305,1307],{"class":337,"line":1306},30,[335,1308,677],{"class":341},[335,1310,1312,1314,1316],{"class":337,"line":1311},31,[335,1313,579],{"class":341},[335,1315,472],{"class":381},[335,1317,398],{"class":341},[335,1319,1321,1323,1325],{"class":337,"line":1320},32,[335,1322,692],{"class":341},[335,1324,346],{"class":345},[335,1326,368],{"class":341},[289,1328,1330],{"id":1329},"pick-the-roomiest-side-with-auto-placement","Pick the roomiest side with auto-placement",[277,1332,726,1333,1337],{},[728,1334,1335],{"href":253},[281,1336,252],{}," when you want VFloat to inspect available space across all sides and pick the roomiest side dynamically:",[326,1339,1341],{"className":735,"code":1340,"language":363,"meta":331,"style":331},"middlewares: {\n  offset: 8,\n  autoPlacement: true,\n  shift: { padding: 8 },\n}\n",[281,1342,1343,1351,1361,1372,1388],{"__ignoreMap":331},[335,1344,1345,1347,1349],{"class":337,"line":338},[335,1346,283],{"class":453},[335,1348,605],{"class":341},[335,1350,596],{"class":341},[335,1352,1353,1355,1357,1359],{"class":337,"line":371},[335,1354,751],{"class":453},[335,1356,605],{"class":341},[335,1358,636],{"class":635},[335,1360,557],{"class":341},[335,1362,1363,1366,1368,1370],{"class":337,"line":401},[335,1364,1365],{"class":453},"  autoPlacement",[335,1367,605],{"class":341},[335,1369,649],{"class":521},[335,1371,557],{"class":341},[335,1373,1374,1376,1378,1380,1382,1384,1386],{"class":337,"line":430},[335,1375,860],{"class":453},[335,1377,605],{"class":341},[335,1379,378],{"class":341},[335,1381,664],{"class":453},[335,1383,605],{"class":341},[335,1385,636],{"class":635},[335,1387,671],{"class":341},[335,1389,1390],{"class":337,"line":437},[335,1391,762],{"class":341},[277,1393,1394,1395,1397,1398,1400,1401,1403,1404,1406],{},"Note that ",[281,1396,252],{}," and ",[281,1399,244],{}," are mutually exclusive strategies. Choose ",[281,1402,244],{}," when you have a preferred side with fallbacks, or ",[281,1405,252],{}," when any roomy side is acceptable.",[289,1408,1410],{"id":1409},"point-an-arrow-back-at-the-anchor","Point an arrow back at the anchor",[277,1412,726,1413,1417],{},[728,1414,1415],{"href":176},[281,1416,175],{}," to position a pointed indicator element and compute its alignment styles:",[326,1419,1421],{"className":328,"code":1420,"language":330,"meta":331,"style":331},"\u003Cscript setup lang=\"ts\">\nimport { ref } from \"vue\";\nimport { useArrow, useFloatingNode, usePosition } from \"v-float\";\n\nconst anchorEl = ref\u003CHTMLElement | null>(null);\nconst floatingEl = ref\u003CHTMLElement | null>(null);\nconst arrowEl = ref\u003CHTMLElement | null>(null);\nconst open = ref(true);\n\nconst node = useFloatingNode({\n  anchorEl,\n  floatingEl,\n  arrowEl,\n  open,\n});\nusePosition(node, {\n  middlewares: {\n    offset: 8,\n    flip: true,\n    shift: { padding: 8 },\n  },\n});\n\n\u002F\u002F Automatically registers arrow middleware and synchronizes styles to arrowEl\nuseArrow(node);\n\u003C\u002Fscript>\n",[281,1422,1423,1443,1463,1492,1496,1524,1552,1581,1599,1603,1617,1623,1629,1636,1642,1650,1660,1668,1678,1688,1704,1708,1716,1720,1725,1734],{"__ignoreMap":331},[335,1424,1425,1427,1429,1431,1433,1435,1437,1439,1441],{"class":337,"line":338},[335,1426,342],{"class":341},[335,1428,346],{"class":345},[335,1430,350],{"class":349},[335,1432,353],{"class":349},[335,1434,356],{"class":341},[335,1436,359],{"class":341},[335,1438,363],{"class":362},[335,1440,359],{"class":341},[335,1442,368],{"class":341},[335,1444,1445,1447,1449,1451,1453,1455,1457,1459,1461],{"class":337,"line":371},[335,1446,375],{"class":374},[335,1448,378],{"class":341},[335,1450,382],{"class":381},[335,1452,385],{"class":341},[335,1454,388],{"class":374},[335,1456,391],{"class":341},[335,1458,330],{"class":362},[335,1460,359],{"class":341},[335,1462,398],{"class":341},[335,1464,1465,1467,1469,1472,1474,1476,1478,1480,1482,1484,1486,1488,1490],{"class":337,"line":401},[335,1466,375],{"class":374},[335,1468,378],{"class":341},[335,1470,1471],{"class":381}," useArrow",[335,1473,411],{"class":341},[335,1475,408],{"class":381},[335,1477,411],{"class":341},[335,1479,414],{"class":381},[335,1481,385],{"class":341},[335,1483,388],{"class":374},[335,1485,391],{"class":341},[335,1487,423],{"class":362},[335,1489,359],{"class":341},[335,1491,398],{"class":341},[335,1493,1494],{"class":337,"line":430},[335,1495,434],{"emptyLinePlaceholder":433},[335,1497,1498,1500,1502,1504,1506,1508,1510,1512,1514,1516,1518,1520,1522],{"class":337,"line":437},[335,1499,440],{"class":349},[335,1501,443],{"class":381},[335,1503,356],{"class":341},[335,1505,382],{"class":448},[335,1507,342],{"class":341},[335,1509,454],{"class":453},[335,1511,457],{"class":341},[335,1513,460],{"class":453},[335,1515,463],{"class":341},[335,1517,466],{"class":381},[335,1519,469],{"class":341},[335,1521,472],{"class":381},[335,1523,398],{"class":341},[335,1525,1526,1528,1530,1532,1534,1536,1538,1540,1542,1544,1546,1548,1550],{"class":337,"line":477},[335,1527,440],{"class":349},[335,1529,482],{"class":381},[335,1531,356],{"class":341},[335,1533,382],{"class":448},[335,1535,342],{"class":341},[335,1537,454],{"class":453},[335,1539,457],{"class":341},[335,1541,460],{"class":453},[335,1543,463],{"class":341},[335,1545,466],{"class":381},[335,1547,469],{"class":341},[335,1549,472],{"class":381},[335,1551,398],{"class":341},[335,1553,1554,1556,1559,1561,1563,1565,1567,1569,1571,1573,1575,1577,1579],{"class":337,"line":507},[335,1555,440],{"class":349},[335,1557,1558],{"class":381}," arrowEl ",[335,1560,356],{"class":341},[335,1562,382],{"class":448},[335,1564,342],{"class":341},[335,1566,454],{"class":453},[335,1568,457],{"class":341},[335,1570,460],{"class":453},[335,1572,463],{"class":341},[335,1574,466],{"class":381},[335,1576,469],{"class":341},[335,1578,472],{"class":381},[335,1580,398],{"class":341},[335,1582,1583,1585,1587,1589,1591,1593,1595,1597],{"class":337,"line":529},[335,1584,440],{"class":349},[335,1586,512],{"class":381},[335,1588,356],{"class":341},[335,1590,382],{"class":448},[335,1592,466],{"class":381},[335,1594,522],{"class":521},[335,1596,472],{"class":381},[335,1598,398],{"class":341},[335,1600,1601],{"class":337,"line":534},[335,1602,434],{"emptyLinePlaceholder":433},[335,1604,1605,1607,1609,1611,1613,1615],{"class":337,"line":551},[335,1606,440],{"class":349},[335,1608,539],{"class":381},[335,1610,356],{"class":341},[335,1612,408],{"class":448},[335,1614,466],{"class":381},[335,1616,548],{"class":341},[335,1618,1619,1621],{"class":337,"line":560},[335,1620,554],{"class":381},[335,1622,557],{"class":341},[335,1624,1625,1627],{"class":337,"line":568},[335,1626,563],{"class":381},[335,1628,557],{"class":341},[335,1630,1631,1634],{"class":337,"line":576},[335,1632,1633],{"class":381},"  arrowEl",[335,1635,557],{"class":341},[335,1637,1638,1640],{"class":337,"line":586},[335,1639,571],{"class":381},[335,1641,557],{"class":341},[335,1643,1644,1646,1648],{"class":337,"line":599},[335,1645,579],{"class":341},[335,1647,472],{"class":381},[335,1649,398],{"class":341},[335,1651,1652,1654,1656,1658],{"class":337,"line":617},[335,1653,171],{"class":448},[335,1655,591],{"class":381},[335,1657,411],{"class":341},[335,1659,596],{"class":341},[335,1661,1662,1664,1666],{"class":337,"line":627},[335,1663,620],{"class":345},[335,1665,605],{"class":341},[335,1667,596],{"class":341},[335,1669,1670,1672,1674,1676],{"class":337,"line":641},[335,1671,630],{"class":345},[335,1673,605],{"class":341},[335,1675,636],{"class":635},[335,1677,557],{"class":341},[335,1679,1680,1682,1684,1686],{"class":337,"line":654},[335,1681,644],{"class":345},[335,1683,605],{"class":341},[335,1685,649],{"class":521},[335,1687,557],{"class":341},[335,1689,1690,1692,1694,1696,1698,1700,1702],{"class":337,"line":674},[335,1691,657],{"class":345},[335,1693,605],{"class":341},[335,1695,378],{"class":341},[335,1697,664],{"class":345},[335,1699,605],{"class":341},[335,1701,636],{"class":635},[335,1703,671],{"class":341},[335,1705,1706],{"class":337,"line":680},[335,1707,677],{"class":341},[335,1709,1710,1712,1714],{"class":337,"line":689},[335,1711,579],{"class":341},[335,1713,472],{"class":381},[335,1715,398],{"class":341},[335,1717,1718],{"class":337,"line":1192},[335,1719,434],{"emptyLinePlaceholder":433},[335,1721,1722],{"class":337,"line":1221},[335,1723,1724],{"class":1162},"\u002F\u002F Automatically registers arrow middleware and synchronizes styles to arrowEl\n",[335,1726,1727,1729,1732],{"class":337,"line":1226},[335,1728,175],{"class":448},[335,1730,1731],{"class":381},"(node)",[335,1733,398],{"class":341},[335,1735,1736,1738,1740],{"class":337,"line":1254},[335,1737,692],{"class":341},[335,1739,346],{"class":345},[335,1741,368],{"class":341},[277,1743,1744,1747,1748,1751,1752,1751,1755,1751,1758,1761,1762,1207],{},[281,1745,1746],{},"useArrow(node)"," registers the arrow middleware into the positioning registry and automatically applies the computed physical inset styles (",[281,1749,1750],{},"top",", ",[281,1753,1754],{},"bottom",[281,1756,1757],{},"left",[281,1759,1760],{},"right",") directly to ",[281,1763,1764],{},"node.refs.arrowEl",[289,1766,1768],{"id":1767},"middleware-order-matters","Middleware order matters",[277,1770,1771],{},"Order is not a cosmetic detail. Middlewares run sequentially, each transforming the coordinates produced by earlier steps.",[277,1773,1774,1775,1777],{},"When using declarative ",[281,1776,283],{}," options, VFloat executes them in canonical order:",[1779,1780,1781,1789,1796,1806,1813,1822,1829,1836],"ol",{},[300,1782,1783,1788],{},[1784,1785,1786,1207],"strong",{},[281,1787,260],{}," Resolves multi-line anchor geometry.",[300,1790,1791,1795],{},[1784,1792,1793,1207],{},[281,1794,240],{}," Establishes the gap before collision checks.",[300,1797,1798,1805],{},[1784,1799,1800,1802,1803,1207],{},[281,1801,244],{}," or ",[281,1804,252],{}," Selects the best viable placement.",[300,1807,1808,1812],{},[1784,1809,1810,1207],{},[281,1811,248],{}," Nudges the surface inside viewport boundaries.",[300,1814,1815,1821],{},[1784,1816,1817,1802,1819,1207],{},[281,1818,885],{},[281,1820,256],{}," Applies width and height constraints.",[300,1823,1824,1828],{},[1784,1825,1826,1207],{},[281,1827,268],{}," Computes visibility when anchor is clipped.",[300,1830,1831,1835],{},[1784,1832,1833,1207],{},[281,1834,264],{}," Centers the arrow against the final surface position.",[300,1837,1838,1843],{},[1784,1839,1840,1207],{},[281,1841,1842],{},"custom"," Executes user-provided raw middleware functions.",[277,1845,1846,1847,1198,1849,1852],{},"If you pass a raw array to ",[281,1848,283],{},[281,1850,1851],{},"middlewares: [offset(8), flip(), shift()]","), you control the exact sequence yourself.",[289,1854,1856],{"id":1855},"where-to-go-next","Where to go next",[297,1858,1859,1865,1871],{},[300,1860,1861,1862,1864],{},"Read ",[728,1863,88],{"href":89}," for the architectural mental model.",[300,1866,1861,1867,1870],{},[728,1868,1869],{"href":129},"Middleware Ordering Gotchas"," to diagnose subtle collision bugs.",[300,1872,1861,1873,1876],{},[728,1874,1875],{"href":63},"Build Popovers and Dropdowns"," to see middleware inside a real component.",[1247,1878,1879],{},"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}",{"title":331,"searchDepth":371,"depth":371,"links":1881},[1882,1883,1884,1885,1886,1887,1888,1889,1890,1891],{"id":291,"depth":371,"text":292},{"id":320,"depth":371,"text":321},{"id":722,"depth":371,"text":723},{"id":765,"depth":371,"text":766},{"id":814,"depth":371,"text":815},{"id":879,"depth":371,"text":880},{"id":1329,"depth":371,"text":1330},{"id":1409,"depth":371,"text":1410},{"id":1767,"depth":371,"text":1768},{"id":1855,"depth":371,"text":1856},"Keep floating content within the viewport with middleware and sizing rules.","md",null,{},{"title":80,"description":1892},"yuSM-toA2pzXdlDiM3egx-TRCwxoRLmL1z6zrbd_wIg",[1899,1901],{"title":70,"path":71,"stem":72,"description":1900,"children":-1},"Build nested multi-level submenus with composite floating nodes, implicit DI, and safe cursor corridors.",{"title":84,"path":85,"stem":86,"description":1902,"children":-1},"Position floating content from pointer coordinates or other virtual anchors.",1791046167598]