@multiplatform.one/forms 7.34.4 → 7.35.0

package/src/Spinner/Spinner.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
 import { useState } from "react";
-import { Preset } from "@multiplatform.one/theme";
+import { Preset, Surface } from "@multiplatform.one/theme";
 import { XStack, YStack, Paragraph } from "tamagui";
 import { Button } from "../Button";
 import { Spinner } from "./index";
@@ -41,22 +41,22 @@ export const Sizes: Story = {
       </XStack>
       <XStack gap="$6" alignItems="center">
         <YStack gap="$2" alignItems="center">
-          <Preset overrides={{ size: "small" }}>
+          <Surface size="$3">
             <Spinner />
-          </Preset>
-          <Paragraph size="$2">knob small</Paragraph>
+          </Surface>
+          <Paragraph size="$2">Surface $3</Paragraph>
         </YStack>
         <YStack gap="$2" alignItems="center">
-          <Preset overrides={{ size: "medium" }}>
+          <Surface size="$4">
             <Spinner />
-          </Preset>
-          <Paragraph size="$2">knob medium</Paragraph>
+          </Surface>
+          <Paragraph size="$2">Surface $4</Paragraph>
         </YStack>
         <YStack gap="$2" alignItems="center">
-          <Preset overrides={{ size: "large" }}>
+          <Surface size="$5">
             <Spinner />
-          </Preset>
-          <Paragraph size="$2">knob large</Paragraph>
+          </Surface>
+          <Paragraph size="$2">Surface $5</Paragraph>
         </YStack>
         <YStack gap="$2" alignItems="center">
           <Preset overrides={{ animation: "none" }}>

package/src/Spinner/index.native.tsx

@@ -28,7 +28,7 @@ export function Spinner({ size, color, ...props }: SpinnerProps) {
       sub.remove();
     };
   }, []);
