Consideraciones de integración

Elegir el comportamiento del movimiento

system respeta las preferencias de movimiento y del dispositivo. dynamic sigue el ratón o lápiz incluso con movimiento reducido. static mantiene una dirección fija. El toque actualiza la posición de la luz en coordenadas de pantalla. Al desplazarse o levantar el dedo se conserva la última posición; las superficies reaccionan al pasar por debajo. Un nuevo toque actualiza la posición. El seguimiento táctil respeta el modo elegido: static permanece fijo y system permanece fijo si está activada la reducción de movimiento.

Entender el coste de renderizado

Cada luz programa como máximo un fotograma, lee la geometría antes de escribir estilos y omite salidas sin cambios. Los cambios de gradiente siguen requiriendo renderizado del navegador; no se garantiza una tasa de fotogramas ni un consumo de batería.

Conservar las interacciones nativas

Conserva las etiquetas, el contraste del texto, los bordes base y el foco visible. La decoración no captura eventos del puntero; tú controlas los valores, la selección, el teclado y los portales.

El modo de colores forzados oculta la decoración. Comunica la selección, la validación y la disponibilidad independientemente del reflejo.

Usar pseudoelementos existentes

Edge dibuja el reflejo en ::after por defecto. Usa pseudoElement: 'before' para conservar un ::after existente. Si ambos pseudoelementos están ocupados, aplica Edge a un contenedor externo.

import { Edge } from '@bolerish/edge';

<Edge.Provider>
  <Edge.Surface as="article" pseudoElement="before" className="existing-after">
    Your existing ::after stays intact.
  </Edge.Surface>
</Edge.Provider>

Envolver elementos input

Los inputs nativos no muestran pseudoelementos de forma fiable. Conecta un label o div externo con el mismo border-radius. Conserva la etiqueta, el foco, la validación y el teclado del input. Usa recessed para un aspecto hundido.

Actualizar tras cambios de diseño

Edge actualiza la geometría automáticamente al cambiar el tamaño, hacer scroll anidado, redimensionar el viewport o cargar fuentes y recursos. Si solo cambia la posición o el grosor del borde sin notificación de tamaño, llama a light.refresh() después de aplicar el diseño. Se actualiza aunque el puntero esté inmóvil.

Consulta cómo llamarlo desde React en la light.refresh().

Geometría y límites entre documentos

Edge aproxima rectángulos alineados con los ejes. No admite rotación, transformaciones de perspectiva ni portales entre documentos. Los portales del mismo documento pueden compartir luz. Para foco, selección y validación, consulta Accesibilidad.