From e76c2dbef33b4e0140979e462a0571ee35ec9f84 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Fri, 16 Jan 2026 02:43:00 +0000
Subject: [PATCH 1/2] feat(components): add Lazy component for viewport-based
 deferred rendering

Combines useIntersectionObserver + createSelection + useProxyRegistry to provide:
- LazyRoot: detects viewport intersection, manages selection via events
- LazyPlaceholder: shows before intersection
- LazyContent: shows after intersection

Supports eager mode and IntersectionObserver options (rootMargin, threshold).
---
 .../0/src/components/Lazy/LazyContent.vue     |  64 +++++++++
 .../0/src/components/Lazy/LazyPlaceholder.vue |  64 +++++++++
 packages/0/src/components/Lazy/LazyRoot.vue   | 128 ++++++++++++++++++
 packages/0/src/components/Lazy/index.ts       |  90 ++++++++++++
 packages/0/src/components/index.ts            |   1 +
 5 files changed, 347 insertions(+)
 create mode 100644 packages/0/src/components/Lazy/LazyContent.vue
 create mode 100644 packages/0/src/components/Lazy/LazyPlaceholder.vue
 create mode 100644 packages/0/src/components/Lazy/LazyRoot.vue
 create mode 100644 packages/0/src/components/Lazy/index.ts

