diff --git a/cspell.json b/cspell.json
index fd909b93..2de54345 100644
--- a/cspell.json
+++ b/cspell.json
@@ -27,6 +27,7 @@
     "Consolas",
     "contenteditable",
     "copydir",
+    "Cotte",
     "coverpage",
     "crossorigin",
     "crutchcorn",
@@ -71,10 +72,12 @@
     "jsonata",
     "keydown",
     "keyframes",
+    "Kool",
     "labelledby",
     "Laravel",
     "LaViska",
     "listbox",
+    "listitem",
     "litelement",
     "lowercasing",
     "Lucide",
@@ -107,9 +110,13 @@
     "rgba",
     "roadmap",
     "Roboto",
+    "roledescription",
+    "Sapan",
     "saturationl",
     "Schilp",
     "scrollbars",
+    "scrollend",
+    "scroller",
     "Segoe",
     "semibold",
     "slotchange",
diff --git a/docs/assets/examples/carousel/sapan-patel-i9Q9bc-WgfE-unsplash.jpg b/docs/assets/examples/carousel/field.jpg
similarity index 100%
rename from docs/assets/examples/carousel/sapan-patel-i9Q9bc-WgfE-unsplash.jpg
rename to docs/assets/examples/carousel/field.jpg
diff --git a/docs/assets/examples/carousel/adam-kool-ndN00KmbJ1c-unsplash.jpg b/docs/assets/examples/carousel/mountains.jpg
similarity index 100%
rename from docs/assets/examples/carousel/adam-kool-ndN00KmbJ1c-unsplash.jpg
rename to docs/assets/examples/carousel/mountains.jpg
diff --git a/docs/assets/examples/carousel/leonard-cotte-c1Jp-fo53U8-unsplash.jpg b/docs/assets/examples/carousel/sunset.jpg
similarity index 100%
rename from docs/assets/examples/carousel/leonard-cotte-c1Jp-fo53U8-unsplash.jpg
rename to docs/assets/examples/carousel/sunset.jpg
diff --git a/docs/assets/examples/carousel/v2osk-1Z2niiBPg5A-unsplash.jpg b/docs/assets/examples/carousel/valley.jpg
similarity index 100%
rename from docs/assets/examples/carousel/v2osk-1Z2niiBPg5A-unsplash.jpg
rename to docs/assets/examples/carousel/valley.jpg
diff --git a/docs/assets/examples/carousel/thomas-kelley-JoH60FhTp50-unsplash.jpg b/docs/assets/examples/carousel/waterfall.jpg
similarity index 100%
rename from docs/assets/examples/carousel/thomas-kelley-JoH60FhTp50-unsplash.jpg
rename to docs/assets/examples/carousel/waterfall.jpg
diff --git a/docs/components/carousel.md b/docs/components/carousel.md
index 24041d1f..41c0a69b 100644
--- a/docs/components/carousel.md
+++ b/docs/components/carousel.md
@@ -9,31 +9,31 @@ Carousels consist of optional navigation arrows to go backwards and forwards, as
   <sl-carousel-item>
     <img
       alt="The sun shines on the mountains and trees - Photo by Adam Kool on Unsplash"
-      src="/assets/examples/carousel/adam-kool-ndN00KmbJ1c-unsplash.jpg"
+      src="/assets/examples/carousel/mountains.jpg"
     />
   </sl-carousel-item>
   <sl-carousel-item>
     <img
       alt="A waterfall in the middle of a forest - Photo by Thomas Kelly on Unsplash"
-      src="/assets/examples/carousel/thomas-kelley-JoH60FhTp50-unsplash.jpg"
+      src="/assets/examples/carousel/waterfall.jpg"
     />
   </sl-carousel-item>
   <sl-carousel-item>
     <img
       alt="The sun is setting over a lavender field - Photo by Leonard Cotte on Unsplash"
-      src="/assets/examples/carousel/leonard-cotte-c1Jp-fo53U8-unsplash.jpg"
+      src="/assets/examples/carousel/sunset.jpg"
     />
   </sl-carousel-item>
   <sl-carousel-item>
     <img
       alt="A field of grass with the sun setting in the background - Photo by Sapan Patel on Unsplash"
-      src="/assets/examples/carousel/sapan-patel-i9Q9bc-WgfE-unsplash.jpg"
+      src="/assets/examples/carousel/field.jpg"
     />
   </sl-carousel-item>
   <sl-carousel-item>
     <img
       alt="A scenic view of a mountain with clouds rolling in - Photo by V2osk on Unsplash"
-      src="/assets/examples/carousel/v2osk-1Z2niiBPg5A-unsplash.jpg"
+      src="/assets/examples/carousel/valley.jpg"
     />
   </sl-carousel-item>
 </sl-carousel>
