{
  "tag": "ed-intersection-observer",
  "kind": "component",
  "summary": "Tracks immediate child elements and fires events as they move in and out of view.",
  "status": "experimental",
  "since": "1.0",
  "docs": "https://test-apps.eurodata.de/a/eurodata-ui/docs/components/intersection-observer/",
  "usage": "https://test-apps.eurodata.de/a/eurodata-ui/docs/components/intersection-observer/usage/",
  "playwright": "getByTestId('…')",
  "dependencies": [],
  "use": [
    "Loading more rows or a chart only when the user scrolls it into view, to keep a long report page fast",
    "Highlighting the current section in a table of contents as the user scrolls through a long form or document"
  ],
  "notFor": [
    {
      "when": "Tracking size changes of an element",
      "instead": "a [Resize Observer](https://test-apps.eurodata.de/a/eurodata-ui/docs/components/resize-observer)"
    },
    {
      "when": "Tracking changes to an element's attributes or children",
      "instead": "a [Mutation Observer](https://test-apps.eurodata.de/a/eurodata-ui/docs/components/mutation-observer)"
    }
  ],
  "rules": [],
  "api": {
    "attributes": [
      {
        "name": "root",
        "property": "root",
        "type": "null | string",
        "default": "null",
        "description": "CSS selector for the element that defines the viewport boundaries for tracked targets.\nResolved against this element's own root node, so a selector matching a sibling inside the same\nshadow root works. It cannot cross a shadow boundary — use `rootElement` for that."
      },
      {
        "name": "root-margin",
        "property": "rootMargin",
        "type": "string",
        "default": "'0px'",
        "description": "Offset space around the root boundary. Accepts values like CSS margin syntax."
      },
      {
        "name": "threshold",
        "property": "threshold",
        "type": "string",
        "default": "'0'",
        "description": "One or more space-separated values representing visibility percentages that trigger the observer callback."
      },
      {
        "name": "intersect-class",
        "property": "intersectClass",
        "type": "string",
        "default": "''",
        "description": "CSS class applied to elements during intersection. Automatically removed when elements leave\nthe viewport, enabling pure CSS styling based on visibility state."
      },
      {
        "name": "once",
        "property": "once",
        "type": "boolean",
        "default": "false",
        "description": "If enabled, observation ceases after initial intersection."
      },
      {
        "name": "disabled",
        "property": "disabled",
        "type": "boolean",
        "default": "false",
        "description": "Deactivates the intersection observer functionality."
      },
      {
        "name": "dir",
        "property": "dir",
        "type": "string"
      },
      {
        "name": "lang",
        "property": "lang",
        "type": "string"
      }
    ],
    "properties": [
      {
        "name": "rootElement",
        "type": "Element | null | undefined",
        "description": "Explicit root element, taking precedence over `root`. Use this when the root lives in another shadow DOM the selector can't reach."
      }
    ],
    "methods": [],
    "events": [
      {
        "name": "ed-intersect",
        "react": "onEdIntersect",
        "type": "{ entry: IntersectionObserverEntry }",
        "description": "Fired when a tracked element begins or ceases intersecting."
      }
    ],
    "slots": [
      {
        "name": "",
        "description": "Elements to track. Only immediate children of the host are monitored."
      }
    ],
    "cssProperties": [],
    "parts": [],
    "states": []
  },
  "import": "import '@eurodata/eurodata-ui/dist/components/intersection-observer/intersection-observer.js';",
  "react": {
    "component": "EdIntersectionObserver",
    "import": "import EdIntersectionObserver from '@eurodata/eurodata-ui/dist/react/intersection-observer/index.js';"
  }
}