{
  "_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-foundation.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"
      }
    },
    "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"
                        }
                      }
                    },
                    "children": [
                      {
                        "name": "toggleIcon",
                        "description": "Expand/collapse caret icon",
                        "component": "PrimitiveIcon"
                      },
                      {
                        "name": "label",
                        "restrict": [
                          "span"
                        ],
                        "description": "Section label text",
                        "slot": {
                          "name": "label"
                        }
                      }
                    ]
                  }
                ]
              },
              {
                "name": "actions",
                "restrict": [
                  "div"
                ],
                "description": "Optional overflow action menu in the section header (typically a dropdown trigger + dropdown panel)",
                "renderWhen": "slotFilled",
                "slot": {
                  "name": "actions"
                }
              }
            ]
          },
          {
            "name": "content",
            "restrict": [
              "div"
            ],
            "description": "Expandable section content area",
            "attributes": {
              "bound": {
                "id": {
                  "prop": "contentId"
                },
                "aria-hidden": {
                  "prop": "isContentHidden"
                },
                "hidden": {
                  "prop": "isContentHidden"
                }
              }
            },
            "slot": {
              "name": "default"
            }
          }
        ]
      }
    ]
  },
  "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"
        }
      }
    }
  }
}