# Europa Component Library Tasarım Sistemi

## Europa Component Library Tasarım Sistemi Arayüz Önizlemesi

Tek tek notları açın, tüm bölümleri genişletip daraltın ve okuma düzeninin tamamını inceleyin.

## Europa Component Library Tasarım Sistemi Tasarım Başvurusu

Doğrulanmış @ecl/preset-ec 4.11.2 stil sayfası ve Akordeon kaynak kodu. Yerel davranış ile özgün toplu denetim bileşimi açıkça birbirinden ayrılmıştır.

### EC paleti ve durum rolleri

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| --ecl-color-primary | #3860ed | Yayımlanmış EC ön ayarı değerleri. Marka mavisi, birincil eylem renginden farklıdır; durum renkleri yazılı iletilerin yerini almaz. |
| --ecl-color-primary-140 | #0f2fa2 | Yayımlanmış EC ön ayarı değerleri. Marka mavisi, birincil eylem renginden farklıdır; durum renkleri yazılı iletilerin yerini almaz. |
| --ecl-color-secondary | #ffbe5c | Yayımlanmış EC ön ayarı değerleri. Marka mavisi, birincil eylem renginden farklıdır; durum renkleri yazılı iletilerin yerini almaz. |
| --ecl-color-dark | #26324b | Yayımlanmış EC ön ayarı değerleri. Marka mavisi, birincil eylem renginden farklıdır; durum renkleri yazılı iletilerin yerini almaz. |
| --ecl-color-info | #3860ed | Yayımlanmış EC ön ayarı değerleri. Marka mavisi, birincil eylem renginden farklıdır; durum renkleri yazılı iletilerin yerini almaz. |
| --ecl-color-success | #24a148 | Yayımlanmış EC ön ayarı değerleri. Marka mavisi, birincil eylem renginden farklıdır; durum renkleri yazılı iletilerin yerini almaz. |
| --ecl-color-error | #da1e28 | Yayımlanmış EC ön ayarı değerleri. Marka mavisi, birincil eylem renginden farklıdır; durum renkleri yazılı iletilerin yerini almaz. |
| --ecl-color-warning | #f39811 | Yayımlanmış EC ön ayarı değerleri. Marka mavisi, birincil eylem renginden farklıdır; durum renkleri yazılı iletilerin yerini almaz. |
| --ecl-color-background | #fcfcfc | Yayımlanmış EC ön ayarı değerleri. Marka mavisi, birincil eylem renginden farklıdır; durum renkleri yazılı iletilerin yerini almaz. |
| --ecl-color-branding | #004494 | Yayımlanmış EC ön ayarı değerleri. Marka mavisi, birincil eylem renginden farklıdır; durum renkleri yazılı iletilerin yerini almaz. |
| --ecl-color-neutral-20 | #f8f9fd | Yayımlanmış EC ön ayarı değerleri. Marka mavisi, birincil eylem renginden farklıdır; durum renkleri yazılı iletilerin yerini almaz. |
| --ecl-color-neutral-60 | #e0e5f5 | Yayımlanmış EC ön ayarı değerleri. Marka mavisi, birincil eylem renginden farklıdır; durum renkleri yazılı iletilerin yerini almaz. |
| --ecl-color-white | #fff | Yayımlanmış EC ön ayarı değerleri. Marka mavisi, birincil eylem renginden farklıdır; durum renkleri yazılı iletilerin yerini almaz. |
### Boşluk ölçeği

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| --ecl-spacing-2xs | 0.25rem | Sabitlenmiş ön ayardaki gerçek rem tabanlı ölçek. Özgün bileşim, farklı bir kurumsal ölçek uydurmadan bu rolleri kullanır. |
| --ecl-spacing-xs | 0.5rem | Sabitlenmiş ön ayardaki gerçek rem tabanlı ölçek. Özgün bileşim, farklı bir kurumsal ölçek uydurmadan bu rolleri kullanır. |
| --ecl-spacing-s | 0.75rem | Sabitlenmiş ön ayardaki gerçek rem tabanlı ölçek. Özgün bileşim, farklı bir kurumsal ölçek uydurmadan bu rolleri kullanır. |
| --ecl-spacing-m | 1rem | Sabitlenmiş ön ayardaki gerçek rem tabanlı ölçek. Özgün bileşim, farklı bir kurumsal ölçek uydurmadan bu rolleri kullanır. |
| --ecl-spacing-l | 1.25rem | Sabitlenmiş ön ayardaki gerçek rem tabanlı ölçek. Özgün bileşim, farklı bir kurumsal ölçek uydurmadan bu rolleri kullanır. |
| --ecl-spacing-xl | 1.5rem | Sabitlenmiş ön ayardaki gerçek rem tabanlı ölçek. Özgün bileşim, farklı bir kurumsal ölçek uydurmadan bu rolleri kullanır. |
| --ecl-spacing-2xl | 2rem | Sabitlenmiş ön ayardaki gerçek rem tabanlı ölçek. Özgün bileşim, farklı bir kurumsal ölçek uydurmadan bu rolleri kullanır. |
| --ecl-spacing-3xl | 2.5rem | Sabitlenmiş ön ayardaki gerçek rem tabanlı ölçek. Özgün bileşim, farklı bir kurumsal ölçek uydurmadan bu rolleri kullanır. |
| --ecl-spacing-4xl | 3rem | Sabitlenmiş ön ayardaki gerçek rem tabanlı ölçek. Özgün bileşim, farklı bir kurumsal ölçek uydurmadan bu rolleri kullanır. |
| --ecl-spacing-5xl | 3.5rem | Sabitlenmiş ön ayardaki gerçek rem tabanlı ölçek. Özgün bileşim, farklı bir kurumsal ölçek uydurmadan bu rolleri kullanır. |
| --ecl-spacing-6xl | 4rem | Sabitlenmiş ön ayardaki gerçek rem tabanlı ölçek. Özgün bileşim, farklı bir kurumsal ölçek uydurmadan bu rolleri kullanır. |
### Tipografi ve okuma genişliği

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| --ecl-font-family-default | arial,sans-serif | Eksiksiz kısa yazım değerleri; ağırlık, boyut, satır yüksekliği ve yedek yazı tipini içerir. Buradaki EC arayüzü Arial kullanır; özel bir web yazı tipi gerekmez. |
| --ecl-font-xs | normal normal 400 0.75rem/1.125rem arial,sans-serif | Eksiksiz kısa yazım değerleri; ağırlık, boyut, satır yüksekliği ve yedek yazı tipini içerir. Buradaki EC arayüzü Arial kullanır; özel bir web yazı tipi gerekmez. |
| --ecl-font-s | normal normal 400 0.875rem/1.125rem arial,sans-serif | Eksiksiz kısa yazım değerleri; ağırlık, boyut, satır yüksekliği ve yedek yazı tipini içerir. Buradaki EC arayüzü Arial kullanır; özel bir web yazı tipi gerekmez. |
| --ecl-font-m | normal normal 400 1rem/1.5rem arial,sans-serif | Eksiksiz kısa yazım değerleri; ağırlık, boyut, satır yüksekliği ve yedek yazı tipini içerir. Buradaki EC arayüzü Arial kullanır; özel bir web yazı tipi gerekmez. |
| --ecl-font-l | normal normal 400 1.25rem/1.75rem arial,sans-serif | Eksiksiz kısa yazım değerleri; ağırlık, boyut, satır yüksekliği ve yedek yazı tipini içerir. Buradaki EC arayüzü Arial kullanır; özel bir web yazı tipi gerekmez. |
| --ecl-font-xl | normal normal 400 1.5rem/2.25rem arial,sans-serif | Eksiksiz kısa yazım değerleri; ağırlık, boyut, satır yüksekliği ve yedek yazı tipini içerir. Buradaki EC arayüzü Arial kullanır; özel bir web yazı tipi gerekmez. |
| --ecl-font-2xl | normal normal 400 1.75rem/2.25rem arial,sans-serif | Eksiksiz kısa yazım değerleri; ağırlık, boyut, satır yüksekliği ve yedek yazı tipini içerir. Buradaki EC arayüzü Arial kullanır; özel bir web yazı tipi gerekmez. |
| --ecl-font-3xl | normal normal 400 2.5rem/2.75rem arial,sans-serif | Eksiksiz kısa yazım değerleri; ağırlık, boyut, satır yüksekliği ve yedek yazı tipini içerir. Buradaki EC arayüzü Arial kullanır; özel bir web yazı tipi gerekmez. |
| --ecl-font-4xl | normal normal 400 3.25rem/3.375rem arial,sans-serif | Eksiksiz kısa yazım değerleri; ağırlık, boyut, satır yüksekliği ve yedek yazı tipini içerir. Buradaki EC arayüzü Arial kullanır; özel bir web yazı tipi gerekmez. |
| --ecl-max-width | 80ch | Eksiksiz kısa yazım değerleri; ağırlık, boyut, satır yüksekliği ve yedek yazı tipini içerir. Buradaki EC arayüzü Arial kullanır; özel bir web yazı tipi gerekmez. |
### Yerel akordeon sözleşmesi

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| Initialization | data-ecl-auto-init="Accordion" + ECL.autoInit() | Bu bileşeni ön ayarın içinde başlatır; çerçeve sarmalayıcısı gerekmez. |
| Trigger | data-ecl-accordion-toggle | Yerel dinleyici her başlık düğmesine eklenir. |
| Target | aria-controls matches a panel ID | Hedeflerin bulunmaması hataya yol açar; her kimlik benzersiz kalmalıdır. |
| Open state | aria-expanded + panel.hidden | Çalışma zamanı hem anlam bilgisini hem de görünür içeriği değiştirir. |
| Event | root.ECLAccordion.on("onToggle", callback) | Örnek, yerel bir geçişten sonra açık bölüm sayısını hesaplar. |
| Event payload | { item, isOpening } | Öğe, bir dizi indeksi veya seçili sekme değil, hedef paneldir. |
| Independent panels | Several may be open together | Tümünü aç, yerel tetikleyici düğmeleri etkinleştiren özgün bir uygulama davranışıdır. |
## Europa Component Library Tasarım Sistemi Eksiksiz Kılavuzu

