Sistema de design Singapore Government.

Escolha a família SGDS atual de sistema de design Singapore Government

Componentes web e páginas antigas de Bootstrap

O SGDS v 3 usa @govtechsg/sgds-web-component. Seus custom elements, tokens de tema e integração atual com utilitários seguem um caminho de implementação diferente da folha de estilos antiga @govtechsg/sgds Bootstrap. Não misture instruções de JavaScript v 2 com tags da v 3 esperando que os novos controles sejam inicializados.

O exemplo usa o pacote de navegador real 3.29.0 para registrar os controles de quantidade e os botões. Ele apresenta um planejador original para uma oficina comunitária, sem cabeçalho do Governo de Singapura nem alegação de afiliação. Os controles alteram apenas valores locais; não há fluxo de reserva nem de pagamento.

Consulte a especificação de apoio

Os tokens de tema de sistema de design Singapore Government são organizados em camadas

Cores primitivas e uso semântico

O arquivo raiz define os cinzas primitivos, o roxo product-primary e as demais famílias da paleta. Em seguida, os arquivos dos temas claro e escuro mapeiam esses valores primitivos para funções como texto padrão, texto complementar, superfície preenchida e borda. Um papel de texto primário pode mudar no modo noturno, enquanto o papel de superfície preenchida primária continua usando o mesmo valor primitivo.

A prévia usa propriedades semânticas para o fundo do documento, o texto, as bordas e o painel atenuado. Assim, alternar sgds-night-theme no elemento raiz atualiza tanto os elementos personalizados quanto a composição ao redor deles. Um parágrafo preto definido diretamente no código romperia essa relação, mesmo que os próprios controles continuassem alternando corretamente.

A paleta roxa é o padrão publicado do produto, não um motivo para se passar por uma agência governamental. O uso da identidade de uma agência e de um cabeçalho aprovado exige autorização própria.

Consulte a especificação de apoio

Tipografia responsiva com valores reais de sistema de design Singapore Government

Consulte o token fornecido, não uma proporção abreviada

O responsive.css atual mapeia heading-xl para 32, 36 e 40px nos três intervalos, com alturas de linha correspondentes de 40, 44 e 48px. As alterações ocorrem em 1024 e 1440px. Elas são independentes dos limites menores de layout da grade, em 512 e 768px. Body-md permanece em 16px.

A visão geral pública de tipografia descreve proporções gerais e princípios de combinação, enquanto a folha de tokens fornecida contém aliases exatos em pixels para cada função. Esta referência usa esses aliases executáveis ao apresentar valores de implementação. Mantenha a semântica dos títulos em HTML e aplique um token visual adequado; um título pequeno de seção não precisa de um nível de título artificialmente inferior.

Inter é a fonte de marca indicada, com pesos 300, 400, 600 e 700 documentados na configuração. O exemplo local substitui explicitamente a fonte por Arial e não carrega fontes remotas. Ao adotar o sistema em um serviço, carregue e teste a fonte escolhida, em vez de confiar apenas no nome da família CSS.

Consulte a especificação de apoio

Diferentes funções de espaçamento de sistema de design Singapore Government

Não reduza todos os espaços a uma única escala

A escala primitiva de espaçamento inclui 2px, além de 4, 8, 12, 16 e valores maiores. Acima desses valores primitivos ficam os aliases de espaçamento fixo e os espaços responsivos de layout, componentes e texto. Um layout-gap-md de base muda de 16→24→32px, enquanto text-gap-md muda de 12→16→16px. Portanto, a mesma palavra “médio” não representa o mesmo valor numérico em todos os usos.

O planejador usa um máximo de 888px para manter juntas duas áreas de conteúdo compactas: os controles de quantidade e o plano atual. Abaixo de 768px, elas ficam empilhadas. Essa é uma composição de aplicação, não uma afirmação de que a grade padrão completa do SGDS sempre termina em 888px. A referência apresenta separadamente as regras mais abrangentes dos contêineres padrão.

