Card compact and expanded template

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");
+  });
+});