{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "scroll-area",
  "type": "registry:ui",
  "title": "Scroll area (MIAN)",
  "description": "A scrolling region with thin scrollbars and shadows that appear only where more content is hidden.",
  "categories": [
    "layout & utilities",
    "scroll area",
    "scrollable",
    "overflow",
    "scroll shadow"
  ],
  "registryDependencies": [
    "https://mian.ro/r/mian-base.json"
  ],
  "files": [
    {
      "path": "mian/components/scroll-area.css",
      "type": "registry:file",
      "target": "mian/components/scroll-area.css",
      "content": ".mn-scroll-area {\n  --_bg: var(--mn-card);\n  overflow: auto; overscroll-behavior: contain;\n  max-height: var(--h, 16rem);\n  border: var(--mn-border-w) solid var(--mn-border); border-radius: var(--mn-radius-box);\n  scrollbar-width: thin; scrollbar-color: color-mix(in oklab, var(--mn-fg) 25%, transparent) transparent;\n  /* Scroll shadows: the covers move with the content, the shadows stay. */\n  background:\n    linear-gradient(var(--_bg) 30%, transparent) center top / 100% 2rem no-repeat local,\n    linear-gradient(transparent, var(--_bg) 70%) center bottom / 100% 2rem no-repeat local,\n    radial-gradient(farthest-side at 50% 0, color-mix(in oklab, var(--mn-fg) 14%, transparent), transparent) center top / 100% .6rem no-repeat scroll,\n    radial-gradient(farthest-side at 50% 100%, color-mix(in oklab, var(--mn-fg) 14%, transparent), transparent) center bottom / 100% .6rem no-repeat scroll,\n    var(--_bg);\n}\n.mn-scroll-area:focus-visible { outline: none; box-shadow: var(--mn-focus); }\n.mn-scroll-area::-webkit-scrollbar { width: 8px; height: 8px; }\n.mn-scroll-area::-webkit-scrollbar-thumb { border: 2px solid transparent; border-radius: 999px; background: color-mix(in oklab, var(--mn-fg) 25%, transparent) padding-box; }\n.mn-scroll-area-x { max-height: none; overflow-y: hidden; white-space: nowrap; }"
    },
    {
      "path": "mian/examples/scroll-area.html",
      "type": "registry:file",
      "target": "mian/examples/scroll-area.html",
      "content": "<!-- Release notes -->\n<div class=\"mn-scroll-area\" tabindex=\"0\" role=\"region\" aria-label=\"Release notes\" style=\"--h:13rem;max-width:24rem\">\n  <div class=\"mn-card-body\">\n    <p style=\"margin:0 0 .9rem\"><strong>1.3</strong><br><span class=\"mn-muted\">More noodles and components</span></p>\n    <p style=\"margin:0 0 .9rem\"><strong>1.2</strong><br><span class=\"mn-muted\">Design languages for every noodle</span></p>\n    <p style=\"margin:0 0 .9rem\"><strong>1.1</strong><br><span class=\"mn-muted\">Contact form and admin</span></p>\n    <p style=\"margin:0 0 .9rem\"><strong>1.0</strong><br><span class=\"mn-muted\">The component library</span></p>\n    <p style=\"margin:0 0 .9rem\"><strong>0.9</strong><br><span class=\"mn-muted\">Noodles become design languages</span></p>\n    <p style=\"margin:0 0 .9rem\"><strong>0.8</strong><br><span class=\"mn-muted\">Charts</span></p>\n    <p style=\"margin:0 0 .9rem\"><strong>0.7</strong><br><span class=\"mn-muted\">First public version</span></p>\n  </div>\n</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/scroll-area",
  "meta": {
    "mian": {
      "license": "LicenseRef-MIAN-1.0",
      "requiresJs": false,
      "classes": [
        "mn-scroll-area",
        "mn-scroll-area-x"
      ],
      "accessibility": [
        "Make it focusable (tabindex=\"0\") with role=\"region\" and an aria-label so keyboard users can scroll it.",
        "The shadows are pure CSS (background-attachment: local), no script, no layout shift."
      ],
      "intents": [
        "scrollable panel",
        "overflow region",
        "scroll shadows"
      ]
    }
  }
}