{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "tree",
  "type": "registry:ui",
  "title": "Tree view (MIAN)",
  "description": "Nested, collapsible lists, file trees, navigation and outlines, built on native <details>.",
  "categories": [
    "data display",
    "tree",
    "tree view",
    "file tree",
    "explorer"
  ],
  "registryDependencies": [
    "https://mian.ro/r/mian-base.json"
  ],
  "files": [
    {
      "path": "mian/components/tree.css",
      "type": "registry:file",
      "target": "mian/components/tree.css",
      "content": ".mn-tree, .mn-tree ul { margin: 0; padding: 0; list-style: none; }\n.mn-tree { font: 400 var(--mn-text-sm)/1.4 var(--mn-font); color: var(--mn-fg); }\n.mn-tree ul { margin-inline-start: .9rem; padding-inline-start: .55rem; border-inline-start: var(--mn-border-w) solid var(--mn-border); }\n.mn-tree summary, .mn-tree-item {\n  display: flex; align-items: center; gap: .45rem; min-height: 1.9rem; padding: .2rem .45rem;\n  border-radius: var(--mn-radius-field); color: inherit; text-decoration: none; cursor: pointer; list-style: none;\n}\n.mn-tree summary::-webkit-details-marker { display: none; }\n.mn-tree summary::before { content: \"\"; width: .4rem; height: .4rem; flex: none; margin-inline: .1rem .15rem; border: solid var(--mn-muted); border-width: 0 1.5px 1.5px 0; transform: rotate(-45deg); transition: transform var(--mn-duration) var(--mn-ease); }\n.mn-tree details[open] > summary::before { transform: rotate(45deg); }\n.mn-tree-item { padding-inline-start: 1.25rem; }\n.mn-tree summary:hover, .mn-tree-item:hover { background: var(--mn-hover); }\n.mn-tree summary:focus-visible, .mn-tree-item:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--mn-ring); }\n.mn-tree-item[aria-current] { background: color-mix(in oklab, var(--mn-primary) 12%, transparent); color: var(--mn-primary-text); font-weight: 550; }\n.mn-tree svg { width: 1rem; height: 1rem; color: var(--mn-muted); }"
    },
    {
      "path": "mian/examples/tree.html",
      "type": "registry:file",
      "target": "mian/examples/tree.html",
      "content": "<!-- Files -->\n<ul class=\"mn-tree\" aria-label=\"Project files\" style=\"max-width:18rem\">\n  <li><details open><summary><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M3 6a1 1 0 0 1 1-1h5l2 2h9a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1Z\"/></svg> src</summary>\n    <ul>\n      <li><details open><summary><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M3 6a1 1 0 0 1 1-1h5l2 2h9a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1Z\"/></svg> components</summary>\n        <ul><li><a class=\"mn-tree-item\" href=\"#\" aria-current=\"page\"><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> button.mjs</a></li><li><a class=\"mn-tree-item\" href=\"#\"><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> calendar.mjs</a></li></ul>\n      </details></li>\n      <li><details><summary><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M3 6a1 1 0 0 1 1-1h5l2 2h9a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1Z\"/></svg> noodles</summary><ul><li><a class=\"mn-tree-item\" href=\"#\"><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> mian.css</a></li></ul></details></li>\n      <li><a class=\"mn-tree-item\" href=\"#\"><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> index.html</a></li>\n    </ul>\n  </details></li>\n  <li><a class=\"mn-tree-item\" href=\"#\"><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> README.md</a></li>\n</ul>"
    }
  ],
  "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/tree",
  "meta": {
    "mian": {
      "license": "LicenseRef-MIAN-1.0",
      "requiresJs": false,
      "classes": [
        "mn-tree",
        "details > summary",
        "mn-tree-item"
      ],
      "accessibility": [
        "Branches are native disclosures: Enter/Space toggles, the state is announced. It is not the ARIA tree pattern (no arrow-key tree navigation), which keeps it working without JavaScript.",
        "For file managers that need multi-select and arrow navigation, build the full tree pattern."
      ],
      "intents": [
        "file tree",
        "nested navigation",
        "folder structure",
        "outline"
      ]
    }
  }
}