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