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

## Bits UI Предварительный просмотр интерфейса дизайн-системы

Отметьте отдельную проверку, изучите смешанное состояние массового переключателя, просмотрите незавершённый список, затем завершите и сохраните локальный список проверок.

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

Bits UI 2.19.5 с Svelte 5.57.1. Bits UI — бессхемная библиотека: все значения цветов, типографики и интервалов --app-* — это явно заданная оригинальная конфигурация из данного примера, а не официальные токены дизайна Bits UI. Нативные атрибуты данных и свойства компонентов обозначены отдельно.

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

| Название / правило | Значение / конфигурация | Применение |
| --- | --- | --- |
| --app-canvas | #f4f3f8 | Фон страницы. |
| --app-surface | #ffffff | Поверхность панели и диалога. |
| --app-ink | #2d2938 | Основной текст. |
| --app-muted | #746d80 | Вспомогательный текст. |
| --app-line | #e3dfeb | Разделители и границы. |
| --app-action | #604c88 | Отмеченные элементы управления и основные действия. |
| --app-on-action | #fff | Текст на кнопках действий. |
| --app-focus | #9a80ce | Видимый индикатор клавиатурного фокуса. |
| --app-soft | #eee8f7 | Дополнительная роль мягкого фона. |
### Оригинальные интервалы и геометрия

| Название / правило | Значение / конфигурация | Применение |
| --- | --- | --- |
| --app-space-1 | 4px | Минимальная именованная единица интервала. |
| --app-space-2 | 8px | Компактный интервал. |
| --app-space-3 | 12px | Интервал между элементом управления и подписью. |
| --app-space-4 | 16px | Внутренний отступ узкой панели. |
| --app-space-6 | 24px | Внутренний отступ панели и интервал между колонками на настольном экране. |
| --app-space-8 | 32px | Отступ страницы на настольном экране. |
| Checkbox geometry | 22×22px; 5px radius; 1px border | Явно заданные оригинальные стили элементов управления. |
| Focus ring | 3px solid #9a80ce; 3px offset | Применяется к кнопке, когда на ней виден клавиатурный фокус. |
| Dialog width | min(440px, 100% − 28px) | Явно заданная адаптивная геометрия наложения. |
| Dialog maximum height | 100vh − 28px with overflow:auto | Ограничение области просмотра только для наложения; высота страницы на него не влияет. |
| Type hierarchy | 34px title / 29px mobile; 16px accordion; 13px checks; 12px guidance | Оригинальная иерархия системных шрифтов. |
### Контракты нативных компонентов

| Название / правило | Значение / конфигурация | Применение |
| --- | --- | --- |
| Checkbox.Root checked | boolean | Состояние: завершено или не завершено. |
| Checkbox.Root indeterminate | boolean | Массовый переключатель отображает смешанное состояние, если отмечена лишь часть пунктов. |
| Checkbox data-state | checked / unchecked / indeterminate | Непосредственно используется таблицей стилей. |
| Accordion.Root type | multiple | Можно одновременно оставить открытыми несколько разделов проверки. |
| Accordion value | string[] | Список идентификаторов раскрытых групп, связанный с состоянием Svelte. |
| Dialog.Root open | boolean, two-way bound | Управляет видимостью проверки. |
| Dialog.Title / Description | Native title and description relationships | Вручную дублировать идентификаторы ARIA не нужно. |
| Dialog.Portal | Overlay and content rendered outside the normal panel | Предотвращает обрезание содержимого в соответствии с потоком документа панели. |
## Bits UI — полное руководство по дизайн-системе

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

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

## Bits UI — дизайн-система: объедините нативные части с состоянием Svelte 5

### Составляйте нативные части на основе состояния Svelte 5

> Для отдельных ответов, идентификаторов раскрытых разделов и видимости диалога в контрольном списке используется $state. Производное значение $derived для подсчёта завершённых пунктов задаёт отображаемый прогресс и состояние флажка массового выбора. Так источник истины остаётся в одной модели Svelte, а Bits UI обеспечивает нативное взаимодействие для каждого компонента.

Checkbox, Accordion и Dialog собраны из собственных частей. Диалогу проверки не нужно управлять ответами в контрольном списке, а Accordion не должен сбрасывать их при закрытии. Такое разделение — хорошая отправная точка для формы с несколькими разделами: модель сохраняется, даже когда меняется видимость частей интерфейса.

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

## Bits UI — дизайн-система: используйте компоненты и стили Svelte 5 вместе

