# Ariakit 디자인 시스템

## Ariakit 디자인 시스템 인터페이스 미리보기

그룹별 레퍼런스를 필터링하고, 아래쪽 화살표와 Enter 키로 선택한 다음 결과를 확인하고 로컬 읽기 목록에 추가하세요.

## Ariakit 디자인 시스템 디자인 레퍼런스

Ariakit React 0.4.40은 스타일이 없는 접근성 툴킷입니다. 아래의 페이지 팔레트, 글꼴 크기 체계, 간격을 기본 디자인 테마로 제공하지 않습니다. 모든 --app-* 값은 실행 가능한 이 예제를 위해 명시적으로 구성한 독창적인 설정이며, 컴포넌트 이름과 상태 속성은 Ariakit API입니다.

### 독창적인 시맨틱 색상 설정

| 이름 / 규칙 | 값 / 구성 | 용도 |
| --- | --- | --- |
| --app-canvas | #f5f3ee | 페이지 배경. |
| --app-surface | #fff | 콤보박스 팝오버 및 레퍼런스 카드. |
| --app-text | #292e29 | 본문 텍스트. |
| --app-muted | #657064 | 보조 레이블 및 안내 문구. |
| --app-border | #d8ddd4 | 입력란과 카드의 테두리. |
| --app-action | #285f48 | 주요 동작 및 포커스 링. |
| --app-on-action | #fff | 주요 동작 버튼의 텍스트. |
| --app-active | #e3eee4 | 활성 옵션 및 선택 동작 표면. |
### 독창적인 형태와 간격

| 이름 / 규칙 | 값 / 구성 | 용도 |
| --- | --- | --- |
| --app-radius | 10px | 입력란, 팝오버, 레퍼런스 카드의 모서리 반경. |
| --app-space-1 | 8px | 명시적으로 정의한 독창적인 간격 척도. |
| --app-space-2 | 16px | 명시적으로 정의한 독창적인 간격 척도. |
| --app-space-3 | 24px | 명시적으로 정의한 독창적인 간격 척도. |
| --app-space-4 | 32px | 명시적으로 정의한 독창적인 간격 척도. |
| Combobox padding | 13px 48px 13px 14px | 펼침 컨트롤을 위한 여백을 확보합니다. |
| Popover maximum height | 340px | 결과 목록이 길 때 목록 영역에서 스크롤합니다. |
| Popover gutter | 8px | 입력란과 추천 항목 사이의 실제 gutter prop. |
### 독창적인 타이포그래피

| 이름 / 규칙 | 값 / 구성 | 용도 |
| --- | --- | --- |
| Font family | system-ui, sans-serif | 글꼴 다운로드나 Ariakit 전용 글꼴이 필요하지 않습니다. |
| Page heading | 36px / 1.1; 30px mobile | 독창적인 페이지 계층 구조. |
| Input text | 15px | 독창적으로 설정한 콤보박스 텍스트 크기. |
| Option text | 14px | 독창적으로 설정한 결과 레이블 크기. |
| Group label | 11px, uppercase, 700 | 독창적으로 설정한 그룹 표시 방식. |
| Supporting hint | 12px / 1.7 | 키보드 안내 문구의 리듬. |
### 네이티브 구성과 상태

| 이름 / 규칙 | 값 / 구성 | 용도 |
| --- | --- | --- |
| ComboboxProvider.inputValue | Controlled query string | 현재 0.4.40 입력 상태 API. setInputValue가 필터링을 업데이트합니다. |
| ComboboxProvider.selectedValue | Controlled reference name | 확정된 선택 항목은 검색어와 별개입니다. |
| ComboboxGroup / ComboboxGroupLabel | Foundations / Components | 네이티브 레이블이 지정된 옵션 그룹. |
| ComboboxPopover.sameWidth | true | 앵커 너비에 맞춥니다. |
| ComboboxItem.disabled | true for Experimental grid | 선택할 수 없는 레코드입니다. |
| [data-active-item] | CSS state selector | 키보드로 활성화된 옵션을 선택 상태와 별도로 스타일링합니다. |
| Combobox autoSelect | Not enabled in this specimen | 아래쪽 화살표를 누르면 목록으로 이동하고, Enter를 누르면 옵션이 선택됩니다. |
## Ariakit 디자인 시스템 종합 가이드

