[{"data":1,"prerenderedAt":1129},["ShallowReactive",2],{"docs:tabs":3,"demo:tabs\u002Fhero":1127,"demo:tabs\u002Fanimated-panels":1128},{"frontmatter":4,"meta":5,"nodes":6},{},{},[7,12,16,20,25,184,197,201,206,221,224,228,247,346,350,354,361,442,484,488,497,550,580,584,590,653,703,707,721,757,787,860,864,869,928,986,990,994,1011,1043,1047,1057,1078,1082,1091],[8,9,11],"h1",{"id":10},"tabs","Tabs",[13,14,15],"p",{},"Switchable content panels.",[17,18],"demo",{"name":19},"tabs\u002Fhero",[21,22,24],"h2",{"id":23},"anatomy","Anatomy",[26,27,31],"pre",{"language":28,"meta":29,"class":30},"vue","title=\"Anatomy\"","shiki shiki-themes github-light github-dark dark:github-dark",[32,33,35,55,56,55,72,55,81,55,83,55,92,55,102,55,112,55,132,55,141,55,150,55,152,55,167,55,176],"code",{"class":34},"language-vue",[36,37,40,44,48,52],"span",{"class":38,"style":39},"line","display: inline",[36,41,43],{"style":42},"color:#24292E;--shiki-dark:#E1E4E8","\u003C",[36,45,47],{"style":46},"color:#22863A;--shiki-dark:#85E89D","script",[36,49,51],{"style":50},"color:#6F42C1;--shiki-dark:#B392F0"," setup",[36,53,54],{"style":42},">","\n",[36,57,58,62,65,68],{"class":38,"style":39},[36,59,61],{"style":60},"color:#D73A49;--shiki-dark:#F97583","import",[36,63,64],{"style":42}," { Tabs } ",[36,66,67],{"style":60},"from",[36,69,71],{"style":70},"color:#032F62;--shiki-dark:#9ECBFF"," '@shardsui\u002Fvue\u002Ftabs'",[36,73,74,77,79],{"class":38,"style":39},[36,75,76],{"style":42},"\u003C\u002F",[36,78,47],{"style":46},[36,80,54],{"style":42},[36,82],{"class":38,"style":39},[36,84,85,87,90],{"class":38,"style":39},[36,86,43],{"style":42},[36,88,89],{"style":46},"template",[36,91,54],{"style":42},[36,93,94,97,100],{"class":38,"style":39},[36,95,96],{"style":42},"  \u003C",[36,98,99],{"style":46},"Tabs.Root",[36,101,54],{"style":42},[36,103,104,107,110],{"class":38,"style":39},[36,105,106],{"style":42},"    \u003C",[36,108,109],{"style":46},"Tabs.List",[36,111,54],{"style":42},[36,113,114,117,120,123,126,129],{"class":38,"style":39},[36,115,116],{"style":42},"      \u003C",[36,118,119],{"style":46},"Tabs.Tab",[36,121,122],{"style":50}," value",[36,124,125],{"style":42},"=",[36,127,128],{"style":70},"\"...\"",[36,130,131],{"style":42}," \u002F>",[36,133,134,136,139],{"class":38,"style":39},[36,135,116],{"style":42},[36,137,138],{"style":46},"Tabs.Indicator",[36,140,131],{"style":42},[36,142,143,146,148],{"class":38,"style":39},[36,144,145],{"style":42},"    \u003C\u002F",[36,147,109],{"style":46},[36,149,54],{"style":42},[36,151],{"class":38,"style":39},[36,153,154,156,159,161,163,165],{"class":38,"style":39},[36,155,106],{"style":42},[36,157,158],{"style":46},"Tabs.Panel",[36,160,122],{"style":50},[36,162,125],{"style":42},[36,164,128],{"style":70},[36,166,131],{"style":42},[36,168,169,172,174],{"class":38,"style":39},[36,170,171],{"style":42},"  \u003C\u002F",[36,173,99],{"style":46},[36,175,54],{"style":42},[36,177,178,180,182],{"class":38,"style":39},[36,179,76],{"style":42},[36,181,89],{"style":46},[36,183,54],{"style":42},[13,185,186,187,189,190,193,194,196],{},"Every ",[32,188,119],{}," needs a ",[32,191,192],{},"value",", and the ",[32,195,158],{}," it controls repeats it.",[21,198,200],{"id":199},"examples","Examples",[202,203,205],"h3",{"id":204},"examples-animated-panels","Animated panels",[13,207,208,209,212,213,216,217,220],{},"Animate panels as they activate using the ",[32,210,211],{},"data-starting-style"," and ",[32,214,215],{},"data-ending-style"," attributes. The ",[32,218,219],{},"data-activation-direction"," attribute indicates which direction the newly active tab is relative to the previously active one, letting panels slide in from the correct side.",[17,222],{"name":223},"tabs\u002Fanimated-panels",[202,225,227],{"id":226},"examples-links","Links",[13,229,230,231,234,235,238,239,242,243,246],{},"When a tab navigates to a URL instead of toggling a panel, set ",[32,232,233],{},"as=\"a\""," on ",[32,236,237],{},"\u003CTabs.Tab>",". The ",[32,240,241],{},"href"," is forwarded to the element, and the tab keeps its ",[32,244,245],{},"role=\"tab\""," and its place in the list's keyboard navigation.",[26,248,251],{"language":28,"meta":249,"class":250},"title=\"Tabs as links\"","shiki shiki-themes github-light github-dark has-highlighted dark:github-dark",[32,252,253,55,261,55,269,55,277,55,322,55,330,55,338],{"class":34},[36,254,255,257,259],{"class":38,"style":39},[36,256,43],{"style":42},[36,258,89],{"style":46},[36,260,54],{"style":42},[36,262,263,265,267],{"class":38,"style":39},[36,264,96],{"style":42},[36,266,99],{"style":46},[36,268,54],{"style":42},[36,270,271,273,275],{"class":38,"style":39},[36,272,106],{"style":42},[36,274,109],{"style":46},[36,276,54],{"style":42},[36,278,281,283,285,288,293,296,300,303,305,308,310,312,315,318,320],{"class":279,"style":39},[38,280],"highlighted",[36,282,116],{"style":42},[36,284,119],{"style":46},[36,286,287],{"style":50}," ",[36,289,292],{"style":50,"class":290},[291],"highlighted-word","as",[36,294,125],{"style":42,"class":295},[291],[36,297,299],{"style":70,"class":298},[291],"\"a\"",[36,301,302],{"style":50}," href",[36,304,125],{"style":42},[36,306,307],{"style":70},"\"\u002Foverview\"",[36,309,122],{"style":50},[36,311,125],{"style":42},[36,313,314],{"style":70},"\"overview\"",[36,316,317],{"style":42},">Overview\u003C\u002F",[36,319,119],{"style":46},[36,321,54],{"style":42},[36,323,324,326,328],{"class":38,"style":39},[36,325,145],{"style":42},[36,327,109],{"style":46},[36,329,54],{"style":42},[36,331,332,334,336],{"class":38,"style":39},[36,333,171],{"style":42},[36,335,99],{"style":46},[36,337,54],{"style":42},[36,339,340,342,344],{"class":38,"style":39},[36,341,76],{"style":42},[36,343,89],{"style":46},[36,345,54],{"style":42},[21,347,349],{"id":348},"api-reference","API reference",[202,351,353],{"id":352},"api-reference-root","Root",[13,355,356,357,360],{},"Groups the tabs and the corresponding panels.\nRenders a ",[32,358,359],{},"\u003Cdiv>"," element.",[362,363],"table",{"columns":364,"rows":368},[365,366,367],"Prop","Type","Default",[369,381,392,401,411,422,432],{"summary":370,"detail":374},[371,372,373],"\u003Ccode>as\u003C\u002Fcode>","\u003Ccode>keyof HTMLElementTagNameMap\u003C\u002Fcode>","\u003Ccode>'div'\u003C\u002Fcode>",[375,376,377,378],{"label":365,"html":371},{"label":366,"html":372},{"label":367,"html":373},{"label":379,"html":380},"Description","HTML element to render.",{"summary":382,"detail":386},[383,384,385],"\u003Ccode>class\u003C\u002Fcode>","\u003Ccode>string\u003C\u002Fcode>","—",[387,388,389,390],{"label":365,"html":383},{"label":366,"html":384},{"label":367,"html":385},{"label":379,"html":391},"CSS class applied to the element.",{"summary":393,"detail":395},[394,384,385],"\u003Ccode>style\u003C\u002Fcode>",[396,397,398,399],{"label":365,"html":394},{"label":366,"html":384},{"label":367,"html":385},{"label":379,"html":400},"Inline style applied to the element.",{"summary":402,"detail":405},[403,404,385],"\u003Ccode>value\u003C\u002Fcode>","\u003Ccode>string | number | null\u003C\u002Fcode>",[406,407,408,409],{"label":365,"html":403},{"label":366,"html":404},{"label":367,"html":385},{"label":379,"html":410},"Value of the active tab. Use \u003Ccode>v-model:value\u003C\u002Fcode> to control it. \u003Ccode>null\u003C\u002Fcode> leaves every tab inactive. When the prop is omitted, the uncontrolled fallback \u003Ccode>0\u003C\u002Fcode> falls back to the first enabled tab if no enabled tab carries it.",{"summary":412,"detail":416},[413,414,415],"\u003Ccode>orientation\u003C\u002Fcode>","\u003Ccode>'horizontal' | 'vertical'\u003C\u002Fcode>","\u003Ccode>'horizontal'\u003C\u002Fcode>",[417,418,419,420],{"label":365,"html":413},{"label":366,"html":414},{"label":367,"html":415},{"label":379,"html":421},"Layout flow direction. Decides which arrow keys move focus, and marks the list \u003Ccode>aria-orientation="vertical"\u003C\u002Fcode>.",{"summary":423,"detail":426},[424,425,385],"\u003Ccode>update:value\u003C\u002Fcode>","\u003Ccode>(value: string | number | null) => void\u003C\u002Fcode>",[427,428,429,430],{"label":365,"html":424},{"label":366,"html":425},{"label":367,"html":385},{"label":379,"html":431},"Emitted when the active tab changes. With \u003Ccode>value\u003C\u002Fcode> omitted it also fires for the initial selection, and for the automatic fallback after the active tab is removed or disabled — with \u003Ccode>null\u003C\u002Fcode> if no enabled tab is left.",{"summary":433,"detail":436},[434,435,385],"\u003Ccode>default\u003C\u002Fcode>","\u003Ccode>Slot<{ orientation, activationDirection }>\u003C\u002Fcode>",[437,438,439,440],{"label":365,"html":434},{"label":366,"html":435},{"label":367,"html":385},{"label":379,"html":441},"Content; receives the tabs state.",[362,443,444,457],{},[445,446,447],"thead",{},[448,449,450,455],"tr",{},[451,452,454],"th",{"style":453},"text-align:left","Attribute",[451,456,379],{"style":453},[458,459,460,471],"tbody",{},[448,461,462,468],{},[463,464,465],"td",{"style":453},[32,466,467],{},"data-orientation",[463,469,470],{"style":453},"Indicates the orientation of the tabs.",[448,472,473,477],{},[463,474,475],{"style":453},[32,476,219],{},[463,478,479,480,483],{"style":453},"Direction of the last activation: ",[32,481,482],{},"'left' | 'right' | 'up' | 'down' | 'none'",".",[202,485,487],{"id":486},"api-reference-list","List",[13,489,490,491,493,494,483],{},"Groups the individual tab buttons into one tab stop; arrow keys move between them.\nRenders a ",[32,492,359],{}," element with ",[32,495,496],{},"role=\"tablist\"",[362,498],{"columns":499,"rows":500},[365,366,367],[501,508,515,522,533,543],{"summary":502,"detail":503},[371,372,373],[504,505,506,507],{"label":365,"html":371},{"label":366,"html":372},{"label":367,"html":373},{"label":379,"html":380},{"summary":509,"detail":510},[383,384,385],[511,512,513,514],{"label":365,"html":383},{"label":366,"html":384},{"label":367,"html":385},{"label":379,"html":391},{"summary":516,"detail":517},[394,384,385],[518,519,520,521],{"label":365,"html":394},{"label":366,"html":384},{"label":367,"html":385},{"label":379,"html":400},{"summary":523,"detail":527},[524,525,526],"\u003Ccode>activateOnFocus\u003C\u002Fcode>","\u003Ccode>boolean\u003C\u002Fcode>","\u003Ccode>false\u003C\u002Fcode>",[528,529,530,531],{"label":365,"html":524},{"label":366,"html":525},{"label":367,"html":526},{"label":379,"html":532},"Activates each tab as arrow keys focus it. When \u003Ccode>false\u003C\u002Fcode>, the focused tab is activated with Enter or Space.",{"summary":534,"detail":537},[535,525,536],"\u003Ccode>loopFocus\u003C\u002Fcode>","\u003Ccode>true\u003C\u002Fcode>",[538,539,540,541],{"label":365,"html":535},{"label":366,"html":525},{"label":367,"html":536},{"label":379,"html":542},"Whether arrow-key navigation wraps from the last tab back to the first.",{"summary":544,"detail":545},[434,435,385],[546,547,548,549],{"label":365,"html":434},{"label":366,"html":435},{"label":367,"html":385},{"label":379,"html":441},[362,551,552,560],{},[445,553,554],{},[448,555,556,558],{},[451,557,454],{"style":453},[451,559,379],{"style":453},[458,561,562,570],{},[448,563,564,568],{},[463,565,566],{"style":453},[32,567,467],{},[463,569,470],{"style":453},[448,571,572,576],{},[463,573,574],{"style":453},[32,575,219],{},[463,577,479,578,483],{"style":453},[32,579,482],{},[202,581,583],{"id":582},"api-reference-tab","Tab",[13,585,586,587,360],{},"An individual interactive tab button that toggles the corresponding panel.\nRenders a ",[32,588,589],{},"\u003Cbutton>",[362,591],{"columns":592,"rows":593},[365,366,367],[594,603,610,617,625,635,644],{"summary":595,"detail":597},[371,372,596],"\u003Ccode>'button'\u003C\u002Fcode>",[598,599,600,601],{"label":365,"html":371},{"label":366,"html":372},{"label":367,"html":596},{"label":379,"html":602},"Element to render as. Use \u003Ccode>'a'\u003C\u002Fcode> for link tabs.",{"summary":604,"detail":605},[383,384,385],[606,607,608,609],{"label":365,"html":383},{"label":366,"html":384},{"label":367,"html":385},{"label":379,"html":391},{"summary":611,"detail":612},[394,384,385],[613,614,615,616],{"label":365,"html":394},{"label":366,"html":384},{"label":367,"html":385},{"label":379,"html":400},{"summary":618,"detail":619},[403,404,385],[620,621,622,623],{"label":365,"html":403},{"label":366,"html":404},{"label":367,"html":385},{"label":379,"html":624},"Required. Identifies which Panel this Tab controls.",{"summary":626,"detail":629},[627,384,628],"\u003Ccode>id\u003C\u002Fcode>","auto",[630,631,632,633],{"label":365,"html":627},{"label":366,"html":384},{"label":367,"html":628},{"label":379,"html":634},"Custom element ID. Referenced by the panel's \u003Ccode>aria-labelledby\u003C\u002Fcode>.",{"summary":636,"detail":638},[637,525,526],"\u003Ccode>disabled\u003C\u002Fcode>",[639,640,641,642],{"label":365,"html":637},{"label":366,"html":525},{"label":367,"html":526},{"label":379,"html":643},"Blocks activation. The tab stays focusable and arrow-key reachable, and is marked \u003Ccode>aria-disabled\u003C\u002Fcode> rather than \u003Ccode>disabled\u003C\u002Fcode>.",{"summary":645,"detail":647},[434,646,385],"\u003Ccode>Slot<{ active, disabled, orientation, activationDirection }>\u003C\u002Fcode>",[648,649,650,651],{"label":365,"html":434},{"label":366,"html":646},{"label":367,"html":385},{"label":379,"html":652},"Tab content; receives the tab state.",[362,654,655,663],{},[445,656,657],{},[448,658,659,661],{},[451,660,454],{"style":453},[451,662,379],{"style":453},[458,664,665,675,685,693],{},[448,666,667,672],{},[463,668,669],{"style":453},[32,670,671],{},"data-active",[463,673,674],{"style":453},"Present when the tab is active.",[448,676,677,682],{},[463,678,679],{"style":453},[32,680,681],{},"data-disabled",[463,683,684],{"style":453},"Present when the tab is disabled.",[448,686,687,691],{},[463,688,689],{"style":453},[32,690,467],{},[463,692,470],{"style":453},[448,694,695,699],{},[463,696,697],{"style":453},[32,698,219],{},[463,700,479,701,483],{"style":453},[32,702,482],{},[202,704,706],{"id":705},"api-reference-indicator","Indicator",[13,708,709,710,713,714,717,718,483],{},"A visual indicator you style to match the position of the active tab. Place it inside ",[32,711,712],{},"\u003CTabs.List>"," — it is measured against the list — and position it with the CSS variables below.\nRenders a ",[32,715,716],{},"\u003Cspan>"," element; nothing renders while the active value is ",[32,719,720],{},"null",[362,722],{"columns":723,"rows":724},[365,366,367],[725,733,740,748],{"summary":726,"detail":728},[371,372,727],"\u003Ccode>'span'\u003C\u002Fcode>",[729,730,731,732],{"label":365,"html":371},{"label":366,"html":372},{"label":367,"html":727},{"label":379,"html":380},{"summary":734,"detail":735},[383,384,385],[736,737,738,739],{"label":365,"html":383},{"label":366,"html":384},{"label":367,"html":385},{"label":379,"html":391},{"summary":741,"detail":742},[394,384,385],[743,744,745,746],{"label":365,"html":394},{"label":366,"html":384},{"label":367,"html":385},{"label":379,"html":747},"Inline style applied to the element. Merged with the CSS variables below.",{"summary":749,"detail":751},[434,750,385],"\u003Ccode>Slot<{ orientation, activationDirection, activeTabPosition, activeTabSize }>\u003C\u002Fcode>",[752,753,754,755],{"label":365,"html":434},{"label":366,"html":750},{"label":367,"html":385},{"label":379,"html":756},"Content; receives the indicator state. The active tab's position and size are \u003Ccode>null\u003C\u002Fcode> until it has been measured.",[362,758,759,767],{},[445,760,761],{},[448,762,763,765],{},[451,764,454],{"style":453},[451,766,379],{"style":453},[458,768,769,777],{},[448,770,771,775],{},[463,772,773],{"style":453},[32,774,467],{},[463,776,470],{"style":453},[448,778,779,783],{},[463,780,781],{"style":453},[32,782,219],{},[463,784,479,785,483],{"style":453},[32,786,482],{},[362,788,789,798],{},[445,790,791],{},[448,792,793,796],{},[451,794,795],{"style":453},"CSS Variable",[451,797,379],{"style":453},[458,799,800,810,820,830,840,850],{},[448,801,802,807],{},[463,803,804],{"style":453},[32,805,806],{},"--active-tab-left",[463,808,809],{"style":453},"Distance from the list's left edge.",[448,811,812,817],{},[463,813,814],{"style":453},[32,815,816],{},"--active-tab-right",[463,818,819],{"style":453},"Distance from the list's right edge.",[448,821,822,827],{},[463,823,824],{"style":453},[32,825,826],{},"--active-tab-top",[463,828,829],{"style":453},"Distance from the list's top edge.",[448,831,832,837],{},[463,833,834],{"style":453},[32,835,836],{},"--active-tab-bottom",[463,838,839],{"style":453},"Distance from the list's bottom edge.",[448,841,842,847],{},[463,843,844],{"style":453},[32,845,846],{},"--active-tab-width",[463,848,849],{"style":453},"Active tab width.",[448,851,852,857],{},[463,853,854],{"style":453},[32,855,856],{},"--active-tab-height",[463,858,859],{"style":453},"Active tab height.",[202,861,863],{"id":862},"api-reference-panel","Panel",[13,865,866,867,360],{},"A panel displayed when the corresponding tab is active.\nRenders a ",[32,868,359],{},[362,870],{"columns":871,"rows":872},[365,366,367],[873,880,887,894,902,910,919],{"summary":874,"detail":875},[371,372,373],[876,877,878,879],{"label":365,"html":371},{"label":366,"html":372},{"label":367,"html":373},{"label":379,"html":380},{"summary":881,"detail":882},[383,384,385],[883,884,885,886],{"label":365,"html":383},{"label":366,"html":384},{"label":367,"html":385},{"label":379,"html":391},{"summary":888,"detail":889},[394,384,385],[890,891,892,893],{"label":365,"html":394},{"label":366,"html":384},{"label":367,"html":385},{"label":379,"html":400},{"summary":895,"detail":896},[403,404,385],[897,898,899,900],{"label":365,"html":403},{"label":366,"html":404},{"label":367,"html":385},{"label":379,"html":901},"Matches the controlling Tab's value.",{"summary":903,"detail":904},[627,384,628],[905,906,907,908],{"label":365,"html":627},{"label":366,"html":384},{"label":367,"html":628},{"label":379,"html":909},"Custom element ID. Referenced by the tab's \u003Ccode>aria-controls\u003C\u002Fcode>.",{"summary":911,"detail":913},[912,525,526],"\u003Ccode>keepMounted\u003C\u002Fcode>",[914,915,916,917],{"label":365,"html":912},{"label":366,"html":525},{"label":367,"html":526},{"label":379,"html":918},"Keeps the panel in the DOM while inactive — \u003Ccode>hidden\u003C\u002Fcode> and \u003Ccode>inert\u003C\u002Fcode> — so its contents keep their scroll position and DOM state.",{"summary":920,"detail":922},[434,921,385],"\u003Ccode>Slot<{ hidden, orientation, activationDirection, transitionStatus }>\u003C\u002Fcode>",[923,924,925,926],{"label":365,"html":434},{"label":366,"html":921},{"label":367,"html":385},{"label":379,"html":927},"Panel content; receives the panel state.",[362,929,930,938],{},[445,931,932],{},[448,933,934,936],{},[451,935,454],{"style":453},[451,937,379],{"style":453},[458,939,940,950,959,968,976],{},[448,941,942,947],{},[463,943,944],{"style":453},[32,945,946],{},"data-hidden",[463,948,949],{"style":453},"Present when the panel is inactive but kept mounted.",[448,951,952,956],{},[463,953,954],{"style":453},[32,955,211],{},[463,957,958],{"style":453},"Present when the panel is animating in.",[448,960,961,965],{},[463,962,963],{"style":453},[32,964,215],{},[463,966,967],{"style":453},"Present when the panel is animating out.",[448,969,970,974],{},[463,971,972],{"style":453},[32,973,467],{},[463,975,470],{"style":453},[448,977,978,982],{},[463,979,980],{"style":453},[32,981,219],{},[463,983,479,984,483],{"style":453},[32,985,482],{},[21,987,989],{"id":988},"additional-types","Additional types",[202,991,993],{"id":992},"additional-types-tabsvalue","TabsValue",[13,995,996,997,999,1000,1002,1003,999,1005,1007,1008,1010],{},"The value identifying a tab, shared by ",[32,998,99],{},"'s ",[32,1001,192],{},", ",[32,1004,119],{},[32,1006,192],{}," and the\n",[32,1009,158],{}," it controls.",[26,1012,1014],{"language":1013,"class":30},"ts",[32,1015,1017],{"class":1016},"language-ts",[36,1018,1019,1022,1025,1028,1032,1035,1038,1040],{"class":38,"style":39},[36,1020,1021],{"style":60},"type",[36,1023,1024],{"style":50}," TabsValue",[36,1026,1027],{"style":60}," =",[36,1029,1031],{"style":1030},"color:#005CC5;--shiki-dark:#79B8FF"," string",[36,1033,1034],{"style":60}," |",[36,1036,1037],{"style":1030}," number",[36,1039,1034],{"style":60},[36,1041,1042],{"style":1030}," null",[202,1044,1046],{"id":1045},"additional-types-tabsorientation","TabsOrientation",[13,1048,1049,1050,1053,1054,1056],{},"The ",[32,1051,1052],{},"orientation"," of ",[32,1055,99],{},", which decides the arrow keys that move between tabs.",[26,1058,1059],{"language":1013,"class":30},[32,1060,1061],{"class":1016},[36,1062,1063,1065,1068,1070,1073,1075],{"class":38,"style":39},[36,1064,1021],{"style":60},[36,1066,1067],{"style":50}," TabsOrientation",[36,1069,1027],{"style":60},[36,1071,1072],{"style":70}," 'horizontal'",[36,1074,1034],{"style":60},[36,1076,1077],{"style":70}," 'vertical'",[202,1079,1081],{"id":1080},"additional-types-tabsactivationdirection","TabsActivationDirection",[13,1083,1084,1085,1088,1089,483],{},"Which way the active tab moved, handed to the default slot as ",[32,1086,1087],{},"activationDirection"," and\nmirrored on ",[32,1090,219],{},[26,1092,1093],{"language":1013,"class":30},[32,1094,1095],{"class":1016},[36,1096,1097,1099,1102,1104,1107,1109,1112,1114,1117,1119,1122,1124],{"class":38,"style":39},[36,1098,1021],{"style":60},[36,1100,1101],{"style":50}," TabsActivationDirection",[36,1103,1027],{"style":60},[36,1105,1106],{"style":70}," 'left'",[36,1108,1034],{"style":60},[36,1110,1111],{"style":70}," 'right'",[36,1113,1034],{"style":60},[36,1115,1116],{"style":70}," 'up'",[36,1118,1034],{"style":60},[36,1120,1121],{"style":70}," 'down'",[36,1123,1034],{"style":60},[36,1125,1126],{"style":70}," 'none'","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">script\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> setup\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> lang\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"ts\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> { Tabs } \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\"> '@shardsui\u002Fvue\u002Ftabs'\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\"> tabs\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> [\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">  {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">    value: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">'overview'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">    label: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">'Overview'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">    body: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">'A short overview of closures and where they tend to show up throughout everyday code.'\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">  },\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">  {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">    value: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">'transcript'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">    label: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">'Transcript'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">    body: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">'A closure is a function that remembers the scope where it was originally created in.'\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">  },\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">  {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">    value: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">'notes'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">    label: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">'Notes'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">    body: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">'Revisit the counter example — the returned function keeps its own copy of count.'\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">  }\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">]\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">script\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">template\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">  <\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">Tabs.Root\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"w-fit rounded-md border border-gray-200\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> value\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"overview\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">    <\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">Tabs.List\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"relative z-0 flex gap-1 border-b border-gray-200 px-1\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">      <\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">Tabs.Tab\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">        v-for\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"tab in tabs\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">        :key\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"tab.value\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">        class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"flex h-8 items-center justify-center border-0 px-3 text-sm font-normal whitespace-nowrap text-gray-600 outline-hidden select-none before:inset-x-0 before:inset-y-1 before:rounded-xs before:-outline-offset-1 before:outline-gray-950 hover:text-gray-900 focus-visible:relative focus-visible:before:absolute focus-visible:before:outline-2 data-active:text-gray-900\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">        :value\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"tab.value\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">      >\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">        {{ tab.label }}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">      <\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">Tabs.Tab\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">      <\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">Tabs.Indicator\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">        class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"absolute top-1\u002F2 left-0 z-[-1] h-6 w-(--active-tab-width) translate-x-(--active-tab-left) -translate-y-1\u002F2 rounded-xs bg-gray-100 transition-[translate,width] duration-150 ease-in-out\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">      \u002F>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">    <\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">Tabs.List\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">    <\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">Tabs.Panel\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">      v-for\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"tab in tabs\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">      :key\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"tab.value\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">      class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"w-0 min-w-full p-4 text-sm\u002F5.75 text-gray-700\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">      :value\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"tab.value\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">    >\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">      {{ tab.body }}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">    <\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">Tabs.Panel\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">  <\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">Tabs.Root\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">template\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">script\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> setup\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> lang\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"ts\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> { Tabs } \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\"> '@shardsui\u002Fvue\u002Ftabs'\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\"> tabs\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> [\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">  { value: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">'overview'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">, label: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">'Overview'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">, body: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">'Workspace stats and activity.'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> },\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">  { value: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">'projects'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">, label: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">'Projects'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">, body: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">'Milestones and deadlines.'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> },\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">  { value: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">'account'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">, label: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">'Account'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">, body: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">'Profile and preferences.'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> }\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">]\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">script\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">template\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">  <\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">Tabs.Root\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"w-fit rounded-md border border-gray-200\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> value\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"overview\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">    <\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">Tabs.List\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"relative z-0 flex gap-1 border-b border-gray-200 px-1\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">      <\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">Tabs.Tab\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">        v-for\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"tab in tabs\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">        :key\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"tab.value\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">        class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"flex h-8 items-center justify-center border-0 px-3 text-sm font-normal whitespace-nowrap text-gray-600 outline-hidden select-none before:inset-x-0 before:inset-y-1 before:rounded-xs before:-outline-offset-1 before:outline-gray-950 hover:text-gray-900 focus-visible:relative focus-visible:before:absolute focus-visible:before:outline-2 data-active:text-gray-900\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">        :value\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"tab.value\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">      >\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">        {{ tab.label }}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">      <\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">Tabs.Tab\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">      <\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">Tabs.Indicator\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">        class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"absolute top-1\u002F2 left-0 z-[-1] h-6 w-(--active-tab-width) translate-x-(--active-tab-left) -translate-y-1\u002F2 rounded-xs bg-gray-100 transition-[translate,width] duration-150 ease-in-out\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">      \u002F>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">    <\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">Tabs.List\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">    <\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">div\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"grid grid-cols-1 overflow-hidden\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">      <\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">Tabs.Panel\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">        v-for\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"tab in tabs\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">        :key\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"tab.value\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">        class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"col-start-1 row-start-1 w-0 min-w-full p-4 text-sm\u002F5.75 text-gray-700 outline-hidden [transition:opacity_175ms_ease,translate_350ms_cubic-bezier(0.22,1,0.36,1)] data-ending-style:opacity-0 data-starting-style:opacity-0 motion-safe:data-ending-style:data-[activation-direction=left]:translate-x-1\u002F2 motion-safe:data-starting-style:data-[activation-direction=left]:-translate-x-1\u002F2 motion-safe:data-ending-style:data-[activation-direction=right]:-translate-x-1\u002F2 motion-safe:data-starting-style:data-[activation-direction=right]:translate-x-1\u002F2\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">        :value\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"tab.value\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">      >\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">        {{ tab.body }}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">      <\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">Tabs.Panel\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">    <\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">div\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">  <\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">Tabs.Root\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">template\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",1789390077507]