{
  "_copyright": "Copyright (c) 2026, Salesforce, Inc., All rights reserved. For full license text, see the LICENSE.txt file",
  "$schema": "https://slds.lightningdesignsystem.com/schemas/uif-system.v1.json",
  "apiVersion": "1.0.0",
  "name": "SummaryDetail",
  "description": "Expandable summary row with a toggle button, a title region, and a collapsible detail content area. Shows a summary line by default and reveals additional detail content when opened.",
  "extensions": {
    "com.salesforce-ux": {
      "genReady": false
    }
  },
  "cssSource": "./summaryDetail.css",
  "styleApi": {
    "status": "stable",
    "ready": true
  },
  "structure": {
    "name": "summaryDetail",
    "restrict": [
      "div"
    ],
    "description": "Root container holding the toggle button and a wrapper for the title and detail content.",
    "attributes": {
      "static": {
        "class": "slds-summary-detail"
      }
    },
    "children": [
      {
        "name": "toggle",
        "restrict": [
          "button"
        ],
        "description": "Icon button that toggles the visibility of the detail content. Uses aria-controls and aria-expanded to associate with the content region.",
        "attributes": {
          "static": {
            "class": "slds-button slds-button_icon slds-m-right_x-small"
          }
        },
        "children": [
          {
            "name": "toggleIcon",
            "description": "Chevron-style icon inside the toggle button. Rotates based on the open state of the summary detail.",
            "attributes": {
              "static": {
                "class": "slds-button__icon slds-summary-detail__action-icon"
              }
            },
            "component": "PrimitiveIcon"
          },
          {
            "name": "toggleAssistiveText",
            "restrict": [
              "span"
            ],
            "description": "Visually hidden label announcing the toggle action for assistive technologies.",
            "attributes": {
              "static": {
                "class": "slds-assistive-text"
              }
            }
          }
        ]
      },
      {
        "name": "body",
        "restrict": [
          "div"
        ],
        "description": "Wrapper that groups the visible title region and the collapsible detail content region.",
        "children": [
          {
            "name": "title",
            "restrict": [
              "div"
            ],
            "description": "Title region that is always visible. Contains the heading and optional supporting content (e.g., badge, helper text).",
            "attributes": {
              "static": {
                "class": "slds-summary-detail__title"
              }
            },
            "children": [
              {
                "name": "titleSimple",
                "restrict": [
                  "h1",
                  "h2",
                  "h3",
                  "h4",
                  "h5",
                  "h6"
                ],
                "description": "Simple heading used when the title is a single text string with no adjacent badge or supporting line.",
                "attributes": {
                  "static": {
                    "class": "slds-text-heading_small slds-truncate"
                  }
                }
              },
              {
                "name": "titleComplex",
                "restrict": [
                  "div"
                ],
                "description": "Horizontal grid wrapper used when the title pairs a heading with adjacent content such as a badge.",
                "attributes": {
                  "static": {
                    "class": "slds-grid"
                  }
                },
                "children": [
                  {
                    "name": "titleComplexHeading",
                    "restrict": [
                      "h1",
                      "h2",
                      "h3",
                      "h4",
                      "h5",
                      "h6"
                    ],
                    "description": "Heading inside the complex title grid; reserves inline-end space for the adjacent badge.",
                    "attributes": {
                      "static": {
                        "class": "slds-text-heading_small slds-truncate slds-p-right_small"
                      }
                    }
                  },
                  {
                    "name": "titleComplexBadge",
                    "restrict": [
                      "span"
                    ],
                    "description": "Inline badge rendered next to the heading (e.g., status indicator).",
                    "attributes": {
                      "static": {
                        "class": "slds-badge"
                      }
                    }
                  }
                ]
              },
              {
                "name": "titleSupporting",
                "restrict": [
                  "p",
                  "div"
                ],
                "description": "Optional supporting line rendered below the heading row."
              }
            ]
          },
          {
            "name": "content",
            "restrict": [
              "div"
            ],
            "description": "Collapsible region holding the detail content. Visibility and height are controlled by the open state of the root.",
            "attributes": {
              "static": {
                "class": "slds-summary-detail__content"
              }
            }
          }
        ]
      }
    ]
  },
  "stateClasses": [
    {
      "state": "open",
      "class": "slds-is-open"
    }
  ],
  "componentRefs": {
    "PrimitiveIcon": {
      "description": "Bare SVG icon composed directly inside the component. The host node supplies the SVG class (e.g. slds-button__icon, slds-menu__item-icon) via componentProps; PrimitiveIcon contributes the sprite-href binding.",
      "props": {
        "iconName": {
          "type": "string",
          "required": true,
          "description": "Sprite reference for the icon glyph"
        }
      }
    }
  },
  "states": [
    {
      "name": "open",
      "type": "boolean",
      "description": "Whether the component is in the open state"
    }
  ]
}