Examinez les rôles de couleur, de typographie et d’espacement de l’EC Europa à travers un brief complet avec accordéon natif, incluant la navigation au clavier, l’ouverture de tous les éléments et une solution de repli lisible en l’absence de JavaScript.
CSS natif 4.11.2 et environnement d’exécution Accordion, avec contenu original et commande d’ouverture globale. · Référence de mise en œuvre
02
Référence de conception du système de design Europa Component Library
Feuille de style @ecl/preset-ec 4.11.2 et code source d’Accordion vérifiés. Le comportement natif et la composition originale de la commande globale sont clairement distingués.
Valeurs publiées du préréglage EC. Le bleu de marque est distinct de la couleur d’action principale ; les couleurs d’état ne remplacent pas les messages textuels.
--ecl-color-primary-140
#0f2fa2
Valeurs publiées du préréglage EC. Le bleu de marque est distinct de la couleur d’action principale ; les couleurs d’état ne remplacent pas les messages textuels.
--ecl-color-secondary
#ffbe5c
Valeurs publiées du préréglage EC. Le bleu de marque est distinct de la couleur d’action principale ; les couleurs d’état ne remplacent pas les messages textuels.
--ecl-color-dark
#26324b
Valeurs publiées du préréglage EC. Le bleu de marque est distinct de la couleur d’action principale ; les couleurs d’état ne remplacent pas les messages textuels.
--ecl-color-info
#3860ed
Valeurs publiées du préréglage EC. Le bleu de marque est distinct de la couleur d’action principale ; les couleurs d’état ne remplacent pas les messages textuels.
--ecl-color-success
#24a148
Valeurs publiées du préréglage EC. Le bleu de marque est distinct de la couleur d’action principale ; les couleurs d’état ne remplacent pas les messages textuels.
--ecl-color-error
#da1e28
Valeurs publiées du préréglage EC. Le bleu de marque est distinct de la couleur d’action principale ; les couleurs d’état ne remplacent pas les messages textuels.
--ecl-color-warning
#f39811
Valeurs publiées du préréglage EC. Le bleu de marque est distinct de la couleur d’action principale ; les couleurs d’état ne remplacent pas les messages textuels.
--ecl-color-background
#fcfcfc
Valeurs publiées du préréglage EC. Le bleu de marque est distinct de la couleur d’action principale ; les couleurs d’état ne remplacent pas les messages textuels.
--ecl-color-branding
#004494
Valeurs publiées du préréglage EC. Le bleu de marque est distinct de la couleur d’action principale ; les couleurs d’état ne remplacent pas les messages textuels.
--ecl-color-neutral-20
#f8f9fd
Valeurs publiées du préréglage EC. Le bleu de marque est distinct de la couleur d’action principale ; les couleurs d’état ne remplacent pas les messages textuels.
--ecl-color-neutral-60
#e0e5f5
Valeurs publiées du préréglage EC. Le bleu de marque est distinct de la couleur d’action principale ; les couleurs d’état ne remplacent pas les messages textuels.
--ecl-color-white
#fff
Valeurs publiées du préréglage EC. Le bleu de marque est distinct de la couleur d’action principale ; les couleurs d’état ne remplacent pas les messages textuels.
Échelle réelle en rem du préréglage correspondant à la version verrouillée. Cette composition personnalisée reprend ces rôles sans inventer une autre échelle institutionnelle.
--ecl-spacing-xs
0.5rem
Échelle réelle en rem du préréglage correspondant à la version verrouillée. Cette composition personnalisée reprend ces rôles sans inventer une autre échelle institutionnelle.
--ecl-spacing-s
0.75rem
Échelle réelle en rem du préréglage correspondant à la version verrouillée. Cette composition personnalisée reprend ces rôles sans inventer une autre échelle institutionnelle.
--ecl-spacing-m
1rem
Échelle réelle en rem du préréglage correspondant à la version verrouillée. Cette composition personnalisée reprend ces rôles sans inventer une autre échelle institutionnelle.
--ecl-spacing-l
1.25rem
Échelle réelle en rem du préréglage correspondant à la version verrouillée. Cette composition personnalisée reprend ces rôles sans inventer une autre échelle institutionnelle.
--ecl-spacing-xl
1.5rem
Échelle réelle en rem du préréglage correspondant à la version verrouillée. Cette composition personnalisée reprend ces rôles sans inventer une autre échelle institutionnelle.
--ecl-spacing-2xl
2rem
Échelle réelle en rem du préréglage correspondant à la version verrouillée. Cette composition personnalisée reprend ces rôles sans inventer une autre échelle institutionnelle.
--ecl-spacing-3xl
2.5rem
Échelle réelle en rem du préréglage correspondant à la version verrouillée. Cette composition personnalisée reprend ces rôles sans inventer une autre échelle institutionnelle.
--ecl-spacing-4xl
3rem
Échelle réelle en rem du préréglage correspondant à la version verrouillée. Cette composition personnalisée reprend ces rôles sans inventer une autre échelle institutionnelle.
--ecl-spacing-5xl
3.5rem
Échelle réelle en rem du préréglage correspondant à la version verrouillée. Cette composition personnalisée reprend ces rôles sans inventer une autre échelle institutionnelle.
--ecl-spacing-6xl
4rem
Échelle réelle en rem du préréglage correspondant à la version verrouillée. Cette composition personnalisée reprend ces rôles sans inventer une autre échelle institutionnelle.
Les valeurs abrégées complètes incluent la graisse, la taille, la hauteur de ligne et la police de remplacement. La famille de polices de l’interface EC utilisée ici est Arial ; aucune police web personnalisée n’est requise.
--ecl-font-xs
normal normal 400 0.75rem/1.125rem arial,sans-serif
Les valeurs abrégées complètes incluent la graisse, la taille, la hauteur de ligne et la police de remplacement. La famille de polices de l’interface EC utilisée ici est Arial ; aucune police web personnalisée n’est requise.
--ecl-font-s
normal normal 400 0.875rem/1.125rem arial,sans-serif
Les valeurs abrégées complètes incluent la graisse, la taille, la hauteur de ligne et la police de remplacement. La famille de polices de l’interface EC utilisée ici est Arial ; aucune police web personnalisée n’est requise.
--ecl-font-m
normal normal 400 1rem/1.5rem arial,sans-serif
Les valeurs abrégées complètes incluent la graisse, la taille, la hauteur de ligne et la police de remplacement. La famille de polices de l’interface EC utilisée ici est Arial ; aucune police web personnalisée n’est requise.
--ecl-font-l
normal normal 400 1.25rem/1.75rem arial,sans-serif
Les valeurs abrégées complètes incluent la graisse, la taille, la hauteur de ligne et la police de remplacement. La famille de polices de l’interface EC utilisée ici est Arial ; aucune police web personnalisée n’est requise.
--ecl-font-xl
normal normal 400 1.5rem/2.25rem arial,sans-serif
Les valeurs abrégées complètes incluent la graisse, la taille, la hauteur de ligne et la police de remplacement. La famille de polices de l’interface EC utilisée ici est Arial ; aucune police web personnalisée n’est requise.
--ecl-font-2xl
normal normal 400 1.75rem/2.25rem arial,sans-serif
Les valeurs abrégées complètes incluent la graisse, la taille, la hauteur de ligne et la police de remplacement. La famille de polices de l’interface EC utilisée ici est Arial ; aucune police web personnalisée n’est requise.
--ecl-font-3xl
normal normal 400 2.5rem/2.75rem arial,sans-serif
Les valeurs abrégées complètes incluent la graisse, la taille, la hauteur de ligne et la police de remplacement. La famille de polices de l’interface EC utilisée ici est Arial ; aucune police web personnalisée n’est requise.
--ecl-font-4xl
normal normal 400 3.25rem/3.375rem arial,sans-serif
Les valeurs abrégées complètes incluent la graisse, la taille, la hauteur de ligne et la police de remplacement. La famille de polices de l’interface EC utilisée ici est Arial ; aucune police web personnalisée n’est requise.
--ecl-max-width
80ch
Les valeurs abrégées complètes incluent la graisse, la taille, la hauteur de ligne et la police de remplacement. La famille de polices de l’interface EC utilisée ici est Arial ; aucune police web personnalisée n’est requise.
Système de design Europa Component Library Europa : choix du préréglage et de la version EC
Choisissez EC ou EU avant d’importer les ressources
Europa fournit des préréglages institutionnels distincts. Cet exemple utilise délibérément @ecl/preset-ec en version 4.11.2, conformément à la documentation EC liée. Il ne mélange ni balisage EU, ni captures d’écran EC historiques, ni feuille de style sans version épinglée. Le package fournit dist/styles/ecl-ec.css et dist/scripts/ecl-ec.js : l’exemple statique peut donc être servi sans introduire de framework frontend.
Utilisez le préréglage EC pour l’implémentation EC présentée ici.
Utilisez la même version pour CSS et JavaScript.
Veillez à ce que les identifiants source restent uniques lorsque vous réutilisez des éléments d’accordéon.
Considérez ceci comme une implémentation versionnée
La référence décrit la version 4.11.2 ; elle n’affirme pas que toutes les versions ultérieures possèdent des jetons ou un comportement identiques. Lors d’une mise à niveau, comparez le préréglage choisi, le balisage des composants et leur initialisation. Un nouveau nom de package ou un nouveau numéro de version ne suffit pas à prouver qu’un modèle copié précédemment fonctionne toujours correctement.
Système de design Europa Component Library Europa : rôles des couleurs et identité institutionnelle
Distinguez l’image de marque de l’action principale
La couleur de marque du préréglage est #004494, tandis que sa couleur principale est #3860ed. Le brief initial réserve la couleur de marque à une fine bande en haut de page, puis laisse le composant utiliser son propre traitement pour l’action principale. Neutral-20 sert de fond de page et Neutral-60 sépare les contenus. Cette approche distingue l’accent institutionnel de la couleur d’un contrôle interactif.
N’attribuez pas de signification officielle à l’exemple
La page est une étude OpenDesign qui présente des notes fictives de consultation. Elle ne comporte aucun logo de la Commission européenne et ne représente ni un appel à financement, ni un service, ni une exigence légale. Les entrées de la palette d’erreur, d’avertissement et de succès sont répertoriées comme de véritables jetons, mais l’aperçu ne génère pas de faux message de réussite simplement pour afficher toutes les couleurs.
Système de design Europa Component Library Europa : typographie et échelle d’espacement
Utilisez des valeurs complètes pour les propriétés de police raccourcies
Le préréglage EC définit Arial comme police par défaut à l’écran. Le rôle m correspond à 1rem, avec une hauteur de ligne de 1.5rem et une graisse de 400 ; les rôles de taille supérieure ont chacun leur propre hauteur de ligne. La référence présente des déclarations complètes plutôt que des tailles de police isolées. La graisse des titres de l’étude est un choix de mise en évidence original, appliqué au rôle fourni, tandis que le texte des composants reste contrôlé par la feuille de style native.
Faites apparaître les espacements en rem et la largeur de lecture
La séquence d’espacement comprend 0.25, 0.5, 0.75, 1, 1.25, 1.5, 2, 2.5, 3, 3.5 et 4rem. La largeur de lecture maximale native est de 80ch. La mise en page d’origine utilise une limite extérieure centrée de 1080px et des marges internes adaptatives, tandis que chaque accordéon conserve son propre espacement défini par le préréglage. La largeur extérieure relève d’un choix de composition, et non d’un nouveau jeton officiel.
Système de design Europa Component Library Europa : balisage et comportement natif des accordéons
Associez les boutons de titre à de vrais panneaux
Chaque .ecl-accordion__item contient un titre avec un bouton .ecl-accordion__toggle. Son aria-controls pointe vers le panneau .ecl-accordion__content correspondant. L’exemple attribue à chaque élément un identifiant de déclencheur stable et ajoute aria-labelledby à chaque région. Le script natif trouve la cible par son ID, modifie aria-expanded et change la valeur de panel.hidden ; ces relations doivent rester correctes si les éléments sont réorganisés ou copiés.
Utilisez un indicateur explicite sans sprite externe
Système de design Europa Component Library Europa : événements des accordéons et comportement « Tout ouvrir »
Déduisez l’état du composant natif
ECL.autoInit() expose le composant initialisé sous root.ECLAccordion. L’application écoute son événement onToggle et calcule le nombre de boutons déclencheurs dont l’attribut aria-expanded="true". La charge utile de l’événement comprend l’élément cible et isOpening, utiles pour gérer chaque panneau individuellement. Le décompte ne déduit pas l’état du texte visible et ne maintient pas de tableau indépendant des éléments ouverts.
Assurez la prévisibilité de l’action groupée
Lorsque tous les panneaux sont ouverts, l’action groupée les ferme ; sinon, elle les ouvre tous. Le gestionnaire active uniquement les boutons natifs dont l’état doit changer. Il ne modifie lui-même ni hidden ni aria-expanded, afin que les événements natifs et le décompte calculé restent cohérents. Le libellé du contrôle passe de « Tout ouvrir » à « Tout fermer » pour annoncer l’action suivante.
Système de design Europa Component Library Europa : navigation au clavier et lecture progressive
Utilisez le comportement normal des boutons
La touche Tab déplace le focus vers un bouton de titre ; Entrée ou Espace l’active selon le comportement natif des boutons du navigateur. Il s’agit d’un accordéon, et non d’une liste d’onglets : n’ajoutez pas de navigation entre les éléments avec les flèches par analogie. Plusieurs panneaux peuvent rester ouverts, ce qui facilite la comparaison des notes. L’indicateur de focus provient de la feuille de style du composant et reste visible sur le fond clair.
Assurez la lisibilité du texte sans JavaScript
Le fichier source HTML affiche tous les panneaux et définit aria-expanded="true". Une fois l’initialisation native réussie, l’application les replie en activant leurs boutons. Si JavaScript est désactivé, le texte reste donc visible et la barre d’outils inactive est masquée par le style no-js. Ce comportement de repli a été testé en vérifiant la visibilité réelle, et non la simple présence des paragraphes dans le code source.
Système de design Europa Component Library Europa : panneaux adaptatifs et contenu long
Laissez la hauteur et le retour à la ligne s’adapter naturellement
Le document n’impose aucune hauteur fixe à l’accordéon. Les notes déployées peuvent s’agrandir pour accueillir des titres, des listes numérotées et une note de décision mise en évidence. Sur les écrans plus petits, le remplissage extérieur d’origine est réduit et le titre utilise un rôle typographique fourni de plus petite taille. Le texte long des déclencheurs passe à la ligne, tandis que l’indicateur reste visible. Le rendu a été vérifié à 280 px, ainsi que sur des écrans de bureau, des tablettes et des téléphones.
Ne transformez pas les commandes de lecture en processus d’approbation
L’ouverture ou la fermeture d’un panneau ne modifie que sa présentation. Le compteur indique le nombre de sections ouvertes, et non le nombre de sections terminées ou d’exigences satisfaites. Le pied de page précise qu’aucune réponse à la consultation ni approbation officielle n’est envoyée. Un véritable service nécessiterait ses propres règles d’admissibilité, mécanismes de persistance et comportements côté serveur, dont aucun n’est sous-entendu par la démonstration du composant.
Configuration statique complète de système de design Europa Component Library Europa
Installez le préréglage correspondant et enregistrez tous les fichiers
Le fichier index.html fourni charge la feuille de style du préréglage épinglé et le script du navigateur avant ecl-app.js. Enregistrez ecl.css et ecl-app.js à ses côtés et servez le dossier via HTTP. Tout le contenu, les SVG des indicateurs et les gestionnaires d’état sont inclus. Cette étude ne nécessite ni structure d’application cachée ni téléchargement séparé d’icônes.
Installez le préréglage EC épinglé.
Enregistrez ensemble index.html, ecl.css et ecl-app.js.
Servez le répertoire et testez les bascules individuelles et groupées.
Recommencez avec le clavier, une fenêtre étroite et JavaScript désactivé.
Veillez à ce que les mises à niveau des composants restent vérifiables
Exemples de composants de système de design Europa Component Library
ecl-index.html — code source complet
Balisage complet du composant, contenu, indicateurs intégrés et chemins d’accès aux ressources du préréglage.
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>
Enregistrez le fichier HTML sous le nom index.html et conservez inchangés les noms des autres fichiers fournis.
ecl-app.js — code source complet
Initialisation native et comportement groupé piloté par les événements, avec HTML lisible dès le chargement.
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();
Enregistrez le fichier HTML sous le nom index.html et conservez inchangés les noms des autres fichiers fournis.
04
Configuration de l’agent IA pour système de design Europa Component Library
Point de départ de l’implémentation
Ouvrez http://localhost:8000/. L’exemple utilise le préréglage EC et ne nécessite aucun téléchargement supplémentaire d’icône ou de police.
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 pour votre projet
Prompt pour l’agent IA
Mettez en œuvre le cahier des charges fourni pour l’accordéon ECL EC 4.11.2 à l’aide des trois fichiers complets. Préservez les liens natifs entre les déclencheurs et les panneaux, le compteur piloté par onToggle, le comportement d’ouverture et de fermeture groupées, l’activation des boutons au clavier, la lecture sans JavaScript et la portée explicitement limitée de l’exemple d’origine. Ne laissez pas entendre qu’il s’agit d’un service officiel de l’UE ou d’une soumission officielle.
05
Sources et portée de système de design Europa Component Library
Guide d’application OpenDesign pour ECL EC 4.11.2. Les notes de l’exemple d’origine et la composition de la page ne représentent ni un service de la Commission européenne, ni un appel à financement, ni une obligation légale.
