diff --git a/.changeset/focus-border-split.md b/.changeset/focus-border-split.md
new file mode 100644
index 00000000..a884c883
--- /dev/null
+++ b/.changeset/focus-border-split.md
@@ -0,0 +1,6 @@
+---
+'@surfnet/curve-react': patch
+'@surfnet/curve-angular': patch
+---
+
+Split focus styling: `:focus` now gives the primary (`--ring`) border, and `:focus-visible` adds the 3px ring shadow on top. Mouse-focused controls show the border change only; keyboard focus shows both. Applies to accordion, badge, button, checkbox, input, item, native select, radio group, select, switch, tabs, textarea and toggle.
diff --git a/packages/angular/src/lib/ui/accordion/src/lib/hlm-accordion.css b/packages/angular/src/lib/ui/accordion/src/lib/hlm-accordion.css
index c287c970..5351ef7a 100644
--- a/packages/angular/src/lib/ui/accordion/src/lib/hlm-accordion.css
+++ b/packages/angular/src/lib/ui/accordion/src/lib/hlm-accordion.css
@@ -39,12 +39,15 @@
   text-decoration-line: underline;
 }
 
-.curve-accordion-trigger:focus-visible {
+.curve-accordion-trigger:focus {
   border-color: var(--ring);
-  box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent);
 }
 
-.curve-accordion-trigger:focus-visible::after {
+.curve-accordion-trigger:focus-visible {
+  box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 32%, transparent);
+}
+
+.curve-accordion-trigger:focus::after {
   content: '';
   border-color: var(--ring);
 }
diff --git a/packages/angular/src/lib/ui/badge/src/lib/hlm-badge.css b/packages/angular/src/lib/ui/badge/src/lib/hlm-badge.css
index 6490314f..b306d1c8 100644
--- a/packages/angular/src/lib/ui/badge/src/lib/hlm-badge.css
+++ b/packages/angular/src/lib/ui/badge/src/lib/hlm-badge.css
@@ -22,9 +22,12 @@
   transition: all 150ms ease;
 }
 
-.curve-badge:focus-visible {
+.curve-badge:focus {
   border-color: var(--ring);
-  box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring) 50%, transparent);
+}
+
+.curve-badge:focus-visible {
+  box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring) 32%, transparent);
 }
 
 .curve-badge[aria-invalid='true'] {
diff --git a/packages/angular/src/lib/ui/button/src/lib/hlm-button.css b/packages/angular/src/lib/ui/button/src/lib/hlm-button.css
index 1ec9907c..4f40f99a 100644
--- a/packages/angular/src/lib/ui/button/src/lib/hlm-button.css
+++ b/packages/angular/src/lib/ui/button/src/lib/hlm-button.css
@@ -30,9 +30,12 @@
   transform: translateY(1px);
 }
 
-.curve-button:focus-visible {
+.curve-button:focus {
   border-color: var(--ring);
-  box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring) 50%, transparent);
+}
+
+.curve-button:focus-visible {
+  box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring) 32%, transparent);
 }
 
 .curve-button:disabled,
@@ -134,8 +137,11 @@
   background-color: color-mix(in oklch, var(--destructive) 90%, transparent);
 }
 
-.curve-button--variant-destructive:focus-visible {
+.curve-button--variant-destructive:focus {
   border-color: color-mix(in oklch, var(--destructive) 40%, transparent);
+}
+
+.curve-button--variant-destructive:focus-visible {
   box-shadow: 0 0 0 3px color-mix(in oklch, var(--destructive) 20%, transparent);
 }
 
diff --git a/packages/angular/src/lib/ui/checkbox/src/lib/hlm-checkbox.css b/packages/angular/src/lib/ui/checkbox/src/lib/hlm-checkbox.css
index 08fb1958..185078e5 100644
--- a/packages/angular/src/lib/ui/checkbox/src/lib/hlm-checkbox.css
+++ b/packages/angular/src/lib/ui/checkbox/src/lib/hlm-checkbox.css
@@ -24,10 +24,13 @@
   background-color: color-mix(in oklab, var(--input) 30%, transparent);
 }
 
