Ir ao conteúdo
SEED engenhariaDesign System

Componentes

59. Campos de valor do domínio — monetário, medida e duração

estávelseed-componentes.md v1.43 · §59seção 65 de 9859-campos-de-valor-do-dominio-monetario-medida-e.md · MD5 bc52714a

Título completo no canon: Campos de valor do domínio — monetário, medida e duração — estável (F7.5 · promovido em 2026-08-17 pelo gate do Rafael — verbatim: "aprovo. siga"; ver a nota de rastreabilidade no §78 do MANIFESTO: o gate foi declarado, e não há registro de quais capturas ele abriu — se não tiver ocorrido neste artefato, corrigir por errata) · VD1–VD16 · bancada banco-dominio.html · fecha C9 e C10 · suite-dominio 28 · 0 · BT7 medido e verde em 2026-08-17

Rodada zero, e o veredito aqui é de um TIPO NOVO. As fases anteriores perguntavam se o arquétipo tinha leitura visual no produto de referência. Para estes componentes a pergunta não se aplica: o ClickUp não tem campo de potência em kWp nem de energia em kWh — estes campos são do domínio SEED, e não existem lá para serem observados. A base correta não é navegação: é canon de entrada numérica + normas + o domínio.

Isto é diferente dos bloqueios do A6 e do A15, que são de ambiente. Aqui não há o que visitar. Registrar a distinção importa: "não tem leitura" pode significar três coisas — não foi visitado, não existe instância, ou não se aplica —, e tratá-las como a mesma coisa é como se chega a "vamos navegar" para um problema que a navegação não resolve.

Base. R1 canon: a régua do USWDS é literal e vira o contrato central — use prefixo ou sufixo quando o campo se refere a uma unidade ou valor monetário, mas a entrada do usuário deve conter apenas dígitos, não a unidade nem o símbolo; e não use prefixo quando o campo é aberto o bastante para admitir resposta que não seja número. R2 stack: o React Aria é explícito sobre por que não usar <input type="number"> — comportamento inconsistente entre navegadores e plataformas, opções de formatação localizada limitadas e stepper difícil de estilizar. E traz o fato que decide a implementação: o navegador só FORMATA, não faz PARSING — o Intl.NumberFormat gera a string, e ler de volta exige parser próprio construído a partir do formatador. R3 normas: rótulo associado (1.3.1), instruções (3.3.2), erro que identifica o problema (3.3.1) e sugere a correção (3.3.3), e validação que não depende só de cor. Sobre o 1.3.5 Identify Input Purpose, a resposta oficial do W3C é a que aplicamos no VD12.

59.1 Os contratos#

# Contrato O que ele descarta, e por quê
VD1 O usuário digita SÓ DÍGITOS. A unidade é adorno do campo, não conteúdo digitável Deixar o usuário escrever "R$ 1.240,00 kWp". Régua literal do USWDS, e ela evita o parser ter de adivinhar o que é unidade e o que é valor
VD2 A posição da unidade é convenção, não estética: moeda é prefixo em pt-BR (R$), unidade de medida é sufixo (kWp, kWh, kVA, V, A) Escolher a posição por gosto. A posição vem do idioma e da unidade — há moedas que são sufixo, e trocar isso confunde quem lê rápido
VD3 A unidade é aria-hidden, e o NOME ACESSÍVEL do campo a inclui ("Potência em quilowatt-pico") Deixar o leitor de tela ler "erre cifrão". Símbolo é atalho visual; o nome acessível é o que informa
VD4 Formata no blur, guarda o valor CRU. A submissão envia número, nunca a string formatada Guardar "1.240,00". O separador é apresentação; o dado é 1240
VD5 Locale pt-BR declarado: decimal é vírgula, milhar é ponto Deixar implícito. O mesmo número lido em en-US é mil vezes outro, e um ERP de engenharia não pode ter essa ambiguidade
VD6 inputmode="decimal", nunca <input type="number"> O type=number — comportamento inconsistente entre navegadores, formatação localizada limitada e stepper impossível de estilizar. O inputmode traz o teclado numérico no toque sem trazer os defeitos
VD7 Formatar com Intl.NumberFormat; LER de volta com parser próprio derivado do formatador Regex artesanal. O navegador só formata — não há API de parsing —, e um regex escrito à mão erra em locale que ele não previu
VD8 Alinhamento à direita e tabular-nums (herda o PN21d) Alinhar à esquerda. Coluna de valor só é escaneável quando as casas se alinham
VD9 Lista FECHADA de unidades do domínio SEED, declarada no canônico: R$ · kWp · kWh · kW · kVA · V · A · % Unidade livre por texto. Unidade digitável vira "Kwp", "kwp", "KWP" no mesmo banco
VD10 Duração aceita entrada COMPOSTA e normaliza: "3d 4h" → 28h (jornada declarada) Só horas. Cronograma de obra fala em dias; apontamento fala em horas, e obrigar conversão mental é onde o erro entra
VD11 Erro identifica o problema E sugere a correção, com mecanismo além de cor (SC 3.3.1 e 3.3.3) "Valor inválido". Não diz o que está errado nem o que fazer
VD12 autocomplete NÃO se aplica a estes campos, e isso é DECLARADO Inventar token. A orientação oficial do W3C é literal: se o campo pede informação fora da lista de propósitos, o critério não é aplicável e o campo passa. Inventar autocomplete="kwp" seria a falha F107 — token que não corresponde a propósito reconhecido
VD13 O passo do stepper é da UNIDADE, declarado por campo (R$ 0,01 · kWp 0,01 · h 0,5) Passo 1 para tudo. Passo errado é pior que passo nenhum: transforma ajuste fino em digitação
VD14 Valor exibido FORA de campo usa a MESMA formatação do campo Duas formatações no mesmo produto — a tela mostra 1.240,00 e o campo abre 1240.00
VD15 Conversão entre unidades NÃO é do Design System Converter kWh↔kWp no componente. Isso é regra de engenharia, com premissa (irradiação, perdas) que o DS não conhece e não pode inventar
VD16 Campo vazio ≠ zero. Vazio é ausência e exibe travessão em leitura (herda o PD6) Preencher com 0. Potência zero e potência desconhecida são coisas diferentes, e um relatório que soma as duas mente

