From 6a667fc7a0b9afafd097a47acefde4a90f85ae5c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Isaque=20B=C3=B6ck?= <isaquebockdos@gmail.com>
Date: Thu, 25 Jun 2026 21:11:39 -0300
Subject: [PATCH] feat: align radio layout and add unchecked hover state

- RadioButton: on hover (when not checked) the border switches to
  `var(--primary)` to mirror the checked affordance, and the ghost-overlay
  is hidden so the color isn't muddied
- RadioButton: keep the inner dot via `data-[checked]:after`; drop the
  pseudo `before` override that hid it
- FieldRadio + FieldRadioBlock: render the control before the label/description
  block so the indicator stays on the leading edge, matching Checkbox-driven
  fields and the Figma layout
---
 .../field-radio-block/field-radio-block.vue    | 18 +++++++++---------
 .../inputs/field-radio/field-radio.vue         | 16 ++++++++--------
 .../inputs/radio-button/radio-button.vue       |  5 +++--
 3 files changed, 20 insertions(+), 19 deletions(-)

diff --git a/packages/webkit/src/components/inputs/field-radio-block/field-radio-block.vue b/packages/webkit/src/components/inputs/field-radio-block/field-radio-block.vue
index 0a7713ee..9d3b3fce 100644
--- a/packages/webkit/src/components/inputs/field-radio-block/field-radio-block.vue
+++ b/packages/webkit/src/components/inputs/field-radio-block/field-radio-block.vue
@@ -65,7 +65,7 @@
   const cardClasses = cn(
     selectableBlockCardClasses,
     'flex cursor-pointer items-start gap-[var(--spacing-sm)] p-[var(--spacing-sm)]',
-    'data-[selected]:border-[var(--border-selected)] data-[selected]:bg-[var(--primary-selected)]',
+    'data-[selected]:border-[var(--border-selected)] data-[selected]:bg-[var(--bg-selected)]',
     'data-[selected]:before:hidden data-[selected]:after:hidden',
     'data-[disabled]:opacity-50'
   )
@@ -92,6 +92,14 @@
       :data-disabled="disabled || null"
       :data-testid="`${testId}__card`"
     >
+      <RadioButton
+        v-model="model"
+        :value="value"
+        :name="name"
+        :disabled="disabled"
+        :input-id="resolvedInputId"
+        :data-testid="`${testId}__control`"
+      />
       <div
         :class="textsClasses"
         :data-disabled="disabled || null"
@@ -124,14 +132,6 @@
           <span :data-testid="`${testId}__helper-text`">{{ helperText }}</span>
         </div>
       </div>
-      <RadioButton
-        v-model="model"
-        :value="value"
-        :name="name"
-        :disabled="disabled"
-        :input-id="resolvedInputId"
-        :data-testid="`${testId}__control`"
-      />
     </div>
   </label>
 </template>
diff --git a/packages/webkit/src/components/inputs/field-radio/field-radio.vue b/packages/webkit/src/components/inputs/field-radio/field-radio.vue
index 3db06a6e..67740832 100644
--- a/packages/webkit/src/components/inputs/field-radio/field-radio.vue
+++ b/packages/webkit/src/components/inputs/field-radio/field-radio.vue
@@ -74,6 +74,14 @@
     :data-testid="testId"
     :data-disabled="disabled || null"
   >
+    <RadioButton
+      v-model="model"
+      :value="value"
+      :name="name"
+      :disabled="disabled"
+      :input-id="resolvedInputId"
+      :data-testid="`${testId}__control`"
+    />
     <div
       :class="textsClasses"
       :data-disabled="disabled || null"
@@ -106,13 +114,5 @@
         <span :data-testid="`${testId}__helper-text`">{{ helperText }}</span>
       </div>
     </div>
-    <RadioButton
-      v-model="model"
-      :value="value"
-      :name="name"
-      :disabled="disabled"
-      :input-id="resolvedInputId"
-      :data-testid="`${testId}__control`"
-    />
   </label>
 </template>
diff --git a/packages/webkit/src/components/inputs/radio-button/radio-button.vue b/packages/webkit/src/components/inputs/radio-button/radio-button.vue
index 2d9c7082..318c5fba 100644
--- a/packages/webkit/src/components/inputs/radio-button/radio-button.vue
+++ b/packages/webkit/src/components/inputs/radio-button/radio-button.vue
@@ -61,11 +61,12 @@
 
   const sharedClasses = [
     ...toggleControlClasses,
-    'group size-5 rounded-full border border-[var(--border-default)] bg-[var(--bg-surface)]'
+    'group size-5 rounded-full border border-[var(--border-default)] bg-[var(--bg-surface)]',
+    '[&:not([data-checked])]:hover:border-[var(--primary)] [&:not([data-checked])]:hover:before:opacity-0'
   ]
 
   const checkedClasses =
-    'data-[checked]:border-[var(--primary)] data-[checked]:bg-[var(--primary)] data-[checked]:before:hidden data-[checked]:after:hidden'
+    'data-[checked]:border-[var(--primary)] data-[checked]:bg-[var(--primary)] data-[checked]:after:hidden'
 
   const disabledClasses =
     'data-[disabled]:pointer-events-none data-[disabled]:cursor-not-allowed data-[disabled]:border-[var(--border-default)] data-[disabled]:bg-[var(--bg-disabled)] data-[disabled]:opacity-50 data-[checked]:data-[disabled]:border-[var(--border-default)] data-[checked]:data-[disabled]:bg-[var(--bg-disabled)]'