diff --git a/packages/0/src/components/Lazy/LazyContent.vue b/packages/0/src/components/Lazy/LazyContent.vue
new file mode 100644
index 000000000..40b3ad787
--- /dev/null
+++ b/packages/0/src/components/Lazy/LazyContent.vue
@@ -0,0 +1,64 @@
+/**
+ * @module LazyContent
+ *
+ * @remarks
+ * Content component shown after the element intersects the viewport.
+ * Registers with the Lazy context and displays when content is loaded.
+ */
+
+<script lang="ts">
+  // Types
+  import type { AtomProps } from '#v0/components/Atom'
+
+  export interface LazyContentProps extends AtomProps {
+    /** Namespace for retrieving lazy context */
+    namespace?: string
+  }
+
+  export interface LazyContentSlotProps {
+    /** Whether this content is currently visible */
+    isSelected: boolean
+  }
+</script>
+
+<script lang="ts" setup>
+  // Components
+  import { Atom } from '#v0/components/Atom'
+  // Composables
+  import { useLazyRoot } from './LazyRoot.vue'
+
+  // Utilities
+  import { onUnmounted, toRef } from 'vue'
+
+  defineOptions({ name: 'LazyContent' })
+
+  defineSlots<{
+    default: (props: LazyContentSlotProps) => any
+  }>()
+
+  const {
+    as = 'div',
+    renderless,
+    namespace = 'v0:lazy',
+  } = defineProps<LazyContentProps>()
+
+  const context = useLazyRoot(namespace)
+
+  const ticket = context.register({ type: 'content' })
+
+  const slotProps = toRef((): LazyContentSlotProps => ({
+    isSelected: ticket.isSelected.value,
+  }))
+
+  onUnmounted(() => context.unregister(ticket.id))
+</script>
+
+<template>
+  <Atom
+    v-if="ticket.isSelected.value"
+    :as
+    :renderless
+  >
+    <slot v-bind="slotProps" />
+  </Atom>
+</template>
diff --git a/packages/0/src/components/Lazy/LazyPlaceholder.vue b/packages/0/src/components/Lazy/LazyPlaceholder.vue
new file mode 100644
index 000000000..0a1a97040
--- /dev/null
+++ b/packages/0/src/components/Lazy/LazyPlaceholder.vue
@@ -0,0 +1,64 @@
+/**
+ * @module LazyPlaceholder
+ *
+ * @remarks
+ * Placeholder component shown before content intersects the viewport.
+ * Registers with the Lazy context and displays when content is not yet loaded.
+ */
+
+<script lang="ts">
+  // Types
+  import type { AtomProps } from '#v0/components/Atom'
+
+  export interface LazyPlaceholderProps extends AtomProps {
+    /** Namespace for retrieving lazy context */
+    namespace?: string
+  }
+
+  export interface LazyPlaceholderSlotProps {
+    /** Whether this placeholder is currently visible */
+    isSelected: boolean
+  }
+</script>
+
+<script lang="ts" setup>
+  // Components
+  import { Atom } from '#v0/components/Atom'
+  // Composables
+  import { useLazyRoot } from './LazyRoot.vue'
+
+  // Utilities
+  import { onUnmounted, toRef } from 'vue'
+
+  defineOptions({ name: 'LazyPlaceholder' })
+
+  defineSlots<{
+    default: (props: LazyPlaceholderSlotProps) => any
+  }>()
+
+  const {
+    as = 'div',
+    renderless,
+    namespace = 'v0:lazy',
+  } = defineProps<LazyPlaceholderProps>()
+
+  const context = useLazyRoot(namespace)
+
+  const ticket = context.register({ type: 'placeholder' })
+
+  const slotProps = toRef((): LazyPlaceholderSlotProps => ({
+    isSelected: ticket.isSelected.value,
+  }))
+
+  onUnmounted(() => context.unregister(ticket.id))
+</script>
+
+<template>
+  <Atom
+    v-if="ticket.isSelected.value"
+    :as
+    :renderless
+  >
+    <slot v-bind="slotProps" />
+  </Atom>
+</template>
diff --git a/packages/0/src/components/Lazy/LazyRoot.vue b/packages/0/src/components/Lazy/LazyRoot.vue
new file mode 100644
index 000000000..930e0ad75
--- /dev/null
+++ b/packages/0/src/components/Lazy/LazyRoot.vue
@@ -0,0 +1,128 @@
+/**
+ * @module LazyRoot
+ *
+ * @remarks
+ * Root component for deferred content rendering. Uses IntersectionObserver
+ * to detect when the element enters the viewport and switches from
+ * placeholder to content. Uses selection internally to ensure one
+ * child is always visible.
+ */
+
+<script lang="ts">
+  // Foundational
+  import { createContext } from '#v0/composables/createContext'
+
+  // Types
+  import type { AtomProps } from '#v0/components/Atom'
+  import type { SelectionContext, SelectionTicket } from '#v0/composables/createSelection'
+  import type { Ref } from 'vue'
+
+  export interface LazyRootProps extends AtomProps {
+    /** Namespace for dependency injection */
+    namespace?: string
+    /** When true, content renders immediately without waiting for intersection */
+    eager?: boolean
+    /** IntersectionObserver root margin */
+    rootMargin?: string
+    /** IntersectionObserver threshold */
+    threshold?: number | number[]
+  }
+
+  export interface LazyRootSlotProps {
+    /** Whether the element has intersected the viewport */
+    isIntersected: boolean
+    /** Whether content is ready to be displayed */
+    hasContent: boolean
+  }
+
+  export interface LazyTicket extends SelectionTicket {
+    type: 'placeholder' | 'content'
+  }
+
+  export interface LazyRootContext extends SelectionContext<LazyTicket> {
+    /** Whether the element has intersected the viewport */
+    isIntersected: Readonly<Ref<boolean>>
+  }
+
+  export const [useLazyRoot, provideLazyRoot] = createContext<LazyRootContext>()
+</script>
+
+<script lang="ts" setup>
+  // Components
+  import { Atom } from '#v0/components/Atom'
+
+  // Composables
+  import { createSelection } from '#v0/composables/createSelection'
+  import { useIntersectionObserver } from '#v0/composables/useIntersectionObserver'
+  import { useProxyRegistry } from '#v0/composables/useProxyRegistry'
+
+  // Utilities
+  import { computed, shallowReadonly, shallowRef, watch } from 'vue'
+
+  defineOptions({ name: 'LazyRoot' })
+
+  defineSlots<{
+    default: (props: LazyRootSlotProps) => any
+  }>()
+
+  const {
+    as = 'div',
+    renderless,
+    namespace = 'v0:lazy',
+    eager = false,
+    rootMargin = '0px',
+    threshold = 0,
+  } = defineProps<LazyRootProps>()
+
+  const rootEl = shallowRef<HTMLElement>()
+  const isIntersected = shallowRef(eager)
+
+  const selection = createSelection<LazyTicket>({
+    mandatory: 'force',
+    multiple: false,
+    events: true,
+  })
+
+  const proxy = useProxyRegistry(selection)
+
+  // Select content when intersected, otherwise select placeholder
+  // Watch both isIntersected AND proxy.size (reactive via events) to handle
+  // eager mode where children register after the initial watcher run
+  watch(
+    [isIntersected, () => proxy.size],
+    ([intersected]) => {
+      const target = proxy.values.find(item => item.type === (intersected ? 'content' : 'placeholder'))
+      if (target) selection.select(target.id)
+    },
+    { immediate: true },
+  )
+
+  useIntersectionObserver(
+    rootEl,
+    entries => {
+      const entry = entries.at(-1)
+      if (entry?.isIntersecting) {
+        isIntersected.value = true
+      }
+    },
+    { once: true, rootMargin, threshold },
+  )
+
+  const context: LazyRootContext = {
+    ...selection,
+    isIntersected: shallowReadonly(isIntersected),
+  }
+
+  provideLazyRoot(namespace, context)
+
+  const slotProps = computed((): LazyRootSlotProps => ({
+    isIntersected: isIntersected.value,
+    hasContent: isIntersected.value,
+  }))
+</script>
+
+<template>
+  <Atom ref="rootEl" :as :renderless>
+    <slot v-bind="slotProps" />
+  </Atom>
+</template>
diff --git a/packages/0/src/components/Lazy/index.ts b/packages/0/src/components/Lazy/index.ts
new file mode 100644
index 000000000..15de9c8fa
--- /dev/null
+++ b/packages/0/src/components/Lazy/index.ts
@@ -0,0 +1,90 @@
+export { default as LazyContent } from './LazyContent.vue'
+export { default as LazyPlaceholder } from './LazyPlaceholder.vue'
+export { provideLazyRoot, useLazyRoot } from './LazyRoot.vue'
+export { default as LazyRoot } from './LazyRoot.vue'
+
+export type { LazyContentProps, LazyContentSlotProps } from './LazyContent.vue'
+export type { LazyPlaceholderProps, LazyPlaceholderSlotProps } from './LazyPlaceholder.vue'
+export type { LazyRootContext, LazyRootProps, LazyRootSlotProps, LazyTicket } from './LazyRoot.vue'
+
+// Components
+import Content from './LazyContent.vue'
+import Placeholder from './LazyPlaceholder.vue'
+import Root from './LazyRoot.vue'
+
+/**
+ * Lazy component for deferred content rendering based on viewport intersection.
+ *
+ * @see https://0.vuetifyjs.com/components/lazy
+ *
+ * @example
+ * ```vue
+ * <script lang="ts" setup>
+ *   import { Lazy } from '@vuetify/v0'
+ * </script>
+ *
+ * <template>
+ *   <Lazy.Root>
+ *     <Lazy.Placeholder>
+ *       <div class="skeleton h-48 w-full" />
+ *     </Lazy.Placeholder>
+ *
+ *     <Lazy.Content>
+ *       <ExpensiveComponent />
+ *     </Lazy.Content>
+ *   </Lazy.Root>
+ * </template>
+ * ```
+ *
+ * @example
+ * Eager mode (render content immediately):
+ * ```vue
+ * <template>
+ *   <Lazy.Root eager>
+ *     <Lazy.Placeholder>
+ *       <div class="skeleton" />
+ *     </Lazy.Placeholder>
+ *
+ *     <Lazy.Content>
+ *       <div>Renders immediately</div>
+ *     </Lazy.Content>
+ *   </Lazy.Root>
+ * </template>
+ * ```
+ *
+ * @example
+ * With root margin for preloading:
+ * ```vue
+ * <template>
+ *   <Lazy.Root root-margin="200px">
+ *     <Lazy.Placeholder>
+ *       <ImageSkeleton />
+ *     </Lazy.Placeholder>
+ *
+ *     <Lazy.Content>
+ *       <img src="large-image.jpg" />
+ *     </Lazy.Content>
+ *   </Lazy.Root>
+ * </template>
+ * ```
+ */
+export const Lazy = {
+  /**
+   * Root component for lazy loading contexts.
+   *
+   * @see https://0.vuetifyjs.com/components/lazy#lazyroot
+   */
+  Root,
+  /**
+   * Placeholder component shown before content intersects viewport.
+   *
+   * @see https://0.vuetifyjs.com/components/lazy#lazyplaceholder
+   */
+  Placeholder,
+  /**
+   * Content component shown after viewport intersection.
+   *
+   * @see https://0.vuetifyjs.com/components/lazy#lazycontent
+   */
+  Content,
+}
diff --git a/packages/0/src/components/index.ts b/packages/0/src/components/index.ts
index 97e7849cc..cf4deab6c 100644
--- a/packages/0/src/components/index.ts
+++ b/packages/0/src/components/index.ts
@@ -4,6 +4,7 @@ export * from './Checkbox'
 export * from './Dialog'
 export * from './ExpansionPanel'
 export * from './Group'