Bu sistemi gerçek bir arayüz için seçmeye, uygulamaya ve gözden geçirmeye yönelik pratik bir kılavuz.

Eksiksiz yönlendirme, uygulama için başlangıç noktası ve kaynak bağlantıları.

## Europa Component Library Tasarım Sistemi Europa EC Ön Ayarı ve Sürüm Seçimi

### Varlıkları içe aktarmadan önce EC veya EU’yu seçin

> Europa, kurumlara özel ayrı ön ayarlar sunar. Bu örnekte, bağlantısı verilen EC belgeleriyle uyumlu olan @ecl/preset-ec 4.11.2 özellikle kullanılmıştır. EU işaretlemesi, geçmiş EC ekran görüntüleri ve sürümü sabitlenmemiş bir stil sayfası bir arada kullanılmaz. Paket, dist/styles/ecl-ec.css ve dist/scripts/ecl-ec.js dosyalarını sağlar; böylece statik örnek, ön yüz çatısı eklenmeden sunulabilir.

- Burada gösterilen EC uygulaması için EC ön ayarını kullanın.

- CSS ve JavaScript sürümlerini aynı tutun.

- Akordeon öğelerini yeniden kullanırken kaynak kimliklerini benzersiz tutun.

### Bunu sürümlenmiş bir uygulama olarak ele alın

