From c1b2acdcc71e53ae75e50ed10784cdba3a34f28a Mon Sep 17 00:00:00 2001
From: Neo <neo@sagittal.ai>
Date: Wed, 25 Feb 2026 15:49:02 +0000
Subject: [PATCH] Update RadioButton styles for iOS 26 alignment

Adjust RadioButton component styling to match iOS 26 native design:

- Update transition timing from 0.3s to 0.1s with easeInOutQuart
  cubic-bezier curve (0.77, 0, 0.175, 1) for smoother animations
- Reduce inner circle size in radial gradient from 64% to 50% for
  a more refined appearance
- Apply changes across all RadioButton variants: default,
  overBrand, and overNegative

These changes align the web component with the new iOS 26 native
style specifications for mobile devices.

Fixes #WEB-2359
---
 src/radio-button.css.ts | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/radio-button.css.ts b/src/radio-button.css.ts
index adb9daf83f..f6f141f140 100644
--- a/src/radio-button.css.ts
+++ b/src/radio-button.css.ts
@@ -15,7 +15,7 @@ const outerCircleBase = style([
         width: 20,
         height: 20,
         verticalAlign: 'middle',
-        transition: 'background 0.3s, box-shadow 0.3s',
+        transition: 'background 0.1s cubic-bezier(0.77, 0, 0.175, 1), box-shadow 0.3s cubic-bezier(0.77, 0, 0.175, 1)',
     },
 ]);
 
@@ -40,7 +40,7 @@ export const outerCircleVariants = styleVariants({
         outerCircleBase,
         {
             boxShadow: `inset 0 0 0 5px ${vars.colors.controlActivated}`,
-            background: `radial-gradient(circle, ${vars.colors.iosControlKnob} 0%, ${vars.colors.iosControlKnob} 64%, transparent 64%, transparent 100%)`,
+            background: `radial-gradient(circle, ${vars.colors.iosControlKnob} 0%, ${vars.colors.iosControlKnob} 50%, transparent 50%, transparent 100%)`,
         },
     ],
 });
@@ -66,7 +66,7 @@ export const overBrandOuterCircleVariants = styleVariants({
         outerCircleBase,
         {
             boxShadow: `inset 0 0 0 5px ${vars.colors.controlActivatedBrand}`,
-            background: `radial-gradient(circle, ${vars.colors.controlKnobBrand} 0%, ${vars.colors.controlKnobBrand} 64%, transparent 64%, transparent 100%)`,
+            background: `radial-gradient(circle, ${vars.colors.controlKnobBrand} 0%, ${vars.colors.controlKnobBrand} 50%, transparent 50%, transparent 100%)`,
         },
     ],
 });
@@ -92,7 +92,7 @@ export const overNegativeOuterCircleVariants = styleVariants({
         outerCircleBase,
         {
             boxShadow: `inset 0 0 0 5px ${vars.colors.controlActivatedBrand}`,
-            background: `radial-gradient(circle, ${vars.colors.controlKnobBrand} 0%, ${vars.colors.controlKnobBrand} 64%, transparent 64%, transparent 100%)`,
+            background: `radial-gradient(circle, ${vars.colors.controlKnobBrand} 0%, ${vars.colors.controlKnobBrand} 50%, transparent 50%, transparent 100%)`,
         },
     ],
 });