실제 인터페이스를 위해 이 시스템을 선택하고 적용하고 검토하는 실용 가이드.

완전한 안내와 구현 시작점, 소스 링크.

## Ariakit 디자인 시스템: 콤보박스 상태 모델부터 시작하기

### 콤보박스 상태 모델부터 시작하기

> Ariakit의 ComboboxProvider는 레이블, 편집 가능한 입력란, 펼침 버튼, 팝업, 옵션을 연결합니다. Provider가 요소 간 공유되는 상호작용 상태를 관리하고, 각 컴포넌트는 구조의 일부를 담당합니다. 따라서 모든 키 입력을 새로운 선택으로 처리하지 않으면서 검색 필드와 선택 항목 상세 패널을 독립적으로 배치할 수 있습니다.

레퍼런스 검색기에서는 이름이 붙은 두 그룹에 걸쳐 레코드 6개를 보여 줍니다. 필터링은 애플리케이션의 컬렉션에서 처리하고, 탐색과 옵션 선택은 네이티브 콤보박스에서 처리합니다. 정적 레코드를 다른 데이터 소스로 바꿀 때 이 경계를 명확히 해 두면 유용합니다. 필터링된 결과 집합과 현재 확정된 항목은 반드시 같지 않기 때문입니다.

지원 사양 읽기

## Ariakit 디자인 시스템: 검색어와 확정된 선택 항목은 서로 다른 상태입니다

### 검색어와 확정된 선택 항목은 서로 다른 상태입니다

예제에서는 입력 중인 텍스트에 inputValue와 setInputValue를 사용하고, 선택한 레퍼런스에는 selectedValue와 setSelectedValue를 사용합니다. 검증된 0.4.40 API에서 inputValue는 입력 상태를 나타내는 현재 이름입니다. 이전 예제에는 더 이상 권장되지 않는 value/setValue 별칭이 나올 수 있습니다. 전체 코드에서는 현재 이름을 사용합니다.

“color”를 입력하면 추천 항목이 좁혀지지만 표시 중인 상세 카드는 즉시 바뀌지 않습니다. Color roles를 선택하면 해당 항목이 확정되고 패널이 업데이트됩니다. 검색어를 지워도 마지막으로 선택한 레퍼런스는 그대로 유지됩니다. 부분 검색어를 입력할 때마다 값을 확정된 선택 항목으로 처리하면 상세 보기가 유효하지 않거나 존재하지 않는 레코드로 바뀔 수 있습니다.

지원 사양 읽기

## Ariakit 디자인 시스템: 레이블, 입력란, 펼침 버튼, 팝오버 연결하기

### 레이블, 입력란, 펼침 버튼, 팝오버 연결하기

ComboboxProvider는 ComboboxLabel, Combobox, ComboboxDisclosure, ComboboxPopover에 공유 상태를 제공합니다. 표시되는 레이블은 입력란이 무엇인지 알려 줍니다. 펼침 버튼은 명시적인 접근성 이름이 있는 별도의 버튼이며, 팝오버는 sameWidth와 8픽셀의 여백을 사용해 앵커에 맞춥니다.

각 결과는 값이 고정된 ComboboxItem입니다. Foundations와 Components는 ComboboxGroupLabel 제목이 있는 네이티브 ComboboxGroup 섹션입니다. 구조화되지 않은 목록에 굵은 제목을 삽입하는 것만으로는 동일한 그룹 관계를 표현할 수 없습니다. 네이티브 구조는 키보드 상호작용 모델과 함께 이 관계를 전달합니다.

