NSW Designsystem.

NSW Designsystem Festgelegte Laufzeitumgebung und Theme

Verwenden Sie die native Tab-Implementierung

Das Beispiel verwendet nsw-design-system 3.27.0. Es importiert das Paket-CSS und die Tabs-Klasse und initialisiert anschließend die einzelne Tab-Gruppe, nachdem das Markup erstellt wurde. Durch diese gezielte Initialisierung werden keine ungenutzten Komponenten registriert. Die aktuelle Dokumentation beschreibt möglicherweise eine neuere Version; der herunterladbare Code und die Tokenwerte hier basieren weiterhin auf dem verifizierten Paket.

Komponenten und Anwendungszustand getrennt halten

Die native Tabs-Klasse verwaltet die Tab-Auswahl, die Sichtbarkeit der Panels und die Tastaturnavigation. Die Anwendung verwaltet eine Set mit gespeicherten Prompts. Beim Wechsel zwischen den Phasen bleibt die Leseliste daher unverändert. Diese Aufgabenteilung ist im Quellcode klar ersichtlich: Es gibt weder einen verborgenen globalen Store noch Backend-Anfragen oder eine vorgetäuschte Verbindung zu einem Behördenkonto.

NSW Designsystem Markenrollen und gut lesbare Oberflächen

Dunkle und helle Rollen als Paar verwenden

Die standardmäßige dunkle Markenfarbe ist #002664, die helle Oberfläche #CBEDFD. Das Prompt-Panel verwendet die helle Rolle und eine dunkle Aktion. Der aktive Tab nutzt die Akzentgestaltung des Pakets. Dies sind die tatsächlichen Theme-Rollen und keine beliebig gewählte blaue Farbpalette, die eine Behördenseite suggerieren soll. Das Beispiel verwendet kein offizielles Regierungslogo.

Token-Namen sorgfältig interpretieren

Das text-light-Token ist Weiß. Es gehört auf einen dunklen Hintergrund und sollte nicht als allgemeines Synonym für zurückhaltenden Text verwendet werden. Für unterstützende Phasentexte wird stattdessen die dunklere neutrale Rolle genutzt. Die Referenz enthält Vorder- und Hintergrundfarben für Statusmeldungen, doch der Workshop erfindet keine Fehler- oder Erfolgsmeldung, nur um jede verfügbare Farbe zu zeigen.

NSW Designsystem Public Sans und responsive Größenabstufung

Schrift laden, bevor das Layout geprüft wird

Das Beispiel lädt die Schriftschnitte Public Sans 400 und 700 lokal. Das Paket definiert separate Größen für Mobilgeräte und Desktop: Mittlere Schriftgrößen steigen von 1.125rem auf 1.25rem, und die größte Überschrift wächst in der Referenz von 2.25rem auf 3rem. Diese Größenpaare sorgen dafür, dass die Lesehierarchie bei wechselnder verfügbarer Breite erhalten bleibt.

Die Inhaltshierarchie bewusst schlicht halten

Auf ein kurzes Phasenlabel folgen eine beschreibende Überschrift, eine Einleitung, ein erläuternder Absatz und ein gespeicherter Prompt. Die Seite macht nicht aus jedem Satz eine Karte. Auf schmalen Bildschirmen folgt die Leseliste auf das Phasen-Panel, während die kurze Tab-Leiste mit drei Labels nutzbar bleibt, ohne den Text in mehrere Zeilen zu quetschen.

NSW Designsystem Tab-Markup und Tastaturverhalten

Die Komponente echte Links erweitern lassen

Die anfängliche Tab-Liste enthält Links zu eindeutigen Inhalts-IDs. Bei der Initialisierung ergänzt die Komponente die Semantik von tablist, tab und tabpanel, verwaltet die Auswahl und legt den fokussierbaren Tab fest. Damit die Komponente ihre Panels findet, müssen die href-Ziele korrekt bleiben. IDs dürfen nicht dupliziert werden, wenn eine Seite mehrere Tab-Gruppen enthält.

