Нативные HTML, CSS и поведение браузера в дизайн-системе KERN
Что входит в пакет
В состав KERN native 2.8.2 входят компонент CSS и шрифты. В примере эти файлы импортируются напрямую: кнопка, textarea, Details и Dialog — нативные элементы с классами KERN. Провайдер React и конструктор компонентов JavaScript не нужны. Логику принятия решения при работе с диалогом обеспечивает приложение; одно лишь оформление не очищает поле ввода.
Установите пакет native с зафиксированной версией.
Скопируйте таблицу стилей и шрифты вместе, сохранив относительные пути к файлам.
Сохраните пример целиком и запустите веб-сервер в этой директории.
Fira Sans и адаптивная типографика в дизайн-системе KERN
Явно подключите шрифты
kern.min.css указывает Fira Sans; fonts/fira-sans.css объявляет сами начертания шрифта и относительные пути к ресурсам WOFF2. Если сохранить каталог шрифтов без изменений, таблица стилей не перейдёт незаметно на резервный шрифт, несмотря на корректные настройки. Размеры статического текста остаются равны 16, 18 и 21px, а адаптивные токены заголовка и подзаголовков меняются при ширине 768px. Для структурной иерархии используйте элемент заголовка, а для его визуального оформления — соответствующий класс KERN. В примере используется один h1, а диалогу назначен собственный h2.
Отступы, ширина и адаптивная компоновка в дизайн-системе KERN
Отделяйте токены от компоновки
KERN предоставляет именованные токены отступов от 0 до 192px, в том числе с шагом 2px и 4px в нижней части шкалы. Для границ и скруглений предусмотрены отдельные шкалы токенов. В примере используется вертикальный ритм 24px и строка действий с переносом. Максимальная ширина содержимого 800px и ограничение ширины диалога 560px — явные решения для этого приложения; ни одно из них не выдаётся за универсальный контейнер KERN. На узких экранах поля страницы сокращаются до 16px, а ширина диалога остаётся в пределах области просмотра. Для документа не задаётся минимальная высота относительно области просмотра, поэтому при встраивании не возникает циклического изменения размеров.
Семантические цвета и оформление в дизайн-системе KERN
Переключайте роли, а не отдельные шестнадцатеричные значения
В пакете используются семантические свойства CSS для текста, действий, фона и фокуса. В светлой и тёмной палитрах эти роли меняются согласованно. Например, в светлой теме action-default соответствует darkblue-700, а в тёмной — darkblue-300; при этом цвет текста на фоне действия меняется с белого на чёрный. В примере атрибут data-kern-theme задаётся элементу html, а кнопка сообщает о состоянии нажатия. Выбор темы действует только для этого документа и не сохраняется. Если удалить явно заданный атрибут, таблица стилей будет следовать настройке prefers-color-scheme.
Редактируемая заметка с меткой в дизайн-системе KERN
Сохраняйте инструкции доступными
Для textarea используется kern-form-input__input внутри kern-form-input; с полем связана настоящая метка, указывающая на его id. Подсказке присвоен отдельный id, и связь с ней задана через aria-describedby. Заметка необязательна и хранится локально, поэтому пример не создаёт фиктивные ошибки обязательного поля или сохранение на сервере. Кнопка Restore example восстанавливает исходное значение и переводит фокус в редактируемое поле. О результате сообщает область статуса, не заменяя метку и не переводя фокус на текст, который сам по себе не является интерактивным.
Дополнительная информация в элементе Details дизайн-системы KERN
Поручите управление раскрытием браузеру
Элемент details управляет своим состоянием раскрытия, а summary служит триггером. Для оформления KERN добавляет kern-details__header, небольшой span для заголовка и kern-details__body. В примере здесь размещена информация о сроке хранения, поскольку она является дополнительной. Обязательные инструкции, ошибки и действие удаления остаются видимыми вне раскрывающегося блока. Нативное управление с клавиатуры обеспечивает активацию без дополнительного обработчика клика и дублирования состояния aria-expanded.
Формулируйте текст summary ясно и кратко.
Не помещайте в summary другую кнопку или ссылку.
Для группы связанных раскрывающихся блоков используйте Accordion, а не маскируйте несвязанные действия под Details.
Подтверждение с безопасным выходом в дизайн-системе KERN
Структура и управление
Диалог имеет метку от h2 и краткое пояснение о последствиях. Для заголовка, основного содержимого и нижней части используются документированные классы KERN. Метод showModal() помещает нативный диалог на верхний слой, а close() завершает взаимодействие. При первом открытии фокус получает кнопка Keep note благодаря атрибуту autofocus. Нажатие Escape закрывает диалог, не меняя текст, а обработчик закрытия возвращает фокус к кнопке Discard note. Значение очищается только при выборе Yes, discard. Щелчок по фону намеренно не закрывает диалог, поскольку здесь подтверждается разрушительное действие. Это соответствует документированным рекомендациям для важных решений, а не бездумно копирует обработчик закрытия по щелчку по фону из общего примера.
В приведённых ниже инструкциях устанавливается пакет одной точной версии и копируются его CSS и каталог шрифтов. Полный пример включает собственную таблицу стилей CSS для компоновки, атрибут темы корневого элемента, структуру DOM и обработчики событий. После интеграции с настоящей формой проверьте оба результата работы диалога, клавишу Escape и отображение на узких экранах. Код KERN распространяется по лицензии EUPL; текстовые и графические материалы сайта обозначены лицензией CC BY-NC-SA. В этом оригинальном примере не копируется айдентика органа власти и не подразумевается, что сервис прошёл аудит доступности. Реальному приложению всё ещё потребуются сохранение данных, серверная валидация и оценка всего пользовательского пути.
Полный пример с нативной заметкой и подтверждением
Вся разметка документа, таблица стилей CSS для компоновки и логика приложения; установите ресурсы согласно блоку инструкций.
html
<!doctype html><html lang="en" data-kern-theme="light"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>KERN workshop note</title><link rel="stylesheet" href="vendor/kern-2.8.2/kern.min.css"><link rel="stylesheet" href="vendor/kern-2.8.2/fonts/fira-sans.css"><style>body{margin:0;padding:clamp(16px,4vw,40px);color:var(--kern-color-layout-text-default)}main{max-width:800px;margin:auto;display:grid;gap:24px}.top,.actions{display:flex;gap:16px;flex-wrap:wrap;align-items:center}.top{justify-content:space-between}.kern-dialog{max-width:min(560px,calc(100% - 32px))}textarea{width:100%;resize:vertical}#status{min-height:24px}.kern-details{width:100%}</style><main><div class="top"><span class="kern-preline">KERN · Native components</span><button class="kern-btn kern-btn--secondary" id="theme" aria-pressed="false"><span class="kern-label">Dark appearance</span></button></div><h1 class="kern-heading kern-heading--large">Workshop note</h1><p class="kern-body">Prepare a short note for your next workshop. This demonstration keeps edits only in this page.</p><div class="kern-form-input"><label class="kern-label" for="note">Your note</label><p class="kern-hint" id="hint">No personal information is needed. Nothing is submitted.</p><textarea class="kern-form-input__input" rows="5" id="note" aria-describedby="hint">Discuss accessible ways to collect workshop feedback.</textarea></div><details class="kern-details"><summary class="kern-details__header"><span class="kern-title kern-title--small">What happens to this note?</span></summary><div class="kern-details__body"><p class="kern-body">Edits live in this browser tab. Reloading restores the example text. Discarding clears the current note after confirmation; it does not delete a server record.</p></div></details><div class="actions"><button class="kern-btn kern-btn--primary" id="discard"><span class="kern-label">Discard note</span></button><button class="kern-btn kern-btn--secondary" id="restore"><span class="kern-label">Restore example</span></button></div><p id="status" class="kern-body" role="status"></p><dialog class="kern-dialog" id="confirm" aria-labelledby="confirm-title" aria-describedby="confirm-description"><header class="kern-dialog__header"><h2 class="kern-title kern-title--large" id="confirm-title">Discard this note?</h2></header><section class="kern-dialog__body"><p class="kern-body" id="confirm-description">Your current text will be cleared from this page. Choose Keep note to continue editing.</p></section><footer class="kern-dialog__footer"><button class="kern-btn kern-btn--secondary" id="keep" autofocus><span class="kern-label">Keep note</span></button><button class="kern-btn kern-btn--primary" id="clear"><span class="kern-label">Yes, discard</span></button></footer></dialog></main><script>const byId=id=>document.getElementById(id),note=byId('note'),modal=byId('confirm'),original=note.value;byId('discard').onclick=()=>modal.showModal();byId('keep').onclick=()=>modal.close('keep');byId('clear').onclick=()=>{note.value='';modal.close('discard');byId('status').textContent='Note discarded from this page.'};modal.addEventListener('close',()=>byId('discard').focus());byId('restore').onclick=()=>{note.value=original;byId('status').textContent='Example restored.';note.focus()};byId('theme').onclick=()=>{const dark=document.documentElement.dataset.kernTheme!=='dark';document.documentElement.dataset.kernTheme=dark?'dark':'light';byId('theme').setAttribute('aria-pressed',String(dark))};</script></html>
Сборка и UI-фреймворк не требуются. Сохраните каталог шрифтов: в его файле CSS используются относительные пути к файлам WOFF2. ZIP-архив с полным рабочим примером в разделе Sources также содержит точные зависимости для предварительного просмотра и весь документ. Распакуйте архив, запустите в этой директории команду python3 -m http.server 8080, затем откройте http://localhost:8080/kern.html. Не открывайте примеры с модулями через file://.
bash
npm install --save-exact @kern-ux/[email protected]
mkdir -p vendor/kern-2.8.2
cp node_modules/@kern-ux/native/dist/kern.min.css vendor/kern-2.8.2/
cp -R node_modules/@kern-ux/native/dist/fonts vendor/kern-2.8.2/
# Save the complete HTML example below as kern.html beside vendor/.
python3 -m http.server 8080
# Open http://localhost:8080/kern.html
Запрос для вашего проекта
Промпт для AI-агента
Создайте пример локальной заметки для мастерской с помощью @kern-ux/native 2.8.2 CSS и входящего в пакет Fira Sans. Составьте форму с textarea kern-form-input, связанной с меткой, дополнительным нативным раскрывающимся блоком Details и элементом kern-dialog с размеченными заголовком, основным содержимым и нижней частью. Открывайте диалог методом showModal(), при открытии переводите фокус на Keep note, позволяйте клавише Escape закрыть его без изменения текста, а заметку очищайте только после выбора Yes, discard. При закрытии возвращайте фокус на кнопку открытия и предусмотрите Restore example. Переключайте data-kern-theme между светлой и тёмной темами, не придумывая новые токены палитры. Сохраните исходные решения приложения по ширине и оставьте заметку локальной; загрузка, черновик на сервере или утверждение о государственном сервисе не требуются.
05
Источники и область применения дизайн-системы KERN
Оригинальная демонстрация с использованием кода KERN. Она не подразумевает принадлежность к органу власти, постоянное хранение данных или сертификацию доступности.
