[{"data":1,"prerenderedAt":418},["ShallowReactive",2],{"i-simple-icons:github":3,"i-lucide:arrow-right":8,"doc-\u002Fdocs\u002Finstallation":10,"docs-sidebar":350,"i-lucide:file-text":414,"i-lucide:arrow-left":416},{"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":342,"extension":343,"group":344,"groupOrder":43,"meta":345,"navTitle":12,"navigation":105,"order":87,"path":346,"seo":347,"stem":348,"__hash__":349},"docs\u002Fdocs\u002Finstallation.md","Installation",{"type":14,"value":15,"toc":337},"minimark",[16,20,24,29,58,122,172,184,197,201,208,297,301,307,333],[17,18,12],"h1",{"id":19},"installation",[21,22,23],"p",{},"Two distribution channels from one source of truth. Use the ESM package with your bundler, or the single-file CDN bundle for no-build environments.",[25,26,28],"h2",{"id":27},"with-a-build-tool","With a build tool",[30,31,36],"pre",{"className":32,"code":33,"language":34,"meta":35,"style":35},"language-bash shiki shiki-themes github-light-default ayu-dark","pnpm add @webmcpui\u002Fcore @webmcpui\u002Ftokens\n","bash","",[37,38,39],"code",{"__ignoreMap":35},[40,41,44,48,52,55],"span",{"class":42,"line":43},"line",1,[40,45,47],{"class":46},"sBDEj","pnpm",[40,49,51],{"class":50},"sxLuP"," add",[40,53,54],{"class":50}," @webmcpui\u002Fcore",[40,56,57],{"class":50}," @webmcpui\u002Ftokens\n",[30,59,63],{"className":60,"code":61,"language":62,"meta":35,"style":35},"language-ts shiki shiki-themes github-light-default ayu-dark","import { defineComponents } from '@webmcpui\u002Fcore';\nimport '@webmcpui\u002Ftokens\u002Fcss'; \u002F\u002F theme tokens (CSS custom properties)\n\ndefineComponents(); \u002F\u002F registers \u003Cwmcp-input> and the other \u003Cwmcp-*> elements\n","ts",[37,64,65,85,100,107],{"__ignoreMap":35},[40,66,67,71,75,78,81],{"class":42,"line":43},[40,68,70],{"class":69},"s7jPt","import",[40,72,74],{"class":73},"sBz_o"," { defineComponents } ",[40,76,77],{"class":69},"from",[40,79,80],{"class":50}," '@webmcpui\u002Fcore'",[40,82,84],{"class":83},"siQKT",";\n",[40,86,88,90,93,96],{"class":42,"line":87},2,[40,89,70],{"class":69},[40,91,92],{"class":50}," '@webmcpui\u002Ftokens\u002Fcss'",[40,94,95],{"class":83},";",[40,97,99],{"class":98},"s5O_a"," \u002F\u002F theme tokens (CSS custom properties)\n",[40,101,103],{"class":42,"line":102},3,[40,104,106],{"emptyLinePlaceholder":105},true,"\n",[40,108,110,114,117,119],{"class":42,"line":109},4,[40,111,113],{"class":112},"s2DMw","defineComponents",[40,115,116],{"class":73},"()",[40,118,95],{"class":83},[40,120,121],{"class":98}," \u002F\u002F registers \u003Cwmcp-input> and the other \u003Cwmcp-*> elements\n",[30,123,127],{"className":124,"code":125,"language":126,"meta":35,"style":35},"language-html shiki shiki-themes github-light-default ayu-dark","\u003Cwmcp-input label=\"Email\" name=\"email\" type=\"email\">\u003C\u002Fwmcp-input>\n","html",[37,128,129],{"__ignoreMap":35},[40,130,131,135,139,143,146,149,152,154,157,160,162,164,167,169],{"class":42,"line":43},[40,132,134],{"class":133},"sqV5G","\u003C",[40,136,138],{"class":137},"sfBZl","wmcp-input",[40,140,142],{"class":141},"sI192"," label",[40,144,145],{"class":83},"=",[40,147,148],{"class":50},"\"Email\"",[40,150,151],{"class":141}," name",[40,153,145],{"class":83},[40,155,156],{"class":50},"\"email\"",[40,158,159],{"class":141}," type",[40,161,145],{"class":83},[40,163,156],{"class":50},[40,165,166],{"class":133},">\u003C\u002F",[40,168,138],{"class":137},[40,170,171],{"class":133},">\n",[21,173,174,175,179,180,183],{},"Importing the package does ",[176,177,178],"strong",{},"not"," register the elements — you call ",[37,181,182],{},"defineComponents()"," so you control timing. (The CDN bundle below registers automatically.)",[185,186,187],"blockquote",{},[21,188,189,190,192,193,196],{},"In an SSR framework, call ",[37,191,182],{}," on the client only — custom elements need the DOM. In Nuxt, for example, do it from a ",[37,194,195],{},".client.ts"," plugin.",[25,198,200],{"id":199},"no-build-drop-a-script-tag","No build? Drop a script tag",[21,202,203,204,207],{},"For Webflow, WordPress, or hand-written HTML — one tag, every ",[37,205,206],{},"\u003Cwmcp-*>"," element auto-registers:",[30,209,211],{"className":124,"code":210,"language":126,"meta":35,"style":35},"\u003Clink rel=\"stylesheet\"\n  href=\"https:\u002F\u002Fcdn.jsdelivr.net\u002Fnpm\u002F@webmcpui\u002Ftokens\u002Fdist\u002Fcss\u002Ftokens.css\" \u002F>\n\u003Cscript src=\"https:\u002F\u002Fcdn.jsdelivr.net\u002Fnpm\u002F@webmcpui\u002Fcore\u002Fdist\u002Fwebmcpui.global.js\">\u003C\u002Fscript>\n\n\u003Cwmcp-input label=\"Email\" name=\"email\" type=\"email\">\u003C\u002Fwmcp-input>\n",[37,212,213,228,241,262,266],{"__ignoreMap":35},[40,214,215,217,220,223,225],{"class":42,"line":43},[40,216,134],{"class":133},[40,218,219],{"class":137},"link",[40,221,222],{"class":141}," rel",[40,224,145],{"class":83},[40,226,227],{"class":50},"\"stylesheet\"\n",[40,229,230,233,235,238],{"class":42,"line":87},[40,231,232],{"class":141},"  href",[40,234,145],{"class":83},[40,236,237],{"class":50},"\"https:\u002F\u002Fcdn.jsdelivr.net\u002Fnpm\u002F@webmcpui\u002Ftokens\u002Fdist\u002Fcss\u002Ftokens.css\"",[40,239,240],{"class":133}," \u002F>\n",[40,242,243,245,248,251,253,256,258,260],{"class":42,"line":102},[40,244,134],{"class":133},[40,246,247],{"class":137},"script",[40,249,250],{"class":141}," src",[40,252,145],{"class":83},[40,254,255],{"class":50},"\"https:\u002F\u002Fcdn.jsdelivr.net\u002Fnpm\u002F@webmcpui\u002Fcore\u002Fdist\u002Fwebmcpui.global.js\"",[40,257,166],{"class":133},[40,259,247],{"class":137},[40,261,171],{"class":133},[40,263,264],{"class":42,"line":109},[40,265,106],{"emptyLinePlaceholder":105},[40,267,269,271,273,275,277,279,281,283,285,287,289,291,293,295],{"class":42,"line":268},5,[40,270,134],{"class":133},[40,272,138],{"class":137},[40,274,142],{"class":141},[40,276,145],{"class":83},[40,278,148],{"class":50},[40,280,151],{"class":141},[40,282,145],{"class":83},[40,284,156],{"class":50},[40,286,159],{"class":141},[40,288,145],{"class":83},[40,290,156],{"class":50},[40,292,166],{"class":133},[40,294,138],{"class":137},[40,296,171],{"class":133},[25,298,300],{"id":299},"frameworks","Frameworks",[21,302,303,304,306],{},"Because these are standard custom elements, they work anywhere HTML renders. The only framework-specific note is telling the framework's template compiler not to treat ",[37,305,206],{}," as its own components:",[308,309,310,321,327],"ul",{},[311,312,313,316,317,320],"li",{},[176,314,315],{},"Vue \u002F Nuxt"," — set ",[37,318,319],{},"compilerOptions.isCustomElement = (tag) => tag.startsWith('wmcp-')",".",[311,322,323,326],{},[176,324,325],{},"React"," (19+) — custom elements and their props\u002Fattributes work directly.",[311,328,329,332],{},[176,330,331],{},"Svelte \u002F SolidJS \u002F Angular"," — supported with each framework's standard custom-element handling.",[334,335,336],"style",{},"html pre.shiki code .sBDEj, html code.shiki .sBDEj{--shiki-default:#953800;--shiki-dark:#59C2FF}html pre.shiki code .sxLuP, html code.shiki .sxLuP{--shiki-default:#0A3069;--shiki-dark:#AAD94C}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 .s7jPt, html code.shiki .s7jPt{--shiki-default:#CF222E;--shiki-dark:#FF8F40}html pre.shiki code .sBz_o, html code.shiki .sBz_o{--shiki-default:#1F2328;--shiki-dark:#BFBDB6}html pre.shiki code .siQKT, html code.shiki .siQKT{--shiki-default:#1F2328;--shiki-dark:#BFBDB6B3}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 .s2DMw, html code.shiki .s2DMw{--shiki-default:#8250DF;--shiki-dark:#FFB454}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}",{"title":35,"searchDepth":87,"depth":87,"links":338},[339,340,341],{"id":27,"depth":87,"text":28},{"id":199,"depth":87,"text":200},{"id":299,"depth":87,"text":300},"Add webmcpui to your project with a build tool, or drop a single script tag — no build step required.","md","Getting started",{},"\u002Fdocs\u002Finstallation",{"title":12,"description":342},"docs\u002Finstallation","9RSiZIRPzfQdW5d8BECnhDpadru63VVaCPqpJ0Hs5og",[351,356,361,365,369,373,377,381,385,389,393,398,401,404,405,408,411],{"path":352,"title":353,"navTitle":354,"group":355,"order":43,"groupOrder":102},"\u002Fdocs\u002Felements\u002Fbutton","\u003Cwmcp-button>","Button","Interaction",{"path":357,"title":358,"navTitle":359,"group":360,"order":109,"groupOrder":87},"\u002Fdocs\u002Felements\u002Fcheckbox","\u003Cwmcp-checkbox>","Checkbox","Elements",{"path":362,"title":363,"navTitle":364,"group":355,"order":87,"groupOrder":102},"\u002Fdocs\u002Felements\u002Fdialog","\u003Cwmcp-dialog>","Dialog",{"path":366,"title":367,"navTitle":368,"group":360,"order":43,"groupOrder":87},"\u002Fdocs\u002Felements\u002Finput","\u003Cwmcp-input>","Input",{"path":370,"title":371,"navTitle":372,"group":355,"order":102,"groupOrder":102},"\u002Fdocs\u002Felements\u002Fmenu","\u003Cwmcp-menu>","Menu",{"path":374,"title":375,"navTitle":376,"group":355,"order":268,"groupOrder":102},"\u002Fdocs\u002Felements\u002Fpopover","\u003Cwmcp-popover>","Popover",{"path":378,"title":379,"navTitle":380,"group":360,"order":268,"groupOrder":87},"\u002Fdocs\u002Felements\u002Fradio","\u003Cwmcp-radio-group>","Radio group",{"path":382,"title":383,"navTitle":384,"group":360,"order":102,"groupOrder":87},"\u002Fdocs\u002Felements\u002Fselect","\u003Cwmcp-select>","Select",{"path":386,"title":387,"navTitle":388,"group":355,"order":109,"groupOrder":102},"\u002Fdocs\u002Felements\u002Ftabs","\u003Cwmcp-tabs>","Tabs",{"path":390,"title":391,"navTitle":392,"group":360,"order":87,"groupOrder":87},"\u002Fdocs\u002Felements\u002Ftextarea","\u003Cwmcp-textarea>","Textarea",{"path":394,"title":395,"navTitle":396,"group":355,"order":397,"groupOrder":102},"\u002Fdocs\u002Felements\u002Ftoast","\u003Cwmcp-toast>","Toast",6,{"path":399,"title":400,"navTitle":400,"group":344,"order":397,"groupOrder":43},"\u002Fdocs\u002Fframeworks","React & Vue",{"path":402,"title":403,"navTitle":403,"group":344,"order":43,"groupOrder":43},"\u002Fdocs","Introduction",{"path":346,"title":12,"navTitle":12,"group":344,"order":87,"groupOrder":43},{"path":406,"title":407,"navTitle":407,"group":344,"order":268,"groupOrder":43},"\u002Fdocs\u002Ftesting","Testing",{"path":409,"title":410,"navTitle":410,"group":344,"order":102,"groupOrder":43},"\u002Fdocs\u002Fvalidation","Validation",{"path":412,"title":413,"navTitle":413,"group":344,"order":109,"groupOrder":43},"\u002Fdocs\u002Fwebmcp","WebMCP exposure",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":415},"\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":417},"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"m12 19l-7-7l7-7m7 7H5\"\u002F>",1782971919733]