{
  "$schema": "https://mian.ro/schema/v2/registry.json",
  "schemaVersion": "2.0.0",
  "generatedAt": "2026-10-02T13:14:06.957Z",
  "id": "notifications",
  "name": "Notification list",
  "category": "Data display",
  "description": "An inbox of notifications with unread markers, icons or avatars, times and inline actions.",
  "tags": [
    "notifications",
    "inbox",
    "activity",
    "alerts",
    "feed",
    "bell",
    "updates",
    "saas"
  ],
  "requiresJs": false,
  "license": "LicenseRef-MIAN-1.0",
  "composition": {
    "role": null,
    "intents": [
      "notifications list",
      "inbox",
      "activity feed",
      "alerts center"
    ],
    "prominence": null,
    "density": null,
    "worksAfter": [],
    "worksBefore": [],
    "alternatives": [],
    "avoid": null
  },
  "url": "https://mian.ro/components/notifications",
  "markdownUrl": "https://mian.ro/ai/components/notifications.md",
  "classes": [
    {
      "name": "mn-notifications",
      "description": "The list (<ul>)."
    },
    {
      "name": "mn-notification",
      "description": "One notification: an avatar or mn-notification-icon (with a colour role), text, <time>, optional mn-notification-actions. data-unread marks it unread."
    }
  ],
  "accessibility": [
    "Say “Unread” in text (a visually hidden span), the dot alone is not announced.",
    "Put the time in <time datetime=\"…\">."
  ],
  "examples": [
    {
      "title": "Inbox",
      "description": null,
      "html": "<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>"
    }
  ],
  "css": ".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); }",
  "js": null,
  "install": {
    "css": "https://mian.ro/dist/mian.css",
    "js": null,
    "registryItem": "https://mian.ro/r/notifications.json"
  }
}