up

Merge branch 'v3' into docs/ai-search
chore(deps): update @nuxt/ui-pro
2026-01-15 20:48:12 +01:00 · 2025-05-15 16:48:25 +02:00 · 2025-05-15 16:47:37 +02:00 · 2025-05-15 15:57:54 +02:00 · 2025-05-15 15:42:25 +02:00 · 2025-05-15 15:30:02 +02:00
47 changed files with 1946 additions and 1817 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,46 @@
 # Changelog

+## [3.1.2](https://github.com/nuxt/ui/compare/v3.1.1...v3.1.2) (2025-05-15)
+
+### Features
+
+* **Badge:** add `square` prop ([#4008](https://github.com/nuxt/ui/issues/4008)) ([894e8a6](https://github.com/nuxt/ui/commit/894e8a61b6fea3618fc863bd77678385e9d021c2))
+* **CheckboxGroup:** add `table` variant ([#3997](https://github.com/nuxt/ui/issues/3997)) ([1b6ab27](https://github.com/nuxt/ui/commit/1b6ab271ea3875a7c77ffe9367c7c341083dd53c))
+* **components:** add `ui` field in items ([#4060](https://github.com/nuxt/ui/issues/4060)) ([b9adc83](https://github.com/nuxt/ui/commit/b9adc83e787db02507e6e7bb1aabc684eccc197b))
+* **InputNumber:** add `increment-disabled` / `decrement-disabled` props ([#4141](https://github.com/nuxt/ui/issues/4141)) ([c7fba2e](https://github.com/nuxt/ui/commit/c7fba2e0ebfb7153f3bfb727165d653bbd3dbe54))
+* **locale:** add Slovenian language ([#4140](https://github.com/nuxt/ui/issues/4140)) ([e86dc79](https://github.com/nuxt/ui/commit/e86dc79e51b2773a77ada5f12d4f0964fbc83354))
+* **NavigationMenu:** add `collapsible` field in items ([2be60cd](https://github.com/nuxt/ui/commit/2be60cddfe10fd1e2466900fd53e21ee0c877227)), closes [#3353](https://github.com/nuxt/ui/issues/3353) [#3911](https://github.com/nuxt/ui/issues/3911)
+* **NavigationMenu:** handle `tooltip` in items ([46c2987](https://github.com/nuxt/ui/commit/46c2987ebfd30b2b071a96a745b7270e852e96de)), closes [#4050](https://github.com/nuxt/ui/issues/4050)
+* **Slider:** handle `tooltip` around thumbs ([d140acc](https://github.com/nuxt/ui/commit/d140acc608c6ae11c0a0531fe443588776ea7807)), closes [#1469](https://github.com/nuxt/ui/issues/1469)
+* **Toast:** add `progress` prop to hide progress bar ([#4125](https://github.com/nuxt/ui/issues/4125)) ([92632e9](https://github.com/nuxt/ui/commit/92632e969eaa11521a166e50e346753929b7f523))
+
+### Bug Fixes
+
+* **Badge/Button:** handle zero value in label correctly ([#4108](https://github.com/nuxt/ui/issues/4108)) ([f244d15](https://github.com/nuxt/ui/commit/f244d15b96d97cd8ba34ba9c18f23965e17e3cef))
+* **ButtonGroup:** add `z-index` on focused element ([204953b](https://github.com/nuxt/ui/commit/204953b780bde08dbfde230fc8887674449227b7))
+* **Calendar:** wrong color for today date with `neutral` color ([7d51a9e](https://github.com/nuxt/ui/commit/7d51a9e479cb6105ea37759c5cd67ff9f7702c49)), closes [#4084](https://github.com/nuxt/ui/issues/4084) [#3629](https://github.com/nuxt/ui/issues/3629)
+* **Checkbox/RadioGroup:** render correct element without `variant` ([f2fd778](https://github.com/nuxt/ui/commit/f2fd778c0a604f2d65aec9f3fe2d54b6d4e8c3a2)), closes [#3998](https://github.com/nuxt/ui/issues/3998)
+* **CheckboxGroup:** relative `UCheckbox` import ([7551a85](https://github.com/nuxt/ui/commit/7551a85ad2d92b59e2909396affb862403d5b27a)), closes [#4090](https://github.com/nuxt/ui/issues/4090)
+* **ColorPicker:** make thumb touch draggable ([#4101](https://github.com/nuxt/ui/issues/4101)) ([cc20a26](https://github.com/nuxt/ui/commit/cc20a26f07268d19119ab4c7c254033143bb63f4))
+* **components:** `class` should have priority over `ui` prop ([e6e510b](https://github.com/nuxt/ui/commit/e6e510b848d995a286a51d50a120d67483e11232))
+* **FormField:** block form field injection after use ([#4150](https://github.com/nuxt/ui/issues/4150)) ([d79da9d](https://github.com/nuxt/ui/commit/d79da9d7b60c9972af64acd8e6eef4ae7d6bc3eb))
+* **FormField:** use `div` for `error` and `help` slots ([459a041](https://github.com/nuxt/ui/commit/459a0410ab729fde60865e84632b36903465f57e))
+* **inertia:** link always render as anchor tag ([#3989](https://github.com/nuxt/ui/issues/3989)) ([e81464a](https://github.com/nuxt/ui/commit/e81464a43ede4e63ce3dc92429bbfef48614f731))
+* **inertia:** make `useAppConfig` reactive ([12303a8](https://github.com/nuxt/ui/commit/12303a87be62dae84ef774e3a9795deb0ac90cc7))
+* **Input/Textarea:** handle generic types ([3c8d6cd](https://github.com/nuxt/ui/commit/3c8d6cd01dfafed5844c376f52adbdda0c814420)), closes [nuxt/ui-pro#887](https://github.com/nuxt/ui-pro/issues/887)
+* **InputNumber:** handle inside button group ([2e4c308](https://github.com/nuxt/ui/commit/2e4c3082a1e66fa597086dc3431fec37fa29ef62)), closes [#4155](https://github.com/nuxt/ui/issues/4155)
+* **Link:** consistent behavior between nuxt, vue and inertia ([#4134](https://github.com/nuxt/ui/issues/4134)) ([67da90a](https://github.com/nuxt/ui/commit/67da90a2f638124f640c4271d3376c5ff3fab6a1))
+* **module:** configure `@nuxt/fonts` with default weights ([276268d](https://github.com/nuxt/ui/commit/276268d311f57715cec47bc600a0ccc3d3885682))
+* **NavigationMenu:** arrow position conflict ([#4137](https://github.com/nuxt/ui/issues/4137)) ([0dc4678](https://github.com/nuxt/ui/commit/0dc4678c68e4b500be49c38336dc75b73843e38d))
+* **Select:** support more primitive types in `value` field ([#4105](https://github.com/nuxt/ui/issues/4105)) ([09b4699](https://github.com/nuxt/ui/commit/09b4699aeadaa195ea081509f8e237bb2c346238))
+* **Slider:** handle generic types ([d7a4d02](https://github.com/nuxt/ui/commit/d7a4d029b77d2dfa0b8efcd2755d482fa5e31fd3))
+* **Stepper:** use `div` tag for `title` & `description` ([a57844e](https://github.com/nuxt/ui/commit/a57844e41676c13ed1af861424961b88cee7b4da)), closes [#4096](https://github.com/nuxt/ui/issues/4096)
+* **Tabs:** prevent trigger truncate without parent width ([06e5689](https://github.com/nuxt/ui/commit/06e5689da80b36205d0548d5d6b58510938e4a6e)), closes [#4056](https://github.com/nuxt/ui/issues/4056)
+* **Tabs:** set `focus:outline-none` with `link` variant ([999a0f8](https://github.com/nuxt/ui/commit/999a0f84671fad20fa3dc50c6774af2e0200b32e))
+* **templates:** dont write unused variants in theme files ([d3df3bb](https://github.com/nuxt/ui/commit/d3df3bb929fe6732f27b182d1664213884a662ec))
+* **Toaster:** allow `base` slot override ([c63d2f3](https://github.com/nuxt/ui/commit/c63d2f380aac16f1d1e812516df3dca7fa7c8034))
+* **vue:** make `useAppConfig` reactive ([869c070](https://github.com/nuxt/ui/commit/869c0708bd351c7be44e5e430c348b19dd316db9)), closes [#3952](https://github.com/nuxt/ui/issues/3952)
+
 ## [3.1.1](https://github.com/nuxt/ui/compare/v3.1.0...v3.1.1) (2025-05-02)

 ### Features
--- a/docs/app/app.vue
+++ b/docs/app/app.vue
@@ -12,7 +12,6 @@ const { data: files } = useLazyAsyncData('search', () => queryCollectionSearchSe
 })

 const links = useLinks()
-const searchLinks = useSearchLinks()
 const color = computed(() => colorMode.value === 'dark' ? (colors as any)[appConfig.ui.colors.neutral][900] : 'white')
 const radius = computed(() => `:root { --ui-radius: ${appConfig.theme.radius}rem; }`)
 const blackAsPrimary = computed(() => appConfig.theme.blackAsPrimary ? `:root { --ui-primary: black; } .dark { --ui-primary: white; }` : ':root {}')
@@ -42,7 +41,6 @@ useServerSeoMeta({

 useFaviconFromTheme()

-const { frameworks, modules } = useSharedData()
 const { mappedNavigation, filteredNavigation } = useContentNavigation(navigation)

 provide('navigation', mappedNavigation)
@@ -65,23 +63,7 @@ provide('navigation', mappedNavigation)
    <template v-if="!route.path.startsWith('/examples')">
      <Footer />

-      <ClientOnly>
-        <LazyUContentSearch
-          :links="searchLinks"
-          :files="files"
-          :groups="[{
-            id: 'framework',
-            label: 'Framework',
-            items: frameworks
-          }, {
-            id: 'module',
-            label: 'Module',
-            items: modules
-          }]"
-          :navigation="filteredNavigation"
-          :fuse="{ resultLimit: 100 }"
-        />
-      </ClientOnly>
+      <Search :files="files" :navigation="filteredNavigation" />
    </template>
  </UApp>
 </template>
--- a/docs/app/components/Search.client.vue
+++ b/docs/app/components/Search.client.vue
@@ -0,0 +1,199 @@
+<script setup lang="ts">
+import type { DefineComponent } from 'vue'
+import type { ContentNavigationItem } from '@nuxt/content'
+import { useChat } from '@ai-sdk/vue'
+import ProseStreamPre from './prose/PreStream.vue'
+
+const components = {
+  pre: ProseStreamPre as unknown as DefineComponent
+}
+
+interface ContentSearchFile {
+  id: string
+  title: string
+  titles: string[]
+  level: number
+  content: string
+}
+
+defineProps<{
+  files?: ContentSearchFile[]
+  navigation?: ContentNavigationItem[]
+}>()
+
+const { frameworks, modules } = useSharedData()
+const { messages, input, handleSubmit, status, error, reload, setMessages } = useChat({
+  maxSteps: 2
+})
+
+const ai = ref(false)
+const searchTerm = ref('')
+
+const links = computed(() => [{
+  label: 'Ask AI',
+  icon: 'i-lucide-bot',
+  onSelect: (e: any) => {
+    e.preventDefault()
+
+    ai.value = true
+  }
+}, {
+  label: 'Docs',
+  icon: 'i-lucide-square-play',
+  to: '/getting-started'
+}, {
+  label: 'Components',
+  icon: 'i-lucide-square-code',
+  to: '/components'
+}, {
+  icon: 'i-lucide-sparkles',
+  label: 'Pro > Features',
+  description: 'A collection of premium Vue components.',
+  to: '/pro'
+}, {
+  icon: 'i-lucide-credit-card',
+  label: 'Pro > Pricing',
+  description: 'Free in development, buy when ready to launch.',
+  to: '/pro/pricing'
+}, {
+  icon: 'i-lucide-panels-top-left',
+  label: 'Pro > Templates',
+  description: 'Official templates made with Nuxt UI Pro.',
+  to: '/pro/templates'
+}, {
+  icon: 'i-lucide-circle-check',
+  label: 'Pro > Activate',
+  description: 'Enable Nuxt UI Pro in your production projects.',
+  to: '/pro/activate'
+}, {
+  label: 'Figma',
+  icon: 'i-simple-icons-figma',
+  to: '/figma'
+}, {
+  icon: 'i-lucide-presentation',
+  label: 'Community > Showcase',
+  description: 'Check out some of the amazing projects built with Nuxt UI.',
+  to: '/showcase'
+}, {
+  label: 'Community > Contribution',
+  description: 'A comprehensive guide on contributing to Nuxt UI, including project structure, development workflow, and best practices.',
+  icon: 'i-lucide-git-pull-request-arrow',
+  to: '/getting-started/contribution'
+}, {
+  label: 'Community > Roadmap',
+  description: 'Track our development progress in real-time.',
+  icon: 'i-lucide-map',
+  to: '/roadmap'
+}, {
+  label: 'Community > Devtools',
+  description: 'Integrate Nuxt UI with Nuxt Devtools with Compodium.',
+  icon: 'i-lucide-code',
+  to: 'https://github.com/romhml/compodium',
+  target: '_blank'
+}, {
+  label: 'Community > Team',
+  description: 'Meet the team behind Nuxt UI.',
+  icon: 'i-lucide-users',
+  to: '/team'
+}, {
+  label: 'Releases',
+  icon: 'i-lucide-rocket',
+  to: 'https://github.com/nuxt/ui/releases',
+  target: '_blank'
+}])
+
+const groups = computed(() => [{
+  id: 'ai',
+  label: 'AI',
+  ignoreFilter: true,
+  items: [{
+    label: searchTerm.value ? `Ask Nuxt AI for “${searchTerm.value}”` : 'Ask Nuxt AI',
+    icon: 'i-lucide-bot',
+    onSelect: (e: any) => {
+      e.preventDefault()
+
+      ai.value = true
+
+      if (searchTerm.value) {
+        setMessages([{
+          id: '1',
+          role: 'user',
+          content: searchTerm.value
+        }])
+
+        reload()
+      }
+    }
+  }]
+}, {
+  id: 'framework',
+  label: 'Framework',
+  items: frameworks.value
+}, {
+  id: 'module',
+  label: 'Module',
+  items: modules.value
+}])
+
+function onClose(e: Event) {
+  console.log('onClose')
+  e.preventDefault()
+
+  ai.value = false
+}
+</script>
+
+<template>
+  <LazyUContentSearch
+    v-model:search-term="searchTerm"
+    :links="links"
+    :files="files"
+    :groups="groups"
+    :navigation="navigation"
+    :fuse="{ resultLimit: 100 }"
+  >
+    <template v-if="ai" #content>
+      <UChatPalette>
+        <UChatMessages
+          :messages="messages"
+          :status="status"
+          :user="{ side: 'left', variant: 'naked', icon: 'i-lucide-user' }"
+          :assistant="{ icon: 'i-lucide-bot' }"
+        >
+          <template #content="{ message }">
+            <MDCCached
+              v-if="message.toolInvocations?.[0]?.state === 'result'"
+              :value="message.toolInvocations?.[0]?.result"
+              :cache-key="message.id"
+              unwrap="p"
+              :components="components"
+              :parser-options="{ highlight: false }"
+            />
+            <MDCCached
+              v-else-if="message.content.length > 0"
+              :value="message.content"
+              :cache-key="message.id"
+              unwrap="p"
+              :components="components"
+              :parser-options="{ highlight: false }"
+            />
+            <span v-else class="italic font-light">
+              Searching documentation...
+            </span>
+          </template>
+        </UChatMessages>
+
+        <template #prompt>
+          <UChatPrompt
+            v-model="input"
+            icon="i-lucide-search"
+            variant="naked"
+            :error="error"
+            @submit="handleSubmit"
+            @close="onClose"
+          />
+        </template>
+      </UChatPalette>
+    </template>
+  </LazyUContentSearch>
+</template>
--- a/docs/app/components/content/examples/form-field/FormFieldErrorAnimationExample.vue
+++ b/docs/app/components/content/examples/form-field/FormFieldErrorAnimationExample.vue
@@ -1,47 +0,0 @@
-<script setup lang="ts">
-import type { FormError } from '@nuxt/ui'
-
-const state = reactive({
-  email: undefined,
-  password: undefined
-})
-
-const form = useTemplateRef('form')
-
-const validate = (state: any): FormError[] => {
-  const errors = []
-  if (!state.email) errors.push({ name: 'email', message: 'Required' })
-  if (!state.password) errors.push({ name: 'password', message: 'Required' })
-  return errors
-}
-</script>
-
-<template>
-  <UForm ref="form" :validate="validate" :state="state" class="space-y-4">
-    <UFormField
-      label="Email"
-      name="email"
-      :ui="{
-        error: 'data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]'
-      }"
-    >
-      <UInput v-model="state.email" />
-    </UFormField>
-
-    <UFormField
-      label="Password"
-      name="password"
-      :ui="{
-        error: 'data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]'
-      }"
-    >
-      <UInput v-model="state.password" type="password" />
-    </UFormField>
-
-    <div class="flex gap-2">
-      <UButton label="Submit" type="submit" color="neutral" />
-
-      <UButton label="Clear" color="neutral" variant="outline" @click="form?.clear()" />
-    </div>
-  </UForm>
-</template>
--- a/docs/app/components/prose/PreStream.vue
+++ b/docs/app/components/prose/PreStream.vue
@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import { ShikiCachedRenderer } from 'shiki-stream/vue'
+
+const colorMode = useColorMode()
+const highlighter = await useHighlighter()
+const props = defineProps<{
+  code: string
+  language: string
+  class?: string
+  meta?: string
+}>()
+const trimmedCode = computed(() => {
+  return props.code.trim().replace(/`+$/, '')
+})
+const lang = computed(() => {
+  switch (props.language) {
+    case 'vue':
+      return 'vue'
+    case 'javascript':
+      return 'js'
+    case 'typescript':
+      return 'ts'
+    case 'css':
+      return 'css'
+    default:
+      return props.language
+  }
+})
+const key = computed(() => {
+  return `${lang.value}-${colorMode.value}`
+})
+</script>
+
+<template>
+  <ProsePre v-bind="props">
+    <ShikiCachedRenderer
+      :key="key"
+      :highlighter="highlighter"
+      :code="trimmedCode"
+      :lang="lang"
+      :theme="colorMode.value === 'dark' ? 'material-theme-palenight' : 'material-theme-lighter'"
+    />
+  </ProsePre>
+</template>
--- a/docs/app/composables/useHighlighter.ts
+++ b/docs/app/composables/useHighlighter.ts
@@ -0,0 +1,21 @@
+import { createHighlighter, type HighlighterGeneric } from 'shiki'
+import { createJavaScriptRegexEngine } from 'shiki/engine-javascript.mjs'
+
+let highlighter: HighlighterGeneric<any, any> | null = null
+
+let promise: Promise<HighlighterGeneric<any, any>> | null = null
+
+export const useHighlighter = async () => {
+  if (!promise) {
+    promise = createHighlighter({
+      langs: ['vue', 'js', 'ts', 'css', 'html', 'json', 'yaml', 'markdown', 'bash'],
+      themes: ['material-theme-palenight', 'material-theme-lighter'],
+      engine: createJavaScriptRegexEngine()
+    })
+  }
+  if (!highlighter) {
+    highlighter = await promise
+  }
+
+  return highlighter
+}
--- a/docs/app/composables/useSearchLinks.ts
+++ b/docs/app/composables/useSearchLinks.ts
@@ -1,66 +0,0 @@
-export function useSearchLinks() {
-  return [{
-    label: 'Docs',
-    icon: 'i-lucide-square-play',
-    to: '/getting-started'
-  }, {
-    label: 'Components',
-    icon: 'i-lucide-square-code',
-    to: '/components'
-  }, {
-    icon: 'i-lucide-sparkles',
-    label: 'Pro > Features',
-    description: 'A collection of premium Vue components.',
-    to: '/pro'
-  }, {
-    icon: 'i-lucide-credit-card',
-    label: 'Pro > Pricing',
-    description: 'Free in development, buy when ready to launch.',
-    to: '/pro/pricing'
-  }, {
-    icon: 'i-lucide-panels-top-left',
-    label: 'Pro > Templates',
-    description: 'Official templates made with Nuxt UI Pro.',
-    to: '/pro/templates'
-  }, {
-    icon: 'i-lucide-circle-check',
-    label: 'Pro > Activate',
-    description: 'Enable Nuxt UI Pro in your production projects.',
-    to: '/pro/activate'
-  }, {
-    label: 'Figma',
-    icon: 'i-simple-icons-figma',
-    to: '/figma'
-  }, {
-    icon: 'i-lucide-presentation',
-    label: 'Community > Showcase',
-    description: 'Check out some of the amazing projects built with Nuxt UI.',
-    to: '/showcase'
-  }, {
-    label: 'Community > Contribution',
-    description: 'A comprehensive guide on contributing to Nuxt UI, including project structure, development workflow, and best practices.',
-    icon: 'i-lucide-git-pull-request-arrow',
-    to: '/getting-started/contribution'
-  }, {
-    label: 'Community > Roadmap',
-    description: 'Track our development progress in real-time.',
-    icon: 'i-lucide-map',
-    to: '/roadmap'
-  }, {
-    label: 'Community > Devtools',
-    description: 'Integrate Nuxt UI with Nuxt Devtools with Compodium.',
-    icon: 'i-lucide-code',
-    to: 'https://github.com/romhml/compodium',
-    target: '_blank'
-  }, {
-    label: 'Community > Team',
-    description: 'Meet the team behind Nuxt UI.',
-    icon: 'i-lucide-users',
-    to: '/team'
-  }, {
-    label: 'Releases',
-    icon: 'i-lucide-rocket',
-    to: 'https://github.com/nuxt/ui/releases',
-    target: '_blank'
-  }]
-}
--- a/docs/app/error.vue
+++ b/docs/app/error.vue
@@ -15,7 +15,6 @@ const { data: files } = useLazyAsyncData('search', () => queryCollectionSearchSe
 })

 const links = useLinks()
-const searchLinks = useSearchLinks()
 const color = computed(() => colorMode.value === 'dark' ? (colors as any)[appConfig.ui.colors.neutral][900] : 'white')
 const radius = computed(() => `:root { --ui-radius: ${appConfig.theme.radius}rem; }`)
 const blackAsPrimary = computed(() => appConfig.theme.blackAsPrimary ? `:root { --ui-primary: black; } .dark { --ui-primary: white; }` : ':root {}')
@@ -49,7 +48,6 @@ useServerSeoMeta({

 useFaviconFromTheme()

-const { frameworks, modules } = useSharedData()
 const { mappedNavigation, filteredNavigation } = useContentNavigation(navigation)

 provide('navigation', mappedNavigation)
@@ -67,22 +65,6 @@ provide('navigation', mappedNavigation)

    <Footer />

-    <ClientOnly>
-      <LazyUContentSearch
-        :links="searchLinks"
-        :files="files"
-        :groups="[{
-          id: 'framework',
-          label: 'Framework',
-          items: frameworks
-        }, {
-          id: 'module',
-          label: 'Module',
-          items: modules
-        }]"
-        :navigation="filteredNavigation"
-        :fuse="{ resultLimit: 100 }"
-      />
-    </ClientOnly>
+    <Search :files="files" :navigation="filteredNavigation" />
  </UApp>
 </template>
--- a/docs/app/pages/examples/[...slug].vue
+++ b/docs/app/pages/examples/[...slug].vue
@@ -1,8 +1,20 @@
 <script setup lang="ts">
 const route = useRoute()
+const colorMode = useColorMode()
+const appConfig = useAppConfig()

 const name = route.params.slug?.[0]

+if (route.query.theme) {
+  colorMode.preference = route.query.theme === 'light' ? 'light' : 'dark'
+}
+if (route.query.neutral) {
+  appConfig.ui.colors.neutral = route.query.neutral as string
+}
+if (route.query.primary) {
+  appConfig.ui.colors.primary = route.query.primary as string
+}
+
 const width = computed(() => route.query.width && Number.parseInt(route.query.width as string) > 0 ? `${Number.parseInt(route.query.width as string) - 2}px` : '864px')
 </script>

--- a/docs/app/pages/showcase.vue
+++ b/docs/app/pages/showcase.vue
@@ -67,17 +67,6 @@ defineOgImageComponent('Docs', {
          </li>
        </ul>
      </div>
-
-      <div class="flex justify-center -mb-[36px]">
-        <UButton
-          label="Submit your project"
-          trailing-icon="i-lucide-plus"
-          color="neutral"
-          size="lg"
-          to="https://github.com/nuxt/ui/edit/v3/docs/content/showcase.yml"
-          target="_blank"
-        />
-      </div>
    </UPageHero>
  </UMain>
 </template>
--- a/docs/content/1.getting-started/3.theme.md
+++ b/docs/content/1.getting-started/3.theme.md
@@ -229,6 +229,10 @@ export default defineConfig({

 ::

+::caution
+When configuring your theme colors, you must use either color names from the [default Tailwind palette](https://tailwindcss.com/docs/colors) (like 'blue', 'green', etc.) or reference custom colors that you've previously defined in your [CSS file](#theme).
+::
+
 ### Extend colors

 ::framework-only
--- a/docs/content/3.components/form-field.md
+++ b/docs/content/3.components/form-field.md
@@ -170,36 +170,6 @@ slots:
 :u-input{placeholder="Enter your email" class="w-full"}
 ::

-## Examples
-
-### With error animation
-
-You can animate the `error` slot by using the `ui` prop.
-
-::component-example
---
-collapse: true
-name: 'form-field-error-animation-example'
---
-::
-
-::tip
-You can also configure this globally in your `app.config.ts`:
-
-```ts
-export default defineAppConfig({
-  ui: {
-    formField: {
-      slots: {
-        error: 'data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]'
-      }
-    }
-  }
-})
-```
-
-::
-
 ## API

 ### Props
--- a/docs/content/3.components/navigation-menu.md
+++ b/docs/content/3.components/navigation-menu.md
@@ -21,10 +21,10 @@ Use the `items` prop as an array of objects with the following properties:
 - `icon?: string`{lang="ts-type"}
 - `avatar?: AvatarProps`{lang="ts-type"}
 - `badge?: string | number | BadgeProps`{lang="ts-type"}
- `tooltip?: TooltipProps`{lang="ts-type"} :badge{label="Soon"}
+- `tooltip?: TooltipProps`{lang="ts-type"}
 - `trailingIcon?: string`{lang="ts-type"}
 - `type?: 'label' | 'link'`{lang="ts-type"}
- `collapsible?: boolean`{lang="ts-type"} :badge{label="Soon"}
+- `collapsible?: boolean`{lang="ts-type"}
 - `defaultOpen?: boolean`{lang="ts-type"}
 - `open?: boolean`{lang="ts-type"}
 - `value?: string`{lang="ts-type"}
@@ -885,7 +885,7 @@ You can inspect the DOM to see each item's content being rendered.

 ## Examples

-### With tooltips in items :badge{label="Soon" class="align-text-top"}
+### With tooltips in items :badge{label="New" class="align-text-top"}

 You can use the `tooltip` property to display a [Tooltip](/components/tooltip) around an item. This can be useful when the menu is collapsed.

--- a/docs/content/3.components/slider.md
+++ b/docs/content/3.components/slider.md
@@ -136,7 +136,7 @@ props:
 ---
 ::

-### Tooltip :badge{label="Soon" class="align-text-top"}
+### Tooltip :badge{label="New" class="align-text-top"}

 Use the `tooltip` prop to display a [Tooltip](/components/tooltip) around the Slider thumbs with the current value. You can set it to `true` for default behavior or pass an object to customize it with any property from the [Tooltip](/components/tooltip#props) component.

--- a/docs/package.json
+++ b/docs/package.json
@@ -5,19 +5,19 @@
  "dependencies": {
    "@ai-sdk/vue": "^1.2.12",
    "@iconify-json/logos": "^1.2.4",
-    "@iconify-json/lucide": "^1.2.42",
+    "@iconify-json/lucide": "^1.2.43",
    "@iconify-json/simple-icons": "^1.2.34",
-    "@iconify-json/vscode-icons": "^1.2.20",
+    "@iconify-json/vscode-icons": "^1.2.21",
    "@nuxt/content": "^3.5.1",
    "@nuxt/image": "^1.10.0",
    "@nuxt/ui": "latest",
-    "@nuxt/ui-pro": "https://pkg.pr.new/@nuxt/ui-pro@a30de4d",
+    "@nuxt/ui-pro": "^3.1.2",
    "@nuxthub/core": "^0.8.27",
    "@nuxtjs/plausible": "^1.2.0",
    "@octokit/rest": "^21.1.1",
    "@rollup/plugin-yaml": "^4.1.2",
-    "@vueuse/integrations": "^13.1.0",
-    "@vueuse/nuxt": "^13.1.0",
+    "@vueuse/integrations": "^13.2.0",
+    "@vueuse/nuxt": "^13.2.0",
    "ai": "^4.3.15",
    "capture-website": "^4.2.0",
    "joi": "^17.13.3",
@@ -27,16 +27,17 @@
    "nuxt-llms": "^0.1.2",
    "nuxt-og-image": "^5.1.3",
    "prettier": "^3.5.3",
+    "shiki-stream": "^0.1.2",
    "shiki-transformer-color-highlight": "^1.0.0",
    "sortablejs": "^1.15.6",
    "superstruct": "^2.0.2",
    "ufo": "^1.6.1",
    "valibot": "^1.1.0",
-    "workers-ai-provider": "^0.3.2",
+    "workers-ai-provider": "^0.4.1",
    "yup": "^1.6.1",
    "zod": "^3.24.4"
  },
  "devDependencies": {
-    "wrangler": "^4.14.4"
+    "wrangler": "^4.15.1"
  }
 }
--- a/docs/server/api/chat.ts
+++ b/docs/server/api/chat.ts
@@ -1,5 +1,6 @@
-import { streamText } from 'ai'
+import { streamText, tool } from 'ai'
 import { createWorkersAI } from 'workers-ai-provider'
+import { z } from 'zod'

 export default defineEventHandler(async (event) => {
  const { messages } = await readBody(event)
@@ -12,11 +13,30 @@ export default defineEventHandler(async (event) => {
      }
    : undefined
  const workersAI = createWorkersAI({ binding: hubAI(), gateway })
+  const autorag = hubAutoRAG('ui3')

  return streamText({
-    model: workersAI('@cf/meta/llama-3.2-3b-instruct'),
-    maxTokens: 10000,
-    system: 'You are a helpful assistant that can answer questions and help.',
-    messages
+    model: workersAI('@cf/meta/llama-3.3-70b-instruct-fp8-fast'),
+    messages,
+    system: `You are a helpful assistant for Nuxt UI. Check your knowledge base before answering any questions.
+    Only respond to questions using information from tool calls.
+    if no relevant information is found in the tool calls, respond, "Sorry, I don't know."
+    Format your markdown response using the following rules:
+    - Use the vue lang for code blocks syntax highlighting.
+    - Don't use markdown headings.
+    `,
+    tools: {
+      searchDocumentation: tool({
+        description: `search the documentation for information to answer questions.`,
+        parameters: z.object({
+          question: z.string().describe('the users question')
+        }),
+        execute: async ({ question }) => {
+          return (await autorag.aiSearch({
+            query: question
+          })).response
+        }
+      })
+    }
  }).toDataStreamResponse()
 })
--- a/package.json
+++ b/package.json
@@ -1,8 +1,8 @@
 {
  "name": "@nuxt/ui",
  "description": "A UI Library for Modern Web Apps, powered by Vue & Tailwind CSS.",
-  "version": "3.1.1",
-  "packageManager": "pnpm@10.10.0",
+  "version": "3.1.2",
+  "packageManager": "pnpm@10.11.0",
  "repository": {
    "type": "git",
    "url": "git+https://github.com/nuxt/ui.git"
@@ -115,7 +115,7 @@
    "@iconify/vue": "^4.3.0",
    "@internationalized/date": "^3.8.0",
    "@internationalized/number": "^3.6.1",
-    "@nuxt/fonts": "^0.11.3",
+    "@nuxt/fonts": "^0.11.4",
    "@nuxt/icon": "^1.12.0",
    "@nuxt/kit": "^3.17.3",
    "@nuxt/schema": "^3.17.3",
@@ -125,8 +125,8 @@
    "@tailwindcss/vite": "^4.1.6",
    "@tanstack/vue-table": "^8.21.3",
    "@unhead/vue": "^2.0.8",
-    "@vueuse/core": "^13.1.0",
-    "@vueuse/integrations": "^13.1.0",
+    "@vueuse/core": "^13.2.0",
+    "@vueuse/integrations": "^13.2.0",
    "colortranslator": "^4.1.0",
    "consola": "^3.4.2",
    "defu": "^6.1.4",
@@ -149,7 +149,7 @@
    "tailwind-variants": "^1.0.0",
    "tailwindcss": "^4.1.6",
    "tinyglobby": "^0.2.13",
-    "unplugin": "^2.3.2",
+    "unplugin": "^2.3.4",
    "unplugin-auto-import": "^19.2.0",
    "unplugin-vue-components": "^28.5.0",
    "vaul-vue": "^0.4.1",
@@ -209,7 +209,7 @@
    "debug": "4.3.7",
    "rollup": "4.34.9",
    "unimport": "4.1.1",
-    "unplugin": "^2.3.2"
+    "unplugin": "^2.3.4"
  },
  "pnpm": {
    "onlyBuiltDependencies": [
--- a/playground-vue/package.json
+++ b/playground-vue/package.json
@@ -11,7 +11,7 @@
  },
  "dependencies": {
    "@nuxt/ui": "latest",
-    "vue": "^3.5.13",
+    "vue": "^3.5.14",
    "vue-router": "^4.5.1",
    "zod": "^3.24.4"
  },
--- a/playground/package.json
+++ b/playground/package.json
@@ -9,7 +9,7 @@
    "typecheck": "nuxt typecheck"
  },
  "dependencies": {
-    "@iconify-json/lucide": "^1.2.42",
+    "@iconify-json/lucide": "^1.2.43",
    "@iconify-json/simple-icons": "^1.2.34",
    "@nuxt/ui": "latest",
    "@nuxthub/core": "^0.8.27",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/src/module.ts
+++ b/src/module.ts
@@ -91,12 +91,21 @@ export default defineNuxtModule<ModuleOptions>({
      }
    }

-    await registerModule('@nuxt/icon', 'icon', { cssLayer: 'components' })
+    await registerModule('@nuxt/icon', 'icon', {
+      cssLayer: 'components'
+    })
    if (options.fonts) {
-      await registerModule('@nuxt/fonts', 'fonts', {})
+      await registerModule('@nuxt/fonts', 'fonts', {
+        defaults: {
+          weights: [400, 500, 600, 700]
+        }
+      })
    }
    if (options.colorMode) {
-      await registerModule('@nuxtjs/color-mode', 'colorMode', { classSuffix: '', disableTransition: true })
+      await registerModule('@nuxtjs/color-mode', 'colorMode', {
+        classSuffix: '',
+        disableTransition: true
+      })
    }

    addPlugin({ src: resolve('./runtime/plugins/colors') })
--- a/src/runtime/components/Breadcrumb.vue
+++ b/src/runtime/components/Breadcrumb.vue
@@ -86,9 +86,9 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.breadcrumb |
  <Primitive :as="as" aria-label="breadcrumb" :class="ui.root({ class: [props.ui?.root, props.class] })">
    <ol :class="ui.list({ class: props.ui?.list })">
      <template v-for="(item, index) in items" :key="index">
-        <li :class="ui.item({ class: [props.ui?.item, item.ui?.item, item.class] })">
+        <li :class="ui.item({ class: [props.ui?.item, item.ui?.item] })">
          <ULink v-slot="{ active, ...slotProps }" v-bind="pickLinkProps(item)" custom>
-            <ULinkBase v-bind="slotProps" as="span" :aria-current="active && (index === items!.length - 1) ? 'page' : undefined" :class="ui.link({ class: [props.ui?.link, item.ui?.link], active: index === items!.length - 1, disabled: !!item.disabled, to: !!item.to })">
+            <ULinkBase v-bind="slotProps" as="span" :aria-current="active && (index === items!.length - 1) ? 'page' : undefined" :class="ui.link({ class: [props.ui?.link, item.ui?.link, item.class], active: index === items!.length - 1, disabled: !!item.disabled, to: !!item.to })">
              <slot :name="((item.slot || 'item') as keyof BreadcrumbSlots<T>)" :item="item" :index="index">
                <slot :name="((item.slot ? `${item.slot}-leading`: 'item-leading') as keyof BreadcrumbSlots<T>)" :item="item" :active="index === items!.length - 1" :index="index">
                  <UIcon v-if="item.icon" :name="item.icon" :class="ui.linkLeadingIcon({ class: [props.ui?.linkLeadingIcon, item.ui?.linkLeadingIcon], active: index === items!.length - 1 })" />
--- a/src/runtime/components/Checkbox.vue
+++ b/src/runtime/components/Checkbox.vue
@@ -101,7 +101,7 @@ function onUpdate(value: any) {

 <!-- eslint-disable vue/no-template-shadow -->
 <template>
-  <Primitive :as="variant === 'list' ? as : Label" :class="ui.root({ class: [props.ui?.root, props.class] })">
+  <Primitive :as="(!variant || variant === 'list') ? as : Label" :class="ui.root({ class: [props.ui?.root, props.class] })">
    <div :class="ui.container({ class: props.ui?.container })">
      <CheckboxRoot
        :id="id"
@@ -122,7 +122,7 @@ function onUpdate(value: any) {
    </div>

    <div v-if="(label || !!slots.label) || (description || !!slots.description)" :class="ui.wrapper({ class: props.ui?.wrapper })">
-      <component :is="variant === 'list' ? Label : 'p'" v-if="label || !!slots.label" :for="id" :class="ui.label({ class: props.ui?.label })">
+      <component :is="(!variant || variant === 'list') ? Label : 'p'" v-if="label || !!slots.label" :for="id" :class="ui.label({ class: props.ui?.label })">
        <slot name="label" :label="label">
          {{ label }}
        </slot>
--- a/src/runtime/components/FormField.vue
+++ b/src/runtime/components/FormField.vue
@@ -48,7 +48,7 @@ export interface FormFieldSlots {

 <script setup lang="ts">
 import { computed, ref, inject, provide, type Ref, useId } from 'vue'
-import { Primitive, Presence, Label } from 'reka-ui'
+import { Primitive, Label } from 'reka-ui'
 import { useAppConfig } from '#imports'
 import { formFieldInjectionKey, inputIdInjectionKey } from '../composables/useFormField'
 import { tv } from '../utils/tv'
@@ -68,8 +68,6 @@ const formErrors = inject<Ref<FormError[]> | null>('form-errors', null)

 const error = computed(() => props.error || formErrors?.value?.find(error => error.name && (error.name === props.name || (props.errorPattern && error.name.match(props.errorPattern))))?.message)

-const hasError = computed(() => !!(typeof error.value === 'string' && error.value) || !!slots.error)
-
 const id = ref(useId())
 // Copies id's initial value to bind aria-attributes such as aria-describedby.
 // This is required for the RadioGroup component which unsets the id value.
@@ -117,15 +115,12 @@ provide(formFieldInjectionKey, computed(() => ({
    <div :class="[(label || !!slots.label || description || !!slots.description) && ui.container({ class: props.ui?.container })]">
      <slot :error="error" />

-      <Presence v-slot="{ present }" :present="hasError">
-        <div :id="`${ariaId}-error`" :data-state="present ? 'open' : 'closed'" :class="ui.error({ class: props.ui?.error })">
-          <slot name="error" :error="error">
-            {{ error }}
-          </slot>
-        </div>
-      </Presence>
-
-      <div v-if="!hasError && (help || !!slots.help)" :class="ui.help({ class: props.ui?.help })">
+      <div v-if="(typeof error === 'string' && error) || !!slots.error" :id="`${ariaId}-error`" :class="ui.error({ class: props.ui?.error })">
+        <slot name="error" :error="error">
+          {{ error }}
+        </slot>
+      </div>
+      <div v-else-if="help || !!slots.help" :class="ui.help({ class: props.ui?.help })">
        <slot name="help" :help="help">
          {{ help }}
        </slot>
--- a/src/runtime/components/Input.vue
+++ b/src/runtime/components/Input.vue
@@ -80,6 +80,7 @@ const slots = defineSlots<InputSlots>()
 const [modelValue, modelModifiers] = defineModel<T>()

 const appConfig = useAppConfig() as Input['AppConfig']
+
 const { emitFormBlur, emitFormInput, emitFormChange, size: formGroupSize, color, id, name, highlight, disabled, emitFormFocus, ariaAttrs } = useFormField<InputProps>(props, { deferInputValidation: true })
 const { orientation, size: buttonGroupSize } = useButtonGroup<InputProps>(props)
 const { isLeading, isTrailing, leadingIconName, trailingIconName } = useComponentIcons(props)
--- a/src/runtime/components/InputNumber.vue
+++ b/src/runtime/components/InputNumber.vue
@@ -36,6 +36,8 @@ export interface InputNumberProps extends Pick<NumberFieldRootProps, 'modelValue
   * @IconifyIcon
   */
  incrementIcon?: string
+  /** Disable the increment button. */
+  incrementDisabled?: boolean
  /**
   * Configure the decrement button. The `color` and `size` are inherited.
   * @defaultValue { variant: 'link' }
@@ -47,6 +49,8 @@ export interface InputNumberProps extends Pick<NumberFieldRootProps, 'modelValue
   * @IconifyIcon
   */
  decrementIcon?: string
+  /** Disable the decrement button. */
+  decrementDisabled?: boolean
  autofocus?: boolean
  autofocusDelay?: number
  /**
@@ -75,6 +79,7 @@ import { onMounted, ref, computed } from 'vue'
 import { NumberFieldRoot, NumberFieldInput, NumberFieldDecrement, NumberFieldIncrement, useForwardPropsEmits } from 'reka-ui'
 import { reactivePick } from '@vueuse/core'
 import { useAppConfig } from '#imports'
+import { useButtonGroup } from '../composables/useButtonGroup'
 import { useFormField } from '../composables/useFormField'
 import { useLocale } from '../composables/useLocale'
 import { tv } from '../utils/tv'
@@ -83,26 +88,31 @@ import UButton from './Button.vue'
 defineOptions({ inheritAttrs: false })

 const props = withDefaults(defineProps<InputNumberProps>(), {
-  orientation: 'horizontal'
+  orientation: 'horizontal',
+  disabledIncrement: false,
+  disabledDecrement: false
 })
 const emits = defineEmits<InputNumberEmits>()
 defineSlots<InputNumberSlots>()

+const { t, code: codeLocale } = useLocale()
 const appConfig = useAppConfig() as InputNumber['AppConfig']

 const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'modelValue', 'defaultValue', 'min', 'max', 'step', 'stepSnapping', 'formatOptions', 'disableWheelChange'), emits)

-const { emitFormBlur, emitFormFocus, emitFormChange, emitFormInput, id, color, size, name, highlight, disabled, ariaAttrs } = useFormField<InputNumberProps>(props)
+const { emitFormBlur, emitFormFocus, emitFormChange, emitFormInput, id, color, size: formGroupSize, name, highlight, disabled, ariaAttrs } = useFormField<InputNumberProps>(props)
+const { orientation, size: buttonGroupSize } = useButtonGroup<InputNumberProps>(props)

-const { t, code: codeLocale } = useLocale()
 const locale = computed(() => props.locale || codeLocale.value)
+const inputSize = computed(() => buttonGroupSize.value || formGroupSize.value)

 const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.inputNumber || {}) })({
  color: color.value,
  variant: props.variant,
-  size: size.value,
+  size: inputSize.value,
  highlight: highlight.value,
-  orientation: props.orientation
+  orientation: props.orientation,
+  buttonGroup: orientation.value
 }))

 const incrementIcon = computed(() => props.incrementIcon || (props.orientation === 'horizontal' ? appConfig.ui.icons.plus : appConfig.ui.icons.chevronUp))
@@ -162,7 +172,7 @@ defineExpose({
    />

    <div :class="ui.increment({ class: props.ui?.increment })">
-      <NumberFieldIncrement as-child :disabled="disabled">
+      <NumberFieldIncrement as-child :disabled="disabled || incrementDisabled">
        <slot name="increment">
          <UButton
            :icon="incrementIcon"
@@ -177,7 +187,7 @@ defineExpose({
    </div>

    <div :class="ui.decrement({ class: props.ui?.decrement })">
-      <NumberFieldDecrement as-child :disabled="disabled">
+      <NumberFieldDecrement as-child :disabled="disabled || decrementDisabled">
        <slot name="decrement">
          <UButton
            :icon="decrementIcon"
--- a/src/runtime/components/NavigationMenu.vue
+++ b/src/runtime/components/NavigationMenu.vue
@@ -265,7 +265,7 @@ const lists = computed<NavigationMenuItem[][]>(() =>
      :unmount-on-hide="(orientation === 'vertical' && item.children?.length) ? unmountOnHide : undefined"
      :open="item.open"
    >
-      <div v-if="orientation === 'vertical' && item.type === 'label'" :class="ui.label({ class: [props.ui?.label, item.ui?.label] })">
+      <div v-if="orientation === 'vertical' && item.type === 'label'" :class="ui.label({ class: [props.ui?.label, item.ui?.label, item.class] })">
        <ReuseLinkTemplate :item="item" :index="index" />
      </div>
      <ULink v-else-if="item.type !== 'label'" v-slot="{ active, ...slotProps }" v-bind="(orientation === 'vertical' && item.children?.length && item.collapsible !== false) ? {} : pickLinkProps(item as Omit<NavigationMenuItem, 'type'>)" custom>
@@ -277,11 +277,11 @@ const lists = computed<NavigationMenuItem[][]>(() =>
          @select="item.onSelect"
        >
          <UTooltip v-if="!!item.tooltip" :content="{ side: 'right' }" v-bind="item.tooltip">
-            <ULinkBase v-bind="slotProps" :class="ui.link({ class: [props.ui?.link, item.ui?.link], active: active || item.active, disabled: !!item.disabled, level: orientation === 'horizontal' || level > 0 })">
+            <ULinkBase v-bind="slotProps" :class="ui.link({ class: [props.ui?.link, item.ui?.link, item.class], active: active || item.active, disabled: !!item.disabled, level: orientation === 'horizontal' || level > 0 })">
              <ReuseLinkTemplate :item="item" :active="active || item.active" :index="index" />
            </ULinkBase>
          </UTooltip>
-          <ULinkBase v-else v-bind="slotProps" :class="ui.link({ class: [props.ui?.link, item.ui?.link], active: active || item.active, disabled: !!item.disabled, level: orientation === 'horizontal' || level > 0 })">
+          <ULinkBase v-else v-bind="slotProps" :class="ui.link({ class: [props.ui?.link, item.ui?.link, item.class], active: active || item.active, disabled: !!item.disabled, level: orientation === 'horizontal' || level > 0 })">
            <ReuseLinkTemplate :item="item" :active="active || item.active" :index="index" />
          </ULinkBase>
        </component>
@@ -289,10 +289,10 @@ const lists = computed<NavigationMenuItem[][]>(() =>
        <NavigationMenuContent v-if="orientation === 'horizontal' && (item.children?.length || !!slots[(item.slot ? `${item.slot}-content` : 'item-content') as keyof NavigationMenuSlots<T>])" v-bind="contentProps" :class="ui.content({ class: [props.ui?.content, item.ui?.content] })">
          <slot :name="((item.slot ? `${item.slot}-content` : 'item-content') as keyof NavigationMenuSlots<T>)" :item="item" :active="active" :index="index">
            <ul :class="ui.childList({ class: [props.ui?.childList, item.ui?.childList] })">
-              <li v-for="(childItem, childIndex) in item.children" :key="childIndex" :class="ui.childItem({ class: [props.ui?.childItem, item.ui?.childItem, childItem.class] })">
+              <li v-for="(childItem, childIndex) in item.children" :key="childIndex" :class="ui.childItem({ class: [props.ui?.childItem, item.ui?.childItem] })">
                <ULink v-slot="{ active: childActive, ...childSlotProps }" v-bind="pickLinkProps(childItem)" custom>
                  <NavigationMenuLink as-child :active="childActive" @select="childItem.onSelect">
-                    <ULinkBase v-bind="childSlotProps" :class="ui.childLink({ class: [props.ui?.childLink, item.ui?.childLink], active: childActive })">
+                    <ULinkBase v-bind="childSlotProps" :class="ui.childLink({ class: [props.ui?.childLink, item.ui?.childLink, childItem.class], active: childActive })">
                      <UIcon v-if="childItem.icon" :name="childItem.icon" :class="ui.childLinkIcon({ class: [props.ui?.childLinkIcon, item.ui?.childLinkIcon], active: childActive })" />

                      <div :class="ui.childLinkWrapper({ class: [props.ui?.childLinkWrapper, item.ui?.childLinkWrapper] })">
@@ -322,7 +322,7 @@ const lists = computed<NavigationMenuItem[][]>(() =>
            :item="childItem"
            :index="childIndex"
            :level="level + 1"
-            :class="ui.childItem({ class: [props.ui?.childItem, childItem.ui?.childItem, childItem.class] })"
+            :class="ui.childItem({ class: [props.ui?.childItem, childItem.ui?.childItem] })"
          />
        </ul>
      </template>
@@ -334,7 +334,7 @@ const lists = computed<NavigationMenuItem[][]>(() =>

    <template v-for="(list, listIndex) in lists" :key="`list-${listIndex}`">
      <NavigationMenuList :class="ui.list({ class: props.ui?.list })">
-        <ReuseItemTemplate v-for="(item, index) in list" :key="`list-${listIndex}-${index}`" :item="item" :index="index" :class="ui.item({ class: [props.ui?.item, item.ui?.item, item.class] })" />
+        <ReuseItemTemplate v-for="(item, index) in list" :key="`list-${listIndex}-${index}`" :item="item" :index="index" :class="ui.item({ class: [props.ui?.item, item.ui?.item] })" />
      </NavigationMenuList>

      <div v-if="orientation === 'vertical' && listIndex < lists.length - 1" :class="ui.separator({ class: props.ui?.separator })" />
--- a/src/runtime/components/RadioGroup.vue
+++ b/src/runtime/components/RadioGroup.vue
@@ -178,7 +178,7 @@ function onUpdate(value: any) {
        </slot>
      </legend>

-      <component :is="variant === 'list' ? 'div' : Label" v-for="item in normalizedItems" :key="item.value" :class="ui.item({ class: [props.ui?.item, item.ui?.item, item.class] })">
+      <component :is="(!variant || variant === 'list') ? 'div' : Label" v-for="item in normalizedItems" :key="item.value" :class="ui.item({ class: [props.ui?.item, item.ui?.item, item.class] })">
        <div :class="ui.container({ class: [props.ui?.container, item.ui?.container] })">
          <RadioGroupItem
            :id="item.id"
@@ -191,7 +191,7 @@ function onUpdate(value: any) {
        </div>

        <div v-if="(item.label || !!slots.label) || (item.description || !!slots.description)" :class="ui.wrapper({ class: [props.ui?.wrapper, item.ui?.wrapper] })">
-          <component :is="variant === 'list' ? Label : 'p'" v-if="item.label || !!slots.label" :for="item.id" :class="ui.label({ class: [props.ui?.label, item.ui?.label] })">
+          <component :is="(!variant || variant === 'list') ? Label : 'p'" v-if="item.label || !!slots.label" :for="item.id" :class="ui.label({ class: [props.ui?.label, item.ui?.label] })">
            <slot name="label" :item="item" :model-value="(modelValue as RadioGroupValue)">
              {{ item.label }}
            </slot>
--- a/src/runtime/components/Textarea.vue
+++ b/src/runtime/components/Textarea.vue
@@ -79,6 +79,7 @@ const slots = defineSlots<TextareaSlots>()
 const [modelValue, modelModifiers] = defineModel<T>()

 const appConfig = useAppConfig() as Textarea['AppConfig']
+
 const { emitFormFocus, emitFormBlur, emitFormInput, emitFormChange, size, color, id, name, highlight, disabled, ariaAttrs } = useFormField<TextareaProps>(props, { deferInputValidation: true })
 const { isLeading, isTrailing, leadingIconName, trailingIconName } = useComponentIcons(props)

--- a/src/runtime/components/Tree.vue
+++ b/src/runtime/components/Tree.vue
@@ -151,7 +151,7 @@ const defaultExpanded = computed(() =>
    <li
      v-for="(item, index) in items"
      :key="`${level}-${index}`"
-      :class="level > 0 ? ui.itemWithChildren({ class: [props.ui?.itemWithChildren, item.ui?.itemWithChildren, item.class] }) : ui.item({ class: [props.ui?.item, item.ui?.item, item.class] })"
+      :class="level > 0 ? ui.itemWithChildren({ class: [props.ui?.itemWithChildren, item.ui?.itemWithChildren] }) : ui.item({ class: [props.ui?.item, item.ui?.item] })"
    >
      <TreeItem
        v-slot="{ isExpanded, isSelected }"
@@ -161,7 +161,7 @@ const defaultExpanded = computed(() =>
        @toggle="item.onToggle"
        @select="item.onSelect"
      >
-        <button :disabled="item.disabled || disabled" :class="ui.link({ class: [props.ui?.link, item.ui?.link], selected: isSelected, disabled: item.disabled || disabled })">
+        <button :disabled="item.disabled || disabled" :class="ui.link({ class: [props.ui?.link, item.ui?.link, item.class], selected: isSelected, disabled: item.disabled || disabled })">
          <slot :name="((item.slot || 'item') as keyof TreeSlots<T>)" v-bind="{ index, level, expanded: isExpanded, selected: isSelected }" :item="(item as Extract<NestedItem<T>, { slot: string; }>)">
            <slot :name="((item.slot ? `${item.slot}-leading`: 'item-leading') as keyof TreeSlots<T>)" v-bind="{ index, level, expanded: isExpanded, selected: isSelected }" :item="(item as Extract<NestedItem<T>, { slot: string; }>)">
              <UIcon
--- a/src/runtime/composables/useFormField.ts
+++ b/src/runtime/composables/useFormField.ts
@@ -1,4 +1,4 @@
-import { inject, computed, type InjectionKey, type Ref, type ComputedRef } from 'vue'
+import { inject, computed, type InjectionKey, type Ref, type ComputedRef, provide } from 'vue'
 import { type UseEventBusReturn, useDebounceFn } from '@vueuse/core'
 import type { FormFieldProps } from '../types'
 import type { FormEvent, FormInputEvents, FormFieldInjectedOptions, FormInjectedOptions } from '../types/form'
@@ -15,7 +15,7 @@ type Props<T> = {

 export const formOptionsInjectionKey: InjectionKey<ComputedRef<FormInjectedOptions>> = Symbol('nuxt-ui.form-options')
 export const formBusInjectionKey: InjectionKey<UseEventBusReturn<FormEvent<any>, string>> = Symbol('nuxt-ui.form-events')
-export const formFieldInjectionKey: InjectionKey<ComputedRef<FormFieldInjectedOptions<FormFieldProps>>> = Symbol('nuxt-ui.form-field')
+export const formFieldInjectionKey: InjectionKey<ComputedRef<FormFieldInjectedOptions<FormFieldProps>> | undefined> = Symbol('nuxt-ui.form-field')
 export const inputIdInjectionKey: InjectionKey<Ref<string | undefined>> = Symbol('nuxt-ui.input-id')
 export const formInputsInjectionKey: InjectionKey<Ref<Record<string, { id?: string, pattern?: RegExp }>>> = Symbol('nuxt-ui.form-inputs')
 export const formLoadingInjectionKey: InjectionKey<Readonly<Ref<boolean>>> = Symbol('nuxt-ui.form-loading')
@@ -27,6 +27,9 @@ export function useFormField<T>(props?: Props<T>, opts?: { bind?: boolean, defer
  const formInputs = inject(formInputsInjectionKey, undefined)
  const inputId = inject(inputIdInjectionKey, undefined)

+  // Blocks the FormField injection to avoid duplicating events when nesting input components.
+  provide(formFieldInjectionKey, undefined)
+
  if (formField && inputId) {
    if (opts?.bind === false) {
      // Removes for="..." attribute on label for RadioGroup and alike.
--- a/src/theme/button-group.ts
+++ b/src/theme/button-group.ts
@@ -1,18 +1,18 @@
 export const buttonGroupVariant = {
  buttonGroup: {
-    horizontal: 'not-only:first:rounded-e-none not-only:last:rounded-s-none not-last:not-first:rounded-none',
-    vertical: 'not-only:first:rounded-b-none not-only:last:rounded-t-none not-last:not-first:rounded-none'
+    horizontal: 'not-only:first:rounded-e-none not-only:last:rounded-s-none not-last:not-first:rounded-none focus-visible:z-[1]',
+    vertical: 'not-only:first:rounded-b-none not-only:last:rounded-t-none not-last:not-first:rounded-none focus-visible:z-[1]'
  }
 }

 export const buttonGroupVariantWithRoot = {
  buttonGroup: {
    horizontal: {
-      root: 'group',
+      root: 'group has-focus-visible:z-[1]',
      base: 'group-not-only:group-first:rounded-e-none group-not-only:group-last:rounded-s-none group-not-last:group-not-first:rounded-none'
    },
    vertical: {
-      root: 'group',
+      root: 'group has-focus-visible:z-[1]',
      base: 'group-not-only:group-first:rounded-b-none group-not-only:group-last:rounded-t-none group-not-last:group-not-first:rounded-none'
    }
  }
--- a/src/theme/input-number.ts
+++ b/src/theme/input-number.ts
@@ -1,5 +1,6 @@
 import type { ModuleOptions } from '../module'
 import inputTheme from './input'
+import { buttonGroupVariantWithRoot } from './button-group'

 export default (options: Required<ModuleOptions>) => {
  const input = inputTheme(options)
@@ -12,6 +13,7 @@ export default (options: Required<ModuleOptions>) => {
      decrement: 'absolute flex items-center'
    },
    variants: {
+      ...buttonGroupVariantWithRoot,
      color: {
        ...Object.fromEntries((options.theme.colors || []).map((color: string) => [color, ''])),
        neutral: ''
--- a/test/components/snapshots/ButtonGroup-vue.spec.ts.snap
+++ b/test/components/snapshots/ButtonGroup-vue.spec.ts.snap
@@ -2,10 +2,10 @@

 exports[`ButtonGroup > renders orientation vertical with default slot correctly 1`] = `
 "<div class="relative flex flex-col -space-y-px">
-  <div class="relative inline-flex items-center group"><input type="text" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors group-not-only:group-first:rounded-b-none group-not-only:group-last:rounded-t-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">
+  <div class="relative inline-flex items-center group has-focus-visible:z-[1]"><input type="text" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors group-not-only:group-first:rounded-b-none group-not-only:group-last:rounded-t-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-b-none not-only:last:rounded-t-none not-last:not-first:rounded-none px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+  </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-b-none not-only:last:rounded-t-none not-last:not-first:rounded-none focus-visible:z-[1] px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover: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--> Click me!
    <!--v-if-->
  </button>
@@ -18,10 +18,10 @@ exports[`ButtonGroup > renders with class correctly 1`] = `"<div class="inline-f

 exports[`ButtonGroup > renders with default slot correctly 1`] = `
 "<div class="relative inline-flex -space-x-px">
-  <div class="relative inline-flex items-center group"><input type="text" class="w-full rounded-md border-0 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">
+  <div class="relative inline-flex items-center group has-focus-visible:z-[1]"><input type="text" class="w-full rounded-md border-0 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 px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+  </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 text-inverted bg-primary hover: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--> Click me!
    <!--v-if-->
  </button>
@@ -30,10 +30,10 @@ exports[`ButtonGroup > renders with default slot correctly 1`] = `

 exports[`ButtonGroup > renders with size lg correctly 1`] = `
 "<div class="relative inline-flex -space-x-px">
-  <div class="relative inline-flex items-center group"><input type="text" class="w-full rounded-md border-0 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-3 py-2 text-sm gap-2 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off">
+  <div class="relative inline-flex items-center group has-focus-visible:z-[1]"><input type="text" class="w-full rounded-md border-0 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-3 py-2 text-sm gap-2 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 px-3 py-2 text-sm gap-2 text-inverted bg-primary hover:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+  </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-3 py-2 text-sm gap-2 text-inverted bg-primary hover: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--> Click me!
    <!--v-if-->
  </button>
@@ -42,10 +42,10 @@ exports[`ButtonGroup > renders with size lg correctly 1`] = `

 exports[`ButtonGroup > renders with size md correctly 1`] = `
 "<div class="relative inline-flex -space-x-px">
-  <div class="relative inline-flex items-center group"><input type="text" class="w-full rounded-md border-0 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">
+  <div class="relative inline-flex items-center group has-focus-visible:z-[1]"><input type="text" class="w-full rounded-md border-0 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 px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+  </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 text-inverted bg-primary hover: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--> Click me!
    <!--v-if-->
  </button>
@@ -54,10 +54,10 @@ exports[`ButtonGroup > renders with size md correctly 1`] = `

 exports[`ButtonGroup > renders with size sm correctly 1`] = `
 "<div class="relative inline-flex -space-x-px">
-  <div class="relative inline-flex items-center group"><input type="text" class="w-full rounded-md border-0 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-xs 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">
+  <div class="relative inline-flex items-center group has-focus-visible:z-[1]"><input type="text" class="w-full rounded-md border-0 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-xs 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 px-2.5 py-1.5 text-xs gap-1.5 text-inverted bg-primary hover:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+  </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-xs gap-1.5 text-inverted bg-primary hover: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--> Click me!
    <!--v-if-->
  </button>
@@ -66,10 +66,10 @@ exports[`ButtonGroup > renders with size sm correctly 1`] = `

 exports[`ButtonGroup > renders with size xl correctly 1`] = `
 "<div class="relative inline-flex -space-x-px">
-  <div class="relative inline-flex items-center group"><input type="text" class="w-full rounded-md border-0 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-3 py-2 text-base gap-2 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off">
+  <div class="relative inline-flex items-center group has-focus-visible:z-[1]"><input type="text" class="w-full rounded-md border-0 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-3 py-2 text-base gap-2 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 px-3 py-2 text-base gap-2 text-inverted bg-primary hover:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+  </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-3 py-2 text-base gap-2 text-inverted bg-primary hover: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--> Click me!
    <!--v-if-->
  </button>
@@ -78,10 +78,10 @@ exports[`ButtonGroup > renders with size xl correctly 1`] = `

 exports[`ButtonGroup > renders with size xs correctly 1`] = `
 "<div class="relative inline-flex -space-x-px">
-  <div class="relative inline-flex items-center group"><input type="text" class="w-full rounded-md border-0 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 py-1 text-xs gap-1 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off">
+  <div class="relative inline-flex items-center group has-focus-visible:z-[1]"><input type="text" class="w-full rounded-md border-0 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 py-1 text-xs gap-1 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 px-2 py-1 text-xs gap-1 text-inverted bg-primary hover:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+  </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 py-1 text-xs gap-1 text-inverted bg-primary hover: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--> Click me!
    <!--v-if-->
  </button>
--- a/test/components/snapshots/ButtonGroup.spec.ts.snap
+++ b/test/components/snapshots/ButtonGroup.spec.ts.snap
@@ -2,10 +2,10 @@

 exports[`ButtonGroup > renders orientation vertical with default slot correctly 1`] = `
 "<div class="relative flex flex-col -space-y-px">
-  <div class="relative inline-flex items-center group"><input type="text" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors group-not-only:group-first:rounded-b-none group-not-only:group-last:rounded-t-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">
+  <div class="relative inline-flex items-center group has-focus-visible:z-[1]"><input type="text" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors group-not-only:group-first:rounded-b-none group-not-only:group-last:rounded-t-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-b-none not-only:last:rounded-t-none not-last:not-first:rounded-none px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+  </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-b-none not-only:last:rounded-t-none not-last:not-first:rounded-none focus-visible:z-[1] px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover: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--> Click me!
    <!--v-if-->
  </button>
@@ -18,10 +18,10 @@ exports[`ButtonGroup > renders with class correctly 1`] = `"<div class="inline-f

 exports[`ButtonGroup > renders with default slot correctly 1`] = `
 "<div class="relative inline-flex -space-x-px">
-  <div class="relative inline-flex items-center group"><input type="text" class="w-full rounded-md border-0 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">
+  <div class="relative inline-flex items-center group has-focus-visible:z-[1]"><input type="text" class="w-full rounded-md border-0 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 px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+  </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 text-inverted bg-primary hover: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--> Click me!
    <!--v-if-->
  </button>
@@ -30,10 +30,10 @@ exports[`ButtonGroup > renders with default slot correctly 1`] = `

 exports[`ButtonGroup > renders with size lg correctly 1`] = `
 "<div class="relative inline-flex -space-x-px">
-  <div class="relative inline-flex items-center group"><input type="text" class="w-full rounded-md border-0 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-3 py-2 text-sm gap-2 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off">
+  <div class="relative inline-flex items-center group has-focus-visible:z-[1]"><input type="text" class="w-full rounded-md border-0 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-3 py-2 text-sm gap-2 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 px-3 py-2 text-sm gap-2 text-inverted bg-primary hover:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+  </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-3 py-2 text-sm gap-2 text-inverted bg-primary hover: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--> Click me!
    <!--v-if-->
  </button>
@@ -42,10 +42,10 @@ exports[`ButtonGroup > renders with size lg correctly 1`] = `

 exports[`ButtonGroup > renders with size md correctly 1`] = `
 "<div class="relative inline-flex -space-x-px">
-  <div class="relative inline-flex items-center group"><input type="text" class="w-full rounded-md border-0 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">
+  <div class="relative inline-flex items-center group has-focus-visible:z-[1]"><input type="text" class="w-full rounded-md border-0 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 px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-primary hover:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+  </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 text-inverted bg-primary hover: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--> Click me!
    <!--v-if-->
  </button>
@@ -54,10 +54,10 @@ exports[`ButtonGroup > renders with size md correctly 1`] = `

 exports[`ButtonGroup > renders with size sm correctly 1`] = `
 "<div class="relative inline-flex -space-x-px">
-  <div class="relative inline-flex items-center group"><input type="text" class="w-full rounded-md border-0 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-xs 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">
+  <div class="relative inline-flex items-center group has-focus-visible:z-[1]"><input type="text" class="w-full rounded-md border-0 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-xs 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 px-2.5 py-1.5 text-xs gap-1.5 text-inverted bg-primary hover:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+  </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-xs gap-1.5 text-inverted bg-primary hover: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--> Click me!
    <!--v-if-->
  </button>
@@ -66,10 +66,10 @@ exports[`ButtonGroup > renders with size sm correctly 1`] = `

 exports[`ButtonGroup > renders with size xl correctly 1`] = `
 "<div class="relative inline-flex -space-x-px">
-  <div class="relative inline-flex items-center group"><input type="text" class="w-full rounded-md border-0 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-3 py-2 text-base gap-2 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off">
+  <div class="relative inline-flex items-center group has-focus-visible:z-[1]"><input type="text" class="w-full rounded-md border-0 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-3 py-2 text-base gap-2 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 px-3 py-2 text-base gap-2 text-inverted bg-primary hover:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+  </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-3 py-2 text-base gap-2 text-inverted bg-primary hover: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--> Click me!
    <!--v-if-->
  </button>
@@ -78,10 +78,10 @@ exports[`ButtonGroup > renders with size xl correctly 1`] = `

 exports[`ButtonGroup > renders with size xs correctly 1`] = `
 "<div class="relative inline-flex -space-x-px">
-  <div class="relative inline-flex items-center group"><input type="text" class="w-full rounded-md border-0 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 py-1 text-xs gap-1 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" autocomplete="off">
+  <div class="relative inline-flex items-center group has-focus-visible:z-[1]"><input type="text" class="w-full rounded-md border-0 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 py-1 text-xs gap-1 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 px-2 py-1 text-xs gap-1 text-inverted bg-primary hover:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
+  </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 py-1 text-xs gap-1 text-inverted bg-primary hover: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--> Click me!
    <!--v-if-->
  </button>
--- a/test/components/snapshots/Checkbox-vue.spec.ts.snap
+++ b/test/components/snapshots/Checkbox-vue.spec.ts.snap
@@ -1,191 +1,187 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html

 exports[`Checkbox > renders with ariaLabel correctly 1`] = `
-"<label class="relative flex items-start flex-row">
+"<div class="relative flex items-start flex-row">
  <div class="flex items-center h-5"><button aria-label="Aria label" 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">
      <!---->
      <!---->
    </button></div>
  <!--v-if-->
-</label>"
+</div>"
 `;

 exports[`Checkbox > renders with as correctly 1`] = `
-"<label class="relative flex items-start flex-row">
+"<section 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">
      <!---->
      <!---->
    </button></div>
  <!--v-if-->
-</label>"
+</section>"
 `;

 exports[`Checkbox > renders with class correctly 1`] = `
-"<label class="relative items-start flex-row inline-flex">
+"<div class="relative items-start flex-row inline-flex">
  <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">
      <!---->
      <!---->
    </button></div>
  <!--v-if-->
-</label>"
+</div>"
 `;

 exports[`Checkbox > renders with defaultValue correctly 1`] = `
-"<label class="relative flex items-start flex-row">
+"<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="true" aria-required="false" data-state="checked"><span data-state="checked" style="pointer-events: none;" class="flex items-center justify-center size-full text-inverted bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-full" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
      <!---->
    </button></div>
  <!--v-if-->
-</label>"
+</div>"
 `;

 exports[`Checkbox > renders with description correctly 1`] = `
-"<label class="relative flex items-start flex-row">
+"<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">
      <!---->
      <!---->
    </button></div>
-  <div class="w-full ms-2 text-sm">
-    <p for="v-0" class="block font-medium text-default">Label</p>
+  <div class="w-full ms-2 text-sm"><label for="v-0" class="block font-medium text-default">Label</label>
    <p class="text-muted">Description</p>
  </div>
-</label>"
+</div>"
 `;

 exports[`Checkbox > renders with description slot correctly 1`] = `
-"<label class="relative flex items-start flex-row">
+"<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">
      <!---->
      <!---->
    </button></div>
-  <div class="w-full ms-2 text-sm">
-    <p for="v-0" class="block font-medium text-default">Description slot</p>
+  <div class="w-full ms-2 text-sm"><label for="v-0" class="block font-medium text-default">Description slot</label>
    <!--v-if-->
  </div>
-</label>"
+</div>"
 `;

 exports[`Checkbox > renders with disabled correctly 1`] = `
-"<label class="relative flex items-start flex-row">
+"<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 cursor-not-allowed opacity-75" id="v-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-disabled="" disabled="">
      <!---->
      <!---->
    </button></div>
  <!--v-if-->
-</label>"
+</div>"
 `;

 exports[`Checkbox > renders with icon correctly 1`] = `
-"<label class="relative flex items-start flex-row">
+"<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">
      <!---->
      <!---->
    </button></div>
  <!--v-if-->
-</label>"
+</div>"
 `;

 exports[`Checkbox > renders with id correctly 1`] = `
-"<label class="relative flex items-start flex-row">
+"<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="id" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
      <!---->
      <!---->
    </button></div>
  <!--v-if-->
-</label>"
+</div>"
 `;

 exports[`Checkbox > renders with indeterminate correctly 1`] = `
-"<label class="relative flex items-start flex-row">
+"<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="mixed" aria-required="false" data-state="indeterminate"><span data-state="indeterminate" style="pointer-events: none;" class="flex items-center justify-center size-full text-inverted bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-full" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
      <!---->
    </button></div>
  <!--v-if-->
-</label>"
+</div>"
 `;

 exports[`Checkbox > renders with indeterminateIcon correctly 1`] = `
-"<label class="relative flex items-start flex-row">
+"<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="mixed" aria-required="false" data-state="indeterminate"><span data-state="indeterminate" style="pointer-events: none;" class="flex items-center justify-center size-full text-inverted bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-full" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
      <!---->
    </button></div>
  <!--v-if-->
-</label>"
+</div>"
 `;

 exports[`Checkbox > renders with indicator end correctly 1`] = `
-"<label class="relative flex items-start flex-row-reverse">
+"<div class="relative flex items-start flex-row-reverse">
  <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="1" aria-required="false" data-state="checked">
      <!---->
      <!---->
    </button></div>
  <!--v-if-->
-</label>"
+</div>"
 `;

 exports[`Checkbox > renders with indicator hidden correctly 1`] = `
-"<label class="relative flex items-start">
+"<div class="relative flex items-start">
  <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 sr-only size-4" id="v-0" role="checkbox" type="button" aria-checked="1" aria-required="false" data-state="checked">
      <!---->
      <!---->
    </button></div>
  <!--v-if-->
-</label>"
+</div>"
 `;

 exports[`Checkbox > renders with indicator start correctly 1`] = `
-"<label class="relative flex items-start flex-row">
+"<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="1" aria-required="false" data-state="checked">
      <!---->
      <!---->
    </button></div>
  <!--v-if-->
-</label>"
+</div>"
 `;

 exports[`Checkbox > renders with label correctly 1`] = `
-"<label class="relative flex items-start flex-row">
+"<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">
      <!---->
      <!---->
    </button></div>
-  <div class="w-full ms-2 text-sm">
-    <p for="v-0" class="block font-medium text-default">Label</p>
+  <div class="w-full ms-2 text-sm"><label for="v-0" class="block font-medium text-default">Label</label>
    <!--v-if-->
  </div>
-</label>"
+</div>"
 `;

 exports[`Checkbox > renders with label slot correctly 1`] = `
-"<label class="relative flex items-start flex-row">
+"<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">
      <!---->
      <!---->
    </button></div>
-  <div class="w-full ms-2 text-sm">
-    <p for="v-0" class="block font-medium text-default">Label slot</p>
+  <div class="w-full ms-2 text-sm"><label for="v-0" class="block font-medium text-default">Label slot</label>
    <!--v-if-->
  </div>
-</label>"
+</div>"
 `;

 exports[`Checkbox > renders with modelValue correctly 1`] = `
-"<label class="relative flex items-start flex-row">
+"<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="true" aria-required="false" data-state="checked"><span data-state="checked" style="pointer-events: none;" class="flex items-center justify-center size-full text-inverted bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-full" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
      <!---->
    </button></div>
  <!--v-if-->
-</label>"
+</div>"
 `;

 exports[`Checkbox > renders with name correctly 1`] = `
-"<label class="relative flex items-start flex-row">
+"<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">
      <!---->
      <!---->
    </button></div>
  <!--v-if-->
-</label>"
+</div>"
 `;

 exports[`Checkbox > renders with neutral variant card correctly 1`] = `
@@ -229,84 +225,83 @@ exports[`Checkbox > renders with primary variant list correctly 1`] = `
 `;

 exports[`Checkbox > renders with required correctly 1`] = `
-"<label class="relative flex items-start flex-row">
+"<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="true" data-state="unchecked">
      <!---->
      <!---->
    </button></div>
-  <div class="w-full ms-2 text-sm">
-    <p for="v-0" class="block font-medium text-default after:content-['*'] after:ms-0.5 after:text-error">Label</p>
+  <div class="w-full ms-2 text-sm"><label for="v-0" class="block font-medium text-default after:content-['*'] after:ms-0.5 after:text-error">Label</label>
    <!--v-if-->
  </div>
-</label>"
+</div>"
 `;

 exports[`Checkbox > renders with size lg correctly 1`] = `
-"<label class="relative flex items-start flex-row">
+"<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.5" id="v-0" role="checkbox" type="button" aria-checked="1" aria-required="false" data-state="checked">
      <!---->
      <!---->
    </button></div>
  <!--v-if-->
-</label>"
+</div>"
 `;

 exports[`Checkbox > renders with size md correctly 1`] = `
-"<label class="relative flex items-start flex-row">
+"<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="1" aria-required="false" data-state="checked">
      <!---->
      <!---->
    </button></div>
  <!--v-if-->
-</label>"
+</div>"
 `;

 exports[`Checkbox > renders with size sm correctly 1`] = `
-"<label class="relative flex items-start flex-row">
+"<div class="relative flex items-start flex-row">
  <div class="flex items-center h-4"><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-3.5" id="v-0" role="checkbox" type="button" aria-checked="1" aria-required="false" data-state="checked">
      <!---->
      <!---->
    </button></div>
  <!--v-if-->
-</label>"
+</div>"
 `;

 exports[`Checkbox > renders with size xl correctly 1`] = `
-"<label class="relative flex items-start flex-row">
+"<div class="relative flex items-start flex-row">
  <div class="flex items-center h-6"><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-5" id="v-0" role="checkbox" type="button" aria-checked="1" aria-required="false" data-state="checked">
      <!---->
      <!---->
    </button></div>
  <!--v-if-->
-</label>"
+</div>"
 `;

 exports[`Checkbox > renders with size xs correctly 1`] = `
-"<label class="relative flex items-start flex-row">
+"<div class="relative flex items-start flex-row">
  <div class="flex items-center h-4"><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-3" id="v-0" role="checkbox" type="button" aria-checked="1" aria-required="false" data-state="checked">
      <!---->
      <!---->
    </button></div>
  <!--v-if-->
-</label>"
+</div>"
 `;

 exports[`Checkbox > renders with ui correctly 1`] = `
-"<label class="relative flex items-start flex-row">
+"<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">
      <!---->
      <!---->
    </button></div>
  <!--v-if-->
-</label>"
+</div>"
 `;

 exports[`Checkbox > renders with value correctly 1`] = `
-"<label class="relative flex items-start flex-row">
+"<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">
      <!---->
      <!---->
    </button></div>
  <!--v-if-->
-</label>"
+</div>"
 `;
--- a/test/components/snapshots/Checkbox.spec.ts.snap
+++ b/test/components/snapshots/Checkbox.spec.ts.snap
@@ -1,191 +1,187 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html

 exports[`Checkbox > renders with ariaLabel correctly 1`] = `
-"<label class="relative flex items-start flex-row">
+"<div class="relative flex items-start flex-row">
  <div class="flex items-center h-5"><button aria-label="Aria label" 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" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
      <!---->
      <!---->
    </button></div>
  <!--v-if-->
-</label>"
+</div>"
 `;

 exports[`Checkbox > renders with as correctly 1`] = `
-"<label class="relative flex items-start flex-row">
+"<section 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" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
      <!---->
      <!---->
    </button></div>
  <!--v-if-->
-</label>"
+</section>"
 `;

 exports[`Checkbox > renders with class correctly 1`] = `
-"<label class="relative items-start flex-row inline-flex">
+"<div class="relative items-start flex-row inline-flex">
  <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" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
      <!---->
      <!---->
    </button></div>
  <!--v-if-->
-</label>"
+</div>"
 `;

 exports[`Checkbox > renders with defaultValue correctly 1`] = `
-"<label class="relative flex items-start flex-row">
+"<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" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked"><span data-state="checked" style="pointer-events: none;" class="flex items-center justify-center size-full text-inverted bg-primary"><span class="iconify i-lucide:check shrink-0 size-full" aria-hidden="true"></span></span>
      <!---->
    </button></div>
  <!--v-if-->
-</label>"
+</div>"
 `;

 exports[`Checkbox > renders with description correctly 1`] = `
-"<label class="relative flex items-start flex-row">
+"<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" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
      <!---->
      <!---->
    </button></div>
-  <div class="w-full ms-2 text-sm">
-    <p for="v-0-0" class="block font-medium text-default">Label</p>
+  <div class="w-full ms-2 text-sm"><label for="v-0-0" class="block font-medium text-default">Label</label>
    <p class="text-muted">Description</p>
  </div>
-</label>"
+</div>"
 `;

 exports[`Checkbox > renders with description slot correctly 1`] = `
-"<label class="relative flex items-start flex-row">
+"<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" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
      <!---->
      <!---->
    </button></div>
-  <div class="w-full ms-2 text-sm">
-    <p for="v-0-0" class="block font-medium text-default">Description slot</p>
+  <div class="w-full ms-2 text-sm"><label for="v-0-0" class="block font-medium text-default">Description slot</label>
    <!--v-if-->
  </div>
-</label>"
+</div>"
 `;

 exports[`Checkbox > renders with disabled correctly 1`] = `
-"<label class="relative flex items-start flex-row">
+"<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 cursor-not-allowed opacity-75" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-disabled="" disabled="">
      <!---->
      <!---->
    </button></div>
  <!--v-if-->
-</label>"
+</div>"
 `;

 exports[`Checkbox > renders with icon correctly 1`] = `
-"<label class="relative flex items-start flex-row">
+"<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" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
      <!---->
      <!---->
    </button></div>
  <!--v-if-->
-</label>"
+</div>"
 `;

 exports[`Checkbox > renders with id correctly 1`] = `
-"<label class="relative flex items-start flex-row">
+"<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="id" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
      <!---->
      <!---->
    </button></div>
  <!--v-if-->
-</label>"
+</div>"
 `;

 exports[`Checkbox > renders with indeterminate correctly 1`] = `
-"<label class="relative flex items-start flex-row">
+"<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" role="checkbox" type="button" aria-checked="mixed" aria-required="false" data-state="indeterminate"><span data-state="indeterminate" style="pointer-events: none;" class="flex items-center justify-center size-full text-inverted bg-primary"><span class="iconify i-lucide:minus shrink-0 size-full" aria-hidden="true"></span></span>
      <!---->
    </button></div>
  <!--v-if-->
-</label>"
+</div>"
 `;

 exports[`Checkbox > renders with indeterminateIcon correctly 1`] = `
-"<label class="relative flex items-start flex-row">
+"<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" role="checkbox" type="button" aria-checked="mixed" aria-required="false" data-state="indeterminate"><span data-state="indeterminate" style="pointer-events: none;" class="flex items-center justify-center size-full text-inverted bg-primary"><span class="iconify i-lucide:trash shrink-0 size-full" aria-hidden="true"></span></span>
      <!---->
    </button></div>
  <!--v-if-->
-</label>"
+</div>"
 `;

 exports[`Checkbox > renders with indicator end correctly 1`] = `
-"<label class="relative flex items-start flex-row-reverse">
+"<div class="relative flex items-start flex-row-reverse">
  <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" role="checkbox" type="button" aria-checked="1" aria-required="false" data-state="checked">
      <!---->
      <!---->
    </button></div>
  <!--v-if-->
-</label>"
+</div>"
 `;

 exports[`Checkbox > renders with indicator hidden correctly 1`] = `
-"<label class="relative flex items-start">
+"<div class="relative flex items-start">
  <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 sr-only size-4" id="v-0-0" role="checkbox" type="button" aria-checked="1" aria-required="false" data-state="checked">
      <!---->
      <!---->
    </button></div>
  <!--v-if-->
-</label>"
+</div>"
 `;

 exports[`Checkbox > renders with indicator start correctly 1`] = `
-"<label class="relative flex items-start flex-row">
+"<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" role="checkbox" type="button" aria-checked="1" aria-required="false" data-state="checked">
      <!---->
      <!---->
    </button></div>
  <!--v-if-->
-</label>"
+</div>"
 `;

 exports[`Checkbox > renders with label correctly 1`] = `
-"<label class="relative flex items-start flex-row">
+"<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" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
      <!---->
      <!---->
    </button></div>
-  <div class="w-full ms-2 text-sm">
-    <p for="v-0-0" class="block font-medium text-default">Label</p>
+  <div class="w-full ms-2 text-sm"><label for="v-0-0" class="block font-medium text-default">Label</label>
    <!--v-if-->
  </div>
-</label>"
+</div>"
 `;

 exports[`Checkbox > renders with label slot correctly 1`] = `
-"<label class="relative flex items-start flex-row">
+"<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" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
      <!---->
      <!---->
    </button></div>
-  <div class="w-full ms-2 text-sm">
-    <p for="v-0-0" class="block font-medium text-default">Label slot</p>
+  <div class="w-full ms-2 text-sm"><label for="v-0-0" class="block font-medium text-default">Label slot</label>
    <!--v-if-->
  </div>
-</label>"
+</div>"
 `;

 exports[`Checkbox > renders with modelValue correctly 1`] = `
-"<label class="relative flex items-start flex-row">
+"<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" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked"><span data-state="checked" style="pointer-events: none;" class="flex items-center justify-center size-full text-inverted bg-primary"><span class="iconify i-lucide:check shrink-0 size-full" aria-hidden="true"></span></span>
      <!---->
    </button></div>
  <!--v-if-->
-</label>"
+</div>"
 `;

 exports[`Checkbox > renders with name correctly 1`] = `
-"<label class="relative flex items-start flex-row">
+"<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" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
      <!---->
      <!---->
    </button></div>
  <!--v-if-->
-</label>"
+</div>"
 `;

 exports[`Checkbox > renders with neutral variant card correctly 1`] = `
@@ -229,84 +225,83 @@ exports[`Checkbox > renders with primary variant list correctly 1`] = `
 `;

 exports[`Checkbox > renders with required correctly 1`] = `
-"<label class="relative flex items-start flex-row">
+"<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" role="checkbox" type="button" aria-checked="false" aria-required="true" data-state="unchecked">
      <!---->
      <!---->
    </button></div>
-  <div class="w-full ms-2 text-sm">
-    <p for="v-0-0" class="block font-medium text-default after:content-['*'] after:ms-0.5 after:text-error">Label</p>
+  <div class="w-full ms-2 text-sm"><label for="v-0-0" class="block font-medium text-default after:content-['*'] after:ms-0.5 after:text-error">Label</label>
    <!--v-if-->
  </div>
-</label>"
+</div>"
 `;

 exports[`Checkbox > renders with size lg correctly 1`] = `
-"<label class="relative flex items-start flex-row">
+"<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.5" id="v-0-0" role="checkbox" type="button" aria-checked="1" aria-required="false" data-state="checked">
      <!---->
      <!---->
    </button></div>
  <!--v-if-->
-</label>"
+</div>"
 `;

 exports[`Checkbox > renders with size md correctly 1`] = `
-"<label class="relative flex items-start flex-row">
+"<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" role="checkbox" type="button" aria-checked="1" aria-required="false" data-state="checked">
      <!---->
      <!---->
    </button></div>
  <!--v-if-->
-</label>"
+</div>"
 `;

 exports[`Checkbox > renders with size sm correctly 1`] = `
-"<label class="relative flex items-start flex-row">
+"<div class="relative flex items-start flex-row">
  <div class="flex items-center h-4"><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-3.5" id="v-0-0" role="checkbox" type="button" aria-checked="1" aria-required="false" data-state="checked">
      <!---->
      <!---->
    </button></div>
  <!--v-if-->
-</label>"
+</div>"
 `;

 exports[`Checkbox > renders with size xl correctly 1`] = `
-"<label class="relative flex items-start flex-row">
+"<div class="relative flex items-start flex-row">
  <div class="flex items-center h-6"><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-5" id="v-0-0" role="checkbox" type="button" aria-checked="1" aria-required="false" data-state="checked">
      <!---->
      <!---->
    </button></div>
  <!--v-if-->
-</label>"
+</div>"
 `;

 exports[`Checkbox > renders with size xs correctly 1`] = `
-"<label class="relative flex items-start flex-row">
+"<div class="relative flex items-start flex-row">
  <div class="flex items-center h-4"><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-3" id="v-0-0" role="checkbox" type="button" aria-checked="1" aria-required="false" data-state="checked">
      <!---->
      <!---->
    </button></div>
  <!--v-if-->
-</label>"
+</div>"
 `;

 exports[`Checkbox > renders with ui correctly 1`] = `
-"<label class="relative flex items-start flex-row">
+"<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" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
      <!---->
      <!---->
    </button></div>
  <!--v-if-->
-</label>"
+</div>"
 `;

 exports[`Checkbox > renders with value correctly 1`] = `
-"<label class="relative flex items-start flex-row">
+"<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" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
      <!---->
      <!---->
    </button></div>
  <!--v-if-->
-</label>"
+</div>"
 `;
--- a/test/components/snapshots/CheckboxGroup-vue.spec.ts.snap
+++ b/test/components/snapshots/CheckboxGroup-vue.spec.ts.snap
--- a/test/components/snapshots/CheckboxGroup.spec.ts.snap
+++ b/test/components/snapshots/CheckboxGroup.spec.ts.snap
--- a/test/components/snapshots/Form-vue.spec.ts.snap
+++ b/test/components/snapshots/Form-vue.spec.ts.snap
@@ -12,7 +12,6 @@ exports[`Form > custom validation works > with error 1`] = `
        <!--v-if-->
        <!--v-if-->
      </div>
-      <!---->
      <!--v-if-->
    </div>
  </div>
@@ -26,8 +25,7 @@ exports[`Form > custom validation works > with error 1`] = `
        <!--v-if-->
        <!--v-if-->
      </div>
-      <div id="v-1-error" data-state="open" class="mt-2 text-error">Must be at least 8 characters</div>
-      <!--v-if-->
+      <div id="v-1-error" class="mt-2 text-error">Must be at least 8 characters</div>
    </div>
  </div>
 </form>"
@@ -45,7 +43,6 @@ exports[`Form > custom validation works > without error 1`] = `
        <!--v-if-->
        <!--v-if-->
      </div>
-      <!---->
      <!--v-if-->
    </div>
  </div>
@@ -59,7 +56,6 @@ exports[`Form > custom validation works > without error 1`] = `
        <!--v-if-->
        <!--v-if-->
      </div>
-      <!---->
      <!--v-if-->
    </div>
  </div>
@@ -78,7 +74,6 @@ exports[`Form > joi validation works > with error 1`] = `
        <!--v-if-->
        <!--v-if-->
      </div>
-      <!---->
      <!--v-if-->
    </div>
  </div>
@@ -92,8 +87,7 @@ exports[`Form > joi validation works > with error 1`] = `
        <!--v-if-->
        <!--v-if-->
      </div>
-      <div id="v-1-error" data-state="open" class="mt-2 text-error">Must be at least 8 characters</div>
-      <!--v-if-->
+      <div id="v-1-error" class="mt-2 text-error">Must be at least 8 characters</div>
    </div>
  </div>
 </form>"
@@ -111,7 +105,6 @@ exports[`Form > joi validation works > without error 1`] = `
        <!--v-if-->
        <!--v-if-->
      </div>
-      <!---->
      <!--v-if-->
    </div>
  </div>
@@ -125,7 +118,6 @@ exports[`Form > joi validation works > without error 1`] = `
        <!--v-if-->
        <!--v-if-->
      </div>
-      <!---->
      <!--v-if-->
    </div>
  </div>
@@ -148,7 +140,6 @@ exports[`Form > superstruct validation works > with error 1`] = `
        <!--v-if-->
        <!--v-if-->
      </div>
-      <!---->
      <!--v-if-->
    </div>
  </div>
@@ -162,8 +153,7 @@ exports[`Form > superstruct validation works > with error 1`] = `
        <!--v-if-->
        <!--v-if-->
      </div>
-      <div id="v-1-error" data-state="open" class="mt-2 text-error">Must be at least 8 characters</div>
-      <!--v-if-->
+      <div id="v-1-error" class="mt-2 text-error">Must be at least 8 characters</div>
    </div>
  </div>
 </form>"
@@ -181,7 +171,6 @@ exports[`Form > superstruct validation works > without error 1`] = `
        <!--v-if-->
        <!--v-if-->
      </div>
-      <!---->
      <!--v-if-->
    </div>
  </div>
@@ -195,7 +184,6 @@ exports[`Form > superstruct validation works > without error 1`] = `
        <!--v-if-->
        <!--v-if-->
      </div>
-      <!---->
      <!--v-if-->
    </div>
  </div>
@@ -214,7 +202,6 @@ exports[`Form > valibot validation works > with error 1`] = `
        <!--v-if-->
        <!--v-if-->
      </div>
-      <!---->
      <!--v-if-->
    </div>
  </div>
@@ -228,8 +215,7 @@ exports[`Form > valibot validation works > with error 1`] = `
        <!--v-if-->
        <!--v-if-->
      </div>
-      <div id="v-1-error" data-state="open" class="mt-2 text-error">Must be at least 8 characters</div>
-      <!--v-if-->
+      <div id="v-1-error" class="mt-2 text-error">Must be at least 8 characters</div>
    </div>
  </div>
 </form>"
@@ -247,7 +233,6 @@ exports[`Form > valibot validation works > without error 1`] = `
        <!--v-if-->
        <!--v-if-->
      </div>
-      <!---->
      <!--v-if-->
    </div>
  </div>
@@ -261,7 +246,6 @@ exports[`Form > valibot validation works > without error 1`] = `
        <!--v-if-->
        <!--v-if-->
      </div>
-      <!---->
      <!--v-if-->
    </div>
  </div>
@@ -280,7 +264,6 @@ exports[`Form > yup validation works > with error 1`] = `
        <!--v-if-->
        <!--v-if-->
      </div>
-      <!---->
      <!--v-if-->
    </div>
  </div>
@@ -294,8 +277,7 @@ exports[`Form > yup validation works > with error 1`] = `
        <!--v-if-->
        <!--v-if-->
      </div>
-      <div id="v-1-error" data-state="open" class="mt-2 text-error">Must be at least 8 characters</div>
-      <!--v-if-->
+      <div id="v-1-error" class="mt-2 text-error">Must be at least 8 characters</div>
    </div>
  </div>
 </form>"
@@ -313,7 +295,6 @@ exports[`Form > yup validation works > without error 1`] = `
        <!--v-if-->
        <!--v-if-->
      </div>
-      <!---->
      <!--v-if-->
    </div>
  </div>
@@ -327,7 +308,6 @@ exports[`Form > yup validation works > without error 1`] = `
        <!--v-if-->
        <!--v-if-->
      </div>
-      <!---->
      <!--v-if-->
    </div>
  </div>
@@ -346,7 +326,6 @@ exports[`Form > zod validation works > with error 1`] = `
        <!--v-if-->
        <!--v-if-->
      </div>
-      <!---->
      <!--v-if-->
    </div>
  </div>
@@ -360,8 +339,7 @@ exports[`Form > zod validation works > with error 1`] = `
        <!--v-if-->
        <!--v-if-->
      </div>
-      <div id="v-1-error" data-state="open" class="mt-2 text-error">Must be at least 8 characters</div>
-      <!--v-if-->
+      <div id="v-1-error" class="mt-2 text-error">Must be at least 8 characters</div>
    </div>
  </div>
 </form>"
@@ -379,7 +357,6 @@ exports[`Form > zod validation works > without error 1`] = `
        <!--v-if-->
        <!--v-if-->
      </div>
-      <!---->
      <!--v-if-->
    </div>
  </div>
@@ -393,7 +370,6 @@ exports[`Form > zod validation works > without error 1`] = `
        <!--v-if-->
        <!--v-if-->
      </div>
-      <!---->
      <!--v-if-->
    </div>
  </div>
--- a/test/components/snapshots/Form.spec.ts.snap
+++ b/test/components/snapshots/Form.spec.ts.snap
@@ -12,7 +12,6 @@ exports[`Form > custom validation works > with error 1`] = `
        <!--v-if-->
        <!--v-if-->
      </div>
-      <!---->
      <!--v-if-->
    </div>
  </div>
@@ -26,8 +25,7 @@ exports[`Form > custom validation works > with error 1`] = `
        <!--v-if-->
        <!--v-if-->
      </div>
-      <div id="v-0-0-1-error" data-state="open" class="mt-2 text-error">Must be at least 8 characters</div>
-      <!--v-if-->
+      <div id="v-0-0-1-error" class="mt-2 text-error">Must be at least 8 characters</div>
    </div>
  </div>
 </form>"
@@ -45,7 +43,6 @@ exports[`Form > custom validation works > without error 1`] = `
        <!--v-if-->
        <!--v-if-->
      </div>
-      <!---->
      <!--v-if-->
    </div>
  </div>
@@ -59,7 +56,6 @@ exports[`Form > custom validation works > without error 1`] = `
        <!--v-if-->
        <!--v-if-->
      </div>
-      <!---->
      <!--v-if-->
    </div>
  </div>
@@ -78,7 +74,6 @@ exports[`Form > joi validation works > with error 1`] = `
        <!--v-if-->
        <!--v-if-->
      </div>
-      <!---->
      <!--v-if-->
    </div>
  </div>
@@ -92,8 +87,7 @@ exports[`Form > joi validation works > with error 1`] = `
        <!--v-if-->
        <!--v-if-->
      </div>
-      <div id="v-0-0-1-error" data-state="open" class="mt-2 text-error">Must be at least 8 characters</div>
-      <!--v-if-->
+      <div id="v-0-0-1-error" class="mt-2 text-error">Must be at least 8 characters</div>
    </div>
  </div>
 </form>"
@@ -111,7 +105,6 @@ exports[`Form > joi validation works > without error 1`] = `
        <!--v-if-->
        <!--v-if-->
      </div>
-      <!---->
      <!--v-if-->
    </div>
  </div>
@@ -125,7 +118,6 @@ exports[`Form > joi validation works > without error 1`] = `
        <!--v-if-->
        <!--v-if-->
      </div>
-      <!---->
      <!--v-if-->
    </div>
  </div>
@@ -148,7 +140,6 @@ exports[`Form > superstruct validation works > with error 1`] = `
        <!--v-if-->
        <!--v-if-->
      </div>
-      <!---->
      <!--v-if-->
    </div>
  </div>
@@ -162,8 +153,7 @@ exports[`Form > superstruct validation works > with error 1`] = `
        <!--v-if-->
        <!--v-if-->
      </div>
-      <div id="v-0-0-1-error" data-state="open" class="mt-2 text-error">Must be at least 8 characters</div>
-      <!--v-if-->
+      <div id="v-0-0-1-error" class="mt-2 text-error">Must be at least 8 characters</div>
    </div>
  </div>
 </form>"
@@ -181,7 +171,6 @@ exports[`Form > superstruct validation works > without error 1`] = `
        <!--v-if-->
        <!--v-if-->
      </div>
-      <!---->
      <!--v-if-->
    </div>
  </div>
@@ -195,7 +184,6 @@ exports[`Form > superstruct validation works > without error 1`] = `
        <!--v-if-->
        <!--v-if-->
      </div>
-      <!---->
      <!--v-if-->
    </div>
  </div>
@@ -214,7 +202,6 @@ exports[`Form > valibot validation works > with error 1`] = `
        <!--v-if-->
        <!--v-if-->
      </div>
-      <!---->
      <!--v-if-->
    </div>
  </div>
@@ -228,8 +215,7 @@ exports[`Form > valibot validation works > with error 1`] = `
        <!--v-if-->
        <!--v-if-->
      </div>
-      <div id="v-0-0-1-error" data-state="open" class="mt-2 text-error">Must be at least 8 characters</div>
-      <!--v-if-->
+      <div id="v-0-0-1-error" class="mt-2 text-error">Must be at least 8 characters</div>
    </div>
  </div>
 </form>"
@@ -247,7 +233,6 @@ exports[`Form > valibot validation works > without error 1`] = `
        <!--v-if-->
        <!--v-if-->
      </div>
-      <!---->
      <!--v-if-->
    </div>
  </div>
@@ -261,7 +246,6 @@ exports[`Form > valibot validation works > without error 1`] = `
        <!--v-if-->
        <!--v-if-->
      </div>
-      <!---->
      <!--v-if-->
    </div>
  </div>
@@ -280,7 +264,6 @@ exports[`Form > yup validation works > with error 1`] = `
        <!--v-if-->
        <!--v-if-->
      </div>
-      <!---->
      <!--v-if-->
    </div>
  </div>
@@ -294,8 +277,7 @@ exports[`Form > yup validation works > with error 1`] = `
        <!--v-if-->
        <!--v-if-->
      </div>
-      <div id="v-0-0-1-error" data-state="open" class="mt-2 text-error">Must be at least 8 characters</div>
-      <!--v-if-->
+      <div id="v-0-0-1-error" class="mt-2 text-error">Must be at least 8 characters</div>
    </div>
  </div>
 </form>"
@@ -313,7 +295,6 @@ exports[`Form > yup validation works > without error 1`] = `
        <!--v-if-->
        <!--v-if-->
      </div>
-      <!---->
      <!--v-if-->
    </div>
  </div>
@@ -327,7 +308,6 @@ exports[`Form > yup validation works > without error 1`] = `
        <!--v-if-->
        <!--v-if-->
      </div>
-      <!---->
      <!--v-if-->
    </div>
  </div>
@@ -346,7 +326,6 @@ exports[`Form > zod validation works > with error 1`] = `
        <!--v-if-->
        <!--v-if-->
      </div>
-      <!---->
      <!--v-if-->
    </div>
  </div>
@@ -360,8 +339,7 @@ exports[`Form > zod validation works > with error 1`] = `
        <!--v-if-->
        <!--v-if-->
      </div>
-      <div id="v-0-0-1-error" data-state="open" class="mt-2 text-error">Must be at least 8 characters</div>
-      <!--v-if-->
+      <div id="v-0-0-1-error" class="mt-2 text-error">Must be at least 8 characters</div>
    </div>
  </div>
 </form>"
@@ -379,7 +357,6 @@ exports[`Form > zod validation works > without error 1`] = `
        <!--v-if-->
        <!--v-if-->
      </div>
-      <!---->
      <!--v-if-->
    </div>
  </div>
@@ -393,7 +370,6 @@ exports[`Form > zod validation works > without error 1`] = `
        <!--v-if-->
        <!--v-if-->
      </div>
-      <!---->
      <!--v-if-->
    </div>
  </div>
--- a/test/components/snapshots/FormField-vue.spec.ts.snap
+++ b/test/components/snapshots/FormField-vue.spec.ts.snap
@@ -7,7 +7,6 @@ exports[`FormField > renders with as correctly 1`] = `
    <!--v-if-->
  </div>
  <div class="">
-    <!---->
    <!--v-if-->
  </div>
 </section>"
@@ -20,7 +19,6 @@ exports[`FormField > renders with class correctly 1`] = `
    <!--v-if-->
  </div>
  <div class="">
-    <!---->
    <!--v-if-->
  </div>
 </div>"
@@ -33,7 +31,6 @@ exports[`FormField > renders with default slot correctly 1`] = `
    <!--v-if-->
  </div>
  <div class="">Default slot
-    <!---->
    <!--v-if-->
  </div>
 </div>"
@@ -46,7 +43,6 @@ exports[`FormField > renders with description slot correctly 1`] = `
    <p id="v-0-0-description" class="text-muted">Description slot</p>
  </div>
  <div class="mt-1 relative">
-    <!---->
    <!--v-if-->
  </div>
 </div>"
@@ -59,8 +55,7 @@ exports[`FormField > renders with error correctly 1`] = `
    <!--v-if-->
  </div>
  <div class="">
-    <div id="v-0-0-error" data-state="open" class="mt-2 text-error">Username is already taken</div>
-    <!--v-if-->
+    <div id="v-0-0-error" class="mt-2 text-error">Username is already taken</div>
  </div>
 </div>"
 `;
@@ -72,8 +67,7 @@ exports[`FormField > renders with error slot correctly 1`] = `
    <!--v-if-->
  </div>
  <div class="">
-    <div id="v-0-0-error" data-state="open" class="mt-2 text-error">Error slot</div>
-    <!--v-if-->
+    <div id="v-0-0-error" class="mt-2 text-error">Error slot</div>
  </div>
 </div>"
 `;
@@ -85,7 +79,6 @@ exports[`FormField > renders with help correctly 1`] = `
    <!--v-if-->
  </div>
  <div class="">
-    <!---->
    <div class="mt-2 text-muted">Username must be unique</div>
  </div>
 </div>"
@@ -98,7 +91,6 @@ exports[`FormField > renders with help slot correctly 1`] = `
    <!--v-if-->
  </div>
  <div class="">
-    <!---->
    <div class="mt-2 text-muted">Help slot</div>
  </div>
 </div>"
@@ -111,7 +103,6 @@ exports[`FormField > renders with hint correctly 1`] = `
    <!--v-if-->
  </div>
  <div class="">
-    <!---->
    <!--v-if-->
  </div>
 </div>"
@@ -124,7 +115,6 @@ exports[`FormField > renders with hint slot correctly 1`] = `
    <!--v-if-->
  </div>
  <div class="">
-    <!---->
    <!--v-if-->
  </div>
 </div>"
@@ -139,7 +129,6 @@ exports[`FormField > renders with label and description correctly 1`] = `
    <p id="v-0-0-description" class="text-muted">Enter your username</p>
  </div>
  <div class="mt-1 relative">
-    <!---->
    <!--v-if-->
  </div>
 </div>"
@@ -154,7 +143,6 @@ exports[`FormField > renders with label slot correctly 1`] = `
    <!--v-if-->
  </div>
  <div class="mt-1 relative">
-    <!---->
    <!--v-if-->
  </div>
 </div>"
@@ -169,7 +157,6 @@ exports[`FormField > renders with required correctly 1`] = `
    <!--v-if-->
  </div>
  <div class="mt-1 relative">
-    <!---->
    <!--v-if-->
  </div>
 </div>"
@@ -184,7 +171,6 @@ exports[`FormField > renders with size lg correctly 1`] = `
    <p id="v-0-0-description" class="text-muted">Enter your username</p>
  </div>
  <div class="mt-1 relative">
-    <!---->
    <!--v-if-->
  </div>
 </div>"
@@ -199,7 +185,6 @@ exports[`FormField > renders with size md correctly 1`] = `
    <p id="v-0-0-description" class="text-muted">Enter your username</p>
  </div>
  <div class="mt-1 relative">
-    <!---->
    <!--v-if-->
  </div>
 </div>"
@@ -214,7 +199,6 @@ exports[`FormField > renders with size sm correctly 1`] = `
    <p id="v-0-0-description" class="text-muted">Enter your username</p>
  </div>
  <div class="mt-1 relative">
-    <!---->
    <!--v-if-->
  </div>
 </div>"
@@ -229,7 +213,6 @@ exports[`FormField > renders with size xl correctly 1`] = `
    <p id="v-0-0-description" class="text-muted">Enter your username</p>
  </div>
  <div class="mt-1 relative">
-    <!---->
    <!--v-if-->
  </div>
 </div>"
@@ -244,7 +227,6 @@ exports[`FormField > renders with size xs correctly 1`] = `
    <p id="v-0-0-description" class="text-muted">Enter your username</p>
  </div>
  <div class="mt-1 relative">
-    <!---->
    <!--v-if-->
  </div>
 </div>"
@@ -257,7 +239,6 @@ exports[`FormField > renders with ui correctly 1`] = `
    <!--v-if-->
  </div>
  <div class="">
-    <!---->
    <!--v-if-->
  </div>
 </div>"
--- a/test/components/snapshots/FormField.spec.ts.snap
+++ b/test/components/snapshots/FormField.spec.ts.snap
@@ -7,7 +7,6 @@ exports[`FormField > renders with as correctly 1`] = `
    <!--v-if-->
  </div>
  <div class="">
-    <!---->
    <!--v-if-->
  </div>
 </section>"
@@ -20,7 +19,6 @@ exports[`FormField > renders with class correctly 1`] = `
    <!--v-if-->
  </div>
  <div class="">
-    <!---->
    <!--v-if-->
  </div>
 </div>"
@@ -33,7 +31,6 @@ exports[`FormField > renders with default slot correctly 1`] = `
    <!--v-if-->
  </div>
  <div class="">Default slot
-    <!---->
    <!--v-if-->
  </div>
 </div>"
@@ -46,7 +43,6 @@ exports[`FormField > renders with description slot correctly 1`] = `
    <p id="v-0-0-description" class="text-muted">Description slot</p>
  </div>
  <div class="mt-1 relative">
-    <!---->
    <!--v-if-->
  </div>
 </div>"
@@ -59,8 +55,7 @@ exports[`FormField > renders with error correctly 1`] = `
    <!--v-if-->
  </div>
  <div class="">
-    <div id="v-0-0-error" data-state="open" class="mt-2 text-error">Username is already taken</div>
-    <!--v-if-->
+    <div id="v-0-0-error" class="mt-2 text-error">Username is already taken</div>
  </div>
 </div>"
 `;
@@ -72,8 +67,7 @@ exports[`FormField > renders with error slot correctly 1`] = `
    <!--v-if-->
  </div>
  <div class="">
-    <div id="v-0-0-error" data-state="open" class="mt-2 text-error">Error slot</div>
-    <!--v-if-->
+    <div id="v-0-0-error" class="mt-2 text-error">Error slot</div>
  </div>
 </div>"
 `;
@@ -85,7 +79,6 @@ exports[`FormField > renders with help correctly 1`] = `
    <!--v-if-->
  </div>
  <div class="">
-    <!---->
    <div class="mt-2 text-muted">Username must be unique</div>
  </div>
 </div>"
@@ -98,7 +91,6 @@ exports[`FormField > renders with help slot correctly 1`] = `
    <!--v-if-->
  </div>
  <div class="">
-    <!---->
    <div class="mt-2 text-muted">Help slot</div>
  </div>
 </div>"
@@ -111,7 +103,6 @@ exports[`FormField > renders with hint correctly 1`] = `
    <!--v-if-->
  </div>
  <div class="">
-    <!---->
    <!--v-if-->
  </div>
 </div>"
@@ -124,7 +115,6 @@ exports[`FormField > renders with hint slot correctly 1`] = `
    <!--v-if-->
  </div>
  <div class="">
-    <!---->
    <!--v-if-->
  </div>
 </div>"
@@ -139,7 +129,6 @@ exports[`FormField > renders with label and description correctly 1`] = `
    <p id="v-0-0-description" class="text-muted">Enter your username</p>
  </div>
  <div class="mt-1 relative">
-    <!---->
    <!--v-if-->
  </div>
 </div>"
@@ -154,7 +143,6 @@ exports[`FormField > renders with label slot correctly 1`] = `
    <!--v-if-->
  </div>
  <div class="mt-1 relative">
-    <!---->
    <!--v-if-->
  </div>
 </div>"
@@ -169,7 +157,6 @@ exports[`FormField > renders with required correctly 1`] = `
    <!--v-if-->
  </div>
  <div class="mt-1 relative">
-    <!---->
    <!--v-if-->
  </div>
 </div>"
@@ -184,7 +171,6 @@ exports[`FormField > renders with size lg correctly 1`] = `
    <p id="v-0-0-description" class="text-muted">Enter your username</p>
  </div>
  <div class="mt-1 relative">
-    <!---->
    <!--v-if-->
  </div>
 </div>"
@@ -199,7 +185,6 @@ exports[`FormField > renders with size md correctly 1`] = `
    <p id="v-0-0-description" class="text-muted">Enter your username</p>
  </div>
  <div class="mt-1 relative">
-    <!---->
    <!--v-if-->
  </div>
 </div>"
@@ -214,7 +199,6 @@ exports[`FormField > renders with size sm correctly 1`] = `
    <p id="v-0-0-description" class="text-muted">Enter your username</p>
  </div>
  <div class="mt-1 relative">
-    <!---->
    <!--v-if-->
  </div>
 </div>"
@@ -229,7 +213,6 @@ exports[`FormField > renders with size xl correctly 1`] = `
    <p id="v-0-0-description" class="text-muted">Enter your username</p>
  </div>
  <div class="mt-1 relative">
-    <!---->
    <!--v-if-->
  </div>
 </div>"
@@ -244,7 +227,6 @@ exports[`FormField > renders with size xs correctly 1`] = `
    <p id="v-0-0-description" class="text-muted">Enter your username</p>
  </div>
  <div class="mt-1 relative">
-    <!---->
    <!--v-if-->
  </div>
 </div>"
@@ -257,7 +239,6 @@ exports[`FormField > renders with ui correctly 1`] = `
    <!--v-if-->
  </div>
  <div class="">
-    <!---->
    <!--v-if-->
  </div>
 </div>"
--- a/test/components/snapshots/RadioGroup-vue.spec.ts.snap
+++ b/test/components/snapshots/RadioGroup-vue.spec.ts.snap
--- a/test/components/snapshots/RadioGroup.spec.ts.snap
+++ b/test/components/snapshots/RadioGroup.spec.ts.snap
--- a/test/components/snapshots/Table-vue.spec.ts.snap
+++ b/test/components/snapshots/Table-vue.spec.ts.snap
@@ -271,13 +271,15 @@ exports[`Table > renders with columns correctly 1`] = `
    <!--v-if-->
    <thead class="relative [&amp;>tr]:after:absolute [&amp;>tr]:after:inset-x-0 [&amp;>tr]:after:bottom-0 [&amp;>tr]:after:h-px [&amp;>tr]:after:bg-(--ui-border-accented)">
      <tr class="data-[selected=true]:bg-elevated/50">
-        <th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0"><label class="relative flex items-start flex-row">
+        <th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
+          <div class="relative flex items-start flex-row">
            <div class="flex items-center h-5"><button arialabel="Select all" 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">
                <!---->
                <!---->
              </button></div>
            <!--v-if-->
-          </label></th>
+          </div>
+        </th>
        <th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">#</th>
        <th data-pinned="false" 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" 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>
@@ -294,13 +296,15 @@ exports[`Table > renders with columns correctly 1`] = `
    </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"><label class="relative flex items-start flex-row">
+        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">
+          <div class="relative flex items-start flex-row">
            <div class="flex items-center h-5"><button arialabel="Select row" 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-1" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
                <!---->
                <!---->
              </button></div>
            <!--v-if-->
-          </label></td>
+          </div>
+        </td>
        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">#m5gr84i9</td>
        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Invalid Date</td>
        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 capitalize"><!--v-if-->success<!--v-if--></span></td>
@@ -323,13 +327,15 @@ exports[`Table > renders with columns correctly 1`] = `
      </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"><label class="relative flex items-start flex-row">
+        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">
+          <div class="relative flex items-start flex-row">
            <div class="flex items-center h-5"><button arialabel="Select row" 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-3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
                <!---->
                <!---->
              </button></div>
            <!--v-if-->
-          </label></td>
+          </div>
+        </td>
        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">#3u1reuv4</td>
        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Invalid Date</td>
        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 capitalize"><!--v-if-->success<!--v-if--></span></td>
@@ -352,13 +358,15 @@ exports[`Table > renders with columns correctly 1`] = `
      </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"><label class="relative flex items-start flex-row">
+        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">
+          <div class="relative flex items-start flex-row">
            <div class="flex items-center h-5"><button arialabel="Select row" 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-5" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
                <!---->
                <!---->
              </button></div>
            <!--v-if-->
-          </label></td>
+          </div>
+        </td>
        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">#derv1ws0</td>
        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Invalid Date</td>
        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 capitalize"><!--v-if-->processing<!--v-if--></span></td>
@@ -381,13 +389,15 @@ exports[`Table > renders with columns correctly 1`] = `
      </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"><label class="relative flex items-start flex-row">
+        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">
+          <div class="relative flex items-start flex-row">
            <div class="flex items-center h-5"><button arialabel="Select row" 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-7" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
                <!---->
                <!---->
              </button></div>
            <!--v-if-->
-          </label></td>
+          </div>
+        </td>
        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">#5kma53ae</td>
        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Invalid Date</td>
        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 capitalize"><!--v-if-->success<!--v-if--></span></td>
@@ -410,13 +420,15 @@ exports[`Table > renders with columns correctly 1`] = `
      </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"><label class="relative flex items-start flex-row">
+        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">
+          <div class="relative flex items-start flex-row">
            <div class="flex items-center h-5"><button arialabel="Select row" 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-9" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
                <!---->
                <!---->
              </button></div>
            <!--v-if-->
-          </label></td>
+          </div>
+        </td>
        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">#bhqecj4p</td>
        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Invalid Date</td>
        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-error/10 text-error ring ring-inset ring-error/25 capitalize"><!--v-if-->failed<!--v-if--></span></td>
@@ -518,13 +530,15 @@ exports[`Table > renders with empty slot correctly 1`] = `
    <!--v-if-->
    <thead class="relative [&amp;>tr]:after:absolute [&amp;>tr]:after:inset-x-0 [&amp;>tr]:after:bottom-0 [&amp;>tr]:after:h-px [&amp;>tr]:after:bg-(--ui-border-accented)">
      <tr class="data-[selected=true]:bg-elevated/50">
-        <th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0"><label class="relative flex items-start flex-row">
+        <th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
+          <div class="relative flex items-start flex-row">
            <div class="flex items-center h-5"><button arialabel="Select all" 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">
                <!---->
                <!---->
              </button></div>
            <!--v-if-->
-          </label></th>
+          </div>
+        </th>
        <th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">#</th>
        <th data-pinned="false" 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" 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>
@@ -1296,13 +1310,15 @@ exports[`Table > renders with loading slot correctly 1`] = `
    <!--v-if-->
    <thead class="relative [&amp;>tr]:after:absolute [&amp;>tr]:after:inset-x-0 [&amp;>tr]:after:bottom-0 [&amp;>tr]:after:h-px [&amp;>tr]:after:bg-(--ui-border-accented) after:absolute after:bottom-0 after:inset-x-0 after:h-px after:bg-primary after:animate-[carousel_2s_ease-in-out_infinite] rtl:after:animate-[carousel-rtl_2s_ease-in-out_infinite]">
      <tr class="data-[selected=true]:bg-elevated/50">
-        <th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0"><label class="relative flex items-start flex-row">
+        <th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
+          <div class="relative flex items-start flex-row">
            <div class="flex items-center h-5"><button arialabel="Select all" 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">
                <!---->
                <!---->
              </button></div>
            <!--v-if-->
-          </label></th>
+          </div>
+        </th>
        <th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">#</th>
        <th data-pinned="false" 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" 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>
--- a/test/components/snapshots/Table.spec.ts.snap
+++ b/test/components/snapshots/Table.spec.ts.snap
@@ -271,13 +271,15 @@ exports[`Table > renders with columns correctly 1`] = `
    <!--v-if-->
    <thead class="relative [&amp;>tr]:after:absolute [&amp;>tr]:after:inset-x-0 [&amp;>tr]:after:bottom-0 [&amp;>tr]:after:h-px [&amp;>tr]:after:bg-(--ui-border-accented)">
      <tr class="data-[selected=true]:bg-elevated/50">
-        <th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0"><label class="relative flex items-start flex-row">
+        <th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
+          <div class="relative flex items-start flex-row">
            <div class="flex items-center h-5"><button arialabel="Select all" 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">
                <!---->
                <!---->
              </button></div>
            <!--v-if-->
-          </label></th>
+          </div>
+        </th>
        <th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">#</th>
        <th data-pinned="false" 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" 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>
@@ -294,13 +296,15 @@ exports[`Table > renders with columns correctly 1`] = `
    </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"><label class="relative flex items-start flex-row">
+        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">
+          <div class="relative flex items-start flex-row">
            <div class="flex items-center h-5"><button arialabel="Select row" 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-1" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
                <!---->
                <!---->
              </button></div>
            <!--v-if-->
-          </label></td>
+          </div>
+        </td>
        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">#m5gr84i9</td>
        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Invalid Date</td>
        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 capitalize"><!--v-if-->success<!--v-if--></span></td>
@@ -323,13 +327,15 @@ exports[`Table > renders with columns correctly 1`] = `
      </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"><label class="relative flex items-start flex-row">
+        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">
+          <div class="relative flex items-start flex-row">
            <div class="flex items-center h-5"><button arialabel="Select row" 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-3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
                <!---->
                <!---->
              </button></div>
            <!--v-if-->
-          </label></td>
+          </div>
+        </td>
        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">#3u1reuv4</td>
        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Invalid Date</td>
        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 capitalize"><!--v-if-->success<!--v-if--></span></td>
@@ -352,13 +358,15 @@ exports[`Table > renders with columns correctly 1`] = `
      </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"><label class="relative flex items-start flex-row">
+        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">
+          <div class="relative flex items-start flex-row">
            <div class="flex items-center h-5"><button arialabel="Select row" 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-5" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
                <!---->
                <!---->
              </button></div>
            <!--v-if-->
-          </label></td>
+          </div>
+        </td>
        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">#derv1ws0</td>
        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Invalid Date</td>
        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 capitalize"><!--v-if-->processing<!--v-if--></span></td>
@@ -381,13 +389,15 @@ exports[`Table > renders with columns correctly 1`] = `
      </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"><label class="relative flex items-start flex-row">
+        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">
+          <div class="relative flex items-start flex-row">
            <div class="flex items-center h-5"><button arialabel="Select row" 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-7" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
                <!---->
                <!---->
              </button></div>
            <!--v-if-->
-          </label></td>
+          </div>
+        </td>
        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">#5kma53ae</td>
        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Invalid Date</td>
        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 capitalize"><!--v-if-->success<!--v-if--></span></td>
@@ -410,13 +420,15 @@ exports[`Table > renders with columns correctly 1`] = `
      </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"><label class="relative flex items-start flex-row">
+        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">
+          <div class="relative flex items-start flex-row">
            <div class="flex items-center h-5"><button arialabel="Select row" 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-9" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
                <!---->
                <!---->
              </button></div>
            <!--v-if-->
-          </label></td>
+          </div>
+        </td>
        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">#bhqecj4p</td>
        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Invalid Date</td>
        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-error/10 text-error ring ring-inset ring-error/25 capitalize"><!--v-if-->failed<!--v-if--></span></td>
@@ -518,13 +530,15 @@ exports[`Table > renders with empty slot correctly 1`] = `
    <!--v-if-->
    <thead class="relative [&amp;>tr]:after:absolute [&amp;>tr]:after:inset-x-0 [&amp;>tr]:after:bottom-0 [&amp;>tr]:after:h-px [&amp;>tr]:after:bg-(--ui-border-accented)">
      <tr class="data-[selected=true]:bg-elevated/50">
-        <th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0"><label class="relative flex items-start flex-row">
+        <th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
+          <div class="relative flex items-start flex-row">
            <div class="flex items-center h-5"><button arialabel="Select all" 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">
                <!---->
                <!---->
              </button></div>
            <!--v-if-->
-          </label></th>
+          </div>
+        </th>
        <th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">#</th>
        <th data-pinned="false" 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" 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>
@@ -1296,13 +1310,15 @@ exports[`Table > renders with loading slot correctly 1`] = `
    <!--v-if-->
    <thead class="relative [&amp;>tr]:after:absolute [&amp;>tr]:after:inset-x-0 [&amp;>tr]:after:bottom-0 [&amp;>tr]:after:h-px [&amp;>tr]:after:bg-(--ui-border-accented) after:absolute after:bottom-0 after:inset-x-0 after:h-px after:bg-primary after:animate-[carousel_2s_ease-in-out_infinite] rtl:after:animate-[carousel-rtl_2s_ease-in-out_infinite]">
      <tr class="data-[selected=true]:bg-elevated/50">
-        <th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0"><label class="relative flex items-start flex-row">
+        <th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
+          <div class="relative flex items-start flex-row">
            <div class="flex items-center h-5"><button arialabel="Select all" 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">
                <!---->
                <!---->
              </button></div>
            <!--v-if-->
-          </label></th>
+          </div>
+        </th>
        <th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">#</th>
        <th data-pinned="false" 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" 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>
Author	SHA1	Message	Date
Benjamin Canac	16a4b0bbb1	up	2025-05-15 16:48:25 +02:00
Benjamin Canac	dd34d49cd9	Merge branch 'v3' into docs/ai-search	2025-05-15 16:47:37 +02:00
Benjamin Canac	d29e1481f2	chore(deps): update `@nuxt/ui-pro`	2025-05-15 15:57:54 +02:00
Benjamin Canac	79aa161c6d	docs(showcase): remove submit button	2025-05-15 15:42:25 +02:00
Benjamin Canac	94ea75f441	docs(content): update badges	2025-05-15 15:30:02 +02:00
Benjamin Canac	0c368c8ab8	chore(release): v3.1.2	2025-05-15 15:26:25 +02:00
renovate[bot]	c5796c4f82	chore(deps): update all non-major dependencies (v3) (#4129 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-05-15 15:10:05 +02:00
Benjamin Canac	204953b780	fix(ButtonGroup): add `z-index` on focused element	2025-05-15 14:30:56 +02:00
Benjamin Canac	2e4c3082a1	fix(InputNumber): handle inside button group Resolves #4155	2025-05-15 14:26:32 +02:00
Benjamin Canac	f2fd778c0a	fix(Checkbox/RadioGroup): render correct element without `variant` Resolves #3998	2025-05-15 11:32:15 +02:00
Romain Hamel	d79da9d7b6	fix(FormField): block form field injection after use (#4150 )	2025-05-14 19:24:47 +02:00
Benjamin Canac	a4429eee09	docs(app): add `theme` query in examples page	2025-05-14 19:05:06 +02:00
Benjamin Canac	0905b2b3d5	chore(components): move back `item.class` on link Partial revert of #4060	2025-05-14 18:18:21 +02:00
Hugo Richard	c7fba2e0eb	feat(InputNumber): add `increment-disabled` / `decrement-disabled` props (#4141 )	2025-05-14 17:41:34 +02:00
Maxime Pauvert	4167f04205	docs(theme): add note about color definition (#3976 ) Co-authored-by: Benjamin Canac <canacb1@gmail.com>	2025-05-14 14:32:19 +02:00
Benjamin Canac	276268d311	fix(module): configure `@nuxt/fonts` with default weights	2025-05-14 13:18:09 +02:00
Benjamin Canac	1820e3cc6f	up	2025-05-09 19:10:05 +02:00
Benjamin Canac	450948646a	docs(app): implement AI search	2025-05-09 18:26:28 +02:00