feat(FormField): wrap error with Presence to be animated

2026-01-16 04:58:12 +01:00 · 2025-05-14 12:57:40 +02:00
37 changed files with 1688 additions and 1625 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,46 +1,5 @@
 # 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/components/content/examples/form-field/FormFieldErrorAnimationExample.vue
+++ b/docs/app/components/content/examples/form-field/FormFieldErrorAnimationExample.vue
@@ -0,0 +1,47 @@
+<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/pages/examples/[...slug].vue
+++ b/docs/app/pages/examples/[...slug].vue
@@ -1,20 +1,8 @@
 <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/content/1.getting-started/3.theme.md
+++ b/docs/content/1.getting-started/3.theme.md
@@ -229,10 +229,6 @@ 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,6 +170,36 @@ 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/package.json
+++ b/docs/package.json
@@ -5,9 +5,9 @@
  "dependencies": {
    "@ai-sdk/vue": "^1.2.12",
    "@iconify-json/logos": "^1.2.4",
-    "@iconify-json/lucide": "^1.2.43",
+    "@iconify-json/lucide": "^1.2.42",
    "@iconify-json/simple-icons": "^1.2.34",
-    "@iconify-json/vscode-icons": "^1.2.21",
+    "@iconify-json/vscode-icons": "^1.2.20",
    "@nuxt/content": "^3.5.1",
    "@nuxt/image": "^1.10.0",
    "@nuxt/ui": "latest",
@@ -16,8 +16,8 @@
    "@nuxtjs/plausible": "^1.2.0",
    "@octokit/rest": "^21.1.1",
    "@rollup/plugin-yaml": "^4.1.2",
-    "@vueuse/integrations": "^13.2.0",
-    "@vueuse/nuxt": "^13.2.0",
+    "@vueuse/integrations": "^13.1.0",
+    "@vueuse/nuxt": "^13.1.0",
    "ai": "^4.3.15",
    "capture-website": "^4.2.0",
    "joi": "^17.13.3",
@@ -32,11 +32,11 @@
    "superstruct": "^2.0.2",
    "ufo": "^1.6.1",
    "valibot": "^1.1.0",
-    "workers-ai-provider": "^0.4.1",
+    "workers-ai-provider": "^0.3.2",
    "yup": "^1.6.1",
    "zod": "^3.24.4"
  },
  "devDependencies": {
-    "wrangler": "^4.15.1"
+    "wrangler": "^4.14.4"
  }
 }
--- 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.2",
-  "packageManager": "pnpm@10.11.0",
+  "version": "3.1.1",
+  "packageManager": "pnpm@10.10.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.4",
+    "@nuxt/fonts": "^0.11.3",
    "@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.2.0",
-    "@vueuse/integrations": "^13.2.0",
+    "@vueuse/core": "^13.1.0",
+    "@vueuse/integrations": "^13.1.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.4",
+    "unplugin": "^2.3.2",
    "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.4"
+    "unplugin": "^2.3.2"
  },
  "pnpm": {
    "onlyBuiltDependencies": [
--- a/playground-vue/package.json
+++ b/playground-vue/package.json
@@ -11,7 +11,7 @@
  },
  "dependencies": {
    "@nuxt/ui": "latest",
-    "vue": "^3.5.14",
+    "vue": "^3.5.13",
    "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.43",
+    "@iconify-json/lucide": "^1.2.42",
    "@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,21 +91,12 @@ 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', {
-        defaults: {
-          weights: [400, 500, 600, 700]
-        }
-      })
+      await registerModule('@nuxt/fonts', 'fonts', {})
    }
    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] })">
+        <li :class="ui.item({ class: [props.ui?.item, item.ui?.item, item.class] })">
          <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, item.class], 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], 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 || variant === 'list') ? as : Label" :class="ui.root({ class: [props.ui?.root, props.class] })">
+  <Primitive :as="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 || variant === 'list') ? Label : 'p'" v-if="label || !!slots.label" :for="id" :class="ui.label({ class: props.ui?.label })">
+      <component :is="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, Label } from 'reka-ui'
+import { Primitive, Presence, Label } from 'reka-ui'
 import { useAppConfig } from '#imports'
 import { formFieldInjectionKey, inputIdInjectionKey } from '../composables/useFormField'
 import { tv } from '../utils/tv'