Consulte a especificação de apoio

Sistema de design Singapore Government Um controle de quantidade com limites

Use quantidade para indicar uma contagem, não um identificador

Um seletor de quantidade é adequado para uma contagem pequena que a pessoa possa ajustar uma unidade por vez. O exemplo solicita de 1 a 5 participantes e de 0 a 3 kits compartilhados. Esses são limites de demonstração; um serviço real deve defini-los com base na disponibilidade ou na política aplicável e informá-los na dica. CEPs, identificadores e valores monetários precisos exigem outro tipo de campo.

O componente nativo combina botões de ícone para diminuir e aumentar com um campo numérico. min, max e step são numéricos, value representa a contagem atual, e label/hintText fornecem o contexto. Ao atingir um limite, o botão correspondente fica indisponível; a entrada direta de valores também precisa de validação de restrições.

hasFeedback aceita a string style, text ou both. O exemplo usa both, além de uma mensagem específica em invalidFeedback. Tratar hasFeedback como um booleano copiado de outro componente API descartaria essa configuração exata.

<sgds-quantity-toggle
  id="people" name="people" label="Participants"
  hintText="Choose 1 to 5 participants"
  min="1" max="5" step="1" value="1"
  hasFeedback="both"
  invalidFeedback="Enter a whole number from 1 to 5">
</sgds-quantity-toggle>
<output id="participant-total">1</output>
<script>
  customElements.whenDefined('sgds-quantity-toggle').then(() => {
    const quantity = document.querySelector('#people');
    const update = () => {
      document.querySelector('#participant-total').textContent = String(quantity.value);
    };
    ['sgds-input', 'sgds-change'].forEach(name => {
      quantity.addEventListener(name, update);
    });
  });
</script>

Referência de código

Consulte a especificação de apoio

Sistema de design Singapore Government Mantenha o resumo sincronizado

Dois caminhos de eventos e uma fonte de dados

O resumo lê o valor de cada elemento host. Ele escuta sgds-input e sgds-change, pois as alterações digitadas e as mudanças confirmadas pelos botões podem seguir caminhos de eventos diferentes. Na primeira versão local do exemplo, testar apenas a entrada digitada não detectou atualizações feitas pelos botões de incremento; o exemplo final trata ambos os eventos.

O botão Check plan chama reportValidity nos dois elementos nativos e exibe uma mensagem de status local. Ele não converte um número inválido em um total plausível. O botão Reset atribui os valores iniciais aos elementos host e limpa o estado inválido visível para a aplicação com setInvalid(false); em seguida, atualiza o resumo após updateComplete.

Um campo desativado não equivale a um campo somente leitura: o primeiro é excluído do envio do formulário, enquanto o segundo mantém seu valor. Se um serviço real bloquear uma quantidade confirmada para revisão, use o estado adequado, em vez de desativá-la apenas para deixá-la cinza.

• Use sgds-input e sgds-change quando um resumo precisar refletir tanto a digitação quanto os botões de incremento.
• Leia value no elemento host personalizado, em vez de acessar o shadow DOM.
• Mantenha o feedback de validade local separado de uma reserva ou envio bem-sucedido.

Consulte a especificação de apoio

Sistema de design Singapore Government Estilos antes do registro

Carregue a cadeia de dependências do tema

Em uma aplicação empacotada, importe day.css, night.css e css/sgds.css nessa ordem e, em seguida, importe a biblioteca de componentes uma única vez. Os arquivos day/night importam root.css, que importa responsive.css. O arquivo de estilos de base importa reboot.css e grid.css. Uma cópia estática deve manter essas dependências relativas, não apenas os três primeiros arquivos.

O arquivo oficial utility.css é um ponto de entrada de configuração do Tailwind CSS v4. Ele precisa passar por uma compilação configurada do Tailwind; adicioná-lo como uma folha de estilos comum no navegador não gera todas as classes utilitárias sgds:. Este exemplo usa propriedades personalizadas semânticas e de layout comuns CSS, portanto não pressupõe uma compilação de utilitários.

