Highlighter
StableUma marca desenhada à mão sobre um trecho de texto — marca-texto, sublinhado, caixa, círculo, risco, X ou colchetes —, com o traço animado uma vez. O texto não é tocado: continua um só nó, na ordem de leitura, com a própria cor; a marca é um SVG ao lado dele, fora da árvore de acessibilidade. As cores padrão acompanham o tema, e o marca-texto mantém o texto legível em AA no claro e no escuro.
Instalação
npx up-web-ds add highlighterPreview
Basic
Um item só vira stable depois da revisão de teclado e de leitor de tela.
Underline
A metadata de acessibilidade é uma afirmação verificável: o valor true só entra depois de provado num navegador.
Box
O comando npm run verify roda o Biome, o typecheck, os testes e o validador do design system.
Circle
Todo alvo de toque do catálogo oferece pelo menos 24×24 pixels, medidos num viewport de 375px.
Strike Through
A duração não resolve um DS014: trocar duration-200 por duration-fast não diz o que o componente faz sob movimento reduzido.
Crossed Off
Primitives duplicados como ButtonV2 não entram no catálogo; o caminho é comparar com o item existente.
Bracket
O registry publica só o que é stable e internal; o resto fica no catálogo, fora da distribuição.
Multiline
Uma recipe compõe o primitive por dentro e mantém a API pública que o upstream publicava, em vez de virar uma cópia dele.
Custom Color
O teste de contraste da Foundation cobre as superfícies de sucesso e de intervenção nos dois temas.
In View
A ingestão preserva, por padrão, a API pública, o comportamento e a identidade visual do componente de origem.
A normalização pode trocar a implementação interna, os imports, os tokens e os ícones, desde que o resultado continue reconhecível.
O que muda fica visível na revisão: tokens escolhidos, ícones mapeados, a política de movimento reduzido e o timing preservado.
Uma quebra de API existe só como decisão gravada no ingestion record, nunca como efeito colateral.
All states
Basic
Um item só vira stable depois da revisão de teclado e de leitor de tela.
Underline
A metadata de acessibilidade é uma afirmação verificável: o valor true só entra depois de provado num navegador.
Box
O comando npm run verify roda o Biome, o typecheck, os testes e o validador do design system.
Circle
Todo alvo de toque do catálogo oferece pelo menos 24×24 pixels, medidos num viewport de 375px.
Strike Through
A duração não resolve um DS014: trocar duration-200 por duration-fast não diz o que o componente faz sob movimento reduzido.
Crossed Off
Primitives duplicados como ButtonV2 não entram no catálogo; o caminho é comparar com o item existente.
Bracket
O registry publica só o que é stable e internal; o resto fica no catálogo, fora da distribuição.
Multiline
Uma recipe compõe o primitive por dentro e mantém a API pública que o upstream publicava, em vez de virar uma cópia dele.
Custom Color
O teste de contraste da Foundation cobre as superfícies de sucesso e de intervenção nos dois temas.
In View
A ingestão preserva, por padrão, a API pública, o comportamento e a identidade visual do componente de origem.
A normalização pode trocar a implementação interna, os imports, os tokens e os ícones, desde que o resultado continue reconhecível.
O que muda fica visível na revisão: tokens escolhidos, ícones mapeados, a política de movimento reduzido e o timing preservado.
Uma quebra de API existe só como decisão gravada no ingestion record, nunca como efeito colateral.
Usage
Props
prop obrigatória.
Metadata
Notas de acessibilidade
Verificado em tests/e2e/highlighter.spec.ts no Chromium desktop e mobile, em light e dark, com Axe sem violações WCAG 2.2 AA. Teclado: não há nada para operar — a marca é ornamento sobre texto —, então o componente não cria parada de tabulação, e controles dentro do texto marcado continuam alcançáveis. Leitor de tela verificado por teste e pela árvore de acessibilidade: o texto é lido uma vez, inteiro e na ordem, e o SVG da marca é aria-hidden. O componente não inventa semântica: um risco não vira <s> nem um marca-texto vira <mark>, porque ele não sabe se o chamador quer dizer "não vale mais" ou "olhe aqui"; quem quer dizer envolve o texto no elemento que diz. Contraste medido em navegador: sob o marca-texto padrão (--warning-subtle) e sob as superfícies discretas o texto fica acima de 4,5:1 nos dois temas; o upstream pintava #ffd1dc, que no tema escuro deixava texto claro sobre rosa claro. Touch verificado em viewport de 375px: a marca acompanha a quebra de linha (multiline) e não provoca rolagem horizontal. Reduced motion verificado em navegador com prefers-reduced-motion: reduce e por teste: o traço é animado pela rough-notation em JavaScript, que motion-reduce: não alcança, então a política é useReducedMotion() — a marca aparece, porque ela é a ênfase, mas já desenhada (animate: false).
Classificação
- Layer
- Primitive
- Domínio
- Domain-free (compartilhado)
- Categoria
- data-display
- Status
- Stable
Origem e distribuição
- Fonte
- magic registry / highlighter
- Licença
- MIT
- Distribuição
- Interna
Acessibilidade
- Teclado: revisado
- Leitor de tela: revisado
- Touch: revisado
- Reduced motion: revisado
Dependências
- Pacotes
- motion, rough-notation
- Ícones
- Nenhum
- Construído sobre
- Nenhum
- Usado por
- Nenhum ainda