-.curve-checkbox:focus-visible {
+.curve-checkbox:focus {
   border-color: var(--ring);
+}
+
+.curve-checkbox:focus-visible {
   box-shadow:
-    0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent),
+    0 0 0 3px color-mix(in oklab, var(--ring) 32%, transparent),
     var(--shadow-xs, 0 1px 2px 0 rgb(0 0 0 / 0.05));
 }
 
@@ -58,7 +61,7 @@
 
 /* Invalid via the control state (forceInvalid or form validation). */
 .curve-checkbox--invalid,
-.curve-checkbox--invalid:focus-visible {
+.curve-checkbox--invalid:focus {
   border-color: var(--destructive);
 }
 
diff --git a/packages/angular/src/lib/ui/combobox/src/lib/hlm-combobox.css b/packages/angular/src/lib/ui/combobox/src/lib/hlm-combobox.css
index d3e593b4..78bc0ac8 100644
--- a/packages/angular/src/lib/ui/combobox/src/lib/hlm-combobox.css
+++ b/packages/angular/src/lib/ui/combobox/src/lib/hlm-combobox.css
@@ -83,7 +83,7 @@
 .curve-combobox-chips:focus-within {
   border-color: var(--ring);
   box-shadow:
-    0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent),
+    0 0 0 3px color-mix(in oklab, var(--ring) 32%, transparent),
     var(--shadow-xs, 0 1px 2px 0 rgb(0 0 0 / 0.05));
 }
 
diff --git a/packages/angular/src/lib/ui/input-group/src/lib/hlm-input-group.css b/packages/angular/src/lib/ui/input-group/src/lib/hlm-input-group.css
index 2d129d29..335bd00e 100644
--- a/packages/angular/src/lib/ui/input-group/src/lib/hlm-input-group.css
+++ b/packages/angular/src/lib/ui/input-group/src/lib/hlm-input-group.css
@@ -27,7 +27,7 @@
 .curve-input-group:has([data-slot='input-group-control']:focus-visible) {
   border-color: var(--ring);
   box-shadow:
-    0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent),
+    0 0 0 3px color-mix(in oklab, var(--ring) 32%, transparent),
     var(--shadow-xs, 0 1px 2px 0 rgb(0 0 0 / 0.05));
 }
 
diff --git a/packages/angular/src/lib/ui/input-otp/src/lib/hlm-input-otp.css b/packages/angular/src/lib/ui/input-otp/src/lib/hlm-input-otp.css
index bf96f82b..1e8d0602 100644
--- a/packages/angular/src/lib/ui/input-otp/src/lib/hlm-input-otp.css
+++ b/packages/angular/src/lib/ui/input-otp/src/lib/hlm-input-otp.css
@@ -66,7 +66,7 @@
   z-index: 10;
   border-color: var(--ring);
   box-shadow:
-    0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent),
+    0 0 0 3px color-mix(in oklab, var(--ring) 32%, transparent),
     var(--shadow-xs, 0 1px 2px 0 rgb(0 0 0 / 0.05));
 }
 
diff --git a/packages/angular/src/lib/ui/input/src/lib/hlm-input.css b/packages/angular/src/lib/ui/input/src/lib/hlm-input.css
index 7a5a6665..fb987bff 100644
--- a/packages/angular/src/lib/ui/input/src/lib/hlm-input.css
+++ b/packages/angular/src/lib/ui/input/src/lib/hlm-input.css
@@ -24,9 +24,12 @@
   color: var(--muted-foreground);
 }
 
