Selector de cantidad

El menos y el más de una línea de carrito: − 2 +. Por dentro es un campo de texto numérico propio, así que la cifra también se escribe a mano y nunca se sale de los topes.

Cuándo usarlo

• La cantidad de cada producto en el carrito, o en la ficha antes de «Añadir al carrito».
• value y onChange para controlarla desde fuera, o initialValue (1 por defecto) para dejarla suelta; name la envía en un formulario nativo. min es la más baja (1 por defecto).
• max con las existencias: al llegar, el botón de sumar se deshabilita de verdad. Desde warnFrom unidades (5 por defecto) dice cuántas quedan («Quedan 3», o «Sin existencias» con 0); un stock grande no se enseña.
• Es la caja de NumberField con botones: size (30, 36 o 44 px) y variant (outline, soft, ghost) son los de todos los campos, y en un formulario queda alineado con ellos.
• readOnly en un pedido ya cerrado: la cifra se lee y se enfoca, pero no cambia; disabled mientras no se puede tocar.

Cuándo no

• Un número que no es una cantidad de carrito (un importe, un porcentaje, un peso): NumberField.
• Elegir la talla o el metal antes de la cantidad: VariantPicker.

Teclado: Tab llega a la cifra; flecha arriba y flecha abajo suman y restan uno, Re Pág y Av Pág dan un salto mayor, e Inicio y Fin van a los topes (Fin solo si hay max). Se puede escribir el número: al salir o con Intro, lo que se pasa de un tope se queda en el tope (99 con 4 en stock se queda en 4). Los botones no están en el orden del Tab: con el teclado se usan las flechas.

Accesibilidad: la etiqueta (label) es obligatoria y concreta («Cantidad de Anillo Aurelia»), porque en un carrito hay un selector por línea. Por defecto solo la oye el lector de pantalla (hiddenLabel, puesto de serie); con hiddenLabel={false} a la vista es la etiqueta de los campos. Los botones son botones de verdad, «Quitar uno» y «Añadir uno», con su estado deshabilitado. El aviso de existencias se lee como descripción de la cifra y entra con una transición corta. El foco es el anillo de 2 px de los campos en la caja. Con el dedo, la caja pasa a 48 px, cada botón a 44 px de ancho y la cifra a 16 px, para que el iPhone no amplíe la página.

Contexto: el idioma de LocaleProvider (o de AmsetProvider) decide cómo se escribe la cifra; sin proveedor, es-ES.

Aspecto fino: --amset-quantity-figures (cuántas cifras caben sin que la caja crezca; 3 por defecto) y las variables de los campos, --amset-field-* (alto, relleno, fuente, radio, fondo y borde). Los botones son los de NumberField (amset-number__step) y el aviso, amset-quantity__stock.