{
  "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": "toggle",
  "name": "Toggle",
  "category": "Primitives",
  "contract_status": "preview",
  "contract_kind": "source-derived",
  "review": {
    "local_status": "not-reviewed",
    "source_approval": null,
    "imported_spec_status": "approved",
    "spec_origin": "imported-adapted",
    "local_spec_source_status": "approved",
    "imported_source_revision": "f96f416e1c3bfbfaffcd155a88b87b18b8bb25f1",
    "note": "Inherited specification status is provenance, not approval of the current local implementation or extracted contract."
  },
  "approval": "required",
  "visual_reference": {
    "stories": [
      {
        "id": "cloaked-design-system-primitives-toggle--playground",
        "name": "Playground",
        "title": "Cloaked Design System/Primitives/Toggle",
        "exportName": "Playground",
        "source_path": "packages/design-system/src/components/primitives/Toggle/Toggle.stories.tsx",
        "source_digest": "bf340922fc2dfba4d65c52c7efcf4c36cc23a1c3cf1d0ac2454d45422ae83a10",
        "status": "preview",
        "local_url": "/storybook/iframe.html?id=cloaked-design-system-primitives-toggle--playground&viewMode=story"
      },
      {
        "id": "cloaked-design-system-primitives-toggle--off",
        "name": "Off",
        "title": "Cloaked Design System/Primitives/Toggle",
        "exportName": "Off",
        "source_path": "packages/design-system/src/components/primitives/Toggle/Toggle.stories.tsx",
        "source_digest": "bf340922fc2dfba4d65c52c7efcf4c36cc23a1c3cf1d0ac2454d45422ae83a10",
        "status": "preview",
        "local_url": "/storybook/iframe.html?id=cloaked-design-system-primitives-toggle--off&viewMode=story"
      },
      {
        "id": "cloaked-design-system-primitives-toggle--on",
        "name": "On",
        "title": "Cloaked Design System/Primitives/Toggle",
        "exportName": "On",
        "source_path": "packages/design-system/src/components/primitives/Toggle/Toggle.stories.tsx",
        "source_digest": "bf340922fc2dfba4d65c52c7efcf4c36cc23a1c3cf1d0ac2454d45422ae83a10",
        "status": "preview",
        "local_url": "/storybook/iframe.html?id=cloaked-design-system-primitives-toggle--on&viewMode=story"
      },
      {
        "id": "cloaked-design-system-primitives-toggle--disabled",
        "name": "Disabled",
        "title": "Cloaked Design System/Primitives/Toggle",
        "exportName": "Disabled",
        "source_path": "packages/design-system/src/components/primitives/Toggle/Toggle.stories.tsx",
        "source_digest": "bf340922fc2dfba4d65c52c7efcf4c36cc23a1c3cf1d0ac2454d45422ae83a10",
        "status": "preview",
        "local_url": "/storybook/iframe.html?id=cloaked-design-system-primitives-toggle--disabled&viewMode=story"
      },
      {
        "id": "cloaked-design-system-primitives-toggle--states",
        "name": "States",
        "title": "Cloaked Design System/Primitives/Toggle",
        "exportName": "States",
        "source_path": "packages/design-system/src/components/primitives/Toggle/Toggle.stories.tsx",
        "source_digest": "bf340922fc2dfba4d65c52c7efcf4c36cc23a1c3cf1d0ac2454d45422ae83a10",
        "status": "preview",
        "local_url": "/storybook/iframe.html?id=cloaked-design-system-primitives-toggle--states&viewMode=story"
      },
      {
        "id": "cloaked-design-system-primitives-toggle--dark-theme",
        "name": "Dark Theme",
        "title": "Cloaked Design System/Primitives/Toggle",
        "exportName": "DarkTheme",
        "source_path": "packages/design-system/src/components/primitives/Toggle/Toggle.stories.tsx",
        "source_digest": "bf340922fc2dfba4d65c52c7efcf4c36cc23a1c3cf1d0ac2454d45422ae83a10",
        "status": "preview",
        "local_url": "/storybook/iframe.html?id=cloaked-design-system-primitives-toggle--dark-theme&viewMode=story"
      }
    ],
    "name": "Toggle",
    "id": "toggle",
    "category": "Primitives"
  },
  "stories_source": {
    "path": "packages/design-system/src/components/primitives/Toggle/Toggle.stories.tsx",
    "code": "import type { Meta, StoryObj } from '@storybook/react-vite';\nimport React from 'react';\nimport { disabledControl, hapticArgType } from '../../../storybook/controlOptions';\nimport { HStack } from '../../layout/HStack/HStack';\nimport { VStack } from '../../layout/VStack/VStack';\nimport { Text } from '../Text/Text';\nimport { Toggle } from './Toggle';\n\nconst meta: Meta<typeof Toggle> = {\n    title: 'Cloaked Design System/Primitives/Toggle',\n    component: Toggle,\n    parameters: {\n        a11y: { test: 'error' },\n        docs: {\n            description: {\n                component:\n                    'Solid iOS-style switch (`role=\"switch\"`) for a single setting that takes effect the moment ' +\n                    'it flips — notifications, feature enable/disable. Reach for `Checkbox` instead when selecting ' +\n                    'several items from a set or when the choice is only committed on form submit. Fully ' +\n                    'controlled: pass `checked` and update it from `onChange`.',\n            },\n        },\n    },\n    args: { checked: false, ariaLabel: 'Toggle' },\n    argTypes: {\n        checked: { control: 'boolean', description: 'Whether the switch is on (controlled).' },\n        disabled: { control: 'boolean', description: 'Prevents interaction and dims the track.' },\n        onChange: { ...disabledControl, description: 'Called with the next checked value when pressed.' },\n        haptic: { ...hapticArgType, description: 'Haptic feedback fired on change. Defaults to `selection`.' },\n    },\n};\nexport default meta;\ntype Story = StoryObj<typeof Toggle>;\n\nexport const Playground: Story = { args: { testId: 'toggle-story-playground' } };\n\nexport const Off: Story = { args: { checked: false, ariaLabel: 'Off example', testId: 'toggle-story-off' } };\nexport const On: Story = { args: { checked: true, ariaLabel: 'On example', testId: 'toggle-story-on' } };\nexport const Disabled: Story = {\n    args: { checked: false, disabled: true, ariaLabel: 'Disabled off example', testId: 'toggle-story-disabled' },\n};\n\n/** Every on × disabled combination side by side. */\nexport const States: Story = {\n    render: () => (\n        <VStack gap={16}>\n            <ToggleState label='Off' checked={false} />\n            <ToggleState label='On' checked />\n            <ToggleState label='Disabled off' checked={false} disabled />\n            <ToggleState label='Disabled on' checked disabled />\n        </VStack>\n    ),\n};\n\nexport const DarkTheme: Story = {\n    args: { checked: true, ariaLabel: 'Dark theme on example', testId: 'toggle-story-dark' },\n    globals: { theme: 'dark' },\n};\n\nfunction ToggleState({ label, checked, disabled = false }: { label: string; checked: boolean; disabled?: boolean }) {\n    return (\n        <HStack gap={12} align='center'>\n            <Toggle\n                checked={checked}\n                disabled={disabled}\n                ariaLabel={label}\n                testId={`toggle-story-state-${label.toLowerCase().replace(/\\s+/g, '-')}`}\n            />\n            <Text variant='body' color={disabled ? 'secondary' : 'primary'}>\n                {label}\n            </Text>\n        </HStack>\n    );\n}\n"
  },
  "specification": {
    "$schema": "../../../specs/component-spec.schema.json",
    "identity": {
      "name": "Toggle",
      "status": "preview",
      "version": "2.0.0",
      "summary": "A controlled solid switch for a single setting that takes effect immediately."
    },
    "parts": [
      {
        "id": "track",
        "label": "Track",
        "description": "Owns switch semantics, selected color, interaction, and disabled treatment."
      },
      {
        "id": "knob",
        "label": "Knob",
        "description": "Slides between the leading and trailing inset to represent the controlled value."
      }
    ],
    "allowedDesignChoices": {
      "variants": {
        "base": {
          "label": "Base",
          "description": "Toggle has one solid switch treatment."
        }
      },
      "sizes": {}
    },
    "variants": [
      {
        "id": "base",
        "label": "Base",
        "description": "A solid fully rounded track with a sliding circular knob.",
        "platforms": [
          "ios",
          "android",
          "web"
        ]
      }
    ],
    "sizes": [],
    "measurements": [
      {
        "id": "track-radius",
        "label": "Track and knob radius",
        "kind": "exact",
        "token": "--cds-radius-full",
        "value": "full",
        "unit": "none",
        "appliesTo": [
          "track",
          "knob"
        ]
      },
      {
        "id": "track-width",
        "label": "Track width",
        "kind": "example-only",
        "value": 51,
        "unit": "px",
        "appliesTo": [
          "track"
        ],
        "notes": "The current implementation follows the iOS inline-switch proportion."
      },
      {
        "id": "track-height",
        "label": "Track height",
        "kind": "example-only",
        "value": 31,
        "unit": "px",
        "appliesTo": [
          "track"
        ]
      },
      {
        "id": "knob-size",
        "label": "Knob size",
        "kind": "example-only",
        "value": 27,
        "unit": "px",
        "appliesTo": [
          "knob"
        ]
      }
    ],
    "layout": {
      "alignment": "The knob stays vertically centered with equal inset at either end of the track.",
      "flow": "The bare switch is inline; a parent composes visible setting copy beside it.",
      "notes": [
        "Use Checkbox when selecting items from a set or deferring commitment until form submission."
      ]
    },
    "typographyAndColor": {
      "typography": [
        {
          "label": "Composed label",
          "description": "A visible setting label beside the bare switch uses the body ramp.",
          "token": "--cds-type-body-size"
        }
      ],
      "colors": [
        {
          "label": "Off track",
          "description": "Uses the neutral toggle off-track role, a step darker than the selection chip in light mode.",
          "token": "--cds-toggle-off-container"
        },
        {
          "label": "On track",
          "description": "Uses the solid success role.",
          "token": "--cds-status-success-solid"
        },
        {
          "label": "Knob",
          "description": "Uses the fixed inverse foreground role for a light knob.",
          "token": "--cds-text-inverse"
        },
        {
          "label": "Knob shadow",
          "description": "Uses the scrim role as the shadow color source.",
          "token": "--cds-scrim"
        }
      ]
    },
    "states": [
      {
        "id": "off",
        "label": "Off",
        "description": "Shows the neutral track, leading knob, and aria-checked false."
      },
      {
        "id": "on",
        "label": "On",
        "description": "Shows the success track, trailing knob, and aria-checked true."
      },
      {
        "id": "disabled-off",
        "label": "Disabled off",
        "description": "Keeps the off value visible while blocking changes."
      },
      {
        "id": "disabled-on",
        "label": "Disabled on",
        "description": "Keeps the on value visible while blocking changes."
      },
      {
        "id": "reduced-motion",
        "label": "Reduced motion",
        "description": "Moves the knob to the next resting position without a transition."
      }
    ],
    "behavior": [
      {
        "label": "Controlled value",
        "description": "Request the opposite checked value once per enabled press; the parent owns the resulting state."
      },
      {
        "label": "Immediate setting",
        "description": "Use the control only when changing the switch takes effect immediately."
      },
      {
        "label": "Disabled",
        "description": "Do not invoke the change callback or haptic feedback while disabled."
      }
    ],
    "accessibility": [
      {
        "label": "Switch semantics",
        "description": "Expose switch role, the controlled checked value, and native disabled behavior."
      },
      {
        "label": "Accessible name",
        "description": "Associate a visible setting label or provide an accessible label when the switch appears alone."
      }
    ],
    "contentAdaptation": [
      {
        "label": "Visible copy",
        "description": "Keep setting copy outside the fixed switch so it can wrap and localize independently."
      }
    ],
    "motionHaptics": {
      "motion": [
        {
          "label": "Knob transition",
          "description": "Slide the knob and transition the track color together; remove both transitions for reduced motion."
        }
      ],
      "haptics": [
        {
          "label": "Selection feedback",
          "description": "Request the selection haptic after an enabled value change unless feedback is disabled."
        }
      ]
    },
    "platformDifferences": []
  },
  "specification_source": "packages/design-system/src/components/primitives/Toggle/Toggle.spec.json",
  "guidance": {
    "summary": "A controlled solid switch for a single setting that takes effect immediately.",
    "guidance": [
      {
        "heading": "Overview",
        "body": "A solid iOS-style switch (`role=\"switch\"`) for a single setting that takes effect the moment it\nflips. Fully controlled — pass `checked` and update it from `onChange`."
      },
      {
        "heading": "When to use",
        "body": "Reach for `Toggle` when flipping the switch is the action itself — notifications, a feature\nenable/disable — with no separate save step. The distinction from `Checkbox` is the commit model,\nnot the shape: a switch applies instantly, while a checkbox marks an opt-in that a form submit\ncommits later. Selecting several items from a set, or anything staged until submit, is `Checkbox`\nterritory."
      }
    ],
    "usage": [],
    "examples": [],
    "source": "packages/design-system/src/components/primitives/Toggle/Toggle.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."
  },
  "links": {
    "human": "/component-toggle",
    "json": "/data/visual/components/toggle.json",
    "storybook": "/storybook/?path=/story/cloaked-design-system-primitives-toggle--playground"
  }
}