-  const spinning = Boolean(knobProps.transition) && !reduceMotion;
+  const spinning = Boolean(knobProps.motion.control.transition) && !reduceMotion;
   const spin = useRef(new Animated.Value(0)).current;
 
   useEffect(() => {
@@ -65,7 +65,7 @@ export function Spinner({ size, color, ...props }: SpinnerProps) {
       aria-live="polite"
       aria-busy
       pointerEvents="none"
-      data-size={token}
+      data-size-token={token}
       data-animation={spinning ? "spin" : "none"}
       {...props}
     >

package/src/Spinner/index.tsx

@@ -7,8 +7,8 @@ import { spinnerSizePx, spinnerSizeToken, type SpinnerProps } from "./spinnerSiz
 export type { SpinnerProps, SpinnerSize } from "./spinnerSize";
 
 const MOTION_STYLE_ID = "mp1-spinner-motion";
-// A-CONTINUOUS period. Gated on `knobProps.transition` (LC-68); not sourced
-// from A-STATE durations (quick=100ms would strobe).
+// A-CONTINUOUS period. Gated on `knobProps.motion.control.transition` (LC-68); not sourced
+// from A-STATE durations (quick=150ms would strobe).
 const SPIN_PERIOD = "0.7s";
 
 function ensureMotionStyles() {
@@ -31,7 +31,7 @@ export function Spinner({ size, color, ...props }: SpinnerProps) {
   const token = spinnerSizeToken(size, knobProps.sizeToken);
   const px = spinnerSizePx(token);
   const stroke = useSpinnerStroke(color);
-  const animationsOff = !knobProps.transition;
+  const animationsOff = !knobProps.motion.control.transition;
   ensureMotionStyles();
   const { className: classNameProp, ...rest } = props as { className?: string };
   const className = ["mp1-spinner", animationsOff ? "mp1-spinner-static" : "", classNameProp]
@@ -46,7 +46,7 @@ export function Spinner({ size, color, ...props }: SpinnerProps) {
       aria-live="polite"
       aria-busy
       pointerEvents="none"
-      data-size={token}
+      data-size-token={token}
       data-animation={animationsOff ? "none" : "spin"}
       {...(isWeb ? { className } : undefined)}
       {...rest}

package/src/Spinner/spinnerSize.ts

@@ -12,7 +12,7 @@ export interface SpinnerProps {
 
 /**
  * Map the Tamagui binary size prop onto the shared size-token scale.
- * Unspecified size follows the size knob (`knobProps.sizeToken`) so one
+ * Unspecified size follows the size token (`knobProps.sizeToken`) so one
  * knob flip restyles the glyph (LC-18). Explicit small/large stay the
  * button-safe aliases ($1 / $3) used across the catalog.
  */

package/src/Wheel/Wheel.spec.tsx

@@ -54,7 +54,7 @@ describe("Wheel contrast contract", () => {
 });
 
 // ── LC-68 MOTION-RIDES-KNOB ───────────────────────────────────
-// Discrete snaps (keyboard) gate on knobProps.transition: undefined at
+// Discrete snaps (keyboard) gate on knobProps.motion.control.transition: undefined at
 // animation "none" (which also carries prefers-reduced-motion) means snap
 // duration 0 — the wheel JUMPS, no rAF tween. With motion on, the same snap
 // tweens across frames (positive control proving the probe measures motion,
@@ -120,7 +120,7 @@ describe("Wheel snaps ride the animation knob (LC-68)", () => {
     useFrameClock();
     const onChange = vi.fn();
     renderWithProviders(
-      // Default knobs: animation "quick" — knobProps.transition is defined.
+      // Default knobs: animation "quick" — knobProps.motion.control.transition is defined.
       <Wheel items={items} onChange={onChange} visibleItems={5} />,
     );
     const wrapper = screen.getByTestId("wheel-wrapper");
@@ -137,7 +137,7 @@ describe("Wheel snaps ride the animation knob (LC-68)", () => {
     expect(wheelSnapshot()).not.toBe(beforeFrames);
     expect(onChange).not.toHaveBeenCalled();
 
-    // Tween completes (quick ≈ 100ms) and commits exactly one change.
+    // Tween completes (quick = 150ms) and commits exactly one change.
     act(() => {
       vi.advanceTimersByTime(500);
     });

package/src/Wheel/Wheel.stories.tsx

@@ -136,7 +136,7 @@ export const LoopingAndBounded: Story = {
  */
 export const JoinedColumns: Story = {
   render: () => (
-    <XStack width={320}>
+    <XStack width={320} maxWidth="100%">
       <Wheel items={hours} value={9} loop flex={1} highlightEdges="start" aria-label="Hour" />
       <Wheel items={minutes} value={30} loop flex={1} highlightEdges="none" aria-label="Minute" />
       <Wheel items={periods} value="AM" flex={1} highlightEdges="end" aria-label="AM/PM" />

package/src/Wheel/index.tsx

@@ -1,7 +1,8 @@
+import { motionDurationMs } from "@multiplatform.one/theme";
 import type { CSSProperties, ReactNode } from "react";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { PanResponder, type GestureResponderEvent } from "react-native";
-import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { sizeTokenStep, useResolvedKnobs } from "@multiplatform.one/theme";
 import type { GetProps, SizeTokens } from "tamagui";
 import { View, getTokens, isWeb, styled, Text } from "tamagui";
 import { t } from "../shared/t";
@@ -83,22 +84,10 @@ const perspectivePx = 400;
 const defaultColumnWidth = 88;
 
 /** Type scale for wheel numerals — iOS UIPickerView is ~21pt at default size. */
-const wheelFontBySize: Record<"small" | "medium" | "large", SizeTokens> = {
-  small: "$6",
-  medium: "$8",
-  large: "$9",
-};
-
-/** Durations for discrete snaps (mirrors theme animationConfig). */
-const transitionDurationsMs: Record<string, number> = {
-  bouncy: 200,
-  lazy: 600,
-  slow: 500,
-  medium: 250,
-  quick: 100,
-  tooltip: 400,
-  snappy: 80,
-  gentle: 450,
+const wheelFontByStep: Record<-1 | 0 | 1, SizeTokens> = {
+  [-1]: "$6",
+  0: "$8",
+  1: "$9",
 };
 
 // The interactive wrapper is a raw <div>, so the non-removable focus-visible
@@ -285,18 +274,17 @@ export function Wheel<T = string | number>({
   "aria-label": ariaLabel,
 }: WheelProps<T>) {
   const { knobProps } = useResolvedKnobs();
-  const sizeKnob = (knobProps.size as "small" | "medium" | "large") ?? "medium";
-  const size = sizeProp ?? wheelFontBySize[sizeKnob] ?? "$8";
+  const size = sizeProp ?? wheelFontByStep[sizeTokenStep(knobProps.sizeToken)];
   // Row geometry rides nestedControl (density-aware, 32px at medium — iOS
   // UIPickerView item extent). Explicit itemHeight ejects.
   const itemHeight = itemHeightProp ?? knobProps.nestedControl.px ?? 32;
   const columnWidth = widthProp ?? defaultColumnWidth;
   ensureWheelFocusStyles();
   // LC-25: discrete snaps (keyboard / controlled value) tween; drag stays 1:1.
-  // knobProps.transition is undefined at animation "none" (which also carries
+  // knobProps.motion.control.transition is undefined at animation "none" (which also carries
   // prefers-reduced-motion) — snaps must JUMP then, not fall back to a tween.
-  const motionTransition = knobProps.transition as string | undefined;
-  const snapDurationMs = motionTransition ? (transitionDurationsMs[motionTransition] ?? 100) : 0;
+  const motionTransition = knobProps.motion.control.transition as string | undefined;
+  const snapDurationMs = motionDurationMs(motionTransition);
   const containerRef = useRef<HTMLDivElement>(null);
   const [scrollOffset, setScrollOffset] = useState(0);
   const [selectedIndex, setSelectedIndex] = useState(0);

package/src/Wheel/wheelStories.spec.tsx

@@ -4,7 +4,7 @@
  * rather than in the gallery.
  *
  * The theme hooks stay REAL: Wheel reads knobProps.nestedControl.px for row
- * height and knobProps.transition for snap duration, and a stub that omits
+ * height and knobProps.motion.control.transition for snap duration, and a stub that omits
  * either changes the geometry these assertions measure.
  */
 import { cleanup } from "@testing-library/react";

package/src/errorTint.spec.tsx

@@ -16,7 +16,20 @@ import {
 import { configWithoutAnimations } from "@tamagui/config";
 import { animationsCSS } from "@tamagui/config/v5-css";
 import type { ReactElement } from "react";
-import { TamaguiProvider, createTamagui } from "tamagui";
+import { TamaguiProvider, createTamagui, setConfig } from "tamagui";
+import { Form } from "./Form";
+import { Barcode } from "./fields/Barcode";
+import { ColorPicker } from "./fields/ColorPicker";
+import {
+  DatePicker,
+  DateRangePicker,
+  DatetimePicker,
+  MonthPicker,
+  MultiDatePicker,
+} from "./fields/DatePicker";
+import { Icon } from "./fields/Icon";
+import { SearchInput } from "./fields/SearchInput";
+import { TimePicker } from "./fields/TimePicker";
 import { Duration } from "./fields/Duration";
 import { Input } from "./fields/Input";
 import { TextArea } from "./fields/TextArea";
@@ -56,6 +69,7 @@ describe("field error tint", () => {
     for (const scheme of ["light", "dark"] as const) {
       for (const [fieldName, field] of Object.entries(fields)) {
         it(`${fieldName} enters the error theme under the ${configName} config (${scheme})`, () => {
+          setConfig(config);
           const { container } = render(
             <TamaguiProvider config={config} defaultTheme={scheme} disableInjectCSS>
               {field}
@@ -68,3 +82,65 @@ describe("field error tint", () => {
     }
   }
 });
+
+const surfaceFields: Record<string, ReactElement> = {
+  ...fields,
+  Barcode: <Barcode name="barcode" label="Barcode" error="Invalid barcode" />,
+  ColorPicker: <ColorPicker name="color" label="Color" error="Pick a color" />,
+  "ColorPicker readOnly": <ColorPicker name="color" label="Color" readOnly error="Pick a color" />,
+  DatePicker: <DatePicker name="date" label="Date" error="Pick a date" />,
+  DateRangePicker: <DateRangePicker name="dates" label="Dates" error="Pick dates" />,
+  DatetimePicker: <DatetimePicker name="datetime" label="Date and time" error="Pick a date" />,
+  MonthPicker: <MonthPicker name="month" label="Month" error="Pick a month" />,
+  MultiDatePicker: <MultiDatePicker name="dates" label="Dates" error="Pick dates" />,
+  TimePicker: <TimePicker name="time" label="Time" error="Pick a time" />,
+  Icon: <Icon name="icon" label="Icon" error="Pick an icon" />,
+  SearchInput: <SearchInput name="query" label="Find" error="Too short" />,
+};
+
+describe("field error surface", () => {
+  for (const scheme of ["light", "dark"] as const) {
+    for (const integrated of [false, true]) {
+      for (const [fieldName, field] of Object.entries(surfaceFields)) {
+        it(`${fieldName} keeps the input surface (${scheme}, ${integrated ? "form" : "standalone"})`, () => {
+          setConfig(configs.full);
+          const { container } = render(
+            <TamaguiProvider config={configs.full} defaultTheme={scheme} disableInjectCSS>
+              {integrated ? <Form onSubmit={() => {}}>{field}</Form> : field}
+            </TamaguiProvider>,
+          );
+          const boxes = container.querySelectorAll("[data-mp-input-box]");
+          expect(boxes.length).toBeGreaterThan(0);
+          for (const box of boxes) {
+            expect(box.closest(".t_sub_theme")?.className).toContain("t_error_InputContainerFrame");
+          }
+        });
+      }
+    }
+  }
+});
+
+const entryFields: Record<string, [ReactElement, string, string]> = {
+  Input: [fields.Input, "input", "t_error_Input"],
+  TextArea: [fields.TextArea, "textarea", "t_error_TextArea"],
+};
+
+describe("field error entry ink", () => {
+  for (const scheme of ["light", "dark"] as const) {
+    for (const integrated of [false, true]) {
+      for (const [fieldName, [field, selector, theme]] of Object.entries(entryFields)) {
+        it(`${fieldName} keeps entered text in its neutral entry theme (${scheme}, ${integrated ? "form" : "standalone"})`, () => {
+          setConfig(configs.full);
+          const { container } = render(
+            <TamaguiProvider config={configs.full} defaultTheme={scheme} disableInjectCSS>
+              {integrated ? <Form onSubmit={() => {}}>{field}</Form> : field}
+            </TamaguiProvider>,
+          );
+          const entry = container.querySelector(selector);
+          expect(entry).not.toBeNull();
+          expect(entry?.closest(".t_sub_theme")?.className).toContain(theme);
+        });
+      }
+    }
+  }
+});

package/src/fieldFamilyStories.radius.spec.tsx

@@ -15,7 +15,7 @@
  * reference (`_btlr-t-radius-6`) rather than resolving to `16px`, so this file
  * gates the token ladder. At `medium` the Box paints the size table's corner
  * as a number (`_btlr-9px` at the default `$4`, MPO-23 L1), so that stop
- * reads the px atom. The pixel ladder (0/5/9/16/50) and the dark scheme are
+ * reads the px atom. The pixel ladder (0/4/8/14/44) and the dark scheme are
  * measured for real by scripts/knob-axis-probe.mjs against a browser.
  */
 
@@ -38,7 +38,7 @@ afterEach(cleanup);
 const ladder: Record<BorderRadius, string> = {
   none: "$0",
   small: "$2",
-  medium: "9px",
+  medium: "8px",
   large: "$6",
   full: "$12",
 };

package/src/fieldLayout.spec.tsx

@@ -1,6 +1,10 @@
+import { defaultConfig } from "@tamagui/config/v5";
+import { configWithoutAnimations } from "@tamagui/config";
+import { animationsCSS } from "@tamagui/config/v5-css";
+import { createTamagui, TamaguiProvider } from "tamagui";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import { renderWithProviders } from "@multiplatform.one/test-utils";
-import { Preset } from "@multiplatform.one/theme";
+import { Preset, Surface } from "@multiplatform.one/theme";
 import { Input as TamaguiInput } from "tamagui";
 import { FieldLayout, useFieldDescribedBy } from "./fieldLayout";
 import { __resetDevWarnSeen } from "./shared/devWarn";
@@ -11,6 +15,12 @@ function classIncludes(container: HTMLElement, fragment: string): boolean {
   );
 }
 
+const bodyConfig = createTamagui({
+  ...configWithoutAnimations,
+  animations: animationsCSS,
+  fonts: { ...configWithoutAnimations.fonts, body: defaultConfig.fonts.body },
+});
+
 describe("FieldLayout width-by-purpose", () => {
   it("applies maxWidth from purpose", () => {
     const { container } = renderWithProviders(
@@ -193,17 +203,11 @@ describe("FieldLayout message-before-control anatomy", () => {
     return <input id="ordered" aria-describedby={useFieldDescribedBy()} />;
   }
 
-  for (const mode of ["top", "side", "compact"] as const) {
+  for (const mode of ["top", "side"] as const) {
     it(`${mode}: helper and replacement error precede the control and describe only the rendered slot`, () => {
       const renderField = (error?: string) => (
         <Preset overrides={{ fieldLabelPlacement: mode === "side" ? "side" : "top" }}>
-          <FieldLayout
-            id="ordered"
-            label="Email"
-            compactSpacing={mode === "compact"}
-            helperText="Use your work address"
-            error={error}
-          >
+          <FieldLayout id="ordered" label="Email" helperText="Use your work address" error={error}>
             <Control />
           </FieldLayout>
         </Preset>
@@ -286,9 +290,9 @@ describe("FieldLayout design-law (MPO-60)", () => {
     expect(["", "0px", "auto"]).toContain(minH);
   });
 
-  it("side label row spreads the space recipe, not a raw $3", () => {
+  it("side label row spreads the within-group role, not a raw token", () => {
     const { container } = renderWithProviders(
-      <Preset overrides={{ space: "large", fieldLabelPlacement: "side" }}>
+      <Preset overrides={{ fieldLabelPlacement: "side" }}>
         <FieldLayout id="s" label="Name">
           <TamaguiInput id="s" />
         </FieldLayout>
@@ -296,6 +300,67 @@ describe("FieldLayout design-law (MPO-60)", () => {
     );
     const row = container.querySelector("[data-label-placement='side'][data-gap]");
     expect(row).toBeTruthy();
-    expect(row?.getAttribute("data-gap")).toBe("$5");
+    expect(row?.getAttribute("data-gap")).toBe("$3");
   });
+
+  it("label to control is the tight role floored at $2, at every size", () => {
+    for (const size of ["$2", "$3", "$5"] as const) {
+      const { container, unmount } = renderWithProviders(
+        <Surface size={size}>
+          <FieldLayout id="a" label="Name" helperText="Shown below the label">
+            <TamaguiInput id="a" />
+          </FieldLayout>
+        </Surface>,
+      );
+      const field = container.querySelector("[data-label-gap]");
+      expect(field?.getAttribute("data-label-gap"), size).toBe("$2");
+      expect(classIncludes(container, "_gap-t-space-2")).toBe(true);
+      // Helper placement unchanged: label, then helper, then the control.
+      const order = Array.from(field?.children ?? []).map((el) => el.tagName);
+      expect(order[0]).toBe("LABEL");
+      unmount();
+    }
+  });
+});
+
+describe("label body stop and weight knob", () => {
+  for (const [fontWeight, expected] of [
+    ["regular", "400"],
+    ["bold", "700"],
+  ] as const) {
+    it(`uses body $true and ${fontWeight} weight`, () => {
+      const { container } = renderWithProviders(
+        <TamaguiProvider config={bodyConfig} defaultTheme="light">
+          <Preset overrides={{ fontWeight }}>
+            <FieldLayout id="w" label="Name">
+              <TamaguiInput id="w" />
+            </FieldLayout>
+          </Preset>
+        </TamaguiProvider>,
+        { tamagui: false },
+      );
+      const label = container.querySelector("label")!;
+      expect(label.className).toContain("_fos-f-size-true");
+      expect(getComputedStyle(label).fontSize).toBe("15px");
+      expect(getComputedStyle(label).fontWeight).toBe(expected);
+    });
+  }
+});
+
+describe("helper text sits one body key under the control", () => {
+  for (const size of [undefined, "$true", "$4"] as const) {
+    it(`paints body $3 at ${size ?? "the default"} size`, () => {
+      const { container } = renderWithProviders(
+        <TamaguiProvider config={bodyConfig} defaultTheme="light">
+          <FieldLayout id="h" label="Name" helperText="Shown on your profile" size={size}>
+            <TamaguiInput id="h" />
+          </FieldLayout>
+        </TamaguiProvider>,
+        { tamagui: false },
+      );
+      const helper = container.querySelector("#h-description")!;
+      expect(helper.className).toContain("_fos-f-size-3");
+      expect(helper.className).not.toContain("_fos-f-size-1");
+    });
+  }
 });

package/src/fieldLayout.tsx

@@ -52,6 +52,7 @@ function getHelperTextSize(size?: SizeTokens): FontSizeTokens {
     $2: "$1",
     $3: "$2",
     $4: "$3",
+    $true: "$3",
     $5: "$4",
     $6: "$5",
     $7: "$6",
@@ -116,12 +117,6 @@ export interface FieldLayoutProps {
   size?: SizeTokens;
   knobProps?: KnobProps;
   onBlur?: (...args: any[]) => void;
-  /**
-   * Use compact spacing between field and helper/error text.
-   * Useful for inline-label fields (checkbox, switch) where the label
-   * is beside the control rather than above it.
-   */
-  compactSpacing?: boolean;
   /**
    * Semantic content purpose (DG-FORM-07). Drives default maxWidth in `ch`
    * via `FIELD_WIDTH_BY_PURPOSE`. Explicit `maxWidth` / `width` eject.
@@ -146,9 +141,27 @@ export interface FieldLayoutProps {
   maxWidth?: number | string;
   /** Eject: override purpose-derived width. */
   width?: number | string;
+  /**
+   * Size the field to its control instead of the column: a number with a
+   * unit reads as one short value, not a full-width bar.
+   */
+  hug?: boolean;
   children: ReactNode;
 }
 
+/** Label-to-control floor: the tight role never drops below `$2`. */
+const LABEL_TO_CONTROL_FLOOR = "$2";
+
+/**
+ * The larger of two `$space` keys by their step (`$1.5` < `$2`). A key that
+ * is not a `$n` step is kept as given.
+ */
+function floorSpaceToken(token: string, floor: string): string {
+  const step = (key: string) => Number(key.replace(/^\$/, ""));
+  const value = step(token);
+  return Number.isFinite(value) && value < step(floor) ? floor : token;
+}
+
 export function FieldLayout({
   id,
   label,
@@ -162,13 +175,13 @@ export function FieldLayout({
   size,
   knobProps: knobPropsProp,
   onBlur,
-  compactSpacing,
   purpose,
   autoComplete,
   placeholder,
   "aria-label": ariaLabel,
   maxWidth,
   width,
+  hug = false,
   children,
 }: FieldLayoutProps) {
   const { knobProps: resolvedKnobs, disabledState } = useResolvedKnobs();
@@ -190,7 +203,7 @@ export function FieldLayout({
   const dimWhole = Boolean(_disabled) && disabledStyle === "dimWhole";
   const keepLabelReadable = Boolean(_disabled) && disabledStyle !== "dimWhole";
   const labelPlacement = knobProps.fieldLabelPlacement ?? "top";
-  const sideLabel = labelPlacement === "side" && Boolean(label) && !compactSpacing;
+  const sideLabel = labelPlacement === "side" && Boolean(label);
 
   warnPlaceholderAsLabel({
     placeholder,
@@ -203,9 +216,10 @@ export function FieldLayout({
     warnBannedErrorWords(errorMessage, { component: "FieldLayout", id });
   }
 
-  // Use compact gap for inline-label fields (checkbox, switch) or when explicitly requested
-  const useCompact = compactSpacing || !label;
-  const gapProps = useCompact ? { gap: "$1" } : knobProps.gap;
+  // Label to control, control to helper/error: the tight role (A9) floored at
+  // `$2`, so a label sits with its control but never touches it; fields read
+  // apart at the `gap` role (the form's rhythm). Helper/error placement stays.
+  const gapProps = { gap: floorSpaceToken(knobProps.gapSm.gap, LABEL_TO_CONTROL_FLOOR) };
 
   // Purpose / autocomplete → default width; explicit maxWidth/width win.
   const purposeWidth =
@@ -216,6 +230,7 @@ export function FieldLayout({
     ...purposeWidth,
     ...(maxWidth !== undefined ? { maxWidth } : {}),
     ...(width !== undefined ? { width } : {}),
+    ...(hug ? { alignSelf: "flex-start" as const, maxWidth: maxWidth ?? "100%" } : {}),
   };
 
   const describedBy = id
@@ -247,7 +262,7 @@ export function FieldLayout({
   // with the token twice and an accessible name spoken twice ("Birth Date
   // Birth Date"). Controls carry the field `id` and an `aria-label` fallback
   // for the label-less case; they must not name themselves when a Label exists.
-  // House Label owns T-LABEL / R7 (weight 400) and must not receive a
+  // House Label owns T-LABEL and the fontWeight knob and must not receive a
   // control-height sizeToken (LC-73). Required mark is applied once here
   // via the house `required` prop — do not also suffix children.
   const labelNode = label ? (
@@ -257,7 +272,6 @@ export function FieldLayout({
       required={required}
       requiredMarking={requiredMarkingProp}
       error={hasErrorState}
-      fontWeight="400"
       flexShrink={sideLabel ? 0 : undefined}
       {...labelProps}
     >
@@ -315,6 +329,8 @@ export function FieldLayout({
           data-disabled-style={disabledStyle}
           data-disabled-dimmed={dimWhole ? "true" : "false"}
           data-label-placement={sideLabel ? "side" : "top"}
+          data-label-gap={String(gapProps.gap)}
+          data-field-hug={hug ? "true" : undefined}
         >
           {sideLabel ? (
             <XStack

package/src/fields/Barcode/BarcodeScanner.native.tsx

@@ -53,10 +53,9 @@ export function BarcodeScanner({
   onClose,
   knobProps,
   formats,
-  compact,
 }: BarcodeScannerProps) {
   const barcodeTypes = resolveNativeBarcodeTypes(formats);
-  const viewportPx = scannerViewportHeight(compact);
+  const viewportPx = scannerViewportHeight(knobProps.sizeToken);
   const [permission, requestPermission] = useCameraPermissions();
   const handledRef = useRef(false);
   const [denied, setDenied] = useState(false);

package/src/fields/Barcode/BarcodeScanner.tsx

@@ -87,14 +87,13 @@ export function BarcodeScanner({
   onClose,
   knobProps,
   formats,
-  compact,
 }: BarcodeScannerProps) {
   const scannerRef = useRef<Html5QrcodeScanner | null>(null);
   const containerId = useRef(`barcode-scanner-${Math.random().toString(36).slice(2, 9)}`);
   const [attempt, setAttempt] = useState(0);
   const [status, setStatus] = useState<"starting" | "streaming" | "error">("starting");
   const [errorMessage, setErrorMessage] = useState<string | null>(null);
-  const viewportPx = scannerViewportHeight(compact);
+  const viewportPx = scannerViewportHeight(knobProps.sizeToken);
   const formatKey = formats?.join(",") ?? "";
 
   useEffect(() => {