# Дизайн-система Ariakit

## Дизайн-система Ariakit Предпросмотр интерфейса

Фильтруйте справочные материалы по группам, выбирайте с помощью клавиш «Стрелка вниз» и «Enter», просматривайте результат и добавляйте его в локальный список для чтения.

## Ariakit Справочник по дизайн-системе

Ariakit React 0.4.40 — это неоформленный инструментарий для обеспечения доступности. Он не предоставляет приведённую ниже палитру страницы, шкалу размеров шрифта или интервалы в качестве встроенной темы дизайна. Все значения --app-* — явно заданная оригинальная конфигурация этого работающего примера; названия компонентов и атрибуты состояния — API Ariakit.

### Оригинальная конфигурация семантических цветов

| Название / правило | Значение / конфигурация | Применение |
| --- | --- | --- |
| --app-canvas | #f5f3ee | Фон страницы. |
| --app-surface | #fff | Всплывающее окно Combobox и карточка справочника. |
| --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 между полем ввода и вариантами. |
### Оригинальная типографика

| Название / правило | Значение / конфигурация | Применение |
| --- | --- | --- |
| Font family | system-ui, sans-serif | Не требуется загружать шрифт или использовать шрифт, специфичный для Ariakit. |
| Page heading | 36px / 1.1; 30px mobile | Оригинальная иерархия страницы. |
| Input text | 15px | Оригинальный размер текста в Combobox. |
| 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 | Нажмите Down, чтобы перейти к списку, затем Enter, чтобы выбрать вариант. |
## Ariakit: полное руководство по дизайн-системе

Практическое руководство по выбору, применению и оценке этой системы для реального интерфейса.

Подробные рекомендации, отправная точка для реализации и ссылки на источники.

## Дизайн-система Ariakit: начните с модели состояния Combobox

### Начните с модели состояний Combobox

> ComboboxProvider в Ariakit связывает подпись, редактируемое поле ввода, кнопку раскрытия, всплывающее окно и варианты. Провайдер управляет общим состоянием взаимодействия, а каждый компонент отвечает за свою часть структуры. Благодаря этому поле поиска и панель сведений о выбранном элементе можно расположить независимо друг от друга, не превращая каждое нажатие клавиши в новый выбор.

В демонстрации поиска по справочнику представлены шесть записей в двух именованных группах. Фильтрация выполняется на уровне коллекции приложения, а навигация и выбор варианта — встроенным компонентом Combobox. Чёткое разделение этих задач особенно полезно при замене статических записей другим источником данных: отфильтрованный набор результатов и текущий зафиксированный элемент — не обязательно одно и то же.

Прочитать вспомогательную спецификацию

## Дизайн-система Ariakit: поисковый текст и зафиксированный выбор — разные состояния

### Текст поиска и подтверждённый выбор — разные состояния

В примере inputValue и setInputValue управляют вводимым текстом, а selectedValue и setSelectedValue — выбранной записью справочника. В проверенной версии API 0.4.40 inputValue — актуальное название состояния поля ввода; в старых примерах могут встречаться устаревшие псевдонимы value/setValue. В полном примере используются актуальные названия.

Ввод слова «color» сокращает список вариантов, но сразу не меняет отображаемую карточку сведений. Выбор пункта «Роли цветов» фиксирует его и обновляет панель. Очистка поискового запроса также не сбрасывает последний выбранный справочник. Если считать каждый неполный запрос зафиксированным значением, в панели сведений будут появляться недопустимые или несуществующие записи.

Прочитать вспомогательную спецификацию

## Дизайн-система Ariakit: свяжите подпись, поле ввода, кнопку раскрытия и всплывающее окно

### Свяжите метку, поле ввода, раскрывающий элемент и всплывающую панель

ComboboxProvider предоставляет общее состояние компонентам ComboboxLabel, Combobox, ComboboxDisclosure и ComboboxPopover. Видимая подпись обозначает поле ввода. Кнопка раскрытия — отдельная кнопка с явным доступным именем, а всплывающее окно с параметром sameWidth и отступом в восемь пикселей сохраняет выравнивание относительно привязанного элемента.

