[{"data":1,"prerenderedAt":600},["ShallowReactive",2],{"i-ph:sidebar":3,"i-ph:caret-left":8,"i-ph:caret-right":10,"components-marquee":12,"i-ph:code":598},{"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":591,"extension":592,"meta":593,"navigation":114,"path":594,"seo":595,"stem":596,"__hash__":597},"docs\u002Fdocs\u002Fcomponents\u002Fmarquee.md","Marquee",{"type":16,"value":17,"toc":586},"minimark",[18,22,31,416,421,506,510,545,549,552,582],[19,20,14],"h1",{"id":21},"marquee",[23,24,25,26,30],"p",{},"A continuously scrolling ticker that loops its content infinitely. It duplicates the slot content behind the scenes to create a seamless loop, and exposes controls for direction, speed, and a stepped\u002Fstagger mode. Animation is disabled if user uses ",[27,28,29],"code",{},"prefer-reduced-motion"," setting on.",[32,33,35],"marquee-example",{"source-path":34},"Marquee\u002FMarquee.vue",[36,37,42],"pre",{"className":38,"code":39,"language":40,"meta":41,"style":41},"language-vue shiki shiki-themes vitesse-dark vitesse-light vitesse-dark","\u003Cscript setup>\nimport { Flex, Marquee } from '@dolanske\u002Fvui'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CFlex column gap=\"m\">\n    \u003CMarquee direction=\"left\" :speed=\"70\">\n      \u003Cspan style=\"font-size: 65px; line-height: 65px; font-weight: 700; white-space: nowrap; padding-right: 2rem;\">\n        Scrolling Left - Fast and Seamless -\n      \u003C\u002Fspan>\n    \u003C\u002FMarquee>\n\n    \u003CMarquee direction=\"right\" :speed=\"40\">\n      \u003Cspan style=\"font-size: 65px; line-height: 65px; font-weight: 700; white-space: nowrap; padding-right: 2rem;\">\n        Scrolling Right - Smooth and Infinite -\n      \u003C\u002Fspan>\n    \u003C\u002FMarquee>\n\n    \u003CMarquee direction=\"left\" :speed=\"30\" stagger>\n      \u003Cspan style=\"font-size: 65px; line-height: 65px; font-weight: 700; white-space: nowrap; padding-right: 2rem;\">\n        Slow Left Scroll - Staggered -\n      \u003C\u002Fspan>\n    \u003C\u002FMarquee>\n  \u003C\u002FFlex>\n\u003C\u002Ftemplate>\n","vue","",[27,43,44,64,99,109,116,126,154,188,210,217,227,237,242,273,292,298,307,316,321,354,373,379,388,397,407],{"__ignoreMap":41},[45,46,49,53,57,61],"span",{"class":47,"line":48},"line",1,[45,50,52],{"class":51},"sP76a","\u003C",[45,54,56],{"class":55},"sKpE2","script",[45,58,60],{"class":59},"sflEz"," setup",[45,62,63],{"class":51},">\n",[45,65,67,70,73,76,79,82,85,88,92,96],{"class":47,"line":66},2,[45,68,69],{"class":55},"import",[45,71,72],{"class":51}," {",[45,74,75],{"class":59}," Flex",[45,77,78],{"class":51},",",[45,80,81],{"class":59}," Marquee",[45,83,84],{"class":51}," }",[45,86,87],{"class":55}," from",[45,89,91],{"class":90},"sBR95"," '",[45,93,95],{"class":94},"sfmH-","@dolanske\u002Fvui",[45,97,98],{"class":90},"'\n",[45,100,102,105,107],{"class":47,"line":101},3,[45,103,104],{"class":51},"\u003C\u002F",[45,106,56],{"class":55},[45,108,63],{"class":51},[45,110,112],{"class":47,"line":111},4,[45,113,115],{"emptyLinePlaceholder":114},true,"\n",[45,117,119,121,124],{"class":47,"line":118},5,[45,120,52],{"class":51},[45,122,123],{"class":55},"template",[45,125,63],{"class":51},[45,127,129,132,135,138,141,144,147,150,152],{"class":47,"line":128},6,[45,130,131],{"class":51},"  \u003C",[45,133,134],{"class":55},"Flex",[45,136,137],{"class":59}," column",[45,139,140],{"class":59}," gap",[45,142,143],{"class":51},"=",[45,145,146],{"class":90},"\"",[45,148,149],{"class":94},"m",[45,151,146],{"class":90},[45,153,63],{"class":51},[45,155,157,160,162,165,167,169,172,174,177,179,181,184,186],{"class":47,"line":156},7,[45,158,159],{"class":51},"    \u003C",[45,161,14],{"class":55},[45,163,164],{"class":59}," direction",[45,166,143],{"class":51},[45,168,146],{"class":90},[45,170,171],{"class":94},"left",[45,173,146],{"class":90},[45,175,176],{"class":59}," :speed",[45,178,143],{"class":51},[45,180,146],{"class":90},[45,182,183],{"class":94},"70",[45,185,146],{"class":90},[45,187,63],{"class":51},[45,189,191,194,196,199,201,203,206,208],{"class":47,"line":190},8,[45,192,193],{"class":51},"      \u003C",[45,195,45],{"class":55},[45,197,198],{"class":59}," style",[45,200,143],{"class":51},[45,202,146],{"class":90},[45,204,205],{"class":94},"font-size: 65px; line-height: 65px; font-weight: 700; white-space: nowrap; padding-right: 2rem;",[45,207,146],{"class":90},[45,209,63],{"class":51},[45,211,213],{"class":47,"line":212},9,[45,214,216],{"class":215},"sX1ls","        Scrolling Left - Fast and Seamless -\n",[45,218,220,223,225],{"class":47,"line":219},10,[45,221,222],{"class":51},"      \u003C\u002F",[45,224,45],{"class":55},[45,226,63],{"class":51},[45,228,230,233,235],{"class":47,"line":229},11,[45,231,232],{"class":51},"    \u003C\u002F",[45,234,14],{"class":55},[45,236,63],{"class":51},[45,238,240],{"class":47,"line":239},12,[45,241,115],{"emptyLinePlaceholder":114},[45,243,245,247,249,251,253,255,258,260,262,264,266,269,271],{"class":47,"line":244},13,[45,246,159],{"class":51},[45,248,14],{"class":55},[45,250,164],{"class":59},[45,252,143],{"class":51},[45,254,146],{"class":90},[45,256,257],{"class":94},"right",[45,259,146],{"class":90},[45,261,176],{"class":59},[45,263,143],{"class":51},[45,265,146],{"class":90},[45,267,268],{"class":94},"40",[45,270,146],{"class":90},[45,272,63],{"class":51},[45,274,276,278,280,282,284,286,288,290],{"class":47,"line":275},14,[45,277,193],{"class":51},[45,279,45],{"class":55},[45,281,198],{"class":59},[45,283,143],{"class":51},[45,285,146],{"class":90},[45,287,205],{"class":94},[45,289,146],{"class":90},[45,291,63],{"class":51},[45,293,295],{"class":47,"line":294},15,[45,296,297],{"class":215},"        Scrolling Right - Smooth and Infinite -\n",[45,299,301,303,305],{"class":47,"line":300},16,[45,302,222],{"class":51},[45,304,45],{"class":55},[45,306,63],{"class":51},[45,308,310,312,314],{"class":47,"line":309},17,[45,311,232],{"class":51},[45,313,14],{"class":55},[45,315,63],{"class":51},[45,317,319],{"class":47,"line":318},18,[45,320,115],{"emptyLinePlaceholder":114},[45,322,324,326,328,330,332,334,336,338,340,342,344,347,349,352],{"class":47,"line":323},19,[45,325,159],{"class":51},[45,327,14],{"class":55},[45,329,164],{"class":59},[45,331,143],{"class":51},[45,333,146],{"class":90},[45,335,171],{"class":94},[45,337,146],{"class":90},[45,339,176],{"class":59},[45,341,143],{"class":51},[45,343,146],{"class":90},[45,345,346],{"class":94},"30",[45,348,146],{"class":90},[45,350,351],{"class":59}," stagger",[45,353,63],{"class":51},[45,355,357,359,361,363,365,367,369,371],{"class":47,"line":356},20,[45,358,193],{"class":51},[45,360,45],{"class":55},[45,362,198],{"class":59},[45,364,143],{"class":51},[45,366,146],{"class":90},[45,368,205],{"class":94},[45,370,146],{"class":90},[45,372,63],{"class":51},[45,374,376],{"class":47,"line":375},21,[45,377,378],{"class":215},"        Slow Left Scroll - Staggered -\n",[45,380,382,384,386],{"class":47,"line":381},22,[45,383,222],{"class":51},[45,385,45],{"class":55},[45,387,63],{"class":51},[45,389,391,393,395],{"class":47,"line":390},23,[45,392,232],{"class":51},[45,394,14],{"class":55},[45,396,63],{"class":51},[45,398,400,403,405],{"class":47,"line":399},24,[45,401,402],{"class":51},"  \u003C\u002F",[45,404,134],{"class":55},[45,406,63],{"class":51},[45,408,410,412,414],{"class":47,"line":409},25,[45,411,104],{"class":51},[45,413,123],{"class":55},[45,415,63],{"class":51},[417,418,420],"h3",{"id":419},"props","Props",[422,423,424,440],"table",{},[425,426,427],"thead",{},[428,429,430,434,437],"tr",{},[431,432,433],"th",{},"Name",[431,435,436],{},"Default",[431,438,439],{},"Type",[441,442,443,468,488],"tbody",{},[428,444,445,451,456],{},[446,447,448],"td",{},[27,449,450],{},"direction",[446,452,453],{},[27,454,455],{},"'right'",[446,457,458,461,462,461,464,467],{},[27,459,460],{},"'left'"," ",[27,463,455],{},[465,466],"br",{}," The direction the content scrolls",[428,469,470,475,480],{},[446,471,472],{},[27,473,474],{},"speed",[446,476,477],{},[27,478,479],{},"50",[446,481,482,461,485,487],{},[27,483,484],{},"number",[465,486],{}," Scroll speed in pixels per second. Higher values scroll faster",[428,489,490,495,498],{},[446,491,492],{},[27,493,494],{},"stagger",[446,496,497],{},"—",[446,499,500,461,503,505],{},[27,501,502],{},"boolean",[465,504],{}," Uses a stepped timing function for a jerky\u002Fticker-style movement instead of smooth scrolling",[417,507,509],{"id":508},"slots","Slots",[422,511,512,524],{},[425,513,514],{},[428,515,516,518,521],{},[431,517,433],{},[431,519,520],{},"Accepts",[431,522,523],{},"Description",[441,525,526],{},[428,527,528,533,538],{},[446,529,530],{},[27,531,532],{},"default",[446,534,535],{},[27,536,537],{},"any",[446,539,540,541,544],{},"The content to scroll. Items should use ",[27,542,543],{},"white-space: nowrap"," to prevent wrapping during animation",[417,546,548],{"id":547},"tokens","Tokens",[23,550,551],{},"CSS variable tokens used for global or per-instance manipulation of certain styling.",[422,553,554,565],{},[425,555,556],{},[428,557,558,561,563],{},[431,559,560],{},"Token",[431,562,436],{},[431,564,523],{},[441,566,567],{},[428,568,569,574,579],{},[446,570,571],{},[27,572,573],{},"--vui-marquee-gap",[446,575,576],{},[27,577,578],{},"0",[446,580,581],{},"Gap between repeated content items",[583,584,585],"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":41,"searchDepth":66,"depth":66,"links":587},[588,589,590],{"id":419,"depth":101,"text":420},{"id":508,"depth":101,"text":509},{"id":547,"depth":101,"text":548},"A continuously scrolling ticker that loops its content infinitely. It duplicates the slot content behind the scenes to create a seamless loop, and exposes controls for direction, speed, and a stepped\u002Fstagger mode. Animation is disabled if user uses prefer-reduced-motion setting on.","md",{},"\u002Fdocs\u002Fcomponents\u002Fmarquee",{"title":14,"description":591},"docs\u002Fcomponents\u002Fmarquee","wT0S9nASrWlkJVgCKJZ6anqNnhQLRZwH_4Gd7N_DIzE",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":599},"\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>",1782200882948]