From 945fa9bceb006fd23a97122918e1f290d5311a4b Mon Sep 17 00:00:00 2001
From: Ian Sanders <iansan5653@github.com>
Date: Thu, 13 Aug 2026 21:26:38 +0000
Subject: [PATCH 1/2] Animate SegmentedControl when switching between items

---
 .../SegmentedControl.module.css               | 34 ++++++++++++++++---
 1 file changed, 29 insertions(+), 5 deletions(-)

diff --git a/packages/react/src/SegmentedControl/SegmentedControl.module.css b/packages/react/src/SegmentedControl/SegmentedControl.module.css
index a4127e959bb..b4567b1ba85 100644
--- a/packages/react/src/SegmentedControl/SegmentedControl.module.css
+++ b/packages/react/src/SegmentedControl/SegmentedControl.module.css
@@ -1,6 +1,7 @@
 .SegmentedControl {
   /* TODO: use primitive `control.medium.size` when it is available instead of '32px' */
   --segmented-control-icon-width: 32px;
+  --segmented-control-outer-radius: var(--borderRadius-medium);
 
   display: inline-flex;
 
@@ -12,6 +13,24 @@
   background-color: var(--controlTrack-bgColor-rest);
   border: var(--borderWidth-thin) solid var(--controlTrack-borderColor-rest, transparent);
   border-radius: var(--borderRadius-medium);
+  position: relative;
+
+  @supports (anchor-name: --value) {
+    &::before {
+      position-anchor: --segmented-control-current-item;
+      content: '';
+      position: absolute;
+      inset: anchor(top) anchor(right) anchor(bottom) anchor(left);
+      background-color: var(--controlKnob-bgColor-rest);
+      border: var(--borderWidth-thin) solid var(--controlKnob-borderColor-rest);
+      /* stylelint-disable-next-line primer/borders */
+      border-radius: var(--segmented-control-outer-radius);
+
+      @media (prefers-reduced-motion: no-preference) {
+        transition: inset var(--base-duration-200) var(--base-easing-easeInOut);
+      }
+    }
+  }
 
   /* Responsive full-width */
   &[data-full-width='true'] {
@@ -209,7 +228,6 @@
   /* TODO: use primitive `primer.control.medium.paddingInline.normal` when it is available */
   --segmented-control-button-inner-padding: 12px;
   --segmented-control-button-bg-inset: 4px;
-  --segmented-control-outer-radius: var(--borderRadius-medium);
 
   width: 100%;
   height: 100%;
@@ -294,6 +312,8 @@
   border-color: transparent;
   border-style: solid;
   border-width: var(--borderWidth-thin);
+  background-color: transparent;
+  transition: background-color var(--base-duration-200) var(--base-easing-easeInOut);
 
   /*
     innerRadius = outerRadius - distance/2
@@ -314,10 +334,14 @@
     padding-right: var(--segmented-control-button-inner-padding);
     /* stylelint-disable-next-line primer/spacing */
     padding-left: var(--segmented-control-button-inner-padding);
-    background-color: var(--controlKnob-bgColor-rest);
-    border-color: var(--controlKnob-borderColor-rest);
-    /* stylelint-disable-next-line primer/borders */
-    border-radius: var(--segmented-control-outer-radius);
+    anchor-name: --segmented-control-current-item;
+
+    @supports not (anchor-name: --value) {
+      background-color: var(--controlKnob-bgColor-rest);
+      border-color: var(--controlKnob-borderColor-rest);
+      /* stylelint-disable-next-line primer/borders */
+      border-radius: var(--segmented-control-outer-radius);
+    }
   }
 }
 

From 57ffdad23bd5eb7562c0faf658977bcba0c54adf Mon Sep 17 00:00:00 2001
From: Ian Sanders <iansan5653@github.com>
Date: Thu, 13 Aug 2026 17:34:22 -0400
Subject: [PATCH 2/2] Add changeset for SegmentedControl animation

Add a changeset for animating SegmentedControl transitions.
---
 .changeset/three-places-invent.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/three-places-invent.md

diff --git a/.changeset/three-places-invent.md b/.changeset/three-places-invent.md
new file mode 100644
index 00000000000..9f01eeec617
--- /dev/null
+++ b/.changeset/three-places-invent.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Animate `SegmentedControl` when switching between items