@@ -68,6 +68,8 @@ 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.
@@ -115,12 +117,15 @@ provide(formFieldInjectionKey, computed(() => ({
    <div :class="[(label || !!slots.label || description || !!slots.description) && ui.container({ class: props.ui?.container })]">
      <slot :error="error" />

-      <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 })">
+      <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 })">
        <slot name="help" :help="help">
          {{ help }}
        </slot>
--- a/src/runtime/components/Input.vue
+++ b/src/runtime/components/Input.vue
@@ -80,7 +80,6 @@ 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,8 +36,6 @@ 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' }
@@ -49,8 +47,6 @@ export interface InputNumberProps extends Pick<NumberFieldRootProps, 'modelValue
   * @IconifyIcon
   */
  decrementIcon?: string
-  /** Disable the decrement button. */
-  decrementDisabled?: boolean
  autofocus?: boolean
  autofocusDelay?: number
  /**
@@ -79,7 +75,6 @@ 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'
@@ -88,31 +83,26 @@ import UButton from './Button.vue'
 defineOptions({ inheritAttrs: false })

 const props = withDefaults(defineProps<InputNumberProps>(), {
-  orientation: 'horizontal',
-  disabledIncrement: false,
-  disabledDecrement: false
+  orientation: 'horizontal'
 })
 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: formGroupSize, name, highlight, disabled, ariaAttrs } = useFormField<InputNumberProps>(props)
-const { orientation, size: buttonGroupSize } = useButtonGroup<InputNumberProps>(props)
+const { emitFormBlur, emitFormFocus, emitFormChange, emitFormInput, id, color, size, name, highlight, disabled, ariaAttrs } = useFormField<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: inputSize.value,
+  size: size.value,
  highlight: highlight.value,
-  orientation: props.orientation,
-  buttonGroup: orientation.value
+  orientation: props.orientation
 }))

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

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

    <div :class="ui.decrement({ class: props.ui?.decrement })">
-      <NumberFieldDecrement as-child :disabled="disabled || decrementDisabled">
+      <NumberFieldDecrement as-child :disabled="disabled">
        <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, item.class] })">
+      <div v-if="orientation === 'vertical' && item.type === 'label'" :class="ui.label({ class: [props.ui?.label, item.ui?.label] })">
        <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, item.class], 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], 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, item.class], 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], 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] })">
+              <li v-for="(childItem, childIndex) in item.children" :key="childIndex" :class="ui.childItem({ class: [props.ui?.childItem, item.ui?.childItem, childItem.class] })">
                <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, childItem.class], active: childActive })">
+                    <ULinkBase v-bind="childSlotProps" :class="ui.childLink({ class: [props.ui?.childLink, item.ui?.childLink], 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] })"
+            :class="ui.childItem({ class: [props.ui?.childItem, childItem.ui?.childItem, childItem.class] })"
          />
        </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] })" />
+        <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] })" />
      </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 || 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 === '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 || 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 === '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,7 +79,6 @@ 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] }) : ui.item({ class: [props.ui?.item, item.ui?.item] })"
+      :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] })"
    >
      <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, item.class], selected: isSelected, disabled: item.disabled || disabled })">
+        <button :disabled="item.disabled || disabled" :class="ui.link({ class: [props.ui?.link, item.ui?.link], 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, provide } from 'vue'
+import { inject, computed, type InjectionKey, type Ref, type ComputedRef } 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>> | undefined> = Symbol('nuxt-ui.form-field')
+export const formFieldInjectionKey: InjectionKey<ComputedRef<FormFieldInjectedOptions<FormFieldProps>>> = 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,9 +27,6 @@ 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 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]'
+    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'
  }
 }

 export const buttonGroupVariantWithRoot = {
  buttonGroup: {
    horizontal: {
-      root: 'group has-focus-visible:z-[1]',
+      root: 'group',
      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 has-focus-visible:z-[1]',
+      root: 'group',
      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,6 +1,5 @@
 import type { ModuleOptions } from '../module'
 import inputTheme from './input'
-import { buttonGroupVariantWithRoot } from './button-group'

 export default (options: Required<ModuleOptions>) => {
  const input = inputTheme(options)
@@ -13,7 +12,6 @@ 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 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">
+  <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">
    <!--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 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">
+  </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">
    <!--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 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">
+  <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">
    <!--v-if-->
    <!--v-if-->
-  </div> <button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors not-only:first:rounded-e-none not-only:last:rounded-s-none not-last:not-first:rounded-none focus-visible:z-[1] px-2.5 py-1.5 text-sm gap-1.5 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 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 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">
+  <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">
    <!--v-if-->
    <!--v-if-->
-  </div> <button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors not-only:first:rounded-e-none not-only:last:rounded-s-none not-last:not-first:rounded-none focus-visible:z-[1] px-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 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 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">
+  <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">
    <!--v-if-->
    <!--v-if-->
-  </div> <button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors not-only:first:rounded-e-none not-only:last:rounded-s-none not-last:not-first:rounded-none focus-visible:z-[1] px-2.5 py-1.5 text-sm gap-1.5 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 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 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">
+  <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">
    <!--v-if-->
    <!--v-if-->
-  </div> <button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors not-only:first:rounded-e-none not-only:last:rounded-s-none not-last:not-first:rounded-none focus-visible:z-[1] px-2.5 py-1.5 text-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 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 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">
+  <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">
    <!--v-if-->
    <!--v-if-->
-  </div> <button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors not-only:first:rounded-e-none not-only:last:rounded-s-none not-last:not-first:rounded-none focus-visible:z-[1] px-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 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 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">
+  <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">
    <!--v-if-->
    <!--v-if-->
-  </div> <button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors not-only:first:rounded-e-none not-only:last:rounded-s-none not-last:not-first:rounded-none focus-visible:z-[1] px-2 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 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 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">
+  <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">
    <!--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 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">
+  </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">
    <!--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 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">
+  <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">
    <!--v-if-->
    <!--v-if-->
-  </div> <button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors not-only:first:rounded-e-none not-only:last:rounded-s-none not-last:not-first:rounded-none focus-visible:z-[1] px-2.5 py-1.5 text-sm gap-1.5 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 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 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">
+  <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">
    <!--v-if-->
    <!--v-if-->
-  </div> <button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors not-only:first:rounded-e-none not-only:last:rounded-s-none not-last:not-first:rounded-none focus-visible:z-[1] px-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 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 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">
+  <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">
    <!--v-if-->
    <!--v-if-->
-  </div> <button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors not-only:first:rounded-e-none not-only:last:rounded-s-none not-last:not-first:rounded-none focus-visible:z-[1] px-2.5 py-1.5 text-sm gap-1.5 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 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 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">
+  <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">
    <!--v-if-->
    <!--v-if-->
-  </div> <button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors not-only:first:rounded-e-none not-only:last:rounded-s-none not-last:not-first:rounded-none focus-visible:z-[1] px-2.5 py-1.5 text-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 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 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">
+  <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">
    <!--v-if-->
    <!--v-if-->
-  </div> <button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors not-only:first:rounded-e-none not-only:last:rounded-s-none not-last:not-first:rounded-none focus-visible:z-[1] px-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 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 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">
+  <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">
    <!--v-if-->
    <!--v-if-->
-  </div> <button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors not-only:first:rounded-e-none not-only:last:rounded-s-none not-last:not-first:rounded-none focus-visible:z-[1] px-2 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 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,187 +1,191 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html

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

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

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

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

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

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

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

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

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

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

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

 exports[`Checkbox > renders with indicator end correctly 1`] = `
-"<div class="relative flex items-start flex-row-reverse">
+"<label 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-->
-</div>"
+</label>"
 `;

 exports[`Checkbox > renders with indicator hidden correctly 1`] = `
-"<div class="relative flex items-start">
+"<label 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-->
-</div>"
+</label>"
 `;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

 exports[`Checkbox > renders with indicator end correctly 1`] = `
-"<div class="relative flex items-start flex-row-reverse">
+"<label 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-->
-</div>"
+</label>"
 `;

 exports[`Checkbox > renders with indicator hidden correctly 1`] = `
-"<div class="relative flex items-start">
+"<label 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-->
-</div>"
+</label>"
 `;

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

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

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

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

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

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

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

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

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

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

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

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

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

 exports[`Checkbox > renders with value correctly 1`] = `
-"<div class="relative flex items-start flex-row">
+"<label 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-->
-</div>"
+</label>"
 `;
--- 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,6 +12,7 @@ exports[`Form > custom validation works > with error 1`] = `
        <!--v-if-->
        <!--v-if-->
      </div>
+      <!---->
      <!--v-if-->
    </div>
  </div>
@@ -25,7 +26,8 @@ exports[`Form > custom validation works > with error 1`] = `
        <!--v-if-->
        <!--v-if-->
      </div>
-      <div id="v-1-error" class="mt-2 text-error">Must be at least 8 characters</div>
+      <div id="v-1-error" data-state="open" class="mt-2 text-error">Must be at least 8 characters</div>
+      <!--v-if-->
    </div>
  </div>
 </form>"
@@ -43,6 +45,7 @@ exports[`Form > custom validation works > without error 1`] = `
        <!--v-if-->
        <!--v-if-->
      </div>
+      <!---->
      <!--v-if-->
    </div>
  </div>
@@ -56,6 +59,7 @@ exports[`Form > custom validation works > without error 1`] = `
        <!--v-if-->
        <!--v-if-->
      </div>
+      <!---->
      <!--v-if-->
    </div>
  </div>
@@ -74,6 +78,7 @@ exports[`Form > joi validation works > with error 1`] = `
        <!--v-if-->
        <!--v-if-->
      </div>
+      <!---->
      <!--v-if-->
    </div>
  </div>
@@ -87,7 +92,8 @@ exports[`Form > joi validation works > with error 1`] = `
        <!--v-if-->
        <!--v-if-->
      </div>
-      <div id="v-1-error" class="mt-2 text-error">Must be at least 8 characters</div>
+      <div id="v-1-error" data-state="open" class="mt-2 text-error">Must be at least 8 characters</div>
+      <!--v-if-->
    </div>
  </div>
 </form>"
@@ -105,6 +111,7 @@ exports[`Form > joi validation works > without error 1`] = `
        <!--v-if-->
        <!--v-if-->
      </div>
+      <!---->
      <!--v-if-->
    </div>
  </div>
@@ -118,6 +125,7 @@ exports[`Form > joi validation works > without error 1`] = `
        <!--v-if-->
        <!--v-if-->
      </div>
+      <!---->
      <!--v-if-->
    </div>
  </div>
@@ -140,6 +148,7 @@ exports[`Form > superstruct validation works > with error 1`] = `
        <!--v-if-->
        <!--v-if-->
      </div>
+      <!---->
      <!--v-if-->
    </div>
  </div>
@@ -153,7 +162,8 @@ exports[`Form > superstruct validation works > with error 1`] = `
        <!--v-if-->
        <!--v-if-->
      </div>
-      <div id="v-1-error" class="mt-2 text-error">Must be at least 8 characters</div>
+      <div id="v-1-error" data-state="open" class="mt-2 text-error">Must be at least 8 characters</div>
+      <!--v-if-->
    </div>
  </div>
 </form>"
@@ -171,6 +181,7 @@ exports[`Form > superstruct validation works > without error 1`] = `
        <!--v-if-->
        <!--v-if-->
      </div>
+      <!---->
      <!--v-if-->
    </div>
  </div>
@@ -184,6 +195,7 @@ exports[`Form > superstruct validation works > without error 1`] = `
        <!--v-if-->
        <!--v-if-->
      </div>
+      <!---->
      <!--v-if-->
    </div>
  </div>
@@ -202,6 +214,7 @@ exports[`Form > valibot validation works > with error 1`] = `
        <!--v-if-->
        <!--v-if-->
      </div>
+      <!---->
      <!--v-if-->
    </div>
  </div>
@@ -215,7 +228,8 @@ exports[`Form > valibot validation works > with error 1`] = `
        <!--v-if-->
        <!--v-if-->
      </div>
-      <div id="v-1-error" class="mt-2 text-error">Must be at least 8 characters</div>
+      <div id="v-1-error" data-state="open" class="mt-2 text-error">Must be at least 8 characters</div>
+      <!--v-if-->
    </div>
  </div>
 </form>"
@@ -233,6 +247,7 @@ exports[`Form > valibot validation works > without error 1`] = `
        <!--v-if-->
        <!--v-if-->
      </div>
+      <!---->
      <!--v-if-->
    </div>
  </div>
@@ -246,6 +261,7 @@ exports[`Form > valibot validation works > without error 1`] = `
        <!--v-if-->
        <!--v-if-->
      </div>
+      <!---->
      <!--v-if-->
    </div>
  </div>
@@ -264,6 +280,7 @@ exports[`Form > yup validation works > with error 1`] = `
        <!--v-if-->
        <!--v-if-->
      </div>
+      <!---->
      <!--v-if-->
    </div>
  </div>
@@ -277,7 +294,8 @@ exports[`Form > yup validation works > with error 1`] = `
        <!--v-if-->
        <!--v-if-->
      </div>
-      <div id="v-1-error" class="mt-2 text-error">Must be at least 8 characters</div>
+      <div id="v-1-error" data-state="open" class="mt-2 text-error">Must be at least 8 characters</div>
+      <!--v-if-->
    </div>
  </div>
 </form>"
@@ -295,6 +313,7 @@ exports[`Form > yup validation works > without error 1`] = `
        <!--v-if-->
        <!--v-if-->
      </div>
+      <!---->
      <!--v-if-->
    </div>
  </div>
@@ -308,6 +327,7 @@ exports[`Form > yup validation works > without error 1`] = `
        <!--v-if-->
        <!--v-if-->
      </div>
+      <!---->
      <!--v-if-->
    </div>
  </div>
@@ -326,6 +346,7 @@ exports[`Form > zod validation works > with error 1`] = `
        <!--v-if-->
        <!--v-if-->
      </div>
+      <!---->
      <!--v-if-->
    </div>
  </div>
@@ -339,7 +360,8 @@ exports[`Form > zod validation works > with error 1`] = `
        <!--v-if-->
        <!--v-if-->
      </div>
-      <div id="v-1-error" class="mt-2 text-error">Must be at least 8 characters</div>
+      <div id="v-1-error" data-state="open" class="mt-2 text-error">Must be at least 8 characters</div>
+      <!--v-if-->
    </div>
  </div>
 </form>"
@@ -357,6 +379,7 @@ exports[`Form > zod validation works > without error 1`] = `
        <!--v-if-->
        <!--v-if-->
      </div>
+      <!---->
      <!--v-if-->
    </div>
  </div>
@@ -370,6 +393,7 @@ 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,6 +12,7 @@ exports[`Form > custom validation works > with error 1`] = `
        <!--v-if-->
        <!--v-if-->
      </div>
+      <!---->
      <!--v-if-->
    </div>
  </div>
@@ -25,7 +26,8 @@ exports[`Form > custom validation works > with error 1`] = `
        <!--v-if-->
        <!--v-if-->
      </div>
-      <div id="v-0-0-1-error" class="mt-2 text-error">Must be at least 8 characters</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>
  </div>
 </form>"
@@ -43,6 +45,7 @@ exports[`Form > custom validation works > without error 1`] = `
        <!--v-if-->
        <!--v-if-->
      </div>
+      <!---->
      <!--v-if-->
    </div>
  </div>
@@ -56,6 +59,7 @@ exports[`Form > custom validation works > without error 1`] = `
        <!--v-if-->
        <!--v-if-->
      </div>
+      <!---->
      <!--v-if-->
    </div>
  </div>
@@ -74,6 +78,7 @@ exports[`Form > joi validation works > with error 1`] = `
        <!--v-if-->
        <!--v-if-->
      </div>
+      <!---->
      <!--v-if-->
    </div>
  </div>
@@ -87,7 +92,8 @@ exports[`Form > joi validation works > with error 1`] = `
        <!--v-if-->
        <!--v-if-->
      </div>
-      <div id="v-0-0-1-error" class="mt-2 text-error">Must be at least 8 characters</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>
  </div>
 </form>"
@@ -105,6 +111,7 @@ exports[`Form > joi validation works > without error 1`] = `
        <!--v-if-->
        <!--v-if-->
      </div>
+      <!---->
      <!--v-if-->
    </div>
  </div>
@@ -118,6 +125,7 @@ exports[`Form > joi validation works > without error 1`] = `
        <!--v-if-->
        <!--v-if-->
      </div>
+      <!---->
      <!--v-if-->
    </div>
  </div>
@@ -140,6 +148,7 @@ exports[`Form > superstruct validation works > with error 1`] = `
        <!--v-if-->
        <!--v-if-->
      </div>
+      <!---->
      <!--v-if-->
    </div>
  </div>
@@ -153,7 +162,8 @@ exports[`Form > superstruct validation works > with error 1`] = `
        <!--v-if-->
        <!--v-if-->
      </div>
-      <div id="v-0-0-1-error" class="mt-2 text-error">Must be at least 8 characters</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>
  </div>
 </form>"
@@ -171,6 +181,7 @@ exports[`Form > superstruct validation works > without error 1`] = `
        <!--v-if-->
        <!--v-if-->
      </div>
+      <!---->
      <!--v-if-->
    </div>
  </div>
@@ -184,6 +195,7 @@ exports[`Form > superstruct validation works > without error 1`] = `
        <!--v-if-->
        <!--v-if-->
      </div>
+      <!---->
      <!--v-if-->
    </div>
  </div>
@@ -202,6 +214,7 @@ exports[`Form > valibot validation works > with error 1`] = `
        <!--v-if-->
        <!--v-if-->
      </div>
+      <!---->
      <!--v-if-->
    </div>
  </div>
@@ -215,7 +228,8 @@ exports[`Form > valibot validation works > with error 1`] = `
        <!--v-if-->
        <!--v-if-->
      </div>
-      <div id="v-0-0-1-error" class="mt-2 text-error">Must be at least 8 characters</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>
  </div>
 </form>"
@@ -233,6 +247,7 @@ exports[`Form > valibot validation works > without error 1`] = `
        <!--v-if-->
        <!--v-if-->
      </div>
+      <!---->
      <!--v-if-->
    </div>
  </div>
@@ -246,6 +261,7 @@ exports[`Form > valibot validation works > without error 1`] = `
        <!--v-if-->
        <!--v-if-->
      </div>
+      <!---->
      <!--v-if-->
    </div>
  </div>
@@ -264,6 +280,7 @@ exports[`Form > yup validation works > with error 1`] = `
        <!--v-if-->
        <!--v-if-->
      </div>
+      <!---->
      <!--v-if-->
    </div>
  </div>
@@ -277,7 +294,8 @@ exports[`Form > yup validation works > with error 1`] = `
        <!--v-if-->
        <!--v-if-->
      </div>
-      <div id="v-0-0-1-error" class="mt-2 text-error">Must be at least 8 characters</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>
  </div>
 </form>"
@@ -295,6 +313,7 @@ exports[`Form > yup validation works > without error 1`] = `
        <!--v-if-->
        <!--v-if-->
      </div>
+      <!---->
      <!--v-if-->
    </div>
  </div>
@@ -308,6 +327,7 @@ exports[`Form > yup validation works > without error 1`] = `
        <!--v-if-->
        <!--v-if-->
      </div>
+      <!---->
      <!--v-if-->
    </div>
  </div>
@@ -326,6 +346,7 @@ exports[`Form > zod validation works > with error 1`] = `
        <!--v-if-->
        <!--v-if-->
      </div>
+      <!---->
      <!--v-if-->
    </div>
  </div>
@@ -339,7 +360,8 @@ exports[`Form > zod validation works > with error 1`] = `
        <!--v-if-->
        <!--v-if-->
      </div>
-      <div id="v-0-0-1-error" class="mt-2 text-error">Must be at least 8 characters</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>
  </div>
 </form>"
@@ -357,6 +379,7 @@ exports[`Form > zod validation works > without error 1`] = `
        <!--v-if-->
        <!--v-if-->
      </div>
+      <!---->
      <!--v-if-->
    </div>
  </div>
@@ -370,6 +393,7 @@ 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,6 +7,7 @@ exports[`FormField > renders with as correctly 1`] = `
    <!--v-if-->
  </div>
  <div class="">
+    <!---->
    <!--v-if-->
  </div>
 </section>"
@@ -19,6 +20,7 @@ exports[`FormField > renders with class correctly 1`] = `
    <!--v-if-->
  </div>
  <div class="">
+    <!---->
    <!--v-if-->
  </div>
 </div>"
@@ -31,6 +33,7 @@ exports[`FormField > renders with default slot correctly 1`] = `
    <!--v-if-->
  </div>
  <div class="">Default slot
+    <!---->
    <!--v-if-->
  </div>
 </div>"
@@ -43,6 +46,7 @@ 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>"
@@ -55,7 +59,8 @@ exports[`FormField > renders with error correctly 1`] = `
    <!--v-if-->
  </div>
  <div class="">
-    <div id="v-0-0-error" class="mt-2 text-error">Username is already taken</div>
+    <div id="v-0-0-error" data-state="open" class="mt-2 text-error">Username is already taken</div>
+    <!--v-if-->
  </div>
 </div>"
 `;
@@ -67,7 +72,8 @@ exports[`FormField > renders with error slot correctly 1`] = `
    <!--v-if-->
  </div>
  <div class="">
-    <div id="v-0-0-error" class="mt-2 text-error">Error slot</div>
+    <div id="v-0-0-error" data-state="open" class="mt-2 text-error">Error slot</div>
+    <!--v-if-->
  </div>
 </div>"
 `;
@@ -79,6 +85,7 @@ 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>"
@@ -91,6 +98,7 @@ exports[`FormField > renders with help slot correctly 1`] = `
    <!--v-if-->
  </div>
  <div class="">
+    <!---->
    <div class="mt-2 text-muted">Help slot</div>
  </div>
 </div>"
@@ -103,6 +111,7 @@ exports[`FormField > renders with hint correctly 1`] = `
    <!--v-if-->
  </div>
  <div class="">
+    <!---->
    <!--v-if-->
  </div>
 </div>"
@@ -115,6 +124,7 @@ exports[`FormField > renders with hint slot correctly 1`] = `
    <!--v-if-->
  </div>
  <div class="">
+    <!---->
    <!--v-if-->
  </div>
 </div>"
@@ -129,6 +139,7 @@ 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>"
@@ -143,6 +154,7 @@ exports[`FormField > renders with label slot correctly 1`] = `
    <!--v-if-->
  </div>
  <div class="mt-1 relative">
+    <!---->
    <!--v-if-->
  </div>
 </div>"
@@ -157,6 +169,7 @@ exports[`FormField > renders with required correctly 1`] = `
    <!--v-if-->
  </div>
  <div class="mt-1 relative">
+    <!---->
    <!--v-if-->
  </div>
 </div>"
@@ -171,6 +184,7 @@ 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>"
@@ -185,6 +199,7 @@ 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>"
@@ -199,6 +214,7 @@ 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>"
@@ -213,6 +229,7 @@ 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>"
@@ -227,6 +244,7 @@ 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>"
@@ -239,6 +257,7 @@ 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,6 +7,7 @@ exports[`FormField > renders with as correctly 1`] = `
    <!--v-if-->
  </div>
  <div class="">
+    <!---->
    <!--v-if-->
  </div>
 </section>"
@@ -19,6 +20,7 @@ exports[`FormField > renders with class correctly 1`] = `
    <!--v-if-->
  </div>
  <div class="">
+    <!---->
    <!--v-if-->
  </div>
 </div>"
@@ -31,6 +33,7 @@ exports[`FormField > renders with default slot correctly 1`] = `
    <!--v-if-->
  </div>
  <div class="">Default slot
+    <!---->
    <!--v-if-->
  </div>
 </div>"
@@ -43,6 +46,7 @@ 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>"
@@ -55,7 +59,8 @@ exports[`FormField > renders with error correctly 1`] = `
    <!--v-if-->
  </div>
  <div class="">
-    <div id="v-0-0-error" class="mt-2 text-error">Username is already taken</div>
+    <div id="v-0-0-error" data-state="open" class="mt-2 text-error">Username is already taken</div>
+    <!--v-if-->
  </div>
 </div>"
 `;
@@ -67,7 +72,8 @@ exports[`FormField > renders with error slot correctly 1`] = `
    <!--v-if-->
  </div>
  <div class="">
-    <div id="v-0-0-error" class="mt-2 text-error">Error slot</div>
+    <div id="v-0-0-error" data-state="open" class="mt-2 text-error">Error slot</div>
+    <!--v-if-->
  </div>
 </div>"
 `;
@@ -79,6 +85,7 @@ 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>"
@@ -91,6 +98,7 @@ exports[`FormField > renders with help slot correctly 1`] = `
    <!--v-if-->
  </div>
  <div class="">
+    <!---->
    <div class="mt-2 text-muted">Help slot</div>
  </div>
 </div>"
@@ -103,6 +111,7 @@ exports[`FormField > renders with hint correctly 1`] = `
    <!--v-if-->
  </div>
  <div class="">
+    <!---->
    <!--v-if-->
  </div>
 </div>"
@@ -115,6 +124,7 @@ exports[`FormField > renders with hint slot correctly 1`] = `
    <!--v-if-->
  </div>
  <div class="">
+    <!---->
    <!--v-if-->
  </div>
 </div>"
@@ -129,6 +139,7 @@ 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>"
@@ -143,6 +154,7 @@ exports[`FormField > renders with label slot correctly 1`] = `
    <!--v-if-->
  </div>
  <div class="mt-1 relative">
+    <!---->
    <!--v-if-->
  </div>
 </div>"
@@ -157,6 +169,7 @@ exports[`FormField > renders with required correctly 1`] = `
    <!--v-if-->
  </div>
  <div class="mt-1 relative">
+    <!---->
    <!--v-if-->
  </div>
 </div>"
@@ -171,6 +184,7 @@ 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>"
@@ -185,6 +199,7 @@ 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>"
@@ -199,6 +214,7 @@ 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>"
@@ -213,6 +229,7 @@ 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>"
@@ -227,6 +244,7 @@ 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>"
@@ -239,6 +257,7 @@ 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,15 +271,13 @@ 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">
-          <div 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"><label 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-->
-          </div>
-        </th>
+          </label></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>
@@ -296,15 +294,13 @@ 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">
-          <div 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"><label 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-->
-          </div>
-        </td>
+          </label></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>
@@ -327,15 +323,13 @@ 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">
-          <div 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"><label 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-->
-          </div>
-        </td>
+          </label></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>
@@ -358,15 +352,13 @@ 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">
-          <div 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"><label 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-->
-          </div>
-        </td>
+          </label></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>
@@ -389,15 +381,13 @@ 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">
-          <div 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"><label 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-->
-          </div>
-        </td>
+          </label></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>
@@ -420,15 +410,13 @@ 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">
-          <div 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"><label 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-->
-          </div>
-        </td>
+          </label></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>
@@ -530,15 +518,13 @@ 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">
-          <div 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"><label 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-->
-          </div>
-        </th>
+          </label></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>
@@ -1310,15 +1296,13 @@ 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">
-          <div 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"><label 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-->
-          </div>
-        </th>
+          </label></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,15 +271,13 @@ 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">
-          <div 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"><label 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-->
-          </div>
-        </th>
+          </label></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>
@@ -296,15 +294,13 @@ 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">
-          <div 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"><label 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-->
-          </div>
-        </td>
+          </label></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>
@@ -327,15 +323,13 @@ 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">
-          <div 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"><label 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-->
-          </div>
-        </td>
+          </label></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>
@@ -358,15 +352,13 @@ 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">
-          <div 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"><label 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-->
-          </div>
-        </td>
+          </label></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>
@@ -389,15 +381,13 @@ 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">
-          <div 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"><label 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-->
-          </div>
-        </td>
+          </label></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>
@@ -420,15 +410,13 @@ 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">
-          <div 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"><label 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-->
-          </div>
-        </td>
+          </label></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>
@@ -530,15 +518,13 @@ 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">
-          <div 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"><label 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-->
-          </div>
-        </th>
+          </label></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>
@@ -1310,15 +1296,13 @@ 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">
-          <div 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"><label 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-->
-          </div>
-        </th>
+          </label></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>