@multiplatform.one/components 7.6.2 → 7.7.0

package/src/ProgressSteps/index.tsx

@@ -3,6 +3,8 @@ import {
   MIN_PRESS_TARGET,
   ensureKeyboardModalityTracking,
   pressTargetHitSlop,
+  radiusClassProps,
+  useAaSolidFill,
   useReadableTextOn,
   useResolvedKnobs,
   wasKeyboardFocus,
@@ -76,8 +78,11 @@ const Marker = styled(View, {
   name: "ProgressStepMarker",
   alignItems: "center",
   justifyContent: "center",
-  borderWidth: 2,
   flexShrink: 0,
+  // R-PILL (D-09 / LC-60): the numbered disc is a circle at every radius
+  // stop — the knob moves size, never shape. Not K1 (Progress/Meter rails).
+  ...radiusClassProps("R-PILL", "ProgressSteps marker"),
+  borderRadius: 1000,
 });
 
 const StepButton = styled(View, {
@@ -148,14 +153,18 @@ export function ProgressSteps({
   );
   if (isWeb) ensureKeyboardModalityTracking();
   const [kbFocusIndex, setKbFocusIndex] = useState<number | null>(null);
-  // LC-05: current marker rides the accent fill; completed/error fills pick
-  // paper/ink from luminance rather than an assumed white glyph.
-  const onSelected = useReadableTextOn(componentColors.indicator.selected);
+  // LC-05: current marker rides an accent solid; completed/error fills pick
+  // paper/ink from luminance rather than an assumed white glyph. The stock
+  // dark `$accentBackground` tops out at 4.02:1 against either scheme
+  // anchor, under the in-repo 4.5 text floor, so the current fill walks to
+  // the nearest accent solid that can carry the numeral.
+  const currentFill = useAaSolidFill(componentColors.indicator.selected);
+  const onSelected = useReadableTextOn(currentFill);
   const onCompleted = useReadableTextOn(componentColors.indicator.completed);
   const onError = useReadableTextOn("$red9");
   const { px: markerPx, hitSlop, box: nestedBox } = splitNestedControl(knobProps.nestedControl);
   const markerIconSize = Math.max(12, Math.round(markerPx * 0.45));
-  const markerRadius = knobProps.pointy ? 0 : 1000;
+  const ringWidth = knobProps.borderRadius.borderWidth ?? 0;
   const connectorThickness = 2;
   const pressOutset = Math.max(0, Math.ceil((MIN_PRESS_TARGET - markerPx) / 2));
   const interactive = !!onStepChange && allowJump;
@@ -192,7 +201,7 @@ export function ProgressSteps({
               : kind === "completed"
                 ? componentColors.indicator.completed
                 : kind === "current"
-                  ? componentColors.indicator.selected
+                  ? currentFill
                   : "transparent";
           const markerBorder = kind === "upcoming" ? componentColors.indicator.track : markerBg;
           const markerFg =
@@ -207,15 +216,20 @@ export function ProgressSteps({
             step.description ?? (step.optional && kind !== "error" ? t("Optional") : null);
           const connectorFill =
             index < current ? componentColors.indicator.completed : componentColors.indicator.track;
+          // Upcoming is outlined-by-state: chromeless `borderWidth:none` would
+          // erase the empty disc, so it keeps the OUTLINED-HAIRLINE floor.
+          const markerRing = kind === "upcoming" ? Math.max(ringWidth, 0.5) : ringWidth;
 
           const marker = (
             <Marker
               {...nestedBox}
-              borderRadius={markerRadius}
+              borderRadius={1000}
+              borderWidth={markerRing}
               backgroundColor={markerBg}
               borderColor={markerBorder}
               data-nested-px={markerPx}
               data-step-state={kind}
+              data-marker-ring={markerRing}
               transition={knobProps.transition}
               {...(state === "current"
                 ? ({ "aria-current": "step" } as Record<string, unknown>)

package/src/SheetModal/SheetModal.spec.tsx

@@ -0,0 +1,88 @@
+import { describe, expect, it } from "vitest";
+import { mediumDetent, minSheetHeight, resolveSheetDetents } from "./detents";
+
+/*
+ * MPO-68 AC-4 — "SheetModal's snapPoint prop either drives a detent or is
+ * removed". It drives one. These lock that in, because it has already been
+ * lost once: 184746910 (MPO-71) rewrote the detents block from a pre-MPO-68
+ * copy and dropped the snapPoint push, leaving the prop declared, documented
+ * and passed by four callers while doing nothing on device.
+ *
+ * Geometry under test is a pure height list, largest first. The component's
+ * PanResponder turns each height h into a resting translate of `travel - h`.
+ */
+
+const travel = 600;
+
+describe("resolveSheetDetents", () => {
+  it("a plain sheet has exactly one rest: fully expanded", () => {
+    expect(resolveSheetDetents({ travel })).toEqual([600]);
+  });
+
+  it("REGRESSION: snapPoint creates a detent instead of being ignored", () => {
+    // The bug this spec exists for: main returned [600] here.
+    expect(resolveSheetDetents({ travel, snapPoint: 85 })).toEqual([600, 510]);
+  });
+
+  it("reads snapPoint as a percent of the full height, matching the web Sheet", () => {
+    expect(resolveSheetDetents({ travel, snapPoint: 50 })).toEqual([600, 300]);
+    expect(resolveSheetDetents({ travel, snapPoint: 60 })).toEqual([600, 360]);
+    expect(resolveSheetDetents({ travel, snapPoint: 92 })).toEqual([600, 552]);
+  });
+
+  it("honours the four heights real callers pass", () => {
+    // CommandPalette 92, list-tools-sheet 85, ListThemePlayground 85,
+    // Toast.stories 70 — every one of these was a no-op on device.
+    for (const snapPoint of [92, 85, 70]) {
+      const detents = resolveSheetDetents({ travel, snapPoint });
+      expect(detents).toContain(Math.round(travel * (snapPoint / 100)));
+      expect(detents.length).toBeGreaterThan(1);
+    }
+  });
+
+  it("a scrollable sheet keeps its half-open detent", () => {
+    expect(resolveSheetDetents({ travel, scrollable: true })).toEqual([
+      600,
+      Math.round(travel * mediumDetent),
+    ]);
+  });
+
+  it("scrollable and snapPoint stack, largest first, no duplicates", () => {
+    // 600 expanded, 330 medium, 510 from snapPoint.
+    expect(resolveSheetDetents({ travel, scrollable: true, snapPoint: 85 })).toEqual([
+      600, 510, 330,
+    ]);
+  });
+
+  it("dedupes a snapPoint that lands on a detent already present", () => {
+    expect(resolveSheetDetents({ travel, snapPoint: 100 })).toEqual([600]);
+    expect(resolveSheetDetents({ travel, scrollable: true, snapPoint: 55 })).toEqual([600, 330]);
+  });
+
+  it("clamps a snapPoint above 100 to fully expanded", () => {
+    expect(resolveSheetDetents({ travel, snapPoint: 140 })).toEqual([600]);
+  });
+
+  it("drops a detent shorter than the floor rather than resting near-dismissed", () => {
+    // 600 * 0.10 = 60, well under minSheetHeight.
+    expect(resolveSheetDetents({ travel, snapPoint: 10 })).toEqual([600]);
+    expect(minSheetHeight).toBe(180);
+  });
+
+  it("a sheet shorter than the floor still keeps its own full height", () => {
+    expect(resolveSheetDetents({ travel: 120, scrollable: true, snapPoint: 85 })).toEqual([120]);
+  });
+
+  it("ignores a snapPoint that is not a usable number", () => {
+    for (const snapPoint of [0, -20, Number.NaN, Number.POSITIVE_INFINITY]) {
+      expect(resolveSheetDetents({ travel, snapPoint })).toEqual([600]);
+    }
+    expect(resolveSheetDetents({ travel, snapPoint: undefined })).toEqual([600]);
+  });
+
+  it("always returns descending heights, so the pan release can scan in order", () => {
+    const detents = resolveSheetDetents({ travel, scrollable: true, snapPoint: 40 });
+    expect(detents).toEqual([...detents].sort((a, b) => b - a));
+    expect(new Set(detents).size).toBe(detents.length);
+  });
+});

package/src/SheetModal/detents.ts

@@ -0,0 +1,55 @@
+/**
+ * SheetModal detent geometry — the pure half, split out so it can be specced
+ * without standing up a React Native renderer.
+ *
+ * A detent is a VISIBLE HEIGHT in points. The native sheet's `translateY`
+ * measures DOWN from fully-expanded, so a detent of `h` rests at `travel - h`,
+ * and `travel` itself is the fully-expanded sheet.
+ */
+
+/** Smallest height a native sheet is ever laid out at. */
+export const minSheetHeight = 180;
+
+/**
+ * Half-open detent for a sheet that owns a scrollport, as a fraction of its
+ * full height. Mirrors FloatingPanel so both native sheets drag alike.
+ */
+export const mediumDetent = 0.55;
+
+export interface ResolveSheetDetentsOptions {
+  /** Full (expanded) height of the sheet, in points. */
+  travel: number;
+  /** The sheet owns a scrollport, so a half-open rest is meaningful. */
+  scrollable?: boolean;
+  /** Percent detent from the caller — the same prop the web Sheet takes. */
+  snapPoint?: number;
+}
+
+/**
+ * The heights the sheet is allowed to rest at, largest first.
+ *
+ * MPO-68: `snapPoint` is a percent on the web Sheet (`snapPoints={[snapPoint]}`).
+ * Native honours the same prop by turning that percent into a detent, so a
+ * caller that writes `snapPoint={85}` gets an 85%-height rest on both twins
+ * rather than the prop being silently dropped on device.
+ *
+ * Anything shorter than `minSheetHeight` is discarded, because a sheet that
+ * rests below that is indistinguishable from a dismissed one. A sheet whose
+ * full height is already under the floor keeps its own height, otherwise it
+ * would have no detents at all.
+ */
+export function resolveSheetDetents({
+  travel,
+  scrollable,
+  snapPoint,
+}: ResolveSheetDetentsOptions): number[] {
+  const points = [travel];
+  if (scrollable) {
+    points.push(Math.round(travel * mediumDetent));
+  }
+  if (typeof snapPoint === "number" && Number.isFinite(snapPoint) && snapPoint > 0) {
+    points.push(Math.round(travel * (Math.min(snapPoint, 100) / 100)));
+  }
+  const floor = Math.min(minSheetHeight, travel);
+  return Array.from(new Set(points.filter((h) => h >= floor))).sort((a, b) => b - a);
+}

package/src/SheetModal/index.native.tsx

@@ -24,6 +24,7 @@ import {
   useWindowDimensions,
 } from "react-native";
 import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { minSheetHeight, resolveSheetDetents } from "./detents";
 import { useTranslation } from "../shared/i18n";
 import { useKeyboardInset } from "../shared/useKeyboardInset";
 import { View, YStack } from "tamagui";
@@ -36,10 +37,6 @@ const sheetMaxHeightRatio = 0.85;
 const bottomInset = Platform.OS === "ios" ? 24 : 16;
 // Backdrop left visible above the sheet, so the scrim stays tappable.
 const backdropStrip = 48;
-const minSheetHeight = 180;
-// Half-open detent for a sheet that owns a scrollport, as a fraction of its
-// full height. Mirrors FloatingPanel so both native sheets drag alike.
-const mediumDetent = 0.55;
 // Released more than this far below the smallest detent, the sheet dismisses.
 const dismissThreshold = 56;
 const IN_DIALOG_REGION = { inDialogRegion: true } as const;
@@ -49,7 +46,7 @@ export function SheetModal({
   onOpenChange,
   children,
   header,
-  snapPoint: _snapPoint,
+  snapPoint,
   scrollable,
 }: SheetModalProps) {
   const { t } = useTranslation();
@@ -95,16 +92,20 @@ export function SheetModal({
    *
    * translateY measures DOWN from fully-expanded: 0 is the sheet at full
    * height, `travel` is fully off-screen.
+   *
+   * The detent heights themselves live in ./detents.ts, pure, so the geometry
+   * is specced without a native renderer. 184746910 (MPO-71) rewrote this
+   * block from a pre-MPO-68 copy and silently dropped the `snapPoint` push,
+   * leaving the prop declared, documented and passed by four callers while
+   * doing nothing on device. Keep the math in one place so a rewrite of the
+   * animation cannot take the geometry with it again.
    */
   const [measuredHeight, setMeasuredHeight] = useState(0);
   const travel = measuredHeight || maxHeight;
-  const detents = useMemo(() => {
-    if (!scrollable) return [travel];
-    const points = [travel, Math.round(travel * mediumDetent)].filter(
-      (h) => h >= Math.min(minSheetHeight, travel),
-    );
-    return Array.from(new Set(points)).sort((a, b) => b - a);
-  }, [scrollable, travel]);
+  const detents = useMemo(
+    () => resolveSheetDetents({ travel, scrollable, snapPoint }),
+    [travel, scrollable, snapPoint],
+  );
 
   /*
    * MPO-71 — park the sheet OFF-SCREEN before the modal ever presents.

package/src/SheetModal/index.tsx

@@ -21,7 +21,7 @@ export interface SheetModalProps {
   children?: ReactNode;
   /** Fixed content above the (scrollable) body, e.g. the sheet title. */
   header?: ReactNode;
-  /** Percent snap point for the web Sheet (native sizes to content). */
+  /** Percent snap point. Web: the Sheet's snap point. Native: a drag detent. */
   snapPoint?: number;
   /** Wrap children in the sheet's scroll container. */
   scrollable?: boolean;
@@ -59,7 +59,10 @@ function useSheetFrameFocus(open: boolean, frameRef: RefObject<HTMLElement | nul
       if (!target || !target.isConnected) return;
       const ae = document.activeElement;
       const dropped =
-        !ae || ae === document.body || ae === document.documentElement || !!frameRef.current?.contains(ae);
+        !ae ||
+        ae === document.body ||
+        ae === document.documentElement ||
+        !!frameRef.current?.contains(ae);
       if (dropped) {
         target.focus({
           preventScroll: true,

package/src/Skeleton/Skeleton.spec.tsx

@@ -22,7 +22,7 @@ function radiusClasses(el: Element): string[] {
 
 describe("Skeleton named exports", () => {
   it("serves named exports only (no default) and keeps the namespace statics", () => {
-    expect(SkeletonExports.default).toBeUndefined();
+    expect("default" in SkeletonExports).toBe(false);
     expect(SkeletonExports.Skeleton).toBe(Skeleton);
     expect(SkeletonExports.SkeletonText).toBe(SkeletonText);
     expect(SkeletonExports.SkeletonCircle).toBe(SkeletonCircle);

package/src/SortableList/SortableList.spec.tsx

@@ -1,9 +1,14 @@
 import { fireEvent } from "@testing-library/react";
 import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { readFileSync } from "node:fs";
+import { dirname, join } from "node:path";
+import { fileURLToPath } from "node:url";
 import { useState } from "react";
 import { describe, expect, it, vi } from "vitest";
 import { SortableList } from "./index";
 
+const here = dirname(fileURLToPath(import.meta.url));
+
 const ITEMS = [
   { id: "mon", label: "Monday standup" },
   { id: "tue", label: "Tuesday review" },
@@ -14,10 +19,14 @@ const ITEMS = [
 function Harness({
   onChange = vi.fn(),
   readOnly,
+  disabled,
+  compact,
   canReorder,
 }: {
   onChange?: (next: typeof ITEMS) => void;
   readOnly?: boolean;
+  disabled?: boolean;
+  compact?: boolean;
   canReorder?: (item: (typeof ITEMS)[number], index: number) => boolean;
 }) {
   const [items, setItems] = useState(ITEMS);
@@ -28,6 +37,8 @@ function Harness({
       getLabel={(item) => item.label}
       canReorder={canReorder}
       readOnly={readOnly}
+      disabled={disabled}
+      compact={compact}
       onChange={(next) => {
         setItems(next);
         onChange(next);
@@ -119,4 +130,34 @@ describe("SortableList", () => {
     const { container } = renderWithProviders(<Harness readOnly />);
     expect(container.querySelectorAll("[data-sortable-handle]")).toHaveLength(0);
   });
+
+  it("renders no handles when disabled (board 04)", () => {
+    const { container } = renderWithProviders(<Harness disabled />);
+    expect(container.querySelectorAll("[data-sortable-handle]")).toHaveLength(0);
+  });
+
+  it("renders emptyMessage when there are no rows (board 04)", () => {
+    const { container } = renderWithProviders(
+      <SortableList
+        items={[]}
+        getId={(item: { id: string }) => item.id}
+        getLabel={(item: { label: string }) => item.label}
+        emptyMessage="No rows yet"
+      />,
+    );
+    expect(container.textContent).toContain("No rows yet");
+    expect(container.querySelectorAll("[data-sortable-row]")).toHaveLength(0);
+  });
+
+  it("compact still renders grab handles (LC-76: density does not drop controls)", () => {
+    const { container } = renderWithProviders(<Harness compact />);
+    expect(container.querySelectorAll("[data-sortable-handle]")).toHaveLength(4);
+    expect(container.querySelector('[role="list"]')).toBeTruthy();
+  });
+
+  it("spreads the outer radius fragment on the list frame, not the nested alias", () => {
+    const src = readFileSync(join(here, "index.tsx"), "utf8");
+    expect(src).toContain("{...knobProps.borderRadius}");
+    expect(src).not.toContain("knobProps.borderRadiusOuter");
+  });
 });

package/src/SortableList/SortableList.stories.tsx

@@ -21,13 +21,27 @@ const meta: Meta<typeof SortableList> = {
       },
     },
   },
+  argTypes: {
+    disabled: { control: "boolean" },
+    readOnly: { control: "boolean" },
+    compact: { control: "boolean" },
+    disabledStyle: { control: "select", options: ["keepLabel", "dimWhole"] },
+    emptyMessage: { control: "text" },
+  },
 };
 export default meta;
 
 type Story = StoryObj<typeof SortableList>;
 
-function Demo(props: { readOnly?: boolean; locked?: string }) {
-  const [items, setItems] = useState(SEED);
+function Demo(props: {
+  readOnly?: boolean;
+  locked?: string;
+  disabled?: boolean;
+  compact?: boolean;
+  empty?: boolean;
+  disabledStyle?: "keepLabel" | "dimWhole";
+}) {
+  const [items, setItems] = useState(props.empty ? [] : SEED);
   return (
     <SortableList
       items={items}
@@ -35,6 +49,10 @@ function Demo(props: { readOnly?: boolean; locked?: string }) {
       getLabel={(item) => item.label}
       canReorder={props.locked ? (item) => item.id !== props.locked : undefined}
       readOnly={props.readOnly}
+      disabled={props.disabled}
+      compact={props.compact}
+      disabledStyle={props.disabledStyle}
+      emptyMessage="No rows yet"
       onChange={setItems}
       aria-label="Sprint rituals"
     />
@@ -53,3 +71,18 @@ export const ReadOnly: Story = {
 export const LockedRow: Story = {
   render: () => <Demo locked="tue" />,
 };
+
+/** Board 04 — empty is a real state, not an error. */
+export const Empty: Story = {
+  render: () => <Demo empty />,
+};
+
+/** Board 04 — disabled list keeps labels, drops the handles. */
+export const Disabled: Story = {
+  render: () => <Demo disabled />,
+};
+
+/** Board 04 — compact nested well. */
+export const Compact: Story = {
+  render: () => <Demo compact />,
+};

package/src/SortableList/index.tsx

@@ -90,7 +90,7 @@ export function SortableList<T>({
     <YStack
       ref={containerRef as never}
       {...knobProps.surface}
-      {...knobProps.borderRadiusOuter}
+      {...knobProps.borderRadius}
       overflow="hidden"
       role="list"
       aria-label={ariaLabel}

package/src/TreeSelect/TreeSelect.stories.tsx

@@ -47,7 +47,7 @@ export default meta;
 
 type Story = StoryObj<typeof TreeSelect>;
 
-export const Account: Story = {
+export const Default: Story = {
   render: function Render() {
     const [value, setValue] = useState("hdfc");
     return (
@@ -67,6 +67,31 @@ export const Account: Story = {
   },
 };
 
+export const Open: Story = {
+  render: function Render() {
+    const [value, setValue] = useState("hdfc");
+    const [open, setOpen] = useState(true);
+    return (
+      <YStack width={280} padding="$4">
+        <TreeSelect
+          label="Account"
+          nodes={accounts}
+          value={value}
+          onChange={setValue}
+          open={open}
+          onOpenChange={setOpen}
+          placeholder="Select account"
+          searchPlaceholder="Filter accounts"
+          emptyMessage="No matching accounts"
+          defaultExpandedIds={["assets", "current", "bank"]}
+        />
+      </YStack>
+    );
+  },
+};
+
+export const Account: Story = Default;
+
 export const Empty: Story = {
   render: () => (
     <YStack width={280} padding="$4">
@@ -74,3 +99,53 @@ export const Empty: Story = {
     </YStack>
   ),
 };
+
+export const Disabled: Story = {
+  render: () => (
+    <YStack width={280} padding="$4">
+      <TreeSelect
+        label="Account"
+        nodes={accounts}
+        value="hdfc"
+        disabled
+        placeholder="Select account"
+      />
+    </YStack>
+  ),
+};
+
+export const WithError: Story = {
+  render: () => (
+    <YStack width={280} padding="$4">
+      <TreeSelect
+        label="Account"
+        nodes={accounts}
+        required
+        error="An account is required"
+        placeholder="Select account"
+      />
+    </YStack>
+  ),
+};
+
+export const ReadOnly: Story = {
+  render: () => (
+    <YStack width={280} padding="$4">
+      <TreeSelect
+        label="Account"
+        nodes={accounts}
+        value="hdfc"
+        readOnly
+        placeholder="Select account"
+      />
+    </YStack>
+  ),
+};
+
+export const Skeleton: Story = {
+  render: () => (
+    <YStack width={280} padding="$4">
+      <TreeSelect label="Account" nodes={accounts} skeleton placeholder="Select account" />
+    </YStack>
+  ),
+};

package/src/Wheel/Wheel.spec.tsx

@@ -272,7 +272,7 @@ describe("Wheel design-law (MPO-60)", () => {
   it("exposes named exports and no default", async () => {
     const mod = await import("./index");
     expect(mod.Wheel).toBe(Wheel);
-    expect(mod.default).toBeUndefined();
+    expect("default" in mod).toBe(false);
   });
 
   it("selected row type stays on body weight 400, never 600 (R7 / design-audit)", () => {

package/src/code/Code/code.spec.tsx

@@ -1,5 +1,5 @@
 import { renderWithProviders } from "@multiplatform.one/test-utils";
-import { describe, expect, it } from "vitest";
+import { describe, expect, it, vi } from "vitest";
 import { Code, CodeInline } from "./index";
 
 describe("Code", () => {
@@ -21,6 +21,15 @@ describe("Code", () => {
     const codeElement = container.querySelector("code");
     expect(codeElement).toBeDefined();
   });
+
+  it("keeps data-code-font and does not emit a dataset attribute", () => {
+    const { container } = renderWithProviders(<Code>const test = "hello"</Code>);
+    const codeElement = container.querySelector("code");
+    expect(codeElement).toBeTruthy();
+    expect(codeElement!.getAttribute("data-code-font")).toBe("mono");
+    // React lowercases an unknown dataSet prop to dataset="[object Object]".
+    expect(codeElement!.hasAttribute("dataset")).toBe(false);
+  });
 });
 
 describe("CodeInline", () => {
@@ -42,4 +51,21 @@ describe("CodeInline", () => {
     const codeElement = container.querySelector("code");
     expect(codeElement).toBeDefined();
   });
+
+  it("emits data-code-font on web without a dataSet host-prop leak", () => {
+    const leak = /does not recognize the `dataSet` prop on a DOM element/;
+    const errorSpy = vi.spyOn(console, "error").mockImplementation(() => {});
+    try {
+      const { container } = renderWithProviders(<CodeInline>npm install</CodeInline>);
+      const codeElement = container.querySelector("code");
+      expect(codeElement).toBeDefined();
+      expect(codeElement?.getAttribute("data-code-font")).toBe("mono");
+      const leaks = errorSpy.mock.calls
+        .map((args) => args.map(String).join(" "))
+        .filter((message) => leak.test(message));
+      expect(leaks).toEqual([]);
+    } finally {
+      errorSpy.mockRestore();
+    }
+  });
 });

package/src/code/Code/index.tsx

@@ -40,7 +40,6 @@ export const Code = CodeFrame.styleable((props, ref) => {
       fontFamily="$mono"
       letterSpacing={0}
       data-code-font="mono"
-      {...({ dataSet: { codeFont: "mono" } } as object)}
     />
   );
 });
@@ -57,6 +56,9 @@ const CodeInlineFrame = styled(Paragraph, {
   backgroundColor: componentColors.code.background,
   cursor: "inherit",
   borderRadius: "$3",
+  // Pin (dial: surrounding prose): 0.9× size / 0.7× leading. Size reaches
+  // the chip through context, not sizeToken. Lettered in spec § Code and
+  // CodeInline; these ratios are the house metrics already shipping.
   fontSize: "90%" as CSSProperties["fontSize"],
   lineHeight: "70%" as CSSProperties["lineHeight"],
   paddingHorizontal: "0.6%",
@@ -79,7 +81,12 @@ export const CodeInline = CodeInlineFrame.styleable((props, ref) => {
       fontFamily="$mono"
       letterSpacing={0}
       data-code-font="mono"
-      {...({ dataSet: { codeFont: "mono" } } as object)}
+      // react-native-web reads dataSet; React-DOM warns on the camel host
+      // prop. Keep the kebab attribute on every target; spread dataSet
+      // only when TAMAGUI_TARGET is native.
+      {...(process.env.TAMAGUI_TARGET === "native"
+        ? ({ dataSet: { codeFont: "mono" } } as object)
+        : {})}
     />
   );
 });

package/src/code/HighlightedCode/index.tsx

@@ -74,7 +74,6 @@ export function HighlightedCode({
             fontFamily="$mono"
             letterSpacing={0}
             data-code-font="mono"
-            {...({ dataSet: { codeFont: "mono" } } as object)}
           >
             {showLineNumbers && (
               <Text

package/src/code/highlightedCode.spec.tsx

@@ -115,9 +115,18 @@ describe("HighlightedCode", () => {
         <HighlightedCode tokens={tokens} />
       </Preset>,
     );
-    const line = container.querySelector("span");
+    // querySelector("span") used to land on renderWithProviders' Theme
+    // wrapper (`t_light _dsp_contents`), never the code line, so this guard
+    // asserted null and had been red on main. Select the line itself.
+    const line = container.querySelector("[data-code-font]") as HTMLElement | null;
     expect(line).toBeTruthy();
     expect(container.textContent).toContain("const");
     expect(line!.getAttribute("data-code-font")).toBe("mono");
+    // The actual LC-07 pin: bodyFont serif / fontWeight bold must not reach
+    // code text, so the line keeps the mono family class.
+    expect(line!.className).toContain("font_mono");
+    // React does not recognise `dataSet`; leaving it on the line logged an
+    // unknown-prop error and wrote dataset="[object Object]" on every node.
+    expect(container.querySelectorAll("[dataset]")).toHaveLength(0);
   });
 });