{
  "name": "disclosure",
  "displayName": "Disclosure",
  "type": "native",
  "isCustomElement": false,
  "tag": null,
  "nativeTag": "details",
  "selector": ".l-disclosure",
  "subItemOf": null,
  "summary": "A headless, animated disclosure built on native `<details>`/`<summary>`.",
  "status": "stable",
  "appearances": [],
  "import": {
    "css": "luxen-ui/css/disclosure",
    "js": null
  },
  "properties": [],
  "attributes": [
    {
      "name": "open",
      "data": false,
      "values": [],
      "description": "Native attribute — starts the disclosure expanded."
    },
    {
      "name": "name",
      "data": false,
      "values": [],
      "description": "Native attribute — groups disclosures into an exclusive accordion."
    },
    {
      "name": "data-marker",
      "data": true,
      "values": [
        "arrow",
        "plus"
      ],
      "description": "Marker icon: `arrow` rotates 180° when open; `plus` rotates 45° into a cross."
    },
    {
      "name": "data-variant",
      "data": true,
      "values": [],
      "description": "bordered — Adds border, background, and border-radius."
    },
    {
      "name": "disabled",
      "data": false,
      "values": [],
      "description": "Disables interaction (set on `<details>` or `<summary>`)."
    }
  ],
  "events": [
    {
      "name": "toggle",
      "description": "Fires when the disclosure opens or closes (`e.newState` is `\"open\"` or `\"closed\"`).",
      "cancelable": false
    }
  ],
  "methods": [],
  "slots": [],
  "cssClasses": [
    {
      "name": ".l-disclosure",
      "description": "Headless base — layout, animation, and marker behavior only."
    }
  ],
  "cssParts": [],
  "cssProperties": [
    {
      "name": "--marker-size",
      "default": "20px",
      "description": "Marker icon size."
    },
    {
      "name": "--marker-color",
      "default": "var(--l-color-text-tertiary)",
      "description": "Marker icon color ()."
    }
  ],
  "commands": [],
  "examples": [
    {
      "title": "Bordered with arrow marker",
      "language": "html",
      "code": "<details class=\"l-disclosure\" data-variant=\"bordered\" data-marker=\"arrow\">\n<summary>Details</summary>\n<div>Content</div>\n</details>"
    }
  ]
}