Open each core value as a card of meaning and signals steps, so groups write their own words from an empty field with Generate draft, skip values without blocking the flow, and Customize without keeping helper text as the description.

tests/components/ModalFooter.test.tsx

@@ -1,4 +1,7 @@
-import { describe, vi } from "vitest";
+import { describe, it, expect, vi } from "vitest";
+import { screen, fireEvent } from "@testing-library/react";
+import "@testing-library/jest-dom/vitest";
+import { renderWithProviders } from "../utils/test-utils";
 import {
   componentTestSuite,
   type ComponentTestSuiteConfig,
@@ -27,4 +30,26 @@ const config: ComponentTestSuiteConfig<Props> = {
 
 describe("ModalFooter", () => {
   componentTestSuite<Props>(config);
+
+  it("renders Cancel left of Next in the trailing group", () => {
+    const onCancel = vi.fn();
+    const onNext = vi.fn();
+    renderWithProviders(
+      <ModalFooter
+        showBackButton={false}
+        showCancelButton
+        showNextButton
+        onCancel={onCancel}
+        onNext={onNext}
+        cancelButtonText="Cancel"
+        nextButtonText="Add to Rule"
+        stepper={false}
+      />,
+    );
+    fireEvent.click(screen.getByRole("button", { name: "Cancel" }));
+    expect(onCancel).toHaveBeenCalledTimes(1);
+    expect(onNext).not.toHaveBeenCalled();
+    fireEvent.click(screen.getByRole("button", { name: "Add to Rule" }));
+    expect(onNext).toHaveBeenCalledTimes(1);
+  });
 });