Başvuru 4.11.2 sürümünü açıklar; sonraki tüm sürümlerin aynı belirteçlere veya davranışlara sahip olduğu iddiasında bulunmaz. Yükseltme sırasında seçilen ön ayarı, bileşen işaretlemesini ve başlatma işlemini birlikte karşılaştırın. Yalnızca yeni bir paket adı veya sürüm numarası, daha önce kopyalanmış bir örüntünün doğru çalışmaya devam ettiğini kanıtlamaz.

## Europa Component Library Tasarım Sistemi Europa Renk Rolleri ve Kurumsal Kimlik

### Marka rengini birincil eylem renginden ayrı tutun

Ön ayarın marka rengi #004494, birincil rengi ise #3860ed’dir. Özgün bilgilendirme metninde marka rengi yalnızca üstte dar bir şerit olarak kullanılır; ardından bileşen kendi birincil eylem rengini kullanır. Neutral-20 sayfa arka planını sağlar, neutral-60 ise içeriği bölümlere ayırır. Böylece kurumsal vurgu rengi ile etkileşimli bir denetimin rengi arasındaki ayrım korunur.

### Örnek için resmî bir anlam uydurmayın

Sayfa, kurgusal danışma notları içeren bir OpenDesign çalışmasıdır. Avrupa Komisyonu logosu içermez; bir fon çağrısını, hizmeti veya yasal gerekliliği temsil etmez. Hata, uyarı ve başarı paleti değerleri gerçek belirteçler olarak listelenmiştir; ancak önizleme, sırf tüm renkleri göstermek için yapay bir uygulama başarı iletisi oluşturmaz.