-.curve-input:focus-visible {
+.curve-input:focus {
   border-color: var(--ring);
-  box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring) 50%, transparent);
+}
+
+.curve-input:focus-visible {
+  box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring) 32%, transparent);
 }
 
 .curve-input:disabled {
diff --git a/packages/angular/src/lib/ui/item/src/lib/hlm-item.css b/packages/angular/src/lib/ui/item/src/lib/hlm-item.css
index f52d5d5a..3eea492d 100644
--- a/packages/angular/src/lib/ui/item/src/lib/hlm-item.css
+++ b/packages/angular/src/lib/ui/item/src/lib/hlm-item.css
@@ -19,9 +19,12 @@ a.curve-item:hover {
   background-color: var(--muted);
 }
 
-.curve-item:focus-visible {
+.curve-item:focus {
   border-color: var(--ring);
-  box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent);
+}
+
+.curve-item:focus-visible {
+  box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 32%, transparent);
 }
 
 .curve-item--variant-default {
diff --git a/packages/angular/src/lib/ui/native-select/src/lib/hlm-native-select.css b/packages/angular/src/lib/ui/native-select/src/lib/hlm-native-select.css
index c6d8a122..676f2f06 100644
--- a/packages/angular/src/lib/ui/native-select/src/lib/hlm-native-select.css
+++ b/packages/angular/src/lib/ui/native-select/src/lib/hlm-native-select.css
@@ -51,10 +51,13 @@
   background-color: color-mix(in oklab, var(--input) 50%, transparent);
 }
 
-.curve-native-select:focus-visible {
+.curve-native-select:focus {
   border-color: var(--ring);
+}
+
+.curve-native-select:focus-visible {
   box-shadow:
-    0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent),
+    0 0 0 3px color-mix(in oklab, var(--ring) 32%, transparent),
     var(--shadow-xs, 0 1px 2px 0 rgb(0 0 0 / 0.05));
 }
 
diff --git a/packages/angular/src/lib/ui/navigation-menu/src/lib/hlm-navigation-menu.css b/packages/angular/src/lib/ui/navigation-menu/src/lib/hlm-navigation-menu.css
index a15a4bba..0bd45450 100644
--- a/packages/angular/src/lib/ui/navigation-menu/src/lib/hlm-navigation-menu.css
+++ b/packages/angular/src/lib/ui/navigation-menu/src/lib/hlm-navigation-menu.css
@@ -62,7 +62,7 @@
 .curve-navigation-menu-trigger:focus-visible {
   outline-style: solid;
   outline-width: 1px;
-  box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent);
+  box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 32%, transparent);
 }
 
 .curve-navigation-menu-trigger:disabled {
@@ -121,7 +121,7 @@
 .curve-navigation-menu-link:focus-visible {
   outline-style: solid;
   outline-width: 1px;
-  box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent);
+  box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 32%, transparent);
 }
 
 .curve-navigation-menu-link[data-disabled='true'] {
diff --git a/packages/angular/src/lib/ui/radio-group/src/lib/hlm-radio-group.css b/packages/angular/src/lib/ui/radio-group/src/lib/hlm-radio-group.css
index cf0ee5b2..a5dde15a 100644
--- a/packages/angular/src/lib/ui/radio-group/src/lib/hlm-radio-group.css
+++ b/packages/angular/src/lib/ui/radio-group/src/lib/hlm-radio-group.css
@@ -47,10 +47,13 @@
   background-color: color-mix(in oklab, var(--input) 30%, transparent);
 }
 
-.curve-radio:has(:focus-visible) .curve-radio-indicator {
+.curve-radio:has(:focus) .curve-radio-indicator {
   border-color: var(--ring);
+}
+
+.curve-radio:has(:focus-visible) .curve-radio-indicator {
   box-shadow:
-    0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent),
+    0 0 0 3px color-mix(in oklab, var(--ring) 32%, transparent),
     var(--shadow-xs, 0 1px 2px 0 rgb(0 0 0 / 0.05));
 }
 
diff --git a/packages/angular/src/lib/ui/select/src/lib/hlm-select.css b/packages/angular/src/lib/ui/select/src/lib/hlm-select.css
index 4fcd598c..de83ee5c 100644
--- a/packages/angular/src/lib/ui/select/src/lib/hlm-select.css
+++ b/packages/angular/src/lib/ui/select/src/lib/hlm-select.css
@@ -45,10 +45,13 @@
   background-color: color-mix(in oklab, var(--input) 50%, transparent);
 }
 
