[{"data":1,"prerenderedAt":694},["ShallowReactive",2],{"i-simple-icons:github":3,"i-lucide:arrow-right":8,"doc-\u002Fdocs\u002Felements\u002Fpopover":10,"docs-sidebar":626,"i-lucide:file-text":686,"i-lucide:arrow-left":688,"i-lucide:message-square-more":690,"i-lucide:arrow-up-right":692},{"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":616,"extension":617,"group":618,"groupOrder":114,"meta":619,"navTitle":620,"navigation":621,"order":227,"path":622,"seo":623,"stem":624,"__hash__":625},"docs\u002Fdocs\u002Felements\u002Fpopover.md","\u003Cwmcp-popover>",{"type":14,"value":15,"toc":610},"minimark",[16,23,43,121,124,129,151,234,245,249,445,461,465,472,504,507,511,521,606],[17,18,20],"h1",{"id":19},"wmcp-popover",[21,22,12],"code",{},[24,25,26,27,32,33,37,38,42],"p",{},"A non-modal, anchored floating panel — the sibling of the ",[28,29,31],"a",{"href":30},"\u002Fdocs\u002Felements\u002Fdialog","dialog"," (modal) and the ",[28,34,36],{"href":35},"\u002Fdocs\u002Felements\u002Fmenu","menu"," (action list). It uses the same native Popover API + CSS anchor positioning as the menu (top layer, light-dismiss, Escape), but its content is arbitrary. The exposed action is ",[39,40,41],"strong",{},"open",": the agent surfaces the panel, and closing stays a light-dismiss or human step — the same consent posture as the dialog.",[44,45,50],"pre",{"className":46,"code":47,"language":48,"meta":49,"style":49},"language-html shiki shiki-themes github-light-default ayu-dark","\u003Cwmcp-popover name=\"account_menu\" label=\"Account ▾\" expose>\n  \u003Cp>Signed in as Ada\u003C\u002Fp>\n\u003C\u002Fwmcp-popover>\n","html","",[21,51,52,90,112],{"__ignoreMap":49},[53,54,57,61,64,68,72,76,79,81,84,87],"span",{"class":55,"line":56},"line",1,[53,58,60],{"class":59},"sqV5G","\u003C",[53,62,19],{"class":63},"sfBZl",[53,65,67],{"class":66},"sI192"," name",[53,69,71],{"class":70},"siQKT","=",[53,73,75],{"class":74},"sxLuP","\"account_menu\"",[53,77,78],{"class":66}," label",[53,80,71],{"class":70},[53,82,83],{"class":74},"\"Account ▾\"",[53,85,86],{"class":66}," expose",[53,88,89],{"class":59},">\n",[53,91,93,96,98,101,105,108,110],{"class":55,"line":92},2,[53,94,95],{"class":59},"  \u003C",[53,97,24],{"class":63},[53,99,100],{"class":59},">",[53,102,104],{"class":103},"sBz_o","Signed in as Ada",[53,106,107],{"class":59},"\u003C\u002F",[53,109,24],{"class":63},[53,111,89],{"class":59},[53,113,115,117,119],{"class":55,"line":114},3,[53,116,107],{"class":59},[53,118,19],{"class":63},[53,120,89],{"class":59},[122,123],"popover-demo",{},[125,126,128],"h2",{"id":127},"click-vs-hover-tooltip","Click vs hover (tooltip)",[24,130,131,134,135,138,139,142,143,146,147,150],{},[21,132,133],{},"trigger=\"click\""," (the default) is an interactive popover — click to toggle, light-dismiss to close. ",[21,136,137],{},"trigger=\"hover\""," turns it into a ",[39,140,141],{},"tooltip",": it opens on hover and focus, closes on leave and blur, gets ",[21,144,145],{},"role=\"tooltip\"",", and labels its trigger via ",[21,148,149],{},"aria-describedby",".",[44,152,154],{"className":46,"code":153,"language":48,"meta":49,"style":49},"\u003C!-- tooltip -->\n\u003Cwmcp-popover trigger=\"hover\" label=\"Copy to clipboard\">\n  \u003Cbutton slot=\"trigger\" aria-label=\"Copy\">⧉\u003C\u002Fbutton>\n  Copy to clipboard\n\u003C\u002Fwmcp-popover>\n",[21,155,156,162,185,219,225],{"__ignoreMap":49},[53,157,158],{"class":55,"line":56},[53,159,161],{"class":160},"s5O_a","\u003C!-- tooltip -->\n",[53,163,164,166,168,171,173,176,178,180,183],{"class":55,"line":92},[53,165,60],{"class":59},[53,167,19],{"class":63},[53,169,170],{"class":66}," trigger",[53,172,71],{"class":70},[53,174,175],{"class":74},"\"hover\"",[53,177,78],{"class":66},[53,179,71],{"class":70},[53,181,182],{"class":74},"\"Copy to clipboard\"",[53,184,89],{"class":59},[53,186,187,189,192,195,197,200,203,205,208,210,213,215,217],{"class":55,"line":114},[53,188,95],{"class":59},[53,190,191],{"class":63},"button",[53,193,194],{"class":66}," slot",[53,196,71],{"class":70},[53,198,199],{"class":74},"\"trigger\"",[53,201,202],{"class":66}," aria-label",[53,204,71],{"class":70},[53,206,207],{"class":74},"\"Copy\"",[53,209,100],{"class":59},[53,211,212],{"class":103},"⧉",[53,214,107],{"class":59},[53,216,191],{"class":63},[53,218,89],{"class":59},[53,220,222],{"class":55,"line":221},4,[53,223,224],{"class":103},"  Copy to clipboard\n",[53,226,228,230,232],{"class":55,"line":227},5,[53,229,107],{"class":59},[53,231,19],{"class":63},[53,233,89],{"class":59},[24,235,236,237,240,241,244],{},"The trigger content comes from the ",[21,238,239],{},"trigger"," slot (falling back to ",[21,242,243],{},"label","); the panel content is the default slot.",[125,246,248],{"id":247},"element-attributes","Element attributes",[250,251,252,271],"table",{},[253,254,255],"thead",{},[256,257,258,262,265,268],"tr",{},[259,260,261],"th",{},"Attribute",[259,263,264],{},"Type",[259,266,267],{},"Default",[259,269,270],{},"Description",[272,273,274,294,327,351,370,390,413,429],"tbody",{},[256,275,276,281,286,291],{},[277,278,279],"td",{},[21,280,41],{},[277,282,283],{},[21,284,285],{},"boolean",[277,287,288],{},[21,289,290],{},"false",[277,292,293],{},"Whether the panel is open (reflected).",[256,295,296,301,306,311],{},[277,297,298],{},[21,299,300],{},"placement",[277,302,303],{},[21,304,305],{},"string",[277,307,308],{},[21,309,310],{},"bottom",[277,312,313,316,317,316,319,322,323,326],{},[21,314,315],{},"top",", ",[21,318,310],{},[21,320,321],{},"left",", or ",[21,324,325],{},"right"," of the trigger.",[256,328,329,333,337,342],{},[277,330,331],{},[21,332,239],{},[277,334,335],{},[21,336,305],{},[277,338,339],{},[21,340,341],{},"click",[277,343,344,346,347,350],{},[21,345,341],{}," (interactive popover) or ",[21,348,349],{},"hover"," (tooltip).",[256,352,353,357,361,364],{},[277,354,355],{},[21,356,243],{},[277,358,359],{},[21,360,305],{},[277,362,363],{},"—",[277,365,366,367,369],{},"Trigger text (when no ",[21,368,239],{}," slot) and the panel's accessible name.",[256,371,372,377,381,383],{},[277,373,374],{},[21,375,376],{},"name",[277,378,379],{},[21,380,305],{},[277,382,363],{},[277,384,385,386,389],{},"Identifier used for the default tool name (",[21,387,388],{},"open_\u003Cname>",").",[256,391,392,397,401,405],{},[277,393,394],{},[21,395,396],{},"expose",[277,398,399],{},[21,400,285],{},[277,402,403],{},[21,404,290],{},[277,406,407,408,412],{},"Register a ",[28,409,411],{"href":410},"\u002Fdocs\u002Fwebmcp","WebMCP tool"," that opens the panel.",[256,414,415,420,424,426],{},[277,416,417],{},[21,418,419],{},"tool-name",[277,421,422],{},[21,423,305],{},[277,425,363],{},[277,427,428],{},"Override the generated tool name.",[256,430,431,436,440,442],{},[277,432,433],{},[21,434,435],{},"tool-description",[277,437,438],{},[21,439,305],{},[277,441,363],{},[277,443,444],{},"Override the generated tool description.",[24,446,447,450,451,454,455,450,457,460],{},[21,448,449],{},"show()"," \u002F ",[21,452,453],{},"close()"," methods and composed ",[21,456,41],{},[21,458,459],{},"close"," events round out the imperative surface.",[125,462,464],{"id":463},"tool-shape","Tool shape",[24,466,467,468,471],{},"Like the dialog, the exposed tool takes ",[39,469,470],{},"no arguments"," — calling it opens the panel:",[44,473,477],{"className":474,"code":475,"language":476,"meta":49,"style":49},"language-json shiki shiki-themes github-light-default ayu-dark","{ \"type\": \"object\", \"properties\": {} }\n","json",[21,478,479],{"__ignoreMap":49},[53,480,481,484,487,490,493,496,499,501],{"class":55,"line":56},[53,482,483],{"class":103},"{ ",[53,485,486],{"class":63},"\"type\"",[53,488,489],{"class":70},":",[53,491,492],{"class":74}," \"object\"",[53,494,495],{"class":70},",",[53,497,498],{"class":63}," \"properties\"",[53,500,489],{"class":70},[53,502,503],{"class":103}," {} }\n",[24,505,506],{},"Opening an already-open popover is a no-op that reports as much; the tool never closes it.",[125,508,510],{"id":509},"theming","Theming",[24,512,513,514,517,518,489],{},"The panel is themed through ",[21,515,516],{},"--popover-*"," custom properties (shadcn popover palette), and the trigger is unstyled by default so any content sits flush — theme it via ",[21,519,520],{},"::part(trigger)",[44,522,526],{"className":523,"code":524,"language":525,"meta":49,"style":49},"language-css shiki shiki-themes github-light-default ayu-dark",":root {\n  --popover-bg: var(--popover);\n  --popover-max-width: 22rem;\n}\nwmcp-popover::part(trigger) { font-weight: 500; }\n","css",[21,527,528,537,561,578,583],{"__ignoreMap":49},[53,529,530,534],{"class":55,"line":56},[53,531,533],{"class":532},"sybcr",":root",[53,535,536],{"class":103}," {\n",[53,538,539,543,545,549,552,555,558],{"class":55,"line":92},[53,540,542],{"class":541},"sCHdd","  --popover-bg",[53,544,489],{"class":70},[53,546,548],{"class":547},"sAJRi"," var",[53,550,551],{"class":103},"(",[53,553,554],{"class":541},"--popover",[53,556,557],{"class":103},")",[53,559,560],{"class":70},";\n",[53,562,563,566,568,572,576],{"class":55,"line":114},[53,564,565],{"class":541},"  --popover-max-width",[53,567,489],{"class":70},[53,569,571],{"class":570},"sQY3k"," 22",[53,573,575],{"class":574},"s7jPt","rem",[53,577,560],{"class":70},[53,579,580],{"class":55,"line":221},[53,581,582],{"class":103},"}\n",[53,584,585,588,591,595,597,600,603],{"class":55,"line":227},[53,586,19],{"class":587},"s2cXC",[53,589,590],{"class":103},"::part(trigger) { ",[53,592,594],{"class":593},"srNlZ","font-weight",[53,596,489],{"class":70},[53,598,599],{"class":570}," 500",[53,601,602],{"class":70},";",[53,604,605],{"class":103}," }\n",[607,608,609],"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 .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 .s5O_a, html code.shiki .s5O_a{--shiki-default:#6E7781;--shiki-default-font-style:inherit;--shiki-dark:#5A6673;--shiki-dark-font-style:italic}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 .s2cXC, html code.shiki .s2cXC{--shiki-default:#116329;--shiki-dark:#59C2FF}html pre.shiki code .srNlZ, html code.shiki .srNlZ{--shiki-default:#0550AE;--shiki-dark:#39BAE6}",{"title":49,"searchDepth":92,"depth":92,"links":611},[612,613,614,615],{"id":127,"depth":92,"text":128},{"id":247,"depth":92,"text":248},{"id":463,"depth":92,"text":464},{"id":509,"depth":92,"text":510},"A non-modal anchored floating panel — and a tooltip mode — whose exposed action is opening.","md","Interaction",{},"Popover",true,"\u002Fdocs\u002Felements\u002Fpopover",{"title":12,"description":616},"docs\u002Felements\u002Fpopover","LbBzDvWur0VvhCtOXF-ObdoMlO6pbgGaIDYMQa-W7i8",[627,631,636,639,643,646,647,651,655,659,663,668,672,675,678,681,684],{"path":628,"title":629,"navTitle":630,"group":618,"order":56,"groupOrder":114},"\u002Fdocs\u002Felements\u002Fbutton","\u003Cwmcp-button>","Button",{"path":632,"title":633,"navTitle":634,"group":635,"order":221,"groupOrder":92},"\u002Fdocs\u002Felements\u002Fcheckbox","\u003Cwmcp-checkbox>","Checkbox","Elements",{"path":30,"title":637,"navTitle":638,"group":618,"order":92,"groupOrder":114},"\u003Cwmcp-dialog>","Dialog",{"path":640,"title":641,"navTitle":642,"group":635,"order":56,"groupOrder":92},"\u002Fdocs\u002Felements\u002Finput","\u003Cwmcp-input>","Input",{"path":35,"title":644,"navTitle":645,"group":618,"order":114,"groupOrder":114},"\u003Cwmcp-menu>","Menu",{"path":622,"title":12,"navTitle":620,"group":618,"order":227,"groupOrder":114},{"path":648,"title":649,"navTitle":650,"group":635,"order":227,"groupOrder":92},"\u002Fdocs\u002Felements\u002Fradio","\u003Cwmcp-radio-group>","Radio group",{"path":652,"title":653,"navTitle":654,"group":635,"order":114,"groupOrder":92},"\u002Fdocs\u002Felements\u002Fselect","\u003Cwmcp-select>","Select",{"path":656,"title":657,"navTitle":658,"group":618,"order":221,"groupOrder":114},"\u002Fdocs\u002Felements\u002Ftabs","\u003Cwmcp-tabs>","Tabs",{"path":660,"title":661,"navTitle":662,"group":635,"order":92,"groupOrder":92},"\u002Fdocs\u002Felements\u002Ftextarea","\u003Cwmcp-textarea>","Textarea",{"path":664,"title":665,"navTitle":666,"group":618,"order":667,"groupOrder":114},"\u002Fdocs\u002Felements\u002Ftoast","\u003Cwmcp-toast>","Toast",6,{"path":669,"title":670,"navTitle":670,"group":671,"order":667,"groupOrder":56},"\u002Fdocs\u002Fframeworks","React & Vue","Getting started",{"path":673,"title":674,"navTitle":674,"group":671,"order":56,"groupOrder":56},"\u002Fdocs","Introduction",{"path":676,"title":677,"navTitle":677,"group":671,"order":92,"groupOrder":56},"\u002Fdocs\u002Finstallation","Installation",{"path":679,"title":680,"navTitle":680,"group":671,"order":227,"groupOrder":56},"\u002Fdocs\u002Ftesting","Testing",{"path":682,"title":683,"navTitle":683,"group":671,"order":114,"groupOrder":56},"\u002Fdocs\u002Fvalidation","Validation",{"path":410,"title":685,"navTitle":685,"group":671,"order":221,"groupOrder":56},"WebMCP exposure",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":687},"\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":689},"\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":691},"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M22 17a2 2 0 0 1-2 2H6.828a2 2 0 0 0-1.414.586l-2.202 2.202A.71.71 0 0 1 2 21.286V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2zm-10-6h.01M16 11h.01M8 11h.01\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":693},"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M7 7h10v10M7 17L17 7\"\u002F>",1782971919412]