# Дизайн-система Europa Component Library

## Предпросмотр интерфейса дизайн-системы Europa Component Library

Открывайте отдельные заметки, раскрывайте или закрывайте все разделы и изучайте полную компоновку для чтения.

## Справочник по дизайну дизайн-системы Europa Component Library

Проверены таблица стилей @ecl/preset-ec 4.11.2 и исходный код Accordion. Нативное поведение и исходная реализация общего элемента управления явно различаются.

### Палитра EC и роли статусов

| Название / правило | Значение / конфигурация | Применение |
| --- | --- | --- |
| --ecl-color-primary | #3860ed | Опубликованные значения пресета EC. Фирменный синий отличается от основного цвета действий; цвета статусов не заменяют текстовые сообщения. |
| --ecl-color-primary-140 | #0f2fa2 | Опубликованные значения пресета EC. Фирменный синий отличается от основного цвета действий; цвета статусов не заменяют текстовые сообщения. |
| --ecl-color-secondary | #ffbe5c | Опубликованные значения пресета EC. Фирменный синий отличается от основного цвета действий; цвета статусов не заменяют текстовые сообщения. |
| --ecl-color-dark | #26324b | Опубликованные значения пресета EC. Фирменный синий отличается от основного цвета действий; цвета статусов не заменяют текстовые сообщения. |
| --ecl-color-info | #3860ed | Опубликованные значения пресета EC. Фирменный синий отличается от основного цвета действий; цвета статусов не заменяют текстовые сообщения. |
| --ecl-color-success | #24a148 | Опубликованные значения пресета EC. Фирменный синий отличается от основного цвета действий; цвета статусов не заменяют текстовые сообщения. |
| --ecl-color-error | #da1e28 | Опубликованные значения пресета EC. Фирменный синий отличается от основного цвета действий; цвета статусов не заменяют текстовые сообщения. |
| --ecl-color-warning | #f39811 | Опубликованные значения пресета EC. Фирменный синий отличается от основного цвета действий; цвета статусов не заменяют текстовые сообщения. |
| --ecl-color-background | #fcfcfc | Опубликованные значения пресета EC. Фирменный синий отличается от основного цвета действий; цвета статусов не заменяют текстовые сообщения. |
| --ecl-color-branding | #004494 | Опубликованные значения пресета EC. Фирменный синий отличается от основного цвета действий; цвета статусов не заменяют текстовые сообщения. |
| --ecl-color-neutral-20 | #f8f9fd | Опубликованные значения пресета EC. Фирменный синий отличается от основного цвета действий; цвета статусов не заменяют текстовые сообщения. |
| --ecl-color-neutral-60 | #e0e5f5 | Опубликованные значения пресета EC. Фирменный синий отличается от основного цвета действий; цвета статусов не заменяют текстовые сообщения. |
| --ecl-color-white | #fff | Опубликованные значения пресета EC. Фирменный синий отличается от основного цвета действий; цвета статусов не заменяют текстовые сообщения. |
### Шкала интервалов

