@multiplatform.one/forms 6.4.3 → 6.6.0

package/src/fields/Select/index.tsx

@@ -311,7 +311,7 @@ const SelectItem = memo(function SelectItem({
                 : formInputColors.background.focus,
             },
           })}
-      {...(ctx.knobProps.transition ? { animation: ctx.knobProps.transition } : undefined)}
+      {...(ctx.knobProps.transition ? { transition: ctx.knobProps.transition } : undefined)}
     >
       <Text
         fontFamily={ctx.knobProps.body.fontFamily}
@@ -839,9 +839,14 @@ function FloatingSelectCore({
         cursor="pointer"
         disabled={disabled}
         size={knobProps.sizeToken}
+        // LC-54 PRESS-FLOOR: the size knob may shrink chrome (compact → $3
+        // = 36px) but the trigger's press target never drops below 44 —
+        // same minHeight floor the house Button holds. Without it a compact
+        // Select sat 36px beside 44px Inputs/Buttons in one control row.
+        minHeight={44}
         {...(inTableCell
-          ? // Chromeless in cells, but keep a ≥44px pressable target (SP-FIXED).
-            { minHeight: 44 }
+          ? // Chromeless in cells (the floor above still applies).
+            {}
           : {
               borderRadius: knobProps.borderRadius.borderRadius,
               borderWidth: knobProps.borderRadius.borderWidth,
@@ -1257,9 +1262,11 @@ function NativeSelectCore({
         <InputParts.Box
           disabled={disabled}
           size={knobProps.sizeToken}
+          // LC-54 PRESS-FLOOR: ≥44px trigger target at every size (matches
+          // the web trigger branch above).
+          minHeight={44}
           {...(inTableCell
-            ? // Chromeless in cells, but keep a ≥44px pressable target (SP-FIXED).
-              { minHeight: 44 }
+            ? {}
             : {
                 borderRadius: knobProps.borderRadius.borderRadius,
                 borderWidth: knobProps.borderRadius.borderWidth,

package/src/fields/Signature/index.tsx

@@ -454,7 +454,7 @@ function SignatureCanvasImpl({
       opacity={disabled ? 0.6 : 1}
       aspectRatio={aspectRatio}
       minHeight={minHeightPx}
-      {...(knobProps.transition ? { animation: knobProps.transition } : undefined)}
+      {...(knobProps.transition ? { transition: knobProps.transition } : undefined)}
       aria-required={required || undefined}
       aria-invalid={hasError || undefined}
     >

package/src/fields/Slider/Slider.spec.tsx

@@ -1,3 +1,4 @@
+import { useState } from "react";
 import { useForm } from "@tanstack/react-form";
 import { act, fireEvent, renderHook, waitFor } from "@testing-library/react";
 import { getSize } from "@tamagui/get-token";
@@ -205,6 +206,76 @@ describe("Slider", () => {
     });
   });
 
+  describe("late-arriving value display (create-mode seeding)", () => {
+    // The upstream value was fed into tamagui as mount-only `defaultValue`,
+    // so a value applied AFTER first paint (create-mode engine seeding,
+    // form.setFieldValue, live server merge) never moved the thumb. The
+    // slider must run controlled when an upstream value drives it — and
+    // adopting a programmatic value must not emit onChange (LC-14: a seeded
+    // value is not a user edit).
+    const getThumb = (container: ParentNode) =>
+      container.querySelector('[role="slider"]') as HTMLElement | null;
+
+    it("standalone controlled: a value arriving after mount renders, without onChange", async () => {
+      const onChange = vi.fn();
+      const onValueChange = vi.fn();
+      const result = renderWithProviders(
+        <Slider label="Progress" value={[25]} onChange={onChange} onValueChange={onValueChange} />,
+      );
+      expect(getThumb(result.container)?.getAttribute("aria-valuenow")).toBe("25");
+
+      // Late seed: the upstream doc value arrives after first paint.
+      result.rerender(
+        <Slider label="Progress" value={[75]} onChange={onChange} onValueChange={onValueChange} />,
+      );
+      await waitFor(() => {
+        expect(getThumb(result.container)?.getAttribute("aria-valuenow")).toBe("75");
+      });
+      expect(onChange).not.toHaveBeenCalled();
+      expect(onValueChange).not.toHaveBeenCalled();
+    });
+
+    it("form-integrated: a field value set after mount renders, without onChange", async () => {
+      const onChange = vi.fn();
+      let formApi: { setFieldValue: (name: "volume", value: number[]) => void } | undefined;
+      const TestComponent = () => {
+        const form = useForm({ defaultValues: { volume: [10] } });
+        formApi = form as unknown as typeof formApi;
+        return (
+          <Form form={form}>
+            <Slider label="Volume" name="volume" onChange={onChange} />
+          </Form>
+        );
+      };
+      const result = renderWithProviders(<TestComponent />);
+      expect(getThumb(result.container)?.getAttribute("aria-valuenow")).toBe("10");
+
+      await act(async () => {
+        formApi?.setFieldValue("volume", [60]);
+      });
+      await waitFor(() => {
+        expect(getThumb(result.container)?.getAttribute("aria-valuenow")).toBe("60");
+      });
+      expect(onChange).not.toHaveBeenCalled();
+    });
+
+    it("uncontrolled standalone (defaultValue only) still moves on keyboard input", async () => {
+      const onChange = vi.fn();
+      const result = renderWithProviders(
+        <Slider label="Free" defaultValue={[40]} onChange={onChange} />,
+      );
+      const thumb = getThumb(result.container);
+      expect(thumb?.getAttribute("aria-valuenow")).toBe("40");
+      await act(async () => {
+        if (thumb) fireEvent.keyDown(thumb, { key: "ArrowRight" });
+      });
+      await waitFor(() => {
+        expect(getThumb(result.container)?.getAttribute("aria-valuenow")).toBe("41");
+      });
+      expect(onChange).toHaveBeenCalledWith([41]);
+    });
+  });
+
   describe("field integration", () => {
     it("should render error text when provided", () => {
       const result = renderWithProviders(
@@ -688,10 +759,24 @@ describe("Slider", () => {
       });
 
       it("track click arms the left/transform tween then disarms after the jump window", async () => {
-        const result = renderWithProviders(
-          // min > 0 so the degenerate unmeasured-layout pointer value stays truthy
-          <Slider label="Jump" name="jump" value={[60]} min={10} max={110} />,
-        );
+        // Controlled slider with the standard feedback loop (value + onChange
+        // echoing back) — a bare static `value` is a frozen controlled input
+        // now that the upstream value really drives tamagui.
+        const JumpExample = () => {
+          const [values, setValues] = useState([60]);
+          return (
+            // min > 0 so the degenerate unmeasured-layout pointer value stays truthy
+            <Slider
+              label="Jump"
+              name="jump"
+              value={values}
+              onChange={setValues}
+              min={10}
+              max={110}
+            />
+          );
+        };
+        const result = renderWithProviders(<JumpExample />);
         const thumb = result.container.querySelector('[role="slider"]') as HTMLElement;
         const track = getTrack(result.container, thumb);
         expect(track).toBeDefined();

package/src/fields/Slider/Slider.stories.tsx

@@ -199,7 +199,26 @@ export const Interactive: Story = {
   },
 };
 
+/**
+ * FOREIGN CONTRAST SPECIMEN (LC-56 STORY-HONESTY): the right column renders the
+ * RAW tamagui Slider beside the house Slider strictly so the difference stays
+ * visible. Raw primitives here are by design and labeled — knob/contrast probes
+ * skip this story via `parameters.foreignContrastSpecimen`.
+ */
 export const Comparison: Story = {
+  name: "Foreign contrast specimen (raw tamagui)",
+  parameters: {
+    // Machine-readable exemption for knob/contrast probes and the LC-56 linter arm.
+    foreignContrastSpecimen: true,
+    docs: {
+      description: {
+        story:
+          "FOREIGN CONTRAST SPECIMEN (LC-56 STORY-HONESTY). The right column is the raw " +
+          "tamagui Slider, rendered for contrast only: it ignores house knobs and control " +
+          "recipes by design. Probes asserting house rendering must skip this story.",
+      },
+    },
+  },
   render: () => {
     const ComparisonExample = () => {
       const [customVal, setCustomVal] = useState([50]);

package/src/fields/Slider/index.tsx

@@ -333,6 +333,10 @@ function SliderControl({
   const trackActive = (
     <TamaguiSlider.TrackActive
       backgroundColor={formControlColors.border}
+      // The fill rides the same radius as the track it sits in: without it
+      // tamagui's default left a pill fill inside a square track at
+      // `borderRadius:none` — an undeclared knob-immune shape (D-09 / LC-60).
+      borderRadius={borderRadius}
       transition={transitionProp}
     />
   );

package/src/fields/Stepper/Stepper.stories.tsx

@@ -1,4 +1,5 @@
 import { action } from "@multiplatform.one/storybook";
+import type { GuardrailSpecimenParameter } from "@multiplatform.one/theme";
 import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
 import { useForm } from "@tanstack/react-form";
 import { useState } from "react";
@@ -94,6 +95,17 @@ export const Basic: Story = {
 };
 
 export const Disabled: Story = {
+  parameters: {
+    // LC-57 allowlist: this story IS the disabled-dial demo. Stepper has no
+    // disabledReason plumbing (component-contract change, tracked separately),
+    // so its +/- buttons bare-disable here by design. The warn still fires;
+    // the harvester tolerates exactly this code on this story.
+    guardrailSpecimen: {
+      warns: ["bare-disabled"],
+      reason:
+        "Disabled-dial specimen: the whole field rests disabled and Stepper has no disabledReason plumbing yet.",
+    } satisfies GuardrailSpecimenParameter,
+  },
   args: {
     label: "Disabled Field",
     disabled: true,

package/src/fields/Switch/Switch.spec.tsx

@@ -1,12 +1,35 @@
 import { useForm } from "@tanstack/react-form";
-import { act, fireEvent, waitFor } from "@testing-library/react";
-import { YStack } from "tamagui";
+import { act, fireEvent, render, waitFor } from "@testing-library/react";
+import { TamaguiProvider, YStack, createTamagui } from "tamagui";
 import { describe, expect, it, vi } from "vitest";
 import { renderWithProviders } from "@multiplatform.one/test-utils";
+import {
+  createThemesBuilder,
+  defaultAccentTheme,
+  defaultBaseTheme,
+  defaultBuilderOptions,
+} from "@multiplatform.one/theme";
+import { configWithoutAnimations } from "@tamagui/config";
+import { animationsCSS } from "@tamagui/config/v5-css";
 import { Button } from "../../Button";
 import { Form } from "../../Form";
 import { Switch } from "./index";
 
+// House builder themes for the LC-05 mark assertion — created at MODULE
+// scope: tamagui registers a config's theme variables globally at
+// createTamagui time, and a config created after the first render (inside a
+// test body) never resolves its tokens (Progress.spec pattern).
+const houseThemes = createThemesBuilder(
+  defaultBaseTheme,
+  defaultAccentTheme,
+  defaultBuilderOptions,
+).themes() as Record<string, Record<string, string>>;
+const houseConfig = createTamagui({
+  ...configWithoutAnimations,
+  animations: animationsCSS,
+  themes: houseThemes as any,
+});
+
 describe("Switch", () => {
   describe("without form context", () => {
     it("should render with label and helper text correctly", () => {
@@ -315,4 +338,29 @@ describe("Switch", () => {
       });
     });
   });
+
+  describe("checked track mark (LC-05 ONE-EMPHASIS / UX-002)", () => {
+    // The checked Switch track IS a selection mark, so it resolves the shared
+    // accent mark token; the unchecked track stays neutral chrome. Stock test
+    // themes carry no $accentBackground, so mount the house builder themes
+    // for real resolution.
+    it("paints the checked track with the accent mark and the unchecked track neutral", () => {
+      const { container } = render(
+        <TamaguiProvider config={houseConfig} defaultTheme="light" disableInjectCSS>
+          <YStack>
+            <Switch label="On" name="on" defaultValue={true} />
+            <Switch label="Off" name="off" defaultValue={false} />
+          </YStack>
+        </TamaguiProvider>,
+      );
+      const switches = Array.from(container.querySelectorAll("[role='switch']"));
+      expect(switches.length).toBe(2);
+      const on = switches.find((s) => s.getAttribute("aria-checked") === "true") as HTMLElement;
+      const off = switches.find((s) => s.getAttribute("aria-checked") === "false") as HTMLElement;
+      expect(on).toBeTruthy();
+      expect(off).toBeTruthy();
+      expect(on.className).toContain("_bg-accentBackg");
+      expect(off.className).not.toContain("_bg-accentBackg");
+    });
+  });
 });

package/src/fields/TextArea/TextArea.spec.tsx

@@ -182,6 +182,63 @@ describe("TextArea", () => {
     });
   });
 
+  describe("late-arriving value display (create-mode seeding)", () => {
+    // The DOM textarea itself adopts late `defaultValue` updates while
+    // pristine (React DOM keeps the value attribute synced), but `charCount`
+    // was mount-only state — a value applied AFTER first paint (create-mode
+    // engine seeding, setFieldValue) rendered a stale count. Adopting a
+    // programmatic value must not emit onChange (LC-14).
+    it("form-integrated: a field value set after mount displays with a live count, without onChange", async () => {
+      const onChange = vi.fn();
+      const onChangeText = vi.fn();
+      let formApi: { setFieldValue: (name: "notes", value: string) => void } | undefined;
+      const TestComponent = () => {
+        const form = useForm({ defaultValues: { notes: "" } });
+        formApi = form as unknown as typeof formApi;
+        return (
+          <Form form={form}>
+            <TextArea
+              label="Notes"
+              name="notes"
+              showCount
+              onChange={onChange}
+              onChangeText={onChangeText}
+            />
+          </Form>
+        );
+      };
+      const result = renderWithProviders(<TestComponent />);
+      expect(result.findTextElement("0 characters")).toBeDefined();
+
+      await act(async () => {
+        formApi?.setFieldValue("notes", "seeded text");
+      });
+      await waitFor(() => {
+        expect((result.getTextArea() as HTMLTextAreaElement)?.value).toBe("seeded text");
+        expect(result.findTextElement("11 characters")).toBeDefined();
+      });
+      expect(onChange).not.toHaveBeenCalled();
+      expect(onChangeText).not.toHaveBeenCalled();
+    });
+
+    it("standalone controlled: a value arriving after mount updates the count, without onChange", async () => {
+      const onChangeText = vi.fn();
+      const result = renderWithProviders(
+        <TextArea label="Notes" value="" showCount onChangeText={onChangeText} />,
+      );
+      expect(result.findTextElement("0 characters")).toBeDefined();
+
+      result.rerender(
+        <TextArea label="Notes" value="late value" showCount onChangeText={onChangeText} />,
+      );
+      await waitFor(() => {
+        expect((result.getTextArea() as HTMLTextAreaElement)?.value).toBe("late value");
+        expect(result.findTextElement("10 characters")).toBeDefined();
+      });
+      expect(onChangeText).not.toHaveBeenCalled();
+    });
+  });
+
   describe("with useForm hook directly", () => {
     it("should handle form submission with useForm", async () => {
       const onSubmitMock = vi.fn();

package/src/fields/TextArea/TextArea.stories.tsx

@@ -190,7 +190,26 @@ export const AutoResize: Story = {
   },
 };
 
+/**
+ * FOREIGN CONTRAST SPECIMEN (LC-56 STORY-HONESTY): the right column renders the
+ * RAW tamagui TextArea beside the house TextArea strictly so the difference
+ * stays visible. Raw primitives here are by design and labeled — knob/contrast
+ * probes skip this story via `parameters.foreignContrastSpecimen`.
+ */
 export const Comparison: Story = {
+  name: "Foreign contrast specimen (raw tamagui)",
+  parameters: {
+    // Machine-readable exemption for knob/contrast probes and the LC-56 linter arm.
+    foreignContrastSpecimen: true,
+    docs: {
+      description: {
+        story:
+          "FOREIGN CONTRAST SPECIMEN (LC-56 STORY-HONESTY). The right column is the raw " +
+          "tamagui TextArea, rendered for contrast only: it ignores house knobs and field " +
+          "recipes by design. Probes asserting house rendering must skip this story.",
+      },
+    },
+  },
   render: () => {
     const ComparisonExample = () => {
       const [customVal, setCustomVal] = useState("");

package/src/fields/TextArea/index.tsx

@@ -171,6 +171,14 @@ export function TextArea({
 
   const isControlled = value !== undefined;
 
+  // Count from the live value whenever an upstream source drives the field
+  // (controlled `value` prop or TanStack field state): the mount-only
+  // charCount state froze counts for values applied after first paint
+  // (create-mode seeding, setFieldValue). Uncontrolled standalone keeps the
+  // keystroke-fed local state (its defaultValue never changes underneath).
+  const countFrom = (textValue: string | undefined) =>
+    isControlled || !!(resolvedForm && name) ? (textValue ?? "").length : charCount;
+
   const renderTextArea = (
     textValue: string | undefined,
     handleChange?: (text: string) => void,
@@ -178,7 +186,7 @@ export function TextArea({
     hasError?: boolean,
   ) => (
     <>
-      {showCount && countPosition.startsWith("top") && renderCount(charCount)}
+      {showCount && countPosition.startsWith("top") && renderCount(countFrom(textValue))}
       <YStack position="relative">
         <InputParts.Box
           height="auto"
@@ -232,7 +240,7 @@ export function TextArea({
         </InputParts.Box>
         {renderOverlay?.()}
       </YStack>
-      {showCount && countPosition.startsWith("bottom") && renderCount(charCount)}
+      {showCount && countPosition.startsWith("bottom") && renderCount(countFrom(textValue))}
     </>
   );
 

package/src/fields/TimePicker/index.tsx

@@ -106,7 +106,7 @@ function AmPmColumn({
               backgroundColor={isSelected ? formInputColors.background.focus : "transparent"}
               hoverStyle={{ backgroundColor: formInputColors.background.focus }}
               onPress={() => onChange(period)}
-              {...(knobProps.transition ? { animation: knobProps.transition } : undefined)}
+              {...(knobProps.transition ? { transition: knobProps.transition } : undefined)}
             >
               <Text
                 fontSize="$3"

package/src/fields/ToggleGroup/ToggleGroup.spec.tsx

@@ -1,10 +1,52 @@
-import { fireEvent, screen } from "@testing-library/react";
+import { fireEvent, render, screen } from "@testing-library/react";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import { renderWithProviders } from "@multiplatform.one/test-utils";
+import {
+  createThemesBuilder,
+  defaultAccentTheme,
+  defaultBaseTheme,
+  defaultBuilderOptions,
+} from "@multiplatform.one/theme";
+import { configWithoutAnimations } from "@tamagui/config";
+import { animationsCSS } from "@tamagui/config/v5-css";
+import type { ReactElement } from "react";
+import { TamaguiProvider, createTamagui } from "tamagui";
 import { __resetDevWarnSeen } from "../../shared/devWarn";
 import { Form } from "../../Form";
 import { ToggleGroup } from "./index";
 
+// The stock test themes carry no accent ramp, so token resolution for the
+// LC-05 selected mark is invisible under renderWithProviders. Mount the house
+// builder themes (the same ones apps run) to assert the real resolved fill —
+// the pattern Progress.spec.tsx established.
+const houseThemes = createThemesBuilder(
+  defaultBaseTheme,
+  defaultAccentTheme,
+  defaultBuilderOptions,
+).themes() as Record<string, Record<string, string>>;
+
+const houseConfig = createTamagui({
+  ...configWithoutAnimations,
+  animations: animationsCSS,
+  themes: houseThemes as any,
+});
+
+function renderWithHouseThemes(ui: ReactElement) {
+  return render(
+    <TamaguiProvider config={houseConfig} defaultTheme="light" disableInjectCSS>
+      {ui}
+    </TamaguiProvider>,
+  );
+}
+
+/**
+ * First three numeric groups (h, s, l) of an hsla() string — the digit prefix
+ * Tamagui embeds in the atomic class it generates for a concrete color value.
+ */
+function hslDigits(hsla: string): string {
+  return (hsla.match(/\d+/g) ?? []).slice(0, 3).join("");
+}
+
 const options = [
   { label: "Left", value: "left" },
   { label: "Center", value: "center" },
@@ -162,4 +204,25 @@ describe("ToggleGroup", () => {
       expect(warnSpy).toHaveBeenCalledWith(expect.stringContaining("bare-disabled"));
     });
   });
+
+  describe("selected mark (LC-05 ONE-EMPHASIS / D-01)", () => {
+    it("fills the selected segment with the accent-tinted surface, never the neutral tier", () => {
+      const { container } = renderWithHouseThemes(
+        <ToggleGroup label="Alignment" options={options} defaultValue="left" />,
+      );
+      // Segmented-control selection strength is pinned at TINTED (D-01
+      // ViewSwitcher rider): the accent ramp's surface tier in a light scheme
+      // is its palest step (accent11) — the same channel ViewSwitcher takes.
+      const tint = houseThemes.light.accent11;
+      expect(tint).toBeTruthy();
+      const selected = container.querySelector('[data-state="on"]') as HTMLElement;
+      const idle = container.querySelector('[data-state="off"]') as HTMLElement;
+      expect(selected).toBeTruthy();
+      expect(idle).toBeTruthy();
+      expect(selected.className).toContain(`_bg-hsla${hslDigits(tint)}`);
+      expect(idle.className).not.toContain(`_bg-hsla${hslDigits(tint)}`);
+      // Ink marks selection nowhere: the old neutral $color8 fill is gone.
+      expect(selected.className).not.toContain("_bg-color8");
+    });
+  });
 });

package/src/fields/ToggleGroup/ToggleGroup.stories.tsx

@@ -252,7 +252,26 @@ const alignmentOptions = [
   { label: "Right", value: "right" },
 ];
 
+/**
+ * FOREIGN CONTRAST SPECIMEN (LC-56 STORY-HONESTY): the right column renders the
+ * RAW tamagui ToggleGroup beside the house ToggleGroup strictly so the
+ * difference stays visible. Raw primitives here are by design and labeled —
+ * knob/contrast probes skip this story via `parameters.foreignContrastSpecimen`.
+ */
 export const Comparison: Story = {
+  name: "Foreign contrast specimen (raw tamagui)",
+  parameters: {
+    // Machine-readable exemption for knob/contrast probes and the LC-56 linter arm.
+    foreignContrastSpecimen: true,
+    docs: {
+      description: {
+        story:
+          "FOREIGN CONTRAST SPECIMEN (LC-56 STORY-HONESTY). The right column is the raw " +
+          "tamagui ToggleGroup, rendered for contrast only: it ignores house knobs and " +
+          "control recipes by design. Probes asserting house rendering must skip this story.",
+      },
+    },
+  },
   render: () => {
     const ComparisonExample = () => {
       const [customVal, setCustomVal] = useState("left");

package/src/fields/ToggleGroup/index.tsx

@@ -4,6 +4,7 @@ import {
   ensureFocusVisibleRing,
   ensureKeyboardModalityTracking,
   keyboardFocusRingProps,
+  useAccentTintedSurface,
   useReadableTextOn,
   wasKeyboardFocus,
 } from "@multiplatform.one/theme";
@@ -30,6 +31,11 @@ import {
   useResolvedValidators,
 } from "../../shared/utils";
 
+// NOTE: no `active` variant here — the selected fill is runtime-resolved
+// (accent-tinted surface, LC-05/D-01), so it rides direct props re-applied
+// through hover/press. A static variant would expand at its key position and
+// paint its stale value OVER those direct props (the exact drift the LC-40
+// wash comment below records for the disabled tier).
 const ToggleItemFrame = styled(TamaguiToggleGroup.Item, {
   cursor: "pointer",
   userSelect: "none",
@@ -56,20 +62,6 @@ const ToggleItemFrame = styled(TamaguiToggleGroup.Item, {
         },
       },
     },
-    active: {
-      true: {
-        backgroundColor: formButtonColors.border.active,
-        borderColor: formButtonColors.border.active,
-        hoverStyle: {
-          backgroundColor: formButtonColors.border.active,
-          borderColor: formButtonColors.border.active,
-        },
-        pressStyle: {
-          backgroundColor: formButtonColors.border.active,
-          borderColor: formButtonColors.border.active,
-        },
-      },
-    },
   } as const,
 });
 
@@ -244,11 +236,19 @@ export function ToggleGroup({
     id: idProp,
     compact,
   });
-  // UX-018 / Axiom 15: the selected segment fills with `$color8`
-  // (formButtonColors.border.active). Under a bright tint the label inherits
-  // the scheme `$color` (near-white in dark) → 1.24:1 on bright yellow. The
-  // readable label is the paper/ink anchor that reads on the actual fill.
-  const onSelectedLabel = useReadableTextOn("$color8");
+  // LC-05 / D-01: selection is ONE accent language across every choice-control
+  // family — this selected segment filled with the neutral `$color8` tier, the
+  // catalog's last ink/neutral-marked selection surface. Segmented-control
+  // STRENGTH is pinned at TINTED (the D-01 ViewSwitcher rider — not the solid
+  // an accent CTA takes), so the fill is the accent ramp's surface tier
+  // mirrored by scheme, the same channel ViewSwitcher resolves. When the
+  // accent ramp is absent (tint sub-themes) the neutral tier stays as the
+  // declared fallback so selection never goes invisible.
+  // UX-018 / Axiom 15 kept: the label is the paper/ink anchor luminance-picked
+  // for the ACTUAL fill, never an assumed scheme token.
+  const selectedTint = useAccentTintedSurface();
+  const selectedFill = selectedTint ?? formButtonColors.border.active;
+  const onSelectedLabel = useReadableTextOn(selectedFill);
   // Chromium drops keyboard modality when tamagui's group redirects focus to
   // an item, so :focus-visible/focusVisibleStyle can miss — paint the ring
   // manually on keyboard-origin focus (see theme keyboardFocusRing).
@@ -344,9 +344,13 @@ export function ToggleGroup({
       const itemDisabled = Boolean(disabled || option.disabled);
       const itemDescribedBy = option.disabled ? itemReasonIdFor(option.disabledReason) : undefined;
       const isTabStop = index === tabStopIndex;
+      // The accent-tinted selected fill (border rides the fill, as the
+      // neutral chip's did) — re-applied through hover/press below so the
+      // neutral state layer never paints over the selection mark (the LC-05
+      // rule the checked Switch track and ViewSwitcher chip already follow).
       const activeColors = {
-        backgroundColor: formButtonColors.border.active,
-        borderColor: formButtonColors.border.active,
+        backgroundColor: selectedFill,
+        borderColor: selectedFill,
       };
 
       return (
@@ -365,18 +369,16 @@ export function ToggleGroup({
           paddingHorizontal="$2"
           borderWidth={knobProps.borderRadius.borderWidth}
           outlined={knobProps.outlined}
-          animation={knobProps.transition}
+          transition={knobProps.transition}
           disabled={itemDisabled}
           {...(itemDescribedBy ? { "aria-describedby": itemDescribedBy } : undefined)}
           // LC-40 DISABLED-VISIBLE (was DG-ST-03 hand-roll): segments are
-          // text-bearing chrome — a disabled segment drops the live active
-          // fill entirely (the `active` variant expands at its key position
-          // and would beat the wash), so the wash owns the chrome and the
-          // label pins to the lowest AA tier below. A SELECTED disabled
-          // segment takes the recipe's stronger selected tier so the chosen
-          // option stays visible (Axiom 6), not aria-only.
+          // text-bearing chrome — a disabled segment drops the live selected
+          // fill entirely, so the wash owns the chrome and the label pins to
+          // the lowest AA tier below. A SELECTED disabled segment takes the
+          // recipe's stronger selected tier so the chosen option stays
+          // visible (Axiom 6), not aria-only.
           {...(selected && !itemDisabled ? activeColors : undefined)}
-          {...(selected && !itemDisabled ? { active: true, activeStyle: activeColors } : undefined)}
           {...(itemDisabled
             ? selected
               ? disabledState.selectedSurfaceKnobProps

package/src/shared/FloatingListScrollArrows.stories.tsx

@@ -15,7 +15,9 @@ const manyOptions = Array.from({ length: 60 }, (_, i) => ({
   label: `Option ${i + 1}`,
 }));
 
-const fewOptions = Array.from({ length: 3 }, (_, i) => ({
+// Six entries: short enough that the floating list never scrolls (the story's
+// point) while clearing the ≤5 `select-too-few-options` guardrail (DG-CTRL-01).
+const fewOptions = Array.from({ length: 6 }, (_, i) => ({
   value: `option-${i + 1}`,
   label: `Option ${i + 1}`,
 }));
@@ -45,7 +47,7 @@ export const ShortSelect: Story = {
     <YStack maxWidth={320}>
       <Select
         id="fls-short"
-        label="Three options"
+        label="Six options"
         options={fewOptions}
         helperText="No arrows expected"
       />