{
  "_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": "Modal",
  "description": "Modals are used to display content in a layer above the app.",
  "structure": {
    "name": "root",
    "restrict": [
      "section",
      "div"
    ],
    "description": "Modal container",
    "attributes": {
      "static": {
        "role": "dialog",
        "aria-modal": "true",
        "tabindex": "-1"
      },
      "bound": {
        "aria-labelledby": {
          "prop": "headingId"
        },
        "aria-describedby": {
          "prop": "contentId"
        }
      }
    },
    "children": [
      {
        "name": "backdrop",
        "restrict": [
          "div"
        ],
        "description": "background overlay behind modal",
        "attributes": {
          "static": {
            "role": "presentation"
          }
        }
      },
      {
        "name": "container",
        "restrict": [
          "div"
        ],
        "description": "Modal dialog container",
        "children": [
          {
            "name": "close",
            "restrict": [
              "button"
            ],
            "description": "Close button (commonly rendered above the header)",
            "attributes": {
              "bound": {
                "aria-label": {
                  "prop": "closeLabel"
                }
              }
            },
            "children": [
              {
                "name": "closeIcon",
                "description": "Close icon glyph",
                "component": "PrimitiveIcon"
              },
              {
                "name": "closeAssistiveText",
                "restrict": [
                  "span"
                ],
                "description": "Visually hidden label announcing the close action",
                "slot": {
                  "name": "closeAssistiveText"
                }
              }
            ]
          },
          {
            "name": "header",
            "restrict": [
              "header",
              "div"
            ],
            "description": "Modal header",
            "children": [
              {
                "name": "heading",
                "restrict": [
                  "h1",
                  "h2"
                ],
                "description": "Modal heading",
                "slot": {
                  "name": "heading",
                  "required": true
                }
              },
              {
                "name": "tagline",
                "restrict": [
                  "p"
                ],
                "description": "Optional supporting tagline displayed beneath the heading",
                "renderWhen": "slotFilled",
                "slot": {
                  "name": "tagline"
                },
                "children": [
                  {
                    "name": "taglineLink",
                    "restrict": [
                      "a"
                    ],
                    "description": "Optional inline link inside the tagline copy"
                  }
                ]
              }
            ]
          },
          {
            "name": "content",
            "restrict": [
              "div"
            ],
            "description": "Modal content/body",
            "slot": {
              "name": "default",
              "required": true
            }
          },
          {
            "name": "menuContent",
            "restrict": [
              "div"
            ],
            "description": "Alternate menu-style content region used when the modal acts as a menu surface",
            "renderWhen": {
              "prop": "contentLayout",
              "eq": "menu"
            },
            "slot": {
              "name": "menu"
            }
          },
          {
            "name": "footer",
            "restrict": [
              "footer",
              "div"
            ],
            "description": "Modal footer with actions",
            "renderWhen": "slotFilled",
            "slot": {
              "name": "footer"
            }
          }
        ]
      }
    ]
  },
  "states": [
    {
      "name": "open",
      "type": "boolean",
      "description": "Whether the modal is visible"
    },
    {
      "name": "closeDisabled",
      "type": "boolean",
      "description": "Whether the close affordance is disabled"
    }
  ],
  "accessibility": {
    "requirements": [
      {
        "id": "focus-trap",
        "description": "Focus must be trapped within the modal when open"
      },
      {
        "id": "escape-close",
        "description": "Pressing Escape should close the modal"
      },
      {
        "id": "focus-restore",
        "description": "Focus should return to the triggering element when modal closes"
      },
      {
        "id": "aria-modal",
        "description": "Modal must have aria-modal='true' and appropriate role"
      },
      {
        "id": "close-label",
        "description": "Close affordance must expose an accessible name (aria-label or visually hidden text)"
      }
    ]
  },
  "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"
        }
      }
    }
  }
}