From f2fd778c0a604f2d65aec9f3fe2d54b6d4e8c3a2 Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Thu, 15 May 2025 11:32:15 +0200
Subject: [PATCH] fix(Checkbox/RadioGroup): render correct element without
 `variant`

Resolves #3998
---
 src/runtime/components/Checkbox.vue           |   4 +-
 src/runtime/components/RadioGroup.vue         |   4 +-
 .../__snapshots__/Checkbox-vue.spec.ts.snap   | 119 +++--
 .../__snapshots__/Checkbox.spec.ts.snap       | 119 +++--
 .../CheckboxGroup-vue.spec.ts.snap            | 480 +++++++++---------
 .../__snapshots__/CheckboxGroup.spec.ts.snap  | 480 +++++++++---------
 .../__snapshots__/RadioGroup-vue.spec.ts.snap | 480 +++++++++---------
 .../__snapshots__/RadioGroup.spec.ts.snap     | 480 +++++++++---------
 .../__snapshots__/Table-vue.spec.ts.snap      |  48 +-
 .../__snapshots__/Table.spec.ts.snap          |  48 +-
 10 files changed, 1142 insertions(+), 1120 deletions(-)

diff --git a/src/runtime/components/Checkbox.vue b/src/runtime/components/Checkbox.vue
index 3691619e..95029b8d 100644
--- a/src/runtime/components/Checkbox.vue
+++ b/src/runtime/components/Checkbox.vue
@@ -101,7 +101,7 @@ function onUpdate(value: any) {
 
 <!-- eslint-disable vue/no-template-shadow -->
 <template>
-  <Primitive :as="variant === 'list' ? as : Label" :class="ui.root({ class: [props.ui?.root, props.class] })">
+  <Primitive :as="(!variant || variant === 'list') ? as : Label" :class="ui.root({ class: [props.ui?.root, props.class] })">
     <div :class="ui.container({ class: props.ui?.container })">
       <CheckboxRoot
         :id="id"
@@ -122,7 +122,7 @@ function onUpdate(value: any) {
     </div>
 
     <div v-if="(label || !!slots.label) || (description || !!slots.description)" :class="ui.wrapper({ class: props.ui?.wrapper })">
-      <component :is="variant === 'list' ? Label : 'p'" v-if="label || !!slots.label" :for="id" :class="ui.label({ class: props.ui?.label })">
+      <component :is="(!variant || variant === 'list') ? Label : 'p'" v-if="label || !!slots.label" :for="id" :class="ui.label({ class: props.ui?.label })">
         <slot name="label" :label="label">
           {{ label }}
         </slot>
diff --git a/src/runtime/components/RadioGroup.vue b/src/runtime/components/RadioGroup.vue
index e95ead0a..3a07201f 100644
--- a/src/runtime/components/RadioGroup.vue
+++ b/src/runtime/components/RadioGroup.vue
@@ -178,7 +178,7 @@ function onUpdate(value: any) {
         </slot>
       </legend>
 
-      <component :is="variant === 'list' ? 'div' : Label" v-for="item in normalizedItems" :key="item.value" :class="ui.item({ class: [props.ui?.item, item.ui?.item, item.class] })">
+      <component :is="(!variant || variant === 'list') ? 'div' : Label" v-for="item in normalizedItems" :key="item.value" :class="ui.item({ class: [props.ui?.item, item.ui?.item, item.class] })">
         <div :class="ui.container({ class: [props.ui?.container, item.ui?.container] })">
           <RadioGroupItem
             :id="item.id"
@@ -191,7 +191,7 @@ function onUpdate(value: any) {
         </div>
 
         <div v-if="(item.label || !!slots.label) || (item.description || !!slots.description)" :class="ui.wrapper({ class: [props.ui?.wrapper, item.ui?.wrapper] })">
-          <component :is="variant === 'list' ? Label : 'p'" v-if="item.label || !!slots.label" :for="item.id" :class="ui.label({ class: [props.ui?.label, item.ui?.label] })">
+          <component :is="(!variant || variant === 'list') ? Label : 'p'" v-if="item.label || !!slots.label" :for="item.id" :class="ui.label({ class: [props.ui?.label, item.ui?.label] })">
             <slot name="label" :item="item" :model-value="(modelValue as RadioGroupValue)">
               {{ item.label }}
             </slot>
diff --git a/test/components/__snapshots__/Checkbox-vue.spec.ts.snap b/test/components/__snapshots__/Checkbox-vue.spec.ts.snap
index c75ed138..5598d78d 100644
--- a/test/components/__snapshots__/Checkbox-vue.spec.ts.snap
+++ b/test/components/__snapshots__/Checkbox-vue.spec.ts.snap
@@ -1,191 +1,187 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Checkbox > renders with ariaLabel correctly 1`] = `
-"<label class="relative flex items-start flex-row">
+"<div class="relative flex items-start flex-row">
   <div class="flex items-center h-5"><button aria-label="Aria label" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
       <!---->
       <!---->
     </button></div>
   <!--v-if-->
-</label>"
+</div>"
 `;
 
 exports[`Checkbox > renders with as correctly 1`] = `
-"<label class="relative flex items-start flex-row">
+"<section class="relative flex items-start flex-row">
   <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
       <!---->
       <!---->
     </button></div>
   <!--v-if-->
-</label>"
+</section>"
 `;
 
 exports[`Checkbox > renders with class correctly 1`] = `
-"<label class="relative items-start flex-row inline-flex">
+"<div class="relative items-start flex-row inline-flex">
   <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
       <!---->
       <!---->
     </button></div>
   <!--v-if-->
-</label>"
+</div>"
 `;
 
 exports[`Checkbox > renders with defaultValue correctly 1`] = `
-"<label class="relative flex items-start flex-row">
+"<div class="relative flex items-start flex-row">
   <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked"><span data-state="checked" style="pointer-events: none;" class="flex items-center justify-center size-full text-inverted bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-full" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
       <!---->
     </button></div>
   <!--v-if-->
-</label>"
+</div>"
 `;
 
 exports[`Checkbox > renders with description correctly 1`] = `
-"<label class="relative flex items-start flex-row">
+"<div class="relative flex items-start flex-row">
   <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
       <!---->
       <!---->
     </button></div>
-  <div class="w-full ms-2 text-sm">
-    <p for="v-0" class="block font-medium text-default">Label</p>
+  <div class="w-full ms-2 text-sm"><label for="v-0" class="block font-medium text-default">Label</label>
     <p class="text-muted">Description</p>
   </div>
-</label>"
+</div>"
 `;
 
 exports[`Checkbox > renders with description slot correctly 1`] = `
-"<label class="relative flex items-start flex-row">
+"<div class="relative flex items-start flex-row">
   <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
       <!---->
       <!---->
     </button></div>
-  <div class="w-full ms-2 text-sm">
-    <p for="v-0" class="block font-medium text-default">Description slot</p>
+  <div class="w-full ms-2 text-sm"><label for="v-0" class="block font-medium text-default">Description slot</label>
     <!--v-if-->
   </div>
-</label>"
+</div>"
 `;
 
 exports[`Checkbox > renders with disabled correctly 1`] = `
-"<label class="relative flex items-start flex-row">
+"<div class="relative flex items-start flex-row">
   <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4 cursor-not-allowed opacity-75" id="v-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-disabled="" disabled="">
       <!---->
       <!---->
     </button></div>
   <!--v-if-->
-</label>"
+</div>"
 `;
 
 exports[`Checkbox > renders with icon correctly 1`] = `
-"<label class="relative flex items-start flex-row">
+"<div class="relative flex items-start flex-row">
   <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
       <!---->
       <!---->
     </button></div>
   <!--v-if-->
-</label>"
+</div>"
 `;
 
 exports[`Checkbox > renders with id correctly 1`] = `
-"<label class="relative flex items-start flex-row">
+"<div class="relative flex items-start flex-row">
   <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="id" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
       <!---->
       <!---->
     </button></div>
   <!--v-if-->
-</label>"
+</div>"
 `;
 
 exports[`Checkbox > renders with indeterminate correctly 1`] = `
-"<label class="relative flex items-start flex-row">
+"<div class="relative flex items-start flex-row">
   <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0" role="checkbox" type="button" aria-checked="mixed" aria-required="false" data-state="indeterminate"><span data-state="indeterminate" style="pointer-events: none;" class="flex items-center justify-center size-full text-inverted bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-full" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
       <!---->
     </button></div>
   <!--v-if-->
-</label>"
+</div>"
 `;
 
 exports[`Checkbox > renders with indeterminateIcon correctly 1`] = `
-"<label class="relative flex items-start flex-row">
+"<div class="relative flex items-start flex-row">
   <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0" role="checkbox" type="button" aria-checked="mixed" aria-required="false" data-state="indeterminate"><span data-state="indeterminate" style="pointer-events: none;" class="flex items-center justify-center size-full text-inverted bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-full" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
       <!---->
     </button></div>
   <!--v-if-->
-</label>"
+</div>"
 `;
 
 exports[`Checkbox > renders with indicator end correctly 1`] = `
-"<label class="relative flex items-start flex-row-reverse">
+"<div class="relative flex items-start flex-row-reverse">
   <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0" role="checkbox" type="button" aria-checked="1" aria-required="false" data-state="checked">
       <!---->
       <!---->
     </button></div>
   <!--v-if-->
-</label>"
+</div>"
 `;
 
 exports[`Checkbox > renders with indicator hidden correctly 1`] = `
-"<label class="relative flex items-start">
+"<div class="relative flex items-start">
   <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary sr-only size-4" id="v-0" role="checkbox" type="button" aria-checked="1" aria-required="false" data-state="checked">
       <!---->
       <!---->
     </button></div>
   <!--v-if-->
-</label>"
+</div>"
 `;
 
 exports[`Checkbox > renders with indicator start correctly 1`] = `
-"<label class="relative flex items-start flex-row">
+"<div class="relative flex items-start flex-row">
   <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0" role="checkbox" type="button" aria-checked="1" aria-required="false" data-state="checked">
       <!---->
       <!---->
     </button></div>
   <!--v-if-->
-</label>"
+</div>"
 `;
 
 exports[`Checkbox > renders with label correctly 1`] = `
-"<label class="relative flex items-start flex-row">
+"<div class="relative flex items-start flex-row">
   <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
       <!---->
       <!---->
     </button></div>
-  <div class="w-full ms-2 text-sm">
-    <p for="v-0" class="block font-medium text-default">Label</p>
+  <div class="w-full ms-2 text-sm"><label for="v-0" class="block font-medium text-default">Label</label>
     <!--v-if-->
   </div>
-</label>"
+</div>"
 `;
 
 exports[`Checkbox > renders with label slot correctly 1`] = `
-"<label class="relative flex items-start flex-row">
+"<div class="relative flex items-start flex-row">
   <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
       <!---->
       <!---->
     </button></div>
-  <div class="w-full ms-2 text-sm">
-    <p for="v-0" class="block font-medium text-default">Label slot</p>
+  <div class="w-full ms-2 text-sm"><label for="v-0" class="block font-medium text-default">Label slot</label>
     <!--v-if-->
   </div>
-</label>"
+</div>"
 `;
 
 exports[`Checkbox > renders with modelValue correctly 1`] = `
-"<label class="relative flex items-start flex-row">
+"<div class="relative flex items-start flex-row">
   <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked"><span data-state="checked" style="pointer-events: none;" class="flex items-center justify-center size-full text-inverted bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-full" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
       <!---->
     </button></div>
   <!--v-if-->
-</label>"
+</div>"
 `;
 
 exports[`Checkbox > renders with name correctly 1`] = `
-"<label class="relative flex items-start flex-row">
+"<div class="relative flex items-start flex-row">
   <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
       <!---->
       <!---->
     </button></div>
   <!--v-if-->
-</label>"
+</div>"
 `;
 
 exports[`Checkbox > renders with neutral variant card correctly 1`] = `
@@ -229,84 +225,83 @@ exports[`Checkbox > renders with primary variant list correctly 1`] = `
 `;
 
 exports[`Checkbox > renders with required correctly 1`] = `
-"<label class="relative flex items-start flex-row">
+"<div class="relative flex items-start flex-row">
   <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0" role="checkbox" type="button" aria-checked="false" aria-required="true" data-state="unchecked">
       <!---->
       <!---->
     </button></div>
-  <div class="w-full ms-2 text-sm">
-    <p for="v-0" class="block font-medium text-default after:content-['*'] after:ms-0.5 after:text-error">Label</p>
+  <div class="w-full ms-2 text-sm"><label for="v-0" class="block font-medium text-default after:content-['*'] after:ms-0.5 after:text-error">Label</label>
     <!--v-if-->
   </div>
-</label>"
+</div>"
 `;
 
 exports[`Checkbox > renders with size lg correctly 1`] = `
-"<label class="relative flex items-start flex-row">
+"<div class="relative flex items-start flex-row">
   <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4.5" id="v-0" role="checkbox" type="button" aria-checked="1" aria-required="false" data-state="checked">
       <!---->
       <!---->
     </button></div>
   <!--v-if-->
-</label>"
+</div>"
 `;
 
 exports[`Checkbox > renders with size md correctly 1`] = `
-"<label class="relative flex items-start flex-row">
+"<div class="relative flex items-start flex-row">
   <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0" role="checkbox" type="button" aria-checked="1" aria-required="false" data-state="checked">
       <!---->
       <!---->
     </button></div>
   <!--v-if-->
-</label>"
+</div>"
 `;
 
 exports[`Checkbox > renders with size sm correctly 1`] = `
-"<label class="relative flex items-start flex-row">
+"<div class="relative flex items-start flex-row">
   <div class="flex items-center h-4"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-3.5" id="v-0" role="checkbox" type="button" aria-checked="1" aria-required="false" data-state="checked">
       <!---->
       <!---->
     </button></div>
   <!--v-if-->
-</label>"
+</div>"
 `;
 
 exports[`Checkbox > renders with size xl correctly 1`] = `
-"<label class="relative flex items-start flex-row">
+"<div class="relative flex items-start flex-row">
   <div class="flex items-center h-6"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-5" id="v-0" role="checkbox" type="button" aria-checked="1" aria-required="false" data-state="checked">
       <!---->
       <!---->
     </button></div>
   <!--v-if-->
-</label>"
+</div>"
 `;
 
 exports[`Checkbox > renders with size xs correctly 1`] = `
-"<label class="relative flex items-start flex-row">
+"<div class="relative flex items-start flex-row">
   <div class="flex items-center h-4"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-3" id="v-0" role="checkbox" type="button" aria-checked="1" aria-required="false" data-state="checked">
       <!---->
       <!---->
     </button></div>
   <!--v-if-->
-</label>"
+</div>"
 `;
 
 exports[`Checkbox > renders with ui correctly 1`] = `
-"<label class="relative flex items-start flex-row">
+"<div class="relative flex items-start flex-row">
   <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
       <!---->
       <!---->
     </button></div>
   <!--v-if-->
-</label>"
+</div>"
 `;
 
 exports[`Checkbox > renders with value correctly 1`] = `
-"<label class="relative flex items-start flex-row">
+"<div class="relative flex items-start flex-row">
   <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
       <!---->
       <!---->
     </button></div>
   <!--v-if-->
-</label>"
+</div>"
 `;
diff --git a/test/components/__snapshots__/Checkbox.spec.ts.snap b/test/components/__snapshots__/Checkbox.spec.ts.snap
index 7658c05b..c48ac32a 100644
--- a/test/components/__snapshots__/Checkbox.spec.ts.snap
+++ b/test/components/__snapshots__/Checkbox.spec.ts.snap
@@ -1,191 +1,187 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Checkbox > renders with ariaLabel correctly 1`] = `
-"<label class="relative flex items-start flex-row">
+"<div class="relative flex items-start flex-row">
   <div class="flex items-center h-5"><button aria-label="Aria label" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
       <!---->
       <!---->
     </button></div>
   <!--v-if-->
-</label>"
+</div>"
 `;
 
 exports[`Checkbox > renders with as correctly 1`] = `
-"<label class="relative flex items-start flex-row">
+"<section class="relative flex items-start flex-row">
   <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
       <!---->
       <!---->
     </button></div>
   <!--v-if-->
-</label>"
+</section>"
 `;
 
 exports[`Checkbox > renders with class correctly 1`] = `
-"<label class="relative items-start flex-row inline-flex">
+"<div class="relative items-start flex-row inline-flex">
   <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
       <!---->
       <!---->
     </button></div>
   <!--v-if-->
-</label>"
+</div>"
 `;
 
 exports[`Checkbox > renders with defaultValue correctly 1`] = `
-"<label class="relative flex items-start flex-row">
+"<div class="relative flex items-start flex-row">
   <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked"><span data-state="checked" style="pointer-events: none;" class="flex items-center justify-center size-full text-inverted bg-primary"><span class="iconify i-lucide:check shrink-0 size-full" aria-hidden="true"></span></span>
       <!---->
     </button></div>
   <!--v-if-->
-</label>"
+</div>"
 `;
 
 exports[`Checkbox > renders with description correctly 1`] = `
-"<label class="relative flex items-start flex-row">
+"<div class="relative flex items-start flex-row">
   <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
       <!---->
       <!---->
     </button></div>
-  <div class="w-full ms-2 text-sm">
-    <p for="v-0-0" class="block font-medium text-default">Label</p>
+  <div class="w-full ms-2 text-sm"><label for="v-0-0" class="block font-medium text-default">Label</label>
     <p class="text-muted">Description</p>
   </div>
-</label>"
+</div>"
 `;
 
 exports[`Checkbox > renders with description slot correctly 1`] = `
-"<label class="relative flex items-start flex-row">
+"<div class="relative flex items-start flex-row">
   <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
       <!---->
       <!---->
     </button></div>
-  <div class="w-full ms-2 text-sm">
-    <p for="v-0-0" class="block font-medium text-default">Description slot</p>
+  <div class="w-full ms-2 text-sm"><label for="v-0-0" class="block font-medium text-default">Description slot</label>
     <!--v-if-->
   </div>
-</label>"
+</div>"
 `;
 
 exports[`Checkbox > renders with disabled correctly 1`] = `
-"<label class="relative flex items-start flex-row">
+"<div class="relative flex items-start flex-row">
   <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4 cursor-not-allowed opacity-75" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-disabled="" disabled="">
       <!---->
       <!---->
     </button></div>
   <!--v-if-->
-</label>"
+</div>"
 `;
 
 exports[`Checkbox > renders with icon correctly 1`] = `
-"<label class="relative flex items-start flex-row">
+"<div class="relative flex items-start flex-row">
   <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
       <!---->
       <!---->
     </button></div>
   <!--v-if-->
-</label>"
+</div>"
 `;
 
 exports[`Checkbox > renders with id correctly 1`] = `
-"<label class="relative flex items-start flex-row">
+"<div class="relative flex items-start flex-row">
   <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="id" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
       <!---->
       <!---->
     </button></div>
   <!--v-if-->
-</label>"
+</div>"
 `;
 
 exports[`Checkbox > renders with indeterminate correctly 1`] = `
-"<label class="relative flex items-start flex-row">
+"<div class="relative flex items-start flex-row">
   <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0" role="checkbox" type="button" aria-checked="mixed" aria-required="false" data-state="indeterminate"><span data-state="indeterminate" style="pointer-events: none;" class="flex items-center justify-center size-full text-inverted bg-primary"><span class="iconify i-lucide:minus shrink-0 size-full" aria-hidden="true"></span></span>
       <!---->
     </button></div>
   <!--v-if-->
-</label>"
+</div>"
 `;
 
 exports[`Checkbox > renders with indeterminateIcon correctly 1`] = `
-"<label class="relative flex items-start flex-row">
+"<div class="relative flex items-start flex-row">
   <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0" role="checkbox" type="button" aria-checked="mixed" aria-required="false" data-state="indeterminate"><span data-state="indeterminate" style="pointer-events: none;" class="flex items-center justify-center size-full text-inverted bg-primary"><span class="iconify i-lucide:trash shrink-0 size-full" aria-hidden="true"></span></span>
       <!---->
     </button></div>
   <!--v-if-->
-</label>"
+</div>"
 `;
 
 exports[`Checkbox > renders with indicator end correctly 1`] = `
-"<label class="relative flex items-start flex-row-reverse">
+"<div class="relative flex items-start flex-row-reverse">
   <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0" role="checkbox" type="button" aria-checked="1" aria-required="false" data-state="checked">
       <!---->
       <!---->
     </button></div>
   <!--v-if-->
-</label>"
+</div>"
 `;
 
 exports[`Checkbox > renders with indicator hidden correctly 1`] = `
-"<label class="relative flex items-start">
+"<div class="relative flex items-start">
   <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary sr-only size-4" id="v-0-0" role="checkbox" type="button" aria-checked="1" aria-required="false" data-state="checked">
       <!---->
       <!---->
     </button></div>
   <!--v-if-->
-</label>"
+</div>"
 `;
 
 exports[`Checkbox > renders with indicator start correctly 1`] = `
-"<label class="relative flex items-start flex-row">
+"<div class="relative flex items-start flex-row">
   <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0" role="checkbox" type="button" aria-checked="1" aria-required="false" data-state="checked">
       <!---->
       <!---->
     </button></div>
   <!--v-if-->
-</label>"
+</div>"
 `;
 
 exports[`Checkbox > renders with label correctly 1`] = `
-"<label class="relative flex items-start flex-row">
+"<div class="relative flex items-start flex-row">
   <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
       <!---->
       <!---->
     </button></div>
-  <div class="w-full ms-2 text-sm">
-    <p for="v-0-0" class="block font-medium text-default">Label</p>
+  <div class="w-full ms-2 text-sm"><label for="v-0-0" class="block font-medium text-default">Label</label>
     <!--v-if-->
   </div>
-</label>"
+</div>"
 `;
 
 exports[`Checkbox > renders with label slot correctly 1`] = `
-"<label class="relative flex items-start flex-row">
+"<div class="relative flex items-start flex-row">
   <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
       <!---->
       <!---->
     </button></div>
-  <div class="w-full ms-2 text-sm">
-    <p for="v-0-0" class="block font-medium text-default">Label slot</p>
+  <div class="w-full ms-2 text-sm"><label for="v-0-0" class="block font-medium text-default">Label slot</label>
     <!--v-if-->
   </div>
-</label>"
+</div>"
 `;
 
 exports[`Checkbox > renders with modelValue correctly 1`] = `
-"<label class="relative flex items-start flex-row">
+"<div class="relative flex items-start flex-row">
   <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked"><span data-state="checked" style="pointer-events: none;" class="flex items-center justify-center size-full text-inverted bg-primary"><span class="iconify i-lucide:check shrink-0 size-full" aria-hidden="true"></span></span>
       <!---->
     </button></div>
   <!--v-if-->
-</label>"
+</div>"
 `;
 
 exports[`Checkbox > renders with name correctly 1`] = `
-"<label class="relative flex items-start flex-row">
+"<div class="relative flex items-start flex-row">
   <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
       <!---->
       <!---->
     </button></div>
   <!--v-if-->
-</label>"
+</div>"
 `;
 
 exports[`Checkbox > renders with neutral variant card correctly 1`] = `
@@ -229,84 +225,83 @@ exports[`Checkbox > renders with primary variant list correctly 1`] = `
 `;
 
 exports[`Checkbox > renders with required correctly 1`] = `
-"<label class="relative flex items-start flex-row">
+"<div class="relative flex items-start flex-row">
   <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="true" data-state="unchecked">
       <!---->
       <!---->
     </button></div>
-  <div class="w-full ms-2 text-sm">
-    <p for="v-0-0" class="block font-medium text-default after:content-['*'] after:ms-0.5 after:text-error">Label</p>
+  <div class="w-full ms-2 text-sm"><label for="v-0-0" class="block font-medium text-default after:content-['*'] after:ms-0.5 after:text-error">Label</label>
     <!--v-if-->
   </div>
-</label>"
+</div>"
 `;
 
 exports[`Checkbox > renders with size lg correctly 1`] = `
-"<label class="relative flex items-start flex-row">
+"<div class="relative flex items-start flex-row">
   <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4.5" id="v-0-0" role="checkbox" type="button" aria-checked="1" aria-required="false" data-state="checked">
       <!---->
       <!---->
     </button></div>
   <!--v-if-->
-</label>"
+</div>"
 `;
 
 exports[`Checkbox > renders with size md correctly 1`] = `
-"<label class="relative flex items-start flex-row">
+"<div class="relative flex items-start flex-row">
   <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0" role="checkbox" type="button" aria-checked="1" aria-required="false" data-state="checked">
       <!---->
       <!---->
     </button></div>
   <!--v-if-->
-</label>"
+</div>"
 `;
 
 exports[`Checkbox > renders with size sm correctly 1`] = `
-"<label class="relative flex items-start flex-row">
+"<div class="relative flex items-start flex-row">
   <div class="flex items-center h-4"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-3.5" id="v-0-0" role="checkbox" type="button" aria-checked="1" aria-required="false" data-state="checked">
       <!---->
       <!---->
     </button></div>
   <!--v-if-->
-</label>"
+</div>"
 `;
 
 exports[`Checkbox > renders with size xl correctly 1`] = `
-"<label class="relative flex items-start flex-row">
+"<div class="relative flex items-start flex-row">
   <div class="flex items-center h-6"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-5" id="v-0-0" role="checkbox" type="button" aria-checked="1" aria-required="false" data-state="checked">
       <!---->
       <!---->
     </button></div>
   <!--v-if-->
-</label>"
+</div>"
 `;
 
 exports[`Checkbox > renders with size xs correctly 1`] = `
-"<label class="relative flex items-start flex-row">
+"<div class="relative flex items-start flex-row">
   <div class="flex items-center h-4"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-3" id="v-0-0" role="checkbox" type="button" aria-checked="1" aria-required="false" data-state="checked">
       <!---->
       <!---->
     </button></div>
   <!--v-if-->
-</label>"
+</div>"
 `;
 
 exports[`Checkbox > renders with ui correctly 1`] = `
-"<label class="relative flex items-start flex-row">
+"<div class="relative flex items-start flex-row">
   <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
       <!---->
       <!---->
     </button></div>
   <!--v-if-->
-</label>"
+</div>"
 `;
 
 exports[`Checkbox > renders with value correctly 1`] = `
-"<label class="relative flex items-start flex-row">
+"<div class="relative flex items-start flex-row">
   <div class="flex items-center h-5"><button class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
       <!---->
       <!---->
     </button></div>
   <!--v-if-->
-</label>"
+</div>"
 `;
diff --git a/test/components/__snapshots__/CheckboxGroup-vue.spec.ts.snap b/test/components/__snapshots__/CheckboxGroup-vue.spec.ts.snap
index 0c48889d..1e7b1f8a 100644
--- a/test/components/__snapshots__/CheckboxGroup-vue.spec.ts.snap
+++ b/test/components/__snapshots__/CheckboxGroup-vue.spec.ts.snap
@@ -3,34 +3,34 @@
 exports[`CheckboxGroup > renders with ariaLabel correctly 1`] = `
 "<div tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0" class="relative" aria-label="Aria label">
   <fieldset class="flex gap-x-2 flex-col gap-y-1">
-    <!--v-if--><label class="relative flex items-start flex-row">
+    <!--v-if-->
+    <div class="relative flex items-start flex-row">
       <div class="flex items-center h-5"><button tabindex="-1" data-orientation="vertical" 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:1" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2 text-sm">
-        <p for="v-0:1" class="block font-medium text-default">Option 1</p>
+      <div class="w-full ms-2 text-sm"><label for="v-0:1" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
-    </label><label class="relative flex items-start flex-row">
+    </div>
+    <div class="relative flex items-start flex-row">
       <div class="flex items-center h-5"><button tabindex="-1" data-orientation="vertical" 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:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2 text-sm">
-        <p for="v-0:2" class="block font-medium text-default">Option 2</p>
+      <div class="w-full ms-2 text-sm"><label for="v-0:2" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
-    </label><label class="relative flex items-start flex-row">
+    </div>
+    <div class="relative flex items-start flex-row">
       <div class="flex items-center h-5"><button tabindex="-1" data-orientation="vertical" 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:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2 text-sm">
-        <p for="v-0:3" class="block font-medium text-default">Option 3</p>
+      <div class="w-full ms-2 text-sm"><label for="v-0:3" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
-    </label>
+    </div>
   </fieldset>
   <!---->
 </div>"
@@ -39,34 +39,34 @@ exports[`CheckboxGroup > renders with ariaLabel correctly 1`] = `
 exports[`CheckboxGroup > renders with as correctly 1`] = `
 "<section tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0" class="relative">
   <fieldset class="flex gap-x-2 flex-col gap-y-1">
-    <!--v-if--><label class="relative flex items-start flex-row">
+    <!--v-if-->
+    <div class="relative flex items-start flex-row">
       <div class="flex items-center h-5"><button tabindex="-1" data-orientation="vertical" 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:1" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2 text-sm">
-        <p for="v-0:1" class="block font-medium text-default">Option 1</p>
+      <div class="w-full ms-2 text-sm"><label for="v-0:1" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
-    </label><label class="relative flex items-start flex-row">
+    </div>
+    <div class="relative flex items-start flex-row">
       <div class="flex items-center h-5"><button tabindex="-1" data-orientation="vertical" 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:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2 text-sm">
-        <p for="v-0:2" class="block font-medium text-default">Option 2</p>
+      <div class="w-full ms-2 text-sm"><label for="v-0:2" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
-    </label><label class="relative flex items-start flex-row">
+    </div>
+    <div class="relative flex items-start flex-row">
       <div class="flex items-center h-5"><button tabindex="-1" data-orientation="vertical" 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:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2 text-sm">
-        <p for="v-0:3" class="block font-medium text-default">Option 3</p>
+      <div class="w-full ms-2 text-sm"><label for="v-0:3" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
-    </label>
+    </div>
   </fieldset>
   <!---->
 </section>"
@@ -75,34 +75,34 @@ exports[`CheckboxGroup > renders with as correctly 1`] = `
 exports[`CheckboxGroup > renders with class correctly 1`] = `
 "<div tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0" class="absolute">
   <fieldset class="flex gap-x-2 flex-col gap-y-1">
-    <!--v-if--><label class="relative flex items-start flex-row">
+    <!--v-if-->
+    <div class="relative flex items-start flex-row">
       <div class="flex items-center h-5"><button tabindex="-1" data-orientation="vertical" 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:1" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2 text-sm">
-        <p for="v-0:1" class="block font-medium text-default">Option 1</p>
+      <div class="w-full ms-2 text-sm"><label for="v-0:1" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
-    </label><label class="relative flex items-start flex-row">
+    </div>
+    <div class="relative flex items-start flex-row">
       <div class="flex items-center h-5"><button tabindex="-1" data-orientation="vertical" 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:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2 text-sm">
-        <p for="v-0:2" class="block font-medium text-default">Option 2</p>
+      <div class="w-full ms-2 text-sm"><label for="v-0:2" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
-    </label><label class="relative flex items-start flex-row">
+    </div>
+    <div class="relative flex items-start flex-row">
       <div class="flex items-center h-5"><button tabindex="-1" data-orientation="vertical" 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:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2 text-sm">
-        <p for="v-0:3" class="block font-medium text-default">Option 3</p>
+      <div class="w-full ms-2 text-sm"><label for="v-0:3" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
-    </label>
+    </div>
   </fieldset>
   <!---->
 </div>"
@@ -111,33 +111,33 @@ exports[`CheckboxGroup > renders with class correctly 1`] = `
 exports[`CheckboxGroup > renders with defaultValue correctly 1`] = `
 "<div tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0" class="relative">
   <fieldset class="flex gap-x-2 flex-col gap-y-1">
-    <!--v-if--><label class="relative flex items-start flex-row">
+    <!--v-if-->
+    <div class="relative flex items-start flex-row">
       <div class="flex items-center h-5"><button tabindex="-1" data-orientation="vertical" 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:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item=""><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>
-      <div class="w-full ms-2 text-sm">
-        <p for="v-0:1" class="block font-medium text-default">Option 1</p>
+      <div class="w-full ms-2 text-sm"><label for="v-0:1" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
-    </label><label class="relative flex items-start flex-row">
+    </div>
+    <div class="relative flex items-start flex-row">
       <div class="flex items-center h-5"><button tabindex="-1" data-orientation="vertical" 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:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2 text-sm">
-        <p for="v-0:2" class="block font-medium text-default">Option 2</p>
+      <div class="w-full ms-2 text-sm"><label for="v-0:2" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
-    </label><label class="relative flex items-start flex-row">
+    </div>
+    <div class="relative flex items-start flex-row">
       <div class="flex items-center h-5"><button tabindex="-1" data-orientation="vertical" 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:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2 text-sm">
-        <p for="v-0:3" class="block font-medium text-default">Option 3</p>
+      <div class="w-full ms-2 text-sm"><label for="v-0:3" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
-    </label>
+    </div>
   </fieldset>
   <!---->
 </div>"
@@ -146,34 +146,34 @@ exports[`CheckboxGroup > renders with defaultValue correctly 1`] = `
 exports[`CheckboxGroup > renders with description correctly 1`] = `
 "<div tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0" class="relative">
   <fieldset class="flex gap-x-2 flex-col gap-y-1">
-    <!--v-if--><label class="relative flex items-start flex-row">
+    <!--v-if-->
+    <div class="relative flex items-start flex-row">
       <div class="flex items-center h-5"><button tabindex="-1" data-orientation="vertical" 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:1" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2 text-sm">
-        <p for="v-0:1" class="block font-medium text-default">Option 1</p>
+      <div class="w-full ms-2 text-sm"><label for="v-0:1" class="block font-medium text-default">Option 1</label>
         <p class="text-muted">Description 0</p>
       </div>
-    </label><label class="relative flex items-start flex-row">
+    </div>
+    <div class="relative flex items-start flex-row">
       <div class="flex items-center h-5"><button tabindex="-1" data-orientation="vertical" 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:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2 text-sm">
-        <p for="v-0:2" class="block font-medium text-default">Option 2</p>
+      <div class="w-full ms-2 text-sm"><label for="v-0:2" class="block font-medium text-default">Option 2</label>
         <p class="text-muted">Description 1</p>
       </div>
-    </label><label class="relative flex items-start flex-row">
+    </div>
+    <div class="relative flex items-start flex-row">
       <div class="flex items-center h-5"><button tabindex="-1" data-orientation="vertical" 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:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2 text-sm">
-        <p for="v-0:3" class="block font-medium text-default">Option 3</p>
+      <div class="w-full ms-2 text-sm"><label for="v-0:3" class="block font-medium text-default">Option 3</label>
         <p class="text-muted">Description 2</p>
       </div>
-    </label>
+    </div>
   </fieldset>
   <!---->
 </div>"
@@ -182,34 +182,34 @@ exports[`CheckboxGroup > renders with description correctly 1`] = `
 exports[`CheckboxGroup > renders with description slot correctly 1`] = `
 "<div tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0" class="relative">
   <fieldset class="flex gap-x-2 flex-col gap-y-1">
-    <!--v-if--><label class="relative flex items-start flex-row">
+    <!--v-if-->
+    <div class="relative flex items-start flex-row">
       <div class="flex items-center h-5"><button tabindex="-1" data-orientation="vertical" 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:1" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2 text-sm">
-        <p for="v-0:1" class="block font-medium text-default">Option 1</p>
+      <div class="w-full ms-2 text-sm"><label for="v-0:1" class="block font-medium text-default">Option 1</label>
         <p class="text-muted">Description slot</p>
       </div>
-    </label><label class="relative flex items-start flex-row">
+    </div>
+    <div class="relative flex items-start flex-row">
       <div class="flex items-center h-5"><button tabindex="-1" data-orientation="vertical" 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:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2 text-sm">
-        <p for="v-0:2" class="block font-medium text-default">Option 2</p>
+      <div class="w-full ms-2 text-sm"><label for="v-0:2" class="block font-medium text-default">Option 2</label>
         <p class="text-muted">Description slot</p>
       </div>
-    </label><label class="relative flex items-start flex-row">
+    </div>
+    <div class="relative flex items-start flex-row">
       <div class="flex items-center h-5"><button tabindex="-1" data-orientation="vertical" 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:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2 text-sm">
-        <p for="v-0:3" class="block font-medium text-default">Option 3</p>
+      <div class="w-full ms-2 text-sm"><label for="v-0:3" class="block font-medium text-default">Option 3</label>
         <p class="text-muted">Description slot</p>
       </div>
-    </label>
+    </div>
   </fieldset>
   <!---->
 </div>"
@@ -218,34 +218,34 @@ exports[`CheckboxGroup > renders with description slot correctly 1`] = `
 exports[`CheckboxGroup > renders with descriptionKey correctly 1`] = `
 "<div tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0" class="relative">
   <fieldset class="flex gap-x-2 flex-col gap-y-1">
-    <!--v-if--><label class="relative flex items-start flex-row">
+    <!--v-if-->
+    <div class="relative flex items-start flex-row">
       <div class="flex items-center h-5"><button tabindex="-1" data-orientation="vertical" 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:1" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2 text-sm">
-        <p for="v-0:1" class="block font-medium text-default">Option 1</p>
+      <div class="w-full ms-2 text-sm"><label for="v-0:1" class="block font-medium text-default">Option 1</label>
         <p class="text-muted">1</p>
       </div>
-    </label><label class="relative flex items-start flex-row">
+    </div>
+    <div class="relative flex items-start flex-row">
       <div class="flex items-center h-5"><button tabindex="-1" data-orientation="vertical" 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:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2 text-sm">
-        <p for="v-0:2" class="block font-medium text-default">Option 2</p>
+      <div class="w-full ms-2 text-sm"><label for="v-0:2" class="block font-medium text-default">Option 2</label>
         <p class="text-muted">2</p>
       </div>
-    </label><label class="relative flex items-start flex-row">
+    </div>
+    <div class="relative flex items-start flex-row">
       <div class="flex items-center h-5"><button tabindex="-1" data-orientation="vertical" 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:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2 text-sm">
-        <p for="v-0:3" class="block font-medium text-default">Option 3</p>
+      <div class="w-full ms-2 text-sm"><label for="v-0:3" class="block font-medium text-default">Option 3</label>
         <p class="text-muted">3</p>
       </div>
-    </label>
+    </div>
   </fieldset>
   <!---->
 </div>"
@@ -254,34 +254,34 @@ exports[`CheckboxGroup > renders with descriptionKey correctly 1`] = `
 exports[`CheckboxGroup > renders with disabled correctly 1`] = `
 "<div tabindex="-1" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0" class="relative">
   <fieldset class="flex gap-x-2 flex-col gap-y-1">
-    <!--v-if--><label class="relative flex items-start flex-row">
+    <!--v-if-->
+    <div class="relative flex items-start flex-row">
       <div class="flex items-center h-5"><button tabindex="-1" data-orientation="vertical" data-disabled="" 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:1" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" disabled="" data-reka-collection-item="">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2 text-sm">
-        <p for="v-0:1" class="block font-medium text-default cursor-not-allowed opacity-75">Option 1</p>
+      <div class="w-full ms-2 text-sm"><label for="v-0:1" class="block font-medium text-default cursor-not-allowed opacity-75">Option 1</label>
         <!--v-if-->
       </div>
-    </label><label class="relative flex items-start flex-row">
+    </div>
+    <div class="relative flex items-start flex-row">
       <div class="flex items-center h-5"><button tabindex="-1" data-orientation="vertical" data-disabled="" 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:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" disabled="" data-reka-collection-item="">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2 text-sm">
-        <p for="v-0:2" class="block font-medium text-default cursor-not-allowed opacity-75">Option 2</p>
+      <div class="w-full ms-2 text-sm"><label for="v-0:2" class="block font-medium text-default cursor-not-allowed opacity-75">Option 2</label>
         <!--v-if-->
       </div>
-    </label><label class="relative flex items-start flex-row">
+    </div>
+    <div class="relative flex items-start flex-row">
       <div class="flex items-center h-5"><button tabindex="-1" data-orientation="vertical" data-disabled="" 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:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" disabled="" data-reka-collection-item="">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2 text-sm">
-        <p for="v-0:3" class="block font-medium text-default cursor-not-allowed opacity-75">Option 3</p>
+      <div class="w-full ms-2 text-sm"><label for="v-0:3" class="block font-medium text-default cursor-not-allowed opacity-75">Option 3</label>
         <!--v-if-->
       </div>
-    </label>
+    </div>
   </fieldset>
   <!---->
 </div>"
@@ -395,33 +395,33 @@ exports[`CheckboxGroup > renders with horizontal variant table correctly 1`] = `
 exports[`CheckboxGroup > renders with indicator end correctly 1`] = `
 "<div tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0" class="relative">
   <fieldset class="flex gap-x-2 flex-col gap-y-1">
-    <!--v-if--><label class="relative flex items-start flex-row-reverse">
+    <!--v-if-->
+    <div class="relative flex items-start flex-row-reverse">
       <div class="flex items-center h-5"><button tabindex="-1" data-orientation="vertical" 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:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item=""><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>
-      <div class="w-full me-2 text-sm">
-        <p for="v-0:1" class="block font-medium text-default">Option 1</p>
+      <div class="w-full me-2 text-sm"><label for="v-0:1" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
-    </label><label class="relative flex items-start flex-row-reverse">
+    </div>
+    <div class="relative flex items-start flex-row-reverse">
       <div class="flex items-center h-5"><button tabindex="-1" data-orientation="vertical" 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:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full me-2 text-sm">
-        <p for="v-0:2" class="block font-medium text-default">Option 2</p>
+      <div class="w-full me-2 text-sm"><label for="v-0:2" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
-    </label><label class="relative flex items-start flex-row-reverse">
+    </div>
+    <div class="relative flex items-start flex-row-reverse">
       <div class="flex items-center h-5"><button tabindex="-1" data-orientation="vertical" 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:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full me-2 text-sm">
-        <p for="v-0:3" class="block font-medium text-default">Option 3</p>
+      <div class="w-full me-2 text-sm"><label for="v-0:3" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
-    </label>
+    </div>
   </fieldset>
   <!---->
 </div>"
@@ -430,33 +430,33 @@ exports[`CheckboxGroup > renders with indicator end correctly 1`] = `
 exports[`CheckboxGroup > renders with indicator hidden correctly 1`] = `
 "<div tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0" class="relative">
   <fieldset class="flex gap-x-2 flex-col gap-y-1">
-    <!--v-if--><label class="relative flex items-start">
+    <!--v-if-->
+    <div class="relative flex items-start">
       <div class="flex items-center h-5"><button tabindex="-1" data-orientation="vertical" 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:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item=""><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>
-      <div class="w-full text-center text-sm">
-        <p for="v-0:1" class="block font-medium text-default">Option 1</p>
+      <div class="w-full text-center text-sm"><label for="v-0:1" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
-    </label><label class="relative flex items-start">
+    </div>
+    <div class="relative flex items-start">
       <div class="flex items-center h-5"><button tabindex="-1" data-orientation="vertical" 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:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full text-center text-sm">
-        <p for="v-0:2" class="block font-medium text-default">Option 2</p>
+      <div class="w-full text-center text-sm"><label for="v-0:2" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
-    </label><label class="relative flex items-start">
+    </div>
+    <div class="relative flex items-start">
       <div class="flex items-center h-5"><button tabindex="-1" data-orientation="vertical" 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:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full text-center text-sm">
-        <p for="v-0:3" class="block font-medium text-default">Option 3</p>
+      <div class="w-full text-center text-sm"><label for="v-0:3" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
-    </label>
+    </div>
   </fieldset>
   <!---->
 </div>"
@@ -465,33 +465,33 @@ exports[`CheckboxGroup > renders with indicator hidden correctly 1`] = `
 exports[`CheckboxGroup > renders with indicator start correctly 1`] = `
 "<div tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0" class="relative">
   <fieldset class="flex gap-x-2 flex-col gap-y-1">
-    <!--v-if--><label class="relative flex items-start flex-row">
+    <!--v-if-->
+    <div class="relative flex items-start flex-row">
       <div class="flex items-center h-5"><button tabindex="-1" data-orientation="vertical" 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:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item=""><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>
-      <div class="w-full ms-2 text-sm">
-        <p for="v-0:1" class="block font-medium text-default">Option 1</p>
+      <div class="w-full ms-2 text-sm"><label for="v-0:1" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
-    </label><label class="relative flex items-start flex-row">
+    </div>
+    <div class="relative flex items-start flex-row">
       <div class="flex items-center h-5"><button tabindex="-1" data-orientation="vertical" 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:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2 text-sm">
-        <p for="v-0:2" class="block font-medium text-default">Option 2</p>
+      <div class="w-full ms-2 text-sm"><label for="v-0:2" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
-    </label><label class="relative flex items-start flex-row">
+    </div>
+    <div class="relative flex items-start flex-row">
       <div class="flex items-center h-5"><button tabindex="-1" data-orientation="vertical" 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:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2 text-sm">
-        <p for="v-0:3" class="block font-medium text-default">Option 3</p>
+      <div class="w-full ms-2 text-sm"><label for="v-0:3" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
-    </label>
+    </div>
   </fieldset>
   <!---->
 </div>"
@@ -500,34 +500,34 @@ exports[`CheckboxGroup > renders with indicator start correctly 1`] = `
 exports[`CheckboxGroup > renders with items correctly 1`] = `
 "<div tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0" class="relative">
   <fieldset class="flex gap-x-2 flex-col gap-y-1">
-    <!--v-if--><label class="relative flex items-start flex-row">
+    <!--v-if-->
+    <div class="relative flex items-start flex-row">
       <div class="flex items-center h-5"><button tabindex="-1" data-orientation="vertical" 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:1" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2 text-sm">
-        <p for="v-0:1" class="block font-medium text-default">Option 1</p>
+      <div class="w-full ms-2 text-sm"><label for="v-0:1" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
-    </label><label class="relative flex items-start flex-row">
+    </div>
+    <div class="relative flex items-start flex-row">
       <div class="flex items-center h-5"><button tabindex="-1" data-orientation="vertical" 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:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2 text-sm">
-        <p for="v-0:2" class="block font-medium text-default">Option 2</p>
+      <div class="w-full ms-2 text-sm"><label for="v-0:2" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
-    </label><label class="relative flex items-start flex-row">
+    </div>
+    <div class="relative flex items-start flex-row">
       <div class="flex items-center h-5"><button tabindex="-1" data-orientation="vertical" 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:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2 text-sm">
-        <p for="v-0:3" class="block font-medium text-default">Option 3</p>
+      <div class="w-full ms-2 text-sm"><label for="v-0:3" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
-    </label>
+    </div>
   </fieldset>
   <!---->
 </div>"
@@ -536,34 +536,34 @@ exports[`CheckboxGroup > renders with items correctly 1`] = `
 exports[`CheckboxGroup > renders with label slot correctly 1`] = `
 "<div tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0" class="relative">
   <fieldset class="flex gap-x-2 flex-col gap-y-1">
-    <!--v-if--><label class="relative flex items-start flex-row">
+    <!--v-if-->
+    <div class="relative flex items-start flex-row">
       <div class="flex items-center h-5"><button tabindex="-1" data-orientation="vertical" 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:1" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2 text-sm">
-        <p for="v-0:1" class="block font-medium text-default">Label slot</p>
+      <div class="w-full ms-2 text-sm"><label for="v-0:1" class="block font-medium text-default">Label slot</label>
         <!--v-if-->
       </div>
-    </label><label class="relative flex items-start flex-row">
+    </div>
+    <div class="relative flex items-start flex-row">
       <div class="flex items-center h-5"><button tabindex="-1" data-orientation="vertical" 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:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2 text-sm">
-        <p for="v-0:2" class="block font-medium text-default">Label slot</p>
+      <div class="w-full ms-2 text-sm"><label for="v-0:2" class="block font-medium text-default">Label slot</label>
         <!--v-if-->
       </div>
-    </label><label class="relative flex items-start flex-row">
+    </div>
+    <div class="relative flex items-start flex-row">
       <div class="flex items-center h-5"><button tabindex="-1" data-orientation="vertical" 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:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2 text-sm">
-        <p for="v-0:3" class="block font-medium text-default">Label slot</p>
+      <div class="w-full ms-2 text-sm"><label for="v-0:3" class="block font-medium text-default">Label slot</label>
         <!--v-if-->
       </div>
-    </label>
+    </div>
   </fieldset>
   <!---->
 </div>"
@@ -572,34 +572,34 @@ exports[`CheckboxGroup > renders with label slot correctly 1`] = `
 exports[`CheckboxGroup > renders with labelKey correctly 1`] = `
 "<div tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0" class="relative">
   <fieldset class="flex gap-x-2 flex-col gap-y-1">
-    <!--v-if--><label class="relative flex items-start flex-row">
+    <!--v-if-->
+    <div class="relative flex items-start flex-row">
       <div class="flex items-center h-5"><button tabindex="-1" data-orientation="vertical" 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:1" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2 text-sm">
-        <p for="v-0:1" class="block font-medium text-default">1</p>
+      <div class="w-full ms-2 text-sm"><label for="v-0:1" class="block font-medium text-default">1</label>
         <!--v-if-->
       </div>
-    </label><label class="relative flex items-start flex-row">
+    </div>
+    <div class="relative flex items-start flex-row">
       <div class="flex items-center h-5"><button tabindex="-1" data-orientation="vertical" 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:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2 text-sm">
-        <p for="v-0:2" class="block font-medium text-default">2</p>
+      <div class="w-full ms-2 text-sm"><label for="v-0:2" class="block font-medium text-default">2</label>
         <!--v-if-->
       </div>
-    </label><label class="relative flex items-start flex-row">
+    </div>
+    <div class="relative flex items-start flex-row">
       <div class="flex items-center h-5"><button tabindex="-1" data-orientation="vertical" 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:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2 text-sm">
-        <p for="v-0:3" class="block font-medium text-default">3</p>
+      <div class="w-full ms-2 text-sm"><label for="v-0:3" class="block font-medium text-default">3</label>
         <!--v-if-->
       </div>
-    </label>
+    </div>
   </fieldset>
   <!---->
 </div>"
@@ -608,34 +608,34 @@ exports[`CheckboxGroup > renders with labelKey correctly 1`] = `
 exports[`CheckboxGroup > renders with legend slot correctly 1`] = `
 "<div tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0" class="relative">
   <fieldset class="flex gap-x-2 flex-col gap-y-1">
-    <legend class="mb-1 block font-medium text-default text-sm">Legend slot</legend><label class="relative flex items-start flex-row">
+    <legend class="mb-1 block font-medium text-default text-sm">Legend slot</legend>
+    <div class="relative flex items-start flex-row">
       <div class="flex items-center h-5"><button tabindex="-1" data-orientation="vertical" 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:1" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2 text-sm">
-        <p for="v-0:1" class="block font-medium text-default">Option 1</p>
+      <div class="w-full ms-2 text-sm"><label for="v-0:1" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
-    </label><label class="relative flex items-start flex-row">
+    </div>
+    <div class="relative flex items-start flex-row">
       <div class="flex items-center h-5"><button tabindex="-1" data-orientation="vertical" 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:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2 text-sm">
-        <p for="v-0:2" class="block font-medium text-default">Option 2</p>
+      <div class="w-full ms-2 text-sm"><label for="v-0:2" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
-    </label><label class="relative flex items-start flex-row">
+    </div>
+    <div class="relative flex items-start flex-row">
       <div class="flex items-center h-5"><button tabindex="-1" data-orientation="vertical" 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:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2 text-sm">
-        <p for="v-0:3" class="block font-medium text-default">Option 3</p>
+      <div class="w-full ms-2 text-sm"><label for="v-0:3" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
-    </label>
+    </div>
   </fieldset>
   <!---->
 </div>"
@@ -644,33 +644,33 @@ exports[`CheckboxGroup > renders with legend slot correctly 1`] = `
 exports[`CheckboxGroup > renders with modelValue correctly 1`] = `
 "<div tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0" class="relative">
   <fieldset class="flex gap-x-2 flex-col gap-y-1">
-    <!--v-if--><label class="relative flex items-start flex-row">
+    <!--v-if-->
+    <div class="relative flex items-start flex-row">
       <div class="flex items-center h-5"><button tabindex="-1" data-orientation="vertical" 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:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item=""><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>
-      <div class="w-full ms-2 text-sm">
-        <p for="v-0:1" class="block font-medium text-default">Option 1</p>
+      <div class="w-full ms-2 text-sm"><label for="v-0:1" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
-    </label><label class="relative flex items-start flex-row">
+    </div>
+    <div class="relative flex items-start flex-row">
       <div class="flex items-center h-5"><button tabindex="-1" data-orientation="vertical" 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:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2 text-sm">
-        <p for="v-0:2" class="block font-medium text-default">Option 2</p>
+      <div class="w-full ms-2 text-sm"><label for="v-0:2" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
-    </label><label class="relative flex items-start flex-row">
+    </div>
+    <div class="relative flex items-start flex-row">
       <div class="flex items-center h-5"><button tabindex="-1" data-orientation="vertical" 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:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2 text-sm">
-        <p for="v-0:3" class="block font-medium text-default">Option 3</p>
+      <div class="w-full ms-2 text-sm"><label for="v-0:3" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
-    </label>
+    </div>
   </fieldset>
   <!---->
 </div>"
@@ -889,34 +889,34 @@ exports[`CheckboxGroup > renders with primary variant table correctly 1`] = `
 exports[`CheckboxGroup > renders with required correctly 1`] = `
 "<div tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0" class="relative">
   <fieldset class="flex gap-x-2 flex-col gap-y-1">
-    <legend class="mb-1 block font-medium text-default text-sm after:content-['*'] after:ms-0.5 after:text-error">Legend</legend><label class="relative flex items-start flex-row">
+    <legend class="mb-1 block font-medium text-default text-sm after:content-['*'] after:ms-0.5 after:text-error">Legend</legend>
+    <div class="relative flex items-start flex-row">
       <div class="flex items-center h-5"><button tabindex="-1" data-orientation="vertical" 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:1" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2 text-sm">
-        <p for="v-0:1" class="block font-medium text-default">Option 1</p>
+      <div class="w-full ms-2 text-sm"><label for="v-0:1" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
-    </label><label class="relative flex items-start flex-row">
+    </div>
+    <div class="relative flex items-start flex-row">
       <div class="flex items-center h-5"><button tabindex="-1" data-orientation="vertical" 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:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2 text-sm">
-        <p for="v-0:2" class="block font-medium text-default">Option 2</p>
+      <div class="w-full ms-2 text-sm"><label for="v-0:2" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
-    </label><label class="relative flex items-start flex-row">
+    </div>
+    <div class="relative flex items-start flex-row">
       <div class="flex items-center h-5"><button tabindex="-1" data-orientation="vertical" 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:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2 text-sm">
-        <p for="v-0:3" class="block font-medium text-default">Option 3</p>
+      <div class="w-full ms-2 text-sm"><label for="v-0:3" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
-    </label>
+    </div>
   </fieldset>
   <!---->
 </div>"
@@ -925,33 +925,33 @@ exports[`CheckboxGroup > renders with required correctly 1`] = `
 exports[`CheckboxGroup > renders with size lg correctly 1`] = `
 "<div tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0" class="relative">
   <fieldset class="flex gap-x-2 flex-col gap-y-1">
-    <!--v-if--><label class="relative flex items-start flex-row">
+    <!--v-if-->
+    <div class="relative flex items-start flex-row">
       <div class="flex items-center h-5"><button tabindex="-1" data-orientation="vertical" 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:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item=""><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>
-      <div class="w-full ms-2 text-sm">
-        <p for="v-0:1" class="block font-medium text-default">Option 1</p>
+      <div class="w-full ms-2 text-sm"><label for="v-0:1" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
-    </label><label class="relative flex items-start flex-row">
+    </div>
+    <div class="relative flex items-start flex-row">
       <div class="flex items-center h-5"><button tabindex="-1" data-orientation="vertical" 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:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2 text-sm">
-        <p for="v-0:2" class="block font-medium text-default">Option 2</p>
+      <div class="w-full ms-2 text-sm"><label for="v-0:2" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
-    </label><label class="relative flex items-start flex-row">
+    </div>
+    <div class="relative flex items-start flex-row">
       <div class="flex items-center h-5"><button tabindex="-1" data-orientation="vertical" 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:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2 text-sm">
-        <p for="v-0:3" class="block font-medium text-default">Option 3</p>
+      <div class="w-full ms-2 text-sm"><label for="v-0:3" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
-    </label>
+    </div>
   </fieldset>
   <!---->
 </div>"
@@ -960,33 +960,33 @@ exports[`CheckboxGroup > renders with size lg correctly 1`] = `
 exports[`CheckboxGroup > renders with size md correctly 1`] = `
 "<div tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0" class="relative">
   <fieldset class="flex gap-x-2 flex-col gap-y-1">
-    <!--v-if--><label class="relative flex items-start flex-row">
+    <!--v-if-->
+    <div class="relative flex items-start flex-row">
       <div class="flex items-center h-5"><button tabindex="-1" data-orientation="vertical" 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:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item=""><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>
-      <div class="w-full ms-2 text-sm">
-        <p for="v-0:1" class="block font-medium text-default">Option 1</p>
+      <div class="w-full ms-2 text-sm"><label for="v-0:1" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
-    </label><label class="relative flex items-start flex-row">
+    </div>
+    <div class="relative flex items-start flex-row">
       <div class="flex items-center h-5"><button tabindex="-1" data-orientation="vertical" 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:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2 text-sm">
-        <p for="v-0:2" class="block font-medium text-default">Option 2</p>
+      <div class="w-full ms-2 text-sm"><label for="v-0:2" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
-    </label><label class="relative flex items-start flex-row">
+    </div>
+    <div class="relative flex items-start flex-row">
       <div class="flex items-center h-5"><button tabindex="-1" data-orientation="vertical" 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:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2 text-sm">
-        <p for="v-0:3" class="block font-medium text-default">Option 3</p>
+      <div class="w-full ms-2 text-sm"><label for="v-0:3" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
-    </label>
+    </div>
   </fieldset>
   <!---->
 </div>"
@@ -995,33 +995,33 @@ exports[`CheckboxGroup > renders with size md correctly 1`] = `
 exports[`CheckboxGroup > renders with size sm correctly 1`] = `
 "<div tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0" class="relative">
   <fieldset class="flex gap-x-2 flex-col gap-y-0.5">
-    <!--v-if--><label class="relative flex items-start flex-row">
+    <!--v-if-->
+    <div class="relative flex items-start flex-row">
       <div class="flex items-center h-4"><button tabindex="-1" data-orientation="vertical" 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:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item=""><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>
-      <div class="w-full ms-2 text-xs">
-        <p for="v-0:1" class="block font-medium text-default">Option 1</p>
+      <div class="w-full ms-2 text-xs"><label for="v-0:1" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
-    </label><label class="relative flex items-start flex-row">
+    </div>
+    <div class="relative flex items-start flex-row">
       <div class="flex items-center h-4"><button tabindex="-1" data-orientation="vertical" 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:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2 text-xs">
-        <p for="v-0:2" class="block font-medium text-default">Option 2</p>
+      <div class="w-full ms-2 text-xs"><label for="v-0:2" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
-    </label><label class="relative flex items-start flex-row">
+    </div>
+    <div class="relative flex items-start flex-row">
       <div class="flex items-center h-4"><button tabindex="-1" data-orientation="vertical" 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:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2 text-xs">
-        <p for="v-0:3" class="block font-medium text-default">Option 3</p>
+      <div class="w-full ms-2 text-xs"><label for="v-0:3" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
-    </label>
+    </div>
   </fieldset>
   <!---->
 </div>"
@@ -1030,33 +1030,33 @@ exports[`CheckboxGroup > renders with size sm correctly 1`] = `
 exports[`CheckboxGroup > renders with size xl correctly 1`] = `
 "<div tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0" class="relative">
   <fieldset class="flex gap-x-2 flex-col gap-y-1.5">
-    <!--v-if--><label class="relative flex items-start flex-row">
+    <!--v-if-->
+    <div class="relative flex items-start flex-row">
       <div class="flex items-center h-6"><button tabindex="-1" data-orientation="vertical" 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:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item=""><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>
-      <div class="w-full ms-2 text-base">
-        <p for="v-0:1" class="block font-medium text-default">Option 1</p>
+      <div class="w-full ms-2 text-base"><label for="v-0:1" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
-    </label><label class="relative flex items-start flex-row">
+    </div>
+    <div class="relative flex items-start flex-row">
       <div class="flex items-center h-6"><button tabindex="-1" data-orientation="vertical" 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:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2 text-base">
-        <p for="v-0:2" class="block font-medium text-default">Option 2</p>
+      <div class="w-full ms-2 text-base"><label for="v-0:2" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
-    </label><label class="relative flex items-start flex-row">
+    </div>
+    <div class="relative flex items-start flex-row">
       <div class="flex items-center h-6"><button tabindex="-1" data-orientation="vertical" 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:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2 text-base">
-        <p for="v-0:3" class="block font-medium text-default">Option 3</p>
+      <div class="w-full ms-2 text-base"><label for="v-0:3" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
-    </label>
+    </div>
   </fieldset>
   <!---->
 </div>"
@@ -1065,33 +1065,33 @@ exports[`CheckboxGroup > renders with size xl correctly 1`] = `
 exports[`CheckboxGroup > renders with size xs correctly 1`] = `
 "<div tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0" class="relative">
   <fieldset class="flex gap-x-2 flex-col gap-y-0.5">
-    <!--v-if--><label class="relative flex items-start flex-row">
+    <!--v-if-->
+    <div class="relative flex items-start flex-row">
       <div class="flex items-center h-4"><button tabindex="-1" data-orientation="vertical" 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:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item=""><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>
-      <div class="w-full ms-2 text-xs">
-        <p for="v-0:1" class="block font-medium text-default">Option 1</p>
+      <div class="w-full ms-2 text-xs"><label for="v-0:1" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
-    </label><label class="relative flex items-start flex-row">
+    </div>
+    <div class="relative flex items-start flex-row">
       <div class="flex items-center h-4"><button tabindex="-1" data-orientation="vertical" 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:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2 text-xs">
-        <p for="v-0:2" class="block font-medium text-default">Option 2</p>
+      <div class="w-full ms-2 text-xs"><label for="v-0:2" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
-    </label><label class="relative flex items-start flex-row">
+    </div>
+    <div class="relative flex items-start flex-row">
       <div class="flex items-center h-4"><button tabindex="-1" data-orientation="vertical" 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:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2 text-xs">
-        <p for="v-0:3" class="block font-medium text-default">Option 3</p>
+      <div class="w-full ms-2 text-xs"><label for="v-0:3" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
-    </label>
+    </div>
   </fieldset>
   <!---->
 </div>"
@@ -1100,34 +1100,34 @@ exports[`CheckboxGroup > renders with size xs correctly 1`] = `
 exports[`CheckboxGroup > renders with ui correctly 1`] = `
 "<div tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0" class="relative">
   <fieldset class="flex flex-col gap-y-1 gap-x-4">
-    <!--v-if--><label class="relative flex items-start flex-row">
+    <!--v-if-->
+    <div class="relative flex items-start flex-row">
       <div class="flex items-center h-5"><button tabindex="-1" data-orientation="vertical" 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:1" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2 text-sm">
-        <p for="v-0:1" class="block font-medium text-red">Option 1</p>
+      <div class="w-full ms-2 text-sm"><label for="v-0:1" class="block font-medium text-red">Option 1</label>
         <!--v-if-->
       </div>
-    </label><label class="relative flex items-start flex-row">
+    </div>
+    <div class="relative flex items-start flex-row">
       <div class="flex items-center h-5"><button tabindex="-1" data-orientation="vertical" 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:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2 text-sm">
-        <p for="v-0:2" class="block font-medium text-red">Option 2</p>
+      <div class="w-full ms-2 text-sm"><label for="v-0:2" class="block font-medium text-red">Option 2</label>
         <!--v-if-->
       </div>
-    </label><label class="relative flex items-start flex-row">
+    </div>
+    <div class="relative flex items-start flex-row">
       <div class="flex items-center h-5"><button tabindex="-1" data-orientation="vertical" 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:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2 text-sm">
-        <p for="v-0:3" class="block font-medium text-red">Option 3</p>
+      <div class="w-full ms-2 text-sm"><label for="v-0:3" class="block font-medium text-red">Option 3</label>
         <!--v-if-->
       </div>
-    </label>
+    </div>
   </fieldset>
   <!---->
 </div>"
@@ -1136,34 +1136,34 @@ exports[`CheckboxGroup > renders with ui correctly 1`] = `
 exports[`CheckboxGroup > renders with valueKey correctly 1`] = `
 "<div tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0" class="relative">
   <fieldset class="flex gap-x-2 flex-col gap-y-1">
-    <!--v-if--><label class="relative flex items-start flex-row">
+    <!--v-if-->
+    <div class="relative flex items-start flex-row">
       <div class="flex items-center h-5"><button tabindex="-1" data-orientation="vertical" 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:Option 1" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2 text-sm">
-        <p for="v-0:Option 1" class="block font-medium text-default">Option 1</p>
+      <div class="w-full ms-2 text-sm"><label for="v-0:Option 1" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
-    </label><label class="relative flex items-start flex-row">
+    </div>
+    <div class="relative flex items-start flex-row">
       <div class="flex items-center h-5"><button tabindex="-1" data-orientation="vertical" 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:Option 2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2 text-sm">
-        <p for="v-0:Option 2" class="block font-medium text-default">Option 2</p>
+      <div class="w-full ms-2 text-sm"><label for="v-0:Option 2" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
-    </label><label class="relative flex items-start flex-row">
+    </div>
+    <div class="relative flex items-start flex-row">
       <div class="flex items-center h-5"><button tabindex="-1" data-orientation="vertical" 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:Option 3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2 text-sm">
-        <p for="v-0:Option 3" class="block font-medium text-default">Option 3</p>
+      <div class="w-full ms-2 text-sm"><label for="v-0:Option 3" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
-    </label>
+    </div>
   </fieldset>
   <!---->
 </div>"
diff --git a/test/components/__snapshots__/CheckboxGroup.spec.ts.snap b/test/components/__snapshots__/CheckboxGroup.spec.ts.snap
index 37865bd4..7c31874a 100644
--- a/test/components/__snapshots__/CheckboxGroup.spec.ts.snap
+++ b/test/components/__snapshots__/CheckboxGroup.spec.ts.snap
@@ -3,34 +3,34 @@
 exports[`CheckboxGroup > renders with ariaLabel correctly 1`] = `
 "<div tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0-0" class="relative" aria-label="Aria label">
   <fieldset class="flex gap-x-2 flex-col gap-y-1">
-    <!--v-if--><label class="relative flex items-start flex-row">
+    <!--v-if-->
+    <div class="relative flex items-start flex-row">
       <div class="flex items-center h-5"><button tabindex="-1" data-orientation="vertical" 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" data-reka-collection-item="">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2 text-sm">
-        <p for="v-0-0:1" class="block font-medium text-default">Option 1</p>
+      <div class="w-full ms-2 text-sm"><label for="v-0-0:1" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
-    </label><label class="relative flex items-start flex-row">
+    </div>
+    <div class="relative flex items-start flex-row">
       <div class="flex items-center h-5"><button tabindex="-1" data-orientation="vertical" 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:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2 text-sm">
-        <p for="v-0-0:2" class="block font-medium text-default">Option 2</p>
+      <div class="w-full ms-2 text-sm"><label for="v-0-0:2" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
-    </label><label class="relative flex items-start flex-row">
+    </div>
+    <div class="relative flex items-start flex-row">
       <div class="flex items-center h-5"><button tabindex="-1" data-orientation="vertical" 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" data-reka-collection-item="">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2 text-sm">
-        <p for="v-0-0:3" class="block font-medium text-default">Option 3</p>
+      <div class="w-full ms-2 text-sm"><label for="v-0-0:3" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
-    </label>
+    </div>
   </fieldset>
   <!---->
 </div>"
@@ -39,34 +39,34 @@ exports[`CheckboxGroup > renders with ariaLabel correctly 1`] = `
 exports[`CheckboxGroup > renders with as correctly 1`] = `
 "<section tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0-0" class="relative">
   <fieldset class="flex gap-x-2 flex-col gap-y-1">
-    <!--v-if--><label class="relative flex items-start flex-row">
+    <!--v-if-->
+    <div class="relative flex items-start flex-row">
       <div class="flex items-center h-5"><button tabindex="-1" data-orientation="vertical" 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" data-reka-collection-item="">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2 text-sm">
-        <p for="v-0-0:1" class="block font-medium text-default">Option 1</p>
+      <div class="w-full ms-2 text-sm"><label for="v-0-0:1" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
-    </label><label class="relative flex items-start flex-row">
+    </div>
+    <div class="relative flex items-start flex-row">
       <div class="flex items-center h-5"><button tabindex="-1" data-orientation="vertical" 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:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2 text-sm">
-        <p for="v-0-0:2" class="block font-medium text-default">Option 2</p>
+      <div class="w-full ms-2 text-sm"><label for="v-0-0:2" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
-    </label><label class="relative flex items-start flex-row">
+    </div>
+    <div class="relative flex items-start flex-row">
       <div class="flex items-center h-5"><button tabindex="-1" data-orientation="vertical" 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" data-reka-collection-item="">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2 text-sm">
-        <p for="v-0-0:3" class="block font-medium text-default">Option 3</p>
+      <div class="w-full ms-2 text-sm"><label for="v-0-0:3" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
-    </label>
+    </div>
   </fieldset>
   <!---->
 </section>"
@@ -75,34 +75,34 @@ exports[`CheckboxGroup > renders with as correctly 1`] = `
 exports[`CheckboxGroup > renders with class correctly 1`] = `
 "<div tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0-0" class="absolute">
   <fieldset class="flex gap-x-2 flex-col gap-y-1">
-    <!--v-if--><label class="relative flex items-start flex-row">
+    <!--v-if-->
+    <div class="relative flex items-start flex-row">
       <div class="flex items-center h-5"><button tabindex="-1" data-orientation="vertical" 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" data-reka-collection-item="">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2 text-sm">
-        <p for="v-0-0:1" class="block font-medium text-default">Option 1</p>
+      <div class="w-full ms-2 text-sm"><label for="v-0-0:1" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
-    </label><label class="relative flex items-start flex-row">
+    </div>
+    <div class="relative flex items-start flex-row">
       <div class="flex items-center h-5"><button tabindex="-1" data-orientation="vertical" 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:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2 text-sm">
-        <p for="v-0-0:2" class="block font-medium text-default">Option 2</p>
+      <div class="w-full ms-2 text-sm"><label for="v-0-0:2" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
-    </label><label class="relative flex items-start flex-row">
+    </div>
+    <div class="relative flex items-start flex-row">
       <div class="flex items-center h-5"><button tabindex="-1" data-orientation="vertical" 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" data-reka-collection-item="">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2 text-sm">
-        <p for="v-0-0:3" class="block font-medium text-default">Option 3</p>
+      <div class="w-full ms-2 text-sm"><label for="v-0-0:3" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
-    </label>
+    </div>
   </fieldset>
   <!---->
 </div>"
@@ -111,33 +111,33 @@ exports[`CheckboxGroup > renders with class correctly 1`] = `
 exports[`CheckboxGroup > renders with defaultValue correctly 1`] = `
 "<div tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0-0" class="relative">
   <fieldset class="flex gap-x-2 flex-col gap-y-1">
-    <!--v-if--><label class="relative flex items-start flex-row">
+    <!--v-if-->
+    <div class="relative flex items-start flex-row">
       <div class="flex items-center h-5"><button tabindex="-1" data-orientation="vertical" 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="true" aria-required="false" data-state="checked" data-reka-collection-item=""><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>
-      <div class="w-full ms-2 text-sm">
-        <p for="v-0-0:1" class="block font-medium text-default">Option 1</p>
+      <div class="w-full ms-2 text-sm"><label for="v-0-0:1" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
-    </label><label class="relative flex items-start flex-row">
+    </div>
+    <div class="relative flex items-start flex-row">
       <div class="flex items-center h-5"><button tabindex="-1" data-orientation="vertical" 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:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2 text-sm">
-        <p for="v-0-0:2" class="block font-medium text-default">Option 2</p>
+      <div class="w-full ms-2 text-sm"><label for="v-0-0:2" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
-    </label><label class="relative flex items-start flex-row">
+    </div>
+    <div class="relative flex items-start flex-row">
       <div class="flex items-center h-5"><button tabindex="-1" data-orientation="vertical" 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" data-reka-collection-item="">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2 text-sm">
-        <p for="v-0-0:3" class="block font-medium text-default">Option 3</p>
+      <div class="w-full ms-2 text-sm"><label for="v-0-0:3" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
-    </label>
+    </div>
   </fieldset>
   <!---->
 </div>"
@@ -146,34 +146,34 @@ exports[`CheckboxGroup > renders with defaultValue correctly 1`] = `
 exports[`CheckboxGroup > renders with description correctly 1`] = `
 "<div tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0-0" class="relative">
   <fieldset class="flex gap-x-2 flex-col gap-y-1">
-    <!--v-if--><label class="relative flex items-start flex-row">
+    <!--v-if-->
+    <div class="relative flex items-start flex-row">
       <div class="flex items-center h-5"><button tabindex="-1" data-orientation="vertical" 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" data-reka-collection-item="">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2 text-sm">
-        <p for="v-0-0:1" class="block font-medium text-default">Option 1</p>
+      <div class="w-full ms-2 text-sm"><label for="v-0-0:1" class="block font-medium text-default">Option 1</label>
         <p class="text-muted">Description 0</p>
       </div>
-    </label><label class="relative flex items-start flex-row">
+    </div>
+    <div class="relative flex items-start flex-row">
       <div class="flex items-center h-5"><button tabindex="-1" data-orientation="vertical" 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:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2 text-sm">
-        <p for="v-0-0:2" class="block font-medium text-default">Option 2</p>
+      <div class="w-full ms-2 text-sm"><label for="v-0-0:2" class="block font-medium text-default">Option 2</label>
         <p class="text-muted">Description 1</p>
       </div>
-    </label><label class="relative flex items-start flex-row">
+    </div>
+    <div class="relative flex items-start flex-row">
       <div class="flex items-center h-5"><button tabindex="-1" data-orientation="vertical" 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" data-reka-collection-item="">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2 text-sm">
-        <p for="v-0-0:3" class="block font-medium text-default">Option 3</p>
+      <div class="w-full ms-2 text-sm"><label for="v-0-0:3" class="block font-medium text-default">Option 3</label>
         <p class="text-muted">Description 2</p>
       </div>
-    </label>
+    </div>
   </fieldset>
   <!---->
 </div>"
@@ -182,34 +182,34 @@ exports[`CheckboxGroup > renders with description correctly 1`] = `
 exports[`CheckboxGroup > renders with description slot correctly 1`] = `
 "<div tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0-0" class="relative">
   <fieldset class="flex gap-x-2 flex-col gap-y-1">
-    <!--v-if--><label class="relative flex items-start flex-row">
+    <!--v-if-->
+    <div class="relative flex items-start flex-row">
       <div class="flex items-center h-5"><button tabindex="-1" data-orientation="vertical" 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" data-reka-collection-item="">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2 text-sm">
-        <p for="v-0-0:1" class="block font-medium text-default">Option 1</p>
+      <div class="w-full ms-2 text-sm"><label for="v-0-0:1" class="block font-medium text-default">Option 1</label>
         <p class="text-muted">Description slot</p>
       </div>
-    </label><label class="relative flex items-start flex-row">
+    </div>
+    <div class="relative flex items-start flex-row">
       <div class="flex items-center h-5"><button tabindex="-1" data-orientation="vertical" 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:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2 text-sm">
-        <p for="v-0-0:2" class="block font-medium text-default">Option 2</p>
+      <div class="w-full ms-2 text-sm"><label for="v-0-0:2" class="block font-medium text-default">Option 2</label>
         <p class="text-muted">Description slot</p>
       </div>
-    </label><label class="relative flex items-start flex-row">
+    </div>
+    <div class="relative flex items-start flex-row">
       <div class="flex items-center h-5"><button tabindex="-1" data-orientation="vertical" 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" data-reka-collection-item="">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2 text-sm">
-        <p for="v-0-0:3" class="block font-medium text-default">Option 3</p>
+      <div class="w-full ms-2 text-sm"><label for="v-0-0:3" class="block font-medium text-default">Option 3</label>
         <p class="text-muted">Description slot</p>
       </div>
-    </label>
+    </div>
   </fieldset>
   <!---->
 </div>"
@@ -218,34 +218,34 @@ exports[`CheckboxGroup > renders with description slot correctly 1`] = `
 exports[`CheckboxGroup > renders with descriptionKey correctly 1`] = `
 "<div tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0-0" class="relative">
   <fieldset class="flex gap-x-2 flex-col gap-y-1">
-    <!--v-if--><label class="relative flex items-start flex-row">
+    <!--v-if-->
+    <div class="relative flex items-start flex-row">
       <div class="flex items-center h-5"><button tabindex="-1" data-orientation="vertical" 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" data-reka-collection-item="">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2 text-sm">
-        <p for="v-0-0:1" class="block font-medium text-default">Option 1</p>
+      <div class="w-full ms-2 text-sm"><label for="v-0-0:1" class="block font-medium text-default">Option 1</label>
         <p class="text-muted">1</p>
       </div>
-    </label><label class="relative flex items-start flex-row">
+    </div>
+    <div class="relative flex items-start flex-row">
       <div class="flex items-center h-5"><button tabindex="-1" data-orientation="vertical" 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:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2 text-sm">
-        <p for="v-0-0:2" class="block font-medium text-default">Option 2</p>
+      <div class="w-full ms-2 text-sm"><label for="v-0-0:2" class="block font-medium text-default">Option 2</label>
         <p class="text-muted">2</p>
       </div>
-    </label><label class="relative flex items-start flex-row">
+    </div>
+    <div class="relative flex items-start flex-row">
       <div class="flex items-center h-5"><button tabindex="-1" data-orientation="vertical" 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" data-reka-collection-item="">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2 text-sm">
-        <p for="v-0-0:3" class="block font-medium text-default">Option 3</p>
+      <div class="w-full ms-2 text-sm"><label for="v-0-0:3" class="block font-medium text-default">Option 3</label>
         <p class="text-muted">3</p>
       </div>
-    </label>
+    </div>
   </fieldset>
   <!---->
 </div>"
@@ -254,34 +254,34 @@ exports[`CheckboxGroup > renders with descriptionKey correctly 1`] = `
 exports[`CheckboxGroup > renders with disabled correctly 1`] = `
 "<div tabindex="-1" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0-0" class="relative">
   <fieldset class="flex gap-x-2 flex-col gap-y-1">
-    <!--v-if--><label class="relative flex items-start flex-row">
+    <!--v-if-->
+    <div class="relative flex items-start flex-row">
       <div class="flex items-center h-5"><button tabindex="-1" data-orientation="vertical" data-disabled="" 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:1" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" disabled="" data-reka-collection-item="">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2 text-sm">
-        <p for="v-0-0:1" class="block font-medium text-default cursor-not-allowed opacity-75">Option 1</p>
+      <div class="w-full ms-2 text-sm"><label for="v-0-0:1" class="block font-medium text-default cursor-not-allowed opacity-75">Option 1</label>
         <!--v-if-->
       </div>
-    </label><label class="relative flex items-start flex-row">
+    </div>
+    <div class="relative flex items-start flex-row">
       <div class="flex items-center h-5"><button tabindex="-1" data-orientation="vertical" data-disabled="" 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:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" disabled="" data-reka-collection-item="">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2 text-sm">
-        <p for="v-0-0:2" class="block font-medium text-default cursor-not-allowed opacity-75">Option 2</p>
+      <div class="w-full ms-2 text-sm"><label for="v-0-0:2" class="block font-medium text-default cursor-not-allowed opacity-75">Option 2</label>
         <!--v-if-->
       </div>
-    </label><label class="relative flex items-start flex-row">
+    </div>
+    <div class="relative flex items-start flex-row">
       <div class="flex items-center h-5"><button tabindex="-1" data-orientation="vertical" data-disabled="" 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:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" disabled="" data-reka-collection-item="">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2 text-sm">
-        <p for="v-0-0:3" class="block font-medium text-default cursor-not-allowed opacity-75">Option 3</p>
+      <div class="w-full ms-2 text-sm"><label for="v-0-0:3" class="block font-medium text-default cursor-not-allowed opacity-75">Option 3</label>
         <!--v-if-->
       </div>
-    </label>
+    </div>
   </fieldset>
   <!---->
 </div>"
@@ -395,33 +395,33 @@ exports[`CheckboxGroup > renders with horizontal variant table correctly 1`] = `
 exports[`CheckboxGroup > renders with indicator end correctly 1`] = `
 "<div tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0-0" class="relative">
   <fieldset class="flex gap-x-2 flex-col gap-y-1">
-    <!--v-if--><label class="relative flex items-start flex-row-reverse">
+    <!--v-if-->
+    <div class="relative flex items-start flex-row-reverse">
       <div class="flex items-center h-5"><button tabindex="-1" data-orientation="vertical" 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="true" aria-required="false" data-state="checked" data-reka-collection-item=""><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>
-      <div class="w-full me-2 text-sm">
-        <p for="v-0-0:1" class="block font-medium text-default">Option 1</p>
+      <div class="w-full me-2 text-sm"><label for="v-0-0:1" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
-    </label><label class="relative flex items-start flex-row-reverse">
+    </div>
+    <div class="relative flex items-start flex-row-reverse">
       <div class="flex items-center h-5"><button tabindex="-1" data-orientation="vertical" 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:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full me-2 text-sm">
-        <p for="v-0-0:2" class="block font-medium text-default">Option 2</p>
+      <div class="w-full me-2 text-sm"><label for="v-0-0:2" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
-    </label><label class="relative flex items-start flex-row-reverse">
+    </div>
+    <div class="relative flex items-start flex-row-reverse">
       <div class="flex items-center h-5"><button tabindex="-1" data-orientation="vertical" 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" data-reka-collection-item="">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full me-2 text-sm">
-        <p for="v-0-0:3" class="block font-medium text-default">Option 3</p>
+      <div class="w-full me-2 text-sm"><label for="v-0-0:3" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
-    </label>
+    </div>
   </fieldset>
   <!---->
 </div>"
@@ -430,33 +430,33 @@ exports[`CheckboxGroup > renders with indicator end correctly 1`] = `
 exports[`CheckboxGroup > renders with indicator hidden correctly 1`] = `
 "<div tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0-0" class="relative">
   <fieldset class="flex gap-x-2 flex-col gap-y-1">
-    <!--v-if--><label class="relative flex items-start">
+    <!--v-if-->
+    <div class="relative flex items-start">
       <div class="flex items-center h-5"><button tabindex="-1" data-orientation="vertical" 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:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item=""><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>
-      <div class="w-full text-center text-sm">
-        <p for="v-0-0:1" class="block font-medium text-default">Option 1</p>
+      <div class="w-full text-center text-sm"><label for="v-0-0:1" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
-    </label><label class="relative flex items-start">
+    </div>
+    <div class="relative flex items-start">
       <div class="flex items-center h-5"><button tabindex="-1" data-orientation="vertical" 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:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full text-center text-sm">
-        <p for="v-0-0:2" class="block font-medium text-default">Option 2</p>
+      <div class="w-full text-center text-sm"><label for="v-0-0:2" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
-    </label><label class="relative flex items-start">
+    </div>
+    <div class="relative flex items-start">
       <div class="flex items-center h-5"><button tabindex="-1" data-orientation="vertical" 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:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full text-center text-sm">
-        <p for="v-0-0:3" class="block font-medium text-default">Option 3</p>
+      <div class="w-full text-center text-sm"><label for="v-0-0:3" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
-    </label>
+    </div>
   </fieldset>
   <!---->
 </div>"
@@ -465,33 +465,33 @@ exports[`CheckboxGroup > renders with indicator hidden correctly 1`] = `
 exports[`CheckboxGroup > renders with indicator start correctly 1`] = `
 "<div tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0-0" class="relative">
   <fieldset class="flex gap-x-2 flex-col gap-y-1">
-    <!--v-if--><label class="relative flex items-start flex-row">
+    <!--v-if-->
+    <div class="relative flex items-start flex-row">
       <div class="flex items-center h-5"><button tabindex="-1" data-orientation="vertical" 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="true" aria-required="false" data-state="checked" data-reka-collection-item=""><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>
-      <div class="w-full ms-2 text-sm">
-        <p for="v-0-0:1" class="block font-medium text-default">Option 1</p>
+      <div class="w-full ms-2 text-sm"><label for="v-0-0:1" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
-    </label><label class="relative flex items-start flex-row">
+    </div>
+    <div class="relative flex items-start flex-row">
       <div class="flex items-center h-5"><button tabindex="-1" data-orientation="vertical" 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:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2 text-sm">
-        <p for="v-0-0:2" class="block font-medium text-default">Option 2</p>
+      <div class="w-full ms-2 text-sm"><label for="v-0-0:2" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
-    </label><label class="relative flex items-start flex-row">
+    </div>
+    <div class="relative flex items-start flex-row">
       <div class="flex items-center h-5"><button tabindex="-1" data-orientation="vertical" 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" data-reka-collection-item="">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2 text-sm">
-        <p for="v-0-0:3" class="block font-medium text-default">Option 3</p>
+      <div class="w-full ms-2 text-sm"><label for="v-0-0:3" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
-    </label>
+    </div>
   </fieldset>
   <!---->
 </div>"
@@ -500,34 +500,34 @@ exports[`CheckboxGroup > renders with indicator start correctly 1`] = `
 exports[`CheckboxGroup > renders with items correctly 1`] = `
 "<div tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0-0" class="relative">
   <fieldset class="flex gap-x-2 flex-col gap-y-1">
-    <!--v-if--><label class="relative flex items-start flex-row">
+    <!--v-if-->
+    <div class="relative flex items-start flex-row">
       <div class="flex items-center h-5"><button tabindex="-1" data-orientation="vertical" 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" data-reka-collection-item="">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2 text-sm">
-        <p for="v-0-0:1" class="block font-medium text-default">Option 1</p>
+      <div class="w-full ms-2 text-sm"><label for="v-0-0:1" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
-    </label><label class="relative flex items-start flex-row">
+    </div>
+    <div class="relative flex items-start flex-row">
       <div class="flex items-center h-5"><button tabindex="-1" data-orientation="vertical" 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:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2 text-sm">
-        <p for="v-0-0:2" class="block font-medium text-default">Option 2</p>
+      <div class="w-full ms-2 text-sm"><label for="v-0-0:2" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
-    </label><label class="relative flex items-start flex-row">
+    </div>
+    <div class="relative flex items-start flex-row">
       <div class="flex items-center h-5"><button tabindex="-1" data-orientation="vertical" 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" data-reka-collection-item="">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2 text-sm">
-        <p for="v-0-0:3" class="block font-medium text-default">Option 3</p>
+      <div class="w-full ms-2 text-sm"><label for="v-0-0:3" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
-    </label>
+    </div>
   </fieldset>
   <!---->
 </div>"
@@ -536,34 +536,34 @@ exports[`CheckboxGroup > renders with items correctly 1`] = `
 exports[`CheckboxGroup > renders with label slot correctly 1`] = `
 "<div tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0-0" class="relative">
   <fieldset class="flex gap-x-2 flex-col gap-y-1">
-    <!--v-if--><label class="relative flex items-start flex-row">
+    <!--v-if-->
+    <div class="relative flex items-start flex-row">
       <div class="flex items-center h-5"><button tabindex="-1" data-orientation="vertical" 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" data-reka-collection-item="">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2 text-sm">
-        <p for="v-0-0:1" class="block font-medium text-default">Label slot</p>
+      <div class="w-full ms-2 text-sm"><label for="v-0-0:1" class="block font-medium text-default">Label slot</label>
         <!--v-if-->
       </div>
-    </label><label class="relative flex items-start flex-row">
+    </div>
+    <div class="relative flex items-start flex-row">
       <div class="flex items-center h-5"><button tabindex="-1" data-orientation="vertical" 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:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2 text-sm">
-        <p for="v-0-0:2" class="block font-medium text-default">Label slot</p>
+      <div class="w-full ms-2 text-sm"><label for="v-0-0:2" class="block font-medium text-default">Label slot</label>
         <!--v-if-->
       </div>
-    </label><label class="relative flex items-start flex-row">
+    </div>
+    <div class="relative flex items-start flex-row">
       <div class="flex items-center h-5"><button tabindex="-1" data-orientation="vertical" 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" data-reka-collection-item="">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2 text-sm">
-        <p for="v-0-0:3" class="block font-medium text-default">Label slot</p>
+      <div class="w-full ms-2 text-sm"><label for="v-0-0:3" class="block font-medium text-default">Label slot</label>
         <!--v-if-->
       </div>
-    </label>
+    </div>
   </fieldset>
   <!---->
 </div>"
@@ -572,34 +572,34 @@ exports[`CheckboxGroup > renders with label slot correctly 1`] = `
 exports[`CheckboxGroup > renders with labelKey correctly 1`] = `
 "<div tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0-0" class="relative">
   <fieldset class="flex gap-x-2 flex-col gap-y-1">
-    <!--v-if--><label class="relative flex items-start flex-row">
+    <!--v-if-->
+    <div class="relative flex items-start flex-row">
       <div class="flex items-center h-5"><button tabindex="-1" data-orientation="vertical" 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" data-reka-collection-item="">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2 text-sm">
-        <p for="v-0-0:1" class="block font-medium text-default">1</p>
+      <div class="w-full ms-2 text-sm"><label for="v-0-0:1" class="block font-medium text-default">1</label>
         <!--v-if-->
       </div>
-    </label><label class="relative flex items-start flex-row">
+    </div>
+    <div class="relative flex items-start flex-row">
       <div class="flex items-center h-5"><button tabindex="-1" data-orientation="vertical" 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:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2 text-sm">
-        <p for="v-0-0:2" class="block font-medium text-default">2</p>
+      <div class="w-full ms-2 text-sm"><label for="v-0-0:2" class="block font-medium text-default">2</label>
         <!--v-if-->
       </div>
-    </label><label class="relative flex items-start flex-row">
+    </div>
+    <div class="relative flex items-start flex-row">
       <div class="flex items-center h-5"><button tabindex="-1" data-orientation="vertical" 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" data-reka-collection-item="">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2 text-sm">
-        <p for="v-0-0:3" class="block font-medium text-default">3</p>
+      <div class="w-full ms-2 text-sm"><label for="v-0-0:3" class="block font-medium text-default">3</label>
         <!--v-if-->
       </div>
-    </label>
+    </div>
   </fieldset>
   <!---->
 </div>"
@@ -608,34 +608,34 @@ exports[`CheckboxGroup > renders with labelKey correctly 1`] = `
 exports[`CheckboxGroup > renders with legend slot correctly 1`] = `
 "<div tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0-0" class="relative">
   <fieldset class="flex gap-x-2 flex-col gap-y-1">
-    <legend class="mb-1 block font-medium text-default text-sm">Legend slot</legend><label class="relative flex items-start flex-row">
+    <legend class="mb-1 block font-medium text-default text-sm">Legend slot</legend>
+    <div class="relative flex items-start flex-row">
       <div class="flex items-center h-5"><button tabindex="-1" data-orientation="vertical" 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" data-reka-collection-item="">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2 text-sm">
-        <p for="v-0-0:1" class="block font-medium text-default">Option 1</p>
+      <div class="w-full ms-2 text-sm"><label for="v-0-0:1" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
-    </label><label class="relative flex items-start flex-row">
+    </div>
+    <div class="relative flex items-start flex-row">
       <div class="flex items-center h-5"><button tabindex="-1" data-orientation="vertical" 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:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2 text-sm">
-        <p for="v-0-0:2" class="block font-medium text-default">Option 2</p>
+      <div class="w-full ms-2 text-sm"><label for="v-0-0:2" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
-    </label><label class="relative flex items-start flex-row">
+    </div>
+    <div class="relative flex items-start flex-row">
       <div class="flex items-center h-5"><button tabindex="-1" data-orientation="vertical" 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" data-reka-collection-item="">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2 text-sm">
-        <p for="v-0-0:3" class="block font-medium text-default">Option 3</p>
+      <div class="w-full ms-2 text-sm"><label for="v-0-0:3" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
-    </label>
+    </div>
   </fieldset>
   <!---->
 </div>"
@@ -644,33 +644,33 @@ exports[`CheckboxGroup > renders with legend slot correctly 1`] = `
 exports[`CheckboxGroup > renders with modelValue correctly 1`] = `
 "<div tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0-0" class="relative">
   <fieldset class="flex gap-x-2 flex-col gap-y-1">
-    <!--v-if--><label class="relative flex items-start flex-row">
+    <!--v-if-->
+    <div class="relative flex items-start flex-row">
       <div class="flex items-center h-5"><button tabindex="-1" data-orientation="vertical" 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="true" aria-required="false" data-state="checked" data-reka-collection-item=""><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>
-      <div class="w-full ms-2 text-sm">
-        <p for="v-0-0:1" class="block font-medium text-default">Option 1</p>
+      <div class="w-full ms-2 text-sm"><label for="v-0-0:1" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
-    </label><label class="relative flex items-start flex-row">
+    </div>
+    <div class="relative flex items-start flex-row">
       <div class="flex items-center h-5"><button tabindex="-1" data-orientation="vertical" 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:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2 text-sm">
-        <p for="v-0-0:2" class="block font-medium text-default">Option 2</p>
+      <div class="w-full ms-2 text-sm"><label for="v-0-0:2" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
-    </label><label class="relative flex items-start flex-row">
+    </div>
+    <div class="relative flex items-start flex-row">
       <div class="flex items-center h-5"><button tabindex="-1" data-orientation="vertical" 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" data-reka-collection-item="">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2 text-sm">
-        <p for="v-0-0:3" class="block font-medium text-default">Option 3</p>
+      <div class="w-full ms-2 text-sm"><label for="v-0-0:3" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
-    </label>
+    </div>
   </fieldset>
   <!---->
 </div>"
@@ -889,34 +889,34 @@ exports[`CheckboxGroup > renders with primary variant table correctly 1`] = `
 exports[`CheckboxGroup > renders with required correctly 1`] = `
 "<div tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0-0" class="relative">
   <fieldset class="flex gap-x-2 flex-col gap-y-1">
-    <legend class="mb-1 block font-medium text-default text-sm after:content-['*'] after:ms-0.5 after:text-error">Legend</legend><label class="relative flex items-start flex-row">
+    <legend class="mb-1 block font-medium text-default text-sm after:content-['*'] after:ms-0.5 after:text-error">Legend</legend>
+    <div class="relative flex items-start flex-row">
       <div class="flex items-center h-5"><button tabindex="-1" data-orientation="vertical" 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" data-reka-collection-item="">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2 text-sm">
-        <p for="v-0-0:1" class="block font-medium text-default">Option 1</p>
+      <div class="w-full ms-2 text-sm"><label for="v-0-0:1" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
-    </label><label class="relative flex items-start flex-row">
+    </div>
+    <div class="relative flex items-start flex-row">
       <div class="flex items-center h-5"><button tabindex="-1" data-orientation="vertical" 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:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2 text-sm">
-        <p for="v-0-0:2" class="block font-medium text-default">Option 2</p>
+      <div class="w-full ms-2 text-sm"><label for="v-0-0:2" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
-    </label><label class="relative flex items-start flex-row">
+    </div>
+    <div class="relative flex items-start flex-row">
       <div class="flex items-center h-5"><button tabindex="-1" data-orientation="vertical" 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" data-reka-collection-item="">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2 text-sm">
-        <p for="v-0-0:3" class="block font-medium text-default">Option 3</p>
+      <div class="w-full ms-2 text-sm"><label for="v-0-0:3" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
-    </label>
+    </div>
   </fieldset>
   <!---->
 </div>"
@@ -925,33 +925,33 @@ exports[`CheckboxGroup > renders with required correctly 1`] = `
 exports[`CheckboxGroup > renders with size lg correctly 1`] = `
 "<div tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0-0" class="relative">
   <fieldset class="flex gap-x-2 flex-col gap-y-1">
-    <!--v-if--><label class="relative flex items-start flex-row">
+    <!--v-if-->
+    <div class="relative flex items-start flex-row">
       <div class="flex items-center h-5"><button tabindex="-1" data-orientation="vertical" 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:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item=""><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>
-      <div class="w-full ms-2 text-sm">
-        <p for="v-0-0:1" class="block font-medium text-default">Option 1</p>
+      <div class="w-full ms-2 text-sm"><label for="v-0-0:1" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
-    </label><label class="relative flex items-start flex-row">
+    </div>
+    <div class="relative flex items-start flex-row">
       <div class="flex items-center h-5"><button tabindex="-1" data-orientation="vertical" 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:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2 text-sm">
-        <p for="v-0-0:2" class="block font-medium text-default">Option 2</p>
+      <div class="w-full ms-2 text-sm"><label for="v-0-0:2" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
-    </label><label class="relative flex items-start flex-row">
+    </div>
+    <div class="relative flex items-start flex-row">
       <div class="flex items-center h-5"><button tabindex="-1" data-orientation="vertical" 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:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2 text-sm">
-        <p for="v-0-0:3" class="block font-medium text-default">Option 3</p>
+      <div class="w-full ms-2 text-sm"><label for="v-0-0:3" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
-    </label>
+    </div>
   </fieldset>
   <!---->
 </div>"
@@ -960,33 +960,33 @@ exports[`CheckboxGroup > renders with size lg correctly 1`] = `
 exports[`CheckboxGroup > renders with size md correctly 1`] = `
 "<div tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0-0" class="relative">
   <fieldset class="flex gap-x-2 flex-col gap-y-1">
-    <!--v-if--><label class="relative flex items-start flex-row">
+    <!--v-if-->
+    <div class="relative flex items-start flex-row">
       <div class="flex items-center h-5"><button tabindex="-1" data-orientation="vertical" 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="true" aria-required="false" data-state="checked" data-reka-collection-item=""><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>
-      <div class="w-full ms-2 text-sm">
-        <p for="v-0-0:1" class="block font-medium text-default">Option 1</p>
+      <div class="w-full ms-2 text-sm"><label for="v-0-0:1" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
-    </label><label class="relative flex items-start flex-row">
+    </div>
+    <div class="relative flex items-start flex-row">
       <div class="flex items-center h-5"><button tabindex="-1" data-orientation="vertical" 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:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2 text-sm">
-        <p for="v-0-0:2" class="block font-medium text-default">Option 2</p>
+      <div class="w-full ms-2 text-sm"><label for="v-0-0:2" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
-    </label><label class="relative flex items-start flex-row">
+    </div>
+    <div class="relative flex items-start flex-row">
       <div class="flex items-center h-5"><button tabindex="-1" data-orientation="vertical" 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" data-reka-collection-item="">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2 text-sm">
-        <p for="v-0-0:3" class="block font-medium text-default">Option 3</p>
+      <div class="w-full ms-2 text-sm"><label for="v-0-0:3" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
-    </label>
+    </div>
   </fieldset>
   <!---->
 </div>"
@@ -995,33 +995,33 @@ exports[`CheckboxGroup > renders with size md correctly 1`] = `
 exports[`CheckboxGroup > renders with size sm correctly 1`] = `
 "<div tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0-0" class="relative">
   <fieldset class="flex gap-x-2 flex-col gap-y-0.5">
-    <!--v-if--><label class="relative flex items-start flex-row">
+    <!--v-if-->
+    <div class="relative flex items-start flex-row">
       <div class="flex items-center h-4"><button tabindex="-1" data-orientation="vertical" 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:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item=""><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>
-      <div class="w-full ms-2 text-xs">
-        <p for="v-0-0:1" class="block font-medium text-default">Option 1</p>
+      <div class="w-full ms-2 text-xs"><label for="v-0-0:1" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
-    </label><label class="relative flex items-start flex-row">
+    </div>
+    <div class="relative flex items-start flex-row">
       <div class="flex items-center h-4"><button tabindex="-1" data-orientation="vertical" 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:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2 text-xs">
-        <p for="v-0-0:2" class="block font-medium text-default">Option 2</p>
+      <div class="w-full ms-2 text-xs"><label for="v-0-0:2" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
-    </label><label class="relative flex items-start flex-row">
+    </div>
+    <div class="relative flex items-start flex-row">
       <div class="flex items-center h-4"><button tabindex="-1" data-orientation="vertical" 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:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2 text-xs">
-        <p for="v-0-0:3" class="block font-medium text-default">Option 3</p>
+      <div class="w-full ms-2 text-xs"><label for="v-0-0:3" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
-    </label>
+    </div>
   </fieldset>
   <!---->
 </div>"
@@ -1030,33 +1030,33 @@ exports[`CheckboxGroup > renders with size sm correctly 1`] = `
 exports[`CheckboxGroup > renders with size xl correctly 1`] = `
 "<div tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0-0" class="relative">
   <fieldset class="flex gap-x-2 flex-col gap-y-1.5">
-    <!--v-if--><label class="relative flex items-start flex-row">
+    <!--v-if-->
+    <div class="relative flex items-start flex-row">
       <div class="flex items-center h-6"><button tabindex="-1" data-orientation="vertical" 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:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item=""><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>
-      <div class="w-full ms-2 text-base">
-        <p for="v-0-0:1" class="block font-medium text-default">Option 1</p>
+      <div class="w-full ms-2 text-base"><label for="v-0-0:1" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
-    </label><label class="relative flex items-start flex-row">
+    </div>
+    <div class="relative flex items-start flex-row">
       <div class="flex items-center h-6"><button tabindex="-1" data-orientation="vertical" 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:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2 text-base">
-        <p for="v-0-0:2" class="block font-medium text-default">Option 2</p>
+      <div class="w-full ms-2 text-base"><label for="v-0-0:2" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
-    </label><label class="relative flex items-start flex-row">
+    </div>
+    <div class="relative flex items-start flex-row">
       <div class="flex items-center h-6"><button tabindex="-1" data-orientation="vertical" 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:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2 text-base">
-        <p for="v-0-0:3" class="block font-medium text-default">Option 3</p>
+      <div class="w-full ms-2 text-base"><label for="v-0-0:3" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
-    </label>
+    </div>
   </fieldset>
   <!---->
 </div>"
@@ -1065,33 +1065,33 @@ exports[`CheckboxGroup > renders with size xl correctly 1`] = `
 exports[`CheckboxGroup > renders with size xs correctly 1`] = `
 "<div tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0-0" class="relative">
   <fieldset class="flex gap-x-2 flex-col gap-y-0.5">
-    <!--v-if--><label class="relative flex items-start flex-row">
+    <!--v-if-->
+    <div class="relative flex items-start flex-row">
       <div class="flex items-center h-4"><button tabindex="-1" data-orientation="vertical" 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:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item=""><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>
-      <div class="w-full ms-2 text-xs">
-        <p for="v-0-0:1" class="block font-medium text-default">Option 1</p>
+      <div class="w-full ms-2 text-xs"><label for="v-0-0:1" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
-    </label><label class="relative flex items-start flex-row">
+    </div>
+    <div class="relative flex items-start flex-row">
       <div class="flex items-center h-4"><button tabindex="-1" data-orientation="vertical" 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:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2 text-xs">
-        <p for="v-0-0:2" class="block font-medium text-default">Option 2</p>
+      <div class="w-full ms-2 text-xs"><label for="v-0-0:2" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
-    </label><label class="relative flex items-start flex-row">
+    </div>
+    <div class="relative flex items-start flex-row">
       <div class="flex items-center h-4"><button tabindex="-1" data-orientation="vertical" 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:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2 text-xs">
-        <p for="v-0-0:3" class="block font-medium text-default">Option 3</p>
+      <div class="w-full ms-2 text-xs"><label for="v-0-0:3" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
-    </label>
+    </div>
   </fieldset>
   <!---->
 </div>"
@@ -1100,34 +1100,34 @@ exports[`CheckboxGroup > renders with size xs correctly 1`] = `
 exports[`CheckboxGroup > renders with ui correctly 1`] = `
 "<div tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0-0" class="relative">
   <fieldset class="flex flex-col gap-y-1 gap-x-4">
-    <!--v-if--><label class="relative flex items-start flex-row">
+    <!--v-if-->
+    <div class="relative flex items-start flex-row">
       <div class="flex items-center h-5"><button tabindex="-1" data-orientation="vertical" 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" data-reka-collection-item="">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2 text-sm">
-        <p for="v-0-0:1" class="block font-medium text-red">Option 1</p>
+      <div class="w-full ms-2 text-sm"><label for="v-0-0:1" class="block font-medium text-red">Option 1</label>
         <!--v-if-->
       </div>
-    </label><label class="relative flex items-start flex-row">
+    </div>
+    <div class="relative flex items-start flex-row">
       <div class="flex items-center h-5"><button tabindex="-1" data-orientation="vertical" 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:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2 text-sm">
-        <p for="v-0-0:2" class="block font-medium text-red">Option 2</p>
+      <div class="w-full ms-2 text-sm"><label for="v-0-0:2" class="block font-medium text-red">Option 2</label>
         <!--v-if-->
       </div>
-    </label><label class="relative flex items-start flex-row">
+    </div>
+    <div class="relative flex items-start flex-row">
       <div class="flex items-center h-5"><button tabindex="-1" data-orientation="vertical" 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" data-reka-collection-item="">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2 text-sm">
-        <p for="v-0-0:3" class="block font-medium text-red">Option 3</p>
+      <div class="w-full ms-2 text-sm"><label for="v-0-0:3" class="block font-medium text-red">Option 3</label>
         <!--v-if-->
       </div>
-    </label>
+    </div>
   </fieldset>
   <!---->
 </div>"
@@ -1136,34 +1136,34 @@ exports[`CheckboxGroup > renders with ui correctly 1`] = `
 exports[`CheckboxGroup > renders with valueKey correctly 1`] = `
 "<div tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0-0" class="relative">
   <fieldset class="flex gap-x-2 flex-col gap-y-1">
-    <!--v-if--><label class="relative flex items-start flex-row">
+    <!--v-if-->
+    <div class="relative flex items-start flex-row">
       <div class="flex items-center h-5"><button tabindex="-1" data-orientation="vertical" 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:Option 1" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2 text-sm">
-        <p for="v-0-0:Option 1" class="block font-medium text-default">Option 1</p>
+      <div class="w-full ms-2 text-sm"><label for="v-0-0:Option 1" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
-    </label><label class="relative flex items-start flex-row">
+    </div>
+    <div class="relative flex items-start flex-row">
       <div class="flex items-center h-5"><button tabindex="-1" data-orientation="vertical" 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:Option 2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2 text-sm">
-        <p for="v-0-0:Option 2" class="block font-medium text-default">Option 2</p>
+      <div class="w-full ms-2 text-sm"><label for="v-0-0:Option 2" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
-    </label><label class="relative flex items-start flex-row">
+    </div>
+    <div class="relative flex items-start flex-row">
       <div class="flex items-center h-5"><button tabindex="-1" data-orientation="vertical" 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:Option 3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2 text-sm">
-        <p for="v-0-0:Option 3" class="block font-medium text-default">Option 3</p>
+      <div class="w-full ms-2 text-sm"><label for="v-0-0:Option 3" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
-    </label>
+    </div>
   </fieldset>
   <!---->
 </div>"
diff --git a/test/components/__snapshots__/RadioGroup-vue.spec.ts.snap b/test/components/__snapshots__/RadioGroup-vue.spec.ts.snap
index 20ddfad3..34456360 100644
--- a/test/components/__snapshots__/RadioGroup-vue.spec.ts.snap
+++ b/test/components/__snapshots__/RadioGroup-vue.spec.ts.snap
@@ -3,34 +3,34 @@
 exports[`RadioGroup > renders with ariaLabel correctly 1`] = `
 "<div role="radiogroup" aria-orientation="vertical" aria-required="false" dir="ltr" tabindex="0" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0" class="relative" aria-label="Aria label">
   <fieldset class="flex gap-x-2 flex-col gap-y-1">
-    <!--v-if--><label class="flex items-start flex-row text-sm">
+    <!--v-if-->
+    <div class="flex items-start flex-row text-sm">
       <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" tabindex="-1" data-orientation="vertical" data-reka-collection-item="" id="v-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="1" aria-label="1">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2">
-        <p for="v-0:1" class="block font-medium text-default">Option 1</p>
+      <div class="w-full ms-2"><label for="v-0:1" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
-    </label><label class="flex items-start flex-row text-sm">
+    </div>
+    <div class="flex items-start flex-row text-sm">
       <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" tabindex="-1" data-orientation="vertical" data-reka-collection-item="" id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2">
-        <p for="v-0:2" class="block font-medium text-default">Option 2</p>
+      <div class="w-full ms-2"><label for="v-0:2" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
-    </label><label class="flex items-start flex-row text-sm">
+    </div>
+    <div class="flex items-start flex-row text-sm">
       <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" tabindex="-1" data-orientation="vertical" data-reka-collection-item="" id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2">
-        <p for="v-0:3" class="block font-medium text-default">Option 3</p>
+      <div class="w-full ms-2"><label for="v-0:3" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
-    </label>
+    </div>
   </fieldset>
   <!---->
 </div>"
@@ -39,34 +39,34 @@ exports[`RadioGroup > renders with ariaLabel correctly 1`] = `
 exports[`RadioGroup > renders with as correctly 1`] = `
 "<section role="radiogroup" aria-orientation="vertical" aria-required="false" dir="ltr" tabindex="0" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0" class="relative">
   <fieldset class="flex gap-x-2 flex-col gap-y-1">
-    <!--v-if--><label class="flex items-start flex-row text-sm">
+    <!--v-if-->
+    <div class="flex items-start flex-row text-sm">
       <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" tabindex="-1" data-orientation="vertical" data-reka-collection-item="" id="v-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="1" aria-label="1">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2">
-        <p for="v-0:1" class="block font-medium text-default">Option 1</p>
+      <div class="w-full ms-2"><label for="v-0:1" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
-    </label><label class="flex items-start flex-row text-sm">
+    </div>
+    <div class="flex items-start flex-row text-sm">
       <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" tabindex="-1" data-orientation="vertical" data-reka-collection-item="" id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2">
-        <p for="v-0:2" class="block font-medium text-default">Option 2</p>
+      <div class="w-full ms-2"><label for="v-0:2" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
-    </label><label class="flex items-start flex-row text-sm">
+    </div>
+    <div class="flex items-start flex-row text-sm">
       <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" tabindex="-1" data-orientation="vertical" data-reka-collection-item="" id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2">
-        <p for="v-0:3" class="block font-medium text-default">Option 3</p>
+      <div class="w-full ms-2"><label for="v-0:3" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
-    </label>
+    </div>
   </fieldset>
   <!---->
 </section>"
@@ -75,34 +75,34 @@ exports[`RadioGroup > renders with as correctly 1`] = `
 exports[`RadioGroup > renders with class correctly 1`] = `
 "<div role="radiogroup" aria-orientation="vertical" aria-required="false" dir="ltr" tabindex="0" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0" class="absolute">
   <fieldset class="flex gap-x-2 flex-col gap-y-1">
-    <!--v-if--><label class="flex items-start flex-row text-sm">
+    <!--v-if-->
+    <div class="flex items-start flex-row text-sm">
       <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" tabindex="-1" data-orientation="vertical" data-reka-collection-item="" id="v-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="1" aria-label="1">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2">
-        <p for="v-0:1" class="block font-medium text-default">Option 1</p>
+      <div class="w-full ms-2"><label for="v-0:1" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
-    </label><label class="flex items-start flex-row text-sm">
+    </div>
+    <div class="flex items-start flex-row text-sm">
       <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" tabindex="-1" data-orientation="vertical" data-reka-collection-item="" id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2">
-        <p for="v-0:2" class="block font-medium text-default">Option 2</p>
+      <div class="w-full ms-2"><label for="v-0:2" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
-    </label><label class="flex items-start flex-row text-sm">
+    </div>
+    <div class="flex items-start flex-row text-sm">
       <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" tabindex="-1" data-orientation="vertical" data-reka-collection-item="" id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2">
-        <p for="v-0:3" class="block font-medium text-default">Option 3</p>
+      <div class="w-full ms-2"><label for="v-0:3" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
-    </label>
+    </div>
   </fieldset>
   <!---->
 </div>"
@@ -111,33 +111,33 @@ exports[`RadioGroup > renders with class correctly 1`] = `
 exports[`RadioGroup > renders with defaultValue correctly 1`] = `
 "<div role="radiogroup" aria-orientation="vertical" aria-required="false" dir="ltr" tabindex="0" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0" class="relative">
   <fieldset class="flex gap-x-2 flex-col gap-y-1">
-    <!--v-if--><label class="flex items-start flex-row text-sm">
+    <!--v-if-->
+    <div class="flex items-start flex-row text-sm">
       <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" tabindex="-1" data-orientation="vertical" data-active="" data-reka-collection-item="" id="v-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" value="1" aria-label="1"><span data-state="checked" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-primary after:size-1.5"></span>
           <!---->
         </button></div>
-      <div class="w-full ms-2">
-        <p for="v-0:1" class="block font-medium text-default">Option 1</p>
+      <div class="w-full ms-2"><label for="v-0:1" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
-    </label><label class="flex items-start flex-row text-sm">
+    </div>
+    <div class="flex items-start flex-row text-sm">
       <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" tabindex="-1" data-orientation="vertical" data-reka-collection-item="" id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2">
-        <p for="v-0:2" class="block font-medium text-default">Option 2</p>
+      <div class="w-full ms-2"><label for="v-0:2" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
-    </label><label class="flex items-start flex-row text-sm">
+    </div>
+    <div class="flex items-start flex-row text-sm">
       <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" tabindex="-1" data-orientation="vertical" data-reka-collection-item="" id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2">
-        <p for="v-0:3" class="block font-medium text-default">Option 3</p>
+      <div class="w-full ms-2"><label for="v-0:3" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
-    </label>
+    </div>
   </fieldset>
   <!---->
 </div>"
@@ -146,34 +146,34 @@ exports[`RadioGroup > renders with defaultValue correctly 1`] = `
 exports[`RadioGroup > renders with description correctly 1`] = `
 "<div role="radiogroup" aria-orientation="vertical" aria-required="false" dir="ltr" tabindex="0" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0" class="relative">
   <fieldset class="flex gap-x-2 flex-col gap-y-1">
-    <!--v-if--><label class="flex items-start flex-row text-sm">
+    <!--v-if-->
+    <div class="flex items-start flex-row text-sm">
       <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" tabindex="-1" data-orientation="vertical" data-reka-collection-item="" id="v-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="1" aria-label="1">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2">
-        <p for="v-0:1" class="block font-medium text-default">Option 1</p>
+      <div class="w-full ms-2"><label for="v-0:1" class="block font-medium text-default">Option 1</label>
         <p class="text-muted">Description 0</p>
       </div>
-    </label><label class="flex items-start flex-row text-sm">
+    </div>
+    <div class="flex items-start flex-row text-sm">
       <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" tabindex="-1" data-orientation="vertical" data-reka-collection-item="" id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2">
-        <p for="v-0:2" class="block font-medium text-default">Option 2</p>
+      <div class="w-full ms-2"><label for="v-0:2" class="block font-medium text-default">Option 2</label>
         <p class="text-muted">Description 1</p>
       </div>
-    </label><label class="flex items-start flex-row text-sm">
+    </div>
+    <div class="flex items-start flex-row text-sm">
       <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" tabindex="-1" data-orientation="vertical" data-reka-collection-item="" id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2">
-        <p for="v-0:3" class="block font-medium text-default">Option 3</p>
+      <div class="w-full ms-2"><label for="v-0:3" class="block font-medium text-default">Option 3</label>
         <p class="text-muted">Description 2</p>
       </div>
-    </label>
+    </div>
   </fieldset>
   <!---->
 </div>"
@@ -182,34 +182,34 @@ exports[`RadioGroup > renders with description correctly 1`] = `
 exports[`RadioGroup > renders with description slot correctly 1`] = `
 "<div role="radiogroup" aria-orientation="vertical" aria-required="false" dir="ltr" tabindex="0" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0" class="relative">
   <fieldset class="flex gap-x-2 flex-col gap-y-1">
-    <!--v-if--><label class="flex items-start flex-row text-sm">
+    <!--v-if-->
+    <div class="flex items-start flex-row text-sm">
       <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" tabindex="-1" data-orientation="vertical" data-reka-collection-item="" id="v-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="1" aria-label="1">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2">
-        <p for="v-0:1" class="block font-medium text-default">Description slot</p>
+      <div class="w-full ms-2"><label for="v-0:1" class="block font-medium text-default">Description slot</label>
         <!--v-if-->
       </div>
-    </label><label class="flex items-start flex-row text-sm">
+    </div>
+    <div class="flex items-start flex-row text-sm">
       <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" tabindex="-1" data-orientation="vertical" data-reka-collection-item="" id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2">
-        <p for="v-0:2" class="block font-medium text-default">Description slot</p>
+      <div class="w-full ms-2"><label for="v-0:2" class="block font-medium text-default">Description slot</label>
         <!--v-if-->
       </div>
-    </label><label class="flex items-start flex-row text-sm">
+    </div>
+    <div class="flex items-start flex-row text-sm">
       <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" tabindex="-1" data-orientation="vertical" data-reka-collection-item="" id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2">
-        <p for="v-0:3" class="block font-medium text-default">Description slot</p>
+      <div class="w-full ms-2"><label for="v-0:3" class="block font-medium text-default">Description slot</label>
         <!--v-if-->
       </div>
-    </label>
+    </div>
   </fieldset>
   <!---->
 </div>"
@@ -218,34 +218,34 @@ exports[`RadioGroup > renders with description slot correctly 1`] = `
 exports[`RadioGroup > renders with descriptionKey correctly 1`] = `
 "<div role="radiogroup" aria-orientation="vertical" aria-required="false" dir="ltr" tabindex="0" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0" class="relative">
   <fieldset class="flex gap-x-2 flex-col gap-y-1">
-    <!--v-if--><label class="flex items-start flex-row text-sm">
+    <!--v-if-->
+    <div class="flex items-start flex-row text-sm">
       <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" tabindex="-1" data-orientation="vertical" data-reka-collection-item="" id="v-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="1" aria-label="1">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2">
-        <p for="v-0:1" class="block font-medium text-default">Option 1</p>
+      <div class="w-full ms-2"><label for="v-0:1" class="block font-medium text-default">Option 1</label>
         <p class="text-muted">1</p>
       </div>
-    </label><label class="flex items-start flex-row text-sm">
+    </div>
+    <div class="flex items-start flex-row text-sm">
       <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" tabindex="-1" data-orientation="vertical" data-reka-collection-item="" id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2">
-        <p for="v-0:2" class="block font-medium text-default">Option 2</p>
+      <div class="w-full ms-2"><label for="v-0:2" class="block font-medium text-default">Option 2</label>
         <p class="text-muted">2</p>
       </div>
-    </label><label class="flex items-start flex-row text-sm">
+    </div>
+    <div class="flex items-start flex-row text-sm">
       <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" tabindex="-1" data-orientation="vertical" data-reka-collection-item="" id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2">
-        <p for="v-0:3" class="block font-medium text-default">Option 3</p>
+      <div class="w-full ms-2"><label for="v-0:3" class="block font-medium text-default">Option 3</label>
         <p class="text-muted">3</p>
       </div>
-    </label>
+    </div>
   </fieldset>
   <!---->
 </div>"
@@ -254,34 +254,34 @@ exports[`RadioGroup > renders with descriptionKey correctly 1`] = `
 exports[`RadioGroup > renders with disabled correctly 1`] = `
 "<div role="radiogroup" data-disabled="" aria-orientation="vertical" aria-required="false" dir="ltr" tabindex="-1" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0" class="relative">
   <fieldset class="flex gap-x-2 flex-col gap-y-1">
-    <!--v-if--><label class="flex items-start flex-row text-sm">
+    <!--v-if-->
+    <div class="flex items-start flex-row text-sm">
       <div class="flex items-center h-5"><button class="rounded-full 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" tabindex="-1" data-orientation="vertical" data-disabled="" data-reka-collection-item="" id="v-0:1" role="radio" type="button" aria-checked="false" disabled="" data-state="unchecked" required="false" value="1" aria-label="1">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2">
-        <p for="v-0:1" class="block font-medium text-default cursor-not-allowed opacity-75">Option 1</p>
+      <div class="w-full ms-2"><label for="v-0:1" class="block font-medium text-default cursor-not-allowed opacity-75">Option 1</label>
         <!--v-if-->
       </div>
-    </label><label class="flex items-start flex-row text-sm">
+    </div>
+    <div class="flex items-start flex-row text-sm">
       <div class="flex items-center h-5"><button class="rounded-full 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" tabindex="-1" data-orientation="vertical" data-disabled="" data-reka-collection-item="" id="v-0:2" role="radio" type="button" aria-checked="false" disabled="" data-state="unchecked" required="false" value="2" aria-label="2">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2">
-        <p for="v-0:2" class="block font-medium text-default cursor-not-allowed opacity-75">Option 2</p>
+      <div class="w-full ms-2"><label for="v-0:2" class="block font-medium text-default cursor-not-allowed opacity-75">Option 2</label>
         <!--v-if-->
       </div>
-    </label><label class="flex items-start flex-row text-sm">
+    </div>
+    <div class="flex items-start flex-row text-sm">
       <div class="flex items-center h-5"><button class="rounded-full 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" tabindex="-1" data-orientation="vertical" data-disabled="" data-reka-collection-item="" id="v-0:3" role="radio" type="button" aria-checked="false" disabled="" data-state="unchecked" required="false" value="3" aria-label="3">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2">
-        <p for="v-0:3" class="block font-medium text-default cursor-not-allowed opacity-75">Option 3</p>
+      <div class="w-full ms-2"><label for="v-0:3" class="block font-medium text-default cursor-not-allowed opacity-75">Option 3</label>
         <!--v-if-->
       </div>
-    </label>
+    </div>
   </fieldset>
   <!---->
 </div>"
@@ -395,33 +395,33 @@ exports[`RadioGroup > renders with horizontal variant table correctly 1`] = `
 exports[`RadioGroup > renders with indicator end correctly 1`] = `
 "<div role="radiogroup" aria-orientation="vertical" aria-required="false" dir="ltr" tabindex="0" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0" class="relative">
   <fieldset class="flex gap-x-2 flex-col gap-y-1">
-    <!--v-if--><label class="flex items-start flex-row-reverse text-sm">
+    <!--v-if-->
+    <div class="flex items-start flex-row-reverse text-sm">
       <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" tabindex="-1" data-orientation="vertical" data-active="" data-reka-collection-item="" id="v-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" value="1" aria-label="1"><span data-state="checked" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-primary after:size-1.5"></span>
           <!---->
         </button></div>
-      <div class="w-full me-2">
-        <p for="v-0:1" class="block font-medium text-default">Option 1</p>
+      <div class="w-full me-2"><label for="v-0:1" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
-    </label><label class="flex items-start flex-row-reverse text-sm">
+    </div>
+    <div class="flex items-start flex-row-reverse text-sm">
       <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" tabindex="-1" data-orientation="vertical" data-reka-collection-item="" id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full me-2">
-        <p for="v-0:2" class="block font-medium text-default">Option 2</p>
+      <div class="w-full me-2"><label for="v-0:2" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
-    </label><label class="flex items-start flex-row-reverse text-sm">
+    </div>
+    <div class="flex items-start flex-row-reverse text-sm">
       <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" tabindex="-1" data-orientation="vertical" data-reka-collection-item="" id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full me-2">
-        <p for="v-0:3" class="block font-medium text-default">Option 3</p>
+      <div class="w-full me-2"><label for="v-0:3" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
-    </label>
+    </div>
   </fieldset>
   <!---->
 </div>"
@@ -430,33 +430,33 @@ exports[`RadioGroup > renders with indicator end correctly 1`] = `
 exports[`RadioGroup > renders with indicator hidden correctly 1`] = `
 "<div role="radiogroup" aria-orientation="vertical" aria-required="false" dir="ltr" tabindex="0" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0" class="relative">
   <fieldset class="flex gap-x-2 flex-col gap-y-1">
-    <!--v-if--><label class="flex items-start text-sm">
+    <!--v-if-->
+    <div class="flex items-start text-sm">
       <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary sr-only size-4" tabindex="-1" data-orientation="vertical" data-active="" data-reka-collection-item="" id="v-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" value="1" aria-label="1"><span data-state="checked" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-primary after:size-1.5"></span>
           <!---->
         </button></div>
-      <div class="w-full text-center">
-        <p for="v-0:1" class="block font-medium text-default">Option 1</p>
+      <div class="w-full text-center"><label for="v-0:1" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
-    </label><label class="flex items-start text-sm">
+    </div>
+    <div class="flex items-start text-sm">
       <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary sr-only size-4" tabindex="-1" data-orientation="vertical" data-reka-collection-item="" id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full text-center">
-        <p for="v-0:2" class="block font-medium text-default">Option 2</p>
+      <div class="w-full text-center"><label for="v-0:2" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
-    </label><label class="flex items-start text-sm">
+    </div>
+    <div class="flex items-start text-sm">
       <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary sr-only size-4" tabindex="-1" data-orientation="vertical" data-reka-collection-item="" id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full text-center">
-        <p for="v-0:3" class="block font-medium text-default">Option 3</p>
+      <div class="w-full text-center"><label for="v-0:3" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
-    </label>
+    </div>
   </fieldset>
   <!---->
 </div>"
@@ -465,33 +465,33 @@ exports[`RadioGroup > renders with indicator hidden correctly 1`] = `
 exports[`RadioGroup > renders with indicator start correctly 1`] = `
 "<div role="radiogroup" aria-orientation="vertical" aria-required="false" dir="ltr" tabindex="0" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0" class="relative">
   <fieldset class="flex gap-x-2 flex-col gap-y-1">
-    <!--v-if--><label class="flex items-start flex-row text-sm">
+    <!--v-if-->
+    <div class="flex items-start flex-row text-sm">
       <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" tabindex="-1" data-orientation="vertical" data-active="" data-reka-collection-item="" id="v-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" value="1" aria-label="1"><span data-state="checked" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-primary after:size-1.5"></span>
           <!---->
         </button></div>
-      <div class="w-full ms-2">
-        <p for="v-0:1" class="block font-medium text-default">Option 1</p>
+      <div class="w-full ms-2"><label for="v-0:1" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
-    </label><label class="flex items-start flex-row text-sm">
+    </div>
+    <div class="flex items-start flex-row text-sm">
       <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" tabindex="-1" data-orientation="vertical" data-reka-collection-item="" id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2">
-        <p for="v-0:2" class="block font-medium text-default">Option 2</p>
+      <div class="w-full ms-2"><label for="v-0:2" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
-    </label><label class="flex items-start flex-row text-sm">
+    </div>
+    <div class="flex items-start flex-row text-sm">
       <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" tabindex="-1" data-orientation="vertical" data-reka-collection-item="" id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2">
-        <p for="v-0:3" class="block font-medium text-default">Option 3</p>
+      <div class="w-full ms-2"><label for="v-0:3" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
-    </label>
+    </div>
   </fieldset>
   <!---->
 </div>"
@@ -500,34 +500,34 @@ exports[`RadioGroup > renders with indicator start correctly 1`] = `
 exports[`RadioGroup > renders with items correctly 1`] = `
 "<div role="radiogroup" aria-orientation="vertical" aria-required="false" dir="ltr" tabindex="0" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0" class="relative">
   <fieldset class="flex gap-x-2 flex-col gap-y-1">
-    <!--v-if--><label class="flex items-start flex-row text-sm">
+    <!--v-if-->
+    <div class="flex items-start flex-row text-sm">
       <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" tabindex="-1" data-orientation="vertical" data-reka-collection-item="" id="v-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="1" aria-label="1">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2">
-        <p for="v-0:1" class="block font-medium text-default">Option 1</p>
+      <div class="w-full ms-2"><label for="v-0:1" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
-    </label><label class="flex items-start flex-row text-sm">
+    </div>
+    <div class="flex items-start flex-row text-sm">
       <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" tabindex="-1" data-orientation="vertical" data-reka-collection-item="" id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2">
-        <p for="v-0:2" class="block font-medium text-default">Option 2</p>
+      <div class="w-full ms-2"><label for="v-0:2" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
-    </label><label class="flex items-start flex-row text-sm">
+    </div>
+    <div class="flex items-start flex-row text-sm">
       <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" tabindex="-1" data-orientation="vertical" data-reka-collection-item="" id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2">
-        <p for="v-0:3" class="block font-medium text-default">Option 3</p>
+      <div class="w-full ms-2"><label for="v-0:3" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
-    </label>
+    </div>
   </fieldset>
   <!---->
 </div>"
@@ -536,34 +536,34 @@ exports[`RadioGroup > renders with items correctly 1`] = `
 exports[`RadioGroup > renders with label slot correctly 1`] = `
 "<div role="radiogroup" aria-orientation="vertical" aria-required="false" dir="ltr" tabindex="0" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0" class="relative">
   <fieldset class="flex gap-x-2 flex-col gap-y-1">
-    <!--v-if--><label class="flex items-start flex-row text-sm">
+    <!--v-if-->
+    <div class="flex items-start flex-row text-sm">
       <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" tabindex="-1" data-orientation="vertical" data-reka-collection-item="" id="v-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="1" aria-label="1">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2">
-        <p for="v-0:1" class="block font-medium text-default">Label slot</p>
+      <div class="w-full ms-2"><label for="v-0:1" class="block font-medium text-default">Label slot</label>
         <!--v-if-->
       </div>
-    </label><label class="flex items-start flex-row text-sm">
+    </div>
+    <div class="flex items-start flex-row text-sm">
       <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" tabindex="-1" data-orientation="vertical" data-reka-collection-item="" id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2">
-        <p for="v-0:2" class="block font-medium text-default">Label slot</p>
+      <div class="w-full ms-2"><label for="v-0:2" class="block font-medium text-default">Label slot</label>
         <!--v-if-->
       </div>
-    </label><label class="flex items-start flex-row text-sm">
+    </div>
+    <div class="flex items-start flex-row text-sm">
       <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" tabindex="-1" data-orientation="vertical" data-reka-collection-item="" id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2">
-        <p for="v-0:3" class="block font-medium text-default">Label slot</p>
+      <div class="w-full ms-2"><label for="v-0:3" class="block font-medium text-default">Label slot</label>
         <!--v-if-->
       </div>
-    </label>
+    </div>
   </fieldset>
   <!---->
 </div>"
@@ -572,34 +572,34 @@ exports[`RadioGroup > renders with label slot correctly 1`] = `
 exports[`RadioGroup > renders with labelKey correctly 1`] = `
 "<div role="radiogroup" aria-orientation="vertical" aria-required="false" dir="ltr" tabindex="0" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0" class="relative">
   <fieldset class="flex gap-x-2 flex-col gap-y-1">
-    <!--v-if--><label class="flex items-start flex-row text-sm">
+    <!--v-if-->
+    <div class="flex items-start flex-row text-sm">
       <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" tabindex="-1" data-orientation="vertical" data-reka-collection-item="" id="v-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="1" aria-label="1">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2">
-        <p for="v-0:1" class="block font-medium text-default">1</p>
+      <div class="w-full ms-2"><label for="v-0:1" class="block font-medium text-default">1</label>
         <!--v-if-->
       </div>
-    </label><label class="flex items-start flex-row text-sm">
+    </div>
+    <div class="flex items-start flex-row text-sm">
       <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" tabindex="-1" data-orientation="vertical" data-reka-collection-item="" id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2">
-        <p for="v-0:2" class="block font-medium text-default">2</p>
+      <div class="w-full ms-2"><label for="v-0:2" class="block font-medium text-default">2</label>
         <!--v-if-->
       </div>
-    </label><label class="flex items-start flex-row text-sm">
+    </div>
+    <div class="flex items-start flex-row text-sm">
       <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" tabindex="-1" data-orientation="vertical" data-reka-collection-item="" id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2">
-        <p for="v-0:3" class="block font-medium text-default">3</p>
+      <div class="w-full ms-2"><label for="v-0:3" class="block font-medium text-default">3</label>
         <!--v-if-->
       </div>
-    </label>
+    </div>
   </fieldset>
   <!---->
 </div>"
@@ -608,34 +608,34 @@ exports[`RadioGroup > renders with labelKey correctly 1`] = `
 exports[`RadioGroup > renders with legend slot correctly 1`] = `
 "<div role="radiogroup" aria-orientation="vertical" aria-required="false" dir="ltr" tabindex="0" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0" class="relative">
   <fieldset class="flex gap-x-2 flex-col gap-y-1">
-    <!--v-if--><label class="flex items-start flex-row text-sm">
+    <!--v-if-->
+    <div class="flex items-start flex-row text-sm">
       <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" tabindex="-1" data-orientation="vertical" data-reka-collection-item="" id="v-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="1" aria-label="1">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2">
-        <p for="v-0:1" class="block font-medium text-default">Legend slot</p>
+      <div class="w-full ms-2"><label for="v-0:1" class="block font-medium text-default">Legend slot</label>
         <!--v-if-->
       </div>
-    </label><label class="flex items-start flex-row text-sm">
+    </div>
+    <div class="flex items-start flex-row text-sm">
       <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" tabindex="-1" data-orientation="vertical" data-reka-collection-item="" id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2">
-        <p for="v-0:2" class="block font-medium text-default">Legend slot</p>
+      <div class="w-full ms-2"><label for="v-0:2" class="block font-medium text-default">Legend slot</label>
         <!--v-if-->
       </div>
-    </label><label class="flex items-start flex-row text-sm">
+    </div>
+    <div class="flex items-start flex-row text-sm">
       <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" tabindex="-1" data-orientation="vertical" data-reka-collection-item="" id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2">
-        <p for="v-0:3" class="block font-medium text-default">Legend slot</p>
+      <div class="w-full ms-2"><label for="v-0:3" class="block font-medium text-default">Legend slot</label>
         <!--v-if-->
       </div>
-    </label>
+    </div>
   </fieldset>
   <!---->
 </div>"
@@ -644,33 +644,33 @@ exports[`RadioGroup > renders with legend slot correctly 1`] = `
 exports[`RadioGroup > renders with modelValue correctly 1`] = `
 "<div role="radiogroup" aria-orientation="vertical" aria-required="false" dir="ltr" tabindex="0" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0" class="relative">
   <fieldset class="flex gap-x-2 flex-col gap-y-1">
-    <!--v-if--><label class="flex items-start flex-row text-sm">
+    <!--v-if-->
+    <div class="flex items-start flex-row text-sm">
       <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" tabindex="-1" data-orientation="vertical" data-active="" data-reka-collection-item="" id="v-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" value="1" aria-label="1"><span data-state="checked" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-primary after:size-1.5"></span>
           <!---->
         </button></div>
-      <div class="w-full ms-2">
-        <p for="v-0:1" class="block font-medium text-default">Option 1</p>
+      <div class="w-full ms-2"><label for="v-0:1" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
-    </label><label class="flex items-start flex-row text-sm">
+    </div>
+    <div class="flex items-start flex-row text-sm">
       <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" tabindex="-1" data-orientation="vertical" data-reka-collection-item="" id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2">
-        <p for="v-0:2" class="block font-medium text-default">Option 2</p>
+      <div class="w-full ms-2"><label for="v-0:2" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
-    </label><label class="flex items-start flex-row text-sm">
+    </div>
+    <div class="flex items-start flex-row text-sm">
       <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" tabindex="-1" data-orientation="vertical" data-reka-collection-item="" id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2">
-        <p for="v-0:3" class="block font-medium text-default">Option 3</p>
+      <div class="w-full ms-2"><label for="v-0:3" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
-    </label>
+    </div>
   </fieldset>
   <!---->
 </div>"
@@ -889,34 +889,34 @@ exports[`RadioGroup > renders with primary variant table correctly 1`] = `
 exports[`RadioGroup > renders with required correctly 1`] = `
 "<div role="radiogroup" aria-orientation="vertical" aria-required="true" dir="ltr" tabindex="0" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0" class="relative">
   <fieldset class="flex gap-x-2 flex-col gap-y-1">
-    <legend class="mb-1 block font-medium text-default text-sm after:content-['*'] after:ms-0.5 after:text-error">Legend</legend><label class="flex items-start flex-row text-sm">
+    <legend class="mb-1 block font-medium text-default text-sm after:content-['*'] after:ms-0.5 after:text-error">Legend</legend>
+    <div class="flex items-start flex-row text-sm">
       <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" tabindex="-1" data-orientation="vertical" data-reka-collection-item="" id="v-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="true" value="1" aria-label="1">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2">
-        <p for="v-0:1" class="block font-medium text-default">Option 1</p>
+      <div class="w-full ms-2"><label for="v-0:1" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
-    </label><label class="flex items-start flex-row text-sm">
+    </div>
+    <div class="flex items-start flex-row text-sm">
       <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" tabindex="-1" data-orientation="vertical" data-reka-collection-item="" id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="true" value="2" aria-label="2">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2">
-        <p for="v-0:2" class="block font-medium text-default">Option 2</p>
+      <div class="w-full ms-2"><label for="v-0:2" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
-    </label><label class="flex items-start flex-row text-sm">
+    </div>
+    <div class="flex items-start flex-row text-sm">
       <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" tabindex="-1" data-orientation="vertical" data-reka-collection-item="" id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="true" value="3" aria-label="3">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2">
-        <p for="v-0:3" class="block font-medium text-default">Option 3</p>
+      <div class="w-full ms-2"><label for="v-0:3" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
-    </label>
+    </div>
   </fieldset>
   <!---->
 </div>"
@@ -925,33 +925,33 @@ exports[`RadioGroup > renders with required correctly 1`] = `
 exports[`RadioGroup > renders with size lg correctly 1`] = `
 "<div role="radiogroup" aria-orientation="vertical" aria-required="false" dir="ltr" tabindex="0" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0" class="relative">
   <fieldset class="flex gap-x-2 flex-col gap-y-1">
-    <!--v-if--><label class="flex items-start flex-row text-sm">
+    <!--v-if-->
+    <div class="flex items-start flex-row text-sm">
       <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4.5" tabindex="-1" data-orientation="vertical" data-active="" data-reka-collection-item="" id="v-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" value="1" aria-label="1"><span data-state="checked" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-primary after:size-1.5"></span>
           <!---->
         </button></div>
-      <div class="w-full ms-2">
-        <p for="v-0:1" class="block font-medium text-default">Option 1</p>
+      <div class="w-full ms-2"><label for="v-0:1" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
-    </label><label class="flex items-start flex-row text-sm">
+    </div>
+    <div class="flex items-start flex-row text-sm">
       <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4.5" tabindex="-1" data-orientation="vertical" data-reka-collection-item="" id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2">
-        <p for="v-0:2" class="block font-medium text-default">Option 2</p>
+      <div class="w-full ms-2"><label for="v-0:2" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
-    </label><label class="flex items-start flex-row text-sm">
+    </div>
+    <div class="flex items-start flex-row text-sm">
       <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4.5" tabindex="-1" data-orientation="vertical" data-reka-collection-item="" id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2">
-        <p for="v-0:3" class="block font-medium text-default">Option 3</p>
+      <div class="w-full ms-2"><label for="v-0:3" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
-    </label>
+    </div>
   </fieldset>
   <!---->
 </div>"
@@ -960,33 +960,33 @@ exports[`RadioGroup > renders with size lg correctly 1`] = `
 exports[`RadioGroup > renders with size md correctly 1`] = `
 "<div role="radiogroup" aria-orientation="vertical" aria-required="false" dir="ltr" tabindex="0" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0" class="relative">
   <fieldset class="flex gap-x-2 flex-col gap-y-1">
-    <!--v-if--><label class="flex items-start flex-row text-sm">
+    <!--v-if-->
+    <div class="flex items-start flex-row text-sm">
       <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" tabindex="-1" data-orientation="vertical" data-active="" data-reka-collection-item="" id="v-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" value="1" aria-label="1"><span data-state="checked" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-primary after:size-1.5"></span>
           <!---->
         </button></div>
-      <div class="w-full ms-2">
-        <p for="v-0:1" class="block font-medium text-default">Option 1</p>
+      <div class="w-full ms-2"><label for="v-0:1" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
-    </label><label class="flex items-start flex-row text-sm">
+    </div>
+    <div class="flex items-start flex-row text-sm">
       <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" tabindex="-1" data-orientation="vertical" data-reka-collection-item="" id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2">
-        <p for="v-0:2" class="block font-medium text-default">Option 2</p>
+      <div class="w-full ms-2"><label for="v-0:2" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
-    </label><label class="flex items-start flex-row text-sm">
+    </div>
+    <div class="flex items-start flex-row text-sm">
       <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" tabindex="-1" data-orientation="vertical" data-reka-collection-item="" id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2">
-        <p for="v-0:3" class="block font-medium text-default">Option 3</p>
+      <div class="w-full ms-2"><label for="v-0:3" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
-    </label>
+    </div>
   </fieldset>
   <!---->
 </div>"
@@ -995,33 +995,33 @@ exports[`RadioGroup > renders with size md correctly 1`] = `
 exports[`RadioGroup > renders with size sm correctly 1`] = `
 "<div role="radiogroup" aria-orientation="vertical" aria-required="false" dir="ltr" tabindex="0" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0" class="relative">
   <fieldset class="flex gap-x-2 flex-col gap-y-0.5">
-    <!--v-if--><label class="flex items-start flex-row text-xs">
+    <!--v-if-->
+    <div class="flex items-start flex-row text-xs">
       <div class="flex items-center h-4"><button class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-3.5" tabindex="-1" data-orientation="vertical" data-active="" data-reka-collection-item="" id="v-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" value="1" aria-label="1"><span data-state="checked" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-primary after:size-1"></span>
           <!---->
         </button></div>
-      <div class="w-full ms-2">
-        <p for="v-0:1" class="block font-medium text-default">Option 1</p>
+      <div class="w-full ms-2"><label for="v-0:1" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
-    </label><label class="flex items-start flex-row text-xs">
+    </div>
+    <div class="flex items-start flex-row text-xs">
       <div class="flex items-center h-4"><button class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-3.5" tabindex="-1" data-orientation="vertical" data-reka-collection-item="" id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2">
-        <p for="v-0:2" class="block font-medium text-default">Option 2</p>
+      <div class="w-full ms-2"><label for="v-0:2" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
-    </label><label class="flex items-start flex-row text-xs">
+    </div>
+    <div class="flex items-start flex-row text-xs">
       <div class="flex items-center h-4"><button class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-3.5" tabindex="-1" data-orientation="vertical" data-reka-collection-item="" id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2">
-        <p for="v-0:3" class="block font-medium text-default">Option 3</p>
+      <div class="w-full ms-2"><label for="v-0:3" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
-    </label>
+    </div>
   </fieldset>
   <!---->
 </div>"
@@ -1030,33 +1030,33 @@ exports[`RadioGroup > renders with size sm correctly 1`] = `
 exports[`RadioGroup > renders with size xl correctly 1`] = `
 "<div role="radiogroup" aria-orientation="vertical" aria-required="false" dir="ltr" tabindex="0" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0" class="relative">
   <fieldset class="flex gap-x-2 flex-col gap-y-1.5">
-    <!--v-if--><label class="flex items-start flex-row text-base">
+    <!--v-if-->
+    <div class="flex items-start flex-row text-base">
       <div class="flex items-center h-6"><button class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-5" tabindex="-1" data-orientation="vertical" data-active="" data-reka-collection-item="" id="v-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" value="1" aria-label="1"><span data-state="checked" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-primary after:size-2"></span>
           <!---->
         </button></div>
-      <div class="w-full ms-2">
-        <p for="v-0:1" class="block font-medium text-default">Option 1</p>
+      <div class="w-full ms-2"><label for="v-0:1" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
-    </label><label class="flex items-start flex-row text-base">
+    </div>
+    <div class="flex items-start flex-row text-base">
       <div class="flex items-center h-6"><button class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-5" tabindex="-1" data-orientation="vertical" data-reka-collection-item="" id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2">
-        <p for="v-0:2" class="block font-medium text-default">Option 2</p>
+      <div class="w-full ms-2"><label for="v-0:2" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
-    </label><label class="flex items-start flex-row text-base">
+    </div>
+    <div class="flex items-start flex-row text-base">
       <div class="flex items-center h-6"><button class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-5" tabindex="-1" data-orientation="vertical" data-reka-collection-item="" id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2">
-        <p for="v-0:3" class="block font-medium text-default">Option 3</p>
+      <div class="w-full ms-2"><label for="v-0:3" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
-    </label>
+    </div>
   </fieldset>
   <!---->
 </div>"
@@ -1065,33 +1065,33 @@ exports[`RadioGroup > renders with size xl correctly 1`] = `
 exports[`RadioGroup > renders with size xs correctly 1`] = `
 "<div role="radiogroup" aria-orientation="vertical" aria-required="false" dir="ltr" tabindex="0" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0" class="relative">
   <fieldset class="flex gap-x-2 flex-col gap-y-0.5">
-    <!--v-if--><label class="flex items-start flex-row text-xs">
+    <!--v-if-->
+    <div class="flex items-start flex-row text-xs">
       <div class="flex items-center h-4"><button class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-3" tabindex="-1" data-orientation="vertical" data-active="" data-reka-collection-item="" id="v-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" value="1" aria-label="1"><span data-state="checked" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-primary after:size-1"></span>
           <!---->
         </button></div>
-      <div class="w-full ms-2">
-        <p for="v-0:1" class="block font-medium text-default">Option 1</p>
+      <div class="w-full ms-2"><label for="v-0:1" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
-    </label><label class="flex items-start flex-row text-xs">
+    </div>
+    <div class="flex items-start flex-row text-xs">
       <div class="flex items-center h-4"><button class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-3" tabindex="-1" data-orientation="vertical" data-reka-collection-item="" id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2">
-        <p for="v-0:2" class="block font-medium text-default">Option 2</p>
+      <div class="w-full ms-2"><label for="v-0:2" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
-    </label><label class="flex items-start flex-row text-xs">
+    </div>
+    <div class="flex items-start flex-row text-xs">
       <div class="flex items-center h-4"><button class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-3" tabindex="-1" data-orientation="vertical" data-reka-collection-item="" id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2">
-        <p for="v-0:3" class="block font-medium text-default">Option 3</p>
+      <div class="w-full ms-2"><label for="v-0:3" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
-    </label>
+    </div>
   </fieldset>
   <!---->
 </div>"
@@ -1100,34 +1100,34 @@ exports[`RadioGroup > renders with size xs correctly 1`] = `
 exports[`RadioGroup > renders with ui correctly 1`] = `
 "<div role="radiogroup" aria-orientation="vertical" aria-required="false" dir="ltr" tabindex="0" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0" class="relative">
   <fieldset class="flex gap-x-2 flex-col gap-y-1">
-    <!--v-if--><label class="flex items-start flex-row text-sm">
+    <!--v-if-->
+    <div class="flex items-start flex-row text-sm">
       <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" tabindex="-1" data-orientation="vertical" data-reka-collection-item="" id="v-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="1" aria-label="1">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-4">
-        <p for="v-0:1" class="block font-medium text-default">Option 1</p>
+      <div class="w-full ms-4"><label for="v-0:1" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
-    </label><label class="flex items-start flex-row text-sm">
+    </div>
+    <div class="flex items-start flex-row text-sm">
       <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" tabindex="-1" data-orientation="vertical" data-reka-collection-item="" id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-4">
-        <p for="v-0:2" class="block font-medium text-default">Option 2</p>
+      <div class="w-full ms-4"><label for="v-0:2" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
-    </label><label class="flex items-start flex-row text-sm">
+    </div>
+    <div class="flex items-start flex-row text-sm">
       <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" tabindex="-1" data-orientation="vertical" data-reka-collection-item="" id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-4">
-        <p for="v-0:3" class="block font-medium text-default">Option 3</p>
+      <div class="w-full ms-4"><label for="v-0:3" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
-    </label>
+    </div>
   </fieldset>
   <!---->
 </div>"
@@ -1136,34 +1136,34 @@ exports[`RadioGroup > renders with ui correctly 1`] = `
 exports[`RadioGroup > renders with valueKey correctly 1`] = `
 "<div role="radiogroup" aria-orientation="vertical" aria-required="false" dir="ltr" tabindex="0" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0" class="relative">
   <fieldset class="flex gap-x-2 flex-col gap-y-1">
-    <!--v-if--><label class="flex items-start flex-row text-sm">
+    <!--v-if-->
+    <div class="flex items-start flex-row text-sm">
       <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" tabindex="-1" data-orientation="vertical" data-reka-collection-item="" id="v-0:Option 1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="Option 1" aria-label="Option 1">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2">
-        <p for="v-0:Option 1" class="block font-medium text-default">Option 1</p>
+      <div class="w-full ms-2"><label for="v-0:Option 1" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
-    </label><label class="flex items-start flex-row text-sm">
+    </div>
+    <div class="flex items-start flex-row text-sm">
       <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" tabindex="-1" data-orientation="vertical" data-reka-collection-item="" id="v-0:Option 2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="Option 2" aria-label="Option 2">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2">
-        <p for="v-0:Option 2" class="block font-medium text-default">Option 2</p>
+      <div class="w-full ms-2"><label for="v-0:Option 2" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
-    </label><label class="flex items-start flex-row text-sm">
+    </div>
+    <div class="flex items-start flex-row text-sm">
       <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" tabindex="-1" data-orientation="vertical" data-reka-collection-item="" id="v-0:Option 3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="Option 3" aria-label="Option 3">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2">
-        <p for="v-0:Option 3" class="block font-medium text-default">Option 3</p>
+      <div class="w-full ms-2"><label for="v-0:Option 3" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
-    </label>
+    </div>
   </fieldset>
   <!---->
 </div>"
diff --git a/test/components/__snapshots__/RadioGroup.spec.ts.snap b/test/components/__snapshots__/RadioGroup.spec.ts.snap
index 5895c959..ac8d652a 100644
--- a/test/components/__snapshots__/RadioGroup.spec.ts.snap
+++ b/test/components/__snapshots__/RadioGroup.spec.ts.snap
@@ -3,34 +3,34 @@
 exports[`RadioGroup > renders with ariaLabel correctly 1`] = `
 "<div role="radiogroup" aria-orientation="vertical" aria-required="false" dir="ltr" tabindex="0" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0-0" class="relative" aria-label="Aria label">
   <fieldset class="flex gap-x-2 flex-col gap-y-1">
-    <!--v-if--><label class="flex items-start flex-row text-sm">
+    <!--v-if-->
+    <div class="flex items-start flex-row text-sm">
       <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" tabindex="-1" data-orientation="vertical" data-reka-collection-item="" id="v-0-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="1" aria-label="1">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2">
-        <p for="v-0-0:1" class="block font-medium text-default">Option 1</p>
+      <div class="w-full ms-2"><label for="v-0-0:1" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
-    </label><label class="flex items-start flex-row text-sm">
+    </div>
+    <div class="flex items-start flex-row text-sm">
       <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" tabindex="-1" data-orientation="vertical" data-reka-collection-item="" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2">
-        <p for="v-0-0:2" class="block font-medium text-default">Option 2</p>
+      <div class="w-full ms-2"><label for="v-0-0:2" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
-    </label><label class="flex items-start flex-row text-sm">
+    </div>
+    <div class="flex items-start flex-row text-sm">
       <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" tabindex="-1" data-orientation="vertical" data-reka-collection-item="" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2">
-        <p for="v-0-0:3" class="block font-medium text-default">Option 3</p>
+      <div class="w-full ms-2"><label for="v-0-0:3" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
-    </label>
+    </div>
   </fieldset>
   <!---->
 </div>"
@@ -39,34 +39,34 @@ exports[`RadioGroup > renders with ariaLabel correctly 1`] = `
 exports[`RadioGroup > renders with as correctly 1`] = `
 "<section role="radiogroup" aria-orientation="vertical" aria-required="false" dir="ltr" tabindex="0" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0-0" class="relative">
   <fieldset class="flex gap-x-2 flex-col gap-y-1">
-    <!--v-if--><label class="flex items-start flex-row text-sm">
+    <!--v-if-->
+    <div class="flex items-start flex-row text-sm">
       <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" tabindex="-1" data-orientation="vertical" data-reka-collection-item="" id="v-0-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="1" aria-label="1">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2">
-        <p for="v-0-0:1" class="block font-medium text-default">Option 1</p>
+      <div class="w-full ms-2"><label for="v-0-0:1" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
-    </label><label class="flex items-start flex-row text-sm">
+    </div>
+    <div class="flex items-start flex-row text-sm">
       <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" tabindex="-1" data-orientation="vertical" data-reka-collection-item="" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2">
-        <p for="v-0-0:2" class="block font-medium text-default">Option 2</p>
+      <div class="w-full ms-2"><label for="v-0-0:2" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
-    </label><label class="flex items-start flex-row text-sm">
+    </div>
+    <div class="flex items-start flex-row text-sm">
       <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" tabindex="-1" data-orientation="vertical" data-reka-collection-item="" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2">
-        <p for="v-0-0:3" class="block font-medium text-default">Option 3</p>
+      <div class="w-full ms-2"><label for="v-0-0:3" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
-    </label>
+    </div>
   </fieldset>
   <!---->
 </section>"
@@ -75,34 +75,34 @@ exports[`RadioGroup > renders with as correctly 1`] = `
 exports[`RadioGroup > renders with class correctly 1`] = `
 "<div role="radiogroup" aria-orientation="vertical" aria-required="false" dir="ltr" tabindex="0" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0-0" class="absolute">
   <fieldset class="flex gap-x-2 flex-col gap-y-1">
-    <!--v-if--><label class="flex items-start flex-row text-sm">
+    <!--v-if-->
+    <div class="flex items-start flex-row text-sm">
       <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" tabindex="-1" data-orientation="vertical" data-reka-collection-item="" id="v-0-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="1" aria-label="1">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2">
-        <p for="v-0-0:1" class="block font-medium text-default">Option 1</p>
+      <div class="w-full ms-2"><label for="v-0-0:1" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
-    </label><label class="flex items-start flex-row text-sm">
+    </div>
+    <div class="flex items-start flex-row text-sm">
       <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" tabindex="-1" data-orientation="vertical" data-reka-collection-item="" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2">
-        <p for="v-0-0:2" class="block font-medium text-default">Option 2</p>
+      <div class="w-full ms-2"><label for="v-0-0:2" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
-    </label><label class="flex items-start flex-row text-sm">
+    </div>
+    <div class="flex items-start flex-row text-sm">
       <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" tabindex="-1" data-orientation="vertical" data-reka-collection-item="" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2">
-        <p for="v-0-0:3" class="block font-medium text-default">Option 3</p>
+      <div class="w-full ms-2"><label for="v-0-0:3" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
-    </label>
+    </div>
   </fieldset>
   <!---->
 </div>"
@@ -111,33 +111,33 @@ exports[`RadioGroup > renders with class correctly 1`] = `
 exports[`RadioGroup > renders with defaultValue correctly 1`] = `
 "<div role="radiogroup" aria-orientation="vertical" aria-required="false" dir="ltr" tabindex="0" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0-0" class="relative">
   <fieldset class="flex gap-x-2 flex-col gap-y-1">
-    <!--v-if--><label class="flex items-start flex-row text-sm">
+    <!--v-if-->
+    <div class="flex items-start flex-row text-sm">
       <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" tabindex="-1" data-orientation="vertical" data-active="" data-reka-collection-item="" id="v-0-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" value="1" aria-label="1"><span data-state="checked" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-primary after:size-1.5"></span>
           <!---->
         </button></div>
-      <div class="w-full ms-2">
-        <p for="v-0-0:1" class="block font-medium text-default">Option 1</p>
+      <div class="w-full ms-2"><label for="v-0-0:1" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
-    </label><label class="flex items-start flex-row text-sm">
+    </div>
+    <div class="flex items-start flex-row text-sm">
       <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" tabindex="-1" data-orientation="vertical" data-reka-collection-item="" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2">
-        <p for="v-0-0:2" class="block font-medium text-default">Option 2</p>
+      <div class="w-full ms-2"><label for="v-0-0:2" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
-    </label><label class="flex items-start flex-row text-sm">
+    </div>
+    <div class="flex items-start flex-row text-sm">
       <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" tabindex="-1" data-orientation="vertical" data-reka-collection-item="" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2">
-        <p for="v-0-0:3" class="block font-medium text-default">Option 3</p>
+      <div class="w-full ms-2"><label for="v-0-0:3" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
-    </label>
+    </div>
   </fieldset>
   <!---->
 </div>"
@@ -146,34 +146,34 @@ exports[`RadioGroup > renders with defaultValue correctly 1`] = `
 exports[`RadioGroup > renders with description correctly 1`] = `
 "<div role="radiogroup" aria-orientation="vertical" aria-required="false" dir="ltr" tabindex="0" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0-0" class="relative">
   <fieldset class="flex gap-x-2 flex-col gap-y-1">
-    <!--v-if--><label class="flex items-start flex-row text-sm">
+    <!--v-if-->
+    <div class="flex items-start flex-row text-sm">
       <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" tabindex="-1" data-orientation="vertical" data-reka-collection-item="" id="v-0-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="1" aria-label="1">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2">
-        <p for="v-0-0:1" class="block font-medium text-default">Option 1</p>
+      <div class="w-full ms-2"><label for="v-0-0:1" class="block font-medium text-default">Option 1</label>
         <p class="text-muted">Description 0</p>
       </div>
-    </label><label class="flex items-start flex-row text-sm">
+    </div>
+    <div class="flex items-start flex-row text-sm">
       <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" tabindex="-1" data-orientation="vertical" data-reka-collection-item="" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2">
-        <p for="v-0-0:2" class="block font-medium text-default">Option 2</p>
+      <div class="w-full ms-2"><label for="v-0-0:2" class="block font-medium text-default">Option 2</label>
         <p class="text-muted">Description 1</p>
       </div>
-    </label><label class="flex items-start flex-row text-sm">
+    </div>
+    <div class="flex items-start flex-row text-sm">
       <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" tabindex="-1" data-orientation="vertical" data-reka-collection-item="" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2">
-        <p for="v-0-0:3" class="block font-medium text-default">Option 3</p>
+      <div class="w-full ms-2"><label for="v-0-0:3" class="block font-medium text-default">Option 3</label>
         <p class="text-muted">Description 2</p>
       </div>
-    </label>
+    </div>
   </fieldset>
   <!---->
 </div>"
@@ -182,34 +182,34 @@ exports[`RadioGroup > renders with description correctly 1`] = `
 exports[`RadioGroup > renders with description slot correctly 1`] = `
 "<div role="radiogroup" aria-orientation="vertical" aria-required="false" dir="ltr" tabindex="0" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0-0" class="relative">
   <fieldset class="flex gap-x-2 flex-col gap-y-1">
-    <!--v-if--><label class="flex items-start flex-row text-sm">
+    <!--v-if-->
+    <div class="flex items-start flex-row text-sm">
       <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" tabindex="-1" data-orientation="vertical" data-reka-collection-item="" id="v-0-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="1" aria-label="1">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2">
-        <p for="v-0-0:1" class="block font-medium text-default">Description slot</p>
+      <div class="w-full ms-2"><label for="v-0-0:1" class="block font-medium text-default">Description slot</label>
         <!--v-if-->
       </div>
-    </label><label class="flex items-start flex-row text-sm">
+    </div>
+    <div class="flex items-start flex-row text-sm">
       <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" tabindex="-1" data-orientation="vertical" data-reka-collection-item="" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2">
-        <p for="v-0-0:2" class="block font-medium text-default">Description slot</p>
+      <div class="w-full ms-2"><label for="v-0-0:2" class="block font-medium text-default">Description slot</label>
         <!--v-if-->
       </div>
-    </label><label class="flex items-start flex-row text-sm">
+    </div>
+    <div class="flex items-start flex-row text-sm">
       <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" tabindex="-1" data-orientation="vertical" data-reka-collection-item="" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2">
-        <p for="v-0-0:3" class="block font-medium text-default">Description slot</p>
+      <div class="w-full ms-2"><label for="v-0-0:3" class="block font-medium text-default">Description slot</label>
         <!--v-if-->
       </div>
-    </label>
+    </div>
   </fieldset>
   <!---->
 </div>"
@@ -218,34 +218,34 @@ exports[`RadioGroup > renders with description slot correctly 1`] = `
 exports[`RadioGroup > renders with descriptionKey correctly 1`] = `
 "<div role="radiogroup" aria-orientation="vertical" aria-required="false" dir="ltr" tabindex="0" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0-0" class="relative">
   <fieldset class="flex gap-x-2 flex-col gap-y-1">
-    <!--v-if--><label class="flex items-start flex-row text-sm">
+    <!--v-if-->
+    <div class="flex items-start flex-row text-sm">
       <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" tabindex="-1" data-orientation="vertical" data-reka-collection-item="" id="v-0-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="1" aria-label="1">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2">
-        <p for="v-0-0:1" class="block font-medium text-default">Option 1</p>
+      <div class="w-full ms-2"><label for="v-0-0:1" class="block font-medium text-default">Option 1</label>
         <p class="text-muted">1</p>
       </div>
-    </label><label class="flex items-start flex-row text-sm">
+    </div>
+    <div class="flex items-start flex-row text-sm">
       <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" tabindex="-1" data-orientation="vertical" data-reka-collection-item="" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2">
-        <p for="v-0-0:2" class="block font-medium text-default">Option 2</p>
+      <div class="w-full ms-2"><label for="v-0-0:2" class="block font-medium text-default">Option 2</label>
         <p class="text-muted">2</p>
       </div>
-    </label><label class="flex items-start flex-row text-sm">
+    </div>
+    <div class="flex items-start flex-row text-sm">
       <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" tabindex="-1" data-orientation="vertical" data-reka-collection-item="" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2">
-        <p for="v-0-0:3" class="block font-medium text-default">Option 3</p>
+      <div class="w-full ms-2"><label for="v-0-0:3" class="block font-medium text-default">Option 3</label>
         <p class="text-muted">3</p>
       </div>
-    </label>
+    </div>
   </fieldset>
   <!---->
 </div>"
@@ -254,34 +254,34 @@ exports[`RadioGroup > renders with descriptionKey correctly 1`] = `
 exports[`RadioGroup > renders with disabled correctly 1`] = `
 "<div role="radiogroup" data-disabled="" aria-orientation="vertical" aria-required="false" dir="ltr" tabindex="-1" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0-0" class="relative">
   <fieldset class="flex gap-x-2 flex-col gap-y-1">
-    <!--v-if--><label class="flex items-start flex-row text-sm">
+    <!--v-if-->
+    <div class="flex items-start flex-row text-sm">
       <div class="flex items-center h-5"><button class="rounded-full 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" tabindex="-1" data-orientation="vertical" data-disabled="" data-reka-collection-item="" id="v-0-0:1" role="radio" type="button" aria-checked="false" disabled="" data-state="unchecked" required="false" value="1" aria-label="1">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2">
-        <p for="v-0-0:1" class="block font-medium text-default cursor-not-allowed opacity-75">Option 1</p>
+      <div class="w-full ms-2"><label for="v-0-0:1" class="block font-medium text-default cursor-not-allowed opacity-75">Option 1</label>
         <!--v-if-->
       </div>
-    </label><label class="flex items-start flex-row text-sm">
+    </div>
+    <div class="flex items-start flex-row text-sm">
       <div class="flex items-center h-5"><button class="rounded-full 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" tabindex="-1" data-orientation="vertical" data-disabled="" data-reka-collection-item="" id="v-0-0:2" role="radio" type="button" aria-checked="false" disabled="" data-state="unchecked" required="false" value="2" aria-label="2">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2">
-        <p for="v-0-0:2" class="block font-medium text-default cursor-not-allowed opacity-75">Option 2</p>
+      <div class="w-full ms-2"><label for="v-0-0:2" class="block font-medium text-default cursor-not-allowed opacity-75">Option 2</label>
         <!--v-if-->
       </div>
-    </label><label class="flex items-start flex-row text-sm">
+    </div>
+    <div class="flex items-start flex-row text-sm">
       <div class="flex items-center h-5"><button class="rounded-full 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" tabindex="-1" data-orientation="vertical" data-disabled="" data-reka-collection-item="" id="v-0-0:3" role="radio" type="button" aria-checked="false" disabled="" data-state="unchecked" required="false" value="3" aria-label="3">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2">
-        <p for="v-0-0:3" class="block font-medium text-default cursor-not-allowed opacity-75">Option 3</p>
+      <div class="w-full ms-2"><label for="v-0-0:3" class="block font-medium text-default cursor-not-allowed opacity-75">Option 3</label>
         <!--v-if-->
       </div>
-    </label>
+    </div>
   </fieldset>
   <!---->
 </div>"
@@ -395,33 +395,33 @@ exports[`RadioGroup > renders with horizontal variant table correctly 1`] = `
 exports[`RadioGroup > renders with indicator end correctly 1`] = `
 "<div role="radiogroup" aria-orientation="vertical" aria-required="false" dir="ltr" tabindex="0" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0-0" class="relative">
   <fieldset class="flex gap-x-2 flex-col gap-y-1">
-    <!--v-if--><label class="flex items-start flex-row-reverse text-sm">
+    <!--v-if-->
+    <div class="flex items-start flex-row-reverse text-sm">
       <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" tabindex="-1" data-orientation="vertical" data-active="" data-reka-collection-item="" id="v-0-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" value="1" aria-label="1"><span data-state="checked" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-primary after:size-1.5"></span>
           <!---->
         </button></div>
-      <div class="w-full me-2">
-        <p for="v-0-0:1" class="block font-medium text-default">Option 1</p>
+      <div class="w-full me-2"><label for="v-0-0:1" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
-    </label><label class="flex items-start flex-row-reverse text-sm">
+    </div>
+    <div class="flex items-start flex-row-reverse text-sm">
       <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" tabindex="-1" data-orientation="vertical" data-reka-collection-item="" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full me-2">
-        <p for="v-0-0:2" class="block font-medium text-default">Option 2</p>
+      <div class="w-full me-2"><label for="v-0-0:2" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
-    </label><label class="flex items-start flex-row-reverse text-sm">
+    </div>
+    <div class="flex items-start flex-row-reverse text-sm">
       <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" tabindex="-1" data-orientation="vertical" data-reka-collection-item="" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full me-2">
-        <p for="v-0-0:3" class="block font-medium text-default">Option 3</p>
+      <div class="w-full me-2"><label for="v-0-0:3" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
-    </label>
+    </div>
   </fieldset>
   <!---->
 </div>"
@@ -430,33 +430,33 @@ exports[`RadioGroup > renders with indicator end correctly 1`] = `
 exports[`RadioGroup > renders with indicator hidden correctly 1`] = `
 "<div role="radiogroup" aria-orientation="vertical" aria-required="false" dir="ltr" tabindex="0" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0-0" class="relative">
   <fieldset class="flex gap-x-2 flex-col gap-y-1">
-    <!--v-if--><label class="flex items-start text-sm">
+    <!--v-if-->
+    <div class="flex items-start text-sm">
       <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary sr-only size-4" tabindex="-1" data-orientation="vertical" data-active="" data-reka-collection-item="" id="v-0-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" value="1" aria-label="1"><span data-state="checked" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-primary after:size-1.5"></span>
           <!---->
         </button></div>
-      <div class="w-full text-center">
-        <p for="v-0-0:1" class="block font-medium text-default">Option 1</p>
+      <div class="w-full text-center"><label for="v-0-0:1" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
-    </label><label class="flex items-start text-sm">
+    </div>
+    <div class="flex items-start text-sm">
       <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary sr-only size-4" tabindex="-1" data-orientation="vertical" data-reka-collection-item="" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full text-center">
-        <p for="v-0-0:2" class="block font-medium text-default">Option 2</p>
+      <div class="w-full text-center"><label for="v-0-0:2" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
-    </label><label class="flex items-start text-sm">
+    </div>
+    <div class="flex items-start text-sm">
       <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary sr-only size-4" tabindex="-1" data-orientation="vertical" data-reka-collection-item="" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full text-center">
-        <p for="v-0-0:3" class="block font-medium text-default">Option 3</p>
+      <div class="w-full text-center"><label for="v-0-0:3" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
-    </label>
+    </div>
   </fieldset>
   <!---->
 </div>"
@@ -465,33 +465,33 @@ exports[`RadioGroup > renders with indicator hidden correctly 1`] = `
 exports[`RadioGroup > renders with indicator start correctly 1`] = `
 "<div role="radiogroup" aria-orientation="vertical" aria-required="false" dir="ltr" tabindex="0" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0-0" class="relative">
   <fieldset class="flex gap-x-2 flex-col gap-y-1">
-    <!--v-if--><label class="flex items-start flex-row text-sm">
+    <!--v-if-->
+    <div class="flex items-start flex-row text-sm">
       <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" tabindex="-1" data-orientation="vertical" data-active="" data-reka-collection-item="" id="v-0-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" value="1" aria-label="1"><span data-state="checked" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-primary after:size-1.5"></span>
           <!---->
         </button></div>
-      <div class="w-full ms-2">
-        <p for="v-0-0:1" class="block font-medium text-default">Option 1</p>
+      <div class="w-full ms-2"><label for="v-0-0:1" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
-    </label><label class="flex items-start flex-row text-sm">
+    </div>
+    <div class="flex items-start flex-row text-sm">
       <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" tabindex="-1" data-orientation="vertical" data-reka-collection-item="" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2">
-        <p for="v-0-0:2" class="block font-medium text-default">Option 2</p>
+      <div class="w-full ms-2"><label for="v-0-0:2" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
-    </label><label class="flex items-start flex-row text-sm">
+    </div>
+    <div class="flex items-start flex-row text-sm">
       <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" tabindex="-1" data-orientation="vertical" data-reka-collection-item="" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2">
-        <p for="v-0-0:3" class="block font-medium text-default">Option 3</p>
+      <div class="w-full ms-2"><label for="v-0-0:3" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
-    </label>
+    </div>
   </fieldset>
   <!---->
 </div>"
@@ -500,34 +500,34 @@ exports[`RadioGroup > renders with indicator start correctly 1`] = `
 exports[`RadioGroup > renders with items correctly 1`] = `
 "<div role="radiogroup" aria-orientation="vertical" aria-required="false" dir="ltr" tabindex="0" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0-0" class="relative">
   <fieldset class="flex gap-x-2 flex-col gap-y-1">
-    <!--v-if--><label class="flex items-start flex-row text-sm">
+    <!--v-if-->
+    <div class="flex items-start flex-row text-sm">
       <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" tabindex="-1" data-orientation="vertical" data-reka-collection-item="" id="v-0-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="1" aria-label="1">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2">
-        <p for="v-0-0:1" class="block font-medium text-default">Option 1</p>
+      <div class="w-full ms-2"><label for="v-0-0:1" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
-    </label><label class="flex items-start flex-row text-sm">
+    </div>
+    <div class="flex items-start flex-row text-sm">
       <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" tabindex="-1" data-orientation="vertical" data-reka-collection-item="" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2">
-        <p for="v-0-0:2" class="block font-medium text-default">Option 2</p>
+      <div class="w-full ms-2"><label for="v-0-0:2" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
-    </label><label class="flex items-start flex-row text-sm">
+    </div>
+    <div class="flex items-start flex-row text-sm">
       <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" tabindex="-1" data-orientation="vertical" data-reka-collection-item="" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2">
-        <p for="v-0-0:3" class="block font-medium text-default">Option 3</p>
+      <div class="w-full ms-2"><label for="v-0-0:3" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
-    </label>
+    </div>
   </fieldset>
   <!---->
 </div>"
@@ -536,34 +536,34 @@ exports[`RadioGroup > renders with items correctly 1`] = `
 exports[`RadioGroup > renders with label slot correctly 1`] = `
 "<div role="radiogroup" aria-orientation="vertical" aria-required="false" dir="ltr" tabindex="0" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0-0" class="relative">
   <fieldset class="flex gap-x-2 flex-col gap-y-1">
-    <!--v-if--><label class="flex items-start flex-row text-sm">
+    <!--v-if-->
+    <div class="flex items-start flex-row text-sm">
       <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" tabindex="-1" data-orientation="vertical" data-reka-collection-item="" id="v-0-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="1" aria-label="1">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2">
-        <p for="v-0-0:1" class="block font-medium text-default">Label slot</p>
+      <div class="w-full ms-2"><label for="v-0-0:1" class="block font-medium text-default">Label slot</label>
         <!--v-if-->
       </div>
-    </label><label class="flex items-start flex-row text-sm">
+    </div>
+    <div class="flex items-start flex-row text-sm">
       <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" tabindex="-1" data-orientation="vertical" data-reka-collection-item="" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2">
-        <p for="v-0-0:2" class="block font-medium text-default">Label slot</p>
+      <div class="w-full ms-2"><label for="v-0-0:2" class="block font-medium text-default">Label slot</label>
         <!--v-if-->
       </div>
-    </label><label class="flex items-start flex-row text-sm">
+    </div>
+    <div class="flex items-start flex-row text-sm">
       <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" tabindex="-1" data-orientation="vertical" data-reka-collection-item="" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2">
-        <p for="v-0-0:3" class="block font-medium text-default">Label slot</p>
+      <div class="w-full ms-2"><label for="v-0-0:3" class="block font-medium text-default">Label slot</label>
         <!--v-if-->
       </div>
-    </label>
+    </div>
   </fieldset>
   <!---->
 </div>"
@@ -572,34 +572,34 @@ exports[`RadioGroup > renders with label slot correctly 1`] = `
 exports[`RadioGroup > renders with labelKey correctly 1`] = `
 "<div role="radiogroup" aria-orientation="vertical" aria-required="false" dir="ltr" tabindex="0" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0-0" class="relative">
   <fieldset class="flex gap-x-2 flex-col gap-y-1">
-    <!--v-if--><label class="flex items-start flex-row text-sm">
+    <!--v-if-->
+    <div class="flex items-start flex-row text-sm">
       <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" tabindex="-1" data-orientation="vertical" data-reka-collection-item="" id="v-0-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="1" aria-label="1">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2">
-        <p for="v-0-0:1" class="block font-medium text-default">1</p>
+      <div class="w-full ms-2"><label for="v-0-0:1" class="block font-medium text-default">1</label>
         <!--v-if-->
       </div>
-    </label><label class="flex items-start flex-row text-sm">
+    </div>
+    <div class="flex items-start flex-row text-sm">
       <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" tabindex="-1" data-orientation="vertical" data-reka-collection-item="" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2">
-        <p for="v-0-0:2" class="block font-medium text-default">2</p>
+      <div class="w-full ms-2"><label for="v-0-0:2" class="block font-medium text-default">2</label>
         <!--v-if-->
       </div>
-    </label><label class="flex items-start flex-row text-sm">
+    </div>
+    <div class="flex items-start flex-row text-sm">
       <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" tabindex="-1" data-orientation="vertical" data-reka-collection-item="" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2">
-        <p for="v-0-0:3" class="block font-medium text-default">3</p>
+      <div class="w-full ms-2"><label for="v-0-0:3" class="block font-medium text-default">3</label>
         <!--v-if-->
       </div>
-    </label>
+    </div>
   </fieldset>
   <!---->
 </div>"
@@ -608,34 +608,34 @@ exports[`RadioGroup > renders with labelKey correctly 1`] = `
 exports[`RadioGroup > renders with legend slot correctly 1`] = `
 "<div role="radiogroup" aria-orientation="vertical" aria-required="false" dir="ltr" tabindex="0" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0-0" class="relative">
   <fieldset class="flex gap-x-2 flex-col gap-y-1">
-    <!--v-if--><label class="flex items-start flex-row text-sm">
+    <!--v-if-->
+    <div class="flex items-start flex-row text-sm">
       <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" tabindex="-1" data-orientation="vertical" data-reka-collection-item="" id="v-0-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="1" aria-label="1">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2">
-        <p for="v-0-0:1" class="block font-medium text-default">Legend slot</p>
+      <div class="w-full ms-2"><label for="v-0-0:1" class="block font-medium text-default">Legend slot</label>
         <!--v-if-->
       </div>
-    </label><label class="flex items-start flex-row text-sm">
+    </div>
+    <div class="flex items-start flex-row text-sm">
       <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" tabindex="-1" data-orientation="vertical" data-reka-collection-item="" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2">
-        <p for="v-0-0:2" class="block font-medium text-default">Legend slot</p>
+      <div class="w-full ms-2"><label for="v-0-0:2" class="block font-medium text-default">Legend slot</label>
         <!--v-if-->
       </div>
-    </label><label class="flex items-start flex-row text-sm">
+    </div>
+    <div class="flex items-start flex-row text-sm">
       <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" tabindex="-1" data-orientation="vertical" data-reka-collection-item="" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2">
-        <p for="v-0-0:3" class="block font-medium text-default">Legend slot</p>
+      <div class="w-full ms-2"><label for="v-0-0:3" class="block font-medium text-default">Legend slot</label>
         <!--v-if-->
       </div>
-    </label>
+    </div>
   </fieldset>
   <!---->
 </div>"
@@ -644,33 +644,33 @@ exports[`RadioGroup > renders with legend slot correctly 1`] = `
 exports[`RadioGroup > renders with modelValue correctly 1`] = `
 "<div role="radiogroup" aria-orientation="vertical" aria-required="false" dir="ltr" tabindex="0" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0-0" class="relative">
   <fieldset class="flex gap-x-2 flex-col gap-y-1">
-    <!--v-if--><label class="flex items-start flex-row text-sm">
+    <!--v-if-->
+    <div class="flex items-start flex-row text-sm">
       <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" tabindex="-1" data-orientation="vertical" data-active="" data-reka-collection-item="" id="v-0-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" value="1" aria-label="1"><span data-state="checked" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-primary after:size-1.5"></span>
           <!---->
         </button></div>
-      <div class="w-full ms-2">
-        <p for="v-0-0:1" class="block font-medium text-default">Option 1</p>
+      <div class="w-full ms-2"><label for="v-0-0:1" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
-    </label><label class="flex items-start flex-row text-sm">
+    </div>
+    <div class="flex items-start flex-row text-sm">
       <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" tabindex="-1" data-orientation="vertical" data-reka-collection-item="" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2">
-        <p for="v-0-0:2" class="block font-medium text-default">Option 2</p>
+      <div class="w-full ms-2"><label for="v-0-0:2" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
-    </label><label class="flex items-start flex-row text-sm">
+    </div>
+    <div class="flex items-start flex-row text-sm">
       <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" tabindex="-1" data-orientation="vertical" data-reka-collection-item="" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2">
-        <p for="v-0-0:3" class="block font-medium text-default">Option 3</p>
+      <div class="w-full ms-2"><label for="v-0-0:3" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
-    </label>
+    </div>
   </fieldset>
   <!---->
 </div>"
@@ -889,34 +889,34 @@ exports[`RadioGroup > renders with primary variant table correctly 1`] = `
 exports[`RadioGroup > renders with required correctly 1`] = `
 "<div role="radiogroup" aria-orientation="vertical" aria-required="true" dir="ltr" tabindex="0" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0-0" class="relative">
   <fieldset class="flex gap-x-2 flex-col gap-y-1">
-    <legend class="mb-1 block font-medium text-default text-sm after:content-['*'] after:ms-0.5 after:text-error">Legend</legend><label class="flex items-start flex-row text-sm">
+    <legend class="mb-1 block font-medium text-default text-sm after:content-['*'] after:ms-0.5 after:text-error">Legend</legend>
+    <div class="flex items-start flex-row text-sm">
       <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" tabindex="-1" data-orientation="vertical" data-reka-collection-item="" id="v-0-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="true" value="1" aria-label="1">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2">
-        <p for="v-0-0:1" class="block font-medium text-default">Option 1</p>
+      <div class="w-full ms-2"><label for="v-0-0:1" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
-    </label><label class="flex items-start flex-row text-sm">
+    </div>
+    <div class="flex items-start flex-row text-sm">
       <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" tabindex="-1" data-orientation="vertical" data-reka-collection-item="" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="true" value="2" aria-label="2">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2">
-        <p for="v-0-0:2" class="block font-medium text-default">Option 2</p>
+      <div class="w-full ms-2"><label for="v-0-0:2" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
-    </label><label class="flex items-start flex-row text-sm">
+    </div>
+    <div class="flex items-start flex-row text-sm">
       <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" tabindex="-1" data-orientation="vertical" data-reka-collection-item="" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="true" value="3" aria-label="3">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2">
-        <p for="v-0-0:3" class="block font-medium text-default">Option 3</p>
+      <div class="w-full ms-2"><label for="v-0-0:3" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
-    </label>
+    </div>
   </fieldset>
   <!---->
 </div>"
@@ -925,33 +925,33 @@ exports[`RadioGroup > renders with required correctly 1`] = `
 exports[`RadioGroup > renders with size lg correctly 1`] = `
 "<div role="radiogroup" aria-orientation="vertical" aria-required="false" dir="ltr" tabindex="0" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0-0" class="relative">
   <fieldset class="flex gap-x-2 flex-col gap-y-1">
-    <!--v-if--><label class="flex items-start flex-row text-sm">
+    <!--v-if-->
+    <div class="flex items-start flex-row text-sm">
       <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4.5" tabindex="-1" data-orientation="vertical" data-active="" data-reka-collection-item="" id="v-0-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" value="1" aria-label="1"><span data-state="checked" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-primary after:size-1.5"></span>
           <!---->
         </button></div>
-      <div class="w-full ms-2">
-        <p for="v-0-0:1" class="block font-medium text-default">Option 1</p>
+      <div class="w-full ms-2"><label for="v-0-0:1" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
-    </label><label class="flex items-start flex-row text-sm">
+    </div>
+    <div class="flex items-start flex-row text-sm">
       <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4.5" tabindex="-1" data-orientation="vertical" data-reka-collection-item="" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2">
-        <p for="v-0-0:2" class="block font-medium text-default">Option 2</p>
+      <div class="w-full ms-2"><label for="v-0-0:2" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
-    </label><label class="flex items-start flex-row text-sm">
+    </div>
+    <div class="flex items-start flex-row text-sm">
       <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4.5" tabindex="-1" data-orientation="vertical" data-reka-collection-item="" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2">
-        <p for="v-0-0:3" class="block font-medium text-default">Option 3</p>
+      <div class="w-full ms-2"><label for="v-0-0:3" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
-    </label>
+    </div>
   </fieldset>
   <!---->
 </div>"
@@ -960,33 +960,33 @@ exports[`RadioGroup > renders with size lg correctly 1`] = `
 exports[`RadioGroup > renders with size md correctly 1`] = `
 "<div role="radiogroup" aria-orientation="vertical" aria-required="false" dir="ltr" tabindex="0" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0-0" class="relative">
   <fieldset class="flex gap-x-2 flex-col gap-y-1">
-    <!--v-if--><label class="flex items-start flex-row text-sm">
+    <!--v-if-->
+    <div class="flex items-start flex-row text-sm">
       <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" tabindex="-1" data-orientation="vertical" data-active="" data-reka-collection-item="" id="v-0-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" value="1" aria-label="1"><span data-state="checked" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-primary after:size-1.5"></span>
           <!---->
         </button></div>
-      <div class="w-full ms-2">
-        <p for="v-0-0:1" class="block font-medium text-default">Option 1</p>
+      <div class="w-full ms-2"><label for="v-0-0:1" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
-    </label><label class="flex items-start flex-row text-sm">
+    </div>
+    <div class="flex items-start flex-row text-sm">
       <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" tabindex="-1" data-orientation="vertical" data-reka-collection-item="" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2">
-        <p for="v-0-0:2" class="block font-medium text-default">Option 2</p>
+      <div class="w-full ms-2"><label for="v-0-0:2" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
-    </label><label class="flex items-start flex-row text-sm">
+    </div>
+    <div class="flex items-start flex-row text-sm">
       <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" tabindex="-1" data-orientation="vertical" data-reka-collection-item="" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2">
-        <p for="v-0-0:3" class="block font-medium text-default">Option 3</p>
+      <div class="w-full ms-2"><label for="v-0-0:3" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
-    </label>
+    </div>
   </fieldset>
   <!---->
 </div>"
@@ -995,33 +995,33 @@ exports[`RadioGroup > renders with size md correctly 1`] = `
 exports[`RadioGroup > renders with size sm correctly 1`] = `
 "<div role="radiogroup" aria-orientation="vertical" aria-required="false" dir="ltr" tabindex="0" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0-0" class="relative">
   <fieldset class="flex gap-x-2 flex-col gap-y-0.5">
-    <!--v-if--><label class="flex items-start flex-row text-xs">
+    <!--v-if-->
+    <div class="flex items-start flex-row text-xs">
       <div class="flex items-center h-4"><button class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-3.5" tabindex="-1" data-orientation="vertical" data-active="" data-reka-collection-item="" id="v-0-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" value="1" aria-label="1"><span data-state="checked" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-primary after:size-1"></span>
           <!---->
         </button></div>
-      <div class="w-full ms-2">
-        <p for="v-0-0:1" class="block font-medium text-default">Option 1</p>
+      <div class="w-full ms-2"><label for="v-0-0:1" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
-    </label><label class="flex items-start flex-row text-xs">
+    </div>
+    <div class="flex items-start flex-row text-xs">
       <div class="flex items-center h-4"><button class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-3.5" tabindex="-1" data-orientation="vertical" data-reka-collection-item="" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2">
-        <p for="v-0-0:2" class="block font-medium text-default">Option 2</p>
+      <div class="w-full ms-2"><label for="v-0-0:2" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
-    </label><label class="flex items-start flex-row text-xs">
+    </div>
+    <div class="flex items-start flex-row text-xs">
       <div class="flex items-center h-4"><button class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-3.5" tabindex="-1" data-orientation="vertical" data-reka-collection-item="" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2">
-        <p for="v-0-0:3" class="block font-medium text-default">Option 3</p>
+      <div class="w-full ms-2"><label for="v-0-0:3" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
-    </label>
+    </div>
   </fieldset>
   <!---->
 </div>"
@@ -1030,33 +1030,33 @@ exports[`RadioGroup > renders with size sm correctly 1`] = `
 exports[`RadioGroup > renders with size xl correctly 1`] = `
 "<div role="radiogroup" aria-orientation="vertical" aria-required="false" dir="ltr" tabindex="0" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0-0" class="relative">
   <fieldset class="flex gap-x-2 flex-col gap-y-1.5">
-    <!--v-if--><label class="flex items-start flex-row text-base">
+    <!--v-if-->
+    <div class="flex items-start flex-row text-base">
       <div class="flex items-center h-6"><button class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-5" tabindex="-1" data-orientation="vertical" data-active="" data-reka-collection-item="" id="v-0-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" value="1" aria-label="1"><span data-state="checked" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-primary after:size-2"></span>
           <!---->
         </button></div>
-      <div class="w-full ms-2">
-        <p for="v-0-0:1" class="block font-medium text-default">Option 1</p>
+      <div class="w-full ms-2"><label for="v-0-0:1" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
-    </label><label class="flex items-start flex-row text-base">
+    </div>
+    <div class="flex items-start flex-row text-base">
       <div class="flex items-center h-6"><button class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-5" tabindex="-1" data-orientation="vertical" data-reka-collection-item="" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2">
-        <p for="v-0-0:2" class="block font-medium text-default">Option 2</p>
+      <div class="w-full ms-2"><label for="v-0-0:2" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
-    </label><label class="flex items-start flex-row text-base">
+    </div>
+    <div class="flex items-start flex-row text-base">
       <div class="flex items-center h-6"><button class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-5" tabindex="-1" data-orientation="vertical" data-reka-collection-item="" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2">
-        <p for="v-0-0:3" class="block font-medium text-default">Option 3</p>
+      <div class="w-full ms-2"><label for="v-0-0:3" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
-    </label>
+    </div>
   </fieldset>
   <!---->
 </div>"
@@ -1065,33 +1065,33 @@ exports[`RadioGroup > renders with size xl correctly 1`] = `
 exports[`RadioGroup > renders with size xs correctly 1`] = `
 "<div role="radiogroup" aria-orientation="vertical" aria-required="false" dir="ltr" tabindex="0" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0-0" class="relative">
   <fieldset class="flex gap-x-2 flex-col gap-y-0.5">
-    <!--v-if--><label class="flex items-start flex-row text-xs">
+    <!--v-if-->
+    <div class="flex items-start flex-row text-xs">
       <div class="flex items-center h-4"><button class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-3" tabindex="-1" data-orientation="vertical" data-active="" data-reka-collection-item="" id="v-0-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" value="1" aria-label="1"><span data-state="checked" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-primary after:size-1"></span>
           <!---->
         </button></div>
-      <div class="w-full ms-2">
-        <p for="v-0-0:1" class="block font-medium text-default">Option 1</p>
+      <div class="w-full ms-2"><label for="v-0-0:1" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
-    </label><label class="flex items-start flex-row text-xs">
+    </div>
+    <div class="flex items-start flex-row text-xs">
       <div class="flex items-center h-4"><button class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-3" tabindex="-1" data-orientation="vertical" data-reka-collection-item="" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2">
-        <p for="v-0-0:2" class="block font-medium text-default">Option 2</p>
+      <div class="w-full ms-2"><label for="v-0-0:2" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
-    </label><label class="flex items-start flex-row text-xs">
+    </div>
+    <div class="flex items-start flex-row text-xs">
       <div class="flex items-center h-4"><button class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-3" tabindex="-1" data-orientation="vertical" data-reka-collection-item="" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2">
-        <p for="v-0-0:3" class="block font-medium text-default">Option 3</p>
+      <div class="w-full ms-2"><label for="v-0-0:3" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
-    </label>
+    </div>
   </fieldset>
   <!---->
 </div>"
@@ -1100,34 +1100,34 @@ exports[`RadioGroup > renders with size xs correctly 1`] = `
 exports[`RadioGroup > renders with ui correctly 1`] = `
 "<div role="radiogroup" aria-orientation="vertical" aria-required="false" dir="ltr" tabindex="0" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0-0" class="relative">
   <fieldset class="flex gap-x-2 flex-col gap-y-1">
-    <!--v-if--><label class="flex items-start flex-row text-sm">
+    <!--v-if-->
+    <div class="flex items-start flex-row text-sm">
       <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" tabindex="-1" data-orientation="vertical" data-reka-collection-item="" id="v-0-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="1" aria-label="1">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-4">
-        <p for="v-0-0:1" class="block font-medium text-default">Option 1</p>
+      <div class="w-full ms-4"><label for="v-0-0:1" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
-    </label><label class="flex items-start flex-row text-sm">
+    </div>
+    <div class="flex items-start flex-row text-sm">
       <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" tabindex="-1" data-orientation="vertical" data-reka-collection-item="" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-4">
-        <p for="v-0-0:2" class="block font-medium text-default">Option 2</p>
+      <div class="w-full ms-4"><label for="v-0-0:2" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
-    </label><label class="flex items-start flex-row text-sm">
+    </div>
+    <div class="flex items-start flex-row text-sm">
       <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" tabindex="-1" data-orientation="vertical" data-reka-collection-item="" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-4">
-        <p for="v-0-0:3" class="block font-medium text-default">Option 3</p>
+      <div class="w-full ms-4"><label for="v-0-0:3" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
-    </label>
+    </div>
   </fieldset>
   <!---->
 </div>"
@@ -1136,34 +1136,34 @@ exports[`RadioGroup > renders with ui correctly 1`] = `
 exports[`RadioGroup > renders with valueKey correctly 1`] = `
 "<div role="radiogroup" aria-orientation="vertical" aria-required="false" dir="ltr" tabindex="0" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0-0" class="relative">
   <fieldset class="flex gap-x-2 flex-col gap-y-1">
-    <!--v-if--><label class="flex items-start flex-row text-sm">
+    <!--v-if-->
+    <div class="flex items-start flex-row text-sm">
       <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" tabindex="-1" data-orientation="vertical" data-reka-collection-item="" id="v-0-0:Option 1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="Option 1" aria-label="Option 1">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2">
-        <p for="v-0-0:Option 1" class="block font-medium text-default">Option 1</p>
+      <div class="w-full ms-2"><label for="v-0-0:Option 1" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
-    </label><label class="flex items-start flex-row text-sm">
+    </div>
+    <div class="flex items-start flex-row text-sm">
       <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" tabindex="-1" data-orientation="vertical" data-reka-collection-item="" id="v-0-0:Option 2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="Option 2" aria-label="Option 2">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2">
-        <p for="v-0-0:Option 2" class="block font-medium text-default">Option 2</p>
+      <div class="w-full ms-2"><label for="v-0-0:Option 2" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
-    </label><label class="flex items-start flex-row text-sm">
+    </div>
+    <div class="flex items-start flex-row text-sm">
       <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" tabindex="-1" data-orientation="vertical" data-reka-collection-item="" id="v-0-0:Option 3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="Option 3" aria-label="Option 3">
           <!---->
           <!---->
         </button></div>
-      <div class="w-full ms-2">
-        <p for="v-0-0:Option 3" class="block font-medium text-default">Option 3</p>
+      <div class="w-full ms-2"><label for="v-0-0:Option 3" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
-    </label>
+    </div>
   </fieldset>
   <!---->
 </div>"
diff --git a/test/components/__snapshots__/Table-vue.spec.ts.snap b/test/components/__snapshots__/Table-vue.spec.ts.snap
index 13c81503..d4438e9f 100644
--- a/test/components/__snapshots__/Table-vue.spec.ts.snap
+++ b/test/components/__snapshots__/Table-vue.spec.ts.snap
@@ -271,13 +271,15 @@ exports[`Table > renders with columns correctly 1`] = `
     <!--v-if-->
     <thead class="relative [&amp;>tr]:after:absolute [&amp;>tr]:after:inset-x-0 [&amp;>tr]:after:bottom-0 [&amp;>tr]:after:h-px [&amp;>tr]:after:bg-(--ui-border-accented)">
       <tr class="data-[selected=true]:bg-elevated/50">
-        <th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0"><label class="relative flex items-start flex-row">
+        <th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
+          <div class="relative flex items-start flex-row">
             <div class="flex items-center h-5"><button arialabel="Select all" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
                 <!---->
                 <!---->
               </button></div>
             <!--v-if-->
-          </label></th>
+          </div>
+        </th>
         <th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">#</th>
         <th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Date</th>
         <th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Status</th>
@@ -294,13 +296,15 @@ exports[`Table > renders with columns correctly 1`] = `
     </thead>
     <tbody class="divide-y divide-default [&amp;>tr]:data-[selectable=true]:hover:bg-elevated/50 [&amp;>tr]:data-[selectable=true]:focus-visible:outline-primary">
       <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0"><label class="relative flex items-start flex-row">
+        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">
+          <div class="relative flex items-start flex-row">
             <div class="flex items-center h-5"><button arialabel="Select row" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-1" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
                 <!---->
                 <!---->
               </button></div>
             <!--v-if-->
-          </label></td>
+          </div>
+        </td>
         <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">#m5gr84i9</td>
         <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Invalid Date</td>
         <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 capitalize"><!--v-if-->success<!--v-if--></span></td>
@@ -323,13 +327,15 @@ exports[`Table > renders with columns correctly 1`] = `
       </tr>
       <!--v-if-->
       <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0"><label class="relative flex items-start flex-row">
+        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">
+          <div class="relative flex items-start flex-row">
             <div class="flex items-center h-5"><button arialabel="Select row" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
                 <!---->
                 <!---->
               </button></div>
             <!--v-if-->
-          </label></td>
+          </div>
+        </td>
         <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">#3u1reuv4</td>
         <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Invalid Date</td>
         <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 capitalize"><!--v-if-->success<!--v-if--></span></td>
@@ -352,13 +358,15 @@ exports[`Table > renders with columns correctly 1`] = `
       </tr>
       <!--v-if-->
       <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0"><label class="relative flex items-start flex-row">
+        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">
+          <div class="relative flex items-start flex-row">
             <div class="flex items-center h-5"><button arialabel="Select row" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-5" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
                 <!---->
                 <!---->
               </button></div>
             <!--v-if-->
-          </label></td>
+          </div>
+        </td>
         <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">#derv1ws0</td>
         <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Invalid Date</td>
         <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 capitalize"><!--v-if-->processing<!--v-if--></span></td>
@@ -381,13 +389,15 @@ exports[`Table > renders with columns correctly 1`] = `
       </tr>
       <!--v-if-->
       <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0"><label class="relative flex items-start flex-row">
+        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">
+          <div class="relative flex items-start flex-row">
             <div class="flex items-center h-5"><button arialabel="Select row" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-7" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
                 <!---->
                 <!---->
               </button></div>
             <!--v-if-->
-          </label></td>
+          </div>
+        </td>
         <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">#5kma53ae</td>
         <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Invalid Date</td>
         <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 capitalize"><!--v-if-->success<!--v-if--></span></td>
@@ -410,13 +420,15 @@ exports[`Table > renders with columns correctly 1`] = `
       </tr>
       <!--v-if-->
       <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0"><label class="relative flex items-start flex-row">
+        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">
+          <div class="relative flex items-start flex-row">
             <div class="flex items-center h-5"><button arialabel="Select row" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-9" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
                 <!---->
                 <!---->
               </button></div>
             <!--v-if-->
-          </label></td>
+          </div>
+        </td>
         <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">#bhqecj4p</td>
         <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Invalid Date</td>
         <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-error/10 text-error ring ring-inset ring-error/25 capitalize"><!--v-if-->failed<!--v-if--></span></td>
@@ -518,13 +530,15 @@ exports[`Table > renders with empty slot correctly 1`] = `
     <!--v-if-->
     <thead class="relative [&amp;>tr]:after:absolute [&amp;>tr]:after:inset-x-0 [&amp;>tr]:after:bottom-0 [&amp;>tr]:after:h-px [&amp;>tr]:after:bg-(--ui-border-accented)">
       <tr class="data-[selected=true]:bg-elevated/50">
-        <th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0"><label class="relative flex items-start flex-row">
+        <th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
+          <div class="relative flex items-start flex-row">
             <div class="flex items-center h-5"><button arialabel="Select all" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
                 <!---->
                 <!---->
               </button></div>
             <!--v-if-->
-          </label></th>
+          </div>
+        </th>
         <th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">#</th>
         <th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Date</th>
         <th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Status</th>
@@ -1296,13 +1310,15 @@ exports[`Table > renders with loading slot correctly 1`] = `
     <!--v-if-->
     <thead class="relative [&amp;>tr]:after:absolute [&amp;>tr]:after:inset-x-0 [&amp;>tr]:after:bottom-0 [&amp;>tr]:after:h-px [&amp;>tr]:after:bg-(--ui-border-accented) after:absolute after:bottom-0 after:inset-x-0 after:h-px after:bg-primary after:animate-[carousel_2s_ease-in-out_infinite] rtl:after:animate-[carousel-rtl_2s_ease-in-out_infinite]">
       <tr class="data-[selected=true]:bg-elevated/50">
-        <th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0"><label class="relative flex items-start flex-row">
+        <th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
+          <div class="relative flex items-start flex-row">
             <div class="flex items-center h-5"><button arialabel="Select all" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
                 <!---->
                 <!---->
               </button></div>
             <!--v-if-->
-          </label></th>
+          </div>
+        </th>
         <th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">#</th>
         <th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Date</th>
         <th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Status</th>
diff --git a/test/components/__snapshots__/Table.spec.ts.snap b/test/components/__snapshots__/Table.spec.ts.snap
index 23b670fe..cb973297 100644
--- a/test/components/__snapshots__/Table.spec.ts.snap
+++ b/test/components/__snapshots__/Table.spec.ts.snap
@@ -271,13 +271,15 @@ exports[`Table > renders with columns correctly 1`] = `
     <!--v-if-->
     <thead class="relative [&amp;>tr]:after:absolute [&amp;>tr]:after:inset-x-0 [&amp;>tr]:after:bottom-0 [&amp;>tr]:after:h-px [&amp;>tr]:after:bg-(--ui-border-accented)">
       <tr class="data-[selected=true]:bg-elevated/50">
-        <th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0"><label class="relative flex items-start flex-row">
+        <th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
+          <div class="relative flex items-start flex-row">
             <div class="flex items-center h-5"><button arialabel="Select all" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
                 <!---->
                 <!---->
               </button></div>
             <!--v-if-->
-          </label></th>
+          </div>
+        </th>
         <th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">#</th>
         <th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Date</th>
         <th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Status</th>
@@ -294,13 +296,15 @@ exports[`Table > renders with columns correctly 1`] = `
     </thead>
     <tbody class="divide-y divide-default [&amp;>tr]:data-[selectable=true]:hover:bg-elevated/50 [&amp;>tr]:data-[selectable=true]:focus-visible:outline-primary">
       <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0"><label class="relative flex items-start flex-row">
+        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">
+          <div class="relative flex items-start flex-row">
             <div class="flex items-center h-5"><button arialabel="Select row" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0-1" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
                 <!---->
                 <!---->
               </button></div>
             <!--v-if-->
-          </label></td>
+          </div>
+        </td>
         <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">#m5gr84i9</td>
         <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Invalid Date</td>
         <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 capitalize"><!--v-if-->success<!--v-if--></span></td>
@@ -323,13 +327,15 @@ exports[`Table > renders with columns correctly 1`] = `
       </tr>
       <!--v-if-->
       <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0"><label class="relative flex items-start flex-row">
+        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">
+          <div class="relative flex items-start flex-row">
             <div class="flex items-center h-5"><button arialabel="Select row" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0-3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
                 <!---->
                 <!---->
               </button></div>
             <!--v-if-->
-          </label></td>
+          </div>
+        </td>
         <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">#3u1reuv4</td>
         <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Invalid Date</td>
         <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 capitalize"><!--v-if-->success<!--v-if--></span></td>
@@ -352,13 +358,15 @@ exports[`Table > renders with columns correctly 1`] = `
       </tr>
       <!--v-if-->
       <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0"><label class="relative flex items-start flex-row">
+        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">
+          <div class="relative flex items-start flex-row">
             <div class="flex items-center h-5"><button arialabel="Select row" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0-5" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
                 <!---->
                 <!---->
               </button></div>
             <!--v-if-->
-          </label></td>
+          </div>
+        </td>
         <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">#derv1ws0</td>
         <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Invalid Date</td>
         <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 capitalize"><!--v-if-->processing<!--v-if--></span></td>
@@ -381,13 +389,15 @@ exports[`Table > renders with columns correctly 1`] = `
       </tr>
       <!--v-if-->
       <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0"><label class="relative flex items-start flex-row">
+        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">
+          <div class="relative flex items-start flex-row">
             <div class="flex items-center h-5"><button arialabel="Select row" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0-7" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
                 <!---->
                 <!---->
               </button></div>
             <!--v-if-->
-          </label></td>
+          </div>
+        </td>
         <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">#5kma53ae</td>
         <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Invalid Date</td>
         <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 capitalize"><!--v-if-->success<!--v-if--></span></td>
@@ -410,13 +420,15 @@ exports[`Table > renders with columns correctly 1`] = `
       </tr>
       <!--v-if-->
       <tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0"><label class="relative flex items-start flex-row">
+        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">
+          <div class="relative flex items-start flex-row">
             <div class="flex items-center h-5"><button arialabel="Select row" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0-9" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
                 <!---->
                 <!---->
               </button></div>
             <!--v-if-->
-          </label></td>
+          </div>
+        </td>
         <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">#bhqecj4p</td>
         <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Invalid Date</td>
         <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-error/10 text-error ring ring-inset ring-error/25 capitalize"><!--v-if-->failed<!--v-if--></span></td>
@@ -518,13 +530,15 @@ exports[`Table > renders with empty slot correctly 1`] = `
     <!--v-if-->
     <thead class="relative [&amp;>tr]:after:absolute [&amp;>tr]:after:inset-x-0 [&amp;>tr]:after:bottom-0 [&amp;>tr]:after:h-px [&amp;>tr]:after:bg-(--ui-border-accented)">
       <tr class="data-[selected=true]:bg-elevated/50">
-        <th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0"><label class="relative flex items-start flex-row">
+        <th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
+          <div class="relative flex items-start flex-row">
             <div class="flex items-center h-5"><button arialabel="Select all" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
                 <!---->
                 <!---->
               </button></div>
             <!--v-if-->
-          </label></th>
+          </div>
+        </th>
         <th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">#</th>
         <th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Date</th>
         <th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Status</th>
@@ -1296,13 +1310,15 @@ exports[`Table > renders with loading slot correctly 1`] = `
     <!--v-if-->
     <thead class="relative [&amp;>tr]:after:absolute [&amp;>tr]:after:inset-x-0 [&amp;>tr]:after:bottom-0 [&amp;>tr]:after:h-px [&amp;>tr]:after:bg-(--ui-border-accented) after:absolute after:bottom-0 after:inset-x-0 after:h-px after:bg-primary after:animate-[carousel_2s_ease-in-out_infinite] rtl:after:animate-[carousel-rtl_2s_ease-in-out_infinite]">
       <tr class="data-[selected=true]:bg-elevated/50">
-        <th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0"><label class="relative flex items-start flex-row">
+        <th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
+          <div class="relative flex items-start flex-row">
             <div class="flex items-center h-5"><button arialabel="Select all" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
                 <!---->
                 <!---->
               </button></div>
             <!--v-if-->
-          </label></th>
+          </div>
+        </th>
         <th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">#</th>
         <th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Date</th>
         <th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">Status</th>