{"name":"steps","title":"Steps","description":"Numbered indicators with connecting separators, prev/next triggers, per-step content, and a completed state — for wizard-style flows.","installCommand":"bunx marko-ui add steps -y","usageTags":"<Steps>","importSnippet":"import Steps from \"@/components/ui/steps/steps.marko\";","usageSnippet":"static const steps = [{ title: \"Account\" }, { title: \"Profile\" }, { title: \"Review\" }];\n\n<Steps|index| items=steps>\n  Content for step ${index + 1}\n  <@completedContent>All steps complete.</@completedContent>\n</Steps>","tags":["Steps"],"parts":[{"name":"completedContent"}],"props":[{"name":"items","type":"StepItem[]","required":true},{"name":"count","type":"number | undefined","required":false,"description":"The total number of steps"},{"name":"defaultStep","type":"number | undefined","required":false,"description":"The initial value of the stepper when rendered.\nUse when you don't need to control the value of the stepper."},{"name":"dir","type":"'ltr' | 'rtl' | undefined","required":false,"default":"ltr","description":"The document's text/writing direction."},{"name":"getRootNode","type":"(() => ShadowRoot | Document | Node) | undefined","required":false,"description":"A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron."},{"name":"ids","type":"ElementIds | undefined","required":false,"description":"The custom ids for the stepper elements"},{"name":"isStepSkippable","type":"((index: number) => boolean) | undefined","required":false,"description":"Whether a step can be skipped during navigation.\nSkippable steps are bypassed when using next/prev."},{"name":"isStepValid","type":"((index: number) => boolean) | undefined","required":false,"description":"Whether a step is valid. Invalid steps block forward navigation in linear mode."},{"name":"linear","type":"boolean | undefined","required":false,"description":"If `true`, the stepper requires the user to complete the steps in order"},{"name":"onStepComplete","type":"VoidFunction | undefined","required":false,"description":"Callback to be called when a step is completed"},{"name":"orientation","type":"'horizontal' | 'vertical' | undefined","required":false,"default":"horizontal","description":"The orientation of the stepper"},{"name":"step","type":"number | undefined","required":false,"description":"The controlled value of the stepper"}],"events":[{"name":"onStepChange","arg":"StepChangeDetails","description":"Callback to be called when the value changes"},{"name":"onStepInvalid","arg":"StepInvalidDetails","description":"Called when navigation is blocked due to an invalid step."},{"name":"stepChange","arg":"number"}],"keyboard":[],"accessibilityNotes":[],"examples":[{"id":"steps-horizontal","title":"Horizontal","source":"import Steps from \"@marko-ui/shadcn/ui/steps/steps.marko\";\n\nstatic const WIZARD_STEPS = [\n  { title: \"Account\", description: \"Provide your account details\" },\n  { title: \"Profile\", description: \"Tell us about yourself\" },\n  { title: \"Review\", description: \"Confirm and finish\" },\n];\n\n<Steps|index| items=WIZARD_STEPS class=\"w-[560px]\">\n  <p class=\"text-muted-foreground text-sm\">\n    Step ${index + 1}: ${WIZARD_STEPS[index]?.title} content goes here.\n  </p>\n  <@completedContent>\n    <p class=\"text-muted-foreground text-sm\">All steps complete — thanks!</p>\n  </@completedContent>\n</Steps>","description":"The default orientation: numbered indicators laid out left to right."},{"id":"steps-vertical","title":"Vertical","source":"import Steps from \"@marko-ui/shadcn/ui/steps/steps.marko\";\n\nstatic const SHIPPING_STEPS = [\n  { title: \"Cart\" },\n  { title: \"Shipping\" },\n  { title: \"Payment\" },\n  { title: \"Confirm\" },\n];\n\n<Steps|index| items=SHIPPING_STEPS orientation=\"vertical\" class=\"w-[560px]\">\n  <p class=\"text-muted-foreground text-sm\">\n    ${SHIPPING_STEPS[index]?.title} step content.\n  </p>\n  <@completedContent>\n    <p class=\"text-muted-foreground text-sm\">Order complete.</p>\n  </@completedContent>\n</Steps>","description":"Pass `orientation=\"vertical\"` to stack the indicators along the left edge."},{"id":"steps-linear","title":"Linear","source":"import Steps from \"@marko-ui/shadcn/ui/steps/steps.marko\";\n\nstatic const WIZARD_STEPS = [\n  { title: \"Account\", description: \"Provide your account details\" },\n  { title: \"Profile\", description: \"Tell us about yourself\" },\n  { title: \"Review\", description: \"Confirm and finish\" },\n];\n\n<Steps|index| items=WIZARD_STEPS linear class=\"w-[560px]\">\n  <p class=\"text-muted-foreground text-sm\">\n    Step ${index + 1}: ${WIZARD_STEPS[index]?.title} content goes here.\n  </p>\n  <@completedContent>\n    <p class=\"text-muted-foreground text-sm\">All steps complete — thanks!</p>\n  </@completedContent>\n</Steps>","description":"Pass `linear` to require each step be completed in order before moving forward."},{"id":"steps-controlled","title":"Controlled","source":"import Steps from \"@marko-ui/shadcn/ui/steps/steps.marko\";\n\nstatic const SHIPPING_STEPS = [\n  { title: \"Cart\" },\n  { title: \"Shipping\" },\n  { title: \"Payment\" },\n  { title: \"Confirm\" },\n];\n\n<let/step=0/>\n\n<p class=\"mb-4 text-sm text-muted-foreground\">Current step: ${step + 1}</p>\n<Steps|index|\n  items=SHIPPING_STEPS\n  step=step\n  stepChange(next) { step = next; }\n  class=\"w-[560px]\"\n>\n  <p class=\"text-muted-foreground text-sm\">\n    ${SHIPPING_STEPS[index]?.title} step content.\n  </p>\n  <@completedContent>\n    <p class=\"text-muted-foreground text-sm\">Order complete.</p>\n  </@completedContent>\n</Steps>","description":"Zag machines are controlled: a `step` prop without a change handler never moves. Pair it with `stepChange`, or use Marko's bind shorthand `step:=state`."}],"importInstallCommand":"bun add @marko-ui/shadcn marko-zag","body":{"param":"number"},"nativeAttributes":"div","itemTypes":[{"prop":"items","typeName":"StepItem","fields":[{"name":"title","type":"string","required":true},{"name":"description","type":"string","required":false}]}]}