# Sistema de design Alberta ## Sistema de design Alberta Prévia da interface Selecione tarefas independentes, confira o progresso, revise localmente e limpe os controles nativos. ## Sistema de design Alberta Referência de design Exports reais do tema claro CSS em @abgov/web-components 3.0.0; a fonte Acumin licenciada não está incluída. ### Papéis de interação e status do tema claro | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | --goa-color-interactive-default | #006dcc | Valores extraídos da folha de estilos 3.0.0 fixada, antes das substituições do tema escuro. Use os papéis semânticos para o estado pretendido. | | --goa-color-interactive-hover | #045092 | Valores extraídos da folha de estilos 3.0.0 fixada, antes das substituições do tema escuro. Use os papéis semânticos para o estado pretendido. | | --goa-color-interactive-focus | #006dcc | Valores extraídos da folha de estilos 3.0.0 fixada, antes das substituições do tema escuro. Use os papéis semânticos para o estado pretendido. | | --goa-color-text-default | var(--goa-color-greyscale-black) | Valores extraídos da folha de estilos 3.0.0 fixada, antes das substituições do tema escuro. Use os papéis semânticos para o estado pretendido. | | --goa-color-greyscale-100 | #f2f0f0 | Valores extraídos da folha de estilos 3.0.0 fixada, antes das substituições do tema escuro. Use os papéis semânticos para o estado pretendido. | | --goa-color-emergency-default | #da291c | Valores extraídos da folha de estilos 3.0.0 fixada, antes das substituições do tema escuro. Use os papéis semânticos para o estado pretendido. | | --goa-color-success-default | #006f4c | Valores extraídos da folha de estilos 3.0.0 fixada, antes das substituições do tema escuro. Use os papéis semânticos para o estado pretendido. | | --goa-color-success-light | #d8f7e6 | Valores extraídos da folha de estilos 3.0.0 fixada, antes das substituições do tema escuro. Use os papéis semânticos para o estado pretendido. | ### Escala de espaçamento e cantos | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | --goa-space-3xs | .125rem | Primitiva de espaçamento ou raio publicada. O ponto de quebra de duas colunas da aplicação é uma escolha de layout própria. | | --goa-space-2xs | .25rem | Primitiva de espaçamento ou raio publicada. O ponto de quebra de duas colunas da aplicação é uma escolha de layout própria. | | --goa-space-xs | .5rem | Primitiva de espaçamento ou raio publicada. O ponto de quebra de duas colunas da aplicação é uma escolha de layout própria. | | --goa-space-s | .75rem | Primitiva de espaçamento ou raio publicada. O ponto de quebra de duas colunas da aplicação é uma escolha de layout própria. | | --goa-space-m | 1rem | Primitiva de espaçamento ou raio publicada. O ponto de quebra de duas colunas da aplicação é uma escolha de layout própria. | | --goa-space-l | 1.5rem | Primitiva de espaçamento ou raio publicada. O ponto de quebra de duas colunas da aplicação é uma escolha de layout própria. | | --goa-space-xl | 2rem | Primitiva de espaçamento ou raio publicada. O ponto de quebra de duas colunas da aplicação é uma escolha de layout própria. | | --goa-space-2xl | 3rem | Primitiva de espaçamento ou raio publicada. O ponto de quebra de duas colunas da aplicação é uma escolha de layout própria. | | --goa-space-3xl | 4rem | Primitiva de espaçamento ou raio publicada. O ponto de quebra de duas colunas da aplicação é uma escolha de layout própria. | | --goa-border-radius-xs | .25rem | Primitiva de espaçamento ou raio publicada. O ponto de quebra de duas colunas da aplicação é uma escolha de layout própria. | | --goa-border-radius-s | .375rem | Primitiva de espaçamento ou raio publicada. O ponto de quebra de duas colunas da aplicação é uma escolha de layout própria. | | --goa-border-radius-m | .5rem | Primitiva de espaçamento ou raio publicada. O ponto de quebra de duas colunas da aplicação é uma escolha de layout própria. | | --goa-border-radius-l | .625rem | Primitiva de espaçamento ou raio publicada. O ponto de quebra de duas colunas da aplicação é uma escolha de layout própria. | ### Primitivas tipográficas | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | --goa-font-family-sans | acumin-variable, helvetica-neue, arial, sans-serif | 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. | ## Sistema de design Alberta Guia completo Um guia prático para escolher, aplicar e avaliar este sistema em uma interface real. 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 A revisão cria um resumo textual local somente quando pelo menos um item está selecionado. Se nada estiver selecionado, uma mensagem é exibida e o foco vai para a primeira caixa de seleção. Toda alteração posterior em uma caixa de seleção oculta a revisão anterior, para que ela não pareça representar as novas escolhas. A ação de limpar também atualiza os controles nativos reais, não apenas a contagem visual. ## 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. 1. Instale @abgov/web-components 3.0.0 e importe JavaScript e index.css. 2. Salve o arquivo de entrada completo e alberta.css com o elemento raiz de montagem. 3. Selecione várias tarefas e confira o progresso derivado. 4. 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. ``` import '@abgov/web-components'; import '@abgov/web-components/index.css'; import './alberta.css'; document.getElementById('root').innerHTML=`

