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

## Дизайн-система Ontario Предпросмотр интерфейса

Раскройте все этапы, сверните их и перейдите прямо к дополнительному разделу.

## Дизайн-система Ontario Справочник по дизайну

Дизайн-токены Ontario и complete-styles 9.1.0; фактические пути экспортов пакета, SCSS аккордеона и опубликованный скрипт проверены локально.

### Цвета текста, поверхностей и взаимодействия

| Название / правило | Значение / конфигурация | Применение |
| --- | --- | --- |
| --ontario-colour-greyscale-white | #FFFFFF | Фактический экспорт токена из версии 9.1.0. Скомпилированный компонент CSS преобразует эти роли в значения; один импорт токена не создаёт компонент. |
| --ontario-colour-greyscale-black | #1A1A1A | Фактический экспорт токена из версии 9.1.0. Скомпилированный компонент CSS преобразует эти роли в значения; один импорт токена не создаёт компонент. |
| --ontario-colour-greyscale-greyscale5 | #F2F2F2 | Фактический экспорт токена из версии 9.1.0. Скомпилированный компонент CSS преобразует эти роли в значения; один импорт токена не создаёт компонент. |
| --ontario-colour-greyscale-greyscale20 | #CCCCCC | Фактический экспорт токена из версии 9.1.0. Скомпилированный компонент CSS преобразует эти роли в значения; один импорт токена не создаёт компонент. |
| --ontario-colour-system-link | #0066CC | Фактический экспорт токена из версии 9.1.0. Скомпилированный компонент CSS преобразует эти роли в значения; один импорт токена не создаёт компонент. |
| --ontario-colour-system-link-hover | #00478F | Фактический экспорт токена из версии 9.1.0. Скомпилированный компонент CSS преобразует эти роли в значения; один импорт токена не создаёт компонент. |
| --ontario-colour-system-link-active | #002142 | Фактический экспорт токена из версии 9.1.0. Скомпилированный компонент CSS преобразует эти роли в значения; один импорт токена не создаёт компонент. |
| --ontario-colour-system-link-visited | #551A8B | Фактический экспорт токена из версии 9.1.0. Скомпилированный компонент CSS преобразует эти роли в значения; один импорт токена не создаёт компонент. |
| --ontario-colour-system-focus | #009ADB | Фактический экспорт токена из версии 9.1.0. Скомпилированный компонент CSS преобразует эти роли в значения; один импорт токена не создаёт компонент. |
| --ontario-colour-system-alert | #CD0000 | Фактический экспорт токена из версии 9.1.0. Скомпилированный компонент CSS преобразует эти роли в значения; один импорт токена не создаёт компонент. |
| --ontario-colour-system-success | #118847 | Фактический экспорт токена из версии 9.1.0. Скомпилированный компонент CSS преобразует эти роли в значения; один импорт токена не создаёт компонент. |
| --ontario-colour-system-information | #1080A6 | Фактический экспорт токена из версии 9.1.0. Скомпилированный компонент CSS преобразует эти роли в значения; один импорт токена не создаёт компонент. |
### Шкала интервалов

| Название / правило | Значение / конфигурация | Применение |
| --- | --- | --- |
| --ontario-spacing-0 | 0 | Опубликованные значения отступов в rem; spacing-5 равен 1.5rem, поэтому суффикс не соответствует значению в пикселях напрямую. |
| --ontario-spacing-1 | 0.25rem | Опубликованные значения отступов в rem; spacing-5 равен 1.5rem, поэтому суффикс не соответствует значению в пикселях напрямую. |
| --ontario-spacing-2 | 0.5rem | Опубликованные значения отступов в rem; spacing-5 равен 1.5rem, поэтому суффикс не соответствует значению в пикселях напрямую. |
| --ontario-spacing-3 | 0.75rem | Опубликованные значения отступов в rem; spacing-5 равен 1.5rem, поэтому суффикс не соответствует значению в пикселях напрямую. |
| --ontario-spacing-4 | 1rem | Опубликованные значения отступов в rem; spacing-5 равен 1.5rem, поэтому суффикс не соответствует значению в пикселях напрямую. |
| --ontario-spacing-5 | 1.5rem | Опубликованные значения отступов в rem; spacing-5 равен 1.5rem, поэтому суффикс не соответствует значению в пикселях напрямую. |
| --ontario-spacing-6 | 2rem | Опубликованные значения отступов в rem; spacing-5 равен 1.5rem, поэтому суффикс не соответствует значению в пикселях напрямую. |
| --ontario-spacing-7 | 2.5rem | Опубликованные значения отступов в rem; spacing-5 равен 1.5rem, поэтому суффикс не соответствует значению в пикселях напрямую. |
| --ontario-spacing-8 | 3rem | Опубликованные значения отступов в rem; spacing-5 равен 1.5rem, поэтому суффикс не соответствует значению в пикселях напрямую. |
| --ontario-spacing-9 | 4rem | Опубликованные значения отступов в rem; spacing-5 равен 1.5rem, поэтому суффикс не соответствует значению в пикселях напрямую. |
| --ontario-spacing-10 | 5rem | Опубликованные значения отступов в rem; spacing-5 равен 1.5rem, поэтому суффикс не соответствует значению в пикселях напрямую. |
### Справочник по типографике и сетке