지원 사양 읽기

## Ariakit 디자인 시스템: 네이티브 항목을 렌더링하기 전에 데이터 필터링하기

### 네이티브 항목을 렌더링하기 전에 데이터 필터링하기

샘플 컬렉션에는 선택 가능한 레퍼런스 5개와 의도적으로 선택 불가 상태로 둔 Experimental grid 하나가 있습니다. 필터링은 애플리케이션 수준에서 각 레퍼런스 이름에 대소문자를 구분하지 않는 부분 문자열 일치로 처리합니다. 결과가 있는 그룹만 렌더링하므로 결과 사이에 빈 제목이 표시되지 않습니다.

검색 결과가 없으면 검색어를 지우거나 “color”를 입력해 보라는 구체적인 메시지가 표시됩니다. 이 메시지는 선택 가능한 옵션으로 취급되지 않습니다. 관련 검색어에서는 선택 불가 레코드가 계속 표시되며 Unavailable 레이블이 붙습니다. 네이티브 disabled prop을 사용하므로 이 항목은 확정된 선택 항목이 될 수 없습니다.

지원 사양 읽기

## Ariakit 디자인 시스템: 실제 아래쪽 화살표와 Enter 키 동작 확인하기

### 실제 아래쪽 화살표와 Enter 키 동작 확인하기

예제에서는 autoSelect를 끈 상태로 둡니다. 검색어를 입력한 뒤 아래쪽 화살표를 누르면 제안 목록으로 이동하고, Enter를 누르면 활성 항목이 선택됩니다. Escape를 누르면 팝오버가 닫힙니다. 이는 화면에 표시된 안내와 일치하며, 드롭다운이 나타나는지만 확인한 것이 아니라 선택된 항목의 상세 제목과 대조해 검증했습니다.

다른 제품에서는 자동 하이라이트가 적절할 수 있지만, 화살표 키 탐색의 시작점이 달라집니다. 이미 활성화된 결과가 하나뿐일 때 아래쪽 화살표를 한 번 더 누르면 포커스가 입력란으로 돌아갈 수 있습니다. 이 예제는 이런 불일치를 피하고 data-active-item으로 활성 항목을 스타일링해, 키보드 포커스 위치와 저장된 읽기 목록의 항목을 구분합니다.

1. “color”를 입력하고 일치하는 옵션이 나타날 때까지 기다립니다.

2. 아래쪽 화살표를 누른 다음 Enter를 누르고, Color roles 상세 패널을 확인합니다.

3. 사용할 수 없거나 존재하지 않는 참조 항목을 검색해 의도하지 않은 선택이 확정되지 않는지 확인합니다.

지원 사양 읽기

## Ariakit 디자인 시스템: 활성 옵션, 포커스 링, 저장 상태에는 서로 다른 표시가 필요합니다

### 활성 옵션, 포커스 링, 저장된 상태에는 서로 다른 시각적 신호를 사용합니다

입력란과 펼치기 컨트롤에는 눈에 띄는 포커스 윤곽선을 적용합니다. 활성 옵션에는 옅은 녹색 배경과 네이티브 data-active-item 속성을 통한 1픽셀 내부 윤곽선을 적용합니다. 비활성 옵션은 강조를 낮추되 텍스트 라벨은 명확하게 유지합니다. 이러한 스타일은 호버에만 의존하지 않습니다.

선택한 참조 항목이 이미 읽기 목록에 있으면 Add 버튼이 비활성화되고 텍스트가 바뀝니다. 이 저장 상태는 애플리케이션에 속하며 콤보박스에서 현재 활성화된 결과와는 별개입니다. 옅은 녹색의 저장 동작 표면을 사용하면 비활성 동작을 또 다른 활성 주요 버튼처럼 표현하지 않을 수 있습니다.

