# Sistema de diseño Europa Component Library ## Vista previa de la interfaz del sistema de diseño Europa Component Library Abre notas individuales, despliega o cierra todas las secciones y consulta la vista de lectura completa. ## 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. ### Paleta de EC y roles de estado | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | --ecl-color-primary | #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-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. | ### Escala de espaciado | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | --ecl-spacing-2xs | 0.25rem | Escala real basada en rem del preajuste fijado. La composición personalizada utiliza estos roles sin inventar una escala institucional distinta. | | --ecl-spacing-xs | 0.5rem | Escala real basada en rem del preajuste fijado. La composición personalizada utiliza estos roles sin inventar una escala institucional distinta. | | --ecl-spacing-s | 0.75rem | Escala real basada en rem del preajuste fijado. La composición personalizada utiliza estos roles sin inventar una escala institucional distinta. | | --ecl-spacing-m | 1rem | Escala real basada en rem del preajuste fijado. La composición personalizada utiliza estos roles sin inventar una escala institucional distinta. | | --ecl-spacing-l | 1.25rem | Escala real basada en rem del preajuste fijado. La composición personalizada utiliza estos roles sin inventar una escala institucional distinta. | | --ecl-spacing-xl | 1.5rem | Escala real basada en rem del preajuste fijado. La composición personalizada utiliza estos roles sin inventar una escala institucional distinta. | | --ecl-spacing-2xl | 2rem | Escala real basada en rem del preajuste fijado. La composición personalizada utiliza estos roles sin inventar una escala institucional distinta. | | --ecl-spacing-3xl | 2.5rem | Escala real basada en rem del preajuste fijado. La composición personalizada utiliza estos roles sin inventar una escala institucional distinta. | | --ecl-spacing-4xl | 3rem | Escala real basada en rem del preajuste fijado. La composición personalizada utiliza estos roles sin inventar una escala institucional distinta. | | --ecl-spacing-5xl | 3.5rem | Escala real basada en rem del preajuste fijado. La composición personalizada utiliza estos roles sin inventar una escala institucional distinta. | | --ecl-spacing-6xl | 4rem | Escala real basada en rem del preajuste fijado. La composición personalizada utiliza estos roles sin inventar una escala institucional distinta. | ### Tipografía y ancho de lectura | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | --ecl-font-family-default | 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-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. | ### Contrato del acordeón nativo | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | Initialization | data-ecl-auto-init="Accordion" + ECL.autoInit() | Inicializa este componente dentro del preajuste; no se necesita un contenedor de framework. | | Trigger | data-ecl-accordion-toggle | El listener nativo se asocia a cada botón de encabezado. | | Target | aria-controls matches a panel ID | Los destinos inexistentes provocan un error; cada ID debe ser único. | | Open state | aria-expanded + panel.hidden | El entorno de ejecución modifica tanto la semántica como el contenido visible. | | Event | root.ECLAccordion.on("onToggle", callback) | El ejemplo calcula el número de secciones abiertas tras una alternancia nativa. | | Event payload | { item, isOpening } | El elemento es el panel de destino, no un índice de matriz ni una pestaña seleccionada. | | Independent panels | Several may be open together | Abrir todo es un comportamiento original de la aplicación que activa los botones de activación nativos. | ## Guía completa del sistema de diseño Europa Component Library Una guía práctica para elegir, aplicar y revisar este sistema en una interfaz real. Orientación completa, un punto de partida para la implementación y enlaces al código fuente. ## 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 El ejemplo incluye trazados SVG sencillos originales de suma y resta dentro de las clases nativas del indicador de alternancia. El preset determina cuál se muestra cuando el panel está expandido. Son formas geométricas originales y simples, no logotipos institucionales copiados. Así, el ejemplo completo se mantiene autónomo y evita cargar sprites de otros orígenes, sin alterar la estructura del componente. ## 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. 1. Instala el preset EC fijado. 2. Guarda juntos index.html, ecl.css y ecl-app.js. 3. Sirve el directorio y prueba los controles individuales y en bloque. 4. Repite la prueba con el teclado, una ventana gráfica estrecha y JavaScript desactivado. ### Facilita la revisión de las actualizaciones de componentes Después de una actualización, comprueba los ID de los disparadores y paneles, la inicialización, el listener onToggle, el estado de los controles en bloque y la vista sin JavaScript. Después, compara la tipografía, los colores y la disposición en pantallas estrechas reales. La instalación del paquete y la visualización de un encabezado no bastan para demostrar que todo el contenido expandible sigue funcionando. ## 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. ``` Public conversation brief

European Commission preset / original study

A clear brief for a public conversation

Explore three preparation notes with native ECL expandable sections and an explicit open-all control.

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.

0 of 3 sections open

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.

Make a decision possible

  1. State which decision the conversation will inform.
  2. List information already available before asking participants for more.
  3. Name what remains outside the consultation.

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.