| Название / правило | Значение / конфигурация | Применение |
| --- | --- | --- |
| --ontario-font-sizes-small | 0.875rem | Опубликованное значение токена; значения сетки без единиц измерения описывают исходную систему, и их нужно интерпретировать в контексте соответствующей реализации сетки. |
| --ontario-font-sizes-standard-body-text | 1rem | Опубликованное значение токена; значения сетки без единиц измерения описывают исходную систему, и их нужно интерпретировать в контексте соответствующей реализации сетки. |
| --ontario-font-sizes-large | 1.25rem | Опубликованное значение токена; значения сетки без единиц измерения описывают исходную систему, и их нужно интерпретировать в контексте соответствующей реализации сетки. |
| --ontario-font-sizes-x-large | 1.5rem | Опубликованное значение токена; значения сетки без единиц измерения описывают исходную систему, и их нужно интерпретировать в контексте соответствующей реализации сетки. |
| --ontario-breakpoints-small | 40em | Опубликованное значение токена; значения сетки без единиц измерения описывают исходную систему, и их нужно интерпретировать в контексте соответствующей реализации сетки. |
| --ontario-breakpoints-medium | 73em | Опубликованное значение токена; значения сетки без единиц измерения описывают исходную систему, и их нужно интерпретировать в контексте соответствующей реализации сетки. |
| --ontario-grid-columns-total-columns | 12 | Опубликованное значение токена; значения сетки без единиц измерения описывают исходную систему, и их нужно интерпретировать в контексте соответствующей реализации сетки. |
| --ontario-grid-columns-row-width | 1152 | Опубликованное значение токена; значения сетки без единиц измерения описывают исходную систему, и их нужно интерпретировать в контексте соответствующей реализации сетки. |
| --ontario-grid-columns-column-gutter | 32 | Опубликованное значение токена; значения сетки без единиц измерения описывают исходную систему, и их нужно интерпретировать в контексте соответствующей реализации сетки. |
## Дизайн-система Ontario Полное руководство

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

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

## Дизайн-система Ontario Экспорты пакета и стили компонентов

### Используйте полный пакет стилей осознанно

> В примере зафиксирована версия @ongov/ontario-design-system-complete-styles 9.1.0 и используется опубликованный скрипт раскрытия и сворачивания. Это реализация на основе HTML/CSS, а не отдельная среда выполнения веб-компонентов Ontario. Карта экспортов пакета предоставляет скомпилированную тему по пути styles/css/compiled/ontario-theme.min.css; в современном сборщике не сработает предположительный глубокий импорт с дополнительным префиксом dist.

### Подключите стили аккордеона

В проверенном пакете версии 9.1.0 скомпилированная тема не содержит селекторов аккордеона, которые используются в этом примере. Поэтому страница подключает правила, скомпилированные из собственного файла пакета ontario-accordion.scss, входящего в предоставленный CSS. Скрипт скопирован из опубликованного каталога dist/scripts, поскольку этот глубокий путь JavaScript не экспортируется. Это конкретные требования к сборке, а не необязательная визуальная полировка.

## Дизайн-система Ontario Типографика и иерархия Ontario

### Сохраняйте предусмотренное сочетание шрифтов

