{
  "_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": "SplitView",
  "description": "Two-pane layout that pairs a scrollable record list with a primary detail area, including a toggle button that opens or closes the list pane.",
  "extensions": {
    "com.salesforce-ux": {
      "genReady": false
    }
  },
  "cssSource": "./splitView.css",
  "styleApi": {
    "status": "stable",
    "ready": true
  },
  "structure": {
    "name": "splitView",
    "restrict": [
      "div"
    ],
    "description": "Outer wrapper that positions the split-view list pane next to a primary view and hosts the open/close toggle.",
    "attributes": {
      "static": {
        "class": "slds-split-view_container"
      }
    },
    "children": [
      {
        "name": "toggleButton",
        "restrict": [
          "button"
        ],
        "description": "Icon button anchored to the inline-end edge of the container that opens or closes the list pane. Mirrors the container's open/closed state.",
        "attributes": {
          "static": {
            "class": "slds-button slds-button_icon slds-split-view__toggle-button"
          }
        },
        "children": [
          {
            "name": "toggleIcon",
            "description": "Chevron glyph rendered inside the toggle button; rotates 180deg when the pane is closed.",
            "attributes": {
              "static": {
                "class": "slds-button__icon slds-button__icon_x-small"
              }
            },
            "component": "PrimitiveIcon"
          },
          {
            "name": "toggleAssistiveText",
            "restrict": [
              "span"
            ],
            "description": "Visually hidden label announcing the open/close action.",
            "attributes": {
              "static": {
                "class": "slds-assistive-text"
              }
            }
          }
        ]
      },
      {
        "name": "panel",
        "restrict": [
          "article"
        ],
        "description": "List pane that holds the header, sort/column header, and the scrollable record list.",
        "attributes": {
          "static": {
            "class": "slds-split-view slds-grid slds-grid_vertical slds-grow"
          }
        },
        "children": [
          {
            "name": "header",
            "restrict": [
              "header"
            ],
            "description": "Header of the split-view list pane, containing the object title, item count, and list-level action buttons.",
            "attributes": {
              "static": {
                "class": "slds-split-view__header"
              }
            }
          },
          {
            "name": "listHeader",
            "restrict": [
              "div"
            ],
            "description": "Column header row above the list announcing the current sort field and direction.",
            "attributes": {
              "static": {
                "class": "slds-split-view__list-header slds-grid"
              }
            }
          },
          {
            "name": "list",
            "restrict": [
              "ul"
            ],
            "description": "Scrollable listbox of selectable records.",
            "attributes": {
              "static": {
                "class": "slds-scrollable_y"
              }
            },
            "children": [
              {
                "name": "listItem",
                "restrict": [
                  "li"
                ],
                "description": "Single record row in the list, presented as a listbox option container.",
                "repeats": true,
                "attributes": {
                  "static": {
                    "class": "slds-split-view__list-item"
                  }
                },
                "children": [
                  {
                    "name": "unreadIndicator",
                    "restrict": [
                      "abbr"
                    ],
                    "description": "Dot indicator anchored to the inline-start edge of an unread list item.",
                    "renderWhen": {
                      "prop": "unread",
                      "eq": "true"
                    },
                    "attributes": {
                      "static": {
                        "class": "slds-indicator_unread"
                      }
                    },
                    "children": [
                      {
                        "name": "unreadAssistiveText",
                        "restrict": [
                          "span"
                        ],
                        "description": "Visually hidden label announcing the unread state.",
                        "attributes": {
                          "static": {
                            "class": "slds-assistive-text"
                          }
                        }
                      }
                    ]
                  },
                  {
                    "name": "itemAction",
                    "restrict": [
                      "a"
                    ],
                    "description": "Actionable region of the row that selects the record; receives focus and the aria-current selected treatment.",
                    "attributes": {
                      "static": {
                        "class": "slds-split-view__list-item-action slds-grow slds-has-flexi-truncate"
                      }
                    }
                  }
                ]
              }
            ]
          }
        ]
      }
    ]
  },
  "stateClasses": [
    {
      "state": "open",
      "class": "slds-is-open"
    },
    {
      "state": "closed",
      "class": "slds-is-closed"
    },
    {
      "state": "unread",
      "class": "slds-is-unread"
    }
  ],
  "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"
        }
      }
    }
  },
  "states": [
    {
      "name": "open",
      "type": "boolean",
      "description": "Whether the component is in the open state"
    },
    {
      "name": "closed",
      "type": "boolean",
      "description": "Whether the component is in the closed state"
    },
    {
      "name": "unread",
      "type": "boolean",
      "description": "Whether the component is in the unread state"
    }
  ]
}