+export * from './Lazy'
 export * from './Pagination'
 export * from './Popover'
 export * from './Radio'

From 693976679bdd3da84b47283648ced5080e77d5ad Mon Sep 17 00:00:00 2001
From: John Leider <john@vuetifyjs.com>
Date: Fri, 16 Jan 2026 13:53:27 -0600
Subject: [PATCH 2/2] fix(components): improve Lazy component patterns and add
 tests
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Use toRef() instead of computed() for slot props (consistency)
- Normalize slot prop naming (isVisible → hasContent)
- Expose reset/onAfterLeave in LazyRoot slot props
- Export LazyContext type from barrel
- Simplify LazyRootContext to type alias
- Add accessibility attributes to docs example
- Add comprehensive component tests (31 tests)
---
 .../src/examples/components/lazy/basic.vue    |  35 +
 .../0/src/components/Lazy/LazyContent.vue     |  14 +-
 .../0/src/components/Lazy/LazyPlaceholder.vue |  16 +-
 packages/0/src/components/Lazy/LazyRoot.vue   |  71 +-
 packages/0/src/components/Lazy/index.test.ts  | 653 ++++++++++++++++++
 packages/0/src/components/Lazy/index.ts       |  48 +-
 6 files changed, 771 insertions(+), 66 deletions(-)
 create mode 100644 apps/docs/src/examples/components/lazy/basic.vue
 create mode 100644 packages/0/src/components/Lazy/index.test.ts

diff --git a/apps/docs/src/examples/components/lazy/basic.vue b/apps/docs/src/examples/components/lazy/basic.vue
new file mode 100644
index 000000000..9d5031008
--- /dev/null
+++ b/apps/docs/src/examples/components/lazy/basic.vue
@@ -0,0 +1,35 @@
+<script setup lang="ts">
+  import { Lazy } from '@vuetify/v0'
+</script>
+
+<template>
+  <div class="flex flex-col gap-4">
+    <p class="text-sm text-secondary">
+      Scroll down to see the lazy-loaded content appear.
+    </p>
+
+    <div class="h-48 overflow-y-auto border border-outline rounded-lg p-4">
+      <div class="h-32" />
+
+      <Lazy.Root class="min-h-24">
+        <Lazy.Placeholder>
+          <div
+            aria-label="Loading content"
+            class="h-24 rounded-lg bg-surface-tint motion-safe:animate-pulse flex items-center justify-center"
+            role="status"
+          >
+            <span aria-hidden="true" class="text-secondary text-sm">Loading...</span>
+          </div>
+        </Lazy.Placeholder>
+
+        <Lazy.Content>
+          <div class="h-24 rounded-lg bg-primary/10 flex items-center justify-center">
+            <span class="text-primary font-medium">Content loaded!</span>
+          </div>
+        </Lazy.Content>
+      </Lazy.Root>
+
+      <div class="h-32" />
+    </div>
+  </div>
+</template>
diff --git a/packages/0/src/components/Lazy/LazyContent.vue b/packages/0/src/components/Lazy/LazyContent.vue
index 40b3ad787..16f750ea6 100644
--- a/packages/0/src/components/Lazy/LazyContent.vue
+++ b/packages/0/src/components/Lazy/LazyContent.vue
@@ -3,7 +3,7 @@
  *
  * @remarks
  * Content component shown after the element intersects the viewport.
- * Registers with the Lazy context and displays when content is loaded.
+ * Consumes the Lazy context and displays when hasContent is true.
  */
 
 <script lang="ts">
@@ -17,7 +17,7 @@
 
   export interface LazyContentSlotProps {
     /** Whether this content is currently visible */
-    isSelected: boolean
+    hasContent: boolean
   }
 </script>
 
@@ -28,7 +28,7 @@
   import { useLazyRoot } from './LazyRoot.vue'
 
   // Utilities
-  import { onUnmounted, toRef } from 'vue'
+  import { toRef } from 'vue'
 
   defineOptions({ name: 'LazyContent' })
 
@@ -44,18 +44,14 @@
 
   const context = useLazyRoot(namespace)
 
-  const ticket = context.register({ type: 'content' })
-
   const slotProps = toRef((): LazyContentSlotProps => ({
-    isSelected: ticket.isSelected.value,
+    hasContent: context.hasContent.value,
   }))
