{
  "$schema": "https://json.schemastore.org/web-types",
  "name": "@scoped-vaadin/avatar",
  "version": "24.6.2",
  "description-markup": "markdown",
  "contributions": {
    "html": {
      "elements": [
        {
          "name": "vaadin24-avatar",
          "description": "`<vaadin24-avatar>` is a Web Component providing avatar displaying functionality.\n\n```html\n<vaadin24-avatar img=\"avatars/avatar-1.jpg\"></vaadin24-avatar>\n```\n\n### Styling\n\nThe following shadow DOM parts are exposed for styling:\n\nPart name | Description\n--------- | ---------------\n`abbr`    | The abbreviation element\n`icon`    | The icon element\n\nThe following state attributes are available for styling:\n\nAttribute         | Description\n------------------|-------------\n`focus-ring`      | Set when the avatar is focused using the keyboard.\n`focused`         | Set when the avatar is focused.\n`has-color-index` | Set when the avatar has `colorIndex` and the corresponding custom CSS property exists.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
          "attributes": [
            {
              "name": "img",
              "description": "The path to the image",
              "value": {
                "type": [
                  "string",
                  "null",
                  "undefined"
                ]
              }
            },
            {
              "name": "abbr",
              "description": "A shortened form of name that is displayed\nin the avatar when `img` is not provided.",
              "value": {
                "type": [
                  "string",
                  "null",
                  "undefined"
                ]
              }
            },
            {
              "name": "name",
              "description": "Full name of the user\nused for the tooltip of the avatar.",
              "value": {
                "type": [
                  "string",
                  "null",
                  "undefined"
                ]
              }
            },
            {
              "name": "color-index",
              "description": "Color index used for avatar background.",
              "value": {
                "type": [
                  "number",
                  "null",
                  "undefined"
                ]
              }
            },
            {
              "name": "with-tooltip",
              "description": "When true, the avatar has tooltip shown on hover and focus.\nThe tooltip text is based on the `name` and `abbr` properties.\nWhen neither is provided, `i18n.anonymous` is used instead.",
              "value": {
                "type": [
                  "boolean",
                  "null",
                  "undefined"
                ]
              }
            },
            {
              "name": "theme",
              "description": "The theme variants to apply to the component.",
              "value": {
                "type": [
                  "string",
                  "null",
                  "undefined"
                ]
              }
            }
          ],
          "js": {
            "properties": [
              {
                "name": "img",
                "description": "The path to the image",
                "value": {
                  "type": [
                    "string",
                    "null",
                    "undefined"
                  ]
                }
              },
              {
                "name": "abbr",
                "description": "A shortened form of name that is displayed\nin the avatar when `img` is not provided.",
                "value": {
                  "type": [
                    "string",
                    "null",
                    "undefined"
                  ]
                }
              },
              {
                "name": "name",
                "description": "Full name of the user\nused for the tooltip of the avatar.",
                "value": {
                  "type": [
                    "string",
                    "null",
                    "undefined"
                  ]
                }
              },
              {
                "name": "colorIndex",
                "description": "Color index used for avatar background.",
                "value": {
                  "type": [
                    "number",
                    "null",
                    "undefined"
                  ]
                }
              },
              {
                "name": "i18n",
                "description": "The object used to localize this component.\nTo change the default localization, replace the entire\n_i18n_ object or just the property you want to modify.\n\nThe object has the following JSON structure and default values:\n\n```\n{\n  // Translation of the anonymous user avatar tooltip.\n  anonymous: 'anonymous'\n}\n```",
                "value": {
                  "type": [
                    "AvatarI18n"
                  ]
                }
              },
              {
                "name": "withTooltip",
                "description": "When true, the avatar has tooltip shown on hover and focus.\nThe tooltip text is based on the `name` and `abbr` properties.\nWhen neither is provided, `i18n.anonymous` is used instead.",
                "value": {
                  "type": [
                    "boolean",
                    "null",
                    "undefined"
                  ]
                }
              }
            ],
            "events": []
          }
        }
      ]
    }
  }
}