# Europa Component Library デザインシステム

## Europa Component Library デザインシステムのインターフェースプレビュー

各項目のメモを開き、セクションをすべて展開または閉じて、記事全体のレイアウトを確認できます。

## Europa Component Library デザインシステムのデザインリファレンス

@ecl/preset-ec 4.11.2のスタイルシートとアコーディオンのソースを確認済みです。標準の動作と、独自に構成した一括操作コントロールは明確に区別しています。

### 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 で、カスタム Web フォントは不要です。 |
| --ecl-font-xs | normal normal 400 0.75rem/1.125rem arial,sans-serif | 完全なショートハンド値には、ウェイト、サイズ、行の高さ、フォールバックが含まれます。ここで扱う EC 画面用フォントは Arial で、カスタム Web フォントは不要です。 |
| --ecl-font-s | normal normal 400 0.875rem/1.125rem arial,sans-serif | 完全なショートハンド値には、ウェイト、サイズ、行の高さ、フォールバックが含まれます。ここで扱う EC 画面用フォントは Arial で、カスタム Web フォントは不要です。 |
| --ecl-font-m | normal normal 400 1rem/1.5rem arial,sans-serif | 完全なショートハンド値には、ウェイト、サイズ、行の高さ、フォールバックが含まれます。ここで扱う EC 画面用フォントは Arial で、カスタム Web フォントは不要です。 |
| --ecl-font-l | normal normal 400 1.25rem/1.75rem arial,sans-serif | 完全なショートハンド値には、ウェイト、サイズ、行の高さ、フォールバックが含まれます。ここで扱う EC 画面用フォントは Arial で、カスタム Web フォントは不要です。 |
| --ecl-font-xl | normal normal 400 1.5rem/2.25rem arial,sans-serif | 完全なショートハンド値には、ウェイト、サイズ、行の高さ、フォールバックが含まれます。ここで扱う EC 画面用フォントは Arial で、カスタム Web フォントは不要です。 |
| --ecl-font-2xl | normal normal 400 1.75rem/2.25rem arial,sans-serif | 完全なショートハンド値には、ウェイト、サイズ、行の高さ、フォールバックが含まれます。ここで扱う EC 画面用フォントは Arial で、カスタム Web フォントは不要です。 |
| --ecl-font-3xl | normal normal 400 2.5rem/2.75rem arial,sans-serif | 完全なショートハンド値には、ウェイト、サイズ、行の高さ、フォールバックが含まれます。ここで扱う EC 画面用フォントは Arial で、カスタム Web フォントは不要です。 |
| --ecl-font-4xl | normal normal 400 3.25rem/3.375rem arial,sans-serif | 完全なショートハンド値には、ウェイト、サイズ、行の高さ、フォールバックが含まれます。ここで扱う EC 画面用フォントは Arial で、カスタム Web フォントは不要です。 |
| --ecl-max-width | 80ch | 完全なショートハンド値には、ウェイト、サイズ、行の高さ、フォールバックが含まれます。ここで扱う EC 画面用フォントは Arial で、カスタム Web フォントは不要です。 |
### ネイティブアコーディオンの仕様

| 名前 / ルール | 値 / 設定 | 用途 |
| --- | --- | --- |
| 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 には、機関ごとに異なるプリセットがあります。この例では、リンク先の EC ドキュメントに対応する @ecl/preset-ec の 4.11.2 を使用します。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 です。元のブリーフでは、ブランドカラーを細い上部のラインにのみ使用し、コンポーネントには専用のプライマリアクションのスタイルを適用しています。ニュートラル-20 はページの背景に、ニュートラル-60 はコンテンツの区切りに使用します。これにより、機関を示すアクセントカラーと、操作可能なコントロールの色を区別できます。

### サンプルに公式の意味を付与しない

このページはOpenDesignの検討用サンプルで、架空の相談記録を掲載しています。欧州委員会のロゴはなく、資金募集、サービス、法的要件を示すものではありません。エラー、警告、成功のパレット項目は実際のトークンとして記載していますが、すべての色を表示するためだけに、架空の処理成功メッセージを生成することはありません。

## Europa Component Library デザインシステム Europa のタイポグラフィとスペーシングのスケール

### 完全なフォントのショートハンド値を使う

