@multiplatform.one/forms 7.4.0 → 7.5.0

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

@@ -1,3 +1,4 @@
+import { sizeRecipeForToken } from "@multiplatform.one/theme";
 import { useForm } from "@tanstack/react-form";
 import { act, fireEvent, waitFor } from "@testing-library/react";
 import { YStack } from "tamagui";
@@ -400,4 +401,112 @@ describe("PhoneInput", () => {
       expect(input).toBeDefined();
     });
   });
+
+  describe("design-law (LC-71 / LC-75 / LC-76 / LC-20 / LC-40)", () => {
+    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 flag = result.container.querySelector('[data-testid="combobox-trigger"]');
+      const input = result.container.querySelector("input");
+      expect(box).toBeTruthy();
+      expect(box.className).toMatch(/mp-composite-ring/);
+      expect(box.contains(flag)).toBe(true);
+      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", () => {
+      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");
+    });
+
+    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("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)", () => {
+      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();
+    });
+
+    it("does not open the country picker when disabled (SB-M-213)", async () => {
+      const result = renderWithProviders(<PhoneInput label="Phone" disabled />);
+      const trigger = result.container.querySelector(
+        '[data-testid="combobox-trigger"]',
+      ) as HTMLElement;
+      expect(trigger).toBeTruthy();
+      await act(async () => {
+        fireEvent.click(trigger);
+      });
+      expect(result.container.querySelector('[role="option"]')).toBeNull();
+    });
+
+    it("does not open the country picker when read-only (SB-M-215)", async () => {
+      const result = renderWithProviders(<PhoneInput label="Phone" readOnly />);
+      const country = result.container.querySelector(
+        "[data-testid='phone-country']",
+      ) as HTMLElement;
+      expect(country).toBeTruthy();
+      expect(result.container.querySelector('[data-testid="combobox-trigger"]')).toBeNull();
+      await act(async () => {
+        fireEvent.click(country);
+      });
+      expect(result.container.querySelector('[role="option"]')).toBeNull();
+      const input = result.container.querySelector("input") as HTMLInputElement;
+      expect(input.readOnly).toBe(true);
+    });
+  });
 });

package/src/fields/PhoneInput/PhoneInput.stories.tsx

@@ -1,5 +1,6 @@
 import { useState } from "react";
 import { action } from "@multiplatform.one/storybook";
+import { DataTable, type DataTableColumn } from "@multiplatform.one/table";
 import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
 import { useForm } from "@tanstack/react-form";
 import { Text, YStack } from "tamagui";
@@ -196,3 +197,30 @@ export const DifferentCountries: Story = {
 export const SkeletonState: Story = {
   render: () => <PhoneInput label="Phone Number" skeleton />,
 };
+
+type InTableRow = { id: string; label: string; value: string };
+
+export const InTable: Story = {
+  name: "In table",
+  render: () => {
+    const [data, setData] = useState<InTableRow[]>([
+      { id: "1", label: "Alpha", value: "+15125551234" },
+      { id: "2", label: "Beta", value: "+442071838750" },
+      { id: "3", label: "Gamma", value: "" },
+    ]);
+    const columns: DataTableColumn<InTableRow>[] = [
+      { accessorKey: "label", header: "Row" },
+      {
+        accessorKey: "value",
+        header: "Phone",
+        field: "phoneinput",
+        fieldProps: { defaultCountry: "US", placeholder: "Enter your phone number" },
+      },
+    ];
+    return (
+      <YStack width="100%" height={280}>
+        <DataTable data={data} columns={columns} enablePagination={false} onDataChange={setData} />
+      </YStack>
+    );
+  },
+};

package/src/fields/PhoneInput/index.tsx

@@ -1,5 +1,5 @@
 import { CaretDownIcon, GlobeIcon } from "@phosphor-icons/react";
-import { ensureCompositeFocusRing } from "@multiplatform.one/theme";
+import { ensureCompositeFocusRing, useGlyphColor } from "@multiplatform.one/theme";
 import type { DeepKeys, DeepValue } from "@tanstack/form-core";
 import type { ComponentProps, FocusEventHandler, ReactNode } from "react";
 import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
@@ -218,6 +218,7 @@ export function PhoneInput<
   const sizeToken = (size || knobProps.sizeToken) as string;
   const flagSize = flagSizeForToken(sizeToken);
   const caretSize = caretSizeForToken(sizeToken);
+  const glyphColor = useGlyphColor();
 
   const seed =
     typeof valueProp === "string"
@@ -346,7 +347,7 @@ export function PhoneInput<
                 <XStack
                   alignItems="center"
                   gap="$1.5"
-                  paddingHorizontal="$2"
+                  paddingHorizontal={0}
                   height="100%"
                   cursor={disabled ? "not-allowed" : "pointer"}
                   hoverStyle={
@@ -370,7 +371,7 @@ export function PhoneInput<
                   >
                     +{dialOf(code)}
                   </Text>
-                  <CaretDownIcon size={caretSize} />
+                  <CaretDownIcon size={caretSize} color={glyphColor} />
                 </XStack>
               );
             }}

