Administración pública y servicios públicos · Nuevo recurso
Sistema de diseño Alberta.
Usa los componentes web nativos y los tokens de diseño publicados de Alberta para crear una lista de preparación completa, con opciones accesibles, progreso calculado y comentarios de revisión transparentes.
Valores extraídos de la hoja de estilos fijada en la versión 3.0.0, antes de las anulaciones del tema oscuro. Usa roles semánticos para el estado previsto.
--goa-color-interactive-hover
#045092
Valores extraídos de la hoja de estilos fijada en la versión 3.0.0, antes de las anulaciones del tema oscuro. Usa roles semánticos para el estado previsto.
--goa-color-interactive-focus
#006dcc
Valores extraídos de la hoja de estilos fijada en la versión 3.0.0, antes de las anulaciones del tema oscuro. Usa roles semánticos para el estado previsto.
--goa-color-text-default
var(--goa-color-greyscale-black)
Valores extraídos de la hoja de estilos fijada en la versión 3.0.0, antes de las anulaciones del tema oscuro. Usa roles semánticos para el estado previsto.
--goa-color-greyscale-100
#f2f0f0
Valores extraídos de la hoja de estilos fijada en la versión 3.0.0, antes de las anulaciones del tema oscuro. Usa roles semánticos para el estado previsto.
--goa-color-emergency-default
#da291c
Valores extraídos de la hoja de estilos fijada en la versión 3.0.0, antes de las anulaciones del tema oscuro. Usa roles semánticos para el estado previsto.
--goa-color-success-default
#006f4c
Valores extraídos de la hoja de estilos fijada en la versión 3.0.0, antes de las anulaciones del tema oscuro. Usa roles semánticos para el estado previsto.
--goa-color-success-light
#d8f7e6
Valores extraídos de la hoja de estilos fijada en la versión 3.0.0, antes de las anulaciones del tema oscuro. Usa roles semánticos para el estado previsto.
Aquí se registra la exportación oficial de la familia tipográfica; el ejemplo público usa deliberadamente Arial como alternativa, en vez de redistribuir archivos de fuente Acumin con licencia.
--goa-font-size-2
.875rem
Aquí se registra la exportación oficial de la familia tipográfica; el ejemplo público usa deliberadamente Arial como alternativa, en vez de redistribuir archivos de fuente Acumin con licencia.
--goa-font-size-3
1rem
Aquí se registra la exportación oficial de la familia tipográfica; el ejemplo público usa deliberadamente Arial como alternativa, en vez de redistribuir archivos de fuente Acumin con licencia.
--goa-font-size-4
1.125rem
Aquí se registra la exportación oficial de la familia tipográfica; el ejemplo público usa deliberadamente Arial como alternativa, en vez de redistribuir archivos de fuente Acumin con licencia.
--goa-font-size-6
1.5rem
Aquí se registra la exportación oficial de la familia tipográfica; el ejemplo público usa deliberadamente Arial como alternativa, en vez de redistribuir archivos de fuente Acumin con licencia.
--goa-font-size-8
2rem
Aquí se registra la exportación oficial de la familia tipográfica; el ejemplo público usa deliberadamente Arial como alternativa, en vez de redistribuir archivos de fuente Acumin con licencia.
--goa-font-size-9
2.5rem
Aquí se registra la exportación oficial de la familia tipográfica; el ejemplo público usa deliberadamente Arial como alternativa, en vez de redistribuir archivos de fuente Acumin con licencia.
--goa-line-height-3
1.5rem
Aquí se registra la exportación oficial de la familia tipográfica; el ejemplo público usa deliberadamente Arial como alternativa, en vez de redistribuir archivos de fuente Acumin con licencia.
--goa-line-height-6
2.5rem
Aquí se registra la exportación oficial de la familia tipográfica; el ejemplo público usa deliberadamente Arial como alternativa, en vez de redistribuir archivos de fuente Acumin con licencia.
--goa-line-height-7
3rem
Aquí se registra la exportación oficial de la familia tipográfica; el ejemplo público usa deliberadamente Arial como alternativa, en vez de redistribuir archivos de fuente Acumin con licencia.
--goa-font-weight-regular
400
Aquí se registra la exportación oficial de la familia tipográfica; el ejemplo público usa deliberadamente Arial como alternativa, en vez de redistribuir archivos de fuente Acumin con licencia.
--goa-font-weight-bold
700
Aquí se registra la exportación oficial de la familia tipográfica; el ejemplo público usa deliberadamente Arial como alternativa, en vez de redistribuir archivos de fuente Acumin con licencia.
03
Guía completa sistema de diseño Alberta
Una guía práctica para elegir, aplicar y revisar este sistema en una interfaz real.
DESIGN-alberta.md
Orientación completa, un punto de partida para la implementación y enlaces al código fuente.
Componentes web y límites entre versiones sistema de diseño Alberta
Empieza por la implementación que está en ejecución
Este ejemplo ejecuta @abgov/web-components 3.0.0. Al importar su JavaScript se registran los elementos personalizados y al importar index.css se proporciona la capa global de tokens. El HTML API sin procesar usa elementos con el prefijo goa; los ejemplos de React usan envoltorios Goab con una superficie de eventos distinta. No copies directamente las propiedades onChange de React en los elementos personalizados sin procesar.
Distingue las versiones del paquete y del diseño
La versión de un paquete y la versión de estilo de un componente no son el mismo dato. Algunos controles documentan un atributo de versión independiente. Este ejemplo conserva los valores predeterminados del paquete fijado, en lugar de cambiar en silencio la versión de estilo mientras cita otro conjunto de valores de tokens. La tabla registra las exportaciones reales del tema claro que usa esta compilación.
Roles, ritmo y tipografía de sistema de diseño Alberta
Usa el color para comunicar el estado
La acción principal y el acento de progreso usan el rol interactivo predeterminado. La revisión con errores muestra texto de emergencia con una instrucción útil; una revisión local completada usa una superficie de apoyo con color de éxito. El color de éxito describe el estado de la revisión local, no una solicitud enviada a un servicio gubernamental. Las etiquetas de texto y el recuento numérico transmiten la misma información sin depender del tono.
Documenta los límites de las fuentes tipográficas
La familia publicada comienza con Acumin y la hoja de estilos incluye declaraciones de fuentes alojadas externamente. La vista previa usa Arial como alternativa explícita y elimina esas solicitudes de fuentes remotas; no redistribuye Acumin. La referencia de tokens conserva el nombre real de la familia para que un servicio autorizado pueda cargar las fuentes de marca aprobadas. Vuelve a comprobar los saltos de línea al cambiar la fuente alternativa por una fuente con licencia.
Sistema de diseño Alberta Etiquetas y descripciones de casillas de verificación
Usa opciones independientes para tareas independientes
Cuatro controles nativos goa-checkbox representan elementos de preparación que pueden revisarse en cualquier orden. Cada uno tiene un nombre único, un texto visible y una descripción que explica su propósito. Los controles de opción única implicarían que solo se puede elegir una opción y no representarían correctamente esta tarea. Un servicio real debe sustituir el contenido ficticio de preparación por instrucciones investigadas.
Asigna a cada casilla un nombre único y estable.
Mantén la etiqueta visible concisa y la descripción específica.
Usa casillas independientes solo cuando tenga sentido elegir varias opciones.
Lee los datos del evento personalizado
El componente web sin procesar emite _change con name, checked y value en event.detail. La aplicación usa el valor booleano checked para actualizar un Set de índices seleccionados. No deduce el estado a partir del texto de la etiqueta ni requiere hacer clic en un pequeño campo de entrada interno. Por eso, tanto hacer clic en la etiqueta visible como seleccionar con el teclado producen la misma transición de estado.
Sistema de diseño Alberta Estado de progreso y revisión
Deriva el progreso de la selección
El recuento y el elemento nativo de progreso HTML se derivan del mismo Set. Al seleccionar dos elementos, el progreso muestra dos de cuatro; al desmarcar los controles, ambos indicadores vuelven a cero. El elemento de progreso tiene un nombre accesible y el texto de estado contiguo muestra el recuento explícitamente. No hay ninguna carga simulada, solicitud de red ni temporizador de finalización.
Invalida los resúmenes anteriores tras cada cambio
Sistema de diseño Alberta Composición adaptable de la lista de verificación
Mantén legibles la tarea y el contexto
En escritorio, la lista de verificación se muestra junto a un panel de progreso complementario. En pantallas estrechas, el panel aparece después de los controles en el orden del documento. Las etiquetas de las tareas conservan un tamaño legible y las descripciones se ajustan de forma natural debajo. La línea azul del panel lateral sirve como señal discreta, sin crear otra acción que compita por la atención.
Conserva las áreas de interacción
La biblioteca de componentes proporciona estilos de interacción para casillas y botones. Los controles de la aplicación CSS gestionan el espaciado y la cuadrícula circundante sin alterar las áreas nativas de interacción. Las dos acciones pueden reorganizarse en varias líneas en pantallas pequeñas. Revisar es la acción principal; Desmarcar las selecciones tiene un estilo secundario y no se presenta como el paso siguiente de una aplicación real.
Sistema de diseño Alberta Implementación completa de la lista de verificación
Ejecuta el código fuente completo
Crea un proyecto de Vite vanilla, instala el paquete de componentes web con versión fija y guarda el punto de entrada proporcionado y CSS. Conserva el elemento raíz de montaje. JavaScript incluye las cuatro tareas redactadas, los enlaces a eventos nativos, el recuento derivado y las transiciones de revisión y restablecimiento. No se necesita ninguna cuenta, endpoint privado ni conjunto de datos externo.
Instala @abgov/web-components 3.0.0 e importa JavaScript y index.css.
Guarda el punto de entrada completo y alberta.css junto con el elemento raíz de montaje.
Selecciona varias tareas y comprueba el progreso derivado.
Revisa, modifica una opción y luego desmarca todas las selecciones nativas.
Separa los eventos de los componentes de la lógica de la lista
Usa event.detail.checked del evento _change sin procesar como fuente de verdad para la selección. Las propiedades del componente contenedor React y los eventos goa-checkbox sin procesar son interfaces distintas; si se copia un controlador de una a otra sin adaptar los datos que recibe, el indicador de progreso puede quedar desincronizado con la casilla visible.
El mínimo de un elemento para la lista de verificación es una política de la aplicación, no una regla integrada de las casillas. Deriva el recuento, el valor de progreso y el texto de revisión de un único Set de selección. Al desmarcar las selecciones, restablece la propiedad checked de cada elemento personalizado y también el Set. Cada vez que se modifica una opción, descarta de inmediato la revisión anterior para que no describa una selección previa. Un servicio real de preparación puede permitir listas incompletas; decide esa política antes de convertir el progreso en un requisito.
Sistema de diseño Alberta Ejemplos de componentes del sistema de diseño
main.js — lista de verificación nativa completa
Todo el registro, el contenido de las tareas, la gestión de selecciones y las transiciones de revisión y restablecimiento.
javascript
import '@abgov/web-components';
import '@abgov/web-components/index.css';
import './alberta.css';
document.getElementById('root').innerHTML=`<main><p class="eyebrow">ALBERTA DESIGN SYSTEM / COMPONENT STUDY</p><h1>Prepare a submission</h1><p class="lead">Track an original sample checklist. These preparation steps are illustrative, not eligibility rules for a government program.</p><div class="workspace"><section aria-labelledby="tasks-heading"><h2 id="tasks-heading">Your preparation checklist</h2><p>Check each item when you have reviewed it.</p><div id="tasks"></div><div class="actions"><goa-button id="review">Review checklist</goa-button><goa-button id="reset" type="tertiary">Clear selections</goa-button></div><p id="error" role="alert" hidden>Select at least one item before reviewing.</p><section id="result" hidden tabindex="-1" aria-labelledby="result-heading"><h3 id="result-heading">Local review</h3><p id="result-text"></p></section></section><aside><p class="eyebrow">YOUR PROGRESS</p><strong id="total">0 of 4</strong><progress id="progress" value="0" max="4" aria-label="Reviewed preparation items"></progress><p id="status" role="status">No items reviewed yet.</p><h3>What happens next</h3><p>Your selections stay only in this page. Review summarizes your progress; it does not submit an application.</p><ul><li>Use the real service’s current instructions.</li><li>Do not enter personal information in a public example.</li><li>Recheck the summary after changing a selection.</li></ul></aside></div></main>`;
const labels=['Read the service instructions','Identify questions to ask','Check your own supporting information','Choose a time to complete the task'];const selected=new Set();const $=id=>document.getElementById(id);const controls=labels.map((text,i)=>{const el=document.createElement('goa-checkbox');el.setAttribute('name','step-'+i);el.setAttribute('text',text);el.setAttribute('description',['Understand the actual task before collecting information.','Record anything that needs clarification from the service.','Use the real service’s requirements, not this sample list.','Leave enough time to review the information you provide.'][i]);el.addEventListener('_change',e=>{e.detail.checked?selected.add(i):selected.delete(i);update()});$('tasks').append(el);return el});function update(){$('total').textContent=selected.size+' of 4';$('progress').value=selected.size;$('status').textContent=selected.size===4?'All sample items reviewed.':selected.size+' sample items reviewed.';$('result').hidden=true;$('error').hidden=true}$('review').addEventListener('_click',()=>{if(!selected.size){$('error').hidden=false;controls[0].shadowRoot.querySelector('input')?.focus();return}$('result-text').textContent=selected.size+' reviewed: '+[...selected].sort().map(i=>labels[i]).join('; ')+'. This is a local summary only.';$('result').hidden=false;$('result').focus()});$('reset').addEventListener('_click',()=>{selected.clear();controls.forEach(el=>el.setAttribute('checked','false'));update()});
La vista previa local omite las importaciones de fuentes externas que no se usan. La hoja de estilos completa del paquete puede contener declaraciones de fuentes externas; esta sobrescritura mantiene este ejemplo en Arial.
04
Sistema de diseño Alberta Configuración del agente de IA
Punto de partida para la implementación
Los controles nativos con versión fija se probaron localmente en el navegador, sin backend de envío.
sh
npm create vite@latest alberta-checklist -- --template vanilla
cd alberta-checklist
npm install
npm install @abgov/[email protected]
# Replace src/main.js and add src/alberta.css. Keep <div id="root"></div>.
npm run dev
Una instrucción para tu proyecto
Instrucción para el agente
Crea la lista de verificación de preparación de Alberta con web-components 3.0.0, roles semánticos CSS reales y límites explícitos para las licencias de fuentes. Usa descripciones nativas para las casillas, deriva el progreso de la selección, rechaza las revisiones vacías, elimina los resúmenes obsoletos después de cada cambio y restablece los controles reales. Mantén todos los resultados en el ámbito local y deja claro que las tareas redactadas son ilustrativas.
05
Sistema de diseño Alberta Fuentes y alcance
Estudio de componentes OpenDesign que usa Alberta web components 3.0.0 y una fuente alternativa explícita, Arial. Las tareas redactadas son ficticias y no definen los requisitos de elegibilidad ni de presentación del gobierno.