В опубликованной теме для заголовков используется Raleway Modified, а для обычного текста — Open Sans. В предварительный просмотр включены начертания 400 и 700, используемые на странице. Это позволяет сохранить характерную форму заголовков и не зависеть от удалённых шрифтов. Проверять типографику следует после загрузки шрифтов: при отображении шрифтами-заменителями могут измениться переносы строк и относительная насыщенность заголовков аккордеона.

### Упростите обзор этапов

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

## Дизайн-система Ontario Цветовые роли и признаки компонентов

### Разделите функции ссылок и фокуса

В экспортированной палитре для ссылок используется цвет #0066CC, а для состояний при наведении, активации и посещения заданы отдельные цвета. Для фокуса используется #009ADB. В аккордеоне сочетаются видимая подпись, направленная иконка и состояние раскрытия; одного синего текста недостаточно, чтобы объяснить его поведение. Серая граница разделяет этапы, не превращая каждый абзац в отдельную карточку.

### Используйте опубликованную шкалу отступов

Таблица отступов включает значения от нуля до пяти ремов и именованные промежуточные шаги. В примере использована авторская двухколоночная компоновка с официальными правилами компонента. Точка адаптации 760px выбрана для композиции этого встроенного руководства и не обозначена как новая точка адаптации Ontario. Официальные точки адаптации отдельно приведены в справочной таблице.

## Дизайн-система Ontario Структура и состояние аккордеона

### Свяжите каждую кнопку с её содержимым

Для каждого этапа предусмотрен заголовок с настоящей кнопкой. Атрибут aria-controls указывает на единственную секцию содержимого с уникальным идентификатором, а aria-expanded описывает, открыта ли эта секция. В содержимом есть ссылка на кнопку через aria-labelledby. Встроенный скрипт синхронизирует классы компонента и атрибут aria-hidden при открытии и закрытии панели. Повторяющийся ID нарушит эту связь, даже если визуально макет выглядит правильно.

- Используйте уникальные идентификаторы кнопок и содержимого.

- Оберните настоящую интерактивную кнопку заголовком.

- Согласуйте разметку с логикой видимости в скрипте для выбранной версии.

### Синхронизируйте элементы управления всеми этапами

Команды «Раскрыть все» и «Свернуть все» управляют тремя панелями этапов одновременно. Каждой панелью также можно управлять отдельно. В примере используется разметка, поддерживаемая закреплённой версией скрипта, а не более новая разметка сайта — например, поведение hidden-until-found, которое закреплённый скрипт не отменяет. Страница документации может развиваться независимо от установленного выпуска; исполняемый пример должен соответствовать реальному пакету.

## Дизайн-система Ontario Ссылка на начальный этап и важная информация

### Открывайте этап настоящей кнопкой

Ссылки на боковой панели указывают на этап, а если он закрыт — вызывают его встроенную кнопку. После открытия фокус перемещается на кнопку. Благодаря этому атрибут expanded у кнопки, класс заголовка и видимость содержимого меняются согласованно. Дополнительный обработчик относится к коду приложения; он приведён полностью, чтобы читатель мог воспроизвести поведение.

### Добавляйте полезную информацию, которую стоит раскрыть

Три подготовленных этапа посвящены подготовке, материалам и дальнейшим действиям для небольшого семинара. В каждом указаны конкретные действия и пояснён охват примера. В настоящем приглашении цель мероприятия, условия доступа и сведения о подключении всё равно должны быть указаны напрямую. Этот шаблон помогает структурировать подробное руководство; не следует скрывать важную информацию только ради того, чтобы сделать страницу короче.

## Дизайн-система Ontario Полный исходный код и проверка

### Воспроизведите пример для выбранной версии

Создайте проект Vite на чистом JavaScript, установите закреплённый пакет complete-styles и скопируйте его скрипт раскрытия и сворачивания в src. Сохраните переданные main.js и ontario.css, не удаляя корневой элемент монтирования. CSS включает официальные правила аккордеона, скомпилированные для этого выпуска, и чётко отмеченные авторские правила макета. Для этой реализации HTML не нужны ни регистрация компонентов, ни серверная служба.

1. Установите закреплённый пакет complete-styles.

2. Скопируйте его скрипт раскрытия и сворачивания и сохраните полный файл входной точки и CSS.