### Используйте вместе исходный код компонентов Svelte 5 и стили

В примере используются руны Svelte 5: $state для групп, раскрытых разделов, видимости диалога и сохранённого состояния; $derived — для подсчёта завершённых пунктов. Bits UI 2.19.5 импортируется напрямую. Для оригинального визуального оформления не нужны плагин Tailwind, поставщик темы или библиотека иконок.

Полные файлы App.svelte и style.css работают в стандартном проекте Svelte на Vite. Для запуска используется mount из Svelte, а не устаревший конструктор new App. При переносе примера используйте синтаксис рун компонента вместе с зависимостью Bits UI 2.19.5: показанные здесь привязки и обратные вызовы — не синтаксис устаревшего компонента Svelte API.

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

## Bits UI — дизайн-система: вычисляйте смешанное состояние по отдельным флажкам

### Определяйте смешанное состояние на основе отдельных отметок

Шесть логических флажков объединены в три группы. Флажок массового выбора отмечен, только если все шесть значений равны true; при количестве от одного до пяти он находится в неопределённом состоянии. Его обратный вызов onCheckedChange обновляет все флажки, поэтому смешанное состояние вычисляется, а не хранится отдельно и не может рассинхронизироваться.

Отдельные элементы управления вызывают небольшую функцию изменения, которая обновляет модель и сбрасывает сообщение о сохранении. После выбора одного пункта нативный флажок массового выбора отображает aria-checked=mixed. Таблица стилей реагирует на data-state=checked и data-state=indeterminate, связывая поведение и оформление с одним и тем же нативным состоянием.

1. Выберите первый пункт проверки индикатора фокуса и посмотрите на тире у флажка массового выбора.

2. Откройте контрольный список и убедитесь, что кнопка «Сохранить» для завершённой проверки неактивна.

3. Вернитесь, отметьте все пункты и сохраните полный снимок локального состояния.

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

## Bits UI — дизайн-система: разрешите независимо сворачивать разделы, не теряя ответы

### Разрешайте открывать разделы независимо, сохраняя ответы

Accordion.Root использует type=multiple и привязанный массив идентификаторов раскрытых групп. При клавиатурной навигации разделы изначально раскрыты, а «Исправление формы» и «Результат» можно открывать независимо. Сворачивание раздела не сбрасывает флажки, поскольку их значения хранятся в состоянии родительского компонента.

В каждом триггере повторяется счётчик завершённых пунктов, поэтому прогресс виден и при свёрнутом содержимом. Нативные части Header, Trigger и Content сохраняют ожидаемые связи и поведение клавиатуры. Маркер плюса поворачивается в зависимости от data-state триггера и учитывает настройку уменьшения анимации, а раскрытие не запускается отдельным обработчиком щелчка.

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

## Bits UI — дизайн-система: соберите полную структуру диалога и передайте ему управление фокусом

### Соберите полную структуру диалога и поручите ему управление фокусом

Для проверки используются Dialog.Root, Trigger, Portal, Overlay, Content, Title, Description и Close. Заголовок и описание — настоящие нативные части, поэтому Bits UI может установить связи для вспомогательных технологий. Portal помещает наложение за пределы обычного потока панели контрольного списка.

Ширина содержимого адаптивна и ограничена; максимальная высота задаётся только для наложения, а длинная проверка прокручивается. Клавиша Escape закрывает диалог, не сбрасывая контрольный список. Оставьте триггер доступной целью для возврата фокуса, не удаляя его при открытии наложения.

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

## Bits UI — дизайн-система: задайте явные и повторно используемые визуальные правила приложения

### Явно задавайте и повторно используйте визуальные правила приложения

CSS сопоставляет нативные состояния checked и indeterminate одной и той же роли действия, но использует для них разные символы. Отдельная роль фокуса указывает на положение клавиатуры, поэтому элемент управления может оставаться визуально выбранным и одновременно показывать, куда будет направлено следующее действие с клавиатуры.

Именованная шкала отступов включает четыре, восемь, двенадцать, шестнадцать, двадцать четыре и тридцать два пикселя. На широких экранах для панелей используется значение двадцать четыре пикселя, а на узких — шестнадцать. В таблице спецификации эти конкретные параметры указаны как оригинальная конфигурация, чтобы читатели могли воспроизвести или заменить их, не принимая стили демонстрационного примера за гарантию пакета.

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

## Bits UI — дизайн-система: отличайте ручную отметку от результата автоматизированного теста

