Sistema de diseño NSW.

Sistema de diseño NSW Entorno de ejecución y tema fijados

Usa la implementación nativa de pestañas

El ejemplo ejecuta nsw-design-system 3.27.0. Importa el paquete CSS y la clase Tabs, y luego inicializa el único grupo de pestañas después de crear el marcado. Esta inicialización específica evita registrar componentes ajenos que no están presentes. La documentación actual puede describir una versión más reciente; el código descargable y los valores de los tokens aquí siguen vinculados al paquete verificado.

Separa los componentes del estado de la aplicación

La clase nativa Tabs controla la selección de pestañas, la visibilidad de los paneles y la navegación por teclado. La aplicación gestiona un Set de indicaciones guardadas. Por tanto, cambiar de etapa no altera la lista de lectura. Esta separación queda explícita en el código fuente: no hay un almacén global oculto, una solicitud al backend ni una imitación de una cuenta gubernamental.

Sistema de diseño NSW Roles de marca y superficies legibles

Usa los roles oscuro y claro en conjunto

El color de marca oscuro predeterminado es #002664 y la superficie clara es #CBEDFD. El panel de indicaciones usa el rol claro y una acción oscura. La pestaña activa usa el tratamiento de acento del paquete. Estos son los roles reales del tema, no una paleta azul arbitraria elegida para evocar un sitio del sector público. El ejemplo no usa un logotipo oficial del gobierno.

Interpreta con cuidado los nombres de los tokens

El token text-light es blanco. Se usa sobre un fondo oscuro y no debe emplearse como sinónimo genérico de texto atenuado. El texto complementario de las etapas usa, en cambio, el rol neutro más oscuro. La referencia incluye pares de colores de primer plano y fondo para los estados, pero el taller no inventa una alerta de error o éxito solo para mostrar todos los colores disponibles.

Sistema de diseño NSW Public Sans y escala adaptable

Carga la fuente antes de revisar el diseño

El ejemplo carga localmente las variantes 400 y 700 de Public Sans. El paquete define tamaños distintos para móvil y escritorio: el texto mediano aumenta de 1.125rem a 1.25rem, y la referencia del encabezado más grande aumenta de 2.25rem a 3rem. Estos pares ayudan a mantener la jerarquía de lectura cuando cambia el ancho disponible.

Mantén sencilla la jerarquía del contenido

Una etiqueta breve de etapa precede a un encabezado descriptivo, una introducción, un párrafo explicativo y una indicación guardada. La página no convierte cada frase en una tarjeta. En pantallas estrechas, la lista de lectura aparece después del panel de la etapa, mientras que la breve tira de tres etiquetas de pestaña sigue siendo fácil de usar y evita que el texto se divida en varias líneas.

Sistema de diseño NSW Marcado de pestañas y comportamiento del teclado

Permite que el componente mejore enlaces reales

La lista inicial de pestañas contiene enlaces a identificadores de contenido únicos. La inicialización añade la semántica de tablist/tab/tabpanel, gestiona la selección y establece la pestaña que puede recibir el foco. Es necesario mantener correctos los destinos href para que el componente encuentre sus paneles. No dupliques identificadores si colocas más de un grupo de pestañas en una página.

• Asocia cada enlace de pestaña con el ID de un único panel.
• Inicializa el grupo después de insertar su marcado.
• Deja que el componente nativo gestione la selección y el foco del teclado.

Comprueba la selección con el teclado, además de los clics

Sistema de diseño NSW Indicaciones guardadas y comentarios claros

Mantén el estado guardado independiente de la pestaña visible

La acción de cada etapa alterna el estado de ese mensaje en un Set, actualiza aria-pressed y cambia su etiqueta de Guardar a Quitar. El recuento y las entradas de la lista de lectura se derivan de ese Set. Al volver a una etapa guardada, se muestra correctamente su estado seleccionado. «Vaciar lista de lectura» quita todas las selecciones y se desactiva cuando no hay nada que quitar.

Explicar los límites de persistencia

La lista de lectura es un estado local de la página y desaparece al recargarla. La interfaz lo indica directamente. Una lista realmente persistente requeriría un modelo de almacenamiento explícito y un comportamiento de restauración, y aquí no se da por hecho ninguno de los dos. El contenido es un estudio original sobre diseño y debate, no una guía de elegibilidad para servicios ni una afirmación de que se haya reproducido un flujo de trabajo oficial de NSW.

Sistema de diseño NSW Implementación completa y revisión

Reproducir la fuente con sus dependencias

Crear un proyecto vanilla con Vite, instalar nsw-design-system 3.27.0 y Public Sans, y luego guardar el archivo de entrada proporcionado y nsw.css. Mantener un elemento raíz de montaje. Se incluyen el contenido completo de las tres etapas, los mensajes originales, la inicialización nativa de Tabs y los controladores de la lista de lectura. No hay pseudocódigo en lugar de la lógica para guardar y restablecer.

1. Instalar el paquete de NSW con la versión fijada y los archivos de fuente Public Sans.
2. Guardar el archivo de entrada completo y nsw.css con un elemento raíz de montaje.
3. Guardar mensajes en dos pestañas distintas y comprobar que se conserva el estado.
4. Usar ArrowRight, vaciar la lista y revisar el estado vacío.

Mantener la navegación por pestañas separada del contenido guardado

Inicializar la clase nativa Tabs solo cuando existan sus destinos de enlace y paneles. Los ID de fragmento coincidentes constituyen el contrato de mejora progresiva: cambiar el ID de un panel sin modificar su href rompe la relación, aunque las etiquetas de las pestañas sigan pareciendo correctas. Si hay varios grupos en una página, asignar ID distintos a cada grupo.

Tratar la lista de lectura como estado de la aplicación, independiente de la instancia de pestañas. El estado guardado de un mensaje debe mantenerse al cambiar de panel, y aria-pressed debe reflejarlo cuando se vuelva a ese panel. Usar pestañas para contenido del mismo nivel al que los lectores puedan volver; un formulario secuencial que requiera completar pasos necesita otro modelo de navegación. La persistencia también exigiría una política explícita de almacenamiento y restauración, en lugar de cambiar silenciosamente este ejemplo limitado a la página.

Sistema de diseño NSW Ejemplos de componentes del sistema de diseño

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}}