{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "list",
  "type": "registry:ui",
  "title": "List (MIAN)",
  "description": "Bordered lists of rows with titles, descriptions, avatars and trailing content, or links.",
  "categories": [
    "data display",
    "list",
    "list group",
    "rows",
    "items"
  ],
  "registryDependencies": [
    "https://mian.ro/r/mian-base.json"
  ],
  "files": [
    {
      "path": "mian/components/list.css",
      "type": "registry:file",
      "target": "mian/components/list.css",
      "content": ".mn-list { margin: 0; padding: 0; list-style: none; border: var(--mn-border-w) solid var(--mn-border); border-radius: var(--mn-radius-box); background: var(--mn-card); overflow: hidden; }\n.mn-list > li { display: flex; align-items: center; gap: .85rem; padding: .8rem 1rem; font-size: var(--mn-text-sm); }\n.mn-list > li + li { border-top: var(--mn-border-w) solid var(--mn-border); }\n.mn-list-title { font-weight: 550; line-height: 1.35; }\n.mn-list-desc { color: var(--mn-muted); font-size: calc(var(--mn-text-sm) - 1px); line-height: 1.4; }\n.mn-list > li > a, .mn-list > li > button { display: flex; align-items: center; gap: .85rem; flex: 1; margin: -.8rem -1rem; padding: .8rem 1rem; border: 0; background: none; color: inherit; font: inherit; text-align: start; text-decoration: none; cursor: pointer; }\n.mn-list > li > a:hover, .mn-list > li > button:hover { background: var(--mn-hover); }\n.mn-list > li > a:focus-visible, .mn-list > li > button:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--mn-ring); }"
    },
    {
      "path": "mian/examples/list.html",
      "type": "registry:file",
      "target": "mian/examples/list.html",
      "content": "<!-- People -->\n<ul class=\"mn-list\" style=\"max-width:28rem\">\n  <li><span class=\"mn-avatar\"><img alt=\"\" src=\"data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2064%2064'%3E%3Crect%20width%3D'64'%20height%3D'64'%20fill%3D'hsl(330%2055%25%2078%25)'%2F%3E%3Ccircle%20cx%3D'32'%20cy%3D'26'%20r%3D'12'%20fill%3D'hsl(330%2035%25%2042%25)'%2F%3E%3Cpath%20d%3D'M10%2064c2-14%2011-21%2022-21s20%207%2022%2021z'%20fill%3D'hsl(330%2035%25%2042%25)'%2F%3E%3C%2Fsvg%3E\"></span><div class=\"mn-grow\"><div class=\"mn-list-title\">Ana Popescu</div><div class=\"mn-list-desc\">ana@mian.ro</div></div><span class=\"mn-badge mn-badge-soft\">Owner</span></li>\n  <li><span class=\"mn-avatar\"><img alt=\"\" src=\"data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2064%2064'%3E%3Crect%20width%3D'64'%20height%3D'64'%20fill%3D'hsl(200%2055%25%2078%25)'%2F%3E%3Ccircle%20cx%3D'32'%20cy%3D'26'%20r%3D'12'%20fill%3D'hsl(200%2035%25%2042%25)'%2F%3E%3Cpath%20d%3D'M10%2064c2-14%2011-21%2022-21s20%207%2022%2021z'%20fill%3D'hsl(200%2035%25%2042%25)'%2F%3E%3C%2Fsvg%3E\"></span><div class=\"mn-grow\"><div class=\"mn-list-title\">Kenji Sato</div><div class=\"mn-list-desc\">kenji@mian.ro</div></div><span class=\"mn-badge mn-badge-outline mn-neutral\">Member</span></li>\n  <li><span class=\"mn-avatar\"><img alt=\"\" src=\"data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2064%2064'%3E%3Crect%20width%3D'64'%20height%3D'64'%20fill%3D'hsl(290%2055%25%2078%25)'%2F%3E%3Ccircle%20cx%3D'32'%20cy%3D'26'%20r%3D'12'%20fill%3D'hsl(290%2035%25%2042%25)'%2F%3E%3Cpath%20d%3D'M10%2064c2-14%2011-21%2022-21s20%207%2022%2021z'%20fill%3D'hsl(290%2035%25%2042%25)'%2F%3E%3C%2Fsvg%3E\"></span><div class=\"mn-grow\"><div class=\"mn-list-title\">Linh Tran</div><div class=\"mn-list-desc\">linh@mian.ro</div></div><span class=\"mn-badge mn-badge-outline mn-neutral\">Member</span></li>\n</ul>\n\n<!-- Navigation list -->\n<ul class=\"mn-list\" style=\"max-width:28rem\">\n  <li><a href=\"#list\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><circle cx=\"12\" cy=\"8\" r=\"4\"/><path d=\"M4 21a8 8 0 0 1 16 0\"/></svg><span class=\"mn-grow\">Account</span><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"m9 6 6 6-6 6\"/></svg></a></li>\n  <li><a href=\"#list\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9\"/><path d=\"M10.3 21a1.9 1.9 0 0 0 3.4 0\"/></svg><span class=\"mn-grow\">Notifications</span><span class=\"mn-badge mn-badge-sm\">3</span></a></li>\n  <li><a href=\"#list\"><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 class=\"mn-grow\">Privacy</span><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"m9 6 6 6-6 6\"/></svg></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/list",
  "meta": {
    "mian": {
      "license": "LicenseRef-MIAN-1.0",
      "requiresJs": false,
      "classes": [
        "mn-list",
        "mn-list-title · mn-list-desc",
        "li > a / li > button"
      ],
      "accessibility": [
        "Stay with <ul>/<li> so the item count is announced."
      ],
      "intents": [
        "list of items",
        "members list",
        "settings list",
        "link list",
        "inbox rows"
      ]
    }
  }
}