{"name":"scroll-area","title":"Scroll Area","description":"Augments native scroll functionality for custom, cross-browser styling.","installCommand":"bunx marko-ui add scroll-area -y","usageTags":"<ScrollArea>","importSnippet":"import ScrollArea from \"@/components/ui/scroll-area/scroll-area.marko\";","usageSnippet":"<ScrollArea class=\"h-[200px] w-[350px] rounded-md border p-4\">\n  Your scrollable content here.\n</ScrollArea>","tags":["ScrollArea"],"parts":[],"props":[{"name":"dir","type":"'ltr' | 'rtl' | undefined","required":false,"default":"ltr","description":"The document's text/writing direction."},{"name":"getRootNode","type":"(() => ShadowRoot | Document | Node) | undefined","required":false,"description":"A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron."},{"name":"horizontal","type":"boolean","required":false,"description":"Render a horizontal scrollbar + thumb. Defaults to false."},{"name":"ids","type":"ElementIds","required":false,"description":"The ids of the scroll area elements"},{"name":"vertical","type":"boolean","required":false,"description":"Render a vertical scrollbar + thumb. Defaults to true, matching Radix\nScrollArea's implicit vertical-only behavior when no <ScrollBar> is\ngiven. Set to false for horizontal-only rails (e.g. a category nav)\nwhere a vertical scrollbar/thumb would render as a stray pill even\nthough the container never scrolls vertically."}],"events":[],"keyboard":[],"accessibilityNotes":["The scrollable viewport is focusable (`tabindex=\"0\"`) even when its content has no focusable elements, so keyboard users can tab to it and scroll with arrow keys.","The scrollbar thumbs are draggable with a pointer but are not separately focusable — they are visual/pointer affordances layered over native keyboard scrolling on the viewport."],"examples":[{"id":"scroll-area-demo","title":"Vertical","source":"import ScrollArea from \"@marko-ui/shadcn/ui/scroll-area/scroll-area.marko\";\n\nstatic const tags = Array.from(\n  { length: 50 },\n  (_, index) => `v1.2.0-beta.${50 - index}`,\n);\n\n<ScrollArea class=\"h-72 w-48 rounded-md border\">\n  <div class=\"p-4\">\n    <h3 class=\"mb-4 text-sm leading-none font-medium\">Tags</h3>\n    <for|tag| of=tags>\n      <div class=\"text-sm\">\n        ${tag}\n      </div>\n      <div class=\"my-2 h-px bg-border\"/>\n    </for>\n  </div>\n</ScrollArea>","description":"A vertical scroll area with a synthetic, auto-hiding draggable thumb."},{"id":"scroll-area-horizontal-demo","title":"Horizontal","source":"import ScrollArea from \"@marko-ui/shadcn/ui/scroll-area/scroll-area.marko\";\n\nstatic const items = Array.from({ length: 10 }, (_, index) => index + 1);\n\n<ScrollArea horizontal class=\"w-96 rounded-md border whitespace-nowrap\">\n  <div class=\"flex w-max space-x-4 p-4\">\n    <for|item| of=items>\n      <div class=\"flex h-32 w-32 shrink-0 items-center justify-center rounded-md bg-muted text-sm\">\n        Item ${item}\n      </div>\n    </for>\n  </div>\n</ScrollArea>","description":"Pass `horizontal` to render a horizontal scrollbar and thumb alongside the vertical one."},{"id":"scroll-area-rtl","title":"RTL","source":"import ScrollArea from \"@marko-ui/shadcn/ui/scroll-area/scroll-area.marko\";\nimport Separator from \"@marko-ui/shadcn/ui/separator/separator.marko\";\n\nstatic const tags = Array.from(\n  { length: 50 },\n  (_, index) => `v1.2.0-beta.${50 - index}`,\n);\n\n<ScrollArea dir=\"rtl\" class=\"h-72 w-48 rounded-md border\">\n  <div class=\"p-4\">\n    <h3 class=\"mb-4 text-sm leading-none font-medium\">العلامات</h3>\n    <for|tag| of=tags>\n      <div class=\"text-sm\">\n        ${tag}\n      </div>\n      <Separator class=\"my-2\"/>\n    </for>\n  </div>\n</ScrollArea>","description":"ScrollArea restyles correctly under `dir=\"rtl\"` with no component changes."}],"importInstallCommand":"bun add @marko-ui/shadcn marko-zag","body":{},"nativeAttributes":"div","composition":"`ScrollArea` is a single tag; there is no separate `ScrollBar` part to compose. Internally it renders:\n\n```text\nScrollArea (root)\n└── viewport\n    └── content (your children)\n└── scrollbar (vertical, default on)\n    └── thumb\n└── scrollbar (horizontal, opt-in via `horizontal`)\n    └── thumb\n└── corner\n```\n\nPass `horizontal` to render the horizontal scrollbar and thumb alongside the vertical one, and `vertical={false}` to suppress the vertical scrollbar for horizontal-only rails."}