package/src/fields/Progress/Progress.spec.tsx

@@ -1,12 +1,14 @@
-import { describe, expect, it } from "vitest";
+import { describe, expect, it, vi } from "vitest";
 import { render } from "@testing-library/react";
 import { renderWithProviders } from "@multiplatform.one/test-utils";
 import {
+  Preset,
   createThemesBuilder,
   defaultAccentTheme,
   defaultBaseTheme,
   defaultBuilderOptions,
 } from "@multiplatform.one/theme";
+import { TableCellContext } from "../../shared/tableCellContext";
 import { configWithoutAnimations } from "@tamagui/config";
 import { animationsCSS } from "@tamagui/config/v5-css";
 import type { ReactElement } from "react";
@@ -186,36 +188,148 @@ describe("Progress", () => {
 
     it("clamps negative, overflow, and non-finite values", () => {
       const neg = renderWithProviders(<Progress label="N" value={-10} max={100} />);
-      expect(neg.container.querySelector("[role='progressbar']")?.getAttribute("aria-valuenow")).toBe(
-        "0",
-      );
+      expect(
+        neg.container.querySelector("[role='progressbar']")?.getAttribute("aria-valuenow"),
+      ).toBe("0");
 
       const over = renderWithProviders(<Progress label="O" value={150} max={100} />);
-      expect(over.container.querySelector("[role='progressbar']")?.getAttribute("aria-valuenow")).toBe(
-        "100",
-      );
+      expect(
+        over.container.querySelector("[role='progressbar']")?.getAttribute("aria-valuenow"),
+      ).toBe("100");
 
       const nan = renderWithProviders(<Progress label="X" value={Number.NaN} max={100} />);
-      expect(nan.container.querySelector("[role='progressbar']")?.getAttribute("aria-valuenow")).toBe(
-        "0",
-      );
+      expect(
+        nan.container.querySelector("[role='progressbar']")?.getAttribute("aria-valuenow"),
+      ).toBe("0");
 
       const badMax = renderWithProviders(<Progress label="M" value={40} max={0} />);
-      expect(badMax.container.querySelector("[role='progressbar']")?.getAttribute("aria-valuemax")).toBe(
-        "100",
+      expect(
+        badMax.container.querySelector("[role='progressbar']")?.getAttribute("aria-valuemax"),
+      ).toBe("100");
+      expect(
+        badMax.container.querySelector("[role='progressbar']")?.getAttribute("aria-valuenow"),
+      ).toBe("40");
+    });
+
+    it("exposes aria-readonly when readOnly", () => {
+      const { container } = renderWithProviders(<Progress label="Locked" value={50} readOnly />);
+      expect(container.querySelector("[role='progressbar']")?.getAttribute("aria-readonly")).toBe(
+        "true",
+      );
+    });
+
+    it("string error replaces helper; boolean error is silent but invalid", () => {
+      const withCopy = renderWithProviders(
+        <Progress label="Upload" value={30} error="Must finish" helperText="keep going" />,
       );
-      expect(badMax.container.querySelector("[role='progressbar']")?.getAttribute("aria-valuenow")).toBe(
-        "40",
+      expect(withCopy.container.textContent).toContain("Must finish");
+      expect(withCopy.container.textContent).not.toContain("keep going");
+      expect(
+        withCopy.container.querySelector("[role='progressbar']")?.getAttribute("aria-invalid"),
+      ).toBe("true");
+
+      const flag = renderWithProviders(
+        <Progress label="Upload" value={30} error helperText="keep going" />,
       );
+      // Boolean error has no copy — helper stays (FieldLayout only replaces
+      // the slot when `error` is a non-empty string).
+      expect(flag.container.textContent).toContain("keep going");
+      expect(
+        flag.container.querySelector("[role='progressbar']")?.getAttribute("aria-invalid"),
+      ).toBe("true");
     });
 
-    it("exposes aria-readonly when readOnly", () => {
+    it("rounds fractional values for aria-valuenow and the paired percent", () => {
+      const { container } = renderWithProviders(<Progress label="Frac" value={33.333} max={100} />);
+      expect(container.querySelector("[role='progressbar']")?.getAttribute("aria-valuenow")).toBe(
+        "33",
+      );
+      expect(container.textContent).toContain("33%");
+    });
+  });
+
+  describe("LC-14 onChange contract", () => {
+    it("accepts onChange without throwing on a display-only field", () => {
+      const onChange = vi.fn();
       const { container } = renderWithProviders(
-        <Progress label="Locked" value={50} readOnly />,
+        <Progress label="Upload" value={40} onChange={onChange} />,
       );
-      expect(container.querySelector("[role='progressbar']")?.getAttribute("aria-readonly")).toBe(
-        "true",
+      expect(container.querySelector("[role='progressbar']")).toBeTruthy();
+      expect(onChange).not.toHaveBeenCalled();
+    });
+  });
+
+  describe("table cell chromeless", () => {
+    it("drops FieldLayout chrome and the paired percent inside a cell", () => {
+      const { container } = renderWithProviders(
+        <TableCellContext.Provider value={{ inTableCell: true, isHeader: false, editable: false }}>
+          <Progress label="Upload" value={65} helperText="hidden in cells" />
+        </TableCellContext.Provider>,
       );
+      expect(container.textContent ?? "").not.toContain("Upload");
+      expect(container.textContent ?? "").not.toContain("65%");
+      expect(container.textContent ?? "").not.toContain("hidden in cells");
+      expect(container.querySelector("[role='progressbar']")).toBeTruthy();
+    });
+
+    it("still pairs the percent when showValue is forced in a cell", () => {
+      const { container } = renderWithProviders(
+        <TableCellContext.Provider value={{ inTableCell: true, isHeader: false, editable: false }}>
+          <Progress value={65} showValue />
+        </TableCellContext.Provider>,
+      );
+      expect(container.textContent).toContain("65%");
+    });
+  });
+
+  describe("LC-18 / LC-20 / LC-32 knobs", () => {
+    it("zeroes the size-variant minWidth so the track fills the cell (no 220px floor)", () => {
+      const { container } = renderWithProviders(<Progress label="Fill" value={50} />);
+      const bar = container.querySelector("[role='progressbar']") as HTMLElement;
+      expect(bar).toBeTruthy();
+      expect(getComputedStyle(bar).minWidth).toBe("0px");
+    });
+
+    it("goes square at borderRadius none (R-SCALE, Axiom 3)", () => {
+      const { container } = renderWithProviders(
+        <Preset overrides={{ borderRadius: "none" }}>
+          <Progress label="Square" value={50} />
+        </Preset>,
+      );
+      const bar = container.querySelector("[role='progressbar']") as HTMLElement;
+      expect(bar).toBeTruthy();
+      // jsdom cannot cascade Tamagui class CSS — read the atomic radius class
+      // (Button LC-18 / FieldDisplay precedent): t-radius-0 is the none token.
+      const radiusAtoms = String(bar.className || "")
+        .split(" ")
+        .filter((c) => c.startsWith("_btlr-"));
+      expect(radiusAtoms).toContain("_btlr-t-radius-0");
+      expect(radiusAtoms).not.toContain("_btlr-100000px");
+    });
+
+    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;
+      const liveHeight = getComputedStyle(bar).height;
+
+      const skel = renderWithProviders(<Progress label="Upload" skeleton />);
+      expect(skel.container.querySelector("[role='progressbar']")).toBeNull();
+      const bones = [...skel.container.querySelectorAll("div")].filter(
+        (el) => getComputedStyle(el).height === liveHeight && el !== skel.container,
+      );
+      expect(Number.parseFloat(liveHeight)).toBeGreaterThan(6);
+      expect(bones.length).toBeGreaterThan(0);
+    });
+
+    it("stops indicator motion when animation is none", () => {
+      const { container } = renderWithProviders(
+        <Preset overrides={{ animation: "none" }}>
+          <Progress label="Still" value={40} />
+        </Preset>,
+      );
+      const indicator = getIndicator(container) as HTMLElement;
+      expect(indicator).toBeTruthy();
+      expect(Array.from(indicator.classList)).toContain("_transition-none");
     });
   });
 });

package/src/fields/Progress/Progress.stories.tsx

@@ -1,4 +1,5 @@
 import { action } from "@multiplatform.one/storybook";
+import { DataTable, type DataTableColumn } from "@multiplatform.one/table";
 import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
 import { useForm } from "@tanstack/react-form";
 import { useState } from "react";
@@ -86,12 +87,13 @@ export const Basic: Story = {
   },
 };
 
