@multiplatform.one/forms 6.7.0 → 7.1.0

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

@@ -98,6 +98,34 @@ describe("Switch", () => {
       expect(onCheckedChange).toHaveBeenCalledWith(true);
     });
 
+    it("forwards top-level aria-label to the role=switch node", () => {
+      const result = renderWithProviders(
+        <Switch aria-label="Toggle availability" defaultValue={false} />,
+      );
+      const switchElement = result.getSwitch();
+      expect(switchElement?.getAttribute("aria-label")).toBe("Toggle availability");
+    });
+
+    it("forwards top-level aria-labelledby to the role=switch node", () => {
+      const result = renderWithProviders(
+        <Switch aria-labelledby="external-label-id" defaultValue={false} />,
+      );
+      const switchElement = result.getSwitch();
+      expect(switchElement?.getAttribute("aria-labelledby")).toBe("external-label-id");
+    });
+
+    it("top-level aria-label wins over the switchProps escape hatch", () => {
+      const result = renderWithProviders(
+        <Switch
+          aria-label="Dedicated prop"
+          switchProps={{ "aria-label": "Escape hatch" } as any}
+          defaultValue={false}
+        />,
+      );
+      const switchElement = result.getSwitch();
+      expect(switchElement?.getAttribute("aria-label")).toBe("Dedicated prop");
+    });
+
     it("should toggle on via press+drag across the track", async () => {
       const onCheckedChange = vi.fn();
       const result = renderWithProviders(
@@ -208,16 +236,17 @@ describe("Switch", () => {
         fireEvent.pointerDown(switchElement, { clientX: 0, pointerId: 1, button: 0 });
       });
       await act(async () => {
-        // Past drag-intent (10px) but still below the snap midpoint.
+        // Past drag-intent (10px) but still below the snap midpoint
+        // (recipe $4 track ≈ 21px, midpoint ≈ 10.5).
         fireEvent(
           document,
-          new PointerEvent("pointermove", { clientX: 12, pointerId: 1, bubbles: true }),
+          new PointerEvent("pointermove", { clientX: 10, pointerId: 1, bubbles: true }),
         );
       });
       await act(async () => {
         fireEvent(
           document,
-          new PointerEvent("pointerup", { clientX: 12, pointerId: 1, bubbles: true }),
+          new PointerEvent("pointerup", { clientX: 10, pointerId: 1, bubbles: true }),
         );
       });
       // Same-gesture press that follows a drag must not flip the value.
@@ -363,4 +392,24 @@ describe("Switch", () => {
       expect(off.className).not.toContain("_bg-accentBackg");
     });
   });
+
+  describe("LC-71 RING-ANATOMY", () => {
+    it("does not paint a keyboard ring until keyboard-origin focus", () => {
+      const result = renderWithProviders(<Switch label="Focus" defaultValue={false} />);
+      const switchElement = result.getSwitch();
+      expect(switchElement).toBeTruthy();
+      expect(switchElement?.getAttribute("data-kb-focus")).toBeNull();
+    });
+
+    it("does not use outline as the on/selected channel", () => {
+      const result = renderWithProviders(<Switch label="On" defaultValue={true} />);
+      const switchElement = result.getSwitch();
+      expect(switchElement).toBeTruthy();
+      if (!switchElement) return;
+      expect(switchElement.getAttribute("aria-checked")).toBe("true");
+      expect(switchElement.getAttribute("data-kb-focus")).toBeNull();
+      const outline = getComputedStyle(switchElement).outlineWidth;
+      expect(outline === "0px" || outline === "").toBe(true);
+    });
+  });
 });

package/src/fields/Switch/Switch.stories.tsx

@@ -1,3 +1,4 @@
+import { CheckIcon, XIcon } from "@phosphor-icons/react";
 import { action } from "@multiplatform.one/storybook";
 import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
 import { useForm } from "@tanstack/react-form";
@@ -109,6 +110,38 @@ export const Pointy: Story = {
   ),
 };
 
