Estado del pedido

Por dónde va un envío: los hitos en orden con su fecha, el de ahora marcado y lo que falta a la espera. Arriba, una frase que se lee de un vistazo, el número de seguimiento con su botón de copiar y el enlace a la web del transportista.

Cuándo usarlo

• En «Mis pedidos» y en la página de seguimiento de un pedido.
• El estado de cada hito (milestones) sale solo de las fechas: el último con date es el de ahora, lo de antes está hecho y lo que no tiene fecha, pendiente. detail dice dónde pasó o quién lo hizo.
• failed en un hito que no salió bien (entrega fallida, devuelto a origen): corta la cadena y la frase de arriba deja de dar fecha para avisar de que hay que hacer algo.
• delivery añade la fecha prevista a la frase de arriba mientras falta algo: con el último hito ya cumplido (entregado), la frase no da fecha.
• tracking abre la línea del envío; carrier y link solo salen con él.

Cuándo no

• Las fases de un proceso que avanza, sin fechas ni transportista (un alta, un asistente): Steps.
• Un registro de lo que ya ha pasado, sin nada pendiente: History.

Teclado: solo se enfocan el botón de copiar el número de seguimiento y el enlace al transportista, en ese orden; lo demás se lee.

Accesibilidad: es una región con nombre (label, obligatorio) y los hitos son una lista ordenada: se sabe cuántos pasos hay y por cuál va. El de ahora lleva aria-current="step", y el estado de cada hito va escrito para el lector de pantalla («hecho», «es el paso de ahora», «pendiente», «no salió bien»), no solo en el color del punto. El enlace avisa de que se abre en otra pestaña, y al copiar el número se dice «Copiado».

Contexto: va dentro de LocaleProvider (o de AmsetProvider), que decide cómo se escriben las fechas.

Aspecto fino: variables CSS --amset-order-state-*: -brand, -brand-icon, -detail, -gap, -hito-gap, -line, -title. El tamaño mueve el circulo del hito, su icono, la linea que los une y los cuerpos de letra.