{
  "_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": "ExpandableSection",
  "description": "A disclosure widget composed of a title with a trigger control and a collapsible content region that can be shown or hidden.",
  "structure": {
    "name": "root",
    "restrict": [
      "div",
      "section"
    ],
    "description": "Expandable section container",
    "children": [
      {
        "name": "title",
        "restrict": [
          "h2",
          "h3",
          "h4",
          "h5",
          "h6"
        ],
        "description": "Heading element wrapping the section trigger and label",
        "children": [
          {
            "name": "trigger",
            "restrict": [
              "button"
            ],
            "description": "Disclosure control that toggles the visibility of the content region",
            "attributes": {
              "static": {
                "type": "button",
                "class": "slds-button slds-section__title-action"
              },
              "bound": {
                "aria-expanded": {
                  "prop": "expanded"
                },
                "aria-controls": {
                  "prop": "contentId"
                }
              }
            },
            "children": [
              {
                "name": "icon",
                "restrict": [
                  "span"
                ],
                "description": "Disclosure indicator icon adjacent to the title",
                "slot": {
                  "name": "icon",
                  "restrict": [
                    "Icon"
                  ]
                },
                "attributes": {
                  "static": {
                    "class": "slds-section__title-action-icon slds-button__icon slds-button__icon_left"
                  }
                }
              },
              {
                "name": "label",
                "restrict": [
                  "span"
                ],
                "description": "Text label of the section title",
                "slot": {
                  "name": "title",
                  "required": true
                },
                "attributes": {
                  "static": {
                    "class": "slds-truncate"
                  }
                }
              }
            ]
          },
          {
            "name": "staticLabel",
            "restrict": [
              "span"
            ],
            "description": "Text label used when the section is non-collapsible and has no trigger",
            "renderWhen": {
              "prop": "collapsible",
              "eq": "false"
            },
            "slot": {
              "name": "title"
            },
            "attributes": {
              "static": {
                "class": "slds-truncate slds-p-horizontal_small"
              }
            }
          }
        ],
        "attributes": {
          "static": {
            "class": "slds-section__title"
          }
        },
        "modifiers": [
          {
            "name": "shade",
            "attribute": "class",
            "value": "slds-theme_shade",
            "description": "Applies the shaded theme background to the title (used for non-collapsible sections)"
          },
          {
            "name": "divider",
            "attribute": "class",
            "value": "slds-section-title_divider",
            "description": "Renders the title as a section divider"
          }
        ]
      },
      {
        "name": "content",
        "restrict": [
          "div"
        ],
        "description": "Collapsible content region revealed when the section is open",
        "attributes": {
          "bound": {
            "id": {
              "prop": "contentId"
            },
            "hidden": {
              "prop": "collapsed"
            }
          },
          "static": {
            "class": "slds-section__content"
          }
        },
        "slot": {
          "name": "default",
          "required": true
        }
      }
    ],
    "attributes": {
      "static": {
        "class": "slds-section"
      }
    }
  },
  "states": [
    {
      "name": "expanded",
      "type": "boolean",
      "aria": "aria-expanded",
      "description": "Whether the section is currently expanded and its content is visible"
    },
    {
      "name": "collapsible",
      "type": "boolean",
      "description": "Whether the section can be toggled by the user"
    }
  ],
  "accessibility": {
    "requirements": [
      {
        "id": "trigger-aria-expanded",
        "description": "Trigger must expose its expanded/collapsed state via aria-expanded"
      },
      {
        "id": "trigger-aria-controls",
        "description": "Trigger must reference the content region it controls via aria-controls matching the content id"
      },
      {
        "id": "heading-hierarchy",
        "description": "Section title should use an appropriate heading level for the surrounding document outline"
      },
      {
        "id": "accessible-label",
        "description": "Trigger must have an accessible label that conveys the section title"
      }
    ]
  },
  "extensions": {
    "com.salesforce-ux": {
      "dateAdded": "2015-09-04",
      "genReady": false
    }
  },
  "cssSource": "./expandableSection.css",
  "styleApi": {
    "status": "stable",
    "ready": true
  },
  "stateClasses": [
    {
      "state": "expanded",
      "class": "slds-is-open"
    }
  ]
}