[{"data":1,"prerenderedAt":346},["ShallowReactive",2],{"i-simple-icons:github":3,"i-lucide:arrow-right":8,"doc-\u002Fdocs\u002Fvalidation":10,"docs-sidebar":279,"i-lucide:file-text":342,"i-lucide:arrow-left":344},{"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":271,"extension":272,"group":273,"groupOrder":50,"meta":274,"navTitle":12,"navigation":75,"order":79,"path":275,"seo":276,"stem":277,"__hash__":278},"docs\u002Fdocs\u002Fvalidation.md","Validation",{"type":14,"value":15,"toc":267},"minimark",[16,20,37,155,158,183,188,194,239,243,263],[17,18,12],"h1",{"id":19},"validation",[21,22,23,24,31,32,36],"p",{},"Every control accepts a ",[25,26,30],"a",{"href":27,"rel":28},"https:\u002F\u002Fstandardschema.dev",[29],"nofollow","Standard Schema"," validator on its ",[33,34,35],"code",{},"schema"," property. Bring Zod, Valibot, ArkType, or anything that implements the spec — there's no bespoke schema language to learn.",[38,39,44],"pre",{"className":40,"code":41,"language":42,"meta":43,"style":43},"language-ts shiki shiki-themes github-light-default ayu-dark","import { z } from 'zod';\n\nconst input = document.querySelector('wmcp-input')!;\ninput.schema = z.string().email('Enter a valid email');\n","ts","",[33,45,46,70,77,116],{"__ignoreMap":43},[47,48,51,55,59,62,66],"span",{"class":49,"line":50},"line",1,[47,52,54],{"class":53},"s7jPt","import",[47,56,58],{"class":57},"sBz_o"," { z } ",[47,60,61],{"class":53},"from",[47,63,65],{"class":64},"sxLuP"," 'zod'",[47,67,69],{"class":68},"siQKT",";\n",[47,71,73],{"class":49,"line":72},2,[47,74,76],{"emptyLinePlaceholder":75},true,"\n",[47,78,80,83,87,91,94,98,102,105,108,111,114],{"class":49,"line":79},3,[47,81,82],{"class":53},"const",[47,84,86],{"class":85},"sgp7R"," input",[47,88,90],{"class":89},"snFdW"," =",[47,92,93],{"class":57}," document",[47,95,97],{"class":96},"s0eYM",".",[47,99,101],{"class":100},"s2DMw","querySelector",[47,103,104],{"class":57},"(",[47,106,107],{"class":64},"'wmcp-input'",[47,109,110],{"class":57},")",[47,112,113],{"class":89},"!",[47,115,69],{"class":68},[47,117,119,122,124,127,130,133,135,138,141,143,146,148,151,153],{"class":49,"line":118},4,[47,120,121],{"class":57},"input",[47,123,97],{"class":96},[47,125,126],{"class":57},"schema ",[47,128,129],{"class":89},"=",[47,131,132],{"class":57}," z",[47,134,97],{"class":96},[47,136,137],{"class":100},"string",[47,139,140],{"class":57},"()",[47,142,97],{"class":96},[47,144,145],{"class":100},"email",[47,147,104],{"class":57},[47,149,150],{"class":64},"'Enter a valid email'",[47,152,110],{"class":57},[47,154,69],{"class":68},[21,156,157],{},"Validation runs on input and during native form validation. On failure the element:",[159,160,161,169,172],"ul",{},[162,163,164,165,168],"li",{},"sets ",[33,166,167],{},"aria-invalid",",",[162,170,171],{},"renders the error message in a live region (announced to assistive tech), and",[162,173,174,175,178,179,182],{},"propagates the failure to the containing ",[33,176,177],{},"\u003Cform>"," via ",[33,180,181],{},"ElementInternals",", so native form submission is blocked just like a built-in control.",[184,185,187],"h2",{"id":186},"required-fields","Required fields",[21,189,190,193],{},[33,191,192],{},"required"," is a real constraint, not just a visual marker — an empty required control fails validation and participates in native form validity.",[38,195,199],{"className":196,"code":197,"language":198,"meta":43,"style":43},"language-html shiki shiki-themes github-light-default ayu-dark","\u003Cwmcp-input label=\"Name\" name=\"name\" required>\u003C\u002Fwmcp-input>\n","html",[33,200,201],{"__ignoreMap":43},[47,202,203,207,211,215,217,220,223,225,228,231,234,236],{"class":49,"line":50},[47,204,206],{"class":205},"sqV5G","\u003C",[47,208,210],{"class":209},"sfBZl","wmcp-input",[47,212,214],{"class":213},"sI192"," label",[47,216,129],{"class":68},[47,218,219],{"class":64},"\"Name\"",[47,221,222],{"class":213}," name",[47,224,129],{"class":68},[47,226,227],{"class":64},"\"name\"",[47,229,230],{"class":213}," required",[47,232,233],{"class":205},">\u003C\u002F",[47,235,210],{"class":209},[47,237,238],{"class":205},">\n",[184,240,242],{"id":241},"a-note-on-tool-schemas","A note on tool schemas",[21,244,245,246,250,251,254,255,258,259,262],{},"Standard Schema validates ",[247,248,249],"em",{},"values"," but does not emit JSON Schema, so a control's WebMCP tool parameter schema is derived from the element (its ",[33,252,253],{},"type",", or its enumerated options for ",[33,256,257],{},"\u003Cwmcp-select>"," \u002F ",[33,260,261],{},"\u003Cwmcp-radio-group>",") rather than from the validator. Richer tool schemas are a future enhancement.",[264,265,266],"style",{},"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 .sxLuP, html code.shiki .sxLuP{--shiki-default:#0A3069;--shiki-dark:#AAD94C}html pre.shiki code .siQKT, html code.shiki .siQKT{--shiki-default:#1F2328;--shiki-dark:#BFBDB6B3}html pre.shiki code .sgp7R, html code.shiki .sgp7R{--shiki-default:#0550AE;--shiki-dark:#BFBDB6}html pre.shiki code .snFdW, html code.shiki .snFdW{--shiki-default:#CF222E;--shiki-dark:#F29668}html pre.shiki code .s0eYM, html code.shiki .s0eYM{--shiki-default:#1F2328;--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 .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":43,"searchDepth":72,"depth":72,"links":268},[269,270],{"id":186,"depth":72,"text":187},{"id":241,"depth":72,"text":242},"Bring any Standard Schema validator — Zod, Valibot, ArkType — and wire it straight into form validation.","md","Getting started",{},"\u002Fdocs\u002Fvalidation",{"title":12,"description":271},"docs\u002Fvalidation","5XBQVaClroRp9e8Nytx4R-DDUMxNVfUJmYFCbcu_088",[280,285,290,294,298,302,307,310,313,317,321,326,329,332,335,338,339],{"path":281,"title":282,"navTitle":283,"group":284,"order":50,"groupOrder":79},"\u002Fdocs\u002Felements\u002Fbutton","\u003Cwmcp-button>","Button","Interaction",{"path":286,"title":287,"navTitle":288,"group":289,"order":118,"groupOrder":72},"\u002Fdocs\u002Felements\u002Fcheckbox","\u003Cwmcp-checkbox>","Checkbox","Elements",{"path":291,"title":292,"navTitle":293,"group":284,"order":72,"groupOrder":79},"\u002Fdocs\u002Felements\u002Fdialog","\u003Cwmcp-dialog>","Dialog",{"path":295,"title":296,"navTitle":297,"group":289,"order":50,"groupOrder":72},"\u002Fdocs\u002Felements\u002Finput","\u003Cwmcp-input>","Input",{"path":299,"title":300,"navTitle":301,"group":284,"order":79,"groupOrder":79},"\u002Fdocs\u002Felements\u002Fmenu","\u003Cwmcp-menu>","Menu",{"path":303,"title":304,"navTitle":305,"group":284,"order":306,"groupOrder":79},"\u002Fdocs\u002Felements\u002Fpopover","\u003Cwmcp-popover>","Popover",5,{"path":308,"title":261,"navTitle":309,"group":289,"order":306,"groupOrder":72},"\u002Fdocs\u002Felements\u002Fradio","Radio group",{"path":311,"title":257,"navTitle":312,"group":289,"order":79,"groupOrder":72},"\u002Fdocs\u002Felements\u002Fselect","Select",{"path":314,"title":315,"navTitle":316,"group":284,"order":118,"groupOrder":79},"\u002Fdocs\u002Felements\u002Ftabs","\u003Cwmcp-tabs>","Tabs",{"path":318,"title":319,"navTitle":320,"group":289,"order":72,"groupOrder":72},"\u002Fdocs\u002Felements\u002Ftextarea","\u003Cwmcp-textarea>","Textarea",{"path":322,"title":323,"navTitle":324,"group":284,"order":325,"groupOrder":79},"\u002Fdocs\u002Felements\u002Ftoast","\u003Cwmcp-toast>","Toast",6,{"path":327,"title":328,"navTitle":328,"group":273,"order":325,"groupOrder":50},"\u002Fdocs\u002Fframeworks","React & Vue",{"path":330,"title":331,"navTitle":331,"group":273,"order":50,"groupOrder":50},"\u002Fdocs","Introduction",{"path":333,"title":334,"navTitle":334,"group":273,"order":72,"groupOrder":50},"\u002Fdocs\u002Finstallation","Installation",{"path":336,"title":337,"navTitle":337,"group":273,"order":306,"groupOrder":50},"\u002Fdocs\u002Ftesting","Testing",{"path":275,"title":12,"navTitle":12,"group":273,"order":79,"groupOrder":50},{"path":340,"title":341,"navTitle":341,"group":273,"order":118,"groupOrder":50},"\u002Fdocs\u002Fwebmcp","WebMCP exposure",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":343},"\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":345},"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"m12 19l-7-7l7-7m7 7H5\"\u002F>",1782971919735]