@@ -149,31 +149,31 @@ const App = () => {
         <SlCarouselItem>
           <img
             alt="The sun shines on the mountains and trees - Photo by Adam Kool on Unsplash"
-            src="/assets/examples/carousel/adam-kool-ndN00KmbJ1c-unsplash.jpg"
+            src="/assets/examples/carousel/mountains.jpg"
           />
         </SlCarouselItem>
         <SlCarouselItem>
           <img
             alt="A waterfall in the middle of a forest - Photo by Thomas Kelly on Unsplash"
-            src="/assets/examples/carousel/thomas-kelley-JoH60FhTp50-unsplash.jpg"
+            src="/assets/examples/carousel/waterfall.jpg"
           />
         </SlCarouselItem>
         <SlCarouselItem>
           <img
             alt="The sun is setting over a lavender field - Photo by Leonard Cotte on Unsplash"
-            src="/assets/examples/carousel/leonard-cotte-c1Jp-fo53U8-unsplash.jpg"
+            src="/assets/examples/carousel/sunset.jpg"
           />
         </SlCarouselItem>
         <SlCarouselItem>
           <img
             alt="A field of grass with the sun setting in the background - Photo by Sapan Patel on Unsplash"
-            src="/assets/examples/carousel/sapan-patel-i9Q9bc-WgfE-unsplash.jpg"
+            src="/assets/examples/carousel/field.jpg"
           />
         </SlCarouselItem>
         <SlCarouselItem>
           <img
             alt="A scenic view of a mountain with clouds rolling in - Photo by V2osk on Unsplash"
-            src="/assets/examples/carousel/v2osk-1Z2niiBPg5A-unsplash.jpg"
+            src="/assets/examples/carousel/valley.jpg"
           />
         </SlCarouselItem>
       </SlCarousel>
@@ -411,31 +411,31 @@ it's important to specify a predefined height to the carousel through CSS.
   <sl-carousel-item>
     <img
       alt="The sun shines on the mountains and trees - Photo by Adam Kool on Unsplash"
-      src="/assets/examples/carousel/adam-kool-ndN00KmbJ1c-unsplash.jpg"
+      src="/assets/examples/carousel/mountains.jpg"
     />
   </sl-carousel-item>
   <sl-carousel-item>
     <img
       alt="A waterfall in the middle of a forest - Photo by Thomas Kelly on Unsplash"
-      src="/assets/examples/carousel/thomas-kelley-JoH60FhTp50-unsplash.jpg"
+      src="/assets/examples/carousel/waterfall.jpg"
     />
   </sl-carousel-item>
   <sl-carousel-item>
     <img
       alt="The sun is setting over a lavender field - Photo by Leonard Cotte on Unsplash"
-      src="/assets/examples/carousel/leonard-cotte-c1Jp-fo53U8-unsplash.jpg"
+      src="/assets/examples/carousel/sunset.jpg"
     />
   </sl-carousel-item>
   <sl-carousel-item>
     <img
       alt="A field of grass with the sun setting in the background - Photo by Sapan Patel on Unsplash"
-      src="/assets/examples/carousel/sapan-patel-i9Q9bc-WgfE-unsplash.jpg"
+      src="/assets/examples/carousel/field.jpg"
     />
   </sl-carousel-item>
   <sl-carousel-item>
     <img
       alt="A scenic view of a mountain with clouds rolling in - Photo by V2osk on Unsplash"
-      src="/assets/examples/carousel/v2osk-1Z2niiBPg5A-unsplash.jpg"
+      src="/assets/examples/carousel/valley.jpg"
     />
   </sl-carousel-item>
 </sl-carousel>
@@ -487,31 +487,31 @@ const App = () => (
       <SlCarouselItem>
         <img
           alt="The sun shines on the mountains and trees - Photo by Adam Kool on Unsplash"
-          src="/assets/examples/carousel/adam-kool-ndN00KmbJ1c-unsplash.jpg"
+          src="/assets/examples/carousel/mountains.jpg"
         />
       </SlCarouselItem>
       <SlCarouselItem>
         <img
           alt="A waterfall in the middle of a forest - Photo by Thomas Kelly on Unsplash"
-          src="/assets/examples/carousel/thomas-kelley-JoH60FhTp50-unsplash.jpg"
+          src="/assets/examples/carousel/waterfall.jpg"
         />
       </SlCarouselItem>
       <SlCarouselItem>
         <img
           alt="The sun is setting over a lavender field - Photo by Leonard Cotte on Unsplash"
-          src="/assets/examples/carousel/leonard-cotte-c1Jp-fo53U8-unsplash.jpg"
+          src="/assets/examples/carousel/sunset.jpg"
         />
       </SlCarouselItem>
       <SlCarouselItem>
         <img
           alt="A field of grass with the sun setting in the background - Photo by Sapan Patel on Unsplash"
-          src="/assets/examples/carousel/sapan-patel-i9Q9bc-WgfE-unsplash.jpg"
+          src="/assets/examples/carousel/field.jpg"
         />
       </SlCarouselItem>
       <SlCarouselItem>
         <img
           alt="A scenic view of a mountain with clouds rolling in - Photo by V2osk on Unsplash"
-          src="/assets/examples/carousel/v2osk-1Z2niiBPg5A-unsplash.jpg"
+          src="/assets/examples/carousel/valley.jpg"
         />
       </SlCarouselItem>
     </SlCarousel>
@@ -529,31 +529,31 @@ Use the `--aspect-ratio` custom property to customize the size of viewport in or
   <sl-carousel-item>
     <img
       alt="The sun shines on the mountains and trees - Photo by Adam Kool on Unsplash"
-      src="/assets/examples/carousel/adam-kool-ndN00KmbJ1c-unsplash.jpg"
+      src="/assets/examples/carousel/mountains.jpg"
     />
   </sl-carousel-item>
   <sl-carousel-item>
     <img
       alt="A waterfall in the middle of a forest - Photo by Thomas Kelly on Unsplash"
-      src="/assets/examples/carousel/thomas-kelley-JoH60FhTp50-unsplash.jpg"
+      src="/assets/examples/carousel/waterfall.jpg"
     />
   </sl-carousel-item>
   <sl-carousel-item>
     <img
       alt="The sun is setting over a lavender field - Photo by Leonard Cotte on Unsplash"
-      src="/assets/examples/carousel/leonard-cotte-c1Jp-fo53U8-unsplash.jpg"
+      src="/assets/examples/carousel/sunset.jpg"
     />
   </sl-carousel-item>
   <sl-carousel-item>
     <img
       alt="A field of grass with the sun setting in the background - Photo by Sapan Patel on Unsplash"
-      src="/assets/examples/carousel/sapan-patel-i9Q9bc-WgfE-unsplash.jpg"
+      src="/assets/examples/carousel/field.jpg"
     />
   </sl-carousel-item>
   <sl-carousel-item>
     <img
       alt="A scenic view of a mountain with clouds rolling in - Photo by V2osk on Unsplash"
-      src="/assets/examples/carousel/v2osk-1Z2niiBPg5A-unsplash.jpg"
+      src="/assets/examples/carousel/valley.jpg"
     />
   </sl-carousel-item>
 </sl-carousel>
@@ -590,31 +590,31 @@ const App = () => {
         <SlCarouselItem>
           <img
             alt="The sun shines on the mountains and trees - Photo by Adam Kool on Unsplash"
-            src="/assets/examples/carousel/adam-kool-ndN00KmbJ1c-unsplash.jpg"
+            src="/assets/examples/carousel/mountains.jpg"
           />
         </SlCarouselItem>
         <SlCarouselItem>
           <img
             alt="A waterfall in the middle of a forest - Photo by Thomas Kelly on Unsplash"
-            src="/assets/examples/carousel/thomas-kelley-JoH60FhTp50-unsplash.jpg"
+            src="/assets/examples/carousel/waterfall.jpg"
           />
         </SlCarouselItem>
         <SlCarouselItem>
           <img
             alt="The sun is setting over a lavender field - Photo by Leonard Cotte on Unsplash"
-            src="/assets/examples/carousel/leonard-cotte-c1Jp-fo53U8-unsplash.jpg"
+            src="/assets/examples/carousel/sunset.jpg"
           />
         </SlCarouselItem>
         <SlCarouselItem>
           <img
             alt="A field of grass with the sun setting in the background - Photo by Sapan Patel on Unsplash"
-            src="/assets/examples/carousel/sapan-patel-i9Q9bc-WgfE-unsplash.jpg"
+            src="/assets/examples/carousel/field.jpg"
           />
         </SlCarouselItem>
         <SlCarouselItem>
           <img
             alt="A scenic view of a mountain with clouds rolling in - Photo by V2osk on Unsplash"
-            src="/assets/examples/carousel/v2osk-1Z2niiBPg5A-unsplash.jpg"
+            src="/assets/examples/carousel/valley.jpg"
           />
         </SlCarouselItem>
       </SlCarousel>
@@ -649,31 +649,31 @@ be scrolled.
   <sl-carousel-item>
     <img
       alt="The sun shines on the mountains and trees - Photo by Adam Kool on Unsplash"
-      src="/assets/examples/carousel/adam-kool-ndN00KmbJ1c-unsplash.jpg"
+      src="/assets/examples/carousel/mountains.jpg"
     />
   </sl-carousel-item>
   <sl-carousel-item>
     <img
       alt="A waterfall in the middle of a forest - Photo by Thomas Kelly on Unsplash"
-      src="/assets/examples/carousel/thomas-kelley-JoH60FhTp50-unsplash.jpg"
+      src="/assets/examples/carousel/waterfall.jpg"
     />
   </sl-carousel-item>
   <sl-carousel-item>
     <img
       alt="The sun is setting over a lavender field - Photo by Leonard Cotte on Unsplash"
-      src="/assets/examples/carousel/leonard-cotte-c1Jp-fo53U8-unsplash.jpg"
+      src="/assets/examples/carousel/sunset.jpg"
     />
   </sl-carousel-item>
   <sl-carousel-item>
     <img
       alt="A field of grass with the sun setting in the background - Photo by Sapan Patel on Unsplash"
-      src="/assets/examples/carousel/sapan-patel-i9Q9bc-WgfE-unsplash.jpg"
+      src="/assets/examples/carousel/field.jpg"
     />
   </sl-carousel-item>
   <sl-carousel-item>
     <img
       alt="A scenic view of a mountain with clouds rolling in - Photo by V2osk on Unsplash"
-      src="/assets/examples/carousel/v2osk-1Z2niiBPg5A-unsplash.jpg"
+      src="/assets/examples/carousel/valley.jpg"
     />
   </sl-carousel-item>
 </sl-carousel>
@@ -711,31 +711,31 @@ const App = () => {
         <SlCarouselItem>
           <img
             alt="The sun shines on the mountains and trees - Photo by Adam Kool on Unsplash"
-            src="/assets/examples/carousel/adam-kool-ndN00KmbJ1c-unsplash.jpg"
+            src="/assets/examples/carousel/mountains.jpg"
           />
         </SlCarouselItem>
         <SlCarouselItem>
           <img
             alt="A waterfall in the middle of a forest - Photo by Thomas Kelly on Unsplash"
-            src="/assets/examples/carousel/thomas-kelley-JoH60FhTp50-unsplash.jpg"
+            src="/assets/examples/carousel/waterfall.jpg"
           />
         </SlCarouselItem>
         <SlCarouselItem>
           <img
             alt="The sun is setting over a lavender field - Photo by Leonard Cotte on Unsplash"
-            src="/assets/examples/carousel/leonard-cotte-c1Jp-fo53U8-unsplash.jpg"
+            src="/assets/examples/carousel/sunset.jpg"
           />
         </SlCarouselItem>
         <SlCarouselItem>
           <img
             alt="A field of grass with the sun setting in the background - Photo by Sapan Patel on Unsplash"
-            src="/assets/examples/carousel/sapan-patel-i9Q9bc-WgfE-unsplash.jpg"
+            src="/assets/examples/carousel/field.jpg"
           />
         </SlCarouselItem>
         <SlCarouselItem>
           <img
             alt="A scenic view of a mountain with clouds rolling in - Photo by V2osk on Unsplash"
-            src="/assets/examples/carousel/v2osk-1Z2niiBPg5A-unsplash.jpg"
+            src="/assets/examples/carousel/valley.jpg"
           />
         </SlCarouselItem>
       </SlCarousel>
@@ -757,38 +757,38 @@ const App = () => {
 
 ### Custom layout
 
-The appereance of the carousel can be easly customized through its slots or `part` attributes.
+The appearance of the carousel can be easily customized through its slots or `part` attributes.
 
 ```html preview
 <sl-carousel class="custom-layout" navigation pagination>
   <sl-carousel-item>
     <img
       alt="The sun shines on the mountains and trees - Photo by Adam Kool on Unsplash"
-      src="/assets/examples/carousel/adam-kool-ndN00KmbJ1c-unsplash.jpg"
+      src="/assets/examples/carousel/mountains.jpg"
     />
   </sl-carousel-item>
   <sl-carousel-item>
     <img
       alt="A waterfall in the middle of a forest - Photo by Thomas Kelly on Unsplash"
-      src="/assets/examples/carousel/thomas-kelley-JoH60FhTp50-unsplash.jpg"
+      src="/assets/examples/carousel/waterfall.jpg"
     />
   </sl-carousel-item>
   <sl-carousel-item>
     <img
       alt="The sun is setting over a lavender field - Photo by Leonard Cotte on Unsplash"
-      src="/assets/examples/carousel/leonard-cotte-c1Jp-fo53U8-unsplash.jpg"
+      src="/assets/examples/carousel/sunset.jpg"
     />
   </sl-carousel-item>
   <sl-carousel-item>
     <img
       alt="A field of grass with the sun setting in the background - Photo by Sapan Patel on Unsplash"
-      src="/assets/examples/carousel/sapan-patel-i9Q9bc-WgfE-unsplash.jpg"
+      src="/assets/examples/carousel/field.jpg"
     />
   </sl-carousel-item>
   <sl-carousel-item>
     <img
       alt="A scenic view of a mountain with clouds rolling in - Photo by V2osk on Unsplash"
-      src="/assets/examples/carousel/v2osk-1Z2niiBPg5A-unsplash.jpg"
+      src="/assets/examples/carousel/valley.jpg"
     />
   </sl-carousel-item>
 
@@ -894,31 +894,31 @@ const App = () => (
       <SlCarouselItem>
         <img
           alt="The sun shines on the mountains and trees - Photo by Adam Kool on Unsplash"
-          src="/assets/examples/carousel/adam-kool-ndN00KmbJ1c-unsplash.jpg"
+          src="/assets/examples/carousel/mountains.jpg"
         />
       </SlCarouselItem>
       <SlCarouselItem>
         <img
           alt="A waterfall in the middle of a forest - Photo by Thomas Kelly on Unsplash"
-          src="/assets/examples/carousel/thomas-kelley-JoH60FhTp50-unsplash.jpg"
+          src="/assets/examples/carousel/waterfall.jpg"
         />
       </SlCarouselItem>
       <SlCarouselItem>
         <img
           alt="The sun is setting over a lavender field - Photo by Leonard Cotte on Unsplash"
-          src="/assets/examples/carousel/leonard-cotte-c1Jp-fo53U8-unsplash.jpg"
+          src="/assets/examples/carousel/sunset.jpg"
         />
       </SlCarouselItem>
       <SlCarouselItem>
         <img
           alt="A field of grass with the sun setting in the background - Photo by Sapan Patel on Unsplash"
-          src="/assets/examples/carousel/sapan-patel-i9Q9bc-WgfE-unsplash.jpg"
+          src="/assets/examples/carousel/field.jpg"
         />
       </SlCarouselItem>
       <SlCarouselItem>
         <img
           alt="A scenic view of a mountain with clouds rolling in - Photo by V2osk on Unsplash"
-          src="/assets/examples/carousel/v2osk-1Z2niiBPg5A-unsplash.jpg"
+          src="/assets/examples/carousel/valley.jpg"
         />
       </SlCarouselItem>
 
@@ -937,68 +937,48 @@ use `next()` or `previous()` to go respectively to the next or the previous slid
 
 When the active slide is changed, the `sl-slide-change` event is emitted providing the `index` of the slide.
 
-Using the API is possible to extend the carousel, for exmaple by syncing the active slide with a set of thumbnails, like in the example below.
+Using the API is possible to extend the carousel, for example by syncing the active slide with a set of thumbnails, like in the example below.
 
 ```html preview
 <sl-carousel class="carousel-thumbnails" navigation loop>
   <sl-carousel-item>
     <img
       alt="The sun shines on the mountains and trees - Photo by Adam Kool on Unsplash"
-      src="/assets/examples/carousel/adam-kool-ndN00KmbJ1c-unsplash.jpg"
+      src="/assets/examples/carousel/mountains.jpg"
     />
   </sl-carousel-item>
   <sl-carousel-item>
     <img
       alt="A waterfall in the middle of a forest - Photo by Thomas Kelly on Unsplash"
-      src="/assets/examples/carousel/thomas-kelley-JoH60FhTp50-unsplash.jpg"
+      src="/assets/examples/carousel/waterfall.jpg"
     />
   </sl-carousel-item>
   <sl-carousel-item>
     <img
       alt="The sun is setting over a lavender field - Photo by Leonard Cotte on Unsplash"
-      src="/assets/examples/carousel/leonard-cotte-c1Jp-fo53U8-unsplash.jpg"
+      src="/assets/examples/carousel/sunset.jpg"
     />
   </sl-carousel-item>
   <sl-carousel-item>
     <img
       alt="A field of grass with the sun setting in the background - Photo by Sapan Patel on Unsplash"
-      src="/assets/examples/carousel/sapan-patel-i9Q9bc-WgfE-unsplash.jpg"
+      src="/assets/examples/carousel/field.jpg"
     />
   </sl-carousel-item>
   <sl-carousel-item>
     <img
       alt="A scenic view of a mountain with clouds rolling in - Photo by V2osk on Unsplash"
-      src="/assets/examples/carousel/v2osk-1Z2niiBPg5A-unsplash.jpg"
+      src="/assets/examples/carousel/valley.jpg"
     />
   </sl-carousel-item>
 </sl-carousel>
 <div class="thumbnails">
   <div class="thumbnails__scroller">
-    <img
-      alt="Thumbnail Photo by 1"
-      class="thumbnails__image active"
-      src="/assets/examples/carousel/adam-kool-ndN00KmbJ1c-unsplash.jpg"
-    />
-    <img
-      alt="Thumbnail Photo by 2"
-      class="thumbnails__image"
-      src="/assets/examples/carousel/thomas-kelley-JoH60FhTp50-unsplash.jpg"
-    />
-    <img
-      alt="Thumbnail Photo by 3"
-      class="thumbnails__image"
-      src="/assets/examples/carousel/leonard-cotte-c1Jp-fo53U8-unsplash.jpg"
-    />
-    <img
-      alt="Thumbnail Photo by 4"
-      class="thumbnails__image"
-      src="/assets/examples/carousel/sapan-patel-i9Q9bc-WgfE-unsplash.jpg"
-    />
-    <img
-      alt="Thumbnail Photo by 5"
-      class="thumbnails__image"
-      src="/assets/examples/carousel/v2osk-1Z2niiBPg5A-unsplash.jpg"
-    />
+    <img alt="Thumbnail Photo by 1" class="thumbnails__image active" src="/assets/examples/carousel/mountains.jpg" />
+    <img alt="Thumbnail Photo by 2" class="thumbnails__image" src="/assets/examples/carousel/waterfall.jpg" />
+    <img alt="Thumbnail Photo by 3" class="thumbnails__image" src="/assets/examples/carousel/sunset.jpg" />
+    <img alt="Thumbnail Photo by 4" class="thumbnails__image" src="/assets/examples/carousel/field.jpg" />
+    <img alt="Thumbnail Photo by 5" class="thumbnails__image" src="/assets/examples/carousel/valley.jpg" />
   </div>
 </div>
 <style>
@@ -1117,23 +1097,23 @@ const css = `
 
 const images = [
   {
-    src: '/assets/examples/carousel/adam-kool-ndN00KmbJ1c-unsplash.jpg',
+    src: '/assets/examples/carousel/mountains.jpg',
     alt: 'The sun shines on the mountains and trees - Photo by Adam Kool on Unsplash'
   },
   {
-    src: '/assets/examples/carousel/thomas-kelley-JoH60FhTp50-unsplash.jpg',
+    src: '/assets/examples/carousel/waterfall.jpg',
     alt: 'A waterfall in the middle of a forest - Photo by Thomas Kelly on Unsplash'
   },
   {
-    src: '/assets/examples/carousel/leonard-cotte-c1Jp-fo53U8-unsplash.jpg',
+    src: '/assets/examples/carousel/sunset.jpg',
     alt: 'The sun is setting over a lavender field - Photo by Leonard Cotte on Unsplash'
   },
   {
-    src: '/assets/examples/carousel/sapan-patel-i9Q9bc-WgfE-unsplash.jpg',
+    src: '/assets/examples/carousel/field.jpg',
     alt: 'A field of grass with the sun setting in the background - Photo by Sapan Patel on Unsplash'
   },
   {
-    src: '/assets/examples/carousel/v2osk-1Z2niiBPg5A-unsplash.jpg',
+    src: '/assets/examples/carousel/valley.jpg',
     alt: 'A scenic view of a mountain with clouds rolling in - Photo by V2osk on Unsplash'
   }
 ];
diff --git a/src/components/carousel/carousel.ts b/src/components/carousel/carousel.ts
index 02df57ed..3b87feea 100644
--- a/src/components/carousel/carousel.ts
+++ b/src/components/carousel/carousel.ts
@@ -9,7 +9,6 @@ import { map } from 'lit/directives/map.js';
 import { prefersReducedMotion } from '../../internal/animate';
 import { range } from 'lit/directives/range.js';
 import { ScrollController } from './scroll-controller';
-import { styleMap } from 'lit/directives/style-map.js';
 import { watch } from '../../internal/watch';
 import { when } from 'lit/directives/when.js';
 import ShoelaceElement from '../../internal/shoelace-element';
@@ -18,7 +17,7 @@ import styles from './carousel.styles';
 import type { CSSResultGroup } from 'lit';
 
 /**
- * @summary A generic carousel used for displaying an arbitrary number of `sl-carousel-item` along horizontal or vertical axis.
+ * @summary Carousels display an arbitrary number of slides along a horizontal or vertical axis.
  *
  * @since 2.0
  * @status experimental
@@ -43,7 +42,8 @@ import type { CSSResultGroup } from 'lit';
  *
  * @cssproperty --slide-gap - The space between each slide.
  * @cssproperty --aspect-ratio - The aspect ratio of each slide.
- * @cssproperty --scroll-padding - The amount of padding to apply to the scrollport, useful to make visible the closest slides.
+ * @cssproperty --scroll-padding - The amount of padding to apply to the scroll area. Useful to make adjacent slides
+ *  visible.
  *
  */
 @customElement('sl-carousel')
@@ -68,7 +68,10 @@ export default class SlCarousel extends ShoelaceElement {
   /** Specifies how many slides should be shown at a given time.  */
   @property({ type: Number, attribute: 'slides-per-page' }) slidesPerPage = 1;
 
-  /** Specifies the number of slides the carousel will advance when scrolling, useful when specifying a `slides-per-page` greather than one. */
+  /**
+   * Specifies the number of slides the carousel will advance when scrolling, useful when specifying a `slides-per-page`
+   * greater than one.
+   */
   @property({ type: Number, attribute: 'slides-per-move' }) slidesPerMove = 1;
 
   /** Specifies the orientation in which the carousel will lay out.  */
@@ -91,10 +94,10 @@ export default class SlCarousel extends ShoelaceElement {
 
   private readonly slides = this.getElementsByTagName('sl-carousel-item');
 
-  // The interseection observer is used to determine which slide is displayed
+  // The intersection observer is used to determine which slide is displayed
   private intersectionObserver: IntersectionObserver;
 
-  // A map containig the state of all the slides
+  // A map containing the state of all the slides
   private readonly intersectionObserverEntries = new Map<Element, IntersectionObserverEntry>();
 
   private readonly localize = new LocalizeController(this);
@@ -138,7 +141,7 @@ export default class SlCarousel extends ShoelaceElement {
   }
 
   protected firstUpdated(): void {
-    this.initialiseSlides();
+    this.initializeSlides();
     this.mutationObserver = new MutationObserver(this.handleSlotChange.bind(this));
     this.mutationObserver.observe(this, { childList: true, subtree: false });
   }
@@ -186,15 +189,15 @@ export default class SlCarousel extends ShoelaceElement {
   }
 
   handleSlotChange(mutations: MutationRecord[]) {
-    const needsInitialisation = mutations.some(mutation =>
+    const needsInitialization = mutations.some(mutation =>
       [...mutation.addedNodes, ...mutation.removedNodes].some(
         node => SlCarouselItem.isCarouselItem(node) && !(node as HTMLElement).hasAttribute('data-clone')
       )
     );
 
-    // Reinitialise the carousel if a carousel item has been added and/or removed
-    if (needsInitialisation) {
-      this.initialiseSlides();
+    // Reinitialize the carousel if a carousel item has been added and/or removed
+    if (needsInitialization) {
+      this.initializeSlides();
       this.requestUpdate();
     }
   }
@@ -213,7 +216,7 @@ export default class SlCarousel extends ShoelaceElement {
       return;
     }
 
-    // Activate the first inetersecting slide
+    // Activate the first intersecting slide
     if (firstIntersecting) {
       this.activeSlide = slides.indexOf(firstIntersecting.target as SlCarouselItem);
     }
@@ -221,7 +224,7 @@ export default class SlCarousel extends ShoelaceElement {
 
   @watch('loop', { waitUntilFirstUpdate: true })
   @watch('slidesPerPage', { waitUntilFirstUpdate: true })
-  initialiseSlides() {
+  initializeSlides() {
     const slides = this.getSlides();
     const intersectionObserver = this.intersectionObserver;
 
@@ -412,9 +415,7 @@ export default class SlCarousel extends ShoelaceElement {
           @scrollend="${this.handleScrollEnd}"
           role="list"
           tabindex="0"
-          style="${styleMap({
-            '--slides-per-page': String(this.slidesPerPage)
-          })}"
+          style="--slides-per-page: ${this.slidesPerPage};"
           aria-live="${!autoplayController.stopped && !autoplayController.paused ? 'off' : 'polite'}"
           aria-busy="${scrollController.scrolling ? 'true' : 'false'}"
           aria-atomic="true"
diff --git a/src/components/carousel/scroll-controller.ts b/src/components/carousel/scroll-controller.ts
index adb4468a..b0dc0a8a 100644
--- a/src/components/carousel/scroll-controller.ts
+++ b/src/components/carousel/scroll-controller.ts
@@ -1,5 +1,5 @@
-import { prefersReducedMotion } from 'src/internal/animate';
 import { debounce } from 'src/internal/debounce';
+import { prefersReducedMotion } from 'src/internal/animate';
 import { waitForEvent } from 'src/internal/event';
 import type { ReactiveController, ReactiveElement } from 'lit';
 
diff --git a/src/events/events.ts b/src/events/events.ts
index a925e593..03dc0d86 100644
--- a/src/events/events.ts
+++ b/src/events/events.ts
@@ -1,33 +1,34 @@
+export { default as SlAfterCollapseEvent } from './sl-after-collapse';
+export { default as SlAfterExpandEvent } from './sl-after-expand';
+export { default as SlAfterHideEvent } from './sl-after-hide';
+export { default as SlAfterShowEvent } from './sl-after-show';
+export { default as SlBlurEvent } from './sl-blur';
+export { default as SlCancelEvent } from './sl-cancel';
+export { default as SlChangeEvent } from './sl-change';
+export { default as SlClearEvent } from './sl-clear';
+export { default as SlCloseEvent } from './sl-close';
+export { default as SlCollapseEvent } from './sl-collapse';
+export { default as SlErrorEvent } from './sl-error';
+export { default as SlExpandEvent } from './sl-expand';
+export { default as SlFinishEvent } from './sl-finish';
+export { default as SlFocusEvent } from './sl-focus';
+export { default as SlHideEvent } from './sl-hide';
 export { default as SlHoverEvent } from './sl-hover';
+export { default as SlInitialFocusEvent } from './sl-initial-focus';
+export { default as SlInputEvent } from './sl-input';
+export { default as SlInvalidEvent } from './sl-invalid';
+export { default as SlLazyChangeEvent } from './sl-lazy-change';
+export { default as SlLazyLoadEvent } from './sl-lazy-load';
+export { default as SlLoadEvent } from './sl-load';
 export { default as SlMutationEvent } from './sl-mutation';
+export { default as SlRemoveEvent } from './sl-remove';
+export { default as SlRepositionEvent } from './sl-reposition';
+export { default as SlRequestCloseEvent } from './sl-request-close';
 export { default as SlResizeEvent } from './sl-resize';
 export { default as SlSelectEvent } from './sl-select';
 export { default as SlSelectionChangeEvent } from './sl-selection-change';
+export { default as SlShowEvent } from './sl-show';
+export { default as SlSlideChange } from './sl-slide-change';
+export { default as SlStartEvent } from './sl-start';
 export { default as SlTabHideEvent } from './sl-tab-hide';
 export { default as SlTabShowEvent } from './sl-tab-show';
-export { default as SlErrorEvent } from './sl-error';
-export { default as SlRequestCloseEvent } from './sl-request-close';
-export { default as SlShowEvent } from './sl-show';
-export { default as SlAfterShowEvent } from './sl-after-show';
-export { default as SlHideEvent } from './sl-hide';
-export { default as SlAfterHideEvent } from './sl-after-hide';
-export { default as SlBlurEvent } from './sl-blur';
-export { default as SlFocusEvent } from './sl-focus';
-export { default as SlChangeEvent } from './sl-change';
-export { default as SlInputEvent } from './sl-input';
-export { default as SlInitialFocusEvent } from './sl-initial-focus';
-export { default as SlLoadEvent } from './sl-load';
-export { default as SlClearEvent } from './sl-clear';
-export { default as SlRepositionEvent } from './sl-reposition';
-export { default as SlCloseEvent } from './sl-close';
-export { default as SlRemoveEvent } from './sl-remove';
-export { default as SlExpandEvent } from './sl-expand';
-export { default as SlAfterExpandEvent } from './sl-after-expand';
-export { default as SlCollapseEvent } from './sl-collapse';
-export { default as SlAfterCollapseEvent } from './sl-after-collapse';
-export { default as SlLazyChangeEvent } from './sl-lazy-change';
-export { default as SlLazyLoadEvent } from './sl-lazy-load';
-export { default as SlCancelEvent } from './sl-cancel';
-export { default as SlFinishEvent } from './sl-finish';
-export { default as SlStartEvent } from './sl-start';
-export { default as SlInvalidEvent } from './sl-invalid';
diff --git a/src/events/sl-slide-change.ts b/src/events/sl-slide-change.ts
new file mode 100644
index 00000000..cbbc2902
--- /dev/null
+++ b/src/events/sl-slide-change.ts
@@ -0,0 +1,11 @@
+import type SlCarouselItem from '../components/carousel-item/carousel-item';
+
+type SlSlideChange = CustomEvent<{ index: number; slide: SlCarouselItem }>;
+
+declare global {
+  interface GlobalEventHandlersEventMap {
+    'sl-slide-change': SlSlideChange;
+  }
+}
+
+export default SlSlideChange;
diff --git a/src/internal/debounce.ts b/src/internal/debounce.ts
index 72f618a9..4646b3d4 100644
--- a/src/internal/debounce.ts
+++ b/src/internal/debounce.ts
@@ -13,16 +13,16 @@
 //
 
 // Each class instance will need to store its timer id, so this unique symbol will be used as property key.
-const TIMERID_KEY = Symbol();
+const TIMER_ID_KEY = Symbol();
 
 export const debounce = (delay: number) => {
   return <T>(_target: T, _propertyKey: string, descriptor: PropertyDescriptor) => {
-    const fn = descriptor.value as (this: T & { [TIMERID_KEY]: number }, ...args: unknown[]) => unknown;
+    const fn = descriptor.value as (this: T & { [TIMER_ID_KEY]: number }, ...args: unknown[]) => unknown;
 
     descriptor.value = function (this: ThisParameterType<typeof fn>, ...args: Parameters<typeof fn>) {
-      clearTimeout(this[TIMERID_KEY]);
+      clearTimeout(this[TIMER_ID_KEY]);
 
-      this[TIMERID_KEY] = window.setTimeout(() => {
+      this[TIMER_ID_KEY] = window.setTimeout(() => {
         fn.apply(this, args);
       }, delay);
     };
diff --git a/src/utilities/localize.ts b/src/utilities/localize.ts
index f3a9901d..9326f485 100644
--- a/src/utilities/localize.ts
+++ b/src/utilities/localize.ts
@@ -29,7 +29,9 @@ export interface Translation extends DefaultTranslation {
   showPassword: string;
   toggleColorFormat: string;
 
-  // TODO: upate translations for all languages
+  //
+  // TODO: update translations for all languages
+  //
   goToCarouselNextSlide?: string;
   goToCarouselPreviousSlide?: string;
   goToCarouselSlide?: (slide: number, count: number) => string;