[{"data":1,"prerenderedAt":1504},["ShallowReactive",2],{"navigation_docs":3,"-docs-examples-basic-dots":215,"-docs-examples-basic-dots-surround":1499},[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":91,"body":217,"description":1490,"extension":1491,"links":1492,"meta":1493,"navigation":1494,"path":92,"seo":1495,"stem":93,"__hash__":1498},"docs\u002Fdocs\u002F3.examples\u002F1.basic\u002F7.dots.md",{"type":218,"value":219,"toc":1488},"minimark",[220,223,1484],[221,222],"example-dots",{},[224,225,226,1041,1271],"code-group",{},[227,228,234],"pre",{"className":229,"code":230,"filename":231,"language":232,"meta":233,"style":233},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","const slides = document.querySelectorAll(\".slide\");\nconst dots = document.querySelectorAll(\".dot\");\nlet activeIndex = 0;\nconst intersectionRatioBySlide = new WeakMap\u003CElement, number>();\n\nconst observer = new IntersectionObserver(\n  (entries) => {\n    for (const entry of entries) {\n      intersectionRatioBySlide.set(\n        entry.target,\n        entry.isIntersecting ? entry.intersectionRatio : 0,\n      );\n    }\n\n    const mostVisible = Array.from(slides).reduce(\n      (current, slide, index) => {\n        const ratio = intersectionRatioBySlide.get(slide) ?? 0;\n        return ratio > current.ratio ? { index, ratio } : current;\n      },\n      { index: activeIndex, ratio: 0 },\n    );\n\n    if (mostVisible.ratio > 0) {\n      activeIndex = mostVisible.index;\n      dots.forEach((dot, i) => dot.classList.toggle(\"active\", i === activeIndex));\n    }\n  },\n  { threshold: [0, 0.5, 1] },\n);\n\nslides.forEach((slide) => observer.observe(slide));\n\ndots.forEach((dot, index) => {\n  dot.addEventListener(\"click\", () => {\n    slides[index]?.scrollIntoView({\n      behavior: \"smooth\",\n      block: \"nearest\",\n      inline: \"center\",\n    });\n  });\n});\n",".ts","ts","",[235,236,237,282,311,328,365,372,390,408,436,449,463,490,498,504,509,543,568,601,640,646,671,679,684,707,724,787,792,798,831,838,843,875,880,906,935,959,977,994,1011,1021,1031],"code",{"__ignoreMap":233},[238,239,242,246,250,254,257,260,264,267,270,274,276,279],"span",{"class":240,"line":241},"line",1,[238,243,245],{"class":244},"spNyl","const",[238,247,249],{"class":248},"sTEyZ"," slides ",[238,251,253],{"class":252},"sMK4o","=",[238,255,256],{"class":248}," document",[238,258,259],{"class":252},".",[238,261,263],{"class":262},"s2Zo4","querySelectorAll",[238,265,266],{"class":248},"(",[238,268,269],{"class":252},"\"",[238,271,273],{"class":272},"sfazB",".slide",[238,275,269],{"class":252},[238,277,278],{"class":248},")",[238,280,281],{"class":252},";\n",[238,283,285,287,290,292,294,296,298,300,302,305,307,309],{"class":240,"line":284},2,[238,286,245],{"class":244},[238,288,289],{"class":248}," dots ",[238,291,253],{"class":252},[238,293,256],{"class":248},[238,295,259],{"class":252},[238,297,263],{"class":262},[238,299,266],{"class":248},[238,301,269],{"class":252},[238,303,304],{"class":272},".dot",[238,306,269],{"class":252},[238,308,278],{"class":248},[238,310,281],{"class":252},[238,312,314,317,320,322,326],{"class":240,"line":313},3,[238,315,316],{"class":244},"let",[238,318,319],{"class":248}," activeIndex ",[238,321,253],{"class":252},[238,323,325],{"class":324},"sbssI"," 0",[238,327,281],{"class":252},[238,329,331,333,336,338,341,344,347,351,354,357,360,363],{"class":240,"line":330},4,[238,332,245],{"class":244},[238,334,335],{"class":248}," intersectionRatioBySlide ",[238,337,253],{"class":252},[238,339,340],{"class":252}," new",[238,342,343],{"class":262}," WeakMap",[238,345,346],{"class":252},"\u003C",[238,348,350],{"class":349},"sBMFI","Element",[238,352,353],{"class":252},",",[238,355,356],{"class":349}," number",[238,358,359],{"class":252},">",[238,361,362],{"class":248},"()",[238,364,281],{"class":252},[238,366,368],{"class":240,"line":367},5,[238,369,371],{"emptyLinePlaceholder":370},true,"\n",[238,373,375,377,380,382,384,387],{"class":240,"line":374},6,[238,376,245],{"class":244},[238,378,379],{"class":248}," observer ",[238,381,253],{"class":252},[238,383,340],{"class":252},[238,385,386],{"class":262}," IntersectionObserver",[238,388,389],{"class":248},"(\n",[238,391,393,396,400,402,405],{"class":240,"line":392},7,[238,394,395],{"class":252},"  (",[238,397,399],{"class":398},"sHdIc","entries",[238,401,278],{"class":252},[238,403,404],{"class":244}," =>",[238,406,407],{"class":252}," {\n",[238,409,411,415,419,421,424,427,430,433],{"class":240,"line":410},8,[238,412,414],{"class":413},"s7zQu","    for",[238,416,418],{"class":417},"swJcz"," (",[238,420,245],{"class":244},[238,422,423],{"class":248}," entry",[238,425,426],{"class":252}," of",[238,428,429],{"class":248}," entries",[238,431,432],{"class":417},") ",[238,434,435],{"class":252},"{\n",[238,437,439,442,444,447],{"class":240,"line":438},9,[238,440,441],{"class":248},"      intersectionRatioBySlide",[238,443,259],{"class":252},[238,445,446],{"class":262},"set",[238,448,389],{"class":417},[238,450,452,455,457,460],{"class":240,"line":451},10,[238,453,454],{"class":248},"        entry",[238,456,259],{"class":252},[238,458,459],{"class":248},"target",[238,461,462],{"class":252},",\n",[238,464,466,468,470,473,476,478,480,483,486,488],{"class":240,"line":465},11,[238,467,454],{"class":248},[238,469,259],{"class":252},[238,471,472],{"class":248},"isIntersecting",[238,474,475],{"class":252}," ?",[238,477,423],{"class":248},[238,479,259],{"class":252},[238,481,482],{"class":248},"intersectionRatio",[238,484,485],{"class":252}," :",[238,487,325],{"class":324},[238,489,462],{"class":252},[238,491,493,496],{"class":240,"line":492},12,[238,494,495],{"class":417},"      )",[238,497,281],{"class":252},[238,499,501],{"class":240,"line":500},13,[238,502,503],{"class":252},"    }\n",[238,505,507],{"class":240,"line":506},14,[238,508,371],{"emptyLinePlaceholder":370},[238,510,512,515,518,521,524,526,529,531,534,536,538,541],{"class":240,"line":511},15,[238,513,514],{"class":244},"    const",[238,516,517],{"class":248}," mostVisible",[238,519,520],{"class":252}," =",[238,522,523],{"class":248}," Array",[238,525,259],{"class":252},[238,527,528],{"class":262},"from",[238,530,266],{"class":417},[238,532,533],{"class":248},"slides",[238,535,278],{"class":417},[238,537,259],{"class":252},[238,539,540],{"class":262},"reduce",[238,542,389],{"class":417},[238,544,546,549,552,554,557,559,562,564,566],{"class":240,"line":545},16,[238,547,548],{"class":252},"      (",[238,550,551],{"class":398},"current",[238,553,353],{"class":252},[238,555,556],{"class":398}," slide",[238,558,353],{"class":252},[238,560,561],{"class":398}," index",[238,563,278],{"class":252},[238,565,404],{"class":244},[238,567,407],{"class":252},[238,569,571,574,577,579,582,584,587,589,592,594,597,599],{"class":240,"line":570},17,[238,572,573],{"class":244},"        const",[238,575,576],{"class":248}," ratio",[238,578,520],{"class":252},[238,580,581],{"class":248}," intersectionRatioBySlide",[238,583,259],{"class":252},[238,585,586],{"class":262},"get",[238,588,266],{"class":417},[238,590,591],{"class":248},"slide",[238,593,432],{"class":417},[238,595,596],{"class":252},"??",[238,598,325],{"class":324},[238,600,281],{"class":252},[238,602,604,607,609,612,615,617,620,622,625,627,629,631,634,636,638],{"class":240,"line":603},18,[238,605,606],{"class":413},"        return",[238,608,576],{"class":248},[238,610,611],{"class":252}," >",[238,613,614],{"class":248}," current",[238,616,259],{"class":252},[238,618,619],{"class":248},"ratio",[238,621,475],{"class":252},[238,623,624],{"class":252}," {",[238,626,561],{"class":248},[238,628,353],{"class":252},[238,630,576],{"class":248},[238,632,633],{"class":252}," }",[238,635,485],{"class":252},[238,637,614],{"class":248},[238,639,281],{"class":252},[238,641,643],{"class":240,"line":642},19,[238,644,645],{"class":252},"      },\n",[238,647,649,652,654,657,660,662,664,666,668],{"class":240,"line":648},20,[238,650,651],{"class":252},"      {",[238,653,561],{"class":417},[238,655,656],{"class":252},":",[238,658,659],{"class":248}," activeIndex",[238,661,353],{"class":252},[238,663,576],{"class":417},[238,665,656],{"class":252},[238,667,325],{"class":324},[238,669,670],{"class":252}," },\n",[238,672,674,677],{"class":240,"line":673},21,[238,675,676],{"class":417},"    )",[238,678,281],{"class":252},[238,680,682],{"class":240,"line":681},22,[238,683,371],{"emptyLinePlaceholder":370},[238,685,687,690,692,695,697,699,701,703,705],{"class":240,"line":686},23,[238,688,689],{"class":413},"    if",[238,691,418],{"class":417},[238,693,694],{"class":248},"mostVisible",[238,696,259],{"class":252},[238,698,619],{"class":248},[238,700,611],{"class":252},[238,702,325],{"class":324},[238,704,432],{"class":417},[238,706,435],{"class":252},[238,708,710,713,715,717,719,722],{"class":240,"line":709},24,[238,711,712],{"class":248},"      activeIndex",[238,714,520],{"class":252},[238,716,517],{"class":248},[238,718,259],{"class":252},[238,720,721],{"class":248},"index",[238,723,281],{"class":252},[238,725,727,730,732,735,737,739,742,744,747,749,751,754,756,759,761,764,766,768,771,773,775,777,780,782,785],{"class":240,"line":726},25,[238,728,729],{"class":248},"      dots",[238,731,259],{"class":252},[238,733,734],{"class":262},"forEach",[238,736,266],{"class":417},[238,738,266],{"class":252},[238,740,741],{"class":398},"dot",[238,743,353],{"class":252},[238,745,746],{"class":398}," i",[238,748,278],{"class":252},[238,750,404],{"class":244},[238,752,753],{"class":248}," dot",[238,755,259],{"class":252},[238,757,758],{"class":248},"classList",[238,760,259],{"class":252},[238,762,763],{"class":262},"toggle",[238,765,266],{"class":417},[238,767,269],{"class":252},[238,769,770],{"class":272},"active",[238,772,269],{"class":252},[238,774,353],{"class":252},[238,776,746],{"class":248},[238,778,779],{"class":252}," ===",[238,781,659],{"class":248},[238,783,784],{"class":417},"))",[238,786,281],{"class":252},[238,788,790],{"class":240,"line":789},26,[238,791,503],{"class":252},[238,793,795],{"class":240,"line":794},27,[238,796,797],{"class":252},"  },\n",[238,799,801,804,807,809,812,815,817,820,822,825,828],{"class":240,"line":800},28,[238,802,803],{"class":252},"  {",[238,805,806],{"class":417}," threshold",[238,808,656],{"class":252},[238,810,811],{"class":248}," [",[238,813,814],{"class":324},"0",[238,816,353],{"class":252},[238,818,819],{"class":324}," 0.5",[238,821,353],{"class":252},[238,823,824],{"class":324}," 1",[238,826,827],{"class":248},"] ",[238,829,830],{"class":252},"},\n",[238,832,834,836],{"class":240,"line":833},29,[238,835,278],{"class":248},[238,837,281],{"class":252},[238,839,841],{"class":240,"line":840},30,[238,842,371],{"emptyLinePlaceholder":370},[238,844,846,848,850,852,854,856,858,860,862,865,867,870,873],{"class":240,"line":845},31,[238,847,533],{"class":248},[238,849,259],{"class":252},[238,851,734],{"class":262},[238,853,266],{"class":248},[238,855,266],{"class":252},[238,857,591],{"class":398},[238,859,278],{"class":252},[238,861,404],{"class":244},[238,863,864],{"class":248}," observer",[238,866,259],{"class":252},[238,868,869],{"class":262},"observe",[238,871,872],{"class":248},"(slide))",[238,874,281],{"class":252},[238,876,878],{"class":240,"line":877},32,[238,879,371],{"emptyLinePlaceholder":370},[238,881,883,886,888,890,892,894,896,898,900,902,904],{"class":240,"line":882},33,[238,884,885],{"class":248},"dots",[238,887,259],{"class":252},[238,889,734],{"class":262},[238,891,266],{"class":248},[238,893,266],{"class":252},[238,895,741],{"class":398},[238,897,353],{"class":252},[238,899,561],{"class":398},[238,901,278],{"class":252},[238,903,404],{"class":244},[238,905,407],{"class":252},[238,907,909,912,914,917,919,921,924,926,928,931,933],{"class":240,"line":908},34,[238,910,911],{"class":248},"  dot",[238,913,259],{"class":252},[238,915,916],{"class":262},"addEventListener",[238,918,266],{"class":417},[238,920,269],{"class":252},[238,922,923],{"class":272},"click",[238,925,269],{"class":252},[238,927,353],{"class":252},[238,929,930],{"class":252}," ()",[238,932,404],{"class":244},[238,934,407],{"class":252},[238,936,938,941,944,946,949,952,955,957],{"class":240,"line":937},35,[238,939,940],{"class":248},"    slides",[238,942,943],{"class":417},"[",[238,945,721],{"class":248},[238,947,948],{"class":417},"]",[238,950,951],{"class":252},"?.",[238,953,954],{"class":262},"scrollIntoView",[238,956,266],{"class":417},[238,958,435],{"class":252},[238,960,962,965,967,970,973,975],{"class":240,"line":961},36,[238,963,964],{"class":417},"      behavior",[238,966,656],{"class":252},[238,968,969],{"class":252}," \"",[238,971,972],{"class":272},"smooth",[238,974,269],{"class":252},[238,976,462],{"class":252},[238,978,980,983,985,987,990,992],{"class":240,"line":979},37,[238,981,982],{"class":417},"      block",[238,984,656],{"class":252},[238,986,969],{"class":252},[238,988,989],{"class":272},"nearest",[238,991,269],{"class":252},[238,993,462],{"class":252},[238,995,997,1000,1002,1004,1007,1009],{"class":240,"line":996},38,[238,998,999],{"class":417},"      inline",[238,1001,656],{"class":252},[238,1003,969],{"class":252},[238,1005,1006],{"class":272},"center",[238,1008,269],{"class":252},[238,1010,462],{"class":252},[238,1012,1014,1017,1019],{"class":240,"line":1013},39,[238,1015,1016],{"class":252},"    }",[238,1018,278],{"class":417},[238,1020,281],{"class":252},[238,1022,1024,1027,1029],{"class":240,"line":1023},40,[238,1025,1026],{"class":252},"  }",[238,1028,278],{"class":417},[238,1030,281],{"class":252},[238,1032,1034,1037,1039],{"class":240,"line":1033},41,[238,1035,1036],{"class":252},"}",[238,1038,278],{"class":248},[238,1040,281],{"class":252},[227,1042,1047],{"className":1043,"code":1044,"filename":1045,"language":1046,"meta":233,"style":233},"language-css shiki shiki-themes material-theme-lighter material-theme material-theme-palenight",".carousel {\n  display: grid;\n  grid-auto-flow: column;\n  grid-auto-columns: 100%;\n  gap: 1rem;\n  scroll-snap-type: x mandatory;\n  height: 22.5rem;\n}\n\n.slide {\n  width: 100%;\n  scroll-snap-align: center;\n}\n\n.dots {\n  display: flex;\n  gap: 0.25rem;\n}\n\n.dot {\n  opacity: 0.4;\n}\n\n.dot.active {\n  opacity: 1;\n}\n",".css","css",[235,1048,1049,1058,1071,1083,1095,1107,1119,1131,1136,1140,1148,1159,1171,1175,1179,1187,1198,1209,1213,1217,1225,1237,1241,1245,1257,1267],{"__ignoreMap":233},[238,1050,1051,1053,1056],{"class":240,"line":241},[238,1052,259],{"class":252},[238,1054,1055],{"class":349},"carousel",[238,1057,407],{"class":252},[238,1059,1060,1064,1066,1069],{"class":240,"line":284},[238,1061,1063],{"class":1062},"sqsOY","  display",[238,1065,656],{"class":252},[238,1067,1068],{"class":248}," grid",[238,1070,281],{"class":252},[238,1072,1073,1076,1078,1081],{"class":240,"line":313},[238,1074,1075],{"class":1062},"  grid-auto-flow",[238,1077,656],{"class":252},[238,1079,1080],{"class":248}," column",[238,1082,281],{"class":252},[238,1084,1085,1088,1090,1093],{"class":240,"line":330},[238,1086,1087],{"class":1062},"  grid-auto-columns",[238,1089,656],{"class":252},[238,1091,1092],{"class":324}," 100%",[238,1094,281],{"class":252},[238,1096,1097,1100,1102,1105],{"class":240,"line":367},[238,1098,1099],{"class":1062},"  gap",[238,1101,656],{"class":252},[238,1103,1104],{"class":324}," 1rem",[238,1106,281],{"class":252},[238,1108,1109,1112,1114,1117],{"class":240,"line":374},[238,1110,1111],{"class":1062},"  scroll-snap-type",[238,1113,656],{"class":252},[238,1115,1116],{"class":248}," x mandatory",[238,1118,281],{"class":252},[238,1120,1121,1124,1126,1129],{"class":240,"line":392},[238,1122,1123],{"class":1062},"  height",[238,1125,656],{"class":252},[238,1127,1128],{"class":324}," 22.5rem",[238,1130,281],{"class":252},[238,1132,1133],{"class":240,"line":410},[238,1134,1135],{"class":252},"}\n",[238,1137,1138],{"class":240,"line":438},[238,1139,371],{"emptyLinePlaceholder":370},[238,1141,1142,1144,1146],{"class":240,"line":451},[238,1143,259],{"class":252},[238,1145,591],{"class":349},[238,1147,407],{"class":252},[238,1149,1150,1153,1155,1157],{"class":240,"line":465},[238,1151,1152],{"class":1062},"  width",[238,1154,656],{"class":252},[238,1156,1092],{"class":324},[238,1158,281],{"class":252},[238,1160,1161,1164,1166,1169],{"class":240,"line":492},[238,1162,1163],{"class":1062},"  scroll-snap-align",[238,1165,656],{"class":252},[238,1167,1168],{"class":248}," center",[238,1170,281],{"class":252},[238,1172,1173],{"class":240,"line":500},[238,1174,1135],{"class":252},[238,1176,1177],{"class":240,"line":506},[238,1178,371],{"emptyLinePlaceholder":370},[238,1180,1181,1183,1185],{"class":240,"line":511},[238,1182,259],{"class":252},[238,1184,885],{"class":349},[238,1186,407],{"class":252},[238,1188,1189,1191,1193,1196],{"class":240,"line":545},[238,1190,1063],{"class":1062},[238,1192,656],{"class":252},[238,1194,1195],{"class":248}," flex",[238,1197,281],{"class":252},[238,1199,1200,1202,1204,1207],{"class":240,"line":570},[238,1201,1099],{"class":1062},[238,1203,656],{"class":252},[238,1205,1206],{"class":324}," 0.25rem",[238,1208,281],{"class":252},[238,1210,1211],{"class":240,"line":603},[238,1212,1135],{"class":252},[238,1214,1215],{"class":240,"line":642},[238,1216,371],{"emptyLinePlaceholder":370},[238,1218,1219,1221,1223],{"class":240,"line":648},[238,1220,259],{"class":252},[238,1222,741],{"class":349},[238,1224,407],{"class":252},[238,1226,1227,1230,1232,1235],{"class":240,"line":673},[238,1228,1229],{"class":1062},"  opacity",[238,1231,656],{"class":252},[238,1233,1234],{"class":324}," 0.4",[238,1236,281],{"class":252},[238,1238,1239],{"class":240,"line":681},[238,1240,1135],{"class":252},[238,1242,1243],{"class":240,"line":686},[238,1244,371],{"emptyLinePlaceholder":370},[238,1246,1247,1249,1251,1253,1255],{"class":240,"line":709},[238,1248,259],{"class":252},[238,1250,741],{"class":349},[238,1252,259],{"class":252},[238,1254,770],{"class":349},[238,1256,407],{"class":252},[238,1258,1259,1261,1263,1265],{"class":240,"line":726},[238,1260,1229],{"class":1062},[238,1262,656],{"class":252},[238,1264,824],{"class":324},[238,1266,281],{"class":252},[238,1268,1269],{"class":240,"line":789},[238,1270,1135],{"class":252},[227,1272,1277],{"className":1273,"code":1274,"filename":1275,"language":1276,"meta":233,"style":233},"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\n\u003Cdiv class=\"dots\">\n  \u003Cbutton class=\"dot\">\u003C\u002Fbutton>\n  \u003Cbutton class=\"dot\">\u003C\u002Fbutton>\n  \u003Cbutton class=\"dot\">\u003C\u002Fbutton>\n  ...\n\u003C\u002Fdiv>\n",".html","html",[235,1278,1279,1300,1325,1347,1369,1374,1383,1387,1405,1428,1450,1472,1476],{"__ignoreMap":233},[238,1280,1281,1283,1286,1289,1291,1293,1295,1297],{"class":240,"line":241},[238,1282,346],{"class":252},[238,1284,1285],{"class":417},"BlossomCarousel",[238,1287,1288],{"class":244}," class",[238,1290,253],{"class":252},[238,1292,269],{"class":252},[238,1294,1055],{"class":272},[238,1296,269],{"class":252},[238,1298,1299],{"class":252},">\n",[238,1301,1302,1305,1308,1310,1312,1314,1316,1318,1321,1323],{"class":240,"line":284},[238,1303,1304],{"class":252},"  \u003C",[238,1306,1307],{"class":417},"div",[238,1309,1288],{"class":244},[238,1311,253],{"class":252},[238,1313,269],{"class":252},[238,1315,591],{"class":272},[238,1317,269],{"class":252},[238,1319,1320],{"class":252},">\u003C\u002F",[238,1322,1307],{"class":417},[238,1324,1299],{"class":252},[238,1326,1327,1329,1331,1333,1335,1337,1339,1341,1343,1345],{"class":240,"line":313},[238,1328,1304],{"class":252},[238,1330,1307],{"class":417},[238,1332,1288],{"class":244},[238,1334,253],{"class":252},[238,1336,269],{"class":252},[238,1338,591],{"class":272},[238,1340,269],{"class":252},[238,1342,1320],{"class":252},[238,1344,1307],{"class":417},[238,1346,1299],{"class":252},[238,1348,1349,1351,1353,1355,1357,1359,1361,1363,1365,1367],{"class":240,"line":330},[238,1350,1304],{"class":252},[238,1352,1307],{"class":417},[238,1354,1288],{"class":244},[238,1356,253],{"class":252},[238,1358,269],{"class":252},[238,1360,591],{"class":272},[238,1362,269],{"class":252},[238,1364,1320],{"class":252},[238,1366,1307],{"class":417},[238,1368,1299],{"class":252},[238,1370,1371],{"class":240,"line":367},[238,1372,1373],{"class":248},"  ...\n",[238,1375,1376,1379,1381],{"class":240,"line":374},[238,1377,1378],{"class":252},"\u003C\u002F",[238,1380,1285],{"class":417},[238,1382,1299],{"class":252},[238,1384,1385],{"class":240,"line":392},[238,1386,371],{"emptyLinePlaceholder":370},[238,1388,1389,1391,1393,1395,1397,1399,1401,1403],{"class":240,"line":410},[238,1390,346],{"class":252},[238,1392,1307],{"class":417},[238,1394,1288],{"class":244},[238,1396,253],{"class":252},[238,1398,269],{"class":252},[238,1400,885],{"class":272},[238,1402,269],{"class":252},[238,1404,1299],{"class":252},[238,1406,1407,1409,1412,1414,1416,1418,1420,1422,1424,1426],{"class":240,"line":438},[238,1408,1304],{"class":252},[238,1410,1411],{"class":417},"button",[238,1413,1288],{"class":244},[238,1415,253],{"class":252},[238,1417,269],{"class":252},[238,1419,741],{"class":272},[238,1421,269],{"class":252},[238,1423,1320],{"class":252},[238,1425,1411],{"class":417},[238,1427,1299],{"class":252},[238,1429,1430,1432,1434,1436,1438,1440,1442,1444,1446,1448],{"class":240,"line":451},[238,1431,1304],{"class":252},[238,1433,1411],{"class":417},[238,1435,1288],{"class":244},[238,1437,253],{"class":252},[238,1439,269],{"class":252},[238,1441,741],{"class":272},[238,1443,269],{"class":252},[238,1445,1320],{"class":252},[238,1447,1411],{"class":417},[238,1449,1299],{"class":252},[238,1451,1452,1454,1456,1458,1460,1462,1464,1466,1468,1470],{"class":240,"line":465},[238,1453,1304],{"class":252},[238,1455,1411],{"class":417},[238,1457,1288],{"class":244},[238,1459,253],{"class":252},[238,1461,269],{"class":252},[238,1463,741],{"class":272},[238,1465,269],{"class":252},[238,1467,1320],{"class":252},[238,1469,1411],{"class":417},[238,1471,1299],{"class":252},[238,1473,1474],{"class":240,"line":492},[238,1475,1373],{"class":248},[238,1477,1478,1480,1482],{"class":240,"line":500},[238,1479,1378],{"class":252},[238,1481,1307],{"class":417},[238,1483,1299],{"class":252},[1485,1486,1487],"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}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}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}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}",{"title":233,"searchDepth":284,"depth":284,"links":1489},[],"Add interactive dot markers with IntersectionObserver.","md",null,{},{"icon":94},{"title":1496,"description":1497},"Dots carousel example with Blossom Carousel","Add interactive dot markers to Blossom Carousel slides using IntersectionObserver.","1TYSDiybTUZyB2Xt_E96Hbh-F34iHXjnkYQCRUs8B_I",[1500,1502],{"title":86,"path":87,"stem":88,"description":1501,"icon":89,"children":-1},"Use .prev() and .next() to cycle through slides with interactive buttons.",{"title":96,"path":97,"stem":98,"description":1503,"icon":99,"children":-1},"Add interactive thumbnail navigation with IntersectionObserver.",1780251484824]