diff --git a/docs/content/3.components/radio-group.md b/docs/content/3.components/radio-group.md
index 9a2e1f7626..0a1a7dfa2b 100644
--- a/docs/content/3.components/radio-group.md
+++ b/docs/content/3.components/radio-group.md
@@ -99,6 +99,34 @@ props:
 ---
 ::
 
+### Variant
+
+Use the `variant` prop to change the variant of the RadioGroup.
+
+::component-code
+---
+prettier: true
+ignore:
+  - defaultValue
+  - items
+external:
+  - items
+props:
+  variant: 'table'
+  defaultValue: 'pro'
+  items:
+    - label: 'Pro'
+      value: 'pro'
+      description: 'Tailored for indie hackers, freelancers and solo founders.'
+    - label: 'Startup'
+      value: 'startup'
+      description: 'Best suited for small teams, startups and agencies.'
+    - label: 'Enterprise'
+      value: 'enterprise'
+      description: 'Ideal for larger teams and organizations.'
+---
+::
+
 ### Legend
 
 Use the `legend` prop to set the legend of the RadioGroup.
diff --git a/playground/app/pages/components/radio-group.vue b/playground/app/pages/components/radio-group.vue
index 3cb3c00833..6c81abbd3e 100644
--- a/playground/app/pages/components/radio-group.vue
+++ b/playground/app/pages/components/radio-group.vue
@@ -2,6 +2,8 @@
 import theme from '#build/ui/radio-group'
 
 const sizes = Object.keys(theme.variants.size) as Array<keyof typeof theme.variants.size>
+const variants = Object.keys(theme.variants.variant)
+const variant = ref('radio' as const)
 
 const literalOptions = [
   'Option 1',
@@ -23,27 +25,30 @@ const itemsWithDescription = [
 
 <template>
   <div class="flex flex-col items-center gap-4">
-    <div class="flex flex-col gap-4 ms-[100px]">
-      <URadioGroup :items="items" default-value="1" />
-      <URadioGroup :items="items" color="neutral" default-value="1" />
-      <URadioGroup :items="items" color="error" default-value="2" />
-      <URadioGroup :items="literalOptions" />
-      <URadioGroup :items="items" label="Disabled" disabled />
-      <URadioGroup :items="items" orientation="horizontal" class="ms-[-91px]" />
+    <USelect v-model="variant" :items="variants" />
+
+    <div class="flex flex-wrap gap-4 ms-[100px]">
+      <URadioGroup :variant="variant" :items="items" default-value="1" />
+      <URadioGroup :variant="variant" :items="items" color="neutral" default-value="1" />
+      <URadioGroup :variant="variant" :items="items" color="error" default-value="2" />
+      <URadioGroup :variant="variant" :items="literalOptions" />
+      <URadioGroup :variant="variant" :items="items" label="Disabled" disabled />
     </div>
 
+    <URadioGroup :variant="variant" :items="items" orientation="horizontal" class="ms-[95px]" />
+
     <div class="flex items-center gap-4 ms-[34px]">
-      <URadioGroup v-for="size in sizes" :key="size" :size="size" :items="items" />
+      <URadioGroup v-for="size in sizes" :key="size" :size="size" :variant="variant" :items="items" />
     </div>
 
     <div class="flex items-center gap-4 ms-[74px]">
-      <URadioGroup v-for="size in sizes" :key="size" :size="size" :items="itemsWithDescription" />
+      <URadioGroup v-for="size in sizes" :key="size" :size="size" :variant="variant" :items="itemsWithDescription" />
     </div>
 
     <div class="flex gap-4">
-      <URadioGroup :items="items" legend="Legend" />
-      <URadioGroup :items="items" legend="Legend" required />
-      <URadioGroup :items="items">
+      <URadioGroup :variant="variant" :items="items" legend="Legend" />
+      <URadioGroup :variant="variant" :items="items" legend="Legend" required />
+      <URadioGroup :variant="variant" :items="items">
         <template #legend>
           <span class="italic font-bold">
             With slots
@@ -56,6 +61,6 @@ const itemsWithDescription = [
         </template>
       </URadioGroup>
     </div>
-    <URadioGroup :items="items" legend="Legend" orientation="horizontal" required />
+    <URadioGroup :variant="variant" :items="items" legend="Legend" orientation="horizontal" required />
   </div>
 </template>
diff --git a/src/runtime/components/RadioGroup.vue b/src/runtime/components/RadioGroup.vue
index 07a9d8faba..af1cdcc740 100644
--- a/src/runtime/components/RadioGroup.vue
+++ b/src/runtime/components/RadioGroup.vue
@@ -50,6 +50,7 @@ export interface RadioGroupProps<T> extends Pick<RadioGroupRootProps, 'defaultVa
    * @defaultValue 'vertical'
    */
   orientation?: RadioGroupRootProps['orientation']
+  variant?: RadioGroupVariants['variant']
   class?: any
   ui?: Partial<typeof radioGroup.slots>
 }
@@ -85,7 +86,9 @@ const props = withDefaults(defineProps<RadioGroupProps<T>>(), {
 const emits = defineEmits<RadioGroupEmits>()
 const slots = defineSlots<RadioGroupSlots<T>>()
 
-const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'modelValue', 'defaultValue', 'orientation', 'loop', 'required'), emits)
+const modelValue = defineModel<AcceptableValue>()
+
+const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'defaultValue', 'orientation', 'loop', 'required'), emits)
 
 const { emitFormChange, emitFormInput, color, name, size, id: _id, disabled, ariaAttrs } = useFormField<RadioGroupProps<T>>(props, { bind: false })
 const id = _id.value ?? useId()