| Название / правило | Значение / конфигурация | Применение |
| --- | --- | --- |
| --ecl-spacing-2xs | 0.25rem | Фактическая шкала в rem из зафиксированного пресета. Пользовательская композиция использует эти роли, не создавая новую институциональную шкалу. |
| --ecl-spacing-xs | 0.5rem | Фактическая шкала в rem из зафиксированного пресета. Пользовательская композиция использует эти роли, не создавая новую институциональную шкалу. |
| --ecl-spacing-s | 0.75rem | Фактическая шкала в rem из зафиксированного пресета. Пользовательская композиция использует эти роли, не создавая новую институциональную шкалу. |
| --ecl-spacing-m | 1rem | Фактическая шкала в rem из зафиксированного пресета. Пользовательская композиция использует эти роли, не создавая новую институциональную шкалу. |
| --ecl-spacing-l | 1.25rem | Фактическая шкала в rem из зафиксированного пресета. Пользовательская композиция использует эти роли, не создавая новую институциональную шкалу. |
| --ecl-spacing-xl | 1.5rem | Фактическая шкала в rem из зафиксированного пресета. Пользовательская композиция использует эти роли, не создавая новую институциональную шкалу. |
| --ecl-spacing-2xl | 2rem | Фактическая шкала в rem из зафиксированного пресета. Пользовательская композиция использует эти роли, не создавая новую институциональную шкалу. |
| --ecl-spacing-3xl | 2.5rem | Фактическая шкала в rem из зафиксированного пресета. Пользовательская композиция использует эти роли, не создавая новую институциональную шкалу. |
| --ecl-spacing-4xl | 3rem | Фактическая шкала в rem из зафиксированного пресета. Пользовательская композиция использует эти роли, не создавая новую институциональную шкалу. |
| --ecl-spacing-5xl | 3.5rem | Фактическая шкала в rem из зафиксированного пресета. Пользовательская композиция использует эти роли, не создавая новую институциональную шкалу. |
| --ecl-spacing-6xl | 4rem | Фактическая шкала в rem из зафиксированного пресета. Пользовательская композиция использует эти роли, не создавая новую институциональную шкалу. |
### Типографика и ширина строки

| Название / правило | Значение / конфигурация | Применение |
| --- | --- | --- |
| --ecl-font-family-default | arial,sans-serif | Полные значения сокращённой записи включают начертание, размер, высоту строки и запасной шрифт. Для экранного шрифта EC здесь используется Arial; пользовательский веб-шрифт не требуется. |
| --ecl-font-xs | normal normal 400 0.75rem/1.125rem arial,sans-serif | Полные значения сокращённой записи включают начертание, размер, высоту строки и запасной шрифт. Для экранного шрифта EC здесь используется Arial; пользовательский веб-шрифт не требуется. |
| --ecl-font-s | normal normal 400 0.875rem/1.125rem arial,sans-serif | Полные значения сокращённой записи включают начертание, размер, высоту строки и запасной шрифт. Для экранного шрифта EC здесь используется Arial; пользовательский веб-шрифт не требуется. |
| --ecl-font-m | normal normal 400 1rem/1.5rem arial,sans-serif | Полные значения сокращённой записи включают начертание, размер, высоту строки и запасной шрифт. Для экранного шрифта EC здесь используется Arial; пользовательский веб-шрифт не требуется. |
| --ecl-font-l | normal normal 400 1.25rem/1.75rem arial,sans-serif | Полные значения сокращённой записи включают начертание, размер, высоту строки и запасной шрифт. Для экранного шрифта EC здесь используется Arial; пользовательский веб-шрифт не требуется. |
| --ecl-font-xl | normal normal 400 1.5rem/2.25rem arial,sans-serif | Полные значения сокращённой записи включают начертание, размер, высоту строки и запасной шрифт. Для экранного шрифта EC здесь используется Arial; пользовательский веб-шрифт не требуется. |
| --ecl-font-2xl | normal normal 400 1.75rem/2.25rem arial,sans-serif | Полные значения сокращённой записи включают начертание, размер, высоту строки и запасной шрифт. Для экранного шрифта EC здесь используется Arial; пользовательский веб-шрифт не требуется. |
| --ecl-font-3xl | normal normal 400 2.5rem/2.75rem arial,sans-serif | Полные значения сокращённой записи включают начертание, размер, высоту строки и запасной шрифт. Для экранного шрифта EC здесь используется Arial; пользовательский веб-шрифт не требуется. |
| --ecl-font-4xl | normal normal 400 3.25rem/3.375rem arial,sans-serif | Полные значения сокращённой записи включают начертание, размер, высоту строки и запасной шрифт. Для экранного шрифта EC здесь используется Arial; пользовательский веб-шрифт не требуется. |
| --ecl-max-width | 80ch | Полные значения сокращённой записи включают начертание, размер, высоту строки и запасной шрифт. Для экранного шрифта EC здесь используется Arial; пользовательский веб-шрифт не требуется. |
### Контракт нативного аккордеона

