Stepper

Para un proceso con orden fijo y pocos pasos, como dar de alta un hotel. Es solo de presentación: current es el índice del paso activo, empezando en 0, y lo guarda el componente padre. Los pasos no se pueden pulsar; se avanza con los botones del formulario. Es una <ol> con aria-current="step" en el actual, y cada paso hecho se anuncia como tal.

El estado se lee en la forma y no solo en el color (la Regla del Tenant): los pasos anteriores a current salen hechos, con el disco lleno, un check y el conector en el color de éxito; el activo, con un anillo grueso y halo; el resto, con contorno fino y su número. Con current={steps.length} se marcan todos como hechos. Al completar un paso, su conector se llena en 300 ms. Usa etiquetas de una palabra: debajo del círculo hay sitio para poco, y en móvil caben cuatro o cinco.

Nuevo en el kit: orientation="vertical" apila los pasos con la etiqueta al lado, así caben nombres largos y más pasos. Para columnas estrechas, como la lista de lo que falta para activar el hotel en un lateral.

El Stepper dice dónde está el usuario; el texto «Paso 2 de 4» lo repite para quien no ve los círculos. Un solo botón relleno por paso (la Regla de una Sola Decisión), y en el último el brand, porque crear la reserva es una acción de negocio. Los botones van en el slot footer de la Card. Si los pasos no tienen orden, usa Tabs; si solo importa cuánto falta, Progress.

Generada del custom-elements.json que publica @unozero-ai/ui. Las partes se estilan desde tu CSS con el nombre del elemento: uz-button::part(base).