-.curve-select-trigger:focus-visible {
+.curve-select-trigger:focus {
   border-color: var(--ring);
+}
+
+.curve-select-trigger:focus-visible {
   box-shadow:
-    0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent),
+    0 0 0 3px color-mix(in oklab, var(--ring) 32%, transparent),
     var(--shadow-xs, 0 1px 2px 0 rgb(0 0 0 / 0.05));
 }
 
diff --git a/packages/angular/src/lib/ui/sidebar/src/lib/hlm-sidebar.css b/packages/angular/src/lib/ui/sidebar/src/lib/hlm-sidebar.css
index d3d4dfd5..79ff170e 100644
--- a/packages/angular/src/lib/ui/sidebar/src/lib/hlm-sidebar.css
+++ b/packages/angular/src/lib/ui/sidebar/src/lib/hlm-sidebar.css
@@ -298,7 +298,7 @@
 }
 
 .curve-input.curve-sidebar-input:focus-visible {
-  box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent);
+  box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 32%, transparent);
 }
 
 .curve-input.curve-sidebar-input[data-matches-spartan-invalid='true'] {
diff --git a/packages/angular/src/lib/ui/slider/src/lib/hlm-slider.css b/packages/angular/src/lib/ui/slider/src/lib/hlm-slider.css
index ffae4061..127001b4 100644
--- a/packages/angular/src/lib/ui/slider/src/lib/hlm-slider.css
+++ b/packages/angular/src/lib/ui/slider/src/lib/hlm-slider.css
@@ -95,7 +95,7 @@
 .curve-slider-thumb:hover,
 .curve-slider-thumb:focus-visible {
   box-shadow:
-    0 0 0 4px color-mix(in oklab, var(--ring) 50%, transparent),
+    0 0 0 4px color-mix(in oklab, var(--ring) 32%, transparent),
     0 1px 3px 0 rgb(0 0 0 / 0.1),
     0 1px 2px -1px rgb(0 0 0 / 0.1);
 }
diff --git a/packages/angular/src/lib/ui/switch/src/lib/hlm-switch.css b/packages/angular/src/lib/ui/switch/src/lib/hlm-switch.css
index b311becc..f1f981df 100644
--- a/packages/angular/src/lib/ui/switch/src/lib/hlm-switch.css
+++ b/packages/angular/src/lib/ui/switch/src/lib/hlm-switch.css
@@ -36,10 +36,13 @@
   background-color: var(--primary);
 }
 
-.curve-switch:focus-visible {
+.curve-switch:focus {
   border-color: var(--ring);
+}
+
+.curve-switch:focus-visible {
   box-shadow:
-    0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent),
+    0 0 0 3px color-mix(in oklab, var(--ring) 32%, transparent),
     var(--shadow-xs, 0 1px 2px 0 rgb(0 0 0 / 0.05));
 }
 
diff --git a/packages/angular/src/lib/ui/tabs/src/lib/hlm-tabs.css b/packages/angular/src/lib/ui/tabs/src/lib/hlm-tabs.css
index 97723153..1fd570b0 100644
--- a/packages/angular/src/lib/ui/tabs/src/lib/hlm-tabs.css
+++ b/packages/angular/src/lib/ui/tabs/src/lib/hlm-tabs.css
@@ -83,10 +83,13 @@
   justify-content: flex-start;
 }
 
-.curve-tabs-trigger:focus-visible {
+.curve-tabs-trigger:focus {
   border-color: var(--ring);
+}
+
+.curve-tabs-trigger:focus-visible {
   outline: 1px solid var(--ring);
-  box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent);
+  box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 32%, transparent);
 }
 
 .curve-tabs-trigger:disabled {
@@ -119,7 +122,7 @@
     [data-active]:not([data-active='false'])
   ):focus-visible {
   box-shadow:
-    0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent),
+    0 0 0 3px color-mix(in oklab, var(--ring) 32%, transparent),
     0 1px 3px 0 rgb(0 0 0 / 0.1),
     0 1px 2px -1px rgb(0 0 0 / 0.1);
 }