No exemplo isolado para navegador, o arquivo publicado é index.umd.min.js. Os metadados do pacote ainda mencionam index.umd.js, mas esse arquivo não está presente na distribuição inspecionada. A prévia local usa o bundle minificado disponível; a configuração com npm usa a importação documentada do pacote para empacotadores.

1. Fixe a versão 3.29.0 e importe os tokens do tema antes das regras de base.
2. Forneça Inter ou escolha deliberadamente uma alternativa e teste-a.
3. Registre os elementos personalizados uma única vez, aguarde a definição quando necessário e, em seguida, associe os listeners da aplicação.

Consulte a especificação de apoio

Sistema de design Singapore Government Teste os limites e o tema em conjunto

Os limites ajudam a identificar erros de integração

Aumente duas vezes a quantidade de participantes e confira se o controle e o resumo mostram 3. Digite 9 diretamente e clique em Check plan: o componente deve exibir o feedback de intervalo, e o status deve solicitar uma correção. Altere o valor para 5 e confirme que o controle de incremento está desativado, enquanto o valor continua válido.

Depois de inserir as quantidades, alterne para o tema noturno e verifique se os valores foram preservados, se o resumo continua legível e se os limites ainda funcionam corretamente. Clique em Reset e repita o teste com o teclado: Tab deve percorrer o campo e os botões em uma ordem adequada, e Enter ou Espaço deve ativar o botão em foco.

O teste local verifica o comportamento do componente em 1440, 768 e 390px e confirma que as dependências do tema são servidas localmente. Ele não comprova a compatibilidade com navegadores nem a certificação de acessibilidade de um futuro serviço governamental. Esse serviço deverá testar todo o fluxo, os textos, a personalização do tema e o tratamento de dados.

Consulte a especificação de apoio

Sistema de design Singapore Government Exemplos de componentes do sistema de design

<sgds-quantity-toggle
  id="people" name="people" label="Participants"
  hintText="Choose 1 to 5 participants"
  min="1" max="5" step="1" value="1"
  hasFeedback="both"
  invalidFeedback="Enter a whole number from 1 to 5">
</sgds-quantity-toggle>
<output id="participant-total">1</output>
<script>
  customElements.whenDefined('sgds-quantity-toggle').then(() => {
    const quantity = document.querySelector('#people');
    const update = () => {
      document.querySelector('#participant-total').textContent = String(quantity.value);
    };
    ['sgds-input', 'sgds-change'].forEach(name => {
      quantity.addEventListener(name, update);
    });
  });
</script>

npm install --save-exact @govtechsg/[email protected]

/* globals.css — tokens before foundation rules */
@import "@govtechsg/sgds-web-component/themes/day.css";
@import "@govtechsg/sgds-web-component/themes/night.css";
@import "@govtechsg/sgds-web-component/css/sgds.css";
/* Only for a configured Tailwind CSS v4 build: */
/* @import "@govtechsg/sgds-web-component/css/utility.css"; */

// main.js — register custom elements once
import '@govtechsg/sgds-web-component';

// Enable the published night theme; omit class for day.
document.documentElement.classList.toggle('sgds-night-theme');

