Use os componentes web nativos e os tokens de design publicados da Alberta para criar uma lista completa de preparação, com opções acessíveis, progresso derivado e feedback de revisão transparente.
O export da família oficial está registrado aqui; o exemplo público usa deliberadamente Arial como alternativa, sem redistribuir arquivos licenciados da fonte Acumin.
--goa-font-size-2
.875rem
O export da família oficial está registrado aqui; o exemplo público usa deliberadamente Arial como alternativa, sem redistribuir arquivos licenciados da fonte Acumin.
--goa-font-size-3
1rem
O export da família oficial está registrado aqui; o exemplo público usa deliberadamente Arial como alternativa, sem redistribuir arquivos licenciados da fonte Acumin.
--goa-font-size-4
1.125rem
O export da família oficial está registrado aqui; o exemplo público usa deliberadamente Arial como alternativa, sem redistribuir arquivos licenciados da fonte Acumin.
--goa-font-size-6
1.5rem
O export da família oficial está registrado aqui; o exemplo público usa deliberadamente Arial como alternativa, sem redistribuir arquivos licenciados da fonte Acumin.
--goa-font-size-8
2rem
O export da família oficial está registrado aqui; o exemplo público usa deliberadamente Arial como alternativa, sem redistribuir arquivos licenciados da fonte Acumin.
--goa-font-size-9
2.5rem
O export da família oficial está registrado aqui; o exemplo público usa deliberadamente Arial como alternativa, sem redistribuir arquivos licenciados da fonte Acumin.
--goa-line-height-3
1.5rem
O export da família oficial está registrado aqui; o exemplo público usa deliberadamente Arial como alternativa, sem redistribuir arquivos licenciados da fonte Acumin.
--goa-line-height-6
2.5rem
O export da família oficial está registrado aqui; o exemplo público usa deliberadamente Arial como alternativa, sem redistribuir arquivos licenciados da fonte Acumin.
--goa-line-height-7
3rem
O export da família oficial está registrado aqui; o exemplo público usa deliberadamente Arial como alternativa, sem redistribuir arquivos licenciados da fonte Acumin.
--goa-font-weight-regular
400
O export da família oficial está registrado aqui; o exemplo público usa deliberadamente Arial como alternativa, sem redistribuir arquivos licenciados da fonte Acumin.
--goa-font-weight-bold
700
O export da família oficial está registrado aqui; o exemplo público usa deliberadamente Arial como alternativa, sem redistribuir arquivos licenciados da fonte Acumin.
03
Sistema de design Alberta Guia completo
Um guia prático para escolher, aplicar e avaliar este sistema em uma interface real.
DESIGN-alberta.md
Orientações completas, um ponto de partida para a implementação e links para o código-fonte.
Sistema de design Alberta Web Components e limites entre versões
Comece pela implementação que está realmente em execução
Este exemplo executa @abgov/web-components 3.0.0. Importar seu JavaScript registra os elementos personalizados, e importar index.css fornece a camada global de tokens. O HTML API sem abstração usa elementos com prefixo goa; os exemplos React usam wrappers Goab com uma interface de eventos diferente. Não copie diretamente as propriedades onChange de React para os elementos personalizados sem abstração.
Diferencie a versão do pacote da versão do design
A versão de um pacote e a versão de estilo de um componente não são o mesmo campo. Alguns controles documentam um atributo de versão independente. Este exemplo mantém os padrões do pacote fixado, em vez de trocar silenciosamente a versão de estilo enquanto cita outro conjunto de valores de tokens. A tabela registra os exports reais do tema claro usados nesta compilação.
Sistema de design Alberta Papéis, ritmo e tipografia
Use as cores para comunicar o estado
A ação principal e o destaque do progresso usam o papel de padrão interativo. Uma revisão inválida exibe uma mensagem de emergência com uma instrução útil; uma revisão local concluída usa uma superfície de apoio na cor de sucesso. A cor de sucesso descreve o estado da revisão local, não um envio de formulário a um serviço governamental. Os rótulos de texto e a contagem numérica transmitem as mesmas informações sem depender da tonalidade.
Documente os limites de uso das fontes
A família publicada começa com Acumin, e a folha de estilos inclui declarações de fontes hospedadas externamente. A prévia usa Arial como fallback explícito e remove essas solicitações de fontes remotas; ela não redistribui Acumin. A referência de tokens preserva o nome real da família para que um serviço autorizado possa carregar as fontes de marca aprovadas. Verifique novamente as quebras de linha ao trocar o fallback por uma fonte licenciada.
Sistema de design Alberta Rótulos e descrições de caixas de seleção
Use opções independentes para tarefas independentes
Quatro controles nativos goa-checkbox representam itens de preparação que podem ser revisados em qualquer ordem. Cada um tem um nome exclusivo, um texto visível e uma descrição que explica sua finalidade. Controles de opção implicariam uma única escolha e não representariam corretamente essa tarefa. Um serviço real deve substituir o conteúdo fictício sobre preparação por instruções pesquisadas.
Dê a cada caixa de seleção um nome exclusivo e estável.
Mantenha o rótulo visível conciso e a descrição específica.
Use caixas de seleção independentes somente quando fizer sentido selecionar várias opções.
Leia os dados do evento personalizado
O componente Web bruto emite _change com name, checked e value em event.detail. O aplicativo usa o valor booleano de checked para atualizar um Set de índices selecionados. Ele não deduz o estado pelo texto do rótulo nem exige um clique em uma pequena entrada interna. Assim, clicar no rótulo visível e selecionar pelo teclado produzem a mesma transição de estado.
Sistema de design Alberta Estado de progresso e revisão
Derive o progresso das seleções
A contagem e o elemento nativo de progresso HTML são derivados do mesmo Set. Selecionar dois itens resulta em dois de quatro; limpar os controles retorna os dois indicadores a zero. O elemento de progresso tem um nome acessível, e o texto de status ao lado informa a contagem explicitamente. Não há simulação de envio, solicitação de rede nem temporizador de conclusão.
Invalide os resumos anteriores após uma alteração
Sistema de design Alberta Composição responsiva da lista de verificação
Mantenha a tarefa e o contexto legíveis
No layout para desktop, a lista de verificação fica ao lado de um painel de progresso complementar. Em telas estreitas, o painel aparece depois dos controles na ordem do documento. Os rótulos das tarefas mantêm um tamanho legível, e as descrições quebram naturalmente em linhas abaixo deles. A linha azul do painel lateral funciona como um discreto elemento de orientação; ela não cria outra ação concorrente.
Preserve as áreas de interação
A biblioteca de componentes fornece estilos de interação para caixas de seleção e botões. O aplicativo usa CSS para controlar o espaçamento e a grade ao redor, sem substituir as áreas de interação nativas. Em telas pequenas, as duas ações podem passar para linhas diferentes. Revisar é a ação principal; Limpar seleções é visualmente secundária e não se passa pela próxima etapa de um aplicativo real.
Sistema de design Alberta Implementação completa da lista de verificação
Execute o código-fonte completo
Crie um projeto Vite sem framework, instale o pacote de componentes Web na versão fixada e salve o arquivo de entrada fornecido e CSS. Mantenha o elemento raiz de montagem. O JavaScript inclui as quatro tarefas criadas, os vínculos de eventos nativos, a contagem derivada e as transições de revisão e redefinição. Não é necessária nenhuma conta, endpoint privado ou fonte de dados externa.
Instale @abgov/web-components 3.0.0 e importe JavaScript e index.css.
Salve o arquivo de entrada completo e alberta.css com o elemento raiz de montagem.
Selecione várias tarefas e confira o progresso derivado.
Revise, altere uma opção e limpe todas as seleções nativas.
Separe os eventos dos componentes das regras da lista de verificação
Use event.detail.checked do evento _change bruto como fonte de verdade para as seleções. As propriedades do wrapper React e os eventos brutos de goa-checkbox são interfaces diferentes; copiar um manipulador de uma para outra sem adaptar os dados recebidos pode deixar o indicador de progresso fora de sincronia com a caixa de seleção visível.
O requisito mínimo de um item na lista é uma regra do aplicativo, não uma regra integrada da caixa de seleção. Derive a contagem, o valor do progresso e o texto da revisão de um único Set de seleções. Ao limpar as seleções, redefina a propriedade checked de cada elemento personalizado, além do Set. Uma alteração em uma opção deve invalidar imediatamente a revisão anterior, para que ela não descreva uma seleção passada. Um serviço real de preparação pode permitir listas incompletas; defina essa regra antes de usar o progresso como condição para avançar.
Sistema de design Alberta Exemplos de componentes do sistema de design
main.js — lista de verificação nativa completa
Registro, conteúdo das tarefas, gerenciamento das seleções e transições de revisão e redefinição.
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()});
A prévia local omite as importações de fontes externas que não são usadas. A folha de estilos completa do pacote pode conter declarações de fontes externas; a substituição mantém este estudo em Arial.
04
Sistema de design Alberta Configuração do agente de IA
Ponto de partida para implementação
Os controles nativos fixados foram testados localmente no navegador, sem backend de envio.
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
Um prompt para seu projeto
Prompt para agente de IA
Crie a lista de verificação de preparação de Alberta usando web-components 3.0.0, papéis semânticos reais de CSS e limites explícitos para o licenciamento de fontes. Use descrições nativas para as caixas de seleção, derive o progresso das seleções, não permita revisões vazias, invalide resumos antigos após alterações e redefina os controles reais. Mantenha todos os resultados locais e deixe claro que as tarefas criadas são apenas ilustrativas.
05
Sistema de design Alberta Fontes e escopo
Um estudo de componentes de OpenDesign que usa web components de Alberta 3.0.0 e Arial como fallback explícito de fonte. As tarefas criadas são fictícias e não definem requisitos de elegibilidade ou de envio para o governo.
