@multiplatform.one/forms 7.34.4 → 7.36.0

package/src/MediaPicker/pickMedia.ts

@@ -0,0 +1,152 @@
+import { imageMime, imagePayload } from "./payload";
+import { MediaPickerError, type MediaPickOptions, type PickedMedia } from "./types";
+
+let active = false;
+
+export function pickMedia(
+  options: MediaPickOptions,
+  signal?: AbortSignal,
+): Promise<PickedMedia | null> {
+  if (signal?.aborted) return Promise.resolve(null);
+  if (active)
+    return Promise.reject(
+      new MediaPickerError("busy", "An image picker is already open.", options.source),
+    );
+  if (typeof document === "undefined" || !document.body) {
+    return Promise.reject(
+      new MediaPickerError("unavailable", "Image selection needs a browser.", options.source),
+    );
+  }
+  if (navigator.userActivation?.isActive === false) {
+    return Promise.reject(
+      new MediaPickerError(
+        "permission-denied",
+        "Open the image picker from a user action.",
+        options.source,
+      ),
+    );
+  }
+  active = true;
+  return new Promise((resolve, reject) => {
+    const input = document.createElement("input");
+    input.type = "file";
+    input.accept = "image/*";
+    input.hidden = true;
+    if (options.source === "camera") input.setAttribute("capture", "environment");
+    let settled = false;
+    let reading = false;
+    let timer: ReturnType<typeof setTimeout> | undefined;
+    let reader: FileReader | undefined;
+    let image: HTMLImageElement | undefined;
+
+    const finish = (result: PickedMedia | null, error?: unknown) => {
+      if (settled) return;
+      settled = true;
+      active = false;
+      clearTimeout(timer);
+      input.remove();
+      input.removeEventListener("change", change);
+      input.removeEventListener("cancel", cancel);
+      window.removeEventListener("focus", focus);
+      signal?.removeEventListener("abort", cancel);
+      if (reader) {
+        reader.onload = reader.onerror = reader.onabort = null;
+        if (reader.readyState === FileReader.LOADING) reader.abort();
+      }
+      if (image) image.onload = image.onerror = null;
+      if (error)
+        reject(
+          error instanceof MediaPickerError
+            ? error
+            : new MediaPickerError(
+                "read-failed",
+                "The image could not be read.",
+                options.source,
+                undefined,
+                { cause: error },
+              ),
+        );
+      else resolve(result);
+    };
+    const cancel = () => finish(null);
+    const focus = () => {
+      clearTimeout(timer);
+      timer = setTimeout(() => {
+        if (!reading && !input.files?.length) cancel();
+      }, 1000);
+    };
+    const change = () => {
+      const file = input.files?.[0];
+      if (!file) {
+        cancel();
+        return;
+      }
+      reading = true;
+      const mimeType = imageMime(file.type, file.name);
+      if (!mimeType.startsWith("image/")) {
+        finish(
+          null,
+          new MediaPickerError("invalid-image", "Choose an image file.", options.source),
+        );
+        return;
+      }
+      reader = new FileReader();
+      reader.onerror = () => finish(null, reader?.error ?? new Error("Image read failed"));
+      reader.onabort = cancel;
+      reader.onload = () => {
+        const rawUri = String(reader?.result ?? "");
+        const base64 = rawUri.slice(rawUri.indexOf(",") + 1);
+        const uri = `data:${mimeType};base64,${base64}`;
+        image = new Image();
+        image.onerror = () =>
+          finish(
+            null,
+            new MediaPickerError(
+              "invalid-image",
+              "This browser cannot decode the image.",
+              options.source,
+            ),
+          );
+        image.onload = () => {
+          try {
+            finish(
+              imagePayload(
+                { uri, mimeType, width: image!.naturalWidth, height: image!.naturalHeight },
+                base64,
+                options,
+              ),
+            );
+          } catch (error) {
+            finish(null, error);
+          }
+        };
+        image.src = uri;
+      };
+      try {
+        reader.readAsDataURL(file);
+      } catch (error) {
+        finish(null, error);
+      }
+    };
+
+    input.addEventListener("change", change);
+    input.addEventListener("cancel", cancel);
+    signal?.addEventListener("abort", cancel, { once: true });
+    window.addEventListener("focus", focus);
+    try {
+      document.body.appendChild(input);
+      input.click();
+    } catch (error) {
+      finish(
+        null,
+        new MediaPickerError(
+          "permission-denied",
+          "The browser refused to open the image picker.",
+          options.source,
+          undefined,
+          { cause: error },
+        ),
+      );
+    }
+  });
+}

