[{"data":1,"prerenderedAt":792},["ShallowReactive",2],{"i-simple-icons:github":3,"i-lucide:arrow-right":8,"doc-\u002Fdocs\u002Felements\u002Fdialog":10,"docs-sidebar":725,"i-lucide:file-text":784,"i-lucide:arrow-left":786,"i-lucide:square-stack":788,"i-lucide:arrow-up-right":790},{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":7},0,24,false,"\u003Cpath fill=\"currentColor\" d=\"M12 .297c-6.63 0-12 5.373-12 12c0 5.303 3.438 9.8 8.205 11.385c.6.113.82-.258.82-.577c0-.285-.01-1.04-.015-2.04c-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729c1.205.084 1.838 1.236 1.838 1.236c1.07 1.835 2.809 1.305 3.495.998c.108-.776.417-1.305.76-1.605c-2.665-.3-5.466-1.332-5.466-5.93c0-1.31.465-2.38 1.235-3.22c-.135-.303-.54-1.523.105-3.176c0 0 1.005-.322 3.3 1.23c.96-.267 1.98-.399 3-.405c1.02.006 2.04.138 3 .405c2.28-1.552 3.285-1.23 3.285-1.23c.645 1.653.24 2.873.12 3.176c.765.84 1.23 1.91 1.23 3.22c0 4.61-2.805 5.625-5.475 5.92c.42.36.81 1.096.81 2.22c0 1.606-.015 2.896-.015 3.286c0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":9},"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M5 12h14m-7-7l7 7l-7 7\"\u002F>",{"id":11,"title":12,"body":13,"description":715,"extension":716,"group":717,"groupOrder":123,"meta":718,"navTitle":719,"navigation":720,"order":100,"path":721,"seo":722,"stem":723,"__hash__":724},"docs\u002Fdocs\u002Felements\u002Fdialog.md","\u003Cwmcp-dialog>",{"type":14,"value":15,"toc":709},"minimark",[16,23,40,51,231,234,239,422,426,517,521,533,574,577,581,589,691,705],[17,18,20],"h1",{"id":19},"wmcp-dialog",[21,22,12],"code",{},[24,25,26,27,30,31,39],"p",{},"A modal dialog wrapping the native ",[21,28,29],{},"\u003Cdialog>"," element — so it inherits the platform's focus trap, top-layer stacking, backdrop, and Escape-to-close for free. The exposed ",[32,33,34,35],"strong",{},"action is ",[36,37,38],"em",{},"open",": an agent can surface the dialog for the user to review, but closing and confirming stay a deliberate human step.",[24,41,42,43,46,47,50],{},"That asymmetry is the point. An agent can ask for attention; the irreversible confirm is the person's to make. It's the same consent gate the form controls draw between ",[36,44,45],{},"setting"," a value and ",[36,48,49],{},"submitting"," it.",[52,53,58],"pre",{"className":54,"code":55,"language":56,"meta":57,"style":57},"language-html shiki shiki-themes github-light-default ayu-dark","\u003Cwmcp-dialog name=\"booking\" label=\"Confirm booking\" expose>\n  \u003Ch3>Confirm your booking\u003C\u002Fh3>\n  \u003Cp>Book Tuesday, 3:00 PM with Dr. Reyes?\u003C\u002Fp>\n  \u003Cwmcp-button variant=\"ghost\" onclick=\"this.closest('wmcp-dialog').close()\">Cancel\u003C\u002Fwmcp-button>\n  \u003Cwmcp-button variant=\"primary\">Confirm\u003C\u002Fwmcp-button>\n\u003C\u002Fwmcp-dialog>\n","html","",[21,59,60,98,121,139,197,222],{"__ignoreMap":57},[61,62,65,69,72,76,80,84,87,89,92,95],"span",{"class":63,"line":64},"line",1,[61,66,68],{"class":67},"sqV5G","\u003C",[61,70,19],{"class":71},"sfBZl",[61,73,75],{"class":74},"sI192"," name",[61,77,79],{"class":78},"siQKT","=",[61,81,83],{"class":82},"sxLuP","\"booking\"",[61,85,86],{"class":74}," label",[61,88,79],{"class":78},[61,90,91],{"class":82},"\"Confirm booking\"",[61,93,94],{"class":74}," expose",[61,96,97],{"class":67},">\n",[61,99,101,104,107,110,114,117,119],{"class":63,"line":100},2,[61,102,103],{"class":67},"  \u003C",[61,105,106],{"class":71},"h3",[61,108,109],{"class":67},">",[61,111,113],{"class":112},"sBz_o","Confirm your booking",[61,115,116],{"class":67},"\u003C\u002F",[61,118,106],{"class":71},[61,120,97],{"class":67},[61,122,124,126,128,130,133,135,137],{"class":63,"line":123},3,[61,125,103],{"class":67},[61,127,24],{"class":71},[61,129,109],{"class":67},[61,131,132],{"class":112},"Book Tuesday, 3:00 PM with Dr. Reyes?",[61,134,116],{"class":67},[61,136,24],{"class":71},[61,138,97],{"class":67},[61,140,142,144,147,150,152,155,158,160,163,167,171,175,178,180,183,186,188,191,193,195],{"class":63,"line":141},4,[61,143,103],{"class":67},[61,145,146],{"class":71},"wmcp-button",[61,148,149],{"class":74}," variant",[61,151,79],{"class":78},[61,153,154],{"class":82},"\"ghost\"",[61,156,157],{"class":74}," onclick",[61,159,79],{"class":78},[61,161,162],{"class":82},"\"",[61,164,166],{"class":165},"sJQeh","this",[61,168,170],{"class":169},"sFfYb",".",[61,172,174],{"class":173},"s2DMw","closest",[61,176,177],{"class":82},"('wmcp-dialog')",[61,179,170],{"class":169},[61,181,182],{"class":173},"close",[61,184,185],{"class":82},"()\"",[61,187,109],{"class":67},[61,189,190],{"class":112},"Cancel",[61,192,116],{"class":67},[61,194,146],{"class":71},[61,196,97],{"class":67},[61,198,200,202,204,206,208,211,213,216,218,220],{"class":63,"line":199},5,[61,201,103],{"class":67},[61,203,146],{"class":71},[61,205,149],{"class":74},[61,207,79],{"class":78},[61,209,210],{"class":82},"\"primary\"",[61,212,109],{"class":67},[61,214,215],{"class":112},"Confirm",[61,217,116],{"class":67},[61,219,146],{"class":71},[61,221,97],{"class":67},[61,223,225,227,229],{"class":63,"line":224},6,[61,226,116],{"class":67},[61,228,19],{"class":71},[61,230,97],{"class":67},[232,233],"dialog-demo",{},[235,236,238],"h2",{"id":237},"element-attributes","Element attributes",[240,241,242,261],"table",{},[243,244,245],"thead",{},[246,247,248,252,255,258],"tr",{},[249,250,251],"th",{},"Attribute",[249,253,254],{},"Type",[249,256,257],{},"Default",[249,259,260],{},"Description",[262,263,264,288,310,328,346,366,390,406],"tbody",{},[246,265,266,271,276,281],{},[267,268,269],"td",{},[21,270,38],{},[267,272,273],{},[21,274,275],{},"boolean",[267,277,278],{},[21,279,280],{},"false",[267,282,283,284,287],{},"Whether the dialog is open (reflected — drives ",[21,285,286],{},"[open]"," styling).",[246,289,290,295,299,304],{},[267,291,292],{},[21,293,294],{},"modal",[267,296,297],{},[21,298,275],{},[267,300,301],{},[21,302,303],{},"true",[267,305,306,307,309],{},"Open as a focus-trapping modal with a backdrop. Set ",[21,308,280],{}," for a non-modal dialog.",[246,311,312,317,321,325],{},[267,313,314],{},[21,315,316],{},"static-backdrop",[267,318,319],{},[21,320,275],{},[267,322,323],{},[21,324,280],{},[267,326,327],{},"Keep the dialog open when the backdrop is clicked.",[246,329,330,335,340,343],{},[267,331,332],{},[21,333,334],{},"label",[267,336,337],{},[21,338,339],{},"string",[267,341,342],{},"—",[267,344,345],{},"Accessible name for the dialog, and the noun in the default tool description.",[246,347,348,353,357,359],{},[267,349,350],{},[21,351,352],{},"name",[267,354,355],{},[21,356,339],{},[267,358,342],{},[267,360,361,362,365],{},"Identifier used for the default tool name (",[21,363,364],{},"open_\u003Cname>",").",[246,367,368,373,377,381],{},[267,369,370],{},[21,371,372],{},"expose",[267,374,375],{},[21,376,275],{},[267,378,379],{},[21,380,280],{},[267,382,383,384,389],{},"Register a ",[385,386,388],"a",{"href":387},"\u002Fdocs\u002Fwebmcp","WebMCP tool"," that opens this dialog.",[246,391,392,397,401,403],{},[267,393,394],{},[21,395,396],{},"tool-name",[267,398,399],{},[21,400,339],{},[267,402,342],{},[267,404,405],{},"Override the generated tool name.",[246,407,408,413,417,419],{},[267,409,410],{},[21,411,412],{},"tool-description",[267,414,415],{},[21,416,339],{},[267,418,342],{},[267,420,421],{},"Override the generated tool description.",[235,423,425],{"id":424},"methods-events-properties","Methods, events & properties",[240,427,428,440],{},[243,429,430],{},[246,431,432,435,438],{},[249,433,434],{},"Member",[249,436,437],{},"Kind",[249,439,260],{},[262,441,442,460,475,489,502],{},[246,443,444,449,452],{},[267,445,446],{},[21,447,448],{},"show()",[267,450,451],{},"method",[267,453,454,455,457,458,365],{},"Open the dialog (modal unless ",[21,456,294],{}," is ",[21,459,280],{},[246,461,462,467,469],{},[267,463,464],{},[21,465,466],{},"close(returnValue?)",[267,468,451],{},[267,470,471,472,170],{},"Close it, optionally recording a ",[21,473,474],{},"returnValue",[246,476,477,481,484],{},[267,478,479],{},[21,480,474],{},[267,482,483],{},"property",[267,485,486,487,365],{},"The value the dialog last closed with (mirrors native ",[21,488,29],{},[246,490,491,496,499],{},[267,492,493,495],{},[21,494,38],{}," event",[267,497,498],{},"event",[267,500,501],{},"Fired (composed) when the dialog opens.",[246,503,504,508,510],{},[267,505,506,495],{},[21,507,182],{},[267,509,498],{},[267,511,512,513,516],{},"Fired (composed) when it closes — via ",[21,514,515],{},"close()",", Escape, or backdrop.",[235,518,520],{"id":519},"tool-shape","Tool shape",[24,522,523,524,528,529,532],{},"Like every ",[385,525,527],{"href":526},"\u002Fdocs\u002Felements\u002Fbutton","interaction primitive",", the exposed tool takes ",[32,530,531],{},"no arguments"," — calling it opens the dialog:",[52,534,538],{"className":535,"code":536,"language":537,"meta":57,"style":57},"language-json shiki shiki-themes github-light-default ayu-dark","{\n  \"type\": \"object\",\n  \"properties\": {}\n}\n","json",[21,539,540,545,559,569],{"__ignoreMap":57},[61,541,542],{"class":63,"line":64},[61,543,544],{"class":112},"{\n",[61,546,547,550,553,556],{"class":63,"line":100},[61,548,549],{"class":71},"  \"type\"",[61,551,552],{"class":78},":",[61,554,555],{"class":82}," \"object\"",[61,557,558],{"class":78},",\n",[61,560,561,564,566],{"class":63,"line":123},[61,562,563],{"class":71},"  \"properties\"",[61,565,552],{"class":78},[61,567,568],{"class":112}," {}\n",[61,570,571],{"class":63,"line":141},[61,572,573],{"class":112},"}\n",[24,575,576],{},"Calling the tool on an already-open dialog is a no-op that reports as much; it never closes the dialog (closing is never the agent's call).",[235,578,580],{"id":579},"theming","Theming",[24,582,583,584,588],{},"Every visual is a CSS custom property defaulting through the ",[385,585,587],{"href":586},"\u002Fdocs\u002Finstallation","design tokens"," to the shadcn popover palette, including the backdrop:",[52,590,594],{"className":591,"code":592,"language":593,"meta":57,"style":57},"language-css shiki shiki-themes github-light-default ayu-dark",":root {\n  --dialog-bg: var(--popover);\n  --dialog-radius: 1rem;\n  --dialog-backdrop: color-mix(in oklch, black 60%, transparent);\n}\n","css",[21,595,596,605,629,646,687],{"__ignoreMap":57},[61,597,598,602],{"class":63,"line":64},[61,599,601],{"class":600},"sybcr",":root",[61,603,604],{"class":112}," {\n",[61,606,607,611,613,617,620,623,626],{"class":63,"line":100},[61,608,610],{"class":609},"sCHdd","  --dialog-bg",[61,612,552],{"class":78},[61,614,616],{"class":615},"sAJRi"," var",[61,618,619],{"class":112},"(",[61,621,622],{"class":609},"--popover",[61,624,625],{"class":112},")",[61,627,628],{"class":78},";\n",[61,630,631,634,636,640,644],{"class":63,"line":123},[61,632,633],{"class":609},"  --dialog-radius",[61,635,552],{"class":78},[61,637,639],{"class":638},"sQY3k"," 1",[61,641,643],{"class":642},"s7jPt","rem",[61,645,628],{"class":78},[61,647,648,651,653,656,658,662,665,668,672,675,678,680,683,685],{"class":63,"line":141},[61,649,650],{"class":609},"  --dialog-backdrop",[61,652,552],{"class":78},[61,654,655],{"class":615}," color-mix",[61,657,619],{"class":112},[61,659,661],{"class":660},"stxvc","in",[61,663,664],{"class":660}," oklch",[61,666,667],{"class":78},",",[61,669,671],{"class":670},"sic2d"," black",[61,673,674],{"class":638}," 60",[61,676,677],{"class":642},"%",[61,679,667],{"class":78},[61,681,682],{"class":670}," transparent",[61,684,625],{"class":112},[61,686,628],{"class":78},[61,688,689],{"class":63,"line":199},[61,690,573],{"class":112},[24,692,693,694,697,698,701,702,170],{},"The entrance fade-and-lift uses ",[21,695,696],{},"@starting-style"," and ",[21,699,700],{},"transition-behavior: allow-discrete",", and is suppressed under ",[21,703,704],{},"prefers-reduced-motion",[706,707,708],"style",{},"html pre.shiki code .sqV5G, html code.shiki .sqV5G{--shiki-default:#1F2328;--shiki-dark:#39BAE680}html pre.shiki code .sfBZl, html code.shiki .sfBZl{--shiki-default:#116329;--shiki-dark:#39BAE6}html pre.shiki code .sI192, html code.shiki .sI192{--shiki-default:#0550AE;--shiki-dark:#FFB454}html pre.shiki code .siQKT, html code.shiki .siQKT{--shiki-default:#1F2328;--shiki-dark:#BFBDB6B3}html pre.shiki code .sxLuP, html code.shiki .sxLuP{--shiki-default:#0A3069;--shiki-dark:#AAD94C}html pre.shiki code .sBz_o, html code.shiki .sBz_o{--shiki-default:#1F2328;--shiki-dark:#BFBDB6}html pre.shiki code .sJQeh, html code.shiki .sJQeh{--shiki-default:#0550AE;--shiki-default-font-style:inherit;--shiki-dark:#39BAE6;--shiki-dark-font-style:italic}html pre.shiki code .sFfYb, html code.shiki .sFfYb{--shiki-default:#0A3069;--shiki-dark:#F29668}html pre.shiki code .s2DMw, html code.shiki .s2DMw{--shiki-default:#8250DF;--shiki-dark:#FFB454}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 .sybcr, html code.shiki .sybcr{--shiki-default:#0550AE;--shiki-dark:#95E6CB}html pre.shiki code .sCHdd, html code.shiki .sCHdd{--shiki-default:#953800;--shiki-dark:#BFBDB6}html pre.shiki code .sAJRi, html code.shiki .sAJRi{--shiki-default:#0550AE;--shiki-dark:#F07178}html pre.shiki code .sQY3k, html code.shiki .sQY3k{--shiki-default:#0550AE;--shiki-dark:#D2A6FF}html pre.shiki code .s7jPt, html code.shiki .s7jPt{--shiki-default:#CF222E;--shiki-dark:#FF8F40}html pre.shiki code .stxvc, html code.shiki .stxvc{--shiki-default:#953800;--shiki-dark:#D2A6FF}html pre.shiki code .sic2d, html code.shiki .sic2d{--shiki-default:#0550AE;--shiki-default-font-style:inherit;--shiki-dark:#F29668;--shiki-dark-font-style:italic}",{"title":57,"searchDepth":100,"depth":100,"links":710},[711,712,713,714],{"id":237,"depth":100,"text":238},{"id":424,"depth":100,"text":425},{"id":519,"depth":100,"text":520},{"id":579,"depth":100,"text":580},"A modal dialog whose exposed action is opening — the agent surfaces it, the human confirms.","md","Interaction",{},"Dialog",true,"\u002Fdocs\u002Felements\u002Fdialog",{"title":12,"description":715},"docs\u002Felements\u002Fdialog","lgUJdFBYXlwUxOJiwGpb-k-k1QYcoBQIruewJlt1Nn8",[726,729,734,735,739,743,747,751,755,759,763,767,771,774,776,779,782],{"path":526,"title":727,"navTitle":728,"group":717,"order":64,"groupOrder":123},"\u003Cwmcp-button>","Button",{"path":730,"title":731,"navTitle":732,"group":733,"order":141,"groupOrder":100},"\u002Fdocs\u002Felements\u002Fcheckbox","\u003Cwmcp-checkbox>","Checkbox","Elements",{"path":721,"title":12,"navTitle":719,"group":717,"order":100,"groupOrder":123},{"path":736,"title":737,"navTitle":738,"group":733,"order":64,"groupOrder":100},"\u002Fdocs\u002Felements\u002Finput","\u003Cwmcp-input>","Input",{"path":740,"title":741,"navTitle":742,"group":717,"order":123,"groupOrder":123},"\u002Fdocs\u002Felements\u002Fmenu","\u003Cwmcp-menu>","Menu",{"path":744,"title":745,"navTitle":746,"group":717,"order":199,"groupOrder":123},"\u002Fdocs\u002Felements\u002Fpopover","\u003Cwmcp-popover>","Popover",{"path":748,"title":749,"navTitle":750,"group":733,"order":199,"groupOrder":100},"\u002Fdocs\u002Felements\u002Fradio","\u003Cwmcp-radio-group>","Radio group",{"path":752,"title":753,"navTitle":754,"group":733,"order":123,"groupOrder":100},"\u002Fdocs\u002Felements\u002Fselect","\u003Cwmcp-select>","Select",{"path":756,"title":757,"navTitle":758,"group":717,"order":141,"groupOrder":123},"\u002Fdocs\u002Felements\u002Ftabs","\u003Cwmcp-tabs>","Tabs",{"path":760,"title":761,"navTitle":762,"group":733,"order":100,"groupOrder":100},"\u002Fdocs\u002Felements\u002Ftextarea","\u003Cwmcp-textarea>","Textarea",{"path":764,"title":765,"navTitle":766,"group":717,"order":224,"groupOrder":123},"\u002Fdocs\u002Felements\u002Ftoast","\u003Cwmcp-toast>","Toast",{"path":768,"title":769,"navTitle":769,"group":770,"order":224,"groupOrder":64},"\u002Fdocs\u002Fframeworks","React & Vue","Getting started",{"path":772,"title":773,"navTitle":773,"group":770,"order":64,"groupOrder":64},"\u002Fdocs","Introduction",{"path":586,"title":775,"navTitle":775,"group":770,"order":100,"groupOrder":64},"Installation",{"path":777,"title":778,"navTitle":778,"group":770,"order":199,"groupOrder":64},"\u002Fdocs\u002Ftesting","Testing",{"path":780,"title":781,"navTitle":781,"group":770,"order":123,"groupOrder":64},"\u002Fdocs\u002Fvalidation","Validation",{"path":387,"title":783,"navTitle":783,"group":770,"order":141,"groupOrder":64},"WebMCP exposure",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":785},"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Cpath d=\"M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z\"\u002F>\u003Cpath d=\"M14 2v5a1 1 0 0 0 1 1h5M10 9H8m8 4H8m8 4H8\"\u002F>\u003C\u002Fg>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":787},"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"m12 19l-7-7l7-7m7 7H5\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":789},"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Cpath d=\"M4 10c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h4c1.1 0 2 .9 2 2m0 12c-1.1 0-2-.9-2-2v-4c0-1.1.9-2 2-2h4c1.1 0 2 .9 2 2\"\u002F>\u003Crect width=\"8\" height=\"8\" x=\"14\" y=\"14\" rx=\"2\"\u002F>\u003C\u002Fg>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":791},"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M7 7h10v10M7 17L17 7\"\u002F>",1782971919411]