{
  "_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": "AccordionSection",
  "description": "Defines the content of a single section inside an accordion. Renders as a list item containing a sectioning element whose header summary toggles the visibility of an associated content region.",
  "structure": {
    "name": "root",
    "restrict": [
      "li"
    ],
    "description": "Accordion list-item wrapper that hosts a single section",
    "attributes": {
      "static": {
        "role": "listitem",
        "class": "slds-accordion__list-item"
      }
    },
    "children": [
      {
        "name": "section",
        "restrict": [
          "section"
        ],
        "description": "Sectioning container for one expandable region",
        "children": [
          {
            "name": "summary",
            "restrict": [
              "div"
            ],
            "description": "Section summary header row (heading + optional actions)",
            "children": [
              {
                "name": "heading",
                "restrict": [
                  "h2",
                  "h3",
                  "h4",
                  "h5",
                  "h6"
                ],
                "description": "Section heading; level is configurable to fit the surrounding document outline",
                "children": [
                  {
                    "name": "toggle",
                    "restrict": [
                      "button"
                    ],
                    "description": "Expand/collapse toggle button",
                    "attributes": {
                      "bound": {
                        "aria-controls": {
                          "prop": "contentId"
                        },
                        "aria-expanded": {
                          "prop": "isOpen"
                        },
                        "title": {
                          "prop": "label"
                        }
                      },
                      "static": {
                        "class": "slds-button slds-button_reset slds-accordion__summary-action"
                      }
                    },
                    "children": [
                      {
                        "name": "toggleIcon",
                        "description": "Expand/collapse caret icon",
                        "component": "PrimitiveIcon",
                        "attributes": {
                          "static": {
                            "class": "slds-accordion__summary-action-icon slds-button__icon slds-button__icon_left"
                          }
                        },
                        "children": [
                          {
                            "name": "toggleIconUse",
                            "attributes": {
                              "static": {}
                            }
                          }
                        ]
                      },
                      {
                        "name": "label",
                        "restrict": [
                          "span"
                        ],
                        "description": "Section label text",
                        "slot": {
                          "name": "label"
                        },
                        "attributes": {
                          "static": {
                            "class": "slds-accordion__summary-content"
                          }
                        }
                      }
                    ]
                  }
                ],
                "attributes": {
                  "static": {
                    "class": "slds-accordion__summary-heading"
                  }
                }
              },
              {
                "name": "actions",
                "restrict": [
                  "div"
                ],
                "description": "Optional overflow action menu in the section header (typically a dropdown trigger + dropdown panel)",
                "renderWhen": "slotFilled",
                "slot": {
                  "name": "actions"
                },
                "attributes": {
                  "static": {
                    "class": "slds-dropdown-trigger slds-dropdown-trigger_click"
                  }
                },
                "children": [
                  {
                    "name": "actionsTrigger",
                    "attributes": {
                      "static": {
                        "class": "slds-button slds-button_icon slds-button_icon-border-filled slds-button_icon-x-small",
                        "aria-haspopup": "true"
                      }
                    },
                    "children": [
                      {
                        "name": "actionsTriggerIcon",
                        "attributes": {
                          "static": {
                            "class": "slds-button__icon",
                            "aria-hidden": "true"
                          }
                        },
                        "children": [
                          {
                            "name": "actionsTriggerIconUse",
                            "attributes": {
                              "static": {}
                            }
                          }
                        ]
                      },
                      {
                        "name": "actionsTriggerAssistiveText",
                        "attributes": {
                          "static": {
                            "class": "slds-assistive-text"
                          }
                        }
                      }
                    ]
                  },
                  {
                    "name": "actionsDropdown",
                    "attributes": {
                      "static": {
                        "class": "slds-dropdown slds-dropdown_actions slds-dropdown_right"
                      }
                    },
                    "children": [
                      {
                        "name": "actionsMenu",
                        "attributes": {
                          "static": {
                            "class": "slds-dropdown__list",
                            "role": "menu"
                          }
                        },
                        "children": [
                          {
                            "name": "actionsMenuItem",
                            "repeats": true,
                            "attributes": {
                              "static": {
                                "class": "slds-dropdown__item",
                                "role": "presentation"
                              }
                            },
                            "children": [
                              {
                                "name": "actionsMenuItemLink",
                                "attributes": {
                                  "static": {
                                    "role": "menuitem"
                                  }
                                },
                                "children": [
                                  {
                                    "name": "actionsMenuItemLabel",
                                    "attributes": {
                                      "static": {
                                        "class": "slds-truncate"
                                      }
                                    }
                                  }
                                ]
                              }
                            ]
                          }
                        ]
                      }
                    ]
                  }
                ]
              }
            ],
            "attributes": {
              "static": {
                "class": "slds-accordion__summary"
              }
            }
          },
          {
            "name": "content",
            "restrict": [
              "div"
            ],
            "description": "Expandable section content area",
            "attributes": {
              "bound": {
                "id": {
                  "prop": "contentId"
                },
                "aria-hidden": {
                  "prop": "isContentHidden"
                },
                "hidden": {
                  "prop": "isContentHidden"
                }
              },
              "static": {
                "class": "slds-accordion__content"
              }
            },
            "slot": {
              "name": "default"
            }
          }
        ],
        "attributes": {
          "static": {
            "class": "slds-accordion__section"
          }
        }
      }
    ]
  },
  "states": [
    {
      "name": "isOpen",
      "type": "boolean",
      "aria": "aria-expanded",
      "description": "Whether the section is expanded"
    }
  ],
  "accessibility": {
    "requirements": [
      {
        "id": "listitem-role",
        "description": "Section root must have role listitem so it is announced as part of the parent accordion's list"
      },
      {
        "id": "aria-expanded",
        "description": "Toggle button must reflect expanded state via aria-expanded"
      },
      {
        "id": "aria-controls",
        "description": "Toggle button must reference the content element via aria-controls"
      },
      {
        "id": "aria-hidden-content",
        "description": "Collapsed content region must be hidden from assistive tech (hidden attribute and/or aria-hidden=\"true\")"
      },
      {
        "id": "keyboard-toggle",
        "description": "Section must be expandable/collapsible via Enter or Space on the toggle button"
      },
      {
        "id": "heading-level",
        "description": "Section heading level must be configurable so the heading fits the surrounding document outline"
      },
      {
        "id": "decorative-icon",
        "description": "Toggle caret icon must be marked aria-hidden=\"true\" so it is not announced separately from the button label"
      }
    ]
  },
  "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"
        }
      }
    }
  },
  "extensions": {
    "com.salesforce-ux": {
      "dateAdded": "2017-03-01",
      "genReady": false,
      "lbc": "lightning-accordion-section"
    }
  },
  "cssSource": "../accordion/accordion.css",
  "styleApi": {
    "status": "stable",
    "ready": true
  },
  "stateClasses": [
    {
      "state": "isOpen",
      "class": "slds-is-open"
    }
  ]
}