# sistema de design Europa Component Library ## Prévia da interface do sistema de design Europa Component Library Abra notas individuais, expanda ou feche todas as seções e confira o layout completo de leitura. ## Referência de design do sistema de design Europa Component Library Folha de estilos @ecl/preset-ec 4.11.2 e código-fonte do Accordion verificados. O comportamento nativo e a composição original do controle em lote são diferenciados explicitamente. ### Paleta do EC e papéis de status | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | --ecl-color-primary | #3860ed | Valores publicados da predefinição do EC. O azul da marca é distinto da cor primária de ação; as cores de status não substituem mensagens por escrito. | | --ecl-color-primary-140 | #0f2fa2 | Valores publicados da predefinição do EC. O azul da marca é distinto da cor primária de ação; as cores de status não substituem mensagens por escrito. | | --ecl-color-secondary | #ffbe5c | Valores publicados da predefinição do EC. O azul da marca é distinto da cor primária de ação; as cores de status não substituem mensagens por escrito. | | --ecl-color-dark | #26324b | Valores publicados da predefinição do EC. O azul da marca é distinto da cor primária de ação; as cores de status não substituem mensagens por escrito. | | --ecl-color-info | #3860ed | Valores publicados da predefinição do EC. O azul da marca é distinto da cor primária de ação; as cores de status não substituem mensagens por escrito. | | --ecl-color-success | #24a148 | Valores publicados da predefinição do EC. O azul da marca é distinto da cor primária de ação; as cores de status não substituem mensagens por escrito. | | --ecl-color-error | #da1e28 | Valores publicados da predefinição do EC. O azul da marca é distinto da cor primária de ação; as cores de status não substituem mensagens por escrito. | | --ecl-color-warning | #f39811 | Valores publicados da predefinição do EC. O azul da marca é distinto da cor primária de ação; as cores de status não substituem mensagens por escrito. | | --ecl-color-background | #fcfcfc | Valores publicados da predefinição do EC. O azul da marca é distinto da cor primária de ação; as cores de status não substituem mensagens por escrito. | | --ecl-color-branding | #004494 | Valores publicados da predefinição do EC. O azul da marca é distinto da cor primária de ação; as cores de status não substituem mensagens por escrito. | | --ecl-color-neutral-20 | #f8f9fd | Valores publicados da predefinição do EC. O azul da marca é distinto da cor primária de ação; as cores de status não substituem mensagens por escrito. | | --ecl-color-neutral-60 | #e0e5f5 | Valores publicados da predefinição do EC. O azul da marca é distinto da cor primária de ação; as cores de status não substituem mensagens por escrito. | | --ecl-color-white | #fff | Valores publicados da predefinição do EC. O azul da marca é distinto da cor primária de ação; as cores de status não substituem mensagens por escrito. | ### Escala de espaçamento | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | --ecl-spacing-2xs | 0.25rem | Escala real baseada em rem na predefinição fixada. A composição personalizada usa esses papéis sem inventar uma escala institucional diferente. | | --ecl-spacing-xs | 0.5rem | Escala real baseada em rem na predefinição fixada. A composição personalizada usa esses papéis sem inventar uma escala institucional diferente. | | --ecl-spacing-s | 0.75rem | Escala real baseada em rem na predefinição fixada. A composição personalizada usa esses papéis sem inventar uma escala institucional diferente. | | --ecl-spacing-m | 1rem | Escala real baseada em rem na predefinição fixada. A composição personalizada usa esses papéis sem inventar uma escala institucional diferente. | | --ecl-spacing-l | 1.25rem | Escala real baseada em rem na predefinição fixada. A composição personalizada usa esses papéis sem inventar uma escala institucional diferente. | | --ecl-spacing-xl | 1.5rem | Escala real baseada em rem na predefinição fixada. A composição personalizada usa esses papéis sem inventar uma escala institucional diferente. | | --ecl-spacing-2xl | 2rem | Escala real baseada em rem na predefinição fixada. A composição personalizada usa esses papéis sem inventar uma escala institucional diferente. | | --ecl-spacing-3xl | 2.5rem | Escala real baseada em rem na predefinição fixada. A composição personalizada usa esses papéis sem inventar uma escala institucional diferente. | | --ecl-spacing-4xl | 3rem | Escala real baseada em rem na predefinição fixada. A composição personalizada usa esses papéis sem inventar uma escala institucional diferente. | | --ecl-spacing-5xl | 3.5rem | Escala real baseada em rem na predefinição fixada. A composição personalizada usa esses papéis sem inventar uma escala institucional diferente. | | --ecl-spacing-6xl | 4rem | Escala real baseada em rem na predefinição fixada. A composição personalizada usa esses papéis sem inventar uma escala institucional diferente. | ### Tipografia e largura de leitura | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | --ecl-font-family-default | arial,sans-serif | Os valores abreviados completos incluem peso, tamanho, altura da linha e fonte alternativa. A família de fontes usada nesta interface EC é Arial; não é necessária uma fonte web personalizada. | | --ecl-font-xs | normal normal 400 0.75rem/1.125rem arial,sans-serif | Os valores abreviados completos incluem peso, tamanho, altura da linha e fonte alternativa. A família de fontes usada nesta interface EC é Arial; não é necessária uma fonte web personalizada. | | --ecl-font-s | normal normal 400 0.875rem/1.125rem arial,sans-serif | Os valores abreviados completos incluem peso, tamanho, altura da linha e fonte alternativa. A família de fontes usada nesta interface EC é Arial; não é necessária uma fonte web personalizada. | | --ecl-font-m | normal normal 400 1rem/1.5rem arial,sans-serif | Os valores abreviados completos incluem peso, tamanho, altura da linha e fonte alternativa. A família de fontes usada nesta interface EC é Arial; não é necessária uma fonte web personalizada. | | --ecl-font-l | normal normal 400 1.25rem/1.75rem arial,sans-serif | Os valores abreviados completos incluem peso, tamanho, altura da linha e fonte alternativa. A família de fontes usada nesta interface EC é Arial; não é necessária uma fonte web personalizada. | | --ecl-font-xl | normal normal 400 1.5rem/2.25rem arial,sans-serif | Os valores abreviados completos incluem peso, tamanho, altura da linha e fonte alternativa. A família de fontes usada nesta interface EC é Arial; não é necessária uma fonte web personalizada. | | --ecl-font-2xl | normal normal 400 1.75rem/2.25rem arial,sans-serif | Os valores abreviados completos incluem peso, tamanho, altura da linha e fonte alternativa. A família de fontes usada nesta interface EC é Arial; não é necessária uma fonte web personalizada. | | --ecl-font-3xl | normal normal 400 2.5rem/2.75rem arial,sans-serif | Os valores abreviados completos incluem peso, tamanho, altura da linha e fonte alternativa. A família de fontes usada nesta interface EC é Arial; não é necessária uma fonte web personalizada. | | --ecl-font-4xl | normal normal 400 3.25rem/3.375rem arial,sans-serif | Os valores abreviados completos incluem peso, tamanho, altura da linha e fonte alternativa. A família de fontes usada nesta interface EC é Arial; não é necessária uma fonte web personalizada. | | --ecl-max-width | 80ch | Os valores abreviados completos incluem peso, tamanho, altura da linha e fonte alternativa. A família de fontes usada nesta interface EC é Arial; não é necessária uma fonte web personalizada. | ### Contrato do acordeão nativo | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | Initialization | data-ecl-auto-init="Accordion" + ECL.autoInit() | Inicializa este componente dentro da predefinição; não é necessário usar um wrapper de framework. | | Trigger | data-ecl-accordion-toggle | O listener nativo é associado ao botão de cada título. | | Target | aria-controls matches a panel ID | Alvos ausentes causam um erro; cada ID deve ser exclusivo. | | Open state | aria-expanded + panel.hidden | O runtime altera tanto a semântica quanto o conteúdo visível. | | Event | root.ECLAccordion.on("onToggle", callback) | O exemplo calcula a quantidade de seções abertas após uma alternância nativa. | | Event payload | { item, isOpening } | O item é o painel de destino, não um índice de array nem uma aba selecionada. | | Independent panels | Several may be open together | Abrir todas é um comportamento original da aplicação que ativa os botões nativos de acionamento. | ## Guia completo do sistema de design Europa Component Library Um guia prático para escolher, aplicar e avaliar este sistema em uma interface real. Orientações completas, um ponto de partida para a implementação e links para o código-fonte. ## Predefinição Europa EC e escolha de versão do sistema de design Europa Component Library ### Escolha EC ou EU antes de importar os recursos > O Europa oferece predefinições institucionais distintas. Este exemplo usa deliberadamente @ecl/preset-ec na versão 4.11.2, correspondente à documentação EC vinculada. Ele não mistura marcação EU, capturas de tela históricas do EC e uma folha de estilos sem versão fixada. O pacote fornece dist/styles/ecl-ec.css e dist/scripts/ecl-ec.js, portanto o exemplo estático pode ser servido sem introduzir um framework frontend. - Use a predefinição EC para a implementação EC mostrada aqui. - Mantenha CSS e JavaScript na mesma versão. - Mantenha os IDs de origem exclusivos ao reutilizar itens do acordeão. ### Trate isto como uma implementação versionada A referência descreve a versão 4.11.2; isso não significa que todas as versões posteriores tenham tokens ou comportamentos idênticos. Nas atualizações, compare o preset escolhido, a marcação dos componentes e a inicialização em conjunto. Um novo nome de pacote ou número de versão, por si só, não comprova que um padrão copiado anteriormente ainda funcione corretamente. ## Sistema de design Europa Component Library Europa: papéis de cor e identidade institucional do sistema de design ### Mantenha a identidade visual separada da ação principal A cor de identidade visual do preset é #004494, enquanto a cor primária é #3860ed. O briefing original usa a cor de identidade visual apenas em uma faixa superior estreita e deixa que o componente use seu próprio estilo de ação primária. Neutral-20 serve de fundo para a página, e Neutral-60 separa o conteúdo. Assim, preserva-se a distinção entre um destaque institucional e a cor de um controle interativo. ### Não atribua um significado oficial ao exemplo A página é um estudo de OpenDesign com notas fictícias de consulta. Ela não inclui o logotipo da Comissão Europeia nem representa um edital de financiamento, serviço ou requisito legal. As cores de erro, aviso e sucesso estão listadas como tokens reais, mas a demonstração não gera uma mensagem artificial de sucesso na solicitação apenas para exibir todas as cores. ## Sistema de design Europa Component Library Europa: tipografia e escala de espaçamento do sistema de design ### Use valores completos de abreviação de fonte O preset EC define Arial como fonte padrão para telas. A função m usa 1rem, entrelinha de 1.5rem e peso 400; as funções maiores têm suas próprias entrelinhas. A referência inclui declarações completas, não apenas tamanhos de fonte isolados. O peso dos títulos do estudo é uma escolha original de ênfase aplicada à função fornecida, enquanto o texto dos componentes permanece sob o controle da folha de estilos nativa. ### Mantenha visíveis os espaçamentos em rem e a largura de leitura A sequência de espaçamentos inclui 0.25, 0.5, 0.75, 1, 1.25, 1.5, 2, 2.5, 3, 3.5 e 4rem. A largura máxima de leitura nativa é 80ch. O layout original usa um limite externo centralizado de 1080px e espaçamento interno responsivo, enquanto cada acordeão mantém o espaçamento próprio do preset. A largura externa é uma decisão de composição, não um novo token oficial. ## Sistema de design Europa Component Library Europa: marcação e comportamento nativo do acordeão do sistema de design ### Faça com que os botões dos títulos controlem painéis reais Cada .ecl-accordion__item contém um título com um botão .ecl-accordion__toggle. O atributo aria-controls aponta para o painel .ecl-accordion__content correspondente. O exemplo inclui um ID estável para o acionador e aria-labelledby em cada região. O script nativo encontra o alvo pelo ID, altera aria-expanded e modifica panel.hidden; essas relações precisam continuar corretas se os itens forem reordenados ou copiados. ### Use um indicador explícito sem sprite externo O exemplo inclui caminhos SVG originais simples de mais e menos dentro das classes nativas do indicador de alternância. O preset controla qual deles é exibido quando o painel está expandido. São formas geométricas simples e originais, não logotipos institucionais copiados. Assim, o exemplo permanece totalmente independente e evita o carregamento de sprites entre origens diferentes, sem alterar a estrutura do componente. ## Sistema de design Europa Component Library Europa: eventos do acordeão e comportamento de abrir todas as seções do sistema de design ### Derive o estado do componente nativo ECL.autoInit() disponibiliza o componente inicializado em root.ECLAccordion. A aplicação escuta o evento onToggle e calcula quantos botões acionadores têm aria-expanded="true" no momento. O payload do evento inclui o item de destino e isOpening, úteis para o tratamento individual de cada painel. A contagem não deduz o estado pelo texto visível nem mantém um segundo array independente com os estados abertos. ### Mantenha previsível a ação em lote Quando todos os painéis estão abertos, a ação em lote os fecha; caso contrário, abre todos. O manipulador ativa apenas os botões nativos cujo estado precisa mudar. Ele não altera hidden nem aria-expanded diretamente, mantendo consistentes os eventos nativos e a contagem derivada. O rótulo do controle alterna entre Abrir todas as seções e Fechar todas as seções para comunicar a próxima ação. ## Sistema de design Europa Component Library Europa: navegação por teclado e leitura progressiva no sistema de design ### Use a interação normal dos botões A tecla Tab leva a um botão de título, enquanto Enter ou Espaço o ativa pelo comportamento nativo dos botões no navegador. Este componente é um acordeão, não uma lista de abas: não se deve adicionar navegação entre abas pelas teclas de seta por analogia. Vários painéis podem permanecer abertos, facilitando a comparação das notas. O indicador de foco vem da folha de estilos do componente e permanece visível sobre a superfície clara. ### Mantenha o texto legível sem JavaScript O código-fonte HTML começa com todos os painéis visíveis e aria-expanded="true". Após a inicialização nativa ser concluída com sucesso, a aplicação os recolhe ativando os respectivos botões. Portanto, com JavaScript desativado, o texto continua visível, e a barra de ferramentas inativa é ocultada pelo estilo no-js. Esse fallback foi testado verificando a visibilidade real, não apenas a presença dos parágrafos no código-fonte. ## Sistema de design Europa Component Library Europa: painéis responsivos e conteúdo extenso do sistema de design ### Permita altura natural e quebra de linha O documento não usa altura fixa nos acordeões. As notas expandidas podem crescer para acomodar títulos, listas numeradas e uma nota de decisão destacada. Em telas menores, o espaçamento externo original diminui e o título principal usa uma função tipográfica fornecida de tamanho menor. O texto longo dos acionadores quebra em várias linhas, mantendo o indicador acessível. Isso foi verificado em 280px e também em larguras de desktop, tablet e celular. ### Não transforme os controles de leitura em um fluxo de aprovação Abrir ou fechar um painel altera apenas a apresentação. A contagem informa quantas seções estão abertas, não quantas foram concluídas ou quantos requisitos foram atendidos. O rodapé informa que nenhuma resposta à consulta nem aprovação formal é enviada. Um serviço real precisaria de regras próprias de elegibilidade, persistência e comportamento no back-end, nada disso estando implícito na demonstração do componente. ## Sistema de design Europa Component Library Europa: configuração estática completa do sistema de design ### Instale o preset correspondente e salve todos os arquivos O index.html fornecido carrega a folha de estilos predefinida fixada e o script do navegador antes de ecl-app.js. Salve os arquivos ecl.css e ecl-app.js que acompanham o exemplo no mesmo diretório e disponibilize a pasta por HTTP. Todo o conteúdo, os SVGs dos indicadores e os manipuladores de estado estão incluídos. Não há estrutura de aplicação oculta nem necessidade de baixar ícones separadamente para este estudo. 1. Instale a predefinição EC fixada. 2. Salve index.html, ecl.css e ecl-app.js juntos. 3. Disponibilize o diretório e teste as alternâncias individuais e em lote. 4. Repita o teste com o teclado, em uma janela estreita e com JavaScript desativado. ### Mantenha as atualizações de componentes fáceis de revisar Após uma atualização, verifique os IDs que relacionam os acionadores aos painéis, a inicialização, o listener onToggle, o estado do controle em lote e a visualização sem JavaScript. Em seguida, compare a tipografia, as cores e o layout em telas estreitas com o resultado esperado. Instalar o pacote e ver um título renderizado não são evidências suficientes de que todo o conteúdo expansível continua funcionando. ## Exemplos de componentes do sistema de design Europa Component Library ### ecl-index.html — código-fonte completo Marcação completa do componente, conteúdo, indicadores em linha e caminhos dos recursos predefinidos. ``` 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.

