Aplique a tipografia responsiva, o espaçamento e as funções de cor do governo escocês em um campo nativo com contagem de caracteres, que preserva o texto acima do limite e permite corrigir o conteúdo.
Contagem de caracteres CharacterCount/CSS nativa Scottish Government Design System 4.3.0; conteúdo original da oficina e validação local; Arial como fonte alternativa. · Referência de implementação
02
Referência de design sistema de design Scottish Government
Scottish Government Design System 4.3.0 publicado CSS e JavaScript, com orientações oficiais atualizadas sobre tipografia, cores e grade. O CharacterCount nativo e os estilos são executados na prévia. Arial é uma alternativa explícita para este exemplo independente; as diretorias do Governo Escocês devem usar Roboto. Os recursos do pacote atual diferem dos exemplos de instalação mais antigos.
Sistema de design Scottish Government Uma referência prática para entrada de texto
Permita que o trabalho da pessoa seja recuperado
A interação central aqui é a orientação não destrutiva sobre o tamanho do texto. A pessoa pode colar uma nota longa sobre necessidades de acesso, ver quanto precisa editar e manter todo o texto enquanto o reduz. O contador de caracteres nativo exibe a contagem restante, o estilo de excesso do limite e a mensagem atrasada para tecnologias assistivas. A aplicação decide separadamente se a nota é válida o bastante para ser pré-visualizada.
Este é um exemplo original de nota de oficina, não um serviço do Governo Escocês nem uma solicitação de informações médicas. Não inclui elementos gráficos de identidade, armazenamento ou envio. A orientação do campo pede uma necessidade prática de acesso e desencoraja o compartilhamento de detalhes privados, para que a tarefa seja compreensível sem reproduzir uma transação oficial.
Sistema de design Scottish Government Roboto e hierarquia responsiva
Preserve as métricas publicadas
O sistema exige Roboto para as diretorias e áreas de políticas do Governo Escocês. Outras organizações que adotarem o sistema podem usar outra fonte legível, preservando as regras de tamanho e altura de linha e testando o resultado. O exemplo independente declara explicitamente sua alternativa Arial; não afirma que uma fonte da web indisponível seja Roboto.
O corpo do texto passa de 16/24px para 19/32px, e o título principal, de 30/40px para 44/56px. Ambas as alterações ocorrem na folha de estilos nativa para telas maiores. A classe ds_h 3 altera o tamanho visual sem exigir um título semântico de terceiro nível. Essa distinção é importante quando um formulário curto precisa de um título de seção menor, mas não de uma lacuna artificial na estrutura do documento.
Sistema de design Scottish Government Um tratamento de foco distinto
Diferencie foco, erro e conclusão
O azul representa a marca principal e os links, o preto representa o texto e o amarelo destaca o foco. Essas são configurações nomeadas do Sass, não uma coleção inventada de propriedades personalizadas CSS. A adaptação da marca ocorre antes de carregar o sistema, por meio do módulo de configurações. As orientações oficiais mantêm a paleta de foco mesmo quando outras cores da marca mudam.
O contador de caracteres introduz o vermelho negativo somente quando o limite permitido é excedido. Um segundo erro da aplicação, para um campo vazio, pode usar o mesmo papel negativo, mas a mensagem deve indicar que falta uma resposta, não que há um problema com a contagem de caracteres. A prévia nunca usa verde positivo para sugerir que um envio remoto foi concluído com sucesso.
Mantenha um contorno de foco visível no teclado para a textarea e os botões de ação.
Descreva o excesso de caracteres em texto, não apenas com uma borda vermelha.
Associe os resumos de erro e as orientações dos campos a um ID estável do campo.
Sistema de design Scottish Government Largura do contêiner e espaçamento
Não confunda as larguras externa e interna
A tabela oficial da grade descreve larguras internas de conteúdo de 736, 928 e 1120px nos pontos de interrupção médio, grande e extragrande. As caixas correspondentes do contêiner nativo medem 768, 960 e 1152px, pois cada uma inclui 16px de preenchimento lateral. Essa distinção evita que quem adota o sistema aninhe as duas larguras e acabe estreitando o layout duas vezes.
A prévia coloca uma coluna de leitura de 42rem dentro do contêiner nativo. Esse limite máximo é uma escolha da aplicação, adequada para um formulário curto, não uma nova configuração do sistema. Abaixo de 768px, o contêiner se torna fluido, e o mesmo espaçamento lateral de 16px mantém a textarea afastada da borda da tela.
Os utilitários de espaçamento são responsivos. Por exemplo, ds_!_margin-bottom--4 passa de 24 para 32px em 48rem; os níveis maiores também aumentam. A referência fornece os dois valores para que uma captura de tela em desktop não seja confundida com um espaçamento fixo e universal.
Sistema de design Scottish Government Campo nativo com contagem de caracteres
Comece com uma textarea real
A raiz ds_question contém data-module e o limite percentual opcional. O rótulo associado e a orientação são elementos HTML comuns e acessíveis. Uma textarea com maxlength oferece uma alternativa útil sem JavaScript. Após o aprimoramento, o componente lê esse valor e remove o limite rígido para que um texto colado não seja truncado silenciosamente.
Em um campo de 200 caracteres com limite de 80%, a contagem aparece aos 160 caracteres. O texto de exemplo da página pública do componente e o exemplo de código de 250 caracteres não usam os mesmos números; por isso, este modelo mantém um único limite coerente em todo o exemplo. Sem JavaScript, a orientação visível ainda informa o limite e o maxlength nativo é aplicado.
html
<div class="ds_question" data-threshold="80" data-module="ds-character-count">
<label class="ds_label" for="access-note">What would help you take part?</label>
<p class="ds_hint-text" id="access-hint">Describe an access need for this practice workshop. Do not include medical or contact details.</p>
<textarea maxlength="200" class="ds_input" rows="5" id="access-note"
name="access-note" aria-describedby="access-hint"></textarea>
</div>
Sistema de design Scottish Government O que o componente nativo controla
Mensagens, temporização e contagem
A implementação versionada cria uma mensagem visível com aria-hidden e outra mensagem oculta para tecnologias assistivas. Ela adiciona os IDs pertinentes ao aria-describedby existente, em vez de descartar a orientação escrita. Aguarda 1000ms antes de atualizar o aviso oculto, permitindo que o feedback da digitação seja concluído primeiro.
O comprimento real vem de JavaScript string.value.length: ele conta unidades de código UTF-16. Um símbolo fora do Plano Multilíngue Básico pode ocupar duas unidades, e um emoji combinado pode ocupar mais. Um serviço que precise de outra política de contagem deve alinhar seu contador e a validação no servidor, em vez de prometer que este componente conta caracteres conforme a percepção humana.
O componente escuta eventos de input. Se uma aplicação preencher um exemplo ou limpar o campo por programação, também deve disparar input. As ações de exemplo e redefinição da demonstração fazem isso. Um comentário no código-fonte menciona a consulta periódica do reconhecimento de fala, mas a implementação analisada não configura um intervalo de consulta; por isso, este guia não afirma que esse comportamento está disponível.
Sistema de design Scottish Government Use os caminhos da versão atual
Carregamento de módulos e inicialização com escopo definido
O pacote atual é @scottish-government/design-system. A versão 4.3.0 disponibiliza a folha de estilos compilada em dist/css/design-system.min.css, enquanto um parágrafo de instalação mais antigo ainda menciona dist/styles/main.css. Esta receita usa o recurso publicado de fato. O script exporta um módulo ES, portanto importe-o com type="module" em vez de usar uma tag de script clássica.
Crie uma instância de CharacterCount para este campo e chame init. DS.initAll também está disponível para páginas com vários componentes, mas este exemplo inicializa apenas o contador necessário. Nenhum serviço adicional de análise está configurado. A validação no servidor é independente da biblioteca: um contador é um recurso útil para editar, não um mecanismo de aplicação de limites.
Instale o pacote fixado na versão 4.3.0 e copie a CSS compilada e o módulo para um diretório local de recursos.
Inclua na página toda a estrutura do rótulo, da instrução e da área de texto antes de importar o módulo.
Inicialize o contador uma vez e, em seguida, conecte as ações de pré-visualização e redefinição da aplicação usando eventos input comuns.
Sistema de design Scottish Government Teste a recuperação após exceder o limite
Não teste apenas um campo vazio
Comece abaixo do limite, ultrapasse 160 caracteres e cole mais de 200. O valor completo deve permanecer na área de texto enquanto uma mensagem de limite excedido aparece e aria-invalid passa a true. Reduza o valor para menos que o limite e confirme que tanto a classe de erro quanto o estado inválido são removidos.
A ação Pré-visualizar da aplicação bloqueia notas vazias ou acima do limite e mostra um erro associado. Uma nota válida aparece em uma pré-visualização local usando textContent, portanto a marcação digitada é exibida como texto, em vez de ser interpretada. A opção Editar nota retorna à mesma área de texto com o valor intacto. Redefinir limpa o campo por meio de um evento input, para que a contagem nativa também seja redefinida.
Em 390px, confira a quebra do título, a área de texto em largura total, a disposição dos botões e o resumo de erros. Em telas maiores, a coluna de leitura não deve virar um parágrafo muito largo. Essas verificações avaliam este exemplo; um serviço real ainda precisa de pesquisa com usuários, testes de fontes e análise com tecnologias assistivas em seu contexto final.
Sistema de design Scottish Government Exemplos de componentes do sistema de design
Um limite de caracteres não destrutivo
Um rótulo, uma instrução, uma área de texto e um limite de 80% com aprimoramento progressivo.
html
<div class="ds_question" data-threshold="80" data-module="ds-character-count">
<label class="ds_label" for="access-note">What would help you take part?</label>
<p class="ds_hint-text" id="access-hint">Describe an access need for this practice workshop. Do not include medical or contact details.</p>
<textarea maxlength="200" class="ds_input" rows="5" id="access-note"
name="access-note" aria-describedby="access-hint"></textarea>
</div>
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.
html
<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Scottish design system character count specimen</title><link rel="stylesheet" href="vendor/scot-4.3.0/dist/css/design-system.min.css"><style>body,button,input,textarea{font-family:Arial,sans-serif!important}body{margin:0}main{padding-top:32px;padding-bottom:32px}.reading{max-width:42rem}.eyebrow{border-top:4px solid #0065bd;padding-top:16px;color:#5e5e5e}.actions{display:flex;flex-wrap:wrap;gap:16px}.actions .ds_button{margin:0}.preview-text{white-space:pre-wrap;overflow-wrap:anywhere;border-left:4px solid #b3b3b3;padding-left:24px}[hidden]{display:none!important}</style><main class="ds_wrapper"><div class="reading"><p class="ds_small eyebrow">Independent specimen · Workshop access note</p><section id="entry"><h1>Tell us what would help</h1><p>Practice a short access note for a community workshop. This page does not save or send your text.</p><div id="error" class="ds_error-summary" tabindex="-1" hidden><h2 class="ds_error-summary__title">There is a problem</h2><p><a href="#access-note" id="error-link"></a></p></div><form id="form" novalidate><div class="ds_question" data-threshold="80" data-module="ds-character-count">
<label class="ds_label" for="access-note">What would help you take part?</label>
<p class="ds_hint-text" id="access-hint">Describe an access need for this practice workshop. Do not include medical or contact details.</p>
<textarea maxlength="200" class="ds_input" rows="5" id="access-note"
name="access-note" aria-describedby="access-hint"></textarea>
</div><p class="ds_small">Use up to 200 characters. The count appears after 160.</p><div class="actions"><button class="ds_button" type="submit">Preview note</button><button class="ds_button ds_button--secondary" id="sample" type="button">Try a long example</button><button class="ds_button ds_button--secondary" id="reset" type="button">Reset</button></div></form></section><section id="preview" hidden><h1 tabindex="-1">Your note preview</h1><p id="result" class="preview-text"></p><p>No note has been sent. You can return to edit it.</p><button id="edit" class="ds_button ds_button--secondary">Edit note</button></section></div></main><script type="module">import DS from './vendor/scot-4.3.0/dist/scripts/design-system.js';const field=document.querySelector('[data-module="ds-character-count"]');new DS.components.CharacterCount(field).init();const input=document.querySelector('#access-note'),entry=document.querySelector('#entry'),preview=document.querySelector('#preview'),error=document.querySelector('#error');function setValue(value){input.value=value;input.dispatchEvent(new Event('input',{bubbles:true}));input.focus()}document.querySelector('#sample').onclick=()=>setValue('A clear route from the entrance to the workshop room would help me take part. Please describe where the quiet seating area is and whether instructions will be available in writing. I would also appreciate knowing where to find the nearest accessible entrance.');document.querySelector('#reset').onclick=()=>{setValue('');error.hidden=true};document.querySelector('#form').onsubmit=e=>{e.preventDefault();let message=!input.value.trim()?'Enter a short access note.':input.value.length>200?'Shorten your note to 200 characters or fewer.':'';if(message){document.querySelector('#error-link').textContent=message;error.hidden=false;error.focus();return}error.hidden=true;document.querySelector('#result').textContent=input.value;entry.hidden=true;preview.hidden=false;preview.querySelector('h1').focus()};document.querySelector('#edit').onclick=()=>{entry.hidden=false;preview.hidden=true;input.focus()};window.demoReady=true;</script></html>
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.
04
Sistema de design Scottish Government Configuração do agente
Ponto de partida para implementação
A demonstração local executa o componente real da versão 4.3.0 de CSS e o módulo CharacterCount. A fonte alternativa está especificada claramente; o caminho antigo dist/styles da página de instalação não é usado. O ZIP do exemplo completo funcional em Sources também inclui as dependências exatas da pré-visualização e o documento completo. Extraia-o, execute python3 -m http.server 8080 nesse diretório e abra http://localhost:8080/scottish-government.html. Não abra exemplos baseados em módulos usando file://.
bash / HTML
npm install --save-exact @scottish-government/[email protected]
mkdir -p public/vendor/scot
cp node_modules/@scottish-government/design-system/dist/css/design-system.min.css public/vendor/scot/
cp node_modules/@scottish-government/design-system/dist/scripts/design-system.js public/vendor/scot/
<link rel="stylesheet" href="/vendor/scot/design-system.min.css">
<script type="module">
import DS from '/vendor/scot/design-system.js';
const root = document.querySelector('[data-module="ds-character-count"]');
new DS.components.CharacterCount(root).init();
// Or DS.initAll() when the page uses multiple DS components.
</script>
Um prompt para seu projeto
Prompt para agente de IA
Use o componente CharacterCount real da versão 4.3.0 do Scottish Government Design System em um formulário independente para notas de acessibilidade. Fixe os caminhos verificados dist/css/design-system.min.css e dist/scripts/design-system.js, que é um módulo ES. Inclua uma área de texto com limite de 200 caracteres e limiar de 80%, uma instrução associada e a inicialização do componente com escopo definido. Preserve o texto colado que exceder o limite, deixe as atualizações da contagem nativa e de ARIA a cargo da biblioteca e acrescente validação local independente e uma pré-visualização, edição e redefinição seguras, somente com texto. As ações programáticas de exemplo e redefinição devem disparar eventos input. Use a tipografia e o espaçamento responsivos publicados, defina explicitamente a fonte e não simule uma identidade oficial nem o envio do formulário.
05
Sistema de design Scottish Government Fontes e escopo
Referência de implementação independente. As diretorias do governo escocês devem usar Roboto; este exemplo sem marca usa explicitamente Arial como fonte alternativa. Texto original, sem armazenamento ou envio e sem afiliação oficial. A licença do código e as permissões para recursos gráficos do governo são independentes.