diff --git a/packages/angular/src/lib/ui/textarea/src/lib/hlm-textarea.css b/packages/angular/src/lib/ui/textarea/src/lib/hlm-textarea.css
index ec24930e..5157849c 100644
--- a/packages/angular/src/lib/ui/textarea/src/lib/hlm-textarea.css
+++ b/packages/angular/src/lib/ui/textarea/src/lib/hlm-textarea.css
@@ -21,10 +21,13 @@
   color: var(--muted-foreground);
 }
 
-.curve-textarea:focus-visible {
+.curve-textarea:focus {
   border-color: var(--ring);
+}
+
+.curve-textarea:focus-visible {
   box-shadow:
-    0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent),
+    0 0 0 3px color-mix(in oklab, var(--ring) 32%, transparent),
     var(--shadow-xs, 0 1px 2px 0 rgb(0 0 0 / 0.05));
 }
 
diff --git a/packages/angular/src/lib/ui/toggle/src/lib/hlm-toggle.css b/packages/angular/src/lib/ui/toggle/src/lib/hlm-toggle.css
index cd17cafb..3836fd7c 100644
--- a/packages/angular/src/lib/ui/toggle/src/lib/hlm-toggle.css
+++ b/packages/angular/src/lib/ui/toggle/src/lib/hlm-toggle.css
@@ -44,9 +44,12 @@
   color: var(--secondary-foreground);
 }
 
-.curve-toggle:focus-visible {
+.curve-toggle:focus {
   border-color: var(--ring);
-  box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent);
+}
+
+.curve-toggle:focus-visible {
+  box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 32%, transparent);
 }
 
 .curve-toggle[data-matches-spartan-invalid='true'] {
diff --git a/packages/angular/src/styles/base.css b/packages/angular/src/styles/base.css
index 1d4e86fe..1b83acba 100644
--- a/packages/angular/src/styles/base.css
+++ b/packages/angular/src/styles/base.css
@@ -2,7 +2,7 @@
 *::before,
 *::after {
   border-color: var(--border);
-  outline-color: color-mix(in oklab, var(--ring) 50%, transparent);
+  outline-color: color-mix(in oklab, var(--ring) 32%, transparent);
 }
 
 html {
diff --git a/packages/react/src/components/ui/accordion/accordion.module.css b/packages/react/src/components/ui/accordion/accordion.module.css
index e80554a7..1065ef08 100644
--- a/packages/react/src/components/ui/accordion/accordion.module.css
+++ b/packages/react/src/components/ui/accordion/accordion.module.css
@@ -32,9 +32,12 @@
   text-decoration: underline;
 }
 
-.trigger:focus-visible {
+.trigger:focus {
   border-color: var(--ring);
-  box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring) 50%, transparent);
+}
+
+.trigger:focus-visible {
+  box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring) 32%, transparent);
 }
 
 .trigger[aria-disabled='true'] {
diff --git a/packages/react/src/components/ui/badge/badge.module.css b/packages/react/src/components/ui/badge/badge.module.css
index bba27163..6c7e600d 100644
--- a/packages/react/src/components/ui/badge/badge.module.css
+++ b/packages/react/src/components/ui/badge/badge.module.css
@@ -17,9 +17,12 @@
   transition: all 150ms ease;
 }
 
-.badge:focus-visible {
+.badge:focus {
   border-color: var(--ring);
-  box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring) 50%, transparent);
+}
+
+.badge:focus-visible {
+  box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring) 32%, transparent);
 }
 
 .badge[aria-invalid='true'] {
diff --git a/packages/react/src/components/ui/button/button.module.css b/packages/react/src/components/ui/button/button.module.css
index 3ad48a61..831ca245 100644
--- a/packages/react/src/components/ui/button/button.module.css
+++ b/packages/react/src/components/ui/button/button.module.css
@@ -20,9 +20,12 @@
   -webkit-tap-highlight-color: transparent;
 }
 