• Jeden Tab-Link genau einer Panel-ID zuordnen.
• Die Gruppe erst nach dem Einfügen ihres Markups initialisieren.
• Auswahl und Tastaturfokus von der nativen Komponente verwalten lassen.

Tastaturauswahl ebenso wie Mausklicks prüfen

NSW Designsystem Gespeicherte Prompts und ehrliche Rückmeldungen

Den Speicherstatus unabhängig vom sichtbaren Tab halten

Die Aktion jeder Phase schaltet den jeweiligen Prompt in einer Set um, aktualisiert aria-pressed und ändert das Label von Save zu Remove. Anzahl und Einträge der Leseliste werden aus dieser Set abgeleitet. Kehren Lesende zu einer gespeicherten Phase zurück, wird der Auswahlstatus korrekt angezeigt. Clear reading list entfernt alle Auswahlen und ist deaktiviert, wenn nichts zu entfernen ist.

Die Grenzen der Speicherung erläutern

Die Leseliste ist ein lokaler Seitenstatus und geht beim Neuladen verloren. Die Benutzeroberfläche weist ausdrücklich darauf hin. Eine tatsächlich dauerhafte Liste bräuchte ein explizites Speichermodell und ein Wiederherstellungsverhalten; beides wird hier nicht vorausgesetzt. Der Inhalt ist eine eigens erstellte Studie zur Designdiskussion, kein Leitfaden zur Anspruchsberechtigung für Dienstleistungen und keine Behauptung, ein offizieller NSW-Ablauf sei nachgebildet worden.

NSW Designsystem Vollständige Implementierung und Prüfung

Die Vorlage samt Abhängigkeiten umsetzen

Ein Vite-Vanilla-Projekt erstellen und nsw-design-system 3.27.0 sowie Public Sans installieren. Anschließend den bereitgestellten Entry und nsw.css speichern. Ein Root-Mount-Element muss vorhanden sein. Die vollständigen Inhalte für alle drei Phasen, die eigens erstellten Prompts, die Initialisierung der nativen Tabs und die Handler für die Leseliste sind enthalten. Das Speicher- und Zurücksetzverhalten wird nicht durch Pseudocode ersetzt.

1. Das festgelegte NSW-Paket und die Public-Sans-Schriftdateien installieren.
2. Den vollständigen Entry und nsw.css mit einem Root-Mount-Element speichern.
3. Prompts in zwei verschiedenen Tabs speichern und prüfen, ob der Status erhalten bleibt.
4. ArrowRight verwenden, die Liste leeren und den leeren Zustand prüfen.

Tab-Navigation und gespeicherte Inhalte voneinander trennen

Die native Tabs-Klasse erst initialisieren, wenn ihre Linkziele und Panels vorhanden sind. Übereinstimmende Fragment-IDs bilden die Voraussetzung für die Erweiterung: Wird eine Panel-ID geändert, ohne das zugehörige href anzupassen, geht die Verknüpfung verloren, selbst wenn die Tab-Labels weiterhin korrekt aussehen. Bei mehreren Gruppen auf einer Seite muss jede Gruppe eigene IDs erhalten.

Die Leseliste als Anwendungsstatus außerhalb der Tab-Instanz behandeln. Der Speicherstatus eines Prompts muss einen Panelwechsel überstehen, und aria-pressed muss diesen Status bei der Rückkehr zum Panel wiedergeben. Tabs eignen sich für gleichrangige Inhalte, die Lesende erneut aufrufen können. Ein sequenzielles Formular, bei dem Schritte abgeschlossen werden müssen, erfordert ein anderes Navigationsmodell. Für dauerhafte Speicherung bräuchte es zudem eine explizite Speicher- und Wiederherstellungsrichtlinie, statt das Beispiel, das nur den Seitenstatus verwaltet, stillschweigend zu verändern.

NSW Designsystem Beispiele für Designsystem-Komponenten

