Bloque de código

Un bloque de código con su cabecera (el nombre del fichero o lo que sea), números de línea si se piden, líneas marcadas y botón de copiar. No colorea la sintaxis, a propósito: eso es un resaltador entero de dependencia.

Cuándo usarlo

• Documentación, ejemplos de integración, respuestas de una API, órdenes para la terminal.
• title para lo que es («LineaDeCarrito.tsx», «Respuesta», «Terminal») y language como etiqueta pequeña a su lado.
• numberLines y highlight (números de línea, empezando en 1) cuando se va a hablar de líneas concretas.
• withoutCopy quita el botón de copiar.

Cuándo no

• Un dato suelto que se copia (un IBAN, un código de seguimiento): Copyable.
• Un código de un solo uso que se escribe: CodeField.

Teclado: Tab llega al botón de copiar y después al propio bloque, que es enfocable: con el foco dentro, las flechas lo desplazan en horizontal para leer las líneas largas.

Accesibilidad: el bloque se nombra por su title («Código» si no hay) y el botón por lo que copia («Copiar LineaDeCarrito.tsx»). Al copiar lo dice con texto en un role="status" («Código copiado»), y si el portapapeles falla también lo dice («No se ha podido copiar») en vez de fingir. Los números de línea y la etiqueta del lenguaje no se leen.

Aspecto fino: variables CSS --amset-block-code-*: -font, -gap, -language, -line, -number, -padding, -radius, -title. El tamaño mueve el cuerpo del codigo, el relleno y el hueco del numero de linea.