-export const Disabled: Story = {
+export const ReadOnly: Story = {
   args: {
-    label: "Disabled Progress",
+    label: "Read-only Progress",
     value: 50,
     max: 100,
-    helperText: "This progress bar is read-only",
+    readOnly: true,
+    helperText: "Display-only — Progress has no disabled mutation contract",
   },
 };
 
@@ -219,3 +221,30 @@ export const Comparison: Story = {
 export const SkeletonState: Story = {
   args: { label: "Upload progress", skeleton: true },
 };
+
+type InTableRow = { id: string; label: string; value: number };
+
+export const InTable: Story = {
+  name: "In table",
+  render: () => {
+    const [data, setData] = useState<InTableRow[]>([
+      { id: "1", label: "Alpha", value: 70 },
+      { id: "2", label: "Beta", value: 42 },
+      { id: "3", label: "Gamma", value: 0 },
+    ]);
+    const columns: DataTableColumn<InTableRow>[] = [
+      { accessorKey: "label", header: "Row" },
+      {
+        accessorKey: "value",
+        header: "Progress",
+        field: "progress",
+        fieldProps: { min: 0, max: 100 },
+      },
+    ];
+    return (
+      <YStack width="100%" height={280}>
+        <DataTable data={data} columns={columns} enablePagination={false} onDataChange={setData} />
+      </YStack>
+    );
+  },
+};

package/src/fields/Progress/index.tsx

@@ -18,6 +18,7 @@ import {
 import { Field, FieldLayout, useFieldDescribedBy } from "../../fieldLayout";
 import { Skeleton } from "../../Skeleton";
 import { formControlColors } from "../../shared/colorRamps";
+import { useIsInTableCell } from "../../shared/tableCellContext";
 import { bidiIsolate, t } from "../../shared/t";
 import {
   getElevationWrapperProps,
@@ -73,7 +74,8 @@ function clampProgress(value: unknown, max: number): number {
 
 function indicatorMotion(transition: KnobProps["transition"]) {
   // `transition` only — the tamagui 1.x `animation` prop is silently dropped
-  // on 2.x (convention lint).
+  // on 2.x (convention lint). Named motion rides the knob; `none` is an
+  // explicit stop so Tamagui's Indicator default cannot keep tweening (LC-32).
   if (!transition) return { transition: "none" as const };
   return { transition };
 }
@@ -114,6 +116,12 @@ export interface ProgressProps {
   value?: number;
   defaultValue?: number;
   max?: number;
+  /**
+   * Canonical change prop (LC-14). Progress is display-only — the field
+   * never mutates from user input — but the contract still accepts
+   * `onChange(value)` so wiring it never silently no-ops at the type layer.
+   */
+  onChange?: (value: number) => void;
   onBlur?: (...args: any[]) => void;
   progressProps?: Omit<TamaguiProgressProps, "value" | "max" | "id" | "children">;
   /**
@@ -129,7 +137,8 @@ export interface ProgressProps {
   compact?: boolean;
   /**
    * Visible percent beside the track (Primer / Polaris text pairing).
-   * Defaults on when a field label is present; unlabeled embeds stay bar-only.
+   * Defaults on when a field label is present; unlabeled embeds and table
+   * cells stay bar-only unless this is forced on.
    */
   showValue?: boolean;
 }
@@ -177,7 +186,6 @@ function ProgressTrack({
 
   const progressElement = (
     <ProgressFrame
-      width="100%"
       size={trackSize}
       overflow="hidden"
       outlined={knobProps.outlined}
@@ -187,6 +195,10 @@ function ProgressTrack({
       aria-label={name}
       aria-describedby={describedBy}
       aria-readonly={readOnly || undefined}
+      // Tamagui's size variant pins minWidth ≈ height×20 (~220px). Zero it
+      // after `size` so the track fills the cell / form column (LC-18).
+      width="100%"
+      minWidth={0}
       {...progressProps}
       id={id}
       value={progressValue}
@@ -264,6 +276,7 @@ export function Progress({
   value,
   defaultValue,
   max,
+  onChange: _onChange,
   onBlur,
   progressProps,
   intent,
@@ -278,17 +291,23 @@ export function Progress({
   });
   const resolvedValidators = useResolvedValidators(required, validators, label, name);
   const resolvedMax = resolveMax(max);
-  const showValue = showValueProp ?? Boolean(label);
-  const elevationWrapperProps = getElevationWrapperProps(knobProps, elevation);
+  const inTableCell = useIsInTableCell();
+  const showValue = showValueProp ?? (Boolean(label) && !inTableCell);
+  const elevationWrapperProps = inTableCell ? {} : getElevationWrapperProps(knobProps, elevation);
   const trackSize = size ?? knobProps.sizeToken;
 
+  const skeletonTrack = (
+    <XStack {...knobProps.gap} alignItems="center" width="100%">
+      <Skeleton variant="rounded" width="100%" height={trackHeightPx(trackSize)} flex={1} />
+      {showValue ? <Skeleton variant="text" width={40} /> : null}
+    </XStack>
+  );
+
   if (skeleton) {
+    if (inTableCell) return skeletonTrack;
     return (
       <FieldLayout id={id} label={label} size={size} knobProps={knobProps}>
-        <XStack {...knobProps.gap} alignItems="center" width="100%">
-          <Skeleton variant="rounded" width="100%" height={trackHeightPx(trackSize)} flex={1} />
-          {showValue ? <Skeleton variant="text" width={40} /> : null}
-        </XStack>
+        {skeletonTrack}
       </FieldLayout>
     );
   }
@@ -318,6 +337,8 @@ export function Progress({
   );
 
   if (!resolvedForm || !name) {
+    const track = renderTrack(value ?? defaultValue ?? 0, undefined, !!error);
+    if (inTableCell) return track;
     return (
       <FieldLayout
         id={id}
@@ -329,7 +350,7 @@ export function Progress({
         size={size}
         knobProps={knobProps}
       >
-        {renderTrack(value ?? defaultValue ?? 0, undefined, !!error)}
+        {track}
       </FieldLayout>
     );
   }
@@ -343,6 +364,12 @@ export function Progress({
     >
       {(field) => {
         const resolvedError = getFieldError(field, error);
+        const track = renderTrack(
+          (field.state.value as number) ?? 0,
+          mergeFieldHandler(field, "handleBlur", onBlur),
+          !!resolvedError,
+        );
+        if (inTableCell) return track;
         return (
           <FieldLayout
             id={id}
@@ -354,11 +381,7 @@ export function Progress({
             size={size}
             knobProps={knobProps}
           >
-            {renderTrack(
-              (field.state.value as number) ?? 0,
-              mergeFieldHandler(field, "handleBlur", onBlur),
-              !!resolvedError,
-            )}
+            {track}
           </FieldLayout>
         );
       }}

package/src/fields/RadioGroup/RadioGroup.spec.tsx

@@ -4,6 +4,7 @@ import { TamaguiProvider, YStack, createTamagui } from "tamagui";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import { renderWithProviders } from "@multiplatform.one/test-utils";
 import {
+  Preset,
   createThemesBuilder,
   defaultAccentTheme,
   defaultBaseTheme,
@@ -102,6 +103,26 @@ describe("RadioGroup Components", () => {
         expect(onValueChange).toHaveBeenCalledTimes(1);
         expect(onValueChange).toHaveBeenCalledWith("option1");
       });
+
+      it("clicking the painted glyph still selects", async () => {
+        // RadioGlyph is pointerEvents=none so RN presses reach role=radio
+        // (same inner-View steal as CheckboxGlyphBox).
+        const onChange = vi.fn();
+        const result = renderWithProviders(
+          <RadioGroup
+            label="Choose Option"
+            name="option"
+            options={mockOptions}
+            onChange={onChange}
+          />,
+        );
+        const glyph = result.container.querySelector("[data-radio-kb-focus]");
+        expect(glyph).toBeTruthy();
+        await act(async () => {
+          if (glyph) fireEvent.click(glyph);
+        });
+        expect(onChange).toHaveBeenCalledWith("option1");
+      });
     });
 
     describe("with form context", () => {
@@ -490,5 +511,42 @@ describe("RadioGroup Components", () => {
         }
       });
     });
+
+    describe("radio disc identity (R-IDENTITY)", () => {
+      const disc = (container: HTMLElement) =>
+        container.querySelector('[data-radius-part="radio disc"]');
+      const classOf = (el: Element) => (el as HTMLElement).className?.toString() ?? "";
+
+      it("declares R-IDENTITY / radio disc on the glyph", () => {
+        const result = renderWithProviders(
+          <RadioGroup label="Choose" name="option" options={mockOptions} />,
+        );
+        const el = disc(result.container);
+        expect(el?.getAttribute("data-radius-class")).toBe("R-IDENTITY");
+        expect(el?.getAttribute("data-radius-part")).toBe("radio disc");
+      });
+
+      it("stays round when pointy is set", () => {
+        const result = renderWithProviders(
+          <RadioGroup label="Choose" name="option" pointy options={mockOptions} />,
+        );
+        const el = disc(result.container);
+        expect(el).toBeTruthy();
+        expect(classOf(el!)).toMatch(/1000/);
+        expect(el?.getAttribute("data-radius-class")).toBe("R-IDENTITY");
+      });
+
+      it("stays round at borderRadius none", () => {
+        const result = renderWithProviders(
+          <Preset overrides={{ borderRadius: "none" }}>
+            <RadioGroup label="Choose" name="option" options={mockOptions} />
+          </Preset>,
+        );
+        const el = disc(result.container);
+        expect(el).toBeTruthy();
+        expect(classOf(el!)).toMatch(/1000/);
+        expect(el?.getAttribute("data-radius-class")).toBe("R-IDENTITY");
+      });
+    });
   });
 });