equipment looks

packages/website/src/components/Button/index.module.css

@@ -21,20 +21,20 @@
     padding: var(--space-2) var(--space-3);
   }
 
-  &[data-list-child="true"] {
-    &:not(:first-child) {
-      border-top-left-radius: 0;
-      border-bottom-left-radius: 0;
+  &[data-list-child="true"]:not(:first-child),
+  *:not(:first-child) > &[data-parent-list-child="true"] {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
 
-      border-left-width: var(--space-0);
-    }
+    border-left-width: var(--space-0);
+  }
 
-    &:not(:last-child) {
-      border-top-right-radius: 0;
-      border-bottom-right-radius: 0;
+  &[data-list-child="true"]:not(:last-child),
+  *:not(:last-child) > &[data-parent-list-child="true"] {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
 
-      border-right-width: var(--space-0);
-    }
+    border-right-width: var(--space-0);
   }
 
   svg,
@@ -74,6 +74,6 @@
 
   &[data-variant="surface"],
   &[data-variant="outline"] {
-    border: var(--space-1) solid var(--accent-6);
+    outline: var(--space-1) solid var(--accent-6);
   }
 }

packages/website/src/components/Button/index.tsx

@@ -8,8 +8,10 @@ export interface ButtonProps extends ComponentProps<"button"> {
   radius?: `${1 | 2 | 3}` | "max";
   variant?: "solid" | "surface" | "soft" | "inverted" | "ghost" | "outline";
   size?: "regular" | "minor";
-  listChild?: boolean;
   highContrast?: boolean; // TODO: add high contrast
+
+  listChild?: boolean;
+  parentListChild?: boolean;
 }
 
 export const LIGHT_TEXT_COLORS = new Set<Color>([
@@ -34,7 +36,9 @@ export function Button({
   style,
   radius = "max",
   size = "regular",
+
   listChild,
+  parentListChild,
   ...props
 }: ButtonProps) {
   return (
@@ -46,6 +50,7 @@ export function Button({
       data-radius={radius}
       data-size={size}
       data-list-child={listChild}
+      data-parent-list-child={parentListChild}
       {...props}
     />
   );