[{"data":1,"prerenderedAt":3213},["ShallowReactive",2],{"navigation_docs":3,"-api-positioning-use-position":271,"-api-positioning-use-position-surround":3208},[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":171,"body":273,"description":3202,"extension":3203,"links":3204,"meta":3205,"navigation":351,"path":172,"seo":3206,"stem":173,"__hash__":3207},"docs\u002F2.api\u002F3.positioning\u002F1.use-position.md",{"type":274,"value":275,"toc":3182},"minimark",[276,283,288,1195,1199,1403,1408,1414,1611,1620,1624,1769,1773,1777,1794,1798,1806,1828,1831,1835,1864,1867,1992,1996,2008,2012,2016,2452,2456,2459,2806,2812,2815,3131,3135,3179],[277,278,279,282],"p",{},[280,281,171],"code",{}," computes reactive screen coordinates and inline styles for an existing floating node. It configures the middleware pipeline, sets placement and positioning strategy, auto-updates on scroll and resize, and automatically synchronizes positioning styles to the floating DOM element.",[284,285,287],"h2",{"id":286},"type","Type",[289,290,295],"pre",{"className":291,"code":292,"language":293,"meta":294,"style":294},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","function usePosition(node: FloatingNode, options?: UsePositionOptions): FloatingPosition;\n\ninterface UsePositionOptions {\n  placement?: MaybeRefOrGetter\u003CPlacement | undefined>;\n  strategy?: MaybeRefOrGetter\u003CStrategy | undefined>;\n  transform?: MaybeRefOrGetter\u003Cboolean | undefined>;\n  middlewares?: MaybeRefOrGetter\u003CUsePositionMiddlewaresOptions | Middleware[] | undefined>;\n  autoUpdate?: MaybeRefOrGetter\u003Cboolean | AutoUpdateOptions | undefined>;\n  enabled?: MaybeRefOrGetter\u003Cboolean>;\n  applyStyles?: MaybeRef\u003Cboolean | undefined> | ApplyStylesFn;\n}\n\ntype ApplyStylesFn = (element: HTMLElement, styles: FloatingStyles) => void | (() => void);\n\ninterface UsePositionMiddlewaresOptions {\n  inline?: true | false | InlineOptions;\n  offset?: true | false | OffsetOptions;\n  flip?: true | false | FlipOptions;\n  autoPlacement?: true | false | AutoPlacementOptions;\n  shift?: true | false | ShiftOptions;\n  matchWidth?: boolean;\n  size?: SizeOptions;\n  hide?: true | false | HideOptions;\n  arrow?: true | false | UsePositionArrowOptions;\n  custom?: MaybeRefOrGetter\u003CMiddleware[] | undefined>;\n}\n\ninterface UsePositionArrowOptions {\n  element?: Ref\u003CHTMLElement | null>;\n  padding?: Padding;\n}\n\ninterface FloatingPosition {\n  x: Readonly\u003CRef\u003Cnumber>>;\n  y: Readonly\u003CRef\u003Cnumber>>;\n  strategy: Readonly\u003CRef\u003CStrategy>>;\n  placement: Readonly\u003CRef\u003CPlacement>>;\n  middlewareData: Readonly\u003CRef\u003CMiddlewareData>>;\n  isPositioned: Readonly\u003CRef\u003Cboolean>>;\n  styles: Readonly\u003CRef\u003CFloatingStyles>>;\n  update: () => Promise\u003Cvoid>;\n}\n\ntype FloatingStyles = {\n  position: Strategy;\n  top: string;\n  left: string;\n  transform?: string;\n  \"will-change\"?: string;\n} & {\n  [key: `--${string}`]: any;\n};\n","ts","",[280,296,297,346,353,364,391,412,433,464,489,505,534,540,545,600,605,615,638,659,680,701,722,735,748,769,790,812,817,822,831,854,867,872,877,886,910,930,949,968,989,1009,1030,1053,1058,1063,1074,1087,1100,1112,1123,1142,1153,1189],{"__ignoreMap":294},[298,299,302,306,310,314,318,321,325,328,331,334,337,340,343],"span",{"class":300,"line":301},"line",1,[298,303,305],{"class":304},"spNyl","function",[298,307,309],{"class":308},"s2Zo4"," usePosition",[298,311,313],{"class":312},"sMK4o","(",[298,315,317],{"class":316},"sHdIc","node",[298,319,320],{"class":312},":",[298,322,324],{"class":323},"sBMFI"," FloatingNode",[298,326,327],{"class":312},",",[298,329,330],{"class":316}," options",[298,332,333],{"class":312},"?:",[298,335,336],{"class":323}," UsePositionOptions",[298,338,339],{"class":312},"):",[298,341,342],{"class":323}," FloatingPosition",[298,344,345],{"class":312},";\n",[298,347,349],{"class":300,"line":348},2,[298,350,352],{"emptyLinePlaceholder":351},true,"\n",[298,354,356,359,361],{"class":300,"line":355},3,[298,357,358],{"class":304},"interface",[298,360,336],{"class":323},[298,362,363],{"class":312}," {\n",[298,365,367,371,373,376,379,382,385,388],{"class":300,"line":366},4,[298,368,370],{"class":369},"swJcz","  placement",[298,372,333],{"class":312},[298,374,375],{"class":323}," MaybeRefOrGetter",[298,377,378],{"class":312},"\u003C",[298,380,381],{"class":323},"Placement",[298,383,384],{"class":312}," |",[298,386,387],{"class":323}," undefined",[298,389,390],{"class":312},">;\n",[298,392,394,397,399,401,403,406,408,410],{"class":300,"line":393},5,[298,395,396],{"class":369},"  strategy",[298,398,333],{"class":312},[298,400,375],{"class":323},[298,402,378],{"class":312},[298,404,405],{"class":323},"Strategy",[298,407,384],{"class":312},[298,409,387],{"class":323},[298,411,390],{"class":312},[298,413,415,418,420,422,424,427,429,431],{"class":300,"line":414},6,[298,416,417],{"class":369},"  transform",[298,419,333],{"class":312},[298,421,375],{"class":323},[298,423,378],{"class":312},[298,425,426],{"class":323},"boolean",[298,428,384],{"class":312},[298,430,387],{"class":323},[298,432,390],{"class":312},[298,434,436,439,441,443,445,448,450,453,457,460,462],{"class":300,"line":435},7,[298,437,438],{"class":369},"  middlewares",[298,440,333],{"class":312},[298,442,375],{"class":323},[298,444,378],{"class":312},[298,446,447],{"class":323},"UsePositionMiddlewaresOptions",[298,449,384],{"class":312},[298,451,452],{"class":323}," Middleware",[298,454,456],{"class":455},"sTEyZ","[] ",[298,458,459],{"class":312},"|",[298,461,387],{"class":323},[298,463,390],{"class":312},[298,465,467,470,472,474,476,478,480,483,485,487],{"class":300,"line":466},8,[298,468,469],{"class":369},"  autoUpdate",[298,471,333],{"class":312},[298,473,375],{"class":323},[298,475,378],{"class":312},[298,477,426],{"class":323},[298,479,384],{"class":312},[298,481,482],{"class":323}," AutoUpdateOptions",[298,484,384],{"class":312},[298,486,387],{"class":323},[298,488,390],{"class":312},[298,490,492,495,497,499,501,503],{"class":300,"line":491},9,[298,493,494],{"class":369},"  enabled",[298,496,333],{"class":312},[298,498,375],{"class":323},[298,500,378],{"class":312},[298,502,426],{"class":323},[298,504,390],{"class":312},[298,506,508,511,513,516,518,520,522,524,527,529,532],{"class":300,"line":507},10,[298,509,510],{"class":369},"  applyStyles",[298,512,333],{"class":312},[298,514,515],{"class":323}," MaybeRef",[298,517,378],{"class":312},[298,519,426],{"class":323},[298,521,384],{"class":312},[298,523,387],{"class":323},[298,525,526],{"class":312},">",[298,528,384],{"class":312},[298,530,531],{"class":323}," ApplyStylesFn",[298,533,345],{"class":312},[298,535,537],{"class":300,"line":536},11,[298,538,539],{"class":312},"}\n",[298,541,543],{"class":300,"line":542},12,[298,544,352],{"emptyLinePlaceholder":351},[298,546,548,550,552,555,558,561,563,566,568,571,573,576,579,582,585,587,589,592,594,596,598],{"class":300,"line":547},13,[298,549,286],{"class":304},[298,551,531],{"class":323},[298,553,554],{"class":312}," =",[298,556,557],{"class":312}," (",[298,559,560],{"class":316},"element",[298,562,320],{"class":312},[298,564,565],{"class":323}," HTMLElement",[298,567,327],{"class":312},[298,569,570],{"class":316}," styles",[298,572,320],{"class":312},[298,574,575],{"class":323}," FloatingStyles",[298,577,578],{"class":312},")",[298,580,581],{"class":304}," =>",[298,583,584],{"class":323}," void",[298,586,384],{"class":312},[298,588,557],{"class":455},[298,590,591],{"class":312},"()",[298,593,581],{"class":304},[298,595,584],{"class":323},[298,597,578],{"class":455},[298,599,345],{"class":312},[298,601,603],{"class":300,"line":602},14,[298,604,352],{"emptyLinePlaceholder":351},[298,606,608,610,613],{"class":300,"line":607},15,[298,609,358],{"class":304},[298,611,612],{"class":323}," UsePositionMiddlewaresOptions",[298,614,363],{"class":312},[298,616,618,621,623,626,628,631,633,636],{"class":300,"line":617},16,[298,619,620],{"class":369},"  inline",[298,622,333],{"class":312},[298,624,625],{"class":323}," true",[298,627,384],{"class":312},[298,629,630],{"class":323}," false",[298,632,384],{"class":312},[298,634,635],{"class":323}," InlineOptions",[298,637,345],{"class":312},[298,639,641,644,646,648,650,652,654,657],{"class":300,"line":640},17,[298,642,643],{"class":369},"  offset",[298,645,333],{"class":312},[298,647,625],{"class":323},[298,649,384],{"class":312},[298,651,630],{"class":323},[298,653,384],{"class":312},[298,655,656],{"class":323}," OffsetOptions",[298,658,345],{"class":312},[298,660,662,665,667,669,671,673,675,678],{"class":300,"line":661},18,[298,663,664],{"class":369},"  flip",[298,666,333],{"class":312},[298,668,625],{"class":323},[298,670,384],{"class":312},[298,672,630],{"class":323},[298,674,384],{"class":312},[298,676,677],{"class":323}," FlipOptions",[298,679,345],{"class":312},[298,681,683,686,688,690,692,694,696,699],{"class":300,"line":682},19,[298,684,685],{"class":369},"  autoPlacement",[298,687,333],{"class":312},[298,689,625],{"class":323},[298,691,384],{"class":312},[298,693,630],{"class":323},[298,695,384],{"class":312},[298,697,698],{"class":323}," AutoPlacementOptions",[298,700,345],{"class":312},[298,702,704,707,709,711,713,715,717,720],{"class":300,"line":703},20,[298,705,706],{"class":369},"  shift",[298,708,333],{"class":312},[298,710,625],{"class":323},[298,712,384],{"class":312},[298,714,630],{"class":323},[298,716,384],{"class":312},[298,718,719],{"class":323}," ShiftOptions",[298,721,345],{"class":312},[298,723,725,728,730,733],{"class":300,"line":724},21,[298,726,727],{"class":369},"  matchWidth",[298,729,333],{"class":312},[298,731,732],{"class":323}," boolean",[298,734,345],{"class":312},[298,736,738,741,743,746],{"class":300,"line":737},22,[298,739,740],{"class":369},"  size",[298,742,333],{"class":312},[298,744,745],{"class":323}," SizeOptions",[298,747,345],{"class":312},[298,749,751,754,756,758,760,762,764,767],{"class":300,"line":750},23,[298,752,753],{"class":369},"  hide",[298,755,333],{"class":312},[298,757,625],{"class":323},[298,759,384],{"class":312},[298,761,630],{"class":323},[298,763,384],{"class":312},[298,765,766],{"class":323}," HideOptions",[298,768,345],{"class":312},[298,770,772,775,777,779,781,783,785,788],{"class":300,"line":771},24,[298,773,774],{"class":369},"  arrow",[298,776,333],{"class":312},[298,778,625],{"class":323},[298,780,384],{"class":312},[298,782,630],{"class":323},[298,784,384],{"class":312},[298,786,787],{"class":323}," UsePositionArrowOptions",[298,789,345],{"class":312},[298,791,793,796,798,800,802,804,806,808,810],{"class":300,"line":792},25,[298,794,795],{"class":369},"  custom",[298,797,333],{"class":312},[298,799,375],{"class":323},[298,801,378],{"class":312},[298,803,234],{"class":323},[298,805,456],{"class":455},[298,807,459],{"class":312},[298,809,387],{"class":323},[298,811,390],{"class":312},[298,813,815],{"class":300,"line":814},26,[298,816,539],{"class":312},[298,818,820],{"class":300,"line":819},27,[298,821,352],{"emptyLinePlaceholder":351},[298,823,825,827,829],{"class":300,"line":824},28,[298,826,358],{"class":304},[298,828,787],{"class":323},[298,830,363],{"class":312},[298,832,834,837,839,842,844,847,849,852],{"class":300,"line":833},29,[298,835,836],{"class":369},"  element",[298,838,333],{"class":312},[298,840,841],{"class":323}," Ref",[298,843,378],{"class":312},[298,845,846],{"class":323},"HTMLElement",[298,848,384],{"class":312},[298,850,851],{"class":323}," null",[298,853,390],{"class":312},[298,855,857,860,862,865],{"class":300,"line":856},30,[298,858,859],{"class":369},"  padding",[298,861,333],{"class":312},[298,863,864],{"class":323}," Padding",[298,866,345],{"class":312},[298,868,870],{"class":300,"line":869},31,[298,871,539],{"class":312},[298,873,875],{"class":300,"line":874},32,[298,876,352],{"emptyLinePlaceholder":351},[298,878,880,882,884],{"class":300,"line":879},33,[298,881,358],{"class":304},[298,883,342],{"class":323},[298,885,363],{"class":312},[298,887,889,892,894,897,899,902,904,907],{"class":300,"line":888},34,[298,890,891],{"class":369},"  x",[298,893,320],{"class":312},[298,895,896],{"class":323}," Readonly",[298,898,378],{"class":312},[298,900,901],{"class":323},"Ref",[298,903,378],{"class":312},[298,905,906],{"class":323},"number",[298,908,909],{"class":312},">>;\n",[298,911,913,916,918,920,922,924,926,928],{"class":300,"line":912},35,[298,914,915],{"class":369},"  y",[298,917,320],{"class":312},[298,919,896],{"class":323},[298,921,378],{"class":312},[298,923,901],{"class":323},[298,925,378],{"class":312},[298,927,906],{"class":323},[298,929,909],{"class":312},[298,931,933,935,937,939,941,943,945,947],{"class":300,"line":932},36,[298,934,396],{"class":369},[298,936,320],{"class":312},[298,938,896],{"class":323},[298,940,378],{"class":312},[298,942,901],{"class":323},[298,944,378],{"class":312},[298,946,405],{"class":323},[298,948,909],{"class":312},[298,950,952,954,956,958,960,962,964,966],{"class":300,"line":951},37,[298,953,370],{"class":369},[298,955,320],{"class":312},[298,957,896],{"class":323},[298,959,378],{"class":312},[298,961,901],{"class":323},[298,963,378],{"class":312},[298,965,381],{"class":323},[298,967,909],{"class":312},[298,969,971,974,976,978,980,982,984,987],{"class":300,"line":970},38,[298,972,973],{"class":369},"  middlewareData",[298,975,320],{"class":312},[298,977,896],{"class":323},[298,979,378],{"class":312},[298,981,901],{"class":323},[298,983,378],{"class":312},[298,985,986],{"class":323},"MiddlewareData",[298,988,909],{"class":312},[298,990,992,995,997,999,1001,1003,1005,1007],{"class":300,"line":991},39,[298,993,994],{"class":369},"  isPositioned",[298,996,320],{"class":312},[298,998,896],{"class":323},[298,1000,378],{"class":312},[298,1002,901],{"class":323},[298,1004,378],{"class":312},[298,1006,426],{"class":323},[298,1008,909],{"class":312},[298,1010,1012,1015,1017,1019,1021,1023,1025,1028],{"class":300,"line":1011},40,[298,1013,1014],{"class":369},"  styles",[298,1016,320],{"class":312},[298,1018,896],{"class":323},[298,1020,378],{"class":312},[298,1022,901],{"class":323},[298,1024,378],{"class":312},[298,1026,1027],{"class":323},"FloatingStyles",[298,1029,909],{"class":312},[298,1031,1033,1036,1038,1041,1043,1046,1048,1051],{"class":300,"line":1032},41,[298,1034,1035],{"class":369},"  update",[298,1037,320],{"class":312},[298,1039,1040],{"class":312}," ()",[298,1042,581],{"class":304},[298,1044,1045],{"class":323}," Promise",[298,1047,378],{"class":312},[298,1049,1050],{"class":323},"void",[298,1052,390],{"class":312},[298,1054,1056],{"class":300,"line":1055},42,[298,1057,539],{"class":312},[298,1059,1061],{"class":300,"line":1060},43,[298,1062,352],{"emptyLinePlaceholder":351},[298,1064,1066,1068,1070,1072],{"class":300,"line":1065},44,[298,1067,286],{"class":304},[298,1069,575],{"class":323},[298,1071,554],{"class":312},[298,1073,363],{"class":312},[298,1075,1077,1080,1082,1085],{"class":300,"line":1076},45,[298,1078,1079],{"class":369},"  position",[298,1081,320],{"class":312},[298,1083,1084],{"class":323}," Strategy",[298,1086,345],{"class":312},[298,1088,1090,1093,1095,1098],{"class":300,"line":1089},46,[298,1091,1092],{"class":369},"  top",[298,1094,320],{"class":312},[298,1096,1097],{"class":323}," string",[298,1099,345],{"class":312},[298,1101,1103,1106,1108,1110],{"class":300,"line":1102},47,[298,1104,1105],{"class":369},"  left",[298,1107,320],{"class":312},[298,1109,1097],{"class":323},[298,1111,345],{"class":312},[298,1113,1115,1117,1119,1121],{"class":300,"line":1114},48,[298,1116,417],{"class":369},[298,1118,333],{"class":312},[298,1120,1097],{"class":323},[298,1122,345],{"class":312},[298,1124,1126,1129,1133,1136,1138,1140],{"class":300,"line":1125},49,[298,1127,1128],{"class":312},"  \"",[298,1130,1132],{"class":1131},"sfazB","will-change",[298,1134,1135],{"class":312},"\"",[298,1137,333],{"class":312},[298,1139,1097],{"class":323},[298,1141,345],{"class":312},[298,1143,1145,1148,1151],{"class":300,"line":1144},50,[298,1146,1147],{"class":312},"}",[298,1149,1150],{"class":312}," &",[298,1152,363],{"class":312},[298,1154,1156,1159,1162,1164,1167,1170,1173,1176,1179,1182,1184,1187],{"class":300,"line":1155},51,[298,1157,1158],{"class":455},"  [",[298,1160,1161],{"class":316},"key",[298,1163,320],{"class":312},[298,1165,1166],{"class":312}," `",[298,1168,1169],{"class":1131},"--",[298,1171,1172],{"class":312},"${",[298,1174,1175],{"class":323},"string",[298,1177,1178],{"class":312},"}`",[298,1180,1181],{"class":455},"]",[298,1183,320],{"class":312},[298,1185,1186],{"class":323}," any",[298,1188,345],{"class":312},[298,1190,1192],{"class":300,"line":1191},52,[298,1193,1194],{"class":312},"};\n",[284,1196,1198],{"id":1197},"options","Options",[1200,1201,1202,1220],"table",{},[1203,1204,1205],"thead",{},[1206,1207,1208,1212,1214,1217],"tr",{},[1209,1210,1211],"th",{},"Name",[1209,1213,287],{},[1209,1215,1216],{},"Default",[1209,1218,1219],{},"Notes",[1221,1222,1223,1248,1275,1313,1337,1359,1377],"tbody",{},[1206,1224,1225,1231,1236,1241],{},[1226,1227,1228],"td",{},[280,1229,1230],{},"placement",[1226,1232,1233],{},[280,1234,1235],{},"MaybeRefOrGetter\u003CPlacement>",[1226,1237,1238],{},[280,1239,1240],{},"\"bottom\"",[1226,1242,1243,1244,1247],{},"Desired side and alignment (e.g. ",[280,1245,1246],{},"\"bottom-start\"","). Reactive.",[1206,1249,1250,1255,1260,1265],{},[1226,1251,1252],{},[280,1253,1254],{},"strategy",[1226,1256,1257],{},[280,1258,1259],{},"MaybeRefOrGetter\u003CStrategy>",[1226,1261,1262],{},[280,1263,1264],{},"\"absolute\"",[1226,1266,1267,1268,1270,1271,1274],{},"CSS positioning strategy: ",[280,1269,1264],{}," or ",[280,1272,1273],{},"\"fixed\"",". Reactive.",[1206,1276,1277,1282,1287,1292],{},[1226,1278,1279],{},[280,1280,1281],{},"transform",[1226,1283,1284],{},[280,1285,1286],{},"MaybeRefOrGetter\u003Cboolean>",[1226,1288,1289],{},[280,1290,1291],{},"true",[1226,1293,1294,1296,1297,1300,1301,1304,1305,1308,1309,1312],{},[280,1295,1291],{}," uses CSS ",[280,1298,1299],{},"transform: translate(x, y)",". ",[280,1302,1303],{},"false"," sets ",[280,1306,1307],{},"top"," and ",[280,1310,1311],{},"left",".",[1206,1314,1315,1320,1325,1330],{},[1226,1316,1317],{},[280,1318,1319],{},"middlewares",[1226,1321,1322],{},[280,1323,1324],{},"MaybeRefOrGetter\u003CUsePositionMiddlewaresOptions | Middleware[]>",[1226,1326,1327],{},[280,1328,1329],{},"{}",[1226,1331,1332,1333,1336],{},"Declarative middleware configuration or a raw ",[280,1334,1335],{},"Middleware[]"," array.",[1206,1338,1339,1344,1349,1353],{},[1226,1340,1341],{},[280,1342,1343],{},"autoUpdate",[1226,1345,1346],{},[280,1347,1348],{},"MaybeRefOrGetter\u003Cboolean | AutoUpdateOptions>",[1226,1350,1351],{},[280,1352,1291],{},[1226,1354,1355,1356,1358],{},"Automatically recomputes on resize, scroll, and layout changes. Set ",[280,1357,1303],{}," to disable.",[1206,1360,1361,1366,1370,1374],{},[1226,1362,1363],{},[280,1364,1365],{},"enabled",[1226,1367,1368],{},[280,1369,1286],{},[1226,1371,1372],{},[280,1373,1291],{},[1226,1375,1376],{},"Controls whether positioning computations and viewport listeners are active.",[1206,1378,1379,1384,1389,1393],{},[1226,1380,1381],{},[280,1382,1383],{},"applyStyles",[1226,1385,1386],{},[280,1387,1388],{},"MaybeRef\u003Cboolean> | ApplyStylesFn",[1226,1390,1391],{},[280,1392,1291],{},[1226,1394,1395,1396,1399,1400,1402],{},"Automatically synchronizes computed styles to ",[280,1397,1398],{},"node.refs.floatingEl",". Pass ",[280,1401,1303],{}," to disable or a custom function to override.",[1404,1405,1407],"h3",{"id":1406},"declarative-middleware-options","Declarative Middleware Options",[277,1409,1410,1411,1413],{},"When passing an object to ",[280,1412,1319],{},", VFloat resolves built-in middlewares in the recommended pipeline order:",[1200,1415,1416,1431],{},[1203,1417,1418],{},[1206,1419,1420,1423,1425,1428],{},[1209,1421,1422],{},"Option",[1209,1424,287],{},[1209,1426,1427],{},"Pipeline Step",[1209,1429,1430],{},"Purpose",[1221,1432,1433,1450,1467,1484,1504,1521,1540,1557,1574,1594],{},[1206,1434,1435,1439,1444,1447],{},[1226,1436,1437],{},[280,1438,260],{},[1226,1440,1441],{},[280,1442,1443],{},"boolean | InlineOptions",[1226,1445,1446],{},"1",[1226,1448,1449],{},"Dissects multi-line inline triggers into individual client rects.",[1206,1451,1452,1456,1461,1464],{},[1226,1453,1454],{},[280,1455,240],{},[1226,1457,1458],{},[280,1459,1460],{},"number | OffsetOptions",[1226,1462,1463],{},"2",[1226,1465,1466],{},"Adds distance between the anchor and the floating panel.",[1206,1468,1469,1473,1478,1481],{},[1226,1470,1471],{},[280,1472,244],{},[1226,1474,1475],{},[280,1476,1477],{},"boolean | FlipOptions",[1226,1479,1480],{},"3",[1226,1482,1483],{},"Flips to alternate placements when space is constrained.",[1206,1485,1486,1490,1495,1498],{},[1226,1487,1488],{},[280,1489,252],{},[1226,1491,1492],{},[280,1493,1494],{},"boolean | AutoPlacementOptions",[1226,1496,1497],{},"4",[1226,1499,1500,1501,1503],{},"Chooses the placement with the most available space (mutually exclusive with ",[280,1502,244],{},").",[1206,1505,1506,1510,1515,1518],{},[1226,1507,1508],{},[280,1509,248],{},[1226,1511,1512],{},[280,1513,1514],{},"boolean | ShiftOptions",[1226,1516,1517],{},"5",[1226,1519,1520],{},"Nudges the element along the viewport boundary to stay visible.",[1206,1522,1523,1528,1532,1535],{},[1226,1524,1525],{},[280,1526,1527],{},"matchWidth",[1226,1529,1530],{},[280,1531,426],{},[1226,1533,1534],{},"6",[1226,1536,1537,1538,1312],{},"Sets panel width to match the anchor's measured width via ",[280,1539,256],{},[1206,1541,1542,1546,1551,1554],{},[1226,1543,1544],{},[280,1545,256],{},[1226,1547,1548],{},[280,1549,1550],{},"SizeOptions",[1226,1552,1553],{},"7",[1226,1555,1556],{},"Measures boundary limits and invokes a custom resizing function.",[1206,1558,1559,1563,1568,1571],{},[1226,1560,1561],{},[280,1562,268],{},[1226,1564,1565],{},[280,1566,1567],{},"boolean | HideOptions",[1226,1569,1570],{},"8",[1226,1572,1573],{},"Flags whether the anchor is clipped or the panel escaped boundaries.",[1206,1575,1576,1580,1585,1588],{},[1226,1577,1578],{},[280,1579,264],{},[1226,1581,1582],{},[280,1583,1584],{},"boolean | UsePositionArrowOptions",[1226,1586,1587],{},"9",[1226,1589,1590,1591,1312],{},"Calculates offsets for an arrow element using ",[280,1592,1593],{},"node.refs.arrowEl",[1206,1595,1596,1601,1605,1608],{},[1226,1597,1598],{},[280,1599,1600],{},"custom",[1226,1602,1603],{},[280,1604,1335],{},[1226,1606,1607],{},"10",[1226,1609,1610],{},"Appends custom Floating UI middleware instances at the end of the pipeline.",[277,1612,1613,1614,1616,1617,1619],{},"Alternatively, you can pass a raw ",[280,1615,1335],{}," array to ",[280,1618,1319],{}," to fully customize the middleware instances and execution order.",[284,1621,1623],{"id":1622},"returns","Returns",[1200,1625,1626,1636],{},[1203,1627,1628],{},[1206,1629,1630,1632,1634],{},[1209,1631,1211],{},[1209,1633,287],{},[1209,1635,1219],{},[1221,1637,1638,1657,1675,1689,1704,1725,1754],{},[1206,1639,1640,1649,1654],{},[1226,1641,1642,1645,1646],{},[280,1643,1644],{},"x"," \u002F ",[280,1647,1648],{},"y",[1226,1650,1651],{},[280,1652,1653],{},"Readonly\u003CRef\u003Cnumber>>",[1226,1655,1656],{},"Computed horizontal and vertical coordinates in pixels.",[1206,1658,1659,1663,1668],{},[1226,1660,1661],{},[280,1662,1254],{},[1226,1664,1665],{},[280,1666,1667],{},"Readonly\u003CRef\u003CStrategy>>",[1226,1669,1670,1671,1270,1673,1503],{},"Active positioning strategy (",[280,1672,1264],{},[280,1674,1273],{},[1206,1676,1677,1681,1686],{},[1226,1678,1679],{},[280,1680,1230],{},[1226,1682,1683],{},[280,1684,1685],{},"Readonly\u003CRef\u003CPlacement>>",[1226,1687,1688],{},"Effective placement after middleware execution (e.g. after flipping).",[1206,1690,1691,1696,1701],{},[1226,1692,1693],{},[280,1694,1695],{},"middlewareData",[1226,1697,1698],{},[280,1699,1700],{},"Readonly\u003CRef\u003CMiddlewareData>>",[1226,1702,1703],{},"Raw output produced by middlewares (such as arrow coordinates or hide flags).",[1206,1705,1706,1711,1716],{},[1226,1707,1708],{},[280,1709,1710],{},"isPositioned",[1226,1712,1713],{},[280,1714,1715],{},"Readonly\u003CRef\u003Cboolean>>",[1226,1717,1718,1719,1721,1722,1724],{},"Becomes ",[280,1720,1291],{}," once coordinates are computed for mounted elements. Resets to ",[280,1723,1303],{}," on unmount.",[1206,1726,1727,1732,1737],{},[1226,1728,1729],{},[280,1730,1731],{},"styles",[1226,1733,1734],{},[280,1735,1736],{},"Readonly\u003CRef\u003CFloatingStyles>>",[1226,1738,1739,1740,1742,1743,1746,1747,1750,1751,1312],{},"Reactive inline style object with device-pixel-ratio subpixel rounding. Synchronized directly to ",[280,1741,1398],{}," by default (",[280,1744,1745],{},"applyStyles: true","), or manually bindable via ",[280,1748,1749],{},":style=\"styles\""," when ",[280,1752,1753],{},"applyStyles: false",[1206,1755,1756,1761,1766],{},[1226,1757,1758],{},[280,1759,1760],{},"update",[1226,1762,1763],{},[280,1764,1765],{},"() => Promise\u003Cvoid>",[1226,1767,1768],{},"Imperatively forces an immediate coordinate recomputation.",[284,1770,1772],{"id":1771},"details","Details",[1404,1774,1776],{"id":1775},"subpixel-snapping-and-performance","Subpixel Snapping and Performance",[277,1778,1779,1781,1782,1785,1786,1789,1790,1793],{},[280,1780,1731],{}," applies ",[280,1783,1784],{},"Math.round(val * dpr) \u002F dpr"," to coordinate outputs using ",[280,1787,1788],{},"window.devicePixelRatio",". This prevents blurred text and rendering artifacts on high-DPI displays. On displays with DPR ≥ 1.5, ",[280,1791,1792],{},"will-change: transform"," is automatically applied.",[1404,1795,1797],{"id":1796},"server-side-rendering-ssr","Server-Side Rendering (SSR)",[277,1799,1800,1802,1803,1805],{},[280,1801,171],{}," is safe to run in SSR environments. On the server, ",[280,1804,1731],{}," renders safe baseline rules:",[289,1807,1811],{"className":1808,"code":1809,"language":1810,"meta":294,"style":294},"language-css shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","position: absolute;\nleft: 0;\ntop: 0;\n","css",[280,1812,1813,1818,1823],{"__ignoreMap":294},[298,1814,1815],{"class":300,"line":301},[298,1816,1817],{"class":455},"position: absolute;\n",[298,1819,1820],{"class":300,"line":348},[298,1821,1822],{"class":455},"left: 0;\n",[298,1824,1825],{"class":300,"line":355},[298,1826,1827],{"class":455},"top: 0;\n",[277,1829,1830],{},"Full coordinate calculation begins once components mount in the browser.",[1404,1832,1834],{"id":1833},"automatic-style-binding-overrides","Automatic Style Binding & Overrides",[277,1836,1837,1838,1840,1841,1843,1844,1847,1848,1847,1850,1847,1852,1847,1854,1856,1857,1860,1861,1863],{},"By default (",[280,1839,1745],{},"), ",[280,1842,171],{}," automatically synchronizes positioning styles (",[280,1845,1846],{},"position",", ",[280,1849,1311],{},[280,1851,1307],{},[280,1853,1281],{},[280,1855,1132],{},", and custom CSS variables) directly to ",[280,1858,1859],{},"node.refs.floatingEl.value.style",". You do not need to bind ",[280,1862,1749],{}," in your template.",[277,1865,1866],{},"If you need full control over style application, you can:",[1868,1869,1870,1885],"ol",{},[1871,1872,1873,1877,1878,1300,1880,1882,1883,1312],"li",{},[1874,1875,1876],"strong",{},"Opt out of automatic binding"," by setting ",[280,1879,1753],{},[280,1881,1731],{}," remains reactive and available on the return object to bind via ",[280,1884,1749],{},[1871,1886,1887,1890,1891],{},[1874,1888,1889],{},"Provide a custom applicator callback",":\n",[289,1892,1894],{"className":291,"code":1893,"language":293,"meta":294,"style":294},"usePosition(node, {\n  applyStyles(el, styles) {\n    Object.assign(el.style, styles);\n    \u002F\u002F Custom style application or animation logic\n    return () => {\n      \u002F\u002F Optional cleanup callback\n    };\n  },\n});\n",[280,1895,1896,1907,1924,1951,1957,1969,1974,1979,1984],{"__ignoreMap":294},[298,1897,1898,1900,1903,1905],{"class":300,"line":301},[298,1899,171],{"class":308},[298,1901,1902],{"class":455},"(node",[298,1904,327],{"class":312},[298,1906,363],{"class":312},[298,1908,1909,1911,1913,1916,1918,1920,1922],{"class":300,"line":348},[298,1910,510],{"class":369},[298,1912,313],{"class":312},[298,1914,1915],{"class":316},"el",[298,1917,327],{"class":312},[298,1919,570],{"class":316},[298,1921,578],{"class":312},[298,1923,363],{"class":312},[298,1925,1926,1929,1931,1934,1936,1938,1940,1943,1945,1947,1949],{"class":300,"line":355},[298,1927,1928],{"class":455},"    Object",[298,1930,1312],{"class":312},[298,1932,1933],{"class":308},"assign",[298,1935,313],{"class":369},[298,1937,1915],{"class":455},[298,1939,1312],{"class":312},[298,1941,1942],{"class":455},"style",[298,1944,327],{"class":312},[298,1946,570],{"class":455},[298,1948,578],{"class":369},[298,1950,345],{"class":312},[298,1952,1953],{"class":300,"line":366},[298,1954,1956],{"class":1955},"sHwdD","    \u002F\u002F Custom style application or animation logic\n",[298,1958,1959,1963,1965,1967],{"class":300,"line":393},[298,1960,1962],{"class":1961},"s7zQu","    return",[298,1964,1040],{"class":312},[298,1966,581],{"class":304},[298,1968,363],{"class":312},[298,1970,1971],{"class":300,"line":414},[298,1972,1973],{"class":1955},"      \u002F\u002F Optional cleanup callback\n",[298,1975,1976],{"class":300,"line":435},[298,1977,1978],{"class":312},"    };\n",[298,1980,1981],{"class":300,"line":466},[298,1982,1983],{"class":312},"  },\n",[298,1985,1986,1988,1990],{"class":300,"line":491},[298,1987,1147],{"class":312},[298,1989,578],{"class":455},[298,1991,345],{"class":312},[1404,1993,1995],{"id":1994},"dynamic-middleware-contributions","Dynamic Middleware Contributions",[277,1997,1998,1999,2004,2005,1312],{},"Companion composables such as ",[2000,2001,2002],"a",{"href":176},[280,2003,175],{}," dynamically register their middleware into the node's internal registry. You do not need to configure arrow middleware manually when calling ",[280,2006,2007],{},"useArrow(node)",[284,2009,2011],{"id":2010},"example","Example",[1404,2013,2015],{"id":2014},"declarative-middleware-configuration-automatic-styling","Declarative Middleware Configuration (Automatic Styling)",[289,2017,2021],{"className":2018,"code":2019,"language":2020,"meta":294,"style":294},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\nimport { ref } from \"vue\";\nimport { useFloatingNode, usePosition, useHover } from \"v-float\";\n\nconst anchorEl = ref\u003CHTMLElement | null>(null);\nconst floatingEl = ref\u003CHTMLElement | null>(null);\n\nconst node = useFloatingNode({ anchorEl, floatingEl });\nconst { placement } = usePosition(node, {\n  placement: \"top\",\n  middlewares: {\n    offset: 8,\n    flip: true,\n    shift: { padding: 8 },\n  },\n  enabled: () => node.open.value,\n});\n\nuseHover(node);\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cbutton ref=\"anchorEl\">Hover me\u003C\u002Fbutton>\n  \u003Cdiv v-if=\"node.open\" ref=\"floatingEl\" :data-placement=\"placement\">Tooltip content\u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n","vue",[280,2022,2023,2048,2074,2105,2109,2140,2169,2173,2202,2223,2238,2246,2259,2271,2290,2294,2319,2327,2331,2340,2349,2353,2362,2392,2444],{"__ignoreMap":294},[298,2024,2025,2027,2030,2033,2036,2039,2041,2043,2045],{"class":300,"line":301},[298,2026,378],{"class":312},[298,2028,2029],{"class":369},"script",[298,2031,2032],{"class":304}," setup",[298,2034,2035],{"class":304}," lang",[298,2037,2038],{"class":312},"=",[298,2040,1135],{"class":312},[298,2042,293],{"class":1131},[298,2044,1135],{"class":312},[298,2046,2047],{"class":312},">\n",[298,2049,2050,2053,2056,2059,2062,2065,2068,2070,2072],{"class":300,"line":348},[298,2051,2052],{"class":1961},"import",[298,2054,2055],{"class":312}," {",[298,2057,2058],{"class":455}," ref",[298,2060,2061],{"class":312}," }",[298,2063,2064],{"class":1961}," from",[298,2066,2067],{"class":312}," \"",[298,2069,2020],{"class":1131},[298,2071,1135],{"class":312},[298,2073,345],{"class":312},[298,2075,2076,2078,2080,2083,2085,2087,2089,2092,2094,2096,2098,2101,2103],{"class":300,"line":355},[298,2077,2052],{"class":1961},[298,2079,2055],{"class":312},[298,2081,2082],{"class":455}," useFloatingNode",[298,2084,327],{"class":312},[298,2086,309],{"class":455},[298,2088,327],{"class":312},[298,2090,2091],{"class":455}," useHover",[298,2093,2061],{"class":312},[298,2095,2064],{"class":1961},[298,2097,2067],{"class":312},[298,2099,2100],{"class":1131},"v-float",[298,2102,1135],{"class":312},[298,2104,345],{"class":312},[298,2106,2107],{"class":300,"line":366},[298,2108,352],{"emptyLinePlaceholder":351},[298,2110,2111,2114,2117,2119,2121,2123,2125,2127,2129,2131,2133,2136,2138],{"class":300,"line":393},[298,2112,2113],{"class":304},"const",[298,2115,2116],{"class":455}," anchorEl ",[298,2118,2038],{"class":312},[298,2120,2058],{"class":308},[298,2122,378],{"class":312},[298,2124,846],{"class":323},[298,2126,384],{"class":312},[298,2128,851],{"class":323},[298,2130,526],{"class":312},[298,2132,313],{"class":455},[298,2134,2135],{"class":312},"null",[298,2137,578],{"class":455},[298,2139,345],{"class":312},[298,2141,2142,2144,2147,2149,2151,2153,2155,2157,2159,2161,2163,2165,2167],{"class":300,"line":414},[298,2143,2113],{"class":304},[298,2145,2146],{"class":455}," floatingEl ",[298,2148,2038],{"class":312},[298,2150,2058],{"class":308},[298,2152,378],{"class":312},[298,2154,846],{"class":323},[298,2156,384],{"class":312},[298,2158,851],{"class":323},[298,2160,526],{"class":312},[298,2162,313],{"class":455},[298,2164,2135],{"class":312},[298,2166,578],{"class":455},[298,2168,345],{"class":312},[298,2170,2171],{"class":300,"line":435},[298,2172,352],{"emptyLinePlaceholder":351},[298,2174,2175,2177,2180,2182,2184,2186,2189,2192,2194,2196,2198,2200],{"class":300,"line":466},[298,2176,2113],{"class":304},[298,2178,2179],{"class":455}," node ",[298,2181,2038],{"class":312},[298,2183,2082],{"class":308},[298,2185,313],{"class":455},[298,2187,2188],{"class":312},"{",[298,2190,2191],{"class":455}," anchorEl",[298,2193,327],{"class":312},[298,2195,2146],{"class":455},[298,2197,1147],{"class":312},[298,2199,578],{"class":455},[298,2201,345],{"class":312},[298,2203,2204,2206,2208,2211,2213,2215,2217,2219,2221],{"class":300,"line":491},[298,2205,2113],{"class":304},[298,2207,2055],{"class":312},[298,2209,2210],{"class":455}," placement ",[298,2212,1147],{"class":312},[298,2214,554],{"class":312},[298,2216,309],{"class":308},[298,2218,1902],{"class":455},[298,2220,327],{"class":312},[298,2222,363],{"class":312},[298,2224,2225,2227,2229,2231,2233,2235],{"class":300,"line":507},[298,2226,370],{"class":369},[298,2228,320],{"class":312},[298,2230,2067],{"class":312},[298,2232,1307],{"class":1131},[298,2234,1135],{"class":312},[298,2236,2237],{"class":312},",\n",[298,2239,2240,2242,2244],{"class":300,"line":536},[298,2241,438],{"class":369},[298,2243,320],{"class":312},[298,2245,363],{"class":312},[298,2247,2248,2251,2253,2257],{"class":300,"line":542},[298,2249,2250],{"class":369},"    offset",[298,2252,320],{"class":312},[298,2254,2256],{"class":2255},"sbssI"," 8",[298,2258,2237],{"class":312},[298,2260,2261,2264,2266,2269],{"class":300,"line":547},[298,2262,2263],{"class":369},"    flip",[298,2265,320],{"class":312},[298,2267,625],{"class":2268},"sfNiH",[298,2270,2237],{"class":312},[298,2272,2273,2276,2278,2280,2283,2285,2287],{"class":300,"line":602},[298,2274,2275],{"class":369},"    shift",[298,2277,320],{"class":312},[298,2279,2055],{"class":312},[298,2281,2282],{"class":369}," padding",[298,2284,320],{"class":312},[298,2286,2256],{"class":2255},[298,2288,2289],{"class":312}," },\n",[298,2291,2292],{"class":300,"line":607},[298,2293,1983],{"class":312},[298,2295,2296,2298,2300,2302,2304,2307,2309,2312,2314,2317],{"class":300,"line":617},[298,2297,494],{"class":308},[298,2299,320],{"class":312},[298,2301,1040],{"class":312},[298,2303,581],{"class":304},[298,2305,2306],{"class":455}," node",[298,2308,1312],{"class":312},[298,2310,2311],{"class":455},"open",[298,2313,1312],{"class":312},[298,2315,2316],{"class":455},"value",[298,2318,2237],{"class":312},[298,2320,2321,2323,2325],{"class":300,"line":640},[298,2322,1147],{"class":312},[298,2324,578],{"class":455},[298,2326,345],{"class":312},[298,2328,2329],{"class":300,"line":661},[298,2330,352],{"emptyLinePlaceholder":351},[298,2332,2333,2335,2338],{"class":300,"line":682},[298,2334,193],{"class":308},[298,2336,2337],{"class":455},"(node)",[298,2339,345],{"class":312},[298,2341,2342,2345,2347],{"class":300,"line":703},[298,2343,2344],{"class":312},"\u003C\u002F",[298,2346,2029],{"class":369},[298,2348,2047],{"class":312},[298,2350,2351],{"class":300,"line":724},[298,2352,352],{"emptyLinePlaceholder":351},[298,2354,2355,2357,2360],{"class":300,"line":737},[298,2356,378],{"class":312},[298,2358,2359],{"class":369},"template",[298,2361,2047],{"class":312},[298,2363,2364,2367,2370,2372,2374,2376,2379,2381,2383,2386,2388,2390],{"class":300,"line":750},[298,2365,2366],{"class":312},"  \u003C",[298,2368,2369],{"class":369},"button",[298,2371,2058],{"class":304},[298,2373,2038],{"class":312},[298,2375,1135],{"class":312},[298,2377,2378],{"class":1131},"anchorEl",[298,2380,1135],{"class":312},[298,2382,526],{"class":312},[298,2384,2385],{"class":455},"Hover me",[298,2387,2344],{"class":312},[298,2389,2369],{"class":369},[298,2391,2047],{"class":312},[298,2393,2394,2396,2399,2402,2404,2406,2409,2411,2413,2415,2417,2420,2422,2425,2427,2429,2431,2433,2435,2438,2440,2442],{"class":300,"line":771},[298,2395,2366],{"class":312},[298,2397,2398],{"class":369},"div",[298,2400,2401],{"class":304}," v-if",[298,2403,2038],{"class":312},[298,2405,1135],{"class":312},[298,2407,2408],{"class":1131},"node.open",[298,2410,1135],{"class":312},[298,2412,2058],{"class":304},[298,2414,2038],{"class":312},[298,2416,1135],{"class":312},[298,2418,2419],{"class":1131},"floatingEl",[298,2421,1135],{"class":312},[298,2423,2424],{"class":304}," :data-placement",[298,2426,2038],{"class":312},[298,2428,1135],{"class":312},[298,2430,1230],{"class":1131},[298,2432,1135],{"class":312},[298,2434,526],{"class":312},[298,2436,2437],{"class":455},"Tooltip content",[298,2439,2344],{"class":312},[298,2441,2398],{"class":369},[298,2443,2047],{"class":312},[298,2445,2446,2448,2450],{"class":300,"line":792},[298,2447,2344],{"class":312},[298,2449,2359],{"class":369},[298,2451,2047],{"class":312},[1404,2453,2455],{"id":2454},"match-anchor-width","Match Anchor Width",[277,2457,2458],{},"For dropdowns and select menus where the panel should match the trigger width:",[289,2460,2462],{"className":2018,"code":2461,"language":2020,"meta":294,"style":294},"\u003Cscript setup lang=\"ts\">\nimport { ref } from \"vue\";\nimport { useClick, useFloatingNode, usePosition } from \"v-float\";\n\nconst anchorEl = ref\u003CHTMLElement | null>(null);\nconst floatingEl = ref\u003CHTMLElement | null>(null);\n\nconst node = useFloatingNode({ anchorEl, floatingEl });\nusePosition(node, {\n  placement: \"bottom-start\",\n  middlewares: {\n    offset: 4,\n    matchWidth: true,\n  },\n});\n\nuseClick(node);\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cbutton ref=\"anchorEl\" style=\"width: 240px\">Select an option\u003C\u002Fbutton>\n  \u003Cdiv v-if=\"node.open\" ref=\"floatingEl\">Matches anchor width (240px)\u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n",[280,2463,2464,2484,2504,2533,2537,2565,2593,2597,2623,2633,2648,2656,2667,2678,2682,2690,2694,2702,2710,2714,2722,2761,2798],{"__ignoreMap":294},[298,2465,2466,2468,2470,2472,2474,2476,2478,2480,2482],{"class":300,"line":301},[298,2467,378],{"class":312},[298,2469,2029],{"class":369},[298,2471,2032],{"class":304},[298,2473,2035],{"class":304},[298,2475,2038],{"class":312},[298,2477,1135],{"class":312},[298,2479,293],{"class":1131},[298,2481,1135],{"class":312},[298,2483,2047],{"class":312},[298,2485,2486,2488,2490,2492,2494,2496,2498,2500,2502],{"class":300,"line":348},[298,2487,2052],{"class":1961},[298,2489,2055],{"class":312},[298,2491,2058],{"class":455},[298,2493,2061],{"class":312},[298,2495,2064],{"class":1961},[298,2497,2067],{"class":312},[298,2499,2020],{"class":1131},[298,2501,1135],{"class":312},[298,2503,345],{"class":312},[298,2505,2506,2508,2510,2513,2515,2517,2519,2521,2523,2525,2527,2529,2531],{"class":300,"line":355},[298,2507,2052],{"class":1961},[298,2509,2055],{"class":312},[298,2511,2512],{"class":455}," useClick",[298,2514,327],{"class":312},[298,2516,2082],{"class":455},[298,2518,327],{"class":312},[298,2520,309],{"class":455},[298,2522,2061],{"class":312},[298,2524,2064],{"class":1961},[298,2526,2067],{"class":312},[298,2528,2100],{"class":1131},[298,2530,1135],{"class":312},[298,2532,345],{"class":312},[298,2534,2535],{"class":300,"line":366},[298,2536,352],{"emptyLinePlaceholder":351},[298,2538,2539,2541,2543,2545,2547,2549,2551,2553,2555,2557,2559,2561,2563],{"class":300,"line":393},[298,2540,2113],{"class":304},[298,2542,2116],{"class":455},[298,2544,2038],{"class":312},[298,2546,2058],{"class":308},[298,2548,378],{"class":312},[298,2550,846],{"class":323},[298,2552,384],{"class":312},[298,2554,851],{"class":323},[298,2556,526],{"class":312},[298,2558,313],{"class":455},[298,2560,2135],{"class":312},[298,2562,578],{"class":455},[298,2564,345],{"class":312},[298,2566,2567,2569,2571,2573,2575,2577,2579,2581,2583,2585,2587,2589,2591],{"class":300,"line":414},[298,2568,2113],{"class":304},[298,2570,2146],{"class":455},[298,2572,2038],{"class":312},[298,2574,2058],{"class":308},[298,2576,378],{"class":312},[298,2578,846],{"class":323},[298,2580,384],{"class":312},[298,2582,851],{"class":323},[298,2584,526],{"class":312},[298,2586,313],{"class":455},[298,2588,2135],{"class":312},[298,2590,578],{"class":455},[298,2592,345],{"class":312},[298,2594,2595],{"class":300,"line":435},[298,2596,352],{"emptyLinePlaceholder":351},[298,2598,2599,2601,2603,2605,2607,2609,2611,2613,2615,2617,2619,2621],{"class":300,"line":466},[298,2600,2113],{"class":304},[298,2602,2179],{"class":455},[298,2604,2038],{"class":312},[298,2606,2082],{"class":308},[298,2608,313],{"class":455},[298,2610,2188],{"class":312},[298,2612,2191],{"class":455},[298,2614,327],{"class":312},[298,2616,2146],{"class":455},[298,2618,1147],{"class":312},[298,2620,578],{"class":455},[298,2622,345],{"class":312},[298,2624,2625,2627,2629,2631],{"class":300,"line":491},[298,2626,171],{"class":308},[298,2628,1902],{"class":455},[298,2630,327],{"class":312},[298,2632,363],{"class":312},[298,2634,2635,2637,2639,2641,2644,2646],{"class":300,"line":507},[298,2636,370],{"class":369},[298,2638,320],{"class":312},[298,2640,2067],{"class":312},[298,2642,2643],{"class":1131},"bottom-start",[298,2645,1135],{"class":312},[298,2647,2237],{"class":312},[298,2649,2650,2652,2654],{"class":300,"line":536},[298,2651,438],{"class":369},[298,2653,320],{"class":312},[298,2655,363],{"class":312},[298,2657,2658,2660,2662,2665],{"class":300,"line":542},[298,2659,2250],{"class":369},[298,2661,320],{"class":312},[298,2663,2664],{"class":2255}," 4",[298,2666,2237],{"class":312},[298,2668,2669,2672,2674,2676],{"class":300,"line":547},[298,2670,2671],{"class":369},"    matchWidth",[298,2673,320],{"class":312},[298,2675,625],{"class":2268},[298,2677,2237],{"class":312},[298,2679,2680],{"class":300,"line":602},[298,2681,1983],{"class":312},[298,2683,2684,2686,2688],{"class":300,"line":607},[298,2685,1147],{"class":312},[298,2687,578],{"class":455},[298,2689,345],{"class":312},[298,2691,2692],{"class":300,"line":617},[298,2693,352],{"emptyLinePlaceholder":351},[298,2695,2696,2698,2700],{"class":300,"line":640},[298,2697,189],{"class":308},[298,2699,2337],{"class":455},[298,2701,345],{"class":312},[298,2703,2704,2706,2708],{"class":300,"line":661},[298,2705,2344],{"class":312},[298,2707,2029],{"class":369},[298,2709,2047],{"class":312},[298,2711,2712],{"class":300,"line":682},[298,2713,352],{"emptyLinePlaceholder":351},[298,2715,2716,2718,2720],{"class":300,"line":703},[298,2717,378],{"class":312},[298,2719,2359],{"class":369},[298,2721,2047],{"class":312},[298,2723,2724,2726,2728,2730,2732,2734,2736,2738,2741,2743,2745,2748,2750,2752,2755,2757,2759],{"class":300,"line":724},[298,2725,2366],{"class":312},[298,2727,2369],{"class":369},[298,2729,2058],{"class":304},[298,2731,2038],{"class":312},[298,2733,1135],{"class":312},[298,2735,2378],{"class":1131},[298,2737,1135],{"class":312},[298,2739,2740],{"class":304}," style",[298,2742,2038],{"class":312},[298,2744,1135],{"class":312},[298,2746,2747],{"class":1131},"width: 240px",[298,2749,1135],{"class":312},[298,2751,526],{"class":312},[298,2753,2754],{"class":455},"Select an option",[298,2756,2344],{"class":312},[298,2758,2369],{"class":369},[298,2760,2047],{"class":312},[298,2762,2763,2765,2767,2769,2771,2773,2775,2777,2779,2781,2783,2785,2787,2789,2792,2794,2796],{"class":300,"line":737},[298,2764,2366],{"class":312},[298,2766,2398],{"class":369},[298,2768,2401],{"class":304},[298,2770,2038],{"class":312},[298,2772,1135],{"class":312},[298,2774,2408],{"class":1131},[298,2776,1135],{"class":312},[298,2778,2058],{"class":304},[298,2780,2038],{"class":312},[298,2782,1135],{"class":312},[298,2784,2419],{"class":1131},[298,2786,1135],{"class":312},[298,2788,526],{"class":312},[298,2790,2791],{"class":455},"Matches anchor width (240px)",[298,2793,2344],{"class":312},[298,2795,2398],{"class":369},[298,2797,2047],{"class":312},[298,2799,2800,2802,2804],{"class":300,"line":750},[298,2801,2344],{"class":312},[298,2803,2359],{"class":369},[298,2805,2047],{"class":312},[1404,2807,2809,2810,578],{"id":2808},"manual-style-binding-applystyles-false","Manual Style Binding (",[280,2811,1753],{},[277,2813,2814],{},"If you want to manage style bindings manually in your template:",[289,2816,2818],{"className":2018,"code":2817,"language":2020,"meta":294,"style":294},"\u003Cscript setup lang=\"ts\">\nimport { ref } from \"vue\";\nimport { useFloatingNode, usePosition } from \"v-float\";\n\nconst anchorEl = ref\u003CHTMLElement | null>(null);\nconst floatingEl = ref\u003CHTMLElement | null>(null);\n\nconst node = useFloatingNode({ anchorEl, floatingEl });\nconst { styles } = usePosition(node, {\n  placement: \"bottom\",\n  applyStyles: false,\n});\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cbutton ref=\"anchorEl\">Trigger\u003C\u002Fbutton>\n  \u003Cdiv v-if=\"node.open\" ref=\"floatingEl\" :style=\"styles\">Manual style binding\u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n",[280,2819,2820,2840,2860,2884,2888,2916,2944,2948,2974,2995,3010,3020,3028,3036,3040,3048,3075,3123],{"__ignoreMap":294},[298,2821,2822,2824,2826,2828,2830,2832,2834,2836,2838],{"class":300,"line":301},[298,2823,378],{"class":312},[298,2825,2029],{"class":369},[298,2827,2032],{"class":304},[298,2829,2035],{"class":304},[298,2831,2038],{"class":312},[298,2833,1135],{"class":312},[298,2835,293],{"class":1131},[298,2837,1135],{"class":312},[298,2839,2047],{"class":312},[298,2841,2842,2844,2846,2848,2850,2852,2854,2856,2858],{"class":300,"line":348},[298,2843,2052],{"class":1961},[298,2845,2055],{"class":312},[298,2847,2058],{"class":455},[298,2849,2061],{"class":312},[298,2851,2064],{"class":1961},[298,2853,2067],{"class":312},[298,2855,2020],{"class":1131},[298,2857,1135],{"class":312},[298,2859,345],{"class":312},[298,2861,2862,2864,2866,2868,2870,2872,2874,2876,2878,2880,2882],{"class":300,"line":355},[298,2863,2052],{"class":1961},[298,2865,2055],{"class":312},[298,2867,2082],{"class":455},[298,2869,327],{"class":312},[298,2871,309],{"class":455},[298,2873,2061],{"class":312},[298,2875,2064],{"class":1961},[298,2877,2067],{"class":312},[298,2879,2100],{"class":1131},[298,2881,1135],{"class":312},[298,2883,345],{"class":312},[298,2885,2886],{"class":300,"line":366},[298,2887,352],{"emptyLinePlaceholder":351},[298,2889,2890,2892,2894,2896,2898,2900,2902,2904,2906,2908,2910,2912,2914],{"class":300,"line":393},[298,2891,2113],{"class":304},[298,2893,2116],{"class":455},[298,2895,2038],{"class":312},[298,2897,2058],{"class":308},[298,2899,378],{"class":312},[298,2901,846],{"class":323},[298,2903,384],{"class":312},[298,2905,851],{"class":323},[298,2907,526],{"class":312},[298,2909,313],{"class":455},[298,2911,2135],{"class":312},[298,2913,578],{"class":455},[298,2915,345],{"class":312},[298,2917,2918,2920,2922,2924,2926,2928,2930,2932,2934,2936,2938,2940,2942],{"class":300,"line":414},[298,2919,2113],{"class":304},[298,2921,2146],{"class":455},[298,2923,2038],{"class":312},[298,2925,2058],{"class":308},[298,2927,378],{"class":312},[298,2929,846],{"class":323},[298,2931,384],{"class":312},[298,2933,851],{"class":323},[298,2935,526],{"class":312},[298,2937,313],{"class":455},[298,2939,2135],{"class":312},[298,2941,578],{"class":455},[298,2943,345],{"class":312},[298,2945,2946],{"class":300,"line":435},[298,2947,352],{"emptyLinePlaceholder":351},[298,2949,2950,2952,2954,2956,2958,2960,2962,2964,2966,2968,2970,2972],{"class":300,"line":466},[298,2951,2113],{"class":304},[298,2953,2179],{"class":455},[298,2955,2038],{"class":312},[298,2957,2082],{"class":308},[298,2959,313],{"class":455},[298,2961,2188],{"class":312},[298,2963,2191],{"class":455},[298,2965,327],{"class":312},[298,2967,2146],{"class":455},[298,2969,1147],{"class":312},[298,2971,578],{"class":455},[298,2973,345],{"class":312},[298,2975,2976,2978,2980,2983,2985,2987,2989,2991,2993],{"class":300,"line":491},[298,2977,2113],{"class":304},[298,2979,2055],{"class":312},[298,2981,2982],{"class":455}," styles ",[298,2984,1147],{"class":312},[298,2986,554],{"class":312},[298,2988,309],{"class":308},[298,2990,1902],{"class":455},[298,2992,327],{"class":312},[298,2994,363],{"class":312},[298,2996,2997,2999,3001,3003,3006,3008],{"class":300,"line":507},[298,2998,370],{"class":369},[298,3000,320],{"class":312},[298,3002,2067],{"class":312},[298,3004,3005],{"class":1131},"bottom",[298,3007,1135],{"class":312},[298,3009,2237],{"class":312},[298,3011,3012,3014,3016,3018],{"class":300,"line":536},[298,3013,510],{"class":369},[298,3015,320],{"class":312},[298,3017,630],{"class":2268},[298,3019,2237],{"class":312},[298,3021,3022,3024,3026],{"class":300,"line":542},[298,3023,1147],{"class":312},[298,3025,578],{"class":455},[298,3027,345],{"class":312},[298,3029,3030,3032,3034],{"class":300,"line":547},[298,3031,2344],{"class":312},[298,3033,2029],{"class":369},[298,3035,2047],{"class":312},[298,3037,3038],{"class":300,"line":602},[298,3039,352],{"emptyLinePlaceholder":351},[298,3041,3042,3044,3046],{"class":300,"line":607},[298,3043,378],{"class":312},[298,3045,2359],{"class":369},[298,3047,2047],{"class":312},[298,3049,3050,3052,3054,3056,3058,3060,3062,3064,3066,3069,3071,3073],{"class":300,"line":617},[298,3051,2366],{"class":312},[298,3053,2369],{"class":369},[298,3055,2058],{"class":304},[298,3057,2038],{"class":312},[298,3059,1135],{"class":312},[298,3061,2378],{"class":1131},[298,3063,1135],{"class":312},[298,3065,526],{"class":312},[298,3067,3068],{"class":455},"Trigger",[298,3070,2344],{"class":312},[298,3072,2369],{"class":369},[298,3074,2047],{"class":312},[298,3076,3077,3079,3081,3083,3085,3087,3089,3091,3093,3095,3097,3099,3101,3104,3106,3108,3110,3112,3114,3117,3119,3121],{"class":300,"line":640},[298,3078,2366],{"class":312},[298,3080,2398],{"class":369},[298,3082,2401],{"class":304},[298,3084,2038],{"class":312},[298,3086,1135],{"class":312},[298,3088,2408],{"class":1131},[298,3090,1135],{"class":312},[298,3092,2058],{"class":304},[298,3094,2038],{"class":312},[298,3096,1135],{"class":312},[298,3098,2419],{"class":1131},[298,3100,1135],{"class":312},[298,3102,3103],{"class":304}," :style",[298,3105,2038],{"class":312},[298,3107,1135],{"class":312},[298,3109,1731],{"class":1131},[298,3111,1135],{"class":312},[298,3113,526],{"class":312},[298,3115,3116],{"class":455},"Manual style binding",[298,3118,2344],{"class":312},[298,3120,2398],{"class":369},[298,3122,2047],{"class":312},[298,3124,3125,3127,3129],{"class":300,"line":661},[298,3126,2344],{"class":312},[298,3128,2359],{"class":369},[298,3130,2047],{"class":312},[284,3132,3134],{"id":3133},"see-also","See Also",[3136,3137,3138,3145,3152,3159,3166,3173],"ul",{},[1871,3139,3140,3144],{},[2000,3141,3142],{"href":163},[280,3143,162],{}," - Provides element refs and open state",[1871,3146,3147,3151],{},[2000,3148,3149],{"href":176},[280,3150,175],{}," - Connects and styles an arrow element",[1871,3153,3154,3158],{},[2000,3155,3156],{"href":241},[280,3157,240],{}," - Distance middleware",[1871,3160,3161,3165],{},[2000,3162,3163],{"href":245},[280,3164,244],{}," - Placement fallback middleware",[1871,3167,3168,3172],{},[2000,3169,3170],{"href":249},[280,3171,248],{}," - Viewport containment middleware",[1871,3174,3175,3178],{},[2000,3176,3177],{"href":41},"Placement and Positioning"," - Positioning concepts and pipeline",[1942,3180,3181],{},"html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .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 .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 .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}",{"title":294,"searchDepth":348,"depth":348,"links":3183},[3184,3185,3188,3189,3195,3201],{"id":286,"depth":348,"text":287},{"id":1197,"depth":348,"text":1198,"children":3186},[3187],{"id":1406,"depth":355,"text":1407},{"id":1622,"depth":348,"text":1623},{"id":1771,"depth":348,"text":1772,"children":3190},[3191,3192,3193,3194],{"id":1775,"depth":355,"text":1776},{"id":1796,"depth":355,"text":1797},{"id":1833,"depth":355,"text":1834},{"id":1994,"depth":355,"text":1995},{"id":2010,"depth":348,"text":2011,"children":3196},[3197,3198,3199],{"id":2014,"depth":355,"text":2015},{"id":2454,"depth":355,"text":2455},{"id":2808,"depth":355,"text":3200},"Manual Style Binding (applyStyles: false)",{"id":3133,"depth":348,"text":3134},"Add reactive positioning styles to a floating node using Floating UI.","md",null,{},{"title":171,"description":3202},"QVAqVFLoF2WXsvjBSzRM1QAsnrgzo2DO1Lq3-bDTAps",[3209,3211],{"title":162,"path":163,"stem":164,"description":3210,"children":-1},"Create a unified composite floating node with shared refs, open state, and hierarchical coordination.",{"title":175,"path":176,"stem":177,"description":3212,"children":-1},"Connects an arrow element to a floating node and computes inset styles.",1791046165701]