### Отделяйте ручную отметку от результата автоматического теста

В контрольном списке фиксируется, что отметил читатель. Он не проверяет другую страницу, не выполняет тесты клавиатуры и не подтверждает соответствие требованиям доступности. Во вводном тексте и описании проверки явно обозначены эти ограничения — это важно, поскольку шесть пунктов относятся к реальным аспектам доступности.

Кнопка «Сохранить» неактивна, пока не отмечены все шесть пунктов. В сообщении о сохранении сказано, что читатель отметил все шесть пунктов и что результат хранится локально. Открыть неполную проверку и посмотреть, что осталось сделать, можно, но сообщение о завершённой проверке появится только после отметки всех пунктов. Это различие делает переходы между состояниями в примере осмысленными.

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

## Bits UI — дизайн-система: сбрасывайте сообщения о завершении при изменении данных

### Сбрасывайте сообщения о завершении при изменении подтверждающих данных

Любое изменение отдельного флажка или массового выбора сбрасывает сохранённое состояние. Так подтверждение завершения не сохраняется после снятия отметки. Действие «Снять все отметки» также раскрывает изначально открытый раздел и закрывает диалог проверки, возвращая все связанные состояния к известному начальному состоянию.

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

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

## Bits UI — дизайн-система: свяжите части компонентов с видимыми подписями

### Свяжите части компонентов с видимыми подписями

У каждого флажка есть постоянный ID и связанная с ним видимая подпись. Его отмеченное или неопределённое состояние задаётся нативным элементом управления, а галочка и тире являются декоративными. Для флажка массового выбора свяжите и логическое значение checked, и вычисляемое значение indeterminate, чтобы частичный выбор не объявлялся как обычный неотмеченный пункт.

Dialog.Title и Dialog.Description задают название и описание проверки с помощью нативной структуры. Portal отделяет наложение от макета аккордеона, а Dialog.Close остаётся явным способом закрыть диалог. Внешняя область статуса сохраняет результат после закрытия наложения, поэтому он не теряется вместе с содержимым диалога.

- Свяжите видимую подпись с элементом управления.

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

- При изменении оформления диалога не удаляйте части заголовка и описания.

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

## Дизайн-система Bits UI — примеры компонентов

### Полный контрольный список на Svelte 5

Композиция нативных компонентов Bits UI с моделями $state/$derived, управляемыми флажками и диалогом проверки на основе портала.

