Standardize create-flow option steps on one question-and-options layout and Selection sizes.

Method cards, chips, and the right rail now share the two-column shell; last options clear the footer fade, See all stays under the stack, and the left heading no longer jumps when the list expands.

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

app/components/cards/Selection/Selection.view.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import Chip from "../../controls/Chip";
 import Tag from "../../utility/Tag";
 import type { SelectionViewProps } from "./Selection.types";
 
@@ -26,34 +27,54 @@ function SelectionTag({
   return null;
 }
 
+function optionAriaLabel(label: string, supportText: string): string {
+  return supportText ? `${label}: ${supportText}` : label;
+}
+
 export function SelectionView({
   label,
   supportText,
   recommended,
   selected,
-  orientation,
+  size,
   showInfoIcon,
   id: selectionId,
   className,
   onClick,
   onKeyDown,
 }: SelectionViewProps) {
+  const ariaLabel = optionAriaLabel(label, supportText);
+
+  if (size === "s") {
+    return (
+      <Chip
+        label={label}
+        state={selected ? "selected" : "unselected"}
+        size="m"
+        ariaLabel={ariaLabel}
+        className={className}
+        onClick={() => onClick()}
+      />
+    );
+  }
+
   const borderClass = "border border-[var(--color-border-default-primary)]";
   const selectedBorder = selected
     ? "outline outline-4 outline-dashed outline-black outline-offset-[-4px]"
     : "";
+  const cardIdProp = selectionId ? { "data-card-id": selectionId } : {};
 
-  // Figma: "Card / CardSelection" vertical stack — node `16775:28762` (dev).
-  // Prop `orientation="horizontal"` is this stacked layout (historical naming).
-  if (orientation === "horizontal") {
+  if (size === "m") {
     const baseClasses = `select-none rounded-[var(--measures-radius-200,8px)] bg-[var(--color-gray-000)] px-4 py-3 transition-[border-color,box-shadow,outline] duration-200 cursor-pointer ${borderClass} ${selectedBorder} ${className}`;
 
     return (
       <div
-        {...(selectionId ? { "data-card-id": selectionId } : {})}
+        {...cardIdProp}
         role="button"
         tabIndex={0}
-        aria-label={supportText ? `${label}: ${supportText}` : label}
+        aria-label={ariaLabel}
+        aria-pressed={selected}
+        data-selection-size="m"
         className={`${baseClasses} flex min-h-0 w-full flex-col items-start justify-center gap-1`}
         onClick={onClick}
         onKeyDown={onKeyDown}
@@ -75,10 +96,12 @@ export function SelectionView({
 
   return (
     <div
-      {...(selectionId ? { "data-card-id": selectionId } : {})}
+      {...cardIdProp}
       role="button"
       tabIndex={0}
-      aria-label={supportText ? `${label}: ${supportText}` : label}
+      aria-label={ariaLabel}
+      aria-pressed={selected}
+      data-selection-size="l"
       className={`${baseClasses} flex flex-row items-center justify-between gap-4`}
       onClick={onClick}
       onKeyDown={onKeyDown}