| Название / правило | Значение / конфигурация | Применение |
| --- | --- | --- |
| Initialization | data-ecl-auto-init="Accordion" + ECL.autoInit() | Инициализирует компонент внутри пресета; обёртка для фреймворка не нужна. |
| Trigger | data-ecl-accordion-toggle | Нативный обработчик назначен кнопке в каждом заголовке. |
| Target | aria-controls matches a panel ID | Отсутствие целевых элементов вызывает ошибку; каждый ID должен быть уникальным. |
| Open state | aria-expanded + panel.hidden | Среда выполнения изменяет и семантику, и видимый контент. |
| Event | root.ECLAccordion.on("onToggle", callback) | Пример вычисляет количество раскрытых разделов после нативного переключения. |
| Event payload | { item, isOpening } | Элемент — это целевая панель, а не индекс массива или выбранная вкладка. |
| Independent panels | Several may be open together | Раскрытие всех разделов — исходное поведение приложения, активирующее нативные кнопки-триггеры. |
## Полное руководство по дизайн-системе Europa Component Library

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

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

## Дизайн-система Europa Component Library: выбор пресета Europa EC и версии

### Выберите EC или EU до импорта ресурсов

> В Europa предусмотрены отдельные институциональные пресеты. В этом примере намеренно используется @ecl/preset-ec версии 4.11.2, соответствующей документации EC по ссылке. Здесь не смешиваются разметка EU, устаревшие снимки экрана EC и таблица стилей без зафиксированной версии. Пакет содержит dist/styles/ecl-ec.css и dist/scripts/ecl-ec.js, поэтому статический пример можно обслуживать без добавления фронтенд-фреймворка.

- Для показанной здесь реализации EC используйте пресет EC.

- Используйте для CSS и JavaScript одну и ту же версию.

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

### Считайте это реализацией с фиксированной версией

В справочнике описана версия 4.11.2; это не утверждение, что во всех более поздних выпусках токены и поведение идентичны. При обновлении следует сверять выбранный пресет, разметку компонента и его инициализацию. Одного нового имени пакета или номера версии недостаточно, чтобы считать ранее скопированный шаблон по-прежнему корректным.

## Дизайн-система Europa Component Library: цветовые роли Europa и институциональная идентичность

### Не смешивайте фирменный цвет с цветом основного действия

В пресете фирменный цвет — #004494, а основной — #3860ed. В исходном описании фирменный цвет используется только в виде узкой верхней полосы, а для основного действия компонент применяет собственное оформление. Neutral-20 служит фоном страницы, а neutral-60 отделяет контент. Так сохраняется различие между институциональным акцентом и цветом интерактивного элемента управления.

### Не приписывайте примеру официальное значение

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

## Дизайн-система Europa Component Library: типографика и шкала отступов Europa

### Используйте полные значения сокращённой записи шрифта

В пресете EC шрифтом по умолчанию для экранов задан Arial. Роль m — это 1rem с высотой строки 1.5rem и начертанием 400; для более крупных ролей заданы собственные значения высоты строки. В справочнике приведены полные объявления, а не только отдельные размеры в пунктах. Начертание заголовка в этом исследовании — оригинальное стилистическое решение поверх заданной роли, тогда как текст компонентов оформляется нативной таблицей стилей.

### Покажите отступы в rem и ширину текстового блока

Шкала отступов включает значения 0.25, 0.5, 0.75, 1, 1.25, 1.5, 2, 2.5, 3, 3.5 и 4rem. Максимальная нативная ширина блока для чтения — 80ch. В исходной компоновке используется внешняя граница шириной 1080px по центру и адаптивные внутренние отступы, а каждый аккордеон сохраняет собственные отступы пресета. Внешняя ширина — решение по компоновке, а не новый официальный токен.

## Дизайн-система Europa Component Library: разметка аккордеона Europa и нативное поведение

### Свяжите кнопки заголовков с настоящими панелями

