[{"data":1,"prerenderedAt":306},["ShallowReactive",2],{"i-simple-icons:github":3,"i-lucide:arrow-right":8,"doc-\u002Fdocs":10,"docs-sidebar":257,"i-lucide:file-text":304},{"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":247,"extension":248,"group":249,"groupOrder":250,"meta":251,"navTitle":12,"navigation":252,"order":250,"path":253,"seo":254,"stem":255,"__hash__":256},"docs\u002Fdocs\u002Findex.md","Introduction",{"type":14,"value":15,"toc":240},"minimark",[16,20,34,37,146,162,167,170,173,177,187,207,211],[17,18,12],"h1",{"id":19},"introduction",[21,22,23,27,28,33],"p",{},[24,25,26],"strong",{},"webmcpui"," is a framework-agnostic, WebMCP-native web component library. Every element is a proper, accessible HTML control first and, when you opt in, also registers an imperative ",[29,30,32],"a",{"href":31},"\u002Fdocs\u002Fwebmcp","WebMCP"," tool an agent can call.",[21,35,36],{},"Three families of primitives:",[38,39,40,78,124],"ul",{},[41,42,43,46,47,51,52,56,57,56,60,56,63,56,66,69,70,73,74,77],"li",{},[24,44,45],{},"Form controls"," expose a ",[48,49,50],"em",{},"value"," an agent can set — ",[53,54,55],"code",{},"\u003Cwmcp-input>",", ",[53,58,59],{},"\u003Cwmcp-textarea>",[53,61,62],{},"\u003Cwmcp-select>",[53,64,65],{},"\u003Cwmcp-checkbox>",[53,67,68],{},"\u003Cwmcp-radio>"," \u002F ",[53,71,72],{},"\u003Cwmcp-radio-group>",". Shared behavior (form association, validation, WebMCP exposure, theming) lives in a ",[53,75,76],{},"WmcpFormControl"," base.",[41,79,80,83,84,87,88,56,91,56,94,56,97,56,100,56,103,56,106,109,110,113,114,117,118,69,121,77],{},[24,81,82],{},"Interaction primitives"," expose an ",[48,85,86],{},"action"," an agent can trigger — ",[53,89,90],{},"\u003Cwmcp-button>",[53,92,93],{},"\u003Cwmcp-dialog>",[53,95,96],{},"\u003Cwmcp-menu>",[53,98,99],{},"\u003Cwmcp-tabs>",[53,101,102],{},"\u003Cwmcp-popover>",[53,104,105],{},"\u003Cwmcp-switch>",[53,107,108],{},"\u003Cwmcp-tooltip>"," — or, for ",[53,111,112],{},"\u003Cwmcp-toast>",", a ",[48,115,116],{},"reading"," an agent can perceive. They share a ",[53,119,120],{},"WmcpAction",[53,122,123],{},"WmcpExposable",[41,125,126,129,130,56,133,56,136,56,139,56,142,145],{},[24,127,128],{},"Presentational primitives"," are accessible, themed controls with no agent surface — ",[53,131,132],{},"\u003Cwmcp-badge>",[53,134,135],{},"\u003Cwmcp-separator>",[53,137,138],{},"\u003Cwmcp-alert>",[53,140,141],{},"\u003Cwmcp-progress>",[53,143,144],{},"\u003Cwmcp-avatar>",".",[21,147,148,149,155,156,161],{},"Building in React or Vue? ",[29,150,152],{"href":151},"\u002Fdocs\u002Fframeworks",[53,153,154],{},"@webmcpui\u002Freact"," and ",[29,157,158],{"href":151},[53,159,160],{},"@webmcpui\u002Fvue"," wrap these elements with typed, idiomatic components — same behavior, framework-native ergonomics.",[163,164,166],"h2",{"id":165},"why-it-exists","Why it exists",[21,168,169],{},"The same control a person operates by hand, an agent should be able to operate by calling a tool — fill a field, click a button, open a dialog, switch a tab, or read a notification. webmcpui's elements are good, accessible controls first; agent-exposure is additive and opt-in.",[21,171,172],{},"It's all feature-detected: with no agent present (the common case today), the WebMCP layer is a complete no-op, so your controls are always good HTML.",[163,174,176],{"id":175},"one-source-of-truth-two-channels","One source of truth, two channels",[21,178,179,180,186],{},"Vanilla custom elements built with ",[29,181,185],{"href":182,"rel":183},"https:\u002F\u002Flit.dev",[184],"nofollow","Lit",", distributed two ways:",[38,188,189,200],{},[41,190,191,192,195,196,199],{},"an ",[24,193,194],{},"ESM package"," for build tools (",[53,197,198],{},"@webmcpui\u002Fcore","), and",[41,201,202,203,206],{},"a single-file ",[24,204,205],{},"CDN bundle"," for no-build environments (Webflow, WordPress, plain HTML).",[163,208,210],{"id":209},"next-steps","Next steps",[38,212,213,220,227,233],{},[41,214,215,219],{},[29,216,218],{"href":217},"\u002Fdocs\u002Finstallation","Installation"," — add it to your project, with or without a build step.",[41,221,222,226],{},[29,223,225],{"href":224},"\u002Fdocs\u002Fvalidation","Validation"," — bring any Standard Schema validator.",[41,228,229,232],{},[29,230,231],{"href":31},"WebMCP exposure"," — how elements become agent tools.",[41,234,235,239],{},[29,236,238],{"href":237},"\u002Fdocs\u002Ftesting","Testing"," — exercise exposure with the fake agent.",{"title":241,"searchDepth":242,"depth":242,"links":243},"",2,[244,245,246],{"id":165,"depth":242,"text":166},{"id":175,"depth":242,"text":176},{"id":209,"depth":242,"text":210},"Agent-aware web components for the WebMCP era — framework-agnostic form and interaction primitives with Standard Schema validation.","md","Getting started",1,{},true,"\u002Fdocs",{"title":12,"description":247},"docs\u002Findex","FAgKBJNSCkKe2O0cbt553OC6UJse2KTg1WZ-qHe1oGo",[258,263,268,271,274,277,281,284,287,290,293,297,299,300,301,302,303],{"path":259,"title":90,"navTitle":260,"group":261,"order":250,"groupOrder":262},"\u002Fdocs\u002Felements\u002Fbutton","Button","Interaction",3,{"path":264,"title":65,"navTitle":265,"group":266,"order":267,"groupOrder":242},"\u002Fdocs\u002Felements\u002Fcheckbox","Checkbox","Elements",4,{"path":269,"title":93,"navTitle":270,"group":261,"order":242,"groupOrder":262},"\u002Fdocs\u002Felements\u002Fdialog","Dialog",{"path":272,"title":55,"navTitle":273,"group":266,"order":250,"groupOrder":242},"\u002Fdocs\u002Felements\u002Finput","Input",{"path":275,"title":96,"navTitle":276,"group":261,"order":262,"groupOrder":262},"\u002Fdocs\u002Felements\u002Fmenu","Menu",{"path":278,"title":102,"navTitle":279,"group":261,"order":280,"groupOrder":262},"\u002Fdocs\u002Felements\u002Fpopover","Popover",5,{"path":282,"title":72,"navTitle":283,"group":266,"order":280,"groupOrder":242},"\u002Fdocs\u002Felements\u002Fradio","Radio group",{"path":285,"title":62,"navTitle":286,"group":266,"order":262,"groupOrder":242},"\u002Fdocs\u002Felements\u002Fselect","Select",{"path":288,"title":99,"navTitle":289,"group":261,"order":267,"groupOrder":262},"\u002Fdocs\u002Felements\u002Ftabs","Tabs",{"path":291,"title":59,"navTitle":292,"group":266,"order":242,"groupOrder":242},"\u002Fdocs\u002Felements\u002Ftextarea","Textarea",{"path":294,"title":112,"navTitle":295,"group":261,"order":296,"groupOrder":262},"\u002Fdocs\u002Felements\u002Ftoast","Toast",6,{"path":151,"title":298,"navTitle":298,"group":249,"order":296,"groupOrder":250},"React & Vue",{"path":253,"title":12,"navTitle":12,"group":249,"order":250,"groupOrder":250},{"path":217,"title":218,"navTitle":218,"group":249,"order":242,"groupOrder":250},{"path":237,"title":238,"navTitle":238,"group":249,"order":280,"groupOrder":250},{"path":224,"title":225,"navTitle":225,"group":249,"order":262,"groupOrder":250},{"path":31,"title":231,"navTitle":231,"group":249,"order":267,"groupOrder":250},{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":305},"\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>",1782971919410]