@ugurdemirel/landcraft 0.1.4 → 0.1.5

package/dist/styles.css

@@ -1679,6 +1679,9 @@
   .aspect-\[16\/10\] {
     aspect-ratio: 16/10;
   }
+  .h-1 {
+    height: var(--spacing);
+  }
   .h-1\.5 {
     height: calc(var(--spacing) * 1.5);
   }
@@ -2268,6 +2271,12 @@
   .p-1 {
     padding: var(--spacing);
   }
+  .p-2 {
+    padding: calc(var(--spacing) * 2);
+  }
+  .p-4 {
+    padding: calc(var(--spacing) * 4);
+  }
   .p-5 {
     padding: calc(var(--spacing) * 5);
   }
@@ -2736,6 +2745,9 @@
   .text-white {
     color: var(--color-white);
   }
+  .lowercase {
+    text-transform: lowercase;
+  }
   .uppercase {
     text-transform: uppercase;
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ugurdemirel/landcraft",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "publishConfig": {
     "access": "public"
   },
@@ -35,14 +35,16 @@
     "build:js": "vite build",
     "build:css": "tailwindcss -i ./src/styles/index.css -o ./dist/styles.css",
     "typecheck": "tsc --noEmit",
+    "test": "vitest run",
+    "test:watch": "vitest",
     "clean": "rimraf dist",
     "prepublishOnly": "pnpm run build"
   },
   "peerDependencies": {
+    "@tailwindcss/typography": "^0.5.15",
     "react": ">=18.0.0",
     "react-dom": ">=18.0.0",
-    "tailwindcss": "^4.0.0",
-    "@tailwindcss/typography": "^0.5.15"
+    "tailwindcss": "^4.0.0"
   },
   "peerDependenciesMeta": {
     "@tailwindcss/typography": {
@@ -56,14 +58,19 @@
   "devDependencies": {
     "@tailwindcss/cli": "^4.0.0",
     "@tailwindcss/typography": "^0.5.15",
+    "@testing-library/jest-dom": "^7.0.1",
+    "@testing-library/react": "^16.3.2",
+    "@testing-library/user-event": "^14.6.5",
     "@types/node": "^22.9.0",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
     "@vitejs/plugin-react": "^4.3.4",
+    "jsdom": "^30.0.1",
     "rimraf": "^6.0.1",
     "tailwindcss": "^4.0.0",
     "typescript": "^5.6.3",
     "vite": "^5.4.11",
-    "vite-plugin-dts": "^4.3.0"
+    "vite-plugin-dts": "^4.3.0",
+    "vitest": "^3.2.7"
   }
 }

package/src/components/Badge.test.tsx

@@ -0,0 +1,55 @@
+import { describe, it, expect } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { Badge } from "./Badge";
+import { Zap } from "../icons";
+
+describe("Badge", () => {
+  it("renders a span with children", () => {
+    render(<Badge>New</Badge>);
+    expect(screen.getByText("New")).toBeInTheDocument();
+    expect(screen.getByText("New").tagName).toBe("SPAN");
+  });
+
+  it("defaults to the soft variant", () => {
+    render(<Badge>Soft</Badge>);
+    expect(screen.getByText("Soft")).toHaveClass("bg-primary-soft");
+  });
+
+  it("applies the requested variant", () => {
+    render(<Badge variant="solid">Solid</Badge>);
+    expect(screen.getByText("Solid")).toHaveClass("bg-primary");
+  });
+
+  it("renders a dot indicator for the dot variant", () => {
+    const { container } = render(<Badge variant="dot">Online</Badge>);
+    // The dot is an inner decorative span.
+    const dots = container.querySelectorAll("span.h-1\\.5");
+    expect(dots.length).toBeGreaterThan(0);
+  });
+
+  it("renders an icon", () => {
+    render(
+      <Badge icon={<Zap data-testid="icon" />} variant="soft">
+        Fast
+      </Badge>,
+    );
+    expect(screen.getByTestId("icon")).toBeInTheDocument();
+  });
+
+  it("applies sizes", () => {
+    render(<Badge size="sm">Small</Badge>);
+    expect(screen.getByText("Small")).toHaveClass("px-2.5");
+  });
+
+  it("sets a computed text color for customColor", () => {
+    render(<Badge customColor="#111111">Dark</Badge>);
+    const badge = screen.getByText("Dark");
+    expect(badge).toHaveStyle({ backgroundColor: "#111111" });
+    expect(badge).toHaveStyle({ color: "#ffffff" });
+  });
+
+  it("forwards arbitrary props like aria-label", () => {
+    render(<Badge aria-label="status">v1</Badge>);
+    expect(screen.getByLabelText("status")).toBeInTheDocument();
+  });
+});

package/src/components/Blog/Blog.test.tsx

@@ -0,0 +1,64 @@
+import { describe, it, expect } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { BlogCard } from "./BlogCard";
+import { BlogSection } from "./BlogSection";
+
+const posts = [
+  {
+    title: "Token-based theming",
+    excerpt: "A short excerpt.",
+    date: "12 Aug 2026",
+    readTime: "5 min",
+    category: "Strategy",
+    href: "/post",
+    author: { name: "Aylin Demir" },
+  },
+  {
+    title: "Second post",
+    date: "1 Aug 2026",
+  },
+];
+
+describe("BlogCard", () => {
+  it("renders a card with title, category badge and meta (card option)", () => {
+    render(<BlogCard post={posts[0]} />);
+    expect(screen.getByText("Token-based theming")).toBeInTheDocument();
+    expect(screen.getByText("Strategy")).toBeInTheDocument();
+    expect(screen.getByText("5 min")).toBeInTheDocument();
+  });
+
+  it("renders the row option", () => {
+    render(<BlogCard post={posts[0]} option="row" />);
+    expect(screen.getByText("Token-based theming")).toBeInTheDocument();
+  });
+
+  it("links to the post href", () => {
+    render(<BlogCard post={posts[0]} />);
+    expect(
+      screen.getByRole("link", { name: /Token-based theming/ }),
+    ).toHaveAttribute("href", "/post");
+  });
+});
+
+describe("BlogSection", () => {
+  it("renders the heading and posts as a card grid", () => {
+    render(
+      <BlogSection
+        posts={posts}
+        eyebrow="Blog"
+        title="Latest"
+        description="A description."
+      />,
+    );
+    expect(screen.getByText("Blog")).toBeInTheDocument();
+    expect(screen.getByText("Latest")).toBeInTheDocument();
+    expect(screen.getByText("Token-based theming")).toBeInTheDocument();
+    expect(screen.getByText("Second post")).toBeInTheDocument();
+  });
+
+  it("limits the number of posts with the limit prop", () => {
+    render(<BlogSection posts={posts} limit={1} />);
+    expect(screen.getByText("Token-based theming")).toBeInTheDocument();
+    expect(screen.queryByText("Second post")).not.toBeInTheDocument();
+  });
+});

package/src/components/Button.test.tsx

@@ -0,0 +1,91 @@
+import { describe, it, expect, vi } from "vitest";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { Button } from "./Button";
+import { ArrowRight } from "../icons";
+
+describe("Button", () => {
+  it("renders a button element with children", () => {
+    render(<Button>Hello</Button>);
+    const btn = screen.getByRole("button", { name: "Hello" });
+    expect(btn).toBeInTheDocument();
+    expect(btn.tagName).toBe("BUTTON");
+  });
+
+  it("defaults to type=button so it never submits forms unintentionally", () => {
+    render(<Button>Save</Button>);
+    expect(screen.getByRole("button", { name: "Save" })).toHaveAttribute("type", "button");
+  });
+
+  it("applies the default primary variant", () => {
+    render(<Button>Start</Button>);
+    expect(screen.getByRole("button", { name: "Start" })).toHaveClass("bg-primary");
+  });
+
+  it("applies the requested variant class", () => {
+    render(<Button variant="ghost">Ghost</Button>);
+    expect(screen.getByRole("button", { name: "Ghost" })).toHaveClass("hover:bg-surface");
+  });
+
+  it("applies the link variant underline behavior", () => {
+    render(<Button variant="link">Link</Button>);
+    expect(screen.getByRole("button", { name: "Link" })).toHaveClass("hover:underline");
+  });
+
+  it("renders leading and trailing icons", () => {
+    render(
+      <Button iconLeft={<span data-testid="left" />} iconRight={<ArrowRight data-testid="right" />}>
+        Next
+      </Button>,
+    );
+    const btn = screen.getByRole("button", { name: "Next" });
+    expect(btn.querySelector('[data-testid="left"]')).toBeInTheDocument();
+    expect(btn.querySelector('[data-testid="right"]')).toBeInTheDocument();
+  });
+
+  it("applies fullWidth", () => {
+    render(<Button fullWidth>Wide</Button>);
+    expect(screen.getByRole("button", { name: "Wide" })).toHaveClass("w-full");
+  });
+
+  it("disables and blocks clicks when disabled", async () => {
+    const onClick = vi.fn();
+    render(
+      <Button disabled onClick={onClick}>
+        Disabled
+      </Button>,
+    );
+    const btn = screen.getByRole("button", { name: "Disabled" });
+    expect(btn).toBeDisabled();
+    await userEvent.click(btn);
+    expect(onClick).not.toHaveBeenCalled();
+  });
+
+  it("sets a computed text color and background for customColor", () => {
+    render(<Button customColor="#111111">Custom</Button>);
+    const btn = screen.getByRole("button", { name: "Custom" });
+    expect(btn).toHaveStyle({ backgroundColor: "#111111" });
+    // Text is the light candidate for a very dark background.
+    expect(btn).toHaveStyle({ color: "#ffffff" });
+  });
+
+  it("forwards an onClick handler and fires it", async () => {
+    const onClick = vi.fn();
+    render(<Button onClick={onClick}>Click</Button>);
+    await userEvent.click(screen.getByRole("button", { name: "Click" }));
+    expect(onClick).toHaveBeenCalledTimes(1);
+  });
+
+  it("applies button styles onto a single child when asChild is set", () => {
+    render(
+      <Button asChild>
+        <a href="#pricing">Pricing link</a>
+      </Button>,
+    );
+    const link = screen.getByRole("link", { name: "Pricing link" });
+    expect(link.tagName).toBe("A");
+    expect(link).toHaveClass("bg-primary");
+    // No wrapping <button> is rendered.
+    expect(screen.queryByRole("button")).not.toBeInTheDocument();
+  });
+});

package/src/components/CTA/CTA.test.tsx

@@ -0,0 +1,53 @@
+import { describe, it, expect } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { CTA } from "./CTA";
+
+const base = { title: "Ready to get started?" };
+
+describe("CTA", () => {
+  it("renders the title and description", () => {
+    render(<CTA {...base} description="Free for 14 days." />);
+    expect(screen.getByText("Ready to get started?")).toBeInTheDocument();
+    expect(screen.getByText("Free for 14 days.")).toBeInTheDocument();
+  });
+
+  it("renders primary and secondary actions", () => {
+    render(
+      <CTA
+        {...base}
+        action={<a href="#a">Action</a>}
+        secondaryAction={<a href="#b">Secondary</a>}
+      />,
+    );
+    expect(screen.getByRole("link", { name: "Action" })).toBeInTheDocument();
+    expect(screen.getByRole("link", { name: "Secondary" })).toBeInTheDocument();
+  });
+
+  it("renders the panel option (default) with a radial brand background", () => {
+    const { container } = render(<CTA {...base} option="panel" />);
+    const panel = container.querySelector("div[class*='rounded-']");
+    expect(panel).toBeInTheDocument();
+  });
+
+  it("renders the surface option as a paper band", () => {
+    const { container } = render(<CTA {...base} option="surface" />);
+    expect(container.querySelector("section")).toHaveClass("w-full");
+  });
+
+  it("renders the inverse option on a secondary surface", () => {
+    const { container } = render(<CTA {...base} option="inverse" />);
+    // The inverse option paints its band with the --color-secondary token.
+    const ink = container.querySelector("[style*='--color-secondary']");
+    expect(ink).toBeInTheDocument();
+  });
+
+  it("applies centered alignment", () => {
+    render(<CTA {...base} option="surface" align="center" />);
+    expect(screen.getByText("Ready to get started?")).toBeInTheDocument();
+  });
+
+  it("forwards an id", () => {
+    const { container } = render(<CTA {...base} id="cta" />);
+    expect(container.querySelector("section#cta")).not.toBeNull();
+  });
+});

package/src/components/Card.test.tsx

@@ -0,0 +1,49 @@
+import { describe, it, expect } from "vitest";
+import { render, screen } from "@testing-library/react";
+import {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  CardContent,
+  CardFooter,
+} from "./Card";
+
+describe("Card & subcomponents", () => {
+  it("renders an outlined card by default", () => {
+    render(<Card>Content</Card>);
+    expect(screen.getByText("Content")).toHaveClass("border-border");
+  });
+
+  it("applies a custom variant", () => {
+    render(<Card variant="elevated">Elevated</Card>);
+    expect(screen.getByText("Elevated")).toHaveClass("shadow-soft");
+  });
+
+  it("adds interactive styling when interactive", () => {
+    render(<Card interactive>Interactive</Card>);
+    expect(screen.getByText("Interactive")).toHaveClass("hover:-translate-y-0.5");
+  });
+
+  it("renders the full composite header/content/footer", () => {
+    render(
+      <Card>
+        <CardHeader>
+          <CardTitle>Title</CardTitle>
+          <CardDescription>Description</CardDescription>
+        </CardHeader>
+        <CardContent>Body</CardContent>
+        <CardFooter>Footer</CardFooter>
+      </Card>,
+    );
+    expect(screen.getByText("Title")).toBeInTheDocument();
+    expect(screen.getByText("Description")).toBeInTheDocument();
+    expect(screen.getByText("Body")).toBeInTheDocument();
+    expect(screen.getByText("Footer")).toBeInTheDocument();
+  });
+
+  it("renders an icon in the header when provided", () => {
+    render(<CardHeader icon={<span data-testid="hdr-icon" />}>Header</CardHeader>);
+    expect(screen.getByTestId("hdr-icon")).toBeInTheDocument();
+  });
+});

package/src/components/Container.test.tsx

@@ -0,0 +1,52 @@
+import { describe, it, expect } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { Container, Stack } from "./Container";
+
+describe("Container", () => {
+  it("renders a div by default", () => {
+    render(<Container>Body</Container>);
+    const el = screen.getByText("Body");
+    expect(el.tagName).toBe("DIV");
+    expect(el).toHaveClass("mx-auto");
+  });
+
+  it("applies a size class", () => {
+    render(<Container size="sm">Body</Container>);
+    expect(screen.getByText("Body")).toHaveClass("max-w-xl");
+  });
+
+  it("does not cap width for the full size", () => {
+    render(<Container size="full">Body</Container>);
+    expect(screen.getByText("Body")).not.toHaveClass("max-w-xl", "max-w-6xl");
+  });
+
+  it("adds gutters by default and removes them with gutters=false", () => {
+    render(<Container>A</Container>);
+    expect(screen.getByText("A")).toHaveClass("px-5");
+
+    render(<Container gutters={false}>B</Container>);
+    expect(screen.getByText("B")).not.toHaveClass("px-5");
+  });
+
+  it("renders as the requested element via `as`", () => {
+    render(<Container as="section">Body</Container>);
+    expect(screen.getByText("Body").tagName).toBe("SECTION");
+  });
+});
+
+describe("Stack", () => {
+  it("renders a vertical flex by default", () => {
+    render(<Stack>A</Stack>);
+    expect(screen.getByText("A")).toHaveClass("flex", "flex-col");
+  });
+
+  it("renders horizontal when horizontal", () => {
+    render(<Stack horizontal>A</Stack>);
+    expect(screen.getByText("A")).toHaveClass("flex-row");
+  });
+
+  it("applies a gap", () => {
+    render(<Stack gap={6}>A</Stack>);
+    expect(screen.getByText("A")).toHaveClass("gap-6");
+  });
+});

package/src/components/FAQ/FAQ.test.tsx

@@ -0,0 +1,54 @@
+import { describe, it, expect } from "vitest";
+import { render, screen, fireEvent } from "@testing-library/react";
+import { FAQ } from "./FAQ";
+
+const items = [
+  { question: "How do I install it?", answer: "Run pnpm add." },
+  { question: "How do I theme it?", answer: "Set --color-primary." },
+];
+
+describe("FAQ", () => {
+  it("renders all questions and the accordion option by default", () => {
+    render(<FAQ items={items} />);
+    expect(screen.getByText("How do I install it?")).toBeInTheDocument();
+    expect(screen.getByText("How do I theme it?")).toBeInTheDocument();
+  });
+
+  it("expands an answer when a question is activated", () => {
+    render(<FAQ items={items} />);
+    const q = screen.getByRole("button", { name: "How do I install it?" });
+    expect(q).toHaveAttribute("aria-expanded", "false");
+
+    fireEvent.click(q);
+    expect(q).toHaveAttribute("aria-expanded", "true");
+    expect(screen.getByText("Run pnpm add.")).toBeInTheDocument();
+  });
+
+  it("closes the first item when another is opened (single open by default)", () => {
+    render(<FAQ items={items} />);
+    fireEvent.click(screen.getByRole("button", { name: "How do I install it?" }));
+    fireEvent.click(screen.getByRole("button", { name: "How do I theme it?" }));
+
+    // Only the second question's answer is visible.
+    expect(screen.getByText("Set --color-primary.")).toBeInTheDocument();
+    expect(screen.queryByText("Run pnpm add.")).not.toBeInTheDocument();
+  });
+
+  it("keeps multiple items open when allowMultiple is set", () => {
+    render(<FAQ items={items} allowMultiple />);
+    fireEvent.click(screen.getByRole("button", { name: "How do I install it?" }));
+    fireEvent.click(screen.getByRole("button", { name: "How do I theme it?" }));
+
+    expect(screen.getByText("Run pnpm add.")).toBeInTheDocument();
+    expect(screen.getByText("Set --color-primary.")).toBeInTheDocument();
+  });
+
+  it("renders the split and cards options", () => {
+    const { rerender } = render(<FAQ items={items} option="split" />);
+    expect(screen.getByText("How do I install it?")).toBeInTheDocument();
+
+    rerender(<FAQ items={items} option="cards" />);
+    expect(screen.getByText("How do I install it?")).toBeInTheDocument();
+    expect(screen.getByText("Run pnpm add.")).toBeInTheDocument();
+  });
+});

package/src/components/Features/Features.test.tsx

@@ -0,0 +1,49 @@
+import { describe, it, expect } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { FeatureCard } from "./FeatureCard";
+import { FeatureGrid } from "./FeatureGrid";
+
+const features = [
+  { icon: <span data-testid="icon-1">⚡</span>, title: "Fast", description: "Go live fast." },
+  { title: "No description title" },
+];
+
+describe("FeatureCard", () => {
+  it("renders title, description and icon", () => {
+    render(<FeatureCard icon={<span data-testid="ic" />} title="Fast" description="Go live fast." />);
+    expect(screen.getByText("Fast")).toBeInTheDocument();
+    expect(screen.getByText("Go live fast.")).toBeInTheDocument();
+    expect(screen.getByTestId("ic")).toBeInTheDocument();
+  });
+
+  it("applies a large heading when large", () => {
+    render(<FeatureCard title="Big" large />);
+    expect(screen.getByText("Big")).toHaveClass("text-2xl");
+  });
+});
+
+describe("FeatureGrid", () => {
+  it("renders all features in columns mode", () => {
+    render(<FeatureGrid features={features} option="columns" />);
+    expect(screen.getByText("Fast")).toBeInTheDocument();
+    expect(screen.getByTestId("icon-1")).toBeInTheDocument();
+  });
+
+  it("renders features in bento mode", () => {
+    render(<FeatureGrid features={features} option="bento" />);
+    expect(screen.getByText("Fast")).toBeInTheDocument();
+  });
+
+  it("renders features as editorial rows with numbering", () => {
+    render(<FeatureGrid features={features} option="editorialRows" />);
+    expect(screen.getByText("Fast")).toBeInTheDocument();
+    // Editorial rows number features starting at 01.
+    expect(screen.getByText("01")).toBeInTheDocument();
+    expect(screen.getByText("02")).toBeInTheDocument();
+  });
+
+  it("applies the requested column count in columns mode", () => {
+    const { container } = render(<FeatureGrid features={features} option="columns" columns={2} />);
+    expect(container.querySelector("div.sm\\:grid-cols-2")).not.toBeNull();
+  });
+});

package/src/components/Footer/Footer.test.tsx

@@ -0,0 +1,49 @@
+import { describe, it, expect } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { Footer } from "./Footer";
+
+const columns = [
+  {
+    title: "Product",
+    links: [
+      { label: "Features", href: "#features" },
+      { label: "Pricing", href: "#pricing" },
+    ],
+  },
+];
+
+describe("Footer", () => {
+  it("renders the brand, column headings and links (classic by default)", () => {
+    render(<Footer brand="Acurio" columns={columns} />);
+    expect(screen.getByText("Acurio")).toBeInTheDocument();
+    expect(screen.getByText("Product")).toBeInTheDocument();
+    expect(screen.getByRole("link", { name: "Features" })).toHaveAttribute(
+      "href",
+      "#features",
+    );
+    expect(screen.getByRole("link", { name: "Pricing" })).toBeInTheDocument();
+  });
+
+  it("renders a description and the bottom copy", () => {
+    render(<Footer brand="Acurio" columns={columns} description="A kit." bottom="Made with care" />);
+    expect(screen.getByText("A kit.")).toBeInTheDocument();
+    expect(screen.getByText("Made with care")).toBeInTheDocument();
+  });
+
+  it("renders the minimal option", () => {
+    render(<Footer brand="Acurio" columns={columns} option="minimal" />);
+    expect(screen.getByRole("link", { name: "Features" })).toBeInTheDocument();
+  });
+
+  it("renders the editorial option with a large wordmark", () => {
+    const { container } = render(<Footer brand="Acurio" columns={columns} option="editorial" />);
+    expect(screen.getByText("Acurio")).toBeInTheDocument();
+    // Editorial uses a large display wordmark.
+    expect(container.querySelector("span.text-5xl")).toBeInTheDocument();
+  });
+
+  it("renders a footer element tag", () => {
+    const { container } = render(<Footer brand="Acurio" columns={columns} />);
+    expect(container.querySelector("footer")).toBeInTheDocument();
+  });
+});

package/src/components/Hero/Hero.test.tsx

@@ -0,0 +1,71 @@
+import { describe, it, expect } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { Hero } from "./Hero";
+
+const base = {
+  title: "Build something great",
+  description: "A short description.",
+  eyebrow: "New release",
+};
+
+describe("Hero", () => {
+  it("renders the headline and description", () => {
+    render(<Hero {...base} />);
+    expect(
+      screen.getByRole("heading", { name: "Build something great" }),
+    ).toBeInTheDocument();
+    expect(screen.getByText("A short description.")).toBeInTheDocument();
+  });
+
+  it("renders an eyebrow, primary and secondary actions", () => {
+    render(
+      <Hero
+        {...base}
+        primaryAction={<a href="#a">Primary</a>}
+        secondaryAction={<a href="#b">Secondary</a>}
+      />,
+    );
+    expect(screen.getByText("New release")).toBeInTheDocument();
+    expect(screen.getByRole("link", { name: "Primary" })).toBeInTheDocument();
+    expect(screen.getByRole("link", { name: "Secondary" })).toBeInTheDocument();
+  });
+
+  it("renders the split variant by default with meta row and media", () => {
+    render(
+      <Hero
+        {...base}
+        media={<div data-testid="media" />}
+        meta={[{ label: "4.9/5", icon: <span>★</span> }]}
+      />,
+    );
+    expect(screen.getByTestId("media")).toBeInTheDocument();
+    expect(screen.getByText("4.9/5")).toBeInTheDocument();
+    const section = screen.getByTestId("media").closest("section");
+    expect(section).toHaveClass("bg-background");
+  });
+
+  it("renders the centered variant with centered copy", () => {
+    render(<Hero {...base} variant="centered" media={<div data-testid="m" />} />);
+    const h1 = screen.getByRole("heading", { name: "Build something great" });
+    expect(h1).toBeInTheDocument();
+    expect(screen.getByTestId("m")).toBeInTheDocument();
+  });
+
+  it("renders the statement variant as an ink band with a grain overlay", () => {
+    const { container } = render(<Hero {...base} variant="statement" />);
+    const section = container.querySelector("section");
+    expect(section).toHaveClass("bg-secondary");
+    // Statement paints a grain overlay div.
+    expect(container.querySelector(".grain")).toBeInTheDocument();
+  });
+
+  it("omits the meta row when no meta is supplied", () => {
+    render(<Hero {...base} />);
+    expect(screen.queryByRole("list")).not.toBeInTheDocument();
+  });
+
+  it("forwards an id to the section", () => {
+    const { container } = render(<Hero {...base} id="home" />);
+    expect(container.querySelector("section#home")).not.toBeNull();
+  });
+});