diff --git a/package.json b/package.json
index 93fb9c28..dd6c2e65 100644
--- a/package.json
+++ b/package.json
@@ -36,7 +36,8 @@
     "@compodium/examples": "workspace:^",
     "@compodium/meta": "workspace:^",
     "@compodium/nuxt": "workspace:^",
-    "@compodium/vue": "workspace:^"
+    "@compodium/vue": "workspace:^",
+    "@compodium/testing": "workspace:^"
   },
   "pnpm": {
     "onlyBuiltDependencies": [
diff --git a/packages/core/build.config.ts b/packages/core/build.config.ts
index 5e4c37ff..f9e289ff 100644
--- a/packages/core/build.config.ts
+++ b/packages/core/build.config.ts
@@ -8,7 +8,6 @@ export default defineBuildConfig({
     { builder: 'copy', input: './src/runtime', outDir: './dist/runtime' }
   ],
   replace: {
-    'process.env.COMPODIUM_TEST': 'false',
     'process.env.COMPODIUM_DEVTOOLS_URL': undefined
   }
 })
diff --git a/packages/core/package.json b/packages/core/package.json
index f98d9dbb..e5f94ac5 100644
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -33,11 +33,13 @@
     "typecheck": "tsc --noEmit"
   },
   "peerDependencies": {
+    "@compodium/testing": "workspace:^",
     "vite": ">=6",
+    "vitest": ">=3.2.4",
     "vue": ">=3"
   },
   "peerDependenciesMeta": {
-    "vite": {
+    "@compodium/testing": {
       "optional": true
     }
   },
diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts
index 97623298..6d1ff5e2 100644
--- a/packages/core/src/index.ts
+++ b/packages/core/src/index.ts
@@ -1,3 +1,4 @@
+import type { Plugin } from 'vite'
 import { collectionsPlugin } from './plugins/collections'
 import { extendMetaPlugin, metaPlugin } from './plugins/meta'
 import { examplePlugin } from './plugins/examples'
@@ -8,8 +9,8 @@ import type { PluginOptions } from './types'
 
 export * from './types'
 
-export const compodium = /* #__PURE__ */ (options: PluginOptions) => {
-  return [
+export const compodium = /* #__PURE__ */ async (options: PluginOptions) => {
+  const plugins: Plugin[] = [
     collectionsPlugin(options),
     metaPlugin(options),
     extendMetaPlugin(options),
@@ -18,4 +19,17 @@ export const compodium = /* #__PURE__ */ (options: PluginOptions) => {
     iconifyPlugin(options),
     colorsPlugin(options)
   ]
+
+  if (options.testing?.enabled) {
+    try {
+      const { compodiumTesting } = await import('@compodium/testing')
+      compodiumTesting(options).forEach(p => plugins.push(p))
+    } catch {
+      throw new Error(
+        'The `@compodium/testing` package is required when tests are enabled.'
+      )
+    }
+  }
+
+  return plugins
 }
diff --git a/packages/core/src/plugins/collections.ts b/packages/core/src/plugins/collections.ts
index c15eaf42..ba8054ed 100644
--- a/packages/core/src/plugins/collections.ts
+++ b/packages/core/src/plugins/collections.ts
@@ -7,6 +7,9 @@ import { resolve } from 'pathe'
 import { joinURL } from 'ufo'
 import type { ResolvedConfig } from 'vite'
 
+const VIRTUAL_MODULE_ID = 'virtual:compodium/collections'
+const RESOLVED_VIRTUAL_MODULE_ID = '\0' + VIRTUAL_MODULE_ID
+
 export function resolveCollections(options: PluginOptions, viteConfig: ResolvedConfig): Collection[] {
   const rootDir = options.rootDir ?? viteConfig.root
 
@@ -54,52 +57,76 @@ export function resolveCollections(options: PluginOptions, viteConfig: ResolvedC
   ]
 }
 
+async function generateCollectionsData(collections: Collection[]) {
+  const result = await Promise.all(collections.map(async (col) => {
+    const components = await scanComponents(col.dirs)
+    const examples = await scanComponents([col.exampleDir])
+
+    const collectionComponents = components.flatMap((c) => {
+      const componentExamples = examples?.filter(e => e.pascalName.startsWith(`${c.pascalName}Example`)).map(e => ({
+        ...e,
+        isExample: true,
+        componentPath: c.filePath,
+        componentName: c.pascalName,
+        collectionName: col.name
+      }))
+
+      const mainExample = componentExamples.find(e => e.pascalName === `${c.pascalName}Example`)
+      const component = mainExample ?? c
+
+      if (col.name !== 'Components' && !mainExample) return []
+
+      return [{
+        ...component,
+        wrapperComponent: col.wrapperComponent,
+        docUrl: col.getDocUrl?.(c.pascalName),
+        examples: componentExamples.filter(e => e.pascalName !== mainExample?.pascalName),
+        collectionName: col.name
+      }]
+    })
+
+    return {
+      ...col,
+      components: collectionComponents
+    }
+  }))
+
+  return result
+}
+
 export function collectionsPlugin(options: PluginOptions): VitePlugin {
   let collections: Collection[]
+  let server: any
 
   return {
     name: 'compodium:collections',
     apply: 'serve',
-    enforce: 'post',
+    enforce: 'pre',
 
     configResolved(viteConfig) {
       collections = resolveCollections(options, viteConfig)
     },
 
-    configureServer(server) {
-      server.middlewares.use('/__compodium__/api/collections', async (_, res) => {
-        try {
-          const result = await Promise.all(collections.map(async (col) => {
-            const components = await scanComponents(col.dirs)
-            const examples = await scanComponents([col.exampleDir])
-
-            const collectionComponents = components.flatMap((c) => {
-              const componentExamples = examples?.filter(e => e.pascalName.startsWith(`${c.pascalName}Example`)).map(e => ({
-                ...e,
-                isExample: true,
-                componentPath: c.filePath
-              }))
-
-              const mainExample = componentExamples.find(e => e.pascalName === `${c.pascalName}Example`)
-              const component = mainExample ?? c
-
-              // Hides third party library components if no example can be found.
-              if (col.name !== 'Components' && !mainExample) return []
-
-              return [{
-                ...component,
-                wrapperComponent: col.wrapperComponent,
-                docUrl: col.getDocUrl?.(c.pascalName),
-                examples: componentExamples.filter(e => e.pascalName !== mainExample?.pascalName)
-              }]
-            })
-
-            return {
-              ...col,
-              components: collectionComponents
-            }
-          }))
+    resolveId(id) {
+      if (id === VIRTUAL_MODULE_ID) {
+        return RESOLVED_VIRTUAL_MODULE_ID
+      }
+    },
 
+    async load(id) {
+      if (id === RESOLVED_VIRTUAL_MODULE_ID) {
+        const data = await generateCollectionsData(collections)
+        return `export default ${JSON.stringify(data, null, 2)}`
+      }
+    },
+
+    configureServer(_server) {
+      server = _server
+
+      // Existing middleware endpoint
+      server.middlewares.use('/__compodium__/api/collections', async (_: any, res: any) => {
+        try {
+          const result = await generateCollectionsData(collections)
           res.setHeader('Content-Type', 'application/json')
           res.write(JSON.stringify(result))
           res.end()
@@ -116,7 +143,6 @@ export function collectionsPlugin(options: PluginOptions): VitePlugin {
         componentCollection.exampleDir
       ].map(d => d.path)
 
-      // Watch for changes in example directory
       const watcher = watch(watchedPaths, {
         persistent: true,
         awaitWriteFinish: {
@@ -125,34 +151,33 @@ export function collectionsPlugin(options: PluginOptions): VitePlugin {
         }
       })
 
-      watcher.on('add', async (filePath: string) => {
+      const handleFileChange = async (filePath: string, event: string) => {
         if (watchedPaths.find(p => filePath.startsWith(p))) {
+          // Existing WebSocket HMR
           server.ws.send({
             type: 'custom',
             event: 'compodium:hmr',
-            data: { path: filePath, event: 'component:added' }
+            data: { path: filePath, event }
           })
+
+          // Virtual module invalidation
+          const module = server.moduleGraph.getModuleById(RESOLVED_VIRTUAL_MODULE_ID)
+          if (module) {
+            server.reloadModule(module)
+          }
         }
+      }
+
+      watcher.on('add', async (filePath: string) => {
+        await handleFileChange(filePath, 'component:added')
       })
 
       watcher.on('addDir', async (filePath: string) => {
-        if (watchedPaths.find(p => filePath.startsWith(p))) {
-          server.ws.send({
-            type: 'custom',
-            event: 'compodium:hmr',
-            data: { path: filePath, event: 'component:added' }
-          })
-        }
+        await handleFileChange(filePath, 'component:added')
       })
 
       watcher.on('unlink', async (filePath: string) => {
-        if (watchedPaths.find(p => filePath.startsWith(p))) {
-          server.ws.send({
-            type: 'custom',
-            event: 'compodium:hmr',
-            data: { path: filePath, event: 'component:removed' }
-          })
-        }
+        await handleFileChange(filePath, 'component:removed')
       })
     }
   }
diff --git a/packages/core/src/plugins/colors.ts b/packages/core/src/plugins/colors.ts
index 85e9888b..e684bb27 100644
--- a/packages/core/src/plugins/colors.ts
+++ b/packages/core/src/plugins/colors.ts
@@ -9,6 +9,7 @@ export function colorsPlugin(options: PluginOptions): VitePlugin {
   return {
     name: 'compodium:colors',
     apply: 'serve',
+    enforce: 'pre',
     configureServer(server) {
       server.middlewares.use('/__compodium__/api/colors', async (req, res) => {
         try {
diff --git a/packages/core/src/plugins/devtools.ts b/packages/core/src/plugins/devtools.ts
index a600b486..46700b35 100644
--- a/packages/core/src/plugins/devtools.ts
+++ b/packages/core/src/plugins/devtools.ts
@@ -12,6 +12,7 @@ export function devtoolsPlugin(options: PluginOptions): VitePlugin {
 
   return {
     name: 'compodium:devtools',
+    enforce: 'pre',
     apply: 'serve',
 
     configResolved(viteConfig) {
@@ -32,7 +33,7 @@ export function devtoolsPlugin(options: PluginOptions): VitePlugin {
     },
 
     configureServer(server) {
-      if (process.env.COMPODIUM_DEVTOOLS_URL || process.env.COMPODIUM_TEST) return
+      if (process.env.COMPODIUM_DEVTOOLS_URL || process.env.VITEST) return
       server.middlewares.use('/__compodium__/devtools',
         sirv(resolve(dirname(fileURLToPath(import.meta.url)), './client/devtools'),
           { single: true, setHeaders: res => res.setHeader('Cache-Control', 'public, max-age=3600, stale-while-revalidate=86400') }
diff --git a/packages/core/src/plugins/examples.ts b/packages/core/src/plugins/examples.ts
index 4eac1e1a..05898634 100644
--- a/packages/core/src/plugins/examples.ts
+++ b/packages/core/src/plugins/examples.ts
@@ -8,6 +8,7 @@ export function examplePlugin(options: PluginOptions): VitePlugin {
 
   return {
     name: 'compodium:examples',
+    enforce: 'pre',
     apply: 'serve',
 
     configResolved(viteConfig) {
diff --git a/packages/core/src/plugins/iconify.ts b/packages/core/src/plugins/iconify.ts
index add34f71..0af0c069 100644
--- a/packages/core/src/plugins/iconify.ts
+++ b/packages/core/src/plugins/iconify.ts
@@ -5,7 +5,9 @@ import { joinURL } from 'ufo'
 export function iconifyPlugin(_options: PluginOptions): VitePlugin {
   return {
     name: 'compodium:iconify',
+    enforce: 'pre',
     apply: 'serve',
+
     configureServer(server) {
       server.middlewares.use('/__compodium__/api/iconify', async (req, res) => {
         try {
diff --git a/packages/core/src/plugins/meta/index.ts b/packages/core/src/plugins/meta/index.ts
index 37737e59..01c57955 100644
--- a/packages/core/src/plugins/meta/index.ts
+++ b/packages/core/src/plugins/meta/index.ts
@@ -2,12 +2,15 @@ import { readFile } from 'node:fs/promises'
 import type { Collection, PluginOptions } from '../../types'
 import { createChecker } from './checker'
 import { watch } from 'chokidar'
-import type { VitePlugin } from 'unplugin'
+import type { Plugin } from 'vite'
 
 import AST from 'unplugin-ast/vite'
 import { resolveCollections } from '../collections'
 
-export function extendMetaPlugin(_options: PluginOptions): VitePlugin {
+const VIRTUAL_MODULE_ID = 'virtual:compodium/meta'
+const RESOLVED_VIRTUAL_MODULE_ID = '\0' + VIRTUAL_MODULE_ID
+
+export function extendMetaPlugin(_options: PluginOptions): Plugin {
   return AST({
     include: [/\.[jt]sx?$/, /\.vue$/],
     enforce: 'post',
@@ -24,8 +27,10 @@ export function extendMetaPlugin(_options: PluginOptions): VitePlugin {
   })
 }
 
-export function metaPlugin(options: PluginOptions): VitePlugin {
+export function metaPlugin(options: PluginOptions): Plugin {
   let collections: Collection[]
+  let checker: any
+  let server: any
 
   return {
     name: 'compodium:meta',
@@ -36,14 +41,41 @@ export function metaPlugin(options: PluginOptions): VitePlugin {
       collections = resolveCollections(options, viteConfig)
     },
 
-    configureServer(server) {
+    resolveId(id) {
+      if (id.startsWith(VIRTUAL_MODULE_ID)) {
+        return RESOLVED_VIRTUAL_MODULE_ID + id.slice(VIRTUAL_MODULE_ID.length)
+      }
+    },
+
+    async load(id) {
+      if (id.startsWith(RESOLVED_VIRTUAL_MODULE_ID)) {
+        const url = new URL(id.slice(1), 'http://localhost') // Remove the \0 prefix
+        const componentPath = url.searchParams.get('component')
+
+        if (!componentPath) {
+          return 'export default null'
+        }
+
+        if (!checker) {
+          return 'export default null'
+        }
+
+        const meta = checker.getComponentMeta(componentPath)
+        return `export default ${JSON.stringify(meta, null, 2)}`
+      }
+    },
+
+    configureServer(_server) {
+      server = _server
+
       const checkerDirs = collections.flatMap(c => [
         ...c.dirs,
         c.exampleDir
       ])
-      const checker = createChecker(checkerDirs)
+      checker = createChecker(checkerDirs)
 
-      server.middlewares.use('/__compodium__/api/meta', async (req, res) => {
+      // Existing middleware endpoint
+      server.middlewares.use('/__compodium__/api/meta', async (req: any, res: any) => {
         try {
           const url = new URL(req.url!, `http://${req.headers.host}`)
           const componentPath = url.searchParams.get('component')
@@ -77,7 +109,23 @@ export function metaPlugin(options: PluginOptions): VitePlugin {
         componentCollection.exampleDir
       ].map(d => d.path)
 
-      // Watch for changes in example directory
+      const invalidateVirtualModuleForFile = (filePath: string) => {
+        const virtualModuleId = `${RESOLVED_VIRTUAL_MODULE_ID}?component=${encodeURIComponent(filePath)}`
+        const module = server.moduleGraph.getModuleById(virtualModuleId)
+        if (module) {
+          server.reloadModule(module)
+        }
+      }
+
+      const invalidateAllVirtualModules = () => {
+        // Only for add events where we need to reload all modules
+        for (const [id, module] of server.moduleGraph.idToModuleMap) {
+          if (id.startsWith(RESOLVED_VIRTUAL_MODULE_ID)) {
+            server.reloadModule(module)
+          }
+        }
+      }
+
       const watcher = watch(watchedPaths, {
         persistent: true,
         awaitWriteFinish: {
@@ -88,18 +136,19 @@ export function metaPlugin(options: PluginOptions): VitePlugin {
 
       watcher.on('add', async () => {
         checker.reload()
+        invalidateAllVirtualModules()
       })
 
       watcher.on('change', async (filePath: string) => {
         if (watchedPaths.find(p => filePath.startsWith(p))) {
           const code = await readFile(filePath, 'utf-8')
           checker.updateFile(filePath, code)
-
           server.ws.send({
             type: 'custom',
             event: 'compodium:hmr',
             data: { path: filePath, event: 'component:changed' }
           })
+          invalidateVirtualModuleForFile(filePath)
         }
       })
     }
diff --git a/packages/core/src/runtime/preview.vue b/packages/core/src/runtime/preview.vue
index 36630aa0..7aeb33f7 100644
--- a/packages/core/src/runtime/preview.vue
+++ b/packages/core/src/runtime/preview.vue
@@ -20,10 +20,5 @@ body {
 
 #compodium-default-preview {
   display: flex;
-  justify-content: center;
-  align-items: center;
-  min-height: 100vh;
-  min-width: fit-content;
-  padding: 64px;
 }
 </style>
diff --git a/packages/core/src/runtime/root.vue b/packages/core/src/runtime/root.vue
index f908a9db..855bfd7f 100644
--- a/packages/core/src/runtime/root.vue
+++ b/packages/core/src/runtime/root.vue
@@ -1,8 +1,12 @@
 <script setup lang="ts">
+/// <reference lib="dom" />
+/// <reference types="vite/client" />
+
 import { onMounted, shallowRef, ref, computed, toRaw } from 'vue'
 import type { CompodiumHooks } from '@compodium/core'
 import { onKeyStroke, useColorMode } from '@vueuse/core'
 import { joinURL } from 'ufo'
+import { createHooks } from 'hookable'
 import type { Hookable } from 'hookable'
 
 import RendererGrid from './components/RendererGrid.vue'
@@ -43,10 +47,10 @@ async function onUpdateComponent(payload: Parameters<CompodiumHooks['renderer:up
   props.value = payload.props
   events.value = payload.events
 
-  component.value = await importComponent(payload.path)
   if (payload.wrapper) {
     wrapper.value = await importComponent(payload.wrapper)
   }
+  component.value = await importComponent(payload.path)
 }
 
 if (import.meta.hot) {
@@ -60,8 +64,8 @@ const colorMode = useColorMode()
 const hooks = shallowRef<Hookable<CompodiumHooks>>()
 
 onMounted(() => {
-  hooks.value = window.parent.__COMPODIUM_HOOKS__ as Hookable<CompodiumHooks>
-  if (!hooks.value) return
+  hooks.value = window.parent.__COMPODIUM_HOOKS__ as Hookable<CompodiumHooks> ?? createHooks<CompodiumHooks>()
+  window.__COMPODIUM_HOOKS__ = hooks.value
 
   hooks.value.hook('renderer:update-component', onUpdateComponent)
   hooks.value.hook('renderer:update-props', payload => props.value = { ...payload.props })
@@ -72,7 +76,7 @@ onMounted(() => {
   })
 
   hooks.value.hook('renderer:set-color', color => colorMode.value = color)
-  hooks.value.callHook('renderer:mounted')
+  hooks.value.callHook('renderer:mounted', import.meta.hot)
 })
 
 onMounted(() => {
@@ -88,9 +92,18 @@ onMounted(() => {
   <Suspense>
     <div
       id="__compodium-root"
-      :style="{ position: 'relative', minWidth: '100vw', minHeight: '100vh' }"
+      :style="{
+        position: 'relative',
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        minWidth: '100vw',
+        width: 'fit-content',
+        minHeight: '100vh',
+        padding: '48px'
+      }"
     >
-      <PreviewComponent>
+      <PreviewComponent data-testid="__compodium-preview">
         <RendererWrapper :wrapper="wrapper">
           <RendererCombo
             :combo="combo"
diff --git a/packages/core/src/types.ts b/packages/core/src/types.ts
index e8fa884b..55cc0a1c 100644
--- a/packages/core/src/types.ts
+++ b/packages/core/src/types.ts
@@ -1,6 +1,8 @@
+import type { UserConfig as VitestUserConfig, InlineConfig as VitestInlineConfig } from 'vitest/node'
 import type { PropertyMeta as VuePropertyMeta } from '@compodium/meta'
 import type { Hookable } from 'hookable'
 import type { InputSchema } from './plugins/meta/infer'
+import type { ViteHotContext } from 'vite/types/hot.js'
 
 export type PluginOptions = {
   /**
@@ -53,8 +55,21 @@ export type PluginOptions = {
    */
   mainPath?: string
 
+  /**
+   * Testing configuration.
+   */
+  testing?: {
+    /**
+     * Enables testing integrations.
+     * Note that it requires installing `@compodium/testing`.
+     */
+    enabled?: boolean
+  }
   /* Internal */
   _nuxt?: boolean
+
+  /* Internal */
+  _vitestConfig?: Promise<TestConfig | undefined> | TestConfig
 }
 
 export type IconifyIcon = string & {}
@@ -128,11 +143,13 @@ export type Component = {
   wrapperComponent?: string
   docUrl?: string
   examples?: ComponentExample[]
+  collectionName: string
 }
 
 export type ComponentExample = Component & {
   isExample: true
   componentPath?: string
+  componentName?: string
 }
 
 export type Collection = {
@@ -152,6 +169,10 @@ export type ComponentCollection = Collection & {
   components: (Component & Partial<ComponentExample>)[]
 }
 
+export type TestConfig = VitestUserConfig & {
+  test?: VitestInlineConfig
+}
+
 export interface CompodiumHooks {
   // Triggered when the components code has been updated
   'component:changed': (path: string) => void
@@ -166,13 +187,13 @@ export interface CompodiumHooks {
   'component:event': (payload: { name: string, data: any }) => void
 
   // Called after the renderer has mounted
-  'renderer:mounted': () => void
+  'renderer:mounted': (hot?: ViteHotContext) => void
 
   // Update the renderer component
-  'renderer:update-component': (payload: { path: string, props: Record<string, any>, events?: string[], wrapper?: string }) => void
+  'renderer:update-component': (payload: { path: string, props?: Record<string, any>, events?: string[], wrapper?: string }) => void
 
   // Update the renderer props
-  'renderer:update-props': (payload: { props: Record<string, any> }) => void
+  'renderer:update-props': (payload: { props?: Record<string, any> }) => void
 
   // Update the renderer combo (displaying multiple variants)
   'renderer:update-combo': (payload: { props: { value: string, options: string[] }[] }) => void
diff --git a/packages/devtools/app/components/ComboInputMenu.vue b/packages/devtools/app/components/ComboInputMenu.vue
new file mode 100644
index 00000000..9f32add2
--- /dev/null
+++ b/packages/devtools/app/components/ComboInputMenu.vue
@@ -0,0 +1,101 @@
+<script lang="ts">
+export type ComboItem = {
+  value: string
+  label: string
+  options: string[]
+}
+</script>
+
+<script setup lang="ts">
+defineProps<{ items: ComboItem[] }>()
+const modelValue = defineModel<Partial<[ComboItem, ComboItem]>>()
+
+function updateValue(item: ComboItem) {
+  modelValue.value ??= []
+
+  const itemIndex = modelValue.value?.findIndex(i => i?.value === item.value)
+  if (itemIndex > -1) {
+    modelValue.value[itemIndex] = undefined
+    modelValue.value = [...modelValue.value]
+    return
+  }
+
+  if (modelValue.value[0]) {
+    modelValue.value[1] = item
+  } else {
+    modelValue.value[0] = item
+  }
+  modelValue.value = [...modelValue.value]
+}
+</script>
+
+<template>
+  <UPopover
+    :ui="{ content: 'flex flex-wrap justify-center p-2 max-w-64' }"
+    mode="hover"
+  >
+    <UButton
+      variant="link"
+      color="neutral"
+      class="relative flex gap-2"
+    >
+      <div class="w-20 text-right">
+        <p
+          v-if="modelValue?.[0]"
+          class="truncate"
+        >
+          {{ modelValue?.[0]?.label }}
+        </p>
+        <p
+          v-else
+          class="opacity-80"
+        >
+          Combo
+        </p>
+      </div>
+
+      <UIcon
+        name="lucide:x"
+        class="size-4"
+      />
+
+      <div class="w-20 text-left">
+        <p
+          v-if="modelValue?.[1]"
+          class="truncate"
+        >
+          {{ modelValue?.[1]?.label }}
+        </p>
+        <p
+          v-else
+          class="opacity-80"
+        >
+          Combo
+        </p>
+      </div>
+    </UButton>
+    <template #content>
+      <UButton
+        v-for="item in items"
+        :key="item.value"
+        :label="item.label"
+        color="neutral"
+        variant="ghost"
+        :trailing-icon="modelValue?.find(i => i?.value === item.value) ? 'lucide:check' : ''"
+        @click="updateValue(item)"
+      >
+        <template #trailing>
+          <UIcon
+            v-if="modelValue?.find(i => i?.value === item.value)"
+            name="lucide:check"
+            class="size-4"
+          />
+          <span
+            v-else
+            class="size-4"
+          />
+        </template>
+      </UButton>
+    </template>
+  </UPopover>
+</template>
diff --git a/packages/devtools/app/components/ComponentCodeTab.vue b/packages/devtools/app/components/ComponentCodeTab.vue
new file mode 100644
index 00000000..2603c5cf
--- /dev/null
+++ b/packages/devtools/app/components/ComponentCodeTab.vue
@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import { useClipboard } from '@vueuse/core'
+import type { Component, ComponentExample } from '@compodium/core'
+import { generateComponentCode } from '@/utils/codegen'
+
+const props = defineProps<{ component?: Component & Partial<ComponentExample>, props?: Record<string, any>, defaultProps?: Record<string, any> }>()
+
+const fetch = $fetch.create({ baseURL: '/__compodium__/api' })
+const { data: exampleCode } = useAsyncData<string | null>('__compodium-component-example-code', async () => {
+  if (props.component?.isExample) {
+    return await fetch<string>(`/__compodium__/api/example`, { query: { path: props.component.filePath } })
+  }
+  return null
+}, { watch: [() => props.component?.pascalName] })
+
+const code = computed(() => {
+  if (!props.component) return
+
+  const componentName = props.component?.isExample ? props.component.pascalName.replace(/Example.*/, '') : props.component.pascalName
+
+  return props.component?.isExample && exampleCode.value
+    ? updateComponentCode(componentName, exampleCode.value, props.props, props.defaultProps)
+    : generateComponentCode(componentName, props.props, props.defaultProps)
+})
+
+const { $prettier } = useNuxtApp()
+const { data: formattedCode } = useAsyncData('__compodium-component-formatted-code', async () => {
+  if (!code.value) return
+  return await $prettier.format(code.value, {
+    semi: false,
+    singleQuote: true,
+    printWidth: 50
+  })
+}, { watch: [code] })
+
+const { codeToHtml } = useShiki()
+
+const { data: highlightedCode } = useAsyncData('__compodium-component-highlighted-code', async () => {
+  return formattedCode.value
+    ? codeToHtml(formattedCode.value, 'vue')
+    : undefined
+}, { watch: [formattedCode] })
+
+const { copy, copied } = useClipboard()
+</script>
+
+<template>
+  <div class="relative h-full text-wrap overflow-y-auto bg-elevated/50">
+    <!-- eslint-disable vue/no-v-html -->
+    <pre
+      class="p-4 text-sm rounded-lg"
+      v-html="highlightedCode"
+    />
+    <UButton
+      color="neutral"
+      size="sm"
+      variant="link"
+      :icon="copied ? 'i-lucide-clipboard-check' : 'i-lucide-clipboard'"
+      class="absolute top-2 right-2"
+      @click="copy(formattedCode ?? '')"
+    />
+  </div>
+</template>
diff --git a/packages/devtools/app/components/ComponentCollectionMenu.vue b/packages/devtools/app/components/ComponentCollectionMenu.vue
index 9f8803d1..0358981b 100644
--- a/packages/devtools/app/components/ComponentCollectionMenu.vue
+++ b/packages/devtools/app/components/ComponentCollectionMenu.vue
@@ -4,21 +4,26 @@ import type { Component, ComponentCollection, ComponentExample } from '@compodiu
 const props = defineProps<{ collections: ComponentCollection[] }>()
 const modelValue = defineModel<Component | ComponentExample>()
 
+const { suites } = useVitest()
+
 const treeItems = computed(() => {
   if (!props.collections) return
 
   return props.collections?.map(col => ({
     label: col.name,
+    pascalName: col.name,
     icon: col.icon,
     defaultExpanded: true,
     children: col.components?.map(comp => ({
       label: comp?.isExample ? comp.pascalName.replace(/Example$/, '') : comp.pascalName,
+      pascalName: comp.pascalName,
       active: modelValue.value?.pascalName === comp.pascalName,
       onSelect() {
         modelValue.value = comp
       },
       children: comp.examples?.map(ex => ({
         label: ex.pascalName.replace(comp.pascalName, ''),
+        pascalName: ex.pascalName,
         active: modelValue.value?.pascalName === ex.pascalName,
         onSelect() {
           modelValue.value = ex
@@ -32,7 +37,7 @@ const treeItems = computed(() => {
 <template>
   <UTree
     :items="treeItems"
-    class="px-1"
+    class="px-1 py-2"
   >
     <template
       #item-leading="{ item }"
@@ -48,8 +53,8 @@ const treeItems = computed(() => {
       />
       <span v-else />
     </template>
-    <template #item-trailing>
-      <span />
+    <template #item-trailing="{ item }">
+      <TestStatusIcon :status="suites.get(item.pascalName)?.state" />
     </template>
   </UTree>
 </template>
diff --git a/packages/devtools/app/components/ComponentEventsTab.vue b/packages/devtools/app/components/ComponentEventsTab.vue
new file mode 100644
index 00000000..8388d8fd
--- /dev/null
+++ b/packages/devtools/app/components/ComponentEventsTab.vue
@@ -0,0 +1,67 @@
+<script setup lang="ts">
+const props = defineProps<{
+  events: { name: string, data?: any }[]
+}>()
+
+const currentEventIndex = ref(0)
+const event = computed(() => props.events?.[currentEventIndex.value])
+
+function isJsonable(value: any) {
+  return typeof value === 'object' || Array.isArray(value)
+}
+
+watch(() => props.events?.length, () => currentEventIndex.value = 0)
+</script>
+
+<template>
+  <template v-if="events?.length">
+    <div class="flex flex-col justify-between h-full">
+      <div class="p-2 flex flex-col overflow-y-scroll">
+        <UButton
+          v-for="e, index in events"
+          :key="index"
+          class="mb-1 w-full"
+          variant="ghost"
+          color="neutral"
+          :active="currentEventIndex === index"
+          active-variant="soft"
+          @click="currentEventIndex = index"
+        >
+          {{ e.name }}
+          <template v-if="e.data !== undefined">
+            <span class="text-dimmed"> ⦁ </span>
+            <span class="truncate text-dimmed">
+              {{ isJsonable(e.data) ? JSON.stringify(e.data) : e.data }}
+            </span>
+          </template>
+        </UButton>
+      </div>
+      <div
+        v-if="event?.data !== undefined"
+        class="shrink-0 min-h-20 max-h-1/2 border-t border-default p-4 bg-elevated/50 overflow-y-scroll"
+      >
+        <JsonEditor
+          v-if="isJsonable(event?.data)"
+          :model-value="event?.data"
+          readonly
+        />
+        <p
+          v-else
+          class="text-wrap break-all"
+        >
+          {{ event?.data }}
+        </p>
+      </div>
+    </div>
+  </template>
+  <div
+    v-else
+    class="text-dimmed text-center p-8"
+  >
+    <UIcon
+      name="lucide:squirrel"
+      size="20"
+    />
+    <p>No events fired</p>
+  </div>
+</template>
diff --git a/packages/devtools/app/components/ComponentPropsTab.vue b/packages/devtools/app/components/ComponentPropsTab.vue
new file mode 100644
index 00000000..efb066a1
--- /dev/null
+++ b/packages/devtools/app/components/ComponentPropsTab.vue
@@ -0,0 +1,124 @@
+<script setup lang="ts">
+import type { CompodiumMeta, PropertyMeta } from '@compodium/core'
+import { useFuse } from '@vueuse/integrations/useFuse'
+
+const props = defineProps<{
+  meta?: CompodiumMeta
+  defaultValue?: Record<string, any>
+  disabled?: string[]
+}>()
+
+const modelValue = defineModel<Record<string, any>>({ default: () => ({}) })
+const componentProps = computed(() => props.meta?.props ?? [])
+
+const propsSearchTerm = ref()
+const { results: fuseResults } = useFuse<PropertyMeta>(propsSearchTerm, componentProps, {
+  fuseOptions: {
+    ignoreLocation: true,
+    threshold: 0.1,
+    keys: ['name', 'description']
+  },
+  matchAllWhenSearchEmpty: true
+})
+
+const visibleProps = computed(() => new Set(fuseResults.value?.map(result => result.item.name)))
+
+watch(() => props.meta, () => propsSearchTerm.value = '')
+
+const isRotated = ref(false)
+function onResetState() {
+  if (isRotated.value) return
+  setTimeout(() => isRotated.value = false, 500)
+  isRotated.value = true
+  modelValue.value = structuredClone(props.defaultValue ?? {})
+}
+</script>
+
+<template>
+  <template v-if="componentProps.length">
+    <div class="bg-default p-0.5 border-y border-default sticky top-0 z-1 flex gap-0.5">
+      <UInput
+        v-model="propsSearchTerm"
+        placeholder="Search props..."
+        icon="lucide:search"
+        variant="none"
+        class="w-full ml-1"
+      />
+      <UTooltip
+        text="Reset props"
+        :content="{ side: 'left' }"
+        title="JSON Editor"
+      >
+        <USlideover
+          ref="modal"
+          class="rounded"
+          close-icon="i-lucide-arrow-right"
+          :ui="{
+            body: 'p-0 sm:p-0',
+            header: 'px-4 py-1.5 sm:py-1.5 sm:px-4 min-h-8 flex justify-between',
+            close: 'top-1'
+          }"
+          :overlay="false"
+          title="JSON Editor"
+        >
+          <template #close>
+            <UButton
+              size="sm"
+              icon="i-lucide-arrow-right"
+              color="neutral"
+              variant="ghost"
+            />
+          </template>
+          <UButton
+            icon="lucide:braces"
+            variant="link"
+            color="neutral"
+            size="sm"
+          />
+          <template #body>
+            <JsonEditor
+              v-model="modelValue"
+              class="h-full"
+            />
+          </template>
+        </USlideover>
+        <UButton
+          icon="lucide:rotate-cw"
+          variant="link"
+          color="neutral"
+          class="rounded-full"
+          size="sm"
+          :class="{ 'animate-rotate': isRotated }"
+          @click="onResetState()"
+        />
+      </UTooltip>
+    </div>
+    <div
+      v-for="prop in componentProps"
+      v-show="visibleProps.has(prop.name)"
+      :key="prop.name"
+      class="grow px-3 py-2 border-b border-default"
+    >
+      <PropInput
+        :model-value="modelValue[prop.name]"
+        :schema="prop.schema"
+        :name="prop.name"
+        :description="prop.description"
+        inline
+        class="p-3 rounded"
+        :disabled="!!disabled?.find(d => d === prop.name)"
+        @update:model-value="(value) => modelValue = { ...modelValue, [prop.name]: value }"
+      />
+    </div>
+  </template>
+  <div
+    v-if="!componentProps?.length || !visibleProps?.size"
+    class="text-dimmed text-center p-8"
+  >
+    <UIcon
+      name="lucide:bird"
+      size="20"
+    />
+    <p>No props found</p>
+  </div>
+</template>
diff --git a/packages/devtools/app/components/ComponentTestsTab.vue b/packages/devtools/app/components/ComponentTestsTab.vue
new file mode 100644
index 00000000..e682515f
--- /dev/null
+++ b/packages/devtools/app/components/ComponentTestsTab.vue
@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import type { Component } from '@compodium/core'
+
+const props = defineProps<{
+  component?: Component
+}>()
+
+const { suites, runTests, testStatus } = useVitest()
+
+const componentTests = computed<TestState[]>(() => {
+  if (!props.component) return []
+  const suite = suites.get(props.component.pascalName)
+  return Array.from(suite?.tests?.values() ?? []) as TestState[]
+})
+</script>
+
+<template>
+  <div class="bg-default border-t border-default sticky top-0 z-1 gap-0.5">
+    <div
+      v-if="!componentTests?.length && testStatus === 'run'"
+      class="flex flex-col gap-2 justify-center items-center text-md text-muted p-8"
+    >
+      <p> Running... </p>
+      <UIcon
+        name="lucide:loader"
+        class="animate-spin"
+      />
+    </div>
+    <div
+      v-else-if="!componentTests?.length"
+      class="text-dimmed text-center p-8"
+    >
+      <UIcon
+        name="lucide:flask-conical-off"
+        size="20"
+      />
+
+      <p class="mt-1">
+        No test results available
+      </p>
+
+      <UButton
+        variant="subtle"
+        icon="lucide:circle-play"
+        trailing
+        class="mt-3"
+        loading-auto
+        @click="runTests()"
+      >
+        Run tests
+      </UButton>
+    </div>
+    <TestResult
+      v-for="test in componentTests"
+      :key="test.id"
+      v-bind="test"
+    />
+  </div>
+</template>
diff --git a/packages/devtools/app/components/inputs/ArrayInput.vue b/packages/devtools/app/components/inputs/ArrayInput.vue
index ff5b07d0..8e34820e 100644
--- a/packages/devtools/app/components/inputs/ArrayInput.vue
+++ b/packages/devtools/app/components/inputs/ArrayInput.vue
@@ -37,7 +37,7 @@ const openedItem = ref<number | null>(0)
       :key="index"
       class="relative w-full flex mb-2"
     >
-      <ComponentPropInput
+      <PropInput
         :model-value="value"
         :schema="schema.schema"
         :name="'item ' + (index + 1)"
@@ -55,7 +55,7 @@ const openedItem = ref<number | null>(0)
             @click="removeArrayItem(index)"
           />
         </template>
-      </ComponentPropInput>
+      </PropInput>
     </div>
 
     <UButton
diff --git a/packages/devtools/app/components/inputs/ObjectInput.vue b/packages/devtools/app/components/inputs/ObjectInput.vue
index 2bd4fdfe..23d797cd 100644
--- a/packages/devtools/app/components/inputs/ObjectInput.vue
+++ b/packages/devtools/app/components/inputs/ObjectInput.vue
@@ -66,7 +66,7 @@ const visibleProps = computed(() => new Set(fuseResults.value?.map(result => res
           class="w-full ml-1"
         />
       </div>
-      <ComponentPropInput
+      <PropInput
         v-for="attr in attrs"
         v-show="visibleProps.has(attr.name)"
         :key="attr.name"
diff --git a/packages/devtools/app/components/inputs/PropInput.vue b/packages/devtools/app/components/inputs/PropInput.vue
new file mode 100644
index 00000000..a8839b0f
--- /dev/null
+++ b/packages/devtools/app/components/inputs/PropInput.vue
@@ -0,0 +1,182 @@
+<script lang="ts">
+import type { PropInputType, PropSchema } from '@compodium/core'
+import { createReusableTemplate } from '@vueuse/core'
+
+import BooleanInput from './BooleanInput.vue'
+import StringInput from './StringInput.vue'
+import NumberInput from './NumberInput.vue'
+import StringEnumInput from './StringEnumInput.vue'
+import ObjectInput from './ObjectInput.vue'
+import ArrayInput from './ArrayInput.vue'
+import PrimitiveArrayInput from './PrimitiveArrayInput.vue'
+import DateInput from './DateInput.vue'
+import IconInput from './IconInput.vue'
+
+const inputTypes: Record<PropInputType, Component> = {
+  icon: IconInput,
+  array: ArrayInput,
+  object: ObjectInput,
+  boolean: BooleanInput,
+  string: StringInput,
+  number: NumberInput,
+  primitiveArray: PrimitiveArrayInput,
+  date: DateInput,
+  stringEnum: StringEnumInput
+}
+</script>
+
+<script setup lang="ts">
+const props = defineProps<{ name?: string, schema: PropSchema[], description?: string, disabled?: boolean, inline?: boolean, hideLabel?: boolean }>()
+
+const items = computed(() => props.schema?.map(s => s.type))
+const modelValue = defineModel<any>()
+
+const currentType = ref()
+
+watch(() => props.schema, () => {
+  if (!props.schema) return
+  currentType.value = inferDefaultInput(modelValue.value, props.schema)?.type ?? props.schema?.[0]?.type
+}, { immediate: true })
+
+const currentInput = computed<PropSchema & { component: Component } | null>(() => {
+  const type = props.schema?.find(p => p.type === currentType.value)
+  if (type) return {
+    ...type, component: (inputTypes as any)[type.inputType]
+  }
+  return null
+})
+
+function inferDefaultInput(value?: any, types?: PropSchema[]): PropSchema | undefined {
+  if (!value) return
+  const valueType = typeof value
+  return types?.find((t) => {
+    if (valueType === t.schema) return t
+
+    const nestedSchema = (t.schema as any).schema
+    if (typeof nestedSchema === 'object' && typeof value === 'object') {
+      return Object.keys(value).every(k => !!nestedSchema[k])
+    }
+  })
+}
+
+function clearValue() {
+  modelValue.value = undefined
+}
+
+const description = computed(() => {
+  return props.description?.replace(/`([^`]+)`/g, '<code class="text-xs font-medium bg-elevated px-1 py-0.5 rounded">$1</code>')
+})
+
+const isArray = computed(() => currentInput.value?.inputType === 'array')
+
+const [DefineSelect, ReuseSelect] = createReusableTemplate()
+const [DefineInput, ReuseInput] = createReusableTemplate()
+const [DefineLabel, ReuseLabel] = createReusableTemplate()
+const [DefineDescription, ReuseDescription] = createReusableTemplate()
+</script>
+
+<template>
+  <div class="w-full">
+    <DefineSelect>
+      <USelect
+        v-if="schema?.length > 1"
+        v-model="currentType"
+        :items="items"
+        variant="none"
+        size="sm"
+        :trailing-icon="undefined"
+        class="font-medium text-ellipsis truncate max-w-50 py-0.5 px-1.5 font-mono bg-elevated/50 border border-default"
+        @update:model-value="clearValue()"
+      />
+    </DefineSelect>
+
+    <DefineInput>
+      <component
+        :is="currentInput.component"
+        v-if="currentInput"
+        v-model="modelValue"
+        class="w-full"
+        :schema="currentInput.schema"
+        :name="name"
+        :disabled="disabled"
+      />
+      <slot name="actions">
+        <UButton
+          v-if="currentInput?.component && modelValue !== undefined && currentInput?.inputType !== 'boolean'"
+          variant="outline"
+          color="neutral"
+          icon="i-lucide-x"
+          size="sm"
+          class="p-2"
+          square
+          @click="clearValue()"
+        />
+      </slot>
+    </DefineInput>
+
+    <DefineLabel>
+      <p
+        v-if="name && !hideLabel"
+        class="truncate text-ellipsis font-mono font-semibold"
+      >
+        {{ name }}
+      </p>
+      <span v-else />
+    </DefineLabel>
+    <DefineDescription>
+      <!-- eslint-disable vue/no-v-html -->
+      <p
+        v-if="description"
+        class="text-muted text-sm"
+        v-html="description"
+      />
+    </DefineDescription>
+
+    <template v-if="!inline || isArray">
+      <UFormField
+        :name="name"
+        class=""
+        :class="{ 'opacity-70 cursor-not-allowed': disabled || !currentInput }"
+        :label="name"
+        :ui="{ label: 'w-full flex gap-2 justify-between mb-1', description: 'mb-2', container: 'w-full', wrapper: name || schema?.length > 1 ? '' : 'hidden' }"
+      >
+        <template #label>
+          <ReuseLabel />
+          <ReuseSelect />
+        </template>
+
+        <ReuseDescription />
+
+        <div class="flex gap-2 justify-center">
+          <ReuseInput />
+        </div>
+      </UFormField>
+    </template>
+
+    <template v-else>
+      <div class="flex justify-end mb-2">
+        <ReuseSelect />
+      </div>
+      <UFormField
+        :name="name"
+        class="w-full flex gap-4"
+        :class="{ 'opacity-70 cursor-not-allowed': disabled || !currentInput }"
+        :label="name"
+        :ui="{ label: 'font-sans my-auto w-32', description: 'mb-2', container: 'mt-0 w-full', wrapper: name ? '' : 'hidden' }"
+      >
+        <template #label>
+          <ReuseLabel
+            v-if="name"
+            class="mt-1.5"
+          />
+        </template>
+        <div class="flex w-full gap-2">
+          <ReuseInput />
+        </div>
+      </UFormField>
+      <div class="mt-2">
+        <ReuseDescription />
+      </div>
+    </template>
+  </div>
+</template>
diff --git a/packages/devtools/app/components/testing/TestMenu.vue b/packages/devtools/app/components/testing/TestMenu.vue
new file mode 100644
index 00000000..6a9b67c0
--- /dev/null
+++ b/packages/devtools/app/components/testing/TestMenu.vue
@@ -0,0 +1,136 @@
+<script setup lang="ts">
+import { onKeyStroke } from '@vueuse/core'
+
+const { runTests, testStatus, testErrors } = useVitest()
+
+onKeyStroke(['Enter'], async (e) => {
+  if (testStatus.value === 'run') return
+  if (e.metaKey || e.ctrlKey) {
+    await runTests()
+  }
+}, { dedupe: true, eventName: 'keydown' })
+
+const open = ref(false)
+
+watch(testStatus, () => {
+  if (testStatus.value === 'fail') open.value = true
+})
+</script>
+
+<template>
+  <UCollapsible
+    v-model:open="open"
+    class="relative before:absolute before:inset-0 before:-m-0.5 before:rounded-md before:-z-1 after:absolute transition ease-in-out"
+    :class="{
+      'before:bg-gradient-to-br before:from-primary-300 before:via-primary-500 before:to-primary-800 before:animate-pulse': testStatus === 'run',
+      'before:bg-error': testStatus === 'fail',
+      'before:bg-success': testStatus === 'pass'
+    }"
+  >
+    <div class="flex justify-between items-center p-2">
+      <span
+        class="flex gap-2 items-center font-medium text-sm"
+        :class="{
+          'text-default': testStatus === 'run',
+          'text-error': testStatus === 'fail',
+          'text-success': testStatus === 'pass'
+        }"
+      >
+        <UIcon
+          name="lucide:flask-conical"
+          size="16"
+        />
+        <p>
+          Tests
+        </p>
+      </span>
+
+      <div class="flex">
+        <UTooltip
+          text="Run tests"
+          :loading="testStatus === 'run'"
+          :kbds="['meta', 'Enter']"
+        >
+          <UButton
+            variant="ghost"
+            icon="lucide:circle-play"
+            size="sm"
+            color="neutral"
+            trailing
+            loading-auto
+            @click.stop="runTests()"
+          />
+        </UToolTip>
+
+        <UButton
+          variant="ghost"
+          icon="lucide:chevron-down"
+          size="sm"
+          color="neutral"
+          trailing
+          loading-auto
+          :data-open="open"
+          class="group"
+          :ui="{
+            trailingIcon: 'group-data-[open=true]:rotate-180 transition-transform duration-200'
+          }"
+          @click.stop="open = !open"
+        />
+      </div>
+    </div>
+
+    <template #content>
+      <div class="p-2 min-h-16 w-full border-t border-muted">
+        <div v-if="testStatus === 'pass'">
+          <div class="flex justify-between gap-2 mr-1.5">
+            <p
+              class="text-sm text-success"
+            >
+              Passed
+            </p>
+            <TestStatusIcon status="pass" />
+          </div>
+
+          <span class="text-sm">
+            No errors
+          </span>
+        </div>
+
+        <div v-else-if="testStatus === 'fail'">
+          <div class="flex justify-between gap-2 mr-1.5">
+            <p class="text-sm text-error mb-1">
+              Failed
+            </p>
+            <TestStatusIcon status="fail" />
+          </div>
+          <p
+            v-if="testErrors.length"
+            class="flex justify-between w-full gap-2 text-sm"
+          >
+            {{ testErrors.length }} error{{ testErrors.length > 1 ? 's' : null }}
+          </p>
+        </div>
+
+        <div
+          v-else-if="testStatus === 'run'"
+          class="flex flex-col gap-2 justify-center items-center text-sm text-muted"
+        >
+          <p> Running... </p>
+          <UIcon
+            name="lucide:loader"
+            class="animate-spin"
+          />
+        </div>
+        <div
+          v-else
+          class="flex flex-col gap-2 justify-center items-center text-sm text-muted"
+        >
+          <p>
+            No test results
+          </p>
+          <UIcon name="lucide:flask-conical-off" />
+        </div>
+      </div>
+    </template>
+  </UCollapsible>
+</template>
diff --git a/packages/devtools/app/components/testing/TestResult.vue b/packages/devtools/app/components/testing/TestResult.vue
new file mode 100644
index 00000000..a23f47cf
--- /dev/null
+++ b/packages/devtools/app/components/testing/TestResult.vue
@@ -0,0 +1,89 @@
+<script setup lang="ts">
+import type { TestState } from '~/composables/useVitest'
+
+const props = defineProps<TestState>()
+const hasResults = computed(() => props.errors?.length)
+
+function formatErrorMessage(message: string) {
+  return message.replace(/Reference screenshot:[\s\S]*/, '').replace(/<body>[\s\S]*/, '')
+}
+</script>
+
+<template>
+  <UCollapsible
+    class="border-b border-default"
+    :disabled="!hasResults"
+    :default-open="state === 'fail'"
+  >
+    <template #default="{ open }">
+      <div class="flex justify-between gap-2 p-2">
+        <div class="flex gap-2 items-center font-mono text-sm">
+          <TestStatusIcon
+            :status="state"
+            class="flex-none"
+          />
+          <p class="font-semibold text-muted truncate text-ellipsis text-wrap">
+            {{ name }}
+          </p>
+        </div>
+        <div class="flex items-center gap-1">
+          <p
+            v-if="duration"
+            class="text-xs"
+            :class="{
+              'text-muted': duration > 200,
+              'text-warning': duration > 200
+            }"
+          >
+            {{ Math.round(duration) }}ms
+          </p>
+
+          <UButton
+            v-if="hasResults"
+            variant="ghost"
+            icon="lucide:chevron-down"
+            size="sm"
+            color="neutral"
+            trailing
+            loading-auto
+            :data-open="open"
+            class="group"
+            :ui="{
+              trailingIcon: 'group-data-[open=true]:rotate-180 transition-transform duration-200'
+            }"
+          />
+          <span
+            v-else
+            class="size-7"
+          />
+        </div>
+      </div>
+    </template>
+    <template #content>
+      <div
+        v-if="state !== 'run'"
+        class="flex flex-col gap-2 p-2"
+      >
+        <UAlert
+          v-for="error in errors"
+          :key="error.message"
+          color="error"
+          variant="subtle"
+          :description="formatErrorMessage(error.message)"
+        />
+
+        <!-- ImageComparisonSlider
+          v-if="meta?.compodium?.diff && meta?.compodium?.screenshotPath"
+          :src="'/@fs' + meta.compodium.stagedScreenshotPath!"
+          :expected="'/@fs' + meta.compodium.screenshotPath!"
+        />
+
+        <img
+          v-else-if="meta?.compodium?.screenshotPath || meta?.compodium?.stagedScreenshotPath!"
+          :src="'/@fs' + (meta?.compodium?.screenshotPath ?? meta?.compodium?.stagedScreenshotPath)"
+          class="object-scale-down select-none w-full rounded bg-elevated border border-default px-8 py-10"
+        -->
+      </div>
+    </template>
+  </UCollapsible>
+</template>
diff --git a/packages/devtools/app/components/testing/TestStatusIcon.vue b/packages/devtools/app/components/testing/TestStatusIcon.vue
new file mode 100644
index 00000000..e4aed7aa
--- /dev/null
+++ b/packages/devtools/app/components/testing/TestStatusIcon.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import type { RunnerTaskResult } from 'vitest/node'
+
+defineProps<{
+  status?: RunnerTaskResult['state']
+}>()
+</script>
+
+<template>
+  <UIcon
+    v-if="status === 'pass'"
+    class="size-4 text-success"
+    name="lucide:check"
+  />
+  <UIcon
+    v-else-if="status === 'fail'"
+    class="size-4 text-error"
+    name="lucide:x"
+  />
+  <UIcon
+    v-else-if="status === 'skip'"
+    class="size-4 text-default/50"
+    name="lucide:chevrons-right"
+  />
+  <UIcon
+    v-else-if="status === 'queued' || status === 'run'"
+    class="size-4 text-default/50 animate-spin"
+    name="lucide:loader"
+  />
+  <span v-else />
+</template>
diff --git a/packages/devtools/app/composables/useViteClient.ts b/packages/devtools/app/composables/useViteClient.ts
new file mode 100644
index 00000000..0708a852
--- /dev/null
+++ b/packages/devtools/app/composables/useViteClient.ts
@@ -0,0 +1,33 @@
+import { createSharedComposable } from '@vueuse/core'
+import type { ViteHotContext } from 'vite/types/hot.js'
+
+function _useViteClient() {
+  const { hooks } = useCompodiumClient()
+  let hot: ViteHotContext | undefined = undefined
+
+  hooks.hook('renderer:mounted', (_hot?: ViteHotContext) => {
+    hot = _hot
+
+    for (const [e, fns] of Object.entries(viteHandlers.value)) {
+      fns?.forEach(fn => hot?.on(e, fn))
+    }
+
+    viteHandlers.value = {}
+  })
+
+  const viteHandlers = shallowRef<Record<string, ((payload: any) => void)[]>>({})
+
+  function onEvent(e: string, fn: (payload: any) => void) {
+    if (hot) hot.on(e, fn)
+    else {
+      viteHandlers.value[e] ??= []
+      viteHandlers.value[e].push(fn)
+    }
+  }
+
+  return {
+    onEvent
+  }
+}
+
+export const useViteClient = createSharedComposable(_useViteClient)
diff --git a/packages/devtools/app/composables/useVitest.ts b/packages/devtools/app/composables/useVitest.ts
new file mode 100644
index 00000000..38c0f95a
--- /dev/null
+++ b/packages/devtools/app/composables/useVitest.ts
@@ -0,0 +1,144 @@
+import { createSharedComposable } from '@vueuse/core'
+import { createClient, type VitestClient } from '@vitest/ws-client'
+import { reactive, readonly } from 'vue'
+import type { RunnerTask, RunnerTaskResult, TestError } from 'vitest'
+
+let client: VitestClient
+
+export interface TestState {
+  id: string
+  name?: string
+  state: RunnerTaskResult['state']
+  duration?: number
+  errors?: TestError[]
+}
+
+export interface SuiteState {
+  id: string
+  name: string
+  state: RunnerTaskResult['state']
+  duration?: number
+  errors?: TestError[]
+  file?: string
+  tests?: Map<string, TestState>
+}
+
+export function _useVitest() {
+  const suites = reactive(new Map<string, SuiteState>())
+
+  async function getVitest() {
+    if (!client) {
+      const { port, token } = await $fetch<{ port: number, token: string }>('/api/test/start', { baseURL: '/__compodium__' })
+
+      client = createClient(`ws://${window.location.hostname}:${port}/__vitest_api__?token=${token}`, {
+        handlers: {
+          onTaskUpdate: (packs) => {
+            packs.forEach(([id, result, meta]) => {
+              updateTaskState({ id, result, meta })
+            })
+          },
+          onCollected: (files) => {
+            function processTask(task: RunnerTask) {
+              updateTaskState(task)
+              if ('tasks' in task) {
+                task.tasks.forEach(t => processTask(t))
+              }
+            }
+            files?.forEach(f => processTask(f))
+          },
+          onFinished: (files) => {
+            console.log(`Test run finished (${files.length} files)`)
+            const hasErrors = files.some(f => f.result?.state === 'fail')
+            testStatus.value = hasErrors ? 'fail' : 'pass'
+          }
+        }
+      })
+
+      const connectedPromise = new Promise<void>((resolve) => {
+        client.ws.addEventListener('open', () => resolve())
+      })
+      await connectedPromise
+    }
+    return client
+  }
+
+  function updateTaskState(task: Partial<RunnerTask> & { id: string }) {
+    if (task.meta?.compodium?.suite) {
+      const name = task.meta.compodium?.component ?? task.meta.compodium?.collection
+      if (!name) return
+      const suite = suites.get(name)
+      suites.set(name, {
+        ...suite,
+        id: task.id,
+        name,
+        state: task.result?.state ?? 'queued',
+        file: task.file?.filepath,
+        duration: task.result?.duration,
+        errors: task.result?.errors as TestError[]
+      })
+    } else if (task.meta?.compodium) {
+      const componentName = task.meta?.compodium.component
+      if (!componentName) return
+
+      const suite = suites.get(componentName)
+      if (!suite) return
+
+      suite.tests ??= new Map()
+      const test = suite.tests.get(task.id)
+
+      suite.tests.set(task.id, {
+        ...test,
+        id: task.id,
+        name: task.meta.compodium.name,
+        state: task.result?.state ?? 'queued',
+        duration: task.result?.duration,
+        errors: task.result?.errors as TestError[]
+      })
+    }
+
+    if (task.result?.errors) testErrors.value?.push(...task.result.errors as TestError[])
+  }
+
+  const testStatus = ref<RunnerTaskResult['state'] | null>(null)
+
+  async function runTests() {
+    testStatus.value = 'run'
+    testErrors.value = []
+    const vitest = await getVitest()
+    const files = await vitest.rpc.getTestFiles().then(specs => specs.map(([_project, file, _config]) => file))
+
+    for (const suite of suites.values()) {
+      suite.state = 'run'
+      suite.tests?.forEach(t => t.state = 'run')
+    }
+
+    await vitest.rpc.rerun(files, true)
+  }
+
+  async function runComponentTests(component: string) {
+    const vitest = await getVitest()
+    const suite = suites.get(component)
+    if (!suite || !suite.file) return
+
+    testStatus.value = 'run'
+    testErrors.value = []
+
+    suite.state = 'run'
+    suite.tests?.forEach(t => t.state = 'run')
+
+    await vitest.rpc.rerun([suite.file], true)
+  }
+
+  const testErrors = shallowRef<TestError[]>([])
+
+  return {
+    testStatus: readonly(testStatus),
+    testErrors: testErrors,
+    getVitest,
+    runTests,
+    runComponentTests,
+    suites: readonly(suites)
+  }
+}
+
+export const useVitest = createSharedComposable(_useVitest)
diff --git a/packages/devtools/app/pages/components.vue b/packages/devtools/app/pages/components.vue
index bd3d15be..10146b46 100644
--- a/packages/devtools/app/pages/components.vue
+++ b/packages/devtools/app/pages/components.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { Component, ComponentExample, CompodiumMeta, ComponentCollection, PropertyMeta } from '@compodium/core'
 import { StorageSerializers, useColorMode, useDebounceFn, useStorage } from '@vueuse/core'
-import type { ComboItem } from '../components/ComboInput.vue'
+import type { ComboItem } from '../components/ComboInputMenu.vue'
 import { getEnumOptions } from '~/utils/enum'
 
 const { hooks } = useCompodiumClient()
@@ -11,10 +11,9 @@ const events = ref<{ name: string, data?: any }[]>([])
 
 hooks.hook('renderer:mounted', () => {
   rendererMounted.value = true
+
   hooks.hook('component:changed', async (path: string) => {
-    if (
-      (component.value?.filePath && path.endsWith(component.value?.filePath))
-      || (component.value?.componentPath && path.endsWith(component.value?.componentPath))) {
+    if ((component.value?.filePath && path.endsWith(component.value?.filePath)) || (component.value?.componentPath && path.endsWith(component.value?.componentPath))) {
       await Promise.all([refreshMeta(), refreshExampleMeta()])
     }
   })
@@ -197,6 +196,7 @@ const tabs = computed(() => {
   return [
     { label: 'Props', slot: 'props', icon: 'lucide:settings' },
     { label: 'Events', slot: 'events', icon: 'lucide:chart-no-axes-gantt' },
+    { label: 'Tests', slot: 'tests', icon: 'lucide:flask-conical' },
     { label: 'Code', slot: 'code', icon: 'lucide:code' }
   ]
 })
@@ -207,12 +207,19 @@ const tabs = computed(() => {
     ref="container"
     class="relative flex w-screen h-screen"
   >
-    <ComponentCollectionMenu
-      v-if="collections?.length"
-      v-model="component"
-      :collections="collections"
-      class="pt-1 border-r border-default hidden xl:block xl:w-xs overflow-y-scroll"
-    />
+    <div class="hidden xl:flex xl:w-xs h-full flex-col justify-between pt-1 border-r border-default bg-elevated/50">
+      <ComponentCollectionMenu
+        v-if="collections?.length"
+        v-model="component"
+        :collections="collections"
+        class="overflow-y-scroll"
+      />
+
+      <TestMenu
+        v-if="collections?.length"
+        class="bg-elevated mx-2 mb-2 rounded"
+      />
+    </div>
 
     <div class="grow relative">
       <div class="grid grid-cols-3 absolute inset-x-0 p-2 z-1">
@@ -225,7 +232,7 @@ const tabs = computed(() => {
         </div>
 
         <div class="flex justify-center items-center">
-          <ComboInput
+          <ComboInputMenu
             v-if="comboItems?.length"
             v-model="comboProps"
             :items="comboItems"
@@ -319,7 +326,7 @@ const tabs = computed(() => {
         :ui="{ content: 'grow relative overflow-y-scroll' }"
       >
         <template #props>
-          <ComponentProps
+          <ComponentPropsTab
             v-model="props"
             :meta="componentMeta"
             :disabled="combo"
@@ -332,11 +339,18 @@ const tabs = computed(() => {
         </template>
 
         <template #events>
-          <ComponentEvents :events="events" />
+          <ComponentEventsTab :events="events" />
+        </template>
+
+        <template #tests>
+          <ComponentTestsTab
+            :key="component?.pascalName"
+            :component="component"
+          />
         </template>
 
         <template #code>
-          <ComponentCode
+          <ComponentCodeTab
             :component="component"
             :props="props"
             :default-props="defaultProps"
diff --git a/packages/devtools/package.json b/packages/devtools/package.json
index 98a54a13..a6a0b5eb 100644
--- a/packages/devtools/package.json
+++ b/packages/devtools/package.json
@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "@nuxt/ui": "catalog:",
+    "@vitest/ws-client": "^3.2.4",
     "@vueuse/core": "^13.9.0",
     "@vueuse/integrations": "^13.9.0",
     "deep-eql": "^5.0.2",
@@ -18,9 +19,11 @@
     "hookable": "^5.5.3",
     "json-editor-vue": "^0.18.1",
     "knitwork": "^1.2.0",
+    "motion-v": "^1.4.0",
     "nuxt": "catalog:",
     "pathe": "^2.0.3",
     "prettier": "^3.6.2",
+    "resemblejs": "^5.0.0",
     "scule": "^1.3.0",
     "shiki": "^3.14.0",
     "vue": "catalog:"
@@ -28,9 +31,11 @@
   "devDependencies": {
     "@compodium/core": "workspace:^",
     "@compodium/meta": "workspace:^",
+    "@compodium/testing": "workspace:^",
     "@iconify-json/lineicons": "^1.2.6",
     "@iconify-json/lucide": "^1.2.71",
     "@iconify/types": "^2.0.0",
-    "@types/deep-eql": "^4.0.2"
+    "@types/deep-eql": "^4.0.2",
+    "@types/resemblejs": "^4.1.3"
   }
 }
diff --git a/packages/devtools/vitest.d.ts b/packages/devtools/vitest.d.ts
new file mode 100644
index 00000000..d1a39c89
--- /dev/null
+++ b/packages/devtools/vitest.d.ts
@@ -0,0 +1,7 @@
+import type { CompodiumTestMeta } from './types'
+
+declare module 'vitest' {
+  interface TaskMeta {
+    compodium?: CompodiumTestMeta
+  }
+}
diff --git a/packages/examples/src/assets/ui/index.css b/packages/examples/src/assets/ui/index.css
index e29f7b7c..9986942a 100644
--- a/packages/examples/src/assets/ui/index.css
+++ b/packages/examples/src/assets/ui/index.css
@@ -1,4 +1,4 @@
-/*! tailwindcss v4.1.10 | MIT License | https://tailwindcss.com */
+/*! tailwindcss v4.1.14 | MIT License | https://tailwindcss.com */
 @layer properties;
 :root, :host {
   --spacing: 0.25rem;
diff --git a/packages/examples/src/examples/ui/ChatMessageExample.vue b/packages/examples/src/examples/ui/ChatMessageExample.vue
index 4383295e..27bcf478 100644
--- a/packages/examples/src/examples/ui/ChatMessageExample.vue
+++ b/packages/examples/src/examples/ui/ChatMessageExample.vue
@@ -1,9 +1,12 @@
 <script setup lang="ts">
 extendCompodiumMeta({
   defaultProps: {
-    parts: [{
-      type: 'text',
-      text: 'Hello! How can I help you today?' }],
+    parts: [
+      {
+        type: 'text',
+        text: 'Hello! How can I help you today?'
+      }
+    ],
     avatar: {
       src: 'https://avatars.githubusercontent.com/u/739984?v=4',
       alt: 'Assistant'
diff --git a/packages/examples/src/examples/ui/ChatPaletteExample.vue b/packages/examples/src/examples/ui/ChatPaletteExample.vue
index 7d02c7c8..06b72a51 100644
--- a/packages/examples/src/examples/ui/ChatPaletteExample.vue
+++ b/packages/examples/src/examples/ui/ChatPaletteExample.vue
@@ -9,33 +9,29 @@ extendCompodiumMeta({
     ]
   }
 })
+
+const messages = [
+  {
+    id: '1',
+    content: 'Hello! How can I help you today?',
+    role: 'assistant'
+  },
+  {
+    id: '2',
+    content: 'I need help with my project setup.',
+    role: 'user'
+  },
+  {
+    id: '3',
+    content: 'I\'d be happy to help! What kind of project are you working on?',
+    role: 'assistant'
+  }
+]
 </script>
 
 <template>
   <UChatPalette>
-    <UChatMessages
-      :messages="[
-        {
-          id: '1',
-          content: 'Hello! How can I help you today?',
-          role: 'assistant',
-          timestamp: new Date(Date.now() - 5000).toISOString()
-        },
-        {
-          id: '2',
-          content: 'I need help with my project setup.',
-          role: 'user',
-          timestamp: new Date(Date.now() - 3000).toISOString()
-        },
-        {
-          id: '3',
-          content: 'I\'d be happy to help! What kind of project are you working on?',
-          role: 'assistant',
-          timestamp: new Date().toISOString()
-        }
-      ]"
-    />
-
+    <UChatMessages :messages />
     <template #prompt>
       <UChatPrompt />
     </template>
diff --git a/packages/nuxt/package.json b/packages/nuxt/package.json
index 436ce528..967bce11 100644
--- a/packages/nuxt/package.json
+++ b/packages/nuxt/package.json
@@ -31,7 +31,14 @@
     "typecheck": "vue-tsc --noEmit"
   },
   "peerDependencies": {
-    "@nuxt/kit": ">=3.15"
+    "@nuxt/kit": ">=3.15",
+    "@nuxt/test-utils": ">=3.20",
+    "vite": ">=6"
+  },
+  "peerDependenciesMeta": {
+    "@nuxt/test-utils": {
+      "optional": true
+    }
   },
   "dependencies": {
     "@compodium/core": "workspace:^",
diff --git a/packages/nuxt/src/module.ts b/packages/nuxt/src/module.ts
index 9d42986d..b88387da 100644
--- a/packages/nuxt/src/module.ts
+++ b/packages/nuxt/src/module.ts
@@ -5,7 +5,8 @@ import { joinURL } from 'ufo'
 import { version } from '../package.json'
 import { defu } from 'defu'
 import { compodium } from '@compodium/core'
-import type { PluginOptions } from '@compodium/core'
+import type { PluginOptions, TestConfig } from '@compodium/core'
+import { mergeConfig } from 'vite'
 
 export type ModuleOptions = Omit<PluginOptions, 'mainPath' | 'componentDirs' | 'rootDir' | '_nuxt' | 'baseUrl'>
 
@@ -20,8 +21,7 @@ export default defineNuxtModule<ModuleOptions>({
   },
 
   async setup(options, nuxt) {
-    if (!nuxt.options.dev) return
-
+    if (!nuxt.options.dev && !nuxt.options.test) return
     const { resolve } = createResolver(import.meta.url)
 
     nuxt.hooks.hookOnce('app:resolve', (app) => {
@@ -43,12 +43,30 @@ export default defineNuxtModule<ModuleOptions>({
       nuxt.options.routeRules = defu(nuxt.options.routeRules, { '/__compodium__/**': { ssr: false } })
     }
 
+    const rawViteConfigPromise: Promise<TestConfig | undefined> = import('@nuxt/test-utils/config').then(async ({ getVitestConfigFromNuxt }) => {
+      return await new Promise<TestConfig>((resolve) => {
+        nuxt.hooks.hookOnce('app:resolve', () => {
+          nuxt.hook('vite:configResolved', (config, { isClient }) => {
+            if (!isClient) return
+            const _config = mergeConfig({}, config)
+            return resolve(getVitestConfigFromNuxt({ nuxt, viteConfig: _config }) as Promise<TestConfig>)
+          })
+        })
+      })
+    }).catch(() => {
+      if (options.testing?.enabled) {
+        console.warn('[Compodium] Could not get vitest config from @nuxt/test-utils.')
+      }
+      return undefined
+    })
+
     nuxt.hooks.hookOnce('components:dirs', async (dirs) => {
-      addVitePlugin(compodium({
+      addVitePlugin(await compodium({
         componentDirs: dirs,
         rootDir: nuxt.options.rootDir,
         baseUrl: nuxt.options.app.baseURL,
         _nuxt: true,
+        _vitestConfig: rawViteConfigPromise,
         ...options
       }))
     })
diff --git a/packages/nuxt/test/fixtures/basic/nuxt.config.ts b/packages/nuxt/test/fixtures/basic/nuxt.config.ts
index 2ca16691..ff80551b 100644
--- a/packages/nuxt/test/fixtures/basic/nuxt.config.ts
+++ b/packages/nuxt/test/fixtures/basic/nuxt.config.ts
@@ -1,6 +1,6 @@
 export default defineNuxtConfig({
   modules: ['../../../src/module'],
-
+  test: false,
   compodium: {
     ignore: [
       'ExcludedComponent.vue'
diff --git a/packages/nuxt/test/fixtures/custom-compodium-dir/nuxt.config.ts b/packages/nuxt/test/fixtures/custom-compodium-dir/nuxt.config.ts
index c957d2ee..a5a67047 100644
--- a/packages/nuxt/test/fixtures/custom-compodium-dir/nuxt.config.ts
+++ b/packages/nuxt/test/fixtures/custom-compodium-dir/nuxt.config.ts
@@ -1,5 +1,6 @@
 export default defineNuxtConfig({
   modules: ['../../../src/module'],
+  test: false,
   compodium: {
     dir: 'play'
   }
diff --git a/packages/nuxt/test/fixtures/custom-component-dirs/nuxt.config.ts b/packages/nuxt/test/fixtures/custom-component-dirs/nuxt.config.ts
index 499ed6f9..63f9ee55 100644
--- a/packages/nuxt/test/fixtures/custom-component-dirs/nuxt.config.ts
+++ b/packages/nuxt/test/fixtures/custom-component-dirs/nuxt.config.ts
@@ -3,5 +3,6 @@ export default defineNuxtConfig({
   components: [
     { path: 'components/' },
     { path: 'my-ui/', prefix: 'U' }
-  ]
+  ],
+  test: false
 })
diff --git a/packages/testing/.gitignore b/packages/testing/.gitignore
new file mode 100644
index 00000000..29669c1b
--- /dev/null
+++ b/packages/testing/.gitignore
@@ -0,0 +1,81 @@
+# Created by .ignore support plugin (hsz.mobi)
+### Node template
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# TypeScript v1 declaration files
+typings/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+
+# next.js build output
+.next
+
+# nuxt.js build output
+.nuxt
+
+# Nuxt generate
+dist
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless
+
+# IDE
+.idea
diff --git a/packages/testing/LICENSE b/packages/testing/LICENSE
new file mode 100644
index 00000000..1ac06403
--- /dev/null
+++ b/packages/testing/LICENSE
@@ -0,0 +1,9 @@
+MIT License
+
+Copyright (c) 2025 Romain Hamel 
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
diff --git a/packages/testing/README.md b/packages/testing/README.md
new file mode 100644
index 00000000..539241fe
--- /dev/null
+++ b/packages/testing/README.md
@@ -0,0 +1,125 @@
+<div align="center">
+  
+# Compodium
+
+[![npm version][npm-version-src]][npm-version-href]
+[![npm downloads][npm-downloads-src]][npm-downloads-href]
+[![License][license-src]][license-href]
+[![Nuxt][nuxt-src]][nuxt-href]
+
+A plug and play component playground for Vue and Nuxt.
+
+[Documentation](https://compodium.dev/getting-started)
+
+</div>
+
+> [!WARNING]
+> This project is in its early stages and will evolve. Expect frequent updates and potential changes. Feedback is welcome!
+
+## Features
+
+- **Effortless Setup**: Simple setup process and minimal maintenance, allowing you to focus on building components.
+- **No Stories Required**: Analyzes your component code directly, eliminating the need to write stories.
+- **Fast**: Built on top of Vite for rapid development and instant feedback, enhancing productivity.
+- **DevTools Integration**: Integrates with Vue and Nuxt devtools for a cohesive development experience.
+- **UI Library Integrations**: Integrates with popular UI libraries, showcasing examples for locally installed components.
+- **Code generation**: Generates up-to-date template code based on component props, ready to copy and use instantly.
+
+
+## Installation
+
+### Nuxt
+
+```bash
+npx nuxi@latest module add --dev compodium
+```
+
+### Vue
+
+1. Install `@compodium/vue`
+
+```bash [pnpm]
+pnpm add -D @compodium/vue
+```
+
+```bash [yarn]
+yarn add --dev @compodium/vue
+```
+
+```bash [npm]
+npm install --save-dev @compodium/vue
+```
+
+```bash [bun]
+bun add -D @compodium/vue
+```
+
+2. Add the Compodium plugin in your `vite.config.ts`:
+
+```ts [vite.config.ts]
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import vueDevTools from 'vite-plugin-vue-devtools'
+import { compodium } from '@compodium/vue'
+
+export default defineConfig({
+  plugins: [
+    vue(),
+    vueDevTools(),
+    compodium()
+  ]
+})
+```
+
+3. Include compodium types in your `tsconfig.app.json`
+
+```json [tsconfig.app.json]{6}
+{
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.tsx",
+    "src/**/*.vue",
+    "node_modules/@compodium/vue/dist/index.d.ts"
+  ],
+}
+```
+
+## Contribution
+Contributions are welcome! ♥️
+
+Currently, one way you can contribute is by adding examples for your favorite component library. You can find the Nuxt UI collection and examples [here](https://github.com/romhml/compodium/tree/main/packages/examples/src/index.ts).
+
+**Local development**
+
+```bash
+# Install dependencies
+pnpm install
+
+# Generate type stubs
+pnpm dev:prepare
+
+# Develop with the playground
+pnpm dev
+
+# Run ESLint
+pnpm lint
+
+# Run typechecks 
+pnpm typechecks 
+
+# Run Vitest
+pnpm test
+```
+
+<!-- Badges -->
+[npm-version-src]: https://img.shields.io/npm/v/%40compodium%2Fcore/latest.svg?style=flat&colorA=020420&colorB=00DC82
+[npm-version-href]: https://npmjs.com/package/%40compodium%2Fcore
+
+[npm-downloads-src]: https://img.shields.io/npm/dm/compodium.svg?style=flat&colorA=020420&colorB=00DC82
+[npm-downloads-href]: https://npm.chart.dev/%40compodium%2Fcore
+
+[license-src]: https://img.shields.io/npm/l/compodium.svg?style=flat&colorA=020420&colorB=00DC82
+[license-href]: https://npmjs.com/package/compodium
+
+[nuxt-src]: https://img.shields.io/badge/Nuxt-020420?logo=nuxt.js
+[nuxt-href]: https://nuxt.com
diff --git a/packages/testing/build.config.ts b/packages/testing/build.config.ts
new file mode 100644
index 00000000..fbb30bdf
--- /dev/null
+++ b/packages/testing/build.config.ts
@@ -0,0 +1,13 @@
+import { defineBuildConfig } from 'unbuild'
+import config from '../../build.config'
+
+export default defineBuildConfig({
+  ...config,
+  entries: [
+    'src/index',
+    { builder: 'copy', input: './src/unit', outDir: './dist/unit' }
+  ],
+  replace: {
+    'process.env.COMPODIUM_DEVTOOLS_URL': undefined
+  }
+})
diff --git a/packages/testing/package.json b/packages/testing/package.json
new file mode 100644
index 00000000..a13742ab
--- /dev/null
+++ b/packages/testing/package.json
@@ -0,0 +1,44 @@
+{
+  "name": "@compodium/testing",
+  "type": "module",
+  "version": "0.1.0-beta.11",
+  "description": "A plug and play component playground for Vue and Nuxt.",
+  "license": "MIT",
+  "repository": {
+    "url": "romhml/compodium",
+    "directory": "packages/testing"
+  },
+  "keywords": [
+    "nuxt",
+    "vue",
+    "vite",
+    "components",
+    "documentation"
+  ],
+  "exports": {
+    ".": "./dist/index.mjs",
+    "./unit": "./dist/unit/index.ts",
+    "./*": "./dist/*"
+  },
+  "main": "dist/index.mjs",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "dev:prepare": "unbuild --stub",
+    "prepack": "unbuild",
+    "typecheck": "tsc --noEmit"
+  },
+  "peerDependencies": {
+    "@compodium/core": "workspace:^",
+    "@vue/test-utils": ">=2",
+    "vite": ">=6",
+    "vitest": ">=3.2.4"
+  },
+  "dependencies": {
+    "defu": "^6.1.4",
+    "unplugin": "^2.3.5"
+  }
+}
diff --git a/packages/testing/src/index.ts b/packages/testing/src/index.ts
new file mode 100644
index 00000000..febcfe19
--- /dev/null
+++ b/packages/testing/src/index.ts
@@ -0,0 +1,10 @@
+import type { PluginOptions } from '@compodium/core'
+import { testPlugin } from './plugins/vitest'
+
+export * from './types'
+
+export const compodiumTesting = /* #__PURE__ */ (options: PluginOptions) => {
+  return [
+    testPlugin(options)
+  ]
+}
diff --git a/packages/testing/src/plugins/vitest.ts b/packages/testing/src/plugins/vitest.ts
new file mode 100644
index 00000000..c084d15d
--- /dev/null
+++ b/packages/testing/src/plugins/vitest.ts
@@ -0,0 +1,54 @@
+import type { Vitest, InlineConfig } from 'vitest/node'
+import type { PluginOptions, TestConfig } from '@compodium/core'
+import type { Plugin as VitePlugin } from 'vite'
+import { defu } from 'defu'
+
+export function testPlugin(options: PluginOptions): VitePlugin {
+  let rootDir: string
+  let vitest: Vitest
+
+  async function getVitest() {
+    if (!vitest) {
+      const { createVitest } = await import('vitest/node')
+      const viteConfig = options._vitestConfig ? await options._vitestConfig : {} as TestConfig
+
+      const vitestConfig = defu(
+        {
+          root: rootDir,
+          watch: true,
+          passWithNoTests: true,
+          silent: true,
+          api: true,
+          ui: false
+        } satisfies InlineConfig,
+        viteConfig?.test
+      )
+
+      vitest = await createVitest('test', vitestConfig, viteConfig as any)
+    }
+    return vitest
+  }
+
+  return {
+    name: 'compodium:tests',
+
+    configResolved(viteConfig) {
+      rootDir = options.rootDir ?? viteConfig.root
+    },
+
+    configureServer(server) {
+      server.middlewares.use('/__compodium__/api/test/start', async (_req, res) => {
+        try {
+          const vitest = await getVitest()
+          await vitest.init()
+          await vitest.collect()
+          res.end(JSON.stringify({ port: vitest.config.api.port, token: vitest.config.api.token }))
+        } catch (err) {
+          res.statusCode = 500
+          console.error(err)
+          res.end(JSON.stringify(err))
+        }
+      })
+    }
+  }
+}
diff --git a/packages/testing/src/types.ts b/packages/testing/src/types.ts
new file mode 100644
index 00000000..661d840e
--- /dev/null
+++ b/packages/testing/src/types.ts
@@ -0,0 +1,6 @@
+export interface CompodiumTestMeta {
+  component?: string
+  collection?: string
+  suite?: boolean
+  name?: string
+}
diff --git a/packages/testing/src/unit/index.ts b/packages/testing/src/unit/index.ts
new file mode 100644
index 00000000..c6f46163
--- /dev/null
+++ b/packages/testing/src/unit/index.ts
@@ -0,0 +1,82 @@
+import { describe, beforeEach } from 'vitest'
+import type { CompodiumTestMeta } from '../types'
+import type { ComponentCollection, CompodiumMeta, Component } from '@compodium/core'
+import { getCurrentSuite } from 'vitest/suite'
+import type { Component as VueComponent } from 'vue'
+import { h } from 'vue'
+
+declare module 'vitest' {
+  interface TaskMeta {
+    compodium?: CompodiumTestMeta
+  }
+}
+
+// @ts-expect-error virtual import
+const collections = await import(/* vite-ignore */ 'virtual:compodium/collections').then(c => c.default) as ComponentCollection[]
+
+const componentMap = collections.flatMap(col => col.components?.flatMap(comp => [comp, ...(comp.examples ?? [])])).reduce((acc, c) => {
+  acc[c.pascalName] = c
+  return acc
+}, {} as Record<string, Component>)
+
+export type CompodiumTestFunction = (ctx: {
+  component: VueComponent
+  props?: Record<string, any>
+  meta: CompodiumMeta
+}) => void | Promise<void>
+
+export function describeComponent(componentName: string, fn: CompodiumTestFunction) {
+  const component = componentMap[componentName] ?? componentMap[componentName + `Example`]
+  if (!component) throw new Error(`[Compodium] Component not found ${componentName}`)
+
+  const collection = collections.find(c => c.name === component?.collectionName) as ComponentCollection
+
+  return describe(collection.name, async () => {
+    const { suite } = getCurrentSuite()
+    suite!.meta.compodium = {
+      collection: collection.name,
+      suite: true
+    }
+
+    describe(component.pascalName, async () => {
+      const { suite } = getCurrentSuite()
+      suite!.meta.compodium = {
+        collection: collection.name,
+        component: component.pascalName,
+        suite: true
+      }
+
+      beforeEach(({ task }) => {
+        task.meta.compodium = {
+          collection: collection.name,
+          component: component.pascalName,
+          name: task.name,
+          suite: false
+        }
+      })
+
+      const componentMeta = await import(/* vite-ignore */ `/@id/virtual:compodium/meta?component=${component.filePath}`).then(c => c.default) as CompodiumMeta
+
+      const vueComponent = await import(/* vite-ignore */ component.filePath).then(c => c.default) as VueComponent
+      const wrapperComponent = component.wrapperComponent ? await import(/* vite-ignore */ component.wrapperComponent).then(c => c.default) as VueComponent : null
+
+      const testComponent = wrapperComponent
+        ? {
+            render(props: any) {
+              return h(wrapperComponent, {}, {
+                default: () => h(vueComponent, props)
+              })
+            }
+          }
+        : vueComponent
+
+      await fn({ component: testComponent, props: componentMeta.compodium?.defaultProps, meta: componentMeta })
+    })
+  })
+}
+
+export function describeComponents(fn: CompodiumTestFunction) {
+  collections.forEach((collection) => {
+    collection.components.forEach(component => describeComponent(component.pascalName, fn))
+  })
+}
diff --git a/packages/testing/tsconfig.json b/packages/testing/tsconfig.json
new file mode 100644
index 00000000..dad11aae
--- /dev/null
+++ b/packages/testing/tsconfig.json
@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "jsx": "preserve",
+    "lib": ["esnext"],
+    "module": "esnext",
+    "moduleResolution": "Bundler",
+    "resolveJsonModule": true,
+    "strict": true,
+    "strictNullChecks": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true
+  },
+  "exclude": [
+    "dist"
+  ]
+}
diff --git a/packages/vue/src/plugins/renderer.ts b/packages/vue/src/plugins/renderer.ts
index 64be675e..4006778e 100644
--- a/packages/vue/src/plugins/renderer.ts
+++ b/packages/vue/src/plugins/renderer.ts
@@ -33,7 +33,12 @@ export function rendererPlugin(options: PluginOptions): VitePlugin {
       rootDir = options.rootDir ?? viteConfig.root
       baseUrl = options.baseUrl ?? viteConfig.base
 
-      index = readFileSync(resolve(rootDir, 'index.html'), 'utf-8')
+      try {
+        index = readFileSync(resolve(rootDir, 'index.html'), 'utf-8')
+      } catch {
+        throw new Error('[Compodium] Could not locate vite index.html')
+      }
+
       const inferredMainPath = inferMainPath(index)
       mainPath = resolve(rootDir, (options.mainPath ?? inferredMainPath) as string)
     },
@@ -63,7 +68,6 @@ export function rendererPlugin(options: PluginOptions): VitePlugin {
     },
     load(id) {
       if (id === '\0@compodium/renderer.ts') {
-        // Read the user's main entrypoint file
         if (!mainPath) {
           throw new Error('[Compodium] Could not infer main script path. Use the mainPath option to specify the path to your Vue script file containing createApp().')
         }
diff --git a/playgrounds/nuxt/app/app.vue b/playgrounds/nuxt/app/app.vue
index 2e790405..1a6f0735 100644
--- a/playgrounds/nuxt/app/app.vue
+++ b/playgrounds/nuxt/app/app.vue
@@ -1,5 +1,7 @@
 <template>
-  <div class="h-screen w-screen flex flex-col justify-center items-center">
+  <div
+    class="h-screen w-screen flex flex-col justify-center items-center"
+  >
     <CompodiumWelcome />
   </div>
 </template>
diff --git a/playgrounds/nuxt/app/components/CompodiumWelcome.vue b/playgrounds/nuxt/app/components/CompodiumWelcome.vue
index 06ec1578..febf5c2f 100644
--- a/playgrounds/nuxt/app/components/CompodiumWelcome.vue
+++ b/playgrounds/nuxt/app/components/CompodiumWelcome.vue
@@ -1,7 +1,4 @@
 <script setup lang="ts">
-// @ts-expect-error this is auto imported
-const devtoolsClient = useNuxtDevTools()
-
 const _props = withDefaults(defineProps<{
   title?: string
   shakeIt?: boolean
@@ -14,6 +11,12 @@ extendCompodiumMeta<typeof _props>({
     bounceIt: true
   }
 })
+
+function openDevtools() {
+  // @ts-expect-error this is auto imported
+  const client = useNuxtDevTools()
+  client?.value?.devtools.navigate('/modules/custom-compodium')
+}
 </script>
 
 <template>
@@ -21,7 +24,7 @@ extendCompodiumMeta<typeof _props>({
     class="data-[spin=true]:animate-spin data-[bounce=true]:animate-bounce"
     :data-spin="spinIt"
     :data-bounce="bounceIt"
-    :class="{ shaker: shakeIt }"
+    :class="{ shake: shakeIt }"
   >
     <div
       class="border border-default p-4 rounded-lg w-sm"
@@ -39,14 +42,13 @@ extendCompodiumMeta<typeof _props>({
       >
         Go to Compodium
       </UButton>
-      <USeparator> or </USeparator>
+      <USeparator label="or" />
       <UButton
         variant="ghost"
         color="success"
         icon="lineicons:nuxt"
         block
-        :disabled="!devtoolsClient"
-        @click="devtoolsClient?.devtools.navigate('/modules/custom-compodium')"
+        @click="openDevtools()"
       >
         Open in Nuxt Devtools
       </UButton>
@@ -55,80 +57,16 @@ extendCompodiumMeta<typeof _props>({
 </template>
 
 <style scoped>
-/*!
- * Woah.css - http://joerezendes.com/woah.css
- * Version - 1.0
- * Licensed under the MIT license - http://opensource.org/licenses/MIT
- *
- * Github - https://github.com/joerez/Woah.css
- *
- * Copyright (c) 2018 Joe Rezendes
- */
-
-/**
- * shaker
- * - Increases and decreases in size
- */
-@keyframes shaker {
-  from {
-    transform: translate3d(0,0,0);
-  }
+.shake {
+  animation: shake 0.5s ease-in-out infinite
+}
 
-  33% {
-    transform: translate3d(-20px,10px,0);
+@keyframes shake {
+  0%, 100%  {
+    transform: rotate(-3deg);
   }
-
-  66% {
-    transform: translate3d(20px,0px,0);
+  50% {
+    transform: rotate(3deg);
   }
-
-  to {
-    transform: translate3d(0,0,0);
-  }
-}
-
-.shaker {
-  animation-timing-function: linear;
-  transform-origin: bottom center;
-  animation-name: shaker;
-  animation-duration: .1s;
-  animation-iteration-count: infinite;
-}
-
-/**
-  * flyOut
-  * - Flies out
-  */
-  @keyframes flyOut {
-
-    1% {
-      transform: translate3d(0,0,0) scale(1);
-    }
-
-    20% {
-      transform: translate3d(0,100px,400px) rotateX(90deg);
-    }
-    30% {
-      transform: translate3d(300px,0px,100px) rotateX(95deg);
-    }
-    40% {
-      transform: translate3d(-600px,-200px,0px) rotateX(80deg);
-    }
-    60% {
-      transform: translate3d(2000px,-2000px,0px) rotateX(0deg);
-    }
-    70% {
-      transform: translate3d(-2000px, 2000px, 0px) rotateX(60deg) scale(5);
-    }
-    80% {
-      transform: translate3d(0,4000px,0px);
-    }
-    85% {
-      transform: translate3d(-0px,-0px,0px) scale(.07);
-    }
-    100% {
-      transform: translate3d(2000px,-2000px,0px);
-      display: none;
-    }
 }
 </style>
diff --git a/playgrounds/nuxt/nuxt.config.ts b/playgrounds/nuxt/nuxt.config.ts
index 3c5480ba..9c60436f 100644
--- a/playgrounds/nuxt/nuxt.config.ts
+++ b/playgrounds/nuxt/nuxt.config.ts
@@ -1,22 +1,22 @@
 export default defineNuxtConfig({
-  modules: ['@nuxt/ui', '@compodium/nuxt'],
+  modules: [
+    '@nuxt/ui',
+    '@compodium/nuxt',
+    '@nuxt/test-utils/module'
+  ],
+
   devtools: { enabled: true },
   css: ['~/assets/css/main.css'],
 
-  typescript: {
-    tsConfig: {
-      compilerOptions: {
-        skipLibCheck: true
-      }
-    }
-  },
-
   compodium: {
     extras: {
       colors: {
         primary: 'blue',
         neutral: 'zinc'
       }
+    },
+    testing: {
+      enabled: true
     }
   }
 })
diff --git a/playgrounds/nuxt/package.json b/playgrounds/nuxt/package.json
index 1cc19be6..2ddf6541 100644
--- a/playgrounds/nuxt/package.json
+++ b/playgrounds/nuxt/package.json
@@ -12,6 +12,14 @@
   "dependencies": {
     "@nuxt/ui": "catalog:",
     "nuxt": "catalog:",
-    "@compodium/nuxt": "workspace:^"
+    "reka-ui": "^2.5.1"
+  },
+  "devDependencies": {
+    "@compodium/nuxt": "workspace:^",
+    "@compodium/testing": "workspace:^",
+    "@nuxt/test-utils": "^3.20.0",
+    "@vitest/ui": "^4.0.3",
+    "vitest": "^3.2.4",
+    "vitest-environment-nuxt": "^1.0.1"
   }
 }
diff --git a/playgrounds/nuxt/test/__snapshots__/CompodiumWelcome.nuxt.spec.ts.snap b/playgrounds/nuxt/test/__snapshots__/CompodiumWelcome.nuxt.spec.ts.snap
new file mode 100644
index 00000000..56f5a2b5
--- /dev/null
+++ b/playgrounds/nuxt/test/__snapshots__/CompodiumWelcome.nuxt.spec.ts.snap
@@ -0,0 +1,18 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Components > CompodiumWelcomeExample > snapshot 1`] = `
+"<div data-v-7949eb4f="" class="data-[spin=true]:animate-spin data-[bounce=true]:animate-bounce" data-spin="false" data-bounce="true">
+  <div data-v-7949eb4f="" class="border border-default p-4 rounded-lg w-sm">
+    <p data-v-7949eb4f="" class="text-center font-bold mb-4">Welcome!</p><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent"><span class="iconify i-lucide:rocket shrink-0 size-5" aria-hidden="true"></span> Go to Compodium
+      <!--v-if-->
+    </button>
+    <div data-v-7949eb4f="" data-orientation="horizontal" role="separator" class="flex items-center align-center text-center w-full flex-row">
+      <div class="border-default w-full border-solid border-t"></div>
+      <div class="font-medium text-default flex mx-3 whitespace-nowrap"><span class="text-sm">or</span></div>
+      <div class="border-default w-full border-solid border-t"></div>
+    </div><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-success hover:bg-success/10 active:bg-success/10 focus:outline-none focus-visible:bg-success/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent"><span class="iconify i-lineicons:nuxt shrink-0 size-5" aria-hidden="true"></span> Open in Nuxt Devtools
+      <!--v-if-->
+    </button>
+  </div>
+</div>"
+`;
diff --git a/playgrounds/nuxt/test/__snapshots__/CompodiumWelcome.spec.ts.snap b/playgrounds/nuxt/test/__snapshots__/CompodiumWelcome.spec.ts.snap
new file mode 100644
index 00000000..56f5a2b5
--- /dev/null
+++ b/playgrounds/nuxt/test/__snapshots__/CompodiumWelcome.spec.ts.snap
@@ -0,0 +1,18 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Components > CompodiumWelcomeExample > snapshot 1`] = `
+"<div data-v-7949eb4f="" class="data-[spin=true]:animate-spin data-[bounce=true]:animate-bounce" data-spin="false" data-bounce="true">
+  <div data-v-7949eb4f="" class="border border-default p-4 rounded-lg w-sm">
+    <p data-v-7949eb4f="" class="text-center font-bold mb-4">Welcome!</p><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent"><span class="iconify i-lucide:rocket shrink-0 size-5" aria-hidden="true"></span> Go to Compodium
+      <!--v-if-->
+    </button>
+    <div data-v-7949eb4f="" data-orientation="horizontal" role="separator" class="flex items-center align-center text-center w-full flex-row">
+      <div class="border-default w-full border-solid border-t"></div>
+      <div class="font-medium text-default flex mx-3 whitespace-nowrap"><span class="text-sm">or</span></div>
+      <div class="border-default w-full border-solid border-t"></div>
+    </div><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-success hover:bg-success/10 active:bg-success/10 focus:outline-none focus-visible:bg-success/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent"><span class="iconify i-lineicons:nuxt shrink-0 size-5" aria-hidden="true"></span> Open in Nuxt Devtools
+      <!--v-if-->
+    </button>
+  </div>
+</div>"
+`;
diff --git a/playgrounds/nuxt/test/nuxt/CompodiumWelcome.spec.ts b/playgrounds/nuxt/test/nuxt/CompodiumWelcome.spec.ts
new file mode 100644
index 00000000..3f2f9a37
--- /dev/null
+++ b/playgrounds/nuxt/test/nuxt/CompodiumWelcome.spec.ts
@@ -0,0 +1,16 @@
+import { expect, it } from 'vitest'
+import { mountSuspended } from '@nuxt/test-utils/runtime'
+import { describeComponent } from '@compodium/testing/unit'
+
+describeComponent('CompodiumWelcome', ({ component, props }) => {
+  it('works', async () => {
+    const wrapper = await mountSuspended(component, { props })
+    const instance = wrapper.findComponent({ name: 'CompodiumWelcome' })
+    expect(instance.exists()).toBe(true)
+  })
+
+  it('snapshot', async () => {
+    const wrapper = await mountSuspended(component, { props })
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+})
diff --git a/playgrounds/nuxt/test/nuxt/Snapshots.spec.ts b/playgrounds/nuxt/test/nuxt/Snapshots.spec.ts
new file mode 100644
index 00000000..bbc49b7f
--- /dev/null
+++ b/playgrounds/nuxt/test/nuxt/Snapshots.spec.ts
@@ -0,0 +1,10 @@
+import { it, expect } from 'vitest'
+import { describeComponents } from '@compodium/testing/unit'
+import { mountSuspended } from '@nuxt/test-utils/runtime'
+
+describeComponents(({ component, props }) => {
+  it('snapshot', async () => {
+    const wrapper = await mountSuspended(component, { props })
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+})
diff --git a/playgrounds/nuxt/test/nuxt/SupportedProps.spec.ts b/playgrounds/nuxt/test/nuxt/SupportedProps.spec.ts
new file mode 100644
index 00000000..66a9669f
--- /dev/null
+++ b/playgrounds/nuxt/test/nuxt/SupportedProps.spec.ts
@@ -0,0 +1,8 @@
+import { expect, it } from 'vitest'
+import { describeComponent } from '@compodium/testing/unit'
+
+describeComponent('SupportedProps', ({ props }) => {
+  it('includes default props', () => {
+    expect(props?.string).toEqual('hello')
+  })
+})
diff --git a/playgrounds/nuxt/test/nuxt/__snapshots__/CompodiumWelcome.spec.ts.snap b/playgrounds/nuxt/test/nuxt/__snapshots__/CompodiumWelcome.spec.ts.snap
new file mode 100644
index 00000000..56f5a2b5
--- /dev/null
+++ b/playgrounds/nuxt/test/nuxt/__snapshots__/CompodiumWelcome.spec.ts.snap
@@ -0,0 +1,18 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Components > CompodiumWelcomeExample > snapshot 1`] = `
+"<div data-v-7949eb4f="" class="data-[spin=true]:animate-spin data-[bounce=true]:animate-bounce" data-spin="false" data-bounce="true">
+  <div data-v-7949eb4f="" class="border border-default p-4 rounded-lg w-sm">
+    <p data-v-7949eb4f="" class="text-center font-bold mb-4">Welcome!</p><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent"><span class="iconify i-lucide:rocket shrink-0 size-5" aria-hidden="true"></span> Go to Compodium
+      <!--v-if-->
+    </button>
+    <div data-v-7949eb4f="" data-orientation="horizontal" role="separator" class="flex items-center align-center text-center w-full flex-row">
+      <div class="border-default w-full border-solid border-t"></div>
+      <div class="font-medium text-default flex mx-3 whitespace-nowrap"><span class="text-sm">or</span></div>
+      <div class="border-default w-full border-solid border-t"></div>
+    </div><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-success hover:bg-success/10 active:bg-success/10 focus:outline-none focus-visible:bg-success/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent"><span class="iconify i-lineicons:nuxt shrink-0 size-5" aria-hidden="true"></span> Open in Nuxt Devtools
+      <!--v-if-->
+    </button>
+  </div>
+</div>"
+`;
diff --git a/playgrounds/nuxt/test/nuxt/__snapshots__/Snapshots.spec.ts.snap b/playgrounds/nuxt/test/nuxt/__snapshots__/Snapshots.spec.ts.snap
new file mode 100644
index 00000000..f4f663c1
--- /dev/null
+++ b/playgrounds/nuxt/test/nuxt/__snapshots__/Snapshots.spec.ts.snap
@@ -0,0 +1,1180 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Components > CompodiumWelcomeExample > snapshot 1`] = `
+"<div data-v-7949eb4f="" class="data-[spin=true]:animate-spin data-[bounce=true]:animate-bounce" data-spin="false" data-bounce="true">
+  <div data-v-7949eb4f="" class="border border-default p-4 rounded-lg w-sm">
+    <p data-v-7949eb4f="" class="text-center font-bold mb-4">Welcome!</p><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent"><span class="iconify i-lucide:rocket shrink-0 size-5" aria-hidden="true"></span> Go to Compodium
+      <!--v-if-->
+    </button>
+    <div data-v-7949eb4f="" data-orientation="horizontal" role="separator" class="flex items-center align-center text-center w-full flex-row">
+      <div class="border-default w-full border-solid border-t"></div>
+      <div class="font-medium text-default flex mx-3 whitespace-nowrap"><span class="text-sm">or</span></div>
+      <div class="border-default w-full border-solid border-t"></div>
+    </div><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-success hover:bg-success/10 active:bg-success/10 focus:outline-none focus-visible:bg-success/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent"><span class="iconify i-lineicons:nuxt shrink-0 size-5" aria-hidden="true"></span> Open in Nuxt Devtools
+      <!--v-if-->
+    </button>
+  </div>
+</div>"
+`;
+
+exports[`Components > SupportedProps > snapshot 1`] = `"<p>Supported prop types</p>"`;
+
+exports[`Nuxt UI > UAccordionExample > snapshot 1`] = `
+"<div class="w-96"></div>
+<!--teleport start-->
+<!--teleport end-->"
+`;
+
+exports[`Nuxt UI > UAlertExample > snapshot 1`] = `
+"<div data-orientation="vertical" class="relative overflow-hidden rounded-lg p-4 flex gap-2.5 items-start bg-primary text-inverted w-60">
+  <!--v-if-->
+  <div class="min-w-0 flex-1 flex flex-col">
+    <!--v-if-->
+    <!--v-if-->
+    <!--v-if-->
+  </div>
+  <!--v-if-->
+</div>
+<!--teleport start-->
+<!--teleport end-->"
+`;
+
+exports[`Nuxt UI > UAuthFormExample > snapshot 1`] = `
+"<div class="w-full space-y-6 max-w-md">
+  <!--v-if-->
+  <div class="gap-y-6 flex flex-col">
+    <!--v-if-->
+    <!--v-if-->
+    <!--v-if-->
+  </div>
+  <!--v-if-->
+</div>
+<!--teleport start-->
+<!--teleport end-->"
+`;
+
+exports[`Nuxt UI > UAvatarExample > snapshot 1`] = `
+"<span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base"><span class="font-medium leading-none text-muted truncate">&nbsp;</span></span>
+<!--teleport start-->
+<!--teleport end-->"
+`;
+
+exports[`Nuxt UI > UAvatarGroupExample > snapshot 1`] = `
+"<div class="inline-flex flex-row-reverse justify-end">
+  <!--v-if--><span class="inline-flex items-center justify-center shrink-0 select-none align-middle bg-elevated size-8 text-base relative rounded-full ring-bg first:me-0 ring-2 -me-1.5"><img src="https://github.com/noook.png" alt="Neil Richter" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span><span class="inline-flex items-center justify-center shrink-0 select-none align-middle bg-elevated size-8 text-base relative rounded-full ring-bg first:me-0 ring-2 -me-1.5"><img src="https://github.com/romhml.png" alt="Romain Hamel" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span><span class="inline-flex items-center justify-center shrink-0 select-none align-middle bg-elevated size-8 text-base relative rounded-full ring-bg first:me-0 ring-2 -me-1.5"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
+</div>
+<!--teleport start-->
+<!--teleport end-->"
+`;
+
+exports[`Nuxt UI > UBadgeExample > snapshot 1`] = `
+"<span class="font-medium inline-flex items-center text-xs gap-1 rounded-md bg-primary text-inverted p-1"><!--v-if--><!--v-if--><!--v-if--></span>
+<!--teleport start-->
+<!--teleport end-->"
+`;
+
+exports[`Nuxt UI > UBannerExample > snapshot 1`] = `
+"<div data-v-94aaaec9="" class="banner relative z-50 w-full transition-colors bg-primary">
+  <!--v-if-->
+  <div data-v-94aaaec9="" class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between gap-3 h-12">
+    <div data-v-94aaaec9="" class="hidden lg:flex-1 lg:flex lg:items-center"></div>
+    <div data-v-94aaaec9="" class="flex items-center gap-1.5 min-w-0">
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </div>
+    <div data-v-94aaaec9="" class="lg:flex-1 flex items-center justify-end">
+      <!--v-if-->
+    </div>
+  </div>
+</div>
+<!--teleport start-->
+<!--teleport end-->"
+`;
+
+exports[`Nuxt UI > UBlogPostExample > snapshot 1`] = `
+"<article data-orientation="vertical" class="relative group/blog-post rounded-lg overflow-hidden flex flex-col bg-default ring ring-default">
+  <!--v-if-->
+  <div class="min-w-0 flex-1 flex flex-col p-4 sm:p-6">
+    <!--v-if-->
+    <!--v-if-->
+    <!--v-if-->
+    <!--v-if-->
+    <!--v-if-->
+  </div>
+  <!--v-if-->
+</article>
+<!--teleport start-->
+<!--teleport end-->"
+`;
+
+exports[`Nuxt UI > UBlogPostsExample > snapshot 1`] = `
+"<div data-orientation="horizontal" class="flex flex-col gap-8 lg:gap-y-16 sm:grid sm:grid-cols-2 lg:grid-cols-3"></div>
+<!--teleport start-->
+<!--teleport end-->"
+`;
+
+exports[`Nuxt UI > UBreadcrumbExample > snapshot 1`] = `
+"<nav aria-label="breadcrumb" class="relative min-w-0">
+  <ol class="flex items-center gap-1.5"></ol>
+</nav>
+<!--teleport start-->
+<!--teleport end-->"
+`;
+
+exports[`Nuxt UI > UButtonExample > snapshot 1`] = `
+"<button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5"></button>
+<!--teleport start-->
+<!--teleport end-->"
+`;
+
+exports[`Nuxt UI > UCalendarExample > snapshot 1`] = `
+"<div aria-label="Event Date, November 2025" dir="ltr">
+  <div class="flex items-center justify-between"><button type="button" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true"></span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true"></span>
+      <!--v-if-->
+      <!--v-if-->
+    </button>
+    <div class="text-center font-medium truncate mx-auto text-sm">November 2025</div><button type="button" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true"></span>
+      <!--v-if-->
+      <!--v-if-->
+    </button>
+  </div>
+  <div class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
+    <table tabindex="-1" role="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
+      <thead aria-hidden="true">
+        <tr class="mb-1 grid w-full grid-cols-7">
+          <th class="rounded-md text-primary text-xs">S</th>
+          <th class="rounded-md text-primary text-xs">M</th>
+          <th class="rounded-md text-primary text-xs">T</th>
+          <th class="rounded-md text-primary text-xs">W</th>
+          <th class="rounded-md text-primary text-xs">T</th>
+          <th class="rounded-md text-primary text-xs">F</th>
+          <th class="rounded-md text-primary text-xs">S</th>
+        </tr>
+      </thead>
+      <tbody class="grid">
+        <tr class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-10-26" month="2025-11-01" role="button" aria-label="Sunday, October 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-10-26" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-10-27" month="2025-11-01" role="button" aria-label="Monday, October 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-10-27" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-10-28" month="2025-11-01" role="button" aria-label="Tuesday, October 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-10-28" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-10-29" month="2025-11-01" role="button" aria-label="Wednesday, October 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-10-29" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-10-30" month="2025-11-01" role="button" aria-label="Thursday, October 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-10-30" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-10-31" month="2025-11-01" role="button" aria-label="Friday, October 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-10-31" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-11-01" month="2025-11-01" role="button" aria-label="Saturday, November 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-11-01" data-today="" data-focused="" tabindex="0" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-11-02" month="2025-11-01" role="button" aria-label="Sunday, November 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-11-02" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-11-03" month="2025-11-01" role="button" aria-label="Monday, November 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-11-03" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-11-04" month="2025-11-01" role="button" aria-label="Tuesday, November 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-11-04" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-11-05" month="2025-11-01" role="button" aria-label="Wednesday, November 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-11-05" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-11-06" month="2025-11-01" role="button" aria-label="Thursday, November 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-11-06" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-11-07" month="2025-11-01" role="button" aria-label="Friday, November 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-11-07" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-11-08" month="2025-11-01" role="button" aria-label="Saturday, November 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-11-08" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-11-09" month="2025-11-01" role="button" aria-label="Sunday, November 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-11-09" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-11-10" month="2025-11-01" role="button" aria-label="Monday, November 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-11-10" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-11-11" month="2025-11-01" role="button" aria-label="Tuesday, November 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-11-11" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-11-12" month="2025-11-01" role="button" aria-label="Wednesday, November 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-11-12" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-11-13" month="2025-11-01" role="button" aria-label="Thursday, November 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-11-13" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-11-14" month="2025-11-01" role="button" aria-label="Friday, November 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-11-14" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-11-15" month="2025-11-01" role="button" aria-label="Saturday, November 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-11-15" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-11-16" month="2025-11-01" role="button" aria-label="Sunday, November 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-11-16" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-11-17" month="2025-11-01" role="button" aria-label="Monday, November 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-11-17" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-11-18" month="2025-11-01" role="button" aria-label="Tuesday, November 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-11-18" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-11-19" month="2025-11-01" role="button" aria-label="Wednesday, November 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-11-19" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-11-20" month="2025-11-01" role="button" aria-label="Thursday, November 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-11-20" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-11-21" month="2025-11-01" role="button" aria-label="Friday, November 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-11-21" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-11-22" month="2025-11-01" role="button" aria-label="Saturday, November 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-11-22" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-11-23" month="2025-11-01" role="button" aria-label="Sunday, November 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-11-23" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-11-24" month="2025-11-01" role="button" aria-label="Monday, November 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-11-24" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-11-25" month="2025-11-01" role="button" aria-label="Tuesday, November 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-11-25" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-11-26" month="2025-11-01" role="button" aria-label="Wednesday, November 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-11-26" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-11-27" month="2025-11-01" role="button" aria-label="Thursday, November 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-11-27" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-11-28" month="2025-11-01" role="button" aria-label="Friday, November 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-11-28" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-11-29" month="2025-11-01" role="button" aria-label="Saturday, November 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-11-29" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-11-30" month="2025-11-01" role="button" aria-label="Sunday, November 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-11-30" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-12-01" month="2025-11-01" role="button" aria-label="Monday, December 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-12-01" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-12-02" month="2025-11-01" role="button" aria-label="Tuesday, December 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-12-02" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-12-03" month="2025-11-01" role="button" aria-label="Wednesday, December 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-12-03" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-12-04" month="2025-11-01" role="button" aria-label="Thursday, December 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-12-04" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-12-05" month="2025-11-01" role="button" aria-label="Friday, December 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-12-05" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-12-06" month="2025-11-01" role="button" aria-label="Saturday, December 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-12-06" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+  <div style="border: 0px; clip: rect(0px, 0px, 0px, 0px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; white-space: nowrap; width: 1px;">
+    <div role="heading" aria-level="2">Event Date, November 2025</div>
+  </div>
+</div>
+<!--teleport start-->
+<!--teleport end-->"
+`;
+
+exports[`Nuxt UI > UCardExample > snapshot 1`] = `
+"<div class="rounded-lg overflow-hidden bg-default ring ring-default divide-y divide-default w-96">
+  <!--v-if-->
+  <div class="p-4 sm:p-6">
+    <div class="placeholder h-32"></div>
+  </div>
+  <!--v-if-->
+</div>
+<!--teleport start-->
+<!--teleport end-->"
+`;
+
+exports[`Nuxt UI > UCarouselExample > snapshot 1`] = `
+"<div role="region" aria-roledescription="carousel" data-orientation="horizontal" tabindex="0" class="relative focus:outline-none w-xs h-xs">
+  <div class="overflow-hidden">
+    <div class="flex items-start flex-row -ms-4" style="transform: translate3d(NaNpx,0px,0px);">
+      <div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/id/240/320/320" class="rounded-lg"></div>
+      <div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/id/241/320/320" class="rounded-lg"></div>
+      <div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/id/242/320/320" class="rounded-lg"></div>
+    </div>
+  </div>
+  <!--v-if-->
+</div>
+<!--teleport start-->
+<!--teleport end-->"
+`;
+
+exports[`Nuxt UI > UChangelogVersionExample > snapshot 1`] = `
+"<article class="relative">
+  <div class="absolute start-0 top-0 w-32 hidden lg:flex items-center justify-end gap-3 min-w-0">
+    <!--v-if-->
+    <div class="size-4 rounded-full bg-default ring ring-default flex items-center justify-center my-1">
+      <div class="size-2 rounded-full bg-primary"></div>
+    </div>
+  </div>
+  <div class="flex flex-col mx-auto max-w-2xl">
+    <!--v-if-->
+    <!--v-if-->
+  </div>
+</article>
+<!--teleport start-->
+<!--teleport end-->"
+`;
+
+exports[`Nuxt UI > UChangelogVersionsExample > snapshot 1`] = `
+"<div class="relative min-w-5xl">
+  <div class="absolute hidden lg:block overflow-hidden inset-y-3 start-32 h-full w-px bg-border -ms-[8.5px]">
+    <div class="absolute start-0 top-0 w-full bg-primary will-change-[height]" style="height: 0%;"></div>
+  </div>
+  <div class="flex flex-col gap-y-8 sm:gap-y-12 lg:gap-y-16">
+    <!---->
+    <!---->
+    <article class="relative">
+      <div class="absolute start-0 top-0 w-32 hidden lg:flex items-center justify-end gap-3 min-w-0"><time datetime="2024-03-15T00:00:00.000Z" class="text-sm/6 text-toned truncate">Mar 15, 2024</time>
+        <div class="size-4 rounded-full bg-default ring ring-default flex items-center justify-center my-1">
+          <div class="size-2 rounded-full bg-primary"></div>
+        </div>
+      </div>
+      <div class="flex flex-col mx-auto max-w-2xl">
+        <div class="">
+          <div class="flex items-center gap-3 mb-2"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md text-inverted bg-inverted"><!--v-if--><span class="truncate">Release</span>
+            <!--v-if--></span><time datetime="2024-03-15T00:00:00.000Z" class="text-sm/6 text-toned truncate lg:hidden">Mar 15, 2024</time>
+          </div>
+          <h2 class="relative text-xl text-pretty font-semibold text-highlighted">
+            <!--v-if-->Version 1.2.0
+          </h2>
+          <div class="text-base text-pretty text-muted mt-1">Added new features and bug fixes.</div>
+          <!--v-if-->
+        </div>
+        <!--v-if-->
+      </div>
+    </article>
+    <!---->
+    <!---->
+    <article class="relative">
+      <div class="absolute start-0 top-0 w-32 hidden lg:flex items-center justify-end gap-3 min-w-0"><time datetime="2024-02-20T00:00:00.000Z" class="text-sm/6 text-toned truncate">Feb 20, 2024</time>
+        <div class="size-4 rounded-full bg-default ring ring-default flex items-center justify-center my-1">
+          <div class="size-2 rounded-full bg-primary"></div>
+        </div>
+      </div>
+      <div class="flex flex-col mx-auto max-w-2xl">
+        <div class="">
+          <div class="flex items-center gap-3 mb-2"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md text-inverted bg-inverted"><!--v-if--><span class="truncate">Update</span>
+            <!--v-if--></span><time datetime="2024-02-20T00:00:00.000Z" class="text-sm/6 text-toned truncate lg:hidden">Feb 20, 2024</time>
+          </div>
+          <h2 class="relative text-xl text-pretty font-semibold text-highlighted">
+            <!--v-if-->Version 1.1.0
+          </h2>
+          <div class="text-base text-pretty text-muted mt-1">Performance improvements and optimizations.</div>
+          <!--v-if-->
+        </div>
+        <!--v-if-->
+      </div>
+    </article>
+  </div>
+</div>
+<!--teleport start-->
+<!--teleport end-->"
+`;
+
+exports[`Nuxt UI > UChatMessagesExample > snapshot 1`] = `
+"<div class="w-full flex flex-col gap-1 flex-1 px-2.5 [&amp;>article]:last-of-type:min-h-(--last-message-height) max-h-96 overflow-y-auto" style="--last-message-height: 0px;">
+  <!--v-if-->
+  <!---->
+</div>
+<!--teleport start-->
+<!--teleport end-->"
+`;
+
+exports[`Nuxt UI > UChatPaletteExample > snapshot 1`] = `
+"<div class="relative flex-1 flex flex-col min-h-0 min-w-0">
+  <div class="overflow-y-auto flex-1 flex flex-col py-3">
+    <div class="w-full flex flex-col gap-1 flex-1 px-2.5 [&amp;>article]:last-of-type:min-h-(--last-message-height)" style="--last-message-height: 0px;">
+      <article data-role="assistant" class="group/message relative w-full scroll-mt-3">
+        <div class="relative flex items-start rtl:justify-end gap-1.5 pb-3">
+          <!--v-if-->
+          <div class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 w-full">Hello! How can I help you today?</div>
+          <!--v-if-->
+        </div>
+      </article>
+      <article data-role="user" class="group/message relative w-full scroll-mt-3">
+        <div class="relative flex items-start ltr:justify-end ms-auto max-w-[75%] gap-1.5 pb-3">
+          <!--v-if-->
+          <div class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 bg-elevated/50 px-2 py-1 rounded-lg min-h-8">I need help with my project setup.</div>
+          <!--v-if-->
+        </div>
+      </article>
+      <article data-role="assistant" class="group/message relative w-full scroll-mt-3">
+        <div class="relative flex items-start rtl:justify-end gap-1.5 pb-3">
+          <!--v-if-->
+          <div class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 w-full">I'd be happy to help! What kind of project are you working on?</div>
+          <!--v-if-->
+        </div>
+      </article>
+      <!--v-if-->
+      <!---->
+    </div>
+  </div>
+  <form class="relative flex flex-col items-stretch gap-2 py-2 w-full rounded-lg backdrop-blur bg-default/75 ring ring-default px-0 rounded-t-none border-t border-default">
+    <!--v-if-->
+    <div class="relative inline-flex items-start"><textarea rows="1" placeholder="Type your message here…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 gap-1.5 text-highlighted bg-transparent resize-none text-base/5" value=""></textarea>
+      <!--v-if-->
+      <!--v-if-->
+    </div>
+    <!--v-if-->
+  </form>
+</div>
+<!--teleport start-->
+<!--teleport end-->"
+`;
+
+exports[`Nuxt UI > UChatPromptExample > snapshot 1`] = `
+"<form class="relative flex flex-col items-stretch gap-2 px-2.5 py-2 rounded-lg backdrop-blur bg-default/75 ring ring-default w-full">
+  <!--v-if-->
+  <div class="relative inline-flex items-start"><textarea rows="1" placeholder="Type your message here…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 gap-1.5 text-highlighted bg-transparent resize-none text-base/5" value=""></textarea>
+    <!--v-if-->
+    <!--v-if-->
+  </div>
+  <!--v-if-->
+</form>
+<!--teleport start-->
+<!--teleport end-->"
+`;
+
+exports[`Nuxt UI > UChatPromptSubmitExample > snapshot 1`] = `
+"<button type="submit" aria-label="Send prompt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5 rounded-full"><span class="iconify i-lucide:arrow-up shrink-0 size-5" aria-hidden="true"></span>
+  <!--v-if-->
+  <!--v-if-->
+</button>
+<!--teleport start-->
+<!--teleport end-->"
+`;
+
+exports[`Nuxt UI > UCheckboxExample > snapshot 1`] = `
+"<div class="relative flex items-start flex-row">
+  <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
+      <!---->
+      <!--v-if-->
+    </button></div>
+  <!--v-if-->
+</div>
+<!--teleport start-->
+<!--teleport end-->"
+`;
+
+exports[`Nuxt UI > UCheckboxGroupExample > snapshot 1`] = `
+"<div id="v-0-0-0" class="relative" tabindex="-1" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;">
+  <fieldset class="flex gap-x-2 flex-col gap-y-1">
+    <!--v-if-->
+  </fieldset>
+  <!--v-if-->
+</div>
+<!--teleport start-->
+<!--teleport end-->"
+`;
+
+exports[`Nuxt UI > UChipExample > snapshot 1`] = `
+"<div class="relative inline-flex items-center justify-center shrink-0"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base"><img src="https://avatars.githubusercontent.com/u/739984?v=4" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span><span class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-primary h-[8px] min-w-[8px] text-[8px] top-0 right-0 absolute -translate-y-1/2 translate-x-1/2 transform"></span></div>
+<!--teleport start-->
+<!--teleport end-->"
+`;
+
+exports[`Nuxt UI > UCollapsibleExample > snapshot 1`] = `
+"<div data-state="closed" class="w-48"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted">
+    <!--v-if--><span class="truncate">Open Collapse</span>
+    <!--v-if-->
+  </button>
+  <div class="data-[state=open]:animate-[collapsible-down_200ms_ease-out] data-[state=closed]:animate-[collapsible-up_200ms_ease-out] overflow-hidden" id="reka-collapsible-content-v-0-0-0" hidden="" data-state="closed" style="--reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;">
+    <!--v-if-->
+  </div>
+</div>
+<!--teleport start-->
+<!--teleport end-->"
+`;
+
+exports[`Nuxt UI > UColorModeAvatarExample > snapshot 1`] = `
+"<span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base dark:hidden"><span class="font-medium leading-none text-muted truncate">&nbsp;</span></span>
+<span class="items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base hidden dark:block"><span class="font-medium leading-none text-muted truncate">&nbsp;</span></span>
+<!--teleport start-->
+<!--teleport end-->"
+`;
+
+exports[`Nuxt UI > UColorModeButtonExample > snapshot 1`] = `
+"<button type="button" aria-label="Switch to dark mode" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 rounded-lg"><span class="iconify i-lucide:sun shrink-0 size-5" aria-hidden="true"></span>
+  <!--v-if-->
+  <!--v-if-->
+</button>
+<!--teleport start-->
+<!--teleport end-->"
+`;
+
+exports[`Nuxt UI > UColorModeImageExample > snapshot 1`] = `
+"<img class="dark:hidden">
+<img class="hidden dark:block">
+<!--teleport start-->
+<!--teleport end-->"
+`;
+
+exports[`Nuxt UI > UColorModeSelectExample > snapshot 1`] = `
+"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" dir="ltr" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9 pe-9 w-32"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:monitor shrink-0 text-dimmed size-5" aria-hidden="true"></span></span><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true"></span></span></button>
+<!--teleport start-->
+<!--teleport end-->
+<!--v-if-->
+<!--teleport start-->
+<!--teleport end-->"
+`;
+
+exports[`Nuxt UI > UColorModeSwitchExample > snapshot 1`] = `
+"<div class="relative flex items-start">
+  <div class="flex items-center h-5"><button aria-label="Switch to dark mode" class="inline-flex items-center shrink-0 rounded-full border-2 border-transparent focus-visible:outline-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-accented transition-[background] duration-200 data-[state=checked]:bg-primary focus-visible:outline-primary w-9" id="v-0-0-1" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="on"><span data-state="unchecked" class="group pointer-events-none rounded-full bg-default shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 flex items-center justify-center size-4 data-[state=checked]:translate-x-4 data-[state=checked]:rtl:-translate-x-4"><span class="iconify i-lucide:moon absolute shrink-0 group-data-[state=unchecked]:text-dimmed opacity-0 size-10/12 transition-[color,opacity] duration-200 group-data-[state=checked]:text-primary group-data-[state=checked]:opacity-100" aria-hidden="true"></span><span class="iconify i-lucide:sun absolute shrink-0 group-data-[state=unchecked]:text-dimmed opacity-0 size-10/12 transition-[color,opacity] duration-200 group-data-[state=checked]:text-primary group-data-[state=unchecked]:opacity-100" aria-hidden="true"></span></span>
+      <!--v-if-->
+    </button></div>
+  <!--v-if-->
+</div>
+<!--teleport start-->
+<!--teleport end-->"
+`;
+
+exports[`Nuxt UI > UColorPickerExample > snapshot 1`] = `
+"<div data-v-10c1442b="" class="data-[disabled]:opacity-75">
+  <div data-v-10c1442b="" class="flex gap-4">
+    <div data-v-10c1442b="" class="rounded-md touch-none w-42 h-42" style="background-color: #FF0000;">
+      <div data-v-10c1442b="" class="w-full h-full relative rounded-md" data-color-picker-background="">
+        <div data-v-10c1442b="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-(--color-white) rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FFFFFF; left: 0%; top: 0%;"></div>
+      </div>
+    </div>
+    <div data-v-10c1442b="" class="w-[8px] relative rounded-md touch-none h-42" data-color-picker-track="">
+      <div data-v-10c1442b="" class="absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-(--color-white) cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FF0000; top: 0%;"></div>
+    </div>
+  </div>
+</div>
+<!--teleport start-->
+<!--teleport end-->"
+`;
+
+exports[`Nuxt UI > UCommandPaletteExample > snapshot 1`] = `
+"<div dir="ltr" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
+  <div class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent ps-9" autocomplete="off" aria-disabled="false" value=""><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:search shrink-0 text-dimmed size-5" aria-hidden="true"></span></span>
+    <!--v-if-->
+  </div>
+  <div class="relative overflow-hidden flex flex-col" role="listbox" tabindex="-1" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
+    <div class="py-6 text-center text-sm text-muted">No data</div>
+  </div>
+  <!--v-if-->
+  <!--v-if-->
+</div>
+<!--teleport start-->
+<!--teleport end-->"
+`;
+
+exports[`Nuxt UI > UContainerExample > snapshot 1`] = `
+"<div class="max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 w-72 aspect-video">
+  <div class="placeholder size-full"> Container </div>
+</div>
+<!--teleport start-->
+<!--teleport end-->"
+`;
+
+exports[`Nuxt UI > UContextMenuExample > snapshot 1`] = `
+"<div data-state="closed" style="pointer-events: auto;" class="placeholder aspect-video w-72"> Right click here </div>
+<!--teleport start-->
+<!--teleport end-->
+<!--teleport start-->
+<!--teleport end-->"
+`;
+
+exports[`Nuxt UI > UDrawerExample > snapshot 1`] = `
+"<button type="button" aria-haspopup="dialog" aria-expanded="false" data-state="closed" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted">
+  <!--v-if--><span class="truncate">Open Drawer</span>
+  <!--v-if-->
+</button>
+<!--teleport start-->
+<!--teleport end-->
+<!--teleport start-->
+<!--teleport end-->"
+`;
+
+exports[`Nuxt UI > UDropdownMenuExample > snapshot 1`] = `
+"<button type="button" id="reka-dropdown-menu-trigger-v-0-0-0" aria-haspopup="menu" aria-expanded="false" data-state="closed" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted">
+  <!--v-if--><span class="truncate">Open Menu</span>
+  <!--v-if-->
+</button>
+<!--teleport start-->
+<!--teleport end-->
+<!--teleport start-->
+<!--teleport end-->"
+`;
+
+exports[`Nuxt UI > UErrorExample > snapshot 1`] = `
+"<div class="min-h-[calc(100vh-var(--ui-header-height))] flex flex-col items-center justify-center text-center">
+  <!--v-if-->
+  <!--v-if-->
+  <!--v-if-->
+  <div class="mt-8 flex items-center justify-center gap-6"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+      <!--v-if--><span class="truncate">Back to home</span>
+      <!--v-if-->
+    </button></div>
+</div>
+<!--teleport start-->
+<!--teleport end-->"
+`;
+
+exports[`Nuxt UI > UFieldGroupExample > snapshot 1`] = `
+"<div data-orientation="horizontal" class="relative inline-flex -space-x-px">
+  <div class="relative inline-flex items-center group has-focus-visible:z-[1]"><input type="text" placeholder="Search..." class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors group-not-only:group-first:rounded-e-none group-not-only:group-last:rounded-s-none group-not-last:group-not-first:rounded-none px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off">
+    <!--v-if-->
+    <!--v-if-->
+  </div><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors not-only:first:rounded-e-none not-only:last:rounded-s-none not-last:not-first:rounded-none focus-visible:z-[1] px-2.5 py-1.5 text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted">
+    <!--v-if--> Button
+    <!--v-if-->
+  </button>
+</div>
+<!--teleport start-->
+<!--teleport end-->"
+`;
+
+exports[`Nuxt UI > UFileUploadExample > snapshot 1`] = `
+"<div class="relative flex flex-col w-96 min-h-48">
+  <div role="button" data-dragging="false" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
+    <!--v-if-->
+    <div class="flex flex-col items-center justify-center text-center px-4 py-3"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><span class="iconify i-lucide:upload text-muted shrink-0" aria-hidden="true"></span></span>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </div>
+  </div>
+  <!--v-if--><input type="file" accept="*" class="sr-only" tabindex="-1">
+</div>
+<!--teleport start-->
+<!--teleport end-->"
+`;
+
+exports[`Nuxt UI > UFormExample > snapshot 1`] = `
+"<form id="v-0-0-0" class="space-y-4">
+  <div class="text-sm">
+    <div class="">
+      <div class="flex content-center items-center justify-between"><label for="v-0-0-1" class="block font-medium text-default">Email</label>
+        <!--v-if-->
+      </div>
+      <!--v-if-->
+    </div>
+    <div class="mt-1 relative">
+      <div class="relative inline-flex items-center"><input id="v-0-0-1" type="text" name="email" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off" aria-invalid="false">
+        <!--v-if-->
+        <!--v-if-->
+      </div>
+      <!--v-if-->
+    </div>
+  </div>
+  <div class="text-sm">
+    <div class="">
+      <div class="flex content-center items-center justify-between"><label for="v-0-0-2" class="block font-medium text-default">Password</label>
+        <!--v-if-->
+      </div>
+      <!--v-if-->
+    </div>
+    <div class="mt-1 relative">
+      <div class="relative inline-flex items-center"><input id="v-0-0-2" type="password" name="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off" aria-invalid="false">
+        <!--v-if-->
+        <!--v-if-->
+      </div>
+      <!--v-if-->
+    </div>
+  </div><button type="submit" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+    <!--v-if--> Submit
+    <!--v-if-->
+  </button>
+</form>
+<!--teleport start-->
+<!--teleport end-->"
+`;
+
+exports[`Nuxt UI > UFormFieldExample > snapshot 1`] = `
+"<div class="text-sm">
+  <div class="">
+    <!--v-if-->
+    <!--v-if-->
+  </div>
+  <div class="">
+    <div class="relative inline-flex items-center"><input id="v-0-0-0" type="text" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off" aria-invalid="false">
+      <!--v-if-->
+      <!--v-if-->
+    </div>
+    <!--v-if-->
+  </div>
+</div>
+<!--teleport start-->
+<!--teleport end-->"
+`;
+
+exports[`Nuxt UI > UIconExample > snapshot 1`] = `
+"<!--teleport start-->
+<!--teleport end-->"
+`;
+
+exports[`Nuxt UI > UInputExample > snapshot 1`] = `
+"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off">
+  <!--v-if-->
+  <!--v-if-->
+</div>
+<!--teleport start-->
+<!--teleport end-->"
+`;
+
+exports[`Nuxt UI > UInputMenuExample > snapshot 1`] = `
+"<div dir="ltr" class="relative inline-flex items-center"><input aria-disabled="false" type="text" aria-expanded="false" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" value="">
+  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true"></span></button>
+  <!--teleport start-->
+  <!--teleport end-->
+  <!--v-if-->
+</div>
+<!--teleport start-->
+<!--teleport end-->"
+`;
+
+exports[`Nuxt UI > UInputNumberExample > snapshot 1`] = `
+"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9 pe-9" value="">
+  <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true"></span>
+      <!--v-if-->
+      <!--v-if-->
+    </button></div>
+  <div class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><span class="iconify i-lucide:minus shrink-0 size-5" aria-hidden="true"></span>
+      <!--v-if-->
+      <!--v-if-->
+    </button></div>
+  <!--v-if-->
+</div>
+<!--teleport start-->
+<!--teleport end-->"
+`;
+
+exports[`Nuxt UI > UInputTagsExample > snapshot 1`] = `
+"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
+  <!--v-if-->
+  <!--v-if-->
+  <!--v-if-->
+</div>
+<!--teleport start-->
+<!--teleport end-->"
+`;
+
+exports[`Nuxt UI > UKbdExample > snapshot 1`] = `
+"<kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default"></kbd>
+<!--teleport start-->
+<!--teleport end-->"
+`;
+
+exports[`Nuxt UI > ULinkExample > snapshot 1`] = `
+"<button type="button" class="focus-visible:outline-primary text-muted hover:text-default transition-colors"> Link </button>
+<!--teleport start-->
+<!--teleport end-->"
+`;
+
+exports[`Nuxt UI > ULocaleSelectExample > snapshot 1`] = `
+"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" dir="ltr" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9 pe-9 w-40"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><!--v-if--></span><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true"></span></span></button>
+<!--teleport start-->
+<!--teleport end-->
+<!--v-if-->
+<!--teleport start-->
+<!--teleport end-->"
+`;
+
+exports[`Nuxt UI > UMarqueeExample > snapshot 1`] = `
+"<div data-orientation="horizontal" class="group relative flex items-center overflow-hidden gap-(--gap) [--gap:--spacing(16)] [--duration:20s] before:absolute before:pointer-events-none before:content-[&quot;&quot;] before:z-2 before:from-default before:to-transparent after:absolute after:pointer-events-none after:content-[&quot;&quot;] after:z-2 after:from-default after:to-transparent flex-row before:inset-y-0 before:left-0 before:h-full before:w-1/3 before:bg-gradient-to-r after:inset-y-0 after:right-0 after:h-full after:w-1/3 after:bg-gradient-to-l backface-hidden">
+  <div class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"><span class="iconify i-simple-icons:github size-10 shrink-0" aria-hidden="true"></span><span class="iconify i-simple-icons:discord size-10 shrink-0" aria-hidden="true"></span><span class="iconify i-simple-icons:x size-10 shrink-0" aria-hidden="true"></span><span class="iconify i-simple-icons:instagram size-10 shrink-0" aria-hidden="true"></span><span class="iconify i-simple-icons:linkedin size-10 shrink-0" aria-hidden="true"></span><span class="iconify i-simple-icons:facebook size-10 shrink-0" aria-hidden="true"></span></div>
+  <div class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"><span class="iconify i-simple-icons:github size-10 shrink-0" aria-hidden="true"></span><span class="iconify i-simple-icons:discord size-10 shrink-0" aria-hidden="true"></span><span class="iconify i-simple-icons:x size-10 shrink-0" aria-hidden="true"></span><span class="iconify i-simple-icons:instagram size-10 shrink-0" aria-hidden="true"></span><span class="iconify i-simple-icons:linkedin size-10 shrink-0" aria-hidden="true"></span><span class="iconify i-simple-icons:facebook size-10 shrink-0" aria-hidden="true"></span></div>
+  <div class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"><span class="iconify i-simple-icons:github size-10 shrink-0" aria-hidden="true"></span><span class="iconify i-simple-icons:discord size-10 shrink-0" aria-hidden="true"></span><span class="iconify i-simple-icons:x size-10 shrink-0" aria-hidden="true"></span><span class="iconify i-simple-icons:instagram size-10 shrink-0" aria-hidden="true"></span><span class="iconify i-simple-icons:linkedin size-10 shrink-0" aria-hidden="true"></span><span class="iconify i-simple-icons:facebook size-10 shrink-0" aria-hidden="true"></span></div>
+  <div class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"><span class="iconify i-simple-icons:github size-10 shrink-0" aria-hidden="true"></span><span class="iconify i-simple-icons:discord size-10 shrink-0" aria-hidden="true"></span><span class="iconify i-simple-icons:x size-10 shrink-0" aria-hidden="true"></span><span class="iconify i-simple-icons:instagram size-10 shrink-0" aria-hidden="true"></span><span class="iconify i-simple-icons:linkedin size-10 shrink-0" aria-hidden="true"></span><span class="iconify i-simple-icons:facebook size-10 shrink-0" aria-hidden="true"></span></div>
+</div>
+<!--teleport start-->
+<!--teleport end-->"
+`;
+
+exports[`Nuxt UI > UModalExample > snapshot 1`] = `
+"<button type="button" aria-haspopup="dialog" aria-expanded="false" data-state="closed" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted">
+  <!--v-if--><span class="truncate">Open Modal</span>
+  <!--v-if-->
+</button>
+<!--teleport start-->
+<!--teleport end-->
+<!--teleport start-->
+<!--teleport end-->"
+`;
+
+exports[`Nuxt UI > UNavigationMenuExample > snapshot 1`] = `
+"<nav data-collapsed="false" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
+  <div class="absolute top-full left-0 flex w-full justify-center">
+    <!--v-if-->
+    <!---->
+  </div>
+</nav>
+<!--teleport start-->
+<!--teleport end-->"
+`;
+
+exports[`Nuxt UI > UPaginationExample > snapshot 1`] = `
+"<nav>
+  <div class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true"></span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" disabled="" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true"></span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5" value="1">
+      <!--v-if--><span class="truncate min-w-5 text-center">1</span>
+      <!--v-if-->
+    </button><button type="button" disabled="" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" disabled="" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true"></span>
+      <!--v-if-->
+      <!--v-if-->
+    </button></div>
+</nav>
+<!--teleport start-->
+<!--teleport end-->"
+`;
+
+exports[`Nuxt UI > UPinInputExample > snapshot 1`] = `
+"<div class="relative inline-flex items-center gap-1.5" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 1 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 2 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 3 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 4 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" aria-label="pin input 5 of 5" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><!-- We render single input if it's required --><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" name="" value=""></div>
+<!--teleport start-->
+<!--teleport end-->"
+`;
+
+exports[`Nuxt UI > UPopoverExample > snapshot 1`] = `
+"<button type="button" id="reka-popover-trigger-v-0-0-0" aria-haspopup="dialog" aria-expanded="false" aria-controls="" data-state="closed" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted">
+  <!--v-if--><span class="truncate">Open Popover</span>
+  <!--v-if-->
+</button>
+<!--v-if-->
+<!--teleport start-->
+<!--teleport end-->
+<!--teleport start-->
+<!--teleport end-->"
+`;
+
+exports[`Nuxt UI > UPricingPlanExample > snapshot 1`] = `
+"<div data-orientation="vertical" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default">
+  <!--v-if-->
+  <div class="flex flex-col min-w-0">
+    <div class="flex items-center gap-3">
+      <!--v-if-->
+      <!--v-if-->
+    </div>
+    <!--v-if-->
+    <!--v-if-->
+    <!--v-if-->
+  </div>
+  <!--v-if-->
+</div>
+<!--teleport start-->
+<!--teleport end-->"
+`;
+
+exports[`Nuxt UI > UPricingTableExample > snapshot 1`] = `
+"<div class="w-full relative">
+  <table class="w-full table-fixed border-separate border-spacing-x-0 hidden md:table">
+    <!--v-if-->
+    <thead class="">
+      <tr class="">
+        <td></td>
+      </tr>
+    </thead>
+    <tbody class=""></tbody>
+  </table>
+  <ul class="md:hidden flex flex-col gap-6 w-full"></ul>
+</div>
+<!--teleport start-->
+<!--teleport end-->"
+`;
+
+exports[`Nuxt UI > UProgressExample > snapshot 1`] = `
+"<div data-orientation="horizontal" class="gap-2 flex flex-col w-60">
+  <!--v-if-->
+  <div aria-valuemax="100" aria-valuemin="0" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-2" style="transform: translateZ(0);">
+    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
+  </div>
+  <!--v-if-->
+</div>
+<!--teleport start-->
+<!--teleport end-->"
+`;
+
+exports[`Nuxt UI > URadioGroupExample > snapshot 1`] = `
+"<div id="v-0-0-0" class="relative" tabindex="-1" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="radiogroup" aria-orientation="vertical" aria-required="false">
+  <fieldset class="flex gap-x-2 flex-col gap-y-1">
+    <!--v-if-->
+  </fieldset>
+  <!--v-if-->
+</div>
+<!--teleport start-->
+<!--teleport end-->"
+`;
+
+exports[`Nuxt UI > USelectExample > snapshot 1`] = `
+"<button class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus:ring-2 focus:ring-inset focus:ring-primary pe-9" role="combobox" type="button" aria-controls="reka-select-content-v-0-0-0" aria-expanded="false" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="closed" data-placeholder="">
+  <!--v-if--><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true"></span></span>
+</button>
+<!--teleport start-->
+<!--teleport end-->
+<!--v-if-->
+<!--teleport start-->
+<!--teleport end-->"
+`;
+
+exports[`Nuxt UI > USelectMenuExample > snapshot 1`] = `
+"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" dir="ltr" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9 w-48">
+  <!--v-if--><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true"></span></span>
+</button>
+<!--teleport start-->
+<!--teleport end-->
+<!--v-if-->
+<!--teleport start-->
+<!--teleport end-->"
+`;
+
+exports[`Nuxt UI > USeparatorExample > snapshot 1`] = `
+"<div data-orientation="horizontal" role="separator" class="flex items-center align-center text-center flex-row w-60">
+  <div class="border-default w-full border-solid border-t"></div>
+  <!--v-if-->
+</div>
+<!--teleport start-->
+<!--teleport end-->"
+`;
+
+exports[`Nuxt UI > USkeletonExample > snapshot 1`] = `
+"<div aria-busy="true" aria-label="loading" aria-live="polite" role="alert" class="animate-pulse rounded-md bg-elevated h-32 w-96"></div>
+<!--teleport start-->
+<!--teleport end-->"
+`;
+
+exports[`Nuxt UI > USlideoverExample > snapshot 1`] = `
+"<button type="button" aria-haspopup="dialog" aria-expanded="false" data-state="closed" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted">
+  <!--v-if--><span class="truncate">Open Slideover</span>
+  <!--v-if-->
+</button>
+<!--teleport start-->
+<!--teleport end-->
+<!--teleport start-->
+<!--teleport end-->"
+`;
+
+exports[`Nuxt UI > USliderExample > snapshot 1`] = `
+"<span data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--reka-slider-thumb-transform: translateX(-50%);" class="relative flex items-center select-none touch-none w-full min-w-56" aria-disabled="false"><span data-orientation="horizontal" class="relative bg-accented overflow-hidden rounded-full grow h-[8px]"><span data-orientation="horizontal" style="left: 0%; right: 100%;" class="absolute rounded-full bg-primary h-full"></span></span><span data-reka-collection-item="" class="rounded-full bg-default ring-2 focus-visible:outline-2 focus-visible:outline-offset-2 ring-primary focus-visible:outline-primary/50 size-4" role="slider" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; left: calc(0% + 0px);" aria-valuenow="0"></span>
+<!--v-if--></span>
+<!--teleport start-->
+<!--teleport end-->"
+`;
+
+exports[`Nuxt UI > UStepperExample > snapshot 1`] = `
+"<div role="group" aria-label="progress" data-linear="" data-orientation="horizontal" class="flex gap-4 flex-col">
+  <div class="flex">
+    <div aria-current="true" data-state="active" data-orientation="horizontal" class="group text-center relative w-full">
+      <div class="relative flex justify-center"><button type="button" data-state="active" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-0-0-1" aria-labelledby="reka-stepper-item-title-v-0-0-0" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
+          <div class="flex items-center justify-center size-full"><span class="iconify i-lucide:house shrink-0 size-5" aria-hidden="true"></span></div>
+        </button>
+        <div data-orientation="horizontal" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-accented top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-primary start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
+      </div>
+      <div class="mt-2.5">
+        <div id="reka-stepper-item-title-v-0-0-0" class="font-medium text-default text-sm">Address</div>
+        <div id="reka-stepper-item-description-v-0-0-1" class="text-muted text-wrap text-sm">Add your address here</div>
+      </div>
+    </div>
+    <div data-state="inactive" data-orientation="horizontal" class="group text-center relative w-full">
+      <div class="relative flex justify-center"><button type="button" data-state="inactive" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-0-0-3" aria-labelledby="reka-stepper-item-title-v-0-0-2" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
+          <div class="flex items-center justify-center size-full"><span class="iconify i-lucide:truck shrink-0 size-5" aria-hidden="true"></span></div>
+        </button>
+        <div data-orientation="horizontal" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-accented top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-primary start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
+      </div>
+      <div class="mt-2.5">
+        <div id="reka-stepper-item-title-v-0-0-2" class="font-medium text-default text-sm">Shipping</div>
+        <div id="reka-stepper-item-description-v-0-0-3" class="text-muted text-wrap text-sm">Set your preferred shipping method</div>
+      </div>
+    </div>
+    <div data-state="inactive" disabled="" data-disabled="" data-orientation="horizontal" class="group text-center relative w-full">
+      <div class="relative flex justify-center"><button type="button" data-state="inactive" disabled="" data-disabled="" data-orientation="horizontal" tabindex="-1" aria-describedby="reka-stepper-item-description-v-0-0-5" aria-labelledby="reka-stepper-item-title-v-0-0-4" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
+          <div class="flex items-center justify-center size-full">3</div>
+        </button>
+        <!--v-if-->
+      </div>
+      <div class="mt-2.5">
+        <div id="reka-stepper-item-title-v-0-0-4" class="font-medium text-default text-sm">Checkout</div>
+        <div id="reka-stepper-item-description-v-0-0-5" class="text-muted text-wrap text-sm">Confirm your order</div>
+      </div>
+    </div>
+  </div>
+  <div class="size-full"></div>
+  <div aria-live="polite" aria-atomic="true" role="status" style="transform: translateX(-100%); position: absolute; pointer-events: none; opacity: 0; margin: 0px;"> Step 0 of 3</div>
+</div>
+<!--teleport start-->
+<!--teleport end-->"
+`;
+
+exports[`Nuxt UI > USwitchExample > snapshot 1`] = `
+"<div class="relative flex items-start">
+  <div class="flex items-center h-5"><button class="inline-flex items-center shrink-0 rounded-full border-2 border-transparent focus-visible:outline-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-accented transition-[background] duration-200 data-[state=checked]:bg-primary focus-visible:outline-primary w-9" id="v-0-0-0" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="on"><span data-state="unchecked" class="group pointer-events-none rounded-full bg-default shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 flex items-center justify-center size-4 data-[state=checked]:translate-x-4 data-[state=checked]:rtl:-translate-x-4"></span>
+      <!--v-if-->
+    </button></div>
+  <!--v-if-->
+</div>
+<!--teleport start-->
+<!--teleport end-->"
+`;
+
+exports[`Nuxt UI > UTableExample > snapshot 1`] = `
+"<div class="relative overflow-auto flex-1">
+  <table class="min-w-full overflow-clip">
+    <!--v-if-->
+    <thead class="relative">
+      <tr class="data-[selected=true]:bg-elevated/50">
+        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Id</th>
+        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Date</th>
+        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Status</th>
+        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Email</th>
+        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Amount</th>
+      </tr>
+      <tr class="absolute z-[1] left-0 w-full h-px bg-(--ui-border-accented)"></tr>
+    </thead>
+    <tbody class="[&amp;>tr]:data-[selectable=true]:hover:bg-elevated/50 [&amp;>tr]:data-[selectable=true]:focus-visible:outline-primary divide-y divide-default">
+      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">4600</td>
+        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">2024-03-11T15:30:00</td>
+        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">paid</td>
+        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">james.anderson@example.com</td>
+        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">594</td>
+      </tr>
+      <!--v-if-->
+      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">4599</td>
+        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">2024-03-11T10:10:00</td>
+        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">failed</td>
+        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">mia.white@example.com</td>
+        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">276</td>
+      </tr>
+      <!--v-if-->
+      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">4598</td>
+        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">2024-03-11T08:50:00</td>
+        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">refunded</td>
+        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">william.brown@example.com</td>
+        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">315</td>
+      </tr>
+      <!--v-if-->
+      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">4597</td>
+        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">2024-03-10T19:45:00</td>
+        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">paid</td>
+        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">emma.davis@example.com</td>
+        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">529</td>
+      </tr>
+      <!--v-if-->
+      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">4596</td>
+        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">2024-03-10T15:55:00</td>
+        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">paid</td>
+        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">ethan.harris@example.com</td>
+        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">639</td>
+      </tr>
+      <!--v-if-->
+    </tbody>
+    <!--v-if-->
+  </table>
+</div>
+<!--teleport start-->
+<!--teleport end-->"
+`;
+
+exports[`Nuxt UI > UTabsExample > snapshot 1`] = `
+"<div dir="ltr" data-orientation="horizontal" class="flex items-center gap-2 flex-col">
+  <div class="relative flex p-1 group bg-elevated rounded-lg w-full" tabindex="-1" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="horizontal">
+    <!--v-if-->
+  </div>
+</div>
+<!--teleport start-->
+<!--teleport end-->"
+`;
+
+exports[`Nuxt UI > UTextareaExample > snapshot 1`] = `
+"<div class="relative inline-flex items-center"><textarea rows="3" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"></textarea>
+  <!--v-if-->
+  <!--v-if-->
+</div>
+<!--teleport start-->
+<!--teleport end-->"
+`;
+
+exports[`Nuxt UI > UTimelineExample > snapshot 1`] = `
+"<div data-orientation="vertical" class="flex gap-1.5 flex-col w-96"></div>
+<!--teleport start-->
+<!--teleport end-->"
+`;
+
+exports[`Nuxt UI > UToasterExample > snapshot 1`] = `
+"<button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted">
+  <!--v-if--><span class="truncate">Open Toast</span>
+  <!--v-if-->
+</button>
+<!--teleport start-->
+<!--teleport end-->"
+`;
+
+exports[`Nuxt UI > UTooltipExample > snapshot 1`] = `
+"<button type="button" data-state="closed" data-grace-area-trigger="" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 ring ring-inset ring-accented text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted">
+  <!--v-if--><span class="truncate">Show Tooltip</span>
+  <!--v-if-->
+</button>
+<!--teleport start-->
+<!--teleport end-->
+<!--teleport start-->
+<!--teleport end-->"
+`;
+
+exports[`Nuxt UI > UTreeExample > snapshot 1`] = `
+"<ul class="relative isolate" tabindex="-1" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tree"></ul>
+<!--teleport start-->
+<!--teleport end-->"
+`;
+
+exports[`Nuxt UI > UUserExample > snapshot 1`] = `
+"<div data-orientation="horizontal" class="relative group/user flex items-center gap-2">
+  <!--v-if-->
+  <div class="">
+    <!--v-if-->
+    <!--v-if-->
+    <!--v-if-->
+  </div>
+</div>
+<!--teleport start-->
+<!--teleport end-->"
+`;
diff --git a/playgrounds/nuxt/vitest.config.ts b/playgrounds/nuxt/vitest.config.ts
new file mode 100644
index 00000000..eec9586b
--- /dev/null
+++ b/playgrounds/nuxt/vitest.config.ts
@@ -0,0 +1,16 @@
+import { defineVitestProject } from '@nuxt/test-utils/config'
+import { defineConfig } from 'vitest/config'
+
+export default defineConfig({
+  test: {
+    projects: [
+      await defineVitestProject({
+        test: {
+          name: 'nuxt',
+          include: ['test/nuxt/*.{test,spec}.ts'],
+          environment: 'nuxt'
+        }
+      })
+    ]
+  }
+})
diff --git a/playgrounds/vue/package.json b/playgrounds/vue/package.json
index 51aafcd8..8c1e386d 100644
--- a/playgrounds/vue/package.json
+++ b/playgrounds/vue/package.json
@@ -12,14 +12,19 @@
   "dependencies": {
     "@compodium/vue": "workspace:^",
     "@nuxt/ui": "catalog:",
-    "vue": "catalog:"
+    "reka-ui": "^2.5.1",
+    "vue": "catalog:",
+    "vue-router": "^4.5.1"
   },
   "devDependencies": {
+    "@compodium/testing": "workspace:^",
     "@tsconfig/node22": "^22.0.2",
     "@types/node": "^22.18.12",
     "@vitejs/plugin-vue": "^6.0.1",
     "@vue/tsconfig": "^0.8.1",
+    "happy-dom": "^17.6.3",
     "vite": "^7.1.12",
+    "vitest": "^3.2.4",
     "vite-plugin-vue-devtools": "^8.0.3",
     "vue-tsc": "^2.2.2"
   }
diff --git a/playgrounds/vue/src/components/CompodiumWelcome.vue b/playgrounds/vue/src/components/CompodiumWelcome.vue
index b7237247..bf6631d3 100644
--- a/playgrounds/vue/src/components/CompodiumWelcome.vue
+++ b/playgrounds/vue/src/components/CompodiumWelcome.vue
@@ -11,6 +11,10 @@ extendCompodiumMeta<typeof _props>({
     bounceIt: true
   }
 })
+
+function goToCompodium() {
+  window.location.href = '/__compodium__/devtools'
+}
 </script>
 
 <template>
@@ -18,7 +22,7 @@ extendCompodiumMeta<typeof _props>({
     class="data-[spin=true]:animate-spin data-[bounce=true]:animate-bounce"
     :data-spin="spinIt"
     :data-bounce="bounceIt"
-    :class="{ shaker: shakeIt }"
+    :class="{ shake: shakeIt }"
   >
     <div
       class="border border-default p-4 rounded-lg w-sm"
@@ -32,17 +36,19 @@ extendCompodiumMeta<typeof _props>({
         color="neutral"
         icon="lucide:rocket"
         block
-        to="/__compodium__/devtools"
+        data-testid="go-to-compodium"
+        @click="goToCompodium()"
       >
         Go to Compodium
       </UButton>
-      <USeparator> or </USeparator>
+      <USeparator label="or" />
       <UButton
         variant="ghost"
         color="success"
         icon="devicon-plain:vuejs"
         block
         :disabled="true"
+        data-testid="open-devtools"
       >
         Open in Vue Devtools
       </UButton>
@@ -51,80 +57,16 @@ extendCompodiumMeta<typeof _props>({
 </template>
 
 <style scoped>
-/*!
- * Woah.css - http://joerezendes.com/woah.css
- * Version - 1.0
- * Licensed under the MIT license - http://opensource.org/licenses/MIT
- *
- * Github - https://github.com/joerez/Woah.css
- *
- * Copyright (c) 2018 Joe Rezendes
- */
-
-/**
- * shaker
- * - Increases and decreases in size
- */
-@keyframes shaker {
-  from {
-    transform: translate3d(0,0,0);
-  }
-
-  33% {
-    transform: translate3d(-20px,10px,0);
-  }
+.shake {
+  animation: shake 0.5s ease-in-out infinite
+}
 
-  66% {
-    transform: translate3d(20px,0px,0);
+@keyframes shake {
+  0%, 100%  {
+    transform: rotate(-3deg);
   }
-
-  to {
-    transform: translate3d(0,0,0);
+  50% {
+    transform: rotate(3deg);
   }
 }
-
-.shaker {
-  animation-timing-function: linear;
-  transform-origin: bottom center;
-  animation-name: shaker;
-  animation-duration: .1s;
-  animation-iteration-count: infinite;
-}
-
-/**
-  * flyOut
-  * - Flies out
-  */
-  @keyframes flyOut {
-
-    1% {
-      transform: translate3d(0,0,0) scale(1);
-    }
-
-    20% {
-      transform: translate3d(0,100px,400px) rotateX(90deg);
-    }
-    30% {
-      transform: translate3d(300px,0px,100px) rotateX(95deg);
-    }
-    40% {
-      transform: translate3d(-600px,-200px,0px) rotateX(80deg);
-    }
-    60% {
-      transform: translate3d(2000px,-2000px,0px) rotateX(0deg);
-    }
-    70% {
-      transform: translate3d(-2000px, 2000px, 0px) rotateX(60deg) scale(5);
-    }
-    80% {
-      transform: translate3d(0,4000px,0px);
-    }
-    85% {
-      transform: translate3d(-0px,-0px,0px) scale(.07);
-    }
-    100% {
-      transform: translate3d(2000px,-2000px,0px);
-      display: none;
-    }
-}
 </style>
diff --git a/playgrounds/vue/src/main.ts b/playgrounds/vue/src/main.ts
index 7531640d..317bba35 100644
--- a/playgrounds/vue/src/main.ts
+++ b/playgrounds/vue/src/main.ts
@@ -3,7 +3,6 @@ import ui from '@nuxt/ui/vue-plugin'
 
 import App from './App.vue'
 import './assets/main.css'
-
 import { createRouter, createWebHashHistory } from 'vue-router'
 
 const app = createApp(App)
diff --git a/playgrounds/vue/test/CompodiumWelcome.spec.ts b/playgrounds/vue/test/CompodiumWelcome.spec.ts
new file mode 100644
index 00000000..c88f01a8
--- /dev/null
+++ b/playgrounds/vue/test/CompodiumWelcome.spec.ts
@@ -0,0 +1,49 @@
+import { expect, it } from 'vitest'
+import { describeComponent } from '@compodium/testing/unit'
+import { mount } from '@vue/test-utils'
+
+describeComponent('CompodiumWelcome', ({ component, props }) => {
+  it('includes default props', () => {
+    expect(props?.bounceIt).toEqual(true)
+  })
+
+  it('works', () => {
+    const wrapper = mount(component, { props })
+    const instance = wrapper.findComponent({ name: 'CompodiumWelcome' })
+    expect(instance.exists()).toBe(true)
+  })
+
+  it('snapshot', () => {
+    const wrapper = mount(component, { props })
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+
+  it('long test', async () => {
+    await new Promise(res => setTimeout(res, 2000))
+    expect(1).toBe(2)
+  })
+})
+
+describeComponent('CompodiumWelcomeExampleWithShake', ({ component, props }) => {
+  it('includes default props', () => {
+    expect(props?.shakeIt).toEqual(true)
+  })
+
+  it('works', () => {
+    const wrapper = mount(component, { props })
+    const instance = wrapper.findComponent({ name: 'CompodiumWelcome' })
+    expect(instance.exists()).toBe(true)
+  })
+})
+
+describeComponent('CompodiumWelcomeExampleWithSpin', ({ component, props }) => {
+  it('includes default props', () => {
+    expect(props?.spinIt).toEqual(true)
+  })
+
+  it('works', () => {
+    const wrapper = mount(component, { props })
+    const instance = wrapper.findComponent({ name: 'CompodiumWelcome' })
+    expect(instance.exists()).toBe(true)
+  })
+})
diff --git a/playgrounds/vue/test/Snapshots.spec.ts b/playgrounds/vue/test/Snapshots.spec.ts
new file mode 100644
index 00000000..0068e4b0
--- /dev/null
+++ b/playgrounds/vue/test/Snapshots.spec.ts
@@ -0,0 +1,10 @@
+import { it, expect } from 'vitest'
+import { describeComponents } from '@compodium/testing/unit'
+import { mount } from '@vue/test-utils'
+
+describeComponents(({ component, props }) => {
+  it('snapshot', () => {
+    const wrapper = mount(component, { props })
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+})
diff --git a/playgrounds/vue/test/SupportedProps.spec.ts b/playgrounds/vue/test/SupportedProps.spec.ts
new file mode 100644
index 00000000..66a9669f
--- /dev/null
+++ b/playgrounds/vue/test/SupportedProps.spec.ts
@@ -0,0 +1,8 @@
+import { expect, it } from 'vitest'
+import { describeComponent } from '@compodium/testing/unit'
+
+describeComponent('SupportedProps', ({ props }) => {
+  it('includes default props', () => {
+    expect(props?.string).toEqual('hello')
+  })
+})
diff --git a/playgrounds/vue/test/__snapshots__/CompodiumWelcome.spec.ts.snap b/playgrounds/vue/test/__snapshots__/CompodiumWelcome.spec.ts.snap
new file mode 100644
index 00000000..ca152898
--- /dev/null
+++ b/playgrounds/vue/test/__snapshots__/CompodiumWelcome.spec.ts.snap
@@ -0,0 +1,18 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Components > CompodiumWelcomeExample > snapshot 1`] = `
+"<div data-v-b59470c5="" class="data-[spin=true]:animate-spin data-[bounce=true]:animate-bounce" data-spin="false" data-bounce="true">
+  <div data-v-b59470c5="" class="border border-default p-4 rounded-lg w-sm">
+    <p data-v-b59470c5="" class="text-center font-bold mb-4">Welcome!</p><button type="button" data-testid="go-to-compodium" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg> Go to Compodium
+      <!--v-if-->
+    </button>
+    <div data-v-b59470c5="" data-orientation="horizontal" role="separator" class="flex items-center align-center text-center w-full flex-row">
+      <div class="border-default w-full border-solid border-t"></div>
+      <div class="font-medium text-default flex mx-3 whitespace-nowrap"><span class="text-sm">or</span></div>
+      <div class="border-default w-full border-solid border-t"></div>
+    </div><button type="button" disabled="" data-testid="open-devtools" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-success hover:bg-success/10 active:bg-success/10 focus:outline-none focus-visible:bg-success/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg> Open in Vue Devtools
+      <!--v-if-->
+    </button>
+  </div>
+</div>"
+`;
diff --git a/playgrounds/vue/test/__snapshots__/Snapshots.spec.ts.snap b/playgrounds/vue/test/__snapshots__/Snapshots.spec.ts.snap
new file mode 100644
index 00000000..0cd1a2b1
--- /dev/null
+++ b/playgrounds/vue/test/__snapshots__/Snapshots.spec.ts.snap
@@ -0,0 +1,1076 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Components > CompodiumWelcomeExample > snapshot 1`] = `
+"<div data-v-b59470c5="" class="data-[spin=true]:animate-spin data-[bounce=true]:animate-bounce" data-spin="false" data-bounce="true">
+  <div data-v-b59470c5="" class="border border-default p-4 rounded-lg w-sm">
+    <p data-v-b59470c5="" class="text-center font-bold mb-4">Welcome!</p><button type="button" data-testid="go-to-compodium" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg> Go to Compodium
+      <!--v-if-->
+    </button>
+    <div data-v-b59470c5="" data-orientation="horizontal" role="separator" class="flex items-center align-center text-center w-full flex-row">
+      <div class="border-default w-full border-solid border-t"></div>
+      <div class="font-medium text-default flex mx-3 whitespace-nowrap"><span class="text-sm">or</span></div>
+      <div class="border-default w-full border-solid border-t"></div>
+    </div><button type="button" disabled="" data-testid="open-devtools" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center text-success hover:bg-success/10 active:bg-success/10 focus:outline-none focus-visible:bg-success/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg> Open in Vue Devtools
+      <!--v-if-->
+    </button>
+  </div>
+</div>"
+`;
+
+exports[`Components > SupportedProps > snapshot 1`] = `"<p>Supported prop types</p>"`;
+
+exports[`Nuxt UI > UAccordionExample > snapshot 1`] = `
+"<div class="w-96"></div>
+<!--v-if-->"
+`;
+
+exports[`Nuxt UI > UAlertExample > snapshot 1`] = `
+"<div data-orientation="vertical" class="relative overflow-hidden rounded-lg p-4 flex gap-2.5 items-start bg-primary text-inverted w-60">
+  <!--v-if-->
+  <div class="min-w-0 flex-1 flex flex-col">
+    <!--v-if-->
+    <!--v-if-->
+    <!--v-if-->
+  </div>
+  <!--v-if-->
+</div>
+<!--v-if-->"
+`;
+
+exports[`Nuxt UI > UAuthFormExample > snapshot 1`] = `
+"<div class="w-full space-y-6 max-w-md">
+  <!--v-if-->
+  <div class="gap-y-6 flex flex-col">
+    <!--v-if-->
+    <!--v-if-->
+    <!--v-if-->
+  </div>
+  <!--v-if-->
+</div>
+<!--v-if-->"
+`;
+
+exports[`Nuxt UI > UAvatarExample > snapshot 1`] = `
+"<span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base"><span class="font-medium leading-none text-muted truncate">&nbsp;</span></span>
+<!--v-if-->"
+`;
+
+exports[`Nuxt UI > UAvatarGroupExample > snapshot 1`] = `
+"<div class="inline-flex flex-row-reverse justify-end">
+  <!--v-if--><span class="inline-flex items-center justify-center shrink-0 select-none align-middle bg-elevated size-8 text-base relative rounded-full ring-bg first:me-0 ring-2 -me-1.5"><img src="https://github.com/noook.png" alt="Neil Richter" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span><span class="inline-flex items-center justify-center shrink-0 select-none align-middle bg-elevated size-8 text-base relative rounded-full ring-bg first:me-0 ring-2 -me-1.5"><img src="https://github.com/romhml.png" alt="Romain Hamel" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span><span class="inline-flex items-center justify-center shrink-0 select-none align-middle bg-elevated size-8 text-base relative rounded-full ring-bg first:me-0 ring-2 -me-1.5"><img src="https://github.com/benjamincanac.png" alt="Benjamin Canac" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
+</div>
+<!--v-if-->"
+`;
+
+exports[`Nuxt UI > UBadgeExample > snapshot 1`] = `
+"<span class="font-medium inline-flex items-center text-xs gap-1 rounded-md bg-primary text-inverted p-1"><!--v-if--><!--v-if--><!--v-if--></span>
+<!--v-if-->"
+`;
+
+exports[`Nuxt UI > UBlogPostExample > snapshot 1`] = `
+"<article data-orientation="vertical" class="relative group/blog-post rounded-lg overflow-hidden flex flex-col bg-default ring ring-default">
+  <!--v-if-->
+  <div class="min-w-0 flex-1 flex flex-col p-4 sm:p-6">
+    <!--v-if-->
+    <!--v-if-->
+    <!--v-if-->
+    <!--v-if-->
+    <!--v-if-->
+  </div>
+  <!--v-if-->
+</article>
+<!--v-if-->"
+`;
+
+exports[`Nuxt UI > UBlogPostsExample > snapshot 1`] = `
+"<div data-orientation="horizontal" class="flex flex-col gap-8 lg:gap-y-16 sm:grid sm:grid-cols-2 lg:grid-cols-3"></div>
+<!--v-if-->"
+`;
+
+exports[`Nuxt UI > UBreadcrumbExample > snapshot 1`] = `
+"<nav aria-label="breadcrumb" class="relative min-w-0">
+  <ol class="flex items-center gap-1.5"></ol>
+</nav>
+<!--v-if-->"
+`;
+
+exports[`Nuxt UI > UButtonExample > snapshot 1`] = `
+"<button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5"></button>
+<!--v-if-->"
+`;
+
+exports[`Nuxt UI > UCalendarExample > snapshot 1`] = `
+"<div role="application" aria-label="Event Date, October 2025" dir="ltr">
+  <div class="flex items-center justify-between"><button type="button" aria-label="Previous year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Previous month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+      <!--v-if-->
+      <!--v-if-->
+    </button>
+    <div class="text-center font-medium truncate mx-auto text-sm">October 2025</div><button type="button" aria-label="Next month" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Next year" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+      <!--v-if-->
+      <!--v-if-->
+    </button>
+  </div>
+  <div class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
+    <table tabindex="-1" role="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
+      <thead aria-hidden="true">
+        <tr class="mb-1 grid w-full grid-cols-7">
+          <th class="rounded-md text-primary text-xs">S</th>
+          <th class="rounded-md text-primary text-xs">M</th>
+          <th class="rounded-md text-primary text-xs">T</th>
+          <th class="rounded-md text-primary text-xs">W</th>
+          <th class="rounded-md text-primary text-xs">T</th>
+          <th class="rounded-md text-primary text-xs">F</th>
+          <th class="rounded-md text-primary text-xs">S</th>
+        </tr>
+      </thead>
+      <tbody class="grid">
+        <tr class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-09-28" month="2025-10-11" role="button" aria-label="Sunday, September 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-09-28" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">28</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-09-29" month="2025-10-11" role="button" aria-label="Monday, September 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-09-29" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">29</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-09-30" month="2025-10-11" role="button" aria-label="Tuesday, September 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-09-30" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">30</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-10-01" month="2025-10-11" role="button" aria-label="Wednesday, October 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-10-01" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">1</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-10-02" month="2025-10-11" role="button" aria-label="Thursday, October 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-10-02" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">2</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-10-03" month="2025-10-11" role="button" aria-label="Friday, October 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-10-03" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">3</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-10-04" month="2025-10-11" role="button" aria-label="Saturday, October 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-10-04" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">4</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-10-05" month="2025-10-11" role="button" aria-label="Sunday, October 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-10-05" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">5</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-10-06" month="2025-10-11" role="button" aria-label="Monday, October 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-10-06" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">6</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-10-07" month="2025-10-11" role="button" aria-label="Tuesday, October 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-10-07" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">7</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-10-08" month="2025-10-11" role="button" aria-label="Wednesday, October 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-10-08" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">8</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-10-09" month="2025-10-11" role="button" aria-label="Thursday, October 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-10-09" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">9</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-10-10" month="2025-10-11" role="button" aria-label="Friday, October 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-10-10" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">10</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-10-11" month="2025-10-11" role="button" aria-label="Saturday, October 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-10-11" data-today="" data-focused="" tabindex="0" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">11</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-10-12" month="2025-10-11" role="button" aria-label="Sunday, October 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-10-12" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">12</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-10-13" month="2025-10-11" role="button" aria-label="Monday, October 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-10-13" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">13</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-10-14" month="2025-10-11" role="button" aria-label="Tuesday, October 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-10-14" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">14</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-10-15" month="2025-10-11" role="button" aria-label="Wednesday, October 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-10-15" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">15</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-10-16" month="2025-10-11" role="button" aria-label="Thursday, October 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-10-16" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">16</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-10-17" month="2025-10-11" role="button" aria-label="Friday, October 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-10-17" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">17</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-10-18" month="2025-10-11" role="button" aria-label="Saturday, October 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-10-18" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">18</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-10-19" month="2025-10-11" role="button" aria-label="Sunday, October 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-10-19" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">19</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-10-20" month="2025-10-11" role="button" aria-label="Monday, October 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-10-20" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">20</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-10-21" month="2025-10-11" role="button" aria-label="Tuesday, October 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-10-21" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">21</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-10-22" month="2025-10-11" role="button" aria-label="Wednesday, October 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-10-22" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">22</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-10-23" month="2025-10-11" role="button" aria-label="Thursday, October 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-10-23" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">23</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-10-24" month="2025-10-11" role="button" aria-label="Friday, October 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-10-24" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">24</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-10-25" month="2025-10-11" role="button" aria-label="Saturday, October 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-10-25" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">25</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-10-26" month="2025-10-11" role="button" aria-label="Sunday, October 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-10-26" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">26</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-10-27" month="2025-10-11" role="button" aria-label="Monday, October 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-10-27" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">27</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-10-28" month="2025-10-11" role="button" aria-label="Tuesday, October 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-10-28" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">28</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-10-29" month="2025-10-11" role="button" aria-label="Wednesday, October 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-10-29" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">29</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-10-30" month="2025-10-11" role="button" aria-label="Thursday, October 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-10-30" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">30</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-10-31" month="2025-10-11" role="button" aria-label="Friday, October 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-10-31" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">31</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-11-01" month="2025-10-11" role="button" aria-label="Saturday, November 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-11-01" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">1</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7 place-items-center">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-11-02" month="2025-10-11" role="button" aria-label="Sunday, November 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-11-02" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">2</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-11-03" month="2025-10-11" role="button" aria-label="Monday, November 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-11-03" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">3</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-11-04" month="2025-10-11" role="button" aria-label="Tuesday, November 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-11-04" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">4</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-11-05" month="2025-10-11" role="button" aria-label="Wednesday, November 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-11-05" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">5</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-11-06" month="2025-10-11" role="button" aria-label="Thursday, November 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-11-06" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">6</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-11-07" month="2025-10-11" role="button" aria-label="Friday, November 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-11-07" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">7</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-11-08" month="2025-10-11" role="button" aria-label="Saturday, November 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-11-08" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">8</div>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+  <div style="border: 0px; clip: rect(0px, 0px, 0px, 0px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; white-space: nowrap; width: 1px;">
+    <div role="heading" aria-level="2">Event Date, October 2025</div>
+  </div>
+</div>
+<!--v-if-->"
+`;
+
+exports[`Nuxt UI > UCardExample > snapshot 1`] = `
+"<div class="rounded-lg overflow-hidden bg-default ring ring-default divide-y divide-default w-96">
+  <!--v-if-->
+  <div class="p-4 sm:p-6">
+    <div class="placeholder h-32"></div>
+  </div>
+  <!--v-if-->
+</div>
+<!--v-if-->"
+`;
+
+exports[`Nuxt UI > UCarouselExample > snapshot 1`] = `
+"<div role="region" aria-roledescription="carousel" data-orientation="horizontal" tabindex="0" class="relative focus:outline-none w-xs h-xs">
+  <div class="overflow-hidden">
+    <div class="flex items-start flex-row -ms-4" style="transform: translate3d(NaNpx,0px,0px);">
+      <div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/id/240/320/320" class="rounded-lg"></div>
+      <div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/id/241/320/320" class="rounded-lg"></div>
+      <div role="group" aria-roledescription="slide" class="min-w-0 shrink-0 basis-full ps-4"><img src="https://picsum.photos/id/242/320/320" class="rounded-lg"></div>
+    </div>
+  </div>
+  <!--v-if-->
+</div>
+<!--v-if-->"
+`;
+
+exports[`Nuxt UI > UChangelogVersionExample > snapshot 1`] = `
+"<article class="relative">
+  <div class="absolute start-0 top-0 w-32 hidden lg:flex items-center justify-end gap-3 min-w-0">
+    <!--v-if-->
+    <div class="size-4 rounded-full bg-default ring ring-default flex items-center justify-center my-1">
+      <div class="size-2 rounded-full bg-primary"></div>
+    </div>
+  </div>
+  <div class="flex flex-col mx-auto max-w-2xl">
+    <!--v-if-->
+    <!--v-if-->
+  </div>
+</article>
+<!--v-if-->"
+`;
+
+exports[`Nuxt UI > UChangelogVersionsExample > snapshot 1`] = `
+"<div class="relative min-w-5xl">
+  <div class="absolute hidden lg:block overflow-hidden inset-y-3 start-32 h-full w-px bg-border -ms-[8.5px]">
+    <div class="absolute start-0 top-0 w-full bg-primary will-change-[height]" style="height: 0%;"></div>
+  </div>
+  <div class="flex flex-col gap-y-8 sm:gap-y-12 lg:gap-y-16">
+    <!---->
+    <!---->
+    <article class="relative">
+      <div class="absolute start-0 top-0 w-32 hidden lg:flex items-center justify-end gap-3 min-w-0"><time datetime="2024-03-15T00:00:00.000Z" class="text-sm/6 text-toned truncate">Mar 15, 2024</time>
+        <div class="size-4 rounded-full bg-default ring ring-default flex items-center justify-center my-1">
+          <div class="size-2 rounded-full bg-primary"></div>
+        </div>
+      </div>
+      <div class="flex flex-col mx-auto max-w-2xl">
+        <div class="">
+          <div class="flex items-center gap-3 mb-2"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md text-inverted bg-inverted"><!--v-if--><span class="truncate">Release</span>
+            <!--v-if--></span><time datetime="2024-03-15T00:00:00.000Z" class="text-sm/6 text-toned truncate lg:hidden">Mar 15, 2024</time>
+          </div>
+          <h2 class="relative text-xl text-pretty font-semibold text-highlighted">
+            <!--v-if-->Version 1.2.0
+          </h2>
+          <div class="text-base text-pretty text-muted mt-1">Added new features and bug fixes.</div>
+          <!--v-if-->
+        </div>
+        <!--v-if-->
+      </div>
+    </article>
+    <!---->
+    <!---->
+    <article class="relative">
+      <div class="absolute start-0 top-0 w-32 hidden lg:flex items-center justify-end gap-3 min-w-0"><time datetime="2024-02-20T00:00:00.000Z" class="text-sm/6 text-toned truncate">Feb 20, 2024</time>
+        <div class="size-4 rounded-full bg-default ring ring-default flex items-center justify-center my-1">
+          <div class="size-2 rounded-full bg-primary"></div>
+        </div>
+      </div>
+      <div class="flex flex-col mx-auto max-w-2xl">
+        <div class="">
+          <div class="flex items-center gap-3 mb-2"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md text-inverted bg-inverted"><!--v-if--><span class="truncate">Update</span>
+            <!--v-if--></span><time datetime="2024-02-20T00:00:00.000Z" class="text-sm/6 text-toned truncate lg:hidden">Feb 20, 2024</time>
+          </div>
+          <h2 class="relative text-xl text-pretty font-semibold text-highlighted">
+            <!--v-if-->Version 1.1.0
+          </h2>
+          <div class="text-base text-pretty text-muted mt-1">Performance improvements and optimizations.</div>
+          <!--v-if-->
+        </div>
+        <!--v-if-->
+      </div>
+    </article>
+  </div>
+</div>
+<!--v-if-->"
+`;
+
+exports[`Nuxt UI > UChatMessagesExample > snapshot 1`] = `
+"<div class="w-full flex flex-col gap-1 flex-1 px-2.5 [&amp;>article]:last-of-type:min-h-(--last-message-height) max-h-96 overflow-y-auto" style="--last-message-height: 0px;">
+  <!--v-if-->
+  <!---->
+</div>
+<!--v-if-->"
+`;
+
+exports[`Nuxt UI > UChatPaletteExample > snapshot 1`] = `
+"<div class="relative flex-1 flex flex-col min-h-0 min-w-0">
+  <div class="overflow-y-auto flex-1 flex flex-col py-3">
+    <div class="w-full flex flex-col gap-1 flex-1 px-2.5 [&amp;>article]:last-of-type:min-h-(--last-message-height)" style="--last-message-height: 0px;">
+      <article data-role="assistant" class="group/message relative w-full scroll-mt-3">
+        <div class="relative flex items-start group-data-[role=user]/message:max-w-[75%] rtl:justify-end gap-1.5 pb-3">
+          <!--v-if-->
+          <div class="relative text-pretty min-w-0">Hello! How can I help you today?</div>
+          <!--v-if-->
+        </div>
+      </article>
+      <article data-role="user" class="group/message relative w-full scroll-mt-3">
+        <div class="relative flex items-start group-data-[role=user]/message:max-w-[75%] ltr:justify-end ms-auto gap-1.5 pb-3">
+          <!--v-if-->
+          <div class="relative text-pretty min-w-0 bg-elevated/50 px-2 py-1 rounded-lg min-h-8">I need help with my project setup.</div>
+          <!--v-if-->
+        </div>
+      </article>
+      <article data-role="assistant" class="group/message relative w-full scroll-mt-3">
+        <div class="relative flex items-start group-data-[role=user]/message:max-w-[75%] rtl:justify-end gap-1.5 pb-3">
+          <!--v-if-->
+          <div class="relative text-pretty min-w-0">I'd be happy to help! What kind of project are you working on?</div>
+          <!--v-if-->
+        </div>
+      </article>
+      <!--v-if-->
+      <!---->
+    </div>
+  </div>
+  <form class="relative flex flex-col items-stretch gap-2 py-2 w-full rounded-lg backdrop-blur bg-default/75 ring ring-default px-0 rounded-t-none border-t border-default">
+    <!--v-if-->
+    <div class="relative inline-flex items-start"><textarea rows="1" placeholder="Type your message here…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 gap-1.5 text-highlighted bg-transparent resize-none text-base/5" value=""></textarea>
+      <!--v-if-->
+      <!--v-if-->
+    </div>
+    <!--v-if-->
+  </form>
+</div>
+<!--v-if-->"
+`;
+
+exports[`Nuxt UI > UChatPromptExample > snapshot 1`] = `
+"<form class="relative flex flex-col items-stretch gap-2 px-2.5 py-2 rounded-lg backdrop-blur bg-default/75 ring ring-default w-full">
+  <!--v-if-->
+  <div class="relative inline-flex items-start"><textarea rows="1" placeholder="Type your message here…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 gap-1.5 text-highlighted bg-transparent resize-none text-base/5" value=""></textarea>
+    <!--v-if-->
+    <!--v-if-->
+  </div>
+  <!--v-if-->
+</form>
+<!--v-if-->"
+`;
+
+exports[`Nuxt UI > UChatPromptSubmitExample > snapshot 1`] = `
+"<button type="submit" aria-label="Send prompt" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5 rounded-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+  <!--v-if-->
+  <!--v-if-->
+</button>
+<!--v-if-->"
+`;
+
+exports[`Nuxt UI > UCheckboxExample > snapshot 1`] = `
+"<div class="relative flex items-start flex-row">
+  <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
+      <!---->
+      <!--v-if-->
+    </button></div>
+  <!--v-if-->
+</div>
+<!--v-if-->"
+`;
+
+exports[`Nuxt UI > UCheckboxGroupExample > snapshot 1`] = `
+"<div id="v-0" class="relative" tabindex="-1" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;">
+  <fieldset class="flex gap-x-2 flex-col gap-y-1">
+    <!--v-if-->
+  </fieldset>
+  <!--v-if-->
+</div>
+<!--v-if-->"
+`;
+
+exports[`Nuxt UI > UChipExample > snapshot 1`] = `
+"<div class="relative inline-flex items-center justify-center shrink-0"><span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base"><img src="https://avatars.githubusercontent.com/u/739984?v=4" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span><span class="rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap bg-primary h-[8px] min-w-[8px] text-[8px] top-0 right-0 absolute -translate-y-1/2 translate-x-1/2 transform"></span></div>
+<!--v-if-->"
+`;
+
+exports[`Nuxt UI > UCollapsibleExample > snapshot 1`] = `
+"<div data-state="closed" class="w-48"><button type="button" aria-controls="" aria-expanded="false" data-state="closed" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 w-full justify-center ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted">
+    <!--v-if--><span class="truncate">Open Collapse</span>
+    <!--v-if-->
+  </button>
+  <div class="data-[state=open]:animate-[collapsible-down_200ms_ease-out] data-[state=closed]:animate-[collapsible-up_200ms_ease-out] overflow-hidden" id="reka-collapsible-content-v-0" hidden="" data-state="closed" style="--reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;">
+    <!--v-if-->
+  </div>
+</div>
+<!--v-if-->"
+`;
+
+exports[`Nuxt UI > UColorModeAvatarExample > snapshot 1`] = `
+"<span class="inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base dark:hidden"><span class="font-medium leading-none text-muted truncate">&nbsp;</span></span>
+<span class="items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated size-8 text-base hidden dark:block"><span class="font-medium leading-none text-muted truncate">&nbsp;</span></span>
+<!--v-if-->"
+`;
+
+exports[`Nuxt UI > UColorModeButtonExample > snapshot 1`] = `
+"<button type="button" aria-label="Switch to dark mode" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 rounded-lg"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+  <!--v-if-->
+  <!--v-if-->
+</button>
+<!--v-if-->"
+`;
+
+exports[`Nuxt UI > UColorModeImageExample > snapshot 1`] = `
+"<img class="dark:hidden">
+<img class="hidden dark:block">
+<!--v-if-->"
+`;
+
+exports[`Nuxt UI > UColorModeSelectExample > snapshot 1`] = `
+"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" dir="ltr" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9 pe-9 w-32"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></span><span class="truncate pointer-events-none">System</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></span></button>
+<!--v-if-->
+<!--v-if-->
+<!--v-if-->"
+`;
+
+exports[`Nuxt UI > UColorModeSwitchExample > snapshot 1`] = `
+"<div class="relative flex items-start">
+  <div class="flex items-center h-5"><button aria-label="Switch to dark mode" class="inline-flex items-center shrink-0 rounded-full border-2 border-transparent focus-visible:outline-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-accented transition-[background] duration-200 data-[state=checked]:bg-primary focus-visible:outline-primary w-9" id="v-0" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="on"><span data-state="unchecked" class="group pointer-events-none rounded-full bg-default shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 flex items-center justify-center size-4 data-[state=checked]:translate-x-4 data-[state=checked]:rtl:-translate-x-4"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="absolute shrink-0 group-data-[state=unchecked]:text-dimmed opacity-0 size-10/12 transition-[color,opacity] duration-200 group-data-[state=checked]:text-primary group-data-[state=checked]:opacity-100"></svg><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="absolute shrink-0 group-data-[state=unchecked]:text-dimmed opacity-0 size-10/12 transition-[color,opacity] duration-200 group-data-[state=checked]:text-primary group-data-[state=unchecked]:opacity-100"></svg></span>
+      <!--v-if-->
+    </button></div>
+  <!--v-if-->
+</div>
+<!--v-if-->"
+`;
+
+exports[`Nuxt UI > UColorPickerExample > snapshot 1`] = `
+"<div data-v-fdcd7a71="" class="data-[disabled]:opacity-75">
+  <div data-v-fdcd7a71="" class="flex gap-4">
+    <div data-v-fdcd7a71="" class="rounded-md touch-none w-42 h-42" style="background-color: #FF0000;">
+      <div data-v-fdcd7a71="" class="w-full h-full relative rounded-md" data-color-picker-background="">
+        <div data-v-fdcd7a71="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-(--color-white) rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FFFFFF; left: 0%; top: 0%;"></div>
+      </div>
+    </div>
+    <div data-v-fdcd7a71="" class="w-[8px] relative rounded-md touch-none h-42" data-color-picker-track="">
+      <div data-v-fdcd7a71="" class="absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-(--color-white) cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FF0000; top: 0%;"></div>
+    </div>
+  </div>
+</div>
+<!--v-if-->"
+`;
+
+exports[`Nuxt UI > UCommandPaletteExample > snapshot 1`] = `
+"<div dir="ltr" class="flex flex-col min-h-0 min-w-0 divide-y divide-default">
+  <div class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent ps-9" autocomplete="off" aria-disabled="false" value=""><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></span>
+    <!--v-if-->
+  </div>
+  <div class="relative overflow-hidden flex flex-col" role="listbox" tabindex="0" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical">
+    <div class="py-6 text-center text-sm text-muted">No data</div>
+  </div>
+  <!--v-if-->
+  <!--v-if-->
+</div>
+<!--v-if-->"
+`;
+
+exports[`Nuxt UI > UContainerExample > snapshot 1`] = `
+"<div class="max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 w-72 aspect-video">
+  <div class="placeholder size-full"> Container </div>
+</div>
+<!--v-if-->"
+`;
+
+exports[`Nuxt UI > UContextMenuExample > snapshot 1`] = `
+"<div data-state="closed" style="pointer-events: auto;" class="placeholder aspect-video w-72"> Right click here </div>
+<!--v-if-->
+<!--v-if-->"
+`;
+
+exports[`Nuxt UI > UDrawerExample > snapshot 1`] = `
+"<button type="button" aria-haspopup="dialog" aria-expanded="false" data-state="closed" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted">
+  <!--v-if--><span class="truncate">Open Drawer</span>
+  <!--v-if-->
+</button>
+<!--v-if-->
+<!--v-if-->"
+`;
+
+exports[`Nuxt UI > UDropdownMenuExample > snapshot 1`] = `
+"<button type="button" id="reka-dropdown-menu-trigger-v-0" aria-haspopup="menu" aria-expanded="false" data-state="closed" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted">
+  <!--v-if--><span class="truncate">Open Menu</span>
+  <!--v-if-->
+</button>
+<!--v-if-->
+<!--v-if-->"
+`;
+
+exports[`Nuxt UI > UErrorExample > snapshot 1`] = `
+"<main class="min-h-[calc(100vh-var(--ui-header-height))] flex flex-col items-center justify-center text-center">
+  <!--v-if-->
+  <!--v-if-->
+  <!--v-if-->
+  <div class="mt-8 flex items-center justify-center gap-6"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+      <!--v-if--><span class="truncate">Back to home</span>
+      <!--v-if-->
+    </button></div>
+</main>
+<!--v-if-->"
+`;
+
+exports[`Nuxt UI > UFieldGroupExample > snapshot 1`] = `
+"<div data-orientation="horizontal" class="relative inline-flex -space-x-px">
+  <div class="relative inline-flex items-center group has-focus-visible:z-[1]"><input type="text" placeholder="Search..." class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors group-not-only:group-first:rounded-e-none group-not-only:group-last:rounded-s-none group-not-last:group-not-first:rounded-none px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off">
+    <!--v-if-->
+    <!--v-if-->
+  </div><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors not-only:first:rounded-e-none not-only:last:rounded-s-none not-last:not-first:rounded-none focus-visible:z-[1] px-2.5 py-1.5 text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted">
+    <!--v-if--> Button
+    <!--v-if-->
+  </button>
+</div>
+<!--v-if-->"
+`;
+
+exports[`Nuxt UI > UFileUploadExample > snapshot 1`] = `
+"<div class="relative flex flex-col w-96 min-h-48">
+  <div role="button" data-dragging="false" class="w-full flex-1 bg-default border border-default flex flex-col gap-2 items-stretch justify-center rounded-lg focus-visible:outline-2 transition-[background] p-4 text-sm border-dashed data-[dragging=true]:bg-elevated/25 focus-visible:outline-primary hover:bg-elevated/25" tabindex="0">
+    <!--v-if-->
+    <div class="flex flex-col items-center justify-center text-center px-4 py-3"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="text-muted shrink-0"></svg></span>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </div>
+  </div>
+  <!--v-if--><input type="file" accept="*" class="sr-only" tabindex="-1">
+</div>
+<!--v-if-->"
+`;
+
+exports[`Nuxt UI > UFormExample > snapshot 1`] = `
+"<form id="v-0" class="space-y-4">
+  <div class="text-sm">
+    <div class="">
+      <div class="flex content-center items-center justify-between"><label for="v-1" class="block font-medium text-default">Email</label>
+        <!--v-if-->
+      </div>
+      <!--v-if-->
+    </div>
+    <div class="mt-1 relative">
+      <div class="relative inline-flex items-center"><input id="v-1" type="text" name="email" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off" aria-invalid="false">
+        <!--v-if-->
+        <!--v-if-->
+      </div>
+      <!--v-if-->
+    </div>
+  </div>
+  <div class="text-sm">
+    <div class="">
+      <div class="flex content-center items-center justify-between"><label for="v-2" class="block font-medium text-default">Password</label>
+        <!--v-if-->
+      </div>
+      <!--v-if-->
+    </div>
+    <div class="mt-1 relative">
+      <div class="relative inline-flex items-center"><input id="v-2" type="password" name="password" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off" aria-invalid="false">
+        <!--v-if-->
+        <!--v-if-->
+      </div>
+      <!--v-if-->
+    </div>
+  </div><button type="submit" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+    <!--v-if--> Submit
+    <!--v-if-->
+  </button>
+</form>
+<!--v-if-->"
+`;
+
+exports[`Nuxt UI > UFormFieldExample > snapshot 1`] = `
+"<div class="text-sm">
+  <div class="">
+    <!--v-if-->
+    <!--v-if-->
+  </div>
+  <div class="">
+    <div class="relative inline-flex items-center"><input id="v-0" type="text" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off" aria-invalid="false">
+      <!--v-if-->
+      <!--v-if-->
+    </div>
+    <!--v-if-->
+  </div>
+</div>
+<!--v-if-->"
+`;
+
+exports[`Nuxt UI > UIconExample > snapshot 1`] = `"<!--v-if-->"`;
+
+exports[`Nuxt UI > UInputExample > snapshot 1`] = `
+"<div class="relative inline-flex items-center"><input type="text" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off">
+  <!--v-if-->
+  <!--v-if-->
+</div>
+<!--v-if-->"
+`;
+
+exports[`Nuxt UI > UInputMenuExample > snapshot 1`] = `
+"<div dir="ltr" class="relative inline-flex items-center"><input aria-disabled="false" type="text" aria-expanded="false" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" value="">
+  <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></button>
+  <!--v-if-->
+  <!--v-if-->
+</div>
+<!--v-if-->"
+`;
+
+exports[`Nuxt UI > UInputNumberExample > snapshot 1`] = `
+"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary px-9" value="">
+  <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+      <!--v-if-->
+      <!--v-if-->
+    </button></div>
+  <div class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+      <!--v-if-->
+      <!--v-if-->
+    </button></div>
+  <!--v-if-->
+</div>
+<!--v-if-->"
+`;
+
+exports[`Nuxt UI > UInputTagsExample > snapshot 1`] = `
+"<div class="relative inline-flex items-center flex-wrap rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented has-focus-visible:ring-2 has-focus-visible:ring-inset has-focus-visible:ring-primary" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" class="flex-1 border-0 bg-transparent placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75">
+  <!--v-if-->
+  <!--v-if-->
+  <!--v-if-->
+</div>
+<!--v-if-->"
+`;
+
+exports[`Nuxt UI > UKbdExample > snapshot 1`] = `
+"<kbd class="inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans h-5 min-w-[20px] text-[11px] ring ring-inset ring-accented text-default bg-default"></kbd>
+<!--v-if-->"
+`;
+
+exports[`Nuxt UI > ULinkExample > snapshot 1`] = `
+"<button type="button" class="focus-visible:outline-primary text-muted hover:text-default transition-colors"> Link </button>
+<!--v-if-->"
+`;
+
+exports[`Nuxt UI > ULocaleSelectExample > snapshot 1`] = `
+"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" dir="ltr" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9 pe-9 w-40"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><!--v-if--></span><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></span></button>
+<!--v-if-->
+<!--v-if-->
+<!--v-if-->"
+`;
+
+exports[`Nuxt UI > UMarqueeExample > snapshot 1`] = `
+"<div data-orientation="horizontal" class="group relative flex items-center overflow-hidden gap-(--gap) [--gap:--spacing(16)] [--duration:20s] before:absolute before:pointer-events-none before:content-[&quot;&quot;] before:z-2 before:from-default before:to-transparent after:absolute after:pointer-events-none after:content-[&quot;&quot;] after:z-2 after:from-default after:to-transparent flex-row before:inset-y-0 before:left-0 before:h-full before:w-1/3 before:bg-gradient-to-r after:inset-y-0 after:right-0 after:h-full after:w-1/3 after:bg-gradient-to-l backface-hidden">
+  <div class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-10 shrink-0"></svg><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-10 shrink-0"></svg><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-10 shrink-0"></svg><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-10 shrink-0"></svg><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-10 shrink-0"></svg><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-10 shrink-0"></svg></div>
+  <div class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-10 shrink-0"></svg><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-10 shrink-0"></svg><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-10 shrink-0"></svg><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-10 shrink-0"></svg><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-10 shrink-0"></svg><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-10 shrink-0"></svg></div>
+  <div class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-10 shrink-0"></svg><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-10 shrink-0"></svg><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-10 shrink-0"></svg><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-10 shrink-0"></svg><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-10 shrink-0"></svg><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-10 shrink-0"></svg></div>
+  <div class="flex items-center shrink-0 justify-around gap-(--gap) min-w-max w-full flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-10 shrink-0"></svg><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-10 shrink-0"></svg><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-10 shrink-0"></svg><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-10 shrink-0"></svg><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-10 shrink-0"></svg><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="size-10 shrink-0"></svg></div>
+</div>
+<!--v-if-->"
+`;
+
+exports[`Nuxt UI > UModalExample > snapshot 1`] = `
+"<button type="button" aria-haspopup="dialog" aria-expanded="false" data-state="closed" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted">
+  <!--v-if--><span class="truncate">Open Modal</span>
+  <!--v-if-->
+</button>
+<!--v-if-->
+<!--v-if-->"
+`;
+
+exports[`Nuxt UI > UNavigationMenuExample > snapshot 1`] = `
+"<nav data-collapsed="false" class="relative flex gap-1.5 [&amp;>div]:min-w-0 items-center justify-between" aria-label="Main" data-orientation="horizontal" dir="ltr" data-reka-navigation-menu="">
+  <div class="absolute top-full left-0 flex w-full justify-center">
+    <!--v-if-->
+    <!---->
+  </div>
+</nav>
+<!--v-if-->"
+`;
+
+exports[`Nuxt UI > UPaginationExample > snapshot 1`] = `
+"<nav>
+  <div class="flex items-center gap-1"><button type="button" disabled="" aria-label="First Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" disabled="" aria-label="Previous Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary p-1.5" value="1">
+      <!--v-if--><span class="truncate min-w-5 text-center">1</span>
+      <!--v-if-->
+    </button><button type="button" disabled="" aria-label="Next Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" disabled="" aria-label="Last Page" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+      <!--v-if-->
+      <!--v-if-->
+    </button></div>
+</nav>
+<!--v-if-->"
+`;
+
+exports[`Nuxt UI > UPinInputExample > snapshot 1`] = `
+"<div class="relative inline-flex items-center gap-1.5" dir="ltr" data-complete=""><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" data-complete="" aria-label="pin input 1 of 0" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" data-complete="" aria-label="pin input 2 of 0" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" data-complete="" aria-label="pin input 3 of 0" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" data-complete="" aria-label="pin input 4 of 0" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="" data-complete="" aria-label="pin input 5 of 0" class="rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors size-8 text-sm text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"><!-- We render single input if it's required --><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" name="" value=""></div>
+<!--v-if-->"
+`;
+
+exports[`Nuxt UI > UPopoverExample > snapshot 1`] = `
+"<button type="button" id="reka-popover-trigger-v-0" aria-haspopup="dialog" aria-expanded="false" aria-controls="" data-state="closed" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted">
+  <!--v-if--><span class="truncate">Open Popover</span>
+  <!--v-if-->
+</button>
+<!--v-if-->
+<!--v-if-->
+<!--v-if-->"
+`;
+
+exports[`Nuxt UI > UPricingPlanExample > snapshot 1`] = `
+"<div data-orientation="vertical" class="relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6 bg-default ring ring-default">
+  <!--v-if-->
+  <div class="flex flex-col min-w-0">
+    <div class="flex items-center gap-3">
+      <!--v-if-->
+      <!--v-if-->
+    </div>
+    <!--v-if-->
+    <!--v-if-->
+    <!--v-if-->
+  </div>
+  <!--v-if-->
+</div>
+<!--v-if-->"
+`;
+
+exports[`Nuxt UI > UPricingTableExample > snapshot 1`] = `
+"<div class="w-full relative">
+  <table class="w-full table-fixed border-separate border-spacing-x-0 hidden md:table">
+    <!--v-if-->
+    <thead class="">
+      <tr class="">
+        <td></td>
+      </tr>
+    </thead>
+    <tbody class=""></tbody>
+  </table>
+  <ul class="md:hidden flex flex-col gap-6 w-full"></ul>
+</div>
+<!--v-if-->"
+`;
+
+exports[`Nuxt UI > UProgressExample > snapshot 1`] = `
+"<div data-orientation="horizontal" class="gap-2 flex flex-col w-60">
+  <!--v-if-->
+  <div aria-valuemax="100" aria-valuemin="0" role="progressbar" data-state="indeterminate" data-max="100" class="relative overflow-hidden rounded-full bg-accented w-full h-2" style="transform: translateZ(0);">
+    <div data-state="indeterminate" data-max="100" class="rounded-full size-full transition-transform duration-200 ease-out bg-primary data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]"></div>
+  </div>
+  <!--v-if-->
+</div>
+<!--v-if-->"
+`;
+
+exports[`Nuxt UI > URadioGroupExample > snapshot 1`] = `
+"<div id="v-0" class="relative" tabindex="-1" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="radiogroup" aria-orientation="vertical" aria-required="false">
+  <fieldset class="flex gap-x-2 flex-col gap-y-1">
+    <!--v-if-->
+  </fieldset>
+  <!--v-if-->
+</div>
+<!--v-if-->"
+`;
+
+exports[`Nuxt UI > USelectExample > snapshot 1`] = `
+"<button class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus:ring-2 focus:ring-inset focus:ring-primary pe-9" role="combobox" type="button" aria-controls="reka-select-content-v-0" aria-expanded="false" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="closed" data-placeholder="">
+  <!--v-if--><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></span>
+</button>
+<!--v-if-->
+<select aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;">
+  <option value=""></option>
+</select>
+<!--v-if-->"
+`;
+
+exports[`Nuxt UI > USelectMenuExample > snapshot 1`] = `
+"<button type="button" tabindex="0" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="false" aria-controls="" data-state="closed" aria-disabled="false" dir="ltr" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9 w-48">
+  <!--v-if--><span class="truncate text-dimmed">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></span>
+</button>
+<!--v-if-->
+<!--v-if-->
+<!--v-if-->"
+`;
+
+exports[`Nuxt UI > USeparatorExample > snapshot 1`] = `
+"<div data-orientation="horizontal" role="separator" class="flex items-center align-center text-center flex-row w-60">
+  <div class="border-default w-full border-solid border-t"></div>
+  <!--v-if-->
+</div>
+<!--v-if-->"
+`;
+
+exports[`Nuxt UI > USkeletonExample > snapshot 1`] = `
+"<div aria-busy="true" aria-label="loading" aria-live="polite" role="alert" class="animate-pulse rounded-md bg-elevated h-32 w-96"></div>
+<!--v-if-->"
+`;
+
+exports[`Nuxt UI > USlideoverExample > snapshot 1`] = `
+"<button type="button" aria-haspopup="dialog" aria-expanded="false" data-state="closed" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted">
+  <!--v-if--><span class="truncate">Open Slideover</span>
+  <!--v-if-->
+</button>
+<!--v-if-->
+<!--v-if-->"
+`;
+
+exports[`Nuxt UI > USliderExample > snapshot 1`] = `
+"<span data-slider-impl="" dir="ltr" data-orientation="horizontal" style="--reka-slider-thumb-transform: translateX(-50%);" class="relative flex items-center select-none touch-none w-full min-w-56" aria-disabled="false"><span data-orientation="horizontal" class="relative bg-accented overflow-hidden rounded-full grow h-[8px]"><span data-orientation="horizontal" style="left: 0%; right: 100%;" class="absolute rounded-full bg-primary h-full"></span></span><span data-reka-collection-item="" class="rounded-full bg-default ring-2 focus-visible:outline-2 focus-visible:outline-offset-2 ring-primary focus-visible:outline-primary/50 size-4" role="slider" tabindex="0" data-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" style="transform: var(--reka-slider-thumb-transform); position: absolute; left: calc(0% + 0px); display: none;"></span>
+<!--v-if--></span>
+<!--v-if-->"
+`;
+
+exports[`Nuxt UI > UStepperExample > snapshot 1`] = `
+"<div role="group" aria-label="progress" data-linear="" data-orientation="horizontal" class="flex gap-4 flex-col">
+  <div class="flex">
+    <div aria-current="true" data-state="active" data-orientation="horizontal" class="group text-center relative w-full">
+      <div class="relative flex justify-center"><button type="button" data-state="active" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-1" aria-labelledby="reka-stepper-item-title-v-0" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
+          <div class="flex items-center justify-center size-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg></div>
+        </button>
+        <div data-orientation="horizontal" role="none" data-state="active" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-accented top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-primary start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
+      </div>
+      <div class="mt-2.5">
+        <div id="reka-stepper-item-title-v-0" class="font-medium text-default text-sm">Address</div>
+        <div id="reka-stepper-item-description-v-1" class="text-muted text-wrap text-sm">Add your address here</div>
+      </div>
+    </div>
+    <div data-state="inactive" data-orientation="horizontal" class="group text-center relative w-full">
+      <div class="relative flex justify-center"><button type="button" data-state="inactive" data-orientation="horizontal" tabindex="0" aria-describedby="reka-stepper-item-description-v-3" aria-labelledby="reka-stepper-item-title-v-2" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
+          <div class="flex items-center justify-center size-full"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg></div>
+        </button>
+        <div data-orientation="horizontal" role="none" data-state="inactive" class="absolute rounded-full group-data-[disabled]:opacity-75 bg-accented top-[calc(50%-2px)] h-0.5 group-data-[state=completed]:bg-primary start-[calc(50%+28px)] end-[calc(-50%+28px)]"></div>
+      </div>
+      <div class="mt-2.5">
+        <div id="reka-stepper-item-title-v-2" class="font-medium text-default text-sm">Shipping</div>
+        <div id="reka-stepper-item-description-v-3" class="text-muted text-wrap text-sm">Set your preferred shipping method</div>
+      </div>
+    </div>
+    <div data-state="inactive" disabled="" data-disabled="" data-orientation="horizontal" class="group text-center relative w-full">
+      <div class="relative flex justify-center"><button type="button" data-state="inactive" disabled="" data-disabled="" data-orientation="horizontal" tabindex="-1" aria-describedby="reka-stepper-item-description-v-5" aria-labelledby="reka-stepper-item-title-v-4" class="rounded-full text-center align-middle flex items-center justify-center font-semibold group-data-[state=completed]:text-inverted group-data-[state=active]:text-inverted text-muted bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 size-10 text-base group-data-[state=completed]:bg-primary group-data-[state=active]:bg-primary focus-visible:outline-primary">
+          <div class="flex items-center justify-center size-full">3</div>
+        </button>
+        <!--v-if-->
+      </div>
+      <div class="mt-2.5">
+        <div id="reka-stepper-item-title-v-4" class="font-medium text-default text-sm">Checkout</div>
+        <div id="reka-stepper-item-description-v-5" class="text-muted text-wrap text-sm">Confirm your order</div>
+      </div>
+    </div>
+  </div>
+  <div class="size-full"></div>
+  <div aria-live="polite" aria-atomic="true" role="status" style="transform: translateX(-100%); position: absolute; pointer-events: none; opacity: 0; margin: 0px;"> Step 0 of 0</div>
+</div>
+<!--v-if-->"
+`;
+
+exports[`Nuxt UI > USwitchExample > snapshot 1`] = `
+"<div class="relative flex items-start">
+  <div class="flex items-center h-5"><button class="inline-flex items-center shrink-0 rounded-full border-2 border-transparent focus-visible:outline-2 focus-visible:outline-offset-2 data-[state=unchecked]:bg-accented transition-[background] duration-200 data-[state=checked]:bg-primary focus-visible:outline-primary w-9" id="v-0" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="on"><span data-state="unchecked" class="group pointer-events-none rounded-full bg-default shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 flex items-center justify-center size-4 data-[state=checked]:translate-x-4 data-[state=checked]:rtl:-translate-x-4"></span>
+      <!--v-if-->
+    </button></div>
+  <!--v-if-->
+</div>
+<!--v-if-->"
+`;
+
+exports[`Nuxt UI > UTableExample > snapshot 1`] = `
+"<div class="relative overflow-auto flex-1">
+  <table class="min-w-full overflow-clip">
+    <!--v-if-->
+    <thead class="relative">
+      <tr class="data-[selected=true]:bg-elevated/50">
+        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Id</th>
+        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Date</th>
+        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Status</th>
+        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Email</th>
+        <th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Amount</th>
+      </tr>
+      <tr class="absolute z-[1] left-0 w-full h-px bg-(--ui-border-accented)"></tr>
+    </thead>
+    <tbody class="divide-y divide-default [&amp;>tr]:data-[selectable=true]:hover:bg-elevated/50 [&amp;>tr]:data-[selectable=true]:focus-visible:outline-primary">
+      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">4600</td>
+        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">2024-03-11T15:30:00</td>
+        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">paid</td>
+        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">james.anderson@example.com</td>
+        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">594</td>
+      </tr>
+      <!--v-if-->
+      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">4599</td>
+        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">2024-03-11T10:10:00</td>
+        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">failed</td>
+        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">mia.white@example.com</td>
+        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">276</td>
+      </tr>
+      <!--v-if-->
+      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">4598</td>
+        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">2024-03-11T08:50:00</td>
+        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">refunded</td>
+        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">william.brown@example.com</td>
+        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">315</td>
+      </tr>
+      <!--v-if-->
+      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">4597</td>
+        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">2024-03-10T19:45:00</td>
+        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">paid</td>
+        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">emma.davis@example.com</td>
+        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">529</td>
+      </tr>
+      <!--v-if-->
+      <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
+        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">4596</td>
+        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">2024-03-10T15:55:00</td>
+        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">paid</td>
+        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">ethan.harris@example.com</td>
+        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">639</td>
+      </tr>
+      <!--v-if-->
+    </tbody>
+    <!--v-if-->
+  </table>
+</div>
+<!--v-if-->"
+`;
+
+exports[`Nuxt UI > UTabsExample > snapshot 1`] = `
+"<div dir="ltr" data-orientation="horizontal" class="flex items-center gap-2 flex-col">
+  <div class="relative flex p-1 group bg-elevated rounded-lg w-full" tabindex="-1" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="horizontal">
+    <!--v-if-->
+  </div>
+</div>
+<!--v-if-->"
+`;
+
+exports[`Nuxt UI > UTextareaExample > snapshot 1`] = `
+"<div class="relative inline-flex items-center"><textarea rows="3" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"></textarea>
+  <!--v-if-->
+  <!--v-if-->
+</div>
+<!--v-if-->"
+`;
+
+exports[`Nuxt UI > UTimelineExample > snapshot 1`] = `
+"<div data-orientation="vertical" class="flex gap-1.5 flex-col w-96"></div>
+<!--v-if-->"
+`;
+
+exports[`Nuxt UI > UToasterExample > snapshot 1`] = `
+"<button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted">
+  <!--v-if--><span class="truncate">Open Toast</span>
+  <!--v-if-->
+</button>
+<!--v-if-->"
+`;
+
+exports[`Nuxt UI > UTooltipExample > snapshot 1`] = `
+"<button type="button" data-state="closed" data-grace-area-trigger="" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 ring ring-inset ring-accented text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted">
+  <!--v-if--><span class="truncate">Show Tooltip</span>
+  <!--v-if-->
+</button>
+<!--v-if-->
+<!--v-if-->"
+`;
+
+exports[`Nuxt UI > UTreeExample > snapshot 1`] = `
+"<ul class="relative isolate" tabindex="-1" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tree"></ul>
+<!--v-if-->"
+`;
+
+exports[`Nuxt UI > UUserExample > snapshot 1`] = `
+"<div data-orientation="horizontal" class="relative group/user flex items-center gap-2">
+  <!--v-if-->
+  <div class="">
+    <!--v-if-->
+    <!--v-if-->
+    <!--v-if-->
+  </div>
+</div>
+<!--v-if-->"
+`;
diff --git a/playgrounds/vue/vite.config.ts b/playgrounds/vue/vite.config.ts
index 5ca75da2..3503595f 100644
--- a/playgrounds/vue/vite.config.ts
+++ b/playgrounds/vue/vite.config.ts
@@ -4,6 +4,7 @@ import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 import vueDevTools from 'vite-plugin-vue-devtools'
 import { compodium } from '@compodium/vue'
+
 import ui from '@nuxt/ui/vite'
 
 // https://vite.dev/config/
@@ -12,7 +13,9 @@ export default defineConfig({
     vue(),
     vueDevTools(),
     ui({ ui: { colors: { neutral: 'zinc' } } }),
-    compodium(),
+    compodium({
+      testing: { enabled: true }
+    }),
     // Ignore components.d.ts updates to avoid reloading the page
     // when importing a new component in compodium.
     {
@@ -23,6 +26,11 @@ export default defineConfig({
     }
   ],
 
+  test: {
+    environment: 'happy-dom',
+    silent: 'passed-only'
+  },
+
   resolve: {
     alias: {
       '@': fileURLToPath(new URL('./src', import.meta.url))
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 3e51f6e8..d2fca7d4 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -25,6 +25,7 @@ overrides:
   '@compodium/meta': workspace:^
   '@compodium/nuxt': workspace:^
   '@compodium/vue': workspace:^
+  '@compodium/testing': workspace:^
 
 importers:
 
@@ -35,7 +36,7 @@ importers:
         version: 1.9.0(@typescript-eslint/utils@8.46.0(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3))(@vue/compiler-sfc@3.5.22)(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3)
       '@nuxt/test-utils':
         specifier: ^3.20.1
-        version: 3.20.1(happy-dom@17.6.3)(magicast@0.3.5)(playwright-core@1.56.0)(typescript@5.9.3)(vitest@3.2.4(@types/debug@4.1.12)(@types/node@22.18.12)(happy-dom@17.6.3)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.0)(yaml@2.8.1))
+        version: 3.20.1(@vue/test-utils@2.4.6)(happy-dom@17.6.3)(magicast@0.3.5)(playwright-core@1.56.0)(typescript@5.9.3)(vitest@3.2.4(@types/debug@4.1.12)(@types/node@22.18.12)(happy-dom@17.6.3)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.0)(yaml@2.8.1))
       '@types/node':
         specifier: ^22.18.12
         version: 22.18.12
@@ -65,7 +66,7 @@ importers:
         version: 7.1.12(@types/node@22.18.12)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.0)(yaml@2.8.1)
       vitest:
         specifier: ^3.2.4
-        version: 3.2.4(@types/debug@4.1.12)(@types/node@22.18.12)(happy-dom@17.6.3)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.0)(yaml@2.8.1)
+        version: 3.2.4(@types/debug@4.1.12)(@types/node@22.18.12)(@vitest/ui@4.0.6)(happy-dom@17.6.3)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.0)(yaml@2.8.1)
       wrangler:
         specifier: ^4.45.0
         version: 4.45.0(@cloudflare/workers-types@4.20251011.0)
@@ -111,6 +112,9 @@ importers:
       '@compodium/meta':
         specifier: workspace:^
         version: link:../meta
+      '@compodium/testing':
+        specifier: workspace:^
+        version: link:../testing
       '@vueuse/core':
         specifier: ^13.9.0
         version: 13.9.0(vue@3.5.22(typescript@5.9.3))
@@ -147,6 +151,9 @@ importers:
       vite:
         specifier: '>=6'
         version: 7.1.12(@types/node@22.18.12)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.0)(yaml@2.8.1)
+      vitest:
+        specifier: '>=3.2.4'
+        version: 3.2.4(@types/debug@4.1.12)(@types/node@22.18.12)(@vitest/ui@4.0.6)(happy-dom@17.6.3)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.0)(yaml@2.8.1)
       vue:
         specifier: '>=3'
         version: 3.5.22(typescript@5.9.3)
@@ -159,6 +166,9 @@ importers:
       '@nuxt/ui':
         specifier: 'catalog:'
         version: 4.1.0(@babel/parser@7.28.4)(change-case@5.4.4)(db0@0.3.4(better-sqlite3@12.4.1))(embla-carousel@8.6.0)(ioredis@5.8.2)(magicast@0.3.5)(typescript@5.9.3)(vite@7.1.12(@types/node@22.18.12)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.0)(yaml@2.8.1))(vue-router@4.6.3(vue@3.5.22(typescript@5.9.3)))(vue@3.5.22(typescript@5.9.3))(zod@4.1.12)
+      '@vitest/ws-client':
+        specifier: ^3.2.4
+        version: 3.2.4
       '@vueuse/core':
         specifier: ^13.9.0
         version: 13.9.0(vue@3.5.22(typescript@5.9.3))
@@ -183,6 +193,9 @@ importers:
       knitwork:
         specifier: ^1.2.0
         version: 1.2.0
+      motion-v:
+        specifier: ^1.4.0
+        version: 1.7.4(@vueuse/core@13.9.0(vue@3.5.22(typescript@5.9.3)))(vue@3.5.22(typescript@5.9.3))
       nuxt:
         specifier: 'catalog:'
         version: 4.2.0(@parcel/watcher@2.5.1)(@types/node@22.18.12)(@vue/compiler-sfc@3.5.22)(better-sqlite3@12.4.1)(db0@0.3.4(better-sqlite3@12.4.1))(eslint@9.38.0(jiti@2.6.1))(ioredis@5.8.2)(lightningcss@1.30.2)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.52.5)(terser@5.44.0)(typescript@5.9.3)(vite@7.1.12(@types/node@22.18.12)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.0)(yaml@2.8.1))(vue-tsc@2.2.12(typescript@5.9.3))(yaml@2.8.1)
@@ -192,6 +205,9 @@ importers:
       prettier:
         specifier: ^3.6.2
         version: 3.6.2
+      resemblejs:
+        specifier: ^5.0.0
+        version: 5.0.0
       scule:
         specifier: ^1.3.0
         version: 1.3.0
@@ -208,6 +224,9 @@ importers:
       '@compodium/meta':
         specifier: workspace:^
         version: link:../meta
+      '@compodium/testing':
+        specifier: workspace:^
+        version: link:../testing
       '@iconify-json/lineicons':
         specifier: ^1.2.6
         version: 1.2.6
@@ -220,6 +239,9 @@ importers:
       '@types/deep-eql':
         specifier: ^4.0.2
         version: 4.0.2
+      '@types/resemblejs':
+        specifier: ^4.1.3
+        version: 4.1.3
 
   packages/examples:
     dependencies:
@@ -276,6 +298,9 @@ importers:
       '@nuxt/kit':
         specifier: '>=3.15'
         version: 4.2.0(magicast@0.3.5)
+      '@nuxt/test-utils':
+        specifier: '>=3.20'
+        version: 3.20.1(@vue/test-utils@2.4.6)(happy-dom@17.6.3)(magicast@0.3.5)(playwright-core@1.56.0)(typescript@5.9.3)(vitest@3.2.4(@types/debug@4.1.12)(@types/node@22.18.12)(happy-dom@17.6.3)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.0)(yaml@2.8.1))
       consola:
         specifier: ^3.4.2
         version: 3.4.2
@@ -285,6 +310,9 @@ importers:
       ufo:
         specifier: ^1.6.1
         version: 1.6.1
+      vite:
+        specifier: '>=6'
+        version: 7.1.12(@types/node@22.18.12)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.0)(yaml@2.8.1)
     devDependencies:
       '@nuxt/module-builder':
         specifier: ^1.0.2
@@ -299,6 +327,27 @@ importers:
         specifier: ^2.0.3
         version: 2.0.3
 
+  packages/testing:
+    dependencies:
+      '@compodium/core':
+        specifier: workspace:^
+        version: link:../core
+      '@vue/test-utils':
+        specifier: '>=2'
+        version: 2.4.6
+      defu:
+        specifier: ^6.1.4
+        version: 6.1.4
+      unplugin:
+        specifier: ^2.3.5
+        version: 2.3.10
+      vite:
+        specifier: '>=6'
+        version: 7.1.12(@types/node@22.18.12)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.0)(yaml@2.8.1)
+      vitest:
+        specifier: '>=3.2.4'
+        version: 3.2.4(@types/debug@4.1.12)(@types/node@22.18.12)(@vitest/ui@4.0.6)(happy-dom@17.6.3)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.0)(yaml@2.8.1)
+
   packages/vue:
     dependencies:
       '@compodium/core':
@@ -334,15 +383,34 @@ importers:
 
   playgrounds/nuxt:
     dependencies:
-      '@compodium/nuxt':
-        specifier: workspace:^
-        version: link:../../packages/nuxt
       '@nuxt/ui':
         specifier: 'catalog:'
         version: 4.1.0(@babel/parser@7.28.4)(change-case@5.4.4)(db0@0.3.4(better-sqlite3@12.4.1))(embla-carousel@8.6.0)(ioredis@5.8.2)(magicast@0.3.5)(typescript@5.9.3)(vite@7.1.12(@types/node@22.18.12)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.0)(yaml@2.8.1))(vue-router@4.6.3(vue@3.5.22(typescript@5.9.3)))(vue@3.5.22(typescript@5.9.3))(zod@4.1.12)
       nuxt:
         specifier: 'catalog:'
         version: 4.2.0(@parcel/watcher@2.5.1)(@types/node@22.18.12)(@vue/compiler-sfc@3.5.22)(better-sqlite3@12.4.1)(db0@0.3.4(better-sqlite3@12.4.1))(eslint@9.38.0(jiti@2.6.1))(ioredis@5.8.2)(lightningcss@1.30.2)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.52.5)(terser@5.44.0)(typescript@5.9.3)(vite@7.1.12(@types/node@22.18.12)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.0)(yaml@2.8.1))(vue-tsc@2.2.12(typescript@5.9.3))(yaml@2.8.1)
+      reka-ui:
+        specifier: ^2.5.1
+        version: 2.6.0(typescript@5.9.3)(vue@3.5.22(typescript@5.9.3))
+    devDependencies:
+      '@compodium/nuxt':
+        specifier: workspace:^
+        version: link:../../packages/nuxt
+      '@compodium/testing':
+        specifier: workspace:^
+        version: link:../../packages/testing
+      '@nuxt/test-utils':
+        specifier: ^3.20.0
+        version: 3.20.1(@vitest/ui@4.0.6)(@vue/test-utils@2.4.6)(happy-dom@17.6.3)(magicast@0.3.5)(playwright-core@1.56.0)(typescript@5.9.3)(vitest@3.2.4)
+      '@vitest/ui':
+        specifier: ^4.0.3
+        version: 4.0.6(vitest@3.2.4)
+      vitest:
+        specifier: ^3.2.4
+        version: 3.2.4(@types/debug@4.1.12)(@types/node@22.18.12)(@vitest/ui@4.0.6)(happy-dom@17.6.3)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.0)(yaml@2.8.1)
+      vitest-environment-nuxt:
+        specifier: ^1.0.1
+        version: 1.0.1(@vitest/ui@4.0.6)(@vue/test-utils@2.4.6)(happy-dom@17.6.3)(magicast@0.3.5)(playwright-core@1.56.0)(typescript@5.9.3)(vitest@3.2.4)
 
   playgrounds/vue:
     dependencies:
@@ -352,10 +420,19 @@ importers:
       '@nuxt/ui':
         specifier: 'catalog:'
         version: 4.1.0(@babel/parser@7.28.4)(change-case@5.4.4)(db0@0.3.4(better-sqlite3@12.4.1))(embla-carousel@8.6.0)(ioredis@5.8.2)(magicast@0.3.5)(typescript@5.9.3)(vite@7.1.12(@types/node@22.18.12)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.0)(yaml@2.8.1))(vue-router@4.6.3(vue@3.5.22(typescript@5.9.3)))(vue@3.5.22(typescript@5.9.3))(zod@4.1.12)
+      reka-ui:
+        specifier: ^2.5.1
+        version: 2.6.0(typescript@5.9.3)(vue@3.5.22(typescript@5.9.3))
       vue:
         specifier: 'catalog:'
         version: 3.5.22(typescript@5.9.3)
+      vue-router:
+        specifier: ^4.5.1
+        version: 4.6.3(vue@3.5.22(typescript@5.9.3))
     devDependencies:
+      '@compodium/testing':
+        specifier: workspace:^
+        version: link:../../packages/testing
       '@tsconfig/node22':
         specifier: ^22.0.2
         version: 22.0.2
@@ -368,12 +445,18 @@ importers:
       '@vue/tsconfig':
         specifier: ^0.8.1
         version: 0.8.1(typescript@5.9.3)(vue@3.5.22(typescript@5.9.3))
+      happy-dom:
+        specifier: ^17.6.3
+        version: 17.6.3
       vite:
         specifier: ^7.1.12
         version: 7.1.12(@types/node@22.18.12)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.0)(yaml@2.8.1)
       vite-plugin-vue-devtools:
         specifier: ^8.0.3
         version: 8.0.3(vite@7.1.12(@types/node@22.18.12)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.0)(yaml@2.8.1))(vue@3.5.22(typescript@5.9.3))
+      vitest:
+        specifier: ^3.2.4
+        version: 3.2.4(@types/debug@4.1.12)(@types/node@22.18.12)(@vitest/ui@4.0.6)(happy-dom@17.6.3)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.0)(yaml@2.8.1)
       vue-tsc:
         specifier: ^2.2.2
         version: 2.2.12(typescript@5.9.3)
@@ -1287,6 +1370,10 @@ packages:
   '@lezer/lr@1.4.2':
     resolution: {integrity: sha512-pu0K1jCIdnQ12aWNaAVU5bzi7Bd1w54J3ECgANPmYLtQKP0HBj2cE/5coBD66MT10xbtIuUr7tg0Shbsvk0mDA==}
 
+  '@mapbox/node-pre-gyp@1.0.11':
+    resolution: {integrity: sha512-Yhlar6v9WQgUp/He7BdgzOz8lqMQ8sU+jkCq7Wx8Myc5YFJLbEe7lgui/V7G1qB1DJykHSGwreceSaD60Y0PUQ==}
+    hasBin: true
+
   '@mapbox/node-pre-gyp@2.0.0':
     resolution: {integrity: sha512-llMXd39jtP0HpQLVI37Bf1m2ADlEb35GYSh1SDSLsBhR+5iCxiNGlT31yqbNtVHygHAtMy6dWFERpU2JgufhPg==}
     engines: {node: '>=18'}
@@ -1507,6 +1594,9 @@ packages:
   '@nuxtjs/mdc@0.17.4':
     resolution: {integrity: sha512-I5ZYUWVlE2xZAkfBG6B0/l2uddDZlr8X2WPVMPYNY4zocobBjMgykj4aqYXHY+N35HRYsa+IpuUCf30bR8xCbA==}
 
+  '@one-ini/wasm@0.1.1':
+    resolution: {integrity: sha512-XuySG1E38YScSJoMlqovLru4KTUNSjgVTIjyh7qMX6aNN5HY5Ct5LhRJdxO79JtTzKfzV/bnWpz+zquYrISsvw==}
+
   '@opentelemetry/api@1.9.0':
     resolution: {integrity: sha512-3giAOQvZiH5F9bMlMiv8+GSPMeqg0dbaeo58/0SlA9sxSqZhnUtxzX9/2FzyhS9sWQf5S0GJE0AKBrFqjpeYcg==}
     engines: {node: '>=8.0.0'}
@@ -2496,6 +2586,9 @@ packages:
   '@types/path-browserify@1.0.3':
     resolution: {integrity: sha512-ZmHivEbNCBtAfcrFeBCiTjdIc2dey0l7oCGNGpSuRTy8jP6UVND7oUowlvDujBy8r2Hoa8bfFUOCiPWfmtkfxw==}
 
+  '@types/resemblejs@4.1.3':
+    resolution: {integrity: sha512-p0NA5aACdWCK+I4NJbwUvFoixwYxvfLu+UqaiZt/J3+3PJavMYOxRrdbeXbbiKiMGdKdDFjoxlFWkkaMU7SDxA==}
+
   '@types/resolve@1.20.2':
     resolution: {integrity: sha512-60BCwRFOZCQhDncwQdxxeOEEkbc5dIMccYLwbxsS4TUNeVECQ/pBJ0j09mrHOl/JJvpRPGwO9SvE4nR2Nb/a4Q==}
 
@@ -2738,6 +2831,9 @@ packages:
   '@vitest/pretty-format@3.2.4':
     resolution: {integrity: sha512-IVNZik8IVRJRTr9fxlitMKeJeXFFFN0JaB9PHPGQ8NKQbGpfjlTx9zO4RefN8gp7eqjNy8nyK3NZmBzOPeIxtA==}
 
+  '@vitest/pretty-format@4.0.6':
+    resolution: {integrity: sha512-4vptgNkLIA1W1Nn5X4x8rLJBzPiJwnPc+awKtfBE5hNMVsoAl/JCCPPzNrbf+L4NKgklsis5Yp2gYa+XAS442g==}
+
   '@vitest/runner@3.2.4':
     resolution: {integrity: sha512-oukfKT9Mk41LreEW09vt45f8wx7DordoWUZMYdY/cyAk7w5TWkTRCNZYF7sX7n2wB7jyGAl74OxgwhPgKaqDMQ==}
 
@@ -2747,9 +2843,21 @@ packages:
   '@vitest/spy@3.2.4':
     resolution: {integrity: sha512-vAfasCOe6AIK70iP5UD11Ac4siNUNJ9i/9PZ3NKx07sG6sUxeag1LWdNrMWeKKYBLlzuK+Gn65Yd5nyL6ds+nw==}
 
+  '@vitest/ui@4.0.6':
+    resolution: {integrity: sha512-1ekpBsYNUm0Xv/0YsTvoSRmiRkmzz9Pma7qQ3Ui76sg2gwp2/ewSWqx4W/HfaN5dF0E8iBbidFo1wGaeqXYIrQ==}
+    peerDependencies:
+      vitest: 4.0.6
+
   '@vitest/utils@3.2.4':
     resolution: {integrity: sha512-fB2V0JFrQSMsCo9HiSq3Ezpdv4iYaXRG1Sx8edX3MwxfyNn83mKiGzOcH+Fkxt4MHxr3y42fQi1oeAInqgX2QA==}
 
+  '@vitest/utils@4.0.6':
+    resolution: {integrity: sha512-bG43VS3iYKrMIZXBo+y8Pti0O7uNju3KvNn6DrQWhQQKcLavMB+0NZfO1/QBAEbq0MaQ3QjNsnnXlGQvsh0Z6A==}
+
+  '@vitest/ws-client@3.2.4':
+    resolution: {integrity: sha512-1CUUdcQUvg/3ANAK5AdWeA7UTWq/Tcg3RDsgPyz1l6ZKNX6XJT0PORVv5xELva0LD4Yp8lcs3IGik+BlSA7L+g==}
+    engines: {node: ^18.0.0 || >=20.0.0}
+
   '@volar/language-core@2.4.15':
     resolution: {integrity: sha512-3VHw+QZU0ZG9IuQmzT68IyN4hZNd9GchGPhbD9+pa8CVv7rnoOZwo7T8weIbrRmihqy3ATpdfXFnqRrfPVK6CA==}
 
@@ -2866,6 +2974,9 @@ packages:
   '@vue/shared@3.5.22':
     resolution: {integrity: sha512-F4yc6palwq3TT0u+FYf0Ns4Tfl9GRFURDN2gWG7L1ecIaS/4fCIuFOjMTnCyjsu/OK6vaDKLCrGAa+KvvH+h4w==}
 
+  '@vue/test-utils@2.4.6':
+    resolution: {integrity: sha512-FMxEjOpYNYiFe0GkaHsnJPXFHxQ6m4t8vI/ElPGpMWxZKpmRvQ33OIrvRXemy6yha03RxhOlQuy+gZMC3CQSow==}
+
   '@vue/tsconfig@0.8.1':
     resolution: {integrity: sha512-aK7feIWPXFSUhsCP9PFqPyFOcz4ENkb8hZ2pneL6m2UjCkccvaOhC/5KCKluuBufvp2KzkbdA2W2pk20vLzu3g==}
     peerDependencies:
@@ -2953,6 +3064,13 @@ packages:
   '@webcontainer/env@1.1.1':
     resolution: {integrity: sha512-6aN99yL695Hi9SuIk1oC88l9o0gmxL1nGWWQ/kNy81HigJ0FoaoTXpytCj6ItzgyCEwA9kF1wixsTuv5cjsgng==}
 
+  abbrev@1.1.1:
+    resolution: {integrity: sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==}
+
+  abbrev@2.0.0:
+    resolution: {integrity: sha512-6/mh1E2u2YgEsCHdY0Yx5oW+61gZU+1vXaoiHHrpKeuRNNgFvS+/jrwHiQhB5apAf5oB7UB7E19ol2R2LKH8hQ==}
+    engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
+
   abbrev@3.0.1:
     resolution: {integrity: sha512-AO2ac6pjRB3SJmGJo+v5/aK6Omggp6fsLrs6wN9bd35ulu4cCwaAU9+7ZhXjeqHVkaHThLuzH0nZr0YpCDhygg==}
     engines: {node: ^18.17.0 || >=20.5.0}
@@ -2985,6 +3103,10 @@ packages:
     engines: {node: '>=0.4.0'}
     hasBin: true
 
+  agent-base@6.0.2:
+    resolution: {integrity: sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==}
+    engines: {node: '>= 6.0.0'}
+
   agent-base@7.1.4:
     resolution: {integrity: sha512-MnA+YT8fwfJPgBx3m60MNqakm30XOkyIoH1y6huTQvC0PwZG7ki8NacLBcrPbNoo8vEZy7Jpuk7+jMO+CUovTQ==}
     engines: {node: '>= 14'}
@@ -3031,6 +3153,9 @@ packages:
     resolution: {integrity: sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==}
     engines: {node: '>= 8'}
 
+  aproba@2.1.0:
+    resolution: {integrity: sha512-tLIEcj5GuR2RSTnxNKdkK0dJ/GrC7P38sUkiDmDuHfsHmbagTFAxDVIBltoklXEVIQ/f14IL8IMJ5pn9Hez1Ew==}
+
   archiver-utils@5.0.2:
     resolution: {integrity: sha512-wuLJMmIBQYCsGZgYLTy5FIB2pF6Lfb6cXMSF8Qywwk3t20zWnAi7zLcQFdKQmIB8wyZpY5ER38x08GbwtR2cLA==}
     engines: {node: '>= 14'}
@@ -3043,6 +3168,11 @@ packages:
     resolution: {integrity: sha512-ixiS0nLNNG5jNQzgZJNoUpBKdo9yTYZMGJ+QgT2jmjR7G7+QHRCc4v6LQ3NgE7EBJq+o0ams3waJwkrlBom8Ig==}
     engines: {node: '>=14'}
 
+  are-we-there-yet@2.0.0:
+    resolution: {integrity: sha512-Ci/qENmwHnsYo9xKIcUJN5LeDKdJ6R1Z1j9V/J5wyq8nh/mYPEpIKJbBZXtZjG04HiK7zV/p6Vs9952MrMeUIw==}
+    engines: {node: '>=10'}
+    deprecated: This package is no longer supported.
+
   argparse@2.0.1:
     resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==}
 
@@ -3159,6 +3289,9 @@ packages:
   bindings@1.5.0:
     resolution: {integrity: sha512-p2q/t/mhvuOj/UeLlV6566GD/guowlr0hHxClI0W9m7MWYkL1F0hLo+0Aexs9HSPCtR1SXQ0TD3MMKrXZajbiQ==}
 
+  birpc@2.4.0:
+    resolution: {integrity: sha512-5IdNxTyhXHv2UlgnPHQ0h+5ypVmkrYHzL8QT+DwFZ//2N/oNV8Ch+BCRmTJ3x6/z9Axo/cXYBc9eprsUVK/Jsg==}
+
   birpc@2.6.1:
     resolution: {integrity: sha512-LPnFhlDpdSH6FJhJyn4M0kFO7vtQ5iPw24FnG0y21q09xC7e8+1LeR31S1MAIrDAHp4m7aas4bEkTDTvMAtebQ==}
 
@@ -3246,6 +3379,10 @@ packages:
   caniuse-lite@1.0.30001750:
     resolution: {integrity: sha512-cuom0g5sdX6rw00qOoLNSFCJ9/mYIsuSOA+yzpDw8eopiFqcVwQvZHqov0vmEighRxX++cfC0Vg1G+1Iy/mSpQ==}
 
+  canvas@2.11.2:
+    resolution: {integrity: sha512-ItanGBMrmRV7Py2Z+Xhs7cT+FNt5K0vPL4p9EZ/UX/Mu7hFbkxSjKF2KVtPwX7UYWp7dRKnrTvReflgrItJbdw==}
+    engines: {node: '>=6'}
+
   ccount@2.0.1:
     resolution: {integrity: sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg==}
 
@@ -3291,6 +3428,10 @@ packages:
   chownr@1.1.4:
     resolution: {integrity: sha512-jJ0bqzaylmJtVnNgzTeSOs8DPavpbYgEr/b0YL8/2GO3xJEhInFmhKMUnEJQjZumK7KXGFhUy89PrsJWlakBVg==}
 
+  chownr@2.0.0:
+    resolution: {integrity: sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ==}
+    engines: {node: '>=10'}
+
   chownr@3.0.0:
     resolution: {integrity: sha512-+IxzY9BZOQd/XuYPRmrvEVjF/nqj5kgT4kEq7VofrDoM1MxoRjEWkrCC3EtLi59TVawxTAn+orJwFQcrqEN1+g==}
     engines: {node: '>=18'}
@@ -3352,6 +3493,10 @@ packages:
   color-string@1.9.1:
     resolution: {integrity: sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==}
 
+  color-support@1.1.3:
+    resolution: {integrity: sha512-qiBjkpbMLO/HL68y+lh4q0/O1MZFj2RX6X/KmMa3+gJD3z+WwI1ZzDHysvqHGS3mP6mznPckpXmw1nI9cJjyRg==}
+    hasBin: true
+
   color@4.2.3:
     resolution: {integrity: sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A==}
     engines: {node: '>=12.5.0'}
@@ -3369,6 +3514,10 @@ packages:
   comma-separated-tokens@2.0.3:
     resolution: {integrity: sha512-Fu4hJdvzeylCfQPp9SGWidpzrMs7tTrlu6Vb8XGaRGck8QSNZJJp538Wrb60Lax4fPwR64ViY468OIUTbRlGZg==}
 
+  commander@10.0.1:
+    resolution: {integrity: sha512-y4Mg2tXshplEbSGzx7amzPwKKOCGuoSRP/CjEdwwk0FOGlUbq6lKuoyDZTNZkmxHdJtp54hdfY/JUrdL7Xfdug==}
+    engines: {node: '>=14'}
+
   commander@11.1.0:
     resolution: {integrity: sha512-yPVavfyCcRhmorC7rWlkHn15b4wDVgVmBA7kV4QVBsF7kv/9TKJAbAXVTxvTnwP8HHKjRCJDClKbciiYS7p0DQ==}
     engines: {node: '>=16'}
@@ -3406,10 +3555,16 @@ packages:
   confbox@0.2.2:
     resolution: {integrity: sha512-1NB+BKqhtNipMsov4xI/NnhCKp9XG9NamYp5PVm9klAT0fsrNPjaFICsCFhNhwZJKNh7zB/3q8qXz0E9oaMNtQ==}
 
+  config-chain@1.1.13:
+    resolution: {integrity: sha512-qj+f8APARXHrM0hraqXYb2/bOVSV4PvJQlNZ/DVj0QrmNM2q2euizkeuVckQ57J+W0mRH6Hvi+k50M4Jul2VRQ==}
+
   consola@3.4.2:
     resolution: {integrity: sha512-5IKcdX0nnYavi6G7TtOhwkYzyjfJlatbjMjuLSfE2kYT5pMDOilZ4OvMhi637CcDICTmz3wARPoyhqyX1Y+XvA==}
     engines: {node: ^14.18.0 || >=16.10.0}
 
+  console-control-strings@1.1.0:
+    resolution: {integrity: sha512-ty/fTekppD2fIwRvnZAVdeOiGd1c7YXEixbgJTNzqcxJWKQnjJ/V1bNEEE6hygpM3WjwHFUVK6HTjWSzV4a8sQ==}
+
   convert-gitmoji@0.1.5:
     resolution: {integrity: sha512-4wqOafJdk2tqZC++cjcbGcaJ13BZ3kwldf06PTiAQRAB76Z1KJwZNL1SaRZMi2w1FM9RYTgZ6QErS8NUl/GBmQ==}
 
@@ -3587,6 +3742,10 @@ packages:
   decode-named-character-reference@1.2.0:
     resolution: {integrity: sha512-c6fcElNV6ShtZXmsgNgFFV5tVX2PaV4g+MOAkb8eXHvn6sryJBrZa9r0zV6+dtTyoCKxtDy5tyQ5ZwQuidtd+Q==}
 
+  decompress-response@4.2.1:
+    resolution: {integrity: sha512-jOSne2qbyE+/r8G1VU+G/82LBs2Fs4LAsTiLSHOCOMZQl2OKZ6i8i4IyHemTe+/yIXOtTcRQMzPcgyhoFlqPkw==}
+    engines: {node: '>=8'}
+
   decompress-response@6.0.0:
     resolution: {integrity: sha512-aW35yZM6Bb/4oJlZncMH2LCoZtJXTRxES17vE3hoRiowU2kWHaJKFkSBDnDR+cm9J+9QhXmREyIfv0pji9ejCQ==}
     engines: {node: '>=10'}
@@ -3629,6 +3788,9 @@ packages:
     resolution: {integrity: sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==}
     engines: {node: '>=0.4.0'}
 
+  delegates@1.0.0:
+    resolution: {integrity: sha512-bd2L678uiWATM6m5Z1VzNCErI3jiGzt6HGY8OVICs40JQq/HALfbyNJmp0UDakEY4pMMaN0Ly5om/B1VI/+xfQ==}
+
   denque@2.1.0:
     resolution: {integrity: sha512-HVQE3AAb/pxF8fQAoiqpvg9i3evqug3hoiwakOyZAwJm+6vZehbkYXZ0l4JxS+I3QxM97v5aaRNhj8v5oBhekw==}
     engines: {node: '>=0.10'}
@@ -3711,6 +3873,11 @@ packages:
   eastasianwidth@0.2.0:
     resolution: {integrity: sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==}
 
+  editorconfig@1.0.4:
+    resolution: {integrity: sha512-L9Qe08KWTlqYMVvMcTIvMAdl1cDUubzRNYL+WfA4bLDMHe4nemKkpmYzkznE1FwLKu0EEmy6obgQKzMJrg4x9Q==}
+    engines: {node: '>=14'}
+    hasBin: true
+
   ee-first@1.1.1:
     resolution: {integrity: sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==}
 
@@ -4083,6 +4250,9 @@ packages:
   fflate@0.7.4:
     resolution: {integrity: sha512-5u2V/CDW15QM1XbbgS+0DfPxVB+jUKhWEKuuFuHncbk3tEEqzmoXL+2KyOFuKGqOnmdIy0/davWF1CkuwtibCw==}
 
+  fflate@0.8.2:
+    resolution: {integrity: sha512-cPJU47OaAoCbg0pBvzsgpTPhmhqI5eJjh/JIu8tPj5q+T7iLvW/JAYUqmE7KOB4R1ZyEhzBaIQpQpardBF5z8A==}
+
   figures@6.1.0:
     resolution: {integrity: sha512-d+l3qxjSesT4V7v2fh+QnmFnUWv9lSpjarhShNTgBOfA0ttejbQUAlHLitbjkoRiDulW0OPoQPYIGhIC8ohejg==}
     engines: {node: '>=18'}
@@ -4163,6 +4333,13 @@ packages:
   fs-constants@1.0.0:
     resolution: {integrity: sha512-y6OAwoSIf7FyjMIv94u+b5rdheZEjzR63GTyZJm5qh4Bi+2YgwLCcI/fPFZkL5PSixOt6ZNKm+w+Hfp/Bciwow==}
 
+  fs-minipass@2.1.0:
+    resolution: {integrity: sha512-V/JgOLFCS+R6Vcq0slCuaeWEdNC3ouDlJMNIsacH2VtALiu9mV4LPrHc5cDl8k5aw6J8jwgWWpiTo5RYhmIzvg==}
+    engines: {node: '>= 8'}
+
+  fs.realpath@1.0.0:
+    resolution: {integrity: sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==}
+
   fsevents@2.3.3:
     resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==}
     engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
@@ -4175,6 +4352,11 @@ packages:
     resolution: {integrity: sha512-trLf4SzuuUxfusZADLINj+dE8clK1frKdmqiJNb1Es75fmI5oY6X2mxLVUciLLjxqw/xr72Dhy+lER6dGd02FQ==}
     engines: {node: '>=10'}
 
+  gauge@3.0.2:
+    resolution: {integrity: sha512-+5J6MS/5XksCuXq++uFRsnUd7Ovu1XenbeuIuNRJxYWjgQbPuFhT14lAvsWfqfAmnwluf1OwMjz39HjfLPci0Q==}
+    engines: {node: '>=10'}
+    deprecated: This package is no longer supported.
+
   gensync@1.0.0-beta.2:
     resolution: {integrity: sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==}
     engines: {node: '>=6.9.0'}
@@ -4236,6 +4418,10 @@ packages:
     resolution: {integrity: sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==}
     hasBin: true
 
+  glob@7.2.3:
+    resolution: {integrity: sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==}
+    deprecated: Glob versions prior to v9 are no longer supported
+
   global-directory@4.0.1:
     resolution: {integrity: sha512-wHTUcDUoZ1H5/0iVqEudYW4/kAlN5cZ3j/bXn0Dpbizl9iaUVeWSHqiOjsgk6OW2bkLclbBjzewBz6weQ1zA2Q==}
     engines: {node: '>=18'}
@@ -4289,6 +4475,9 @@ packages:
     resolution: {integrity: sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==}
     engines: {node: '>= 0.4'}
 
+  has-unicode@2.0.1:
+    resolution: {integrity: sha512-8Rf9Y83NBReMnx0gFzA8JImQACstCYWUplepDa9xprwwtmgEZUF0h/i5xSA625zB/I37EtrswSST6OXxwaaIJQ==}
+
   hasown@2.0.2:
     resolution: {integrity: sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==}
     engines: {node: '>= 0.4'}
@@ -4375,6 +4564,10 @@ packages:
     resolution: {integrity: sha512-S9wWkJ/VSY9/k4qcjG318bqJNruzE4HySUhFYknwmu6LBP97KLLfwNf+n4V1BHurvFNkSKLFnK/RsuUnRTf9Vw==}
     engines: {iojs: '>= 1.0.0', node: '>= 0.12.0'}
 
+  https-proxy-agent@5.0.1:
+    resolution: {integrity: sha512-dFcAjpTQFgoLMzC2VwU+C/CbS7uRL0lWmxDITmqm7C+7F0Odmj6s9l6alZc6AELXhrnggM2CeWSXHGOdX2YtwA==}
+    engines: {node: '>= 6'}
+
   https-proxy-agent@7.0.6:
     resolution: {integrity: sha512-vK9P5/iUfdl95AI+JVyUuIcVtd4ofvtrOr3HNtM2yxC9bnMbEdp3x01OhQNnjb8IJYi38VlTE3mBXwcfvywuSw==}
     engines: {node: '>= 14'}
@@ -4427,6 +4620,10 @@ packages:
     resolution: {integrity: sha512-m6FAo/spmsW2Ab2fU35JTYwtOKa2yAwXSwgjSv1TJzh4Mh7mC3lzAOVLBprb72XsTrgkEIsl7YrFNAiDiRhIGg==}
     engines: {node: '>=12'}
 
+  inflight@1.0.6:
+    resolution: {integrity: sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==}
+    deprecated: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.
+
   inherits@2.0.4:
     resolution: {integrity: sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==}
 
@@ -4591,6 +4788,15 @@ packages:
     resolution: {integrity: sha512-9FzQjJ7MATs1tSpnco1K6ayiYE3figslrXA72G2HQ/n76RzvYlofyi5QM+iX4YRs/pu3yzxlVQSST23+dMDknw==}
     engines: {node: '>= 0.6.0'}
 
+  js-beautify@1.15.4:
+    resolution: {integrity: sha512-9/KXeZUKKJwqCXUdBxFJ3vPh467OCckSBmYDwSK/EtV090K+iMJ7zx2S3HLVDIWFQdqMIsZWbnaGiba18aWhaA==}
+    engines: {node: '>=14'}
+    hasBin: true
+
+  js-cookie@3.0.5:
+    resolution: {integrity: sha512-cEiJEAEoIbWfCZYKWhVwFuvPX1gETRYPw6LlaTKoxD3s2AkXzkCjnp6h0V77ozyqj0jakteJ4YqDJT830+lVGw==}
+    engines: {node: '>=14'}
+
   js-tokens@4.0.0:
     resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
 
@@ -4910,6 +5116,10 @@ packages:
   magicast@0.3.5:
     resolution: {integrity: sha512-L0WhttDl+2BOsybvEOLK7fW3UA0OQ0IQ2d6Zl2x/a6vVRs3bAY0ECOSHHeL5jD+SbOpOCUEi0y1DgHEn9Qn1AQ==}
 
+  make-dir@3.1.0:
+    resolution: {integrity: sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==}
+    engines: {node: '>=8'}
+
   markdown-table@3.0.4:
     resolution: {integrity: sha512-wiYz4+JrLyb/DqW2hkFJxP7Vd7JuTDm77fvbM8VfEQdmSMqcImWeeRbHwZjBjIFki/VaMK2BhFi7oUUZeM5bqw==}
 
@@ -5102,6 +5312,10 @@ packages:
     resolution: {integrity: sha512-vqiC06CuhBTUdZH+RYl8sFrL096vA45Ok5ISO6sE/Mr1jRbGH4Csnhi8f3wKVl7x8mO4Au7Ir9D3Oyv1VYMFJw==}
     engines: {node: '>=12'}
 
+  mimic-response@2.1.0:
+    resolution: {integrity: sha512-wXqjST+SLt7R009ySCglWBCFpjUygmCIfD790/kVbiGmUgfYGuB14PiTd5DwVxSV4NcYHjzMkoj5LjQZwTQLEA==}
+    engines: {node: '>=8'}
+
   mimic-response@3.1.0:
     resolution: {integrity: sha512-z0yWI+4FDrrweS8Zmt4Ej5HdJmky15+L2e6Wgn3+iK5fWzb6T3fhNFq2+MeTRb064c6Wr4N/wv0DzQTjNzHNGQ==}
     engines: {node: '>=10'}
@@ -5125,6 +5339,10 @@ packages:
     resolution: {integrity: sha512-lKwV/1brpG6mBUFHtb7NUmtABCb2WZZmm2wNiOA5hAb8VdCS4B3dtMWyvcoViccwAW/COERjXLt0zP1zXUN26g==}
     engines: {node: '>=10'}
 
+  minimatch@9.0.1:
+    resolution: {integrity: sha512-0jWhJpD/MdhPXwPuiRkCbfYfSKp2qnn2eOc279qI7f+osl/l+prKSrvhg157zSYvx/1nmgn2NqdT6k2Z7zSH9w==}
+    engines: {node: '>=16 || 14 >=14.17'}
+
   minimatch@9.0.5:
     resolution: {integrity: sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==}
     engines: {node: '>=16 || 14 >=14.17'}
@@ -5132,10 +5350,22 @@ packages:
   minimist@1.2.8:
     resolution: {integrity: sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==}
 
+  minipass@3.3.6:
+    resolution: {integrity: sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw==}
+    engines: {node: '>=8'}
+
+  minipass@5.0.0:
+    resolution: {integrity: sha512-3FnjYuehv9k6ovOEbyOswadCDPX1piCfhV8ncmYtHOjuPwylVWsghTLo7rabjC3Rx5xD4HDx8Wm1xnMF7S5qFQ==}
+    engines: {node: '>=8'}
+
   minipass@7.1.2:
     resolution: {integrity: sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==}
     engines: {node: '>=16 || 14 >=14.17'}
 
+  minizlib@2.1.2:
+    resolution: {integrity: sha512-bAxsR8BVfj60DWXHE3u30oHzfl4G7khkSuPW+qvpd7jFRHm7dLxOjUk1EHACJ/hxLY8phGJ0YhYHZo7jil7Qdg==}
+    engines: {node: '>= 8'}
+
   minizlib@3.1.0:
     resolution: {integrity: sha512-KZxYo1BUkWD2TVFLr0MQoM8vUUigWD3LlD83a/75BqC+4qE0Hb1Vo5v1FgcfaNXvfXzr+5EhQ6ing/CaBijTlw==}
     engines: {node: '>= 18'}
@@ -5146,6 +5376,11 @@ packages:
   mkdirp-classic@0.5.3:
     resolution: {integrity: sha512-gKLcREMhtuZRwRAfqP3RFW+TK4JqApVBtOIftVgjuABpAtpxhPGaDcfvbhNvD0B8iD1oUr/txX35NjcaY6Ns/A==}
 
+  mkdirp@1.0.4:
+    resolution: {integrity: sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==}
+    engines: {node: '>=10'}
+    hasBin: true
+
   mkdist@2.4.1:
     resolution: {integrity: sha512-Ezk0gi04GJBkqMfsksICU5Rjoemc4biIekwgrONWVPor2EO/N9nBgN6MZXAf7Yw4mDDhrNyKbdETaHNevfumKg==}
     hasBin: true
@@ -5199,6 +5434,9 @@ packages:
   muggle-string@0.4.1:
     resolution: {integrity: sha512-VNTrAak/KhO2i8dqqnqnAHOa3cYBwXEZe9h+D5h/1ZqFSTEFHdM65lR7RoIqq3tBBYavsOXV84NoHXZ0AkPyqQ==}
 
+  nan@2.23.0:
+    resolution: {integrity: sha512-1UxuyYGdoQHcGg87Lkqm3FzefucTa0NAiOcuRsDmysep3c1LVCRK2krrUDafMWtjSG04htvAmvg96+SDknOmgQ==}
+
   nanoid@3.3.11:
     resolution: {integrity: sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==}
     engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
@@ -5279,6 +5517,16 @@ packages:
   node-releases@2.0.23:
     resolution: {integrity: sha512-cCmFDMSm26S6tQSDpBCg/NR8NENrVPhAJSf+XbxBG4rPFaaonlEoE9wHQmun+cls499TQGSb7ZyPBRlzgKfpeg==}
 
+  nopt@5.0.0:
+    resolution: {integrity: sha512-Tbj67rffqceeLpcRXrT7vKAN8CwfPeIBgM7E6iBkmKLV7bEMwpGgYLGv0jACUsECaa/vuxP0IjEont6umdMgtQ==}
+    engines: {node: '>=6'}
+    hasBin: true
+
+  nopt@7.2.1:
+    resolution: {integrity: sha512-taM24ViiimT/XntxbPyJQzCG+p4EKOpgD3mxFwW38mGjVUrfERQOeY4EDHjdnptttfHuHQXFx+lTP08Q+mLa/w==}
+    engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
+    hasBin: true
+
   nopt@8.1.0:
     resolution: {integrity: sha512-ieGu42u/Qsa4TFktmaKEwM6MQH0pOWnaB3htzh0JRtx84+Mebc0cbZYN5bC+6WTZ4+77xrL9Pn5m7CV6VIkV7A==}
     engines: {node: ^18.17.0 || >=20.5.0}
@@ -5300,6 +5548,10 @@ packages:
     resolution: {integrity: sha512-9qny7Z9DsQU8Ou39ERsPU4OZQlSTP47ShQzuKZ6PRXpYLtIFgl/DEBYEXKlvcEa+9tHVcK8CF81Y2V72qaZhWA==}
     engines: {node: '>=18'}
 
+  npmlog@5.0.1:
+    resolution: {integrity: sha512-AqZtDUWOMKs1G/8lwylVjrdYgqA4d9nu8hc+0gzRxlDb1I10+FHBGMXs6aiQHFdCUUlqH99MUMuLfzWDNDtfxw==}
+    deprecated: This package is no longer supported.
+
   nth-check@2.1.1:
     resolution: {integrity: sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==}
 
@@ -5343,6 +5595,10 @@ packages:
     engines: {node: ^14.16.0 || >=16.10.0}
     hasBin: true
 
+  object-assign@4.1.1:
+    resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==}
+    engines: {node: '>=0.10.0'}
+
   object-inspect@1.13.4:
     resolution: {integrity: sha512-W67iLl4J2EXEGTbfeHCffrjDfitvLANg0UlX3wFUUSTx92KXRFegMHUVgSqE+wvhAbi4WqjGg9czysTV2Epbew==}
     engines: {node: '>= 0.4'}
@@ -5464,6 +5720,10 @@ packages:
     resolution: {integrity: sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==}
     engines: {node: '>=8'}
 
+  path-is-absolute@1.0.1:
+    resolution: {integrity: sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==}
+    engines: {node: '>=0.10.0'}
+
   path-key@3.1.1:
     resolution: {integrity: sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==}
     engines: {node: '>=8'}
@@ -5750,6 +6010,9 @@ packages:
   property-information@7.1.0:
     resolution: {integrity: sha512-TwEZ+X+yCJmYfL7TPUOcvBZ4QfoT5YenQiJuX//0th53DE6w0xxLEtfK3iyryQFddXuvkIk51EEgrJQ0WJkOmQ==}
 
+  proto-list@1.2.4:
+    resolution: {integrity: sha512-vtK/94akxsTMhe0/cbfpR+syPuszcuwhqVjJq26CuNDgFGj682oRBXOP5MJpv2r7JtE8MsiepGIqvvOTBwn2vA==}
+
   protocols@2.0.2:
     resolution: {integrity: sha512-hHVTzba3wboROl0/aWRRG9dMytgH6ow//STBZh43l/wQgmMhYhOFi0EHWAPtoCz9IAUymsyP0TSBHkhgMEGNnQ==}
 
@@ -5894,6 +6157,9 @@ packages:
     resolution: {integrity: sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==}
     engines: {node: '>=0.10.0'}
 
+  resemblejs@5.0.0:
+    resolution: {integrity: sha512-+B0eP9k9VDP/YhBbH+ZdYmHiotdtuc6blVI+h8wwkY2cOow+uiIpSmgkBBBtrEAL0D31/gR/AJPwDeX5TcwmIA==}
+
   resolve-from@4.0.0:
     resolution: {integrity: sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==}
     engines: {node: '>=4'}
@@ -5920,6 +6186,11 @@ packages:
   rfdc@1.4.1:
     resolution: {integrity: sha512-q1b3N5QkRUWUl7iyylaaj3kOpIT0N2i9MqIEQXP73GVsN9cw3fdx8X63cEmWhJGi2PPCF23Ijp7ktmd39rawIA==}
 
+  rimraf@3.0.2:
+    resolution: {integrity: sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==}
+    deprecated: Rimraf versions prior to v4 are no longer supported
+    hasBin: true
+
   rollup-plugin-dts@6.2.3:
     resolution: {integrity: sha512-UgnEsfciXSPpASuOelix7m4DrmyQgiaWBnvI0TM4GxuDh5FkqW8E5hu57bCxXB90VvR1WNfLV80yEDN18UogSA==}
     engines: {node: '>=16'}
@@ -6002,6 +6273,9 @@ packages:
     resolution: {integrity: sha512-61g9pCh0Vnh7IutZjtLGGpTA355+OPn2TyDv/6ivP2h/AdAVX9azsoxmg2/M6nZeQZNYBEwIcsne1mJd9oQItQ==}
     engines: {node: '>= 18'}
 
+  set-blocking@2.0.0:
+    resolution: {integrity: sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw==}
+
   setprototypeof@1.2.0:
     resolution: {integrity: sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==}
 
@@ -6047,6 +6321,9 @@ packages:
   siginfo@2.0.0:
     resolution: {integrity: sha512-ybx0WO1/8bSBLEWXZvEd7gMW3Sn3JFlW3TvX1nREbDLRNQNaeNN8WK0meBwPdAaOI7TtRRRJn/Es1zhrrCHu7g==}
 
+  signal-exit@3.0.7:
+    resolution: {integrity: sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==}
+
   signal-exit@4.1.0:
     resolution: {integrity: sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==}
     engines: {node: '>=14'}
@@ -6054,6 +6331,9 @@ packages:
   simple-concat@1.0.1:
     resolution: {integrity: sha512-cSFtAPtRhljv69IK0hTVZQ+OfE9nePi/rtJmw5UjHeVyVroEqJXP1sFztKUy1qU+xvz3u/sfYJLa947b7nAN2Q==}
 
+  simple-get@3.1.1:
+    resolution: {integrity: sha512-CQ5LTKGfCpvE1K0n2us+kuMPbk/q0EKl82s4aheV9oXjFEz6W/Y7oQFVJuU6QG77hRT4Ghb5RURteF5vnWjupA==}
+
   simple-get@4.0.1:
     resolution: {integrity: sha512-brv7p5WgH0jmQJr1ZDDfKDOSeWWg+OVypG99A/5vYGPqJ6pxiaHLy8nxtFjBA7oMa01ebA9gfh1uMCFqOuXxvA==}
 
@@ -6312,6 +6592,10 @@ packages:
   tar-stream@3.1.7:
     resolution: {integrity: sha512-qJj60CXt7IU1Ffyc3NJMjh6EkuCFej46zUqJ4J7pqYlThyd9bO0XBTmcOIhSzZJVWfsLks0+nle/j538YAW9RQ==}
 
+  tar@6.2.1:
+    resolution: {integrity: sha512-DZ4yORTwrbTj/7MZYq2w+/ZFdI6OZ/f9SFHR+71gIVUZhOQPHzVCLpvRnPgyaMpfWxxk/4ONva3GQSyNIKRv6A==}
+    engines: {node: '>=10'}
+
   tar@7.5.1:
     resolution: {integrity: sha512-nlGpxf+hv0v7GkWBK2V9spgactGOp0qvfWRxUMjqHyzrt3SgwE48DIv/FhqPHJYLHpgW1opq3nERbz5Anq7n1g==}
     engines: {node: '>=18'}
@@ -6351,6 +6635,10 @@ packages:
     resolution: {integrity: sha512-op4nsTR47R6p0vMUUoYl/a+ljLFVtlfaXkLQmqfLR1qHma1h/ysYk4hEXZ880bf2CYgTskvTa/e196Vd5dDQXw==}
     engines: {node: '>=14.0.0'}
 
+  tinyrainbow@3.0.3:
+    resolution: {integrity: sha512-PSkbLUoxOFRzJYjjxHJt9xro7D+iilgMX/C9lawzVuYiIdcihh9DXmVibBe8lmcFrRi/VzlPjBxbN7rH24q8/Q==}
+    engines: {node: '>=14.0.0'}
+
   tinyspy@4.0.4:
     resolution: {integrity: sha512-azl+t0z7pw/z958Gy9svOTuzqIk6xq+NSheJzn5MMWtWTFywIacg2wUlzKFGtt3cthx0r2SxMK0yzJOR0IES7Q==}
     engines: {node: '>=14.0.0'}
@@ -6929,6 +7217,9 @@ packages:
     engines: {node: '>=8'}
     hasBin: true
 
+  wide-align@1.1.5:
+    resolution: {integrity: sha512-eDMORYaPNZ4sQIuuYPDHdQvf4gyCF9rEEV/yPxGfwPkRodwEgiMUUXTx/dex+Me0wxx53S+NgUHaP7y3MGlDmg==}
+
   word-wrap@1.2.5:
     resolution: {integrity: sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==}
     engines: {node: '>=0.10.0'}
@@ -7019,6 +7310,9 @@ packages:
   yallist@3.1.1:
     resolution: {integrity: sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==}
 
+  yallist@4.0.0:
+    resolution: {integrity: sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==}
+
   yallist@5.0.0:
     resolution: {integrity: sha512-YgvUTfwqyc7UXVMrB+SImsVYSmTS8X/tSrtdNZMImM+n7+QTriRXyXim0mBrTXNeqzVF0KWGgHPeiyViFFrNDw==}
     engines: {node: '>=18'}
@@ -7921,6 +8215,22 @@ snapshots:
     dependencies:
       '@lezer/common': 1.2.3
 
+  '@mapbox/node-pre-gyp@1.0.11':
+    dependencies:
+      detect-libc: 2.1.2
+      https-proxy-agent: 5.0.1
+      make-dir: 3.1.0
+      node-fetch: 2.7.0
+      nopt: 5.0.0
+      npmlog: 5.0.1
+      rimraf: 3.0.2
+      semver: 7.7.3
+      tar: 6.2.1
+    transitivePeerDependencies:
+      - encoding
+      - supports-color
+    optional: true
+
   '@mapbox/node-pre-gyp@2.0.0':
     dependencies:
       consola: 3.4.2
@@ -8437,7 +8747,43 @@ snapshots:
     transitivePeerDependencies:
       - magicast
 
-  '@nuxt/test-utils@3.20.1(happy-dom@17.6.3)(magicast@0.3.5)(playwright-core@1.56.0)(typescript@5.9.3)(vitest@3.2.4(@types/debug@4.1.12)(@types/node@22.18.12)(happy-dom@17.6.3)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.0)(yaml@2.8.1))':
+  '@nuxt/test-utils@3.20.1(@vitest/ui@4.0.6)(@vue/test-utils@2.4.6)(happy-dom@17.6.3)(magicast@0.3.5)(playwright-core@1.56.0)(typescript@5.9.3)(vitest@3.2.4)':
+    dependencies:
+      '@nuxt/kit': 4.2.0(magicast@0.3.5)
+      c12: 3.3.1(magicast@0.3.5)
+      consola: 3.4.2
+      defu: 6.1.4
+      destr: 2.0.5
+      estree-walker: 3.0.3
+      fake-indexeddb: 6.2.4
+      get-port-please: 3.2.0
+      h3: 1.15.4
+      local-pkg: 1.1.2
+      magic-string: 0.30.21
+      node-fetch-native: 1.6.7
+      node-mock-http: 1.0.3
+      ofetch: 1.4.1
+      pathe: 2.0.3
+      perfect-debounce: 2.0.0
+      radix3: 1.1.2
+      scule: 1.3.0
+      std-env: 3.10.0
+      tinyexec: 1.0.1
+      ufo: 1.6.1
+      unplugin: 2.3.10
+      vitest-environment-nuxt: 1.0.1(@vitest/ui@4.0.6)(@vue/test-utils@2.4.6)(happy-dom@17.6.3)(magicast@0.3.5)(playwright-core@1.56.0)(typescript@5.9.3)(vitest@3.2.4)
+      vue: 3.5.22(typescript@5.9.3)
+    optionalDependencies:
+      '@vitest/ui': 4.0.6(vitest@3.2.4)
+      '@vue/test-utils': 2.4.6
+      happy-dom: 17.6.3
+      playwright-core: 1.56.0
+      vitest: 3.2.4(@types/debug@4.1.12)(@types/node@22.18.12)(@vitest/ui@4.0.6)(happy-dom@17.6.3)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.0)(yaml@2.8.1)
+    transitivePeerDependencies:
+      - magicast
+      - typescript
+
+  '@nuxt/test-utils@3.20.1(@vue/test-utils@2.4.6)(happy-dom@17.6.3)(magicast@0.3.5)(playwright-core@1.56.0)(typescript@5.9.3)(vitest@3.2.4(@types/debug@4.1.12)(@types/node@22.18.12)(happy-dom@17.6.3)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.0)(yaml@2.8.1))':
     dependencies:
       '@nuxt/kit': 4.2.0(magicast@0.3.5)
       c12: 3.3.1(magicast@0.3.5)
@@ -8461,12 +8807,13 @@ snapshots:
       tinyexec: 1.0.1
       ufo: 1.6.1
       unplugin: 2.3.10
-      vitest-environment-nuxt: 1.0.1(happy-dom@17.6.3)(magicast@0.3.5)(playwright-core@1.56.0)(typescript@5.9.3)(vitest@3.2.4(@types/debug@4.1.12)(@types/node@22.18.12)(happy-dom@17.6.3)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.0)(yaml@2.8.1))
+      vitest-environment-nuxt: 1.0.1(@vue/test-utils@2.4.6)(happy-dom@17.6.3)(magicast@0.3.5)(playwright-core@1.56.0)(typescript@5.9.3)(vitest@3.2.4(@types/debug@4.1.12)(@types/node@22.18.12)(happy-dom@17.6.3)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.0)(yaml@2.8.1))
       vue: 3.5.22(typescript@5.9.3)
     optionalDependencies:
+      '@vue/test-utils': 2.4.6
       happy-dom: 17.6.3
       playwright-core: 1.56.0
-      vitest: 3.2.4(@types/debug@4.1.12)(@types/node@22.18.12)(happy-dom@17.6.3)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.0)(yaml@2.8.1)
+      vitest: 3.2.4(@types/debug@4.1.12)(@types/node@22.18.12)(@vitest/ui@4.0.6)(happy-dom@17.6.3)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.0)(yaml@2.8.1)
     transitivePeerDependencies:
       - magicast
       - typescript
@@ -8726,6 +9073,8 @@ snapshots:
       - magicast
       - supports-color
 
+  '@one-ini/wasm@0.1.1': {}
+
   '@opentelemetry/api@1.9.0': {}
 
   '@oxc-minify/binding-android-arm64@0.95.0':
@@ -9454,6 +9803,8 @@ snapshots:
 
   '@types/path-browserify@1.0.3': {}
 
+  '@types/resemblejs@4.1.3': {}
+
   '@types/resolve@1.20.2': {}
 
   '@types/superagent@8.1.9':
@@ -9720,6 +10071,10 @@ snapshots:
     dependencies:
       tinyrainbow: 2.0.0
 
+  '@vitest/pretty-format@4.0.6':
+    dependencies:
+      tinyrainbow: 3.0.3
+
   '@vitest/runner@3.2.4':
     dependencies:
       '@vitest/utils': 3.2.4
@@ -9736,12 +10091,37 @@ snapshots:
     dependencies:
       tinyspy: 4.0.4
 
+  '@vitest/ui@4.0.6(vitest@3.2.4)':
+    dependencies:
+      '@vitest/utils': 4.0.6
+      fflate: 0.8.2
+      flatted: 3.3.3
+      pathe: 2.0.3
+      sirv: 3.0.2
+      tinyglobby: 0.2.15
+      tinyrainbow: 3.0.3
+      vitest: 3.2.4(@types/debug@4.1.12)(@types/node@22.18.12)(@vitest/ui@4.0.6)(happy-dom@17.6.3)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.0)(yaml@2.8.1)
+
   '@vitest/utils@3.2.4':
     dependencies:
       '@vitest/pretty-format': 3.2.4
       loupe: 3.2.1
       tinyrainbow: 2.0.0
 
+  '@vitest/utils@4.0.6':
+    dependencies:
+      '@vitest/pretty-format': 4.0.6
+      tinyrainbow: 3.0.3
+
+  '@vitest/ws-client@3.2.4':
+    dependencies:
+      birpc: 2.4.0
+      flatted: 3.3.3
+      ws: 8.18.3
+    transitivePeerDependencies:
+      - bufferutil
+      - utf-8-validate
+
   '@volar/language-core@2.4.15':
     dependencies:
       '@volar/source-map': 2.4.15
@@ -9943,6 +10323,11 @@ snapshots:
 
   '@vue/shared@3.5.22': {}
 
+  '@vue/test-utils@2.4.6':
+    dependencies:
+      js-beautify: 1.15.4
+      vue-component-type-helpers: 2.2.12
+
   '@vue/tsconfig@0.8.1(typescript@5.9.3)(vue@3.5.22(typescript@5.9.3))':
     optionalDependencies:
       typescript: 5.9.3
@@ -10008,6 +10393,11 @@ snapshots:
 
   '@webcontainer/env@1.1.1': {}
 
+  abbrev@1.1.1:
+    optional: true
+
+  abbrev@2.0.0: {}
+
   abbrev@3.0.1: {}
 
   abort-controller@3.0.0:
@@ -10028,6 +10418,13 @@ snapshots:
 
   acorn@8.15.0: {}
 
+  agent-base@6.0.2:
+    dependencies:
+      debug: 4.4.3
+    transitivePeerDependencies:
+      - supports-color
+    optional: true
+
   agent-base@7.1.4: {}
 
   ai@5.0.80(zod@4.1.12):
@@ -10073,6 +10470,9 @@ snapshots:
       normalize-path: 3.0.0
       picomatch: 2.3.1
 
+  aproba@2.1.0:
+    optional: true
+
   archiver-utils@5.0.2:
     dependencies:
       glob: 10.4.5
@@ -10098,6 +10498,12 @@ snapshots:
 
   are-docs-informative@0.0.2: {}
 
+  are-we-there-yet@2.0.0:
+    dependencies:
+      delegates: 1.0.0
+      readable-stream: 3.6.2
+    optional: true
+
   argparse@2.0.1: {}
 
   aria-hidden@1.2.6:
@@ -10196,6 +10602,8 @@ snapshots:
     dependencies:
       file-uri-to-path: 1.0.0
 
+  birpc@2.4.0: {}
+
   birpc@2.6.1: {}
 
   bl@4.1.0:
@@ -10297,6 +10705,16 @@ snapshots:
 
   caniuse-lite@1.0.30001750: {}
 
+  canvas@2.11.2:
+    dependencies:
+      '@mapbox/node-pre-gyp': 1.0.11
+      nan: 2.23.0
+      simple-get: 3.1.1
+    transitivePeerDependencies:
+      - encoding
+      - supports-color
+    optional: true
+
   ccount@2.0.1: {}
 
   chai@5.3.3:
@@ -10350,6 +10768,9 @@ snapshots:
 
   chownr@1.1.4: {}
 
+  chownr@2.0.0:
+    optional: true
+
   chownr@3.0.0: {}
 
   chrome-launcher@1.2.1:
@@ -10413,6 +10834,9 @@ snapshots:
       color-name: 1.1.4
       simple-swizzle: 0.2.4
 
+  color-support@1.1.3:
+    optional: true
+
   color@4.2.3:
     dependencies:
       color-convert: 2.0.1
@@ -10428,6 +10852,8 @@ snapshots:
 
   comma-separated-tokens@2.0.3: {}
 
+  commander@10.0.1: {}
+
   commander@11.1.0: {}
 
   commander@2.20.3: {}
@@ -10457,8 +10883,16 @@ snapshots:
 
   confbox@0.2.2: {}
 
+  config-chain@1.1.13:
+    dependencies:
+      ini: 1.3.8
+      proto-list: 1.2.4
+
   consola@3.4.2: {}
 
+  console-control-strings@1.1.0:
+    optional: true
+
   convert-gitmoji@0.1.5: {}
 
   convert-source-map@2.0.0: {}
@@ -10625,6 +11059,11 @@ snapshots:
     dependencies:
       character-entities: 2.0.2
 
+  decompress-response@4.2.1:
+    dependencies:
+      mimic-response: 2.1.0
+    optional: true
+
   decompress-response@6.0.0:
     dependencies:
       mimic-response: 3.1.0
@@ -10652,6 +11091,9 @@ snapshots:
 
   delayed-stream@1.0.0: {}
 
+  delegates@1.0.0:
+    optional: true
+
   denque@2.1.0: {}
 
   depd@2.0.0: {}
@@ -10719,6 +11161,13 @@ snapshots:
 
   eastasianwidth@0.2.0: {}
 
+  editorconfig@1.0.4:
+    dependencies:
+      '@one-ini/wasm': 0.1.1
+      commander: 10.0.1
+      minimatch: 9.0.1
+      semver: 7.7.3
+
   ee-first@1.1.1: {}
 
   electron-to-chromium@1.5.234: {}
@@ -11165,6 +11614,8 @@ snapshots:
 
   fflate@0.7.4: {}
 
+  fflate@0.8.2: {}
+
   figures@6.1.0:
     dependencies:
       is-unicode-supported: 2.1.0
@@ -11257,6 +11708,14 @@ snapshots:
 
   fs-constants@1.0.0: {}
 
+  fs-minipass@2.1.0:
+    dependencies:
+      minipass: 3.3.6
+    optional: true
+
+  fs.realpath@1.0.0:
+    optional: true
+
   fsevents@2.3.3:
     optional: true
 
@@ -11264,6 +11723,19 @@ snapshots:
 
   fuse.js@7.1.0: {}
 
+  gauge@3.0.2:
+    dependencies:
+      aproba: 2.1.0
+      color-support: 1.1.3
+      console-control-strings: 1.1.0
+      has-unicode: 2.0.1
+      object-assign: 4.1.1
+      signal-exit: 3.0.7
+      string-width: 4.2.3
+      strip-ansi: 6.0.1
+      wide-align: 1.1.5
+    optional: true
+
   gensync@1.0.0-beta.2: {}
 
   get-caller-file@2.0.5: {}
@@ -11340,6 +11812,16 @@ snapshots:
       package-json-from-dist: 1.0.1
       path-scurry: 1.11.1
 
+  glob@7.2.3:
+    dependencies:
+      fs.realpath: 1.0.0
+      inflight: 1.0.6
+      inherits: 2.0.4
+      minimatch: 3.1.2
+      once: 1.4.0
+      path-is-absolute: 1.0.1
+    optional: true
+
   global-directory@4.0.1:
     dependencies:
       ini: 4.1.1
@@ -11394,6 +11876,9 @@ snapshots:
     dependencies:
       has-symbols: 1.1.0
 
+  has-unicode@2.0.1:
+    optional: true
+
   hasown@2.0.2:
     dependencies:
       function-bind: 1.1.2
@@ -11562,6 +12047,14 @@ snapshots:
 
   http-shutdown@1.2.2: {}
 
+  https-proxy-agent@5.0.1:
+    dependencies:
+      agent-base: 6.0.2
+      debug: 4.4.3
+    transitivePeerDependencies:
+      - supports-color
+    optional: true
+
   https-proxy-agent@7.0.6:
     dependencies:
       agent-base: 7.1.4
@@ -11604,6 +12097,12 @@ snapshots:
 
   indent-string@5.0.0: {}
 
+  inflight@1.0.6:
+    dependencies:
+      once: 1.4.0
+      wrappy: 1.0.2
+    optional: true
+
   inherits@2.0.4: {}
 
   ini@1.3.8: {}
@@ -11775,6 +12274,16 @@ snapshots:
 
   jmespath@0.16.0: {}
 
+  js-beautify@1.15.4:
+    dependencies:
+      config-chain: 1.1.13
+      editorconfig: 1.0.4
+      glob: 10.4.5
+      js-cookie: 3.0.5
+      nopt: 7.2.1
+
+  js-cookie@3.0.5: {}
+
   js-tokens@4.0.0: {}
 
   js-tokens@9.0.1: {}
@@ -12052,6 +12561,11 @@ snapshots:
       '@babel/types': 7.28.4
       source-map-js: 1.2.1
 
+  make-dir@3.1.0:
+    dependencies:
+      semver: 6.3.1
+    optional: true
+
   markdown-table@3.0.4: {}
 
   marky@1.3.0: {}
@@ -12403,6 +12917,9 @@ snapshots:
 
   mimic-fn@4.0.0: {}
 
+  mimic-response@2.1.0:
+    optional: true
+
   mimic-response@3.1.0: {}
 
   miniflare@4.20251011.1:
@@ -12437,14 +12954,32 @@ snapshots:
     dependencies:
       brace-expansion: 2.0.2
 
+  minimatch@9.0.1:
+    dependencies:
+      brace-expansion: 2.0.2
+
   minimatch@9.0.5:
     dependencies:
       brace-expansion: 2.0.2
 
   minimist@1.2.8: {}
 
+  minipass@3.3.6:
+    dependencies:
+      yallist: 4.0.0
+    optional: true
+
+  minipass@5.0.0:
+    optional: true
+
   minipass@7.1.2: {}
 
+  minizlib@2.1.2:
+    dependencies:
+      minipass: 3.3.6
+      yallist: 4.0.0
+    optional: true
+
   minizlib@3.1.0:
     dependencies:
       minipass: 7.1.2
@@ -12453,6 +12988,9 @@ snapshots:
 
   mkdirp-classic@0.5.3: {}
 
+  mkdirp@1.0.4:
+    optional: true
+
   mkdist@2.4.1(typescript@5.9.3)(vue-sfc-transformer@0.1.17(@vue/compiler-core@3.5.22)(esbuild@0.25.11)(vue@3.5.22(typescript@5.9.3)))(vue-tsc@2.2.12(typescript@5.9.3))(vue@3.5.22(typescript@5.9.3)):
     dependencies:
       autoprefixer: 10.4.21(postcss@8.5.6)
@@ -12509,6 +13047,9 @@ snapshots:
 
   muggle-string@0.4.1: {}
 
+  nan@2.23.0:
+    optional: true
+
   nanoid@3.3.11: {}
 
   nanoid@5.1.6: {}
@@ -12661,6 +13202,15 @@ snapshots:
 
   node-releases@2.0.23: {}
 
+  nopt@5.0.0:
+    dependencies:
+      abbrev: 1.1.1
+    optional: true
+
+  nopt@7.2.1:
+    dependencies:
+      abbrev: 2.0.0
+
   nopt@8.1.0:
     dependencies:
       abbrev: 3.0.1
@@ -12678,6 +13228,14 @@ snapshots:
       path-key: 4.0.0
       unicorn-magic: 0.3.0
 
+  npmlog@5.0.1:
+    dependencies:
+      are-we-there-yet: 2.0.0
+      console-control-strings: 1.1.0
+      gauge: 3.0.2
+      set-blocking: 2.0.0
+    optional: true
+
   nth-check@2.1.1:
     dependencies:
       boolbase: 1.0.0
@@ -12896,6 +13454,9 @@ snapshots:
       pkg-types: 2.3.0
       tinyexec: 1.0.1
 
+  object-assign@4.1.1:
+    optional: true
+
   object-inspect@1.13.4: {}
 
   ofetch@1.4.1:
@@ -13075,6 +13636,9 @@ snapshots:
 
   path-exists@4.0.0: {}
 
+  path-is-absolute@1.0.1:
+    optional: true
+
   path-key@3.1.1: {}
 
   path-key@4.0.0: {}
@@ -13332,6 +13896,8 @@ snapshots:
 
   property-information@7.1.0: {}
 
+  proto-list@1.2.4: {}
+
   protocols@2.0.2: {}
 
   pump@3.0.3:
@@ -13586,6 +14152,13 @@ snapshots:
 
   require-from-string@2.0.2: {}
 
+  resemblejs@5.0.0:
+    optionalDependencies:
+      canvas: 2.11.2
+    transitivePeerDependencies:
+      - encoding
+      - supports-color
+
   resolve-from@4.0.0: {}
 
   resolve-from@5.0.0: {}
@@ -13604,6 +14177,11 @@ snapshots:
 
   rfdc@1.4.1: {}
 
+  rimraf@3.0.2:
+    dependencies:
+      glob: 7.2.3
+    optional: true
+
   rollup-plugin-dts@6.2.3(rollup@4.52.5)(typescript@5.9.3):
     dependencies:
       magic-string: 0.30.21
@@ -13726,6 +14304,9 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  set-blocking@2.0.0:
+    optional: true
+
   setprototypeof@1.2.0: {}
 
   sharp@0.32.6:
@@ -13819,10 +14400,20 @@ snapshots:
 
   siginfo@2.0.0: {}
 
+  signal-exit@3.0.7:
+    optional: true
+
   signal-exit@4.1.0: {}
 
   simple-concat@1.0.1: {}
 
+  simple-get@3.1.1:
+    dependencies:
+      decompress-response: 4.2.1
+      once: 1.4.0
+      simple-concat: 1.0.1
+    optional: true
+
   simple-get@4.0.1:
     dependencies:
       decompress-response: 6.0.0
@@ -14120,6 +14711,16 @@ snapshots:
       - bare-abort-controller
       - react-native-b4a
 
+  tar@6.2.1:
+    dependencies:
+      chownr: 2.0.0
+      fs-minipass: 2.1.0
+      minipass: 5.0.0
+      minizlib: 2.1.2
+      mkdirp: 1.0.4
+      yallist: 4.0.0
+    optional: true
+
   tar@7.5.1:
     dependencies:
       '@isaacs/fs-minipass': 4.0.1
@@ -14160,6 +14761,8 @@ snapshots:
 
   tinyrainbow@2.0.0: {}
 
+  tinyrainbow@3.0.3: {}
+
   tinyspy@4.0.4: {}
 
   to-regex-range@5.0.1:
@@ -14685,9 +15288,9 @@ snapshots:
       terser: 5.44.0
       yaml: 2.8.1
 
-  vitest-environment-nuxt@1.0.1(happy-dom@17.6.3)(magicast@0.3.5)(playwright-core@1.56.0)(typescript@5.9.3)(vitest@3.2.4(@types/debug@4.1.12)(@types/node@22.18.12)(happy-dom@17.6.3)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.0)(yaml@2.8.1)):
+  vitest-environment-nuxt@1.0.1(@vitest/ui@4.0.6)(@vue/test-utils@2.4.6)(happy-dom@17.6.3)(magicast@0.3.5)(playwright-core@1.56.0)(typescript@5.9.3)(vitest@3.2.4):
     dependencies:
-      '@nuxt/test-utils': 3.20.1(happy-dom@17.6.3)(magicast@0.3.5)(playwright-core@1.56.0)(typescript@5.9.3)(vitest@3.2.4(@types/debug@4.1.12)(@types/node@22.18.12)(happy-dom@17.6.3)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.0)(yaml@2.8.1))
+      '@nuxt/test-utils': 3.20.1(@vitest/ui@4.0.6)(@vue/test-utils@2.4.6)(happy-dom@17.6.3)(magicast@0.3.5)(playwright-core@1.56.0)(typescript@5.9.3)(vitest@3.2.4)
     transitivePeerDependencies:
       - '@cucumber/cucumber'
       - '@jest/globals'
@@ -14702,7 +15305,24 @@ snapshots:
       - typescript
       - vitest
 
-  vitest@3.2.4(@types/debug@4.1.12)(@types/node@22.18.12)(happy-dom@17.6.3)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.0)(yaml@2.8.1):
+  vitest-environment-nuxt@1.0.1(@vue/test-utils@2.4.6)(happy-dom@17.6.3)(magicast@0.3.5)(playwright-core@1.56.0)(typescript@5.9.3)(vitest@3.2.4(@types/debug@4.1.12)(@types/node@22.18.12)(happy-dom@17.6.3)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.0)(yaml@2.8.1)):
+    dependencies:
+      '@nuxt/test-utils': 3.20.1(@vue/test-utils@2.4.6)(happy-dom@17.6.3)(magicast@0.3.5)(playwright-core@1.56.0)(typescript@5.9.3)(vitest@3.2.4(@types/debug@4.1.12)(@types/node@22.18.12)(happy-dom@17.6.3)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.0)(yaml@2.8.1))
+    transitivePeerDependencies:
+      - '@cucumber/cucumber'
+      - '@jest/globals'
+      - '@playwright/test'
+      - '@testing-library/vue'
+      - '@vitest/ui'
+      - '@vue/test-utils'
+      - happy-dom
+      - jsdom
+      - magicast
+      - playwright-core
+      - typescript
+      - vitest
+
+  vitest@3.2.4(@types/debug@4.1.12)(@types/node@22.18.12)(@vitest/ui@4.0.6)(happy-dom@17.6.3)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.0)(yaml@2.8.1):
     dependencies:
       '@types/chai': 5.2.2
       '@vitest/expect': 3.2.4
@@ -14730,6 +15350,7 @@ snapshots:
     optionalDependencies:
       '@types/debug': 4.1.12
       '@types/node': 22.18.12
+      '@vitest/ui': 4.0.6(vitest@3.2.4)
       happy-dom: 17.6.3
     transitivePeerDependencies:
       - jiti
@@ -14850,6 +15471,11 @@ snapshots:
       siginfo: 2.0.0
       stackback: 0.0.2
 
+  wide-align@1.1.5:
+    dependencies:
+      string-width: 4.2.3
+    optional: true
+
   word-wrap@1.2.5: {}
 
   workerd@1.20251011.0:
@@ -14915,6 +15541,9 @@ snapshots:
 
   yallist@3.1.1: {}
 
+  yallist@4.0.0:
+    optional: true
+
   yallist@5.0.0: {}
 
   yaml@2.8.1: {}
diff --git a/vitest.config.ts b/vitest.config.ts
index 49584cba..9ed2bcc1 100644
--- a/vitest.config.ts
+++ b/vitest.config.ts
@@ -4,9 +4,6 @@ export default defineConfig({
   test: {
     projects: [
       'packages/*'
-    ],
-    env: {
-      COMPODIUM_TEST: 'true'
-    }
+    ]
   }
 })