[{"data":1,"prerenderedAt":1418},["ShallowReactive",2],{"docs:scroll-area":3,"demo:scroll-area\u002Fhero":1415,"demo:scroll-area\u002Fboth":1416,"demo:scroll-area\u002Fscroll-fade":1417},{"frontmatter":4,"meta":5,"nodes":6},{},{},[7,12,16,20,25,184,188,193,200,203,207,214,372,379,389,418,421,425,435,619,636,640,644,651,712,801,840,844,849,882,950,998,1002,1007,1040,1108,1112,1121,1178,1267,1299,1303,1308,1343,1371,1375,1380],[8,9,11],"h1",{"id":10},"scroll-area","Scroll Area",[13,14,15],"p",{},"A styleable scroll region.",[17,18],"demo",{"name":19},"scroll-area\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,123,55,132,55,141,55,150,55,158,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}," { ScrollArea } ",[36,66,67],{"style":60},"from",[36,69,71],{"style":70},"color:#032F62;--shiki-dark:#9ECBFF"," '@shardsui\u002Fvue\u002Fscroll-area'",[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},"ScrollArea.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},"ScrollArea.Viewport",[36,111,54],{"style":42},[36,113,114,117,120],{"class":38,"style":39},[36,115,116],{"style":42},"      \u003C",[36,118,119],{"style":46},"ScrollArea.Content",[36,121,122],{"style":42}," \u002F>",[36,124,125,128,130],{"class":38,"style":39},[36,126,127],{"style":42},"    \u003C\u002F",[36,129,109],{"style":46},[36,131,54],{"style":42},[36,133,134,136,139],{"class":38,"style":39},[36,135,106],{"style":42},[36,137,138],{"style":46},"ScrollArea.Scrollbar",[36,140,54],{"style":42},[36,142,143,145,148],{"class":38,"style":39},[36,144,116],{"style":42},[36,146,147],{"style":46},"ScrollArea.Thumb",[36,149,122],{"style":42},[36,151,152,154,156],{"class":38,"style":39},[36,153,127],{"style":42},[36,155,138],{"style":46},[36,157,54],{"style":42},[36,159,160,162,165],{"class":38,"style":39},[36,161,106],{"style":42},[36,163,164],{"style":46},"ScrollArea.Corner",[36,166,122],{"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},[21,185,187],{"id":186},"examples","Examples",[189,190,192],"h3",{"id":191},"examples-both-scrollbars","Both scrollbars",[13,194,195,196,199],{},"When both scrollbars are visible, add ",[32,197,198],{},"\u003CScrollArea.Corner>"," to fill the gap where they meet so they never overlap.",[17,201],{"name":202},"scroll-area\u002Fboth",[189,204,206],{"id":205},"examples-gradient-scroll-fade","Gradient scroll fade",[13,208,209,210,213],{},"Feed the viewport's overflow CSS variables into a ",[32,211,212],{},"mask-image"," to fade content near the edges. The fade deepens the further the user scrolls away from each edge.",[26,215,218],{"language":216,"meta":217,"class":30},"css","title=\"scroll-area.css\"",[32,219,221,55,229,55,244,55,255,55,265,55,296,55,340,55,349,55,354,55,367],{"class":220},"language-css",[36,222,223,226],{"class":38,"style":39},[36,224,225],{"style":50},".viewport",[36,227,228],{"style":42}," {",[36,230,231,235,238,241],{"class":38,"style":39},[36,232,234],{"style":233},"color:#005CC5;--shiki-dark:#79B8FF","  mask-image",[36,236,237],{"style":42},": ",[36,239,240],{"style":233},"linear-gradient",[36,242,243],{"style":42},"(",[36,245,246,249,252],{"class":38,"style":39},[36,247,248],{"style":60},"    to",[36,250,251],{"style":233}," bottom",[36,253,254],{"style":42},",",[36,256,257,260,263],{"class":38,"style":39},[36,258,259],{"style":233},"    transparent",[36,261,262],{"style":233}," 0",[36,264,254],{"style":42},[36,266,267,270,273,275,278,281,284,287,289,293],{"class":38,"style":39},[36,268,269],{"style":233},"    black",[36,271,272],{"style":233}," min",[36,274,243],{"style":42},[36,276,277],{"style":233},"40",[36,279,280],{"style":60},"px",[36,282,283],{"style":42},", ",[36,285,286],{"style":233},"var",[36,288,243],{"style":42},[36,290,292],{"style":291},"color:#E36209;--shiki-dark:#FFAB70","--scroll-area-overflow-y-start",[36,294,295],{"style":42},")),",[36,297,298,300,303,305,308,311,314,316,318,320,322,324,326,328,331,333,335,337],{"class":38,"style":39},[36,299,269],{"style":233},[36,301,302],{"style":233}," calc",[36,304,243],{"style":42},[36,306,307],{"style":233},"100",[36,309,310],{"style":60},"%",[36,312,313],{"style":60}," -",[36,315,272],{"style":233},[36,317,243],{"style":42},[36,319,277],{"style":233},[36,321,280],{"style":60},[36,323,283],{"style":42},[36,325,286],{"style":233},[36,327,243],{"style":42},[36,329,330],{"style":291},"--scroll-area-overflow-y-end",[36,332,283],{"style":42},[36,334,277],{"style":233},[36,336,280],{"style":60},[36,338,339],{"style":42},"))),",[36,341,342,344,347],{"class":38,"style":39},[36,343,259],{"style":233},[36,345,346],{"style":233}," 100",[36,348,310],{"style":60},[36,350,351],{"class":38,"style":39},[36,352,353],{"style":42},"  );",[36,355,356,359,361,364],{"class":38,"style":39},[36,357,358],{"style":233},"  mask-repeat",[36,360,237],{"style":42},[36,362,363],{"style":233},"no-repeat",[36,365,366],{"style":42},";",[36,368,369],{"class":38,"style":39},[36,370,371],{"style":42},"}",[13,373,374,375,378],{},"The variables are written on ",[32,376,377],{},"\u003CScrollArea.Viewport>"," and inherit from there, so the viewport itself or any element inside it can read them.",[13,380,381,382,385,386,388],{},"They are only set once the scroll area has measured itself after mount. Until then a ",[32,383,384],{},"var()"," without a fallback makes the whole ",[32,387,212],{}," invalid and nothing is masked, so give each call a fallback if the fade has to render on the first paint.",[26,390,392],{"language":216,"meta":391,"class":30},"title=\"Fallbacks before the first measurement\"",[32,393,394,55,407],{"class":220},[36,395,396,399,404],{"class":38,"style":39},[36,397,398],{"style":42},"var(--scroll-area-overflow-y-start",[36,400,403],{"style":42,"class":401},[402],"highlighted-word",", 0px",[36,405,406],{"style":42},");",[36,408,409,412,416],{"class":38,"style":39},[36,410,411],{"style":42},"var(--scroll-area-overflow-y-end",[36,413,415],{"style":42,"class":414},[402],", 40px",[36,417,406],{"style":42},[17,419],{"name":420},"scroll-area\u002Fscroll-fade",[189,422,424],{"id":423},"examples-combining-with-tabs","Combining with Tabs",[13,426,427,428,431,432,434],{},"When a tab list overflows, wrap ",[32,429,430],{},"\u003CTabs.List>"," in a ",[32,433,377],{}," so the list scrolls horizontally inside the scroll area, and add the scrollbar parts alongside it.",[26,436,439],{"language":28,"meta":437,"class":438},"title=\"Tabs with ScrollArea\"","shiki shiki-themes github-light github-dark has-highlighted dark:github-dark",[32,440,441,55,449,55,467,55,475,55,485,55,495,55,516,55,525,55,534,55,543,55,559,55,567,55,575,55,583,55,603,55,611],{"class":34},[36,442,443,445,447],{"class":38,"style":39},[36,444,43],{"style":42},[36,446,89],{"style":46},[36,448,54],{"style":42},[36,450,451,453,456,459,462,465],{"class":38,"style":39},[36,452,96],{"style":42},[36,454,455],{"style":46},"Tabs.Root",[36,457,458],{"style":50}," value",[36,460,461],{"style":42},"=",[36,463,464],{"style":70},"\"overview\"",[36,466,54],{"style":42},[36,468,469,471,473],{"class":38,"style":39},[36,470,106],{"style":42},[36,472,99],{"style":46},[36,474,54],{"style":42},[36,476,479,481,483],{"class":477,"style":39},[38,478],"highlighted",[36,480,116],{"style":42},[36,482,109],{"style":46},[36,484,54],{"style":42},[36,486,487,490,493],{"class":38,"style":39},[36,488,489],{"style":42},"        \u003C",[36,491,492],{"style":46},"Tabs.List",[36,494,54],{"style":42},[36,496,497,500,503,505,507,509,512,514],{"class":38,"style":39},[36,498,499],{"style":42},"          \u003C",[36,501,502],{"style":46},"Tabs.Tab",[36,504,458],{"style":50},[36,506,461],{"style":42},[36,508,464],{"style":70},[36,510,511],{"style":42},">Overview\u003C\u002F",[36,513,502],{"style":46},[36,515,54],{"style":42},[36,517,518,520,523],{"class":38,"style":39},[36,519,499],{"style":42},[36,521,522],{"style":46},"Tabs.Indicator",[36,524,122],{"style":42},[36,526,527,530,532],{"class":38,"style":39},[36,528,529],{"style":42},"        \u003C\u002F",[36,531,492],{"style":46},[36,533,54],{"style":42},[36,535,536,539,541],{"class":38,"style":39},[36,537,538],{"style":42},"      \u003C\u002F",[36,540,109],{"style":46},[36,542,54],{"style":42},[36,544,545,547,549,552,554,557],{"class":38,"style":39},[36,546,116],{"style":42},[36,548,138],{"style":46},[36,550,551],{"style":50}," orientation",[36,553,461],{"style":42},[36,555,556],{"style":70},"\"horizontal\"",[36,558,54],{"style":42},[36,560,561,563,565],{"class":38,"style":39},[36,562,489],{"style":42},[36,564,147],{"style":46},[36,566,122],{"style":42},[36,568,569,571,573],{"class":38,"style":39},[36,570,538],{"style":42},[36,572,138],{"style":46},[36,574,54],{"style":42},[36,576,577,579,581],{"class":38,"style":39},[36,578,127],{"style":42},[36,580,99],{"style":46},[36,582,54],{"style":42},[36,584,585,587,590,592,594,596,599,601],{"class":38,"style":39},[36,586,106],{"style":42},[36,588,589],{"style":46},"Tabs.Panel",[36,591,458],{"style":50},[36,593,461],{"style":42},[36,595,464],{"style":70},[36,597,598],{"style":42},">...\u003C\u002F",[36,600,589],{"style":46},[36,602,54],{"style":42},[36,604,605,607,609],{"class":38,"style":39},[36,606,171],{"style":42},[36,608,455],{"style":46},[36,610,54],{"style":42},[36,612,613,615,617],{"class":38,"style":39},[36,614,76],{"style":42},[36,616,89],{"style":46},[36,618,54],{"style":42},[13,620,621,622,627,628,631,632,635],{},"Because the overflow variables inherit, the tab list can drive its own ",[623,624,626],"a",{"href":625},"#examples-gradient-scroll-fade","mask fade"," from ",[32,629,630],{},"--scroll-area-overflow-x-start"," and ",[32,633,634],{},"--scroll-area-overflow-x-end",".",[21,637,639],{"id":638},"api-reference","API reference",[189,641,643],{"id":642},"api-reference-root","Root",[13,645,646,647,650],{},"Groups all parts of the scroll area.\nRenders a ",[32,648,649],{},"\u003Cdiv>"," element.",[652,653],"table",{"columns":654,"rows":658},[655,656,657],"Prop","Type","Default",[659,671,682,691,702],{"summary":660,"detail":664},[661,662,663],"\u003Ccode>as\u003C\u002Fcode>","\u003Ccode>keyof HTMLElementTagNameMap\u003C\u002Fcode>","\u003Ccode>'div'\u003C\u002Fcode>",[665,666,667,668],{"label":655,"html":661},{"label":656,"html":662},{"label":657,"html":663},{"label":669,"html":670},"Description","HTML element to render.",{"summary":672,"detail":676},[673,674,675],"\u003Ccode>class\u003C\u002Fcode>","\u003Ccode>string\u003C\u002Fcode>","—",[677,678,679,680],{"label":655,"html":673},{"label":656,"html":674},{"label":657,"html":675},{"label":669,"html":681},"CSS class applied to the element.",{"summary":683,"detail":685},[684,674,675],"\u003Ccode>style\u003C\u002Fcode>",[686,687,688,689],{"label":655,"html":684},{"label":656,"html":674},{"label":657,"html":675},{"label":669,"html":690},"Inline style applied to the element, after the built-in \u003Ccode>position\u003C\u002Fcode> and corner variables.",{"summary":692,"detail":696},[693,694,695],"\u003Ccode>overflowEdgeThreshold\u003C\u002Fcode>","\u003Ccode>number | { xStart?: number; xEnd?: number; yStart?: number; yEnd?: number }\u003C\u002Fcode>","\u003Ccode>0\u003C\u002Fcode>",[697,698,699,700],{"label":655,"html":693},{"label":656,"html":694},{"label":657,"html":695},{"label":669,"html":701},"Pixels an edge must be scrolled past before its \u003Ccode>data-overflow-*\u003C\u002Fcode> attribute appears. One number sets all four edges.",{"summary":703,"detail":706},[704,705,675],"\u003Ccode>default\u003C\u002Fcode>","\u003Ccode>Slot<{ scrolling, hasOverflowX, hasOverflowY, overflowXStart, overflowXEnd, overflowYStart, overflowYEnd, cornerHidden }>\u003C\u002Fcode>",[707,708,709,710],{"label":655,"html":704},{"label":656,"html":705},{"label":657,"html":675},{"label":669,"html":711},"Content; receives the scroll area's scrolling and overflow state.",[652,713,714,727],{},[715,716,717],"thead",{},[718,719,720,725],"tr",{},[721,722,724],"th",{"style":723},"text-align:left","Attribute",[721,726,669],{"style":723},[728,729,730,741,751,761,771,781,791],"tbody",{},[718,731,732,738],{},[733,734,735],"td",{"style":723},[32,736,737],{},"data-scrolling",[733,739,740],{"style":723},"Present while the user is scrolling the viewport.",[718,742,743,748],{},[733,744,745],{"style":723},[32,746,747],{},"data-has-overflow-x",[733,749,750],{"style":723},"Present when the content is wider than the viewport.",[718,752,753,758],{},[733,754,755],{"style":723},[32,756,757],{},"data-has-overflow-y",[733,759,760],{"style":723},"Present when the content is taller than the viewport.",[718,762,763,768],{},[733,764,765],{"style":723},[32,766,767],{},"data-overflow-x-start",[733,769,770],{"style":723},"Present when content is hidden past the horizontal start edge.",[718,772,773,778],{},[733,774,775],{"style":723},[32,776,777],{},"data-overflow-x-end",[733,779,780],{"style":723},"Present when content is hidden past the horizontal end edge.",[718,782,783,788],{},[733,784,785],{"style":723},[32,786,787],{},"data-overflow-y-start",[733,789,790],{"style":723},"Present when content is hidden past the vertical start edge.",[718,792,793,798],{},[733,794,795],{"style":723},[32,796,797],{},"data-overflow-y-end",[733,799,800],{"style":723},"Present when content is hidden past the vertical end edge.",[652,802,803,812],{},[715,804,805],{},[718,806,807,810],{},[721,808,809],{"style":723},"CSS Variable",[721,811,669],{"style":723},[728,813,814,828],{},[718,815,816,821],{},[733,817,818],{"style":723},[32,819,820],{},"--scroll-area-corner-width",[733,822,823,824,827],{"style":723},"Width of the gap where the scrollbars meet; ",[32,825,826],{},"0px"," unless both are visible.",[718,829,830,835],{},[733,831,832],{"style":723},[32,833,834],{},"--scroll-area-corner-height",[733,836,837,838,827],{"style":723},"Height of the gap where the scrollbars meet; ",[32,839,826],{},[189,841,843],{"id":842},"api-reference-viewport","Viewport",[13,845,846,847,650],{},"The element that scrolls. Hides the browser's scrollbars and carries the overflow CSS variables.\nRenders a ",[32,848,649],{},[652,850],{"columns":851,"rows":852},[655,656,657],[853,860,867,875],{"summary":854,"detail":855},[661,662,663],[856,857,858,859],{"label":655,"html":661},{"label":656,"html":662},{"label":657,"html":663},{"label":669,"html":670},{"summary":861,"detail":862},[673,674,675],[863,864,865,866],{"label":655,"html":673},{"label":656,"html":674},{"label":657,"html":675},{"label":669,"html":681},{"summary":868,"detail":869},[684,674,675],[870,871,872,873],{"label":655,"html":684},{"label":656,"html":674},{"label":657,"html":675},{"label":669,"html":874},"Inline style applied before the built-in \u003Ccode>overflow\u003C\u002Fcode>.",{"summary":876,"detail":877},[704,705,675],[878,879,880,881],{"label":655,"html":704},{"label":656,"html":705},{"label":657,"html":675},{"label":669,"html":711},[652,883,884,892],{},[715,885,886],{},[718,887,888,890],{},[721,889,724],{"style":723},[721,891,669],{"style":723},[728,893,894,902,910,918,926,934,942],{},[718,895,896,900],{},[733,897,898],{"style":723},[32,899,737],{},[733,901,740],{"style":723},[718,903,904,908],{},[733,905,906],{"style":723},[32,907,747],{},[733,909,750],{"style":723},[718,911,912,916],{},[733,913,914],{"style":723},[32,915,757],{},[733,917,760],{"style":723},[718,919,920,924],{},[733,921,922],{"style":723},[32,923,767],{},[733,925,770],{"style":723},[718,927,928,932],{},[733,929,930],{"style":723},[32,931,777],{},[733,933,780],{"style":723},[718,935,936,940],{},[733,937,938],{"style":723},[32,939,787],{},[733,941,790],{"style":723},[718,943,944,948],{},[733,945,946],{"style":723},[32,947,797],{},[733,949,800],{"style":723},[652,951,952,960],{},[715,953,954],{},[718,955,956,958],{},[721,957,809],{"style":723},[721,959,669],{"style":723},[728,961,962,971,980,989],{},[718,963,964,968],{},[733,965,966],{"style":723},[32,967,630],{},[733,969,970],{"style":723},"Distance scrolled from the horizontal start edge, in pixels.",[718,972,973,977],{},[733,974,975],{"style":723},[32,976,634],{},[733,978,979],{"style":723},"Distance remaining to the horizontal end edge, in pixels.",[718,981,982,986],{},[733,983,984],{"style":723},[32,985,292],{},[733,987,988],{"style":723},"Distance scrolled from the vertical start edge, in pixels.",[718,990,991,995],{},[733,992,993],{"style":723},[32,994,330],{},[733,996,997],{"style":723},"Distance remaining to the vertical end edge, in pixels.",[189,999,1001],{"id":1000},"api-reference-content","Content",[13,1003,1004,1005,650],{},"A container for the content of the scroll area. Sized to fit its children so horizontal overflow measures correctly.\nRenders a ",[32,1006,649],{},[652,1008],{"columns":1009,"rows":1010},[655,656,657],[1011,1018,1025,1033],{"summary":1012,"detail":1013},[661,662,663],[1014,1015,1016,1017],{"label":655,"html":661},{"label":656,"html":662},{"label":657,"html":663},{"label":669,"html":670},{"summary":1019,"detail":1020},[673,674,675],[1021,1022,1023,1024],{"label":655,"html":673},{"label":656,"html":674},{"label":657,"html":675},{"label":669,"html":681},{"summary":1026,"detail":1027},[684,674,675],[1028,1029,1030,1031],{"label":655,"html":684},{"label":656,"html":674},{"label":657,"html":675},{"label":669,"html":1032},"Inline style applied to the element, after the built-in \u003Ccode>min-width\u003C\u002Fcode>.",{"summary":1034,"detail":1035},[704,705,675],[1036,1037,1038,1039],{"label":655,"html":704},{"label":656,"html":705},{"label":657,"html":675},{"label":669,"html":711},[652,1041,1042,1050],{},[715,1043,1044],{},[718,1045,1046,1048],{},[721,1047,724],{"style":723},[721,1049,669],{"style":723},[728,1051,1052,1060,1068,1076,1084,1092,1100],{},[718,1053,1054,1058],{},[733,1055,1056],{"style":723},[32,1057,737],{},[733,1059,740],{"style":723},[718,1061,1062,1066],{},[733,1063,1064],{"style":723},[32,1065,747],{},[733,1067,750],{"style":723},[718,1069,1070,1074],{},[733,1071,1072],{"style":723},[32,1073,757],{},[733,1075,760],{"style":723},[718,1077,1078,1082],{},[733,1079,1080],{"style":723},[32,1081,767],{},[733,1083,770],{"style":723},[718,1085,1086,1090],{},[733,1087,1088],{"style":723},[32,1089,777],{},[733,1091,780],{"style":723},[718,1093,1094,1098],{},[733,1095,1096],{"style":723},[32,1097,787],{},[733,1099,790],{"style":723},[718,1101,1102,1106],{},[733,1103,1104],{"style":723},[32,1105,797],{},[733,1107,800],{"style":723},[189,1109,1111],{"id":1110},"api-reference-scrollbar","Scrollbar",[13,1113,1114,1115,1118,1119,650],{},"A vertical or horizontal scrollbar for the scroll area. Rendered only while its axis overflows, unless ",[32,1116,1117],{},"keepMounted"," is set. Clicking the track jumps to that position; dragging the thumb scrolls.\nRenders a ",[32,1120,649],{},[652,1122],{"columns":1123,"rows":1124},[655,656,657],[1125,1132,1139,1147,1158,1169],{"summary":1126,"detail":1127},[661,662,663],[1128,1129,1130,1131],{"label":655,"html":661},{"label":656,"html":662},{"label":657,"html":663},{"label":669,"html":670},{"summary":1133,"detail":1134},[673,674,675],[1135,1136,1137,1138],{"label":655,"html":673},{"label":656,"html":674},{"label":657,"html":675},{"label":669,"html":681},{"summary":1140,"detail":1141},[684,674,675],[1142,1143,1144,1145],{"label":655,"html":684},{"label":656,"html":674},{"label":657,"html":675},{"label":669,"html":1146},"Inline style applied to the element, after the built-in positioning.",{"summary":1148,"detail":1152},[1149,1150,1151],"\u003Ccode>orientation\u003C\u002Fcode>","\u003Ccode>'horizontal' | 'vertical'\u003C\u002Fcode>","\u003Ccode>'vertical'\u003C\u002Fcode>",[1153,1154,1155,1156],{"label":655,"html":1149},{"label":656,"html":1150},{"label":657,"html":1151},{"label":669,"html":1157},"Whether the scrollbar controls vertical or horizontal scroll.",{"summary":1159,"detail":1163},[1160,1161,1162],"\u003Ccode>keepMounted\u003C\u002Fcode>","\u003Ccode>boolean\u003C\u002Fcode>","\u003Ccode>false\u003C\u002Fcode>",[1164,1165,1166,1167],{"label":655,"html":1160},{"label":656,"html":1161},{"label":657,"html":1162},{"label":669,"html":1168},"Keep the scrollbar in the DOM when its axis doesn't overflow; hide it with \u003Ccode>data-has-overflow-*\u003C\u002Fcode>.",{"summary":1170,"detail":1172},[704,1171,675],"\u003Ccode>Slot<{ hovering, scrolling, orientation, hasOverflowX, hasOverflowY, overflowXStart, overflowXEnd, overflowYStart, overflowYEnd, cornerHidden }>\u003C\u002Fcode>",[1173,1174,1175,1176],{"label":655,"html":704},{"label":656,"html":1171},{"label":657,"html":675},{"label":669,"html":1177},"Content; receives the scrollbar's hover, scrolling, orientation and overflow state.",[652,1179,1180,1188],{},[715,1181,1182],{},[718,1183,1184,1186],{},[721,1185,724],{"style":723},[721,1187,669],{"style":723},[728,1189,1190,1200,1210,1219,1227,1235,1243,1251,1259],{},[718,1191,1192,1197],{},[733,1193,1194],{"style":723},[32,1195,1196],{},"data-orientation",[733,1198,1199],{"style":723},"Indicates the orientation of the scrollbar.",[718,1201,1202,1207],{},[733,1203,1204],{"style":723},[32,1205,1206],{},"data-hovering",[733,1208,1209],{"style":723},"Present while a mouse or pen is over the scroll area; touch never sets it.",[718,1211,1212,1216],{},[733,1213,1214],{"style":723},[32,1215,737],{},[733,1217,1218],{"style":723},"Present while the user scrolls along this scrollbar's axis.",[718,1220,1221,1225],{},[733,1222,1223],{"style":723},[32,1224,747],{},[733,1226,750],{"style":723},[718,1228,1229,1233],{},[733,1230,1231],{"style":723},[32,1232,757],{},[733,1234,760],{"style":723},[718,1236,1237,1241],{},[733,1238,1239],{"style":723},[32,1240,767],{},[733,1242,770],{"style":723},[718,1244,1245,1249],{},[733,1246,1247],{"style":723},[32,1248,777],{},[733,1250,780],{"style":723},[718,1252,1253,1257],{},[733,1254,1255],{"style":723},[32,1256,787],{},[733,1258,790],{"style":723},[718,1260,1261,1265],{},[733,1262,1263],{"style":723},[32,1264,797],{},[733,1266,800],{"style":723},[652,1268,1269,1277],{},[715,1270,1271],{},[718,1272,1273,1275],{},[721,1274,809],{"style":723},[721,1276,669],{"style":723},[728,1278,1279,1289],{},[718,1280,1281,1286],{},[733,1282,1283],{"style":723},[32,1284,1285],{},"--scroll-area-thumb-height",[733,1287,1288],{"style":723},"The thumb's height; set on a vertical scrollbar.",[718,1290,1291,1296],{},[733,1292,1293],{"style":723},[32,1294,1295],{},"--scroll-area-thumb-width",[733,1297,1298],{"style":723},"The thumb's width; set on a horizontal scrollbar.",[189,1300,1302],{"id":1301},"api-reference-thumb","Thumb",[13,1304,1305,1306,650],{},"The draggable part of the scrollbar that indicates the current scroll position. Sized from the scrollbar's thumb CSS variable, so it needs a cross-axis size of its own.\nRenders a ",[32,1307,649],{},[652,1309],{"columns":1310,"rows":1311},[655,656,657],[1312,1319,1326,1334],{"summary":1313,"detail":1314},[661,662,663],[1315,1316,1317,1318],{"label":655,"html":661},{"label":656,"html":662},{"label":657,"html":663},{"label":669,"html":670},{"summary":1320,"detail":1321},[673,674,675],[1322,1323,1324,1325],{"label":655,"html":673},{"label":656,"html":674},{"label":657,"html":675},{"label":669,"html":681},{"summary":1327,"detail":1328},[684,674,675],[1329,1330,1331,1332],{"label":655,"html":684},{"label":656,"html":674},{"label":657,"html":675},{"label":669,"html":1333},"Inline style applied to the element, before the built-in \u003Ccode>visibility\u003C\u002Fcode> and thumb size.",{"summary":1335,"detail":1337},[704,1336,675],"\u003Ccode>Slot<{ scrolling, orientation }>\u003C\u002Fcode>",[1338,1339,1340,1341],{"label":655,"html":704},{"label":656,"html":1336},{"label":657,"html":675},{"label":669,"html":1342},"Content; receives the thumb's scrolling and orientation state.",[652,1344,1345,1353],{},[715,1346,1347],{},[718,1348,1349,1351],{},[721,1350,724],{"style":723},[721,1352,669],{"style":723},[728,1354,1355,1363],{},[718,1356,1357,1361],{},[733,1358,1359],{"style":723},[32,1360,1196],{},[733,1362,1199],{"style":723},[718,1364,1365,1369],{},[733,1366,1367],{"style":723},[32,1368,737],{},[733,1370,1218],{"style":723},[189,1372,1374],{"id":1373},"api-reference-corner","Corner",[13,1376,1377,1378,650],{},"Fills the gap where the horizontal and vertical scrollbars meet. Rendered only while both are visible.\nRenders a ",[32,1379,649],{},[652,1381],{"columns":1382,"rows":1383},[655,656,657],[1384,1391,1398,1406],{"summary":1385,"detail":1386},[661,662,663],[1387,1388,1389,1390],{"label":655,"html":661},{"label":656,"html":662},{"label":657,"html":663},{"label":669,"html":670},{"summary":1392,"detail":1393},[673,674,675],[1394,1395,1396,1397],{"label":655,"html":673},{"label":656,"html":674},{"label":657,"html":675},{"label":669,"html":681},{"summary":1399,"detail":1400},[684,674,675],[1401,1402,1403,1404],{"label":655,"html":684},{"label":656,"html":674},{"label":657,"html":675},{"label":669,"html":1405},"Inline style applied to the element.",{"summary":1407,"detail":1409},[704,1408,675],"\u003Ccode>Slot\u003C\u002Fcode>",[1410,1411,1412,1413],{"label":655,"html":704},{"label":656,"html":1408},{"label":657,"html":675},{"label":669,"html":1414},"Content.","\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\"> { ScrollArea } \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\"> '@shardsui\u002Fvue\u002Fscroll-area'\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\">ScrollArea.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\">\"h-34 w-96 max-w-[calc(100vw-8rem)]\"\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\">ScrollArea.Viewport\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\">\"h-full rounded-md outline-1 -outline-offset-1 outline-gray-200 focus-visible:outline-2 focus-visible:outline-gray-950\"\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>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">ScrollArea.Content\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\">\"flex flex-col gap-4 py-3 pr-6 pl-4 text-sm\u002F5.5 text-gray-900\"\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\">p\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\">          Reaching for a div and styling it into a button is where most accessibility debt starts. A\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">          native button ships with a role, keyboard activation, focus management, and form\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">          participation — none of which survive when you swap in a generic element.\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\">p\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\">p\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\">          Rebuilding that contract by hand is deceptively deep: a tabindex to make it focusable, a\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">          keydown handler that fires on Enter but waits for Space on keyup to match native behavior,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">          aria-pressed where state applies, and a focus-visible ring that only shows for keyboard\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">          users. Miss one and it works for you but not for a screen reader.\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\">p\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\">p\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\">          The rule that scales: start from the most semantic element that fits, and reach for ARIA\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">          only when the platform gives you nothing — a combobox, a tablist, a disclosure. ARIA is a\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">          promise you have to keep in code; semantic HTML keeps it for you.\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\">p\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\">ScrollArea.Content\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\">ScrollArea.Viewport\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\">ScrollArea.Scrollbar\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\">\"pointer-events-none m-2 flex w-1 justify-center rounded-sm bg-gray-200 opacity-0 transition-opacity data-hovering:pointer-events-auto data-hovering:opacity-100 data-scrolling:pointer-events-auto data-scrolling:opacity-100 data-scrolling:duration-0\"\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>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">ScrollArea.Thumb\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-full rounded-sm bg-gray-500\"\u003C\u002Fspan>\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\">ScrollArea.Scrollbar\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\">ScrollArea.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\"> { ScrollArea } \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\"> '@shardsui\u002Fvue\u002Fscroll-area'\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\">ScrollArea.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\">\"size-72 max-w-[calc(100vw-8rem)]\"\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\">ScrollArea.Viewport\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\">\"h-full rounded-lg border border-gray-200 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-gray-950\"\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>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">ScrollArea.Content\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\">\"p-4\"\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>\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\">\"size-160 rounded-md bg-[repeating-conic-gradient(var(--color-gray-300)_0_25%,var(--color-gray-100)_0_50%)] bg-size-[10rem_10rem]\"\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\">ScrollArea.Content\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\">ScrollArea.Viewport\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\">ScrollArea.Scrollbar\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\">\"pointer-events-none m-2 flex w-1 rounded-sm bg-gray-200 opacity-0 transition-opacity before:absolute before:left-1\u002F2 before:h-full before:w-5 before:-translate-x-1\u002F2 before:content-[''] data-hovering:pointer-events-auto data-hovering:opacity-100 data-scrolling:pointer-events-auto data-scrolling:opacity-100 data-scrolling:duration-0\"\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>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">ScrollArea.Thumb\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-full rounded-sm bg-gray-500\"\u003C\u002Fspan>\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\">ScrollArea.Scrollbar\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\">ScrollArea.Scrollbar\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">      orientation\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"horizontal\"\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\">\"pointer-events-none m-2 flex h-1 rounded-sm bg-gray-200 opacity-0 transition-opacity before:absolute before:inset-x-0 before:-bottom-2 before:h-5 before:w-full before:content-[''] data-hovering:pointer-events-auto data-hovering:opacity-100 data-scrolling:pointer-events-auto data-scrolling:opacity-100 data-scrolling:duration-0\"\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>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">ScrollArea.Thumb\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\">\"h-full rounded-sm bg-gray-500\"\u003C\u002Fspan>\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\">ScrollArea.Scrollbar\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\">ScrollArea.Corner\u003C\u002Fspan>\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\">ScrollArea.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\"> { ScrollArea } \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\"> '@shardsui\u002Fvue\u002Fscroll-area'\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\"> items\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:#032F62;--shiki-dark:#9ECBFF\">  'Semantic HTML'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">  'The type scale'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">  'Leading and tracking'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">  'Flexbox'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">  'Grid'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">  'Focus states'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">  'Contrast ratio'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">  'Design tokens'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">  'Easing and duration'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">  'Final review'\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\">ScrollArea.Root\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\">\"h-48 w-80 max-w-[calc(100vw-8rem)] rounded-lg bg-gray-50 has-[>_:first-child:focus-visible]:outline-2 has-[>_:first-child:focus-visible]:outline-offset-0 has-[>_:first-child:focus-visible]:outline-gray-950\"\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>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">ScrollArea.Viewport\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\">\"h-full rounded-md bg-gray-50 mask-linear-[to_bottom,transparent_0,black_min(40px,var(--scroll-area-overflow-y-start)),black_calc(100%-min(40px,var(--scroll-area-overflow-y-end,40px))),transparent_100%] mask-no-repeat outline-none\"\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>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">ScrollArea.Content\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\">\"py-3 pr-6 pl-4 text-sm\u002F5.5 text-gray-900\"\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\">ol\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\">\"m-0 list-none p-0\"\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\">li\u003C\u002Fspan>\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\">\"(item, i) in items\"\u003C\u002Fspan>\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\">\"item\"\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\">\"flex items-center gap-3 py-1.5\"\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\">span\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-6 text-right text-gray-400 tabular-nums\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>{{ i + 1 }}<\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">span\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\">span\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>{{ item }}<\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">span\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\">li\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\">ol\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\">ScrollArea.Content\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\">ScrollArea.Viewport\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\">ScrollArea.Scrollbar\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\">\"pointer-events-none m-2 flex w-1 justify-center rounded-sm bg-gray-200 opacity-0 transition-opacity duration-150 before:absolute before:left-1\u002F2 before:h-full before:w-5 before:-translate-x-1\u002F2 before:content-[''] data-hovering:pointer-events-auto data-hovering:opacity-100 data-scrolling:pointer-events-auto data-scrolling:opacity-100 data-scrolling:duration-0\"\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>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">ScrollArea.Thumb\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-full rounded-sm bg-gray-500\"\u003C\u002Fspan>\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\">ScrollArea.Scrollbar\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\">ScrollArea.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>",1789390077053]