[{"data":1,"prerenderedAt":640},["ShallowReactive",2],{"i-ph:sidebar":3,"i-ph:caret-left":8,"i-ph:caret-right":10,"components-overflow":12,"i-ph:code":638},{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":7},0,256,false,"\u003Cpath fill=\"currentColor\" d=\"M216 40H40a16 16 0 0 0-16 16v144a16 16 0 0 0 16 16h176a16 16 0 0 0 16-16V56a16 16 0 0 0-16-16M40 152h16a8 8 0 0 0 0-16H40v-16h16a8 8 0 0 0 0-16H40V88h16a8 8 0 0 0 0-16H40V56h40v144H40Zm176 48H96V56h120z\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":9},"\u003Cpath fill=\"currentColor\" d=\"M165.66 202.34a8 8 0 0 1-11.32 11.32l-80-80a8 8 0 0 1 0-11.32l80-80a8 8 0 0 1 11.32 11.32L91.31 128Z\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":11},"\u003Cpath fill=\"currentColor\" d=\"m181.66 133.66l-80 80a8 8 0 0 1-11.32-11.32L164.69 128L90.34 53.66a8 8 0 0 1 11.32-11.32l80 80a8 8 0 0 1 0 11.32\"\u002F>",{"id":13,"title":14,"body":15,"description":25,"extension":632,"meta":633,"navigation":120,"path":634,"seo":635,"stem":636,"__hash__":637},"docs\u002Fdocs\u002Fcomponents\u002Foverflow.md","Overflow",{"type":16,"value":17,"toc":626},"minimark",[18,22,26,379,384,475,479,510,514,517,581,585,592,622],[19,20,14],"h1",{"id":21},"overflow",[23,24,25],"p",{},"A scrollable container with gradient shadow indicators that show when there is more content to scroll to. Supports both vertical and horizontal scrolling.",[27,28,30],"overflow-example",{"source-path":29},"Overflow\u002FOverflow.vue",[31,32,37],"pre",{"className":33,"code":34,"language":35,"meta":36,"style":36},"language-vue shiki shiki-themes vitesse-dark vitesse-light vitesse-dark","\u003Cscript setup>\nimport { Avatar, Card, Flex, Overflow } from '@dolanske\u002Fvui'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CCard :padding=\"false\">\n    \u003COverflow class=\"p-m\" hide-scrollbar>\n      \u003Cdiv style=\"height:200px\">\n        \u003CCard v-for=\"item in avatars\" :key=\"item.name\" class=\"p-s\">\n          \u003CFlex y-center>\n            \u003CAvatar :url=\"item.url\" \u002F>\n            \u003Cstrong class=\"text-l\">{{ item.name }}\u003C\u002Fstrong>\n          \u003C\u002FFlex>\n        \u003C\u002FCard>\n      \u003C\u002Fdiv>\n    \u003C\u002FOverflow>\n  \u003C\u002FCard>\n\u003C\u002Ftemplate>\n","vue","",[38,39,40,60,105,115,122,132,157,182,205,250,264,288,320,330,340,350,360,370],"code",{"__ignoreMap":36},[41,42,45,49,53,57],"span",{"class":43,"line":44},"line",1,[41,46,48],{"class":47},"sP76a","\u003C",[41,50,52],{"class":51},"sKpE2","script",[41,54,56],{"class":55},"sflEz"," setup",[41,58,59],{"class":47},">\n",[41,61,63,66,69,72,75,78,80,83,85,88,91,94,98,102],{"class":43,"line":62},2,[41,64,65],{"class":51},"import",[41,67,68],{"class":47}," {",[41,70,71],{"class":55}," Avatar",[41,73,74],{"class":47},",",[41,76,77],{"class":55}," Card",[41,79,74],{"class":47},[41,81,82],{"class":55}," Flex",[41,84,74],{"class":47},[41,86,87],{"class":55}," Overflow",[41,89,90],{"class":47}," }",[41,92,93],{"class":51}," from",[41,95,97],{"class":96},"sBR95"," '",[41,99,101],{"class":100},"sfmH-","@dolanske\u002Fvui",[41,103,104],{"class":96},"'\n",[41,106,108,111,113],{"class":43,"line":107},3,[41,109,110],{"class":47},"\u003C\u002F",[41,112,52],{"class":51},[41,114,59],{"class":47},[41,116,118],{"class":43,"line":117},4,[41,119,121],{"emptyLinePlaceholder":120},true,"\n",[41,123,125,127,130],{"class":43,"line":124},5,[41,126,48],{"class":47},[41,128,129],{"class":51},"template",[41,131,59],{"class":47},[41,133,135,138,141,144,147,150,153,155],{"class":43,"line":134},6,[41,136,137],{"class":47},"  \u003C",[41,139,140],{"class":51},"Card",[41,142,143],{"class":55}," :padding",[41,145,146],{"class":47},"=",[41,148,149],{"class":96},"\"",[41,151,152],{"class":100},"false",[41,154,149],{"class":96},[41,156,59],{"class":47},[41,158,160,163,165,168,170,172,175,177,180],{"class":43,"line":159},7,[41,161,162],{"class":47},"    \u003C",[41,164,14],{"class":51},[41,166,167],{"class":55}," class",[41,169,146],{"class":47},[41,171,149],{"class":96},[41,173,174],{"class":100},"p-m",[41,176,149],{"class":96},[41,178,179],{"class":55}," hide-scrollbar",[41,181,59],{"class":47},[41,183,185,188,191,194,196,198,201,203],{"class":43,"line":184},8,[41,186,187],{"class":47},"      \u003C",[41,189,190],{"class":51},"div",[41,192,193],{"class":55}," style",[41,195,146],{"class":47},[41,197,149],{"class":96},[41,199,200],{"class":100},"height:200px",[41,202,149],{"class":96},[41,204,59],{"class":47},[41,206,208,211,213,216,218,220,223,225,228,230,232,235,237,239,241,243,246,248],{"class":43,"line":207},9,[41,209,210],{"class":47},"        \u003C",[41,212,140],{"class":51},[41,214,215],{"class":55}," v-for",[41,217,146],{"class":47},[41,219,149],{"class":96},[41,221,222],{"class":100},"item in avatars",[41,224,149],{"class":96},[41,226,227],{"class":55}," :key",[41,229,146],{"class":47},[41,231,149],{"class":96},[41,233,234],{"class":100},"item.name",[41,236,149],{"class":96},[41,238,167],{"class":55},[41,240,146],{"class":47},[41,242,149],{"class":96},[41,244,245],{"class":100},"p-s",[41,247,149],{"class":96},[41,249,59],{"class":47},[41,251,253,256,259,262],{"class":43,"line":252},10,[41,254,255],{"class":47},"          \u003C",[41,257,258],{"class":51},"Flex",[41,260,261],{"class":55}," y-center",[41,263,59],{"class":47},[41,265,267,270,273,276,278,280,283,285],{"class":43,"line":266},11,[41,268,269],{"class":47},"            \u003C",[41,271,272],{"class":51},"Avatar",[41,274,275],{"class":55}," :url",[41,277,146],{"class":47},[41,279,149],{"class":96},[41,281,282],{"class":100},"item.url",[41,284,149],{"class":96},[41,286,287],{"class":47}," \u002F>\n",[41,289,291,293,296,298,300,302,305,307,310,314,316,318],{"class":43,"line":290},12,[41,292,269],{"class":47},[41,294,295],{"class":51},"strong",[41,297,167],{"class":55},[41,299,146],{"class":47},[41,301,149],{"class":96},[41,303,304],{"class":100},"text-l",[41,306,149],{"class":96},[41,308,309],{"class":47},">",[41,311,313],{"class":312},"sX1ls","{{ item.name }}",[41,315,110],{"class":47},[41,317,295],{"class":51},[41,319,59],{"class":47},[41,321,323,326,328],{"class":43,"line":322},13,[41,324,325],{"class":47},"          \u003C\u002F",[41,327,258],{"class":51},[41,329,59],{"class":47},[41,331,333,336,338],{"class":43,"line":332},14,[41,334,335],{"class":47},"        \u003C\u002F",[41,337,140],{"class":51},[41,339,59],{"class":47},[41,341,343,346,348],{"class":43,"line":342},15,[41,344,345],{"class":47},"      \u003C\u002F",[41,347,190],{"class":51},[41,349,59],{"class":47},[41,351,353,356,358],{"class":43,"line":352},16,[41,354,355],{"class":47},"    \u003C\u002F",[41,357,14],{"class":51},[41,359,59],{"class":47},[41,361,363,366,368],{"class":43,"line":362},17,[41,364,365],{"class":47},"  \u003C\u002F",[41,367,140],{"class":51},[41,369,59],{"class":47},[41,371,373,375,377],{"class":43,"line":372},18,[41,374,110],{"class":47},[41,376,129],{"class":51},[41,378,59],{"class":47},[380,381,383],"h3",{"id":382},"props","Props",[385,386,387,403],"table",{},[388,389,390],"thead",{},[391,392,393,397,400],"tr",{},[394,395,396],"th",{},"Name",[394,398,399],{},"Default",[394,401,402],{},"Type",[404,405,406,427,443,459],"tbody",{},[391,407,408,414,417],{},[409,410,411],"td",{},[38,412,413],{},"horizontal",[409,415,416],{},"—",[409,418,419,422,423,426],{},[38,420,421],{},"boolean"," ",[424,425],"br",{}," Use horizontal scrolling instead of vertical",[391,428,429,434,436],{},[409,430,431],{},[38,432,433],{},"hideScrollbar",[409,435,416],{},[409,437,438,422,440,442],{},[38,439,421],{},[424,441],{}," Hides the scrollbar and removes the scrollbar gutter padding",[391,444,445,450,452],{},[409,446,447],{},[38,448,449],{},"hideShadows",[409,451,416],{},[409,453,454,422,456,458],{},[38,455,421],{},[424,457],{}," Hides the gradient shadows indicating more scrollable content",[391,460,461,466,468],{},[409,462,463],{},[38,464,465],{},"snap",[409,467,416],{},[409,469,470,422,472,474],{},[38,471,421],{},[424,473],{}," Enables scroll-snap so items snap into place when scrolling stops",[380,476,478],{"id":477},"slots","Slots",[385,480,481,493],{},[388,482,483],{},[391,484,485,487,490],{},[394,486,396],{},[394,488,489],{},"Accepts",[394,491,492],{},"Description",[404,494,495],{},[391,496,497,502,507],{},[409,498,499],{},[38,500,501],{},"default",[409,503,504],{},[38,505,506],{},"any",[409,508,509],{},"The scrollable content",[380,511,513],{"id":512},"tokens","Tokens",[23,515,516],{},"CSS variable tokens used for global or per-instance manipulation of certain styling.",[385,518,519,530],{},[388,520,521],{},[391,522,523,526,528],{},[394,524,525],{},"Token",[394,527,399],{},[394,529,492],{},[404,531,532,547,562],{},[391,533,534,539,544],{},[409,535,536],{},[38,537,538],{},"--vui-overflow-gutter-size",[409,540,541],{},[38,542,543],{},"8px",[409,545,546],{},"Scrollbar gutter width",[391,548,549,554,559],{},[409,550,551],{},[38,552,553],{},"--vui-overflow-shadow-size",[409,555,556],{},[38,557,558],{},"32px",[409,560,561],{},"Edge fade shadow size",[391,563,564,569,578],{},[409,565,566],{},[38,567,568],{},"--vui-overflow-shadow-color",[409,570,571],{},[572,573,575],"a",{"href":574},"\u002Fdocs\u002Ftokens\u002Fcolors",[38,576,577],{},"var(--color-bg)",[409,579,580],{},"Edge fade shadow color",[380,582,584],{"id":583},"exposes","Exposes",[23,586,587,588,591],{},"When queried via ",[38,589,590],{},"useTemplateRef",", this component exposes",[385,593,594,605],{},[388,595,596],{},[391,597,598,600,602],{},[394,599,396],{},[394,601,402],{},[394,603,604],{},"Usage",[404,606,607],{},[391,608,609,614,619],{},[409,610,611],{},[38,612,613],{},"contentRef",[409,615,616],{},[38,617,618],{},"TemplateRef",[409,620,621],{},"Forwards the ref for the internal overflow content element.",[623,624,625],"style",{},"html pre.shiki code .sP76a, html code.shiki .sP76a{--shiki-dark:#666666;--shiki-light:#999999;--shiki-default:#666666}html pre.shiki code .sKpE2, html code.shiki .sKpE2{--shiki-dark:#4D9375;--shiki-light:#1E754F;--shiki-default:#4D9375}html pre.shiki code .sflEz, html code.shiki .sflEz{--shiki-dark:#BD976A;--shiki-light:#B07D48;--shiki-default:#BD976A}html pre.shiki code .sBR95, html code.shiki .sBR95{--shiki-dark:#C98A7D77;--shiki-light:#B5695977;--shiki-default:#C98A7D77}html pre.shiki code .sfmH-, html code.shiki .sfmH-{--shiki-dark:#C98A7D;--shiki-light:#B56959;--shiki-default:#C98A7D}html pre.shiki code .sX1ls, html code.shiki .sX1ls{--shiki-dark:#DBD7CAEE;--shiki-light:#393A34;--shiki-default:#DBD7CAEE}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"title":36,"searchDepth":62,"depth":62,"links":627},[628,629,630,631],{"id":382,"depth":107,"text":383},{"id":477,"depth":107,"text":478},{"id":512,"depth":107,"text":513},{"id":583,"depth":107,"text":584},"md",{},"\u002Fdocs\u002Fcomponents\u002Foverflow",{"title":14,"description":25},"docs\u002Fcomponents\u002Foverflow","Yp2yDX55X4fZHf6BhcDRrig2MRvhiPcCmznfNVVpg6k",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":639},"\u003Cpath fill=\"currentColor\" d=\"M69.12 94.15L28.5 128l40.62 33.85a8 8 0 1 1-10.24 12.29l-48-40a8 8 0 0 1 0-12.29l48-40a8 8 0 0 1 10.24 12.3m176 27.7l-48-40a8 8 0 1 0-10.24 12.3L227.5 128l-40.62 33.85a8 8 0 1 0 10.24 12.29l48-40a8 8 0 0 0 0-12.29m-82.39-89.37a8 8 0 0 0-10.25 4.79l-64 176a8 8 0 0 0 4.79 10.26A8.1 8.1 0 0 0 96 224a8 8 0 0 0 7.52-5.27l64-176a8 8 0 0 0-4.79-10.25\"\u002F>",1782200882975]