EC プリセットでは、画面表示のデフォルトフォントに Arial を定義しています。m の役割は、ウェイト 400、1rem、行の高さ 1.5rem です。より大きな役割には、それぞれ固有の行の高さが設定されています。このリファレンスでは、単独のポイントサイズだけでなく、宣言全体を示しています。このサンプルの見出しのウェイトは、提供された役割に独自の強調を加えたものです。コンポーネントのテキストは引き続きネイティブのスタイルシートが制御します。

### 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 と panel.hidden を変更します。項目を並べ替えたりコピーしたりしても、これらの関連付けが正しく保たれるようにしてください。

### 外部スプライトを使わず、明示的なインジケーターを用意する

この例では、ネイティブの toggle-indicator クラス内に、独自の簡潔なプラス記号とマイナス記号のインライン SVG パスを配置しています。展開状態でどちらを表示するかは、プリセットが制御します。これらは独自のシンプルな図形であり、機関のロゴを複製したものではありません。コンポーネントの構造を保ちながら、例全体を単独で動作させ、クロスオリジンのスプライト読み込みを避けられます。

## Europa Component Library デザインシステム Europa のアコーディオンイベントとすべて開く動作

### ネイティブコンポーネントから状態を算出する

ECL.autoInit() によって、初期化済みコンポーネントが root.ECLAccordion として公開されます。アプリケーションはその onToggle イベントをリッスンし、現在 aria-expanded="true" になっているトリガーボタンの数を算出します。イベントのペイロードには対象項目と isOpening が含まれ、パネルごとの処理に役立ちます。表示テキストから状態を推測したり、別の開閉状態配列を管理したりすることなく、数を求められます。

### 一括操作の動作を予測しやすくする

すべてのパネルが開いている場合、一括操作ですべて閉じます。それ以外の場合は、すべて開きます。ハンドラーは、状態を変更する必要があるネイティブボタンのみを有効にします。hidden や aria-expanded を直接変更しないため、ネイティブイベントとそこから算出する件数の整合性が保たれます。次の操作が伝わるよう、コントロールのラベルは Open all sections と Close all sections の間で切り替わります。

## Europa Component Library デザインシステム Europa のキーボード操作と段階的な読み進め方

### 通常のボタン操作を使う

Tabキーで見出しボタンにフォーカスし、EnterキーまたはSpaceキーでブラウザー標準のボタン動作により開閉します。これはアコーディオンであり、タブリストではありません。タブリストにならって矢印キーでの移動を追加しないでください。複数のパネルを同時に開いたままにできるため、メモを比較できます。フォーカスインジケーターはコンポーネントのスタイルシートで設定され、明るい背景でも見える状態を保ちます。

### 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 デザインシステムのコンポーネント例

### 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 デザインシステムのエージェント設定

### 実装の出発点

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 のアコーディオン仕様を、3つの完全なファイルすべてを使って実装してください。ネイティブなトリガーとパネルの関連付け、onToggle によるカウント、一括開閉の動作、キーボードによるボタン操作、JavaScript が無効でも読めること、サンプルの本来の範囲が明示されていることを維持してください。公式の EU サービスや正式な申請であるかのように示さないでください。
```

## Europa Component Library デザインシステムの情報源と適用範囲

ECL EC 4.11.2 向けの OpenDesign アプリケーションガイドです。オリジナルのサンプルメモとページ構成は、欧州委員会のサービス、資金助成の募集、法的要件を示すものではありません。

- EC のスタートガイド プリセットのアセットと実装のセットアップ。

- アコーディオンのガイダンス コンポーネントの背景情報と使用方法のリファレンス。

- 色の役割 プライマリー、ブランド、ニュートラル、ステータスのカラーパレット。

- バージョンを固定したプリセットのスタイルシート この例で使用している正確な値。

## Europa Component Library デザインシステムの関連リソース

### gov.cz デザインシステム

6つのリソースを通じて、Gov Design System CEで実際に使われている色の役割、カードのスロット、ネイティブのページネーションを、フォーカスとページ状態を明示しながら詳しく見ていきます。

### GOV.UK デザインシステム

GOV.UK のような質問回答・回答確認のフローを構築します。最新の v6 タイプスケール、レスポンシブな余白、用途に応じた色、連動する入力検証、具体的なフロントエンド連携を備えています。

### 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)