Каждый .ecl-accordion__item содержит заголовок с кнопкой .ecl-accordion__toggle. Её aria-controls указывает на соответствующую панель .ecl-accordion__content. В примере для каждого раздела задан постоянный ID кнопки, а для панели — aria-labelledby. Нативный скрипт находит целевой элемент по ID, изменяет aria-expanded и свойство hidden панели; при этом связи должны оставаться корректными, даже если элементы переставить или скопировать.

### Используйте явный индикатор без внешнего спрайта

В примере в классах native toggle-indicator размещены небольшие встроенные SVG-пути оригинальных значков плюса и минуса. Пресет определяет, какой из них отображается в раскрытом состоянии. Это простая оригинальная графика, не скопированная с институциональных логотипов. Благодаря этому пример полностью автономен и не требует загрузки спрайта из другого источника, при этом структура компонента сохраняется.

## Europa Component Library Аккордеон дизайн-системы Europa: события и поведение кнопки «Раскрыть все»

### Определяйте состояние по нативному компоненту

ECL.autoInit() предоставляет инициализированный компонент как root.ECLAccordion. Приложение подписывается на его событие onToggle и подсчитывает, у скольких кнопок-триггеров сейчас установлено aria-expanded="true". В данных события содержатся целевой элемент и свойство isOpening, полезные для обработки отдельных панелей. Состояние не определяется по видимому тексту и не хранится в отдельном массиве.

### Обеспечьте предсказуемость группового действия

Если все панели раскрыты, групповое действие закрывает их; в противном случае оно раскрывает все панели. Обработчик нажимает только те нативные кнопки, состояние которых нужно изменить. Он не изменяет hidden или aria-expanded напрямую, поэтому нативные события и вычисляемое количество остаются согласованными. Текст кнопки меняется с «Раскрыть все разделы» на «Свернуть все разделы», сообщая о следующем действии.

## Europa Component Library Клавиатурная навигация и последовательное чтение в дизайн-системе Europa

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

Клавиша Tab переводит фокус на кнопку в заголовке, а Enter или пробел активирует её согласно нативному поведению кнопок в браузере. Это аккордеон, а не список вкладок, поэтому не следует добавлять навигацию стрелками по аналогии со вкладками. Несколько панелей могут оставаться открытыми, что удобно для сравнения заметок. Индикатор фокуса задаётся таблицей стилей компонента и остаётся видимым на светлом фоне.

### Сохраняйте текст читаемым без JavaScript

В исходном HTML все панели видимы, а aria-expanded="true". После успешной нативной инициализации приложение сворачивает их, активируя соответствующие кнопки. Поэтому при отключённом JavaScript текст остаётся видимым, а неактивная панель групповых действий скрывается стилем no-js. Работу этого запасного варианта проверяли по фактической видимости, а не только по наличию абзацев в исходном коде.

## Europa Component Library Адаптивные панели и длинный контент в дизайн-системе Europa

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

В документе не задана фиксированная высота аккордеона. Раскрытые заметки могут увеличиваться, чтобы вместить заголовки, нумерованные списки и выделенное примечание с решением. На небольших экранах исходные внешние отступы уменьшаются, а для заголовка используется меньший предусмотренный стиль текста. Длинный текст кнопки-триггера переносится, а индикатор остаётся видимым. Проверка проводилась при ширине 280px, а также на экранах настольных компьютеров, планшетов и телефонов.

### Не превращайте элементы управления чтением в процесс утверждения

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

## Europa Component Library Полная статическая настройка дизайн-системы Europa

### Установите соответствующий пресет и сохраните все файлы

В поставляемом index.html таблица стилей закреплённого пресета и скрипт для браузера загружаются до ecl-app.js. Сохраните рядом с ним файлы ecl.css и ecl-app.js и откройте папку через HTTP-сервер. Весь контент, SVG-индикаторы и обработчики состояний включены. Для этого примера не требуется скрытая инфраструктура приложения или отдельная загрузка значков.

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

2. Сохраните index.html, ecl.css и ecl-app.js вместе.

3. Запустите сервер в этой папке и проверьте переключение отдельных панелей и всех сразу.

