- Guided editor · Card, Progress
The long Global Store product editor as a guided flow: a step rail on the left, section cards that show complete, current, error or locked, and the sticky action bar with one primary. Phone: one section at a time. - Stepper · composed
Horizontal steps for short linear flows (Create product: Pick, Read, Confirm): numbered marks for upcoming, current, complete, error and locked. Phone: a compact "Step 2 of 3" indicator. - Step rail and section progress · Progress
The vertical rail beside a guided editor (sections with marks and summaries) and the segmented progress meter (navy done, ring current, red error, border to do). - Step header · composed
The top of each step: step number, title, one sentence of what to do, and the single next step named in the primary. - Wizard action bar · composed
The sticky bar under a flow: Back on the left, the save state (saved, unsaved, saving, failed) in the middle, and the one primary on the right. Phone: full width, 48px buttons, tab bar hidden. - Step validation · Alert
When Continue is pressed with problems: a summary at the top lists each problem as a jump link, and each field shows its own error. Focus moves to the summary. - Review before publish · Card
The last step: every section summarised with Edit links, the changes since the live version highlighted, and Publish to brands as the single primary. - Step transition · composed
Calm motion between steps: the incoming pane fades in and settles 8px in the direction of travel on the sheet timing. Instant under reduced motion.