{
  "_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": "Tabs",
  "description": "Initializes a default tablist",
  "structure": {
    "name": "root",
    "restrict": [
      "div"
    ],
    "description": "Initializes a default tablist",
    "children": [
      {
        "name": "tablist",
        "restrict": [
          "ul",
          "div"
        ],
        "description": "Tab list container",
        "attributes": {
          "static": {
            "role": "tablist"
          }
        },
        "children": [
          {
            "name": "tab",
            "restrict": [
              "li"
            ],
            "description": "Tab item",
            "repeats": true,
            "attributes": {
              "static": {
                "role": "presentation"
              }
            },
            "children": [
              {
                "name": "tabLeftIcon",
                "restrict": [
                  "span"
                ],
                "description": "icon to the left of tab label"
              },
              {
                "name": "tabLink",
                "restrict": [
                  "a",
                  "button"
                ],
                "description": "Tab link/button",
                "attributes": {
                  "static": {
                    "role": "tab"
                  },
                  "bound": {
                    "id": {
                      "prop": "tabId"
                    },
                    "aria-controls": {
                      "prop": "panelId"
                    },
                    "aria-selected": {
                      "prop": "isSelected"
                    },
                    "tabindex": {
                      "prop": "tabIndex"
                    }
                  }
                },
                "slot": {
                  "name": "tabLabel",
                  "required": true
                }
              },
              {
                "name": "tabRightIcon",
                "restrict": [
                  "span"
                ],
                "description": "icon to the right of tab label"
              }
            ]
          }
        ]
      },
      {
        "name": "panels",
        "restrict": [
          "div"
        ],
        "description": "Tab panels container",
        "children": [
          {
            "name": "panel",
            "restrict": [
              "div"
            ],
            "description": "Tab panel",
            "repeats": true,
            "attributes": {
              "static": {
                "role": "tabpanel"
              },
              "bound": {
                "id": {
                  "prop": "panelId"
                },
                "aria-labelledby": {
                  "prop": "tabId"
                }
              }
            },
            "slot": {
              "name": "default"
            }
          }
        ]
      }
    ]
  },
  "states": [
    {
      "name": "selectedIndex",
      "type": "enum",
      "description": "Index of the currently selected tab"
    },
    {
      "name": "active",
      "type": "boolean",
      "description": "Active/selected tab marker used by the workspace sub-tabs and scrolling-tabs patterns"
    },
    {
      "name": "disabled",
      "type": "boolean",
      "description": "Whether a tab is disabled"
    },
    {
      "name": "unsaved",
      "type": "boolean",
      "description": "whether a tab has unsaved changes"
    },
    {
      "name": "hasNotification",
      "type": "boolean",
      "description": "whether a tab has an unread notification"
    },
    {
      "name": "focused",
      "type": "boolean",
      "description": "whether a tab has keyboard focus"
    },
    {
      "name": "hidden",
      "type": "boolean",
      "description": "Whether a tab panel is hidden (only one panel is shown at a time)"
    },
    {
      "name": "shown",
      "type": "boolean",
      "description": "Whether a tab panel is currently shown"
    },
    {
      "name": "mobilePanelHidden",
      "type": "boolean",
      "description": "Whether a mobile-stack slide-in panel is currently hidden offscreen"
    }
  ],
  "accessibility": {
    "requirements": [
      {
        "id": "tablist-role",
        "description": "Tab container must have role='tablist'"
      },
      {
        "id": "tab-panel-association",
        "description": "Each tab must be associated with its panel via aria-controls/aria-labelledby"
      },
      {
        "id": "keyboard-navigation",
        "description": "Arrow keys should navigate between tabs, Tab should move to panel content"
      },
      {
        "id": "aria-selected",
        "description": "Selected tab must have aria-selected='true'"
      }
    ]
  }
}