fix(showcase/shell-docs): Card renders icon, className, children instead of dropping them

Card's type accepted icon, className, and children but the component
body never read them — silent prop drop. Render icon above the title,
merge className onto the wrapper, and render children below the
description so MDX authors get the behavior the type signature
promises.

Author: jpr5

showcase/shell-docs/src/components/mdx-components.tsx

@@ -22,6 +22,9 @@ export function Card({
   title,
   description,
   href,
+  icon,
+  className,
+  children,
 }: {
   title: string;
   description?: string;
@@ -30,14 +33,34 @@ export function Card({
   className?: string;
   children?: React.ReactNode;
 }) {
+  // Render `icon`, `className`, and `children` instead of silently
+  // dropping them — matches MDX author expectations (Mintlify-style
+  // Cards accept all three).
+  const mergedClassName = [
+    "rounded-lg border border-[var(--border)] bg-[var(--bg-surface)] p-4 hover:bg-[var(--bg-elevated)] transition-colors",
+    className,
+  ]
+    .filter(Boolean)
+    .join(" ");
+
   const content = (
-    <div className="rounded-lg border border-[var(--border)] bg-[var(--bg-surface)] p-4 hover:bg-[var(--bg-elevated)] transition-colors">
+    <div className={mergedClassName}>
+      {icon && (
+        <div className="mb-2 text-[var(--text-muted)]" aria-hidden>
+          {icon}
+        </div>
+      )}
       <div className="font-semibold text-[var(--text)] text-sm">{title}</div>
       {description && (
         <div className="text-xs text-[var(--text-muted)] mt-1">
           {description}
         </div>
       )}
+      {children && (
+        <div className="text-xs text-[var(--text-secondary)] mt-2">
+          {children}
+        </div>
+      )}
     </div>
   );