# Sistema di design Canada.ca ## Anteprima dell’interfaccia sistema di design Canada.ca Filtra sei argomenti redatti, espandi gli elementi details nativi e recupera lo stato senza risultati. ## Riferimento di progettazione sistema di design Canada.ca Esportazioni e contratti dei componenti pubblicati di @gcds-core/components 1.6.0 CSS; l’anteprima locale incorpora @gcds-core/fonts 1.1.1. ### Ruoli semantici di colore e interazione | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | --gcds-text-primary | #333 | Usa il ruolo semantico appropriato per il testo, le superfici o gli stati di interazione. Il colore del focus non è un accento decorativo. | | --gcds-text-secondary | #595959 | Usa il ruolo semantico appropriato per il testo, le superfici o gli stati di interazione. Il colore del focus non è un accento decorativo. | | --gcds-bg-primary | #26374a | Usa il ruolo semantico appropriato per il testo, le superfici o gli stati di interazione. Il colore del focus non è un accento decorativo. | | --gcds-bg-light | #f2f2f2 | Usa il ruolo semantico appropriato per il testo, le superfici o gli stati di interazione. Il colore del focus non è un accento decorativo. | | --gcds-link-default | #1f497a | Usa il ruolo semantico appropriato per il testo, le superfici o gli stati di interazione. Il colore del focus non è un accento decorativo. | | --gcds-link-hover | #1354ec | Usa il ruolo semantico appropriato per il testo, le superfici o gli stati di interazione. Il colore del focus non è un accento decorativo. | | --gcds-link-visited | #4b248f | Usa il ruolo semantico appropriato per il testo, le superfici o gli stati di interazione. Il colore del focus non è un accento decorativo. | | --gcds-focus-background | #1354ec | Usa il ruolo semantico appropriato per il testo, le superfici o gli stati di interazione. Il colore del focus non è un accento decorativo. | | --gcds-focus-text | #fff | Usa il ruolo semantico appropriato per il testo, le superfici o gli stati di interazione. Il colore del focus non è un accento decorativo. | | --gcds-danger-text | #b3192e | Usa il ruolo semantico appropriato per il testo, le superfici o gli stati di interazione. Il colore del focus non è un accento decorativo. | | --gcds-disabled-background | #d9d9d9 | Usa il ruolo semantico appropriato per il testo, le superfici o gli stati di interazione. Il colore del focus non è un accento decorativo. | | --gcds-border-default | #8c8c8c | Usa il ruolo semantico appropriato per il testo, le superfici o gli stati di interazione. Il colore del focus non è un accento decorativo. | ### Tipografia e larghezza di lettura | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | --gcds-font-h1 | 700 2.5625rem/117% "Lato",sans-serif | Esportazione tipografica pubblicata di CSS. Carica Lato e Noto Sans prima di valutare la lunghezza delle righe o le interruzioni di riga. | | --gcds-font-h2 | 700 2.4375rem/123% "Lato",sans-serif | Esportazione tipografica pubblicata di CSS. Carica Lato e Noto Sans prima di valutare la lunghezza delle righe o le interruzioni di riga. | | --gcds-font-h3 | 700 1.8125rem/137% "Lato",sans-serif | Esportazione tipografica pubblicata di CSS. Carica Lato e Noto Sans prima di valutare la lunghezza delle righe o le interruzioni di riga. | | --gcds-font-h4 | 700 1.6875rem/133% "Lato",sans-serif | Esportazione tipografica pubblicata di CSS. Carica Lato e Noto Sans prima di valutare la lunghezza delle righe o le interruzioni di riga. | | --gcds-font-text | 400 1.25rem/160% "Noto Sans",sans-serif | Esportazione tipografica pubblicata di CSS. Carica Lato e Noto Sans prima di valutare la lunghezza delle righe o le interruzioni di riga. | | --gcds-font-text-small | 400 1.125rem/155% "Noto Sans",sans-serif | Esportazione tipografica pubblicata di CSS. Carica Lato e Noto Sans prima di valutare la lunghezza delle righe o le interruzioni di riga. | | --gcds-text-character-limit | 65ch | Esportazione tipografica pubblicata di CSS. Carica Lato e Noto Sans prima di valutare la lunghezza delle righe o le interruzioni di riga. | ### Spaziatura e contenitori | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | --gcds-spacing-100 | 0.5rem | Usa il valore rem esportato, senza interpretare il suffisso del token come un numero di pixel. | | --gcds-spacing-150 | 0.75rem | Usa il valore rem esportato, senza interpretare il suffisso del token come un numero di pixel. | | --gcds-spacing-200 | 1rem | Usa il valore rem esportato, senza interpretare il suffisso del token come un numero di pixel. | | --gcds-spacing-300 | 1.5rem | Usa il valore rem esportato, senza interpretare il suffisso del token come un numero di pixel. | | --gcds-spacing-400 | 2rem | Usa il valore rem esportato, senza interpretare il suffisso del token come un numero di pixel. | | --gcds-spacing-600 | 3rem | Usa il valore rem esportato, senza interpretare il suffisso del token come un numero di pixel. | | --gcds-container-sm | 30rem | Usa il valore rem esportato, senza interpretare il suffisso del token come un numero di pixel. | | --gcds-container-md | 48rem | Usa il valore rem esportato, senza interpretare il suffisso del token come un numero di pixel. | | --gcds-container-lg | 62rem | Usa il valore rem esportato, senza interpretare il suffisso del token come un numero di pixel. | | --gcds-container-xl | 71.25rem | Usa il valore rem esportato, senza interpretare il suffisso del token come un numero di pixel. | ## Guida completa sistema di design Canada.ca Una guida pratica per scegliere, applicare e valutare questo sistema in un’interfaccia reale. Indicazioni complete, un punto di partenza per l’implementazione e link alle fonti. ## Componenti attuali e ambito del sistema di progettazione sistema di design Canada.ca ### Usa lo spazio dei nomi attuale > GC Design System è il sistema di componenti usato in questa risorsa Canada.ca. L’esempio usa la versione 1.6.0 di @gcds-core/components e registra i custom element autonomi input, details e button. Gli esempi meno recenti potrebbero usare lo spazio dei nomi @cdssnc. Attieniti alla versione del pacchetto effettivamente installata, senza mescolare codice di registrazione di release diverse. ### Tieni lo studio dei contenuti separato da un servizio L’esempio presenta sei argomenti di preparazione redatti. Non include il marchio del Governo del Canada, integrazioni per le prenotazioni né affermazioni sui documenti obbligatori. Il suo scopo è mostrare un pattern di divulgazione ricercabile e realistico. Riutilizzare i componenti non significa che un’applicazione sia un servizio ufficiale o che i suoi contenuti soddisfino tutti i requisiti di Canada.ca. ## Tipografia e ritmo di lettura sistema di design Canada.ca ### Carica entrambe le famiglie di caratteri I titoli usano Lato e il testo corrente Noto Sans. Il ruolo pubblicato per il testo desktop è 1.25rem con un’interlinea del 160%; il riferimento esportato per la larghezza di lettura è 65ch. Questi valori creano un ritmo di lettura decisamente più arioso rispetto a una dashboard compatta. L’anteprima locale incorpora i file dei caratteri pubblicati, così un errore nel caricamento di un font esterno non può modificare il risultato senza che te ne accorga. ### Rispetta l’intera dichiarazione abbreviata del font La tabella dei token include la dichiarazione abbreviata effettiva del font di CSS, non solo le dimensioni nominali in pixel. Peso, interlinea e famiglia sono tutti importanti. Il titolo principale usa una breve sottolineatura rossa come dettaglio compositivo originale ispirato a Canada.ca; la larghezza di 72px non è presentata come token di spaziatura generale di GC. A viewport ridotta, il layout passa a una colonna mantenendo leggibile il testo. ## Colore semantico e comportamento del focus sistema di design Canada.ca ### Usa i ruoli pubblici per gli stati significativi Il testo principale è #333, quello secondario è #595959 e il ruolo per la superficie blu attenuata è #26374a. Nell’esportazione di CSS, link, focus e stato di errore hanno ruoli distinti. Un link non si distingue solo cambiandone il colore: anche l’elemento details nativo offre un’indicazione visiva e uno stato di espansione accessibile. ### Non rimuovere l’indicatore di focus visibile L’input e i pulsanti nativi forniscono il comportamento di focus dei rispettivi componenti. CSS gestisce il layout circostante senza accedere agli shadow root per rimuovere i contorni. Il ripristino riporta il focus al campo di ricerca, così chi usa la tastiera può affinare subito la query. Lo Shadow DOM modifica l’applicazione delle regole di stile e visibilità personalizzate: esamina quindi il componente renderizzato invece di supporre che i selettori degli elementi ordinari coprano ogni stato. ## Contenuti dei dettagli e priorità delle informazioni sistema di design Canada.ca ### Riserva gli elementi espandibili alle spiegazioni di supporto Ogni gcds-details nativo riceve details-title e il testo di supporto nel suo slot predefinito. Le istruzioni essenziali restano nella barra laterale visibile. Orario, indirizzo o requisito di un appuntamento reale non devono essere disponibili solo dopo aver espanso un pannello. I sei argomenti di esempio sono volutamente informativi: non raccolgono dati identificativi né simulano una prenotazione completata. - Mantieni visibili le informazioni essenziali sul servizio senza richiedere l’espansione. - Usa un titolo breve e specifico per l’elemento details. - Evita elementi espandibili annidati che rendono difficile trovare i contenuti. ### Mantieni lo stato degli elementi espandibili durante il filtraggio L'applicazione crea ogni elemento details una sola volta. Quando applica un filtro, nasconde il normale contenitore invece di distruggere e ricreare il componente. In questo modo, un argomento già espanso mantiene il proprio stato se scompare temporaneamente e poi ricompare. Nascondere il contenitore evita anche di dipendere dagli stili display interni dell'host di un elemento personalizzato affinché rispetti una regola hidden esterna. ## Sistema di design Canada.ca Stato della ricerca e recupero quando non ci sono risultati ### Ascolta l'evento personalizzato documentato gcds-input richiede label, input-id e name. Il suo evento gcdsInput fornisce il nuovo valore in event.detail. L'applicazione confronta la query, dopo aver rimosso gli spazi iniziali e finali e convertito il testo in minuscolo, con i titoli e il corpo degli argomenti. Un messaggio di stato aggiornato dinamicamente comunica il numero di risultati visibili; se non ci sono corrispondenze, mostra un messaggio utile per riprendere la ricerca invece di lasciare un'area vuota senza spiegazioni. ### Fai in modo che il ripristino completi l'intera transizione Il pulsante secondario nativo svuota il valore del componente, ripristina tutte e sei le voci e porta il focus sull'input interno. Non modifica l'eventuale argomento già aperto dal lettore. Questa separazione rende prevedibili lo stato della query e quello di lettura. Una ricerca di produzione su un set di dati remoto richiederebbe anche regole per il caricamento, gli errori delle richieste e l'ordinamento dei risultati; per questo filtro locale a sei voci non è necessario dichiarare nessuna di queste funzionalità. ## Sistema di design Canada.ca Integrazione completa JavaScript ### Ricrea l'esempio funzionante Crea un progetto vanilla con Vite, installa la versione bloccata del pacchetto del componente e sostituisci il file d'ingresso con il seguente JavaScript completo. Salva canada.css accanto al file e mantieni un elemento root per il montaggio. I punti d'ingresso degli elementi personalizzati registrano le dipendenze necessarie; il pacchetto CSS fornisce il livello dei token. Il sorgente include il set di dati completo, la registrazione, il filtro e il comportamento di ripristino. 1. Installa la versione bloccata del pacchetto in un progetto vanilla con Vite. 2. Salva il file d'ingresso completo e canada.css, mantenendo l'elemento root per il montaggio. 3. Cerca una parola senza corrispondenze e verifica che venga mostrato il messaggio di recupero. 4. Ripristina, espandi un argomento e applica di nuovo un filtro per verificare che lo stato di lettura venga mantenuto. ### Nascondi i contenitori dei risultati senza perdere lo stato degli elementi espandibili Inserisci ogni gcds-details in un normale contenitore e, quando applichi un filtro, attiva o disattiva lo stato hidden del contenitore. In caso contrario, le regole display dell'elemento personalizzato potrebbero vanificare le ipotesi fatte sui selettori generici CSS. Mantieni le istanze montate affinché un argomento espanso riappaia nello stesso stato quando la query viene cancellata. La ricerca e l'espansione sono controlli distinti. Leggi la query da event.detail dell'evento gcdsInput, comunica il numero di risultati e lascia che l'elemento details nativo gestisca il proprio stato di espansione. Il ripristino deve aggiornare il valore del componente oltre al modello della query, quindi riportare il focus sull'input; ricreare l'intera area dei risultati farebbe perdere al lettore la posizione raggiunta. ## Sistema di design Canada.ca Esempi di componenti del sistema di design ### main.js — filtro nativo completo degli argomenti File d'ingresso completo con registrazione del componente, argomenti definiti nel codice, filtro, mantenimento dello stato di espansione e ripristino. ``` 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=`

