{
  "$schema": "https://mian.ro/schema/v2/registry.json",
  "schemaVersion": "2.0.0",
  "generatedAt": "2026-10-02T13:14:06.957Z",
  "id": "stories-bar",
  "name": "Stories bar",
  "category": "Navigation",
  "description": "A scrolling row of avatars with a ring for new stories and a grey ring for seen ones.",
  "tags": [
    "stories",
    "avatars",
    "status",
    "highlights",
    "social",
    "instagram",
    "reels",
    "channels"
  ],
  "requiresJs": false,
  "license": "LicenseRef-MIAN-1.0",
  "composition": {
    "role": null,
    "intents": [
      "stories",
      "story avatars",
      "social stories row"
    ],
    "prominence": null,
    "density": null,
    "worksAfter": [],
    "worksBefore": [],
    "alternatives": [],
    "avoid": null
  },
  "url": "https://mian.ro/components/stories-bar",
  "markdownUrl": "https://mian.ro/ai/components/stories-bar.md",
  "classes": [
    {
      "name": "mn-storybar",
      "description": "The row (<ul>)."
    },
    {
      "name": "mn-storybar-ring",
      "description": "The ring around an avatar; data-seen on the link makes it grey."
    },
    {
      "name": "mn-storybar-label",
      "description": "The name under it."
    }
  ],
  "accessibility": [
    "Each item is a link or button whose name says whose story it is and whether it is new (“Ana, new story”).",
    "The row scrolls horizontally with the keyboard focus."
  ],
  "examples": [
    {
      "title": "Stories",
      "description": null,
      "html": "<ul class=\"mn-storybar\" style=\"max-width:34rem\">\n  <li><a href=\"#\" aria-label=\"Ana, new story\"><span class=\"mn-storybar-ring\"><span class=\"mn-avatar\" aria-hidden=\"true\">AP</span></span><span class=\"mn-storybar-label\" aria-hidden=\"true\">Ana</span></a></li><li><a href=\"#\" aria-label=\"Jonas, new story\"><span class=\"mn-storybar-ring\"><span class=\"mn-avatar\" aria-hidden=\"true\">JO</span></span><span class=\"mn-storybar-label\" aria-hidden=\"true\">Jonas</span></a></li><li><a href=\"#\" aria-label=\"Ilinca, new story\"><span class=\"mn-storybar-ring\"><span class=\"mn-avatar\" aria-hidden=\"true\">IS</span></span><span class=\"mn-storybar-label\" aria-hidden=\"true\">Ilinca</span></a></li><li><a href=\"#\" data-seen aria-label=\"Lea\"><span class=\"mn-storybar-ring\"><span class=\"mn-avatar\" aria-hidden=\"true\">LK</span></span><span class=\"mn-storybar-label\" aria-hidden=\"true\">Lea</span></a></li><li><a href=\"#\" data-seen aria-label=\"Maren\"><span class=\"mn-storybar-ring\"><span class=\"mn-avatar\" aria-hidden=\"true\">MR</span></span><span class=\"mn-storybar-label\" aria-hidden=\"true\">Maren</span></a></li><li><a href=\"#\" data-seen aria-label=\"Radu\"><span class=\"mn-storybar-ring\"><span class=\"mn-avatar\" aria-hidden=\"true\">RE</span></span><span class=\"mn-storybar-label\" aria-hidden=\"true\">Radu</span></a></li><li><a href=\"#\" data-seen aria-label=\"Kenji\"><span class=\"mn-storybar-ring\"><span class=\"mn-avatar\" aria-hidden=\"true\">KM</span></span><span class=\"mn-storybar-label\" aria-hidden=\"true\">Kenji</span></a></li>\n</ul>"
    }
  ],
  "css": ".mn-storybar { display: flex; gap: .9rem; margin: 0; padding: .3rem .25rem .5rem; list-style: none; overflow-x: auto; scrollbar-width: none; }\n.mn-storybar::-webkit-scrollbar { display: none; }\n.mn-storybar a, .mn-storybar button { display: grid; justify-items: center; gap: .4rem; width: 4.5rem; padding: 0; border: 0; background: none; color: var(--mn-fg); font: 500 .75rem/1.2 var(--mn-font); text-decoration: none; cursor: pointer; }\n.mn-storybar-ring { padding: 3.5px; border-radius: 50%; background: conic-gradient(from 200deg, var(--mn-accent), var(--mn-primary), var(--mn-accent)); }\n.mn-storybar-ring > .mn-avatar { --_s: 3.4rem; box-shadow: 0 0 0 3px var(--mn-bg); }\n.mn-storybar [data-seen] .mn-storybar-ring { background: var(--mn-input); }\n.mn-storybar-label { width: 100%; overflow: hidden; text-align: center; text-overflow: ellipsis; white-space: nowrap; }",
  "js": null,
  "install": {
    "css": "https://mian.ro/dist/mian.css",
    "js": null,
    "registryItem": "https://mian.ro/r/stories-bar.json"
  }
}