3. Раскройте все панели, затем сверните их и откройте один из этапов по ссылке.

4. Проверьте фокус клавиатуры, атрибуты expanded и отображение на телефоне.

### Проверьте поведение ссылок и групповых команд

Проверьте открытие каждого этапа, сворачивание всех панелей и повторное открытие среднего этапа по ссылке на боковой панели. Убедитесь, что состояние expanded кнопки соответствует видимости содержимого. Повторите проверку на экране телефона, где боковая панель располагается после руководства. Локальная проверка также подтверждает загрузку шрифтов, отсутствие горизонтальной прокрутки и ошибок браузера при работе встроенного скрипта.

## Дизайн-система Ontario Примеры компонентов дизайн-системы

### main.js — полное руководство по семинару

Полный авторский контент, импорт опубликованного скрипта и поведение при открытии по ссылке.

```
import '@ongov/ontario-design-system-complete-styles/styles/css/compiled/ontario-theme.min.css';
import './ontario-expand-collapse.js';
import './ontario.css';
const topics=[['Plan the session','Make the purpose clear before people arrive.',['Publish the topic, duration and format in plain language.','Explain how participants can ask about access needs.','Tell people whether any preparation is optional or required.'],'In this sample workshop, participants discuss one familiar interface and identify one improvement. No personal information or application account is needed.'],['Prepare the materials','Offer content in a form people can use during and after the session.',['Use a meaningful heading structure in documents.','Give diagrams a concise written explanation.','Provide an accessible alternative to an activity that depends on dragging or precise pointer movement.'],'A simple agenda and an editable notes document are enough for this authored example. A real organizer should confirm the tools and formats with participants.'],['Follow up clearly','Make the next action explicit without overstating what has been agreed.',['Separate decisions from ideas that still need investigation.','State who owns any agreed follow-up.','Share notes through the channel agreed with participants.'],'This local example does not email participants or store a registration. It demonstrates the relationship between persistent guidance and expandable supporting content.']];
const icon=(dir)=>`<svg class="ontario-icon" aria-hidden="true" focusable="false" viewBox="0 0 24 24"><path d="${dir==='up'?'M6 15l6-6 6 6':'M6 9l6 6 6-6'}" fill="none" stroke="currentColor" stroke-width="2.4"/></svg>`;
document.getElementById('root').innerHTML=`<main><p class="kicker">ONTARIO DESIGN SYSTEM / ORIGINAL CONTENT STUDY</p><h1>Run an inclusive workshop</h1><p class="ontario-lead-statement">Use this sample guide to prepare a small design discussion. Expand a stage for supporting details, or open all stages to read them together.</p><div class="layout"><section aria-labelledby="guide-heading"><h2 id="guide-heading">Workshop stages</h2><div class="ontario-accordions__container"><div class="ontario-accordion__controls"><button class="ontario-accordion__button--expand-all" aria-expanded="false"><span class="ontario-accordion--expand-open-all">Expand all</span><span class="ontario-accordion--expand-close-all">Collapse all</span></button></div>${topics.map(([title,intro,items,note],i)=>`<div class="ontario-accordion" id="stage-${i}"><h3 class="ontario-accordion-heading"><button class="ontario-accordion__button" id="stage-button-${i}" aria-controls="stage-content-${i}" aria-expanded="false" data-toggle="ontario-collapse"><span class="ontario-accordion__button-icon--close">${icon('up')}</span><span class="ontario-accordion__button-icon--open">${icon('down')}</span>${title}</button></h3><section class="ontario-accordion__content" id="stage-content-${i}" aria-labelledby="stage-button-${i}" aria-hidden="true" data-toggle="ontario-expander-content"><p>${intro}</p><ul>${items.map(x=>'<li>'+x+'</li>').join('')}</ul><p>${note}</p></section></div>`).join('')}</div></section><aside><h2>Keep the essentials visible</h2><p>Session purpose, access arrangements and joining instructions belong in the main invitation. Do not hide them inside a collapsed guide.</p><h3>Jump to a stage</h3><ul class="jump">${topics.map(([title],i)=>`<li><a class="stage-link" href="#stage-${i}">${title}</a></li>`).join('')}</ul><p class="note">Published Ontario 9.1.0 styles and expand/collapse script, with original content and composition. This is not an official service page.</p></aside></div></main>`;

// Drive linked opening through the native button so its ARIA state stays synchronized.
document.querySelectorAll(".stage-link").forEach(link=>link.addEventListener("click",()=>{const button=document.querySelector(link.hash+" .ontario-accordion__button");if(button.getAttribute("aria-expanded")!=="true")button.click();button.focus()}));
```

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

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

