[{"data":1,"prerenderedAt":1581},["ShallowReactive",2],{"navigation_docs":3,"-docs-examples-experimental-css-controls":215,"-docs-examples-experimental-css-controls-surround":1551,"$f1RHjAYU3t-bKHI73Wg1dAcROAL-oM2UG1AQR-ARqq18":1556},[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":141,"body":217,"description":1542,"extension":1543,"links":1544,"meta":1545,"navigation":1546,"path":142,"seo":1547,"stem":143,"__hash__":1550},"docs\u002Fdocs\u002F3.examples\u002F3.experimental\u002F1.css-controls.md",{"type":218,"value":219,"toc":1540},"minimark",[220,234,237,1525,1536],[221,222,223],"supports-scroll-marker-support",{},[224,225,226,227],"caution",{},"css ::scroll-marker is not yet supported in this browser. Check browser compatibility at ",[228,229,233],"a",{"href":230,"rel":231},"https:\u002F\u002Fcaniuse.com\u002F#feat=css-container-queries",[232],"nofollow","caniuse.com",[235,236],"example-css-controls",{},[238,239,241,1396],"tabs",{"sync":240},"example-code-style",[242,243,245],"tabs-item",{"label":244},"CSS",[246,247,248,1253],"code-group",{},[249,250,256],"pre",{"className":251,"code":252,"filename":253,"language":254,"meta":255,"style":255},"language-css shiki shiki-themes material-theme-lighter material-theme material-theme-palenight",".container {\n  anchor-name: --carousel;\n}\n\n.carousel {\n  display: grid;\n  grid-auto-flow: column;\n  grid-auto-columns: 200px;\n  gap: 1rem;\n  scroll-marker-group: after;\n\n  &::scroll-button(*) {\n    position: fixed;\n    position-anchor: --carousel;\n    position-visibility: always;\n\n    border: none;\n    font-size: 1rem;\n    background: white;\n    color: cyan;\n    aspect-ratio: 1;\n    border-radius: 50%;\n    cursor: pointer;\n    box-shadow: 0 1px 8px 0 rgb(0 0 0 \u002F 0.2);\n    transition: 100ms scale ease;\n    z-index: 1;\n  }\n\n  &::scroll-button(*):hover {\n    scale: 1.1;\n  }\n\n  &::scroll-button(*):active {\n    scale: 0.98;\n  }\n\n  &::scroll-button(left) {\n    position-area: inline-start center;\n    left: calc(anchor(left) + 2.5rem);\n    padding-right: 0.55rem;\n    content: \"◄\" \u002F \"Previous\";\n  }\n\n  &::scroll-button(right) {\n    position-area: inline-end center;\n    left: calc(anchor(right) - 2.5rem);\n    padding-left: 0.55rem;\n    content: \"►\" \u002F \"Next\";\n  }\n\n  &::scroll-marker-group {\n    position: fixed;\n    position-anchor: --carousel;\n    position-area: block-end;\n    top: calc(anchor(bottom) - 3rem);\n    position-visibility: always;\n    margin: 10px;\n\n    display: grid;\n    grid-auto-columns: 1rem;\n    grid-auto-flow: column;\n    gap: 0.5rem;\n  }\n\n  > .slide {\n    width: 100%;\n    aspect-ratio: 3 \u002F 4;\n\n    &::scroll-marker {\n      content: \"\";\n      aspect-ratio: 1;\n      border-radius: 50%;\n      background: cyan;\n      opacity: 0.3;\n    }\n\n    &::scroll-marker:hover {\n      opacity: 0.8;\n    }\n\n    &::scroll-marker:target-current {\n      opacity: 1;\n    }\n  }\n}\n",".css","css","",[257,258,259,275,291,297,304,314,328,341,355,368,381,386,397,410,422,435,440,453,465,478,491,504,517,530,572,588,600,606,611,631,644,649,654,670,682,687,692,701,714,742,755,784,789,794,802,814,839,851,876,881,886,897,908,919,931,957,968,981,986,998,1010,1022,1035,1040,1045,1059,1072,1089,1094,1105,1116,1128,1140,1152,1165,1171,1176,1191,1203,1208,1213,1227,1238,1243,1248],"code",{"__ignoreMap":255},[260,261,264,268,272],"span",{"class":262,"line":263},"line",1,[260,265,267],{"class":266},"sMK4o",".",[260,269,271],{"class":270},"sBMFI","container",[260,273,274],{"class":266}," {\n",[260,276,278,282,285,288],{"class":262,"line":277},2,[260,279,281],{"class":280},"sTEyZ","  anchor-name",[260,283,284],{"class":266},":",[260,286,287],{"class":280}," --carousel",[260,289,290],{"class":266},";\n",[260,292,294],{"class":262,"line":293},3,[260,295,296],{"class":266},"}\n",[260,298,300],{"class":262,"line":299},4,[260,301,303],{"emptyLinePlaceholder":302},true,"\n",[260,305,307,309,312],{"class":262,"line":306},5,[260,308,267],{"class":266},[260,310,311],{"class":270},"carousel",[260,313,274],{"class":266},[260,315,317,321,323,326],{"class":262,"line":316},6,[260,318,320],{"class":319},"sqsOY","  display",[260,322,284],{"class":266},[260,324,325],{"class":280}," grid",[260,327,290],{"class":266},[260,329,331,334,336,339],{"class":262,"line":330},7,[260,332,333],{"class":319},"  grid-auto-flow",[260,335,284],{"class":266},[260,337,338],{"class":280}," column",[260,340,290],{"class":266},[260,342,344,347,349,353],{"class":262,"line":343},8,[260,345,346],{"class":319},"  grid-auto-columns",[260,348,284],{"class":266},[260,350,352],{"class":351},"sbssI"," 200px",[260,354,290],{"class":266},[260,356,358,361,363,366],{"class":262,"line":357},9,[260,359,360],{"class":319},"  gap",[260,362,284],{"class":266},[260,364,365],{"class":351}," 1rem",[260,367,290],{"class":266},[260,369,371,374,376,379],{"class":262,"line":370},10,[260,372,373],{"class":280},"  scroll-marker-group",[260,375,284],{"class":266},[260,377,378],{"class":280}," after",[260,380,290],{"class":266},[260,382,384],{"class":262,"line":383},11,[260,385,303],{"emptyLinePlaceholder":302},[260,387,389,392,394],{"class":262,"line":388},12,[260,390,391],{"class":280},"  &",[260,393,284],{"class":266},[260,395,396],{"class":280},":scroll-button(*) {\n",[260,398,400,403,405,408],{"class":262,"line":399},13,[260,401,402],{"class":319},"    position",[260,404,284],{"class":266},[260,406,407],{"class":280}," fixed",[260,409,290],{"class":266},[260,411,413,416,418,420],{"class":262,"line":412},14,[260,414,415],{"class":280},"    position-anchor",[260,417,284],{"class":266},[260,419,287],{"class":280},[260,421,290],{"class":266},[260,423,425,428,430,433],{"class":262,"line":424},15,[260,426,427],{"class":280},"    position-visibility",[260,429,284],{"class":266},[260,431,432],{"class":280}," always",[260,434,290],{"class":266},[260,436,438],{"class":262,"line":437},16,[260,439,303],{"emptyLinePlaceholder":302},[260,441,443,446,448,451],{"class":262,"line":442},17,[260,444,445],{"class":319},"    border",[260,447,284],{"class":266},[260,449,450],{"class":280}," none",[260,452,290],{"class":266},[260,454,456,459,461,463],{"class":262,"line":455},18,[260,457,458],{"class":319},"    font-size",[260,460,284],{"class":266},[260,462,365],{"class":351},[260,464,290],{"class":266},[260,466,468,471,473,476],{"class":262,"line":467},19,[260,469,470],{"class":319},"    background",[260,472,284],{"class":266},[260,474,475],{"class":280}," white",[260,477,290],{"class":266},[260,479,481,484,486,489],{"class":262,"line":480},20,[260,482,483],{"class":319},"    color",[260,485,284],{"class":266},[260,487,488],{"class":280}," cyan",[260,490,290],{"class":266},[260,492,494,497,499,502],{"class":262,"line":493},21,[260,495,496],{"class":319},"    aspect-ratio",[260,498,284],{"class":266},[260,500,501],{"class":351}," 1",[260,503,290],{"class":266},[260,505,507,510,512,515],{"class":262,"line":506},22,[260,508,509],{"class":319},"    border-radius",[260,511,284],{"class":266},[260,513,514],{"class":351}," 50%",[260,516,290],{"class":266},[260,518,520,523,525,528],{"class":262,"line":519},23,[260,521,522],{"class":319},"    cursor",[260,524,284],{"class":266},[260,526,527],{"class":280}," pointer",[260,529,290],{"class":266},[260,531,533,536,538,541,544,547,549,553,556,559,561,563,566,569],{"class":262,"line":532},24,[260,534,535],{"class":319},"    box-shadow",[260,537,284],{"class":266},[260,539,540],{"class":351}," 0",[260,542,543],{"class":351}," 1px",[260,545,546],{"class":351}," 8px",[260,548,540],{"class":351},[260,550,552],{"class":551},"s2Zo4"," rgb",[260,554,555],{"class":266},"(",[260,557,558],{"class":351},"0",[260,560,540],{"class":351},[260,562,540],{"class":351},[260,564,565],{"class":280}," \u002F ",[260,567,568],{"class":351},"0.2",[260,570,571],{"class":266},");\n",[260,573,575,578,580,583,586],{"class":262,"line":574},25,[260,576,577],{"class":319},"    transition",[260,579,284],{"class":266},[260,581,582],{"class":351}," 100ms",[260,584,585],{"class":280}," scale ease",[260,587,290],{"class":266},[260,589,591,594,596,598],{"class":262,"line":590},26,[260,592,593],{"class":319},"    z-index",[260,595,284],{"class":266},[260,597,501],{"class":351},[260,599,290],{"class":266},[260,601,603],{"class":262,"line":602},27,[260,604,605],{"class":266},"  }\n",[260,607,609],{"class":262,"line":608},28,[260,610,303],{"emptyLinePlaceholder":302},[260,612,614,617,620,623,625,629],{"class":262,"line":613},29,[260,615,616],{"class":280},"  &::scroll-button(",[260,618,619],{"class":270},"*",[260,621,622],{"class":280},")",[260,624,284],{"class":266},[260,626,628],{"class":627},"spNyl","hover",[260,630,274],{"class":266},[260,632,634,637,639,642],{"class":262,"line":633},30,[260,635,636],{"class":319},"    scale",[260,638,284],{"class":266},[260,640,641],{"class":351}," 1.1",[260,643,290],{"class":266},[260,645,647],{"class":262,"line":646},31,[260,648,605],{"class":266},[260,650,652],{"class":262,"line":651},32,[260,653,303],{"emptyLinePlaceholder":302},[260,655,657,659,661,663,665,668],{"class":262,"line":656},33,[260,658,616],{"class":280},[260,660,619],{"class":270},[260,662,622],{"class":280},[260,664,284],{"class":266},[260,666,667],{"class":627},"active",[260,669,274],{"class":266},[260,671,673,675,677,680],{"class":262,"line":672},34,[260,674,636],{"class":319},[260,676,284],{"class":266},[260,678,679],{"class":351}," 0.98",[260,681,290],{"class":266},[260,683,685],{"class":262,"line":684},35,[260,686,605],{"class":266},[260,688,690],{"class":262,"line":689},36,[260,691,303],{"emptyLinePlaceholder":302},[260,693,695,698],{"class":262,"line":694},37,[260,696,697],{"class":280},"  &::scroll-button(left) ",[260,699,700],{"class":266},"{\n",[260,702,704,707,709,712],{"class":262,"line":703},38,[260,705,706],{"class":280},"    position-area",[260,708,284],{"class":266},[260,710,711],{"class":280}," inline-start center",[260,713,290],{"class":266},[260,715,717,720,722,725,727,730,732,735,738,740],{"class":262,"line":716},39,[260,718,719],{"class":319},"    left",[260,721,284],{"class":266},[260,723,724],{"class":551}," calc",[260,726,555],{"class":266},[260,728,729],{"class":280},"anchor(left",[260,731,622],{"class":266},[260,733,734],{"class":280}," + ",[260,736,737],{"class":351},"2.5rem",[260,739,622],{"class":280},[260,741,290],{"class":266},[260,743,745,748,750,753],{"class":262,"line":744},40,[260,746,747],{"class":319},"    padding-right",[260,749,284],{"class":266},[260,751,752],{"class":351}," 0.55rem",[260,754,290],{"class":266},[260,756,758,761,763,766,770,773,775,777,780,782],{"class":262,"line":757},41,[260,759,760],{"class":319},"    content",[260,762,284],{"class":266},[260,764,765],{"class":266}," \"",[260,767,769],{"class":768},"sfazB","◄",[260,771,772],{"class":266},"\"",[260,774,565],{"class":280},[260,776,772],{"class":266},[260,778,779],{"class":768},"Previous",[260,781,772],{"class":266},[260,783,290],{"class":266},[260,785,787],{"class":262,"line":786},42,[260,788,605],{"class":266},[260,790,792],{"class":262,"line":791},43,[260,793,303],{"emptyLinePlaceholder":302},[260,795,797,800],{"class":262,"line":796},44,[260,798,799],{"class":280},"  &::scroll-button(right) ",[260,801,700],{"class":266},[260,803,805,807,809,812],{"class":262,"line":804},45,[260,806,706],{"class":280},[260,808,284],{"class":266},[260,810,811],{"class":280}," inline-end center",[260,813,290],{"class":266},[260,815,817,819,821,823,825,828,830,833,835,837],{"class":262,"line":816},46,[260,818,719],{"class":319},[260,820,284],{"class":266},[260,822,724],{"class":551},[260,824,555],{"class":266},[260,826,827],{"class":280},"anchor(right",[260,829,622],{"class":266},[260,831,832],{"class":280}," - ",[260,834,737],{"class":351},[260,836,622],{"class":280},[260,838,290],{"class":266},[260,840,842,845,847,849],{"class":262,"line":841},47,[260,843,844],{"class":319},"    padding-left",[260,846,284],{"class":266},[260,848,752],{"class":351},[260,850,290],{"class":266},[260,852,854,856,858,860,863,865,867,869,872,874],{"class":262,"line":853},48,[260,855,760],{"class":319},[260,857,284],{"class":266},[260,859,765],{"class":266},[260,861,862],{"class":768},"►",[260,864,772],{"class":266},[260,866,565],{"class":280},[260,868,772],{"class":266},[260,870,871],{"class":768},"Next",[260,873,772],{"class":266},[260,875,290],{"class":266},[260,877,879],{"class":262,"line":878},49,[260,880,605],{"class":266},[260,882,884],{"class":262,"line":883},50,[260,885,303],{"emptyLinePlaceholder":302},[260,887,889,892,895],{"class":262,"line":888},51,[260,890,891],{"class":280},"  &::",[260,893,894],{"class":270},"scroll-marker-group",[260,896,274],{"class":266},[260,898,900,902,904,906],{"class":262,"line":899},52,[260,901,402],{"class":319},[260,903,284],{"class":266},[260,905,407],{"class":280},[260,907,290],{"class":266},[260,909,911,913,915,917],{"class":262,"line":910},53,[260,912,415],{"class":280},[260,914,284],{"class":266},[260,916,287],{"class":280},[260,918,290],{"class":266},[260,920,922,924,926,929],{"class":262,"line":921},54,[260,923,706],{"class":280},[260,925,284],{"class":266},[260,927,928],{"class":280}," block-end",[260,930,290],{"class":266},[260,932,934,937,939,941,943,946,948,950,953,955],{"class":262,"line":933},55,[260,935,936],{"class":319},"    top",[260,938,284],{"class":266},[260,940,724],{"class":551},[260,942,555],{"class":266},[260,944,945],{"class":280},"anchor(bottom",[260,947,622],{"class":266},[260,949,832],{"class":280},[260,951,952],{"class":351},"3rem",[260,954,622],{"class":280},[260,956,290],{"class":266},[260,958,960,962,964,966],{"class":262,"line":959},56,[260,961,427],{"class":280},[260,963,284],{"class":266},[260,965,432],{"class":280},[260,967,290],{"class":266},[260,969,971,974,976,979],{"class":262,"line":970},57,[260,972,973],{"class":319},"    margin",[260,975,284],{"class":266},[260,977,978],{"class":351}," 10px",[260,980,290],{"class":266},[260,982,984],{"class":262,"line":983},58,[260,985,303],{"emptyLinePlaceholder":302},[260,987,989,992,994,996],{"class":262,"line":988},59,[260,990,991],{"class":319},"    display",[260,993,284],{"class":266},[260,995,325],{"class":280},[260,997,290],{"class":266},[260,999,1001,1004,1006,1008],{"class":262,"line":1000},60,[260,1002,1003],{"class":319},"    grid-auto-columns",[260,1005,284],{"class":266},[260,1007,365],{"class":351},[260,1009,290],{"class":266},[260,1011,1013,1016,1018,1020],{"class":262,"line":1012},61,[260,1014,1015],{"class":319},"    grid-auto-flow",[260,1017,284],{"class":266},[260,1019,338],{"class":280},[260,1021,290],{"class":266},[260,1023,1025,1028,1030,1033],{"class":262,"line":1024},62,[260,1026,1027],{"class":319},"    gap",[260,1029,284],{"class":266},[260,1031,1032],{"class":351}," 0.5rem",[260,1034,290],{"class":266},[260,1036,1038],{"class":262,"line":1037},63,[260,1039,605],{"class":266},[260,1041,1043],{"class":262,"line":1042},64,[260,1044,303],{"emptyLinePlaceholder":302},[260,1046,1048,1051,1054,1057],{"class":262,"line":1047},65,[260,1049,1050],{"class":266},"  >",[260,1052,1053],{"class":266}," .",[260,1055,1056],{"class":270},"slide",[260,1058,274],{"class":266},[260,1060,1062,1065,1067,1070],{"class":262,"line":1061},66,[260,1063,1064],{"class":319},"    width",[260,1066,284],{"class":266},[260,1068,1069],{"class":351}," 100%",[260,1071,290],{"class":266},[260,1073,1075,1077,1079,1082,1084,1087],{"class":262,"line":1074},67,[260,1076,496],{"class":319},[260,1078,284],{"class":266},[260,1080,1081],{"class":351}," 3",[260,1083,565],{"class":280},[260,1085,1086],{"class":351},"4",[260,1088,290],{"class":266},[260,1090,1092],{"class":262,"line":1091},68,[260,1093,303],{"emptyLinePlaceholder":302},[260,1095,1097,1100,1102],{"class":262,"line":1096},69,[260,1098,1099],{"class":280},"    &",[260,1101,284],{"class":266},[260,1103,1104],{"class":280},":scroll-marker {\n",[260,1106,1108,1111,1114],{"class":262,"line":1107},70,[260,1109,1110],{"class":280},"      content: ",[260,1112,1113],{"class":266},"\"\"",[260,1115,290],{"class":266},[260,1117,1119,1122,1124,1126],{"class":262,"line":1118},71,[260,1120,1121],{"class":319},"      aspect-ratio",[260,1123,284],{"class":266},[260,1125,501],{"class":351},[260,1127,290],{"class":266},[260,1129,1131,1134,1136,1138],{"class":262,"line":1130},72,[260,1132,1133],{"class":319},"      border-radius",[260,1135,284],{"class":266},[260,1137,514],{"class":351},[260,1139,290],{"class":266},[260,1141,1143,1146,1148,1150],{"class":262,"line":1142},73,[260,1144,1145],{"class":319},"      background",[260,1147,284],{"class":266},[260,1149,488],{"class":280},[260,1151,290],{"class":266},[260,1153,1155,1158,1160,1163],{"class":262,"line":1154},74,[260,1156,1157],{"class":319},"      opacity",[260,1159,284],{"class":266},[260,1161,1162],{"class":351}," 0.3",[260,1164,290],{"class":266},[260,1166,1168],{"class":262,"line":1167},75,[260,1169,1170],{"class":266},"    }\n",[260,1172,1174],{"class":262,"line":1173},76,[260,1175,303],{"emptyLinePlaceholder":302},[260,1177,1179,1182,1185,1187,1189],{"class":262,"line":1178},77,[260,1180,1181],{"class":280},"    &::",[260,1183,1184],{"class":270},"scroll-marker",[260,1186,284],{"class":266},[260,1188,628],{"class":627},[260,1190,274],{"class":266},[260,1192,1194,1196,1198,1201],{"class":262,"line":1193},78,[260,1195,1157],{"class":319},[260,1197,284],{"class":266},[260,1199,1200],{"class":351}," 0.8",[260,1202,290],{"class":266},[260,1204,1206],{"class":262,"line":1205},79,[260,1207,1170],{"class":266},[260,1209,1211],{"class":262,"line":1210},80,[260,1212,303],{"emptyLinePlaceholder":302},[260,1214,1216,1218,1220,1222,1225],{"class":262,"line":1215},81,[260,1217,1181],{"class":280},[260,1219,1184],{"class":270},[260,1221,284],{"class":280},[260,1223,1224],{"class":270},"target-current",[260,1226,274],{"class":266},[260,1228,1230,1232,1234,1236],{"class":262,"line":1229},82,[260,1231,1157],{"class":319},[260,1233,284],{"class":266},[260,1235,501],{"class":351},[260,1237,290],{"class":266},[260,1239,1241],{"class":262,"line":1240},83,[260,1242,1170],{"class":266},[260,1244,1246],{"class":262,"line":1245},84,[260,1247,605],{"class":280},[260,1249,1251],{"class":262,"line":1250},85,[260,1252,296],{"class":280},[249,1254,1259],{"className":1255,"code":1256,"filename":1257,"language":1258,"meta":255,"style":255},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cdiv class=\"container\">\n  \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\u003C\u002Fdiv>\n",".html","html",[257,1260,1261,1285,1305,1329,1351,1373,1378,1387],{"__ignoreMap":255},[260,1262,1263,1266,1270,1273,1276,1278,1280,1282],{"class":262,"line":263},[260,1264,1265],{"class":266},"\u003C",[260,1267,1269],{"class":1268},"swJcz","div",[260,1271,1272],{"class":627}," class",[260,1274,1275],{"class":266},"=",[260,1277,772],{"class":266},[260,1279,271],{"class":768},[260,1281,772],{"class":266},[260,1283,1284],{"class":266},">\n",[260,1286,1287,1290,1293,1295,1297,1299,1301,1303],{"class":262,"line":277},[260,1288,1289],{"class":266},"  \u003C",[260,1291,1292],{"class":1268},"BlossomCarousel",[260,1294,1272],{"class":627},[260,1296,1275],{"class":266},[260,1298,772],{"class":266},[260,1300,311],{"class":768},[260,1302,772],{"class":266},[260,1304,1284],{"class":266},[260,1306,1307,1310,1312,1314,1316,1318,1320,1322,1325,1327],{"class":262,"line":293},[260,1308,1309],{"class":266},"    \u003C",[260,1311,1269],{"class":1268},[260,1313,1272],{"class":627},[260,1315,1275],{"class":266},[260,1317,772],{"class":266},[260,1319,1056],{"class":768},[260,1321,772],{"class":266},[260,1323,1324],{"class":266},">\u003C\u002F",[260,1326,1269],{"class":1268},[260,1328,1284],{"class":266},[260,1330,1331,1333,1335,1337,1339,1341,1343,1345,1347,1349],{"class":262,"line":299},[260,1332,1309],{"class":266},[260,1334,1269],{"class":1268},[260,1336,1272],{"class":627},[260,1338,1275],{"class":266},[260,1340,772],{"class":266},[260,1342,1056],{"class":768},[260,1344,772],{"class":266},[260,1346,1324],{"class":266},[260,1348,1269],{"class":1268},[260,1350,1284],{"class":266},[260,1352,1353,1355,1357,1359,1361,1363,1365,1367,1369,1371],{"class":262,"line":306},[260,1354,1309],{"class":266},[260,1356,1269],{"class":1268},[260,1358,1272],{"class":627},[260,1360,1275],{"class":266},[260,1362,772],{"class":266},[260,1364,1056],{"class":768},[260,1366,772],{"class":266},[260,1368,1324],{"class":266},[260,1370,1269],{"class":1268},[260,1372,1284],{"class":266},[260,1374,1375],{"class":262,"line":316},[260,1376,1377],{"class":280},"    ...\n",[260,1379,1380,1383,1385],{"class":262,"line":330},[260,1381,1382],{"class":266},"  \u003C\u002F",[260,1384,1292],{"class":1268},[260,1386,1284],{"class":266},[260,1388,1389,1392,1394],{"class":262,"line":343},[260,1390,1391],{"class":266},"\u003C\u002F",[260,1393,1269],{"class":1268},[260,1395,1284],{"class":266},[242,1397,1399],{"label":1398},"Tailwind",[249,1400,1401],{"className":1255,"code":1256,"filename":1257,"language":1258,"meta":255,"style":255},[257,1402,1403,1421,1439,1461,1483,1505,1509,1517],{"__ignoreMap":255},[260,1404,1405,1407,1409,1411,1413,1415,1417,1419],{"class":262,"line":263},[260,1406,1265],{"class":266},[260,1408,1269],{"class":1268},[260,1410,1272],{"class":627},[260,1412,1275],{"class":266},[260,1414,772],{"class":266},[260,1416,271],{"class":768},[260,1418,772],{"class":266},[260,1420,1284],{"class":266},[260,1422,1423,1425,1427,1429,1431,1433,1435,1437],{"class":262,"line":277},[260,1424,1289],{"class":266},[260,1426,1292],{"class":1268},[260,1428,1272],{"class":627},[260,1430,1275],{"class":266},[260,1432,772],{"class":266},[260,1434,311],{"class":768},[260,1436,772],{"class":266},[260,1438,1284],{"class":266},[260,1440,1441,1443,1445,1447,1449,1451,1453,1455,1457,1459],{"class":262,"line":293},[260,1442,1309],{"class":266},[260,1444,1269],{"class":1268},[260,1446,1272],{"class":627},[260,1448,1275],{"class":266},[260,1450,772],{"class":266},[260,1452,1056],{"class":768},[260,1454,772],{"class":266},[260,1456,1324],{"class":266},[260,1458,1269],{"class":1268},[260,1460,1284],{"class":266},[260,1462,1463,1465,1467,1469,1471,1473,1475,1477,1479,1481],{"class":262,"line":299},[260,1464,1309],{"class":266},[260,1466,1269],{"class":1268},[260,1468,1272],{"class":627},[260,1470,1275],{"class":266},[260,1472,772],{"class":266},[260,1474,1056],{"class":768},[260,1476,772],{"class":266},[260,1478,1324],{"class":266},[260,1480,1269],{"class":1268},[260,1482,1284],{"class":266},[260,1484,1485,1487,1489,1491,1493,1495,1497,1499,1501,1503],{"class":262,"line":306},[260,1486,1309],{"class":266},[260,1488,1269],{"class":1268},[260,1490,1272],{"class":627},[260,1492,1275],{"class":266},[260,1494,772],{"class":266},[260,1496,1056],{"class":768},[260,1498,772],{"class":266},[260,1500,1324],{"class":266},[260,1502,1269],{"class":1268},[260,1504,1284],{"class":266},[260,1506,1507],{"class":262,"line":316},[260,1508,1377],{"class":280},[260,1510,1511,1513,1515],{"class":262,"line":330},[260,1512,1382],{"class":266},[260,1514,1292],{"class":1268},[260,1516,1284],{"class":266},[260,1518,1519,1521,1523],{"class":262,"line":343},[260,1520,1391],{"class":266},[260,1522,1269],{"class":1268},[260,1524,1284],{"class":266},[1526,1527,1530,1531,267],"note",{"color":1528,"icon":1529},"primary","i-lucide-lightbulb","Learn more about ",[228,1532,1535],{"href":1533,"rel":1534},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FCSS\u002FGuides\u002FOverflow\u002FCarousels",[232],"CSS Carousels",[1537,1538,1539],"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 .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}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 .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}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}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}",{"title":255,"searchDepth":277,"depth":277,"links":1541},[],"Use ::scroll-button and ::scroll-marker pseudo-elements to create interactive controls with CSS.","md",null,{},{"icon":144},{"title":1548,"description":1549},"CSS controls carousel example with Blossom Carousel","Use ::scroll-button and ::scroll-marker pseudo-elements to create interactive carousel controls with CSS and Blossom Carousel.","fc1XXLeyWnRPwOWuFzCjIJJZxemq77VeTdOykeZAALs",[1552,1554],{"title":131,"path":132,"stem":133,"description":1553,"icon":134,"children":-1},"Build a 3d flipbook-style carousel with scroll-driven animations.",{"title":146,"path":147,"stem":148,"description":1555,"icon":149,"children":-1},"Use CSS scroll-state container queries to style slides based on their snap state.",{"baselineBadge":1557,"browserBadges":1561,"sources":1576,"updatedAt":1580},{"label":1558,"value":1559,"title":1560},"Baseline","Limited","::scroll-marker is not Baseline yet in the WebDX web-features data.",[1562,1566,1569,1573],{"browser":1563,"version":1564,"title":1565},"Chrome","135+","Chrome supports ::scroll-marker from version 135.",{"browser":1567,"version":1564,"title":1568},"Edge","Edge supports ::scroll-marker from version 135.",{"browser":1570,"version":1571,"title":1572},"Firefox","No","Firefox does not support ::scroll-marker.",{"browser":1574,"version":1571,"title":1575},"Safari","Safari does not support ::scroll-marker.",{"bcd":1577,"mdn":1578,"webFeatures":1579},"https:\u002F\u002Fgithub.com\u002Fmdn\u002Fbrowser-compat-data\u002Fblob\u002Fmain\u002Fcss\u002Fselectors\u002Fscroll-marker.json","https:\u002F\u002Fdeveloper.mozilla.org\u002Fdocs\u002FWeb\u002FCSS\u002FReference\u002FSelectors\u002F::scroll-marker","https:\u002F\u002Fgithub.com\u002Fweb-platform-dx\u002Fweb-features\u002Fblob\u002Fmain\u002Ffeatures\u002Fscroll-markers.yml","2026-05-31T14:53:13.032Z",1780256956072]