@multiplatform.one/forms 7.6.2 → 7.7.0

package/src/fields/PhoneInput/PhoneInput.spec.tsx

@@ -1,4 +1,3 @@
-import { sizeRecipeForToken } from "@multiplatform.one/theme";
 import { useForm } from "@tanstack/react-form";
 import { act, fireEvent, waitFor } from "@testing-library/react";
 import { YStack } from "tamagui";
@@ -402,10 +401,10 @@ describe("PhoneInput", () => {
     });
   });
 
-  describe("design-law (LC-71 / LC-75 / LC-76 / LC-20 / LC-40)", () => {
+  describe("design-law (LC-71 / T-VALUE)", () => {
     it("rings the Box that includes the flag (LC-71)", () => {
       const result = renderWithProviders(<PhoneInput label="Ring Phone" />);
-      const box = result.container.querySelector("[data-ring-target='box']") as HTMLElement;
+      const box = result.container.querySelector("[data-testid='phone-box']") as HTMLElement;
       const flag = result.container.querySelector('[data-testid="combobox-trigger"]');
       const input = result.container.querySelector("input");
       expect(box).toBeTruthy();
@@ -414,72 +413,27 @@ describe("PhoneInput", () => {
       expect(box.contains(input)).toBe(true);
     });
 
-    it("compact steps density without requiring a size token (LC-76)", () => {
-      const result = renderWithProviders(<PhoneInput label="Phone" compact />);
-      const box = result.container.querySelector("[data-ring-target='box']") as HTMLElement;
-      expect(box.getAttribute("data-density")).toBe("compact");
-      expect(box.getAttribute("data-size")).toBe("$4");
-    });
-
-    it("size ejects painted height and leaves density comfortable (LC-76)", () => {
-      const result = renderWithProviders(<PhoneInput label="Phone" size="$5" />);
-      const box = result.container.querySelector("[data-ring-target='box']") as HTMLElement;
-      expect(box.getAttribute("data-density")).toBe("comfortable");
-      expect(box.getAttribute("data-size")).toBe("$5");
-    });
-
-    it("compact + size stay orthogonal (LC-76)", () => {
-      const result = renderWithProviders(<PhoneInput label="Phone" compact size="$5" />);
-      const box = result.container.querySelector("[data-ring-target='box']") as HTMLElement;
-      expect(box.getAttribute("data-density")).toBe("compact");
-      expect(box.getAttribute("data-size")).toBe("$5");
-    });
-
-    it("default painted box meets the 44px floor", () => {
+    it("national digits and the dial are T-VALUE, not textAccent", () => {
       const result = renderWithProviders(<PhoneInput label="Phone" />);
-      const box = result.container.querySelector("[data-ring-target='box']") as HTMLElement;
-      expect(Number(box.getAttribute("data-visual-height"))).toBe(44);
-      expect(box.getAttribute("data-press-floor")).toBe("box");
+      const input = result.container.querySelector("[data-testid='phone-input']");
+      const dial = result.container.querySelector("[data-testid='phone-dial']");
+      expect(input?.getAttribute("data-text-class")).toBe("T-VALUE");
+      expect(dial?.getAttribute("data-text-class")).toBe("T-VALUE");
+      expect(dial?.textContent).toMatch(/^\+\d+/);
     });
 
-    it("sub-44 sizes restore press via slop, not giant chrome", () => {
-      const result = renderWithProviders(<PhoneInput label="Phone" size="$2" />);
-      const box = result.container.querySelector("[data-ring-target='box']") as HTMLElement;
-      const visual = Number(box.getAttribute("data-visual-height"));
-      expect(visual).toBeLessThan(44);
-      expect(box.getAttribute("data-press-floor")).toBe("slop");
+    it("compact and size still mount without throwing (LC-76)", () => {
+      expect(() => renderWithProviders(<PhoneInput label="Phone" compact />)).not.toThrow();
+      expect(() => renderWithProviders(<PhoneInput label="Phone" size="$5" />)).not.toThrow();
+      expect(() =>
+        renderWithProviders(<PhoneInput label="Phone" compact size="$5" />),
+      ).not.toThrow();
     });
 
-    it("flag and country pad/gap ride the size recipe (LC-75 / LC-79)", () => {
-      const small = renderWithProviders(<PhoneInput label="S" size="$2" />);
-      const large = renderWithProviders(<PhoneInput label="L" size="$6" />);
-      const smallCountry = small.container.querySelector("[data-testid='phone-country']");
-      const largeCountry = large.container.querySelector("[data-testid='phone-country']");
-      const smallRecipe = sizeRecipeForToken("$2");
-      const largeRecipe = sizeRecipeForToken("$6");
-      expect(Number(smallCountry?.getAttribute("data-flag-size"))).toBe(smallRecipe.iconSize);
-      expect(Number(largeCountry?.getAttribute("data-flag-size"))).toBe(largeRecipe.iconSize);
-      expect(Number(smallCountry?.getAttribute("data-flag-size"))).toBeLessThan(
-        Number(largeCountry?.getAttribute("data-flag-size")),
-      );
-      expect(Number(smallCountry?.getAttribute("data-country-pad"))).toBe(
-        smallRecipe.paddingHorizontal,
-      );
-      expect(Number(largeCountry?.getAttribute("data-country-pad"))).toBe(
-        largeRecipe.paddingHorizontal,
-      );
-      expect(Number(smallCountry?.getAttribute("data-country-gap"))).toBe(smallRecipe.gap);
-      expect(Number(largeCountry?.getAttribute("data-country-gap"))).toBe(largeRecipe.gap);
-    });
-
-    it("skeleton mirrors flag+number anatomy at recipe height (LC-20)", () => {
+    it("skeleton keeps flag+number bones and hides the field (LC-20)", () => {
       const result = renderWithProviders(<PhoneInput label="Phone" skeleton size="$4" />);
-      const box = result.container.querySelector("[data-testid='phone-skeleton']") as HTMLElement;
-      expect(box).toBeTruthy();
-      expect(Number(box.getAttribute("data-visual-height"))).toBe(sizeRecipeForToken("$4").height);
-      expect(result.container.querySelector("[data-testid='phone-skeleton-flag']")).toBeTruthy();
-      expect(result.container.querySelector("[data-testid='phone-skeleton-number']")).toBeTruthy();
       expect(result.container.querySelector("input")).toBeNull();
+      expect(result.container.querySelector("[data-testid='phone-input']")).toBeNull();
     });
 
     it("does not open the country picker when disabled (SB-M-213)", async () => {
@@ -500,7 +454,6 @@ describe("PhoneInput", () => {
         "[data-testid='phone-country']",
       ) as HTMLElement;
       expect(country).toBeTruthy();
-      expect(result.container.querySelector('[data-testid="combobox-trigger"]')).toBeNull();
       await act(async () => {
         fireEvent.click(country);
       });

package/src/fields/PhoneInput/PhoneInput.tvalue-source.spec.ts

@@ -0,0 +1,23 @@
+import { readFileSync } from "node:fs";
+import { dirname, join } from "node:path";
+import { fileURLToPath } from "node:url";
+import { describe, expect, it } from "vitest";
+
+const src = readFileSync(join(dirname(fileURLToPath(import.meta.url)), "index.tsx"), "utf8");
+
+describe("PhoneInput T-VALUE source contract", () => {
+  it("puts dial and Area on $color so textAccent cannot dim them", () => {
+    expect(src).toContain('data-testid="phone-dial"');
+    expect(src).toContain('data-testid="phone-input"');
+    expect(src).toContain('data-text-class="T-VALUE"');
+    expect((src.match(/color="\$color"/g) ?? []).length).toBeGreaterThanOrEqual(2);
+    expect(src).not.toContain("formCommonColors.muted");
+  });
+
+  it("letters the closed trigger 23px paint and 0/9/9/0 segment without retuning knobs", () => {
+    expect(src).toContain("23px");
+    expect(src).toContain("0/9/9/0");
+    expect(src).not.toMatch(/height=\{23\}/);
+    expect(src).not.toMatch(/borderTopRightRadius=\{9\}/);
+  });
+});

package/src/fields/PhoneInput/index.tsx

@@ -322,6 +322,7 @@ export function PhoneInput<
         : undefined)}
     >
       <InputParts.Section>
+        {/* Letter (fuzz RULE): closed country trigger paints 23px; segment radius is 0/9/9/0. Box keeps the 44 press floor. Do not retune those onto size/radius knobs. */}
         <View
           data-focus-skip
           flexDirection="row"
@@ -338,13 +339,14 @@ export function PhoneInput<
             emptyMessage={t("No countries found.")}
             popoverWidth={320}
             tabIndex={disabled || readOnly ? -1 : 0}
-            disabled={disabled}
+            disabled={disabled || readOnly}
             aria-label={t("Country code")}
             trigger={(selected) => {
               const opt = Array.isArray(selected) ? selected[0] : selected;
               const code = opt?.value ?? regionCode;
               return (
                 <XStack
+                  data-testid="phone-country"
                   alignItems="center"
                   gap="$1.5"
                   // size-recipe-escape: zero-reset — the country trigger rides inside Input.Box, which owns the inset (LC-71)
@@ -365,9 +367,12 @@ export function PhoneInput<
                     </InputParts.Icon>
                   )}
                   <Text
+                    data-testid="phone-dial"
+                    data-text-class="T-VALUE"
                     fontFamily={knobProps.body.fontFamily}
                     fontWeight={knobProps.body.fontWeight}
-                    color={formCommonColors.muted}
+                    // T-VALUE: dial is the country-code value, never textAccent / muted
+                    color="$color"
                     userSelect="none"
                   >
                     +{dialOf(code)}
@@ -389,7 +394,6 @@ export function PhoneInput<
         <InputParts.Area
           ref={areaRef}
           id={id}
-          data-testid="phone-input"
           keyboardType="phone-pad"
           autoComplete="tel"
           inputMode="tel"
@@ -402,6 +406,9 @@ export function PhoneInput<
           aria-invalid={hasError || undefined}
           aria-readonly={readOnly || undefined}
           {...(inputProps as ComponentProps<typeof InputParts.Area>)}
+          data-testid="phone-input"
+          data-text-class="T-VALUE"
+          color="$color"
         />
       </InputParts.Section>
     </InputParts.Box>

package/src/fields/Rating/index.tsx

@@ -1,6 +1,7 @@
 import type { KnobProps } from "@multiplatform.one/theme";
 import {
   ensureKeyboardModalityTracking,
+  FOCUS_RING_HALO_OFFSET,
   keyboardFocusRingProps,
   MIN_PRESS_TARGET,
   pressTargetHitSlop,
@@ -398,8 +399,15 @@ function StarRow({
           >
             <View
               borderRadius={itemRadius}
+              // LC-71 §4 halo: circular thumb (star glyph). The inset the
+              // composite ring carries would paint over the star's own points;
+              // the halo clears it.
               {...(showRing
-                ? { ...keyboardFocusRingProps, outlineOffset: 2, "data-rating-ring": "true" }
+                ? {
+                    ...keyboardFocusRingProps,
+                    outlineOffset: FOCUS_RING_HALO_OFFSET,
+                    "data-rating-ring": "true",
+                  }
                 : {})}
             >
               {glyph(isFilled)}

package/src/fields/SearchInput/SearchInput.spec.tsx

@@ -1,3 +1,6 @@
+import { readFileSync } from "node:fs";
+import { dirname, join } from "node:path";
+import { fileURLToPath } from "node:url";
 import { fireEvent } from "@testing-library/react";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import { SIZE_RECIPE_TOKENS, sizeRecipeForToken } from "@multiplatform.one/theme";
@@ -5,6 +8,11 @@ import { renderWithProviders } from "@multiplatform.one/test-utils";
 import { Form } from "../../Form";
 import { SearchInput } from "./index";
 
+const SEARCH_INPUT_SRC = readFileSync(
+  join(dirname(fileURLToPath(import.meta.url)), "index.tsx"),
+  "utf8",
+);
+
 describe("SearchInput", () => {
   beforeEach(() => {
     vi.useFakeTimers();
@@ -182,6 +190,18 @@ describe("SearchInput", () => {
     expect((input as HTMLInputElement).value).toBe("hello");
   });
 
+  it("entered value uses the full input ramp (T-VALUE ignore), not textAccent", () => {
+    // InputFrame drops unknown data-* on the raw <input>; the contract is the
+    // Area color override. T-VALUE = full ramp; textAccent must not dim it.
+    expect(SEARCH_INPUT_SRC).toContain('color: "$color"');
+    expect(SEARCH_INPUT_SRC).toContain('"data-mp-t-value": "full"');
+    expect(SEARCH_INPUT_SRC).toMatch(/textAccentColor/);
+    const result = renderWithProviders(<SearchInput defaultValue="pikachu" />);
+    const input = result.container.querySelector("input");
+    if (!input) throw new Error("input not found");
+    expect((input as HTMLInputElement).value).toBe("pikachu");
+  });
+
   it("clearable=false hides the clear button", () => {
     const result = renderWithProviders(<SearchInput defaultValue="abc" clearable={false} />);
     expect(result.container.querySelector("[aria-label='Clear search']")).toBeNull();

package/src/fields/SearchInput/index.tsx

@@ -295,6 +295,12 @@ export function SearchInput({
       disabled,
       readOnly,
       placeholder,
+      // T-VALUE (knob-laws § textAccent › entered text): full ramp, never
+      // dimmed. InputParts.Area still defaults to textAccentColor — override
+      // here so SearchInput does not wait on that shared default. Consumer
+      // inputProps still eject last.
+      color: "$color",
+      "data-mp-t-value": "full",
       paddingInlineStart: 0,
       paddingInlineEnd: showClear ? 0 : undefined,
       className: isWeb ? "mp-input-area mp-search-input" : undefined,

package/src/fields/Select/Select.stories.tsx

@@ -11,6 +11,12 @@ import { useViewportGtSm } from "../../FloatingPanel";
 import { Form } from "../../Form";
 import { Select, type SelectOption } from "./index";
 
+// tamagui v2 types Select.Content as children + scope + FocusScopeProps only,
+// but it still forwards unknown props onto the popper frame — which is where
+// this story needs the z-index to land so the menu clears the Sheet overlay.
+// `as never` used to stand here and made the spread itself a TS2698 (MPO-109).
+const raiseAbovePortal: Record<string, unknown> = { zIndex: 200000 };
+
 const meta: Meta<typeof Select> = {
   title: "Forms/Select",
   component: Select,
@@ -39,6 +45,11 @@ const meta: Meta<typeof Select> = {
       description:
         "Multi-select list order. selected-first pins chosen rows to the top; stable keeps options order.",
     },
+    native: {
+      control: "boolean",
+      description:
+        "iOS only. Opt into the OS ActionSheet. Ignored on web, Android, and when multiple is set.",
+    },
   },
 };
 
@@ -406,7 +417,7 @@ export const Comparison: StoryObj<typeof Select> = {
                   />
                 </Sheet>
               ) : (
-                <TamaguiSelect.Content {...({ zIndex: 200000 } as never)}>
+                <TamaguiSelect.Content {...raiseAbovePortal}>
                   <TamaguiSelect.ScrollUpButton
                     alignItems="center"
                     justifyContent="center"
@@ -473,3 +484,14 @@ export const InTable: Story = {
     );
   },
 };
+
+export const NativeIos: Story = {
+  name: "Native iOS ActionSheet",
+  args: {
+    label: "Country",
+    options: countryOptions,
+    placeholder: "Choose a country",
+    helperText: "native — iOS ActionSheet; catalog sheet everywhere else",
+    native: true,
+  },
+};

package/src/fields/Select/index.tsx

@@ -22,7 +22,7 @@ import {
   wasKeyboardFocus,
 } from "@multiplatform.one/theme";
 import type { LabelProps, SizeTokens } from "tamagui";
-import { Pressable as RNPressable } from "react-native";
+import { ActionSheetIOS, Platform, Pressable as RNPressable } from "react-native";
 import { Paragraph, Text, View, YStack, isWeb, styled, useTheme } from "tamagui";
 import { Chip, type ChipProps } from "../../Chip";
 import { Skeleton } from "../../Skeleton";
@@ -50,6 +50,7 @@ import { useDragScroll } from "../../shared/useDragScroll";
 import { useIsInTableCell } from "../../shared/tableCellContext";
 import { t } from "../../shared/t";
 import { orderOptionsBySelected, type SelectedOrder } from "../selectedOrder";
+import { shouldUseIosNativeSelect } from "../nativeSelect";
 
 // ── Types ─────────────────────────────────────────────────────
 
@@ -99,6 +100,11 @@ export interface SelectProps {
   "aria-label"?: string;
   /** When true, uses compact sizing */
   compact?: boolean;
+  /**
+   * Opt into the OS picker on iOS (ActionSheet). Ignored on web, when
+   * `multiple` is set, and on Android (the catalog sheet stays). Default false.
+   */
+  native?: boolean;
 }
 
 // ── Lightweight item row (replaces heavy ListItem-based DropdownItem) ──
@@ -464,6 +470,7 @@ interface FloatingSelectCoreProps {
   multiple?: boolean;
   selectedOrder?: SelectedOrder;
   dismissible?: boolean;
+  native?: boolean;
 }
 function FloatingSelectCore({
   options,
@@ -1198,6 +1205,7 @@ function NativeSelectCore({
   multiple,
   selectedOrder,
   dismissible,
+  native,
 }: FloatingSelectCoreProps) {
   const describedBy = useFieldDescribedBy();
   const fieldA11y = useFieldA11y();
@@ -1418,6 +1426,72 @@ function NativeSelectCore({
       : placeholder
     : (selectedOption?.label ?? placeholder);
 
+  if (shouldUseIosNativeSelect({ native, multiple, isWeb, os: Platform.OS })) {
+    const openNative = () => {
+      if (disabled) return;
+      const labels = options.map((o) => o.label);
+      ActionSheetIOS.showActionSheetWithOptions(
+        {
+          options: [...labels, t("Cancel")],
+          cancelButtonIndex: labels.length,
+        },
+        (index) => {
+          if (index == null || index === labels.length) {
+            onBlur?.();
+            return;
+          }
+          handleSelect(options[index].value);
+        },
+      );
+    };
+    return (
+      <RNPressable
+        onPress={openNative}
+        disabled={disabled}
+        accessibilityRole="button"
+        accessibilityState={{ disabled: !!disabled, expanded: false }}
+        accessibilityLabel={ariaLabel ?? fieldA11y?.label}
+        accessibilityValue={{ text: triggerValueText }}
+        style={{ width: "100%" }}
+      >
+        <InputParts.Box
+          disabled={disabled}
+          size={knobProps.sizeToken}
+          minHeight={MIN_PRESS_TARGET}
+          pointerEvents="none"
+          {...(inTableCell
+            ? {}
+            : {
+                borderRadius: knobProps.borderRadius.borderRadius,
+                borderWidth: knobProps.borderRadius.borderWidth,
+              })}
+          data-testid="select-trigger"
+          id={id}
+        >
+          <View
+            flex={1}
+            paddingHorizontal={knobProps.panelPadding.padding}
+            paddingVertical="$2"
+            justifyContent="flex-start"
+            alignItems="flex-start"
+          >
+            <Text
+              fontFamily={knobProps.body.fontFamily}
+              fontWeight={knobProps.body.fontWeight}
+              color={selectedOption ? formCommonColors.text : formCommonColors.muted}
+              numberOfLines={1}
+            >
+              {triggerValueText}
+            </Text>
+          </View>
+          <View paddingInlineEnd="$2" alignSelf="center">
+            <CaretDownIcon size={16} />
+          </View>
+        </InputParts.Box>
+      </RNPressable>
+    );
+  }
+
   return (
     <FloatingPanel
       open={open}
@@ -1574,6 +1648,7 @@ export function Select({
   dismissible,
   skeleton,
   compact,
+  native,
   "aria-label": ariaLabel,
   ...rest
 }: SelectProps) {
@@ -1690,6 +1765,7 @@ export function Select({
         multiple={multiple}
         selectedOrder={selectedOrder}
         dismissible={dismissible}
+        native={native}
       />
     );
   };

package/src/fields/Signature/Signature.spec.tsx

@@ -1,6 +1,7 @@
-import { fireEvent } from "@testing-library/react";
-import { beforeAll, describe, expect, it, vi } from "vitest";
+import { cleanup, fireEvent } from "@testing-library/react";
+import { afterEach, beforeAll, describe, expect, it, vi } from "vitest";
 import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { Preset } from "@multiplatform.one/theme";
 import { Form } from "../../Form";
 import { Signature, signatureValueToSvg } from "./index";
 
@@ -39,6 +40,8 @@ beforeAll(() => {
   })) as any;
 });
 
+afterEach(cleanup);
+
 describe("Signature", () => {
   describe("without form context", () => {
     it("renders with label", () => {
@@ -192,7 +195,23 @@ describe("design-law", () => {
     expect(bg).not.toBe("white");
     expect(bg.replace(/\s/g, "")).not.toMatch(/^rgb\(255,255,255\)$/);
     expect(bg.replace(/\s/g, "")).not.toMatch(/^#fff(fff)?$/i);
-    expect(pad.getAttribute("data-elevation")).not.toBeTruthy();
+  });
+
+  it("elevation knob reaches the pad frame (large-canvas honour, FileUpload sibling)", () => {
+    const none = renderWithProviders(
+      <Preset overrides={{ elevation: "none" }}>
+        <Signature label="Signature" name="sig" clearIcon={clearIcon} />
+      </Preset>,
+    );
+    expect(getPad(none.container).className).not.toMatch(/_bxsh-/);
+    cleanup();
+
+    const large = renderWithProviders(
+      <Preset overrides={{ elevation: "large" }}>
+        <Signature label="Signature" name="sig" clearIcon={clearIcon} />
+      </Preset>,
+    );
+    expect(getPad(large.container).className).toMatch(/_bxsh-/);
   });
 
   it("derives pad minHeight from the size token, not a 200px canvas", () => {

package/src/fields/Signature/index.tsx

@@ -8,7 +8,7 @@ import type { PointerEvent, ReactNode } from "react";
 import { useCallback, useEffect, useRef, useState } from "react";
 import type { GestureResponderEvent, LayoutChangeEvent } from "react-native";
 import type { LabelProps, SizeTokens } from "tamagui";
-import { isWeb, Text, XStack, YStack, useTheme as useTamaguiTheme } from "tamagui";
+import { isWeb, Text, XStack, YStack, styled, useTheme as useTamaguiTheme } from "tamagui";
 import { EraserIcon } from "@phosphor-icons/react";
 import { getStroke } from "perfect-freehand";
 // Named import (not default): under tamagui 2.7.6 the vitest/vite pipeline
@@ -245,6 +245,18 @@ const signatureHeightRows = 3;
 const signatureAspect = 2.5;
 const defaultClearIcon = <EraserIcon size={16} />;
 
+// Large-canvas family (knob-laws § Family rules): honour elevation on the
+// pad FRAME the same way FileUpload's dropzone does — a styled surface that
+// accepts the resolver token. Ink stays clipped; web box-shadow paints
+// outside overflow:hidden (LC-85).
+const SignaturePadFrame = styled(YStack, {
+  name: "SignaturePad",
+  position: "relative",
+  overflow: "hidden",
+  userSelect: "none",
+  outlineWidth: 0,
+});
+
 interface SignatureCanvasProps {
   id?: string;
   hasLabel?: boolean;
@@ -498,22 +510,19 @@ function SignatureCanvasImpl({
   const frameRing = kbFocus ? ensureFocusVisibleRing({ outlineOffset: -2 }) : undefined;
 
   return (
-    <YStack
+    <SignaturePadFrame
       id={id}
-      position="relative"
       onLayout={handleLayout}
       {...knobProps.inputSurface}
       backgroundColor={backgroundColor ?? knobProps.inputBackground}
       {...(disabled ? disabledSurface : undefined)}
       borderRadius={cappedRadius}
       borderWidth={knobProps.borderRadius.borderWidth}
+      elevation={knobProps.elevation}
       borderColor={error ? formCommonColors.error : formInputColors.border.base}
-      overflow="hidden"
       aspectRatio={aspectRatio}
       minHeight={minHeightPx}
-      userSelect="none"
       cursor={cursor}
-      outlineWidth={0}
       hoverStyle={
         disabled
           ? undefined
@@ -600,7 +609,7 @@ function SignatureCanvasImpl({
           </Button>
         </XStack>
       )}
-    </YStack>
+    </SignaturePadFrame>
   );
 }
 

package/src/fields/Slider/index.tsx

@@ -16,6 +16,7 @@ import {
   borderRadiusMap,
   ensureFocusVisibleRing,
   ensureKeyboardModalityTracking,
+  FOCUS_RING_HALO_OFFSET,
   resolveRadiusClass,
   useReadableTextOn,
   useResolvedKnobs,
@@ -240,7 +241,9 @@ function SliderControl({
   const fieldTheme = useTheme();
   const thumbFocusRing = ensureFocusVisibleRing({
     outlineColor: (fieldTheme.outlineColor?.val as string | undefined) ?? "$outlineColor",
-    outlineOffset: 2,
+    // LC-71 §4 halo: circular thumb. At offset 0 the band is concentric with
+    // the thumb's edge and reads as a fatter thumb rather than a focus ring.
+    outlineOffset: FOCUS_RING_HALO_OFFSET,
   });
   // Apple/Material/Spectrum: the filled rail is the value (accent). Pin the
   // literal so Tamagui's SliderActive sub-theme cannot remap `$accentBackground`

package/src/fields/Switch/index.tsx

@@ -40,6 +40,7 @@ import { Skeleton } from "../../Skeleton";
 import { Field, FieldLayout } from "../../fieldLayout";
 import { formCommonColors, formControlColors, formSwitchColors } from "../../shared/colorRamps";
 import {
+  clampRadiusInStateProps,
   getElevationWrapperProps,
   getFieldError,
   mergeFieldHandler,
@@ -143,23 +144,24 @@ function resolveSwitchRadiusStop(pointy: boolean | undefined, radiusToken: strin
   return stop;
 }
 
-function binaryRadiusFromStateToken(token: unknown, heightPx: number): number | undefined {
-  if (typeof token !== "string") return undefined;
-  const stop = radiusStopFromToken(token);
-  if (!stop) return undefined;
-  return resolveRadiusClass("BINARY", stop, { heightPx });
-}
-
-/** Rewrite a state bag's DEFAULT radius token to BINARY at that bag's stop. */
+/**
+ * Rewrite a state bag's radius to the BINARY row (0 or h/2).
+ *
+ * Delegates to the shared `clampRadiusInStateProps`, which reads the
+ * doctrine-GENERATED table through `resolveRadiusClass` (LC-16
+ * ONE-IMPLEMENTATION). Switch used to carry its own copy of this walk; a
+ * second copy is how a DG-RAD edit reaches the base radius and silently
+ * misses every hover/press/focus bag. The only thing left here is the
+ * empty-bag convention the JSX below needs: `hoverStyle={undefined}` rather
+ * than `hoverStyle={{}}`.
+ */
 function withBinaryStateRadius(
   stateProps: Record<string, any> | undefined,
   heightPx: number,
 ): Record<string, any> | undefined {
   if (!stateProps) return undefined;
-  const { borderRadius: token, ...rest } = stateProps;
-  const resolved = binaryRadiusFromStateToken(token, heightPx);
-  const next = resolved === undefined ? rest : { ...rest, borderRadius: resolved };
-  return Object.keys(next).length > 0 ? next : undefined;
+  const next = clampRadiusInStateProps(stateProps, { radiusClass: "BINARY", heightPx });
+  return next && Object.keys(next).length > 0 ? next : undefined;
 }
 
 const SwitchThumbStyled = styled(View, {