지원 사양 읽기

## Ariakit 디자인 시스템: 읽기 목록을 현재 참조 항목 대신 표시하지 않습니다

### 읽기 목록은 현재 레퍼런스를 대체하지 않습니다

참조 항목을 추가하면 이름이 로컬 배열에 한 번만 추가됩니다. 사용자가 메모를 확인할 수 있도록 현재 참조 항목은 계속 표시합니다. 읽기 목록의 각 행에는 구체적인 이름이 지정된 Remove 버튼이 있습니다. 항목을 삭제하면 해당 참조 항목이 계속 선택되어 있는 경우 Add 버튼이 다시 활성화됩니다. 개수는 배열 길이에서 가져옵니다.

예제의 상세 콘텐츠에는 유형, 간격, 컴포넌트 관련 안내가 포함되어 있어 파인더를 충분히 살펴볼 수 있습니다. 이 값은 모두 원본 예제 콘텐츠로 명확히 표시됩니다. Type scale 레코드의 “Display 36px”를 Ariakit 타이포그래피 토큰으로 오해해서는 안 됩니다. Ariakit은 해당 디자인 언어를 제공하지 않습니다.

지원 사양 읽기

## Ariakit 디자인 시스템: 페이지 전체 크기를 바꾸지 않고 팝오버에 공간을 확보합니다

### 페이지 전체 크기를 바꾸지 않고 팝오버에 공간을 확보합니다

팝오버 너비는 입력란에 맞추고 높이는 340px로 제한합니다. 결과가 많으면 이 경계 안에서 스크롤되며, 선택된 상세 카드는 일반 문서 콘텐츠로 유지됩니다. 상세 카드가 다른 열로 이동하더라도 입력란, 펼치기 컨트롤, 옵션 팝업은 서로 연결된 상태로 유지합니다. 항목을 확정하면 동일한 선택 레코드가 업데이트되어야 합니다.

기존 700px 브레이크포인트에서는 파인더와 상세 카드가 세로로 쌓입니다. 검색 컨트롤, 키보드 안내, 읽기 목록은 문서 순서에서 선택된 카드보다 앞에 유지됩니다. 장식용 참조 이미지는 제목과 메모가 실제 의미를 전달하므로 보조 기술에서 숨깁니다.

- 읽기 쉬운 항목 간격을 유지하면서 긴 옵션 목록은 해당 영역 안에서 스크롤되도록 제한합니다.

- 확정된 상세 패널은 일시적으로 표시되는 팝오버 바깥에 둡니다.

- 모바일에서도 입력란의 눈에 보이는 라벨과 키보드 안내를 유지합니다.

지원 사양 읽기

## Ariakit 디자인 시스템: Provider, Collection, Stylesheet 연결하기

### Provider, Collection, Stylesheet 연결하기

React 프로젝트에 @ariakit/react 0.4.40을 설치하고 App.jsx의 전체 Provider/컴포넌트 구성을 유지합니다. 현재 예제에서는 inputValue/setInputValue와 selectedValue/setSelectedValue를 서로 분리된 제어 쌍으로 사용합니다. 현재 입력 검색어로 팝업 결과가 필터링되더라도 선택된 레코드는 계속 사용할 수 있어야 합니다.

컴포넌트와 함께 제공된 style.css를 가져옵니다. data-active-item 규칙은 콤보박스의 키보드 포커스 위치를 따르고, 저장 목록 스타일은 애플리케이션 상태를 따릅니다. 비동기로 불러온 결과로 대체할 때도 이 두 상태 흐름과 그룹/옵션 관계를 유지합니다. 확정된 상세 패널을 중간 검색어로 대체하지 마세요.

지원 사양 읽기

## Ariakit 디자인 시스템 컴포넌트 예제

### 완전히 제어되는 참조 파인더

Provider, 라벨, 입력란, 펼치기 컨트롤, 그룹화된 팝오버 항목, 로컬 읽기 목록 동작을 포함합니다.

