diff --git a/.claude/rules/components.md b/.claude/rules/components.md
index 538efe1b4..a2bddfd04 100644
--- a/.claude/rules/components.md
+++ b/.claude/rules/components.md
@@ -79,9 +79,10 @@ ComponentName/
 
 ### Rules
 - `defineOptions({ name: '...' })` — **always required** (100%)
-- All imports go in `<script lang="ts">`, not `<script setup>`
+- **ALL imports go in `<script lang="ts">`, NEVER in `<script setup>`** — this includes Vue imports (`ref`, `toRef`, `watch`, etc.), composable imports, and utility imports. `<script setup>` must contain zero import statements.
 - Props interface and slot props interface exported from regular script
 - Context `[useX, provideX]` exported from regular script
+- Cleanup: use `onBeforeUnmount` for unregistration, not `onUnmounted`
 
 ## Context Provision Pattern
 
@@ -163,8 +164,9 @@ const slotProps = toRef((): ComponentRootSlotProps => ({
 Every interactive component must have:
 1. Correct `role` attribute
 2. Relevant `aria-*` state attributes
-3. `aria-disabled` when disabled
+3. `aria-disabled` when disabled — always include as `boolean`, not `true | undefined`
 4. Keyboard event handlers
+5. All user-facing strings (`aria-label`, etc.) must use `useLocale()` and `locale.t()` — never hardcode English. Tests assert `toBeDefined()` for locale strings, not exact values.
 
 ## Disabled Pattern (100% enforced)
 
@@ -210,7 +212,7 @@ const [, , context] = createFooContext(options)
 useProxyModel(context, model, { multiple })
 ```
 
-**Do not** declare `defineEmits('update:model-value')` alongside `defineModel` — it's redundant.
+`defineEmits('update:model-value')` is redundant alongside `defineModel`, but **include it anyway** — vue-devtools requires the explicit emit declaration for event tracking.
 
 ## Barrel Export Pattern (100% enforced)
 
@@ -234,3 +236,7 @@ export const Component = { Root: ComponentRoot, Item: ComponentItem }
 - Slot props via `<slot v-bind="slotProps" />`
 - Hidden inputs conditionally rendered: `<ComponentHiddenInput v-if="name" />`
 - `v-if` for structural conditionals, never `v-show` (except Combobox filtered items)
+
+## Slot Attrs Double-Fire Hazard
+
+Slot `attrs` objects include `onClick` and other event handlers. These are already bound to the outer `<Atom>` wrapper via `mergeProps`. Consumers must **only** spread slot `attrs` onto their own element when using `renderless` mode. In non-renderless mode (default), spreading `attrs` onto a child element causes handlers to fire twice — once on the child, then again on the Atom wrapper via event bubbling. When writing examples for new components, never `v-bind="attrs"` on children inside a non-renderless component.
diff --git a/.claude/rules/docs.md b/.claude/rules/docs.md
index fbd2fb45d..eb0267697 100644
--- a/.claude/rules/docs.md
+++ b/.claude/rules/docs.md
@@ -164,6 +164,7 @@ Description paragraph.
 - Import from `@vuetify/v0`
 - Keep examples minimal and focused
 - One concept per example file
+- **Never `v-bind="attrs"` on children of non-renderless components** — slot `attrs` include `onClick` and other handlers already bound to the outer Atom wrapper. Spreading them onto an inner element causes double-firing (click on child fires handler, event bubbles to parent which fires it again). Only use slot `attrs` in `renderless` mode where there is no wrapper element.
 
 ## Markdown Directives
 
diff --git a/apps/docs/src/examples/components/carousel/basic.vue b/apps/docs/src/examples/components/carousel/basic.vue
new file mode 100644
index 000000000..55cc0a73b
--- /dev/null
+++ b/apps/docs/src/examples/components/carousel/basic.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+  import { Carousel } from '@vuetify/v0'
+  import { mdiChevronLeft, mdiChevronRight } from '@mdi/js'
+</script>
+
+<template>
+  <div class="flex flex-col gap-4">
+    <Carousel.Root>
+      <Carousel.Viewport class="rounded-lg overflow-hidden gap-4 cursor-grab data-[dragging]:cursor-grabbing">
+        <Carousel.Item
+          v-for="i in 5"
+          :key="i"
+          class="flex items-center justify-center h-48 rounded-lg text-lg font-medium bg-surface-variant text-on-surface-variant w-full shrink-0"
+          :value="i"
+        >
+          Slide {{ i }}
+        </Carousel.Item>
+      </Carousel.Viewport>
+
+      <div class="flex items-center justify-center gap-2 mt-3">
+        <Carousel.Previous class="p-2 rounded-full border border-divider hover:bg-surface-variant disabled:opacity-40">
+          <svg class="size-5" viewBox="0 0 24 24"><path :d="mdiChevronLeft" fill="currentColor" /></svg>
+        </Carousel.Previous>
+
+        <Carousel.Next class="p-2 rounded-full border border-divider hover:bg-surface-variant disabled:opacity-40">
+          <svg class="size-5" viewBox="0 0 24 24"><path :d="mdiChevronRight" fill="currentColor" /></svg>
+        </Carousel.Next>
+      </div>
+    </Carousel.Root>
+  </div>
+</template>
diff --git a/apps/docs/src/examples/components/carousel/indicator.vue b/apps/docs/src/examples/components/carousel/indicator.vue
new file mode 100644
index 000000000..beb4b162f
--- /dev/null
+++ b/apps/docs/src/examples/components/carousel/indicator.vue
@@ -0,0 +1,38 @@
+<script setup lang="ts">
+  import { mdiChevronLeft, mdiChevronRight } from '@mdi/js'
+  import { Carousel } from '@vuetify/v0'
+</script>
+
+<template>
+  <Carousel.Root>
+    <div class="relative">
+      <Carousel.Viewport class="rounded-lg overflow-hidden gap-4 cursor-grab data-[dragging]:cursor-grabbing">
+        <Carousel.Item
+          v-for="i in 5"
+          :key="i"
+          class="flex items-center justify-center h-48 rounded-lg text-lg font-medium bg-surface-variant text-on-surface-variant w-full shrink-0"
+          :value="i"
+        >
+          Slide {{ i }}
+        </Carousel.Item>
+      </Carousel.Viewport>
+
+      <Carousel.Previous class="absolute left-2 top-1/2 -translate-y-1/2 p-2 rounded-full bg-surface/80 hover:bg-surface disabled:opacity-0 transition-opacity">
+        <svg class="size-5" viewBox="0 0 24 24"><path :d="mdiChevronLeft" fill="currentColor" /></svg>
+      </Carousel.Previous>
+
+      <Carousel.Next class="absolute right-2 top-1/2 -translate-y-1/2 p-2 rounded-full bg-surface/80 hover:bg-surface disabled:opacity-0 transition-opacity">
+        <svg class="size-5" viewBox="0 0 24 24"><path :d="mdiChevronRight" fill="currentColor" /></svg>
+      </Carousel.Next>
+    </div>
+
+    <Carousel.Indicator v-slot="{ items }" class="flex gap-1.5 justify-center mt-3">
+      <button
+        v-for="item in items"
+        :key="item.index"
+        v-bind="item.attrs"
+        class="size-2 rounded-full bg-surface-variant transition-colors data-[selected]:bg-primary"
+      />
+    </Carousel.Indicator>
+  </Carousel.Root>
+</template>
diff --git a/apps/docs/src/examples/components/carousel/multi-slide.vue b/apps/docs/src/examples/components/carousel/multi-slide.vue
new file mode 100644
index 000000000..aca7aebc0
--- /dev/null
+++ b/apps/docs/src/examples/components/carousel/multi-slide.vue
@@ -0,0 +1,55 @@
+<script setup lang="ts">
+  import { Carousel, Switch } from '@vuetify/v0'
+
+  const items = [
+    { id: 1, label: 'Design' },
+    { id: 2, label: 'Develop' },
+    { id: 3, label: 'Test' },
+    { id: 4, label: 'Deploy' },
+    { id: 5, label: 'Monitor' },
+    { id: 6, label: 'Iterate' },
+  ]
+</script>
+
+<template>
+  <Carousel.Root v-slot="{ isAutoplay, play, stop }" :autoplay="3000" circular :per-view="3">
+    <Carousel.Viewport class="rounded-lg gap-3 cursor-grab data-[dragging]:cursor-grabbing">
+      <Carousel.Item
+        v-for="item in items"
+        :key="item.id"
+        class="flex items-center justify-center h-32 rounded-lg text-sm font-medium bg-surface-variant text-on-surface-variant flex-[0_0_calc((100%-1.5rem)/3)]"
+        :value="item.id"
+      >
+        {{ item.label }}
+      </Carousel.Item>
+    </Carousel.Viewport>
+
+    <div class="flex items-center justify-center gap-2 mt-3">
+      <Carousel.Previous class="px-3 py-1.5 rounded-lg border border-divider text-sm hover:bg-surface-variant disabled:opacity-40">
+        Previous
+      </Carousel.Previous>
+
+      <Carousel.Next class="px-3 py-1.5 rounded-lg border border-divider text-sm hover:bg-surface-variant disabled:opacity-40">
+        Next
+      </Carousel.Next>
+    </div>
+
+    <label class="flex items-center justify-center gap-2 mt-3 cursor-pointer">
+      <Switch.Root
+        class="inline-flex items-center border-none bg-transparent p-0 outline-none"
+        :model-value="isAutoplay"
+        @update:model-value="$event ? play() : stop()"
+      >
+        <Switch.Track
+          class="relative inline-flex items-center w-11 h-6 rounded-full bg-surface-variant transition-colors data-[state=checked]:bg-primary"
+        >
+          <Switch.Thumb
+            class="![visibility:visible] block size-4 rounded-full bg-white shadow-sm transition-transform translate-x-1 data-[state=checked]:translate-x-6"
+          />
+        </Switch.Track>
+      </Switch.Root>
+
+      <span class="text-sm">Autoplay</span>
+    </label>
+  </Carousel.Root>
+</template>
diff --git a/apps/docs/src/examples/components/carousel/peek.vue b/apps/docs/src/examples/components/carousel/peek.vue
new file mode 100644
index 000000000..dca5fea7a
--- /dev/null
+++ b/apps/docs/src/examples/components/carousel/peek.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+  import { Carousel } from '@vuetify/v0'
+
+  const slides = [
+    { id: 1, label: 'Mountains', color: 'bg-sky-800 text-white' },
+    { id: 2, label: 'Desert', color: 'bg-amber-700 text-white' },
+    { id: 3, label: 'Forest', color: 'bg-emerald-800 text-white' },
+    { id: 4, label: 'Ocean', color: 'bg-blue-900 text-white' },
+  ]
+</script>
+
+<template>
+  <Carousel.Root :per-view="1">
+    <Carousel.Viewport class="rounded-lg gap-4 px-12 cursor-grab data-[dragging]:cursor-grabbing">
+      <Carousel.Item
+        v-for="slide in slides"
+        :key="slide.id"
+        class="flex items-center justify-center h-40 rounded-lg text-lg font-medium flex-[0_0_100%]"
+        :class="slide.color"
+        :value="slide.id"
+      >
+        {{ slide.label }}
+      </Carousel.Item>
+    </Carousel.Viewport>
+  </Carousel.Root>
+</template>
diff --git a/apps/docs/src/pages/components/index.md b/apps/docs/src/pages/components/index.md
index 996c30b1c..fe16e97af 100644
--- a/apps/docs/src/pages/components/index.md
+++ b/apps/docs/src/pages/components/index.md
@@ -76,6 +76,7 @@ Components with meaningful HTML defaults. Render semantic elements by default bu
 | - | - |
 | [Avatar](/components/semantic/avatar) | Image/fallback avatar with priority loading |
 | [Breadcrumbs](/components/semantic/breadcrumbs) | Navigation breadcrumbs with overflow detection and truncation |
+| [Carousel](/components/semantic/carousel) | Scroll-snap slide navigation with multi-slide display and drag/swipe |
 | [Pagination](/components/semantic/pagination) | Page navigation with semantic `<nav>` wrapper |
 | [Progress](/components/semantic/progress/) | Headless progress bar with multi-segment and buffer support |
 | [Snackbar](/components/semantic/snackbar) | Toast notification with queue, positioning, and auto-dismiss |
diff --git a/apps/docs/src/pages/components/semantic/carousel.md b/apps/docs/src/pages/components/semantic/carousel.md
new file mode 100644
index 000000000..18399d22c
--- /dev/null
+++ b/apps/docs/src/pages/components/semantic/carousel.md
@@ -0,0 +1,227 @@
+---
+title: Carousel - Scrollable Slide Navigation with Drag Support
+meta:
+- name: description
+  content: Headless carousel component built on CSS scroll-snap with multi-slide display, partial-slide peeking, and drag/swipe navigation for Vue 3.
+- name: keywords
+  content: carousel, slider, scroll-snap, drag, swipe, slides, Vue 3, headless, accessible
+features:
+  category: Component
+  label: 'C: Carousel'
+  github: /components/Carousel/
+  renderless: false
+  level: 2
+related:
+  - /components/providers/step
+  - /composables/selection/create-step
+  - /components/primitives/atom
+---
+
+# Carousel
+
+Headless carousel built on CSS scroll-snap with multi-slide display and partial-slide peeking.
+
+<DocsPageFeatures :frontmatter />
+
+## Usage
+
+The Carousel provides slide navigation with native drag/swipe via CSS scroll-snap. Slides register with a step context for programmatic navigation.
+
+::: example
+/components/carousel/basic
+:::
+
+## Anatomy
+
+```vue Anatomy playground no-filename
+<script setup lang="ts">
+  import { Carousel } from '@vuetify/v0'
+</script>
+
+<template>
+  <Carousel.Root>
+    <Carousel.Viewport>
+      <Carousel.Item />
+    </Carousel.Viewport>
+
+    <Carousel.Indicator />
+    <Carousel.Previous />
+    <Carousel.Next />
+    <Carousel.Progress />
+    <Carousel.LiveRegion />
+  </Carousel.Root>
+</template>
+```
+
+## Examples
+
+### Indicator
+
+Dot indicators show which slide is active and allow direct navigation. The `Carousel.Indicator` exposes an `items` array via slot props — render each dot with `v-bind="item.attrs"` for built-in keyboard navigation and ARIA.
+
+::: example
+/components/carousel/indicator
+
+### Dot Navigation
+
+Indicators between Previous/Next buttons with roving tabindex and `aria-controls` linking each dot to its slide.
+
+:::
+
+### Multi-Slide Display
+
+Show multiple slides at once with the `per-view` prop. This is useful for card grids, skill lists, or product carousels where users can browse items in groups.
+
+::: example
+/components/carousel/multi-slide
+
+### Three Slides Per View
+
+A circular carousel showing 3 slides at once with a 12px gap between them.
+
+:::
+
+### Peek
+
+Add padding to the viewport to reveal a portion of adjacent slides, signaling to the user that more content is available and encouraging drag/swipe interaction.
+
+::: example
+/components/carousel/peek
+
+### Partial Slide Visibility
+
+A carousel with 48px peek on each side showing portions of adjacent slides.
+
+:::
+
+## Recipes
+
+### Circular Navigation
+
+Enable wrapping from last slide to first with the `circular` prop.
+
+```vue
+<template>
+  <Carousel.Root circular>
+    <Carousel.Viewport>
+      <Carousel.Item v-for="i in 5" :key="i" :value="i">
+        Slide {{ i }}
+      </Carousel.Item>
+    </Carousel.Viewport>
+  </Carousel.Root>
+</template>
+```
+
+### Vertical Orientation
+
+Set `orientation="vertical"` for a vertically scrolling carousel.
+
+```vue
+<template>
+  <Carousel.Root orientation="vertical">
+    <Carousel.Viewport style="height: 300px">
+      <Carousel.Item v-for="i in 5" :key="i" :value="i">
+        Slide {{ i }}
+      </Carousel.Item>
+    </Carousel.Viewport>
+  </Carousel.Root>
+</template>
+```
+
+### Disabled State
+
+Disable all navigation via the `disabled` prop on the root.
+
+```vue
+<template>
+  <Carousel.Root disabled>
+    <Carousel.Viewport>
+      <Carousel.Item v-for="i in 3" :key="i" :value="i">
+        Slide {{ i }}
+      </Carousel.Item>
+    </Carousel.Viewport>
+
+    <Carousel.Previous>Previous</Carousel.Previous>
+    <Carousel.Next>Next</Carousel.Next>
+  </Carousel.Root>
+</template>
+```
+
+### Instant Scroll
+
+Set `behavior="instant"` to disable smooth scrolling on programmatic navigation.
+
+```vue
+<template>
+  <Carousel.Root behavior="instant">
+    <Carousel.Viewport>
+      <Carousel.Item v-for="i in 5" :key="i" :value="i">
+        Slide {{ i }}
+      </Carousel.Item>
+    </Carousel.Viewport>
+  </Carousel.Root>
+</template>
+```
+
+### Styling with Data Attributes
+
+All component state is exposed via `data-*` attributes for CSS-only styling:
+
+```css
+/* Style the selected slide */
+[data-selected] { opacity: 1; }
+
+/* Dim inactive slides */
+[aria-hidden="true"] { opacity: 0.4; }
+
+/* Hide nav buttons at boundaries */
+[data-edge] { visibility: hidden; }
+
+/* Drag interaction */
+[data-dragging] { cursor: grabbing; user-select: none; }
+```
+
+## Accessibility
+
+The Carousel implements the [WAI-ARIA Carousel Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/carousel/).
+
+| Element | Role / Attribute |
+| - | - |
+| Root | `role="region"`, `aria-roledescription="carousel"`, `aria-label`, `aria-disabled` |
+| Viewport | `aria-live="polite"` |
+| Slide | `role="group"`, `aria-roledescription="slide"`, `aria-label="N of M"` |
+| Previous | `aria-label` via locale, `aria-controls` links to viewport |
+| Next | `aria-label` via locale, `aria-controls` links to viewport |
+| Indicator | `role="tablist"` container with `aria-orientation`, `role="tab"` per dot, `aria-selected` |
+| Progress | `role="progressbar"`, `aria-valuenow`, `aria-valuemin`, `aria-valuemax` |
+| LiveRegion | `role="status"`, `aria-live="polite"`, `aria-atomic` |
+
+Slides outside the visible window are marked with `aria-hidden="true"` so screen readers only announce visible content. The LiveRegion provides a dedicated announcement channel for slide changes, using a 100ms delay for reliable screen reader detection.
+
+::: faq
+
+??? How does multi-slide display work?
+
+The `per-view` prop controls how many slides are visible at once. The Viewport measures its own layout (padding, gaps) from the DOM and computes each slide's width automatically. It uses CSS scroll-snap so the browser handles all scroll physics and snap behavior natively.
+
+??? Can I use fade transitions instead of sliding?
+
+The Carousel is built on CSS scroll-snap for native drag/swipe support. For fade transitions, use the `Step` provider component with `Presence` for mount/unmount animations — it gives you the same navigation model (next/prev/circular) without scroll-based layout.
+
+??? How do I build an autoplay carousel?
+
+Use the `autoplay` prop with an interval in milliseconds. The root slot exposes `isAutoplay`, `isPaused`, `remaining`, `play`, `stop`, `pause`, and `resume` for controlling playback. Autoplay pauses automatically during touch and mouse drag interactions. Use `Carousel.Progress` to visualize the timer.
+
+```vue
+<Carousel.Root v-slot="{ isAutoplay, play, stop }" :autoplay="5000">
+  <Carousel.Viewport>
+    <!-- slides -->
+  </Carousel.Viewport>
+
+  <Carousel.Progress class="h-1 bg-surface-variant" />
+</Carousel.Root>
+```
+
+:::
+
+<DocsApi />
diff --git a/packages/0/README.md b/packages/0/README.md
index ab98637bf..67fcd3e30 100644
--- a/packages/0/README.md
+++ b/packages/0/README.md
@@ -137,6 +137,7 @@ import { ... } from '@vuetify/v0/date'       // Date adapter and utilities
 |-----------|-------------|
 | [Avatar](https://0.vuetifyjs.com/components/semantic/avatar) | Image/fallback avatar with priority loading |
 | [Breadcrumbs](https://0.vuetifyjs.com/components/semantic/breadcrumbs) | Navigation breadcrumbs with overflow detection and truncation |
+| [Carousel](https://0.vuetifyjs.com/components/semantic/carousel) | Scroll-snap slide navigation with multi-slide display and drag/swipe |
 | [Pagination](https://0.vuetifyjs.com/components/semantic/pagination) | Page navigation with semantic `<nav>` wrapper |
 | [Snackbar](https://0.vuetifyjs.com/components/semantic/snackbar) | Toast notification with queue, positioning, and auto-dismiss |
 | [Splitter](https://0.vuetifyjs.com/components/semantic/splitter) | Resizable panel layout with drag handles |
diff --git a/packages/0/src/components/Carousel/CarouselIndicator.vue b/packages/0/src/components/Carousel/CarouselIndicator.vue
new file mode 100644
index 000000000..443f54dfc
--- /dev/null
+++ b/packages/0/src/components/Carousel/CarouselIndicator.vue
@@ -0,0 +1,208 @@
+/**
+ * @module CarouselIndicator
+ *
+ * @see https://0.vuetifyjs.com/components/semantic/carousel
+ *
+ * @remarks
+ * Dot indicator navigation for carousel slides. Renders one indicator
+ * per registered slide with role="tablist" container semantics. Click
+ * navigates to the slide, keyboard arrow keys navigate between dots.
+ * Uses roving tabindex for keyboard navigation.
+ */
+
+<script lang="ts">
+  // Components
+  import { Atom } from '#v0/components/Atom'
+  import { useCarouselRoot } from './CarouselRoot.vue'
+
+  // Composables
+  import { useLocale } from '#v0/composables/useLocale'
+
+  // Utilities
+  import { isUndefined } from '#v0/utilities'
+  import { mergeProps, nextTick, onBeforeUnmount, toRef, useAttrs, useTemplateRef } from 'vue'
+
+  // Transformers
+  import { toElement } from '#v0/composables/toElement'
+
+  // Types
+  import type { AtomExpose, AtomProps } from '#v0/components/Atom'
+
+  export interface CarouselIndicatorProps extends AtomProps {
+    /** Accessible label for the indicator group */
+    label?: string
+    /** Namespace for connecting to parent Carousel.Root */
+    namespace?: string
+  }
+
+  export interface CarouselIndicatorItem {
+    /** Slide index (0-based) */
+    index: number
+    /** Whether this indicator's slide is selected */
+    isSelected: boolean
+    /** Whether this indicator's slide is in the visible window */
+    isActive: boolean
+    /** Attributes to bind to each indicator element */
+    attrs: {
+      'role': 'tab'
+      'tabindex': 0 | -1
+      'aria-selected': boolean
+      'aria-controls': string
+      'aria-label': string
+      'data-selected': true | undefined
+      'data-active': true | undefined
+      'onClick': () => void
+      'onKeydown': (e: KeyboardEvent) => void
+    }
+  }
+
+  export interface CarouselIndicatorSlotProps {
+    /** Total number of slides */
+    size: number
+    /** Currently selected slide index */
+    selectedIndex: number
+    /** Array of indicator items with per-dot state and attrs */
+    items: CarouselIndicatorItem[]
+    /** Attributes to bind to the indicator container */
+    attrs: {
+      'role': 'tablist'
+      'aria-label': string
+      'aria-orientation': 'horizontal' | 'vertical'
+    }
+  }
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'CarouselIndicator', inheritAttrs: false })
+
+  const attrs = useAttrs()
+  const rootEl = useTemplateRef<AtomExpose>('root')
+
+  defineSlots<{
+    default: (props: CarouselIndicatorSlotProps) => any
+  }>()
+
+  const {
+    as = 'div',
+    renderless,
+    label,
+    namespace = 'v0:carousel',
+  } = defineProps<CarouselIndicatorProps>()
+
+  const locale = useLocale()
+  const carousel = useCarouselRoot(namespace)
+
+  const el = toRef(() => toElement(rootEl.value?.element) as HTMLElement | null ?? null)
+  const ticket = carousel.parts.register({ type: 'indicator', el })
+  onBeforeUnmount(() => ticket.unregister())
+
+  function selectIndex (index: number) {
+    const id = carousel.lookup(index)
+    if (!isUndefined(id)) carousel.select(id)
+  }
+
+  function focusSelected () {
+    nextTick(() => {
+      const container = toElement(rootEl.value?.element) as HTMLElement | null
+      container?.querySelector<HTMLElement>('[tabindex="0"]')?.focus()
+    })
+  }
+
+  function onKeydown (index: number, e: KeyboardEvent) {
+    const horizontal = carousel.orientation.value === 'horizontal'
+    const size = carousel.size
+
+    if (
+      (horizontal && e.key === 'ArrowRight')
+      || (!horizontal && e.key === 'ArrowDown')
+    ) {
+      e.preventDefault()
+      const next = index + 1 < size ? index + 1 : (carousel.circular.value ? 0 : index)
+      selectIndex(next)
+      focusSelected()
+      return
+    }
+
+    if (
+      (horizontal && e.key === 'ArrowLeft')
+      || (!horizontal && e.key === 'ArrowUp')
+    ) {
+      e.preventDefault()
+      const prev = index - 1 >= 0 ? index - 1 : (carousel.circular.value ? size - 1 : index)
+      selectIndex(prev)
+      focusSelected()
+      return
+    }
+
+    if (e.key === 'Home') {
+      e.preventDefault()
+      carousel.first()
+      focusSelected()
+      return
+    }
+
+    if (e.key === 'End') {
+      e.preventDefault()
+      carousel.last()
+      focusSelected()
+      return
+    }
+
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault()
+      selectIndex(index)
+    }
+  }
+
+  const slotProps = toRef((): CarouselIndicatorSlotProps => {
+    const selected = carousel.selectedIndex.value
+    const size = carousel.size
+    const perView = carousel.perView.value
+
+    const items: CarouselIndicatorItem[] = Array.from({ length: size }, (_, i) => {
+      const isSelected = i === selected
+      const isActive = i >= selected && i < selected + perView
+
+      return {
+        index: i,
+        isSelected,
+        isActive,
+        attrs: {
+          'role': 'tab',
+          'tabindex': isSelected ? 0 : -1,
+          'aria-selected': isSelected,
+          'aria-controls': `${carousel.rootId}-slide-${i}`,
+          'aria-label': locale.t('Carousel.indicator', { current: i + 1, size }),
+          'data-selected': isSelected || undefined,
+          'data-active': isActive || undefined,
+          'onClick' () {
+            selectIndex(i)
+          },
+          'onKeydown': (e: KeyboardEvent) => onKeydown(i, e),
+        },
+      }
+    })
+
+    return {
+      size,
+      selectedIndex: selected,
+      items,
+      attrs: {
+        'role': 'tablist',
+        'aria-label': label ?? locale.t('Carousel.indicators'),
+        'aria-orientation': carousel.orientation.value,
+      },
+    }
+  })
+</script>
+
+<template>
+  <Atom
+    ref="root"
+    v-bind="mergeProps(attrs, slotProps.attrs)"
+    :as
+    :renderless
+  >
+    <slot v-bind="slotProps" />
+  </Atom>
+</template>
diff --git a/packages/0/src/components/Carousel/CarouselItem.vue b/packages/0/src/components/Carousel/CarouselItem.vue
new file mode 100644
index 000000000..7d514bed3
--- /dev/null
+++ b/packages/0/src/components/Carousel/CarouselItem.vue
@@ -0,0 +1,150 @@
+/**
+ * @module CarouselItem
+ *
+ * @see https://0.vuetifyjs.com/components/semantic/carousel
+ *
+ * @remarks
+ * Individual slide that registers with the parent CarouselRoot.
+ * Provides selection state, visibility, and ARIA attributes via
+ * scoped slot. Automatically sizes based on perView, gap, and peek.
+ */
+
+<script lang="ts">
+  // Components
+  import { Atom } from '#v0/components/Atom'
+  import { useCarouselRoot } from './CarouselRoot.vue'
+
+  // Composables
+  import { useLocale } from '#v0/composables/useLocale'
+
+  // Utilities
+  import { mergeProps, onBeforeUnmount, toRef, toValue, useAttrs, useTemplateRef } from 'vue'
+
+  // Transformers
+  import { toElement } from '#v0/composables/toElement'
+
+  // Types
+  import type { AtomExpose, AtomProps } from '#v0/components/Atom'
+  import type { ID } from '#v0/types'
+  import type { MaybeRefOrGetter } from 'vue'
+
+  export interface CarouselItemProps<V = unknown> extends AtomProps {
+    /** Unique identifier (auto-generated if not provided) */
+    id?: ID
+    /** Value associated with this slide */
+    value?: V
+    /** Disables this specific slide */
+    disabled?: MaybeRefOrGetter<boolean>
+    /** Namespace for dependency injection */
+    namespace?: string
+  }
+
+  export interface CarouselItemSlotProps {
+    /** Unique identifier */
+    id: string
+    /** Whether this slide is the selected (anchor) slide */
+    isSelected: boolean
+    /** Whether this slide is in the visible window */
+    isActive: boolean
+    /** Whether this slide is disabled */
+    isDisabled: boolean
+    /** Slide index in the carousel */
+    index: number
+    /** Select this slide */
+    select: () => void
+    /** Unselect this slide */
+    unselect: () => void
+    /** Toggle this slide's selection state */
+    toggle: () => void
+    /** Attributes to bind to the slide element */
+    attrs: {
+      'id': string
+      'role': 'group'
+      'aria-roledescription': 'slide'
+      'aria-label': string
+      'aria-hidden': true | undefined
+      'data-selected': true | undefined
+      'data-active': true | undefined
+      'data-disabled': true | undefined
+      'data-index': number
+      'style': Record<string, string>
+    }
+  }
+</script>
+
+<script lang="ts" setup generic="V = unknown">
+  defineOptions({ name: 'CarouselItem', inheritAttrs: false })
+
+  const attrs = useAttrs()
+  const rootEl = useTemplateRef<AtomExpose>('root')
+
+  defineSlots<{
+    default: (props: CarouselItemSlotProps) => any
+  }>()
+
+  const {
+    as = 'div',
+    renderless,
+    id,
+    value,
+    disabled,
+    namespace = 'v0:carousel',
+  } = defineProps<CarouselItemProps<V>>()
+
+  const locale = useLocale()
+  const carousel = useCarouselRoot(namespace)
+  const el = toRef(() => toElement(rootEl.value?.element) as HTMLElement | null ?? null)
+  const ticket = carousel.register({ id, value, disabled, el })
+
+  const isDisabled = toRef(() => toValue(ticket.disabled) || toValue(carousel.disabled))
+
+  onBeforeUnmount(() => {
+    ticket.unregister()
+  })
+
+  const isActive = toRef(() => {
+    const selected = carousel.selectedIndex.value
+    const perView = carousel.perView.value
+    const index = ticket.index
+    return index >= selected && index < selected + perView
+  })
+
+  const slideStyle = {
+    'scroll-snap-align': 'start' as const,
+  }
+
+  const slotProps = toRef((): CarouselItemSlotProps => ({
+    id: String(ticket.id),
+    isSelected: toValue(ticket.isSelected),
+    isActive: isActive.value,
+    isDisabled: isDisabled.value,
+    index: ticket.index,
+    select: ticket.select,
+    unselect: ticket.unselect,
+    toggle: ticket.toggle,
+    attrs: {
+      'id': `${carousel.rootId}-slide-${ticket.index}`,
+      'role': 'group',
+      'aria-roledescription': 'slide',
+      'aria-label': locale.t('Carousel.slide', { current: ticket.index + 1, size: carousel.size }),
+      'aria-hidden': isActive.value ? undefined : true,
+      'data-selected': toValue(ticket.isSelected) || undefined,
+      'data-active': isActive.value || undefined,
+      'data-disabled': isDisabled.value || undefined,
+      'data-index': ticket.index,
+      'style': slideStyle,
+    },
+  }))
+</script>
+
+<template>
+  <Atom
+    ref="root"
+    v-bind="mergeProps(attrs, slotProps.attrs)"
+    :as
+    :renderless
+    :style="[attrs.style, slotProps.attrs.style]"
+  >
+    <slot v-bind="slotProps" />
+  </Atom>
+</template>
diff --git a/packages/0/src/components/Carousel/CarouselLiveRegion.vue b/packages/0/src/components/Carousel/CarouselLiveRegion.vue
new file mode 100644
index 000000000..189fafeb9
--- /dev/null
+++ b/packages/0/src/components/Carousel/CarouselLiveRegion.vue
@@ -0,0 +1,130 @@
+/**
+ * @module CarouselLiveRegion
+ *
+ * @see https://0.vuetifyjs.com/components/semantic/carousel
+ *
+ * @remarks
+ * Visually hidden live region that announces slide changes to screen readers.
+ * Uses aria-live="polite" to announce without interrupting the user.
+ *
+ * The live region must exist in the DOM before content changes for screen readers
+ * to detect updates. A small delay (100ms) is used after slide changes to ensure
+ * reliable announcement across different assistive technologies.
+ *
+ * This component should be visually hidden but remain in the DOM. Apply
+ * visually-hidden CSS (sr-only) to hide it from sighted users while keeping
+ * it accessible to screen readers.
+ *
+ * @see https://tetralogical.com/blog/2024/05/01/why-are-my-live-regions-not-working/
+ */
+
+<script lang="ts">
+  // Components
+  import { Atom } from '#v0/components/Atom'
+  import { useCarouselRoot } from './CarouselRoot.vue'
+
+  // Composables
+  import { useLocale } from '#v0/composables/useLocale'
+
+  // Utilities
+  import { isUndefined } from '#v0/utilities'
+  import { mergeProps, onBeforeUnmount, shallowRef, toRef, useAttrs, useTemplateRef, watch } from 'vue'
+
+  // Transformers
+  import { toElement } from '#v0/composables/toElement'
+
+  // Types
+  import type { AtomExpose, AtomProps } from '#v0/components/Atom'
+
+  export interface CarouselLiveRegionProps extends AtomProps {
+    /** Namespace for connecting to parent Carousel.Root */
+    namespace?: string
+  }
+
+  export interface CarouselLiveRegionSlotProps {
+    /** Current slide number (1-indexed) */
+    current: number
+    /** Total number of slides */
+    size: number
+    /** Announcement text */
+    text: string
+    /** Attributes to bind to the live region element */
+    attrs: {
+      'aria-atomic': true
+      'aria-live': 'polite'
+      'role': 'status'
+    }
+  }
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'CarouselLiveRegion', inheritAttrs: false })
+
+  const attrs = useAttrs()
+  const rootEl = useTemplateRef<AtomExpose>('root')
+
+  defineSlots<{
+    default: (props: CarouselLiveRegionSlotProps) => any
+  }>()
+
+  const {
+    as = 'div',
+    renderless,
+    namespace = 'v0:carousel',
+  } = defineProps<CarouselLiveRegionProps>()
+
+  const locale = useLocale()
+  const carousel = useCarouselRoot(namespace)
+
+  const el = toRef(() => toElement(rootEl.value?.element) as HTMLElement | null ?? null)
+  const ticket = carousel.parts.register({ type: 'live-region', el })
+  onBeforeUnmount(() => ticket.unregister())
+
+  // Text starts empty - live regions must be empty initially for announcements to work
+  const text = shallowRef('')
+
+  // Watch for slide changes and update text after a small delay
+  // This ensures screen readers detect the content change
+  // @see https://tetralogical.com/blog/2024/05/01/why-are-my-live-regions-not-working/
+  /* v8 ignore start -- watch fires after mount, setTimeout callback requires timer */
+  let pending: ReturnType<typeof setTimeout> | undefined
+
+  watch(() => carousel.selectedIndex.value, (index, prevIndex) => {
+    if (isUndefined(prevIndex)) return
+
+    clearTimeout(pending)
+    pending = setTimeout(() => {
+      text.value = locale.t(
+        'Carousel.liveRegion',
+        { current: index + 1, size: carousel.size },
+      )
+    }, 100)
+  })
+
+  onBeforeUnmount(() => clearTimeout(pending))
+  /* v8 ignore stop */
+
+  const slotProps = toRef((): CarouselLiveRegionSlotProps => ({
+    current: carousel.selectedIndex.value + 1,
+    size: carousel.size,
+    text: text.value,
+    attrs: {
+      'aria-atomic': true,
+      'aria-live': 'polite',
+      'role': 'status',
+    },
+  }))
+</script>
+
+<template>
+  <Atom
+    ref="root"
+    v-bind="mergeProps(attrs, slotProps.attrs)"
+    :as
+    :renderless
+  >
+    <slot v-bind="slotProps">
+      {{ text }}
+    </slot>
+  </Atom>
+</template>
diff --git a/packages/0/src/components/Carousel/CarouselNext.vue b/packages/0/src/components/Carousel/CarouselNext.vue
new file mode 100644
index 000000000..2c4d570e2
--- /dev/null
+++ b/packages/0/src/components/Carousel/CarouselNext.vue
@@ -0,0 +1,116 @@
+/**
+ * @module CarouselNext
+ *
+ * @see https://0.vuetifyjs.com/components/semantic/carousel
+ *
+ * @remarks
+ * Navigation button that moves to the next slide. Automatically
+ * disables at the last visible boundary in non-circular mode.
+ * Exposes data attributes for styling disabled and boundary states.
+ */
+
+<script lang="ts">
+  // Components
+  import { Atom } from '#v0/components/Atom'
+  import { useCarouselRoot } from './CarouselRoot.vue'
+
+  // Composables
+  import { useLocale } from '#v0/composables/useLocale'
+
+  // Utilities
+  import { mergeProps, onBeforeUnmount, toRef, toValue, useAttrs, useTemplateRef } from 'vue'
+
+  // Transformers
+  import { toElement } from '#v0/composables/toElement'
+
+  // Types
+  import type { AtomExpose, AtomProps } from '#v0/components/Atom'
+
+  export interface CarouselNextProps extends AtomProps {
+    /** Namespace for connecting to parent Carousel.Root */
+    namespace?: string
+  }
+
+  export interface CarouselNextSlotProps {
+    /** Whether the button is disabled */
+    isDisabled: boolean
+    /** Whether the carousel is at the last slide (non-circular) */
+    isAtEdge: boolean
+    /** Attributes to bind to the button element */
+    attrs: {
+      'type': 'button' | undefined
+      'aria-label': string
+      'aria-controls': string
+      'aria-disabled': boolean
+      'disabled': boolean | undefined
+      'data-disabled': true | undefined
+      'data-edge': true | undefined
+      'onClick': () => void
+    }
+  }
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'CarouselNext', inheritAttrs: false })
+
+  const attrs = useAttrs()
+  const rootEl = useTemplateRef<AtomExpose>('root')
+
+  defineSlots<{
+    default: (props: CarouselNextSlotProps) => any
+  }>()
+
+  const {
+    as = 'button',
+    renderless,
+    namespace = 'v0:carousel',
+  } = defineProps<CarouselNextProps>()
+
+  const locale = useLocale()
+  const carousel = useCarouselRoot(namespace)
+
+  const el = toRef(() => toElement(rootEl.value?.element) as HTMLElement | null ?? null)
+  const ticket = carousel.parts.register({ type: 'next', el })
+  onBeforeUnmount(() => ticket.unregister())
+
+  const viewportId = `${carousel.rootId}-viewport`
+
+  const isAtEdge = toRef(() => {
+    if (carousel.circular.value) return false
+    return carousel.selectedIndex.value >= carousel.size - carousel.perView.value
+  })
+
+  const isDisabled = toRef(() => toValue(carousel.disabled) || isAtEdge.value)
+
+  function onClick () {
+    if (!isDisabled.value) {
+      carousel.next()
+    }
+  }
+
+  const slotProps = toRef((): CarouselNextSlotProps => ({
+    isDisabled: isDisabled.value,
+    isAtEdge: isAtEdge.value,
+    attrs: {
+      'type': as === 'button' ? 'button' : undefined,
+      'aria-label': locale.t('Carousel.next'),
+      'aria-controls': viewportId,
+      'aria-disabled': isDisabled.value,
+      'disabled': as === 'button' ? isDisabled.value : undefined,
+      'data-disabled': isDisabled.value || undefined,
+      'data-edge': isAtEdge.value || undefined,
+      'onClick': onClick,
+    },
+  }))
+</script>
+
+<template>
+  <Atom
+    ref="root"
+    v-bind="mergeProps(attrs, slotProps.attrs)"
+    :as
+    :renderless
+  >
+    <slot v-bind="slotProps" />
+  </Atom>
+</template>
diff --git a/packages/0/src/components/Carousel/CarouselPrevious.vue b/packages/0/src/components/Carousel/CarouselPrevious.vue
new file mode 100644
index 000000000..f2c8b7fdf
--- /dev/null
+++ b/packages/0/src/components/Carousel/CarouselPrevious.vue
@@ -0,0 +1,112 @@
+/**
+ * @module CarouselPrevious
+ *
+ * @see https://0.vuetifyjs.com/components/semantic/carousel
+ *
+ * @remarks
+ * Navigation button that moves to the previous slide. Automatically
+ * disables at the first slide in non-circular mode. Exposes data
+ * attributes for styling disabled and boundary states.
+ */
+
+<script lang="ts">
+  // Components
+  import { Atom } from '#v0/components/Atom'
+  import { useCarouselRoot } from './CarouselRoot.vue'
+
+  // Composables
+  import { useLocale } from '#v0/composables/useLocale'
+
+  // Utilities
+  import { mergeProps, onBeforeUnmount, toRef, toValue, useAttrs, useTemplateRef } from 'vue'
+
+  // Transformers
+  import { toElement } from '#v0/composables/toElement'
+
+  // Types
+  import type { AtomExpose, AtomProps } from '#v0/components/Atom'
+
+  export interface CarouselPreviousProps extends AtomProps {
+    /** Namespace for connecting to parent Carousel.Root */
+    namespace?: string
+  }
+
+  export interface CarouselPreviousSlotProps {
+    /** Whether the button is disabled */
+    isDisabled: boolean
+    /** Whether the carousel is at the first slide (non-circular) */
+    isAtEdge: boolean
+    /** Attributes to bind to the button element */
+    attrs: {
+      'type': 'button' | undefined
+      'aria-label': string
+      'aria-controls': string
+      'aria-disabled': boolean
+      'disabled': boolean | undefined
+      'data-disabled': true | undefined
+      'data-edge': true | undefined
+      'onClick': () => void
+    }
+  }
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'CarouselPrevious', inheritAttrs: false })
+
+  const attrs = useAttrs()
+  const rootEl = useTemplateRef<AtomExpose>('root')
+
+  defineSlots<{
+    default: (props: CarouselPreviousSlotProps) => any
+  }>()
+
+  const {
+    as = 'button',
+    renderless,
+    namespace = 'v0:carousel',
+  } = defineProps<CarouselPreviousProps>()
+
+  const locale = useLocale()
+  const carousel = useCarouselRoot(namespace)
+
+  const el = toRef(() => toElement(rootEl.value?.element) as HTMLElement | null ?? null)
+  const ticket = carousel.parts.register({ type: 'previous', el })
+  onBeforeUnmount(() => ticket.unregister())
+
+  const viewportId = `${carousel.rootId}-viewport`
+
+  const isAtEdge = toRef(() => !carousel.circular.value && carousel.selectedIndex.value === 0)
+  const isDisabled = toRef(() => toValue(carousel.disabled) || isAtEdge.value)
+
+  function onClick () {
+    if (!isDisabled.value) {
+      carousel.prev()
+    }
+  }
+
+  const slotProps = toRef((): CarouselPreviousSlotProps => ({
+    isDisabled: isDisabled.value,
+    isAtEdge: isAtEdge.value,
+    attrs: {
+      'type': as === 'button' ? 'button' : undefined,
+      'aria-label': locale.t('Carousel.prev'),
+      'aria-controls': viewportId,
+      'aria-disabled': isDisabled.value,
+      'disabled': as === 'button' ? isDisabled.value : undefined,
+      'data-disabled': isDisabled.value || undefined,
+      'data-edge': isAtEdge.value || undefined,
+      'onClick': onClick,
+    },
+  }))
+</script>
+
+<template>
+  <Atom
+    ref="root"
+    v-bind="mergeProps(attrs, slotProps.attrs)"
+    :as
+    :renderless
+  >
+    <slot v-bind="slotProps" />
+  </Atom>
+</template>
diff --git a/packages/0/src/components/Carousel/CarouselProgress.vue b/packages/0/src/components/Carousel/CarouselProgress.vue
new file mode 100644
index 000000000..028439736
--- /dev/null
+++ b/packages/0/src/components/Carousel/CarouselProgress.vue
@@ -0,0 +1,122 @@
+/**
+ * @module CarouselProgress
+ *
+ * @see https://0.vuetifyjs.com/components/semantic/carousel
+ *
+ * @remarks
+ * Visual progress indicator for carousel autoplay timer. Derives a 0-1
+ * progress value from the remaining time and total autoplay duration.
+ * Exposes width styling for CSS-driven animation. Renders role="progressbar"
+ * with proper ARIA value attributes.
+ */
+
+<script lang="ts">
+  // Components
+  import { Atom } from '#v0/components/Atom'
+  import { useCarouselRoot } from './CarouselRoot.vue'
+
+  // Composables
+  import { useLocale } from '#v0/composables/useLocale'
+
+  // Utilities
+  import { mergeProps, onBeforeUnmount, toRef, useAttrs, useTemplateRef } from 'vue'
+
+  // Transformers
+  import { toElement } from '#v0/composables/toElement'
+
+  // Types
+  import type { AtomExpose, AtomProps } from '#v0/components/Atom'
+
+  export interface CarouselProgressProps extends AtomProps {
+    /** Namespace for connecting to parent Carousel.Root */
+    namespace?: string
+  }
+
+  export interface CarouselProgressSlotProps {
+    /** Progress value from 0 to 1 */
+    progress: number
+    /** Whether autoplay is currently active */
+    isAutoplay: boolean
+    /** Whether autoplay is paused */
+    isPaused: boolean
+    /** Attributes to bind to the progress element */
+    attrs: {
+      'role': 'progressbar'
+      'aria-valuenow': number
+      'aria-valuemin': 0
+      'aria-valuemax': 100
+      'aria-valuetext': string
+      'aria-label': string
+      'data-state': 'active' | 'paused' | 'idle'
+      'style': { width: string }
+    }
+  }
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'CarouselProgress', inheritAttrs: false })
+
+  const attrs = useAttrs()
+  const rootEl = useTemplateRef<AtomExpose>('root')
+
+  defineSlots<{
+    default: (props: CarouselProgressSlotProps) => any
+  }>()
+
+  const {
+    as = 'div',
+    renderless,
+    namespace = 'v0:carousel',
+  } = defineProps<CarouselProgressProps>()
+
+  const locale = useLocale()
+  const carousel = useCarouselRoot(namespace)
+
+  const el = toRef(() => toElement(rootEl.value?.element) as HTMLElement | null ?? null)
+  const ticket = carousel.parts.register({ type: 'progress', el })
+  onBeforeUnmount(() => ticket.unregister())
+
+  const progress = toRef(() => {
+    const duration = carousel.autoplay.value
+    if (duration <= 0) return 0
+    return 1 - (carousel.remaining.value / duration)
+  })
+
+  const state = toRef((): 'active' | 'paused' | 'idle' => {
+    if (!carousel.isAutoplay.value) return 'idle'
+    if (carousel.isPaused.value) return 'paused'
+    return 'active'
+  })
+
+  const slotProps = toRef((): CarouselProgressSlotProps => {
+    const percent = Math.round(progress.value * 100)
+
+    return {
+      progress: progress.value,
+      isAutoplay: carousel.isAutoplay.value,
+      isPaused: carousel.isPaused.value,
+      attrs: {
+        'role': 'progressbar',
+        'aria-valuenow': percent,
+        'aria-valuemin': 0,
+        'aria-valuemax': 100,
+        'aria-valuetext': locale.t('Carousel.progress', { percent }),
+        'aria-label': locale.t('Carousel.progressLabel'),
+        'data-state': state.value,
+        'style': { width: `${percent}%` },
+      },
+    }
+  })
+</script>
+
+<template>
+  <Atom
+    ref="root"
+    v-bind="mergeProps(attrs, slotProps.attrs)"
+    :as
+    :renderless
+    :style="[attrs.style, slotProps.attrs.style]"
+  >
+    <slot v-bind="slotProps" />
+  </Atom>
+</template>
diff --git a/packages/0/src/components/Carousel/CarouselRoot.vue b/packages/0/src/components/Carousel/CarouselRoot.vue
new file mode 100644
index 000000000..1578f0fa6
--- /dev/null
+++ b/packages/0/src/components/Carousel/CarouselRoot.vue
@@ -0,0 +1,270 @@
+/**
+ * @module CarouselRoot
+ *
+ * @see https://0.vuetifyjs.com/components/semantic/carousel
+ *
+ * @remarks
+ * Root component for carousel navigation. Creates and provides step context
+ * to child CarouselViewport, CarouselItem, CarouselPrevious, and CarouselNext
+ * components. Built on CSS scroll-snap with multi-slide display and peek support.
+ */
+
+<script lang="ts">
+  // Components
+  import { Atom } from '#v0/components/Atom'
+
+  // Composables
+  import { createContext } from '#v0/composables/createContext'
+  import { createRegistry } from '#v0/composables/createRegistry'
+  import { createStep } from '#v0/composables/createStep'
+  import { useLocale } from '#v0/composables/useLocale'
+  import { useProxyModel } from '#v0/composables/useProxyModel'
+  import { useTimer } from '#v0/composables/useTimer'
+
+  // Utilities
+  import { toRef, toValue, useId } from 'vue'
+
+  // Types
+  import type { AtomProps } from '#v0/components/Atom'
+  import type { RegistryContext, RegistryTicketInput } from '#v0/composables/createRegistry'
+  import type { StepContext, StepTicket } from '#v0/composables/createStep'
+  import type { ID } from '#v0/types'
+  import type { MaybeRefOrGetter, Ref } from 'vue'
+
+  export type CarouselOrientation = 'horizontal' | 'vertical'
+
+  export interface CarouselTicket extends StepTicket {
+    /** Element reference for DOM measurement */
+    el?: MaybeRefOrGetter<HTMLElement | null>
+  }
+
+  export interface CarouselRootProps extends AtomProps {
+    /** Unique identifier for the carousel */
+    id?: string
+    /** Accessible label for the carousel region */
+    label?: string
+    /** Namespace for dependency injection (must match child namespace) */
+    namespace?: string
+    /** Disables the entire carousel */
+    disabled?: boolean
+    /** Whether navigation wraps around from last to first */
+    circular?: boolean
+    /** Carousel orientation */
+    orientation?: CarouselOrientation
+    /** Number of slides visible at once */
+    perView?: number
+    /** Autoplay interval in milliseconds. 0 disables autoplay. */
+    autoplay?: number
+    /** Scroll behavior for programmatic navigation */
+    behavior?: ScrollBehavior
+  }
+
+  export interface CarouselRootSlotProps {
+    /** Whether the carousel is disabled */
+    isDisabled: boolean
+    /** Current orientation */
+    orientation: CarouselOrientation
+    /** Number of slides visible at once */
+    perView: number
+    /** Select the first slide */
+    first: () => void
+    /** Select the last slide */
+    last: () => void
+    /** Select the next slide */
+    next: () => void
+    /** Select the previous slide */
+    prev: () => void
+    /** Step forward or backward by a specific count */
+    step: (count: number) => void
+    /** Select a slide by ID */
+    select: (id: ID) => void
+    /** Whether autoplay is active */
+    isAutoplay: boolean
+    /** Whether autoplay is paused */
+    isPaused: boolean
+    /** Milliseconds remaining until next slide */
+    remaining: number
+    /** Start or restart autoplay from full interval */
+    play: () => void
+    /** Stop autoplay and reset timer */
+    stop: () => void
+    /** Pause autoplay, preserving remaining time */
+    pause: () => void
+    /** Resume autoplay from where it was paused */
+    resume: () => void
+    /** Attributes to bind to the root element */
+    attrs: {
+      'role': 'region'
+      'aria-roledescription': 'carousel'
+      'aria-label': string
+      'aria-disabled': boolean
+      'data-disabled': true | undefined
+    }
+  }
+
+  export interface CarouselPartTicket extends RegistryTicketInput {
+    type: 'viewport' | 'previous' | 'next' | 'indicator' | 'progress' | 'live-region'
+    el: MaybeRefOrGetter<HTMLElement | null>
+  }
+
+  export interface CarouselContext extends StepContext<CarouselTicket> {
+    /** Carousel orientation */
+    orientation: Ref<CarouselOrientation>
+    /** Number of slides visible at once */
+    perView: Ref<number>
+    /** Whether navigation wraps around */
+    circular: Ref<boolean>
+    /** Root ID for generating sub-component IDs */
+    rootId: string
+    /** Scroll behavior for programmatic navigation */
+    behavior: Ref<ScrollBehavior>
+    /** Registry for structural sub-components */
+    parts: RegistryContext<CarouselPartTicket>
+    /** Autoplay interval duration in ms (0 = disabled) */
+    autoplay: Readonly<Ref<number>>
+    /** Milliseconds remaining until next auto-advance */
+    remaining: Readonly<Ref<number>>
+    /** Whether autoplay is currently active */
+    isAutoplay: Readonly<Ref<boolean>>
+    /** Whether autoplay is currently paused */
+    isPaused: Readonly<Ref<boolean>>
+    /** Restart autoplay from full interval */
+    play: () => void
+    /** Pause autoplay timer */
+    pause: () => void
+    /** Resume autoplay timer from remaining time */
+    resume: () => void
+  }
+
+  export const [useCarouselRoot, provideCarouselRoot] = createContext<CarouselContext>()
+</script>
+
+<script lang="ts" setup generic="T = unknown">
+  defineOptions({ name: 'CarouselRoot' })
+
+  defineSlots<{
+    default: (props: CarouselRootSlotProps) => any
+  }>()
+
+  const {
+    as = 'div',
+    renderless,
+    id: rootId = useId(),
+    label,
+    namespace = 'v0:carousel',
+    disabled = false,
+    circular = false,
+    orientation = 'horizontal',
+    perView = 1,
+    autoplay = 0,
+    behavior = 'smooth',
+  } = defineProps<CarouselRootProps>()
+
+  const locale = useLocale()
+
+  const model = defineModel<T | T[]>()
+
+  const step = createStep<CarouselTicket>({
+    disabled: toRef(() => disabled),
+    mandatory: 'force',
+    circular,
+    events: true,
+    reactive: true,
+  })
+
+  useProxyModel(step, model, { multiple: false })
+
+  function next () {
+    if (circular && perView > 1) {
+      const maxStart = Math.max(0, step.size - perView)
+      if (step.selectedIndex.value >= maxStart) {
+        step.first()
+        return
+      }
+    }
+    step.next()
+  }
+
+  function prev () {
+    if (circular && perView > 1 && step.selectedIndex.value === 0) {
+      step.step(Math.max(0, step.size - perView))
+      return
+    }
+    step.prev()
+  }
+
+  const timer = autoplay > 0
+    ? useTimer(() => next(), { duration: autoplay, repeat: true })
+    : null
+
+  function pause () {
+    timer?.pause()
+  }
+  function resume () {
+    timer?.resume()
+  }
+  function play () {
+    timer?.start()
+  }
+  function stop () {
+    timer?.stop()
+  }
+
+  const parts = createRegistry<CarouselPartTicket>()
+
+  const context: CarouselContext = {
+    ...step,
+    next,
+    prev,
+    play,
+    pause,
+    resume,
+    orientation: toRef(() => orientation),
+    perView: toRef(() => perView),
+    circular: toRef(() => circular),
+    rootId,
+    behavior: toRef(() => behavior),
+    parts,
+    autoplay: toRef(() => autoplay),
+    remaining: toRef(() => timer?.remaining.value ?? 0),
+    isAutoplay: toRef(() => timer?.isActive.value ?? false),
+    isPaused: toRef(() => timer?.isPaused.value ?? false),
+    get size () {
+      return step.size
+    },
+  }
+
+  provideCarouselRoot(namespace, context)
+
+  const slotProps = toRef((): CarouselRootSlotProps => ({
+    isDisabled: toValue(step.disabled),
+    orientation,
+    perView,
+    first: step.first,
+    last: step.last,
+    next,
+    prev,
+    step: step.step,
+    select: step.select,
+    isAutoplay: timer?.isActive.value ?? false,
+    isPaused: timer?.isPaused.value ?? false,
+    remaining: timer?.remaining.value ?? 0,
+    play,
+    stop,
+    pause,
+    resume,
+    attrs: {
+      'role': 'region',
+      'aria-roledescription': 'carousel',
+      'aria-label': label ?? locale.t('Carousel.label'),
+      'aria-disabled': toValue(step.disabled),
+      'data-disabled': toValue(step.disabled) || undefined,
+    },
+  }))
+</script>
+
+<template>
+  <Atom v-bind="slotProps.attrs" :as :renderless>
+    <slot v-bind="slotProps" />
+  </Atom>
+</template>
diff --git a/packages/0/src/components/Carousel/CarouselViewport.vue b/packages/0/src/components/Carousel/CarouselViewport.vue
new file mode 100644
index 000000000..cbbc3caf7
--- /dev/null
+++ b/packages/0/src/components/Carousel/CarouselViewport.vue
@@ -0,0 +1,244 @@
+/**
+ * @module CarouselViewport
+ *
+ * @see https://0.vuetifyjs.com/components/semantic/carousel
+ *
+ * @remarks
+ * Scroll-snap container for carousel slides. Handles native scroll-based
+ * drag/swipe and synchronizes scroll position with the step selection state.
+ * Provides structural inline styles for scroll-snap behavior and exposes
+ * data attributes for styling.
+ */
+
+<script lang="ts">
+  // Constants
+  import { IN_BROWSER } from '#v0/constants/globals'
+
+  // Components
+  import { Atom } from '#v0/components/Atom'
+  import { useCarouselRoot, type CarouselTicket } from './CarouselRoot.vue'
+
+  // Composables
+  import { useDocumentEventListener, useEventListener } from '#v0/composables/useEventListener'
+  import { useElementSize } from '#v0/composables/useResizeObserver'
+  import { useToggleScope } from '#v0/composables/useToggleScope'
+
+  // Utilities
+  import { isUndefined } from '#v0/utilities'
+  import { mergeProps, onBeforeUnmount, onScopeDispose, shallowRef, toRef, toValue, useAttrs, useTemplateRef, watch } from 'vue'
+
+  // Transformers
+  import { toElement } from '#v0/composables/toElement'
+
+  // Types
+  import type { AtomExpose, AtomProps } from '#v0/components/Atom'
+
+  export interface CarouselViewportProps extends AtomProps {
+    /** Namespace for connecting to parent Carousel.Root */
+    namespace?: string
+  }
+
+  export interface CarouselViewportSlotProps {
+    /** Whether the user is currently dragging/scrolling */
+    isDragging: boolean
+    /** Attributes to bind to the viewport element */
+    attrs: {
+      'id': string
+      'data-orientation': 'horizontal' | 'vertical'
+      'data-dragging': true | undefined
+      'style': Record<string, string | number>
+    }
+  }
+</script>
+
+<script setup lang="ts">
+  defineOptions({ name: 'CarouselViewport', inheritAttrs: false })
+
+  const attrs = useAttrs()
+  const viewportRef = useTemplateRef<AtomExpose>('viewport')
+
+  defineSlots<{
+    default: (props: CarouselViewportSlotProps) => any
+  }>()
+
+  const {
+    as = 'div',
+    renderless,
+    namespace = 'v0:carousel',
+  } = defineProps<CarouselViewportProps>()
+
+  const carousel = useCarouselRoot(namespace)
+
+  const isDragging = shallowRef(false)
+  const syncing = shallowRef(false)
+  const snapDisabled = shallowRef(false)
+
+  const viewportId = `${carousel.rootId}-viewport`
+
+  const el = toRef(() => toElement(viewportRef.value?.element) as HTMLElement | null ?? null)
+  const ticket = carousel.parts.register({ type: 'viewport', el })
+  onBeforeUnmount(() => ticket.unregister())
+
+  const { width } = useElementSize(el)
+
+  const slideStep = toRef(() => {
+    if (!el.value || width.value === 0) return 0
+    const first = toValue((carousel.seek('first') as CarouselTicket | undefined)?.el) as HTMLElement | undefined
+    const second = toValue((carousel.seek('first', 1) as CarouselTicket | undefined)?.el) as HTMLElement | undefined
+    if (!first) return 0
+    if (!second) return first.offsetWidth
+    return second.offsetLeft - first.offsetLeft
+  })
+
+  if (IN_BROWSER) {
+    useEventListener(el, 'scrollend', () => {
+      if (syncing.value || snapDisabled.value) {
+        syncing.value = false
+        return
+      }
+
+      const viewport = el.value
+      if (!viewport || slideStep.value === 0) return
+
+      isDragging.value = false
+
+      const isVertical = carousel.orientation.value === 'vertical'
+      const scrollPos = isVertical ? viewport.scrollTop : viewport.scrollLeft
+      const snapIndex = Math.round(scrollPos / slideStep.value)
+      const id = carousel.lookup(snapIndex)
+
+      if (!isUndefined(id) && id !== carousel.selectedItem.value?.id) {
+        carousel.select(id)
+      }
+    })
+
+    useEventListener(el, 'scroll', () => {
+      if (!syncing.value) {
+        isDragging.value = true
+      }
+    })
+
+    let dragStart = 0
+    let scrollStart = 0
+
+    useEventListener(el, 'mousedown', (e: MouseEvent) => {
+      if (e.button !== 0) return
+      const viewport = el.value
+      if (!viewport) return
+
+      carousel.pause()
+      const isVertical = carousel.orientation.value === 'vertical'
+      dragStart = isVertical ? e.clientY : e.clientX
+      scrollStart = isVertical ? viewport.scrollTop : viewport.scrollLeft
+      snapDisabled.value = true
+    })
+
+    useToggleScope(() => snapDisabled.value, () => {
+      useDocumentEventListener('mousemove', (e: MouseEvent) => {
+        const viewport = el.value
+        if (!viewport) return
+        e.preventDefault()
+
+        const isVertical = carousel.orientation.value === 'vertical'
+        const pos = isVertical ? e.clientY : e.clientX
+        const delta = pos - dragStart
+
+        if (isVertical) {
+          viewport.scrollTop = scrollStart - delta
+        } else {
+          viewport.scrollLeft = scrollStart - delta
+        }
+      })
+
+      useDocumentEventListener('mouseup', () => {
+        const viewport = el.value
+        carousel.resume()
+
+        if (!viewport || slideStep.value === 0) {
+          snapDisabled.value = false
+          isDragging.value = false
+          return
+        }
+
+        const isVertical = carousel.orientation.value === 'vertical'
+        const scrollPos = isVertical ? viewport.scrollTop : viewport.scrollLeft
+        const snapIndex = Math.round(scrollPos / slideStep.value)
+        const position = snapIndex * slideStep.value
+
+        syncing.value = true
+        viewport.scrollTo({
+          [isVertical ? 'top' : 'left']: position,
+          behavior: carousel.behavior.value,
+        })
+
+        const id = carousel.lookup(snapIndex)
+        if (!isUndefined(id) && id !== carousel.selectedItem.value?.id) {
+          carousel.select(id)
+        }
+
+        snapDisabled.value = false
+        isDragging.value = false
+      })
+
+      onScopeDispose(() => {
+        carousel.resume()
+        snapDisabled.value = false
+        isDragging.value = false
+      })
+    })
+
+    useEventListener(el, 'touchstart', () => carousel.pause(), { passive: true })
+    useEventListener(el, 'touchend', () => carousel.resume(), { passive: true })
+  }
+
+  watch(() => carousel.selectedIndex.value, index => {
+    const viewport = el.value
+    if (!viewport || slideStep.value === 0) return
+
+    syncing.value = true
+
+    const isVertical = carousel.orientation.value === 'vertical'
+    const position = index * slideStep.value
+
+    viewport.scrollTo({
+      [isVertical ? 'top' : 'left']: position,
+      behavior: carousel.behavior.value,
+    })
+  })
+
+  const viewportStyle = toRef(() => {
+    const isVertical = carousel.orientation.value === 'vertical'
+
+    return {
+      'display': 'flex',
+      'flex-direction': isVertical ? 'column' : 'row',
+      [isVertical ? 'overflow-y' : 'overflow-x']: 'auto',
+      [isVertical ? 'overflow-x' : 'overflow-y']: 'hidden',
+      'scroll-snap-type': snapDisabled.value ? 'none' : `${isVertical ? 'y' : 'x'} mandatory`,
+      'scrollbar-width': 'none',
+      ...(snapDisabled.value ? { 'user-select': 'none' } : {}),
+    } as Record<string, string | number>
+  })
+
+  const slotProps = toRef((): CarouselViewportSlotProps => ({
+    isDragging: isDragging.value,
+    attrs: {
+      'id': viewportId,
+      'data-orientation': carousel.orientation.value,
+      'data-dragging': isDragging.value || undefined,
+      'style': viewportStyle.value,
+    },
+  }))
+</script>
+
+<template>
+  <Atom
+    ref="viewport"
+    v-bind="mergeProps(attrs, slotProps.attrs)"
+    :as
+    :renderless
+    :style="[attrs.style, slotProps.attrs.style]"
+  >
+    <slot v-bind="slotProps" />
+  </Atom>
+</template>
diff --git a/packages/0/src/components/Carousel/index.test.ts b/packages/0/src/components/Carousel/index.test.ts
new file mode 100644
index 000000000..0265d3ed5
--- /dev/null
+++ b/packages/0/src/components/Carousel/index.test.ts
@@ -0,0 +1,1022 @@
+import { describe, expect, it } from 'vitest'
+import { renderToString } from 'vue/server-renderer'
+
+// Utilities
+import { mount } from '@vue/test-utils'
+import { createSSRApp, defineComponent, h, nextTick, ref } from 'vue'
+
+import { Carousel } from './index'
+
+describe('carousel', () => {
+  describe('root', () => {
+    describe('rendering', () => {
+      it('should be renderless by default', () => {
+        const wrapper = mount(Carousel.Root, {
+          slots: {
+            default: () => h('div', { class: 'wrapper' }, 'Content'),
+          },
+        })
+
+        expect(wrapper.find('.wrapper').exists()).toBe(true)
+      })
+
+      it('should expose slot props', () => {
+        let slotProps: any
+
+        mount(Carousel.Root, {
+          slots: {
+            default: (props: any) => {
+              slotProps = props
+              return h('div', 'Content')
+            },
+          },
+        })
+
+        expect(slotProps).toBeDefined()
+        expect(typeof slotProps.isDisabled).toBe('boolean')
+        expect(typeof slotProps.first).toBe('function')
+        expect(typeof slotProps.last).toBe('function')
+        expect(typeof slotProps.next).toBe('function')
+        expect(typeof slotProps.prev).toBe('function')
+        expect(typeof slotProps.step).toBe('function')
+        expect(typeof slotProps.select).toBe('function')
+        expect(slotProps.attrs.role).toBe('region')
+        expect(slotProps.attrs['aria-roledescription']).toBe('carousel')
+      })
+
+      it('should expose orientation and perView in slot props', () => {
+        let slotProps: any
+
+        mount(Carousel.Root, {
+          props: {
+            orientation: 'vertical',
+            perView: 3,
+          },
+          slots: {
+            default: (props: any) => {
+              slotProps = props
+              return h('div', 'Content')
+            },
+          },
+        })
+
+        expect(slotProps.orientation).toBe('vertical')
+        expect(slotProps.perView).toBe(3)
+      })
+    })
+
+    describe('navigation', () => {
+      it('should navigate to next slide with next()', async () => {
+        const selected = ref<string>()
+
+        let rootProps: any
+        let slide1Props: any
+        let slide2Props: any
+
+        mount(Carousel.Root, {
+          props: {
+            'modelValue': selected.value,
+            'onUpdate:modelValue': (value: unknown) => {
+              selected.value = value as string
+            },
+          },
+          slots: {
+            default: (props: any) => {
+              rootProps = props
+              return [
+                h(Carousel.Item as any, { value: 'slide-1' }, {
+                  default: (p: any) => {
+                    slide1Props = p
+                    return h('div', 'Slide 1')
+                  },
+                }),
+                h(Carousel.Item as any, { value: 'slide-2' }, {
+                  default: (p: any) => {
+                    slide2Props = p
+                    return h('div', 'Slide 2')
+                  },
+                }),
+              ]
+            },
+          },
+        })
+
+        await nextTick()
+
+        slide1Props.select()
+        await nextTick()
+        expect(slide1Props.isSelected).toBe(true)
+
+        rootProps.next()
+        await nextTick()
+
+        expect(selected.value).toBe('slide-2')
+        expect(slide1Props.isSelected).toBe(false)
+        expect(slide2Props.isSelected).toBe(true)
+      })
+
+      it('should navigate to previous slide with prev()', async () => {
+        const selected = ref<string>()
+
+        let rootProps: any
+        let slide1Props: any
+        let slide2Props: any
+
+        mount(Carousel.Root, {
+          props: {
+            'modelValue': selected.value,
+            'onUpdate:modelValue': (value: unknown) => {
+              selected.value = value as string
+            },
+          },
+          slots: {
+            default: (props: any) => {
+              rootProps = props
+              return [
+                h(Carousel.Item as any, { value: 'slide-1' }, {
+                  default: (p: any) => {
+                    slide1Props = p
+                    return h('div', 'Slide 1')
+                  },
+                }),
+                h(Carousel.Item as any, { value: 'slide-2' }, {
+                  default: (p: any) => {
+                    slide2Props = p
+                    return h('div', 'Slide 2')
+                  },
+                }),
+              ]
+            },
+          },
+        })
+
+        await nextTick()
+
+        slide2Props.select()
+        await nextTick()
+        expect(slide2Props.isSelected).toBe(true)
+
+        rootProps.prev()
+        await nextTick()
+
+        expect(selected.value).toBe('slide-1')
+        expect(slide1Props.isSelected).toBe(true)
+        expect(slide2Props.isSelected).toBe(false)
+      })
+
+      it('should not wrap in bounded mode', async () => {
+        const selected = ref<string>()
+
+        let rootProps: any
+        let slide2Props: any
+
+        mount(Carousel.Root, {
+          props: {
+            'modelValue': selected.value,
+            'onUpdate:modelValue': (value: unknown) => {
+              selected.value = value as string
+            },
+          },
+          slots: {
+            default: (props: any) => {
+              rootProps = props
+              return [
+                h(Carousel.Item as any, { value: 'slide-1' }, {
+                  default: () => h('div', 'Slide 1'),
+                }),
+                h(Carousel.Item as any, { value: 'slide-2' }, {
+                  default: (p: any) => {
+                    slide2Props = p
+                    return h('div', 'Slide 2')
+                  },
+                }),
+              ]
+            },
+          },
+        })
+
+        await nextTick()
+
+        // Select last slide
+        slide2Props.select()
+        await nextTick()
+
+        // Try to navigate past end
+        rootProps.next()
+        await nextTick()
+
+        // Should stay on last slide
+        expect(slide2Props.isSelected).toBe(true)
+      })
+
+      it('should wrap in circular mode', async () => {
+        const selected = ref<string>()
+
+        let rootProps: any
+        let slide1Props: any
+        let slide2Props: any
+
+        mount(Carousel.Root, {
+          props: {
+            'circular': true,
+            'modelValue': selected.value,
+            'onUpdate:modelValue': (value: unknown) => {
+              selected.value = value as string
+            },
+          },
+          slots: {
+            default: (props: any) => {
+              rootProps = props
+              return [
+                h(Carousel.Item as any, { value: 'slide-1' }, {
+                  default: (p: any) => {
+                    slide1Props = p
+                    return h('div', 'Slide 1')
+                  },
+                }),
+                h(Carousel.Item as any, { value: 'slide-2' }, {
+                  default: (p: any) => {
+                    slide2Props = p
+                    return h('div', 'Slide 2')
+                  },
+                }),
+              ]
+            },
+          },
+        })
+
+        await nextTick()
+
+        slide2Props.select()
+        await nextTick()
+
+        // Navigate past end - should wrap to first
+        rootProps.next()
+        await nextTick()
+
+        expect(selected.value).toBe('slide-1')
+        expect(slide1Props.isSelected).toBe(true)
+      })
+
+      it('should navigate to first and last slides', async () => {
+        const selected = ref<string>()
+
+        let rootProps: any
+        let slide1Props: any
+        let slide3Props: any
+
+        mount(Carousel.Root, {
+          props: {
+            'modelValue': selected.value,
+            'onUpdate:modelValue': (value: unknown) => {
+              selected.value = value as string
+            },
+          },
+          slots: {
+            default: (props: any) => {
+              rootProps = props
+              return [
+                h(Carousel.Item as any, { value: 'slide-1' }, {
+                  default: (p: any) => {
+                    slide1Props = p
+                    return h('div', 'Slide 1')
+                  },
+                }),
+                h(Carousel.Item as any, { value: 'slide-2' }, {
+                  default: () => h('div', 'Slide 2'),
+                }),
+                h(Carousel.Item as any, { value: 'slide-3' }, {
+                  default: (p: any) => {
+                    slide3Props = p
+                    return h('div', 'Slide 3')
+                  },
+                }),
+              ]
+            },
+          },
+        })
+
+        await nextTick()
+
+        slide1Props.select()
+        await nextTick()
+
+        rootProps.last()
+        await nextTick()
+        expect(selected.value).toBe('slide-3')
+        expect(slide3Props.isSelected).toBe(true)
+
+        rootProps.first()
+        await nextTick()
+        expect(selected.value).toBe('slide-1')
+        expect(slide1Props.isSelected).toBe(true)
+      })
+    })
+
+    describe('disabled prop', () => {
+      it('should disable all slides when root is disabled', async () => {
+        let slideProps: any
+
+        mount(Carousel.Root, {
+          props: {
+            disabled: true,
+          },
+          slots: {
+            default: () =>
+              h(Carousel.Item as any, { value: 'slide-1' }, {
+                default: (props: any) => {
+                  slideProps = props
+                  return h('div', 'Slide 1')
+                },
+              }),
+          },
+        })
+
+        await nextTick()
+
+        expect(slideProps.isDisabled).toBe(true)
+      })
+    })
+
+    describe('mandatory behavior', () => {
+      it('should auto-select first slide when mandatory=force', async () => {
+        let slideProps: any
+
+        mount(Carousel.Root, {
+          props: {
+            mandatory: 'force',
+          },
+          slots: {
+            default: () =>
+              h(Carousel.Item as any, { value: 'slide-1' }, {
+                default: (props: any) => {
+                  slideProps = props
+                  return h('div', 'Slide 1')
+                },
+              }),
+          },
+        })
+
+        await nextTick()
+
+        expect(slideProps.isSelected).toBe(true)
+      })
+    })
+  })
+
+  describe('item', () => {
+    describe('slot props', () => {
+      it('should expose correct slot props', async () => {
+        let slideProps: any
+
+        mount(Carousel.Root, {
+          slots: {
+            default: () =>
+              h(Carousel.Item as any, { id: 'my-slide', value: 'slide-1' }, {
+                default: (props: any) => {
+                  slideProps = props
+                  return h('div', 'Slide')
+                },
+              }),
+          },
+        })
+
+        await nextTick()
+
+        expect(slideProps.id).toBe('my-slide')
+        expect(typeof slideProps.isSelected).toBe('boolean')
+        expect(typeof slideProps.isActive).toBe('boolean')
+        expect(typeof slideProps.isDisabled).toBe('boolean')
+        expect(typeof slideProps.index).toBe('number')
+      })
+
+      it('should expose correct ARIA attrs', async () => {
+        let slideProps: any
+
+        mount(Carousel.Root, {
+          slots: {
+            default: () =>
+              h(Carousel.Item as any, { value: 'slide-1' }, {
+                default: (props: any) => {
+                  slideProps = props
+                  return h('div', 'Slide')
+                },
+              }),
+          },
+        })
+
+        await nextTick()
+
+        expect(slideProps.attrs.role).toBe('group')
+        expect(slideProps.attrs['aria-roledescription']).toBe('slide')
+        expect(slideProps.attrs['aria-label']).toBeDefined()
+      })
+
+      it('should update aria-label with multiple slides', async () => {
+        let slide1Props: any
+        let slide2Props: any
+        let slide3Props: any
+
+        mount(Carousel.Root, {
+          slots: {
+            default: () => [
+              h(Carousel.Item as any, { value: 'a' }, {
+                default: (p: any) => {
+                  slide1Props = p
+                  return h('div', 'A')
+                },
+              }),
+              h(Carousel.Item as any, { value: 'b' }, {
+                default: (p: any) => {
+                  slide2Props = p
+                  return h('div', 'B')
+                },
+              }),
+              h(Carousel.Item as any, { value: 'c' }, {
+                default: (p: any) => {
+                  slide3Props = p
+                  return h('div', 'C')
+                },
+              }),
+            ],
+          },
+        })
+
+        await nextTick()
+
+        expect(slide1Props.attrs['aria-label']).toBeDefined()
+        expect(slide2Props.attrs['aria-label']).toBeDefined()
+        expect(slide3Props.attrs['aria-label']).toBeDefined()
+      })
+    })
+
+    describe('data attributes', () => {
+      it('should set data-selected when selected', async () => {
+        let slideProps: any
+
+        mount(Carousel.Root, {
+          props: {
+            modelValue: 'slide-1',
+          },
+          slots: {
+            default: () =>
+              h(Carousel.Item as any, { value: 'slide-1' }, {
+                default: (props: any) => {
+                  slideProps = props
+                  return h('div', 'Slide')
+                },
+              }),
+          },
+        })
+
+        await nextTick()
+
+        expect(slideProps.attrs['data-selected']).toBe(true)
+      })
+
+      it('should set data-active for slides in visible window', async () => {
+        let slide1Props: any
+        let slide2Props: any
+        let slide3Props: any
+
+        mount(Carousel.Root, {
+          props: {
+            modelValue: 'a',
+            perView: 2,
+          },
+          slots: {
+            default: () => [
+              h(Carousel.Item as any, { value: 'a' }, {
+                default: (p: any) => {
+                  slide1Props = p
+                  return h('div', 'A')
+                },
+              }),
+              h(Carousel.Item as any, { value: 'b' }, {
+                default: (p: any) => {
+                  slide2Props = p
+                  return h('div', 'B')
+                },
+              }),
+              h(Carousel.Item as any, { value: 'c' }, {
+                default: (p: any) => {
+                  slide3Props = p
+                  return h('div', 'C')
+                },
+              }),
+            ],
+          },
+        })
+
+        await nextTick()
+
+        // With perView=2, slides 0 and 1 should be active
+        expect(slide1Props.attrs['data-active']).toBe(true)
+        expect(slide2Props.attrs['data-active']).toBe(true)
+        expect(slide3Props.attrs['data-active']).toBeUndefined()
+      })
+
+      it('should set aria-hidden for slides outside visible window', async () => {
+        let slide1Props: any
+        let slide2Props: any
+
+        mount(Carousel.Root, {
+          props: {
+            modelValue: 'a',
+            perView: 1,
+          },
+          slots: {
+            default: () => [
+              h(Carousel.Item as any, { value: 'a' }, {
+                default: (p: any) => {
+                  slide1Props = p
+                  return h('div', 'A')
+                },
+              }),
+              h(Carousel.Item as any, { value: 'b' }, {
+                default: (p: any) => {
+                  slide2Props = p
+                  return h('div', 'B')
+                },
+              }),
+            ],
+          },
+        })
+
+        await nextTick()
+
+        expect(slide1Props.attrs['aria-hidden']).toBeUndefined()
+        expect(slide2Props.attrs['aria-hidden']).toBe(true)
+      })
+
+      it('should set data-disabled when disabled', async () => {
+        let slideProps: any
+
+        mount(Carousel.Root, {
+          slots: {
+            default: () =>
+              h(Carousel.Item as any, { value: 'slide-1', disabled: true }, {
+                default: (props: any) => {
+                  slideProps = props
+                  return h('div', 'Slide')
+                },
+              }),
+          },
+        })
+
+        await nextTick()
+
+        expect(slideProps.attrs['data-disabled']).toBe(true)
+      })
+
+      it('should set data-index on each slide', async () => {
+        let slide1Props: any
+        let slide2Props: any
+
+        mount(Carousel.Root, {
+          slots: {
+            default: () => [
+              h(Carousel.Item as any, { value: 'a' }, {
+                default: (p: any) => {
+                  slide1Props = p
+                  return h('div', 'A')
+                },
+              }),
+              h(Carousel.Item as any, { value: 'b' }, {
+                default: (p: any) => {
+                  slide2Props = p
+                  return h('div', 'B')
+                },
+              }),
+            ],
+          },
+        })
+
+        await nextTick()
+
+        expect(slide1Props.attrs['data-index']).toBe(0)
+        expect(slide2Props.attrs['data-index']).toBe(1)
+      })
+    })
+
+    describe('inline styles', () => {
+      it('should set scroll-snap-align style', async () => {
+        let slideProps: any
+
+        mount(Carousel.Root, {
+          slots: {
+            default: () =>
+              h(Carousel.Item as any, { value: 'a' }, {
+                default: (p: any) => {
+                  slideProps = p
+                  return h('div', 'A')
+                },
+              }),
+          },
+        })
+
+        await nextTick()
+
+        expect(slideProps.attrs.style['scroll-snap-align']).toBe('start')
+      })
+
+      it('should not include flex basis (consumer controls sizing)', async () => {
+        let slideProps: any
+
+        mount(Carousel.Root, {
+          slots: {
+            default: () =>
+              h(Carousel.Item as any, { value: 'a' }, {
+                default: (p: any) => {
+                  slideProps = p
+                  return h('div', 'A')
+                },
+              }),
+          },
+        })
+
+        await nextTick()
+
+        expect(slideProps.attrs.style.flex).toBeUndefined()
+      })
+    })
+  })
+
+  describe('previous button', () => {
+    it('should expose correct slot props', async () => {
+      let prevProps: any
+
+      mount(Carousel.Root, {
+        slots: {
+          default: () => [
+            h(Carousel.Item as any, { value: 'a' }, { default: () => h('div', 'A') }),
+            h(Carousel.Previous as any, {}, {
+              default: (p: any) => {
+                prevProps = p
+                return h('button', 'Prev')
+              },
+            }),
+          ],
+        },
+      })
+
+      await nextTick()
+
+      expect(typeof prevProps.isDisabled).toBe('boolean')
+      expect(typeof prevProps.isAtEdge).toBe('boolean')
+      expect(prevProps.attrs['aria-label']).toBeDefined()
+      expect(prevProps.attrs.type).toBe('button')
+    })
+
+    it('should be disabled at first slide in non-circular mode', async () => {
+      let prevProps: any
+
+      mount(Carousel.Root, {
+        props: {
+          modelValue: 'a',
+        },
+        slots: {
+          default: () => [
+            h(Carousel.Item as any, { value: 'a' }, { default: () => h('div', 'A') }),
+            h(Carousel.Item as any, { value: 'b' }, { default: () => h('div', 'B') }),
+            h(Carousel.Previous as any, {}, {
+              default: (p: any) => {
+                prevProps = p
+                return h('button', 'Prev')
+              },
+            }),
+          ],
+        },
+      })
+
+      await nextTick()
+
+      expect(prevProps.isAtEdge).toBe(true)
+      expect(prevProps.isDisabled).toBe(true)
+      expect(prevProps.attrs['data-edge']).toBe(true)
+      expect(prevProps.attrs['data-disabled']).toBe(true)
+    })
+
+    it('should not be disabled at first slide in circular mode', async () => {
+      let prevProps: any
+
+      mount(Carousel.Root, {
+        props: {
+          modelValue: 'a',
+          circular: true,
+        },
+        slots: {
+          default: () => [
+            h(Carousel.Item as any, { value: 'a' }, { default: () => h('div', 'A') }),
+            h(Carousel.Item as any, { value: 'b' }, { default: () => h('div', 'B') }),
+            h(Carousel.Previous as any, {}, {
+              default: (p: any) => {
+                prevProps = p
+                return h('button', 'Prev')
+              },
+            }),
+          ],
+        },
+      })
+
+      await nextTick()
+
+      expect(prevProps.isAtEdge).toBe(false)
+      expect(prevProps.isDisabled).toBe(false)
+    })
+  })
+
+  describe('next button', () => {
+    it('should expose correct slot props', async () => {
+      let nextBtnProps: any
+
+      mount(Carousel.Root, {
+        slots: {
+          default: () => [
+            h(Carousel.Item as any, { value: 'a' }, { default: () => h('div', 'A') }),
+            h(Carousel.Next as any, {}, {
+              default: (p: any) => {
+                nextBtnProps = p
+                return h('button', 'Next')
+              },
+            }),
+          ],
+        },
+      })
+
+      await nextTick()
+
+      expect(typeof nextBtnProps.isDisabled).toBe('boolean')
+      expect(typeof nextBtnProps.isAtEdge).toBe('boolean')
+      expect(nextBtnProps.attrs['aria-label']).toBeDefined()
+      expect(nextBtnProps.attrs.type).toBe('button')
+    })
+
+    it('should be disabled at last slide in non-circular mode', async () => {
+      let nextBtnProps: any
+
+      mount(Carousel.Root, {
+        props: {
+          modelValue: 'b',
+        },
+        slots: {
+          default: () => [
+            h(Carousel.Item as any, { value: 'a' }, { default: () => h('div', 'A') }),
+            h(Carousel.Item as any, { value: 'b' }, { default: () => h('div', 'B') }),
+            h(Carousel.Next as any, {}, {
+              default: (p: any) => {
+                nextBtnProps = p
+                return h('button', 'Next')
+              },
+            }),
+          ],
+        },
+      })
+
+      await nextTick()
+
+      expect(nextBtnProps.isAtEdge).toBe(true)
+      expect(nextBtnProps.isDisabled).toBe(true)
+    })
+
+    it('should account for perView when computing edge', async () => {
+      let nextBtnProps: any
+
+      mount(Carousel.Root, {
+        props: {
+          modelValue: 'a',
+          perView: 2,
+        },
+        slots: {
+          default: () => [
+            h(Carousel.Item as any, { value: 'a' }, { default: () => h('div', 'A') }),
+            h(Carousel.Item as any, { value: 'b' }, { default: () => h('div', 'B') }),
+            h(Carousel.Next as any, {}, {
+              default: (p: any) => {
+                nextBtnProps = p
+                return h('button', 'Next')
+              },
+            }),
+          ],
+        },
+      })
+
+      await nextTick()
+
+      // perView=2, 2 slides: selectedIndex(0) >= size(2) - perView(2) = 0
+      expect(nextBtnProps.isAtEdge).toBe(true)
+    })
+
+    it('should not be disabled at last slide in circular mode', async () => {
+      let nextBtnProps: any
+
+      mount(Carousel.Root, {
+        props: {
+          modelValue: 'b',
+          circular: true,
+        },
+        slots: {
+          default: () => [
+            h(Carousel.Item as any, { value: 'a' }, { default: () => h('div', 'A') }),
+            h(Carousel.Item as any, { value: 'b' }, { default: () => h('div', 'B') }),
+            h(Carousel.Next as any, {}, {
+              default: (p: any) => {
+                nextBtnProps = p
+                return h('button', 'Next')
+              },
+            }),
+          ],
+        },
+      })
+
+      await nextTick()
+
+      expect(nextBtnProps.isAtEdge).toBe(false)
+      expect(nextBtnProps.isDisabled).toBe(false)
+    })
+  })
+
+  describe('integration', () => {
+    it('should skip disabled slides during navigation', async () => {
+      const selected = ref<string>()
+
+      let rootProps: any
+      let slide1Props: any
+      let slide3Props: any
+
+      mount(Carousel.Root, {
+        props: {
+          'modelValue': selected.value,
+          'onUpdate:modelValue': (value: unknown) => {
+            selected.value = value as string
+          },
+        },
+        slots: {
+          default: (props: any) => {
+            rootProps = props
+            return [
+              h(Carousel.Item as any, { value: 'slide-1' }, {
+                default: (p: any) => {
+                  slide1Props = p
+                  return h('div', 'Slide 1')
+                },
+              }),
+              h(Carousel.Item as any, { value: 'slide-2', disabled: true }, {
+                default: () => h('div', 'Slide 2'),
+              }),
+              h(Carousel.Item as any, { value: 'slide-3' }, {
+                default: (p: any) => {
+                  slide3Props = p
+                  return h('div', 'Slide 3')
+                },
+              }),
+            ]
+          },
+        },
+      })
+
+      await nextTick()
+
+      slide1Props.select()
+      await nextTick()
+
+      rootProps.next()
+      await nextTick()
+
+      expect(selected.value).toBe('slide-3')
+      expect(slide3Props.isSelected).toBe(true)
+    })
+
+    it('should use custom namespace for isolation', async () => {
+      let carousel1Slide1Props: any
+      let carousel1Slide2Props: any
+      let carousel2Slide1Props: any
+      let carousel2Slide2Props: any
+
+      mount(defineComponent({
+        render: () => [
+          h(Carousel.Root as any, { namespace: 'carousel-1', mandatory: false }, () => [
+            h(Carousel.Item as any, { value: 'slide-a', namespace: 'carousel-1' }, {
+              default: (props: any) => {
+                carousel1Slide1Props = props
+                return h('div', 'Carousel 1 Slide A')
+              },
+            }),
+            h(Carousel.Item as any, { value: 'slide-b', namespace: 'carousel-1' }, {
+              default: (props: any) => {
+                carousel1Slide2Props = props
+                return h('div', 'Carousel 1 Slide B')
+              },
+            }),
+          ]),
+          h(Carousel.Root as any, { namespace: 'carousel-2' }, () => [
+            h(Carousel.Item as any, { value: 'slide-a', namespace: 'carousel-2' }, {
+              default: (props: any) => {
+                carousel2Slide1Props = props
+                return h('div', 'Carousel 2 Slide A')
+              },
+            }),
+            h(Carousel.Item as any, { value: 'slide-b', namespace: 'carousel-2' }, {
+              default: (props: any) => {
+                carousel2Slide2Props = props
+                return h('div', 'Carousel 2 Slide B')
+              },
+            }),
+          ]),
+        ],
+      }))
+
+      await nextTick()
+
+      // Select in carousel 1 only
+      carousel1Slide1Props.select()
+      await nextTick()
+
+      // Carousel 1 should have slide-a selected (via select())
+      // Carousel 2 should have slide-a selected (via mandatory: force)
+      // but they must be independent — selecting in one doesn't affect the other
+      expect(carousel1Slide1Props.isSelected).toBe(true)
+      expect(carousel1Slide2Props.isSelected).toBe(false)
+      expect(carousel2Slide1Props.isSelected).toBe(true)
+      expect(carousel2Slide2Props.isSelected).toBe(false)
+    })
+
+    it('should support v-model binding', async () => {
+      const selected = ref<string>('slide-2')
+
+      let slide1Props: any
+      let slide2Props: any
+
+      mount(Carousel.Root, {
+        props: {
+          'modelValue': selected.value,
+          'onUpdate:modelValue': (value: unknown) => {
+            selected.value = value as string
+          },
+        },
+        slots: {
+          default: () => [
+            h(Carousel.Item as any, { value: 'slide-1' }, {
+              default: (p: any) => {
+                slide1Props = p
+                return h('div', 'Slide 1')
+              },
+            }),
+            h(Carousel.Item as any, { value: 'slide-2' }, {
+              default: (p: any) => {
+                slide2Props = p
+                return h('div', 'Slide 2')
+              },
+            }),
+          ],
+        },
+      })
+
+      await nextTick()
+
+      expect(slide2Props.isSelected).toBe(true)
+      expect(slide1Props.isSelected).toBe(false)
+    })
+  })
+
+  describe('sSR / Hydration', () => {
+    it('should render to string on server without errors', async () => {
+      const app = createSSRApp(defineComponent({
+        render: () =>
+          h(Carousel.Root as any, {}, {
+            default: () => [
+              h(Carousel.Item as any, { value: 'slide-1' }, {
+                default: (props: any) => h('div', { ...props.attrs }, 'Slide 1'),
+              }),
+              h(Carousel.Item as any, { value: 'slide-2' }, {
+                default: (props: any) => h('div', { ...props.attrs }, 'Slide 2'),
+              }),
+            ],
+          }),
+      }))
+
+      const html = await renderToString(app)
+
+      expect(html).toBeTruthy()
+      expect(html).toContain('Slide 1')
+      expect(html).toContain('Slide 2')
+    })
+
+    it('should render ARIA attributes on server', async () => {
+      const app = createSSRApp(defineComponent({
+        render: () =>
+          h(Carousel.Root as any, { modelValue: 'slide-1' }, {
+            default: () =>
+              h(Carousel.Item as any, { value: 'slide-1' }, {
+                default: (props: any) => h('div', { ...props.attrs }, 'Slide 1'),
+              }),
+          }),
+      }))
+
+      const html = await renderToString(app)
+
+      expect(html).toContain('aria-roledescription="slide"')
+      expect(html).toContain('role="group"')
+    })
+  })
+})
diff --git a/packages/0/src/components/Carousel/index.ts b/packages/0/src/components/Carousel/index.ts
new file mode 100644
index 000000000..81790da7b
--- /dev/null
+++ b/packages/0/src/components/Carousel/index.ts
@@ -0,0 +1,243 @@
+export { provideCarouselRoot, useCarouselRoot } from './CarouselRoot.vue'
+export { default as CarouselRoot } from './CarouselRoot.vue'
+export { default as CarouselViewport } from './CarouselViewport.vue'
+export { default as CarouselItem } from './CarouselItem.vue'
+export { default as CarouselPrevious } from './CarouselPrevious.vue'
+export { default as CarouselNext } from './CarouselNext.vue'
+export { default as CarouselIndicator } from './CarouselIndicator.vue'
+export { default as CarouselProgress } from './CarouselProgress.vue'
+export { default as CarouselLiveRegion } from './CarouselLiveRegion.vue'
+
+export type { CarouselContext, CarouselOrientation, CarouselPartTicket, CarouselRootProps, CarouselRootSlotProps, CarouselTicket } from './CarouselRoot.vue'
+export type { CarouselViewportProps, CarouselViewportSlotProps } from './CarouselViewport.vue'
+export type { CarouselItemProps, CarouselItemSlotProps } from './CarouselItem.vue'
+export type { CarouselPreviousProps, CarouselPreviousSlotProps } from './CarouselPrevious.vue'
+export type { CarouselNextProps, CarouselNextSlotProps } from './CarouselNext.vue'
+export type { CarouselIndicatorItem, CarouselIndicatorProps, CarouselIndicatorSlotProps } from './CarouselIndicator.vue'
+export type { CarouselProgressProps, CarouselProgressSlotProps } from './CarouselProgress.vue'
+export type { CarouselLiveRegionProps, CarouselLiveRegionSlotProps } from './CarouselLiveRegion.vue'
+
+// Components
+import Indicator from './CarouselIndicator.vue'
+import Item from './CarouselItem.vue'
+import LiveRegion from './CarouselLiveRegion.vue'
+import Next from './CarouselNext.vue'
+import Previous from './CarouselPrevious.vue'
+import Progress from './CarouselProgress.vue'
+import Root from './CarouselRoot.vue'
+import Viewport from './CarouselViewport.vue'
+
+/**
+ * Carousel component with sub-components for building accessible slide navigation.
+ *
+ * @see https://0.vuetifyjs.com/components/semantic/carousel
+ *
+ * @example
+ * ```vue
+ * <script setup lang="ts">
+ *   import { Carousel } from '@vuetify/v0'
+ * </script>
+ *
+ * <template>
+ *   <Carousel.Root circular>
+ *     <Carousel.Viewport>
+ *       <Carousel.Item v-for="i in 5" :key="i" :value="i">
+ *         Slide {{ i }}
+ *       </Carousel.Item>
+ *     </Carousel.Viewport>
+ *
+ *     <Carousel.Previous>Previous</Carousel.Previous>
+ *     <Carousel.Next>Next</Carousel.Next>
+ *   </Carousel.Root>
+ * </template>
+ * ```
+ */
+export const Carousel = {
+  /**
+   * Root component that provides carousel context.
+   *
+   * @see https://0.vuetifyjs.com/components/semantic/carousel
+   *
+   * @example
+   * ```vue
+   * <script setup lang="ts">
+   *   import { Carousel } from '@vuetify/v0'
+   * </script>
+   *
+   * <template>
+   *   <Carousel.Root circular :autoplay="5000">
+   *     <Carousel.Viewport>
+   *       <Carousel.Item v-for="i in 5" :key="i" :value="i">
+   *         Slide {{ i }}
+   *       </Carousel.Item>
+   *     </Carousel.Viewport>
+   *
+   *     <Carousel.Previous>Previous</Carousel.Previous>
+   *     <Carousel.Next>Next</Carousel.Next>
+   *     <Carousel.LiveRegion class="sr-only" />
+   *   </Carousel.Root>
+   * </template>
+   * ```
+   */
+  Root,
+  /**
+   * Scroll-snap container for carousel items. Handles native drag/swipe
+   * via CSS scroll-snap and synchronizes scroll position with selection.
+   *
+   * @see https://0.vuetifyjs.com/components/semantic/carousel
+   *
+   * @example
+   * ```vue
+   * <template>
+   *   <Carousel.Viewport class="cursor-grab data-[dragging]:cursor-grabbing">
+   *     <Carousel.Item v-for="i in 5" :key="i" :value="i">
+   *       Slide {{ i }}
+   *     </Carousel.Item>
+   *   </Carousel.Viewport>
+   *
+   *   <!-- With slot props -->
+   *   <Carousel.Viewport v-slot="{ isDragging }">
+   *     <span v-if="isDragging">Dragging...</span>
+   *   </Carousel.Viewport>
+   * </template>
+   * ```
+   */
+  Viewport,
+  /**
+   * Individual carousel slide that registers with the step context.
+   * Exposes selection state, visibility, and ARIA attributes.
+   *
+   * @see https://0.vuetifyjs.com/components/semantic/carousel
+   *
+   * @example
+   * ```vue
+   * <template>
+   *   <Carousel.Item :value="1">Slide 1</Carousel.Item>
+   *
+   *   <!-- With slot props -->
+   *   <Carousel.Item :value="2" v-slot="{ isActive, isSelected }">
+   *     <div :class="{ 'opacity-100': isActive, 'opacity-40': !isActive }">
+   *       Slide 2
+   *     </div>
+   *   </Carousel.Item>
+   *
+   *   <!-- With data attributes -->
+   *   <Carousel.Item :value="3" class="data-[active]:opacity-100 opacity-40">
+   *     Slide 3
+   *   </Carousel.Item>
+   * </template>
+   * ```
+   */
+  Item,
+  /**
+   * Navigation button that moves to the previous slide. Automatically
+   * disables at the first slide in non-circular mode.
+   *
+   * @see https://0.vuetifyjs.com/components/semantic/carousel
+   *
+   * @example
+   * ```vue
+   * <template>
+   *   <Carousel.Previous>Previous</Carousel.Previous>
+   *
+   *   <!-- With slot props -->
+   *   <Carousel.Previous v-slot="{ isDisabled, isAtEdge }">
+   *     <span :class="{ 'opacity-50': isDisabled }">‹</span>
+   *   </Carousel.Previous>
+   *
+   *   <!-- With data attributes -->
+   *   <Carousel.Previous class="data-[disabled]:opacity-40">
+   *     Previous
+   *   </Carousel.Previous>
+   * </template>
+   * ```
+   */
+  Previous,
+  /**
+   * Navigation button that moves to the next slide. Automatically
+   * disables at the last visible boundary in non-circular mode.
+   *
+   * @see https://0.vuetifyjs.com/components/semantic/carousel
+   *
+   * @example
+   * ```vue
+   * <template>
+   *   <Carousel.Next>Next</Carousel.Next>
+   *
+   *   <!-- With slot props -->
+   *   <Carousel.Next v-slot="{ isDisabled, isAtEdge }">
+   *     <span :class="{ 'opacity-50': isDisabled }">›</span>
+   *   </Carousel.Next>
+   *
+   *   <!-- With data attributes -->
+   *   <Carousel.Next class="data-[disabled]:opacity-40">
+   *     Next
+   *   </Carousel.Next>
+   * </template>
+   * ```
+   */
+  Next,
+  /**
+   * Dot indicator navigation showing the active slide. Exposes an
+   * `items` array via slot props — one entry per slide with selection
+   * state and ARIA attributes. Uses roving tabindex for keyboard nav.
+   *
+   * @see https://0.vuetifyjs.com/components/semantic/carousel
+   *
+   * @example
+   * ```vue
+   * <template>
+   *   <Carousel.Indicator v-slot="{ items }">
+   *     <button
+   *       v-for="item in items"
+   *       :key="item.index"
+   *       v-bind="item.attrs"
+   *       class="size-2 rounded-full bg-surface-variant data-[selected]:bg-primary"
+   *     />
+   *   </Carousel.Indicator>
+   * </template>
+   * ```
+   */
+  Indicator,
+  /**
+   * Autoplay progress bar that fills based on remaining timer duration.
+   * Exposes progress (0–1), autoplay state, and width styling via
+   * slot props. Use `data-state` to style active/paused/idle states.
+   *
+   * @see https://0.vuetifyjs.com/components/semantic/carousel
+   *
+   * @example
+   * ```vue
+   * <template>
+   *   <Carousel.Progress
+   *     class="h-1 bg-surface-variant data-[state=idle]:hidden"
+   *   >
+   *     <template #default="{ attrs }">
+   *       <div
+   *         class="h-full bg-primary transition-[width]"
+   *         :style="attrs.style"
+   *       />
+   *     </template>
+   *   </Carousel.Progress>
+   * </template>
+   * ```
+   */
+  Progress,
+  /**
+   * Visually-hidden live region that announces slide changes to screen
+   * readers. Should be styled with sr-only/visually-hidden CSS.
+   *
+   * @see https://0.vuetifyjs.com/components/semantic/carousel
+   *
+   * @example
+   * ```vue
+   * <template>
+   *   <Carousel.Root>
+   *     <Carousel.LiveRegion class="sr-only" />
+   *     <!-- other carousel items -->
+   *   </Carousel.Root>
+   * </template>
+   * ```
+   */
+  LiveRegion,
+}
diff --git a/packages/0/src/components/index.ts b/packages/0/src/components/index.ts
index 3897e7a90..133761c49 100644
--- a/packages/0/src/components/index.ts
+++ b/packages/0/src/components/index.ts
@@ -3,6 +3,7 @@ export * from './Atom'
 export * from './Avatar'
 export * from './Breadcrumbs'
 export * from './Button'
+export * from './Carousel'
 export * from './Checkbox'
 export * from './Collapsible'
 export * from './Combobox'
diff --git a/packages/0/src/maturity.json b/packages/0/src/maturity.json
index a731af712..e29a8bbc1 100644
--- a/packages/0/src/maturity.json
+++ b/packages/0/src/maturity.json
@@ -496,7 +496,7 @@
       "category": "semantic"
     },
     "Carousel": {
-      "level": "draft",
+      "level": "preview",
       "category": "semantic"
     },
     "Image": {