{
  "_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": "Popover",
  "description": "A popover is a non-modal dialog that displays contextual information.",
  "structure": {
    "name": "root",
    "restrict": [
      "section",
      "div"
    ],
    "description": "Popover container",
    "attributes": {
      "static": {
        "role": "dialog"
      },
      "bound": {
        "aria-labelledby": {
          "prop": "headingId"
        },
        "aria-describedby": {
          "prop": "bodyId"
        },
        "aria-label": {
          "prop": "label"
        }
      }
    },
    "children": [
      {
        "name": "close",
        "restrict": [
          "button"
        ],
        "description": "Close button anchored inside the popover surface",
        "slot": {
          "name": "close",
          "restrict": [
            "Button"
          ]
        }
      },
      {
        "name": "header",
        "restrict": [
          "header",
          "div"
        ],
        "description": "Popover header containing the heading and optional figure",
        "renderWhen": "slotFilled",
        "children": [
          {
            "name": "heading",
            "restrict": [
              "h2"
            ],
            "description": "Popover heading",
            "slot": {
              "name": "heading",
              "required": true
            }
          },
          {
            "name": "headerIcon",
            "restrict": [
              "span"
            ],
            "description": "Optional icon glyph rendered alongside the heading"
          }
        ]
      },
      {
        "name": "body",
        "restrict": [
          "div"
        ],
        "description": "Popover body content",
        "attributes": {
          "bound": {
            "id": {
              "prop": "bodyId"
            }
          }
        },
        "slot": {
          "name": "default",
          "required": true
        },
        "children": [
          {
            "name": "meta",
            "restrict": [
              "div"
            ],
            "description": "Badge or metadata area rendered at the top of the body",
            "renderWhen": "slotFilled",
            "slot": {
              "name": "meta"
            }
          },
          {
            "name": "bodyIcon",
            "restrict": [
              "span"
            ],
            "description": "Optional icon glyph rendered alongside body content"
          }
        ]
      },
      {
        "name": "footer",
        "restrict": [
          "footer",
          "div"
        ],
        "description": "Popover footer",
        "renderWhen": "slotFilled",
        "slot": {
          "name": "footer"
        }
      }
    ]
  },
  "states": [
    {
      "name": "open",
      "type": "boolean",
      "aria": "aria-expanded",
      "description": "Whether the popover is visible"
    }
  ],
  "accessibility": {
    "requirements": [
      {
        "id": "dialog-role",
        "description": "Popover must have role='dialog'"
      },
      {
        "id": "dialog-label",
        "description": "Popover must be labelled via aria-labelledby (preferred) or aria-label"
      },
      {
        "id": "dialog-describedby",
        "description": "Popover should reference its body region via aria-describedby"
      },
      {
        "id": "focus-management",
        "description": "Focus should move to the popover (or its close button) when opened and return to the trigger when closed"
      },
      {
        "id": "escape-close",
        "description": "Pressing Escape should close the popover"
      },
      {
        "id": "scrollable-region",
        "description": "When the body scrolls it must be focusable (tabindex=0) and carry role='region' so keyboard users can reach scrollable content"
      }
    ]
  }
}