Каждый результат — это ComboboxItem со стабильным значением. Разделы «Основы» и «Компоненты» реализованы как встроенные группы ComboboxGroup с заголовками ComboboxGroupLabel. Заголовок, лишь визуально выделенный жирным в неструктурированном списке, не выражает ту же связь группировки: встроенная структура задаёт её вместе с моделью клавиатурной навигации.

Прочитать вспомогательную спецификацию

## Дизайн-система Ariakit: отфильтруйте данные перед отображением встроенных вариантов

### Фильтруйте данные до отрисовки нативных элементов

В коллекции примера — пять доступных справочных материалов и одна намеренно недоступная сетка «Экспериментальная». Фильтрация на уровне приложения выполняется без учёта регистра: для каждого названия ищется подстрока. Группы отображаются, только если в них есть подходящие записи, поэтому между результатами не остаются пустые заголовки.

Если по запросу ничего не найдено, показывается отдельное сообщение с предложением очистить поиск или попробовать запрос «color». Это сообщение не становится выбираемым вариантом. Недоступная запись, если она соответствует запросу, остаётся видимой с пометкой «Недоступно», а встроенное свойство disabled не позволяет зафиксировать её как выбранную.

Прочитать вспомогательную спецификацию

## Дизайн-система Ariakit: проверьте реальную последовательность Down и Enter

### Проверьте реальную последовательность клавиш «Стрелка вниз» и «Enter»

В примере параметр autoSelect отключён. После ввода запроса клавиша Down переводит к списку вариантов, а Enter выбирает активный пункт. Escape закрывает всплывающее окно. Это соответствует видимым инструкциям; проверка учитывала заголовок сведений о выбранном элементе, а не только появление раскрывающегося списка.

В другом продукте может быть уместно автоматически выделять вариант, но это меняет исходную позицию клавиатурной навигации по стрелкам. Если сразу активен единственный результат, следующее нажатие Down может вернуть фокус в поле ввода. В примере такого несоответствия нет: активный вариант оформляется через data-active-item, а его положение в клавиатурной навигации не смешивается с наличием записи в сохранённом списке для чтения.

1. Введите «color» и дождитесь подходящего варианта.

2. Нажмите Down, затем Enter и проверьте панель сведений «Роли цветов».

3. Введите название недоступного или несуществующего справочного материала и убедитесь, что непреднамеренный выбор не зафиксирован.

Прочитать вспомогательную спецификацию

## Дизайн-система Ariakit: для активного варианта, кольца фокуса и сохранённого состояния нужны разные обозначения

### Для активного варианта, рамки фокуса и сохранённого состояния нужны разные визуальные сигналы

У поля ввода и кнопки раскрытия видимые контуры фокуса. Активный вариант выделяется светло-зелёным фоном и внутренним контуром толщиной в один пиксель, заданными встроенным атрибутом data-active-item. Для недоступных вариантов снижается визуальный акцент и сохраняется явная текстовая пометка. Эти стили не полагаются только на наведение указателя.

После добавления выбранного справочного материала в список для чтения кнопка Add становится недоступной, а её текст меняется. Это состояние сохранения принадлежит приложению и не связано с текущим активным результатом Combobox. Светло-зелёный фон сохранённого действия помогает не воспринимать недоступное действие как ещё одну активную основную кнопку.

Прочитать вспомогательную спецификацию

## Дизайн-система Ariakit: список для чтения не заменяет текущий справочный материал

### Список для чтения не заменяет текущий справочник

При добавлении справочный материал помещается в локальный массив; повторно одно и то же название не добавляется. Текущий материал остаётся на экране, чтобы пользователь мог изучить его примечания. У каждой строки списка для чтения есть отдельная кнопка Remove с понятным назначением. После удаления записи кнопка Add снова становится доступной, если этот материал всё ещё выбран. Количество элементов вычисляется по длине массива.

В демонстрационные сведения включены рекомендации по типографике, интервалам и компонентам, чтобы исследовать справочник было полезно. Их значения явно обозначены как оригинальное содержимое примера. Запись «Размер дисплея — 36px» в шкале типографики нельзя принимать за токен типографики Ariakit: Ariakit не предоставляет эту систему дизайна.

Прочитать вспомогательную спецификацию

## Дизайн-система Ariakit: всплывающему окну нужно место, но оно не должно менять размер всей страницы

