{
  "$schema": "https://mian.ro/schema/v2/registry.json",
  "schemaVersion": "2.0.0",
  "generatedAt": "2026-10-02T13:14:06.957Z",
  "id": "scroll-area",
  "name": "Scroll area",
  "category": "Layout & utilities",
  "description": "A scrolling region with thin scrollbars and shadows that appear only where more content is hidden.",
  "tags": [
    "scroll area",
    "scrollable",
    "overflow",
    "scroll shadow",
    "scrollbar"
  ],
  "requiresJs": false,
  "license": "LicenseRef-MIAN-1.0",
  "composition": {
    "role": null,
    "intents": [
      "scrollable panel",
      "overflow region",
      "scroll shadows"
    ],
    "prominence": null,
    "density": null,
    "worksAfter": [],
    "worksBefore": [],
    "alternatives": [],
    "avoid": null
  },
  "url": "https://mian.ro/components/scroll-area",
  "markdownUrl": "https://mian.ro/ai/components/scroll-area.md",
  "classes": [
    {
      "name": "mn-scroll-area",
      "description": "The region. Set --h for its maximum height."
    },
    {
      "name": "mn-scroll-area-x",
      "description": "Horizontal scrolling."
    }
  ],
  "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."
  ],
  "examples": [
    {
      "title": "Release notes",
      "description": null,
      "html": "<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>"
    }
  ],
  "css": ".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; }",
  "js": null,
  "install": {
    "css": "https://mian.ro/dist/mian.css",
    "js": null,
    "registryItem": "https://mian.ro/r/scroll-area.json"
  }
}