{
  "tag": "ed-details",
  "kind": "component",
  "summary": "Details show a brief summary and expand to show additional content.",
  "status": "experimental",
  "level": "molecule",
  "since": "1.0",
  "docs": "https://test-apps.eurodata.de/a/eurodata-ui/docs/components/details/",
  "usage": "https://test-apps.eurodata.de/a/eurodata-ui/docs/components/details/usage/",
  "playwright": "getByTestId('…')",
  "dependencies": [
    "ed-icon"
  ],
  "use": [
    "Supplementary or secondary content that only some users need — extra explanation, optional detail, help text, or a longer answer",
    "FAQ-style lists, where each question is a summary and each answer is the hidden content",
    "Reducing visual clutter around advanced or rarely-used options"
  ],
  "notFor": [
    {
      "when": "Primary navigation between pages or destinations",
      "instead": "a [Side Menu](https://test-apps.eurodata.de/a/eurodata-ui/docs/components/side-menu)"
    },
    {
      "when": "Deep, multi-level nested hierarchies or an expandable navigation tree",
      "instead": "[Tree](https://test-apps.eurodata.de/a/eurodata-ui/docs/components/tree) (for browsing or selecting hierarchical data) or [Side Menu](https://test-apps.eurodata.de/a/eurodata-ui/docs/components/side-menu) (for hierarchical navigation)"
    },
    {
      "when": "Expanding rows or revealing nested records inside tabular data",
      "instead": "[Data Grid](https://test-apps.eurodata.de/a/eurodata-ui/docs/components/data-grid)'s built-in hierarchical data support"
    }
  ],
  "rules": [
    {
      "id": "details/never-hide-essential",
      "rule": "Never hide content that every user needs behind a disclosure — show it inline. Use Details only for supplementary detail that a portion of users will want, not for essential information.",
      "why": "Collapsed content is out of sight and, for most people, out of mind."
    },
    {
      "id": "details/summary",
      "rule": "Write a summary heading that tells the user exactly what they will find if they expand it — never a vague summary that forces users to expand a section just to learn what is inside."
    },
    {
      "id": "details/visible-affordance",
      "rule": "Keep a clearly visible expand/collapse affordance, not an icon alone that users must discover — never rely on an unlabeled icon as the only cue that a section expands.",
      "why": "Icon-only controls go unnoticed.",
      "check": "error"
    },
    {
      "id": "details/grouping",
      "rule": "Group related sections so opening one closes the others when only one should be open at a time. Allow multiple independent sections to be open at once when users may need to compare or read across them."
    },
    {
      "id": "details/open-by-default",
      "rule": "Expand a section by default when its content is important enough that most users will want it open."
    },
    {
      "id": "details/summary-controls",
      "rule": "Place any links or buttons you need inside the summary. Don't add your own guard against toggling — the component does it: they keep their own click behavior and do not toggle the section.",
      "check": "warning"
    },
    {
      "id": "details/one-level",
      "rule": "Never nest disclosures more than one level deep.",
      "why": "Users get lost moving between levels.",
      "check": "error"
    },
    {
      "id": "details/not-when-most-open",
      "rule": "Don't overuse it on a page where users will need to open most sections anyway.",
      "why": "The extra clicks cost more than they save."
    }
  ],
  "api": {
    "attributes": [
      {
        "name": "open",
        "property": "open",
        "type": "boolean",
        "default": "false",
        "description": "Indicates whether or not the details is open. You can toggle this attribute to show and hide the details, or you\ncan use the `show()` and `hide()` methods and this attribute will reflect the details' open state."
      },
      {
        "name": "summary",
        "property": "summary",
        "type": "string",
        "description": "The summary to show in the header. If you need to display HTML, use the `summary` slot instead."
      },
      {
        "name": "name",
        "property": "name",
        "type": "string",
        "description": "Groups related details elements. When one opens, others with the same name will close."
      },
      {
        "name": "disabled",
        "property": "disabled",
        "type": "boolean",
        "default": "false",
        "description": "Disables the details so it can't be toggled."
      },
      {
        "name": "appearance",
        "property": "appearance",
        "type": "'filled' | 'plain'",
        "default": "'plain'",
        "description": "The element's visual appearance."
      },
      {
        "name": "icon-placement",
        "property": "iconPlacement",
        "type": "'start' | 'end'",
        "default": "'start'",
        "description": "The location of the expand/collapse icon."
      },
      {
        "name": "dir",
        "property": "dir",
        "type": "string"
      },
      {
        "name": "lang",
        "property": "lang",
        "type": "string"
      }
    ],
    "properties": [],
    "methods": [
      {
        "name": "show",
        "description": "Shows the details."
      },
      {
        "name": "hide",
        "description": "Hides the details"
      }
    ],
    "events": [
      {
        "name": "ed-show",
        "react": "onEdShow",
        "description": "Emitted before the details opens. Cancelable; calling `preventDefault()` keeps it closed."
      },
      {
        "name": "ed-after-show",
        "react": "onEdAfterShow",
        "description": "Emitted after the details opens and all animations are complete."
      },
      {
        "name": "ed-hide",
        "react": "onEdHide",
        "description": "Emitted before the details closes. Cancelable; calling `preventDefault()` keeps it open."
      },
      {
        "name": "ed-after-hide",
        "react": "onEdAfterHide",
        "description": "Emitted after the details closes and all animations are complete."
      }
    ],
    "slots": [
      {
        "name": "",
        "description": "The details' main content."
      },
      {
        "name": "summary",
        "description": "The details' summary. Alternatively, you can use the `summary` attribute."
      },
      {
        "name": "expand-icon",
        "description": "Optional expand icon to use instead of the default. Works best with `<ed-icon>`."
      },
      {
        "name": "collapse-icon",
        "description": "Optional collapse icon to use instead of the default. Works best with `<ed-icon>`."
      }
    ],
    "cssProperties": [
      {
        "name": "--ed-details-spacing",
        "description": "The amount of space around and between the details' content. Expects a single value."
      },
      {
        "name": "--ed-show-duration",
        "default": "var(--ed-transition-normal)",
        "description": "The show duration to use when applying built-in animation classes."
      },
      {
        "name": "--ed-hide-duration",
        "default": "var(--ed-transition-normal)",
        "description": "The hide duration to use when applying built-in animation classes."
      }
    ],
    "parts": [
      {
        "name": "base",
        "description": "The inner `<details>` element used to render the component. Styles you apply to the component are automatically applied to this part, so you usually don't need to deal with it unless you need to set the `display` property."
      },
      {
        "name": "header",
        "description": "The header that wraps both the summary and the expand/collapse icon."
      },
      {
        "name": "summary",
        "description": "The `<slot>` the summary text is projected into. A slot has no box of its own, so inherited properties such as `color` reach the text while `background`, `padding` and `border` do not — set those on `header`, the `<summary>` element around it."
      },
      {
        "name": "icon",
        "description": "The container that wraps the expand/collapse icons."
      },
      {
        "name": "content",
        "description": "The details content."
      }
    ],
    "states": [
      {
        "name": "animating",
        "description": "Applied when the details is animating expand/collapse."
      }
    ]
  },
  "import": "import '@eurodata/eurodata-ui/dist/components/details/details.js';",
  "react": {
    "component": "EdDetails",
    "import": "import EdDetails from '@eurodata/eurodata-ui/dist/react/details/index.js';"
  }
}