### ontario.css — скомпилированный аккордеон и авторский макет

Правила аккордеона из официальной версии 9.1.0 и авторская адаптивная компоновка.

```
/* Accordion rules compiled from Ontario 9.1.0 published SCSS. */
.ontario-accordion__button--expand-all:focus,.ontario-accordion__button:focus{box-shadow:0 0 0 4px #009adb;outline:4px solid rgba(0,0,0,0);transition:box-shadow .1s ease-in-out}.ontario-accordion__button{font-style:normal;font-weight:700;text-rendering:optimizeLegibility;margin-bottom:1rem;font-feature-settings:normal;font-family:"Raleway Modified","Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif}.ontario-accordion__button{font-size:1.25rem;letter-spacing:.03rem;line-height:1.5;margin:0 0 .75rem 0;max-width:48rem}@media screen and (min-width: 40em){.ontario-accordion__button{font-size:1.5rem;letter-spacing:.0313rem;line-height:1.5}}.ontario-accordions__container{max-width:48rem;width:100%}.ontario-accordion{border-top:2px solid #ccc}.ontario-accordion:last-of-type{border-bottom:2px solid #ccc}.ontario-accordion__controls{display:flex;justify-content:flex-end}.ontario-accordion__button,.ontario-accordion__button--expand-all{background:none;border:0;box-sizing:border-box}.ontario-accordion__button--expand-all{font-size:1rem;margin-bottom:.5rem;color:#06c;cursor:pointer}.ontario-accordion__button--expand-all:focus,.ontario-accordion__button--expand-all:hover{color:#00478f;text-decoration:underline}.ontario-accordion__button--expand-all:active{color:#002142;text-decoration:underline}.ontario-accordion--expand-close-all{display:none}.ontario-accordion__controls--active .ontario-accordion--expand-close-all{display:block}.ontario-accordion__controls--active .ontario-accordion--expand-open-all{display:none}.ontario-accordion__button{display:flex;align-items:flex-start;color:#06c;cursor:pointer;padding:.75rem .5rem;text-align:left;width:100%;margin-bottom:0}.ontario-accordion__button .ontario-accordion__button-icon--close,.ontario-accordion__button .ontario-accordion__button-icon--open{margin-right:.5rem}.ontario-accordion__button .ontario-icon{width:1.75rem;height:1.75rem}.ontario-accordion__button:focus,.ontario-accordion__button:hover{background-color:hsl(0,0%,95%);color:#00478f}.ontario-accordion__button:focus{box-shadow:0 0 0 4px #009adb inset}.ontario-accordion__button:active{color:#002142}.ontario-accordion__content{display:none;padding:.75rem .75rem 2rem .75rem;margin-left:0}@media screen and (min-width: 40em){.ontario-accordion__content{margin-left:2rem}}.ontario-accordion__content *{margin-top:0;max-width:48rem;width:100%}.ontario-accordion__content ul,.ontario-accordion__content ol{max-width:calc(100% - 3rem)}.ontario-accordion__content>:last-child{margin-bottom:0}.ontario-accordion__button-icon--close,.ontario-expander--active .ontario-accordion__button-icon--open{display:none}.ontario-expander--active~.ontario-accordion__content,.ontario-expander--active .ontario-accordion__button-icon--close{display:block}.ontario-accordions__container .ontario-h1,.ontario-accordions__container .ontario-h2,.ontario-accordions__container .ontario-h3,.ontario-accordions__container .ontario-h4,.ontario-accordions__container .ontario-h5,.ontario-accordions__container p,.ontario-accordions__container h1,.ontario-accordions__container h2,.ontario-accordions__container h3,.ontario-accordions__container h4,.ontario-accordions__container h5,.ontario-accordions__container h6{margin:0}

/* Original composition. */
main{max-width:1200px;padding:32px;margin:auto}.kicker{font-size:14px;font-weight:700;letter-spacing:.04em}h1{max-width:24ch}.ontario-lead-statement{max-width:65ch}.layout{display:grid;grid-template-columns:1.7fr 1fr;gap:48px;margin-top:40px}aside{padding:24px;border-top:4px solid #1a1a1a;background:#f2f2f2;align-self:start}aside h2{font-size:26px;line-height:1.35;margin-top:0}aside h3{font-size:20px}.jump{padding-left:24px}.jump li{margin-bottom:16px}.note{font-size:16px;line-height:1.5}.ontario-accordion__content p+ul{margin-top:16px}.ontario-accordion__content ul+p{margin-top:16px}@media(max-width:760px){main{padding:20px}.layout{grid-template-columns:1fr;gap:32px}h1{font-size:36px}}
```

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

