Watermark

O mk-watermark envolve conteúdo real (via slot default) e sobrepõe uma camada decorativa e não-interativa com um padrão repetido de marca — logo, ícone ou texto — rotacionado -30°. Use para sinalizar branding institucional, dados sensíveis ("confidencial", "rascunho") ou modo trial/demo. A camada nunca intercepta cliques, foco ou leitura por leitor de tela.

Padrão

Estado padrão com text — gera um grid repetido de uma única linha de texto sobre o conteúdo real.

import { MkWatermark } from '@db1/makuco-ui-react';

<MkWatermark text="CONFIDENCIAL">
  <div>Conteúdo real da aplicação</div>
</MkWatermark>

<mk-watermark text="CONFIDENCIAL">
  <div>Conteúdo real da aplicação</div>
</mk-watermark>

Com imagem

A prop image gera o mesmo padrão repetido usando uma URL de imagem/logo em vez de texto. Combinável com text: quando ambas são fornecidas, cada unidade do padrão exibe a imagem e o texto juntos.

<MkWatermark image="https://picsum.photos/seed/mk-watermark/32/32">
  <div>Conteúdo real da aplicação</div>
</MkWatermark>

<mk-watermark image="https://picsum.photos/seed/mk-watermark/32/32">
  <div>Conteúdo real da aplicação</div>
</mk-watermark>

Marca customizada (slot)

O slot mark substitui image/text para casos avançados (ex.: um ícone composto ou SVG customizado). Diferente de image/text, que geram um grid repetido, o conteúdo do slot mark é renderizado como instância única, não repetida — uma limitação do modelo de slots do Shadow DOM: um nó projetado só pode ser atribuído a um único <slot>, então não é possível "tilar" o mesmo conteúdo projetado sem cloná-lo.

<MkWatermark>
  <span slot="mark">Marca customizada</span>
  <div>Conteúdo real da aplicação</div>
</MkWatermark>

<mk-watermark>
  <span slot="mark">Marca customizada</span>
  <div>Conteúdo real da aplicação</div>
</mk-watermark>

Inativo

Com active={false}, a camada de watermark é removida do DOM (não apenas ocultada via CSS) — o conteúdo do slot default é exibido normalmente, sem o overhead do overlay. Alterne active conforme, por exemplo, o status de assinatura de um cliente em modo trial.

<MkWatermark text="CONFIDENCIAL" active={false}>
  <div>Conteúdo real da aplicação</div>
</MkWatermark>

<mk-watermark text="CONFIDENCIAL" [active]="false">
  <div>Conteúdo real da aplicação</div>
</mk-watermark>

Anti-tampering

Um MutationObserver interno observa a camada de overlay e a reinsere/restaura imediatamente caso ela seja removida do DOM ou tenha seu estilo alterado para ocultá-la (display: none, visibility: hidden, opacity: 0) — por exemplo, via manipulação externa no DevTools.

Este mecanismo é dissuasório, não uma garantia real de segurança. Qualquer usuário com acesso a DevTools pode eventualmente contornar a proteção. Não use mk-watermark como controle de segurança para conteúdo verdadeiramente confidencial — apenas como sinalização visual.

Props

Slots

Acessibilidade

• A camada de overlay tem role="presentation" e aria-hidden="true" — nunca é anunciada por leitor de tela e nunca recebe foco.
• pointer-events: none no overlay garante que cliques e hover atravessam diretamente para o conteúdo do slot default por baixo.
• Tab percorre exclusivamente os elementos do conteúdo real; a ordem de foco não é alterada pela presença do watermark.
• A cor e opacidade do padrão são fixas via tokens do componente, calibradas para não comprometer o contraste do conteúdo real por baixo (WCAG 1.4.3).