+export const States: Story = {
+  render: () => (
+    <YStack gap="$4" maxWidth={400}>
+      <Switch label="Off" defaultValue={false} />
+      <Switch label="On" defaultValue={true} />
+      <Switch label="Disabled off" disabled defaultValue={false} />
+      <Switch label="Disabled on" disabled defaultValue={true} />
+      <Switch label="Read only" readOnly defaultValue={true} />
+    </YStack>
+  ),
+};
+
+export const WithIcons: Story = {
+  render: () => (
+    <YStack gap="$4" maxWidth={400}>
+      <Switch
+        label="Do not disturb"
+        helperText="Icons sit in the off/on pockets"
+        defaultValue={false}
+        leftIcon={<XIcon />}
+        rightIcon={<CheckIcon />}
+      />
+      <Switch
+        label="Do not disturb"
+        defaultValue={true}
+        leftIcon={<XIcon />}
+        rightIcon={<CheckIcon />}
+      />
+    </YStack>
+  ),
+};
+
 export const Sizes: Story = {
   render: () => (
     <YStack gap="$4" maxWidth={400}>
@@ -145,6 +178,7 @@ export const Interactive: Story = {
 };
 
 export const Comparison: StoryObj = {
+  parameters: { foreignContrastSpecimen: true },
   render: () => {
     const ComparisonExample = () => {
       const [customChecked, setCustomChecked] = useState(false);

package/src/fields/Switch/index.tsx

@@ -1,5 +1,5 @@
 import type { ReactNode } from "react";
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
 import type { AnyFormApi } from "../../types";
 import type { ColorTokens, FontSizeTokens, LabelProps, SizeTokens } from "tamagui";
 import {
@@ -19,12 +19,17 @@ import {
   useTheme,
   withStaticProperties,
 } from "tamagui";
-import { getSize } from "@tamagui/get-token";
 import {
+  TOUCH_HEIGHT_FLOOR,
   contrastRatio,
+  ensureFocusVisibleRing,
+  isTouchSurface,
   normalizeToHex,
   relativeLuminance,
+  sizeRecipeForToken,
   useResolvedKnobs,
+  wasKeyboardFocus,
+  ensureKeyboardModalityTracking,
 } from "@multiplatform.one/theme";
 import { Skeleton } from "../../Skeleton";
 import { Field, FieldLayout } from "../../fieldLayout";
@@ -45,11 +50,62 @@ const SWITCH_DRAG_INTENT_PX = 10;
 /** Minimum pressable height for the switch inside table cells (SP-FIXED). */
 const SWITCH_CELL_TARGET_HEIGHT = 44;
 
+/**
+ * Apple / Material 3 / Polaris: the thumb floats inside the track (≈2px
+ * gutter), never flush to the rim. Shrinks on tiny sizes so the handle
+ * stays ≥10px.
+ */
+const switchThumbInset = (trackInner: number) =>
+  Math.min(2, Math.max(0, Math.floor((trackInner - 10) / 2)));
+
+/** `animation=none` resolves to undefined — do not fall back to `quick`. */
+const resolveSwitchMotion = (token: string | undefined) =>
+  token && token !== "none" ? token : "none";
+
+const SWITCH_KB_RING_CSS_ID = "mp-switch-kb-ring-css";
+const SWITCH_KB_RING_CLASS = "mp-switch-kb-ring";
+
+/** LC-71: Tamagui compiles focusStyle outlineWidth:0 to `:focus { outline-width:0 !important }`. */
+function ensureSwitchKbRingCss() {
+  if (typeof document === "undefined") return;
+  const css = `:root:root:root:root:root:root:root:root .${SWITCH_KB_RING_CLASS}.${SWITCH_KB_RING_CLASS},:root:root:root:root:root:root:root:root .${SWITCH_KB_RING_CLASS}.${SWITCH_KB_RING_CLASS}:focus,:root:root:root:root:root:root:root:root .${SWITCH_KB_RING_CLASS}.${SWITCH_KB_RING_CLASS}:focus-visible{outline-width:2px!important;outline-style:solid!important;outline-color:var(--outlineColor,var(--c-outlineColor,CanvasText))!important;outline-offset:2px!important}`;
+  let tag = document.getElementById(SWITCH_KB_RING_CSS_ID) as HTMLStyleElement | null;
+  if (!tag) {
+    tag = document.createElement("style");
+    tag.id = SWITCH_KB_RING_CSS_ID;
+    document.head.appendChild(tag);
+  }
+  if (tag.textContent !== css) tag.textContent = css;
+}
+
+/** LC-71: hover/press/focus knobs must not smuggle a second outline channel. */
+const stripOutlineFromState = (props?: Record<string, any>) => {
+  if (!props) return props;
+  const { outlineWidth, outlineStyle, outlineColor, outlineOffset, ...rest } = props;
+  return Object.keys(rest).length > 0 ? rest : undefined;
+};
+
 // ─── Switch internals ─────────────────────────────────────────────────────────
 
-const getSwitchHeight = (val: SizeTokens) => Math.round(getVariableValue(getSize(val)) * 0.65);
+/**
+ * Switch geometry rides the GENERATED size recipe (LC-75 / LC-80): the
+ * painted TRACK equals the family height for the token (track = thumb slot +
+ * 2×border), so a `$4` switch is exactly as tall as a `$4` input (32).
+ * Previously thumb/track indexed the flat Tamagui size ramp (getSize × 0.65)
+ * — the independent-position drift LC-75 bans. The styled fallbacks assume
+ * the 1px hairline track border; the component passes exact frameProps with
+ * the live knob borderWidth. Touch keeps the DESKTOP recipe for the painted
+ * track (a 44px-tall painted switch is not a control anyone ships) and
+ * restores the 44 floor on the PRESSABLE frame via grown-target mode below.
+ */
+const SWITCH_TRACK_BORDER_FALLBACK = 1;
+
+const getSwitchTrackHeight = (val: SizeTokens) => sizeRecipeForToken(String(val)).height;
 
-const getSwitchWidth = (val: SizeTokens) => getSwitchHeight(val) * 2;
+const getSwitchThumbHeight = (
+  val: SizeTokens,
+  borderWidth: number = SWITCH_TRACK_BORDER_FALLBACK,
+) => getSwitchTrackHeight(val) - borderWidth * 2;
 
 const resolveRadiusValue = (radius: unknown) => {
   if (typeof radius === "number") return radius;
@@ -99,7 +155,7 @@ const SwitchThumbStyled = styled(View, {
 
     size: {
       "...size": (val) => {
-        const size = getSwitchHeight(val);
+        const size = getSwitchThumbHeight(val);
         return { height: size, width: size };
       },
     },
@@ -121,13 +177,14 @@ const SwitchFrameStyled = styled(View, {
         borderRadius: 1000,
         backgroundColor: formSwitchColors.track.off,
         borderWidth: 1,
-        borderColor: formControlColors.border,
-
-        focusVisibleStyle: {
-          outlineColor: "$outlineColor",
-          outlineStyle: "solid",
-          outlineWidth: 2,
-        },
+        // Off track: muted fill + ≥3:1 boundary (M3 unselected outline,
+        // DF-06). On track is fill — see `checked` / `activeStyle`.
+        borderColor: formControlColors.boundary,
+        outlineWidth: 0,
+        focusStyle: { outlineWidth: 0 },
+        // LC-71: ring is painted from keyboard modality on the track, never
+        // via :focus-visible (mouse click on a <button> can still ring).
+        focusVisibleStyle: { outlineWidth: 0 },
       },
     },
 
@@ -138,14 +195,14 @@ const SwitchFrameStyled = styled(View, {
       },
       false: {
         backgroundColor: formSwitchColors.track.off,
-        borderColor: formControlColors.border,
+        borderColor: formControlColors.boundary,
       },
     },
 
     size: {
       "...size": (val) => {
-        const height = getSwitchHeight(val);
-        const width = getSwitchWidth(val);
+        const height = getSwitchTrackHeight(val);
+        const width = getSwitchThumbHeight(val) * 2 + SWITCH_TRACK_BORDER_FALLBACK * 2;
         return { height, minHeight: height, width };
       },
     },
@@ -286,6 +343,10 @@ type SwitchControlProps = {
   accessibilityLabel?: string;
   /** Native VoiceOver/TalkBack hint (error or helper text). */
   accessibilityHint?: string;
+  /** Web accessible name — forwarded to the role="switch" node. */
+  ariaLabel?: string;
+  /** Web external labeling element id — forwarded to the role="switch" node. */
+  ariaLabelledBy?: string;
   /**
    * Grown-target mode (SP-FIXED): when set, the role=switch frame is a
    * `frameHeight`-tall transparent target (44px in table cells) and the
@@ -316,13 +377,25 @@ function SwitchControl({
   hoverStyle,
   pressStyle,
   focusStyle,
-  focusVisibleStyle,
+  focusVisibleStyle: _focusVisibleStyle,
   accessibilityLabel,
   accessibilityHint,
+  ariaLabel,
+  ariaLabelledBy,
   cellTrack,
 }: SwitchControlProps) {
-  const { disabledState } = useResolvedKnobs();
-  // Travel distance for a 2:1 track (inner width − thumb ≈ thumb height).
+  if (isWeb) {
+    ensureKeyboardModalityTracking();
+    ensureSwitchKbRingCss();
+  }
+  const { disabledState, knobProps } = useResolvedKnobs();
+  const outlined = knobProps.outlined;
+  const trackOffFill = outlined ? "transparent" : formSwitchColors.track.off;
+  const trackOffBorder = formControlColors.boundary;
+  const thumbInset = switchThumbInset(thumbHeight);
+  const thumbSize = thumbHeight - thumbInset * 2;
+  const motion = resolveSwitchMotion(transition);
+  // Travel distance for a 2:1 track (inner width − thumb − gutters = thumb height).
   const dragDistance = thumbHeight;
   const [dragX, setDragX] = useState<number | null>(null);
   // Hold snapped thumb until the controlled `checked` prop catches up (avoids flash).
@@ -397,21 +470,61 @@ function SwitchControl({
   const restingX = displayChecked ? dragDistance : 0;
   const thumbX = dragX != null ? dragX : restingX;
   const canDrag = isWeb && !disabled && !readOnly;
+  const [kbFocus, setKbFocus] = useState(false);
+  useLayoutEffect(() => {
+    if (!isWeb) return;
+    const el = document.getElementById(id);
+    if (!el) return;
+    const apply = (node: HTMLElement | null, on: boolean) => {
+      if (!node?.style) return;
+      if (on) {
+        node.style.setProperty("outline-width", "2px", "important");
+        node.style.setProperty("outline-style", "solid", "important");
+        node.style.setProperty(
+          "outline-color",
+          "var(--outlineColor, var(--c-outlineColor, CanvasText))",
+          "important",
+        );
+        node.style.setProperty("outline-offset", "2px", "important");
+      } else {
+        node.style.removeProperty("outline-width");
+        node.style.removeProperty("outline-style");
+        node.style.removeProperty("outline-color");
+        node.style.removeProperty("outline-offset");
+      }
+    };
+    apply(el, kbFocus && !cellTrack);
+    apply(
+      el.querySelector(`.${SWITCH_KB_RING_CLASS}`) as HTMLElement | null,
+      kbFocus && !!cellTrack,
+    );
+  }, [kbFocus, cellTrack, id]);
+  const hoverSafe = stripOutlineFromState(hoverStyle);
+  const pressSafe = stripOutlineFromState(pressStyle);
+  const focusSafe = stripOutlineFromState(focusStyle);
   const {
     onPointerDown: switchPointerDown,
     onPress: switchPress,
+    onFocus: switchFocus,
+    onBlur: switchBlur,
+    className: switchClassName,
     ...restSwitchProps
   } = (switchProps || {}) as Record<string, any>;
+  const kbRingClass = kbFocus ? SWITCH_KB_RING_CLASS : undefined;
+  const frameClassName =
+    [switchClassName, !cellTrack ? kbRingClass : undefined].filter(Boolean).join(" ") || undefined;
 
   return (
     <StyledSwitch
       {...inputSurface}
-      transition={transition || "quick"}
+      transition={motion}
       size={sizeToken}
-      {...(hoverStyle && { hoverStyle })}
-      {...(pressStyle && { pressStyle })}
-      {...(focusStyle && { focusStyle })}
-      {...(focusVisibleStyle && { focusVisibleStyle })}
+      {...(hoverSafe && { hoverStyle: hoverSafe })}
+      {...(pressSafe && { pressStyle: pressSafe })}
+      {...(focusSafe && { focusStyle: { ...focusSafe } })}
+      focusVisibleStyle={{ outlineWidth: 0 }}
+      // createSwitch applies `activeStyle` last when checked — that is the
+      // ON=fill channel (LC-71), not CSS :active.
       activeStyle={{
         backgroundColor: formSwitchColors.track.on,
         borderColor: formSwitchColors.track.on,
@@ -426,6 +539,24 @@ function SwitchControl({
       disabled={disabled}
       id={id}
       checked={checked}
+      {...(cellTrack
+        ? undefined
+        : displayChecked
+          ? {
+              backgroundColor: formSwitchColors.track.on,
+              borderColor: formSwitchColors.track.on,
+            }
+          : {
+              backgroundColor: trackOffFill,
+              borderColor: trackOffBorder,
+            })}
+      {...(kbFocus ? { "data-kb-focus": "true" } : undefined)}
+      {...(frameClassName ? { className: frameClassName } : undefined)}
+      {...(cellTrack
+        ? { outlineWidth: 0 }
+        : kbFocus
+          ? ensureFocusVisibleRing()
+          : { outlineWidth: 0 })}
       // iOS: bare styled Views are not accessibility elements — without this
       // block the switch is invisible to VoiceOver (no name, role, or state).
       {...(!isWeb && {
@@ -437,8 +568,21 @@ function SwitchControl({
       })}
       {...(readOnly ? { pointerEvents: "none" as const } : undefined)}
       {...(readOnly ? { "aria-readonly": true } : undefined)}
+      // Top-level aria-label/aria-labelledby land AFTER restSwitchProps so
+      // the dedicated props win over the legacy switchProps escape hatch.
+      {...(ariaLabel ? { "aria-label": ariaLabel } : undefined)}
+      {...(ariaLabelledBy ? { "aria-labelledby": ariaLabelledBy } : undefined)}
       aria-required={required || undefined}
       aria-invalid={hasError || undefined}
+      onFocus={(e: any) => {
+        switchFocus?.(e);
+        if (wasKeyboardFocus()) setKbFocus(true);
+      }}
+      onBlur={(e: any) => {
+        setKbFocus(false);
+        switchBlur?.(e);
+        onBlur?.(e);
+      }}
       onCheckedChange={(val) => {
         if (disabled || readOnly) return;
         // After a drag, Tamagui still fires press→toggle; ignore that flip.
@@ -448,7 +592,6 @@ function SwitchControl({
         }
         onCheckedChange?.(val);
       }}
-      {...(onBlur ? { onBlur } : undefined)}
       onPointerDown={(e: any) => {
         switchPointerDown?.(e);
         if (!canDrag) return;
@@ -476,24 +619,26 @@ function SwitchControl({
           height={cellTrack.height}
           borderRadius={cellTrack.borderRadius}
           borderWidth={cellTrack.borderWidth}
-          borderColor={displayChecked ? formSwitchColors.track.on : formControlColors.border}
-          backgroundColor={displayChecked ? formSwitchColors.track.on : formSwitchColors.track.off}
-          transition={transition || "quick"}
+          borderColor={displayChecked ? formSwitchColors.track.on : trackOffBorder}
+          backgroundColor={displayChecked ? formSwitchColors.track.on : trackOffFill}
+          transition={motion}
           pointerEvents="none"
+          className={kbFocus ? SWITCH_KB_RING_CLASS : undefined}
+          {...(kbFocus ? ensureFocusVisibleRing() : { outlineWidth: 0 })}
         />
       )}
       {leftIcon && <StyledSwitch.Icon placement="left">{leftIcon}</StyledSwitch.Icon>}
       {rightIcon && <StyledSwitch.Icon placement="right">{rightIcon}</StyledSwitch.Icon>}
       <StyledSwitch.Thumb
         borderRadius={thumbRadius}
+        width={thumbSize}
+        height={thumbSize}
         // Own position so drag can override Tamagui's initialChecked alignSelf/x math.
         alignSelf="flex-start"
-        x={thumbX + (cellTrack ? cellTrack.borderWidth : 0)}
-        {...(cellTrack && {
-          y: (cellTrack.frameHeight - thumbHeight) / 2,
-        })}
+        x={thumbX + thumbInset + (cellTrack ? cellTrack.borderWidth : 0)}
+        y={cellTrack ? (cellTrack.frameHeight - thumbSize) / 2 : thumbInset}
         {...(thumbHandleColor ? { backgroundColor: thumbHandleColor } : undefined)}
-        transition={dragX != null ? "none" : transition || "quick"}
+        transition={dragX != null ? "none" : motion}
       />
     </StyledSwitch>
   );
@@ -524,6 +669,14 @@ export interface SwitchProps {
   onChange?: (checked: boolean) => void;
   onCheckedChange?: (checked: boolean) => void;
   onBlur?: (...args: any[]) => void;
+  /**
+   * Accessible name for the role="switch" control — use when there is no
+   * visible `label` (icon-only / externally-labeled toggles). Forwarded to
+   * the rendered switch node (web) and VoiceOver/TalkBack name (native).
+   */
+  "aria-label"?: string;
+  /** Id of an external element that labels the switch (web). */
+  "aria-labelledby"?: string;
   leftIcon?: ReactNode;
   rightIcon?: ReactNode;
   switchProps?: Omit<
@@ -563,6 +716,8 @@ export function Switch({
   onChange,
   onCheckedChange,
   onBlur,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
   leftIcon,
   rightIcon,
   switchProps,
@@ -596,20 +751,25 @@ export function Switch({
 
   // Coordinated geometry (LC-10): ONE size token drives the control (track,
   // thumb) AND the row slot, so an explicit `size` prop can never make the
-  // control outgrow its own row.
+  // control outgrow its own row. Track = recipe height (LC-75); the thumb
+  // rides inside it.
   const sizeToken = (size ?? knobProps.sizeToken) as SizeTokens;
   const borderWidth = knobProps.borderRadius.borderWidth ?? 1;
-  const thumbHeight = getSwitchHeight(sizeToken);
+  const thumbHeight = getSwitchThumbHeight(sizeToken, borderWidth);
   const trackHeight = thumbHeight + borderWidth * 2;
   // Grown-target mode (SP-FIXED): table cells always grow the pressable
-  // frame to 44px; standalone consumers opt in via `minTargetHeight`. The
-  // row slot floors at the frame height so grown targets never overlap
-  // sibling rows.
+  // frame to 44px; standalone consumers opt in via `minTargetHeight`; touch
+  // surfaces get the LC-77 44px floor on the PRESSABLE frame while the
+  // painted track keeps the desktop recipe height (same split as Select:
+  // floor on the target, never on painted chrome). The row slot floors at
+  // the frame height so grown targets never overlap sibling rows.
   const targetHeight = inTableCell
     ? SWITCH_CELL_TARGET_HEIGHT
     : minTargetHeight !== undefined
       ? Math.max(minTargetHeight, trackHeight)
-      : undefined;
+      : isTouchSurface() && trackHeight < TOUCH_HEIGHT_FLOOR
+        ? TOUCH_HEIGHT_FLOOR
+        : undefined;
   const grownTarget = targetHeight !== undefined;
   const rowMinHeight = !inTableCell && grownTarget ? targetHeight : undefined;
 
@@ -677,23 +837,33 @@ export function Switch({
         // (invisible) grown frame transparent in the checked state too.
         activeStyle: { backgroundColor: "transparent", borderColor: "transparent" },
       };
+    } else if (switchChecked) {
+      frameProps = {
+        ...frameProps,
+        backgroundColor: formSwitchColors.track.on,
+        borderColor: formSwitchColors.track.on,
+      };
+    } else {
+      frameProps = {
+        ...frameProps,
+        backgroundColor: knobProps.outlined ? "transparent" : formSwitchColors.track.off,
+        borderColor: formControlColors.boundary,
+      };
     }
 
-    // Checked tracks keep the accent fill AND border through hover/press/
-    // focus — the control knobs' neutral state-layer ($backgroundHover/
-    // $backgroundPress) must never paint over the active accent track
-    // (LC-05 ONE-EMPHASIS), so the checked fill is re-applied last.
-    const stateBorderColor = switchChecked ? formSwitchColors.track.on : formControlColors.border;
+    // Checked tracks keep the accent FILL through hover/press/focus — the
+    // control knobs' neutral state-layer ($backgroundHover/$backgroundPress)
+    // must never paint over the active accent track (LC-05 / LC-71 on=fill).
+    const stateBorderColor = switchChecked ? formSwitchColors.track.on : formControlColors.boundary;
     const checkedTrackFill = switchChecked
       ? {
           backgroundColor: formSwitchColors.track.on,
           borderColor: formSwitchColors.track.on,
         }
       : undefined;
-    const hoverKnob = stripRadiusFromStateProps(control.hoverKnobProps);
-    const pressKnob = stripRadiusFromStateProps(control.pressKnobProps);
-    const focusKnob = stripRadiusFromStateProps(control.focusKnobProps);
-    const focusVisibleKnob = stripRadiusFromStateProps(control.focusVisibleKnobProps);
+    const hoverKnob = stripOutlineFromState(stripRadiusFromStateProps(control.hoverKnobProps));
+    const pressKnob = stripOutlineFromState(stripRadiusFromStateProps(control.pressKnobProps));
+    const focusKnob = stripOutlineFromState(stripRadiusFromStateProps(control.focusKnobProps));
 
     const switchElement = (
       <SwitchControl
@@ -712,7 +882,7 @@ export function Switch({
         sizeToken={sizeToken}
         thumbHeight={thumbHeight}
         thumbRadius={thumbRadius}
-        transition={(knobProps.transition as string | undefined) || "quick"}
+        transition={resolveSwitchMotion(knobProps.transition as string | undefined)}
         frameProps={frameProps}
         switchProps={switchProps}
         leftIcon={leftIcon}
@@ -720,22 +890,22 @@ export function Switch({
         inputSurface={grownTarget ? {} : knobProps.inputSurface}
         cellTrack={cellTrack}
         accessibilityLabel={
-          typeof label === "string" ? `${label}${required ? " *" : ""}` : undefined
+          typeof label === "string" ? `${label}${required ? " *" : ""}` : ariaLabel
         }
         accessibilityHint={errorMessage ?? helperText}
+        ariaLabel={ariaLabel}
+        ariaLabelledBy={ariaLabelledBy}
         {...(hoverKnob && {
-          hoverStyle: { borderColor: stateBorderColor, ...hoverKnob, ...checkedTrackFill },
+          hoverStyle: { ...hoverKnob, borderColor: stateBorderColor, ...checkedTrackFill },
         })}
         {...(pressKnob && {
-          pressStyle: { borderColor: stateBorderColor, ...pressKnob, ...checkedTrackFill },
+          pressStyle: { ...pressKnob, borderColor: stateBorderColor, ...checkedTrackFill },
         })}
         {...(focusKnob && {
-          focusStyle: { borderColor: stateBorderColor, ...focusKnob, ...checkedTrackFill },
-        })}
-        {...(focusVisibleKnob && {
-          focusVisibleStyle: {
+          focusStyle: {
+            outlineWidth: 0,
+            ...focusKnob,
             borderColor: stateBorderColor,
-            ...focusVisibleKnob,
             ...checkedTrackFill,
           },
         })}
@@ -772,7 +942,14 @@ export function Switch({
             height={trackHeight}
             borderRadius={isSquare ? 0 : 1000}
           />
-          {label && <Skeleton variant="text" width={96} height={14} />}
+          {label && (
+            <Skeleton
+              variant="text"
+              width={96}
+              // Label bone tracks the recipe type channel (LC-20 mirrors anatomy).
+              height={sizeRecipeForToken(String(sizeToken)).fontSize}
+            />
+          )}
         </XStack>
       </FieldLayout>
     );

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

@@ -239,6 +239,44 @@ describe("TextArea", () => {
     });
   });
 
+  describe("LC-71 ring anatomy and character count", () => {
+    it("paints the ring class on the Box; the inner textarea is mp-input-area", () => {
+      const result = renderWithProviders(<TextArea label="Notes" defaultValue="hello" />);
+      const textarea = result.getTextArea() as HTMLTextAreaElement;
+      expect(textarea?.className).toMatch(/mp-input-area/);
+      expect(textarea?.closest(".mp-composite-ring")).toBeTruthy();
+      expect(textarea?.getAttribute("aria-multiline")).toBe("true");
+    });
+
+    it("surfaces a live character count when maxLength is set, announced only while focused", async () => {
+      const result = renderWithProviders(
+        <TextArea label="Notes" id="notes-count" maxLength={20} defaultValue="hello" />,
+      );
+      const textarea = result.getTextArea() as HTMLTextAreaElement;
+      const count = result.container.querySelector("#notes-count-count");
+      expect(count?.textContent).toBe("5/20");
+      expect(count?.getAttribute("aria-live")).toBe("off");
+      expect(textarea?.getAttribute("aria-describedby") ?? "").toContain("notes-count-count");
+
+      await act(async () => {
+        if (textarea) fireEvent.focus(textarea);
+      });
+      expect(count?.getAttribute("aria-live")).toBe("polite");
+
+      await act(async () => {
+        if (textarea) fireEvent.blur(textarea);
+      });
+      expect(count?.getAttribute("aria-live")).toBe("off");
+    });
+
+    it("does not render a count when showCount is explicitly false", () => {
+      const result = renderWithProviders(
+        <TextArea label="Notes" maxLength={20} showCount={false} defaultValue="hello" />,
+      );
+      expect(result.container.textContent).not.toContain("5/20");
+    });
+  });
+
   describe("with useForm hook directly", () => {
     it("should handle form submission with useForm", async () => {
       const onSubmitMock = vi.fn();