Examina las funciones de color, tipografía y espaciado de EC en Europa mediante un encargo completo con acordeón nativo, navegación por teclado, opción para abrir todo y una alternativa legible sin JavaScript.
Entorno de ejecución nativo de EC 4.11.2 CSS y Accordion, con contenido original y control para abrir todas las secciones. · Referencia de implementación
02
Referencia de diseño del sistema de diseño Europa Component Library
Hoja de estilos de @ecl/preset-ec 4.11.2 y código fuente de Accordion verificados. El comportamiento nativo y la composición original del control masivo se distinguen explícitamente.
Valores publicados del preajuste EC. El azul de marca es distinto del color principal de acción; los colores de estado no sustituyen los mensajes escritos.
--ecl-color-primary-140
#0f2fa2
Valores publicados del preajuste EC. El azul de marca es distinto del color principal de acción; los colores de estado no sustituyen los mensajes escritos.
--ecl-color-secondary
#ffbe5c
Valores publicados del preajuste EC. El azul de marca es distinto del color principal de acción; los colores de estado no sustituyen los mensajes escritos.
--ecl-color-dark
#26324b
Valores publicados del preajuste EC. El azul de marca es distinto del color principal de acción; los colores de estado no sustituyen los mensajes escritos.
--ecl-color-info
#3860ed
Valores publicados del preajuste EC. El azul de marca es distinto del color principal de acción; los colores de estado no sustituyen los mensajes escritos.
--ecl-color-success
#24a148
Valores publicados del preajuste EC. El azul de marca es distinto del color principal de acción; los colores de estado no sustituyen los mensajes escritos.
--ecl-color-error
#da1e28
Valores publicados del preajuste EC. El azul de marca es distinto del color principal de acción; los colores de estado no sustituyen los mensajes escritos.
--ecl-color-warning
#f39811
Valores publicados del preajuste EC. El azul de marca es distinto del color principal de acción; los colores de estado no sustituyen los mensajes escritos.
--ecl-color-background
#fcfcfc
Valores publicados del preajuste EC. El azul de marca es distinto del color principal de acción; los colores de estado no sustituyen los mensajes escritos.
--ecl-color-branding
#004494
Valores publicados del preajuste EC. El azul de marca es distinto del color principal de acción; los colores de estado no sustituyen los mensajes escritos.
--ecl-color-neutral-20
#f8f9fd
Valores publicados del preajuste EC. El azul de marca es distinto del color principal de acción; los colores de estado no sustituyen los mensajes escritos.
--ecl-color-neutral-60
#e0e5f5
Valores publicados del preajuste EC. El azul de marca es distinto del color principal de acción; los colores de estado no sustituyen los mensajes escritos.
--ecl-color-white
#fff
Valores publicados del preajuste EC. El azul de marca es distinto del color principal de acción; los colores de estado no sustituyen los mensajes escritos.
Los valores abreviados completos incluyen grosor, tamaño, interlineado y fuente alternativa. La familia tipográfica de EC utilizada aquí es Arial; no se requiere una fuente web personalizada.
--ecl-font-xs
normal normal 400 0.75rem/1.125rem arial,sans-serif
Los valores abreviados completos incluyen grosor, tamaño, interlineado y fuente alternativa. La familia tipográfica de EC utilizada aquí es Arial; no se requiere una fuente web personalizada.
--ecl-font-s
normal normal 400 0.875rem/1.125rem arial,sans-serif
Los valores abreviados completos incluyen grosor, tamaño, interlineado y fuente alternativa. La familia tipográfica de EC utilizada aquí es Arial; no se requiere una fuente web personalizada.
--ecl-font-m
normal normal 400 1rem/1.5rem arial,sans-serif
Los valores abreviados completos incluyen grosor, tamaño, interlineado y fuente alternativa. La familia tipográfica de EC utilizada aquí es Arial; no se requiere una fuente web personalizada.
--ecl-font-l
normal normal 400 1.25rem/1.75rem arial,sans-serif
Los valores abreviados completos incluyen grosor, tamaño, interlineado y fuente alternativa. La familia tipográfica de EC utilizada aquí es Arial; no se requiere una fuente web personalizada.
--ecl-font-xl
normal normal 400 1.5rem/2.25rem arial,sans-serif
Los valores abreviados completos incluyen grosor, tamaño, interlineado y fuente alternativa. La familia tipográfica de EC utilizada aquí es Arial; no se requiere una fuente web personalizada.
--ecl-font-2xl
normal normal 400 1.75rem/2.25rem arial,sans-serif
Los valores abreviados completos incluyen grosor, tamaño, interlineado y fuente alternativa. La familia tipográfica de EC utilizada aquí es Arial; no se requiere una fuente web personalizada.
--ecl-font-3xl
normal normal 400 2.5rem/2.75rem arial,sans-serif
Los valores abreviados completos incluyen grosor, tamaño, interlineado y fuente alternativa. La familia tipográfica de EC utilizada aquí es Arial; no se requiere una fuente web personalizada.
--ecl-font-4xl
normal normal 400 3.25rem/3.375rem arial,sans-serif
Los valores abreviados completos incluyen grosor, tamaño, interlineado y fuente alternativa. La familia tipográfica de EC utilizada aquí es Arial; no se requiere una fuente web personalizada.
--ecl-max-width
80ch
Los valores abreviados completos incluyen grosor, tamaño, interlineado y fuente alternativa. La familia tipográfica de EC utilizada aquí es Arial; no se requiere una fuente web personalizada.
Europa: selección de versión y preajuste EC del sistema de diseño Europa Component Library
Elige EC o EU antes de importar los recursos
Europa ofrece preajustes institucionales separados. Este ejemplo utiliza deliberadamente @ecl/preset-ec en la versión 4.11.2, que corresponde a la documentación de EC enlazada. No combina marcado de EU, capturas históricas de EC y una hoja de estilos sin versión fijada. El paquete proporciona dist/styles/ecl-ec.css y dist/scripts/ecl-ec.js, por lo que el ejemplo estático puede servirse sin incorporar un framework de frontend.
Usa el preajuste EC para la implementación EC que se muestra aquí.
Mantén CSS y JavaScript en la misma versión.
Mantén únicos los ID de origen al reutilizar elementos de acordeón.
Trátalo como una implementación con versiones
La referencia describe la versión 4.11.2; no afirma que todas las versiones posteriores tengan los mismos tokens o el mismo comportamiento. Al actualizar, compara conjuntamente el preset elegido, el marcado de los componentes y su inicialización. Un nuevo nombre de paquete o número de versión, por sí solo, no demuestra que un patrón copiado anteriormente siga funcionando correctamente.
Sistema de diseño Europa Component Library Europa: funciones del color e identidad institucional
Mantén separadas la marca y la acción principal
El color de marca del preset es #004494, mientras que el color principal es #3860ed. El encargo original usa el color de marca solo como una franja superior estrecha y deja que el componente aplique su propio estilo de acción principal. Neutral-20 sirve para el fondo de la página y Neutral-60 separa el contenido. Así se conserva la distinción entre un acento institucional y el color de un control interactivo.
No atribuyas un significado oficial a la muestra
La página es un estudio de OpenDesign con notas de consulta ficticias. No incluye el logotipo de la Comisión Europea ni representa una convocatoria de financiación, un servicio o un requisito legal. Las paletas de error, advertencia y éxito se enumeran como tokens existentes, pero la vista previa no genera un mensaje artificial de solicitud completada solo para mostrar todos los colores.
Sistema de diseño Europa Component Library Europa: tipografía y escala de espaciado
Usa valores completos para la propiedad abreviada de fuente
El preset EC define Arial como familia predeterminada para pantalla. El rol m tiene un tamaño de 1rem, una altura de línea de 1.5rem y un peso de 400; los roles de mayor tamaño tienen su propia altura de línea. La referencia incluye declaraciones completas, no solo tamaños de fuente aislados. El peso de los encabezados del estudio es una elección original de énfasis aplicada sobre el rol proporcionado, mientras que el texto de los componentes sigue bajo el control de la hoja de estilos nativa.
Deja visibles el espaciado en rem y el ancho de lectura
La escala de espaciado incluye 0.25, 0.5, 0.75, 1, 1.25, 1.5, 2, 2.5, 3, 3.5 y 4rem. El ancho máximo de lectura nativo es 80ch. El diseño original utiliza un límite exterior centrado de 1080px y un relleno adaptable, mientras que cada acordeón conserva su propio espaciado del preset. El ancho exterior es una decisión de composición, no un nuevo token oficial.
Sistema de diseño Europa Component Library Europa: marcado y comportamiento nativo del acordeón
Haz que los botones de encabezado controlen paneles reales
Cada .ecl-accordion__item contiene un encabezado con un botón .ecl-accordion__toggle. Su aria-controls apunta al panel .ecl-accordion__content correspondiente. El ejemplo incluye un ID estable para el activador y aria-labelledby en cada región. El script nativo busca el destino por ID, cambia aria-expanded y modifica panel.hidden; estas relaciones deben seguir siendo correctas si se reordenan o copian los elementos.
Usa un indicador explícito sin un sprite externo
Sistema de diseño Europa Component Library Europa: eventos del acordeón y comportamiento de apertura de todos los paneles
Obtén el estado del componente nativo
ECL.autoInit() expone el componente inicializado como root.ECLAccordion. La aplicación escucha su evento onToggle y calcula cuántos botones activadores tienen actualmente aria-expanded="true". La carga útil del evento incluye el elemento de destino y isOpening, lo que resulta útil para gestionar cada panel. El recuento no deduce el estado a partir del texto visible ni mantiene una segunda matriz independiente de estados de apertura.
Haz que la acción global sea predecible
Cuando todos los paneles están abiertos, la acción global los cierra; de lo contrario, los abre todos. El controlador activa solo los botones nativos cuyo estado debe cambiar. No modifica directamente hidden ni aria-expanded, por lo que los eventos nativos y el recuento derivado se mantienen sincronizados. La etiqueta del control cambia entre «Abrir todas las secciones» y «Cerrar todas las secciones» para indicar la acción siguiente.
Sistema de diseño Europa Component Library Europa: navegación con teclado y lectura progresiva
Usa la interacción habitual de los botones
La tecla Tab lleva al botón de un encabezado, y Enter o Espacio lo activa mediante el comportamiento nativo de los botones del navegador. Esto es un acordeón, no una lista de pestañas: no añadas navegación entre pestañas con las flechas por analogía. Pueden permanecer abiertos varios paneles, lo que facilita comparar las notas. El indicador de foco procede de la hoja de estilos del componente y permanece visible sobre la superficie clara.
Mantén el texto legible sin JavaScript
El código fuente de HTML comienza con todos los paneles visibles y aria-expanded="true". Cuando la inicialización nativa se completa correctamente, la aplicación los contrae activando sus botones. Por tanto, si JavaScript está desactivado, el texto permanece visible y la barra de herramientas inactiva se oculta mediante el estilo no-js. Este comportamiento alternativo se verificó comprobando la visibilidad real, no solo la presencia de los párrafos en el código fuente.
Sistema de diseño Europa Component Library Europa: paneles adaptables y contenido extenso
Permite la altura natural y el ajuste de línea
El documento no fija la altura del acordeón. Las notas expandidas pueden crecer para incluir encabezados, listas ordenadas y una nota destacada sobre una decisión. En pantallas pequeñas, se reduce el relleno exterior original y el titular usa un rol tipográfico proporcionado de menor tamaño. El texto largo de los activadores se ajusta a varias líneas y el indicador sigue estando disponible. Se comprobó a 280px y también en anchos de escritorio, tableta y teléfono.
No conviertas los controles de lectura en un proceso de aprobación
Abrir o cerrar un panel solo cambia la presentación. El recuento indica cuántas secciones están abiertas, no cuántas se han completado ni qué requisitos se han cumplido. El pie de página aclara que no se envía ninguna respuesta a la consulta ni se concede una aprobación formal. Un servicio real necesitaría sus propios criterios de elegibilidad, persistencia y comportamiento del backend, ninguno de los cuales queda implícito en la demostración del componente.
Sistema de diseño Europa Component Library Europa: configuración estática completa
Instala el preset correspondiente y guarda todos los archivos
El archivo index.html proporcionado carga la hoja de estilos preestablecida fijada y el script del navegador antes de ecl-app.js. Guarda los archivos ecl.css y ecl-app.js que lo acompañan en la misma carpeta y sirve esta carpeta mediante HTTP. Se incluyen todo el contenido, los SVG indicadores y los controladores de estado. Este estudio no necesita una estructura de aplicación oculta ni una descarga de iconos por separado.
Instala el preset EC fijado.
Guarda juntos index.html, ecl.css y ecl-app.js.
Sirve el directorio y prueba los controles individuales y en bloque.
Repite la prueba con el teclado, una ventana gráfica estrecha y JavaScript desactivado.
Facilita la revisión de las actualizaciones de componentes
Ejemplos de componentes del sistema de diseño Europa Component Library
ecl-index.html — código fuente completo
Marcado completo del componente, contenido, indicadores integrados y rutas de los recursos 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>
Guarda el archivo HTML como index.html y conserva sin cambios los nombres de los demás archivos proporcionados.
ecl-app.js — código fuente completo
Inicialización nativa y comportamiento de los controles en bloque basado en eventos, con HTML inicial legible.
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();
Guarda el archivo HTML como index.html y conserva sin cambios los nombres de los demás archivos proporcionados.
04
Configuración del agente del sistema de diseño Europa Component Library
Punto de partida para la implementación
Abre http://localhost:8000/. El ejemplo usa el preset EC y no requiere descargas adicionales de iconos ni fuentes.
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
Una instrucción para tu proyecto
Instrucción para el agente
Implementa el encargo del acordeón ECL EC 4.11.2 proporcionado mediante los tres archivos completos. Conserva las relaciones nativas entre disparadores y paneles, el recuento basado en onToggle, la semántica de abrir y cerrar en bloque, la activación de botones con el teclado, la lectura sin JavaScript y el alcance explícito de la muestra original. No des a entender que se trata de un servicio oficial de la UE ni de una presentación formal.
05
Fuentes y alcance del sistema de diseño Europa Component Library
Una guía de aplicación de OpenDesign para ECL EC 4.11.2. Las notas de la muestra original y la composición de la página no representan un servicio de la Comisión Europea, una convocatoria de financiación ni un requisito legal.
