@multiplatform.one/forms 7.54.0 → 7.54.1

package/src/FormGrid.spec.tsx

@@ -53,8 +53,8 @@ function stubContainerWidth(width: number) {
 }
 
 describe("formSpacing tokens", () => {
-  it("encodes section gap larger than field gap (DG-FORM-06)", () => {
-    expect(formFieldGap).toBe("$3");
+  it("encodes section gap larger than field gap (DG-FORM-06; field rhythm $4, LC-154)", () => {
+    expect(formFieldGap).toBe("$4");
     expect(formSectionGap).toBe("$8");
     expect(Number(formSectionGap.slice(1))).toBeGreaterThan(Number(formFieldGap.slice(1)));
   });
@@ -78,7 +78,8 @@ describe("FormGrid", () => {
     expect(grid?.getAttribute("data-columns")).toBe("1");
     expect(grid?.getAttribute("data-requested-columns")).toBe("1");
     expect(grid?.getAttribute("data-max-columns")).toBe("2");
-    expect(grid?.getAttribute("data-gap")).toBe("$3");
+    // LC-154: fields stack at the fieldGap role.
+    expect(grid?.getAttribute("data-gap")).toBe("$4");
     expect(grid?.getAttribute("data-size-token")).toBe("$true");
   });
 
@@ -129,7 +130,7 @@ describe("FormGrid", () => {
     expect(grid.style.gridTemplateColumns).toBe("repeat(1, minmax(0, 1fr))");
   });
 
-  it("gap is the within-group role at any size token, never sizeToken", () => {
+  it("gap is the field rhythm role (fieldGap $4, LC-154) at any size token, never sizeToken", () => {
     const result = renderWithProviders(
       <Surface size="$5">
         <FormGrid>
@@ -138,7 +139,7 @@ describe("FormGrid", () => {
       </Surface>,
     );
     const grid = result.container.querySelector("[data-mpo-form-grid]");
-    expect(grid?.getAttribute("data-gap")).toBe("$3");
+    expect(grid?.getAttribute("data-gap")).toBe("$4");
     expect(grid?.getAttribute("data-size-token")).toBe("$5");
   });
 
@@ -153,10 +154,10 @@ describe("FormGrid", () => {
     const grid = result.container.querySelector("[data-mpo-form-grid]");
     expect(grid?.hasAttribute("data-density")).toBe(false);
     expect(grid?.getAttribute("data-size-token")).toBe("$3");
-    expect(grid?.getAttribute("data-gap")).toBe("$3");
+    expect(grid?.getAttribute("data-gap")).toBe("$4");
   });
 
-  it("spreads the role gap fragment (not a raw 16)", () => {
+  it("spreads the fieldGap role fragment (not a raw 16, LC-154)", () => {
     const result = renderWithProviders(
       <Preset>
         <FormGrid>
@@ -165,7 +166,7 @@ describe("FormGrid", () => {
       </Preset>,
     );
     const grid = result.container.querySelector("[data-mpo-form-grid]");
-    expect(grid?.getAttribute("data-gap")).toBe("$3");
+    expect(grid?.getAttribute("data-gap")).toBe("$4");
   });
 });
 
@@ -195,7 +196,7 @@ describe("FieldGroup", () => {
     ).toBe("2");
   });
 
-  it("field gap is the within-group role, not the size token", () => {
+  it("field gap is the field rhythm role (fieldGap $4, LC-154), not the size token", () => {
     const result = renderWithProviders(
       <Surface size="$5">
         <FieldGroup legend="Billing">
@@ -204,7 +205,7 @@ describe("FieldGroup", () => {
       </Surface>,
     );
     const group = result.container.querySelector("[data-mpo-field-group]");
-    expect(group?.getAttribute("data-field-gap")).toBe("$3");
+    expect(group?.getAttribute("data-field-gap")).toBe("$4");
     expect(group?.getAttribute("data-size-token")).toBe("$5");
   });
 });
@@ -257,7 +258,7 @@ describe("FormSection", () => {
 });
 
 describe("FormSection semantic gaps (DG-FORM-06)", () => {
-  it("defaults field gap to knobProps.gap and section gap to knobProps.gapLg", () => {
+  it("defaults field gap to knobProps.fieldGap (LC-154) and section gap to knobProps.gapLg", () => {
     const result = renderWithProviders(
       <FormSectionStack>
         <FormSection label="A">
@@ -267,8 +268,8 @@ describe("FormSection semantic gaps (DG-FORM-06)", () => {
     );
     const section = result.container.querySelector("[data-mpo-form-section]");
     const stack = result.container.querySelector("[data-mpo-form-section-stack]");
-    // knob defaults: gap $4 (within-group), gapLg $5 (between-groups)
-    expect(section?.getAttribute("data-field-gap")).toBe("$3");
+    // knob defaults: fieldGap $4 (field to field, LC-154), gapLg $5 (between groups)
+    expect(section?.getAttribute("data-field-gap")).toBe("$4");
     expect(stack?.getAttribute("data-section-gap")).toBe("$5");
     const fieldStep = Number(section?.getAttribute("data-field-gap")?.slice(1));
     const sectionStep = Number(stack?.getAttribute("data-section-gap")?.slice(1));
@@ -287,7 +288,7 @@ describe("FormSection semantic gaps (DG-FORM-06)", () => {
     );
     const section = result.container.querySelector("[data-mpo-form-section]");
     const stack = result.container.querySelector("[data-mpo-form-section-stack]");
-    expect(section?.getAttribute("data-field-gap")).toBe("$3");
+    expect(section?.getAttribute("data-field-gap")).toBe("$4");
     expect(stack?.getAttribute("data-section-gap")).toBe("$5");
   });
 

package/src/fieldLayout.spec.tsx

@@ -266,7 +266,7 @@ describe("FieldLayout banned-error-word DEV warn", () => {
 });
 
 describe("FieldLayout design-law (MPO-60)", () => {
-  it("paints the label at weight 400 (R7 / §6.1)", () => {
+  it("paints the label role at weight 500 (LC-152)", () => {
     const { container } = renderWithProviders(
       <FieldLayout id="w" label="Name">
         <TamaguiInput id="w" />
@@ -275,7 +275,7 @@ describe("FieldLayout design-law (MPO-60)", () => {
     const label = container.querySelector("label") as HTMLElement;
     expect(label).toBeTruthy();
     const weight = label.style.fontWeight || getComputedStyle(label).fontWeight;
-    expect(["400", "normal"]).toContain(String(weight));
+    expect(String(weight)).toBe("500");
   });
 
   it("does not pass a control-height sizeToken to the label (LC-73)", () => {
@@ -323,12 +323,12 @@ describe("FieldLayout design-law (MPO-60)", () => {
   });
 });
 
-describe("label body stop and weight knob", () => {
+describe("label role stop and weight knob (LC-152)", () => {
   for (const [fontWeight, expected] of [
-    ["regular", "400"],
+    ["regular", "500"],
     ["bold", "700"],
   ] as const) {
-    it(`uses body $true and ${fontWeight} weight`, () => {
+    it(`uses the label role $2 (13px) and ${fontWeight} weight`, () => {
       const { container } = renderWithProviders(
         <TamaguiProvider config={bodyConfig} defaultTheme="light">
           <Preset overrides={{ fontWeight }}>
@@ -340,8 +340,8 @@ describe("label body stop and weight knob", () => {
         { tamagui: false },
       );
       const label = container.querySelector("label")!;
-      expect(label.className).toContain("_fos-f-size-true");
-      expect(getComputedStyle(label).fontSize).toBe("15px");
+      expect(label.className).toContain("_fos-f-size-2");
+      expect(getComputedStyle(label).fontSize).toBe("13px");
       expect(getComputedStyle(label).fontWeight).toBe(expected);
     });
   }

package/src/formSpacing.ts

@@ -1,9 +1,9 @@
 /**
- * Fallback form rhythm tokens (DG-FORM-06). Prefer `knobProps.gap` /
+ * Fallback form rhythm tokens (DG-FORM-06). Prefer `knobProps.fieldGap` /
  * `knobProps.gapLg` (the spacing roles) at the layout primitives. These are
- * the roles' `$space` keys, not a size mapping.
+ * the roles' `$space` keys, not a size mapping; the field step is LC-154's.
  */
-export const formFieldGap = "$3" as const;
+export const formFieldGap = "$4" as const;
 export const formSectionGap = "$8" as const;
 
 /** Default readable form width (DG-FORM-08 ~480–600px). */

package/types/formSpacing.d.ts

@@ -1,9 +1,9 @@
 /**
- * Fallback form rhythm tokens (DG-FORM-06). Prefer `knobProps.gap` /
+ * Fallback form rhythm tokens (DG-FORM-06). Prefer `knobProps.fieldGap` /
  * `knobProps.gapLg` (the spacing roles) at the layout primitives. These are
- * the roles' `$space` keys, not a size mapping.
+ * the roles' `$space` keys, not a size mapping; the field step is LC-154's.
  */
-export declare const formFieldGap: "$3";
+export declare const formFieldGap: "$4";
 export declare const formSectionGap: "$8";
 /** Default readable form width (DG-FORM-08 ~480–600px). */
 export declare const formReadableMaxWidth = 560;