-.button:focus-visible {
+.button:focus {
   border-color: var(--ring);
-  box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring) 50%, transparent);
+}
+
+.button:focus-visible {
+  box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring) 32%, transparent);
 }
 
 .button:active:not([aria-haspopup]) {
@@ -131,8 +134,11 @@
   background-color: color-mix(in oklch, var(--destructive) 90%, transparent);
 }
 
-.variantDestructive:focus-visible {
+.variantDestructive:focus {
   border-color: color-mix(in oklch, var(--destructive) 40%, transparent);
+}
+
+.variantDestructive:focus-visible {
   box-shadow: 0 0 0 3px color-mix(in oklch, var(--destructive) 20%, transparent);
 }
 
diff --git a/packages/react/src/components/ui/calendar/calendar.module.css b/packages/react/src/components/ui/calendar/calendar.module.css
index b36290ee..fa1ed5bc 100644
--- a/packages/react/src/components/ui/calendar/calendar.module.css
+++ b/packages/react/src/components/ui/calendar/calendar.module.css
@@ -274,7 +274,7 @@
   position: relative;
   z-index: 10;
   border-color: var(--ring);
-  box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring) 50%, transparent);
+  box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring) 32%, transparent);
 }
 
 .dayButton[data-range-end='true'] {
diff --git a/packages/react/src/components/ui/checkbox/checkbox.module.css b/packages/react/src/components/ui/checkbox/checkbox.module.css
index 6d768897..554ac8cd 100644
--- a/packages/react/src/components/ui/checkbox/checkbox.module.css
+++ b/packages/react/src/components/ui/checkbox/checkbox.module.css
@@ -23,9 +23,12 @@
   opacity: 0.5;
 }
 
-.checkbox:focus-visible {
+.checkbox:focus {
   border-color: var(--ring);
-  box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring) 50%, transparent);
+}
+
+.checkbox:focus-visible {
+  box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring) 32%, transparent);
 }
 
 .checkbox:disabled {
diff --git a/packages/react/src/components/ui/combobox/combobox.module.css b/packages/react/src/components/ui/combobox/combobox.module.css
index 46061bdd..7968a137 100644
--- a/packages/react/src/components/ui/combobox/combobox.module.css
+++ b/packages/react/src/components/ui/combobox/combobox.module.css
@@ -160,7 +160,7 @@
 
 .chips:focus-within {
   border-color: var(--ring);
-  box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring) 50%, transparent);
+  box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring) 32%, transparent);
 }
 
 .chips:has([aria-invalid='true']) {
diff --git a/packages/react/src/components/ui/input-group/input-group.module.css b/packages/react/src/components/ui/input-group/input-group.module.css
index 2c87a6ec..6b760c1e 100644
--- a/packages/react/src/components/ui/input-group/input-group.module.css
+++ b/packages/react/src/components/ui/input-group/input-group.module.css
@@ -20,7 +20,7 @@
 
 .group:has([data-slot='input-group-control']:focus-visible) {
   border-color: var(--ring);
-  box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring) 50%, transparent);
+  box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring) 32%, transparent);
 }
 
 .group:has([data-slot][aria-invalid='true']) {
diff --git a/packages/react/src/components/ui/input-otp/input-otp.module.css b/packages/react/src/components/ui/input-otp/input-otp.module.css
index e314e2bb..71d67d92 100644
--- a/packages/react/src/components/ui/input-otp/input-otp.module.css
+++ b/packages/react/src/components/ui/input-otp/input-otp.module.css
@@ -80,7 +80,7 @@
 .slot[data-active='true'] {
   z-index: 10;
   border-color: var(--ring);
-  box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring) 50%, transparent);
+  box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring) 32%, transparent);
 }
 
 .slot[data-active='true'][aria-invalid='true'] {
diff --git a/packages/react/src/components/ui/input/input.module.css b/packages/react/src/components/ui/input/input.module.css
index 858f779c..0c5e3927 100644
--- a/packages/react/src/components/ui/input/input.module.css
+++ b/packages/react/src/components/ui/input/input.module.css
@@ -19,9 +19,12 @@
   color: var(--muted-foreground);
 }
 