```
import React,{useState} from 'react';
import * as Ariakit from '@ariakit/react';
const resources=[{name:'Type scale',group:'Foundations',code:'Aa',description:'A compact editorial hierarchy for headings, supporting text and labels.',notes:['Display · 36px / 1.1','Section · 24px / 1.25','Body · 16px / 1.6'],color:'#f0dbc3'},{name:'Color roles',group:'Foundations',code:'◐',description:'Separate surface, text, boundary and action roles before naming brand colors.',notes:['Canvas and raised surface','Primary and muted text','Action and on-action pair'],color:'#d6e5d8'},{name:'Spacing rhythm',group:'Foundations',code:'▥',description:'Use a small set of intervals to show relationships between content groups.',notes:['8px within a compact group','16px between related controls','32px between sections'],color:'#d6dfee'},{name:'Form field',group:'Components',code:'⌑',description:'Keep the label, hint, input and error message in one understandable group.',notes:['Persistent visible label','Hint before an error exists','Error connected to the input'],color:'#e9d8de'},{name:'Navigation menu',group:'Components',code:'☷',description:'A small set of destinations with a visible current location and keyboard access.',notes:['Destination labels describe content','Current item has a text/state cue','Collapsed layout keeps names'],color:'#e7e0c5'},{name:'Experimental grid',group:'Components',code:'▦',description:'Unavailable in this sample collection.',notes:[],color:'#e3e3e3',disabled:true}];
export default function App(){const[query,setQuery]=useState(''),[chosen,setChosen]=useState('Type scale'),[saved,setSaved]=useState([]);const selected=resources.find(x=>x.name===chosen)||resources[0],matches=resources.filter(x=>x.name.toLowerCase().includes(query.toLowerCase()));return <main className="resource-finder"><header><p className="eyebrow">ARIAKIT · ACCESSIBLE PRIMITIVES</p><h1>A reference, within reach.</h1><p>Search a small collection with the keyboard, inspect the result and keep a local reading list.</p></header><div className="finder-grid"><section className="search-area"><Ariakit.ComboboxProvider inputValue={query} setInputValue={setQuery} selectedValue={chosen} setSelectedValue={setChosen}><Ariakit.ComboboxLabel className="label">Find a reference</Ariakit.ComboboxLabel><div className="input-row"><Ariakit.Combobox className="combobox" placeholder="Try type, color or form" /><Ariakit.ComboboxDisclosure className="disclosure" aria-label="Show reference suggestions">⌄</Ariakit.ComboboxDisclosure></div><Ariakit.ComboboxPopover gutter={8} sameWidth className="popover">{['Foundations','Components'].map(group=>{const items=matches.filter(x=>x.group===group);return items.length?<Ariakit.ComboboxGroup key={group}><Ariakit.ComboboxGroupLabel className="group-label">{group}</Ariakit.ComboboxGroupLabel>{items.map(x=><Ariakit.ComboboxItem key={x.name} value={x.name} disabled={x.disabled} className="combo-item"><span>{x.name}</span><small>{x.disabled?'Unavailable':x.group==='Foundations'?'Guide':'Pattern'}</small></Ariakit.ComboboxItem>)}</Ariakit.ComboboxGroup>:null})}{!matches.length&&<p className="empty" role="status">No matching reference. Try “color” or clear the search.</p>}</Ariakit.ComboboxPopover></Ariakit.ComboboxProvider><p className="hint">Type to filter. Use ↓ and ↑ to browse, Enter to choose, Escape to close.</p><div className="collection-note"><span>06</span><div><strong>Sample references</strong><p>Five available, one deliberately disabled to show an unavailable item.</p></div></div><section className="reading-list"><h2>Your reading list <small>{saved.length}</small></h2>{saved.length?<ul>{saved.map(name=><li key={name}><span>{name}</span><Ariakit.Button className="remove" onClick={()=>setSaved(saved.filter(x=>x!==name))} aria-label={`Remove ${name}`}>Remove</Ariakit.Button></li>)}</ul>:<p className="muted">Choose a reference, then add it here.</p>}<p className="local-note">This list stays in memory and clears on reload.</p></section></section><section className="reference-card" aria-label="Selected reference"><div className="reference-art" style={{background:selected.color}} aria-hidden="true"><span>{selected.code}</span><i></i></div><div className="reference-body"><p className="eyebrow">{selected.group} · SAMPLE CONTENT</p><h2>{selected.name}</h2><p>{selected.description}</p><ul className="note-list">{selected.notes.map(note=><li key={note}>{note}</li>)}</ul><Ariakit.Button className="primary" disabled={saved.includes(selected.name)} onClick={()=>setSaved([...saved,selected.name])}>{saved.includes(selected.name)?'Added to reading list':'Add to reading list'}</Ariakit.Button><p className="scope-note">These sample reference values are original content, not Ariakit design tokens.</p></div></section></div><p className="selection-status" role="status">Selected reference: {selected.name}</p></main>}
```

