{
  "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": "motion",
  "name": "Motion",
  "summary": "Compare the complete easing and duration scales, then see how real components use motion to explain changes.",
  "demo": "foundation-motion",
  "guidance": [
    {
      "title": "Compare one timing decision at a time",
      "body": "The three easing graphs race against a linear reference at the same speed. The three duration tracks share one curve, so their 150, 200 and 300 millisecond timings are easy to compare."
    },
    {
      "title": "Follow the component’s behavior",
      "body": "Disclosure, navigation, loading and value changes use motion for different reasons. Inspect their actual component stories before composing a new interaction."
    },
    {
      "title": "Respect reduced motion",
      "body": "Honor the operating system's reduced-motion preference, including changes while the page is open. The example removes spatial animation when reduced motion is enabled and never starts on its own."
    }
  ],
  "related_components": [
    {
      "id": "animatednumber",
      "name": "AnimatedNumber",
      "story_count": 4,
      "href": "/component-animatednumber"
    },
    {
      "id": "floatingactionbutton",
      "name": "FloatingActionButton",
      "story_count": 4,
      "href": "/component-floatingactionbutton"
    },
    {
      "id": "floatingactionmenubutton",
      "name": "FloatingActionMenuButton",
      "story_count": 4,
      "href": "/component-floatingactionmenubutton"
    },
    {
      "id": "bottomsheet",
      "name": "BottomSheet",
      "story_count": 12,
      "href": "/component-bottomsheet"
    },
    {
      "id": "dialog",
      "name": "Dialog",
      "story_count": 7,
      "href": "/component-dialog"
    },
    {
      "id": "toast",
      "name": "Toast",
      "story_count": 7,
      "href": "/component-toast"
    },
    {
      "id": "accordion",
      "name": "Accordion",
      "story_count": 8,
      "href": "/component-accordion"
    },
    {
      "id": "list",
      "name": "List",
      "story_count": 4,
      "href": "/component-list"
    },
    {
      "id": "skeleton",
      "name": "Skeleton",
      "story_count": 7,
      "href": "/component-skeleton"
    },
    {
      "id": "spinner",
      "name": "Spinner",
      "story_count": 7,
      "href": "/component-spinner"
    },
    {
      "id": "progress",
      "name": "Progress",
      "story_count": 10,
      "href": "/component-progress"
    },
    {
      "id": "toggle",
      "name": "Toggle",
      "story_count": 6,
      "href": "/component-toggle"
    },
    {
      "id": "tabs",
      "name": "Tabs",
      "story_count": 5,
      "href": "/component-tabs"
    },
    {
      "id": "carousel",
      "name": "Carousel",
      "story_count": 8,
      "href": "/component-carousel"
    },
    {
      "id": "avatar",
      "name": "Avatar",
      "story_count": 10,
      "href": "/component-avatar"
    },
    {
      "id": "globe",
      "name": "Globe",
      "story_count": 7,
      "href": "/component-globe"
    },
    {
      "id": "actionorbs",
      "name": "ActionOrbs",
      "story_count": 5,
      "href": "/component-actionorbs"
    },
    {
      "id": "bubblematrix",
      "name": "BubbleMatrix",
      "story_count": 4,
      "href": "/component-bubblematrix"
    }
  ],
  "source": "packages/design-system/foundations.json",
  "tokens": [
    {
      "name": "--cds-ease-out",
      "value": "cubic-bezier(0.2, 0.9, 0.3, 1)",
      "selector": ":root",
      "source_path": "packages/design-system/src/tokens/motion.css"
    },
    {
      "name": "--cds-ease-exit",
      "value": "cubic-bezier(0.4, 0, 0.6, 0.3)",
      "selector": ":root",
      "source_path": "packages/design-system/src/tokens/motion.css"
    },
    {
      "name": "--cds-ease-in-out",
      "value": "cubic-bezier(0.77, 0, 0.175, 1)",
      "selector": ":root",
      "source_path": "packages/design-system/src/tokens/motion.css"
    },
    {
      "name": "--cds-duration-fast",
      "value": "150ms",
      "selector": ":root",
      "source_path": "packages/design-system/src/tokens/motion.css"
    },
    {
      "name": "--cds-duration-base",
      "value": "200ms",
      "selector": ":root",
      "source_path": "packages/design-system/src/tokens/motion.css"
    },
    {
      "name": "--cds-duration-slow",
      "value": "300ms",
      "selector": ":root",
      "source_path": "packages/design-system/src/tokens/motion.css"
    }
  ],
  "example": {
    "id": "foundation-motion",
    "title": "Motion",
    "source": "packages/design-system/examples/foundations/FoundationMotion.tsx",
    "export": "FoundationMotion",
    "components": [
      "button"
    ],
    "description": "Original Storybook motion comparisons: three easing graphs raced against linear references and three duration tracks, with explicit replay and live reduced-motion support.",
    "synthetic_data": true,
    "storybook_id": "foundations-motion--explore",
    "code": "import { MotionShowcase } from '../../src/foundations/MotionShowcase';\nimport { FoundationFrame } from './FoundationShared';\n\n/** The website and original Foundations Motion story render this same showcase. */\nexport function FoundationMotion() {\n  return <FoundationFrame><MotionShowcase /></FoundationFrame>;\n}\n"
  },
  "visual_reference": {
    "stories": [
      {
        "id": "cloaked-design-system-foundations-overview--motion",
        "name": "Motion",
        "title": "Cloaked Design System/Foundations/Overview",
        "exportName": "Motion",
        "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--motion&viewMode=story"
      }
    ]
  },
  "links": {
    "human": "/motion",
    "json": "/data/foundations/motion.json"
  }
}