ALBERTA DESIGN SYSTEM / COMPONENT STUDY

Prepare a submission

Track an original sample checklist. These preparation steps are illustrative, not eligibility rules for a government program.

Your preparation checklist

Check each item when you have reviewed it.

Review checklistClear selections
`; 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()}); ``` Referência de código - Os elementos personalizados brutos usam os eventos _change e _click; não os substitua por callbacks do wrapper React. ### alberta.css — layout das tarefas e fallback explícito de fonte Composição responsiva original em torno dos controles nativos. ``` main{padding:32px;max-width:1200px;margin:auto}.eyebrow{font-size:14px;letter-spacing:.06em;font-weight:700}h1{margin:16px 0 24px}.lead{max-width:65ch}.workspace{display:grid;grid-template-columns:1.5fr 1fr;gap:48px;margin-top:40px}h2{margin-top:0}goa-checkbox{display:block;margin-bottom:24px}.actions{display:flex;flex-wrap:wrap;gap:16px;margin-top:32px}aside{padding:24px;background:var(--goa-color-greyscale-100);border-top:4px solid var(--goa-color-interactive-default);align-self:start}aside strong{display:block;font:var(--goa-typography-heading-l)}progress{display:block;width:100%;height:12px;margin:24px 0;accent-color:var(--goa-color-interactive-default)}aside li{margin:12px 0}#error{margin-top:24px;color:var(--goa-color-emergency-default)}#result{margin-top:24px;padding:24px;border-left:4px solid var(--goa-color-success-default);background:var(--goa-color-success-light)}#result h3{margin-top:0}[hidden]{display:none!important}@media(max-width:760px){main{padding:20px}.workspace{grid-template-columns:1fr;gap:32px}h1{font-size:32px;line-height:1.2}} /* Public specimen font fallback; load approved Acumin only where licensed. */ :root{--goa-font-family-sans:Arial,sans-serif;--goa-font-family-mono:monospace;} ``` Referência de código - 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. ## 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. ``` npm create vite@latest alberta-checklist -- --template vanilla cd alberta-checklist npm install npm install @abgov/web-components@3.0.0 # Replace src/main.js and add src/alberta.css. Keep
. npm run dev ``` ### Um prompt para seu projeto ``` 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. ``` ## 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. - Configuração para desenvolvedores Importações de pacotes e implementações compatíveis. - Caixa de seleção API Atributos e eventos brutos dos elementos personalizados. - Botão API Tipos de ação e comportamento dos componentes. - Código-fonte público Implementação versionada dos componentes e exportações de CSS. ## Sistema de design Alberta Recursos relacionados ### Amsterdam Use o contrato real de Switch de código aberto da Amsterdam, com um tema neutro completo, rótulos acessíveis e preferências de leitura aplicadas imediatamente. ### B.C. sistema de design Crie um formulário de preferências de lembrete no estilo B.C., com tokens semânticos reais, controles Aria nativos de React, campos de contato condicionais e comportamento completo de validação. ### Canada.ca sistema de design Explore a tipografia, os tokens semânticos e os componentes web nativos do GC Design System por meio de um guia de preparação completo e pesquisável, com comportamento de divulgação e estado vazio. - [Referência de implementação](https://design.alberta.ca/components/checkbox/) - [Fonte](https://github.com/GovAlta/ui-components) - [Referência de código](https://design.alberta.ca/components/checkbox/) - [Referência de código](https://design.alberta.ca/get-started/developers/setup/) - [Configuração para desenvolvedores Importações de pacotes e implementações compatíveis.](https://design.alberta.ca/get-started/developers/setup/) - [Caixa de seleção API Atributos e eventos brutos dos elementos personalizados.](https://design.alberta.ca/components/checkbox/) - [Botão API Tipos de ação e comportamento dos componentes.](https://design.alberta.ca/components/button/) - [Código-fonte público Implementação versionada dos componentes e exportações de CSS.](https://github.com/GovAlta/ui-components)