@bug-on/md3-react 2.0.3 → 3.0.0

package/src/ui/badge.test.tsx

@@ -0,0 +1,345 @@
+"use client";
+
+import { render, screen } from "@testing-library/react";
+import * as MotionReact from "motion/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { Badge, BadgedBox } from "./badge";
+
+// Mock motion/react – same pattern as chip.test.tsx
+vi.mock("motion/react", async (importOriginal) => {
+	const actual = await importOriginal<typeof import("motion/react")>();
+	return {
+		...actual,
+		useReducedMotion: () => false,
+	};
+});
+
+// ── Helpers ──────────────────────────────────────────────────────────────────
+
+const TestIcon = () => (
+	<svg data-testid="test-icon" aria-hidden="true" viewBox="0 0 24 24" />
+);
+
+// ── Test Suites ───────────────────────────────────────────────────────────────
+
+describe("Badge", () => {
+	afterEach(() => {
+		vi.restoreAllMocks();
+	});
+
+	// ── Rendering ──────────────────────────────────────────────────────────────
+
+	describe("rendering", () => {
+		it("renders as small dot when no children provided", () => {
+			const { container } = render(<Badge />);
+			const badge = container.firstChild as HTMLElement;
+			expect(badge).toBeInTheDocument();
+			// Small dot: aria-hidden (decorative)
+			expect(badge).toHaveAttribute("aria-hidden", "true");
+		});
+
+		it("renders with text content when children provided", () => {
+			render(<Badge>3</Badge>);
+			expect(screen.getByRole("status")).toHaveTextContent("3");
+		});
+
+		it("applies correct size classes for small variant (6x6px)", () => {
+			const { container } = render(<Badge />);
+			const badge = container.firstChild as HTMLElement;
+			// Tailwind shorthand: w-1.5 = 6px, h-1.5 = 6px
+			expect(badge.className).toContain("w-1.5");
+			expect(badge.className).toContain("h-1.5");
+		});
+
+		it("applies correct size classes for large variant (min 16px)", () => {
+			const { container } = render(<Badge>3</Badge>);
+			const badge = container.firstChild as HTMLElement;
+			// Tailwind shorthand: min-w-4 = 16px, h-4 = 16px
+			expect(badge.className).toContain("min-w-4");
+			expect(badge.className).toContain("h-4");
+		});
+	});
+
+	// ── Content truncation ─────────────────────────────────────────────────────
+
+	describe("content truncation", () => {
+		it("displays exact number when below max", () => {
+			render(<Badge max={99}>42</Badge>);
+			expect(screen.getByRole("status")).toHaveTextContent("42");
+		});
+
+		it("displays '{max}+' when number exceeds max prop", () => {
+			render(<Badge max={99}>150</Badge>);
+			expect(screen.getByRole("status")).toHaveTextContent("99+");
+		});
+
+		it("defaults to showing full number when max not set", () => {
+			render(<Badge>9999</Badge>);
+			expect(screen.getByRole("status")).toHaveTextContent("9999");
+		});
+
+		it("truncates string to 4 characters maximum including +", () => {
+			render(<Badge>HELLO</Badge>);
+			// "HELLO" → 5 chars → truncated to "HELL"
+			expect(screen.getByRole("status")).toHaveTextContent("HELL");
+		});
+
+		it("does not truncate strings of 4 chars or fewer", () => {
+			render(<Badge>NEW</Badge>);
+			expect(screen.getByRole("status")).toHaveTextContent("NEW");
+		});
+
+		it("displays '99+' when value is exactly max+1", () => {
+			render(<Badge max={99}>100</Badge>);
+			expect(screen.getByRole("status")).toHaveTextContent("99+");
+		});
+	});
+
+	// ── Styling ────────────────────────────────────────────────────────────────
+
+	describe("styling", () => {
+		it("applies MD3 error color as default container color for small badge", () => {
+			const { container } = render(<Badge />);
+			const badge = container.firstChild as HTMLElement;
+			expect(badge.className).toContain("bg-m3-error");
+		});
+
+		it("applies MD3 error color as default container color for large badge", () => {
+			const { container } = render(<Badge>3</Badge>);
+			const badge = container.firstChild as HTMLElement;
+			expect(badge.className).toContain("bg-m3-error");
+		});
+
+		it("applies MD3 onError color as default content color", () => {
+			const { container } = render(<Badge>3</Badge>);
+			const badge = container.firstChild as HTMLElement;
+			expect(badge.className).toContain("text-m3-on-error");
+		});
+
+		it("accepts custom containerColor prop via inline style", () => {
+			const { container } = render(<Badge containerColor="blue">3</Badge>);
+			const badge = container.firstChild as HTMLElement;
+			expect(badge.style.backgroundColor).toBe("blue");
+			// Should NOT apply default bg class when override is provided
+			expect(badge.className).not.toContain("bg-m3-error");
+		});
+
+		it("accepts custom contentColor prop via inline style", () => {
+			const { container } = render(<Badge contentColor="white">3</Badge>);
+			const badge = container.firstChild as HTMLElement;
+			expect(badge.style.color).toBe("white");
+		});
+
+		it("applies rounded-full shape (MD3 CornerFull = 9999px)", () => {
+			const { container } = render(<Badge>3</Badge>);
+			const badge = container.firstChild as HTMLElement;
+			expect(badge.className).toContain("rounded-full");
+		});
+	});
+
+	// ── Accessibility ──────────────────────────────────────────────────────────
+
+	describe("accessibility", () => {
+		it("has role='status' for screen reader announcements when content present", () => {
+			render(<Badge>3</Badge>);
+			expect(screen.getByRole("status")).toBeInTheDocument();
+		});
+
+		it("renders aria-hidden='true' for small dot badge (decorative)", () => {
+			const { container } = render(<Badge />);
+			const badge = container.firstChild as HTMLElement;
+			expect(badge).toHaveAttribute("aria-hidden", "true");
+		});
+
+		it("renders aria-label with content value for large badge", () => {
+			render(<Badge>3</Badge>);
+			expect(screen.getByRole("status")).toHaveAttribute("aria-label", "3");
+		});
+
+		it("renders aria-label with max+ when number exceeds max", () => {
+			render(<Badge max={99}>150</Badge>);
+			expect(screen.getByRole("status")).toHaveAttribute("aria-label", "99+");
+		});
+
+		it("accepts explicit aria-label prop (overrides default)", () => {
+			render(<Badge aria-label="3 notifications">3</Badge>);
+			expect(screen.getByRole("status")).toHaveAttribute(
+				"aria-label",
+				"3 notifications",
+			);
+		});
+
+		it("small badge with explicit aria-label gets role='status'", () => {
+			render(<Badge aria-label="New notification" />);
+			expect(screen.getByRole("status")).toBeInTheDocument();
+			expect(screen.getByRole("status")).toHaveAttribute(
+				"aria-label",
+				"New notification",
+			);
+		});
+	});
+
+	// ── className merging ──────────────────────────────────────────────────────
+
+	describe("className merging", () => {
+		it("merges additional className with base classes", () => {
+			const { container } = render(
+				<Badge className="my-custom-class">3</Badge>,
+			);
+			const badge = container.firstChild as HTMLElement;
+			expect(badge).toHaveClass("my-custom-class");
+			// Still has base classes
+			expect(badge.className).toContain("rounded-full");
+		});
+
+		it("merges additional className for small dot badge", () => {
+			const { container } = render(<Badge className="dot-extra" />);
+			const badge = container.firstChild as HTMLElement;
+			expect(badge).toHaveClass("dot-extra");
+			expect(badge.className).toContain("w-1.5");
+		});
+	});
+
+	// ── forwardRef ─────────────────────────────────────────────────────────────
+
+	describe("forwardRef", () => {
+		it("forwards ref to underlying span element", () => {
+			const ref = { current: null };
+			render(<Badge ref={ref}>3</Badge>);
+			expect(ref.current).not.toBeNull();
+			expect((ref.current as unknown as HTMLElement).tagName).toBe("SPAN");
+		});
+
+		it("forwards ref to small dot badge span element", () => {
+			const ref = { current: null };
+			render(<Badge ref={ref} />);
+			expect(ref.current).not.toBeNull();
+		});
+	});
+
+	// ── Reduced Motion ─────────────────────────────────────────────────────────
+
+	describe("prefers-reduced-motion", () => {
+		it("renders correctly when prefers-reduced-motion is active", () => {
+			vi.spyOn(MotionReact, "useReducedMotion").mockReturnValue(true);
+			render(<Badge>3</Badge>);
+			expect(screen.getByRole("status")).toBeInTheDocument();
+		});
+	});
+});
+
+// ── BadgedBox Tests ───────────────────────────────────────────────────────────
+
+describe("BadgedBox", () => {
+	it("renders anchor content", () => {
+		render(
+			<BadgedBox badge={<Badge />}>
+				<TestIcon />
+			</BadgedBox>,
+		);
+		expect(screen.getByTestId("test-icon")).toBeInTheDocument();
+	});
+
+	it("renders badge overlaying the anchor", () => {
+		render(
+			<BadgedBox badge={<Badge aria-label="3 new" />}>
+				<TestIcon />
+			</BadgedBox>,
+		);
+		// The small badge is decorated, but the aria-label makes it visible to a11y
+		expect(screen.getByLabelText("3 new")).toBeInTheDocument();
+	});
+
+	it("applies relative positioning to container", () => {
+		const { container } = render(
+			<BadgedBox badge={<Badge />}>
+				<TestIcon />
+			</BadgedBox>,
+		);
+		// The outer wrapper span has relative positioning class
+		const wrapper = container.firstChild as HTMLElement;
+		expect(wrapper.className).toContain("relative");
+		expect(wrapper.className).toContain("inline-flex");
+	});
+
+	it("applies absolute positioning to badge wrapper", () => {
+		const { container } = render(
+			<BadgedBox badge={<Badge />}>
+				<TestIcon />
+			</BadgedBox>,
+		);
+		// Find the badge positioner span (second child of outer wrapper)
+		const wrapper = container.firstChild as HTMLElement;
+		const badgeSlot = wrapper.children[1] as HTMLElement;
+		expect(badgeSlot.className).toContain("absolute");
+	});
+
+	it("positions small badge at top-trailing corner with 50% offset", () => {
+		const { container } = render(
+			<BadgedBox badge={<Badge />}>
+				<TestIcon />
+			</BadgedBox>,
+		);
+		const wrapper = container.firstChild as HTMLElement;
+		const badgeSlot = wrapper.children[1] as HTMLElement;
+		expect(badgeSlot.className).toContain("translate-x-[50%]");
+		expect(badgeSlot.className).toContain("-translate-y-[50%]");
+	});
+
+	it("positions large badge at top-trailing corner with 35% offset", () => {
+		const { container } = render(
+			<BadgedBox badge={<Badge>3</Badge>}>
+				<TestIcon />
+			</BadgedBox>,
+		);
+		const wrapper = container.firstChild as HTMLElement;
+		const badgeSlot = wrapper.children[1] as HTMLElement;
+		expect(badgeSlot.className).toContain("translate-x-[35%]");
+		expect(badgeSlot.className).toContain("-translate-y-[35%]");
+	});
+
+	it("respects explicit badgeSize='small' prop", () => {
+		const { container } = render(
+			// Even though badge has content, explicitly set small
+			<BadgedBox badge={<Badge>3</Badge>} badgeSize="small">
+				<TestIcon />
+			</BadgedBox>,
+		);
+		const wrapper = container.firstChild as HTMLElement;
+		const badgeSlot = wrapper.children[1] as HTMLElement;
+		expect(badgeSlot.className).toContain("translate-x-[50%]");
+	});
+
+	it("respects explicit badgeSize='large' prop", () => {
+		const { container } = render(
+			// Even though badge has no content, explicitly set large
+			<BadgedBox badge={<Badge />} badgeSize="large">
+				<TestIcon />
+			</BadgedBox>,
+		);
+		const wrapper = container.firstChild as HTMLElement;
+		const badgeSlot = wrapper.children[1] as HTMLElement;
+		expect(badgeSlot.className).toContain("translate-x-[35%]");
+	});
+
+	it("accepts and applies className to container", () => {
+		const { container } = render(
+			<BadgedBox badge={<Badge />} className="my-box-class">
+				<TestIcon />
+			</BadgedBox>,
+		);
+		const wrapper = container.firstChild as HTMLElement;
+		expect(wrapper).toHaveClass("my-box-class");
+	});
+
+	it("badge slot wrapper has aria-hidden to avoid double-announcement", () => {
+		const { container } = render(
+			<BadgedBox badge={<Badge>3</Badge>}>
+				<TestIcon />
+			</BadgedBox>,
+		);
+		const wrapper = container.firstChild as HTMLElement;
+		const badgeSlot = wrapper.children[1] as HTMLElement;
+		expect(badgeSlot).toHaveAttribute("aria-hidden", "true");
+	});
+});