## Europa Component Library Tasarım Sistemi Europa Tipografisi ve Boşluk Ölçeği

### Eksiksiz yazı tipi kısa yazım değerlerini kullanın

EC ön ayarı, varsayılan ekran yazı tipi olarak Arial’ı tanımlar. m rolü, 400 ağırlığında 1,5rem satır yüksekliğine sahip 1rem’dir; daha büyük rollerin kendi satır yükseklikleri vardır. Başvuru, yalnızca tek başına punto değerleri yerine eksiksiz bildirimler içerir. Çalışmadaki başlık ağırlığı, sağlanan rolün üzerine uygulanan özgün bir vurgu tercihidir; bileşen metni ise yerel stil sayfasının denetiminde kalır.

### rem tabanlı boşlukları ve içerik genişliğini görünür tutun

Boşluk dizisi 0.25, 0.5, 0.75, 1, 1.25, 1.5, 2, 2.5, 3, 3.5 ve 4rem değerlerini içerir. Yerel azami okuma genişliği 80ch’dir. Özgün yerleşimde 1080px genişliğinde, ortalanmış bir dış sınır ve duyarlı iç boşluk kullanılır; her akordeon ise ön ayarın kendi boşluklarını korur. Dış genişlik bir bileşim tercihidir, yeni bir resmî belirteç değildir.

## Europa Component Library Tasarım Sistemi Europa Akordeon İşaretlemesi ve Yerel Davranış

### Başlık düğmelerini gerçek panelleri denetleyecek şekilde ayarlayın

Her .ecl-accordion__item, .ecl-accordion__toggle düğmesini içeren bir başlık barındırır. Bu düğmenin aria-controls değeri eşleşen .ecl-accordion__content panelini gösterir. Örnekte her bölge için sabit bir tetikleyici kimliği ve aria-labelledby bulunur. Yerel betik hedefi kimliğine göre bulur, aria-expanded değerini değiştirir ve panel.hidden özelliğini günceller. Öğeler yeniden sıralanır veya kopyalanırsa bu ilişkiler doğru kalmalıdır.

### Harici bir sprite kullanmadan açık bir gösterge kullanın

Örnekte, yerel toggle-indicator sınıfları içinde küçük ve özgün artı ve eksi SVG yolları bulunur. Genişletilmiş durumda hangisinin görüntüleneceğini preset belirler. Bunlar, kurumsal logolardan kopyalanmamış, özgün ve basit geometrik şekillerdir. Bileşenin yapısını korurken örneğin tümüyle kendi kendine yeterli olmasını sağlar ve kaynaklar arası sprite yüklemesini önler.

## Europa Component Library tasarım sistemi Europa Tasarım Sistemi Akordeon Etkinlikleri ve Tümünü Açma Davranışı

### Durumu yerel bileşenden alın

ECL.autoInit(), başlatılan bileşeni root.ECLAccordion olarak sunar. Uygulama, onToggle etkinliğini dinler ve aria-expanded="true" değerine sahip tetikleyici düğmelerin sayısını hesaplar. Etkinlik yükünde hedef öğe ve tek tek panelleri yönetirken yararlı olan isOpening bilgisi bulunur. Sayı, görünür metinden tahmin edilmez ve ikinci, bağımsız bir açık durum dizisi tutulmaz.

### Toplu işlemi öngörülebilir tutun

Tüm paneller açıksa toplu işlem onları kapatır; aksi durumda hepsini açar. İşleyici yalnızca durumu değişmesi gereken yerel düğmeleri etkinleştirir. hidden veya aria-expanded değerlerini kendisi ayarlamaz; böylece yerel etkinlikler ve hesaplanan sayı tutarlı kalır. Denetimin etiketi, bir sonraki işlemi belirtmek için Tüm bölümleri aç ile Tüm bölümleri kapat arasında değişir.

## Europa Component Library tasarım sistemi Europa Tasarım Sistemi Klavye Kullanımı ve Kademeli Okuma

### Düğmelerin normal etkileşimini kullanın

