{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "steps", "type": "registry:ui", "title": "Steps (MIAN)", "description": "Progress through a multi-step flow, horizontal or vertical.", "categories": [ "navigation", "steps", "stepper", "wizard", "progress" ], "registryDependencies": [ "https://mian.ro/r/mian-base.json" ], "files": [ { "path": "mian/components/steps.css", "type": "registry:file", "target": "mian/components/steps.css", "content": ".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; }" }, { "path": "mian/examples/steps.html", "type": "registry:file", "target": "mian/examples/steps.html", "content": "\n
    \n
  1. Account
    2. \n
  2. Shipping
    3. \n
  3. Payment
    4. \n
  4. Review
    5. \n
\n\n\n
    \n
  1. Create projectDone in 2 minutes
    2. \n
  2. Invite your teamAdd people by email
    3. \n
  3. Go liveConnect a domain
    4. \n
" } ], "docs": "MIAN components are HTML + CSS classes, not React components. The styles are already included in mian-base; this item adds the component's CSS section and example markup for reference. Docs: https://mian.ro/components/steps", "meta": { "mian": { "license": "LicenseRef-MIAN-1.0", "requiresJs": false, "classes": [ "mn-steps", "mn-step", "mn-step-title · mn-step-desc", "mn-steps-vertical" ], "accessibility": [ "aria-current=\"step\" marks the current step. Add visually hidden \"completed\" text to finished steps if the tick alone carries the meaning." ], "intents": [ "checkout steps", "wizard progress", "multi-step form", "stepper" ] } } }