[{"data":1,"prerenderedAt":3492},["ShallowReactive",2],{"navigation_docs":3,"-docs-migration-guides-embla":215,"-docs-migration-guides-embla-surround":3487},[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":191,"body":217,"description":3478,"extension":3479,"links":3480,"meta":3481,"navigation":3482,"path":192,"seo":3483,"stem":193,"__hash__":3486},"docs\u002Fdocs\u002F6.migration-guides\u002F1.embla.md",{"type":218,"value":219,"toc":3466},"minimark",[220,224,227,232,235,253,259,262,265,377,380,406,410,413,2142,2146,2149,2305,2308,2435,2438,2568,2572,2575,2692,2695,2770,2774,2785,2800,3188,3192,3195,3260,3263,3267,3270,3273,3370,3374,3431,3435,3462],[221,222,223],"p",{},"Embla creates a carousel engine around a viewport, container, options object, event system, and plugin API.",[221,225,226],{},"Blossom keeps the carousel as a native scroll container. Layout, snapping, alignment, spacing, direction, and responsive behavior belong in CSS.",[228,229,231],"h2",{"id":230},"migration-mindset","Migration mindset",[221,233,234],{},"When moving from Embla to Blossom, migrate the carousel in three steps:",[236,237,238,247,250],"ol",{},[239,240,241,242,246],"li",{},"Replace the Embla viewport and container structure with a single ",[243,244,245],"code",{},"\u003CBlossomCarousel>"," root.",[239,248,249],{},"Move Embla options such as alignment, axis, slide sizing, and containment into CSS.",[239,251,252],{},"Replace Embla API calls with Blossom methods, native scroll APIs, and browser observers.",[254,255,258],"note",{"color":256,"icon":257},"primary","i-lucide-lightbulb","Most Blossom migrations replace abstract JavaScript configuration with native expressions using CSS scroll snap, grid, sticky positioning, or native scrol API's.",[228,260,16],{"id":261},"installation",[221,263,264],{},"Remove the Embla package for your framework and install the matching Blossom package.",[266,267,269,306,330,354],"code-group",{"sync":268},"migration-code-style",[270,271,277],"pre",{"className":272,"code":273,"filename":274,"language":275,"meta":276,"style":276},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","npm uninstall embla-carousel-vue\nnpm install @blossom-carousel\u002Fvue\n","Vue","bash","",[243,278,279,295],{"__ignoreMap":276},[280,281,284,288,292],"span",{"class":282,"line":283},"line",1,[280,285,287],{"class":286},"sBMFI","npm",[280,289,291],{"class":290},"sfazB"," uninstall",[280,293,294],{"class":290}," embla-carousel-vue\n",[280,296,298,300,303],{"class":282,"line":297},2,[280,299,287],{"class":286},[280,301,302],{"class":290}," install",[280,304,305],{"class":290}," @blossom-carousel\u002Fvue\n",[270,307,310],{"className":272,"code":308,"filename":309,"language":275,"meta":276,"style":276},"npm uninstall embla-carousel-react\nnpm install @blossom-carousel\u002Freact\n","React",[243,311,312,321],{"__ignoreMap":276},[280,313,314,316,318],{"class":282,"line":283},[280,315,287],{"class":286},[280,317,291],{"class":290},[280,319,320],{"class":290}," embla-carousel-react\n",[280,322,323,325,327],{"class":282,"line":297},[280,324,287],{"class":286},[280,326,302],{"class":290},[280,328,329],{"class":290}," @blossom-carousel\u002Freact\n",[270,331,334],{"className":272,"code":332,"filename":333,"language":275,"meta":276,"style":276},"npm uninstall embla-carousel-svelte\nnpm install @blossom-carousel\u002Fsvelte\n","Svelte",[243,335,336,345],{"__ignoreMap":276},[280,337,338,340,342],{"class":282,"line":283},[280,339,287],{"class":286},[280,341,291],{"class":290},[280,343,344],{"class":290}," embla-carousel-svelte\n",[280,346,347,349,351],{"class":282,"line":297},[280,348,287],{"class":286},[280,350,302],{"class":290},[280,352,353],{"class":290}," @blossom-carousel\u002Fsvelte\n",[270,355,357],{"className":272,"code":356,"filename":46,"language":275,"meta":276,"style":276},"npm uninstall embla-carousel\nnpm install @blossom-carousel\u002Fcore\n",[243,358,359,368],{"__ignoreMap":276},[280,360,361,363,365],{"class":282,"line":283},[280,362,287],{"class":286},[280,364,291],{"class":290},[280,366,367],{"class":290}," embla-carousel\n",[280,369,370,372,374],{"class":282,"line":297},[280,371,287],{"class":286},[280,373,302],{"class":290},[280,375,376],{"class":290}," @blossom-carousel\u002Fcore\n",[221,378,379],{},"Import Blossom's core stylesheet once in your app.",[270,381,385],{"className":382,"code":383,"language":384,"meta":276,"style":276},"language-js shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import \"@blossom-carousel\u002Fcore\u002Fstyle.css\";\n","js",[243,386,387],{"__ignoreMap":276},[280,388,389,393,397,400,403],{"class":282,"line":283},[280,390,392],{"class":391},"s7zQu","import",[280,394,396],{"class":395},"sMK4o"," \"",[280,398,399],{"class":290},"@blossom-carousel\u002Fcore\u002Fstyle.css",[280,401,402],{"class":395},"\"",[280,404,405],{"class":395},";\n",[228,407,409],{"id":408},"component-structure","Component structure",[221,411,412],{},"Embla usually needs a viewport element, a container element, and slide elements. With Blossom, the carousel root is the scroll container and the slides are direct children.",[266,414,415,893,1291,1661],{"sync":268},[270,416,420],{"className":417,"code":418,"filename":274,"language":419,"meta":276,"style":276},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight has-diff","\u003Cscript setup lang=\"ts\">\nimport useEmblaCarousel from \"embla-carousel-vue\"; \u002F\u002F [!code --]\nimport { BlossomCarousel } from \"@blossom-carousel\u002Fvue\"; \u002F\u002F [!code ++]\nimport \"@blossom-carousel\u002Fcore\u002Fstyle.css\"; \u002F\u002F [!code ++]\n \nconst [emblaRef] = useEmblaCarousel({ align: \"start\" }); \u002F\u002F [!code --]\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n    \u003Cdiv class=\"embla\" ref=\"emblaRef\"> \u002F\u002F [!code --]\n        \u003Cdiv class=\"embla__container\"> \u002F\u002F [!code --]\n        \u003Cdiv class=\"embla__slide\">Slide 1\u003C\u002Fdiv> \u002F\u002F [!code --]\n        \u003Cdiv class=\"embla__slide\">Slide 2\u003C\u002Fdiv> \u002F\u002F [!code --]\n        \u003Cdiv class=\"embla__slide\">Slide 3\u003C\u002Fdiv> \u002F\u002F [!code --]\n        \u003C\u002Fdiv> \u002F\u002F [!code --]\n    \u003C\u002Fdiv> \u002F\u002F [!code --]\n    \u003CBlossomCarousel class=\"carousel\"> \u002F\u002F [!code ++]\n        \u003Cdiv class=\"slide snap-start\">Slide 1\u003C\u002Fdiv> \u002F\u002F [!code ++]\n        \u003Cdiv class=\"slide snap-start\">Slide 2\u003C\u002Fdiv> \u002F\u002F [!code ++]\n        \u003Cdiv class=\"slide snap-start\">Slide 3\u003C\u002Fdiv> \u002F\u002F [!code ++]\n    \u003C\u002FBlossomCarousel> \u002F\u002F [!code ++]\n\u003C\u002Ftemplate>\n","vue",[243,421,422,451,475,503,517,523,572,582,589,599,635,657,687,716,745,756,767,789,818,846,874,884],{"__ignoreMap":276},[280,423,424,427,431,435,438,441,443,446,448],{"class":282,"line":283},[280,425,426],{"class":395},"\u003C",[280,428,430],{"class":429},"swJcz","script",[280,432,434],{"class":433},"spNyl"," setup",[280,436,437],{"class":433}," lang",[280,439,440],{"class":395},"=",[280,442,402],{"class":395},[280,444,445],{"class":290},"ts",[280,447,402],{"class":395},[280,449,450],{"class":395},">\n",[280,452,456,458,462,465,467,470,472],{"class":453,"line":297},[282,454,455],"diff","remove",[280,457,392],{"class":391},[280,459,461],{"class":460},"sTEyZ"," useEmblaCarousel ",[280,463,464],{"class":391},"from",[280,466,396],{"class":395},[280,468,469],{"class":290},"embla-carousel-vue",[280,471,402],{"class":395},[280,473,474],{"class":395},";",[280,476,480,482,485,488,491,494,496,499,501],{"class":477,"line":479},[282,454,478],"add",3,[280,481,392],{"class":391},[280,483,484],{"class":395}," {",[280,486,487],{"class":460}," BlossomCarousel",[280,489,490],{"class":395}," }",[280,492,493],{"class":391}," from",[280,495,396],{"class":395},[280,497,498],{"class":290},"@blossom-carousel\u002Fvue",[280,500,402],{"class":395},[280,502,474],{"class":395},[280,504,507,509,511,513,515],{"class":505,"line":506},[282,454,478],4,[280,508,392],{"class":391},[280,510,396],{"class":395},[280,512,399],{"class":290},[280,514,402],{"class":395},[280,516,474],{"class":395},[280,518,520],{"class":282,"line":519},5,[280,521,522],{"class":460}," \n",[280,524,527,530,533,536,539,542,546,549,552,555,558,560,563,565,567,570],{"class":525,"line":526},[282,454,455],6,[280,528,529],{"class":433},"const",[280,531,532],{"class":395}," [",[280,534,535],{"class":460},"emblaRef",[280,537,538],{"class":395},"]",[280,540,541],{"class":395}," =",[280,543,545],{"class":544},"s2Zo4"," useEmblaCarousel",[280,547,548],{"class":460},"(",[280,550,551],{"class":395},"{",[280,553,554],{"class":429}," align",[280,556,557],{"class":395},":",[280,559,396],{"class":395},[280,561,562],{"class":290},"start",[280,564,402],{"class":395},[280,566,490],{"class":395},[280,568,569],{"class":460},")",[280,571,474],{"class":395},[280,573,575,578,580],{"class":282,"line":574},7,[280,576,577],{"class":395},"\u003C\u002F",[280,579,430],{"class":429},[280,581,450],{"class":395},[280,583,585],{"class":282,"line":584},8,[280,586,588],{"emptyLinePlaceholder":587},true,"\n",[280,590,592,594,597],{"class":282,"line":591},9,[280,593,426],{"class":395},[280,595,596],{"class":429},"template",[280,598,450],{"class":395},[280,600,603,606,609,612,614,616,619,621,624,626,628,630,632],{"class":601,"line":602},[282,454,455],10,[280,604,605],{"class":395},"    \u003C",[280,607,608],{"class":429},"div",[280,610,611],{"class":433}," class",[280,613,440],{"class":395},[280,615,402],{"class":395},[280,617,618],{"class":290},"embla",[280,620,402],{"class":395},[280,622,623],{"class":433}," ref",[280,625,440],{"class":395},[280,627,402],{"class":395},[280,629,535],{"class":290},[280,631,402],{"class":395},[280,633,634],{"class":395},">",[280,636,639,642,644,646,648,650,653,655],{"class":637,"line":638},[282,454,455],11,[280,640,641],{"class":395},"        \u003C",[280,643,608],{"class":429},[280,645,611],{"class":433},[280,647,440],{"class":395},[280,649,402],{"class":395},[280,651,652],{"class":290},"embla__container",[280,654,402],{"class":395},[280,656,634],{"class":395},[280,658,661,663,665,667,669,671,674,676,678,681,683,685],{"class":659,"line":660},[282,454,455],12,[280,662,641],{"class":395},[280,664,608],{"class":429},[280,666,611],{"class":433},[280,668,440],{"class":395},[280,670,402],{"class":395},[280,672,673],{"class":290},"embla__slide",[280,675,402],{"class":395},[280,677,634],{"class":395},[280,679,680],{"class":460},"Slide 1",[280,682,577],{"class":395},[280,684,608],{"class":429},[280,686,634],{"class":395},[280,688,691,693,695,697,699,701,703,705,707,710,712,714],{"class":689,"line":690},[282,454,455],13,[280,692,641],{"class":395},[280,694,608],{"class":429},[280,696,611],{"class":433},[280,698,440],{"class":395},[280,700,402],{"class":395},[280,702,673],{"class":290},[280,704,402],{"class":395},[280,706,634],{"class":395},[280,708,709],{"class":460},"Slide 2",[280,711,577],{"class":395},[280,713,608],{"class":429},[280,715,634],{"class":395},[280,717,720,722,724,726,728,730,732,734,736,739,741,743],{"class":718,"line":719},[282,454,455],14,[280,721,641],{"class":395},[280,723,608],{"class":429},[280,725,611],{"class":433},[280,727,440],{"class":395},[280,729,402],{"class":395},[280,731,673],{"class":290},[280,733,402],{"class":395},[280,735,634],{"class":395},[280,737,738],{"class":460},"Slide 3",[280,740,577],{"class":395},[280,742,608],{"class":429},[280,744,634],{"class":395},[280,746,749,752,754],{"class":747,"line":748},[282,454,455],15,[280,750,751],{"class":395},"        \u003C\u002F",[280,753,608],{"class":429},[280,755,634],{"class":395},[280,757,760,763,765],{"class":758,"line":759},[282,454,455],16,[280,761,762],{"class":395},"    \u003C\u002F",[280,764,608],{"class":429},[280,766,634],{"class":395},[280,768,771,773,776,778,780,782,785,787],{"class":769,"line":770},[282,454,478],17,[280,772,605],{"class":395},[280,774,775],{"class":429},"BlossomCarousel",[280,777,611],{"class":433},[280,779,440],{"class":395},[280,781,402],{"class":395},[280,783,784],{"class":290},"carousel",[280,786,402],{"class":395},[280,788,634],{"class":395},[280,790,793,795,797,799,801,803,806,808,810,812,814,816],{"class":791,"line":792},[282,454,478],18,[280,794,641],{"class":395},[280,796,608],{"class":429},[280,798,611],{"class":433},[280,800,440],{"class":395},[280,802,402],{"class":395},[280,804,805],{"class":290},"slide snap-start",[280,807,402],{"class":395},[280,809,634],{"class":395},[280,811,680],{"class":460},[280,813,577],{"class":395},[280,815,608],{"class":429},[280,817,634],{"class":395},[280,819,822,824,826,828,830,832,834,836,838,840,842,844],{"class":820,"line":821},[282,454,478],19,[280,823,641],{"class":395},[280,825,608],{"class":429},[280,827,611],{"class":433},[280,829,440],{"class":395},[280,831,402],{"class":395},[280,833,805],{"class":290},[280,835,402],{"class":395},[280,837,634],{"class":395},[280,839,709],{"class":460},[280,841,577],{"class":395},[280,843,608],{"class":429},[280,845,634],{"class":395},[280,847,850,852,854,856,858,860,862,864,866,868,870,872],{"class":848,"line":849},[282,454,478],20,[280,851,641],{"class":395},[280,853,608],{"class":429},[280,855,611],{"class":433},[280,857,440],{"class":395},[280,859,402],{"class":395},[280,861,805],{"class":290},[280,863,402],{"class":395},[280,865,634],{"class":395},[280,867,738],{"class":460},[280,869,577],{"class":395},[280,871,608],{"class":429},[280,873,634],{"class":395},[280,875,878,880,882],{"class":876,"line":877},[282,454,478],21,[280,879,762],{"class":395},[280,881,775],{"class":429},[280,883,634],{"class":395},[280,885,887,889,891],{"class":282,"line":886},22,[280,888,577],{"class":395},[280,890,596],{"class":429},[280,892,450],{"class":395},[270,894,898],{"className":895,"code":896,"filename":309,"language":897,"meta":276,"style":276},"language-tsx shiki shiki-themes material-theme-lighter material-theme material-theme-palenight has-diff","import useEmblaCarousel from \"embla-carousel-react\"; \u002F\u002F [!code --]\nimport { BlossomCarousel } from \"@blossom-carousel\u002Freact\"; \u002F\u002F [!code ++]\nimport \"@blossom-carousel\u002Fcore\u002Fstyle.css\"; \u002F\u002F [!code ++]\n\n export function Carousel() {\n  const [emblaRef] = useEmblaCarousel({ align: \"start\" }); \u002F\u002F [!code --]\n\n  return (\n    \u003Cdiv className=\"embla\" ref={emblaRef}> {\u002F* [!code --] *\u002F}\n      \u003Cdiv className=\"embla__container\"> {\u002F* [!code --] *\u002F}\n        \u003Cdiv className=\"embla__slide\">Slide 1\u003C\u002Fdiv> {\u002F* [!code --] *\u002F}\n        \u003Cdiv className=\"embla__slide\">Slide 2\u003C\u002Fdiv> {\u002F* [!code --] *\u002F}\n        \u003Cdiv className=\"embla__slide\">Slide 3\u003C\u002Fdiv> {\u002F* [!code --] *\u002F}\n      \u003C\u002Fdiv> {\u002F* [!code --] *\u002F}\n    \u003C\u002Fdiv> {\u002F* [!code --] *\u002F}\n    \u003CBlossomCarousel className=\"carousel\"> {\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,899,900,918,940,953,957,974,1010,1014,1022,1050,1070,1097,1124,1151,1161,1170,1189,1216,1243,1270,1279,1286],{"__ignoreMap":276},[280,901,903,905,907,909,911,914,916],{"class":902,"line":283},[282,454,455],[280,904,392],{"class":391},[280,906,461],{"class":460},[280,908,464],{"class":391},[280,910,396],{"class":395},[280,912,913],{"class":290},"embla-carousel-react",[280,915,402],{"class":395},[280,917,474],{"class":395},[280,919,921,923,925,927,929,931,933,936,938],{"class":920,"line":297},[282,454,478],[280,922,392],{"class":391},[280,924,484],{"class":395},[280,926,487],{"class":460},[280,928,490],{"class":395},[280,930,493],{"class":391},[280,932,396],{"class":395},[280,934,935],{"class":290},"@blossom-carousel\u002Freact",[280,937,402],{"class":395},[280,939,474],{"class":395},[280,941,943,945,947,949,951],{"class":942,"line":479},[282,454,478],[280,944,392],{"class":391},[280,946,396],{"class":395},[280,948,399],{"class":290},[280,950,402],{"class":395},[280,952,474],{"class":395},[280,954,955],{"class":282,"line":506},[280,956,588],{"emptyLinePlaceholder":587},[280,958,959,962,965,968,971],{"class":282,"line":519},[280,960,961],{"class":391}," export",[280,963,964],{"class":433}," function",[280,966,967],{"class":544}," Carousel",[280,969,970],{"class":395},"()",[280,972,973],{"class":395}," {\n",[280,975,977,980,982,984,986,988,990,992,994,996,998,1000,1002,1004,1006,1008],{"class":976,"line":526},[282,454,455],[280,978,979],{"class":433},"  const",[280,981,532],{"class":395},[280,983,535],{"class":460},[280,985,538],{"class":395},[280,987,541],{"class":395},[280,989,545],{"class":544},[280,991,548],{"class":429},[280,993,551],{"class":395},[280,995,554],{"class":429},[280,997,557],{"class":395},[280,999,396],{"class":395},[280,1001,562],{"class":290},[280,1003,402],{"class":395},[280,1005,490],{"class":395},[280,1007,569],{"class":429},[280,1009,474],{"class":395},[280,1011,1012],{"class":282,"line":574},[280,1013,588],{"emptyLinePlaceholder":587},[280,1015,1016,1019],{"class":282,"line":584},[280,1017,1018],{"class":391},"  return",[280,1020,1021],{"class":429}," (\n",[280,1023,1025,1027,1029,1032,1034,1036,1038,1040,1042,1045,1047],{"class":1024,"line":591},[282,454,455],[280,1026,605],{"class":395},[280,1028,608],{"class":429},[280,1030,1031],{"class":433}," className",[280,1033,440],{"class":395},[280,1035,402],{"class":395},[280,1037,618],{"class":290},[280,1039,402],{"class":395},[280,1041,623],{"class":433},[280,1043,1044],{"class":395},"={",[280,1046,535],{"class":460},[280,1048,1049],{"class":395},"}>",[280,1051,1053,1056,1058,1060,1062,1064,1066,1068],{"class":1052,"line":602},[282,454,455],[280,1054,1055],{"class":395},"      \u003C",[280,1057,608],{"class":429},[280,1059,1031],{"class":433},[280,1061,440],{"class":395},[280,1063,402],{"class":395},[280,1065,652],{"class":290},[280,1067,402],{"class":395},[280,1069,634],{"class":395},[280,1071,1073,1075,1077,1079,1081,1083,1085,1087,1089,1091,1093,1095],{"class":1072,"line":638},[282,454,455],[280,1074,641],{"class":395},[280,1076,608],{"class":429},[280,1078,1031],{"class":433},[280,1080,440],{"class":395},[280,1082,402],{"class":395},[280,1084,673],{"class":290},[280,1086,402],{"class":395},[280,1088,634],{"class":395},[280,1090,680],{"class":460},[280,1092,577],{"class":395},[280,1094,608],{"class":429},[280,1096,634],{"class":395},[280,1098,1100,1102,1104,1106,1108,1110,1112,1114,1116,1118,1120,1122],{"class":1099,"line":660},[282,454,455],[280,1101,641],{"class":395},[280,1103,608],{"class":429},[280,1105,1031],{"class":433},[280,1107,440],{"class":395},[280,1109,402],{"class":395},[280,1111,673],{"class":290},[280,1113,402],{"class":395},[280,1115,634],{"class":395},[280,1117,709],{"class":460},[280,1119,577],{"class":395},[280,1121,608],{"class":429},[280,1123,634],{"class":395},[280,1125,1127,1129,1131,1133,1135,1137,1139,1141,1143,1145,1147,1149],{"class":1126,"line":690},[282,454,455],[280,1128,641],{"class":395},[280,1130,608],{"class":429},[280,1132,1031],{"class":433},[280,1134,440],{"class":395},[280,1136,402],{"class":395},[280,1138,673],{"class":290},[280,1140,402],{"class":395},[280,1142,634],{"class":395},[280,1144,738],{"class":460},[280,1146,577],{"class":395},[280,1148,608],{"class":429},[280,1150,634],{"class":395},[280,1152,1154,1157,1159],{"class":1153,"line":719},[282,454,455],[280,1155,1156],{"class":395},"      \u003C\u002F",[280,1158,608],{"class":429},[280,1160,634],{"class":395},[280,1162,1164,1166,1168],{"class":1163,"line":748},[282,454,455],[280,1165,762],{"class":395},[280,1167,608],{"class":429},[280,1169,634],{"class":395},[280,1171,1173,1175,1177,1179,1181,1183,1185,1187],{"class":1172,"line":759},[282,454,478],[280,1174,605],{"class":395},[280,1176,775],{"class":286},[280,1178,1031],{"class":433},[280,1180,440],{"class":395},[280,1182,402],{"class":395},[280,1184,784],{"class":290},[280,1186,402],{"class":395},[280,1188,634],{"class":395},[280,1190,1192,1194,1196,1198,1200,1202,1204,1206,1208,1210,1212,1214],{"class":1191,"line":770},[282,454,478],[280,1193,1055],{"class":395},[280,1195,608],{"class":429},[280,1197,1031],{"class":433},[280,1199,440],{"class":395},[280,1201,402],{"class":395},[280,1203,805],{"class":290},[280,1205,402],{"class":395},[280,1207,634],{"class":395},[280,1209,680],{"class":460},[280,1211,577],{"class":395},[280,1213,608],{"class":429},[280,1215,634],{"class":395},[280,1217,1219,1221,1223,1225,1227,1229,1231,1233,1235,1237,1239,1241],{"class":1218,"line":792},[282,454,478],[280,1220,1055],{"class":395},[280,1222,608],{"class":429},[280,1224,1031],{"class":433},[280,1226,440],{"class":395},[280,1228,402],{"class":395},[280,1230,805],{"class":290},[280,1232,402],{"class":395},[280,1234,634],{"class":395},[280,1236,709],{"class":460},[280,1238,577],{"class":395},[280,1240,608],{"class":429},[280,1242,634],{"class":395},[280,1244,1246,1248,1250,1252,1254,1256,1258,1260,1262,1264,1266,1268],{"class":1245,"line":821},[282,454,478],[280,1247,1055],{"class":395},[280,1249,608],{"class":429},[280,1251,1031],{"class":433},[280,1253,440],{"class":395},[280,1255,402],{"class":395},[280,1257,805],{"class":290},[280,1259,402],{"class":395},[280,1261,634],{"class":395},[280,1263,738],{"class":460},[280,1265,577],{"class":395},[280,1267,608],{"class":429},[280,1269,634],{"class":395},[280,1271,1273,1275,1277],{"class":1272,"line":849},[282,454,478],[280,1274,762],{"class":395},[280,1276,775],{"class":286},[280,1278,634],{"class":395},[280,1280,1281,1284],{"class":282,"line":877},[280,1282,1283],{"class":429},"  )",[280,1285,405],{"class":395},[280,1287,1288],{"class":282,"line":886},[280,1289,1290],{"class":395}," }\n",[270,1292,1296],{"className":1293,"code":1294,"filename":333,"language":1295,"meta":276,"style":276},"language-svelte shiki shiki-themes material-theme-lighter material-theme material-theme-palenight has-diff","\u003Cscript>\n  import emblaCarouselSvelte from \"embla-carousel-svelte\"; \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 = { align: \"start\" }; \u002F\u002F [!code --]\n\u003C\u002Fscript>\n\n\u003Cdiv class=\"embla\" use:emblaCarouselSvelte={{ options }}> \u003C!-- [!code --] -->\n  \u003Cdiv class=\"embla__container\"> \u003C!-- [!code --] -->\n    \u003Cdiv class=\"embla__slide\">Slide 1\u003C\u002Fdiv> \u003C!-- [!code --] -->\n    \u003Cdiv class=\"embla__slide\">Slide 2\u003C\u002Fdiv> \u003C!-- [!code --] -->\n    \u003Cdiv class=\"embla__slide\">Slide 3\u003C\u002Fdiv> \u003C!-- [!code --] -->\n  \u003C\u002Fdiv> \u003C!-- [!code --] -->\n\u003C\u002Fdiv> \u003C!-- [!code --] -->\n\u003CBlossomCarousel class=\"carousel\"> \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,1297,1298,1306,1326,1345,1358,1362,1387,1395,1399,1432,1452,1479,1506,1533,1543,1552,1571,1598,1625,1652],{"__ignoreMap":276},[280,1299,1300,1302,1304],{"class":282,"line":283},[280,1301,426],{"class":395},[280,1303,430],{"class":429},[280,1305,450],{"class":395},[280,1307,1309,1312,1315,1317,1319,1322,1324],{"class":1308,"line":297},[282,454,455],[280,1310,1311],{"class":391},"  import",[280,1313,1314],{"class":460}," emblaCarouselSvelte ",[280,1316,464],{"class":391},[280,1318,396],{"class":395},[280,1320,1321],{"class":290},"embla-carousel-svelte",[280,1323,402],{"class":395},[280,1325,474],{"class":395},[280,1327,1329,1331,1334,1336,1338,1341,1343],{"class":1328,"line":479},[282,454,478],[280,1330,1311],{"class":391},[280,1332,1333],{"class":460}," BlossomCarousel ",[280,1335,464],{"class":391},[280,1337,396],{"class":395},[280,1339,1340],{"class":290},"@blossom-carousel\u002Fsvelte",[280,1342,402],{"class":395},[280,1344,474],{"class":395},[280,1346,1348,1350,1352,1354,1356],{"class":1347,"line":506},[282,454,478],[280,1349,1311],{"class":391},[280,1351,396],{"class":395},[280,1353,399],{"class":290},[280,1355,402],{"class":395},[280,1357,474],{"class":395},[280,1359,1360],{"class":282,"line":519},[280,1361,588],{"emptyLinePlaceholder":587},[280,1363,1365,1367,1370,1372,1374,1376,1378,1380,1382,1384],{"class":1364,"line":526},[282,454,455],[280,1366,979],{"class":433},[280,1368,1369],{"class":460}," options ",[280,1371,440],{"class":395},[280,1373,484],{"class":395},[280,1375,554],{"class":429},[280,1377,557],{"class":395},[280,1379,396],{"class":395},[280,1381,562],{"class":290},[280,1383,402],{"class":395},[280,1385,1386],{"class":395}," };",[280,1388,1389,1391,1393],{"class":282,"line":574},[280,1390,577],{"class":395},[280,1392,430],{"class":429},[280,1394,450],{"class":395},[280,1396,1397],{"class":282,"line":584},[280,1398,588],{"emptyLinePlaceholder":587},[280,1400,1402,1404,1406,1408,1410,1412,1414,1416,1419,1421,1424,1427,1429],{"class":1401,"line":591},[282,454,455],[280,1403,426],{"class":395},[280,1405,608],{"class":429},[280,1407,611],{"class":433},[280,1409,440],{"class":395},[280,1411,402],{"class":395},[280,1413,618],{"class":290},[280,1415,402],{"class":395},[280,1417,1418],{"class":391}," use",[280,1420,557],{"class":395},[280,1422,1423],{"class":460},"emblaCarouselSvelte",[280,1425,1426],{"class":395},"={{",[280,1428,1369],{"class":460},[280,1430,1431],{"class":395},"}}>",[280,1433,1435,1438,1440,1442,1444,1446,1448,1450],{"class":1434,"line":602},[282,454,455],[280,1436,1437],{"class":395},"  \u003C",[280,1439,608],{"class":429},[280,1441,611],{"class":433},[280,1443,440],{"class":395},[280,1445,402],{"class":395},[280,1447,652],{"class":290},[280,1449,402],{"class":395},[280,1451,634],{"class":395},[280,1453,1455,1457,1459,1461,1463,1465,1467,1469,1471,1473,1475,1477],{"class":1454,"line":638},[282,454,455],[280,1456,605],{"class":395},[280,1458,608],{"class":429},[280,1460,611],{"class":433},[280,1462,440],{"class":395},[280,1464,402],{"class":395},[280,1466,673],{"class":290},[280,1468,402],{"class":395},[280,1470,634],{"class":395},[280,1472,680],{"class":460},[280,1474,577],{"class":395},[280,1476,608],{"class":429},[280,1478,634],{"class":395},[280,1480,1482,1484,1486,1488,1490,1492,1494,1496,1498,1500,1502,1504],{"class":1481,"line":660},[282,454,455],[280,1483,605],{"class":395},[280,1485,608],{"class":429},[280,1487,611],{"class":433},[280,1489,440],{"class":395},[280,1491,402],{"class":395},[280,1493,673],{"class":290},[280,1495,402],{"class":395},[280,1497,634],{"class":395},[280,1499,709],{"class":460},[280,1501,577],{"class":395},[280,1503,608],{"class":429},[280,1505,634],{"class":395},[280,1507,1509,1511,1513,1515,1517,1519,1521,1523,1525,1527,1529,1531],{"class":1508,"line":690},[282,454,455],[280,1510,605],{"class":395},[280,1512,608],{"class":429},[280,1514,611],{"class":433},[280,1516,440],{"class":395},[280,1518,402],{"class":395},[280,1520,673],{"class":290},[280,1522,402],{"class":395},[280,1524,634],{"class":395},[280,1526,738],{"class":460},[280,1528,577],{"class":395},[280,1530,608],{"class":429},[280,1532,634],{"class":395},[280,1534,1536,1539,1541],{"class":1535,"line":719},[282,454,455],[280,1537,1538],{"class":395},"  \u003C\u002F",[280,1540,608],{"class":429},[280,1542,634],{"class":395},[280,1544,1546,1548,1550],{"class":1545,"line":748},[282,454,455],[280,1547,577],{"class":395},[280,1549,608],{"class":429},[280,1551,634],{"class":395},[280,1553,1555,1557,1559,1561,1563,1565,1567,1569],{"class":1554,"line":759},[282,454,478],[280,1556,426],{"class":395},[280,1558,775],{"class":286},[280,1560,611],{"class":433},[280,1562,440],{"class":395},[280,1564,402],{"class":395},[280,1566,784],{"class":290},[280,1568,402],{"class":395},[280,1570,634],{"class":395},[280,1572,1574,1576,1578,1580,1582,1584,1586,1588,1590,1592,1594,1596],{"class":1573,"line":770},[282,454,478],[280,1575,1437],{"class":395},[280,1577,608],{"class":429},[280,1579,611],{"class":433},[280,1581,440],{"class":395},[280,1583,402],{"class":395},[280,1585,805],{"class":290},[280,1587,402],{"class":395},[280,1589,634],{"class":395},[280,1591,680],{"class":460},[280,1593,577],{"class":395},[280,1595,608],{"class":429},[280,1597,634],{"class":395},[280,1599,1601,1603,1605,1607,1609,1611,1613,1615,1617,1619,1621,1623],{"class":1600,"line":792},[282,454,478],[280,1602,1437],{"class":395},[280,1604,608],{"class":429},[280,1606,611],{"class":433},[280,1608,440],{"class":395},[280,1610,402],{"class":395},[280,1612,805],{"class":290},[280,1614,402],{"class":395},[280,1616,634],{"class":395},[280,1618,709],{"class":460},[280,1620,577],{"class":395},[280,1622,608],{"class":429},[280,1624,634],{"class":395},[280,1626,1628,1630,1632,1634,1636,1638,1640,1642,1644,1646,1648,1650],{"class":1627,"line":821},[282,454,478],[280,1629,1437],{"class":395},[280,1631,608],{"class":429},[280,1633,611],{"class":433},[280,1635,440],{"class":395},[280,1637,402],{"class":395},[280,1639,805],{"class":290},[280,1641,402],{"class":395},[280,1643,634],{"class":395},[280,1645,738],{"class":460},[280,1647,577],{"class":395},[280,1649,608],{"class":429},[280,1651,634],{"class":395},[280,1653,1655,1657,1659],{"class":1654,"line":849},[282,454,478],[280,1656,577],{"class":395},[280,1658,775],{"class":286},[280,1660,634],{"class":395},[270,1662,1666],{"className":1663,"code":1664,"filename":46,"language":1665,"meta":276,"style":276},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight has-diff","\u003Cdiv class=\"embla\"> \u003C!-- [!code --] -->\n  \u003Cdiv class=\"embla__container\"> \u003C!-- [!code --] -->\n    \u003Cdiv class=\"embla__slide\">Slide 1\u003C\u002Fdiv> \u003C!-- [!code --] -->\n    \u003Cdiv class=\"embla__slide\">Slide 2\u003C\u002Fdiv> \u003C!-- [!code --] -->\n    \u003Cdiv class=\"embla__slide\">Slide 3\u003C\u002Fdiv> \u003C!-- [!code --] -->\n  \u003C\u002Fdiv> \u003C!-- [!code --] -->\n\u003C\u002Fdiv> \u003C!-- [!code --] -->\n\u003Cdiv class=\"carousel\"> \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\u002Fdiv> \u003C!-- [!code ++] -->\n\n\u003Cscript type=\"module\">\n  import EmblaCarousel from \"embla-carousel\"; \u002F\u002F [!code --]\n  import { Blossom } from \"@blossom-carousel\u002Fcore\"; \u002F\u002F [!code ++]\n  import \"@blossom-carousel\u002Fcore\u002Fstyle.css\"; \u002F\u002F [!code ++]\n\n  const emblaElement = document.querySelector(\".embla\"); \u002F\u002F [!code --]\n  const emblaApi = EmblaCarousel(emblaElement, { align: \"start\" }); \u002F\u002F [!code --]\n\n  const carouselElement = document.querySelector(\".carousel\"); \u002F\u002F [!code ++]\n  const blossom = Blossom(carouselElement); \u002F\u002F [!code ++]\n  blossom.init(); \u002F\u002F [!code ++]\n\u003C\u002Fscript>\n","html",[243,1667,1668,1687,1706,1733,1760,1787,1796,1805,1824,1851,1878,1905,1914,1918,1938,1957,1980,1993,1997,2029,2066,2070,2099,2117,2133],{"__ignoreMap":276},[280,1669,1671,1673,1675,1677,1679,1681,1683,1685],{"class":1670,"line":283},[282,454,455],[280,1672,426],{"class":395},[280,1674,608],{"class":429},[280,1676,611],{"class":433},[280,1678,440],{"class":395},[280,1680,402],{"class":395},[280,1682,618],{"class":290},[280,1684,402],{"class":395},[280,1686,634],{"class":395},[280,1688,1690,1692,1694,1696,1698,1700,1702,1704],{"class":1689,"line":297},[282,454,455],[280,1691,1437],{"class":395},[280,1693,608],{"class":429},[280,1695,611],{"class":433},[280,1697,440],{"class":395},[280,1699,402],{"class":395},[280,1701,652],{"class":290},[280,1703,402],{"class":395},[280,1705,634],{"class":395},[280,1707,1709,1711,1713,1715,1717,1719,1721,1723,1725,1727,1729,1731],{"class":1708,"line":479},[282,454,455],[280,1710,605],{"class":395},[280,1712,608],{"class":429},[280,1714,611],{"class":433},[280,1716,440],{"class":395},[280,1718,402],{"class":395},[280,1720,673],{"class":290},[280,1722,402],{"class":395},[280,1724,634],{"class":395},[280,1726,680],{"class":460},[280,1728,577],{"class":395},[280,1730,608],{"class":429},[280,1732,634],{"class":395},[280,1734,1736,1738,1740,1742,1744,1746,1748,1750,1752,1754,1756,1758],{"class":1735,"line":506},[282,454,455],[280,1737,605],{"class":395},[280,1739,608],{"class":429},[280,1741,611],{"class":433},[280,1743,440],{"class":395},[280,1745,402],{"class":395},[280,1747,673],{"class":290},[280,1749,402],{"class":395},[280,1751,634],{"class":395},[280,1753,709],{"class":460},[280,1755,577],{"class":395},[280,1757,608],{"class":429},[280,1759,634],{"class":395},[280,1761,1763,1765,1767,1769,1771,1773,1775,1777,1779,1781,1783,1785],{"class":1762,"line":519},[282,454,455],[280,1764,605],{"class":395},[280,1766,608],{"class":429},[280,1768,611],{"class":433},[280,1770,440],{"class":395},[280,1772,402],{"class":395},[280,1774,673],{"class":290},[280,1776,402],{"class":395},[280,1778,634],{"class":395},[280,1780,738],{"class":460},[280,1782,577],{"class":395},[280,1784,608],{"class":429},[280,1786,634],{"class":395},[280,1788,1790,1792,1794],{"class":1789,"line":526},[282,454,455],[280,1791,1538],{"class":395},[280,1793,608],{"class":429},[280,1795,634],{"class":395},[280,1797,1799,1801,1803],{"class":1798,"line":574},[282,454,455],[280,1800,577],{"class":395},[280,1802,608],{"class":429},[280,1804,634],{"class":395},[280,1806,1808,1810,1812,1814,1816,1818,1820,1822],{"class":1807,"line":584},[282,454,478],[280,1809,426],{"class":395},[280,1811,608],{"class":429},[280,1813,611],{"class":433},[280,1815,440],{"class":395},[280,1817,402],{"class":395},[280,1819,784],{"class":290},[280,1821,402],{"class":395},[280,1823,634],{"class":395},[280,1825,1827,1829,1831,1833,1835,1837,1839,1841,1843,1845,1847,1849],{"class":1826,"line":591},[282,454,478],[280,1828,1437],{"class":395},[280,1830,608],{"class":429},[280,1832,611],{"class":433},[280,1834,440],{"class":395},[280,1836,402],{"class":395},[280,1838,805],{"class":290},[280,1840,402],{"class":395},[280,1842,634],{"class":395},[280,1844,680],{"class":460},[280,1846,577],{"class":395},[280,1848,608],{"class":429},[280,1850,634],{"class":395},[280,1852,1854,1856,1858,1860,1862,1864,1866,1868,1870,1872,1874,1876],{"class":1853,"line":602},[282,454,478],[280,1855,1437],{"class":395},[280,1857,608],{"class":429},[280,1859,611],{"class":433},[280,1861,440],{"class":395},[280,1863,402],{"class":395},[280,1865,805],{"class":290},[280,1867,402],{"class":395},[280,1869,634],{"class":395},[280,1871,709],{"class":460},[280,1873,577],{"class":395},[280,1875,608],{"class":429},[280,1877,634],{"class":395},[280,1879,1881,1883,1885,1887,1889,1891,1893,1895,1897,1899,1901,1903],{"class":1880,"line":638},[282,454,478],[280,1882,1437],{"class":395},[280,1884,608],{"class":429},[280,1886,611],{"class":433},[280,1888,440],{"class":395},[280,1890,402],{"class":395},[280,1892,805],{"class":290},[280,1894,402],{"class":395},[280,1896,634],{"class":395},[280,1898,738],{"class":460},[280,1900,577],{"class":395},[280,1902,608],{"class":429},[280,1904,634],{"class":395},[280,1906,1908,1910,1912],{"class":1907,"line":660},[282,454,478],[280,1909,577],{"class":395},[280,1911,608],{"class":429},[280,1913,634],{"class":395},[280,1915,1916],{"class":282,"line":690},[280,1917,588],{"emptyLinePlaceholder":587},[280,1919,1920,1922,1924,1927,1929,1931,1934,1936],{"class":282,"line":719},[280,1921,426],{"class":395},[280,1923,430],{"class":429},[280,1925,1926],{"class":433}," type",[280,1928,440],{"class":395},[280,1930,402],{"class":395},[280,1932,1933],{"class":290},"module",[280,1935,402],{"class":395},[280,1937,450],{"class":395},[280,1939,1941,1943,1946,1948,1950,1953,1955],{"class":1940,"line":748},[282,454,455],[280,1942,1311],{"class":391},[280,1944,1945],{"class":460}," EmblaCarousel ",[280,1947,464],{"class":391},[280,1949,396],{"class":395},[280,1951,1952],{"class":290},"embla-carousel",[280,1954,402],{"class":395},[280,1956,474],{"class":395},[280,1958,1960,1962,1964,1967,1969,1971,1973,1976,1978],{"class":1959,"line":759},[282,454,478],[280,1961,1311],{"class":391},[280,1963,484],{"class":395},[280,1965,1966],{"class":460}," Blossom",[280,1968,490],{"class":395},[280,1970,493],{"class":391},[280,1972,396],{"class":395},[280,1974,1975],{"class":290},"@blossom-carousel\u002Fcore",[280,1977,402],{"class":395},[280,1979,474],{"class":395},[280,1981,1983,1985,1987,1989,1991],{"class":1982,"line":770},[282,454,478],[280,1984,1311],{"class":391},[280,1986,396],{"class":395},[280,1988,399],{"class":290},[280,1990,402],{"class":395},[280,1992,474],{"class":395},[280,1994,1995],{"class":282,"line":792},[280,1996,588],{"emptyLinePlaceholder":587},[280,1998,2000,2002,2005,2007,2010,2013,2016,2018,2020,2023,2025,2027],{"class":1999,"line":821},[282,454,455],[280,2001,979],{"class":433},[280,2003,2004],{"class":460}," emblaElement ",[280,2006,440],{"class":395},[280,2008,2009],{"class":460}," document",[280,2011,2012],{"class":395},".",[280,2014,2015],{"class":544},"querySelector",[280,2017,548],{"class":460},[280,2019,402],{"class":395},[280,2021,2022],{"class":290},".embla",[280,2024,402],{"class":395},[280,2026,569],{"class":460},[280,2028,474],{"class":395},[280,2030,2032,2034,2037,2039,2042,2045,2048,2050,2052,2054,2056,2058,2060,2062,2064],{"class":2031,"line":849},[282,454,455],[280,2033,979],{"class":433},[280,2035,2036],{"class":460}," emblaApi ",[280,2038,440],{"class":395},[280,2040,2041],{"class":544}," EmblaCarousel",[280,2043,2044],{"class":460},"(emblaElement",[280,2046,2047],{"class":395},",",[280,2049,484],{"class":395},[280,2051,554],{"class":429},[280,2053,557],{"class":395},[280,2055,396],{"class":395},[280,2057,562],{"class":290},[280,2059,402],{"class":395},[280,2061,490],{"class":395},[280,2063,569],{"class":460},[280,2065,474],{"class":395},[280,2067,2068],{"class":282,"line":877},[280,2069,588],{"emptyLinePlaceholder":587},[280,2071,2073,2075,2078,2080,2082,2084,2086,2088,2090,2093,2095,2097],{"class":2072,"line":886},[282,454,478],[280,2074,979],{"class":433},[280,2076,2077],{"class":460}," carouselElement ",[280,2079,440],{"class":395},[280,2081,2009],{"class":460},[280,2083,2012],{"class":395},[280,2085,2015],{"class":544},[280,2087,548],{"class":460},[280,2089,402],{"class":395},[280,2091,2092],{"class":290},".carousel",[280,2094,402],{"class":395},[280,2096,569],{"class":460},[280,2098,474],{"class":395},[280,2100,2103,2105,2108,2110,2112,2115],{"class":2101,"line":2102},[282,454,478],23,[280,2104,979],{"class":433},[280,2106,2107],{"class":460}," blossom ",[280,2109,440],{"class":395},[280,2111,1966],{"class":544},[280,2113,2114],{"class":460},"(carouselElement)",[280,2116,474],{"class":395},[280,2118,2121,2124,2126,2129,2131],{"class":2119,"line":2120},[282,454,478],24,[280,2122,2123],{"class":460},"  blossom",[280,2125,2012],{"class":395},[280,2127,2128],{"class":544},"init",[280,2130,970],{"class":460},[280,2132,474],{"class":395},[280,2134,2136,2138,2140],{"class":282,"line":2135},25,[280,2137,577],{"class":395},[280,2139,430],{"class":429},[280,2141,450],{"class":395},[228,2143,2145],{"id":2144},"options","Options",[221,2147,2148],{},"Embla options describe how the carousel engine should calculate slide positions. In Blossom, those same decisions are usually regular CSS on the scroll container and slides.",[2150,2151,2152,2165],"table",{},[2153,2154,2155],"thead",{},[2156,2157,2158,2162],"tr",{},[2159,2160,2161],"th",{},"Embla concept",[2159,2163,2164],{},"Blossom approach",[2166,2167,2168,2179,2193,2205,2218,2235,2251,2268,2278,2292],"tbody",{},[2156,2169,2170,2176],{},[2171,2172,2173],"td",{},[243,2174,2175],{},"axis: \"x\"",[2171,2177,2178],{},"Automatically handled by Blossom based on native overscroll.",[2156,2180,2181,2186],{},[2171,2182,2183],{},[243,2184,2185],{},"align: \"start\"",[2171,2187,2188,2189,2192],{},"Use CSS ",[243,2190,2191],{},"scroll-snap-align: start"," on slides.",[2156,2194,2195,2200],{},[2171,2196,2197],{},[243,2198,2199],{},"align: \"center\"",[2171,2201,2188,2202,2192],{},[243,2203,2204],{},"scroll-snap-align: center",[2156,2206,2207,2212],{},[2171,2208,2209],{},[243,2210,2211],{},"containScroll",[2171,2213,2214,2215,2012],{},"Use native scroll bounds, padding, and ",[243,2216,2217],{},"scroll-padding",[2156,2219,2220,2225],{},[2171,2221,2222],{},[243,2223,2224],{},"slidesToScroll",[2171,2226,2188,2227,2230,2231,2234],{},[243,2228,2229],{},"scroll-snap-align"," within ",[243,2232,2233],{},":nth-child(xn)"," or nest slides in groups.",[2156,2236,2237,2242],{},[2171,2238,2239],{},[243,2240,2241],{},"dragFree",[2171,2243,2244,2245,2247,2248,2012],{},"Omit ",[243,2246,2229],{}," or use ",[243,2249,2250],{},"scroll-snap-type: proximity",[2156,2252,2253,2258],{},[2171,2254,2255],{},[243,2256,2257],{},"direction: \"rtl\"",[2171,2259,2260,2261,2264,2265,2012],{},"Use ",[243,2262,2263],{},"dir=\"rtl\""," or CSS ",[243,2266,2267],{},"direction: rtl",[2156,2269,2270,2275],{},[2171,2271,2272],{},[243,2273,2274],{},"breakpoints",[2171,2276,2277],{},"Use CSS media queries and container queries.",[2156,2279,2280,2285],{},[2171,2281,2282],{},[243,2283,2284],{},"loop",[2171,2286,2287,2288,2012],{},"Prefer bounded native scrolling, or use the experimental repeat pattern when an infinite effect is required. See ",[2289,2290,2291],"a",{"href":157},"Repeat example",[2156,2293,2294,2299],{},[2171,2295,2296],{},[243,2297,2298],{},"draggable",[2171,2300,2188,2301,2304],{},[243,2302,2303],{},"overflow: hidden"," on the carousel to disable dragging and scrolling.",[221,2306,2307],{},"For example, this Embla setup:",[270,2309,2311],{"className":382,"code":2310,"filename":191,"language":384,"meta":276,"style":276},"useEmblaCarousel({\n  axis: \"x\",\n  align: \"center\",\n  containScroll: \"trimSnaps\",\n  dragFree: false,\n  breakpoints: {\n    \"(min-width: 768px)\": { align: \"start\" },\n  },\n});\n",[243,2312,2313,2323,2340,2356,2372,2385,2394,2421,2426],{"__ignoreMap":276},[280,2314,2315,2318,2320],{"class":282,"line":283},[280,2316,2317],{"class":544},"useEmblaCarousel",[280,2319,548],{"class":460},[280,2321,2322],{"class":395},"{\n",[280,2324,2325,2328,2330,2332,2335,2337],{"class":282,"line":297},[280,2326,2327],{"class":429},"  axis",[280,2329,557],{"class":395},[280,2331,396],{"class":395},[280,2333,2334],{"class":290},"x",[280,2336,402],{"class":395},[280,2338,2339],{"class":395},",\n",[280,2341,2342,2345,2347,2349,2352,2354],{"class":282,"line":479},[280,2343,2344],{"class":429},"  align",[280,2346,557],{"class":395},[280,2348,396],{"class":395},[280,2350,2351],{"class":290},"center",[280,2353,402],{"class":395},[280,2355,2339],{"class":395},[280,2357,2358,2361,2363,2365,2368,2370],{"class":282,"line":506},[280,2359,2360],{"class":429},"  containScroll",[280,2362,557],{"class":395},[280,2364,396],{"class":395},[280,2366,2367],{"class":290},"trimSnaps",[280,2369,402],{"class":395},[280,2371,2339],{"class":395},[280,2373,2374,2377,2379,2383],{"class":282,"line":519},[280,2375,2376],{"class":429},"  dragFree",[280,2378,557],{"class":395},[280,2380,2382],{"class":2381},"sfNiH"," false",[280,2384,2339],{"class":395},[280,2386,2387,2390,2392],{"class":282,"line":526},[280,2388,2389],{"class":429},"  breakpoints",[280,2391,557],{"class":395},[280,2393,973],{"class":395},[280,2395,2396,2399,2402,2404,2406,2408,2410,2412,2414,2416,2418],{"class":282,"line":574},[280,2397,2398],{"class":395},"    \"",[280,2400,2401],{"class":429},"(min-width: 768px)",[280,2403,402],{"class":395},[280,2405,557],{"class":395},[280,2407,484],{"class":395},[280,2409,554],{"class":429},[280,2411,557],{"class":395},[280,2413,396],{"class":395},[280,2415,562],{"class":290},[280,2417,402],{"class":395},[280,2419,2420],{"class":395}," },\n",[280,2422,2423],{"class":282,"line":584},[280,2424,2425],{"class":395},"  },\n",[280,2427,2428,2431,2433],{"class":282,"line":591},[280,2429,2430],{"class":395},"}",[280,2432,569],{"class":460},[280,2434,405],{"class":395},[221,2436,2437],{},"becomes CSS:",[270,2439,2444],{"className":2440,"code":2441,"filename":2442,"language":2443,"meta":276,"style":276},"language-css shiki shiki-themes material-theme-lighter material-theme material-theme-palenight",".carousel {\n  scroll-snap-type: inline mandatory;\n  scroll-padding-inline: 1rem;\n}\n\n.slide {\n  scroll-snap-align: center;\n}\n\n@media (min-width: 768px) {\n  .slide {\n    scroll-snap-align: start;\n  }\n}\n","Blossom","css",[243,2445,2446,2454,2467,2480,2485,2489,2498,2510,2514,2518,2538,2547,2559,2564],{"__ignoreMap":276},[280,2447,2448,2450,2452],{"class":282,"line":283},[280,2449,2012],{"class":395},[280,2451,784],{"class":286},[280,2453,973],{"class":395},[280,2455,2456,2460,2462,2465],{"class":282,"line":297},[280,2457,2459],{"class":2458},"sqsOY","  scroll-snap-type",[280,2461,557],{"class":395},[280,2463,2464],{"class":460}," inline mandatory",[280,2466,405],{"class":395},[280,2468,2469,2472,2474,2478],{"class":282,"line":479},[280,2470,2471],{"class":2458},"  scroll-padding-inline",[280,2473,557],{"class":395},[280,2475,2477],{"class":2476},"sbssI"," 1rem",[280,2479,405],{"class":395},[280,2481,2482],{"class":282,"line":506},[280,2483,2484],{"class":395},"}\n",[280,2486,2487],{"class":282,"line":519},[280,2488,588],{"emptyLinePlaceholder":587},[280,2490,2491,2493,2496],{"class":282,"line":526},[280,2492,2012],{"class":395},[280,2494,2495],{"class":286},"slide",[280,2497,973],{"class":395},[280,2499,2500,2503,2505,2508],{"class":282,"line":574},[280,2501,2502],{"class":2458},"  scroll-snap-align",[280,2504,557],{"class":395},[280,2506,2507],{"class":460}," center",[280,2509,405],{"class":395},[280,2511,2512],{"class":282,"line":584},[280,2513,2484],{"class":395},[280,2515,2516],{"class":282,"line":591},[280,2517,588],{"emptyLinePlaceholder":587},[280,2519,2520,2523,2526,2529,2531,2534,2536],{"class":282,"line":602},[280,2521,2522],{"class":391},"@media",[280,2524,2525],{"class":395}," (",[280,2527,2528],{"class":286},"min-width",[280,2530,557],{"class":395},[280,2532,2533],{"class":2476}," 768px",[280,2535,569],{"class":395},[280,2537,973],{"class":395},[280,2539,2540,2543,2545],{"class":282,"line":638},[280,2541,2542],{"class":395},"  .",[280,2544,2495],{"class":286},[280,2546,973],{"class":395},[280,2548,2549,2552,2554,2557],{"class":282,"line":660},[280,2550,2551],{"class":2458},"    scroll-snap-align",[280,2553,557],{"class":395},[280,2555,2556],{"class":460}," start",[280,2558,405],{"class":395},[280,2560,2561],{"class":282,"line":690},[280,2562,2563],{"class":395},"  }\n",[280,2565,2566],{"class":282,"line":719},[280,2567,2484],{"class":395},[228,2569,2571],{"id":2570},"controls","Controls",[221,2573,2574],{},"Embla and Blossom both expose carousel controls through their respective APIs.",[270,2576,2579],{"className":2577,"code":2578,"language":445,"meta":276,"style":276},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight has-diff","const [emblaRef, emblaApi] = useEmblaCarousel(); \u002F\u002F [!code --]\nemblaApi.scrollPrev(); \u002F\u002F [!code --]\nemblaApi.scrollNext(); \u002F\u002F [!code --]\nconst blossom = ref(null); \u002F\u002F [!code ++]\nblossom.value.prev(); \u002F\u002F [!code ++]\nblossom.value.next(); \u002F\u002F [!code ++]\n",[243,2580,2581,2605,2620,2634,2654,2674],{"__ignoreMap":276},[280,2582,2584,2586,2588,2590,2592,2595,2597,2599,2601,2603],{"class":2583,"line":283},[282,454,455],[280,2585,529],{"class":433},[280,2587,532],{"class":395},[280,2589,535],{"class":460},[280,2591,2047],{"class":395},[280,2593,2594],{"class":460}," emblaApi",[280,2596,538],{"class":395},[280,2598,541],{"class":395},[280,2600,545],{"class":544},[280,2602,970],{"class":460},[280,2604,474],{"class":395},[280,2606,2608,2611,2613,2616,2618],{"class":2607,"line":297},[282,454,455],[280,2609,2610],{"class":460},"emblaApi",[280,2612,2012],{"class":395},[280,2614,2615],{"class":544},"scrollPrev",[280,2617,970],{"class":460},[280,2619,474],{"class":395},[280,2621,2623,2625,2627,2630,2632],{"class":2622,"line":479},[282,454,455],[280,2624,2610],{"class":460},[280,2626,2012],{"class":395},[280,2628,2629],{"class":544},"scrollNext",[280,2631,970],{"class":460},[280,2633,474],{"class":395},[280,2635,2637,2639,2641,2643,2645,2647,2650,2652],{"class":2636,"line":506},[282,454,478],[280,2638,529],{"class":433},[280,2640,2107],{"class":460},[280,2642,440],{"class":395},[280,2644,623],{"class":544},[280,2646,548],{"class":460},[280,2648,2649],{"class":395},"null",[280,2651,569],{"class":460},[280,2653,474],{"class":395},[280,2655,2657,2660,2662,2665,2667,2670,2672],{"class":2656,"line":519},[282,454,478],[280,2658,2659],{"class":460},"blossom",[280,2661,2012],{"class":395},[280,2663,2664],{"class":460},"value",[280,2666,2012],{"class":395},[280,2668,2669],{"class":544},"prev",[280,2671,970],{"class":460},[280,2673,474],{"class":395},[280,2675,2677,2679,2681,2683,2685,2688,2690],{"class":2676,"line":526},[282,454,478],[280,2678,2659],{"class":460},[280,2680,2012],{"class":395},[280,2682,2664],{"class":460},[280,2684,2012],{"class":395},[280,2686,2687],{"class":544},"next",[280,2689,970],{"class":460},[280,2691,474],{"class":395},[221,2693,2694],{},"For direct slide navigation, use native scrolling on the target slide.",[270,2696,2699],{"className":2697,"code":2698,"language":445,"meta":276,"style":276},"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,2700,2701,2715,2731,2746,2762],{"__ignoreMap":276},[280,2702,2703,2706,2708,2711,2713],{"class":282,"line":283},[280,2704,2705],{"class":460},"slides[index]",[280,2707,2012],{"class":395},[280,2709,2710],{"class":544},"scrollIntoView",[280,2712,548],{"class":460},[280,2714,2322],{"class":395},[280,2716,2717,2720,2722,2724,2727,2729],{"class":282,"line":297},[280,2718,2719],{"class":429},"  behavior",[280,2721,557],{"class":395},[280,2723,396],{"class":395},[280,2725,2726],{"class":290},"smooth",[280,2728,402],{"class":395},[280,2730,2339],{"class":395},[280,2732,2733,2736,2738,2740,2742,2744],{"class":282,"line":479},[280,2734,2735],{"class":429},"  inline",[280,2737,557],{"class":395},[280,2739,396],{"class":395},[280,2741,2351],{"class":290},[280,2743,402],{"class":395},[280,2745,2339],{"class":395},[280,2747,2748,2751,2753,2755,2758,2760],{"class":282,"line":506},[280,2749,2750],{"class":429},"  block",[280,2752,557],{"class":395},[280,2754,396],{"class":395},[280,2756,2757],{"class":290},"nearest",[280,2759,402],{"class":395},[280,2761,2339],{"class":395},[280,2763,2764,2766,2768],{"class":282,"line":519},[280,2765,2430],{"class":395},[280,2767,569],{"class":460},[280,2769,405],{"class":395},[228,2771,2773],{"id":2772},"api","API",[221,2775,2776,2777,2780,2781,2784],{},"Embla commonly uses ",[243,2778,2779],{},"select"," events and ",[243,2782,2783],{},"selectedScrollSnap()"," to track the active slide.",[221,2786,2787,2788,2791,2792,2795,2796,2799],{},"With Blossom, the carousel is a real scroll container, so use browser APIs such as ",[243,2789,2790],{},"IntersectionObserver",", ",[243,2793,2794],{},"scrollsnapchange",", or ",[243,2797,2798],{},"scroll"," events depending on the browser support you need.",[270,2801,2803],{"className":2577,"code":2802,"language":445,"meta":276,"style":276},"emblaApi.on(\"select\", () => { \u002F\u002F [!code --]\n  setSelectedIndex(emblaApi.selectedScrollSnap()); \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      const index = slides.indexOf(activeEntry.target); \u002F\u002F [!code ++]\n      setSelectedIndex(index); \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,2804,2805,2833,2853,2862,2866,2898,2921,2930,2934,2939,2943,2970,2989,3004,3046,3062,3094,3108,3114,3120,3147,3154],{"__ignoreMap":276},[280,2806,2808,2810,2812,2815,2817,2819,2821,2823,2825,2828,2831],{"class":2807,"line":283},[282,454,455],[280,2809,2610],{"class":460},[280,2811,2012],{"class":395},[280,2813,2814],{"class":544},"on",[280,2816,548],{"class":460},[280,2818,402],{"class":395},[280,2820,2779],{"class":290},[280,2822,402],{"class":395},[280,2824,2047],{"class":395},[280,2826,2827],{"class":395}," ()",[280,2829,2830],{"class":433}," =>",[280,2832,484],{"class":395},[280,2834,2836,2839,2841,2843,2845,2848,2851],{"class":2835,"line":297},[282,454,455],[280,2837,2838],{"class":544},"  setSelectedIndex",[280,2840,548],{"class":429},[280,2842,2610],{"class":460},[280,2844,2012],{"class":395},[280,2846,2847],{"class":544},"selectedScrollSnap",[280,2849,2850],{"class":429},"())",[280,2852,474],{"class":395},[280,2854,2856,2858,2860],{"class":2855,"line":479},[282,454,455],[280,2857,2430],{"class":395},[280,2859,569],{"class":460},[280,2861,474],{"class":395},[280,2863,2864],{"class":282,"line":506},[280,2865,588],{"emptyLinePlaceholder":587},[280,2867,2869,2871,2873,2876,2878,2880,2882,2884,2886,2888,2892,2894,2896],{"class":2868,"line":519},[282,454,478],[280,2870,784],{"class":460},[280,2872,2012],{"class":395},[280,2874,2875],{"class":544},"addEventListener",[280,2877,548],{"class":460},[280,2879,402],{"class":395},[280,2881,2794],{"class":290},[280,2883,402],{"class":395},[280,2885,2047],{"class":395},[280,2887,2525],{"class":395},[280,2889,2891],{"class":2890},"sHdIc","event",[280,2893,569],{"class":395},[280,2895,2830],{"class":433},[280,2897,484],{"class":395},[280,2899,2901,2903,2905,2907,2909,2912,2914,2917,2919],{"class":2900,"line":526},[282,454,478],[280,2902,2838],{"class":544},[280,2904,548],{"class":429},[280,2906,2891],{"class":460},[280,2908,2012],{"class":395},[280,2910,2911],{"class":460},"detail",[280,2913,2012],{"class":395},[280,2915,2916],{"class":460},"index",[280,2918,569],{"class":429},[280,2920,474],{"class":395},[280,2922,2924,2926,2928],{"class":2923,"line":574},[282,454,478],[280,2925,2430],{"class":395},[280,2927,569],{"class":460},[280,2929,474],{"class":395},[280,2931,2932],{"class":282,"line":584},[280,2933,588],{"emptyLinePlaceholder":587},[280,2935,2936],{"class":282,"line":591},[280,2937,2938],{"class":460},"Or use IntersectionObserver for wider browser support\n",[280,2940,2941],{"class":282,"line":602},[280,2942,588],{"emptyLinePlaceholder":587},[280,2944,2946,2948,2951,2953,2956,2958,2960,2963,2965,2968],{"class":2945,"line":638},[282,454,478],[280,2947,529],{"class":433},[280,2949,2950],{"class":460}," slides ",[280,2952,440],{"class":395},[280,2954,2955],{"class":460}," Array",[280,2957,2012],{"class":395},[280,2959,464],{"class":544},[280,2961,2962],{"class":460},"(carousel",[280,2964,2012],{"class":395},[280,2966,2967],{"class":460},"children)",[280,2969,474],{"class":395},[280,2971,2973,2975,2978,2980,2983,2986],{"class":2972,"line":660},[282,454,478],[280,2974,529],{"class":433},[280,2976,2977],{"class":460}," observer ",[280,2979,440],{"class":395},[280,2981,2982],{"class":395}," new",[280,2984,2985],{"class":544}," IntersectionObserver",[280,2987,2988],{"class":460},"( ",[280,2990,2992,2995,2998,3000,3002],{"class":2991,"line":690},[282,454,478],[280,2993,2994],{"class":395},"  (",[280,2996,2997],{"class":2890},"entries",[280,2999,569],{"class":395},[280,3001,2830],{"class":433},[280,3003,484],{"class":395},[280,3005,3007,3010,3013,3015,3018,3020,3023,3025,3027,3030,3032,3034,3037,3039,3042,3044],{"class":3006,"line":719},[282,454,478],[280,3008,3009],{"class":433},"    const",[280,3011,3012],{"class":460}," activeEntry",[280,3014,541],{"class":395},[280,3016,3017],{"class":460}," entries",[280,3019,2012],{"class":395},[280,3021,3022],{"class":544},"find",[280,3024,548],{"class":429},[280,3026,548],{"class":395},[280,3028,3029],{"class":2890},"entry",[280,3031,569],{"class":395},[280,3033,2830],{"class":433},[280,3035,3036],{"class":460}," entry",[280,3038,2012],{"class":395},[280,3040,3041],{"class":460},"isIntersecting",[280,3043,569],{"class":429},[280,3045,474],{"class":395},[280,3047,3049,3052,3054,3057,3060],{"class":3048,"line":748},[282,454,478],[280,3050,3051],{"class":391},"    if",[280,3053,2525],{"class":429},[280,3055,3056],{"class":460},"activeEntry",[280,3058,3059],{"class":429},") ",[280,3061,551],{"class":395},[280,3063,3065,3068,3071,3073,3076,3078,3081,3083,3085,3087,3090,3092],{"class":3064,"line":759},[282,454,478],[280,3066,3067],{"class":433},"      const",[280,3069,3070],{"class":460}," index",[280,3072,541],{"class":395},[280,3074,3075],{"class":460}," slides",[280,3077,2012],{"class":395},[280,3079,3080],{"class":544},"indexOf",[280,3082,548],{"class":429},[280,3084,3056],{"class":460},[280,3086,2012],{"class":395},[280,3088,3089],{"class":460},"target",[280,3091,569],{"class":429},[280,3093,474],{"class":395},[280,3095,3097,3100,3102,3104,3106],{"class":3096,"line":770},[282,454,478],[280,3098,3099],{"class":544},"      setSelectedIndex",[280,3101,548],{"class":429},[280,3103,2916],{"class":460},[280,3105,569],{"class":429},[280,3107,474],{"class":395},[280,3109,3111],{"class":3110,"line":792},[282,454,478],[280,3112,3113],{"class":395},"    }",[280,3115,3117],{"class":3116,"line":821},[282,454,478],[280,3118,3119],{"class":395},"  },",[280,3121,3123,3126,3129,3131,3134,3136,3139,3141,3144],{"class":3122,"line":849},[282,454,478],[280,3124,3125],{"class":395},"  {",[280,3127,3128],{"class":429}," root",[280,3130,557],{"class":395},[280,3132,3133],{"class":460}," carousel",[280,3135,2047],{"class":395},[280,3137,3138],{"class":429}," threshold",[280,3140,557],{"class":395},[280,3142,3143],{"class":2476}," 0.5",[280,3145,3146],{"class":395}," },",[280,3148,3150,3152],{"class":3149,"line":877},[282,454,478],[280,3151,569],{"class":460},[280,3153,474],{"class":395},[280,3155,3157,3160,3162,3165,3167,3169,3171,3173,3175,3178,3180,3183,3186],{"class":3156,"line":886},[282,454,478],[280,3158,3159],{"class":460},"slides",[280,3161,2012],{"class":395},[280,3163,3164],{"class":544},"forEach",[280,3166,548],{"class":460},[280,3168,548],{"class":395},[280,3170,2495],{"class":2890},[280,3172,569],{"class":395},[280,3174,2830],{"class":433},[280,3176,3177],{"class":460}," observer",[280,3179,2012],{"class":395},[280,3181,3182],{"class":544},"observe",[280,3184,3185],{"class":460},"(slide))",[280,3187,474],{"class":395},[228,3189,3191],{"id":3190},"plugins","Plugins",[221,3193,3194],{},"Embla plugins usually become either small Blossom wrappers or native platform features.",[2150,3196,3197,3207],{},[2153,3198,3199],{},[2156,3200,3201,3204],{},[2159,3202,3203],{},"Embla plugin pattern",[2159,3205,3206],{},"Blossom replacement",[2166,3208,3209,3221,3229,3240,3252],{},[2156,3210,3211,3214],{},[2171,3212,3213],{},"Autoplay",[2171,3215,3216,3217,3220],{},"Use a timer that calls ",[243,3218,3219],{},"next()"," or scrolls the next slide into view.",[2156,3222,3223,3226],{},[2171,3224,3225],{},"Fade",[2171,3227,3228],{},"Use CSS scroll-driven animations or intersection state.",[2156,3230,3231,3234],{},[2171,3232,3233],{},"Auto height",[2171,3235,3236,3237,2012],{},"Let content define height, or update layout with ",[243,3238,3239],{},"ResizeObserver",[2156,3241,3242,3245],{},[2171,3243,3244],{},"Class names",[2171,3246,2260,3247,2791,3249,3251],{},[243,3248,2790],{},[243,3250,2794],{},", or scroll-state queries.",[2156,3253,3254,3257],{},[2171,3255,3256],{},"Wheel gestures",[2171,3258,3259],{},"Use the browser's native scroll behavior where possible.",[221,3261,3262],{},"Keep plugin migrations small. Start from a working Blossom carousel, then add the behavior back only if the product still needs it.",[228,3264,3266],{"id":3265},"lifecycle","Lifecycle",[221,3268,3269],{},"Embla's and Blossom's lifecycle methods are similar.",[254,3271,3272],{"color":256,"icon":257},"Blossom initializes automatically when using framework components.",[270,3274,3276],{"className":2577,"code":3275,"language":445,"meta":276,"style":276},"const [emblaRef, emblaApi] = useEmblaCarousel(); \u002F\u002F [!code --]\nemblaApi.reInit(); \u002F\u002F [!code --]\nemblaApi.destroy(); \u002F\u002F [!code --]\nconst blossom = Blossom(carouselElement); \u002F\u002F [!code ++]\nblossom.init(); \u002F\u002F [!code ++]\nblossom.destroy(); \u002F\u002F [!code ++]\n",[243,3277,3278,3301,3315,3329,3344,3357],{"__ignoreMap":276},[280,3279,3281,3283,3285,3287,3289,3291,3293,3295,3297,3299],{"class":3280,"line":283},[282,454,455],[280,3282,529],{"class":433},[280,3284,532],{"class":395},[280,3286,535],{"class":460},[280,3288,2047],{"class":395},[280,3290,2594],{"class":460},[280,3292,538],{"class":395},[280,3294,541],{"class":395},[280,3296,545],{"class":544},[280,3298,970],{"class":460},[280,3300,474],{"class":395},[280,3302,3304,3306,3308,3311,3313],{"class":3303,"line":297},[282,454,455],[280,3305,2610],{"class":460},[280,3307,2012],{"class":395},[280,3309,3310],{"class":544},"reInit",[280,3312,970],{"class":460},[280,3314,474],{"class":395},[280,3316,3318,3320,3322,3325,3327],{"class":3317,"line":479},[282,454,455],[280,3319,2610],{"class":460},[280,3321,2012],{"class":395},[280,3323,3324],{"class":544},"destroy",[280,3326,970],{"class":460},[280,3328,474],{"class":395},[280,3330,3332,3334,3336,3338,3340,3342],{"class":3331,"line":506},[282,454,478],[280,3333,529],{"class":433},[280,3335,2107],{"class":460},[280,3337,440],{"class":395},[280,3339,1966],{"class":544},[280,3341,2114],{"class":460},[280,3343,474],{"class":395},[280,3345,3347,3349,3351,3353,3355],{"class":3346,"line":519},[282,454,478],[280,3348,2659],{"class":460},[280,3350,2012],{"class":395},[280,3352,2128],{"class":544},[280,3354,970],{"class":460},[280,3356,474],{"class":395},[280,3358,3360,3362,3364,3366,3368],{"class":3359,"line":526},[282,454,478],[280,3361,2659],{"class":460},[280,3363,2012],{"class":395},[280,3365,3324],{"class":544},[280,3367,970],{"class":460},[280,3369,474],{"class":395},[228,3371,3373],{"id":3372},"migration-checklist","Migration checklist",[3375,3376,3377,3380,3386,3392,3395,3411,3423,3428],"ul",{},[239,3378,3379],{},"Remove Embla packages and install the matching Blossom package.",[239,3381,3382,3383,3385],{},"Import ",[243,3384,399],{}," once.",[239,3387,3388,3389,3391],{},"Replace Embla viewport and container markup with ",[243,3390,245],{}," and direct slide children.",[239,3393,3394],{},"Move slide sizing, alignment, gaps, snapping, direction, and breakpoints into CSS.",[239,3396,3397,3398,3401,3402,3405,3406,3401,3409,2012],{},"Replace ",[243,3399,3400],{},"scrollPrev()"," and ",[243,3403,3404],{},"scrollNext()"," with ",[243,3407,3408],{},"prev()",[243,3410,3219],{},[239,3412,3397,3413,3405,3416,3419,3420,3422],{},[243,3414,3415],{},"scrollTo()",[243,3417,3418],{},"scrollIntoView()"," or native ",[243,3421,3415],{}," on the carousel element.",[239,3424,3397,3425,3427],{},[243,3426,2779],{}," listeners with browser observers or scroll snap events.",[239,3429,3430],{},"Rebuild only the Embla plugins your carousel still needs.",[228,3432,3434],{"id":3433},"next-steps","Next steps",[3375,3436,3437,3442,3447,3452,3457],{},[239,3438,3439,3441],{},[2289,3440,16],{"href":17}," - Pick the package for your framework.",[239,3443,3444,3446],{},[2289,3445,66],{"href":67}," - Configure scroll snap behavior with CSS.",[239,3448,3449,3451],{},[2289,3450,86],{"href":87}," - Add previous and next controls.",[239,3453,3454,3456],{},[2289,3455,91],{"href":92}," - Track the active slide with browser APIs.",[239,3458,3459,3461],{},[2289,3460,156],{"href":157}," - Explore an experimental repeating carousel pattern.",[3463,3464,3465],"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 .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}html pre.shiki code .sqsOY, html code.shiki .sqsOY{--shiki-light:#8796B0;--shiki-default:#B2CCD6;--shiki-dark:#B2CCD6}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}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":276,"searchDepth":297,"depth":297,"links":3467},[3468,3469,3470,3471,3472,3473,3474,3475,3476,3477],{"id":230,"depth":297,"text":231},{"id":261,"depth":297,"text":16},{"id":408,"depth":297,"text":409},{"id":2144,"depth":297,"text":2145},{"id":2570,"depth":297,"text":2571},{"id":2772,"depth":297,"text":2773},{"id":3190,"depth":297,"text":3191},{"id":3265,"depth":297,"text":3266},{"id":3372,"depth":297,"text":3373},{"id":3433,"depth":297,"text":3434},"Migrate from Embla Carousel to Blossom Carousel by moving layout and behavior back to native scrolling and CSS.","md",null,{},{"icon":194},{"title":3484,"description":3485},"Migrate from Embla Carousel to Blossom Carousel","Replace Embla Carousel with Blossom Carousel using native scroll containers, CSS scroll snap, and framework components for React, Vue, Svelte, Web Components, or Core.","JKsJwO_i4NTLB4PsNAElbnsE_yn6h7vU75_0mxSXdXE",[3488,3490],{"title":181,"path":182,"stem":183,"description":3489,"icon":184,"children":-1},"Use Blossom Carousel Agent Skills to guide AI coding assistants.",{"title":196,"path":197,"stem":198,"description":3491,"icon":199,"children":-1},"Migrate from Swiper to Blossom Carousel by replacing Swiper modules, wrappers, and configuration with native scrolling and CSS.",1780243958845]