{
  "_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": "AvatarGroup",
  "description": "Creates an Avatar Group.",
  "structure": {
    "name": "root",
    "restrict": [
      "span",
      "div"
    ],
    "description": "Container that positions the primary and secondary avatars as an overlapping pair.",
    "children": [
      {
        "name": "primary",
        "restrict": [
          "span",
          "div"
        ],
        "description": "Modifier for the primary Avatar in an Avatar Group.",
        "slot": {
          "name": "primary",
          "restrict": [
            "Avatar",
            "Icon"
          ]
        },
        "attributes": {
          "static": {
            "class": "slds-avatar slds-avatar-grouped slds-avatar-grouped__primary"
          }
        },
        "modifiers": [
          {
            "name": "inverse",
            "attribute": "class",
            "value": "slds-avatar-grouped_inverse",
            "description": "Variant of an Avatar with inverse background in an Avatar Group."
          },
          {
            "name": "icon",
            "attribute": "class",
            "value": "slds-avatar-grouped__icon",
            "description": "Modifier for the icon Avatar in an Avatar Group."
          }
        ],
        "children": [
          {
            "name": "initials",
            "attributes": {
              "static": {
                "class": "slds-avatar__initials slds-avatar-grouped__initials"
              }
            },
            "description": "Modifier for the Avatar that contains User Initials in an Avatar Group.",
            "modifiers": [
              {
                "name": "inverse",
                "attribute": "class",
                "value": "slds-avatar__initials_inverse",
                "description": "Inverse-colored initials, paired with the inverse avatar background."
              }
            ]
          },
          {
            "name": "iconContainer",
            "attributes": {
              "static": {
                "class": "slds-icon_container"
              }
            }
          },
          {
            "name": "icon",
            "attributes": {
              "static": {
                "class": "slds-icon"
              }
            }
          },
          {
            "name": "assistiveText",
            "attributes": {
              "static": {
                "class": "slds-assistive-text"
              }
            }
          }
        ]
      },
      {
        "name": "secondary",
        "restrict": [
          "span",
          "div"
        ],
        "description": "Modifier for the secondary Avatar in an Avatar Group.",
        "slot": {
          "name": "secondary",
          "restrict": [
            "Avatar",
            "Icon"
          ]
        },
        "attributes": {
          "static": {
            "class": "slds-avatar slds-avatar-grouped slds-avatar-grouped__secondary"
          }
        },
        "modifiers": [
          {
            "name": "inverse",
            "attribute": "class",
            "value": "slds-avatar-grouped_inverse",
            "description": "Variant of an Avatar with inverse background in an Avatar Group."
          },
          {
            "name": "icon",
            "attribute": "class",
            "value": "slds-avatar-grouped__icon",
            "description": "Modifier for the icon Avatar in an Avatar Group."
          }
        ],
        "children": [
          {
            "name": "initials",
            "attributes": {
              "static": {
                "class": "slds-avatar__initials slds-avatar-grouped__initials"
              }
            },
            "description": "Modifier for the Avatar that contains User Initials in an Avatar Group.",
            "modifiers": [
              {
                "name": "inverse",
                "attribute": "class",
                "value": "slds-avatar__initials_inverse",
                "description": "Inverse-colored initials, paired with the inverse avatar background."
              }
            ]
          },
          {
            "name": "iconContainer",
            "attributes": {
              "static": {
                "class": "slds-icon_container"
              }
            }
          },
          {
            "name": "icon",
            "attributes": {
              "static": {
                "class": "slds-icon"
              }
            }
          },
          {
            "name": "assistiveText",
            "attributes": {
              "static": {
                "class": "slds-assistive-text"
              }
            }
          }
        ]
      }
    ],
    "attributes": {
      "static": {
        "class": "slds-avatar-group"
      }
    },
    "variants": [
      {
        "name": "size",
        "description": "Sets the overall size of the avatar group and scales its primary and secondary avatars proportionally.",
        "default": "medium",
        "options": [
          {
            "value": "x-small",
            "class": "slds-avatar-group_x-small",
            "description": "Creates an extra small Avatar Group."
          },
          {
            "value": "small",
            "class": "slds-avatar-group_small",
            "description": "Creates a small Avatar Group."
          },
          {
            "value": "medium",
            "class": "slds-avatar-group_medium",
            "description": "Creates a medium Avatar Group."
          },
          {
            "value": "large",
            "class": "slds-avatar-group_large",
            "description": "Creates a large Avatar Group."
          }
        ]
      }
    ]
  },
  "states": [],
  "accessibility": {
    "requirements": [
      {
        "id": "alt-text",
        "description": "Each avatar image must have meaningful alt text identifying the person or entity it represents."
      },
      {
        "id": "icon-label",
        "description": "Icon-based avatars must expose an accessible name through visually hidden text or an equivalent label."
      },
      {
        "id": "initials-label",
        "description": "Avatars displayed as initials must expose the full name via title or an equivalent accessible label."
      }
    ]
  },
  "extensions": {
    "com.salesforce-ux": {
      "genReady": false
    }
  },
  "cssSource": "./avatarGroup.css",
  "styleApi": {
    "status": "stable",
    "ready": true
  }
}