{ "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": "checkbox", "name": "Checkbox", "category": "Primitives", "summary": "A controlled round multi-select control that toggles one item without committing an entire form.", "documentation": { "summary": "A controlled round multi-select control that toggles one item without committing an entire form.", "guidance": [ { "heading": "Overview", "body": "A round multi-select control (`role=\"checkbox\"`) for choosing any number of items from a set.\nFully controlled — pass `checked` and update it from `onChange`." }, { "heading": "When to use", "body": "Reach for `Checkbox` when the user picks zero-or-more items from a set — list rows, consent\noptions, filters — or opts into something that is only committed when a form is submitted. The\nneighbours it is most confused with are `Toggle` and `Radio`:\n\n- Flipping a **single setting that takes effect immediately** (notifications on/off)? Use `Toggle` —\n a checkbox implies a pending, batch-committed choice, a switch implies an instant one.\n- Choosing **exactly one option** from a mutually exclusive set? Use `Radio` (usually via\n `RadioGroup`)." } ], "usage": [], "examples": [], "source": "packages/design-system/src/components/primitives/Checkbox/Checkbox.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/primitives/Checkbox/Checkbox.tsx", "code": "import React from 'react';\nimport { cn } from '../../../utilities';\nimport { useHaptic } from '../../../hooks/useHaptic';\nimport type { HapticFeedback } from '../../../tokens/CdsHaptic';\nimport { SelectionIndicator } from '../SelectionIndicator/SelectionIndicator';\nimport styles from './Checkbox.module.scss';\n\n/**\n * Props for the checkbox. Fully controlled — a press only calls `onChange`, so the box does not\n * change until `checked` comes back changed.\n */\nexport interface CheckboxProps {\n /** Current state, exposed as `aria-checked`. */\n checked: boolean;\n /** Called with the next checked value when pressed. */\n onChange?: (checked: boolean) => void;\n /** Blocks the press and dims the chip. */\n disabled?: boolean;\n /** Accessible label when no visible label is associated with the checkbox. */\n ariaLabel?: string;\n className?: string;\n /** Haptic feedback for value changes. Defaults to `true` (`selection`). */\n haptic?: HapticFeedback;\n /** Selector on the `role=\"checkbox\"` button; the chip inside is decorative and carries none. */\n testId?: string;\n}\n\n/**\n * Renders a token-styled checkbox — a multi-select control (`role=\"checkbox\"`).\n */\nexport function Checkbox({ checked, onChange, disabled, ariaLabel, className, haptic = true, testId }: CheckboxProps) {\n const fireHaptic = useHaptic('selection');\n\n const handleClick = () => {\n if (disabled || !onChange) return;\n\n fireHaptic(haptic);\n onChange(!checked);\n };\n\n return (\n \n \n \n );\n}\n" }, "spec": { "$schema": "../../../specs/component-spec.schema.json", "identity": { "name": "Checkbox", "status": "preview", "version": "2.0.0", "summary": "A controlled round multi-select control that toggles one item without committing an entire form." }, "parts": [ { "id": "control", "label": "Control", "description": "Owns checkbox semantics, focus treatment, interaction, and disabled behavior." }, { "id": "selection-chip", "label": "Selection chip", "description": "Uses the shared internal selection visual without exposing it as a standalone public component." }, { "id": "check", "label": "Check glyph", "description": "Appears only while the controlled value is checked." } ], "allowedDesignChoices": { "variants": { "base": { "label": "Base", "description": "Checkbox has one round visual treatment." } }, "sizes": {} }, "variants": [ { "id": "base", "label": "Base", "description": "A round binary multi-select control.", "platforms": [ "ios", "android", "web" ] } ], "sizes": [], "measurements": [ { "id": "control-diameter", "label": "Control diameter", "kind": "exact", "token": "--cds-size-32", "value": 32, "unit": "px", "appliesTo": [ "control", "selection-chip" ] }, { "id": "focus-ring-width", "label": "Focus ring width", "kind": "exact", "token": "--cds-border-width-focus", "value": 3, "unit": "px", "appliesTo": [ "control", "keyboard-focus" ] } ], "layout": { "alignment": "The check glyph is centered inside the circular selection chip.", "flow": "The bare control is inline; visible copy is composed beside it by a parent.", "notes": [ "Use Checkbox for independent selections and Toggle for settings that take effect immediately." ] }, "typographyAndColor": { "typography": [ { "label": "Composed label", "description": "A visible label beside the bare control uses the body ramp.", "token": "--cds-type-body-size" } ], "colors": [ { "label": "Unchecked chip", "description": "Uses the neutral selection-off container role.", "token": "--cds-selection-off-container" }, { "label": "Checked chip", "description": "Uses the theme-aware bold fill.", "token": "--cds-bg-bold" }, { "label": "Checked glyph", "description": "Maintains contrast on the checked fill.", "token": "--cds-text-on-bold" }, { "label": "Focus ring", "description": "Uses the brand accent for keyboard focus.", "token": "--cds-brand" } ] }, "states": [ { "id": "unchecked", "label": "Unchecked", "description": "Shows the neutral empty chip and reports aria-checked false." }, { "id": "checked", "label": "Checked", "description": "Shows the bold chip with a check and reports aria-checked true." }, { "id": "disabled-unchecked", "label": "Disabled unchecked", "description": "Keeps the unchecked value visible while blocking changes." }, { "id": "disabled-checked", "label": "Disabled checked", "description": "Keeps the checked value visible while blocking changes." }, { "id": "keyboard-focus", "label": "Keyboard focus", "description": "Shows the brand focus ring around the circular control." } ], "behavior": [ { "label": "Controlled value", "description": "Request the opposite checked value once per enabled press; the parent owns the resulting state." }, { "label": "Disabled", "description": "Do not invoke the change callback or haptic feedback while disabled." } ], "accessibility": [ { "label": "Checkbox semantics", "description": "Expose checkbox role, the controlled checked value, and native disabled behavior." }, { "label": "Accessible name", "description": "Associate a visible label or provide an accessible label when the control appears alone." } ], "contentAdaptation": [ { "label": "Visible copy", "description": "Keep explanatory copy outside the control so it can wrap without changing the circular geometry." } ], "motionHaptics": { "motion": [ { "label": "Selection change", "description": "Change the chip fill and check visibility without layout movement." } ], "haptics": [ { "label": "Selection feedback", "description": "Request the selection haptic after an enabled value change unless feedback is disabled." } ] }, "platformDifferences": [] }, "spec_source": "packages/design-system/src/components/primitives/Checkbox/Checkbox.spec.json", "guidance_source": { "path": "packages/design-system/src/components/primitives/Checkbox/Checkbox.mdx", "code": "import { Meta, Canvas, Controls } from '@storybook/addon-docs/blocks';\nimport { ComponentSpec } from '../../../../.storybook/blocks';\nimport * as Stories from './Checkbox.stories';\nimport checkboxSpec from './Checkbox.spec.json';\n\n\n\n# Checkbox\n\nA round multi-select control (`role=\"checkbox\"`) for choosing any number of items from a set.\nFully controlled — pass `checked` and update it from `onChange`.\n\n\n\n## When to use\n\nReach for `Checkbox` when the user picks zero-or-more items from a set — list rows, consent\noptions, filters — or opts into something that is only committed when a form is submitted. The\nneighbours it is most confused with are `Toggle` and `Radio`:\n\n- Flipping a **single setting that takes effect immediately** (notifications on/off)? Use `Toggle` —\n a checkbox implies a pending, batch-committed choice, a switch implies an instant one.\n- Choosing **exactly one option** from a mutually exclusive set? Use `Radio` (usually via\n `RadioGroup`).\n\n\n\n## Design Guidelines\n\n\n\n## Props\n\n\n" }, "props": [ { "name": "checked", "type": "boolean", "declared_type": "boolean", "required": true, "description": "Current state, exposed as `aria-checked`.", "source": { "path": "packages/design-system/src/components/primitives/Checkbox/Checkbox.tsx", "line": 14 }, "values": [ false, true ], "values_complete": true }, { "name": "onChange", "type": "((checked: boolean) => void) | undefined", "declared_type": "(checked: boolean) => void", "required": false, "description": "Called with the next checked value when pressed.", "source": { "path": "packages/design-system/src/components/primitives/Checkbox/Checkbox.tsx", "line": 16 } }, { "name": "disabled", "type": "boolean | undefined", "declared_type": "boolean", "required": false, "description": "Blocks the press and dims the chip.", "source": { "path": "packages/design-system/src/components/primitives/Checkbox/Checkbox.tsx", "line": 18 }, "values": [ false, true ], "values_complete": true }, { "name": "ariaLabel", "type": "string | undefined", "declared_type": "string", "required": false, "description": "Accessible label when no visible label is associated with the checkbox.", "source": { "path": "packages/design-system/src/components/primitives/Checkbox/Checkbox.tsx", "line": 20 } }, { "name": "className", "type": "string | undefined", "declared_type": "string", "required": false, "description": "", "source": { "path": "packages/design-system/src/components/primitives/Checkbox/Checkbox.tsx", "line": 21 } }, { "name": "haptic", "type": "HapticFeedback | undefined", "declared_type": "HapticFeedback", "required": false, "description": "Haptic feedback for value changes. Defaults to `true` (`selection`).", "source": { "path": "packages/design-system/src/components/primitives/Checkbox/Checkbox.tsx", "line": 23 }, "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": "Selector on the `role=\"checkbox\"` button; the chip inside is decorative and carries none.", "source": { "path": "packages/design-system/src/components/primitives/Checkbox/Checkbox.tsx", "line": 25 } } ], "prop_shapes": {}, "examples": [], "tokens": [ { "name": "--cds-size-32", "light": "32px", "dark": "32px" }, { "name": "--cds-border-width-focus", "light": "3px", "dark": "3px" }, { "name": "--cds-type-body-size", "light": "1rem", "dark": "1rem" }, { "name": "--cds-selection-off-container", "light": "#e0ddd6", "dark": "#ffffff26" }, { "name": "--cds-bg-bold", "light": "#0b0b0a", "dark": "#ffffff" }, { "name": "--cds-text-on-bold", "light": "#ffffff", "dark": "#141410" }, { "name": "--cds-brand", "light": "#ff550c", "dark": "#ff550c" } ], "visual_reference": { "stories": [ { "id": "cloaked-design-system-primitives-checkbox--playground", "name": "Playground", "title": "Cloaked Design System/Primitives/Checkbox", "exportName": "Playground", "source_path": "packages/design-system/src/components/primitives/Checkbox/Checkbox.stories.tsx", "source_digest": "4fe089787a255cf548509903706b2f088abe16ad710872d4af44bac407c6f2c0", "status": "preview", "local_url": "/storybook/iframe.html?id=cloaked-design-system-primitives-checkbox--playground&viewMode=story" }, { "id": "cloaked-design-system-primitives-checkbox--unchecked", "name": "Unchecked", "title": "Cloaked Design System/Primitives/Checkbox", "exportName": "Unchecked", "source_path": "packages/design-system/src/components/primitives/Checkbox/Checkbox.stories.tsx", "source_digest": "4fe089787a255cf548509903706b2f088abe16ad710872d4af44bac407c6f2c0", "status": "preview", "local_url": "/storybook/iframe.html?id=cloaked-design-system-primitives-checkbox--unchecked&viewMode=story" }, { "id": "cloaked-design-system-primitives-checkbox--checked", "name": "Checked", "title": "Cloaked Design System/Primitives/Checkbox", "exportName": "Checked", "source_path": "packages/design-system/src/components/primitives/Checkbox/Checkbox.stories.tsx", "source_digest": "4fe089787a255cf548509903706b2f088abe16ad710872d4af44bac407c6f2c0", "status": "preview", "local_url": "/storybook/iframe.html?id=cloaked-design-system-primitives-checkbox--checked&viewMode=story" }, { "id": "cloaked-design-system-primitives-checkbox--disabled", "name": "Disabled", "title": "Cloaked Design System/Primitives/Checkbox", "exportName": "Disabled", "source_path": "packages/design-system/src/components/primitives/Checkbox/Checkbox.stories.tsx", "source_digest": "4fe089787a255cf548509903706b2f088abe16ad710872d4af44bac407c6f2c0", "status": "preview", "local_url": "/storybook/iframe.html?id=cloaked-design-system-primitives-checkbox--disabled&viewMode=story" }, { "id": "cloaked-design-system-primitives-checkbox--states", "name": "States", "title": "Cloaked Design System/Primitives/Checkbox", "exportName": "States", "source_path": "packages/design-system/src/components/primitives/Checkbox/Checkbox.stories.tsx", "source_digest": "4fe089787a255cf548509903706b2f088abe16ad710872d4af44bac407c6f2c0", "status": "preview", "local_url": "/storybook/iframe.html?id=cloaked-design-system-primitives-checkbox--states&viewMode=story" }, { "id": "cloaked-design-system-primitives-checkbox--dark-theme", "name": "Dark Theme", "title": "Cloaked Design System/Primitives/Checkbox", "exportName": "DarkTheme", "source_path": "packages/design-system/src/components/primitives/Checkbox/Checkbox.stories.tsx", "source_digest": "4fe089787a255cf548509903706b2f088abe16ad710872d4af44bac407c6f2c0", "status": "preview", "local_url": "/storybook/iframe.html?id=cloaked-design-system-primitives-checkbox--dark-theme&viewMode=story" } ], "name": "Checkbox", "id": "checkbox", "category": "Primitives" }, "stories": [ { "id": "cloaked-design-system-primitives-checkbox--playground", "name": "Playground", "title": "Cloaked Design System/Primitives/Checkbox", "exportName": "Playground", "source_path": "packages/design-system/src/components/primitives/Checkbox/Checkbox.stories.tsx", "source_digest": "4fe089787a255cf548509903706b2f088abe16ad710872d4af44bac407c6f2c0", "status": "preview", "local_url": "/storybook/iframe.html?id=cloaked-design-system-primitives-checkbox--playground&viewMode=story" }, { "id": "cloaked-design-system-primitives-checkbox--unchecked", "name": "Unchecked", "title": "Cloaked Design System/Primitives/Checkbox", "exportName": "Unchecked", "source_path": "packages/design-system/src/components/primitives/Checkbox/Checkbox.stories.tsx", "source_digest": "4fe089787a255cf548509903706b2f088abe16ad710872d4af44bac407c6f2c0", "status": "preview", "local_url": "/storybook/iframe.html?id=cloaked-design-system-primitives-checkbox--unchecked&viewMode=story" }, { "id": "cloaked-design-system-primitives-checkbox--checked", "name": "Checked", "title": "Cloaked Design System/Primitives/Checkbox", "exportName": "Checked", "source_path": "packages/design-system/src/components/primitives/Checkbox/Checkbox.stories.tsx", "source_digest": "4fe089787a255cf548509903706b2f088abe16ad710872d4af44bac407c6f2c0", "status": "preview", "local_url": "/storybook/iframe.html?id=cloaked-design-system-primitives-checkbox--checked&viewMode=story" }, { "id": "cloaked-design-system-primitives-checkbox--disabled", "name": "Disabled", "title": "Cloaked Design System/Primitives/Checkbox", "exportName": "Disabled", "source_path": "packages/design-system/src/components/primitives/Checkbox/Checkbox.stories.tsx", "source_digest": "4fe089787a255cf548509903706b2f088abe16ad710872d4af44bac407c6f2c0", "status": "preview", "local_url": "/storybook/iframe.html?id=cloaked-design-system-primitives-checkbox--disabled&viewMode=story" }, { "id": "cloaked-design-system-primitives-checkbox--states", "name": "States", "title": "Cloaked Design System/Primitives/Checkbox", "exportName": "States", "source_path": "packages/design-system/src/components/primitives/Checkbox/Checkbox.stories.tsx", "source_digest": "4fe089787a255cf548509903706b2f088abe16ad710872d4af44bac407c6f2c0", "status": "preview", "local_url": "/storybook/iframe.html?id=cloaked-design-system-primitives-checkbox--states&viewMode=story" }, { "id": "cloaked-design-system-primitives-checkbox--dark-theme", "name": "Dark Theme", "title": "Cloaked Design System/Primitives/Checkbox", "exportName": "DarkTheme", "source_path": "packages/design-system/src/components/primitives/Checkbox/Checkbox.stories.tsx", "source_digest": "4fe089787a255cf548509903706b2f088abe16ad710872d4af44bac407c6f2c0", "status": "preview", "local_url": "/storybook/iframe.html?id=cloaked-design-system-primitives-checkbox--dark-theme&viewMode=story" } ], "stories_source": { "path": "packages/design-system/src/components/primitives/Checkbox/Checkbox.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 { Checkbox } from './Checkbox';\n\nconst meta: Meta = {\n title: 'Cloaked Design System/Primitives/Checkbox',\n component: Checkbox,\n parameters: {\n a11y: { test: 'error' },\n docs: {\n description: {\n component:\n 'Round multi-select control (`role=\"checkbox\"`) for choosing any number of items from a ' +\n 'set — list rows, consent options, filters. Reach for `Toggle` instead when the control flips ' +\n 'a single setting on/off and takes effect immediately. Fully controlled: pass `checked` and ' +\n 'update it from `onChange`.',\n },\n },\n },\n args: { checked: false, ariaLabel: 'Checkbox' },\n argTypes: {\n checked: { control: 'boolean', description: 'Whether the checkbox is selected (controlled).' },\n disabled: { control: 'boolean', description: 'Prevents interaction and dims the tile.' },\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;\n\nexport const Playground: Story = { args: { testId: 'checkbox-story-playground' } };\n\nexport const Unchecked: Story = {\n args: { checked: false, ariaLabel: 'Unchecked example', testId: 'checkbox-story-unchecked' },\n};\nexport const Checked: Story = {\n args: { checked: true, ariaLabel: 'Checked example', testId: 'checkbox-story-checked' },\n};\nexport const Disabled: Story = {\n args: {\n checked: false,\n disabled: true,\n ariaLabel: 'Disabled unchecked example',\n testId: 'checkbox-story-disabled',\n },\n};\n\n/** Every checked × disabled combination side by side. */\nexport const States: Story = {\n render: () => (\n \n \n \n \n \n \n ),\n};\n\nexport const DarkTheme: Story = {\n args: { checked: true, ariaLabel: 'Dark theme checked example', testId: 'checkbox-story-dark' },\n globals: { theme: 'dark' },\n};\n\nfunction CheckboxState({ label, checked, disabled = false }: { label: string; checked: boolean; disabled?: boolean }) {\n return (\n \n \n \n {label}\n \n \n );\n}\n" }, "links": { "human": "/component-checkbox", "json": "/data/components/checkbox.json", "markdown": "/data/components/checkbox.md", "storybook": "/storybook/?path=/story/cloaked-design-system-primitives-checkbox--playground" }, "contract_status": "preview", "contract_kind": "source-derived", "approval": "required", "api": { "method": "typescript-type-checker", "typescript_version": "5.9.3", "public_export": "Checkbox", "public_path": "Checkbox", "import_path": "@cloakedinc/design-system", "root_kind": "component", "entrypoints": [ { "name": "Checkbox", "signature": 1, "visibility": "public", "source": { "path": "packages/design-system/src/components/primitives/Checkbox/Checkbox.tsx", "line": 31 }, "props_type": "CheckboxProps", "props": [ { "name": "checked", "type": "boolean", "declared_type": "boolean", "required": true, "description": "Current state, exposed as `aria-checked`.", "source": { "path": "packages/design-system/src/components/primitives/Checkbox/Checkbox.tsx", "line": 14 }, "values": [ false, true ], "values_complete": true }, { "name": "onChange", "type": "((checked: boolean) => void) | undefined", "declared_type": "(checked: boolean) => void", "required": false, "description": "Called with the next checked value when pressed.", "source": { "path": "packages/design-system/src/components/primitives/Checkbox/Checkbox.tsx", "line": 16 } }, { "name": "disabled", "type": "boolean | undefined", "declared_type": "boolean", "required": false, "description": "Blocks the press and dims the chip.", "source": { "path": "packages/design-system/src/components/primitives/Checkbox/Checkbox.tsx", "line": 18 }, "values": [ false, true ], "values_complete": true }, { "name": "ariaLabel", "type": "string | undefined", "declared_type": "string", "required": false, "description": "Accessible label when no visible label is associated with the checkbox.", "source": { "path": "packages/design-system/src/components/primitives/Checkbox/Checkbox.tsx", "line": 20 } }, { "name": "className", "type": "string | undefined", "declared_type": "string", "required": false, "description": "", "source": { "path": "packages/design-system/src/components/primitives/Checkbox/Checkbox.tsx", "line": 21 } }, { "name": "haptic", "type": "HapticFeedback | undefined", "declared_type": "HapticFeedback", "required": false, "description": "Haptic feedback for value changes. Defaults to `true` (`selection`).", "source": { "path": "packages/design-system/src/components/primitives/Checkbox/Checkbox.tsx", "line": 23 }, "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": "Selector on the `role=\"checkbox\"` button; the chip inside is decorative and carries none.", "source": { "path": "packages/design-system/src/components/primitives/Checkbox/Checkbox.tsx", "line": 25 } } ], "branches": [], "constraints": [], "extraction_status": "extracted" } ], "type_sources": [ { "path": "packages/design-system/src/components/primitives/Checkbox/Checkbox.tsx", "line": 12, "name": "CheckboxProps", "code": "export interface CheckboxProps {\n /** Current state, exposed as `aria-checked`. */\n checked: boolean;\n /** Called with the next checked value when pressed. */\n onChange?: (checked: boolean) => void;\n /** Blocks the press and dims the chip. */\n disabled?: boolean;\n /** Accessible label when no visible label is associated with the checkbox. */\n ariaLabel?: string;\n className?: string;\n /** Haptic feedback for value changes. Defaults to `true` (`selection`). */\n haptic?: HapticFeedback;\n /** Selector on the `role=\"checkbox\"` button; the chip inside is decorative and carries none. */\n testId?: string;\n}" }, { "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": "approved", "imported_source_revision": "f96f416e1c3bfbfaffcd155a88b87b18b8bb25f1", "note": "Inherited specification status is provenance, not approval of the current local implementation or extracted contract." } }