diff --git a/docs/content/docs/2.components/checkbox-group.md b/docs/content/docs/2.components/checkbox-group.md
index 3d79f203b0..f614939134 100644
--- a/docs/content/docs/2.components/checkbox-group.md
+++ b/docs/content/docs/2.components/checkbox-group.md
@@ -64,6 +64,7 @@ You can also pass an array of objects with the following properties:
 - `description?: string`{lang="ts-type"}
 - [`value?: string`{lang="ts-type"}](#value-key)
 - `disabled?: boolean`{lang="ts-type"}
+- [`icon?: string`{lang="ts-type"}](#with-icon-in-items)
 - `class?: any`{lang="ts-type"}
 - `ui?: { item?: ClassNameValue, container?: ClassNameValue, base?: ClassNameValue, 'indicator'?: ClassNameValue, icon?: ClassNameValue, wrapper?: ClassNameValue, label?: ClassNameValue, description?: ClassNameValue }`{lang="ts-type"}
 
@@ -335,6 +336,55 @@ props:
 ---
 ::
 
+## Examples
+
+### With icon in items :badge{label="Soon" class="align-text-top"}
+
+Use the `icon` property in the items to display an icon above the label when `indicator` is `hidden`.
+
+::note
+When the indicator is visible, the icon replaces the check mark inside it instead.
+::
+
+::component-code
+---
+prettier: true
+ignore:
+  - modelValue
+  - items
+  - indicator
+external:
+  - items
+  - modelValue
+externalTypes:
+  - CheckboxGroupItem[]
+items:
+  variant:
+    - card
+    - table
+props:
+  modelValue:
+    - 'system'
+  color: 'primary'
+  variant: 'table'
+  indicator: 'hidden'
+  orientation: 'horizontal'
+  items:
+    - label: 'System'
+      icon: 'i-lucide-monitor'
+      value: 'system'
+      class: 'w-20'
+    - label: 'Light'
+      icon: 'i-lucide-sun'
+      value: 'light'
+      class: 'w-20'
+    - label: 'Dark'
+      icon: 'i-lucide-moon'
+      value: 'dark'
+      class: 'w-20'
+---
+::
+
 ## API
 
 ### Props
diff --git a/docs/content/docs/2.components/checkbox.md b/docs/content/docs/2.components/checkbox.md
index 5704e5125c..ca810960a7 100644
--- a/docs/content/docs/2.components/checkbox.md
+++ b/docs/content/docs/2.components/checkbox.md
@@ -194,14 +194,21 @@ props:
 
 Use the `indicator` prop to change the position or hide the indicator. Defaults to `start`.
 
+::note
+When `indicator` is `hidden`, the icon is displayed above the label instead. :badge{label="Soon" color="info" class="float-right ms-auto text-right"}
+::
+
 ::component-code
 ---
+prettier: true
 ignore:
   - label
+  - icon
   - defaultValue
 props:
   indicator: 'end'
   variant: 'card'
+  icon: 'i-lucide-heart'
   defaultValue: true
   label: Check me
 ---
diff --git a/docs/content/docs/2.components/radio-group.md b/docs/content/docs/2.components/radio-group.md
index 40fc431639..95c8a91575 100644
--- a/docs/content/docs/2.components/radio-group.md
+++ b/docs/content/docs/2.components/radio-group.md
@@ -61,8 +61,9 @@ You can also pass an array of objects with the following properties:
 - `description?: string`{lang="ts-type"}
 - [`value?: string`{lang="ts-type"}](#value-key)
 - `disabled?: boolean`{lang="ts-type"}
+- [`icon?: string`{lang="ts-type"}](#with-icon-in-items)
 - `class?: any`{lang="ts-type"}
-- `ui?: { item?: ClassNameValue, container?: ClassNameValue, base?: ClassNameValue, 'indicator'?: ClassNameValue, wrapper?: ClassNameValue, label?: ClassNameValue, description?: ClassNameValue }`{lang="ts-type"}
+- `ui?: { item?: ClassNameValue, container?: ClassNameValue, base?: ClassNameValue, 'indicator'?: ClassNameValue, wrapper?: ClassNameValue, label?: ClassNameValue, icon?: ClassNameValue, description?: ClassNameValue }`{lang="ts-type"}
 
 ::component-code
 ---
@@ -290,6 +291,54 @@ props:
 ---
 ::
 
+## Examples
+
+### With icon in items :badge{label="Soon" class="align-text-top"}
+
+Use the `icon` property in the items to display an icon above the label when `indicator` is `hidden`.
+
+::note
+A radio has no icon inside its indicator, so `icon` only renders when the indicator is hidden.
+::
+
+::component-code
+---
+prettier: true
+ignore:
+  - modelValue
+  - items
+  - indicator
+external:
+  - items
+  - modelValue
+externalTypes:
+  - RadioGroupItem[]
+items:
+  variant:
+    - card
+    - table
+props:
+  modelValue: 'system'
+  color: 'primary'
+  indicator: 'hidden'
+  variant: 'table'
+  orientation: 'horizontal'
+  items:
+    - label: 'System'
+      icon: 'i-lucide-monitor'
+      value: 'system'
+      class: 'w-20'
+    - label: 'Light'
+      icon: 'i-lucide-sun'
+      value: 'light'
+      class: 'w-20'
+    - label: 'Dark'
+      icon: 'i-lucide-moon'
+      value: 'dark'
+      class: 'w-20'
+---
+::
+
 ## API
 
 ### Props
diff --git a/playgrounds/nuxt/app/pages/components/checkbox-group.vue b/playgrounds/nuxt/app/pages/components/checkbox-group.vue
index 14033d2b3d..f7387bf142 100644
--- a/playgrounds/nuxt/app/pages/components/checkbox-group.vue
+++ b/playgrounds/nuxt/app/pages/components/checkbox-group.vue
@@ -32,6 +32,11 @@ const itemsWithDescription = [
   { value: '2', label: 'Option 2', description: 'Description 2' },
   { value: '3', label: 'Option 3', description: 'Description 3' }
 ]
+const itemsWithIcon = [
+  { value: '1', label: 'System', icon: 'i-lucide-monitor' },
+  { value: '2', label: 'Light', icon: 'i-lucide-sun' },
+  { value: '3', label: 'Dark', icon: 'i-lucide-moon' }
+]
 </script>
 
 <template>
@@ -47,6 +52,7 @@ const itemsWithDescription = [
     <UCheckboxGroup :items="items" :default-value="['1']" :orientation="orientation" v-bind="props" />
     <UCheckboxGroup :items="itemsLiteral" :default-value="['Option 1']" :orientation="orientation" v-bind="props" />
     <UCheckboxGroup :items="itemsWithDescription" :orientation="orientation" v-bind="props" />
+    <UCheckboxGroup :items="itemsWithIcon" :orientation="orientation" v-bind="props" />
     <UCheckboxGroup :items="items" disabled :orientation="orientation" v-bind="props" />
     <UCheckboxGroup :items="items" legend="Legend" :orientation="orientation" v-bind="props" />
     <UCheckboxGroup :items="items" legend="Legend" required :orientation="orientation" v-bind="props" />
diff --git a/playgrounds/nuxt/app/pages/components/radio-group.vue b/playgrounds/nuxt/app/pages/components/radio-group.vue
index 447367f1fe..cb53eabbba 100644
--- a/playgrounds/nuxt/app/pages/components/radio-group.vue
+++ b/playgrounds/nuxt/app/pages/components/radio-group.vue
@@ -31,6 +31,11 @@ const itemsWithDescription = [
   { value: '2', label: 'Option 2', description: 'Description 2' },
   { value: '3', label: 'Option 3', description: 'Description 3' }
 ]
+const itemsWithIcon = [
+  { value: '1', label: 'System', icon: 'i-lucide-monitor' },
+  { value: '2', label: 'Light', icon: 'i-lucide-sun' },
+  { value: '3', label: 'Dark', icon: 'i-lucide-moon' }
+]
 </script>
 
 <template>
@@ -46,6 +51,7 @@ const itemsWithDescription = [
     <URadioGroup :items="items" default-value="1" :orientation="orientation" v-bind="props" />
     <URadioGroup :items="itemsLiteral" default-value="Option 1" :orientation="orientation" v-bind="props" />
     <URadioGroup :items="itemsWithDescription" :orientation="orientation" v-bind="props" />
+    <URadioGroup :items="itemsWithIcon" :orientation="orientation" v-bind="props" />
     <URadioGroup :items="items" disabled :orientation="orientation" v-bind="props" />
     <URadioGroup :items="items" legend="Legend" :orientation="orientation" v-bind="props" />
     <URadioGroup :items="items" legend="Legend" required :orientation="orientation" v-bind="props" />
diff --git a/src/runtime/components/Checkbox.vue b/src/runtime/components/Checkbox.vue
index ba385b8bef..ba30ed69c0 100644
--- a/src/runtime/components/Checkbox.vue
+++ b/src/runtime/components/Checkbox.vue
@@ -37,7 +37,7 @@ export interface CheckboxProps<T = boolean> extends Pick<CheckboxRootProps<T>, '
   /** Highlight the ring color like a focus state. */
   highlight?: boolean
   /**
-   * The icon displayed when checked.
+   * The icon displayed when checked, or above the label when `indicator` is `hidden`.
    * @defaultValue appConfig.ui.icons.check
    * @IconifyIcon
    */
@@ -97,7 +97,24 @@ const size = computed(() => formFieldSize.value ?? props.size)
 
 const disabled = computed(() => formFieldDisabled.value ?? props.disabled)
 
+// When the indicator is hidden the checked icon is never visible, so `icon` renders above the
+// label instead. No `appConfig` fallback here, an unset `icon` must render nothing.
+const labelIcon = computed(() => props.indicator === 'hidden' ? props.icon : undefined)
+
 const attrs = useAttrs()
+
+// An icon only item has no text to name the control, and `UIcon` is `aria-hidden`. Fall back to
+// the value like reka-ui's `Radio` does, so both components expose an accessible name.
+const ariaLabel = computed(() => {
+  if (attrs['aria-label']) {
+    return attrs['aria-label'] as string
+  }
+  if (props.label || slots.label) {
+    return undefined
+  }
+  return props.value != null ? String(props.value) : undefined
+})
+
 // Omit `data-state` to prevent conflicts with parent components (e.g. TooltipTrigger)
 const forwardedAttrs = computed(() => {
   const { 'data-state': _, ...rest } = attrs
@@ -133,12 +150,13 @@ function onUpdate(value: any) {
         v-bind="{ ...rootProps, ...forwardedAttrs, ...ariaAttrs }"
         :name="name"
         :disabled="disabled"
+        :aria-label="ariaLabel"
         data-slot="base"
         :class="ui.base({ class: props.ui?.base })"
         @update:model-value="onUpdate"
       >
         <template #default="{ state }">
-          <CheckboxIndicator data-slot="indicator" :class="ui.indicator({ class: props.ui?.indicator })">
+          <CheckboxIndicator v-if="props.indicator !== 'hidden'" data-slot="indicator" :class="ui.indicator({ class: props.ui?.indicator })">
             <UIcon v-if="state === 'indeterminate'" :name="props.indeterminateIcon || appConfig.ui.icons.minus" data-slot="icon" :class="ui.icon({ class: props.ui?.icon })" />
             <UIcon v-else :name="props.icon || appConfig.ui.icons.check" data-slot="icon" :class="ui.icon({ class: props.ui?.icon })" />
           </CheckboxIndicator>
@@ -146,7 +164,8 @@ function onUpdate(value: any) {
       </CheckboxRoot>
     </div>
 
-    <div v-if="(props.label || !!slots.label) || (props.description || !!slots.description)" data-slot="wrapper" :class="ui.wrapper({ class: props.ui?.wrapper })">
+    <div v-if="labelIcon || (props.label || !!slots.label) || (props.description || !!slots.description)" data-slot="wrapper" :class="ui.wrapper({ class: props.ui?.wrapper })">
+      <UIcon v-if="labelIcon" :name="labelIcon" data-slot="icon" :class="ui.icon({ class: props.ui?.icon })" />
       <component :is="(!props.variant || props.variant === 'list') ? Label : 'p'" v-if="props.label || !!slots.label" :for="id" data-slot="label" :class="ui.label({ class: props.ui?.label })">
         <slot name="label" :label="props.label">
           {{ props.label }}
diff --git a/src/runtime/components/CheckboxGroup.vue b/src/runtime/components/CheckboxGroup.vue
index 0415be82d2..6f0d6db789 100644
--- a/src/runtime/components/CheckboxGroup.vue
+++ b/src/runtime/components/CheckboxGroup.vue
@@ -4,6 +4,7 @@ import type { VNode } from 'vue'
 import type { AppConfig } from '@nuxt/schema'
 import theme from '#build/ui/checkbox-group'
 import type { CheckboxProps } from './Checkbox.vue'
+import type { IconProps } from './Icon.vue'
 import type { AcceptableValue, GetItemKeys, GetModelValue, GetModelValueEmits } from '../types/utils'
 import type { ComponentConfig } from '../types/tv'
 
@@ -16,6 +17,11 @@ export type CheckboxGroupItem = CheckboxGroupValue | {
   description?: string
   disabled?: boolean
   value?: string
+  /**
+   * The icon displayed when checked, or above the label when `indicator` is `hidden`.
+   * @IconifyIcon
+   */
+  icon?: IconProps['name']
   class?: any
   ui?: Pick<CheckboxGroup['slots'], 'item'> & Omit<Required<CheckboxProps>['ui'], 'root'>
   [key: string]: any
@@ -104,7 +110,7 @@ const props = useComponentProps<CheckboxGroupProps<T, VK>>('checkboxGroup', _pro
 const appConfig = useAppConfig() as CheckboxGroup['AppConfig']
 
 const rootProps = useForwardProps(reactivePick(props, 'as', 'modelValue', 'defaultValue', 'orientation', 'loop', 'required'), emits)
-const checkboxProps = useForwardProps(reactivePick(props, 'variant', 'indicator', 'icon'))
+const checkboxProps = useForwardProps(reactivePick(props, 'variant', 'indicator'))
 const getProxySlots = () => omit(slots, ['legend'])
 
 const { emitFormChange, emitFormInput, color: formFieldColor, highlight: formFieldHighlight, name, size: formFieldSize, id: _id, disabled: formFieldDisabled, ariaAttrs } = useFormField<CheckboxGroupProps<T>>(_props, { bind: false })
@@ -129,6 +135,7 @@ const ui = computed(() => tv({ extend: theme, ...(appConfig.ui?.checkboxGroup ||
   orientation: props.orientation,
   color: color.value,
   variant: props.variant,
+  highlight: highlight.value,
   disabled: disabled.value
 }))
 
@@ -200,6 +207,7 @@ function onUpdate(value: any) {
         v-for="item in normalizedItems"
         :key="item.value"
         v-bind="{ ...item, ...checkboxProps }"
+        :icon="item.icon ?? props.icon"
         :color="color"
         :highlight="highlight"
         :size="size"
diff --git a/src/runtime/components/RadioGroup.vue b/src/runtime/components/RadioGroup.vue
index 7a33a71319..5f47be358b 100644
--- a/src/runtime/components/RadioGroup.vue
+++ b/src/runtime/components/RadioGroup.vue
@@ -3,6 +3,7 @@ import type { RadioGroupRootProps, RadioGroupRootEmits } from 'reka-ui'
 import type { VNode } from 'vue'
 import type { AppConfig } from '@nuxt/schema'
 import theme from '#build/ui/radio-group'
+import type { IconProps } from './Icon.vue'
 import type { AcceptableValue, GetItemKeys, GetModelValue, GetModelValueEmits } from '../types/utils'
 import type { ComponentConfig } from '../types/tv'
 
@@ -15,8 +16,13 @@ export type RadioGroupItem = RadioGroupValue | {
   description?: string
   disabled?: boolean
   value?: RadioGroupValue
+  /**
+   * The icon displayed above the label when `indicator` is `hidden`.
+   * @IconifyIcon
+   */
+  icon?: IconProps['name']
   class?: any
-  ui?: Pick<RadioGroup['slots'], 'item' | 'container' | 'base' | 'indicator' | 'wrapper' | 'label' | 'description'>
+  ui?: Pick<RadioGroup['slots'], 'item' | 'container' | 'base' | 'indicator' | 'wrapper' | 'label' | 'icon' | 'description'>
   [key: string]: any
 }
 
@@ -100,6 +106,7 @@ import { useForwardProps } from '../composables/useForwardProps'
 import { useFormField } from '../composables/useFormField'
 import { get } from '../utils'
 import { tv } from '../utils/tv'
+import UIcon from './Icon.vue'
 
 const _props = withDefaults(defineProps<RadioGroupProps<T, VK>>(), {
   valueKey: 'value' as never,
@@ -178,6 +185,12 @@ const normalizedItems = computed(() => {
   return props.items.map(normalizeItem)
 })
 
+// Mirrors `Checkbox`'s `labelIcon`: with the indicator hidden the icon has no box to sit in,
+// so it renders above the label instead.
+function labelIcon(item: any) {
+  return props.indicator === 'hidden' ? item.icon : undefined
+}
+
 function onUpdate(value: any) {
   // @ts-expect-error - 'target' does not exist in type 'EventInit'
   const event = new Event('change', { target: { value } })
@@ -220,7 +233,8 @@ function onUpdate(value: any) {
           </RRadioGroupItem>
         </div>
 
-        <div v-if="(item.label || !!slots.label) || (item.description || !!slots.description)" data-slot="wrapper" :class="ui.wrapper({ class: [props.ui?.wrapper, item.ui?.wrapper] })">
+        <div v-if="labelIcon(item) || (item.label || !!slots.label) || (item.description || !!slots.description)" data-slot="wrapper" :class="ui.wrapper({ class: [props.ui?.wrapper, item.ui?.wrapper] })">
+          <UIcon v-if="labelIcon(item)" :name="labelIcon(item)" data-slot="icon" :class="ui.icon({ class: [props.ui?.icon, item.ui?.icon] })" />
           <component :is="(!props.variant || props.variant === 'list') ? Label : 'p'" v-if="item.label || !!slots.label" :for="item.id" data-slot="label" :class="ui.label({ class: [props.ui?.label, item.ui?.label], disabled: item.disabled || disabled })">
             <slot name="label" :item="item" :model-value="(props.modelValue as RadioGroupValue)">
               {{ item.label }}
diff --git a/src/theme/checkbox-group.ts b/src/theme/checkbox-group.ts
index b310c9674b..ef85c92882 100644
--- a/src/theme/checkbox-group.ts
+++ b/src/theme/checkbox-group.ts
@@ -1,4 +1,6 @@
 import type { ModuleOptions } from '../module'
+// `table` is defined here rather than in checkbox.ts, so its focus ring is too
+import { focusCard, hover } from './checkbox'
 
 export default (options: Required<ModuleOptions>) => ({
   slots: {
@@ -24,7 +26,7 @@ export default (options: Required<ModuleOptions>) => ({
       list: {},
       card: {},
       table: {
-        item: 'border border-muted'
+        item: [`border border-muted ${hover}bg-elevated/50`, options.theme.transitions && 'transition-colors']
       }
     },
     size: {
@@ -54,11 +56,29 @@ export default (options: Required<ModuleOptions>) => ({
         legend: 'after:content-[\'*\'] after:ms-0.5 after:text-error'
       }
     },
+    highlight: {
+      true: {},
+      false: {}
+    },
     disabled: {
       true: {}
     }
   },
   compoundVariants: [
+    ...[...(options.theme.colors || []).map((color: string) => [color, color]), ['neutral', 'inverted']].map(([color, token]: string[]) => ({
+      color,
+      variant: 'table',
+      class: {
+        item: focusCard(token!)
+      }
+    })),
+    {
+      variant: 'table',
+      highlight: false,
+      class: {
+        item: `${hover}border-accented`
+      }
+    },
     { size: 'xs', variant: 'table', class: { item: 'p-2.5' } },
     { size: 'sm', variant: 'table', class: { item: 'p-3' } },
     { size: 'md', variant: 'table', class: { item: 'p-3.5' } },
@@ -103,6 +123,7 @@ export default (options: Required<ModuleOptions>) => ({
     }
   ],
   defaultVariants: {
+    highlight: false,
     size: 'md',
     variant: 'list',
     color: 'primary'
diff --git a/src/theme/checkbox.ts b/src/theme/checkbox.ts
index 8a977897d6..261252b921 100644
--- a/src/theme/checkbox.ts
+++ b/src/theme/checkbox.ts
@@ -1,12 +1,21 @@
 import type { ModuleOptions } from '../module'
 
+// Shared with `checkbox-group` and `radio-group`, which style the same states on their own slots.
+export const hover = 'hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:'
+
+// `list` puts focus on the control, which is the click target there. `card` and `table`
+// render the root as a label wrapping everything, so focus belongs on the card itself,
+// as it does whenever the control is `sr-only`.
+export const focusControl = (token: string) => `outline-${token}/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-${token}`
+export const focusCard = (token: string) => `outline-${token}/25 has-focus-visible:outline-3 not-has-disabled:has-focus-visible:border-${token} has-focus-visible:z-[1]`
+
 export default (options: Required<ModuleOptions>) => ({
   slots: {
     root: 'relative flex items-start',
     container: 'flex items-center',
-    base: 'rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3',
+    base: 'rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-none',
     indicator: 'flex items-center justify-center size-full text-inverted',
-    icon: 'shrink-0 size-full',
+    icon: 'shrink-0',
     wrapper: 'w-full',
     label: 'block font-medium text-default',
     description: 'text-muted'
@@ -14,11 +23,9 @@ export default (options: Required<ModuleOptions>) => ({
   variants: {
     color: {
       ...Object.fromEntries((options.theme.colors || []).map((color: string) => [color, {
-        base: `outline-${color}/25 focus-visible:ring-${color}`,
         indicator: `bg-${color}`
       }])),
       neutral: {
-        base: 'outline-inverted/25 focus-visible:ring-inverted',
         indicator: 'bg-inverted'
       }
     },
@@ -27,7 +34,7 @@ export default (options: Required<ModuleOptions>) => ({
         root: ''
       },
       card: {
-        root: 'border border-muted rounded-lg'
+        root: [`border border-muted rounded-lg ${hover}bg-elevated/50`, options.theme.transitions && 'transition-colors']
       }
     },
     indicator: {
@@ -41,32 +48,37 @@ export default (options: Required<ModuleOptions>) => ({
       },
       hidden: {
         base: 'sr-only',
-        wrapper: 'text-center'
+        wrapper: 'flex flex-col items-center gap-1 text-center'
       }
     },
     size: {
       xs: {
         base: 'size-3',
+        icon: 'size-2.5',
         container: 'h-4',
         wrapper: 'text-xs'
       },
       sm: {
         base: 'size-3.5',
+        icon: 'size-3',
         container: 'h-4',
         wrapper: 'text-xs'
       },
       md: {
         base: 'size-4',
+        icon: 'size-3.5',
         container: 'h-5',
         wrapper: 'text-sm'
       },
       lg: {
         base: 'size-4.5',
+        icon: 'size-4',
         container: 'h-5',
         wrapper: 'text-sm'
       },
       xl: {
         base: 'size-5',
+        icon: 'size-4.5',
         container: 'h-6',
         wrapper: 'text-base'
       }
@@ -85,30 +97,72 @@ export default (options: Required<ModuleOptions>) => ({
       }
     },
     highlight: {
-      true: ''
+      true: '',
+      false: ''
     },
     checked: {
       true: ''
     }
   },
   compoundVariants: [
+    {
+      indicator: 'hidden',
+      class: {
+        container: 'h-auto'
+      }
+    },
+    {
+      variant: 'card',
+      highlight: false,
+      class: {
+        root: `${hover}border-accented`
+      }
+    },
+    { size: 'xs', indicator: 'hidden', class: { icon: 'size-3' } },
+    { size: 'sm', indicator: 'hidden', class: { icon: 'size-3.5' } },
+    { size: 'md', indicator: 'hidden', class: { icon: 'size-4' } },
+    { size: 'lg', indicator: 'hidden', class: { icon: 'size-4.5' } },
+    { size: 'xl', indicator: 'hidden', class: { icon: 'size-5' } },
     { size: 'xs', variant: 'card', class: { root: 'p-2.5' } },
     { size: 'sm', variant: 'card', class: { root: 'p-3' } },
     { size: 'md', variant: 'card', class: { root: 'p-3.5' } },
     { size: 'lg', variant: 'card', class: { root: 'p-4' } },
     { size: 'xl', variant: 'card', class: { root: 'p-4.5' } },
+    ...[...(options.theme.colors || []).map((color: string) => [color, color]), ['neutral', 'inverted']].map(([color, token]: string[]) => ({
+      color,
+      variant: 'list',
+      indicator: ['start', 'end'],
+      class: {
+        base: focusControl(token!)
+      }
+    })),
+    ...[...(options.theme.colors || []).map((color: string) => [color, color]), ['neutral', 'inverted']].map(([color, token]: string[]) => ({
+      color,
+      variant: 'card',
+      class: {
+        root: focusCard(token!)
+      }
+    })),
+    ...[...(options.theme.colors || []).map((color: string) => [color, color]), ['neutral', 'inverted']].map(([color, token]: string[]) => ({
+      color,
+      variant: 'list',
+      indicator: 'hidden',
+      class: {
+        root: focusCard(token!)
+      }
+    })),
     ...(options.theme.colors || []).map((color: string) => ({
       color,
       variant: 'card',
       class: {
-        root: `has-data-[state=checked]:border-${color}`
+        root: `has-data-[state=checked]:border-${color}/50 has-data-[state=checked]:bg-${color}/10`
       }
     })),
     {
       color: 'neutral',
       variant: 'card',
       class: {
-        root: 'has-data-[state=checked]:border-inverted'
+        root: 'has-data-[state=checked]:border-inverted/50 has-data-[state=checked]:bg-elevated'
       }
     },
     {
@@ -118,6 +172,22 @@ export default (options: Required<ModuleOptions>) => ({
         root: 'cursor-not-allowed'
       }
     },
+    ...(options.theme.colors || []).map((color: string) => ({
+      color,
+      indicator: 'hidden',
+      highlight: true,
+      class: {
+        root: `not-has-disabled:border-${color} not-has-disabled:has-data-[state=checked]:border-${color}`
+      }
+    })),
+    {
+      color: 'neutral',
+      indicator: 'hidden',
+      highlight: true,
+      class: {
+        root: 'not-has-disabled:border-inverted not-has-disabled:has-data-[state=checked]:border-inverted'
+      }
+    },
     ...(options.theme.colors || []).map((color: string) => ({
       color,
       highlight: true,
@@ -134,6 +204,7 @@ export default (options: Required<ModuleOptions>) => ({
     }
   ],
   defaultVariants: {
+    highlight: false,
     size: 'md',
     color: 'primary',
     variant: 'list',
diff --git a/src/theme/radio-group.ts b/src/theme/radio-group.ts
index 640199c1b4..8498d42c3c 100644
--- a/src/theme/radio-group.ts
+++ b/src/theme/radio-group.ts
@@ -1,4 +1,5 @@
 import type { ModuleOptions } from '../module'
+import { focusCard, focusControl, hover } from './checkbox'
 
 export default (options: Required<ModuleOptions>) => ({
   slots: {
@@ -7,20 +8,19 @@ export default (options: Required<ModuleOptions>) => ({
     legend: 'mb-1 block font-medium text-default',
     item: 'flex items-start',
     container: 'flex items-center',
-    base: 'rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3',
+    base: 'rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-none',
     indicator: 'flex items-center justify-center size-full after:bg-default after:rounded-full',
     wrapper: 'w-full',
     label: 'block font-medium text-default',
+    icon: 'shrink-0',
     description: 'text-muted'
   },
   variants: {
     color: {
       ...Object.fromEntries((options.theme.colors || []).map((color: string) => [color, {
-        base: `outline-${color}/25 focus-visible:ring-${color}`,
         indicator: `bg-${color}`
       }])),
       neutral: {
-        base: 'outline-inverted/25 focus-visible:ring-inverted',
         indicator: 'bg-inverted'
       }
     },
@@ -29,10 +29,10 @@ export default (options: Required<ModuleOptions>) => ({
         item: ''
       },
       card: {
-        item: 'border border-muted rounded-lg'
+        item: [`border border-muted rounded-lg ${hover}bg-elevated/50`, options.theme.transitions && 'transition-colors']
       },
       table: {
-        item: 'border border-muted'
+        item: [`border border-muted ${hover}bg-elevated/50`, options.theme.transitions && 'transition-colors']
       }
     },
     orientation: {
@@ -54,7 +54,7 @@ export default (options: Required<ModuleOptions>) => ({
       },
       hidden: {
         base: 'sr-only',
-        wrapper: 'text-center'
+        wrapper: 'flex flex-col items-center gap-1 text-center'
       }
     },
     size: {
@@ -100,7 +100,8 @@ export default (options: Required<ModuleOptions>) => ({
       }
     },
     highlight: {
-      true: ''
+      true: '',
+      false: ''
     },
     disabled: {
       true: {
@@ -117,6 +118,24 @@ export default (options: Required<ModuleOptions>) => ({
     }
   },
   compoundVariants: [
+    {
+      indicator: 'hidden',
+      class: {
+        container: 'h-auto'
+      }
+    },
+    {
+      variant: ['card', 'table'],
+      highlight: false,
+      class: {
+        item: `${hover}border-accented`
+      }
+    },
+    { size: 'xs', indicator: 'hidden', class: { icon: 'size-3' } },
+    { size: 'sm', indicator: 'hidden', class: { icon: 'size-3.5' } },
+    { size: 'md', indicator: 'hidden', class: { icon: 'size-4' } },
+    { size: 'lg', indicator: 'hidden', class: { icon: 'size-4.5' } },
+    { size: 'xl', indicator: 'hidden', class: { icon: 'size-5' } },
     { size: 'xs', variant: ['card', 'table'], class: { item: 'p-2.5' } },
     { size: 'sm', variant: ['card', 'table'], class: { item: 'p-3' } },
     { size: 'md', variant: ['card', 'table'], class: { item: 'p-3.5' } },
@@ -138,18 +157,41 @@ export default (options: Required<ModuleOptions>) => ({
         fieldset: 'gap-0 -space-y-px'
       }
     },
+    ...[...(options.theme.colors || []).map((color: string) => [color, color]), ['neutral', 'inverted']].map(([color, token]: string[]) => ({
+      color,
+      variant: 'list',
+      indicator: ['start', 'end'],
+      class: {
+        base: focusControl(token!)
+      }
+    })),
+    ...[...(options.theme.colors || []).map((color: string) => [color, color]), ['neutral', 'inverted']].map(([color, token]: string[]) => ({
+      color,
+      variant: ['card', 'table'],
+      class: {
+        item: focusCard(token!)
+      }
+    })),
+    ...[...(options.theme.colors || []).map((color: string) => [color, color]), ['neutral', 'inverted']].map(([color, token]: string[]) => ({
+      color,
+      variant: 'list',
+      indicator: 'hidden',
+      class: {
+        item: focusCard(token!)
+      }
+    })),
     ...(options.theme.colors || []).map((color: string) => ({
       color,
       variant: 'card',
       class: {
-        item: `has-data-[state=checked]:border-${color}`
+        item: `has-data-[state=checked]:border-${color}/50 has-data-[state=checked]:bg-${color}/10`
       }
     })),
     {
       color: 'neutral',
       variant: 'card',
       class: {
-        item: 'has-data-[state=checked]:border-inverted'
+        item: 'has-data-[state=checked]:border-inverted/50 has-data-[state=checked]:bg-elevated'
       }
     },
     ...(options.theme.colors || []).map((color: string) => ({
@@ -173,6 +215,22 @@ export default (options: Required<ModuleOptions>) => ({
         item: 'cursor-not-allowed'
       }
     },
+    ...(options.theme.colors || []).map((color: string) => ({
+      color,
+      indicator: 'hidden',
+      highlight: true,
+      class: {
+        item: `not-has-disabled:border-${color} not-has-disabled:has-data-[state=checked]:border-${color}`
+      }
+    })),
+    {
+      color: 'neutral',
+      indicator: 'hidden',
+      highlight: true,
+      class: {
+        item: 'not-has-disabled:border-inverted not-has-disabled:has-data-[state=checked]:border-inverted'
+      }
+    },
     ...(options.theme.colors || []).map((color: string) => ({
       color,
       highlight: true,
@@ -189,6 +247,7 @@ export default (options: Required<ModuleOptions>) => ({
     }
   ],
   defaultVariants: {
+    highlight: false,
     size: 'md',
     color: 'primary',
     variant: 'list',
diff --git a/test/components/CheckboxGroup.spec.ts b/test/components/CheckboxGroup.spec.ts
index d13f5ac115..eaac1e02c8 100644
--- a/test/components/CheckboxGroup.spec.ts
+++ b/test/components/CheckboxGroup.spec.ts
@@ -1,7 +1,8 @@
 import { describe, it, expect, test } from 'vitest'
 import { axe } from 'vitest-axe'
-import { flushPromises, mount } from '@vue/test-utils'
+import { flushPromises, mount, type VueWrapper } from '@vue/test-utils'
 import CheckboxGroup from '../../src/runtime/components/CheckboxGroup.vue'
+import Checkbox from '../../src/runtime/components/Checkbox.vue'
 import type { FormInputEvents } from '../../src/module'
 import { renderForm } from '../utils/form'
 import theme from '#build/ui/checkbox-group'
@@ -31,6 +32,7 @@ describe('CheckboxGroup', () => {
     ['with descriptionKey', { props: { ...props, descriptionKey: 'value' } }],
     ['with disabled', { props: { ...props, disabled: true } }],
     ['with description', { props: { items: items.map((opt, count) => ({ ...opt, description: `Description ${count}` })) } }],
+    ['with icon', { props: { items: items.map(opt => ({ ...opt, icon: 'i-lucide-rocket' })), indicator: 'hidden' } }],
     ['with required', { props: { ...props, legend: 'Legend', required: true } }],
     ...sizes.map((size: string) => [`with size ${size}`, { props: { ...props, size, defaultValue: ['1'] } }]),
     ...variants.map((variant: string) => [`with primary variant ${variant}`, { props: { ...props, variant, defaultValue: ['1'] } }]),
@@ -64,6 +66,69 @@ describe('CheckboxGroup', () => {
     expect(await axe(wrapper.element)).toHaveNoViolations()
   })
 
+  it('forwards an item icon to the checkbox icon prop', async () => {
+    const wrapper = await mountSuspended(CheckboxGroup, {
+      props: { items: [{ value: '1', label: 'Option 1', icon: 'i-lucide-rocket' }] }
+    })
+    const checkbox = wrapper.findComponent(Checkbox) as unknown as VueWrapper<any>
+    expect(checkbox.props('icon')).toBe('i-lucide-rocket')
+  })
+
+  it('lets an item icon win over the group icon', async () => {
+    const wrapper = await mountSuspended(CheckboxGroup, {
+      props: {
+        icon: 'i-lucide-heart',
+        items: [{ value: '1', label: 'Option 1', icon: 'i-lucide-rocket' }, { value: '2', label: 'Option 2' }]
+      }
+    })
+    const checkboxes = wrapper.findAllComponents(Checkbox) as unknown as VueWrapper<any>[]
+    expect(checkboxes[0]!.props('icon')).toBe('i-lucide-rocket')
+    expect(checkboxes[1]!.props('icon')).toBe('i-lucide-heart')
+  })
+
+  it('renders an item icon next to the label only when the indicator is hidden', async () => {
+    const items = [{ value: '1', label: 'Option 1', icon: 'i-lucide-rocket' }]
+
+    const wrapper = await mountSuspended(CheckboxGroup, { props: { items } })
+    expect(wrapper.find('[data-slot="wrapper"] [data-slot="icon"]').exists()).toBe(false)
+
+    const hidden = await mountSuspended(CheckboxGroup, { props: { items, indicator: 'hidden' } })
+    expect(hidden.find('[data-slot="wrapper"] [data-slot="icon"]').exists()).toBe(true)
+  })
+
+  it('renders an item icon without a label', async () => {
+    const wrapper = await mountSuspended(CheckboxGroup, {
+      props: { items: [{ value: 'table', icon: 'i-lucide-table' }], indicator: 'hidden' }
+    })
+    expect(wrapper.find('[data-slot="wrapper"] [data-slot="icon"]').exists()).toBe(true)
+  })
+
+  it('names an icon only item from its value', async () => {
+    const items = [{ value: 'table', icon: 'i-lucide-table' }]
+
+    const wrapper = await mountSuspended(CheckboxGroup, { props: { items, indicator: 'hidden' } })
+    expect(wrapper.find('[data-slot="base"]').attributes('aria-label')).toBe('table')
+    expect(await axe(wrapper.element)).toHaveNoViolations()
+
+    const labelled = await mountSuspended(CheckboxGroup, {
+      props: { items: [{ ...items[0]!, label: 'Table' }], indicator: 'hidden' }
+    })
+    expect(labelled.find('[data-slot="base"]').attributes('aria-label')).toBeUndefined()
+  })
+
+  it('passes accessibility tests with icon only items', async () => {
+    const wrapper = await mountSuspended(CheckboxGroup, {
+      props: {
+        items: [{ value: 'system', icon: 'i-lucide-monitor' }, { value: 'light', icon: 'i-lucide-sun' }],
+        variant: 'table',
+        indicator: 'hidden',
+        orientation: 'horizontal',
+        defaultValue: ['system']
+      }
+    })
+    expect(await axe(wrapper.element)).toHaveNoViolations()
+  })
+
   describe('emits', () => {
     test('update:modelValue event', async () => {
       const wrapper = mount(CheckboxGroup, { props: { items: ['Option 1', 'Option 2'] } })
diff --git a/test/components/RadioGroup.spec.ts b/test/components/RadioGroup.spec.ts
index 5c849709a9..519fba4eff 100644
--- a/test/components/RadioGroup.spec.ts
+++ b/test/components/RadioGroup.spec.ts
@@ -30,6 +30,7 @@ describe('RadioGroup', () => {
     ['with descriptionKey', { props: { ...props, descriptionKey: 'value' } }],
     ['with disabled', { props: { ...props, disabled: true } }],
     ['with description', { props: { items: items.map((opt, count) => ({ ...opt, description: `Description ${count}` })) } }],
+    ['with icon', { props: { items: items.map(opt => ({ ...opt, icon: 'i-lucide-rocket' })), indicator: 'hidden' } }],
     ['with required', { props: { ...props, legend: 'Legend', required: true } }],
     ...sizes.map((size: string) => [`with size ${size}`, { props: { ...props, size, defaultValue: '1' } }]),
     ...variants.map((variant: string) => [`with primary variant ${variant}`, { props: { ...props, variant, defaultValue: '1' } }]),
@@ -55,6 +56,36 @@ describe('RadioGroup', () => {
     expect(await axe(wrapper.element)).toHaveNoViolations()
   })
 
+  it('renders an item icon next to the label only when the indicator is hidden', async () => {
+    const items = [{ value: '1', label: 'Option 1', icon: 'i-lucide-rocket' }]
+
+    const wrapper = await mountSuspended(RadioGroup, { props: { items } })
+    expect(wrapper.find('[data-slot="wrapper"] [data-slot="icon"]').exists()).toBe(false)
+
+    const hidden = await mountSuspended(RadioGroup, { props: { items, indicator: 'hidden' } })
+    expect(hidden.find('[data-slot="wrapper"] [data-slot="icon"]').exists()).toBe(true)
+  })
+
+  it('renders an item icon without a label', async () => {
+    const wrapper = await mountSuspended(RadioGroup, {
+      props: { items: [{ value: 'table', icon: 'i-lucide-table' }], indicator: 'hidden' }
+    })
+    expect(wrapper.find('[data-slot="wrapper"] [data-slot="icon"]').exists()).toBe(true)
+  })
+
+  it('passes accessibility tests with icon only items', async () => {
+    const wrapper = await mountSuspended(RadioGroup, {
+      props: {
+        items: [{ value: 'system', icon: 'i-lucide-monitor' }, { value: 'light', icon: 'i-lucide-sun' }],
+        variant: 'table',
+        indicator: 'hidden',
+        orientation: 'horizontal',
+        defaultValue: 'system'
+      }
+    })
+    expect(await axe(wrapper.element)).toHaveNoViolations()
+  })
+
   describe('emits', () => {
     test('update:modelValue event', async () => {
       const wrapper = mount(RadioGroup, { props: { items: ['Option 1', 'Option 2'] } })
diff --git a/test/components/__snapshots__/Checkbox-vue.spec.ts.snap b/test/components/__snapshots__/Checkbox-vue.spec.ts.snap
index 38139da7f2..ce4c36df37 100644
--- a/test/components/__snapshots__/Checkbox-vue.spec.ts.snap
+++ b/test/components/__snapshots__/Checkbox-vue.spec.ts.snap
@@ -2,7 +2,7 @@
 
 exports[`Checkbox > renders with ariaLabel correctly 1`] = `
 "<div data-slot="root" class="relative flex items-start flex-row">
-  <div data-slot="container" class="flex items-center h-5"><button aria-label="Aria label" data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
+  <div data-slot="container" class="flex items-center h-5"><button aria-label="Aria label" data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
       <!---->
     </button>
     <!--v-if-->
@@ -13,7 +13,7 @@ exports[`Checkbox > renders with ariaLabel correctly 1`] = `
 
 exports[`Checkbox > renders with as correctly 1`] = `
 "<section data-slot="root" class="relative flex items-start flex-row">
-  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
+  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
       <!---->
     </button>
     <!--v-if-->
@@ -24,7 +24,7 @@ exports[`Checkbox > renders with as correctly 1`] = `
 
 exports[`Checkbox > renders with class correctly 1`] = `
 "<div data-slot="root" class="relative items-start flex-row inline-flex">
-  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
+  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
       <!---->
     </button>
     <!--v-if-->
@@ -35,7 +35,7 @@ exports[`Checkbox > renders with class correctly 1`] = `
 
 exports[`Checkbox > renders with defaultValue correctly 1`] = `
 "<div data-slot="root" class="relative flex items-start flex-row">
-  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-full"></svg></span></button>
+  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-3.5"></svg></span></button>
     <!--v-if-->
   </div>
   <!--v-if-->
@@ -44,12 +44,13 @@ exports[`Checkbox > renders with defaultValue correctly 1`] = `
 
 exports[`Checkbox > renders with description correctly 1`] = `
 "<div data-slot="root" class="relative flex items-start flex-row">
-  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
+  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
       <!---->
     </button>
     <!--v-if-->
   </div>
-  <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0" data-slot="label" class="block font-medium text-default">Label</label>
+  <div data-slot="wrapper" class="w-full ms-2 text-sm">
+    <!--v-if--><label for="v-0" data-slot="label" class="block font-medium text-default">Label</label>
     <p data-slot="description" class="text-muted">Description</p>
   </div>
 </div>"
@@ -57,12 +58,13 @@ exports[`Checkbox > renders with description correctly 1`] = `
 
 exports[`Checkbox > renders with description slot correctly 1`] = `
 "<div data-slot="root" class="relative flex items-start flex-row">
-  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
+  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
       <!---->
     </button>
     <!--v-if-->
   </div>
-  <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0" data-slot="label" class="block font-medium text-default">Description slot</label>
+  <div data-slot="wrapper" class="w-full ms-2 text-sm">
+    <!--v-if--><label for="v-0" data-slot="label" class="block font-medium text-default">Description slot</label>
     <!--v-if-->
   </div>
 </div>"
@@ -70,7 +72,7 @@ exports[`Checkbox > renders with description slot correctly 1`] = `
 
 exports[`Checkbox > renders with disabled correctly 1`] = `
 "<div data-slot="root" class="relative flex items-start flex-row opacity-75">
-  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4 cursor-not-allowed" id="v-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-disabled="" disabled="">
+  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 cursor-not-allowed outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-disabled="" disabled="">
       <!---->
     </button>
     <!--v-if-->
@@ -81,7 +83,7 @@ exports[`Checkbox > renders with disabled correctly 1`] = `
 
 exports[`Checkbox > renders with icon correctly 1`] = `
 "<div data-slot="root" class="relative flex items-start flex-row">
-  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
+  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
       <!---->
     </button>
     <!--v-if-->
@@ -92,7 +94,7 @@ exports[`Checkbox > renders with icon correctly 1`] = `
 
 exports[`Checkbox > renders with id correctly 1`] = `
 "<div data-slot="root" class="relative flex items-start flex-row">
-  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="id" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
+  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="id" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
       <!---->
     </button>
     <!--v-if-->
@@ -103,7 +105,7 @@ exports[`Checkbox > renders with id correctly 1`] = `
 
 exports[`Checkbox > renders with indeterminate correctly 1`] = `
 "<div data-slot="root" class="relative flex items-start flex-row">
-  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0" role="checkbox" type="button" aria-checked="mixed" aria-required="false" data-state="indeterminate"><span data-state="indeterminate" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-full"></svg></span></button>
+  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0" role="checkbox" type="button" aria-checked="mixed" aria-required="false" data-state="indeterminate"><span data-state="indeterminate" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-3.5"></svg></span></button>
     <!--v-if-->
   </div>
   <!--v-if-->
@@ -112,7 +114,7 @@ exports[`Checkbox > renders with indeterminate correctly 1`] = `
 
 exports[`Checkbox > renders with indeterminateIcon correctly 1`] = `
 "<div data-slot="root" class="relative flex items-start flex-row">
-  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0" role="checkbox" type="button" aria-checked="mixed" aria-required="false" data-state="indeterminate"><span data-state="indeterminate" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-full"></svg></span></button>
+  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0" role="checkbox" type="button" aria-checked="mixed" aria-required="false" data-state="indeterminate"><span data-state="indeterminate" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-3.5"></svg></span></button>
     <!--v-if-->
   </div>
   <!--v-if-->
@@ -121,7 +123,7 @@ exports[`Checkbox > renders with indeterminateIcon correctly 1`] = `
 
 exports[`Checkbox > renders with indicator end correctly 1`] = `
 "<div data-slot="root" class="relative flex items-start flex-row-reverse">
-  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-full"></svg></span></button>
+  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-3.5"></svg></span></button>
     <!--v-if-->
   </div>
   <!--v-if-->
@@ -129,8 +131,8 @@ exports[`Checkbox > renders with indicator end correctly 1`] = `
 `;
 
 exports[`Checkbox > renders with indicator hidden correctly 1`] = `
-"<div data-slot="root" class="relative flex items-start">
-  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary sr-only size-4" id="v-0" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-full"></svg></span></button>
+"<div data-slot="root" class="relative flex items-start outline-primary/25 has-focus-visible:outline-3 not-has-disabled:has-focus-visible:border-primary has-focus-visible:z-[1]">
+  <div data-slot="container" class="flex items-center h-auto"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-none sr-only size-4" id="v-0" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked"></button>
     <!--v-if-->
   </div>
   <!--v-if-->
@@ -139,7 +141,7 @@ exports[`Checkbox > renders with indicator hidden correctly 1`] = `
 
 exports[`Checkbox > renders with indicator start correctly 1`] = `
 "<div data-slot="root" class="relative flex items-start flex-row">
-  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-full"></svg></span></button>
+  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-3.5"></svg></span></button>
     <!--v-if-->
   </div>
   <!--v-if-->
@@ -148,12 +150,13 @@ exports[`Checkbox > renders with indicator start correctly 1`] = `
 
 exports[`Checkbox > renders with label correctly 1`] = `
 "<div data-slot="root" class="relative flex items-start flex-row">
-  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
+  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
       <!---->
     </button>
     <!--v-if-->
   </div>
-  <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0" data-slot="label" class="block font-medium text-default">Label</label>
+  <div data-slot="wrapper" class="w-full ms-2 text-sm">
+    <!--v-if--><label for="v-0" data-slot="label" class="block font-medium text-default">Label</label>
     <!--v-if-->
   </div>
 </div>"
@@ -161,12 +164,13 @@ exports[`Checkbox > renders with label correctly 1`] = `
 
 exports[`Checkbox > renders with label slot correctly 1`] = `
 "<div data-slot="root" class="relative flex items-start flex-row">
-  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
+  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
       <!---->
     </button>
     <!--v-if-->
   </div>
-  <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0" data-slot="label" class="block font-medium text-default">Label slot</label>
+  <div data-slot="wrapper" class="w-full ms-2 text-sm">
+    <!--v-if--><label for="v-0" data-slot="label" class="block font-medium text-default">Label slot</label>
     <!--v-if-->
   </div>
 </div>"
@@ -174,7 +178,7 @@ exports[`Checkbox > renders with label slot correctly 1`] = `
 
 exports[`Checkbox > renders with modelValue correctly 1`] = `
 "<div data-slot="root" class="relative flex items-start flex-row">
-  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-full"></svg></span></button>
+  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-3.5"></svg></span></button>
     <!--v-if-->
   </div>
   <!--v-if-->
@@ -183,7 +187,7 @@ exports[`Checkbox > renders with modelValue correctly 1`] = `
 
 exports[`Checkbox > renders with name correctly 1`] = `
 "<div data-slot="root" class="relative flex items-start flex-row">
-  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
+  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
       <!---->
     </button>
     <!--v-if-->
@@ -193,8 +197,8 @@ exports[`Checkbox > renders with name correctly 1`] = `
 `;
 
 exports[`Checkbox > renders with neutral variant card correctly 1`] = `
-"<label data-slot="root" class="relative flex items-start border border-muted rounded-lg flex-row p-3.5 has-data-[state=checked]:border-inverted">
-  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-inverted/25 focus-visible:ring-inverted size-4" id="v-0" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-inverted"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-full"></svg></span></button>
+"<label data-slot="root" class="relative flex items-start border border-muted rounded-lg hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:bg-elevated/50 transition-colors flex-row hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:border-accented p-3.5 outline-inverted/25 has-focus-visible:outline-3 not-has-disabled:has-focus-visible:border-inverted has-focus-visible:z-[1] has-data-[state=checked]:border-inverted/50 has-data-[state=checked]:bg-elevated">
+  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-none size-4" id="v-0" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-inverted"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-3.5"></svg></span></button>
     <!--v-if-->
   </div>
   <!--v-if-->
@@ -202,8 +206,8 @@ exports[`Checkbox > renders with neutral variant card correctly 1`] = `
 `;
 
 exports[`Checkbox > renders with neutral variant card highlight correctly 1`] = `
-"<label data-slot="root" class="relative flex items-start border border-muted rounded-lg flex-row p-3.5 has-data-[state=checked]:border-inverted">
-  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset overflow-hidden focus-visible:outline-3 outline-inverted/25 focus-visible:ring-inverted size-4 ring-inverted" id="v-0" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-inverted"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-full"></svg></span></button>
+"<label data-slot="root" class="relative flex items-start border border-muted rounded-lg hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:bg-elevated/50 transition-colors flex-row p-3.5 outline-inverted/25 has-focus-visible:outline-3 not-has-disabled:has-focus-visible:border-inverted has-focus-visible:z-[1] has-data-[state=checked]:border-inverted/50 has-data-[state=checked]:bg-elevated">
+  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset overflow-hidden focus-visible:outline-none size-4 ring-inverted" id="v-0" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-inverted"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-3.5"></svg></span></button>
     <!--v-if-->
   </div>
   <!--v-if-->
@@ -212,7 +216,7 @@ exports[`Checkbox > renders with neutral variant card highlight correctly 1`] =
 
 exports[`Checkbox > renders with neutral variant list correctly 1`] = `
 "<div data-slot="root" class="relative flex items-start flex-row">
-  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-inverted/25 focus-visible:ring-inverted size-4" id="v-0" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-inverted"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-full"></svg></span></button>
+  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 outline-inverted/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-inverted" id="v-0" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-inverted"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-3.5"></svg></span></button>
     <!--v-if-->
   </div>
   <!--v-if-->
@@ -221,7 +225,7 @@ exports[`Checkbox > renders with neutral variant list correctly 1`] = `
 
 exports[`Checkbox > renders with neutral variant list highlight correctly 1`] = `
 "<div data-slot="root" class="relative flex items-start flex-row">
-  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset overflow-hidden focus-visible:outline-3 outline-inverted/25 focus-visible:ring-inverted size-4 ring-inverted" id="v-0" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-inverted"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-full"></svg></span></button>
+  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset overflow-hidden size-4 outline-inverted/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-inverted ring-inverted" id="v-0" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-inverted"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-3.5"></svg></span></button>
     <!--v-if-->
   </div>
   <!--v-if-->
@@ -229,8 +233,8 @@ exports[`Checkbox > renders with neutral variant list highlight correctly 1`] =
 `;
 
 exports[`Checkbox > renders with primary variant card correctly 1`] = `
-"<label data-slot="root" class="relative flex items-start border border-muted rounded-lg flex-row p-3.5 has-data-[state=checked]:border-primary">
-  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-full"></svg></span></button>
+"<label data-slot="root" class="relative flex items-start border border-muted rounded-lg hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:bg-elevated/50 transition-colors flex-row hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:border-accented p-3.5 outline-primary/25 has-focus-visible:outline-3 not-has-disabled:has-focus-visible:border-primary has-focus-visible:z-[1] has-data-[state=checked]:border-primary/50 has-data-[state=checked]:bg-primary/10">
+  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-none size-4" id="v-0" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-3.5"></svg></span></button>
     <!--v-if-->
   </div>
   <!--v-if-->
@@ -238,8 +242,8 @@ exports[`Checkbox > renders with primary variant card correctly 1`] = `
 `;
 
 exports[`Checkbox > renders with primary variant card highlight correctly 1`] = `
-"<label data-slot="root" class="relative flex items-start border border-muted rounded-lg flex-row p-3.5 has-data-[state=checked]:border-primary">
-  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4 ring-primary" id="v-0" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-full"></svg></span></button>
+"<label data-slot="root" class="relative flex items-start border border-muted rounded-lg hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:bg-elevated/50 transition-colors flex-row p-3.5 outline-primary/25 has-focus-visible:outline-3 not-has-disabled:has-focus-visible:border-primary has-focus-visible:z-[1] has-data-[state=checked]:border-primary/50 has-data-[state=checked]:bg-primary/10">
+  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset overflow-hidden focus-visible:outline-none size-4 ring-primary" id="v-0" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-3.5"></svg></span></button>
     <!--v-if-->
   </div>
   <!--v-if-->
@@ -248,7 +252,7 @@ exports[`Checkbox > renders with primary variant card highlight correctly 1`] =
 
 exports[`Checkbox > renders with primary variant list correctly 1`] = `
 "<div data-slot="root" class="relative flex items-start flex-row">
-  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-full"></svg></span></button>
+  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-3.5"></svg></span></button>
     <!--v-if-->
   </div>
   <!--v-if-->
@@ -257,7 +261,7 @@ exports[`Checkbox > renders with primary variant list correctly 1`] = `
 
 exports[`Checkbox > renders with primary variant list highlight correctly 1`] = `
 "<div data-slot="root" class="relative flex items-start flex-row">
-  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4 ring-primary" id="v-0" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-full"></svg></span></button>
+  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary ring-primary" id="v-0" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-3.5"></svg></span></button>
     <!--v-if-->
   </div>
   <!--v-if-->
@@ -266,12 +270,13 @@ exports[`Checkbox > renders with primary variant list highlight correctly 1`] =
 
 exports[`Checkbox > renders with required correctly 1`] = `
 "<div data-slot="root" class="relative flex items-start flex-row">
-  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0" role="checkbox" type="button" aria-checked="false" aria-required="true" data-state="unchecked">
+  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0" role="checkbox" type="button" aria-checked="false" aria-required="true" data-state="unchecked">
       <!---->
     </button>
     <!--v-if-->
   </div>
-  <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0" data-slot="label" class="block font-medium text-default after:content-['*'] after:ms-0.5 after:text-error">Label</label>
+  <div data-slot="wrapper" class="w-full ms-2 text-sm">
+    <!--v-if--><label for="v-0" data-slot="label" class="block font-medium text-default after:content-['*'] after:ms-0.5 after:text-error">Label</label>
     <!--v-if-->
   </div>
 </div>"
@@ -279,7 +284,7 @@ exports[`Checkbox > renders with required correctly 1`] = `
 
 exports[`Checkbox > renders with size lg correctly 1`] = `
 "<div data-slot="root" class="relative flex items-start flex-row">
-  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4.5" id="v-0" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-full"></svg></span></button>
+  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4.5 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-4"></svg></span></button>
     <!--v-if-->
   </div>
   <!--v-if-->
@@ -288,7 +293,7 @@ exports[`Checkbox > renders with size lg correctly 1`] = `
 
 exports[`Checkbox > renders with size md correctly 1`] = `
 "<div data-slot="root" class="relative flex items-start flex-row">
-  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-full"></svg></span></button>
+  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-3.5"></svg></span></button>
     <!--v-if-->
   </div>
   <!--v-if-->
@@ -297,7 +302,7 @@ exports[`Checkbox > renders with size md correctly 1`] = `
 
 exports[`Checkbox > renders with size sm correctly 1`] = `
 "<div data-slot="root" class="relative flex items-start flex-row">
-  <div data-slot="container" class="flex items-center h-4"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-3.5" id="v-0" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-full"></svg></span></button>
+  <div data-slot="container" class="flex items-center h-4"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-3.5 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-3"></svg></span></button>
     <!--v-if-->
   </div>
   <!--v-if-->
@@ -306,7 +311,7 @@ exports[`Checkbox > renders with size sm correctly 1`] = `
 
 exports[`Checkbox > renders with size xl correctly 1`] = `
 "<div data-slot="root" class="relative flex items-start flex-row">
-  <div data-slot="container" class="flex items-center h-6"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-5" id="v-0" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-full"></svg></span></button>
+  <div data-slot="container" class="flex items-center h-6"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-5 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-4.5"></svg></span></button>
     <!--v-if-->
   </div>
   <!--v-if-->
@@ -315,7 +320,7 @@ exports[`Checkbox > renders with size xl correctly 1`] = `
 
 exports[`Checkbox > renders with size xs correctly 1`] = `
 "<div data-slot="root" class="relative flex items-start flex-row">
-  <div data-slot="container" class="flex items-center h-4"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-3" id="v-0" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-full"></svg></span></button>
+  <div data-slot="container" class="flex items-center h-4"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-3 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-2.5"></svg></span></button>
     <!--v-if-->
   </div>
   <!--v-if-->
@@ -324,7 +329,7 @@ exports[`Checkbox > renders with size xs correctly 1`] = `
 
 exports[`Checkbox > renders with trueValue/falseValue as number correctly 1`] = `
 "<div data-slot="root" class="relative flex items-start flex-row">
-  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-full"></svg></span></button>
+  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-3.5"></svg></span></button>
     <!--v-if-->
   </div>
   <!--v-if-->
@@ -333,7 +338,7 @@ exports[`Checkbox > renders with trueValue/falseValue as number correctly 1`] =
 
 exports[`Checkbox > renders with trueValue/falseValue as string correctly 1`] = `
 "<div data-slot="root" class="relative flex items-start flex-row">
-  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-full"></svg></span></button>
+  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-3.5"></svg></span></button>
     <!--v-if-->
   </div>
   <!--v-if-->
@@ -342,7 +347,7 @@ exports[`Checkbox > renders with trueValue/falseValue as string correctly 1`] =
 
 exports[`Checkbox > renders with trueValue/falseValue unchecked correctly 1`] = `
 "<div data-slot="root" class="relative flex items-start flex-row">
-  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
+  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
       <!---->
     </button>
     <!--v-if-->
@@ -353,7 +358,7 @@ exports[`Checkbox > renders with trueValue/falseValue unchecked correctly 1`] =
 
 exports[`Checkbox > renders with ui correctly 1`] = `
 "<div data-slot="root" class="relative flex items-start flex-row">
-  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
+  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
       <!---->
     </button>
     <!--v-if-->
@@ -364,7 +369,7 @@ exports[`Checkbox > renders with ui correctly 1`] = `
 
 exports[`Checkbox > renders with value correctly 1`] = `
 "<div data-slot="root" class="relative flex items-start flex-row">
-  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
+  <div data-slot="container" class="flex items-center h-5"><button aria-label="value" data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
       <!---->
     </button>
     <!--v-if-->
diff --git a/test/components/__snapshots__/Checkbox.spec.ts.snap b/test/components/__snapshots__/Checkbox.spec.ts.snap
index 8db481e6aa..8a9687e4eb 100644
--- a/test/components/__snapshots__/Checkbox.spec.ts.snap
+++ b/test/components/__snapshots__/Checkbox.spec.ts.snap
@@ -2,7 +2,7 @@
 
 exports[`Checkbox > renders with ariaLabel correctly 1`] = `
 "<div data-slot="root" class="relative flex items-start flex-row">
-  <div data-slot="container" class="flex items-center h-5"><button aria-label="Aria label" data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
+  <div data-slot="container" class="flex items-center h-5"><button aria-label="Aria label" data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
       <!---->
     </button>
     <!--v-if-->
@@ -13,7 +13,7 @@ exports[`Checkbox > renders with ariaLabel correctly 1`] = `
 
 exports[`Checkbox > renders with as correctly 1`] = `
 "<section data-slot="root" class="relative flex items-start flex-row">
-  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
+  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
       <!---->
     </button>
     <!--v-if-->
@@ -24,7 +24,7 @@ exports[`Checkbox > renders with as correctly 1`] = `
 
 exports[`Checkbox > renders with class correctly 1`] = `
 "<div data-slot="root" class="relative items-start flex-row inline-flex">
-  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
+  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
       <!---->
     </button>
     <!--v-if-->
@@ -35,7 +35,7 @@ exports[`Checkbox > renders with class correctly 1`] = `
 
 exports[`Checkbox > renders with defaultValue correctly 1`] = `
 "<div data-slot="root" class="relative flex items-start flex-row">
-  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0-0" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><span class="iconify i-lucide:check shrink-0 size-full" aria-hidden="true" data-slot="icon"></span></span></button>
+  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0-0" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><span class="iconify i-lucide:check shrink-0 size-3.5" aria-hidden="true" data-slot="icon"></span></span></button>
     <!--v-if-->
   </div>
   <!--v-if-->
@@ -44,12 +44,13 @@ exports[`Checkbox > renders with defaultValue correctly 1`] = `
 
 exports[`Checkbox > renders with description correctly 1`] = `
 "<div data-slot="root" class="relative flex items-start flex-row">
-  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
+  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
       <!---->
     </button>
     <!--v-if-->
   </div>
-  <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0" data-slot="label" class="block font-medium text-default">Label</label>
+  <div data-slot="wrapper" class="w-full ms-2 text-sm">
+    <!--v-if--><label for="v-0-0" data-slot="label" class="block font-medium text-default">Label</label>
     <p data-slot="description" class="text-muted">Description</p>
   </div>
 </div>"
@@ -57,12 +58,13 @@ exports[`Checkbox > renders with description correctly 1`] = `
 
 exports[`Checkbox > renders with description slot correctly 1`] = `
 "<div data-slot="root" class="relative flex items-start flex-row">
-  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
+  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
       <!---->
     </button>
     <!--v-if-->
   </div>
-  <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0" data-slot="label" class="block font-medium text-default">Description slot</label>
+  <div data-slot="wrapper" class="w-full ms-2 text-sm">
+    <!--v-if--><label for="v-0-0" data-slot="label" class="block font-medium text-default">Description slot</label>
     <!--v-if-->
   </div>
 </div>"
@@ -70,7 +72,7 @@ exports[`Checkbox > renders with description slot correctly 1`] = `
 
 exports[`Checkbox > renders with disabled correctly 1`] = `
 "<div data-slot="root" class="relative flex items-start flex-row opacity-75">
-  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4 cursor-not-allowed" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-disabled="" disabled="">
+  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 cursor-not-allowed outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-disabled="" disabled="">
       <!---->
     </button>
     <!--v-if-->
@@ -81,7 +83,7 @@ exports[`Checkbox > renders with disabled correctly 1`] = `
 
 exports[`Checkbox > renders with icon correctly 1`] = `
 "<div data-slot="root" class="relative flex items-start flex-row">
-  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
+  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
       <!---->
     </button>
     <!--v-if-->
@@ -92,7 +94,7 @@ exports[`Checkbox > renders with icon correctly 1`] = `
 
 exports[`Checkbox > renders with id correctly 1`] = `
 "<div data-slot="root" class="relative flex items-start flex-row">
-  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="id" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
+  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="id" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
       <!---->
     </button>
     <!--v-if-->
@@ -103,7 +105,7 @@ exports[`Checkbox > renders with id correctly 1`] = `
 
 exports[`Checkbox > renders with indeterminate correctly 1`] = `
 "<div data-slot="root" class="relative flex items-start flex-row">
-  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0-0" role="checkbox" type="button" aria-checked="mixed" aria-required="false" data-state="indeterminate"><span data-state="indeterminate" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><span class="iconify i-lucide:minus shrink-0 size-full" aria-hidden="true" data-slot="icon"></span></span></button>
+  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0-0" role="checkbox" type="button" aria-checked="mixed" aria-required="false" data-state="indeterminate"><span data-state="indeterminate" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><span class="iconify i-lucide:minus shrink-0 size-3.5" aria-hidden="true" data-slot="icon"></span></span></button>
     <!--v-if-->
   </div>
   <!--v-if-->
@@ -112,7 +114,7 @@ exports[`Checkbox > renders with indeterminate correctly 1`] = `
 
 exports[`Checkbox > renders with indeterminateIcon correctly 1`] = `
 "<div data-slot="root" class="relative flex items-start flex-row">
-  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0-0" role="checkbox" type="button" aria-checked="mixed" aria-required="false" data-state="indeterminate"><span data-state="indeterminate" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><span class="iconify i-lucide:trash shrink-0 size-full" aria-hidden="true" data-slot="icon"></span></span></button>
+  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0-0" role="checkbox" type="button" aria-checked="mixed" aria-required="false" data-state="indeterminate"><span data-state="indeterminate" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><span class="iconify i-lucide:trash shrink-0 size-3.5" aria-hidden="true" data-slot="icon"></span></span></button>
     <!--v-if-->
   </div>
   <!--v-if-->
@@ -121,7 +123,7 @@ exports[`Checkbox > renders with indeterminateIcon correctly 1`] = `
 
 exports[`Checkbox > renders with indicator end correctly 1`] = `
 "<div data-slot="root" class="relative flex items-start flex-row-reverse">
-  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0-0" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><span class="iconify i-lucide:check shrink-0 size-full" aria-hidden="true" data-slot="icon"></span></span></button>
+  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0-0" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><span class="iconify i-lucide:check shrink-0 size-3.5" aria-hidden="true" data-slot="icon"></span></span></button>
     <!--v-if-->
   </div>
   <!--v-if-->
@@ -129,8 +131,8 @@ exports[`Checkbox > renders with indicator end correctly 1`] = `
 `;
 
 exports[`Checkbox > renders with indicator hidden correctly 1`] = `
-"<div data-slot="root" class="relative flex items-start">
-  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary sr-only size-4" id="v-0-0" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><span class="iconify i-lucide:check shrink-0 size-full" aria-hidden="true" data-slot="icon"></span></span></button>
+"<div data-slot="root" class="relative flex items-start outline-primary/25 has-focus-visible:outline-3 not-has-disabled:has-focus-visible:border-primary has-focus-visible:z-[1]">
+  <div data-slot="container" class="flex items-center h-auto"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-none sr-only size-4" id="v-0-0" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked"></button>
     <!--v-if-->
   </div>
   <!--v-if-->
@@ -139,7 +141,7 @@ exports[`Checkbox > renders with indicator hidden correctly 1`] = `
 
 exports[`Checkbox > renders with indicator start correctly 1`] = `
 "<div data-slot="root" class="relative flex items-start flex-row">
-  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0-0" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><span class="iconify i-lucide:check shrink-0 size-full" aria-hidden="true" data-slot="icon"></span></span></button>
+  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0-0" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><span class="iconify i-lucide:check shrink-0 size-3.5" aria-hidden="true" data-slot="icon"></span></span></button>
     <!--v-if-->
   </div>
   <!--v-if-->
@@ -148,12 +150,13 @@ exports[`Checkbox > renders with indicator start correctly 1`] = `
 
 exports[`Checkbox > renders with label correctly 1`] = `
 "<div data-slot="root" class="relative flex items-start flex-row">
-  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
+  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
       <!---->
     </button>
     <!--v-if-->
   </div>
-  <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0" data-slot="label" class="block font-medium text-default">Label</label>
+  <div data-slot="wrapper" class="w-full ms-2 text-sm">
+    <!--v-if--><label for="v-0-0" data-slot="label" class="block font-medium text-default">Label</label>
     <!--v-if-->
   </div>
 </div>"
@@ -161,12 +164,13 @@ exports[`Checkbox > renders with label correctly 1`] = `
 
 exports[`Checkbox > renders with label slot correctly 1`] = `
 "<div data-slot="root" class="relative flex items-start flex-row">
-  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
+  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
       <!---->
     </button>
     <!--v-if-->
   </div>
-  <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0" data-slot="label" class="block font-medium text-default">Label slot</label>
+  <div data-slot="wrapper" class="w-full ms-2 text-sm">
+    <!--v-if--><label for="v-0-0" data-slot="label" class="block font-medium text-default">Label slot</label>
     <!--v-if-->
   </div>
 </div>"
@@ -174,7 +178,7 @@ exports[`Checkbox > renders with label slot correctly 1`] = `
 
 exports[`Checkbox > renders with modelValue correctly 1`] = `
 "<div data-slot="root" class="relative flex items-start flex-row">
-  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0-0" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><span class="iconify i-lucide:check shrink-0 size-full" aria-hidden="true" data-slot="icon"></span></span></button>
+  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0-0" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><span class="iconify i-lucide:check shrink-0 size-3.5" aria-hidden="true" data-slot="icon"></span></span></button>
     <!--v-if-->
   </div>
   <!--v-if-->
@@ -183,7 +187,7 @@ exports[`Checkbox > renders with modelValue correctly 1`] = `
 
 exports[`Checkbox > renders with name correctly 1`] = `
 "<div data-slot="root" class="relative flex items-start flex-row">
-  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
+  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
       <!---->
     </button>
     <!--v-if-->
@@ -193,8 +197,8 @@ exports[`Checkbox > renders with name correctly 1`] = `
 `;
 
 exports[`Checkbox > renders with neutral variant card correctly 1`] = `
-"<label data-slot="root" class="relative flex items-start border border-muted rounded-lg flex-row p-3.5 has-data-[state=checked]:border-inverted">
-  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-inverted/25 focus-visible:ring-inverted size-4" id="v-0-0" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-inverted"><span class="iconify i-lucide:check shrink-0 size-full" aria-hidden="true" data-slot="icon"></span></span></button>
+"<label data-slot="root" class="relative flex items-start border border-muted rounded-lg hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:bg-elevated/50 transition-colors flex-row hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:border-accented p-3.5 outline-inverted/25 has-focus-visible:outline-3 not-has-disabled:has-focus-visible:border-inverted has-focus-visible:z-[1] has-data-[state=checked]:border-inverted/50 has-data-[state=checked]:bg-elevated">
+  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-none size-4" id="v-0-0" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-inverted"><span class="iconify i-lucide:check shrink-0 size-3.5" aria-hidden="true" data-slot="icon"></span></span></button>
     <!--v-if-->
   </div>
   <!--v-if-->
@@ -202,8 +206,8 @@ exports[`Checkbox > renders with neutral variant card correctly 1`] = `
 `;
 
 exports[`Checkbox > renders with neutral variant card highlight correctly 1`] = `
-"<label data-slot="root" class="relative flex items-start border border-muted rounded-lg flex-row p-3.5 has-data-[state=checked]:border-inverted">
-  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset overflow-hidden focus-visible:outline-3 outline-inverted/25 focus-visible:ring-inverted size-4 ring-inverted" id="v-0-0" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-inverted"><span class="iconify i-lucide:check shrink-0 size-full" aria-hidden="true" data-slot="icon"></span></span></button>
+"<label data-slot="root" class="relative flex items-start border border-muted rounded-lg hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:bg-elevated/50 transition-colors flex-row p-3.5 outline-inverted/25 has-focus-visible:outline-3 not-has-disabled:has-focus-visible:border-inverted has-focus-visible:z-[1] has-data-[state=checked]:border-inverted/50 has-data-[state=checked]:bg-elevated">
+  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset overflow-hidden focus-visible:outline-none size-4 ring-inverted" id="v-0-0" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-inverted"><span class="iconify i-lucide:check shrink-0 size-3.5" aria-hidden="true" data-slot="icon"></span></span></button>
     <!--v-if-->
   </div>
   <!--v-if-->
@@ -212,7 +216,7 @@ exports[`Checkbox > renders with neutral variant card highlight correctly 1`] =
 
 exports[`Checkbox > renders with neutral variant list correctly 1`] = `
 "<div data-slot="root" class="relative flex items-start flex-row">
-  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-inverted/25 focus-visible:ring-inverted size-4" id="v-0-0" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-inverted"><span class="iconify i-lucide:check shrink-0 size-full" aria-hidden="true" data-slot="icon"></span></span></button>
+  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 outline-inverted/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-inverted" id="v-0-0" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-inverted"><span class="iconify i-lucide:check shrink-0 size-3.5" aria-hidden="true" data-slot="icon"></span></span></button>
     <!--v-if-->
   </div>
   <!--v-if-->
@@ -221,7 +225,7 @@ exports[`Checkbox > renders with neutral variant list correctly 1`] = `
 
 exports[`Checkbox > renders with neutral variant list highlight correctly 1`] = `
 "<div data-slot="root" class="relative flex items-start flex-row">
-  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset overflow-hidden focus-visible:outline-3 outline-inverted/25 focus-visible:ring-inverted size-4 ring-inverted" id="v-0-0" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-inverted"><span class="iconify i-lucide:check shrink-0 size-full" aria-hidden="true" data-slot="icon"></span></span></button>
+  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset overflow-hidden size-4 outline-inverted/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-inverted ring-inverted" id="v-0-0" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-inverted"><span class="iconify i-lucide:check shrink-0 size-3.5" aria-hidden="true" data-slot="icon"></span></span></button>
     <!--v-if-->
   </div>
   <!--v-if-->
@@ -229,8 +233,8 @@ exports[`Checkbox > renders with neutral variant list highlight correctly 1`] =
 `;
 
 exports[`Checkbox > renders with primary variant card correctly 1`] = `
-"<label data-slot="root" class="relative flex items-start border border-muted rounded-lg flex-row p-3.5 has-data-[state=checked]:border-primary">
-  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0-0" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><span class="iconify i-lucide:check shrink-0 size-full" aria-hidden="true" data-slot="icon"></span></span></button>
+"<label data-slot="root" class="relative flex items-start border border-muted rounded-lg hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:bg-elevated/50 transition-colors flex-row hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:border-accented p-3.5 outline-primary/25 has-focus-visible:outline-3 not-has-disabled:has-focus-visible:border-primary has-focus-visible:z-[1] has-data-[state=checked]:border-primary/50 has-data-[state=checked]:bg-primary/10">
+  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-none size-4" id="v-0-0" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><span class="iconify i-lucide:check shrink-0 size-3.5" aria-hidden="true" data-slot="icon"></span></span></button>
     <!--v-if-->
   </div>
   <!--v-if-->
@@ -238,8 +242,8 @@ exports[`Checkbox > renders with primary variant card correctly 1`] = `
 `;
 
 exports[`Checkbox > renders with primary variant card highlight correctly 1`] = `
-"<label data-slot="root" class="relative flex items-start border border-muted rounded-lg flex-row p-3.5 has-data-[state=checked]:border-primary">
-  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4 ring-primary" id="v-0-0" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><span class="iconify i-lucide:check shrink-0 size-full" aria-hidden="true" data-slot="icon"></span></span></button>
+"<label data-slot="root" class="relative flex items-start border border-muted rounded-lg hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:bg-elevated/50 transition-colors flex-row p-3.5 outline-primary/25 has-focus-visible:outline-3 not-has-disabled:has-focus-visible:border-primary has-focus-visible:z-[1] has-data-[state=checked]:border-primary/50 has-data-[state=checked]:bg-primary/10">
+  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset overflow-hidden focus-visible:outline-none size-4 ring-primary" id="v-0-0" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><span class="iconify i-lucide:check shrink-0 size-3.5" aria-hidden="true" data-slot="icon"></span></span></button>
     <!--v-if-->
   </div>
   <!--v-if-->
@@ -248,7 +252,7 @@ exports[`Checkbox > renders with primary variant card highlight correctly 1`] =
 
 exports[`Checkbox > renders with primary variant list correctly 1`] = `
 "<div data-slot="root" class="relative flex items-start flex-row">
-  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0-0" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><span class="iconify i-lucide:check shrink-0 size-full" aria-hidden="true" data-slot="icon"></span></span></button>
+  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0-0" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><span class="iconify i-lucide:check shrink-0 size-3.5" aria-hidden="true" data-slot="icon"></span></span></button>
     <!--v-if-->
   </div>
   <!--v-if-->
@@ -257,7 +261,7 @@ exports[`Checkbox > renders with primary variant list correctly 1`] = `
 
 exports[`Checkbox > renders with primary variant list highlight correctly 1`] = `
 "<div data-slot="root" class="relative flex items-start flex-row">
-  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4 ring-primary" id="v-0-0" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><span class="iconify i-lucide:check shrink-0 size-full" aria-hidden="true" data-slot="icon"></span></span></button>
+  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary ring-primary" id="v-0-0" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><span class="iconify i-lucide:check shrink-0 size-3.5" aria-hidden="true" data-slot="icon"></span></span></button>
     <!--v-if-->
   </div>
   <!--v-if-->
@@ -266,12 +270,13 @@ exports[`Checkbox > renders with primary variant list highlight correctly 1`] =
 
 exports[`Checkbox > renders with required correctly 1`] = `
 "<div data-slot="root" class="relative flex items-start flex-row">
-  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="true" data-state="unchecked">
+  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="true" data-state="unchecked">
       <!---->
     </button>
     <!--v-if-->
   </div>
-  <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0" data-slot="label" class="block font-medium text-default after:content-['*'] after:ms-0.5 after:text-error">Label</label>
+  <div data-slot="wrapper" class="w-full ms-2 text-sm">
+    <!--v-if--><label for="v-0-0" data-slot="label" class="block font-medium text-default after:content-['*'] after:ms-0.5 after:text-error">Label</label>
     <!--v-if-->
   </div>
 </div>"
@@ -279,7 +284,7 @@ exports[`Checkbox > renders with required correctly 1`] = `
 
 exports[`Checkbox > renders with size lg correctly 1`] = `
 "<div data-slot="root" class="relative flex items-start flex-row">
-  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4.5" id="v-0-0" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><span class="iconify i-lucide:check shrink-0 size-full" aria-hidden="true" data-slot="icon"></span></span></button>
+  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4.5 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0-0" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><span class="iconify i-lucide:check shrink-0 size-4" aria-hidden="true" data-slot="icon"></span></span></button>
     <!--v-if-->
   </div>
   <!--v-if-->
@@ -288,7 +293,7 @@ exports[`Checkbox > renders with size lg correctly 1`] = `
 
 exports[`Checkbox > renders with size md correctly 1`] = `
 "<div data-slot="root" class="relative flex items-start flex-row">
-  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0-0" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><span class="iconify i-lucide:check shrink-0 size-full" aria-hidden="true" data-slot="icon"></span></span></button>
+  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0-0" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><span class="iconify i-lucide:check shrink-0 size-3.5" aria-hidden="true" data-slot="icon"></span></span></button>
     <!--v-if-->
   </div>
   <!--v-if-->
@@ -297,7 +302,7 @@ exports[`Checkbox > renders with size md correctly 1`] = `
 
 exports[`Checkbox > renders with size sm correctly 1`] = `
 "<div data-slot="root" class="relative flex items-start flex-row">
-  <div data-slot="container" class="flex items-center h-4"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-3.5" id="v-0-0" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><span class="iconify i-lucide:check shrink-0 size-full" aria-hidden="true" data-slot="icon"></span></span></button>
+  <div data-slot="container" class="flex items-center h-4"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-3.5 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0-0" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><span class="iconify i-lucide:check shrink-0 size-3" aria-hidden="true" data-slot="icon"></span></span></button>
     <!--v-if-->
   </div>
   <!--v-if-->
@@ -306,7 +311,7 @@ exports[`Checkbox > renders with size sm correctly 1`] = `
 
 exports[`Checkbox > renders with size xl correctly 1`] = `
 "<div data-slot="root" class="relative flex items-start flex-row">
-  <div data-slot="container" class="flex items-center h-6"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-5" id="v-0-0" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><span class="iconify i-lucide:check shrink-0 size-full" aria-hidden="true" data-slot="icon"></span></span></button>
+  <div data-slot="container" class="flex items-center h-6"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-5 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0-0" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><span class="iconify i-lucide:check shrink-0 size-4.5" aria-hidden="true" data-slot="icon"></span></span></button>
     <!--v-if-->
   </div>
   <!--v-if-->
@@ -315,7 +320,7 @@ exports[`Checkbox > renders with size xl correctly 1`] = `
 
 exports[`Checkbox > renders with size xs correctly 1`] = `
 "<div data-slot="root" class="relative flex items-start flex-row">
-  <div data-slot="container" class="flex items-center h-4"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-3" id="v-0-0" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><span class="iconify i-lucide:check shrink-0 size-full" aria-hidden="true" data-slot="icon"></span></span></button>
+  <div data-slot="container" class="flex items-center h-4"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-3 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0-0" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><span class="iconify i-lucide:check shrink-0 size-2.5" aria-hidden="true" data-slot="icon"></span></span></button>
     <!--v-if-->
   </div>
   <!--v-if-->
@@ -324,7 +329,7 @@ exports[`Checkbox > renders with size xs correctly 1`] = `
 
 exports[`Checkbox > renders with trueValue/falseValue as number correctly 1`] = `
 "<div data-slot="root" class="relative flex items-start flex-row">
-  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0-0" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><span class="iconify i-lucide:check shrink-0 size-full" aria-hidden="true" data-slot="icon"></span></span></button>
+  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0-0" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><span class="iconify i-lucide:check shrink-0 size-3.5" aria-hidden="true" data-slot="icon"></span></span></button>
     <!--v-if-->
   </div>
   <!--v-if-->
@@ -333,7 +338,7 @@ exports[`Checkbox > renders with trueValue/falseValue as number correctly 1`] =
 
 exports[`Checkbox > renders with trueValue/falseValue as string correctly 1`] = `
 "<div data-slot="root" class="relative flex items-start flex-row">
-  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0-0" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><span class="iconify i-lucide:check shrink-0 size-full" aria-hidden="true" data-slot="icon"></span></span></button>
+  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0-0" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><span class="iconify i-lucide:check shrink-0 size-3.5" aria-hidden="true" data-slot="icon"></span></span></button>
     <!--v-if-->
   </div>
   <!--v-if-->
@@ -342,7 +347,7 @@ exports[`Checkbox > renders with trueValue/falseValue as string correctly 1`] =
 
 exports[`Checkbox > renders with trueValue/falseValue unchecked correctly 1`] = `
 "<div data-slot="root" class="relative flex items-start flex-row">
-  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
+  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
       <!---->
     </button>
     <!--v-if-->
@@ -353,7 +358,7 @@ exports[`Checkbox > renders with trueValue/falseValue unchecked correctly 1`] =
 
 exports[`Checkbox > renders with ui correctly 1`] = `
 "<div data-slot="root" class="relative flex items-start flex-row">
-  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
+  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
       <!---->
     </button>
     <!--v-if-->
@@ -364,7 +369,7 @@ exports[`Checkbox > renders with ui correctly 1`] = `
 
 exports[`Checkbox > renders with value correctly 1`] = `
 "<div data-slot="root" class="relative flex items-start flex-row">
-  <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
+  <div data-slot="container" class="flex items-center h-5"><button aria-label="value" data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
       <!---->
     </button>
     <!--v-if-->
diff --git a/test/components/__snapshots__/CheckboxGroup-vue.spec.ts.snap b/test/components/__snapshots__/CheckboxGroup-vue.spec.ts.snap
index 17c6235c7e..aa82505e57 100644
--- a/test/components/__snapshots__/CheckboxGroup-vue.spec.ts.snap
+++ b/test/components/__snapshots__/CheckboxGroup-vue.spec.ts.snap
@@ -5,32 +5,35 @@ exports[`CheckboxGroup > renders with ariaLabel correctly 1`] = `
   <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
     <!--v-if-->
     <div data-slot="item" class="relative flex items-start flex-row">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0:1" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0:1" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <!--v-if--><label for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
     </div>
     <div data-slot="item" class="relative flex items-start flex-row">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <!--v-if--><label for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
     </div>
     <div data-slot="item" class="relative flex items-start flex-row">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <!--v-if--><label for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
     </div>
@@ -44,32 +47,35 @@ exports[`CheckboxGroup > renders with as correctly 1`] = `
   <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
     <!--v-if-->
     <div data-slot="item" class="relative flex items-start flex-row">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0:1" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0:1" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <!--v-if--><label for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
     </div>
     <div data-slot="item" class="relative flex items-start flex-row">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <!--v-if--><label for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
     </div>
     <div data-slot="item" class="relative flex items-start flex-row">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <!--v-if--><label for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
     </div>
@@ -83,32 +89,35 @@ exports[`CheckboxGroup > renders with class correctly 1`] = `
   <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
     <!--v-if-->
     <div data-slot="item" class="relative flex items-start flex-row">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0:1" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0:1" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <!--v-if--><label for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
     </div>
     <div data-slot="item" class="relative flex items-start flex-row">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <!--v-if--><label for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
     </div>
     <div data-slot="item" class="relative flex items-start flex-row">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <!--v-if--><label for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
     </div>
@@ -122,30 +131,33 @@ exports[`CheckboxGroup > renders with defaultValue correctly 1`] = `
   <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
     <!--v-if-->
     <div data-slot="item" class="relative flex items-start flex-row">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-full"></svg></span></button>
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-3.5"></svg></span></button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <!--v-if--><label for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
     </div>
     <div data-slot="item" class="relative flex items-start flex-row">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <!--v-if--><label for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
     </div>
     <div data-slot="item" class="relative flex items-start flex-row">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <!--v-if--><label for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
     </div>
@@ -159,32 +171,35 @@ exports[`CheckboxGroup > renders with description correctly 1`] = `
   <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
     <!--v-if-->
     <div data-slot="item" class="relative flex items-start flex-row">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0:1" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0:1" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <!--v-if--><label for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
         <p data-slot="description" class="text-muted">Description 0</p>
       </div>
     </div>
     <div data-slot="item" class="relative flex items-start flex-row">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <!--v-if--><label for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
         <p data-slot="description" class="text-muted">Description 1</p>
       </div>
     </div>
     <div data-slot="item" class="relative flex items-start flex-row">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <!--v-if--><label for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
         <p data-slot="description" class="text-muted">Description 2</p>
       </div>
     </div>
@@ -198,32 +213,35 @@ exports[`CheckboxGroup > renders with description slot correctly 1`] = `
   <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
     <!--v-if-->
     <div data-slot="item" class="relative flex items-start flex-row">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0:1" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0:1" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <!--v-if--><label for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
         <p data-slot="description" class="text-muted">Description slot</p>
       </div>
     </div>
     <div data-slot="item" class="relative flex items-start flex-row">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <!--v-if--><label for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
         <p data-slot="description" class="text-muted">Description slot</p>
       </div>
     </div>
     <div data-slot="item" class="relative flex items-start flex-row">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <!--v-if--><label for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
         <p data-slot="description" class="text-muted">Description slot</p>
       </div>
     </div>
@@ -237,32 +255,35 @@ exports[`CheckboxGroup > renders with descriptionKey correctly 1`] = `
   <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
     <!--v-if-->
     <div data-slot="item" class="relative flex items-start flex-row">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0:1" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0:1" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <!--v-if--><label for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
         <p data-slot="description" class="text-muted">1</p>
       </div>
     </div>
     <div data-slot="item" class="relative flex items-start flex-row">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <!--v-if--><label for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
         <p data-slot="description" class="text-muted">2</p>
       </div>
     </div>
     <div data-slot="item" class="relative flex items-start flex-row">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <!--v-if--><label for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
         <p data-slot="description" class="text-muted">3</p>
       </div>
     </div>
@@ -276,32 +297,35 @@ exports[`CheckboxGroup > renders with disabled correctly 1`] = `
   <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
     <!--v-if-->
     <div data-slot="item" class="relative flex items-start flex-row opacity-75">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4 cursor-not-allowed" id="v-0:1" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-disabled="" disabled="" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 cursor-not-allowed outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0:1" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-disabled="" disabled="" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:1" data-slot="label" class="block font-medium text-default cursor-not-allowed">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <!--v-if--><label for="v-0:1" data-slot="label" class="block font-medium text-default cursor-not-allowed">Option 1</label>
         <!--v-if-->
       </div>
     </div>
     <div data-slot="item" class="relative flex items-start flex-row opacity-75">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4 cursor-not-allowed" id="v-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-disabled="" disabled="" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 cursor-not-allowed outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-disabled="" disabled="" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:2" data-slot="label" class="block font-medium text-default cursor-not-allowed">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <!--v-if--><label for="v-0:2" data-slot="label" class="block font-medium text-default cursor-not-allowed">Option 2</label>
         <!--v-if-->
       </div>
     </div>
     <div data-slot="item" class="relative flex items-start flex-row opacity-75">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4 cursor-not-allowed" id="v-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-disabled="" disabled="" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 cursor-not-allowed outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-disabled="" disabled="" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:3" data-slot="label" class="block font-medium text-default cursor-not-allowed">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <!--v-if--><label for="v-0:3" data-slot="label" class="block font-medium text-default cursor-not-allowed">Option 3</label>
         <!--v-if-->
       </div>
     </div>
@@ -313,31 +337,34 @@ exports[`CheckboxGroup > renders with disabled correctly 1`] = `
 exports[`CheckboxGroup > renders with horizontal variant card correctly 1`] = `
 "<div id="v-0" data-slot="root" class="relative" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;">
   <fieldset data-slot="fieldset" class="flex gap-x-2 flex-row gap-y-1">
-    <!--v-if--><label data-slot="item" class="relative flex items-start border border-muted rounded-lg flex-row p-3.5 has-data-[state=checked]:border-primary">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-full"></svg></span></button>
+    <!--v-if--><label data-slot="item" class="relative flex items-start border border-muted rounded-lg hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:bg-elevated/50 transition-colors flex-row hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:border-accented p-3.5 outline-primary/25 has-focus-visible:outline-3 not-has-disabled:has-focus-visible:border-primary has-focus-visible:z-[1] has-data-[state=checked]:border-primary/50 has-data-[state=checked]:bg-primary/10">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-none size-4" id="v-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-3.5"></svg></span></button>
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <!--v-if-->
         <p for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</p>
         <!--v-if-->
       </div>
-    </label><label data-slot="item" class="relative flex items-start border border-muted rounded-lg flex-row p-3.5 has-data-[state=checked]:border-primary">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal">
+    </label><label data-slot="item" class="relative flex items-start border border-muted rounded-lg hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:bg-elevated/50 transition-colors flex-row hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:border-accented p-3.5 outline-primary/25 has-focus-visible:outline-3 not-has-disabled:has-focus-visible:border-primary has-focus-visible:z-[1] has-data-[state=checked]:border-primary/50 has-data-[state=checked]:bg-primary/10">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-none size-4" id="v-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal">
           <!---->
         </button>
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <!--v-if-->
         <p for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</p>
         <!--v-if-->
       </div>
-    </label><label data-slot="item" class="relative flex items-start border border-muted rounded-lg flex-row p-3.5 has-data-[state=checked]:border-primary">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal">
+    </label><label data-slot="item" class="relative flex items-start border border-muted rounded-lg hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:bg-elevated/50 transition-colors flex-row hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:border-accented p-3.5 outline-primary/25 has-focus-visible:outline-3 not-has-disabled:has-focus-visible:border-primary has-focus-visible:z-[1] has-data-[state=checked]:border-primary/50 has-data-[state=checked]:bg-primary/10">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-none size-4" id="v-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal">
           <!---->
         </button>
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <!--v-if-->
         <p for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</p>
         <!--v-if-->
       </div>
@@ -352,30 +379,33 @@ exports[`CheckboxGroup > renders with horizontal variant list correctly 1`] = `
   <fieldset data-slot="fieldset" class="flex gap-x-2 flex-row gap-y-1">
     <!--v-if-->
     <div data-slot="item" class="relative flex items-start flex-row">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-full"></svg></span></button>
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-3.5"></svg></span></button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <!--v-if--><label for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
     </div>
     <div data-slot="item" class="relative flex items-start flex-row">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <!--v-if--><label for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
     </div>
     <div data-slot="item" class="relative flex items-start flex-row">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <!--v-if--><label for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
     </div>
@@ -387,31 +417,34 @@ exports[`CheckboxGroup > renders with horizontal variant list correctly 1`] = `
 exports[`CheckboxGroup > renders with horizontal variant table correctly 1`] = `
 "<div id="v-0" data-slot="root" class="relative" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;">
   <fieldset data-slot="fieldset" class="flex flex-row gap-0 -space-x-px">
-    <!--v-if--><label data-slot="item" class="relative flex items-start flex-row border border-muted p-3.5 first-of-type:rounded-s-lg last-of-type:rounded-e-lg has-data-[state=checked]:bg-primary/10 has-data-[state=checked]:border-primary/50 has-data-[state=checked]:z-[1]">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-full"></svg></span></button>
+    <!--v-if--><label data-slot="item" class="relative flex items-start flex-row border border-muted hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:bg-elevated/50 transition-colors outline-primary/25 has-focus-visible:outline-3 not-has-disabled:has-focus-visible:border-primary has-focus-visible:z-[1] hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:border-accented p-3.5 first-of-type:rounded-s-lg last-of-type:rounded-e-lg has-data-[state=checked]:bg-primary/10 has-data-[state=checked]:border-primary/50 has-data-[state=checked]:z-[1]">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-none size-4" id="v-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-3.5"></svg></span></button>
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <!--v-if-->
         <p for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</p>
         <!--v-if-->
       </div>
-    </label><label data-slot="item" class="relative flex items-start flex-row border border-muted p-3.5 first-of-type:rounded-s-lg last-of-type:rounded-e-lg has-data-[state=checked]:bg-primary/10 has-data-[state=checked]:border-primary/50 has-data-[state=checked]:z-[1]">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal">
+    </label><label data-slot="item" class="relative flex items-start flex-row border border-muted hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:bg-elevated/50 transition-colors outline-primary/25 has-focus-visible:outline-3 not-has-disabled:has-focus-visible:border-primary has-focus-visible:z-[1] hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:border-accented p-3.5 first-of-type:rounded-s-lg last-of-type:rounded-e-lg has-data-[state=checked]:bg-primary/10 has-data-[state=checked]:border-primary/50 has-data-[state=checked]:z-[1]">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-none size-4" id="v-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal">
           <!---->
         </button>
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <!--v-if-->
         <p for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</p>
         <!--v-if-->
       </div>
-    </label><label data-slot="item" class="relative flex items-start flex-row border border-muted p-3.5 first-of-type:rounded-s-lg last-of-type:rounded-e-lg has-data-[state=checked]:bg-primary/10 has-data-[state=checked]:border-primary/50 has-data-[state=checked]:z-[1]">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal">
+    </label><label data-slot="item" class="relative flex items-start flex-row border border-muted hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:bg-elevated/50 transition-colors outline-primary/25 has-focus-visible:outline-3 not-has-disabled:has-focus-visible:border-primary has-focus-visible:z-[1] hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:border-accented p-3.5 first-of-type:rounded-s-lg last-of-type:rounded-e-lg has-data-[state=checked]:bg-primary/10 has-data-[state=checked]:border-primary/50 has-data-[state=checked]:z-[1]">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-none size-4" id="v-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal">
           <!---->
         </button>
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <!--v-if-->
         <p for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</p>
         <!--v-if-->
       </div>
@@ -421,35 +454,71 @@ exports[`CheckboxGroup > renders with horizontal variant table correctly 1`] = `
 </div>"
 `;
 
+exports[`CheckboxGroup > renders with icon correctly 1`] = `
+"<div id="v-0" data-slot="root" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;">
+  <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
+    <!--v-if-->
+    <div data-slot="item" class="relative flex items-start outline-primary/25 has-focus-visible:outline-3 not-has-disabled:has-focus-visible:border-primary has-focus-visible:z-[1]">
+      <div data-slot="container" class="flex items-center h-auto"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-none sr-only size-4" id="v-0:1" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical"></button>
+        <!--v-if-->
+      </div>
+      <div data-slot="wrapper" class="w-full flex flex-col items-center gap-1 text-center text-sm"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-4"></svg><label for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
+        <!--v-if-->
+      </div>
+    </div>
+    <div data-slot="item" class="relative flex items-start outline-primary/25 has-focus-visible:outline-3 not-has-disabled:has-focus-visible:border-primary has-focus-visible:z-[1]">
+      <div data-slot="container" class="flex items-center h-auto"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-none sr-only size-4" id="v-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical"></button>
+        <!--v-if-->
+      </div>
+      <div data-slot="wrapper" class="w-full flex flex-col items-center gap-1 text-center text-sm"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-4"></svg><label for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
+        <!--v-if-->
+      </div>
+    </div>
+    <div data-slot="item" class="relative flex items-start outline-primary/25 has-focus-visible:outline-3 not-has-disabled:has-focus-visible:border-primary has-focus-visible:z-[1]">
+      <div data-slot="container" class="flex items-center h-auto"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-none sr-only size-4" id="v-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical"></button>
+        <!--v-if-->
+      </div>
+      <div data-slot="wrapper" class="w-full flex flex-col items-center gap-1 text-center text-sm"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-4"></svg><label for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
+        <!--v-if-->
+      </div>
+    </div>
+  </fieldset>
+  <!--v-if-->
+</div>"
+`;
+
 exports[`CheckboxGroup > renders with indicator end correctly 1`] = `
 "<div id="v-0" data-slot="root" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;">
   <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
     <!--v-if-->
     <div data-slot="item" class="relative flex items-start flex-row-reverse">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-full"></svg></span></button>
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-3.5"></svg></span></button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full me-2 text-sm"><label for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full me-2 text-sm">
+        <!--v-if--><label for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
     </div>
     <div data-slot="item" class="relative flex items-start flex-row-reverse">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full me-2 text-sm"><label for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full me-2 text-sm">
+        <!--v-if--><label for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
     </div>
     <div data-slot="item" class="relative flex items-start flex-row-reverse">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full me-2 text-sm"><label for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full me-2 text-sm">
+        <!--v-if--><label for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
     </div>
@@ -462,31 +531,30 @@ exports[`CheckboxGroup > renders with indicator hidden correctly 1`] = `
 "<div id="v-0" data-slot="root" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;">
   <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
     <!--v-if-->
-    <div data-slot="item" class="relative flex items-start">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary sr-only size-4" id="v-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-full"></svg></span></button>
+    <div data-slot="item" class="relative flex items-start outline-primary/25 has-focus-visible:outline-3 not-has-disabled:has-focus-visible:border-primary has-focus-visible:z-[1]">
+      <div data-slot="container" class="flex items-center h-auto"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-none sr-only size-4" id="v-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical"></button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full text-center text-sm"><label for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full flex flex-col items-center gap-1 text-center text-sm">
+        <!--v-if--><label for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
     </div>
-    <div data-slot="item" class="relative flex items-start">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary sr-only size-4" id="v-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
-          <!---->
-        </button>
+    <div data-slot="item" class="relative flex items-start outline-primary/25 has-focus-visible:outline-3 not-has-disabled:has-focus-visible:border-primary has-focus-visible:z-[1]">
+      <div data-slot="container" class="flex items-center h-auto"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-none sr-only size-4" id="v-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical"></button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full text-center text-sm"><label for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full flex flex-col items-center gap-1 text-center text-sm">
+        <!--v-if--><label for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
     </div>
-    <div data-slot="item" class="relative flex items-start">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary sr-only size-4" id="v-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
-          <!---->
-        </button>
+    <div data-slot="item" class="relative flex items-start outline-primary/25 has-focus-visible:outline-3 not-has-disabled:has-focus-visible:border-primary has-focus-visible:z-[1]">
+      <div data-slot="container" class="flex items-center h-auto"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-none sr-only size-4" id="v-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical"></button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full text-center text-sm"><label for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full flex flex-col items-center gap-1 text-center text-sm">
+        <!--v-if--><label for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
     </div>
@@ -500,30 +568,33 @@ exports[`CheckboxGroup > renders with indicator start correctly 1`] = `
   <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
     <!--v-if-->
     <div data-slot="item" class="relative flex items-start flex-row">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-full"></svg></span></button>
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-3.5"></svg></span></button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <!--v-if--><label for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
     </div>
     <div data-slot="item" class="relative flex items-start flex-row">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <!--v-if--><label for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
     </div>
     <div data-slot="item" class="relative flex items-start flex-row">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <!--v-if--><label for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
     </div>
@@ -537,32 +608,35 @@ exports[`CheckboxGroup > renders with items correctly 1`] = `
   <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
     <!--v-if-->
     <div data-slot="item" class="relative flex items-start flex-row">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0:1" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0:1" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <!--v-if--><label for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
     </div>
     <div data-slot="item" class="relative flex items-start flex-row">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <!--v-if--><label for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
     </div>
     <div data-slot="item" class="relative flex items-start flex-row">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <!--v-if--><label for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
     </div>
@@ -576,32 +650,35 @@ exports[`CheckboxGroup > renders with label slot correctly 1`] = `
   <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
     <!--v-if-->
     <div data-slot="item" class="relative flex items-start flex-row">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0:1" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0:1" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:1" data-slot="label" class="block font-medium text-default">Label slot</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <!--v-if--><label for="v-0:1" data-slot="label" class="block font-medium text-default">Label slot</label>
         <!--v-if-->
       </div>
     </div>
     <div data-slot="item" class="relative flex items-start flex-row">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:2" data-slot="label" class="block font-medium text-default">Label slot</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <!--v-if--><label for="v-0:2" data-slot="label" class="block font-medium text-default">Label slot</label>
         <!--v-if-->
       </div>
     </div>
     <div data-slot="item" class="relative flex items-start flex-row">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:3" data-slot="label" class="block font-medium text-default">Label slot</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <!--v-if--><label for="v-0:3" data-slot="label" class="block font-medium text-default">Label slot</label>
         <!--v-if-->
       </div>
     </div>
@@ -615,32 +692,35 @@ exports[`CheckboxGroup > renders with labelKey correctly 1`] = `
   <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
     <!--v-if-->
     <div data-slot="item" class="relative flex items-start flex-row">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0:1" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0:1" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:1" data-slot="label" class="block font-medium text-default">1</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <!--v-if--><label for="v-0:1" data-slot="label" class="block font-medium text-default">1</label>
         <!--v-if-->
       </div>
     </div>
     <div data-slot="item" class="relative flex items-start flex-row">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:2" data-slot="label" class="block font-medium text-default">2</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <!--v-if--><label for="v-0:2" data-slot="label" class="block font-medium text-default">2</label>
         <!--v-if-->
       </div>
     </div>
     <div data-slot="item" class="relative flex items-start flex-row">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:3" data-slot="label" class="block font-medium text-default">3</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <!--v-if--><label for="v-0:3" data-slot="label" class="block font-medium text-default">3</label>
         <!--v-if-->
       </div>
     </div>
@@ -654,32 +734,35 @@ exports[`CheckboxGroup > renders with legend slot correctly 1`] = `
   <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
     <legend data-slot="legend" class="mb-1 block font-medium text-default text-sm">Legend slot</legend>
     <div data-slot="item" class="relative flex items-start flex-row">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0:1" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0:1" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <!--v-if--><label for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
     </div>
     <div data-slot="item" class="relative flex items-start flex-row">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <!--v-if--><label for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
     </div>
     <div data-slot="item" class="relative flex items-start flex-row">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <!--v-if--><label for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
     </div>
@@ -693,30 +776,33 @@ exports[`CheckboxGroup > renders with modelValue correctly 1`] = `
   <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
     <!--v-if-->
     <div data-slot="item" class="relative flex items-start flex-row">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-full"></svg></span></button>
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-3.5"></svg></span></button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <!--v-if--><label for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
     </div>
     <div data-slot="item" class="relative flex items-start flex-row">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <!--v-if--><label for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
     </div>
     <div data-slot="item" class="relative flex items-start flex-row">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <!--v-if--><label for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
     </div>
@@ -728,31 +814,34 @@ exports[`CheckboxGroup > renders with modelValue correctly 1`] = `
 exports[`CheckboxGroup > renders with neutral variant card correctly 1`] = `
 "<div id="v-0" data-slot="root" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;">
   <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
-    <!--v-if--><label data-slot="item" class="relative flex items-start border border-muted rounded-lg flex-row p-3.5 has-data-[state=checked]:border-inverted">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-inverted/25 focus-visible:ring-inverted size-4" id="v-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-inverted"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-full"></svg></span></button>
+    <!--v-if--><label data-slot="item" class="relative flex items-start border border-muted rounded-lg hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:bg-elevated/50 transition-colors flex-row hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:border-accented p-3.5 outline-inverted/25 has-focus-visible:outline-3 not-has-disabled:has-focus-visible:border-inverted has-focus-visible:z-[1] has-data-[state=checked]:border-inverted/50 has-data-[state=checked]:bg-elevated">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-none size-4" id="v-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-inverted"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-3.5"></svg></span></button>
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <!--v-if-->
         <p for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</p>
         <!--v-if-->
       </div>
-    </label><label data-slot="item" class="relative flex items-start border border-muted rounded-lg flex-row p-3.5 has-data-[state=checked]:border-inverted">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-inverted/25 focus-visible:ring-inverted size-4" id="v-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+    </label><label data-slot="item" class="relative flex items-start border border-muted rounded-lg hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:bg-elevated/50 transition-colors flex-row hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:border-accented p-3.5 outline-inverted/25 has-focus-visible:outline-3 not-has-disabled:has-focus-visible:border-inverted has-focus-visible:z-[1] has-data-[state=checked]:border-inverted/50 has-data-[state=checked]:bg-elevated">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-none size-4" id="v-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
         </button>
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <!--v-if-->
         <p for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</p>
         <!--v-if-->
       </div>
-    </label><label data-slot="item" class="relative flex items-start border border-muted rounded-lg flex-row p-3.5 has-data-[state=checked]:border-inverted">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-inverted/25 focus-visible:ring-inverted size-4" id="v-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+    </label><label data-slot="item" class="relative flex items-start border border-muted rounded-lg hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:bg-elevated/50 transition-colors flex-row hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:border-accented p-3.5 outline-inverted/25 has-focus-visible:outline-3 not-has-disabled:has-focus-visible:border-inverted has-focus-visible:z-[1] has-data-[state=checked]:border-inverted/50 has-data-[state=checked]:bg-elevated">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-none size-4" id="v-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
         </button>
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <!--v-if-->
         <p for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</p>
         <!--v-if-->
       </div>
@@ -765,31 +854,34 @@ exports[`CheckboxGroup > renders with neutral variant card correctly 1`] = `
 exports[`CheckboxGroup > renders with neutral variant card highlight correctly 1`] = `
 "<div id="v-0" data-slot="root" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;">
   <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
-    <!--v-if--><label data-slot="item" class="relative flex items-start border border-muted rounded-lg flex-row p-3.5 has-data-[state=checked]:border-inverted">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset overflow-hidden focus-visible:outline-3 outline-inverted/25 focus-visible:ring-inverted size-4 ring-inverted" id="v-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-inverted"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-full"></svg></span></button>
+    <!--v-if--><label data-slot="item" class="relative flex items-start border border-muted rounded-lg hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:bg-elevated/50 transition-colors flex-row p-3.5 outline-inverted/25 has-focus-visible:outline-3 not-has-disabled:has-focus-visible:border-inverted has-focus-visible:z-[1] has-data-[state=checked]:border-inverted/50 has-data-[state=checked]:bg-elevated">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset overflow-hidden focus-visible:outline-none size-4 ring-inverted" id="v-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-inverted"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-3.5"></svg></span></button>
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <!--v-if-->
         <p for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</p>
         <!--v-if-->
       </div>
-    </label><label data-slot="item" class="relative flex items-start border border-muted rounded-lg flex-row p-3.5 has-data-[state=checked]:border-inverted">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset overflow-hidden focus-visible:outline-3 outline-inverted/25 focus-visible:ring-inverted size-4 ring-inverted" id="v-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+    </label><label data-slot="item" class="relative flex items-start border border-muted rounded-lg hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:bg-elevated/50 transition-colors flex-row p-3.5 outline-inverted/25 has-focus-visible:outline-3 not-has-disabled:has-focus-visible:border-inverted has-focus-visible:z-[1] has-data-[state=checked]:border-inverted/50 has-data-[state=checked]:bg-elevated">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset overflow-hidden focus-visible:outline-none size-4 ring-inverted" id="v-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
         </button>
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <!--v-if-->
         <p for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</p>
         <!--v-if-->
       </div>
-    </label><label data-slot="item" class="relative flex items-start border border-muted rounded-lg flex-row p-3.5 has-data-[state=checked]:border-inverted">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset overflow-hidden focus-visible:outline-3 outline-inverted/25 focus-visible:ring-inverted size-4 ring-inverted" id="v-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+    </label><label data-slot="item" class="relative flex items-start border border-muted rounded-lg hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:bg-elevated/50 transition-colors flex-row p-3.5 outline-inverted/25 has-focus-visible:outline-3 not-has-disabled:has-focus-visible:border-inverted has-focus-visible:z-[1] has-data-[state=checked]:border-inverted/50 has-data-[state=checked]:bg-elevated">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset overflow-hidden focus-visible:outline-none size-4 ring-inverted" id="v-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
         </button>
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <!--v-if-->
         <p for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</p>
         <!--v-if-->
       </div>
@@ -804,30 +896,33 @@ exports[`CheckboxGroup > renders with neutral variant list correctly 1`] = `
   <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
     <!--v-if-->
     <div data-slot="item" class="relative flex items-start flex-row">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-inverted/25 focus-visible:ring-inverted size-4" id="v-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-inverted"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-full"></svg></span></button>
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 outline-inverted/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-inverted" id="v-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-inverted"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-3.5"></svg></span></button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <!--v-if--><label for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
     </div>
     <div data-slot="item" class="relative flex items-start flex-row">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-inverted/25 focus-visible:ring-inverted size-4" id="v-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 outline-inverted/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-inverted" id="v-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <!--v-if--><label for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
     </div>
     <div data-slot="item" class="relative flex items-start flex-row">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-inverted/25 focus-visible:ring-inverted size-4" id="v-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 outline-inverted/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-inverted" id="v-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <!--v-if--><label for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
     </div>
@@ -841,30 +936,33 @@ exports[`CheckboxGroup > renders with neutral variant list highlight correctly 1
   <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
     <!--v-if-->
     <div data-slot="item" class="relative flex items-start flex-row">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset overflow-hidden focus-visible:outline-3 outline-inverted/25 focus-visible:ring-inverted size-4 ring-inverted" id="v-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-inverted"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-full"></svg></span></button>
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset overflow-hidden size-4 outline-inverted/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-inverted ring-inverted" id="v-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-inverted"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-3.5"></svg></span></button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <!--v-if--><label for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
     </div>
     <div data-slot="item" class="relative flex items-start flex-row">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset overflow-hidden focus-visible:outline-3 outline-inverted/25 focus-visible:ring-inverted size-4 ring-inverted" id="v-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset overflow-hidden size-4 outline-inverted/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-inverted ring-inverted" id="v-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <!--v-if--><label for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
     </div>
     <div data-slot="item" class="relative flex items-start flex-row">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset overflow-hidden focus-visible:outline-3 outline-inverted/25 focus-visible:ring-inverted size-4 ring-inverted" id="v-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset overflow-hidden size-4 outline-inverted/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-inverted ring-inverted" id="v-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <!--v-if--><label for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
     </div>
@@ -876,31 +974,34 @@ exports[`CheckboxGroup > renders with neutral variant list highlight correctly 1
 exports[`CheckboxGroup > renders with neutral variant table correctly 1`] = `
 "<div id="v-0" data-slot="root" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;">
   <fieldset data-slot="fieldset" class="flex flex-col gap-0 -space-y-px">
-    <!--v-if--><label data-slot="item" class="relative flex items-start flex-row border border-muted p-3.5 first-of-type:rounded-t-lg last-of-type:rounded-b-lg has-data-[state=checked]:bg-elevated has-data-[state=checked]:border-inverted/50 has-data-[state=checked]:z-[1]">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-inverted/25 focus-visible:ring-inverted size-4" id="v-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-inverted"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-full"></svg></span></button>
+    <!--v-if--><label data-slot="item" class="relative flex items-start flex-row border border-muted hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:bg-elevated/50 transition-colors outline-inverted/25 has-focus-visible:outline-3 not-has-disabled:has-focus-visible:border-inverted has-focus-visible:z-[1] hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:border-accented p-3.5 first-of-type:rounded-t-lg last-of-type:rounded-b-lg has-data-[state=checked]:bg-elevated has-data-[state=checked]:border-inverted/50 has-data-[state=checked]:z-[1]">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-none size-4" id="v-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-inverted"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-3.5"></svg></span></button>
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <!--v-if-->
         <p for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</p>
         <!--v-if-->
       </div>
-    </label><label data-slot="item" class="relative flex items-start flex-row border border-muted p-3.5 first-of-type:rounded-t-lg last-of-type:rounded-b-lg has-data-[state=checked]:bg-elevated has-data-[state=checked]:border-inverted/50 has-data-[state=checked]:z-[1]">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-inverted/25 focus-visible:ring-inverted size-4" id="v-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+    </label><label data-slot="item" class="relative flex items-start flex-row border border-muted hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:bg-elevated/50 transition-colors outline-inverted/25 has-focus-visible:outline-3 not-has-disabled:has-focus-visible:border-inverted has-focus-visible:z-[1] hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:border-accented p-3.5 first-of-type:rounded-t-lg last-of-type:rounded-b-lg has-data-[state=checked]:bg-elevated has-data-[state=checked]:border-inverted/50 has-data-[state=checked]:z-[1]">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-none size-4" id="v-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
         </button>
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <!--v-if-->
         <p for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</p>
         <!--v-if-->
       </div>
-    </label><label data-slot="item" class="relative flex items-start flex-row border border-muted p-3.5 first-of-type:rounded-t-lg last-of-type:rounded-b-lg has-data-[state=checked]:bg-elevated has-data-[state=checked]:border-inverted/50 has-data-[state=checked]:z-[1]">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-inverted/25 focus-visible:ring-inverted size-4" id="v-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+    </label><label data-slot="item" class="relative flex items-start flex-row border border-muted hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:bg-elevated/50 transition-colors outline-inverted/25 has-focus-visible:outline-3 not-has-disabled:has-focus-visible:border-inverted has-focus-visible:z-[1] hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:border-accented p-3.5 first-of-type:rounded-t-lg last-of-type:rounded-b-lg has-data-[state=checked]:bg-elevated has-data-[state=checked]:border-inverted/50 has-data-[state=checked]:z-[1]">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-none size-4" id="v-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
         </button>
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <!--v-if-->
         <p for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</p>
         <!--v-if-->
       </div>
@@ -913,31 +1014,34 @@ exports[`CheckboxGroup > renders with neutral variant table correctly 1`] = `
 exports[`CheckboxGroup > renders with neutral variant table highlight correctly 1`] = `
 "<div id="v-0" data-slot="root" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;">
   <fieldset data-slot="fieldset" class="flex flex-col gap-0 -space-y-px">
-    <!--v-if--><label data-slot="item" class="relative flex items-start flex-row border border-muted p-3.5 first-of-type:rounded-t-lg last-of-type:rounded-b-lg has-data-[state=checked]:bg-elevated has-data-[state=checked]:border-inverted/50 has-data-[state=checked]:z-[1]">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset overflow-hidden focus-visible:outline-3 outline-inverted/25 focus-visible:ring-inverted size-4 ring-inverted" id="v-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-inverted"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-full"></svg></span></button>
+    <!--v-if--><label data-slot="item" class="relative flex items-start flex-row border border-muted hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:bg-elevated/50 transition-colors outline-inverted/25 has-focus-visible:outline-3 not-has-disabled:has-focus-visible:border-inverted has-focus-visible:z-[1] p-3.5 first-of-type:rounded-t-lg last-of-type:rounded-b-lg has-data-[state=checked]:bg-elevated has-data-[state=checked]:border-inverted/50 has-data-[state=checked]:z-[1]">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset overflow-hidden focus-visible:outline-none size-4 ring-inverted" id="v-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-inverted"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-3.5"></svg></span></button>
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <!--v-if-->
         <p for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</p>
         <!--v-if-->
       </div>
-    </label><label data-slot="item" class="relative flex items-start flex-row border border-muted p-3.5 first-of-type:rounded-t-lg last-of-type:rounded-b-lg has-data-[state=checked]:bg-elevated has-data-[state=checked]:border-inverted/50 has-data-[state=checked]:z-[1]">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset overflow-hidden focus-visible:outline-3 outline-inverted/25 focus-visible:ring-inverted size-4 ring-inverted" id="v-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+    </label><label data-slot="item" class="relative flex items-start flex-row border border-muted hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:bg-elevated/50 transition-colors outline-inverted/25 has-focus-visible:outline-3 not-has-disabled:has-focus-visible:border-inverted has-focus-visible:z-[1] p-3.5 first-of-type:rounded-t-lg last-of-type:rounded-b-lg has-data-[state=checked]:bg-elevated has-data-[state=checked]:border-inverted/50 has-data-[state=checked]:z-[1]">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset overflow-hidden focus-visible:outline-none size-4 ring-inverted" id="v-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
         </button>
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <!--v-if-->
         <p for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</p>
         <!--v-if-->
       </div>
-    </label><label data-slot="item" class="relative flex items-start flex-row border border-muted p-3.5 first-of-type:rounded-t-lg last-of-type:rounded-b-lg has-data-[state=checked]:bg-elevated has-data-[state=checked]:border-inverted/50 has-data-[state=checked]:z-[1]">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset overflow-hidden focus-visible:outline-3 outline-inverted/25 focus-visible:ring-inverted size-4 ring-inverted" id="v-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+    </label><label data-slot="item" class="relative flex items-start flex-row border border-muted hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:bg-elevated/50 transition-colors outline-inverted/25 has-focus-visible:outline-3 not-has-disabled:has-focus-visible:border-inverted has-focus-visible:z-[1] p-3.5 first-of-type:rounded-t-lg last-of-type:rounded-b-lg has-data-[state=checked]:bg-elevated has-data-[state=checked]:border-inverted/50 has-data-[state=checked]:z-[1]">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset overflow-hidden focus-visible:outline-none size-4 ring-inverted" id="v-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
         </button>
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <!--v-if-->
         <p for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</p>
         <!--v-if-->
       </div>
@@ -950,31 +1054,34 @@ exports[`CheckboxGroup > renders with neutral variant table highlight correctly
 exports[`CheckboxGroup > renders with primary variant card correctly 1`] = `
 "<div id="v-0" data-slot="root" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;">
   <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
-    <!--v-if--><label data-slot="item" class="relative flex items-start border border-muted rounded-lg flex-row p-3.5 has-data-[state=checked]:border-primary">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-full"></svg></span></button>
+    <!--v-if--><label data-slot="item" class="relative flex items-start border border-muted rounded-lg hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:bg-elevated/50 transition-colors flex-row hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:border-accented p-3.5 outline-primary/25 has-focus-visible:outline-3 not-has-disabled:has-focus-visible:border-primary has-focus-visible:z-[1] has-data-[state=checked]:border-primary/50 has-data-[state=checked]:bg-primary/10">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-none size-4" id="v-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-3.5"></svg></span></button>
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <!--v-if-->
         <p for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</p>
         <!--v-if-->
       </div>
-    </label><label data-slot="item" class="relative flex items-start border border-muted rounded-lg flex-row p-3.5 has-data-[state=checked]:border-primary">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+    </label><label data-slot="item" class="relative flex items-start border border-muted rounded-lg hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:bg-elevated/50 transition-colors flex-row hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:border-accented p-3.5 outline-primary/25 has-focus-visible:outline-3 not-has-disabled:has-focus-visible:border-primary has-focus-visible:z-[1] has-data-[state=checked]:border-primary/50 has-data-[state=checked]:bg-primary/10">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-none size-4" id="v-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
         </button>
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <!--v-if-->
         <p for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</p>
         <!--v-if-->
       </div>
-    </label><label data-slot="item" class="relative flex items-start border border-muted rounded-lg flex-row p-3.5 has-data-[state=checked]:border-primary">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+    </label><label data-slot="item" class="relative flex items-start border border-muted rounded-lg hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:bg-elevated/50 transition-colors flex-row hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:border-accented p-3.5 outline-primary/25 has-focus-visible:outline-3 not-has-disabled:has-focus-visible:border-primary has-focus-visible:z-[1] has-data-[state=checked]:border-primary/50 has-data-[state=checked]:bg-primary/10">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-none size-4" id="v-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
         </button>
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <!--v-if-->
         <p for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</p>
         <!--v-if-->
       </div>
@@ -987,31 +1094,34 @@ exports[`CheckboxGroup > renders with primary variant card correctly 1`] = `
 exports[`CheckboxGroup > renders with primary variant card highlight correctly 1`] = `
 "<div id="v-0" data-slot="root" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;">
   <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
-    <!--v-if--><label data-slot="item" class="relative flex items-start border border-muted rounded-lg flex-row p-3.5 has-data-[state=checked]:border-primary">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4 ring-primary" id="v-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-full"></svg></span></button>
+    <!--v-if--><label data-slot="item" class="relative flex items-start border border-muted rounded-lg hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:bg-elevated/50 transition-colors flex-row p-3.5 outline-primary/25 has-focus-visible:outline-3 not-has-disabled:has-focus-visible:border-primary has-focus-visible:z-[1] has-data-[state=checked]:border-primary/50 has-data-[state=checked]:bg-primary/10">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset overflow-hidden focus-visible:outline-none size-4 ring-primary" id="v-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-3.5"></svg></span></button>
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <!--v-if-->
         <p for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</p>
         <!--v-if-->
       </div>
-    </label><label data-slot="item" class="relative flex items-start border border-muted rounded-lg flex-row p-3.5 has-data-[state=checked]:border-primary">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4 ring-primary" id="v-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+    </label><label data-slot="item" class="relative flex items-start border border-muted rounded-lg hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:bg-elevated/50 transition-colors flex-row p-3.5 outline-primary/25 has-focus-visible:outline-3 not-has-disabled:has-focus-visible:border-primary has-focus-visible:z-[1] has-data-[state=checked]:border-primary/50 has-data-[state=checked]:bg-primary/10">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset overflow-hidden focus-visible:outline-none size-4 ring-primary" id="v-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
         </button>
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <!--v-if-->
         <p for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</p>
         <!--v-if-->
       </div>
-    </label><label data-slot="item" class="relative flex items-start border border-muted rounded-lg flex-row p-3.5 has-data-[state=checked]:border-primary">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4 ring-primary" id="v-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+    </label><label data-slot="item" class="relative flex items-start border border-muted rounded-lg hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:bg-elevated/50 transition-colors flex-row p-3.5 outline-primary/25 has-focus-visible:outline-3 not-has-disabled:has-focus-visible:border-primary has-focus-visible:z-[1] has-data-[state=checked]:border-primary/50 has-data-[state=checked]:bg-primary/10">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset overflow-hidden focus-visible:outline-none size-4 ring-primary" id="v-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
         </button>
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <!--v-if-->
         <p for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</p>
         <!--v-if-->
       </div>
@@ -1026,30 +1136,33 @@ exports[`CheckboxGroup > renders with primary variant list correctly 1`] = `
   <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
     <!--v-if-->
     <div data-slot="item" class="relative flex items-start flex-row">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-full"></svg></span></button>
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-3.5"></svg></span></button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <!--v-if--><label for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
     </div>
     <div data-slot="item" class="relative flex items-start flex-row">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <!--v-if--><label for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
     </div>
     <div data-slot="item" class="relative flex items-start flex-row">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <!--v-if--><label for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
     </div>
@@ -1063,30 +1176,33 @@ exports[`CheckboxGroup > renders with primary variant list highlight correctly 1
   <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
     <!--v-if-->
     <div data-slot="item" class="relative flex items-start flex-row">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4 ring-primary" id="v-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-full"></svg></span></button>
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary ring-primary" id="v-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-3.5"></svg></span></button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <!--v-if--><label for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
     </div>
     <div data-slot="item" class="relative flex items-start flex-row">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4 ring-primary" id="v-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary ring-primary" id="v-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <!--v-if--><label for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
     </div>
     <div data-slot="item" class="relative flex items-start flex-row">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4 ring-primary" id="v-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary ring-primary" id="v-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <!--v-if--><label for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
     </div>
@@ -1098,31 +1214,34 @@ exports[`CheckboxGroup > renders with primary variant list highlight correctly 1
 exports[`CheckboxGroup > renders with primary variant table correctly 1`] = `
 "<div id="v-0" data-slot="root" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;">
   <fieldset data-slot="fieldset" class="flex flex-col gap-0 -space-y-px">
-    <!--v-if--><label data-slot="item" class="relative flex items-start flex-row border border-muted p-3.5 first-of-type:rounded-t-lg last-of-type:rounded-b-lg has-data-[state=checked]:bg-primary/10 has-data-[state=checked]:border-primary/50 has-data-[state=checked]:z-[1]">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-full"></svg></span></button>
+    <!--v-if--><label data-slot="item" class="relative flex items-start flex-row border border-muted hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:bg-elevated/50 transition-colors outline-primary/25 has-focus-visible:outline-3 not-has-disabled:has-focus-visible:border-primary has-focus-visible:z-[1] hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:border-accented p-3.5 first-of-type:rounded-t-lg last-of-type:rounded-b-lg has-data-[state=checked]:bg-primary/10 has-data-[state=checked]:border-primary/50 has-data-[state=checked]:z-[1]">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-none size-4" id="v-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-3.5"></svg></span></button>
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <!--v-if-->
         <p for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</p>
         <!--v-if-->
       </div>
-    </label><label data-slot="item" class="relative flex items-start flex-row border border-muted p-3.5 first-of-type:rounded-t-lg last-of-type:rounded-b-lg has-data-[state=checked]:bg-primary/10 has-data-[state=checked]:border-primary/50 has-data-[state=checked]:z-[1]">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+    </label><label data-slot="item" class="relative flex items-start flex-row border border-muted hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:bg-elevated/50 transition-colors outline-primary/25 has-focus-visible:outline-3 not-has-disabled:has-focus-visible:border-primary has-focus-visible:z-[1] hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:border-accented p-3.5 first-of-type:rounded-t-lg last-of-type:rounded-b-lg has-data-[state=checked]:bg-primary/10 has-data-[state=checked]:border-primary/50 has-data-[state=checked]:z-[1]">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-none size-4" id="v-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
         </button>
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <!--v-if-->
         <p for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</p>
         <!--v-if-->
       </div>
-    </label><label data-slot="item" class="relative flex items-start flex-row border border-muted p-3.5 first-of-type:rounded-t-lg last-of-type:rounded-b-lg has-data-[state=checked]:bg-primary/10 has-data-[state=checked]:border-primary/50 has-data-[state=checked]:z-[1]">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+    </label><label data-slot="item" class="relative flex items-start flex-row border border-muted hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:bg-elevated/50 transition-colors outline-primary/25 has-focus-visible:outline-3 not-has-disabled:has-focus-visible:border-primary has-focus-visible:z-[1] hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:border-accented p-3.5 first-of-type:rounded-t-lg last-of-type:rounded-b-lg has-data-[state=checked]:bg-primary/10 has-data-[state=checked]:border-primary/50 has-data-[state=checked]:z-[1]">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-none size-4" id="v-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
         </button>
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <!--v-if-->
         <p for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</p>
         <!--v-if-->
       </div>
@@ -1135,31 +1254,34 @@ exports[`CheckboxGroup > renders with primary variant table correctly 1`] = `
 exports[`CheckboxGroup > renders with primary variant table highlight correctly 1`] = `
 "<div id="v-0" data-slot="root" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;">
   <fieldset data-slot="fieldset" class="flex flex-col gap-0 -space-y-px">
-    <!--v-if--><label data-slot="item" class="relative flex items-start flex-row border border-muted p-3.5 first-of-type:rounded-t-lg last-of-type:rounded-b-lg has-data-[state=checked]:bg-primary/10 has-data-[state=checked]:border-primary/50 has-data-[state=checked]:z-[1]">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4 ring-primary" id="v-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-full"></svg></span></button>
+    <!--v-if--><label data-slot="item" class="relative flex items-start flex-row border border-muted hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:bg-elevated/50 transition-colors outline-primary/25 has-focus-visible:outline-3 not-has-disabled:has-focus-visible:border-primary has-focus-visible:z-[1] p-3.5 first-of-type:rounded-t-lg last-of-type:rounded-b-lg has-data-[state=checked]:bg-primary/10 has-data-[state=checked]:border-primary/50 has-data-[state=checked]:z-[1]">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset overflow-hidden focus-visible:outline-none size-4 ring-primary" id="v-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-3.5"></svg></span></button>
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <!--v-if-->
         <p for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</p>
         <!--v-if-->
       </div>
-    </label><label data-slot="item" class="relative flex items-start flex-row border border-muted p-3.5 first-of-type:rounded-t-lg last-of-type:rounded-b-lg has-data-[state=checked]:bg-primary/10 has-data-[state=checked]:border-primary/50 has-data-[state=checked]:z-[1]">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4 ring-primary" id="v-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+    </label><label data-slot="item" class="relative flex items-start flex-row border border-muted hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:bg-elevated/50 transition-colors outline-primary/25 has-focus-visible:outline-3 not-has-disabled:has-focus-visible:border-primary has-focus-visible:z-[1] p-3.5 first-of-type:rounded-t-lg last-of-type:rounded-b-lg has-data-[state=checked]:bg-primary/10 has-data-[state=checked]:border-primary/50 has-data-[state=checked]:z-[1]">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset overflow-hidden focus-visible:outline-none size-4 ring-primary" id="v-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
         </button>
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <!--v-if-->
         <p for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</p>
         <!--v-if-->
       </div>
-    </label><label data-slot="item" class="relative flex items-start flex-row border border-muted p-3.5 first-of-type:rounded-t-lg last-of-type:rounded-b-lg has-data-[state=checked]:bg-primary/10 has-data-[state=checked]:border-primary/50 has-data-[state=checked]:z-[1]">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4 ring-primary" id="v-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+    </label><label data-slot="item" class="relative flex items-start flex-row border border-muted hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:bg-elevated/50 transition-colors outline-primary/25 has-focus-visible:outline-3 not-has-disabled:has-focus-visible:border-primary has-focus-visible:z-[1] p-3.5 first-of-type:rounded-t-lg last-of-type:rounded-b-lg has-data-[state=checked]:bg-primary/10 has-data-[state=checked]:border-primary/50 has-data-[state=checked]:z-[1]">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset overflow-hidden focus-visible:outline-none size-4 ring-primary" id="v-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
         </button>
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <!--v-if-->
         <p for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</p>
         <!--v-if-->
       </div>
@@ -1174,32 +1296,35 @@ exports[`CheckboxGroup > renders with required correctly 1`] = `
   <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
     <legend data-slot="legend" class="mb-1 block font-medium text-default text-sm after:content-['*'] after:ms-0.5 after:text-error">Legend</legend>
     <div data-slot="item" class="relative flex items-start flex-row">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0:1" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0:1" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <!--v-if--><label for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
     </div>
     <div data-slot="item" class="relative flex items-start flex-row">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <!--v-if--><label for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
     </div>
     <div data-slot="item" class="relative flex items-start flex-row">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <!--v-if--><label for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
     </div>
@@ -1213,30 +1338,33 @@ exports[`CheckboxGroup > renders with size lg correctly 1`] = `
   <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
     <!--v-if-->
     <div data-slot="item" class="relative flex items-start flex-row">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4.5" id="v-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-full"></svg></span></button>
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4.5 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-4"></svg></span></button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <!--v-if--><label for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
     </div>
     <div data-slot="item" class="relative flex items-start flex-row">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4.5" id="v-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4.5 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <!--v-if--><label for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
     </div>
     <div data-slot="item" class="relative flex items-start flex-row">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4.5" id="v-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4.5 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <!--v-if--><label for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
     </div>
@@ -1250,30 +1378,33 @@ exports[`CheckboxGroup > renders with size md correctly 1`] = `
   <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
     <!--v-if-->
     <div data-slot="item" class="relative flex items-start flex-row">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-full"></svg></span></button>
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-3.5"></svg></span></button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <!--v-if--><label for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
     </div>
     <div data-slot="item" class="relative flex items-start flex-row">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <!--v-if--><label for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
     </div>
     <div data-slot="item" class="relative flex items-start flex-row">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <!--v-if--><label for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
     </div>
@@ -1287,30 +1418,33 @@ exports[`CheckboxGroup > renders with size sm correctly 1`] = `
   <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-0.5">
     <!--v-if-->
     <div data-slot="item" class="relative flex items-start flex-row">
-      <div data-slot="container" class="flex items-center h-4"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-3.5" id="v-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-full"></svg></span></button>
+      <div data-slot="container" class="flex items-center h-4"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-3.5 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-3"></svg></span></button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-xs"><label for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-xs">
+        <!--v-if--><label for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
     </div>
     <div data-slot="item" class="relative flex items-start flex-row">
-      <div data-slot="container" class="flex items-center h-4"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-3.5" id="v-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+      <div data-slot="container" class="flex items-center h-4"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-3.5 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-xs"><label for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-xs">
+        <!--v-if--><label for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
     </div>
     <div data-slot="item" class="relative flex items-start flex-row">
-      <div data-slot="container" class="flex items-center h-4"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-3.5" id="v-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+      <div data-slot="container" class="flex items-center h-4"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-3.5 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-xs"><label for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-xs">
+        <!--v-if--><label for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
     </div>
@@ -1324,30 +1458,33 @@ exports[`CheckboxGroup > renders with size xl correctly 1`] = `
   <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1.5">
     <!--v-if-->
     <div data-slot="item" class="relative flex items-start flex-row">
-      <div data-slot="container" class="flex items-center h-6"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-5" id="v-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-full"></svg></span></button>
+      <div data-slot="container" class="flex items-center h-6"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-5 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-4.5"></svg></span></button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-base"><label for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-base">
+        <!--v-if--><label for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
     </div>
     <div data-slot="item" class="relative flex items-start flex-row">
-      <div data-slot="container" class="flex items-center h-6"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-5" id="v-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+      <div data-slot="container" class="flex items-center h-6"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-5 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-base"><label for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-base">
+        <!--v-if--><label for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
     </div>
     <div data-slot="item" class="relative flex items-start flex-row">
-      <div data-slot="container" class="flex items-center h-6"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-5" id="v-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+      <div data-slot="container" class="flex items-center h-6"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-5 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-base"><label for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-base">
+        <!--v-if--><label for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
     </div>
@@ -1361,30 +1498,33 @@ exports[`CheckboxGroup > renders with size xs correctly 1`] = `
   <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-0.5">
     <!--v-if-->
     <div data-slot="item" class="relative flex items-start flex-row">
-      <div data-slot="container" class="flex items-center h-4"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-3" id="v-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-full"></svg></span></button>
+      <div data-slot="container" class="flex items-center h-4"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-3 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-2.5"></svg></span></button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-xs"><label for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-xs">
+        <!--v-if--><label for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
     </div>
     <div data-slot="item" class="relative flex items-start flex-row">
-      <div data-slot="container" class="flex items-center h-4"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-3" id="v-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+      <div data-slot="container" class="flex items-center h-4"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-3 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-xs"><label for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-xs">
+        <!--v-if--><label for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
     </div>
     <div data-slot="item" class="relative flex items-start flex-row">
-      <div data-slot="container" class="flex items-center h-4"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-3" id="v-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+      <div data-slot="container" class="flex items-center h-4"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-3 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-xs"><label for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-xs">
+        <!--v-if--><label for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
     </div>
@@ -1398,32 +1538,35 @@ exports[`CheckboxGroup > renders with ui correctly 1`] = `
   <fieldset data-slot="fieldset" class="flex flex-col gap-y-1 gap-x-4">
     <!--v-if-->
     <div data-slot="item" class="relative flex items-start flex-row">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0:1" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0:1" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:1" data-slot="label" class="block font-medium text-red">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <!--v-if--><label for="v-0:1" data-slot="label" class="block font-medium text-red">Option 1</label>
         <!--v-if-->
       </div>
     </div>
     <div data-slot="item" class="relative flex items-start flex-row">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:2" data-slot="label" class="block font-medium text-red">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <!--v-if--><label for="v-0:2" data-slot="label" class="block font-medium text-red">Option 2</label>
         <!--v-if-->
       </div>
     </div>
     <div data-slot="item" class="relative flex items-start flex-row">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:3" data-slot="label" class="block font-medium text-red">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <!--v-if--><label for="v-0:3" data-slot="label" class="block font-medium text-red">Option 3</label>
         <!--v-if-->
       </div>
     </div>
@@ -1437,30 +1580,33 @@ exports[`CheckboxGroup > renders with valueKey correctly 1`] = `
   <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
     <!--v-if-->
     <div data-slot="item" class="relative flex items-start flex-row">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0:Option 1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-full"></svg></span></button>
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0:Option 1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-3.5"></svg></span></button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:Option 1" data-slot="label" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <!--v-if--><label for="v-0:Option 1" data-slot="label" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
     </div>
     <div data-slot="item" class="relative flex items-start flex-row">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0:Option 2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0:Option 2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:Option 2" data-slot="label" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <!--v-if--><label for="v-0:Option 2" data-slot="label" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
     </div>
     <div data-slot="item" class="relative flex items-start flex-row">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0:Option 3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0:Option 3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:Option 3" data-slot="label" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <!--v-if--><label for="v-0:Option 3" data-slot="label" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
     </div>
diff --git a/test/components/__snapshots__/CheckboxGroup.spec.ts.snap b/test/components/__snapshots__/CheckboxGroup.spec.ts.snap
index 34765fe1e9..69f95d9d78 100644
--- a/test/components/__snapshots__/CheckboxGroup.spec.ts.snap
+++ b/test/components/__snapshots__/CheckboxGroup.spec.ts.snap
@@ -5,32 +5,35 @@ exports[`CheckboxGroup > renders with ariaLabel correctly 1`] = `
   <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
     <!--v-if-->
     <div data-slot="item" class="relative flex items-start flex-row">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0-0:1" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0-0:1" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <!--v-if--><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
     </div>
     <div data-slot="item" class="relative flex items-start flex-row">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <!--v-if--><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
     </div>
     <div data-slot="item" class="relative flex items-start flex-row">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <!--v-if--><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
     </div>
@@ -44,32 +47,35 @@ exports[`CheckboxGroup > renders with as correctly 1`] = `
   <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
     <!--v-if-->
     <div data-slot="item" class="relative flex items-start flex-row">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0-0:1" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0-0:1" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <!--v-if--><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
     </div>
     <div data-slot="item" class="relative flex items-start flex-row">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <!--v-if--><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
     </div>
     <div data-slot="item" class="relative flex items-start flex-row">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <!--v-if--><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
     </div>
@@ -83,32 +89,35 @@ exports[`CheckboxGroup > renders with class correctly 1`] = `
   <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
     <!--v-if-->
     <div data-slot="item" class="relative flex items-start flex-row">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0-0:1" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0-0:1" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <!--v-if--><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
     </div>
     <div data-slot="item" class="relative flex items-start flex-row">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <!--v-if--><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
     </div>
     <div data-slot="item" class="relative flex items-start flex-row">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <!--v-if--><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
     </div>
@@ -122,30 +131,33 @@ exports[`CheckboxGroup > renders with defaultValue correctly 1`] = `
   <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
     <!--v-if-->
     <div data-slot="item" class="relative flex items-start flex-row">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><span class="iconify i-lucide:check shrink-0 size-full" aria-hidden="true" data-slot="icon"></span></span></button>
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><span class="iconify i-lucide:check shrink-0 size-3.5" aria-hidden="true" data-slot="icon"></span></span></button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <!--v-if--><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
     </div>
     <div data-slot="item" class="relative flex items-start flex-row">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <!--v-if--><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
     </div>
     <div data-slot="item" class="relative flex items-start flex-row">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <!--v-if--><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
     </div>
@@ -159,32 +171,35 @@ exports[`CheckboxGroup > renders with description correctly 1`] = `
   <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
     <!--v-if-->
     <div data-slot="item" class="relative flex items-start flex-row">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0-0:1" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0-0:1" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <!--v-if--><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
         <p data-slot="description" class="text-muted">Description 0</p>
       </div>
     </div>
     <div data-slot="item" class="relative flex items-start flex-row">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <!--v-if--><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
         <p data-slot="description" class="text-muted">Description 1</p>
       </div>
     </div>
     <div data-slot="item" class="relative flex items-start flex-row">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <!--v-if--><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
         <p data-slot="description" class="text-muted">Description 2</p>
       </div>
     </div>
@@ -198,32 +213,35 @@ exports[`CheckboxGroup > renders with description slot correctly 1`] = `
   <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
     <!--v-if-->
     <div data-slot="item" class="relative flex items-start flex-row">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0-0:1" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0-0:1" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <!--v-if--><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
         <p data-slot="description" class="text-muted">Description slot</p>
       </div>
     </div>
     <div data-slot="item" class="relative flex items-start flex-row">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <!--v-if--><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
         <p data-slot="description" class="text-muted">Description slot</p>
       </div>
     </div>
     <div data-slot="item" class="relative flex items-start flex-row">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <!--v-if--><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
         <p data-slot="description" class="text-muted">Description slot</p>
       </div>
     </div>
@@ -237,32 +255,35 @@ exports[`CheckboxGroup > renders with descriptionKey correctly 1`] = `
   <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
     <!--v-if-->
     <div data-slot="item" class="relative flex items-start flex-row">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0-0:1" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0-0:1" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <!--v-if--><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
         <p data-slot="description" class="text-muted">1</p>
       </div>
     </div>
     <div data-slot="item" class="relative flex items-start flex-row">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <!--v-if--><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
         <p data-slot="description" class="text-muted">2</p>
       </div>
     </div>
     <div data-slot="item" class="relative flex items-start flex-row">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <!--v-if--><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
         <p data-slot="description" class="text-muted">3</p>
       </div>
     </div>
@@ -276,32 +297,35 @@ exports[`CheckboxGroup > renders with disabled correctly 1`] = `
   <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
     <!--v-if-->
     <div data-slot="item" class="relative flex items-start flex-row opacity-75">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4 cursor-not-allowed" id="v-0-0:1" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-disabled="" disabled="" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 cursor-not-allowed outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0-0:1" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-disabled="" disabled="" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default cursor-not-allowed">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <!--v-if--><label for="v-0-0:1" data-slot="label" class="block font-medium text-default cursor-not-allowed">Option 1</label>
         <!--v-if-->
       </div>
     </div>
     <div data-slot="item" class="relative flex items-start flex-row opacity-75">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4 cursor-not-allowed" id="v-0-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-disabled="" disabled="" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 cursor-not-allowed outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-disabled="" disabled="" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default cursor-not-allowed">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <!--v-if--><label for="v-0-0:2" data-slot="label" class="block font-medium text-default cursor-not-allowed">Option 2</label>
         <!--v-if-->
       </div>
     </div>
     <div data-slot="item" class="relative flex items-start flex-row opacity-75">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4 cursor-not-allowed" id="v-0-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-disabled="" disabled="" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 cursor-not-allowed outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-disabled="" disabled="" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default cursor-not-allowed">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <!--v-if--><label for="v-0-0:3" data-slot="label" class="block font-medium text-default cursor-not-allowed">Option 3</label>
         <!--v-if-->
       </div>
     </div>
@@ -313,31 +337,34 @@ exports[`CheckboxGroup > renders with disabled correctly 1`] = `
 exports[`CheckboxGroup > renders with horizontal variant card correctly 1`] = `
 "<div id="v-0-0" data-slot="root" class="relative" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;">
   <fieldset data-slot="fieldset" class="flex gap-x-2 flex-row gap-y-1">
-    <!--v-if--><label data-slot="item" class="relative flex items-start border border-muted rounded-lg flex-row p-3.5 has-data-[state=checked]:border-primary">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><span class="iconify i-lucide:check shrink-0 size-full" aria-hidden="true" data-slot="icon"></span></span></button>
+    <!--v-if--><label data-slot="item" class="relative flex items-start border border-muted rounded-lg hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:bg-elevated/50 transition-colors flex-row hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:border-accented p-3.5 outline-primary/25 has-focus-visible:outline-3 not-has-disabled:has-focus-visible:border-primary has-focus-visible:z-[1] has-data-[state=checked]:border-primary/50 has-data-[state=checked]:bg-primary/10">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-none size-4" id="v-0-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><span class="iconify i-lucide:check shrink-0 size-3.5" aria-hidden="true" data-slot="icon"></span></span></button>
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <!--v-if-->
         <p for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</p>
         <!--v-if-->
       </div>
-    </label><label data-slot="item" class="relative flex items-start border border-muted rounded-lg flex-row p-3.5 has-data-[state=checked]:border-primary">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal">
+    </label><label data-slot="item" class="relative flex items-start border border-muted rounded-lg hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:bg-elevated/50 transition-colors flex-row hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:border-accented p-3.5 outline-primary/25 has-focus-visible:outline-3 not-has-disabled:has-focus-visible:border-primary has-focus-visible:z-[1] has-data-[state=checked]:border-primary/50 has-data-[state=checked]:bg-primary/10">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-none size-4" id="v-0-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal">
           <!---->
         </button>
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <!--v-if-->
         <p for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</p>
         <!--v-if-->
       </div>
-    </label><label data-slot="item" class="relative flex items-start border border-muted rounded-lg flex-row p-3.5 has-data-[state=checked]:border-primary">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal">
+    </label><label data-slot="item" class="relative flex items-start border border-muted rounded-lg hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:bg-elevated/50 transition-colors flex-row hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:border-accented p-3.5 outline-primary/25 has-focus-visible:outline-3 not-has-disabled:has-focus-visible:border-primary has-focus-visible:z-[1] has-data-[state=checked]:border-primary/50 has-data-[state=checked]:bg-primary/10">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-none size-4" id="v-0-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal">
           <!---->
         </button>
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <!--v-if-->
         <p for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</p>
         <!--v-if-->
       </div>
@@ -352,30 +379,33 @@ exports[`CheckboxGroup > renders with horizontal variant list correctly 1`] = `
   <fieldset data-slot="fieldset" class="flex gap-x-2 flex-row gap-y-1">
     <!--v-if-->
     <div data-slot="item" class="relative flex items-start flex-row">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><span class="iconify i-lucide:check shrink-0 size-full" aria-hidden="true" data-slot="icon"></span></span></button>
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><span class="iconify i-lucide:check shrink-0 size-3.5" aria-hidden="true" data-slot="icon"></span></span></button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <!--v-if--><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
     </div>
     <div data-slot="item" class="relative flex items-start flex-row">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <!--v-if--><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
     </div>
     <div data-slot="item" class="relative flex items-start flex-row">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <!--v-if--><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
     </div>
@@ -387,31 +417,34 @@ exports[`CheckboxGroup > renders with horizontal variant list correctly 1`] = `
 exports[`CheckboxGroup > renders with horizontal variant table correctly 1`] = `
 "<div id="v-0-0" data-slot="root" class="relative" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;">
   <fieldset data-slot="fieldset" class="flex flex-row gap-0 -space-x-px">
-    <!--v-if--><label data-slot="item" class="relative flex items-start flex-row border border-muted p-3.5 first-of-type:rounded-s-lg last-of-type:rounded-e-lg has-data-[state=checked]:bg-primary/10 has-data-[state=checked]:border-primary/50 has-data-[state=checked]:z-[1]">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><span class="iconify i-lucide:check shrink-0 size-full" aria-hidden="true" data-slot="icon"></span></span></button>
+    <!--v-if--><label data-slot="item" class="relative flex items-start flex-row border border-muted hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:bg-elevated/50 transition-colors outline-primary/25 has-focus-visible:outline-3 not-has-disabled:has-focus-visible:border-primary has-focus-visible:z-[1] hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:border-accented p-3.5 first-of-type:rounded-s-lg last-of-type:rounded-e-lg has-data-[state=checked]:bg-primary/10 has-data-[state=checked]:border-primary/50 has-data-[state=checked]:z-[1]">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-none size-4" id="v-0-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><span class="iconify i-lucide:check shrink-0 size-3.5" aria-hidden="true" data-slot="icon"></span></span></button>
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <!--v-if-->
         <p for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</p>
         <!--v-if-->
       </div>
-    </label><label data-slot="item" class="relative flex items-start flex-row border border-muted p-3.5 first-of-type:rounded-s-lg last-of-type:rounded-e-lg has-data-[state=checked]:bg-primary/10 has-data-[state=checked]:border-primary/50 has-data-[state=checked]:z-[1]">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal">
+    </label><label data-slot="item" class="relative flex items-start flex-row border border-muted hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:bg-elevated/50 transition-colors outline-primary/25 has-focus-visible:outline-3 not-has-disabled:has-focus-visible:border-primary has-focus-visible:z-[1] hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:border-accented p-3.5 first-of-type:rounded-s-lg last-of-type:rounded-e-lg has-data-[state=checked]:bg-primary/10 has-data-[state=checked]:border-primary/50 has-data-[state=checked]:z-[1]">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-none size-4" id="v-0-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal">
           <!---->
         </button>
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <!--v-if-->
         <p for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</p>
         <!--v-if-->
       </div>
-    </label><label data-slot="item" class="relative flex items-start flex-row border border-muted p-3.5 first-of-type:rounded-s-lg last-of-type:rounded-e-lg has-data-[state=checked]:bg-primary/10 has-data-[state=checked]:border-primary/50 has-data-[state=checked]:z-[1]">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal">
+    </label><label data-slot="item" class="relative flex items-start flex-row border border-muted hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:bg-elevated/50 transition-colors outline-primary/25 has-focus-visible:outline-3 not-has-disabled:has-focus-visible:border-primary has-focus-visible:z-[1] hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:border-accented p-3.5 first-of-type:rounded-s-lg last-of-type:rounded-e-lg has-data-[state=checked]:bg-primary/10 has-data-[state=checked]:border-primary/50 has-data-[state=checked]:z-[1]">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-none size-4" id="v-0-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal">
           <!---->
         </button>
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <!--v-if-->
         <p for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</p>
         <!--v-if-->
       </div>
@@ -421,35 +454,71 @@ exports[`CheckboxGroup > renders with horizontal variant table correctly 1`] = `
 </div>"
 `;
 
+exports[`CheckboxGroup > renders with icon correctly 1`] = `
+"<div id="v-0-0" data-slot="root" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;">
+  <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
+    <!--v-if-->
+    <div data-slot="item" class="relative flex items-start outline-primary/25 has-focus-visible:outline-3 not-has-disabled:has-focus-visible:border-primary has-focus-visible:z-[1]">
+      <div data-slot="container" class="flex items-center h-auto"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-none sr-only size-4" id="v-0-0:1" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical"></button>
+        <!--v-if-->
+      </div>
+      <div data-slot="wrapper" class="w-full flex flex-col items-center gap-1 text-center text-sm"><span class="iconify i-lucide:rocket shrink-0 size-4" aria-hidden="true" data-slot="icon"></span><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
+        <!--v-if-->
+      </div>
+    </div>
+    <div data-slot="item" class="relative flex items-start outline-primary/25 has-focus-visible:outline-3 not-has-disabled:has-focus-visible:border-primary has-focus-visible:z-[1]">
+      <div data-slot="container" class="flex items-center h-auto"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-none sr-only size-4" id="v-0-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical"></button>
+        <!--v-if-->
+      </div>
+      <div data-slot="wrapper" class="w-full flex flex-col items-center gap-1 text-center text-sm"><span class="iconify i-lucide:rocket shrink-0 size-4" aria-hidden="true" data-slot="icon"></span><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
+        <!--v-if-->
+      </div>
+    </div>
+    <div data-slot="item" class="relative flex items-start outline-primary/25 has-focus-visible:outline-3 not-has-disabled:has-focus-visible:border-primary has-focus-visible:z-[1]">
+      <div data-slot="container" class="flex items-center h-auto"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-none sr-only size-4" id="v-0-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical"></button>
+        <!--v-if-->
+      </div>
+      <div data-slot="wrapper" class="w-full flex flex-col items-center gap-1 text-center text-sm"><span class="iconify i-lucide:rocket shrink-0 size-4" aria-hidden="true" data-slot="icon"></span><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
+        <!--v-if-->
+      </div>
+    </div>
+  </fieldset>
+  <!--v-if-->
+</div>"
+`;
+
 exports[`CheckboxGroup > renders with indicator end correctly 1`] = `
 "<div id="v-0-0" data-slot="root" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;">
   <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
     <!--v-if-->
     <div data-slot="item" class="relative flex items-start flex-row-reverse">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><span class="iconify i-lucide:check shrink-0 size-full" aria-hidden="true" data-slot="icon"></span></span></button>
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><span class="iconify i-lucide:check shrink-0 size-3.5" aria-hidden="true" data-slot="icon"></span></span></button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full me-2 text-sm"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full me-2 text-sm">
+        <!--v-if--><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
     </div>
     <div data-slot="item" class="relative flex items-start flex-row-reverse">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full me-2 text-sm"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full me-2 text-sm">
+        <!--v-if--><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
     </div>
     <div data-slot="item" class="relative flex items-start flex-row-reverse">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full me-2 text-sm"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full me-2 text-sm">
+        <!--v-if--><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
     </div>
@@ -462,31 +531,30 @@ exports[`CheckboxGroup > renders with indicator hidden correctly 1`] = `
 "<div id="v-0-0" data-slot="root" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;">
   <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
     <!--v-if-->
-    <div data-slot="item" class="relative flex items-start">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary sr-only size-4" id="v-0-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><span class="iconify i-lucide:check shrink-0 size-full" aria-hidden="true" data-slot="icon"></span></span></button>
+    <div data-slot="item" class="relative flex items-start outline-primary/25 has-focus-visible:outline-3 not-has-disabled:has-focus-visible:border-primary has-focus-visible:z-[1]">
+      <div data-slot="container" class="flex items-center h-auto"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-none sr-only size-4" id="v-0-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical"></button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full text-center text-sm"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full flex flex-col items-center gap-1 text-center text-sm">
+        <!--v-if--><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
     </div>
-    <div data-slot="item" class="relative flex items-start">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary sr-only size-4" id="v-0-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
-          <!---->
-        </button>
+    <div data-slot="item" class="relative flex items-start outline-primary/25 has-focus-visible:outline-3 not-has-disabled:has-focus-visible:border-primary has-focus-visible:z-[1]">
+      <div data-slot="container" class="flex items-center h-auto"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-none sr-only size-4" id="v-0-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical"></button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full text-center text-sm"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full flex flex-col items-center gap-1 text-center text-sm">
+        <!--v-if--><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
     </div>
-    <div data-slot="item" class="relative flex items-start">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary sr-only size-4" id="v-0-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
-          <!---->
-        </button>
+    <div data-slot="item" class="relative flex items-start outline-primary/25 has-focus-visible:outline-3 not-has-disabled:has-focus-visible:border-primary has-focus-visible:z-[1]">
+      <div data-slot="container" class="flex items-center h-auto"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-none sr-only size-4" id="v-0-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical"></button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full text-center text-sm"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full flex flex-col items-center gap-1 text-center text-sm">
+        <!--v-if--><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
     </div>
@@ -500,30 +568,33 @@ exports[`CheckboxGroup > renders with indicator start correctly 1`] = `
   <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
     <!--v-if-->
     <div data-slot="item" class="relative flex items-start flex-row">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><span class="iconify i-lucide:check shrink-0 size-full" aria-hidden="true" data-slot="icon"></span></span></button>
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><span class="iconify i-lucide:check shrink-0 size-3.5" aria-hidden="true" data-slot="icon"></span></span></button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <!--v-if--><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
     </div>
     <div data-slot="item" class="relative flex items-start flex-row">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <!--v-if--><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
     </div>
     <div data-slot="item" class="relative flex items-start flex-row">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <!--v-if--><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
     </div>
@@ -537,32 +608,35 @@ exports[`CheckboxGroup > renders with items correctly 1`] = `
   <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
     <!--v-if-->
     <div data-slot="item" class="relative flex items-start flex-row">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0-0:1" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0-0:1" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <!--v-if--><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
     </div>
     <div data-slot="item" class="relative flex items-start flex-row">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <!--v-if--><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
     </div>
     <div data-slot="item" class="relative flex items-start flex-row">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <!--v-if--><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
     </div>
@@ -576,32 +650,35 @@ exports[`CheckboxGroup > renders with label slot correctly 1`] = `
   <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
     <!--v-if-->
     <div data-slot="item" class="relative flex items-start flex-row">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0-0:1" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0-0:1" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">Label slot</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <!--v-if--><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">Label slot</label>
         <!--v-if-->
       </div>
     </div>
     <div data-slot="item" class="relative flex items-start flex-row">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">Label slot</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <!--v-if--><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">Label slot</label>
         <!--v-if-->
       </div>
     </div>
     <div data-slot="item" class="relative flex items-start flex-row">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">Label slot</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <!--v-if--><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">Label slot</label>
         <!--v-if-->
       </div>
     </div>
@@ -615,32 +692,35 @@ exports[`CheckboxGroup > renders with labelKey correctly 1`] = `
   <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
     <!--v-if-->
     <div data-slot="item" class="relative flex items-start flex-row">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0-0:1" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0-0:1" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">1</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <!--v-if--><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">1</label>
         <!--v-if-->
       </div>
     </div>
     <div data-slot="item" class="relative flex items-start flex-row">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">2</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <!--v-if--><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">2</label>
         <!--v-if-->
       </div>
     </div>
     <div data-slot="item" class="relative flex items-start flex-row">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">3</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <!--v-if--><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">3</label>
         <!--v-if-->
       </div>
     </div>
@@ -654,32 +734,35 @@ exports[`CheckboxGroup > renders with legend slot correctly 1`] = `
   <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
     <legend data-slot="legend" class="mb-1 block font-medium text-default text-sm">Legend slot</legend>
     <div data-slot="item" class="relative flex items-start flex-row">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0-0:1" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0-0:1" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <!--v-if--><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
     </div>
     <div data-slot="item" class="relative flex items-start flex-row">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <!--v-if--><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
     </div>
     <div data-slot="item" class="relative flex items-start flex-row">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <!--v-if--><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
     </div>
@@ -693,30 +776,33 @@ exports[`CheckboxGroup > renders with modelValue correctly 1`] = `
   <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
     <!--v-if-->
     <div data-slot="item" class="relative flex items-start flex-row">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><span class="iconify i-lucide:check shrink-0 size-full" aria-hidden="true" data-slot="icon"></span></span></button>
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><span class="iconify i-lucide:check shrink-0 size-3.5" aria-hidden="true" data-slot="icon"></span></span></button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <!--v-if--><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
     </div>
     <div data-slot="item" class="relative flex items-start flex-row">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <!--v-if--><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
     </div>
     <div data-slot="item" class="relative flex items-start flex-row">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <!--v-if--><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
     </div>
@@ -728,31 +814,34 @@ exports[`CheckboxGroup > renders with modelValue correctly 1`] = `
 exports[`CheckboxGroup > renders with neutral variant card correctly 1`] = `
 "<div id="v-0-0" data-slot="root" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;">
   <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
-    <!--v-if--><label data-slot="item" class="relative flex items-start border border-muted rounded-lg flex-row p-3.5 has-data-[state=checked]:border-inverted">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-inverted/25 focus-visible:ring-inverted size-4" id="v-0-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-inverted"><span class="iconify i-lucide:check shrink-0 size-full" aria-hidden="true" data-slot="icon"></span></span></button>
+    <!--v-if--><label data-slot="item" class="relative flex items-start border border-muted rounded-lg hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:bg-elevated/50 transition-colors flex-row hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:border-accented p-3.5 outline-inverted/25 has-focus-visible:outline-3 not-has-disabled:has-focus-visible:border-inverted has-focus-visible:z-[1] has-data-[state=checked]:border-inverted/50 has-data-[state=checked]:bg-elevated">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-none size-4" id="v-0-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-inverted"><span class="iconify i-lucide:check shrink-0 size-3.5" aria-hidden="true" data-slot="icon"></span></span></button>
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <!--v-if-->
         <p for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</p>
         <!--v-if-->
       </div>
-    </label><label data-slot="item" class="relative flex items-start border border-muted rounded-lg flex-row p-3.5 has-data-[state=checked]:border-inverted">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-inverted/25 focus-visible:ring-inverted size-4" id="v-0-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+    </label><label data-slot="item" class="relative flex items-start border border-muted rounded-lg hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:bg-elevated/50 transition-colors flex-row hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:border-accented p-3.5 outline-inverted/25 has-focus-visible:outline-3 not-has-disabled:has-focus-visible:border-inverted has-focus-visible:z-[1] has-data-[state=checked]:border-inverted/50 has-data-[state=checked]:bg-elevated">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-none size-4" id="v-0-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
         </button>
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <!--v-if-->
         <p for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</p>
         <!--v-if-->
       </div>
-    </label><label data-slot="item" class="relative flex items-start border border-muted rounded-lg flex-row p-3.5 has-data-[state=checked]:border-inverted">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-inverted/25 focus-visible:ring-inverted size-4" id="v-0-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+    </label><label data-slot="item" class="relative flex items-start border border-muted rounded-lg hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:bg-elevated/50 transition-colors flex-row hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:border-accented p-3.5 outline-inverted/25 has-focus-visible:outline-3 not-has-disabled:has-focus-visible:border-inverted has-focus-visible:z-[1] has-data-[state=checked]:border-inverted/50 has-data-[state=checked]:bg-elevated">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-none size-4" id="v-0-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
         </button>
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <!--v-if-->
         <p for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</p>
         <!--v-if-->
       </div>
@@ -765,31 +854,34 @@ exports[`CheckboxGroup > renders with neutral variant card correctly 1`] = `
 exports[`CheckboxGroup > renders with neutral variant card highlight correctly 1`] = `
 "<div id="v-0-0" data-slot="root" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;">
   <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
-    <!--v-if--><label data-slot="item" class="relative flex items-start border border-muted rounded-lg flex-row p-3.5 has-data-[state=checked]:border-inverted">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset overflow-hidden focus-visible:outline-3 outline-inverted/25 focus-visible:ring-inverted size-4 ring-inverted" id="v-0-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-inverted"><span class="iconify i-lucide:check shrink-0 size-full" aria-hidden="true" data-slot="icon"></span></span></button>
+    <!--v-if--><label data-slot="item" class="relative flex items-start border border-muted rounded-lg hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:bg-elevated/50 transition-colors flex-row p-3.5 outline-inverted/25 has-focus-visible:outline-3 not-has-disabled:has-focus-visible:border-inverted has-focus-visible:z-[1] has-data-[state=checked]:border-inverted/50 has-data-[state=checked]:bg-elevated">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset overflow-hidden focus-visible:outline-none size-4 ring-inverted" id="v-0-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-inverted"><span class="iconify i-lucide:check shrink-0 size-3.5" aria-hidden="true" data-slot="icon"></span></span></button>
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <!--v-if-->
         <p for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</p>
         <!--v-if-->
       </div>
-    </label><label data-slot="item" class="relative flex items-start border border-muted rounded-lg flex-row p-3.5 has-data-[state=checked]:border-inverted">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset overflow-hidden focus-visible:outline-3 outline-inverted/25 focus-visible:ring-inverted size-4 ring-inverted" id="v-0-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+    </label><label data-slot="item" class="relative flex items-start border border-muted rounded-lg hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:bg-elevated/50 transition-colors flex-row p-3.5 outline-inverted/25 has-focus-visible:outline-3 not-has-disabled:has-focus-visible:border-inverted has-focus-visible:z-[1] has-data-[state=checked]:border-inverted/50 has-data-[state=checked]:bg-elevated">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset overflow-hidden focus-visible:outline-none size-4 ring-inverted" id="v-0-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
         </button>
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <!--v-if-->
         <p for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</p>
         <!--v-if-->
       </div>
-    </label><label data-slot="item" class="relative flex items-start border border-muted rounded-lg flex-row p-3.5 has-data-[state=checked]:border-inverted">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset overflow-hidden focus-visible:outline-3 outline-inverted/25 focus-visible:ring-inverted size-4 ring-inverted" id="v-0-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+    </label><label data-slot="item" class="relative flex items-start border border-muted rounded-lg hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:bg-elevated/50 transition-colors flex-row p-3.5 outline-inverted/25 has-focus-visible:outline-3 not-has-disabled:has-focus-visible:border-inverted has-focus-visible:z-[1] has-data-[state=checked]:border-inverted/50 has-data-[state=checked]:bg-elevated">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset overflow-hidden focus-visible:outline-none size-4 ring-inverted" id="v-0-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
         </button>
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <!--v-if-->
         <p for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</p>
         <!--v-if-->
       </div>
@@ -804,30 +896,33 @@ exports[`CheckboxGroup > renders with neutral variant list correctly 1`] = `
   <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
     <!--v-if-->
     <div data-slot="item" class="relative flex items-start flex-row">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-inverted/25 focus-visible:ring-inverted size-4" id="v-0-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-inverted"><span class="iconify i-lucide:check shrink-0 size-full" aria-hidden="true" data-slot="icon"></span></span></button>
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 outline-inverted/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-inverted" id="v-0-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-inverted"><span class="iconify i-lucide:check shrink-0 size-3.5" aria-hidden="true" data-slot="icon"></span></span></button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <!--v-if--><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
     </div>
     <div data-slot="item" class="relative flex items-start flex-row">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-inverted/25 focus-visible:ring-inverted size-4" id="v-0-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 outline-inverted/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-inverted" id="v-0-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <!--v-if--><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
     </div>
     <div data-slot="item" class="relative flex items-start flex-row">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-inverted/25 focus-visible:ring-inverted size-4" id="v-0-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 outline-inverted/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-inverted" id="v-0-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <!--v-if--><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
     </div>
@@ -841,30 +936,33 @@ exports[`CheckboxGroup > renders with neutral variant list highlight correctly 1
   <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
     <!--v-if-->
     <div data-slot="item" class="relative flex items-start flex-row">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset overflow-hidden focus-visible:outline-3 outline-inverted/25 focus-visible:ring-inverted size-4 ring-inverted" id="v-0-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-inverted"><span class="iconify i-lucide:check shrink-0 size-full" aria-hidden="true" data-slot="icon"></span></span></button>
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset overflow-hidden size-4 outline-inverted/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-inverted ring-inverted" id="v-0-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-inverted"><span class="iconify i-lucide:check shrink-0 size-3.5" aria-hidden="true" data-slot="icon"></span></span></button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <!--v-if--><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
     </div>
     <div data-slot="item" class="relative flex items-start flex-row">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset overflow-hidden focus-visible:outline-3 outline-inverted/25 focus-visible:ring-inverted size-4 ring-inverted" id="v-0-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset overflow-hidden size-4 outline-inverted/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-inverted ring-inverted" id="v-0-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <!--v-if--><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
     </div>
     <div data-slot="item" class="relative flex items-start flex-row">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset overflow-hidden focus-visible:outline-3 outline-inverted/25 focus-visible:ring-inverted size-4 ring-inverted" id="v-0-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset overflow-hidden size-4 outline-inverted/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-inverted ring-inverted" id="v-0-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <!--v-if--><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
     </div>
@@ -876,31 +974,34 @@ exports[`CheckboxGroup > renders with neutral variant list highlight correctly 1
 exports[`CheckboxGroup > renders with neutral variant table correctly 1`] = `
 "<div id="v-0-0" data-slot="root" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;">
   <fieldset data-slot="fieldset" class="flex flex-col gap-0 -space-y-px">
-    <!--v-if--><label data-slot="item" class="relative flex items-start flex-row border border-muted p-3.5 first-of-type:rounded-t-lg last-of-type:rounded-b-lg has-data-[state=checked]:bg-elevated has-data-[state=checked]:border-inverted/50 has-data-[state=checked]:z-[1]">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-inverted/25 focus-visible:ring-inverted size-4" id="v-0-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-inverted"><span class="iconify i-lucide:check shrink-0 size-full" aria-hidden="true" data-slot="icon"></span></span></button>
+    <!--v-if--><label data-slot="item" class="relative flex items-start flex-row border border-muted hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:bg-elevated/50 transition-colors outline-inverted/25 has-focus-visible:outline-3 not-has-disabled:has-focus-visible:border-inverted has-focus-visible:z-[1] hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:border-accented p-3.5 first-of-type:rounded-t-lg last-of-type:rounded-b-lg has-data-[state=checked]:bg-elevated has-data-[state=checked]:border-inverted/50 has-data-[state=checked]:z-[1]">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-none size-4" id="v-0-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-inverted"><span class="iconify i-lucide:check shrink-0 size-3.5" aria-hidden="true" data-slot="icon"></span></span></button>
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <!--v-if-->
         <p for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</p>
         <!--v-if-->
       </div>
-    </label><label data-slot="item" class="relative flex items-start flex-row border border-muted p-3.5 first-of-type:rounded-t-lg last-of-type:rounded-b-lg has-data-[state=checked]:bg-elevated has-data-[state=checked]:border-inverted/50 has-data-[state=checked]:z-[1]">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-inverted/25 focus-visible:ring-inverted size-4" id="v-0-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+    </label><label data-slot="item" class="relative flex items-start flex-row border border-muted hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:bg-elevated/50 transition-colors outline-inverted/25 has-focus-visible:outline-3 not-has-disabled:has-focus-visible:border-inverted has-focus-visible:z-[1] hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:border-accented p-3.5 first-of-type:rounded-t-lg last-of-type:rounded-b-lg has-data-[state=checked]:bg-elevated has-data-[state=checked]:border-inverted/50 has-data-[state=checked]:z-[1]">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-none size-4" id="v-0-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
         </button>
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <!--v-if-->
         <p for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</p>
         <!--v-if-->
       </div>
-    </label><label data-slot="item" class="relative flex items-start flex-row border border-muted p-3.5 first-of-type:rounded-t-lg last-of-type:rounded-b-lg has-data-[state=checked]:bg-elevated has-data-[state=checked]:border-inverted/50 has-data-[state=checked]:z-[1]">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-inverted/25 focus-visible:ring-inverted size-4" id="v-0-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+    </label><label data-slot="item" class="relative flex items-start flex-row border border-muted hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:bg-elevated/50 transition-colors outline-inverted/25 has-focus-visible:outline-3 not-has-disabled:has-focus-visible:border-inverted has-focus-visible:z-[1] hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:border-accented p-3.5 first-of-type:rounded-t-lg last-of-type:rounded-b-lg has-data-[state=checked]:bg-elevated has-data-[state=checked]:border-inverted/50 has-data-[state=checked]:z-[1]">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-none size-4" id="v-0-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
         </button>
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <!--v-if-->
         <p for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</p>
         <!--v-if-->
       </div>
@@ -913,31 +1014,34 @@ exports[`CheckboxGroup > renders with neutral variant table correctly 1`] = `
 exports[`CheckboxGroup > renders with neutral variant table highlight correctly 1`] = `
 "<div id="v-0-0" data-slot="root" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;">
   <fieldset data-slot="fieldset" class="flex flex-col gap-0 -space-y-px">
-    <!--v-if--><label data-slot="item" class="relative flex items-start flex-row border border-muted p-3.5 first-of-type:rounded-t-lg last-of-type:rounded-b-lg has-data-[state=checked]:bg-elevated has-data-[state=checked]:border-inverted/50 has-data-[state=checked]:z-[1]">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset overflow-hidden focus-visible:outline-3 outline-inverted/25 focus-visible:ring-inverted size-4 ring-inverted" id="v-0-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-inverted"><span class="iconify i-lucide:check shrink-0 size-full" aria-hidden="true" data-slot="icon"></span></span></button>
+    <!--v-if--><label data-slot="item" class="relative flex items-start flex-row border border-muted hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:bg-elevated/50 transition-colors outline-inverted/25 has-focus-visible:outline-3 not-has-disabled:has-focus-visible:border-inverted has-focus-visible:z-[1] p-3.5 first-of-type:rounded-t-lg last-of-type:rounded-b-lg has-data-[state=checked]:bg-elevated has-data-[state=checked]:border-inverted/50 has-data-[state=checked]:z-[1]">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset overflow-hidden focus-visible:outline-none size-4 ring-inverted" id="v-0-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-inverted"><span class="iconify i-lucide:check shrink-0 size-3.5" aria-hidden="true" data-slot="icon"></span></span></button>
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <!--v-if-->
         <p for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</p>
         <!--v-if-->
       </div>
-    </label><label data-slot="item" class="relative flex items-start flex-row border border-muted p-3.5 first-of-type:rounded-t-lg last-of-type:rounded-b-lg has-data-[state=checked]:bg-elevated has-data-[state=checked]:border-inverted/50 has-data-[state=checked]:z-[1]">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset overflow-hidden focus-visible:outline-3 outline-inverted/25 focus-visible:ring-inverted size-4 ring-inverted" id="v-0-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+    </label><label data-slot="item" class="relative flex items-start flex-row border border-muted hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:bg-elevated/50 transition-colors outline-inverted/25 has-focus-visible:outline-3 not-has-disabled:has-focus-visible:border-inverted has-focus-visible:z-[1] p-3.5 first-of-type:rounded-t-lg last-of-type:rounded-b-lg has-data-[state=checked]:bg-elevated has-data-[state=checked]:border-inverted/50 has-data-[state=checked]:z-[1]">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset overflow-hidden focus-visible:outline-none size-4 ring-inverted" id="v-0-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
         </button>
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <!--v-if-->
         <p for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</p>
         <!--v-if-->
       </div>
-    </label><label data-slot="item" class="relative flex items-start flex-row border border-muted p-3.5 first-of-type:rounded-t-lg last-of-type:rounded-b-lg has-data-[state=checked]:bg-elevated has-data-[state=checked]:border-inverted/50 has-data-[state=checked]:z-[1]">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset overflow-hidden focus-visible:outline-3 outline-inverted/25 focus-visible:ring-inverted size-4 ring-inverted" id="v-0-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+    </label><label data-slot="item" class="relative flex items-start flex-row border border-muted hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:bg-elevated/50 transition-colors outline-inverted/25 has-focus-visible:outline-3 not-has-disabled:has-focus-visible:border-inverted has-focus-visible:z-[1] p-3.5 first-of-type:rounded-t-lg last-of-type:rounded-b-lg has-data-[state=checked]:bg-elevated has-data-[state=checked]:border-inverted/50 has-data-[state=checked]:z-[1]">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset overflow-hidden focus-visible:outline-none size-4 ring-inverted" id="v-0-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
         </button>
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <!--v-if-->
         <p for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</p>
         <!--v-if-->
       </div>
@@ -950,31 +1054,34 @@ exports[`CheckboxGroup > renders with neutral variant table highlight correctly
 exports[`CheckboxGroup > renders with primary variant card correctly 1`] = `
 "<div id="v-0-0" data-slot="root" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;">
   <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
-    <!--v-if--><label data-slot="item" class="relative flex items-start border border-muted rounded-lg flex-row p-3.5 has-data-[state=checked]:border-primary">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><span class="iconify i-lucide:check shrink-0 size-full" aria-hidden="true" data-slot="icon"></span></span></button>
+    <!--v-if--><label data-slot="item" class="relative flex items-start border border-muted rounded-lg hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:bg-elevated/50 transition-colors flex-row hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:border-accented p-3.5 outline-primary/25 has-focus-visible:outline-3 not-has-disabled:has-focus-visible:border-primary has-focus-visible:z-[1] has-data-[state=checked]:border-primary/50 has-data-[state=checked]:bg-primary/10">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-none size-4" id="v-0-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><span class="iconify i-lucide:check shrink-0 size-3.5" aria-hidden="true" data-slot="icon"></span></span></button>
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <!--v-if-->
         <p for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</p>
         <!--v-if-->
       </div>
-    </label><label data-slot="item" class="relative flex items-start border border-muted rounded-lg flex-row p-3.5 has-data-[state=checked]:border-primary">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+    </label><label data-slot="item" class="relative flex items-start border border-muted rounded-lg hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:bg-elevated/50 transition-colors flex-row hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:border-accented p-3.5 outline-primary/25 has-focus-visible:outline-3 not-has-disabled:has-focus-visible:border-primary has-focus-visible:z-[1] has-data-[state=checked]:border-primary/50 has-data-[state=checked]:bg-primary/10">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-none size-4" id="v-0-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
         </button>
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <!--v-if-->
         <p for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</p>
         <!--v-if-->
       </div>
-    </label><label data-slot="item" class="relative flex items-start border border-muted rounded-lg flex-row p-3.5 has-data-[state=checked]:border-primary">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+    </label><label data-slot="item" class="relative flex items-start border border-muted rounded-lg hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:bg-elevated/50 transition-colors flex-row hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:border-accented p-3.5 outline-primary/25 has-focus-visible:outline-3 not-has-disabled:has-focus-visible:border-primary has-focus-visible:z-[1] has-data-[state=checked]:border-primary/50 has-data-[state=checked]:bg-primary/10">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-none size-4" id="v-0-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
         </button>
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <!--v-if-->
         <p for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</p>
         <!--v-if-->
       </div>
@@ -987,31 +1094,34 @@ exports[`CheckboxGroup > renders with primary variant card correctly 1`] = `
 exports[`CheckboxGroup > renders with primary variant card highlight correctly 1`] = `
 "<div id="v-0-0" data-slot="root" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;">
   <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
-    <!--v-if--><label data-slot="item" class="relative flex items-start border border-muted rounded-lg flex-row p-3.5 has-data-[state=checked]:border-primary">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4 ring-primary" id="v-0-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><span class="iconify i-lucide:check shrink-0 size-full" aria-hidden="true" data-slot="icon"></span></span></button>
+    <!--v-if--><label data-slot="item" class="relative flex items-start border border-muted rounded-lg hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:bg-elevated/50 transition-colors flex-row p-3.5 outline-primary/25 has-focus-visible:outline-3 not-has-disabled:has-focus-visible:border-primary has-focus-visible:z-[1] has-data-[state=checked]:border-primary/50 has-data-[state=checked]:bg-primary/10">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset overflow-hidden focus-visible:outline-none size-4 ring-primary" id="v-0-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><span class="iconify i-lucide:check shrink-0 size-3.5" aria-hidden="true" data-slot="icon"></span></span></button>
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <!--v-if-->
         <p for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</p>
         <!--v-if-->
       </div>
-    </label><label data-slot="item" class="relative flex items-start border border-muted rounded-lg flex-row p-3.5 has-data-[state=checked]:border-primary">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4 ring-primary" id="v-0-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+    </label><label data-slot="item" class="relative flex items-start border border-muted rounded-lg hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:bg-elevated/50 transition-colors flex-row p-3.5 outline-primary/25 has-focus-visible:outline-3 not-has-disabled:has-focus-visible:border-primary has-focus-visible:z-[1] has-data-[state=checked]:border-primary/50 has-data-[state=checked]:bg-primary/10">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset overflow-hidden focus-visible:outline-none size-4 ring-primary" id="v-0-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
         </button>
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <!--v-if-->
         <p for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</p>
         <!--v-if-->
       </div>
-    </label><label data-slot="item" class="relative flex items-start border border-muted rounded-lg flex-row p-3.5 has-data-[state=checked]:border-primary">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4 ring-primary" id="v-0-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+    </label><label data-slot="item" class="relative flex items-start border border-muted rounded-lg hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:bg-elevated/50 transition-colors flex-row p-3.5 outline-primary/25 has-focus-visible:outline-3 not-has-disabled:has-focus-visible:border-primary has-focus-visible:z-[1] has-data-[state=checked]:border-primary/50 has-data-[state=checked]:bg-primary/10">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset overflow-hidden focus-visible:outline-none size-4 ring-primary" id="v-0-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
         </button>
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <!--v-if-->
         <p for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</p>
         <!--v-if-->
       </div>
@@ -1026,30 +1136,33 @@ exports[`CheckboxGroup > renders with primary variant list correctly 1`] = `
   <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
     <!--v-if-->
     <div data-slot="item" class="relative flex items-start flex-row">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><span class="iconify i-lucide:check shrink-0 size-full" aria-hidden="true" data-slot="icon"></span></span></button>
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><span class="iconify i-lucide:check shrink-0 size-3.5" aria-hidden="true" data-slot="icon"></span></span></button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <!--v-if--><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
     </div>
     <div data-slot="item" class="relative flex items-start flex-row">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <!--v-if--><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
     </div>
     <div data-slot="item" class="relative flex items-start flex-row">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <!--v-if--><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
     </div>
@@ -1063,30 +1176,33 @@ exports[`CheckboxGroup > renders with primary variant list highlight correctly 1
   <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
     <!--v-if-->
     <div data-slot="item" class="relative flex items-start flex-row">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4 ring-primary" id="v-0-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><span class="iconify i-lucide:check shrink-0 size-full" aria-hidden="true" data-slot="icon"></span></span></button>
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary ring-primary" id="v-0-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><span class="iconify i-lucide:check shrink-0 size-3.5" aria-hidden="true" data-slot="icon"></span></span></button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <!--v-if--><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
     </div>
     <div data-slot="item" class="relative flex items-start flex-row">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4 ring-primary" id="v-0-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary ring-primary" id="v-0-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <!--v-if--><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
     </div>
     <div data-slot="item" class="relative flex items-start flex-row">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4 ring-primary" id="v-0-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary ring-primary" id="v-0-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <!--v-if--><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
     </div>
@@ -1098,31 +1214,34 @@ exports[`CheckboxGroup > renders with primary variant list highlight correctly 1
 exports[`CheckboxGroup > renders with primary variant table correctly 1`] = `
 "<div id="v-0-0" data-slot="root" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;">
   <fieldset data-slot="fieldset" class="flex flex-col gap-0 -space-y-px">
-    <!--v-if--><label data-slot="item" class="relative flex items-start flex-row border border-muted p-3.5 first-of-type:rounded-t-lg last-of-type:rounded-b-lg has-data-[state=checked]:bg-primary/10 has-data-[state=checked]:border-primary/50 has-data-[state=checked]:z-[1]">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><span class="iconify i-lucide:check shrink-0 size-full" aria-hidden="true" data-slot="icon"></span></span></button>
+    <!--v-if--><label data-slot="item" class="relative flex items-start flex-row border border-muted hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:bg-elevated/50 transition-colors outline-primary/25 has-focus-visible:outline-3 not-has-disabled:has-focus-visible:border-primary has-focus-visible:z-[1] hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:border-accented p-3.5 first-of-type:rounded-t-lg last-of-type:rounded-b-lg has-data-[state=checked]:bg-primary/10 has-data-[state=checked]:border-primary/50 has-data-[state=checked]:z-[1]">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-none size-4" id="v-0-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><span class="iconify i-lucide:check shrink-0 size-3.5" aria-hidden="true" data-slot="icon"></span></span></button>
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <!--v-if-->
         <p for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</p>
         <!--v-if-->
       </div>
-    </label><label data-slot="item" class="relative flex items-start flex-row border border-muted p-3.5 first-of-type:rounded-t-lg last-of-type:rounded-b-lg has-data-[state=checked]:bg-primary/10 has-data-[state=checked]:border-primary/50 has-data-[state=checked]:z-[1]">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+    </label><label data-slot="item" class="relative flex items-start flex-row border border-muted hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:bg-elevated/50 transition-colors outline-primary/25 has-focus-visible:outline-3 not-has-disabled:has-focus-visible:border-primary has-focus-visible:z-[1] hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:border-accented p-3.5 first-of-type:rounded-t-lg last-of-type:rounded-b-lg has-data-[state=checked]:bg-primary/10 has-data-[state=checked]:border-primary/50 has-data-[state=checked]:z-[1]">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-none size-4" id="v-0-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
         </button>
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <!--v-if-->
         <p for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</p>
         <!--v-if-->
       </div>
-    </label><label data-slot="item" class="relative flex items-start flex-row border border-muted p-3.5 first-of-type:rounded-t-lg last-of-type:rounded-b-lg has-data-[state=checked]:bg-primary/10 has-data-[state=checked]:border-primary/50 has-data-[state=checked]:z-[1]">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+    </label><label data-slot="item" class="relative flex items-start flex-row border border-muted hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:bg-elevated/50 transition-colors outline-primary/25 has-focus-visible:outline-3 not-has-disabled:has-focus-visible:border-primary has-focus-visible:z-[1] hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:border-accented p-3.5 first-of-type:rounded-t-lg last-of-type:rounded-b-lg has-data-[state=checked]:bg-primary/10 has-data-[state=checked]:border-primary/50 has-data-[state=checked]:z-[1]">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-none size-4" id="v-0-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
         </button>
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <!--v-if-->
         <p for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</p>
         <!--v-if-->
       </div>
@@ -1135,31 +1254,34 @@ exports[`CheckboxGroup > renders with primary variant table correctly 1`] = `
 exports[`CheckboxGroup > renders with primary variant table highlight correctly 1`] = `
 "<div id="v-0-0" data-slot="root" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;">
   <fieldset data-slot="fieldset" class="flex flex-col gap-0 -space-y-px">
-    <!--v-if--><label data-slot="item" class="relative flex items-start flex-row border border-muted p-3.5 first-of-type:rounded-t-lg last-of-type:rounded-b-lg has-data-[state=checked]:bg-primary/10 has-data-[state=checked]:border-primary/50 has-data-[state=checked]:z-[1]">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4 ring-primary" id="v-0-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><span class="iconify i-lucide:check shrink-0 size-full" aria-hidden="true" data-slot="icon"></span></span></button>
+    <!--v-if--><label data-slot="item" class="relative flex items-start flex-row border border-muted hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:bg-elevated/50 transition-colors outline-primary/25 has-focus-visible:outline-3 not-has-disabled:has-focus-visible:border-primary has-focus-visible:z-[1] p-3.5 first-of-type:rounded-t-lg last-of-type:rounded-b-lg has-data-[state=checked]:bg-primary/10 has-data-[state=checked]:border-primary/50 has-data-[state=checked]:z-[1]">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset overflow-hidden focus-visible:outline-none size-4 ring-primary" id="v-0-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><span class="iconify i-lucide:check shrink-0 size-3.5" aria-hidden="true" data-slot="icon"></span></span></button>
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <!--v-if-->
         <p for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</p>
         <!--v-if-->
       </div>
-    </label><label data-slot="item" class="relative flex items-start flex-row border border-muted p-3.5 first-of-type:rounded-t-lg last-of-type:rounded-b-lg has-data-[state=checked]:bg-primary/10 has-data-[state=checked]:border-primary/50 has-data-[state=checked]:z-[1]">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4 ring-primary" id="v-0-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+    </label><label data-slot="item" class="relative flex items-start flex-row border border-muted hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:bg-elevated/50 transition-colors outline-primary/25 has-focus-visible:outline-3 not-has-disabled:has-focus-visible:border-primary has-focus-visible:z-[1] p-3.5 first-of-type:rounded-t-lg last-of-type:rounded-b-lg has-data-[state=checked]:bg-primary/10 has-data-[state=checked]:border-primary/50 has-data-[state=checked]:z-[1]">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset overflow-hidden focus-visible:outline-none size-4 ring-primary" id="v-0-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
         </button>
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <!--v-if-->
         <p for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</p>
         <!--v-if-->
       </div>
-    </label><label data-slot="item" class="relative flex items-start flex-row border border-muted p-3.5 first-of-type:rounded-t-lg last-of-type:rounded-b-lg has-data-[state=checked]:bg-primary/10 has-data-[state=checked]:border-primary/50 has-data-[state=checked]:z-[1]">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4 ring-primary" id="v-0-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+    </label><label data-slot="item" class="relative flex items-start flex-row border border-muted hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:bg-elevated/50 transition-colors outline-primary/25 has-focus-visible:outline-3 not-has-disabled:has-focus-visible:border-primary has-focus-visible:z-[1] p-3.5 first-of-type:rounded-t-lg last-of-type:rounded-b-lg has-data-[state=checked]:bg-primary/10 has-data-[state=checked]:border-primary/50 has-data-[state=checked]:z-[1]">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset overflow-hidden focus-visible:outline-none size-4 ring-primary" id="v-0-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
         </button>
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <!--v-if-->
         <p for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</p>
         <!--v-if-->
       </div>
@@ -1174,32 +1296,35 @@ exports[`CheckboxGroup > renders with required correctly 1`] = `
   <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
     <legend data-slot="legend" class="mb-1 block font-medium text-default text-sm after:content-['*'] after:ms-0.5 after:text-error">Legend</legend>
     <div data-slot="item" class="relative flex items-start flex-row">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0-0:1" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0-0:1" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <!--v-if--><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
     </div>
     <div data-slot="item" class="relative flex items-start flex-row">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <!--v-if--><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
     </div>
     <div data-slot="item" class="relative flex items-start flex-row">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <!--v-if--><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
     </div>
@@ -1213,30 +1338,33 @@ exports[`CheckboxGroup > renders with size lg correctly 1`] = `
   <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
     <!--v-if-->
     <div data-slot="item" class="relative flex items-start flex-row">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4.5" id="v-0-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><span class="iconify i-lucide:check shrink-0 size-full" aria-hidden="true" data-slot="icon"></span></span></button>
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4.5 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><span class="iconify i-lucide:check shrink-0 size-4" aria-hidden="true" data-slot="icon"></span></span></button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <!--v-if--><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
     </div>
     <div data-slot="item" class="relative flex items-start flex-row">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4.5" id="v-0-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4.5 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <!--v-if--><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
     </div>
     <div data-slot="item" class="relative flex items-start flex-row">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4.5" id="v-0-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4.5 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <!--v-if--><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
     </div>
@@ -1250,30 +1378,33 @@ exports[`CheckboxGroup > renders with size md correctly 1`] = `
   <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
     <!--v-if-->
     <div data-slot="item" class="relative flex items-start flex-row">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><span class="iconify i-lucide:check shrink-0 size-full" aria-hidden="true" data-slot="icon"></span></span></button>
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><span class="iconify i-lucide:check shrink-0 size-3.5" aria-hidden="true" data-slot="icon"></span></span></button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <!--v-if--><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
     </div>
     <div data-slot="item" class="relative flex items-start flex-row">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <!--v-if--><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
     </div>
     <div data-slot="item" class="relative flex items-start flex-row">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <!--v-if--><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
     </div>
@@ -1287,30 +1418,33 @@ exports[`CheckboxGroup > renders with size sm correctly 1`] = `
   <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-0.5">
     <!--v-if-->
     <div data-slot="item" class="relative flex items-start flex-row">
-      <div data-slot="container" class="flex items-center h-4"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-3.5" id="v-0-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><span class="iconify i-lucide:check shrink-0 size-full" aria-hidden="true" data-slot="icon"></span></span></button>
+      <div data-slot="container" class="flex items-center h-4"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-3.5 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><span class="iconify i-lucide:check shrink-0 size-3" aria-hidden="true" data-slot="icon"></span></span></button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-xs"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-xs">
+        <!--v-if--><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
     </div>
     <div data-slot="item" class="relative flex items-start flex-row">
-      <div data-slot="container" class="flex items-center h-4"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-3.5" id="v-0-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+      <div data-slot="container" class="flex items-center h-4"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-3.5 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-xs"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-xs">
+        <!--v-if--><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
     </div>
     <div data-slot="item" class="relative flex items-start flex-row">
-      <div data-slot="container" class="flex items-center h-4"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-3.5" id="v-0-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+      <div data-slot="container" class="flex items-center h-4"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-3.5 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-xs"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-xs">
+        <!--v-if--><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
     </div>
@@ -1324,30 +1458,33 @@ exports[`CheckboxGroup > renders with size xl correctly 1`] = `
   <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1.5">
     <!--v-if-->
     <div data-slot="item" class="relative flex items-start flex-row">
-      <div data-slot="container" class="flex items-center h-6"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-5" id="v-0-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><span class="iconify i-lucide:check shrink-0 size-full" aria-hidden="true" data-slot="icon"></span></span></button>
+      <div data-slot="container" class="flex items-center h-6"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-5 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><span class="iconify i-lucide:check shrink-0 size-4.5" aria-hidden="true" data-slot="icon"></span></span></button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-base"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-base">
+        <!--v-if--><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
     </div>
     <div data-slot="item" class="relative flex items-start flex-row">
-      <div data-slot="container" class="flex items-center h-6"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-5" id="v-0-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+      <div data-slot="container" class="flex items-center h-6"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-5 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-base"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-base">
+        <!--v-if--><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
     </div>
     <div data-slot="item" class="relative flex items-start flex-row">
-      <div data-slot="container" class="flex items-center h-6"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-5" id="v-0-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+      <div data-slot="container" class="flex items-center h-6"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-5 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-base"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-base">
+        <!--v-if--><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
     </div>
@@ -1361,30 +1498,33 @@ exports[`CheckboxGroup > renders with size xs correctly 1`] = `
   <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-0.5">
     <!--v-if-->
     <div data-slot="item" class="relative flex items-start flex-row">
-      <div data-slot="container" class="flex items-center h-4"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-3" id="v-0-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><span class="iconify i-lucide:check shrink-0 size-full" aria-hidden="true" data-slot="icon"></span></span></button>
+      <div data-slot="container" class="flex items-center h-4"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-3 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><span class="iconify i-lucide:check shrink-0 size-2.5" aria-hidden="true" data-slot="icon"></span></span></button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-xs"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-xs">
+        <!--v-if--><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
     </div>
     <div data-slot="item" class="relative flex items-start flex-row">
-      <div data-slot="container" class="flex items-center h-4"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-3" id="v-0-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+      <div data-slot="container" class="flex items-center h-4"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-3 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-xs"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-xs">
+        <!--v-if--><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
     </div>
     <div data-slot="item" class="relative flex items-start flex-row">
-      <div data-slot="container" class="flex items-center h-4"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-3" id="v-0-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+      <div data-slot="container" class="flex items-center h-4"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-3 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-xs"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-xs">
+        <!--v-if--><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
     </div>
@@ -1398,32 +1538,35 @@ exports[`CheckboxGroup > renders with ui correctly 1`] = `
   <fieldset data-slot="fieldset" class="flex flex-col gap-y-1 gap-x-4">
     <!--v-if-->
     <div data-slot="item" class="relative flex items-start flex-row">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0-0:1" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0-0:1" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:1" data-slot="label" class="block font-medium text-red">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <!--v-if--><label for="v-0-0:1" data-slot="label" class="block font-medium text-red">Option 1</label>
         <!--v-if-->
       </div>
     </div>
     <div data-slot="item" class="relative flex items-start flex-row">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:2" data-slot="label" class="block font-medium text-red">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <!--v-if--><label for="v-0-0:2" data-slot="label" class="block font-medium text-red">Option 2</label>
         <!--v-if-->
       </div>
     </div>
     <div data-slot="item" class="relative flex items-start flex-row">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:3" data-slot="label" class="block font-medium text-red">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <!--v-if--><label for="v-0-0:3" data-slot="label" class="block font-medium text-red">Option 3</label>
         <!--v-if-->
       </div>
     </div>
@@ -1437,30 +1580,33 @@ exports[`CheckboxGroup > renders with valueKey correctly 1`] = `
   <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
     <!--v-if-->
     <div data-slot="item" class="relative flex items-start flex-row">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0-0:Option 1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><span class="iconify i-lucide:check shrink-0 size-full" aria-hidden="true" data-slot="icon"></span></span></button>
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0-0:Option 1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical"><span data-state="checked" style="pointer-events: none;" data-slot="indicator" class="flex items-center justify-center size-full text-inverted bg-primary"><span class="iconify i-lucide:check shrink-0 size-3.5" aria-hidden="true" data-slot="icon"></span></span></button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:Option 1" data-slot="label" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <!--v-if--><label for="v-0-0:Option 1" data-slot="label" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
     </div>
     <div data-slot="item" class="relative flex items-start flex-row">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0-0:Option 2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0-0:Option 2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:Option 2" data-slot="label" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <!--v-if--><label for="v-0-0:Option 2" data-slot="label" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
     </div>
     <div data-slot="item" class="relative flex items-start flex-row">
-      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0-0:Option 3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
+      <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0-0:Option 3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:Option 3" data-slot="label" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2 text-sm">
+        <!--v-if--><label for="v-0-0:Option 3" data-slot="label" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
     </div>
diff --git a/test/components/__snapshots__/RadioGroup-vue.spec.ts.snap b/test/components/__snapshots__/RadioGroup-vue.spec.ts.snap
index 266edf59b7..34996c2728 100644
--- a/test/components/__snapshots__/RadioGroup-vue.spec.ts.snap
+++ b/test/components/__snapshots__/RadioGroup-vue.spec.ts.snap
@@ -5,32 +5,35 @@ exports[`RadioGroup > renders with ariaLabel correctly 1`] = `
   <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
     <!--v-if-->
     <div data-slot="item" class="flex items-start flex-row text-sm">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" value="1" aria-label="1">
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" value="1" aria-label="1">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if--><label for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
     </div>
     <div data-slot="item" class="flex items-start flex-row text-sm">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" value="2" aria-label="2">
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" value="2" aria-label="2">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if--><label for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
     </div>
     <div data-slot="item" class="flex items-start flex-row text-sm">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" value="3" aria-label="3">
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" value="3" aria-label="3">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if--><label for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
     </div>
@@ -44,32 +47,35 @@ exports[`RadioGroup > renders with as correctly 1`] = `
   <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
     <!--v-if-->
     <div data-slot="item" class="flex items-start flex-row text-sm">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" value="1" aria-label="1">
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" value="1" aria-label="1">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if--><label for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
     </div>
     <div data-slot="item" class="flex items-start flex-row text-sm">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" value="2" aria-label="2">
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" value="2" aria-label="2">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if--><label for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
     </div>
     <div data-slot="item" class="flex items-start flex-row text-sm">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" value="3" aria-label="3">
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" value="3" aria-label="3">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if--><label for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
     </div>
@@ -83,32 +89,35 @@ exports[`RadioGroup > renders with class correctly 1`] = `
   <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
     <!--v-if-->
     <div data-slot="item" class="flex items-start flex-row text-sm">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" value="1" aria-label="1">
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" value="1" aria-label="1">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if--><label for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
     </div>
     <div data-slot="item" class="flex items-start flex-row text-sm">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" value="2" aria-label="2">
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" value="2" aria-label="2">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if--><label for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
     </div>
     <div data-slot="item" class="flex items-start flex-row text-sm">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" value="3" aria-label="3">
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" value="3" aria-label="3">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if--><label for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
     </div>
@@ -122,30 +131,33 @@ exports[`RadioGroup > renders with defaultValue correctly 1`] = `
   <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
     <!--v-if-->
     <div data-slot="item" class="flex items-start flex-row text-sm">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-active="" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" value="1" aria-label="1"><span data-state="checked" data-slot="indicator" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-primary after:size-1.5"></span></button>
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-active="" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" value="1" aria-label="1"><span data-state="checked" data-slot="indicator" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-primary after:size-1.5"></span></button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if--><label for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
     </div>
     <div data-slot="item" class="flex items-start flex-row text-sm">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" value="2" aria-label="2">
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" value="2" aria-label="2">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if--><label for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
     </div>
     <div data-slot="item" class="flex items-start flex-row text-sm">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" value="3" aria-label="3">
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" value="3" aria-label="3">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if--><label for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
     </div>
@@ -159,32 +171,35 @@ exports[`RadioGroup > renders with description correctly 1`] = `
   <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
     <!--v-if-->
     <div data-slot="item" class="flex items-start flex-row text-sm">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" value="1" aria-label="1">
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" value="1" aria-label="1">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if--><label for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
         <p data-slot="description" class="text-muted">Description 0</p>
       </div>
     </div>
     <div data-slot="item" class="flex items-start flex-row text-sm">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" value="2" aria-label="2">
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" value="2" aria-label="2">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if--><label for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
         <p data-slot="description" class="text-muted">Description 1</p>
       </div>
     </div>
     <div data-slot="item" class="flex items-start flex-row text-sm">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" value="3" aria-label="3">
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" value="3" aria-label="3">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if--><label for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
         <p data-slot="description" class="text-muted">Description 2</p>
       </div>
     </div>
@@ -198,32 +213,35 @@ exports[`RadioGroup > renders with description slot correctly 1`] = `
   <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
     <!--v-if-->
     <div data-slot="item" class="flex items-start flex-row text-sm">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" value="1" aria-label="1">
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" value="1" aria-label="1">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:1" data-slot="label" class="block font-medium text-default">Description slot</label>
+      <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if--><label for="v-0:1" data-slot="label" class="block font-medium text-default">Description slot</label>
         <!--v-if-->
       </div>
     </div>
     <div data-slot="item" class="flex items-start flex-row text-sm">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" value="2" aria-label="2">
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" value="2" aria-label="2">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:2" data-slot="label" class="block font-medium text-default">Description slot</label>
+      <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if--><label for="v-0:2" data-slot="label" class="block font-medium text-default">Description slot</label>
         <!--v-if-->
       </div>
     </div>
     <div data-slot="item" class="flex items-start flex-row text-sm">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" value="3" aria-label="3">
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" value="3" aria-label="3">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:3" data-slot="label" class="block font-medium text-default">Description slot</label>
+      <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if--><label for="v-0:3" data-slot="label" class="block font-medium text-default">Description slot</label>
         <!--v-if-->
       </div>
     </div>
@@ -237,32 +255,35 @@ exports[`RadioGroup > renders with descriptionKey correctly 1`] = `
   <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
     <!--v-if-->
     <div data-slot="item" class="flex items-start flex-row text-sm">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" value="1" aria-label="1">
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" value="1" aria-label="1">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if--><label for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
         <p data-slot="description" class="text-muted">1</p>
       </div>
     </div>
     <div data-slot="item" class="flex items-start flex-row text-sm">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" value="2" aria-label="2">
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" value="2" aria-label="2">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if--><label for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
         <p data-slot="description" class="text-muted">2</p>
       </div>
     </div>
     <div data-slot="item" class="flex items-start flex-row text-sm">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" value="3" aria-label="3">
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" value="3" aria-label="3">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if--><label for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
         <p data-slot="description" class="text-muted">3</p>
       </div>
     </div>
@@ -276,32 +297,35 @@ exports[`RadioGroup > renders with disabled correctly 1`] = `
   <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
     <!--v-if-->
     <div data-slot="item" class="flex items-start flex-row text-sm opacity-75">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0:1" role="radio" type="button" aria-checked="false" disabled="" data-state="unchecked" data-disabled="" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4 cursor-not-allowed" value="1" aria-label="1">
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0:1" role="radio" type="button" aria-checked="false" disabled="" data-state="unchecked" data-disabled="" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden size-4 cursor-not-allowed outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" value="1" aria-label="1">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:1" data-slot="label" class="block font-medium text-default cursor-not-allowed">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if--><label for="v-0:1" data-slot="label" class="block font-medium text-default cursor-not-allowed">Option 1</label>
         <!--v-if-->
       </div>
     </div>
     <div data-slot="item" class="flex items-start flex-row text-sm opacity-75">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0:2" role="radio" type="button" aria-checked="false" disabled="" data-state="unchecked" data-disabled="" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4 cursor-not-allowed" value="2" aria-label="2">
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0:2" role="radio" type="button" aria-checked="false" disabled="" data-state="unchecked" data-disabled="" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden size-4 cursor-not-allowed outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" value="2" aria-label="2">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:2" data-slot="label" class="block font-medium text-default cursor-not-allowed">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if--><label for="v-0:2" data-slot="label" class="block font-medium text-default cursor-not-allowed">Option 2</label>
         <!--v-if-->
       </div>
     </div>
     <div data-slot="item" class="flex items-start flex-row text-sm opacity-75">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0:3" role="radio" type="button" aria-checked="false" disabled="" data-state="unchecked" data-disabled="" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4 cursor-not-allowed" value="3" aria-label="3">
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0:3" role="radio" type="button" aria-checked="false" disabled="" data-state="unchecked" data-disabled="" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden size-4 cursor-not-allowed outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" value="3" aria-label="3">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:3" data-slot="label" class="block font-medium text-default cursor-not-allowed">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if--><label for="v-0:3" data-slot="label" class="block font-medium text-default cursor-not-allowed">Option 3</label>
         <!--v-if-->
       </div>
     </div>
@@ -313,31 +337,34 @@ exports[`RadioGroup > renders with disabled correctly 1`] = `
 exports[`RadioGroup > renders with horizontal variant card correctly 1`] = `
 "<div id="v-0" data-slot="root" class="relative" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="radiogroup" aria-orientation="horizontal" aria-required="false">
   <fieldset data-slot="fieldset" class="flex gap-x-2 flex-row gap-y-1">
-    <!--v-if--><label data-slot="item" class="flex items-start border border-muted rounded-lg flex-row text-sm p-3.5 has-data-[state=checked]:border-primary">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" value="1" aria-label="1"><span data-state="checked" data-slot="indicator" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-primary after:size-1.5"></span></button>
+    <!--v-if--><label data-slot="item" class="flex items-start border border-muted rounded-lg hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:bg-elevated/50 transition-colors flex-row text-sm hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:border-accented p-3.5 outline-primary/25 has-focus-visible:outline-3 not-has-disabled:has-focus-visible:border-primary has-focus-visible:z-[1] has-data-[state=checked]:border-primary/50 has-data-[state=checked]:bg-primary/10">
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-none size-4" value="1" aria-label="1"><span data-state="checked" data-slot="indicator" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-primary after:size-1.5"></span></button>
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if-->
         <p for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</p>
         <!--v-if-->
       </div>
-    </label><label data-slot="item" class="flex items-start border border-muted rounded-lg flex-row text-sm p-3.5 has-data-[state=checked]:border-primary">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" value="2" aria-label="2">
+    </label><label data-slot="item" class="flex items-start border border-muted rounded-lg hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:bg-elevated/50 transition-colors flex-row text-sm hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:border-accented p-3.5 outline-primary/25 has-focus-visible:outline-3 not-has-disabled:has-focus-visible:border-primary has-focus-visible:z-[1] has-data-[state=checked]:border-primary/50 has-data-[state=checked]:bg-primary/10">
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-none size-4" value="2" aria-label="2">
           <!---->
         </button>
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if-->
         <p for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</p>
         <!--v-if-->
       </div>
-    </label><label data-slot="item" class="flex items-start border border-muted rounded-lg flex-row text-sm p-3.5 has-data-[state=checked]:border-primary">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" value="3" aria-label="3">
+    </label><label data-slot="item" class="flex items-start border border-muted rounded-lg hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:bg-elevated/50 transition-colors flex-row text-sm hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:border-accented p-3.5 outline-primary/25 has-focus-visible:outline-3 not-has-disabled:has-focus-visible:border-primary has-focus-visible:z-[1] has-data-[state=checked]:border-primary/50 has-data-[state=checked]:bg-primary/10">
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-none size-4" value="3" aria-label="3">
           <!---->
         </button>
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if-->
         <p for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</p>
         <!--v-if-->
       </div>
@@ -352,30 +379,33 @@ exports[`RadioGroup > renders with horizontal variant list correctly 1`] = `
   <fieldset data-slot="fieldset" class="flex gap-x-2 flex-row gap-y-1">
     <!--v-if-->
     <div data-slot="item" class="flex items-start flex-row text-sm">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" value="1" aria-label="1"><span data-state="checked" data-slot="indicator" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-primary after:size-1.5"></span></button>
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" value="1" aria-label="1"><span data-state="checked" data-slot="indicator" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-primary after:size-1.5"></span></button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if--><label for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
     </div>
     <div data-slot="item" class="flex items-start flex-row text-sm">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" value="2" aria-label="2">
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" value="2" aria-label="2">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if--><label for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
     </div>
     <div data-slot="item" class="flex items-start flex-row text-sm">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" value="3" aria-label="3">
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" value="3" aria-label="3">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if--><label for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
     </div>
@@ -387,31 +417,34 @@ exports[`RadioGroup > renders with horizontal variant list correctly 1`] = `
 exports[`RadioGroup > renders with horizontal variant table correctly 1`] = `
 "<div id="v-0" data-slot="root" class="relative" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="radiogroup" aria-orientation="horizontal" aria-required="false">
   <fieldset data-slot="fieldset" class="flex flex-row gap-0 -space-x-px">
-    <!--v-if--><label data-slot="item" class="flex items-start border border-muted flex-row text-sm p-3.5 first-of-type:rounded-s-lg last-of-type:rounded-e-lg has-data-[state=checked]:bg-primary/10 has-data-[state=checked]:border-primary/50 has-data-[state=checked]:z-[1]">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" value="1" aria-label="1"><span data-state="checked" data-slot="indicator" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-primary after:size-1.5"></span></button>
+    <!--v-if--><label data-slot="item" class="flex items-start border border-muted hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:bg-elevated/50 transition-colors flex-row text-sm hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:border-accented p-3.5 first-of-type:rounded-s-lg last-of-type:rounded-e-lg outline-primary/25 has-focus-visible:outline-3 not-has-disabled:has-focus-visible:border-primary has-focus-visible:z-[1] has-data-[state=checked]:bg-primary/10 has-data-[state=checked]:border-primary/50 has-data-[state=checked]:z-[1]">
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-none size-4" value="1" aria-label="1"><span data-state="checked" data-slot="indicator" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-primary after:size-1.5"></span></button>
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if-->
         <p for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</p>
         <!--v-if-->
       </div>
-    </label><label data-slot="item" class="flex items-start border border-muted flex-row text-sm p-3.5 first-of-type:rounded-s-lg last-of-type:rounded-e-lg has-data-[state=checked]:bg-primary/10 has-data-[state=checked]:border-primary/50 has-data-[state=checked]:z-[1]">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" value="2" aria-label="2">
+    </label><label data-slot="item" class="flex items-start border border-muted hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:bg-elevated/50 transition-colors flex-row text-sm hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:border-accented p-3.5 first-of-type:rounded-s-lg last-of-type:rounded-e-lg outline-primary/25 has-focus-visible:outline-3 not-has-disabled:has-focus-visible:border-primary has-focus-visible:z-[1] has-data-[state=checked]:bg-primary/10 has-data-[state=checked]:border-primary/50 has-data-[state=checked]:z-[1]">
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-none size-4" value="2" aria-label="2">
           <!---->
         </button>
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if-->
         <p for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</p>
         <!--v-if-->
       </div>
-    </label><label data-slot="item" class="flex items-start border border-muted flex-row text-sm p-3.5 first-of-type:rounded-s-lg last-of-type:rounded-e-lg has-data-[state=checked]:bg-primary/10 has-data-[state=checked]:border-primary/50 has-data-[state=checked]:z-[1]">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" value="3" aria-label="3">
+    </label><label data-slot="item" class="flex items-start border border-muted hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:bg-elevated/50 transition-colors flex-row text-sm hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:border-accented p-3.5 first-of-type:rounded-s-lg last-of-type:rounded-e-lg outline-primary/25 has-focus-visible:outline-3 not-has-disabled:has-focus-visible:border-primary has-focus-visible:z-[1] has-data-[state=checked]:bg-primary/10 has-data-[state=checked]:border-primary/50 has-data-[state=checked]:z-[1]">
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-none size-4" value="3" aria-label="3">
           <!---->
         </button>
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if-->
         <p for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</p>
         <!--v-if-->
       </div>
@@ -421,35 +454,77 @@ exports[`RadioGroup > renders with horizontal variant table correctly 1`] = `
 </div>"
 `;
 
+exports[`RadioGroup > renders with icon correctly 1`] = `
+"<div id="v-0" data-slot="root" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="radiogroup" aria-orientation="vertical" aria-required="false">
+  <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
+    <!--v-if-->
+    <div data-slot="item" class="flex items-start text-sm outline-primary/25 has-focus-visible:outline-3 not-has-disabled:has-focus-visible:border-primary has-focus-visible:z-[1]">
+      <div data-slot="container" class="flex items-center h-auto"><button id="v-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-none sr-only size-4" value="1" aria-label="1">
+          <!---->
+        </button>
+        <!--v-if-->
+      </div>
+      <div data-slot="wrapper" class="w-full flex flex-col items-center gap-1 text-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-4"></svg><label for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
+        <!--v-if-->
+      </div>
+    </div>
+    <div data-slot="item" class="flex items-start text-sm outline-primary/25 has-focus-visible:outline-3 not-has-disabled:has-focus-visible:border-primary has-focus-visible:z-[1]">
+      <div data-slot="container" class="flex items-center h-auto"><button id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-none sr-only size-4" value="2" aria-label="2">
+          <!---->
+        </button>
+        <!--v-if-->
+      </div>
+      <div data-slot="wrapper" class="w-full flex flex-col items-center gap-1 text-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-4"></svg><label for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
+        <!--v-if-->
+      </div>
+    </div>
+    <div data-slot="item" class="flex items-start text-sm outline-primary/25 has-focus-visible:outline-3 not-has-disabled:has-focus-visible:border-primary has-focus-visible:z-[1]">
+      <div data-slot="container" class="flex items-center h-auto"><button id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-none sr-only size-4" value="3" aria-label="3">
+          <!---->
+        </button>
+        <!--v-if-->
+      </div>
+      <div data-slot="wrapper" class="w-full flex flex-col items-center gap-1 text-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="icon" class="shrink-0 size-4"></svg><label for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
+        <!--v-if-->
+      </div>
+    </div>
+  </fieldset>
+  <!--v-if-->
+</div>"
+`;
+
 exports[`RadioGroup > renders with indicator end correctly 1`] = `
 "<div id="v-0" data-slot="root" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="radiogroup" aria-orientation="vertical" aria-required="false">
   <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
     <!--v-if-->
     <div data-slot="item" class="flex items-start flex-row-reverse text-sm">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-active="" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" value="1" aria-label="1"><span data-state="checked" data-slot="indicator" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-primary after:size-1.5"></span></button>
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-active="" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" value="1" aria-label="1"><span data-state="checked" data-slot="indicator" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-primary after:size-1.5"></span></button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full me-2"><label for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full me-2">
+        <!--v-if--><label for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
     </div>
     <div data-slot="item" class="flex items-start flex-row-reverse text-sm">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" value="2" aria-label="2">
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" value="2" aria-label="2">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full me-2"><label for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full me-2">
+        <!--v-if--><label for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
     </div>
     <div data-slot="item" class="flex items-start flex-row-reverse text-sm">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" value="3" aria-label="3">
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" value="3" aria-label="3">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full me-2"><label for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full me-2">
+        <!--v-if--><label for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
     </div>
@@ -462,31 +537,34 @@ exports[`RadioGroup > renders with indicator hidden correctly 1`] = `
 "<div id="v-0" data-slot="root" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="radiogroup" aria-orientation="vertical" aria-required="false">
   <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
     <!--v-if-->
-    <div data-slot="item" class="flex items-start text-sm">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-active="" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary sr-only size-4" value="1" aria-label="1"><span data-state="checked" data-slot="indicator" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-primary after:size-1.5"></span></button>
+    <div data-slot="item" class="flex items-start text-sm outline-primary/25 has-focus-visible:outline-3 not-has-disabled:has-focus-visible:border-primary has-focus-visible:z-[1]">
+      <div data-slot="container" class="flex items-center h-auto"><button id="v-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-active="" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-none sr-only size-4" value="1" aria-label="1"><span data-state="checked" data-slot="indicator" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-primary after:size-1.5"></span></button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full text-center"><label for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full flex flex-col items-center gap-1 text-center">
+        <!--v-if--><label for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
     </div>
-    <div data-slot="item" class="flex items-start text-sm">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary sr-only size-4" value="2" aria-label="2">
+    <div data-slot="item" class="flex items-start text-sm outline-primary/25 has-focus-visible:outline-3 not-has-disabled:has-focus-visible:border-primary has-focus-visible:z-[1]">
+      <div data-slot="container" class="flex items-center h-auto"><button id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-none sr-only size-4" value="2" aria-label="2">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full text-center"><label for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full flex flex-col items-center gap-1 text-center">
+        <!--v-if--><label for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
     </div>
-    <div data-slot="item" class="flex items-start text-sm">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary sr-only size-4" value="3" aria-label="3">
+    <div data-slot="item" class="flex items-start text-sm outline-primary/25 has-focus-visible:outline-3 not-has-disabled:has-focus-visible:border-primary has-focus-visible:z-[1]">
+      <div data-slot="container" class="flex items-center h-auto"><button id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-none sr-only size-4" value="3" aria-label="3">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full text-center"><label for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full flex flex-col items-center gap-1 text-center">
+        <!--v-if--><label for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
     </div>
@@ -500,30 +578,33 @@ exports[`RadioGroup > renders with indicator start correctly 1`] = `
   <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
     <!--v-if-->
     <div data-slot="item" class="flex items-start flex-row text-sm">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-active="" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" value="1" aria-label="1"><span data-state="checked" data-slot="indicator" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-primary after:size-1.5"></span></button>
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-active="" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" value="1" aria-label="1"><span data-state="checked" data-slot="indicator" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-primary after:size-1.5"></span></button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if--><label for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
     </div>
     <div data-slot="item" class="flex items-start flex-row text-sm">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" value="2" aria-label="2">
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" value="2" aria-label="2">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if--><label for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
     </div>
     <div data-slot="item" class="flex items-start flex-row text-sm">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" value="3" aria-label="3">
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" value="3" aria-label="3">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if--><label for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
     </div>
@@ -537,32 +618,35 @@ exports[`RadioGroup > renders with items correctly 1`] = `
   <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
     <!--v-if-->
     <div data-slot="item" class="flex items-start flex-row text-sm">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" value="1" aria-label="1">
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" value="1" aria-label="1">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if--><label for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
     </div>
     <div data-slot="item" class="flex items-start flex-row text-sm">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" value="2" aria-label="2">
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" value="2" aria-label="2">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if--><label for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
     </div>
     <div data-slot="item" class="flex items-start flex-row text-sm">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" value="3" aria-label="3">
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" value="3" aria-label="3">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if--><label for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
     </div>
@@ -576,32 +660,35 @@ exports[`RadioGroup > renders with label slot correctly 1`] = `
   <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
     <!--v-if-->
     <div data-slot="item" class="flex items-start flex-row text-sm">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" value="1" aria-label="1">
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" value="1" aria-label="1">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:1" data-slot="label" class="block font-medium text-default">Label slot</label>
+      <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if--><label for="v-0:1" data-slot="label" class="block font-medium text-default">Label slot</label>
         <!--v-if-->
       </div>
     </div>
     <div data-slot="item" class="flex items-start flex-row text-sm">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" value="2" aria-label="2">
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" value="2" aria-label="2">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:2" data-slot="label" class="block font-medium text-default">Label slot</label>
+      <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if--><label for="v-0:2" data-slot="label" class="block font-medium text-default">Label slot</label>
         <!--v-if-->
       </div>
     </div>
     <div data-slot="item" class="flex items-start flex-row text-sm">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" value="3" aria-label="3">
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" value="3" aria-label="3">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:3" data-slot="label" class="block font-medium text-default">Label slot</label>
+      <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if--><label for="v-0:3" data-slot="label" class="block font-medium text-default">Label slot</label>
         <!--v-if-->
       </div>
     </div>
@@ -615,32 +702,35 @@ exports[`RadioGroup > renders with labelKey correctly 1`] = `
   <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
     <!--v-if-->
     <div data-slot="item" class="flex items-start flex-row text-sm">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" value="1" aria-label="1">
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" value="1" aria-label="1">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:1" data-slot="label" class="block font-medium text-default">1</label>
+      <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if--><label for="v-0:1" data-slot="label" class="block font-medium text-default">1</label>
         <!--v-if-->
       </div>
     </div>
     <div data-slot="item" class="flex items-start flex-row text-sm">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" value="2" aria-label="2">
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" value="2" aria-label="2">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:2" data-slot="label" class="block font-medium text-default">2</label>
+      <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if--><label for="v-0:2" data-slot="label" class="block font-medium text-default">2</label>
         <!--v-if-->
       </div>
     </div>
     <div data-slot="item" class="flex items-start flex-row text-sm">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" value="3" aria-label="3">
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" value="3" aria-label="3">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:3" data-slot="label" class="block font-medium text-default">3</label>
+      <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if--><label for="v-0:3" data-slot="label" class="block font-medium text-default">3</label>
         <!--v-if-->
       </div>
     </div>
@@ -654,32 +744,35 @@ exports[`RadioGroup > renders with legend slot correctly 1`] = `
   <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
     <!--v-if-->
     <div data-slot="item" class="flex items-start flex-row text-sm">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" value="1" aria-label="1">
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" value="1" aria-label="1">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:1" data-slot="label" class="block font-medium text-default">Legend slot</label>
+      <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if--><label for="v-0:1" data-slot="label" class="block font-medium text-default">Legend slot</label>
         <!--v-if-->
       </div>
     </div>
     <div data-slot="item" class="flex items-start flex-row text-sm">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" value="2" aria-label="2">
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" value="2" aria-label="2">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:2" data-slot="label" class="block font-medium text-default">Legend slot</label>
+      <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if--><label for="v-0:2" data-slot="label" class="block font-medium text-default">Legend slot</label>
         <!--v-if-->
       </div>
     </div>
     <div data-slot="item" class="flex items-start flex-row text-sm">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" value="3" aria-label="3">
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" value="3" aria-label="3">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:3" data-slot="label" class="block font-medium text-default">Legend slot</label>
+      <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if--><label for="v-0:3" data-slot="label" class="block font-medium text-default">Legend slot</label>
         <!--v-if-->
       </div>
     </div>
@@ -693,30 +786,33 @@ exports[`RadioGroup > renders with modelValue correctly 1`] = `
   <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
     <!--v-if-->
     <div data-slot="item" class="flex items-start flex-row text-sm">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-active="" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" value="1" aria-label="1"><span data-state="checked" data-slot="indicator" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-primary after:size-1.5"></span></button>
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-active="" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" value="1" aria-label="1"><span data-state="checked" data-slot="indicator" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-primary after:size-1.5"></span></button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if--><label for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
     </div>
     <div data-slot="item" class="flex items-start flex-row text-sm">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" value="2" aria-label="2">
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" value="2" aria-label="2">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if--><label for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
     </div>
     <div data-slot="item" class="flex items-start flex-row text-sm">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" value="3" aria-label="3">
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" value="3" aria-label="3">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if--><label for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
     </div>
@@ -728,31 +824,34 @@ exports[`RadioGroup > renders with modelValue correctly 1`] = `
 exports[`RadioGroup > renders with neutral variant card correctly 1`] = `
 "<div id="v-0" data-slot="root" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="radiogroup" aria-orientation="vertical" aria-required="false">
   <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
-    <!--v-if--><label data-slot="item" class="flex items-start border border-muted rounded-lg flex-row text-sm p-3.5 has-data-[state=checked]:border-inverted">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-active="" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-inverted/25 focus-visible:ring-inverted size-4" value="1" aria-label="1"><span data-state="checked" data-slot="indicator" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-inverted after:size-1.5"></span></button>
+    <!--v-if--><label data-slot="item" class="flex items-start border border-muted rounded-lg hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:bg-elevated/50 transition-colors flex-row text-sm hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:border-accented p-3.5 outline-inverted/25 has-focus-visible:outline-3 not-has-disabled:has-focus-visible:border-inverted has-focus-visible:z-[1] has-data-[state=checked]:border-inverted/50 has-data-[state=checked]:bg-elevated">
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-active="" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-none size-4" value="1" aria-label="1"><span data-state="checked" data-slot="indicator" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-inverted after:size-1.5"></span></button>
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if-->
         <p for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</p>
         <!--v-if-->
       </div>
-    </label><label data-slot="item" class="flex items-start border border-muted rounded-lg flex-row text-sm p-3.5 has-data-[state=checked]:border-inverted">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-inverted/25 focus-visible:ring-inverted size-4" value="2" aria-label="2">
+    </label><label data-slot="item" class="flex items-start border border-muted rounded-lg hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:bg-elevated/50 transition-colors flex-row text-sm hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:border-accented p-3.5 outline-inverted/25 has-focus-visible:outline-3 not-has-disabled:has-focus-visible:border-inverted has-focus-visible:z-[1] has-data-[state=checked]:border-inverted/50 has-data-[state=checked]:bg-elevated">
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-none size-4" value="2" aria-label="2">
           <!---->
         </button>
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if-->
         <p for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</p>
         <!--v-if-->
       </div>
-    </label><label data-slot="item" class="flex items-start border border-muted rounded-lg flex-row text-sm p-3.5 has-data-[state=checked]:border-inverted">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-inverted/25 focus-visible:ring-inverted size-4" value="3" aria-label="3">
+    </label><label data-slot="item" class="flex items-start border border-muted rounded-lg hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:bg-elevated/50 transition-colors flex-row text-sm hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:border-accented p-3.5 outline-inverted/25 has-focus-visible:outline-3 not-has-disabled:has-focus-visible:border-inverted has-focus-visible:z-[1] has-data-[state=checked]:border-inverted/50 has-data-[state=checked]:bg-elevated">
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-none size-4" value="3" aria-label="3">
           <!---->
         </button>
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if-->
         <p for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</p>
         <!--v-if-->
       </div>
@@ -765,31 +864,34 @@ exports[`RadioGroup > renders with neutral variant card correctly 1`] = `
 exports[`RadioGroup > renders with neutral variant card highlight correctly 1`] = `
 "<div id="v-0" data-slot="root" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="radiogroup" aria-orientation="vertical" aria-required="false">
   <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
-    <!--v-if--><label data-slot="item" class="flex items-start border border-muted rounded-lg flex-row text-sm p-3.5 has-data-[state=checked]:border-inverted">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-active="" data-slot="base" class="rounded-full ring ring-inset overflow-hidden focus-visible:outline-3 outline-inverted/25 focus-visible:ring-inverted size-4 ring-inverted" value="1" aria-label="1"><span data-state="checked" data-slot="indicator" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-inverted after:size-1.5"></span></button>
+    <!--v-if--><label data-slot="item" class="flex items-start border border-muted rounded-lg hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:bg-elevated/50 transition-colors flex-row text-sm p-3.5 outline-inverted/25 has-focus-visible:outline-3 not-has-disabled:has-focus-visible:border-inverted has-focus-visible:z-[1] has-data-[state=checked]:border-inverted/50 has-data-[state=checked]:bg-elevated">
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-active="" data-slot="base" class="rounded-full ring ring-inset overflow-hidden focus-visible:outline-none size-4 ring-inverted" value="1" aria-label="1"><span data-state="checked" data-slot="indicator" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-inverted after:size-1.5"></span></button>
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if-->
         <p for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</p>
         <!--v-if-->
       </div>
-    </label><label data-slot="item" class="flex items-start border border-muted rounded-lg flex-row text-sm p-3.5 has-data-[state=checked]:border-inverted">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset overflow-hidden focus-visible:outline-3 outline-inverted/25 focus-visible:ring-inverted size-4 ring-inverted" value="2" aria-label="2">
+    </label><label data-slot="item" class="flex items-start border border-muted rounded-lg hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:bg-elevated/50 transition-colors flex-row text-sm p-3.5 outline-inverted/25 has-focus-visible:outline-3 not-has-disabled:has-focus-visible:border-inverted has-focus-visible:z-[1] has-data-[state=checked]:border-inverted/50 has-data-[state=checked]:bg-elevated">
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset overflow-hidden focus-visible:outline-none size-4 ring-inverted" value="2" aria-label="2">
           <!---->
         </button>
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if-->
         <p for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</p>
         <!--v-if-->
       </div>
-    </label><label data-slot="item" class="flex items-start border border-muted rounded-lg flex-row text-sm p-3.5 has-data-[state=checked]:border-inverted">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset overflow-hidden focus-visible:outline-3 outline-inverted/25 focus-visible:ring-inverted size-4 ring-inverted" value="3" aria-label="3">
+    </label><label data-slot="item" class="flex items-start border border-muted rounded-lg hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:bg-elevated/50 transition-colors flex-row text-sm p-3.5 outline-inverted/25 has-focus-visible:outline-3 not-has-disabled:has-focus-visible:border-inverted has-focus-visible:z-[1] has-data-[state=checked]:border-inverted/50 has-data-[state=checked]:bg-elevated">
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset overflow-hidden focus-visible:outline-none size-4 ring-inverted" value="3" aria-label="3">
           <!---->
         </button>
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if-->
         <p for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</p>
         <!--v-if-->
       </div>
@@ -804,30 +906,33 @@ exports[`RadioGroup > renders with neutral variant list correctly 1`] = `
   <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
     <!--v-if-->
     <div data-slot="item" class="flex items-start flex-row text-sm">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-active="" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-inverted/25 focus-visible:ring-inverted size-4" value="1" aria-label="1"><span data-state="checked" data-slot="indicator" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-inverted after:size-1.5"></span></button>
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-active="" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden size-4 outline-inverted/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-inverted" value="1" aria-label="1"><span data-state="checked" data-slot="indicator" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-inverted after:size-1.5"></span></button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if--><label for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
     </div>
     <div data-slot="item" class="flex items-start flex-row text-sm">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-inverted/25 focus-visible:ring-inverted size-4" value="2" aria-label="2">
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden size-4 outline-inverted/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-inverted" value="2" aria-label="2">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if--><label for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
     </div>
     <div data-slot="item" class="flex items-start flex-row text-sm">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-inverted/25 focus-visible:ring-inverted size-4" value="3" aria-label="3">
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden size-4 outline-inverted/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-inverted" value="3" aria-label="3">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if--><label for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
     </div>
@@ -841,30 +946,33 @@ exports[`RadioGroup > renders with neutral variant list highlight correctly 1`]
   <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
     <!--v-if-->
     <div data-slot="item" class="flex items-start flex-row text-sm">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-active="" data-slot="base" class="rounded-full ring ring-inset overflow-hidden focus-visible:outline-3 outline-inverted/25 focus-visible:ring-inverted size-4 ring-inverted" value="1" aria-label="1"><span data-state="checked" data-slot="indicator" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-inverted after:size-1.5"></span></button>
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-active="" data-slot="base" class="rounded-full ring ring-inset overflow-hidden size-4 outline-inverted/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-inverted ring-inverted" value="1" aria-label="1"><span data-state="checked" data-slot="indicator" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-inverted after:size-1.5"></span></button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if--><label for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
     </div>
     <div data-slot="item" class="flex items-start flex-row text-sm">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset overflow-hidden focus-visible:outline-3 outline-inverted/25 focus-visible:ring-inverted size-4 ring-inverted" value="2" aria-label="2">
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset overflow-hidden size-4 outline-inverted/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-inverted ring-inverted" value="2" aria-label="2">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if--><label for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
     </div>
     <div data-slot="item" class="flex items-start flex-row text-sm">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset overflow-hidden focus-visible:outline-3 outline-inverted/25 focus-visible:ring-inverted size-4 ring-inverted" value="3" aria-label="3">
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset overflow-hidden size-4 outline-inverted/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-inverted ring-inverted" value="3" aria-label="3">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if--><label for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
     </div>
@@ -876,31 +984,34 @@ exports[`RadioGroup > renders with neutral variant list highlight correctly 1`]
 exports[`RadioGroup > renders with neutral variant table correctly 1`] = `
 "<div id="v-0" data-slot="root" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="radiogroup" aria-orientation="vertical" aria-required="false">
   <fieldset data-slot="fieldset" class="flex flex-col gap-0 -space-y-px">
-    <!--v-if--><label data-slot="item" class="flex items-start border border-muted flex-row text-sm p-3.5 first-of-type:rounded-t-lg last-of-type:rounded-b-lg has-data-[state=checked]:bg-elevated has-data-[state=checked]:border-inverted/50 has-data-[state=checked]:z-[1]">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-active="" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-inverted/25 focus-visible:ring-inverted size-4" value="1" aria-label="1"><span data-state="checked" data-slot="indicator" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-inverted after:size-1.5"></span></button>
+    <!--v-if--><label data-slot="item" class="flex items-start border border-muted hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:bg-elevated/50 transition-colors flex-row text-sm hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:border-accented p-3.5 first-of-type:rounded-t-lg last-of-type:rounded-b-lg outline-inverted/25 has-focus-visible:outline-3 not-has-disabled:has-focus-visible:border-inverted has-focus-visible:z-[1] has-data-[state=checked]:bg-elevated has-data-[state=checked]:border-inverted/50 has-data-[state=checked]:z-[1]">
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-active="" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-none size-4" value="1" aria-label="1"><span data-state="checked" data-slot="indicator" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-inverted after:size-1.5"></span></button>
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if-->
         <p for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</p>
         <!--v-if-->
       </div>
-    </label><label data-slot="item" class="flex items-start border border-muted flex-row text-sm p-3.5 first-of-type:rounded-t-lg last-of-type:rounded-b-lg has-data-[state=checked]:bg-elevated has-data-[state=checked]:border-inverted/50 has-data-[state=checked]:z-[1]">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-inverted/25 focus-visible:ring-inverted size-4" value="2" aria-label="2">
+    </label><label data-slot="item" class="flex items-start border border-muted hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:bg-elevated/50 transition-colors flex-row text-sm hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:border-accented p-3.5 first-of-type:rounded-t-lg last-of-type:rounded-b-lg outline-inverted/25 has-focus-visible:outline-3 not-has-disabled:has-focus-visible:border-inverted has-focus-visible:z-[1] has-data-[state=checked]:bg-elevated has-data-[state=checked]:border-inverted/50 has-data-[state=checked]:z-[1]">
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-none size-4" value="2" aria-label="2">
           <!---->
         </button>
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if-->
         <p for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</p>
         <!--v-if-->
       </div>
-    </label><label data-slot="item" class="flex items-start border border-muted flex-row text-sm p-3.5 first-of-type:rounded-t-lg last-of-type:rounded-b-lg has-data-[state=checked]:bg-elevated has-data-[state=checked]:border-inverted/50 has-data-[state=checked]:z-[1]">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-inverted/25 focus-visible:ring-inverted size-4" value="3" aria-label="3">
+    </label><label data-slot="item" class="flex items-start border border-muted hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:bg-elevated/50 transition-colors flex-row text-sm hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:border-accented p-3.5 first-of-type:rounded-t-lg last-of-type:rounded-b-lg outline-inverted/25 has-focus-visible:outline-3 not-has-disabled:has-focus-visible:border-inverted has-focus-visible:z-[1] has-data-[state=checked]:bg-elevated has-data-[state=checked]:border-inverted/50 has-data-[state=checked]:z-[1]">
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-none size-4" value="3" aria-label="3">
           <!---->
         </button>
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if-->
         <p for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</p>
         <!--v-if-->
       </div>
@@ -913,31 +1024,34 @@ exports[`RadioGroup > renders with neutral variant table correctly 1`] = `
 exports[`RadioGroup > renders with neutral variant table highlight correctly 1`] = `
 "<div id="v-0" data-slot="root" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="radiogroup" aria-orientation="vertical" aria-required="false">
   <fieldset data-slot="fieldset" class="flex flex-col gap-0 -space-y-px">
-    <!--v-if--><label data-slot="item" class="flex items-start border border-muted flex-row text-sm p-3.5 first-of-type:rounded-t-lg last-of-type:rounded-b-lg has-data-[state=checked]:bg-elevated has-data-[state=checked]:border-inverted/50 has-data-[state=checked]:z-[1]">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-active="" data-slot="base" class="rounded-full ring ring-inset overflow-hidden focus-visible:outline-3 outline-inverted/25 focus-visible:ring-inverted size-4 ring-inverted" value="1" aria-label="1"><span data-state="checked" data-slot="indicator" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-inverted after:size-1.5"></span></button>
+    <!--v-if--><label data-slot="item" class="flex items-start border border-muted hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:bg-elevated/50 transition-colors flex-row text-sm p-3.5 first-of-type:rounded-t-lg last-of-type:rounded-b-lg outline-inverted/25 has-focus-visible:outline-3 not-has-disabled:has-focus-visible:border-inverted has-focus-visible:z-[1] has-data-[state=checked]:bg-elevated has-data-[state=checked]:border-inverted/50 has-data-[state=checked]:z-[1]">
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-active="" data-slot="base" class="rounded-full ring ring-inset overflow-hidden focus-visible:outline-none size-4 ring-inverted" value="1" aria-label="1"><span data-state="checked" data-slot="indicator" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-inverted after:size-1.5"></span></button>
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if-->
         <p for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</p>
         <!--v-if-->
       </div>
-    </label><label data-slot="item" class="flex items-start border border-muted flex-row text-sm p-3.5 first-of-type:rounded-t-lg last-of-type:rounded-b-lg has-data-[state=checked]:bg-elevated has-data-[state=checked]:border-inverted/50 has-data-[state=checked]:z-[1]">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset overflow-hidden focus-visible:outline-3 outline-inverted/25 focus-visible:ring-inverted size-4 ring-inverted" value="2" aria-label="2">
+    </label><label data-slot="item" class="flex items-start border border-muted hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:bg-elevated/50 transition-colors flex-row text-sm p-3.5 first-of-type:rounded-t-lg last-of-type:rounded-b-lg outline-inverted/25 has-focus-visible:outline-3 not-has-disabled:has-focus-visible:border-inverted has-focus-visible:z-[1] has-data-[state=checked]:bg-elevated has-data-[state=checked]:border-inverted/50 has-data-[state=checked]:z-[1]">
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset overflow-hidden focus-visible:outline-none size-4 ring-inverted" value="2" aria-label="2">
           <!---->
         </button>
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if-->
         <p for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</p>
         <!--v-if-->
       </div>
-    </label><label data-slot="item" class="flex items-start border border-muted flex-row text-sm p-3.5 first-of-type:rounded-t-lg last-of-type:rounded-b-lg has-data-[state=checked]:bg-elevated has-data-[state=checked]:border-inverted/50 has-data-[state=checked]:z-[1]">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset overflow-hidden focus-visible:outline-3 outline-inverted/25 focus-visible:ring-inverted size-4 ring-inverted" value="3" aria-label="3">
+    </label><label data-slot="item" class="flex items-start border border-muted hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:bg-elevated/50 transition-colors flex-row text-sm p-3.5 first-of-type:rounded-t-lg last-of-type:rounded-b-lg outline-inverted/25 has-focus-visible:outline-3 not-has-disabled:has-focus-visible:border-inverted has-focus-visible:z-[1] has-data-[state=checked]:bg-elevated has-data-[state=checked]:border-inverted/50 has-data-[state=checked]:z-[1]">
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset overflow-hidden focus-visible:outline-none size-4 ring-inverted" value="3" aria-label="3">
           <!---->
         </button>
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if-->
         <p for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</p>
         <!--v-if-->
       </div>
@@ -950,31 +1064,34 @@ exports[`RadioGroup > renders with neutral variant table highlight correctly 1`]
 exports[`RadioGroup > renders with primary variant card correctly 1`] = `
 "<div id="v-0" data-slot="root" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="radiogroup" aria-orientation="vertical" aria-required="false">
   <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
-    <!--v-if--><label data-slot="item" class="flex items-start border border-muted rounded-lg flex-row text-sm p-3.5 has-data-[state=checked]:border-primary">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-active="" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" value="1" aria-label="1"><span data-state="checked" data-slot="indicator" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-primary after:size-1.5"></span></button>
+    <!--v-if--><label data-slot="item" class="flex items-start border border-muted rounded-lg hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:bg-elevated/50 transition-colors flex-row text-sm hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:border-accented p-3.5 outline-primary/25 has-focus-visible:outline-3 not-has-disabled:has-focus-visible:border-primary has-focus-visible:z-[1] has-data-[state=checked]:border-primary/50 has-data-[state=checked]:bg-primary/10">
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-active="" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-none size-4" value="1" aria-label="1"><span data-state="checked" data-slot="indicator" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-primary after:size-1.5"></span></button>
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if-->
         <p for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</p>
         <!--v-if-->
       </div>
-    </label><label data-slot="item" class="flex items-start border border-muted rounded-lg flex-row text-sm p-3.5 has-data-[state=checked]:border-primary">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" value="2" aria-label="2">
+    </label><label data-slot="item" class="flex items-start border border-muted rounded-lg hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:bg-elevated/50 transition-colors flex-row text-sm hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:border-accented p-3.5 outline-primary/25 has-focus-visible:outline-3 not-has-disabled:has-focus-visible:border-primary has-focus-visible:z-[1] has-data-[state=checked]:border-primary/50 has-data-[state=checked]:bg-primary/10">
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-none size-4" value="2" aria-label="2">
           <!---->
         </button>
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if-->
         <p for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</p>
         <!--v-if-->
       </div>
-    </label><label data-slot="item" class="flex items-start border border-muted rounded-lg flex-row text-sm p-3.5 has-data-[state=checked]:border-primary">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" value="3" aria-label="3">
+    </label><label data-slot="item" class="flex items-start border border-muted rounded-lg hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:bg-elevated/50 transition-colors flex-row text-sm hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:border-accented p-3.5 outline-primary/25 has-focus-visible:outline-3 not-has-disabled:has-focus-visible:border-primary has-focus-visible:z-[1] has-data-[state=checked]:border-primary/50 has-data-[state=checked]:bg-primary/10">
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-none size-4" value="3" aria-label="3">
           <!---->
         </button>
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if-->
         <p for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</p>
         <!--v-if-->
       </div>
@@ -987,31 +1104,34 @@ exports[`RadioGroup > renders with primary variant card correctly 1`] = `
 exports[`RadioGroup > renders with primary variant card highlight correctly 1`] = `
 "<div id="v-0" data-slot="root" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="radiogroup" aria-orientation="vertical" aria-required="false">
   <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
-    <!--v-if--><label data-slot="item" class="flex items-start border border-muted rounded-lg flex-row text-sm p-3.5 has-data-[state=checked]:border-primary">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-active="" data-slot="base" class="rounded-full ring ring-inset overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4 ring-primary" value="1" aria-label="1"><span data-state="checked" data-slot="indicator" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-primary after:size-1.5"></span></button>
+    <!--v-if--><label data-slot="item" class="flex items-start border border-muted rounded-lg hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:bg-elevated/50 transition-colors flex-row text-sm p-3.5 outline-primary/25 has-focus-visible:outline-3 not-has-disabled:has-focus-visible:border-primary has-focus-visible:z-[1] has-data-[state=checked]:border-primary/50 has-data-[state=checked]:bg-primary/10">
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-active="" data-slot="base" class="rounded-full ring ring-inset overflow-hidden focus-visible:outline-none size-4 ring-primary" value="1" aria-label="1"><span data-state="checked" data-slot="indicator" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-primary after:size-1.5"></span></button>
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if-->
         <p for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</p>
         <!--v-if-->
       </div>
-    </label><label data-slot="item" class="flex items-start border border-muted rounded-lg flex-row text-sm p-3.5 has-data-[state=checked]:border-primary">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4 ring-primary" value="2" aria-label="2">
+    </label><label data-slot="item" class="flex items-start border border-muted rounded-lg hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:bg-elevated/50 transition-colors flex-row text-sm p-3.5 outline-primary/25 has-focus-visible:outline-3 not-has-disabled:has-focus-visible:border-primary has-focus-visible:z-[1] has-data-[state=checked]:border-primary/50 has-data-[state=checked]:bg-primary/10">
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset overflow-hidden focus-visible:outline-none size-4 ring-primary" value="2" aria-label="2">
           <!---->
         </button>
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if-->
         <p for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</p>
         <!--v-if-->
       </div>
-    </label><label data-slot="item" class="flex items-start border border-muted rounded-lg flex-row text-sm p-3.5 has-data-[state=checked]:border-primary">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4 ring-primary" value="3" aria-label="3">
+    </label><label data-slot="item" class="flex items-start border border-muted rounded-lg hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:bg-elevated/50 transition-colors flex-row text-sm p-3.5 outline-primary/25 has-focus-visible:outline-3 not-has-disabled:has-focus-visible:border-primary has-focus-visible:z-[1] has-data-[state=checked]:border-primary/50 has-data-[state=checked]:bg-primary/10">
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset overflow-hidden focus-visible:outline-none size-4 ring-primary" value="3" aria-label="3">
           <!---->
         </button>
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if-->
         <p for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</p>
         <!--v-if-->
       </div>
@@ -1026,30 +1146,33 @@ exports[`RadioGroup > renders with primary variant list correctly 1`] = `
   <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
     <!--v-if-->
     <div data-slot="item" class="flex items-start flex-row text-sm">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-active="" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" value="1" aria-label="1"><span data-state="checked" data-slot="indicator" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-primary after:size-1.5"></span></button>
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-active="" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" value="1" aria-label="1"><span data-state="checked" data-slot="indicator" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-primary after:size-1.5"></span></button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if--><label for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
     </div>
     <div data-slot="item" class="flex items-start flex-row text-sm">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" value="2" aria-label="2">
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" value="2" aria-label="2">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if--><label for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
     </div>
     <div data-slot="item" class="flex items-start flex-row text-sm">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" value="3" aria-label="3">
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" value="3" aria-label="3">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if--><label for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
     </div>
@@ -1063,30 +1186,33 @@ exports[`RadioGroup > renders with primary variant list highlight correctly 1`]
   <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
     <!--v-if-->
     <div data-slot="item" class="flex items-start flex-row text-sm">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-active="" data-slot="base" class="rounded-full ring ring-inset overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4 ring-primary" value="1" aria-label="1"><span data-state="checked" data-slot="indicator" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-primary after:size-1.5"></span></button>
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-active="" data-slot="base" class="rounded-full ring ring-inset overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary ring-primary" value="1" aria-label="1"><span data-state="checked" data-slot="indicator" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-primary after:size-1.5"></span></button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if--><label for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
     </div>
     <div data-slot="item" class="flex items-start flex-row text-sm">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4 ring-primary" value="2" aria-label="2">
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary ring-primary" value="2" aria-label="2">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if--><label for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
     </div>
     <div data-slot="item" class="flex items-start flex-row text-sm">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4 ring-primary" value="3" aria-label="3">
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary ring-primary" value="3" aria-label="3">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if--><label for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
     </div>
@@ -1098,31 +1224,34 @@ exports[`RadioGroup > renders with primary variant list highlight correctly 1`]
 exports[`RadioGroup > renders with primary variant table correctly 1`] = `
 "<div id="v-0" data-slot="root" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="radiogroup" aria-orientation="vertical" aria-required="false">
   <fieldset data-slot="fieldset" class="flex flex-col gap-0 -space-y-px">
-    <!--v-if--><label data-slot="item" class="flex items-start border border-muted flex-row text-sm p-3.5 first-of-type:rounded-t-lg last-of-type:rounded-b-lg has-data-[state=checked]:bg-primary/10 has-data-[state=checked]:border-primary/50 has-data-[state=checked]:z-[1]">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-active="" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" value="1" aria-label="1"><span data-state="checked" data-slot="indicator" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-primary after:size-1.5"></span></button>
+    <!--v-if--><label data-slot="item" class="flex items-start border border-muted hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:bg-elevated/50 transition-colors flex-row text-sm hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:border-accented p-3.5 first-of-type:rounded-t-lg last-of-type:rounded-b-lg outline-primary/25 has-focus-visible:outline-3 not-has-disabled:has-focus-visible:border-primary has-focus-visible:z-[1] has-data-[state=checked]:bg-primary/10 has-data-[state=checked]:border-primary/50 has-data-[state=checked]:z-[1]">
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-active="" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-none size-4" value="1" aria-label="1"><span data-state="checked" data-slot="indicator" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-primary after:size-1.5"></span></button>
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if-->
         <p for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</p>
         <!--v-if-->
       </div>
-    </label><label data-slot="item" class="flex items-start border border-muted flex-row text-sm p-3.5 first-of-type:rounded-t-lg last-of-type:rounded-b-lg has-data-[state=checked]:bg-primary/10 has-data-[state=checked]:border-primary/50 has-data-[state=checked]:z-[1]">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" value="2" aria-label="2">
+    </label><label data-slot="item" class="flex items-start border border-muted hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:bg-elevated/50 transition-colors flex-row text-sm hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:border-accented p-3.5 first-of-type:rounded-t-lg last-of-type:rounded-b-lg outline-primary/25 has-focus-visible:outline-3 not-has-disabled:has-focus-visible:border-primary has-focus-visible:z-[1] has-data-[state=checked]:bg-primary/10 has-data-[state=checked]:border-primary/50 has-data-[state=checked]:z-[1]">
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-none size-4" value="2" aria-label="2">
           <!---->
         </button>
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if-->
         <p for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</p>
         <!--v-if-->
       </div>
-    </label><label data-slot="item" class="flex items-start border border-muted flex-row text-sm p-3.5 first-of-type:rounded-t-lg last-of-type:rounded-b-lg has-data-[state=checked]:bg-primary/10 has-data-[state=checked]:border-primary/50 has-data-[state=checked]:z-[1]">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" value="3" aria-label="3">
+    </label><label data-slot="item" class="flex items-start border border-muted hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:bg-elevated/50 transition-colors flex-row text-sm hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:border-accented p-3.5 first-of-type:rounded-t-lg last-of-type:rounded-b-lg outline-primary/25 has-focus-visible:outline-3 not-has-disabled:has-focus-visible:border-primary has-focus-visible:z-[1] has-data-[state=checked]:bg-primary/10 has-data-[state=checked]:border-primary/50 has-data-[state=checked]:z-[1]">
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-none size-4" value="3" aria-label="3">
           <!---->
         </button>
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if-->
         <p for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</p>
         <!--v-if-->
       </div>
@@ -1135,31 +1264,34 @@ exports[`RadioGroup > renders with primary variant table correctly 1`] = `
 exports[`RadioGroup > renders with primary variant table highlight correctly 1`] = `
 "<div id="v-0" data-slot="root" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="radiogroup" aria-orientation="vertical" aria-required="false">
   <fieldset data-slot="fieldset" class="flex flex-col gap-0 -space-y-px">
-    <!--v-if--><label data-slot="item" class="flex items-start border border-muted flex-row text-sm p-3.5 first-of-type:rounded-t-lg last-of-type:rounded-b-lg has-data-[state=checked]:bg-primary/10 has-data-[state=checked]:border-primary/50 has-data-[state=checked]:z-[1]">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-active="" data-slot="base" class="rounded-full ring ring-inset overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4 ring-primary" value="1" aria-label="1"><span data-state="checked" data-slot="indicator" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-primary after:size-1.5"></span></button>
+    <!--v-if--><label data-slot="item" class="flex items-start border border-muted hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:bg-elevated/50 transition-colors flex-row text-sm p-3.5 first-of-type:rounded-t-lg last-of-type:rounded-b-lg outline-primary/25 has-focus-visible:outline-3 not-has-disabled:has-focus-visible:border-primary has-focus-visible:z-[1] has-data-[state=checked]:bg-primary/10 has-data-[state=checked]:border-primary/50 has-data-[state=checked]:z-[1]">
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-active="" data-slot="base" class="rounded-full ring ring-inset overflow-hidden focus-visible:outline-none size-4 ring-primary" value="1" aria-label="1"><span data-state="checked" data-slot="indicator" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-primary after:size-1.5"></span></button>
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if-->
         <p for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</p>
         <!--v-if-->
       </div>
-    </label><label data-slot="item" class="flex items-start border border-muted flex-row text-sm p-3.5 first-of-type:rounded-t-lg last-of-type:rounded-b-lg has-data-[state=checked]:bg-primary/10 has-data-[state=checked]:border-primary/50 has-data-[state=checked]:z-[1]">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4 ring-primary" value="2" aria-label="2">
+    </label><label data-slot="item" class="flex items-start border border-muted hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:bg-elevated/50 transition-colors flex-row text-sm p-3.5 first-of-type:rounded-t-lg last-of-type:rounded-b-lg outline-primary/25 has-focus-visible:outline-3 not-has-disabled:has-focus-visible:border-primary has-focus-visible:z-[1] has-data-[state=checked]:bg-primary/10 has-data-[state=checked]:border-primary/50 has-data-[state=checked]:z-[1]">
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset overflow-hidden focus-visible:outline-none size-4 ring-primary" value="2" aria-label="2">
           <!---->
         </button>
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if-->
         <p for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</p>
         <!--v-if-->
       </div>
-    </label><label data-slot="item" class="flex items-start border border-muted flex-row text-sm p-3.5 first-of-type:rounded-t-lg last-of-type:rounded-b-lg has-data-[state=checked]:bg-primary/10 has-data-[state=checked]:border-primary/50 has-data-[state=checked]:z-[1]">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4 ring-primary" value="3" aria-label="3">
+    </label><label data-slot="item" class="flex items-start border border-muted hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:bg-elevated/50 transition-colors flex-row text-sm p-3.5 first-of-type:rounded-t-lg last-of-type:rounded-b-lg outline-primary/25 has-focus-visible:outline-3 not-has-disabled:has-focus-visible:border-primary has-focus-visible:z-[1] has-data-[state=checked]:bg-primary/10 has-data-[state=checked]:border-primary/50 has-data-[state=checked]:z-[1]">
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset overflow-hidden focus-visible:outline-none size-4 ring-primary" value="3" aria-label="3">
           <!---->
         </button>
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if-->
         <p for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</p>
         <!--v-if-->
       </div>
@@ -1174,32 +1306,35 @@ exports[`RadioGroup > renders with required correctly 1`] = `
   <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
     <legend data-slot="legend" class="mb-1 block font-medium text-default text-sm after:content-['*'] after:ms-0.5 after:text-error">Legend</legend>
     <div data-slot="item" class="flex items-start flex-row text-sm">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="true" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" value="1" aria-label="1">
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="true" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" value="1" aria-label="1">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if--><label for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
     </div>
     <div data-slot="item" class="flex items-start flex-row text-sm">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="true" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" value="2" aria-label="2">
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="true" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" value="2" aria-label="2">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if--><label for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
     </div>
     <div data-slot="item" class="flex items-start flex-row text-sm">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="true" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" value="3" aria-label="3">
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="true" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" value="3" aria-label="3">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if--><label for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
     </div>
@@ -1213,30 +1348,33 @@ exports[`RadioGroup > renders with size lg correctly 1`] = `
   <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
     <!--v-if-->
     <div data-slot="item" class="flex items-start flex-row text-sm">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-active="" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4.5" value="1" aria-label="1"><span data-state="checked" data-slot="indicator" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-primary after:size-1.5"></span></button>
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-active="" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden size-4.5 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" value="1" aria-label="1"><span data-state="checked" data-slot="indicator" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-primary after:size-1.5"></span></button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if--><label for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
     </div>
     <div data-slot="item" class="flex items-start flex-row text-sm">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4.5" value="2" aria-label="2">
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden size-4.5 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" value="2" aria-label="2">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if--><label for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
     </div>
     <div data-slot="item" class="flex items-start flex-row text-sm">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4.5" value="3" aria-label="3">
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden size-4.5 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" value="3" aria-label="3">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if--><label for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
     </div>
@@ -1250,30 +1388,33 @@ exports[`RadioGroup > renders with size md correctly 1`] = `
   <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
     <!--v-if-->
     <div data-slot="item" class="flex items-start flex-row text-sm">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-active="" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" value="1" aria-label="1"><span data-state="checked" data-slot="indicator" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-primary after:size-1.5"></span></button>
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-active="" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" value="1" aria-label="1"><span data-state="checked" data-slot="indicator" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-primary after:size-1.5"></span></button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if--><label for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
     </div>
     <div data-slot="item" class="flex items-start flex-row text-sm">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" value="2" aria-label="2">
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" value="2" aria-label="2">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if--><label for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
     </div>
     <div data-slot="item" class="flex items-start flex-row text-sm">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" value="3" aria-label="3">
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" value="3" aria-label="3">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if--><label for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
     </div>
@@ -1287,30 +1428,33 @@ exports[`RadioGroup > renders with size sm correctly 1`] = `
   <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-0.5">
     <!--v-if-->
     <div data-slot="item" class="flex items-start flex-row text-xs">
-      <div data-slot="container" class="flex items-center h-4"><button id="v-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-active="" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-3.5" value="1" aria-label="1"><span data-state="checked" data-slot="indicator" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-primary after:size-1"></span></button>
+      <div data-slot="container" class="flex items-center h-4"><button id="v-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-active="" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden size-3.5 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" value="1" aria-label="1"><span data-state="checked" data-slot="indicator" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-primary after:size-1"></span></button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if--><label for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
     </div>
     <div data-slot="item" class="flex items-start flex-row text-xs">
-      <div data-slot="container" class="flex items-center h-4"><button id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-3.5" value="2" aria-label="2">
+      <div data-slot="container" class="flex items-center h-4"><button id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden size-3.5 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" value="2" aria-label="2">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if--><label for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
     </div>
     <div data-slot="item" class="flex items-start flex-row text-xs">
-      <div data-slot="container" class="flex items-center h-4"><button id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-3.5" value="3" aria-label="3">
+      <div data-slot="container" class="flex items-center h-4"><button id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden size-3.5 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" value="3" aria-label="3">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if--><label for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
     </div>
@@ -1324,30 +1468,33 @@ exports[`RadioGroup > renders with size xl correctly 1`] = `
   <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1.5">
     <!--v-if-->
     <div data-slot="item" class="flex items-start flex-row text-base">
-      <div data-slot="container" class="flex items-center h-6"><button id="v-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-active="" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-5" value="1" aria-label="1"><span data-state="checked" data-slot="indicator" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-primary after:size-2"></span></button>
+      <div data-slot="container" class="flex items-center h-6"><button id="v-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-active="" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden size-5 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" value="1" aria-label="1"><span data-state="checked" data-slot="indicator" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-primary after:size-2"></span></button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if--><label for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
     </div>
     <div data-slot="item" class="flex items-start flex-row text-base">
-      <div data-slot="container" class="flex items-center h-6"><button id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-5" value="2" aria-label="2">
+      <div data-slot="container" class="flex items-center h-6"><button id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden size-5 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" value="2" aria-label="2">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if--><label for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
     </div>
     <div data-slot="item" class="flex items-start flex-row text-base">
-      <div data-slot="container" class="flex items-center h-6"><button id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-5" value="3" aria-label="3">
+      <div data-slot="container" class="flex items-center h-6"><button id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden size-5 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" value="3" aria-label="3">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if--><label for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
     </div>
@@ -1361,30 +1508,33 @@ exports[`RadioGroup > renders with size xs correctly 1`] = `
   <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-0.5">
     <!--v-if-->
     <div data-slot="item" class="flex items-start flex-row text-xs">
-      <div data-slot="container" class="flex items-center h-4"><button id="v-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-active="" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-3" value="1" aria-label="1"><span data-state="checked" data-slot="indicator" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-primary after:size-1"></span></button>
+      <div data-slot="container" class="flex items-center h-4"><button id="v-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-active="" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden size-3 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" value="1" aria-label="1"><span data-state="checked" data-slot="indicator" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-primary after:size-1"></span></button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if--><label for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
     </div>
     <div data-slot="item" class="flex items-start flex-row text-xs">
-      <div data-slot="container" class="flex items-center h-4"><button id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-3" value="2" aria-label="2">
+      <div data-slot="container" class="flex items-center h-4"><button id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden size-3 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" value="2" aria-label="2">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if--><label for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
     </div>
     <div data-slot="item" class="flex items-start flex-row text-xs">
-      <div data-slot="container" class="flex items-center h-4"><button id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-3" value="3" aria-label="3">
+      <div data-slot="container" class="flex items-center h-4"><button id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden size-3 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" value="3" aria-label="3">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if--><label for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
     </div>
@@ -1398,32 +1548,35 @@ exports[`RadioGroup > renders with ui correctly 1`] = `
   <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
     <!--v-if-->
     <div data-slot="item" class="flex items-start flex-row text-sm">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" value="1" aria-label="1">
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" value="1" aria-label="1">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-4"><label for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-4">
+        <!--v-if--><label for="v-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
     </div>
     <div data-slot="item" class="flex items-start flex-row text-sm">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" value="2" aria-label="2">
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" value="2" aria-label="2">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-4"><label for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-4">
+        <!--v-if--><label for="v-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
     </div>
     <div data-slot="item" class="flex items-start flex-row text-sm">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" value="3" aria-label="3">
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" value="3" aria-label="3">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-4"><label for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-4">
+        <!--v-if--><label for="v-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
     </div>
@@ -1437,30 +1590,33 @@ exports[`RadioGroup > renders with valueKey correctly 1`] = `
   <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
     <!--v-if-->
     <div data-slot="item" class="flex items-start flex-row text-sm">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0:Option 1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-active="" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" value="Option 1" aria-label="Option 1"><span data-state="checked" data-slot="indicator" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-primary after:size-1.5"></span></button>
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0:Option 1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-active="" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" value="Option 1" aria-label="Option 1"><span data-state="checked" data-slot="indicator" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-primary after:size-1.5"></span></button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:Option 1" data-slot="label" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if--><label for="v-0:Option 1" data-slot="label" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
     </div>
     <div data-slot="item" class="flex items-start flex-row text-sm">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0:Option 2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" value="Option 2" aria-label="Option 2">
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0:Option 2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" value="Option 2" aria-label="Option 2">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:Option 2" data-slot="label" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if--><label for="v-0:Option 2" data-slot="label" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
     </div>
     <div data-slot="item" class="flex items-start flex-row text-sm">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0:Option 3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" value="Option 3" aria-label="Option 3">
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0:Option 3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" value="Option 3" aria-label="Option 3">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0:Option 3" data-slot="label" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if--><label for="v-0:Option 3" data-slot="label" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
     </div>
diff --git a/test/components/__snapshots__/RadioGroup.spec.ts.snap b/test/components/__snapshots__/RadioGroup.spec.ts.snap
index 4405aae944..d08db68340 100644
--- a/test/components/__snapshots__/RadioGroup.spec.ts.snap
+++ b/test/components/__snapshots__/RadioGroup.spec.ts.snap
@@ -5,32 +5,35 @@ exports[`RadioGroup > renders with ariaLabel correctly 1`] = `
   <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
     <!--v-if-->
     <div data-slot="item" class="flex items-start flex-row text-sm">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" value="1" aria-label="1">
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" value="1" aria-label="1">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if--><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
     </div>
     <div data-slot="item" class="flex items-start flex-row text-sm">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" value="2" aria-label="2">
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" value="2" aria-label="2">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if--><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
     </div>
     <div data-slot="item" class="flex items-start flex-row text-sm">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" value="3" aria-label="3">
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" value="3" aria-label="3">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if--><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
     </div>
@@ -44,32 +47,35 @@ exports[`RadioGroup > renders with as correctly 1`] = `
   <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
     <!--v-if-->
     <div data-slot="item" class="flex items-start flex-row text-sm">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" value="1" aria-label="1">
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" value="1" aria-label="1">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if--><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
     </div>
     <div data-slot="item" class="flex items-start flex-row text-sm">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" value="2" aria-label="2">
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" value="2" aria-label="2">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if--><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
     </div>
     <div data-slot="item" class="flex items-start flex-row text-sm">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" value="3" aria-label="3">
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" value="3" aria-label="3">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if--><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
     </div>
@@ -83,32 +89,35 @@ exports[`RadioGroup > renders with class correctly 1`] = `
   <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
     <!--v-if-->
     <div data-slot="item" class="flex items-start flex-row text-sm">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" value="1" aria-label="1">
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" value="1" aria-label="1">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if--><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
     </div>
     <div data-slot="item" class="flex items-start flex-row text-sm">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" value="2" aria-label="2">
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" value="2" aria-label="2">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if--><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
     </div>
     <div data-slot="item" class="flex items-start flex-row text-sm">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" value="3" aria-label="3">
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" value="3" aria-label="3">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if--><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
     </div>
@@ -122,30 +131,33 @@ exports[`RadioGroup > renders with defaultValue correctly 1`] = `
   <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
     <!--v-if-->
     <div data-slot="item" class="flex items-start flex-row text-sm">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-active="" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" value="1" aria-label="1"><span data-state="checked" data-slot="indicator" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-primary after:size-1.5"></span></button>
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-active="" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" value="1" aria-label="1"><span data-state="checked" data-slot="indicator" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-primary after:size-1.5"></span></button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if--><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
     </div>
     <div data-slot="item" class="flex items-start flex-row text-sm">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" value="2" aria-label="2">
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" value="2" aria-label="2">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if--><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
     </div>
     <div data-slot="item" class="flex items-start flex-row text-sm">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" value="3" aria-label="3">
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" value="3" aria-label="3">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if--><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
     </div>
@@ -159,32 +171,35 @@ exports[`RadioGroup > renders with description correctly 1`] = `
   <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
     <!--v-if-->
     <div data-slot="item" class="flex items-start flex-row text-sm">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" value="1" aria-label="1">
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" value="1" aria-label="1">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if--><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
         <p data-slot="description" class="text-muted">Description 0</p>
       </div>
     </div>
     <div data-slot="item" class="flex items-start flex-row text-sm">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" value="2" aria-label="2">
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" value="2" aria-label="2">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if--><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
         <p data-slot="description" class="text-muted">Description 1</p>
       </div>
     </div>
     <div data-slot="item" class="flex items-start flex-row text-sm">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" value="3" aria-label="3">
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" value="3" aria-label="3">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if--><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
         <p data-slot="description" class="text-muted">Description 2</p>
       </div>
     </div>
@@ -198,32 +213,35 @@ exports[`RadioGroup > renders with description slot correctly 1`] = `
   <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
     <!--v-if-->
     <div data-slot="item" class="flex items-start flex-row text-sm">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" value="1" aria-label="1">
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" value="1" aria-label="1">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">Description slot</label>
+      <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if--><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">Description slot</label>
         <!--v-if-->
       </div>
     </div>
     <div data-slot="item" class="flex items-start flex-row text-sm">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" value="2" aria-label="2">
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" value="2" aria-label="2">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">Description slot</label>
+      <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if--><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">Description slot</label>
         <!--v-if-->
       </div>
     </div>
     <div data-slot="item" class="flex items-start flex-row text-sm">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" value="3" aria-label="3">
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" value="3" aria-label="3">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">Description slot</label>
+      <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if--><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">Description slot</label>
         <!--v-if-->
       </div>
     </div>
@@ -237,32 +255,35 @@ exports[`RadioGroup > renders with descriptionKey correctly 1`] = `
   <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
     <!--v-if-->
     <div data-slot="item" class="flex items-start flex-row text-sm">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" value="1" aria-label="1">
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" value="1" aria-label="1">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if--><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
         <p data-slot="description" class="text-muted">1</p>
       </div>
     </div>
     <div data-slot="item" class="flex items-start flex-row text-sm">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" value="2" aria-label="2">
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" value="2" aria-label="2">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if--><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
         <p data-slot="description" class="text-muted">2</p>
       </div>
     </div>
     <div data-slot="item" class="flex items-start flex-row text-sm">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" value="3" aria-label="3">
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" value="3" aria-label="3">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if--><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
         <p data-slot="description" class="text-muted">3</p>
       </div>
     </div>
@@ -276,32 +297,35 @@ exports[`RadioGroup > renders with disabled correctly 1`] = `
   <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
     <!--v-if-->
     <div data-slot="item" class="flex items-start flex-row text-sm opacity-75">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:1" role="radio" type="button" aria-checked="false" disabled="" data-state="unchecked" data-disabled="" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4 cursor-not-allowed" value="1" aria-label="1">
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:1" role="radio" type="button" aria-checked="false" disabled="" data-state="unchecked" data-disabled="" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden size-4 cursor-not-allowed outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" value="1" aria-label="1">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default cursor-not-allowed">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if--><label for="v-0-0:1" data-slot="label" class="block font-medium text-default cursor-not-allowed">Option 1</label>
         <!--v-if-->
       </div>
     </div>
     <div data-slot="item" class="flex items-start flex-row text-sm opacity-75">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:2" role="radio" type="button" aria-checked="false" disabled="" data-state="unchecked" data-disabled="" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4 cursor-not-allowed" value="2" aria-label="2">
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:2" role="radio" type="button" aria-checked="false" disabled="" data-state="unchecked" data-disabled="" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden size-4 cursor-not-allowed outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" value="2" aria-label="2">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default cursor-not-allowed">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if--><label for="v-0-0:2" data-slot="label" class="block font-medium text-default cursor-not-allowed">Option 2</label>
         <!--v-if-->
       </div>
     </div>
     <div data-slot="item" class="flex items-start flex-row text-sm opacity-75">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:3" role="radio" type="button" aria-checked="false" disabled="" data-state="unchecked" data-disabled="" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4 cursor-not-allowed" value="3" aria-label="3">
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:3" role="radio" type="button" aria-checked="false" disabled="" data-state="unchecked" data-disabled="" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden size-4 cursor-not-allowed outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" value="3" aria-label="3">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default cursor-not-allowed">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if--><label for="v-0-0:3" data-slot="label" class="block font-medium text-default cursor-not-allowed">Option 3</label>
         <!--v-if-->
       </div>
     </div>
@@ -313,31 +337,34 @@ exports[`RadioGroup > renders with disabled correctly 1`] = `
 exports[`RadioGroup > renders with horizontal variant card correctly 1`] = `
 "<div id="v-0-0" data-slot="root" class="relative" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="radiogroup" aria-orientation="horizontal" aria-required="false">
   <fieldset data-slot="fieldset" class="flex gap-x-2 flex-row gap-y-1">
-    <!--v-if--><label data-slot="item" class="flex items-start border border-muted rounded-lg flex-row text-sm p-3.5 has-data-[state=checked]:border-primary">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" value="1" aria-label="1"><span data-state="checked" data-slot="indicator" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-primary after:size-1.5"></span></button>
+    <!--v-if--><label data-slot="item" class="flex items-start border border-muted rounded-lg hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:bg-elevated/50 transition-colors flex-row text-sm hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:border-accented p-3.5 outline-primary/25 has-focus-visible:outline-3 not-has-disabled:has-focus-visible:border-primary has-focus-visible:z-[1] has-data-[state=checked]:border-primary/50 has-data-[state=checked]:bg-primary/10">
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-none size-4" value="1" aria-label="1"><span data-state="checked" data-slot="indicator" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-primary after:size-1.5"></span></button>
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if-->
         <p for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</p>
         <!--v-if-->
       </div>
-    </label><label data-slot="item" class="flex items-start border border-muted rounded-lg flex-row text-sm p-3.5 has-data-[state=checked]:border-primary">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" value="2" aria-label="2">
+    </label><label data-slot="item" class="flex items-start border border-muted rounded-lg hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:bg-elevated/50 transition-colors flex-row text-sm hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:border-accented p-3.5 outline-primary/25 has-focus-visible:outline-3 not-has-disabled:has-focus-visible:border-primary has-focus-visible:z-[1] has-data-[state=checked]:border-primary/50 has-data-[state=checked]:bg-primary/10">
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-none size-4" value="2" aria-label="2">
           <!---->
         </button>
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if-->
         <p for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</p>
         <!--v-if-->
       </div>
-    </label><label data-slot="item" class="flex items-start border border-muted rounded-lg flex-row text-sm p-3.5 has-data-[state=checked]:border-primary">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" value="3" aria-label="3">
+    </label><label data-slot="item" class="flex items-start border border-muted rounded-lg hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:bg-elevated/50 transition-colors flex-row text-sm hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:border-accented p-3.5 outline-primary/25 has-focus-visible:outline-3 not-has-disabled:has-focus-visible:border-primary has-focus-visible:z-[1] has-data-[state=checked]:border-primary/50 has-data-[state=checked]:bg-primary/10">
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-none size-4" value="3" aria-label="3">
           <!---->
         </button>
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if-->
         <p for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</p>
         <!--v-if-->
       </div>
@@ -352,30 +379,33 @@ exports[`RadioGroup > renders with horizontal variant list correctly 1`] = `
   <fieldset data-slot="fieldset" class="flex gap-x-2 flex-row gap-y-1">
     <!--v-if-->
     <div data-slot="item" class="flex items-start flex-row text-sm">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" value="1" aria-label="1"><span data-state="checked" data-slot="indicator" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-primary after:size-1.5"></span></button>
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" value="1" aria-label="1"><span data-state="checked" data-slot="indicator" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-primary after:size-1.5"></span></button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if--><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
     </div>
     <div data-slot="item" class="flex items-start flex-row text-sm">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" value="2" aria-label="2">
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" value="2" aria-label="2">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if--><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
     </div>
     <div data-slot="item" class="flex items-start flex-row text-sm">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" value="3" aria-label="3">
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" value="3" aria-label="3">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if--><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
     </div>
@@ -387,31 +417,34 @@ exports[`RadioGroup > renders with horizontal variant list correctly 1`] = `
 exports[`RadioGroup > renders with horizontal variant table correctly 1`] = `
 "<div id="v-0-0" data-slot="root" class="relative" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="radiogroup" aria-orientation="horizontal" aria-required="false">
   <fieldset data-slot="fieldset" class="flex flex-row gap-0 -space-x-px">
-    <!--v-if--><label data-slot="item" class="flex items-start border border-muted flex-row text-sm p-3.5 first-of-type:rounded-s-lg last-of-type:rounded-e-lg has-data-[state=checked]:bg-primary/10 has-data-[state=checked]:border-primary/50 has-data-[state=checked]:z-[1]">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" value="1" aria-label="1"><span data-state="checked" data-slot="indicator" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-primary after:size-1.5"></span></button>
+    <!--v-if--><label data-slot="item" class="flex items-start border border-muted hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:bg-elevated/50 transition-colors flex-row text-sm hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:border-accented p-3.5 first-of-type:rounded-s-lg last-of-type:rounded-e-lg outline-primary/25 has-focus-visible:outline-3 not-has-disabled:has-focus-visible:border-primary has-focus-visible:z-[1] has-data-[state=checked]:bg-primary/10 has-data-[state=checked]:border-primary/50 has-data-[state=checked]:z-[1]">
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-none size-4" value="1" aria-label="1"><span data-state="checked" data-slot="indicator" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-primary after:size-1.5"></span></button>
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if-->
         <p for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</p>
         <!--v-if-->
       </div>
-    </label><label data-slot="item" class="flex items-start border border-muted flex-row text-sm p-3.5 first-of-type:rounded-s-lg last-of-type:rounded-e-lg has-data-[state=checked]:bg-primary/10 has-data-[state=checked]:border-primary/50 has-data-[state=checked]:z-[1]">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" value="2" aria-label="2">
+    </label><label data-slot="item" class="flex items-start border border-muted hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:bg-elevated/50 transition-colors flex-row text-sm hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:border-accented p-3.5 first-of-type:rounded-s-lg last-of-type:rounded-e-lg outline-primary/25 has-focus-visible:outline-3 not-has-disabled:has-focus-visible:border-primary has-focus-visible:z-[1] has-data-[state=checked]:bg-primary/10 has-data-[state=checked]:border-primary/50 has-data-[state=checked]:z-[1]">
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-none size-4" value="2" aria-label="2">
           <!---->
         </button>
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if-->
         <p for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</p>
         <!--v-if-->
       </div>
-    </label><label data-slot="item" class="flex items-start border border-muted flex-row text-sm p-3.5 first-of-type:rounded-s-lg last-of-type:rounded-e-lg has-data-[state=checked]:bg-primary/10 has-data-[state=checked]:border-primary/50 has-data-[state=checked]:z-[1]">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" value="3" aria-label="3">
+    </label><label data-slot="item" class="flex items-start border border-muted hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:bg-elevated/50 transition-colors flex-row text-sm hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:border-accented p-3.5 first-of-type:rounded-s-lg last-of-type:rounded-e-lg outline-primary/25 has-focus-visible:outline-3 not-has-disabled:has-focus-visible:border-primary has-focus-visible:z-[1] has-data-[state=checked]:bg-primary/10 has-data-[state=checked]:border-primary/50 has-data-[state=checked]:z-[1]">
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-none size-4" value="3" aria-label="3">
           <!---->
         </button>
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if-->
         <p for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</p>
         <!--v-if-->
       </div>
@@ -421,35 +454,77 @@ exports[`RadioGroup > renders with horizontal variant table correctly 1`] = `
 </div>"
 `;
 
+exports[`RadioGroup > renders with icon correctly 1`] = `
+"<div id="v-0-0" data-slot="root" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="radiogroup" aria-orientation="vertical" aria-required="false">
+  <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
+    <!--v-if-->
+    <div data-slot="item" class="flex items-start text-sm outline-primary/25 has-focus-visible:outline-3 not-has-disabled:has-focus-visible:border-primary has-focus-visible:z-[1]">
+      <div data-slot="container" class="flex items-center h-auto"><button id="v-0-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-none sr-only size-4" value="1" aria-label="1">
+          <!---->
+        </button>
+        <!--v-if-->
+      </div>
+      <div data-slot="wrapper" class="w-full flex flex-col items-center gap-1 text-center"><span class="iconify i-lucide:rocket shrink-0 size-4" aria-hidden="true" data-slot="icon"></span><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
+        <!--v-if-->
+      </div>
+    </div>
+    <div data-slot="item" class="flex items-start text-sm outline-primary/25 has-focus-visible:outline-3 not-has-disabled:has-focus-visible:border-primary has-focus-visible:z-[1]">
+      <div data-slot="container" class="flex items-center h-auto"><button id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-none sr-only size-4" value="2" aria-label="2">
+          <!---->
+        </button>
+        <!--v-if-->
+      </div>
+      <div data-slot="wrapper" class="w-full flex flex-col items-center gap-1 text-center"><span class="iconify i-lucide:rocket shrink-0 size-4" aria-hidden="true" data-slot="icon"></span><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
+        <!--v-if-->
+      </div>
+    </div>
+    <div data-slot="item" class="flex items-start text-sm outline-primary/25 has-focus-visible:outline-3 not-has-disabled:has-focus-visible:border-primary has-focus-visible:z-[1]">
+      <div data-slot="container" class="flex items-center h-auto"><button id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-none sr-only size-4" value="3" aria-label="3">
+          <!---->
+        </button>
+        <!--v-if-->
+      </div>
+      <div data-slot="wrapper" class="w-full flex flex-col items-center gap-1 text-center"><span class="iconify i-lucide:rocket shrink-0 size-4" aria-hidden="true" data-slot="icon"></span><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
+        <!--v-if-->
+      </div>
+    </div>
+  </fieldset>
+  <!--v-if-->
+</div>"
+`;
+
 exports[`RadioGroup > renders with indicator end correctly 1`] = `
 "<div id="v-0-0" data-slot="root" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="radiogroup" aria-orientation="vertical" aria-required="false">
   <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
     <!--v-if-->
     <div data-slot="item" class="flex items-start flex-row-reverse text-sm">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-active="" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" value="1" aria-label="1"><span data-state="checked" data-slot="indicator" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-primary after:size-1.5"></span></button>
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-active="" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" value="1" aria-label="1"><span data-state="checked" data-slot="indicator" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-primary after:size-1.5"></span></button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full me-2"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full me-2">
+        <!--v-if--><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
     </div>
     <div data-slot="item" class="flex items-start flex-row-reverse text-sm">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" value="2" aria-label="2">
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" value="2" aria-label="2">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full me-2"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full me-2">
+        <!--v-if--><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
     </div>
     <div data-slot="item" class="flex items-start flex-row-reverse text-sm">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" value="3" aria-label="3">
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" value="3" aria-label="3">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full me-2"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full me-2">
+        <!--v-if--><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
     </div>
@@ -462,31 +537,34 @@ exports[`RadioGroup > renders with indicator hidden correctly 1`] = `
 "<div id="v-0-0" data-slot="root" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="radiogroup" aria-orientation="vertical" aria-required="false">
   <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
     <!--v-if-->
-    <div data-slot="item" class="flex items-start text-sm">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-active="" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary sr-only size-4" value="1" aria-label="1"><span data-state="checked" data-slot="indicator" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-primary after:size-1.5"></span></button>
+    <div data-slot="item" class="flex items-start text-sm outline-primary/25 has-focus-visible:outline-3 not-has-disabled:has-focus-visible:border-primary has-focus-visible:z-[1]">
+      <div data-slot="container" class="flex items-center h-auto"><button id="v-0-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-active="" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-none sr-only size-4" value="1" aria-label="1"><span data-state="checked" data-slot="indicator" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-primary after:size-1.5"></span></button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full text-center"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full flex flex-col items-center gap-1 text-center">
+        <!--v-if--><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
     </div>
-    <div data-slot="item" class="flex items-start text-sm">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary sr-only size-4" value="2" aria-label="2">
+    <div data-slot="item" class="flex items-start text-sm outline-primary/25 has-focus-visible:outline-3 not-has-disabled:has-focus-visible:border-primary has-focus-visible:z-[1]">
+      <div data-slot="container" class="flex items-center h-auto"><button id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-none sr-only size-4" value="2" aria-label="2">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full text-center"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full flex flex-col items-center gap-1 text-center">
+        <!--v-if--><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
     </div>
-    <div data-slot="item" class="flex items-start text-sm">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary sr-only size-4" value="3" aria-label="3">
+    <div data-slot="item" class="flex items-start text-sm outline-primary/25 has-focus-visible:outline-3 not-has-disabled:has-focus-visible:border-primary has-focus-visible:z-[1]">
+      <div data-slot="container" class="flex items-center h-auto"><button id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-none sr-only size-4" value="3" aria-label="3">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full text-center"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full flex flex-col items-center gap-1 text-center">
+        <!--v-if--><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
     </div>
@@ -500,30 +578,33 @@ exports[`RadioGroup > renders with indicator start correctly 1`] = `
   <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
     <!--v-if-->
     <div data-slot="item" class="flex items-start flex-row text-sm">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-active="" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" value="1" aria-label="1"><span data-state="checked" data-slot="indicator" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-primary after:size-1.5"></span></button>
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-active="" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" value="1" aria-label="1"><span data-state="checked" data-slot="indicator" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-primary after:size-1.5"></span></button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if--><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
     </div>
     <div data-slot="item" class="flex items-start flex-row text-sm">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" value="2" aria-label="2">
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" value="2" aria-label="2">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if--><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
     </div>
     <div data-slot="item" class="flex items-start flex-row text-sm">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" value="3" aria-label="3">
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" value="3" aria-label="3">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if--><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
     </div>
@@ -537,32 +618,35 @@ exports[`RadioGroup > renders with items correctly 1`] = `
   <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
     <!--v-if-->
     <div data-slot="item" class="flex items-start flex-row text-sm">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" value="1" aria-label="1">
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" value="1" aria-label="1">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if--><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
     </div>
     <div data-slot="item" class="flex items-start flex-row text-sm">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" value="2" aria-label="2">
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" value="2" aria-label="2">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if--><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
     </div>
     <div data-slot="item" class="flex items-start flex-row text-sm">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" value="3" aria-label="3">
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" value="3" aria-label="3">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if--><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
     </div>
@@ -576,32 +660,35 @@ exports[`RadioGroup > renders with label slot correctly 1`] = `
   <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
     <!--v-if-->
     <div data-slot="item" class="flex items-start flex-row text-sm">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" value="1" aria-label="1">
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" value="1" aria-label="1">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">Label slot</label>
+      <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if--><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">Label slot</label>
         <!--v-if-->
       </div>
     </div>
     <div data-slot="item" class="flex items-start flex-row text-sm">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" value="2" aria-label="2">
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" value="2" aria-label="2">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">Label slot</label>
+      <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if--><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">Label slot</label>
         <!--v-if-->
       </div>
     </div>
     <div data-slot="item" class="flex items-start flex-row text-sm">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" value="3" aria-label="3">
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" value="3" aria-label="3">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">Label slot</label>
+      <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if--><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">Label slot</label>
         <!--v-if-->
       </div>
     </div>
@@ -615,32 +702,35 @@ exports[`RadioGroup > renders with labelKey correctly 1`] = `
   <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
     <!--v-if-->
     <div data-slot="item" class="flex items-start flex-row text-sm">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" value="1" aria-label="1">
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" value="1" aria-label="1">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">1</label>
+      <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if--><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">1</label>
         <!--v-if-->
       </div>
     </div>
     <div data-slot="item" class="flex items-start flex-row text-sm">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" value="2" aria-label="2">
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" value="2" aria-label="2">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">2</label>
+      <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if--><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">2</label>
         <!--v-if-->
       </div>
     </div>
     <div data-slot="item" class="flex items-start flex-row text-sm">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" value="3" aria-label="3">
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" value="3" aria-label="3">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">3</label>
+      <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if--><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">3</label>
         <!--v-if-->
       </div>
     </div>
@@ -654,32 +744,35 @@ exports[`RadioGroup > renders with legend slot correctly 1`] = `
   <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
     <!--v-if-->
     <div data-slot="item" class="flex items-start flex-row text-sm">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" value="1" aria-label="1">
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" value="1" aria-label="1">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">Legend slot</label>
+      <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if--><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">Legend slot</label>
         <!--v-if-->
       </div>
     </div>
     <div data-slot="item" class="flex items-start flex-row text-sm">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" value="2" aria-label="2">
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" value="2" aria-label="2">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">Legend slot</label>
+      <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if--><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">Legend slot</label>
         <!--v-if-->
       </div>
     </div>
     <div data-slot="item" class="flex items-start flex-row text-sm">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" value="3" aria-label="3">
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" value="3" aria-label="3">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">Legend slot</label>
+      <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if--><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">Legend slot</label>
         <!--v-if-->
       </div>
     </div>
@@ -693,30 +786,33 @@ exports[`RadioGroup > renders with modelValue correctly 1`] = `
   <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
     <!--v-if-->
     <div data-slot="item" class="flex items-start flex-row text-sm">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-active="" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" value="1" aria-label="1"><span data-state="checked" data-slot="indicator" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-primary after:size-1.5"></span></button>
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-active="" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" value="1" aria-label="1"><span data-state="checked" data-slot="indicator" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-primary after:size-1.5"></span></button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if--><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
     </div>
     <div data-slot="item" class="flex items-start flex-row text-sm">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" value="2" aria-label="2">
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" value="2" aria-label="2">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if--><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
     </div>
     <div data-slot="item" class="flex items-start flex-row text-sm">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" value="3" aria-label="3">
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" value="3" aria-label="3">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if--><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
     </div>
@@ -728,31 +824,34 @@ exports[`RadioGroup > renders with modelValue correctly 1`] = `
 exports[`RadioGroup > renders with neutral variant card correctly 1`] = `
 "<div id="v-0-0" data-slot="root" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="radiogroup" aria-orientation="vertical" aria-required="false">
   <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
-    <!--v-if--><label data-slot="item" class="flex items-start border border-muted rounded-lg flex-row text-sm p-3.5 has-data-[state=checked]:border-inverted">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-active="" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-inverted/25 focus-visible:ring-inverted size-4" value="1" aria-label="1"><span data-state="checked" data-slot="indicator" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-inverted after:size-1.5"></span></button>
+    <!--v-if--><label data-slot="item" class="flex items-start border border-muted rounded-lg hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:bg-elevated/50 transition-colors flex-row text-sm hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:border-accented p-3.5 outline-inverted/25 has-focus-visible:outline-3 not-has-disabled:has-focus-visible:border-inverted has-focus-visible:z-[1] has-data-[state=checked]:border-inverted/50 has-data-[state=checked]:bg-elevated">
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-active="" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-none size-4" value="1" aria-label="1"><span data-state="checked" data-slot="indicator" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-inverted after:size-1.5"></span></button>
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if-->
         <p for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</p>
         <!--v-if-->
       </div>
-    </label><label data-slot="item" class="flex items-start border border-muted rounded-lg flex-row text-sm p-3.5 has-data-[state=checked]:border-inverted">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-inverted/25 focus-visible:ring-inverted size-4" value="2" aria-label="2">
+    </label><label data-slot="item" class="flex items-start border border-muted rounded-lg hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:bg-elevated/50 transition-colors flex-row text-sm hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:border-accented p-3.5 outline-inverted/25 has-focus-visible:outline-3 not-has-disabled:has-focus-visible:border-inverted has-focus-visible:z-[1] has-data-[state=checked]:border-inverted/50 has-data-[state=checked]:bg-elevated">
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-none size-4" value="2" aria-label="2">
           <!---->
         </button>
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if-->
         <p for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</p>
         <!--v-if-->
       </div>
-    </label><label data-slot="item" class="flex items-start border border-muted rounded-lg flex-row text-sm p-3.5 has-data-[state=checked]:border-inverted">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-inverted/25 focus-visible:ring-inverted size-4" value="3" aria-label="3">
+    </label><label data-slot="item" class="flex items-start border border-muted rounded-lg hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:bg-elevated/50 transition-colors flex-row text-sm hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:border-accented p-3.5 outline-inverted/25 has-focus-visible:outline-3 not-has-disabled:has-focus-visible:border-inverted has-focus-visible:z-[1] has-data-[state=checked]:border-inverted/50 has-data-[state=checked]:bg-elevated">
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-none size-4" value="3" aria-label="3">
           <!---->
         </button>
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if-->
         <p for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</p>
         <!--v-if-->
       </div>
@@ -765,31 +864,34 @@ exports[`RadioGroup > renders with neutral variant card correctly 1`] = `
 exports[`RadioGroup > renders with neutral variant card highlight correctly 1`] = `
 "<div id="v-0-0" data-slot="root" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="radiogroup" aria-orientation="vertical" aria-required="false">
   <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
-    <!--v-if--><label data-slot="item" class="flex items-start border border-muted rounded-lg flex-row text-sm p-3.5 has-data-[state=checked]:border-inverted">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-active="" data-slot="base" class="rounded-full ring ring-inset overflow-hidden focus-visible:outline-3 outline-inverted/25 focus-visible:ring-inverted size-4 ring-inverted" value="1" aria-label="1"><span data-state="checked" data-slot="indicator" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-inverted after:size-1.5"></span></button>
+    <!--v-if--><label data-slot="item" class="flex items-start border border-muted rounded-lg hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:bg-elevated/50 transition-colors flex-row text-sm p-3.5 outline-inverted/25 has-focus-visible:outline-3 not-has-disabled:has-focus-visible:border-inverted has-focus-visible:z-[1] has-data-[state=checked]:border-inverted/50 has-data-[state=checked]:bg-elevated">
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-active="" data-slot="base" class="rounded-full ring ring-inset overflow-hidden focus-visible:outline-none size-4 ring-inverted" value="1" aria-label="1"><span data-state="checked" data-slot="indicator" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-inverted after:size-1.5"></span></button>
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if-->
         <p for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</p>
         <!--v-if-->
       </div>
-    </label><label data-slot="item" class="flex items-start border border-muted rounded-lg flex-row text-sm p-3.5 has-data-[state=checked]:border-inverted">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset overflow-hidden focus-visible:outline-3 outline-inverted/25 focus-visible:ring-inverted size-4 ring-inverted" value="2" aria-label="2">
+    </label><label data-slot="item" class="flex items-start border border-muted rounded-lg hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:bg-elevated/50 transition-colors flex-row text-sm p-3.5 outline-inverted/25 has-focus-visible:outline-3 not-has-disabled:has-focus-visible:border-inverted has-focus-visible:z-[1] has-data-[state=checked]:border-inverted/50 has-data-[state=checked]:bg-elevated">
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset overflow-hidden focus-visible:outline-none size-4 ring-inverted" value="2" aria-label="2">
           <!---->
         </button>
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if-->
         <p for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</p>
         <!--v-if-->
       </div>
-    </label><label data-slot="item" class="flex items-start border border-muted rounded-lg flex-row text-sm p-3.5 has-data-[state=checked]:border-inverted">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset overflow-hidden focus-visible:outline-3 outline-inverted/25 focus-visible:ring-inverted size-4 ring-inverted" value="3" aria-label="3">
+    </label><label data-slot="item" class="flex items-start border border-muted rounded-lg hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:bg-elevated/50 transition-colors flex-row text-sm p-3.5 outline-inverted/25 has-focus-visible:outline-3 not-has-disabled:has-focus-visible:border-inverted has-focus-visible:z-[1] has-data-[state=checked]:border-inverted/50 has-data-[state=checked]:bg-elevated">
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset overflow-hidden focus-visible:outline-none size-4 ring-inverted" value="3" aria-label="3">
           <!---->
         </button>
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if-->
         <p for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</p>
         <!--v-if-->
       </div>
@@ -804,30 +906,33 @@ exports[`RadioGroup > renders with neutral variant list correctly 1`] = `
   <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
     <!--v-if-->
     <div data-slot="item" class="flex items-start flex-row text-sm">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-active="" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-inverted/25 focus-visible:ring-inverted size-4" value="1" aria-label="1"><span data-state="checked" data-slot="indicator" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-inverted after:size-1.5"></span></button>
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-active="" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden size-4 outline-inverted/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-inverted" value="1" aria-label="1"><span data-state="checked" data-slot="indicator" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-inverted after:size-1.5"></span></button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if--><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
     </div>
     <div data-slot="item" class="flex items-start flex-row text-sm">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-inverted/25 focus-visible:ring-inverted size-4" value="2" aria-label="2">
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden size-4 outline-inverted/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-inverted" value="2" aria-label="2">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if--><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
     </div>
     <div data-slot="item" class="flex items-start flex-row text-sm">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-inverted/25 focus-visible:ring-inverted size-4" value="3" aria-label="3">
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden size-4 outline-inverted/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-inverted" value="3" aria-label="3">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if--><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
     </div>
@@ -841,30 +946,33 @@ exports[`RadioGroup > renders with neutral variant list highlight correctly 1`]
   <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
     <!--v-if-->
     <div data-slot="item" class="flex items-start flex-row text-sm">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-active="" data-slot="base" class="rounded-full ring ring-inset overflow-hidden focus-visible:outline-3 outline-inverted/25 focus-visible:ring-inverted size-4 ring-inverted" value="1" aria-label="1"><span data-state="checked" data-slot="indicator" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-inverted after:size-1.5"></span></button>
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-active="" data-slot="base" class="rounded-full ring ring-inset overflow-hidden size-4 outline-inverted/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-inverted ring-inverted" value="1" aria-label="1"><span data-state="checked" data-slot="indicator" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-inverted after:size-1.5"></span></button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if--><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
     </div>
     <div data-slot="item" class="flex items-start flex-row text-sm">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset overflow-hidden focus-visible:outline-3 outline-inverted/25 focus-visible:ring-inverted size-4 ring-inverted" value="2" aria-label="2">
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset overflow-hidden size-4 outline-inverted/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-inverted ring-inverted" value="2" aria-label="2">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if--><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
     </div>
     <div data-slot="item" class="flex items-start flex-row text-sm">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset overflow-hidden focus-visible:outline-3 outline-inverted/25 focus-visible:ring-inverted size-4 ring-inverted" value="3" aria-label="3">
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset overflow-hidden size-4 outline-inverted/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-inverted ring-inverted" value="3" aria-label="3">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if--><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
     </div>
@@ -876,31 +984,34 @@ exports[`RadioGroup > renders with neutral variant list highlight correctly 1`]
 exports[`RadioGroup > renders with neutral variant table correctly 1`] = `
 "<div id="v-0-0" data-slot="root" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="radiogroup" aria-orientation="vertical" aria-required="false">
   <fieldset data-slot="fieldset" class="flex flex-col gap-0 -space-y-px">
-    <!--v-if--><label data-slot="item" class="flex items-start border border-muted flex-row text-sm p-3.5 first-of-type:rounded-t-lg last-of-type:rounded-b-lg has-data-[state=checked]:bg-elevated has-data-[state=checked]:border-inverted/50 has-data-[state=checked]:z-[1]">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-active="" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-inverted/25 focus-visible:ring-inverted size-4" value="1" aria-label="1"><span data-state="checked" data-slot="indicator" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-inverted after:size-1.5"></span></button>
+    <!--v-if--><label data-slot="item" class="flex items-start border border-muted hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:bg-elevated/50 transition-colors flex-row text-sm hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:border-accented p-3.5 first-of-type:rounded-t-lg last-of-type:rounded-b-lg outline-inverted/25 has-focus-visible:outline-3 not-has-disabled:has-focus-visible:border-inverted has-focus-visible:z-[1] has-data-[state=checked]:bg-elevated has-data-[state=checked]:border-inverted/50 has-data-[state=checked]:z-[1]">
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-active="" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-none size-4" value="1" aria-label="1"><span data-state="checked" data-slot="indicator" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-inverted after:size-1.5"></span></button>
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if-->
         <p for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</p>
         <!--v-if-->
       </div>
-    </label><label data-slot="item" class="flex items-start border border-muted flex-row text-sm p-3.5 first-of-type:rounded-t-lg last-of-type:rounded-b-lg has-data-[state=checked]:bg-elevated has-data-[state=checked]:border-inverted/50 has-data-[state=checked]:z-[1]">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-inverted/25 focus-visible:ring-inverted size-4" value="2" aria-label="2">
+    </label><label data-slot="item" class="flex items-start border border-muted hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:bg-elevated/50 transition-colors flex-row text-sm hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:border-accented p-3.5 first-of-type:rounded-t-lg last-of-type:rounded-b-lg outline-inverted/25 has-focus-visible:outline-3 not-has-disabled:has-focus-visible:border-inverted has-focus-visible:z-[1] has-data-[state=checked]:bg-elevated has-data-[state=checked]:border-inverted/50 has-data-[state=checked]:z-[1]">
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-none size-4" value="2" aria-label="2">
           <!---->
         </button>
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if-->
         <p for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</p>
         <!--v-if-->
       </div>
-    </label><label data-slot="item" class="flex items-start border border-muted flex-row text-sm p-3.5 first-of-type:rounded-t-lg last-of-type:rounded-b-lg has-data-[state=checked]:bg-elevated has-data-[state=checked]:border-inverted/50 has-data-[state=checked]:z-[1]">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-inverted/25 focus-visible:ring-inverted size-4" value="3" aria-label="3">
+    </label><label data-slot="item" class="flex items-start border border-muted hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:bg-elevated/50 transition-colors flex-row text-sm hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:border-accented p-3.5 first-of-type:rounded-t-lg last-of-type:rounded-b-lg outline-inverted/25 has-focus-visible:outline-3 not-has-disabled:has-focus-visible:border-inverted has-focus-visible:z-[1] has-data-[state=checked]:bg-elevated has-data-[state=checked]:border-inverted/50 has-data-[state=checked]:z-[1]">
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-none size-4" value="3" aria-label="3">
           <!---->
         </button>
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if-->
         <p for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</p>
         <!--v-if-->
       </div>
@@ -913,31 +1024,34 @@ exports[`RadioGroup > renders with neutral variant table correctly 1`] = `
 exports[`RadioGroup > renders with neutral variant table highlight correctly 1`] = `
 "<div id="v-0-0" data-slot="root" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="radiogroup" aria-orientation="vertical" aria-required="false">
   <fieldset data-slot="fieldset" class="flex flex-col gap-0 -space-y-px">
-    <!--v-if--><label data-slot="item" class="flex items-start border border-muted flex-row text-sm p-3.5 first-of-type:rounded-t-lg last-of-type:rounded-b-lg has-data-[state=checked]:bg-elevated has-data-[state=checked]:border-inverted/50 has-data-[state=checked]:z-[1]">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-active="" data-slot="base" class="rounded-full ring ring-inset overflow-hidden focus-visible:outline-3 outline-inverted/25 focus-visible:ring-inverted size-4 ring-inverted" value="1" aria-label="1"><span data-state="checked" data-slot="indicator" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-inverted after:size-1.5"></span></button>
+    <!--v-if--><label data-slot="item" class="flex items-start border border-muted hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:bg-elevated/50 transition-colors flex-row text-sm p-3.5 first-of-type:rounded-t-lg last-of-type:rounded-b-lg outline-inverted/25 has-focus-visible:outline-3 not-has-disabled:has-focus-visible:border-inverted has-focus-visible:z-[1] has-data-[state=checked]:bg-elevated has-data-[state=checked]:border-inverted/50 has-data-[state=checked]:z-[1]">
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-active="" data-slot="base" class="rounded-full ring ring-inset overflow-hidden focus-visible:outline-none size-4 ring-inverted" value="1" aria-label="1"><span data-state="checked" data-slot="indicator" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-inverted after:size-1.5"></span></button>
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if-->
         <p for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</p>
         <!--v-if-->
       </div>
-    </label><label data-slot="item" class="flex items-start border border-muted flex-row text-sm p-3.5 first-of-type:rounded-t-lg last-of-type:rounded-b-lg has-data-[state=checked]:bg-elevated has-data-[state=checked]:border-inverted/50 has-data-[state=checked]:z-[1]">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset overflow-hidden focus-visible:outline-3 outline-inverted/25 focus-visible:ring-inverted size-4 ring-inverted" value="2" aria-label="2">
+    </label><label data-slot="item" class="flex items-start border border-muted hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:bg-elevated/50 transition-colors flex-row text-sm p-3.5 first-of-type:rounded-t-lg last-of-type:rounded-b-lg outline-inverted/25 has-focus-visible:outline-3 not-has-disabled:has-focus-visible:border-inverted has-focus-visible:z-[1] has-data-[state=checked]:bg-elevated has-data-[state=checked]:border-inverted/50 has-data-[state=checked]:z-[1]">
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset overflow-hidden focus-visible:outline-none size-4 ring-inverted" value="2" aria-label="2">
           <!---->
         </button>
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if-->
         <p for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</p>
         <!--v-if-->
       </div>
-    </label><label data-slot="item" class="flex items-start border border-muted flex-row text-sm p-3.5 first-of-type:rounded-t-lg last-of-type:rounded-b-lg has-data-[state=checked]:bg-elevated has-data-[state=checked]:border-inverted/50 has-data-[state=checked]:z-[1]">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset overflow-hidden focus-visible:outline-3 outline-inverted/25 focus-visible:ring-inverted size-4 ring-inverted" value="3" aria-label="3">
+    </label><label data-slot="item" class="flex items-start border border-muted hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:bg-elevated/50 transition-colors flex-row text-sm p-3.5 first-of-type:rounded-t-lg last-of-type:rounded-b-lg outline-inverted/25 has-focus-visible:outline-3 not-has-disabled:has-focus-visible:border-inverted has-focus-visible:z-[1] has-data-[state=checked]:bg-elevated has-data-[state=checked]:border-inverted/50 has-data-[state=checked]:z-[1]">
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset overflow-hidden focus-visible:outline-none size-4 ring-inverted" value="3" aria-label="3">
           <!---->
         </button>
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if-->
         <p for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</p>
         <!--v-if-->
       </div>
@@ -950,31 +1064,34 @@ exports[`RadioGroup > renders with neutral variant table highlight correctly 1`]
 exports[`RadioGroup > renders with primary variant card correctly 1`] = `
 "<div id="v-0-0" data-slot="root" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="radiogroup" aria-orientation="vertical" aria-required="false">
   <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
-    <!--v-if--><label data-slot="item" class="flex items-start border border-muted rounded-lg flex-row text-sm p-3.5 has-data-[state=checked]:border-primary">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-active="" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" value="1" aria-label="1"><span data-state="checked" data-slot="indicator" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-primary after:size-1.5"></span></button>
+    <!--v-if--><label data-slot="item" class="flex items-start border border-muted rounded-lg hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:bg-elevated/50 transition-colors flex-row text-sm hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:border-accented p-3.5 outline-primary/25 has-focus-visible:outline-3 not-has-disabled:has-focus-visible:border-primary has-focus-visible:z-[1] has-data-[state=checked]:border-primary/50 has-data-[state=checked]:bg-primary/10">
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-active="" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-none size-4" value="1" aria-label="1"><span data-state="checked" data-slot="indicator" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-primary after:size-1.5"></span></button>
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if-->
         <p for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</p>
         <!--v-if-->
       </div>
-    </label><label data-slot="item" class="flex items-start border border-muted rounded-lg flex-row text-sm p-3.5 has-data-[state=checked]:border-primary">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" value="2" aria-label="2">
+    </label><label data-slot="item" class="flex items-start border border-muted rounded-lg hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:bg-elevated/50 transition-colors flex-row text-sm hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:border-accented p-3.5 outline-primary/25 has-focus-visible:outline-3 not-has-disabled:has-focus-visible:border-primary has-focus-visible:z-[1] has-data-[state=checked]:border-primary/50 has-data-[state=checked]:bg-primary/10">
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-none size-4" value="2" aria-label="2">
           <!---->
         </button>
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if-->
         <p for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</p>
         <!--v-if-->
       </div>
-    </label><label data-slot="item" class="flex items-start border border-muted rounded-lg flex-row text-sm p-3.5 has-data-[state=checked]:border-primary">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" value="3" aria-label="3">
+    </label><label data-slot="item" class="flex items-start border border-muted rounded-lg hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:bg-elevated/50 transition-colors flex-row text-sm hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:border-accented p-3.5 outline-primary/25 has-focus-visible:outline-3 not-has-disabled:has-focus-visible:border-primary has-focus-visible:z-[1] has-data-[state=checked]:border-primary/50 has-data-[state=checked]:bg-primary/10">
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-none size-4" value="3" aria-label="3">
           <!---->
         </button>
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if-->
         <p for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</p>
         <!--v-if-->
       </div>
@@ -987,31 +1104,34 @@ exports[`RadioGroup > renders with primary variant card correctly 1`] = `
 exports[`RadioGroup > renders with primary variant card highlight correctly 1`] = `
 "<div id="v-0-0" data-slot="root" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="radiogroup" aria-orientation="vertical" aria-required="false">
   <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
-    <!--v-if--><label data-slot="item" class="flex items-start border border-muted rounded-lg flex-row text-sm p-3.5 has-data-[state=checked]:border-primary">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-active="" data-slot="base" class="rounded-full ring ring-inset overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4 ring-primary" value="1" aria-label="1"><span data-state="checked" data-slot="indicator" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-primary after:size-1.5"></span></button>
+    <!--v-if--><label data-slot="item" class="flex items-start border border-muted rounded-lg hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:bg-elevated/50 transition-colors flex-row text-sm p-3.5 outline-primary/25 has-focus-visible:outline-3 not-has-disabled:has-focus-visible:border-primary has-focus-visible:z-[1] has-data-[state=checked]:border-primary/50 has-data-[state=checked]:bg-primary/10">
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-active="" data-slot="base" class="rounded-full ring ring-inset overflow-hidden focus-visible:outline-none size-4 ring-primary" value="1" aria-label="1"><span data-state="checked" data-slot="indicator" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-primary after:size-1.5"></span></button>
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if-->
         <p for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</p>
         <!--v-if-->
       </div>
-    </label><label data-slot="item" class="flex items-start border border-muted rounded-lg flex-row text-sm p-3.5 has-data-[state=checked]:border-primary">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4 ring-primary" value="2" aria-label="2">
+    </label><label data-slot="item" class="flex items-start border border-muted rounded-lg hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:bg-elevated/50 transition-colors flex-row text-sm p-3.5 outline-primary/25 has-focus-visible:outline-3 not-has-disabled:has-focus-visible:border-primary has-focus-visible:z-[1] has-data-[state=checked]:border-primary/50 has-data-[state=checked]:bg-primary/10">
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset overflow-hidden focus-visible:outline-none size-4 ring-primary" value="2" aria-label="2">
           <!---->
         </button>
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if-->
         <p for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</p>
         <!--v-if-->
       </div>
-    </label><label data-slot="item" class="flex items-start border border-muted rounded-lg flex-row text-sm p-3.5 has-data-[state=checked]:border-primary">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4 ring-primary" value="3" aria-label="3">
+    </label><label data-slot="item" class="flex items-start border border-muted rounded-lg hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:bg-elevated/50 transition-colors flex-row text-sm p-3.5 outline-primary/25 has-focus-visible:outline-3 not-has-disabled:has-focus-visible:border-primary has-focus-visible:z-[1] has-data-[state=checked]:border-primary/50 has-data-[state=checked]:bg-primary/10">
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset overflow-hidden focus-visible:outline-none size-4 ring-primary" value="3" aria-label="3">
           <!---->
         </button>
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if-->
         <p for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</p>
         <!--v-if-->
       </div>
@@ -1026,30 +1146,33 @@ exports[`RadioGroup > renders with primary variant list correctly 1`] = `
   <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
     <!--v-if-->
     <div data-slot="item" class="flex items-start flex-row text-sm">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-active="" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" value="1" aria-label="1"><span data-state="checked" data-slot="indicator" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-primary after:size-1.5"></span></button>
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-active="" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" value="1" aria-label="1"><span data-state="checked" data-slot="indicator" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-primary after:size-1.5"></span></button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if--><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
     </div>
     <div data-slot="item" class="flex items-start flex-row text-sm">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" value="2" aria-label="2">
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" value="2" aria-label="2">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if--><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
     </div>
     <div data-slot="item" class="flex items-start flex-row text-sm">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" value="3" aria-label="3">
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" value="3" aria-label="3">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if--><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
     </div>
@@ -1063,30 +1186,33 @@ exports[`RadioGroup > renders with primary variant list highlight correctly 1`]
   <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
     <!--v-if-->
     <div data-slot="item" class="flex items-start flex-row text-sm">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-active="" data-slot="base" class="rounded-full ring ring-inset overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4 ring-primary" value="1" aria-label="1"><span data-state="checked" data-slot="indicator" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-primary after:size-1.5"></span></button>
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-active="" data-slot="base" class="rounded-full ring ring-inset overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary ring-primary" value="1" aria-label="1"><span data-state="checked" data-slot="indicator" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-primary after:size-1.5"></span></button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if--><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
     </div>
     <div data-slot="item" class="flex items-start flex-row text-sm">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4 ring-primary" value="2" aria-label="2">
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary ring-primary" value="2" aria-label="2">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if--><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
     </div>
     <div data-slot="item" class="flex items-start flex-row text-sm">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4 ring-primary" value="3" aria-label="3">
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary ring-primary" value="3" aria-label="3">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if--><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
     </div>
@@ -1098,31 +1224,34 @@ exports[`RadioGroup > renders with primary variant list highlight correctly 1`]
 exports[`RadioGroup > renders with primary variant table correctly 1`] = `
 "<div id="v-0-0" data-slot="root" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="radiogroup" aria-orientation="vertical" aria-required="false">
   <fieldset data-slot="fieldset" class="flex flex-col gap-0 -space-y-px">
-    <!--v-if--><label data-slot="item" class="flex items-start border border-muted flex-row text-sm p-3.5 first-of-type:rounded-t-lg last-of-type:rounded-b-lg has-data-[state=checked]:bg-primary/10 has-data-[state=checked]:border-primary/50 has-data-[state=checked]:z-[1]">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-active="" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" value="1" aria-label="1"><span data-state="checked" data-slot="indicator" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-primary after:size-1.5"></span></button>
+    <!--v-if--><label data-slot="item" class="flex items-start border border-muted hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:bg-elevated/50 transition-colors flex-row text-sm hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:border-accented p-3.5 first-of-type:rounded-t-lg last-of-type:rounded-b-lg outline-primary/25 has-focus-visible:outline-3 not-has-disabled:has-focus-visible:border-primary has-focus-visible:z-[1] has-data-[state=checked]:bg-primary/10 has-data-[state=checked]:border-primary/50 has-data-[state=checked]:z-[1]">
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-active="" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-none size-4" value="1" aria-label="1"><span data-state="checked" data-slot="indicator" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-primary after:size-1.5"></span></button>
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if-->
         <p for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</p>
         <!--v-if-->
       </div>
-    </label><label data-slot="item" class="flex items-start border border-muted flex-row text-sm p-3.5 first-of-type:rounded-t-lg last-of-type:rounded-b-lg has-data-[state=checked]:bg-primary/10 has-data-[state=checked]:border-primary/50 has-data-[state=checked]:z-[1]">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" value="2" aria-label="2">
+    </label><label data-slot="item" class="flex items-start border border-muted hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:bg-elevated/50 transition-colors flex-row text-sm hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:border-accented p-3.5 first-of-type:rounded-t-lg last-of-type:rounded-b-lg outline-primary/25 has-focus-visible:outline-3 not-has-disabled:has-focus-visible:border-primary has-focus-visible:z-[1] has-data-[state=checked]:bg-primary/10 has-data-[state=checked]:border-primary/50 has-data-[state=checked]:z-[1]">
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-none size-4" value="2" aria-label="2">
           <!---->
         </button>
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if-->
         <p for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</p>
         <!--v-if-->
       </div>
-    </label><label data-slot="item" class="flex items-start border border-muted flex-row text-sm p-3.5 first-of-type:rounded-t-lg last-of-type:rounded-b-lg has-data-[state=checked]:bg-primary/10 has-data-[state=checked]:border-primary/50 has-data-[state=checked]:z-[1]">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" value="3" aria-label="3">
+    </label><label data-slot="item" class="flex items-start border border-muted hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:bg-elevated/50 transition-colors flex-row text-sm hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:border-accented p-3.5 first-of-type:rounded-t-lg last-of-type:rounded-b-lg outline-primary/25 has-focus-visible:outline-3 not-has-disabled:has-focus-visible:border-primary has-focus-visible:z-[1] has-data-[state=checked]:bg-primary/10 has-data-[state=checked]:border-primary/50 has-data-[state=checked]:z-[1]">
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-none size-4" value="3" aria-label="3">
           <!---->
         </button>
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if-->
         <p for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</p>
         <!--v-if-->
       </div>
@@ -1135,31 +1264,34 @@ exports[`RadioGroup > renders with primary variant table correctly 1`] = `
 exports[`RadioGroup > renders with primary variant table highlight correctly 1`] = `
 "<div id="v-0-0" data-slot="root" class="relative" tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="radiogroup" aria-orientation="vertical" aria-required="false">
   <fieldset data-slot="fieldset" class="flex flex-col gap-0 -space-y-px">
-    <!--v-if--><label data-slot="item" class="flex items-start border border-muted flex-row text-sm p-3.5 first-of-type:rounded-t-lg last-of-type:rounded-b-lg has-data-[state=checked]:bg-primary/10 has-data-[state=checked]:border-primary/50 has-data-[state=checked]:z-[1]">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-active="" data-slot="base" class="rounded-full ring ring-inset overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4 ring-primary" value="1" aria-label="1"><span data-state="checked" data-slot="indicator" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-primary after:size-1.5"></span></button>
+    <!--v-if--><label data-slot="item" class="flex items-start border border-muted hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:bg-elevated/50 transition-colors flex-row text-sm p-3.5 first-of-type:rounded-t-lg last-of-type:rounded-b-lg outline-primary/25 has-focus-visible:outline-3 not-has-disabled:has-focus-visible:border-primary has-focus-visible:z-[1] has-data-[state=checked]:bg-primary/10 has-data-[state=checked]:border-primary/50 has-data-[state=checked]:z-[1]">
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-active="" data-slot="base" class="rounded-full ring ring-inset overflow-hidden focus-visible:outline-none size-4 ring-primary" value="1" aria-label="1"><span data-state="checked" data-slot="indicator" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-primary after:size-1.5"></span></button>
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if-->
         <p for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</p>
         <!--v-if-->
       </div>
-    </label><label data-slot="item" class="flex items-start border border-muted flex-row text-sm p-3.5 first-of-type:rounded-t-lg last-of-type:rounded-b-lg has-data-[state=checked]:bg-primary/10 has-data-[state=checked]:border-primary/50 has-data-[state=checked]:z-[1]">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4 ring-primary" value="2" aria-label="2">
+    </label><label data-slot="item" class="flex items-start border border-muted hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:bg-elevated/50 transition-colors flex-row text-sm p-3.5 first-of-type:rounded-t-lg last-of-type:rounded-b-lg outline-primary/25 has-focus-visible:outline-3 not-has-disabled:has-focus-visible:border-primary has-focus-visible:z-[1] has-data-[state=checked]:bg-primary/10 has-data-[state=checked]:border-primary/50 has-data-[state=checked]:z-[1]">
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset overflow-hidden focus-visible:outline-none size-4 ring-primary" value="2" aria-label="2">
           <!---->
         </button>
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if-->
         <p for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</p>
         <!--v-if-->
       </div>
-    </label><label data-slot="item" class="flex items-start border border-muted flex-row text-sm p-3.5 first-of-type:rounded-t-lg last-of-type:rounded-b-lg has-data-[state=checked]:bg-primary/10 has-data-[state=checked]:border-primary/50 has-data-[state=checked]:z-[1]">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4 ring-primary" value="3" aria-label="3">
+    </label><label data-slot="item" class="flex items-start border border-muted hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:bg-elevated/50 transition-colors flex-row text-sm p-3.5 first-of-type:rounded-t-lg last-of-type:rounded-b-lg outline-primary/25 has-focus-visible:outline-3 not-has-disabled:has-focus-visible:border-primary has-focus-visible:z-[1] has-data-[state=checked]:bg-primary/10 has-data-[state=checked]:border-primary/50 has-data-[state=checked]:z-[1]">
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset overflow-hidden focus-visible:outline-none size-4 ring-primary" value="3" aria-label="3">
           <!---->
         </button>
         <!--v-if-->
       </div>
       <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if-->
         <p for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</p>
         <!--v-if-->
       </div>
@@ -1174,32 +1306,35 @@ exports[`RadioGroup > renders with required correctly 1`] = `
   <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
     <legend data-slot="legend" class="mb-1 block font-medium text-default text-sm after:content-['*'] after:ms-0.5 after:text-error">Legend</legend>
     <div data-slot="item" class="flex items-start flex-row text-sm">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="true" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" value="1" aria-label="1">
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="true" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" value="1" aria-label="1">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if--><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
     </div>
     <div data-slot="item" class="flex items-start flex-row text-sm">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="true" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" value="2" aria-label="2">
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="true" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" value="2" aria-label="2">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if--><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
     </div>
     <div data-slot="item" class="flex items-start flex-row text-sm">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="true" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" value="3" aria-label="3">
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="true" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" value="3" aria-label="3">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if--><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
     </div>
@@ -1213,30 +1348,33 @@ exports[`RadioGroup > renders with size lg correctly 1`] = `
   <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
     <!--v-if-->
     <div data-slot="item" class="flex items-start flex-row text-sm">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-active="" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4.5" value="1" aria-label="1"><span data-state="checked" data-slot="indicator" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-primary after:size-1.5"></span></button>
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-active="" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden size-4.5 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" value="1" aria-label="1"><span data-state="checked" data-slot="indicator" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-primary after:size-1.5"></span></button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if--><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
     </div>
     <div data-slot="item" class="flex items-start flex-row text-sm">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4.5" value="2" aria-label="2">
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden size-4.5 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" value="2" aria-label="2">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if--><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
     </div>
     <div data-slot="item" class="flex items-start flex-row text-sm">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4.5" value="3" aria-label="3">
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden size-4.5 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" value="3" aria-label="3">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if--><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
     </div>
@@ -1250,30 +1388,33 @@ exports[`RadioGroup > renders with size md correctly 1`] = `
   <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
     <!--v-if-->
     <div data-slot="item" class="flex items-start flex-row text-sm">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-active="" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" value="1" aria-label="1"><span data-state="checked" data-slot="indicator" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-primary after:size-1.5"></span></button>
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-active="" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" value="1" aria-label="1"><span data-state="checked" data-slot="indicator" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-primary after:size-1.5"></span></button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if--><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
     </div>
     <div data-slot="item" class="flex items-start flex-row text-sm">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" value="2" aria-label="2">
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" value="2" aria-label="2">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if--><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
     </div>
     <div data-slot="item" class="flex items-start flex-row text-sm">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" value="3" aria-label="3">
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" value="3" aria-label="3">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if--><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
     </div>
@@ -1287,30 +1428,33 @@ exports[`RadioGroup > renders with size sm correctly 1`] = `
   <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-0.5">
     <!--v-if-->
     <div data-slot="item" class="flex items-start flex-row text-xs">
-      <div data-slot="container" class="flex items-center h-4"><button id="v-0-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-active="" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-3.5" value="1" aria-label="1"><span data-state="checked" data-slot="indicator" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-primary after:size-1"></span></button>
+      <div data-slot="container" class="flex items-center h-4"><button id="v-0-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-active="" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden size-3.5 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" value="1" aria-label="1"><span data-state="checked" data-slot="indicator" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-primary after:size-1"></span></button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if--><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
     </div>
     <div data-slot="item" class="flex items-start flex-row text-xs">
-      <div data-slot="container" class="flex items-center h-4"><button id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-3.5" value="2" aria-label="2">
+      <div data-slot="container" class="flex items-center h-4"><button id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden size-3.5 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" value="2" aria-label="2">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if--><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
     </div>
     <div data-slot="item" class="flex items-start flex-row text-xs">
-      <div data-slot="container" class="flex items-center h-4"><button id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-3.5" value="3" aria-label="3">
+      <div data-slot="container" class="flex items-center h-4"><button id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden size-3.5 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" value="3" aria-label="3">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if--><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
     </div>
@@ -1324,30 +1468,33 @@ exports[`RadioGroup > renders with size xl correctly 1`] = `
   <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1.5">
     <!--v-if-->
     <div data-slot="item" class="flex items-start flex-row text-base">
-      <div data-slot="container" class="flex items-center h-6"><button id="v-0-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-active="" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-5" value="1" aria-label="1"><span data-state="checked" data-slot="indicator" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-primary after:size-2"></span></button>
+      <div data-slot="container" class="flex items-center h-6"><button id="v-0-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-active="" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden size-5 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" value="1" aria-label="1"><span data-state="checked" data-slot="indicator" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-primary after:size-2"></span></button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if--><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
     </div>
     <div data-slot="item" class="flex items-start flex-row text-base">
-      <div data-slot="container" class="flex items-center h-6"><button id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-5" value="2" aria-label="2">
+      <div data-slot="container" class="flex items-center h-6"><button id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden size-5 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" value="2" aria-label="2">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if--><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
     </div>
     <div data-slot="item" class="flex items-start flex-row text-base">
-      <div data-slot="container" class="flex items-center h-6"><button id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-5" value="3" aria-label="3">
+      <div data-slot="container" class="flex items-center h-6"><button id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden size-5 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" value="3" aria-label="3">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if--><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
     </div>
@@ -1361,30 +1508,33 @@ exports[`RadioGroup > renders with size xs correctly 1`] = `
   <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-0.5">
     <!--v-if-->
     <div data-slot="item" class="flex items-start flex-row text-xs">
-      <div data-slot="container" class="flex items-center h-4"><button id="v-0-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-active="" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-3" value="1" aria-label="1"><span data-state="checked" data-slot="indicator" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-primary after:size-1"></span></button>
+      <div data-slot="container" class="flex items-center h-4"><button id="v-0-0:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-active="" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden size-3 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" value="1" aria-label="1"><span data-state="checked" data-slot="indicator" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-primary after:size-1"></span></button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if--><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
     </div>
     <div data-slot="item" class="flex items-start flex-row text-xs">
-      <div data-slot="container" class="flex items-center h-4"><button id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-3" value="2" aria-label="2">
+      <div data-slot="container" class="flex items-center h-4"><button id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden size-3 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" value="2" aria-label="2">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if--><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
     </div>
     <div data-slot="item" class="flex items-start flex-row text-xs">
-      <div data-slot="container" class="flex items-center h-4"><button id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-3" value="3" aria-label="3">
+      <div data-slot="container" class="flex items-center h-4"><button id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden size-3 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" value="3" aria-label="3">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if--><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
     </div>
@@ -1398,32 +1548,35 @@ exports[`RadioGroup > renders with ui correctly 1`] = `
   <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
     <!--v-if-->
     <div data-slot="item" class="flex items-start flex-row text-sm">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" value="1" aria-label="1">
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" value="1" aria-label="1">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-4"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-4">
+        <!--v-if--><label for="v-0-0:1" data-slot="label" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
     </div>
     <div data-slot="item" class="flex items-start flex-row text-sm">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" value="2" aria-label="2">
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" value="2" aria-label="2">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-4"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-4">
+        <!--v-if--><label for="v-0-0:2" data-slot="label" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
     </div>
     <div data-slot="item" class="flex items-start flex-row text-sm">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" value="3" aria-label="3">
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" value="3" aria-label="3">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-4"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-4">
+        <!--v-if--><label for="v-0-0:3" data-slot="label" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
     </div>
@@ -1437,30 +1590,33 @@ exports[`RadioGroup > renders with valueKey correctly 1`] = `
   <fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
     <!--v-if-->
     <div data-slot="item" class="flex items-start flex-row text-sm">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:Option 1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-active="" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" value="Option 1" aria-label="Option 1"><span data-state="checked" data-slot="indicator" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-primary after:size-1.5"></span></button>
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:Option 1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-active="" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" value="Option 1" aria-label="Option 1"><span data-state="checked" data-slot="indicator" class="flex items-center justify-center size-full after:bg-default after:rounded-full bg-primary after:size-1.5"></span></button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:Option 1" data-slot="label" class="block font-medium text-default">Option 1</label>
+      <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if--><label for="v-0-0:Option 1" data-slot="label" class="block font-medium text-default">Option 1</label>
         <!--v-if-->
       </div>
     </div>
     <div data-slot="item" class="flex items-start flex-row text-sm">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:Option 2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" value="Option 2" aria-label="Option 2">
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:Option 2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" value="Option 2" aria-label="Option 2">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:Option 2" data-slot="label" class="block font-medium text-default">Option 2</label>
+      <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if--><label for="v-0-0:Option 2" data-slot="label" class="block font-medium text-default">Option 2</label>
         <!--v-if-->
       </div>
     </div>
     <div data-slot="item" class="flex items-start flex-row text-sm">
-      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:Option 3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" value="Option 3" aria-label="Option 3">
+      <div data-slot="container" class="flex items-center h-5"><button id="v-0-0:Option 3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" data-reka-collection-item="" tabindex="-1" data-orientation="vertical" data-slot="base" class="rounded-full ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" value="Option 3" aria-label="Option 3">
           <!---->
         </button>
         <!--v-if-->
       </div>
-      <div data-slot="wrapper" class="w-full ms-2"><label for="v-0-0:Option 3" data-slot="label" class="block font-medium text-default">Option 3</label>
+      <div data-slot="wrapper" class="w-full ms-2">
+        <!--v-if--><label for="v-0-0:Option 3" data-slot="label" class="block font-medium text-default">Option 3</label>
         <!--v-if-->
       </div>
     </div>
diff --git a/test/components/__snapshots__/Table-vue.spec.ts.snap b/test/components/__snapshots__/Table-vue.spec.ts.snap
index f8d1e77b7a..0ff5c4d983 100644
--- a/test/components/__snapshots__/Table-vue.spec.ts.snap
+++ b/test/components/__snapshots__/Table-vue.spec.ts.snap
@@ -392,12 +392,13 @@ exports[`Table > renders with columns correctly 1`] = `
       <tr data-slot="tr" class="data-[selected=true]:bg-elevated/50">
         <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-start font-semibold [&amp;:has([role=checkbox])]:pe-0">
           <div data-slot="root" class="relative flex items-start flex-row">
-            <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
+            <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
                 <!---->
               </button>
               <!--v-if-->
             </div>
-            <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0" data-slot="label" class="block font-medium text-default">Select all</label>
+            <div data-slot="wrapper" class="w-full ms-2 text-sm">
+              <!--v-if--><label for="v-0" data-slot="label" class="block font-medium text-default">Select all</label>
               <!--v-if-->
             </div>
           </div>
@@ -419,7 +420,7 @@ exports[`Table > renders with columns correctly 1`] = `
       <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
         <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">
           <div data-slot="root" class="relative flex items-start flex-row">
-            <div data-slot="container" class="flex items-center h-5"><button aria-label="Select row" data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-1" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
+            <div data-slot="container" class="flex items-center h-5"><button aria-label="Select row" data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-1" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
                 <!---->
               </button>
               <!--v-if-->
@@ -445,7 +446,7 @@ exports[`Table > renders with columns correctly 1`] = `
       <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
         <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">
           <div data-slot="root" class="relative flex items-start flex-row">
-            <div data-slot="container" class="flex items-center h-5"><button aria-label="Select row" data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
+            <div data-slot="container" class="flex items-center h-5"><button aria-label="Select row" data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
                 <!---->
               </button>
               <!--v-if-->
@@ -471,7 +472,7 @@ exports[`Table > renders with columns correctly 1`] = `
       <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
         <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">
           <div data-slot="root" class="relative flex items-start flex-row">
-            <div data-slot="container" class="flex items-center h-5"><button aria-label="Select row" data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-5" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
+            <div data-slot="container" class="flex items-center h-5"><button aria-label="Select row" data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-5" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
                 <!---->
               </button>
               <!--v-if-->
@@ -497,7 +498,7 @@ exports[`Table > renders with columns correctly 1`] = `
       <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
         <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">
           <div data-slot="root" class="relative flex items-start flex-row">
-            <div data-slot="container" class="flex items-center h-5"><button aria-label="Select row" data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-7" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
+            <div data-slot="container" class="flex items-center h-5"><button aria-label="Select row" data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-7" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
                 <!---->
               </button>
               <!--v-if-->
@@ -523,7 +524,7 @@ exports[`Table > renders with columns correctly 1`] = `
       <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
         <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">
           <div data-slot="root" class="relative flex items-start flex-row">
-            <div data-slot="container" class="flex items-center h-5"><button aria-label="Select row" data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-9" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
+            <div data-slot="container" class="flex items-center h-5"><button aria-label="Select row" data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-9" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
                 <!---->
               </button>
               <!--v-if-->
@@ -656,12 +657,13 @@ exports[`Table > renders with empty slot correctly 1`] = `
       <tr data-slot="tr" class="data-[selected=true]:bg-elevated/50">
         <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-start font-semibold [&amp;:has([role=checkbox])]:pe-0">
           <div data-slot="root" class="relative flex items-start flex-row">
-            <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
+            <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
                 <!---->
               </button>
               <!--v-if-->
             </div>
-            <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0" data-slot="label" class="block font-medium text-default">Select all</label>
+            <div data-slot="wrapper" class="w-full ms-2 text-sm">
+              <!--v-if--><label for="v-0" data-slot="label" class="block font-medium text-default">Select all</label>
               <!--v-if-->
             </div>
           </div>
@@ -1490,12 +1492,13 @@ exports[`Table > renders with loading slot correctly 1`] = `
       <tr data-slot="tr" class="data-[selected=true]:bg-elevated/50">
         <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-start font-semibold [&amp;:has([role=checkbox])]:pe-0">
           <div data-slot="root" class="relative flex items-start flex-row">
-            <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
+            <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
                 <!---->
               </button>
               <!--v-if-->
             </div>
-            <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0" data-slot="label" class="block font-medium text-default">Select all</label>
+            <div data-slot="wrapper" class="w-full ms-2 text-sm">
+              <!--v-if--><label for="v-0" data-slot="label" class="block font-medium text-default">Select all</label>
               <!--v-if-->
             </div>
           </div>
@@ -1554,12 +1557,13 @@ exports[`Table > renders with meta field on columns correctly 1`] = `
       <tr data-slot="tr" class="data-[selected=true]:bg-elevated/50">
         <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-start font-semibold [&amp;:has([role=checkbox])]:pe-0 custom-heading-class" style="background-color: black;">
           <div data-slot="root" class="relative flex items-start flex-row">
-            <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
+            <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
                 <!---->
               </button>
               <!--v-if-->
             </div>
-            <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0" data-slot="label" class="block font-medium text-default">Select all</label>
+            <div data-slot="wrapper" class="w-full ms-2 text-sm">
+              <!--v-if--><label for="v-0" data-slot="label" class="block font-medium text-default">Select all</label>
               <!--v-if-->
             </div>
           </div>
@@ -1581,7 +1585,7 @@ exports[`Table > renders with meta field on columns correctly 1`] = `
       <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
         <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;">
           <div data-slot="root" class="relative flex items-start flex-row">
-            <div data-slot="container" class="flex items-center h-5"><button aria-label="Select row" data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-1" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
+            <div data-slot="container" class="flex items-center h-5"><button aria-label="Select row" data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-1" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
                 <!---->
               </button>
               <!--v-if-->
@@ -1607,7 +1611,7 @@ exports[`Table > renders with meta field on columns correctly 1`] = `
       <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
         <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;">
           <div data-slot="root" class="relative flex items-start flex-row">
-            <div data-slot="container" class="flex items-center h-5"><button aria-label="Select row" data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
+            <div data-slot="container" class="flex items-center h-5"><button aria-label="Select row" data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
                 <!---->
               </button>
               <!--v-if-->
@@ -1633,7 +1637,7 @@ exports[`Table > renders with meta field on columns correctly 1`] = `
       <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
         <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;">
           <div data-slot="root" class="relative flex items-start flex-row">
-            <div data-slot="container" class="flex items-center h-5"><button aria-label="Select row" data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-5" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
+            <div data-slot="container" class="flex items-center h-5"><button aria-label="Select row" data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-5" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
                 <!---->
               </button>
               <!--v-if-->
@@ -1659,7 +1663,7 @@ exports[`Table > renders with meta field on columns correctly 1`] = `
       <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
         <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;">
           <div data-slot="root" class="relative flex items-start flex-row">
-            <div data-slot="container" class="flex items-center h-5"><button aria-label="Select row" data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-7" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
+            <div data-slot="container" class="flex items-center h-5"><button aria-label="Select row" data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-7" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
                 <!---->
               </button>
               <!--v-if-->
@@ -1685,7 +1689,7 @@ exports[`Table > renders with meta field on columns correctly 1`] = `
       <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
         <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;">
           <div data-slot="root" class="relative flex items-start flex-row">
-            <div data-slot="container" class="flex items-center h-5"><button aria-label="Select row" data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-9" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
+            <div data-slot="container" class="flex items-center h-5"><button aria-label="Select row" data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-9" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
                 <!---->
               </button>
               <!--v-if-->
@@ -1987,12 +1991,13 @@ exports[`Table > renders with virtualize and sticky correctly 1`] = `
       <tr data-slot="tr" class="data-[selected=true]:bg-elevated/50">
         <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-start font-semibold [&amp;:has([role=checkbox])]:pe-0">
           <div data-slot="root" class="relative flex items-start flex-row">
-            <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
+            <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
                 <!---->
               </button>
               <!--v-if-->
             </div>
-            <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0" data-slot="label" class="block font-medium text-default">Select all</label>
+            <div data-slot="wrapper" class="w-full ms-2 text-sm">
+              <!--v-if--><label for="v-0" data-slot="label" class="block font-medium text-default">Select all</label>
               <!--v-if-->
             </div>
           </div>
diff --git a/test/components/__snapshots__/Table.spec.ts.snap b/test/components/__snapshots__/Table.spec.ts.snap
index c73d10216b..4d113e537c 100644
--- a/test/components/__snapshots__/Table.spec.ts.snap
+++ b/test/components/__snapshots__/Table.spec.ts.snap
@@ -392,12 +392,13 @@ exports[`Table > renders with columns correctly 1`] = `
       <tr data-slot="tr" class="data-[selected=true]:bg-elevated/50">
         <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-start font-semibold [&amp;:has([role=checkbox])]:pe-0">
           <div data-slot="root" class="relative flex items-start flex-row">
-            <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
+            <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
                 <!---->
               </button>
               <!--v-if-->
             </div>
-            <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0-0" data-slot="label" class="block font-medium text-default">Select all</label>
+            <div data-slot="wrapper" class="w-full ms-2 text-sm">
+              <!--v-if--><label for="v-0-0-0" data-slot="label" class="block font-medium text-default">Select all</label>
               <!--v-if-->
             </div>
           </div>
@@ -419,7 +420,7 @@ exports[`Table > renders with columns correctly 1`] = `
       <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
         <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">
           <div data-slot="root" class="relative flex items-start flex-row">
-            <div data-slot="container" class="flex items-center h-5"><button aria-label="Select row" data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0-0-1" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
+            <div data-slot="container" class="flex items-center h-5"><button aria-label="Select row" data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0-0-1" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
                 <!---->
               </button>
               <!--v-if-->
@@ -445,7 +446,7 @@ exports[`Table > renders with columns correctly 1`] = `
       <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
         <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">
           <div data-slot="root" class="relative flex items-start flex-row">
-            <div data-slot="container" class="flex items-center h-5"><button aria-label="Select row" data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0-0-3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
+            <div data-slot="container" class="flex items-center h-5"><button aria-label="Select row" data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0-0-3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
                 <!---->
               </button>
               <!--v-if-->
@@ -471,7 +472,7 @@ exports[`Table > renders with columns correctly 1`] = `
       <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
         <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">
           <div data-slot="root" class="relative flex items-start flex-row">
-            <div data-slot="container" class="flex items-center h-5"><button aria-label="Select row" data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0-0-5" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
+            <div data-slot="container" class="flex items-center h-5"><button aria-label="Select row" data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0-0-5" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
                 <!---->
               </button>
               <!--v-if-->
@@ -497,7 +498,7 @@ exports[`Table > renders with columns correctly 1`] = `
       <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
         <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">
           <div data-slot="root" class="relative flex items-start flex-row">
-            <div data-slot="container" class="flex items-center h-5"><button aria-label="Select row" data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0-0-7" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
+            <div data-slot="container" class="flex items-center h-5"><button aria-label="Select row" data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0-0-7" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
                 <!---->
               </button>
               <!--v-if-->
@@ -523,7 +524,7 @@ exports[`Table > renders with columns correctly 1`] = `
       <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
         <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">
           <div data-slot="root" class="relative flex items-start flex-row">
-            <div data-slot="container" class="flex items-center h-5"><button aria-label="Select row" data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0-0-9" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
+            <div data-slot="container" class="flex items-center h-5"><button aria-label="Select row" data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0-0-9" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
                 <!---->
               </button>
               <!--v-if-->
@@ -656,12 +657,13 @@ exports[`Table > renders with empty slot correctly 1`] = `
       <tr data-slot="tr" class="data-[selected=true]:bg-elevated/50">
         <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-start font-semibold [&amp;:has([role=checkbox])]:pe-0">
           <div data-slot="root" class="relative flex items-start flex-row">
-            <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
+            <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
                 <!---->
               </button>
               <!--v-if-->
             </div>
-            <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0-0" data-slot="label" class="block font-medium text-default">Select all</label>
+            <div data-slot="wrapper" class="w-full ms-2 text-sm">
+              <!--v-if--><label for="v-0-0-0" data-slot="label" class="block font-medium text-default">Select all</label>
               <!--v-if-->
             </div>
           </div>
@@ -1490,12 +1492,13 @@ exports[`Table > renders with loading slot correctly 1`] = `
       <tr data-slot="tr" class="data-[selected=true]:bg-elevated/50">
         <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-start font-semibold [&amp;:has([role=checkbox])]:pe-0">
           <div data-slot="root" class="relative flex items-start flex-row">
-            <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
+            <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
                 <!---->
               </button>
               <!--v-if-->
             </div>
-            <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0-0" data-slot="label" class="block font-medium text-default">Select all</label>
+            <div data-slot="wrapper" class="w-full ms-2 text-sm">
+              <!--v-if--><label for="v-0-0-0" data-slot="label" class="block font-medium text-default">Select all</label>
               <!--v-if-->
             </div>
           </div>
@@ -1554,12 +1557,13 @@ exports[`Table > renders with meta field on columns correctly 1`] = `
       <tr data-slot="tr" class="data-[selected=true]:bg-elevated/50">
         <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-start font-semibold [&amp;:has([role=checkbox])]:pe-0 custom-heading-class" style="background-color: black;">
           <div data-slot="root" class="relative flex items-start flex-row">
-            <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
+            <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
                 <!---->
               </button>
               <!--v-if-->
             </div>
-            <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0-0" data-slot="label" class="block font-medium text-default">Select all</label>
+            <div data-slot="wrapper" class="w-full ms-2 text-sm">
+              <!--v-if--><label for="v-0-0-0" data-slot="label" class="block font-medium text-default">Select all</label>
               <!--v-if-->
             </div>
           </div>
@@ -1581,7 +1585,7 @@ exports[`Table > renders with meta field on columns correctly 1`] = `
       <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
         <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;">
           <div data-slot="root" class="relative flex items-start flex-row">
-            <div data-slot="container" class="flex items-center h-5"><button aria-label="Select row" data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0-0-1" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
+            <div data-slot="container" class="flex items-center h-5"><button aria-label="Select row" data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0-0-1" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
                 <!---->
               </button>
               <!--v-if-->
@@ -1607,7 +1611,7 @@ exports[`Table > renders with meta field on columns correctly 1`] = `
       <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
         <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;">
           <div data-slot="root" class="relative flex items-start flex-row">
-            <div data-slot="container" class="flex items-center h-5"><button aria-label="Select row" data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0-0-3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
+            <div data-slot="container" class="flex items-center h-5"><button aria-label="Select row" data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0-0-3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
                 <!---->
               </button>
               <!--v-if-->
@@ -1633,7 +1637,7 @@ exports[`Table > renders with meta field on columns correctly 1`] = `
       <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
         <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;">
           <div data-slot="root" class="relative flex items-start flex-row">
-            <div data-slot="container" class="flex items-center h-5"><button aria-label="Select row" data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0-0-5" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
+            <div data-slot="container" class="flex items-center h-5"><button aria-label="Select row" data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0-0-5" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
                 <!---->
               </button>
               <!--v-if-->
@@ -1659,7 +1663,7 @@ exports[`Table > renders with meta field on columns correctly 1`] = `
       <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
         <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;">
           <div data-slot="root" class="relative flex items-start flex-row">
-            <div data-slot="container" class="flex items-center h-5"><button aria-label="Select row" data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0-0-7" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
+            <div data-slot="container" class="flex items-center h-5"><button aria-label="Select row" data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0-0-7" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
                 <!---->
               </button>
               <!--v-if-->
@@ -1685,7 +1689,7 @@ exports[`Table > renders with meta field on columns correctly 1`] = `
       <tr data-selected="false" data-selectable="false" data-expanded="false" data-slot="tr" class="data-[selected=true]:bg-elevated/50">
         <td data-pinned="false" data-slot="td" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0 custom-cell-class" style="background-color: lightgray;">
           <div data-slot="root" class="relative flex items-start flex-row">
-            <div data-slot="container" class="flex items-center h-5"><button aria-label="Select row" data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0-0-9" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
+            <div data-slot="container" class="flex items-center h-5"><button aria-label="Select row" data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0-0-9" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
                 <!---->
               </button>
               <!--v-if-->
@@ -1987,12 +1991,13 @@ exports[`Table > renders with virtualize and sticky correctly 1`] = `
       <tr data-slot="tr" class="data-[selected=true]:bg-elevated/50">
         <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-start font-semibold [&amp;:has([role=checkbox])]:pe-0">
           <div data-slot="root" class="relative flex items-start flex-row">
-            <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-3 outline-primary/25 focus-visible:ring-primary size-4" id="v-0-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
+            <div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden size-4 outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary" id="v-0-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
                 <!---->
               </button>
               <!--v-if-->
             </div>
-            <div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0-0" data-slot="label" class="block font-medium text-default">Select all</label>
+            <div data-slot="wrapper" class="w-full ms-2 text-sm">
+              <!--v-if--><label for="v-0-0-0" data-slot="label" class="block font-medium text-default">Select all</label>
               <!--v-if-->
             </div>
           </div>