@multiplatform.one/forms 7.6.3 → 7.7.1

package/src/Skeleton/skeletonStories.spec.tsx

@@ -0,0 +1,107 @@
+/**
+ * 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.
+ *
+ * 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
+ * pulse stays an inline style — so `el.style.width` is empty on every bone.
+ */
+import { cleanup } from "@testing-library/react";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import type { ReactElement } from "react";
+import { afterEach, describe, expect, it } from "vitest";
+
+import * as storiesModule from "./Skeleton.stories";
+
+afterEach(cleanup);
+
+const meta = storiesModule.default;
+const { Basic, Variants, TextLines, Circles, LoadingRow, MotionOff, RadiusKnob } = storiesModule;
+
+type StoryLike = { render?: (args: Record<string, unknown>) => ReactElement };
+
+function mount(story: StoryLike) {
+  if (!story.render) throw new Error("story has no render");
+  return renderWithProviders(story.render({ ...(meta.args as Record<string, unknown>) }));
+}
+
+/** Every bone is a SkeletonFrame, which Tamagui names `is_Skeleton`. */
+function bones(container: HTMLElement): HTMLElement[] {
+  return Array.from(container.querySelectorAll<HTMLElement>(".is_Skeleton"));
+}
+
+const classesOf = (el: HTMLElement) => (el.getAttribute("class") ?? "").split(" ");
+const widthClass = (el: HTMLElement) => classesOf(el).find((c) => c.startsWith("_w-"));
+const heightClass = (el: HTMLElement) => classesOf(el).find((c) => c.startsWith("_h-"));
+
+const stories = { Basic, Variants, TextLines, Circles, LoadingRow, MotionOff, RadiusKnob } as const;
+
+describe("Forms/Skeleton stories", () => {
+  it("files under a Forms title so the gallery buckets it with the fields it fills in for", () => {
+    expect(meta.title).toBe("Forms/Skeleton");
+  });
+
+  it.each(Object.entries(stories))("%s mounts at least one bone", (_name, story) => {
+    expect(bones(mount(story as StoryLike).container).length).toBeGreaterThan(0);
+  });
+
+  it("Basic paints one bone at the meta width", () => {
+    const painted = bones(mount(Basic as StoryLike).container);
+    expect(painted.length).toBe(1);
+    expect(widthClass(painted[0])).toBe("_w-240px");
+  });
+
+  it("Variants shows all four, and the circular one is 1:1", () => {
+    const { container, getByText } = mount(Variants as StoryLike);
+    for (const name of ["text", "rounded", "rectangular", "circular"]) {
+      expect(getByText(name)).toBeTruthy();
+    }
+    const square = bones(container).find(
+      (el) => widthClass(el) === "_w-48px" && heightClass(el) === "_h-48px",
+    );
+    expect(square).toBeTruthy();
+  });
+
+  it("TextLines shortens the last line so a block reads as prose", () => {
+    const { container, getByText } = mount(TextLines as StoryLike);
+    expect(getByText("three lines, last at 70%")).toBeTruthy();
+    const widths = bones(container).map(widthClass);
+    // 70% and 40% are the two lastLineWidth values; 100% is every other line.
+    expect(widths).toContain("_w-7037");
+    expect(widths).toContain("_w-4037");
+    expect(widths).toContain("_w-10037");
+  });
+
+  it("Circles renders three, two of them at explicit sizes", () => {
+    const painted = bones(mount(Circles as StoryLike).container);
+    expect(painted.length).toBe(3);
+    const widths = painted.map(widthClass);
+    expect(widths).toContain("_w-32px");
+    expect(widths).toContain("_w-64px");
+  });
+
+  it("LoadingRow composes an avatar plus a name and two body lines", () => {
+    const painted = bones(mount(LoadingRow as StoryLike).container);
+    // 1 circle + 1 name bone + 2 body bones.
+    expect(painted.length).toBe(4);
+    expect(painted.map(widthClass)).toContain("_w-40px");
+  });
+
+  /** LC-20 / LC-68: the pulse is on with the knob and gone without it. */
+  it("MotionOff pulses the animated column and not the animate={false} one", () => {
+    const { container, getByText } = mount(MotionOff as StoryLike);
+    expect(getByText("animation knob on")).toBeTruthy();
+    expect(getByText("animation: none")).toBeTruthy();
+    const animations = bones(container).map((el) => el.style.animation);
+    expect(animations.some((a) => a.includes("skeleton-pulse"))).toBe(true);
+    expect(animations.some((a) => !a)).toBe(true);
+  });
+
+  it("RadiusKnob renders one column per radius stop", () => {
+    const { getByText } = mount(RadiusKnob as StoryLike);
+    for (const stop of ["none", "medium", "large"]) {
+      expect(getByText(`borderRadius: ${stop}`)).toBeTruthy();
+    }
+  });
+});

