Дорожная карта
Что сделано, что в работе и что запланировано в ValyroUI: компоненты, темы, доступность, фреймворки и инструменты.
В работе
Запланировано
Сделано
- Темы в OKLCH и полный маппинг Tailwind v4 (2026-10-19) — Все цвета 19 тем записаны в oklch() и дают тот же 8-битный sRGB. valyro-ui/tailwind.css делает утилитой каждый токен цвета, радиуса, тени, шрифта и движения.
- Единое BEM-правило для классов (2026-10-19) — Правило записано и проверяется тестом. Модификаторы вне базовых компонентов стали data-атрибутами, старые классы остались алиасами с той же специфичностью.
- Полировка базовых компонентов (2026-10-19) — Кнопки, навигация, раскладка, формы, окна и уведомления: form.reset() возвращает неконтролируемые поля, required озвучивается на контроле, зоны касания от 40px на сенсорных экранах, недостающие пропсы.
- Пилот Performance: CSS-анимации (2026-10-19) — Глобальные токены пружин, входы data-ui-enter и прогресс прокрутки на scroll-driven анимациях. ReadingProgress, ParallaxLayers, HalftoneImageReveal и NumberTicker с прокруткой цифр больше не гоняют JS на каждом кадре.
- Пилот Accessibility: уровень React Aria (2026-10-19) — Live-объявления и поиск по первым буквам с учётом локали в valyro-ui/headless. В TreeView — многосимвольный поиск и отключённые узлы, DataTable объявляет сортировку и выбирает диапазон по Shift+клику.
- Пилот Architecture: составные части и headless (2026-10-19) — useAccordion, useTreeView и useDataTable с prop getters, на них построены Accordion, TreeView и DataTable. TreeView принимает вложенные части TreeView.Item.
- CSS-анимации, этап 2 (2026-10-19) — ProgressBar, Calendar, Tabs, Toaster, WheelPicker, CoverflowCarousel, MapChart, ScrollScene, ShapeMorph и сворачивание деревьев теперь анимируются на CSS. WheelPicker вместо 80 JS-кадров на прокрутку не тратит ни одного.
- Доступность, этап 2: топ-10 аудита (2026-10-19) — Нативный range внутри Slider, перемещение с клавиатуры и диктором при перетаскивании, страница за модалкой скрыта от дикторов, озвучка числа результатов, новые DateField и TimeField, начало недели и формат часов из локали, ручные и вертикальные Tabs.
- Headless-хуки для форм, меню, вкладок и диалогов (2026-10-19) — useListbox, useSelect, useCombobox, useTabs, useMenu, useDialog, useRadioGroup, useField, usePagination, useTooltip и useResizablePanels; компоненты кита построены на них и принимают составные части.
- BEM и токены в CSS базовых компонентов (2026-10-19) — То же BEM-правило и токены отступов вместо жёстких значений в кнопках, навигации, раскладке, формах, окнах и уведомлениях.
- Проверка качества: темы, режимы, устройства и фреймворки (2026-10-19) — Каждая тема в светлом и тёмном режиме проходит контраст WCAG AA под тестом, у сайта нет горизонтальной прокрутки от 320 до 1920px, а кит ставится и собирается во всех 20 окружениях гайда.
- Анимации на CSS без JS-рантайма (2026-10-19) — Спирали, барабан, стопка панелей, текст по пути, сетка горизонта и кольцо витрины, рябь, переключатели, развёртка темы и высота вкладок идут на CSS и SVG-анимациях. На JS осталось только то, что следует за жестом, рисует холст или печатает текст.
- Доступность уровня React Aria Components (2026-10-19) — Новые Listbox с выбором диапазона по Shift и Ctrl+A и CheckboxGroup, нативный режим и required у Select, скрытый range input в ColorPicker и всех собственных слайдерах, Tab из меню по паттернам WAI-ARIA.
- Составные части и headless-хуки для всех компонентов (2026-10-19) — CheckboxTree, Stepper, Calendar, Slider, Sortable, Carousel, Popover и NumberInput тоже работают на хуках из valyro-ui/headless, с частями Stepper.Step, Carousel.Slide, CheckboxTree.Item и заголовком и сеткой Calendar.