### Всплывающему окну нужно место, но оно не должно менять размер всей страницы

Ширина всплывающего окна соответствует ширине поля ввода, а его высота ограничена 340px. Если результатов больше, список прокручивается внутри этой области, а карточка сведений о выбранном элементе остаётся обычным содержимым документа. Сохраняйте связь между полем ввода, кнопкой раскрытия и списком вариантов, даже если карточка сведений переместится в другую колонку: выбор элемента по-прежнему должен обновлять ту же выбранную запись.

На исходной контрольной ширине 700px поле поиска и карточка сведений располагаются друг под другом. Элементы управления поиском, подсказка по клавиатуре и список для чтения остаются перед карточкой выбранного элемента в порядке документа. Декоративная иллюстрация справочного материала скрыта от вспомогательных технологий, поскольку смысл передают заголовок и примечания.

- Ограничьте длинный список вариантов отдельной прокручиваемой областью, сохранив удобные интервалы между элементами.

- Оставьте панель зафиксированных сведений за пределами временного всплывающего окна.

- Сохраняйте видимые подписи полей ввода и подсказки по клавиатуре на мобильных устройствах.

Прочитать вспомогательную спецификацию

## Дизайн-система Ariakit: свяжите провайдер, коллекцию и таблицу стилей

### Свяжите провайдер, коллекцию и таблицу стилей

Установите @ariakit/react 0.4.40 в проект React и сохраните полную композицию провайдера и компонентов из App.jsx. В текущем примере используются отдельные управляемые пары inputValue/setInputValue и selectedValue/setSelectedValue. Сохраняйте выбранную запись, даже если текущий поисковый запрос скрывает её из всплывающего списка.

Подключите style.css к компоненту. Правило data-active-item в этом файле соответствует позиции Combobox в клавиатурной навигации, а стили сохранённого списка — состоянию приложения. При замене результатов на загружаемые асинхронно сохраняйте оба канала состояния и связи между группами и вариантами; не подменяйте панель зафиксированных сведений промежуточной строкой поискового запроса.

Прочитать вспомогательную спецификацию

## Примеры компонентов для дизайн-системы Ariakit

### Полноценный управляемый поиск по справочнику

Провайдер, подпись, поле ввода, кнопка раскрытия, сгруппированные варианты всплывающего списка и действия локального списка для чтения.

```
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

### Отправная точка для реализации

Проверено с @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
```

### Запрос для вашего проекта

```
Используйте предоставленный эталонный поиск по справочнику Ariakit 0.4.40 в React. Храните inputValue/setInputValue из ComboboxProvider отдельно от selectedValue/setSelectedValue, оставьте группы с нативной семантической разметкой и отключённый пункт Experimental grid, а данные фильтруйте до отображения элементов. Сохраните проверенный сценарий: Down, затем Enter при выключенном autoSelect; оформляйте data-active-item отдельно от состояния сохранения. Добавляйте сохранённый справочный материал в локальный список для чтения без дубликатов и разрешите удалять его, не закрывая текущую карточку. Включите исходную таблицу стилей целиком.
```

## Источники и область действия дизайн-системы Ariakit

Ariakit React 0.4.40. Все визуальные токены, иллюстрации и примеры значений — оригинальные настройки; они не претендуют на соответствие официальной палитре или шкале типографики Ariakit. Состояние списка для чтения хранится локально.

- Комбобокс Нативная композиция и поведение с клавиатуры.

- Provider Управляемое состояние поля ввода и выбранного элемента.

- Сгруппированные варианты Доступные группы результатов.

- Элемент API Поведение отключённых и выбранных элементов.

- Всплывающее окно API Позиционирование по ширине и с учётом отступа.

- Оформление Примитивы без оформления и атрибуты состояния.

- Button Доступный примитив действия.

## Связанные ресурсы дизайн-системы Ariakit

### Bits UI

Bits UI предоставляет компоненты Svelte без предустановленной разметки, которые можно объединять с помощью встроенных частей и состояния Svelte 5. В примере сочетаются флажок с вычисляемым смешанным состоянием, независимо раскрываемые секции аккордеона и диалоговое окно проверки на основе портала; конфигурация стилизации приведена полностью.

### 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)