- Для этого закреплённого выпуска необходимы и скомпилированная тема, и таблица стилей для компонента аккордеона.

## Дизайн-система Ontario Настройка агента

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

В предварительном просмотре используется тот же опубликованный скрипт аккордеона и локальные файлы шрифтов. В примере не загружается отдельная библиотека веб-компонентов.

```
npm create vite@latest ontario-guide -- --template vanilla
cd ontario-guide
npm install
npm install @ongov/ontario-design-system-complete-styles@9.1.0
cp node_modules/@ongov/ontario-design-system-complete-styles/dist/scripts/ontario-expand-collapse.js src/ontario-expand-collapse.js
# Replace src/main.js and add src/ontario.css. Keep <div id="root"></div>.
npm run dev
```

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

```
Создайте руководство по семинару Ontario на основе complete-styles 9.1.0 и соответствующего ему скрипта аккордеона. Подключите таблицу стилей для компонента аккордеона CSS, настоящие шрифты Raleway Modified и Open Sans, доступные идентификаторы кнопок и содержимого, а также синхронизированное раскрытие и сворачивание. Оставьте важную информацию видимой и направляйте ссылки на этапы через встроенные кнопки.
```

## Дизайн-система Ontario Источники и область применения

Руководство по семинару, составленное с помощью OpenDesign и оформленное в стилях Ontario 9.1.0 с опубликованным скриптом раскрытия и сворачивания. Контент и композиция страницы созданы авторами; это не официальная страница сервиса.

- Рекомендации по аккордеону Контент, разметка и модель раскрытия.

- Настройка пакета Роли пакетов и варианты интеграции.

- Цветовая система Цвета для взаимодействий и семантические цвета.

- Опубликованный исходный код для выбранной версии Опубликованные стили, экспорт токенов и реализация аккордеона.

## Дизайн-система Ontario Связанные ресурсы

### Poncho

Изучите сетку Bootstrap 3 в Poncho, семантические цвета действий и полностью кликабельные панели услуг на примере работающего каталога мероприятий.

### Queensland Government дизайн-система

Изучите реализацию Bootstrap в Queensland на примере полноценного иллюстрированного выбора ресурсов с реальными ролями темы, встроенным оформлением флажков и доступным диалогом проверки.

### Ripple

Изучите реальные цветовые роли Ripple, шкалу отступов из 14 шагов и ссылки на адаптивную типографику на примере полноценного расписания семинара с последовательным раскрытием информации, индикатором выполнения и переходом к следующему шагу с клавиатуры.


- [Справочник по реализации](https://designsystem.ontario.ca/components/detail/accordions.html)
- [Источник](https://github.com/ongov/ontario-design-system)
- [Справочник по коду](https://designsystem.ontario.ca/components/detail/accordions.html)
- [Справочник по коду](https://github.com/ongov/ontario-design-system)
- [Рекомендации по аккордеону Контент, разметка и модель раскрытия.](https://designsystem.ontario.ca/components/detail/accordions.html)
- [Настройка пакета Роли пакетов и варианты интеграции.](https://designsystem.ontario.ca/docs/documentation/develop/npm-packages.html)
- [Цветовая система Цвета для взаимодействий и семантические цвета.](https://designsystem.ontario.ca/components/detail/colours.html)
- [Опубликованный исходный код для выбранной версии Опубликованные стили, экспорт токенов и реализация аккордеона.](https://github.com/ongov/ontario-design-system)