```
<script>
import {Accordion,Checkbox,Dialog} from 'bits-ui';
let groups=$state([{id:'keyboard',name:'Keyboard flow',description:'Move through the interface without a pointer.',checks:[{id:'focus',label:'Every action has a visible focus indicator.',done:false},{id:'order',label:'Focus follows the visual reading order.',done:false}]},{id:'forms',name:'Form correction',description:'Make a mistake and recover from it.',checks:[{id:'labels',label:'Each input has a persistent visible label.',done:false},{id:'errors',label:'Errors identify the field and explain the correction.',done:false}]},{id:'feedback',name:'Result feedback',description:'Confirm that the outcome is understandable.',checks:[{id:'status',label:'A status message describes the completed action.',done:false},{id:'color',label:'Meaning remains clear without color alone.',done:false}]}]);
let expanded=$state(['keyboard']),open=$state(false),saved=$state(false);
const complete=$derived(groups.reduce((sum,g)=>sum+g.checks.filter(c=>c.done).length,0));
function change(check,value){check.done=value;saved=false}
function all(value){groups.forEach(g=>g.checks.forEach(c=>c.done=value));saved=false}
function reset(){all(false);expanded=['keyboard'];open=false}
</script>
<main class="check-shell"><header><p class="eyebrow">INTERFACE REVIEW · MANUAL CHECKLIST</p><h1>Check the experience between the screens.</h1><p>Work through six practical checks, then review what you have marked. This is a personal checklist, not an automated accessibility test.</p></header><div class="check-layout"><section class="check-panel"><div class="bulk"><Checkbox.Root id="all-checks" checked={complete===6} indeterminate={complete>0&&complete<6} onCheckedChange={all} class="checkbox"><span aria-hidden="true">{complete===6?'✓':complete>0?'−':''}</span></Checkbox.Root><label for="all-checks">Mark all checks</label><span class="count">{complete}/6</span></div><Accordion.Root type="multiple" bind:value={expanded} class="accordion">{#each groups as group}<Accordion.Item value={group.id} class="accordion-item"><Accordion.Header class="accordion-heading"><Accordion.Trigger class="accordion-trigger"><span>{group.name}<small>{group.checks.filter(c=>c.done).length} of 2 checked</small></span><span class="plus" aria-hidden="true">+</span></Accordion.Trigger></Accordion.Header><Accordion.Content class="accordion-content"><p class="group-description">{group.description}</p>{#each group.checks as check}<div class="check-row"><Checkbox.Root id={check.id} checked={check.done} onCheckedChange={value=>change(check,value)} class="checkbox"><span aria-hidden="true">{check.done?'✓':''}</span></Checkbox.Root><label for={check.id}>{check.label}</label></div>{/each}</Accordion.Content></Accordion.Item>{/each}</Accordion.Root><Dialog.Root bind:open><Dialog.Trigger class="primary">Review checklist</Dialog.Trigger><Dialog.Portal><Dialog.Overlay class="overlay"/><Dialog.Content class="dialog"><Dialog.Title class="dialog-title">Your review snapshot</Dialog.Title><Dialog.Description class="dialog-description">{complete} of 6 checks are marked. Saving records your own review state; it does not certify the interface.</Dialog.Description><ul class="review-summary">{#each groups as group}<li><strong>{group.name}</strong><span>{group.checks.filter(c=>c.done).length} / 2</span></li>{/each}</ul>{#if complete<6}<p class="remaining">Return to the checklist to finish the remaining {6-complete} checks.</p>{/if}<div class="dialog-actions"><Dialog.Close class="secondary">Back to checks</Dialog.Close><button class="primary" disabled={complete<6} onclick={()=>{saved=true;open=false}}>Save completed review</button></div></Dialog.Content></Dialog.Portal></Dialog.Root><button class="reset" onclick={reset}>Clear all checks</button><p class="result" role="status">{saved?'Completed review saved locally. All six checks were marked by you.':'Progress stays in this preview until you reload.'}</p></section><aside class="check-notes"><div class="focus-art" aria-hidden="true"><span></span><i></i><b></b></div><p class="eyebrow">WHAT TO LOOK FOR</p><h2>Make the next action clear.</h2><p>A good check leaves evidence: where focus moved, what an error said, or how a result was announced.</p><dl><div><dt>Keyboard</dt><dd>Tab, Shift+Tab, Enter and Escape should support the relevant task.</dd></div><div><dt>Correction</dt><dd>Keep the user’s input and point to a specific next step.</dd></div><div><dt>Feedback</dt><dd>Describe the outcome in words as well as visual styling.</dd></div></dl></aside></div></main>
```

Справочник по коду

- Состояния checked и indeterminate главного элемента управления вычисляются на основе шести отдельных флажков.

- Сохранение зависит от завершённости проверки, а не от того, открыт ли диалог.

- Эта ручная форма проверки не выполняет аудит доступности.

### Полная оригинальная визуальная конфигурация

Именованные семантические цвета, шкала отступов, нативные селекторы data-state и адаптивное оформление наложения.

