# Sistema de design Singapore Government

## Prévia da interface de sistema de design Singapore Government

Incremente, digite uma quantidade inválida, valide, redefina e alterne os tokens nativos dos temas claro e escuro sem perder os valores.

## Referência de design sistema de design Singapore Government

Componentes web SGDS de Singapura 3.29.0, arquivos de tema publicados, tokens responsivos e manifesto de custom elements. A prévia executa o pacote original index.umd.min.js com importações locais de tema. Ela usa Arial como alternativa explícita, sem compilação de utilitários Tailwind e sem cabeçalho oficial. O pacote v3 é diferente do SGDS baseado em Bootstrap v2.

### Tokens tipográficos responsivos reais

| Nome / Regra | Valor / Configuração | Uso |
| --- | --- | --- |
| --sgds-font-size-heading-xl | 32→36→40px | Intervalos Base, 1024px e 1440px; line-height-xl associado de 40→44→48px. |
| --sgds-font-size-heading-md | 24→26→28px | line-height-md associado de 28→32→32px. |
| --sgds-font-size-heading-sm | 20→22→24px | Uma função compacta para títulos de seção. |
| --sgds-font-size-body-md | 16px in all three ranges | Body-lg: 18→20→20px; body-sm: 14px. |
| --sgds-font-family-brand | Inter,system-ui,sans-serif | Os arquivos de fonte são carregados separadamente; a prévia usa Arial como alternativa. |
| --sgds-font-weight-* | 300,400,600,700 | Light, regular, semibold e bold. |
| --sgds-letter-spacing-tight | -0.4px | Espaçamento entre letras dos títulos em root.css. |
### Papéis de tema primitivos e semânticos

| Nome / Regra | Valor / Configuração | Uso |
| --- | --- | --- |
| --sgds-color-default | Day#1a1a1a;night#f3f3f3 | Mapeia gray1000→gray100; não define a cor do texto do corpo diretamente. |
| --sgds-bg-default | Day#ffffff;night#0e0e0e | A superfície raiz muda com sgds-night-theme. |
| --sgds-color-subtle | Day#525252;night#a5a5a5 | Texto complementar; mantenha contraste suficiente com a superfície correspondente. |
| --sgds-primary-surface-default | #6b4feb | Product-primary600 em ambos os arquivos de tema atuais. |
| --sgds-primary-color-default | Day#6b4feb;night#a999f3 | O papel do texto é diferente do papel da superfície preenchida. |
| --sgds-border-color-default | Day#868686 | Não reutilize o mesmo valor primitivo para todas as bordas do tema noturno. |
### Espaçamento, bordas e alterações responsivas

| Nome / Regra | Valor / Configuração | Uso |
| --- | --- | --- |
| --sgds-spacer-0…12 | 0,2,4,8,12,16,20,24,32,48,64,96,128px | Valores em rem, com raiz de 16px; são valores primitivos. |
| --sgds-gap-md / --sgds-gap-2-xl | 16px /32px | Espaçamentos semânticos fixos. |
| --sgds-layout-gap-md | 16→24→32px | Responsividade a 1024/1440px no pacote real; esses valores não correspondem aos breakpoints de grade 512/768. |
| --sgds-text-gap-md | 12→16→16px | O espaçamento do texto tem sua própria função responsiva. |
| --sgds-form-border-radius-md | 8px | Alias de border-radius-md. |
| --sgds-form-border-width-default | 1px | Alias de border-width-1. |
### Referência de grade padrão

| Nome / Regra | Valor / Configuração | Uso |
| --- | --- | --- |
| xs / sm | 320–511 /512–767px | 4/8 colunas; gutters de 16px; margens fixas de 20/24px. |
| md | 768–1023px | 8 colunas; gutters de 24px; margens fixas de 28px. |
| lg | 1024–1279px | 12 colunas; contêiner de 888px; gutters de 24px. |
| xl | 1280–1439px | 12 colunas; contêiner de 1168px; gutters de 32px. |
| 2xl | 1440px+ | 12 colunas; contêiner de 1312px; gutters de 32px. |
| Preview composition | 888px maximum;two columns→one below768px | Composição intencionalmente compacta para um planejador, não uma implementação completa de todos os presets de grade padrão. |
### API pública de QuantityToggle API

