[{"data":1,"prerenderedAt":655},["ShallowReactive",2],{"navigation_docs":3,"-docs-examples-basic-snap":215,"-docs-examples-basic-snap-surround":650},[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":66,"body":217,"description":641,"extension":642,"links":643,"meta":644,"navigation":645,"path":67,"seo":646,"stem":68,"__hash__":649},"docs\u002Fdocs\u002F3.examples\u002F1.basic\u002F2.snap.md",{"type":218,"value":219,"toc":639},"minimark",[220,223,635],[221,222],"example-snapping",{},[224,225,227,522],"tabs",{"sync":226},"example-code-style",[228,229,231],"tabs-item",{"label":230},"CSS",[232,233,234,404],"code-group",{},[235,236,242],"pre",{"className":237,"code":238,"filename":239,"language":240,"meta":241,"style":241},"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: 200px;\n  gap: 1rem;\n  scroll-snap-type: inline mandatory;\n}\n\n.slide {\n  width: 100%;\n  aspect-ratio: 3 \u002F 4;\n  scroll-snap-align: center;\n}\n",".css","css","",[243,244,245,261,278,291,305,318,331,337,344,354,367,386,399],"code",{"__ignoreMap":241},[246,247,250,254,258],"span",{"class":248,"line":249},"line",1,[246,251,253],{"class":252},"sMK4o",".",[246,255,257],{"class":256},"sBMFI","carousel",[246,259,260],{"class":252}," {\n",[246,262,264,268,271,275],{"class":248,"line":263},2,[246,265,267],{"class":266},"sqsOY","  display",[246,269,270],{"class":252},":",[246,272,274],{"class":273},"sTEyZ"," grid",[246,276,277],{"class":252},";\n",[246,279,281,284,286,289],{"class":248,"line":280},3,[246,282,283],{"class":266},"  grid-auto-flow",[246,285,270],{"class":252},[246,287,288],{"class":273}," column",[246,290,277],{"class":252},[246,292,294,297,299,303],{"class":248,"line":293},4,[246,295,296],{"class":266},"  grid-auto-columns",[246,298,270],{"class":252},[246,300,302],{"class":301},"sbssI"," 200px",[246,304,277],{"class":252},[246,306,308,311,313,316],{"class":248,"line":307},5,[246,309,310],{"class":266},"  gap",[246,312,270],{"class":252},[246,314,315],{"class":301}," 1rem",[246,317,277],{"class":252},[246,319,321,324,326,329],{"class":248,"line":320},6,[246,322,323],{"class":266},"  scroll-snap-type",[246,325,270],{"class":252},[246,327,328],{"class":273}," inline mandatory",[246,330,277],{"class":252},[246,332,334],{"class":248,"line":333},7,[246,335,336],{"class":252},"}\n",[246,338,340],{"class":248,"line":339},8,[246,341,343],{"emptyLinePlaceholder":342},true,"\n",[246,345,347,349,352],{"class":248,"line":346},9,[246,348,253],{"class":252},[246,350,351],{"class":256},"slide",[246,353,260],{"class":252},[246,355,357,360,362,365],{"class":248,"line":356},10,[246,358,359],{"class":266},"  width",[246,361,270],{"class":252},[246,363,364],{"class":301}," 100%",[246,366,277],{"class":252},[246,368,370,373,375,378,381,384],{"class":248,"line":369},11,[246,371,372],{"class":266},"  aspect-ratio",[246,374,270],{"class":252},[246,376,377],{"class":301}," 3",[246,379,380],{"class":273}," \u002F ",[246,382,383],{"class":301},"4",[246,385,277],{"class":252},[246,387,389,392,394,397],{"class":248,"line":388},12,[246,390,391],{"class":266},"  scroll-snap-align",[246,393,270],{"class":252},[246,395,396],{"class":273}," center",[246,398,277],{"class":252},[246,400,402],{"class":248,"line":401},13,[246,403,336],{"class":252},[235,405,410],{"className":406,"code":407,"filename":408,"language":409,"meta":241,"style":241},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003CBlossomCarousel class=\"carousel\">\n  \u003Cdiv class=\"slide\">\u003C\u002Fdiv>\n  \u003Cdiv class=\"slide\">\u003C\u002Fdiv>\n  \u003Cdiv class=\"slide\">\u003C\u002Fdiv>\n  ...\n\u003C\u002FBlossomCarousel>\n",".html","html",[243,411,412,439,464,486,508,513],{"__ignoreMap":241},[246,413,414,417,421,425,428,431,434,436],{"class":248,"line":249},[246,415,416],{"class":252},"\u003C",[246,418,420],{"class":419},"swJcz","BlossomCarousel",[246,422,424],{"class":423},"spNyl"," class",[246,426,427],{"class":252},"=",[246,429,430],{"class":252},"\"",[246,432,257],{"class":433},"sfazB",[246,435,430],{"class":252},[246,437,438],{"class":252},">\n",[246,440,441,444,447,449,451,453,455,457,460,462],{"class":248,"line":263},[246,442,443],{"class":252},"  \u003C",[246,445,446],{"class":419},"div",[246,448,424],{"class":423},[246,450,427],{"class":252},[246,452,430],{"class":252},[246,454,351],{"class":433},[246,456,430],{"class":252},[246,458,459],{"class":252},">\u003C\u002F",[246,461,446],{"class":419},[246,463,438],{"class":252},[246,465,466,468,470,472,474,476,478,480,482,484],{"class":248,"line":280},[246,467,443],{"class":252},[246,469,446],{"class":419},[246,471,424],{"class":423},[246,473,427],{"class":252},[246,475,430],{"class":252},[246,477,351],{"class":433},[246,479,430],{"class":252},[246,481,459],{"class":252},[246,483,446],{"class":419},[246,485,438],{"class":252},[246,487,488,490,492,494,496,498,500,502,504,506],{"class":248,"line":293},[246,489,443],{"class":252},[246,491,446],{"class":419},[246,493,424],{"class":423},[246,495,427],{"class":252},[246,497,430],{"class":252},[246,499,351],{"class":433},[246,501,430],{"class":252},[246,503,459],{"class":252},[246,505,446],{"class":419},[246,507,438],{"class":252},[246,509,510],{"class":248,"line":307},[246,511,512],{"class":273},"  ...\n",[246,514,515,518,520],{"class":248,"line":320},[246,516,517],{"class":252},"\u003C\u002F",[246,519,420],{"class":419},[246,521,438],{"class":252},[228,523,525],{"label":524},"Tailwind",[235,526,528],{"className":406,"code":527,"filename":408,"language":409,"meta":241,"style":241},"\u003CBlossomCarousel\n  class=\"grid auto-cols-[200px] snap-x snap-mandatory grid-flow-col gap-4\"\n>\n  \u003Cdiv class=\"w-full aspect-3\u002F4 snap-center\">\u003C\u002Fdiv>\n  \u003Cdiv class=\"w-full aspect-3\u002F4 snap-center\">\u003C\u002Fdiv>\n  \u003Cdiv class=\"w-full aspect-3\u002F4 snap-center\">\u003C\u002Fdiv>\n  ...\n\u003C\u002FBlossomCarousel>\n",[243,529,530,537,552,556,579,601,623,627],{"__ignoreMap":241},[246,531,532,534],{"class":248,"line":249},[246,533,416],{"class":252},[246,535,536],{"class":419},"BlossomCarousel\n",[246,538,539,542,544,546,549],{"class":248,"line":263},[246,540,541],{"class":423},"  class",[246,543,427],{"class":252},[246,545,430],{"class":252},[246,547,548],{"class":433},"grid auto-cols-[200px] snap-x snap-mandatory grid-flow-col gap-4",[246,550,551],{"class":252},"\"\n",[246,553,554],{"class":248,"line":280},[246,555,438],{"class":252},[246,557,558,560,562,564,566,568,571,573,575,577],{"class":248,"line":293},[246,559,443],{"class":252},[246,561,446],{"class":419},[246,563,424],{"class":423},[246,565,427],{"class":252},[246,567,430],{"class":252},[246,569,570],{"class":433},"w-full aspect-3\u002F4 snap-center",[246,572,430],{"class":252},[246,574,459],{"class":252},[246,576,446],{"class":419},[246,578,438],{"class":252},[246,580,581,583,585,587,589,591,593,595,597,599],{"class":248,"line":307},[246,582,443],{"class":252},[246,584,446],{"class":419},[246,586,424],{"class":423},[246,588,427],{"class":252},[246,590,430],{"class":252},[246,592,570],{"class":433},[246,594,430],{"class":252},[246,596,459],{"class":252},[246,598,446],{"class":419},[246,600,438],{"class":252},[246,602,603,605,607,609,611,613,615,617,619,621],{"class":248,"line":320},[246,604,443],{"class":252},[246,606,446],{"class":419},[246,608,424],{"class":423},[246,610,427],{"class":252},[246,612,430],{"class":252},[246,614,570],{"class":433},[246,616,430],{"class":252},[246,618,459],{"class":252},[246,620,446],{"class":419},[246,622,438],{"class":252},[246,624,625],{"class":248,"line":333},[246,626,512],{"class":273},[246,628,629,631,633],{"class":248,"line":339},[246,630,517],{"class":252},[246,632,420],{"class":419},[246,634,438],{"class":252},[636,637,638],"style",{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sqsOY, html code.shiki .sqsOY{--shiki-light:#8796B0;--shiki-default:#B2CCD6;--shiki-dark:#B2CCD6}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}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 .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 .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}",{"title":241,"searchDepth":263,"depth":263,"links":640},[],"Make a snapping carousel with Blossom Carousel.","md",null,{},{"icon":69},{"title":647,"description":648},"CSS scroll snap carousel layout with Blossom Carousel","Make a snapping carousel using CSS scroll-snap with Blossom Carousel.","HprdxICUzbJ_I7N3Ir0_vDdJ1H2DpU3vSxrUDrSS6tM",[651,653],{"title":61,"path":62,"stem":63,"description":652,"icon":64,"children":-1},"Make a scrollable and draggable carousel with Blossom Carousel.",{"title":71,"path":72,"stem":73,"description":654,"icon":74,"children":-1},"Create complex layouts and snap to any cell in the grid using CSS grid.",1780251484824]