# Дизайн-система Skeleton ## Skeleton Предварительный просмотр интерфейса дизайн-системы Меняйте тему и оформление, сохраняя состояние чтения, и проверяйте применённые значения. ## Справочник по дизайн-системе Skeleton Зафиксированные файлы тем Skeleton 5.0.1, скомпилированное поведение утилит CSS и явно обозначенные оригинальные решения по композиции. ### Значения темы Cerberus | Название / правило | Значение / конфигурация | Применение | | --- | --- | --- | | --spacing | 0.25rem | Фактическое объявление темы. Эти значения меняются вместе, когда data-theme выбирает эту импортированную тему; исходное состояние чтения остаётся прежним. | | --radius-base | 0.5rem | Фактическое объявление темы. Эти значения меняются вместе, когда data-theme выбирает эту импортированную тему; исходное состояние чтения остаётся прежним. | | --typo-base--font-family | system-ui | Фактическое объявление темы. Эти значения меняются вместе, когда data-theme выбирает эту импортированную тему; исходное состояние чтения остаётся прежним. | | --typo-heading--font-weight | bold | Фактическое объявление темы. Эти значения меняются вместе, когда data-theme выбирает эту импортированную тему; исходное состояние чтения остаётся прежним. | | --color-primary-100 | oklch(0.84 0.08 254.62) | Фактическое объявление темы. Эти значения меняются вместе, когда data-theme выбирает эту импортированную тему; исходное состояние чтения остаётся прежним. | | --color-primary-300 | oklch(0.7 0.15 254.36) | Фактическое объявление темы. Эти значения меняются вместе, когда data-theme выбирает эту импортированную тему; исходное состояние чтения остаётся прежним. | | --color-primary-500 | oklch(0.57 0.21 258.29) | Фактическое объявление темы. Эти значения меняются вместе, когда data-theme выбирает эту импортированную тему; исходное состояние чтения остаётся прежним. | | --color-primary-700 | oklch(0.46 0.17 257.78) | Фактическое объявление темы. Эти значения меняются вместе, когда data-theme выбирает эту импортированную тему; исходное состояние чтения остаётся прежним. | | --color-primary-900 | oklch(0.34 0.11 257.14) | Фактическое объявление темы. Эти значения меняются вместе, когда data-theme выбирает эту импортированную тему; исходное состояние чтения остаётся прежним. | | --color-surface-50 | oklch(0.99 0 0) | Фактическое объявление темы. Эти значения меняются вместе, когда data-theme выбирает эту импортированную тему; исходное состояние чтения остаётся прежним. | | --color-surface-950 | oklch(0.18 0 0) | Фактическое объявление темы. Эти значения меняются вместе, когда data-theme выбирает эту импортированную тему; исходное состояние чтения остаётся прежним. | ### Значения темы Mint | Название / правило | Значение / конфигурация | Применение | | --- | --- | --- | | --spacing | 0.25rem | Фактическое объявление темы. Эти значения меняются вместе, когда data-theme выбирает эту импортированную тему; исходное состояние чтения остаётся прежним. | | --radius-base | 0.375rem | Фактическое объявление темы. Эти значения меняются вместе, когда data-theme выбирает эту импортированную тему; исходное состояние чтения остаётся прежним. | | --typo-base--font-family | system-ui, sans-serif | Фактическое объявление темы. Эти значения меняются вместе, когда data-theme выбирает эту импортированную тему; исходное состояние чтения остаётся прежним. | | --typo-heading--font-weight | normal | Фактическое объявление темы. Эти значения меняются вместе, когда data-theme выбирает эту импортированную тему; исходное состояние чтения остаётся прежним. | | --color-primary-100 | oklch(89.8% 0.08 156.34deg) | Фактическое объявление темы. Эти значения меняются вместе, когда data-theme выбирает эту импортированную тему; исходное состояние чтения остаётся прежним. | | --color-primary-300 | oklch(86.28% 0.13 151.76deg) | Фактическое объявление темы. Эти значения меняются вместе, когда data-theme выбирает эту импортированную тему; исходное состояние чтения остаётся прежним. | | --color-primary-500 | oklch(83.57% 0.18 148.98deg) | Фактическое объявление темы. Эти значения меняются вместе, когда data-theme выбирает эту импортированную тему; исходное состояние чтения остаётся прежним. | | --color-primary-700 | oklch(71.28% 0.15 148.61deg) | Фактическое объявление темы. Эти значения меняются вместе, когда data-theme выбирает эту импортированную тему; исходное состояние чтения остаётся прежним. | | --color-primary-900 | oklch(58.17% 0.13 148.16deg) | Фактическое объявление темы. Эти значения меняются вместе, когда data-theme выбирает эту импортированную тему; исходное состояние чтения остаётся прежним. | | --color-surface-50 | oklch(89.13% 0.03 155.27deg) | Фактическое объявление темы. Эти значения меняются вместе, когда data-theme выбирает эту импортированную тему; исходное состояние чтения остаётся прежним. | | --color-surface-950 | oklch(21.88% 0.02 186.33deg) | Фактическое объявление темы. Эти значения меняются вместе, когда data-theme выбирает эту импортированную тему; исходное состояние чтения остаётся прежним. | ### Значения темы Rose | Название / правило | Значение / конфигурация | Применение | | --- | --- | --- | | --spacing | 0.25rem | Фактическое объявление темы. Эти значения меняются вместе, когда data-theme выбирает эту импортированную тему; исходное состояние чтения остаётся прежним. | | --radius-base | 0.375rem | Фактическое объявление темы. Эти значения меняются вместе, когда data-theme выбирает эту импортированную тему; исходное состояние чтения остаётся прежним. | | --typo-base--font-family | Seravek, 'Gill Sans Nova', Ubuntu, Calibri, 'DejaVu Sans', source-sans-pro, sans-serif | Фактическое объявление темы. Эти значения меняются вместе, когда data-theme выбирает эту импортированную тему; исходное состояние чтения остаётся прежним. | | --typo-heading--font-weight | normal | Фактическое объявление темы. Эти значения меняются вместе, когда data-theme выбирает эту импортированную тему; исходное состояние чтения остаётся прежним. | | --color-primary-100 | oklch(92.93% 0.03 340.64deg) | Фактическое объявление темы. Эти значения меняются вместе, когда data-theme выбирает эту импортированную тему; исходное состояние чтения остаётся прежним. | | --color-primary-300 | oklch(81.16% 0.08 345.32deg) | Фактическое объявление темы. Эти значения меняются вместе, когда data-theme выбирает эту импортированную тему; исходное состояние чтения остаётся прежним. | | --color-primary-500 | oklch(69.89% 0.13 348.12deg) | Фактическое объявление темы. Эти значения меняются вместе, когда data-theme выбирает эту импортированную тему; исходное состояние чтения остаётся прежним. | | --color-primary-700 | oklch(57.25% 0.1 346.44deg) | Фактическое объявление темы. Эти значения меняются вместе, когда data-theme выбирает эту импортированную тему; исходное состояние чтения остаётся прежним. | | --color-primary-900 | oklch(43.55% 0.07 343deg) | Фактическое объявление темы. Эти значения меняются вместе, когда data-theme выбирает эту импортированную тему; исходное состояние чтения остаётся прежним. | | --color-surface-50 | oklch(96.76% 0.01 318.08deg) | Фактическое объявление темы. Эти значения меняются вместе, когда data-theme выбирает эту импортированную тему; исходное состояние чтения остаётся прежним. | | --color-surface-950 | oklch(25.82% 0.01 304.87deg) | Фактическое объявление темы. Эти значения меняются вместе, когда data-theme выбирает эту импортированную тему; исходное состояние чтения остаётся прежним. | ### Интеграция и семантические сочетания CSS | Название / правило | Значение / конфигурация | Применение | | --- | --- | --- | | Foundation import | @import "@skeletonlabs/skeleton" | Подключите после Tailwind, чтобы определения утилит были скомпилированы. | | Theme selection | data-theme="cerberus" / "mint" / "rose" | Переменные могут задаваться только импортированными темами. | | Class-based appearance | @custom-variant dark (&:where(.dark, .dark *)) | Заставляет исходную кнопку оформления переключать фактический скомпилированный вариант для тёмной темы. | | Surface pairings | light-dark(light value, dark value) | Глобальные стили Skeleton задают color-scheme; просто сменить класс без соответствующего варианта недостаточно. | | Filled action | btn preset-filled-primary-500 | Сочетает геометрию нативной кнопки с пресетом, учитывающим тему. | | Supporting action | btn preset-tonal-primary | Использует тональное сочетание, подходящее для текущего оформления. | | Disclosure | details.disclosure > summary | Нативное состояние раскрытия браузера с Skeleton CSS; инициализация компонента Svelte не требуется. | ## Полное руководство по дизайн-системе Skeleton Практическое руководство по выбору, применению и оценке этой системы для реального интерфейса. Подробные рекомендации, отправная точка для реализации и ссылки на источники. ## Основы и слои фреймворка CSS дизайн-системы Skeleton ### Выберите фактически используемый слой > В интерфейсе для чтения используются @skeletonlabs/skeleton 5.0.1, утилиты Tailwind CSS и три поставляемые темы. skeleton-svelte и skeleton-react не загружаются. Кнопки, бейдж, чип, карточка и оформление раскрывающегося элемента используют настоящие утилиты CSS; выбор темы и логика сохранённого состояния созданы специально для JavaScript. Благодаря такому разделению весь пример работает как небольшая страница Vite и не создаёт впечатления, будто здесь используется среда выполнения компонентов фреймворка. ### Компилируйте утилиты, а не импортируйте исходный CSS в браузер Исходный код Skeleton содержит директивы Tailwind, например @utility и @variant. В предоставленной конфигурации Vite подключён @tailwindcss/vite, а таблица стилей импортирует Tailwind до Skeleton и выбранных тем. Простое подключение исходного пакета ссылкой не воспроизведёт скомпилированные стили. В комплект входит полный исходный код сборки, поэтому предварительный просмотр не зависит от скрытых сгенерированных файлов CSS. 1. Импортируйте Tailwind CSS. 2. Импортируйте утилиты Skeleton. 3. Импортируйте каждую тему, которую хотите использовать. 4. Скомпилируйте таблицу стилей с помощью плагина Tailwind для Vite. ## Выбор темы и фактические значения дизайн-системы Skeleton ### Явно импортируйте каждую доступную тему Cerberus, Mint и Rose импортируются по отдельности из каталога тем пакета. При выборе темы атрибут data-theme на корневом элементе меняется и подключает соответствующие объявления переменных. В справочнике для каждой темы приведены реальные образцы основной палитры, крайние значения поверхностей, интервалы, радиусы и объявления шрифтов. Эти значения взяты из зафиксированных файлов, а не сгенерированы простой заменой одного акцентного цвета. - Изначально используется оформление Cerberus. - Mint и Rose — отдельные реально импортируемые темы. - При выборе темы меняется data-theme, а не копируется дерево контента. ### Сравнивайте темы, не меняя весь контент Карточка для чтения, список и сохранённое состояние остаются неизменными при смене темы. После каждого выбора боковая панель считывает вычисленные переменные корневого элемента и показывает фактические значения, применённые браузером. Такое сравнение полезно: типографика, форма и палитра могут меняться, пока читатель оценивает один и тот же контент и состояние. ## Тёмное оформление и цветовая схема дизайн-системы Skeleton ### Свяжите тёмный вариант с фактическим элементом управления В таблице стилей определён тёмный вариант на основе класса, который соответствует .dark на корневом элементе или его потомках. Глобальные правила Skeleton используют этот вариант для установки color-scheme. Поэтому кнопка оформления меняет условия, от которых зависят сочетания поверхностей light-dark(). Если переключатель меняет класс, но оставляет без изменений вариант Tailwind по умолчанию, зависящий от медиазапроса, интерфейс может сообщать о тёмном оформлении, хотя поверхности останутся светлыми. ### Используйте пресет, который сохраняет читаемость Для переключения оформления используется preset-tonal-primary, а для действия чтения — preset-filled-primary-500. Пресеты задают соотношение поверхности и переднего плана; одного цветового токена недостаточно для обеспечения читаемого контраста. Фактическое отображение в тёмной теме проверили после переключения на Rose, в том числе текст элементов управления и раскрывающийся блок. Корректность внешнего вида не предполагалась только на основании успешной смены класса. ## Типографика, форма и макет дизайн-системы Skeleton ### Отделяйте объявления темы от исходной иерархии В Cerberus задан системный шрифт, а Rose использует другой стек резервных шрифтов. В этом примере удалённые шрифты не загружаются: браузер использует доступные шрифты из выбранного стека. В исходном макете для заголовка страницы явно задан размер 36px, а для заголовка материала — 28px. Эти решения по композиции независимы от объявлений семейства и насыщенности шрифтов в самой теме. ### Используйте значения радиуса и интервалов из темы Образцы палитры используют --radius-base, поэтому форма углов меняется вместе с выбранной темой. В полном справочнике также показан --spacing. Во внешнем макете из двух колонок используется промежуток 24px; при ширине меньше 720px он перестраивается в одну колонку. Это исходные решения по композиции. Тема не определяет информационную архитектуру и не обязывает каждую страницу использовать одинаковую сетку. ## Состояние чтения и сброс оформления дизайн-системы Skeleton ### Сохраняйте состояние локально и с возможностью отмены Действие чтения переключает aria-pressed, меняет подпись и обновляет понятное сообщение о состоянии. Для этой страницы сохраняется только логическое значение в памяти. Учётной записи, постоянного хранения и сетевых запросов нет. Это состояние сохраняется при смене тем, позволяя читателю сравнивать один и тот же активный элемент в разных палитрах. ### Сбрасывайте оформление, не удаляя состояние чтения Сброс оформления возвращает тему Cerberus и светлый режим, намеренно не меняя сохранённое логическое значение. Подпись кнопки поясняет, что именно будет сброшено. Отдельное действие позволяет удалить карточку для чтения с локального экрана. Если объединить эти действия, безобидный сброс оформления неожиданно отменит текущий выбор пользователя. ## Нативный элемент раскрытия и реальный контент дизайн-системы Skeleton ### Используйте элемент details браузера Дополнительное пояснение оформлено настоящей структурой details/summary с утилитой раскрытия. Открытие с клавиатуры и указателем обеспечивает браузер, а Skeleton отвечает за оформление. Это не компонент Accordion для Svelte из Skeleton; компонент API и событие не имитируются. В абзаце подробно объясняется, что меняется, а что остаётся неизменным. ### Проверьте раскрытое состояние после завершения перехода Таблица стилей может анимировать изменение размера раскрывающегося элемента. Перед созданием снимка визуальная проверка дожидается завершения перехода: немедленный снимок может запечатлеть контент в процессе раскрытия. При проверке макета учитываются открытый абзац и длинный вычисленный стек шрифтов, чтобы боковая панель не считалась прошедшей проверку, пока её основное содержимое скрыто. ## Проверка тем на адаптивных экранах дизайн-системы Skeleton ### Сохраняйте читаемость значений на узких экранах При ширине меньше 720px рабочая область выстраивается в столбец, а внешние отступы уменьшаются до 16px. Каждое имя вычисленного токена и его значение размещаются в отдельной строке, поэтому длинные стеки шрифтов и строки OKLCH переносятся, не вызывая горизонтальной прокрутки. Пять образцов цветов остаются видны в компактной сетке, а элементы управления темами переносятся на следующие строки. ### Проверьте сочетания тем и состояний В тесте браузера сохраняют карточку для чтения, переключают темы на Mint и Rose, включают тёмное оформление, раскрывают блок, а затем сбрасывают оформление. Сохранённое состояние должно оставаться неизменным на протяжении всего сценария. Проверка выполнена вплоть до ширины 280px и охватывает реальные длинные значения и раскрытый контент, а не только снимок одной начальной темы. ## Полный исходный код Vite дизайн-системы Skeleton ### Сохраните все четыре исходных файла В примере есть файлы index.html, style.css, main.js и vite.config.mjs. Установите закреплённые зависимости Skeleton, Tailwind и Vite, затем запустите Vite в этой папке. Явное указание @source ссылается на HTML с классами утилит, чтобы в собранный результат вошли классы, используемые столом для чтения. Отсутствующий каркас фреймворка не требуется. ### При необходимости выбирайте компоненты для каждого фреймворка отдельно Для продукта, которому нужен компонент Skeleton Svelte или React, следует использовать соответствующий пакет для фреймворка и описанные для него инструкции по настройке. Этот пример на основе CSS пригодится для изучения общих тем и слоя утилит, но он не заявляет о той же API, что и эти компоненты. Учитывайте это различие, адаптируя предоставленное руководство для агента. ## Примеры компонентов дизайн-системы Skeleton ### index.html Полноценный текст для чтения, нативные компоненты CSS и оригинальные элементы управления. ``` Theme reading desk

