{
  "$schema": "https://mian.ro/schema/v2/registry.json",
  "schemaVersion": "2.0.0",
  "generatedAt": "2026-10-02T13:14:06.957Z",
  "id": "steps",
  "name": "Steps",
  "category": "Navigation",
  "description": "Progress through a multi-step flow, horizontal or vertical.",
  "tags": [
    "steps",
    "stepper",
    "wizard",
    "progress",
    "checkout"
  ],
  "requiresJs": false,
  "license": "LicenseRef-MIAN-1.0",
  "composition": {
    "role": null,
    "intents": [
      "checkout steps",
      "wizard progress",
      "multi-step form",
      "stepper"
    ],
    "prominence": null,
    "density": null,
    "worksAfter": [],
    "worksBefore": [],
    "alternatives": [],
    "avoid": null
  },
  "url": "https://mian.ro/components/steps",
  "markdownUrl": "https://mian.ro/ai/components/steps.md",
  "classes": [
    {
      "name": "mn-steps",
      "description": "On an <ol>."
    },
    {
      "name": "mn-step",
      "description": "A step. data-state=\"complete\" or aria-current=\"step\"."
    },
    {
      "name": "mn-step-title · mn-step-desc",
      "description": "Text."
    },
    {
      "name": "mn-steps-vertical",
      "description": "Vertical layout."
    }
  ],
  "accessibility": [
    "aria-current=\"step\" marks the current step. Add visually hidden \"completed\" text to finished steps if the tick alone carries the meaning."
  ],
  "examples": [
    {
      "title": "Horizontal",
      "description": null,
      "html": "<ol class=\"mn-steps\">\n  <li class=\"mn-step\" data-state=\"complete\"><span class=\"mn-step-title\">Account</span></li>\n  <li class=\"mn-step\" data-state=\"complete\"><span class=\"mn-step-title\">Shipping</span></li>\n  <li class=\"mn-step\" aria-current=\"step\"><span class=\"mn-step-title\">Payment</span></li>\n  <li class=\"mn-step\"><span class=\"mn-step-title\">Review</span></li>\n</ol>"
    },
    {
      "title": "Vertical",
      "description": null,
      "html": "<ol class=\"mn-steps mn-steps-vertical\">\n  <li class=\"mn-step\" data-state=\"complete\"><div><span class=\"mn-step-title\">Create project</span><span class=\"mn-step-desc\">Done in 2 minutes</span></div></li>\n  <li class=\"mn-step\" aria-current=\"step\"><div><span class=\"mn-step-title\">Invite your team</span><span class=\"mn-step-desc\">Add people by email</span></div></li>\n  <li class=\"mn-step\"><div><span class=\"mn-step-title\">Go live</span><span class=\"mn-step-desc\">Connect a domain</span></div></li>\n</ol>"
    }
  ],
  "css": ".mn-steps { display: flex; margin: 0; padding: 0; list-style: none; counter-reset: mn-step; font-size: var(--mn-text-sm); }\n.mn-step { flex: 1; display: flex; flex-direction: column; align-items: center; gap: .5rem; position: relative; text-align: center; counter-increment: mn-step; min-width: 0; }\n.mn-step::before {\n  content: counter(mn-step); position: relative; z-index: 1;\n  display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%;\n  border: 2px solid var(--mn-border); background: var(--mn-bg); color: var(--mn-muted);\n  font-weight: 600; font-size: .8125rem;\n}\n.mn-step + .mn-step::after { content: \"\"; position: absolute; top: 1rem; right: calc(50% + 1.25rem); left: calc(-50% + 1.25rem); height: 2px; background: var(--mn-border); }\n.mn-step-title { font-weight: 550; color: var(--mn-muted); }\n.mn-step-desc { font-size: .75rem; color: var(--mn-muted); }\n.mn-step[data-state=\"complete\"]::before { content: \"✓\"; background: var(--mn-primary); border-color: var(--mn-primary); color: var(--mn-primary-fg); }\n.mn-step[data-state=\"complete\"] + .mn-step::after, .mn-step[data-state=\"complete\"] + .mn-step[aria-current=\"step\"]::after { background: var(--mn-primary); }\n.mn-step[aria-current=\"step\"]::before { border-color: var(--mn-primary); color: var(--mn-primary-text); box-shadow: 0 0 0 4px color-mix(in oklab, var(--mn-primary) 15%, transparent); }\n.mn-step:is([aria-current=\"step\"], [data-state=\"complete\"]) .mn-step-title { color: var(--mn-fg); }\n.mn-steps-vertical { flex-direction: column; gap: 1.5rem; }\n.mn-steps-vertical .mn-step { flex-direction: row; align-items: flex-start; text-align: start; gap: .85rem; }\n.mn-steps-vertical .mn-step::before { flex: none; }\n.mn-steps-vertical .mn-step + .mn-step::after { left: calc(1rem - 1px); right: auto; top: -1.5rem; height: 1.5rem; width: 2px; }\n.mn-steps-vertical .mn-step > div { padding-top: .35rem; display: flex; flex-direction: column; gap: .15rem; }",
  "js": null,
  "install": {
    "css": "https://mian.ro/dist/mian.css",
    "js": null,
    "registryItem": "https://mian.ro/r/steps.json"
  }
}