Card compact and expanded template

tests/components/Create.test.tsx

@@ -133,6 +133,20 @@ describe("Create", () => {
     expect(stepper).toHaveAttribute("aria-valuemax", "5");
   });
 
+  it("renders custom header when headerContent is provided", () => {
+    renderWithProviders(
+      <Create
+        {...defaultProps}
+        title="Default Title"
+        description="Default description"
+        headerContent={<span>Custom header</span>}
+      />,
+    );
+    expect(screen.getByText("Custom header")).toBeInTheDocument();
+    expect(screen.queryByText("Default Title")).not.toBeInTheDocument();
+    expect(screen.queryByText("Default description")).not.toBeInTheDocument();
+  });
+
   it("renders custom footer content", () => {
     renderWithProviders(
       <Create

tests/components/TextArea.test.tsx

@@ -1,6 +1,10 @@
 import React from "react";
+import { describe, it, expect } from "vitest";
+import { screen } from "@testing-library/react";
+import "@testing-library/jest-dom/vitest";
 import TextArea from "../../app/components/controls/TextArea";
 import { componentTestSuite } from "../utils/componentTestSuite";
+import { renderWithProviders } from "../utils/test-utils";
 
 type TextAreaProps = React.ComponentProps<typeof TextArea>;
 
@@ -28,3 +32,14 @@ componentTestSuite<TextAreaProps>({
     errorProps: { error: true },
   },
 });
+
+describe("TextArea appearance", () => {
+  it("renders with appearance embedded and applies borderless styling", () => {
+    renderWithProviders(
+      <TextArea label="Notes" value="Some text" appearance="embedded" />,
+    );
+    const textarea = screen.getByRole("textbox", { name: /notes/i });
+    expect(textarea).toBeInTheDocument();
+    expect(textarea).toHaveClass("border-0");
+  });
+});