[{"data":1,"prerenderedAt":735},["ShallowReactive",2],{"i-simple-icons:github":3,"i-lucide:arrow-right":8,"doc-\u002Fdocs\u002Felements\u002Ftabs":10,"docs-sidebar":669,"i-lucide:file-text":727,"i-lucide:arrow-left":729,"i-lucide:panels-top-left":731,"i-lucide:arrow-up-right":733},{"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":659,"extension":660,"group":661,"groupOrder":151,"meta":662,"navTitle":663,"navigation":664,"order":183,"path":665,"seo":666,"stem":667,"__hash__":668},"docs\u002Fdocs\u002Felements\u002Ftabs.md","\u003Cwmcp-tabs>",{"type":14,"value":15,"toc":653},"minimark",[16,23,56,222,225,230,248,304,311,315,445,455,459,462,570,577,581,588,649],[17,18,20],"h1",{"id":19},"wmcp-tabs",[21,22,12],"code",{},[24,25,26,27,31,32,37,38,42,43,47,48,51,52,55],"p",{},"A tab set — and the first ",[28,29,30],"strong",{},"stateful"," interaction primitive. Where ",[33,34,36],"a",{"href":35},"\u002Fdocs\u002Felements\u002Fbutton","button",", ",[33,39,41],{"href":40},"\u002Fdocs\u002Felements\u002Fdialog","dialog",", and ",[33,44,46],{"href":45},"\u002Fdocs\u002Felements\u002Fmenu","menu"," dispatch one-shot actions, a tab set holds a persistent ",[21,49,50],{},"active"," selection (reflected as an attribute), and the agent's tool both reads it and moves it. Switching — by click, arrow keys, or agent — reveals the matching panel and fires a composed ",[21,53,54],{},"change"," event.",[57,58,63],"pre",{"className":59,"code":60,"language":61,"meta":62,"style":62},"language-html shiki shiki-themes github-light-default ayu-dark","\u003Cwmcp-tabs name=\"account\" label=\"Account\" active=\"overview\" expose>\n  \u003Csection tab=\"overview\" tab-label=\"Overview\">Your account at a glance.\u003C\u002Fsection>\n  \u003Csection tab=\"usage\" tab-label=\"Usage\">12,480 requests this month.\u003C\u002Fsection>\n  \u003Csection tab=\"billing\" tab-label=\"Billing\">Pro plan · renews Jul 28.\u003C\u002Fsection>\n\u003C\u002Fwmcp-tabs>\n","html","",[21,64,65,111,149,181,213],{"__ignoreMap":62},[66,67,70,74,77,81,85,89,92,94,97,100,102,105,108],"span",{"class":68,"line":69},"line",1,[66,71,73],{"class":72},"sqV5G","\u003C",[66,75,19],{"class":76},"sfBZl",[66,78,80],{"class":79},"sI192"," name",[66,82,84],{"class":83},"siQKT","=",[66,86,88],{"class":87},"sxLuP","\"account\"",[66,90,91],{"class":79}," label",[66,93,84],{"class":83},[66,95,96],{"class":87},"\"Account\"",[66,98,99],{"class":79}," active",[66,101,84],{"class":83},[66,103,104],{"class":87},"\"overview\"",[66,106,107],{"class":79}," expose",[66,109,110],{"class":72},">\n",[66,112,114,117,120,123,125,127,130,132,135,138,142,145,147],{"class":68,"line":113},2,[66,115,116],{"class":72},"  \u003C",[66,118,119],{"class":76},"section",[66,121,122],{"class":79}," tab",[66,124,84],{"class":83},[66,126,104],{"class":87},[66,128,129],{"class":79}," tab-label",[66,131,84],{"class":83},[66,133,134],{"class":87},"\"Overview\"",[66,136,137],{"class":72},">",[66,139,141],{"class":140},"sBz_o","Your account at a glance.",[66,143,144],{"class":72},"\u003C\u002F",[66,146,119],{"class":76},[66,148,110],{"class":72},[66,150,152,154,156,158,160,163,165,167,170,172,175,177,179],{"class":68,"line":151},3,[66,153,116],{"class":72},[66,155,119],{"class":76},[66,157,122],{"class":79},[66,159,84],{"class":83},[66,161,162],{"class":87},"\"usage\"",[66,164,129],{"class":79},[66,166,84],{"class":83},[66,168,169],{"class":87},"\"Usage\"",[66,171,137],{"class":72},[66,173,174],{"class":140},"12,480 requests this month.",[66,176,144],{"class":72},[66,178,119],{"class":76},[66,180,110],{"class":72},[66,182,184,186,188,190,192,195,197,199,202,204,207,209,211],{"class":68,"line":183},4,[66,185,116],{"class":72},[66,187,119],{"class":76},[66,189,122],{"class":79},[66,191,84],{"class":83},[66,193,194],{"class":87},"\"billing\"",[66,196,129],{"class":79},[66,198,84],{"class":83},[66,200,201],{"class":87},"\"Billing\"",[66,203,137],{"class":72},[66,205,206],{"class":140},"Pro plan · renews Jul 28.",[66,208,144],{"class":72},[66,210,119],{"class":76},[66,212,110],{"class":72},[66,214,216,218,220],{"class":68,"line":215},5,[66,217,144],{"class":72},[66,219,19],{"class":76},[66,221,110],{"class":72},[223,224],"tabs-demo",{},[226,227,229],"h2",{"id":228},"panels","Panels",[24,231,232,233,236,237,240,241,243,244,247],{},"Panels are declarative light-DOM children carrying a ",[21,234,235],{},"tab"," attribute; the tablist is derived from them. Each panel takes an optional ",[21,238,239],{},"tab-label"," (falling back to the ",[21,242,235],{}," value) and ",[21,245,246],{},"tab-disabled",":",[249,250,251,264],"table",{},[252,253,254],"thead",{},[255,256,257,261],"tr",{},[258,259,260],"th",{},"Panel attribute",[258,262,263],{},"Description",[265,266,267,283,295],"tbody",{},[255,268,269,274],{},[270,271,272],"td",{},[21,273,235],{},[270,275,276,277,279,280,282],{},"The tab's value — used in ",[21,278,50],{},", the ",[21,281,54],{}," event, and the tool enum.",[255,284,285,289],{},[270,286,287],{},[21,288,239],{},[270,290,291,292,294],{},"The visible tab label (defaults to the ",[21,293,235],{}," value).",[255,296,297,301],{},[270,298,299],{},[21,300,246],{},[270,302,303],{},"Renders the tab but blocks selection; excluded from the tool enum.",[24,305,306,307,310],{},"The active panel is shown; the rest get ",[21,308,309],{},"hidden",". Keyboard follows the ARIA tabs pattern — arrow keys (with Home\u002FEnd) move the active tab and focus.",[226,312,314],{"id":313},"element-attributes","Element attributes",[249,316,317,332],{},[252,318,319],{},[255,320,321,324,327,330],{},[258,322,323],{},"Attribute",[258,325,326],{},"Type",[258,328,329],{},"Default",[258,331,263],{},[265,333,334,351,368,388,413,429],{},[255,335,336,340,345,348],{},[270,337,338],{},[21,339,50],{},[270,341,342],{},[21,343,344],{},"string",[270,346,347],{},"first tab",[270,349,350],{},"The value of the active tab (reflected — the persistent state).",[255,352,353,358,362,365],{},[270,354,355],{},[21,356,357],{},"label",[270,359,360],{},[21,361,344],{},[270,363,364],{},"—",[270,366,367],{},"Accessible name for the tablist, and the noun in the tool description.",[255,369,370,375,379,381],{},[270,371,372],{},[21,373,374],{},"name",[270,376,377],{},[21,378,344],{},[270,380,364],{},[270,382,383,384,387],{},"Identifier used for the default tool name (",[21,385,386],{},"switch_\u003Cname>",").",[255,389,390,395,400,405],{},[270,391,392],{},[21,393,394],{},"expose",[270,396,397],{},[21,398,399],{},"boolean",[270,401,402],{},[21,403,404],{},"false",[270,406,407,408,412],{},"Register a ",[33,409,411],{"href":410},"\u002Fdocs\u002Fwebmcp","WebMCP tool"," that switches the active tab.",[255,414,415,420,424,426],{},[270,416,417],{},[21,418,419],{},"tool-name",[270,421,422],{},[21,423,344],{},[270,425,364],{},[270,427,428],{},"Override the generated tool name.",[255,430,431,436,440,442],{},[270,432,433],{},[21,434,435],{},"tool-description",[270,437,438],{},[21,439,344],{},[270,441,364],{},[270,443,444],{},"Override the generated tool description.",[24,446,447,448,450,451,454],{},"Switching fires ",[21,449,54],{}," with ",[21,452,453],{},"detail: { value }",".",[226,456,458],{"id":457},"tool-shape","Tool shape",[24,460,461],{},"The tool takes the tab to switch to, constrained to the enabled values:",[57,463,467],{"className":464,"code":465,"language":466,"meta":62,"style":62},"language-json shiki shiki-themes github-light-default ayu-dark","{\n  \"type\": \"object\",\n  \"properties\": {\n    \"tab\": { \"type\": \"string\", \"enum\": [\"overview\", \"usage\", \"billing\"] }\n  },\n  \"required\": [\"tab\"]\n}\n","json",[21,468,469,474,487,497,541,548,564],{"__ignoreMap":62},[66,470,471],{"class":68,"line":69},[66,472,473],{"class":140},"{\n",[66,475,476,479,481,484],{"class":68,"line":113},[66,477,478],{"class":76},"  \"type\"",[66,480,247],{"class":83},[66,482,483],{"class":87}," \"object\"",[66,485,486],{"class":83},",\n",[66,488,489,492,494],{"class":68,"line":151},[66,490,491],{"class":76},"  \"properties\"",[66,493,247],{"class":83},[66,495,496],{"class":140}," {\n",[66,498,499,502,504,507,510,512,515,518,521,523,526,528,530,533,535,538],{"class":68,"line":183},[66,500,501],{"class":76},"    \"tab\"",[66,503,247],{"class":83},[66,505,506],{"class":140}," { ",[66,508,509],{"class":76},"\"type\"",[66,511,247],{"class":83},[66,513,514],{"class":87}," \"string\"",[66,516,517],{"class":83},",",[66,519,520],{"class":76}," \"enum\"",[66,522,247],{"class":83},[66,524,525],{"class":140}," [",[66,527,104],{"class":87},[66,529,517],{"class":83},[66,531,532],{"class":87}," \"usage\"",[66,534,517],{"class":83},[66,536,537],{"class":87}," \"billing\"",[66,539,540],{"class":140},"] }\n",[66,542,543,546],{"class":68,"line":215},[66,544,545],{"class":140},"  }",[66,547,486],{"class":83},[66,549,551,554,556,558,561],{"class":68,"line":550},6,[66,552,553],{"class":76},"  \"required\"",[66,555,247],{"class":83},[66,557,525],{"class":140},[66,559,560],{"class":87},"\"tab\"",[66,562,563],{"class":140},"]\n",[66,565,567],{"class":68,"line":566},7,[66,568,569],{"class":140},"}\n",[24,571,572,573,576],{},"The ",[21,574,575],{},"enum"," tracks the live tabs, and the result reports which tab is now active — so an agent can read the state it just set. Switching to an unknown or disabled tab returns an error result.",[226,578,580],{"id":579},"theming","Theming",[24,582,583,584,587],{},"Tablist, tabs, and the active indicator are themed through ",[21,585,586],{},"--tabs-*"," custom properties:",[57,589,593],{"className":590,"code":591,"language":592,"meta":62,"style":62},"language-css shiki shiki-themes github-light-default ayu-dark",":root {\n  --tabs-indicator: var(--brand);\n  --tabs-tab-text-active: var(--foreground);\n}\n","css",[21,594,595,603,627,645],{"__ignoreMap":62},[66,596,597,601],{"class":68,"line":69},[66,598,600],{"class":599},"sybcr",":root",[66,602,496],{"class":140},[66,604,605,609,611,615,618,621,624],{"class":68,"line":113},[66,606,608],{"class":607},"sCHdd","  --tabs-indicator",[66,610,247],{"class":83},[66,612,614],{"class":613},"sAJRi"," var",[66,616,617],{"class":140},"(",[66,619,620],{"class":607},"--brand",[66,622,623],{"class":140},")",[66,625,626],{"class":83},";\n",[66,628,629,632,634,636,638,641,643],{"class":68,"line":151},[66,630,631],{"class":607},"  --tabs-tab-text-active",[66,633,247],{"class":83},[66,635,614],{"class":613},[66,637,617],{"class":140},[66,639,640],{"class":607},"--foreground",[66,642,623],{"class":140},[66,644,626],{"class":83},[66,646,647],{"class":68,"line":183},[66,648,569],{"class":140},[650,651,652],"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 .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}",{"title":62,"searchDepth":113,"depth":113,"links":654},[655,656,657,658],{"id":228,"depth":113,"text":229},{"id":313,"depth":113,"text":314},{"id":457,"depth":113,"text":458},{"id":579,"depth":113,"text":580},"A tab set whose exposed action switches a persistent active tab — the first stateful interaction primitive.","md","Interaction",{},"Tabs",true,"\u002Fdocs\u002Felements\u002Ftabs",{"title":12,"description":659},"docs\u002Felements\u002Ftabs","P4P5-o2UP8EqefGtcNzCrl7t9DQXUjuqcfbU33cZ1OY",[670,673,678,681,685,688,692,696,700,701,705,709,713,716,719,722,725],{"path":35,"title":671,"navTitle":672,"group":661,"order":69,"groupOrder":151},"\u003Cwmcp-button>","Button",{"path":674,"title":675,"navTitle":676,"group":677,"order":183,"groupOrder":113},"\u002Fdocs\u002Felements\u002Fcheckbox","\u003Cwmcp-checkbox>","Checkbox","Elements",{"path":40,"title":679,"navTitle":680,"group":661,"order":113,"groupOrder":151},"\u003Cwmcp-dialog>","Dialog",{"path":682,"title":683,"navTitle":684,"group":677,"order":69,"groupOrder":113},"\u002Fdocs\u002Felements\u002Finput","\u003Cwmcp-input>","Input",{"path":45,"title":686,"navTitle":687,"group":661,"order":151,"groupOrder":151},"\u003Cwmcp-menu>","Menu",{"path":689,"title":690,"navTitle":691,"group":661,"order":215,"groupOrder":151},"\u002Fdocs\u002Felements\u002Fpopover","\u003Cwmcp-popover>","Popover",{"path":693,"title":694,"navTitle":695,"group":677,"order":215,"groupOrder":113},"\u002Fdocs\u002Felements\u002Fradio","\u003Cwmcp-radio-group>","Radio group",{"path":697,"title":698,"navTitle":699,"group":677,"order":151,"groupOrder":113},"\u002Fdocs\u002Felements\u002Fselect","\u003Cwmcp-select>","Select",{"path":665,"title":12,"navTitle":663,"group":661,"order":183,"groupOrder":151},{"path":702,"title":703,"navTitle":704,"group":677,"order":113,"groupOrder":113},"\u002Fdocs\u002Felements\u002Ftextarea","\u003Cwmcp-textarea>","Textarea",{"path":706,"title":707,"navTitle":708,"group":661,"order":550,"groupOrder":151},"\u002Fdocs\u002Felements\u002Ftoast","\u003Cwmcp-toast>","Toast",{"path":710,"title":711,"navTitle":711,"group":712,"order":550,"groupOrder":69},"\u002Fdocs\u002Fframeworks","React & Vue","Getting started",{"path":714,"title":715,"navTitle":715,"group":712,"order":69,"groupOrder":69},"\u002Fdocs","Introduction",{"path":717,"title":718,"navTitle":718,"group":712,"order":113,"groupOrder":69},"\u002Fdocs\u002Finstallation","Installation",{"path":720,"title":721,"navTitle":721,"group":712,"order":215,"groupOrder":69},"\u002Fdocs\u002Ftesting","Testing",{"path":723,"title":724,"navTitle":724,"group":712,"order":151,"groupOrder":69},"\u002Fdocs\u002Fvalidation","Validation",{"path":410,"title":726,"navTitle":726,"group":712,"order":183,"groupOrder":69},"WebMCP exposure",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":728},"\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":730},"\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":732},"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Crect width=\"18\" height=\"18\" x=\"3\" y=\"3\" rx=\"2\"\u002F>\u003Cpath d=\"M3 9h18M9 21V9\"\u002F>\u003C\u002Fg>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":734},"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M7 7h10v10M7 17L17 7\"\u002F>",1782971919412]