Sekme tuşu başlık düğmesine odaklanır; Enter veya Boşluk tuşu, düğmenin yerel tarayıcı davranışıyla düğmeyi etkinleştirir. Bu bir akordeondur, sekme listesi değil; benzetme yoluyla ok tuşlarıyla sekme gezinme davranışı eklenmemelidir. Karşılaştırmayı desteklemek için birden fazla panel açık kalabilir. Odak göstergesi, bileşen stil sayfasından gelir ve açık renkli yüzeyde görünür kalır.

### Metni JavaScript olmadan da okunabilir tutun

Kaynak HTML, tüm paneller görünür ve aria-expanded="true" olarak başlar. Yerel başlatma başarıyla tamamlandıktan sonra uygulama, düğmelerini etkinleştirerek panelleri kapatır. Bu nedenle JavaScript devre dışıyken metin görünür kalır ve etkin olmayan toplu işlem araç çubuğu no-js stiliyle gizlenir. Bu yedek davranış, paragrafların kaynakta bulunup bulunmadığına bakılarak değil, gerçekten görünür olup olmadıkları kontrol edilerek test edilmiştir.

## Europa Component Library tasarım sistemi Europa Tasarım Sistemi Duyarlı Paneller ve Uzun İçerik

### Doğal yüksekliğe ve satır kaydırmaya izin verin

Belgede akordeon için sabit bir yükseklik kullanılmaz. Genişletilen notlar; başlıkları, sıralı listeleri ve vurgulanmış bir karar notunu içerecek şekilde uzayabilir. Daha küçük ekranlarda dış dolgu küçülür ve manşet, sağlanan daha küçük bir tipografi rolünü kullanır. Gösterge yerinde kalırken uzun tetikleyici metin satırlara bölünür. Bu durum masaüstü, tablet ve telefon genişliklerinin yanı sıra 280px genişlikte de kontrol edilmiştir.

### Okuma denetimlerini bir onay akışına dönüştürmeyin

Bir paneli açmak veya kapatmak yalnızca sunumu değiştirir. Sayaç, tamamlanan bölümleri veya karşılanan gereksinimleri değil, açık bölümlerin sayısını gösterir. Altbilgi, herhangi bir danışma yanıtı veya resmî onay gönderilmediğini belirtir. Gerçek bir hizmetin, hiçbiri bileşen demosunda varsayılmayan kendine özgü uygunluk, kalıcılık ve arka uç davranışlarına ihtiyacı olur.

## Europa Component Library tasarım sistemi Europa Tasarım Sistemi Eksiksiz Statik Kurulum

### Eşleşen preset'i yükleyin ve tüm dosyaları kaydedin

Sağlanan index.html dosyası, sabitlenmiş preset stil sayfasını ve tarayıcı betiğini ecl-app.js dosyasından önce yükler. Eşlik eden ecl.css ve ecl-app.js dosyalarını aynı klasöre kaydedip klasörü HTTP üzerinden sunun. Tüm içerik, gösterge SVG'leri ve durum işleyicileri dosyalara dahildir. Bu çalışma için gizli bir uygulama iskeleti veya ayrı bir simge indirmesi gerekmez.

1. Sabitlenmiş EC preset'ini yükleyin.

2. index.html, ecl.css ve ecl-app.js dosyalarını birlikte kaydedin.

3. Dizini sunun ve tekli ile toplu geçişleri test edin.

4. Klavye ile, dar bir görünüm alanında ve JavaScript devre dışıyken yeniden deneyin.

### Bileşen yükseltmelerinin incelenebilir olmasını sağlayın

Bir yükseltmeden sonra tetikleyici-panel kimliklerini, başlatmayı, onToggle dinleyicisini, toplu durumu ve no-JavaScript görünümünü kontrol edin. Ardından gerçek tipografiyi, renkleri ve dar ekran düzenini karşılaştırın. Paketin yüklenmesi ve bir başlığın görüntülenmesi, genişletilebilir içeriğin tümünün hâlâ çalıştığını kanıtlamaya yetmez.

## Europa Component Library Tasarım Sistemi Bileşen Örnekleri

### ecl-index.html — eksiksiz kaynak

Bileşen işaretlemesinin, içeriğin, satır içi göstergelerin ve preset varlık yollarının tamamı.

```
<!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>
```

Kod referansı

- HTML dosyasını index.html adıyla kaydedin ve sağlanan diğer dosya adlarını değiştirmeyin.

### ecl.css — eksiksiz kaynak

Yerel ECL bileşen stillerini temel alan özgün, duyarlı düzen.

```
*{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}}
```

Kod referansı

