From 971162c914d967b241c07e36b57600b30aa73dc2 Mon Sep 17 00:00:00 2001
From: Robert Snow <rsnow@adobe.com>
Date: Tue, 3 Mar 2026 14:39:19 -0600
Subject: [PATCH 1/2] fix: S2 ListView polish styles (#9717)

* fix: S2 ListBox styles for scrollbars

* remove corner radius for non quiet

* fix: ListView item size and borders (#9723)

* always round first and last items

* fix focus ring

* force rounded corners when focused

---------

Co-authored-by: Devon Govett <devongovett@gmail.com>
---
 packages/@react-spectrum/s2/src/ListView.tsx | 167 +++++++++----------
 1 file changed, 79 insertions(+), 88 deletions(-)

diff --git a/packages/@react-spectrum/s2/src/ListView.tsx b/packages/@react-spectrum/s2/src/ListView.tsx
index 05cb31186d3..ae593ccd5a4 100644
--- a/packages/@react-spectrum/s2/src/ListView.tsx
+++ b/packages/@react-spectrum/s2/src/ListView.tsx
@@ -280,9 +280,8 @@ const listitem = style<GridListItemRenderProps & {
   selectionStyle?: 'highlight' | 'checkbox',
   scale?: 'medium' | 'large'
 }>({
-  ...focusRing(),
+  outlineStyle: 'none',
   boxSizing: 'border-box',
-  outlineOffset: -2,
   columnGap: 0,
   paddingX: 0,
   paddingY: 8,
@@ -320,7 +319,6 @@ const listitem = style<GridListItemRenderProps & {
     default: 'default',
     isLink: 'pointer'
   },
-  transition: 'default',
   '--borderColor': {
     type: 'borderColor',
     value: {
@@ -339,15 +337,7 @@ const listitem = style<GridListItemRenderProps & {
     default: 1,
     isLastItem: {
       default: 1,
-      isQuiet: {
-        selectionStyle: {
-          checkbox: 0,
-          highlight: {
-            default: 0,
-            isSelected: 1
-          }
-        }
-      }
+      isQuiet: 0
     }
   },
   borderStartWidth: 0,
@@ -355,38 +345,8 @@ const listitem = style<GridListItemRenderProps & {
   borderStyle: 'solid',
   borderColor: {
     default: '--borderColor',
-    isSelected: {
-      selectionStyle: {
-        highlight: {
-          default: 'transparent',
-          isNextSelected: 'transparent'
-        },
-        checkbox: {
-          default: '--borderColor',
-          isNextSelected: selectedBackground
-        }
-      }
-    }
-  },
-  borderTopStartRadius: {
-    isFirstItem: 'default'
-  },
-  borderTopEndRadius: {
-    isFirstItem: 'default'
-  },
-  borderBottomStartRadius: {
-    isLastItem: {
-      isQuiet: {
-        isSelected: 'default'
-      }
-    }
-  },
-  borderBottomEndRadius: {
-    isLastItem: {
-      isQuiet: {
-        isSelected: 'default'
-      }
-    }
+    isNextSelected: 'transparent',
+    isSelected: 'transparent'
   }
 });
 
@@ -400,22 +360,22 @@ const listRowBackground = style<GridListItemRenderProps & {
   isNextNotSelected?: boolean,
   selectionStyle?: 'highlight' | 'checkbox'
 }>({
+  ...focusRing(),
+  outlineOffset: -2,
   position: 'absolute',
   zIndex: -1,
-  top: 0,
+  top: {
+    default: 0,
+    isSelected: '[-1px]',
+    // Don't overlap focus ring of row above.
+    isPrevSelected: 0,
+    isFirstItem: 0
+  },
   left: 0,
   right: 0,
   bottom: {
     default: 0,
-    isSelected: {
-      selectionStyle: {
-        checkbox: 0,
-        highlight: {
-          default: 0,
-          isNextSelected: '[-1px]'
-        }
-      }
-    }
+    isSelected: '[-1px]'
   },
   backgroundColor: {
     default: '--rowBackgroundColor',
@@ -440,9 +400,10 @@ const listRowBackground = style<GridListItemRenderProps & {
           isFocusVisible: selectedActiveBackground
         },
         highlight: {
-          default: 'blue-900/10',
-          isHovered: 'blue-900/15',
-          isPressed: 'blue-900/15'
+          // Use solid colors rather than transparent because the rows overlap.
+          default: colorMix('gray-25', 'blue-900', 10),
+          isHovered: colorMix('gray-25', 'blue-900', 15),
+          isPressed: colorMix('gray-25', 'blue-900', 15)
         }
       }
     },
@@ -451,64 +412,94 @@ const listRowBackground = style<GridListItemRenderProps & {
     }
   },
   borderTopStartRadius: {
-    isFirstItem: 'default'
+    isFirstItem: {
+      isSelected: {
+        selectionStyle: {
+          checkbox: 'none',
+          highlight: 'default'
+        }
+      },
+      isQuiet: 'default',
+      isFocusVisible: 'default'
+    }
   },
   borderTopEndRadius: {
-    isFirstItem: 'default'
+    isFirstItem: {
+      isSelected: {
+        selectionStyle: {
+          checkbox: 'none',
+          highlight: 'default'
+        }
+      },
+      isQuiet: 'default',
+      isFocusVisible: 'default'
+    }
   },
   borderBottomStartRadius: {
     isLastItem: {
-      isQuiet: {
-        isSelected: 'default'
-      }
+      isSelected: {
+        selectionStyle: {
+          checkbox: 'none',
+          highlight: 'default'
+        }
+      },
+      isQuiet: 'default',
+      isFocusVisible: 'default'
     }
   },
   borderBottomEndRadius: {
     isLastItem: {
-      isQuiet: {
-        isSelected: 'default'
-      }
+      isSelected: {
+        selectionStyle: {
+          checkbox: 'none',
+          highlight: 'default'
+        }
+      },
+      isQuiet: 'default',
+      isFocusVisible: 'default'
     }
   },
   borderTopWidth: {
-    default: 1,
-    isPrevSelected: {
+    default: {
       selectionStyle: {
-        highlight: 0,
-        checkbox: 0
+        checkbox: 0,
+        highlight: 1
       }
-    }
+    },
+    isPrevSelected: 0
   },
   borderBottomWidth: {
-    default: 1,
-    isNextSelected: {
+    default: {
       selectionStyle: {
-        highlight: 0,
-        checkbox: 0
+        checkbox: 0,
+        highlight: 1
       }
     },
-    isLastItem: {
-      default: 1,
-      isQuiet: {
-        selectionStyle: {
-          checkbox: 0,
-          highlight: {
-            default: 0,
-            isSelected: 1
-          }
-        }
+    isNextSelected: 0
+  },
+  borderStartWidth: {
+    default: {
+      selectionStyle: {
+        checkbox: 0,
+        highlight: 1
+      }
+    }
+  },
+  borderEndWidth: {
+    default: {
+      selectionStyle: {
+        checkbox: 0,
+        highlight: 1
       }
     }
   },
-  borderStartWidth: 1,
-  borderEndWidth: 1,
   borderStyle: 'solid',
   borderColor: {
     default: 'transparent',
     isSelected: {
       selectionStyle: {
-        highlight: '--borderColor',
-        checkbox: 'transparent'
+        checkbox: 'transparent',
+        highlight: '--borderColor'
       }
     }
   }

From a6e720d35bf4acf2564bde14dc1b7fdca372372a Mon Sep 17 00:00:00 2001
From: Daniel Lu <dl1644@gmail.com>
Date: Tue, 3 Mar 2026 12:48:06 -0800
Subject: [PATCH 2/2] chore: bump macro plugin version for Stackblitz (#9730)

---
 packages/dev/s2-docs/src/StackBlitz.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/dev/s2-docs/src/StackBlitz.tsx b/packages/dev/s2-docs/src/StackBlitz.tsx
index 7383e95fc65..f454ac3e4b9 100644
--- a/packages/dev/s2-docs/src/StackBlitz.tsx
+++ b/packages/dev/s2-docs/src/StackBlitz.tsx
@@ -80,7 +80,7 @@ function getFiles(
           'tailwindcss-animate': '^1'
         } : {}),
         ...(type === 's2' ? {
-          'unplugin-parcel-macros': '^0.1.2-alpha.1'
+          'unplugin-parcel-macros': '^0.2.0'
         } : {})
       }
     }, null, 2) + '\n',