4. Повторите проверку с клавиатуры, на узком экране и при отключённом JavaScript.

### Упростите проверку обновлений компонентов

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

## Europa Component Library Примеры компонентов дизайн-системы Europa

### ecl-index.html — полный исходный код

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

```
<!doctype html><html lang="en" class="no-js"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Public conversation brief</title><link rel="stylesheet" href="./node_modules/@ecl/preset-ec/dist/styles/ecl-ec.css"><link rel="stylesheet" href="./ecl.css"></head><body><main><header class="mast"><p class="eyebrow">European Commission preset / original study</p><h1>A clear brief for a public conversation</h1><p>Explore three preparation notes with native ECL expandable sections and an explicit open-all control.</p></header><p class="scope">ECL EC 4.11.2 CSS and native Accordion runtime. Original OpenDesign sample text; this is not an EU service, funding programme or legal guide.</p><div class="toolbar"><p id="count" role="status">0 of 3 sections open</p><button id="all" type="button" class="ecl-button ecl-button--secondary">Open all sections</button></div><div class="ecl-accordion" data-ecl-accordion data-ecl-auto-init="Accordion"><section class="ecl-accordion__item"><h2 class="ecl-accordion__title"><button class="ecl-accordion__toggle" data-ecl-accordion-toggle aria-controls="purpose" aria-expanded="true" id="toggle-purpose" type="button"><span class="ecl-accordion__toggle-flex"><span class="ecl-accordion__toggle-title">Define the purpose before collecting information</span><span class="ecl-accordion__toggle-indicator"><svg class="ecl-accordion__toggle-icon" aria-hidden="true" viewBox="0 0 24 24"><path d="M11 3h2v8h8v2h-8v8h-2v-8H3v-2h8z"/></svg><svg class="ecl-accordion__toggle-icon" aria-hidden="true" viewBox="0 0 24 24"><path d="M3 11h18v2H3z"/></svg></span></span></button></h2><div class="ecl-accordion__content" id="purpose" role="region" aria-labelledby="toggle-purpose"><p>This fictional planning note describes a small community consultation. It is sample editorial content, not an EU funding call, legal requirement or official application process.</p><h3>Make a decision possible</h3><ol><li>State which decision the conversation will inform.</li><li>List information already available before asking participants for more.</li><li>Name what remains outside the consultation.</li></ol><aside class="decision"><h3>Keep the outcome proportionate</h3><p>A short conversation may support a next step; it does not by itself prove consent, eligibility or public support.</p></aside></div></section><section class="ecl-accordion__item"><h2 class="ecl-accordion__title"><button class="ecl-accordion__toggle" data-ecl-accordion-toggle aria-controls="participation" aria-expanded="true" id="toggle-participation" type="button"><span class="ecl-accordion__toggle-flex"><span class="ecl-accordion__toggle-title">Make participation understandable and accessible</span><span class="ecl-accordion__toggle-indicator"><svg class="ecl-accordion__toggle-icon" aria-hidden="true" viewBox="0 0 24 24"><path d="M11 3h2v8h8v2h-8v8h-2v-8H3v-2h8z"/></svg><svg class="ecl-accordion__toggle-icon" aria-hidden="true" viewBox="0 0 24 24"><path d="M3 11h18v2H3z"/></svg></span></span></button></h2><div class="ecl-accordion__content" id="participation" role="region" aria-labelledby="toggle-participation"><p>Give participants enough context to decide whether and how to take part. The invitation should explain the topic, expected duration, available formats and the use of any notes.</p><h3>Provide usable alternatives</h3><ol><li>Offer a plain-language explanation of the activity.</li><li>Allow a person to contribute without speaking to the whole group.</li><li>Explain how to ask for an accessible format.</li></ol><aside class="decision"><h3>Check the invitation itself</h3><p>A technically accessible page is only one part of participation. Timing, language and the route for asking a question also affect who can join.</p></aside></div></section><section class="ecl-accordion__item"><h2 class="ecl-accordion__title"><button class="ecl-accordion__toggle" data-ecl-accordion-toggle aria-controls="record" aria-expanded="true" id="toggle-record" type="button"><span class="ecl-accordion__toggle-flex"><span class="ecl-accordion__toggle-title">Record decisions and unresolved questions separately</span><span class="ecl-accordion__toggle-indicator"><svg class="ecl-accordion__toggle-icon" aria-hidden="true" viewBox="0 0 24 24"><path d="M11 3h2v8h8v2h-8v8h-2v-8H3v-2h8z"/></svg><svg class="ecl-accordion__toggle-icon" aria-hidden="true" viewBox="0 0 24 24"><path d="M3 11h18v2H3z"/></svg></span></span></button></h2><div class="ecl-accordion__content" id="record" role="region" aria-labelledby="toggle-record"><p>After the session, distinguish what was agreed from what still needs investigation. A clean record helps the next reader understand how a proposal changed and why.</p><h3>Prepare a readable follow-up</h3><ol><li>Write the next action with an owner and review date.</li><li>Make open questions visible alongside conclusions.</li><li>Invite participants to correct an inaccurate summary.</li></ol><aside class="decision"><h3>Avoid a false completion signal</h3><p>Closing these panels is a reading action only. This preview sends no consultation response and records no formal approval.</p></aside></div></section></div><p class="footer">Each heading is a native button. Use Tab to move between headings and Enter or Space to toggle; several sections can remain open. Without JavaScript the notes remain readable.</p></main><script src="./node_modules/@ecl/preset-ec/dist/scripts/ecl-ec.js"></script><script src="./ecl-app.js"></script></body></html>
```

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

