{
  "name": "ds-disclosure",
  "description": "Collapsible disclosure widget",
  "docUrl": "https://design.soracom.io/design-system/elements/disclosure/",
  "category": "elements",
  "htmlElements": [
    "details"
  ],
  "isWebComponent": false,
  "modifiers": {
    "color": "all",
    "visual-state": [
      "--alert",
      "--warning",
      "--success",
      "--info"
    ],
    "variant": [
      "--simple",
      "--hide-arrow"
    ],
    "icon": "all",
    "indent": "all",
    "gap": "all"
  },
  "structure": {
    "requiredChildren": [
      "summary"
    ],
    "wrapContent": false
  },
  "examples": [
    {
      "name": "basic",
      "html": "<details class=\"ds-disclosure\"><summary>Click to expand</summary><p>This content is hidden by default and revealed when the disclosure is opened.</p></details>"
    },
    {
      "name": "opened",
      "html": "<details class=\"ds-disclosure\" open><summary>Already Open</summary><p>This disclosure starts in the open state.</p></details>"
    },
    {
      "name": "alert",
      "html": "<details class=\"ds-disclosure --alert\"><summary>Alert Information</summary><p>Important alert content that needs attention.</p></details>"
    },
    {
      "name": "warning",
      "html": "<details class=\"ds-disclosure --warning\"><summary>Warning Notice</summary><p>Warning content that users should be aware of.</p></details>"
    },
    {
      "name": "success",
      "html": "<details class=\"ds-disclosure --success\"><summary>Success Details</summary><p>Additional details about the successful operation.</p></details>"
    },
    {
      "name": "info",
      "html": "<details class=\"ds-disclosure --info\"><summary>More Information</summary><p>Additional information that might be helpful.</p></details>"
    },
    {
      "name": "simple",
      "html": "<details class=\"ds-disclosure --simple\"><summary>Simple Style</summary><p>Simplified disclosure without border.</p></details>"
    },
    {
      "name": "hide-arrow",
      "html": "<details class=\"ds-disclosure --hide-arrow\"><summary>No Arrow</summary><p>This disclosure has no arrow indicator, uses underline text instead.</p></details>"
    },
    {
      "name": "color-blue",
      "html": "<details class=\"ds-disclosure --color-blue\"><summary>Blue Disclosure</summary><p>Content with blue color theme.</p></details>"
    },
    {
      "name": "with-icon",
      "html": "<details class=\"ds-disclosure\"><summary class=\"--icon --icon-question\">FAQ Item</summary><p>Frequently asked question content.</p></details>"
    },
    {
      "name": "with-rich-content",
      "html": "<details class=\"ds-disclosure\"><summary>Advanced Content</summary><h4>Heading</h4><p>Text content</p><div><button class=\"ds-button --primary\"><span>Action</span></button></div></details>"
    }
  ]
}