```
:root{--app-canvas:#f4f3f8;--app-surface:#ffffff;--app-ink:#2d2938;--app-muted:#746d80;--app-line:#e3dfeb;--app-action:#604c88;--app-on-action:#fff;--app-focus:#9a80ce;--app-soft:#eee8f7;--app-radius:12px;--app-space-1:4px;--app-space-2:8px;--app-space-3:12px;--app-space-4:16px;--app-space-6:24px;--app-space-8:32px}html,body,#app{height:auto;min-height:0;margin:0}*{box-sizing:border-box}body{font-family:system-ui,sans-serif;background:var(--app-canvas);color:var(--app-ink)}button{font:inherit;cursor:pointer}button:disabled{opacity:.45;cursor:default}button:focus-visible{outline:3px solid var(--app-focus);outline-offset:3px}.check-shell{max-width:1080px;margin:auto;padding:var(--app-space-8)}.eyebrow{font-size:10px;letter-spacing:.14em;font-weight:700;color:var(--app-muted)}h1{font-size:34px;line-height:1.15;max-width:710px;margin:12px 0}header>p:last-child{font-size:14px;line-height:1.7;max-width:640px;color:var(--app-muted)}.check-layout{display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:var(--app-space-6);margin-top:28px}.check-panel{background:var(--app-surface);border:1px solid var(--app-line);border-radius:16px;padding:var(--app-space-6);min-width:0}.bulk{display:flex;align-items:center;gap:12px;font-size:14px;font-weight:600;padding-bottom:24px}.count{margin-left:auto;color:var(--app-muted);font-size:12px}.checkbox{width:22px;height:22px;flex-shrink:0;border:1px solid #aaa1ba;background:white;border-radius:5px;display:inline-flex;align-items:center;justify-content:center;padding:0;line-height:1}.checkbox[data-state=checked],.checkbox[data-state=indeterminate]{background:var(--app-action);border-color:var(--app-action);color:var(--app-on-action)}.accordion{margin-bottom:24px}.accordion-item{border-top:1px solid var(--app-line)}.accordion-item:last-child{border-bottom:1px solid var(--app-line)}.accordion-heading{margin:0;font-size:16px}.accordion-trigger{width:100%;border:0;background:transparent;display:flex;align-items:center;justify-content:space-between;text-align:left;padding:20px 0;color:var(--app-ink);font-weight:600}.accordion-trigger small{display:block;font-weight:400;font-size:11px;color:var(--app-muted);margin-top:6px}.plus{font-size:23px;font-weight:400;transition:transform .15s}.accordion-trigger[data-state=open] .plus{transform:rotate(45deg)}.accordion-content{padding:0 0 20px}.group-description{font-size:12px;line-height:1.6;color:var(--app-muted);margin:0 0 16px}.check-row{display:flex;align-items:flex-start;gap:12px;margin-top:14px}.check-row label{font-size:13px;line-height:1.6;cursor:pointer}.primary,.secondary{border:1px solid transparent;border-radius:8px;padding:12px 16px;font-size:13px;font-weight:600}.primary{background:var(--app-action);color:var(--app-on-action)}.secondary{background:white;color:var(--app-ink);border-color:var(--app-line)}.reset{border:0;background:transparent;color:var(--app-muted);font-size:12px;padding:12px}.result{font-size:12px;line-height:1.6;color:var(--app-muted);margin:18px 0 0}.check-notes{min-width:0;padding:0 4px}.check-notes h2{font:400 29px/1.2 Georgia,serif}.check-notes>p:not(.eyebrow){font-size:13px;line-height:1.7;color:var(--app-muted)}.check-notes dl>div{padding:14px 0;border-top:1px solid var(--app-line)}.check-notes dt{font-size:13px;font-weight:600}.check-notes dd{font-size:12px;line-height:1.7;color:var(--app-muted);margin:5px 0 0}.focus-art{height:165px;background:#e6e0ef;border-radius:12px;position:relative;overflow:hidden;margin-bottom:24px}.focus-art span{position:absolute;width:140px;height:85px;left:35px;top:44px;background:white;border-radius:8px;transform:rotate(-9deg);box-shadow:0 0 0 6px #b3a3cd}.focus-art i{position:absolute;width:75px;height:13px;background:#b7adc6;left:60px;top:61px;transform:rotate(-9deg)}.focus-art b{position:absolute;width:72px;height:28px;background:#695587;left:87px;top:91px;border-radius:5px;transform:rotate(-9deg)}.overlay{position:fixed;inset:0;background:#21193180;z-index:20}.dialog{position:fixed;z-index:21;left:50%;top:50%;transform:translate(-50%,-50%);width:min(440px,calc(100% - 28px));max-height:calc(100vh - 28px);overflow:auto;background:white;padding:24px;border-radius:14px;box-shadow:0 20px 80px #23193640}.dialog-title{font-size:23px;margin:0 0 12px}.dialog-description,.remaining{font-size:13px;line-height:1.7;color:var(--app-muted)}.review-summary{padding:0;list-style:none}.review-summary li{display:flex;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid var(--app-line);font-size:13px}.dialog-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}@media(max-width:740px){.check-layout{grid-template-columns:minmax(0,1fr)}.check-shell{padding:20px}h1{font-size:29px}}@media(max-width:360px){.check-shell{padding:14px}.check-panel,.dialog{padding:16px}.check-panel>.primary,.dialog-actions>*{width:100%}}@media(prefers-reduced-motion:reduce){.plus{transition:none}}
```

Справочник по коду

- Это оригинальные переменные --app-*, а не официальная палитра Bits.

- Добавлены стили фокуса и уменьшения анимации.

- Только для наложения используется максимальная высота относительно окна просмотра.

## Дизайн-система Bits UI — настройка AI-агента

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

Проверено с Bits UI 2.19.5 и Svelte 5.57.1. Требуется полная оригинальная таблица стилей; Bits UI не предоставляет цветов по умолчанию и макета страницы.

