Guía de tallas

La tabla de tallas de una prenda o de una joya, con el cambio a pulgadas y la talla que toca según la medida que se escriba.

Cuándo usarlo

• En la ficha de producto, a la vista o dentro del Dialog o el Drawer que abre «Guía de tallas».
• keyMeasure decide por qué medida se recomienda; por defecto, la primera columna.
• Si la medida cae entre dos tallas recomienda la mayor y lo dice («Estás entre la S y la M: te recomendamos la M»); si se sale de la guía, lo dice también, sin inventarse una talla.
• withInches={false} cuando las pulgadas no pintan nada.

Cuándo no

• Elegir la talla para comprar: VariantPicker, que además sabe qué está agotado.
• Una tabla de datos que se ordena o se filtra: Table.

Teclado: Tab pasa por el campo de la medida, el cambio de unidades (las flechas eligen entre cm y pulgadas) y la tabla, que se enfoca para poder desplazarla cuando no cabe. La recomendación sale al salir del campo o al pulsar Intro, con la medida tal como se ha escrito: «90,2» no se redondea a 90 (el campo no tiene paso; las flechas suben y bajan de uno en uno).

Accesibilidad: es una tabla de verdad, con caption (el label, obligatorio), cabeceras de columna (las medidas) y de fila (las tallas): se oye «M, Pecho, 92–96 cm». La recomendación va en un role="status" y la fila de la talla recomendada lleva escrito «Tu talla», no solo el color. Al pasar a pulgadas, lo escrito se convierte en vez de perderse.

Contexto: va dentro de LocaleProvider (o de AmsetProvider), que pone la coma de los decimales. Las medidas se dan siempre en centímetros. Las tallas salen en la tabla en el orden en que se den, pero para recomendar se comparan por sus medidas, así que el orden da igual: cuando la medida no cae dentro de ninguna, se recomienda la primera que empieza por encima.

Aspecto fino: variables CSS --amset-sizes-*: -font, -gap, -radius, -tip-padding. El tamaño (size) mueve el hueco, el relleno de la recomendación y el cuerpo de la tabla.