[{"data":1,"prerenderedAt":336},["ShallowReactive",2],{"docs-nav-pkg":3,"docs-page-pkg-\u002Fpkg\u002Ftabs":133},[4,8,12,15,18,21,24,27,30,33,36,39,42,45,48,51,54,57,60,63,66,69,72,75,78,81,84,87,90,93,96,99,102,105,108,111,114,117,121,124,127,130],{"path":5,"title":6,"section":7},"\u002Fpkg","Overview","Start",{"path":9,"title":10,"section":11},"\u002Fpkg\u002Faccordion","Accordion","Components",{"path":13,"title":14,"section":11},"\u002Fpkg\u002Falert-dialog","Alert Dialog",{"path":16,"title":17,"section":11},"\u002Fpkg\u002Fautocomplete","Autocomplete",{"path":19,"title":20,"section":11},"\u002Fpkg\u002Favatar","Avatar",{"path":22,"title":23,"section":11},"\u002Fpkg\u002Fbutton","Button",{"path":25,"title":26,"section":11},"\u002Fpkg\u002Fcheckbox","Checkbox",{"path":28,"title":29,"section":11},"\u002Fpkg\u002Fcheckbox-group","Checkbox Group",{"path":31,"title":32,"section":11},"\u002Fpkg\u002Fcollapsible","Collapsible",{"path":34,"title":35,"section":11},"\u002Fpkg\u002Fcombobox","Combobox",{"path":37,"title":38,"section":11},"\u002Fpkg\u002Fcontext-menu","Context Menu",{"path":40,"title":41,"section":11},"\u002Fpkg\u002Fdialog","Dialog",{"path":43,"title":44,"section":11},"\u002Fpkg\u002Fdrawer","Drawer",{"path":46,"title":47,"section":11},"\u002Fpkg\u002Ffield","Field",{"path":49,"title":50,"section":11},"\u002Fpkg\u002Ffieldset","Fieldset",{"path":52,"title":53,"section":11},"\u002Fpkg\u002Fform","Form",{"path":55,"title":56,"section":11},"\u002Fpkg\u002Ficon-picker","Icon picker",{"path":58,"title":59,"section":11},"\u002Fpkg\u002Finput","Input",{"path":61,"title":62,"section":11},"\u002Fpkg\u002Fmenu","Menu",{"path":64,"title":65,"section":11},"\u002Fpkg\u002Fmenubar","Menubar",{"path":67,"title":68,"section":11},"\u002Fpkg\u002Fmeter","Meter",{"path":70,"title":71,"section":11},"\u002Fpkg\u002Fnavigation-menu","Navigation Menu",{"path":73,"title":74,"section":11},"\u002Fpkg\u002Fnumber-field","Number Field",{"path":76,"title":77,"section":11},"\u002Fpkg\u002Fotp-field","OTP Field",{"path":79,"title":80,"section":11},"\u002Fpkg\u002Fplot","Plot",{"path":82,"title":83,"section":11},"\u002Fpkg\u002Fpopover","Popover",{"path":85,"title":86,"section":11},"\u002Fpkg\u002Fpreview-card","Preview Card",{"path":88,"title":89,"section":11},"\u002Fpkg\u002Fprogress","Progress",{"path":91,"title":92,"section":11},"\u002Fpkg\u002Fradio-group","Radio Group",{"path":94,"title":95,"section":11},"\u002Fpkg\u002Fscroll-area","Scroll Area",{"path":97,"title":98,"section":11},"\u002Fpkg\u002Fselect","Select",{"path":100,"title":101,"section":11},"\u002Fpkg\u002Fseparator","Separator",{"path":103,"title":104,"section":11},"\u002Fpkg\u002Fsidebar","Sidebar",{"path":106,"title":107,"section":11},"\u002Fpkg\u002Fslider","Slider",{"path":109,"title":110,"section":11},"\u002Fpkg\u002Fswitch","Switch",{"path":112,"title":113,"section":11},"\u002Fpkg\u002Ftabs","Tabs",{"path":115,"title":116,"section":11},"\u002Fpkg\u002Ftoast","Toast",{"path":118,"title":119,"section":120},"\u002Fpkg\u002Fapi","Api","Runtime",{"path":122,"title":123,"section":120},"\u002Fpkg\u002Fauth","Auth",{"path":125,"title":126,"section":120},"\u002Fpkg\u002Fblob","Blob",{"path":128,"title":129,"section":120},"\u002Fpkg\u002Fchannels","Channels",{"path":131,"title":132,"section":120},"\u002Fpkg\u002Fdb","Db",{"id":134,"title":113,"body":135,"description":329,"extension":330,"meta":331,"navigation":332,"path":112,"section":11,"seo":333,"stem":334,"__hash__":335},"pkg\u002Fpkg\u002Ftabs.md",{"type":136,"value":137,"toc":325},"minimark",[138,142,145,150,239,243,321],[139,140,141],"p",{},"A component for toggling between related panels on the same page. There is no border. The selected tab rests on the wash, hover and focus shift that wash, and the indicator is the accent. Tabs are Regular and panels are Light.",[143,144],"base-tabs-demo",{},[146,147,149],"h2",{"id":148},"anatomy","Anatomy",[151,152,157],"pre",{"className":153,"code":154,"language":155,"meta":156,"style":156},"language-vue shiki shiki-themes github-light github-dark","\u003CUiTabsRoot default-value=\"overview\">\n  \u003CUiTabsList>\n    \u003CUiTabsTab value=\"overview\">Overview\u003C\u002FUiTabsTab>\n    \u003CUiTabsTab value=\"projects\">Projects\u003C\u002FUiTabsTab>\n    \u003CUiTabsIndicator \u002F>\n  \u003C\u002FUiTabsList>\n  \u003CUiTabsPanel value=\"overview\">Workspace stats and activity.\u003C\u002FUiTabsPanel>\n  \u003CUiTabsPanel value=\"projects\">Milestones and deadlines.\u003C\u002FUiTabsPanel>\n\u003C\u002FUiTabsRoot>\n","vue","",[158,159,160,187,193,199,205,211,217,223,229],"code",{"__ignoreMap":156},[161,162,165,169,173,177,180,184],"span",{"class":163,"line":164},"line",1,[161,166,168],{"class":167},"sVt8B","\u003C",[161,170,172],{"class":171},"s9eBZ","UiTabsRoot",[161,174,176],{"class":175},"sScJk"," default-value",[161,178,179],{"class":167},"=",[161,181,183],{"class":182},"sZZnC","\"overview\"",[161,185,186],{"class":167},">\n",[161,188,190],{"class":163,"line":189},2,[161,191,192],{"class":167},"  \u003CUiTabsList>\n",[161,194,196],{"class":163,"line":195},3,[161,197,198],{"class":167},"    \u003CUiTabsTab value=\"overview\">Overview\u003C\u002FUiTabsTab>\n",[161,200,202],{"class":163,"line":201},4,[161,203,204],{"class":167},"    \u003CUiTabsTab value=\"projects\">Projects\u003C\u002FUiTabsTab>\n",[161,206,208],{"class":163,"line":207},5,[161,209,210],{"class":167},"    \u003CUiTabsIndicator \u002F>\n",[161,212,214],{"class":163,"line":213},6,[161,215,216],{"class":167},"  \u003C\u002FUiTabsList>\n",[161,218,220],{"class":163,"line":219},7,[161,221,222],{"class":167},"  \u003CUiTabsPanel value=\"overview\">Workspace stats and activity.\u003C\u002FUiTabsPanel>\n",[161,224,226],{"class":163,"line":225},8,[161,227,228],{"class":167},"  \u003CUiTabsPanel value=\"projects\">Milestones and deadlines.\u003C\u002FUiTabsPanel>\n",[161,230,232,235,237],{"class":163,"line":231},9,[161,233,234],{"class":167},"\u003C\u002F",[161,236,172],{"class":171},[161,238,186],{"class":167},[146,240,242],{"id":241},"parts","Parts",[244,245,246,270,279,291,312],"ul",{},[247,248,249,253,254,257,258,261,262,265,266,269],"li",{},[250,251,252],"strong",{},"Root"," — owns the active ",[158,255,256],{},"value",". ",[158,259,260],{},"orientation"," is ",[158,263,264],{},"horizontal"," (default) or ",[158,267,268],{},"vertical",".",[247,271,272,275,276,269],{},[250,273,274],{},"List"," — ",[158,277,278],{},"role=\"tablist\"",[247,280,281,275,284,287,288,269],{},[250,282,283],{},"Tab",[158,285,286],{},"role=\"tab\"",". Arrow keys move and activate. ",[158,289,290],{},"data-selected",[247,292,293,296,297,300,301,304,305,300,308,311],{},[250,294,295],{},"Indicator"," — a CSS bar that follows the selected tab (",[158,298,299],{},"left"," \u002F ",[158,302,303],{},"width",", or ",[158,306,307],{},"top",[158,309,310],{},"height"," when vertical).",[247,313,314,275,317,320],{},[250,315,316],{},"Panel",[158,318,319],{},"role=\"tabpanel\"",". Hidden when not selected.",[322,323,324],"style",{},"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}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);}",{"title":156,"searchDepth":189,"depth":189,"links":326},[327,328],{"id":148,"depth":189,"text":149},{"id":241,"depth":189,"text":242},"Toggle related panels on the same page","md",{},true,{"title":113,"description":329},"pkg\u002Ftabs","v7hkKPPmHW4HIc6AKMktyEX77fNgI7s9x0DHd-wPVHk",1791043755214]