diff --git a/carousels-gallery/src/components/Sidebar.astro b/carousels-gallery/src/components/Sidebar.astro
index 2561e5b..fda75c2 100644
--- a/carousels-gallery/src/components/Sidebar.astro
+++ b/carousels-gallery/src/components/Sidebar.astro
@@ -21,19 +21,19 @@ const links = {
     { title: "Slider", href: "slider" },
     { title: "Product", href: "product" },
     { title: "Testimonials", href: "testimonials" },
-    { title: "Virtualization", href: "virtualization" },
+    // { title: "Virtualization", href: "virtualization" },
     { title: "3D", href: "3d" },
     { title: "Curved", href: "curved" },
     { title: "Weather", href: "weather" },
-    { title: "Picker", href: "#" },
+    // { title: "Picker", href: "#" },
     { title: "Media Player", href: "media-player" },
     { title: "Wizard", href: "wizard" },
-    { title: "Recommendations", href: "#" },
-    { title: "Lightbox", href: "#" },
-    { title: "Adaptive", href: "#" },
-    { title: "Editable", href: "#" },
-    { title: "Unlocker", href: "#" },
-    { title: "Circular Lock", href: "#" },
+    // { title: "Recommendations", href: "#" },
+    // { title: "Lightbox", href: "#" },
+    // { title: "Adaptive", href: "#" },
+    // { title: "Editable", href: "#" },
+    // { title: "Unlocker", href: "#" },
+    // { title: "Circular Lock", href: "#" },
   ],
   vertical: [
     { title: "List", href: "list" },
@@ -41,18 +41,18 @@ const links = {
     { title: "Scrollyspy", href: "scroll-spy", badge: "Dev's Choice" },
     { title: "Slides", href: "slides" },
     { title: "Stack", href: "stack" },
-    { title: "Cards", href: "#" },
-    { title: "Gallery", href: "#" },
-    { title: "Scrollytelling", href: "#" },
-    { title: "Table Of Contents", href: "#" },
-    { title: "Restaurant Menu", href: "#" },
-    { title: "Date/Time Picker", href: "#" },
-    { title: "Color Picker", href: "#" },
-    { title: "Slot Machine", href: "#" },
+    // { title: "Cards", href: "#" },
+    // { title: "Gallery", href: "#" },
+    // { title: "Scrollytelling", href: "#" },
+    // { title: "Table Of Contents", href: "#" },
+    // { title: "Restaurant Menu", href: "#" },
+    // { title: "Date/Time Picker", href: "#" },
+    // { title: "Color Picker", href: "#" },
+    // { title: "Slot Machine", href: "#" },
   ],
   bidi: [
     { title: "Grid", href: "grid" },
-    { title: "Slides", href: "#" },
+    // { title: "Slides", href: "#" },
   ],
 };
 ---
@@ -108,14 +108,10 @@ const links = {
                     pathname === `/carousel/${key}/${link.href}` ? "active" : ""
                   }
                 >
-                  {link.href === "#" ? (
-                    <a>{link.title}</a>
-                  ) : (
-                    <a href={`/carousel/${key}/` + link.href + "/"}>
-                      {link.title}{" "}
-                      {link.badge && <span class="badge">{link.badge}</span>}
-                    </a>
-                  )}
+                  <a href={`/carousel/${key}/` + link.href + "/"}>
+                    {link.title}{" "}
+                    {link.badge && <span class="badge">{link.badge}</span>}
+                  </a>
                 </li>
               ))}
             </ul>
@@ -282,6 +278,7 @@ const links = {
       }
     }
 
+    /*
     @media (height < 768px) {
       aside > footer {
         overflow-x: auto;
@@ -301,6 +298,7 @@ const links = {
         }
       }
     }
+    */
   }
 
   aside {
diff --git a/carousels-gallery/src/pages/bidi/grid.astro b/carousels-gallery/src/pages/bidi/grid.astro
index 09dea6e..f0d7de9 100644
--- a/carousels-gallery/src/pages/bidi/grid.astro
+++ b/carousels-gallery/src/pages/bidi/grid.astro
@@ -19,43 +19,90 @@ import Layout from "../../layouts/Layout.astro";
       </p>
     </header>
 
-    <ul class="carousel --bidi scroll-markers scroll-buttons">
-      <li><p>1</p></li>
-      <li><p>2</p></li>
-      <li><p>3</p></li>
-      <li><p>4</p></li>
-      <li><p>5</p></li>
-      <li><p>6</p></li>
-      <li><p>7</p></li>
-      <li><p>8</p></li>
-      <li><p>9</p></li>
-      <li><p>10</p></li>
-      <li><p>11</p></li>
-      <li><p>12</p></li>
-      <li style="scroll-initial-target: nearest"><p>13</p></li>
-      <li><p>14</p></li>
-      <li><p>15</p></li>
-      <li><p>16</p></li>
-      <li><p>17</p></li>
-      <li><p>18</p></li>
-      <li><p>19</p></li>
-      <li><p>20</p></li>
-      <li><p>21</p></li>
-      <li><p>22</p></li>
-      <li><p>23</p></li>
-      <li><p>24</p></li>
-      <li><p>25</p></li>
-    </ul>
+    <div role="region" aria-label="List carousel demo">
+      <div
+        class="carousel carousel--bidi carousel--scroll-markers carousel--scroll-buttons carousel--offscreen-inert"
+        aria-live="polite"
+      >
+        <div class="carousel__slide" data-label="Slide 1">
+          <p>1</p>
+        </div>
+        <div class="carousel__slide" data-label="Slide 2">
+          <p>2</p>
+        </div>
+        <div class="carousel__slide" data-label="Slide 3">
+          <p>3</p>
+        </div>
+        <div class="carousel__slide" data-label="Slide 4">
+          <p>4</p>
+        </div>
+        <div class="carousel__slide" data-label="Slide 5">
+          <p>5</p>
+        </div>
+        <div class="carousel__slide" data-label="Slide 6">
+          <p>6</p>
+        </div>
+        <div class="carousel__slide" data-label="Slide 7">
+          <p>7</p>
+        </div>
+        <div class="carousel__slide" data-label="Slide 8">
+          <p>8</p>
+        </div>
+        <div class="carousel__slide" data-label="Slide 9">
+          <p>9</p>
+        </div>
+        <div class="carousel__slide" data-label="Slide 10">
+          <p>10</p>
+        </div>
+        <div class="carousel__slide" data-label="Slide 11">
+          <p>11</p>
+        </div>
+        <div class="carousel__slide" data-label="Slide 12">
+          <p>12</p>
+        </div>
+        <div class="carousel__slide" data-label="Slide 13" style="scroll-initial-target: nearest">
+          <p>13</p>
+        </div>
+        <div class="carousel__slide" data-label="Slide 14">
+          <p>14</p>
+        </div>
+        <div class="carousel__slide" data-label="Slide 15">
+          <p>15</p>
+        </div>
+        <div class="carousel__slide" data-label="Slide 16">
+          <p>16</p>
+        </div>
+        <div class="carousel__slide" data-label="Slide 17">
+          <p>17</p>
+        </div>
+        <div class="carousel__slide" data-label="Slide 18">
+          <p>18</p>
+        </div>
+        <div class="carousel__slide" data-label="Slide 19">
+          <p>19</p>
+        </div>
+        <div class="carousel__slide" data-label="Slide 20">
+          <p>20</p>
+        </div>
+        <div class="carousel__slide" data-label="Slide 21">
+          <p>21</p>
+        </div>
+        <div class="carousel__slide" data-label="Slide 22">
+          <p>22</p>
+        </div>
+        <div class="carousel__slide" data-label="Slide 23">
+          <p>23</p>
+        </div>
+        <div class="carousel__slide" data-label="Slide 24">
+          <p>24</p>
+        </div>
+      </div>
+    </div>
   </section>
 </Layout>
 
 <style>
   .carousel {
-    /* Reset list styles */
-    list-style-type: none;
-    counter-reset: item;
-
-    /* Styles and layout */
     inline-size: 60vmin;
     aspect-ratio: 1;
 
@@ -88,8 +135,9 @@ import Layout from "../../layouts/Layout.astro";
       }
     }
 