-.input:focus-visible {
+.input:focus {
   border-color: var(--ring);
-  box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring) 50%, transparent);
+}
+
+.input:focus-visible {
+  box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring) 32%, transparent);
 }
 
 .input:disabled {
diff --git a/packages/react/src/components/ui/item/item.module.css b/packages/react/src/components/ui/item/item.module.css
index de192362..783bbe58 100644
--- a/packages/react/src/components/ui/item/item.module.css
+++ b/packages/react/src/components/ui/item/item.module.css
@@ -31,9 +31,12 @@
   outline: none;
 }
 
-.item:focus-visible {
+.item:focus {
   border-color: var(--ring);
-  box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring) 50%, transparent);
+}
+
+.item:focus-visible {
+  box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring) 32%, transparent);
 }
 
 .item a {
diff --git a/packages/react/src/components/ui/native-select/native-select.module.css b/packages/react/src/components/ui/native-select/native-select.module.css
index 132c9bfb..5ffa7234 100644
--- a/packages/react/src/components/ui/native-select/native-select.module.css
+++ b/packages/react/src/components/ui/native-select/native-select.module.css
@@ -35,9 +35,12 @@
   color: var(--muted-foreground);
 }
 
-.select:focus-visible {
+.select:focus {
   border-color: var(--ring);
-  box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring) 50%, transparent);
+}
+
+.select:focus-visible {
+  box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring) 32%, transparent);
 }
 
 .select:disabled {
diff --git a/packages/react/src/components/ui/navigation-menu/navigation-menu.module.css b/packages/react/src/components/ui/navigation-menu/navigation-menu.module.css
index 2e766d70..fa940c0d 100644
--- a/packages/react/src/components/ui/navigation-menu/navigation-menu.module.css
+++ b/packages/react/src/components/ui/navigation-menu/navigation-menu.module.css
@@ -49,7 +49,7 @@
 }
 
 .trigger:focus-visible {
-  box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring) 50%, transparent);
+  box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring) 32%, transparent);
   outline: 1px solid transparent;
 }
 
@@ -144,7 +144,7 @@
 }
 
 .link:focus-visible {
-  box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring) 50%, transparent);
+  box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring) 32%, transparent);
   outline: 1px solid transparent;
 }
 
diff --git a/packages/react/src/components/ui/radio-group/radio-group.module.css b/packages/react/src/components/ui/radio-group/radio-group.module.css
index 3080751c..993ba096 100644
--- a/packages/react/src/components/ui/radio-group/radio-group.module.css
+++ b/packages/react/src/components/ui/radio-group/radio-group.module.css
@@ -22,9 +22,12 @@
   inset: -0.5rem -0.75rem;
 }
 
-.item:focus-visible {
+.item:focus {
   border-color: var(--ring);
-  box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring) 50%, transparent);
+}
+
+.item:focus-visible {
+  box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring) 32%, transparent);
 }
 
 .item:disabled {
diff --git a/packages/react/src/components/ui/scroll-area/scroll-area.module.css b/packages/react/src/components/ui/scroll-area/scroll-area.module.css
index 66071904..ec5c6f69 100644
--- a/packages/react/src/components/ui/scroll-area/scroll-area.module.css
+++ b/packages/react/src/components/ui/scroll-area/scroll-area.module.css
@@ -13,7 +13,7 @@
 }
 
 .viewport:focus-visible {
-  box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring) 50%, transparent);
+  box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring) 32%, transparent);
   outline: 1px solid var(--ring);
 }
 
