claude-harness/skills/aura-design/reference/components.md

AURA — компоненты

Что есть в kit/ui (импорт из ./ui/index.ts)

Компонент	API	Правило
Button	variant primary/secondary/danger/ghost (по умолч. secondary), size md 32/lg 40, icon, loading	одна primary на экран/форму; loading — крутилка вместо иконки, вид варианта сохраняется, disabled + aria-busy; переключатель — secondary с aria-pressed
IconButton	label (обязателен → aria-label и title), icon	32×32, радиус 10; для действий без подписи
Segmented	label, value, options[{value,label,href?}], onChange / link	2–4 взаимоисключающих варианта на сером треке; с href — ссылки (aria-current), иначе radiogroup
ThemeSwitch	—	солнце/луна, role=switch; пока не трогали — системная тема
Field	label, hint, error, один дочерний контрол	подпись 14/20 600 над полем; ошибка 12/16 цвета ошибки, role=alert, ставит aria-invalid
TextInput, Textarea, Select, SearchInput, Checkbox	как у родных элементов + size	Select — родной <select> со своей стрелкой; SearchInput с иконкой и «Очистить»
Badge	tone neutral/success/error/warning/info	статус, счётчик; текст обязателен (не только цвет)
Chip	onRemove, removeLabel	снимаемая плашка выбранного фильтра: «Категория: Видео ✕»
Notice	tone success/error/warning/info, title, action	иконка в круге, заголовок 14/20 600, текст 12/16; error/warning — role=alert
Panel	as, padding none/md/lg	поверхность, граница, радиус 16 — контейнер любого блока
PageHeader	title, subtitle, actions, children	h1 20/28 + подзаголовок вторичным; действия справа, переносятся
Dialog	label, onClose, size sm 480/md 640/lg 1000	родной <dialog> (showModal): фокус и Esc бесплатно; ≤700 px — во весь экран. Внутри: h2.ui-dialog__title, form.ui-form, внизу div.ui-actions
Confirm	title, text, confirmLabel, danger, onConfirm, onCancel	подтверждение вместо window.confirm/alert (удаление, потеря ввода)
Dropdown	button({open,toggle}), children(close)	выпадающая панель (мультиселект фильтра)
Menu, MenuItem, MenuSeparator	label, align, up; onSelect, pressed, danger	меню «⋯» для редких действий; переключатели — pressed (галочка)
иконки Icon*	size 16/20	линейные SVG, currentColor; новые рисуй тем же make(). Есть: Plus, Edit, Trash, Download, Upload, Refresh, Search, Filter, More, Close, ChevronDown/Up, Check, Error, Warning, Info, Calendar, Link, External, Open, Board, List, Menu, Sidebar, Home, Settings, User, Sun, Moon
AppShell (kit/shell)	brand, nav, current, link, top, bottom, topbarEnd, menu, storageKey, wide	см. layout-ux.md

CSS-классы без компонента:

• .ui-toolbar — строка фильтров (в ней SearchInput растягивается до 480); .ui-chips — ряд Chip под ней;
• .ui-table + .ui-table-wrap (на Panel padding="none"), --table-min, td.num — числа вправо, td.actions — кнопки строки; .ui-late — просрочка;
• .ui-form, .ui-actions, .ui-dialog__title, .ui-dialog__text — форма и окно;
• .ui-empty, .ui-empty__title — пустое состояние; .ui-dot + style={{"--dot": "var(--color-cat-3)"}} — точка категории; .ui-spinner, .visually-hidden, .mono.

Мультиселект фильтра (список с флажками) — Dropdown с кнопкой secondary («Категория (2)» с IconFilter) и разметкой:

<Dropdown button={({ open, toggle }) => <Button icon={<IconFilter />} aria-expanded={open} onClick={toggle}>Категория{n ? ` (${n})` : ""}</Button>}>
  {() => <div className="dd-list">{options.map((o) => (
    <label key={o} className="dd-item"><input type="checkbox" checked={sel.has(o)} onChange={() => flip(o)} />{o}<span className="n">{count[o]}</span></label>
  ))}</div>}
</Dropdown>

Контракты AURA, которых нет в наборе (строить по ним, когда понадобятся)

Геометрия и состояния — из tokens.json; литералы ниже переводить в токены (#fafaf8 → --color-bg-subtle, #7cac58/#83b766 → color-mix(in srgb, var(--color-action-primary) 80%, var(--color-bg-surface))).

Компонент	Геометрия	Состояния
Плитка выбора (radio/checkbox-карточка)	высота 84, контрол 16 по центру по вертикали, текст с отступа 45, заголовок 14/20 600, описание 12/16 через 2, padding 14/12, радиус 12, gap между плитками 8	default: subtle + граница default; hover: зеленоватая граница + тень 0 4px 12px 7%; selected: surface + граница action-primary
Компактная опция с иконкой	высота 54, контрол с 13, иконка 32 с 45, текст с 85	как плитка
Загрузка файла (dragger)	пусто 84 / с файлом 86, padding 12/16, gap 12, иконка 40, радиус 20, граница 1.5 пунктир	empty: subtle + зеленоватый пунктир; hover/drag: selected-фон + action-primary пунктир; added: сплошная граница
Плашка файла	высота ≥28, радиус 8, gap 4	фон selected, зелёная граница и текст; «удалить» на hover — цвет ошибки
Шаги процесса	высота ≥60, иконка 28, радиус 20, gap 12	pending: иконка тёмная; active: зелёная; complete: зелёная с галочкой
Панель действия (низ формы)	высота ≥64, кнопка ≥176 шириной, gap 16	пусто: кнопка недоступна; выбрано: доступна; обработка: loading; готово: статус успеха + «Ещё раз»; ошибка: статус ошибки
Переключатель (switch)	44×22, «таблетка»	выкл: серый трек; вкл: action-primary; ручка белая

Правило AURA: не вводить состояний, которых интерфейс не рисует; не придумывать новых цветов, радиусов, отступов и иконок вне системы — сначала токен, потом использование.