{
  "$schema": "https://mian.ro/schema/v2/registry.json",
  "schemaVersion": "2.0.0",
  "generatedAt": "2026-10-02T13:14:06.957Z",
  "id": "indicator",
  "name": "Indicator",
  "category": "Data display",
  "description": "A count or status dot pinned to the corner of any element, avatars, icons, buttons.",
  "tags": [
    "indicator",
    "notification dot",
    "badge count",
    "status dot",
    "presence",
    "unread"
  ],
  "requiresJs": false,
  "license": "LicenseRef-MIAN-1.0",
  "composition": {
    "role": null,
    "intents": [
      "notification dot",
      "unread count",
      "status dot on avatar"
    ],
    "prominence": null,
    "density": null,
    "worksAfter": [],
    "worksBefore": [],
    "alternatives": [],
    "avoid": null
  },
  "url": "https://mian.ro/components/indicator",
  "markdownUrl": "https://mian.ro/ai/components/indicator.md",
  "classes": [
    {
      "name": "mn-indicator",
      "description": "Wrapper."
    },
    {
      "name": "mn-indicator-item",
      "description": "The pinned element: a badge or mn-indicator-dot."
    },
    {
      "name": "mn-indicator-dot · mn-indicator-pulse",
      "description": "A plain or pulsing dot."
    },
    {
      "name": "mn-indicator-bottom · mn-indicator-start · mn-indicator-inset",
      "description": "Placement."
    }
  ],
  "accessibility": [
    "The dot is decorative: say the same thing in text, e.g. aria-label=\"Inbox, 3 unread\" on the button, or a visually hidden span."
  ],
  "examples": [
    {
      "title": "Indicators",
      "description": null,
      "html": "<span class=\"mn-indicator\"><span class=\"mn-indicator-item mn-badge mn-danger\" aria-hidden=\"true\">3</span><button class=\"mn-btn mn-btn-outline mn-btn-icon\" aria-label=\"Notifications, 3 unread\"><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></button></span>\n<span class=\"mn-indicator mn-indicator-bottom\"><span class=\"mn-indicator-item mn-indicator-dot mn-success\" aria-hidden=\"true\"></span><span class=\"mn-avatar\" role=\"img\" aria-label=\"Ana, online\">AP</span></span>\n<span class=\"mn-indicator\"><span class=\"mn-indicator-item mn-indicator-dot mn-indicator-pulse mn-primary\" aria-hidden=\"true\"></span><button class=\"mn-btn mn-btn-soft\"><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 13h5l1.5 2h5L16 13h5\"/><path d=\"M5 5h14l2 8v6a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1v-6Z\"/></svg> Inbox</button></span>"
    }
  ],
  "css": ".mn-indicator { position: relative; display: inline-flex; }\n.mn-indicator-item { position: absolute; z-index: 1; top: 0; right: 0; translate: 40% -40%; }\n.mn-indicator-bottom > .mn-indicator-item { top: auto; bottom: 0; translate: 40% 40%; }\n.mn-indicator-start > .mn-indicator-item { right: auto; left: 0; translate: -40% -40%; }\n.mn-indicator-inset > .mn-indicator-item { translate: 0 0; }\n.mn-indicator-item.mn-badge { height: 1.15rem; min-width: 1.15rem; padding: 0 .3rem; justify-content: center; font-size: .6875rem; box-shadow: 0 0 0 2px var(--mn-bg); }\n.mn-indicator-dot { width: .6rem; height: .6rem; border-radius: 50%; background: var(--_c, var(--mn-danger)); box-shadow: 0 0 0 2px var(--mn-bg); }\n.mn-indicator-pulse::after { content: \"\"; position: absolute; inset: 0; border-radius: inherit; background: inherit; animation: mn-indicator-pulse 1.6s var(--mn-ease) infinite; }\n@keyframes mn-indicator-pulse { from { transform: scale(1); opacity: .7; } to { transform: scale(2.4); opacity: 0; } }\n@media (prefers-reduced-motion: reduce) { .mn-indicator-pulse::after { animation: none; } }",
  "js": null,
  "install": {
    "css": "https://mian.ro/dist/mian.css",
    "js": null,
    "registryItem": "https://mian.ro/r/indicator.json"
  }
}