[{"data":1,"prerenderedAt":3122},["ShallowReactive",2],{"navigation_docs":3,"-docs-migration-guides-splide":215,"-docs-migration-guides-splide-surround":3117},[4,20,50,165,175,185],{"title":5,"icon":6,"path":7,"stem":8,"children":9,"page":6},"Getting Started",false,"\u002Fdocs\u002Fgetting-started","docs\u002F1.getting-started",[10,15],{"title":11,"path":12,"stem":13,"icon":14},"Introduction","\u002Fdocs\u002Fgetting-started\u002Fintroduction","docs\u002F1.getting-started\u002F1.introduction","i-lucide-sprout",{"title":16,"path":17,"stem":18,"icon":19},"Installation","\u002Fdocs\u002Fgetting-started\u002Finstallation","docs\u002F1.getting-started\u002F2.installation","i-lucide-download",{"title":21,"path":22,"stem":23,"children":24,"page":6},"Framework Guides","\u002Fdocs\u002Fframework-guides","docs\u002F2.framework-guides",[25,30,35,40,45],{"title":26,"path":27,"stem":28,"icon":29},"Vue and Nuxt","\u002Fdocs\u002Fframework-guides\u002Fvue-nuxt","docs\u002F2.framework-guides\u002F1.vue-nuxt","i-simple-icons-vuedotjs",{"title":31,"path":32,"stem":33,"icon":34},"React and Next.js","\u002Fdocs\u002Fframework-guides\u002Freact-nextjs","docs\u002F2.framework-guides\u002F2.react-nextjs","i-simple-icons-react",{"title":36,"path":37,"stem":38,"icon":39},"Svelte and SvelteKit","\u002Fdocs\u002Fframework-guides\u002Fsvelte-sveltekit","docs\u002F2.framework-guides\u002F3.svelte-sveltekit","i-simple-icons-svelte",{"title":41,"path":42,"stem":43,"icon":44},"Web Components","\u002Fdocs\u002Fframework-guides\u002Fweb-components","docs\u002F2.framework-guides\u002F4.web-components","i-simple-icons-webcomponentsdotorg",{"title":46,"path":47,"stem":48,"icon":49},"Core","\u002Fdocs\u002Fframework-guides\u002Fcore","docs\u002F2.framework-guides\u002F5.core","i-lucide-braces",{"title":51,"path":52,"stem":53,"children":54,"page":6},"Examples","\u002Fdocs\u002Fexamples","docs\u002F3.examples",[55,100,135],{"title":56,"icon":6,"defaultOpen":6,"path":57,"stem":58,"children":59,"page":6},"Basic","\u002Fdocs\u002Fexamples\u002Fbasic","docs\u002F3.examples\u002F1.basic",[60,65,70,75,80,85,90,95],{"title":61,"path":62,"stem":63,"icon":64},"Simple","\u002Fdocs\u002Fexamples\u002Fbasic\u002Fsimple","docs\u002F3.examples\u002F1.basic\u002F1.simple","i-lucide-square",{"title":66,"path":67,"stem":68,"icon":69},"Snapping","\u002Fdocs\u002Fexamples\u002Fbasic\u002Fsnap","docs\u002F3.examples\u002F1.basic\u002F2.snap","i-lucide-magnet",{"title":71,"path":72,"stem":73,"icon":74},"Masonry","\u002Fdocs\u002Fexamples\u002Fbasic\u002Fmasonry","docs\u002F3.examples\u002F1.basic\u002F3.masonry","i-lucide-grid-3x3",{"title":76,"path":77,"stem":78,"icon":79},"Right to Left","\u002Fdocs\u002Fexamples\u002Fbasic\u002Fright-to-left","docs\u002F3.examples\u002F1.basic\u002F4.right-to-left","i-lucide-arrow-left-from-line",{"title":81,"path":82,"stem":83,"icon":84},"Sticky Slides","\u002Fdocs\u002Fexamples\u002Fbasic\u002Fsticky","docs\u002F3.examples\u002F1.basic\u002F5.sticky","i-lucide-pin",{"title":86,"path":87,"stem":88,"icon":89},"Buttons","\u002Fdocs\u002Fexamples\u002Fbasic\u002Fbuttons","docs\u002F3.examples\u002F1.basic\u002F6.buttons","i-lucide-circle-arrow-right",{"title":91,"path":92,"stem":93,"icon":94},"Dots","\u002Fdocs\u002Fexamples\u002Fbasic\u002Fdots","docs\u002F3.examples\u002F1.basic\u002F7.dots","i-lucide-rectangle-ellipsis",{"title":96,"path":97,"stem":98,"icon":99},"Thumbnails","\u002Fdocs\u002Fexamples\u002Fbasic\u002Fthumbnails","docs\u002F3.examples\u002F1.basic\u002F8.thumbnails","i-lucide-layout-list",{"title":101,"icon":6,"defaultOpen":6,"path":102,"stem":103,"children":104,"page":6},"Advanced","\u002Fdocs\u002Fexamples\u002Fadvanced","docs\u002F3.examples\u002F2.advanced",[105,110,115,120,125,130],{"title":106,"path":107,"stem":108,"icon":109},"Cover Flow","\u002Fdocs\u002Fexamples\u002Fadvanced\u002Fcover-flow","docs\u002F3.examples\u002F2.advanced\u002F1.cover-flow","i-lucide-gallery-horizontal-end",{"title":111,"path":112,"stem":113,"icon":114},"Slideshow","\u002Fdocs\u002Fexamples\u002Fadvanced\u002Fslideshow","docs\u002F3.examples\u002F2.advanced\u002F2.slideshow","i-lucide-presentation",{"title":116,"path":117,"stem":118,"icon":119},"Stories","\u002Fdocs\u002Fexamples\u002Fadvanced\u002Fstories","docs\u002F3.examples\u002F2.advanced\u002F2.stories","i-lucide-circle-fading-plus",{"title":121,"path":122,"stem":123,"icon":124},"Smart Stack","\u002Fdocs\u002Fexamples\u002Fadvanced\u002Fsmart-stack","docs\u002F3.examples\u002F2.advanced\u002F3.smart-stack","i-lucide-layers",{"title":126,"path":127,"stem":128,"icon":129},"Cards","\u002Fdocs\u002Fexamples\u002Fadvanced\u002Fcards","docs\u002F3.examples\u002F2.advanced\u002F4.cards","i-lucide-images",{"title":131,"path":132,"stem":133,"icon":134},"Flipbook","\u002Fdocs\u002Fexamples\u002Fadvanced\u002Fflipbook","docs\u002F3.examples\u002F2.advanced\u002F5.flipbook","i-lucide-swatch-book",{"title":136,"icon":6,"defaultOpen":6,"path":137,"stem":138,"children":139,"page":6},"Experimental","\u002Fdocs\u002Fexamples\u002Fexperimental","docs\u002F3.examples\u002F3.experimental",[140,145,150,155,160],{"title":141,"path":142,"stem":143,"icon":144},"CSS Controls","\u002Fdocs\u002Fexamples\u002Fexperimental\u002Fcss-controls","docs\u002F3.examples\u002F3.experimental\u002F1.css-controls","i-lucide-eclipse",{"title":146,"path":147,"stem":148,"icon":149},"Scroll State Query","\u002Fdocs\u002Fexamples\u002Fexperimental\u002Fscroll-state-queries","docs\u002F3.examples\u002F3.experimental\u002F2.scroll-state-queries","i-lucide-anvil",{"title":151,"path":152,"stem":153,"icon":154},"Scroll Snap Events","\u002Fdocs\u002Fexamples\u002Fexperimental\u002Fscroll-snap-changing","docs\u002F3.examples\u002F3.experimental\u002F3.scroll-snap-changing","i-lucide-megaphone",{"title":156,"path":157,"stem":158,"icon":159},"Repeat","\u002Fdocs\u002Fexamples\u002Fexperimental\u002Frepeat","docs\u002F3.examples\u002F3.experimental\u002F4.repeat","i-lucide-repeat",{"title":161,"path":162,"stem":163,"icon":164},"Scroll Trigger","\u002Fdocs\u002Fexamples\u002Fexperimental\u002Fscroll-trigger","docs\u002F3.examples\u002F3.experimental\u002F5.scroll-trigger","i-lucide-bow-arrow",{"title":166,"path":167,"stem":168,"children":169,"page":6},"A11y","\u002Fdocs\u002Fa11y","docs\u002F4.a11y",[170],{"title":171,"path":172,"stem":173,"icon":174},"Accessibility Guide","\u002Fdocs\u002Fa11y\u002Faccessibility-guide","docs\u002F4.a11y\u002Faccessibility-guide","i-lucide-person-standing",{"title":176,"path":177,"stem":178,"children":179,"page":6},"Ai","\u002Fdocs\u002Fai","docs\u002F5.AI",[180],{"title":181,"path":182,"stem":183,"icon":184},"Agent Skills","\u002Fdocs\u002Fai\u002Fagent-skills","docs\u002F5.AI\u002F1.agent-skills","i-lucide-sparkles",{"title":186,"icon":6,"path":187,"stem":188,"children":189,"page":6},"Migration Guides","\u002Fdocs\u002Fmigration-guides","docs\u002F6.migration-guides",[190,195,200,205,210],{"title":191,"path":192,"stem":193,"icon":194},"Embla","\u002Fdocs\u002Fmigration-guides\u002Fembla","docs\u002F6.migration-guides\u002F1.embla","i-lucide-atom",{"title":196,"path":197,"stem":198,"icon":199},"Swiper","\u002Fdocs\u002Fmigration-guides\u002Fswiper","docs\u002F6.migration-guides\u002F2.swiper","i-lucide-circle-slash",{"title":201,"path":202,"stem":203,"icon":204},"Splide","\u002Fdocs\u002Fmigration-guides\u002Fsplide","docs\u002F6.migration-guides\u002F3.splide","i-lucide-diamond",{"title":206,"path":207,"stem":208,"icon":209},"Slick","\u002Fdocs\u002Fmigration-guides\u002Fslick","docs\u002F6.migration-guides\u002F4.slick","i-lucide-ampersand",{"title":211,"path":212,"stem":213,"icon":214},"Flickity","\u002Fdocs\u002Fmigration-guides\u002Fflickity","docs\u002F6.migration-guides\u002F5.flickity","i-lucide-smartphone",{"id":216,"title":201,"body":217,"description":3108,"extension":3109,"links":3110,"meta":3111,"navigation":3112,"path":202,"seo":3113,"stem":203,"__hash__":3116},"docs\u002Fdocs\u002F6.migration-guides\u002F3.splide.md",{"type":218,"value":219,"toc":3096},"minimark",[220,224,227,232,235,271,277,280,283,401,404,430,434,437,1762,1765,1768,1945,1948,2067,2070,2257,2261,2269,2356,2359,2435,2439,2449,2461,2835,2839,2842,2932,2935,2939,2942,2945,3005,3009,3061,3065,3092],[221,222,223],"p",{},"Splide builds a carousel from a root element, track, list, slide elements, options, extensions, and a JavaScript instance.",[221,225,226],{},"Blossom keeps the carousel as a native scroll container. Layout, slide sizing, gaps, snapping, and responsive behavior belong in CSS, while Blossom adds dragging and small convenience methods.",[228,229,231],"h2",{"id":230},"migration-mindset","Migration mindset",[221,233,234],{},"When moving from Splide to Blossom, migrate the carousel in three steps:",[236,237,238,247,268],"ol",{},[239,240,241,242,246],"li",{},"Replace the Splide root, track, and list structure with a single ",[243,244,245],"code",{},"\u003CBlossomCarousel>"," root.",[239,248,249,250,253,254,253,257,253,260,263,264,267],{},"Move Splide options such as ",[243,251,252],{},"perPage",", ",[243,255,256],{},"gap",[243,258,259],{},"focus",[243,261,262],{},"direction",", and ",[243,265,266],{},"breakpoints"," into CSS.",[239,269,270],{},"Replace Splide instance calls and events with Blossom methods, native scroll APIs, and browser observers.",[272,273,276],"note",{"color":274,"icon":275},"primary","i-lucide-lightbulb","Splide migrations usually remove wrapper markup. The Blossom carousel root is the element that scrolls.",[228,278,16],{"id":279},"installation",[221,281,282],{},"Remove Splide and install the matching Blossom package for your framework.",[284,285,287,327,353,379],"code-group",{"sync":286},"migration-code-style",[288,289,295],"pre",{"className":290,"code":291,"filename":292,"language":293,"meta":294,"style":294},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","npm uninstall @splidejs\u002Fvue-splide @splidejs\u002Fsplide\nnpm install @blossom-carousel\u002Fvue\n","Vue","bash","",[243,296,297,316],{"__ignoreMap":294},[298,299,302,306,310,313],"span",{"class":300,"line":301},"line",1,[298,303,305],{"class":304},"sBMFI","npm",[298,307,309],{"class":308},"sfazB"," uninstall",[298,311,312],{"class":308}," @splidejs\u002Fvue-splide",[298,314,315],{"class":308}," @splidejs\u002Fsplide\n",[298,317,319,321,324],{"class":300,"line":318},2,[298,320,305],{"class":304},[298,322,323],{"class":308}," install",[298,325,326],{"class":308}," @blossom-carousel\u002Fvue\n",[288,328,331],{"className":290,"code":329,"filename":330,"language":293,"meta":294,"style":294},"npm uninstall @splidejs\u002Freact-splide @splidejs\u002Fsplide\nnpm install @blossom-carousel\u002Freact\n","React",[243,332,333,344],{"__ignoreMap":294},[298,334,335,337,339,342],{"class":300,"line":301},[298,336,305],{"class":304},[298,338,309],{"class":308},[298,340,341],{"class":308}," @splidejs\u002Freact-splide",[298,343,315],{"class":308},[298,345,346,348,350],{"class":300,"line":318},[298,347,305],{"class":304},[298,349,323],{"class":308},[298,351,352],{"class":308}," @blossom-carousel\u002Freact\n",[288,354,357],{"className":290,"code":355,"filename":356,"language":293,"meta":294,"style":294},"npm uninstall @splidejs\u002Fsvelte-splide @splidejs\u002Fsplide\nnpm install @blossom-carousel\u002Fsvelte\n","Svelte",[243,358,359,370],{"__ignoreMap":294},[298,360,361,363,365,368],{"class":300,"line":301},[298,362,305],{"class":304},[298,364,309],{"class":308},[298,366,367],{"class":308}," @splidejs\u002Fsvelte-splide",[298,369,315],{"class":308},[298,371,372,374,376],{"class":300,"line":318},[298,373,305],{"class":304},[298,375,323],{"class":308},[298,377,378],{"class":308}," @blossom-carousel\u002Fsvelte\n",[288,380,382],{"className":290,"code":381,"filename":46,"language":293,"meta":294,"style":294},"npm uninstall @splidejs\u002Fsplide\nnpm install @blossom-carousel\u002Fcore\n",[243,383,384,392],{"__ignoreMap":294},[298,385,386,388,390],{"class":300,"line":301},[298,387,305],{"class":304},[298,389,309],{"class":308},[298,391,315],{"class":308},[298,393,394,396,398],{"class":300,"line":318},[298,395,305],{"class":304},[298,397,323],{"class":308},[298,399,400],{"class":308}," @blossom-carousel\u002Fcore\n",[221,402,403],{},"Import Blossom's core stylesheet once in your app.",[288,405,409],{"className":406,"code":407,"language":408,"meta":294,"style":294},"language-js shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import \"@blossom-carousel\u002Fcore\u002Fstyle.css\";\n","js",[243,410,411],{"__ignoreMap":294},[298,412,413,417,421,424,427],{"class":300,"line":301},[298,414,416],{"class":415},"s7zQu","import",[298,418,420],{"class":419},"sMK4o"," \"",[298,422,423],{"class":308},"@blossom-carousel\u002Fcore\u002Fstyle.css",[298,425,426],{"class":419},"\"",[298,428,429],{"class":419},";\n",[228,431,433],{"id":432},"component-structure","Component structure",[221,435,436],{},"Splide usually needs a root, track, list, and slide elements. Blossom uses one scroll container with direct slide children.",[284,438,439,814,1150,1475],{"sync":286},[288,440,444],{"className":441,"code":442,"filename":292,"language":443,"meta":294,"style":294},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight has-diff","\u003Cscript setup lang=\"ts\">\nimport { Splide, SplideSlide } from \"@splidejs\u002Fvue-splide\"; \u002F\u002F [!code --]\nimport \"@splidejs\u002Fvue-splide\u002Fcss\"; \u002F\u002F [!code --]\nimport { BlossomCarousel } from \"@blossom-carousel\u002Fvue\"; \u002F\u002F [!code ++]\nimport \"@blossom-carousel\u002Fcore\u002Fstyle.css\"; \u002F\u002F [!code ++]\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CSplide :options=\"{ perPage: 4, gap: '1rem' }\"> \u003C!-- [!code --] -->\n    \u003CSplideSlide>Slide 1\u003C\u002FSplideSlide> \u003C!-- [!code --] -->\n    \u003CSplideSlide>Slide 2\u003C\u002FSplideSlide> \u003C!-- [!code --] -->\n    \u003CSplideSlide>Slide 3\u003C\u002FSplideSlide> \u003C!-- [!code --] -->\n  \u003C\u002FSplide> \u003C!-- [!code --] -->\n  \u003CBlossomCarousel class=\"carousel grid! grid-auto-cols grid-cols-[calc((100% - 3rem) \u002F 4)] gap-4\"> \u003C!-- [!code ++] -->\n    \u003Cdiv class=\"slide snap-start\">Slide 1\u003C\u002Fdiv> \u003C!-- [!code ++] -->\n    \u003Cdiv class=\"slide snap-start\">Slide 2\u003C\u002Fdiv> \u003C!-- [!code ++] -->\n    \u003Cdiv class=\"slide snap-start\">Slide 3\u003C\u002Fdiv> \u003C!-- [!code ++] -->\n  \u003C\u002FBlossomCarousel> \u003C!-- [!code ++] -->\n\u003C\u002Ftemplate>\n","vue",[243,445,446,475,511,526,551,565,575,582,592,616,637,656,675,686,709,739,767,795,805],{"__ignoreMap":294},[298,447,448,451,455,459,462,465,467,470,472],{"class":300,"line":301},[298,449,450],{"class":419},"\u003C",[298,452,454],{"class":453},"swJcz","script",[298,456,458],{"class":457},"spNyl"," setup",[298,460,461],{"class":457}," lang",[298,463,464],{"class":419},"=",[298,466,426],{"class":419},[298,468,469],{"class":308},"ts",[298,471,426],{"class":419},[298,473,474],{"class":419},">\n",[298,476,480,482,485,489,492,495,498,501,503,506,508],{"class":477,"line":318},[300,478,479],"diff","remove",[298,481,416],{"class":415},[298,483,484],{"class":419}," {",[298,486,488],{"class":487},"sTEyZ"," Splide",[298,490,491],{"class":419},",",[298,493,494],{"class":487}," SplideSlide",[298,496,497],{"class":419}," }",[298,499,500],{"class":415}," from",[298,502,420],{"class":419},[298,504,505],{"class":308},"@splidejs\u002Fvue-splide",[298,507,426],{"class":419},[298,509,510],{"class":419},";",[298,512,515,517,519,522,524],{"class":513,"line":514},[300,478,479],3,[298,516,416],{"class":415},[298,518,420],{"class":419},[298,520,521],{"class":308},"@splidejs\u002Fvue-splide\u002Fcss",[298,523,426],{"class":419},[298,525,510],{"class":419},[298,527,531,533,535,538,540,542,544,547,549],{"class":528,"line":530},[300,478,529],"add",4,[298,532,416],{"class":415},[298,534,484],{"class":419},[298,536,537],{"class":487}," BlossomCarousel",[298,539,497],{"class":419},[298,541,500],{"class":415},[298,543,420],{"class":419},[298,545,546],{"class":308},"@blossom-carousel\u002Fvue",[298,548,426],{"class":419},[298,550,510],{"class":419},[298,552,555,557,559,561,563],{"class":553,"line":554},[300,478,529],5,[298,556,416],{"class":415},[298,558,420],{"class":419},[298,560,423],{"class":308},[298,562,426],{"class":419},[298,564,510],{"class":419},[298,566,568,571,573],{"class":300,"line":567},6,[298,569,570],{"class":419},"\u003C\u002F",[298,572,454],{"class":453},[298,574,474],{"class":419},[298,576,578],{"class":300,"line":577},7,[298,579,581],{"emptyLinePlaceholder":580},true,"\n",[298,583,585,587,590],{"class":300,"line":584},8,[298,586,450],{"class":419},[298,588,589],{"class":453},"template",[298,591,474],{"class":419},[298,593,596,599,601,604,606,608,611,613],{"class":594,"line":595},[300,478,479],9,[298,597,598],{"class":419},"  \u003C",[298,600,201],{"class":453},[298,602,603],{"class":457}," :options",[298,605,464],{"class":419},[298,607,426],{"class":419},[298,609,610],{"class":308},"{ perPage: 4, gap: '1rem' }",[298,612,426],{"class":419},[298,614,615],{"class":419},">",[298,617,620,623,626,628,631,633,635],{"class":618,"line":619},[300,478,479],10,[298,621,622],{"class":419},"    \u003C",[298,624,625],{"class":453},"SplideSlide",[298,627,615],{"class":419},[298,629,630],{"class":487},"Slide 1",[298,632,570],{"class":419},[298,634,625],{"class":453},[298,636,615],{"class":419},[298,638,641,643,645,647,650,652,654],{"class":639,"line":640},[300,478,479],11,[298,642,622],{"class":419},[298,644,625],{"class":453},[298,646,615],{"class":419},[298,648,649],{"class":487},"Slide 2",[298,651,570],{"class":419},[298,653,625],{"class":453},[298,655,615],{"class":419},[298,657,660,662,664,666,669,671,673],{"class":658,"line":659},[300,478,479],12,[298,661,622],{"class":419},[298,663,625],{"class":453},[298,665,615],{"class":419},[298,667,668],{"class":487},"Slide 3",[298,670,570],{"class":419},[298,672,625],{"class":453},[298,674,615],{"class":419},[298,676,679,682,684],{"class":677,"line":678},[300,478,479],13,[298,680,681],{"class":419},"  \u003C\u002F",[298,683,201],{"class":453},[298,685,615],{"class":419},[298,687,690,692,695,698,700,702,705,707],{"class":688,"line":689},[300,478,529],14,[298,691,598],{"class":419},[298,693,694],{"class":453},"BlossomCarousel",[298,696,697],{"class":457}," class",[298,699,464],{"class":419},[298,701,426],{"class":419},[298,703,704],{"class":308},"carousel grid! grid-auto-cols grid-cols-[calc((100% - 3rem) \u002F 4)] gap-4",[298,706,426],{"class":419},[298,708,615],{"class":419},[298,710,713,715,718,720,722,724,727,729,731,733,735,737],{"class":711,"line":712},[300,478,529],15,[298,714,622],{"class":419},[298,716,717],{"class":453},"div",[298,719,697],{"class":457},[298,721,464],{"class":419},[298,723,426],{"class":419},[298,725,726],{"class":308},"slide snap-start",[298,728,426],{"class":419},[298,730,615],{"class":419},[298,732,630],{"class":487},[298,734,570],{"class":419},[298,736,717],{"class":453},[298,738,615],{"class":419},[298,740,743,745,747,749,751,753,755,757,759,761,763,765],{"class":741,"line":742},[300,478,529],16,[298,744,622],{"class":419},[298,746,717],{"class":453},[298,748,697],{"class":457},[298,750,464],{"class":419},[298,752,426],{"class":419},[298,754,726],{"class":308},[298,756,426],{"class":419},[298,758,615],{"class":419},[298,760,649],{"class":487},[298,762,570],{"class":419},[298,764,717],{"class":453},[298,766,615],{"class":419},[298,768,771,773,775,777,779,781,783,785,787,789,791,793],{"class":769,"line":770},[300,478,529],17,[298,772,622],{"class":419},[298,774,717],{"class":453},[298,776,697],{"class":457},[298,778,464],{"class":419},[298,780,426],{"class":419},[298,782,726],{"class":308},[298,784,426],{"class":419},[298,786,615],{"class":419},[298,788,668],{"class":487},[298,790,570],{"class":419},[298,792,717],{"class":453},[298,794,615],{"class":419},[298,796,799,801,803],{"class":797,"line":798},[300,478,529],18,[298,800,681],{"class":419},[298,802,694],{"class":453},[298,804,615],{"class":419},[298,806,808,810,812],{"class":300,"line":807},19,[298,809,570],{"class":419},[298,811,589],{"class":453},[298,813,474],{"class":419},[288,815,819],{"className":816,"code":817,"filename":330,"language":818,"meta":294,"style":294},"language-tsx shiki shiki-themes material-theme-lighter material-theme material-theme-palenight has-diff","import { Splide, SplideSlide } from \"@splidejs\u002Freact-splide\"; \u002F\u002F [!code --]\nimport \"@splidejs\u002Freact-splide\u002Fcss\"; \u002F\u002F [!code --]\nimport { BlossomCarousel } from \"@blossom-carousel\u002Freact\"; \u002F\u002F [!code ++]\nimport \"@blossom-carousel\u002Fcore\u002Fstyle.css\"; \u002F\u002F [!code ++]\n\nexport function Carousel() {\n  return (\n    \u003CSplide options={{ perPage: 4, gap: \"1rem\" }}> {\u002F* [!code --] *\u002F}\n      \u003CSplideSlide>Slide 1\u003C\u002FSplideSlide> {\u002F* [!code --] *\u002F}\n      \u003CSplideSlide>Slide 2\u003C\u002FSplideSlide> {\u002F* [!code --] *\u002F}\n      \u003CSplideSlide>Slide 3\u003C\u002FSplideSlide> {\u002F* [!code --] *\u002F}\n    \u003C\u002FSplide> {\u002F* [!code --] *\u002F}\n    \u003CBlossomCarousel className=\"carousel grid! grid-auto-cols grid-cols-[calc((100% - 3rem) \u002F 4)] gap-4\"> {\u002F* [!code ++] *\u002F}\n      \u003Cdiv className=\"slide snap-start\">Slide 1\u003C\u002Fdiv> {\u002F* [!code ++] *\u002F}\n      \u003Cdiv className=\"slide snap-start\">Slide 2\u003C\u002Fdiv> {\u002F* [!code ++] *\u002F}\n      \u003Cdiv className=\"slide snap-start\">Slide 3\u003C\u002Fdiv> {\u002F* [!code ++] *\u002F}\n    \u003C\u002FBlossomCarousel> {\u002F* [!code ++] *\u002F}\n  );\n}\n","tsx",[243,820,821,847,861,883,896,900,918,926,966,984,1001,1018,1028,1048,1075,1102,1129,1138,1145],{"__ignoreMap":294},[298,822,824,826,828,830,832,834,836,838,840,843,845],{"class":823,"line":301},[300,478,479],[298,825,416],{"class":415},[298,827,484],{"class":419},[298,829,488],{"class":487},[298,831,491],{"class":419},[298,833,494],{"class":487},[298,835,497],{"class":419},[298,837,500],{"class":415},[298,839,420],{"class":419},[298,841,842],{"class":308},"@splidejs\u002Freact-splide",[298,844,426],{"class":419},[298,846,510],{"class":419},[298,848,850,852,854,857,859],{"class":849,"line":318},[300,478,479],[298,851,416],{"class":415},[298,853,420],{"class":419},[298,855,856],{"class":308},"@splidejs\u002Freact-splide\u002Fcss",[298,858,426],{"class":419},[298,860,510],{"class":419},[298,862,864,866,868,870,872,874,876,879,881],{"class":863,"line":514},[300,478,529],[298,865,416],{"class":415},[298,867,484],{"class":419},[298,869,537],{"class":487},[298,871,497],{"class":419},[298,873,500],{"class":415},[298,875,420],{"class":419},[298,877,878],{"class":308},"@blossom-carousel\u002Freact",[298,880,426],{"class":419},[298,882,510],{"class":419},[298,884,886,888,890,892,894],{"class":885,"line":530},[300,478,529],[298,887,416],{"class":415},[298,889,420],{"class":419},[298,891,423],{"class":308},[298,893,426],{"class":419},[298,895,510],{"class":419},[298,897,898],{"class":300,"line":554},[298,899,581],{"emptyLinePlaceholder":580},[298,901,902,905,908,912,915],{"class":300,"line":567},[298,903,904],{"class":415},"export",[298,906,907],{"class":457}," function",[298,909,911],{"class":910},"s2Zo4"," Carousel",[298,913,914],{"class":419},"()",[298,916,917],{"class":419}," {\n",[298,919,920,923],{"class":300,"line":577},[298,921,922],{"class":415},"  return",[298,924,925],{"class":453}," (\n",[298,927,929,931,933,936,939,942,945,949,951,954,956,958,961,963],{"class":928,"line":584},[300,478,479],[298,930,622],{"class":419},[298,932,201],{"class":304},[298,934,935],{"class":457}," options",[298,937,938],{"class":419},"={{",[298,940,941],{"class":453}," perPage",[298,943,944],{"class":419},":",[298,946,948],{"class":947},"sbssI"," 4",[298,950,491],{"class":419},[298,952,953],{"class":453}," gap",[298,955,944],{"class":419},[298,957,420],{"class":419},[298,959,960],{"class":308},"1rem",[298,962,426],{"class":419},[298,964,965],{"class":419}," }}>",[298,967,969,972,974,976,978,980,982],{"class":968,"line":595},[300,478,479],[298,970,971],{"class":419},"      \u003C",[298,973,625],{"class":304},[298,975,615],{"class":419},[298,977,630],{"class":487},[298,979,570],{"class":419},[298,981,625],{"class":304},[298,983,615],{"class":419},[298,985,987,989,991,993,995,997,999],{"class":986,"line":619},[300,478,479],[298,988,971],{"class":419},[298,990,625],{"class":304},[298,992,615],{"class":419},[298,994,649],{"class":487},[298,996,570],{"class":419},[298,998,625],{"class":304},[298,1000,615],{"class":419},[298,1002,1004,1006,1008,1010,1012,1014,1016],{"class":1003,"line":640},[300,478,479],[298,1005,971],{"class":419},[298,1007,625],{"class":304},[298,1009,615],{"class":419},[298,1011,668],{"class":487},[298,1013,570],{"class":419},[298,1015,625],{"class":304},[298,1017,615],{"class":419},[298,1019,1021,1024,1026],{"class":1020,"line":659},[300,478,479],[298,1022,1023],{"class":419},"    \u003C\u002F",[298,1025,201],{"class":304},[298,1027,615],{"class":419},[298,1029,1031,1033,1035,1038,1040,1042,1044,1046],{"class":1030,"line":678},[300,478,529],[298,1032,622],{"class":419},[298,1034,694],{"class":304},[298,1036,1037],{"class":457}," className",[298,1039,464],{"class":419},[298,1041,426],{"class":419},[298,1043,704],{"class":308},[298,1045,426],{"class":419},[298,1047,615],{"class":419},[298,1049,1051,1053,1055,1057,1059,1061,1063,1065,1067,1069,1071,1073],{"class":1050,"line":689},[300,478,529],[298,1052,971],{"class":419},[298,1054,717],{"class":453},[298,1056,1037],{"class":457},[298,1058,464],{"class":419},[298,1060,426],{"class":419},[298,1062,726],{"class":308},[298,1064,426],{"class":419},[298,1066,615],{"class":419},[298,1068,630],{"class":487},[298,1070,570],{"class":419},[298,1072,717],{"class":453},[298,1074,615],{"class":419},[298,1076,1078,1080,1082,1084,1086,1088,1090,1092,1094,1096,1098,1100],{"class":1077,"line":712},[300,478,529],[298,1079,971],{"class":419},[298,1081,717],{"class":453},[298,1083,1037],{"class":457},[298,1085,464],{"class":419},[298,1087,426],{"class":419},[298,1089,726],{"class":308},[298,1091,426],{"class":419},[298,1093,615],{"class":419},[298,1095,649],{"class":487},[298,1097,570],{"class":419},[298,1099,717],{"class":453},[298,1101,615],{"class":419},[298,1103,1105,1107,1109,1111,1113,1115,1117,1119,1121,1123,1125,1127],{"class":1104,"line":742},[300,478,529],[298,1106,971],{"class":419},[298,1108,717],{"class":453},[298,1110,1037],{"class":457},[298,1112,464],{"class":419},[298,1114,426],{"class":419},[298,1116,726],{"class":308},[298,1118,426],{"class":419},[298,1120,615],{"class":419},[298,1122,668],{"class":487},[298,1124,570],{"class":419},[298,1126,717],{"class":453},[298,1128,615],{"class":419},[298,1130,1132,1134,1136],{"class":1131,"line":770},[300,478,529],[298,1133,1023],{"class":419},[298,1135,694],{"class":304},[298,1137,615],{"class":419},[298,1139,1140,1143],{"class":300,"line":798},[298,1141,1142],{"class":453},"  )",[298,1144,429],{"class":419},[298,1146,1147],{"class":300,"line":807},[298,1148,1149],{"class":419},"}\n",[288,1151,1155],{"className":1152,"code":1153,"filename":356,"language":1154,"meta":294,"style":294},"language-svelte shiki shiki-themes material-theme-lighter material-theme material-theme-palenight has-diff","\u003Cscript>\n  import { Splide, SplideSlide } from \"@splidejs\u002Fsvelte-splide\"; \u002F\u002F [!code --]\n  import \"@splidejs\u002Fsvelte-splide\u002Fcss\"; \u002F\u002F [!code --]\n  import BlossomCarousel from \"@blossom-carousel\u002Fsvelte\"; \u002F\u002F [!code ++]\n  import \"@blossom-carousel\u002Fcore\u002Fstyle.css\"; \u002F\u002F [!code ++]\n\n  const options = { perPage: 4, gap: \"1rem\" }; \u002F\u002F [!code --]\n\u003C\u002Fscript>\n\n\u003CSplide {options}> \u003C!-- [!code --] -->\n  \u003CSplideSlide>Slide 1\u003C\u002FSplideSlide> \u003C!-- [!code --] -->\n  \u003CSplideSlide>Slide 2\u003C\u002FSplideSlide> \u003C!-- [!code --] -->\n  \u003CSplideSlide>Slide 3\u003C\u002FSplideSlide> \u003C!-- [!code --] -->\n\u003C\u002FSplide> \u003C!-- [!code --] -->\n\u003CBlossomCarousel class=\"carousel grid! grid-auto-cols grid-cols-[calc((100% - 3rem) \u002F 4)] gap-4\"> \u003C!-- [!code ++] -->\n  \u003Cdiv class=\"slide snap-start\">Slide 1\u003C\u002Fdiv> \u003C!-- [!code ++] -->\n  \u003Cdiv class=\"slide snap-start\">Slide 2\u003C\u002Fdiv> \u003C!-- [!code ++] -->\n  \u003Cdiv class=\"slide snap-start\">Slide 3\u003C\u002Fdiv> \u003C!-- [!code ++] -->\n\u003C\u002FBlossomCarousel> \u003C!-- [!code ++] -->\n","svelte",[243,1156,1157,1165,1192,1206,1226,1239,1243,1277,1285,1289,1306,1323,1340,1357,1366,1385,1412,1439,1466],{"__ignoreMap":294},[298,1158,1159,1161,1163],{"class":300,"line":301},[298,1160,450],{"class":419},[298,1162,454],{"class":453},[298,1164,474],{"class":419},[298,1166,1168,1171,1173,1175,1177,1179,1181,1183,1185,1188,1190],{"class":1167,"line":318},[300,478,479],[298,1169,1170],{"class":415},"  import",[298,1172,484],{"class":419},[298,1174,488],{"class":487},[298,1176,491],{"class":419},[298,1178,494],{"class":487},[298,1180,497],{"class":419},[298,1182,500],{"class":415},[298,1184,420],{"class":419},[298,1186,1187],{"class":308},"@splidejs\u002Fsvelte-splide",[298,1189,426],{"class":419},[298,1191,510],{"class":419},[298,1193,1195,1197,1199,1202,1204],{"class":1194,"line":514},[300,478,479],[298,1196,1170],{"class":415},[298,1198,420],{"class":419},[298,1200,1201],{"class":308},"@splidejs\u002Fsvelte-splide\u002Fcss",[298,1203,426],{"class":419},[298,1205,510],{"class":419},[298,1207,1209,1211,1214,1217,1219,1222,1224],{"class":1208,"line":530},[300,478,529],[298,1210,1170],{"class":415},[298,1212,1213],{"class":487}," BlossomCarousel ",[298,1215,1216],{"class":415},"from",[298,1218,420],{"class":419},[298,1220,1221],{"class":308},"@blossom-carousel\u002Fsvelte",[298,1223,426],{"class":419},[298,1225,510],{"class":419},[298,1227,1229,1231,1233,1235,1237],{"class":1228,"line":554},[300,478,529],[298,1230,1170],{"class":415},[298,1232,420],{"class":419},[298,1234,423],{"class":308},[298,1236,426],{"class":419},[298,1238,510],{"class":419},[298,1240,1241],{"class":300,"line":567},[298,1242,581],{"emptyLinePlaceholder":580},[298,1244,1246,1249,1252,1254,1256,1258,1260,1262,1264,1266,1268,1270,1272,1274],{"class":1245,"line":577},[300,478,479],[298,1247,1248],{"class":457},"  const",[298,1250,1251],{"class":487}," options ",[298,1253,464],{"class":419},[298,1255,484],{"class":419},[298,1257,941],{"class":453},[298,1259,944],{"class":419},[298,1261,948],{"class":947},[298,1263,491],{"class":419},[298,1265,953],{"class":453},[298,1267,944],{"class":419},[298,1269,420],{"class":419},[298,1271,960],{"class":308},[298,1273,426],{"class":419},[298,1275,1276],{"class":419}," };",[298,1278,1279,1281,1283],{"class":300,"line":584},[298,1280,570],{"class":419},[298,1282,454],{"class":453},[298,1284,474],{"class":419},[298,1286,1287],{"class":300,"line":595},[298,1288,581],{"emptyLinePlaceholder":580},[298,1290,1292,1294,1296,1298,1301,1304],{"class":1291,"line":619},[300,478,479],[298,1293,450],{"class":419},[298,1295,201],{"class":304},[298,1297,484],{"class":457},[298,1299,1300],{"class":487},"options",[298,1302,1303],{"class":457},"}",[298,1305,615],{"class":419},[298,1307,1309,1311,1313,1315,1317,1319,1321],{"class":1308,"line":640},[300,478,479],[298,1310,598],{"class":419},[298,1312,625],{"class":304},[298,1314,615],{"class":419},[298,1316,630],{"class":487},[298,1318,570],{"class":419},[298,1320,625],{"class":304},[298,1322,615],{"class":419},[298,1324,1326,1328,1330,1332,1334,1336,1338],{"class":1325,"line":659},[300,478,479],[298,1327,598],{"class":419},[298,1329,625],{"class":304},[298,1331,615],{"class":419},[298,1333,649],{"class":487},[298,1335,570],{"class":419},[298,1337,625],{"class":304},[298,1339,615],{"class":419},[298,1341,1343,1345,1347,1349,1351,1353,1355],{"class":1342,"line":678},[300,478,479],[298,1344,598],{"class":419},[298,1346,625],{"class":304},[298,1348,615],{"class":419},[298,1350,668],{"class":487},[298,1352,570],{"class":419},[298,1354,625],{"class":304},[298,1356,615],{"class":419},[298,1358,1360,1362,1364],{"class":1359,"line":689},[300,478,479],[298,1361,570],{"class":419},[298,1363,201],{"class":304},[298,1365,615],{"class":419},[298,1367,1369,1371,1373,1375,1377,1379,1381,1383],{"class":1368,"line":712},[300,478,529],[298,1370,450],{"class":419},[298,1372,694],{"class":304},[298,1374,697],{"class":457},[298,1376,464],{"class":419},[298,1378,426],{"class":419},[298,1380,704],{"class":308},[298,1382,426],{"class":419},[298,1384,615],{"class":419},[298,1386,1388,1390,1392,1394,1396,1398,1400,1402,1404,1406,1408,1410],{"class":1387,"line":742},[300,478,529],[298,1389,598],{"class":419},[298,1391,717],{"class":453},[298,1393,697],{"class":457},[298,1395,464],{"class":419},[298,1397,426],{"class":419},[298,1399,726],{"class":308},[298,1401,426],{"class":419},[298,1403,615],{"class":419},[298,1405,630],{"class":487},[298,1407,570],{"class":419},[298,1409,717],{"class":453},[298,1411,615],{"class":419},[298,1413,1415,1417,1419,1421,1423,1425,1427,1429,1431,1433,1435,1437],{"class":1414,"line":770},[300,478,529],[298,1416,598],{"class":419},[298,1418,717],{"class":453},[298,1420,697],{"class":457},[298,1422,464],{"class":419},[298,1424,426],{"class":419},[298,1426,726],{"class":308},[298,1428,426],{"class":419},[298,1430,615],{"class":419},[298,1432,649],{"class":487},[298,1434,570],{"class":419},[298,1436,717],{"class":453},[298,1438,615],{"class":419},[298,1440,1442,1444,1446,1448,1450,1452,1454,1456,1458,1460,1462,1464],{"class":1441,"line":798},[300,478,529],[298,1443,598],{"class":419},[298,1445,717],{"class":453},[298,1447,697],{"class":457},[298,1449,464],{"class":419},[298,1451,426],{"class":419},[298,1453,726],{"class":308},[298,1455,426],{"class":419},[298,1457,615],{"class":419},[298,1459,668],{"class":487},[298,1461,570],{"class":419},[298,1463,717],{"class":453},[298,1465,615],{"class":419},[298,1467,1469,1471,1473],{"class":1468,"line":807},[300,478,529],[298,1470,570],{"class":419},[298,1472,694],{"class":304},[298,1474,615],{"class":419},[288,1476,1480],{"className":1477,"code":1478,"filename":46,"language":1479,"meta":294,"style":294},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight has-diff","\u003Cdiv class=\"splide\"> \u003C!-- [!code --] -->\n  \u003Cdiv class=\"splide__track\"> \u003C!-- [!code --] -->\n    \u003Cul class=\"splide__list\"> \u003C!-- [!code --] -->\n      \u003Cli class=\"splide__slide\">Slide 1\u003C\u002Fli> \u003C!-- [!code --] -->\n      \u003Cli class=\"splide__slide\">Slide 2\u003C\u002Fli> \u003C!-- [!code --] -->\n      \u003Cli class=\"splide__slide\">Slide 3\u003C\u002Fli> \u003C!-- [!code --] -->\n    \u003C\u002Ful> \u003C!-- [!code --] -->\n  \u003C\u002Fdiv> \u003C!-- [!code --] -->\n\u003C\u002Fdiv> \u003C!-- [!code --] -->\n\u003Cblossom-carousel class=\"carousel grid! grid-auto-cols grid-cols-[calc((100% - 3rem) \u002F 4)] gap-4\"> \u003C!-- [!code ++] -->\n  \u003Cdiv class=\"slide snap-start\">Slide 1\u003C\u002Fdiv> \u003C!-- [!code ++] -->\n  \u003Cdiv class=\"slide snap-start\">Slide 2\u003C\u002Fdiv> \u003C!-- [!code ++] -->\n  \u003Cdiv class=\"slide snap-start\">Slide 3\u003C\u002Fdiv> \u003C!-- [!code ++] -->\n\u003C\u002Fblossom-carousel> \u003C!-- [!code ++] -->\n","html",[243,1481,1482,1502,1522,1543,1571,1598,1625,1634,1643,1652,1672,1699,1726,1753],{"__ignoreMap":294},[298,1483,1485,1487,1489,1491,1493,1495,1498,1500],{"class":1484,"line":301},[300,478,479],[298,1486,450],{"class":419},[298,1488,717],{"class":453},[298,1490,697],{"class":457},[298,1492,464],{"class":419},[298,1494,426],{"class":419},[298,1496,1497],{"class":308},"splide",[298,1499,426],{"class":419},[298,1501,615],{"class":419},[298,1503,1505,1507,1509,1511,1513,1515,1518,1520],{"class":1504,"line":318},[300,478,479],[298,1506,598],{"class":419},[298,1508,717],{"class":453},[298,1510,697],{"class":457},[298,1512,464],{"class":419},[298,1514,426],{"class":419},[298,1516,1517],{"class":308},"splide__track",[298,1519,426],{"class":419},[298,1521,615],{"class":419},[298,1523,1525,1527,1530,1532,1534,1536,1539,1541],{"class":1524,"line":514},[300,478,479],[298,1526,622],{"class":419},[298,1528,1529],{"class":453},"ul",[298,1531,697],{"class":457},[298,1533,464],{"class":419},[298,1535,426],{"class":419},[298,1537,1538],{"class":308},"splide__list",[298,1540,426],{"class":419},[298,1542,615],{"class":419},[298,1544,1546,1548,1550,1552,1554,1556,1559,1561,1563,1565,1567,1569],{"class":1545,"line":530},[300,478,479],[298,1547,971],{"class":419},[298,1549,239],{"class":453},[298,1551,697],{"class":457},[298,1553,464],{"class":419},[298,1555,426],{"class":419},[298,1557,1558],{"class":308},"splide__slide",[298,1560,426],{"class":419},[298,1562,615],{"class":419},[298,1564,630],{"class":487},[298,1566,570],{"class":419},[298,1568,239],{"class":453},[298,1570,615],{"class":419},[298,1572,1574,1576,1578,1580,1582,1584,1586,1588,1590,1592,1594,1596],{"class":1573,"line":554},[300,478,479],[298,1575,971],{"class":419},[298,1577,239],{"class":453},[298,1579,697],{"class":457},[298,1581,464],{"class":419},[298,1583,426],{"class":419},[298,1585,1558],{"class":308},[298,1587,426],{"class":419},[298,1589,615],{"class":419},[298,1591,649],{"class":487},[298,1593,570],{"class":419},[298,1595,239],{"class":453},[298,1597,615],{"class":419},[298,1599,1601,1603,1605,1607,1609,1611,1613,1615,1617,1619,1621,1623],{"class":1600,"line":567},[300,478,479],[298,1602,971],{"class":419},[298,1604,239],{"class":453},[298,1606,697],{"class":457},[298,1608,464],{"class":419},[298,1610,426],{"class":419},[298,1612,1558],{"class":308},[298,1614,426],{"class":419},[298,1616,615],{"class":419},[298,1618,668],{"class":487},[298,1620,570],{"class":419},[298,1622,239],{"class":453},[298,1624,615],{"class":419},[298,1626,1628,1630,1632],{"class":1627,"line":577},[300,478,479],[298,1629,1023],{"class":419},[298,1631,1529],{"class":453},[298,1633,615],{"class":419},[298,1635,1637,1639,1641],{"class":1636,"line":584},[300,478,479],[298,1638,681],{"class":419},[298,1640,717],{"class":453},[298,1642,615],{"class":419},[298,1644,1646,1648,1650],{"class":1645,"line":595},[300,478,479],[298,1647,570],{"class":419},[298,1649,717],{"class":453},[298,1651,615],{"class":419},[298,1653,1655,1657,1660,1662,1664,1666,1668,1670],{"class":1654,"line":619},[300,478,529],[298,1656,450],{"class":419},[298,1658,1659],{"class":453},"blossom-carousel",[298,1661,697],{"class":457},[298,1663,464],{"class":419},[298,1665,426],{"class":419},[298,1667,704],{"class":308},[298,1669,426],{"class":419},[298,1671,615],{"class":419},[298,1673,1675,1677,1679,1681,1683,1685,1687,1689,1691,1693,1695,1697],{"class":1674,"line":640},[300,478,529],[298,1676,598],{"class":419},[298,1678,717],{"class":453},[298,1680,697],{"class":457},[298,1682,464],{"class":419},[298,1684,426],{"class":419},[298,1686,726],{"class":308},[298,1688,426],{"class":419},[298,1690,615],{"class":419},[298,1692,630],{"class":487},[298,1694,570],{"class":419},[298,1696,717],{"class":453},[298,1698,615],{"class":419},[298,1700,1702,1704,1706,1708,1710,1712,1714,1716,1718,1720,1722,1724],{"class":1701,"line":659},[300,478,529],[298,1703,598],{"class":419},[298,1705,717],{"class":453},[298,1707,697],{"class":457},[298,1709,464],{"class":419},[298,1711,426],{"class":419},[298,1713,726],{"class":308},[298,1715,426],{"class":419},[298,1717,615],{"class":419},[298,1719,649],{"class":487},[298,1721,570],{"class":419},[298,1723,717],{"class":453},[298,1725,615],{"class":419},[298,1727,1729,1731,1733,1735,1737,1739,1741,1743,1745,1747,1749,1751],{"class":1728,"line":678},[300,478,529],[298,1730,598],{"class":419},[298,1732,717],{"class":453},[298,1734,697],{"class":457},[298,1736,464],{"class":419},[298,1738,426],{"class":419},[298,1740,726],{"class":308},[298,1742,426],{"class":419},[298,1744,615],{"class":419},[298,1746,668],{"class":487},[298,1748,570],{"class":419},[298,1750,717],{"class":453},[298,1752,615],{"class":419},[298,1754,1756,1758,1760],{"class":1755,"line":689},[300,478,529],[298,1757,570],{"class":419},[298,1759,1659],{"class":453},[298,1761,615],{"class":419},[228,1763,1764],{"id":1300},"Options",[221,1766,1767],{},"Splide options describe slide movement, sizing, and generated controls. In Blossom, those choices usually become CSS and small browser APIs.",[1769,1770,1771,1784],"table",{},[1772,1773,1774],"thead",{},[1775,1776,1777,1781],"tr",{},[1778,1779,1780],"th",{},"Splide concept",[1778,1782,1783],{},"Blossom approach",[1785,1786,1787,1801,1818,1837,1851,1866,1875,1889,1905,1926],"tbody",{},[1775,1788,1789,1794],{},[1790,1791,1792],"td",{},[243,1793,252],{},[1790,1795,1796,1797,1800],{},"Use CSS ",[243,1798,1799],{},"grid-auto-columns"," to define the relative width of slides.",[1775,1802,1803,1808],{},[1790,1804,1805],{},[243,1806,1807],{},"perMove",[1790,1809,1796,1810,1813,1814,1817],{},[243,1811,1812],{},"scroll-snap-align"," within ",[243,1815,1816],{},":nth-child(xn)"," or nest slides in groups.",[1775,1819,1820,1824],{},[1790,1821,1822],{},[243,1823,256],{},[1790,1825,1796,1826,1828,1829,1832,1833,1836],{},[243,1827,256],{}," in a ",[243,1830,1831],{},"grid"," or ",[243,1834,1835],{},"flex"," layout.",[1775,1838,1839,1844],{},[1790,1840,1841],{},[243,1842,1843],{},"focus: \"center\"",[1790,1845,1846,1847,1850],{},"Use ",[243,1848,1849],{},"scroll-snap-align: center",".",[1775,1852,1853,1857],{},[1790,1854,1855],{},[243,1856,262],{},[1790,1858,1846,1859,1862,1863,1850],{},[243,1860,1861],{},"dir=\"rtl\""," or CSS ",[243,1864,1865],{},"direction: rtl",[1775,1867,1868,1872],{},[1790,1869,1870],{},[243,1871,266],{},[1790,1873,1874],{},"Use CSS media queries and container queries.",[1775,1876,1877,1882],{},[1790,1878,1879],{},[243,1880,1881],{},"type: \"loop\"",[1790,1883,1884,1885,1850],{},"Prefer bounded native scrolling, or use the experimental repeat pattern when an infinite effect is required. See ",[1886,1887,1888],"a",{"href":157},"Repeat example",[1775,1890,1891,1896],{},[1790,1892,1893],{},[243,1894,1895],{},"drag: \"free\"",[1790,1897,1898,1899,1901,1902,1850],{},"Omit ",[243,1900,1812],{}," or use ",[243,1903,1904],{},"scroll-snap-type: proximity",[1775,1906,1907,1912],{},[1790,1908,1909],{},[243,1910,1911],{},"arrows",[1790,1913,1914,1915,1918,1919,1922,1923,1850],{},"Use buttons that call ",[243,1916,1917],{},"prev()"," and ",[243,1920,1921],{},"next()",". See ",[1886,1924,1925],{"href":87},"Buttons example",[1775,1927,1928,1933],{},[1790,1929,1930],{},[243,1931,1932],{},"pagination",[1790,1934,1935,1936,1832,1939,1922,1942,1850],{},"Build dots from ",[243,1937,1938],{},"IntersectionObserver",[243,1940,1941],{},"scrollsnapchange",[1886,1943,1944],{"href":92},"Dots example",[221,1946,1947],{},"For example, this Splide setup:",[288,1949,1951],{"className":406,"code":1950,"filename":201,"language":408,"meta":294,"style":294},"new Splide(\".splide\", {\n  perPage: 1,\n  gap: \"1rem\",\n  focus: \"center\",\n  breakpoints: {\n    768: { perPage: 3 },\n  },\n}).mount();\n",[243,1952,1953,1974,1987,2002,2018,2027,2046,2051],{"__ignoreMap":294},[298,1954,1955,1958,1960,1963,1965,1968,1970,1972],{"class":300,"line":301},[298,1956,1957],{"class":419},"new",[298,1959,488],{"class":910},[298,1961,1962],{"class":487},"(",[298,1964,426],{"class":419},[298,1966,1967],{"class":308},".splide",[298,1969,426],{"class":419},[298,1971,491],{"class":419},[298,1973,917],{"class":419},[298,1975,1976,1979,1981,1984],{"class":300,"line":318},[298,1977,1978],{"class":453},"  perPage",[298,1980,944],{"class":419},[298,1982,1983],{"class":947}," 1",[298,1985,1986],{"class":419},",\n",[298,1988,1989,1992,1994,1996,1998,2000],{"class":300,"line":514},[298,1990,1991],{"class":453},"  gap",[298,1993,944],{"class":419},[298,1995,420],{"class":419},[298,1997,960],{"class":308},[298,1999,426],{"class":419},[298,2001,1986],{"class":419},[298,2003,2004,2007,2009,2011,2014,2016],{"class":300,"line":530},[298,2005,2006],{"class":453},"  focus",[298,2008,944],{"class":419},[298,2010,420],{"class":419},[298,2012,2013],{"class":308},"center",[298,2015,426],{"class":419},[298,2017,1986],{"class":419},[298,2019,2020,2023,2025],{"class":300,"line":554},[298,2021,2022],{"class":453},"  breakpoints",[298,2024,944],{"class":419},[298,2026,917],{"class":419},[298,2028,2029,2032,2034,2036,2038,2040,2043],{"class":300,"line":567},[298,2030,2031],{"class":947},"    768",[298,2033,944],{"class":419},[298,2035,484],{"class":419},[298,2037,941],{"class":453},[298,2039,944],{"class":419},[298,2041,2042],{"class":947}," 3",[298,2044,2045],{"class":419}," },\n",[298,2047,2048],{"class":300,"line":577},[298,2049,2050],{"class":419},"  },\n",[298,2052,2053,2055,2058,2060,2063,2065],{"class":300,"line":584},[298,2054,1303],{"class":419},[298,2056,2057],{"class":487},")",[298,2059,1850],{"class":419},[298,2061,2062],{"class":910},"mount",[298,2064,914],{"class":487},[298,2066,429],{"class":419},[221,2068,2069],{},"becomes CSS:",[288,2071,2076],{"className":2072,"code":2073,"filename":2074,"language":2075,"meta":294,"style":294},"language-css shiki shiki-themes material-theme-lighter material-theme material-theme-palenight",".carousel {\n  display: grid;\n  grid-auto-flow: column;\n  grid-auto-columns: 100%;\n  gap: 1rem;\n  scroll-snap-type: inline mandatory;\n}\n\n.slide {\n  scroll-snap-align: center;\n}\n\n@media (min-width: 768px) {\n  .carousel {\n    grid-auto-columns: calc((100% - 2rem) \u002F 3);\n  }\n}\n","Blossom","css",[243,2077,2078,2087,2100,2112,2124,2135,2147,2151,2155,2164,2176,2180,2184,2204,2213,2248,2253],{"__ignoreMap":294},[298,2079,2080,2082,2085],{"class":300,"line":301},[298,2081,1850],{"class":419},[298,2083,2084],{"class":304},"carousel",[298,2086,917],{"class":419},[298,2088,2089,2093,2095,2098],{"class":300,"line":318},[298,2090,2092],{"class":2091},"sqsOY","  display",[298,2094,944],{"class":419},[298,2096,2097],{"class":487}," grid",[298,2099,429],{"class":419},[298,2101,2102,2105,2107,2110],{"class":300,"line":514},[298,2103,2104],{"class":2091},"  grid-auto-flow",[298,2106,944],{"class":419},[298,2108,2109],{"class":487}," column",[298,2111,429],{"class":419},[298,2113,2114,2117,2119,2122],{"class":300,"line":530},[298,2115,2116],{"class":2091},"  grid-auto-columns",[298,2118,944],{"class":419},[298,2120,2121],{"class":947}," 100%",[298,2123,429],{"class":419},[298,2125,2126,2128,2130,2133],{"class":300,"line":554},[298,2127,1991],{"class":2091},[298,2129,944],{"class":419},[298,2131,2132],{"class":947}," 1rem",[298,2134,429],{"class":419},[298,2136,2137,2140,2142,2145],{"class":300,"line":567},[298,2138,2139],{"class":2091},"  scroll-snap-type",[298,2141,944],{"class":419},[298,2143,2144],{"class":487}," inline mandatory",[298,2146,429],{"class":419},[298,2148,2149],{"class":300,"line":577},[298,2150,1149],{"class":419},[298,2152,2153],{"class":300,"line":584},[298,2154,581],{"emptyLinePlaceholder":580},[298,2156,2157,2159,2162],{"class":300,"line":595},[298,2158,1850],{"class":419},[298,2160,2161],{"class":304},"slide",[298,2163,917],{"class":419},[298,2165,2166,2169,2171,2174],{"class":300,"line":619},[298,2167,2168],{"class":2091},"  scroll-snap-align",[298,2170,944],{"class":419},[298,2172,2173],{"class":487}," center",[298,2175,429],{"class":419},[298,2177,2178],{"class":300,"line":640},[298,2179,1149],{"class":419},[298,2181,2182],{"class":300,"line":659},[298,2183,581],{"emptyLinePlaceholder":580},[298,2185,2186,2189,2192,2195,2197,2200,2202],{"class":300,"line":678},[298,2187,2188],{"class":415},"@media",[298,2190,2191],{"class":419}," (",[298,2193,2194],{"class":304},"min-width",[298,2196,944],{"class":419},[298,2198,2199],{"class":947}," 768px",[298,2201,2057],{"class":419},[298,2203,917],{"class":419},[298,2205,2206,2209,2211],{"class":300,"line":689},[298,2207,2208],{"class":419},"  .",[298,2210,2084],{"class":304},[298,2212,917],{"class":419},[298,2214,2215,2218,2220,2223,2225,2227,2230,2233,2236,2238,2241,2244,2246],{"class":300,"line":712},[298,2216,2217],{"class":2091},"    grid-auto-columns",[298,2219,944],{"class":419},[298,2221,2222],{"class":910}," calc",[298,2224,1962],{"class":419},[298,2226,1962],{"class":487},[298,2228,2229],{"class":947},"100%",[298,2231,2232],{"class":419}," -",[298,2234,2235],{"class":947}," 2rem",[298,2237,2057],{"class":419},[298,2239,2240],{"class":487}," \u002F ",[298,2242,2243],{"class":947},"3",[298,2245,2057],{"class":487},[298,2247,429],{"class":419},[298,2249,2250],{"class":300,"line":742},[298,2251,2252],{"class":419},"  }\n",[298,2254,2255],{"class":300,"line":770},[298,2256,1149],{"class":419},[228,2258,2260],{"id":2259},"controls","Controls",[221,2262,2263,2264,1918,2266,2268],{},"Splide controls call methods on the Splide instance. Blossom exposes ",[243,2265,1917],{},[243,2267,1921],{}," on the carousel element or component ref.",[288,2270,2273],{"className":2271,"code":2272,"language":469,"meta":294,"style":294},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight has-diff","splide.go(\"\u003C\"); \u002F\u002F [!code --]\nsplide.go(\">\"); \u002F\u002F [!code --]\nblossom.value.prev(); \u002F\u002F [!code ++]\nblossom.value.next(); \u002F\u002F [!code ++]\n",[243,2274,2275,2297,2318,2338],{"__ignoreMap":294},[298,2276,2278,2280,2282,2285,2287,2289,2291,2293,2295],{"class":2277,"line":301},[300,478,479],[298,2279,1497],{"class":487},[298,2281,1850],{"class":419},[298,2283,2284],{"class":910},"go",[298,2286,1962],{"class":487},[298,2288,426],{"class":419},[298,2290,450],{"class":308},[298,2292,426],{"class":419},[298,2294,2057],{"class":487},[298,2296,510],{"class":419},[298,2298,2300,2302,2304,2306,2308,2310,2312,2314,2316],{"class":2299,"line":318},[300,478,479],[298,2301,1497],{"class":487},[298,2303,1850],{"class":419},[298,2305,2284],{"class":910},[298,2307,1962],{"class":487},[298,2309,426],{"class":419},[298,2311,615],{"class":308},[298,2313,426],{"class":419},[298,2315,2057],{"class":487},[298,2317,510],{"class":419},[298,2319,2321,2324,2326,2329,2331,2334,2336],{"class":2320,"line":514},[300,478,529],[298,2322,2323],{"class":487},"blossom",[298,2325,1850],{"class":419},[298,2327,2328],{"class":487},"value",[298,2330,1850],{"class":419},[298,2332,2333],{"class":910},"prev",[298,2335,914],{"class":487},[298,2337,510],{"class":419},[298,2339,2341,2343,2345,2347,2349,2352,2354],{"class":2340,"line":530},[300,478,529],[298,2342,2323],{"class":487},[298,2344,1850],{"class":419},[298,2346,2328],{"class":487},[298,2348,1850],{"class":419},[298,2350,2351],{"class":910},"next",[298,2353,914],{"class":487},[298,2355,510],{"class":419},[221,2357,2358],{},"For direct slide navigation, use native scrolling on the target slide.",[288,2360,2363],{"className":2361,"code":2362,"language":469,"meta":294,"style":294},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","slides[index].scrollIntoView({\n  behavior: \"smooth\",\n  inline: \"center\",\n  block: \"nearest\",\n});\n",[243,2364,2365,2380,2396,2411,2427],{"__ignoreMap":294},[298,2366,2367,2370,2372,2375,2377],{"class":300,"line":301},[298,2368,2369],{"class":487},"slides[index]",[298,2371,1850],{"class":419},[298,2373,2374],{"class":910},"scrollIntoView",[298,2376,1962],{"class":487},[298,2378,2379],{"class":419},"{\n",[298,2381,2382,2385,2387,2389,2392,2394],{"class":300,"line":318},[298,2383,2384],{"class":453},"  behavior",[298,2386,944],{"class":419},[298,2388,420],{"class":419},[298,2390,2391],{"class":308},"smooth",[298,2393,426],{"class":419},[298,2395,1986],{"class":419},[298,2397,2398,2401,2403,2405,2407,2409],{"class":300,"line":514},[298,2399,2400],{"class":453},"  inline",[298,2402,944],{"class":419},[298,2404,420],{"class":419},[298,2406,2013],{"class":308},[298,2408,426],{"class":419},[298,2410,1986],{"class":419},[298,2412,2413,2416,2418,2420,2423,2425],{"class":300,"line":530},[298,2414,2415],{"class":453},"  block",[298,2417,944],{"class":419},[298,2419,420],{"class":419},[298,2421,2422],{"class":308},"nearest",[298,2424,426],{"class":419},[298,2426,1986],{"class":419},[298,2428,2429,2431,2433],{"class":300,"line":554},[298,2430,1303],{"class":419},[298,2432,2057],{"class":487},[298,2434,429],{"class":419},[228,2436,2438],{"id":2437},"api","API",[221,2440,2441,2442,1832,2445,2448],{},"Splide commonly uses ",[243,2443,2444],{},"moved",[243,2446,2447],{},"active"," events to track the current slide.",[221,2450,2451,2452,253,2454,2456,2457,2460],{},"With Blossom, the carousel is a real scroll container, so use browser APIs such as ",[243,2453,1938],{},[243,2455,1941],{},", or ",[243,2458,2459],{},"scroll"," events depending on the browser support you need.",[288,2462,2464],{"className":2271,"code":2463,"language":469,"meta":294,"style":294},"splide.on(\"moved\", (newIndex) => { \u002F\u002F [!code --]\n  setSelectedIndex(newIndex); \u002F\u002F [!code --]\n}); \u002F\u002F [!code --]\n\ncarousel.addEventListener(\"scrollsnapchange\", (event) => { \u002F\u002F [!code ++]\n  setSelectedIndex(event.detail.index); \u002F\u002F [!code ++]\n}); \u002F\u002F [!code ++]\n\nOr use IntersectionObserver for wider browser support\n\nconst slides = Array.from(carousel.children); \u002F\u002F [!code ++]\nconst observer = new IntersectionObserver( \u002F\u002F [!code ++]\n  (entries) => { \u002F\u002F [!code ++]\n    const activeEntry = entries.find((entry) => entry.isIntersecting); \u002F\u002F [!code ++]\n    if (activeEntry) { \u002F\u002F [!code ++]\n      setSelectedIndex(slides.indexOf(activeEntry.target)); \u002F\u002F [!code ++]\n    } \u002F\u002F [!code ++]\n  }, \u002F\u002F [!code ++]\n  { root: carousel, threshold: 0.5 }, \u002F\u002F [!code ++]\n); \u002F\u002F [!code ++]\nslides.forEach((slide) => observer.observe(slide)); \u002F\u002F [!code ++]\n",[243,2465,2466,2499,2513,2522,2526,2557,2580,2589,2593,2598,2602,2630,2649,2664,2707,2724,2754,2760,2766,2793,2801],{"__ignoreMap":294},[298,2467,2469,2471,2473,2476,2478,2480,2482,2484,2486,2488,2492,2494,2497],{"class":2468,"line":301},[300,478,479],[298,2470,1497],{"class":487},[298,2472,1850],{"class":419},[298,2474,2475],{"class":910},"on",[298,2477,1962],{"class":487},[298,2479,426],{"class":419},[298,2481,2444],{"class":308},[298,2483,426],{"class":419},[298,2485,491],{"class":419},[298,2487,2191],{"class":419},[298,2489,2491],{"class":2490},"sHdIc","newIndex",[298,2493,2057],{"class":419},[298,2495,2496],{"class":457}," =>",[298,2498,484],{"class":419},[298,2500,2502,2505,2507,2509,2511],{"class":2501,"line":318},[300,478,479],[298,2503,2504],{"class":910},"  setSelectedIndex",[298,2506,1962],{"class":453},[298,2508,2491],{"class":487},[298,2510,2057],{"class":453},[298,2512,510],{"class":419},[298,2514,2516,2518,2520],{"class":2515,"line":514},[300,478,479],[298,2517,1303],{"class":419},[298,2519,2057],{"class":487},[298,2521,510],{"class":419},[298,2523,2524],{"class":300,"line":530},[298,2525,581],{"emptyLinePlaceholder":580},[298,2527,2529,2531,2533,2536,2538,2540,2542,2544,2546,2548,2551,2553,2555],{"class":2528,"line":554},[300,478,529],[298,2530,2084],{"class":487},[298,2532,1850],{"class":419},[298,2534,2535],{"class":910},"addEventListener",[298,2537,1962],{"class":487},[298,2539,426],{"class":419},[298,2541,1941],{"class":308},[298,2543,426],{"class":419},[298,2545,491],{"class":419},[298,2547,2191],{"class":419},[298,2549,2550],{"class":2490},"event",[298,2552,2057],{"class":419},[298,2554,2496],{"class":457},[298,2556,484],{"class":419},[298,2558,2560,2562,2564,2566,2568,2571,2573,2576,2578],{"class":2559,"line":567},[300,478,529],[298,2561,2504],{"class":910},[298,2563,1962],{"class":453},[298,2565,2550],{"class":487},[298,2567,1850],{"class":419},[298,2569,2570],{"class":487},"detail",[298,2572,1850],{"class":419},[298,2574,2575],{"class":487},"index",[298,2577,2057],{"class":453},[298,2579,510],{"class":419},[298,2581,2583,2585,2587],{"class":2582,"line":577},[300,478,529],[298,2584,1303],{"class":419},[298,2586,2057],{"class":487},[298,2588,510],{"class":419},[298,2590,2591],{"class":300,"line":584},[298,2592,581],{"emptyLinePlaceholder":580},[298,2594,2595],{"class":300,"line":595},[298,2596,2597],{"class":487},"Or use IntersectionObserver for wider browser support\n",[298,2599,2600],{"class":300,"line":619},[298,2601,581],{"emptyLinePlaceholder":580},[298,2603,2605,2608,2611,2613,2616,2618,2620,2623,2625,2628],{"class":2604,"line":640},[300,478,529],[298,2606,2607],{"class":457},"const",[298,2609,2610],{"class":487}," slides ",[298,2612,464],{"class":419},[298,2614,2615],{"class":487}," Array",[298,2617,1850],{"class":419},[298,2619,1216],{"class":910},[298,2621,2622],{"class":487},"(carousel",[298,2624,1850],{"class":419},[298,2626,2627],{"class":487},"children)",[298,2629,510],{"class":419},[298,2631,2633,2635,2638,2640,2643,2646],{"class":2632,"line":659},[300,478,529],[298,2634,2607],{"class":457},[298,2636,2637],{"class":487}," observer ",[298,2639,464],{"class":419},[298,2641,2642],{"class":419}," new",[298,2644,2645],{"class":910}," IntersectionObserver",[298,2647,2648],{"class":487},"( ",[298,2650,2652,2655,2658,2660,2662],{"class":2651,"line":678},[300,478,529],[298,2653,2654],{"class":419},"  (",[298,2656,2657],{"class":2490},"entries",[298,2659,2057],{"class":419},[298,2661,2496],{"class":457},[298,2663,484],{"class":419},[298,2665,2667,2670,2673,2676,2679,2681,2684,2686,2688,2691,2693,2695,2698,2700,2703,2705],{"class":2666,"line":689},[300,478,529],[298,2668,2669],{"class":457},"    const",[298,2671,2672],{"class":487}," activeEntry",[298,2674,2675],{"class":419}," =",[298,2677,2678],{"class":487}," entries",[298,2680,1850],{"class":419},[298,2682,2683],{"class":910},"find",[298,2685,1962],{"class":453},[298,2687,1962],{"class":419},[298,2689,2690],{"class":2490},"entry",[298,2692,2057],{"class":419},[298,2694,2496],{"class":457},[298,2696,2697],{"class":487}," entry",[298,2699,1850],{"class":419},[298,2701,2702],{"class":487},"isIntersecting",[298,2704,2057],{"class":453},[298,2706,510],{"class":419},[298,2708,2710,2713,2715,2718,2721],{"class":2709,"line":712},[300,478,529],[298,2711,2712],{"class":415},"    if",[298,2714,2191],{"class":453},[298,2716,2717],{"class":487},"activeEntry",[298,2719,2720],{"class":453},") ",[298,2722,2723],{"class":419},"{",[298,2725,2727,2730,2732,2735,2737,2740,2742,2744,2746,2749,2752],{"class":2726,"line":742},[300,478,529],[298,2728,2729],{"class":910},"      setSelectedIndex",[298,2731,1962],{"class":453},[298,2733,2734],{"class":487},"slides",[298,2736,1850],{"class":419},[298,2738,2739],{"class":910},"indexOf",[298,2741,1962],{"class":453},[298,2743,2717],{"class":487},[298,2745,1850],{"class":419},[298,2747,2748],{"class":487},"target",[298,2750,2751],{"class":453},"))",[298,2753,510],{"class":419},[298,2755,2757],{"class":2756,"line":770},[300,478,529],[298,2758,2759],{"class":419},"    }",[298,2761,2763],{"class":2762,"line":798},[300,478,529],[298,2764,2765],{"class":419},"  },",[298,2767,2769,2772,2775,2777,2780,2782,2785,2787,2790],{"class":2768,"line":807},[300,478,529],[298,2770,2771],{"class":419},"  {",[298,2773,2774],{"class":453}," root",[298,2776,944],{"class":419},[298,2778,2779],{"class":487}," carousel",[298,2781,491],{"class":419},[298,2783,2784],{"class":453}," threshold",[298,2786,944],{"class":419},[298,2788,2789],{"class":947}," 0.5",[298,2791,2792],{"class":419}," },",[298,2794,2797,2799],{"class":2795,"line":2796},[300,478,529],20,[298,2798,2057],{"class":487},[298,2800,510],{"class":419},[298,2802,2805,2807,2809,2812,2814,2816,2818,2820,2822,2825,2827,2830,2833],{"class":2803,"line":2804},[300,478,529],21,[298,2806,2734],{"class":487},[298,2808,1850],{"class":419},[298,2810,2811],{"class":910},"forEach",[298,2813,1962],{"class":487},[298,2815,1962],{"class":419},[298,2817,2161],{"class":2490},[298,2819,2057],{"class":419},[298,2821,2496],{"class":457},[298,2823,2824],{"class":487}," observer",[298,2826,1850],{"class":419},[298,2828,2829],{"class":910},"observe",[298,2831,2832],{"class":487},"(slide))",[298,2834,510],{"class":419},[228,2836,2838],{"id":2837},"extensions","Extensions",[221,2840,2841],{},"Splide extensions and built-in UI usually become small Blossom wrappers or native platform features.",[1769,2843,2844,2854],{},[1772,2845,2846],{},[1775,2847,2848,2851],{},[1778,2849,2850],{},"Splide pattern",[1778,2852,2853],{},"Blossom replacement",[1785,2855,2856,2868,2880,2891,2899,2910,2918],{},[1775,2857,2858,2861],{},[1790,2859,2860],{},"Arrows",[1790,2862,2863,2864,1918,2866,1850],{},"Buttons that call ",[243,2865,1917],{},[243,2867,1921],{},[1775,2869,2870,2873],{},[1790,2871,2872],{},"Pagination",[1790,2874,2875,2876,1832,2878,1850],{},"Dots backed by ",[243,2877,1938],{},[243,2879,1941],{},[1775,2881,2882,2885],{},[1790,2883,2884],{},"Autoplay",[1790,2886,2887,2888,2890],{},"A timer that calls ",[243,2889,1921],{}," or scrolls the next slide into view.",[1775,2892,2893,2896],{},[1790,2894,2895],{},"Auto width",[1790,2897,2898],{},"Let slide content size itself with CSS.",[1775,2900,2901,2904],{},[1790,2902,2903],{},"Auto height",[1790,2905,2906,2907,1850],{},"Let content define height, or update layout with ",[243,2908,2909],{},"ResizeObserver",[1775,2911,2912,2915],{},[1790,2913,2914],{},"Grid \u002F rows",[1790,2916,2917],{},"CSS grid.",[1775,2919,2920,2923],{},[1790,2921,2922],{},"Lazy load",[1790,2924,2925,2926,1918,2929,1850],{},"Native ",[243,2927,2928],{},"loading=\"lazy\"",[243,2930,2931],{},"content-visibility: auto",[221,2933,2934],{},"Keep extension migrations small. Start from a working Blossom carousel, then add behavior only if the product still needs it.",[228,2936,2938],{"id":2937},"lifecycle","Lifecycle",[221,2940,2941],{},"Splide's and Blossom's lifecycle methods are similar.",[272,2943,2944],{"color":274,"icon":275},"Blossom initializes automatically when using framework components.",[288,2946,2948],{"className":2271,"code":2947,"language":469,"meta":294,"style":294},"splide.refresh(); \u002F\u002F [!code --]\nsplide.destroy(); \u002F\u002F [!code --]\nblossom.init(); \u002F\u002F [!code ++]\nblossom.destroy(); \u002F\u002F [!code ++]\n",[243,2949,2950,2964,2978,2992],{"__ignoreMap":294},[298,2951,2953,2955,2957,2960,2962],{"class":2952,"line":301},[300,478,479],[298,2954,1497],{"class":487},[298,2956,1850],{"class":419},[298,2958,2959],{"class":910},"refresh",[298,2961,914],{"class":487},[298,2963,510],{"class":419},[298,2965,2967,2969,2971,2974,2976],{"class":2966,"line":318},[300,478,479],[298,2968,1497],{"class":487},[298,2970,1850],{"class":419},[298,2972,2973],{"class":910},"destroy",[298,2975,914],{"class":487},[298,2977,510],{"class":419},[298,2979,2981,2983,2985,2988,2990],{"class":2980,"line":514},[300,478,529],[298,2982,2323],{"class":487},[298,2984,1850],{"class":419},[298,2986,2987],{"class":910},"init",[298,2989,914],{"class":487},[298,2991,510],{"class":419},[298,2993,2995,2997,2999,3001,3003],{"class":2994,"line":530},[300,478,529],[298,2996,2323],{"class":487},[298,2998,1850],{"class":419},[298,3000,2973],{"class":910},[298,3002,914],{"class":487},[298,3004,510],{"class":419},[228,3006,3008],{"id":3007},"migration-checklist","Migration checklist",[1529,3010,3011,3014,3020,3026,3029,3043,3055,3058],{},[239,3012,3013],{},"Remove Splide packages and install the matching Blossom package.",[239,3015,3016,3017,3019],{},"Import ",[243,3018,423],{}," once.",[239,3021,3022,3023,3025],{},"Replace Splide root, track, list, and slide wrappers with ",[243,3024,245],{}," and direct slide children.",[239,3027,3028],{},"Move slide sizing, gaps, snapping, direction, focus, and breakpoints into CSS.",[239,3030,3031,3032,1918,3035,3038,3039,1918,3041,1850],{},"Replace ",[243,3033,3034],{},"go(\"\u003C\")",[243,3036,3037],{},"go(\">\")"," with ",[243,3040,1917],{},[243,3042,1921],{},[239,3044,3031,3045,3038,3048,3051,3052,1850],{},[243,3046,3047],{},"go(index)",[243,3049,3050],{},"scrollIntoView()"," or native ",[243,3053,3054],{},"scrollTo()",[239,3056,3057],{},"Replace Splide events with browser observers or scroll snap events.",[239,3059,3060],{},"Rebuild only the Splide extensions your carousel still needs.",[228,3062,3064],{"id":3063},"next-steps","Next steps",[1529,3066,3067,3072,3077,3082,3087],{},[239,3068,3069,3071],{},[1886,3070,16],{"href":17}," - Pick the package for your framework.",[239,3073,3074,3076],{},[1886,3075,66],{"href":67}," - Configure scroll snap behavior with CSS.",[239,3078,3079,3081],{},[1886,3080,86],{"href":87}," - Add previous and next controls.",[239,3083,3084,3086],{},[1886,3085,91],{"href":92}," - Track the active slide with browser APIs.",[239,3088,3089,3091],{},[1886,3090,156],{"href":157}," - Explore an experimental repeating carousel pattern.",[3093,3094,3095],"style",{},"html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}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);}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 pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .sqsOY, html code.shiki .sqsOY{--shiki-light:#8796B0;--shiki-default:#B2CCD6;--shiki-dark:#B2CCD6}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}",{"title":294,"searchDepth":318,"depth":318,"links":3097},[3098,3099,3100,3101,3102,3103,3104,3105,3106,3107],{"id":230,"depth":318,"text":231},{"id":279,"depth":318,"text":16},{"id":432,"depth":318,"text":433},{"id":1300,"depth":318,"text":1764},{"id":2259,"depth":318,"text":2260},{"id":2437,"depth":318,"text":2438},{"id":2837,"depth":318,"text":2838},{"id":2937,"depth":318,"text":2938},{"id":3007,"depth":318,"text":3008},{"id":3063,"depth":318,"text":3064},"Migrate from Splide to Blossom Carousel by replacing Splide tracks, lists, options, and events with native scrolling and CSS.","md",null,{},{"icon":204},{"title":3114,"description":3115},"Migrate from Splide to Blossom Carousel","Replace Splide with Blossom Carousel using native scroll containers, CSS scroll snap, and browser APIs for controls and selected-slide state.","chCHswMtGu2gEUjtLlIwZNadIYrBWVhdcg7hVNVUNRo",[3118,3120],{"title":196,"path":197,"stem":198,"description":3119,"icon":199,"children":-1},"Migrate from Swiper to Blossom Carousel by replacing Swiper modules, wrappers, and configuration with native scrolling and CSS.",{"title":206,"path":207,"stem":208,"description":3121,"icon":209,"children":-1},"Migrate from Slick Carousel or React Slick to Blossom Carousel by replacing cloned-track behavior with native scrolling and CSS.",1780251481875]