Esamina i ruoli cromatici, tipografici e di spaziatura EC di Europa attraverso un brief completo con accordion nativo, inclusi l’uso da tastiera, l’apertura di tutti i pannelli e un’alternativa leggibile senza JavaScript.
Preset EC 4.11.2 CSS e runtime Accordion nativi, con contenuti originali e controllo per aprire tutti gli elementi. · Riferimento per l’implementazione
02
Riferimento di progettazione del sistema di design Europa Component Library
Foglio di stile e codice sorgente Accordion verificati di @ecl/preset-ec 4.11.2. Il comportamento nativo e la composizione originale del controllo per aprire tutti gli elementi sono distinti in modo esplicito.
Valori pubblicati del preset EC. Il blu del marchio è distinto dal colore primario delle azioni; i colori di stato non sostituiscono i messaggi testuali.
--ecl-color-primary-140
#0f2fa2
Valori pubblicati del preset EC. Il blu del marchio è distinto dal colore primario delle azioni; i colori di stato non sostituiscono i messaggi testuali.
--ecl-color-secondary
#ffbe5c
Valori pubblicati del preset EC. Il blu del marchio è distinto dal colore primario delle azioni; i colori di stato non sostituiscono i messaggi testuali.
--ecl-color-dark
#26324b
Valori pubblicati del preset EC. Il blu del marchio è distinto dal colore primario delle azioni; i colori di stato non sostituiscono i messaggi testuali.
--ecl-color-info
#3860ed
Valori pubblicati del preset EC. Il blu del marchio è distinto dal colore primario delle azioni; i colori di stato non sostituiscono i messaggi testuali.
--ecl-color-success
#24a148
Valori pubblicati del preset EC. Il blu del marchio è distinto dal colore primario delle azioni; i colori di stato non sostituiscono i messaggi testuali.
--ecl-color-error
#da1e28
Valori pubblicati del preset EC. Il blu del marchio è distinto dal colore primario delle azioni; i colori di stato non sostituiscono i messaggi testuali.
--ecl-color-warning
#f39811
Valori pubblicati del preset EC. Il blu del marchio è distinto dal colore primario delle azioni; i colori di stato non sostituiscono i messaggi testuali.
--ecl-color-background
#fcfcfc
Valori pubblicati del preset EC. Il blu del marchio è distinto dal colore primario delle azioni; i colori di stato non sostituiscono i messaggi testuali.
--ecl-color-branding
#004494
Valori pubblicati del preset EC. Il blu del marchio è distinto dal colore primario delle azioni; i colori di stato non sostituiscono i messaggi testuali.
--ecl-color-neutral-20
#f8f9fd
Valori pubblicati del preset EC. Il blu del marchio è distinto dal colore primario delle azioni; i colori di stato non sostituiscono i messaggi testuali.
--ecl-color-neutral-60
#e0e5f5
Valori pubblicati del preset EC. Il blu del marchio è distinto dal colore primario delle azioni; i colori di stato non sostituiscono i messaggi testuali.
--ecl-color-white
#fff
Valori pubblicati del preset EC. Il blu del marchio è distinto dal colore primario delle azioni; i colori di stato non sostituiscono i messaggi testuali.
Scala effettiva basata su rem del preset bloccato. La composizione personalizzata utilizza questi ruoli senza inventare una scala istituzionale diversa.
--ecl-spacing-xs
0.5rem
Scala effettiva basata su rem del preset bloccato. La composizione personalizzata utilizza questi ruoli senza inventare una scala istituzionale diversa.
--ecl-spacing-s
0.75rem
Scala effettiva basata su rem del preset bloccato. La composizione personalizzata utilizza questi ruoli senza inventare una scala istituzionale diversa.
--ecl-spacing-m
1rem
Scala effettiva basata su rem del preset bloccato. La composizione personalizzata utilizza questi ruoli senza inventare una scala istituzionale diversa.
--ecl-spacing-l
1.25rem
Scala effettiva basata su rem del preset bloccato. La composizione personalizzata utilizza questi ruoli senza inventare una scala istituzionale diversa.
--ecl-spacing-xl
1.5rem
Scala effettiva basata su rem del preset bloccato. La composizione personalizzata utilizza questi ruoli senza inventare una scala istituzionale diversa.
--ecl-spacing-2xl
2rem
Scala effettiva basata su rem del preset bloccato. La composizione personalizzata utilizza questi ruoli senza inventare una scala istituzionale diversa.
--ecl-spacing-3xl
2.5rem
Scala effettiva basata su rem del preset bloccato. La composizione personalizzata utilizza questi ruoli senza inventare una scala istituzionale diversa.
--ecl-spacing-4xl
3rem
Scala effettiva basata su rem del preset bloccato. La composizione personalizzata utilizza questi ruoli senza inventare una scala istituzionale diversa.
--ecl-spacing-5xl
3.5rem
Scala effettiva basata su rem del preset bloccato. La composizione personalizzata utilizza questi ruoli senza inventare una scala istituzionale diversa.
--ecl-spacing-6xl
4rem
Scala effettiva basata su rem del preset bloccato. La composizione personalizzata utilizza questi ruoli senza inventare una scala istituzionale diversa.
I valori abbreviati completi includono peso, dimensione, interlinea e carattere di fallback. La famiglia di caratteri EC usata qui per lo schermo è Arial; non serve alcun font web personalizzato.
--ecl-font-xs
normal normal 400 0.75rem/1.125rem arial,sans-serif
I valori abbreviati completi includono peso, dimensione, interlinea e carattere di fallback. La famiglia di caratteri EC usata qui per lo schermo è Arial; non serve alcun font web personalizzato.
--ecl-font-s
normal normal 400 0.875rem/1.125rem arial,sans-serif
I valori abbreviati completi includono peso, dimensione, interlinea e carattere di fallback. La famiglia di caratteri EC usata qui per lo schermo è Arial; non serve alcun font web personalizzato.
--ecl-font-m
normal normal 400 1rem/1.5rem arial,sans-serif
I valori abbreviati completi includono peso, dimensione, interlinea e carattere di fallback. La famiglia di caratteri EC usata qui per lo schermo è Arial; non serve alcun font web personalizzato.
--ecl-font-l
normal normal 400 1.25rem/1.75rem arial,sans-serif
I valori abbreviati completi includono peso, dimensione, interlinea e carattere di fallback. La famiglia di caratteri EC usata qui per lo schermo è Arial; non serve alcun font web personalizzato.
--ecl-font-xl
normal normal 400 1.5rem/2.25rem arial,sans-serif
I valori abbreviati completi includono peso, dimensione, interlinea e carattere di fallback. La famiglia di caratteri EC usata qui per lo schermo è Arial; non serve alcun font web personalizzato.
--ecl-font-2xl
normal normal 400 1.75rem/2.25rem arial,sans-serif
I valori abbreviati completi includono peso, dimensione, interlinea e carattere di fallback. La famiglia di caratteri EC usata qui per lo schermo è Arial; non serve alcun font web personalizzato.
--ecl-font-3xl
normal normal 400 2.5rem/2.75rem arial,sans-serif
I valori abbreviati completi includono peso, dimensione, interlinea e carattere di fallback. La famiglia di caratteri EC usata qui per lo schermo è Arial; non serve alcun font web personalizzato.
--ecl-font-4xl
normal normal 400 3.25rem/3.375rem arial,sans-serif
I valori abbreviati completi includono peso, dimensione, interlinea e carattere di fallback. La famiglia di caratteri EC usata qui per lo schermo è Arial; non serve alcun font web personalizzato.
--ecl-max-width
80ch
I valori abbreviati completi includono peso, dimensione, interlinea e carattere di fallback. La famiglia di caratteri EC usata qui per lo schermo è Arial; non serve alcun font web personalizzato.
Preset Europa EC e scelta della versione del sistema di design Europa Component Library
Scegli EC o EU prima di importare gli asset
Europa fornisce preset istituzionali distinti. Questo esempio usa deliberatamente @ecl/preset-ec alla versione 4.11.2, corrispondente alla documentazione EC collegata. Non combina markup EU, schermate EC storiche e un foglio di stile senza versione bloccata. Il pacchetto fornisce dist/styles/ecl-ec.css e dist/scripts/ecl-ec.js, quindi l’esempio statico può essere pubblicato senza introdurre un framework frontend.
Per l’implementazione EC mostrata qui, usa il preset EC.
Mantieni CSS e JavaScript alla stessa versione.
Quando riutilizzi gli elementi del pannello a fisarmonica, mantieni univoci gli ID sorgente.
Considerala un’implementazione con versione specifica
Il riferimento descrive la versione 4.11.2; non afferma che tutte le versioni successive abbiano token o comportamenti identici. Gli aggiornamenti devono confrontare insieme il preset scelto, il markup dei componenti e la loro inizializzazione. Il solo nome di un nuovo pacchetto o il numero di versione non dimostrano che un pattern copiato in precedenza continui a funzionare correttamente.
Ruoli cromatici di Europa e identità istituzionale del sistema di design Europa Component Library
Tieni separati il colore del marchio e quello dell’azione primaria
Il colore del marchio nel preset è #004494, mentre il colore primario è #3860ed. Il brief originale usa il colore del marchio solo per una sottile linea superiore, lasciando poi al componente il proprio stile per le azioni primarie. Il valore neutral-20 è usato per lo sfondo della pagina e neutral-60 per separare i contenuti. In questo modo si mantiene la distinzione tra un accento istituzionale e il colore di un controllo interattivo.
Non attribuire significati ufficiali all’esempio
La pagina è uno studio OpenDesign con note di consultazione fittizie. Non ha il logo della Commissione europea e non rappresenta un bando di finanziamento, un servizio o un requisito legale. Le voci della palette per errore, avviso e successo sono elencate come token effettivi, ma l’anteprima non genera un messaggio artificiale di successo dell’applicazione solo per mostrare tutti i colori.
Tipografia e scala di spaziatura di Europa del sistema di design Europa Component Library
Usa i valori completi della proprietà shorthand per i caratteri
Il preset EC definisce Arial come famiglia di caratteri predefinita per lo schermo. Il ruolo m corrisponde a 1rem con interlinea di 1.5rem e peso 400; i ruoli di dimensione maggiore hanno ciascuno la propria interlinea. Il riferimento riporta dichiarazioni complete, anziché soltanto dimensioni isolate in punti. Il peso del titolo nello studio è una scelta originale di enfasi applicata al ruolo fornito, mentre il testo dei componenti resta sotto il controllo del foglio di stile nativo.
Mantieni visibili la spaziatura in rem e la misura dei contenuti
La sequenza di spaziatura comprende 0.25, 0.5, 0.75, 1, 1.25, 1.5, 2, 2.5, 3, 3.5 e 4rem. La misura massima nativa per la lettura è 80ch. Il layout originale usa un limite esterno centrato di 1080px e una spaziatura interna responsive, mentre ogni pannello a fisarmonica mantiene la propria spaziatura del preset. La larghezza esterna è una scelta compositiva, non un nuovo token ufficiale.
Markup e comportamento nativo del pannello a fisarmonica Europa del sistema di design Europa Component Library
Fai in modo che i pulsanti delle intestazioni controllino pannelli reali
Ogni .ecl-accordion__item contiene un’intestazione con un pulsante .ecl-accordion__toggle. Il relativo aria-controls punta al pannello .ecl-accordion__content corrispondente. L’esempio include un ID stabile per il pulsante di attivazione e aria-labelledby per ogni regione. Lo script nativo trova il pannello di destinazione tramite ID, modifica aria-expanded e imposta panel.hidden; le relazioni devono rimanere corrette anche se gli elementi vengono riordinati o copiati.
Usa un indicatore esplicito senza sprite esterni
Sistema di design Europa Component Library Europa: eventi dell’accordion e comportamento di apertura di tutte le sezioni
Ricava lo stato dal componente nativo
ECL.autoInit() espone il componente inizializzato come root.ECLAccordion. L’applicazione ascolta l’evento onToggle e calcola quanti pulsanti di attivazione hanno attualmente aria-expanded="true". Il payload dell’evento include l’elemento di destinazione e isOpening, utile per gestire i singoli pannelli. Il conteggio non deduce lo stato dal testo visibile e non mantiene un secondo array indipendente con lo stato di apertura.
Rendi prevedibile l’azione collettiva
Quando tutti i pannelli sono aperti, l’azione collettiva li chiude; altrimenti li apre tutti. Il gestore attiva solo i pulsanti nativi il cui stato deve cambiare. Non imposta direttamente hidden o aria-expanded, così gli eventi nativi e il conteggio derivato rimangono coerenti. L’etichetta del controllo alterna tra Apri tutte le sezioni e Chiudi tutte le sezioni per comunicare l’azione successiva.
Sistema di design Europa Component Library Europa: tastiera e lettura progressiva
Usa la normale interazione con i pulsanti
Il tasto Tab sposta il focus su un pulsante nell’intestazione; Invio o la barra spaziatrice lo attivano tramite il comportamento nativo dei pulsanti del browser. Questo è un accordion, non un tablist: non aggiungere la navigazione tra schede con i tasti freccia per analogia. Più pannelli possono rimanere aperti, così è possibile confrontare le note. L’indicatore di focus è fornito dal foglio di stile del componente e rimane visibile sullo sfondo chiaro.
Mantieni il testo leggibile senza JavaScript
Il codice sorgente HTML mostra inizialmente tutti i pannelli e imposta aria-expanded="true". Dopo che l’inizializzazione nativa è riuscita, l’applicazione li chiude attivando i relativi pulsanti. Se JavaScript è disabilitato, il testo rimane quindi visibile e la barra degli strumenti inattiva per le azioni collettive viene nascosta dallo stile no-js. Questa modalità di fallback è stata verificata controllando la visibilità effettiva, non solo la presenza dei paragrafi nel codice sorgente.
Sistema di design Europa Component Library Europa: pannelli adattivi e contenuti lunghi
Consenti l’altezza naturale e il ritorno a capo
Il documento non usa un’altezza fissa per l’accordion. Le note espanse possono estendersi per contenere intestazioni, elenchi numerati e una nota decisionale evidenziata. Sugli schermi più piccoli si riduce il padding esterno originale e il titolo usa un ruolo tipografico più piccolo tra quelli disponibili. Il testo lungo dei pulsanti di attivazione va a capo, mentre l’indicatore rimane visibile. Il comportamento è stato verificato a 280px e alle larghezze per desktop, tablet e telefono.
Non trasformare i controlli di lettura in un flusso di approvazione
Aprire o chiudere un pannello ne modifica solo la presentazione. Il conteggio indica quante sezioni sono aperte, non quante sono state completate o quanti requisiti sono stati soddisfatti. Il piè di pagina specifica che non viene inviata alcuna risposta alla consultazione né concessa un’approvazione formale. Un servizio reale avrebbe bisogno di comportamenti specifici per idoneità, persistenza e backend, nessuno dei quali è implicito nella demo del componente.
Sistema di design Europa Component Library Europa: configurazione statica completa
Installa il preset corrispondente e salva tutti i file
Il file index.html fornito carica il foglio di stile del preset bloccato alla versione specificata e lo script per browser prima di ecl-app.js. Salva i file ecl.css ed ecl-app.js allegati nella stessa cartella e servila tramite HTTP. Sono inclusi tutti i contenuti, gli SVG degli indicatori e i gestori dello stato. Per questa demo non serve alcuna struttura applicativa nascosta né scaricare icone separatamente.
Installa il preset EC bloccato alla versione specificata.
Salva insieme index.html, ecl.css ed ecl-app.js.
Servi la directory e verifica l’attivazione singola e collettiva.
Ripeti la verifica con la tastiera, su una finestra stretta e con JavaScript disabilitato.
Rendi verificabili gli aggiornamenti dei componenti
Sistema di design Europa Component Library Esempi di componenti del sistema di progettazione
ecl-index.html — sorgente completa
Markup completo del componente, contenuti, indicatori inline e percorsi degli asset del preset.
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>
Salva il file HTML come index.html e lascia invariati i nomi degli altri file forniti.
ecl-app.js — sorgente completa
Inizializzazione nativa e comportamento collettivo basato sugli eventi, con contenuti inizialmente leggibili senza HTML.
javascript
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();
Salva il file HTML come index.html e lascia invariati i nomi degli altri file forniti.
04
Sistema di design Europa Component Library Configurazione dell’agente del sistema di progettazione
Punto di partenza per l’implementazione
Apri http://localhost:8000/. L’esempio usa il preset EC e non richiede di scaricare altre icone o font.
sh
npm init -y
npm install @ecl/[email protected]
# Save index.html, ecl.css and ecl-app.js from the supplied examples.
python3 -m http.server 8000
Un prompt per il tuo progetto
Prompt per l’agente
Implementa il brief fornito per l’accordion ECL EC 4.11.2 usando tutti e tre i file completi. Mantieni le relazioni native tra pulsanti e pannelli, il conteggio basato su onToggle, la logica di apertura e chiusura collettiva, l’attivazione dei pulsanti da tastiera, la leggibilità senza JavaScript e l’ambito esplicito dell’esempio originale. Non presentarlo come un servizio ufficiale dell’UE o come un invio formale.
05
Sistema di design Europa Component Library Fonti e ambito del sistema di progettazione
Una guida applicativa OpenDesign per ECL EC 4.11.2. Le note di esempio originali e la composizione della pagina non rappresentano un servizio della Commissione europea, un bando di finanziamento o un obbligo legale.
