{
  "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",
  "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": [],
    "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';"
  }
}