id: chip
name: Chip
component: Chip
category: data-display
purpose: >
  Compact interactive element representing an attribute, text tag, selection filter, or removable token.

anatomy:
  - root
  - avatar
  - icon-start
  - label
  - remove-button

variants:
  default:
    intent: neutral-tag
  primary:
    intent: selected-brand-chip
  outline:
    intent: subtle-filterable-chip

sizes:
  sm:
    height: 24
    padding_inline: 8
    font_size: "var(--qhr-text-xs)"
  md:
    height: 32
    padding_inline: 12
    font_size: "var(--qhr-text-sm)"
  lg:
    height: 40
    padding_inline: 16
    font_size: "var(--qhr-text-base)"

states:
  - default
  - selected
  - disabled

slots:
  leadingIcon: optional
  avatar: optional
  default: required
  trailingIcon: optional

accessibility:
  role: button
  keyboard: true
  focusVisible: true
  keyboard_keys:
    Enter: "Toggles or triggers chip action"
    Backspace: "Removes chip if removable"
    Delete: "Removes chip if removable"

ai:
  purpose: "Compact interactive element representing an attribute, text tag, selection filter, or removable token."
  whenToUse:
    - "Active filter pills in search bars and data tables"
    - "Tag entry inputs (TagInput)"
    - "Compact entity mentions"
  avoid:
    - "Main call to action triggers (use Button instead)"
    - "Passive notification alerts (use Badge or Alert instead)"