package/src/Spinner/SpinnerGlyph.spec.tsx

@@ -0,0 +1,132 @@
+/**
+ * SpinnerGlyph and useSpinnerStroke (MPO-143).
+ *
+ * Spinner.spec.tsx covers the status region, the size ladder and the animation
+ * knob; the glyph inside it — the two-circle arc that IS the spinner — had no
+ * coverage. Two contracts live here: the arc is exactly 270 degrees of the
+ * circumference on a faint full track, and `useSpinnerStroke` resolves a `$`
+ * token through the theme while passing a literal colour straight through.
+ */
+import { cleanup } from "@testing-library/react";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { afterEach, describe, expect, it } from "vitest";
+import { SpinnerGlyph, useSpinnerStroke } from "./SpinnerGlyph";
+
+afterEach(cleanup);
+
+const R = 9;
+const CIRCUMFERENCE = 2 * Math.PI * R;
+
+function svg(container: HTMLElement): SVGElement {
+  const node = container.querySelector("svg");
+  if (!node) throw new Error("SpinnerGlyph rendered no svg");
+  return node as unknown as SVGElement;
+}
+
+function circles(container: HTMLElement): SVGElement[] {
+  return Array.from(container.querySelectorAll("circle")) as unknown as SVGElement[];
+}
+
+function Probe({ color }: { color?: string }) {
+  const stroke = useSpinnerStroke(color);
+  return <span data-stroke={stroke} />;
+}
+
+function stroke(container: HTMLElement): string | null {
+  return container.querySelector("[data-stroke]")?.getAttribute("data-stroke") ?? null;
+}
+
+describe("SpinnerGlyph — the arc", () => {
+  it("draws a track and a head, never one circle", () => {
+    const { container } = renderWithProviders(<SpinnerGlyph color="#123456" size={24} />);
+    expect(circles(container)).toHaveLength(2);
+  });
+
+  it("keeps the viewBox fixed and scales through width/height, so it stays crisp", () => {
+    const { container } = renderWithProviders(<SpinnerGlyph color="#123456" size={48} />);
+    const node = svg(container);
+    expect(node.getAttribute("viewBox")).toBe("0 0 24 24");
+    expect(node.getAttribute("width")).toBe("48");
+    expect(node.getAttribute("height")).toBe("48");
+  });
+
+  it("takes the box size it is handed rather than a fixed one", () => {
+    const small = renderWithProviders(<SpinnerGlyph color="#123456" size={16} />);
+    expect(svg(small.container).getAttribute("width")).toBe("16");
+    cleanup();
+    const large = renderWithProviders(<SpinnerGlyph color="#123456" size={64} />);
+    expect(svg(large.container).getAttribute("width")).toBe("64");
+  });
+
+  it("makes the track faint and the head solid, both in the requested colour", () => {
+    const { container } = renderWithProviders(<SpinnerGlyph color="#abcdef" size={24} />);
+    const [track, head] = circles(container);
+    expect(track.getAttribute("stroke")).toBe("#abcdef");
+    expect(head.getAttribute("stroke")).toBe("#abcdef");
+    expect(Number(track.getAttribute("opacity"))).toBeCloseTo(0.2, 5);
+    expect(head.getAttribute("opacity")).toBeNull();
+  });
+
+  it("paints 270 degrees of arc and leaves the remaining quarter open", () => {
+    const { container } = renderWithProviders(<SpinnerGlyph color="#123456" size={24} />);
+    const [, head] = circles(container);
+    const [drawn, gap] = String(
+      head.getAttribute("stroke-dasharray") ?? head.getAttribute("strokeDasharray"),
+    )
+      .split(" ")
+      .map(Number);
+    expect(drawn).toBeCloseTo(CIRCUMFERENCE * 0.75, 5);
+    expect(gap).toBeCloseTo(CIRCUMFERENCE * 0.25, 5);
+    expect(drawn + gap).toBeCloseTo(CIRCUMFERENCE, 5);
+  });
+
+  it("starts the head at twelve o'clock, not at three", () => {
+    const { container } = renderWithProviders(<SpinnerGlyph color="#123456" size={24} />);
+    const [, head] = circles(container);
+    expect(head.getAttribute("transform")).toBe("rotate(-90 12 12)");
+  });
+
+  it("rounds the head's cap, which is what makes it read as Linear/Polaris rather than a pie slice", () => {
+    const { container } = renderWithProviders(<SpinnerGlyph color="#123456" size={24} />);
+    const [track, head] = circles(container);
+    expect(head.getAttribute("stroke-linecap") ?? head.getAttribute("strokeLinecap")).toBe("round");
+    expect(track.getAttribute("stroke-linecap") ?? track.getAttribute("strokeLinecap")).toBeNull();
+  });
+
+  it("fills neither circle, so the spinner is a ring and not a disc", () => {
+    const { container } = renderWithProviders(<SpinnerGlyph color="#123456" size={24} />);
+    for (const circle of circles(container)) {
+      expect(circle.getAttribute("fill")).toBe("none");
+    }
+  });
+});
+
+describe("useSpinnerStroke", () => {
+  it("passes a literal colour through untouched", () => {
+    const { container } = renderWithProviders(<Probe color="#ff0000" />);
+    expect(stroke(container)).toBe("#ff0000");
+    cleanup();
+    const named = renderWithProviders(<Probe color="rebeccapurple" />);
+    expect(stroke(named.container)).toBe("rebeccapurple");
+  });
+
+  it("resolves a $ token to a concrete colour instead of leaking the token", () => {
+    const { container } = renderWithProviders(<Probe color="$color" />);
+    const value = stroke(container);
+    expect(value).toBeTruthy();
+    expect(value?.startsWith("$")).toBe(false);
+  });
+
+  it("defaults to $color when no colour is given, and still resolves it", () => {
+    const explicit = renderWithProviders(<Probe color="$color" />);
+    const explicitValue = stroke(explicit.container);
+    cleanup();
+    const implicit = renderWithProviders(<Probe />);
+    expect(stroke(implicit.container)).toBe(explicitValue);
+  });
+
+  it("hands back the token itself when the theme has no such key, rather than throwing", () => {
+    const { container } = renderWithProviders(<Probe color="$definitelyNotAThemeKey" />);
+    expect(stroke(container)).toBe("$definitelyNotAThemeKey");
+  });
+});

