@tangle-network/ui 11.21.0 → 11.22.1

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @tangle-network/ui
 
+## 11.22.1
+
+### Patch Changes
+
+- eb11ddd: Switch: draw the off state as an outlined track with a filled thumb in `muted-foreground`, which clears 3:1 against the card and the canvas. The old filled `bg-input` track and `bg-background` thumb looked like one flat shape in both themes, so an unchecked switch could not be seen.
+
+## 11.22.0
+
+### Minor Changes
+
+- 17162d7: Metric accepts an optional decorative `icon` before its label. EmptyState accepts `titleAs` (h2, h3 or h4) so the title follows the page outline. CopyButton is a `type="button"` with an `aria-label` and a polite status announcement when the copy succeeds, and its check icon uses the success text token. The CodeBlock header label renders at `text-xs` (12px) instead of one pixel below it.
+
 ## 11.21.0
 
 ### Minor Changes

package/dist/markdown/code-block.js

@@ -1,7 +1,7 @@
 import { focusRing, focusRingInset } from "../lib/focus.js";
 import { cn } from "../lib/utils.js";
 import { memo, useCallback, useEffect, useRef, useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { Check, Copy } from "lucide-react";
 //#region src/markdown/code-block.tsx
 const syntaxTheme = (() => {
@@ -107,7 +107,7 @@ const CodeBlock = memo(({ code, language, label, showLineNumbers = false, light,
 			headerLabel && /* @__PURE__ */ jsxs("div", {
 				className: "flex items-center justify-between border-b border-border px-3 py-1 bg-[var(--code-header-bg,hsl(var(--background)))]",
 				children: [/* @__PURE__ */ jsx("span", {
-					className: "text-[calc(var(--font-size-xs)-1px)] font-mono font-medium uppercase tracking-widest text-muted-foreground",
+					className: "text-xs font-mono font-medium uppercase tracking-widest text-muted-foreground",
 					children: headerLabel
 				}), children]
 			}),
@@ -150,6 +150,7 @@ CodeBlock.displayName = "CodeBlock";
 /** Copy-to-clipboard button for use inside CodeBlock. */
 const CopyButton = memo(({ text }) => {
 	const [copied, setCopied] = useState(false);
+	const [status, setStatus] = useState("");
 	const timerRef = useRef(null);
 	useEffect(() => {
 		return () => {
@@ -157,21 +158,42 @@ const CopyButton = memo(({ text }) => {
 		};
 	}, []);
 	const handleCopy = useCallback(async () => {
+		setStatus("");
+		if (timerRef.current) clearTimeout(timerRef.current);
 		try {
 			await navigator.clipboard.writeText(text);
 			setCopied(true);
-			if (timerRef.current) clearTimeout(timerRef.current);
-			timerRef.current = setTimeout(() => setCopied(false), 2e3);
+			setStatus("Copied to clipboard");
 		} catch (err) {
 			console.warn("Clipboard write failed:", err);
+			setCopied(false);
+			setStatus("Copy failed");
 		}
+		timerRef.current = setTimeout(() => {
+			setCopied(false);
+			setStatus("");
+		}, 2e3);
 	}, [text]);
-	return /* @__PURE__ */ jsx("button", {
+	const label = copied ? "Copied" : "Copy to clipboard";
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("button", {
+		type: "button",
 		onClick: handleCopy,
 		className: cn("flex items-center justify-center w-6 h-6 rounded-md bg-muted border border-border hover:border-[var(--border-strong)] transition-colors", focusRing),
-		title: "Copy to clipboard",
-		children: copied ? /* @__PURE__ */ jsx(Check, { className: "w-3.5 h-3.5 text-emerald-500" }) : /* @__PURE__ */ jsx(Copy, { className: "w-3.5 h-3.5 text-muted-foreground" })
-	});
+		"aria-label": label,
+		title: label,
+		children: copied ? /* @__PURE__ */ jsx(Check, {
+			"aria-hidden": "true",
+			className: "w-3.5 h-3.5 text-[var(--surface-success-text)]"
+		}) : /* @__PURE__ */ jsx(Copy, {
+			"aria-hidden": "true",
+			className: "w-3.5 h-3.5 text-muted-foreground"
+		})
+	}), /* @__PURE__ */ jsx("span", {
+		className: "sr-only",
+		role: "status",
+		"aria-live": "polite",
+		children: status
+	})] });
 });
 CopyButton.displayName = "CopyButton";
 //#endregion

package/dist/primitives/empty-state.d.ts

@@ -5,6 +5,9 @@ export interface EmptyStateProps extends React.HTMLAttributes<HTMLDivElement> {
   title: string;
   description?: string;
   action?: React.ReactNode;
+  /** Heading element for the title. Pick the level that follows the page's
+   * outline, e.g. h2 directly under a page h1. Defaults to h3. */
+  titleAs?: "h2" | "h3" | "h4";
 }
 declare const EmptyState: React.ForwardRefExoticComponent<EmptyStateProps & React.RefAttributes<HTMLDivElement>>;
 //#endregion

package/dist/primitives/empty-state.js

@@ -2,7 +2,7 @@ import { cn } from "../lib/utils.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/primitives/empty-state.tsx
-const EmptyState = React.forwardRef(({ className, icon, title, description, action, ...props }, ref) => {
+const EmptyState = React.forwardRef(({ className, icon, title, description, action, titleAs: Title = "h3", ...props }, ref) => {
 	return /* @__PURE__ */ jsxs("div", {
 		ref,
 		className: cn("flex flex-col items-center justify-center px-4 py-16 text-center", className),
@@ -12,7 +12,7 @@ const EmptyState = React.forwardRef(({ className, icon, title, description, acti
 				className: "mb-4 rounded-full bg-muted p-4 text-muted-foreground",
 				children: icon
 			}),
-			/* @__PURE__ */ jsx("h3", {
+			/* @__PURE__ */ jsx(Title, {
 				className: "font-semibold text-lg",
 				children: title
 			}),

package/dist/primitives/metric-strip.d.ts

@@ -19,6 +19,9 @@ export interface MetricProps extends React.HTMLAttributes<HTMLDivElement> {
     tone: StatusTone;
     label: string;
   };
+  /** Decorative glyph before the label; the label carries the meaning. A
+   * direct svg child is sized to 16px; wrap other content to size it yourself. */
+  icon?: React.ReactNode;
 }
 /** A described term; the strip, not this item, decides where separators belong. */
 declare const Metric: React.ForwardRefExoticComponent<MetricProps & React.RefAttributes<HTMLDivElement>>;

package/dist/primitives/metric-strip.js

@@ -17,20 +17,28 @@ const MetricStrip = React.forwardRef(({ className, children, columns = 4, ...pro
 }));
 MetricStrip.displayName = "MetricStrip";
 /** A described term; the strip, not this item, decides where separators belong. */
-const Metric = React.forwardRef(({ className, label, value, hint, attention, ...props }, ref) => /* @__PURE__ */ jsxs("div", {
+const Metric = React.forwardRef(({ className, label, value, hint, attention, icon, ...props }, ref) => /* @__PURE__ */ jsxs("div", {
 	ref,
 	className: cn("min-w-0 border-border p-4 sm:p-5", className),
 	...props,
 	children: [
 		/* @__PURE__ */ jsxs("dt", {
 			className: "flex min-w-0 flex-wrap items-center gap-2 text-muted-foreground text-sm",
-			children: [/* @__PURE__ */ jsx("span", {
-				className: "min-w-0 whitespace-normal [overflow-wrap:anywhere]",
-				children: label
-			}), attention && /* @__PURE__ */ jsx(StatusPill, {
-				tone: attention.tone,
-				children: attention.label
-			})]
+			children: [
+				icon != null && icon !== false && /* @__PURE__ */ jsx("span", {
+					"aria-hidden": "true",
+					className: "inline-flex shrink-0 text-muted-foreground [&>svg]:h-4 [&>svg]:w-4",
+					children: icon
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: "min-w-0 whitespace-normal [overflow-wrap:anywhere]",
+					children: label
+				}),
+				attention && /* @__PURE__ */ jsx(StatusPill, {
+					tone: attention.tone,
+					children: attention.label
+				})
+			]
 		}),
 		/* @__PURE__ */ jsx("dd", {
 			className: cn("mt-1 whitespace-normal [overflow-wrap:anywhere] font-semibold text-xl tabular-nums tracking-tight lg:text-2xl", attention?.tone === "danger" && "text-[var(--surface-danger-text)]"),

package/dist/primitives/switch.js

@@ -6,10 +6,10 @@ import { jsx } from "react/jsx-runtime";
 import * as SwitchPrimitives from "@radix-ui/react-switch";
 //#region src/primitives/switch.tsx
 const Switch = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(SwitchPrimitives.Root, {
-	className: cn("peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-[background-color,box-shadow] disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input", focusRing, className),
+	className: cn("peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 shadow-sm transition-[background-color,border-color,box-shadow] disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:border-transparent data-[state=checked]:bg-primary data-[state=unchecked]:border-muted-foreground data-[state=unchecked]:bg-transparent", focusRing, className),
 	...props,
 	ref,
-	children: /* @__PURE__ */ jsx(SwitchPrimitives.Thumb, { className: cn("pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0") })
+	children: /* @__PURE__ */ jsx(SwitchPrimitives.Thumb, { className: cn("pointer-events-none block h-4 w-4 rounded-full shadow-lg ring-0 transition-[translate,background-color] data-[state=checked]:translate-x-4 data-[state=checked]:bg-background data-[state=unchecked]:translate-x-0 data-[state=unchecked]:bg-muted-foreground") })
 }));
 Switch.displayName = SwitchPrimitives.Root.displayName;
 //#endregion

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/ui",
-  "version": "11.21.0",
+  "version": "11.22.1",
   "description": "Generic React UI components for Tangle products — primitives, chat, run, files, editor, markdown.",
   "type": "module",
   "license": "MIT",
@@ -149,7 +149,7 @@
   "peerDependencies": {
     "@hocuspocus/provider": ">=2.15.0 <5.0.0",
     "@nanostores/react": ">=0.8.4 <3.0.0",
-    "@tangle-network/brand": "^1.15.2",
+    "@tangle-network/brand": "^1.15.4",
     "@tiptap/core": ">=3.20.4 <4.0.0",
     "@tiptap/extension-collaboration": ">=3.20.4 <4.0.0",
     "@tiptap/extension-collaboration-caret": ">=3.7.0 <4.0.0",

package/src/markdown/code-block.test.tsx

@@ -1,10 +1,17 @@
-import { cleanup, render, screen, waitFor } from "@testing-library/react";
+import { cleanup, fireEvent, render, screen, waitFor } from "@testing-library/react";
 import { renderToString } from "react-dom/server";
 import SyntaxHighlighter from "react-syntax-highlighter";
-import { afterEach, describe, expect, it } from "vitest";
+import { afterEach, describe, expect, it, vi } from "vitest";
 import { CodeBlock, CopyButton } from "./code-block";
 
-afterEach(cleanup);
+const originalClipboard = Object.getOwnPropertyDescriptor(navigator, "clipboard");
+
+afterEach(() => {
+  cleanup();
+  vi.restoreAllMocks();
+  if (originalClipboard) Object.defineProperty(navigator, "clipboard", originalClipboard);
+  else delete (navigator as { clipboard?: unknown }).clipboard;
+});
 
 describe("CodeBlock scoped semantic colors", () => {
   it("keeps code readable before the renderer loads, then applies live semantic colors and line numbers", async () => {
@@ -137,4 +144,36 @@ describe("CodeBlock", () => {
     expect(copyButton?.closest(".absolute")).not.toBeNull();
     expect(copyButton?.closest(".border-b")).toBeNull();
   });
+
+  it("names the copy button, keeps it out of forms, and announces the copy", async () => {
+    const writeText = vi.fn().mockResolvedValue(undefined);
+    Object.defineProperty(navigator, "clipboard", { value: { writeText }, configurable: true });
+    render(<CopyButton text="secret" />);
+    const button = screen.getByRole("button", { name: "Copy to clipboard" });
+    expect(button.getAttribute("type")).toBe("button");
+    const status = screen.getByRole("status");
+    expect(status.getAttribute("aria-live")).toBe("polite");
+    expect(status.textContent).toBe("");
+    fireEvent.click(button);
+    await waitFor(() => expect(status.textContent).toBe("Copied to clipboard"));
+    expect(writeText).toHaveBeenCalledWith("secret");
+    expect(screen.getByRole("button", { name: "Copied" })).toBeTruthy();
+  });
+
+  it("renders the header label at the 12px text-xs step", () => {
+    const { getByText } = render(<CodeBlock code={"x"} label="YAML" />);
+    expect(getByText("YAML").className).toContain("text-xs");
+    expect(getByText("YAML").className).not.toContain("calc(");
+  });
+
+  it("announces a failed copy", async () => {
+    const writeText = vi.fn().mockRejectedValue(new Error("denied"));
+    Object.defineProperty(navigator, "clipboard", { value: { writeText }, configurable: true });
+    const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+    render(<CopyButton text="secret" />);
+    fireEvent.click(screen.getByRole("button", { name: "Copy to clipboard" }));
+    await waitFor(() => expect(screen.getByRole("status").textContent).toBe("Copy failed"));
+    expect(screen.getByRole("button", { name: "Copy to clipboard" })).toBeTruthy();
+    warn.mockRestore();
+  });
 });

package/src/markdown/code-block.tsx

@@ -138,7 +138,7 @@ export const CodeBlock = memo(
       >
         {headerLabel && (
           <div className="flex items-center justify-between border-b border-border px-3 py-1 bg-[var(--code-header-bg,hsl(var(--background)))]">
-            <span className="text-[calc(var(--font-size-xs)-1px)] font-mono font-medium uppercase tracking-widest text-muted-foreground">
+            <span className="text-xs font-mono font-medium uppercase tracking-widest text-muted-foreground">
               {headerLabel}
             </span>
             {children}
@@ -180,6 +180,9 @@ CodeBlock.displayName = "CodeBlock";
 /** Copy-to-clipboard button for use inside CodeBlock. */
 export const CopyButton = memo(({ text }: { text: string }) => {
   const [copied, setCopied] = useState(false);
+  // Status text for the live region. Cleared before each attempt so a repeat
+  // copy or a failure is announced again.
+  const [status, setStatus] = useState("");
   const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 
   useEffect(() => {
@@ -187,31 +190,47 @@ export const CopyButton = memo(({ text }: { text: string }) => {
   }, []);
 
   const handleCopy = useCallback(async () => {
+    setStatus("");
+    if (timerRef.current) clearTimeout(timerRef.current);
     try {
       await navigator.clipboard.writeText(text);
       setCopied(true);
-      if (timerRef.current) clearTimeout(timerRef.current);
-      timerRef.current = setTimeout(() => setCopied(false), 2000);
+      setStatus("Copied to clipboard");
     } catch (err) {
       console.warn("Clipboard write failed:", err);
+      setCopied(false);
+      setStatus("Copy failed");
     }
+    timerRef.current = setTimeout(() => {
+      setCopied(false);
+      setStatus("");
+    }, 2000);
   }, [text]);
 
+  const label = copied ? "Copied" : "Copy to clipboard";
   return (
-    <button
-      onClick={handleCopy}
-      className={cn(
-        "flex items-center justify-center w-6 h-6 rounded-md bg-muted border border-border hover:border-[var(--border-strong)] transition-colors",
-        focusRing,
-      )}
-      title="Copy to clipboard"
-    >
-      {copied ? (
-        <Check className="w-3.5 h-3.5 text-emerald-500" />
-      ) : (
-        <Copy className="w-3.5 h-3.5 text-muted-foreground" />
-      )}
-    </button>
+    <>
+      <button
+        type="button"
+        onClick={handleCopy}
+        className={cn(
+          "flex items-center justify-center w-6 h-6 rounded-md bg-muted border border-border hover:border-[var(--border-strong)] transition-colors",
+          focusRing,
+        )}
+        aria-label={label}
+        title={label}
+      >
+        {copied ? (
+          <Check aria-hidden="true" className="w-3.5 h-3.5 text-[var(--surface-success-text)]" />
+        ) : (
+          <Copy aria-hidden="true" className="w-3.5 h-3.5 text-muted-foreground" />
+        )}
+      </button>
+      {/* Announce the result; the icon swap alone is silent to screen readers. */}
+      <span className="sr-only" role="status" aria-live="polite">
+        {status}
+      </span>
+    </>
   );
 });
 CopyButton.displayName = "CopyButton";

package/src/primitives/empty-state.test.tsx

@@ -0,0 +1,18 @@
+import { cleanup, render, screen } from "@testing-library/react";
+import { afterEach, describe, expect, it } from "vitest";
+import { EmptyState } from "./empty-state";
+
+afterEach(cleanup);
+
+describe("EmptyState", () => {
+  it("renders the title as h3 by default", () => {
+    render(<EmptyState title="No runs yet" />);
+    expect(screen.getByRole("heading", { level: 3, name: "No runs yet" })).toBeTruthy();
+  });
+
+  it("uses the requested heading level", () => {
+    render(<EmptyState title="No suites yet" titleAs="h2" description="Add one." />);
+    expect(screen.getByRole("heading", { level: 2, name: "No suites yet" })).toBeTruthy();
+    expect(screen.queryByRole("heading", { level: 3 })).toBeNull();
+  });
+});

package/src/primitives/empty-state.tsx

@@ -6,10 +6,13 @@ export interface EmptyStateProps extends React.HTMLAttributes<HTMLDivElement> {
   title: string;
   description?: string;
   action?: React.ReactNode;
+  /** Heading element for the title. Pick the level that follows the page's
+   * outline, e.g. h2 directly under a page h1. Defaults to h3. */
+  titleAs?: "h2" | "h3" | "h4";
 }
 
 const EmptyState = React.forwardRef<HTMLDivElement, EmptyStateProps>(
-  ({ className, icon, title, description, action, ...props }, ref) => {
+  ({ className, icon, title, description, action, titleAs: Title = "h3", ...props }, ref) => {
     return (
       <div
         ref={ref}
@@ -24,7 +27,7 @@ const EmptyState = React.forwardRef<HTMLDivElement, EmptyStateProps>(
             {icon}
           </div>
         )}
-        <h3 className="font-semibold text-lg">{title}</h3>
+        <Title className="font-semibold text-lg">{title}</Title>
         {description && (
           <p className="mt-2 max-w-sm text-muted-foreground text-sm">
             {description}

package/src/primitives/metric-strip.test.tsx

@@ -116,4 +116,19 @@ describe("MetricStrip", () => {
     expect(strip.current!.className).not.toContain("sm:grid-cols-4");
     expect(Array.from(strip.current!.querySelectorAll("dt")).map((node) => node.textContent)).toEqual(["Spend", "Calls", "Average"]);
   });
+
+  it("renders an optional icon before the label without naming the term", () => {
+    render(
+      <MetricStrip>
+        <Metric label="Steps" value="4/5" icon={<svg data-testid="steps-icon" />} />
+        <Metric label="Cost" value="$0.12" />
+      </MetricStrip>,
+    );
+    const icon = screen.getByTestId("steps-icon");
+    const dt = screen.getByText("Steps").closest("dt")!;
+    expect(dt.contains(icon)).toBe(true);
+    expect(icon.parentElement!.getAttribute("aria-hidden")).toBe("true");
+    expect(dt.firstElementChild).toBe(icon.parentElement);
+    expect(screen.getByText("Cost").closest("dt")!.querySelector('[aria-hidden="true"]')).toBeNull();
+  });
 });

package/src/primitives/metric-strip.tsx

@@ -45,17 +45,28 @@ export interface MetricProps extends React.HTMLAttributes<HTMLDivElement> {
   hint?: React.ReactNode;
   /** Attention is a caller-owned action requirement, never inferred from zero. */
   attention?: { tone: StatusTone; label: string };
+  /** Decorative glyph before the label; the label carries the meaning. A
+   * direct svg child is sized to 16px; wrap other content to size it yourself. */
+  icon?: React.ReactNode;
 }
 
 /** A described term; the strip, not this item, decides where separators belong. */
 const Metric = React.forwardRef<HTMLDivElement, MetricProps>(
-  ({ className, label, value, hint, attention, ...props }, ref) => (
+  ({ className, label, value, hint, attention, icon, ...props }, ref) => (
     <div
       ref={ref}
       className={cn("min-w-0 border-border p-4 sm:p-5", className)}
       {...props}
     >
       <dt className="flex min-w-0 flex-wrap items-center gap-2 text-muted-foreground text-sm">
+        {icon != null && icon !== false && (
+          <span
+            aria-hidden="true"
+            className="inline-flex shrink-0 text-muted-foreground [&>svg]:h-4 [&>svg]:w-4"
+          >
+            {icon}
+          </span>
+        )}
         <span className="min-w-0 whitespace-normal [overflow-wrap:anywhere]">{label}</span>
         {attention && (
           <StatusPill tone={attention.tone}>{attention.label}</StatusPill>

package/src/primitives/switch.test.tsx

@@ -0,0 +1,35 @@
+import { cleanup, fireEvent, render, screen } from "@testing-library/react";
+import { afterEach, describe, expect, it } from "vitest";
+import { Switch } from "./switch";
+
+afterEach(cleanup);
+
+/** The classes that apply in a state: unprefixed ones, plus that state's variant. */
+function stateClasses(el: Element, state: "checked" | "unchecked"): string[] {
+  return (el.getAttribute("class") ?? "")
+    .split(/\s+/)
+    .filter((c) => !c.startsWith("data-[") || c.startsWith(`data-[state=${state}]:`))
+    .map((c) => c.replace(`data-[state=${state}]:`, ""));
+}
+
+describe("Switch", () => {
+  it("draws its off state in muted-foreground, so an unchecked switch is visible on a card or the canvas", () => {
+    render(<Switch aria-label="Reminders" />);
+    const track = screen.getByRole("switch", { name: "Reminders" });
+    const thumb = track.firstElementChild as Element;
+    expect(track).toHaveAttribute("data-state", "unchecked");
+    expect(stateClasses(track, "unchecked")).toContain("border-muted-foreground");
+    expect(stateClasses(track, "unchecked")).not.toContain("bg-input");
+    expect(stateClasses(thumb, "unchecked")).toContain("bg-muted-foreground");
+    expect(stateClasses(thumb, "unchecked")).not.toContain("bg-background");
+  });
+
+  it("fills the track with primary once it is on", () => {
+    render(<Switch aria-label="Reminders" />);
+    const track = screen.getByRole("switch", { name: "Reminders" });
+    fireEvent.click(track);
+    expect(track).toHaveAttribute("data-state", "checked");
+    expect(stateClasses(track, "checked")).toContain("bg-primary");
+    expect(stateClasses(track.firstElementChild as Element, "checked")).toContain("bg-background");
+  });
+});

package/src/primitives/switch.tsx

@@ -11,7 +11,12 @@ const Switch = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SwitchPrimitives.Root
     className={cn(
-      "peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-[background-color,box-shadow] disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
+      // Off is an outlined track with a filled thumb, both in muted-foreground,
+      // which clears 3:1 against the card and the canvas in both themes (a
+      // switch's boundary is non-text content). The old bg-input track under a
+      // bg-background thumb read as one flat shape, so an off switch was not
+      // visible at all. --border-strong was tried and measured 2.2:1 on a white card.
+      "peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 shadow-sm transition-[background-color,border-color,box-shadow] disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:border-transparent data-[state=checked]:bg-primary data-[state=unchecked]:border-muted-foreground data-[state=unchecked]:bg-transparent",
       focusRing,
       className,
     )}
@@ -20,7 +25,7 @@ const Switch = React.forwardRef<
   >
     <SwitchPrimitives.Thumb
       className={cn(
-        "pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0",
+        "pointer-events-none block h-4 w-4 rounded-full shadow-lg ring-0 transition-[translate,background-color] data-[state=checked]:translate-x-4 data-[state=checked]:bg-background data-[state=unchecked]:translate-x-0 data-[state=unchecked]:bg-muted-foreground",
       )}
     />
   </SwitchPrimitives.Root>