| Nome / Regra | Valor / Configuração | Uso |
| --- | --- | --- |
| value / step | Number;defaults0 /1 | Leia o valor do elemento após um evento nativo. |
| min / max | Number constraints | Explique os limites de serviço escolhidos usando hintText. |
| label / hintText | String properties/attributes | Forneça o nome acessível do campo e uma indicação visível do intervalo. |
| hasFeedback | style \| text \| both | Um modo de feedback cujo valor é uma string, não um atributo Boolean simples. |
| invalidFeedback / invalid | Message /Boolean state | Use o feedback do componente em vez de uma borda vermelha sem relação com ele. |
| Events | sgds-input;sgds-change;sgds-invalid;sgds-valid | Escute input e change para manter o resumo atualizado tanto com edições digitadas quanto com botões. |
| Validation methods | checkValidity();reportValidity() | Retorne resultados Boolean para as restrições; reportValidity exibe o feedback. |
| readonly versus disabled | Visible fixed value versus unavailable control | Disabled é excluído do envio; readonly mantém seu valor. |
## Guia completo de sistema de design Singapore Government

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.

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

### Quantidades com limites e dois caminhos de eventos

Um controle nativo completo com saída sincronizada.

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

### Configuração com bundle v3

Ordem correta do tema, registro da biblioteca e limites explícitos para os utilitários do Tailwind.

```
npm install --save-exact @govtechsg/sgds-web-component@3.29.0

/* 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');
```

Referência de código

### Exemplo completo independente

O documento completo inclui layout, controles e inicialização. Extraia o arquivo de exemplo indicado para obter os recursos do fornecedor no caminho relativo exato e, em seguida, disponibilize-o por HTTP.

```
<!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>
```

Referência de código

- Baixe o exemplo completo em Fontes. O README informa o comando exato para iniciá-lo localmente.

- Mantenha os caminhos do fornecedor relativos a este documento; o arquivo inclui todos os recursos usados nesta prévia.

## Sistema de design Singapore Government Configuração do agente de IA

### Ponto de partida para implementação

A prévia independente usa o bundle original verificado index.umd.min.js e a cadeia de dependências local CSS. A configuração com npm é para um empacotador; utility.css requer Tailwind v4 e foi omitido deliberadamente desta prévia estática. O ZIP completo do exemplo funcional em Sources também inclui as dependências exatas da prévia e o documento completo. Extraia os arquivos, execute python3 -m http.server 8080 nesse diretório e abra http://localhost:8080/singapore-sgds.html. Não abra exemplos baseados em módulos com file://.

```
npm install --save-exact @govtechsg/sgds-web-component@3.29.0

/* 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');
```

### Um prompt para seu projeto

```
Crie um planejador SGDS v3 de Singapura usando os elementos reais sgds-quantity-toggle e sgds-button da versão 3.29.0. Importe a cadeia completa de tokens day/night/root/responsive e os estilos de base; em seguida, registre os componentes nativos. Ofereça campos com limites para a quantidade de participantes e de kits de materiais, hasFeedback="both", rótulos e dicas exatos, validação da entrada digitada e um resumo sincronizado que escute sgds-input e sgds-change. A alternância de tema deve adicionar ou remover sgds-night-theme no elemento raiz sem redefinir os valores. Preserve a distinção entre validade local e reserva. Não carregue código v2 Bootstrap nem sugira que utility.css sem processamento gera classes do Tailwind.
```

## Sistema de design Singapore Government Fontes e escopo

Exemplo de implementação independente, com código MIT e conteúdo original de oficina. Não implica vínculo governamental, afiliação, reserva, envio pela rede nem limites de políticas oficiais.

- Desenvolver Instalação da v3 e CSS ordem de importação.

- Quantidade Finalidade, restrições e comportamento do controle.

- Espaçamento Funções do espaçamento fixo e responsivo.

- Heading Aliases para funções de títulos.

- Tipo Intenção tipográfica e orientações sobre fontes.

- Grade Predefinições padrão da grade responsiva.

