@multiplatform.one/forms 7.42.0 → 7.44.0

package/src/InputParts/index.tsx

@@ -28,9 +28,9 @@ import {
 } from "tamagui";
 import {
   ensureCompositeFocusRing,
-  ensureFocusVisibleRing,
-  FOCUS_RING_CLIPPED_OFFSET,
-  FOCUS_RING_HALO_OFFSET,
+  FIELD_FOCUS_REST,
+  FIELD_FOCUS_STYLE,
+  fieldFocusCss,
   useTouchSurface,
   isTouchSurface,
   recipeFamilies,
@@ -50,6 +50,7 @@ import {
 } from "@multiplatform.one/theme";
 import { formButtonColors, formCommonColors, formInputColors } from "../shared/colorRamps";
 import { useControlGrouped } from "../shared/groupContext";
+import { nativeAutoFocus } from "../shared/nativeAutoFocus";
 import { useIsInTableCell } from "../shared/tableCellContext";
 import { useFieldA11y, useFieldDescribedBy } from "../fieldLayout";
 
@@ -159,22 +160,6 @@ export const useForwardFocus = (target: RefObject<TamaguiElement | null>) => {
 // Default group styles
 // ---------------------------------------------------------------------------
 
-/** Resting outline: transparent + 0 width so blur never lands on theme `$outlineColor`. */
-const inputOutlineRest = {
-  outlineWidth: 0,
-  outlineColor: "transparent",
-  outlineStyle: "solid" as any,
-} as const;
-
-const inputOutlineFocus = {
-  outlineColor: "$outlineColor",
-  outlineWidth: 2,
-  outlineStyle: "solid" as any,
-  // Inset: Input.Box clips children with overflow:hidden; an outer +2px
-  // ring is severed (LC-71 clipping carve-out).
-  outlineOffset: -2,
-} as const;
-
 /**
  * LC-71 field anatomy (Polaris Connected / Primer TextInputWrapper / Spectrum):
  * one painted Box owns border + radius + ring; Icon/prefix/suffix live inside
@@ -191,37 +176,9 @@ const AREA_NO_OUTLINE = {
 
 type BoxOverflow = "hidden" | "visible";
 
-export function boxRingMode(
-  overflow: BoxOverflow,
-  paintsRing: boolean,
-): "inset" | "outset" | undefined {
-  if (!paintsRing) return undefined;
-  return overflow === "hidden" ? "inset" : "outset";
-}
-
-export function boxRingOffset(mode: "inset" | "outset" | undefined): number {
-  // Both branches are LC-71 §4 sanctioned offsets: the clipping inset when the
-  // Box clips its adornments, the shape halo when it does not (MPO-92).
-  return mode === "outset" ? FOCUS_RING_HALO_OFFSET : FOCUS_RING_CLIPPED_OFFSET;
-}
-
-export const inputPartsRingCss = `/* LC-71: ring on Box (adornments inside); Area never outlines.
-   Inset iff the Box clips (overflow:hidden). Do not :has(:focus-visible) on
-   every descendant — SearchInput clear ✕ is a second focusable. */
-[data-mp-input-box][data-mp-ring="inset"]:has(input:focus),
-[data-mp-input-box][data-mp-ring="inset"]:has(textarea:focus),
-[data-mp-input-box][data-mp-ring="inset"]:has([data-mp-input-area]:focus),
-[data-mp-input-box][data-mp-ring="inset"]:focus-visible {
-  outline: 2px solid var(--outlineColor, var(--c-outlineColor, CanvasText)) !important;
-  outline-offset: -2px !important;
-}
-[data-mp-input-box][data-mp-ring="outset"]:has(input:focus),
-[data-mp-input-box][data-mp-ring="outset"]:has(textarea:focus),
-[data-mp-input-box][data-mp-ring="outset"]:has([data-mp-input-area]:focus),
-[data-mp-input-box][data-mp-ring="outset"]:focus-visible {
-  outline: 2px solid var(--outlineColor, var(--c-outlineColor, CanvasText)) !important;
-  outline-offset: 2px !important;
-}
+export const inputPartsRingCss = `/* FZ-7717: a focused Box takes the shared field focus look; Area never outlines. */
+${fieldFocusCss("[data-mp-input-box][data-mp-field-focus]")}
+${fieldFocusCss("[data-mp-input-box][data-mp-field-focus].mp-field-focus-deep", { deep: true })}
 [data-mp-input-area],
 [data-mp-input-area]:focus,
 [data-mp-input-area]:focus-visible,
@@ -249,19 +206,14 @@ export function ensureInputPartsFocusRing(): void {
 }
 
 function webBoxRingAttrs(
-  overflow: BoxOverflow,
-  paintsRing: boolean,
+  paintsFocus: boolean,
   extraClass?: string,
 ): Record<string, unknown> | undefined {
   if (!isWeb) return undefined;
-  const mode = boxRingMode(overflow, paintsRing);
-  const className = [paintsRing ? "mp-composite-ring" : undefined, extraClass]
-    .filter(Boolean)
-    .join(" ");
   return {
-    ...(className ? { className } : undefined),
+    ...(extraClass ? { className: extraClass } : undefined),
     "data-mp-input-box": "true",
-    ...(mode ? { "data-mp-ring": mode } : undefined),
+    ...(paintsFocus ? { "data-mp-field-focus": "true" } : undefined),
   };
 }
 
@@ -292,23 +244,14 @@ export const defaultInputGroupStyles = {
   backgroundColor: formInputColors.background.base,
 
   minWidth: 0,
-  ...inputOutlineRest,
+  ...FIELD_FOCUS_REST,
 
   hoverStyle: {
     borderColor: formInputColors.border.hover,
   },
 
-  // LC-71: any-focus only shifts the border. The ring lives on
-  // `focusVisibleStyle` and on `[data-mp-ring]:has(input:focus)` so
-  // button-like Boxes (Select, pagination) do not ring on mouse click.
-  focusStyle: {
-    borderColor: formInputColors.border.focus,
-  },
-
-  focusVisibleStyle: {
-    borderColor: formInputColors.border.focus,
-    ...inputOutlineFocus,
-  },
+  focusStyle: FIELD_FOCUS_STYLE,
+  focusVisibleStyle: FIELD_FOCUS_STYLE,
 } as const;
 
 // ---------------------------------------------------------------------------
@@ -324,9 +267,6 @@ const InputGroupFrame = styled(XGroup, {
   alignItems: "center",
   context: InputContext,
   overflow: "hidden",
-  // LC-71: className on XGroup is best-effort (often dropped). The styleable
-  // spread stamps data-mp-input-box / data-mp-ring; CSS keys off those.
-  ...(isWeb ? { className: "mp-composite-ring" } : {}),
 
   variants: {
     touch: { true: {}, false: {} },
@@ -375,11 +315,9 @@ function wrapNativePressable(
 
 const InputGroupImpl = InputGroupFrame.styleable<{
   /**
-   * OVERLAY_ANCHOR_GAP rule (theme/layoutTokens) — one surface owner per
-   * overlay: while a floating panel intentionally covers this box (Select's
-   * macOS-style listbox), the box must not paint its focus ring. The ring
-   * sits outside the border box (outline + offset), so a covering panel can
-   * never hide it — it ghosts around the panel's corners as a doubled edge.
+   * Kept for callers. Since FZ-7717 the field focus look is the Box's own
+   * accent border, which a covering panel hides, so there is no ring left to
+   * suppress.
    */
   suppressFocusRing?: boolean;
   /**
@@ -398,7 +336,7 @@ const InputGroupImpl = InputGroupFrame.styleable<{
     children,
     onPress,
     disabled,
-    suppressFocusRing,
+    suppressFocusRing: _suppressFocusRing,
     recipeFamily = "control",
     sizeRecipeEscape,
     height: heightProp,
@@ -417,27 +355,21 @@ const InputGroupImpl = InputGroupFrame.styleable<{
   const inTableCell = useIsInTableCell();
   // Native Pressable owns onPress; do not also pass it to XGroup (double-fire).
   const framePressProps = isWeb ? { onPress, disabled } : { disabled };
-  // Standalone Box clips children to radius → inset ring. Grouped / in-cell
-  // frames leave overflow visible and do not paint their own ring.
+  // Standalone Box clips children to radius. Grouped / in-cell frames leave
+  // overflow visible and leave focus to their container.
   // LC-85: on native, an elevation token must not share a clipsToBounds layer
-  // with the shadow (iOS masks the layer's own drop shadow). Web box-shadow
-  // paints outside overflow:hidden, so the ring clip can stay.
-  const paintsRing = !grouped && !inTableCell;
+  // with the shadow (iOS masks the layer's own drop shadow).
+  const paintsFocus = !grouped && !inTableCell;
   const hasElevation = knobProps.elevation != null;
   const hasWebPressSlop =
     isWeb && (props as { "data-mp-press-slop"?: string })["data-mp-press-slop"] != null;
   const boxOverflow: BoxOverflow =
-    paintsRing && !(hasElevation && !isWeb) && !hasWebPressSlop ? "hidden" : "visible";
-  const ringMode = boxRingMode(boxOverflow, paintsRing);
+    paintsFocus && !(hasElevation && !isWeb) && !hasWebPressSlop ? "hidden" : "visible";
   if (isWeb) {
     ensureCompositeFocusRing();
     ensureInputPartsFocusRing();
   }
-  const boxRingAttrs = webBoxRingAttrs(
-    boxOverflow,
-    paintsRing,
-    (props as { className?: string }).className,
-  );
+  const boxRingAttrs = webBoxRingAttrs(paintsFocus, (props as { className?: string }).className);
 
   // DG-A11Y-01 / DG-A11Y-03 — DEV guardrails (tree-shaken in production).
   warnPositiveTabIndex({
@@ -577,29 +509,6 @@ const InputGroupImpl = InputGroupFrame.styleable<{
     );
   }
 
-  // Covered by an overlay panel (see prop doc): keep the focus border color
-  // but draw no ring on either focus path. This is an intentional a11y
-  // exception — the open panel is the focus affordance while it covers this
-  // box. Hoisted (with `undefined` in the union) so the JSX spread does not
-  // re-specify focusStyle/focusVisibleStyle literally (TS2783 under the
-  // build tsconfig).
-  const suppressedRingProps = suppressFocusRing
-    ? {
-        focusStyle: { borderColor: formInputColors.border.focus, ...inputOutlineRest },
-        focusVisibleStyle: {
-          borderColor: formInputColors.border.focus,
-          ...inputOutlineRest,
-        },
-      }
-    : undefined;
-
-  const focusRing = ensureFocusVisibleRing({
-    ...inputOutlineFocus,
-    ...control.focusKnobProps,
-    ...control.focusVisibleKnobProps,
-    outlineOffset: boxRingOffset(ringMode),
-  });
-
   return (
     <FocusContext.Provider focused={focused} setFocused={setFocused}>
       {wrapNativePressable(
@@ -623,45 +532,15 @@ const InputGroupImpl = InputGroupFrame.styleable<{
           pressStyle={{
             ...control.pressKnobProps,
           }}
-          focusStyle={{
-            borderColor: formInputColors.border.focus,
-            ...control.focusKnobProps,
-          }}
-          focusVisibleStyle={ensureFocusVisibleRing({
-            borderColor: formInputColors.border.focus,
-            ...inputOutlineFocus,
-            ...control.focusVisibleKnobProps,
-            outlineOffset: boxRingOffset(ringMode),
-          })}
+          focusStyle={FIELD_FOCUS_STYLE}
+          focusVisibleStyle={FIELD_FOCUS_STYLE}
           {...props}
           {...passthroughSizeProps}
           {...insetPadProps}
           {...sizeRecipeEscapeOverride}
           {...framePressProps}
           {...boxRingAttrs}
-          {...(focused && !suppressFocusRing
-            ? {
-                // Text-entry carve-out (LC-71): inner Area focus means typing
-                // is next, so the Box rings on any focus — including click.
-                // CSS `[data-mp-ring]` is the sync path; this is the token-
-                // resolved backup (and the native path). Button-like Boxes
-                // (Select) do not set `focused` (no Area onFocus).
-                borderColor: formInputColors.border.focus,
-                ...focusRing,
-              }
-            : isWeb
-              ? {
-                  // Explicit rest — avoid leaving theme `$outlineColor` (near-white in
-                  // dark) as the computed outline-color while width settles.
-                  // Keep outline-transparent rest (border-flicker fix); do not warn.
-                  ...inputOutlineRest,
-                }
-              : // FZ-7718: on iOS the outline's width and offset changing as
-                // the field takes focus makes it resign first responder, so a
-                // programmatic focus (Return to the next field) never sticks.
-                // Native keeps the ring's geometry at rest and fades its color.
-                { ...focusRing, outlineColor: "transparent" })}
-          {...suppressedRingProps}
+          {...(focused ? FIELD_FOCUS_STYLE : FIELD_FOCUS_REST)}
           // LC-40 DISABLED-VISIBLE: the input frame is text-bearing chrome —
           // keepLabel washes fill/border (value text keeps >= AA) and
           // dimWhole leaves the dim to the FieldLayout assembly. Read-only
@@ -894,6 +773,7 @@ const InputAreaImpl = InputFrame.styleable<{
                   : undefined
         }
         {...props}
+        {...nativeAutoFocus(props as { autoFocus?: boolean; autoFocusNative?: boolean })}
         {...(flexProp != null ? { flex: flexProp } : undefined)}
         {...(widthProp != null
           ? { width: widthProp, minWidth: minWidthProp, maxWidth: maxWidthProp }

package/src/fieldFocus.spec.ts

@@ -0,0 +1,44 @@
+import { readdirSync, readFileSync, statSync } from "node:fs";
+import { join } from "node:path";
+import { inspectDesign } from "@multiplatform.one/config/design-lint";
+import { describe, expect, it } from "vitest";
+
+const src = join(process.cwd(), "src");
+
+function sources(dir: string): string[] {
+  return readdirSync(dir).flatMap((entry) => {
+    const path = join(dir, entry);
+    if (statSync(path).isDirectory()) return sources(path);
+    return /\.tsx?$/.test(entry) && !/\.(spec|stories|test)\./.test(entry) ? [path] : [];
+  });
+}
+
+describe("FZ-7717: every MPO field takes its focus look from FIELD_FOCUS_STYLE", () => {
+  const files = [...sources(join(src, "fields")), ...sources(join(src, "InputParts"))];
+
+  it("no field paints its own focus ring or shadow", () => {
+    const hits = files.flatMap((file) =>
+      (inspectDesign(readFileSync(file, "utf8"), file) as string[]).filter((error) =>
+        error.includes("[field-focus]"),
+      ),
+    );
+    expect(hits).toEqual([]);
+  });
+
+  it("Input.Box, the Box every text field renders, uses the shared look", () => {
+    const box = readFileSync(join(src, "InputParts", "index.tsx"), "utf8");
+    expect(box).toContain("focusStyle={FIELD_FOCUS_STYLE}");
+    expect(box).toContain("focusVisibleStyle={FIELD_FOCUS_STYLE}");
+    expect(box).not.toMatch(
+      /outlineOffset|FOCUS_RING_(?:HALO|CLIPPED)_OFFSET|ensureFocusVisibleRing/,
+    );
+  });
+
+  it("the detector catches a field that forks the look", () => {
+    const forked = inspectDesign(
+      "const x = <Input.Box focusStyle={{ outlineWidth: 2, outlineOffset: 2 }} />;",
+      "Forked.tsx",
+    ) as string[];
+    expect(forked.join("\n")).toMatch(/\[field-focus\]/);
+  });
+});

package/src/fields/DatePicker/DatePicker.spec.tsx

@@ -51,7 +51,7 @@ describe("DatePicker", () => {
       const label = result.container.querySelector("label") as HTMLLabelElement;
       expect(trigger).toBeTruthy();
       expect(trigger.contains(input)).toBe(true);
-      expect(trigger.className).toMatch(/mp-composite-ring/);
+      expect(trigger.getAttribute("data-mp-field-focus")).toBe("true");
       expect(trigger.getAttribute("tabindex")).toBe("0");
       expect(trigger.getAttribute("role")).toBe("combobox");
       expect(input.tabIndex).toBe(-1);

package/src/fields/DatePicker/DateRangePicker.spec.tsx

@@ -197,7 +197,7 @@ describe("DateRangePicker", () => {
       const result = renderWithProviders(<DateRangePicker label="Range" name="range" />);
       const input = result.container.querySelector("input");
       expect(input?.className).toMatch(/mp-input-area/);
-      const box = result.container.querySelector(".mp-composite-ring");
+      const box = result.container.querySelector("[data-mp-field-focus]");
       expect(box).toBeTruthy();
       expect(box?.contains(input)).toBe(true);
     });

package/src/fields/DatePicker/MultiDatePicker.spec.tsx

@@ -162,7 +162,7 @@ describe("MultiDatePicker", () => {
       const result = renderWithProviders(<MultiDatePicker label="Dates" name="dates" />);
       const input = result.container.querySelector("input");
       expect(input?.className).toMatch(/mp-input-area/);
-      const box = result.container.querySelector(".mp-composite-ring");
+      const box = result.container.querySelector("[data-mp-field-focus]");
       expect(box).toBeTruthy();
       expect(box?.contains(input)).toBe(true);
     });

package/src/fields/Duration/Duration.spec.tsx

@@ -207,12 +207,12 @@ describe("Duration", () => {
       expect(sSize).not.toBe(lSize);
     });
 
-    it("rings the outer box, never the inner segments (LC-71)", () => {
+    it("focuses the outer box, never the inner segments (FZ-7717)", () => {
       const result = renderWithProviders(<Duration label="Ring" value={3600} />);
       const box = result.container.querySelector("[data-ring-target='box']") as HTMLElement;
       const hours = result.container.querySelector('input[aria-label="Hours"]') as HTMLInputElement;
       expect(box).toBeTruthy();
-      expect(box.className).toMatch(/mp-composite-ring/);
+      expect(box.getAttribute("data-mp-field-focus")).toBe("true");
       expect(box.contains(hours)).toBe(true);
       expect(hours.className).toMatch(/mp-input-area/);
     });

package/src/fields/Input/Input.copy.spec.tsx

@@ -30,7 +30,7 @@ describe("Input copy (CopyField slot)", () => {
       (el) => el !== input && el !== copy,
     );
     expect(extraStops).toHaveLength(0);
-    expect(result.container.querySelector(".mp-composite-ring")).toBeTruthy();
+    expect(result.container.querySelector("[data-mp-field-focus]")).toBeTruthy();
   });
 
   it("empty omits the cap so there is one tab stop", () => {

package/src/fields/Input/Input.spec.tsx

@@ -250,7 +250,7 @@ describe("Input", () => {
   });
 
   describe("LC-71 RING-ANATOMY", () => {
-    it("rings the Box (icons included), never the inner input", () => {
+    it("focuses the Box (icons included), never the inner input", () => {
       const result = renderWithProviders(
         <Input
           label="Search"
@@ -262,7 +262,7 @@ describe("Input", () => {
       const box = result.container.querySelector("[data-ring-target='box']") as HTMLElement;
       const input = result.container.querySelector("input") as HTMLInputElement;
       expect(box).toBeTruthy();
-      expect(box.className).toMatch(/mp-composite-ring/);
+      expect(box.getAttribute("data-mp-field-focus")).toBe("true");
       expect(box.contains(result.getByTestId("leading"))).toBe(true);
       expect(box.contains(result.getByTestId("trailing"))).toBe(true);
       expect(box.contains(input)).toBe(true);
@@ -282,7 +282,7 @@ describe("Input", () => {
       );
       const box = result.container.querySelector("[data-ring-target='box']") as HTMLElement;
       const input = result.container.querySelector("input") as HTMLInputElement;
-      expect(box.className).toMatch(/mp-composite-ring/);
+      expect(box.getAttribute("data-mp-field-focus")).toBe("true");
       expect(box.contains(result.getByTestId("leading"))).toBe(true);
       expect(input.className).toMatch(/mp-input-area/);
     });
@@ -451,13 +451,12 @@ describe("Input", () => {
       expect(box.className).toContain("_h-48px");
     });
 
-    it("focus ring offset is 0 (F1 / reference §10 / cover-offset-0)", () => {
+    it("focus is the shared accent border, not an offset ring (FZ-7717)", () => {
       const result = renderWithProviders(<Input label="Name" name="n" />);
       const box = result.container.querySelector("[data-ring-target='box']") as HTMLElement;
-      expect(box.getAttribute("data-ring-offset")).toBe("0");
-      expect(document.getElementById("mp-input-field-ring-offset")?.textContent).toContain(
-        "outline-offset: 0",
-      );
+      expect(box.getAttribute("data-mp-field-focus")).toBe("true");
+      expect(box.getAttribute("data-ring-offset")).toBeNull();
+      expect(document.getElementById("mp-input-field-ring-offset")).toBeNull();
     });
 
     it("paints the field label at weight 400 (R7 / §6.1)", () => {

package/src/fields/Input/index.tsx

@@ -11,7 +11,7 @@ import type {
   SizeTokens,
   TamaguiElement,
 } from "tamagui";
-import { isWeb, Text } from "tamagui";
+import { Text } from "tamagui";
 import { Skeleton } from "../../Skeleton";
 import { resolveFieldInputProps } from "../../fieldDefaults";
 import { Field, FieldLayout } from "../../fieldLayout";
@@ -31,23 +31,6 @@ import { useKeyboardChain } from "../../keyboard";
 
 type InputAreaProps = ComponentProps<typeof InputParts.Area>;
 
-/** F1 / reference §10: standalone Input rings at offset 0, not the inset −2. */
-const INPUT_FIELD_RING_STYLE_ID = "mp-input-field-ring-offset";
-
-export function ensureInputFieldRingOffset(): void {
-  if (typeof document === "undefined") return;
-  if (document.getElementById(INPUT_FIELD_RING_STYLE_ID)) return;
-  const tag = document.createElement("style");
-  tag.id = INPUT_FIELD_RING_STYLE_ID;
-  tag.textContent = `[data-mp-input-field][data-mp-ring="inset"]:has(input:focus),
-[data-mp-input-field][data-mp-ring="inset"]:has(textarea:focus),
-[data-mp-input-field][data-mp-ring="inset"]:has([data-mp-input-area]:focus),
-[data-mp-input-field][data-mp-ring="inset"]:focus-visible {
-  outline-offset: 0px !important;
-}`;
-  document.head.appendChild(tag);
-}
-
 export interface InputProps {
   name?: string;
   form?: AnyFormApi;
@@ -165,7 +148,6 @@ export function Input({
   });
   const inputRef = useRef<TamaguiElement>(null);
   const focusTrigger = useForwardFocus(inputRef);
-  if (isWeb) ensureInputFieldRingOffset();
 
   const resolvedValidators = useResolvedValidators(required, validators, label, name);
 
@@ -199,7 +181,6 @@ export function Input({
     "data-ring-target": "box",
     "data-radius-class": "DEFAULT",
     "data-radius-part": "Input",
-    "data-ring-offset": "0",
     "data-mp-input-field": "true",
     ...(belowFloor ? { hitSlop: pressTargetHitSlop(visualHeight) } : undefined),
   } as const;