[{"data":1,"prerenderedAt":386},["ShallowReactive",2],{"i-simple-icons:github":3,"i-lucide:arrow-right":8,"doc-\u002Fdocs\u002Finstallation":10,"docs-sidebar":344,"doc-surround-\u002Fdocs\u002Finstallation":379,"i-lucide:arrow-left":384},{"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":336,"extension":337,"group":338,"groupOrder":43,"meta":339,"navTitle":12,"navigation":104,"order":86,"path":340,"seo":341,"stem":342,"__hash__":343},"docs\u002Fdocs\u002Finstallation.md","Installation",{"type":14,"value":15,"toc":331},"minimark",[16,20,24,29,58,118,166,178,191,195,202,291,295,301,327],[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 github-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},"sScJk","pnpm",[40,49,51],{"class":50},"sZZnC"," 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 github-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,84,99,106],{"__ignoreMap":35},[40,66,67,71,75,78,81],{"class":42,"line":43},[40,68,70],{"class":69},"szBVR","import",[40,72,74],{"class":73},"sVt8B"," { defineComponents } ",[40,76,77],{"class":69},"from",[40,79,80],{"class":50}," '@webmcpui\u002Fcore'",[40,82,83],{"class":73},";\n",[40,85,87,89,92,95],{"class":42,"line":86},2,[40,88,70],{"class":69},[40,90,91],{"class":50}," '@webmcpui\u002Ftokens\u002Fcss'",[40,93,94],{"class":73},"; ",[40,96,98],{"class":97},"sJ8bj","\u002F\u002F theme tokens (CSS custom properties)\n",[40,100,102],{"class":42,"line":101},3,[40,103,105],{"emptyLinePlaceholder":104},true,"\n",[40,107,109,112,115],{"class":42,"line":108},4,[40,110,111],{"class":46},"defineComponents",[40,113,114],{"class":73},"(); ",[40,116,117],{"class":97},"\u002F\u002F registers \u003Cwmcp-input> and the other \u003Cwmcp-*> elements\n",[30,119,123],{"className":120,"code":121,"language":122,"meta":35,"style":35},"language-html shiki shiki-themes github-light github-dark","\u003Cwmcp-input label=\"Email\" name=\"email\" type=\"email\">\u003C\u002Fwmcp-input>\n","html",[37,124,125],{"__ignoreMap":35},[40,126,127,130,134,137,140,143,146,148,151,154,156,158,161,163],{"class":42,"line":43},[40,128,129],{"class":73},"\u003C",[40,131,133],{"class":132},"s9eBZ","wmcp-input",[40,135,136],{"class":46}," label",[40,138,139],{"class":73},"=",[40,141,142],{"class":50},"\"Email\"",[40,144,145],{"class":46}," name",[40,147,139],{"class":73},[40,149,150],{"class":50},"\"email\"",[40,152,153],{"class":46}," type",[40,155,139],{"class":73},[40,157,150],{"class":50},[40,159,160],{"class":73},">\u003C\u002F",[40,162,133],{"class":132},[40,164,165],{"class":73},">\n",[21,167,168,169,173,174,177],{},"Importing the package does ",[170,171,172],"strong",{},"not"," register the elements — you call ",[37,175,176],{},"defineComponents()"," so you control timing. (The CDN bundle below registers automatically.)",[179,180,181],"blockquote",{},[21,182,183,184,186,187,190],{},"In an SSR framework, call ",[37,185,176],{}," on the client only — custom elements need the DOM. In Nuxt, for example, do it from a ",[37,188,189],{},".client.ts"," plugin.",[25,192,194],{"id":193},"no-build-drop-a-script-tag","No build? Drop a script tag",[21,196,197,198,201],{},"For Webflow, WordPress, or hand-written HTML — one tag, every ",[37,199,200],{},"\u003Cwmcp-*>"," element auto-registers:",[30,203,205],{"className":120,"code":204,"language":122,"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,206,207,222,235,256,260],{"__ignoreMap":35},[40,208,209,211,214,217,219],{"class":42,"line":43},[40,210,129],{"class":73},[40,212,213],{"class":132},"link",[40,215,216],{"class":46}," rel",[40,218,139],{"class":73},[40,220,221],{"class":50},"\"stylesheet\"\n",[40,223,224,227,229,232],{"class":42,"line":86},[40,225,226],{"class":46},"  href",[40,228,139],{"class":73},[40,230,231],{"class":50},"\"https:\u002F\u002Fcdn.jsdelivr.net\u002Fnpm\u002F@webmcpui\u002Ftokens\u002Fdist\u002Fcss\u002Ftokens.css\"",[40,233,234],{"class":73}," \u002F>\n",[40,236,237,239,242,245,247,250,252,254],{"class":42,"line":101},[40,238,129],{"class":73},[40,240,241],{"class":132},"script",[40,243,244],{"class":46}," src",[40,246,139],{"class":73},[40,248,249],{"class":50},"\"https:\u002F\u002Fcdn.jsdelivr.net\u002Fnpm\u002F@webmcpui\u002Fcore\u002Fdist\u002Fwebmcpui.global.js\"",[40,251,160],{"class":73},[40,253,241],{"class":132},[40,255,165],{"class":73},[40,257,258],{"class":42,"line":108},[40,259,105],{"emptyLinePlaceholder":104},[40,261,263,265,267,269,271,273,275,277,279,281,283,285,287,289],{"class":42,"line":262},5,[40,264,129],{"class":73},[40,266,133],{"class":132},[40,268,136],{"class":46},[40,270,139],{"class":73},[40,272,142],{"class":50},[40,274,145],{"class":46},[40,276,139],{"class":73},[40,278,150],{"class":50},[40,280,153],{"class":46},[40,282,139],{"class":73},[40,284,150],{"class":50},[40,286,160],{"class":73},[40,288,133],{"class":132},[40,290,165],{"class":73},[25,292,294],{"id":293},"frameworks","Frameworks",[21,296,297,298,300],{},"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,299,200],{}," as its own components:",[302,303,304,315,321],"ul",{},[305,306,307,310,311,314],"li",{},[170,308,309],{},"Vue \u002F Nuxt"," — set ",[37,312,313],{},"compilerOptions.isCustomElement = (tag) => tag.startsWith('wmcp-')",".",[305,316,317,320],{},[170,318,319],{},"React"," (19+) — custom elements and their props\u002Fattributes work directly.",[305,322,323,326],{},[170,324,325],{},"Svelte \u002F SolidJS \u002F Angular"," — supported with each framework's standard custom-element handling.",[328,329,330],"style",{},"html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}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 .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}",{"title":35,"searchDepth":86,"depth":86,"links":332},[333,334,335],{"id":27,"depth":86,"text":28},{"id":193,"depth":86,"text":194},{"id":293,"depth":86,"text":294},"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":336},"docs\u002Finstallation","33qKg5eq5u8MPXmEIwVGJkpdjOayAcCGboY2ixe8kjI",[345,350,354,358,362,366,369,370,373,376],{"path":346,"title":347,"navTitle":348,"group":349,"order":108,"groupOrder":86},"\u002Fdocs\u002Felements\u002Fcheckbox","\u003Cwmcp-checkbox>","Checkbox","Elements",{"path":351,"title":352,"navTitle":353,"group":349,"order":43,"groupOrder":86},"\u002Fdocs\u002Felements\u002Finput","\u003Cwmcp-input>","Input",{"path":355,"title":356,"navTitle":357,"group":349,"order":262,"groupOrder":86},"\u002Fdocs\u002Felements\u002Fradio","\u003Cwmcp-radio-group>","Radio group",{"path":359,"title":360,"navTitle":361,"group":349,"order":101,"groupOrder":86},"\u002Fdocs\u002Felements\u002Fselect","\u003Cwmcp-select>","Select",{"path":363,"title":364,"navTitle":365,"group":349,"order":86,"groupOrder":86},"\u002Fdocs\u002Felements\u002Ftextarea","\u003Cwmcp-textarea>","Textarea",{"path":367,"title":368,"navTitle":368,"group":338,"order":43,"groupOrder":43},"\u002Fdocs","Introduction",{"path":340,"title":12,"navTitle":12,"group":338,"order":86,"groupOrder":43},{"path":371,"title":372,"navTitle":372,"group":338,"order":262,"groupOrder":43},"\u002Fdocs\u002Ftesting","Testing",{"path":374,"title":375,"navTitle":375,"group":338,"order":101,"groupOrder":43},"\u002Fdocs\u002Fvalidation","Validation",{"path":377,"title":378,"navTitle":378,"group":338,"order":108,"groupOrder":43},"\u002Fdocs\u002Fwebmcp","WebMCP exposure",[380,382],{"title":364,"path":363,"stem":381,"navTitle":365,"children":-1},"docs\u002Felements\u002Ftextarea",{"title":372,"path":371,"stem":383,"navTitle":372,"children":-1},"docs\u002Ftesting",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":385},"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"m12 19l-7-7l7-7m7 7H5\"\u002F>",1781416228942]