코드 참조

- inputValue는 검색어이고 selectedValue는 확정된 참조 항목입니다.

- 비활성 항목도 검색어와 일치하면 계속 표시됩니다.

- 원본 예제의 유형 및 간격 값은 Ariakit 기본값이 아닙니다.

### 원본 시각 설정 전체

시맨틱 애플리케이션 변수, 포커스 링, 활성 옵션 스타일, 반응형 레이아웃을 포함합니다.

```
:root{--app-canvas:#f5f3ee;--app-surface:#fff;--app-text:#292e29;--app-muted:#657064;--app-border:#d8ddd4;--app-action:#285f48;--app-on-action:#fff;--app-active:#e3eee4;--app-radius:10px;--app-space-1:8px;--app-space-2:16px;--app-space-3:24px;--app-space-4:32px;font-family:system-ui,sans-serif}*{box-sizing:border-box}body{margin:0;background:var(--app-canvas);color:var(--app-text)}button,input{font:inherit}.resource-finder{max-width:1080px;padding:32px;margin:auto}.eyebrow{font-size:11px;font-weight:700;letter-spacing:.13em;color:var(--app-muted)}h1{font-size:36px;line-height:1.1;margin:16px 0}header>p:last-child{font-size:15px;line-height:1.7;max-width:620px;color:var(--app-muted)}.finder-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:40px;margin-top:32px}.label{display:block;font-size:14px;font-weight:650;margin-bottom:10px}.input-row{position:relative;display:flex}.combobox{width:100%;padding:13px 48px 13px 14px;border:1px solid var(--app-border);border-radius:var(--app-radius);background:var(--app-surface);color:var(--app-text);font-size:15px}.disclosure{position:absolute;right:4px;top:4px;bottom:4px;width:36px;border:0;background:transparent;border-radius:6px;cursor:pointer}.combobox:focus,.disclosure:focus-visible,button:focus-visible{outline:3px solid var(--app-action);outline-offset:3px}.popover{z-index:50;max-height:340px;overflow:auto;background:var(--app-surface);border:1px solid var(--app-border);border-radius:var(--app-radius);box-shadow:0 8px 28px #243c2420;padding:8px}.group-label{font-size:11px;letter-spacing:.06em;text-transform:uppercase;font-weight:700;color:var(--app-muted);padding:10px}.combo-item{display:flex;justify-content:space-between;gap:16px;align-items:center;padding:12px 10px;border-radius:6px;cursor:default;font-size:14px;scroll-margin:8px}.combo-item small{font-size:11px;color:var(--app-muted)}.combo-item[data-active-item]{background:var(--app-active);outline:1px solid var(--app-action);outline-offset:-1px}.combo-item[aria-disabled=true]{opacity:.45}.empty{padding:12px;font-size:14px;line-height:1.6}.hint{font-size:12px;line-height:1.7;color:var(--app-muted);margin-top:12px}.collection-note{display:flex;gap:16px;align-items:flex-start;border-block:1px solid var(--app-border);padding:24px 0;margin:28px 0}.collection-note>span{font-size:40px;line-height:1;color:var(--app-action)}.collection-note strong{font-size:14px}.collection-note p{font-size:13px;line-height:1.6;color:var(--app-muted);margin:8px 0 0}.reading-list h2{font-size:17px;display:flex;justify-content:space-between}.reading-list h2 small{background:var(--app-active);border-radius:30px;padding:3px 8px}.reading-list ul{padding:0;list-style:none}.reading-list li{display:flex;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid var(--app-border);font-size:14px}.remove{background:none;border:0;text-decoration:underline;color:var(--app-action);font-size:12px;cursor:pointer}.muted,.local-note,.scope-note{color:var(--app-muted);font-size:12px;line-height:1.7}.reference-card{border:1px solid var(--app-border);border-radius:var(--app-radius);overflow:hidden;background:var(--app-surface)}.reference-art{height:160px;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden}.reference-art span{font-size:96px;font-family:Georgia,serif;line-height:1;position:relative;z-index:1}.reference-art i{position:absolute;width:190px;height:190px;border:1px solid currentColor;opacity:.2;border-radius:50%;left:50%;top:35%}.reference-body{padding:24px}.reference-body h2{font-size:28px;margin:12px 0}.reference-body>p{line-height:1.65;font-size:14px}.note-list{list-style:none;padding:0;margin:24px 0}.note-list li{padding:10px 0;border-bottom:1px solid var(--app-border);font-size:13px}.primary{padding:12px 18px;border:1px solid var(--app-action);background:var(--app-action);color:var(--app-on-action);border-radius:6px;cursor:pointer;font-weight:600;font-size:14px}.primary:disabled{background:var(--app-active);color:var(--app-action);cursor:default}.scope-note{margin-top:16px}.selection-status{font-size:12px;color:var(--app-muted);margin-top:24px}@media(max-width:700px){.resource-finder{padding:24px 16px}h1{font-size:30px}.finder-grid{grid-template-columns:1fr;gap:28px}.reference-art{height:135px}}
```

