@multiplatform.one/forms 7.54.0 → 7.55.0

package/dist/jsx/formSpacing.native.js

@@ -29,7 +29,7 @@ __export(formSpacing_exports, {
   formSectionGap: () => formSectionGap
 });
 module.exports = __toCommonJS(formSpacing_exports);
-var formFieldGap = "$3";
+var formFieldGap = "$4";
 var formSectionGap = "$8";
 var formReadableMaxWidth = 560;
 //# sourceMappingURL=formSpacing.native.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@multiplatform.one/forms",
-  "version": "7.54.0",
+  "version": "7.55.0",
   "description": "Cross-platform form components with URL state management",
   "keywords": [
     "cross-platform",
@@ -57,10 +57,10 @@
   },
   "dependencies": {
     "@floating-ui/react": "^0.27.20",
-    "@multiplatform.one/platform": "^7.54.0",
-    "@multiplatform.one/router": "^7.54.0",
-    "@multiplatform.one/table-primitives": "^7.54.0",
-    "@multiplatform.one/theme": "^7.54.0",
+    "@multiplatform.one/platform": "^7.55.0",
+    "@multiplatform.one/router": "^7.55.0",
+    "@multiplatform.one/table-primitives": "^7.55.0",
+    "@multiplatform.one/theme": "^7.55.0",
     "@phosphor-icons/react": "^2.1.10",
     "@tamagui/get-font-sized": "2.7.6",
     "@tamagui/get-token": "2.7.6",
@@ -79,9 +79,9 @@
     "tamagui": "2.7.6"
   },
   "devDependencies": {
-    "@multiplatform.one/config": "7.54.0",
-    "@multiplatform.one/storybook": "7.54.0",
-    "@multiplatform.one/test-utils": "7.54.0",
+    "@multiplatform.one/config": "7.55.0",
+    "@multiplatform.one/storybook": "7.55.0",
+    "@multiplatform.one/test-utils": "7.55.0",
     "@tamagui/build": "2.7.6",
     "@tamagui/config": "2.7.6",
     "@tamagui/vite-plugin": "2.7.6",

package/src/Button/Button.accentInk.spec.tsx

@@ -0,0 +1,135 @@
+/**
+ * @vitest-environment jsdom
+ *
+ * LC-145 (FZ-7993): a chromeless bar button with `accentInk` paints its label
+ * and its frame's `color` (currentColor glyphs) in the host's identity ink
+ * (`useIdentityInkOnSurface`), the iOS bar-button tint: the hue under a colour
+ * theme, the primary ink under the hueless house theme, never the grey accent
+ * step. Disabled leaves the tint for its own ink, and without the prop a
+ * chromeless button keeps its neutral ink.
+ *
+ * jsdom cascades no Tamagui CSS, so this reads the atomic `_col-` class and
+ * the injected rule behind it.
+ */
+
+import { cleanup, render, screen } from "@testing-library/react";
+import {
+  createDefaultThemeConfig,
+  useAccentOnSurface,
+  useIdentityInkOnSurface,
+} from "@multiplatform.one/theme";
+import type { ReactElement } from "react";
+import { TamaguiProvider, YStack } from "tamagui";
+import { afterEach, describe, expect, it } from "vitest";
+import { Button } from "./index";
+
+afterEach(cleanup);
+
+const houseConfig = createDefaultThemeConfig();
+const SCHEMES = ["light", "dark"] as const;
+
+function AccentProbe() {
+  return (
+    <span
+      data-testid="accent-probe"
+      data-ink={useIdentityInkOnSurface()}
+      data-accent={useAccentOnSurface()}
+    />
+  );
+}
+
+function houseRender(ui: ReactElement, scheme: string) {
+  return render(
+    <TamaguiProvider config={houseConfig.tamagui} defaultTheme={scheme}>
+      <YStack backgroundColor="$background">
+        <AccentProbe />
+        {ui}
+      </YStack>
+    </TamaguiProvider>,
+  );
+}
+
+function injectedRuleValue(className: string, property: string): string | null {
+  for (const sheet of Array.from(document.styleSheets)) {
+    for (const rule of Array.from(sheet.cssRules)) {
+      if (!(rule instanceof CSSStyleRule)) continue;
+      if (!rule.selectorText.endsWith(`.${className}`)) continue;
+      const value = rule.style.getPropertyValue(property);
+      if (value) return value.trim();
+    }
+  }
+  return null;
+}
+
+function paintedColor(el: Element): string | null {
+  const cls = Array.from(el.classList).find(
+    (c) => c.startsWith("_col-") && !/^_col-0(hover|active|focus|press)/.test(c),
+  );
+  return cls ? injectedRuleValue(cls, "color") : null;
+}
+
+function accentInk(): string {
+  return (screen.getByTestId("accent-probe").getAttribute("data-ink") ?? "").toLowerCase();
+}
+
+function greyAccent(): string {
+  return (screen.getByTestId("accent-probe").getAttribute("data-accent") ?? "").toLowerCase();
+}
+
+describe("Button accentInk (LC-145 bar tint)", () => {
+  for (const scheme of SCHEMES) {
+    it(`${scheme}: a chromeless accentInk button paints label and frame in the identity ink`, () => {
+      houseRender(
+        <Button chromeless accentInk>
+          Components
+        </Button>,
+        scheme,
+      );
+      const label = screen.getByText("Components");
+      const frame = label.closest("[role=button]") as Element;
+      const ink = accentInk();
+      expect(ink).toMatch(/^#|^rgb|^hsl/);
+      expect(paintedColor(label)?.toLowerCase()).toBe(ink);
+      expect(paintedColor(frame)?.toLowerCase()).toBe(ink);
+    });
+
+    it(`${scheme}: the hueless house theme tints with the primary ink, not the grey accent step`, () => {
+      houseRender(
+        <Button chromeless accentInk>
+          Components
+        </Button>,
+        scheme,
+      );
+      expect(greyAccent()).not.toBe(accentInk());
+      expect(paintedColor(screen.getByText("Components"))?.toLowerCase()).not.toBe(greyAccent());
+    });
+
+    it(`${scheme}: under a hue the tint is the hue`, () => {
+      houseRender(
+        <Button chromeless accentInk>
+          Components
+        </Button>,
+        `${scheme}_blue`,
+      );
+      expect(accentInk()).toBe(greyAccent());
+      expect(paintedColor(screen.getByText("Components"))?.toLowerCase()).toBe(accentInk());
+    });
+
+    it(`${scheme}: without accentInk a chromeless button keeps its neutral ink`, () => {
+      houseRender(<Button chromeless>Components</Button>, `${scheme}_blue`);
+      const label = screen.getByText("Components");
+      expect(paintedColor(label)?.toLowerCase()).not.toBe(accentInk());
+    });
+
+    it(`${scheme}: a disabled accentInk button leaves the tint`, () => {
+      houseRender(
+        <Button chromeless accentInk disabled disabledReason="Nothing to go back to">
+          Components
+        </Button>,
+        scheme,
+      );
+      const label = screen.getByText("Components");
+      expect(paintedColor(label)?.toLowerCase()).not.toBe(accentInk());
+    });
+  }
+});

package/src/Button/index.tsx

@@ -31,6 +31,7 @@ import {
   solidPaletteThemes,
   useAccentOnSurface,
   useBarSurface,
+  useIdentityInkOnSurface,
   useResolvedKnobs,
   useTouchSurface,
   type ControlTier,
@@ -372,6 +373,13 @@ export interface ButtonProps extends Omit<
    * that paints a frame: the frame is what aligns there.
    */
   edge?: "start" | "end";
+  /**
+   * LC-145: a chromeless bar button's label and glyphs take the host's
+   * identity ink (`useIdentityInkOnSurface`), the iOS bar-button tint: the
+   * theme's hue, or the primary ink when the theme has none. No effect on a
+   * button that paints a frame, while selected, or disabled.
+   */
+  accentInk?: boolean;
 }
 
 export function Button({
@@ -397,6 +405,7 @@ export function Button({
   circular,
   chromeless,
   edge,
+  accentInk,
   verb,
   noun,
   actionRole,
@@ -473,6 +482,7 @@ export function Button({
   const parentScopeTheme = useTheme();
   const pageOutlineColor = parentScopeTheme.outlineColor?.val as string | undefined;
   const hostAccentInk = useAccentOnSurface();
+  const hostIdentityInk = useIdentityInkOnSurface();
   const grouped = useControlGrouped();
   // LC-153 CONTROL-TIERS: a bar paints its neutral buttons plain; content
   // paints them tinted. The scheme picks the wash step.
@@ -646,6 +656,7 @@ export function Button({
   const isSelected =
     selected ?? (ariaPressedProp === true || ariaPressedProp === "true" ? true : undefined);
   const selectedFill = Boolean(isSelected) && !unavailable;
+  const barInk = accentInk && chromeless && !selectedFill && !unavailable ? hostIdentityInk : null;
   const iconSize = nested
     ? Math.min(recipe.iconSize, Math.max(12, Math.round(knobProps.nestedControl.px * 0.45)))
     : recipe.iconSize;
@@ -683,6 +694,7 @@ export function Button({
         : outlinedInk
           ? { color: outlinedInk }
           : undefined)}
+      {...(barInk ? { color: barInk } : undefined)}
       // LC-40: on the washed disabled chrome the label leaves the on-fill
       // foreground for the wash's AA ink (keepLabel keeps >=4.5:1).
       {...(unavailable ? disabledText : undefined)}
@@ -711,6 +723,7 @@ export function Button({
   const nativeIconColor =
     props.color ??
     (unavailable ? disabledText.color : undefined) ??
+    barInk ??
     (textColor
       ? outlinedOnHost
         ? hostScoped({ color: textColor }).color
@@ -868,6 +881,7 @@ export function Button({
       // (LC-05); outlined frames sit on the page, so re-anchor inherited
       // text/icon color (currentColor) to the hue's readable text tier.
       {...(outlinedInk ? { color: outlinedInk } : undefined)}
+      {...(barInk ? { color: barInk } : undefined)}
       // LC-40 DISABLED-VISIBLE: keepLabel washes the chrome (muted fill/
       // border) while label/glyphs re-anchor to the lowest AA text tier
       // (`color` inherits into currentColor icons); dimWhole dims the

package/src/FieldGroup.spec.tsx

@@ -36,7 +36,7 @@ describe("FieldGroup design-law (MPO-60)", () => {
     expect(["400", "normal"]).toContain(String(weight));
   });
 
-  it("field gap is the within-group role at any size token, never sizeToken", () => {
+  it("field gap is the field rhythm role (fieldGap $4, LC-154) at any size token, never sizeToken", () => {
     const result = renderWithProviders(
       <Surface size="$5">
         <FieldGroup legend="Billing">
@@ -45,11 +45,11 @@ describe("FieldGroup design-law (MPO-60)", () => {
       </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");
   });
 
-  it("has no compact switch: a smaller Surface changes the token, not the gap", () => {
+  it("has no compact switch: a smaller Surface changes the token, not the gap (LC-154)", () => {
     const result = renderWithProviders(
       <Surface size="$3">
         <FieldGroup legend="Small">
@@ -59,7 +59,7 @@ describe("FieldGroup design-law (MPO-60)", () => {
     );
     const group = result.container.querySelector("[data-mpo-field-group]");
     expect(group?.getAttribute("data-size-token")).toBe("$3");
-    expect(group?.getAttribute("data-field-gap")).toBe("$3");
+    expect(group?.getAttribute("data-field-gap")).toBe("$4");
     expect(group?.hasAttribute("data-density")).toBe(false);
   });
 });

package/src/Form/form.spec.tsx

@@ -374,7 +374,7 @@ describe("Form", () => {
   });
 
   describe("layout recipes (DG-FORM-01/06, LC-73)", () => {
-    it("owns vertical rhythm from the within-group role, not sizeToken", () => {
+    it("owns vertical rhythm from the field rhythm role (fieldGap $4, LC-154), not sizeToken", () => {
       const result = renderWithProviders(
         <Surface size="$5">
           <Form onSubmit={vi.fn()} aria-label="Layout Form">
@@ -383,12 +383,12 @@ describe("Form", () => {
         </Surface>,
       );
       const layout = result.container.querySelector("[data-mpo-form-layout]");
-      expect(layout?.getAttribute("data-gap")).toBe("$3");
+      expect(layout?.getAttribute("data-gap")).toBe("$4");
       expect(layout?.getAttribute("data-size-token")).toBe("$5");
       expect(layout?.hasAttribute("data-density")).toBe(false);
     });
 
-    it("size forwards a token to every field and keeps the rhythm on the role", () => {
+    it("size forwards a token to every field and keeps the rhythm on the fieldGap role (LC-154)", () => {
       const result = renderWithProviders(
         <Form size="$3" onSubmit={vi.fn()}>
           <Button action="submit" size="$5">
@@ -398,7 +398,7 @@ describe("Form", () => {
       );
       const layout = result.container.querySelector("[data-mpo-form-layout]");
       expect(layout?.getAttribute("data-size-token")).toBe("$3");
-      expect(layout?.getAttribute("data-gap")).toBe("$3");
+      expect(layout?.getAttribute("data-gap")).toBe("$4");
       expect(result.getByRole("button").getAttribute("data-size-token")).toBe("$3");
     });
 

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/fields/Progress/Progress.spec.tsx

@@ -320,6 +320,27 @@ describe("Progress", () => {
       expect(radiusAtoms).not.toContain("_btlr-100000px");
     });
 
+    it("rounds the fill's leading end at large and full, where the rail is already a capsule (LC-132)", () => {
+      const fillRadiusAtoms = (borderRadius: "medium" | "large" | "full") => {
+        const { container, unmount } = renderWithProviders(
+          <Preset overrides={{ borderRadius }}>
+            <Progress label="Fill end" value={50} />
+          </Preset>,
+        );
+        const atoms = String(getIndicator(container)?.className || "")
+          .split(" ")
+          .filter((c) => c.startsWith("_bbrr-"));
+        unmount();
+        return atoms;
+      };
+      const medium = fillRadiusAtoms("medium");
+      const large = fillRadiusAtoms("large");
+      const full = fillRadiusAtoms("full");
+      expect(medium).toContain("_bbrr-t-radius-0");
+      expect(large).toContain("_bbrr-t-radius-2");
+      expect(full).toContain("_bbrr-t-radius-12");
+    });
+
     it("skeleton track height matches the live 0.25× size formula, not a 6px leftover", () => {
       const live = renderWithProviders(<Progress label="Upload" value={50} />);
       const bar = live.container.querySelector("[role='progressbar']") as HTMLElement;

package/src/fields/Progress/index.tsx

@@ -1,7 +1,13 @@
 import { transitionOrInstant } from "../../shared/instantMotion";
 import type { ReactNode } from "react";
 import type { AnyFormApi } from "../../types";
-import { Intent, transitionProps, type MotionRole } from "@multiplatform.one/theme";
+import {
+  Intent,
+  radiusStopFromToken,
+  railFillRadius,
+  transitionProps,
+  type MotionRole,
+} from "@multiplatform.one/theme";
 import type { KnobProps } from "@multiplatform.one/theme";
 import { getSize } from "@tamagui/get-token";
 import type { LabelProps, SizeTokens } from "tamagui";
@@ -86,11 +92,18 @@ function indicatorMotion(role: MotionRole) {
  * `ProgressIndicator` component sub-theme. Capturing here keeps the hue
  * scope explicit. useTheme() subscribes, so scheme changes stay live.
  */
-function HueFillIndicator({ motion }: { motion: MotionRole }) {
+function HueFillIndicator({
+  motion,
+  radius,
+}: {
+  motion: MotionRole;
+  radius: ReturnType<typeof railFillRadius>;
+}) {
   const theme = useTheme();
   const fill = theme.color9?.val;
   return (
     <ProgressIndicator
+      borderRadius={radius}
       {...(fill ? { backgroundColor: fill as any } : undefined)}
       {...indicatorMotion(motion)}
     />
@@ -176,6 +189,7 @@ function ProgressTrack({
   const trackSize = size ?? sizeToken;
   const percent = Math.round((progressValue / max) * 100);
   const motion = indicatorMotion(knobProps.motion.slide);
+  const fillRadius = railFillRadius(radiusStopFromToken(knobProps.borderRadius.borderRadius));
   const name = typeof label === "string" && label ? label : t("Progress");
 
   const progressElement = (
@@ -203,12 +217,13 @@ function ProgressTrack({
     >
       {intent && intent !== "accent" ? (
         <Intent name={intent}>
-          <HueFillIndicator motion={knobProps.motion.slide} />
+          <HueFillIndicator motion={knobProps.motion.slide} radius={fillRadius} />
         </Intent>
       ) : (
         // Accent fills use the mark channel without a solid sub-theme scope.
         // The default fill must hold 3:1 against both the track and page (DF-06).
         <ProgressIndicator
+          borderRadius={fillRadius}
           backgroundColor={
             intent === "accent" ? formSelectedColors.mark : formControlColors.boundary
           }

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/Button/index.d.ts

@@ -128,8 +128,15 @@ export interface ButtonProps extends Omit<TamaguiButtonProps, "form" | "icon" |
      * that paints a frame: the frame is what aligns there.
      */
     edge?: "start" | "end";
+    /**
+     * LC-145: a chromeless bar button's label and glyphs take the host's
+     * identity ink (`useIdentityInkOnSurface`), the iOS bar-button tint: the
+     * theme's hue, or the primary ink when the theme has none. No effect on a
+     * button that paints a frame, while selected, or disabled.
+     */
+    accentInk?: boolean;
 }
-export declare function Button({ children, action, form: formProp, loading, accent, error, warning, success, skeleton, outlined, disabled, theme, onPress, onKeyDown, tabIndex, icon, iconAfter, selected, nested, circular, chromeless, edge, verb, noun, actionRole, disabledReason, disabledReasonPlacement, sizeRecipeEscape, recipeFamily, height: heightProp, paddingHorizontal: paddingHorizontalProp, ...props }: ButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare function Button({ children, action, form: formProp, loading, accent, error, warning, success, skeleton, outlined, disabled, theme, onPress, onKeyDown, tabIndex, icon, iconAfter, selected, nested, circular, chromeless, edge, accentInk, verb, noun, actionRole, disabledReason, disabledReasonPlacement, sizeRecipeEscape, recipeFamily, height: heightProp, paddingHorizontal: paddingHorizontalProp, ...props }: ButtonProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace Button {
     var Icon: (props: {
         children: React.ReactNode;

package/types/Button/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Button/index.tsx"],"names":[],"mappings":"AAGA,OAAO,EAQL,KAAK,aAAa,EAClB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,EAsBL,KAAK,gBAAgB,EACrB,KAAK,UAAU,EAEhB,MAAM,0BAA0B,CAAC;AAIlC,OAAO,EAEL,KAAK,WAAW,IAAI,kBAAkB,EAavC,MAAM,SAAS,CAAC;AAKjB,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAG3C,OAAO,KAAK,EAAE,UAAU,EAAuB,MAAM,cAAc,CAAC;AAMpE;;;;;;;;;;;GAWG;AACH,MAAM,MAAM,gBAAgB,GAAG,UAAU,CAAC;AAE1C,eAAO,MAAM,iBAAiB,EAAE,MAAM,CAAC,MAAM,EAAE,gBAAgB,CAAkC,CAAC;AAElG,wBAAgB,uBAAuB,CACrC,IAAI,EAAE,UAAU,GAAG,MAAM,GAAG,SAAS,EACrC,MAAM,GAAE,gBAA4B,EACpC,KAAK,UAAQ,GACZ,gBAAgB,CAOlB;AAED;;;GAGG;AACH,wBAAgB,WAAW,CAAC,UAAU,EAAE,OAAO,GAAG,MAAM,GAAG,SAAS,CAQnE;AAaD,0DAA0D;AAC1D,MAAM,MAAM,gBAAgB,GAAG,SAAS,GAAG,WAAW,GAAG,QAAQ,CAAC;AAElE,KAAK,QAAQ,GAAG,SAAS,GAAG,aAAa,CAAC;IAAE,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC,CAAC;AA2F7E,eAAO,MAAM,WAAW;;;;;;;;6CA2DtB,CAAC;AAEH;;;;;;;;;;;;;;;;;;GAkBG;AACH,MAAM,WAAW,WAAY,SAAQ,IAAI,CACvC,kBAAkB,EAClB,MAAM,GAAG,MAAM,GAAG,WAAW,GAAG,SAAS,CAC1C;IACC,MAAM,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAC5B,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,SAAS,CAAC,EAAE,QAAQ,CAAC;IACrB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,UAAU,CAAC,EAAE,gBAAgB,CAAC;IAC9B;;;;;;;OAOG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;;;;;OAMG;IACH,uBAAuB,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IAC7C;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;;;OAIG;IACH,YAAY,CAAC,EAAE,gBAAgB,CAAC;IAChC;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;CACxB;AAED,wBAAgB,MAAM,CAAC,EACrB,QAAQ,EACR,MAAM,EACN,IAAI,EAAE,QAAQ,EACd,OAAO,EACP,MAAM,EACN,KAAK,EACL,OAAO,EACP,OAAO,EACP,QAAgB,EAChB,QAAQ,EACR,QAAQ,EACR,KAAK,EACL,OAAO,EACP,SAAS,EACT,QAAQ,EACR,IAAI,EACJ,SAAS,EACT,QAAQ,EACR,MAAc,EACd,QAAQ,EACR,UAAU,EACV,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,UAAU,EACV,cAAc,EACd,uBAAiC,EACjC,gBAAgB,EAChB,YAAwB,EACxB,MAAM,EAAE,UAAU,EAClB,iBAAiB,EAAE,qBAAqB,EACxC,GAAG,KAAK,EACT,EAAE,WAAW,2CAqnBb;yBAtpBe,MAAM;;;iBAzFQ,CAAC;YAAuB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Button/index.tsx"],"names":[],"mappings":"AAGA,OAAO,EAQL,KAAK,aAAa,EAClB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,EAuBL,KAAK,gBAAgB,EACrB,KAAK,UAAU,EAEhB,MAAM,0BAA0B,CAAC;AAIlC,OAAO,EAEL,KAAK,WAAW,IAAI,kBAAkB,EAavC,MAAM,SAAS,CAAC;AAKjB,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAG3C,OAAO,KAAK,EAAE,UAAU,EAAuB,MAAM,cAAc,CAAC;AAMpE;;;;;;;;;;;GAWG;AACH,MAAM,MAAM,gBAAgB,GAAG,UAAU,CAAC;AAE1C,eAAO,MAAM,iBAAiB,EAAE,MAAM,CAAC,MAAM,EAAE,gBAAgB,CAAkC,CAAC;AAElG,wBAAgB,uBAAuB,CACrC,IAAI,EAAE,UAAU,GAAG,MAAM,GAAG,SAAS,EACrC,MAAM,GAAE,gBAA4B,EACpC,KAAK,UAAQ,GACZ,gBAAgB,CAOlB;AAED;;;GAGG;AACH,wBAAgB,WAAW,CAAC,UAAU,EAAE,OAAO,GAAG,MAAM,GAAG,SAAS,CAQnE;AAaD,0DAA0D;AAC1D,MAAM,MAAM,gBAAgB,GAAG,SAAS,GAAG,WAAW,GAAG,QAAQ,CAAC;AAElE,KAAK,QAAQ,GAAG,SAAS,GAAG,aAAa,CAAC;IAAE,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC,CAAC;AA2F7E,eAAO,MAAM,WAAW;;;;;;;;6CA2DtB,CAAC;AAEH;;;;;;;;;;;;;;;;;;GAkBG;AACH,MAAM,WAAW,WAAY,SAAQ,IAAI,CACvC,kBAAkB,EAClB,MAAM,GAAG,MAAM,GAAG,WAAW,GAAG,SAAS,CAC1C;IACC,MAAM,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAC5B,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,SAAS,CAAC,EAAE,QAAQ,CAAC;IACrB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,UAAU,CAAC,EAAE,gBAAgB,CAAC;IAC9B;;;;;;;OAOG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;;;;;OAMG;IACH,uBAAuB,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IAC7C;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;;;OAIG;IACH,YAAY,CAAC,EAAE,gBAAgB,CAAC;IAChC;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;IACvB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,wBAAgB,MAAM,CAAC,EACrB,QAAQ,EACR,MAAM,EACN,IAAI,EAAE,QAAQ,EACd,OAAO,EACP,MAAM,EACN,KAAK,EACL,OAAO,EACP,OAAO,EACP,QAAgB,EAChB,QAAQ,EACR,QAAQ,EACR,KAAK,EACL,OAAO,EACP,SAAS,EACT,QAAQ,EACR,IAAI,EACJ,SAAS,EACT,QAAQ,EACR,MAAc,EACd,QAAQ,EACR,UAAU,EACV,IAAI,EACJ,SAAS,EACT,IAAI,EACJ,IAAI,EACJ,UAAU,EACV,cAAc,EACd,uBAAiC,EACjC,gBAAgB,EAChB,YAAwB,EACxB,MAAM,EAAE,UAAU,EAClB,iBAAiB,EAAE,qBAAqB,EACxC,GAAG,KAAK,EACT,EAAE,WAAW,2CA0nBb;yBA5pBe,MAAM;;;iBAhGnB,CAAC;YAAsB,CAAC"}

package/types/fields/Progress/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/fields/Progress/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAI9C,OAAO,KAAK,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AACtD,OAAO,EAEL,KAAK,aAAa,IAAI,oBAAoB,EAQ3C,MAAM,SAAS,CAAC;AA8BjB,oEAAoE;AACpE,MAAM,MAAM,cAAc,GAAG,QAAQ,GAAG,OAAO,GAAG,SAAS,GAAG,SAAS,CAAC;AAmDxE,MAAM,WAAW,aAAa;IAC5B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACrC,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,UAAU,CAAC,EAAE,IAAI,CAAC,UAAU,EAAE,SAAS,GAAG,KAAK,CAAC,CAAC;IACjD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;;OAIG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,MAAM,CAAC,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,IAAI,CAAC;IAClC,aAAa,CAAC,EAAE,IAAI,CAAC,oBAAoB,EAAE,OAAO,GAAG,KAAK,GAAG,IAAI,GAAG,UAAU,CAAC,CAAC;IAChF;;;;;OAKG;IACH,MAAM,CAAC,EAAE,cAAc,CAAC;IACxB,4EAA4E;IAC5E,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAwHD,wBAAgB,QAAQ,CAAC,EACvB,IAAI,EACJ,IAAI,EAAE,QAAQ,EACd,UAAU,EACV,KAAK,EACL,UAAU,EACV,UAAU,EACV,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,IAAI,EACJ,EAAE,EAAE,MAAM,EACV,KAAK,EACL,YAAY,EACZ,GAAG,EACH,QAAQ,EAAE,SAAS,EACnB,MAAM,EACN,aAAa,EACb,MAAM,EACN,QAAQ,EACR,SAAS,EAAE,aAAa,GACzB,EAAE,aAAa,2CAuGf"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/fields/Progress/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAU9C,OAAO,KAAK,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AACtD,OAAO,EAEL,KAAK,aAAa,IAAI,oBAAoB,EAQ3C,MAAM,SAAS,CAAC;AA8BjB,oEAAoE;AACpE,MAAM,MAAM,cAAc,GAAG,QAAQ,GAAG,OAAO,GAAG,SAAS,GAAG,SAAS,CAAC;AA0DxE,MAAM,WAAW,aAAa;IAC5B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACrC,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,UAAU,CAAC,EAAE,IAAI,CAAC,UAAU,EAAE,SAAS,GAAG,KAAK,CAAC,CAAC;IACjD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;;OAIG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,MAAM,CAAC,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,IAAI,CAAC;IAClC,aAAa,CAAC,EAAE,IAAI,CAAC,oBAAoB,EAAE,OAAO,GAAG,KAAK,GAAG,IAAI,GAAG,UAAU,CAAC,CAAC;IAChF;;;;;OAKG;IACH,MAAM,CAAC,EAAE,cAAc,CAAC;IACxB,4EAA4E;IAC5E,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AA0HD,wBAAgB,QAAQ,CAAC,EACvB,IAAI,EACJ,IAAI,EAAE,QAAQ,EACd,UAAU,EACV,KAAK,EACL,UAAU,EACV,UAAU,EACV,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,IAAI,EACJ,EAAE,EAAE,MAAM,EACV,KAAK,EACL,YAAY,EACZ,GAAG,EACH,QAAQ,EAAE,SAAS,EACnB,MAAM,EACN,aAAa,EACb,MAAM,EACN,QAAQ,EACR,SAAS,EAAE,aAAa,GACzB,EAAE,aAAa,2CAuGf"}

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;