@multiplatform.one/components 7.4.0 → 7.5.0

package/src/layouts/KeyboardAvoidingWrapper/index.tsx

@@ -1,5 +1,8 @@
 import type { PropsWithChildren } from "react";
 import { YStack, type YStackProps } from "tamagui";
+import type { KeyboardAvoidingBehavior } from "./behavior";
+
+export type { KeyboardAvoidingBehavior } from "./behavior";
 
 export interface KeyboardAvoidingWrapperProps extends YStackProps {
   /**
@@ -8,7 +11,7 @@ export interface KeyboardAvoidingWrapperProps extends YStackProps {
    * - 'height': Reduce height to avoid keyboard (default for Android)
    * - 'position': Change position to avoid keyboard
    */
-  behavior?: "padding" | "height" | "position";
+  behavior?: KeyboardAvoidingBehavior;
   /**
    * Additional offset to add when keyboard is visible
    */
@@ -21,21 +24,27 @@ export interface KeyboardAvoidingWrapperProps extends YStackProps {
 }
 
 /**
- * KeyboardAvoidingWrapper - Web implementation
+ * KeyboardAvoidingWrapper — web passthrough.
  *
- * On web, this is a simple passthrough component since browsers
- * handle keyboard behavior differently. The native implementation
- * (.native.tsx) will handle actual keyboard avoiding.
+ * No owned chrome (SF-TRANSPARENT / R-NONE / E-FLAT). Browsers handle the
+ * software keyboard; `behavior` / offset / enabled are accepted for API
+ * parity and ignored. Consumer `{...stackProps}` last.
  */
 export function KeyboardAvoidingWrapper({
   children,
   behavior: _behavior,
   keyboardVerticalOffset: _offset,
-  enabled: _enabled,
+  enabled = true,
   ...stackProps
 }: PropsWithChildren<KeyboardAvoidingWrapperProps>) {
   return (
-    <YStack flex={1} {...stackProps}>
+    <YStack
+      data-testid="keyboard-avoiding-wrapper"
+      data-keyboard-avoiding="web"
+      data-enabled={String(enabled)}
+      flex={1}
+      {...stackProps}
+    >
       {children}
     </YStack>
   );

package/src/layouts/PageHeader.stories.tsx

@@ -25,6 +25,10 @@ const meta: Meta<typeof PageHeader> = {
     title: { control: "text" },
     subtitle: { control: "text" },
     divider: { control: "boolean" },
+    compact: {
+      control: "boolean",
+      description: "Density override. Omitted follows the density knob (LC-76).",
+    },
   },
   args: {
     title: "Page title",

package/src/layouts/PageSection.stories.tsx

@@ -10,7 +10,7 @@ const meta: Meta<typeof PageSection> = {
     docs: {
       description: {
         component:
-          "Labeled content section: H2 title, optional description, divider, and optional soft card surface.",
+          "Labeled content section: H2 title, optional description, divider, and optional soft card surface. Title size is the shared sectionHeading scale; weight rides the fontWeight knob (400 / 700). Surfaced sections do not wrap Tint (R12).",
       },
     },
   },
@@ -19,6 +19,10 @@ const meta: Meta<typeof PageSection> = {
     description: { control: "text" },
     divider: { control: "boolean" },
     surface: { control: "boolean" },
+    compact: {
+      control: "boolean",
+      description: "Density override. Omitted follows the density knob (LC-76).",
+    },
   },
   args: {
     title: "Section title",

package/src/layouts/PageTemplates.stories.tsx

@@ -25,7 +25,7 @@ function ContentBox({
       justifyContent="center"
       alignItems="center"
     >
-      <Paragraph fontWeight="600">{label}</Paragraph>
+      <Paragraph fontWeight="400">{label}</Paragraph>
     </YStack>
   );
 }
@@ -39,7 +39,7 @@ const meta: Meta<typeof ListPageLayout> = {
     docs: {
       description: {
         component:
-          "Standard page templates (W11): ListPageLayout / DetailPageLayout / SettingsPageLayout. Thin shells over Screen + PageHeader + canonical scaffolds; breakpoints from theme layout tokens (DG-LAY-01/02), gaps semantic (DG-LAY-03). Field grids (forms' FormGrid) slot into settings content.",
+          "Standard page templates (W11): ListPageLayout / DetailPageLayout / SettingsPageLayout. Thin shells over Screen + PageHeader + canonical scaffolds; breakpoints from theme layout tokens (DG-LAY-01/02), gaps semantic (DG-LAY-03). Density is unpinned on Screen so the density knob restyles the page (LC-76). Field grids (forms' FormGrid) slot into settings content.",
       },
     },
   },

package/src/layouts/PageTemplates.tsx

@@ -17,6 +17,8 @@
  *   slot into the children.
  *
  * Breakpoints come from the canonical layout tokens (DG-LAY-01) — no raw px.
+ * Density is unpinned on `Screen` (LC-76): omit `compact` so the density knob
+ * restyles the page; pass `compact` to declare Surface intent for the subtree.
  */
 
 import {

package/src/layouts/SafeAreaWrapper/SafeAreaWrapper.spec.tsx

@@ -0,0 +1,66 @@
+import { cleanup } from "@testing-library/react";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { afterEach, describe, expect, it } from "vitest";
+import { SafeAreaWrapper } from "./index";
+import { applySafeAreaInsets } from "./insets";
+
+afterEach(cleanup);
+
+const insets = { top: 47, bottom: 34, left: 0, right: 0 };
+
+describe("applySafeAreaInsets", () => {
+  it("applies padding on every requested edge and zero on the rest", () => {
+    expect(applySafeAreaInsets(insets, ["top", "bottom"], "padding")).toEqual({
+      paddingTop: 47,
+      paddingBottom: 34,
+      paddingLeft: 0,
+      paddingRight: 0,
+    });
+  });
+
+  it("switches to margin without changing inset math", () => {
+    expect(
+      applySafeAreaInsets({ top: 12, bottom: 8, left: 4, right: 6 }, ["left"], "margin"),
+    ).toEqual({
+      marginTop: 0,
+      marginBottom: 0,
+      marginLeft: 4,
+      marginRight: 0,
+    });
+  });
+
+  it("zero insets stay zero", () => {
+    expect(applySafeAreaInsets({ top: 0, bottom: 0, left: 0, right: 0 })).toEqual({
+      paddingTop: 0,
+      paddingBottom: 0,
+      paddingLeft: 0,
+      paddingRight: 0,
+    });
+  });
+});
+
+describe("SafeAreaWrapper web", () => {
+  it("is a passthrough that still renders children", () => {
+    const { container } = renderWithProviders(
+      <SafeAreaWrapper edges={["top"]} mode="margin">
+        <span>Page body</span>
+      </SafeAreaWrapper>,
+    );
+    const frame = container.querySelector('[data-testid="safe-area-wrapper"]') as HTMLElement;
+    expect(frame).toBeTruthy();
+    expect(frame.getAttribute("data-safe-area")).toBe("web");
+    expect(frame.textContent).toContain("Page body");
+  });
+
+  it("lets caller padding compose on the wrapper", () => {
+    const { container } = renderWithProviders(
+      <SafeAreaWrapper padding="$4">
+        <span>Padded</span>
+      </SafeAreaWrapper>,
+    );
+    const frame = container.querySelector('[data-testid="safe-area-wrapper"]') as HTMLElement;
+    expect(frame.textContent).toContain("Padded");
+    const haystack = `${frame.className} ${frame.getAttribute("style") ?? ""}`;
+    expect(haystack).toMatch(/_pt-|_pr-|_pb-|_pl-/);
+  });
+});

package/src/layouts/SafeAreaWrapper/SafeAreaWrapper.stories.tsx

@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
-import { Text, YStack } from "tamagui";
+import { Paragraph, YStack } from "tamagui";
+import { componentColors } from "../../componentColors";
 import { SafeAreaWrapper } from "./index";
 
 const meta: Meta<typeof SafeAreaWrapper> = {
@@ -7,6 +8,12 @@ const meta: Meta<typeof SafeAreaWrapper> = {
   component: SafeAreaWrapper,
   parameters: {
     status: { type: "stable" },
+    docs: {
+      description: {
+        component:
+          "Platform spacing wrapper. Native applies device safe-area insets; web is a passthrough. No owned surface — knobs must not change inset calculation.",
+      },
+    },
   },
 };
 
@@ -16,14 +23,34 @@ type Story = StoryObj<typeof SafeAreaWrapper>;
 export const Default: Story = {
   name: "Main",
   render: () => (
-    <SafeAreaWrapper backgroundColor="$background" padding="$4">
-      <YStack gap="$2">
-        <Text>Content inside SafeAreaWrapper</Text>
-        <Text fontSize="$2" color="$color10">
+    <SafeAreaWrapper>
+      <YStack>
+        <Paragraph>Content inside SafeAreaWrapper</Paragraph>
+        <Paragraph color={componentColors.text.muted}>
           On native, this respects device safe area insets. On web, it is a simple passthrough
           wrapper.
-        </Text>
+        </Paragraph>
       </YStack>
     </SafeAreaWrapper>
   ),
 };
+
+export const Empty: Story = {
+  render: () => <SafeAreaWrapper />,
+};
+
+export const TopAndBottom: Story = {
+  render: () => (
+    <SafeAreaWrapper edges={["top", "bottom"]}>
+      <Paragraph>edges=top,bottom — ignored on web, applied on native.</Paragraph>
+    </SafeAreaWrapper>
+  ),
+};
+
+export const CallerPadding: Story = {
+  render: () => (
+    <SafeAreaWrapper padding="$4">
+      <Paragraph>Caller padding composes on the wrapper; insets stay platform-owned.</Paragraph>
+    </SafeAreaWrapper>
+  ),
+};

package/src/layouts/SafeAreaWrapper/index.native.tsx

@@ -1,28 +1,29 @@
 import type { PropsWithChildren } from "react";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { YStack, type YStackProps } from "tamagui";
+import { applySafeAreaInsets, type SafeAreaEdge, type SafeAreaMode } from "./insets";
+
+export type { SafeAreaEdge, SafeAreaMode } from "./insets";
 
 export interface SafeAreaWrapperProps extends YStackProps {
   /**
    * Which edges to apply safe area insets to
    * @default ['top', 'bottom', 'left', 'right']
    */
-  edges?: Array<"top" | "bottom" | "left" | "right">;
+  edges?: SafeAreaEdge[];
   /**
    * Additional mode for safe area behavior
    * - 'padding': Apply as padding (default)
    * - 'margin': Apply as margin
    */
-  mode?: "padding" | "margin";
+  mode?: SafeAreaMode;
 }
 
 /**
- * SafeAreaWrapper - Native implementation
- *
- * Wraps content with safe area insets for devices with notches,
- * home indicators, and other system UI elements.
+ * SafeAreaWrapper — native insets.
  *
- * Uses react-native-safe-area-context for proper inset handling.
+ * Wraps content with device safe-area insets (notch, home indicator).
+ * No owned surface — only platform spacing. Consumer `{...stackProps}` last.
  */
 export function SafeAreaWrapper({
   children,
@@ -31,26 +32,16 @@ export function SafeAreaWrapper({
   ...stackProps
 }: PropsWithChildren<SafeAreaWrapperProps>) {
   const insets = useSafeAreaInsets();
-
-  const edgesSet = new Set(edges);
-
-  const insetStyles =
-    mode === "padding"
-      ? {
-          paddingTop: edgesSet.has("top") ? insets.top : 0,
-          paddingBottom: edgesSet.has("bottom") ? insets.bottom : 0,
-          paddingLeft: edgesSet.has("left") ? insets.left : 0,
-          paddingRight: edgesSet.has("right") ? insets.right : 0,
-        }
-      : {
-          marginTop: edgesSet.has("top") ? insets.top : 0,
-          marginBottom: edgesSet.has("bottom") ? insets.bottom : 0,
-          marginLeft: edgesSet.has("left") ? insets.left : 0,
-          marginRight: edgesSet.has("right") ? insets.right : 0,
-        };
+  const insetStyles = applySafeAreaInsets(insets, edges, mode);
 
   return (
-    <YStack flex={1} style={insetStyles} {...stackProps}>
+    <YStack
+      data-testid="safe-area-wrapper"
+      data-safe-area="native"
+      flex={1}
+      style={insetStyles}
+      {...stackProps}
+    >
       {children}
     </YStack>
   );

package/src/layouts/SafeAreaWrapper/index.tsx

@@ -1,26 +1,29 @@
 import type { PropsWithChildren } from "react";
 import { YStack, type YStackProps } from "tamagui";
+import type { SafeAreaEdge, SafeAreaMode } from "./insets";
+
+export type { SafeAreaEdge, SafeAreaMode } from "./insets";
 
 export interface SafeAreaWrapperProps extends YStackProps {
   /**
    * Which edges to apply safe area insets to
    * @default ['top', 'bottom', 'left', 'right']
    */
-  edges?: Array<"top" | "bottom" | "left" | "right">;
+  edges?: SafeAreaEdge[];
   /**
    * Additional mode for safe area behavior
    * - 'padding': Apply as padding (default)
    * - 'margin': Apply as margin
    */
-  mode?: "padding" | "margin";
+  mode?: SafeAreaMode;
 }
 
 /**
- * SafeAreaWrapper - Web implementation
+ * SafeAreaWrapper — web passthrough.
  *
- * On web, this is a simple passthrough component that wraps children
- * in a YStack. The native implementation (.native.tsx) will handle
- * the actual safe area insets.
+ * No owned chrome (SF-TRANSPARENT / R-NONE / E-FLAT). Knobs MUST NOT change
+ * inset calculation; web has no safe-area insets, so `edges` / `mode` are
+ * accepted for API parity and ignored. Consumer `{...stackProps}` last.
  */
 export function SafeAreaWrapper({
   children,
@@ -29,7 +32,7 @@ export function SafeAreaWrapper({
   ...stackProps
 }: PropsWithChildren<SafeAreaWrapperProps>) {
   return (
-    <YStack flex={1} {...stackProps}>
+    <YStack data-testid="safe-area-wrapper" data-safe-area="web" flex={1} {...stackProps}>
       {children}
     </YStack>
   );

package/src/layouts/SafeAreaWrapper/insets.ts

@@ -0,0 +1,38 @@
+export type SafeAreaEdge = "top" | "bottom" | "left" | "right";
+export type SafeAreaMode = "padding" | "margin";
+
+export interface SafeAreaInsets {
+  top: number;
+  bottom: number;
+  left: number;
+  right: number;
+}
+
+const ALL_EDGES: SafeAreaEdge[] = ["top", "bottom", "left", "right"];
+
+/**
+ * Map device insets onto padding or margin. Physical left/right (not
+ * start/end) — notches and home indicators sit on the device, not the
+ * reading direction.
+ */
+export function applySafeAreaInsets(
+  insets: SafeAreaInsets,
+  edges: SafeAreaEdge[] = ALL_EDGES,
+  mode: SafeAreaMode = "padding",
+): Record<string, number> {
+  const edgesSet = new Set(edges);
+  if (mode === "padding") {
+    return {
+      paddingTop: edgesSet.has("top") ? insets.top : 0,
+      paddingBottom: edgesSet.has("bottom") ? insets.bottom : 0,
+      paddingLeft: edgesSet.has("left") ? insets.left : 0,
+      paddingRight: edgesSet.has("right") ? insets.right : 0,
+    };
+  }
+  return {
+    marginTop: edgesSet.has("top") ? insets.top : 0,
+    marginBottom: edgesSet.has("bottom") ? insets.bottom : 0,
+    marginLeft: edgesSet.has("left") ? insets.left : 0,
+    marginRight: edgesSet.has("right") ? insets.right : 0,
+  };
+}

package/src/layouts/Screen.stories.tsx

@@ -13,7 +13,7 @@ const meta: Meta<typeof Screen> = {
     docs: {
       description: {
         component:
-          "Outer page shell: scroll container, max-width centering, knob panel padding + gapLg between page regions.",
+          "Outer page shell: scroll container, max-width centering, knob panel padding + gapLg between page regions. Density is unpinned so the density knob restyles the page (LC-76).",
       },
     },
   },
@@ -22,6 +22,10 @@ const meta: Meta<typeof Screen> = {
     maxWidth: { control: "number" },
     bleed: { control: "boolean" },
     noPadding: { control: "boolean" },
+    compact: {
+      control: "boolean",
+      description: "Density override. Omitted follows the density knob (LC-76).",
+    },
   },
   args: {
     scroll: true,

package/src/layouts/ScreenToolbar.stories.tsx

@@ -2,7 +2,6 @@ import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
 // Catalog Button (G-15 story honesty / LC-18): raw tamagui buttons pinned a
 // non-house radius and ignored every knob, poisoning the knob probes.
 import { Button } from "@multiplatform.one/forms";
-import { MIN_PRESS_TARGET } from "@multiplatform.one/theme";
 import { YStack } from "tamagui";
 import { ScreenToolbar } from "./page";
 
@@ -27,7 +26,6 @@ export const Default: Story = {
   name: "Main",
   render: () => (
     <ScreenToolbar
-      minHeight={MIN_PRESS_TARGET}
       leading={
         <Button compact variant="outlined">
           Back
@@ -46,19 +44,16 @@ export const Default: Story = {
 };
 
 export const Empty: Story = {
-  render: () => <ScreenToolbar minHeight={MIN_PRESS_TARGET} />,
+  render: () => <ScreenToolbar />,
 };
 
 export const LeadingOnly: Story = {
-  render: () => (
-    <ScreenToolbar minHeight={MIN_PRESS_TARGET} leading={<Button compact>Back</Button>} />
-  ),
+  render: () => <ScreenToolbar leading={<Button compact>Back</Button>} />,
 };
 
 export const DisabledAndLoading: Story = {
   render: () => (
     <ScreenToolbar
-      minHeight={MIN_PRESS_TARGET}
       leading={
         // DG-ST-03: a disabled control explains itself; inline placement keeps
         // the toolbar row's shared control height.
@@ -87,7 +82,6 @@ export const ManyActionsNarrow: Story = {
   render: () => (
     <YStack maxWidth={320} borderWidth={1} borderColor="$color6" borderStyle="dashed">
       <ScreenToolbar
-        minHeight={MIN_PRESS_TARGET}
         leading={
           <Button compact variant="outlined">
             Back to the previous screen

package/src/layouts/Sidebar.stories.tsx

@@ -40,7 +40,7 @@ export const Default = () => {
       height={320}
       borderWidth={1}
       borderColor="$borderColor"
-      {...knobProps.borderRadiusOuter}
+      {...knobProps.borderRadiusNested}
       overflow="hidden"
     >
       <Sidebar

package/src/layouts/ViewSwitcher.tsx

@@ -32,6 +32,8 @@ export interface ViewSwitcherProps {
   currentView: string;
   /** Callback when a view type is selected */
   onViewChange: (view: string) => void;
+  /** Host test id (default `view-switcher`). */
+  testID?: string;
 }
 
 /**
@@ -41,7 +43,12 @@ export interface ViewSwitcherProps {
  * one R-OUTER frame, selected = fill (never a border on every segment),
  * keyboard ring on the focused item only. Activation stays MANUAL.
  */
-export function ViewSwitcher({ views, currentView, onViewChange }: ViewSwitcherProps) {
+export function ViewSwitcher({
+  views,
+  currentView,
+  onViewChange,
+  testID = "view-switcher",
+}: ViewSwitcherProps) {
   const { knobProps } = useResolvedKnobs();
   // Chromium drops keyboard modality on tamagui's group focus redirect, so
   // :focus-visible can miss the first item — paint the ring manually on
@@ -108,6 +115,12 @@ export function ViewSwitcher({ views, currentView, onViewChange }: ViewSwitcherP
       }}
       {...knobProps.borderRadius}
       {...knobProps.inputSurface}
+      testID={testID}
+      {...({
+        "data-testid": testID,
+        "data-size": knobProps.size,
+        "data-density": knobProps.density,
+      } as Record<string, string>)}
       // Recessed track (Apple) so unselected segments still read as inside
       // the control once per-item borders are gone. `$color2` is the surface
       // tier — a step off the page, not the hover grey that used to fake

package/src/layouts/attachments.tsx

@@ -653,7 +653,7 @@ export function Attachments({
       {(label || canAdd) && (
         <XStack alignItems="center" justifyContent={label ? "space-between" : "flex-end"}>
           {label && (
-            <Label {...(compact ? { fontSize: "$3", fontWeight: "500" } : sectionHeading)}>
+            <Label {...(compact ? { fontSize: "$3", fontWeight: "400" } : sectionHeading)}>
               {label}
               {/* Count hides on error so the badge can't lie (DG-ST-04) */}
               {maxAttachments > 0 && !hasError && (
@@ -666,7 +666,7 @@ export function Attachments({
           )}
           {canAdd && (
             <Button size={compact ? "$2" : "$3"} icon={PlusIcon} onPress={handleUploadClick}>
-              {uploadLabel}
+              <Text fontWeight="400">{uploadLabel}</Text>
             </Button>
           )}
         </XStack>
@@ -760,7 +760,7 @@ export function Attachments({
                 src={previewFile.fileUrl}
                 alt={previewFile.fileName}
                 width="100%"
-                height={320}
+                maxHeight="70vh"
                 objectFit="contain"
               />
             ) : previewFile ? (
@@ -774,10 +774,10 @@ export function Attachments({
             {previewFile ? (
               <XStack gap="$2">
                 <Button icon={DownloadSimpleIcon} onPress={() => handleDownload(previewFile)}>
-                  {downloadLabel}
+                  <Text fontWeight="400">{downloadLabel}</Text>
                 </Button>
                 <Button outlined onPress={() => setPreviewFile(null)}>
-                  {closeLabel}
+                  <Text fontWeight="400">{closeLabel}</Text>
                 </Button>
               </XStack>
             ) : null}

package/src/layouts/breadcrumbs.spec.tsx

@@ -0,0 +1,40 @@
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { fireEvent } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { Breadcrumbs } from "./breadcrumbs";
+
+const items = [
+  { label: "Home", href: "/" },
+  { label: "Projects", href: "/projects" },
+  { label: "Settings" },
+];
+
+describe("Breadcrumbs", () => {
+  it("publishes density and paints crumb labels at weight 400 (R7 / §6.1)", () => {
+    const { container } = renderWithProviders(<Breadcrumbs items={items} />);
+    const nav = container.querySelector('[data-testid="breadcrumbs"]') as HTMLElement;
+    expect(nav).toBeTruthy();
+    expect(nav.getAttribute("data-density")).toBeTruthy();
+    expect(nav.getAttribute("data-density")).not.toBe("");
+
+    const current = container.querySelector('[aria-current="page"]') as HTMLElement;
+    expect(current).toBeTruthy();
+    const currentWeight = current.style.fontWeight || getComputedStyle(current).fontWeight;
+    expect(["400", "normal"]).toContain(String(currentWeight));
+
+    const home = [...container.querySelectorAll("a")].find((el) => el.textContent === "Home");
+    expect(home).toBeTruthy();
+    const linkWeight = home!.style.fontWeight || getComputedStyle(home!).fontWeight;
+    expect(["400", "normal"]).toContain(String(linkWeight));
+  });
+
+  it("calls onNavigate from a path crumb and keeps the current page inert", () => {
+    const onNavigate = vi.fn();
+    const { container } = renderWithProviders(
+      <Breadcrumbs items={items} onNavigate={onNavigate} />,
+    );
+    fireEvent.click([...container.querySelectorAll("a")].find((el) => el.textContent === "Home")!);
+    expect(onNavigate).toHaveBeenCalledWith("/");
+    expect(container.querySelector('[aria-current="page"]')?.textContent).toBe("Settings");
+  });
+});

package/src/layouts/breadcrumbs.tsx

@@ -130,6 +130,8 @@ export function Breadcrumbs({ items, onNavigate, label, maxVisible }: Breadcrumb
   const crumbRadius = knobProps.borderRadius.borderRadius;
 
   const interactiveCrumb = {
+    ...knobProps.body,
+    fontWeight: "400" as const,
     color: linkColor,
     cursor: "pointer" as const,
     fontSize: textSize,
@@ -226,9 +228,10 @@ export function Breadcrumbs({ items, onNavigate, label, maxVisible }: Breadcrumb
               </Anchor>
             ) : (
               <Text
+                {...knobProps.body}
                 color={componentColors.text.muted}
                 fontSize={textSize}
-                fontWeight={slot.isCurrent ? "600" : "400"}
+                fontWeight="400"
                 {...(slot.isCurrent ? { "aria-current": "page" as const } : null)}
               >
                 {slot.item.label}
@@ -249,7 +252,7 @@ export function Breadcrumbs({ items, onNavigate, label, maxVisible }: Breadcrumb
   // LC-71: the landmark is not a control — no tabIndex, no focusWithin ring.
   if (isWeb) {
     return (
-      <nav aria-label={landmark} data-testid="breadcrumbs">
+      <nav aria-label={landmark} data-testid="breadcrumbs" data-density={knobProps.density}>
         {trail}
       </nav>
     );
@@ -261,6 +264,7 @@ export function Breadcrumbs({ items, onNavigate, label, maxVisible }: Breadcrumb
       flexWrap="wrap"
       outlineWidth={0}
       data-testid="breadcrumbs"
+      data-density={knobProps.density}
     >
       {trail}
     </XStack>