From 84847965afe779a63f0e12f9f841cb383ad0b023 Mon Sep 17 00:00:00 2001
From: Romain Hamel <rom.hml@gmail.com>
Date: Mon, 15 Apr 2024 13:37:18 +0200
Subject: [PATCH] chore(Checkbox/Switch): change model binding (#58)

Co-authored-by: Benjamin Canac <canacb1@gmail.com>
---
 playground/components/FormElementsExample.vue |   2 +-
 playground/pages/checkbox.vue                 |   9 +-
 playground/pages/switch.vue                   |   9 +-
 src/runtime/components/Checkbox.vue           |  46 +-
 src/runtime/components/RadioGroup.vue         |   4 +-
 src/runtime/components/Switch.vue             |  25 +-
 test/components/Checkbox.spec.ts              |  23 +-
 test/components/Input.spec.ts                 |   1 +
 test/components/RadioGroup.spec.ts            |   9 +-
 test/components/Switch.spec.ts                |  25 +-
 .../__snapshots__/Checkbox.spec.ts.snap       | 155 ++-
 .../__snapshots__/Input.spec.ts.snap          |   7 +
 .../__snapshots__/RadioGroup.spec.ts.snap     | 891 ++++++++++--------
 .../__snapshots__/Switch.spec.ts.snap         | 214 ++++-
 .../__snapshots__/Toast.spec.ts.snap          |  48 -
 15 files changed, 903 insertions(+), 565 deletions(-)

diff --git a/playground/components/FormElementsExample.vue b/playground/components/FormElementsExample.vue
index 209b9803..e3fd8d40 100644
--- a/playground/components/FormElementsExample.vue
+++ b/playground/components/FormElementsExample.vue
@@ -67,7 +67,7 @@ function onSubmit(event: FormSubmitEvent<Schema>) {
     </UFormField>
 
     <UFormField name="switch">
-      <USwitch v-model:checked="state.switch" />
+      <USwitch v-model="state.switch" />
     </UFormField>
 
     <div class="flex gap-2">
diff --git a/playground/pages/checkbox.vue b/playground/pages/checkbox.vue
index 7e4f279d..b20c9218 100644
--- a/playground/pages/checkbox.vue
+++ b/playground/pages/checkbox.vue
@@ -2,15 +2,16 @@
 import theme from '#build/ui/checkbox'
 
 const sizes = Object.keys(theme.variants.size)
+
+const checked = ref(false)
 </script>
 
 <template>
   <div class="flex flex-col items-center gap-4">
-    <div class="flex flex-col gap-4 ml-[-272px]">
-      <UCheckbox label="Normal" />
-      <UCheckbox label="Checked" :model-value="true" />
+    <div class="flex flex-col gap-4 ml-[-286px]">
+      <UCheckbox v-model="checked" label="Model" />
+      <UCheckbox label="Default value" :default-value="true" />
       <UCheckbox label="Indeterminate" indeterminate />
-      <UCheckbox label="Default checked" default-checked />
       <UCheckbox label="Required" required />
       <UCheckbox label="Disabled" disabled />
       <UCheckbox label="Custom icon" color="red" icon="i-heroicons-heart-solid" :model-value="true" />
diff --git a/playground/pages/switch.vue b/playground/pages/switch.vue
index 3ea9be0c..c7f74581 100644
--- a/playground/pages/switch.vue
+++ b/playground/pages/switch.vue
@@ -2,14 +2,15 @@
 import theme from '#build/ui/switch'
 
 const sizes = Object.keys(theme.variants.size)
+
+const checked = ref(false)
 </script>
 
 <template>
   <div class="flex flex-col items-center gap-4">
-    <div class="flex flex-col gap-4 ml-[-348px]">
-      <USwitch label="Normal" />
-      <USwitch label="Checked" :checked="true" />
-      <USwitch label="Default checked" default-checked />
+    <div class="flex flex-col gap-4 ml-[-369px]">
+      <USwitch v-model="checked" label="Model" />
+      <USwitch label="Default value" :default-value="true" />
       <USwitch label="Required" required />
       <USwitch label="Disabled" disabled />
     </div>
diff --git a/src/runtime/components/Checkbox.vue b/src/runtime/components/Checkbox.vue
index 7a307d1b..a781c58b 100644
--- a/src/runtime/components/Checkbox.vue
+++ b/src/runtime/components/Checkbox.vue
@@ -1,6 +1,6 @@
 <script lang="ts">
 import { tv, type VariantProps } from 'tailwind-variants'
-import type { CheckboxRootProps, CheckboxRootEmits } from 'radix-vue'
+import type { CheckboxRootProps } from 'radix-vue'
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/checkbox'
@@ -12,22 +12,19 @@ const checkbox = tv({ extend: tv(theme), ...(appConfig.ui?.checkbox || {}) })
 
 type CheckboxVariants = VariantProps<typeof checkbox>
 
-export interface CheckboxProps extends Omit<CheckboxRootProps, 'asChild'> {
-  id?: string
-  name?: string
-  description?: string
+export interface CheckboxProps extends Omit<CheckboxRootProps, 'asChild' | 'checked' | 'defaultChecked'> {
   label?: string
+  description?: string
   color?: CheckboxVariants['color']
   size?: CheckboxVariants['size']
   icon?: IconProps['name']
   indeterminateIcon?: IconProps['name']
   indeterminate?: boolean
+  defaultValue?: boolean
   class?: any
   ui?: Partial<typeof checkbox.slots>
 }
 
-export interface CheckboxEmits extends CheckboxRootEmits {}
-
 export interface CheckboxSlots {
   label(props: { label?: string }): any
   description(props: { description?: string }): any
@@ -36,26 +33,20 @@ export interface CheckboxSlots {
 
 <script setup lang="ts">
 import { computed } from 'vue'
-import { CheckboxRoot, CheckboxIndicator, Label, useForwardPropsEmits } from 'radix-vue'
+import { CheckboxRoot, CheckboxIndicator, Label, useForwardProps } from 'radix-vue'
 import { reactivePick } from '@vueuse/core'
 import { useId, useAppConfig, useFormField } from '#imports'
 
 const props = defineProps<CheckboxProps>()
-const emits = defineEmits<CheckboxEmits>()
 defineSlots<CheckboxSlots>()
 
-const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'defaultChecked', 'disabled', 'required', 'name'), emits)
+const rootProps = useForwardProps(reactivePick(props, 'as', 'required', 'value'))
 
 const appConfig = useAppConfig()
 const { inputId: _inputId, emitFormChange, size, color, name, disabled } = useFormField<CheckboxProps>(props)
 const inputId = _inputId.value ?? useId()
 
-const modelValue = defineModel<boolean | undefined>({
-  default: undefined,
-  set(value) {
-    return value
-  }
-})
+const modelValue = defineModel<boolean | undefined>({ default: undefined })
 
 const indeterminate = computed(() => (modelValue.value === undefined && props.indeterminate))
 
@@ -68,21 +59,21 @@ const checked = computed({
   }
 })
 
+const ui = computed(() => tv({ extend: checkbox, slots: props.ui })({
+  size: size.value,
+  color: color.value,
+  required: props.required,
+  disabled: disabled.value,
+  checked: modelValue.value ?? props.defaultValue,
+  indeterminate: indeterminate.value
+}))
+
 // FIXME: I think there's a race condition between this and the v-model event.
 // This must be triggered after the value updates, otherwise the form validates
 // the previous value.
 function onChecked() {
   emitFormChange()
 }
-
-const ui = computed(() => tv({ extend: checkbox, slots: props.ui })({
-  size: size.value,
-  color: color.value,
-  required: props.required,
-  disabled: disabled.value,
-  checked: modelValue.value ?? props.defaultChecked,
-  indeterminate: indeterminate.value
-}))
 </script>
 
 <template>
@@ -91,7 +82,10 @@ const ui = computed(() => tv({ extend: checkbox, slots: props.ui })({
       <CheckboxRoot
         :id="inputId"
         v-model:checked="checked"
-        v-bind="{ ...rootProps, name, disabled }"
+        :default-checked="defaultValue"
+        v-bind="rootProps"
+        :name="name"
+        :disabled="disabled"
         :class="ui.base()"
         @update:checked="onChecked"
       >
diff --git a/src/runtime/components/RadioGroup.vue b/src/runtime/components/RadioGroup.vue
index f659223e..9ee6d390 100644
--- a/src/runtime/components/RadioGroup.vue
+++ b/src/runtime/components/RadioGroup.vue
@@ -18,10 +18,8 @@ export type RadioGroupOption<T> = {
 }
 
 export interface RadioGroupProps<T> extends Omit<RadioGroupRootProps, 'asChild' | 'dir'> {
-  name?: string
   legend?: string
   options?: string[] | RadioGroupOption<T>[]
-  disabled?: boolean
   class?: any
   size?: RadioGroupVariants['size']
   color?: RadioGroupVariants['color']
@@ -49,7 +47,7 @@ const props = defineProps<RadioGroupProps<T>>()
 const emits = defineEmits<RadioGroupEmits>()
 defineSlots<RadioGroupSlots<T>>()
 
-const rootProps = useForwardPropsEmits(reactivePick(props, 'defaultValue', 'orientation', 'loop', 'name', 'required'), emits)
+const rootProps = useForwardPropsEmits(reactivePick(props, 'defaultValue', 'orientation', 'loop', 'required'), emits)
 
 const { emitFormChange, color, name, size, inputId: _inputId, disabled } = useFormField<RadioGroupProps<T>>(props)
 const inputId = _inputId.value ?? useId()
diff --git a/src/runtime/components/Switch.vue b/src/runtime/components/Switch.vue
index 974a556d..1ae56712 100644
--- a/src/runtime/components/Switch.vue
+++ b/src/runtime/components/Switch.vue
@@ -1,6 +1,6 @@
 <script lang="ts">
 import { tv, type VariantProps } from 'tailwind-variants'
-import type { SwitchRootProps, SwitchRootEmits } from 'radix-vue'
+import type { SwitchRootProps } from 'radix-vue'
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/switch'
@@ -12,9 +12,7 @@ const switchTv = tv({ extend: tv(theme), ...(appConfig.ui?.switch || {}) })
 
 type SwitchVariants = VariantProps<typeof switchTv>
 
-export interface SwitchProps extends Omit<SwitchRootProps, 'asChild'> {
-  id?: string
-  name?: string
+export interface SwitchProps extends Omit<SwitchRootProps, 'asChild' | 'checked' | 'defaultChecked'> {
   color?: SwitchVariants['color']
   size?: SwitchVariants['size']
   loading?: boolean
@@ -23,36 +21,37 @@ export interface SwitchProps extends Omit<SwitchRootProps, 'asChild'> {
   uncheckedIcon?: IconProps['name']
   label?: string
   description?: string
+  defaultValue?: boolean
   class?: any
   ui?: Partial<typeof switchTv.slots>
 }
 
-export interface CheckboxSlots {
+export interface SwitchSlots {
   label(props: { label?: string }): any
   description(props: { description?: string }): any
 }
-
-export interface SwitchEmits extends SwitchRootEmits {}
 </script>
 
 <script setup lang="ts">
 import { computed } from 'vue'
-import { SwitchRoot, SwitchThumb, useForwardPropsEmits, Label } from 'radix-vue'
+import { SwitchRoot, SwitchThumb, useForwardProps, Label } from 'radix-vue'
 import { reactivePick } from '@vueuse/core'
 import { useId, useAppConfig, useFormField } from '#imports'
 
 const props = defineProps<SwitchProps>()
-const emits = defineEmits<SwitchEmits>()
+defineSlots<SwitchSlots>()
 
 const appConfig = useAppConfig()
-const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'defaultChecked', 'checked', 'required', 'value'), emits)
+const rootProps = useForwardProps(reactivePick(props, 'as', 'required', 'value'))
+
+const modelValue = defineModel<boolean | undefined>({ default: undefined })
 
 const { inputId: _inputId, emitFormChange, size, color, name, disabled } = useFormField<SwitchProps>(props)
 const inputId = _inputId.value ?? useId()
 
 const ui = computed(() => tv({ extend: switchTv, slots: props.ui })({
-  color: color.value,
   size: size.value,
+  color: color.value,
   required: props.required,
   loading: props.loading,
   disabled: disabled.value || props.loading
@@ -71,9 +70,11 @@ async function onChecked() {
     <div :class="ui.container()">
       <SwitchRoot
         :id="inputId"
+        v-model:checked="modelValue"
+        :default-checked="defaultValue"
+        v-bind="rootProps"
         :name="name"
         :disabled="disabled || loading"
-        v-bind="rootProps"
         :class="ui.base()"
         @update:checked="onChecked"
       >
diff --git a/test/components/Checkbox.spec.ts b/test/components/Checkbox.spec.ts
index 2f0d6f06..9055526c 100644
--- a/test/components/Checkbox.spec.ts
+++ b/test/components/Checkbox.spec.ts
@@ -6,23 +6,28 @@ import ComponentRender from '../component-render'
 describe('Checkbox', () => {
   it.each([
     ['basic case', {}],
-    ['with label', { props: { label: 'Label' } }],
-    ['with slot', { slots: { default: () => 'Label slot' } }],
-    ['with slot label', { slots: { label: () => 'Label slot' } }],
-    ['with custom id', { props: { id: 'custom-id' } }],
-    ['with custom value', { props: { value: 'custom-value' } }],
-    ['with custom name', { props: { name: 'custom-name' } }],
+    ['with class', { props: { class: 'inline-flex' } }],
+    ['with ui', { props: { ui: { wrapper: 'ms-4' } } }],
+    ['with defaultValue', { props: { defaultValue: true } }],
+    ['with id', { props: { id: 'custom-id' } }],
+    ['with name', { props: { name: 'custom-name' } }],
+    ['with value', { props: { value: 'custom-value' } }],
     ['with disabled', { props: { disabled: true } }],
+    ['with icon', { props: { icon: 'i-heroicons-heart' } }],
     ['with indeterminate', { props: { indeterminate: true } }],
-    ['with help', { props: { label: 'Label', help: 'Help' } }],
+    ['with indeterminateIcon', { props: { indeterminate: true, icon: 'i-heroicons-trash' } }],
+    ['with label', { props: { label: 'Label' } }],
     ['with required', { props: { label: 'Label', required: true } }],
-    ['with custom color', { props: { label: 'Label', color: 'red' as const } }],
+    ['with description', { props: { label: 'Label', description: 'Description' } }],
+    ['with color', { props: { label: 'Label', color: 'red' as const } }],
     ['with size 2xs', { props: { size: '2xs' as const } }],
     ['with size xs', { props: { size: 'xs' as const } }],
     ['with size sm', { props: { size: 'sm' as const } }],
     ['with size md', { props: { size: 'md' as const } }],
     ['with size lg', { props: { size: 'lg' as const } }],
-    ['with size xl', { props: { size: 'xl' as const } }]
+    ['with size xl', { props: { size: 'xl' as const } }],
+    ['with label slot', { slots: { label: () => 'Label slot' } }],
+    ['with description slot', { slots: { label: () => 'Description slot' } }]
   ])('renders %s correctly', async (nameOrHtml: string, options: { props?: CheckboxProps, slots?: any }) => {
     const html = await ComponentRender(nameOrHtml, defu(options, { props: { id: 42 } }), Checkbox)
     expect(html).toMatchSnapshot()
diff --git a/test/components/Input.spec.ts b/test/components/Input.spec.ts
index ca9b7e6f..975ba857 100644
--- a/test/components/Input.spec.ts
+++ b/test/components/Input.spec.ts
@@ -6,6 +6,7 @@ import ComponentRender from '../component-render'
 describe('Input', () => {
   it.each([
     ['basic case', {}],
+    ['with id', { props: { name: 'id' } }],
     ['with name', { props: { name: 'username' } }],
     ['with type', { props: { type: 'password' } }],
     ['with placeholder', { props: { placeholder: 'Enter your username' } }],
diff --git a/test/components/RadioGroup.spec.ts b/test/components/RadioGroup.spec.ts
index 799d5133..afc9e337 100644
--- a/test/components/RadioGroup.spec.ts
+++ b/test/components/RadioGroup.spec.ts
@@ -12,19 +12,22 @@ const defaultOptions = [
 describe('RadioGroup', () => {
   it.each([
     ['basic case', {}],
+    ['with class', { props: { class: 'absolute' } }],
+    ['with ui', { props: { ui: { wrapper: 'ms-4' } } }],
     ['with default value', { props: { defaultValue: '1' } }],
     ['with disabled', { props: { disabled: true } }],
     ['with description', { props: { options: defaultOptions.map((opt, count) => ({ ...opt, description: `Description ${count}` })) } }],
     ['with required', { props: { legend: 'Legend', required: true } }],
-    ['with custom color', { props: { color: 'red' as const } }],
+    ['with color', { props: { color: 'red' as const } }],
     ['with size 2xs', { props: { size: '2xs' as const } }],
     ['with size xs', { props: { size: 'xs' as const } }],
     ['with size sm', { props: { size: 'sm' as const } }],
     ['with size md', { props: { size: 'md' as const } }],
     ['with size lg', { props: { size: 'lg' as const } }],
     ['with size xl', { props: { size: 'xl' as const } }],
-    ['with class', { props: { class: 'bg-red-500' } }],
-    ['with ui', { props: { ui: {} } }]
+    ['with legend slot', { slots: { label: () => 'Legend slot' } }],
+    ['with label slot', { slots: { label: () => 'Label slot' } }],
+    ['with description slot', { slots: { label: () => 'Description slot' } }]
   ])('renders %s correctly', async (nameOrHtml: string, options: { props?: RadioGroupProps<any>, slots?: any }) => {
     const html = await ComponentRender(nameOrHtml, defu(options, { props: { options: defaultOptions } }), RadioGroup)
     expect(html).toMatchSnapshot()
diff --git a/test/components/Switch.spec.ts b/test/components/Switch.spec.ts
index 2b0d2a88..108dffae 100644
--- a/test/components/Switch.spec.ts
+++ b/test/components/Switch.spec.ts
@@ -5,26 +5,29 @@ import ComponentRender from '../component-render'
 describe('Switch', () => {
   it.each([
     ['basic case', {}],
-    ['with class', { props: { class: '' } }],
-    ['with ui', { props: { ui: {} } }],
+    ['with class', { props: { class: 'inline-flex' } }],
+    ['with ui', { props: { ui: { wrapper: 'ms-4' } } }],
     ['with as', { props: { as: 'section' } }],
-    ['with checked', { props: { checked: true } }],
-    ['with defaultChecked', { props: { defaultChecked: true } }],
+    ['with defaultValue', { props: { defaultValue: true } }],
+    ['with id', { props: { id: 'custom-id' } }],
+    ['with name', { props: { name: 'custom-name' } }],
+    ['with value', { props: { value: 'custom-value' } }],
     ['with disabled', { props: { disabled: true } }],
-    ['with id', { props: { id: 'test' } }],
-    ['with name', { props: { name: 'test' } }],
-    ['with required', { props: { required: true } }],
-    ['with value', { props: { value: 'switch' } }],
-    ['with checkedIcon', { props: { checkedIcon: 'i-heroicons-check-20-solid' } }],
-    ['with uncheckedIcon', { props: { checkedIcon: 'i-heroicons-x-mark-20-solid' } }],
+    ['with checkedIcon', { props: { checkedIcon: 'i-heroicons-check-20-solid', defaultValue: true } }],
+    ['with uncheckedIcon', { props: { uncheckedIcon: 'i-heroicons-x-mark-20-solid' } }],
     ['with loading', { props: { loading: true } }],
     ['with loadingIcon', { props: { loading: true, loadingIcon: 'i-heroicons-sparkles' } }],
+    ['with label', { props: { label: 'Label' } }],
+    ['with required', { props: { label: 'Label', required: true } }],
+    ['with description', { props: { label: 'Label', description: 'Description' } }],
     ['with size 2xs', { props: { size: '2xs' as const } }],
     ['with size xs', { props: { size: 'xs' as const } }],
     ['with size sm', { props: { size: 'sm' as const } }],
     ['with size md', { props: { size: 'md' as const } }],
     ['with size lg', { props: { size: 'lg' as const } }],
-    ['with size xl', { props: { size: 'xl' as const } }]
+    ['with size xl', { props: { size: 'xl' as const } }],
+    ['with label slot', { slots: { label: () => 'Label slot' } }],
+    ['with description slot', { slots: { label: () => 'Description slot' } }]
   ])('renders %s correctly', async (nameOrHtml: string, options: { props?: SwitchProps, slots?: any }) => {
     const html = await ComponentRender(nameOrHtml, options, Switch)
     expect(html).toMatchSnapshot()
diff --git a/test/components/__snapshots__/Checkbox.spec.ts.snap b/test/components/__snapshots__/Checkbox.spec.ts.snap
index f4767a2d..e2edf365 100644
--- a/test/components/__snapshots__/Checkbox.spec.ts.snap
+++ b/test/components/__snapshots__/Checkbox.spec.ts.snap
@@ -11,6 +11,30 @@ exports[`Checkbox > renders basic case correctly 1`] = `
 </div>"
 `;
 
+exports[`Checkbox > renders with class correctly 1`] = `
+"<div class="relative items-start inline-flex">
+  <div class="flex items-center h-5"><button class="shrink-0 text-white dark:text-gray-900 rounded ring ring-inset ring-gray-300 dark:ring-gray-700 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" id="42" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
+      <!---->
+    </button>
+    <!---->
+  </div>
+  <!--v-if-->
+</div>"
+`;
+
+exports[`Checkbox > renders with color correctly 1`] = `
+"<div class="relative flex items-start">
+  <div class="flex items-center h-5"><button class="shrink-0 text-white dark:text-gray-900 rounded ring ring-inset ring-gray-300 dark:ring-gray-700 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-500 dark:focus-visible:outline-red-400 size-4" id="42" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
+      <!---->
+    </button>
+    <!---->
+  </div>
+  <div class="ms-2 text-sm"><label for="42" class="block font-medium text-gray-700 dark:text-gray-200">Label</label>
+    <!--v-if-->
+  </div>
+</div>"
+`;
+
 exports[`Checkbox > renders with custom color correctly 1`] = `
 "<div class="relative flex items-start">
   <div class="flex items-center h-5"><button class="shrink-0 text-white dark:text-gray-900 rounded ring ring-inset ring-gray-300 dark:ring-gray-700 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-500 dark:focus-visible:outline-red-400 size-4" id="42" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
@@ -18,7 +42,7 @@ exports[`Checkbox > renders with custom color correctly 1`] = `
     </button>
     <!---->
   </div>
-  <div class="ms-2 text-sm"><label for="42" class="font-medium text-gray-700 dark:text-gray-200">Label</label>
+  <div class="ms-2 text-sm"><label for="42" class="block font-medium text-gray-700 dark:text-gray-200">Label</label>
     <!--v-if-->
   </div>
 </div>"
@@ -57,6 +81,41 @@ exports[`Checkbox > renders with custom value correctly 1`] = `
 </div>"
 `;
 
+exports[`Checkbox > renders with defaultValue correctly 1`] = `
+"<div class="relative flex items-start">
+  <div class="flex items-center h-5"><button class="shrink-0 text-white dark:text-gray-900 rounded focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4 ring-2 ring-inset ring-primary-500 dark:ring-primary-400 bg-primary-500 dark:bg-primary-400" id="42" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked"><span data-state="checked" style="pointer-events: none;" class="flex"><svg data-v-9533427c="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon size-full" width="1em" height="1em" viewBox="0 0 20 20"><path fill="currentColor" fill-rule="evenodd" d="M16.705 4.153a.75.75 0 0 1 .142 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893l7.48-9.817a.75.75 0 0 1 1.05-.143" clip-rule="evenodd"></path></svg></span></button>
+    <!---->
+  </div>
+  <!--v-if-->
+</div>"
+`;
+
+exports[`Checkbox > renders with description correctly 1`] = `
+"<div class="relative flex items-start">
+  <div class="flex items-center h-5"><button class="shrink-0 text-white dark:text-gray-900 rounded ring ring-inset ring-gray-300 dark:ring-gray-700 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" id="42" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
+      <!---->
+    </button>
+    <!---->
+  </div>
+  <div class="ms-2 text-sm"><label for="42" class="block font-medium text-gray-700 dark:text-gray-200">Label</label>
+    <p class="text-gray-500 dark:text-gray-400">Description</p>
+  </div>
+</div>"
+`;
+
+exports[`Checkbox > renders with description slot correctly 1`] = `
+"<div class="relative flex items-start">
+  <div class="flex items-center h-5"><button class="shrink-0 text-white dark:text-gray-900 rounded ring ring-inset ring-gray-300 dark:ring-gray-700 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" id="42" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
+      <!---->
+    </button>
+    <!---->
+  </div>
+  <div class="ms-2 text-sm"><label for="42" class="block font-medium text-gray-700 dark:text-gray-200">Description slot</label>
+    <!--v-if-->
+  </div>
+</div>"
+`;
+
 exports[`Checkbox > renders with disabled correctly 1`] = `
 "<div class="relative flex items-start">
   <div class="flex items-center h-5"><button class="shrink-0 text-white dark:text-gray-900 rounded ring ring-inset ring-gray-300 dark:ring-gray-700 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4 cursor-not-allowed opacity-75" id="42" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-disabled="" disabled="">
@@ -75,12 +134,34 @@ exports[`Checkbox > renders with help correctly 1`] = `
     </button>
     <!---->
   </div>
-  <div class="ms-2 text-sm"><label for="42" class="font-medium text-gray-700 dark:text-gray-200">Label</label>
+  <div class="ms-2 text-sm"><label for="42" class="block font-medium text-gray-700 dark:text-gray-200">Label</label>
     <!--v-if-->
   </div>
 </div>"
 `;
 
+exports[`Checkbox > renders with icon correctly 1`] = `
+"<div class="relative flex items-start">
+  <div class="flex items-center h-5"><button class="shrink-0 text-white dark:text-gray-900 rounded ring ring-inset ring-gray-300 dark:ring-gray-700 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" id="42" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
+      <!---->
+    </button>
+    <!---->
+  </div>
+  <!--v-if-->
+</div>"
+`;
+
+exports[`Checkbox > renders with id correctly 1`] = `
+"<div class="relative flex items-start">
+  <div class="flex items-center h-5"><button class="shrink-0 text-white dark:text-gray-900 rounded ring ring-inset ring-gray-300 dark:ring-gray-700 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" id="custom-id" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
+      <!---->
+    </button>
+    <!---->
+  </div>
+  <!--v-if-->
+</div>"
+`;
+
 exports[`Checkbox > renders with indeterminate correctly 1`] = `
 "<div class="relative flex items-start">
   <div class="flex items-center h-5"><button class="shrink-0 text-white dark:text-gray-900 rounded focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4 ring-2 ring-inset ring-primary-500 dark:ring-primary-400 bg-primary-500 dark:bg-primary-400" id="42" role="checkbox" type="button" aria-checked="mixed" aria-required="false" data-state="indeterminate"><span data-state="indeterminate" style="pointer-events: none;" class="flex"><svg data-v-9533427c="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon size-full" width="1em" height="1em" viewBox="0 0 20 20"><path fill="currentColor" fill-rule="evenodd" d="M4 10a.75.75 0 0 1 .75-.75h10.5a.75.75 0 0 1 0 1.5H4.75A.75.75 0 0 1 4 10" clip-rule="evenodd"></path></svg></span></button>
@@ -90,6 +171,15 @@ exports[`Checkbox > renders with indeterminate correctly 1`] = `
 </div>"
 `;
 
+exports[`Checkbox > renders with indeterminateIcon correctly 1`] = `
+"<div class="relative flex items-start">
+  <div class="flex items-center h-5"><button class="shrink-0 text-white dark:text-gray-900 rounded focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4 ring-2 ring-inset ring-primary-500 dark:ring-primary-400 bg-primary-500 dark:bg-primary-400" id="42" role="checkbox" type="button" aria-checked="mixed" aria-required="false" data-state="indeterminate"><span data-state="indeterminate" style="pointer-events: none;" class="flex"><svg data-v-9533427c="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon size-full" width="1em" height="1em" viewBox="0 0 20 20"><path fill="currentColor" fill-rule="evenodd" d="M4 10a.75.75 0 0 1 .75-.75h10.5a.75.75 0 0 1 0 1.5H4.75A.75.75 0 0 1 4 10" clip-rule="evenodd"></path></svg></span></button>
+    <!---->
+  </div>
+  <!--v-if-->
+</div>"
+`;
+
 exports[`Checkbox > renders with label correctly 1`] = `
 "<div class="relative flex items-start">
   <div class="flex items-center h-5"><button class="shrink-0 text-white dark:text-gray-900 rounded ring ring-inset ring-gray-300 dark:ring-gray-700 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" id="42" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
@@ -97,12 +187,45 @@ exports[`Checkbox > renders with label correctly 1`] = `
     </button>
     <!---->
   </div>
-  <div class="ms-2 text-sm"><label for="42" class="font-medium text-gray-700 dark:text-gray-200">Label</label>
+  <div class="ms-2 text-sm"><label for="42" class="block font-medium text-gray-700 dark:text-gray-200">Label</label>
     <!--v-if-->
   </div>
 </div>"
 `;
 
+exports[`Checkbox > renders with label slot correctly 1`] = `
+"<div class="relative flex items-start">
+  <div class="flex items-center h-5"><button class="shrink-0 text-white dark:text-gray-900 rounded ring ring-inset ring-gray-300 dark:ring-gray-700 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" id="42" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
+      <!---->
+    </button>
+    <!---->
+  </div>
+  <div class="ms-2 text-sm"><label for="42" class="block font-medium text-gray-700 dark:text-gray-200">Label slot</label>
+    <!--v-if-->
+  </div>
+</div>"
+`;
+
+exports[`Checkbox > renders with modelValue correctly 1`] = `
+"<div class="relative flex items-start">
+  <div class="flex items-center h-5"><button class="shrink-0 text-white dark:text-gray-900 rounded focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4 ring-2 ring-inset ring-primary-500 dark:ring-primary-400 bg-primary-500 dark:bg-primary-400" id="42" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked"><span data-state="checked" style="pointer-events: none;" class="flex"><svg data-v-9533427c="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon size-full" width="1em" height="1em" viewBox="0 0 20 20"><path fill="currentColor" fill-rule="evenodd" d="M16.705 4.153a.75.75 0 0 1 .142 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893l7.48-9.817a.75.75 0 0 1 1.05-.143" clip-rule="evenodd"></path></svg></span></button>
+    <!---->
+  </div>
+  <!--v-if-->
+</div>"
+`;
+
+exports[`Checkbox > renders with name correctly 1`] = `
+"<div class="relative flex items-start">
+  <div class="flex items-center h-5"><button class="shrink-0 text-white dark:text-gray-900 rounded ring ring-inset ring-gray-300 dark:ring-gray-700 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" id="42" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
+      <!---->
+    </button>
+    <!---->
+  </div>
+  <!--v-if-->
+</div>"
+`;
+
 exports[`Checkbox > renders with required correctly 1`] = `
 "<div class="relative flex items-start">
   <div class="flex items-center h-5"><button class="shrink-0 text-white dark:text-gray-900 rounded ring ring-inset ring-gray-300 dark:ring-gray-700 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" id="42" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
@@ -110,7 +233,7 @@ exports[`Checkbox > renders with required correctly 1`] = `
     </button>
     <!---->
   </div>
-  <div class="ms-2 text-sm"><label for="42" class="font-medium text-gray-700 dark:text-gray-200 after:content-['*'] after:ms-0.5 after:text-red-500 dark:after:text-red-400">Label</label>
+  <div class="ms-2 text-sm"><label for="42" class="block font-medium text-gray-700 dark:text-gray-200 after:content-['*'] after:ms-0.5 after:text-red-500 dark:after:text-red-400">Label</label>
     <!--v-if-->
   </div>
 </div>"
@@ -200,8 +323,30 @@ exports[`Checkbox > renders with slot label correctly 1`] = `
     </button>
     <!---->
   </div>
-  <div class="ms-2 text-sm"><label for="42" class="font-medium text-gray-700 dark:text-gray-200">Label slot</label>
+  <div class="ms-2 text-sm"><label for="42" class="block font-medium text-gray-700 dark:text-gray-200">Label slot</label>
     <!--v-if-->
   </div>
 </div>"
 `;
+
+exports[`Checkbox > renders with ui correctly 1`] = `
+"<div class="relative flex items-start">
+  <div class="flex items-center h-5"><button class="shrink-0 text-white dark:text-gray-900 rounded ring ring-inset ring-gray-300 dark:ring-gray-700 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" id="42" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
+      <!---->
+    </button>
+    <!---->
+  </div>
+  <!--v-if-->
+</div>"
+`;
+
+exports[`Checkbox > renders with value correctly 1`] = `
+"<div class="relative flex items-start">
+  <div class="flex items-center h-5"><button class="shrink-0 text-white dark:text-gray-900 rounded ring ring-inset ring-gray-300 dark:ring-gray-700 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" id="42" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
+      <!---->
+    </button>
+    <!---->
+  </div>
+  <!--v-if-->
+</div>"
+`;
diff --git a/test/components/__snapshots__/Input.spec.ts.snap b/test/components/__snapshots__/Input.spec.ts.snap
index 69f9c9c5..661c4177 100644
--- a/test/components/__snapshots__/Input.spec.ts.snap
+++ b/test/components/__snapshots__/Input.spec.ts.snap
@@ -34,6 +34,13 @@ exports[`Input > renders with icon correctly 1`] = `
 </div>"
 `;
 
+exports[`Input > renders with id correctly 1`] = `
+"<div class="relative"><input type="text" name="id" class="relative block w-full disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none border-0 rounded-md placeholder-gray-400 dark:placeholder-gray-500 text-sm gap-x-1.5 px-2.5 py-1.5 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400">
+  <!--v-if-->
+  <!--v-if-->
+</div>"
+`;
+
 exports[`Input > renders with leading and icon correctly 1`] = `
 "<div class="relative"><input type="text" class="relative block w-full disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none border-0 rounded-md placeholder-gray-400 dark:placeholder-gray-500 text-sm gap-x-1.5 px-2.5 py-1.5 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400 pl-9"><span class="absolute inset-y-0 start-0 flex items-center px-2.5"><svg data-v-9533427c="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 text-gray-400 dark:text-gray-500 size-5" width="1em" height="1em" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m21 21l-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607"></path></svg></span>
   <!--v-if-->
diff --git a/test/components/__snapshots__/RadioGroup.spec.ts.snap b/test/components/__snapshots__/RadioGroup.spec.ts.snap
index fb839610..ea9b9449 100644
--- a/test/components/__snapshots__/RadioGroup.spec.ts.snap
+++ b/test/components/__snapshots__/RadioGroup.spec.ts.snap
@@ -36,83 +36,14 @@ exports[`RadioGroup > renders basic case correctly 1`] = `
 `;
 
 exports[`RadioGroup > renders with class correctly 1`] = `
-"<div role="radiogroup" required="false" aria-required="false" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" id="12" class="relative bg-red-500" tabindex="0">
+"<div role="radiogroup" required="false" aria-required="false" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" id="1" class="absolute" tabindex="0">
   <fieldset class="flex flex-col 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-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-active="false" id="12:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="1" aria-label="1">
+      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-active="false" id="1:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="1" aria-label="1">
           <!---->
           <!---->
         </button></div>
-      <div class="ms-2"><label for="12:1" class="block font-medium text-gray-700 dark:text-gray-200">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-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-active="false" id="12:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
-          <!---->
-          <!---->
-        </button></div>
-      <div class="ms-2"><label for="12:2" class="block font-medium text-gray-700 dark:text-gray-200">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-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-active="false" id="12:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
-          <!---->
-          <!---->
-        </button></div>
-      <div class="ms-2"><label for="12:3" class="block font-medium text-gray-700 dark:text-gray-200">Option 3</label>
-        <!--v-if-->
-      </div>
-    </div>
-  </fieldset>
-</div>"
-`;
-
-exports[`RadioGroup > renders with custom color correctly 1`] = `
-"<div role="radiogroup" required="false" aria-required="false" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" id="5" class="relative" tabindex="0">
-  <fieldset class="flex flex-col 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-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-500 dark:focus-visible:outline-red-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-active="false" id="5:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="1" aria-label="1">
-          <!---->
-          <!---->
-        </button></div>
-      <div class="ms-2"><label for="5:1" class="block font-medium text-gray-700 dark:text-gray-200">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-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-500 dark:focus-visible:outline-red-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-active="false" id="5:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
-          <!---->
-          <!---->
-        </button></div>
-      <div class="ms-2"><label for="5:2" class="block font-medium text-gray-700 dark:text-gray-200">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-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-500 dark:focus-visible:outline-red-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-active="false" id="5:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
-          <!---->
-          <!---->
-        </button></div>
-      <div class="ms-2"><label for="5:3" class="block font-medium text-gray-700 dark:text-gray-200">Option 3</label>
-        <!--v-if-->
-      </div>
-    </div>
-  </fieldset>
-</div>"
-`;
-
-exports[`RadioGroup > renders with default value correctly 1`] = `
-"<div role="radiogroup" required="false" aria-required="false" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" id="1" class="relative" tabindex="0">
-  <fieldset class="flex flex-col 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-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-active="true" id="1:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" value="1" aria-label="1"><span data-state="checked" class="flex items-center justify-center size-full rounded-full after:bg-white dark:after:bg-gray-900 after:rounded-full bg-primary-500 dark:bg-primary-400 after:size-1.5"></span>
-          <!---->
-        </button></div>
       <div class="ms-2"><label for="1:1" class="block font-medium text-gray-700 dark:text-gray-200">Option 1</label>
         <!--v-if-->
       </div>
@@ -139,319 +70,12 @@ exports[`RadioGroup > renders with default value correctly 1`] = `
 </div>"
 `;
 
-exports[`RadioGroup > renders with description correctly 1`] = `
-"<div role="radiogroup" required="false" aria-required="false" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" id="3" class="relative" tabindex="0">
-  <fieldset class="flex flex-col 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-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-active="false" id="3:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="1" aria-label="1">
-          <!---->
-          <!---->
-        </button></div>
-      <div class="ms-2"><label for="3:1" class="block font-medium text-gray-700 dark:text-gray-200">Option 1</label>
-        <p class="text-gray-500 dark:text-gray-400">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-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-active="false" id="3:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
-          <!---->
-          <!---->
-        </button></div>
-      <div class="ms-2"><label for="3:2" class="block font-medium text-gray-700 dark:text-gray-200">Option 2</label>
-        <p class="text-gray-500 dark:text-gray-400">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-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-active="false" id="3:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
-          <!---->
-          <!---->
-        </button></div>
-      <div class="ms-2"><label for="3:3" class="block font-medium text-gray-700 dark:text-gray-200">Option 3</label>
-        <p class="text-gray-500 dark:text-gray-400">Description 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-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-active="false" id="3:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="1" aria-label="1">
-          <!---->
-          <!---->
-        </button></div>
-      <div class="ms-2"><label for="3:1" class="block font-medium text-gray-700 dark:text-gray-200">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-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-active="false" id="3:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
-          <!---->
-          <!---->
-        </button></div>
-      <div class="ms-2"><label for="3:2" class="block font-medium text-gray-700 dark:text-gray-200">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-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-active="false" id="3:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
-          <!---->
-          <!---->
-        </button></div>
-      <div class="ms-2"><label for="3:3" class="block font-medium text-gray-700 dark:text-gray-200">Option 3</label>
-        <!--v-if-->
-      </div>
-    </div>
-  </fieldset>
-</div>"
-`;
-
-exports[`RadioGroup > renders with disabled correctly 1`] = `
-"<div role="radiogroup" data-disabled="" required="false" aria-required="false" dir="ltr" tabindex="-1" style="outline-color: none; outline-style: none; outline-width: initial;" id="2" class="relative">
-  <fieldset class="flex flex-col 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-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4 cursor-not-allowed opacity-75" data-radix-vue-collection-item="" tabindex="-1" data-active="false" data-disabled="true" id="2:1" role="radio" type="button" aria-checked="false" disabled="" data-state="unchecked" required="false" value="1" aria-label="1">
-          <!---->
-          <!---->
-        </button></div>
-      <div class="ms-2"><label for="2:1" class="block font-medium text-gray-700 dark:text-gray-200 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-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4 cursor-not-allowed opacity-75" data-radix-vue-collection-item="" tabindex="-1" data-active="false" data-disabled="true" id="2:2" role="radio" type="button" aria-checked="false" disabled="" data-state="unchecked" required="false" value="2" aria-label="2">
-          <!---->
-          <!---->
-        </button></div>
-      <div class="ms-2"><label for="2:2" class="block font-medium text-gray-700 dark:text-gray-200 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-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4 cursor-not-allowed opacity-75" data-radix-vue-collection-item="" tabindex="-1" data-active="false" data-disabled="true" id="2:3" role="radio" type="button" aria-checked="false" disabled="" data-state="unchecked" required="false" value="3" aria-label="3">
-          <!---->
-          <!---->
-        </button></div>
-      <div class="ms-2"><label for="2:3" class="block font-medium text-gray-700 dark:text-gray-200 cursor-not-allowed opacity-75">Option 3</label>
-        <!--v-if-->
-      </div>
-    </div>
-  </fieldset>
-</div>"
-`;
-
-exports[`RadioGroup > renders with required correctly 1`] = `
-"<div role="radiogroup" required="true" aria-required="true" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" id="4" class="relative" tabindex="0">
-  <fieldset class="flex flex-col gap-1">
-    <legend class="mb-1 block font-medium text-gray-700 dark:text-gray-200 after:content-['*'] after:ms-0.5 after:text-red-500 dark:after:text-red-400">Legend</legend>
-    <div class="flex items-start text-sm">
-      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-active="false" id="4:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="true" value="1" aria-label="1">
-          <!---->
-          <!---->
-        </button></div>
-      <div class="ms-2"><label for="4:1" class="block font-medium text-gray-700 dark:text-gray-200">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-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-active="false" id="4:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="true" value="2" aria-label="2">
-          <!---->
-          <!---->
-        </button></div>
-      <div class="ms-2"><label for="4:2" class="block font-medium text-gray-700 dark:text-gray-200">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-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-active="false" id="4:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="true" value="3" aria-label="3">
-          <!---->
-          <!---->
-        </button></div>
-      <div class="ms-2"><label for="4:3" class="block font-medium text-gray-700 dark:text-gray-200">Option 3</label>
-        <!--v-if-->
-      </div>
-    </div>
-  </fieldset>
-</div>"
-`;
-
-exports[`RadioGroup > renders with size 2xs correctly 1`] = `
-"<div role="radiogroup" required="false" aria-required="false" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" id="6" class="relative" tabindex="0">
-  <fieldset class="flex flex-col 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-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-3" data-radix-vue-collection-item="" tabindex="-1" data-active="false" id="6:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="1" aria-label="1">
-          <!---->
-          <!---->
-        </button></div>
-      <div class="ms-2"><label for="6:1" class="block font-medium text-gray-700 dark:text-gray-200">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-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-3" data-radix-vue-collection-item="" tabindex="-1" data-active="false" id="6:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
-          <!---->
-          <!---->
-        </button></div>
-      <div class="ms-2"><label for="6:2" class="block font-medium text-gray-700 dark:text-gray-200">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-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-3" data-radix-vue-collection-item="" tabindex="-1" data-active="false" id="6:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
-          <!---->
-          <!---->
-        </button></div>
-      <div class="ms-2"><label for="6:3" class="block font-medium text-gray-700 dark:text-gray-200">Option 3</label>
-        <!--v-if-->
-      </div>
-    </div>
-  </fieldset>
-</div>"
-`;
-
-exports[`RadioGroup > renders with size lg correctly 1`] = `
-"<div role="radiogroup" required="false" aria-required="false" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" id="10" class="relative" tabindex="0">
-  <fieldset class="flex flex-col 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-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-5" data-radix-vue-collection-item="" tabindex="-1" data-active="false" id="10:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="1" aria-label="1">
-          <!---->
-          <!---->
-        </button></div>
-      <div class="ms-2"><label for="10:1" class="block font-medium text-gray-700 dark:text-gray-200">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-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-5" data-radix-vue-collection-item="" tabindex="-1" data-active="false" id="10:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
-          <!---->
-          <!---->
-        </button></div>
-      <div class="ms-2"><label for="10:2" class="block font-medium text-gray-700 dark:text-gray-200">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-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-5" data-radix-vue-collection-item="" tabindex="-1" data-active="false" id="10:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
-          <!---->
-          <!---->
-        </button></div>
-      <div class="ms-2"><label for="10:3" class="block font-medium text-gray-700 dark:text-gray-200">Option 3</label>
-        <!--v-if-->
-      </div>
-    </div>
-  </fieldset>
-</div>"
-`;
-
-exports[`RadioGroup > renders with size md correctly 1`] = `
-"<div role="radiogroup" required="false" aria-required="false" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" id="9" class="relative" tabindex="0">
-  <fieldset class="flex flex-col 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-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-[18px]" data-radix-vue-collection-item="" tabindex="-1" data-active="false" id="9:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="1" aria-label="1">
-          <!---->
-          <!---->
-        </button></div>
-      <div class="ms-2"><label for="9:1" class="block font-medium text-gray-700 dark:text-gray-200">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-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-[18px]" data-radix-vue-collection-item="" tabindex="-1" data-active="false" id="9:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
-          <!---->
-          <!---->
-        </button></div>
-      <div class="ms-2"><label for="9:2" class="block font-medium text-gray-700 dark:text-gray-200">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-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-[18px]" data-radix-vue-collection-item="" tabindex="-1" data-active="false" id="9:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
-          <!---->
-          <!---->
-        </button></div>
-      <div class="ms-2"><label for="9:3" class="block font-medium text-gray-700 dark:text-gray-200">Option 3</label>
-        <!--v-if-->
-      </div>
-    </div>
-  </fieldset>
-</div>"
-`;
-
-exports[`RadioGroup > renders with size sm correctly 1`] = `
-"<div role="radiogroup" required="false" aria-required="false" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" id="8" class="relative" tabindex="0">
-  <fieldset class="flex flex-col 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-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-active="false" id="8:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="1" aria-label="1">
-          <!---->
-          <!---->
-        </button></div>
-      <div class="ms-2"><label for="8:1" class="block font-medium text-gray-700 dark:text-gray-200">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-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-active="false" id="8:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
-          <!---->
-          <!---->
-        </button></div>
-      <div class="ms-2"><label for="8:2" class="block font-medium text-gray-700 dark:text-gray-200">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-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-active="false" id="8:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
-          <!---->
-          <!---->
-        </button></div>
-      <div class="ms-2"><label for="8:3" class="block font-medium text-gray-700 dark:text-gray-200">Option 3</label>
-        <!--v-if-->
-      </div>
-    </div>
-  </fieldset>
-</div>"
-`;
-
-exports[`RadioGroup > renders with size xl correctly 1`] = `
-"<div role="radiogroup" required="false" aria-required="false" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" id="11" class="relative" tabindex="0">
-  <fieldset class="flex flex-col 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-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-[22px]" data-radix-vue-collection-item="" tabindex="-1" data-active="false" id="11:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="1" aria-label="1">
-          <!---->
-          <!---->
-        </button></div>
-      <div class="ms-2"><label for="11:1" class="block font-medium text-gray-700 dark:text-gray-200">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-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-[22px]" data-radix-vue-collection-item="" tabindex="-1" data-active="false" id="11:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
-          <!---->
-          <!---->
-        </button></div>
-      <div class="ms-2"><label for="11:2" class="block font-medium text-gray-700 dark:text-gray-200">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-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-[22px]" data-radix-vue-collection-item="" tabindex="-1" data-active="false" id="11:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
-          <!---->
-          <!---->
-        </button></div>
-      <div class="ms-2"><label for="11:3" class="block font-medium text-gray-700 dark:text-gray-200">Option 3</label>
-        <!--v-if-->
-      </div>
-    </div>
-  </fieldset>
-</div>"
-`;
-
-exports[`RadioGroup > renders with size xs correctly 1`] = `
+exports[`RadioGroup > renders with color correctly 1`] = `
 "<div role="radiogroup" required="false" aria-required="false" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" id="7" class="relative" tabindex="0">
-  <fieldset class="flex flex-col gap-0.5">
+  <fieldset class="flex flex-col gap-1">
     <!--v-if-->
-    <div class="flex items-start text-xs">
-      <div class="flex items-center h-4"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-3.5" data-radix-vue-collection-item="" tabindex="-1" data-active="false" id="7:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="1" aria-label="1">
+    <div class="flex items-start text-sm">
+      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-500 dark:focus-visible:outline-red-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-active="false" id="7:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="1" aria-label="1">
           <!---->
           <!---->
         </button></div>
@@ -459,8 +83,8 @@ exports[`RadioGroup > renders with size xs correctly 1`] = `
         <!--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-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-3.5" data-radix-vue-collection-item="" tabindex="-1" data-active="false" id="7:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
+    <div class="flex items-start text-sm">
+      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-500 dark:focus-visible:outline-red-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-active="false" id="7:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
           <!---->
           <!---->
         </button></div>
@@ -468,8 +92,8 @@ exports[`RadioGroup > renders with size xs correctly 1`] = `
         <!--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-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-3.5" data-radix-vue-collection-item="" tabindex="-1" data-active="false" id="7:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
+    <div class="flex items-start text-sm">
+      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-500 dark:focus-visible:outline-red-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-active="false" id="7:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
           <!---->
           <!---->
         </button></div>
@@ -481,12 +105,423 @@ exports[`RadioGroup > renders with size xs correctly 1`] = `
 </div>"
 `;
 
-exports[`RadioGroup > renders with ui correctly 1`] = `
-"<div role="radiogroup" required="false" aria-required="false" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" id="13" class="relative" tabindex="0">
+exports[`RadioGroup > renders with default value correctly 1`] = `
+"<div role="radiogroup" required="false" aria-required="false" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" id="3" class="relative" tabindex="0">
   <fieldset class="flex flex-col 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-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-active="false" id="13:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="1" aria-label="1">
+      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-active="true" id="3:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" value="1" aria-label="1"><span data-state="checked" class="flex items-center justify-center size-full rounded-full after:bg-white dark:after:bg-gray-900 after:rounded-full bg-primary-500 dark:bg-primary-400 after:size-1.5"></span>
+          <!---->
+        </button></div>
+      <div class="ms-2"><label for="3:1" class="block font-medium text-gray-700 dark:text-gray-200">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-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-active="false" id="3:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
+          <!---->
+          <!---->
+        </button></div>
+      <div class="ms-2"><label for="3:2" class="block font-medium text-gray-700 dark:text-gray-200">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-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-active="false" id="3:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
+          <!---->
+          <!---->
+        </button></div>
+      <div class="ms-2"><label for="3:3" class="block font-medium text-gray-700 dark:text-gray-200">Option 3</label>
+        <!--v-if-->
+      </div>
+    </div>
+  </fieldset>
+</div>"
+`;
+
+exports[`RadioGroup > renders with description correctly 1`] = `
+"<div role="radiogroup" required="false" aria-required="false" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" id="5" class="relative" tabindex="0">
+  <fieldset class="flex flex-col 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-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-active="false" id="5:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="1" aria-label="1">
+          <!---->
+          <!---->
+        </button></div>
+      <div class="ms-2"><label for="5:1" class="block font-medium text-gray-700 dark:text-gray-200">Option 1</label>
+        <p class="text-gray-500 dark:text-gray-400">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-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-active="false" id="5:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
+          <!---->
+          <!---->
+        </button></div>
+      <div class="ms-2"><label for="5:2" class="block font-medium text-gray-700 dark:text-gray-200">Option 2</label>
+        <p class="text-gray-500 dark:text-gray-400">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-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-active="false" id="5:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
+          <!---->
+          <!---->
+        </button></div>
+      <div class="ms-2"><label for="5:3" class="block font-medium text-gray-700 dark:text-gray-200">Option 3</label>
+        <p class="text-gray-500 dark:text-gray-400">Description 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-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-active="false" id="5:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="1" aria-label="1">
+          <!---->
+          <!---->
+        </button></div>
+      <div class="ms-2"><label for="5:1" class="block font-medium text-gray-700 dark:text-gray-200">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-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-active="false" id="5:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
+          <!---->
+          <!---->
+        </button></div>
+      <div class="ms-2"><label for="5:2" class="block font-medium text-gray-700 dark:text-gray-200">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-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-active="false" id="5:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
+          <!---->
+          <!---->
+        </button></div>
+      <div class="ms-2"><label for="5:3" class="block font-medium text-gray-700 dark:text-gray-200">Option 3</label>
+        <!--v-if-->
+      </div>
+    </div>
+  </fieldset>
+</div>"
+`;
+
+exports[`RadioGroup > renders with description slot correctly 1`] = `
+"<div role="radiogroup" required="false" aria-required="false" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" id="16" class="relative" tabindex="0">
+  <fieldset class="flex flex-col 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-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-active="false" id="16:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="1" aria-label="1">
+          <!---->
+          <!---->
+        </button></div>
+      <div class="ms-2"><label for="16:1" class="block font-medium text-gray-700 dark:text-gray-200">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-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-active="false" id="16:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
+          <!---->
+          <!---->
+        </button></div>
+      <div class="ms-2"><label for="16:2" class="block font-medium text-gray-700 dark:text-gray-200">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-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-active="false" id="16:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
+          <!---->
+          <!---->
+        </button></div>
+      <div class="ms-2"><label for="16:3" class="block font-medium text-gray-700 dark:text-gray-200">Description slot</label>
+        <!--v-if-->
+      </div>
+    </div>
+  </fieldset>
+</div>"
+`;
+
+exports[`RadioGroup > renders with disabled correctly 1`] = `
+"<div role="radiogroup" data-disabled="" required="false" aria-required="false" dir="ltr" tabindex="-1" style="outline-color: none; outline-style: none; outline-width: initial;" id="4" class="relative">
+  <fieldset class="flex flex-col 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-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4 cursor-not-allowed opacity-75" data-radix-vue-collection-item="" tabindex="-1" data-active="false" data-disabled="true" id="4:1" role="radio" type="button" aria-checked="false" disabled="" data-state="unchecked" required="false" value="1" aria-label="1">
+          <!---->
+          <!---->
+        </button></div>
+      <div class="ms-2"><label for="4:1" class="block font-medium text-gray-700 dark:text-gray-200 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-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4 cursor-not-allowed opacity-75" data-radix-vue-collection-item="" tabindex="-1" data-active="false" data-disabled="true" id="4:2" role="radio" type="button" aria-checked="false" disabled="" data-state="unchecked" required="false" value="2" aria-label="2">
+          <!---->
+          <!---->
+        </button></div>
+      <div class="ms-2"><label for="4:2" class="block font-medium text-gray-700 dark:text-gray-200 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-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4 cursor-not-allowed opacity-75" data-radix-vue-collection-item="" tabindex="-1" data-active="false" data-disabled="true" id="4:3" role="radio" type="button" aria-checked="false" disabled="" data-state="unchecked" required="false" value="3" aria-label="3">
+          <!---->
+          <!---->
+        </button></div>
+      <div class="ms-2"><label for="4:3" class="block font-medium text-gray-700 dark:text-gray-200 cursor-not-allowed opacity-75">Option 3</label>
+        <!--v-if-->
+      </div>
+    </div>
+  </fieldset>
+</div>"
+`;
+
+exports[`RadioGroup > renders with label slot correctly 1`] = `
+"<div role="radiogroup" required="false" aria-required="false" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" id="15" class="relative" tabindex="0">
+  <fieldset class="flex flex-col 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-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-active="false" id="15:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="1" aria-label="1">
+          <!---->
+          <!---->
+        </button></div>
+      <div class="ms-2"><label for="15:1" class="block font-medium text-gray-700 dark:text-gray-200">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-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-active="false" id="15:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
+          <!---->
+          <!---->
+        </button></div>
+      <div class="ms-2"><label for="15:2" class="block font-medium text-gray-700 dark:text-gray-200">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-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-active="false" id="15:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
+          <!---->
+          <!---->
+        </button></div>
+      <div class="ms-2"><label for="15:3" class="block font-medium text-gray-700 dark:text-gray-200">Label slot</label>
+        <!--v-if-->
+      </div>
+    </div>
+  </fieldset>
+</div>"
+`;
+
+exports[`RadioGroup > renders with legend slot correctly 1`] = `
+"<div role="radiogroup" required="false" aria-required="false" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" id="14" class="relative" tabindex="0">
+  <fieldset class="flex flex-col 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-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-active="false" id="14:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="1" aria-label="1">
+          <!---->
+          <!---->
+        </button></div>
+      <div class="ms-2"><label for="14:1" class="block font-medium text-gray-700 dark:text-gray-200">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-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-active="false" id="14:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
+          <!---->
+          <!---->
+        </button></div>
+      <div class="ms-2"><label for="14:2" class="block font-medium text-gray-700 dark:text-gray-200">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-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-active="false" id="14:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
+          <!---->
+          <!---->
+        </button></div>
+      <div class="ms-2"><label for="14:3" class="block font-medium text-gray-700 dark:text-gray-200">Legend slot</label>
+        <!--v-if-->
+      </div>
+    </div>
+  </fieldset>
+</div>"
+`;
+
+exports[`RadioGroup > renders with required correctly 1`] = `
+"<div role="radiogroup" required="true" aria-required="true" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" id="6" class="relative" tabindex="0">
+  <fieldset class="flex flex-col gap-1">
+    <legend class="mb-1 block font-medium text-gray-700 dark:text-gray-200 after:content-['*'] after:ms-0.5 after:text-red-500 dark:after:text-red-400">Legend</legend>
+    <div class="flex items-start text-sm">
+      <div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-active="false" id="6:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="true" value="1" aria-label="1">
+          <!---->
+          <!---->
+        </button></div>
+      <div class="ms-2"><label for="6:1" class="block font-medium text-gray-700 dark:text-gray-200">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-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-active="false" id="6:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="true" value="2" aria-label="2">
+          <!---->
+          <!---->
+        </button></div>
+      <div class="ms-2"><label for="6:2" class="block font-medium text-gray-700 dark:text-gray-200">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-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-active="false" id="6:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="true" value="3" aria-label="3">
+          <!---->
+          <!---->
+        </button></div>
+      <div class="ms-2"><label for="6:3" class="block font-medium text-gray-700 dark:text-gray-200">Option 3</label>
+        <!--v-if-->
+      </div>
+    </div>
+  </fieldset>
+</div>"
+`;
+
+exports[`RadioGroup > renders with size 2xs correctly 1`] = `
+"<div role="radiogroup" required="false" aria-required="false" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" id="8" class="relative" tabindex="0">
+  <fieldset class="flex flex-col 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-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-3" data-radix-vue-collection-item="" tabindex="-1" data-active="false" id="8:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="1" aria-label="1">
+          <!---->
+          <!---->
+        </button></div>
+      <div class="ms-2"><label for="8:1" class="block font-medium text-gray-700 dark:text-gray-200">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-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-3" data-radix-vue-collection-item="" tabindex="-1" data-active="false" id="8:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
+          <!---->
+          <!---->
+        </button></div>
+      <div class="ms-2"><label for="8:2" class="block font-medium text-gray-700 dark:text-gray-200">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-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-3" data-radix-vue-collection-item="" tabindex="-1" data-active="false" id="8:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
+          <!---->
+          <!---->
+        </button></div>
+      <div class="ms-2"><label for="8:3" class="block font-medium text-gray-700 dark:text-gray-200">Option 3</label>
+        <!--v-if-->
+      </div>
+    </div>
+  </fieldset>
+</div>"
+`;
+
+exports[`RadioGroup > renders with size lg correctly 1`] = `
+"<div role="radiogroup" required="false" aria-required="false" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" id="12" class="relative" tabindex="0">
+  <fieldset class="flex flex-col 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-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-5" data-radix-vue-collection-item="" tabindex="-1" data-active="false" id="12:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="1" aria-label="1">
+          <!---->
+          <!---->
+        </button></div>
+      <div class="ms-2"><label for="12:1" class="block font-medium text-gray-700 dark:text-gray-200">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-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-5" data-radix-vue-collection-item="" tabindex="-1" data-active="false" id="12:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
+          <!---->
+          <!---->
+        </button></div>
+      <div class="ms-2"><label for="12:2" class="block font-medium text-gray-700 dark:text-gray-200">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-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-5" data-radix-vue-collection-item="" tabindex="-1" data-active="false" id="12:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
+          <!---->
+          <!---->
+        </button></div>
+      <div class="ms-2"><label for="12:3" class="block font-medium text-gray-700 dark:text-gray-200">Option 3</label>
+        <!--v-if-->
+      </div>
+    </div>
+  </fieldset>
+</div>"
+`;
+
+exports[`RadioGroup > renders with size md correctly 1`] = `
+"<div role="radiogroup" required="false" aria-required="false" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" id="11" class="relative" tabindex="0">
+  <fieldset class="flex flex-col 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-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-[18px]" data-radix-vue-collection-item="" tabindex="-1" data-active="false" id="11:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="1" aria-label="1">
+          <!---->
+          <!---->
+        </button></div>
+      <div class="ms-2"><label for="11:1" class="block font-medium text-gray-700 dark:text-gray-200">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-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-[18px]" data-radix-vue-collection-item="" tabindex="-1" data-active="false" id="11:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
+          <!---->
+          <!---->
+        </button></div>
+      <div class="ms-2"><label for="11:2" class="block font-medium text-gray-700 dark:text-gray-200">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-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-[18px]" data-radix-vue-collection-item="" tabindex="-1" data-active="false" id="11:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
+          <!---->
+          <!---->
+        </button></div>
+      <div class="ms-2"><label for="11:3" class="block font-medium text-gray-700 dark:text-gray-200">Option 3</label>
+        <!--v-if-->
+      </div>
+    </div>
+  </fieldset>
+</div>"
+`;
+
+exports[`RadioGroup > renders with size sm correctly 1`] = `
+"<div role="radiogroup" required="false" aria-required="false" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" id="10" class="relative" tabindex="0">
+  <fieldset class="flex flex-col 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-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-active="false" id="10:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="1" aria-label="1">
+          <!---->
+          <!---->
+        </button></div>
+      <div class="ms-2"><label for="10:1" class="block font-medium text-gray-700 dark:text-gray-200">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-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-active="false" id="10:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
+          <!---->
+          <!---->
+        </button></div>
+      <div class="ms-2"><label for="10:2" class="block font-medium text-gray-700 dark:text-gray-200">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-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-active="false" id="10:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
+          <!---->
+          <!---->
+        </button></div>
+      <div class="ms-2"><label for="10:3" class="block font-medium text-gray-700 dark:text-gray-200">Option 3</label>
+        <!--v-if-->
+      </div>
+    </div>
+  </fieldset>
+</div>"
+`;
+
+exports[`RadioGroup > renders with size xl correctly 1`] = `
+"<div role="radiogroup" required="false" aria-required="false" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" id="13" class="relative" tabindex="0">
+  <fieldset class="flex flex-col 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-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-[22px]" data-radix-vue-collection-item="" tabindex="-1" data-active="false" id="13:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="1" aria-label="1">
           <!---->
           <!---->
         </button></div>
@@ -494,8 +529,8 @@ exports[`RadioGroup > renders with ui correctly 1`] = `
         <!--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-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-active="false" id="13:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
+    <div class="flex items-start text-base">
+      <div class="flex items-center h-6"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-[22px]" data-radix-vue-collection-item="" tabindex="-1" data-active="false" id="13:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
           <!---->
           <!---->
         </button></div>
@@ -503,8 +538,8 @@ exports[`RadioGroup > renders with ui correctly 1`] = `
         <!--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-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-active="false" id="13:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
+    <div class="flex items-start text-base">
+      <div class="flex items-center h-6"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-[22px]" data-radix-vue-collection-item="" tabindex="-1" data-active="false" id="13:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
           <!---->
           <!---->
         </button></div>
@@ -515,3 +550,73 @@ exports[`RadioGroup > renders with ui correctly 1`] = `
   </fieldset>
 </div>"
 `;
+
+exports[`RadioGroup > renders with size xs correctly 1`] = `
+"<div role="radiogroup" required="false" aria-required="false" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" id="9" class="relative" tabindex="0">
+  <fieldset class="flex flex-col 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-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-3.5" data-radix-vue-collection-item="" tabindex="-1" data-active="false" id="9:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="1" aria-label="1">
+          <!---->
+          <!---->
+        </button></div>
+      <div class="ms-2"><label for="9:1" class="block font-medium text-gray-700 dark:text-gray-200">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-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-3.5" data-radix-vue-collection-item="" tabindex="-1" data-active="false" id="9:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
+          <!---->
+          <!---->
+        </button></div>
+      <div class="ms-2"><label for="9:2" class="block font-medium text-gray-700 dark:text-gray-200">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-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-3.5" data-radix-vue-collection-item="" tabindex="-1" data-active="false" id="9:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
+          <!---->
+          <!---->
+        </button></div>
+      <div class="ms-2"><label for="9:3" class="block font-medium text-gray-700 dark:text-gray-200">Option 3</label>
+        <!--v-if-->
+      </div>
+    </div>
+  </fieldset>
+</div>"
+`;
+
+exports[`RadioGroup > renders with ui correctly 1`] = `
+"<div role="radiogroup" required="false" aria-required="false" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" id="2" class="relative" tabindex="0">
+  <fieldset class="flex flex-col 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-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-active="false" id="2:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="1" aria-label="1">
+          <!---->
+          <!---->
+        </button></div>
+      <div class="ms-4"><label for="2:1" class="block font-medium text-gray-700 dark:text-gray-200">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-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-active="false" id="2:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
+          <!---->
+          <!---->
+        </button></div>
+      <div class="ms-4"><label for="2:2" class="block font-medium text-gray-700 dark:text-gray-200">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-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-active="false" id="2:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
+          <!---->
+          <!---->
+        </button></div>
+      <div class="ms-4"><label for="2:3" class="block font-medium text-gray-700 dark:text-gray-200">Option 3</label>
+        <!--v-if-->
+      </div>
+    </div>
+  </fieldset>
+</div>"
+`;
diff --git a/test/components/__snapshots__/Switch.spec.ts.snap b/test/components/__snapshots__/Switch.spec.ts.snap
index 76e04187..2e2aedff 100644
--- a/test/components/__snapshots__/Switch.spec.ts.snap
+++ b/test/components/__snapshots__/Switch.spec.ts.snap
@@ -1,106 +1,228 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Switch > renders basic case correctly 1`] = `
-"<button class="peer inline-flex shrink-0 items-center rounded-full border-2 border-transparent transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-900 disabled:cursor-not-allowed disabled:opacity-75 data-[state=unchecked]:bg-gray-200 dark:data-[state=unchecked]:bg-gray-700 data-[state=checked]:bg-primary-500 dark:data-[state=checked]:bg-primary-400 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 h-5 w-9" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="on"><span data-state="unchecked" class="group pointer-events-none rounded-full bg-white dark:bg-gray-900 shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 flex items-center justify-center size-4 data-[state=checked]:translate-x-4"></span></button>
-<!---->"
+"<div class="relative flex items-start">
+  <div class="flex items-center h-5"><button class="peer inline-flex shrink-0 items-center rounded-full border-2 border-transparent transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-900 data-[state=unchecked]:bg-gray-200 dark:data-[state=unchecked]:bg-gray-700 data-[state=checked]:bg-primary-500 dark:data-[state=checked]:bg-primary-400 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 h-5 w-9" id="0" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="on"><span data-state="unchecked" class="group pointer-events-none rounded-full bg-white dark:bg-gray-900 shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 flex items-center justify-center size-4 data-[state=checked]:translate-x-4"></span></button>
+    <!---->
+  </div>
+  <!--v-if-->
+</div>"
 `;
 
 exports[`Switch > renders with as correctly 1`] = `
-"<section class="peer inline-flex shrink-0 items-center rounded-full border-2 border-transparent transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-900 disabled:cursor-not-allowed disabled:opacity-75 data-[state=unchecked]:bg-gray-200 dark:data-[state=unchecked]:bg-gray-700 data-[state=checked]:bg-primary-500 dark:data-[state=checked]:bg-primary-400 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 h-5 w-9" role="switch" aria-checked="false" aria-required="false" data-state="unchecked" disabled="false" value="on"><span data-state="unchecked" class="group pointer-events-none rounded-full bg-white dark:bg-gray-900 shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 flex items-center justify-center size-4 data-[state=checked]:translate-x-4"></span></section>
-<!---->"
-`;
-
-exports[`Switch > renders with checked correctly 1`] = `
-"<button class="peer inline-flex shrink-0 items-center rounded-full border-2 border-transparent transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-900 disabled:cursor-not-allowed disabled:opacity-75 data-[state=unchecked]:bg-gray-200 dark:data-[state=unchecked]:bg-gray-700 data-[state=checked]:bg-primary-500 dark:data-[state=checked]:bg-primary-400 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 h-5 w-9" role="switch" type="button" aria-checked="true" aria-required="false" data-state="checked" value="on"><span data-state="checked" class="group pointer-events-none rounded-full bg-white dark:bg-gray-900 shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 flex items-center justify-center size-4 data-[state=checked]:translate-x-4"></span></button>
-<!---->"
+"<div class="relative flex items-start">
+  <div class="flex items-center h-5">
+    <section class="peer inline-flex shrink-0 items-center rounded-full border-2 border-transparent transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-900 data-[state=unchecked]:bg-gray-200 dark:data-[state=unchecked]:bg-gray-700 data-[state=checked]:bg-primary-500 dark:data-[state=checked]:bg-primary-400 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 h-5 w-9" id="3" role="switch" aria-checked="false" aria-required="false" data-state="unchecked" disabled="false" value="on"><span data-state="unchecked" class="group pointer-events-none rounded-full bg-white dark:bg-gray-900 shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 flex items-center justify-center size-4 data-[state=checked]:translate-x-4"></span></section>
+    <!---->
+  </div>
+  <!--v-if-->
+</div>"
 `;
 
 exports[`Switch > renders with checkedIcon correctly 1`] = `
-"<button class="peer inline-flex shrink-0 items-center rounded-full border-2 border-transparent transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-900 disabled:cursor-not-allowed disabled:opacity-75 data-[state=unchecked]:bg-gray-200 dark:data-[state=unchecked]:bg-gray-700 data-[state=checked]:bg-primary-500 dark:data-[state=checked]:bg-primary-400 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 h-5 w-9" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="on"><span data-state="unchecked" class="group pointer-events-none rounded-full bg-white dark:bg-gray-900 shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 flex items-center justify-center size-4 data-[state=checked]:translate-x-4"><svg data-v-9533427c="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon absolute shrink-0 group-data-[state=unchecked]:text-gray-400 dark:group-data-[state=unchecked]:text-gray-500 transition-[color,opacity] duration-200 opacity-0 group-data-[state=checked]:text-primary-500 dark:group-data-[state=checked]:text-primary-400 size-3 group-data-[state=checked]:opacity-100" width="1em" height="1em" viewBox="0 0 20 20"><path fill="currentColor" fill-rule="evenodd" d="M16.705 4.153a.75.75 0 0 1 .142 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893l7.48-9.817a.75.75 0 0 1 1.05-.143" clip-rule="evenodd"></path></svg><!--v-if--></span></button>
-<!---->"
+"<div class="relative flex items-start">
+  <div class="flex items-center h-5"><button class="peer inline-flex shrink-0 items-center rounded-full border-2 border-transparent transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-900 data-[state=unchecked]:bg-gray-200 dark:data-[state=unchecked]:bg-gray-700 data-[state=checked]:bg-primary-500 dark:data-[state=checked]:bg-primary-400 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 h-5 w-9" id="8" role="switch" type="button" aria-checked="true" aria-required="false" data-state="checked" value="on"><span data-state="checked" class="group pointer-events-none rounded-full bg-white dark:bg-gray-900 shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 flex items-center justify-center size-4 data-[state=checked]:translate-x-4"><svg data-v-9533427c="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon absolute shrink-0 group-data-[state=unchecked]:text-gray-400 dark:group-data-[state=unchecked]:text-gray-500 transition-[color,opacity] duration-200 opacity-0 group-data-[state=checked]:text-primary-500 dark:group-data-[state=checked]:text-primary-400 size-3 group-data-[state=checked]:opacity-100" width="1em" height="1em" viewBox="0 0 20 20"><path fill="currentColor" fill-rule="evenodd" d="M16.705 4.153a.75.75 0 0 1 .142 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893l7.48-9.817a.75.75 0 0 1 1.05-.143" clip-rule="evenodd"></path></svg><!--v-if--></span></button>
+    <!---->
+  </div>
+  <!--v-if-->
+</div>"
 `;
 
 exports[`Switch > renders with class correctly 1`] = `
-"<button class="peer inline-flex shrink-0 items-center rounded-full border-2 border-transparent transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-900 disabled:cursor-not-allowed disabled:opacity-75 data-[state=unchecked]:bg-gray-200 dark:data-[state=unchecked]:bg-gray-700 data-[state=checked]:bg-primary-500 dark:data-[state=checked]:bg-primary-400 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 h-5 w-9" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="on"><span data-state="unchecked" class="group pointer-events-none rounded-full bg-white dark:bg-gray-900 shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 flex items-center justify-center size-4 data-[state=checked]:translate-x-4"></span></button>
-<!---->"
+"<div class="relative items-start inline-flex">
+  <div class="flex items-center h-5"><button class="peer inline-flex shrink-0 items-center rounded-full border-2 border-transparent transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-900 data-[state=unchecked]:bg-gray-200 dark:data-[state=unchecked]:bg-gray-700 data-[state=checked]:bg-primary-500 dark:data-[state=checked]:bg-primary-400 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 h-5 w-9" id="1" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="on"><span data-state="unchecked" class="group pointer-events-none rounded-full bg-white dark:bg-gray-900 shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 flex items-center justify-center size-4 data-[state=checked]:translate-x-4"></span></button>
+    <!---->
+  </div>
+  <!--v-if-->
+</div>"
 `;
 
-exports[`Switch > renders with defaultChecked correctly 1`] = `
-"<button class="peer inline-flex shrink-0 items-center rounded-full border-2 border-transparent transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-900 disabled:cursor-not-allowed disabled:opacity-75 data-[state=unchecked]:bg-gray-200 dark:data-[state=unchecked]:bg-gray-700 data-[state=checked]:bg-primary-500 dark:data-[state=checked]:bg-primary-400 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 h-5 w-9" role="switch" type="button" aria-checked="true" aria-required="false" data-state="checked" value="on"><span data-state="checked" class="group pointer-events-none rounded-full bg-white dark:bg-gray-900 shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 flex items-center justify-center size-4 data-[state=checked]:translate-x-4"></span></button>
-<!---->"
+exports[`Switch > renders with defaultValue correctly 1`] = `
+"<div class="relative flex items-start">
+  <div class="flex items-center h-5"><button class="peer inline-flex shrink-0 items-center rounded-full border-2 border-transparent transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-900 data-[state=unchecked]:bg-gray-200 dark:data-[state=unchecked]:bg-gray-700 data-[state=checked]:bg-primary-500 dark:data-[state=checked]:bg-primary-400 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 h-5 w-9" id="4" role="switch" type="button" aria-checked="true" aria-required="false" data-state="checked" value="on"><span data-state="checked" class="group pointer-events-none rounded-full bg-white dark:bg-gray-900 shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 flex items-center justify-center size-4 data-[state=checked]:translate-x-4"></span></button>
+    <!---->
+  </div>
+  <!--v-if-->
+</div>"
+`;
+
+exports[`Switch > renders with description correctly 1`] = `
+"<div class="relative flex items-start">
+  <div class="flex items-center h-5"><button class="peer inline-flex shrink-0 items-center rounded-full border-2 border-transparent transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-900 data-[state=unchecked]:bg-gray-200 dark:data-[state=unchecked]:bg-gray-700 data-[state=checked]:bg-primary-500 dark:data-[state=checked]:bg-primary-400 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 h-5 w-9" id="14" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="on"><span data-state="unchecked" class="group pointer-events-none rounded-full bg-white dark:bg-gray-900 shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 flex items-center justify-center size-4 data-[state=checked]:translate-x-4"></span></button>
+    <!---->
+  </div>
+  <div class="ms-2 text-sm"><label for="14" class="block font-medium text-gray-700 dark:text-gray-200">Label</label>
+    <p class="text-gray-500 dark:text-gray-400">Description</p>
+  </div>
+</div>"
+`;
+
+exports[`Switch > renders with description slot correctly 1`] = `
+"<div class="relative flex items-start">
+  <div class="flex items-center h-5"><button class="peer inline-flex shrink-0 items-center rounded-full border-2 border-transparent transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-900 data-[state=unchecked]:bg-gray-200 dark:data-[state=unchecked]:bg-gray-700 data-[state=checked]:bg-primary-500 dark:data-[state=checked]:bg-primary-400 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 h-5 w-9" id="22" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="on"><span data-state="unchecked" class="group pointer-events-none rounded-full bg-white dark:bg-gray-900 shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 flex items-center justify-center size-4 data-[state=checked]:translate-x-4"></span></button>
+    <!---->
+  </div>
+  <div class="ms-2 text-sm"><label for="22" class="block font-medium text-gray-700 dark:text-gray-200">Description slot</label>
+    <!--v-if-->
+  </div>
+</div>"
 `;
 
 exports[`Switch > renders with disabled correctly 1`] = `
-"<button class="peer inline-flex shrink-0 items-center rounded-full border-2 border-transparent transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-900 disabled:cursor-not-allowed disabled:opacity-75 data-[state=unchecked]:bg-gray-200 dark:data-[state=unchecked]:bg-gray-700 data-[state=checked]:bg-primary-500 dark:data-[state=checked]:bg-primary-400 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 h-5 w-9" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-disabled="" disabled="" value="on"><span data-state="unchecked" data-disabled="" class="group pointer-events-none rounded-full bg-white dark:bg-gray-900 shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 flex items-center justify-center size-4 data-[state=checked]:translate-x-4"></span></button>
-<!---->"
+"<div class="relative flex items-start">
+  <div class="flex items-center h-5"><button class="peer inline-flex shrink-0 items-center rounded-full border-2 border-transparent transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-900 data-[state=unchecked]:bg-gray-200 dark:data-[state=unchecked]:bg-gray-700 data-[state=checked]:bg-primary-500 dark:data-[state=checked]:bg-primary-400 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 h-5 w-9 cursor-not-allowed opacity-75" id="7" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-disabled="" disabled="" value="on"><span data-state="unchecked" data-disabled="" class="group pointer-events-none rounded-full bg-white dark:bg-gray-900 shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 flex items-center justify-center size-4 data-[state=checked]:translate-x-4"></span></button>
+    <!---->
+  </div>
+  <!--v-if-->
+</div>"
 `;
 
 exports[`Switch > renders with id correctly 1`] = `
-"<button class="peer inline-flex shrink-0 items-center rounded-full border-2 border-transparent transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-900 disabled:cursor-not-allowed disabled:opacity-75 data-[state=unchecked]:bg-gray-200 dark:data-[state=unchecked]:bg-gray-700 data-[state=checked]:bg-primary-500 dark:data-[state=checked]:bg-primary-400 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 h-5 w-9" id="test" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="on"><span data-state="unchecked" class="group pointer-events-none rounded-full bg-white dark:bg-gray-900 shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 flex items-center justify-center size-4 data-[state=checked]:translate-x-4"></span></button>
-<!---->"
+"<div class="relative flex items-start">
+  <div class="flex items-center h-5"><button class="peer inline-flex shrink-0 items-center rounded-full border-2 border-transparent transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-900 data-[state=unchecked]:bg-gray-200 dark:data-[state=unchecked]:bg-gray-700 data-[state=checked]:bg-primary-500 dark:data-[state=checked]:bg-primary-400 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 h-5 w-9" id="custom-id" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="on"><span data-state="unchecked" class="group pointer-events-none rounded-full bg-white dark:bg-gray-900 shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 flex items-center justify-center size-4 data-[state=checked]:translate-x-4"></span></button>
+    <!---->
+  </div>
+  <!--v-if-->
+</div>"
+`;
+
+exports[`Switch > renders with label correctly 1`] = `
+"<div class="relative flex items-start">
+  <div class="flex items-center h-5"><button class="peer inline-flex shrink-0 items-center rounded-full border-2 border-transparent transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-900 data-[state=unchecked]:bg-gray-200 dark:data-[state=unchecked]:bg-gray-700 data-[state=checked]:bg-primary-500 dark:data-[state=checked]:bg-primary-400 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 h-5 w-9" id="12" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="on"><span data-state="unchecked" class="group pointer-events-none rounded-full bg-white dark:bg-gray-900 shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 flex items-center justify-center size-4 data-[state=checked]:translate-x-4"></span></button>
+    <!---->
+  </div>
+  <div class="ms-2 text-sm"><label for="12" class="block font-medium text-gray-700 dark:text-gray-200">Label</label>
+    <!--v-if-->
+  </div>
+</div>"
+`;
+
+exports[`Switch > renders with label slot correctly 1`] = `
+"<div class="relative flex items-start">
+  <div class="flex items-center h-5"><button class="peer inline-flex shrink-0 items-center rounded-full border-2 border-transparent transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-900 data-[state=unchecked]:bg-gray-200 dark:data-[state=unchecked]:bg-gray-700 data-[state=checked]:bg-primary-500 dark:data-[state=checked]:bg-primary-400 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 h-5 w-9" id="21" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="on"><span data-state="unchecked" class="group pointer-events-none rounded-full bg-white dark:bg-gray-900 shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 flex items-center justify-center size-4 data-[state=checked]:translate-x-4"></span></button>
+    <!---->
+  </div>
+  <div class="ms-2 text-sm"><label for="21" class="block font-medium text-gray-700 dark:text-gray-200">Label slot</label>
+    <!--v-if-->
+  </div>
+</div>"
 `;
 
 exports[`Switch > renders with loading correctly 1`] = `
-"<button class="peer inline-flex shrink-0 items-center rounded-full border-2 border-transparent transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-900 disabled:cursor-not-allowed disabled:opacity-75 data-[state=unchecked]:bg-gray-200 dark:data-[state=unchecked]:bg-gray-700 data-[state=checked]:bg-primary-500 dark:data-[state=checked]:bg-primary-400 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 h-5 w-9" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-disabled="" disabled="" value="on"><span data-state="unchecked" data-disabled="" class="group pointer-events-none rounded-full bg-white dark:bg-gray-900 shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 flex items-center justify-center size-4 data-[state=checked]:translate-x-4"><svg data-v-9533427c="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon absolute shrink-0 group-data-[state=unchecked]:text-gray-400 dark:group-data-[state=unchecked]:text-gray-500 transition-[color,opacity] duration-200 opacity-0 group-data-[state=checked]:text-primary-500 dark:group-data-[state=checked]:text-primary-400 size-3 group-data-[state=checked]:opacity-100 group-data-[state=unchecked]:opacity-100 animate-spin" width="1em" height="1em" viewBox="0 0 20 20"><path fill="currentColor" fill-rule="evenodd" d="M15.312 11.424a5.5 5.5 0 0 1-9.201 2.466l-.312-.311h2.433a.75.75 0 0 0 0-1.5H3.989a.75.75 0 0 0-.75.75v4.242a.75.75 0 0 0 1.5 0v-2.43l.31.31a7 7 0 0 0 11.712-3.138a.75.75 0 0 0-1.449-.39m1.23-3.723a.75.75 0 0 0 .219-.53V2.929a.75.75 0 0 0-1.5 0V5.36l-.31-.31A7 7 0 0 0 3.239 8.188a.75.75 0 1 0 1.448.389A5.5 5.5 0 0 1 13.89 6.11l.311.31h-2.432a.75.75 0 0 0 0 1.5h4.243a.75.75 0 0 0 .53-.219" clip-rule="evenodd"></path></svg></span></button>
-<!---->"
+"<div class="relative flex items-start">
+  <div class="flex items-center h-5"><button class="peer inline-flex shrink-0 items-center rounded-full border-2 border-transparent transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-900 data-[state=unchecked]:bg-gray-200 dark:data-[state=unchecked]:bg-gray-700 data-[state=checked]:bg-primary-500 dark:data-[state=checked]:bg-primary-400 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 h-5 w-9 cursor-not-allowed opacity-75" id="10" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-disabled="" disabled="" value="on"><span data-state="unchecked" data-disabled="" class="group pointer-events-none rounded-full bg-white dark:bg-gray-900 shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 flex items-center justify-center size-4 data-[state=checked]:translate-x-4"><svg data-v-9533427c="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon absolute shrink-0 group-data-[state=unchecked]:text-gray-400 dark:group-data-[state=unchecked]:text-gray-500 transition-[color,opacity] duration-200 opacity-0 group-data-[state=checked]:text-primary-500 dark:group-data-[state=checked]:text-primary-400 size-3 group-data-[state=checked]:opacity-100 group-data-[state=unchecked]:opacity-100 animate-spin" width="1em" height="1em" viewBox="0 0 20 20"><path fill="currentColor" fill-rule="evenodd" d="M15.312 11.424a5.5 5.5 0 0 1-9.201 2.466l-.312-.311h2.433a.75.75 0 0 0 0-1.5H3.989a.75.75 0 0 0-.75.75v4.242a.75.75 0 0 0 1.5 0v-2.43l.31.31a7 7 0 0 0 11.712-3.138a.75.75 0 0 0-1.449-.39m1.23-3.723a.75.75 0 0 0 .219-.53V2.929a.75.75 0 0 0-1.5 0V5.36l-.31-.31A7 7 0 0 0 3.239 8.188a.75.75 0 1 0 1.448.389A5.5 5.5 0 0 1 13.89 6.11l.311.31h-2.432a.75.75 0 0 0 0 1.5h4.243a.75.75 0 0 0 .53-.219" clip-rule="evenodd"></path></svg></span></button>
+    <!---->
+  </div>
+  <!--v-if-->
+</div>"
 `;
 
 exports[`Switch > renders with loadingIcon correctly 1`] = `
-"<button class="peer inline-flex shrink-0 items-center rounded-full border-2 border-transparent transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-900 disabled:cursor-not-allowed disabled:opacity-75 data-[state=unchecked]:bg-gray-200 dark:data-[state=unchecked]:bg-gray-700 data-[state=checked]:bg-primary-500 dark:data-[state=checked]:bg-primary-400 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 h-5 w-9" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-disabled="" disabled="" value="on"><span data-state="unchecked" data-disabled="" class="group pointer-events-none rounded-full bg-white dark:bg-gray-900 shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 flex items-center justify-center size-4 data-[state=checked]:translate-x-4"><svg data-v-9533427c="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon absolute shrink-0 group-data-[state=unchecked]:text-gray-400 dark:group-data-[state=unchecked]:text-gray-500 transition-[color,opacity] duration-200 opacity-0 group-data-[state=checked]:text-primary-500 dark:group-data-[state=checked]:text-primary-400 size-3 group-data-[state=checked]:opacity-100 group-data-[state=unchecked]:opacity-100 animate-spin" width="1em" height="1em" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 0 0-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 0 0 3.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 0 0 3.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 0 0-3.09 3.09m8.445-7.188L18 9.75l-.259-1.035a3.375 3.375 0 0 0-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 0 0 2.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 0 0 2.456 2.456L21.75 6l-1.035.259a3.375 3.375 0 0 0-2.456 2.456m-1.365 11.852L16.5 21.75l-.394-1.183a2.25 2.25 0 0 0-1.423-1.423L13.5 18.75l1.183-.394a2.25 2.25 0 0 0 1.423-1.423l.394-1.183l.394 1.183a2.25 2.25 0 0 0 1.423 1.423l1.183.394l-1.183.394a2.25 2.25 0 0 0-1.423 1.423"></path></svg></span></button>
-<!---->"
+"<div class="relative flex items-start">
+  <div class="flex items-center h-5"><button class="peer inline-flex shrink-0 items-center rounded-full border-2 border-transparent transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-900 data-[state=unchecked]:bg-gray-200 dark:data-[state=unchecked]:bg-gray-700 data-[state=checked]:bg-primary-500 dark:data-[state=checked]:bg-primary-400 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 h-5 w-9 cursor-not-allowed opacity-75" id="11" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-disabled="" disabled="" value="on"><span data-state="unchecked" data-disabled="" class="group pointer-events-none rounded-full bg-white dark:bg-gray-900 shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 flex items-center justify-center size-4 data-[state=checked]:translate-x-4"><svg data-v-9533427c="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon absolute shrink-0 group-data-[state=unchecked]:text-gray-400 dark:group-data-[state=unchecked]:text-gray-500 transition-[color,opacity] duration-200 opacity-0 group-data-[state=checked]:text-primary-500 dark:group-data-[state=checked]:text-primary-400 size-3 group-data-[state=checked]:opacity-100 group-data-[state=unchecked]:opacity-100 animate-spin" width="1em" height="1em" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 0 0-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 0 0 3.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 0 0 3.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 0 0-3.09 3.09m8.445-7.188L18 9.75l-.259-1.035a3.375 3.375 0 0 0-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 0 0 2.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 0 0 2.456 2.456L21.75 6l-1.035.259a3.375 3.375 0 0 0-2.456 2.456m-1.365 11.852L16.5 21.75l-.394-1.183a2.25 2.25 0 0 0-1.423-1.423L13.5 18.75l1.183-.394a2.25 2.25 0 0 0 1.423-1.423l.394-1.183l.394 1.183a2.25 2.25 0 0 0 1.423 1.423l1.183.394l-1.183.394a2.25 2.25 0 0 0-1.423 1.423"></path></svg></span></button>
+    <!---->
+  </div>
+  <!--v-if-->
+</div>"
 `;
 
 exports[`Switch > renders with name correctly 1`] = `
-"<button class="peer inline-flex shrink-0 items-center rounded-full border-2 border-transparent transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-900 disabled:cursor-not-allowed disabled:opacity-75 data-[state=unchecked]:bg-gray-200 dark:data-[state=unchecked]:bg-gray-700 data-[state=checked]:bg-primary-500 dark:data-[state=checked]:bg-primary-400 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 h-5 w-9" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="on"><span data-state="unchecked" class="group pointer-events-none rounded-full bg-white dark:bg-gray-900 shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 flex items-center justify-center size-4 data-[state=checked]:translate-x-4"></span></button>
-<!---->"
+"<div class="relative flex items-start">
+  <div class="flex items-center h-5"><button class="peer inline-flex shrink-0 items-center rounded-full border-2 border-transparent transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-900 data-[state=unchecked]:bg-gray-200 dark:data-[state=unchecked]:bg-gray-700 data-[state=checked]:bg-primary-500 dark:data-[state=checked]:bg-primary-400 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 h-5 w-9" id="5" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="on"><span data-state="unchecked" class="group pointer-events-none rounded-full bg-white dark:bg-gray-900 shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 flex items-center justify-center size-4 data-[state=checked]:translate-x-4"></span></button>
+    <!---->
+  </div>
+  <!--v-if-->
+</div>"
 `;
 
 exports[`Switch > renders with required correctly 1`] = `
-"<button class="peer inline-flex shrink-0 items-center rounded-full border-2 border-transparent transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-900 disabled:cursor-not-allowed disabled:opacity-75 data-[state=unchecked]:bg-gray-200 dark:data-[state=unchecked]:bg-gray-700 data-[state=checked]:bg-primary-500 dark:data-[state=checked]:bg-primary-400 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 h-5 w-9" role="switch" type="button" aria-checked="false" aria-required="true" data-state="unchecked" value="on"><span data-state="unchecked" class="group pointer-events-none rounded-full bg-white dark:bg-gray-900 shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 flex items-center justify-center size-4 data-[state=checked]:translate-x-4"></span></button>
-<!---->"
+"<div class="relative flex items-start">
+  <div class="flex items-center h-5"><button class="peer inline-flex shrink-0 items-center rounded-full border-2 border-transparent transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-900 data-[state=unchecked]:bg-gray-200 dark:data-[state=unchecked]:bg-gray-700 data-[state=checked]:bg-primary-500 dark:data-[state=checked]:bg-primary-400 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 h-5 w-9" id="13" role="switch" type="button" aria-checked="false" aria-required="true" data-state="unchecked" value="on"><span data-state="unchecked" class="group pointer-events-none rounded-full bg-white dark:bg-gray-900 shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 flex items-center justify-center size-4 data-[state=checked]:translate-x-4"></span></button>
+    <!---->
+  </div>
+  <div class="ms-2 text-sm"><label for="13" class="block font-medium text-gray-700 dark:text-gray-200 after:content-['*'] after:ms-0.5 after:text-red-500 dark:after:text-red-400">Label</label>
+    <!--v-if-->
+  </div>
+</div>"
 `;
 
 exports[`Switch > renders with size 2xs correctly 1`] = `
-"<button class="peer inline-flex shrink-0 items-center rounded-full border-2 border-transparent transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-900 disabled:cursor-not-allowed disabled:opacity-75 data-[state=unchecked]:bg-gray-200 dark:data-[state=unchecked]:bg-gray-700 data-[state=checked]:bg-primary-500 dark:data-[state=checked]:bg-primary-400 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 h-3 w-5" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="on"><span data-state="unchecked" class="group pointer-events-none rounded-full bg-white dark:bg-gray-900 shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 flex items-center justify-center size-2 data-[state=checked]:translate-x-2"></span></button>
-<!---->"
+"<div class="relative flex items-start">
+  <div class="flex items-center h-4"><button class="peer inline-flex shrink-0 items-center rounded-full border-2 border-transparent transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-900 data-[state=unchecked]:bg-gray-200 dark:data-[state=unchecked]:bg-gray-700 data-[state=checked]:bg-primary-500 dark:data-[state=checked]:bg-primary-400 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 h-3 w-5" id="15" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="on"><span data-state="unchecked" class="group pointer-events-none rounded-full bg-white dark:bg-gray-900 shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 flex items-center justify-center size-2 data-[state=checked]:translate-x-2"></span></button>
+    <!---->
+  </div>
+  <!--v-if-->
+</div>"
 `;
 
 exports[`Switch > renders with size lg correctly 1`] = `
-"<button class="peer inline-flex shrink-0 items-center rounded-full border-2 border-transparent transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-900 disabled:cursor-not-allowed disabled:opacity-75 data-[state=unchecked]:bg-gray-200 dark:data-[state=unchecked]:bg-gray-700 data-[state=checked]:bg-primary-500 dark:data-[state=checked]:bg-primary-400 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 h-7 w-[52px]" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="on"><span data-state="unchecked" class="group pointer-events-none rounded-full bg-white dark:bg-gray-900 shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 flex items-center justify-center size-6 data-[state=checked]:translate-x-6"></span></button>
-<!---->"
+"<div class="relative flex items-start">
+  <div class="flex items-center h-6"><button class="peer inline-flex shrink-0 items-center rounded-full border-2 border-transparent transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-900 data-[state=unchecked]:bg-gray-200 dark:data-[state=unchecked]:bg-gray-700 data-[state=checked]:bg-primary-500 dark:data-[state=checked]:bg-primary-400 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 h-7 w-[52px]" id="19" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="on"><span data-state="unchecked" class="group pointer-events-none rounded-full bg-white dark:bg-gray-900 shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 flex items-center justify-center size-6 data-[state=checked]:translate-x-6"></span></button>
+    <!---->
+  </div>
+  <!--v-if-->
+</div>"
 `;
 
 exports[`Switch > renders with size md correctly 1`] = `
-"<button class="peer inline-flex shrink-0 items-center rounded-full border-2 border-transparent transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-900 disabled:cursor-not-allowed disabled:opacity-75 data-[state=unchecked]:bg-gray-200 dark:data-[state=unchecked]:bg-gray-700 data-[state=checked]:bg-primary-500 dark:data-[state=checked]:bg-primary-400 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 h-6 w-11" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="on"><span data-state="unchecked" class="group pointer-events-none rounded-full bg-white dark:bg-gray-900 shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 flex items-center justify-center size-5 data-[state=checked]:translate-x-5"></span></button>
-<!---->"
+"<div class="relative flex items-start">
+  <div class="flex items-center h-5"><button class="peer inline-flex shrink-0 items-center rounded-full border-2 border-transparent transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-900 data-[state=unchecked]:bg-gray-200 dark:data-[state=unchecked]:bg-gray-700 data-[state=checked]:bg-primary-500 dark:data-[state=checked]:bg-primary-400 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 h-6 w-11" id="18" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="on"><span data-state="unchecked" class="group pointer-events-none rounded-full bg-white dark:bg-gray-900 shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 flex items-center justify-center size-5 data-[state=checked]:translate-x-5"></span></button>
+    <!---->
+  </div>
+  <!--v-if-->
+</div>"
 `;
 
 exports[`Switch > renders with size sm correctly 1`] = `
-"<button class="peer inline-flex shrink-0 items-center rounded-full border-2 border-transparent transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-900 disabled:cursor-not-allowed disabled:opacity-75 data-[state=unchecked]:bg-gray-200 dark:data-[state=unchecked]:bg-gray-700 data-[state=checked]:bg-primary-500 dark:data-[state=checked]:bg-primary-400 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 h-5 w-9" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="on"><span data-state="unchecked" class="group pointer-events-none rounded-full bg-white dark:bg-gray-900 shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 flex items-center justify-center size-4 data-[state=checked]:translate-x-4"></span></button>
-<!---->"
+"<div class="relative flex items-start">
+  <div class="flex items-center h-5"><button class="peer inline-flex shrink-0 items-center rounded-full border-2 border-transparent transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-900 data-[state=unchecked]:bg-gray-200 dark:data-[state=unchecked]:bg-gray-700 data-[state=checked]:bg-primary-500 dark:data-[state=checked]:bg-primary-400 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 h-5 w-9" id="17" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="on"><span data-state="unchecked" class="group pointer-events-none rounded-full bg-white dark:bg-gray-900 shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 flex items-center justify-center size-4 data-[state=checked]:translate-x-4"></span></button>
+    <!---->
+  </div>
+  <!--v-if-->
+</div>"
 `;
 
 exports[`Switch > renders with size xl correctly 1`] = `
-"<button class="peer inline-flex shrink-0 items-center rounded-full border-2 border-transparent transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-900 disabled:cursor-not-allowed disabled:opacity-75 data-[state=unchecked]:bg-gray-200 dark:data-[state=unchecked]:bg-gray-700 data-[state=checked]:bg-primary-500 dark:data-[state=checked]:bg-primary-400 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 h-8 w-[60px]" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="on"><span data-state="unchecked" class="group pointer-events-none rounded-full bg-white dark:bg-gray-900 shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 flex items-center justify-center size-7 data-[state=checked]:translate-x-7"></span></button>
-<!---->"
+"<div class="relative flex items-start">
+  <div class="flex items-center h-6"><button class="peer inline-flex shrink-0 items-center rounded-full border-2 border-transparent transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-900 data-[state=unchecked]:bg-gray-200 dark:data-[state=unchecked]:bg-gray-700 data-[state=checked]:bg-primary-500 dark:data-[state=checked]:bg-primary-400 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 h-8 w-[60px]" id="20" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="on"><span data-state="unchecked" class="group pointer-events-none rounded-full bg-white dark:bg-gray-900 shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 flex items-center justify-center size-7 data-[state=checked]:translate-x-7"></span></button>
+    <!---->
+  </div>
+  <!--v-if-->
+</div>"
 `;
 
 exports[`Switch > renders with size xs correctly 1`] = `
-"<button class="peer inline-flex shrink-0 items-center rounded-full border-2 border-transparent transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-900 disabled:cursor-not-allowed disabled:opacity-75 data-[state=unchecked]:bg-gray-200 dark:data-[state=unchecked]:bg-gray-700 data-[state=checked]:bg-primary-500 dark:data-[state=checked]:bg-primary-400 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 h-4 w-7" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="on"><span data-state="unchecked" class="group pointer-events-none rounded-full bg-white dark:bg-gray-900 shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 flex items-center justify-center size-3 data-[state=checked]:translate-x-3"></span></button>
-<!---->"
+"<div class="relative flex items-start">
+  <div class="flex items-center h-4"><button class="peer inline-flex shrink-0 items-center rounded-full border-2 border-transparent transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-900 data-[state=unchecked]:bg-gray-200 dark:data-[state=unchecked]:bg-gray-700 data-[state=checked]:bg-primary-500 dark:data-[state=checked]:bg-primary-400 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 h-4 w-7" id="16" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="on"><span data-state="unchecked" class="group pointer-events-none rounded-full bg-white dark:bg-gray-900 shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 flex items-center justify-center size-3 data-[state=checked]:translate-x-3"></span></button>
+    <!---->
+  </div>
+  <!--v-if-->
+</div>"
 `;
 
 exports[`Switch > renders with ui correctly 1`] = `
-"<button class="peer inline-flex shrink-0 items-center rounded-full border-2 border-transparent transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-900 disabled:cursor-not-allowed disabled:opacity-75 data-[state=unchecked]:bg-gray-200 dark:data-[state=unchecked]:bg-gray-700 data-[state=checked]:bg-primary-500 dark:data-[state=checked]:bg-primary-400 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 h-5 w-9" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="on"><span data-state="unchecked" class="group pointer-events-none rounded-full bg-white dark:bg-gray-900 shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 flex items-center justify-center size-4 data-[state=checked]:translate-x-4"></span></button>
-<!---->"
+"<div class="relative flex items-start">
+  <div class="flex items-center h-5"><button class="peer inline-flex shrink-0 items-center rounded-full border-2 border-transparent transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-900 data-[state=unchecked]:bg-gray-200 dark:data-[state=unchecked]:bg-gray-700 data-[state=checked]:bg-primary-500 dark:data-[state=checked]:bg-primary-400 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 h-5 w-9" id="2" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="on"><span data-state="unchecked" class="group pointer-events-none rounded-full bg-white dark:bg-gray-900 shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 flex items-center justify-center size-4 data-[state=checked]:translate-x-4"></span></button>
+    <!---->
+  </div>
+  <!--v-if-->
+</div>"
 `;
 
 exports[`Switch > renders with uncheckedIcon correctly 1`] = `
-"<button class="peer inline-flex shrink-0 items-center rounded-full border-2 border-transparent transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-900 disabled:cursor-not-allowed disabled:opacity-75 data-[state=unchecked]:bg-gray-200 dark:data-[state=unchecked]:bg-gray-700 data-[state=checked]:bg-primary-500 dark:data-[state=checked]:bg-primary-400 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 h-5 w-9" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="on"><span data-state="unchecked" class="group pointer-events-none rounded-full bg-white dark:bg-gray-900 shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 flex items-center justify-center size-4 data-[state=checked]:translate-x-4"><svg data-v-9533427c="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon absolute shrink-0 group-data-[state=unchecked]:text-gray-400 dark:group-data-[state=unchecked]:text-gray-500 transition-[color,opacity] duration-200 opacity-0 group-data-[state=checked]:text-primary-500 dark:group-data-[state=checked]:text-primary-400 size-3 group-data-[state=checked]:opacity-100" width="1em" height="1em" viewBox="0 0 20 20"><path fill="currentColor" d="M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94z"></path></svg><!--v-if--></span></button>
-<!---->"
+"<div class="relative flex items-start">
+  <div class="flex items-center h-5"><button class="peer inline-flex shrink-0 items-center rounded-full border-2 border-transparent transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-900 data-[state=unchecked]:bg-gray-200 dark:data-[state=unchecked]:bg-gray-700 data-[state=checked]:bg-primary-500 dark:data-[state=checked]:bg-primary-400 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 h-5 w-9" id="9" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="on"><span data-state="unchecked" class="group pointer-events-none rounded-full bg-white dark:bg-gray-900 shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 flex items-center justify-center size-4 data-[state=checked]:translate-x-4"><!--v-if--><svg data-v-9533427c="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon absolute shrink-0 group-data-[state=unchecked]:text-gray-400 dark:group-data-[state=unchecked]:text-gray-500 transition-[color,opacity] duration-200 opacity-0 group-data-[state=checked]:text-primary-500 dark:group-data-[state=checked]:text-primary-400 size-3 group-data-[state=unchecked]:opacity-100" width="1em" height="1em" viewBox="0 0 20 20"><path fill="currentColor" d="M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94z"></path></svg></span></button>
+    <!---->
+  </div>
+  <!--v-if-->
+</div>"
 `;
 
 exports[`Switch > renders with value correctly 1`] = `
-"<button class="peer inline-flex shrink-0 items-center rounded-full border-2 border-transparent transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-900 disabled:cursor-not-allowed disabled:opacity-75 data-[state=unchecked]:bg-gray-200 dark:data-[state=unchecked]:bg-gray-700 data-[state=checked]:bg-primary-500 dark:data-[state=checked]:bg-primary-400 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 h-5 w-9" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="switch"><span data-state="unchecked" class="group pointer-events-none rounded-full bg-white dark:bg-gray-900 shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 flex items-center justify-center size-4 data-[state=checked]:translate-x-4"></span></button>
-<!---->"
+"<div class="relative flex items-start">
+  <div class="flex items-center h-5"><button class="peer inline-flex shrink-0 items-center rounded-full border-2 border-transparent transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-900 data-[state=unchecked]:bg-gray-200 dark:data-[state=unchecked]:bg-gray-700 data-[state=checked]:bg-primary-500 dark:data-[state=checked]:bg-primary-400 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 h-5 w-9" id="6" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="custom-value"><span data-state="unchecked" class="group pointer-events-none rounded-full bg-white dark:bg-gray-900 shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 flex items-center justify-center size-4 data-[state=checked]:translate-x-4"></span></button>
+    <!---->
+  </div>
+  <!--v-if-->
+</div>"
 `;
diff --git a/test/components/__snapshots__/Toast.spec.ts.snap b/test/components/__snapshots__/Toast.spec.ts.snap
index 16a1f989..981aef15 100644
--- a/test/components/__snapshots__/Toast.spec.ts.snap
+++ b/test/components/__snapshots__/Toast.spec.ts.snap
@@ -50,30 +50,6 @@ exports[`Toast > renders with avatar correctly 1`] = `
 </div>"
 `;
 
-exports[`Toast > renders with body slot correctly 1`] = `
-"<!---->
-<!--teleport start-->
-<!--teleport end-->
-<div role="region" aria-label="Notifications (F8)" tabindex="-1"><span style="position: fixed; border: 0px; width: 1px; display: inline-block; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;" aria-hidden="" tabindex="0"></span>
-  <ol tabindex="-1" data-expanded="true" class="fixed flex flex-col w-[calc(100%-2rem)] sm:w-96 z-[100] data-[expanded=true]:h-[--height] right-4 bottom-4" style="--scale-factor: 0.05; --translate-factor: -1px; --gap: -16px; --front-height: 0px; --height: 0px;">
-    <li role="status" aria-live="off" aria-atomic="" tabindex="0" data-radix-vue-collection-item="" class="relative overflow-hidden bg-white dark:bg-gray-900 shadow-lg rounded-lg ring ring-gray-200 dark:ring-gray-800 p-4 flex gap-2.5 items-center" style="--height: 0; user-select: none; touch-action: none;" data-state="open" data-swipe-direction="right">
-      <!--v-if-->
-      <div class="w-0 flex-1 flex flex-col gap-1">
-        <!--v-if-->
-        <!--v-if-->
-        <!--v-if-->
-      </div>
-      <div class="flex gap-1.5 shrink-0 items-center"><button type="button" aria-label="Close" data-radix-toast-announce-exclude="" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-x-1.5 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 underline-offset-4 hover:underline focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-0">
-          <!---->
-          <!--v-if-->
-          <!--v-if-->
-        </button></div>
-      <div class="absolute inset-x-0 bottom-0 h-1 z-[-1] bg-primary-500 dark:bg-primary-400" style="width: 100%;"></div>
-    </li>
-  </ol><span style="position: fixed; border: 0px; width: 1px; display: inline-block; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;" aria-hidden="" tabindex="0"></span>
-</div>"
-`;
-
 exports[`Toast > renders with class correctly 1`] = `
 "<!---->
 <!--teleport start-->
@@ -223,30 +199,6 @@ exports[`Toast > renders with description slot correctly 1`] = `
 </div>"
 `;
 
-exports[`Toast > renders with footer slot correctly 1`] = `
-"<!---->
-<!--teleport start-->
-<!--teleport end-->
-<div role="region" aria-label="Notifications (F8)" tabindex="-1"><span style="position: fixed; border: 0px; width: 1px; display: inline-block; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;" aria-hidden="" tabindex="0"></span>
-  <ol tabindex="-1" data-expanded="true" class="fixed flex flex-col w-[calc(100%-2rem)] sm:w-96 z-[100] data-[expanded=true]:h-[--height] right-4 bottom-4" style="--scale-factor: 0.05; --translate-factor: -1px; --gap: -16px; --front-height: 0px; --height: 0px;">
-    <li role="status" aria-live="off" aria-atomic="" tabindex="0" data-radix-vue-collection-item="" class="relative overflow-hidden bg-white dark:bg-gray-900 shadow-lg rounded-lg ring ring-gray-200 dark:ring-gray-800 p-4 flex gap-2.5 items-center" style="--height: 0; user-select: none; touch-action: none;" data-state="open" data-swipe-direction="right">
-      <!--v-if-->
-      <div class="w-0 flex-1 flex flex-col gap-1">
-        <!--v-if-->
-        <!--v-if-->
-        <!--v-if-->
-      </div>
-      <div class="flex gap-1.5 shrink-0 items-center"><button type="button" aria-label="Close" data-radix-toast-announce-exclude="" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-x-1.5 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 underline-offset-4 hover:underline focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-0">
-          <!---->
-          <!--v-if-->
-          <!--v-if-->
-        </button></div>
-      <div class="absolute inset-x-0 bottom-0 h-1 z-[-1] bg-primary-500 dark:bg-primary-400" style="width: 100%;"></div>
-    </li>
-  </ol><span style="position: fixed; border: 0px; width: 1px; display: inline-block; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;" aria-hidden="" tabindex="0"></span>
-</div>"
-`;
-
 exports[`Toast > renders with icon correctly 1`] = `
 "<!---->
 <!--teleport start-->