-
-  onUnmounted(() => context.unregister(ticket.id))
 </script>
 
 <template>
   <Atom
-    v-if="ticket.isSelected.value"
+    v-if="context.hasContent.value"
     :as
     :renderless
   >
diff --git a/packages/0/src/components/Lazy/LazyPlaceholder.vue b/packages/0/src/components/Lazy/LazyPlaceholder.vue
index 0a1a97040..12f6eba58 100644
--- a/packages/0/src/components/Lazy/LazyPlaceholder.vue
+++ b/packages/0/src/components/Lazy/LazyPlaceholder.vue
@@ -3,7 +3,7 @@
  *
  * @remarks
  * Placeholder component shown before content intersects the viewport.
- * Registers with the Lazy context and displays when content is not yet loaded.
+ * Consumes the Lazy context and displays when hasContent is false.
  */
 
 <script lang="ts">
@@ -16,8 +16,8 @@
   }
 
   export interface LazyPlaceholderSlotProps {
-    /** Whether this placeholder is currently visible */
-    isSelected: boolean
+    /** Whether content is ready (placeholder hides when true) */
+    hasContent: boolean
   }
 </script>
 
@@ -28,7 +28,7 @@
   import { useLazyRoot } from './LazyRoot.vue'
 
   // Utilities
-  import { onUnmounted, toRef } from 'vue'
+  import { toRef } from 'vue'
 
   defineOptions({ name: 'LazyPlaceholder' })
 
@@ -44,18 +44,14 @@
 
   const context = useLazyRoot(namespace)
 
-  const ticket = context.register({ type: 'placeholder' })
-
   const slotProps = toRef((): LazyPlaceholderSlotProps => ({
-    isSelected: ticket.isSelected.value,
+    hasContent: context.hasContent.value,
   }))
-
-  onUnmounted(() => context.unregister(ticket.id))
 </script>
 
 <template>
   <Atom
-    v-if="ticket.isSelected.value"
+    v-if="!context.hasContent.value"
     :as
     :renderless
   >
diff --git a/packages/0/src/components/Lazy/LazyRoot.vue b/packages/0/src/components/Lazy/LazyRoot.vue
index 930e0ad75..136d52c9b 100644
--- a/packages/0/src/components/Lazy/LazyRoot.vue
+++ b/packages/0/src/components/Lazy/LazyRoot.vue
@@ -4,8 +4,12 @@
  * @remarks
  * Root component for deferred content rendering. Uses IntersectionObserver
  * to detect when the element enters the viewport and switches from
- * placeholder to content. Uses selection internally to ensure one
- * child is always visible.
+ * placeholder to content. Leverages the useLazy composable for SSR-safe
+ * booted state management.
+ *
+ * Supports integration with Vue Transition via the `onAfterLeave` slot prop,
+ * which resets the booted state when the leave transition completes (unless
+ * eager mode is enabled).
  */
 
 <script lang="ts">
@@ -14,8 +18,7 @@
 
   // Types
   import type { AtomProps } from '#v0/components/Atom'
-  import type { SelectionContext, SelectionTicket } from '#v0/composables/createSelection'
-  import type { Ref } from 'vue'
+  import type { LazyContext } from '#v0/composables/useLazy'
 
   export interface LazyRootProps extends AtomProps {
     /** Namespace for dependency injection */
@@ -29,20 +32,17 @@
   }
 
   export interface LazyRootSlotProps {
-    /** Whether the element has intersected the viewport */
-    isIntersected: boolean
+    /** Whether the lazy content has been activated (intersected or eager) */
+    isBooted: boolean
     /** Whether content is ready to be displayed */
     hasContent: boolean
+    /** Reset booted state. Call on leave transition if not eager. */
+    reset: () => void
+    /** Transition callback for after-leave. Resets if not eager. */
+    onAfterLeave: () => void
   }
 
-  export interface LazyTicket extends SelectionTicket {
-    type: 'placeholder' | 'content'
-  }
-
-  export interface LazyRootContext extends SelectionContext<LazyTicket> {
-    /** Whether the element has intersected the viewport */
-    isIntersected: Readonly<Ref<boolean>>
-  }
+  export type LazyRootContext = LazyContext
 
   export const [useLazyRoot, provideLazyRoot] = createContext<LazyRootContext>()
 </script>
@@ -52,12 +52,11 @@
   import { Atom } from '#v0/components/Atom'
 
   // Composables
-  import { createSelection } from '#v0/composables/createSelection'
   import { useIntersectionObserver } from '#v0/composables/useIntersectionObserver'
-  import { useProxyRegistry } from '#v0/composables/useProxyRegistry'
+  import { useLazy } from '#v0/composables/useLazy'
 
   // Utilities
-  import { computed, shallowReadonly, shallowRef, watch } from 'vue'
+  import { shallowRef, toRef } from 'vue'
 
   defineOptions({ name: 'LazyRoot' })
 
@@ -75,27 +74,10 @@
   } = defineProps<LazyRootProps>()
 
   const rootEl = shallowRef<HTMLElement>()
-  const isIntersected = shallowRef(eager)
-
-  const selection = createSelection<LazyTicket>({
-    mandatory: 'force',
-    multiple: false,
-    events: true,
-  })
-
-  const proxy = useProxyRegistry(selection)
-
-  // Select content when intersected, otherwise select placeholder
-  // Watch both isIntersected AND proxy.size (reactive via events) to handle
-  // eager mode where children register after the initial watcher run
-  watch(
-    [isIntersected, () => proxy.size],
-    ([intersected]) => {
-      const target = proxy.values.find(item => item.type === (intersected ? 'content' : 'placeholder'))
-      if (target) selection.select(target.id)
-    },
-    { immediate: true },
-  )
+  const isIntersected = shallowRef(false)
+
+  // Use useLazy with intersection as the active signal
+  const context = useLazy(isIntersected, { eager })
 
   useIntersectionObserver(
     rootEl,
@@ -108,16 +90,13 @@
     { once: true, rootMargin, threshold },
   )
 
