[{"data":1,"prerenderedAt":1897},["ShallowReactive",2],{"docs-nav-pkg":3,"docs-page-pkg-\u002Fpkg\u002Fdialog":133},[4,8,12,15,18,21,24,27,30,33,36,39,42,45,48,51,54,57,60,63,66,69,72,75,78,81,84,87,90,93,96,99,102,105,108,111,114,117,121,124,127,130],{"path":5,"title":6,"section":7},"\u002Fpkg","Overview","Start",{"path":9,"title":10,"section":11},"\u002Fpkg\u002Faccordion","Accordion","Components",{"path":13,"title":14,"section":11},"\u002Fpkg\u002Falert-dialog","Alert Dialog",{"path":16,"title":17,"section":11},"\u002Fpkg\u002Fautocomplete","Autocomplete",{"path":19,"title":20,"section":11},"\u002Fpkg\u002Favatar","Avatar",{"path":22,"title":23,"section":11},"\u002Fpkg\u002Fbutton","Button",{"path":25,"title":26,"section":11},"\u002Fpkg\u002Fcheckbox","Checkbox",{"path":28,"title":29,"section":11},"\u002Fpkg\u002Fcheckbox-group","Checkbox Group",{"path":31,"title":32,"section":11},"\u002Fpkg\u002Fcollapsible","Collapsible",{"path":34,"title":35,"section":11},"\u002Fpkg\u002Fcombobox","Combobox",{"path":37,"title":38,"section":11},"\u002Fpkg\u002Fcontext-menu","Context Menu",{"path":40,"title":41,"section":11},"\u002Fpkg\u002Fdialog","Dialog",{"path":43,"title":44,"section":11},"\u002Fpkg\u002Fdrawer","Drawer",{"path":46,"title":47,"section":11},"\u002Fpkg\u002Ffield","Field",{"path":49,"title":50,"section":11},"\u002Fpkg\u002Ffieldset","Fieldset",{"path":52,"title":53,"section":11},"\u002Fpkg\u002Fform","Form",{"path":55,"title":56,"section":11},"\u002Fpkg\u002Ficon-picker","Icon picker",{"path":58,"title":59,"section":11},"\u002Fpkg\u002Finput","Input",{"path":61,"title":62,"section":11},"\u002Fpkg\u002Fmenu","Menu",{"path":64,"title":65,"section":11},"\u002Fpkg\u002Fmenubar","Menubar",{"path":67,"title":68,"section":11},"\u002Fpkg\u002Fmeter","Meter",{"path":70,"title":71,"section":11},"\u002Fpkg\u002Fnavigation-menu","Navigation Menu",{"path":73,"title":74,"section":11},"\u002Fpkg\u002Fnumber-field","Number Field",{"path":76,"title":77,"section":11},"\u002Fpkg\u002Fotp-field","OTP Field",{"path":79,"title":80,"section":11},"\u002Fpkg\u002Fplot","Plot",{"path":82,"title":83,"section":11},"\u002Fpkg\u002Fpopover","Popover",{"path":85,"title":86,"section":11},"\u002Fpkg\u002Fpreview-card","Preview Card",{"path":88,"title":89,"section":11},"\u002Fpkg\u002Fprogress","Progress",{"path":91,"title":92,"section":11},"\u002Fpkg\u002Fradio-group","Radio Group",{"path":94,"title":95,"section":11},"\u002Fpkg\u002Fscroll-area","Scroll Area",{"path":97,"title":98,"section":11},"\u002Fpkg\u002Fselect","Select",{"path":100,"title":101,"section":11},"\u002Fpkg\u002Fseparator","Separator",{"path":103,"title":104,"section":11},"\u002Fpkg\u002Fsidebar","Sidebar",{"path":106,"title":107,"section":11},"\u002Fpkg\u002Fslider","Slider",{"path":109,"title":110,"section":11},"\u002Fpkg\u002Fswitch","Switch",{"path":112,"title":113,"section":11},"\u002Fpkg\u002Ftabs","Tabs",{"path":115,"title":116,"section":11},"\u002Fpkg\u002Ftoast","Toast",{"path":118,"title":119,"section":120},"\u002Fpkg\u002Fapi","Api","Runtime",{"path":122,"title":123,"section":120},"\u002Fpkg\u002Fauth","Auth",{"path":125,"title":126,"section":120},"\u002Fpkg\u002Fblob","Blob",{"path":128,"title":129,"section":120},"\u002Fpkg\u002Fchannels","Channels",{"path":131,"title":132,"section":120},"\u002Fpkg\u002Fdb","Db",{"id":134,"title":41,"body":135,"description":1891,"extension":1892,"meta":1893,"navigation":399,"path":40,"section":11,"seo":1894,"stem":1895,"__hash__":1896},"pkg\u002Fpkg\u002Fdialog.md",{"type":136,"value":137,"toc":1862},"minimark",[138,142,145,150,161,165,267,271,276,279,333,344,542,552,554,558,565,568,572,587,590,594,597,600,604,624,627,631,638,641,645,648,651,655,669,672,676,686,822,825,829,836,884,887,891,916,919,923,927,933,1054,1083,1087,1093,1178,1209,1213,1223,1285,1289,1303,1334,1379,1383,1386,1448,1452,1467,1522,1582,1605,1609,1615,1646,1649,1655,1659,1669,1701,1722,1726,1735,1799,1858],[139,140,141],"p",{},"A popup that opens on top of the entire page. Unlike Alert Dialog, it closes on backdrop click. The trigger and close match Button. The popup has no stroke. The title is Light and the description is Regular.",[143,144],"base-dialog-demo",{},[146,147,149],"h2",{"id":148},"usage-guidelines","Usage guidelines",[151,152,153],"ul",{},[154,155,156,160],"li",{},[157,158,159],"strong",{},"Dialog doesn’t support gestures."," Use Drawer when you need gesture support or snap points. A panel that slides in from the edge of the screen and doesn’t need gesture support is a positioned Dialog.",[146,162,164],{"id":163},"anatomy","Anatomy",[166,167,172],"pre",{"className":168,"code":169,"language":170,"meta":171,"style":171},"language-vue shiki shiki-themes github-light github-dark","\u003CUiDialogRoot>\n  \u003CUiDialogTrigger \u002F>\n  \u003CUiDialogPortal>\n    \u003CUiDialogBackdrop \u002F>\n    \u003CUiDialogViewport>\n      \u003CUiDialogPopup>\n        \u003CUiDialogTitle \u002F>\n        \u003CUiDialogDescription \u002F>\n        \u003CUiDialogClose \u002F>\n      \u003C\u002FUiDialogPopup>\n    \u003C\u002FUiDialogViewport>\n  \u003C\u002FUiDialogPortal>\n\u003C\u002FUiDialogRoot>\n","vue","",[173,174,175,191,197,203,209,215,221,227,233,239,245,251,257],"code",{"__ignoreMap":171},[176,177,180,184,188],"span",{"class":178,"line":179},"line",1,[176,181,183],{"class":182},"sVt8B","\u003C",[176,185,187],{"class":186},"s9eBZ","UiDialogRoot",[176,189,190],{"class":182},">\n",[176,192,194],{"class":178,"line":193},2,[176,195,196],{"class":182},"  \u003CUiDialogTrigger \u002F>\n",[176,198,200],{"class":178,"line":199},3,[176,201,202],{"class":182},"  \u003CUiDialogPortal>\n",[176,204,206],{"class":178,"line":205},4,[176,207,208],{"class":182},"    \u003CUiDialogBackdrop \u002F>\n",[176,210,212],{"class":178,"line":211},5,[176,213,214],{"class":182},"    \u003CUiDialogViewport>\n",[176,216,218],{"class":178,"line":217},6,[176,219,220],{"class":182},"      \u003CUiDialogPopup>\n",[176,222,224],{"class":178,"line":223},7,[176,225,226],{"class":182},"        \u003CUiDialogTitle \u002F>\n",[176,228,230],{"class":178,"line":229},8,[176,231,232],{"class":182},"        \u003CUiDialogDescription \u002F>\n",[176,234,236],{"class":178,"line":235},9,[176,237,238],{"class":182},"        \u003CUiDialogClose \u002F>\n",[176,240,242],{"class":178,"line":241},10,[176,243,244],{"class":182},"      \u003C\u002FUiDialogPopup>\n",[176,246,248],{"class":178,"line":247},11,[176,249,250],{"class":182},"    \u003C\u002FUiDialogViewport>\n",[176,252,254],{"class":178,"line":253},12,[176,255,256],{"class":182},"  \u003C\u002FUiDialogPortal>\n",[176,258,260,263,265],{"class":178,"line":259},13,[176,261,262],{"class":182},"\u003C\u002F",[176,264,187],{"class":186},[176,266,190],{"class":182},[146,268,270],{"id":269},"examples","Examples",[272,273,275],"h3",{"id":274},"state","State",[139,277,278],{},"By default, Dialog is an uncontrolled component that manages its own state.",[166,280,282],{"className":168,"code":281,"language":170,"meta":171,"style":171},"\u003CUiDialogRoot>\n  \u003CUiDialogTrigger>Open\u003C\u002FUiDialogTrigger>\n  \u003CUiDialogPortal>\n    \u003CUiDialogPopup>\n      \u003CUiDialogTitle>Example dialog\u003C\u002FUiDialogTitle>\n      \u003CUiDialogClose>Close\u003C\u002FUiDialogClose>\n    \u003C\u002FUiDialogPopup>\n  \u003C\u002FUiDialogPortal>\n\u003C\u002FUiDialogRoot>\n",[173,283,284,292,297,301,306,311,316,321,325],{"__ignoreMap":171},[176,285,286,288,290],{"class":178,"line":179},[176,287,183],{"class":182},[176,289,187],{"class":186},[176,291,190],{"class":182},[176,293,294],{"class":178,"line":193},[176,295,296],{"class":182},"  \u003CUiDialogTrigger>Open\u003C\u002FUiDialogTrigger>\n",[176,298,299],{"class":178,"line":199},[176,300,202],{"class":182},[176,302,303],{"class":178,"line":205},[176,304,305],{"class":182},"    \u003CUiDialogPopup>\n",[176,307,308],{"class":178,"line":211},[176,309,310],{"class":182},"      \u003CUiDialogTitle>Example dialog\u003C\u002FUiDialogTitle>\n",[176,312,313],{"class":178,"line":217},[176,314,315],{"class":182},"      \u003CUiDialogClose>Close\u003C\u002FUiDialogClose>\n",[176,317,318],{"class":178,"line":223},[176,319,320],{"class":182},"    \u003C\u002FUiDialogPopup>\n",[176,322,323],{"class":178,"line":229},[176,324,256],{"class":182},[176,326,327,329,331],{"class":178,"line":235},[176,328,262],{"class":182},[176,330,187],{"class":186},[176,332,190],{"class":182},[139,334,335,336,339,340,343],{},"Use ",[173,337,338],{},"open"," \u002F ",[173,341,342],{},"v-model:open"," if you need to access or control the state. For example, close it after a form submits, or open it from another place in the app.",[166,345,347],{"className":168,"code":346,"language":170,"meta":171,"style":171},"\u003Cscript setup>\nconst open = ref(false)\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CUiDialogRoot v-model:open=\"open\">\n    \u003CUiDialogTrigger>Open\u003C\u002FUiDialogTrigger>\n    \u003CUiDialogPortal>\n      \u003CUiDialogPopup>\n        \u003Cform @submit.prevent=\"open = false\">\n          …\n        \u003C\u002Fform>\n      \u003C\u002FUiDialogPopup>\n    \u003C\u002FUiDialogPortal>\n  \u003C\u002FUiDialogRoot>\n\u003C\u002Ftemplate>\n",[173,348,349,362,387,395,401,410,438,453,462,472,490,495,504,513,523,533],{"__ignoreMap":171},[176,350,351,353,356,360],{"class":178,"line":179},[176,352,183],{"class":182},[176,354,355],{"class":186},"script",[176,357,359],{"class":358},"sScJk"," setup",[176,361,190],{"class":182},[176,363,364,368,372,375,378,381,384],{"class":178,"line":193},[176,365,367],{"class":366},"szBVR","const",[176,369,371],{"class":370},"sj4cs"," open",[176,373,374],{"class":366}," =",[176,376,377],{"class":358}," ref",[176,379,380],{"class":182},"(",[176,382,383],{"class":370},"false",[176,385,386],{"class":182},")\n",[176,388,389,391,393],{"class":178,"line":199},[176,390,262],{"class":182},[176,392,355],{"class":186},[176,394,190],{"class":182},[176,396,397],{"class":178,"line":205},[176,398,400],{"emptyLinePlaceholder":399},true,"\n",[176,402,403,405,408],{"class":178,"line":211},[176,404,183],{"class":182},[176,406,407],{"class":186},"template",[176,409,190],{"class":182},[176,411,412,415,417,420,423,425,428,432,434,436],{"class":178,"line":217},[176,413,414],{"class":182},"  \u003C",[176,416,187],{"class":186},[176,418,419],{"class":358}," v-model",[176,421,422],{"class":182},":",[176,424,338],{"class":358},[176,426,427],{"class":182},"=",[176,429,431],{"class":430},"sZZnC","\"",[176,433,338],{"class":182},[176,435,431],{"class":430},[176,437,190],{"class":182},[176,439,440,443,446,449,451],{"class":178,"line":223},[176,441,442],{"class":182},"    \u003C",[176,444,445],{"class":186},"UiDialogTrigger",[176,447,448],{"class":182},">Open\u003C\u002F",[176,450,445],{"class":186},[176,452,190],{"class":182},[176,454,455,457,460],{"class":178,"line":229},[176,456,442],{"class":182},[176,458,459],{"class":186},"UiDialogPortal",[176,461,190],{"class":182},[176,463,464,467,470],{"class":178,"line":235},[176,465,466],{"class":182},"      \u003C",[176,468,469],{"class":186},"UiDialogPopup",[176,471,190],{"class":182},[176,473,474,477,480,483,485,488],{"class":178,"line":241},[176,475,476],{"class":182},"        \u003C",[176,478,479],{"class":186},"form",[176,481,482],{"class":358}," @submit.prevent",[176,484,427],{"class":182},[176,486,487],{"class":430},"\"open = false\"",[176,489,190],{"class":182},[176,491,492],{"class":178,"line":247},[176,493,494],{"class":182},"          …\n",[176,496,497,500,502],{"class":178,"line":253},[176,498,499],{"class":182},"        \u003C\u002F",[176,501,479],{"class":186},[176,503,190],{"class":182},[176,505,506,509,511],{"class":178,"line":259},[176,507,508],{"class":182},"      \u003C\u002F",[176,510,469],{"class":186},[176,512,190],{"class":182},[176,514,516,519,521],{"class":178,"line":515},14,[176,517,518],{"class":182},"    \u003C\u002F",[176,520,459],{"class":186},[176,522,190],{"class":182},[176,524,526,529,531],{"class":178,"line":525},15,[176,527,528],{"class":182},"  \u003C\u002F",[176,530,187],{"class":186},[176,532,190],{"class":182},[176,534,536,538,540],{"class":178,"line":535},16,[176,537,262],{"class":182},[176,539,407],{"class":186},[176,541,190],{"class":182},[139,543,544,545,548,549,551],{},"It’s also common to handle ",[173,546,547],{},"@update:open"," when the app needs to do something as the dialog opens or closes. Prefer that over watching ",[173,550,338],{}," in an effect.",[143,553],{"variant":274},[272,555,557],{"id":556},"open-from-a-menu","Open from a menu",[139,559,560,561,564],{},"Control the dialog and open it from a menu item ",[173,562,563],{},"click",". The menu closes first; the dialog stays until Close, Escape, or a backdrop click.",[143,566],{"variant":567},"menu",[272,569,571],{"id":570},"nested-dialogs","Nested dialogs",[139,573,574,575,578,579,582,583,586],{},"You can nest dialogs within one another. Use ",[173,576,577],{},"[data-nested-dialog-open]"," and ",[173,580,581],{},"var(--nested-dialogs)"," to style the parent. Child backdrops are not rendered, so the parent stays visible behind the one on top. The parent popup scales with ",[173,584,585],{},"calc(1 - 0.1 * var(--nested-dialogs))",".",[143,588],{"variant":589},"nested",[272,591,593],{"id":592},"close-confirmation","Close confirmation",[139,595,596],{},"Nest an Alert Dialog inside a controlled Dialog. If the parent would close while the textarea has text, keep the dialog open and show the alert instead. Shown on backdrop click, Escape, or Close.",[143,598],{"variant":599},"confirm",[272,601,603],{"id":602},"custom-focus-management","Custom focus management",[139,605,606,607,578,610,613,614,616,617,619,620,623],{},"Control where focus goes when the dialog opens and closes with ",[173,608,609],{},"initialFocus",[173,611,612],{},"finalFocus"," on ",[173,615,469],{},". Set either to ",[173,618,383],{}," to skip moving focus. Here the Feedback field is focused on open, and ",[157,621,622],{},"Final focus"," is focused on close.",[143,625],{"variant":626},"focus",[272,628,630],{"id":629},"outside-scroll-dialog","Outside scroll dialog",[139,632,633,634,637],{},"Make the dialog scrollable by using ",[173,635,636],{},"UiDialogViewport"," as an outer scroll container. The popup can extend past the bottom edge. The scrollable area uses Scroll Area for a custom scrollbar.",[143,639],{"variant":640},"outsideScroll",[272,642,644],{"id":643},"inside-scroll-dialog","Inside scroll dialog",[139,646,647],{},"Keep the popup fully on screen and scroll an inner container. Viewport positions the popup; Scroll Area scrolls the body.",[143,649],{"variant":650},"insideScroll",[272,652,654],{"id":653},"placing-elements-outside-the-popup","Placing elements outside the popup",[139,656,657,658,660,661,664,665,668],{},"Keep outside chrome (the close control) inside ",[173,659,469],{}," so it stays in the tab order and is announced correctly. Style an inner child as the colored surface. Set the popup to ",[173,662,663],{},"pointer-events: none"," and the inner surface \u002F close button to ",[173,666,667],{},"pointer-events: auto"," so backdrop clicks still register.",[143,670],{"variant":671},"outside",[272,673,675],{"id":674},"detached-triggers","Detached triggers",[139,677,678,679,681,682,685],{},"For a one-off, put ",[173,680,445],{}," inside Root. When that is impractical, create a handle with ",[173,683,684],{},"createDialogHandle()"," and pass it to both the trigger and the root.",[166,687,689],{"className":168,"code":688,"language":170,"meta":171,"style":171},"\u003Cscript setup>\nimport { createDialogHandle } from '~\u002Flib\u002Fui\u002Fdialog'\n\nconst demoDialog = createDialogHandle()\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CUiDialogTrigger :handle=\"demoDialog\">Open\u003C\u002FUiDialogTrigger>\n  \u003CUiDialogRoot :handle=\"demoDialog\">\n    …\n  \u003C\u002FUiDialogRoot>\n\u003C\u002Ftemplate>\n",[173,690,691,701,715,719,734,742,746,754,781,801,806,814],{"__ignoreMap":171},[176,692,693,695,697,699],{"class":178,"line":179},[176,694,183],{"class":182},[176,696,355],{"class":186},[176,698,359],{"class":358},[176,700,190],{"class":182},[176,702,703,706,709,712],{"class":178,"line":193},[176,704,705],{"class":366},"import",[176,707,708],{"class":182}," { createDialogHandle } ",[176,710,711],{"class":366},"from",[176,713,714],{"class":430}," '~\u002Flib\u002Fui\u002Fdialog'\n",[176,716,717],{"class":178,"line":199},[176,718,400],{"emptyLinePlaceholder":399},[176,720,721,723,726,728,731],{"class":178,"line":205},[176,722,367],{"class":366},[176,724,725],{"class":370}," demoDialog",[176,727,374],{"class":366},[176,729,730],{"class":358}," createDialogHandle",[176,732,733],{"class":182},"()\n",[176,735,736,738,740],{"class":178,"line":211},[176,737,262],{"class":182},[176,739,355],{"class":186},[176,741,190],{"class":182},[176,743,744],{"class":178,"line":217},[176,745,400],{"emptyLinePlaceholder":399},[176,747,748,750,752],{"class":178,"line":223},[176,749,183],{"class":182},[176,751,407],{"class":186},[176,753,190],{"class":182},[176,755,756,758,760,763,766,768,770,773,775,777,779],{"class":178,"line":229},[176,757,414],{"class":182},[176,759,445],{"class":186},[176,761,762],{"class":182}," :",[176,764,765],{"class":358},"handle",[176,767,427],{"class":182},[176,769,431],{"class":430},[176,771,772],{"class":182},"demoDialog",[176,774,431],{"class":430},[176,776,448],{"class":182},[176,778,445],{"class":186},[176,780,190],{"class":182},[176,782,783,785,787,789,791,793,795,797,799],{"class":178,"line":235},[176,784,414],{"class":182},[176,786,187],{"class":186},[176,788,762],{"class":182},[176,790,765],{"class":358},[176,792,427],{"class":182},[176,794,431],{"class":430},[176,796,772],{"class":182},[176,798,431],{"class":430},[176,800,190],{"class":182},[176,802,803],{"class":178,"line":241},[176,804,805],{"class":182},"    …\n",[176,807,808,810,812],{"class":178,"line":247},[176,809,528],{"class":182},[176,811,187],{"class":186},[176,813,190],{"class":182},[176,815,816,818,820],{"class":178,"line":253},[176,817,262],{"class":182},[176,819,407],{"class":186},[176,821,190],{"class":182},[143,823],{"variant":824},"detached",[272,826,828],{"id":827},"multiple-triggers","Multiple triggers",[139,830,831,832,835],{},"One dialog can be opened by several triggers. Place multiple triggers inside Root, or give detached triggers the same handle. Pass ",[173,833,834],{},"payload"," on the trigger and read it from Root’s default slot.",[166,837,839],{"className":168,"code":838,"language":170,"meta":171,"style":171},"\u003CUiDialogRoot v-slot=\"{ payload }\">\n  \u003CUiDialogTrigger :payload=\"{ text: 'Trigger 1' }\">Trigger 1\u003C\u002FUiDialogTrigger>\n  \u003CUiDialogTrigger :payload=\"{ text: 'Trigger 2' }\">Trigger 2\u003C\u002FUiDialogTrigger>\n  …\n\u003C\u002FUiDialogRoot>\n",[173,840,841,861,866,871,876],{"__ignoreMap":171},[176,842,843,845,847,850,852,854,857,859],{"class":178,"line":179},[176,844,183],{"class":182},[176,846,187],{"class":186},[176,848,849],{"class":358}," v-slot",[176,851,427],{"class":182},[176,853,431],{"class":430},[176,855,856],{"class":182},"{ payload }",[176,858,431],{"class":430},[176,860,190],{"class":182},[176,862,863],{"class":178,"line":193},[176,864,865],{"class":182},"  \u003CUiDialogTrigger :payload=\"{ text: 'Trigger 1' }\">Trigger 1\u003C\u002FUiDialogTrigger>\n",[176,867,868],{"class":178,"line":199},[176,869,870],{"class":182},"  \u003CUiDialogTrigger :payload=\"{ text: 'Trigger 2' }\">Trigger 2\u003C\u002FUiDialogTrigger>\n",[176,872,873],{"class":178,"line":205},[176,874,875],{"class":182},"  …\n",[176,877,878,880,882],{"class":178,"line":211},[176,879,262],{"class":182},[176,881,187],{"class":186},[176,883,190],{"class":182},[143,885],{"variant":886},"multiple",[272,888,890],{"id":889},"controlled-mode-with-multiple-triggers","Controlled mode with multiple triggers",[139,892,335,893,895,896,339,898,900,901,904,905,908,909,912,913,586],{},[173,894,342],{}," (or ",[173,897,338],{},[173,899,547],{},") with a handle. Set ",[173,902,903],{},"id"," on each trigger and ",[173,906,907],{},"triggerId"," on Root so the matching trigger receives ",[173,910,911],{},"data-popup-open",". Opening from a plain button calls ",[173,914,915],{},"handle.show(payload, id)",[143,917],{"variant":918},"controlled",[146,920,922],{"id":921},"api-reference","API reference",[272,924,926],{"id":925},"root","Root",[139,928,929,930,586],{},"Groups all parts of the dialog. Renders nothing of its own. Default slot receives ",[173,931,932],{},"{ payload, triggerId }",[934,935,936,955],"table",{},[937,938,939],"thead",{},[940,941,942,946,949,952],"tr",{},[943,944,945],"th",{},"Prop",[943,947,948],{},"Type",[943,950,951],{},"Default",[943,953,954],{},"Description",[956,957,958,983,1002,1020,1036],"tbody",{},[940,959,960,966,971,975],{},[961,962,963],"td",{},[173,964,965],{},"defaultOpen",[961,967,968],{},[173,969,970],{},"boolean",[961,972,973],{},[173,974,383],{},[961,976,977,978,339,980,982],{},"Uncontrolled initial open. Use ",[173,979,338],{},[173,981,342],{}," for a controlled dialog.",[940,984,985,989,993,996],{},[961,986,987],{},[173,988,338],{},[961,990,991],{},[173,992,970],{},[961,994,995],{},"—",[961,997,998,999,1001],{},"Controlled open state (",[173,1000,342],{},").",[940,1003,1004,1008,1013,1015],{},[961,1005,1006],{},[173,1007,765],{},[961,1009,1010],{},[173,1011,1012],{},"BaseDialogHandle",[961,1014,995],{},[961,1016,1017,1018,586],{},"Links detached triggers. Create with ",[173,1019,684],{},[940,1021,1022,1026,1031,1033],{},[961,1023,1024],{},[173,1025,907],{},[961,1027,1028],{},[173,1029,1030],{},"string | null",[961,1032,995],{},[961,1034,1035],{},"Active trigger id in controlled mode.",[940,1037,1038,1043,1047,1051],{},[961,1039,1040],{},[173,1041,1042],{},"disablePointerDismissal",[961,1044,1045],{},[173,1046,970],{},[961,1048,1049],{},[173,1050,383],{},[961,1052,1053],{},"Do not close on backdrop (outside) press. Escape and Close still work.",[934,1055,1056,1067],{},[937,1057,1058],{},[940,1059,1060,1063,1065],{},[943,1061,1062],{},"Event",[943,1064,948],{},[943,1066,954],{},[956,1068,1069],{},[940,1070,1071,1075,1080],{},[961,1072,1073],{},[173,1074,547],{},[961,1076,1077],{},[173,1078,1079],{},"(open: boolean) => void",[961,1081,1082],{},"Emitted when the dialog opens or closes.",[272,1084,1086],{"id":1085},"trigger","Trigger",[139,1088,1089,1090,586],{},"Button that opens the dialog. Renders a ",[173,1091,1092],{},"\u003Cbutton>",[934,1094,1095,1107],{},[937,1096,1097],{},[940,1098,1099,1101,1103,1105],{},[943,1100,945],{},[943,1102,948],{},[943,1104,951],{},[943,1106,954],{},[956,1108,1109,1128,1143,1159],{},[940,1110,1111,1116,1120,1122],{},[961,1112,1113],{},[173,1114,1115],{},"disabled",[961,1117,1118],{},[173,1119,970],{},[961,1121,995],{},[961,1123,1124,1125,586],{},"Ignore presses. Sets ",[173,1126,1127],{},"data-disabled",[940,1129,1130,1134,1138,1140],{},[961,1131,1132],{},[173,1133,765],{},[961,1135,1136],{},[173,1137,1012],{},[961,1139,995],{},[961,1141,1142],{},"Detached handle. Required when the trigger is outside Root.",[940,1144,1145,1149,1154,1156],{},[961,1146,1147],{},[173,1148,834],{},[961,1150,1151],{},[173,1152,1153],{},"unknown",[961,1155,995],{},[961,1157,1158],{},"Value exposed on Root’s slot when this trigger opens the dialog.",[940,1160,1161,1165,1170,1173],{},[961,1162,1163],{},[173,1164,903],{},[961,1166,1167],{},[173,1168,1169],{},"string",[961,1171,1172],{},"generated",[961,1174,1175,1176,586],{},"Trigger id. Used with Root ",[173,1177,907],{},[934,1179,1180,1189],{},[937,1181,1182],{},[940,1183,1184,1187],{},[943,1185,1186],{},"Attribute",[943,1188,954],{},[956,1190,1191,1200],{},[940,1192,1193,1197],{},[961,1194,1195],{},[173,1196,911],{},[961,1198,1199],{},"Present when this trigger’s dialog is open.",[940,1201,1202,1206],{},[961,1203,1204],{},[173,1205,1127],{},[961,1207,1208],{},"Present when the trigger is disabled.",[272,1210,1212],{"id":1211},"portal","Portal",[139,1214,1215,1216,1219,1220,1001],{},"Teleports to ",[173,1217,1218],{},"body"," while the overlay is present (",[173,1221,1222],{},"useCssPresence",[934,1224,1225,1233],{},[937,1226,1227],{},[940,1228,1229,1231],{},[943,1230,1186],{},[943,1232,954],{},[956,1234,1235,1245,1255,1265,1275],{},[940,1236,1237,1242],{},[961,1238,1239],{},[173,1240,1241],{},"data-open",[961,1243,1244],{},"Present when the dialog is open.",[940,1246,1247,1252],{},[961,1248,1249],{},[173,1250,1251],{},"data-closed",[961,1253,1254],{},"Present while present but not open (exit transition).",[940,1256,1257,1262],{},[961,1258,1259],{},[173,1260,1261],{},"data-nested",[961,1263,1264],{},"Present when nested in another overlay.",[940,1266,1267,1272],{},[961,1268,1269],{},[173,1270,1271],{},"data-starting-style",[961,1273,1274],{},"Present while animating in.",[940,1276,1277,1282],{},[961,1278,1279],{},[173,1280,1281],{},"data-ending-style",[961,1283,1284],{},"Present while animating out.",[272,1286,1288],{"id":1287},"backdrop","Backdrop",[139,1290,1291,1292,1294,1295,1298,1299,1302],{},"Covers the viewport. Click dismisses unless Root ",[173,1293,1042],{}," is set. Nested dialogs skip rendering the child backdrop unless ",[173,1296,1297],{},"forceRender"," is set. Uses ",[173,1300,1301],{},"position: absolute"," inside the fixed portal.",[934,1304,1305,1317],{},[937,1306,1307],{},[940,1308,1309,1311,1313,1315],{},[943,1310,945],{},[943,1312,948],{},[943,1314,951],{},[943,1316,954],{},[956,1318,1319],{},[940,1320,1321,1325,1329,1331],{},[961,1322,1323],{},[173,1324,1297],{},[961,1326,1327],{},[173,1328,970],{},[961,1330,995],{},[961,1332,1333],{},"Render even when nested.",[934,1335,1336,1344],{},[937,1337,1338],{},[940,1339,1340,1342],{},[943,1341,1186],{},[943,1343,954],{},[956,1345,1346,1354,1363,1371],{},[940,1347,1348,1352],{},[961,1349,1350],{},[173,1351,1241],{},[961,1353,1244],{},[940,1355,1356,1360],{},[961,1357,1358],{},[173,1359,1251],{},[961,1361,1362],{},"Present when the dialog is closed.",[940,1364,1365,1369],{},[961,1366,1367],{},[173,1368,1271],{},[961,1370,1274],{},[940,1372,1373,1377],{},[961,1374,1375],{},[173,1376,1281],{},[961,1378,1284],{},[272,1380,1382],{"id":1381},"viewport","Viewport",[139,1384,1385],{},"A positioning container for the popup. Can be made scrollable (see Outside scroll). Centers the popup by default.",[934,1387,1388,1396],{},[937,1389,1390],{},[940,1391,1392,1394],{},[943,1393,1186],{},[943,1395,954],{},[956,1397,1398,1406,1414,1422,1432,1440],{},[940,1399,1400,1404],{},[961,1401,1402],{},[173,1403,1241],{},[961,1405,1244],{},[940,1407,1408,1412],{},[961,1409,1410],{},[173,1411,1251],{},[961,1413,1362],{},[940,1415,1416,1420],{},[961,1417,1418],{},[173,1419,1261],{},[961,1421,1264],{},[940,1423,1424,1429],{},[961,1425,1426],{},[173,1427,1428],{},"data-nested-dialog-open",[961,1430,1431],{},"Present when a nested dialog is open.",[940,1433,1434,1438],{},[961,1435,1436],{},[173,1437,1271],{},[961,1439,1274],{},[940,1441,1442,1446],{},[961,1443,1444],{},[173,1445,1281],{},[961,1447,1284],{},[272,1449,1451],{"id":1450},"popup","Popup",[139,1453,1454,1457,1458,339,1460,1462,1463,1466],{},[173,1455,1456],{},"role=\"dialog\"",". Escape closes. Focus stays inside until close. Enter and leave use ",[173,1459,1271],{},[173,1461,1281],{}," (scale ",[173,1464,1465],{},"0.98",", 100ms). No animation library. No drop-shadow.",[934,1468,1469,1481],{},[937,1470,1471],{},[940,1472,1473,1475,1477,1479],{},[943,1474,945],{},[943,1476,948],{},[943,1478,951],{},[943,1480,954],{},[956,1482,1483,1503],{},[940,1484,1485,1489,1494,1497],{},[961,1486,1487],{},[173,1488,609],{},[961,1490,1491],{},[173,1492,1493],{},"HTMLElement | false | null",[961,1495,1496],{},"first tabbable",[961,1498,1499,1500,1502],{},"Element to focus on open. ",[173,1501,383],{}," skips moving focus.",[940,1504,1505,1509,1513,1516],{},[961,1506,1507],{},[173,1508,612],{},[961,1510,1511],{},[173,1512,1493],{},[961,1514,1515],{},"previous element",[961,1517,1518,1519,1521],{},"Element to focus on close. ",[173,1520,383],{}," skips restoring focus.",[934,1523,1524,1532],{},[937,1525,1526],{},[940,1527,1528,1530],{},[943,1529,1186],{},[943,1531,954],{},[956,1533,1534,1542,1550,1558,1566,1574],{},[940,1535,1536,1540],{},[961,1537,1538],{},[173,1539,1241],{},[961,1541,1244],{},[940,1543,1544,1548],{},[961,1545,1546],{},[173,1547,1251],{},[961,1549,1362],{},[940,1551,1552,1556],{},[961,1553,1554],{},[173,1555,1261],{},[961,1557,1264],{},[940,1559,1560,1564],{},[961,1561,1562],{},[173,1563,1428],{},[961,1565,1431],{},[940,1567,1568,1572],{},[961,1569,1570],{},[173,1571,1271],{},[961,1573,1274],{},[940,1575,1576,1580],{},[961,1577,1578],{},[173,1579,1281],{},[961,1581,1284],{},[934,1583,1584,1593],{},[937,1585,1586],{},[940,1587,1588,1591],{},[943,1589,1590],{},"Variable",[943,1592,954],{},[956,1594,1595],{},[940,1596,1597,1602],{},[961,1598,1599],{},[173,1600,1601],{},"--nested-dialogs",[961,1603,1604],{},"How many dialogs are nested inside this one.",[272,1606,1608],{"id":1607},"title","Title",[139,1610,1611,1612,586],{},"Heading that labels the dialog. Renders an ",[173,1613,1614],{},"\u003Ch2>",[934,1616,1617,1629],{},[937,1618,1619],{},[940,1620,1621,1623,1625,1627],{},[943,1622,945],{},[943,1624,948],{},[943,1626,951],{},[943,1628,954],{},[956,1630,1631],{},[940,1632,1633,1637,1641,1643],{},[961,1634,1635],{},[173,1636,903],{},[961,1638,1639],{},[173,1640,1169],{},[961,1642,1172],{},[961,1644,1645],{},"Override the label id used by the popup.",[272,1647,954],{"id":1648},"description",[139,1650,1651,1652,586],{},"Supporting text. Renders a ",[173,1653,1654],{},"\u003Cp>",[272,1656,1658],{"id":1657},"close","Close",[139,1660,1661,1662,1664,1665,1668],{},"Button that sets open to ",[173,1663,383],{},". Add ",[173,1666,1667],{},"class=\"cta\""," for the stronger wash.",[934,1670,1671,1683],{},[937,1672,1673],{},[940,1674,1675,1677,1679,1681],{},[943,1676,945],{},[943,1678,948],{},[943,1680,951],{},[943,1682,954],{},[956,1684,1685],{},[940,1686,1687,1691,1695,1697],{},[961,1688,1689],{},[173,1690,1115],{},[961,1692,1693],{},[173,1694,970],{},[961,1696,995],{},[961,1698,1124,1699,586],{},[173,1700,1127],{},[934,1702,1703,1711],{},[937,1704,1705],{},[940,1706,1707,1709],{},[943,1708,1186],{},[943,1710,954],{},[956,1712,1713],{},[940,1714,1715,1719],{},[961,1716,1717],{},[173,1718,1127],{},[961,1720,1721],{},"Present when the button is disabled.",[272,1723,1725],{"id":1724},"createdialoghandle","createDialogHandle",[139,1727,1728,1729,1731,1732,1734],{},"Creates a handle that connects ",[173,1730,187],{}," with detached ",[173,1733,445],{}," components.",[166,1736,1740],{"className":1737,"code":1738,"language":1739,"meta":171,"style":171},"language-ts shiki shiki-themes github-light github-dark","const handle = createDialogHandle\u003C{ text: string }>()\nhandle.show({ text: 'Trigger 2' }, 'dialog-trigger-2')\nhandle.hide()\n","ts",[173,1741,1742,1768,1790],{"__ignoreMap":171},[176,1743,1744,1746,1749,1751,1753,1756,1760,1762,1765],{"class":178,"line":179},[176,1745,367],{"class":366},[176,1747,1748],{"class":370}," handle",[176,1750,374],{"class":366},[176,1752,730],{"class":358},[176,1754,1755],{"class":182},"\u003C{ ",[176,1757,1759],{"class":1758},"s4XuR","text",[176,1761,422],{"class":366},[176,1763,1764],{"class":370}," string",[176,1766,1767],{"class":182}," }>()\n",[176,1769,1770,1773,1776,1779,1782,1785,1788],{"class":178,"line":193},[176,1771,1772],{"class":182},"handle.",[176,1774,1775],{"class":358},"show",[176,1777,1778],{"class":182},"({ text: ",[176,1780,1781],{"class":430},"'Trigger 2'",[176,1783,1784],{"class":182}," }, ",[176,1786,1787],{"class":430},"'dialog-trigger-2'",[176,1789,386],{"class":182},[176,1791,1792,1794,1797],{"class":178,"line":199},[176,1793,1772],{"class":182},[176,1795,1796],{"class":358},"hide",[176,1798,733],{"class":182},[934,1800,1801,1809],{},[937,1802,1803],{},[940,1804,1805,1807],{},[943,1806,47],{},[943,1808,954],{},[956,1810,1811,1820,1829,1838,1848],{},[940,1812,1813,1817],{},[961,1814,1815],{},[173,1816,338],{},[961,1818,1819],{},"Ref of whether the dialog is open.",[940,1821,1822,1826],{},[961,1823,1824],{},[173,1825,834],{},[961,1827,1828],{},"Ref of the active trigger payload.",[940,1830,1831,1835],{},[961,1832,1833],{},[173,1834,907],{},[961,1836,1837],{},"Ref of the active trigger id.",[940,1839,1840,1845],{},[961,1841,1842],{},[173,1843,1844],{},"show(payload?, triggerId?)",[961,1846,1847],{},"Open the dialog.",[940,1849,1850,1855],{},[961,1851,1852],{},[173,1853,1854],{},"hide()",[961,1856,1857],{},"Close the dialog.",[1859,1860,1861],"style",{},"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}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 .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}",{"title":171,"searchDepth":193,"depth":193,"links":1863},[1864,1865,1866,1879],{"id":148,"depth":193,"text":149},{"id":163,"depth":193,"text":164},{"id":269,"depth":193,"text":270,"children":1867},[1868,1869,1870,1871,1872,1873,1874,1875,1876,1877,1878],{"id":274,"depth":199,"text":275},{"id":556,"depth":199,"text":557},{"id":570,"depth":199,"text":571},{"id":592,"depth":199,"text":593},{"id":602,"depth":199,"text":603},{"id":629,"depth":199,"text":630},{"id":643,"depth":199,"text":644},{"id":653,"depth":199,"text":654},{"id":674,"depth":199,"text":675},{"id":827,"depth":199,"text":828},{"id":889,"depth":199,"text":890},{"id":921,"depth":193,"text":922,"children":1880},[1881,1882,1883,1884,1885,1886,1887,1888,1889,1890],{"id":925,"depth":199,"text":926},{"id":1085,"depth":199,"text":1086},{"id":1211,"depth":199,"text":1212},{"id":1287,"depth":199,"text":1288},{"id":1381,"depth":199,"text":1382},{"id":1450,"depth":199,"text":1451},{"id":1607,"depth":199,"text":1608},{"id":1648,"depth":199,"text":954},{"id":1657,"depth":199,"text":1658},{"id":1724,"depth":199,"text":1725},"A popup that opens on top of the entire page","md",{},{"title":41,"description":1891},"pkg\u002Fdialog","F6ZJmaHvWyPfwyjs7hLYXmLT59lOxpr4FF2MO_GpE88",1791043754655]