{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "timeline",
  "type": "registry:ui",
  "title": "Timeline (MIAN)",
  "description": "A vertical sequence of events with markers, titles, times and content.",
  "categories": [
    "data display",
    "timeline",
    "activity",
    "history",
    "feed"
  ],
  "registryDependencies": [
    "https://mian.ro/r/mian-base.json"
  ],
  "files": [
    {
      "path": "mian/components/timeline.css",
      "type": "registry:file",
      "target": "mian/components/timeline.css",
      "content": ".mn-timeline { margin: 0; padding: 0; list-style: none; }\n.mn-timeline > li { position: relative; display: grid; grid-template-columns: 1.5rem 1fr; gap: 0 .9rem; padding-bottom: 1.25rem; }\n.mn-timeline > li:last-child { padding-bottom: 0; }\n.mn-timeline > li::before { content: \"\"; position: absolute; left: calc(.75rem - 1px); top: 1.6rem; bottom: .1rem; width: 2px; background: var(--mn-border); }\n.mn-timeline > li:last-child::before { display: none; }\n.mn-timeline-marker {\n  display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%;\n  background: var(--mn-surface-2); border: 2px solid var(--mn-border); color: var(--mn-muted);\n}\n.mn-timeline-marker svg { width: .8rem; height: .8rem; }\n.mn-timeline-marker:is(.mn-primary, .mn-accent, .mn-success, .mn-warning, .mn-danger, .mn-info) { background: var(--_c); border-color: var(--_c); color: var(--_cf); }\n.mn-timeline-title { font-weight: 600; font-size: var(--mn-text-sm); line-height: 1.5rem; }\n.mn-timeline-time { font-size: .75rem; color: var(--mn-muted); }\n.mn-timeline-body { grid-column: 2; font-size: var(--mn-text-sm); color: var(--mn-muted); margin-top: .2rem; line-height: 1.55; }"
    },
    {
      "path": "mian/examples/timeline.html",
      "type": "registry:file",
      "target": "mian/examples/timeline.html",
      "content": "<!-- Order history -->\n<ol class=\"mn-timeline\" style=\"max-width:28rem\">\n  <li><span class=\"mn-timeline-marker mn-success\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M20 6 9 17l-5-5\"/></svg></span><div><div class=\"mn-timeline-title\">Delivered</div><time class=\"mn-timeline-time\" datetime=\"2026-09-24T14:10\">Today, 14:10</time></div><p class=\"mn-timeline-body\">Left at the front door.</p></li>\n  <li><span class=\"mn-timeline-marker mn-primary\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"m12 3 8 4.5v9L12 21l-8-4.5v-9Z\"/><path d=\"m4 7.5 8 4.5 8-4.5M12 12v9\"/></svg></span><div><div class=\"mn-timeline-title\">Out for delivery</div><time class=\"mn-timeline-time\" datetime=\"2026-09-24T08:02\">Today, 08:02</time></div></li>\n  <li><span class=\"mn-timeline-marker\"></span><div><div class=\"mn-timeline-title\">Order placed</div><time class=\"mn-timeline-time\" datetime=\"2026-09-22\">22 Sep</time></div></li>\n</ol>"
    }
  ],
  "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/timeline",
  "meta": {
    "mian": {
      "license": "LicenseRef-MIAN-1.0",
      "requiresJs": false,
      "classes": [
        "mn-timeline",
        "mn-timeline-marker",
        "mn-timeline-title · mn-timeline-time · mn-timeline-body"
      ],
      "accessibility": [
        "Use an ordered list and a <time datetime> for each timestamp."
      ],
      "intents": [
        "timeline",
        "order tracking",
        "history",
        "activity log",
        "company history"
      ]
    }
  }
}