package/src/MediaPicker/types.ts

@@ -0,0 +1,43 @@
+export type MediaSource = "camera" | "library";
+
+export interface MediaPickOptions {
+  source: MediaSource;
+  base64?: boolean;
+  bytes?: boolean;
+}
+
+export interface PickedMedia {
+  uri: string;
+  mimeType: string;
+  width: number;
+  height: number;
+  base64?: string;
+  bytes?: Uint8Array;
+}
+
+export type MediaPickerErrorCode =
+  | "permission-denied"
+  | "unavailable"
+  | "read-failed"
+  | "invalid-image"
+  | "busy";
+
+export class MediaPickerError extends Error {
+  readonly name = "MediaPickerError";
+  readonly code: MediaPickerErrorCode;
+  readonly source: MediaSource;
+  readonly canAskAgain?: boolean;
+
+  constructor(
+    code: MediaPickerErrorCode,
+    message: string,
+    source: MediaSource,
+    canAskAgain?: boolean,
+    options?: ErrorOptions,
+  ) {
+    super(message, options);
+    this.code = code;
+    this.source = source;
+    this.canAskAgain = canAskAgain;
+  }
+}

package/src/MediaPicker/useMediaPicker.spec.tsx

@@ -0,0 +1,48 @@
+import { act, renderHook } from "@testing-library/react";
+import { beforeEach, expect, it, vi } from "vitest";
+import { pickMedia } from "./pickMedia";
+import { useMediaPicker } from "./useMediaPicker";
+
+vi.mock("./pickMedia", () => ({ pickMedia: vi.fn() }));
+beforeEach(() => vi.resetAllMocks());
+
+it("tracks pending and rejects overlapping picks", async () => {
+  let finish!: (result: null) => void;
+  vi.mocked(pickMedia).mockImplementation(
+    () =>
+      new Promise((resolve) => {
+        finish = resolve;
+      }),
+  );
+  const hook = renderHook(() => useMediaPicker());
+  let result!: Promise<unknown>;
+  act(() => {
+    result = hook.result.current.pick({ source: "library" });
+  });
+  expect(hook.result.current.pending).toBe(true);
+  await expect(hook.result.current.pick({ source: "camera" })).rejects.toMatchObject({
+    code: "busy",
+  });
+  await act(async () => {
+    finish(null);
+    await result;
+  });
+  expect(hook.result.current.pending).toBe(false);
+  hook.unmount();
+});
+
+it("aborts a pending pick when unmounted", async () => {
+  let signal: AbortSignal | undefined;
+  vi.mocked(pickMedia).mockImplementation((_options, abortSignal) => {
+    signal = abortSignal;
+    return new Promise((resolve) => abortSignal!.addEventListener("abort", () => resolve(null)));
+  });
+  const hook = renderHook(() => useMediaPicker());
+  let result!: Promise<unknown>;
+  act(() => {
+    result = hook.result.current.pick({ source: "library" });
+  });
+  hook.unmount();
+  expect(signal?.aborted).toBe(true);
+  expect(await result).toBeNull();
+});

package/src/MediaPicker/useMediaPicker.ts

@@ -0,0 +1,33 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import { pickMedia } from "./pickMedia";
+import { MediaPickerError, type MediaPickOptions, type PickedMedia } from "./types";
+
+export function useMediaPicker() {
+  const active = useRef<AbortController | null>(null);
+  const mounted = useRef(true);
+  const [pending, setPending] = useState(false);
+  useEffect(() => {
+    mounted.current = true;
+    return () => {
+      mounted.current = false;
+      active.current?.abort();
+    };
+  }, []);
+
+  const pick = useCallback((options: MediaPickOptions): Promise<PickedMedia | null> => {
+    if (!mounted.current) return Promise.resolve(null);
+    if (active.current)
+      return Promise.reject(
+        new MediaPickerError("busy", "An image picker is already open.", options.source),
+      );
+    const controller = new AbortController();
+    active.current = controller;
+    setPending(true);
+    return pickMedia(options, controller.signal).finally(() => {
+      active.current = null;
+      if (mounted.current) setPending(false);
+    });
+  }, []);
+
+  return { pick, pending };
+}

package/src/Skeleton/Skeleton.stories.tsx

