{
  "tag": "ed-divider",
  "kind": "component",
  "summary": "Dividers are used to visually separate or group elements.",
  "status": "experimental",
  "level": "atom",
  "since": "1.0",
  "docs": "https://test-apps.eurodata.de/a/eurodata-ui/docs/components/divider/",
  "usage": "https://test-apps.eurodata.de/a/eurodata-ui/docs/components/divider/usage/",
  "playwright": "getByTestId('…')",
  "dependencies": [],
  "use": [
    "Signaling a meaningful boundary between two groups of content that spacing alone leaves ambiguous",
    "Grouping related items inside dense, compact areas where there is little room for generous spacing — for example separating clusters of items in a menu or dropdown",
    "Breaking a long, uniform list or a content-heavy dashboard into scannable chunks",
    "Separating items sitting side by side in a row, such as inline actions or metadata — with a vertical divider",
    "A toolbar with several buttons, where a line after a group shows they do different work and holds a destructive action apart"
  ],
  "notFor": [
    {
      "when": "Introducing or titling a new section of content",
      "instead": "a heading"
    },
    {
      "when": "Bounding or framing a distinct, self-contained block of content",
      "instead": "[Card](https://test-apps.eurodata.de/a/eurodata-ui/docs/components/card)"
    }
  ],
  "rules": [
    {
      "id": "divider/whitespace-first",
      "rule": "Use dividers sparingly: reach for whitespace first, as the primary separation method, and treat lines as the exception — add one only when spacing alone does not make the grouping clear, never merely to group items that surrounding space could separate just as clearly. Never fill a screen with lines.",
      "why": "A line is the heaviest way to separate content, and heavy use creates visual noise and dilutes the meaning of each divider."
    },
    {
      "id": "divider/subtle",
      "rule": "Keep dividers subtle and low-contrast, so they organize content without competing with it — never a bold, high-contrast line where a faint one would do.",
      "why": "A divider should recede, not dominate.",
      "check": "warning"
    },
    {
      "id": "divider/consistent",
      "rule": "Keep dividers consistent — the same weight and color for the same kind of separation throughout a screen.",
      "check": "warning"
    },
    {
      "id": "divider/not-against-heading",
      "rule": "Never stack a divider directly against a heading that already marks the boundary, doubling the separation.",
      "check": "error"
    }
  ],
  "api": {
    "attributes": [
      {
        "name": "orientation",
        "property": "orientation",
        "type": "'horizontal' | 'vertical'",
        "default": "'horizontal'",
        "description": "Sets the divider's orientation."
      },
      {
        "name": "with-label",
        "property": "withLabel",
        "type": "boolean",
        "default": "false",
        "description": "Only needed for server-side rendering: set it when a label is slotted in, so the server-rendered markup lays\nthe label out before the component hydrates. On the client the divider detects the label itself."
      },
      {
        "name": "label-placement",
        "property": "labelPlacement",
        "type": "'start' | 'end' | 'center'",
        "default": "'center'",
        "description": "Where the label sits along the divider."
      },
      {
        "name": "dir",
        "property": "dir",
        "type": "string"
      },
      {
        "name": "lang",
        "property": "lang",
        "type": "string"
      }
    ],
    "properties": [],
    "methods": [
      {
        "name": "getPropertyDescriptor",
        "static": true,
        "parameters": [
          {
            "name": "name",
            "type": "PropertyKey"
          },
          {
            "name": "key",
            "type": "string | symbol"
          },
          {
            "name": "options",
            "type": "PropertyDeclaration"
          }
        ],
        "returns": "PropertyDescriptor | undefined",
        "description": "Wraps the accessor of reflected properties so they always hold a valid value, as a native\nreflected IDL attribute does (`button.type = undefined` reads `submit`):\n\n- A property that declares `useDefault` takes the first value set on an element for its\n  default. That value is its field initializer's: the constructor has finished before markup,\n  a framework or any other code can set anything. Every later `null` or `undefined` means what\n  a dropped prop means on a native element — the attribute is removed: with the attribute\n  there, it is removed and Lit's `useDefault` restores the default without writing it; without\n  one, the property is set to the default. A value set and cleared again before the element\n  updates still writes the default once, from the pending reflection.\n- A Boolean is coerced with `Boolean()`, so `undefined` is `false`.\n\nLit's `useDefault` keeps the initial default out of the DOM. Setting the default explicitly\nwrites it, as `button.type = 'submit'` writes `type`."
      }
    ],
    "events": [],
    "slots": [
      {
        "name": "",
        "description": "An optional label shown on the divider, such as \"or\" between two ways to sign in."
      }
    ],
    "cssProperties": [
      {
        "name": "--ed-divider-color",
        "default": "var(--ed-color-border)",
        "description": "The color of the divider."
      },
      {
        "name": "--ed-divider-width",
        "default": "var(--ed-border-width-1)",
        "description": "The width of the divider."
      },
      {
        "name": "--ed-divider-spacing",
        "default": "var(--ed-space-4)",
        "description": "The spacing of the divider."
      },
      {
        "name": "--ed-divider-label-spacing",
        "default": "var(--ed-space-3)",
        "description": "The space between the label and the lines beside it."
      },
      {
        "name": "--ed-divider-label-offset",
        "default": "0",
        "description": "The length of the line between the divider's edge and a label placed at the start or the end."
      }
    ],
    "parts": [
      {
        "name": "label",
        "description": "The container that wraps the label."
      }
    ],
    "states": []
  },
  "import": "import '@eurodata/eurodata-ui/dist/components/divider/divider.js';",
  "react": {
    "component": "EdDivider",
    "import": "import EdDivider from '@eurodata/eurodata-ui/dist/react/divider/index.js';"
  }
}