코드 참조

- Ariakit은 동작과 시맨틱을 제공할 뿐, 이 색상이나 간격 체계는 제공하지 않습니다.

- 활성 결과는 data-active-item으로 스타일링합니다.

- 팝오버에는 별도의 최대 높이와 스크롤 영역이 있습니다.

## Ariakit 디자인 시스템 AI 에이전트 설정

### 구현 시작점

@ariakit/react 0.4.40 및 React 19에서 검증했습니다. 현재 이름인 inputValue/setInputValue와 제어되는 selectedValue를 사용합니다.

```
// Create the project first:
// npm create vite@latest ariakit-specimen -- --template react
// cd ariakit-specimen && npm install
// In a Vite React project:
// npm install @ariakit/react@0.4.40 react@19 react-dom@19
// Save the complete component as App.jsx and the visual configuration as style.css.
import React from 'react';
import {createRoot} from 'react-dom/client';
import App from './App.jsx';
import './style.css';
createRoot(document.getElementById('root')).render(<App />);
// index.html contains <div id="root"></div>.
// No Ariakit theme stylesheet is required; style.css is this example's original theme.
// Keep the template index.html and replace its entry with the code above.
// npm run dev
```

### 프로젝트를 위한 프롬프트

```
React에서 제공된 Ariakit 0.4.40 참조 파인더를 사용합니다. ComboboxProvider의 inputValue/setInputValue와 selectedValue/setSelectedValue를 서로 독립적으로 유지하고, 라벨이 지정된 네이티브 그룹과 비활성 Experimental 그리드 옵션을 그대로 사용하며, 항목을 렌더링하기 전에 데이터를 필터링합니다. autoSelect를 끈 상태에서 아래쪽 화살표를 누른 뒤 Enter를 누르는 검증된 흐름을 유지하고, data-active-item 스타일은 저장 목록 포함 여부와 별도로 적용합니다. 확정된 참조 항목을 중복 없이 로컬 읽기 목록에 추가하고, 현재 상세 내용을 버리지 않은 채 항목을 삭제할 수 있도록 합니다. 원본 스타일시트 전체를 포함합니다.
```

