@commercetools/nimbus-mcp 0.1.0 → 2.11.0

package/data/docs/routes/components-layout-scrollarea.json

@@ -0,0 +1,428 @@
+{
+  "meta": {
+    "id": "Components-ScrollArea",
+    "title": "ScrollArea",
+    "exportName": "ScrollArea",
+    "description": "A scrollable container with custom-styled scrollbar overlays. Useful for constrained content areas like panels, sidebars, and dialog bodies.",
+    "lifecycleState": "Stable",
+    "order": 999,
+    "repoPath": "packages/nimbus/src/components/scroll-area/scroll-area.mdx",
+    "menu": [
+      "Components",
+      "Layout",
+      "ScrollArea"
+    ],
+    "route": "components/layout/scrollarea",
+    "tags": [
+      "component",
+      "scroll-area",
+      "layout",
+      "overflow",
+      "scrollbar"
+    ],
+    "toc": [
+      {
+        "value": "Overview",
+        "href": "#overview",
+        "depth": 2,
+        "numbering": [
+          1,
+          1
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Resources",
+        "href": "#resources",
+        "depth": 3,
+        "numbering": [
+          1,
+          1,
+          1
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Variables",
+        "href": "#variables",
+        "depth": 2,
+        "numbering": [
+          1,
+          2
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Orientation",
+        "href": "#orientation",
+        "depth": 3,
+        "numbering": [
+          1,
+          2,
+          1
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Visibility",
+        "href": "#visibility",
+        "depth": 3,
+        "numbering": [
+          1,
+          2,
+          2
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Size",
+        "href": "#size",
+        "depth": 3,
+        "numbering": [
+          1,
+          2,
+          3
+        ],
+        "parent": "root"
+      }
+    ],
+    "layout": "app-frame",
+    "tabs": [
+      {
+        "key": "overview",
+        "title": "Overview",
+        "order": 0
+      },
+      {
+        "key": "dev",
+        "title": "Implementation",
+        "order": 3
+      },
+      {
+        "key": "a11y",
+        "title": "Accessibility",
+        "order": 4
+      }
+    ]
+  },
+  "mdx": "\n## Overview\n\nScrollArea constrains content within a fixed region and provides themed\nscrollbar overlays that replace native browser scrollbars. The scrollbar\nappears on hover or during scrolling by default, keeping the interface clean\nuntil the user needs to scroll. The component is keyboard accessible — when\ncontent overflows, the area becomes focusable via Tab and scrollable with\narrow keys.\n\n### Resources\n\nDeep dive into implementation details and access the Nimbus design library.\n\n[Storybook](https://nimbus-storybook.vercel.app/?path=/docs/components-scrollarea--docs)\n[Chakra UI ScrollArea](https://chakra-ui.com/docs/components/scroll-area)\n\n## Variables\n\nGet familiar with the features.\n\n### Orientation\n\nControl which axes are scrollable. The default is vertical.\n\n```jsx live\nconst App = () => (\n  <Stack gap=\"600\">\n    <Box>\n      <Text fontSize=\"sm\" mb=\"200\" fontWeight=\"bold\">Vertical (default)</Text>\n      <ScrollArea maxH=\"120px\" w=\"300px\" variant=\"always\">\n        {Array.from({ length: 15 }, (_, i) => (\n          <Text key={i} fontSize=\"sm\">Line {i + 1}: Sample content for vertical scrolling.</Text>\n        ))}\n      </ScrollArea>\n    </Box>\n    <Box>\n      <Text fontSize=\"sm\" mb=\"200\" fontWeight=\"bold\">Horizontal</Text>\n      <ScrollArea maxW=\"300px\" orientation=\"horizontal\" variant=\"always\">\n        <Box whiteSpace=\"nowrap\">\n          {Array.from({ length: 5 }, (_, i) => (\n            <Text key={i} fontSize=\"sm\">{\"Horizontal content \".repeat(15)}</Text>\n          ))}\n        </Box>\n      </ScrollArea>\n    </Box>\n    <Box>\n      <Text fontSize=\"sm\" mb=\"200\" fontWeight=\"bold\">Both axes</Text>\n      <ScrollArea maxH=\"120px\" maxW=\"300px\" orientation=\"both\" variant=\"always\">\n        <Box whiteSpace=\"nowrap\">\n          {Array.from({ length: 15 }, (_, i) => (\n            <Text key={i} fontSize=\"sm\">{\"Bidirectional content \".repeat(15)}</Text>\n          ))}\n        </Box>\n      </ScrollArea>\n    </Box>\n  </Stack>\n);\n```\n\n### Visibility\n\nThe scrollbar can appear on hover (default) or stay permanently visible.\n\n```jsx live\nconst App = () => (\n  <Stack gap=\"600\" direction=\"row\">\n    <Box>\n      <Text fontSize=\"sm\" mb=\"200\" fontWeight=\"bold\">Hover (default)</Text>\n      <ScrollArea maxH=\"120px\" w=\"200px\">\n        {Array.from({ length: 15 }, (_, i) => (\n          <Text key={i} fontSize=\"sm\">Line {i + 1}</Text>\n        ))}\n      </ScrollArea>\n    </Box>\n    <Box>\n      <Text fontSize=\"sm\" mb=\"200\" fontWeight=\"bold\">Always visible</Text>\n      <ScrollArea maxH=\"120px\" w=\"200px\" variant=\"always\">\n        {Array.from({ length: 15 }, (_, i) => (\n          <Text key={i} fontSize=\"sm\">Line {i + 1}</Text>\n        ))}\n      </ScrollArea>\n    </Box>\n  </Stack>\n);\n```\n\n### Size\n\nControl the scrollbar thickness. Available sizes: `xs`, `sm` (default), `md`, `lg`.\n\n```jsx live\nconst App = () => (\n  <Stack gap=\"600\" direction=\"row\" flexWrap=\"wrap\">\n    {[\"xs\", \"sm\", \"md\", \"lg\"].map((size) => (\n      <Box key={size}>\n        <Text fontSize=\"sm\" mb=\"200\" fontWeight=\"bold\">{size}</Text>\n        <ScrollArea maxH=\"120px\" w=\"180px\" size={size} variant=\"always\">\n          {Array.from({ length: 15 }, (_, i) => (\n            <Text key={i} fontSize=\"sm\">Line {i + 1}</Text>\n          ))}\n        </ScrollArea>\n      </Box>\n    ))}\n  </Stack>\n);\n```\n",
+  "views": {
+    "overview": {
+      "mdx": "\n## Overview\n\nScrollArea constrains content within a fixed region and provides themed\nscrollbar overlays that replace native browser scrollbars. The scrollbar\nappears on hover or during scrolling by default, keeping the interface clean\nuntil the user needs to scroll. The component is keyboard accessible — when\ncontent overflows, the area becomes focusable via Tab and scrollable with\narrow keys.\n\n### Resources\n\nDeep dive into implementation details and access the Nimbus design library.\n\n[Storybook](https://nimbus-storybook.vercel.app/?path=/docs/components-scrollarea--docs)\n[Chakra UI ScrollArea](https://chakra-ui.com/docs/components/scroll-area)\n\n## Variables\n\nGet familiar with the features.\n\n### Orientation\n\nControl which axes are scrollable. The default is vertical.\n\n```jsx live\nconst App = () => (\n  <Stack gap=\"600\">\n    <Box>\n      <Text fontSize=\"sm\" mb=\"200\" fontWeight=\"bold\">Vertical (default)</Text>\n      <ScrollArea maxH=\"120px\" w=\"300px\" variant=\"always\">\n        {Array.from({ length: 15 }, (_, i) => (\n          <Text key={i} fontSize=\"sm\">Line {i + 1}: Sample content for vertical scrolling.</Text>\n        ))}\n      </ScrollArea>\n    </Box>\n    <Box>\n      <Text fontSize=\"sm\" mb=\"200\" fontWeight=\"bold\">Horizontal</Text>\n      <ScrollArea maxW=\"300px\" orientation=\"horizontal\" variant=\"always\">\n        <Box whiteSpace=\"nowrap\">\n          {Array.from({ length: 5 }, (_, i) => (\n            <Text key={i} fontSize=\"sm\">{\"Horizontal content \".repeat(15)}</Text>\n          ))}\n        </Box>\n      </ScrollArea>\n    </Box>\n    <Box>\n      <Text fontSize=\"sm\" mb=\"200\" fontWeight=\"bold\">Both axes</Text>\n      <ScrollArea maxH=\"120px\" maxW=\"300px\" orientation=\"both\" variant=\"always\">\n        <Box whiteSpace=\"nowrap\">\n          {Array.from({ length: 15 }, (_, i) => (\n            <Text key={i} fontSize=\"sm\">{\"Bidirectional content \".repeat(15)}</Text>\n          ))}\n        </Box>\n      </ScrollArea>\n    </Box>\n  </Stack>\n);\n```\n\n### Visibility\n\nThe scrollbar can appear on hover (default) or stay permanently visible.\n\n```jsx live\nconst App = () => (\n  <Stack gap=\"600\" direction=\"row\">\n    <Box>\n      <Text fontSize=\"sm\" mb=\"200\" fontWeight=\"bold\">Hover (default)</Text>\n      <ScrollArea maxH=\"120px\" w=\"200px\">\n        {Array.from({ length: 15 }, (_, i) => (\n          <Text key={i} fontSize=\"sm\">Line {i + 1}</Text>\n        ))}\n      </ScrollArea>\n    </Box>\n    <Box>\n      <Text fontSize=\"sm\" mb=\"200\" fontWeight=\"bold\">Always visible</Text>\n      <ScrollArea maxH=\"120px\" w=\"200px\" variant=\"always\">\n        {Array.from({ length: 15 }, (_, i) => (\n          <Text key={i} fontSize=\"sm\">Line {i + 1}</Text>\n        ))}\n      </ScrollArea>\n    </Box>\n  </Stack>\n);\n```\n\n### Size\n\nControl the scrollbar thickness. Available sizes: `xs`, `sm` (default), `md`, `lg`.\n\n```jsx live\nconst App = () => (\n  <Stack gap=\"600\" direction=\"row\" flexWrap=\"wrap\">\n    {[\"xs\", \"sm\", \"md\", \"lg\"].map((size) => (\n      <Box key={size}>\n        <Text fontSize=\"sm\" mb=\"200\" fontWeight=\"bold\">{size}</Text>\n        <ScrollArea maxH=\"120px\" w=\"180px\" size={size} variant=\"always\">\n          {Array.from({ length: 15 }, (_, i) => (\n            <Text key={i} fontSize=\"sm\">Line {i + 1}</Text>\n          ))}\n        </ScrollArea>\n      </Box>\n    ))}\n  </Stack>\n);\n```\n",
+      "toc": [
+        {
+          "value": "Overview",
+          "href": "#overview",
+          "depth": 2,
+          "numbering": [
+            1,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Resources",
+          "href": "#resources",
+          "depth": 3,
+          "numbering": [
+            1,
+            1,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Variables",
+          "href": "#variables",
+          "depth": 2,
+          "numbering": [
+            1,
+            2
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Orientation",
+          "href": "#orientation",
+          "depth": 3,
+          "numbering": [
+            1,
+            2,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Visibility",
+          "href": "#visibility",
+          "depth": 3,
+          "numbering": [
+            1,
+            2,
+            2
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Size",
+          "href": "#size",
+          "depth": 3,
+          "numbering": [
+            1,
+            2,
+            3
+          ],
+          "parent": "root"
+        }
+      ]
+    },
+    "a11y": {
+      "mdx": "\n## Accessibility\n\nAccessibility ensures that digital content and functionality are usable by\neveryone, including people with disabilities, by addressing visual, auditory,\ncognitive, and physical limitations.\n\n```jsx live\nconst App = () => (\n  <ScrollArea maxH=\"200px\" w=\"400px\" role=\"region\" aria-label=\"Example content\">\n    {Array.from({ length: 20 }, (_, i) => (\n      <Text key={i} fontSize=\"sm\">\n        Line {i + 1}: Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n      </Text>\n    ))}\n  </ScrollArea>\n);\n```\n\n### Accessibility standards\n\n- **Keyboard focusable:** The scrollable viewport receives `tabIndex={0}`\n  when content overflows on either axis, making it reachable via Tab and\n  scrollable with Arrow keys, Page Up/Down, Home, and End.\n- **Conditional focusability:** When content does not overflow, `tabIndex` is\n  not set, so the container does not appear in the Tab order unnecessarily.\n- **Keyboard-only focus ring:** A Nimbus focus ring appears on the root\n  element only during keyboard navigation (`:focus-visible`), not on mouse\n  click.\n- **Decorative scrollbars:** The custom scrollbar overlays are purely visual.\n  Actual scrolling is handled by the browser's native scroll mechanism.\n- **ARIA landmarks:** When the scroll area represents a distinct page section,\n  consider adding `role=\"region\"` with `aria-label` or `aria-labelledby` to\n  create a named landmark for screen reader navigation.\n- **No keyboard trap:** Standard browser tab order is maintained. Focus moves\n  naturally into and out of the scroll area.\n",
+      "toc": [
+        {
+          "value": "Accessibility",
+          "href": "#accessibility",
+          "depth": 2,
+          "numbering": [
+            1,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Accessibility standards",
+          "href": "#accessibility-standards",
+          "depth": 3,
+          "numbering": [
+            1,
+            1,
+            1
+          ],
+          "parent": "root"
+        }
+      ]
+    },
+    "dev": {
+      "mdx": "\n## Getting started\n\n### Import\n\n```tsx\nimport { ScrollArea, type ScrollAreaProps } from '@commercetools/nimbus';\n```\n\n### Basic usage\n\nWrap content in a `ScrollArea` with a size constraint. The scrollbar appears on\nhover or during scrolling:\n\n```jsx live-dev\nconst App = () => (\n  <ScrollArea maxH=\"200px\" w=\"400px\">\n    {Array.from({ length: 20 }, (_, i) => (\n      <Text key={i} fontSize=\"sm\">\n        Line {i + 1}: Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n      </Text>\n    ))}\n  </ScrollArea>\n)\n```\n\n## Usage examples\n\n### Orientation\n\nUse the `orientation` prop to control which scrollbar axes are rendered:\n\n```jsx live-dev\nconst App = () => (\n  <Stack gap=\"600\">\n    <Box>\n      <Text fontSize=\"sm\" mb=\"200\" fontWeight=\"bold\">vertical (default)</Text>\n      <ScrollArea maxH=\"120px\" w=\"300px\" variant=\"always\">\n        {Array.from({ length: 15 }, (_, i) => (\n          <Text key={i} fontSize=\"sm\">Line {i + 1}</Text>\n        ))}\n      </ScrollArea>\n    </Box>\n    <Box>\n      <Text fontSize=\"sm\" mb=\"200\" fontWeight=\"bold\">horizontal</Text>\n      <ScrollArea maxW=\"300px\" orientation=\"horizontal\" variant=\"always\">\n        <Box whiteSpace=\"nowrap\">\n          {Array.from({ length: 5 }, (_, i) => (\n            <Text key={i} fontSize=\"sm\">{\"Long horizontal content \".repeat(15)}</Text>\n          ))}\n        </Box>\n      </ScrollArea>\n    </Box>\n    <Box>\n      <Text fontSize=\"sm\" mb=\"200\" fontWeight=\"bold\">both</Text>\n      <ScrollArea maxH=\"120px\" maxW=\"300px\" orientation=\"both\" variant=\"always\">\n        <Box whiteSpace=\"nowrap\">\n          {Array.from({ length: 15 }, (_, i) => (\n            <Text key={i} fontSize=\"sm\">{\"Both axes content \".repeat(15)}</Text>\n          ))}\n        </Box>\n      </ScrollArea>\n    </Box>\n  </Stack>\n)\n```\n\n### Content padding\n\nPadding props on `ScrollArea` are forwarded to the content area inside the\nscrollable viewport, so `p`, `px`, `py`, etc. work as expected:\n\n```jsx live-dev\nconst App = () => (\n  <ScrollArea maxH=\"200px\" w=\"400px\" bg=\"neutral.2\" borderRadius=\"300\" variant=\"always\" p=\"200\">\n    {Array.from({ length: 20 }, (_, i) => (\n      <Text key={i} fontSize=\"sm\">\n        Line {i + 1}: Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n      </Text>\n    ))}\n  </ScrollArea>\n)\n```\n\n### Programmatic scroll access\n\n#### Using `viewportRef`\n\nUse the `viewportRef` prop to get a direct reference to the scrollable viewport\nelement. This is the recommended approach when you need to programmatically\nscroll, attach scroll event listeners, or read scroll position. The ref gives\nyou direct access to the native DOM `scrollTo()` method:\n\n```tsx\nconst viewportRef = useRef<HTMLDivElement>(null);\n\n<ScrollArea viewportRef={viewportRef} maxH=\"400px\">\n  {content}\n</ScrollArea>\n\n// Native DOM scrollTo — same API as any scrollable element\nviewportRef.current.scrollTo({ top: 0, behavior: 'smooth' })\n// Or: viewportRef.current.addEventListener('scroll', handler)\n```\n\n#### Using `ids`\n\nWhen ref-forwarding is impractical (e.g., the scroll container is rendered in a\ndifferent component tree), use the `ids` prop to set a known ID on the viewport\nelement for `getElementById` access:\n\n```tsx\n<ScrollArea ids={{ viewport: 'my-scroll-viewport' }} maxH=\"400px\">\n  {content}\n</ScrollArea>\n\n// Later: document.getElementById('my-scroll-viewport').scrollTop\n```\n\n#### Using `useScrollArea` (external control)\n\nWhen you need to read scroll state or call scroll methods from *outside* the\n`ScrollArea` tree (e.g., in a parent component), create the machine externally\nwith `useScrollArea` and pass it via the `value` prop. Unlike `viewportRef`\n(which gives you a native DOM element), the `useScrollArea` hook returns a\nstate-machine API with scroll state and convenience methods:\n\n```tsx\nimport { ScrollArea, useScrollArea } from '@commercetools/nimbus';\n\nfunction ParentComponent() {\n  const scrollArea = useScrollArea();\n\n  return (\n    <>\n      <button onClick={() => scrollArea.scrollToEdge({ edge: 'top' })}>\n        Scroll to top\n      </button>\n      <p>Has vertical overflow: {String(scrollArea.hasOverflowY)}</p>\n      <ScrollArea maxH=\"400px\" value={scrollArea}>\n        {content}\n      </ScrollArea>\n    </>\n  );\n}\n```\n\nThe returned object exposes state (`hasOverflowX`, `hasOverflowY`, `isAtTop`,\n`isAtBottom`, `isAtLeft`, `isAtRight`) and methods (`scrollTo()`,\n`scrollToEdge()`, `getScrollProgress()`).\n\n#### Using `useScrollAreaContext` (internal access)\n\nFor components rendered *inside* a `ScrollArea`, the `useScrollAreaContext` hook\nreads the existing machine from React context — no `value` prop needed:\n\n```tsx\nimport { useScrollAreaContext } from '@commercetools/nimbus';\n\nfunction ScrollToTopButton() {\n  const { scrollToEdge, isAtTop } = useScrollAreaContext();\n  if (isAtTop) return null;\n  return <Button onPress={() => scrollToEdge({ edge: 'top', behavior: 'smooth' })}>Back to top</Button>;\n}\n```\n\n## Component requirements\n\n- The component must have a size constraint (`maxH`, `maxW`, `h`, `w`) for scrolling to occur\n\n## Accessibility\n\nThe ScrollArea component ensures keyboard accessibility:\n\n- **Keyboard focusable**: The scrollable viewport receives `tabIndex={0}` when content overflows, making it reachable via Tab\n- **Focus ring**: A Nimbus focus ring appears on the root element when the viewport receives keyboard focus (via `:focus-visible`)\n- **ARIA landmarks**: When the scroll area represents a distinct page section, consider adding `role=\"region\"` with an `aria-label` or `aria-labelledby` to create a named landmark for screen reader navigation\n\n## API reference\n\n<PropsTable id=\"ScrollArea\" />\n\n## Testing your implementation\n\nThese examples demonstrate how to test your implementation when using ScrollArea within your application. As the component's internal functionality is already tested by Nimbus, these patterns help you verify your integration and application-specific logic.\n\n### Basic Usage\n\nBasic vertical scrollable container\n\n```tsx\nimport React from \"react\";\nimport { describe, it, expect } from \"vitest\";\nimport { render, screen } from \"@testing-library/react\";\nimport {\n  ScrollArea,\n  NimbusProvider,\n  useScrollArea,\n  Box,\n  Text,\n} from \"@commercetools/nimbus\";\n\ndescribe(\"ScrollArea - Basic usage\", () => {\n  it(\"renders children inside a scrollable container\", () => {\n    render(\n      <NimbusProvider>\n        <ScrollArea maxH=\"200px\">\n          <OverflowingContent />\n        </ScrollArea>\n      </NimbusProvider>\n    );\n\n    expect(screen.getByText(\"Line 1\")).toBeInTheDocument();\n  });\n\n  it(\"renders with always-visible scrollbars\", () => {\n    const { container } = render(\n      <NimbusProvider>\n        <ScrollArea maxH=\"200px\" variant=\"always\">\n          <OverflowingContent />\n        </ScrollArea>\n      </NimbusProvider>\n    );\n\n    expect(\n      container.querySelector('[data-part=\"scrollbar\"]')\n    ).toBeInTheDocument();\n  });\n});\n```\n\n### Orientation\n\nControlling which scrollbar axes render\n\n```tsx\nimport React from \"react\";\nimport { describe, it, expect } from \"vitest\";\nimport { render, screen } from \"@testing-library/react\";\nimport {\n  ScrollArea,\n  NimbusProvider,\n  useScrollArea,\n  Box,\n  Text,\n} from \"@commercetools/nimbus\";\n\ndescribe(\"ScrollArea - Orientation\", () => {\n  it(\"renders horizontal scrollbar\", () => {\n    const { container } = render(\n      <NimbusProvider>\n        <ScrollArea maxW=\"300px\" orientation=\"horizontal\">\n          <Box whiteSpace=\"nowrap\">\n            <Text>{\"Wide content \".repeat(30)}</Text>\n          </Box>\n        </ScrollArea>\n      </NimbusProvider>\n    );\n\n    const scrollbar = container.querySelector('[data-part=\"scrollbar\"]');\n    expect(scrollbar).toHaveAttribute(\"data-orientation\", \"horizontal\");\n  });\n\n  it(\"renders both axes with a corner\", () => {\n    const { container } = render(\n      <NimbusProvider>\n        <ScrollArea maxH=\"200px\" maxW=\"300px\" orientation=\"both\">\n          <Box whiteSpace=\"nowrap\">\n            <OverflowingContent />\n          </Box>\n        </ScrollArea>\n      </NimbusProvider>\n    );\n\n    const scrollbars = container.querySelectorAll('[data-part=\"scrollbar\"]');\n    expect(scrollbars).toHaveLength(2);\n    expect(container.querySelector('[data-part=\"corner\"]')).toBeInTheDocument();\n  });\n});\n```\n\n### Programmatic scroll access\n\nAccessing the scrollable viewport via ref or external hook\n\n```tsx\nimport React from \"react\";\nimport { describe, it, expect } from \"vitest\";\nimport { render, screen } from \"@testing-library/react\";\nimport {\n  ScrollArea,\n  NimbusProvider,\n  useScrollArea,\n  Box,\n  Text,\n} from \"@commercetools/nimbus\";\n\ndescribe(\"ScrollArea - Programmatic access\", () => {\n  it(\"forwards a ref to the viewport via viewportRef\", () => {\n    const ref = React.createRef<HTMLDivElement>();\n\n    render(\n      <NimbusProvider>\n        <ScrollArea maxH=\"200px\" viewportRef={ref}>\n          <OverflowingContent />\n        </ScrollArea>\n      </NimbusProvider>\n    );\n\n    expect(ref.current).toHaveAttribute(\"data-part\", \"viewport\");\n    expect(typeof ref.current?.scrollTo).toBe(\"function\");\n  });\n\n  it(\"supports external control via useScrollArea + value prop\", () => {\n    const ExternalControl = () => {\n      const scrollArea = useScrollArea();\n      return (\n        <ScrollArea maxH=\"200px\" value={scrollArea}>\n          <OverflowingContent />\n        </ScrollArea>\n      );\n    };\n\n    render(\n      <NimbusProvider>\n        <ExternalControl />\n      </NimbusProvider>\n    );\n\n    expect(screen.getByText(\"Line 1\")).toBeInTheDocument();\n  });\n});\n```\n\n### Content Padding\n\nApplying padding via an inner Box wrapper\n\n```tsx\nimport React from \"react\";\nimport { describe, it, expect } from \"vitest\";\nimport { render, screen } from \"@testing-library/react\";\nimport {\n  ScrollArea,\n  NimbusProvider,\n  useScrollArea,\n  Box,\n  Text,\n} from \"@commercetools/nimbus\";\n\ndescribe(\"ScrollArea - Content padding\", () => {\n  it(\"renders padded content via a nested Box\", () => {\n    render(\n      <NimbusProvider>\n        <ScrollArea maxH=\"200px\">\n          <Box p=\"200\">\n            <OverflowingContent />\n          </Box>\n        </ScrollArea>\n      </NimbusProvider>\n    );\n\n    expect(screen.getByText(\"Line 1\")).toBeInTheDocument();\n  });\n});\n```\n\n\n## Resources\n\n- [Storybook](https://nimbus-storybook.vercel.app/?path=/docs/components-scrollarea--docs)\n- [Chakra UI ScrollArea](https://chakra-ui.com/docs/components/scroll-area)\n",
+      "toc": [
+        {
+          "value": "Getting started",
+          "href": "#getting-started",
+          "depth": 2,
+          "numbering": [
+            1,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Import",
+          "href": "#import",
+          "depth": 3,
+          "numbering": [
+            1,
+            1,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Basic usage",
+          "href": "#basic-usage",
+          "depth": 3,
+          "numbering": [
+            1,
+            1,
+            2
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Usage examples",
+          "href": "#usage-examples",
+          "depth": 2,
+          "numbering": [
+            1,
+            2
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Orientation",
+          "href": "#orientation",
+          "depth": 3,
+          "numbering": [
+            1,
+            2,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Content padding",
+          "href": "#content-padding",
+          "depth": 3,
+          "numbering": [
+            1,
+            2,
+            2
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Programmatic scroll access",
+          "href": "#programmatic-scroll-access",
+          "depth": 3,
+          "numbering": [
+            1,
+            2,
+            3
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Using viewportRef",
+          "href": "#using-viewportref",
+          "depth": 4,
+          "numbering": [
+            1,
+            2,
+            3,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Using ids",
+          "href": "#using-ids",
+          "depth": 4,
+          "numbering": [
+            1,
+            2,
+            3,
+            2
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Using useScrollArea (external control)",
+          "href": "#using-usescrollarea-external-control",
+          "depth": 4,
+          "numbering": [
+            1,
+            2,
+            3,
+            3
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Using useScrollAreaContext (internal access)",
+          "href": "#using-usescrollareacontext-internal-access",
+          "depth": 4,
+          "numbering": [
+            1,
+            2,
+            3,
+            4
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Component requirements",
+          "href": "#component-requirements",
+          "depth": 2,
+          "numbering": [
+            1,
+            3
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Accessibility",
+          "href": "#accessibility",
+          "depth": 2,
+          "numbering": [
+            1,
+            4
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "API reference",
+          "href": "#api-reference",
+          "depth": 2,
+          "numbering": [
+            1,
+            5
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Testing your implementation",
+          "href": "#testing-your-implementation",
+          "depth": 2,
+          "numbering": [
+            1,
+            6
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Basic Usage",
+          "href": "#basic-usage-1",
+          "depth": 3,
+          "numbering": [
+            1,
+            6,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Orientation",
+          "href": "#orientation-1",
+          "depth": 3,
+          "numbering": [
+            1,
+            6,
+            2
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Programmatic scroll access",
+          "href": "#programmatic-scroll-access-1",
+          "depth": 3,
+          "numbering": [
+            1,
+            6,
+            3
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Content Padding",
+          "href": "#content-padding-1",
+          "depth": 3,
+          "numbering": [
+            1,
+            6,
+            4
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Resources",
+          "href": "#resources",
+          "depth": 2,
+          "numbering": [
+            1,
+            7
+          ],
+          "parent": "root"
+        }
+      ]
+    }
+  }
+}