diff --git a/packages/react/src/components/ui/select/select.module.css b/packages/react/src/components/ui/select/select.module.css
index cfb5c6c8..bd02b6dc 100644
--- a/packages/react/src/components/ui/select/select.module.css
+++ b/packages/react/src/components/ui/select/select.module.css
@@ -38,9 +38,12 @@
   height: calc(var(--spacing, 0.25rem) * 8);
 }
 
-.trigger:focus-visible {
+.trigger:focus {
   border-color: var(--ring);
-  box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring) 50%, transparent);
+}
+
+.trigger:focus-visible {
+  box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring) 32%, transparent);
 }
 
 .trigger:disabled {
diff --git a/packages/react/src/components/ui/slider/slider.module.css b/packages/react/src/components/ui/slider/slider.module.css
index a1813a82..87d378fe 100644
--- a/packages/react/src/components/ui/slider/slider.module.css
+++ b/packages/react/src/components/ui/slider/slider.module.css
@@ -82,11 +82,11 @@
 }
 
 .thumb:hover {
-  box-shadow: 0 0 0 4px color-mix(in oklch, var(--ring) 50%, transparent);
+  box-shadow: 0 0 0 4px color-mix(in oklch, var(--ring) 32%, transparent);
 }
 
 .thumb:focus-visible {
-  box-shadow: 0 0 0 4px color-mix(in oklch, var(--ring) 50%, transparent);
+  box-shadow: 0 0 0 4px color-mix(in oklch, var(--ring) 32%, transparent);
 }
 
 .thumb:disabled {
diff --git a/packages/react/src/components/ui/switch/switch.module.css b/packages/react/src/components/ui/switch/switch.module.css
index 4c604a5d..02248b08 100644
--- a/packages/react/src/components/ui/switch/switch.module.css
+++ b/packages/react/src/components/ui/switch/switch.module.css
@@ -26,9 +26,12 @@
   width: 24px;
 }
 
-.switch:focus-visible {
+.switch:focus {
   border-color: var(--ring);
-  box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring) 50%, transparent);
+}
+
+.switch:focus-visible {
+  box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring) 32%, transparent);
 }
 
 .switch[aria-invalid='true'] {
diff --git a/packages/react/src/components/ui/tabs/tabs.module.css b/packages/react/src/components/ui/tabs/tabs.module.css
index 6022a7eb..92b65397 100644
--- a/packages/react/src/components/ui/tabs/tabs.module.css
+++ b/packages/react/src/components/ui/tabs/tabs.module.css
@@ -76,9 +76,12 @@
   color: var(--foreground);
 }
 
-.trigger:focus-visible {
+.trigger:focus {
   border-color: var(--ring);
-  box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring) 50%, transparent);
+}
+
+.trigger:focus-visible {
+  box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring) 32%, transparent);
   outline: 1px solid var(--ring);
 }
 
diff --git a/packages/react/src/components/ui/textarea/textarea.module.css b/packages/react/src/components/ui/textarea/textarea.module.css
index 7a9150df..9c940e02 100644
--- a/packages/react/src/components/ui/textarea/textarea.module.css
+++ b/packages/react/src/components/ui/textarea/textarea.module.css
@@ -20,9 +20,12 @@
   color: var(--muted-foreground);
 }
 
-.textarea:focus-visible {
+.textarea:focus {
   border-color: var(--ring);
-  box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring) 50%, transparent);
+}
+
+.textarea:focus-visible {
+  box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring) 32%, transparent);
 }
 
 .textarea:disabled {
diff --git a/packages/react/src/components/ui/toggle/toggle.module.css b/packages/react/src/components/ui/toggle/toggle.module.css
index 9029cf5c..bfc8539a 100644
--- a/packages/react/src/components/ui/toggle/toggle.module.css
+++ b/packages/react/src/components/ui/toggle/toggle.module.css
@@ -21,9 +21,12 @@
   color: var(--foreground);
 }
 
-.toggle:focus-visible {
+.toggle:focus {
   border-color: var(--ring);
-  box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring) 50%, transparent);
+}
+
+.toggle:focus-visible {
+  box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring) 32%, transparent);
 }
 
 .toggle:disabled {