{
  "_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": "Panel",
  "description": "Docked or inline container that surfaces secondary content alongside a primary view, with optional header, body, sections, and footer actions.",
  "extensions": {
    "com.salesforce-ux": {
      "genReady": false
    }
  },
  "cssSource": "./panel.css",
  "styleApi": {
    "status": "stable",
    "ready": true
  },
  "structure": {
    "name": "panel",
    "restrict": [
      "div",
      "aside",
      "section"
    ],
    "description": "Root panel container.",
    "attributes": {
      "static": {
        "class": "slds-panel"
      }
    },
    "modifiers": [
      {
        "name": "drawer",
        "attribute": "class",
        "value": "slds-panel_drawer",
        "description": "Drawer treatment applied on top of a docked panel."
      },
      {
        "name": "animated",
        "attribute": "class",
        "value": "slds-panel_animated",
        "description": "Hides the panel offscreen and animates it in when opened."
      },
      {
        "name": "filters",
        "attribute": "class",
        "value": "slds-panel_filters",
        "description": "Filter-panel treatment with shadow and inline-start spacing."
      }
    ],
    "variants": [
      {
        "name": "docked",
        "description": "Mutually exclusive docked position. Combines slds-panel_docked with a side modifier.",
        "options": [
          {
            "value": "left",
            "class": "slds-panel_docked slds-panel_docked-left",
            "description": "Panel docked to the inline-start edge."
          },
          {
            "value": "right",
            "class": "slds-panel_docked slds-panel_docked-right",
            "description": "Panel docked to the inline-end edge."
          }
        ]
      }
    ],
    "children": [
      {
        "name": "header",
        "restrict": [
          "div",
          "header"
        ],
        "description": "Panel header containing title, back, close, and secondary actions.",
        "attributes": {
          "static": {
            "class": "slds-panel__header"
          }
        },
        "modifiers": [
          {
            "name": "alignCenter",
            "attribute": "class",
            "value": "slds-panel__header_align-center",
            "description": "Centers the header title and absolutely positions back and close buttons."
          },
          {
            "name": "custom",
            "attribute": "class",
            "value": "slds-panel__header_custom",
            "description": "Adjusts header padding when the header contains content other than a title and close button."
          }
        ],
        "children": [
          {
            "name": "back",
            "restrict": [
              "button"
            ],
            "description": "Back button used when the panel is drilled in.",
            "attributes": {
              "static": {
                "class": "slds-button slds-button_icon slds-button_icon-small slds-panel__back"
              }
            }
          },
          {
            "name": "headerTitle",
            "restrict": [
              "h1",
              "h2",
              "h3"
            ],
            "description": "Panel header title.",
            "attributes": {
              "static": {
                "class": "slds-panel__header-title slds-text-heading_small slds-truncate"
              }
            }
          },
          {
            "name": "headerActions",
            "restrict": [
              "div"
            ],
            "description": "Container for header secondary actions (overflow menus, close button, etc.).",
            "attributes": {
              "static": {
                "class": "slds-panel__header-actions"
              }
            },
            "children": [
              {
                "name": "close",
                "restrict": [
                  "button"
                ],
                "description": "Close button for the panel.",
                "attributes": {
                  "static": {
                    "class": "slds-button slds-button_icon slds-button_icon-small slds-panel__close"
                  }
                }
              }
            ]
          }
        ]
      },
      {
        "name": "body",
        "restrict": [
          "div"
        ],
        "description": "Panel body. Accepts any layout or composed component.",
        "attributes": {
          "static": {
            "class": "slds-panel__body"
          }
        }
      },
      {
        "name": "section",
        "restrict": [
          "div",
          "section"
        ],
        "description": "Sub-section of a panel, used to group related content.",
        "repeats": true,
        "attributes": {
          "static": {
            "class": "slds-panel__section"
          }
        }
      },
      {
        "name": "actions",
        "restrict": [
          "div"
        ],
        "description": "Footer container for primary actions (e.g., Save / Cancel).",
        "attributes": {
          "static": {
            "class": "slds-panel__actions"
          }
        }
      }
    ]
  },
  "stateClasses": [
    {
      "state": "open",
      "class": "slds-is-open"
    },
    {
      "state": "editing",
      "class": "slds-is-editing"
    }
  ],
  "states": [
    {
      "name": "open",
      "type": "boolean",
      "description": "Whether the component is in the open state"
    },
    {
      "name": "editing",
      "type": "boolean",
      "description": "Whether the component is in the editing state"
    }
  ]
}