Administración pública y servicios públicos · Nuevo recurso
Sistema de diseño Canada.ca.
Explora la tipografía, los tokens semánticos y los componentes web nativos de GC Design System mediante una guía de preparación completa y con búsqueda, comportamientos de divulgación y estados vacíos.
Componentes personalizados de entrada, detalles y botón nativos de GC Design System 1.6.0; contenido y filtrado local originales. · Referencia de implementación
02
Referencia de diseño de sistema de diseño Canada.ca
Exportaciones CSS y contratos de componentes publicados de @gcds-core/components 1.6.0; la vista previa local incorpora @gcds-core/fonts 1.1.1.
Componentes actuales y alcance del paquete de sistema de diseño Canada.ca
Usa el espacio de nombres actual
GC Design System es el sistema de componentes que se usa en este recurso de Canada.ca. El ejemplo fija la versión 1.6.0 de @gcds-core/components y registra los elementos personalizados independientes de entrada, detalles y botón. Algunos ejemplos antiguos pueden usar el espacio de nombres @cdssnc. Sigue la versión del paquete instalada y no mezcles código de registro de versiones diferentes.
Mantén el estudio de contenido separado de un servicio
El ejemplo presenta seis temas de preparación redactados. No incluye la firma del Gobierno de Canadá, integración de reservas ni afirmaciones sobre documentos obligatorios. Su propósito es demostrar un patrón real de contenido desplegable y buscable. Reutilizar los componentes no significa que una aplicación sea un servicio oficial ni que su contenido cumpla todos los requisitos de Canada.ca.
Tipografía y ritmo de lectura de sistema de diseño Canada.ca
Carga ambas familias tipográficas
Los encabezados usan Lato y el texto normal, Noto Sans. El estilo de texto principal publicado para escritorio es de 1.25rem, con un interlineado del 160 %; el ancho de lectura recomendado exportado es de 65ch. Estos valores crean un ritmo de lectura mucho más abierto que el de un panel compacto. La vista previa local integra los archivos tipográficos publicados para que un error al solicitar fuentes externas no altere el resultado sin que te des cuenta.
Respeta la sintaxis abreviada completa de la fuente
La tabla de tokens incluye la sintaxis abreviada real de fuentes de CSS, no solo los tamaños nominales en píxeles. El peso, el interlineado y la familia tipográfica son importantes en conjunto. El título principal lleva un subrayado rojo corto como detalle de composición original inspirado en Canada.ca; su ancho de 72px no se presenta como un token general de espaciado de GC. En una ventana gráfica estrecha, el diseño pasa a una columna y conserva un texto principal legible.
Color semántico y comportamiento del foco de sistema de diseño Canada.ca
Usa los roles públicos para los estados significativos
El texto principal es #333, el secundario es #595959 y el rol de superficie azul apagado es #26374a. Los enlaces, el foco y el peligro tienen roles distintos en CSS, según las exportaciones. Un enlace no se identifica solo por el cambio de color: el elemento de detalles nativo también ofrece una indicación de interacción y un estado expandido accesible.
No elimines el estilo de foco visible
El campo de entrada y los botones nativos proporcionan el comportamiento de foco de sus componentes. La aplicación CSS gestiona la composición circundante sin acceder a las raíces de shadow DOM para borrar los contornos. Al restablecer, el foco vuelve al campo de búsqueda para que quien use el teclado pueda ajustar la consulta de inmediato. Shadow DOM modifica la forma en que se aplican los estilos personalizados y las reglas de visibilidad; por eso, inspecciona el componente renderizado en lugar de suponer que los selectores habituales de elementos cubren todos los estados.
Sistema de diseño Canada.ca Contenido de Details y prioridad de la información
Reserva los desplegables para explicaciones complementarias
Cada gcds-details nativo recibe details-title y el texto complementario en su ranura predeterminada. Las instrucciones esenciales permanecen visibles en la barra lateral. Un horario, una dirección o un requisito reales para una cita no deben estar disponibles únicamente después de expandir un panel. Los seis temas de ejemplo son deliberadamente informativos: no recopilan datos de identidad ni simulan una reserva completada.
Mantén visible la información esencial del servicio sin necesidad de expandirla.
Usa un título breve y específico para cada elemento details.
Evita los desplegables anidados, que dificultan encontrar el contenido.
Conserva el estado de los desplegables al filtrar
Sistema de diseño Canada.ca Estado de búsqueda y recuperación cuando no hay resultados
Escucha el evento personalizado documentado
gcds-input requiere label, input-id y name. Su evento gcdsInput proporciona el nuevo valor en event.detail. La aplicación compara una consulta sin espacios al principio ni al final y en minúsculas con los títulos y el texto de los temas. Un estado en vivo anuncia la cantidad visible; si no hay coincidencias, muestra un mensaje útil para continuar en lugar de dejar una zona vacía sin explicación.
Haz que el restablecimiento sea una transición completa
El botón nativo secundario borra el valor del componente, restaura las seis entradas y enfoca el campo de entrada interno. No restablece el estado de los desplegables que la persona lectora abrió antes. Esta separación hace que los estados de la consulta y de lectura sean predecibles. Una búsqueda de producción en un conjunto de datos remoto también requeriría reglas para la carga, los errores de solicitud y el orden de los resultados; este filtro local de seis elementos no necesita esas consideraciones.
Sistema de diseño Canada.ca Integración completa de JavaScript
Reproduce el ejemplo funcional
Crea un proyecto de Vite vanilla, instala la versión fijada del paquete de componentes y sustituye la entrada por el JavaScript completo que aparece a continuación. Guarda canada.css junto a él y conserva un elemento de montaje en la raíz. Los puntos de entrada directos de elementos personalizados registran sus dependencias necesarias; el paquete CSS proporciona la capa de tokens. El código fuente incluye el conjunto de datos completo, el registro, el filtrado y el comportamiento de restablecimiento.
Instala la versión fijada del paquete en un proyecto de Vite vanilla.
Guarda la entrada completa y canada.css, y conserva el elemento de montaje en la raíz.
Busca una palabra sin coincidencias y verifica el mensaje para continuar.
Restablece, expande un tema y vuelve a filtrar para comprobar que se conserva el estado de lectura.
Oculta los contenedores de resultados sin destruir el estado de los desplegables
Coloca cada gcds-details dentro de un contenedor estándar y activa o desactiva el estado oculto de ese contenedor al filtrar. De lo contrario, las propias reglas de visualización de un elemento personalizado pueden invalidar las suposiciones de los selectores genéricos de CSS. Mantén las instancias montadas para que, al borrar la consulta, un tema expandido vuelva a aparecer en el mismo estado.
La búsqueda y los desplegables son controles independientes. Lee la consulta desde event.detail del evento gcdsInput, anuncia la cantidad de resultados y deja que el elemento details nativo gestione su propio estado expandido. Al restablecer, actualiza tanto el valor del componente como el modelo de consulta y luego devuelve el foco al campo de entrada; volver a crear toda la región de resultados haría que la persona lectora perdiera su posición.
Sistema de diseño Canada.ca Ejemplos de componentes del sistema de diseño
main.js — filtro nativo completo de temas
Entrada completa con registro de componentes, temas redactados, filtrado, conservación del estado de los desplegables y restablecimiento.
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();
Guárdalo como src/main.js con un elemento de montaje en la raíz. El paquete publicado CSS carga las URL predeterminadas de las fuentes; esta vista previa local incluye las mismas fuentes públicas.
canada.css — composición adaptable del contenido
Diseño original de la página en torno al estilo del componente nativo.
El punto de quiebre del diseño y la geometría del subrayado del título son decisiones específicas de este ejemplo, no tokens oficiales adicionales.
04
Sistema de diseño Canada.ca Configuración del agente
Punto de partida para la implementación
La vista previa local ejecuta los elementos personalizados con versiones fijadas; no requiere servicios remotos ni credenciales.
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
Una instrucción para tu proyecto
Instrucción para el agente
Crea la guía de preparación de seis temas con GC Design System 1.6.0. Carga la tipografía y la capa de tokens auténticas CSS, usa componentes nativos de entrada, details y botón, conserva el estado de los desplegables al filtrar, anuncia la cantidad de resultados y proporciona un comportamiento de restablecimiento completo. Mantén visible el contenido esencial y distingue las explicaciones de ejemplo de los requisitos oficiales del servicio.
05
Sistema de diseño Canada.ca Fuentes y alcance
Estudio de una aplicación para Canada.ca redactado con OpenDesign y basado en GC Design System 1.6.0. Los temas de ejemplo son orientaciones ficticias, no requisitos gubernamentales ni un servicio oficial de reservas.
