{
  "$schema": "https://mian.ro/schema/v2/registry.json",
  "schemaVersion": "2.0.0",
  "generatedAt": "2026-10-02T13:14:06.957Z",
  "id": "curriculum",
  "name": "Curriculum",
  "category": "Data display",
  "description": "Modules and lessons of a course with durations, lesson type, done and locked states, each module a native disclosure.",
  "tags": [
    "curriculum",
    "course outline",
    "syllabus",
    "lessons",
    "modules",
    "education",
    "learning",
    "table of contents",
    "programme"
  ],
  "requiresJs": false,
  "license": "LicenseRef-MIAN-1.0",
  "composition": {
    "role": null,
    "intents": [
      "course curriculum",
      "syllabus",
      "lesson list",
      "course modules",
      "training outline"
    ],
    "prominence": null,
    "density": null,
    "worksAfter": [],
    "worksBefore": [],
    "alternatives": [],
    "avoid": null
  },
  "url": "https://mian.ro/components/curriculum",
  "markdownUrl": "https://mian.ro/ai/components/curriculum.md",
  "classes": [
    {
      "name": "mn-curriculum",
      "description": "The list of modules."
    },
    {
      "name": "mn-module",
      "description": "A module: <details> with a summary (title, lesson count, duration)."
    },
    {
      "name": "mn-module-meta",
      "description": "The count and duration in the summary."
    },
    {
      "name": "mn-lessons",
      "description": "The ordered list of lessons."
    },
    {
      "name": "mn-lesson",
      "description": "A lesson row. data-state=\"done\" or \"locked\"."
    },
    {
      "name": "mn-lesson-time",
      "description": "Duration, in tabular figures."
    }
  ],
  "accessibility": [
    "Modules are native <details>, so they open with Enter or Space and announce expanded or collapsed.",
    "Done and locked states are also written as text (visually hidden), not only drawn.",
    "Durations use <time datetime=\"PT12M\"> so they are machine-readable."
  ],
  "examples": [
    {
      "title": "Course outline",
      "description": null,
      "html": "<div class=\"mn-curriculum\">\n  <details class=\"mn-module\" open><summary><span>1 · Seeing type</span><span class=\"mn-module-meta\">4 lessons · 48 min</span></summary>\n    <ol class=\"mn-lessons\">\n      <li class=\"mn-lesson\" data-state=\"done\"><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>How letters are built<span class=\"mn-sr-only\"> (done)</span></span><time class=\"mn-lesson-time\" datetime=\"PT12M\">12:00</time></li>\n      <li class=\"mn-lesson\" data-state=\"done\"><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>Serif, sans and everything between<span class=\"mn-sr-only\"> (done)</span></span><time class=\"mn-lesson-time\" datetime=\"PT14M\">14:00</time></li>\n      <li class=\"mn-lesson\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M7 4.5v15l12-7.5Z\"/></svg><span>Measure, leading and rhythm</span><time class=\"mn-lesson-time\" datetime=\"PT11M\">11:00</time></li>\n      <li class=\"mn-lesson\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M14 3H6a1 1 0 0 0-1 1v16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V8Z\"/><path d=\"M14 3v5h5\"/></svg><span>Exercise: set a menu</span><time class=\"mn-lesson-time\" datetime=\"PT11M\">11:00</time></li>\n    </ol></details>\n  <details class=\"mn-module\"><summary><span>2 · Pairing and hierarchy</span><span class=\"mn-module-meta\">5 lessons · 62 min</span></summary>\n    <ol class=\"mn-lessons\">\n      <li class=\"mn-lesson\" data-state=\"locked\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><rect x=\"4\" y=\"11\" width=\"16\" height=\"10\" rx=\"2\"/><path d=\"M8 11V7a4 4 0 0 1 8 0v4\"/></svg><span>Two faces, one voice<span class=\"mn-sr-only\"> (locked)</span></span><time class=\"mn-lesson-time\" datetime=\"PT13M\">13:00</time></li>\n      <li class=\"mn-lesson\" data-state=\"locked\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><rect x=\"4\" y=\"11\" width=\"16\" height=\"10\" rx=\"2\"/><path d=\"M8 11V7a4 4 0 0 1 8 0v4\"/></svg><span>Scales that hold<span class=\"mn-sr-only\"> (locked)</span></span><time class=\"mn-lesson-time\" datetime=\"PT12M\">12:00</time></li>\n    </ol></details>\n</div>"
    }
  ],
  "css": ".mn-curriculum { display: grid; border-block: var(--mn-border-w) solid var(--mn-border); }\n.mn-module + .mn-module { border-top: var(--mn-border-w) solid var(--mn-border); }\n.mn-module > summary { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .25rem 1rem; padding: 1rem .25rem; cursor: pointer; list-style: none; font: var(--mn-heading-weight) 1.0625rem/1.35 var(--mn-font-heading); color: var(--mn-fg); }\n.mn-module > summary::-webkit-details-marker { display: none; }\n.mn-module > summary::after { content: \"+\"; order: 3; font: 400 1.25rem/1 var(--mn-font); color: var(--mn-muted); transition: rotate var(--mn-duration) var(--mn-ease); }\n.mn-module[open] > summary::after { rotate: 45deg; }\n.mn-module-meta { margin-inline-start: auto; color: var(--mn-muted); font: 400 var(--mn-text-sm) var(--mn-font); font-variant-numeric: tabular-nums; }\n.mn-lessons { display: grid; margin: 0 0 1rem; padding: 0; list-style: none; }\n.mn-lesson { display: grid; grid-template-columns: 1.25rem minmax(0, 1fr) auto; align-items: center; gap: .75rem; padding: .55rem .25rem; border-radius: var(--mn-radius-field); color: var(--mn-fg); font-size: .9375rem; }\n.mn-lesson > svg { width: 1rem; height: 1rem; color: var(--mn-muted); }\n.mn-lesson[data-state=\"done\"] > svg { color: var(--mn-success-text, var(--mn-success)); }\n.mn-lesson[data-state=\"done\"] > span { color: var(--mn-muted); }\n.mn-lesson[data-state=\"locked\"] { color: var(--mn-muted); }\n.mn-lesson-time { color: var(--mn-muted); font: 400 var(--mn-text-sm) var(--mn-font-mono); font-variant-numeric: tabular-nums; }",
  "js": null,
  "install": {
    "css": "https://mian.ro/dist/mian.css",
    "js": null,
    "registryItem": "https://mian.ro/r/curriculum.json"
  }
}