# Canada.ca Designsystem ## Canada.ca Designsystem-Interface-Vorschau Filtere sechs redaktionell erstellte Themen, klappe native Details-Elemente auf und stelle die Ansicht nach einer Suche ohne Treffer wieder her. ## Canada.ca Designsystem-Designreferenz Veröffentlichte CSS-Exporte und Komponentenverträge aus @gcds-core/components 1.6.0; die lokale Vorschau bindet @gcds-core/fonts 1.1.1 ein. ### Semantische Farben und Interaktionsrollen | Name / Regel | Wert / Konfiguration | Verwendung | | --- | --- | --- | | --gcds-text-primary | #333 | Verwende die semantische Rolle für Text, Oberflächen oder Interaktionszustände. Die Fokusfarbe ist kein dekorativer Akzent. | | --gcds-text-secondary | #595959 | Verwende die semantische Rolle für Text, Oberflächen oder Interaktionszustände. Die Fokusfarbe ist kein dekorativer Akzent. | | --gcds-bg-primary | #26374a | Verwende die semantische Rolle für Text, Oberflächen oder Interaktionszustände. Die Fokusfarbe ist kein dekorativer Akzent. | | --gcds-bg-light | #f2f2f2 | Verwende die semantische Rolle für Text, Oberflächen oder Interaktionszustände. Die Fokusfarbe ist kein dekorativer Akzent. | | --gcds-link-default | #1f497a | Verwende die semantische Rolle für Text, Oberflächen oder Interaktionszustände. Die Fokusfarbe ist kein dekorativer Akzent. | | --gcds-link-hover | #1354ec | Verwende die semantische Rolle für Text, Oberflächen oder Interaktionszustände. Die Fokusfarbe ist kein dekorativer Akzent. | | --gcds-link-visited | #4b248f | Verwende die semantische Rolle für Text, Oberflächen oder Interaktionszustände. Die Fokusfarbe ist kein dekorativer Akzent. | | --gcds-focus-background | #1354ec | Verwende die semantische Rolle für Text, Oberflächen oder Interaktionszustände. Die Fokusfarbe ist kein dekorativer Akzent. | | --gcds-focus-text | #fff | Verwende die semantische Rolle für Text, Oberflächen oder Interaktionszustände. Die Fokusfarbe ist kein dekorativer Akzent. | | --gcds-danger-text | #b3192e | Verwende die semantische Rolle für Text, Oberflächen oder Interaktionszustände. Die Fokusfarbe ist kein dekorativer Akzent. | | --gcds-disabled-background | #d9d9d9 | Verwende die semantische Rolle für Text, Oberflächen oder Interaktionszustände. Die Fokusfarbe ist kein dekorativer Akzent. | | --gcds-border-default | #8c8c8c | Verwende die semantische Rolle für Text, Oberflächen oder Interaktionszustände. Die Fokusfarbe ist kein dekorativer Akzent. | ### Typografie und lesbare Zeilenlänge | Name / Regel | Wert / Konfiguration | Verwendung | | --- | --- | --- | | --gcds-font-h1 | 700 2.5625rem/117% "Lato",sans-serif | Veröffentlichter Typografie-Export von CSS. Lade Lato und Noto Sans, bevor du Zeilenlängen oder Umbrüche beurteilst. | | --gcds-font-h2 | 700 2.4375rem/123% "Lato",sans-serif | Veröffentlichter Typografie-Export von CSS. Lade Lato und Noto Sans, bevor du Zeilenlängen oder Umbrüche beurteilst. | | --gcds-font-h3 | 700 1.8125rem/137% "Lato",sans-serif | Veröffentlichter Typografie-Export von CSS. Lade Lato und Noto Sans, bevor du Zeilenlängen oder Umbrüche beurteilst. | | --gcds-font-h4 | 700 1.6875rem/133% "Lato",sans-serif | Veröffentlichter Typografie-Export von CSS. Lade Lato und Noto Sans, bevor du Zeilenlängen oder Umbrüche beurteilst. | | --gcds-font-text | 400 1.25rem/160% "Noto Sans",sans-serif | Veröffentlichter Typografie-Export von CSS. Lade Lato und Noto Sans, bevor du Zeilenlängen oder Umbrüche beurteilst. | | --gcds-font-text-small | 400 1.125rem/155% "Noto Sans",sans-serif | Veröffentlichter Typografie-Export von CSS. Lade Lato und Noto Sans, bevor du Zeilenlängen oder Umbrüche beurteilst. | | --gcds-text-character-limit | 65ch | Veröffentlichter Typografie-Export von CSS. Lade Lato und Noto Sans, bevor du Zeilenlängen oder Umbrüche beurteilst. | ### Abstände und Container | Name / Regel | Wert / Konfiguration | Verwendung | | --- | --- | --- | | --gcds-spacing-100 | 0.5rem | Verwende den exportierten rem-Wert, statt das Token-Suffix als Pixelangabe zu behandeln. | | --gcds-spacing-150 | 0.75rem | Verwende den exportierten rem-Wert, statt das Token-Suffix als Pixelangabe zu behandeln. | | --gcds-spacing-200 | 1rem | Verwende den exportierten rem-Wert, statt das Token-Suffix als Pixelangabe zu behandeln. | | --gcds-spacing-300 | 1.5rem | Verwende den exportierten rem-Wert, statt das Token-Suffix als Pixelangabe zu behandeln. | | --gcds-spacing-400 | 2rem | Verwende den exportierten rem-Wert, statt das Token-Suffix als Pixelangabe zu behandeln. | | --gcds-spacing-600 | 3rem | Verwende den exportierten rem-Wert, statt das Token-Suffix als Pixelangabe zu behandeln. | | --gcds-container-sm | 30rem | Verwende den exportierten rem-Wert, statt das Token-Suffix als Pixelangabe zu behandeln. | | --gcds-container-md | 48rem | Verwende den exportierten rem-Wert, statt das Token-Suffix als Pixelangabe zu behandeln. | | --gcds-container-lg | 62rem | Verwende den exportierten rem-Wert, statt das Token-Suffix als Pixelangabe zu behandeln. | | --gcds-container-xl | 71.25rem | Verwende den exportierten rem-Wert, statt das Token-Suffix als Pixelangabe zu behandeln. | ## Canada.ca Designsystem Vollständiger Leitfaden Ein praktischer Leitfaden zur Auswahl, Anwendung und Überprüfung dieses Systems für ein echtes Interface. Umfassende Anleitung, Einstieg in die Implementierung und Links zu den Quellen. ## Canada.ca Designsystem Aktuelle Komponenten und Paketumfang ### Den aktuellen Namespace verwenden > GC Design System ist das Komponentensystem, das in dieser Ressource auf Canada.ca verwendet wird. Das Beispiel bindet @gcds-core/components 1.6.0 fest ein und registriert die eigenständigen Custom Elements für Eingabefelder, Details und Schaltflächen. Ältere Beispiele verwenden möglicherweise den Namespace @cdssnc. Richte dich nach der tatsächlich installierten Paketversion und mische keinen Registrierungscode aus einer anderen Version darunter. ### Die Inhaltsstudie von einem Dienst getrennt halten Das Beispiel präsentiert sechs redaktionell erstellte Vorbereitungsthemen. Es enthält weder eine Signatur der Regierung Kanadas noch eine Buchungsintegration oder Behauptungen zu Pflichtdokumenten. Es soll ein praxisnahes Muster für durchsuchbare Offenlegungen veranschaulichen. Die Wiederverwendung der Komponenten bedeutet nicht, dass eine Anwendung ein offizieller Dienst ist oder ihre Inhalte sämtliche Anforderungen von Canada.ca erfüllen. ## Canada.ca Designsystem Typografie und Leserhythmus ### Beide Schriftfamilien laden Für Überschriften wird Lato verwendet, für Fließtext Noto Sans. Die veröffentlichte Desktop-Rolle für Fließtext sieht 1.25rem bei einer Zeilenhöhe von 160 % vor; der exportierte Richtwert für die Lesebreite beträgt 65ch. Diese Werte sorgen für einen deutlich offeneren Leserhythmus als in einem kompakten Dashboard. Die lokale Vorschau bindet die veröffentlichten Schriftdateien ein, damit ein fehlgeschlagener externer Schriftaufruf das Ergebnis nicht unbemerkt verändert. ### Die vollständige Schrift-Kurzschreibweise berücksichtigen Die Token-Tabelle enthält die tatsächliche CSS-Schrift-Kurzschreibweise und nicht nur nominale Pixelgrößen. Schriftstärke, Zeilenhöhe und Schriftfamilie gehören zusammen. Der Haupttitel erhält als redaktionell gestaltetes, von Canada.ca inspiriertes Detail eine kurze rote Unterstreichung; ihre Breite von 72px ist nicht als allgemeiner GC-Abstandstoken ausgewiesen. Bei schmalen Viewports wird das Layout einspaltig, während der Fließtext gut lesbar bleibt. ## Canada.ca Designsystem Semantische Farben und Fokusverhalten ### Öffentliche Rollen für aussagekräftige Zustände verwenden Der primäre Text ist #333, der sekundäre Text #595959 und die gedeckte blaue Flächenrolle #26374a. Links, Fokus und Warnungen haben in der exportierten CSS jeweils eigene Rollen. Ein Link wird nicht allein durch einen Farbwechsel kenntlich gemacht: Das native Details-Element bietet ebenfalls einen Hinweis auf seine Funktion und einen zugänglichen Zustand für geöffnet beziehungsweise geschlossen. ### Die sichtbare Fokusanzeige nicht entfernen Das native Eingabefeld und die Schaltflächen stellen ihr jeweiliges Fokusverhalten bereit. Die Anwendungs-CSS steuert das umgebende Layout, ohne über Shadow Roots auf Umrisse zuzugreifen und sie zu entfernen. Die Zurücksetzen-Funktion setzt den Fokus wieder auf das Suchfeld, damit Tastaturnutzende die Suche sofort anpassen können. Shadow DOM beeinflusst, wie Regeln für benutzerdefinierte Stile und Sichtbarkeit angewendet werden. Prüfen Sie deshalb die gerenderte Komponente, statt anzunehmen, gewöhnliche Elementselektoren würden alle Zustände erfassen. ## Canada.ca Designsystem Details-Inhalte und Informationshierarchie ### Offenlegungen für ergänzende Erläuterungen vorsehen Jedes native gcds-details erhält details-title und ergänzenden Text im Standard-Slot. Wichtige Anweisungen bleiben in der sichtbaren Seitenleiste. Ein tatsächlicher Termin, eine Adresse oder eine Anforderung darf nicht erst nach dem Aufklappen eines Bereichs verfügbar sein. Die sechs Beispielthemen dienen bewusst nur der Information; sie erfassen keine persönlichen Angaben und simulieren keine abgeschlossene Buchung. - Wichtige Serviceinformationen auch ohne Aufklappen sichtbar halten. - Einen kurzen, aussagekräftigen Details-Titel verwenden. - Verschachtelte Offenlegungen vermeiden, die das Auffinden von Inhalten erschweren. ### Den Offenlegungszustand beim Filtern beibehalten Die Anwendung erstellt jedes Details-Element nur einmal. Beim Filtern wird der einfache umgebende Wrapper ausgeblendet, statt die Komponente zu entfernen und neu aufzubauen. So bleibt ein geöffnetes Thema geöffnet, wenn es vorübergehend verschwindet und später wieder erscheint. Das Ausblenden des Wrappers vermeidet außerdem, sich darauf verlassen zu müssen, dass die internen Anzeigestile des Custom-Element-Hosts eine externe hidden-Regel berücksichtigen. ## Canada.ca Designsystem Suchzustand und Wiederherstellung bei leeren Ergebnissen ### Auf das dokumentierte benutzerdefinierte Ereignis reagieren gcds-input erfordert label, input-id und name. Das Ereignis gcdsInput stellt den neuen Wert unter event.detail bereit. Die Anwendung vergleicht eine abgeglichene und kleingeschriebene Suchanfrage mit Titeln und Texten der Themen. Ein Live-Status gibt die Anzahl der sichtbaren Einträge an; bei keinem Treffer wird eine hilfreiche Meldung zur Wiederherstellung angezeigt, statt einen unerklärten leeren Bereich stehen zu lassen. ### Zurücksetzen als vollständigen Zustandsübergang gestalten Die sekundäre native Schaltfläche löscht den Komponentenwert, stellt alle sechs Einträge wieder her und setzt den Fokus auf das interne Eingabefeld. Sie setzt nicht zurück, welche Offenlegung eine lesende Person zuvor geöffnet hat. Durch diese Trennung bleiben Such- und Lesestatus berechenbar. Eine produktive Suche über einen entfernten Datensatz müsste zusätzlich Ladezustände, fehlgeschlagene Anfragen und Regeln zur Ergebnisreihenfolge berücksichtigen; für diesen lokalen Filter mit sechs Einträgen sind solche Angaben nicht erforderlich. ## Canada.ca Designsystem Vollständige Integration von JavaScript ### Das funktionsfähige Beispiel nachbilden Erstellen Sie ein Vanilla-Projekt mit Vite, installieren Sie das festgelegte Komponentenpaket und ersetzen Sie den Einstieg durch die vollständige JavaScript unten. Speichern Sie canada.css daneben und behalten Sie ein Root-Mount-Element bei. Direkte Einstiegspunkte für Custom Elements registrieren ihre erforderlichen Abhängigkeiten; das Paket CSS stellt die Token-Ebene bereit. Der Quellcode enthält den vollständigen Datensatz sowie Registrierung, Filter- und Zurücksetzen-Verhalten. 1. Installieren Sie das festgelegte Paket in einem Vanilla-Projekt mit Vite. 2. Speichern Sie den vollständigen Einstieg und canada.css; behalten Sie das Root-Mount-Element bei. 3. Suchen Sie nach einem Wort ohne Treffer und prüfen Sie die Meldung zur Wiederherstellung. 4. Setzen Sie zurück, öffnen Sie ein Thema und filtern Sie erneut, um den Erhalt des Lesestatus zu prüfen. ### Ergebnis-Wrapper ausblenden, ohne den Offenlegungszustand zu zerstören Platzieren Sie jedes gcds-details in einem gewöhnlichen Wrapper und ändern Sie beim Filtern den hidden-Zustand dieses Wrappers. Die eigenen Anzeigeregeln eines Custom Elements können sonst Annahmen allgemeiner CSS-Selektoren zunichtemachen. Lassen Sie die Instanzen eingebunden, damit ein geöffnetes Thema nach dem Löschen der Suchanfrage im selben Zustand zurückkehrt. Suche und Offenlegung sind getrennte Steuerelemente. Lesen Sie die Suchanfrage aus event.detail des Ereignisses gcdsInput, geben Sie die daraus resultierende Anzahl bekannt und überlassen Sie den geöffneten beziehungsweise geschlossenen Zustand dem nativen Details-Element. Beim Zurücksetzen sollte neben dem Suchmodell auch der Komponentenwert aktualisiert und anschließend der Fokus auf das Eingabefeld gesetzt werden. Würde der gesamte Ergebnisbereich neu erstellt, ginge die Position der lesenden Person verloren. ## Canada.ca Designsystem Beispiele für Komponenten des Design-Systems ### main.js — vollständiger nativer Themenfilter Vollständiger Einstieg mit Komponentenregistrierung, redaktionell erstellten Themen, Filterung, Erhalt des Offenlegungszustands und Zurücksetzen. ``` 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(); ``` Code-Referenz - Speichern Sie die Datei als src/main.js und behalten Sie ein Root-Mount-Element bei. Das veröffentlichte Paket CSS lädt seine Standard-URLs für Schriftarten; diese lokale Vorschau bindet dieselben öffentlichen Schriftarten ein. ### canada.css — responsive Inhaltsgestaltung Eigenständiges Seitenlayout rund um die nativen Komponentenstile. ``` *{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}} ``` Code-Referenz - Der Layout-Breakpoint und die Geometrie der Titelunterstreichung sind Entscheidungen für dieses Beispiel und keine zusätzlichen offiziellen Tokens. ## Canada.ca Designsystem Einrichtung des Agents ### Ausgangspunkt für die Implementierung In der lokalen Vorschau werden die festgelegten benutzerdefinierten Elemente ausgeführt; weder ein Remote-Dienst noch Zugangsdaten sind erforderlich. ``` 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 ``` ### Ein Prompt für dein Projekt ``` Erstellen Sie den Vorbereitungsleitfaden mit sechs Themen und dem GC Design System 1.6.0. Laden Sie die Originaltypografie und das Token CSS; verwenden Sie native Input-, Details- und Button-Komponenten, bewahren Sie den Offenlegungsstatus beim Filtern und geben Sie die Ergebnisanzahl aus. Sorgen Sie für ein vollständiges Zurücksetzen und halten Sie wichtige Inhalte sichtbar. Unterscheiden Sie Beispielerläuterungen von offiziellen Anforderungen des Dienstes. ``` ## Canada.ca Designsystem Quellen und Umfang Eine von OpenDesign erstellte Canada.ca-Anwendungsstudie mit dem GC Design System 1.6.0. Die Beispielthemen sind fiktive Hinweise und keine behördlichen Anforderungen oder ein offizieller Buchungsdienst. - Input API Erforderliche Bezeichnungen, Labels und benutzerdefinierte Ereignisse. - Details API Offenlegung unterstützender Inhalte und Titelvorgaben. - Typografie Schriftfamilien und Leseskala. - Abstände Veröffentlichtes Abstandssystem. - Begriffe und Paketumfang Aktueller Paket-Namespace und Nutzungskontext. ## Canada.ca Designsystem Verwandte Ressourcen ### CFPB Designsystem Setzen Sie das redaktionelle Raster, die aktuelle Typografie und die nativen Expandables von CFPB um – mit einem funktionierenden Arbeitsblatt zum Lesen, überprüften Paket-APIs und klaren Grenzen für die Markenidentität. ### CMS Designsystem Implementieren Sie CMS Core mit versionierten Theme-Variablen, den tatsächlichen APIs der Review-Komponente und einem funktionsfähigen Bearbeitungs- und Prüfablauf, der die Antworten und den Fokus der Nutzenden beibehält. ### Det Fælles Designsystem Entdecken Sie das DKFDS-Design von Dänemark, die tatsächlichen Sass-Skalen und barrierefreie Tabellenmuster anhand eines umfassenden Ressourcenvergleichs mit numerischer Sortierung, Suche nach dem Absenden und einer Wiederherstellung bei leeren Ergebnissen. - [Implementierungsreferenz](https://design-system.canada.ca/en/components/input/code/) - [Quelle](https://design-system.canada.ca/en/styles/colour/) - [Quelle](https://design-system.canada.ca/en/styles/typography/) - [Quelle](https://design-system.canada.ca/en/styles/spacing/) - [Code-Referenz](https://design-system.canada.ca/en/components/input/code/) - [Code-Referenz](https://design-system.canada.ca/en/styles/typography/) - [Input API Erforderliche Bezeichnungen, Labels und benutzerdefinierte Ereignisse.](https://design-system.canada.ca/en/components/input/code/) - [Details API Offenlegung unterstützender Inhalte und Titelvorgaben.](https://design-system.canada.ca/en/components/details/code/) - [Typografie Schriftfamilien und Leseskala.](https://design-system.canada.ca/en/styles/typography/) - [Abstände Veröffentlichtes Abstandssystem.](https://design-system.canada.ca/en/styles/spacing/) - [Begriffe und Paketumfang Aktueller Paket-Namespace und Nutzungskontext.](https://design-system.canada.ca/en/terms-of-use/)