Examine as funções de cor EC, tipografia e espaçamento do Europa por meio de um briefing completo com acordeão nativo, incluindo navegação por teclado, comportamento de abrir tudo e uma alternativa legível sem JavaScript.
Runtime nativo do EC 4.11.2 CSS e do Accordion, com conteúdo original e controle para abrir todas as seções. · Referência de implementação
02
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.
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.
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
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.
Instale a predefinição EC fixada.
Salve index.html, ecl.css e ecl-app.js juntos.
Disponibilize o diretório e teste as alternâncias individuais e em lote.
Repita o teste com o teclado, em uma janela estreita e com JavaScript desativado.
Mantenha as atualizações de componentes fáceis de revisar
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.
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>
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.
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();
Salve o arquivo HTML como index.html e mantenha inalterados os nomes dos outros arquivos fornecidos.
04
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.
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
Um prompt para seu projeto
Prompt para agente de IA
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.
05
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.