```
// npm create vite@latest bits-review -- --template svelte
// cd bits-review && npm install
// npm install svelte@5.57.1 bits-ui@2.19.5
// Save the complete examples as src/App.svelte and src/style.css.
// src/main.js:
import {mount} from 'svelte';
import App from './App.svelte';
import './style.css';
mount(App, {target:document.querySelector('#app')});
// index.html: <div id="app"></div><script type="module" src="/src/main.js"></script>
// npm run dev
```

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

```
Используйте Bits UI 2.19.5 и Svelte 5 для создания предоставленного интерфейса ручной проверки. Включите шесть пунктов в три раздела Accordion, вычисляйте состояния checked/indeterminate массового выбора по отдельным ответам и сохраняйте ответы при сворачивании разделов. Соберите диалог из всех частей Dialog для проверки: он должен позволять просматривать незавершённые результаты, но кнопка «Сохранить» должна оставаться неактивной, пока не отмечены все шесть пунктов. При изменении любого ответа сбрасывайте сообщение о сохранении; действие «Снять все отметки» должно восстанавливать исходное раскрытие разделов и закрывать проверку. Добавьте полный CSS и описывайте результаты как локальные отметки читателя, а не как автоматическую сертификацию доступности.
```

## Bits UI — дизайн-система: источники и область применения

Bits UI 2.19.5 и Svelte 5.57.1. Оригинальные токены приложения и иллюстрации. Это ручной контрольный список с локальным состоянием, а не автоматизированный аудит или сертификация доступности.

- Начало работы Настройка Svelte и интеграция пакета.

- Оформление Граница между headless-стилизацией и атрибутами данных.

- Checkbox Отмеченное, неопределённое и управляемое состояния.

- Accordion Несколько раскрытых разделов и нативная структура.

- Dialog Portal, заголовок, описание, фокус и закрытие.

- Управление состоянием Привязки и управляемые значения.

## Дизайн-система Bits UI — связанные ресурсы

### Bootstrap

Используйте Bootstrap 5.3.8 и его реальную шкалу отступов, семантические цвета, адаптивную сетку и API компонентов. Проверьте работающую форму бронирования, сводку ошибок, фильтр таблицы, модальное окно и переключатель цветовой схемы, а затем используйте приведённый код.

### Bulma

Создайте редакционный рабочий стол на основе реальной структуры полей и элементов управления Bulma, адаптивных столбцов, семантических модификаторов цвета и переменных CSS, добавив полный код валидации.

### Chakra UI

Справочник по Chakra UI v3: токены, семантические роли цветов, рецепты и составные компоненты форм. Изучите реальные шкалы отступов и типографики, а затем попробуйте встроенную форму профиля рабочего пространства с валидацией, имитацией ошибки сохранения и светлым и тёмным оформлением.


- [Справочник по реализации](https://www.bits-ui.com/docs/components/checkbox)
- [Источник](https://www.bits-ui.com/docs/styling)
- [Источник](https://www.bits-ui.com/docs/components/dialog)
- [Прочитать вспомогательную спецификацию](https://www.bits-ui.com/docs/styling)
- [Прочитать вспомогательную спецификацию](https://www.bits-ui.com/docs/getting-started)
- [Прочитать вспомогательную спецификацию](https://www.bits-ui.com/docs/components/checkbox)
- [Прочитать вспомогательную спецификацию](https://www.bits-ui.com/docs/components/accordion)
- [Прочитать вспомогательную спецификацию](https://www.bits-ui.com/docs/components/dialog)
- [Прочитать вспомогательную спецификацию](https://www.bits-ui.com/docs/state-management)
- [Справочник по коду](https://www.bits-ui.com/docs/components/checkbox)
- [Справочник по коду](https://www.bits-ui.com/docs/styling)
- [Начало работы Настройка Svelte и интеграция пакета.](https://www.bits-ui.com/docs/getting-started)
- [Оформление Граница между headless-стилизацией и атрибутами данных.](https://www.bits-ui.com/docs/styling)
- [Checkbox Отмеченное, неопределённое и управляемое состояния.](https://www.bits-ui.com/docs/components/checkbox)
- [Accordion Несколько раскрытых разделов и нативная структура.](https://www.bits-ui.com/docs/components/accordion)
- [Dialog Portal, заголовок, описание, фокус и закрытие.](https://www.bits-ui.com/docs/components/dialog)
- [Управление состоянием Привязки и управляемые значения.](https://www.bits-ui.com/docs/state-management)