@@ -95,7 +98,8 @@ const ui = computed(() => radioGroup({
   color: color.value,
   disabled: disabled.value,
   required: props.required,
-  orientation: props.orientation
+  orientation: props.orientation,
+  variant: props.variant
 }))
 
 function normalizeItem(item: any) {
@@ -140,8 +144,8 @@ function onUpdate(value: any) {
 <template>
   <RadioGroupRoot
     :id="id"
-    v-slot="{ modelValue }"
     v-bind="rootProps"
+    :model-value="modelValue"
     :name="name"
     :disabled="disabled"
     :class="ui.root({ class: [props.class, props.ui?.root] })"
@@ -153,27 +157,35 @@ function onUpdate(value: any) {
           {{ legend }}
         </slot>
       </legend>
-      <div v-for="item in normalizedItems" :key="item.value" :class="ui.item({ class: props.ui?.item })">
-        <div :class="ui.container({ class: props.ui?.container })">
-          <RadioGroupItem
-            :id="item.id"
-            :value="item.value"
-            :disabled="disabled"
-            :class="ui.base({ class: props.ui?.base })"
-          >
-            <RadioGroupIndicator :class="ui.indicator({ class: props.ui?.indicator })" />
-          </RadioGroupItem>
-        </div>
-
-        <div :class="ui.wrapper({ class: props.ui?.wrapper })">
-          <Label :class="ui.label({ class: props.ui?.label })" :for="item.id">
-            <slot name="label" :item="item" :model-value="modelValue">{{ item.label }}</slot>
-          </Label>
-          <p v-if="item.description || !!slots.description" :class="ui.description({ class: props.ui?.description })">
-            <slot name="description" :item="item" :model-value="modelValue">
-              {{ item.description }}
-            </slot>
-          </p>
+      <div :class="ui.itemWrapper({ class: props.ui?.item })">
+        <div
+          v-for="item in normalizedItems"
+          :key="item.value"
+          :class="ui.item({ class: props.ui?.item })"
+          :data-checked="item.value === modelValue || !modelValue && item.value === defaultValue"
+          @click.prevent="modelValue = disabled ? modelValue : item.value"
+        >
+          <div :class="ui.container({ class: props.ui?.container })">
+            <RadioGroupItem
+              :id="item.id"
+              :value="item.value"
+              :disabled="disabled"
+              :class="ui.base({ class: props.ui?.base })"
+            >
+              <RadioGroupIndicator :class="ui.indicator({ class: props.ui?.indicator })" />
+            </RadioGroupItem>
+          </div>
+
+          <div :class="ui.wrapper({ class: props.ui?.wrapper })">
+            <Label :class="ui.label({ class: props.ui?.label })" :for="item.id">
+              <slot name="label" :item="item" :model-value="modelValue">{{ item.label }}</slot>
+            </Label>
+            <p v-if="item.description || !!slots.description" :class="ui.description({ class: props.ui?.description })">
+              <slot name="description" :item="item" :model-value="modelValue">
+                {{ item.description }}
+              </slot>
+            </p>
+          </div>
         </div>
       </div>
     </fieldset>
diff --git a/src/theme/radio-group.ts b/src/theme/radio-group.ts
index 40ae49391d..8942eb0a33 100644
--- a/src/theme/radio-group.ts
+++ b/src/theme/radio-group.ts
@@ -3,9 +3,10 @@ import type { ModuleOptions } from '../module'
 export default (options: Required<ModuleOptions>) => ({
   slots: {
     root: 'relative',
-    fieldset: 'flex',
+    fieldset: '',
     legend: 'mb-1 block font-medium text-[var(--ui-text)]',
     item: 'flex items-start',
+    itemWrapper: 'flex',
     base: 'rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2',
     indicator: 'flex items-center justify-center size-full rounded-full after:bg-[var(--ui-bg)] after:rounded-full',
     container: 'flex items-center',
@@ -24,13 +25,23 @@ export default (options: Required<ModuleOptions>) => ({
         indicator: 'bg-[var(--ui-bg-inverted)]'
       }
     },
+    variant: {
+      radio: {},
+      card: {
+        base: 'ml-4',
+        item: 'flex-row-reverse items-center justify-between border-2 border-[var(--ui-border-muted)] rounded-lg'
+      },
+      table: {
+        item: 'border-[var(--ui-border-muted)]'
+      }
+    },
     orientation: {
       horizontal: {
-        fieldset: 'flex-row',
+        itemWrapper: 'flex-row',
         wrapper: 'me-2'
       },
       vertical: {
-        fieldset: 'flex-col'
+        itemWrapper: 'flex-col'
       }
     },
     size: {
@@ -87,8 +98,49 @@ export default (options: Required<ModuleOptions>) => ({
       }
     }
   },
+  compoundVariants: [
+    { size: 'xs', variant: 'card', class: { item: 'p-2.5', itemWrapper: 'gap-2' } },
+    { size: 'sm', variant: 'card', class: { item: 'p-3', itemWrapper: 'gap-2.5' } },
+    { size: 'md', variant: 'card', class: { item: 'p-3.5', itemWrapper: 'gap-2.5' } },
+    { size: 'lg', variant: 'card', class: { item: 'p-4', itemWrapper: 'gap-3.5' } },
+    { size: 'xl', variant: 'card', class: { item: 'p-4.5', itemWrapper: 'gap-3.5' } },
+
+    { size: 'xs', variant: 'table', class: { item: 'p-2.5', itemWrapper: 'gap-0' } },
+    { size: 'sm', variant: 'table', class: { item: 'p-3', itemWrapper: 'gap-0' } },
+    { size: 'md', variant: 'table', class: { item: 'p-3.5', itemWrapper: 'gap-0' } },
+    { size: 'lg', variant: 'table', class: { item: 'p-4', itemWrapper: 'gap-0' } },
+    { size: 'xl', variant: 'table', class: { item: 'p-4.5', itemWrapper: 'gap-0' } },
+
+    { orientation: 'horizontal', variant: 'table', class: { item: 'first:rounded-l-lg last:rounded-r-lg not-first:not-last:border-x-2 first:border-l-2 border-y-2 last:border-r-2' } },
+    { orientation: 'vertical', variant: 'table', class: { item: 'first:rounded-t-lg last:rounded-b-lg not-first:not-last:border-y-2 first:border-t-2 border-x-2 last:border-b-2' } },
+
+    ...(options.theme.colors || []).map((color: string) => ({
+      color,
+      variant: 'card',
+      class: {
+        item: `data-[checked=true]:border-[var(--ui-${color})]`
+      }
+    })),
+
+    {
+      color: 'neutral',
+      variant: 'card',
+      class: {
+        item: 'data-[checked=true]:border-[var(--ui-border-elevated)]'
+      }
+    },
+
+    ...(options.theme.colors || []).map((color: string) => ({
+      color,
+      variant: 'table',
+      class: {
+        item: `data-[checked=true]:bg-[var(--ui-${color})]/20 data-[checked=true]:border-[var(--ui-${color})]/20`
+      }
+    }))
+  ],
   defaultVariants: {
     size: 'md',
-    color: 'primary'
+    color: 'primary',
+    variant: 'radio'
   }
 })
diff --git a/test/components/RadioGroup.spec.ts b/test/components/RadioGroup.spec.ts
index dc3fafd8dc..c32aaf822e 100644
--- a/test/components/RadioGroup.spec.ts
+++ b/test/components/RadioGroup.spec.ts
@@ -30,6 +30,8 @@ describe('RadioGroup', () => {
     ...sizes.map((size: string) => [`with size ${size}`, { props: { ...props, size } }]),
     ['with color neutral', { props: { color: 'neutral', defaultValue: '1' } }],
     ['with orientation', { props: { ...props, orientation: 'horizontal' } }],
+    ['with variant card', { props: { ...props, variant: 'card' } }],
+    ['with variant table', { props: { ...props, variant: 'table' } }],
     ['with as', { props: { ...props, as: 'section' } }],
     ['with class', { props: { ...props, class: 'absolute' } }],
     ['with ui', { props: { ...props, ui: { wrapper: 'ms-4' } } }],
diff --git a/test/components/__snapshots__/RadioGroup-vue.spec.ts.snap b/test/components/__snapshots__/RadioGroup-vue.spec.ts.snap
index 303ffa7794..86261f3430 100644
--- a/test/components/__snapshots__/RadioGroup-vue.spec.ts.snap
+++ b/test/components/__snapshots__/RadioGroup-vue.spec.ts.snap
@@ -2,33 +2,35 @@
 
 exports[`RadioGroup > renders with as correctly 1`] = `
 "<section role="radiogroup" aria-orientation="vertical" aria-required="false" dir="ltr" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0" class="relative" tabindex="0">
-  <fieldset class="flex flex-col gap-1">
+  <fieldset class="gap-1">
     <!--v-if-->
-    <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="1" value="1">
-          <!---->
-          <!---->
-        </button></div>
-      <div class="ms-2"><label for="v-0:1" class="block font-medium text-[var(--ui-text)]">Option 1</label>
-        <!--v-if-->
-      </div>
-    </div>
-    <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="2" value="2">
-          <!---->
-          <!---->
-        </button></div>
-      <div class="ms-2"><label for="v-0:2" class="block font-medium text-[var(--ui-text)]">Option 2</label>
-        <!--v-if-->
-      </div>
-    </div>
-    <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="3" value="3">
-          <!---->
-          <!---->
-        </button></div>
-      <div class="ms-2"><label for="v-0:3" class="block font-medium text-[var(--ui-text)]">Option 3</label>
-        <!--v-if-->
+    <div class="flex flex-col">
+      <div class="flex items-start text-sm" data-checked="false">
+        <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="1" value="1">
+            <!---->
+            <!---->
+          </button></div>
+        <div class="ms-2"><label for="v-0:1" class="block font-medium text-[var(--ui-text)]">Option 1</label>
+          <!--v-if-->
+        </div>
+      </div>
+      <div class="flex items-start text-sm" data-checked="false">
+        <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="2" value="2">
+            <!---->
+            <!---->
+          </button></div>
+        <div class="ms-2"><label for="v-0:2" class="block font-medium text-[var(--ui-text)]">Option 2</label>
+          <!--v-if-->
+        </div>
+      </div>
+      <div class="flex items-start text-sm" data-checked="false">
+        <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="3" value="3">
+            <!---->
+            <!---->
+          </button></div>
+        <div class="ms-2"><label for="v-0:3" class="block font-medium text-[var(--ui-text)]">Option 3</label>
+          <!--v-if-->
+        </div>
       </div>
     </div>
   </fieldset>
@@ -38,33 +40,35 @@ 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" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0" class="absolute" tabindex="0">
-  <fieldset class="flex flex-col gap-1">
+  <fieldset class="gap-1">
     <!--v-if-->
-    <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="1" value="1">
-          <!---->
-          <!---->
-        </button></div>
-      <div class="ms-2"><label for="v-0:1" class="block font-medium text-[var(--ui-text)]">Option 1</label>
-        <!--v-if-->
-      </div>
-    </div>
-    <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="2" value="2">
-          <!---->
-          <!---->
-        </button></div>
-      <div class="ms-2"><label for="v-0:2" class="block font-medium text-[var(--ui-text)]">Option 2</label>
-        <!--v-if-->
-      </div>
-    </div>
-    <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="3" value="3">
-          <!---->
-          <!---->
-        </button></div>
-      <div class="ms-2"><label for="v-0:3" class="block font-medium text-[var(--ui-text)]">Option 3</label>
-        <!--v-if-->
+    <div class="flex flex-col">
+      <div class="flex items-start text-sm" data-checked="false">
+        <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="1" value="1">
+            <!---->
+            <!---->
+          </button></div>
+        <div class="ms-2"><label for="v-0:1" class="block font-medium text-[var(--ui-text)]">Option 1</label>
+          <!--v-if-->
+        </div>
+      </div>
+      <div class="flex items-start text-sm" data-checked="false">
+        <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="2" value="2">
+            <!---->
+            <!---->
+          </button></div>
+        <div class="ms-2"><label for="v-0:2" class="block font-medium text-[var(--ui-text)]">Option 2</label>
+          <!--v-if-->
+        </div>
+      </div>
+      <div class="flex items-start text-sm" data-checked="false">
+        <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="3" value="3">
+            <!---->
+            <!---->
+          </button></div>
+        <div class="ms-2"><label for="v-0:3" class="block font-medium text-[var(--ui-text)]">Option 3</label>
+          <!--v-if-->
+        </div>
       </div>
     </div>
   </fieldset>
@@ -74,8 +78,9 @@ exports[`RadioGroup > renders with class correctly 1`] = `
 
 exports[`RadioGroup > renders with color neutral correctly 1`] = `
 "<div role="radiogroup" 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 flex-col gap-1">
+  <fieldset class="gap-1">
     <!--v-if-->
+    <div class="flex flex-col"></div>
   </fieldset>
   <!---->
 </div>"
@@ -83,32 +88,34 @@ exports[`RadioGroup > renders with color neutral correctly 1`] = `
 
 exports[`RadioGroup > renders with defaultValue correctly 1`] = `
 "<div role="radiogroup" aria-orientation="vertical" aria-required="false" dir="ltr" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0" class="relative" tabindex="0">
-  <fieldset class="flex flex-col gap-1">
+  <fieldset class="gap-1">
     <!--v-if-->
-    <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item="" id="v-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" aria-label="1" value="1"><span data-state="checked" class="flex items-center justify-center size-full rounded-full after:bg-[var(--ui-bg)] after:rounded-full bg-[var(--ui-primary)] after:size-1.5"></span>
-          <!---->
-        </button></div>
-      <div class="ms-2"><label for="v-0:1" class="block font-medium text-[var(--ui-text)]">Option 1</label>
-        <!--v-if-->
-      </div>
-    </div>
-    <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="2" value="2">
-          <!---->
-          <!---->
-        </button></div>
-      <div class="ms-2"><label for="v-0:2" class="block font-medium text-[var(--ui-text)]">Option 2</label>
-        <!--v-if-->
-      </div>
-    </div>
-    <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="3" value="3">
-          <!---->
-          <!---->
-        </button></div>
-      <div class="ms-2"><label for="v-0:3" class="block font-medium text-[var(--ui-text)]">Option 3</label>
-        <!--v-if-->
+    <div class="flex flex-col">
+      <div class="flex items-start text-sm" data-checked="true">
+        <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item="" id="v-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" aria-label="1" value="1"><span data-state="checked" class="flex items-center justify-center size-full rounded-full after:bg-[var(--ui-bg)] after:rounded-full bg-[var(--ui-primary)] after:size-1.5"></span>
+            <!---->
+          </button></div>
+        <div class="ms-2"><label for="v-0:1" class="block font-medium text-[var(--ui-text)]">Option 1</label>
+          <!--v-if-->
+        </div>
+      </div>
+      <div class="flex items-start text-sm" data-checked="false">
+        <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="2" value="2">
+            <!---->
+            <!---->
+          </button></div>
+        <div class="ms-2"><label for="v-0:2" class="block font-medium text-[var(--ui-text)]">Option 2</label>
+          <!--v-if-->
+        </div>
+      </div>
+      <div class="flex items-start text-sm" data-checked="false">
+        <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="3" value="3">
+            <!---->
+            <!---->
+          </button></div>
+        <div class="ms-2"><label for="v-0:3" class="block font-medium text-[var(--ui-text)]">Option 3</label>
+          <!--v-if-->
+        </div>
       </div>
     </div>
   </fieldset>
@@ -118,33 +125,35 @@ 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" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0" class="relative" tabindex="0">
-  <fieldset class="flex flex-col gap-1">
+  <fieldset class="gap-1">
     <!--v-if-->
-    <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="1" value="1">
-          <!---->
-          <!---->
-        </button></div>
-      <div class="ms-2"><label for="v-0:1" class="block font-medium text-[var(--ui-text)]">Option 1</label>
-        <p class="text-[var(--ui-text-muted)]">Description 0</p>
-      </div>
-    </div>
-    <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="2" value="2">
-          <!---->
-          <!---->
-        </button></div>
-      <div class="ms-2"><label for="v-0:2" class="block font-medium text-[var(--ui-text)]">Option 2</label>
-        <p class="text-[var(--ui-text-muted)]">Description 1</p>
-      </div>
-    </div>
-    <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="3" value="3">
-          <!---->
-          <!---->
-        </button></div>
-      <div class="ms-2"><label for="v-0:3" class="block font-medium text-[var(--ui-text)]">Option 3</label>
-        <p class="text-[var(--ui-text-muted)]">Description 2</p>
+    <div class="flex flex-col">
+      <div class="flex items-start text-sm" data-checked="false">
+        <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="1" value="1">
+            <!---->
+            <!---->
+          </button></div>
+        <div class="ms-2"><label for="v-0:1" class="block font-medium text-[var(--ui-text)]">Option 1</label>
+          <p class="text-[var(--ui-text-muted)]">Description 0</p>
+        </div>
+      </div>
+      <div class="flex items-start text-sm" data-checked="false">
+        <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="2" value="2">
+            <!---->
+            <!---->
+          </button></div>
+        <div class="ms-2"><label for="v-0:2" class="block font-medium text-[var(--ui-text)]">Option 2</label>
+          <p class="text-[var(--ui-text-muted)]">Description 1</p>
+        </div>
+      </div>
+      <div class="flex items-start text-sm" data-checked="false">
+        <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="3" value="3">
+            <!---->
+            <!---->
+          </button></div>
+        <div class="ms-2"><label for="v-0:3" class="block font-medium text-[var(--ui-text)]">Option 3</label>
+          <p class="text-[var(--ui-text-muted)]">Description 2</p>
+        </div>
       </div>
     </div>
   </fieldset>
@@ -154,33 +163,35 @@ 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" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0" class="relative" tabindex="0">
-  <fieldset class="flex flex-col gap-1">
+  <fieldset class="gap-1">
     <!--v-if-->
-    <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="1" value="1">
-          <!---->
-          <!---->
-        </button></div>
-      <div class="ms-2"><label for="v-0:1" class="block font-medium text-[var(--ui-text)]">Description slot</label>
-        <!--v-if-->
-      </div>
-    </div>
-    <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="2" value="2">
-          <!---->
-          <!---->
-        </button></div>
-      <div class="ms-2"><label for="v-0:2" class="block font-medium text-[var(--ui-text)]">Description slot</label>
-        <!--v-if-->
-      </div>
-    </div>
-    <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="3" value="3">
-          <!---->
-          <!---->
-        </button></div>
-      <div class="ms-2"><label for="v-0:3" class="block font-medium text-[var(--ui-text)]">Description slot</label>
-        <!--v-if-->
+    <div class="flex flex-col">
+      <div class="flex items-start text-sm" data-checked="false">
+        <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="1" value="1">
+            <!---->
+            <!---->
+          </button></div>
+        <div class="ms-2"><label for="v-0:1" class="block font-medium text-[var(--ui-text)]">Description slot</label>
+          <!--v-if-->
+        </div>
+      </div>
+      <div class="flex items-start text-sm" data-checked="false">
+        <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="2" value="2">
+            <!---->
+            <!---->
+          </button></div>
+        <div class="ms-2"><label for="v-0:2" class="block font-medium text-[var(--ui-text)]">Description slot</label>
+          <!--v-if-->
+        </div>
+      </div>
+      <div class="flex items-start text-sm" data-checked="false">
+        <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="3" value="3">
+            <!---->
+            <!---->
+          </button></div>
+        <div class="ms-2"><label for="v-0:3" class="block font-medium text-[var(--ui-text)]">Description slot</label>
+          <!--v-if-->
+        </div>
       </div>
     </div>
   </fieldset>
@@ -190,33 +201,35 @@ 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" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0" class="relative" tabindex="0">
-  <fieldset class="flex flex-col gap-1">
+  <fieldset class="gap-1">
     <!--v-if-->
-    <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="1" value="1">
-          <!---->
-          <!---->
-        </button></div>
-      <div class="ms-2"><label for="v-0:1" class="block font-medium text-[var(--ui-text)]">Option 1</label>
-        <p class="text-[var(--ui-text-muted)]">1</p>
-      </div>
-    </div>
-    <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="2" value="2">
-          <!---->
-          <!---->
-        </button></div>
-      <div class="ms-2"><label for="v-0:2" class="block font-medium text-[var(--ui-text)]">Option 2</label>
-        <p class="text-[var(--ui-text-muted)]">2</p>
-      </div>
-    </div>
-    <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="3" value="3">
-          <!---->
-          <!---->
-        </button></div>
-      <div class="ms-2"><label for="v-0:3" class="block font-medium text-[var(--ui-text)]">Option 3</label>
-        <p class="text-[var(--ui-text-muted)]">3</p>
+    <div class="flex flex-col">
+      <div class="flex items-start text-sm" data-checked="false">
+        <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="1" value="1">
+            <!---->
+            <!---->
+          </button></div>
+        <div class="ms-2"><label for="v-0:1" class="block font-medium text-[var(--ui-text)]">Option 1</label>
+          <p class="text-[var(--ui-text-muted)]">1</p>
+        </div>
+      </div>
+      <div class="flex items-start text-sm" data-checked="false">
+        <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="2" value="2">
+            <!---->
+            <!---->
+          </button></div>
+        <div class="ms-2"><label for="v-0:2" class="block font-medium text-[var(--ui-text)]">Option 2</label>
+          <p class="text-[var(--ui-text-muted)]">2</p>
+        </div>
+      </div>
+      <div class="flex items-start text-sm" data-checked="false">
+        <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="3" value="3">
+            <!---->
+            <!---->
+          </button></div>
+        <div class="ms-2"><label for="v-0:3" class="block font-medium text-[var(--ui-text)]">Option 3</label>
+          <p class="text-[var(--ui-text-muted)]">3</p>
+        </div>
       </div>
     </div>
   </fieldset>
@@ -226,33 +239,35 @@ 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 flex-col gap-1">
+  <fieldset class="gap-1">
     <!--v-if-->
-    <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4 cursor-not-allowed opacity-75" tabindex="-1" data-orientation="vertical" data-active="false" data-disabled="" data-reka-collection-item="" id="v-0:1" role="radio" type="button" aria-checked="false" disabled="" data-state="unchecked" required="false" aria-label="1" value="1">
-          <!---->
-          <!---->
-        </button></div>
-      <div class="ms-2"><label for="v-0:1" class="block font-medium text-[var(--ui-text)] cursor-not-allowed opacity-75">Option 1</label>
-        <!--v-if-->
-      </div>
-    </div>
-    <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4 cursor-not-allowed opacity-75" tabindex="-1" data-orientation="vertical" data-active="false" data-disabled="" data-reka-collection-item="" id="v-0:2" role="radio" type="button" aria-checked="false" disabled="" data-state="unchecked" required="false" aria-label="2" value="2">
-          <!---->
-          <!---->
-        </button></div>
-      <div class="ms-2"><label for="v-0:2" class="block font-medium text-[var(--ui-text)] cursor-not-allowed opacity-75">Option 2</label>
-        <!--v-if-->
-      </div>
-    </div>
-    <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4 cursor-not-allowed opacity-75" tabindex="-1" data-orientation="vertical" data-active="false" data-disabled="" data-reka-collection-item="" id="v-0:3" role="radio" type="button" aria-checked="false" disabled="" data-state="unchecked" required="false" aria-label="3" value="3">
-          <!---->
-          <!---->
-        </button></div>
-      <div class="ms-2"><label for="v-0:3" class="block font-medium text-[var(--ui-text)] cursor-not-allowed opacity-75">Option 3</label>
-        <!--v-if-->
+    <div class="flex flex-col">
+      <div class="flex items-start text-sm" data-checked="false">
+        <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4 cursor-not-allowed opacity-75" tabindex="-1" data-orientation="vertical" data-active="false" data-disabled="" data-reka-collection-item="" id="v-0:1" role="radio" type="button" aria-checked="false" disabled="" data-state="unchecked" required="false" aria-label="1" value="1">
+            <!---->
+            <!---->
+          </button></div>
+        <div class="ms-2"><label for="v-0:1" class="block font-medium text-[var(--ui-text)] cursor-not-allowed opacity-75">Option 1</label>
+          <!--v-if-->
+        </div>
+      </div>
+      <div class="flex items-start text-sm" data-checked="false">
+        <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4 cursor-not-allowed opacity-75" tabindex="-1" data-orientation="vertical" data-active="false" data-disabled="" data-reka-collection-item="" id="v-0:2" role="radio" type="button" aria-checked="false" disabled="" data-state="unchecked" required="false" aria-label="2" value="2">
+            <!---->
+            <!---->
+          </button></div>
+        <div class="ms-2"><label for="v-0:2" class="block font-medium text-[var(--ui-text)] cursor-not-allowed opacity-75">Option 2</label>
+          <!--v-if-->
+        </div>
+      </div>
+      <div class="flex items-start text-sm" data-checked="false">
+        <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4 cursor-not-allowed opacity-75" tabindex="-1" data-orientation="vertical" data-active="false" data-disabled="" data-reka-collection-item="" id="v-0:3" role="radio" type="button" aria-checked="false" disabled="" data-state="unchecked" required="false" aria-label="3" value="3">
+            <!---->
+            <!---->
+          </button></div>
+        <div class="ms-2"><label for="v-0:3" class="block font-medium text-[var(--ui-text)] cursor-not-allowed opacity-75">Option 3</label>
+          <!--v-if-->
+        </div>
       </div>
     </div>
   </fieldset>
@@ -262,33 +277,35 @@ exports[`RadioGroup > renders with disabled correctly 1`] = `
 
 exports[`RadioGroup > renders with items correctly 1`] = `
 "<div role="radiogroup" aria-orientation="vertical" aria-required="false" dir="ltr" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0" class="relative" tabindex="0">
-  <fieldset class="flex flex-col gap-1">
+  <fieldset class="gap-1">
     <!--v-if-->
-    <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="1" value="1">
-          <!---->
-          <!---->
-        </button></div>
-      <div class="ms-2"><label for="v-0:1" class="block font-medium text-[var(--ui-text)]">Option 1</label>
-        <!--v-if-->
-      </div>
-    </div>
-    <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="2" value="2">
-          <!---->
-          <!---->
-        </button></div>
-      <div class="ms-2"><label for="v-0:2" class="block font-medium text-[var(--ui-text)]">Option 2</label>
-        <!--v-if-->
-      </div>
-    </div>
-    <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="3" value="3">
-          <!---->
-          <!---->
-        </button></div>
-      <div class="ms-2"><label for="v-0:3" class="block font-medium text-[var(--ui-text)]">Option 3</label>
-        <!--v-if-->
+    <div class="flex flex-col">
+      <div class="flex items-start text-sm" data-checked="false">
+        <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="1" value="1">
+            <!---->
+            <!---->
+          </button></div>
+        <div class="ms-2"><label for="v-0:1" class="block font-medium text-[var(--ui-text)]">Option 1</label>
+          <!--v-if-->
+        </div>
+      </div>
+      <div class="flex items-start text-sm" data-checked="false">
+        <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="2" value="2">
+            <!---->
+            <!---->
+          </button></div>
+        <div class="ms-2"><label for="v-0:2" class="block font-medium text-[var(--ui-text)]">Option 2</label>
+          <!--v-if-->
+        </div>
+      </div>
+      <div class="flex items-start text-sm" data-checked="false">
+        <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="3" value="3">
+            <!---->
+            <!---->
+          </button></div>
+        <div class="ms-2"><label for="v-0:3" class="block font-medium text-[var(--ui-text)]">Option 3</label>
+          <!--v-if-->
+        </div>
       </div>
     </div>
   </fieldset>
@@ -298,33 +315,35 @@ 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" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0" class="relative" tabindex="0">
-  <fieldset class="flex flex-col gap-1">
+  <fieldset class="gap-1">
     <!--v-if-->
-    <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="1" value="1">
-          <!---->
-          <!---->
-        </button></div>
-      <div class="ms-2"><label for="v-0:1" class="block font-medium text-[var(--ui-text)]">Label slot</label>
-        <!--v-if-->
-      </div>
-    </div>
-    <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="2" value="2">
-          <!---->
-          <!---->
-        </button></div>
-      <div class="ms-2"><label for="v-0:2" class="block font-medium text-[var(--ui-text)]">Label slot</label>
-        <!--v-if-->
-      </div>
-    </div>
-    <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="3" value="3">
-          <!---->
-          <!---->
-        </button></div>
-      <div class="ms-2"><label for="v-0:3" class="block font-medium text-[var(--ui-text)]">Label slot</label>
-        <!--v-if-->
+    <div class="flex flex-col">
+      <div class="flex items-start text-sm" data-checked="false">
+        <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="1" value="1">
+            <!---->
+            <!---->
+          </button></div>
+        <div class="ms-2"><label for="v-0:1" class="block font-medium text-[var(--ui-text)]">Label slot</label>
+          <!--v-if-->
+        </div>
+      </div>
+      <div class="flex items-start text-sm" data-checked="false">
+        <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="2" value="2">
+            <!---->
+            <!---->
+          </button></div>
+        <div class="ms-2"><label for="v-0:2" class="block font-medium text-[var(--ui-text)]">Label slot</label>
+          <!--v-if-->
+        </div>
+      </div>
+      <div class="flex items-start text-sm" data-checked="false">
+        <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="3" value="3">
+            <!---->
+            <!---->
+          </button></div>
+        <div class="ms-2"><label for="v-0:3" class="block font-medium text-[var(--ui-text)]">Label slot</label>
+          <!--v-if-->
+        </div>
       </div>
     </div>
   </fieldset>
@@ -334,33 +353,35 @@ 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" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0" class="relative" tabindex="0">
-  <fieldset class="flex flex-col gap-1">
+  <fieldset class="gap-1">
     <!--v-if-->
-    <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="1" value="1">
-          <!---->
-          <!---->
-        </button></div>
-      <div class="ms-2"><label for="v-0:1" class="block font-medium text-[var(--ui-text)]">1</label>
-        <!--v-if-->
-      </div>
-    </div>
-    <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="2" value="2">
-          <!---->
-          <!---->
-        </button></div>
-      <div class="ms-2"><label for="v-0:2" class="block font-medium text-[var(--ui-text)]">2</label>
-        <!--v-if-->
-      </div>
-    </div>
-    <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="3" value="3">
-          <!---->
-          <!---->
-        </button></div>
-      <div class="ms-2"><label for="v-0:3" class="block font-medium text-[var(--ui-text)]">3</label>
-        <!--v-if-->
+    <div class="flex flex-col">
+      <div class="flex items-start text-sm" data-checked="false">
+        <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="1" value="1">
+            <!---->
+            <!---->
+          </button></div>
+        <div class="ms-2"><label for="v-0:1" class="block font-medium text-[var(--ui-text)]">1</label>
+          <!--v-if-->
+        </div>
+      </div>
+      <div class="flex items-start text-sm" data-checked="false">
+        <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="2" value="2">
+            <!---->
+            <!---->
+          </button></div>
+        <div class="ms-2"><label for="v-0:2" class="block font-medium text-[var(--ui-text)]">2</label>
+          <!--v-if-->
+        </div>
+      </div>
+      <div class="flex items-start text-sm" data-checked="false">
+        <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="3" value="3">
+            <!---->
+            <!---->
+          </button></div>
+        <div class="ms-2"><label for="v-0:3" class="block font-medium text-[var(--ui-text)]">3</label>
+          <!--v-if-->
+        </div>
       </div>
     </div>
   </fieldset>
@@ -370,33 +391,35 @@ 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" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0" class="relative" tabindex="0">
-  <fieldset class="flex flex-col gap-1">
+  <fieldset class="gap-1">
     <!--v-if-->
-    <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="1" value="1">
-          <!---->
-          <!---->
-        </button></div>
-      <div class="ms-2"><label for="v-0:1" class="block font-medium text-[var(--ui-text)]">Legend slot</label>
-        <!--v-if-->
-      </div>
-    </div>
-    <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="2" value="2">
-          <!---->
-          <!---->
-        </button></div>
-      <div class="ms-2"><label for="v-0:2" class="block font-medium text-[var(--ui-text)]">Legend slot</label>
-        <!--v-if-->
-      </div>
-    </div>
-    <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="3" value="3">
-          <!---->
-          <!---->
-        </button></div>
-      <div class="ms-2"><label for="v-0:3" class="block font-medium text-[var(--ui-text)]">Legend slot</label>
-        <!--v-if-->
+    <div class="flex flex-col">
+      <div class="flex items-start text-sm" data-checked="false">
+        <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="1" value="1">
+            <!---->
+            <!---->
+          </button></div>
+        <div class="ms-2"><label for="v-0:1" class="block font-medium text-[var(--ui-text)]">Legend slot</label>
+          <!--v-if-->
+        </div>
+      </div>
+      <div class="flex items-start text-sm" data-checked="false">
+        <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="2" value="2">
+            <!---->
+            <!---->
+          </button></div>
+        <div class="ms-2"><label for="v-0:2" class="block font-medium text-[var(--ui-text)]">Legend slot</label>
+          <!--v-if-->
+        </div>
+      </div>
+      <div class="flex items-start text-sm" data-checked="false">
+        <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="3" value="3">
+            <!---->
+            <!---->
+          </button></div>
+        <div class="ms-2"><label for="v-0:3" class="block font-medium text-[var(--ui-text)]">Legend slot</label>
+          <!--v-if-->
+        </div>
       </div>
     </div>
   </fieldset>
@@ -406,32 +429,34 @@ 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" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0" class="relative" tabindex="0">
-  <fieldset class="flex flex-col gap-1">
+  <fieldset class="gap-1">
     <!--v-if-->
-    <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item="" id="v-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" aria-label="1" value="1"><span data-state="checked" class="flex items-center justify-center size-full rounded-full after:bg-[var(--ui-bg)] after:rounded-full bg-[var(--ui-primary)] after:size-1.5"></span>
-          <!---->
-        </button></div>
-      <div class="ms-2"><label for="v-0:1" class="block font-medium text-[var(--ui-text)]">Option 1</label>
-        <!--v-if-->
-      </div>
-    </div>
-    <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="2" value="2">
-          <!---->
-          <!---->
-        </button></div>
-      <div class="ms-2"><label for="v-0:2" class="block font-medium text-[var(--ui-text)]">Option 2</label>
-        <!--v-if-->
-      </div>
-    </div>
-    <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="3" value="3">
-          <!---->
-          <!---->
-        </button></div>
-      <div class="ms-2"><label for="v-0:3" class="block font-medium text-[var(--ui-text)]">Option 3</label>
-        <!--v-if-->
+    <div class="flex flex-col">
+      <div class="flex items-start text-sm" data-checked="true">
+        <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item="" id="v-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" aria-label="1" value="1"><span data-state="checked" class="flex items-center justify-center size-full rounded-full after:bg-[var(--ui-bg)] after:rounded-full bg-[var(--ui-primary)] after:size-1.5"></span>
+            <!---->
+          </button></div>
+        <div class="ms-2"><label for="v-0:1" class="block font-medium text-[var(--ui-text)]">Option 1</label>
+          <!--v-if-->
+        </div>
+      </div>
+      <div class="flex items-start text-sm" data-checked="false">
+        <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="2" value="2">
+            <!---->
+            <!---->
+          </button></div>
+        <div class="ms-2"><label for="v-0:2" class="block font-medium text-[var(--ui-text)]">Option 2</label>
+          <!--v-if-->
+        </div>
+      </div>
+      <div class="flex items-start text-sm" data-checked="false">
+        <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="3" value="3">
+            <!---->
+            <!---->
+          </button></div>
+        <div class="ms-2"><label for="v-0:3" class="block font-medium text-[var(--ui-text)]">Option 3</label>
+          <!--v-if-->
+        </div>
       </div>
     </div>
   </fieldset>
@@ -441,33 +466,35 @@ exports[`RadioGroup > renders with modelValue correctly 1`] = `
 
 exports[`RadioGroup > renders with orientation correctly 1`] = `
 "<div role="radiogroup" aria-orientation="horizontal" aria-required="false" dir="ltr" data-orientation="horizontal" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0" class="relative" tabindex="0">
-  <fieldset class="flex flex-row gap-1">
+  <fieldset class="gap-1">
     <!--v-if-->
-    <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="horizontal" data-active="false" data-reka-collection-item="" id="v-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="1" value="1">
-          <!---->
-          <!---->
-        </button></div>
-      <div class="ms-2 me-2"><label for="v-0:1" class="block font-medium text-[var(--ui-text)]">Option 1</label>
-        <!--v-if-->
-      </div>
-    </div>
-    <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="horizontal" data-active="false" data-reka-collection-item="" id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="2" value="2">
-          <!---->
-          <!---->
-        </button></div>
-      <div class="ms-2 me-2"><label for="v-0:2" class="block font-medium text-[var(--ui-text)]">Option 2</label>
-        <!--v-if-->
-      </div>
-    </div>
-    <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="horizontal" data-active="false" data-reka-collection-item="" id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="3" value="3">
-          <!---->
-          <!---->
-        </button></div>
-      <div class="ms-2 me-2"><label for="v-0:3" class="block font-medium text-[var(--ui-text)]">Option 3</label>
-        <!--v-if-->
+    <div class="flex flex-row">
+      <div class="flex items-start text-sm" data-checked="false">
+        <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="horizontal" data-active="false" data-reka-collection-item="" id="v-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="1" value="1">
+            <!---->
+            <!---->
+          </button></div>
+        <div class="ms-2 me-2"><label for="v-0:1" class="block font-medium text-[var(--ui-text)]">Option 1</label>
+          <!--v-if-->
+        </div>
+      </div>
+      <div class="flex items-start text-sm" data-checked="false">
+        <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="horizontal" data-active="false" data-reka-collection-item="" id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="2" value="2">
+            <!---->
+            <!---->
+          </button></div>
+        <div class="ms-2 me-2"><label for="v-0:2" class="block font-medium text-[var(--ui-text)]">Option 2</label>
+          <!--v-if-->
+        </div>
+      </div>
+      <div class="flex items-start text-sm" data-checked="false">
+        <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="horizontal" data-active="false" data-reka-collection-item="" id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="3" value="3">
+            <!---->
+            <!---->
+          </button></div>
+        <div class="ms-2 me-2"><label for="v-0:3" class="block font-medium text-[var(--ui-text)]">Option 3</label>
+          <!--v-if-->
+        </div>
       </div>
     </div>
   </fieldset>
@@ -477,33 +504,35 @@ exports[`RadioGroup > renders with orientation correctly 1`] = `
 
 exports[`RadioGroup > renders with required correctly 1`] = `
 "<div role="radiogroup" aria-orientation="vertical" aria-required="true" dir="ltr" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0" class="relative" tabindex="0">
-  <fieldset class="flex flex-col gap-1">
+  <fieldset class="gap-1">
     <legend class="mb-1 block font-medium text-[var(--ui-text)] text-sm after:content-['*'] after:ms-0.5 after:text-[var(--ui-error)]">Legend</legend>
-    <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="true" aria-label="1" value="1">
-          <!---->
-          <!---->
-        </button></div>
-      <div class="ms-2"><label for="v-0:1" class="block font-medium text-[var(--ui-text)]">Option 1</label>
-        <!--v-if-->
-      </div>
-    </div>
-    <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="true" aria-label="2" value="2">
-          <!---->
-          <!---->
-        </button></div>
-      <div class="ms-2"><label for="v-0:2" class="block font-medium text-[var(--ui-text)]">Option 2</label>
-        <!--v-if-->
-      </div>
-    </div>
-    <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="true" aria-label="3" value="3">
-          <!---->
-          <!---->
-        </button></div>
-      <div class="ms-2"><label for="v-0:3" class="block font-medium text-[var(--ui-text)]">Option 3</label>
-        <!--v-if-->
+    <div class="flex flex-col">
+      <div class="flex items-start text-sm" data-checked="false">
+        <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="true" aria-label="1" value="1">
+            <!---->
+            <!---->
+          </button></div>
+        <div class="ms-2"><label for="v-0:1" class="block font-medium text-[var(--ui-text)]">Option 1</label>
+          <!--v-if-->
+        </div>
+      </div>
+      <div class="flex items-start text-sm" data-checked="false">
+        <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="true" aria-label="2" value="2">
+            <!---->
+            <!---->
+          </button></div>
+        <div class="ms-2"><label for="v-0:2" class="block font-medium text-[var(--ui-text)]">Option 2</label>
+          <!--v-if-->
+        </div>
+      </div>
+      <div class="flex items-start text-sm" data-checked="false">
+        <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="true" aria-label="3" value="3">
+            <!---->
+            <!---->
+          </button></div>
+        <div class="ms-2"><label for="v-0:3" class="block font-medium text-[var(--ui-text)]">Option 3</label>
+          <!--v-if-->
+        </div>
       </div>
     </div>
   </fieldset>
@@ -513,33 +542,35 @@ 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" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0" class="relative" tabindex="0">
-  <fieldset class="flex flex-col gap-1">
+  <fieldset class="gap-1">
     <!--v-if-->
-    <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4.5" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="1" value="1">
-          <!---->
-          <!---->
-        </button></div>
-      <div class="ms-2"><label for="v-0:1" class="block font-medium text-[var(--ui-text)]">Option 1</label>
-        <!--v-if-->
-      </div>
-    </div>
-    <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4.5" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="2" value="2">
-          <!---->
-          <!---->
-        </button></div>
-      <div class="ms-2"><label for="v-0:2" class="block font-medium text-[var(--ui-text)]">Option 2</label>
-        <!--v-if-->
-      </div>
-    </div>
-    <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4.5" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="3" value="3">
-          <!---->
-          <!---->
-        </button></div>
-      <div class="ms-2"><label for="v-0:3" class="block font-medium text-[var(--ui-text)]">Option 3</label>
-        <!--v-if-->
+    <div class="flex flex-col">
+      <div class="flex items-start text-sm" data-checked="false">
+        <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4.5" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="1" value="1">
+            <!---->
+            <!---->
+          </button></div>
+        <div class="ms-2"><label for="v-0:1" class="block font-medium text-[var(--ui-text)]">Option 1</label>
+          <!--v-if-->
+        </div>
+      </div>
+      <div class="flex items-start text-sm" data-checked="false">
+        <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4.5" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="2" value="2">
+            <!---->
+            <!---->
+          </button></div>
+        <div class="ms-2"><label for="v-0:2" class="block font-medium text-[var(--ui-text)]">Option 2</label>
+          <!--v-if-->
+        </div>
+      </div>
+      <div class="flex items-start text-sm" data-checked="false">
+        <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4.5" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="3" value="3">
+            <!---->
+            <!---->
+          </button></div>
+        <div class="ms-2"><label for="v-0:3" class="block font-medium text-[var(--ui-text)]">Option 3</label>
+          <!--v-if-->
+        </div>
       </div>
     </div>
   </fieldset>
@@ -549,33 +580,35 @@ 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" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0" class="relative" tabindex="0">
-  <fieldset class="flex flex-col gap-1">
+  <fieldset class="gap-1">
     <!--v-if-->
-    <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="1" value="1">
-          <!---->
-          <!---->
-        </button></div>
-      <div class="ms-2"><label for="v-0:1" class="block font-medium text-[var(--ui-text)]">Option 1</label>
-        <!--v-if-->
-      </div>
-    </div>
-    <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="2" value="2">
-          <!---->
-          <!---->
-        </button></div>
-      <div class="ms-2"><label for="v-0:2" class="block font-medium text-[var(--ui-text)]">Option 2</label>
-        <!--v-if-->
-      </div>
-    </div>
-    <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="3" value="3">
-          <!---->
-          <!---->
-        </button></div>
-      <div class="ms-2"><label for="v-0:3" class="block font-medium text-[var(--ui-text)]">Option 3</label>
-        <!--v-if-->
+    <div class="flex flex-col">
+      <div class="flex items-start text-sm" data-checked="false">
+        <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="1" value="1">
+            <!---->
+            <!---->
+          </button></div>
+        <div class="ms-2"><label for="v-0:1" class="block font-medium text-[var(--ui-text)]">Option 1</label>
+          <!--v-if-->
+        </div>
+      </div>
+      <div class="flex items-start text-sm" data-checked="false">
+        <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="2" value="2">
+            <!---->
+            <!---->
+          </button></div>
+        <div class="ms-2"><label for="v-0:2" class="block font-medium text-[var(--ui-text)]">Option 2</label>
+          <!--v-if-->
+        </div>
+      </div>
+      <div class="flex items-start text-sm" data-checked="false">
+        <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="3" value="3">
+            <!---->
+            <!---->
+          </button></div>
+        <div class="ms-2"><label for="v-0:3" class="block font-medium text-[var(--ui-text)]">Option 3</label>
+          <!--v-if-->
+        </div>
       </div>
     </div>
   </fieldset>
@@ -585,33 +618,35 @@ 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" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0" class="relative" tabindex="0">
-  <fieldset class="flex flex-col gap-0.5">
+  <fieldset class="gap-0.5">
     <!--v-if-->
-    <div class="flex items-start text-xs">
-      <div class="flex items-center h-4"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-3.5" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="1" value="1">
-          <!---->
-          <!---->
-        </button></div>
-      <div class="ms-2"><label for="v-0:1" class="block font-medium text-[var(--ui-text)]">Option 1</label>
-        <!--v-if-->
-      </div>
-    </div>
-    <div class="flex items-start text-xs">
-      <div class="flex items-center h-4"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-3.5" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="2" value="2">
-          <!---->
-          <!---->
-        </button></div>
-      <div class="ms-2"><label for="v-0:2" class="block font-medium text-[var(--ui-text)]">Option 2</label>
-        <!--v-if-->
-      </div>
-    </div>
-    <div class="flex items-start text-xs">
-      <div class="flex items-center h-4"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-3.5" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="3" value="3">
-          <!---->
-          <!---->
-        </button></div>
-      <div class="ms-2"><label for="v-0:3" class="block font-medium text-[var(--ui-text)]">Option 3</label>
-        <!--v-if-->
+    <div class="flex flex-col">
+      <div class="flex items-start text-xs" data-checked="false">
+        <div class="flex items-center h-4"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-3.5" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="1" value="1">
+            <!---->
+            <!---->
+          </button></div>
+        <div class="ms-2"><label for="v-0:1" class="block font-medium text-[var(--ui-text)]">Option 1</label>
+          <!--v-if-->
+        </div>
+      </div>
+      <div class="flex items-start text-xs" data-checked="false">
+        <div class="flex items-center h-4"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-3.5" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="2" value="2">
+            <!---->
+            <!---->
+          </button></div>
+        <div class="ms-2"><label for="v-0:2" class="block font-medium text-[var(--ui-text)]">Option 2</label>
+          <!--v-if-->
+        </div>
+      </div>
+      <div class="flex items-start text-xs" data-checked="false">
+        <div class="flex items-center h-4"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-3.5" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="3" value="3">
+            <!---->
+            <!---->
+          </button></div>
+        <div class="ms-2"><label for="v-0:3" class="block font-medium text-[var(--ui-text)]">Option 3</label>
+          <!--v-if-->
+        </div>
       </div>
     </div>
   </fieldset>
@@ -621,33 +656,35 @@ 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" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0" class="relative" tabindex="0">
-  <fieldset class="flex flex-col gap-1.5">
+  <fieldset class="gap-1.5">
     <!--v-if-->
-    <div class="flex items-start text-base">
-      <div class="flex items-center h-6"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-5" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="1" value="1">
-          <!---->
-          <!---->
-        </button></div>
-      <div class="ms-2"><label for="v-0:1" class="block font-medium text-[var(--ui-text)]">Option 1</label>
-        <!--v-if-->
-      </div>
-    </div>
-    <div class="flex items-start text-base">
-      <div class="flex items-center h-6"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-5" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="2" value="2">
-          <!---->
-          <!---->
-        </button></div>
-      <div class="ms-2"><label for="v-0:2" class="block font-medium text-[var(--ui-text)]">Option 2</label>
-        <!--v-if-->
-      </div>
-    </div>
-    <div class="flex items-start text-base">
-      <div class="flex items-center h-6"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-5" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="3" value="3">
-          <!---->
-          <!---->
-        </button></div>
-      <div class="ms-2"><label for="v-0:3" class="block font-medium text-[var(--ui-text)]">Option 3</label>
-        <!--v-if-->
+    <div class="flex flex-col">
+      <div class="flex items-start text-base" data-checked="false">
+        <div class="flex items-center h-6"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-5" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="1" value="1">
+            <!---->
+            <!---->
+          </button></div>
+        <div class="ms-2"><label for="v-0:1" class="block font-medium text-[var(--ui-text)]">Option 1</label>
+          <!--v-if-->
+        </div>
+      </div>
+      <div class="flex items-start text-base" data-checked="false">
+        <div class="flex items-center h-6"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-5" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="2" value="2">
+            <!---->
+            <!---->
+          </button></div>
+        <div class="ms-2"><label for="v-0:2" class="block font-medium text-[var(--ui-text)]">Option 2</label>
+          <!--v-if-->
+        </div>
+      </div>
+      <div class="flex items-start text-base" data-checked="false">
+        <div class="flex items-center h-6"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-5" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="3" value="3">
+            <!---->
+            <!---->
+          </button></div>
+        <div class="ms-2"><label for="v-0:3" class="block font-medium text-[var(--ui-text)]">Option 3</label>
+          <!--v-if-->
+        </div>
       </div>
     </div>
   </fieldset>
@@ -657,33 +694,35 @@ 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" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0" class="relative" tabindex="0">
-  <fieldset class="flex flex-col gap-0.5">
+  <fieldset class="gap-0.5">
     <!--v-if-->
-    <div class="flex items-start text-xs">
-      <div class="flex items-center h-4"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-3" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="1" value="1">
-          <!---->
-          <!---->
-        </button></div>
-      <div class="ms-2"><label for="v-0:1" class="block font-medium text-[var(--ui-text)]">Option 1</label>
-        <!--v-if-->
-      </div>
-    </div>
-    <div class="flex items-start text-xs">
-      <div class="flex items-center h-4"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-3" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="2" value="2">
-          <!---->
-          <!---->
-        </button></div>
-      <div class="ms-2"><label for="v-0:2" class="block font-medium text-[var(--ui-text)]">Option 2</label>
-        <!--v-if-->
-      </div>
-    </div>
-    <div class="flex items-start text-xs">
-      <div class="flex items-center h-4"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-3" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="3" value="3">
-          <!---->
-          <!---->
-        </button></div>
-      <div class="ms-2"><label for="v-0:3" class="block font-medium text-[var(--ui-text)]">Option 3</label>
-        <!--v-if-->
+    <div class="flex flex-col">
+      <div class="flex items-start text-xs" data-checked="false">
+        <div class="flex items-center h-4"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-3" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="1" value="1">
+            <!---->
+            <!---->
+          </button></div>
+        <div class="ms-2"><label for="v-0:1" class="block font-medium text-[var(--ui-text)]">Option 1</label>
+          <!--v-if-->
+        </div>
+      </div>
+      <div class="flex items-start text-xs" data-checked="false">
+        <div class="flex items-center h-4"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-3" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="2" value="2">
+            <!---->
+            <!---->
+          </button></div>
+        <div class="ms-2"><label for="v-0:2" class="block font-medium text-[var(--ui-text)]">Option 2</label>
+          <!--v-if-->
+        </div>
+      </div>
+      <div class="flex items-start text-xs" data-checked="false">
+        <div class="flex items-center h-4"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-3" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="3" value="3">
+            <!---->
+            <!---->
+          </button></div>
+        <div class="ms-2"><label for="v-0:3" class="block font-medium text-[var(--ui-text)]">Option 3</label>
+          <!--v-if-->
+        </div>
       </div>
     </div>
   </fieldset>
@@ -693,33 +732,35 @@ 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" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0" class="relative" tabindex="0">
-  <fieldset class="flex flex-col gap-1">
+  <fieldset class="gap-1">
     <!--v-if-->
-    <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="1" value="1">
-          <!---->
-          <!---->
-        </button></div>
-      <div class="ms-4"><label for="v-0:1" class="block font-medium text-[var(--ui-text)]">Option 1</label>
-        <!--v-if-->
-      </div>
-    </div>
-    <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="2" value="2">
-          <!---->
-          <!---->
-        </button></div>
-      <div class="ms-4"><label for="v-0:2" class="block font-medium text-[var(--ui-text)]">Option 2</label>
-        <!--v-if-->
-      </div>
-    </div>
-    <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="3" value="3">
-          <!---->
-          <!---->
-        </button></div>
-      <div class="ms-4"><label for="v-0:3" class="block font-medium text-[var(--ui-text)]">Option 3</label>
-        <!--v-if-->
+    <div class="flex flex-col">
+      <div class="flex items-start text-sm" data-checked="false">
+        <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="1" value="1">
+            <!---->
+            <!---->
+          </button></div>
+        <div class="ms-4"><label for="v-0:1" class="block font-medium text-[var(--ui-text)]">Option 1</label>
+          <!--v-if-->
+        </div>
+      </div>
+      <div class="flex items-start text-sm" data-checked="false">
+        <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="2" value="2">
+            <!---->
+            <!---->
+          </button></div>
+        <div class="ms-4"><label for="v-0:2" class="block font-medium text-[var(--ui-text)]">Option 2</label>
+          <!--v-if-->
+        </div>
+      </div>
+      <div class="flex items-start text-sm" data-checked="false">
+        <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="3" value="3">
+            <!---->
+            <!---->
+          </button></div>
+        <div class="ms-4"><label for="v-0:3" class="block font-medium text-[var(--ui-text)]">Option 3</label>
+          <!--v-if-->
+        </div>
       </div>
     </div>
   </fieldset>
@@ -729,33 +770,111 @@ 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" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0" class="relative" tabindex="0">
-  <fieldset class="flex flex-col gap-1">
+  <fieldset class="gap-1">
     <!--v-if-->
-    <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:Option 1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="Option 1" value="Option 1">
-          <!---->
-          <!---->
-        </button></div>
-      <div class="ms-2"><label for="v-0:Option 1" class="block font-medium text-[var(--ui-text)]">Option 1</label>
-        <!--v-if-->
+    <div class="flex flex-col">
+      <div class="flex items-start text-sm" data-checked="false">
+        <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:Option 1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="Option 1" value="Option 1">
+            <!---->
+            <!---->
+          </button></div>
+        <div class="ms-2"><label for="v-0:Option 1" class="block font-medium text-[var(--ui-text)]">Option 1</label>
+          <!--v-if-->
+        </div>
+      </div>
+      <div class="flex items-start text-sm" data-checked="false">
+        <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:Option 2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="Option 2" value="Option 2">
+            <!---->
+            <!---->
+          </button></div>
+        <div class="ms-2"><label for="v-0:Option 2" class="block font-medium text-[var(--ui-text)]">Option 2</label>
+          <!--v-if-->
+        </div>
+      </div>
+      <div class="flex items-start text-sm" data-checked="false">
+        <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:Option 3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="Option 3" value="Option 3">
+            <!---->
+            <!---->
+          </button></div>
+        <div class="ms-2"><label for="v-0:Option 3" class="block font-medium text-[var(--ui-text)]">Option 3</label>
+          <!--v-if-->
+        </div>
       </div>
     </div>
-    <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:Option 2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="Option 2" value="Option 2">
-          <!---->
-          <!---->
-        </button></div>
-      <div class="ms-2"><label for="v-0:Option 2" class="block font-medium text-[var(--ui-text)]">Option 2</label>
-        <!--v-if-->
+  </fieldset>
+  <!---->
+</div>"
+`;
+
+exports[`RadioGroup > renders with variant card correctly 1`] = `
+"<div role="radiogroup" aria-orientation="vertical" aria-required="false" dir="ltr" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0" class="relative" tabindex="0">
+  <fieldset class="gap-1">
+    <!--v-if-->
+    <div class="flex flex-col gap-2.5">
+      <div class="flex flex-row-reverse items-center justify-between border-2 border-[var(--ui-border-muted)] rounded-lg text-sm p-3.5 data-[checked=true]:border-[var(--ui-primary)]" data-checked="false">
+        <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] ml-4 size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="1" value="1">
+            <!---->
+            <!---->
+          </button></div>
+        <div class="ms-2"><label for="v-0:1" class="block font-medium text-[var(--ui-text)]">Option 1</label>
+          <!--v-if-->
+        </div>
+      </div>
+      <div class="flex flex-row-reverse items-center justify-between border-2 border-[var(--ui-border-muted)] rounded-lg text-sm p-3.5 data-[checked=true]:border-[var(--ui-primary)]" data-checked="false">
+        <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] ml-4 size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="2" value="2">
+            <!---->
+            <!---->
+          </button></div>
+        <div class="ms-2"><label for="v-0:2" class="block font-medium text-[var(--ui-text)]">Option 2</label>
+          <!--v-if-->
+        </div>
+      </div>
+      <div class="flex flex-row-reverse items-center justify-between border-2 border-[var(--ui-border-muted)] rounded-lg text-sm p-3.5 data-[checked=true]:border-[var(--ui-primary)]" data-checked="false">
+        <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] ml-4 size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="3" value="3">
+            <!---->
+            <!---->
+          </button></div>
+        <div class="ms-2"><label for="v-0:3" class="block font-medium text-[var(--ui-text)]">Option 3</label>
+          <!--v-if-->
+        </div>
       </div>
     </div>
-    <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:Option 3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="Option 3" value="Option 3">
-          <!---->
-          <!---->
-        </button></div>
-      <div class="ms-2"><label for="v-0:Option 3" class="block font-medium text-[var(--ui-text)]">Option 3</label>
-        <!--v-if-->
+  </fieldset>
+  <!---->
+</div>"
+`;
+
+exports[`RadioGroup > renders with variant table correctly 1`] = `
+"<div role="radiogroup" aria-orientation="vertical" aria-required="false" dir="ltr" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0" class="relative" tabindex="0">
+  <fieldset class="gap-1">
+    <!--v-if-->
+    <div class="flex flex-col gap-0">
+      <div class="flex items-start border-[var(--ui-border-muted)] text-sm p-3.5 first:rounded-t-lg last:rounded-b-lg not-first:not-last:border-y-2 first:border-t-2 border-x-2 last:border-b-2 data-[checked=true]:bg-[var(--ui-primary)]/20 data-[checked=true]:border-[var(--ui-primary)]/20" data-checked="false">
+        <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="1" value="1">
+            <!---->
+            <!---->
+          </button></div>
+        <div class="ms-2"><label for="v-0:1" class="block font-medium text-[var(--ui-text)]">Option 1</label>
+          <!--v-if-->
+        </div>
+      </div>
+      <div class="flex items-start border-[var(--ui-border-muted)] text-sm p-3.5 first:rounded-t-lg last:rounded-b-lg not-first:not-last:border-y-2 first:border-t-2 border-x-2 last:border-b-2 data-[checked=true]:bg-[var(--ui-primary)]/20 data-[checked=true]:border-[var(--ui-primary)]/20" data-checked="false">
+        <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="2" value="2">
+            <!---->
+            <!---->
+          </button></div>
+        <div class="ms-2"><label for="v-0:2" class="block font-medium text-[var(--ui-text)]">Option 2</label>
+          <!--v-if-->
+        </div>
+      </div>
+      <div class="flex items-start border-[var(--ui-border-muted)] text-sm p-3.5 first:rounded-t-lg last:rounded-b-lg not-first:not-last:border-y-2 first:border-t-2 border-x-2 last:border-b-2 data-[checked=true]:bg-[var(--ui-primary)]/20 data-[checked=true]:border-[var(--ui-primary)]/20" data-checked="false">
+        <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="3" value="3">
+            <!---->
+            <!---->
+          </button></div>
+        <div class="ms-2"><label for="v-0:3" class="block font-medium text-[var(--ui-text)]">Option 3</label>
+          <!--v-if-->
+        </div>
       </div>
     </div>
   </fieldset>
diff --git a/test/components/__snapshots__/RadioGroup.spec.ts.snap b/test/components/__snapshots__/RadioGroup.spec.ts.snap
index 8e36169cde..a7bef0ce5c 100644
--- a/test/components/__snapshots__/RadioGroup.spec.ts.snap
+++ b/test/components/__snapshots__/RadioGroup.spec.ts.snap
@@ -2,33 +2,35 @@
 
 exports[`RadioGroup > renders with as correctly 1`] = `
 "<section role="radiogroup" aria-orientation="vertical" aria-required="false" dir="ltr" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0-0" class="relative" tabindex="0">
-  <fieldset class="flex flex-col gap-1">
+  <fieldset class="gap-1">
     <!--v-if-->
-    <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="1" value="1">
-          <!---->
-          <!---->
-        </button></div>
-      <div class="ms-2"><label for="v-0-0:1" class="block font-medium text-[var(--ui-text)]">Option 1</label>
-        <!--v-if-->
-      </div>
-    </div>
-    <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="2" value="2">
-          <!---->
-          <!---->
-        </button></div>
-      <div class="ms-2"><label for="v-0-0:2" class="block font-medium text-[var(--ui-text)]">Option 2</label>
-        <!--v-if-->
-      </div>
-    </div>
-    <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="3" value="3">
-          <!---->
-          <!---->
-        </button></div>
-      <div class="ms-2"><label for="v-0-0:3" class="block font-medium text-[var(--ui-text)]">Option 3</label>
-        <!--v-if-->
+    <div class="flex flex-col">
+      <div class="flex items-start text-sm" data-checked="false">
+        <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="1" value="1">
+            <!---->
+            <!---->
+          </button></div>
+        <div class="ms-2"><label for="v-0-0:1" class="block font-medium text-[var(--ui-text)]">Option 1</label>
+          <!--v-if-->
+        </div>
+      </div>
+      <div class="flex items-start text-sm" data-checked="false">
+        <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="2" value="2">
+            <!---->
+            <!---->
+          </button></div>
+        <div class="ms-2"><label for="v-0-0:2" class="block font-medium text-[var(--ui-text)]">Option 2</label>
+          <!--v-if-->
+        </div>
+      </div>
+      <div class="flex items-start text-sm" data-checked="false">
+        <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="3" value="3">
+            <!---->
+            <!---->
+          </button></div>
+        <div class="ms-2"><label for="v-0-0:3" class="block font-medium text-[var(--ui-text)]">Option 3</label>
+          <!--v-if-->
+        </div>
       </div>
     </div>
   </fieldset>
@@ -38,33 +40,35 @@ 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" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0-0" class="absolute" tabindex="0">
-  <fieldset class="flex flex-col gap-1">
+  <fieldset class="gap-1">
     <!--v-if-->
-    <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="1" value="1">
-          <!---->
-          <!---->
-        </button></div>
-      <div class="ms-2"><label for="v-0-0:1" class="block font-medium text-[var(--ui-text)]">Option 1</label>
-        <!--v-if-->
-      </div>
-    </div>
-    <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="2" value="2">
-          <!---->
-          <!---->
-        </button></div>
-      <div class="ms-2"><label for="v-0-0:2" class="block font-medium text-[var(--ui-text)]">Option 2</label>
-        <!--v-if-->
-      </div>
-    </div>
-    <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="3" value="3">
-          <!---->
-          <!---->
-        </button></div>
-      <div class="ms-2"><label for="v-0-0:3" class="block font-medium text-[var(--ui-text)]">Option 3</label>
-        <!--v-if-->
+    <div class="flex flex-col">
+      <div class="flex items-start text-sm" data-checked="false">
+        <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="1" value="1">
+            <!---->
+            <!---->
+          </button></div>
+        <div class="ms-2"><label for="v-0-0:1" class="block font-medium text-[var(--ui-text)]">Option 1</label>
+          <!--v-if-->
+        </div>
+      </div>
+      <div class="flex items-start text-sm" data-checked="false">
+        <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="2" value="2">
+            <!---->
+            <!---->
+          </button></div>
+        <div class="ms-2"><label for="v-0-0:2" class="block font-medium text-[var(--ui-text)]">Option 2</label>
+          <!--v-if-->
+        </div>
+      </div>
+      <div class="flex items-start text-sm" data-checked="false">
+        <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="3" value="3">
+            <!---->
+            <!---->
+          </button></div>
+        <div class="ms-2"><label for="v-0-0:3" class="block font-medium text-[var(--ui-text)]">Option 3</label>
+          <!--v-if-->
+        </div>
       </div>
     </div>
   </fieldset>
@@ -74,8 +78,9 @@ exports[`RadioGroup > renders with class correctly 1`] = `
 
 exports[`RadioGroup > renders with color neutral correctly 1`] = `
 "<div role="radiogroup" 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 flex-col gap-1">
+  <fieldset class="gap-1">
     <!--v-if-->
+    <div class="flex flex-col"></div>
   </fieldset>
   <!---->
 </div>"
@@ -83,32 +88,34 @@ exports[`RadioGroup > renders with color neutral correctly 1`] = `
 
 exports[`RadioGroup > renders with defaultValue correctly 1`] = `
 "<div role="radiogroup" aria-orientation="vertical" aria-required="false" dir="ltr" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0-0" class="relative" tabindex="0">
-  <fieldset class="flex flex-col gap-1">
+  <fieldset class="gap-1">
     <!--v-if-->
-    <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item="" id="v-0-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" aria-label="1" value="1"><span data-state="checked" class="flex items-center justify-center size-full rounded-full after:bg-[var(--ui-bg)] after:rounded-full bg-[var(--ui-primary)] after:size-1.5"></span>
-          <!---->
-        </button></div>
-      <div class="ms-2"><label for="v-0-0:1" class="block font-medium text-[var(--ui-text)]">Option 1</label>
-        <!--v-if-->
-      </div>
-    </div>
-    <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="2" value="2">
-          <!---->
-          <!---->
-        </button></div>
-      <div class="ms-2"><label for="v-0-0:2" class="block font-medium text-[var(--ui-text)]">Option 2</label>
-        <!--v-if-->
-      </div>
-    </div>
-    <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="3" value="3">
-          <!---->
-          <!---->
-        </button></div>
-      <div class="ms-2"><label for="v-0-0:3" class="block font-medium text-[var(--ui-text)]">Option 3</label>
-        <!--v-if-->
+    <div class="flex flex-col">
+      <div class="flex items-start text-sm" data-checked="true">
+        <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item="" id="v-0-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" aria-label="1" value="1"><span data-state="checked" class="flex items-center justify-center size-full rounded-full after:bg-[var(--ui-bg)] after:rounded-full bg-[var(--ui-primary)] after:size-1.5"></span>
+            <!---->
+          </button></div>
+        <div class="ms-2"><label for="v-0-0:1" class="block font-medium text-[var(--ui-text)]">Option 1</label>
+          <!--v-if-->
+        </div>
+      </div>
+      <div class="flex items-start text-sm" data-checked="false">
+        <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="2" value="2">
+            <!---->
+            <!---->
+          </button></div>
+        <div class="ms-2"><label for="v-0-0:2" class="block font-medium text-[var(--ui-text)]">Option 2</label>
+          <!--v-if-->
+        </div>
+      </div>
+      <div class="flex items-start text-sm" data-checked="false">
+        <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="3" value="3">
+            <!---->
+            <!---->
+          </button></div>
+        <div class="ms-2"><label for="v-0-0:3" class="block font-medium text-[var(--ui-text)]">Option 3</label>
+          <!--v-if-->
+        </div>
       </div>
     </div>
   </fieldset>
@@ -118,33 +125,35 @@ 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" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0-0" class="relative" tabindex="0">
-  <fieldset class="flex flex-col gap-1">
+  <fieldset class="gap-1">
     <!--v-if-->
-    <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="1" value="1">
-          <!---->
-          <!---->
-        </button></div>
-      <div class="ms-2"><label for="v-0-0:1" class="block font-medium text-[var(--ui-text)]">Option 1</label>
-        <p class="text-[var(--ui-text-muted)]">Description 0</p>
-      </div>
-    </div>
-    <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="2" value="2">
-          <!---->
-          <!---->
-        </button></div>
-      <div class="ms-2"><label for="v-0-0:2" class="block font-medium text-[var(--ui-text)]">Option 2</label>
-        <p class="text-[var(--ui-text-muted)]">Description 1</p>
-      </div>
-    </div>
-    <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="3" value="3">
-          <!---->
-          <!---->
-        </button></div>
-      <div class="ms-2"><label for="v-0-0:3" class="block font-medium text-[var(--ui-text)]">Option 3</label>
-        <p class="text-[var(--ui-text-muted)]">Description 2</p>
+    <div class="flex flex-col">
+      <div class="flex items-start text-sm" data-checked="false">
+        <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="1" value="1">
+            <!---->
+            <!---->
+          </button></div>
+        <div class="ms-2"><label for="v-0-0:1" class="block font-medium text-[var(--ui-text)]">Option 1</label>
+          <p class="text-[var(--ui-text-muted)]">Description 0</p>
+        </div>
+      </div>
+      <div class="flex items-start text-sm" data-checked="false">
+        <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="2" value="2">
+            <!---->
+            <!---->
+          </button></div>
+        <div class="ms-2"><label for="v-0-0:2" class="block font-medium text-[var(--ui-text)]">Option 2</label>
+          <p class="text-[var(--ui-text-muted)]">Description 1</p>
+        </div>
+      </div>
+      <div class="flex items-start text-sm" data-checked="false">
+        <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="3" value="3">
+            <!---->
+            <!---->
+          </button></div>
+        <div class="ms-2"><label for="v-0-0:3" class="block font-medium text-[var(--ui-text)]">Option 3</label>
+          <p class="text-[var(--ui-text-muted)]">Description 2</p>
+        </div>
       </div>
     </div>
   </fieldset>
@@ -154,33 +163,35 @@ 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" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0-0" class="relative" tabindex="0">
-  <fieldset class="flex flex-col gap-1">
+  <fieldset class="gap-1">
     <!--v-if-->
-    <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="1" value="1">
-          <!---->
-          <!---->
-        </button></div>
-      <div class="ms-2"><label for="v-0-0:1" class="block font-medium text-[var(--ui-text)]">Description slot</label>
-        <!--v-if-->
-      </div>
-    </div>
-    <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="2" value="2">
-          <!---->
-          <!---->
-        </button></div>
-      <div class="ms-2"><label for="v-0-0:2" class="block font-medium text-[var(--ui-text)]">Description slot</label>
-        <!--v-if-->
-      </div>
-    </div>
-    <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="3" value="3">
-          <!---->
-          <!---->
-        </button></div>
-      <div class="ms-2"><label for="v-0-0:3" class="block font-medium text-[var(--ui-text)]">Description slot</label>
-        <!--v-if-->
+    <div class="flex flex-col">
+      <div class="flex items-start text-sm" data-checked="false">
+        <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="1" value="1">
+            <!---->
+            <!---->
+          </button></div>
+        <div class="ms-2"><label for="v-0-0:1" class="block font-medium text-[var(--ui-text)]">Description slot</label>
+          <!--v-if-->
+        </div>
+      </div>
+      <div class="flex items-start text-sm" data-checked="false">
+        <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="2" value="2">
+            <!---->
+            <!---->
+          </button></div>
+        <div class="ms-2"><label for="v-0-0:2" class="block font-medium text-[var(--ui-text)]">Description slot</label>
+          <!--v-if-->
+        </div>
+      </div>
+      <div class="flex items-start text-sm" data-checked="false">
+        <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="3" value="3">
+            <!---->
+            <!---->
+          </button></div>
+        <div class="ms-2"><label for="v-0-0:3" class="block font-medium text-[var(--ui-text)]">Description slot</label>
+          <!--v-if-->
+        </div>
       </div>
     </div>
   </fieldset>
@@ -190,33 +201,35 @@ 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" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0-0" class="relative" tabindex="0">
-  <fieldset class="flex flex-col gap-1">
+  <fieldset class="gap-1">
     <!--v-if-->
-    <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="1" value="1">
-          <!---->
-          <!---->
-        </button></div>
-      <div class="ms-2"><label for="v-0-0:1" class="block font-medium text-[var(--ui-text)]">Option 1</label>
-        <p class="text-[var(--ui-text-muted)]">1</p>
-      </div>
-    </div>
-    <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="2" value="2">
-          <!---->
-          <!---->
-        </button></div>
-      <div class="ms-2"><label for="v-0-0:2" class="block font-medium text-[var(--ui-text)]">Option 2</label>
-        <p class="text-[var(--ui-text-muted)]">2</p>
-      </div>
-    </div>
-    <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="3" value="3">
-          <!---->
-          <!---->
-        </button></div>
-      <div class="ms-2"><label for="v-0-0:3" class="block font-medium text-[var(--ui-text)]">Option 3</label>
-        <p class="text-[var(--ui-text-muted)]">3</p>
+    <div class="flex flex-col">
+      <div class="flex items-start text-sm" data-checked="false">
+        <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="1" value="1">
+            <!---->
+            <!---->
+          </button></div>
+        <div class="ms-2"><label for="v-0-0:1" class="block font-medium text-[var(--ui-text)]">Option 1</label>
+          <p class="text-[var(--ui-text-muted)]">1</p>
+        </div>
+      </div>
+      <div class="flex items-start text-sm" data-checked="false">
+        <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="2" value="2">
+            <!---->
+            <!---->
+          </button></div>
+        <div class="ms-2"><label for="v-0-0:2" class="block font-medium text-[var(--ui-text)]">Option 2</label>
+          <p class="text-[var(--ui-text-muted)]">2</p>
+        </div>
+      </div>
+      <div class="flex items-start text-sm" data-checked="false">
+        <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="3" value="3">
+            <!---->
+            <!---->
+          </button></div>
+        <div class="ms-2"><label for="v-0-0:3" class="block font-medium text-[var(--ui-text)]">Option 3</label>
+          <p class="text-[var(--ui-text-muted)]">3</p>
+        </div>
       </div>
     </div>
   </fieldset>
@@ -226,33 +239,35 @@ 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 flex-col gap-1">
+  <fieldset class="gap-1">
     <!--v-if-->
-    <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4 cursor-not-allowed opacity-75" tabindex="-1" data-orientation="vertical" data-active="false" data-disabled="" data-reka-collection-item="" id="v-0-0:1" role="radio" type="button" aria-checked="false" disabled="" data-state="unchecked" required="false" aria-label="1" value="1">
-          <!---->
-          <!---->
-        </button></div>
-      <div class="ms-2"><label for="v-0-0:1" class="block font-medium text-[var(--ui-text)] cursor-not-allowed opacity-75">Option 1</label>
-        <!--v-if-->
-      </div>
-    </div>
-    <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4 cursor-not-allowed opacity-75" tabindex="-1" data-orientation="vertical" data-active="false" data-disabled="" data-reka-collection-item="" id="v-0-0:2" role="radio" type="button" aria-checked="false" disabled="" data-state="unchecked" required="false" aria-label="2" value="2">
-          <!---->
-          <!---->
-        </button></div>
-      <div class="ms-2"><label for="v-0-0:2" class="block font-medium text-[var(--ui-text)] cursor-not-allowed opacity-75">Option 2</label>
-        <!--v-if-->
-      </div>
-    </div>
-    <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4 cursor-not-allowed opacity-75" tabindex="-1" data-orientation="vertical" data-active="false" data-disabled="" data-reka-collection-item="" id="v-0-0:3" role="radio" type="button" aria-checked="false" disabled="" data-state="unchecked" required="false" aria-label="3" value="3">
-          <!---->
-          <!---->
-        </button></div>
-      <div class="ms-2"><label for="v-0-0:3" class="block font-medium text-[var(--ui-text)] cursor-not-allowed opacity-75">Option 3</label>
-        <!--v-if-->
+    <div class="flex flex-col">
+      <div class="flex items-start text-sm" data-checked="false">
+        <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4 cursor-not-allowed opacity-75" tabindex="-1" data-orientation="vertical" data-active="false" data-disabled="" data-reka-collection-item="" id="v-0-0:1" role="radio" type="button" aria-checked="false" disabled="" data-state="unchecked" required="false" aria-label="1" value="1">
+            <!---->
+            <!---->
+          </button></div>
+        <div class="ms-2"><label for="v-0-0:1" class="block font-medium text-[var(--ui-text)] cursor-not-allowed opacity-75">Option 1</label>
+          <!--v-if-->
+        </div>
+      </div>
+      <div class="flex items-start text-sm" data-checked="false">
+        <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4 cursor-not-allowed opacity-75" tabindex="-1" data-orientation="vertical" data-active="false" data-disabled="" data-reka-collection-item="" id="v-0-0:2" role="radio" type="button" aria-checked="false" disabled="" data-state="unchecked" required="false" aria-label="2" value="2">
+            <!---->
+            <!---->
+          </button></div>
+        <div class="ms-2"><label for="v-0-0:2" class="block font-medium text-[var(--ui-text)] cursor-not-allowed opacity-75">Option 2</label>
+          <!--v-if-->
+        </div>
+      </div>
+      <div class="flex items-start text-sm" data-checked="false">
+        <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4 cursor-not-allowed opacity-75" tabindex="-1" data-orientation="vertical" data-active="false" data-disabled="" data-reka-collection-item="" id="v-0-0:3" role="radio" type="button" aria-checked="false" disabled="" data-state="unchecked" required="false" aria-label="3" value="3">
+            <!---->
+            <!---->
+          </button></div>
+        <div class="ms-2"><label for="v-0-0:3" class="block font-medium text-[var(--ui-text)] cursor-not-allowed opacity-75">Option 3</label>
+          <!--v-if-->
+        </div>
       </div>
     </div>
   </fieldset>
@@ -262,33 +277,35 @@ exports[`RadioGroup > renders with disabled correctly 1`] = `
 
 exports[`RadioGroup > renders with items correctly 1`] = `
 "<div role="radiogroup" aria-orientation="vertical" aria-required="false" dir="ltr" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0-0" class="relative" tabindex="0">
-  <fieldset class="flex flex-col gap-1">
+  <fieldset class="gap-1">
     <!--v-if-->
-    <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="1" value="1">
-          <!---->
-          <!---->
-        </button></div>
-      <div class="ms-2"><label for="v-0-0:1" class="block font-medium text-[var(--ui-text)]">Option 1</label>
-        <!--v-if-->
-      </div>
-    </div>
-    <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="2" value="2">
-          <!---->
-          <!---->
-        </button></div>
-      <div class="ms-2"><label for="v-0-0:2" class="block font-medium text-[var(--ui-text)]">Option 2</label>
-        <!--v-if-->
-      </div>
-    </div>
-    <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="3" value="3">
-          <!---->
-          <!---->
-        </button></div>
-      <div class="ms-2"><label for="v-0-0:3" class="block font-medium text-[var(--ui-text)]">Option 3</label>
-        <!--v-if-->
+    <div class="flex flex-col">
+      <div class="flex items-start text-sm" data-checked="false">
+        <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="1" value="1">
+            <!---->
+            <!---->
+          </button></div>
+        <div class="ms-2"><label for="v-0-0:1" class="block font-medium text-[var(--ui-text)]">Option 1</label>
+          <!--v-if-->
+        </div>
+      </div>
+      <div class="flex items-start text-sm" data-checked="false">
+        <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="2" value="2">
+            <!---->
+            <!---->
+          </button></div>
+        <div class="ms-2"><label for="v-0-0:2" class="block font-medium text-[var(--ui-text)]">Option 2</label>
+          <!--v-if-->
+        </div>
+      </div>
+      <div class="flex items-start text-sm" data-checked="false">
+        <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="3" value="3">
+            <!---->
+            <!---->
+          </button></div>
+        <div class="ms-2"><label for="v-0-0:3" class="block font-medium text-[var(--ui-text)]">Option 3</label>
+          <!--v-if-->
+        </div>
       </div>
     </div>
   </fieldset>
@@ -298,33 +315,35 @@ 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" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0-0" class="relative" tabindex="0">
-  <fieldset class="flex flex-col gap-1">
+  <fieldset class="gap-1">
     <!--v-if-->
-    <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="1" value="1">
-          <!---->
-          <!---->
-        </button></div>
-      <div class="ms-2"><label for="v-0-0:1" class="block font-medium text-[var(--ui-text)]">Label slot</label>
-        <!--v-if-->
-      </div>
-    </div>
-    <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="2" value="2">
-          <!---->
-          <!---->
-        </button></div>
-      <div class="ms-2"><label for="v-0-0:2" class="block font-medium text-[var(--ui-text)]">Label slot</label>
-        <!--v-if-->
-      </div>
-    </div>
-    <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="3" value="3">
-          <!---->
-          <!---->
-        </button></div>
-      <div class="ms-2"><label for="v-0-0:3" class="block font-medium text-[var(--ui-text)]">Label slot</label>
-        <!--v-if-->
+    <div class="flex flex-col">
+      <div class="flex items-start text-sm" data-checked="false">
+        <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="1" value="1">
+            <!---->
+            <!---->
+          </button></div>
+        <div class="ms-2"><label for="v-0-0:1" class="block font-medium text-[var(--ui-text)]">Label slot</label>
+          <!--v-if-->
+        </div>
+      </div>
+      <div class="flex items-start text-sm" data-checked="false">
+        <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="2" value="2">
+            <!---->
+            <!---->
+          </button></div>
+        <div class="ms-2"><label for="v-0-0:2" class="block font-medium text-[var(--ui-text)]">Label slot</label>
+          <!--v-if-->
+        </div>
+      </div>
+      <div class="flex items-start text-sm" data-checked="false">
+        <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="3" value="3">
+            <!---->
+            <!---->
+          </button></div>
+        <div class="ms-2"><label for="v-0-0:3" class="block font-medium text-[var(--ui-text)]">Label slot</label>
+          <!--v-if-->
+        </div>
       </div>
     </div>
   </fieldset>
@@ -334,33 +353,35 @@ 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" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0-0" class="relative" tabindex="0">
-  <fieldset class="flex flex-col gap-1">
+  <fieldset class="gap-1">
     <!--v-if-->
-    <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="1" value="1">
-          <!---->
-          <!---->
-        </button></div>
-      <div class="ms-2"><label for="v-0-0:1" class="block font-medium text-[var(--ui-text)]">1</label>
-        <!--v-if-->
-      </div>
-    </div>
-    <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="2" value="2">
-          <!---->
-          <!---->
-        </button></div>
-      <div class="ms-2"><label for="v-0-0:2" class="block font-medium text-[var(--ui-text)]">2</label>
-        <!--v-if-->
-      </div>
-    </div>
-    <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="3" value="3">
-          <!---->
-          <!---->
-        </button></div>
-      <div class="ms-2"><label for="v-0-0:3" class="block font-medium text-[var(--ui-text)]">3</label>
-        <!--v-if-->
+    <div class="flex flex-col">
+      <div class="flex items-start text-sm" data-checked="false">
+        <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="1" value="1">
+            <!---->
+            <!---->
+          </button></div>
+        <div class="ms-2"><label for="v-0-0:1" class="block font-medium text-[var(--ui-text)]">1</label>
+          <!--v-if-->
+        </div>
+      </div>
+      <div class="flex items-start text-sm" data-checked="false">
+        <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="2" value="2">
+            <!---->
+            <!---->
+          </button></div>
+        <div class="ms-2"><label for="v-0-0:2" class="block font-medium text-[var(--ui-text)]">2</label>
+          <!--v-if-->
+        </div>
+      </div>
+      <div class="flex items-start text-sm" data-checked="false">
+        <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="3" value="3">
+            <!---->
+            <!---->
+          </button></div>
+        <div class="ms-2"><label for="v-0-0:3" class="block font-medium text-[var(--ui-text)]">3</label>
+          <!--v-if-->
+        </div>
       </div>
     </div>
   </fieldset>
@@ -370,33 +391,35 @@ 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" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0-0" class="relative" tabindex="0">
-  <fieldset class="flex flex-col gap-1">
+  <fieldset class="gap-1">
     <!--v-if-->
-    <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="1" value="1">
-          <!---->
-          <!---->
-        </button></div>
-      <div class="ms-2"><label for="v-0-0:1" class="block font-medium text-[var(--ui-text)]">Legend slot</label>
-        <!--v-if-->
-      </div>
-    </div>
-    <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="2" value="2">
-          <!---->
-          <!---->
-        </button></div>
-      <div class="ms-2"><label for="v-0-0:2" class="block font-medium text-[var(--ui-text)]">Legend slot</label>
-        <!--v-if-->
-      </div>
-    </div>
-    <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="3" value="3">
-          <!---->
-          <!---->
-        </button></div>
-      <div class="ms-2"><label for="v-0-0:3" class="block font-medium text-[var(--ui-text)]">Legend slot</label>
-        <!--v-if-->
+    <div class="flex flex-col">
+      <div class="flex items-start text-sm" data-checked="false">
+        <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="1" value="1">
+            <!---->
+            <!---->
+          </button></div>
+        <div class="ms-2"><label for="v-0-0:1" class="block font-medium text-[var(--ui-text)]">Legend slot</label>
+          <!--v-if-->
+        </div>
+      </div>
+      <div class="flex items-start text-sm" data-checked="false">
+        <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="2" value="2">
+            <!---->
+            <!---->
+          </button></div>
+        <div class="ms-2"><label for="v-0-0:2" class="block font-medium text-[var(--ui-text)]">Legend slot</label>
+          <!--v-if-->
+        </div>
+      </div>
+      <div class="flex items-start text-sm" data-checked="false">
+        <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="3" value="3">
+            <!---->
+            <!---->
+          </button></div>
+        <div class="ms-2"><label for="v-0-0:3" class="block font-medium text-[var(--ui-text)]">Legend slot</label>
+          <!--v-if-->
+        </div>
       </div>
     </div>
   </fieldset>
@@ -406,32 +429,34 @@ 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" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0-0" class="relative" tabindex="0">
-  <fieldset class="flex flex-col gap-1">
+  <fieldset class="gap-1">
     <!--v-if-->
-    <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item="" id="v-0-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" aria-label="1" value="1"><span data-state="checked" class="flex items-center justify-center size-full rounded-full after:bg-[var(--ui-bg)] after:rounded-full bg-[var(--ui-primary)] after:size-1.5"></span>
-          <!---->
-        </button></div>
-      <div class="ms-2"><label for="v-0-0:1" class="block font-medium text-[var(--ui-text)]">Option 1</label>
-        <!--v-if-->
-      </div>
-    </div>
-    <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="2" value="2">
-          <!---->
-          <!---->
-        </button></div>
-      <div class="ms-2"><label for="v-0-0:2" class="block font-medium text-[var(--ui-text)]">Option 2</label>
-        <!--v-if-->
-      </div>
-    </div>
-    <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="3" value="3">
-          <!---->
-          <!---->
-        </button></div>
-      <div class="ms-2"><label for="v-0-0:3" class="block font-medium text-[var(--ui-text)]">Option 3</label>
-        <!--v-if-->
+    <div class="flex flex-col">
+      <div class="flex items-start text-sm" data-checked="true">
+        <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="true" data-reka-collection-item="" id="v-0-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" aria-label="1" value="1"><span data-state="checked" class="flex items-center justify-center size-full rounded-full after:bg-[var(--ui-bg)] after:rounded-full bg-[var(--ui-primary)] after:size-1.5"></span>
+            <!---->
+          </button></div>
+        <div class="ms-2"><label for="v-0-0:1" class="block font-medium text-[var(--ui-text)]">Option 1</label>
+          <!--v-if-->
+        </div>
+      </div>
+      <div class="flex items-start text-sm" data-checked="false">
+        <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="2" value="2">
+            <!---->
+            <!---->
+          </button></div>
+        <div class="ms-2"><label for="v-0-0:2" class="block font-medium text-[var(--ui-text)]">Option 2</label>
+          <!--v-if-->
+        </div>
+      </div>
+      <div class="flex items-start text-sm" data-checked="false">
+        <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="3" value="3">
+            <!---->
+            <!---->
+          </button></div>
+        <div class="ms-2"><label for="v-0-0:3" class="block font-medium text-[var(--ui-text)]">Option 3</label>
+          <!--v-if-->
+        </div>
       </div>
     </div>
   </fieldset>
@@ -441,33 +466,35 @@ exports[`RadioGroup > renders with modelValue correctly 1`] = `
 
 exports[`RadioGroup > renders with orientation correctly 1`] = `
 "<div role="radiogroup" aria-orientation="horizontal" aria-required="false" dir="ltr" data-orientation="horizontal" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0-0" class="relative" tabindex="0">
-  <fieldset class="flex flex-row gap-1">
+  <fieldset class="gap-1">
     <!--v-if-->
-    <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="horizontal" data-active="false" data-reka-collection-item="" id="v-0-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="1" value="1">
-          <!---->
-          <!---->
-        </button></div>
-      <div class="ms-2 me-2"><label for="v-0-0:1" class="block font-medium text-[var(--ui-text)]">Option 1</label>
-        <!--v-if-->
-      </div>
-    </div>
-    <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="horizontal" data-active="false" data-reka-collection-item="" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="2" value="2">
-          <!---->
-          <!---->
-        </button></div>
-      <div class="ms-2 me-2"><label for="v-0-0:2" class="block font-medium text-[var(--ui-text)]">Option 2</label>
-        <!--v-if-->
-      </div>
-    </div>
-    <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="horizontal" data-active="false" data-reka-collection-item="" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="3" value="3">
-          <!---->
-          <!---->
-        </button></div>
-      <div class="ms-2 me-2"><label for="v-0-0:3" class="block font-medium text-[var(--ui-text)]">Option 3</label>
-        <!--v-if-->
+    <div class="flex flex-row">
+      <div class="flex items-start text-sm" data-checked="false">
+        <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="horizontal" data-active="false" data-reka-collection-item="" id="v-0-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="1" value="1">
+            <!---->
+            <!---->
+          </button></div>
+        <div class="ms-2 me-2"><label for="v-0-0:1" class="block font-medium text-[var(--ui-text)]">Option 1</label>
+          <!--v-if-->
+        </div>
+      </div>
+      <div class="flex items-start text-sm" data-checked="false">
+        <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="horizontal" data-active="false" data-reka-collection-item="" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="2" value="2">
+            <!---->
+            <!---->
+          </button></div>
+        <div class="ms-2 me-2"><label for="v-0-0:2" class="block font-medium text-[var(--ui-text)]">Option 2</label>
+          <!--v-if-->
+        </div>
+      </div>
+      <div class="flex items-start text-sm" data-checked="false">
+        <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="horizontal" data-active="false" data-reka-collection-item="" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="3" value="3">
+            <!---->
+            <!---->
+          </button></div>
+        <div class="ms-2 me-2"><label for="v-0-0:3" class="block font-medium text-[var(--ui-text)]">Option 3</label>
+          <!--v-if-->
+        </div>
       </div>
     </div>
   </fieldset>
@@ -477,33 +504,35 @@ exports[`RadioGroup > renders with orientation correctly 1`] = `
 
 exports[`RadioGroup > renders with required correctly 1`] = `
 "<div role="radiogroup" aria-orientation="vertical" aria-required="true" dir="ltr" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0-0" class="relative" tabindex="0">
-  <fieldset class="flex flex-col gap-1">
+  <fieldset class="gap-1">
     <legend class="mb-1 block font-medium text-[var(--ui-text)] text-sm after:content-['*'] after:ms-0.5 after:text-[var(--ui-error)]">Legend</legend>
-    <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="true" aria-label="1" value="1">
-          <!---->
-          <!---->
-        </button></div>
-      <div class="ms-2"><label for="v-0-0:1" class="block font-medium text-[var(--ui-text)]">Option 1</label>
-        <!--v-if-->
-      </div>
-    </div>
-    <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="true" aria-label="2" value="2">
-          <!---->
-          <!---->
-        </button></div>
-      <div class="ms-2"><label for="v-0-0:2" class="block font-medium text-[var(--ui-text)]">Option 2</label>
-        <!--v-if-->
-      </div>
-    </div>
-    <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="true" aria-label="3" value="3">
-          <!---->
-          <!---->
-        </button></div>
-      <div class="ms-2"><label for="v-0-0:3" class="block font-medium text-[var(--ui-text)]">Option 3</label>
-        <!--v-if-->
+    <div class="flex flex-col">
+      <div class="flex items-start text-sm" data-checked="false">
+        <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="true" aria-label="1" value="1">
+            <!---->
+            <!---->
+          </button></div>
+        <div class="ms-2"><label for="v-0-0:1" class="block font-medium text-[var(--ui-text)]">Option 1</label>
+          <!--v-if-->
+        </div>
+      </div>
+      <div class="flex items-start text-sm" data-checked="false">
+        <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="true" aria-label="2" value="2">
+            <!---->
+            <!---->
+          </button></div>
+        <div class="ms-2"><label for="v-0-0:2" class="block font-medium text-[var(--ui-text)]">Option 2</label>
+          <!--v-if-->
+        </div>
+      </div>
+      <div class="flex items-start text-sm" data-checked="false">
+        <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="true" aria-label="3" value="3">
+            <!---->
+            <!---->
+          </button></div>
+        <div class="ms-2"><label for="v-0-0:3" class="block font-medium text-[var(--ui-text)]">Option 3</label>
+          <!--v-if-->
+        </div>
       </div>
     </div>
   </fieldset>
@@ -513,33 +542,35 @@ 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" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0-0" class="relative" tabindex="0">
-  <fieldset class="flex flex-col gap-1">
+  <fieldset class="gap-1">
     <!--v-if-->
-    <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4.5" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="1" value="1">
-          <!---->
-          <!---->
-        </button></div>
-      <div class="ms-2"><label for="v-0-0:1" class="block font-medium text-[var(--ui-text)]">Option 1</label>
-        <!--v-if-->
-      </div>
-    </div>
-    <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4.5" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="2" value="2">
-          <!---->
-          <!---->
-        </button></div>
-      <div class="ms-2"><label for="v-0-0:2" class="block font-medium text-[var(--ui-text)]">Option 2</label>
-        <!--v-if-->
-      </div>
-    </div>
-    <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4.5" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="3" value="3">
-          <!---->
-          <!---->
-        </button></div>
-      <div class="ms-2"><label for="v-0-0:3" class="block font-medium text-[var(--ui-text)]">Option 3</label>
-        <!--v-if-->
+    <div class="flex flex-col">
+      <div class="flex items-start text-sm" data-checked="false">
+        <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4.5" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="1" value="1">
+            <!---->
+            <!---->
+          </button></div>
+        <div class="ms-2"><label for="v-0-0:1" class="block font-medium text-[var(--ui-text)]">Option 1</label>
+          <!--v-if-->
+        </div>
+      </div>
+      <div class="flex items-start text-sm" data-checked="false">
+        <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4.5" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="2" value="2">
+            <!---->
+            <!---->
+          </button></div>
+        <div class="ms-2"><label for="v-0-0:2" class="block font-medium text-[var(--ui-text)]">Option 2</label>
+          <!--v-if-->
+        </div>
+      </div>
+      <div class="flex items-start text-sm" data-checked="false">
+        <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4.5" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="3" value="3">
+            <!---->
+            <!---->
+          </button></div>
+        <div class="ms-2"><label for="v-0-0:3" class="block font-medium text-[var(--ui-text)]">Option 3</label>
+          <!--v-if-->
+        </div>
       </div>
     </div>
   </fieldset>
@@ -549,33 +580,35 @@ 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" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0-0" class="relative" tabindex="0">
-  <fieldset class="flex flex-col gap-1">
+  <fieldset class="gap-1">
     <!--v-if-->
-    <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="1" value="1">
-          <!---->
-          <!---->
-        </button></div>
-      <div class="ms-2"><label for="v-0-0:1" class="block font-medium text-[var(--ui-text)]">Option 1</label>
-        <!--v-if-->
-      </div>
-    </div>
-    <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="2" value="2">
-          <!---->
-          <!---->
-        </button></div>
-      <div class="ms-2"><label for="v-0-0:2" class="block font-medium text-[var(--ui-text)]">Option 2</label>
-        <!--v-if-->
-      </div>
-    </div>
-    <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="3" value="3">
-          <!---->
-          <!---->
-        </button></div>
-      <div class="ms-2"><label for="v-0-0:3" class="block font-medium text-[var(--ui-text)]">Option 3</label>
-        <!--v-if-->
+    <div class="flex flex-col">
+      <div class="flex items-start text-sm" data-checked="false">
+        <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="1" value="1">
+            <!---->
+            <!---->
+          </button></div>
+        <div class="ms-2"><label for="v-0-0:1" class="block font-medium text-[var(--ui-text)]">Option 1</label>
+          <!--v-if-->
+        </div>
+      </div>
+      <div class="flex items-start text-sm" data-checked="false">
+        <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="2" value="2">
+            <!---->
+            <!---->
+          </button></div>
+        <div class="ms-2"><label for="v-0-0:2" class="block font-medium text-[var(--ui-text)]">Option 2</label>
+          <!--v-if-->
+        </div>
+      </div>
+      <div class="flex items-start text-sm" data-checked="false">
+        <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="3" value="3">
+            <!---->
+            <!---->
+          </button></div>
+        <div class="ms-2"><label for="v-0-0:3" class="block font-medium text-[var(--ui-text)]">Option 3</label>
+          <!--v-if-->
+        </div>
       </div>
     </div>
   </fieldset>
@@ -585,33 +618,35 @@ 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" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0-0" class="relative" tabindex="0">
-  <fieldset class="flex flex-col gap-0.5">
+  <fieldset class="gap-0.5">
     <!--v-if-->
-    <div class="flex items-start text-xs">
-      <div class="flex items-center h-4"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-3.5" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="1" value="1">
-          <!---->
-          <!---->
-        </button></div>
-      <div class="ms-2"><label for="v-0-0:1" class="block font-medium text-[var(--ui-text)]">Option 1</label>
-        <!--v-if-->
-      </div>
-    </div>
-    <div class="flex items-start text-xs">
-      <div class="flex items-center h-4"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-3.5" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="2" value="2">
-          <!---->
-          <!---->
-        </button></div>
-      <div class="ms-2"><label for="v-0-0:2" class="block font-medium text-[var(--ui-text)]">Option 2</label>
-        <!--v-if-->
-      </div>
-    </div>
-    <div class="flex items-start text-xs">
-      <div class="flex items-center h-4"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-3.5" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="3" value="3">
-          <!---->
-          <!---->
-        </button></div>
-      <div class="ms-2"><label for="v-0-0:3" class="block font-medium text-[var(--ui-text)]">Option 3</label>
-        <!--v-if-->
+    <div class="flex flex-col">
+      <div class="flex items-start text-xs" data-checked="false">
+        <div class="flex items-center h-4"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-3.5" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="1" value="1">
+            <!---->
+            <!---->
+          </button></div>
+        <div class="ms-2"><label for="v-0-0:1" class="block font-medium text-[var(--ui-text)]">Option 1</label>
+          <!--v-if-->
+        </div>
+      </div>
+      <div class="flex items-start text-xs" data-checked="false">
+        <div class="flex items-center h-4"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-3.5" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="2" value="2">
+            <!---->
+            <!---->
+          </button></div>
+        <div class="ms-2"><label for="v-0-0:2" class="block font-medium text-[var(--ui-text)]">Option 2</label>
+          <!--v-if-->
+        </div>
+      </div>
+      <div class="flex items-start text-xs" data-checked="false">
+        <div class="flex items-center h-4"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-3.5" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="3" value="3">
+            <!---->
+            <!---->
+          </button></div>
+        <div class="ms-2"><label for="v-0-0:3" class="block font-medium text-[var(--ui-text)]">Option 3</label>
+          <!--v-if-->
+        </div>
       </div>
     </div>
   </fieldset>
@@ -621,33 +656,35 @@ 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" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0-0" class="relative" tabindex="0">
-  <fieldset class="flex flex-col gap-1.5">
+  <fieldset class="gap-1.5">
     <!--v-if-->
-    <div class="flex items-start text-base">
-      <div class="flex items-center h-6"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-5" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="1" value="1">
-          <!---->
-          <!---->
-        </button></div>
-      <div class="ms-2"><label for="v-0-0:1" class="block font-medium text-[var(--ui-text)]">Option 1</label>
-        <!--v-if-->
-      </div>
-    </div>
-    <div class="flex items-start text-base">
-      <div class="flex items-center h-6"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-5" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="2" value="2">
-          <!---->
-          <!---->
-        </button></div>
-      <div class="ms-2"><label for="v-0-0:2" class="block font-medium text-[var(--ui-text)]">Option 2</label>
-        <!--v-if-->
-      </div>
-    </div>
-    <div class="flex items-start text-base">
-      <div class="flex items-center h-6"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-5" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="3" value="3">
-          <!---->
-          <!---->
-        </button></div>
-      <div class="ms-2"><label for="v-0-0:3" class="block font-medium text-[var(--ui-text)]">Option 3</label>
-        <!--v-if-->
+    <div class="flex flex-col">
+      <div class="flex items-start text-base" data-checked="false">
+        <div class="flex items-center h-6"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-5" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="1" value="1">
+            <!---->
+            <!---->
+          </button></div>
+        <div class="ms-2"><label for="v-0-0:1" class="block font-medium text-[var(--ui-text)]">Option 1</label>
+          <!--v-if-->
+        </div>
+      </div>
+      <div class="flex items-start text-base" data-checked="false">
+        <div class="flex items-center h-6"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-5" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="2" value="2">
+            <!---->
+            <!---->
+          </button></div>
+        <div class="ms-2"><label for="v-0-0:2" class="block font-medium text-[var(--ui-text)]">Option 2</label>
+          <!--v-if-->
+        </div>
+      </div>
+      <div class="flex items-start text-base" data-checked="false">
+        <div class="flex items-center h-6"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-5" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="3" value="3">
+            <!---->
+            <!---->
+          </button></div>
+        <div class="ms-2"><label for="v-0-0:3" class="block font-medium text-[var(--ui-text)]">Option 3</label>
+          <!--v-if-->
+        </div>
       </div>
     </div>
   </fieldset>
@@ -657,33 +694,35 @@ 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" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0-0" class="relative" tabindex="0">
-  <fieldset class="flex flex-col gap-0.5">
+  <fieldset class="gap-0.5">
     <!--v-if-->
-    <div class="flex items-start text-xs">
-      <div class="flex items-center h-4"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-3" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="1" value="1">
-          <!---->
-          <!---->
-        </button></div>
-      <div class="ms-2"><label for="v-0-0:1" class="block font-medium text-[var(--ui-text)]">Option 1</label>
-        <!--v-if-->
-      </div>
-    </div>
-    <div class="flex items-start text-xs">
-      <div class="flex items-center h-4"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-3" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="2" value="2">
-          <!---->
-          <!---->
-        </button></div>
-      <div class="ms-2"><label for="v-0-0:2" class="block font-medium text-[var(--ui-text)]">Option 2</label>
-        <!--v-if-->
-      </div>
-    </div>
-    <div class="flex items-start text-xs">
-      <div class="flex items-center h-4"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-3" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="3" value="3">
-          <!---->
-          <!---->
-        </button></div>
-      <div class="ms-2"><label for="v-0-0:3" class="block font-medium text-[var(--ui-text)]">Option 3</label>
-        <!--v-if-->
+    <div class="flex flex-col">
+      <div class="flex items-start text-xs" data-checked="false">
+        <div class="flex items-center h-4"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-3" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="1" value="1">
+            <!---->
+            <!---->
+          </button></div>
+        <div class="ms-2"><label for="v-0-0:1" class="block font-medium text-[var(--ui-text)]">Option 1</label>
+          <!--v-if-->
+        </div>
+      </div>
+      <div class="flex items-start text-xs" data-checked="false">
+        <div class="flex items-center h-4"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-3" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="2" value="2">
+            <!---->
+            <!---->
+          </button></div>
+        <div class="ms-2"><label for="v-0-0:2" class="block font-medium text-[var(--ui-text)]">Option 2</label>
+          <!--v-if-->
+        </div>
+      </div>
+      <div class="flex items-start text-xs" data-checked="false">
+        <div class="flex items-center h-4"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-3" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="3" value="3">
+            <!---->
+            <!---->
+          </button></div>
+        <div class="ms-2"><label for="v-0-0:3" class="block font-medium text-[var(--ui-text)]">Option 3</label>
+          <!--v-if-->
+        </div>
       </div>
     </div>
   </fieldset>
@@ -693,33 +732,35 @@ 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" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0-0" class="relative" tabindex="0">
-  <fieldset class="flex flex-col gap-1">
+  <fieldset class="gap-1">
     <!--v-if-->
-    <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="1" value="1">
-          <!---->
-          <!---->
-        </button></div>
-      <div class="ms-4"><label for="v-0-0:1" class="block font-medium text-[var(--ui-text)]">Option 1</label>
-        <!--v-if-->
-      </div>
-    </div>
-    <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="2" value="2">
-          <!---->
-          <!---->
-        </button></div>
-      <div class="ms-4"><label for="v-0-0:2" class="block font-medium text-[var(--ui-text)]">Option 2</label>
-        <!--v-if-->
-      </div>
-    </div>
-    <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="3" value="3">
-          <!---->
-          <!---->
-        </button></div>
-      <div class="ms-4"><label for="v-0-0:3" class="block font-medium text-[var(--ui-text)]">Option 3</label>
-        <!--v-if-->
+    <div class="flex flex-col">
+      <div class="flex items-start text-sm" data-checked="false">
+        <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="1" value="1">
+            <!---->
+            <!---->
+          </button></div>
+        <div class="ms-4"><label for="v-0-0:1" class="block font-medium text-[var(--ui-text)]">Option 1</label>
+          <!--v-if-->
+        </div>
+      </div>
+      <div class="flex items-start text-sm" data-checked="false">
+        <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="2" value="2">
+            <!---->
+            <!---->
+          </button></div>
+        <div class="ms-4"><label for="v-0-0:2" class="block font-medium text-[var(--ui-text)]">Option 2</label>
+          <!--v-if-->
+        </div>
+      </div>
+      <div class="flex items-start text-sm" data-checked="false">
+        <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="3" value="3">
+            <!---->
+            <!---->
+          </button></div>
+        <div class="ms-4"><label for="v-0-0:3" class="block font-medium text-[var(--ui-text)]">Option 3</label>
+          <!--v-if-->
+        </div>
       </div>
     </div>
   </fieldset>
@@ -729,33 +770,111 @@ 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" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0-0" class="relative" tabindex="0">
-  <fieldset class="flex flex-col gap-1">
+  <fieldset class="gap-1">
     <!--v-if-->
-    <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:Option 1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="Option 1" value="Option 1">
-          <!---->
-          <!---->
-        </button></div>
-      <div class="ms-2"><label for="v-0-0:Option 1" class="block font-medium text-[var(--ui-text)]">Option 1</label>
-        <!--v-if-->
+    <div class="flex flex-col">
+      <div class="flex items-start text-sm" data-checked="false">
+        <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:Option 1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="Option 1" value="Option 1">
+            <!---->
+            <!---->
+          </button></div>
+        <div class="ms-2"><label for="v-0-0:Option 1" class="block font-medium text-[var(--ui-text)]">Option 1</label>
+          <!--v-if-->
+        </div>
+      </div>
+      <div class="flex items-start text-sm" data-checked="false">
+        <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:Option 2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="Option 2" value="Option 2">
+            <!---->
+            <!---->
+          </button></div>
+        <div class="ms-2"><label for="v-0-0:Option 2" class="block font-medium text-[var(--ui-text)]">Option 2</label>
+          <!--v-if-->
+        </div>
+      </div>
+      <div class="flex items-start text-sm" data-checked="false">
+        <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:Option 3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="Option 3" value="Option 3">
+            <!---->
+            <!---->
+          </button></div>
+        <div class="ms-2"><label for="v-0-0:Option 3" class="block font-medium text-[var(--ui-text)]">Option 3</label>
+          <!--v-if-->
+        </div>
       </div>
     </div>
-    <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:Option 2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="Option 2" value="Option 2">
-          <!---->
-          <!---->
-        </button></div>
-      <div class="ms-2"><label for="v-0-0:Option 2" class="block font-medium text-[var(--ui-text)]">Option 2</label>
-        <!--v-if-->
+  </fieldset>
+  <!---->
+</div>"
+`;
+
+exports[`RadioGroup > renders with variant card correctly 1`] = `
+"<div role="radiogroup" aria-orientation="vertical" aria-required="false" dir="ltr" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0-0" class="relative" tabindex="0">
+  <fieldset class="gap-1">
+    <!--v-if-->
+    <div class="flex flex-col gap-2.5">
+      <div class="flex flex-row-reverse items-center justify-between border-2 border-[var(--ui-border-muted)] rounded-lg text-sm p-3.5 data-[checked=true]:border-[var(--ui-primary)]" data-checked="false">
+        <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] ml-4 size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="1" value="1">
+            <!---->
+            <!---->
+          </button></div>
+        <div class="ms-2"><label for="v-0-0:1" class="block font-medium text-[var(--ui-text)]">Option 1</label>
+          <!--v-if-->
+        </div>
+      </div>
+      <div class="flex flex-row-reverse items-center justify-between border-2 border-[var(--ui-border-muted)] rounded-lg text-sm p-3.5 data-[checked=true]:border-[var(--ui-primary)]" data-checked="false">
+        <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] ml-4 size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="2" value="2">
+            <!---->
+            <!---->
+          </button></div>
+        <div class="ms-2"><label for="v-0-0:2" class="block font-medium text-[var(--ui-text)]">Option 2</label>
+          <!--v-if-->
+        </div>
+      </div>
+      <div class="flex flex-row-reverse items-center justify-between border-2 border-[var(--ui-border-muted)] rounded-lg text-sm p-3.5 data-[checked=true]:border-[var(--ui-primary)]" data-checked="false">
+        <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] ml-4 size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="3" value="3">
+            <!---->
+            <!---->
+          </button></div>
+        <div class="ms-2"><label for="v-0-0:3" class="block font-medium text-[var(--ui-text)]">Option 3</label>
+          <!--v-if-->
+        </div>
       </div>
     </div>
-    <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:Option 3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="Option 3" value="Option 3">
-          <!---->
-          <!---->
-        </button></div>
-      <div class="ms-2"><label for="v-0-0:Option 3" class="block font-medium text-[var(--ui-text)]">Option 3</label>
-        <!--v-if-->
+  </fieldset>
+  <!---->
+</div>"
+`;
+
+exports[`RadioGroup > renders with variant table correctly 1`] = `
+"<div role="radiogroup" aria-orientation="vertical" aria-required="false" dir="ltr" data-orientation="vertical" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0-0" class="relative" tabindex="0">
+  <fieldset class="gap-1">
+    <!--v-if-->
+    <div class="flex flex-col gap-0">
+      <div class="flex items-start border-[var(--ui-border-muted)] text-sm p-3.5 first:rounded-t-lg last:rounded-b-lg not-first:not-last:border-y-2 first:border-t-2 border-x-2 last:border-b-2 data-[checked=true]:bg-[var(--ui-primary)]/20 data-[checked=true]:border-[var(--ui-primary)]/20" data-checked="false">
+        <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="1" value="1">
+            <!---->
+            <!---->
+          </button></div>
+        <div class="ms-2"><label for="v-0-0:1" class="block font-medium text-[var(--ui-text)]">Option 1</label>
+          <!--v-if-->
+        </div>
+      </div>
+      <div class="flex items-start border-[var(--ui-border-muted)] text-sm p-3.5 first:rounded-t-lg last:rounded-b-lg not-first:not-last:border-y-2 first:border-t-2 border-x-2 last:border-b-2 data-[checked=true]:bg-[var(--ui-primary)]/20 data-[checked=true]:border-[var(--ui-primary)]/20" data-checked="false">
+        <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="2" value="2">
+            <!---->
+            <!---->
+          </button></div>
+        <div class="ms-2"><label for="v-0-0:2" class="block font-medium text-[var(--ui-text)]">Option 2</label>
+          <!--v-if-->
+        </div>
+      </div>
+      <div class="flex items-start border-[var(--ui-border-muted)] text-sm p-3.5 first:rounded-t-lg last:rounded-b-lg not-first:not-last:border-y-2 first:border-t-2 border-x-2 last:border-b-2 data-[checked=true]:bg-[var(--ui-primary)]/20 data-[checked=true]:border-[var(--ui-primary)]/20" data-checked="false">
+        <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-[var(--ui-border-accented)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" tabindex="-1" data-orientation="vertical" data-active="false" data-reka-collection-item="" id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" aria-label="3" value="3">
+            <!---->
+            <!---->
+          </button></div>
+        <div class="ms-2"><label for="v-0-0:3" class="block font-medium text-[var(--ui-text)]">Option 3</label>
+          <!--v-if-->
+        </div>
       </div>
     </div>
   </fieldset>