Bandera

Bandera de un país, por su código ISO de dos letras. Están dibujadas las de los 244 países y territorios con prefijo telefónico internacional (UIT E.164), que son las que usa PhoneField.

Cuándo usarlo

• Al lado del nombre de un país: el prefijo de un teléfono, un selector de idioma, una dirección de envío.

Cuándo no

• Para decir un IDIOMA. Una bandera no es un idioma: el español no es de España solamente, y el inglés no es del Reino Unido. Para eso está LocalePicker, que usa el nombre de la lengua.
• Sola, sin el nombre del país escrito al lado, salvo que le pases label.

Por qué no son emoji, que sería una línea de código: en Windows no hay fuente de banderas y Chrome no la sustituye, así que los indicadores regionales salen como las dos letras sueltas: en Windows, «🇪🇸 🇵🇹 🇫🇷 🇩🇪» se ve literalmente como «ES PT FR DE». Se vería bien en el Mac de quien lo escribe y mal en la máquina de al lado, que es la peor clase de fallo. Van como SVG en línea, que además encaja con que el paquete no instale nada.

Peso: los dibujos no viajan con Flag. Cada región (Europa, América, África, Asia, Oceanía) es un fichero aparte que se pide cuando se pinta una de sus banderas, así que pintar ES y GB no mete las 244 en el JavaScript de la página (eran unos 16 KB comprimidos). Mientras llega, enseña las dos letras; un servidor que espera a la suspensión (Next, renderToPipeableStream) ya trae la bandera en el HTML. Para tenerla en el primer pintado de un cliente, preloadFlags(['ES', 'GB']) antes de montar.

Teclado: no participa.

Accesibilidad: por defecto es DECORATIVA (aria-hidden), porque va al lado del nombre del país, que es lo que se lee. Una bandera no puede ser lo único que identifique a un país — ni para quien usa lector de pantalla ni para quien no distingue el verde del rojo. Con label deja de esconderse y pasa a ser una imagen con nombre. Un código sin dibujo no deja un hueco mudo: enseña las dos letras.

Geometría: franjas con sus proporciones, la cruz nórdica corrida hacia el asta, los triángulos equiláteros donde lo son, las estrellas con su número de puntas y en su sitio. Todo en la misma caja de 4:3. Las de escudo van en su versión geométrica: a 16 px un escudo es una mancha, así que se pinta su silueta en sus colores; la de España sin escudo es la bandera civil, que es una bandera de verdad. Los colores son los oficiales. Los territorios que no tienen bandera propia oficial (Guadalupe, Martinica, Reunión, Bonaire, Svalbard...) llevan la de su Estado.

Aspecto fino: --amset-flag-width, --amset-flag-radius y --amset-flag-edge.