{
  "_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": "Accordion",
  "description": "An accordion allows users to toggle the display of sections of content.",
  "structure": {
    "name": "root",
    "restrict": [
      "ul"
    ],
    "description": "Initializes an accordion list with more than one section that will have its display toggled by invoking an interaction on the summary title",
    "children": [
      {
        "name": "listItem",
        "description": "List item wrapper around a single accordion section.",
        "repeats": true,
        "restrict": [
          "li"
        ],
        "children": [
          {
            "name": "section",
            "description": "A single expandable accordion section.",
            "restrict": [
              "section"
            ],
            "children": [
              {
                "name": "summary",
                "description": "Header region containing the section's summary action and any overflow controls.",
                "restrict": [
                  "div"
                ],
                "children": [
                  {
                    "name": "summaryHeading",
                    "description": "Heading element that wraps the section's expand/collapse trigger.",
                    "restrict": [
                      "h2",
                      "h3",
                      "h4",
                      "h5",
                      "h6"
                    ],
                    "children": [
                      {
                        "name": "summaryAction",
                        "description": "Button that toggles the section open or closed.",
                        "restrict": [
                          "button"
                        ],
                        "children": [
                          {
                            "name": "summaryActionIcon",
                            "description": "Indicator icon paired with the summary action label.",
                            "component": "PrimitiveIcon",
                            "attributes": {
                              "static": {
                                "class": "slds-accordion__summary-action-icon slds-button__icon slds-button__icon_left"
                              }
                            },
                            "children": [
                              {
                                "name": "summaryActionIconUse"
                              }
                            ]
                          },
                          {
                            "name": "summaryContent",
                            "description": "Visible text label for the section summary.",
                            "restrict": [
                              "span"
                            ],
                            "attributes": {
                              "static": {
                                "class": "slds-accordion__summary-content"
                              }
                            }
                          }
                        ],
                        "attributes": {
                          "static": {
                            "class": "slds-button slds-button_reset slds-accordion__summary-action",
                            "aria-controls": "<id>",
                            "aria-expanded": "false"
                          }
                        }
                      }
                    ],
                    "attributes": {
                      "static": {
                        "class": "slds-accordion__summary-heading"
                      }
                    }
                  },
                  {
                    "name": "actionOverflow",
                    "description": "Optional overflow menu paired with the section summary.",
                    "slot": {
                      "name": "actionOverflow",
                      "required": false
                    },
                    "attributes": {
                      "static": {
                        "class": "slds-dropdown-trigger slds-dropdown-trigger_click"
                      }
                    },
                    "children": [
                      {
                        "name": "actionOverflowTrigger",
                        "attributes": {
                          "static": {
                            "class": "slds-button slds-button_icon slds-button_icon-border-filled slds-button_icon-x-small",
                            "aria-haspopup": "true"
                          }
                        },
                        "children": [
                          {
                            "name": "actionOverflowTriggerIcon",
                            "attributes": {
                              "static": {
                                "class": "slds-button__icon",
                                "aria-hidden": "true"
                              }
                            },
                            "children": [
                              {
                                "name": "actionOverflowTriggerIconUse"
                              }
                            ]
                          },
                          {
                            "name": "actionOverflowTriggerAssistiveText",
                            "attributes": {
                              "static": {
                                "class": "slds-assistive-text"
                              }
                            }
                          }
                        ]
                      },
                      {
                        "name": "actionOverflowDropdown",
                        "attributes": {
                          "static": {
                            "class": "slds-dropdown slds-dropdown_actions slds-dropdown_right"
                          }
                        },
                        "children": [
                          {
                            "name": "actionOverflowList",
                            "attributes": {
                              "static": {
                                "class": "slds-dropdown__list",
                                "role": "menu"
                              }
                            },
                            "children": [
                              {
                                "name": "actionOverflowItem",
                                "attributes": {
                                  "static": {
                                    "class": "slds-dropdown__item",
                                    "role": "presentation"
                                  }
                                },
                                "children": [
                                  {
                                    "name": "actionOverflowItemLink",
                                    "attributes": {
                                      "static": {
                                        "role": "menuitem"
                                      }
                                    },
                                    "children": [
                                      {
                                        "name": "actionOverflowItemLabel",
                                        "attributes": {
                                          "static": {
                                            "class": "slds-truncate"
                                          }
                                        }
                                      }
                                    ]
                                  }
                                ]
                              }
                            ]
                          }
                        ]
                      }
                    ]
                  }
                ],
                "attributes": {
                  "static": {
                    "class": "slds-accordion__summary"
                  }
                }
              },
              {
                "name": "content",
                "description": "Region that holds the section's collapsible body content.",
                "restrict": [
                  "div"
                ],
                "slot": {
                  "name": "default",
                  "required": false
                },
                "attributes": {
                  "static": {
                    "class": "slds-accordion__content"
                  }
                }
              }
            ],
            "attributes": {
              "static": {
                "class": "slds-accordion__section"
              }
            }
          }
        ],
        "attributes": {
          "static": {
            "class": "slds-accordion__list-item"
          }
        }
      }
    ],
    "attributes": {
      "static": {
        "class": "slds-accordion"
      }
    }
  },
  "states": [
    {
      "name": "allowMultiple",
      "type": "boolean",
      "description": "Whether multiple sections can be open at once"
    },
    {
      "name": "isOpen",
      "type": "boolean",
      "aria": "aria-expanded",
      "description": "Whether an accordion section is expanded"
    },
    {
      "name": "hidden",
      "type": "boolean",
      "aria": "aria-hidden",
      "description": "Whether the section's content region is hidden from view and assistive tech when the section is collapsed"
    }
  ],
  "accessibility": {
    "requirements": [
      {
        "id": "keyboard-navigation",
        "description": "Arrow keys should navigate between accordion headers"
      },
      {
        "id": "focus-management",
        "description": "Focus should move to accordion header when section is activated"
      },
      {
        "id": "summary-controls-content",
        "description": "The summary action button must reference the content region via aria-controls, and aria-expanded must reflect the section's open state."
      }
    ]
  },
  "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"
    },
    "com.salesforce-ux.customization": {
      "description": "Per-hook overrides for the Customization story that beat the test-value generator.",
      "hooks": {
        "--slds-c-accordion-section-spacing-inline-start": "12px",
        "--slds-c-accordion-section-spacing-inline-end": "12px",
        "--slds-c-accordion-summary-spacing-inline-start": "12px",
        "--slds-c-accordion-summary-spacing-inline-end": "12px"
      }
    }
  },
  "cssSource": "./accordion.css",
  "styleApi": {
    "status": "stable",
    "ready": true
  },
  "stateClasses": [
    {
      "state": "isOpen",
      "class": "slds-is-open"
    }
  ]
}