Chip

짧은 값을 표시하고, 필요할 때 선택·수정·삭제하거나 popover/inline editor 의 트리거로 사용하는 작은 인터랙티브 pill.

Chip은 두 가지 역할을 모두 다룹니다.

Entry Chip — 단어장, 필터, 태그처럼 짧은 항목을 촘촘하게 보여줍니다. 항목 자체가 선택/수정/삭제됩니다.
Trigger Chip — 메타 정보 줄에 앉아 popover/inline editor 를 여는 트리거로 사용합니다. 보통 leading 아이콘(맥락 표시) + 라벨 + trailing chevron(열림 hint) 구성.

단순 상태 표시는 Badge, 명령 실행은 Button 을 우선 사용하세요.

Mobile

Chip은 시각적으로 작지만 인터랙티브하므로 터치 hit area를 ≥44pt 확보한다.

Chip 자체 높이가 28~32px이면 hitSlop 또는 invisible padding으로 hit area를 44pt 이상으로 확장
Trigger Chip의 경우 탭 시 popover가 아닌 Inline Popover 또는 BottomSheet로 분기 — 콘텐츠 크기와 모달성에 따라 선택
다중 chip이 가로로 나열될 때 행간을 충분히 확보(gap-2 이상)해서 인접 chip의 hit area가 겹치지 않게 함
Entry chip의 삭제(X) trailing 아이콘은 chip 본체와 별도 터치 타겟. 의도치 않은 삭제 방지를 위해 X 아이콘의 hit area도 별도 44pt 확보 또는 long-press 컨펌 패턴 사용

Variants

Variant	Body text	사용
`default`	`brown-800`	Entry Chip — 단어장, 태그, 필터 selection 등 본문 위계로 읽혀야 하는 항목
`muted`	`stone-500`	Trigger Chip — 메타 정보 줄에 앉는 트리거. 본문보다 한 단계 흐려서 부가 정보처럼 보여야 함

muted 의 텍스트 톤은 Auxiliary / Meta 와 동일합니다. 메타 정보 row 안에서 trigger chip 이 옆 텍스트와 같은 위계로 읽혀야 하기 때문.

Sizes

Size	Padding (단순)	Padding (with delete)	Typography	Approx height (web)	Mobile (≥44pt hit area)
`default`	`py-1.5 px-3.5`	`py-1.5 pl-3.5 pr-1.5`	`label1NormalRegular` (14px)	~32px	`hitSlop`으로 hit area 44pt 확장 필수
`sm`	`py-1 px-2`	`py-1 pl-2 pr-1`	`caption1Medium` (12px)	~24px	`hitSlop`으로 hit area 44pt 확장 필수

sm 은 메타 정보 row(날짜·시간 옆) 처럼 dense 한 구역에서 사용합니다. 모바일은 두 사이즈 모두 시각 크기를 유지하면서 hit area만 ≥44pt로 확장. 인접 chip들의 hit area가 겹치지 않게 gap-2 이상 간격 확보. Entry chip의 trailing 삭제(X) 아이콘은 chip 본체와 별도 hit area 44pt 또는 long-press 컨펌으로 보호.

States

State	Border	Background	Text
default	transparent	`stone-50`	variant 에 따름 (위 표 참조)
hover	transparent	`stone-100`	variant 에 따름
focus	`brown-800`	`stone-50`	variant 에 따름
delete hover/focus	—	`stone-200`	`brown-800`

Slots

leadingIcon — body 안 라벨 앞. body text color 를 그대로 상속.
trailing — body 안 라벨 뒤. 항상 한 단계 흐린 톤(stone-400). ChevronDown 등 hint icon 전용.
onDelete — wrapper 의 sibling 으로 × 버튼 렌더. trailing 과 동시에 쓰지 않습니다 — onDelete 가 있으면 trailing 은 무시.

Guidelines

포커스는 Text Field처럼 얇은 brown border로 표시합니다. 두꺼운 ring이나 offset ring을 사용하지 않습니다.
단일 단어는 rounded-full, 발음+표기처럼 2줄 정보는 rounded-2xl을 사용합니다.
삭제 아이콘은 Chip 내부 오른쪽에 둡니다. 삭제만 필요한 경우에도 Chip 전체 배경과 포커스 기준은 동일하게 유지합니다.
트리거 chip 의 trailing chevron 은 본문보다 한 단계 흐려서 (stone-400) "있어도 그만" 으로 읽혀야 합니다 — 사용자의 시선을 끌면 안 됩니다.
트리거 chip 의 leading icon 은 맥락 신호 (참석자 = Users, 폴더 = Folder, 날짜 = Calendar 등). 라벨이 명확하면 leading icon 없이 사용해도 됩니다.
길이가 길어질 수 있는 값은 max-width와 줄바꿈/말줄임 정책을 호출부에서 지정합니다.

Do / Don't

Do: 메타 row 안에서 popover trigger 는 Chip variant="muted" size="sm" 패턴.
Do: 트리거 chip 은 클릭 가능한 영역이 chip 전체. 라벨만 클릭되는 형태로 만들지 말 것.
Don't: trigger chip 에 default variant 사용 금지 — brown-800 본문 텍스트와 톤이 같아 본문처럼 읽힘.
Don't: 명령 실행(저장/취소) 을 Chip 으로 만들지 말 것 — Button.
Don't: 단순 상태 표시 (예: "BETA", "NEW") 는 Badge 사용.