{
  "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": "chip",
  "name": "Chip",
  "category": "Controls",
  "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-controls-chip--playground",
        "name": "Playground",
        "title": "Cloaked Design System/Controls/Chip",
        "exportName": "Playground",
        "source_path": "packages/design-system/src/components/controls/Chip/Chip.stories.tsx",
        "source_digest": "f7caf6a8443355aa1bac6e9ac7586194abefdc6e763586a06faf6153068e2ec8",
        "status": "preview",
        "local_url": "/storybook/iframe.html?id=cloaked-design-system-controls-chip--playground&viewMode=story"
      },
      {
        "id": "cloaked-design-system-controls-chip--filter-chips",
        "name": "Filter Chips",
        "title": "Cloaked Design System/Controls/Chip",
        "exportName": "FilterChips",
        "source_path": "packages/design-system/src/components/controls/Chip/Chip.stories.tsx",
        "source_digest": "f7caf6a8443355aa1bac6e9ac7586194abefdc6e763586a06faf6153068e2ec8",
        "status": "preview",
        "local_url": "/storybook/iframe.html?id=cloaked-design-system-controls-chip--filter-chips&viewMode=story"
      },
      {
        "id": "cloaked-design-system-controls-chip--command-chips",
        "name": "Command Chips",
        "title": "Cloaked Design System/Controls/Chip",
        "exportName": "CommandChips",
        "source_path": "packages/design-system/src/components/controls/Chip/Chip.stories.tsx",
        "source_digest": "f7caf6a8443355aa1bac6e9ac7586194abefdc6e763586a06faf6153068e2ec8",
        "status": "preview",
        "local_url": "/storybook/iframe.html?id=cloaked-design-system-controls-chip--command-chips&viewMode=story"
      },
      {
        "id": "cloaked-design-system-controls-chip--removable-values",
        "name": "Removable Values",
        "title": "Cloaked Design System/Controls/Chip",
        "exportName": "RemovableValues",
        "source_path": "packages/design-system/src/components/controls/Chip/Chip.stories.tsx",
        "source_digest": "f7caf6a8443355aa1bac6e9ac7586194abefdc6e763586a06faf6153068e2ec8",
        "status": "preview",
        "local_url": "/storybook/iframe.html?id=cloaked-design-system-controls-chip--removable-values&viewMode=story"
      },
      {
        "id": "cloaked-design-system-controls-chip--readonly-member",
        "name": "Readonly Member",
        "title": "Cloaked Design System/Controls/Chip",
        "exportName": "ReadonlyMember",
        "source_path": "packages/design-system/src/components/controls/Chip/Chip.stories.tsx",
        "source_digest": "f7caf6a8443355aa1bac6e9ac7586194abefdc6e763586a06faf6153068e2ec8",
        "status": "preview",
        "local_url": "/storybook/iframe.html?id=cloaked-design-system-controls-chip--readonly-member&viewMode=story"
      },
      {
        "id": "cloaked-design-system-controls-chip--dark-theme",
        "name": "Dark Theme",
        "title": "Cloaked Design System/Controls/Chip",
        "exportName": "DarkTheme",
        "source_path": "packages/design-system/src/components/controls/Chip/Chip.stories.tsx",
        "source_digest": "f7caf6a8443355aa1bac6e9ac7586194abefdc6e763586a06faf6153068e2ec8",
        "status": "preview",
        "local_url": "/storybook/iframe.html?id=cloaked-design-system-controls-chip--dark-theme&viewMode=story"
      }
    ],
    "name": "Chip",
    "id": "chip",
    "category": "Controls"
  },
  "stories_source": {
    "path": "packages/design-system/src/components/controls/Chip/Chip.stories.tsx",
    "code": "import React from 'react';\nimport type { Meta, StoryObj } from '@storybook/react-vite';\nimport { HStack } from '../../layout/HStack/HStack';\nimport { VStack } from '../../layout/VStack/VStack';\nimport { Icon } from '../../primitives/Icon/Icon';\nimport { disabledControl, hapticArgType, selectArgType } from '../../../storybook/controlOptions';\nimport { Chip, type ChipSize } from './Chip';\n\nconst CHIP_SIZES = ['sm', 'md'] as const satisfies readonly ChipSize[];\n\nconst meta: Meta<typeof Chip> = {\n    title: 'Cloaked Design System/Controls/Chip',\n    component: Chip,\n    parameters: {\n        a11y: { test: 'error' },\n        docs: {\n            description: {\n                component:\n                    'Compact pill with four shapes. A selectable chip (`onPress` plus ' +\n                    '`selected`) renders a real button carrying `aria-pressed`. A command chip (`onPress` ' +\n                    'alone) renders the same button without it, because a one-off action has no toggle ' +\n                    'state. A removable chip (`onRemove`) renders a span whose remove affordance is the ' +\n                    'focus stop. A readonly chip (neither handler) renders a span with no focus stop, for ' +\n                    'a locked member of a chip set. The interactive shapes are a discriminated union, so ' +\n                    'press-plus-remove cannot be written: a button may not nest inside a button. A ' +\n                    'standalone marker is a `Tag`, and a trigger that opens a menu is a `Dropdown`.',\n            },\n        },\n    },\n    args: {\n        children: 'Email',\n        size: 'md',\n        selected: false,\n        disabled: false,\n        onPress: () => {},\n    },\n    argTypes: {\n        children: { control: 'text', description: 'Visible chip content.' },\n        size: {\n            ...selectArgType(CHIP_SIZES),\n            description: 'Height/padding tier. `sm` suits inline value tokens, `md` suits filter rows.',\n        },\n        selected: {\n            control: 'boolean',\n            description: 'Filled treatment for a selectable chip. Sets `aria-pressed`. Omit it for a command chip.',\n        },\n        ariaLabel: {\n            control: 'text',\n            description: 'Accessible name for a command chip whose visible label lacks context on its own.',\n        },\n        disabled: {\n            control: 'boolean',\n            description: 'Blocks both press and remove, and dims the chip.',\n        },\n        haptic: {\n            ...hapticArgType,\n            description: 'Haptic fired on a successful press or remove. Defaults to `true` (`selection`).',\n        },\n        leading: { ...disabledControl, description: 'Leading visual before the label, usually an `Icon` or `Avatar`.' },\n        onPress: {\n            ...disabledControl,\n            description:\n                'Makes the chip a button — selectable with `selected`, a command without. Mutually exclusive with `onRemove`.',\n        },\n        onRemove: { ...disabledControl, description: 'Adds the remove (×) button. Mutually exclusive with `onPress`.' },\n    },\n};\nexport default meta;\ntype Story = StoryObj<typeof Chip>;\n\nexport const Playground: Story = {};\n\nexport const FilterChips: Story = {\n    parameters: {\n        docs: {\n            description: {\n                story: 'A toggleable filter row — `selected` marks the active filter; `disabled` dims one.',\n            },\n        },\n    },\n    render: () => (\n        <HStack gap={8} wrap>\n            <Chip size='md' selected onPress={() => {}} testId='controls-chip-filter-all'>\n                All\n            </Chip>\n            <Chip size='md' selected={false} onPress={() => {}} testId='controls-chip-filter-in-progress'>\n                In progress\n            </Chip>\n            <Chip size='md' selected={false} onPress={() => {}} testId='controls-chip-filter-completed'>\n                Completed\n            </Chip>\n            <Chip size='md' selected={false} disabled onPress={() => {}} testId='controls-chip-filter-disabled'>\n                Disabled\n            </Chip>\n        </HStack>\n    ),\n};\n\nexport const CommandChips: Story = {\n    parameters: {\n        docs: {\n            description: {\n                story:\n                    '`onPress` without `selected` is a one-off action — here, each chip opens an explainer. ' +\n                    'No `aria-pressed`, so nothing announces a selection state that does not exist. ' +\n                    '`ariaLabel` carries the phrasing the visible label leaves out.',\n            },\n        },\n    },\n    render: () => (\n        <HStack gap={8} wrap>\n            <Chip\n                size='md'\n                onPress={() => {}}\n                ariaLabel='Why Location is flagged'\n                testId='controls-chip-command-location'\n            >\n                Location\n            </Chip>\n            <Chip\n                size='md'\n                onPress={() => {}}\n                ariaLabel='Why Phone number is flagged'\n                testId='controls-chip-command-phone'\n            >\n                Phone number\n            </Chip>\n        </HStack>\n    ),\n};\n\nexport const RemovableValues: Story = {\n    parameters: {\n        docs: {\n            description: {\n                story: '`onRemove` adds the × button, whose selector suffixes the chip `testId` with `-remove`, for entered value tokens.',\n            },\n        },\n    },\n    render: () => (\n        <VStack gap={12}>\n            <HStack gap={8} wrap>\n                <Chip\n                    size='sm'\n                    leading={<Icon name='mail' size='small' />}\n                    onRemove={() => {}}\n                    removeLabel='Remove email'\n                    testId='controls-chip-value-email'\n                >\n                    sriram@example.com\n                </Chip>\n                <Chip\n                    size='sm'\n                    leading={<Icon name='phone' size='small' />}\n                    onRemove={() => {}}\n                    removeLabel='Remove phone'\n                    testId='controls-chip-value-phone'\n                >\n                    (555) 555-0100\n                </Chip>\n            </HStack>\n            <Chip size='md' onRemove={() => {}} removeLabel='Remove address' testId='controls-chip-value-address'>\n                123 Market Street\n            </Chip>\n        </VStack>\n    ),\n};\n\nexport const ReadonlyMember: Story = {\n    parameters: {\n        docs: {\n            description: {\n                story:\n                    'A chip with neither handler is readonly — a locked value that sits inline with its ' +\n                    'removable siblings and reads as the same family minus the ×. The primary name in the ' +\n                    'data-removal profile uses this shape.',\n            },\n        },\n    },\n    render: () => (\n        <HStack gap={8} wrap>\n            <Chip size='md' testId='controls-chip-readonly-name'>\n                Kevin Dao\n            </Chip>\n            <Chip size='md' onRemove={() => {}} removeLabel='Remove Kevin D.' testId='controls-chip-readonly-sibling'>\n                Kevin D.\n            </Chip>\n        </HStack>\n    ),\n};\n\nexport const DarkTheme: Story = {\n    parameters: {\n        docs: { description: { story: 'Filter chips on the dark theme surface.' } },\n    },\n    globals: { theme: 'dark' },\n    render: () => (\n        <HStack gap={8} wrap>\n            <Chip size='md' selected onPress={() => {}} testId='controls-chip-dark-all'>\n                All\n            </Chip>\n            <Chip size='md' selected={false} onPress={() => {}} testId='controls-chip-dark-completed'>\n                Completed\n            </Chip>\n        </HStack>\n    ),\n};\n"
  },
  "specification": {
    "$schema": "../../../specs/component-spec.schema.json",
    "identity": {
      "name": "Chip",
      "status": "preview",
      "version": "2.3.0",
      "summary": "A compact pill in one of four shapes: selectable, command, removable, or readonly. Never more than one."
    },
    "parts": [
      {
        "id": "container",
        "label": "Container",
        "description": "A button for a selectable or command chip, a span for a removable or readonly one. Owns size, selected, and disabled.",
        "required": true
      },
      {
        "id": "leading",
        "label": "Leading visual",
        "description": "Optional icon or avatar before the value."
      },
      {
        "id": "content",
        "label": "Content",
        "description": "Visible value or filter label."
      },
      {
        "id": "remove-action",
        "label": "Remove action",
        "description": "The independently named button on a removable chip, and its only focus stop."
      }
    ],
    "allowedDesignChoices": {
      "variants": {
        "selectable": {
          "label": "Selectable",
          "description": "Toggles its own state. Renders a button carrying aria-pressed."
        },
        "command": {
          "label": "Command",
          "description": "Runs a one-off action. Renders a button with no aria-pressed."
        },
        "removable": {
          "label": "Removable",
          "description": "Holds a value the user can dismiss. Renders a span with a nested remove button."
        },
        "readonly": {
          "label": "Readonly",
          "description": "A locked member of a chip set. Renders a span with no remove button and no focus stop."
        }
      },
      "sizes": {
        "sm": {
          "label": "Small"
        },
        "md": {
          "label": "Medium"
        }
      }
    },
    "variants": [
      {
        "id": "selectable",
        "label": "Selectable",
        "description": "`onPress` with `selected`. One focus stop, on the chip itself.",
        "platforms": [
          "ios",
          "android",
          "web"
        ]
      },
      {
        "id": "command",
        "label": "Command",
        "description": "`onPress` without `selected`, plus an optional `ariaLabel`. One focus stop, on the chip itself.",
        "platforms": [
          "ios",
          "android",
          "web"
        ]
      },
      {
        "id": "removable",
        "label": "Removable",
        "description": "`onRemove`. One focus stop, on the remove affordance.",
        "platforms": [
          "ios",
          "android",
          "web"
        ]
      },
      {
        "id": "readonly",
        "label": "Readonly",
        "description": "Neither `onPress` nor `onRemove`. Renders a span with no focus stop.",
        "platforms": [
          "ios",
          "android",
          "web"
        ]
      }
    ],
    "sizes": [
      {
        "id": "sm",
        "label": "Small",
        "description": "24-unit inline value token."
      },
      {
        "id": "md",
        "label": "Medium",
        "description": "32-unit filter or standalone value chip."
      }
    ],
    "measurements": [
      {
        "id": "small-min-height",
        "label": "Small chip minimum height",
        "kind": "exact",
        "token": "--cds-size-24",
        "value": 24,
        "unit": "px",
        "appliesTo": [
          "container",
          "sm"
        ]
      },
      {
        "id": "medium-min-height",
        "label": "Medium chip minimum height",
        "kind": "exact",
        "token": "--cds-size-32",
        "value": 32,
        "unit": "px",
        "appliesTo": [
          "container",
          "md"
        ]
      },
      {
        "id": "medium-content-gap",
        "label": "Medium content gap",
        "kind": "exact",
        "token": "--cds-space-8",
        "value": 8,
        "unit": "px",
        "appliesTo": [
          "leading",
          "content",
          "trailing",
          "remove-action",
          "md"
        ]
      }
    ],
    "layout": {
      "alignment": "All visible parts align on the pill center line and the container hugs its content.",
      "flow": "Optional leading visual, content, then the remove action on a removable chip.",
      "notes": [
        "Assign exactly one shape: selectable, command, removable, or readonly.",
        "Use readonly for a locked member of a chip set, and Tag for a standalone marker or status label.",
        "Use Dropdown for a trigger that opens a menu.",
        "Put a set in a ChipGroup rather than a bare row."
      ]
    },
    "typographyAndColor": {
      "typography": [
        {
          "label": "Chip content",
          "description": "Use body-small text at both chip sizes.",
          "token": "--cds-type-body-small-size"
        }
      ],
      "colors": [
        {
          "label": "Default surface",
          "description": "Use the semantic input container.",
          "token": "--cds-input-container"
        },
        {
          "label": "Selected surface",
          "description": "Use the inverse background for selected filters.",
          "token": "--cds-bg-inverse"
        },
        {
          "label": "Selected content",
          "description": "Use inverse text on the selected inverse surface.",
          "token": "--cds-text-inverse"
        },
        {
          "label": "Content",
          "description": "Use primary text emphasis for the represented value.",
          "token": "--cds-text-primary"
        },
        {
          "label": "Remove action",
          "description": "Use secondary text emphasis for the remove icon.",
          "token": "--cds-text-secondary"
        }
      ]
    },
    "states": [
      {
        "id": "default",
        "label": "Default",
        "description": "Shows the neutral pill treatment."
      },
      {
        "id": "selected",
        "label": "Selected",
        "description": "Inverse fill and inverse text on a selectable chip, exposed as `aria-pressed`."
      },
      {
        "id": "pressed",
        "label": "Pressed",
        "description": "Temporary press feedback on a selectable or command chip."
      },
      {
        "id": "disabled",
        "label": "Disabled",
        "description": "Sets the native disabled attribute and dims the chip."
      },
      {
        "id": "removing",
        "label": "Removing",
        "description": "On a removable chip, shows a spinner in place of the remove icon and blocks the remove button while its removal is in flight, exposed as `aria-busy`."
      }
    ],
    "behavior": [
      {
        "label": "Selectable press",
        "description": "Invoke onPress on tap and expose the pressed state. The root is a real button, so activation is native."
      },
      {
        "label": "Command press",
        "description": "Invoke onPress on tap without reporting any selection state. Use this shape when the chip runs a one-off action, such as opening an explainer."
      },
      {
        "label": "Remove",
        "description": "Invoke onRemove only from the independently labelled remove action."
      },
      {
        "label": "One shape per chip",
        "description": "A chip is exactly one of selectable, command, removable, or readonly. The props are a discriminated union, so onPress and onRemove cannot be combined (two focus stops would require a button inside a button), selected is what picks selectable over command, and a chip with neither handler is readonly."
      },
      {
        "label": "Readonly member versus a standalone marker",
        "description": "A readonly chip is a locked member of a chip set, so it stays in the chip family alongside its removable siblings. A standalone marker or status label is a Tag, and a pill that opens a menu is a Dropdown."
      }
    ],
    "accessibility": [
      {
        "label": "Selectable semantics",
        "description": "A selectable chip is a button carrying aria-pressed and the native disabled attribute."
      },
      {
        "label": "Command semantics",
        "description": "A command chip is a button with no aria-pressed, because a permanent unpressed toggle state misreports a one-off action. Give it ariaLabel when the visible label is not a complete name."
      },
      {
        "label": "Removable semantics",
        "description": "The body of a removable chip takes no focus. Its remove button is the only focus stop."
      },
      {
        "label": "Readonly semantics",
        "description": "A readonly chip is a span with no role and no focus stop, so it is announced as text alongside its interactive siblings."
      },
      {
        "label": "Remove name",
        "description": "Every remove action carries a value-specific accessible label and a stable test identifier. removeLabel is required, so there is no generic fallback to fall back to."
      },
      {
        "label": "Grouping",
        "description": "Put a set of chips in a ChipGroup so they are announced as one group."
      }
    ],
    "contentAdaptation": [
      {
        "label": "Concise values",
        "description": "Keep chip labels short enough to remain scannable in wrapping rows."
      },
      {
        "label": "Value-specific removal",
        "description": "Name remove actions with the represented value or category when context is not obvious."
      }
    ],
    "motionHaptics": {
      "motion": [
        {
          "label": "Press feedback",
          "description": "Use subtle opacity and scale feedback and remove scale under reduced-motion preferences."
        }
      ],
      "haptics": [
        {
          "label": "Successful interaction",
          "description": "Request the selection haptic after an enabled press or removal."
        }
      ]
    },
    "platformDifferences": [
      {
        "platforms": [
          "web"
        ],
        "description": "Web renders no focus ring and no keyboard activation handler for either shape.",
        "rationale": "The only consumers are a touch iOS WKWebView and a harness previewing that same UI, so a keyboard affordance here would be dead code."
      }
    ]
  },
  "specification_source": "packages/design-system/src/components/controls/Chip/Chip.spec.json",
  "guidance": {
    "summary": "A compact pill in one of four shapes: selectable, command, removable, or readonly. Never more than one.",
    "guidance": [
      {
        "heading": "Overview",
        "body": "A compact pill in one of four shapes. A selectable chip takes `onPress` with `selected`. A command\nchip takes `onPress` alone. A removable chip takes `onRemove`. A readonly chip takes neither, for a\nlocked member of a chip set. Reach for `Tag` when the pill is a standalone marker or status label,\nand `Dropdown` for a trigger that opens a menu."
      },
      {
        "heading": "The shapes are different elements",
        "body": "This is the reason Chip and Tag are separate components, and the reason press and remove cannot be\ncombined:\n\n| Shape        | Element                                     | Focus stops |\n| ------------ | ------------------------------------------- | ----------- |\n| selectable   | `<button aria-pressed>`                     | 1           |\n| command      | `<button>`                                  | 1           |\n| removable    | `<span>` with a nested remove `<button>`    | 1           |\n| readonly     | `<span>` with no focus stop                 | 0           |\n| press+remove | would need a `<button>` inside a `<button>` | 2           |\n\n`ChipProps` is a discriminated union, so the last row cannot be written. Passing `onPress` and\n`onRemove` together is a type error rather than a runtime surprise.\n\n`selected` is what separates the first two rows. A chip that reports `aria-pressed=\"false\"` forever\ntells assistive technology it is an unselected member of a selection set — wrong for a chip that\njust opens an explainer. Omit `selected` and the attribute goes away with it."
      },
      {
        "heading": "Use when",
        "body": "`size` is `sm` for inline value tokens and `md` for filter rows. `disabled` sets the native disabled\nattribute and dims the chip. `removeLabel` is required on a removable chip: the × carries no visible\ntext, so a generic default would ship a row of buttons all announcing the same thing."
      },
      {
        "heading": "Put a set in a ChipGroup",
        "body": "A bare row of chips reads to assistive technology as loose controls with no relationship. `ChipGroup`\ngives the set an accessible name and owns the row layout, including the wrap and scroll behavior."
      }
    ],
    "usage": [
      {
        "variant": "onPress + selected",
        "use": "A filter toggle where `selected` marks the active option — website filters, feedback options.",
        "avoid": "Combining with onRemove. A trigger that opens a menu is a Dropdown, not a Chip.",
        "axis": "Job"
      },
      {
        "variant": "onPress alone",
        "use": "A one-off command — a risk chip that opens an explainer. `ariaLabel` names it when the visible label is not a complete phrase.",
        "avoid": "A member of a selection set. Pass `selected` there so the toggle state is announced.",
        "axis": "Job"
      },
      {
        "variant": "onRemove",
        "use": "A removable value token — entered emails, phones, and addresses in the data-removal profile, where the × selector suffixes the chip testId with `-remove`.",
        "avoid": "A filter — a removable chip is an entered value, not a toggle.",
        "axis": "Job"
      },
      {
        "variant": "no handler",
        "use": "A readonly, locked member of a chip set — the protected primary name sitting inline with removable name chips.",
        "avoid": "A standalone marker or status label. Use a Tag there.",
        "axis": "Job"
      }
    ],
    "examples": [
      {
        "kind": "do",
        "caption": "Give a chip `onPress`, or give it `onRemove`, or leave both off for a readonly member."
      },
      {
        "kind": "do",
        "caption": "Pass `selected` only when the chip really is a toggle."
      },
      {
        "kind": "do",
        "caption": "Use a readonly chip for a locked value inside a chip set, like the primary name in a value list."
      },
      {
        "kind": "dont",
        "caption": "Reach for a readonly Chip as a standalone marker or status label. That is a `Tag`."
      }
    ],
    "source": "packages/design-system/src/components/controls/Chip/Chip.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-chip",
    "json": "/data/visual/components/chip.json",
    "storybook": "/storybook/?path=/story/cloaked-design-system-controls-chip--playground"
  }
}