@@ -59,7 +59,7 @@ export const Variants: Story = {
  */
 export const TextLines: Story = {
   render: () => (
-    <YStack gap="$6" width={320}>
+    <YStack gap="$6" width={320} maxWidth="100%">
       <YStack gap="$2">
         <Paragraph size="$2">one line</Paragraph>
         <SkeletonText />
@@ -90,7 +90,7 @@ export const Circles: Story = {
 /** What a loading row actually looks like: avatar, name, two lines of body. */
 export const LoadingRow: Story = {
   render: () => (
-    <XStack gap="$3" width={360} alignItems="flex-start">
+    <XStack gap="$3" width={360} maxWidth="100%" alignItems="flex-start">
       <SkeletonCircle size={40} />
       <YStack flex={1} gap="$2">
         <Skeleton variant="text" width="45%" />

package/src/Skeleton/index.tsx

@@ -1,10 +1,24 @@
+import { createContext, useContext, type ReactNode } from "react";
 import { radiusClassProps, sizeRecipeForToken, useResolvedKnobs } from "@multiplatform.one/theme";
 import type { GetProps } from "tamagui";
 import { View, styled, isWeb } from "tamagui";
+import { useTranslation } from "../shared/i18n";
+
+/**
+ * The one Skeleton. `@multiplatform.one/components` re-exports this module,
+ * so a loading Button, a field skeleton and a screen placeholder paint the
+ * same bone with the same motion.
+ *
+ * Motion: one keyframe (`mp-skeleton-pulse`), mounted once per document by
+ * the first bone. It runs only while the animation knob resolves a
+ * transition; `prefers-reduced-motion` resolves none (useResolvedKnobs), and
+ * the stylesheet's media query also stops a bone the server rendered pulsing.
+ */
 
 // ── Types ─────────────────────────────────────────────────────
 
 export type SkeletonVariant = "text" | "circular" | "rectangular" | "rounded";
+export type SkeletonTextSize = "body" | "display";
 
 export interface SkeletonProps extends Omit<GetProps<typeof SkeletonFrame>, "variant"> {
   variant?: SkeletonVariant;
@@ -14,6 +28,8 @@ export interface SkeletonProps extends Omit<GetProps<typeof SkeletonFrame>, "var
   height?: number | string;
   /** Whether to animate the skeleton */
   animate?: boolean;
+  /** Accessible name for a root loading region. Ignored on decorative bones. */
+  label?: string;
 }
 
 // ── Styled component ──────────────────────────────────────────
@@ -21,12 +37,14 @@ export interface SkeletonProps extends Omit<GetProps<typeof SkeletonFrame>, "var
 const SkeletonFrame = styled(View, {
   name: "Skeleton",
   backgroundColor: "$color5",
+  overflow: "hidden",
+  pointerEvents: "none",
+  flexShrink: 0,
 
   variants: {
     variant: {
       text: {
         borderRadius: "$2",
-        height: 16,
       },
       circular: {
         borderRadius: 1000,
@@ -48,34 +66,41 @@ const SkeletonFrame = styled(View, {
 // Size-knob geometry (spec: Skeleton block/text/circle scale with
 // `sizeToken`), DERIVED from the generated size recipe (LC-80): a text bone
 // is the token's recipe fontSize + 2px of line-box rounding (medium keeps
-// the previous 16px line), and a circle bone is the medallion one height
-// step above the control ramp (medium keeps the previous 40px circle).
-const SKELETON_SIZE_TOKENS = ["$3", "$4", "$5"] as const;
+// the previous 16px line), display is twice that, and a circle bone is the
+// medallion one height step above the control ramp.
+const SKELETON_SIZE_TOKENS = ["$3", "$4", "$true", "$5"] as const;
 const skeletonCircleTokenUp: Record<string, string> = { $3: "$4", $4: "$5", $5: "$6" };
 
-function skeletonTextHeight(sizeToken: string): number | undefined {
-  if (!(SKELETON_SIZE_TOKENS as readonly string[]).includes(sizeToken)) return undefined;
-  return sizeRecipeForToken(sizeToken).fontSize + 2;
+function skeletonTextHeight(sizeToken: string, textSize: SkeletonTextSize = "body"): number {
+  const known = (SKELETON_SIZE_TOKENS as readonly string[]).includes(sizeToken) ? sizeToken : "$4";
+  const body = sizeRecipeForToken(known).fontSize + 2;
+  return textSize === "display" ? body * 2 : body;
 }
 
 function skeletonCircleSize(sizeToken: string): number {
   return sizeRecipeForToken(skeletonCircleTokenUp[sizeToken] ?? "$5").height;
 }
-// SP-GAP: text-line gap follows the space knob; medium keeps $2.
-const skeletonGapMap: Record<string, string> = { small: "$1", medium: "$2", large: "$3" };
 
-// Self-contained pulse keyframes: the app root layout injects the same rule,
-// but Skeleton must not depend on a particular host (Storybook, tests, docs).
+// One keyframe, mounted once. The reduced-motion and forced-colors rules ride
+// the same sheet so a bone never pulses for a user who asked for stillness.
 const PULSE_STYLE_ID = "__mp-skeleton-pulse";
+const PULSE_ANIMATION = "mp-skeleton-pulse 1.5s ease-in-out infinite";
 function ensurePulseKeyframes() {
   if (!isWeb || typeof document === "undefined") return;
   if (document.getElementById(PULSE_STYLE_ID)) return;
   const style = document.createElement("style");
   style.id = PULSE_STYLE_ID;
-  style.textContent = "@keyframes skeleton-pulse{0%{opacity:1}50%{opacity:0.4}100%{opacity:1}}";
+  style.textContent = [
+    "@keyframes mp-skeleton-pulse{0%{opacity:1}50%{opacity:0.4}100%{opacity:1}}",
+    "@media (prefers-reduced-motion:reduce){.mp-skeleton-bone{animation:none!important}}",
+    "@media (forced-colors:active){.mp-skeleton-bone{outline:1px solid transparent;outline-offset:-1px}}",
+  ].join("");
   document.head.appendChild(style);
 }
 
+/** False inside a SkeletonText / SkeletonGroup: the region announces once. */
+const AnnounceCtx = createContext(true);
+
 // ── Skeleton Component ────────────────────────────────────────
 
 export function Skeleton({
@@ -84,42 +109,68 @@ export function Skeleton({
   height,
   animate = true,
   style,
+  label,
+  className,
   ...props
 }: SkeletonProps) {
-  const { knobProps } = useResolvedKnobs();
-  // Pulse only when animating is on AND the animation knob is not "none"
-  // (knobProps.transition resolves to undefined at animation:none).
-  const pulsing = animate && knobProps.transition !== undefined;
-  if (pulsing) ensurePulseKeyframes();
-
-  // Merge pulse last into `style` so a consumer style prop cannot kill the
-  // animation (LC-20: animation:none stops the pulse via the knob; otherwise
-  // it must run).
+  const { t } = useTranslation();
+  const { knobProps } = useResolvedKnobs({ component: "Skeleton" });
+  const shouldAnnounce = useContext(AnnounceCtx);
+  // Pulse only when animating is on AND the animation knob resolves a
+  // transition (undefined at animation:none and under prefers-reduced-motion).
+  const pulsing = Boolean(animate && knobProps.motion.control.transition);
+  if (isWeb) ensurePulseKeyframes();
+
+  const decorative = props["aria-hidden"] === true || !shouldAnnounce;
+  // Corner smoothing is an R-SCALE arc: circular is R-PILL (a squircle would
+  // break 1:1) and rectangular is square by variant.
+  const smoothingClass =
+    variant === "text" || variant === "rounded" ? knobProps.borderRadius.className : undefined;
+  const boneClass = [
+    "mp-skeleton-bone",
+    pulsing ? "mp-skeleton-pulse" : "mp-skeleton-static",
+    smoothingClass,
+    className,
+  ]
+    .filter(Boolean)
+    .join(" ");
+
+  // Merge the pulse last into `style` so a consumer style cannot kill it
+  // (LC-20: animation:none stops the pulse via the knob; otherwise it runs).
   const mergedStyle =
-    isWeb && pulsing
-      ? { ...(style as object), animation: "skeleton-pulse 1.5s ease-in-out infinite" }
-      : style;
+    isWeb && pulsing ? { ...(style as object), animation: PULSE_ANIMATION } : style;
+
+  const textHeight = variant === "text" ? skeletonTextHeight(knobProps.sizeToken) : undefined;
+  const resolvedHeight = height ?? textHeight;
 
   return (
     <SkeletonFrame
       variant={variant}
       width={width}
-      // Text lines follow the size knob; explicit height ejects.
-      height={height ?? (variant === "text" ? skeletonTextHeight(knobProps.sizeToken) : undefined)}
-      // Radius only — a skeleton is a flat blob, it never draws the knob's border.
-      // Consumers that clamp (Checkbox/Radio/Switch) pass an explicit borderRadius
-      // which wins via ...props below.
-      // Text lines and rounded blocks ride DEFAULT (knobs-enumerated Part 2b,
-      // MPO-56): the token at every stop, the paint capping at h/2.
+      height={resolvedHeight}
+      // Radius only — a skeleton is a flat blob, it never draws the knob's
+      // border. Text lines and rounded blocks ride DEFAULT (MPO-56): the token
+      // at every stop. Consumers that clamp pass borderRadius via ...props.
       {...(variant === "rounded" || variant === "text"
         ? { borderRadius: knobProps.borderRadius.borderRadius }
         : undefined)}
-      // R-PILL (spec Skeleton "circle"): the circular variant stays 1:1 and
-      // round at every radius value, so it declares the class the
-      // `radius:none` sweep licenses it under (D-09 / LC-60).
+      // R-PILL (spec Skeleton "circle"): stays 1:1 and round at every radius.
       {...(variant === "circular" ? radiusClassProps("R-PILL", "SkeletonCircle") : undefined)}
       {...props}
+      {...(isWeb ? { className: boneClass } : undefined)}
       {...(mergedStyle ? { style: mergedStyle } : undefined)}
+      pointerEvents="none"
+      data-skeleton=""
+      data-skeleton-variant={variant}
+      data-animate={pulsing ? "true" : "false"}
+      data-width={width != null ? String(width) : undefined}
+      data-height={resolvedHeight != null ? String(resolvedHeight) : undefined}
+      aria-hidden={decorative ? true : undefined}
+      role={decorative ? undefined : "status"}
+      aria-busy={decorative ? undefined : true}
+      aria-live={decorative ? undefined : "polite"}
+      aria-label={decorative ? undefined : (label ?? t("Loading"))}
+      accessibilityElementsHidden={decorative}
     />
   );
 }
@@ -130,43 +181,111 @@ export function SkeletonText({
   lines = 1,
   gap: gapProp,
   lastLineWidth = "70%",
+  size: textSize = "body",
+  label,
+  width,
+  height,
+  animate,
+  style,
+  variant: _variant,
   ...props
 }: SkeletonProps & {
   lines?: number;
   gap?: string | number;
   lastLineWidth?: string | number;
+  size?: SkeletonTextSize;
 }) {
-  const { knobProps } = useResolvedKnobs();
-  const gap = gapProp ?? skeletonGapMap[knobProps.space] ?? "$2";
-  if (lines === 1) {
-    return <Skeleton variant="text" width={lastLineWidth} {...props} />;
-  }
+  const { t } = useTranslation();
+  const { knobProps } = useResolvedKnobs({ component: "Skeleton" });
+  const shouldAnnounce = useContext(AnnounceCtx);
+  const count = Math.max(0, Math.floor(Number(lines) || 0));
+  const lineHeight = height ?? skeletonTextHeight(knobProps.sizeToken, textSize);
+  // SP-GAP: the text-line gap is the tight role (gapSm) at every size token.
+  const gap = gapProp ?? knobProps.gapSm.gap;
+  const decorative = !shouldAnnounce;
+
+  if (count === 0) return null;
 
   return (
-    <View gap={gap}>
-      {Array.from({ length: lines }).map((_, i) => (
-        <Skeleton
-          key={i}
-          variant="text"
-          width={i === lines - 1 ? lastLineWidth : "100%"}
-          {...props}
-        />
-      ))}
-    </View>
+    <AnnounceCtx.Provider value={false}>
+      <View
+        {...props}
+        width={width ?? "100%"}
+        gap={gap}
+        data-skeleton-text=""
+        data-lines={String(count)}
+        aria-hidden={decorative ? true : undefined}
+        role={decorative ? undefined : "status"}
+        aria-busy={decorative ? undefined : true}
+        aria-live={decorative ? undefined : "polite"}
+        aria-label={decorative ? undefined : (label ?? t("Loading"))}
+      >
+        {Array.from({ length: count }, (_, i) => (
+          <Skeleton
+            key={i}
+            variant="text"
+            animate={animate}
+            style={style}
+            height={lineHeight}
+            width={
+              count === 1 ? (width ?? lastLineWidth) : i === count - 1 ? lastLineWidth : "100%"
+            }
+          />
+        ))}
+      </View>
+    </AnnounceCtx.Provider>
   );
 }
 
 // ── Skeleton.Circle - for avatar placeholder ──────────────────
 
-export function SkeletonCircle({ size: sizeProp, ...props }: SkeletonProps & { size?: number }) {
-  const { knobProps } = useResolvedKnobs();
-  const size = sizeProp ?? skeletonCircleSize(knobProps.sizeToken);
-  return <Skeleton variant="circular" width={size} height={size} {...props} />;
+export function SkeletonCircle({
+  size: sizeProp,
+  label,
+  ...props
+}: SkeletonProps & { size?: number }) {
+  const { knobProps } = useResolvedKnobs({ component: "Skeleton" });
+  const diameter = Math.max(0, sizeProp ?? skeletonCircleSize(knobProps.sizeToken));
+  return (
+    <Skeleton
+      variant="circular"
+      label={label}
+      width={diameter}
+      height={diameter}
+      {...props}
+      data-diameter={String(diameter)}
+    />
+  );
+}
+
+// ── Skeleton.Group - one announcement for a composed placeholder ──
+
+export function SkeletonGroup({
+  children,
+  label,
+  ...props
+}: GetProps<typeof View> & { children?: ReactNode; label?: string }) {
+  const { t } = useTranslation();
+  return (
+    <AnnounceCtx.Provider value={false}>
+      <View
+        {...props}
+        role="status"
+        aria-busy={true}
+        aria-live="polite"
+        aria-label={label ?? t("Loading")}
+        data-skeleton-group=""
+      >
+        {children}
+      </View>
+    </AnnounceCtx.Provider>
+  );
 }
 
 // ── Attach sub-components ─────────────────────────────────────
 
 Skeleton.Text = SkeletonText;
 Skeleton.Circle = SkeletonCircle;
+Skeleton.Group = SkeletonGroup;
 
 export type SkeletonFrameProps = GetProps<typeof SkeletonFrame>;

package/src/Skeleton/skeletonStories.spec.tsx

@@ -1,7 +1,7 @@
 /**
  * Mounts every Forms/Skeleton story and asserts what it exists to show. The
  * theme hooks stay REAL: text-bone height comes from the size recipe and the
- * pulse gates on knobProps.transition, so a stub would measure neither.
+ * pulse gates on knobProps.motion.control.transition, so a stub would measure neither.
  *
  * Geometry is read off the CLASS, not `style`. Tamagui compiles width, height
  * and radius into atomic classes (`_w-240px`, `_w-7037` for 70%), and only the

package/src/Spinner/Spinner.spec.tsx

@@ -4,7 +4,7 @@
 
 import { cleanup } from "@testing-library/react";
 import { renderWithProviders } from "@multiplatform.one/test-utils";
-import { Preset } from "@multiplatform.one/theme";
+import { Preset, Surface } from "@multiplatform.one/theme";
 import { afterEach, describe, expect, it } from "vitest";
 import { Spinner } from "./index";
 
@@ -42,10 +42,10 @@ describe("Spinner", () => {
 
   it("maps explicit small/large onto the shared size-token scale", () => {
     const small = renderWithProviders(<Spinner size="small" />);
-    expect(status(small.container).getAttribute("data-size")).toBe("$1");
+    expect(status(small.container).getAttribute("data-size-token")).toBe("$1");
     cleanup();
     const large = renderWithProviders(<Spinner size="large" />);
-    expect(status(large.container).getAttribute("data-size")).toBe("$3");
+    expect(status(large.container).getAttribute("data-size-token")).toBe("$3");
   });
 
   it("publishes data-animation=none when the animation knob is none", () => {
@@ -64,17 +64,17 @@ describe("Spinner", () => {
 
   it("follows the size knob when size is omitted", () => {
     const small = renderWithProviders(
-      <Preset overrides={{ size: "small" }}>
+      <Surface size="$3">
         <Spinner />
-      </Preset>,
+      </Surface>,
     );
-    expect(status(small.container).getAttribute("data-size")).toBe("$3");
+    expect(status(small.container).getAttribute("data-size-token")).toBe("$3");
     cleanup();
     const large = renderWithProviders(
-      <Preset overrides={{ size: "large" }}>
+      <Surface size="$5">
         <Spinner />
-      </Preset>,
+      </Surface>,
     );
-    expect(status(large.container).getAttribute("data-size")).toBe("$5");
+    expect(status(large.container).getAttribute("data-size-token")).toBe("$5");
   });
 });