## Ariakit 디자인 시스템: 출처 및 범위

Ariakit React 0.4.40. 모든 시각 토큰, 이미지, 예제 참조 값은 원본 설정이며, Ariakit 공식 팔레트나 타이포그래피 스케일을 표방하지 않습니다. 읽기 목록 상태는 로컬에 저장됩니다.

- 콤보박스 네이티브 구성과 키보드 동작

- Provider 제어되는 입력 및 선택 상태

- 그룹화된 옵션 접근성 있는 결과 그룹

- 항목 API 비활성화 및 선택 동작

- 팝오버 API 너비 및 거터 위치 지정

- 스타일링 스타일이 지정되지 않은 프리미티브와 상태 속성

- Button 접근성 있는 동작 프리미티브

## Ariakit 디자인 시스템 관련 리소스

### Bits UI

Bits UI는 기본 파트와 Svelte 5 상태를 조합하는 헤드리스 Svelte 컴포넌트를 제공합니다. 이 예제에서는 파생된 혼합 상태 체크박스, 독립적으로 확장되는 아코디언 섹션, 포털 기반 검토 대화상자를 함께 사용하며 전체 스타일 구성도 포함합니다.

### Bootstrap

Bootstrap 5.3.8의 실제 간격 스케일, 의미 기반 색상, 반응형 그리드, 컴포넌트 API를 사용하세요. 작동하는 예약 양식, 오류 요약, 표 필터, 모달, 색상 모드 전환기를 살펴보고 문서에 소개된 코드를 재사용할 수 있습니다.

### Bulma

Bulma의 실제 필드/컨트롤 구조, 반응형 열, 의미에 따른 색상 수정자, CSS 변수를 적용해 편집용 데스크를 구성하고 완전한 유효성 검사 코드도 포함하세요.


- [구현 레퍼런스](https://ariakit.com/components/combobox)
- [출처](https://ariakit.com/guide/styling)
- [출처](https://ariakit.com/reference/combobox-provider)
- [지원 사양 읽기](https://ariakit.com/guide/styling)
- [지원 사양 읽기](https://ariakit.com/reference/combobox-provider)
- [지원 사양 읽기](https://ariakit.com/components/combobox)
- [지원 사양 읽기](https://ariakit.com/examples/combobox-group)
- [지원 사양 읽기](https://ariakit.com/components/button)
- [지원 사양 읽기](https://ariakit.com/reference/combobox-popover)
- [코드 참조](https://ariakit.com/components/combobox)
- [코드 참조](https://ariakit.com/guide/styling)
- [콤보박스 네이티브 구성과 키보드 동작](https://ariakit.com/components/combobox)
- [Provider 제어되는 입력 및 선택 상태](https://ariakit.com/reference/combobox-provider)
- [그룹화된 옵션 접근성 있는 결과 그룹](https://ariakit.com/examples/combobox-group)
- [항목 API 비활성화 및 선택 동작](https://ariakit.com/reference/combobox-item)
- [팝오버 API 너비 및 거터 위치 지정](https://ariakit.com/reference/combobox-popover)
- [스타일링 스타일이 지정되지 않은 프리미티브와 상태 속성](https://ariakit.com/guide/styling)
- [Button 접근성 있는 동작 프리미티브](https://ariakit.com/components/button)