59.2 Anatomia#

   Potência                              ← rótulo visível (1.3.1)
  ┌──────────────────────────────┬─────┐
  │                   1.240,00   │ kWp │  ← sufixo, aria-hidden (VD2, VD3)
  └──────────────────────────────┴─────┘
   Use ponto para milhar e vírgula para decimal.   ← instrução (3.3.2)

  ┌─────┬────────────────────────────────┐
  │ R$  │                   486.200,00   │  ← prefixo (VD2)
  └─────┴────────────────────────────────┘

O adorno vive dentro da fronteira do campo e o texto digitado não passa por baixo dele — o contêiner carrega a borda e o estado de foco, e o <input> entra sem borda própria. É o terceiro dos três caminhos possíveis, e o único que não deixa o texto vazar sob o adorno.

59.3 Erro — os três casos, com a frase#

Situação Mensagem
Fora da faixa "A potência precisa ficar entre 0,01 e 9.999,99 kWp. Você digitou 12.000,00."
Formato irreconhecível "Não consegui ler esse valor. Use vírgula para o decimal — por exemplo, 1.240,50."
Obrigatório vazio "Informe a potência em kWp. Se ainda não souber, deixe a obra sem potência em vez de preencher com zero."

As três dizem o que houve E o que fazer (SC 3.3.1 + 3.3.3). A terceira carrega o VD16: ela existe para impedir que "não sei" vire zero.

59.4 Números MEDIDOS na produção da bancada#

Medida Valor
Altura do campo (com e sem adorno) 40px, igual nos dois
Alvo do stepper 44px de largura
Recuo do texto contra o adorno 8px de cada lado
Casas decimais por família monetário 2 · potência 2 · energia 0 · duração 1
Passos declarados R$ 100,00 · kWp 0,01 · kWh 10 · duração 0,5h
Jornada do VD10 no gabarito 8h (parâmetro do produto, VD-P2)
Pares de cor medidos (F7.3 + F7.4 + F7.5) 76 pares × 2 temas = 152 · 0

Um achado real na medição, e ele quase virou conveniência. O separador entre o adorno e o campo nasceu com border-subtle e mediu 1,11 — reprova o SC 1.4.11. A saída fácil seria declará-lo decorativo, como se fez com o separador entre campos no §56. Aqui não cabia, e a razão é medida: a diferença entre as duas superfícies (surface-subtle do adorno e surface-raised do campo) é de apenas 1,08 — a superfície não separa nada. A linha é o único sinal de que ali termina o adorno e começa o campo, e sinal único não pode medir 1,11. Trocado por border-interactive.

Quarto achado seguido da mesma família. O padrão está firme: border-default e border-subtle são fronteiras de LEITURA; onde a fronteira precisa ser VISTA, o token é border-interactive. E a régua para decidir se cabe declarar decorativo agora tem um teste: meça se existe OUTRO sinal. Se a superfície separa, a linha é reforço; se não separa, a linha é o sinal, e sinal se mede.

59.5 Validação#

Camada Placar
suite-dominio.mjs — blocos ANA · TEC · FMT · DUR · ERR · PAS · LEI · UNI · VIV 28 · 0
contraste-f73.py — 76 pares × 2 temas 152 · 0
Console e erros de página limpo

A guarda que vale mais é o bloco FMT, e em particular a FMT-02. Ela prova o VD5 com o caso que separa um ERP correto de um ERP perigoso: em pt-BR o ponto é separador de MILHAR. Digitar 1240.5 não significa mil duzentos e quarenta e meio — significa doze mil quatrocentos e cinco, e a guarda verifica que o parser lê assim e reprova pelo teto. Um parser que "adivinha" trocaria o valor de um contrato por mil vezes ele mesmo.

Uma calibração de instrumento, declarada: a primeira execução acusou dois falsos porque os blocos ERR e PAS liam o estado deixado pelos blocos anteriores. A suíte passou a recarregar a página entre blocosguarda que depende da ordem de execução das outras não é guarda, é sequência.

59.5 Pendências#

# Pendência Por que fica aberta
VD-P1 bancada FECHADA em 2026-08-16: banco-dominio.html produzido com gerador, molde e suíte própria (28 · 0)
VD-P4 Máscara durante a digitação não implementada — a formatação acontece no blur Formatar enquanto se digita conflita com métodos de entrada compostos, e o canon alerta para isso. Reabre se o gate pedir
VD-P2 Jornada de trabalho do VD10 não é decidida aqui "1 dia" são 8h, 8h48 ou 24h conforme o regime, e isso é parâmetro do produto, não do DS. O componente recebe a jornada; não a define
VD-P3 C1–C8 e C11–C15 (intervalo de datas, data+hora, multi-select com chips, seletor de pessoa, de entidade, de ícone, editor rico, menção, prioridade, toggle group, senha, OTP, edição inline) Restante da F7.5. Vários têm leitura visual na §13 e no estudo — a rodada zero de cada um decide se navega ou não

BancadaSEED Design System v2 · banco-dominio (§59 · campos de valor do domínio) — preview v0.1abrir em página própria ↗

Também cita o §59: banco-data, banco-edicao-linha.

Esc