- Сохраните файл HTML под именем index.html, а имена остальных предоставленных файлов оставьте без изменений.

### ecl.css — полный исходный код

Оригинальная адаптивная компоновка на основе нативных стилей компонентов ECL.

```
*{box-sizing:border-box}body{margin:0;background:var(--ecl-color-neutral-20);font:var(--ecl-font-m);color:var(--ecl-color-dark)}main{max-width:1080px;margin:auto;padding:40px}.mast{border-top:6px solid var(--ecl-color-branding);padding:32px;background:white}.eyebrow{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--ecl-color-primary-140)}h1{font:var(--ecl-font-3xl);font-weight:700;margin:16px 0;max-width:22ch}.mast p{max-width:72ch}.scope{font:var(--ecl-font-s);margin:24px 0;max-width:90ch}.toolbar{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;margin:32px 0 16px}.toolbar p{margin:0}.ecl-accordion{background:white}.ecl-accordion__toggle-title{padding-right:16px}.ecl-accordion__toggle-icon{width:24px;height:24px}.ecl-accordion__content p:first-child{margin-top:0}.ecl-accordion__content ol,.ecl-accordion__content ul{padding-left:24px}.ecl-accordion__content li{margin:8px 0}.ecl-accordion__content h3{font-size:18px;line-height:1.4}.decision{border-left:4px solid var(--ecl-color-secondary);padding:16px;background:var(--ecl-color-neutral-20);margin:24px 0}.footer{font:var(--ecl-font-s);margin-top:24px;border-top:1px solid var(--ecl-color-neutral-60);padding-top:24px}.no-js .toolbar{display:none}@media(max-width:600px){main{padding:16px}.mast{padding:24px}h1{font:var(--ecl-font-2xl);font-weight:700}.ecl-accordion__toggle{overflow-wrap:anywhere}}
```

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

- Сохраните файл HTML под именем index.html, а имена остальных предоставленных файлов оставьте без изменений.

### ecl-app.js — полный исходный код

Нативная инициализация и групповое управление по событиям; исходный HTML остаётся читаемым.

