{
  "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": "radius",
  "name": "Radius",
  "summary": "See what a corner changes. Compare every radius on the same geometry, then apply one to a contextual container.",
  "demo": "foundation-radius",
  "guidance": [
    {
      "title": "Compare the same shape",
      "body": "Hold width and height constant when comparing corners. A radius can look different on a small control and a large container even when the token is the same."
    },
    {
      "title": "Let the component own its corners",
      "body": "Use a component's specified radius when one exists. The playground compares the available shapes; it does not approve arbitrary radius changes to Button, Field, or other components."
    },
    {
      "title": "Understand full radius",
      "body": "The full token uses a large radius that the browser clamps to the shape. On a wide control it creates a pill; on an equal-sided shape it creates a circle."
    }
  ],
  "source": "packages/design-system/foundations.json",
  "tokens": [
    {
      "name": "--cds-radius-xxs",
      "value": "4px",
      "selector": ":root",
      "source_path": "packages/design-system/src/tokens/shape.css"
    },
    {
      "name": "--cds-radius-xs",
      "value": "8px",
      "selector": ":root",
      "source_path": "packages/design-system/src/tokens/shape.css"
    },
    {
      "name": "--cds-radius-sm",
      "value": "12px",
      "selector": ":root",
      "source_path": "packages/design-system/src/tokens/shape.css"
    },
    {
      "name": "--cds-radius-md",
      "value": "16px",
      "selector": ":root",
      "source_path": "packages/design-system/src/tokens/shape.css"
    },
    {
      "name": "--cds-radius-lg",
      "value": "20px",
      "selector": ":root",
      "source_path": "packages/design-system/src/tokens/shape.css"
    },
    {
      "name": "--cds-radius-xl",
      "value": "24px",
      "selector": ":root",
      "source_path": "packages/design-system/src/tokens/shape.css"
    },
    {
      "name": "--cds-radius-2xl",
      "value": "32px",
      "selector": ":root",
      "source_path": "packages/design-system/src/tokens/shape.css"
    },
    {
      "name": "--cds-radius-full",
      "value": "9999px",
      "selector": ":root",
      "source_path": "packages/design-system/src/tokens/shape.css"
    }
  ],
  "example": {
    "id": "foundation-radius",
    "title": "Radius",
    "source": "packages/design-system/examples/foundations/FoundationRadius.tsx",
    "export": "FoundationRadius",
    "components": [],
    "description": "Eight equal-size radius comparisons and a contextual applied-radius example.",
    "synthetic_data": true,
    "storybook_id": "foundations-radius--explore",
    "code": "import { useState } from 'react';\nimport { ContextCard, FoundationDetails, FoundationFrame, FoundationSelect } from './FoundationShared';\nimport { radiusSteps } from './foundation-data';\n\nexport function FoundationRadius() {\n  const [radius, setRadius] = useState('--cds-radius-lg');\n  return <FoundationFrame controls={<FoundationSelect label=\"Applied radius\" value={radius} options={radiusSteps} onChange={setRadius} />}\n    code={`const containerStyle = { borderRadius: 'var(${radius})' };`}>\n    <div className=\"foundation-radius-stage\"><span className=\"demo-eyebrow\">The same card. A different character.</span>\n      <ContextCard testId=\"radius-card\" style={{ borderRadius: `var(${radius})` }} />\n      <p className=\"foundation-caption\">Keep the content and dimensions steady when comparing shape. Full rounding works best for pills and circles.</p>\n    </div>\n    <FoundationDetails label=\"Compare all eight corner radii\">\n      <div className=\"foundation-radius-grid\">{radiusSteps.map(token => <div key={token.name} className=\"foundation-radius-item\">\n        <div className=\"foundation-radius-shape\" data-testid=\"radius-step\" style={{ borderRadius: `var(${token.name})` }} />\n        <code>{token.name.replace('--cds-radius-', '')}</code><span>{token.value}</span>\n      </div>)}</div>\n    </FoundationDetails>\n    <p className=\"foundation-caption\">Radius shapes the corner. Border-width tokens control the stroke; changing one does not change the other.</p>\n  </FoundationFrame>;\n}\n"
  },
  "visual_reference": {
    "stories": [
      {
        "id": "cloaked-design-system-foundations-overview--radius",
        "name": "Radius",
        "title": "Cloaked Design System/Foundations/Overview",
        "exportName": "Radius",
        "source_path": "packages/design-system/src/foundations/Foundations.stories.tsx",
        "source_digest": "02b89302834e3cdcee9f8e4762838a3baade84a5ffb336904f0df924bb29506e",
        "status": "preview",
        "local_url": "/storybook/iframe.html?id=cloaked-design-system-foundations-overview--radius&viewMode=story"
      },
      {
        "id": "cloaked-design-system-foundations-overview--border-width",
        "name": "Border Width",
        "title": "Cloaked Design System/Foundations/Overview",
        "exportName": "BorderWidth",
        "source_path": "packages/design-system/src/foundations/Foundations.stories.tsx",
        "source_digest": "02b89302834e3cdcee9f8e4762838a3baade84a5ffb336904f0df924bb29506e",
        "status": "preview",
        "local_url": "/storybook/iframe.html?id=cloaked-design-system-foundations-overview--border-width&viewMode=story"
      }
    ]
  },
  "links": {
    "human": "/radius",
    "json": "/data/foundations/radius.json"
  }
}