``` Referência de código - Salve o arquivo HTML como index.html e mantenha inalterados os nomes dos outros arquivos fornecidos. ### ecl.css — código-fonte completo Composição responsiva original com a estilização nativa dos 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}} ``` Referência de código - Salve o arquivo HTML como index.html e mantenha inalterados os nomes dos outros arquivos fornecidos. ### ecl-app.js — código-fonte completo Inicialização nativa e comportamento em lote orientado a eventos, com HTML inicial legível. ``` 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(); ``` Referência de código - Salve o arquivo HTML como index.html e mantenha inalterados os nomes dos outros arquivos fornecidos. ## Configuração do agente de IA do sistema de design Europa Component Library ### Ponto de partida para implementação Abra http://localhost:8000/. O exemplo usa a predefinição EC e não requer downloads adicionais de ícones ou fontes. ``` 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 ``` ### Um prompt para seu projeto ``` Implemente o briefing fornecido para o acordeão ECL EC 4.11.2 usando os três arquivos completos. Preserve as relações nativas entre acionadores e painéis, a contagem baseada em onToggle, a semântica de abrir/fechar em lote, a ativação dos botões pelo teclado, a leitura sem JavaScript e o escopo explícito da amostra original. Não dê a entender que se trata de um serviço oficial da UE ou de um processo formal de candidatura. ``` ## Fontes e escopo do sistema de design Europa Component Library Um guia de aplicação de OpenDesign para ECL EC 4.11.2. As notas originais da amostra e a composição da página não representam um serviço da Comissão Europeia, um convite à apresentação de propostas de financiamento ou uma exigência legal. - Introdução ao EC Recursos predefinidos e configuração da implementação. - Orientações sobre acordeões Contexto e referência de uso do componente. - Papéis das cores Paleta principal, de identidade visual, neutra e de estados. - Folha de estilos da predefinição fixada Os valores exatos usados neste exemplo. ## Recursos relacionados ao sistema de design Europa Component Library ### gov.cz sistema de design Explore as funções reais das cores, os espaços de cartões e a paginação nativa do Gov Design System CE com um kit completo de leitura de seis recursos, incluindo estados explícitos de foco e página. ### GOV.UK sistema de design Crie um fluxo de perguntas e conferência de respostas no estilo GOV.UK com a escala tipográfica atual v6, espaçamento responsivo, cores funcionais, validação vinculada e integração concreta com Frontend. ### HarvardSites sistema de design Entenda o HarvardSites como uma plataforma editorial: compare estilos de sites, escolha combinações de fontes documentadas e monte páginas universitárias com componentes de conteúdo desenvolvidos para esse fim. - [Referência de implementação](https://ec.europa.eu/component-library/v4.11.2/ec/components/accordion/usage/) - [Fonte](https://ec.europa.eu/component-library/v4.11.2/ec/guidelines/colours/) - [Fonte](https://ec.europa.eu/component-library/v4.11.2/ec/guidelines/spacing/) - [Fonte](https://ec.europa.eu/component-library/v4.11.2/ec/guidelines/typography/) - [Fonte](https://cdn.jsdelivr.net/npm/@ecl/vanilla-component-accordion@4.11.2/accordion.js) - [Referência de código](https://ec.europa.eu/component-library/v4.11.2/ec/getting-started/) - [Introdução ao EC Recursos predefinidos e configuração da implementação.](https://ec.europa.eu/component-library/v4.11.2/ec/getting-started/) - [Orientações sobre acordeões Contexto e referência de uso do componente.](https://ec.europa.eu/component-library/v4.11.2/ec/components/accordion/usage/) - [Papéis das cores Paleta principal, de identidade visual, neutra e de estados.](https://ec.europa.eu/component-library/v4.11.2/ec/guidelines/colours/) - [Folha de estilos da predefinição fixada Os valores exatos usados neste exemplo.](https://cdn.jsdelivr.net/npm/@ecl/preset-ec@4.11.2/dist/styles/ecl-ec.css)