-    & > li {
+    .carousel__slide {
       scroll-snap-align: center;
+      container-type: scroll-state;
 
       background: light-dark(white, var(--surface-2));
       padding: 0;
diff --git a/carousels-gallery/src/pages/horizontal/3d.astro b/carousels-gallery/src/pages/horizontal/3d.astro
index c76e14a..0b6f90d 100644
--- a/carousels-gallery/src/pages/horizontal/3d.astro
+++ b/carousels-gallery/src/pages/horizontal/3d.astro
@@ -16,66 +16,66 @@ import Layout from "../../layouts/Layout.astro";
       <p></p>
     </header>
 
-    <ul class="carousel scroll-markers scroll-buttons">
-      <li tabindex="0">
-        <div class="card"><p>1</p></div>
-      </li>
-      <li tabindex="0">
-        <div class="card"><p>2</p></div>
-      </li>
-      <li tabindex="0">
-        <div class="card"><p>3</p></div>
-      </li>
-      <li tabindex="0">
-        <div class="card"><p>4</p></div>
-      </li>
-      <li tabindex="0">
-        <div class="card"><p>5</p></div>
-      </li>
-      <li tabindex="0">
-        <div class="card"><p>6</p></div>
-      </li>
-      <li tabindex="0">
-        <div class="card"><p>7</p></div>
-      </li>
-      <li tabindex="0">
-        <div class="card"><p>8</p></div>
-      </li>
-      <li tabindex="0">
-        <div class="card"><p>9</p></div>
-      </li>
-      <li tabindex="0">
-        <div class="card"><p>10</p></div>
-      </li>
-      <li tabindex="0">
-        <div class="card"><p>11</p></div>
-      </li>
-      <li tabindex="0">
-        <div class="card"><p>12</p></div>
-      </li>
-      <li tabindex="0">
-        <div class="card"><p>13</p></div>
-      </li>
-      <li tabindex="0">
-        <div class="card"><p>14</p></div>
-      </li>
-      <li tabindex="0">
-        <div class="card"><p>15</p></div>
-      </li>
-      <li tabindex="0">
-        <div class="card"><p>16</p></div>
-      </li>
-    </ul>
+    <div role="region" aria-label="3D carousel demo">
+      <div
+        class="carousel carousel--scroll-markers carousel--scroll-buttons carousel--offscreen-inert"
+        aria-live="polite"
+      >
+        <div class="carousel__slide" tabindex="0" data-label="Slide 1">
+          <div class="card"><p>1</p></div>
+        </div>
+        <div class="carousel__slide" tabindex="0" data-label="Slide 2">
+          <div class="card"><p>2</p></div>
+        </div>
+        <div class="carousel__slide" tabindex="0" data-label="Slide 3">
+          <div class="card"><p>3</p></div>
+        </div>
+        <div class="carousel__slide" tabindex="0" data-label="Slide 4">
+          <div class="card"><p>4</p></div>
+        </div>
+        <div class="carousel__slide" tabindex="0" data-label="Slide 5">
+          <div class="card"><p>5</p></div>
+        </div>
+        <div class="carousel__slide" tabindex="0" data-label="Slide 6">
+          <div class="card"><p>6</p></div>
+        </div>
+        <div class="carousel__slide" tabindex="0" data-label="Slide 7">
+          <div class="card"><p>7</p></div>
+        </div>
+        <div class="carousel__slide" tabindex="0" data-label="Slide 8">
+          <div class="card"><p>8</p></div>
+        </div>
+        <div class="carousel__slide" tabindex="0" data-label="Slide 9">
+          <div class="card"><p>9</p></div>
+        </div>
+        <div class="carousel__slide" tabindex="0" data-label="Slide 10">
+          <div class="card"><p>10</p></div>
+        </div>
+        <div class="carousel__slide" tabindex="0" data-label="Slide 11">
+          <div class="card"><p>11</p></div>
+        </div>
+        <div class="carousel__slide" tabindex="0" data-label="Slide 12">
+          <div class="card"><p>12</p></div>
+        </div>
+        <div class="carousel__slide" tabindex="0" data-label="Slide 13">
+          <div class="card"><p>13</p></div>
+        </div>
+        <div class="carousel__slide" tabindex="0" data-label="Slide 14">
+          <div class="card"><p>14</p></div>
+        </div>
+        <div class="carousel__slide" tabindex="0" data-label="Slide 15">
+          <div class="card"><p>15</p></div>
+        </div>
+        <div class="carousel__slide" tabindex="0" data-label="Slide 16">
+          <div class="card"><p>16</p></div>
+        </div>
+      </div>
+    </div>
   </section>
 </Layout>
 
 <style>
   .carousel {
-    /* Reset list styles */
-    list-style-type: none;
-    counter-reset: item;
-
-    /* Styles and layout */
     inline-size: 100cqi;
 
     display: grid;
@@ -110,7 +110,7 @@ import Layout from "../../layouts/Layout.astro";
       background-color: light-dark(white, var(--surface-1));
     }
 
-    & > li {
+    .carousel__slide {
       display: grid;
       padding: 0;
       transform-style: preserve-3d;
diff --git a/carousels-gallery/src/pages/horizontal/app-switcher.astro b/carousels-gallery/src/pages/horizontal/app-switcher.astro
index a04203c..39afdfb 100644
--- a/carousels-gallery/src/pages/horizontal/app-switcher.astro
+++ b/carousels-gallery/src/pages/horizontal/app-switcher.astro
@@ -18,80 +18,82 @@ import Layout from "../../layouts/Layout.astro";
       </p>
     </header>
 
-    <ul class="carousel scroll-buttons">
-      <li class="item">
-        <figure>
-          <img
-            src="https://assets.codepen.io/2585/1.jpg"
-            alt="A stylized illustration of a pink and blue origami-like figure on a peach-colored background with subtle shadows"
-          />
-        </figure>
-      </li>
-      <li class="item">
-        <figure>
-          <img
-            src="https://assets.codepen.io/2585/2.avif"
-            alt="A stylized illustration of a couple walking in the rain, holding an umbrella, against a city backdrop with warm tones and rain."
-          />
-        </figure>
-      </li>
-      <li class="item">
-        <figure>
-          <img
-            src="https://assets.codepen.io/2585/3.avif"
-            alt="A minimalist cartoonish rendering of a light green turtle on a peach-colored background."
-          />
-        </figure>
-      </li>
-      <li class="item">
-        <figure>
-          <img
-            src="https://assets.codepen.io/2585/4.avif"
-            alt="A detailed close-up of large, blue and white flowers with visible textures and soft lighting."
-          />
-        </figure>
-      </li>
-      <li class="item">
-        <figure>
-          <img
-            src="https://assets.codepen.io/2585/5.avif"
-            alt="A cartoonish illustration of a bright purple cup with orange handle and rim on a peach background."
-          />
-        </figure>
-      </li>
-      <li class="item">
-        <figure>
-          <img
-            src="https://assets.codepen.io/2585/6.avif"
-            alt="A stylized illustration of a beach scene at sunset, with people on the shore, palm trees, and a warm sky gradient."
-          />
-        </figure>
-      </li>
-      <li class="item">
-        <figure>
-          <img
-            src="https://assets.codepen.io/2585/7.avif"
-            alt="A stylized illustration of two people sitting on swings suspended from a tree at a beach during sunset."
-          />
-        </figure>
-      </li>
-      <li class="item">
-        <figure>
-          <img
-            src="https://assets.codepen.io/2585/8.avif"
-            alt="A cartoonish figure of a security guard in uniform, wearing dark glasses, standing with a small suitcase on a turquoise background."
-          />
-        </figure>
-      </li>
-      <li class="item">
-        <figure>
-          <img
-            src="https://assets.codepen.io/2585/9.avif"
-            alt="A minimalist depiction of a white abstract object, possibly a bowl, on a red background with soft lighting."
-          />
-        </figure>
-      </li>
-    </ul>
+    <div role="region" aria-label="App Switcher carousel demo">
+      <div class="carousel carousel--scroll-buttons carousel--offscreen-inert" aria-live="polite">
+        <div class="carousel__slide item">
+          <figure>
+            <img
+              src="https://assets.codepen.io/2585/1.jpg"
+              alt="A stylized illustration of a pink and blue origami-like figure on a peach-colored background with subtle shadows"
+            />
+          </figure>
+        </div>
+        <div class="carousel__slide item">
+          <figure>
+            <img
+              src="https://assets.codepen.io/2585/2.avif"
+              alt="A stylized illustration of a couple walking in the rain, holding an umbrella, against a city backdrop with warm tones and rain."
+            />
+          </figure>
+        </div>
+        <div class="carousel__slide item">
+          <figure>
+            <img
+              src="https://assets.codepen.io/2585/3.avif"
+              alt="A minimalist cartoonish rendering of a light green turtle on a peach-colored background."
+            />
+          </figure>
+        </div>
+        <div class="carousel__slide item">
+          <figure>
+            <img
+              src="https://assets.codepen.io/2585/4.avif"
+              alt="A detailed close-up of large, blue and white flowers with visible textures and soft lighting."
+            />
+          </figure>
+        </div>
+        <div class="carousel__slide item">
+          <figure>
+            <img
+              src="https://assets.codepen.io/2585/5.avif"
+              alt="A cartoonish illustration of a bright purple cup with orange handle and rim on a peach background."
+            />
+          </figure>
+        </div>
+        <div class="carousel__slide item">
+          <figure>
+            <img
+              src="https://assets.codepen.io/2585/6.avif"
+              alt="A stylized illustration of a beach scene at sunset, with people on the shore, palm trees, and a warm sky gradient."
+            />
+          </figure>
+        </div>
+        <div class="carousel__slide item">
+          <figure>
+            <img
+              src="https://assets.codepen.io/2585/7.avif"
+              alt="A stylized illustration of two people sitting on swings suspended from a tree at a beach during sunset."
+            />
+          </figure>
+        </div>
+        <div class="carousel__slide item">
+          <figure>
+            <img
+              src="https://assets.codepen.io/2585/8.avif"
+              alt="A cartoonish figure of a security guard in uniform, wearing dark glasses, standing with a small suitcase on a turquoise background."
+            />
+          </figure>
+        </div>
+        <div class="carousel__slide item">
+          <figure>
+            <img
+              src="https://assets.codepen.io/2585/9.avif"
+              alt="A minimalist depiction of a white abstract object, possibly a bowl, on a red background with soft lighting."
+            />
+          </figure>
+        </div>
+      </div>
+    </div>
   </section>
 
   <style>
@@ -147,12 +149,13 @@ import Layout from "../../layouts/Layout.astro";
         backdrop-filter: blur(10px);
       }
 
-      /* 
-        snap on the item, which is untransformed
-        also order is changed so last item is on top
+      /*
+      snap on the item, which is untransformed
+      also order is changed so last item is on top
       */
-      > .item {
+      .carousel__slide {
         scroll-snap-align: start;
+        padding-inline-start: var(--size-2);
 
         &:nth-child(1) {
           order: 10;
@@ -192,10 +195,10 @@ import Layout from "../../layouts/Layout.astro";
         }
       }
 
-      /* 
-        magic is here, a child of the snapped item 
-        animates items as they cross the viewport view()
-        range is set to create the effect
+      /*
+      magic is here, a child of the snapped item
+      animates items as they cross the viewport view()
+      range is set to create the effect
       */
       figure {
         @supports (animation-timeline: view()) {
diff --git a/carousels-gallery/src/pages/horizontal/cards.astro b/carousels-gallery/src/pages/horizontal/cards.astro
index ab37c37..68b1a96 100644
--- a/carousels-gallery/src/pages/horizontal/cards.astro
+++ b/carousels-gallery/src/pages/horizontal/cards.astro
@@ -17,119 +17,134 @@ import Layout from "../../layouts/Layout.astro";
       <p>Buttons and markers both anchored to the bottom</p>
     </header>
 
-    <ul class="carousel scroll-markers scroll-buttons">
-      <article class="card snapped">
-        <figure>
-          <picture>
-            <img
-              src="https://assets.codepen.io/2585/Roboto.svg"
-              alt="a black and white line drawing of a futuristic person in a jacket pants and helmet striding forward"
-              height="500"
-              width="500"
-            />
-          </picture>
-          <figcaption>
-            <h5>Cyber Jumper</h5>
-            <p>
-              Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quae,
-              neque.
-            </p>
-            <a href="#">Check it out</a>
-          </figcaption>
-        </figure>
-      </article>
-
-      <article class="card">
-        <figure>
-          <picture>
-            <img
-              src="https://assets.codepen.io/2585/Entertainment.svg"
-              alt="a black and white drawing of a person with curly hair, wearing a jacket and pants and holding, what looks like a small media player"
-              height="500"
-              width="500"
-            />
-          </picture>
-          <figcaption>
-            <h5>Jam Strut</h5>
-            <p>
-              Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
-              nisi ut aliquip ex ea commodo consequat.
-            </p>
-            <a href="#">Check it out</a>
-          </figcaption>
-        </figure>
-      </article>
-
-      <article class="card scroll-start">
-        <figure>
-          <picture>
-            <img
-              src="https://assets.codepen.io/2585/Mechanical+Love.svg"
-              alt="a black and white drawing of two people standing side by side with their arms around each other and wearing backpacks"
-              height="500"
-              width="500"
-            />
-          </picture>
-          <figcaption>
-            <h5>Mechanical Love</h5>
-            <p>
-              Duis aute irure dolor in reprehenderit in voluptate velit esse
-              cillum dolore eu fugiat nulla pariatur.
-            </p>
-            <a href="#">Check it out</a>
-          </figcaption>
-        </figure>
-      </article>
-
-      <article class="card">
-        <figure>
-          <picture>
-            <img
-              src="https://assets.codepen.io/2585/Waiting.svg"
-              alt="a black and white drawing of a person sitting cross-legged"
-              height="500"
-              width="500"
-            />
-          </picture>
-          <figcaption>
-            <h5>Waiting Patiently</h5>
-            <p>
-              Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
-              officia deserunt mollit anim id est laborum.
-            </p>
-            <a href="#">Check it out</a>
-          </figcaption>
-        </figure>
-      </article>
-
-      <article class="card">
-        <figure>
-          <picture>
-            <img
-              src="https://assets.codepen.io/2585/New+Beginnings.svg"
-              alt="a black and white drawing of a person sitting in an armchair reading a book, the chair has wires that are connected to the person."
-              height="500"
-              width="500"
-            />
-          </picture>
-          <figcaption>
-            <h5>New Beginnings Are Beautiful</h5>
-            <p>
-              Sed ut perspiciatis unde omnis iste natus error sit voluptatem
-              accusantium doloremque laudantium, totam rem aperiam, eaque ipsa
-              quae ab illo inventore veritatis et quasi architecto beatae vitae
-              dicta sunt explicabo.
-            </p>
-            <a href="#">Check it out</a>
-          </figcaption>
-        </figure>
-      </article>
-    </ul>
+    <div role="region" aria-label="Card carousel demo">
+      <div
+        class="carousel carousel--scroll-markers carousel--scroll-buttons carousel--offscreen-inert"
+        aria-live="polite"
+      >
+        <div class="carousel__slide" data-label="Slide 1">
+          <article class="card snapped">
+            <figure>
+              <picture>
+                <img
+                  src="https://assets.codepen.io/2585/Roboto.svg"
+                  alt="a black and white line drawing of a futuristic person in a jacket pants and helmet striding forward"
+                  height="500"
+                  width="500"
+                />
+              </picture>
+              <figcaption>
+                <h5>Cyber Jumper</h5>
+                <p>
+                  Lorem ipsum dolor sit amet consectetur, adipisicing elit.
+                  Quae, neque.
+                </p>
+                <a href="#">Check it out</a>
+              </figcaption>
+            </figure>
+          </article>
+        </div>
+
+        <div class="carousel__slide" data-label="Slide 2">
+          <article class="card">
+            <figure>
+              <picture>
+                <img
+                  src="https://assets.codepen.io/2585/Entertainment.svg"
+                  alt="a black and white drawing of a person with curly hair, wearing a jacket and pants and holding, what looks like a small media player"
+                  height="500"
+                  width="500"
+                />
+              </picture>
+              <figcaption>
+                <h5>Jam Strut</h5>
+                <p>
+                  Ut enim ad minim veniam, quis nostrud exercitation ullamco
+                  laboris nisi ut aliquip ex ea commodo consequat.
+                </p>
+                <a href="#">Check it out</a>
+              </figcaption>
+            </figure>
+          </article>
+        </div>
+
+        <div class="carousel__slide" data-label="Slide 3">
+          <article class="card scroll-start">
+            <figure>
+              <picture>
+                <img
+                  src="https://assets.codepen.io/2585/Mechanical+Love.svg"
+                  alt="a black and white drawing of two people standing side by side with their arms around each other and wearing backpacks"
+                  height="500"
+                  width="500"
+                />
+              </picture>
+              <figcaption>
+                <h5>Mechanical Love</h5>
+                <p>
+                  Duis aute irure dolor in reprehenderit in voluptate velit esse
+                  cillum dolore eu fugiat nulla pariatur.
+                </p>
+                <a href="#">Check it out</a>
+              </figcaption>
+            </figure>
+          </article>
+        </div>
+
+        <div class="carousel__slide" data-label="Slide 4">
+          <article class="card">
+            <figure>
+              <picture>
+                <img
+                  src="https://assets.codepen.io/2585/Waiting.svg"
+                  alt="a black and white drawing of a person sitting cross-legged"
+                  height="500"
+                  width="500"
+                />
+              </picture>
+              <figcaption>
+                <h5>Waiting Patiently</h5>
+                <p>
+                  Excepteur sint occaecat cupidatat non proident, sunt in culpa
+                  qui officia deserunt mollit anim id est laborum.
+                </p>
+                <a href="#">Check it out</a>
+              </figcaption>
+            </figure>
+          </article>
+        </div>
+
+        <div class="carousel__slide" data-label="Slide 5">
+          <article class="card">
+            <figure>
+              <picture>
+                <img
+                  src="https://assets.codepen.io/2585/New+Beginnings.svg"
+                  alt="a black and white drawing of a person sitting in an armchair reading a book, the chair has wires that are connected to the person."
+                  height="500"
+                  width="500"
+                />
+              </picture>
+              <figcaption>
+                <h5>New Beginnings Are Beautiful</h5>
+                <p>
+                  Sed ut perspiciatis unde omnis iste natus error sit voluptatem
+                  accusantium doloremque laudantium, totam rem aperiam, eaque
+                  ipsa quae ab illo inventore veritatis et quasi architecto
+                  beatae vitae dicta sunt explicabo.
+                </p>
+                <a href="#">Check it out</a>
+              </figcaption>
+            </figure>
+          </article>
+        </div>
+      </div>
+    </div>
   </section>
 </Layout>
 
 <style>
-  ul {
+  .carousel {
     inline-size: 100cqi;
     list-style-type: none;
     padding: var(--size-3);
@@ -151,7 +166,7 @@ import Layout from "../../layouts/Layout.astro";
       inline-size: 50cqi;
     }
 
-    > * {
+    .carousel__slide {
       container-type: scroll-state;
       scroll-snap-align: center;
       scroll-snap-stop: always;
diff --git a/carousels-gallery/src/pages/horizontal/curved.astro b/carousels-gallery/src/pages/horizontal/curved.astro
index 3fe7d89..4cf90c6 100644
--- a/carousels-gallery/src/pages/horizontal/curved.astro
+++ b/carousels-gallery/src/pages/horizontal/curved.astro
@@ -14,23 +14,28 @@ import Layout from "../../layouts/Layout.astro";
       <p>Just a neat mask illusion.</p>
     </header>
 
-    <ul class="carousel scroll-buttons">
-      {
-        Array.from({ length: 30 }).map((_, i) => (
-          <li>
-            <figure>
-              <img
-                src={`https://picsum.photos/seed/${i + 1}/300/600`}
-                width="300"
-                height="600"
-                alt={`Image ${i}`}
-                loading="lazy"
-              />
-            </figure>
-          </li>
-        ))
-      }
-    </ul>
+    <div role="region" aria-label="Curved carousel demo">
+      <div
+        class="carousel carousel--scroll-buttons carousel--offscreen-inert"
+        aria-live="polite"
+      >
+        {
+          Array.from({ length: 30 }).map((_, i) => (
+            <div class="carousel__slide" data-label={`Slide ${i}`}>
+              <figure>
+                <img
+                  src={`https://picsum.photos/seed/${i + 1}/300/600`}
+                  width="300"
+                  height="600"
+                  alt={`Image ${i}`}
+                  loading="lazy"
+                />
+              </figure>
+            </div>
+          ))
+        }
+      </div>
+    </div>
   </section>
 </Layout>
 
@@ -39,11 +44,6 @@ import Layout from "../../layouts/Layout.astro";
     /* dramatic overlap */
     margin-block-start: -15vh;
 
-    /* Reset list styles */
-    list-style-type: none;
-    counter-reset: item;
-
-    /* Styles and layout */
     inline-size: 100cqi;
 
     display: grid;
@@ -86,7 +86,7 @@ import Layout from "../../layouts/Layout.astro";
       left: anchor(center);
     }
 
-    & > li {
+    .carousel__slide {
       inline-size: 30vh;
       scroll-snap-align: center;
 
diff --git a/carousels-gallery/src/pages/horizontal/gallery.astro b/carousels-gallery/src/pages/horizontal/gallery.astro
index 4643cf9..119725c 100644
--- a/carousels-gallery/src/pages/horizontal/gallery.astro
+++ b/carousels-gallery/src/pages/horizontal/gallery.astro
@@ -14,70 +14,88 @@ import Layout from "../../layouts/Layout.astro";
       </div>
     </header>
 
-    <div class="carousel scroll-buttons scroll-markers">
-      <picture>
-        <img
-          src="/carousel/neon-wolf.jpg"
-          alt="A portrait of an armored wolf with red glowing lines and ornaments"
-          width="500"
-          height="500"
-          loading="lazy"
-        />
-      </picture>
-      <picture>
-        <img
-          src="/carousel/neon-raptor.jpg"
-          alt="A portrait of a raptor with glowing eyes, pink hair and neon armor."
-          width="500"
-          height="500"
-          loading="lazy"
-        />
-      </picture>
-      <picture>
-        <img
-          src="/carousel/flying-cars.jpg"
-          alt="A cityscape with flying cars and neon lights"
-          width="500"
-          height="500"
-          loading="lazy"
-        />
-      </picture>
-      <picture>
-        <img
-          src="/carousel/neon-trex.jpg"
-          alt="A portrait of a T-Rex with glowing eyes and armor, surrounded by neon streaks of light."
-          width="500"
-          height="500"
-          loading="lazy"
-        />
-      </picture>
-      <picture>
-        <img
-          src="/carousel/flying-cars-2.jpg"
-          alt="An airborn cityscape with flying cars and neon lights"
-          width="500"
-          height="500"
-          loading="lazy"
-        />
-      </picture>
-      <picture>
-        <img
-          src="/carousel/flying-cars-3.jpg"
-          alt="A cityscape with flying cars and neon lights flying towards a tower"
-          width="500"
-          height="500"
-          loading="lazy"
-        />
-      </picture>
-      <picture>
-        <img
-          src="/carousel/neon-city.jpg"
-          alt="A futuristic city scene with flying vehicles and bright neon lights"
-          width="500"
-          height="500"
-          loading="lazy"
-        />
-      </picture>
+    <div role="region" aria-label="Image gallery carousel demo">
+      <div
+        class="carousel carousel--scroll-buttons carousel--scroll-markers carousel--unsnapped-inert"
+        aria-live="polite"
+      >
+        <div class="carousel__slide" data-label="Slide 1">
+          <picture role="tabpanel" aria-label="Slide 1">
+            <img
+              src="/carousel/neon-wolf.jpg"
+              alt="A portrait of an armored wolf with red glowing lines and ornaments"
+              width="500"
+              height="500"
+            />
+          </picture>
+        </div>
+        <div class="carousel__slide" data-label="Slide 2">
+          <picture role="tabpanel" aria-label="Slide 2">
+            <img
+              src="/carousel/neon-raptor.jpg"
+              alt="A portrait of a raptor with glowing eyes, pink hair and neon armor."
+              width="500"
+              height="500"
+              loading="lazy"
+            />
+          </picture>
+        </div>
+        <div class="carousel__slide" data-label="Slide 3">
+          <picture role="tabpanel" aria-label="Slide 3">
+            <img
+              src="/carousel/flying-cars.jpg"
+              alt="A cityscape with flying cars and neon lights"
+              width="500"
+              height="500"
+              loading="lazy"
+            />
+          </picture>
+        </div>
+        <div class="carousel__slide" data-label="Slide 4">
+          <picture role="tabpanel" aria-label="Slide 4">
+            <img
+              src="/carousel/neon-trex.jpg"
+              alt="A portrait of a T-Rex with glowing eyes and armor, surrounded by neon streaks of light."
+              width="500"
+              height="500"
+              loading="lazy"
+            />
+          </picture>
+        </div>
+        <div class="carousel__slide" data-label="Slide 5">
+          <picture role="tabpanel" aria-label="Slide 5">
+            <img
+              src="/carousel/flying-cars-2.jpg"
+              alt="An airborn cityscape with flying cars and neon lights"
+              width="500"
+              height="500"
+              loading="lazy"
+            />
+          </picture>
+        </div>
+        <div class="carousel__slide" data-label="Slide 6">
+          <picture role="tabpanel" aria-label="Slide 6">
+            <img
+              src="/carousel/flying-cars-3.jpg"
+              alt="A cityscape with flying cars and neon lights flying towards a tower"
+              width="500"
+              height="500"
+              loading="lazy"
+            />
+          </picture>
+        </div>
+        <div class="carousel__slide" data-label="Slide 7">
+          <picture role="tabpanel" aria-label="Slide 7">
+            <img
+              src="/carousel/neon-city.jpg"
+              alt="A futuristic city scene with flying vehicles and bright neon lights"
+              width="500"
+              height="500"
+              loading="lazy"
+            />
+          </picture>
+        </div>
+      </div>
     </div>
   </section>
 
@@ -100,10 +118,10 @@ import Layout from "../../layouts/Layout.astro";
         inline-size: 50cqi;
       }
 
-      > * {
+      .carousel__slide {
         scroll-snap-align: center;
 
-        > img {
+        > picture {
           transition: filter 0.3s var(--ease-3);
 
           @container not scroll-state(snapped: inline) {
diff --git a/carousels-gallery/src/pages/horizontal/hubs.astro b/carousels-gallery/src/pages/horizontal/hubs.astro
index 02fc9c5..79bbd55 100644
--- a/carousels-gallery/src/pages/horizontal/hubs.astro
+++ b/carousels-gallery/src/pages/horizontal/hubs.astro
@@ -15,36 +15,47 @@ import Layout from "../../layouts/Layout.astro";
       </div>
       <p>
         These are established pages in the markup. See <a
-          href="/horizonta/pages">Pages</a
+          href="/horizontal/pages/">Pages</a
         > for an automatic paging example.
       </p>
     </header>
 
-    <div class="carousel scroll-buttons scroll-markers">
-      <section class="hub bento-lg">
-        <div style="--sibling-index: 1"></div>
-        <div style="--sibling-index: 2"></div>
-        <div style="--sibling-index: 3"></div>
-        <div style="--sibling-index: 4"></div>
-        <div style="--sibling-index: 5"></div>
-      </section>
-      <section class="hub bento-md">
-        <div style="--sibling-index: 1"></div>
-        <div style="--sibling-index: 2"></div>
-        <div style="--sibling-index: 3"></div>
-      </section>
-      <section class="hub grid">
-        <div style="--sibling-index: 1"></div>
-        <div style="--sibling-index: 2"></div>
-        <div style="--sibling-index: 3"></div>
-        <div style="--sibling-index: 4"></div>
-        <div style="--sibling-index: 5"></div>
-        <div style="--sibling-index: 6"></div>
-        <div style="--sibling-index: 7"></div>
-        <div style="--sibling-index: 8"></div>
-        <div style="--sibling-index: 9"></div>
-        <div style="--sibling-index: 10"></div>
-      </section>
+    <div role="region" aria-label="Hubs carousel demo">
+      <div
+        class="carousel carousel--scroll-markers carousel--scroll-buttons carousel--unsnapped-inert"
+        aria-live="polite"
+      >
+        <div class="carousel__slide" data-label="Slide 1">
+          <section class="hub bento-lg" role="tabpanel" aria-label="Slide 1">
+            <div style="--sibling-index: 1"></div>
+            <div style="--sibling-index: 2"></div>
+            <div style="--sibling-index: 3"></div>
+            <div style="--sibling-index: 4"></div>
+            <div style="--sibling-index: 5"></div>
+          </section>
+        </div>
+        <div class="carousel__slide" data-label="Slide 2">
+          <section class="hub bento-md" role="tabpanel" aria-label="Slide 2">
+            <div style="--sibling-index: 1"></div>
+            <div style="--sibling-index: 2"></div>
+            <div style="--sibling-index: 3"></div>
+          </section>
+        </div>
+        <div class="carousel__slide" data-label="Slide 3">
+          <section class="hub grid" role="tabpanel" aria-label="Slide 3">
+            <div style="--sibling-index: 1"></div>
+            <div style="--sibling-index: 2"></div>
+            <div style="--sibling-index: 3"></div>
+            <div style="--sibling-index: 4"></div>
+            <div style="--sibling-index: 5"></div>
+            <div style="--sibling-index: 6"></div>
+            <div style="--sibling-index: 7"></div>
+            <div style="--sibling-index: 8"></div>
+            <div style="--sibling-index: 9"></div>
+            <div style="--sibling-index: 10"></div>
+          </section>
+        </div>
+      </div>
     </div>
   </section>
 
@@ -55,9 +66,11 @@ import Layout from "../../layouts/Layout.astro";
       grid-auto-flow: column;
       inline-size: 100cqi;
 
-      > * {
+      .carousel__slide {
+        display: grid;
         scroll-snap-align: center;
         scroll-snap-stop: always;
+        container-type: scroll-state;
 
         &::scroll-marker {
           aspect-ratio: var(--ratio-ultrawide);
@@ -81,8 +94,8 @@ import Layout from "../../layouts/Layout.astro";
 
     .hub {
       display: grid;
-      gap: var(--size-5);
       margin-inline: auto;
+      gap: var(--size-5);
 
       &.bento-lg {
         grid-template-columns: repeat(4, 15cqi);
diff --git a/carousels-gallery/src/pages/horizontal/list.astro b/carousels-gallery/src/pages/horizontal/list.astro
index 1809f49..086ac9f 100644
--- a/carousels-gallery/src/pages/horizontal/list.astro
+++ b/carousels-gallery/src/pages/horizontal/list.astro
@@ -27,49 +27,66 @@ import Layout from "../../layouts/Layout.astro";
       </p>
     </header>
 
-    <ul class="carousel scroll-markers scroll-buttons">
-      <li tabindex="0"><p>1</p></li>
-      <li tabindex="0"><p>2</p></li>
-      <li tabindex="0"><p>3</p></li>
-      <li tabindex="0"><p>4</p></li>
-      <li tabindex="0"><p>5</p></li>
-      <li tabindex="0"><p>6</p></li>
-      <li tabindex="0"><p>7</p></li>
-      <li tabindex="0"><p>8</p></li>
-      <li tabindex="0"><p>9</p></li>
-      <li tabindex="0"><p>10</p></li>
-      <li tabindex="0"><p>11</p></li>
-      <li tabindex="0"><p>12</p></li>
-      <li tabindex="0"><p>13</p></li>
-      <li tabindex="0"><p>14</p></li>
-      <li tabindex="0"><p>15</p></li>
-      <li tabindex="0"><p>16</p></li>
-    </ul>
+    <div role="region" aria-label="List carousel demo">
+      <div
+        class="carousel carousel--scroll-markers carousel--scroll-buttons carousel--offscreen-inert"
+        aria-live="polite"
+      >
+        <div class="carousel__slide" tabindex="0" data-label="Slide 1">
+          <p>1</p>
+        </div>
+        <div class="carousel__slide" tabindex="0" data-label="Slide 2">
+          <p>2</p>
+        </div>
+        <div class="carousel__slide" tabindex="0" data-label="Slide 3">
+          <p>3</p>
+        </div>
+        <div class="carousel__slide" tabindex="0" data-label="Slide 4">
+          <p>4</p>
+        </div>
+        <div class="carousel__slide" tabindex="0" data-label="Slide 5">
+          <p>5</p>
+        </div>
+        <div class="carousel__slide" tabindex="0" data-label="Slide 6">
+          <p>6</p>
+        </div>
+        <div class="carousel__slide" tabindex="0" data-label="Slide 7">
+          <p>7</p>
+        </div>
+        <div class="carousel__slide" tabindex="0" data-label="Slide 8">
+          <p>8</p>
+        </div>
+        <div class="carousel__slide" tabindex="0" data-label="Slide 9">
+          <p>9</p>
+        </div>
+        <div class="carousel__slide" tabindex="0" data-label="Slide 10">
+          <p>10</p>
+        </div>
+        <div class="carousel__slide" tabindex="0" data-label="Slide 11">
+          <p>11</p>
+        </div>
+        <div class="carousel__slide" tabindex="0" data-label="Slide 12">
+          <p>12</p>
+        </div>
+        <div class="carousel__slide" tabindex="0" data-label="Slide 13">
+          <p>13</p>
+        </div>
+        <div class="carousel__slide" tabindex="0" data-label="Slide 14">
+          <p>14</p>
+        </div>
+        <div class="carousel__slide" tabindex="0" data-label="Slide 15">
+          <p>15</p>
+        </div>
+        <div class="carousel__slide" tabindex="0" data-label="Slide 16">
+          <p>16</p>
+        </div>
+      </div>
+    </div>
   </section>
 </Layout>
 
 <style>
-  /* must be 20% in view or else inert */
-  @keyframes offscreen-inert {
-    entry 0%,
-    entry 19%,
-    exit 100% {
-      interactivity: inert;
-      opacity: 0.25;
-    }
-    entry 20%,
-    exit 99% {
-      interactivity: auto;
-      opacity: 1;
-    }
-  }
-
   .carousel {
-    /* Reset list styles */
-    list-style-type: none;
-    counter-reset: item;
-
-    /* Styles and layout */
     inline-size: 100cqi;
 
     display: grid;
@@ -92,9 +109,8 @@ import Layout from "../../layouts/Layout.astro";
       position-area: var(--_inner);
     }
 
-    & > li {
-      animation: offscreen-inert linear both;
-      animation-timeline: view(x);
+    .carousel__slide {
+      container-type: scroll-state;
 
       background: light-dark(white, var(--surface-2));
       padding: 0;
diff --git a/carousels-gallery/src/pages/horizontal/media-player.astro b/carousels-gallery/src/pages/horizontal/media-player.astro
index 57cf426..f875a37 100644
--- a/carousels-gallery/src/pages/horizontal/media-player.astro
+++ b/carousels-gallery/src/pages/horizontal/media-player.astro
@@ -25,19 +25,21 @@ import Layout from "../../layouts/Layout.astro";
     </header>
 
     <div class="media-player">
-      <ul class="carousel scroll-buttons">
-        <li aria-label="Jenny Was a Friend of Mine"></li>
-        <li aria-label="Mr. Brightside"></li>
-        <li aria-label="Smile Like You Mean It"></li>
-        <li aria-label="Somebody Told Me"></li>
-        <li aria-label="All These Things That I've Done"></li>
-        <li aria-label="Andy, You're a Star"></li>
-        <li aria-label="On Top"></li>
-        <li aria-label="Change Your Mind"></li>
-        <li aria-label="Believe Me Natalie"></li>
-        <li aria-label="Midnight Show"></li>
-        <li aria-label="Everything Will Be Alright"></li>
-      </ul>
+      <div role="region" aria-label="Media player carousel demo">
+        <div class="carousel carousel--scroll-buttons carousel--unsnapped-inert" aria-live="polite">
+          <div class="carousel__slide" role="tabpanel" aria-label="Jenny Was a Friend of Mine"></div>
+          <div class="carousel__slide" role="tabpanel" aria-label="Mr. Brightside"></div>
+          <div class="carousel__slide" role="tabpanel" aria-label="Smile Like You Mean It"></div>
+          <div class="carousel__slide" role="tabpanel" aria-label="Somebody Told Me"></div>
+          <div class="carousel__slide" role="tabpanel" aria-label="All These Things That I've Done"></div>
+          <div class="carousel__slide" role="tabpanel" aria-label="Andy, You're a Star"></div>
+          <div class="carousel__slide" role="tabpanel" aria-label="On Top"></div>
+          <div class="carousel__slide" role="tabpanel" aria-label="Change Your Mind"></div>
+          <div class="carousel__slide" role="tabpanel" aria-label="Believe Me Natalie"></div>
+          <div class="carousel__slide" role="tabpanel" aria-label="Midnight Show"></div>
+          <div class="carousel__slide" role="tabpanel" aria-label="Everything Will Be Alright"></div>
+        </div>
+      </div>
       <footer>
         <p title="Artist name">The Killers</p>
       </footer>
@@ -73,7 +75,11 @@ import Layout from "../../layouts/Layout.astro";
 
     --album-size: min(var(--size-content-2), 80vw);
 
-    > footer {
+    [role="region"] {
+      display: contents;
+    }
+
+    footer {
       display: grid;
       place-items: center;
 
@@ -85,7 +91,7 @@ import Layout from "../../layouts/Layout.astro";
       }
     }
 
-    > progress {
+    progress {
       appearance: none;
       block-size: 5px;
       border: none;
@@ -113,11 +119,6 @@ import Layout from "../../layouts/Layout.astro";
     scroll-marker-group: after;
     container-type: inline-size;
 
-    /* Reset list styles */
-    list-style-type: none;
-    counter-reset: item;
-
-    /* Styles and layout */
     inline-size: var(--album-size);
 
     display: grid;
@@ -183,7 +184,7 @@ import Layout from "../../layouts/Layout.astro";
       block-size: 1lh;
     }
 
-    & > li {
+    .carousel__slide {
       animation: offscreen-inert linear both;
       animation-timeline: view(x);
 
diff --git a/carousels-gallery/src/pages/horizontal/pages.astro b/carousels-gallery/src/pages/horizontal/pages.astro
index beff4d7..123d6bb 100644
--- a/carousels-gallery/src/pages/horizontal/pages.astro
+++ b/carousels-gallery/src/pages/horizontal/pages.astro
@@ -20,24 +20,61 @@ import Layout from "../../layouts/Layout.astro";
       </p>
     </header>
 
-    <ul class="carousel scroll-markers scroll-buttons">
-      <li tabindex="0"><p>1</p></li>
-      <li tabindex="0"><p>2</p></li>
-      <li tabindex="0"><p>3</p></li>
-      <li tabindex="0"><p>4</p></li>
-      <li tabindex="0"><p>5</p></li>
-      <li tabindex="0"><p>6</p></li>
-      <li tabindex="0"><p>7</p></li>
-      <li tabindex="0"><p>8</p></li>
-      <li tabindex="0"><p>9</p></li>
-      <li tabindex="0"><p>10</p></li>
-      <li tabindex="0"><p>11</p></li>
-      <li tabindex="0"><p>12</p></li>
-      <li tabindex="0"><p>13</p></li>
-      <li tabindex="0"><p>14</p></li>
-      <li tabindex="0"><p>15</p></li>
-      <li tabindex="0"><p>16</p></li>
-    </ul>
+    <div role="region" aria-label="Paged carousel demo">
+      <div
+        class="carousel carousel--scroll-markers carousel--scroll-buttons carousel--offscreen-inert"
+        aria-live="polite"
+      >
+        <div class="carousel__slide">
+          <p aria-label="Slide 1">1</p>
+        </div>
+        <div class="carousel__slide">
+          <p aria-label="Slide 2">2</p>
+        </div>
+        <div class="carousel__slide">
+          <p aria-label="Slide 3">3</p>
+        </div>
+        <div class="carousel__slide">
+          <p aria-label="Slide 4">4</p>
+        </div>
+        <div class="carousel__slide">
+          <p aria-label="Slide 5">5</p>
+        </div>
+        <div class="carousel__slide">
+          <p aria-label="Slide 6">6</p>
+        </div>
+        <div class="carousel__slide">
+          <p aria-label="Slide 7">7</p>
+        </div>
+        <div class="carousel__slide">
+          <p aria-label="Slide 8">8</p>
+        </div>
+        <div class="carousel__slide">
+          <p aria-label="Slide 9">9</p>
+        </div>
+        <div class="carousel__slide">
+          <p aria-label="Slide 10">10</p>
+        </div>
+        <div class="carousel__slide">
+          <p aria-label="Slide 11">11</p>
+        </div>
+        <div class="carousel__slide">
+          <p aria-label="Slide 12">12</p>
+        </div>
+        <div class="carousel__slide">
+          <p aria-label="Slide 13">13</p>
+        </div>
+        <div class="carousel__slide">
+          <p aria-label="Slide 14">14</p>
+        </div>
+        <div class="carousel__slide">
+          <p aria-label="Slide 15">15</p>
+        </div>
+        <div class="carousel__slide">
+          <p aria-label="Slide 16">16</p>
+        </div>
+      </div>
+    </div>
   </section>
 
   <style>
@@ -51,8 +88,7 @@ import Layout from "../../layouts/Layout.astro";
       list-style-type: none;
       counter-reset: item;
 
-      /* Styles and layout */
-      container-type: size scroll-state;
+        container-type: size scroll-state;
       inline-size: 1024px;
       max-inline-size: 100cqi;
       block-size: var(--size-content-1);
@@ -62,7 +98,7 @@ import Layout from "../../layouts/Layout.astro";
       }
 
       &::column::scroll-marker {
-        content: " ";
+        content: "";
         aspect-ratio: 1;
         border-radius: var(--radius-round);
         animation: scale-in-and-out linear both;
@@ -84,7 +120,7 @@ import Layout from "../../layouts/Layout.astro";
         outline: 2px solid var(--link);
       }
 
-      & > li {
+      .carousel__slide {
         scroll-snap-align: none;
         background: light-dark(white, var(--surface-2));
         padding: 0;
diff --git a/carousels-gallery/src/pages/horizontal/product.astro b/carousels-gallery/src/pages/horizontal/product.astro
index 9f2048b..358311d 100644
--- a/carousels-gallery/src/pages/horizontal/product.astro
+++ b/carousels-gallery/src/pages/horizontal/product.astro
@@ -20,13 +20,21 @@ import Layout from "../../layouts/Layout.astro";
       </p>
     </header>
 
-    <div class="product-carousel">
-      <ul class="carousel scroll-markers">
-        <li
+    <div
+      class="product-carousel"
+      role="region"
+      aria-label="Product carousel demo"
+    >
+      <div
+        class="carousel carousel--scroll-markers carousel--unsnapped-inert"
+        aria-live="polite"
+      >
+        <div
+          class="carousel__slide"
           style="--img: url(/carousel/fold-1.png)"
-          data-accessible-preview="Device facing the camera, partially folded"
+          data-label="Device facing the camera, partially folded"
         >
-          <picture>
+          <picture role="tabpanel" aria-label="Slide 1">
             <img
               src="/carousel/fold-1.png"
               alt="Device facing the camera, partially folded"
@@ -35,12 +43,13 @@ import Layout from "../../layouts/Layout.astro";
               loading="lazy"
             />
           </picture>
-        </li>
-        <li
+        </div>
+        <div
+          class="carousel__slide"
           style="--img: url(/carousel/fold-2.png)"
-          data-accessible-preview="Device viewed from the side"
+          data-label="Device viewed from the side"
         >
-          <picture>
+          <picture role="tabpanel" aria-label="Slide 2">
             <img
               src="/carousel/fold-2.png"
               alt="Device viewed from the side"
@@ -49,12 +58,13 @@ import Layout from "../../layouts/Layout.astro";
               loading="lazy"
             />
           </picture>
-        </li>
-        <li
+        </div>
+        <div
+          class="carousel__slide"
           style="--img: url(/carousel/fold-3.png)"
-          data-accessible-preview="Device viewed from the back"
+          data-label="Device viewed from the back"
         >
-          <picture>
+          <picture role="tabpanel" aria-label="Slide 3">
             <img
               src="/carousel/fold-3.png"
               alt="Device viewed from the back"
@@ -63,12 +73,13 @@ import Layout from "../../layouts/Layout.astro";
               loading="lazy"
             />
           </picture>
-        </li>
-        <li
+        </div>
+        <div
+          class="carousel__slide"
           style="--img: url(/carousel/fold-4.png)"
-          data-accessible-preview="Device unfolded in landscape mode"
+          data-label="Device unfolded in landscape mode"
         >
-          <picture>
+          <picture role="tabpanel" aria-label="Slide 4">
             <img
               src="/carousel/fold-4.png"
               alt="Device unfolded in landscape mode"
@@ -77,12 +88,13 @@ import Layout from "../../layouts/Layout.astro";
               loading="lazy"
             />
           </picture>
-        </li>
-        <li
+        </div>
+        <div
+          class="carousel__slide"
           style="--img: url(/carousel/fold-5.png)"
-          data-accessible-preview="Device partially folder and sitting on the table with the upper screen oriented towards the camera"
+          data-label="Device partially folder and sitting on the table with the upper screen oriented towards the camera"
         >
-          <picture>
+          <picture role="tabpanel" aria-label="Slide 5">
             <img
               src="/carousel/fold-5.png"
               alt="Device partially folder and sitting on the table with the upper screen oriented towards the camera"
@@ -91,8 +103,8 @@ import Layout from "../../layouts/Layout.astro";
               loading="lazy"
             />
           </picture>
-        </li>
-      </ul>
+        </div>
+      </div>
     </div>
   </section>
 
@@ -138,7 +150,7 @@ import Layout from "../../layouts/Layout.astro";
         block-size: auto;
       }
 
-      & > li {
+      .carousel__slide {
         padding: 0;
         border-radius: var(--radius-4);
         background: var(--surface-2);
@@ -147,8 +159,8 @@ import Layout from "../../layouts/Layout.astro";
 
         &::scroll-marker {
           /* make the marker meaningful for screen readers */
-          content: "" / attr(data-accessible-preview);
-          
+          content: "" / attr(data-label);
+
           background-color: var(--surface-2);
           background-image: var(--img);
           background-size: contain;
diff --git a/carousels-gallery/src/pages/horizontal/series.astro b/carousels-gallery/src/pages/horizontal/series.astro
index a21732b..f6c1446 100644
--- a/carousels-gallery/src/pages/horizontal/series.astro
+++ b/carousels-gallery/src/pages/horizontal/series.astro
@@ -21,380 +21,376 @@ import Layout from "../../layouts/Layout.astro";
       </p>
     </header>
 
-    <!-- todo: switch to a counter -->
-    <ul class="carousel">
-      <li class="season-start" data-season-content="1">
-        <figure class="episode seen">
-          <img
-            src="https://picsum.photos/seed/Freedom/300/200"
-            width="350"
-            height="233"
-            alt="a field of tall grass with a blue sky"
-            tabindex="0"
-          />
-          <figcaption class="episode-details">
-            <p class="episode-number">Episode 1</p>
-            <p class="episode-title">Freedom Day</p>
-            <p class="episode-description">
-              Lorem ipsum dolor sit amet, consectetur adipisicing elit.
-            </p>
-            <p class="episode-meta">
-              <span>44min</span>
-              <time>May 5, 2023</time>
-              <span class="episode-badge">TV-MA</span>
-              <span class="episode-badge">HDR</span>
-            </p>
-          </figcaption>
-        </figure>
-      </li>
-      <li>
-        <figure class="episode seen">
-          <img
-            src="https://picsum.photos/seed/holston/300/200"
-            width="350"
-            height="233"
-            alt="a grass field with a rusty oil barrel"
-            tabindex="0"
-          />
-          <figcaption class="episode-details">
-            <p class="episode-number">Episode 2</p>
-            <p class="episode-title">Holston's Pick</p>
-            <p class="episode-description">
-              Lorem ipsum dolor sit amet, consectetur adipisicing elit.
-            </p>
-            <p class="episode-meta">
-              <span>44min</span>
-              <time>May 5, 2023</time>
-              <span class="episode-badge">TV-MA</span>
-              <span class="episode-badge">HDR</span>
-            </p>
-          </figcaption>
-        </figure>
-      </li>
-      <li>
-        <figure class="episode seen">
-          <img
-            src="https://picsum.photos/seed/Machines/300/200"
-            width="350"
-            height="233"
-            alt="The Golden Gate bridge on a foggy day"
-            tabindex="0"
-          />
-          <figcaption class="episode-details">
-            <p class="episode-number">Episode 3</p>
-            <p class="episode-title">Machines</p>
-            <p class="episode-description">
-              Lorem ipsum dolor sit amet, consectetur adipisicing elit.
-            </p>
-            <p class="episode-meta">
-              <span>44min</span>
-              <time>May 12, 2023</time>
-              <span class="episode-badge">TV-MA</span>
-              <span class="episode-badge">HDR</span>
-            </p>
-          </figcaption>
-        </figure>
-      </li>
-      <li>
-        <figure class="episode seen">
-          <img
-            src="https://picsum.photos/seed/truth/300/200"
-            width="350"
-            height="233"
-            alt="A dark rocky, ocean coastline, and a gray sky"
-            tabindex="0"
-          />
-          <figcaption class="episode-details">
-            <p class="episode-number">Episode 4</p>
-            <p class="episode-title">Truth</p>
-            <p class="episode-description">
-              Lorem ipsum dolor sit amet, consectetur adipisicing elit.
-            </p>
-            <p class="episode-meta">
-              <span>44min</span>
-              <time>May 19, 2023</time>
-              <span class="episode-badge">TV-MA</span>
-              <span class="episode-badge">HDR</span>
-            </p>
-          </figcaption>
-        </figure>
-      </li>
-      <li>
-        <figure class="episode seen">
-          <img
-            src="https://picsum.photos/seed/boy/300/200"
-            width="350"
-            height="233"
-            alt="a laptop and a mug of coffee on a desk"
-            tabindex="0"
-          />
-          <figcaption class="episode-details">
-            <p class="episode-number">Episode 5</p>
-            <p class="episode-title">The Janitor's Boy</p>
-            <p class="episode-description">
-              Lorem ipsum dolor sit amet, consectetur adipisicing elit.
-            </p>
-            <p class="episode-meta">
-              <span>44min</span>
-              <time>May 19, 2023</time>
-              <span class="episode-badge">TV-MA</span>
-              <span class="episode-badge">HDR</span>
-            </p>
-          </figcaption>
-        </figure>
-      </li>
-      <li>
-        <figure class="episode seen">
-          <img
-            src="https://picsum.photos/seed/theRelic/300/200"
-            width="350"
-            height="233"
-            alt="Two rusty old cards parked in front of a garage"
-            tabindex="0"
-          />
-          <figcaption class="episode-details">
-            <p class="episode-number">Episode 6</p>
-            <p class="episode-title">The Relic</p>
-            <p class="episode-description">
-              Lorem ipsum dolor sit amet, consectetur adipisicing elit.
-            </p>
-            <p class="episode-meta">
-              <span>44min</span>
-              <time>June 2, 2023</time>
-              <span class="episode-badge">TV-MA</span>
-              <span class="episode-badge">HDR</span>
-            </p>
-          </figcaption>
-        </figure>
-      </li>
-      <li>
-        <figure class="episode seen">
-          <img
-            src="https://picsum.photos/seed/Flamekeepers/300/200"
-            width="350"
-            height="233"
-            alt="A skateboarder shown catching air at a skatepark"
-            tabindex="0"
-          />
-          <figcaption class="episode-details">
-            <p class="episode-number">Episode 7</p>
-            <p class="episode-title">The Flamekeepers</p>
-            <p class="episode-description">
-              Lorem ipsum dolor sit amet, consectetur adipisicing elit.
-            </p>
-            <p class="episode-meta">
-              <span>44min</span>
-              <time>June 9, 2023</time>
-              <span class="episode-badge">TV-MA</span>
-              <span class="episode-badge">HDR</span>
-            </p>
-          </figcaption>
-        </figure>
-      </li>
-      <li>
-        <figure class="episode seen">
-          <img
-            src="https://picsum.photos/seed/Hanna/300/200"
-            width="350"
-            height="233"
-            alt="A dark forest with a ray of sunshine breaking through the trees"
-            tabindex="0"
-          />
-          <figcaption class="episode-details">
-            <p class="episode-number">Episode 8</p>
-            <p class="episode-title">Hanna</p>
-            <p class="episode-description">
-              Lorem ipsum dolor sit amet, consectetur adipisicing elit.
-            </p>
-            <p class="episode-meta">
-              <span>44min</span>
-              <time>June 16, 2023</time>
-              <span class="episode-badge">TV-MA</span>
-              <span class="episode-badge">HDR</span>
-            </p>
-          </figcaption>
-        </figure>
-      </li>
-      <li>
-        <figure class="episode seen">
-          <img
-            src="https://picsum.photos/seed/Getaway/300/200"
-            width="350"
-            height="233"
-            alt="A field of lavender"
-            tabindex="0"
-          />
-          <figcaption class="episode-details">
-            <p class="episode-number">Episode 9</p>
-            <p class="episode-title">The Getaway</p>
-            <p class="episode-description">
-              Lorem ipsum dolor sit amet, consectetur adipisicing elit.
-            </p>
-            <p class="episode-meta">
-              <span>44min</span>
-              <time>June 23, 2023</time>
-              <span class="episode-badge">TV-MA</span>
-              <span class="episode-badge">HDR</span>
-            </p>
-          </figcaption>
-        </figure>
-      </li>
-      <li>
-        <figure class="episode seen">
-          <img
-            src="https://picsum.photos/seed/Outside/300/200"
-            width="350"
-            height="233"
-            alt="A tall corporate tower photographed from the ground looking up"
-            tabindex="0"
-          />
-          <figcaption class="episode-details">
-            <p class="episode-number">Episode 10</p>
-            <p class="episode-title">Outside</p>
-            <p class="episode-description">
-              Lorem ipsum dolor sit amet, consectetur adipisicing elit.
-            </p>
-            <p class="episode-meta">
-              <span>44min</span>
-              <time>June 30, 2023</time>
-              <span class="episode-badge">TV-MA</span>
-              <span class="episode-badge">HDR</span>
-            </p>
-          </figcaption>
-        </figure>
-      </li>
+    <div role="region" aria-label="TV Series carousel demo">
+      <div class="carousel carousel--offscreen-inert" aria-live="polite">
+        <div class="carousel__slide season-start" data-season-content="1">
+          <figure class="episode seen">
+            <img
+              src="https://picsum.photos/seed/Freedom/300/200"
+              width="350"
+              height="233"
+              alt="a field of tall grass with a blue sky"
+              tabindex="0"
+            />
+            <figcaption class="episode-details">
+              <p class="episode-number">Episode 1</p>
+              <p class="episode-title">Freedom Day</p>
+              <p class="episode-description">
+                Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+              </p>
+              <p class="episode-meta">
+                <span>44min</span>
+                <time>May 5, 2023</time>
+                <span class="episode-badge">TV-MA</span>
+                <span class="episode-badge">HDR</span>
+              </p>
+            </figcaption>
+          </figure>
+        </div>
+        <div class="carousel__slide">
+          <figure class="episode seen">
+            <img
+              src="https://picsum.photos/seed/holston/300/200"
+              width="350"
+              height="233"
+              alt="a grass field with a rusty oil barrel"
+              tabindex="0"
+            />
+            <figcaption class="episode-details">
+              <p class="episode-number">Episode 2</p>
+              <p class="episode-title">Holston's Pick</p>
+              <p class="episode-description">
+                Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+              </p>
+              <p class="episode-meta">
+                <span>44min</span>
+                <time>May 5, 2023</time>
+                <span class="episode-badge">TV-MA</span>
+                <span class="episode-badge">HDR</span>
+              </p>
+            </figcaption>
+          </figure>
+        </div>
+        <div class="carousel__slide">
+          <figure class="episode seen">
+            <img
+              src="https://picsum.photos/seed/Engineer/300/200"
+              width="350"
+              height="233"
+              alt="A forested mountain range with a lake in the foreground"
+              tabindex="0"
+            />
+            <figcaption class="episode-details">
+              <p class="episode-number">Episode 3</p>
+              <p class="episode-title">Machines</p>
+              <p class="episode-description">
+                Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+              </p>
+              <p class="episode-meta">
+                <span>44min</span>
+                <time>May 12, 2023</time>
+                <span class="episode-badge">TV-MA</span>
+                <span class="episode-badge">HDR</span>
+              </p>
+            </figcaption>
+          </figure>
+        </div>
+        <div class="carousel__slide">
+          <figure class="episode seen">
+            <img
+              src="https://picsum.photos/seed/truth/300/200"
+              width="350"
+              height="233"
+              alt="A dark rocky, ocean coastline, and a gray sky"
+              tabindex="0"
+            />
+            <figcaption class="episode-details">
+              <p class="episode-number">Episode 4</p>
+              <p class="episode-title">Truth</p>
+              <p class="episode-description">
+                Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+              </p>
+              <p class="episode-meta">
+                <span>44min</span>
+                <time>May 19, 2023</time>
+                <span class="episode-badge">TV-MA</span>
+                <span class="episode-badge">HDR</span>
+              </p>
+            </figcaption>
+          </figure>
+        </div>
+        <div class="carousel__slide">
+          <figure class="episode seen">
+            <img
+              src="https://picsum.photos/seed/boy/300/200"
+              width="350"
+              height="233"
+              alt="a laptop and a mug of coffee on a desk"
+              tabindex="0"
+            />
+            <figcaption class="episode-details">
+              <p class="episode-number">Episode 5</p>
+              <p class="episode-title">The Janitor's Boy</p>
+              <p class="episode-description">
+                Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+              </p>
+              <p class="episode-meta">
+                <span>44min</span>
+                <time>May 19, 2023</time>
+                <span class="episode-badge">TV-MA</span>
+                <span class="episode-badge">HDR</span>
+              </p>
+            </figcaption>
+          </figure>
+        </div>
+        <div class="carousel__slide">
+          <figure class="episode seen">
+            <img
+              src="https://picsum.photos/seed/theRelic/300/200"
+              width="350"
+              height="233"
+              alt="Two rusty old cards parked in front of a garage"
+              tabindex="0"
+            />
+            <figcaption class="episode-details">
+              <p class="episode-number">Episode 6</p>
+              <p class="episode-title">The Relic</p>
+              <p class="episode-description">
+                Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+              </p>
+              <p class="episode-meta">
+                <span>44min</span>
+                <time>June 2, 2023</time>
+                <span class="episode-badge">TV-MA</span>
+                <span class="episode-badge">HDR</span>
+              </p>
+            </figcaption>
+          </figure>
+        </div>
+        <div class="carousel__slide">
+          <figure class="episode seen">
+            <img
+              src="https://picsum.photos/seed/Flamekeepers/300/200"
+              width="350"
+              height="233"
+              alt="A skateboarder shown catching air at a skatepark"
+              tabindex="0"
+            />
+            <figcaption class="episode-details">
+              <p class="episode-number">Episode 7</p>
+              <p class="episode-title">The Flamekeepers</p>
+              <p class="episode-description">
+                Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+              </p>
+              <p class="episode-meta">
+                <span>44min</span>
+                <time>June 9, 2023</time>
+                <span class="episode-badge">TV-MA</span>
+                <span class="episode-badge">HDR</span>
+              </p>
+            </figcaption>
+          </figure>
+        </div>
+        <div class="carousel__slide">
+          <figure class="episode seen">
+            <img
+              src="https://picsum.photos/seed/Hanna/300/200"
+              width="350"
+              height="233"
+              alt="A dark forest with a ray of sunshine breaking through the trees"
+              tabindex="0"
+            />
+            <figcaption class="episode-details">
+              <p class="episode-number">Episode 8</p>
+              <p class="episode-title">Hanna</p>
+              <p class="episode-description">
+                Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+              </p>
+              <p class="episode-meta">
+                <span>44min</span>
+                <time>June 16, 2023</time>
+                <span class="episode-badge">TV-MA</span>
+                <span class="episode-badge">HDR</span>
+              </p>
+            </figcaption>
+          </figure>
+        </div>
+        <div class="carousel__slide">
+          <figure class="episode seen">
+            <img
+              src="https://picsum.photos/seed/Getaway/300/200"
+              width="350"
+              height="233"
+              alt="A field of lavender"
+              tabindex="0"
+            />
+            <figcaption class="episode-details">
+              <p class="episode-number">Episode 9</p>
+              <p class="episode-title">The Getaway</p>
+              <p class="episode-description">
+                Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+              </p>
+              <p class="episode-meta">
+                <span>44min</span>
+                <time>June 23, 2023</time>
+                <span class="episode-badge">TV-MA</span>
+                <span class="episode-badge">HDR</span>
+              </p>
+            </figcaption>
+          </figure>
+        </div>
+        <div class="carousel__slide">
+          <figure class="episode seen">
+            <img
+              src="https://picsum.photos/seed/Outside/300/200"
+              width="350"
+              height="233"
+              alt="A tall corporate tower photographed from the ground looking up"
+              tabindex="0"
+            />
+            <figcaption class="episode-details">
+              <p class="episode-number">Episode 10</p>
+              <p class="episode-title">Outside</p>
+              <p class="episode-description">
+                Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+              </p>
+              <p class="episode-meta">
+                <span>44min</span>
+                <time>June 30, 2023</time>
+                <span class="episode-badge">TV-MA</span>
+                <span class="episode-badge">HDR</span>
+              </p>
+            </figcaption>
+          </figure>
+        </div>
 
-      <li class="season-start" data-season-content="2">
-        <figure class="episode seen">
-          <img
-            src="https://picsum.photos/seed/Engineer/300/200"
-            width="350"
-            height="233"
-            alt="A forested mountain range with a lake in the foreground"
-            tabindex="0"
-          />
-          <figcaption class="episode-details">
-            <p class="episode-number">Episode 1</p>
-            <p class="episode-title">The Engineer</p>
-            <p class="episode-description">
-              Lorem ipsum dolor sit amet, consectetur adipisicing elit.
-            </p>
-            <p class="episode-meta">
-              <span>44min</span>
-              <time>November 15, 2024</time>
-              <span class="episode-badge">TV-MA</span>
-              <span class="episode-badge">HDR</span>
-            </p>
-          </figcaption>
-        </figure>
-      </li>
-      <li>
-        <figure class="episode">
-          <img
-            src="https://picsum.photos/seed/Order/300/200"
-            width="350"
-            height="233"
-            alt="A foggy overview of many mountains"
-            tabindex="0"
-          />
-          <figcaption class="episode-details">
-            <p class="episode-number">Episode 2</p>
-            <p class="episode-title">Order</p>
-            <p class="episode-description">
-              Lorem ipsum dolor sit amet, consectetur adipisicing elit.
-            </p>
-            <p class="episode-meta">
-              <span>44min</span>
-              <time>November 15, 2024</time>
-              <span class="episode-badge">TV-MA</span>
-              <span class="episode-badge">HDR</span>
-            </p>
-          </figcaption>
-        </figure>
-      </li>
-      <li>
-        <figure class="episode">
-          <img
-            src="https://picsum.photos/seed/Solo/300/200"
-            width="350"
-            height="233"
-            alt="A phone on a table"
-            tabindex="0"
-          />
-          <figcaption class="episode-details">
-            <p class="episode-number">Episode 3</p>
-            <p class="episode-title">Solo</p>
-            <p class="episode-description">
-              Lorem ipsum dolor sit amet, consectetur adipisicing elit.
-            </p>
-            <p class="episode-meta">
-              <span>44min</span>
-              <time>November 27, 2024</time>
-              <span class="episode-badge">TV-MA</span>
-              <span class="episode-badge">HDR</span>
-            </p>
-          </figcaption>
-        </figure>
-      </li>
-      <li>
-        <figure class="episode">
-          <img
-            src="https://picsum.photos/seed/Harmonium/300/200"
-            width="350"
-            height="233"
-            alt="A trail in a grassy medow trailing away into the distance"
-            tabindex="0"
-          />
-          <figcaption class="episode-details">
-            <p class="episode-number">Episode 4</p>
-            <p class="episode-title">The Harmonium</p>
-            <p class="episode-description">
-              Lorem ipsum dolor sit amet, consectetur adipisicing elit.
-            </p>
-            <p class="episode-meta">
-              <span>44min</span>
-              <time>December 4, 2024</time>
-              <span class="episode-badge">TV-MA</span>
-              <span class="episode-badge">HDR</span>
-            </p>
-          </figcaption>
-        </figure>
-      </li>
-      <li>
-        <figure class="episode unreleased">
-          <img
-            src="https://picsum.photos/seed/unreleased/300/200"
-            width="350"
-            height="233"
-            alt="A sparse landscape of rolling hills"
-            tabindex="0"
-          />
-          <figcaption class="episode-details">
-            <p class="episode-number">Episode 5</p>
-            <p class="episode-title">Coming Soon</p>
-            <p class="episode-description">
-              Lorem ipsum dolor sit amet, consectetur adipisicing elit.
-            </p>
-            <p class="episode-meta">
-              <span>44min</span>
-              <time>December 11, 2024</time>
-              <span class="episode-badge">TV-MA</span>
-              <span class="episode-badge">HDR</span>
-            </p>
-          </figcaption>
-        </figure>
-      </li>
-    </ul>
+        <div class="carousel__slide season-start" data-season-content="2">
+          <figure class="episode seen">
+            <img
+              src="https://picsum.photos/seed/Order/300/200"
+              width="350"
+              height="233"
+              alt="A foggy overview of many mountains"
+              tabindex="0"
+            />
+            <figcaption class="episode-details">
+              <p class="episode-number">Episode 1</p>
+              <p class="episode-title">The Engineer</p>
+              <p class="episode-description">
+                Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+              </p>
+              <p class="episode-meta">
+                <span>44min</span>
+                <time>November 15, 2024</time>
+                <span class="episode-badge">TV-MA</span>
+                <span class="episode-badge">HDR</span>
+              </p>
+            </figcaption>
+          </figure>
+        </div>
+        <div class="carousel__slide">
+          <figure class="episode">
+            <img
+              src="https://picsum.photos/seed/Machines/300/200"
+              width="350"
+              height="233"
+              alt="The Golden Gate bridge on a foggy day"
+              tabindex="0"
+            />
+            <figcaption class="episode-details">
+              <p class="episode-number">Episode 2</p>
+              <p class="episode-title">Order</p>
+              <p class="episode-description">
+                Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+              </p>
+              <p class="episode-meta">
+                <span>44min</span>
+                <time>November 15, 2024</time>
+                <span class="episode-badge">TV-MA</span>
+                <span class="episode-badge">HDR</span>
+              </p>
+            </figcaption>
+          </figure>
+        </div>
+        <div class="carousel__slide">
+          <figure class="episode">
+            <img
+              src="https://picsum.photos/seed/Solo/300/200"
+              width="350"
+              height="233"
+              alt="A phone on a table"
+              tabindex="0"
+            />
+            <figcaption class="episode-details">
+              <p class="episode-number">Episode 3</p>
+              <p class="episode-title">Solo</p>
+              <p class="episode-description">
+                Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+              </p>
+              <p class="episode-meta">
+                <span>44min</span>
+                <time>November 27, 2024</time>
+                <span class="episode-badge">TV-MA</span>
+                <span class="episode-badge">HDR</span>
+              </p>
+            </figcaption>
+          </figure>
+        </div>
+        <div class="carousel__slide">
+          <figure class="episode">
+            <img
+              src="https://picsum.photos/seed/Harmonium/300/200"
+              width="350"
+              height="233"
+              alt="A trail in a grassy medow trailing away into the distance"
+              tabindex="0"
+            />
+            <figcaption class="episode-details">
+              <p class="episode-number">Episode 4</p>
+              <p class="episode-title">The Harmonium</p>
+              <p class="episode-description">
+                Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+              </p>
+              <p class="episode-meta">
+                <span>44min</span>
+                <time>December 4, 2024</time>
+                <span class="episode-badge">TV-MA</span>
+                <span class="episode-badge">HDR</span>
+              </p>
+            </figcaption>
+          </figure>
+        </div>
+        <div class="carousel__slide">
+          <figure class="episode unreleased">
+            <img
+              src="https://picsum.photos/seed/unreleased/300/200"
+              width="350"
+              height="233"
+              alt="A sparse landscape of rolling hills"
+              tabindex="0"
+            />
+            <figcaption class="episode-details">
+              <p class="episode-number">Episode 5</p>
+              <p class="episode-title">Coming Soon</p>
+              <p class="episode-description">
+                Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+              </p>
+              <p class="episode-meta">
+                <span>44min</span>
+                <time>December 11, 2024</time>
+                <span class="episode-badge">TV-MA</span>
+                <span class="episode-badge">HDR</span>
+              </p>
+            </figcaption>
+          </figure>
+        </div>
+      </div>
+    </div>
   </section>
 </Layout>
 
 <style>
   .carousel {
-    /* Reset list styles */
-    list-style-type: none;
-    counter-reset: item;
-
-    /* Styles and layout */
     inline-size: 100cqi;
     padding-block-start: var(--size-3); /* focus needs the space */
     padding-inline: 5vmin;
@@ -427,9 +423,10 @@ import Layout from "../../layouts/Layout.astro";
       inline-size: 85cqi;
     }
 
-    & > li {
+    .carousel__slide {
       padding: 0;
       position: relative;
+      container-type: scroll-state;
 
       /* scroll to the first unseen item */
       &:nth-child(1 of :has(figure:not(.seen))) {
@@ -504,6 +501,7 @@ import Layout from "../../layouts/Layout.astro";
     > img {
       background-color: var(--surface-3);
       border-radius: var(--radius-2);
+      transition: filter 0.3s var(--ease-3);
 
       @container not scroll-state(snapped: inline) {
         filter: grayscale(1);
diff --git a/carousels-gallery/src/pages/horizontal/slider.astro b/carousels-gallery/src/pages/horizontal/slider.astro
index 924a042..817bce2 100644
--- a/carousels-gallery/src/pages/horizontal/slider.astro
+++ b/carousels-gallery/src/pages/horizontal/slider.astro
@@ -13,73 +13,88 @@ import Layout from "../../layouts/Layout.astro";
       </div>
     </header>
 
-    <div class="carousel scroll-buttons">
-      <div class="slide">
-        <img
-          src="/carousel/flora-1.jpg"
-          alt="A wall of greenery"
-          width="2400"
-          height="1600"
-          loading="lazy"
-        />
-        <div>
-          <h3>We know clients.</h3>
-          <p>
-            Tired of software that's more glitch than glitter? We craft elegant,
-            powerful solutions that not only function flawlessly but also
-            deliver an amazing user experience.
-          </p>
+    <div role="region" aria-label="Slider carousel demo">
+      <div
+        class="carousel carousel--scroll-buttons carousel--unsnapped-inert"
+        aria-live="polite"
+      >
+        <div class="carousel__slide" data-label="Slide 1">
+          <section aria-label="Slide 1">
+            <img
+              src="/carousel/flora-1.jpg"
+              alt="A wall of greenery"
+              width="2400"
+              height="1600"
+              loading="lazy"
+            />
+            <div>
+              <h3>We know clients.</h3>
+              <p>
+                Tired of software that's more glitch than glitter? We craft
+                elegant, powerful solutions that not only function flawlessly
+                but also deliver an amazing user experience.
+              </p>
+            </div>
+          </section>
         </div>
-      </div>
-      <div class="slide">
-        <img
-          src="/carousel/flora-2.jpg"
-          alt="Up close monstera leaves"
-          width="2400"
-          height="1602"
-          loading="lazy"
-        />
-        <div>
-          <h3>Innovate. Automate. Elevate.</h3>
-          <p>
-            Don't just keep up – surge ahead. We help you harness the power of
-            innovation and automation to streamline your operations, boost
-            efficiency, and elevate your business to new heights.
-          </p>
+        <div class="carousel__slide" data-label="Slide 2">
+          <section aria-label="Slide 2">
+            <img
+              src="/carousel/flora-2.jpg"
+              alt="Up close monstera leaves"
+              width="2400"
+              height="1602"
+              loading="lazy"
+            />
+            <div>
+              <h3>Innovate. Automate. Elevate.</h3>
+              <p>
+                Don't just keep up – surge ahead. We help you harness the power
+                of innovation and automation to streamline your operations,
+                boost efficiency, and elevate your business to new heights.
+              </p>
+            </div>
+          </section>
         </div>
-      </div>
-      <div class="slide">
-        <img
-          src="/carousel/flora-3.jpg"
-          alt="A bed of plant leaves"
-          width="2400"
-          height="1800"
-          loading="lazy"
-        />
-        <div>
-          <h3>Your Vision, Our Code, Limitless Possibilities.</h3>
-          <p>
-            Every great idea starts with a vision. We transform your vision into
-            reality with cutting-edge software solutions tailored to your unique
-            needs. Let's unlock limitless possibilities together.
-          </p>
+        <div class="carousel__slide" data-label="Slide 3">
+          <section aria-label="Slide 3">
+            <img
+              src="/carousel/flora-3.jpg"
+              alt="A bed of plant leaves"
+              width="2400"
+              height="1800"
+              loading="lazy"
+            />
+            <div>
+              <h3>Your Vision, Our Code, Limitless Possibilities.</h3>
+              <p>
+                Every great idea starts with a vision. We transform your vision
+                into reality with cutting-edge software solutions tailored to
+                your unique needs. Let's unlock limitless possibilities
+                together.
+              </p>
+            </div>
+          </section>
         </div>
-      </div>
-      <div class="slide">
-        <img
-          src="/carousel/flora-4.jpg"
-          alt="A jungle picture of ferns and other green plantlife"
-          width="2400"
-          height="1598"
-          loading="lazy"
-        />
-        <div>
-          <h3>Software Solutions,<br />Simplified.</h3>
-          <p>
-            Say goodbye to complex, clunky software. We believe in simplicity
-            without compromise. Our intuitive solutions are designed to make
-            your life easier, so you can focus on what matters most.
-          </p>
+        <div class="carousel__slide" data-label="Slide 4">
+          <section aria-label="Slide 4">
+            <img
+              src="/carousel/flora-4.jpg"
+              alt="A jungle picture of ferns and other green plantlife"
+              width="2400"
+              height="1598"
+              loading="lazy"
+            />
+            <div>
+              <h3>Software Solutions,<br />Simplified.</h3>
+              <p>
+                Say goodbye to complex, clunky software. We believe in
+                simplicity without compromise. Our intuitive solutions are
+                designed to make your life easier, so you can focus on what
+                matters most.
+              </p>
+            </div>
+          </section>
         </div>
       </div>
     </div>
@@ -103,65 +118,70 @@ import Layout from "../../layouts/Layout.astro";
         inline-size: 50cqi;
       }
 
-      > * {
-        scroll-snap-align: center;
-        background: black;
+      .carousel__slide {
         display: grid;
+        scroll-snap-align: center;
+        container-type: scroll-state;
 
         > * {
-          grid-area: 1 / 1;
-        }
-
-        > img {
-          opacity: 0.3;
-          inline-size: 100%;
-          block-size: 100%;
-          max-block-size: 100svh;
-          object-fit: cover;
-
-          transition: opacity 0.3s var(--ease-3);
+          background: black;
+          display: grid;
 
-          @container not scroll-state(snapped: inline) {
-            opacity: 0;
+          > * {
+            grid-area: 1 / 1;
           }
-        }
-
-        > div {
-          z-index: 1;
-          display: grid;
-          gap: var(--size-5);
-          color: white;
-          place-self: center start;
-          margin-inline-start: 15cqi;
 
-          > h3 {
-            font-family: var(--font-transitional);
-            font-size: var(--font-size-7);
+          > img {
+            opacity: 0.3;
+            inline-size: 100%;
+            block-size: 100%;
+            max-block-size: 100svh;
+            object-fit: cover;
 
-            transition:
-              transform 1.1s var(--ease-out-5) 0.3s,
-              opacity 1.1s var(--ease-out-5) 0.3s;
+            transition: opacity 0.3s var(--ease-3);
 
             @container not scroll-state(snapped: inline) {
               opacity: 0;
-              transform: translateY(30px);
             }
           }
 
-          > p {
-            color: var(--gray-4);
-            max-inline-size: var(--size-content-2);
-            font-size: var(--font-size-4);
-            font-weight: 200;
-            line-height: 1.75;
-
-            transition:
-              transform 1.1s var(--ease-out-5) 0.35s,
-              opacity 1.1s var(--ease-out-5) 0.35s;
+          > div {
+            z-index: 1;
+            display: grid;
+            gap: var(--size-5);
+            color: white;
+            place-self: center start;
+            margin-inline-start: 15cqi;
+
+            > h3 {
+              font-family: var(--font-transitional);
+              font-size: var(--font-size-7);
+
+              transition:
+                transform 1.1s var(--ease-out-5) 0.3s,
+                opacity 1.1s var(--ease-out-5) 0.3s;
+
+              @container not scroll-state(snapped: inline) {
+                opacity: 0;
+                transform: translateY(30px);
+              }
+            }
 
-            @container not scroll-state(snapped: inline) {
-              opacity: 0;
-              transform: translateY(30px);
+            > p {
+              color: var(--gray-4);
+              max-inline-size: var(--size-content-2);
+              font-size: var(--font-size-4);
+              font-weight: 200;
+              line-height: 1.75;
+
+              transition:
+                transform 1.1s var(--ease-out-5) 0.35s,
+                opacity 1.1s var(--ease-out-5) 0.35s;
+
+              @container not scroll-state(snapped: inline) {
+                opacity: 0;
+                transform: translateY(30px);
+              }
             }
           }
         }
diff --git a/carousels-gallery/src/pages/horizontal/tabs.astro b/carousels-gallery/src/pages/horizontal/tabs.astro
index 9920919..82fd3d0 100644
--- a/carousels-gallery/src/pages/horizontal/tabs.astro
+++ b/carousels-gallery/src/pages/horizontal/tabs.astro
@@ -17,15 +17,15 @@ import Layout from "../../layouts/Layout.astro";
         text inside.
       </p>
       <p>
-        See also <a href="/carousel/horizontal/scrollspy/">Scrollspy</a>
+        See also <a href="/carousel/vertical/scroll-spy/">Scrollspy</a>
         and <a href="/carousel/horizontal/series/">TV Series</a>.
       </p>
     </header>
 
-    <div class="carousel tabs">
-      <div aria-label="Main Section" class="carousel--snap">
-        <div class="carousel--scroller">
-          <section>
+    <div role="region" aria-label="Tab carousel demo">
+      <div class="carousel carousel--unsnapped-inert" aria-live="polite">
+        <div class="carousel__slide" data-label="Main Section">
+          <section role="tabpanel" aria-label="Main Section">
             <p>
               Proin sodales condimentum felis, mattis tristique sem porttitor
               vitae. Suspendisse id condimentum orci. Interdum et malesuada
@@ -50,11 +50,8 @@ import Layout from "../../layouts/Layout.astro";
             </p>
           </section>
         </div>
-      </div>
-
-      <div aria-label="Details Section" class="carousel--snap">
-        <div class="carousel--scroller">
-          <section>
+        <div class="carousel__slide" data-label="Details Section">
+          <section role="tabpanel" aria-label="Details Section">
             <p>
               Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem
               id cupiditate distinctio hic eum blanditiis in, temporibus itaque
@@ -75,11 +72,8 @@ import Layout from "../../layouts/Layout.astro";
             </p>
           </section>
         </div>
-      </div>
-
-      <div aria-label="Follow Up Section" class="carousel--snap">
-        <div class="carousel--scroller">
-          <section>
+        <div class="carousel__slide" data-label="Follow-up Section">
+          <section role="tabpanel" aria-label="Follow-up Section">
             <p>
               Nam ex leo, auctor vitae lectus ac, imperdiet viverra nisi.
               Maecenas augue arcu, vulputate nec posuere ac, iaculis dignissim
@@ -103,7 +97,7 @@ import Layout from "../../layouts/Layout.astro";
     </div>
 
     <style>
-      .tabs {
+      .carousel {
         overflow-y: hidden;
         scroll-marker-group: before;
         scroll-behavior: auto;
@@ -140,60 +134,53 @@ import Layout from "../../layouts/Layout.astro";
           align-items: end;
           justify-content: start;
         }
+      }
+
+      .carousel__slide {
+        scroll-snap-align: start;
+        container-type: scroll-state;
+        max-inline-size: initial;
+        padding: 0;
+        overflow-y: auto;
+        max-block-size: 10lh;
+
+        &:focus-visible {
+          outline-offset: -5px;
+        }
+
+        > section {
+          display: grid;
+          gap: var(--size-3);
+          padding: var(--size-3);
+          background: light-dark(white, var(--surface-1));
+        }
+
+        &::scroll-marker {
+          content: attr(data-label);
+          text-decoration: none;
+          -webkit-tap-highlight-color: transparent;
+          white-space: nowrap;
+          background: light-dark(white, var(--surface-2));
+          border: 1px solid var(--surface-2);
+          border-bottom: none;
+          padding-inline: var(--size-4);
+          padding-block: var(--size-2);
+          border-top-left-radius: var(--radius-2);
+          border-top-right-radius: var(--radius-2);
+        }
+
+        &::scroll-marker:not(:target-current, :focus-visible) {
+          color: var(--text-2);
+        }
 
-        .carousel--snap {
-          scroll-snap-align: start;
-          container-type: scroll-state;
-
-          &::scroll-marker {
-            content: attr(aria-label);
-            text-decoration: none;
-            -webkit-tap-highlight-color: transparent;
-            white-space: nowrap;
-            background: light-dark(white, var(--surface-2));
-            border: 1px solid var(--surface-2);
-            border-bottom: none;
-            padding-inline: var(--size-4);
-            padding-block: var(--size-2);
-            border-top-left-radius: var(--radius-2);
-            border-top-right-radius: var(--radius-2);
-          }
-
-          &::scroll-marker:not(:target-current, :focus-visible) {
-            color: var(--text-2);
-          }
-
-          &::scroll-marker:target-current {
-            color: var(--text-1);
-            border-bottom: 2px solid var(--link);
-          }
-
-          &::scroll-marker:focus-visible {
-            outline-offset: 2px;
-            outline: 2px solid var(--link);
-          }
+        &::scroll-marker:target-current {
+          color: var(--text-1);
+          border-bottom: 2px solid var(--link);
         }
 
-        .carousel--scroller {
-          overflow-y: auto;
-          max-block-size: 10lh;
-
-          @container not scroll-state(snapped) {
-            interactivity: inert;
-            opacity: 0.5;
-          }
-
-          &:focus-visible {
-            outline-offset: -5px;
-          }
-
-          > section {
-            display: grid;
-            gap: var(--size-3);
-            padding: var(--size-3);
-            transition: opacity 0.3s var(--ease-3);
-            background: light-dark(white, var(--surface-1));
-          }
+        &::scroll-marker:focus-visible {
+          outline-offset: 2px;
+          outline: 2px solid var(--link);
         }
       }
 
diff --git a/carousels-gallery/src/pages/horizontal/testimonials.astro b/carousels-gallery/src/pages/horizontal/testimonials.astro
index db1a40b..0945594 100644
--- a/carousels-gallery/src/pages/horizontal/testimonials.astro
+++ b/carousels-gallery/src/pages/horizontal/testimonials.astro
@@ -13,59 +13,62 @@ import Layout from "../../layouts/Layout.astro";
         <span>Anchor</span>
       </div>
       <p>
-        <b>Conditional scroll buttons</b> featured in this demo. Hidden, unless
-        the visiting user has a hover enabled device and is actively hovering the
-        carousel or keyboard focus is active within the carousel.
+        <b>Conditional scroll buttons</b> featured in this demo. Hidden, unless the
+        visiting user has a hover enabled device and is actively hovering the carousel
+        or keyboard focus is active within the carousel.
       </p>
     </header>
 
-    <ul class="carousel scroll-markers scroll-buttons">
-      <li>
-        <figure class="testimonial">
-          <blockquote cite="https://www.huxley.net/bnw/four.html">
-            <p>
-              Words can be like X-rays, if you use them properly—they’ll go
-              through anything. You read and you’re pierced.
-            </p>
-          </blockquote>
-          <figcaption>
-            —Aldous Huxley, <cite>Brave New World</cite>
-          </figcaption>
-        </figure>
-      </li>
-      <li>
-        <figure class="testimonial">
-          <blockquote cite="https://www.huxley.net/bnw/four.html">
-            <p>
-              Words can be like X-rays, if you use them properly—they’ll go
-              through anything. You read and you’re pierced.
-            </p>
-          </blockquote>
-          <figcaption>
-            —Aldous Huxley, <cite>Brave New World</cite>
-          </figcaption>
-        </figure>
-      </li>
-      <li>
-        <figure class="testimonial">
-          <blockquote cite="https://www.huxley.net/bnw/four.html">
-            <p>
-              Words can be like X-rays, if you use them properly—they’ll go
-              through anything. You read and you’re pierced.
-            </p>
-          </blockquote>
-          <figcaption>
-            —Aldous Huxley, <cite>Brave New World</cite>
-          </figcaption>
-        </figure>
-      </li>
-    </ul>
+    <div role="region" aria-label="Testimonials carousel demo">
+      <div
+        class="carousel carousel--scroll-markers carousel--scroll-buttons carousel--unsnapped-inert"
+        aria-live="polite"
+      >
+        <div class="carousel__slide" data-label="Slide 1">
+          <figure class="testimonial" role="tabpanel" aria-label="Slide 1">
+            <blockquote cite="https://www.huxley.net/bnw/four.html">
+              <p>
+                Words can be like X-rays, if you use them properly—they’ll go
+                through anything. You read and you’re pierced.
+              </p>
+            </blockquote>
+            <figcaption>
+              —Aldous Huxley, <cite>Brave New World</cite>
+            </figcaption>
+          </figure>
+        </div>
+        <div class="carousel__slide" data-label="Slide 2">
+          <figure class="testimonial" role="tabpanel" aria-label="Slide 2">
+            <blockquote cite="https://www.huxley.net/bnw/four.html">
+              <p>
+                Words can be like X-rays, if you use them properly—they’ll go
+                through anything. You read and you’re pierced.
+              </p>
+            </blockquote>
+            <figcaption>
+              —Aldous Huxley, <cite>Brave New World</cite>
+            </figcaption>
+          </figure>
+        </div>
+        <div class="carousel__slide" data-label="Slide 3">
+          <figure class="testimonial" role="tabpanel" aria-label="Slide 3">
+            <blockquote cite="https://www.huxley.net/bnw/four.html">
+              <p>
+                Words can be like X-rays, if you use them properly—they’ll go
+                through anything. You read and you’re pierced.
+              </p>
+            </blockquote>
+            <figcaption>
+              —Aldous Huxley, <cite>Brave New World</cite>
+            </figcaption>
+          </figure>
+        </div>
+      </div>
+    </div>
   </section>
 
   <style>
-    ul {
-      /* Reset list styles */
-      list-style-type: none;
+    .carousel {
       counter-reset: item;
       margin-block-end: var(--size-7);
       padding-inline: 0;
@@ -89,11 +92,12 @@ import Layout from "../../layouts/Layout.astro";
       &::scroll-button(right) {
         position-area: var(--_inner);
       }
+    }
 
-      & > li {
-        scroll-snap-align: center;
-        padding: 0;
-      }
+    .carousel__slide {
+      container-type: scroll-state;
+      scroll-snap-align: center;
+      padding: 0;
     }
 
     .testimonial {
diff --git a/carousels-gallery/src/pages/horizontal/video.astro b/carousels-gallery/src/pages/horizontal/video.astro
index 20e05fa..edacf98 100644
--- a/carousels-gallery/src/pages/horizontal/video.astro
+++ b/carousels-gallery/src/pages/horizontal/video.astro
@@ -20,59 +20,61 @@ import Layout from "../../layouts/Layout.astro";
       </p>
     </header>
 
-    <ul class="carousel">
-      <li>
-        <figure class="parallax-item">
-          <video
-            width="1280"
-            height="720"
-            src="/carousel/turtle.mp4"
-            autoplay
-            muted
-            loop></video>
-          <figcaption>It's a turtle!</figcaption>
-        </figure>
-      </li>
-
-      <li>
-        <figure class="parallax-item">
-          <video
-            width="1280"
-            height="720"
-            src="/carousel/snow.mp4"
-            autoplay
-            muted
-            loop></video>
-          <figcaption>Falling Snow</figcaption>
-        </figure>
-      </li>
-
-      <li>
-        <figure class="parallax-item">
-          <video
-            width="1280"
-            height="720"
-            src="/carousel/wheel.mp4"
-            autoplay
-            muted
-            loop></video>
-          <figcaption>Ferris Wheel</figcaption>
-        </figure>
-      </li>
-
-      <li>
-        <figure class="parallax-item">
-          <video
-            width="1280"
-            height="720"
-            src="/carousel/chameleon.mp4"
-            autoplay
-            muted
-            loop></video>
-          <figcaption>I See You</figcaption>
-        </figure>
-      </li>
-    </ul>
+    <div role="region" aria-label="Video carousel demo">
+      <div class="carousel carousel--unsnapped-inert" aria-live="polite">
+        <div class="carousel__slide" data-label="Slide 1">
+          <figure class="parallax-item" role="tabpanel" aria-label="Slide 1">
+            <video
+              width="1280"
+              height="720"
+              src="/carousel/turtle.mp4"
+              autoplay
+              muted
+              loop></video>
+            <figcaption>It's a turtle!</figcaption>
+          </figure>
+        </div>
+
+        <div class="carousel__slide" data-label="Slide 2">
+          <figure class="parallax-item" role="tabpanel" aria-label="Slide 2">
+            <video
+              width="1280"
+              height="720"
+              src="/carousel/snow.mp4"
+              autoplay
+              muted
+              loop></video>
+            <figcaption>Falling Snow</figcaption>
+          </figure>
+        </div>
+
+        <div class="carousel__slide" data-label="Slide 3">
+          <figure class="parallax-item" role="tabpanel" aria-label="Slide 3">
+            <video
+              width="1280"
+              height="720"
+              src="/carousel/wheel.mp4"
+              autoplay
+              muted
+              loop></video>
+            <figcaption>Ferris Wheel</figcaption>
+          </figure>
+        </div>
+
+        <div class="carousel__slide" data-label="Slide 4">
+          <figure class="parallax-item" role="tabpanel" aria-label="Slide 4">
+            <video
+              width="1280"
+              height="720"
+              src="/carousel/chameleon.mp4"
+              autoplay
+              muted
+              loop></video>
+            <figcaption>I See You</figcaption>
+          </figure>
+        </div>
+      </div>
+    </div>
     <div class="fixed-logo">
       <img
         src="/carousel/googletv-logo.svg"
@@ -152,7 +154,7 @@ import Layout from "../../layouts/Layout.astro";
       inline-size: min(80cqi, 1280px);
     }
 
-    > li {
+    .carousel__slide {
       scroll-snap-stop: always;
 
       counter-increment: page;
diff --git a/carousels-gallery/src/pages/horizontal/virtualization.astro b/carousels-gallery/src/pages/horizontal/virtualization.astro
deleted file mode 100644
index 3a92130..0000000
--- a/carousels-gallery/src/pages/horizontal/virtualization.astro
+++ /dev/null
@@ -1,126 +0,0 @@
----
-import Layout from "../../layouts/Layout.astro";
----
-
-<Layout title="Carousel Gallery">
-  <section>
-    <header>
-      <h2>Virtualized List</h2>
-      <div class="tags">
-        <span>Scroll Buttons</span>
-        <span>Scroll Markers</span>
-        <span>Scroll-State Queries</span>
-        <span>Lazy loading</span>
-        <span>Anchor</span>
-        <span>content-visibility</span>
-        <span>interactivity: inert</span>
-      </div>
-      <p>
-        1,000 items: virtualized with <code>content-visibility</code> with
-       lazy loaded images.
-      </p>
-    </header>
-
-    <ul class="carousel scroll-markers scroll-buttons">
-      {
-        Array.from({ length: 1000 }).map((_, i) => (
-          <li tabindex="0">
-            <figure>
-              <img
-                src={`https://picsum.photos/seed/${i + 1}/400/300`}
-                width="400"
-                height="300"
-                alt={`Image ${i}`}
-                loading="lazy"
-              />
-              <figcaption>{i + 1}</figcaption>
-            </figure>
-          </li>
-        ))
-      }
-    </ul>
-  </section>
-</Layout>
-
-<style>
-  /* must be 20% in view or else inert */
-  @keyframes offscreen-inert {
-    entry 0%,
-    entry 19%,
-    exit 100% {
-      interactivity: inert;
-      opacity: 0.25;
-    }
-    entry 20%,
-    exit 99% {
-      interactivity: auto;
-      opacity: 1;
-    }
-  }
-
-  .carousel {
-    /* Reset list styles */
-    list-style-type: none;
-    counter-reset: item;
-
-    /* Styles and layout */
-    inline-size: 100cqi;
-
-    display: grid;
-    grid-auto-flow: column;
-    grid-auto-columns: var(--size-content-1);
-    gap: var(--size-4);
-    padding-inline: 5vmin;
-    padding-block: var(--size-2);
-    scroll-padding-inline: 5vmin;
-
-    /* debug */
-    scrollbar-width: thin;
-
-    &::before,
-    &::after {
-      content: "";
-      display: block;
-      inline-size: 85cqi;
-    }
-
-    &::scroll-button(left),
-    &::scroll-button(right) {
-      position-area: var(--_inner);
-    }
-
-    & > li {
-      contain-intrinsic-inline-size: var(--size-content-1);
-      content-visibility: auto;
-
-      animation: offscreen-inert linear both;
-      animation-timeline: view(x);
-
-      background: light-dark(white, var(--surface-2));
-      padding: 0;
-
-      display: inline-flex;
-      place-content: start;
-
-      border: 1px solid var(--surface-3);
-      box-shadow: var(--shadow-2);
-      border-radius: var(--radius-2);
-
-      figcaption {
-        font-family: var(--font-antique);
-        font-size: var(--font-size-5);
-        transition: color 1s var(--ease-3);
-      }
-
-      figure {
-        gap: 0;
-      }
-
-      @container scroll-state(snapped: inline) {
-        figcaption {
-          color: var(--link);
-        }
-      }
-    }
-  }
-</style>
diff --git a/carousels-gallery/src/pages/horizontal/weather.astro b/carousels-gallery/src/pages/horizontal/weather.astro
index 9046c4e..f1daf26 100644
--- a/carousels-gallery/src/pages/horizontal/weather.astro
+++ b/carousels-gallery/src/pages/horizontal/weather.astro
@@ -17,77 +17,86 @@ import Layout from "../../layouts/Layout.astro";
       </p>
     </header>
 
-    <ul class="carousel scroll-markers">
-      <li class="weather-card">
-        <h3>Today 81° / 58°</h3>
-        <p>
-          <svg
-            aria-hidden
-            xmlns="http://www.w3.org/2000/svg"
-            width="32"
-            height="32"
-            viewBox="0 0 72 72"
-            ><path
-              fill="#fcea2b"
-              d="M18.458 38.68c-5.417-2.593-8.903-9.198-7.25-12.825c1.696-3.72 6.313-8.266 12.555-6.1s6.472 8.252 6.472 8.252l-.594 2.621l4.687-3.895c.65-.656.542-2.395-.545-2.006l-4.943-1.586l1.513-7.245l-6.547 3.455l-3.03-6.755l-3.266 6.647l-6.424-3.685l1.266 7.295l-7.36.796l5.305 5.16l-5.482 4.972l7.325 1.055l-.348 5.312c.06 1.245 1.293 1.542 2.124 1.076z"
-            ></path><path
-              fill="#fcea2b"
-              d="M30.235 28.007c-.493-4.948-4.668-8.812-9.745-8.812c-5.41 0-9.794 4.385-9.794 9.794c0 3.89 2.267 7.25 5.553 8.83l2.21.86l3.497-.363l1.82-4.613l4.697-2.915l1.482-.415z"
-            ></path><path
-              fill="#fff"
-              d="M22.342 37.713a.81.81 0 0 1-.723.729c-4.621.495-8.176 5.045-8.176 10.584c0 5.87 4.07 10.628 9.092 10.628h34.662c5.516 0 9.989-5.029 9.989-11.231c0-5.945-4.108-10.81-9.305-11.206a.865.865 0 0 1-.796-.698c-1.161-5.962-6.518-10.443-12.85-10.443c-4.116 0-7.782 1.863-10.163 4.828c-.233.29-.623.422-.966.278c-.917-.384-1.884-.57-2.967-.57c-4.09 0-7.449 3.122-7.797 7.101"
-            ></path><g
-              fill="none"
-              stroke="#000"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              ><path
-                stroke-width="1.726"
-                d="m13.533 40.45l-2.907 1.632l1.513-7.245l-7.325-1.056l5.483-4.971l-5.306-5.161l7.361-.796l-1.266-7.295l6.424 3.685l3.266-6.647l3.029 6.755l6.548-3.455l-1.513 7.245l7.325 1.055l-2.656 2.164"
-              ></path><path
-                stroke-width="1.726"
-                d="M16.249 37.819a9.8 9.8 0 0 1-5.553-8.83c0-5.41 4.385-9.794 9.794-9.794c5.077 0 9.252 3.864 9.745 8.812"
-              ></path><path
-                stroke-width="1.817"
-                d="M22.342 37.713a.81.81 0 0 1-.723.729c-4.621.495-8.176 5.045-8.176 10.584c0 5.87 4.07 10.628 9.092 10.628h34.662c5.516 0 9.989-5.029 9.989-11.231c0-5.945-4.108-10.81-9.305-11.206a.865.865 0 0 1-.796-.698c-1.161-5.962-6.518-10.443-12.85-10.443c-4.116 0-7.782 1.863-10.163 4.828c-.233.29-.623.422-.966.278c-.917-.384-1.884-.57-2.967-.57c-4.09 0-7.449 3.122-7.797 7.101"
-              ></path></g
-            ></svg
-          >
-          Partly cloudy
-        </p>
-      </li>
-      <li class="weather-card">
-        <h3>Tomorrow 91° / 78°</h3>
-        <p>
-          <svg
-            aria-hidden
-            xmlns="http://www.w3.org/2000/svg"
-            width="32"
-            height="32"
-            viewBox="0 0 72 72"
-            ><path
-              fill="#FCEA2B"
-              d="m66 36l-10.676 5.182l6.658 9.824l-11.84-.864l.864 11.84l-9.825-6.658L36 66l-5.182-10.676l-9.824 6.658l.864-11.84l-11.84.864l6.658-9.825L6 36l10.677-5.182l-6.659-9.824l11.84.864l-.864-11.84l9.825 6.658L36 6l5.182 10.677l9.824-6.659l-.864 11.84l11.84-.864l-6.658 9.825z"
-            ></path><g
-              fill="none"
-              stroke="#000"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-miterlimit="10"
-              stroke-width="2"
-              ><circle cx="36" cy="35.95" r="19.828"></circle><path
-                d="m66 36l-10.676 5.182l6.658 9.824l-11.84-.864l.864 11.84l-9.825-6.658L36 66l-5.182-10.676l-9.824 6.658l.864-11.84l-11.84.864l6.658-9.825L6 36l10.677-5.182l-6.659-9.824l11.84.864l-.864-11.84l9.825 6.658L36 6l5.182 10.677l9.824-6.659l-.864 11.84l11.84-.864l-6.658 9.825z"
-              ></path></g
-            ></svg
-          >
-          Mostly sunny
-        </p>
-      </li>
-    </ul>
+    <div role="region" aria-label="Weather carousel demo">
+      <div
+        class="carousel carousel--scroll-markers carousel--unsnapped-inert"
+        aria-live="polite"
+      >
+        <div class="carousel__slide" data-label="Slide 1">
+          <div class="weather-card" role="tabpanel" aria-label="Slide 1">
+            <h3>Today 81° / 58°</h3>
+            <p>
+              <svg
+                aria-hidden
+                xmlns="http://www.w3.org/2000/svg"
+                width="32"
+                height="32"
+                viewBox="0 0 72 72"
+                ><path
+                  fill="#fcea2b"
+                  d="M18.458 38.68c-5.417-2.593-8.903-9.198-7.25-12.825c1.696-3.72 6.313-8.266 12.555-6.1s6.472 8.252 6.472 8.252l-.594 2.621l4.687-3.895c.65-.656.542-2.395-.545-2.006l-4.943-1.586l1.513-7.245l-6.547 3.455l-3.03-6.755l-3.266 6.647l-6.424-3.685l1.266 7.295l-7.36.796l5.305 5.16l-5.482 4.972l7.325 1.055l-.348 5.312c.06 1.245 1.293 1.542 2.124 1.076z"
+                ></path><path
+                  fill="#fcea2b"
+                  d="M30.235 28.007c-.493-4.948-4.668-8.812-9.745-8.812c-5.41 0-9.794 4.385-9.794 9.794c0 3.89 2.267 7.25 5.553 8.83l2.21.86l3.497-.363l1.82-4.613l4.697-2.915l1.482-.415z"
+                ></path><path
+                  fill="#fff"
+                  d="M22.342 37.713a.81.81 0 0 1-.723.729c-4.621.495-8.176 5.045-8.176 10.584c0 5.87 4.07 10.628 9.092 10.628h34.662c5.516 0 9.989-5.029 9.989-11.231c0-5.945-4.108-10.81-9.305-11.206a.865.865 0 0 1-.796-.698c-1.161-5.962-6.518-10.443-12.85-10.443c-4.116 0-7.782 1.863-10.163 4.828c-.233.29-.623.422-.966.278c-.917-.384-1.884-.57-2.967-.57c-4.09 0-7.449 3.122-7.797 7.101"
+                ></path><g
+                  fill="none"
+                  stroke="#000"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  ><path
+                    stroke-width="1.726"
+                    d="m13.533 40.45l-2.907 1.632l1.513-7.245l-7.325-1.056l5.483-4.971l-5.306-5.161l7.361-.796l-1.266-7.295l6.424 3.685l3.266-6.647l3.029 6.755l6.548-3.455l-1.513 7.245l7.325 1.055l-2.656 2.164"
+                  ></path><path
+                    stroke-width="1.726"
+                    d="M16.249 37.819a9.8 9.8 0 0 1-5.553-8.83c0-5.41 4.385-9.794 9.794-9.794c5.077 0 9.252 3.864 9.745 8.812"
+                  ></path><path
+                    stroke-width="1.817"
+                    d="M22.342 37.713a.81.81 0 0 1-.723.729c-4.621.495-8.176 5.045-8.176 10.584c0 5.87 4.07 10.628 9.092 10.628h34.662c5.516 0 9.989-5.029 9.989-11.231c0-5.945-4.108-10.81-9.305-11.206a.865.865 0 0 1-.796-.698c-1.161-5.962-6.518-10.443-12.85-10.443c-4.116 0-7.782 1.863-10.163 4.828c-.233.29-.623.422-.966.278c-.917-.384-1.884-.57-2.967-.57c-4.09 0-7.449 3.122-7.797 7.101"
+                  ></path></g
+                ></svg
+              >
+              Partly cloudy
+            </p>
+          </div>
+        </div>
+        <div class="carousel__slide" data-label="Slide 2">
+          <div class="weather-card" role="tabpanel" aria-label="Slide 2">
+            <h3>Tomorrow 91° / 78°</h3>
+            <p>
+              <svg
+                aria-hidden
+                xmlns="http://www.w3.org/2000/svg"
+                width="32"
+                height="32"
+                viewBox="0 0 72 72"
+                ><path
+                  fill="#FCEA2B"
+                  d="m66 36l-10.676 5.182l6.658 9.824l-11.84-.864l.864 11.84l-9.825-6.658L36 66l-5.182-10.676l-9.824 6.658l.864-11.84l-11.84.864l6.658-9.825L6 36l10.677-5.182l-6.659-9.824l11.84.864l-.864-11.84l9.825 6.658L36 6l5.182 10.677l9.824-6.659l-.864 11.84l11.84-.864l-6.658 9.825z"
+                ></path><g
+                  fill="none"
+                  stroke="#000"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-miterlimit="10"
+                  stroke-width="2"
+                  ><circle cx="36" cy="35.95" r="19.828"></circle><path
+                    d="m66 36l-10.676 5.182l6.658 9.824l-11.84-.864l.864 11.84l-9.825-6.658L36 66l-5.182-10.676l-9.824 6.658l.864-11.84l-11.84.864l6.658-9.825L6 36l10.677-5.182l-6.659-9.824l11.84.864l-.864-11.84l9.825 6.658L36 6l5.182 10.677l9.824-6.659l-.864 11.84l11.84-.864l-6.658 9.825z"
+                  ></path></g
+                ></svg
+              >
+              Mostly sunny
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
   </section>
 
   <style>
-    ul {
+    .carousel {
       /* Reset list styles */
       list-style-type: none;
       counter-reset: item;
@@ -115,7 +124,7 @@ import Layout from "../../layouts/Layout.astro";
         display: block;
       }
 
-      & > li {
+      .carousel__slide {
         scroll-snap-align: center;
 
         inline-size: inherit;
@@ -123,12 +132,12 @@ import Layout from "../../layouts/Layout.astro";
         display: grid;
         gap: var(--size-2);
 
-        > h3 {
+        h3 {
           font-size: var(--font-size-4);
           font-weight: 200;
         }
 
-        > p {
+        p {
           display: flex;
           gap: 1ch;
           place-items: center;
diff --git a/carousels-gallery/src/pages/horizontal/wizard.astro b/carousels-gallery/src/pages/horizontal/wizard.astro
index 57c60b3..3d39254 100644
--- a/carousels-gallery/src/pages/horizontal/wizard.astro
+++ b/carousels-gallery/src/pages/horizontal/wizard.astro
@@ -25,50 +25,53 @@ import Layout from "../../layouts/Layout.astro";
       </p>
     </header>
 
-    <ul class="carousel scroll-markers">
-      <li id="step-1">
-        <form>
-          <header>
-            <h2>Onboarding Guide</h2>
-            <p>Let's get started with your name</p>
-          </header>
-
-          <input required type="text" placeholder="Name" />
-          <a class="btn" href="#step-2">Next Step</a>
-        </form>
-      </li>
-      <li id="step-2">
-        <form>
-          <header>
-            <h2>Onboarding Guide</h2>
-            <p>What is your email address?</p>
-          </header>
-
-          <input required type="email" placeholder="Email" />
-          <a class="btn" href="#step-3">Next Step</a>
-        </form>
-      </li>
-      <li id="step-3">
-        <form>
-          <header>
-            <h2>Almost Done!</h2>
-            <p>Review our <a href="#">terms and conditions</a></p>
-          </header>
-
-          <label>
-            <input required type="checkbox" />
-            I agree to the terms and conditions
-          </label>
-          <button type="submit">Finish</button>
-        </form>
-      </li>
-    </ul>
+    <div role="region" aria-label="Wizard carousel demo">
+      <div
+        class="carousel carousel--scroll-markers carousel--unsnapped-inert"
+        aria-live="polite"
+      >
+        <div class="carousel__slide" id="step-1" data-label="Step 1">
+          <form role="tabpanel" aria-label="Step 1">
+            <header>
+              <h2>Onboarding Guide</h2>
+              <p>Let's get started with your name</p>
+            </header>
+
+            <input required type="text" placeholder="Name" />
+            <a class="btn" href="#step-2">Next Step</a>
+          </form>
+        </div>
+        <div class="carousel__slide" id="step-2" data-label="Step 2">
+          <form role="tabpanel" aria-label="Step 2">
+            <header>
+              <h2>Onboarding Guide</h2>
+              <p>What is your email address?</p>
+            </header>
+
+            <input required type="email" placeholder="Email" />
+            <a class="btn" href="#step-3">Next Step</a>
+          </form>
+        </div>
+        <div class="carousel__slide" id="step-3" data-label="Step 3">
+          <form role="tabpanel" aria-label="Step 3">
+            <header>
+              <h2>Almost Done!</h2>
+              <p>Review our <a href="#">terms and conditions</a></p>
+            </header>
+
+            <label>
+              <input required type="checkbox" />
+              I agree to the terms and conditions
+            </label>
+            <button type="submit">Finish</button>
+          </form>
+        </div>
+      </div>
+    </div>
   </section>
 
   <style>
-    ul {
-      /* Reset list styles */
-      list-style-type: none;
+    .carousel {
       counter-reset: item;
       margin-block-end: var(--size-7);
       padding-inline: 0;
@@ -108,7 +111,7 @@ import Layout from "../../layouts/Layout.astro";
         animation-timeline: --carousel-timeline;
       }
 
-      & > li {
+      .carousel__slide {
         scroll-snap-align: center;
         padding: 0;
         counter-increment: carousel-item;
@@ -118,7 +121,7 @@ import Layout from "../../layouts/Layout.astro";
           place-content: center;
           place-items: center;
           background: var(--surface-1);
-          content: counter(carousel-item);
+          content: counter(carousel-item) / attr(data-label);
           font-size: var(--font-size-0);
 
           transition:
diff --git a/carousels-gallery/src/pages/vertical/list.astro b/carousels-gallery/src/pages/vertical/list.astro
index 37b22b4..4aa1a7a 100644
--- a/carousels-gallery/src/pages/vertical/list.astro
+++ b/carousels-gallery/src/pages/vertical/list.astro
@@ -16,34 +16,66 @@ import Layout from "../../layouts/Layout.astro";
       <p>A basic vertical carousel example with scroll buttons and markers.</p>
     </header>
 
-    <ul class="carousel --vertical scroll-markers scroll-buttons">
-      <li><p>1</p></li>
-      <li><p>2</p></li>
-      <li><p>3</p></li>
-      <li><p>4</p></li>
-      <li><p>5</p></li>
-      <li><p>6</p></li>
-      <li><p>7</p></li>
-      <li><p>8</p></li>
-      <li><p>9</p></li>
-      <li><p>10</p></li>
-      <li><p>11</p></li>
-      <li><p>12</p></li>
-      <li><p>13</p></li>
-      <li><p>14</p></li>
-      <li><p>15</p></li>
-      <li><p>16</p></li>
-    </ul>
+    <div role="region" aria-label="List carousel demo">
+      <div
+        class="carousel carousel--vertical carousel--scroll-markers carousel--scroll-buttons carousel--offscreen-inert"
+        aria-live="polite"
+      >
+        <div class="carousel__slide" tabindex="0" data-label="Slide 1">
+          <p>1</p>
+        </div>
+        <div class="carousel__slide" tabindex="0" data-label="Slide 2">
+          <p>2</p>
+        </div>
+        <div class="carousel__slide" tabindex="0" data-label="Slide 3">
+          <p>3</p>
+        </div>
+        <div class="carousel__slide" tabindex="0" data-label="Slide 4">
+          <p>4</p>
+        </div>
+        <div class="carousel__slide" tabindex="0" data-label="Slide 5">
+          <p>5</p>
+        </div>
+        <div class="carousel__slide" tabindex="0" data-label="Slide 6">
+          <p>6</p>
+        </div>
+        <div class="carousel__slide" tabindex="0" data-label="Slide 7">
+          <p>7</p>
+        </div>
+        <div class="carousel__slide" tabindex="0" data-label="Slide 8">
+          <p>8</p>
+        </div>
+        <div class="carousel__slide" tabindex="0" data-label="Slide 9">
+          <p>9</p>
+        </div>
+        <div class="carousel__slide" tabindex="0" data-label="Slide 10">
+          <p>10</p>
+        </div>
+        <div class="carousel__slide" tabindex="0" data-label="Slide 11">
+          <p>11</p>
+        </div>
+        <div class="carousel__slide" tabindex="0" data-label="Slide 12">
+          <p>12</p>
+        </div>
+        <div class="carousel__slide" tabindex="0" data-label="Slide 13">
+          <p>13</p>
+        </div>
+        <div class="carousel__slide" tabindex="0" data-label="Slide 14">
+          <p>14</p>
+        </div>
+        <div class="carousel__slide" tabindex="0" data-label="Slide 15">
+          <p>15</p>
+        </div>
+        <div class="carousel__slide" tabindex="0" data-label="Slide 16">
+          <p>16</p>
+        </div>
+      </div>
+    </div>
   </section>
 </Layout>
 
 <style>
   .carousel {
-    /* Reset list styles */
-    list-style-type: none;
-    counter-reset: item;
-
-    /* Styles and layout */
     block-size: 50svh;
     max-inline-size: var(--size-content-2);
 
@@ -63,9 +95,10 @@ import Layout from "../../layouts/Layout.astro";
       block-size: 85cqi;
     }
 
-    & > li {
+    .carousel__slide {
       background: light-dark(white, var(--surface-2));
       padding: 0;
+      container-type: scroll-state;
 
       display: inline-flex;
       place-items: center;
diff --git a/carousels-gallery/src/pages/vertical/scroll-spy.astro b/carousels-gallery/src/pages/vertical/scroll-spy.astro
index 65edfa9..a4bf3da 100644
--- a/carousels-gallery/src/pages/vertical/scroll-spy.astro
+++ b/carousels-gallery/src/pages/vertical/scroll-spy.astro
@@ -24,9 +24,9 @@ import Layout from "../../layouts/Layout.astro";
       </p>
     </header>
 
-    <div class="scroll-spy">
+    <div class="scroll-spy" role="region" aria-label="Scroll spy carousel demo">
       <!-- marker group here -->
-      <div class="carousel --vertical">
+      <div class="carousel carousel--vertical" aria-live="polite">
         <section aria-label="A vertical scroller">
           <h2>A vertical scroller</h2>
           <p>
diff --git a/carousels-gallery/src/pages/vertical/slides.astro b/carousels-gallery/src/pages/vertical/slides.astro
index 8e9558f..2c1ca5a 100644
--- a/carousels-gallery/src/pages/vertical/slides.astro
+++ b/carousels-gallery/src/pages/vertical/slides.astro
@@ -17,23 +17,33 @@ import Layout from "../../layouts/Layout.astro";
       </p>
     </header>
 
-    <ul class="carousel --vertical scroll-markers">
-      <li><p>My Slides</p></li>
-      <li><p>Slide 1</p></li>
-      <li><p>Slide 2</p></li>
-      <li><p>Slide 3</p></li>
-      <li><p>The End</p></li>
-    </ul>
+    <div role="region" aria-label="Slides carousel demo">
+      <div
+        class="carousel carousel--vertical carousel--scroll-markers carousel--unsnapped-inert"
+        aria-live="polite"
+      >
+        <div class="carousel__slide" data-label="Slide 1">
+          <p role="tabpanel" aria-label="Slide 1">My Slides</p>
+        </div>
+        <div class="carousel__slide" data-label="Slide 2">
+          <p role="tabpanel" aria-label="Slide 2">Slide 1</p>
+        </div>
+        <div class="carousel__slide" data-label="Slide 3">
+          <p role="tabpanel" aria-label="Slide 3">Slide 2</p>
+        </div>
+        <div class="carousel__slide" data-label="Slide 4">
+          <p role="tabpanel" aria-label="Slide 4">Slide 3</p>
+        </div>
+        <div class="carousel__slide" data-label="Slide 5">
+          <p role="tabpanel" aria-label="Slide 5">The End</p>
+        </div>
+      </div>
+    </div>
   </section>
 </Layout>
 
 <style>
   .carousel {
-    /* Reset list styles */
-    list-style-type: none;
-    counter-reset: item;
-
-    /* Styles and layout */
     aspect-ratio: var(--ratio-landscape);
     inline-size: 100%;
 
@@ -47,10 +57,11 @@ import Layout from "../../layouts/Layout.astro";
       overflow: unset;
     }
 
-    & > li {
+    .carousel__slide {
       max-inline-size: 100%;
       background: light-dark(white, var(--surface-2));
       padding: 0;
+      container-type: scroll-state;
 
       display: inline-flex;
       place-items: center;
@@ -63,7 +74,7 @@ import Layout from "../../layouts/Layout.astro";
       > p {
         font-family: var(--font-antique);
         font-size: var(--font-size-5);
-        transition: font-size 1s var(--ease-spring-4) .5s;
+        transition: font-size 1s var(--ease-spring-4) 0.5s;
       }
 
       @container scroll-state(snapped: block) {
diff --git a/carousels-gallery/src/pages/vertical/stack.astro b/carousels-gallery/src/pages/vertical/stack.astro
index 0c6b53a..ee447a7 100644
--- a/carousels-gallery/src/pages/vertical/stack.astro
+++ b/carousels-gallery/src/pages/vertical/stack.astro
@@ -19,60 +19,60 @@ import Layout from "../../layouts/Layout.astro";
       </p>
     </header>
 
-    <ul class="carousel --vertical scroll-buttons">
-      <li>
-        <div class="card">
-          <p>CNN</p>
-          <h2>Lorem ipsum dolor sit amet consectetur adipisicing</h2>
-          <time>2 minutes ago</time>
+    <div role="region" aria-label="Stack carousel demo">
+      <div
+        class="carousel carousel--vertical carousel--scroll-buttons carousel--unsnapped-inert"
+        aria-live="polite"
+      >
+        <div class="carousel__slide">
+          <div class="card">
+            <p>CNN</p>
+            <h2>Lorem ipsum dolor sit amet consectetur adipisicing</h2>
+            <time>2 minutes ago</time>
+          </div>
         </div>
-      </li>
-      <li>
-        <div class="card">
-          <p>BBC News</p>
-          <h2>Lorem ipsum dolor sit</h2>
-          <time>3 hours ago</time>
+        <div class="carousel__slide">
+          <div class="card">
+            <p>BBC News</p>
+            <h2>Lorem ipsum dolor sit</h2>
+            <time>3 hours ago</time>
+          </div>
         </div>
-      </li>
-      <li>
-        <div class="card">
-          <p>The New York Times</p>
-          <h2>Sit amet consectetur adipisicing elit</h2>
-          <time>5 hours ago</time>
+        <div class="carousel__slide">
+          <div class="card">
+            <p>The New York Times</p>
+            <h2>Sit amet consectetur adipisicing elit</h2>
+            <time>5 hours ago</time>
+          </div>
         </div>
-      </li>
-      <li>
-        <div class="card">
-          <p>Reuters</p>
-          <h2>Ipsum dolor sit amet consectetur adipisicing elit</h2>
-          <time>1 day ago</time>
+        <div class="carousel__slide">
+          <div class="card">
+            <p>Reuters</p>
+            <h2>Ipsum dolor sit amet consectetur adipisicing elit</h2>
+            <time>1 day ago</time>
+          </div>
         </div>
-      </li>
-      <li>
-        <div class="card">
-          <p>Associated Press</p>
-          <h2>Ipsum dolor sit amet elit</h2>
-          <time>2 days ago</time>
+        <div class="carousel__slide">
+          <div class="card">
+            <p>Associated Press</p>
+            <h2>Ipsum dolor sit amet elit</h2>
+            <time>2 days ago</time>
+          </div>
         </div>
-      </li>
-      <li>
-        <div class="card">
-          <p>The Guardian</p>
-          <h2>Amet consectetur adipisicing elit dolor</h2>
-          <time>5 days ago</time>
+        <div class="carousel__slide">
+          <div class="card">
+            <p>The Guardian</p>
+            <h2>Amet consectetur adipisicing elit dolor</h2>
+            <time>5 days ago</time>
+          </div>
         </div>
-      </li>
-    </ul>
+      </div>
+    </div>
   </section>
 </Layout>
 
 <style>
   .carousel {
-    /* Reset list styles */
-    list-style-type: none;
-    counter-reset: item;
-
-    /* Styles and layout */
     aspect-ratio: var(--ratio-portrait);
     inline-size: 50%;
     justify-self: center;
@@ -102,10 +102,11 @@ import Layout from "../../layouts/Layout.astro";
       translate: 0 55%;
     }
 
-    & > li {
+    .carousel__slide {
       scroll-snap-align: none;
       position: sticky;
       top: 0px;
+      container-type: scroll-state;
 
       max-inline-size: 100%;
       display: grid;
@@ -131,7 +132,8 @@ import Layout from "../../layouts/Layout.astro";
     box-shadow: var(--shadow-2);
     border-radius: var(--radius-2);
 
-    > p, > h2 {
+    > p,
+    > h2 {
       text-box: trim-both cap alphabetic;
     }
 
diff --git a/carousels-gallery/src/pages/vertical/wheel.astro b/carousels-gallery/src/pages/vertical/wheel.astro
index eb61617..c552279 100644
--- a/carousels-gallery/src/pages/vertical/wheel.astro
+++ b/carousels-gallery/src/pages/vertical/wheel.astro
@@ -16,34 +16,66 @@ import Layout from "../../layouts/Layout.astro";
       <p>A classic vertical wheel of choices carousel.</p>
     </header>
 
-    <ul class="carousel --vertical scroll-markers">
-      <li><h3>Super Mario Bros.</h3></li>
-      <li><h3>The Legend of Zelda</h3></li>
-      <li><h3>Metroid</h3></li>
-      <li><h3>Castlevania</h3></li>
-      <li><h3>Mega Man 2</h3></li>
-      <li><h3>Final Fantasy</h3></li>
-      <li><h3>Contra</h3></li>
-      <li><h3>Ninja Gaiden</h3></li>
-      <li><h3>Tecmo Bowl</h3></li>
-      <li><h3>Punch-Out</h3></li>
-      <li><h3>Excitebike</h3></li>
-      <li><h3>Kid Icarus</h3></li>
-      <li><h3>Double Dragon</h3></li>
-      <li><h3>Bubble Bobble</h3></li>
-      <li><h3>Kirby's Adventure</h3></li>
-      <li><h3>Tetris</h3></li>
-    </ul>
+    <div role="region" aria-label="Wheel carousel demo">
+      <div
+        class="carousel carousel--vertical carousel--scroll-markers carousel--offscreen-inert"
+        aria-live="polite"
+      >
+        <div class="carousel__slide" data-label="Super Mario Bros">
+          <h3>Super Mario Bros.</h3>
+        </div>
+        <div class="carousel__slide" data-label="The Legend of Zelda">
+          <h3>The Legend of Zelda</h3>
+        </div>
+        <div class="carousel__slide" data-label="Metroid">
+          <h3>Metroid</h3>
+        </div>
+        <div class="carousel__slide" data-label="Castlevania">
+          <h3>Castlevania</h3>
+        </div>
+        <div class="carousel__slide" data-label="Mega Man 2">
+          <h3>Mega Man 2</h3>
+        </div>
+        <div class="carousel__slide" data-label="Final Fantasy">
+          <h3>Final Fantasy</h3>
+        </div>
+        <div class="carousel__slide" data-label="Contra">
+          <h3>Contra</h3>
+        </div>
+        <div class="carousel__slide" data-label="Ninja Gaiden">
+          <h3>Ninja Gaiden</h3>
+        </div>
+        <div class="carousel__slide" data-label="Tecmo Bowl">
+          <h3>Tecmo Bowl</h3>
+        </div>
+        <div class="carousel__slide" data-label="Punch-Out">
+          <h3>Punch-Out</h3>
+        </div>
+        <div class="carousel__slide" data-label="Excitebike">
+          <h3>Excitebike</h3>
+        </div>
+        <div class="carousel__slide" data-label="Kid Icarus">
+          <h3>Kid Icarus</h3>
+        </div>
+        <div class="carousel__slide" data-label="Double Dragon">
+          <h3>Double Dragon</h3>
+        </div>
+        <div class="carousel__slide" data-label="Bubble Bobble">
+          <h3>Bubble Bobble</h3>
+        </div>
+        <div class="carousel__slide" data-label="Kirby's Adventure">
+          <h3>Kirby's Adventure</h3>
+        </div>
+        <div class="carousel__slide" data-label="Tetris">
+          <h3>Tetris</h3>
+        </div>
+      </div>
+    </div>
   </section>
 </Layout>
 
 <style>
   .carousel {
-    /* Reset list styles */
-    list-style-type: none;
-    counter-reset: item;
-
-    /* Styles and layout */
     block-size: 100svh;
     inline-size: 100cqi;
     overflow-x: hidden;
@@ -67,11 +99,12 @@ import Layout from "../../layouts/Layout.astro";
       block-size: 85cqb;
     }
 
-    & > li {
+    .carousel__slide {
       padding: 0;
       scroll-snap-align: center;
       text-align: end;
       block-size: 10svb;
+      container-type: scroll-state;
 
       &:nth-of-type(9) {
         scroll-initial-target: nearest;
diff --git a/carousels-gallery/src/styles/utilities.carousel.css b/carousels-gallery/src/styles/utilities.carousel.css
index 1c05fd7..bd5c180 100644
--- a/carousels-gallery/src/styles/utilities.carousel.css
+++ b/carousels-gallery/src/styles/utilities.carousel.css
@@ -1,69 +1,70 @@
-/* todo:
-  - bring offscreen work into this file
-*/
+/* `.carousel` elements
+ * -------------------------------------------------------------------------*/
 
 .carousel {
-  scrollbar-width: none;
   anchor-name: --carousel;
-  
-  /* size and scroll state container */
-  container-type: inline-size scroll-state;
+  container-type: inline-size;
 
   /* scroll styles */
   overflow-x: auto;
   overscroll-behavior-x: contain;
   scroll-snap-type: x mandatory;
+  scrollbar-width: none;
+
+  font-size: var(--font-size-2);
 
   &:focus-visible {
     scrollbar-color: var(--link) transparent;
     outline: none;
   }
 
-  &:where(.--vertical) {
-    /* scroll styles */
-    overflow-y: auto;
-    overscroll-behavior-y: contain;
-    scroll-snap-type: y mandatory;
-  }
-
-  &:where(.--bidi) {
-    /* scroll styles */
-    overflow: auto;
-    overscroll-behavior: contain;
-    scroll-snap-type: both mandatory;
-  }
-
-  ul& {
-    padding-inline-start: 0;
+  @media (prefers-reduced-motion: no-preference) {
+    scroll-behavior: smooth;
   }
+}
 
-  /* &:focus-within {
-    outline-offset: 5px;
-    outline: 1px solid var(--link);
-  } */
+.carousel__slide {
+  scroll-snap-align: start;
 
-  @media (prefers-reduced-motion: no-preference) {
-    & {
-      scroll-behavior: smooth;
-    }
+  :where(.carousel--offscreen-inert) & {
+    animation: offscreen-inert linear both;
+    animation-timeline: view(x);
   }
 
-  > * {
+  :where(.carousel--unsnapped-inert) & {
     container-type: scroll-state;
-    scroll-snap-align: start;
 
-    /* todo: convert to SDA */
-    /* move this to a specialty demo */
-    /* > * {
+    & > * {
       @container not scroll-state(snapped) {
         interactivity: inert;
       }
-    } */
+    }
   }
 }
 
-.scroll-markers {
-  scroll-marker-group: after;
+/* `.carousel` states
+ * -------------------------------------------------------------------------*/
+
+.carousel--vertical {
+  /* scroll styles */
+  overflow-y: auto;
+  overscroll-behavior-y: contain;
+  scroll-snap-type: y mandatory;
+
+  &:where(.carousel--offscreen-inert) .carousel__slide {
+    animation-timeline: view(y);
+  }
+}
+
+.carousel--bidi {
+  /* scroll styles */
+  overflow: auto;
+  overscroll-behavior: contain;
+  scroll-snap-type: both mandatory;
+}
+
+.carousel--scroll-markers {
+  scroll-marker-group: before;
 
   &::scroll-marker-group {
     position: absolute;
@@ -81,11 +82,7 @@
     scroll-behavior: smooth;
   }
 
-  /* &::scroll-marker-group:focus-within {
-    background: light-dark(white, var(--surface-1));
-  } */
-
-  &:where(:not(.--vertical), .--bidi)::scroll-marker-group {
+  &:where(:not(.carousel--vertical), .carousel--bidi)::scroll-marker-group {
     inline-size: 100%;
     max-inline-size: min(90cqi, 210px);
     overflow-x: auto;
@@ -104,46 +101,31 @@
     grid-auto-columns: var(--size-3);
     grid-auto-flow: column;
     justify-self: center;
-
-    /* todo: put scroll buttons on the pagination if it has overflow */
-    /* &::scroll-button(right),
-    &::scroll-button(left) {
-      width: var(--size-3);
-      height: var(--size-3);
-    } */
   }
 
-  &.--vertical {
-    &::scroll-marker-group {
-      position-area: left center;
+  &:where(.carousel--vertical)::scroll-marker-group {
+    position-area: left center;
 
-      margin-inline: var(--size-3);
-      overflow-y: auto;
-      scroll-snap-type: y mandatory;
-
-      inline-size: var(--size-5);
-      block-size: 80cqb;
-      max-block-size: min(50cqb, 210px);
+    margin-inline: var(--size-3);
+    overflow-y: auto;
+    scroll-snap-type: y mandatory;
 
-      grid-auto-rows: var(--size-3);
-      grid-auto-flow: row;
+    inline-size: var(--size-5);
+    block-size: 80cqb;
+    max-block-size: min(50cqb, 210px);
 
-      padding-block: 10px; /* space for mask */
-      padding-inline: 0;
-      scroll-padding-block: 10px;
-      mask: linear-gradient(to bottom, transparent 0, black 10px, black calc(100% - 10px), transparent 100%);
-    }
+    grid-auto-rows: var(--size-3);
+    grid-auto-flow: row;
 
-    & > * {
-      &::scroll-marker {
-        animation-timeline: view(y);
-      }
-    }
+    padding-block: 10px; /* space for mask */
+    padding-inline: 0;
+    scroll-padding-block: 10px;
+    mask: linear-gradient(to bottom, transparent 0, black 10px, black calc(100% - 10px), transparent 100%);
   }
 
-  > * {
+  .carousel__slide {
     &::scroll-marker {
-      content: " ";
+      content: "" / attr(data-label);
       scroll-snap-align: center;
       aspect-ratio: 1;
       border: 1px solid light-dark(var(--gray-6), var(--surface-4));
@@ -152,13 +134,15 @@
       -webkit-tap-highlight-color: transparent;
       text-decoration: none;
       -webkit-tap-highlight-color: transparent;
-      transition: 
-        transform 0.3s var(--ease-spring-2), 
+      transition:
+        transform 0.3s var(--ease-spring-2),
         outline-offset 0.25s var(--ease-3)
       ;
       animation: scale-in-and-out linear both;
       animation-timeline: view(x);
-      interactivity: auto; /* todo: remove once they dont inherit none from inerted origin elements */
+
+      /* todo: remove once marker `interactivity` is inherited from `::scroll-marker-group` */
+      interactivity: auto;
     }
 
     &::scroll-marker:target-current {
@@ -182,13 +166,17 @@
       outline: 2px solid var(--link);
       outline-offset: 2px;
     }
+
+    :where(.carousel--vertical) &::scroll-marker {
+      animation-timeline: view(y);
+    }
   }
 }
 
-/* TODO: 
+/* TODO:
   up, down
   use scroll-state(scrollable) to auto generate buttons */
-.scroll-buttons {
+.carousel--scroll-buttons {
   &::scroll-button(*) {
     cursor: pointer;
     -webkit-tap-highlight-color: transparent;
@@ -228,7 +216,7 @@
     }
   }
 
-  &:where(:not(.--vertical), .--bidi) {
+  &:where(:not(.carousel--vertical), .carousel--bidi) {
     &::scroll-button(right) {
       --_inner: center span-inline-start;
       --_inner-under: block-end span-inline-start;
@@ -262,7 +250,7 @@
     }
   }
 
-  &:where(.--vertical, .--bidi) {
+  &:where(.carousel--vertical, .carousel--bidi) {
     &::scroll-button(down) {
       --_inner: center span-block-start;
       --_inner-under: block-end span-inline-end;
@@ -302,7 +290,7 @@
     font-variation-settings: "opsz" 30;
     transform: scale(1.1);
   }
-  
+
   &::scroll-button(*):not(:active):focus-visible {
     outline-offset: 2px;
     outline: 2px solid var(--link);
@@ -320,25 +308,37 @@
   &::scroll-button(down):not(:disabled):active {
     transform: translateY(5px) scale(0.95);
   }
-  
+
   &::scroll-button(*):disabled {
     opacity: 25%;
     cursor: not-allowed;
   }
 }
 
+/* `.carousel` animations
+ * -------------------------------------------------------------------------*/
+
 @keyframes scale-in-and-out {
-	entry 0%  {
-		transform: scale(.25);
-	}
-	entry 100%  {
-		transform: scale(1);
-	}
-
-	exit 0% {
-		transform: scale(1);
-	}
-	exit 100% {
-		transform: scale(.25);
-	}
-}
\ No newline at end of file
+  entry 0%  {
+    transform: scale(.25);
+  }
+  entry 100%  {
+    transform: scale(1);
+  }
+
+  exit 0% {
+    transform: scale(1);
+  }
+  exit 100% {
+    transform: scale(.25);
+  }
+}
+
+@keyframes offscreen-inert {
+  entry 0%, exit 100% {
+    interactivity: inert;
+  }
+  entry 100%, exit 0% {
+    interactivity: auto;
+  }
+}