GC DESIGN SYSTEM / ORIGINAL CONTENT STUDY

Prepare for an appointment

Find a preparation topic in this fictional service guide. These are sample explanations, not government requirements.

Reset filter

Preparation topics

`; 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(); ``` Riferimento del codice - Salva come src/main.js insieme a un elemento root per il montaggio. Il pacchetto pubblicato CSS carica gli URL predefiniti dei font; questa anteprima locale incorpora gli stessi font pubblici. ### canada.css — impaginazione reattiva dei contenuti Layout originale della pagina attorno agli stili del componente nativo. ``` *{box-sizing:border-box}body{margin:0;background:white;color:var(--gcds-text-primary);font:var(--gcds-font-text)}main{padding:32px}h1{font:var(--gcds-font-h1);margin:16px 0 24px;max-width:24ch}h1:after{content:'';display:block;width:72px;height:6px;background:#a62a1e;margin-top:16px}h2{font:var(--gcds-font-h3);margin:0 0 24px}h3{font:var(--gcds-font-h4)}p{margin:0 0 24px;max-width:65ch}.eyebrow,.small{font:var(--gcds-font-text-small)}.lead{max-width:65ch}.search-row{display:flex;align-items:end;gap:24px;margin:32px 0;border-top:1px solid #ccc;padding-top:24px}.search-row gcds-input{flex:1;max-width:650px}.search-row gcds-button{margin-bottom:var(--gcds-input-margin)}.layout{display:grid;grid-template-columns:1.6fr 1fr;gap:48px}aside{background:var(--gcds-color-grayscale-50);border-left:4px solid var(--gcds-color-blue-muted);padding:24px;align-self:start}aside h2{font:var(--gcds-font-h4)}aside ol{padding-left:24px}aside li{padding-left:8px;margin:16px 0}#count{font:var(--gcds-font-text-small)}#empty{padding:24px;background:var(--gcds-color-grayscale-50)}gcds-details{display:block}gcds-details p{padding-top:8px}[hidden]{display:none!important}@media(max-width:767px){main{padding:20px}.layout{grid-template-columns:1fr;gap:32px}.search-row{display:block}.search-row gcds-button{display:block;margin-top:16px}h1{font-size:2rem}aside{padding:20px}} ``` Riferimento del codice - Il punto di interruzione del layout e la geometria della sottolineatura del titolo sono scelte specifiche dell'esempio, non token ufficiali aggiuntivi. ## Sistema di design Canada.ca Configurazione dell'agente AI ### Punto di partenza per l’implementazione L'anteprima locale esegue gli elementi personalizzati nella versione bloccata; non è richiesto alcun servizio remoto né alcuna credenziale. ``` npm create vite@latest gc-topics -- --template vanilla cd gc-topics npm install npm install @gcds-core/components@1.6.0 # Replace src/main.js and add src/canada.css; keep
. npm run dev ``` ### Un prompt per il tuo progetto ``` Realizza la guida di preparazione con sei argomenti usando GC Design System 1.6.0. Carica la tipografia e i token CSS originali, usa i componenti nativi input/details/button, mantieni lo stato di espansione durante l'applicazione dei filtri, comunica il numero di risultati e implementa un ripristino completo. Mantieni visibili i contenuti essenziali e distingui le spiegazioni di esempio dai requisiti ufficiali del servizio. ``` ## Sistema di design Canada.ca Fonti e ambito Studio applicativo per Canada.ca realizzato con OpenDesign e GC Design System 1.6.0. Gli argomenti di esempio sono indicazioni fittizie, non requisiti governativi né un servizio ufficiale di prenotazione. - Input API Identificatori obbligatori, etichette ed eventi personalizzati. - Details API Contratto per la visualizzazione dei contenuti di supporto e il titolo. - Tipografia Famiglie di font e scala di lettura. - Spaziatura Sistema di spaziatura pubblicato. - Ambito dei termini e del pacchetto Namespace attuale del pacchetto e contesto d'uso. ## Sistema di design Canada.ca Risorse correlate ### CFPB sistema di design Realizza la griglia editoriale, la tipografia attuale e i componenti Expandables nativi di CFPB con un foglio di lavoro di lettura funzionante, API dei pacchetti verificate e confini d’identità espliciti. ### CMS sistema di design Implementa CMS Core con variabili del tema versionate, API reali del componente Review e un flusso funzionante di modifica e revisione che conserva le risposte dell’utente e il focus. ### Det Fælles Designsystem Esplora il tema DKFDS della Danimarca, le scale Sass effettive e i pattern accessibili per le tabelle con un confronto completo delle risorse, che include ordinamento numerico, ricerca inviata e recupero dallo stato vuoto. - [Riferimento per l’implementazione](https://design-system.canada.ca/en/components/input/code/) - [Fonte](https://design-system.canada.ca/en/styles/colour/) - [Fonte](https://design-system.canada.ca/en/styles/typography/) - [Fonte](https://design-system.canada.ca/en/styles/spacing/) - [Riferimento del codice](https://design-system.canada.ca/en/components/input/code/) - [Riferimento del codice](https://design-system.canada.ca/en/styles/typography/) - [Input API Identificatori obbligatori, etichette ed eventi personalizzati.](https://design-system.canada.ca/en/components/input/code/) - [Details API Contratto per la visualizzazione dei contenuti di supporto e il titolo.](https://design-system.canada.ca/en/components/details/code/) - [Tipografia Famiglie di font e scala di lettura.](https://design-system.canada.ca/en/styles/typography/) - [Spaziatura Sistema di spaziatura pubblicato.](https://design-system.canada.ca/en/styles/spacing/) - [Ambito dei termini e del pacchetto Namespace attuale del pacchetto e contesto d'uso.](https://design-system.canada.ca/en/terms-of-use/)