package/src/Wheel/Wheel.stories.tsx

@@ -0,0 +1,232 @@
+import { action } from "@multiplatform.one/storybook";
+import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
+import { Preset } from "@multiplatform.one/theme";
+import { useState } from "react";
+import { Paragraph, XStack, YStack } from "tamagui";
+import { Wheel } from "./index";
+
+const numbers = Array.from({ length: 24 }, (_, i) => i);
+const pad2 = (n: number) => String(n).padStart(2, "0");
+const hours = numbers.map((h) => ({ value: h, label: pad2(h) }));
+const minutes = Array.from({ length: 60 }, (_, m) => ({ value: m, label: pad2(m) }));
+const periods = [
+  { value: "AM", label: "AM" },
+  { value: "PM", label: "PM" },
+];
+const currencyNames = { usd: "US Dollar", eur: "Euro", inr: "Rupee", jpy: "Yen" } as const;
+
+const meta: Meta<typeof Wheel> = {
+  title: "Forms/Wheel",
+  component: Wheel,
+  parameters: {
+    status: { type: "beta" },
+    docs: {
+      description: {
+        component:
+          "iOS UIPickerView / Flutter CupertinoPicker cylinder. Drag, flick or arrow-key to bring an item through the centre band. TimePicker and DatePicker paint columns of these; `highlightEdges` joins adjacent columns into one selection band.",
+      },
+    },
+  },
+  argTypes: {
+    visibleItems: { control: "select", options: [3, 5, 7] },
+    loop: { control: "boolean" },
+    disabled: { control: "boolean" },
+    width: { control: "number" },
+    itemHeight: { control: "number" },
+    highlightEdges: { control: "select", options: ["all", "start", "end", "none"] },
+    size: { control: "select", options: ["$6", "$8", "$9"] },
+  },
+  args: {
+    items: hours,
+    value: 9,
+    visibleItems: 5,
+    loop: false,
+    disabled: false,
+    highlightEdges: "all",
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Wheel>;
+
+export const Basic: Story = {
+  render: (args) => {
+    const Example = () => {
+      const [value, setValue] = useState<number>((args.value as number) ?? 9);
+      return (
+        <YStack gap="$3" alignItems="flex-start">
+          <Wheel
+            {...args}
+            value={value}
+            onChange={(next) => {
+              setValue(next as number);
+              action("onChange")(next);
+            }}
+            aria-label="Hour"
+          />
+          <Paragraph size="$3">selected: {pad2(value)}</Paragraph>
+        </YStack>
+      );
+    };
+    return <Example />;
+  },
+};
+
+/** Plain values (no `{ value, label }` wrapper) render their own `String(item)`. */
+export const PlainValues: Story = {
+  render: () => (
+    <Wheel
+      items={["Small", "Medium", "Large", "Extra large"]}
+      value="Medium"
+      width={140}
+      onChange={action("onChange")}
+      aria-label="Size"
+    />
+  ),
+};
+
+/**
+ * `visibleItems` is the cylinder depth. 3 is a compact inline row, 7 the full
+ * iOS sheet; the value must stay odd so an item sits dead centre.
+ */
+export const VisibleItems: Story = {
+  render: () => (
+    <XStack gap="$6" alignItems="flex-start">
+      {([3, 5, 7] as const).map((count) => (
+        <YStack key={count} gap="$2" alignItems="center">
+          <Paragraph size="$2">visibleItems={count}</Paragraph>
+          <Wheel items={hours} value={9} visibleItems={count} aria-label={`Hour ${count}`} />
+        </YStack>
+      ))}
+    </XStack>
+  ),
+};
+
+/**
+ * `loop` wraps at the ends instead of rubber-banding. Hours and minutes loop;
+ * a bounded set like AM/PM must not, or the user can scroll past the last row
+ * into a value that was never offered.
+ */
+export const LoopingAndBounded: Story = {
+  render: () => (
+    <XStack gap="$6" alignItems="flex-start">
+      <YStack gap="$2" alignItems="center">
+        <Paragraph size="$2">loop</Paragraph>
+        <Wheel items={minutes} value={30} loop onChange={action("onChange")} aria-label="Minute" />
+      </YStack>
+      <YStack gap="$2" alignItems="center">
+        <Paragraph size="$2">bounded</Paragraph>
+        <Wheel
+          items={periods}
+          value="AM"
+          loop={false}
+          width={72}
+          onChange={action("onChange")}
+          aria-label="AM/PM"
+        />
+      </YStack>
+    </XStack>
+  ),
+};
+
+/**
+ * Multi-column joining: the row of columns reads as ONE selection band because
+ * the first declares `start`, the last `end`, and everything between `none`.
+ * This is the arrangement TimePicker ships.
+ */
+export const JoinedColumns: Story = {
+  render: () => (
+    <XStack width={320}>
+      <Wheel items={hours} value={9} loop flex={1} highlightEdges="start" aria-label="Hour" />
+      <Wheel items={minutes} value={30} loop flex={1} highlightEdges="none" aria-label="Minute" />
+      <Wheel items={periods} value="AM" flex={1} highlightEdges="end" aria-label="AM/PM" />
+    </XStack>
+  ),
+};
+
+export const Disabled: Story = {
+  render: () => (
+    <XStack gap="$6" alignItems="flex-start">
+      <YStack gap="$2" alignItems="center">
+        <Paragraph size="$2">enabled</Paragraph>
+        <Wheel items={hours} value={9} aria-label="Hour enabled" />
+      </YStack>
+      <YStack gap="$2" alignItems="center">
+        <Paragraph size="$2">disabled</Paragraph>
+        <Wheel items={hours} value={9} disabled aria-label="Hour disabled" />
+      </YStack>
+    </XStack>
+  ),
+};
+
+/**
+ * `renderItem` owns the row; the wheel keeps geometry and selection. It is
+ * handed the VALUE, not the `{ value, label }` wrapper — so a story that wants
+ * a display string looks it up itself.
+ */
+export const CustomRenderItem: Story = {
+  render: () => (
+    <Wheel
+      items={Object.keys(currencyNames)}
+      value="inr"
+      width={200}
+      onChange={action("onChange")}
+      aria-label="Currency"
+      renderItem={(item, _index, isSelected) => (
+        <Paragraph size="$5" fontWeight={isSelected ? "700" : "400"}>
+          {currencyNames[item as keyof typeof currencyNames]}
+        </Paragraph>
+      )}
+    />
+  ),
+};
+
+/** Edge cases the geometry has to survive: empty, single item, very long labels. */
+export const EdgeCases: Story = {
+  render: () => (
+    <XStack gap="$6" alignItems="flex-start" flexWrap="wrap">
+      <YStack gap="$2" alignItems="center">
+        <Paragraph size="$2">empty</Paragraph>
+        <Wheel items={[]} aria-label="Empty" />
+      </YStack>
+      <YStack gap="$2" alignItems="center">
+        <Paragraph size="$2">single item</Paragraph>
+        <Wheel items={[{ value: "only", label: "Only" }]} value="only" aria-label="Single" />
+      </YStack>
+      <YStack gap="$2" alignItems="center">
+        <Paragraph size="$2">long labels</Paragraph>
+        <Wheel
+          items={[
+            { value: "a", label: "Asia/Kolkata" },
+            { value: "b", label: "America/Argentina/Buenos_Aires" },
+            { value: "c", label: "Europe/Isle_of_Man" },
+          ]}
+          value="b"
+          width={200}
+          aria-label="Timezone"
+        />
+      </YStack>
+    </XStack>
+  ),
+};
+
+/**
+ * MOTION-RIDES-KNOB (LC-68): at `animation: "none"` a keyboard snap must JUMP,
+ * not tween. Arrow-key both wheels and watch the difference.
+ */
+export const MotionOff: Story = {
+  render: () => (
+    <XStack gap="$6" alignItems="flex-start">
+      <YStack gap="$2" alignItems="center">
+        <Paragraph size="$2">animation: medium</Paragraph>
+        <Wheel items={hours} value={9} loop aria-label="Hour animated" />
+      </YStack>
+      <Preset overrides={{ animation: "none" }}>
+        <YStack gap="$2" alignItems="center">
+          <Paragraph size="$2">animation: none</Paragraph>
+          <Wheel items={hours} value={9} loop aria-label="Hour static" />
+        </YStack>
+      </Preset>
+    </XStack>
+  ),
+};

package/src/Wheel/WheelEdgeFade.spec.tsx

@@ -0,0 +1,141 @@
+/**
+ * WheelEdgeFade — LC-25's two halves (MPO-143).
+ *
+ * The contract is a platform split with a contrast reason behind it. On web the
+ * wheel viewport carries a CSS mask, so this component must render NOTHING; on
+ * native it paints two absolutely-positioned gradient bands as an OVERLAY. The
+ * overlay is the whole point: fading the rows themselves would drop their
+ * opacity below 1 and take the inactive `$color11` numerals under the AA floor,
+ * which is the regression Wheel.spec.tsx guards from the other side.
+ *
+ * Both halves are exercised. A spec that covered only the file the web build
+ * resolves would be asserting `null` and calling it a test.
+ *
+ * `expo-linear-gradient` ships untranspiled JSX in its published build, which
+ * the web transform cannot parse, so it is mocked into a probe element. The
+ * mock is the gradient, not the component under test: colours, start and end
+ * come straight from WheelEdgeFade.
+ */
+import { cleanup } from "@testing-library/react";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { WheelEdgeFade } from "./WheelEdgeFade";
+import { WheelEdgeFade as NativeWheelEdgeFade } from "./WheelEdgeFade.native";
+
+vi.mock("expo-linear-gradient", () => ({
+  LinearGradient: (props: { colors?: string[]; start?: unknown; end?: unknown }) => (
+    <div
+      data-gradient="true"
+      data-colors={(props.colors ?? []).join("|")}
+      data-start={JSON.stringify(props.start)}
+      data-end={JSON.stringify(props.end)}
+    />
+  ),
+}));
+
+afterEach(cleanup);
+
+function bands(container: HTMLElement): HTMLElement[] {
+  return Array.from(container.querySelectorAll("[style*='height']")) as HTMLElement[];
+}
+
+function gradients(container: HTMLElement): HTMLElement[] {
+  return Array.from(container.querySelectorAll("[data-gradient]")) as HTMLElement[];
+}
+
+function colorsOf(node: HTMLElement): string[] {
+  return String(node.getAttribute("data-colors") ?? "").split("|");
+}
+
+describe("WheelEdgeFade — web", () => {
+  it("renders nothing, because the viewport's CSS mask already does the fade", () => {
+    const { container } = renderWithProviders(<WheelEdgeFade height={24} />);
+    expect(container.querySelector("[data-gradient]")).toBeNull();
+    expect(container.textContent).toBe("");
+  });
+
+  it("renders nothing at every height, so it can never dim a row", () => {
+    for (const height of [0, 1, 24, 400]) {
+      const { container } = renderWithProviders(<WheelEdgeFade height={height} />);
+      expect(container.querySelector("[data-gradient]"), String(height)).toBeNull();
+      cleanup();
+    }
+  });
+});
+
+describe("WheelEdgeFade — native", () => {
+  it("paints one band per edge, never a single one", () => {
+    const { container } = renderWithProviders(<NativeWheelEdgeFade height={24} />);
+    expect(gradients(container)).toHaveLength(2);
+  });
+
+  it("draws nothing at all when the band height is zero or negative", () => {
+    const zero = renderWithProviders(<NativeWheelEdgeFade height={0} />);
+    expect(gradients(zero.container)).toHaveLength(0);
+    cleanup();
+    const negative = renderWithProviders(<NativeWheelEdgeFade height={-8} />);
+    expect(gradients(negative.container)).toHaveLength(0);
+  });
+
+  it("pins one band to the top and one to the bottom", () => {
+    const { container } = renderWithProviders(<NativeWheelEdgeFade height={30} />);
+    const edges = bands(container).map((node) => node.getAttribute("style") ?? "");
+    expect(edges.some((style) => /top:\s*0px/.test(style))).toBe(true);
+    expect(edges.some((style) => /bottom:\s*0px/.test(style))).toBe(true);
+  });
+
+  it("gives each band the height it was handed, so the caller sets the fade depth", () => {
+    const { container } = renderWithProviders(<NativeWheelEdgeFade height={30} />);
+    const heights = bands(container).map(
+      (node) => /height:\s*(\d+)px/.exec(node.getAttribute("style") ?? "")?.[1],
+    );
+    expect(heights.filter(Boolean)).toEqual(["30", "30"]);
+    cleanup();
+    const taller = renderWithProviders(<NativeWheelEdgeFade height={64} />);
+    expect(
+      bands(taller.container).map(
+        (node) => /height:\s*(\d+)px/.exec(node.getAttribute("style") ?? "")?.[1],
+      ),
+    ).toEqual(["64", "64"]);
+  });
+
+  it("keeps the bands out of the way of a drag, so the wheel still scrolls", () => {
+    const { container } = renderWithProviders(<NativeWheelEdgeFade height={24} />);
+    for (const band of bands(container)) {
+      expect(band.className).toContain("r-pointerEvents");
+      expect(band.className).toContain("r-position");
+    }
+  });
+
+  it("runs the top band opaque-to-clear and the bottom band clear-to-opaque", () => {
+    const { container } = renderWithProviders(<NativeWheelEdgeFade height={24} />);
+    const [top, bottom] = gradients(container).map(colorsOf);
+    expect(top).toHaveLength(2);
+    expect(bottom).toHaveLength(2);
+    // The two bands are mirror images: the top starts on the page background
+    // and ends transparent, the bottom does the reverse.
+    expect(top[0]).toBe(bottom[1]);
+    expect(top[1]).toBe(bottom[0]);
+    expect(top[1]).toMatch(/,\s*0\)$/);
+    expect(top[0]).not.toMatch(/,\s*0\)$/);
+  });
+
+  it("derives the fade colour from the theme background rather than a hardcoded white", () => {
+    const { container } = renderWithProviders(<NativeWheelEdgeFade height={24} />);
+    const [opaque, clear] = colorsOf(gradients(container)[0]);
+    expect(opaque).toBeTruthy();
+    expect(opaque).not.toBe("transparent");
+    // The clear stop is the SAME colour at zero alpha, so the band never
+    // shifts hue across its length.
+    const channels = /rgba\(([^)]+),\s*0\)$/.exec(clear)?.[1];
+    expect(channels, `clear stop ${clear} must be the opaque stop at alpha 0`).toBeTruthy();
+  });
+
+  it("runs both gradients vertically down the centre line", () => {
+    const { container } = renderWithProviders(<NativeWheelEdgeFade height={24} />);
+    for (const gradient of gradients(container)) {
+      expect(gradient.getAttribute("data-start")).toBe(JSON.stringify({ x: 0.5, y: 0 }));
+      expect(gradient.getAttribute("data-end")).toBe(JSON.stringify({ x: 0.5, y: 1 }));
+    }
+  });
+});