{
  "_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": "Carousel",
  "description": "Initiates a carousel component",
  "structure": {
    "name": "root",
    "restrict": [
      "div"
    ],
    "description": "Initiates a carousel component",
    "children": [
      {
        "name": "stage",
        "restrict": [
          "div"
        ],
        "description": "Main stage for carousel's tab-panels and tab-list inidicators",
        "children": [
          {
            "name": "autoplayButton",
            "restrict": [
              "span"
            ],
            "description": "Element that contains the auto-play button icon to toggle on/off",
            "renderWhen": "slotFilled",
            "slot": {
              "name": "autoplayButton"
            },
            "children": [
              {
                "name": "autoplayButtonControl",
                "restrict": [
                  "button"
                ],
                "description": "Autoplay toggle button",
                "attributes": {
                  "bound": {
                    "aria-pressed": {
                      "prop": "autoplay"
                    },
                    "title": {
                      "prop": "autoplayLabel"
                    }
                  }
                },
                "children": [
                  {
                    "name": "autoplayButtonIcon",
                    "description": "Play/pause glyph for the autoplay button",
                    "component": "PrimitiveIcon"
                  },
                  {
                    "name": "autoplayButtonAssistiveText",
                    "restrict": [
                      "span"
                    ],
                    "description": "Screen-reader-only label for the autoplay button"
                  }
                ]
              }
            ]
          },
          {
            "name": "panels",
            "restrict": [
              "div"
            ],
            "description": "Tabpanel region that contains all carousel panels",
            "attributes": {
              "static": {
                "role": "tablist"
              }
            },
            "slot": {
              "name": "default",
              "required": true
            },
            "children": [
              {
                "name": "panel",
                "restrict": [
                  "div"
                ],
                "description": "Tabpanel region that contains all carousel panels",
                "repeats": true,
                "attributes": {
                  "static": {
                    "role": "tabpanel"
                  },
                  "bound": {
                    "id": {
                      "prop": "panelId"
                    },
                    "aria-labelledby": {
                      "prop": "indicatorId"
                    },
                    "hidden": {
                      "prop": "isHidden"
                    }
                  }
                },
                "children": [
                  {
                    "name": "panelAction",
                    "restrict": [
                      "a"
                    ],
                    "description": "Actionable element that contains the carousel's tab-panel content",
                    "attributes": {
                      "bound": {
                        "href": {
                          "prop": "href"
                        },
                        "tabindex": {
                          "prop": "tabindex"
                        }
                      }
                    },
                    "children": [
                      {
                        "name": "image",
                        "restrict": [
                          "div"
                        ],
                        "description": "Element that contains the image inside the carousel's tab-panel",
                        "children": [
                          {
                            "name": "imageMedia",
                            "restrict": [
                              "img"
                            ],
                            "description": "panel image",
                            "attributes": {
                              "bound": {
                                "src": {
                                  "prop": "src"
                                },
                                "alt": {
                                  "prop": "alt"
                                }
                              }
                            }
                          }
                        ]
                      },
                      {
                        "name": "panelContent",
                        "restrict": [
                          "div"
                        ],
                        "description": "Element that contains the content inside the carousel's tab-panel",
                        "children": [
                          {
                            "name": "panelTitle",
                            "restrict": [
                              "h2"
                            ],
                            "description": "Heading element that contains the title of the carousel's tab-panel"
                          },
                          {
                            "name": "panelDescription",
                            "restrict": [
                              "p"
                            ],
                            "description": "panel supporting copy"
                          }
                        ]
                      }
                    ]
                  }
                ]
              }
            ]
          },
          {
            "name": "indicators",
            "restrict": [
              "ul"
            ],
            "description": "List element that contains the carousel's tab-list inidicators",
            "attributes": {
              "static": {
                "role": "tablist"
              }
            },
            "slot": {
              "name": "indicators",
              "required": true
            },
            "children": [
              {
                "name": "indicator",
                "restrict": [
                  "li"
                ],
                "description": "Carousel's tab-list inidicator items",
                "repeats": true,
                "attributes": {
                  "static": {
                    "role": "presentation"
                  }
                },
                "children": [
                  {
                    "name": "indicatorAction",
                    "restrict": [
                      "a"
                    ],
                    "description": "Actionable element inside of each tab-list indicator",
                    "attributes": {
                      "static": {
                        "role": "tab"
                      },
                      "bound": {
                        "id": {
                          "prop": "indicatorId"
                        },
                        "href": {
                          "prop": "href"
                        },
                        "tabindex": {
                          "prop": "tabindex"
                        },
                        "aria-selected": {
                          "prop": "isActive"
                        },
                        "aria-controls": {
                          "prop": "panelId"
                        },
                        "title": {
                          "prop": "indicatorLabel"
                        }
                      }
                    },
                    "children": [
                      {
                        "name": "indicatorAssistiveText",
                        "restrict": [
                          "span"
                        ],
                        "description": "Screen-reader-only label for the indicator tab"
                      }
                    ]
                  }
                ]
              }
            ]
          }
        ]
      }
    ]
  },
  "states": [
    {
      "name": "activeIndex",
      "type": "enum",
      "description": "Index of active panel",
      "options": []
    },
    {
      "name": "autoplay",
      "type": "boolean",
      "aria": "aria-pressed",
      "description": "Whether autoplay is active"
    },
    {
      "name": "isHidden",
      "type": "boolean",
      "aria": "hidden",
      "description": "Whether the panel is currently hidden (non-active)"
    }
  ],
  "accessibility": {
    "requirements": [
      {
        "id": "pause-autoplay",
        "description": "Autoplay must be pausable"
      },
      {
        "id": "keyboard-navigation",
        "description": "Arrow keys should navigate between panels"
      },
      {
        "id": "indicator-label",
        "description": "Each indicator tab exposes a visually-hidden label naming the panel it controls"
      }
    ]
  },
  "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"
        }
      }
    }
  }
}