[{"data":1,"prerenderedAt":1383},["ShallowReactive",2],{"navigation_docs":3,"-guide-components-build-dialogs-and-modals":271,"-guide-components-build-dialogs-and-modals-surround":1378},[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":66,"body":273,"description":1372,"extension":1373,"links":1374,"meta":1375,"navigation":479,"path":67,"seo":1376,"stem":68,"__hash__":1377},"docs\u002F1.guide\u002F3.components\u002F3.build-dialogs-and-modals.md",{"type":274,"value":275,"toc":1364},"minimark",[276,280,283,288,291,325,349,353,356,1124,1128,1162,1169,1213,1217,1223,1232,1328,1336,1340,1343,1347,1360],[277,278,279],"p",{},"Dialogs and modals are floating surfaces that carry stronger behavioral expectations than tooltips, popovers, or menus. Once a surface behaves like a dialog, users expect focus to be trapped intentionally, outside content to become inert, and dismissal to be explicit.",[277,281,282],{},"This guide shows a practical VFloat setup for dialog-like surfaces and explains when a popover should become a dialog.",[284,285,287],"h2",{"id":286},"what-makes-a-dialog-different","What makes a dialog different",[277,289,290],{},"A dialog usually needs:",[292,293,294,298,301,309,312,322],"ul",{},[295,296,297],"li",{},"Click or programmatic activation",[295,299,300],{},"Focus containment and trapping while open",[295,302,303,304,308],{},"Outside page isolation (",[305,306,307],"code",{},"inert",") so screen readers and Tab keys cannot reach background content",[295,310,311],{},"Safe focus return to the trigger element on close",[295,313,314,315,318,319],{},"Explicit semantics such as ",[305,316,317],{},"role=\"dialog\""," and ",[305,320,321],{},"aria-modal=\"true\"",[295,323,324],{},"Escape key and backdrop dismissal",[277,326,327,328,333,334,338,339,343,344,348],{},"In VFloat, the core dialog stack pairs ",[329,330,331],"a",{"href":163},[305,332,162],{}," with ",[329,335,336],{"href":202},[305,337,201],{},", ",[329,340,341],{"href":210},[305,342,209],{},", and ",[329,345,346],{"href":206},[305,347,205],{},".",[284,350,352],{"id":351},"the-complete-example","The complete example",[277,354,355],{},"Here is a full working modal dialog:",[357,358,363],"pre",{"className":359,"code":360,"language":361,"meta":362,"style":362},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\nimport { ref } from \"vue\";\nimport { useClick, useEscapeKey, useFloatingNode, useFocusTrap, useOutsideClick } from \"v-float\";\n\nconst anchorEl = ref\u003CHTMLElement | null>(null);\nconst floatingEl = ref\u003CHTMLElement | null>(null);\n\nconst node = useFloatingNode({ anchorEl, floatingEl });\n\nuseClick(node);\nuseEscapeKey(node);\nuseOutsideClick(node);\n\nuseFocusTrap(node, {\n  modal: true,\n});\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cbutton ref=\"anchorEl\" type=\"button\">Edit profile\u003C\u002Fbutton>\n\n  \u003CTeleport to=\"body\">\n    \u003Cdiv v-if=\"node.open.value\" class=\"dialog-backdrop\">\n      \u003Cdiv\n        ref=\"floatingEl\"\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-labelledby=\"dialog-title\"\n        tabindex=\"-1\"\n        class=\"dialog-panel\"\n      >\n        \u003Ch2 id=\"dialog-title\">Edit profile\u003C\u002Fh2>\n        \u003Cp>Update your display name and email address.\u003C\u002Fp>\n\n        \u003Cform @submit.prevent=\"node.open.value = false\">\n          \u003Cinput type=\"text\" placeholder=\"Your name\" \u002F>\n          \u003Cbutton type=\"submit\">Save\u003C\u002Fbutton>\n          \u003Cbutton type=\"button\" @click=\"node.open.value = false\">Cancel\u003C\u002Fbutton>\n        \u003C\u002Fform>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002FTeleport>\n\u003C\u002Ftemplate>\n","vue","",[305,364,365,400,430,474,481,521,551,556,587,592,602,611,620,625,638,654,663,673,678,688,730,735,757,792,801,817,832,847,862,877,892,898,927,945,950,972,1007,1036,1075,1085,1095,1105,1115],{"__ignoreMap":362},[366,367,370,374,378,382,385,388,391,395,397],"span",{"class":368,"line":369},"line",1,[366,371,373],{"class":372},"sMK4o","\u003C",[366,375,377],{"class":376},"swJcz","script",[366,379,381],{"class":380},"spNyl"," setup",[366,383,384],{"class":380}," lang",[366,386,387],{"class":372},"=",[366,389,390],{"class":372},"\"",[366,392,394],{"class":393},"sfazB","ts",[366,396,390],{"class":372},[366,398,399],{"class":372},">\n",[366,401,403,407,410,414,417,420,423,425,427],{"class":368,"line":402},2,[366,404,406],{"class":405},"s7zQu","import",[366,408,409],{"class":372}," {",[366,411,413],{"class":412},"sTEyZ"," ref",[366,415,416],{"class":372}," }",[366,418,419],{"class":405}," from",[366,421,422],{"class":372}," \"",[366,424,361],{"class":393},[366,426,390],{"class":372},[366,428,429],{"class":372},";\n",[366,431,433,435,437,440,443,446,448,451,453,456,458,461,463,465,467,470,472],{"class":368,"line":432},3,[366,434,406],{"class":405},[366,436,409],{"class":372},[366,438,439],{"class":412}," useClick",[366,441,442],{"class":372},",",[366,444,445],{"class":412}," useEscapeKey",[366,447,442],{"class":372},[366,449,450],{"class":412}," useFloatingNode",[366,452,442],{"class":372},[366,454,455],{"class":412}," useFocusTrap",[366,457,442],{"class":372},[366,459,460],{"class":412}," useOutsideClick",[366,462,416],{"class":372},[366,464,419],{"class":405},[366,466,422],{"class":372},[366,468,469],{"class":393},"v-float",[366,471,390],{"class":372},[366,473,429],{"class":372},[366,475,477],{"class":368,"line":476},4,[366,478,480],{"emptyLinePlaceholder":479},true,"\n",[366,482,484,487,490,492,495,497,501,504,507,510,513,516,519],{"class":368,"line":483},5,[366,485,486],{"class":380},"const",[366,488,489],{"class":412}," anchorEl ",[366,491,387],{"class":372},[366,493,413],{"class":494},"s2Zo4",[366,496,373],{"class":372},[366,498,500],{"class":499},"sBMFI","HTMLElement",[366,502,503],{"class":372}," |",[366,505,506],{"class":499}," null",[366,508,509],{"class":372},">",[366,511,512],{"class":412},"(",[366,514,515],{"class":372},"null",[366,517,518],{"class":412},")",[366,520,429],{"class":372},[366,522,524,526,529,531,533,535,537,539,541,543,545,547,549],{"class":368,"line":523},6,[366,525,486],{"class":380},[366,527,528],{"class":412}," floatingEl ",[366,530,387],{"class":372},[366,532,413],{"class":494},[366,534,373],{"class":372},[366,536,500],{"class":499},[366,538,503],{"class":372},[366,540,506],{"class":499},[366,542,509],{"class":372},[366,544,512],{"class":412},[366,546,515],{"class":372},[366,548,518],{"class":412},[366,550,429],{"class":372},[366,552,554],{"class":368,"line":553},7,[366,555,480],{"emptyLinePlaceholder":479},[366,557,559,561,564,566,568,570,573,576,578,580,583,585],{"class":368,"line":558},8,[366,560,486],{"class":380},[366,562,563],{"class":412}," node ",[366,565,387],{"class":372},[366,567,450],{"class":494},[366,569,512],{"class":412},[366,571,572],{"class":372},"{",[366,574,575],{"class":412}," anchorEl",[366,577,442],{"class":372},[366,579,528],{"class":412},[366,581,582],{"class":372},"}",[366,584,518],{"class":412},[366,586,429],{"class":372},[366,588,590],{"class":368,"line":589},9,[366,591,480],{"emptyLinePlaceholder":479},[366,593,595,597,600],{"class":368,"line":594},10,[366,596,189],{"class":494},[366,598,599],{"class":412},"(node)",[366,601,429],{"class":372},[366,603,605,607,609],{"class":368,"line":604},11,[366,606,209],{"class":494},[366,608,599],{"class":412},[366,610,429],{"class":372},[366,612,614,616,618],{"class":368,"line":613},12,[366,615,205],{"class":494},[366,617,599],{"class":412},[366,619,429],{"class":372},[366,621,623],{"class":368,"line":622},13,[366,624,480],{"emptyLinePlaceholder":479},[366,626,628,630,633,635],{"class":368,"line":627},14,[366,629,201],{"class":494},[366,631,632],{"class":412},"(node",[366,634,442],{"class":372},[366,636,637],{"class":372}," {\n",[366,639,641,644,647,651],{"class":368,"line":640},15,[366,642,643],{"class":376},"  modal",[366,645,646],{"class":372},":",[366,648,650],{"class":649},"sfNiH"," true",[366,652,653],{"class":372},",\n",[366,655,657,659,661],{"class":368,"line":656},16,[366,658,582],{"class":372},[366,660,518],{"class":412},[366,662,429],{"class":372},[366,664,666,669,671],{"class":368,"line":665},17,[366,667,668],{"class":372},"\u003C\u002F",[366,670,377],{"class":376},[366,672,399],{"class":372},[366,674,676],{"class":368,"line":675},18,[366,677,480],{"emptyLinePlaceholder":479},[366,679,681,683,686],{"class":368,"line":680},19,[366,682,373],{"class":372},[366,684,685],{"class":376},"template",[366,687,399],{"class":372},[366,689,691,694,697,699,701,703,706,708,711,713,715,717,719,721,724,726,728],{"class":368,"line":690},20,[366,692,693],{"class":372},"  \u003C",[366,695,696],{"class":376},"button",[366,698,413],{"class":380},[366,700,387],{"class":372},[366,702,390],{"class":372},[366,704,705],{"class":393},"anchorEl",[366,707,390],{"class":372},[366,709,710],{"class":380}," type",[366,712,387],{"class":372},[366,714,390],{"class":372},[366,716,696],{"class":393},[366,718,390],{"class":372},[366,720,509],{"class":372},[366,722,723],{"class":412},"Edit profile",[366,725,668],{"class":372},[366,727,696],{"class":376},[366,729,399],{"class":372},[366,731,733],{"class":368,"line":732},21,[366,734,480],{"emptyLinePlaceholder":479},[366,736,738,740,743,746,748,750,753,755],{"class":368,"line":737},22,[366,739,693],{"class":372},[366,741,742],{"class":376},"Teleport",[366,744,745],{"class":380}," to",[366,747,387],{"class":372},[366,749,390],{"class":372},[366,751,752],{"class":393},"body",[366,754,390],{"class":372},[366,756,399],{"class":372},[366,758,760,763,766,769,771,773,776,778,781,783,785,788,790],{"class":368,"line":759},23,[366,761,762],{"class":372},"    \u003C",[366,764,765],{"class":376},"div",[366,767,768],{"class":380}," v-if",[366,770,387],{"class":372},[366,772,390],{"class":372},[366,774,775],{"class":393},"node.open.value",[366,777,390],{"class":372},[366,779,780],{"class":380}," class",[366,782,387],{"class":372},[366,784,390],{"class":372},[366,786,787],{"class":393},"dialog-backdrop",[366,789,390],{"class":372},[366,791,399],{"class":372},[366,793,795,798],{"class":368,"line":794},24,[366,796,797],{"class":372},"      \u003C",[366,799,800],{"class":376},"div\n",[366,802,804,807,809,811,814],{"class":368,"line":803},25,[366,805,806],{"class":380},"        ref",[366,808,387],{"class":372},[366,810,390],{"class":372},[366,812,813],{"class":393},"floatingEl",[366,815,816],{"class":372},"\"\n",[366,818,820,823,825,827,830],{"class":368,"line":819},26,[366,821,822],{"class":380},"        role",[366,824,387],{"class":372},[366,826,390],{"class":372},[366,828,829],{"class":393},"dialog",[366,831,816],{"class":372},[366,833,835,838,840,842,845],{"class":368,"line":834},27,[366,836,837],{"class":380},"        aria-modal",[366,839,387],{"class":372},[366,841,390],{"class":372},[366,843,844],{"class":393},"true",[366,846,816],{"class":372},[366,848,850,853,855,857,860],{"class":368,"line":849},28,[366,851,852],{"class":380},"        aria-labelledby",[366,854,387],{"class":372},[366,856,390],{"class":372},[366,858,859],{"class":393},"dialog-title",[366,861,816],{"class":372},[366,863,865,868,870,872,875],{"class":368,"line":864},29,[366,866,867],{"class":380},"        tabindex",[366,869,387],{"class":372},[366,871,390],{"class":372},[366,873,874],{"class":393},"-1",[366,876,816],{"class":372},[366,878,880,883,885,887,890],{"class":368,"line":879},30,[366,881,882],{"class":380},"        class",[366,884,387],{"class":372},[366,886,390],{"class":372},[366,888,889],{"class":393},"dialog-panel",[366,891,816],{"class":372},[366,893,895],{"class":368,"line":894},31,[366,896,897],{"class":372},"      >\n",[366,899,901,904,906,909,911,913,915,917,919,921,923,925],{"class":368,"line":900},32,[366,902,903],{"class":372},"        \u003C",[366,905,284],{"class":376},[366,907,908],{"class":380}," id",[366,910,387],{"class":372},[366,912,390],{"class":372},[366,914,859],{"class":393},[366,916,390],{"class":372},[366,918,509],{"class":372},[366,920,723],{"class":412},[366,922,668],{"class":372},[366,924,284],{"class":376},[366,926,399],{"class":372},[366,928,930,932,934,936,939,941,943],{"class":368,"line":929},33,[366,931,903],{"class":372},[366,933,277],{"class":376},[366,935,509],{"class":372},[366,937,938],{"class":412},"Update your display name and email address.",[366,940,668],{"class":372},[366,942,277],{"class":376},[366,944,399],{"class":372},[366,946,948],{"class":368,"line":947},34,[366,949,480],{"emptyLinePlaceholder":479},[366,951,953,955,958,961,963,965,968,970],{"class":368,"line":952},35,[366,954,903],{"class":372},[366,956,957],{"class":376},"form",[366,959,960],{"class":380}," @submit.prevent",[366,962,387],{"class":372},[366,964,390],{"class":372},[366,966,967],{"class":393},"node.open.value = false",[366,969,390],{"class":372},[366,971,399],{"class":372},[366,973,975,978,981,983,985,987,990,992,995,997,999,1002,1004],{"class":368,"line":974},36,[366,976,977],{"class":372},"          \u003C",[366,979,980],{"class":376},"input",[366,982,710],{"class":380},[366,984,387],{"class":372},[366,986,390],{"class":372},[366,988,989],{"class":393},"text",[366,991,390],{"class":372},[366,993,994],{"class":380}," placeholder",[366,996,387],{"class":372},[366,998,390],{"class":372},[366,1000,1001],{"class":393},"Your name",[366,1003,390],{"class":372},[366,1005,1006],{"class":372}," \u002F>\n",[366,1008,1010,1012,1014,1016,1018,1020,1023,1025,1027,1030,1032,1034],{"class":368,"line":1009},37,[366,1011,977],{"class":372},[366,1013,696],{"class":376},[366,1015,710],{"class":380},[366,1017,387],{"class":372},[366,1019,390],{"class":372},[366,1021,1022],{"class":393},"submit",[366,1024,390],{"class":372},[366,1026,509],{"class":372},[366,1028,1029],{"class":412},"Save",[366,1031,668],{"class":372},[366,1033,696],{"class":376},[366,1035,399],{"class":372},[366,1037,1039,1041,1043,1045,1047,1049,1051,1053,1056,1058,1060,1062,1064,1066,1069,1071,1073],{"class":368,"line":1038},38,[366,1040,977],{"class":372},[366,1042,696],{"class":376},[366,1044,710],{"class":380},[366,1046,387],{"class":372},[366,1048,390],{"class":372},[366,1050,696],{"class":393},[366,1052,390],{"class":372},[366,1054,1055],{"class":380}," @click",[366,1057,387],{"class":372},[366,1059,390],{"class":372},[366,1061,967],{"class":393},[366,1063,390],{"class":372},[366,1065,509],{"class":372},[366,1067,1068],{"class":412},"Cancel",[366,1070,668],{"class":372},[366,1072,696],{"class":376},[366,1074,399],{"class":372},[366,1076,1078,1081,1083],{"class":368,"line":1077},39,[366,1079,1080],{"class":372},"        \u003C\u002F",[366,1082,957],{"class":376},[366,1084,399],{"class":372},[366,1086,1088,1091,1093],{"class":368,"line":1087},40,[366,1089,1090],{"class":372},"      \u003C\u002F",[366,1092,765],{"class":376},[366,1094,399],{"class":372},[366,1096,1098,1101,1103],{"class":368,"line":1097},41,[366,1099,1100],{"class":372},"    \u003C\u002F",[366,1102,765],{"class":376},[366,1104,399],{"class":372},[366,1106,1108,1111,1113],{"class":368,"line":1107},42,[366,1109,1110],{"class":372},"  \u003C\u002F",[366,1112,742],{"class":376},[366,1114,399],{"class":372},[366,1116,1118,1120,1122],{"class":368,"line":1117},43,[366,1119,668],{"class":372},[366,1121,685],{"class":376},[366,1123,399],{"class":372},[284,1125,1127],{"id":1126},"focus-trapping-and-page-isolation","Focus trapping and page isolation",[357,1129,1132],{"className":1130,"code":1131,"language":394,"meta":362,"style":362},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","useFocusTrap(node, {\n  modal: true,\n});\n",[305,1133,1134,1144,1154],{"__ignoreMap":362},[366,1135,1136,1138,1140,1142],{"class":368,"line":369},[366,1137,201],{"class":494},[366,1139,632],{"class":412},[366,1141,442],{"class":372},[366,1143,637],{"class":372},[366,1145,1146,1148,1150,1152],{"class":368,"line":402},[366,1147,643],{"class":376},[366,1149,646],{"class":372},[366,1151,650],{"class":649},[366,1153,653],{"class":372},[366,1155,1156,1158,1160],{"class":368,"line":432},[366,1157,582],{"class":372},[366,1159,518],{"class":412},[366,1161,429],{"class":372},[277,1163,1164,1168],{},[329,1165,1166],{"href":202},[305,1167,201],{}," orchestrates the entire focus lifecycle for the dialog:",[292,1170,1171,1181,1195,1204],{},[295,1172,1173,1177,1178,1180],{},[1174,1175,1176],"strong",{},"Initial focus."," Automatically focuses the first tabbable element inside ",[305,1179,813],{}," when the dialog opens.",[295,1182,1183,1186,1187,318,1191,1194],{},[1174,1184,1185],{},"Tab cycling."," Traps ",[1188,1189,1190],"kbd",{},"Tab",[1188,1192,1193],{},"Shift+Tab"," inside the dialog container so focus cannot escape into the browser chrome.",[295,1196,1197,1200,1201,1203],{},[1174,1198,1199],{},"Page isolation."," Applies ",[305,1202,307],{}," to outside page elements so assistive technology cannot interact with background content while the dialog is visible.",[295,1205,1206,1209,1210,1212],{},[1174,1207,1208],{},"Return focus."," Safely restores focus back to the trigger button (",[305,1211,705],{},") when the dialog closes.",[284,1214,1216],{"id":1215},"anchored-dialogs-vs-centered-modals","Anchored dialogs vs centered modals",[277,1218,1219,1220,1222],{},"Modal dialogs often center in the viewport using CSS Flexbox or Grid over a full-screen backdrop. In that case, you do not need ",[305,1221,171],{}," because the dialog does not anchor to a specific element.",[277,1224,1225,1226,1229,1230,646],{},"When building an ",[1174,1227,1228],{},"anchored dialog"," (such as a callout dialog, rich popover dialog, or contextual confirmation bubble next to a button), add ",[305,1231,171],{},[357,1233,1235],{"className":1130,"code":1234,"language":394,"meta":362,"style":362},"usePosition(node, {\n  placement: \"bottom-start\",\n  middlewares: {\n    offset: 8,\n    flip: true,\n    shift: { padding: 8 },\n  },\n});\n",[305,1236,1237,1247,1263,1272,1285,1296,1315,1320],{"__ignoreMap":362},[366,1238,1239,1241,1243,1245],{"class":368,"line":369},[366,1240,171],{"class":494},[366,1242,632],{"class":412},[366,1244,442],{"class":372},[366,1246,637],{"class":372},[366,1248,1249,1252,1254,1256,1259,1261],{"class":368,"line":402},[366,1250,1251],{"class":376},"  placement",[366,1253,646],{"class":372},[366,1255,422],{"class":372},[366,1257,1258],{"class":393},"bottom-start",[366,1260,390],{"class":372},[366,1262,653],{"class":372},[366,1264,1265,1268,1270],{"class":368,"line":432},[366,1266,1267],{"class":376},"  middlewares",[366,1269,646],{"class":372},[366,1271,637],{"class":372},[366,1273,1274,1277,1279,1283],{"class":368,"line":476},[366,1275,1276],{"class":376},"    offset",[366,1278,646],{"class":372},[366,1280,1282],{"class":1281},"sbssI"," 8",[366,1284,653],{"class":372},[366,1286,1287,1290,1292,1294],{"class":368,"line":483},[366,1288,1289],{"class":376},"    flip",[366,1291,646],{"class":372},[366,1293,650],{"class":649},[366,1295,653],{"class":372},[366,1297,1298,1301,1303,1305,1308,1310,1312],{"class":368,"line":523},[366,1299,1300],{"class":376},"    shift",[366,1302,646],{"class":372},[366,1304,409],{"class":372},[366,1306,1307],{"class":376}," padding",[366,1309,646],{"class":372},[366,1311,1282],{"class":1281},[366,1313,1314],{"class":372}," },\n",[366,1316,1317],{"class":368,"line":553},[366,1318,1319],{"class":372},"  },\n",[366,1321,1322,1324,1326],{"class":368,"line":558},[366,1323,582],{"class":372},[366,1325,518],{"class":412},[366,1327,429],{"class":372},[277,1329,1330,1332,1333,1335],{},[305,1331,171],{}," will automatically apply the calculated positioning coordinates to ",[305,1334,813],{},". VFloat allows you to mix and match focus trapping with or without JavaScript positioning based on your UI needs.",[284,1337,1339],{"id":1338},"when-a-popover-should-become-a-dialog","When a popover should become a dialog",[277,1341,1342],{},"If your surface captures user attention for a critical flow, contains multiple interactive form fields, or requires focus containment so keyboard navigation does not wander off the surface, you are building a dialog, not a popover.",[284,1344,1346],{"id":1345},"where-to-go-next","Where to go next",[292,1348,1349,1355],{},[295,1350,1351,1352,1354],{},"Read ",[329,1353,116],{"href":117}," to decide whether the component or an outside router\u002Fstore should own open state.",[295,1356,1351,1357,1359],{},[329,1358,102],{"href":103}," for the deeper mental model behind focus management.",[1361,1362,1363],"style",{},"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 .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 .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}",{"title":362,"searchDepth":402,"depth":402,"links":1365},[1366,1367,1368,1369,1370,1371],{"id":286,"depth":402,"text":287},{"id":351,"depth":402,"text":352},{"id":1126,"depth":402,"text":1127},{"id":1215,"depth":402,"text":1216},{"id":1338,"depth":402,"text":1339},{"id":1345,"depth":402,"text":1346},"Build dialogs and modals with focus trapping and dismissal behavior.","md",null,{},{"title":66,"description":1372},"neZzBQ_tS2Yu0LnPn-1KKLIyKlFTmpUxOk7nF7UQ6YY",[1379,1381],{"title":62,"path":63,"stem":64,"description":1380,"children":-1},"Compose popovers and dropdowns with click, focus, and dismissal patterns.",{"title":70,"path":71,"stem":72,"description":1382,"children":-1},"Build nested multi-level submenus with composite floating nodes, implicit DI, and safe cursor corridors.",1791046165701]