{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "notifications",
  "type": "registry:ui",
  "title": "Notification list (MIAN)",
  "description": "An inbox of notifications with unread markers, icons or avatars, times and inline actions.",
  "categories": [
    "data display",
    "notifications",
    "inbox",
    "activity",
    "alerts"
  ],
  "registryDependencies": [
    "https://mian.ro/r/mian-base.json"
  ],
  "files": [
    {
      "path": "mian/components/notifications.css",
      "type": "registry:file",
      "target": "mian/components/notifications.css",
      "content": ".mn-notifications { margin: 0; padding: 0; list-style: none; }\n.mn-notification { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .15rem .8rem; align-items: start; padding: .9rem 1rem .9rem 1.35rem; border-bottom: var(--mn-border-w) solid var(--mn-border); }\n.mn-notification:last-child { border-bottom: 0; }\n.mn-notification > .mn-avatar, .mn-notification > .mn-notification-icon { grid-row: span 3; }\n.mn-notification-icon { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: color-mix(in oklab, var(--_c, var(--mn-primary)) 14%, var(--mn-surface)); color: var(--_ct, var(--mn-primary-text)); }\n.mn-notification-icon svg { width: 1.1rem; height: 1.1rem; }\n.mn-notification p { grid-column: 2; margin: 0; font-size: var(--mn-text-sm); line-height: 1.5; }\n.mn-notification p strong { font-weight: 600; }\n.mn-notification time { grid-column: 3; grid-row: 1; color: var(--mn-muted); font-size: .75rem; white-space: nowrap; }\n.mn-notification-actions { grid-column: 2; display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .45rem; }\n.mn-notification[data-unread] { background: color-mix(in oklab, var(--mn-primary) 4%, transparent); }\n.mn-notification[data-unread]::before { content: \"\"; position: absolute; left: .55rem; top: 1.45rem; width: .45rem; height: .45rem; border-radius: 50%; background: var(--mn-primary); }"
    },
    {
      "path": "mian/examples/notifications.html",
      "type": "registry:file",
      "target": "mian/examples/notifications.html",
      "content": "<!-- Inbox -->\n<div class=\"mn-card\" style=\"max-width:30rem\"><ul class=\"mn-notifications\">\n  <li class=\"mn-notification\" data-unread><span class=\"mn-avatar mn-avatar-sm\" aria-hidden=\"true\">MR</span><p><span class=\"mn-sr-only\">Unread: </span><strong>Maren Richter</strong> approved 42 matches in Operating · 4410.</p><time datetime=\"2026-09-25T09:12\">9 min</time><div class=\"mn-notification-actions\"><a class=\"mn-btn mn-btn-xs mn-btn-outline\" href=\"#\">View</a></div></li>\n  <li class=\"mn-notification\" data-unread><span class=\"mn-notification-icon mn-warning\"><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 2 20h20L12 3Z\"/><path d=\"M12 10v4M12 17v.01\"/></svg></span><p><span class=\"mn-sr-only\">Unread: </span>Storage is at <strong>84%</strong> of your plan.</p><time datetime=\"2026-09-25T07:00\">2 h</time></li>\n  <li class=\"mn-notification\"><span class=\"mn-notification-icon mn-success\"><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=\"12\" r=\"9\"/><path d=\"m8 12 3 3 5-6\"/></svg></span><p>August closed in <strong>3 days</strong>. Report ready.</p><time datetime=\"2026-09-03\">3 Sep</time></li>\n</ul></div>"
    }
  ],
  "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/notifications",
  "meta": {
    "mian": {
      "license": "LicenseRef-MIAN-1.0",
      "requiresJs": false,
      "classes": [
        "mn-notifications",
        "mn-notification"
      ],
      "accessibility": [
        "Say “Unread” in text (a visually hidden span), the dot alone is not announced.",
        "Put the time in <time datetime=\"…\">."
      ],
      "intents": [
        "notifications list",
        "inbox",
        "activity feed",
        "alerts center"
      ]
    }
  }
}