{
  "tag": "ed-avatar",
  "kind": "component",
  "summary": "Shows a person or entity as a photo, initials or icon, so users recognize at a glance who is meant.",
  "status": "experimental",
  "level": "atom",
  "since": "1.0",
  "docs": "https://test-apps.eurodata.de/a/eurodata-ui/docs/components/avatar/",
  "usage": "https://test-apps.eurodata.de/a/eurodata-ui/docs/components/avatar/usage/",
  "playwright": "getByTestId('…')",
  "dependencies": [
    "ed-icon"
  ],
  "use": [
    "Showing who a record belongs to at a glance — profile menu, account header, comment author, assignee marker, team list",
    "Marking which employee or advisor is assigned to a task or last edited a record, in a list row",
    "Showing a person's initials when no photo exists, so every row in a team list still has a recognizable marker"
  ],
  "notFor": [
    {
      "when": "A status, notification, or count attached to an item",
      "instead": "[Badge](https://test-apps.eurodata.de/a/eurodata-ui/docs/components/badge)"
    }
  ],
  "rules": [
    {
      "id": "avatar/meaningful-label",
      "rule": "Always give an avatar a meaningful description for assistive devices, naming who or what it represents — the person's full name when their name is not already shown in text right next to the avatar. Never leave it empty or generic (\"user\", \"avatar\", \"profile picture\"). If you cannot say who or what it represents, you probably do not need an avatar.",
      "why": "An avatar identifies a real person or entity, so it is informative, never decorative; the description gives screen-reader users the same identity sighted users get. A generic description is even worse than an empty one: an unlabeled avatar is at least hidden from assistive devices, while a vague label adds noise without adding identity.",
      "check": "error"
    },
    {
      "id": "avatar/initials",
      "rule": "Supply initials as the fallback when no photo is available — one or two characters, derived properly from the name (\"John Smith\" becomes \"JS\", not \"JO\"). Never more than two.",
      "why": "Initials are more personal and recognizable than a generic icon, and three or more characters become unreadable at avatar size.",
      "check": "error"
    },
    {
      "id": "avatar/fallback-icon",
      "rule": "Don't add your own last-resort fallback for when there is neither a photo nor initials — the component shows a person icon; let it stand.",
      "check": "error"
    },
    {
      "id": "avatar/one-shape",
      "rule": "Keep one avatar shape within a single context, list or group — never mix circle, square, and rounded there.",
      "why": "One shape makes the group read as one system.",
      "check": "error"
    },
    {
      "id": "avatar/size",
      "rule": "Keep avatars small and size them to their context — smaller in dense lists, larger in profile headers — and never grow one so large it competes with real content images.",
      "why": "An avatar is an identity marker, not a hero image."
    },
    {
      "id": "avatar/group-overflow",
      "rule": "Stack avatars into an overlapping group to show membership compactly, and cap the group with a \"+N\" counter that reveals the rest on demand."
    },
    {
      "id": "avatar/lazy-load",
      "rule": "Lazily load off-screen avatar images in long lists, so the page stays fast.",
      "check": "warning"
    },
    {
      "id": "avatar/not-alone-for-status",
      "rule": "Never rely on an avatar alone to communicate presence, role, or unread state — pair it with a clearly labeled indicator."
    }
  ],
  "api": {
    "attributes": [
      {
        "name": "image",
        "property": "image",
        "type": "string",
        "default": "''",
        "description": "The image source to use for the avatar."
      },
      {
        "name": "label",
        "property": "label",
        "type": "string",
        "default": "''",
        "description": "A label to use to describe the avatar to assistive devices."
      },
      {
        "name": "initials",
        "property": "initials",
        "type": "string",
        "default": "''",
        "description": "Initials to use as a fallback when no image is available (1-2 characters max recommended)."
      },
      {
        "name": "loading",
        "property": "loading",
        "type": "'eager' | 'lazy'",
        "default": "'eager'",
        "description": "Indicates how the browser should load the image."
      },
      {
        "name": "variant",
        "property": "variant",
        "type": "'new' | 'warning' | 'brand' | 'ai' | 'info' | 'neutral' | 'success' | 'danger'",
        "default": "'brand'",
        "description": "The avatar's theme variant. It tints the background and the initials or icon."
      },
      {
        "name": "shape",
        "property": "shape",
        "type": "'circle' | 'square' | 'rounded'",
        "default": "'circle'",
        "description": "The shape of the avatar."
      },
      {
        "name": "dir",
        "property": "dir",
        "type": "string"
      },
      {
        "name": "lang",
        "property": "lang",
        "type": "string"
      }
    ],
    "properties": [],
    "methods": [
      {
        "name": "getPropertyDescriptor",
        "static": true,
        "parameters": [
          {
            "name": "name",
            "type": "PropertyKey"
          },
          {
            "name": "key",
            "type": "string | symbol"
          },
          {
            "name": "options",
            "type": "PropertyDeclaration"
          }
        ],
        "returns": "PropertyDescriptor | undefined",
        "description": "Wraps the accessor of reflected properties so they always hold a valid value, as a native\nreflected IDL attribute does (`button.type = undefined` reads `submit`):\n\n- A property that declares `useDefault` takes the first value set on an element for its\n  default. That value is its field initializer's: the constructor has finished before markup,\n  a framework or any other code can set anything. Every later `null` or `undefined` means what\n  a dropped prop means on a native element — the attribute is removed: with the attribute\n  there, it is removed and Lit's `useDefault` restores the default without writing it; without\n  one, the property is set to the default. A value set and cleared again before the element\n  updates still writes the default once, from the pending reflection.\n- A Boolean is coerced with `Boolean()`, so `undefined` is `false`.\n\nLit's `useDefault` keeps the initial default out of the DOM. Setting the default explicitly\nwrites it, as `button.type = 'submit'` writes `type`."
      }
    ],
    "events": [
      {
        "name": "ed-error",
        "react": "onEdError",
        "description": "The image could not be loaded. This may because of an invalid URL, a temporary network condition, or some unknown cause."
      }
    ],
    "slots": [
      {
        "name": "icon",
        "description": "The default icon to use when no image or initials are present. Works best with `<ed-icon>`."
      }
    ],
    "cssProperties": [
      {
        "name": "--ed-avatar-size",
        "description": "The size of the avatar."
      }
    ],
    "parts": [
      {
        "name": "icon",
        "description": "The container that wraps the avatar's icon."
      },
      {
        "name": "initials",
        "description": "The container that wraps the avatar's initials."
      },
      {
        "name": "image",
        "description": "The avatar image. Only shown when the `image` attribute is set."
      }
    ],
    "states": []
  },
  "import": "import '@eurodata/eurodata-ui/dist/components/avatar/avatar.js';",
  "react": {
    "component": "EdAvatar",
    "import": "import EdAvatar from '@eurodata/eurodata-ui/dist/react/avatar/index.js';"
  }
}