-  const context: LazyRootContext = {
-    ...selection,
-    isIntersected: shallowReadonly(isIntersected),
-  }
-
   provideLazyRoot(namespace, context)
 
-  const slotProps = computed((): LazyRootSlotProps => ({
-    isIntersected: isIntersected.value,
-    hasContent: isIntersected.value,
+  const slotProps = toRef((): LazyRootSlotProps => ({
+    isBooted: context.isBooted.value,
+    hasContent: context.hasContent.value,
+    reset: context.reset,
+    onAfterLeave: context.onAfterLeave,
   }))
 </script>
 
diff --git a/packages/0/src/components/Lazy/index.test.ts b/packages/0/src/components/Lazy/index.test.ts
new file mode 100644
index 000000000..fbd5ec4a9
--- /dev/null
+++ b/packages/0/src/components/Lazy/index.test.ts
@@ -0,0 +1,653 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+// Utilities
+import { mount } from '@vue/test-utils'
+import { defineComponent, h, nextTick, ref } from 'vue'
+
+// Mock hydration as already hydrated
+const mockIsHydrated = ref(true)
+vi.mock('#v0/composables/useHydration', () => ({
+  useHydration: () => ({
+    isHydrated: mockIsHydrated,
+    hydrate: vi.fn(),
+  }),
+}))
+
+vi.mock('#v0/constants/globals', () => ({
+  SUPPORTS_INTERSECTION_OBSERVER: true,
+}))
+
+import { Lazy } from './index'
+
+// Mock IntersectionObserver for happy-dom
+let intersectionCallback: ((entries: IntersectionObserverEntry[]) => void) | null = null
+let mockObserver: {
+  observe: ReturnType<typeof vi.fn>
+  unobserve: ReturnType<typeof vi.fn>
+  disconnect: ReturnType<typeof vi.fn>
+}
+
+beforeEach(() => {
+  intersectionCallback = null
+  mockIsHydrated.value = true
+
+  // Create mock observer
+  mockObserver = {
+    observe: vi.fn(),
+    unobserve: vi.fn(),
+    disconnect: vi.fn(),
+  }
+
+  // Mock IntersectionObserver globally - must use function syntax for constructor
+  globalThis.IntersectionObserver = vi.fn(function (this: any, callback: IntersectionObserverCallback) {
+    intersectionCallback = callback as (entries: IntersectionObserverEntry[]) => void
+    return mockObserver
+  }) as unknown as typeof IntersectionObserver
+  window.IntersectionObserver = globalThis.IntersectionObserver
+
+  vi.clearAllMocks()
+})
+
+// Helper to simulate intersection
+function simulateIntersection (isIntersecting = true) {
+  intersectionCallback?.([{
+    isIntersecting,
+    boundingClientRect: {} as DOMRectReadOnly,
+    intersectionRatio: isIntersecting ? 1 : 0,
+    intersectionRect: {} as DOMRectReadOnly,
+    rootBounds: null,
+    target: document.createElement('div'),
+    time: performance.now(),
+  }])
+}
+
+describe('lazy', () => {
+  describe('root', () => {
+    describe('rendering', () => {
+      it('should render as div by default', async () => {
+        const wrapper = mount(Lazy.Root, {
+          slots: {
+            default: () => h('span', 'Content'),
+          },
+        })
+
+        await nextTick()
+        expect(wrapper.element.tagName).toBe('DIV')
+      })
+
+      it('should render as custom element when as prop is provided', async () => {
+        const wrapper = mount(Lazy.Root, {
+          props: { as: 'section' },
+          slots: {
+            default: () => h('span', 'Content'),
+          },
+        })
+
+        await nextTick()
+        expect(wrapper.element.tagName).toBe('SECTION')
+      })
+
+      it('should render children in default slot', async () => {
+        const wrapper = mount(Lazy.Root, {
+          slots: {
+            default: () => h('span', { class: 'test-child' }, 'Child content'),
+          },
+        })
+
+        await nextTick()
+        expect(wrapper.find('.test-child').exists()).toBe(true)
+        expect(wrapper.find('.test-child').text()).toBe('Child content')
+      })
+    })
+
+    describe('slot props', () => {
+      it('should expose isBooted, hasContent, reset, and onAfterLeave in slot props', async () => {
+        let slotProps: any
+
+        mount(Lazy.Root, {
+          slots: {
+            default: (props: any) => {
+              slotProps = props
+              return h('div', 'Content')
+            },
+          },
+        })
+
+        await nextTick()
+
+        expect(slotProps).toBeDefined()
+        expect(typeof slotProps.isBooted).toBe('boolean')
+        expect(typeof slotProps.hasContent).toBe('boolean')
+        expect(typeof slotProps.reset).toBe('function')
+        expect(typeof slotProps.onAfterLeave).toBe('function')
+      })
+
+      it('should have isBooted=false and hasContent=false initially', async () => {
+        let slotProps: any
+
+        mount(Lazy.Root, {
+          slots: {
+            default: (props: any) => {
+              slotProps = props
+              return h('div', 'Content')
+            },
+          },
+        })
+
+        await nextTick()
+
+        expect(slotProps.isBooted).toBe(false)
+        expect(slotProps.hasContent).toBe(false)
+      })
+
+      it('should update slot props after intersection', async () => {
+        let slotProps: any
+
+        mount(Lazy.Root, {
+          slots: {
+            default: (props: any) => {
+              slotProps = props
+              return h('div', 'Content')
+            },
+          },
+        })
+
+        await nextTick()
+
+        simulateIntersection(true)
+        await nextTick()
+
+        expect(slotProps.isBooted).toBe(true)
+        expect(slotProps.hasContent).toBe(true)
+      })
+    })
+
+    describe('context provision', () => {
+      it('should provide context with default namespace', async () => {
+        const wrapper = mount(Lazy.Root, {
+          slots: {
+            default: () => [
+              h(Lazy.Placeholder, {}, () => 'Skeleton'),
+              h(Lazy.Content, {}, () => 'Content'),
+            ],
+          },
+        })
+
+        await nextTick()
+
+        const placeholder = wrapper.findComponent(Lazy.Placeholder as any)
+        expect(placeholder.exists()).toBe(true)
+      })
+
+      it('should provide context with custom namespace', async () => {
+        const wrapper = mount(Lazy.Root, {
+          props: { namespace: 'custom-lazy' },
+          slots: {
+            default: () => [
+              h(Lazy.Placeholder, { namespace: 'custom-lazy' }, () => 'Skeleton'),
+              h(Lazy.Content, { namespace: 'custom-lazy' }, () => 'Content'),
+            ],
+          },
+        })
+
+        await nextTick()
+
+        const placeholder = wrapper.findComponent(Lazy.Placeholder as any)
+        expect(placeholder.exists()).toBe(true)
+      })
+    })
+
+    describe('eager mode', () => {
+      it('should have hasContent=true immediately when eager=true', async () => {
+        let slotProps: any
+
+        mount(Lazy.Root, {
+          props: { eager: true },
+          slots: {
+            default: (props: any) => {
+              slotProps = props
+              return h('div', 'Content')
+            },
+          },
+        })
+
+        await nextTick()
+
+        expect(slotProps.hasContent).toBe(true)
+      })
+
+      it('should show content immediately when eager=true', async () => {
+        const wrapper = mount(Lazy.Root, {
+          props: { eager: true },
+          slots: {
+            default: () => [
+              h(Lazy.Placeholder, {}, () => h('div', { class: 'skeleton' }, 'Skeleton')),
+              h(Lazy.Content, {}, () => h('div', { class: 'content' }, 'Content')),
+            ],
+          },
+        })
+
+        await nextTick()
+
+        expect(wrapper.find('.content').exists()).toBe(true)
+        expect(wrapper.find('.skeleton').exists()).toBe(false)
+      })
+    })
+
+    describe('intersection observer options', () => {
+      it('should pass rootMargin to IntersectionObserver', async () => {
+        mount(Lazy.Root, {
+          props: { rootMargin: '50px' },
+          slots: {
+            default: () => h('div', 'Content'),
+          },
+        })
+
+        await nextTick()
+
+        expect(globalThis.IntersectionObserver).toHaveBeenCalledWith(
+          expect.any(Function),
+          expect.objectContaining({ rootMargin: '50px' }),
+        )
+      })
+
+      it('should pass threshold to IntersectionObserver', async () => {
+        mount(Lazy.Root, {
+          props: { threshold: 0.5 },
+          slots: {
+            default: () => h('div', 'Content'),
+          },
+        })
+
+        await nextTick()
+
+        expect(globalThis.IntersectionObserver).toHaveBeenCalledWith(
+          expect.any(Function),
+          expect.objectContaining({ threshold: 0.5 }),
+        )
+      })
+
+      it('should pass threshold array to IntersectionObserver', async () => {
+        mount(Lazy.Root, {
+          props: { threshold: [0.25, 0.5, 0.75] },
+          slots: {
+            default: () => h('div', 'Content'),
+          },
+        })
+
+        await nextTick()
+
+        expect(globalThis.IntersectionObserver).toHaveBeenCalledWith(
+          expect.any(Function),
+          expect.objectContaining({ threshold: [0.25, 0.5, 0.75] }),
+        )
+      })
+    })
+  })
+
+  describe('placeholder', () => {
+    describe('rendering', () => {
+      it('should render as div by default', async () => {
+        const wrapper = mount(Lazy.Root, {
+          slots: {
+            default: () => h(Lazy.Placeholder, {}, () => 'Skeleton'),
+          },
+        })
+
+        await nextTick()
+
+        const placeholder = wrapper.findComponent(Lazy.Placeholder as any)
+        expect(placeholder.element.tagName).toBe('DIV')
+      })
+
+      it('should render as custom element when as prop is provided', async () => {
+        const wrapper = mount(Lazy.Root, {
+          slots: {
+            default: () => h(Lazy.Placeholder, { as: 'section' }, () => 'Skeleton'),
+          },
+        })
+
+        await nextTick()
+
+        const placeholder = wrapper.findComponent(Lazy.Placeholder as any)
+        expect(placeholder.element.tagName).toBe('SECTION')
+      })
+
+      it('should render when hasContent is false', async () => {
+        const wrapper = mount(Lazy.Root, {
+          slots: {
+            default: () => [
+              h(Lazy.Placeholder, {}, () => h('div', { class: 'skeleton' }, 'Skeleton')),
+              h(Lazy.Content, {}, () => h('div', { class: 'content' }, 'Content')),
+            ],
+          },
+        })
+
+        await nextTick()
+
+        expect(wrapper.find('.skeleton').exists()).toBe(true)
+        expect(wrapper.find('.content').exists()).toBe(false)
+      })
+
+      it('should not render after intersection', async () => {
+        const wrapper = mount(Lazy.Root, {
+          slots: {
+            default: () => [
+              h(Lazy.Placeholder, {}, () => h('div', { class: 'skeleton' }, 'Skeleton')),
+              h(Lazy.Content, {}, () => h('div', { class: 'content' }, 'Content')),
+            ],
+          },
+        })
+
+        await nextTick()
+        expect(wrapper.find('.skeleton').exists()).toBe(true)
+
+        simulateIntersection(true)
+        await nextTick()
+
+        expect(wrapper.find('.skeleton').exists()).toBe(false)
+      })
+    })
+
+    describe('slot props', () => {
+      it('should expose hasContent in slot props', async () => {
+        let slotProps: any
+
+        mount(Lazy.Root, {
+          slots: {
+            default: () => h(Lazy.Placeholder, null, {
+              default: (props: any) => {
+                slotProps = props
+                return h('div', 'Skeleton')
+              },
+            }),
+          },
+        })
+
+        await nextTick()
+
+        expect(slotProps).toBeDefined()
+        expect(typeof slotProps.hasContent).toBe('boolean')
+        expect(slotProps.hasContent).toBe(false)
+      })
+    })
+  })
+
+  describe('content', () => {
+    describe('rendering', () => {
+      it('should render as div by default when visible', async () => {
+        const wrapper = mount(Lazy.Root, {
+          props: { eager: true },
+          slots: {
+            default: () => h(Lazy.Content, {}, () => 'Content'),
+          },
+        })
+
+        await nextTick()
+
+        const content = wrapper.findComponent(Lazy.Content as any)
+        expect(content.element.tagName).toBe('DIV')
+      })
+
+      it('should render as custom element when as prop is provided', async () => {
+        const wrapper = mount(Lazy.Root, {
+          props: { eager: true },
+          slots: {
+            default: () => h(Lazy.Content, { as: 'article' }, () => 'Content'),
+          },
+        })
+
+        await nextTick()
+
+        const content = wrapper.findComponent(Lazy.Content as any)
+        expect(content.element.tagName).toBe('ARTICLE')
+      })
+
+      it('should not render when hasContent is false', async () => {
+        const wrapper = mount(Lazy.Root, {
+          slots: {
+            default: () => [
+              h(Lazy.Placeholder, {}, () => h('div', { class: 'skeleton' }, 'Skeleton')),
+              h(Lazy.Content, {}, () => h('div', { class: 'content' }, 'Content')),
+            ],
+          },
+        })
+
+        await nextTick()
+
+        expect(wrapper.find('.content').exists()).toBe(false)
+        expect(wrapper.find('.skeleton').exists()).toBe(true)
+      })
+
+      it('should render after intersection', async () => {
+        const wrapper = mount(Lazy.Root, {
+          slots: {
+            default: () => [
+              h(Lazy.Placeholder, {}, () => h('div', { class: 'skeleton' }, 'Skeleton')),
+              h(Lazy.Content, {}, () => h('div', { class: 'content' }, 'Content')),
+            ],
+          },
+        })
+
+        await nextTick()
+        expect(wrapper.find('.content').exists()).toBe(false)
+
+        simulateIntersection(true)
+        await nextTick()
+
+        expect(wrapper.find('.content').exists()).toBe(true)
+      })
+    })
+
+    describe('slot props', () => {
+      it('should expose hasContent in slot props', async () => {
+        let slotProps: any
+
+        mount(Lazy.Root, {
+          props: { eager: true },
+          slots: {
+            default: () => h(Lazy.Content, null, {
+              default: (props: any) => {
+                slotProps = props
+                return h('div', 'Content')
+              },
+            }),
+          },
+        })
+
+        await nextTick()
+
+        expect(slotProps).toBeDefined()
+        expect(typeof slotProps.hasContent).toBe('boolean')
+        expect(slotProps.hasContent).toBe(true)
+      })
+    })
+  })
+
+  describe('integration', () => {
+    it('should work with complete lazy loading flow', async () => {
+      const wrapper = mount(Lazy.Root, {
+        slots: {
+          default: () => [
+            h(Lazy.Placeholder, {}, () => h('div', { class: 'skeleton' }, 'Loading...')),
+            h(Lazy.Content, {}, () => h('div', { class: 'content' }, 'Loaded!')),
+          ],
+        },
+      })
+
+      await nextTick()
+
+      // Initially shows placeholder
+      expect(wrapper.find('.skeleton').exists()).toBe(true)
+      expect(wrapper.find('.content').exists()).toBe(false)
+
+      // Simulate viewport intersection
+      simulateIntersection(true)
+      await nextTick()
+
+      // Now shows content
+      expect(wrapper.find('.skeleton').exists()).toBe(false)
+      expect(wrapper.find('.content').exists()).toBe(true)
+    })
+
+    it('should use custom namespace for isolation', async () => {
+      const wrapper = mount(defineComponent({
+        render: () => [
+          h(Lazy.Root, { namespace: 'lazy-1' }, () => [
+            h(Lazy.Placeholder, { namespace: 'lazy-1' }, () => 'Skeleton 1'),
+            h(Lazy.Content, { namespace: 'lazy-1' }, () => 'Content 1'),
+          ]),
+          h(Lazy.Root, { namespace: 'lazy-2' }, () => [
+            h(Lazy.Placeholder, { namespace: 'lazy-2' }, () => 'Skeleton 2'),
+            h(Lazy.Content, { namespace: 'lazy-2' }, () => 'Content 2'),
+          ]),
+        ],
+      }))
+
+      await nextTick()
+
+      const placeholders = wrapper.findAllComponents(Lazy.Placeholder as any)
+      expect(placeholders).toHaveLength(2)
+      expect(placeholders[0]?.text()).toBe('Skeleton 1')
+      expect(placeholders[1]?.text()).toBe('Skeleton 2')
+    })
+
+    it('should support using slot props directly on root', async () => {
+      const wrapper = mount(Lazy.Root, {
+        slots: {
+          default: ({ hasContent }: { hasContent: boolean }) => hasContent
+            ? h('div', { class: 'content' }, 'Loaded!')
+            : h('div', { class: 'skeleton' }, 'Loading...'),
+        },
+      })
+
+      await nextTick()
+
+      // Initially shows placeholder
+      expect(wrapper.find('.skeleton').exists()).toBe(true)
+      expect(wrapper.find('.content').exists()).toBe(false)
+
+      // Simulate viewport intersection
+      simulateIntersection(true)
+      await nextTick()
+
+      // Now shows content
+      expect(wrapper.find('.skeleton').exists()).toBe(false)
+      expect(wrapper.find('.content').exists()).toBe(true)
+    })
+  })
+
+  describe('reset functionality', () => {
+    it('should reset booted state when reset is called', async () => {
+      let slotProps: any
+
+      mount(Lazy.Root, {
+        slots: {
+          default: (props: any) => {
+            slotProps = props
+            return h('div', 'Content')
+          },
+        },
+      })
+
+      await nextTick()
+
+      // Simulate intersection to boot
+      simulateIntersection(true)
+      await nextTick()
+
+      expect(slotProps.isBooted).toBe(true)
+
+      // Reset
+      slotProps.reset()
+      await nextTick()
+
+      expect(slotProps.isBooted).toBe(false)
+    })
+
+    it('onAfterLeave should reset when not eager', async () => {
+      let slotProps: any
+
+      mount(Lazy.Root, {
+        slots: {
+          default: (props: any) => {
+            slotProps = props
+            return h('div', 'Content')
+          },
+        },
+      })
+
+      await nextTick()
+
+      // Simulate intersection to boot
+      simulateIntersection(true)
+      await nextTick()
+
+      expect(slotProps.isBooted).toBe(true)
+
+      // Call onAfterLeave (simulating transition end)
+      slotProps.onAfterLeave()
+      await nextTick()
+
+      expect(slotProps.isBooted).toBe(false)
+    })
+
+    it('onAfterLeave should not reset when eager', async () => {
+      let slotProps: any
+
+      mount(Lazy.Root, {
+        props: { eager: true },
+        slots: {
+          default: (props: any) => {
+            slotProps = props
+            return h('div', 'Content')
+          },
+        },
+      })
+
+      await nextTick()
+
+      // Call onAfterLeave
+      slotProps.onAfterLeave()
+      await nextTick()
+
+      // Should still have content because eager=true
+      expect(slotProps.hasContent).toBe(true)
+    })
+  })
+
+  describe('edge cases', () => {
+    it('should handle non-intersecting callback', async () => {
+      const wrapper = mount(Lazy.Root, {
+        slots: {
+          default: () => [
+            h(Lazy.Placeholder, {}, () => h('div', { class: 'skeleton' }, 'Skeleton')),
+            h(Lazy.Content, {}, () => h('div', { class: 'content' }, 'Content')),
+          ],
+        },
+      })
+
+      await nextTick()
+
+      // Simulate non-intersection
+      simulateIntersection(false)
+      await nextTick()
+
+      // Should still show placeholder
+      expect(wrapper.find('.skeleton').exists()).toBe(true)
+      expect(wrapper.find('.content').exists()).toBe(false)
+    })
+
+    it('should observe the root element', async () => {
+      mount(Lazy.Root, {
+        slots: {
+          default: () => h('div', 'Content'),
+        },
+      })
+
+      await nextTick()
+
+      expect(mockObserver.observe).toHaveBeenCalled()
+    })
+  })
+})
diff --git a/packages/0/src/components/Lazy/index.ts b/packages/0/src/components/Lazy/index.ts
index 15de9c8fa..c9a3790fa 100644
--- a/packages/0/src/components/Lazy/index.ts
+++ b/packages/0/src/components/Lazy/index.ts
@@ -5,7 +5,8 @@ export { default as LazyRoot } from './LazyRoot.vue'
 
 export type { LazyContentProps, LazyContentSlotProps } from './LazyContent.vue'
 export type { LazyPlaceholderProps, LazyPlaceholderSlotProps } from './LazyPlaceholder.vue'
-export type { LazyRootContext, LazyRootProps, LazyRootSlotProps, LazyTicket } from './LazyRoot.vue'
+export type { LazyRootContext, LazyRootProps, LazyRootSlotProps } from './LazyRoot.vue'
+export type { LazyContext } from '#v0/composables/useLazy'
 
 // Components
 import Content from './LazyContent.vue'
@@ -73,18 +74,63 @@ export const Lazy = {
    * Root component for lazy loading contexts.
    *
    * @see https://0.vuetifyjs.com/components/lazy#lazyroot
+   *
+   * @example
+   * ```vue
+   * <script lang="ts" setup>
+   *   import { Lazy } from '@vuetify/v0'
+   * </script>
+   *
+   * <template>
+   *   <Lazy.Root>
+   *     <Lazy.Placeholder>
+   *       <div class="skeleton" />
+   *     </Lazy.Placeholder>
+   *
+   *     <Lazy.Content>
+   *       <ExpensiveComponent />
+   *     </Lazy.Content>
+   *   </Lazy.Root>
+   * </template>
+   * ```
    */
   Root,
   /**
    * Placeholder component shown before content intersects viewport.
    *
    * @see https://0.vuetifyjs.com/components/lazy#lazyplaceholder
+   *
+   * @example
+   * ```vue
+   * <script lang="ts" setup>
+   *   import { Lazy } from '@vuetify/v0'
+   * </script>
+   *
+   * <template>
+   *   <Lazy.Placeholder>
+   *     <div class="h-48 w-full animate-pulse bg-gray-200" />
+   *   </Lazy.Placeholder>
+   * </template>
+   * ```
    */
   Placeholder,
   /**
    * Content component shown after viewport intersection.
    *
    * @see https://0.vuetifyjs.com/components/lazy#lazycontent
+   *
+   * @example
+   * ```vue
+   * <script lang="ts" setup>
+   *   import { Lazy } from '@vuetify/v0'
+   * </script>
+   *
+   * <template>
+   *   <Lazy.Content>
+   *     <img src="/large-image.jpg" alt="Lazy loaded image" />
+   *   </Lazy.Content>
+   * </template>
+   * ```
    */
   Content,
 }