{
  "version": "0.2.0-preview.1",
  "content_digest": "70ac710f4d22dce040e7ac593379ba8aca9dcb59a0b9c0f839819cae0e2bb721",
  "status": "preview",
  "authority": {
    "repository": "cloakedinc/design",
    "path": "packages/design-system",
    "catalog": "packages/design-system/catalog.json",
    "status": "preview"
  },
  "provenance": {
    "repo": "cloakedinc/automation",
    "commit": "f96f416e1c3bfbfaffcd155a88b87b18b8bb25f1",
    "path": "packages/design-system",
    "imported_spec_status": "approved"
  },
  "adaptations": [
    {
      "id": "button-content-gap",
      "status": "preview",
      "description": "Use the specification's 4px content gap instead of the inherited 8px implementation gap."
    },
    {
      "id": "keyboard-focus",
      "status": "preview",
      "description": "Add visible Button and Input keyboard focus and an overridable inset focus default for shared button resets, including FAQ cards and ListItem rows."
    },
    {
      "id": "supporting-text-contrast",
      "status": "preview",
      "description": "Map light secondary text to the existing grey-04-strong primitive for readable helper text on white and cream."
    },
    {
      "id": "danger-text-contrast",
      "status": "preview",
      "description": "Separate readable danger text/borders from destructive fills; preserve the primary danger-button fill and label pair."
    },
    {
      "id": "preview-status",
      "status": "preview",
      "description": "Local components, specs and token adaptations await human sign-off; upstream approved status is provenance only."
    },
    {
      "id": "motion-comparison-accessibility",
      "status": "preview",
      "description": "Preserve the original MotionShowcase comparisons while requiring explicit replay, responding to live reduced-motion changes, and keeping duration tracks usable on small screens."
    },
    {
      "id": "list-item-ownership",
      "status": "preview",
      "description": "List owns listitem wrappers for its content rows, while section labels stay outside the row count and standalone rows retain their existing semantics."
    },
    {
      "id": "card-delta-text-contrast",
      "status": "preview",
      "description": "Mix Card.Delta foregrounds from 60% existing tone solid and 40% primary text for readable contrast in both themes; preserve the four original tone fills."
    },
    {
      "id": "carousel-keyboard-access",
      "status": "preview",
      "description": "Keep all native-scrolling carousel slide controls exposed to assistive technology and keyboard navigation; pause autoplay while focus is inside the carousel."
    }
  ],
  "id": "card",
  "name": "Card",
  "category": "Cards",
  "summary": "The generic surface primitive, composed from typed slots for regions, text, and summary figures, and optionally pressable.",
  "documentation": {
    "summary": "The generic surface primitive, composed from typed slots for regions, text, and summary figures, and optionally pressable.",
    "guidance": [
      {
        "heading": "Overview",
        "body": "The generic surface primitive. Compose it from typed slots — `Card.Header` / `Card.Body` /\n`Card.Footer`, `Card.Title` / `Card.Description`, `Card.Metric` / `Card.Delta` — rather than raw\nmarkup. `surface` encodes emphasis. For a selectable option, use `SelectionCard`."
      },
      {
        "heading": "Use when",
        "body": "`surface` is the semantic decision: a plain container versus a tinted prompt.\n\nSlots own their own padding, so the root usually keeps `padding=\"none\"`. `layout=\"split\"` lays the\ntop-level slots in a row instead of a column; it is available but not currently used in app code —\n`stack` is the norm."
      },
      {
        "heading": "Composition",
        "body": "Header (title + description) over a body list — the canonical slot arrangement.\n\nThe summary-card pattern pairs `Card.Metric` + `Card.Delta` in a header with a body stat list and a\nfooter link."
      },
      {
        "heading": "Pressable",
        "body": "Pass `onPress` to turn the whole card into a tap target, or `Card.Footer onPress` for a pressable\nfooter only."
      }
    ],
    "usage": [
      {
        "variant": "default",
        "use": "The standard container for grouping content, metrics, and lists. Nearly every card in the app is `default`.",
        "avoid": "A moment you want to actively steer the user toward — that earns `highlight`.",
        "axis": "Surface"
      },
      {
        "variant": "highlight",
        "use": "A tinted surface that steers users toward a short next step — a setup prompt or inline CTA (ProfileSetupCard).",
        "avoid": "Ordinary content. Rare by design — at most one per screen so the highlight keeps its pull.",
        "axis": "Surface"
      }
    ],
    "examples": [],
    "source": "packages/design-system/src/components/cards/Card/Card.mdx",
    "status": "local-preview",
    "note": "Guidance is read from local documentation, originally imported from the frozen source. Platform assertions in guidance are not parity verification."
  },
  "source": {
    "path": "packages/design-system/src/components/cards/Card/Card.tsx",
    "code": "import { Delta } from './CardDelta/CardDelta';\nimport { Metric } from './CardMetric/CardMetric';\nimport { CardRoot } from './CardRoot/CardRoot';\nimport { Body, CardFooter, Header, Stack } from './CardSlots/CardSlots';\nimport { StatusIndicator } from '../../status/StatusIndicator/StatusIndicator';\nimport { Description, Title } from './CardTextSlots/CardTextSlots';\n\nexport type {\n    CardAlign,\n    CardDeltaProps,\n    CardFooterProps,\n    CardJustify,\n    CardLayout,\n    CardMetricProps,\n    CardPadding,\n    CardProps,\n    CardRadius,\n    CardSlotGap,\n    CardSlotLayout,\n    CardSlotPadding,\n    CardStackProps,\n    CardSurface,\n    CardTextSlotProps,\n    CardZoneProps,\n} from './types';\n\n/**\n * The card surface plus its slots: `Header`, `Body`, `Footer`, and `Stack` lay content out, while\n * `Title`, `Description`, `Metric`, and `Delta` are the content pieces — this namespace is the only\n * way to reach them. `StatusIndicator` also hangs here, but it lives in `status/` and is exported\n * on its own.\n */\nexport const Card = Object.assign(CardRoot, {\n    Header,\n    Body,\n    Footer: CardFooter,\n    Stack,\n    Title,\n    Description,\n    Metric,\n    Delta,\n    StatusIndicator,\n});\n"
  },
  "spec": {
    "$schema": "../../../specs/component-spec.schema.json",
    "identity": {
      "name": "Card",
      "status": "preview",
      "version": "1.0.0",
      "summary": "The generic surface primitive, composed from typed slots for regions, text, and summary figures, and optionally pressable."
    },
    "parts": [
      {
        "id": "root",
        "label": "Root",
        "description": "Surface shell carrying the surface, radius, layout, and padding.",
        "required": true
      },
      {
        "id": "header",
        "label": "Card.Header",
        "description": "Top region slot, usually title and status."
      },
      {
        "id": "body",
        "label": "Card.Body",
        "description": "Main region slot for content and lists."
      },
      {
        "id": "footer",
        "label": "Card.Footer",
        "description": "Bottom region slot, optionally pressable."
      },
      {
        "id": "stack",
        "label": "Card.Stack",
        "description": "Ad-hoc grouping slot within a region."
      },
      {
        "id": "title",
        "label": "Card.Title",
        "description": "Region heading; wraps to as many lines as the copy needs."
      },
      {
        "id": "description",
        "label": "Card.Description",
        "description": "Supporting region text."
      },
      {
        "id": "metric",
        "label": "Card.Metric",
        "description": "Large metric value with optional unit."
      },
      {
        "id": "delta",
        "label": "Card.Delta",
        "description": "Change label: a caret or trend marker with the movement, toned success, warning, danger, or neutral. Tone follows the direction unless the figure's sentiment runs against its arrow."
      }
    ],
    "allowedDesignChoices": {
      "variants": {
        "container": {
          "label": "Container",
          "description": "The single generic surface; content comes from slots."
        }
      },
      "sizes": {},
      "surfaces": {
        "default": {
          "label": "Default",
          "description": "Raised surface background."
        },
        "highlight": {
          "label": "Highlight",
          "description": "Tinted background for prompts and CTAs."
        }
      },
      "radii": {
        "xs": {
          "label": "Extra small"
        },
        "sm": {
          "label": "Small"
        },
        "md": {
          "label": "Medium"
        },
        "lg": {
          "label": "Large",
          "description": "The default corner radius."
        },
        "xl": {
          "label": "Extra large"
        }
      },
      "paddings": {
        "none": {
          "label": "None",
          "description": "No outer padding; slots own their padding."
        },
        "default": {
          "label": "Default",
          "description": "16-unit outer padding on the shell."
        }
      },
      "layouts": {
        "stack": {
          "label": "Stack",
          "description": "Top-level slots flow in a column."
        },
        "split": {
          "label": "Split",
          "description": "Top-level slots flow in a row."
        }
      }
    },
    "variants": [
      {
        "id": "container",
        "label": "Container",
        "description": "Generic slotted surface.",
        "platforms": [
          "ios",
          "android",
          "web"
        ]
      }
    ],
    "sizes": [],
    "measurements": [
      {
        "id": "surface-radius",
        "label": "Default corner radius",
        "kind": "exact",
        "token": "--cds-radius-lg",
        "value": 20,
        "unit": "px",
        "appliesTo": [
          "root"
        ]
      },
      {
        "id": "split-gap",
        "label": "Split layout gap",
        "kind": "exact",
        "token": "--cds-space-8",
        "value": 8,
        "unit": "px",
        "appliesTo": [
          "root"
        ]
      },
      {
        "id": "default-padding",
        "label": "Default outer padding",
        "kind": "exact",
        "token": "--cds-space-16",
        "value": 16,
        "unit": "px",
        "appliesTo": [
          "root"
        ]
      }
    ],
    "layout": {
      "alignment": "Slots stack in a column by default, or lay out in a row under the split layout.",
      "flow": "The shell hosts typed slots; slots own their own padding, so the shell usually keeps padding none.",
      "notes": [
        "Use SelectionCard when the card is a selectable option rather than a container."
      ]
    },
    "typographyAndColor": {
      "typography": [
        {
          "label": "Title",
          "description": "Card.Title uses the body ramp emphasis.",
          "token": "--cds-type-body-size"
        }
      ],
      "colors": [
        {
          "label": "Default surface",
          "description": "The default surface uses the raised background.",
          "token": "--cds-bg-surface"
        },
        {
          "label": "Highlight surface",
          "description": "The highlight surface uses the banner container tint.",
          "token": "--cds-banner-container"
        },
        {
          "label": "Text",
          "description": "Card content uses primary text.",
          "token": "--cds-text-primary"
        },
        {
          "label": "Delta label",
          "description": "Card.Delta's marker and label mix 60% of the tone's solid colour with 40% primary text for readable contrast on the unchanged subtle fill. Success is shown; danger, warning and neutral follow the same calculation. This local adaptation remains preview pending human sign-off.",
          "token": "--cds-status-success-solid"
        },
        {
          "label": "Delta fill",
          "description": "The delta pill sits on the matching subtle tint for its tone.",
          "token": "--cds-status-success-subtle"
        }
      ]
    },
    "states": [
      {
        "id": "default",
        "label": "Default",
        "description": "Static container surface."
      },
      {
        "id": "highlight",
        "label": "Highlight",
        "description": "Tinted prompt surface."
      },
      {
        "id": "pressable",
        "label": "Pressable",
        "description": "onPress makes the whole card a tap target with tap feedback."
      }
    ],
    "behavior": [
      {
        "label": "Slot composition",
        "description": "Compose regions and figures from typed slots rather than raw markup."
      },
      {
        "label": "Pressable",
        "description": "onPress makes the card a button; a pressable footer targets just the footer. The two are mutually exclusive — a pressable footer inside a pressable card would nest interactive controls."
      },
      {
        "label": "Silhouette measurement",
        "description": "silhouette marks the card as a measurement target so a page can record its settled geometry for a loading placeholder. Presence-only and non-visual: it renders a data attribute and changes nothing about the card itself."
      }
    ],
    "accessibility": [
      {
        "label": "Pressable name",
        "description": "Give a pressable card an accessible label when visible copy is insufficient."
      },
      {
        "label": "Structure",
        "description": "Slots keep a predictable region order for assistive tech."
      }
    ],
    "contentAdaptation": [
      {
        "label": "Region padding",
        "description": "Slots carry their own padding tokens so the shell stays padding-free."
      },
      {
        "label": "Split content",
        "description": "The split layout pairs a metric with supporting content in a row."
      }
    ],
    "motionHaptics": {
      "motion": [
        {
          "label": "Press feedback",
          "description": "Pressable cards apply tap feedback on press."
        }
      ],
      "haptics": [
        {
          "label": "Press haptic",
          "description": "Pressable cards request a light haptic on a successful press."
        }
      ]
    },
    "platformDifferences": []
  },
  "spec_source": "packages/design-system/src/components/cards/Card/Card.spec.json",
  "guidance_source": {
    "path": "packages/design-system/src/components/cards/Card/Card.mdx",
    "code": "import { Meta, Canvas, Controls } from '@storybook/addon-docs/blocks';\nimport { ComponentSpec, UsageTable, Do, Dont, Compare } from '../../../../.storybook/blocks';\nimport * as Stories from './Card.stories';\nimport cardSpec from './Card.spec.json';\n\n<Meta of={Stories} />\n\n# Card\n\nThe generic surface primitive. Compose it from typed slots — `Card.Header` / `Card.Body` /\n`Card.Footer`, `Card.Title` / `Card.Description`, `Card.Metric` / `Card.Delta` — rather than raw\nmarkup. `surface` encodes emphasis. For a selectable option, use `SelectionCard`.\n\n<Canvas of={Stories.Playground} />\n\n## Use when\n\n`surface` is the semantic decision: a plain container versus a tinted prompt.\n\n<UsageTable\n    axis='Surface'\n    rows={[\n        {\n            variant: 'default',\n            use: 'The standard container for grouping content, metrics, and lists. Nearly every card in the app is `default`.',\n            avoid: 'A moment you want to actively steer the user toward — that earns `highlight`.',\n        },\n        {\n            variant: 'highlight',\n            use: 'A tinted surface that steers users toward a short next step — a setup prompt or inline CTA (ProfileSetupCard).',\n            avoid: 'Ordinary content. Rare by design — at most one per screen so the highlight keeps its pull.',\n        },\n    ]}\n/>\n\nSlots own their own padding, so the root usually keeps `padding=\"none\"`. `layout=\"split\"` lays the\ntop-level slots in a row instead of a column; it is available but not currently used in app code —\n`stack` is the norm.\n\n## Composition\n\nHeader (title + description) over a body list — the canonical slot arrangement.\n\n<Canvas of={Stories.Basic} />\n\nThe summary-card pattern pairs `Card.Metric` + `Card.Delta` in a header with a body stat list and a\nfooter link.\n\n<Canvas of={Stories.MetricSummary} />\n\n## Pressable\n\nPass `onPress` to turn the whole card into a tap target, or `Card.Footer onPress` for a pressable\nfooter only.\n\n<Canvas of={Stories.Pressable} />\n<Canvas of={Stories.PressableFooter} />\n\n## Dark theme\n\n<Canvas of={Stories.DarkTheme} />\n\n## Design Guidelines\n\n<ComponentSpec spec={cardSpec} />\n\n## Props\n\n<Controls of={Stories.Playground} />\n"
  },
  "props": [
    {
      "name": "surface",
      "type": "CardSurface | undefined",
      "declared_type": "CardSurface",
      "required": false,
      "description": "Surface fill. Defaults to `default`; `highlight` swaps in the banner container color.",
      "source": {
        "path": "packages/design-system/src/components/cards/Card/types.ts",
        "line": 20
      },
      "values": [
        "default",
        "highlight"
      ],
      "values_complete": true,
      "default": "'default'",
      "default_kind": "source-expression"
    },
    {
      "name": "radius",
      "type": "CardRadius | undefined",
      "declared_type": "CardRadius",
      "required": false,
      "description": "Corner radius for the card surface. Defaults to `lg`.",
      "source": {
        "path": "packages/design-system/src/components/cards/Card/types.ts",
        "line": 22
      },
      "values": [
        "lg",
        "md",
        "sm",
        "xl",
        "xs"
      ],
      "values_complete": true,
      "default": "'lg'",
      "default_kind": "source-expression"
    },
    {
      "name": "layout",
      "type": "CardLayout | undefined",
      "declared_type": "CardLayout",
      "required": false,
      "description": "Direction slots flow. Defaults to `stack`; `split` sits them side by side with an 8px gap.",
      "source": {
        "path": "packages/design-system/src/components/cards/Card/types.ts",
        "line": 24
      },
      "values": [
        "split",
        "stack"
      ],
      "values_complete": true,
      "default": "'stack'",
      "default_kind": "source-expression"
    },
    {
      "name": "padding",
      "type": "CardPadding | undefined",
      "declared_type": "CardPadding",
      "required": false,
      "description": "Padding on the surface itself. Defaults to `none` because the slots pad themselves —\n`default` adds 16px that stacks on top of any padded slot.",
      "source": {
        "path": "packages/design-system/src/components/cards/Card/types.ts",
        "line": 29
      },
      "values": [
        "default",
        "none"
      ],
      "values_complete": true,
      "default": "'none'",
      "default_kind": "source-expression"
    },
    {
      "name": "children",
      "type": "React.ReactNode",
      "declared_type": "React.ReactNode",
      "required": true,
      "description": "",
      "source": {
        "path": "packages/design-system/src/components/cards/Card/types.ts",
        "line": 30
      }
    },
    {
      "name": "className",
      "type": "string | undefined",
      "declared_type": "string",
      "required": false,
      "description": "",
      "source": {
        "path": "packages/design-system/src/components/cards/Card/types.ts",
        "line": 31
      }
    },
    {
      "name": "style",
      "type": "React.CSSProperties | undefined",
      "declared_type": "React.CSSProperties",
      "required": false,
      "description": "",
      "source": {
        "path": "packages/design-system/src/components/cards/Card/types.ts",
        "line": 32
      }
    },
    {
      "name": "onPress",
      "type": "(() => void) | undefined",
      "declared_type": "() => void",
      "required": false,
      "description": "Providing this renders the root as a pressable `<button>` rather than a `<div>`.",
      "source": {
        "path": "packages/design-system/src/components/cards/Card/types.ts",
        "line": 34
      }
    },
    {
      "name": "ariaLabel",
      "type": "string | undefined",
      "declared_type": "string",
      "required": false,
      "description": "Accessible label for pressable cards when visible copy is not sufficient.",
      "source": {
        "path": "packages/design-system/src/components/cards/Card/types.ts",
        "line": 36
      }
    },
    {
      "name": "haptic",
      "type": "HapticFeedback | undefined",
      "declared_type": "HapticFeedback",
      "required": false,
      "description": "Haptic feedback for successful presses. Defaults to `true` (`light`).",
      "source": {
        "path": "packages/design-system/src/components/cards/Card/types.ts",
        "line": 38
      },
      "values": [
        "error",
        "heavy",
        "light",
        "medium",
        "selection",
        "success",
        "warning",
        false,
        true
      ],
      "values_complete": true,
      "default": "true",
      "default_kind": "source-expression"
    },
    {
      "name": "testId",
      "type": "string | undefined",
      "declared_type": "string",
      "required": false,
      "description": "`data-testid` on the root element.",
      "source": {
        "path": "packages/design-system/src/components/cards/Card/types.ts",
        "line": 40
      }
    },
    {
      "name": "silhouette",
      "type": "boolean | undefined",
      "declared_type": "boolean",
      "required": false,
      "description": "Marks the card as a silhouette measurement target.\n\nThe attribute is presence-only, so `false` is normalized away rather than rendered:\n`data-silhouette=\"false\"` would still match the `[data-silhouette]` query and opt the card in.",
      "source": {
        "path": "packages/design-system/src/components/cards/Card/types.ts",
        "line": 47
      },
      "values": [
        false,
        true
      ],
      "values_complete": true
    }
  ],
  "prop_shapes": {},
  "examples": [],
  "tokens": [
    {
      "name": "--cds-radius-lg",
      "light": "20px",
      "dark": "20px"
    },
    {
      "name": "--cds-space-8",
      "light": "8px",
      "dark": "8px"
    },
    {
      "name": "--cds-space-16",
      "light": "16px",
      "dark": "16px"
    },
    {
      "name": "--cds-type-body-size",
      "light": "1rem",
      "dark": "1rem"
    },
    {
      "name": "--cds-bg-surface",
      "light": "#ffffff",
      "dark": "#1b1b18"
    },
    {
      "name": "--cds-banner-container",
      "light": "#f3f1ed",
      "dark": "#141410"
    },
    {
      "name": "--cds-text-primary",
      "light": "#141410",
      "dark": "#f3f1ed"
    },
    {
      "name": "--cds-status-success-solid",
      "light": "#008924",
      "dark": "#008924"
    },
    {
      "name": "--cds-status-success-subtle",
      "light": "#0089241a",
      "dark": "#0089241a"
    }
  ],
  "visual_reference": {
    "stories": [
      {
        "id": "cloaked-design-system-cards-card--playground",
        "name": "Playground",
        "title": "Cloaked Design System/Cards/Card",
        "exportName": "Playground",
        "source_path": "packages/design-system/src/components/cards/Card/Card.stories.tsx",
        "source_digest": "5a515213100764f15ba28a3d23d00e478eda823ad2470e33803452a1c9907b02",
        "status": "preview",
        "local_url": "/storybook/iframe.html?id=cloaked-design-system-cards-card--playground&viewMode=story"
      },
      {
        "id": "cloaked-design-system-cards-card--basic",
        "name": "Basic",
        "title": "Cloaked Design System/Cards/Card",
        "exportName": "Basic",
        "source_path": "packages/design-system/src/components/cards/Card/Card.stories.tsx",
        "source_digest": "5a515213100764f15ba28a3d23d00e478eda823ad2470e33803452a1c9907b02",
        "status": "preview",
        "local_url": "/storybook/iframe.html?id=cloaked-design-system-cards-card--basic&viewMode=story"
      },
      {
        "id": "cloaked-design-system-cards-card--radii",
        "name": "Radii",
        "title": "Cloaked Design System/Cards/Card",
        "exportName": "Radii",
        "source_path": "packages/design-system/src/components/cards/Card/Card.stories.tsx",
        "source_digest": "5a515213100764f15ba28a3d23d00e478eda823ad2470e33803452a1c9907b02",
        "status": "preview",
        "local_url": "/storybook/iframe.html?id=cloaked-design-system-cards-card--radii&viewMode=story"
      },
      {
        "id": "cloaked-design-system-cards-card--highlighted-prompt",
        "name": "Highlighted Prompt",
        "title": "Cloaked Design System/Cards/Card",
        "exportName": "HighlightedPrompt",
        "source_path": "packages/design-system/src/components/cards/Card/Card.stories.tsx",
        "source_digest": "5a515213100764f15ba28a3d23d00e478eda823ad2470e33803452a1c9907b02",
        "status": "preview",
        "local_url": "/storybook/iframe.html?id=cloaked-design-system-cards-card--highlighted-prompt&viewMode=story"
      },
      {
        "id": "cloaked-design-system-cards-card--pressable",
        "name": "Pressable",
        "title": "Cloaked Design System/Cards/Card",
        "exportName": "Pressable",
        "source_path": "packages/design-system/src/components/cards/Card/Card.stories.tsx",
        "source_digest": "5a515213100764f15ba28a3d23d00e478eda823ad2470e33803452a1c9907b02",
        "status": "preview",
        "local_url": "/storybook/iframe.html?id=cloaked-design-system-cards-card--pressable&viewMode=story"
      },
      {
        "id": "cloaked-design-system-cards-card--metric-summary",
        "name": "Metric Summary",
        "title": "Cloaked Design System/Cards/Card",
        "exportName": "MetricSummary",
        "source_path": "packages/design-system/src/components/cards/Card/Card.stories.tsx",
        "source_digest": "5a515213100764f15ba28a3d23d00e478eda823ad2470e33803452a1c9907b02",
        "status": "preview",
        "local_url": "/storybook/iframe.html?id=cloaked-design-system-cards-card--metric-summary&viewMode=story"
      },
      {
        "id": "cloaked-design-system-cards-card--sectioned-rows",
        "name": "Sectioned Rows",
        "title": "Cloaked Design System/Cards/Card",
        "exportName": "SectionedRows",
        "source_path": "packages/design-system/src/components/cards/Card/Card.stories.tsx",
        "source_digest": "5a515213100764f15ba28a3d23d00e478eda823ad2470e33803452a1c9907b02",
        "status": "preview",
        "local_url": "/storybook/iframe.html?id=cloaked-design-system-cards-card--sectioned-rows&viewMode=story"
      },
      {
        "id": "cloaked-design-system-cards-card--visualization-content",
        "name": "Visualization Content",
        "title": "Cloaked Design System/Cards/Card",
        "exportName": "VisualizationContent",
        "source_path": "packages/design-system/src/components/cards/Card/Card.stories.tsx",
        "source_digest": "5a515213100764f15ba28a3d23d00e478eda823ad2470e33803452a1c9907b02",
        "status": "preview",
        "local_url": "/storybook/iframe.html?id=cloaked-design-system-cards-card--visualization-content&viewMode=story"
      },
      {
        "id": "cloaked-design-system-cards-card--split-layout",
        "name": "Split Layout",
        "title": "Cloaked Design System/Cards/Card",
        "exportName": "SplitLayout",
        "source_path": "packages/design-system/src/components/cards/Card/Card.stories.tsx",
        "source_digest": "5a515213100764f15ba28a3d23d00e478eda823ad2470e33803452a1c9907b02",
        "status": "preview",
        "local_url": "/storybook/iframe.html?id=cloaked-design-system-cards-card--split-layout&viewMode=story"
      },
      {
        "id": "cloaked-design-system-cards-card--metric-with-unit",
        "name": "Metric With Unit",
        "title": "Cloaked Design System/Cards/Card",
        "exportName": "MetricWithUnit",
        "source_path": "packages/design-system/src/components/cards/Card/Card.stories.tsx",
        "source_digest": "5a515213100764f15ba28a3d23d00e478eda823ad2470e33803452a1c9907b02",
        "status": "preview",
        "local_url": "/storybook/iframe.html?id=cloaked-design-system-cards-card--metric-with-unit&viewMode=story"
      },
      {
        "id": "cloaked-design-system-cards-card--pressable-footer",
        "name": "Pressable Footer",
        "title": "Cloaked Design System/Cards/Card",
        "exportName": "PressableFooter",
        "source_path": "packages/design-system/src/components/cards/Card/Card.stories.tsx",
        "source_digest": "5a515213100764f15ba28a3d23d00e478eda823ad2470e33803452a1c9907b02",
        "status": "preview",
        "local_url": "/storybook/iframe.html?id=cloaked-design-system-cards-card--pressable-footer&viewMode=story"
      },
      {
        "id": "cloaked-design-system-cards-card--dark-theme",
        "name": "Dark Theme",
        "title": "Cloaked Design System/Cards/Card",
        "exportName": "DarkTheme",
        "source_path": "packages/design-system/src/components/cards/Card/Card.stories.tsx",
        "source_digest": "5a515213100764f15ba28a3d23d00e478eda823ad2470e33803452a1c9907b02",
        "status": "preview",
        "local_url": "/storybook/iframe.html?id=cloaked-design-system-cards-card--dark-theme&viewMode=story"
      },
      {
        "id": "cloaked-design-system-cards-card--delta-overflow",
        "name": "Delta Overflow",
        "title": "Cloaked Design System/Cards/Card",
        "exportName": "DeltaOverflow",
        "source_path": "packages/design-system/src/components/cards/Card/Card.stories.tsx",
        "source_digest": "5a515213100764f15ba28a3d23d00e478eda823ad2470e33803452a1c9907b02",
        "status": "preview",
        "local_url": "/storybook/iframe.html?id=cloaked-design-system-cards-card--delta-overflow&viewMode=story"
      }
    ],
    "name": "Card",
    "id": "card",
    "category": "Cards"
  },
  "stories": [
    {
      "id": "cloaked-design-system-cards-card--playground",
      "name": "Playground",
      "title": "Cloaked Design System/Cards/Card",
      "exportName": "Playground",
      "source_path": "packages/design-system/src/components/cards/Card/Card.stories.tsx",
      "source_digest": "5a515213100764f15ba28a3d23d00e478eda823ad2470e33803452a1c9907b02",
      "status": "preview",
      "local_url": "/storybook/iframe.html?id=cloaked-design-system-cards-card--playground&viewMode=story"
    },
    {
      "id": "cloaked-design-system-cards-card--basic",
      "name": "Basic",
      "title": "Cloaked Design System/Cards/Card",
      "exportName": "Basic",
      "source_path": "packages/design-system/src/components/cards/Card/Card.stories.tsx",
      "source_digest": "5a515213100764f15ba28a3d23d00e478eda823ad2470e33803452a1c9907b02",
      "status": "preview",
      "local_url": "/storybook/iframe.html?id=cloaked-design-system-cards-card--basic&viewMode=story"
    },
    {
      "id": "cloaked-design-system-cards-card--radii",
      "name": "Radii",
      "title": "Cloaked Design System/Cards/Card",
      "exportName": "Radii",
      "source_path": "packages/design-system/src/components/cards/Card/Card.stories.tsx",
      "source_digest": "5a515213100764f15ba28a3d23d00e478eda823ad2470e33803452a1c9907b02",
      "status": "preview",
      "local_url": "/storybook/iframe.html?id=cloaked-design-system-cards-card--radii&viewMode=story"
    },
    {
      "id": "cloaked-design-system-cards-card--highlighted-prompt",
      "name": "Highlighted Prompt",
      "title": "Cloaked Design System/Cards/Card",
      "exportName": "HighlightedPrompt",
      "source_path": "packages/design-system/src/components/cards/Card/Card.stories.tsx",
      "source_digest": "5a515213100764f15ba28a3d23d00e478eda823ad2470e33803452a1c9907b02",
      "status": "preview",
      "local_url": "/storybook/iframe.html?id=cloaked-design-system-cards-card--highlighted-prompt&viewMode=story"
    },
    {
      "id": "cloaked-design-system-cards-card--pressable",
      "name": "Pressable",
      "title": "Cloaked Design System/Cards/Card",
      "exportName": "Pressable",
      "source_path": "packages/design-system/src/components/cards/Card/Card.stories.tsx",
      "source_digest": "5a515213100764f15ba28a3d23d00e478eda823ad2470e33803452a1c9907b02",
      "status": "preview",
      "local_url": "/storybook/iframe.html?id=cloaked-design-system-cards-card--pressable&viewMode=story"
    },
    {
      "id": "cloaked-design-system-cards-card--metric-summary",
      "name": "Metric Summary",
      "title": "Cloaked Design System/Cards/Card",
      "exportName": "MetricSummary",
      "source_path": "packages/design-system/src/components/cards/Card/Card.stories.tsx",
      "source_digest": "5a515213100764f15ba28a3d23d00e478eda823ad2470e33803452a1c9907b02",
      "status": "preview",
      "local_url": "/storybook/iframe.html?id=cloaked-design-system-cards-card--metric-summary&viewMode=story"
    },
    {
      "id": "cloaked-design-system-cards-card--sectioned-rows",
      "name": "Sectioned Rows",
      "title": "Cloaked Design System/Cards/Card",
      "exportName": "SectionedRows",
      "source_path": "packages/design-system/src/components/cards/Card/Card.stories.tsx",
      "source_digest": "5a515213100764f15ba28a3d23d00e478eda823ad2470e33803452a1c9907b02",
      "status": "preview",
      "local_url": "/storybook/iframe.html?id=cloaked-design-system-cards-card--sectioned-rows&viewMode=story"
    },
    {
      "id": "cloaked-design-system-cards-card--visualization-content",
      "name": "Visualization Content",
      "title": "Cloaked Design System/Cards/Card",
      "exportName": "VisualizationContent",
      "source_path": "packages/design-system/src/components/cards/Card/Card.stories.tsx",
      "source_digest": "5a515213100764f15ba28a3d23d00e478eda823ad2470e33803452a1c9907b02",
      "status": "preview",
      "local_url": "/storybook/iframe.html?id=cloaked-design-system-cards-card--visualization-content&viewMode=story"
    },
    {
      "id": "cloaked-design-system-cards-card--split-layout",
      "name": "Split Layout",
      "title": "Cloaked Design System/Cards/Card",
      "exportName": "SplitLayout",
      "source_path": "packages/design-system/src/components/cards/Card/Card.stories.tsx",
      "source_digest": "5a515213100764f15ba28a3d23d00e478eda823ad2470e33803452a1c9907b02",
      "status": "preview",
      "local_url": "/storybook/iframe.html?id=cloaked-design-system-cards-card--split-layout&viewMode=story"
    },
    {
      "id": "cloaked-design-system-cards-card--metric-with-unit",
      "name": "Metric With Unit",
      "title": "Cloaked Design System/Cards/Card",
      "exportName": "MetricWithUnit",
      "source_path": "packages/design-system/src/components/cards/Card/Card.stories.tsx",
      "source_digest": "5a515213100764f15ba28a3d23d00e478eda823ad2470e33803452a1c9907b02",
      "status": "preview",
      "local_url": "/storybook/iframe.html?id=cloaked-design-system-cards-card--metric-with-unit&viewMode=story"
    },
    {
      "id": "cloaked-design-system-cards-card--pressable-footer",
      "name": "Pressable Footer",
      "title": "Cloaked Design System/Cards/Card",
      "exportName": "PressableFooter",
      "source_path": "packages/design-system/src/components/cards/Card/Card.stories.tsx",
      "source_digest": "5a515213100764f15ba28a3d23d00e478eda823ad2470e33803452a1c9907b02",
      "status": "preview",
      "local_url": "/storybook/iframe.html?id=cloaked-design-system-cards-card--pressable-footer&viewMode=story"
    },
    {
      "id": "cloaked-design-system-cards-card--dark-theme",
      "name": "Dark Theme",
      "title": "Cloaked Design System/Cards/Card",
      "exportName": "DarkTheme",
      "source_path": "packages/design-system/src/components/cards/Card/Card.stories.tsx",
      "source_digest": "5a515213100764f15ba28a3d23d00e478eda823ad2470e33803452a1c9907b02",
      "status": "preview",
      "local_url": "/storybook/iframe.html?id=cloaked-design-system-cards-card--dark-theme&viewMode=story"
    },
    {
      "id": "cloaked-design-system-cards-card--delta-overflow",
      "name": "Delta Overflow",
      "title": "Cloaked Design System/Cards/Card",
      "exportName": "DeltaOverflow",
      "source_path": "packages/design-system/src/components/cards/Card/Card.stories.tsx",
      "source_digest": "5a515213100764f15ba28a3d23d00e478eda823ad2470e33803452a1c9907b02",
      "status": "preview",
      "local_url": "/storybook/iframe.html?id=cloaked-design-system-cards-card--delta-overflow&viewMode=story"
    }
  ],
  "stories_source": {
    "path": "packages/design-system/src/components/cards/Card/Card.stories.tsx",
    "code": "import type { Meta, StoryObj } from '@storybook/react-vite';\nimport React from 'react';\nimport { RiskMeter } from '../../visualizations/RiskMeter/RiskMeter';\nimport { Button } from '../../primitives/Button/Button';\nimport { Icon } from '../../primitives/Icon/Icon';\nimport { Tag } from '../../primitives/Tag/Tag';\nimport { Text } from '../../primitives/Text/Text';\nimport { VStack } from '../../layout/VStack/VStack';\nimport { List } from '../../organization/List/List';\nimport { disabledControl, hapticArgType, selectArgType } from '../../../storybook/controlOptions';\nimport { Card } from './Card';\nimport {\n    CARD_PLAYGROUND_ARG_TYPES,\n    CARD_PLAYGROUND_ARGS,\n    renderCardPlayground,\n    deltaOverflowStory,\n    renderMetricSummary,\n    renderSectionedRows,\n    renderVisualizationContent,\n    type CardPlaygroundArgs,\n} from './CardRoot/CardRoot.stories.fixtures';\nimport styles from './Card.stories.module.scss';\n\nconst meta: Meta<typeof Card> = {\n    title: 'Cloaked Design System/Cards/Card',\n    component: Card,\n    parameters: {\n        a11y: { test: 'error' },\n        docs: {\n            description: {\n                component:\n                    'The generic surface primitive. Compose it from typed slots rather than raw markup: `Card.Header` / ' +\n                    '`Card.Body` / `Card.Footer` for regions, `Card.Title` / `Card.Description` for text, `Card.Metric` / ' +\n                    '`Card.Delta` / `Card.StatusIndicator` for summary figures, and `Card.Stack` for ad-hoc grouping. ' +\n                    'Slots own their own padding, so the root usually keeps `padding=\"none\"`. Pass `onPress` to make the ' +\n                    'whole card a tap target, or `Card.Footer onPress` for a pressable footer only. Reach for ' +\n                    '`SelectionCard` when the card is a selectable option instead of a container.',\n            },\n        },\n    },\n    argTypes: {\n        children: disabledControl,\n        onPress: disabledControl,\n        testId: disabledControl,\n        surface: {\n            ...selectArgType(['default', 'highlight']),\n            description: 'Background treatment — `highlight` tints the card for prompts and CTAs.',\n        },\n        radius: {\n            ...selectArgType(['xs', 'sm', 'md', 'lg', 'xl']),\n            description: 'Corner radius token. Defaults to `lg`.',\n        },\n        layout: {\n            ...selectArgType(['stack', 'split']),\n            description: 'Top-level slot direction: `stack` (column) or `split` (row).',\n        },\n        padding: {\n            ...selectArgType(['none', 'default']),\n            description: 'Outer padding on the card shell. Slots carry their own padding, so this is usually `none`.',\n        },\n        haptic: hapticArgType,\n    },\n};\nexport default meta;\ntype Story = StoryObj<typeof Card>;\n\nexport const Playground: StoryObj<CardPlaygroundArgs> = {\n    args: CARD_PLAYGROUND_ARGS,\n    argTypes: CARD_PLAYGROUND_ARG_TYPES,\n    render: args => renderCardPlayground(args),\n};\n\nexport const Basic: Story = {\n    parameters: {\n        docs: {\n            description: { story: 'Header (title + description) over a body list — the canonical slot composition.' },\n        },\n    },\n    render: () => (\n        <div className={styles.fullFrame}>\n            <Card>\n                <Card.Header>\n                    <Card.Title>Summary</Card.Title>\n                    <Card.Description>Composable surface with typed layout slots.</Card.Description>\n                </Card.Header>\n                <Card.Body>\n                    <List>\n                        <List.Item.Stat label='Primary row' value='Ready' />\n                        <List.Item.Stat label='Secondary row' value='Available' divider={false} />\n                    </List>\n                </Card.Body>\n            </Card>\n        </div>\n    ),\n};\n\nexport const Radii: Story = {\n    parameters: {\n        docs: { description: { story: 'Every `radius` token from `xs` to `xl`. Cards default to `lg`.' } },\n    },\n    render: () => (\n        <div className={styles.fullFrame}>\n            <VStack gap={12}>\n                {(['xs', 'sm', 'md', 'lg', 'xl'] as const).map(radius => (\n                    <Card key={radius} radius={radius}>\n                        <Card.Body layout='row' align='center' justify='between'>\n                            <Text variant='body' color='primary'>\n                                radius = {radius}\n                            </Text>\n                            <Tag tone='neutral' emphasis='subtle' dot='success'>\n                                {radius}\n                            </Tag>\n                        </Card.Body>\n                    </Card>\n                ))}\n            </VStack>\n        </div>\n    ),\n};\n\nexport const HighlightedPrompt: Story = {\n    parameters: {\n        docs: {\n            description: { story: '`surface=\"highlight\"` tints the card to steer users toward a short next step.' },\n        },\n    },\n    render: () => (\n        <div className={styles.compactFrame}>\n            <Card surface='highlight'>\n                <Card.Body gap='lg' justify='between'>\n                    <Card.Title>Setup task</Card.Title>\n                    <Card.Description>Prompt users toward a short next step.</Card.Description>\n                    <Button\n                        variant='primary'\n                        size='sm'\n                        icon={<Icon name='arrow-right' size='small' />}\n                        ariaLabel='Open prompt'\n                        testId='card-prompt-open'\n                    />\n                </Card.Body>\n            </Card>\n        </div>\n    ),\n};\n\nexport const Pressable: Story = {\n    parameters: {\n        docs: { description: { story: '`onPress` turns the whole card into a button (`pressable` on press).' } },\n    },\n    render: () => (\n        <div className={styles.compactFrame}>\n            <Card onPress={() => {}} testId='card-pressable-example'>\n                <Card.Body layout='row' align='center' justify='between'>\n                    <Text variant='body' color='primary'>\n                        Open details\n                    </Text>\n                    <Icon name='arrow-right' size='small' />\n                </Card.Body>\n            </Card>\n        </div>\n    ),\n};\n\nexport const MetricSummary: Story = {\n    parameters: {\n        docs: {\n            description: {\n                story: '`Card.Metric` + `Card.Delta` in a header, a body stat list, and a footer link — the summary-card pattern.',\n            },\n        },\n    },\n    render: () => renderMetricSummary(),\n};\n\nexport const SectionedRows: Story = {\n    parameters: {\n        docs: { description: { story: 'A padding-free body hosting a `List.Section` of leading-avatar rows.' } },\n    },\n    render: () => renderSectionedRows(),\n};\n\nexport const VisualizationContent: Story = {\n    parameters: {\n        docs: {\n            description: { story: 'A body can host visualizations directly — here a `RiskMeter` above a `LineChart`.' },\n        },\n    },\n    render: () => renderVisualizationContent(),\n};\n\nexport const SplitLayout: Story = {\n    parameters: {\n        docs: {\n            description: {\n                story: '`layout=\"split\"` lays the card\\'s top-level slots in a row instead of a column — pair a metric with supporting content.',\n            },\n        },\n    },\n    render: () => (\n        <div className={styles.fullFrame}>\n            <Card layout='split' padding='default'>\n                <Card.Body padding='none' gap='xs' justify='center'>\n                    <Card.Metric value='68' unit='%' />\n                    <Card.Delta value='12 this week' direction='up' />\n                </Card.Body>\n                <Card.Body padding='none' grow>\n                    <RiskMeter value={68} ariaLabel='Exposure score' />\n                </Card.Body>\n            </Card>\n        </div>\n    ),\n};\n\nexport const MetricWithUnit: Story = {\n    parameters: {\n        docs: {\n            description: {\n                story: '`Card.Metric` with a `unit` suffix and a downward `Card.Delta` (`direction=\"down\"`) for a declining figure.',\n            },\n        },\n    },\n    render: () => (\n        <div className={styles.fullFrame}>\n            <Card>\n                <Card.Header gap='lg'>\n                    <Card.Title>Exposure score</Card.Title>\n                    <Card.Stack layout='row' padding='none' gap='md' align='center'>\n                        <Card.Metric value='38' unit='pts' />\n                        <Card.Delta value='6 this week' direction='down' />\n                    </Card.Stack>\n                </Card.Header>\n            </Card>\n        </div>\n    ),\n};\n\nexport const PressableFooter: Story = {\n    parameters: {\n        docs: {\n            description: {\n                story: 'A pressable `Card.Footer` — pass `onPress` to make just the footer a tap target with its own `testId`.',\n            },\n        },\n    },\n    render: () => (\n        <div className={styles.fullFrame}>\n            <Card>\n                <Card.Body gap='xs'>\n                    <Text variant='body' color='primary'>\n                        Weekly summary\n                    </Text>\n                    <Text variant='body-small' color='secondary'>\n                        3 new broker listings found.\n                    </Text>\n                </Card.Body>\n                <Card.Footer\n                    divider='top'\n                    justify='between'\n                    align='center'\n                    onPress={() => {}}\n                    testId='card-footer-pressable'\n                >\n                    <Text variant='body' color='primary'>\n                        View report\n                    </Text>\n                    <Icon name='arrow-right' size='small' />\n                </Card.Footer>\n            </Card>\n        </div>\n    ),\n};\n\nexport const DarkTheme: Story = {\n    globals: { theme: 'dark' },\n    render: () => (\n        <div className={styles.fullFrame}>\n            <Card>\n                <Card.Header>\n                    <Card.Title>Summary</Card.Title>\n                    <Card.Description>Composable surface with typed layout slots.</Card.Description>\n                </Card.Header>\n                <Card.Body>\n                    <List>\n                        <List.Item.Stat label='Primary row' value='Ready' />\n                        <List.Item.Stat label='Secondary row' value='Available' divider={false} />\n                    </List>\n                </Card.Body>\n            </Card>\n        </div>\n    ),\n};\n\nexport const DeltaOverflow: Story = deltaOverflowStory;\n"
  },
  "links": {
    "human": "/component-card",
    "json": "/data/components/card.json",
    "markdown": "/data/components/card.md",
    "storybook": "/storybook/?path=/story/cloaked-design-system-cards-card--playground"
  },
  "contract_status": "preview",
  "contract_kind": "source-derived",
  "approval": "required",
  "api": {
    "method": "typescript-type-checker",
    "typescript_version": "5.9.3",
    "public_export": "Card",
    "public_path": "Card",
    "import_path": "@cloakedinc/design-system",
    "root_kind": "component",
    "entrypoints": [
      {
        "name": "Card",
        "signature": 1,
        "visibility": "public",
        "source": {
          "path": "packages/design-system/src/components/cards/Card/CardRoot/CardRoot.tsx",
          "line": 11
        },
        "props_type": "CardProps",
        "props": [
          {
            "name": "surface",
            "type": "CardSurface | undefined",
            "declared_type": "CardSurface",
            "required": false,
            "description": "Surface fill. Defaults to `default`; `highlight` swaps in the banner container color.",
            "source": {
              "path": "packages/design-system/src/components/cards/Card/types.ts",
              "line": 20
            },
            "values": [
              "default",
              "highlight"
            ],
            "values_complete": true,
            "default": "'default'",
            "default_kind": "source-expression"
          },
          {
            "name": "radius",
            "type": "CardRadius | undefined",
            "declared_type": "CardRadius",
            "required": false,
            "description": "Corner radius for the card surface. Defaults to `lg`.",
            "source": {
              "path": "packages/design-system/src/components/cards/Card/types.ts",
              "line": 22
            },
            "values": [
              "lg",
              "md",
              "sm",
              "xl",
              "xs"
            ],
            "values_complete": true,
            "default": "'lg'",
            "default_kind": "source-expression"
          },
          {
            "name": "layout",
            "type": "CardLayout | undefined",
            "declared_type": "CardLayout",
            "required": false,
            "description": "Direction slots flow. Defaults to `stack`; `split` sits them side by side with an 8px gap.",
            "source": {
              "path": "packages/design-system/src/components/cards/Card/types.ts",
              "line": 24
            },
            "values": [
              "split",
              "stack"
            ],
            "values_complete": true,
            "default": "'stack'",
            "default_kind": "source-expression"
          },
          {
            "name": "padding",
            "type": "CardPadding | undefined",
            "declared_type": "CardPadding",
            "required": false,
            "description": "Padding on the surface itself. Defaults to `none` because the slots pad themselves —\n`default` adds 16px that stacks on top of any padded slot.",
            "source": {
              "path": "packages/design-system/src/components/cards/Card/types.ts",
              "line": 29
            },
            "values": [
              "default",
              "none"
            ],
            "values_complete": true,
            "default": "'none'",
            "default_kind": "source-expression"
          },
          {
            "name": "children",
            "type": "React.ReactNode",
            "declared_type": "React.ReactNode",
            "required": true,
            "description": "",
            "source": {
              "path": "packages/design-system/src/components/cards/Card/types.ts",
              "line": 30
            }
          },
          {
            "name": "className",
            "type": "string | undefined",
            "declared_type": "string",
            "required": false,
            "description": "",
            "source": {
              "path": "packages/design-system/src/components/cards/Card/types.ts",
              "line": 31
            }
          },
          {
            "name": "style",
            "type": "React.CSSProperties | undefined",
            "declared_type": "React.CSSProperties",
            "required": false,
            "description": "",
            "source": {
              "path": "packages/design-system/src/components/cards/Card/types.ts",
              "line": 32
            }
          },
          {
            "name": "onPress",
            "type": "(() => void) | undefined",
            "declared_type": "() => void",
            "required": false,
            "description": "Providing this renders the root as a pressable `<button>` rather than a `<div>`.",
            "source": {
              "path": "packages/design-system/src/components/cards/Card/types.ts",
              "line": 34
            }
          },
          {
            "name": "ariaLabel",
            "type": "string | undefined",
            "declared_type": "string",
            "required": false,
            "description": "Accessible label for pressable cards when visible copy is not sufficient.",
            "source": {
              "path": "packages/design-system/src/components/cards/Card/types.ts",
              "line": 36
            }
          },
          {
            "name": "haptic",
            "type": "HapticFeedback | undefined",
            "declared_type": "HapticFeedback",
            "required": false,
            "description": "Haptic feedback for successful presses. Defaults to `true` (`light`).",
            "source": {
              "path": "packages/design-system/src/components/cards/Card/types.ts",
              "line": 38
            },
            "values": [
              "error",
              "heavy",
              "light",
              "medium",
              "selection",
              "success",
              "warning",
              false,
              true
            ],
            "values_complete": true,
            "default": "true",
            "default_kind": "source-expression"
          },
          {
            "name": "testId",
            "type": "string | undefined",
            "declared_type": "string",
            "required": false,
            "description": "`data-testid` on the root element.",
            "source": {
              "path": "packages/design-system/src/components/cards/Card/types.ts",
              "line": 40
            }
          },
          {
            "name": "silhouette",
            "type": "boolean | undefined",
            "declared_type": "boolean",
            "required": false,
            "description": "Marks the card as a silhouette measurement target.\n\nThe attribute is presence-only, so `false` is normalized away rather than rendered:\n`data-silhouette=\"false\"` would still match the `[data-silhouette]` query and opt the card in.",
            "source": {
              "path": "packages/design-system/src/components/cards/Card/types.ts",
              "line": 47
            },
            "values": [
              false,
              true
            ],
            "values_complete": true
          }
        ],
        "branches": [],
        "constraints": [],
        "extraction_status": "extracted"
      },
      {
        "name": "Card.Header",
        "signature": 1,
        "visibility": "public",
        "source": {
          "path": "packages/design-system/src/components/cards/Card/CardSlots/CardSlots.tsx",
          "line": 12
        },
        "props_type": "CardZoneProps",
        "props": [
          {
            "name": "children",
            "type": "React.ReactNode",
            "declared_type": "React.ReactNode",
            "required": true,
            "description": "",
            "source": {
              "path": "packages/design-system/src/components/cards/Card/types.ts",
              "line": 55
            }
          },
          {
            "name": "className",
            "type": "string | undefined",
            "declared_type": "string",
            "required": false,
            "description": "",
            "source": {
              "path": "packages/design-system/src/components/cards/Card/types.ts",
              "line": 56
            }
          },
          {
            "name": "style",
            "type": "React.CSSProperties | undefined",
            "declared_type": "React.CSSProperties",
            "required": false,
            "description": "",
            "source": {
              "path": "packages/design-system/src/components/cards/Card/types.ts",
              "line": 57
            }
          },
          {
            "name": "layout",
            "type": "CardSlotLayout | undefined",
            "declared_type": "CardSlotLayout",
            "required": false,
            "description": "Flow direction inside the slot. Defaults to `stack`.",
            "source": {
              "path": "packages/design-system/src/components/cards/Card/types.ts",
              "line": 59
            },
            "values": [
              "row",
              "stack"
            ],
            "values_complete": true
          },
          {
            "name": "padding",
            "type": "CardSlotPadding | undefined",
            "declared_type": "CardSlotPadding",
            "required": false,
            "description": "Defaults to `default` (16px). `compact` and `spacious` change only the vertical padding.",
            "source": {
              "path": "packages/design-system/src/components/cards/Card/types.ts",
              "line": 61
            },
            "values": [
              "compact",
              "default",
              "none",
              "spacious"
            ],
            "values_complete": true
          },
          {
            "name": "gap",
            "type": "CardSlotGap | undefined",
            "declared_type": "CardSlotGap",
            "required": false,
            "description": "Space between the slot's own children. Defaults to `sm` (8px).",
            "source": {
              "path": "packages/design-system/src/components/cards/Card/types.ts",
              "line": 63
            },
            "values": [
              "lg",
              "md",
              "none",
              "sm",
              "xs"
            ],
            "values_complete": true
          },
          {
            "name": "align",
            "type": "CardAlign | undefined",
            "declared_type": "CardAlign",
            "required": false,
            "description": "Cross-axis alignment. Unset applies no class and leaves the flex default.",
            "source": {
              "path": "packages/design-system/src/components/cards/Card/types.ts",
              "line": 65
            },
            "values": [
              "center",
              "end",
              "start",
              "stretch"
            ],
            "values_complete": true
          },
          {
            "name": "justify",
            "type": "CardJustify | undefined",
            "declared_type": "CardJustify",
            "required": false,
            "description": "Main-axis distribution; `between` maps to `space-between`. Unset leaves the flex default.",
            "source": {
              "path": "packages/design-system/src/components/cards/Card/types.ts",
              "line": 67
            },
            "values": [
              "between",
              "center",
              "end",
              "start"
            ],
            "values_complete": true
          },
          {
            "name": "divider",
            "type": "\"top\" | \"bottom\" | undefined",
            "declared_type": "'top' | 'bottom'",
            "required": false,
            "description": "Draws a `--cds-divider` rule on that edge of the slot.",
            "source": {
              "path": "packages/design-system/src/components/cards/Card/types.ts",
              "line": 69
            },
            "values": [
              "bottom",
              "top"
            ],
            "values_complete": true
          },
          {
            "name": "grow",
            "type": "boolean | undefined",
            "declared_type": "boolean",
            "required": false,
            "description": "Lets the slot absorb leftover space. `Card.Body` already does this without the prop.",
            "source": {
              "path": "packages/design-system/src/components/cards/Card/types.ts",
              "line": 71
            },
            "values": [
              false,
              true
            ],
            "values_complete": true
          }
        ],
        "branches": [],
        "constraints": [],
        "extraction_status": "extracted"
      },
      {
        "name": "Card.Body",
        "signature": 1,
        "visibility": "public",
        "source": {
          "path": "packages/design-system/src/components/cards/Card/CardSlots/CardSlots.tsx",
          "line": 47
        },
        "props_type": "CardZoneProps",
        "props": [
          {
            "name": "children",
            "type": "React.ReactNode",
            "declared_type": "React.ReactNode",
            "required": true,
            "description": "",
            "source": {
              "path": "packages/design-system/src/components/cards/Card/types.ts",
              "line": 55
            }
          },
          {
            "name": "className",
            "type": "string | undefined",
            "declared_type": "string",
            "required": false,
            "description": "",
            "source": {
              "path": "packages/design-system/src/components/cards/Card/types.ts",
              "line": 56
            }
          },
          {
            "name": "style",
            "type": "React.CSSProperties | undefined",
            "declared_type": "React.CSSProperties",
            "required": false,
            "description": "",
            "source": {
              "path": "packages/design-system/src/components/cards/Card/types.ts",
              "line": 57
            }
          },
          {
            "name": "layout",
            "type": "CardSlotLayout | undefined",
            "declared_type": "CardSlotLayout",
            "required": false,
            "description": "Flow direction inside the slot. Defaults to `stack`.",
            "source": {
              "path": "packages/design-system/src/components/cards/Card/types.ts",
              "line": 59
            },
            "values": [
              "row",
              "stack"
            ],
            "values_complete": true
          },
          {
            "name": "padding",
            "type": "CardSlotPadding | undefined",
            "declared_type": "CardSlotPadding",
            "required": false,
            "description": "Defaults to `default` (16px). `compact` and `spacious` change only the vertical padding.",
            "source": {
              "path": "packages/design-system/src/components/cards/Card/types.ts",
              "line": 61
            },
            "values": [
              "compact",
              "default",
              "none",
              "spacious"
            ],
            "values_complete": true
          },
          {
            "name": "gap",
            "type": "CardSlotGap | undefined",
            "declared_type": "CardSlotGap",
            "required": false,
            "description": "Space between the slot's own children. Defaults to `sm` (8px).",
            "source": {
              "path": "packages/design-system/src/components/cards/Card/types.ts",
              "line": 63
            },
            "values": [
              "lg",
              "md",
              "none",
              "sm",
              "xs"
            ],
            "values_complete": true
          },
          {
            "name": "align",
            "type": "CardAlign | undefined",
            "declared_type": "CardAlign",
            "required": false,
            "description": "Cross-axis alignment. Unset applies no class and leaves the flex default.",
            "source": {
              "path": "packages/design-system/src/components/cards/Card/types.ts",
              "line": 65
            },
            "values": [
              "center",
              "end",
              "start",
              "stretch"
            ],
            "values_complete": true
          },
          {
            "name": "justify",
            "type": "CardJustify | undefined",
            "declared_type": "CardJustify",
            "required": false,
            "description": "Main-axis distribution; `between` maps to `space-between`. Unset leaves the flex default.",
            "source": {
              "path": "packages/design-system/src/components/cards/Card/types.ts",
              "line": 67
            },
            "values": [
              "between",
              "center",
              "end",
              "start"
            ],
            "values_complete": true
          },
          {
            "name": "divider",
            "type": "\"top\" | \"bottom\" | undefined",
            "declared_type": "'top' | 'bottom'",
            "required": false,
            "description": "Draws a `--cds-divider` rule on that edge of the slot.",
            "source": {
              "path": "packages/design-system/src/components/cards/Card/types.ts",
              "line": 69
            },
            "values": [
              "bottom",
              "top"
            ],
            "values_complete": true
          },
          {
            "name": "grow",
            "type": "boolean | undefined",
            "declared_type": "boolean",
            "required": false,
            "description": "Lets the slot absorb leftover space. `Card.Body` already does this without the prop.",
            "source": {
              "path": "packages/design-system/src/components/cards/Card/types.ts",
              "line": 71
            },
            "values": [
              false,
              true
            ],
            "values_complete": true
          }
        ],
        "branches": [],
        "constraints": [],
        "extraction_status": "extracted"
      },
      {
        "name": "Card.Footer",
        "signature": 1,
        "visibility": "public",
        "source": {
          "path": "packages/design-system/src/components/cards/Card/CardSlots/CardSlots.tsx",
          "line": 82
        },
        "props_type": "CardFooterProps",
        "props": [
          {
            "name": "onPress",
            "type": "(() => void) | undefined",
            "declared_type": "() => void",
            "required": false,
            "description": "Providing this renders the footer as a pressable `<button>` rather than a `<div>`.",
            "source": {
              "path": "packages/design-system/src/components/cards/Card/types.ts",
              "line": 87
            }
          },
          {
            "name": "ariaLabel",
            "type": "string | undefined",
            "declared_type": "string",
            "required": false,
            "description": "Accessible label for the pressable footer when visible copy is not sufficient.",
            "source": {
              "path": "packages/design-system/src/components/cards/Card/types.ts",
              "line": 89
            }
          },
          {
            "name": "haptic",
            "type": "HapticFeedback | undefined",
            "declared_type": "HapticFeedback",
            "required": false,
            "description": "Haptic feedback for successful presses. Defaults to `true` (`light`).",
            "source": {
              "path": "packages/design-system/src/components/cards/Card/types.ts",
              "line": 91
            },
            "values": [
              "error",
              "heavy",
              "light",
              "medium",
              "selection",
              "success",
              "warning",
              false,
              true
            ],
            "values_complete": true,
            "default": "true",
            "default_kind": "source-expression"
          },
          {
            "name": "testId",
            "type": "string | undefined",
            "declared_type": "string",
            "required": false,
            "description": "`data-testid` on the footer element.",
            "source": {
              "path": "packages/design-system/src/components/cards/Card/types.ts",
              "line": 93
            }
          },
          {
            "name": "children",
            "type": "React.ReactNode",
            "declared_type": "React.ReactNode",
            "required": true,
            "description": "",
            "source": {
              "path": "packages/design-system/src/components/cards/Card/types.ts",
              "line": 55
            }
          },
          {
            "name": "className",
            "type": "string | undefined",
            "declared_type": "string",
            "required": false,
            "description": "",
            "source": {
              "path": "packages/design-system/src/components/cards/Card/types.ts",
              "line": 56
            }
          },
          {
            "name": "style",
            "type": "React.CSSProperties | undefined",
            "declared_type": "React.CSSProperties",
            "required": false,
            "description": "",
            "source": {
              "path": "packages/design-system/src/components/cards/Card/types.ts",
              "line": 57
            }
          },
          {
            "name": "layout",
            "type": "CardSlotLayout | undefined",
            "declared_type": "CardSlotLayout",
            "required": false,
            "description": "Flow direction inside the slot. Defaults to `stack`.",
            "source": {
              "path": "packages/design-system/src/components/cards/Card/types.ts",
              "line": 59
            },
            "values": [
              "row",
              "stack"
            ],
            "values_complete": true
          },
          {
            "name": "padding",
            "type": "CardSlotPadding | undefined",
            "declared_type": "CardSlotPadding",
            "required": false,
            "description": "Defaults to `default` (16px). `compact` and `spacious` change only the vertical padding.",
            "source": {
              "path": "packages/design-system/src/components/cards/Card/types.ts",
              "line": 61
            },
            "values": [
              "compact",
              "default",
              "none",
              "spacious"
            ],
            "values_complete": true
          },
          {
            "name": "gap",
            "type": "CardSlotGap | undefined",
            "declared_type": "CardSlotGap",
            "required": false,
            "description": "Space between the slot's own children. Defaults to `sm` (8px).",
            "source": {
              "path": "packages/design-system/src/components/cards/Card/types.ts",
              "line": 63
            },
            "values": [
              "lg",
              "md",
              "none",
              "sm",
              "xs"
            ],
            "values_complete": true
          },
          {
            "name": "align",
            "type": "CardAlign | undefined",
            "declared_type": "CardAlign",
            "required": false,
            "description": "Cross-axis alignment. Unset applies no class and leaves the flex default.",
            "source": {
              "path": "packages/design-system/src/components/cards/Card/types.ts",
              "line": 65
            },
            "values": [
              "center",
              "end",
              "start",
              "stretch"
            ],
            "values_complete": true,
            "default": "'center'",
            "default_kind": "source-expression"
          },
          {
            "name": "justify",
            "type": "CardJustify | undefined",
            "declared_type": "CardJustify",
            "required": false,
            "description": "Main-axis distribution; `between` maps to `space-between`. Unset leaves the flex default.",
            "source": {
              "path": "packages/design-system/src/components/cards/Card/types.ts",
              "line": 67
            },
            "values": [
              "between",
              "center",
              "end",
              "start"
            ],
            "values_complete": true,
            "default": "'center'",
            "default_kind": "source-expression"
          },
          {
            "name": "divider",
            "type": "\"top\" | \"bottom\" | undefined",
            "declared_type": "'top' | 'bottom'",
            "required": false,
            "description": "Draws a `--cds-divider` rule on that edge of the slot.",
            "source": {
              "path": "packages/design-system/src/components/cards/Card/types.ts",
              "line": 69
            },
            "values": [
              "bottom",
              "top"
            ],
            "values_complete": true
          },
          {
            "name": "grow",
            "type": "boolean | undefined",
            "declared_type": "boolean",
            "required": false,
            "description": "Lets the slot absorb leftover space. `Card.Body` already does this without the prop.",
            "source": {
              "path": "packages/design-system/src/components/cards/Card/types.ts",
              "line": 71
            },
            "values": [
              false,
              true
            ],
            "values_complete": true
          }
        ],
        "branches": [],
        "constraints": [],
        "extraction_status": "extracted"
      },
      {
        "name": "Card.Stack",
        "signature": 1,
        "visibility": "public",
        "source": {
          "path": "packages/design-system/src/components/cards/Card/CardSlots/CardSlots.tsx",
          "line": 132
        },
        "props_type": "CardStackProps",
        "props": [
          {
            "name": "as",
            "type": "\"div\" | \"span\" | undefined",
            "declared_type": "'div' | 'span'",
            "required": false,
            "description": "Element to render. Defaults to `div`; use `span` where only phrasing content is allowed.",
            "source": {
              "path": "packages/design-system/src/components/cards/Card/types.ts",
              "line": 79
            },
            "values": [
              "div",
              "span"
            ],
            "values_complete": true,
            "default": "'div'",
            "default_kind": "source-expression"
          },
          {
            "name": "children",
            "type": "React.ReactNode",
            "declared_type": "React.ReactNode",
            "required": true,
            "description": "",
            "source": {
              "path": "packages/design-system/src/components/cards/Card/types.ts",
              "line": 55
            }
          },
          {
            "name": "className",
            "type": "string | undefined",
            "declared_type": "string",
            "required": false,
            "description": "",
            "source": {
              "path": "packages/design-system/src/components/cards/Card/types.ts",
              "line": 56
            }
          },
          {
            "name": "style",
            "type": "React.CSSProperties | undefined",
            "declared_type": "React.CSSProperties",
            "required": false,
            "description": "",
            "source": {
              "path": "packages/design-system/src/components/cards/Card/types.ts",
              "line": 57
            }
          },
          {
            "name": "layout",
            "type": "CardSlotLayout | undefined",
            "declared_type": "CardSlotLayout",
            "required": false,
            "description": "Flow direction inside the slot. Defaults to `stack`.",
            "source": {
              "path": "packages/design-system/src/components/cards/Card/types.ts",
              "line": 59
            },
            "values": [
              "row",
              "stack"
            ],
            "values_complete": true
          },
          {
            "name": "padding",
            "type": "CardSlotPadding | undefined",
            "declared_type": "CardSlotPadding",
            "required": false,
            "description": "Defaults to `default` (16px). `compact` and `spacious` change only the vertical padding.",
            "source": {
              "path": "packages/design-system/src/components/cards/Card/types.ts",
              "line": 61
            },
            "values": [
              "compact",
              "default",
              "none",
              "spacious"
            ],
            "values_complete": true
          },
          {
            "name": "gap",
            "type": "CardSlotGap | undefined",
            "declared_type": "CardSlotGap",
            "required": false,
            "description": "Space between the slot's own children. Defaults to `sm` (8px).",
            "source": {
              "path": "packages/design-system/src/components/cards/Card/types.ts",
              "line": 63
            },
            "values": [
              "lg",
              "md",
              "none",
              "sm",
              "xs"
            ],
            "values_complete": true
          },
          {
            "name": "align",
            "type": "CardAlign | undefined",
            "declared_type": "CardAlign",
            "required": false,
            "description": "Cross-axis alignment. Unset applies no class and leaves the flex default.",
            "source": {
              "path": "packages/design-system/src/components/cards/Card/types.ts",
              "line": 65
            },
            "values": [
              "center",
              "end",
              "start",
              "stretch"
            ],
            "values_complete": true
          },
          {
            "name": "justify",
            "type": "CardJustify | undefined",
            "declared_type": "CardJustify",
            "required": false,
            "description": "Main-axis distribution; `between` maps to `space-between`. Unset leaves the flex default.",
            "source": {
              "path": "packages/design-system/src/components/cards/Card/types.ts",
              "line": 67
            },
            "values": [
              "between",
              "center",
              "end",
              "start"
            ],
            "values_complete": true
          },
          {
            "name": "divider",
            "type": "\"top\" | \"bottom\" | undefined",
            "declared_type": "'top' | 'bottom'",
            "required": false,
            "description": "Draws a `--cds-divider` rule on that edge of the slot.",
            "source": {
              "path": "packages/design-system/src/components/cards/Card/types.ts",
              "line": 69
            },
            "values": [
              "bottom",
              "top"
            ],
            "values_complete": true
          },
          {
            "name": "grow",
            "type": "boolean | undefined",
            "declared_type": "boolean",
            "required": false,
            "description": "Lets the slot absorb leftover space. `Card.Body` already does this without the prop.",
            "source": {
              "path": "packages/design-system/src/components/cards/Card/types.ts",
              "line": 71
            },
            "values": [
              false,
              true
            ],
            "values_complete": true
          }
        ],
        "branches": [],
        "constraints": [],
        "extraction_status": "extracted"
      },
      {
        "name": "Card.Title",
        "signature": 1,
        "visibility": "public",
        "source": {
          "path": "packages/design-system/src/components/cards/Card/CardTextSlots/CardTextSlots.tsx",
          "line": 10
        },
        "props_type": "CardTextSlotProps",
        "props": [
          {
            "name": "children",
            "type": "React.ReactNode",
            "declared_type": "React.ReactNode",
            "required": true,
            "description": "",
            "source": {
              "path": "packages/design-system/src/components/cards/Card/types.ts",
              "line": 101
            }
          }
        ],
        "branches": [],
        "constraints": [],
        "extraction_status": "extracted"
      },
      {
        "name": "Card.Description",
        "signature": 1,
        "visibility": "public",
        "source": {
          "path": "packages/design-system/src/components/cards/Card/CardTextSlots/CardTextSlots.tsx",
          "line": 21
        },
        "props_type": "CardTextSlotProps",
        "props": [
          {
            "name": "children",
            "type": "React.ReactNode",
            "declared_type": "React.ReactNode",
            "required": true,
            "description": "",
            "source": {
              "path": "packages/design-system/src/components/cards/Card/types.ts",
              "line": 101
            }
          }
        ],
        "branches": [],
        "constraints": [],
        "extraction_status": "extracted"
      },
      {
        "name": "Card.Metric",
        "signature": 1,
        "visibility": "public",
        "source": {
          "path": "packages/design-system/src/components/cards/Card/CardMetric/CardMetric.tsx",
          "line": 11
        },
        "props_type": "CardMetricProps",
        "props": [
          {
            "name": "value",
            "type": "React.ReactNode",
            "declared_type": "React.ReactNode",
            "required": true,
            "description": "The figure, rendered at `display-2` in the card's text color.",
            "source": {
              "path": "packages/design-system/src/components/cards/Card/types.ts",
              "line": 109
            }
          },
          {
            "name": "unit",
            "type": "React.ReactNode",
            "declared_type": "React.ReactNode",
            "required": false,
            "description": "Suffix beside the value, at body size and bottom-aligned. Nothing renders when omitted.",
            "source": {
              "path": "packages/design-system/src/components/cards/Card/types.ts",
              "line": 111
            }
          }
        ],
        "branches": [],
        "constraints": [],
        "extraction_status": "extracted"
      },
      {
        "name": "Card.Delta",
        "signature": 1,
        "visibility": "public",
        "source": {
          "path": "packages/design-system/src/components/cards/Card/CardDelta/CardDelta.tsx",
          "line": 20
        },
        "props_type": "CardDeltaProps",
        "props": [
          {
            "name": "value",
            "type": "React.ReactNode",
            "declared_type": "React.ReactNode",
            "required": true,
            "description": "Change text, rendered as-is — include any sign or unit you want shown.",
            "source": {
              "path": "packages/design-system/src/components/cards/Card/types.ts",
              "line": 130
            }
          },
          {
            "name": "direction",
            "type": "\"up\" | \"down\" | undefined",
            "declared_type": "'up' | 'down'",
            "required": false,
            "description": "Which way the figure moved. Sets the marker, and the tone unless `tone` overrides it.\nDefaults to `up` and is never inferred from `value`.",
            "source": {
              "path": "packages/design-system/src/components/cards/Card/types.ts",
              "line": 135
            },
            "values": [
              "down",
              "up"
            ],
            "values_complete": true,
            "default": "'up'",
            "default_kind": "source-expression"
          },
          {
            "name": "tone",
            "type": "CardDeltaTone | undefined",
            "declared_type": "CardDeltaTone",
            "required": false,
            "description": "Overrides the tone `direction` implies, for a figure whose sentiment runs against its arrow —\nspam calls falling is `down` and `success`. Without it, `up` is success and `down` is danger.",
            "source": {
              "path": "packages/design-system/src/components/cards/Card/types.ts",
              "line": 140
            },
            "values": [
              "danger",
              "neutral",
              "success",
              "warning"
            ],
            "values_complete": true
          },
          {
            "name": "marker",
            "type": "CardDeltaMarker | undefined",
            "declared_type": "CardDeltaMarker",
            "required": false,
            "description": "Marker shape. Defaults to `caret`.",
            "source": {
              "path": "packages/design-system/src/components/cards/Card/types.ts",
              "line": 142
            },
            "values": [
              "caret",
              "trend"
            ],
            "values_complete": true,
            "default": "'caret'",
            "default_kind": "source-expression"
          },
          {
            "name": "className",
            "type": "string | undefined",
            "declared_type": "string",
            "required": false,
            "description": "",
            "source": {
              "path": "packages/design-system/src/components/cards/Card/types.ts",
              "line": 143
            }
          },
          {
            "name": "ariaLabel",
            "type": "string | undefined",
            "declared_type": "string",
            "required": false,
            "description": "Accessible name for the pill, replacing its visible text. Pass the unabbreviated figure when\n`value` is compacted, so `1.8k this week` is not what a screen reader has to interpret.",
            "source": {
              "path": "packages/design-system/src/components/cards/Card/types.ts",
              "line": 148
            }
          },
          {
            "name": "testId",
            "type": "string | undefined",
            "declared_type": "string",
            "required": false,
            "description": "`data-testid` on the pill wrapper; the caret and the text carry none.",
            "source": {
              "path": "packages/design-system/src/components/cards/Card/types.ts",
              "line": 150
            }
          }
        ],
        "branches": [],
        "constraints": [],
        "extraction_status": "extracted"
      },
      {
        "name": "Card.StatusIndicator",
        "signature": 1,
        "visibility": "public",
        "source": {
          "path": "packages/design-system/src/components/status/StatusIndicator/StatusIndicator.tsx",
          "line": 25
        },
        "props_type": "StatusIndicatorProps",
        "props": [
          {
            "name": "children",
            "type": "React.ReactNode",
            "declared_type": "React.ReactNode",
            "required": true,
            "description": "",
            "source": {
              "path": "packages/design-system/src/components/status/StatusIndicator/StatusIndicator.tsx",
              "line": 13
            }
          },
          {
            "name": "tone",
            "type": "\"neutral\" | \"info\" | \"success\" | \"warning\" | \"danger\" | undefined",
            "declared_type": "StatusTone",
            "required": false,
            "description": "Semantic status color for the dot; maps to the `--cds-status-*` tokens. Defaults to `neutral`.",
            "source": {
              "path": "packages/design-system/src/components/status/StatusIndicator/StatusIndicator.tsx",
              "line": 15
            },
            "values": [
              "danger",
              "info",
              "neutral",
              "success",
              "warning"
            ],
            "values_complete": true,
            "default": "'neutral'",
            "default_kind": "source-expression"
          },
          {
            "name": "className",
            "type": "string | undefined",
            "declared_type": "string",
            "required": false,
            "description": "",
            "source": {
              "path": "packages/design-system/src/components/status/StatusIndicator/StatusIndicator.tsx",
              "line": 16
            }
          },
          {
            "name": "testId",
            "type": "string | undefined",
            "declared_type": "string",
            "required": false,
            "description": "Optional test selector.",
            "source": {
              "path": "packages/design-system/src/components/status/StatusIndicator/StatusIndicator.tsx",
              "line": 18
            }
          }
        ],
        "branches": [],
        "constraints": [],
        "extraction_status": "extracted"
      }
    ],
    "type_sources": [
      {
        "path": "packages/design-system/src/components/cards/Card/types.ts",
        "line": 4,
        "name": "CardSurface",
        "code": "export type CardSurface = 'default' | 'highlight';"
      },
      {
        "path": "packages/design-system/src/components/cards/Card/types.ts",
        "line": 5,
        "name": "CardRadius",
        "code": "export type CardRadius = 'xs' | 'sm' | 'md' | 'lg' | 'xl';"
      },
      {
        "path": "packages/design-system/src/components/cards/Card/types.ts",
        "line": 6,
        "name": "CardLayout",
        "code": "export type CardLayout = 'stack' | 'split';"
      },
      {
        "path": "packages/design-system/src/components/cards/Card/types.ts",
        "line": 7,
        "name": "CardPadding",
        "code": "export type CardPadding = 'none' | 'default';"
      },
      {
        "path": "packages/design-system/src/components/cards/Card/types.ts",
        "line": 8,
        "name": "CardSlotLayout",
        "code": "export type CardSlotLayout = 'stack' | 'row';"
      },
      {
        "path": "packages/design-system/src/components/cards/Card/types.ts",
        "line": 9,
        "name": "CardSlotPadding",
        "code": "export type CardSlotPadding = 'none' | 'default' | 'compact' | 'spacious';"
      },
      {
        "path": "packages/design-system/src/components/cards/Card/types.ts",
        "line": 10,
        "name": "CardSlotGap",
        "code": "export type CardSlotGap = 'none' | 'xs' | 'sm' | 'md' | 'lg';"
      },
      {
        "path": "packages/design-system/src/components/cards/Card/types.ts",
        "line": 11,
        "name": "CardAlign",
        "code": "export type CardAlign = 'start' | 'center' | 'end' | 'stretch';"
      },
      {
        "path": "packages/design-system/src/components/cards/Card/types.ts",
        "line": 12,
        "name": "CardJustify",
        "code": "export type CardJustify = 'start' | 'center' | 'between' | 'end';"
      },
      {
        "path": "packages/design-system/src/components/cards/Card/types.ts",
        "line": 18,
        "name": "CardProps",
        "code": "export interface CardProps {\n    /** Surface fill. Defaults to `default`; `highlight` swaps in the banner container color. */\n    surface?: CardSurface;\n    /** Corner radius for the card surface. Defaults to `lg`. */\n    radius?: CardRadius;\n    /** Direction slots flow. Defaults to `stack`; `split` sits them side by side with an 8px gap. */\n    layout?: CardLayout;\n    /**\n     * Padding on the surface itself. Defaults to `none` because the slots pad themselves —\n     * `default` adds 16px that stacks on top of any padded slot.\n     */\n    padding?: CardPadding;\n    children: React.ReactNode;\n    className?: string;\n    style?: React.CSSProperties;\n    /** Providing this renders the root as a pressable `<button>` rather than a `<div>`. */\n    onPress?: () => void;\n    /** Accessible label for pressable cards when visible copy is not sufficient. */\n    ariaLabel?: string;\n    /** Haptic feedback for successful presses. Defaults to `true` (`light`). */\n    haptic?: HapticFeedback;\n    /** `data-testid` on the root element. */\n    testId?: string;\n    /**\n     * Marks the card as a silhouette measurement target.\n     *\n     * The attribute is presence-only, so `false` is normalized away rather than rendered:\n     * `data-silhouette=\"false\"` would still match the `[data-silhouette]` query and opt the card in.\n     */\n    silhouette?: boolean;\n}"
      },
      {
        "path": "packages/design-system/src/components/cards/Card/types.ts",
        "line": 54,
        "name": "CardZoneProps",
        "code": "export interface CardZoneProps {\n    children: React.ReactNode;\n    className?: string;\n    style?: React.CSSProperties;\n    /** Flow direction inside the slot. Defaults to `stack`. */\n    layout?: CardSlotLayout;\n    /** Defaults to `default` (16px). `compact` and `spacious` change only the vertical padding. */\n    padding?: CardSlotPadding;\n    /** Space between the slot's own children. Defaults to `sm` (8px). */\n    gap?: CardSlotGap;\n    /** Cross-axis alignment. Unset applies no class and leaves the flex default. */\n    align?: CardAlign;\n    /** Main-axis distribution; `between` maps to `space-between`. Unset leaves the flex default. */\n    justify?: CardJustify;\n    /** Draws a `--cds-divider` rule on that edge of the slot. */\n    divider?: 'top' | 'bottom';\n    /** Lets the slot absorb leftover space. `Card.Body` already does this without the prop. */\n    grow?: boolean;\n}"
      },
      {
        "path": "packages/design-system/src/components/cards/Card/types.ts",
        "line": 77,
        "name": "CardStackProps",
        "code": "export interface CardStackProps extends CardZoneProps {\n    /** Element to render. Defaults to `div`; use `span` where only phrasing content is allowed. */\n    as?: 'div' | 'span';\n}"
      },
      {
        "path": "packages/design-system/src/components/cards/Card/types.ts",
        "line": 85,
        "name": "CardFooterProps",
        "code": "export interface CardFooterProps extends CardZoneProps {\n    /** Providing this renders the footer as a pressable `<button>` rather than a `<div>`. */\n    onPress?: () => void;\n    /** Accessible label for the pressable footer when visible copy is not sufficient. */\n    ariaLabel?: string;\n    /** Haptic feedback for successful presses. Defaults to `true` (`light`). */\n    haptic?: HapticFeedback;\n    /** `data-testid` on the footer element. */\n    testId?: string;\n}"
      },
      {
        "path": "packages/design-system/src/components/cards/Card/types.ts",
        "line": 100,
        "name": "CardTextSlotProps",
        "code": "export interface CardTextSlotProps {\n    children: React.ReactNode;\n}"
      },
      {
        "path": "packages/design-system/src/components/cards/Card/types.ts",
        "line": 107,
        "name": "CardMetricProps",
        "code": "export interface CardMetricProps {\n    /** The figure, rendered at `display-2` in the card's text color. */\n    value: React.ReactNode;\n    /** Suffix beside the value, at body size and bottom-aligned. Nothing renders when omitted. */\n    unit?: React.ReactNode;\n}"
      },
      {
        "path": "packages/design-system/src/components/cards/Card/types.ts",
        "line": 117,
        "name": "CardDeltaTone",
        "code": "export type CardDeltaTone = 'success' | 'warning' | 'danger' | 'neutral';"
      },
      {
        "path": "packages/design-system/src/components/cards/Card/types.ts",
        "line": 123,
        "name": "CardDeltaMarker",
        "code": "export type CardDeltaMarker = 'caret' | 'trend';"
      },
      {
        "path": "packages/design-system/src/components/cards/Card/types.ts",
        "line": 128,
        "name": "CardDeltaProps",
        "code": "export interface CardDeltaProps {\n    /** Change text, rendered as-is — include any sign or unit you want shown. */\n    value: React.ReactNode;\n    /**\n     * Which way the figure moved. Sets the marker, and the tone unless `tone` overrides it.\n     * Defaults to `up` and is never inferred from `value`.\n     */\n    direction?: 'up' | 'down';\n    /**\n     * Overrides the tone `direction` implies, for a figure whose sentiment runs against its arrow —\n     * spam calls falling is `down` and `success`. Without it, `up` is success and `down` is danger.\n     */\n    tone?: CardDeltaTone;\n    /** Marker shape. Defaults to `caret`. */\n    marker?: CardDeltaMarker;\n    className?: string;\n    /**\n     * Accessible name for the pill, replacing its visible text. Pass the unabbreviated figure when\n     * `value` is compacted, so `1.8k this week` is not what a screen reader has to interpret.\n     */\n    ariaLabel?: string;\n    /** `data-testid` on the pill wrapper; the caret and the text carry none. */\n    testId?: string;\n}"
      },
      {
        "path": "packages/design-system/src/components/status/StatusIndicator/StatusIndicator.tsx",
        "line": 12,
        "name": "StatusIndicatorProps",
        "code": "export interface StatusIndicatorProps {\n    children: React.ReactNode;\n    /** Semantic status color for the dot; maps to the `--cds-status-*` tokens. Defaults to `neutral`. */\n    tone?: StatusTone;\n    className?: string;\n    /** Optional test selector. */\n    testId?: string;\n}"
      },
      {
        "path": "packages/design-system/src/styles/statusTone.ts",
        "line": 7,
        "name": "STATUS_TONES",
        "code": "STATUS_TONES = ['neutral', 'info', 'success', 'warning', 'danger'] as const"
      },
      {
        "path": "packages/design-system/src/styles/statusTone.ts",
        "line": 9,
        "name": "StatusTone",
        "code": "export type StatusTone = (typeof STATUS_TONES)[number];"
      },
      {
        "path": "packages/design-system/src/tokens/CdsHaptic.ts",
        "line": 6,
        "name": "HapticFeedback",
        "code": "export type HapticFeedback = boolean | HapticType;"
      },
      {
        "path": "packages/design-system/src/tokens/HapticType.ts",
        "line": 2,
        "name": "HapticType",
        "code": "export type HapticType = 'light' | 'medium' | 'heavy' | 'success' | 'warning' | 'error' | 'selection';"
      }
    ],
    "defaults_policy": "Only explicit destructured parameter initializers are extracted. Other runtime defaults remain in implementation source."
  },
  "platforms": {
    "implemented": [
      "web"
    ],
    "native": "Imported design guidance only; no native implementation or parity verification in this preview.",
    "react": {
      "implementation": "local",
      "status": "preview",
      "parity": "web-reference"
    },
    "vue": {
      "implementation": "absent",
      "parity": "not-verified",
      "status": "reference-only"
    },
    "swift": {
      "implementation": "absent",
      "parity": "not-verified",
      "status": "reference-only"
    },
    "kotlin": {
      "implementation": "absent",
      "parity": "not-verified",
      "status": "reference-only"
    }
  },
  "missing_facts": [
    {
      "code": "human-review-pending",
      "detail": "This local preview has no recorded human design or engineering sign-off."
    },
    {
      "code": "platform-parity-unverified",
      "detail": "Vue, Swift and Kotlin implementations are absent from this package; platform parity has not been verified."
    },
    {
      "code": "figma-mapping-unverified",
      "detail": "No current component-level Figma node and immutable revision have been verified for this contract."
    }
  ],
  "review": {
    "local_status": "not-reviewed",
    "source_approval": null,
    "imported_spec_status": "approved",
    "spec_origin": "imported-adapted",
    "local_spec_source_status": "preview",
    "imported_source_revision": "f96f416e1c3bfbfaffcd155a88b87b18b8bb25f1",
    "note": "Inherited specification status is provenance, not approval of the current local implementation or extracted contract."
  }
}