@multiplatform.one/components 7.11.0 → 7.16.0

package/src/overlayElevation.spec.tsx

@@ -28,14 +28,16 @@ afterEach(cleanup);
 // same hole MPO-40 / MPO-44 / MPO-48 all fell through, one layer further in:
 // the fragment reaches the frame and still never reaches the pixel.
 
-/** Reference §8, tamagui-rendered-reference.md — the one dialog shadow. */
-const referenceOverlayShadow = "0px 12px 24px rgba(0,0,0,0.12)";
+/** Reference §8 dialog shadow: the overlay ladder's `$5` stop (MPO-99). */
+const dialogStopPaint = "0 12px 24px rgba(0,0,0,0.12)";
 /** Same §8 geometry and alpha, hue inverted — LC-85 forbids a dark umbra. */
-const referenceOverlayShadowDark = "0px 12px 24px rgba(255,255,255,0.12)";
-/** `webShadowLight.$1` — the in-page control stop every Button carries. */
-const controlStopPaint = "0 1px 2px rgba(0,0,0,0.12), 0 0 1px rgba(0,0,0,0.08)";
-/** `webShadowLight.$2` — `elevatedSurface`'s own overlay paint. */
-const elevatedSurfacePaint = "0 3px 6px rgba(0,0,0,0.15), 0 2px 4px rgba(0,0,0,0.10)";
+const dialogStopPaintDark = "0 12px 24px rgba(255,255,255,0.12)";
+/** Reference §8 popper shadow: the overlay ladder's `$3` stop (MPO-99). */
+const popperStopPaint = "0 4px 8px rgba(0,0,0,0.10), 0 12px 32px rgba(0,0,0,0.08)";
+/** `webShadowLight.$2` — the overlay ladder's default `small` stop. */
+const overlaySmallPaint = "0 3px 6px rgba(0,0,0,0.15), 0 2px 4px rgba(0,0,0,0.10)";
+/** `webShadowLight.$4` — the control stop at elevation large. */
+const controlLargePaint = "0 10px 20px rgba(0,0,0,0.15), 0 3px 6px rgba(0,0,0,0.10)";
 
 function frame(id: string): HTMLElement {
   const el = document.querySelector(`[data-testid="${id}"]`);
@@ -61,9 +63,9 @@ function bgAtoms(id: string): string[] {
     .filter((c) => c.startsWith("_bg-"));
 }
 
-function renderDialogsBesideAButton() {
+function renderDialogsBesideAButton(elevation?: "small" | "medium" | "large") {
   renderWithProviders(
-    <Preset>
+    <Preset overrides={elevation ? { elevation } : undefined}>
       <Button testID="control">Save</Button>
       <Dialog modal open>
         <Dialog.Portal>
@@ -79,61 +81,49 @@ function renderDialogsBesideAButton() {
   );
 }
 
-describe("overlay elevation is a different distance off the surface (MPO-49)", () => {
-  it("DialogContent PAINTS the reference §8 shadow, not the $2 fragment underneath it", () => {
-    renderDialogsBesideAButton();
-    expect(paintedShadow("dialog")).toBe(referenceOverlayShadow);
-    expect(paintedShadow("dialog")).not.toBe(elevatedSurfacePaint);
-    expect(paintedShadow("dialog")).not.toBe(controlStopPaint);
+describe("overlay elevation is a different distance off the surface (MPO-49, MPO-96, MPO-99)", () => {
+  it("DialogContent paints the overlay ladder, reaching the reference §8 dialog shadow at large", () => {
+    renderDialogsBesideAButton("large");
+    expect(paintedShadow("dialog")).toBe(dialogStopPaint);
+    expect(paintedShadow("dialog")).not.toBe(paintedShadow("control"));
+    expect(paintedShadow("control")).toBe(controlLargePaint);
+  });
+
+  it("at medium the overlay paints the §8 popper stop, not the control's $2", () => {
+    renderDialogsBesideAButton("medium");
+    expect(paintedShadow("dialog")).toBe(popperStopPaint);
+    expect(paintedShadow("dialog")).not.toBe(paintedShadow("control"));
   });
 
-  it("the atom and the inline style agree — no dead §8 class over a live $2 paint", () => {
+  it("at the default stop the control is flat and the overlay still lifts", () => {
     renderDialogsBesideAButton();
-    // The atom half alone does NOT discriminate: it reads `_bxsh-0px12px24px…`
-    // with the defect present too, which is why a class-only probe passes
-    // against a frame painting `$2`. Pair it with the painted value.
+    expect(paintedShadow("control")).toBe("");
+    expect(paintedShadow("dialog")).toBe(overlaySmallPaint);
+  });
+
+  it("the atom and the inline style agree — no dead class under a different live paint", () => {
+    renderDialogsBesideAButton("large");
+    // The atom half alone does not discriminate (a class can name one shadow
+    // while the inline style paints another), so pair it with the painted value.
     expect(shadowAtoms("dialog")).toHaveLength(1);
     expect(shadowAtoms("dialog")[0]).toMatch(/^_bxsh-0px12px24px/);
     expect(paintedShadow("dialog")).toContain("12px 24px");
-  });
-
-  it("the dialog shadow differs from the Button shadow, and the Button keeps the $1 stop", () => {
-    renderDialogsBesideAButton();
-    // "differs" alone does not discriminate: with the defect present the
-    // dialog paints `$2` and the Button `$1`, which also differ. The §8 value
-    // itself is pinned by the first case in this file; here the control side
-    // is pinned to `$1` so a Button regression cannot fake this one either.
-    expect(paintedShadow("control")).toBe(controlStopPaint);
-    expect(paintedShadow("dialog")).not.toBe(paintedShadow("control"));
     expect(shadowAtoms("dialog")).not.toEqual(shadowAtoms("control"));
   });
 
-  it("AlertDialogContent wears the same §8 shadow — one dialog row, one distance", () => {
+  it("AlertDialogContent wears the same ladder stop as DialogContent — one dialog row, one distance", () => {
     // Tamagui's AlertDialog.Content IS Dialog.Content, and reference §8
     // carries a single dialog row. confirm-dialog-{destructive,gated,warning}
     // render through this frame.
-    renderDialogsBesideAButton();
-    expect(paintedShadow("alertdialog")).toBe(referenceOverlayShadow);
+    renderDialogsBesideAButton("large");
+    expect(paintedShadow("alertdialog")).toBe(dialogStopPaint);
     expect(paintedShadow("alertdialog")).toBe(paintedShadow("dialog"));
   });
 
   it("dark inverts the hue and keeps the §8 geometry; the ground steps up the ramp (LC-85)", () => {
-    renderWithProviders(
-      <Preset>
-        <Dialog modal open>
-          <Dialog.Portal>
-            <DialogContent testID="dialog">dialog</DialogContent>
-          </Dialog.Portal>
-        </Dialog>
-      </Preset>,
-    );
-    expect(paintedShadow("dialog")).toBe(referenceOverlayShadow);
-    expect(bgAtoms("dialog")).toEqual(["_bg-background"]);
-    cleanup();
-
     renderWithProviders(
       <Theme name="dark">
-        <Preset>
+        <Preset overrides={{ elevation: "large" }}>
           <Dialog modal open>
             <Dialog.Portal>
               <DialogContent testID="dialog">dialog</DialogContent>
@@ -143,12 +133,10 @@ describe("overlay elevation is a different distance off the surface (MPO-49)", (
       </Theme>,
     );
     // LC-85 DARK-ELEVATION-TINT: light-coloured shadow, never a black umbra.
-    expect(paintedShadow("dialog")).toBe(referenceOverlayShadowDark);
-    expect(paintedShadow("dialog")).not.toBe(referenceOverlayShadow);
+    expect(paintedShadow("dialog")).toBe(dialogStopPaintDark);
     expect(paintedShadow("dialog")).not.toMatch(/rgba\(0,\s*0,\s*0/);
     // resolveKnobs owns the dark ground: `overlayFill` steps the filled rest
-    // fill up the ramp under dark + elevation (LC-85). Asserted so a later
-    // change to that rule shows up here rather than silently on a board.
-    expect(bgAtoms("dialog")).toEqual(["_bg-color2"]);
+    // fill up the ramp under dark + elevation (LC-85).
+    expect(bgAtoms("dialog")).toEqual(["_bg-color4"]);
   });
 });

package/src/surfaces.spec.tsx

@@ -88,14 +88,14 @@ describe("SheetFrame overlay chrome", () => {
 });
 
 describe("DialogContent overlay elevation (MPO-49)", () => {
-  it("binds overlayElevation, elevate=false, and the §8 overlay shadow — not Tamagui $1 elevate", () => {
+  it("binds the overlay ladder through elevatedSurface with elevate=false, and hardcodes no shadow (MPO-99)", () => {
     const src = readFileSync(join(dirname(fileURLToPath(import.meta.url)), "surfaces.tsx"), "utf8");
     const start = src.indexOf("// ── DialogContent");
     const end = src.indexOf("// ── DialogOverlay");
     const dialog = src.slice(start, end);
     expect(dialog).toContain("elevate={false}");
-    expect(dialog).toContain("overlayElevationShadow");
-    expect(dialog).toContain("rgba(0,0,0,0.12)");
+    expect(dialog).not.toContain("overlayElevationShadow");
+    expect(dialog).not.toContain("rgba(0,0,0,0.12)");
     expect(dialog).toContain("elevatedSurface");
     expect(dialog).toContain("containerRadius");
     expect(dialog).toContain("panelPadding");
@@ -122,9 +122,12 @@ describe("DialogContent overlay elevation (MPO-49)", () => {
 //   dialog elevation     defect Button/control `$1` -> `_bxsh-0px1px2px…`
 //                        fixed  reference §8        -> `_bxsh-0px12px24px…`
 //
+// Since MPO-99 the §8 value is the overlay ladder's `$5` stop, which the
+// dialog reaches at elevation large; the control paints `$4` there.
+//
 // A "differs from the Button" assertion does NOT discriminate: the Button
 // paints `0 6px 12px` from its own source in both states, so that comparison
-// passes with the defect present. Assert against the $1 CONTROL stop.
+// passes with the defect present. Assert against the CONTROL stop.
 
 function atomsWithPrefix(el: Element | null, prefix: string): string[] {
   if (!el) return [];
@@ -134,9 +137,9 @@ function atomsWithPrefix(el: Element | null, prefix: string): string[] {
     .sort();
 }
 
-/** The `$1` control paint — `webShadowLight.$1`, "0 1px 2px …" (resolveKnobs.ts). */
-const controlStopShadowAtom = /^_bxsh-0px1px2px/;
-/** Rendered reference §8 DialogContent — `rgba(0,0,0,0.12) 0 12px 24px`. */
+/** The `$4` control paint at elevation large — `webShadowLight.$4`, "0 10px 20px …". */
+const controlStopShadowAtom = /^_bxsh-0px10px20px/;
+/** The `$5` overlay stop at elevation large — reference §8 dialog shadow, "0 12px 24px …". */
 const overlayStopShadowAtom = /^_bxsh-0px12px24px/;
 
 describe("surfaces address $background at the FRAME (MPO-19 X5/X6)", () => {
@@ -164,9 +167,9 @@ describe("surfaces address $background at the FRAME (MPO-19 X5/X6)", () => {
 });
 
 describe("DialogContent paints the OVERLAY elevation stop, not the control one (MPO-49)", () => {
-  it("renders the reference §8 shadow and not the Button $1 stop", () => {
+  it("renders the reference §8 shadow at elevation large and not the Button $4 stop (MPO-99)", () => {
     renderWithProviders(
-      <Preset>
+      <Preset overrides={{ elevation: "large" }}>
         <Button testID="mpo-button-control">Save</Button>
         <Dialog modal open>
           <Dialog.Portal>
@@ -184,7 +187,7 @@ describe("DialogContent paints the OVERLAY elevation stop, not the control one (
     const dialogShadow = atomsWithPrefix(dialog, "_bxsh-");
     expect(dialogShadow, "DialogContent paints exactly one shadow atom").toHaveLength(1);
     expect(dialogShadow[0], "dialog wears the §8 overlay shadow").toMatch(overlayStopShadowAtom);
-    expect(dialogShadow[0], "dialog must not wear the $1 control stop").not.toMatch(
+    expect(dialogShadow[0], "dialog must not wear the $4 control stop").not.toMatch(
       controlStopShadowAtom,
     );
     expect(dialogShadow, "dialog and control are different distances off the surface").not.toEqual(

package/src/surfaces.tsx

@@ -7,7 +7,6 @@ import {
   Popover,
   Sheet,
   View,
-  isWeb,
   type DialogContentProps as TamaguiDialogContentProps,
   type DialogOverlayProps as TamaguiDialogOverlayProps,
   type TamaguiElement,
@@ -103,42 +102,16 @@ export const DialogContent = forwardRef<
   );
 });
 
-/**
- * Reference §8 overlay shadow — rgba(0,0,0,0.12) 0 12px 24px. Not Button $1,
- * and not the `$2` fragment `elevatedSurface` carries either: that fragment's
- * web paint arrives as an INLINE style (`elevationPaint` emits
- * `style.boxShadow`, and Tamagui stamps `!important` only on pseudo atoms),
- * so a shadow expressed only as `shadow*` props is a dead class atom under a
- * live `$2` paint. The §8 value must land on the `style` prop too, replacing
- * the fragment's. Dark inverts the hue and keeps the geometry — LC-85
- * DARK-ELEVATION-TINT forbids a black umbra on a dark ground.
- */
-const overlayElevationShadow = {
-  light: {
-    shadowColor: "rgba(0,0,0,0.12)",
-    shadowOffset: { width: 0, height: 12 },
-    shadowOpacity: 1,
-    shadowRadius: 24,
-    ...(isWeb ? { style: { boxShadow: "0px 12px 24px rgba(0,0,0,0.12)" } } : null),
-  },
-  dark: {
-    shadowColor: "rgba(255,255,255,0.12)",
-    shadowOffset: { width: 0, height: 12 },
-    shadowOpacity: 1,
-    shadowRadius: 24,
-    ...(isWeb ? { style: { boxShadow: "0px 12px 24px rgba(255,255,255,0.12)" } } : null),
-  },
-} as const;
-
 const DialogContentInner = forwardRef<
   TamaguiElement,
   TamaguiDialogContentProps & { children?: ReactNode }
 >(function DialogContentInner({ children, ...props }, ref) {
   const { knobProps } = useResolvedKnobs({ component: "DialogContent" });
   // ThemeableStack unstyled:false defaults `elevate: true`, which paints
-  // getElevation(size) — `$true` is the same $1 stop every Button carries.
-  // Bind the §8 overlay shadow instead. Geometry (panelPadding 18,
-  // containerRadius 9, border 1px) stays on the recipe fragments below.
+  // getElevation(size) — `$true` is a control stop. `elevate={false}` leaves
+  // the overlay ladder in `elevatedSurface` as the only shadow (MPO-99).
+  // Geometry (panelPadding 18, containerRadius 9, border 1px) stays on the
+  // recipe fragments below.
   return (
     <Dialog.Content
       ref={ref}
@@ -147,7 +120,6 @@ const DialogContentInner = forwardRef<
       {...knobProps.panelPadding}
       {...knobProps.gap}
       elevate={false}
-      {...overlayElevationShadow[knobProps.scheme]}
       transition={knobProps.transition}
       enterStyle={overlayEnterExit}
       exitStyle={overlayEnterExit}
@@ -227,7 +199,6 @@ const AlertDialogContentInner = forwardRef<
       {...knobProps.panelPadding}
       {...knobProps.gap}
       elevate={false}
-      {...overlayElevationShadow[knobProps.scheme]}
       transition={knobProps.transition}
       enterStyle={overlayEnterExit}
       exitStyle={overlayEnterExit}

package/src/tamagui.spec.ts

@@ -48,11 +48,11 @@ const ALLOWLIST_VALUE_NAMES = [
   // barrel and had been red ever since. MPO-78: CI runs `turbo run build`
   // only, so nothing caught it.)
   "Circle",
-  // MPO-21 G1 / G3 / G4. Restored by MPO-148; MPO-169 locks them here so a
+  // MPO-21 G3 / G4. Restored by MPO-148; MPO-169 locks them here so a
   // later Adapt-style rewrite cannot drop them without this spec going red.
   // LinearGradient (G2) is not on the main tamagui barrel — see the dedicated
-  // assertion below rather than this identity check.
-  "Collapsible",
+  // assertion below rather than this identity check. Collapsible (G1) is a
+  // house shadow since MPO-265: its Trigger defaults to type="button".
   "Group",
   "ListItem",
   "ScrollView",
@@ -138,6 +138,7 @@ const HOUSE_SHADOWS = [
   "Avatar",
   "Button",
   "Card",
+  "Collapsible",
   "Fieldset",
   "H1",
   "H2",

package/src/tamagui.ts

@@ -32,7 +32,6 @@ export {
   Circle,
   Group,
   ListItem,
-  ScrollView,
   Spacer,
   Square,
   Unspaced,
@@ -44,6 +43,10 @@ export {
   YStack,
 } from "tamagui";
 
+// Raw tamagui on web. On native ./ScrollView/index.native.tsx hands onScroll
+// to the RN ScrollView, which tamagui's own styled scroller drops (MPO-368).
+export { ScrollView } from "./ScrollView";
+
 // MPO-21 G2: LinearGradient is NOT on the main tamagui barrel — it lives
 // on the `tamagui/linear-gradient` subpath.
 export { LinearGradient } from "tamagui/linear-gradient";

package/src/textAccentSecondary.spec.tsx

@@ -18,9 +18,9 @@
  */
 import { cleanup, screen } from "@testing-library/react";
 import { renderWithProviders } from "@multiplatform.one/test-utils";
-import { Preset } from "@multiplatform.one/theme";
+import { Preset, useResolvedKnobs } from "@multiplatform.one/theme";
 import type { ReactElement } from "react";
-import { Theme } from "tamagui";
+import { SizableText, Theme } from "tamagui";
 import { afterEach, describe, expect, it } from "vitest";
 import { Accordion } from "./Accordion";
 import { componentColors } from "./componentColors";
@@ -177,6 +177,104 @@ describe("Meter — textAccent reaches the ok-zone value readout (MPO-154)", ()
   });
 });
 
+/**
+ * low == medium alone also passes a surface pinned to a static step, so the
+ * dim stops are checked against a probe painting the resolver's own colour.
+ */
+function restInk(el: Element): string | undefined {
+  for (const cls of Array.from(el.classList)) {
+    if (!cls.startsWith("_col-")) continue;
+    const value = cls.slice("_col-".length);
+    if (/^\d*(hover|active|focus|press|disabled)/.test(value)) continue;
+    return value;
+  }
+  return undefined;
+}
+
+function ResolverInk() {
+  const { knobProps } = useResolvedKnobs();
+  return (
+    <SizableText data-resolver-ink={knobProps.textAccentColor} color={knobProps.textAccentColor}>
+      resolver ink
+    </SizableText>
+  );
+}
+
+function againstResolver(
+  scheme: Scheme,
+  accent: Accent,
+  node: ReactElement,
+  pick: (container: HTMLElement) => Element | null,
+) {
+  const { container } = renderWithProviders(
+    inScheme(
+      scheme,
+      <Preset overrides={{ textAccent: accent }}>
+        {node}
+        <ResolverInk />
+      </Preset>,
+    ),
+  );
+  const surface = pick(container);
+  const probe = container.querySelector("[data-resolver-ink]");
+  const result = {
+    surface: surface ? restInk(surface) : undefined,
+    resolver: probe ? restInk(probe) : undefined,
+    token: probe?.getAttribute("data-resolver-ink") ?? null,
+  };
+  cleanup();
+  return result;
+}
+
+describe("the dim stops paint the resolver's AA floor, not a pinned step (MPO-154)", () => {
+  const surfaces: Array<[string, ReactElement, (container: HTMLElement) => Element | null]> = [
+    [
+      "Tabs inactive label",
+      <Tabs
+        key="tabs"
+        items={[
+          { value: "address", label: "Address & Contact", content: <>address panel</> },
+          { value: "settings", label: "Settings", content: <>settings panel</> },
+        ]}
+        defaultValue="address"
+      />,
+      () => screen.getByText("Settings"),
+    ],
+    [
+      "Accordion description",
+      <Accordion key="accordion" defaultValue="shipping">
+        <Accordion.Item value="shipping">
+          <Accordion.Trigger description="Where should we deliver the order?">
+            Shipping details
+          </Accordion.Trigger>
+          <Accordion.Content>ship</Accordion.Content>
+        </Accordion.Item>
+      </Accordion>,
+      () => screen.getByText("Where should we deliver the order?"),
+    ],
+    [
+      "Quote attribution",
+      <Quote key="quote" cite="Alan Kay">
+        The best way to predict the future.
+      </Quote>,
+      (container) => container.querySelector("cite"),
+    ],
+  ];
+
+  for (const scheme of schemes) {
+    for (const [name, node, pick] of surfaces) {
+      for (const accent of ["low", "medium"] as const) {
+        it(`${scheme}: ${name} at ${accent} equals the resolver's textAccentColor`, () => {
+          const { surface, resolver, token } = againstResolver(scheme, accent, node, pick);
+          expect(token).toBe("$color11");
+          expect(resolver).toBeDefined();
+          expect(surface).toBe(resolver);
+        });
+      }
+    }
+  }
+});
+
 describe("componentColors keeps no second answer for secondary ink (MPO-154)", () => {
   it("the text table exposes no static secondary or muted step", () => {
     const text = componentColors.text as Record<string, string | undefined>;

package/src/views/Kanban.native.tsx

@@ -17,8 +17,9 @@ import React, {
   type ReactNode,
 } from "react";
 import { AccessibilityInfo, Animated } from "react-native";
-import { ListItem, ScrollView, Text, View, XStack, YStack, type YStackProps } from "tamagui";
+import { ListItem, Text, View, XStack, YStack, type YStackProps } from "tamagui";
 import { componentColors } from "../componentColors";
+import { ScrollView } from "../ScrollView";
 import { AsyncBoundary, useAsyncCount } from "../layouts/AsyncBoundary";
 import { EmptyState } from "../layouts/page";
 import { Card } from "../surfaces";
@@ -838,6 +839,7 @@ function KanbanColumnView<T>({
       overflow="hidden"
       transition={knobProps.transition}
       {...knobProps.borderRadius}
+      {...knobProps.containerRadius}
       {...knobProps.panelPadding}
       backgroundColor={isDropTarget ? componentColors.interactive.background : "transparent"}
       data-kanban-column={column.id}

package/src/views/Kanban.spec.tsx

@@ -112,6 +112,21 @@ describe("Kanban design law (SB-M-302 / LC-60)", () => {
     expect(fullColumn).not.toBe(noneColumn);
   });
 
+  it("caps the padded column frame at its own padding (DG-RAD-04 CONTAINER-CAP)", () => {
+    const columnRadius = (overrides: Parameters<typeof Preset>[0]["overrides"]) => {
+      renderWithProviders(
+        <Preset overrides={overrides}>
+          <Kanban columns={columns} renderCard={(item) => <span>{item.title}</span>} />
+        </Preset>,
+      );
+      const found = radiusClassOn(document.querySelector("[data-kanban-column='todo']"));
+      cleanup();
+      return found;
+    };
+    expect(columnRadius({ borderRadius: "full", space: "medium" })).toBe("_btlr-18px");
+    expect(columnRadius({ borderRadius: "large", space: "small" })).toBe("_btlr-13px");
+  });
+
   it("does not paint raw input-surface borders on the column frame", () => {
     renderWithProviders(
       <Kanban columns={columns} renderCard={(item) => <span>{item.title}</span>} />,

package/src/views/Kanban.tsx

@@ -1336,6 +1336,7 @@ function KanbanColumnView<T>({
       overflow="hidden"
       transition={knobProps.transition}
       {...knobProps.borderRadius}
+      {...knobProps.containerRadius}
       {...knobProps.panelPadding}
       backgroundColor={
         isDropTarget || isActiveColumn ? componentColors.interactive.background : "transparent"

package/src/views/List.spec.tsx

@@ -132,3 +132,53 @@ describe("ListRow ink — textAccent reaches the TEXT NODE (F11 / data-chrome ho
     expect(high).not.toEqual(low);
   });
 });
+
+describe("List rows are a CONTAINER-CAP stack (DG-RAD-04, MPO-56)", () => {
+  const rows = (overrides: {
+    borderRadius: "none" | "large" | "full";
+    space: "small" | "medium";
+  }) => {
+    renderWithProviders(
+      <Preset overrides={overrides}>
+        <List
+          items={documents}
+          aria-label="Documents"
+          renderItem={(item) => <ListRow title={item.title} />}
+          height={300}
+          estimateSize={50}
+        />
+      </Preset>,
+    );
+    const found = screen.getAllByRole("listitem").map((row) => ({
+      corners: atoms(row, ["_borderStartStartRadius-", "_borderEndEndRadius-"]).filter((a) =>
+        /Radius-\d+px$/.test(a),
+      ),
+      container: row.getAttribute("data-constraint-container"),
+      position: row.getAttribute("data-stack-position"),
+    }));
+    cleanup();
+    return found;
+  };
+
+  it("caps the outer corners at the row padding at full, square inside", () => {
+    const [first, middle, last] = rows({ borderRadius: "full", space: "medium" });
+    expect(first.corners).toEqual(["_borderEndEndRadius-0px", "_borderStartStartRadius-18px"]);
+    expect(middle.corners).toEqual(["_borderEndEndRadius-0px", "_borderStartStartRadius-0px"]);
+    expect(last.corners).toEqual(["_borderEndEndRadius-18px", "_borderStartStartRadius-0px"]);
+  });
+
+  it("caps large at 13 under space small", () => {
+    const [first] = rows({ borderRadius: "large", space: "small" });
+    expect(first.corners).toContain("_borderStartStartRadius-13px");
+  });
+
+  it("declares each row a StackedRow with its position", () => {
+    expect(
+      rows({ borderRadius: "large", space: "small" }).map((r) => [r.container, r.position]),
+    ).toEqual([
+      ["StackedRow", "first"],
+      ["StackedRow", "middle"],
+      ["StackedRow", "last"],
+    ]);
+  });
+});

package/src/views/List.tsx

@@ -4,6 +4,7 @@ import { Spinner } from "@multiplatform.one/forms";
 import { FlashList, type FlashListRef } from "@shopify/flash-list";
 import {
   MIN_PRESS_TARGET,
+  containerCapProps,
   ensureKeyboardModalityTracking,
   getGroupPosition,
   hairline,
@@ -13,6 +14,7 @@ import {
   useReadableTextOn,
   useResolvedKnobs,
   wasKeyboardFocus,
+  transitionProps,
 } from "@multiplatform.one/theme";
 import { useHotkey } from "@tanstack/react-hotkeys";
 import type { RegisterableHotkey } from "@tanstack/react-hotkeys";
@@ -280,7 +282,7 @@ export function List<T>({
   const estimateSize = estimateSizeProp ?? Math.max(MIN_PRESS_TARGET, knobProps.control.height);
   const rowPad = knobProps.panelPadding.padding;
   const onAccent = useReadableTextOn("$accentBackground");
-  const cornersRadius = knobProps.borderRadius.borderRadius;
+  const cornersRadius = knobProps.containerRadius.borderRadius;
   // No explicit height: hug content when the list is complete (page scrolls,
   // no dead space / nested scrollbar); cap + scroll internally only while
   // more pages can stream in (FlashList needs a bounded viewport to
@@ -475,6 +477,12 @@ export function List<T>({
                 {index > 0 ? <View {...hairline.line} /> : null}
                 <XStack
                   id={`${listId}-item-${index}`}
+                  data-stack-position={position}
+                  {...containerCapProps(
+                    "StackedRow",
+                    knobProps.borderRadius.borderRadius,
+                    knobProps.space,
+                  )}
                   {...({
                     "data-list-row": true,
                     ...(isSelected ? { "data-selected": true } : {}),
@@ -486,9 +494,9 @@ export function List<T>({
                   alignItems="center"
                   overflow="hidden"
                   // Rows form ONE stacked group: the hover/focus/selection
-                  // surface rounds with the radius knob only at the group's
-                  // outer corners; interiors stay square (LC-72). Hairlines
-                  // sit BETWEEN rows only — never after the last.
+                  // surface rounds only at the group's outer corners, capped
+                  // at the row padding (DG-RAD-04); interiors stay square
+                  // (LC-72). Hairlines sit BETWEEN rows only, never after the last.
                   {...corners}
                   role="listitem"
                   aria-selected={isSelected}
@@ -513,7 +521,7 @@ export function List<T>({
                     ...corners,
                   }}
                   cursor="pointer"
-                  {...(knobProps.transition ? { transition: knobProps.transition } : {})}
+                  {...transitionProps(knobProps.transition)}
                   onPress={() => {
                     commitSelection(index);
                     onItemClick?.(item);