@multiplatform.one/components 7.4.1 → 7.5.0

package/src/views/Kanban.native.tsx

@@ -1,4 +1,5 @@
 import { FlashList, type FlashListRef } from "@shopify/flash-list";
+import { Spinner } from "@multiplatform.one/forms";
 import {
   animationConfig,
   hairlineWidth,
@@ -6,8 +7,6 @@ import {
   radiusClassProps,
   useResolvedKnobs,
 } from "@multiplatform.one/theme";
-import { componentColors } from "../componentColors";
-import { EmptyState } from "../layouts/page";
 import React, {
   useCallback,
   useEffect,
@@ -17,20 +16,13 @@ import React, {
   useState,
   type ReactNode,
 } from "react";
-import { useTranslation } from "../shared/i18n";
 import { AccessibilityInfo, Animated } from "react-native";
-import {
-  Card,
-  ListItem,
-  ScrollView,
-  Spinner,
-  Text,
-  View,
-  XStack,
-  YStack,
-  type YStackProps,
-} from "tamagui";
+import { ListItem, ScrollView, Text, View, XStack, YStack, type YStackProps } from "tamagui";
+import { componentColors } from "../componentColors";
 import { AsyncBoundary, useAsyncCount } from "../layouts/AsyncBoundary";
+import { EmptyState } from "../layouts/page";
+import { Card } from "../surfaces";
+import { useTranslation } from "../shared/i18n";
 import {
   autoScrollVelocity,
   describeCancel,
@@ -756,16 +748,7 @@ export function Kanban<T>({
             }}
           >
             <View padding="$1">
-              <Card
-                size={knobProps.sizeToken}
-                padding={0}
-                {...knobProps.borderRadius}
-                borderWidth={knobProps.inputSurface.borderWidth}
-                borderColor="$borderColor"
-                backgroundColor="$color1"
-                overflow="hidden"
-                {...LIFT_SHADOW}
-              >
+              <Card overflow="hidden" {...LIFT_SHADOW}>
                 {renderCard(drag.item)}
               </Card>
             </View>
@@ -855,19 +838,10 @@ function KanbanColumnView<T>({
       overflow="hidden"
       transition={knobProps.transition}
       {...knobProps.borderRadius}
-      backgroundColor={
-        isDropTarget
-          ? componentColors.interactive.background
-          : componentColors.surface.background
-      }
-      borderWidth={knobProps.inputSurface.borderWidth}
-      borderColor={
-        isDropTarget ? componentColors.interactive.border : componentColors.surface.border
-      }
+      {...knobProps.panelPadding}
+      backgroundColor={isDropTarget ? componentColors.interactive.background : "transparent"}
+      data-kanban-column={column.id}
     >
-      {column.color ? (
-        <View height={3} width="100%" backgroundColor={column.color as any} />
-      ) : null}
       <ListItem
         title={column.title}
         icon={
@@ -878,12 +852,13 @@ function KanbanColumnView<T>({
               height={8}
               borderRadius={4}
               backgroundColor={column.color as any}
+              data-kanban-column-dot
             />
           ) : undefined
         }
         iconAfter={
           itemCount !== undefined || renderColumnActions ? (
-            <XStack alignItems="center" gap="$1">
+            <XStack alignItems="center" {...knobProps.gap}>
               {itemCount !== undefined && (
                 <Text
                   color={componentColors.text.muted}
@@ -969,18 +944,21 @@ function KanbanColumnView<T>({
                 >
                   <Card
                     id={`${kanbanId}-col-${columnIndex}-card-${index}`}
-                    size={knobProps.sizeToken}
-                    padding={0}
-                    {...knobProps.borderRadius}
                     elevation={knobProps.elevation}
                     minHeight={MIN_PRESS_TARGET}
-                    borderWidth={knobProps.inputSurface.borderWidth}
-                    borderColor={ghost ? componentColors.interactive.border : "$borderColor"}
-                    borderStyle={ghost ? ("dashed" as any) : undefined}
-                    backgroundColor="$color1"
+                    {...(ghost
+                      ? {
+                          borderWidth: hairlineWidth,
+                          borderColor: componentColors.interactive.border,
+                          borderStyle: "dashed" as any,
+                        }
+                      : undefined)}
                     hoverStyle={{ backgroundColor: componentColors.interactive.background }}
                     pressStyle={{ scale: 0.98 }}
                     overflow="hidden"
+                    data-kanban-card={String(
+                      getItemKey ? getItemKey(item, index) : `${column.id}-${index}`,
+                    )}
                     onPress={
                       getCardDragProps
                         ? undefined // responders own the tap; handled on release
@@ -994,7 +972,7 @@ function KanbanColumnView<T>({
             }}
             ListFooterComponent={
               isLoading ? (
-                <YStack padding="$2" alignItems="center">
+                <YStack {...knobProps.panelPadding} alignItems="center">
                   <Spinner size="small" />
                 </YStack>
               ) : null

package/src/views/Kanban.spec.tsx

@@ -0,0 +1,113 @@
+import { cleanup, screen } from "@testing-library/react";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { Preset } from "@multiplatform.one/theme";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import * as KanbanModule from "./Kanban";
+import { Kanban, type KanbanColumn } from "./Kanban";
+
+vi.mock("@tanstack/react-virtual", () => ({
+  useVirtualizer: (opts: { count: number; estimateSize: () => number }) => {
+    const size = opts.estimateSize();
+    const items = Array.from({ length: opts.count }, (_, i) => ({
+      index: i,
+      key: String(i),
+      start: i * size,
+      end: (i + 1) * size,
+      size,
+    }));
+    return {
+      getVirtualItems: () => items,
+      getTotalSize: () => opts.count * size,
+      measureElement: () => {},
+      isScrolling: false,
+      scrollToIndex: () => {},
+    };
+  },
+}));
+
+afterEach(cleanup);
+
+const columns: KanbanColumn<{ id: string; title: string }>[] = [
+  {
+    id: "todo",
+    title: "To Do",
+    color: "$blue9",
+    items: [{ id: "1", title: "Task 1" }],
+  },
+  {
+    id: "done",
+    title: "Done",
+    items: [{ id: "2", title: "Task 2" }],
+  },
+];
+
+function radiusClassOn(el: Element | null): string | undefined {
+  let node = el as HTMLElement | null;
+  for (let i = 0; i < 16 && node; i++) {
+    const found = String(node.className || "")
+      .split(" ")
+      .find((c) => c.startsWith("_btlr-"));
+    if (found) return found;
+    node = node.parentElement;
+  }
+  return undefined;
+}
+
+describe("Kanban exports", () => {
+  it("exposes only named exports", () => {
+    expect(KanbanModule).toHaveProperty("Kanban");
+    expect(KanbanModule).not.toHaveProperty("default");
+  });
+});
+
+describe("Kanban design law (SB-M-302 / LC-60)", () => {
+  it("declares the column status dot as R-PILL and paints it only when color is set", () => {
+    const { container } = renderWithProviders(
+      <Kanban columns={columns} renderCard={(item) => <span>{item.title}</span>} />,
+    );
+
+    const dots = container.querySelectorAll('[data-radius-part="Kanban column dot"]');
+    expect(dots).toHaveLength(1);
+    expect(dots[0]?.getAttribute("data-radius-class")).toBe("R-PILL");
+    expect(container.querySelectorAll("[data-kanban-column-stripe]")).toHaveLength(0);
+  });
+
+  it("lets the radius knob reshape cards and column frames", () => {
+    const { rerender } = renderWithProviders(
+      <Preset overrides={{ borderRadius: "full" }}>
+        <Kanban columns={columns} renderCard={(item) => <span>{item.title}</span>} />
+      </Preset>,
+    );
+    const fullCard = radiusClassOn(screen.getByText("Task 1"));
+    const fullColumn = radiusClassOn(
+      document.querySelector("[data-kanban-column='todo']") as HTMLElement,
+    );
+
+    rerender(
+      <Preset overrides={{ borderRadius: "none" }}>
+        <Kanban columns={columns} renderCard={(item) => <span>{item.title}</span>} />
+      </Preset>,
+    );
+    const noneCard = radiusClassOn(screen.getByText("Task 1"));
+    const noneColumn = radiusClassOn(
+      document.querySelector("[data-kanban-column='todo']") as HTMLElement,
+    );
+
+    expect(fullCard).toBeDefined();
+    expect(noneCard).toBeDefined();
+    expect(fullCard).not.toBe(noneCard);
+    expect(fullColumn).toBeDefined();
+    expect(noneColumn).toBeDefined();
+    expect(fullColumn).not.toBe(noneColumn);
+  });
+
+  it("does not paint raw input-surface borders on the column frame", () => {
+    renderWithProviders(
+      <Kanban columns={columns} renderCard={(item) => <span>{item.title}</span>} />,
+    );
+    const column = document.querySelector("[data-kanban-column='todo']") as HTMLElement;
+    expect(column).toBeTruthy();
+    const className = String(column.className || "");
+    expect(className).not.toMatch(/_bw-/);
+  });
+});

package/src/views/Kanban.stories.tsx

@@ -39,7 +39,7 @@ const columns: KanbanColumn<Task>[] = [
 
 function TaskCard({ item }: { item: Task }) {
   return (
-    <YStack padding="$2" gap="$1">
+    <YStack gap="$1">
       <Text fontSize="$3">{item.title}</Text>
       <Text fontSize="$2" color="$color11" textTransform="capitalize">
         {item.priority}

package/src/views/Kanban.tsx

@@ -1,6 +1,3 @@
-import { componentColors } from "../componentColors";
-import { AsyncBoundary, useAsyncCount } from "../layouts/AsyncBoundary";
-import { EmptyState } from "../layouts/page";
 import { Spinner } from "@multiplatform.one/forms";
 import {
   hairlineWidth,
@@ -23,10 +20,8 @@ import React, {
   useState,
   type ReactNode,
 } from "react";
-import { useTranslation } from "../shared/i18n";
 import {
   AnimatePresence,
-  Card,
   ListItem,
   ScrollView,
   Text,
@@ -35,6 +30,11 @@ import {
   YStack,
   type YStackProps,
 } from "tamagui";
+import { componentColors } from "../componentColors";
+import { AsyncBoundary, useAsyncCount } from "../layouts/AsyncBoundary";
+import { EmptyState } from "../layouts/page";
+import { Card } from "../surfaces";
+import { useTranslation } from "../shared/i18n";
 import {
   autoScrollVelocity,
   describeCancel,
@@ -229,8 +229,6 @@ interface OverlayApi {
   setPointer: (x: number, y: number) => void;
 }
 
-type ResolvedKnobProps = ReturnType<typeof useResolvedKnobs>["knobProps"];
-
 /**
  * Generic Kanban board component with column-level virtualization,
  * keyboard navigation, and Trello-class drag-and-drop motion.
@@ -1011,8 +1009,6 @@ export function Kanban<T>({
             registerApi={(api) => {
               overlayApiRef.current = api;
             }}
-            knobRadius={knobProps.borderRadius}
-            sizeToken={knobProps.sizeToken}
           >
             {renderCard(overlaySession.item)}
           </KanbanDragOverlay>
@@ -1048,8 +1044,6 @@ interface KanbanDragOverlayProps {
   settleTo?: { x: number; y: number };
   transition: any;
   registerApi: (api: OverlayApi) => void;
-  knobRadius: ResolvedKnobProps["borderRadius"];
-  sizeToken: any;
   children: React.ReactNode;
 }
 
@@ -1067,8 +1061,6 @@ function KanbanDragOverlay({
   settleTo,
   transition,
   registerApi,
-  knobRadius,
-  sizeToken,
   children,
 }: KanbanDragOverlayProps) {
   const [pointerPos, setPointerPos] = useState<{ x: number; y: number } | null>(initialPos ?? null);
@@ -1112,18 +1104,10 @@ function KanbanDragOverlay({
         scale={lifted ? 1.03 : 1}
         rotate={lifted ? "2.5deg" : "0deg"}
         {...(lifted ? LIFT_SHADOW : undefined)}
-        {...knobRadius}
-        backgroundColor="$background"
         overflow="hidden"
         height="100%"
       >
-        <Card
-          size={sizeToken}
-          padding={0}
-          borderWidth={0}
-          backgroundColor="transparent"
-          height="100%"
-        >
+        <Card height="100%" overflow="hidden">
           {children}
         </Card>
       </View>
@@ -1352,20 +1336,12 @@ function KanbanColumnView<T>({
       overflow="hidden"
       transition={knobProps.transition}
       {...knobProps.borderRadius}
+      {...knobProps.panelPadding}
       backgroundColor={
-        isDropTarget || isActiveColumn
-          ? componentColors.interactive.background
-          : componentColors.surface.background
-      }
-      borderWidth={knobProps.inputSurface.borderWidth}
-      borderColor={
-        isDropTarget ? componentColors.interactive.border : componentColors.surface.border
+        isDropTarget || isActiveColumn ? componentColors.interactive.background : "transparent"
       }
       data-kanban-column={column.id}
     >
-      {column.color ? (
-        <View height={3} width="100%" backgroundColor={column.color as any} />
-      ) : null}
       <ListItem
         title={column.title}
         icon={
@@ -1376,12 +1352,13 @@ function KanbanColumnView<T>({
               height={8}
               borderRadius={4}
               backgroundColor={column.color as any}
+              data-kanban-column-dot
             />
           ) : undefined
         }
         iconAfter={
           itemCount !== undefined || renderColumnActions ? (
-            <XStack alignItems="center" gap="$1">
+            <XStack alignItems="center" {...knobProps.gap}>
               {itemCount !== undefined && (
                 <Text
                   color={componentColors.text.muted}
@@ -1483,19 +1460,20 @@ function KanbanColumnView<T>({
                 >
                   <Card
                     id={`${kanbanId}-col-${columnIndex}-card-${virtualItem.index}`}
-                    size={knobProps.sizeToken}
-                    padding={0}
-                    {...knobProps.borderRadius}
                     elevation={knobProps.elevation}
                     minHeight={MIN_PRESS_TARGET}
                     transition={knobProps.transition}
                     {...(isNew && {
                       enterStyle: { opacity: 0, scale: 0.97 },
                     })}
-                    borderWidth={knobProps.inputSurface.borderWidth}
-                    borderColor={ghost ? componentColors.interactive.border : "$borderColor"}
-                    borderStyle={ghost ? ("dashed" as any) : undefined}
-                    backgroundColor={isFocused ? "$accentBackground" : "$color1"}
+                    {...(ghost
+                      ? {
+                          borderWidth: hairlineWidth,
+                          borderColor: componentColors.interactive.border,
+                          borderStyle: "dashed" as any,
+                        }
+                      : undefined)}
+                    {...(isFocused ? { backgroundColor: "$accentBackground" } : undefined)}
                     {...(isFocused && wasKeyboardFocus()
                       ? keyboardFocusRingProps
                       : { outlineWidth: 0 })}
@@ -1537,17 +1515,7 @@ function KanbanColumnView<T>({
                   transition={knobProps.transition}
                   exitStyle={{ opacity: 0, scale: 0.97 }}
                 >
-                  <Card
-                    size={knobProps.sizeToken}
-                    padding={0}
-                    {...knobProps.borderRadius}
-                    borderWidth={knobProps.inputSurface.borderWidth}
-                    borderColor="$borderColor"
-                    backgroundColor="$color1"
-                    overflow="hidden"
-                  >
-                    {renderCard(l.item)}
-                  </Card>
+                  <Card overflow="hidden">{renderCard(l.item)}</Card>
                 </View>
               ))}
             </AnimatePresence>
@@ -1594,7 +1562,7 @@ function KanbanColumnView<T>({
       </View>
 
       {isLoading && (
-        <YStack padding="$2" alignItems="center">
+        <YStack {...knobProps.panelPadding} alignItems="center">
           <Spinner size="small" />
         </YStack>
       )}

package/src/views/List.spec.tsx

@@ -0,0 +1,93 @@
+import { cleanup, fireEvent, screen } from "@testing-library/react";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { defaultKnobs, resolveKnobs } from "@multiplatform.one/theme";
+import { afterEach, describe, expect, it } from "vitest";
+import {
+  List,
+  ListRow,
+  ListRowMeta,
+  useListItemState,
+  type ListHotkeys,
+  type ListItemState,
+  type ListProps,
+  type ListRowProps,
+} from "./List";
+import * as ViewExports from "./index";
+
+afterEach(cleanup);
+
+function atoms(el: Element, prefixes: string[]): string[] {
+  return String((el as HTMLElement).className || "")
+    .split(" ")
+    .filter((c) => prefixes.some((p) => c.startsWith(p)))
+    .sort();
+}
+
+const documents = [
+  { id: "1", title: "Q3 Vendor Contract" },
+  { id: "2", title: "Onboarding Checklist" },
+  { id: "3", title: "Invoice 1842" },
+];
+
+describe("List named exports", () => {
+  it("exports List, ListRow, ListRowMeta, and useListItemState from the views barrel", () => {
+    expect(ViewExports).toHaveProperty("List");
+    expect(ViewExports).toHaveProperty("ListRow");
+    expect(ViewExports).toHaveProperty("ListRowMeta");
+    expect(ViewExports).toHaveProperty("useListItemState");
+  });
+
+  it("keeps the public types as named exports (not a default)", () => {
+    expect(typeof List).toBe("function");
+    expect(typeof ListRow).toBe("function");
+    expect(typeof ListRowMeta).toBe("function");
+    expect(typeof useListItemState).toBe("function");
+    void (null as unknown as ListProps<unknown>);
+    void (null as unknown as ListRowProps);
+    void (null as unknown as ListItemState);
+    void (null as unknown as ListHotkeys);
+  });
+});
+
+describe("ListRow title — weight 400 on the TEXT NODE (R7 / §6.1)", () => {
+  it("does not paint 500 or 600 on the title text node", () => {
+    renderWithProviders(<ListRow title="Q3 Vendor Contract" />);
+    const textNode = screen.getByText("Q3 Vendor Contract");
+    const weight = atoms(textNode, ["_fow-"]);
+    expect(weight.length).toBeGreaterThan(0);
+    expect(weight.join(" ")).not.toMatch(/500|600|weight-5|weight-6|fow-5|fow-6/);
+  });
+});
+
+describe("ListRow icon — size recipe, not a private pixel table (LC-75)", () => {
+  it("passes the controlIcon size into the leading glyph", () => {
+    let received: number | undefined;
+    function ProbeIcon({ size }: { size?: number }) {
+      received = size;
+      return <span data-testid="probe-icon" />;
+    }
+    renderWithProviders(<ListRow icon={<ProbeIcon />} title="Architecture RFC" />);
+    const expected = resolveKnobs(defaultKnobs).knobProps.controlIcon.width;
+    expect(received).toBe(expected);
+  });
+});
+
+describe("List keyboard selection chrome (LC-71)", () => {
+  it("marks the filled row data-selected and the keyboard row data-focused", () => {
+    renderWithProviders(
+      <List
+        items={documents}
+        aria-label="Documents"
+        renderItem={(item) => <ListRow title={item.title} />}
+        height={300}
+        estimateSize={50}
+      />,
+    );
+    const container = screen.getByRole("list");
+    fireEvent.keyDown(container, { key: "ArrowDown" });
+    const focused = container.querySelector("[data-focused]");
+    expect(focused).not.toBeNull();
+    expect(focused).toHaveAttribute("data-selected");
+    expect(focused!.textContent).toContain("Q3 Vendor Contract");
+  });
+});

package/src/views/List.stories.tsx

@@ -2,6 +2,7 @@ import { action } from "@multiplatform.one/storybook";
 import type { Meta } from "@storybook/react-native-web-vite";
 import { FileCodeIcon, FilePdfIcon, FileTextIcon, ListChecksIcon } from "@phosphor-icons/react";
 import type { ReactNode } from "react";
+import { componentColors } from "../componentColors";
 import { List, ListRow, ListRowMeta } from "./List";
 
 interface DocumentRow {
@@ -74,9 +75,9 @@ const documents: DocumentRow[] = [
 function DocumentItem({ item }: { item: DocumentRow }) {
   const statusColor =
     item.statusTone === "success"
-      ? "$green11"
+      ? componentColors.semantic.success
       : item.statusTone === "warning"
-        ? "$orange11"
+        ? componentColors.badge.orange
         : undefined;
   return (
     <ListRow

package/src/views/List.tsx

@@ -7,6 +7,7 @@ import {
   ensureKeyboardModalityTracking,
   getGroupPosition,
   hairline,
+  hairlineWidth,
   keyboardFocusRingProps,
   stackRadiusProps,
   useReadableTextOn,
@@ -105,9 +106,7 @@ export function ListRowMeta({
   const resolved = selected && onAccent ? onAccent : (color ?? componentColors.text.muted);
   return (
     <Text
-      {...knobProps.body}
-      fontSize="$2"
-      lineHeight="$2"
+      {...knobProps.label}
       color={resolved}
       numberOfLines={1}
       minWidth={width}
@@ -124,7 +123,7 @@ export function ListRow({ icon, title, subtitle, meta }: ListRowProps) {
   const { selected, onAccent } = useListItemState();
   const ink = selected && onAccent ? onAccent : componentColors.text.primary;
   const muted = selected && onAccent ? onAccent : componentColors.text.muted;
-  const iconSize = knobProps.sizeToken === "$3" ? 16 : knobProps.sizeToken === "$5" ? 22 : 18;
+  const iconSize = knobProps.controlIcon.width;
   const leading = React.isValidElement(icon)
     ? React.cloneElement(icon as React.ReactElement<{ size?: number; color?: string }>, {
         size: iconSize,
@@ -133,25 +132,23 @@ export function ListRow({ icon, title, subtitle, meta }: ListRowProps) {
     : icon;
 
   return (
-    <XStack alignItems="center" gap="$3" flex={1} minWidth={0} width="100%">
+    <XStack alignItems="center" {...knobProps.gap} flex={1} minWidth={0} width="100%">
       {leading ? (
         <View
-          width={iconSize}
-          height={iconSize}
+          {...knobProps.controlIcon}
           flexShrink={0}
           alignItems="center"
           justifyContent="center"
-          color={muted}
-          {...({ "data-list-slot": "icon" } as any)}
+          {...({ "data-list-slot": "icon", color: muted } as Record<string, unknown>)}
         >
           {leading}
         </View>
       ) : null}
-      <YStack flex={1} minWidth={0} gap="$1" {...({ "data-list-slot": "title" } as any)}>
+      <YStack flex={1} minWidth={0} {...({ "data-list-slot": "title" } as Record<string, unknown>)}>
         <RowText
           {...knobProps.body}
+          {...knobProps.textWeight}
           color={ink}
-          fontWeight="500"
           numberOfLines={1}
           userSelect="none"
         >
@@ -159,9 +156,7 @@ export function ListRow({ icon, title, subtitle, meta }: ListRowProps) {
         </RowText>
         {subtitle != null && subtitle !== false ? (
           <RowText
-            {...knobProps.body}
-            fontSize="$2"
-            lineHeight="$2"
+            {...knobProps.label}
             color={muted}
             opacity={selected ? 0.85 : 1}
             numberOfLines={1}
@@ -174,9 +169,9 @@ export function ListRow({ icon, title, subtitle, meta }: ListRowProps) {
       {meta != null && meta !== false ? (
         <XStack
           alignItems="center"
-          gap="$4"
+          {...knobProps.gap}
           flexShrink={0}
-          {...({ "data-list-slot": "meta" } as any)}
+          {...({ "data-list-slot": "meta" } as Record<string, unknown>)}
         >
           {typeof meta === "string" || typeof meta === "number" ? (
             <ListRowMeta>{meta}</ListRowMeta>
@@ -281,8 +276,7 @@ export function List<T>({
   const { t } = useTranslation();
   const emptyMessage = emptyMessageProp ?? t("No items found");
   const { knobProps } = useResolvedKnobs();
-  const sz = knobProps.sizeToken;
-  const estimateSize = estimateSizeProp ?? (sz === "$3" ? 48 : sz === "$5" ? 68 : 56);
+  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;
@@ -302,7 +296,10 @@ export function List<T>({
   const [measuredContentHeight, setMeasuredContentHeight] = useState<number | null>(null);
   const height =
     heightProp ??
-    (hasMore ? scrollCap : (measuredContentHeight ?? Math.max(items.length, 1) * estimateSize + 8));
+    (hasMore
+      ? scrollCap
+      : (measuredContentHeight ??
+        Math.max(items.length, 1) * estimateSize + Math.max(items.length - 1, 0) * hairlineWidth));
   const listId = useId();
   const containerRef = useRef<HTMLDivElement>(null);
   const flashListRef = useRef<FlashListRef<T>>(null);
@@ -345,6 +342,7 @@ export function List<T>({
 
   const moveSelection = useCallback(
     (next: number) => {
+      setContainerKeyboardFocused(true);
       const clamped = Math.max(0, Math.min(next, items.length - 1));
       commitSelection(clamped);
       scrollToIndex(clamped);
@@ -479,10 +477,11 @@ export function List<T>({
                   {...({
                     "data-list-row": true,
                     ...(isSelected ? { "data-selected": true } : {}),
-                  } as any)}
+                    ...(isSelected && containerKeyboardFocused ? { "data-focused": true } : {}),
+                  } as Record<string, unknown>)}
                   minHeight={MIN_PRESS_TARGET}
                   paddingHorizontal={rowPad}
-                  paddingVertical="$2"
+                  paddingVertical={rowPad}
                   alignItems="center"
                   overflow="hidden"
                   // Rows form ONE stacked group: the hover/focus/selection
@@ -528,7 +527,7 @@ export function List<T>({
           }}
           ListFooterComponent={
             isLoading && items.length > 0 ? (
-              <YStack padding="$2" alignItems="center">
+              <YStack {...knobProps.panelPadding} alignItems="center">
                 <Spinner size="small" />
               </YStack>
             ) : null