Componentes
73 seções, do botão ao editor de texto rico
Cada seção do seed-componentes.md v1.43 vira uma página com o texto do canon e a bancada real embutida — o artefato committado, operante, com a barra de modo e o seletor de largura dela. Filtre com os chips (mais de um por vez).
mostrando 73 de 73 seções
1. Toda cor via token semântico (--seed-action-primary), nunca primitivo, nunca hex. Dark mode vem de graça.…
§1 BotãoDispara uma ação. Não navega entre páginas (isso é link/âncora — pode parecer botão via variante, mas…
§2 Form-fieldEstruturar a comunicação entre o sistema e a pessoa em QUALQUER entrada de dado: o que o sistema pede…
§3 Input de textoEntrada livre de linha única. Escolha vence digitação (Apple HIG): se as respostas possíveis são conhecidas,…
§4 BuscaRégua tempo real × submit (D5, UXPin): dataset pequeno/médio de resposta rápida → tempo real; consulta pesada…
§5 NúmeroNunca número para o que não é quantidade (Fiori + espec HTML): CEP, telefone, UC, IDs → input mascarado…
§6 TextareaEntrada de texto livre multilinha: observações, descrições, mensagens, justificativas. Fronteira (F6): editor…
§7 SelectSupersede: esta régua ATUALIZA a linha de volume do §3.1 (que citava só o Fiori). No formulário público vale…
§8 SwitchBinário de AÇÃO com efeito IMEDIATO: liga e a coisa acontece (notificação ativada, módulo habilitado).…
§9 Radio2–6 opções mutuamente exclusivas, todas visíveis (§7.1). Sim/Não = radio de 2 — nunca checkbox único ambíguo…
§10 Checkbox2–6 escolhas independentes visíveis (várias permitidas) OU binário de STATUS confirmado no submit…
§11 ComboboxEscolha em lista >15 itens ou qualquer volume com busca (§7.1). É o SELECT que cresceu: mesma semântica de…
§12 SliderValor aproximado em faixa conhecida. Padrão SEED: slider SEMPRE pareado com o campo número do §5 (mesmo…
§13 Date pickerAlternativa descartada com contexto (M2): os 3 campos separados do GOV.UK resolvem a ambiguidade dd/mm ×…
§14 UploadAnexar arquivo(s): fatura de energia na captação (o caso SEED nº 1), documentos no ERP, fotos de visita…
§15 AlertaMensagem contextual e persistente em página, ligada a uma seção, objeto ou formulário (equivale a inline…
§16 BannerA verificação primária expôs que "banner" no mercado são dois componentes: o GOV.UK notification banner tem…
§17 ToastConfirmação efêmera e sobreposta do desfecho da ação ATUAL (salvou, enviou, copiou). O toast é o SEGUNDO…
§18 SpinnerR3-b (emenda da validação visual do Rafael, 2026-08-04 — supersede parcial do R3): a ENTRADA do indicador tem…
§19 SkeletonBloco: --seed-cinza-100 (light) / #38464F border-subtle-dark (dark), radius 6; shimmer = gradiente 90° com…
§20 ProgressTrilho 8px radius 999 em --seed-border-subtle; preenchimento --seed-action-primary-bg, transição de largura…
§21 BadgeBadge = NÃO-interativo (nunca clique, cursor pointer ou navegação), dois papéis: numérico (contadores) e de…
§22 ChipAltura 28px (denso) / 32px (confortável), radius 999, borda 1px em cinza-600 (token de componente…
§23 Tooltip1. Tooltip — NÃO-interativo, curto, suplementar; hover/focus. 2. Popover (§24) — interativo leve ou texto…
§24 PopoverO grupo denso de chips com excedente mostra +N como GATILHO de popover listando os chips ocultos (removíveis…
§25 Empty stateBloco centralizado; título Montserrat 700 1.05rem --seed-text-primary; descrição --seed-text-secondary ≤2…
§26 Card--seed-card-bg = surface-raised (branco / #1D272D) · --seed-card-border = border-subtle (cinza-100 / #38464F)…
§27 Divider--seed-divider-color = border-subtle (1,21 sobre surface-page clara / 1,75 sobre surface-subtle escura —…
§28 ListaItem: min-height 44 (densa 36) · gap 12 · leading 32px · primário 600 .9rem text-primary · secundário .82rem…
§29 AccordionContainer herda card outlined (§26: --seed-card-bg + borda decorativa declarada) · item+item separado por…
§30 ModalSuperfície --seed-surface-overlay + --seed-shadow-overlay (pares §2.8/§17 já medidos) · radius 12 (herda…
§31 DrawerHerda §30 integralmente (superfície/sombra/backdrop decorativo declarado); largura sm 400 / md 560; slide…
§32 AvatarFundo --seed-cinza-100 / dark #38464F (o mesmo par de superfície neutra do skeleton §19) · texto ci-700 /…
§33 Central de NotificaçõesPainel rápido: popover §24 (surface-overlay + shadow-overlay), largura 380px desktop, header com título +…
§34 TabsAba: min-height 44px, padding 10/14, radius 6 no topo; anel de foco interno (offset -2px — errata: containers…
§35 Menu / DropdownTrigger: botão §1 (qualquer variante) + caret rotativo. Painel: overlay branco/#273137, radius 10, sombra…
§36 BreadcrumbTokens: links via --seed-text-link (par §26); atual text-primary 700; separador text-muted decorativo; "…"…
§37 PaginaçãoTokens: corrente = par do botão primário §1 (4.60 ✓ herdado); números text-secondary; faixa mono text-muted…
§38 Stepper / WizardTokens: concluída = par botão primário §1 (4.60 ✓); corrente anel action-primary + texto text-primary; futura…
§39 Command Palette ⌘KTokens: opção ativa = list-hover + anel interno (herdado); kbd chips = §4; grupos text-muted; backdrop = §30.…
§40 TabelaTokens/pares (contraste-dados.py ✅): header ci-700/ci-50 6.03 light · ci-300/sunken 8.92 dark; seta ativa…
§41 Seleção e ações em massaTokens/pares (contraste-dados.py ✅): linha selecionada ci-900/tq-50 12.92 light · ci-100/tq-900 11.23 dark;…
§42 Toolbar de dadosPares: todos herdados (chip §22, busca §4, contador mono ci-600 4.74). Os 7 testes: 1 herdados ✓ · 2 filtro…
§43 Lista de dados e degradação responsivaPares: herdados. Os 7 testes: 1 ✓ · 2 rótulo migrado por texto (nunca só posição) · 3 grayscale ok · 4…
§44 Guia de integração Tailwind/shadcnValidação deste §: não há preview — a prova é a coerência (tokens citados existem no tokens.md v1.2; a skill…
§45 IconografiaObrigação identificada para a skill seed-ds-ui (padrão GI2 — pendência DELA, não supersede daqui): quando a…
§46 Shell de aplicaçãoRail: largura 80px (SH3 — medido: 68px úteis = 9 caracteres; "Comercial" cabe); superfície fixa nos dois…
§47 Página institucional — esqueleto, camada de máquina e blocos de conteúdoNúmeros do estudo-site-atual.md, produzidos por leitura do backup do site atual. Não são crítica ao site…
§48 Painel — grade, lentes, frescor, edição direta e mapaRegistro de honestidade: o KPI, o ranking e o progresso já tinham gramática escrita no DG15, DG16 e DG17 —…
§49 Detalhe de registro — painel e modalOs dois hospedeiros, com a mesma anatomia: - O diálogo é nomeado pelo título do registro (aria-labelledby…
§50 Agrupamento de linhasSeleção dentro do grupo: ver a extensão do §41 (SL6). Pares de cor: todos herdados — cabeçalho de grupo em…
§51 Personalização de colunasNota de integração, medida no produto de referência: resize e reorder combinados já produziram bug…
§52 Árvore(Guardas: suite-container.mjs, ARV-01…ARV-03, nas duas telas.)
§53 Filtro compostoEstado vazio próprio: filtro composto que não casa nada tem vazio com a saída dentro do texto — qual operador…
§40-b Tabela — EXTENSÃO F7.2Exceção bidimensional de reflow, declarada aqui (CP28): a tabela pode rolar nos dois eixos dentro do wrapper…
§41-b Seleção — EXTENSÃO F7.2§42-b Toolbar de dados — EXTENSÃO F7.2§43-b Degradação responsiva — EXTENSÃO F7.2§54 Botão divididoA anatomia com BORDA foi decidida no gate de 2026-08-15: a proposta alternativa (botão sem contorno) foi…
§55 ChatO que esta spec NÃO decidiu de saída, e por quê: nenhum valor numérico foi escrito antes da produção. A §13…
§56 Atividade e comentários- O painel é <section> nomeada por aria-labelledby; a lista é <ol> — a ordem importa. - Nada depende de…
§57 Quadro / KanbanO C57 observou que lá a coluna tem fundo tingido na cor do status, e o próprio estudo registrou a divergência…
§58 Gantt e linha do tempo- Recalcular cronograma (predecessor atrasa e sucessores deslizam) é regra de domínio, não de DS. O DS…
§59 Campos de valor do domínio — monetário, medida e duraçãoO adorno vive dentro da fronteira do campo e o texto digitado não passa por baixo dele — o contêiner carrega…
§60 Escolha segmentada e múltiplaNão há "o jeito certo" no canon. Há três problemas diferentes que a mesma forma visual serve, e a semântica…
§61 Data, intervalo e horaA divergência não tem "jeito certo" — tem dois problemas diferentes que a mesma forma serve, e foi assim que…
§62 Seletor de pessoaUm seletor de pessoa num ERP de engenharia não é um select bonito: atribuir é transferir responsabilidade…
§63 Prioridade e escalas ordinaisO produto de referência tem um buraco medido (C133): o menu sabe atribuir e não sabe desatribuir. O campo…
§64 Bancada e tema — regras transversaisO que esta seção é. As seções anteriores especificam componentes. Esta especifica o suporte onde os…
§65 Identidade de entidade — seletor de ícone e corA rodada zero deste projeto pergunta, antes de qualquer spec: o arquétipo tem leitura visual do produto de…
§66 Credenciais — senha e código de uso únicoE aqui a ausência de leitura visual custa pouco, e é preciso dizer por quê para não parecer conveniência:…
§67 Edição em linhaO veredito aqui não é "não visitado". A edição direta foi lida no produto de referência — ela é a origem do…
§68 Editor de texto rico — toolbar mínimaVeredito: MEDIDO — e é o caso raro em que a leitura visual entrou na spec decidindo o que fica de fora. Os…