import Tabs from 'nsw-design-system/src/components/tabs/tabs.js';
import 'nsw-design-system/css';
import '@fontsource/public-sans/latin-400.css';
import '@fontsource/public-sans/latin-700.css';
import './nsw.css';
const sessions=[['Prepare','Choose one question to explore','Start with a clear outcome rather than a long list of activities.','Write a one-sentence purpose. Identify the people who can answer the question and the evidence you already have.'],['Discuss','Make room for different views','Use a short, structured discussion to compare observations.','Ask participants to describe what they noticed before proposing solutions. Keep a separate record of assumptions that need evidence.'],['Review','Turn observations into a next step','End with an action that has an owner and a clear reason.','Choose one improvement to investigate. Record what would count as success and when the group will review the result.']];
document.getElementById('root').innerHTML=`<main><p class="eyebrow">NSW DESIGN SYSTEM / ORIGINAL WORKSHOP STUDY</p><h1>Plan a focused discussion</h1><p class="nsw-intro">Move between three stages and save useful prompts to a local reading list.</p><div class="layout"><section class="nsw-tabs js-tabs"><ul class="nsw-tabs__list">${sessions.map(([name],i)=>`<li><a href="#session-${i}">${name}</a></li>`).join('')}</ul>${sessions.map(([name,title,lead,body],i)=>`<section id="session-${i}" class="nsw-tabs__content"><p class="step">STAGE ${i+1} / 3</p><h2>${title}</h2><p class="nsw-intro">${lead}</p><p>${body}</p><div class="prompt"><h3>Prompt to keep</h3><blockquote>${['What do we need to understand before choosing a solution?','Which observations are shared, and where do they differ?','What is the smallest next step that would reduce uncertainty?'][i]}</blockquote><button class="nsw-button nsw-button--dark save" data-index="${i}" aria-pressed="false">Save this prompt</button></div></section>`).join('')}</section><aside><h2>Your reading list</h2><p id="count" role="status">0 prompts saved</p><ul id="saved"></ul><p id="empty">Save a prompt from any stage. Changing tabs keeps your selection.</p><button class="nsw-button nsw-button--white" id="clear" disabled>Clear reading list</button><p class="note">This is an original local study using NSW 3.27.0 tabs and CSS. Nothing is stored after reloading.</p></aside></div></main>`;
new Tabs(document.querySelector('.js-tabs')).init();const saved=new Set();const $=id=>document.getElementById(id);function render(){$('count').textContent=saved.size+' prompt'+(saved.size===1?'':'s')+' saved';$('saved').replaceChildren(...[...saved].sort().map(i=>{const li=document.createElement('li');li.textContent=sessions[i][0]+': '+sessions[i][1];return li}));$('empty').hidden=saved.size>0;$('clear').disabled=!saved.size;document.querySelectorAll('.save').forEach(b=>{const yes=saved.has(Number(b.dataset.index));b.setAttribute('aria-pressed',String(yes));b.textContent=yes?'Remove saved prompt':'Save this prompt'})}document.querySelectorAll('.save').forEach(b=>b.addEventListener('click',()=>{const i=Number(b.dataset.index);saved.has(i)?saved.delete(i):saved.add(i);render()}));$('clear').addEventListener('click',()=>{saved.clear();render()});

body{margin:0}main{max-width:1240px;padding:32px;margin:auto}.eyebrow,.step{font-size:14px;letter-spacing:.05em;font-weight:700}.eyebrow{color:var(--nsw-brand-dark)}h1{max-width:24ch}.layout{display:grid;grid-template-columns:1.8fr 1fr;gap:32px;margin-top:40px}.nsw-tabs__content{min-height:0}.prompt{margin-top:32px;padding:24px;background:var(--nsw-brand-light)}.prompt h3{margin-top:0}.prompt blockquote{margin:16px 0 24px;padding:0;border:0;font-size:20px;line-height:1.5}.step{margin-top:0;color:var(--nsw-grey-02)}aside{padding:24px;border-top:4px solid var(--nsw-brand-dark);background:var(--nsw-off-white);align-self:start}aside h2{font-size:24px;margin-top:0}aside li{margin:16px 0}aside ul{padding-left:24px}.note{font-size:14px;margin-top:24px}button:disabled{opacity:.5;cursor:not-allowed}[hidden]{display:none!important}@media(max-width:760px){main{padding:20px}.layout{grid-template-columns:1fr}h1{font-size:36px}.prompt{padding:20px}}