{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "chip",
  "title": "Chip",
  "description": "Always-removable metadata value for primary surfaces, with semantic value status and parent-owned removal.",
  "type": "registry:ui",
  "meta": {
    "library": "@ds-mo/ui",
    "distribution": "npm",
    "storybook": "https://zainadeel.github.io/compomo/?path=/story/chip",
    "source": "src/wc/components/Chip/Chip.tsx",
    "intentStatus": "complete",
    "intent": {
      "audience": "general",
      "status": "stable",
      "summary": "Always-removable metadata value for primary surfaces, with semantic value status and parent-owned removal.",
      "useWhen": [
        "A user-applied value such as a filter, recipient, or tokenized input entry must remain visible and individually removable.",
        "A compact metadata value needs a semantic neutral, active, error, or caution status before removal.",
        "A collection owner can remove the represented value and restore focus after the dismiss action."
      ],
      "avoidWhen": [
        "The label is static or not individually removable; use Tag instead.",
        "The control selects, toggles, or navigates; use the matching button or navigation component.",
        "The information is a persistent status, count, or unread indicator; use Badge or an appropriate status composition instead.",
        "The chip would be placed on any surface other than a primary surface."
      ],
      "alternatives": [
        {
          "when": "The metadata label is static and has no dismiss action.",
          "component": "component:ds-tag",
          "reason": "Tag owns non-interactive taxonomy and metadata labels."
        },
        {
          "when": "The compact mark communicates a count, status, or unread indicator.",
          "component": "component:ds-badge",
          "reason": "Badge owns supplemental counters and status marks without a dismiss action."
        },
        {
          "when": "The value is a selectable or persistent toggle.",
          "component": "component:ds-button-unfilled",
          "reason": "ButtonUnfilled owns command and toggle semantics."
        }
      ],
      "commonlyComposedWith": [
        "component:ds-input",
        "component:ds-select"
      ],
      "accessibility": [
        "Keep the visible label meaningful without relying on semantic color alone.",
        "Give the dismiss action a name that identifies the represented value.",
        "After removal, the parent moves focus to the next chip, then the previous chip, or the owning collection or input trigger when no chips remain.",
        "Inactive chips remain visible while their dismiss action is disabled and removed from keyboard interaction."
      ],
      "states": [
        "Semantic state describes the represented value; active does not mean selected or pressed.",
        "The dismiss action is the chip's only interaction, and the parent owns data mutation after dsRemove.",
        "Long labels remain on one line and truncate only when the consuming layout supplies a maximum width; otherwise the chip sizes to its content.",
        "Rounded shape is a visual choice and does not change semantics or interaction.",
        "Chip is designed only for primary surfaces and has no surface-context API."
      ],
      "responsiveBehavior": [
        "The parent chooses chip size and owns wrapping, overflow, and collection condensation.",
        "Chip does not automatically resize, hide, or collapse its label at responsive breakpoints."
      ],
      "frameworkCaveats": {
        "customElements": [
          "dsRemove has no payload; associate each rendered chip with its owning value and remove that value from the event handler."
        ],
        "react": [
          "Use the rendered chip's bound item context in the dsRemove handler, then restore focus after the collection rerenders."
        ],
        "angular": [
          "Use the rendered chip's bound item context in the dsRemove handler, then restore focus after the collection rerenders."
        ]
      },
      "references": [
        {
          "label": "Storybook examples",
          "path": "src/wc/components/Chip/Chip.stories.ts"
        }
      ]
    },
    "api": {
      "props": {
        "isInactive": {
          "type": "boolean",
          "resolvedType": "boolean",
          "attribute": "is-inactive",
          "default": "false",
          "required": false,
          "mutable": false
        },
        "label": {
          "type": "string",
          "resolvedType": "string",
          "attribute": "label",
          "required": true,
          "mutable": false
        },
        "maxWidth": {
          "type": "string | number | undefined",
          "resolvedType": "number | string | undefined",
          "attribute": "max-width",
          "required": false,
          "mutable": false
        },
        "removeLabel": {
          "type": "string",
          "resolvedType": "string",
          "attribute": "remove-label",
          "default": "'Remove {label}'",
          "required": false,
          "mutable": false,
          "description": "Accessible remove action. Use `{label}` as the chip-label placeholder."
        },
        "rounded": {
          "type": "boolean",
          "resolvedType": "boolean",
          "attribute": "rounded",
          "default": "false",
          "required": false,
          "mutable": false
        },
        "size": {
          "type": "ChipSize",
          "resolvedType": "\"md\" | \"sm\" | \"xs\"",
          "attribute": "size",
          "default": "'md'",
          "required": false,
          "mutable": false
        },
        "state": {
          "type": "ChipState",
          "resolvedType": "\"active\" | \"caution\" | \"default\" | \"error\"",
          "attribute": "state",
          "default": "'default'",
          "required": false,
          "mutable": false,
          "description": "Semantic color state."
        }
      },
      "events": [
        {
          "name": "dsRemove",
          "detail": "void",
          "bubbles": true,
          "cancelable": true,
          "composed": true,
          "description": "Fired when the remove button is clicked."
        }
      ],
      "methods": [],
      "slots": []
    },
    "props": {
      "isInactive": {
        "type": "boolean",
        "resolvedType": "boolean",
        "attribute": "is-inactive",
        "default": "false",
        "required": false,
        "mutable": false
      },
      "label": {
        "type": "string",
        "resolvedType": "string",
        "attribute": "label",
        "required": true,
        "mutable": false
      },
      "maxWidth": {
        "type": "string | number | undefined",
        "resolvedType": "number | string | undefined",
        "attribute": "max-width",
        "required": false,
        "mutable": false
      },
      "removeLabel": {
        "type": "string",
        "resolvedType": "string",
        "attribute": "remove-label",
        "default": "'Remove {label}'",
        "required": false,
        "mutable": false,
        "description": "Accessible remove action. Use `{label}` as the chip-label placeholder."
      },
      "rounded": {
        "type": "boolean",
        "resolvedType": "boolean",
        "attribute": "rounded",
        "default": "false",
        "required": false,
        "mutable": false
      },
      "size": {
        "type": "ChipSize",
        "resolvedType": "\"md\" | \"sm\" | \"xs\"",
        "attribute": "size",
        "default": "'md'",
        "required": false,
        "mutable": false
      },
      "state": {
        "type": "ChipState",
        "resolvedType": "\"active\" | \"caution\" | \"default\" | \"error\"",
        "attribute": "state",
        "default": "'default'",
        "required": false,
        "mutable": false,
        "description": "Semantic color state."
      }
    },
    "events": [
      {
        "name": "dsRemove",
        "detail": "void",
        "bubbles": true,
        "cancelable": true,
        "composed": true,
        "description": "Fired when the remove button is clicked."
      }
    ],
    "methods": [],
    "slots": [],
    "exports": {
      "customElement": "ds-chip",
      "react": "DsChip",
      "vue": "DsChip",
      "angular": "DsChip"
    },
    "consumption": {
      "install": "npm install @ds-mo/ui @ds-mo/tokens @ds-mo/icons",
      "cssSetup": "import '@ds-mo/tokens';\nimport '@ds-mo/tokens/reset';\nimport '@ds-mo/tokens/globals';",
      "customElements": {
        "import": "import '@ds-mo/ui/dist/components/ds-chip.js';",
        "example": "<ds-chip></ds-chip>"
      },
      "react": {
        "import": "import { DsChip } from '@ds-mo/ui/react';",
        "example": "<DsChip />"
      },
      "vue": {
        "import": "import { DsChip } from '@ds-mo/ui/vue';",
        "example": "<DsChip />"
      },
      "angular": {
        "import": "import { DsChip } from '@ds-mo/ui/angular/ds-chip';",
        "example": "<ds-chip></ds-chip>"
      },
      "peerDependencies": {
        "required": [
          "@ds-mo/tokens ^6.5.0",
          "@ds-mo/icons ^7.0.0"
        ],
        "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."
      }
    }
  },
  "dependencies": [
    "@ds-mo/ui",
    "@ds-mo/tokens",
    "@ds-mo/icons"
  ],
  "registryDependencies": [
    "icon",
    "text"
  ],
  "files": [
    {
      "path": "src/wc/components/Chip/Chip.css",
      "content": "@import '../../utils/tag-chip.css';\n\n/*\n * Semantic state colors — Chip’s differentiator from Tag.\n * All states use the faint contrast weight; hue comes from the state.\n */\n:host(.chip--default) {\n  background-color: var(--color-background-faint-neutral);\n  color: var(--color-foreground-bold-neutral);\n}\n\n:host(.chip--active) {\n  background-color: var(--color-background-faint-brand);\n  color: var(--color-foreground-bold-brand);\n}\n\n:host(.chip--error) {\n  background-color: var(--color-background-faint-negative);\n  color: var(--color-foreground-bold-negative);\n}\n\n:host(.chip--caution) {\n  background-color: var(--color-background-faint-caution);\n  color: var(--color-foreground-bold-caution);\n}\n\n/*\n * Label↔dismiss uses host gap, mirroring Tag icon↔label spacing:\n * [inset][text][inset][gap][icon].\n */\n.tag__remove {\n  padding: 0;\n  margin: 0;\n  border: none;\n  background: none;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: default;\n  color: inherit;\n  flex-shrink: 0;\n  position: relative;\n  z-index: 2;\n  border-radius: var(--dimension-radius-half);\n}\n\n.tag__remove::before {\n  content: '';\n  position: absolute;\n  inset: var(--dimension-space-n025);\n  border-radius: var(--dimension-radius-half);\n  background-color: transparent;\n  transition: var(--effect-transition-interaction-background-short-2);\n  pointer-events: none;\n}\n\n@media (hover: hover) and (pointer: fine) {\n  .tag__remove:hover::before {\n    background-color: var(--color-interaction-hover);\n  }\n}\n\n.tag__remove:active::before {\n  background-color: var(--color-interaction-pressed);\n}\n\n:host(.tag--size-sm) .tag__remove::before {\n  inset: var(--dimension-space-n012);\n}\n\n:host(.tag--size-xs) .tag__remove::before {\n  inset: 0;\n}\n\n.tag__remove-x {\n  display: inline-flex;\n  flex-shrink: 0;\n  width: var(--ds-control-icon);\n  height: var(--ds-control-icon);\n}\n",
      "type": "registry:ui"
    },
    {
      "path": "src/wc/components/Chip/Chip.tsx",
      "content": "import { Component, Prop, Event, EventEmitter, h, Host } from '@stencil/core';\nimport { CONTROL_TEXT_VARIANT } from '../../utils';\n\n/**\n * Semantic chip state — replaces Tag’s intent × contrast matrix.\n * - `default` — neutral faint\n * - `active` — brand faint\n * - `error` — negative faint\n * - `caution` — caution faint\n */\nexport type ChipState = 'default' | 'active' | 'error' | 'caution';\nexport type ChipSize = 'md' | 'sm' | 'xs';\n\n/** Dismiss `ds-icon` size — same iconography metrics as Tag’s leading icon. */\nconst ICON_SIZE: Record<ChipSize, 'md' | 'sm' | 'xs'> = {\n  md: 'md',\n  sm: 'sm',\n  xs: 'xs',\n};\n\n/**\n * Removable chip — same density recipe as Tag, but colored by semantic `state`\n * (not intent × contrast). Not a toggle/select control; the only intentional\n * action is remove.\n */\n@Component({\n  tag: 'ds-chip',\n  styleUrl: 'Chip.css',\n  scoped: true,\n})\nexport class Chip {\n  @Prop() label!: string;\n  /** Semantic color state. @default 'default' */\n  @Prop() state: ChipState = 'default';\n  @Prop() size: ChipSize = 'md';\n  @Prop() rounded: boolean = false;\n  @Prop() maxWidth: string | number | undefined;\n  @Prop() isInactive: boolean = false;\n  /** Accessible remove action. Use `{label}` as the chip-label placeholder. */\n  @Prop() removeLabel: string = 'Remove {label}';\n\n  /** Fired when the remove button is clicked. */\n  @Event() dsRemove!: EventEmitter<void>;\n\n  private handleRemove = (e: MouseEvent) => {\n    e.stopPropagation();\n    if (this.isInactive) return;\n    this.dsRemove.emit();\n  };\n\n  render() {\n    const textVariant = CONTROL_TEXT_VARIANT[this.size];\n    const iconSize = ICON_SIZE[this.size];\n\n    const maxWidthStyle = this.maxWidth != null\n      ? { maxWidth: typeof this.maxWidth === 'number' ? `${this.maxWidth}px` : this.maxWidth }\n      : undefined;\n\n    return (\n      <Host\n        class={{\n          'tag': true,\n          'chip': true,\n          [`chip--${this.state}`]: true,\n          [`tag--size-${this.size}`]: true,\n          'ds-control--md': this.size === 'md',\n          'ds-control--sm': this.size === 'sm',\n          'ds-control--xs': this.size === 'xs',\n          'tag--rounded': this.rounded,\n          'tag--removable': true,\n          /* Hover overlay on the chip surface — dismiss is the only action. */\n          'ds-interaction-fill': !this.isInactive,\n          'ds-control-inactive': this.isInactive,\n        }}\n        style={maxWidthStyle}\n        aria-disabled={this.isInactive ? 'true' : undefined}\n      >\n        <ds-text class=\"tag__label\" as=\"span\" variant={textVariant} color=\"inherit\">\n          {this.label}\n        </ds-text>\n        <button\n          type=\"button\"\n          class=\"tag__remove ds-focus-ring-inset\"\n          onClick={this.handleRemove}\n          aria-label={this.removeLabel.replace('{label}', this.label)}\n          disabled={this.isInactive || undefined}\n        >\n          <ds-icon class=\"tag__remove-x\" name=\"Cross\" size={iconSize} color=\"inherit\"></ds-icon>\n        </button>\n      </Host>\n    );\n  }\n}\n",
      "type": "registry:ui"
    }
  ]
}