# SListItem

> 자동 생성 문서 — `npm run docs:gen`. 소스: 각 컴포넌트의 Props/Handle 인터페이스 + import 의존성.

### SListItem

#### Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `title` | `SListItemSlot` | — | 리스트 아이템 제목 |
| `supportingText?` | `SListItemSlot` | — | 제목을 보조하는 텍스트 |
| `supportingTextPosition?` | `SListItemSupportingTextPosition` | `'right'` | 보조 텍스트 위치 |
| `depth?` | `1 \| 2 \| 3` | `1` | 중첩 단계. Figma 기준 1~3단계 |
| `leading?` | `SListItemSlot` | — | 타이틀 앞에 표시할 아이콘/콘텐츠 |
| `trailing?` | `SListItemSlot` | — | 타이틀 뒤에 표시할 태그/콘텐츠 |
| `bordered?` | `boolean` | `false` | 외곽 테두리 사용 여부 |
| `selected?` | `boolean` | `false` | 선택 상태 여부 |
| `clickable?` | `boolean` | `true` | 클릭 가능 상태 여부 |
| `interaction?` | `SListItemInteraction` | — | hover/selected 상태에서 적용할 인터랙션 preset |
| `accentStripe?` | `boolean` | `false` | 아이템 왼쪽 accent stripe 표시 여부 |
| `dense?` | `boolean` | `false` | 조밀한 높이 사용 여부 |
| `size?` | `SListItemSize` | `'sm'` | 타이포그래피 크기 |
| `disabled?` | `boolean` | `false` | 비활성 상태 여부 |

## Dependencies

### Used by

 - [SExpansionList](../SExpansionList)

### Depends on

- [SIcon](../SIcon)

### Graph

```mermaid
graph TD;
  SListItem --> SIcon
  SExpansionList --> SListItem
  style SListItem fill:#f9f,stroke:#333,stroke-width:4px
```