Provide usable alternatives

  1. Offer a plain-language explanation of the activity.
  2. Allow a person to contribute without speaking to the whole group.
  3. Explain how to ask for an accessible format.

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.

Prepare a readable follow-up

  1. Write the next action with an owner and review date.
  2. Make open questions visible alongside conclusions.
  3. Invite participants to correct an inaccurate summary.

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.

``` Referencia de código - Guarda el archivo HTML como index.html y conserva sin cambios los nombres de los demás archivos proporcionados. ### ecl.css — código fuente completo Composición adaptable original en torno al estilo nativo de los componentes ECL. ``` *{box-sizing:border-box}body{margin:0;background:var(--ecl-color-neutral-20);font:var(--ecl-font-m);color:var(--ecl-color-dark)}main{max-width:1080px;margin:auto;padding:40px}.mast{border-top:6px solid var(--ecl-color-branding);padding:32px;background:white}.eyebrow{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--ecl-color-primary-140)}h1{font:var(--ecl-font-3xl);font-weight:700;margin:16px 0;max-width:22ch}.mast p{max-width:72ch}.scope{font:var(--ecl-font-s);margin:24px 0;max-width:90ch}.toolbar{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;margin:32px 0 16px}.toolbar p{margin:0}.ecl-accordion{background:white}.ecl-accordion__toggle-title{padding-right:16px}.ecl-accordion__toggle-icon{width:24px;height:24px}.ecl-accordion__content p:first-child{margin-top:0}.ecl-accordion__content ol,.ecl-accordion__content ul{padding-left:24px}.ecl-accordion__content li{margin:8px 0}.ecl-accordion__content h3{font-size:18px;line-height:1.4}.decision{border-left:4px solid var(--ecl-color-secondary);padding:16px;background:var(--ecl-color-neutral-20);margin:24px 0}.footer{font:var(--ecl-font-s);margin-top:24px;border-top:1px solid var(--ecl-color-neutral-60);padding-top:24px}.no-js .toolbar{display:none}@media(max-width:600px){main{padding:16px}.mast{padding:24px}h1{font:var(--ecl-font-2xl);font-weight:700}.ecl-accordion__toggle{overflow-wrap:anywhere}} ``` Referencia de código - 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. ``` 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(); ``` Referencia de código - Guarda el archivo HTML como index.html y conserva sin cambios los nombres de los demás archivos proporcionados. ## 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. ``` 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 ``` ### Una instrucción para tu proyecto ``` 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. ``` ## 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. - Introducción a EC Recursos del preset y configuración de la implementación. - Orientación sobre acordeones Contexto y referencia de uso del componente. - Funciones del color Paleta principal, de marca, neutra y de estados. - Hoja de estilos del preset fijado Los valores exactos utilizados en este ejemplo. ## Recursos relacionados con el sistema de diseño Europa Component Library ### gov.cz sistema de diseño Explora los roles de color reales, los espacios para tarjetas y la paginación nativa de Gov Design System CE mediante un kit completo de lectura con seis recursos, que incluye estados explícitos de enfoque y página. ### GOV.UK sistema de diseño Crea un recorrido de preguntas y comprobación de respuestas al estilo GOV.UK con la escala tipográfica v6 actual, espaciado adaptable, colores funcionales, validación vinculada e integración concreta con Frontend. ### HarvardSites sistema de diseño Conoce HarvardSites como plataforma editorial: compara estilos de sitio, elige combinaciones tipográficas documentadas y crea páginas universitarias con componentes de contenido diseñados para cada propósito. - [Referencia de implementación](https://ec.europa.eu/component-library/v4.11.2/ec/components/accordion/usage/) - [Fuente](https://ec.europa.eu/component-library/v4.11.2/ec/guidelines/colours/) - [Fuente](https://ec.europa.eu/component-library/v4.11.2/ec/guidelines/spacing/) - [Fuente](https://ec.europa.eu/component-library/v4.11.2/ec/guidelines/typography/) - [Fuente](https://cdn.jsdelivr.net/npm/@ecl/vanilla-component-accordion@4.11.2/accordion.js) - [Referencia de código](https://ec.europa.eu/component-library/v4.11.2/ec/getting-started/) - [Introducción a EC Recursos del preset y configuración de la implementación.](https://ec.europa.eu/component-library/v4.11.2/ec/getting-started/) - [Orientación sobre acordeones Contexto y referencia de uso del componente.](https://ec.europa.eu/component-library/v4.11.2/ec/components/accordion/usage/) - [Funciones del color Paleta principal, de marca, neutra y de estados.](https://ec.europa.eu/component-library/v4.11.2/ec/guidelines/colours/) - [Hoja de estilos del preset fijado Los valores exactos utilizados en este ejemplo.](https://cdn.jsdelivr.net/npm/@ecl/preset-ec@4.11.2/dist/styles/ecl-ec.css)