package/src/ui/badge.tsx

@@ -0,0 +1,282 @@
+/**
+ * @file badge.tsx
+ *
+ * MD3 Expressive Badge component.
+ *
+ * - `Badge`      → A small status indicator. Can be a dot (no content) or labeled (with content).
+ * - `BadgedBox`  → Positions a Badge at the top-trailing corner of an anchor element.
+ *
+ * @remarks
+ * Token references (Kotlin source):
+ * BadgeTokens — Size=6dp (→ 6px), LargeSize=16dp (→ 16px), Shape=CornerFull, Color=Error,
+ * LargeLabelTextFont=LabelSmall, LargeLabelTextColor=OnError
+ *
+ * BadgedBox offsets:
+ * - Small (dot):  BadgeOffset = 6dp             → translate(50%, -50%)
+ * - Large (text): HOffset=12dp, VOffset=14dp   → translate(35%, -35%)
+ *
+ * Architecture:
+ * - Styling: `cn` (clsx/tailwind-merge) + static Tailwind classes
+ * - Animation: Framer Motion (`LazyMotion` + `domMax`) spring mount/unmount
+ * - A11y: `role="status"` with `aria-label`, decorative dots use `aria-hidden="true"`
+ *
+ * @see https://m3.material.io/components/badge/overview
+ */
+
+import {
+	AnimatePresence,
+	domMax,
+	LazyMotion,
+	m,
+	useReducedMotion,
+} from "motion/react";
+import * as React from "react";
+import { cn } from "../lib/utils";
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Types
+// ─────────────────────────────────────────────────────────────────────────────
+
+// Exclude onDrag-family event handlers that conflict between React's HTMLAttributes
+// and Framer Motion's MotionProps (different DragEvent signatures).
+type SafeHTMLSpanAttrs = Omit<
+	React.HTMLAttributes<HTMLSpanElement>,
+	| "onDrag"
+	| "onDragStart"
+	| "onDragEnd"
+	| "onDragEnter"
+	| "onDragLeave"
+	| "onDragOver"
+	| "onDrop"
+>;
+
+export interface BadgeProps extends SafeHTMLSpanAttrs {
+	/**
+	 * The content to display inside the badge.
+	 * - Omitted / undefined → renders as a small 6×6px dot (decorative).
+	 * - string | number    → renders as a large badge (min 16px height) with label.
+	 *
+	 * Numbers exceeding `max` are displayed as `{max}+`.
+	 * Strings longer than 4 characters are truncated to 4.
+	 */
+	children?: React.ReactNode;
+
+	/**
+	 * Maximum numeric value to display before appending "+".
+	 * Only applies when `children` is a number.
+	 * @example max={99} + children={150} → "99+"
+	 */
+	max?: number;
+
+	/**
+	 * Override the background (container) color.
+	 * Accepts any valid CSS color value.
+	 * Defaults to MD3 `error` token — `bg-m3-error`.
+	 */
+	containerColor?: string;
+
+	/**
+	 * Override the text/content color.
+	 * Accepts any valid CSS color value.
+	 * Defaults to MD3 `on-error` token — `text-m3-on-error`.
+	 */
+	contentColor?: string;
+}
+
+export interface BadgedBoxProps {
+	/**
+	 * The badge element to overlay on the anchor.
+	 * Typically a `<Badge />`.
+	 */
+	badge: React.ReactNode;
+
+	/**
+	 * The anchor content that the badge is attached to.
+	 */
+	children: React.ReactNode;
+
+	/**
+	 * Additional className applied to the outer wrapper `span`.
+	 */
+	className?: string;
+
+	/**
+	 * Explicitly override size detection for badge positioning.
+	 * - `'small'` → BadgeOffset = 6dp → translate(50%, -50%)
+	 * - `'large'` → HOffset=12dp/VOffset=14dp → translate(35%, -35%)
+	 * When omitted, BadgedBox auto-detects by inspecting `badge` children prop.
+	 */
+	badgeSize?: "small" | "large";
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Helpers
+// ─────────────────────────────────────────────────────────────────────────────
+
+function formatBadgeLabel(children: React.ReactNode, max?: number): string {
+	if (typeof children === "number") {
+		return max !== undefined && children > max ? `${max}+` : String(children);
+	}
+	if (typeof children === "string") {
+		if (max !== undefined) {
+			const asNum = Number(children);
+			if (!Number.isNaN(asNum) && asNum > max) return `${max}+`;
+		}
+		return children.length > 4 ? children.slice(0, 4) : children;
+	}
+	return "";
+}
+
+function detectBadgeHasContent(badge: React.ReactNode): boolean {
+	return (
+		React.isValidElement<{ children?: React.ReactNode }>(badge) &&
+		badge.props.children != null
+	);
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Badge
+// ─────────────────────────────────────────────────────────────────────────────
+
+const BadgeImpl = React.forwardRef<HTMLSpanElement, BadgeProps>(
+	(
+		{
+			children,
+			max,
+			containerColor,
+			contentColor,
+			className,
+			style,
+			"aria-label": ariaLabel,
+			...props
+		},
+		ref,
+	) => {
+		const hasContent = children != null;
+		const label = hasContent ? formatBadgeLabel(children, max) : "";
+		const reducedMotion = useReducedMotion();
+		const isDecorative = !hasContent && !ariaLabel;
+
+		const springTransition = reducedMotion
+			? { duration: 0 }
+			: { type: "spring" as const, stiffness: 500, damping: 30, mass: 0.8 };
+
+		const colorStyle: React.CSSProperties = {
+			...(containerColor && { backgroundColor: containerColor }),
+			...(contentColor && { color: contentColor }),
+			...style,
+		};
+
+		return (
+			<LazyMotion features={domMax} strict>
+				<m.span
+					ref={ref}
+					role={isDecorative ? undefined : "status"}
+					aria-hidden={isDecorative ? "true" : undefined}
+					aria-label={hasContent ? (ariaLabel ?? label) : ariaLabel}
+					initial={{ scale: 0, opacity: 0 }}
+					animate={{ scale: 1, opacity: 1 }}
+					exit={{ scale: 0, opacity: 0 }}
+					transition={springTransition}
+					className={cn(
+						"rounded-full ring-[1.5px] ring-m3-surface",
+						!containerColor && "bg-m3-error",
+						hasContent
+							? cn(
+									"inline-flex items-center justify-center",
+									"min-w-4 h-4 px-1 text-[11px] font-medium leading-none",
+									!contentColor && "text-m3-on-error",
+								)
+							: "inline-block w-1.5 h-1.5",
+						className,
+					)}
+					style={colorStyle}
+					// biome-ignore lint/suspicious/noExplicitAny: spread safe subset of HTML attrs
+					{...(props as any)}
+				>
+					{hasContent && label}
+				</m.span>
+			</LazyMotion>
+		);
+	},
+);
+
+BadgeImpl.displayName = "Badge";
+
+/**
+ * MD3 Expressive Badge — dynamic status indicator.
+ *
+ * @example
+ * ```tsx
+ * // Small dot badge (no content) — decorative
+ * <Badge />
+ *
+ * // Large badge with number (truncated at max)
+ * <Badge max={99}>150</Badge>
+ * // → displays "99+"
+ *
+ * // Large badge with text label
+ * <Badge>NEW</Badge>
+ *
+ * // Custom colors
+ * <Badge containerColor="#6750A4" contentColor="#FFFFFF">3</Badge>
+ * ```
+ *
+ * @see https://m3.material.io/components/badge/overview
+ */
+export const Badge = React.memo(BadgeImpl);
+
+// ─────────────────────────────────────────────────────────────────────────────
+// BadgedBox
+// ─────────────────────────────────────────────────────────────────────────────
+
+/**
+ * MD3 BadgedBox — positions a Badge at the top-trailing corner of an anchor.
+ *
+ * Implements MD3 offset specs from Badge.kt:
+ * - Small badge (dot): `BadgeOffset = 6dp` → translate(50%, -50%)
+ * - Large badge (text): `BadgeWithContentHorizontalOffset = 12dp` / `VerticalOffset = 14dp`
+ *   → translate(35%, -35%)
+ *
+ * Auto-detects badge size by inspecting the badge element's children prop,
+ * or accepts an explicit `badgeSize` override.
+ *
+ * @example
+ * ```tsx
+ * // Small dot on mail icon
+ * <BadgedBox badge={<Badge />}>
+ *   <Icon name="mail" />
+ * </BadgedBox>
+ *
+ * // Count badge on notification icon
+ * <BadgedBox badge={<Badge max={99}>{count}</Badge>}>
+ *   <Icon name="notifications" />
+ * </BadgedBox>
+ * ```
+ */
+export function BadgedBox({
+	badge,
+	children,
+	className,
+	badgeSize,
+}: BadgedBoxProps) {
+	const isLarge = badgeSize
+		? badgeSize === "large"
+		: detectBadgeHasContent(badge);
+
+	const badgePositionClass = isLarge
+		? "translate-x-[35%] -translate-y-[35%]"
+		: "translate-x-[50%] -translate-y-[50%]";
+
+	return (
+		<span className={cn("relative inline-flex", className)}>
+			{children}
+			<span
+				className={cn("absolute right-0 top-0", badgePositionClass)}
+				aria-hidden="true"
+			>
+				<AnimatePresence mode="wait">{badge}</AnimatePresence>
+			</span>
+		</span>
+	);
+}

package/src/ui/button-group.test.tsx

@@ -0,0 +1,71 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { Button } from "./button";
+import { ButtonGroup } from "./button-group";
+
+describe("ButtonGroup Component", () => {
+	it("renders children correctly", () => {
+		render(
+			<ButtonGroup>
+				<Button>One</Button>
+				<Button>Two</Button>
+			</ButtonGroup>,
+		);
+		expect(screen.getByText("One")).toBeInTheDocument();
+		expect(screen.getByText("Two")).toBeInTheDocument();
+	});
+
+	it("applies gap-2 for standard variant by default", () => {
+		const { container } = render(
+			<ButtonGroup>
+				<Button>One</Button>
+				<Button>Two</Button>
+			</ButtonGroup>,
+		);
+		const fieldset = container.querySelector("fieldset");
+		expect(fieldset).toHaveClass("gap-2");
+	});
+
+	it("applies gap-0.5 for connected variant", () => {
+		const { container } = render(
+			<ButtonGroup variant="connected">
+				<Button>One</Button>
+				<Button>Two</Button>
+			</ButtonGroup>,
+		);
+		const fieldset = container.querySelector("fieldset");
+		expect(fieldset).toHaveClass("gap-0.5");
+	});
+
+	it("passes size prop to children to enforce uniformity", () => {
+		const { container } = render(
+			<ButtonGroup size="lg">
+				{/* Even if child specifies sm, the group's lg should override or inject */}
+				<Button size="sm">One</Button>
+				<Button>Two</Button>
+			</ButtonGroup>,
+		);
+
+		const buttons = container.querySelectorAll("button");
+		// SIZE_PADDING_MAP["lg"] is "3rem" in button.tsx (roughly corresponding to h-14/px-6 class)
+		// We can check if the inner-radius variable is correctly injected (lg -> 16px)
+		expect(buttons[0]).toHaveStyle({ "--m3-inner-rad": "16px" });
+		expect(buttons[1]).toHaveStyle({ "--m3-inner-rad": "16px" });
+	});
+
+	it("applies morphing transition style to connected buttons by default", () => {
+		const { container } = render(
+			<ButtonGroup variant="connected">
+				<Button>One</Button>
+				<Button>Two</Button>
+			</ButtonGroup>,
+		);
+
+		const buttons = container.querySelectorAll("button");
+		// Check that the custom transition is injected via style
+		const expectedTransition =
+			"border-top-left-radius 0.25s cubic-bezier(0.2, 0, 0, 1), border-top-right-radius 0.25s cubic-bezier(0.2, 0, 0, 1), border-bottom-right-radius 0.25s cubic-bezier(0.2, 0, 0, 1), border-bottom-left-radius 0.25s cubic-bezier(0.2, 0, 0, 1), padding 0.2s cubic-bezier(0.2, 0, 0, 1), flex 0.2s cubic-bezier(0.2, 0, 0, 1)";
+		expect(buttons[0]).toHaveStyle({ transition: expectedTransition });
+		expect(buttons[1]).toHaveStyle({ transition: expectedTransition });
+	});
+});