<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>SGDS quantity specimen</title><link rel="stylesheet" href="vendor/sgds-3.29.0/themes/day.css"><link rel="stylesheet" href="vendor/sgds-3.29.0/themes/night.css"><link rel="stylesheet" href="vendor/sgds-3.29.0/css/sgds.css"><style>:root{--sgds-font-family-brand:Arial,sans-serif}*{box-sizing:border-box}body{margin:0;background:var(--sgds-bg-default);color:var(--sgds-color-default);font-family:var(--sgds-font-family-brand)}main{max-width:888px;margin:auto;padding:32px 20px}h1{font-size:var(--sgds-font-size-heading-xl);line-height:var(--sgds-line-height-xl);letter-spacing:var(--sgds-letter-spacing-tight)}h2{font-size:var(--sgds-font-size-heading-sm);line-height:var(--sgds-line-height-sm)}p{max-width:60ch;line-height:1.5}.eyebrow{color:var(--sgds-color-subtle);font-size:14px}.layout{display:grid;grid-template-columns:1fr 1fr;gap:var(--sgds-layout-gap-md);margin:32px 0}.control{border:1px solid var(--sgds-border-color-default);border-radius:var(--sgds-border-radius-md);padding:24px;background:var(--sgds-bg-alternate)}sgds-quantity-toggle{display:block;max-width:100%}dl{margin:24px 0}dt{color:var(--sgds-color-subtle)}dd{margin:0 0 16px;font-weight:600}.actions{display:flex;flex-wrap:wrap;gap:16px}#status{min-height:24px}button.native{font:inherit;background:transparent;border:1px solid var(--sgds-border-color-default);color:inherit;padding:8px 12px;border-radius:8px}button.native:focus-visible{outline:3px solid var(--sgds-primary-border-color-default);outline-offset:3px}@media(max-width:767px){.layout{grid-template-columns:1fr}.control{padding:20px}}</style><main><p class="eyebrow">Independent specimen · Community workshop planning</p><h1>Plan a small workshop group</h1><p>Adjust two bounded quantities and inspect the local summary. This example does not reserve places or equipment.</p><button class="native" id="theme" aria-pressed="false">Night theme</button><div class="layout"><section class="control"><h2>People and materials</h2><form id="planner"><sgds-quantity-toggle id="people" name="people" label="Participants" hintText="Choose 1 to 5 participants" min="1" max="5" step="1" value="1" hasFeedback="both" invalidFeedback="Enter a whole number from 1 to 5"></sgds-quantity-toggle><div style="height:24px"></div><sgds-quantity-toggle id="kits" name="kits" label="Shared material kits" hintText="Choose 0 to 3 kits" min="0" max="3" step="1" value="0" hasFeedback="both" invalidFeedback="Enter a whole number from 0 to 3"></sgds-quantity-toggle></form></section><section><h2>Current plan</h2><dl><dt>Participants</dt><dd id="p-value">1</dd><dt>Material kits</dt><dd id="k-value">0</dd></dl><p>These are demonstration limits. A real service should explain its own availability and eligibility rules.</p><div class="actions"><sgds-button id="review">Check plan</sgds-button><sgds-button id="reset" variant="outline">Reset</sgds-button></div><p id="status" role="status" aria-live="polite"></p></section></div></main><script src="vendor/sgds-3.29.0/index.umd.min.js"></script><script type="module">await Promise.all(['sgds-quantity-toggle','sgds-button'].map(x=>customElements.whenDefined(x)));const p=document.querySelector('#people'),k=document.querySelector('#kits'),status=document.querySelector('#status');await Promise.all([p.updateComplete,k.updateComplete]);const update=()=>{document.querySelector('#p-value').textContent=String(p.value);document.querySelector('#k-value').textContent=String(k.value);status.textContent=''};[p,k].forEach(x=>['sgds-input','sgds-change'].forEach(name=>x.addEventListener(name,update)));document.querySelector('#review').onclick=()=>{const validP=p.reportValidity(),validK=k.reportValidity();status.textContent=validP&&validK?'The quantities are within the demo limits. Nothing has been reserved.':'Correct the highlighted quantity before continuing.'};document.querySelector('#reset').onclick=async()=>{p.value=1;k.value=0;p.setInvalid(false);k.setInvalid(false);await Promise.all([p.updateComplete,k.updateComplete]);update()};document.querySelector('#theme').onclick=e=>{const night=document.documentElement.classList.toggle('sgds-night-theme');e.currentTarget.setAttribute('aria-pressed',String(night));e.currentTarget.textContent=night?'Day theme':'Night theme'};window.demoReady=true;</script></html>