Explore a tipografia, os tokens semânticos e os componentes web nativos do GC Design System por meio de um guia de preparação completo e pesquisável, com comportamento de divulgação e estado vazio.
Elementos personalizados nativos de input, details e button do GC Design System 1.6.0; conteúdo e filtragem locais originais. · Referência de implementação
02
Referência de design sistema de design Canada.ca
Exports e contratos dos componentes publicados de @gcds-core/components 1.6.0 CSS; a prévia local incorpora @gcds-core/fonts 1.1.1.
Escopo do pacote e dos componentes atuais do sistema de design Canada.ca
Use o namespace atual
O GC Design System é o sistema de componentes usado neste recurso do Canada.ca. O exemplo fixa a versão @gcds-core/components 1.6.0 e registra os elementos personalizados independentes input, details e button. Exemplos mais antigos podem usar o namespace @cdssnc. Siga a versão do pacote realmente instalada, em vez de misturar código de registro de versões diferentes.
Mantenha o estudo de conteúdo separado de um serviço
O exemplo apresenta seis tópicos de preparação elaborados. Não inclui assinatura do Governo do Canadá, integração com agendamento nem afirmações sobre documentos obrigatórios. Seu objetivo é demonstrar um padrão real de conteúdo expansível e pesquisável. Reutilizar os componentes não estabelece que um aplicativo seja um serviço oficial nem que seu conteúdo atenda a todos os requisitos do Canada.ca.
Tipografia e ritmo de leitura do sistema de design Canada.ca
Carregue as duas famílias tipográficas
Os títulos usam Lato e o texto corrido usa Noto Sans. O estilo publicado para o texto do corpo em desktop usa 1.25rem com altura de linha de 160%; a referência exportada de largura legível é 65ch. Esses valores criam um ritmo de leitura bem mais aberto do que o de um painel compacto. A prévia local incorpora os arquivos de fontes publicados para evitar que uma falha ao carregar fontes externas altere o resultado sem aviso.
Respeite a declaração abreviada completa da fonte
A tabela de tokens inclui a declaração abreviada real de fonte do CSS, não apenas os tamanhos nominais em pixels. Peso, altura de linha e família tipográfica são importantes em conjunto. O título principal usa um sublinhado vermelho curto como detalhe de composição inspirado no Canada.ca; a largura de 72px não é apresentada como um token geral de espaçamento do GC. Em uma área de visualização estreita, o layout passa a ter uma coluna, mantendo o texto do corpo legível.
Cor semântica e comportamento do foco em sistema de design Canada.ca
Use papéis públicos para estados significativos
O texto principal usa #333, o secundário usa #595959 e a cor de superfície azul suave usa #26374a. Links, foco e perigo têm papéis distintos no CSS exportado. Um link não se distingue apenas pela mudança de cor: o elemento nativo de detalhes também oferece um indicativo visual e um estado acessível de expansão.
Não remova o indicador de foco visível
O campo e os botões nativos fornecem o comportamento de foco dos componentes. A aplicação CSS cuida do layout ao redor sem acessar raízes shadow para apagar contornos. A redefinição devolve o foco ao campo de pesquisa para que quem usa o teclado possa ajustar a consulta imediatamente. O Shadow DOM altera a aplicação de estilos personalizados e regras de visibilidade; por isso, inspecione o componente renderizado em vez de presumir que seletores comuns de elementos abrangem todos os estados.
Sistema de design Canada.ca Detalhes: conteúdo e prioridade das informações
Use elementos expansíveis para explicações complementares
Cada gcds-details nativo recebe um título em details-title e um texto complementar no slot padrão. As instruções essenciais permanecem visíveis na barra lateral. Um horário real de atendimento, endereço ou requisito não deve estar disponível apenas após a expansão de um painel. Os seis tópicos de exemplo são intencionalmente informativos: não coletam dados de identidade nem simulam um agendamento concluído.
Mantenha visíveis as informações essenciais sobre o serviço, sem exigir expansão.
Use um título curto e específico para os detalhes.
Evite elementos expansíveis aninhados que dificultem encontrar o conteúdo.
Preserve o estado dos elementos expansíveis durante a filtragem
Sistema de design Canada.ca Estado da pesquisa e recuperação quando não há resultados
Escute o evento personalizado documentado
gcds-input exige label, input-id e name. O evento gcdsInput disponibiliza o novo valor em event.detail. A aplicação compara a consulta, sem espaços nas extremidades e em letras minúsculas, com os títulos e o texto dos tópicos. Uma mensagem de status dinâmica informa a quantidade de resultados visíveis; se nenhum tópico corresponder, uma mensagem útil orienta a recuperação em vez de deixar uma área vazia sem explicação.
Faça da redefinição uma transição completa
O botão nativo secundário limpa o valor do componente, restaura as seis entradas e move o foco para o campo interno. Ele não redefine qual elemento expansível a pessoa já abriu. Essa separação mantém previsíveis o estado da consulta e o estado da leitura. Uma pesquisa de produção em um conjunto de dados remoto também precisaria definir regras para carregamento, falhas na solicitação e ordenação dos resultados; esse filtro local de seis itens não precisa sugerir que essas funcionalidades existem.
Sistema de design Canada.ca Integração completa de JavaScript
Reproduza o exemplo funcional
Crie um projeto Vite vanilla, instale o pacote do componente na versão fixada e substitua o arquivo de entrada pelo JavaScript completo abaixo. Salve canada.css ao lado dele e mantenha um elemento raiz de montagem. Os pontos de entrada diretos dos elementos personalizados registram as dependências necessárias; o pacote CSS fornece a camada de tokens. O código-fonte contém o conjunto de dados completo, o registro, a filtragem e o comportamento de redefinição.
Instale o pacote na versão fixada em um projeto Vite vanilla.
Salve o arquivo de entrada completo e canada.css, mantendo o elemento raiz de montagem.
Pesquise uma palavra sem correspondências e verifique a mensagem de recuperação.
Redefina, expanda um tópico e filtre novamente para verificar se o estado de leitura foi preservado.
Oculte os contêineres dos resultados sem destruir o estado dos elementos expansíveis
Coloque cada gcds-details dentro de um contêiner comum e alterne o estado hidden desse contêiner durante a filtragem. Caso contrário, as próprias regras de exibição de um elemento personalizado podem contrariar o que se espera de seletores genéricos de CSS. Mantenha as instâncias montadas para que um tópico expandido volte ao mesmo estado quando a consulta for apagada.
A pesquisa e os elementos expansíveis são controles separados. Leia a consulta em event.detail do evento gcdsInput, anuncie a quantidade de resultados e deixe o elemento details nativo controlar o próprio estado de expansão. A redefinição deve atualizar tanto o valor do componente quanto o modelo da consulta e, em seguida, devolver o foco ao campo. Recriar toda a região de resultados faria a pessoa perder a posição de leitura.
Sistema de design Canada.ca Exemplos de componentes do sistema de design
main.js — filtro completo de tópicos nativo
Arquivo de entrada completo, com registro dos componentes, tópicos definidos no código, filtragem, preservação dos elementos expansíveis e redefinição.
javascript
import {defineCustomElement as input} from '@gcds-core/components/dist/components/gcds-input.js';
import {defineCustomElement as details} from '@gcds-core/components/dist/components/gcds-details.js';
import {defineCustomElement as button} from '@gcds-core/components/dist/components/gcds-button.js';
import '@gcds-core/components/dist/gcds/gcds.css';
import './canada.css';
input();details();button();
document.getElementById('root').innerHTML=`<main><p class="eyebrow">GC DESIGN SYSTEM / ORIGINAL CONTENT STUDY</p><h1>Prepare for an appointment</h1><p class="lead">Find a preparation topic in this fictional service guide. These are sample explanations, not government requirements.</p><div class="search-row"><gcds-input id="filter" input-id="topic-search" name="topic-search" label="Filter preparation topics" hint="Try time, access or documents." type="search"></gcds-input><gcds-button id="reset" button-role="secondary" type="button">Reset filter</gcds-button></div><div class="layout"><section aria-labelledby="topic-heading"><h2 id="topic-heading">Preparation topics</h2><p id="count" role="status"></p><div id="topics"></div><div id="empty" hidden><h3>No matching topic</h3><p>Try a shorter word or reset the filter.</p></div></section><aside><h2>Before you continue</h2><p>Important information stays visible. Expandable details are reserved for supporting explanations.</p><ol><li>Confirm the purpose of the appointment with the real service.</li><li>Check its current requirements and contact information.</li><li>Ask for help if an instruction is unclear.</li></ol><p class="small">Native GC Design System components 1.6.0. No official identity marks or real service claims are used.</p></aside></div></main>`;
const topics=[['Confirm the time','Check the time and time zone shown in a real booking confirmation. This sample does not contain a live appointment.'],['Review the location','A real service should provide an address or joining instructions. A location belongs in visible booking details, not only inside a collapsed panel.'],['Plan access needs','Ask the service about accessibility arrangements through its official contact route. This sample demonstrates disclosure behavior and does not promise a particular accommodation.'],['Check documents','Follow the actual service’s published document requirements. This authored example intentionally does not invent a list of mandatory identity documents.'],['Keep a reference','If the service provides a booking reference, keep it with your confirmation. Do not paste personal reference numbers into this public specimen.'],['Prepare questions','Write down what you want to understand. In a real service, clear preparation content can reduce the need to remember questions during the appointment.']];const $=id=>document.getElementById(id);const entries=topics.map(([title,text])=>{const el=document.createElement('gcds-details');el.setAttribute('details-title',title);const p=document.createElement('p');p.textContent=text;el.append(p);const wrapper=document.createElement('div');wrapper.append(el);$('topics').append(wrapper);return{el,wrapper,title,text}});function render(q=''){let count=0;for(const item of entries){item.wrapper.hidden=!(item.title+' '+item.text).toLowerCase().includes(q.trim().toLowerCase());if(!item.wrapper.hidden)count++}$('count').textContent=count+' of '+topics.length+' sample topics';$('empty').hidden=count>0}$('filter').addEventListener('gcdsInput',e=>render(e.detail));$('reset').addEventListener('click',()=>{$('filter').value='';render();$('filter').shadowRoot.querySelector('input')?.focus()});render();
Salve como src/main.js com um elemento raiz de montagem. O pacote publicado CSS carrega os URLs das fontes padrão; esta prévia local incorpora as mesmas fontes públicas.
canada.css — composição de conteúdo responsiva
Layout original da página, disposto ao redor dos estilos nativos dos componentes.
O ponto de interrupção do layout e a geometria do sublinhado do título são decisões específicas deste exemplo, não tokens oficiais adicionais.
04
Sistema de design Canada.ca Configuração do agente
Ponto de partida para implementação
A prévia local executa os elementos personalizados na versão fixada; não requer serviço remoto nem credenciais.
sh
npm create vite@latest gc-topics -- --template vanilla
cd gc-topics
npm install
npm install @gcds-core/[email protected]
# Replace src/main.js and add src/canada.css; keep <div id="root"></div>.
npm run dev
Um prompt para seu projeto
Prompt para agente de IA
Crie o guia de preparação com seis tópicos usando o GC Design System 1.6.0. Carregue a tipografia e os tokens CSS oficiais, use os componentes nativos de campo, detalhes e botão, preserve o estado dos elementos expansíveis durante a filtragem, anuncie a quantidade de resultados e ofereça um comportamento completo de redefinição. Mantenha o conteúdo essencial visível e diferencie as explicações de exemplo dos requisitos oficiais do serviço.
05
Sistema de design Canada.ca Fontes e escopo
Estudo de uma aplicação Canada.ca criada com OpenDesign e usando o GC Design System 1.6.0. Os tópicos de exemplo são orientações fictícias, não requisitos governamentais nem parte de um serviço oficial de agendamento.