SKELETON / THEME READING DESK

The same content, three themes.

Inspect actual Skeleton 5.0.1 palettes, surface pairings and native CSS components while keeping a complete reading card in view.

Original OpenDesign study
Reading / 4 minutes

Make the next step easier to see

A useful interface explains the next action without making every detail compete for attention. Start with a complete piece of content, then inspect how its hierarchy survives a change of theme.

  • Keep the heading clear in both appearances.
  • Use a supporting surface to group related information.
  • Repeat an important state in text, not color alone.

This reading card is not saved.

Uses Skeleton’s actual Tailwind CSS utilities and three shipped themes. The page logic is original plain JavaScript; no Skeleton Svelte or React component runtime is loaded. Saving changes this page only and sends nothing.

``` Справочник по коду - Храните все четыре исходных файла в одной папке проекта. ### style.css Импорты тем, вариант тёмного режима на основе классов и адаптивная композиция. ``` @import 'tailwindcss'; @import '@skeletonlabs/skeleton'; @import '@skeletonlabs/skeleton/themes/cerberus'; @import '@skeletonlabs/skeleton/themes/mint'; @import '@skeletonlabs/skeleton/themes/rose'; @source './index.html'; @custom-variant dark (&:where(.dark, .dark *)); body{margin:0}*{box-sizing:border-box}main{max-width:1080px;margin:auto;padding:32px}header{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;align-items:flex-start}h1{font-size:36px;line-height:1.15;font-weight:700;margin:16px 0}.intro{max-width:66ch;line-height:1.6}.controls{display:flex;gap:16px;align-items:end;flex-wrap:wrap;margin:32px 0}.controls label{display:grid;gap:8px}.workbench{display:grid;grid-template-columns:1.25fr 1fr;gap:24px}.reading{padding:32px}.reading h2{font-size:28px;line-height:1.25;font-weight:700}.reading p{line-height:1.7;margin:24px 0}.reading ul{list-style:disc;padding-left:24px}.reading li{margin:12px 0}.palette{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin:24px 0}.swatch{height:72px;border-radius:var(--radius-base)}.tokens{display:grid;gap:12px;font-size:13px}.tokens div{display:grid;gap:8px;padding-bottom:12px;border-bottom:1px solid currentColor}.tokens dd{overflow-wrap:anywhere}.side{padding:24px}.disclosure p{padding:16px;line-height:1.6}.scope{font-size:13px;line-height:1.6;margin-top:32px}.bookmark{margin-top:24px}#message{font-size:14px;margin-top:16px}:focus-visible{outline:3px solid var(--color-primary-500);outline-offset:3px}@media(max-width:720px){main{padding:16px}.workbench{grid-template-columns:1fr}.reading{padding:24px}.palette{gap:4px}.swatch{height:56px}} .workbench>*{min-width:0}.bookmark{max-width:100%;white-space:normal;height:auto;min-height:2rem;text-align:center}.disclosure summary{white-space:normal} ``` Справочник по коду - Храните все четыре исходных файла в одной папке проекта. ### main.js Просмотр вычисленных значений токенов и независимое управление состоянием чтения и оформления. ``` import './style.css'; const root=document.documentElement;let saved=false;function inspect(){const style=getComputedStyle(root);const keys=['--color-primary-500','--radius-base','--spacing','--typo-base--font-family'];document.querySelector('#tokens').replaceChildren(...keys.map(key=>{const row=document.createElement('div'),dt=document.createElement('dt'),dd=document.createElement('dd');dt.textContent=key;dd.textContent=style.getPropertyValue(key).trim();row.append(dt,dd);return row}));}document.querySelector('#theme').addEventListener('change',e=>{root.dataset.theme=e.target.value;inspect()});document.querySelector('#mode').addEventListener('click',e=>{let dark=root.classList.toggle('dark');e.currentTarget.textContent=dark?'Use light appearance':'Use dark appearance';inspect()});document.querySelector('#bookmark').addEventListener('click',e=>{saved=!saved;e.currentTarget.setAttribute('aria-pressed',String(saved));e.currentTarget.textContent=saved?'Remove from this reading desk':'Save to this reading desk';document.querySelector('#message').textContent=saved?'Saved in this preview only.':'This reading card is not saved.'});document.querySelector('#reset').addEventListener('click',()=>{root.dataset.theme='cerberus';root.classList.remove('dark');document.querySelector('#theme').value='cerberus';document.querySelector('#mode').textContent='Use dark appearance';inspect()});inspect(); ``` Справочник по коду - Храните все четыре исходных файла в одной папке проекта. ### vite.config.mjs Интеграция с настоящим компилятором Tailwind. ``` import{defineConfig}from'vite';import tailwindcss from'@tailwindcss/vite';export default defineConfig({plugins:[tailwindcss()],base:'./',build:{cssCodeSplit:false}}); ``` Справочник по коду - Храните все четыре исходных файла в одной папке проекта. ## Настройка агента для дизайн-системы Skeleton ### Отправная точка для реализации Сначала сохраните предоставленные четыре файла. Это слой утилит CSS, которому не нужны среда выполнения Svelte или React. ``` npm init -y npm install @skeletonlabs/skeleton@5.0.1 npm install --save-dev tailwindcss@4.3.3 @tailwindcss/vite@4.3.3 vite@8.3.2 npx vite --host 127.0.0.1 ``` ### Запрос для вашего проекта ``` Реализуйте полноценный стол для чтения Skeleton 5.0.1, используя настоящие утилиты CSS и импорты тем Cerberus/Mint/Rose. Сохраните тёмную цветовую схему на основе классов, удобочитаемые строки вычисленных токенов, весь контент, локально сохраняемое состояние и сброс оформления, не удаляющий это состояние. Чётко отделяйте слой CSS от API компонентов фреймворков. ``` ## Источники и область применения дизайн-системы Skeleton Настоящие утилиты Tailwind CSS из Skeleton и поставляемые темы, а также оригинальное поведение страницы на обычном JavaScript. Среды выполнения Svelte Skeleton и React не загружаются. - Установка Варианты интеграции CSS и фреймворков. - Темы Композиция и выбор тем. - Цвета Сочетания палитр и контрастности. - Тёмный режим Поведение цветовых схем и вариантов. - Раскрывающиеся блоки Нативный слой CSS на основе details/summary. ## Связанные ресурсы дизайн-системы Skeleton ### Tabler Нативный журнал проектов Tabler с актуальными переменными темы 1.6, карточками временной шкалы, контекстом таблицы данных, валидацией в модальном окне и композицией для светлой и тёмной тем, в которой можно сохранять локальные контрольные точки. ### Tamagui Изучите актуальные категории токенов Tamagui версии v5 и светлую и тёмную синие темы на примере полноценной доски привычек из нативных компонентов: с валидацией, прогрессом и восстановлением после пустого состояния. ### UIkit UIkit сочетает фреймворк CSS, настройку Less и компоненты JavaScript, управляемые атрибутами. Его Switcher, Accordion и адаптивная сетка вместе используются в приведённом ниже планировщике мастер-классов, показывая, где заканчивается встроенное поведение компонентов и начинается состояние выбора в приложении. - [Справочник по реализации](https://www.skeleton.dev/docs/svelte/design/themes) - [Источник](https://cdn.jsdelivr.net/npm/@skeletonlabs/skeleton@5.0.1/src/themes/cerberus.css) - [Источник](https://cdn.jsdelivr.net/npm/@skeletonlabs/skeleton@5.0.1/src/themes/mint.css) - [Источник](https://cdn.jsdelivr.net/npm/@skeletonlabs/skeleton@5.0.1/src/themes/rose.css) - [Источник](https://www.skeleton.dev/docs/svelte/get-started/fundamentals) - [Справочник по коду](https://www.skeleton.dev/docs/svelte/get-started/installation) - [Установка Варианты интеграции CSS и фреймворков.](https://www.skeleton.dev/docs/svelte/get-started/installation) - [Темы Композиция и выбор тем.](https://www.skeleton.dev/docs/svelte/design/themes) - [Цвета Сочетания палитр и контрастности.](https://www.skeleton.dev/docs/svelte/design/colors) - [Тёмный режим Поведение цветовых схем и вариантов.](https://www.skeleton.dev/docs/svelte/guides/mode) - [Раскрывающиеся блоки Нативный слой CSS на основе details/summary.](https://www.skeleton.dev/docs/svelte/tailwind-components/disclosures)