- HTML dosyasını index.html adıyla kaydedin ve sağlanan diğer dosya adlarını değiştirmeyin.

### ecl-app.js — eksiksiz kaynak

Okunabilir başlangıç HTML değeriyle yerel başlatma ve etkinlik odaklı toplu davranış.

```
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();
```

Kod referansı

- HTML dosyasını index.html adıyla kaydedin ve sağlanan diğer dosya adlarını değiştirmeyin.

## Europa Component Library Tasarım Sistemi Aracı Kurulumu

### Uygulamaya Başlangıç Noktası

http://localhost:8000/ adresini açın. Örnekte EC preset'i kullanılır; ek bir simge veya yazı tipi indirmeniz gerekmez.

```
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
```

### Projeniz İçin Bir İstem

```
Sağlanan ECL EC 4.11.2 akordeon tanımını üç eksiksiz dosyanın tümünü kullanarak uygulayın. Yerel tetikleyici/panel ilişkilerini, onToggle ile güncellenen sayacı, tümünü açma/kapatma davranışını, düğmelerin klavyeyle etkinleştirilmesini, JavaScript olmadan okumayı ve örneğin özgün kapsamının açıkça belirtilmesini koruyun. Resmî bir AB hizmeti veya resmî başvuru olduğu izlenimini vermeyin.
```

## Europa Component Library Tasarım Sistemi Kaynakları ve Kapsamı

ECL EC 4.11.2 için bir OpenDesign uygulama kılavuzu. Özgün örnek notları ve sayfa düzeni, Avrupa Komisyonu hizmetini, finansman çağrısını veya yasal gerekliliği temsil etmez.

- EC başlangıç kılavuzu Preset varlıkları ve uygulama kurulumu.

- Akordeon kılavuzu Bileşenin bağlamı ve kullanım başvurusu.

- Renk rolleri Birincil, markaya özgü, nötr ve durum paletleri.

- Sabitlenmiş preset stil sayfası Bu örnekte kullanılan tam değerler.

## Europa Component Library Tasarım Sistemi İlgili Kaynaklar

### gov.cz tasarım sistemi

Altı kaynaklı eksiksiz bir okuma araç takımı üzerinden Gov Design System CE’nin gerçek renk rollerini, kart yuvalarını ve yerel sayfalandırmasını; ayrıca açık odak ve sayfa durumlarını inceleyin.

### GOV.UK tasarım sistemi

Güncel v6 yazı tipi ölçeği, duyarlı boşluklar, işlevsel renkler, bağlantılı doğrulama ve somut Frontend entegrasyonuyla GOV.UK tarzı bir soru yanıtlama ve cevapları kontrol etme akışı oluşturun.

### HarvardSites tasarım sistemi

HarvardSites’ı editoryal bir platform olarak tanıyın: site stillerini karşılaştırın, belgelenmiş yazı tipi eşleşmelerini seçin ve üniversite sayfalarını belirli içerik bileşenleriyle oluşturun.


- [Uygulama başvurusu](https://ec.europa.eu/component-library/v4.11.2/ec/components/accordion/usage/)
- [Kaynak](https://ec.europa.eu/component-library/v4.11.2/ec/guidelines/colours/)
- [Kaynak](https://ec.europa.eu/component-library/v4.11.2/ec/guidelines/spacing/)
- [Kaynak](https://ec.europa.eu/component-library/v4.11.2/ec/guidelines/typography/)
- [Kaynak](https://cdn.jsdelivr.net/npm/@ecl/vanilla-component-accordion@4.11.2/accordion.js)
- [Kod referansı](https://ec.europa.eu/component-library/v4.11.2/ec/getting-started/)
- [EC başlangıç kılavuzu Preset varlıkları ve uygulama kurulumu.](https://ec.europa.eu/component-library/v4.11.2/ec/getting-started/)
- [Akordeon kılavuzu Bileşenin bağlamı ve kullanım başvurusu.](https://ec.europa.eu/component-library/v4.11.2/ec/components/accordion/usage/)
- [Renk rolleri Birincil, markaya özgü, nötr ve durum paletleri.](https://ec.europa.eu/component-library/v4.11.2/ec/guidelines/colours/)
- [Sabitlenmiş preset stil sayfası Bu örnekte kullanılan tam değerler.](https://cdn.jsdelivr.net/npm/@ecl/preset-ec@4.11.2/dist/styles/ecl-ec.css)
