{
  "tag": "ed-scroller",
  "kind": "component",
  "summary": "Scrollers create an accessible container while providing visual cues that help users identify and navigate\nthrough content that scrolls.",
  "status": "experimental",
  "since": "1.0",
  "docs": "https://test-apps.eurodata.de/a/eurodata-ui/docs/components/scroller/",
  "usage": "https://test-apps.eurodata.de/a/eurodata-ui/docs/components/scroller/usage/",
  "playwright": "getByTestId('…')",
  "dependencies": [],
  "use": [
    "Wide content that must scroll inside its own box — a wide table, a comparison strip, a code block — instead of letting it stretch or overflow the page",
    "A long list of notes or log lines in a fixed-height box, keeping the rest of the page in place",
    "A row of tags or buttons wider than its container, so the user scrolls instead of the layout breaking"
  ],
  "notFor": [
    {
      "when": "The page's main vertical flow",
      "instead": "the page itself, which scrolls — reserve inner scroll areas for genuinely bounded regions"
    },
    {
      "when": "Stepping through items one at a time with paging affordances",
      "instead": "[Carousel](https://test-apps.eurodata.de/a/eurodata-ui/docs/components/carousel)"
    }
  ],
  "rules": [
    {
      "id": "scroller/keep-cues",
      "rule": "Keep the edge shadows on — they are the cue that more content exists beyond the fold — and never hide both the scrollbar and the shadows.",
      "why": "Without either cue, overflowing content becomes undiscoverable. A plain overflow box gives no hint that content continues and is unreachable by keyboard; the scroller exists to fix both, and stripping its scrollbar and its shadows rebuilds the invisible overflow it was meant to prevent.",
      "check": "error"
    },
    {
      "id": "scroller/label",
      "rule": "Replace the generic built-in accessible name (\"scrollable region\") with a label naming what scrolls when the region's content is not self-describing."
    },
    {
      "id": "scroller/no-nesting",
      "rule": "Never nest scrollers inside scrollers.",
      "why": "Stacked scroll areas trap the wheel and disorient keyboard users.",
      "check": "error"
    }
  ],
  "api": {
    "attributes": [
      {
        "name": "orientation",
        "property": "orientation",
        "type": "'horizontal' | 'vertical'",
        "default": "'horizontal'",
        "description": "The scroller's orientation."
      },
      {
        "name": "without-scrollbar",
        "property": "withoutScrollbar",
        "type": "boolean",
        "default": "false",
        "description": "Removes the visible scrollbar."
      },
      {
        "name": "without-shadow",
        "property": "withoutShadow",
        "type": "boolean",
        "default": "false",
        "description": "Removes the shadows."
      },
      {
        "name": "aria-label",
        "property": "ariaLabel",
        "type": "null | string",
        "default": "null",
        "description": "The scroll region's accessible name, replacing the localized \"Scrollable region\" default —\nset it to tell multiple scrollers on one page apart. Mirrored onto the internal region node,\nwhere the role lives — an aria-label left on the host alone would sit on a role-less element\nand be ignored by assistive tech (house pattern: ed-checkbox)."
      },
      {
        "name": "dir",
        "property": "dir",
        "type": "string"
      },
      {
        "name": "lang",
        "property": "lang",
        "type": "string"
      }
    ],
    "properties": [],
    "methods": [],
    "events": [],
    "slots": [
      {
        "name": "",
        "description": "The content to show inside the scroller."
      }
    ],
    "cssProperties": [
      {
        "name": "--ed-scroller-shadow-color",
        "default": "var(--ed-color-surface-default)",
        "description": "The base color of the shadow."
      },
      {
        "name": "--ed-scroller-shadow-size",
        "default": "2rem",
        "description": "The size of the shadow."
      }
    ],
    "parts": [
      {
        "name": "content",
        "description": "The container that wraps the slotted content."
      },
      {
        "name": "start-shadow",
        "description": "The shadow overlay at the scroller's start edge."
      },
      {
        "name": "end-shadow",
        "description": "The shadow overlay at the scroller's end edge."
      }
    ],
    "states": []
  },
  "import": "import '@eurodata/eurodata-ui/dist/components/scroller/scroller.js';",
  "react": {
    "component": "EdScroller",
    "import": "import EdScroller from '@eurodata/eurodata-ui/dist/react/scroller/index.js';"
  }
}