Open create-flow method modals with editable fields and tertiary default copy.

Seeded section text should look like the form default state, not locked primary, and Customize stays on the kebab instead of unlocking the body.

Co-authored-by: Cursor <cursoragent@cursor.com>

tests/components/ConflictManagementScreen.test.tsx

@@ -0,0 +1,37 @@
+import { describe, it, expect, afterEach } from "vitest";
+import {
+  renderWithProviders as render,
+  screen,
+  cleanup,
+  within,
+} from "../utils/test-utils";
+import { fireEvent } from "@testing-library/react";
+import "@testing-library/jest-dom/vitest";
+import { ConflictManagementScreen } from "../../app/(app)/create/screens/card/ConflictManagementScreen";
+
+afterEach(() => {
+  cleanup();
+});
+
+describe("ConflictManagementScreen", () => {
+  it("opens section fields editable without Customize", async () => {
+    render(<ConflictManagementScreen />);
+    fireEvent.click(
+      screen.getAllByRole("button", {
+        name: /Peer Mediation: Trained members/,
+      })[0],
+    );
+    const dialog = await screen.findByRole("dialog");
+    const fields = within(dialog).getAllByRole("textbox");
+    expect(fields.length).toBeGreaterThan(0);
+    for (const field of fields) {
+      expect(field).toBeEnabled();
+    }
+    fireEvent.click(
+      within(dialog).getByRole("button", { name: "More options" }),
+    );
+    expect(
+      screen.getByRole("menuitem", { name: "Customize" }),
+    ).toBeInTheDocument();
+  });
+});

tests/components/MembershipMethodsScreen.test.tsx

@@ -0,0 +1,37 @@
+import { describe, it, expect, afterEach } from "vitest";
+import {
+  renderWithProviders as render,
+  screen,
+  cleanup,
+  within,
+} from "../utils/test-utils";
+import { fireEvent } from "@testing-library/react";
+import "@testing-library/jest-dom/vitest";
+import { MembershipMethodsScreen } from "../../app/(app)/create/screens/card/MembershipMethodsScreen";
+
+afterEach(() => {
+  cleanup();
+});
+
+describe("MembershipMethodsScreen", () => {
+  it("opens section fields editable without Customize", async () => {
+    render(<MembershipMethodsScreen />);
+    fireEvent.click(
+      screen.getAllByRole("button", {
+        name: /Open Access: Maximum inclusion/,
+      })[0],
+    );
+    const dialog = await screen.findByRole("dialog");
+    const fields = within(dialog).getAllByRole("textbox");
+    expect(fields.length).toBeGreaterThan(0);
+    for (const field of fields) {
+      expect(field).toBeEnabled();
+    }
+    fireEvent.click(
+      within(dialog).getByRole("button", { name: "More options" }),
+    );
+    expect(
+      screen.getByRole("menuitem", { name: "Customize" }),
+    ).toBeInTheDocument();
+  });
+});

tests/components/TextArea.test.tsx

@@ -42,4 +42,17 @@ describe("TextArea appearance", () => {
     expect(textarea).toBeInTheDocument();
     expect(textarea).toHaveClass("border-0");
   });
+
+  it("uses tertiary text in the embedded default state and primary on focus", () => {
+    renderWithProviders(
+      <TextArea label="Notes" value="Some text" appearance="embedded" />,
+    );
+    const textarea = screen.getByRole("textbox", { name: /notes/i });
+    expect(textarea).toHaveClass(
+      "text-[var(--color-content-default-tertiary,#b4b4b4)]",
+    );
+    expect(textarea).toHaveClass(
+      "focus:text-[var(--color-content-default-primary)]",
+    );
+  });
 });

tests/pages/communication-methods.test.jsx

@@ -126,6 +126,33 @@ describe("Create flow communication-methods page", () => {
     expect(screen.getByRole("menuitem", { name: "Customize" })).toBeInTheDocument();
   });
 
+  test("meta-only custom policy opens with editable section fields", async () => {
+    const user = userEvent.setup();
+    render(
+      <CommunicationMethodsScreenWithState
+        initial={{
+          selectedCommunicationMethodIds: [CUSTOM_POLICY_ID],
+          customMethodCardMetaById: {
+            [CUSTOM_POLICY_ID]: { label: "My policy", supportText: "Desc" },
+          },
+        }}
+      />,
+    );
+
+    await user.click(
+      screen.getAllByRole("button", { name: /My policy: Desc/ })[0],
+    );
+    const dialog = await screen.findByRole("dialog");
+    const textboxes = within(dialog).getAllByRole("textbox");
+    expect(textboxes.length).toBeGreaterThan(0);
+    for (const field of textboxes) {
+      expect(field).not.toBeDisabled();
+    }
+    expect(
+      within(dialog).queryByText("No custom fields yet."),
+    ).not.toBeInTheDocument();
+  });
+
   test("renders without error", () => {
     render(<CommunicationMethodsScreen />);
 

tests/pages/decision-approaches.test.jsx

@@ -201,6 +201,29 @@ describe("Create flow decision-approaches page", () => {
     ).toHaveTextContent("SELECTED");
   });
 
+  test("opens approach fields editable without Customize", async () => {
+    const user = userEvent.setup();
+    render(<DecisionApproachesScreen />);
+
+    await user.click(
+      screen.getByRole("button", {
+        name: /Lazy Consensus: A decision is assumed approved/,
+      }),
+    );
+    const dialog = await screen.findByRole("dialog");
+    const textboxes = within(dialog).getAllByRole("textbox");
+    expect(textboxes.length).toBeGreaterThan(0);
+    for (const field of textboxes) {
+      expect(field).not.toBeDisabled();
+    }
+    await user.click(
+      within(dialog).getByRole("button", { name: "More options" }),
+    );
+    expect(
+      screen.getByRole("menuitem", { name: "Customize" }),
+    ).toBeInTheDocument();
+  });
+
   test("clicking a card opens the create modal and confirming selects it", async () => {
     const user = userEvent.setup();
     render(<DecisionApproachesScreen />);