- Pontos de quebra Referência de pontos de interrupção da grade e contêineres.

- Tokens Modelo de tokens em camadas.

- Semântico Funções semânticas das cores.

- Baixar o exemplo completo funcional ZIP com HTML completo, dependências locais CSS/JavaScript, licenças incluídas e instruções exatas de inicialização. Não é necessário executar uma etapa de compilação.

## Sistema de design Singapore Government Recursos relacionados

### Decanter

Crie páginas editoriais acadêmicas com a predefinição Tailwind de Decanter, uma escala tipográfica responsiva e bordas de tela fluidas. Explore cartões originais de eventos com filtros de tema funcionais e resumos expansíveis.

### Suomi.fi sistema de design

Crie formulários legíveis para serviços públicos finlandeses com Source Sans 3, tokens de espaçamento explícitos e um padrão recuperável de seleção de documentos.

### UNDP sistema de design

Explore os tokens públicos de cor e espaçamento da UNDP, abas nativas operáveis pelo teclado e um exemplo completo de leitura de oficina com progresso de revisão local.


- [Referência de implementação](https://www.designsystem.tech.gov.sg/components/quantity-toggle)
- [Fonte](https://cdn.jsdelivr.net/npm/@govtechsg/sgds-web-component@3.29.0/themes/responsive.css)
- [Fonte](https://cdn.jsdelivr.net/npm/@govtechsg/sgds-web-component@3.29.0/themes/day.css)
- [Fonte](https://cdn.jsdelivr.net/npm/@govtechsg/sgds-web-component@3.29.0/themes/root.css)
- [Fonte](https://www.designsystem.tech.gov.sg/foundations/layout/breakpoint)
- [Fonte](https://cdn.jsdelivr.net/npm/@govtechsg/sgds-web-component@3.29.0/custom-elements.json)
- [Consulte a especificação de apoio](https://www.designsystem.tech.gov.sg/get-started/develop)
- [Consulte a especificação de apoio](https://cdn.jsdelivr.net/npm/@govtechsg/sgds-web-component@3.29.0/themes/day.css)
- [Consulte a especificação de apoio](https://cdn.jsdelivr.net/npm/@govtechsg/sgds-web-component@3.29.0/themes/responsive.css)
- [Consulte a especificação de apoio](https://www.designsystem.tech.gov.sg/foundations/spacing/gap)
- [Referência de código](https://cdn.jsdelivr.net/npm/@govtechsg/sgds-web-component@3.29.0/custom-elements.json)
- [Consulte a especificação de apoio](https://www.designsystem.tech.gov.sg/components/quantity-toggle)
- [Consulte a especificação de apoio](https://cdn.jsdelivr.net/npm/@govtechsg/sgds-web-component@3.29.0/custom-elements.json)
- [Referência de código](https://www.designsystem.tech.gov.sg/get-started/develop)
- [Referência de código](https://www.designsystem.tech.gov.sg/components/quantity-toggle)
- [Desenvolver Instalação da v3 e CSS ordem de importação.](https://www.designsystem.tech.gov.sg/get-started/develop)
- [Quantidade Finalidade, restrições e comportamento do controle.](https://www.designsystem.tech.gov.sg/components/quantity-toggle)
- [Espaçamento Funções do espaçamento fixo e responsivo.](https://www.designsystem.tech.gov.sg/foundations/spacing/gap)
- [Heading Aliases para funções de títulos.](https://www.designsystem.tech.gov.sg/foundations/typography/heading)
- [Tipo Intenção tipográfica e orientações sobre fontes.](https://www.designsystem.tech.gov.sg/foundations/typography)
- [Grade Predefinições padrão da grade responsiva.](https://www.designsystem.tech.gov.sg/foundations/layout/responsive-grid)
- [Pontos de quebra Referência de pontos de interrupção da grade e contêineres.](https://www.designsystem.tech.gov.sg/foundations/layout/breakpoint)
- [Tokens Modelo de tokens em camadas.](https://www.designsystem.tech.gov.sg/foundations/design-tokens)
- [Semântico Funções semânticas das cores.](https://www.designsystem.tech.gov.sg/foundations/colour/semantic-colour)