```
document.documentElement.classList.remove('no-js');ECL.autoInit();const root=document.querySelector('[data-ecl-accordion]');const buttons=[...root.querySelectorAll('[data-ecl-accordion-toggle]')];const all=document.querySelector('#all');function sync(){let open=buttons.filter(b=>b.getAttribute('aria-expanded')==='true').length;document.querySelector('#count').textContent=open+' of '+buttons.length+' sections open';all.textContent=open===buttons.length?'Close all sections':'Open all sections';}root.ECLAccordion.on('onToggle',sync);buttons.forEach(b=>b.click());all.addEventListener('click',()=>{let close=buttons.every(b=>b.getAttribute('aria-expanded')==='true');buttons.filter(b=>(b.getAttribute('aria-expanded')==='true')===close).forEach(b=>b.click());});sync();
```

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

- Сохраните файл HTML под именем index.html, а имена остальных предоставленных файлов оставьте без изменений.

## Europa Component Library Настройка агента для дизайн-системы Europa

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

Откройте http://localhost:8000/. В примере используется пресет EC; дополнительно загружать значки или шрифты не требуется.

```
npm init -y
npm install @ecl/preset-ec@4.11.2
# Save index.html, ecl.css and ecl-app.js from the supplied examples.
python3 -m http.server 8000
```

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

```
Реализуйте предоставленный бриф по аккордеону ECL EC 4.11.2, используя все три полных файла. Сохраните нативные связи кнопок и панелей, подсчёт на основе onToggle, логику группового раскрытия и сворачивания, активацию кнопок с клавиатуры, возможность читать без JavaScript и явное указание на оригинальный демонстрационный контент. Не представляйте пример как официальный сервис ЕС или формальную подачу.
```

## Europa Component Library Источники и область применения дизайн-системы Europa

Руководство по приложению OpenDesign для ECL EC 4.11.2. Оригинальные демонстрационные заметки и компоновка страницы не относятся к сервису Европейской комиссии, программе финансирования или юридическому требованию.

- Начало работы с EC Ресурсы пресета и настройка реализации.

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

- Роли цветов Основная, фирменная, нейтральная и статусная палитры.

- Закреплённая таблица стилей пресета Точные значения, используемые в этом примере.

## Europa Component Library Связанные ресурсы дизайн-системы Europa

### gov.cz дизайн-система

Изучите настоящие цветовые роли, слоты карточек и нативную пагинацию Gov Design System CE на примере полноценного инструментария для чтения шести ресурсов с явным управлением фокусом и состоянием страницы.

### GOV.UK дизайн-система

Создайте путь в стиле GOV.UK: ответьте на вопросы и проверьте ответы. Используйте актуальную типографическую шкалу v6, адаптивные отступы, функциональные цвета, связанную валидацию и конкретный пример интеграции Frontend.

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

Изучите HarvardSites как редакционную платформу: сравните стили сайтов, выберите документированные сочетания шрифтов и соберите университетские страницы из специализированных компонентов контента.


- [Справочник по реализации](https://ec.europa.eu/component-library/v4.11.2/ec/components/accordion/usage/)
- [Источник](https://ec.europa.eu/component-library/v4.11.2/ec/guidelines/colours/)
- [Источник](https://ec.europa.eu/component-library/v4.11.2/ec/guidelines/spacing/)
- [Источник](https://ec.europa.eu/component-library/v4.11.2/ec/guidelines/typography/)
- [Источник](https://cdn.jsdelivr.net/npm/@ecl/vanilla-component-accordion@4.11.2/accordion.js)
- [Справочник по коду](https://ec.europa.eu/component-library/v4.11.2/ec/getting-started/)
- [Начало работы с EC Ресурсы пресета и настройка реализации.](https://ec.europa.eu/component-library/v4.11.2/ec/getting-started/)
- [Рекомендации по аккордеону Контекст и рекомендации по использованию компонента.](https://ec.europa.eu/component-library/v4.11.2/ec/components/accordion/usage/)
- [Роли цветов Основная, фирменная, нейтральная и статусная палитры.](https://ec.europa.eu/component-library/v4.11.2/ec/guidelines/colours/)
- [Закреплённая таблица стилей пресета Точные значения, используемые в этом примере.](https://cdn.jsdelivr.net/npm/@ecl/preset-ec@4.11.2/dist/styles/ecl-ec.css)
