{
  "name": "avatar",
  "displayName": "Avatar",
  "type": "shadow",
  "isCustomElement": true,
  "tag": "l-avatar",
  "nativeTag": null,
  "selector": "l-avatar",
  "subItemOf": null,
  "summary": "An avatar component for displaying user images, initials, or a default icon.",
  "status": "stable",
  "appearances": [],
  "import": {
    "css": "luxen-ui/css/avatar",
    "js": "luxen-ui/avatar"
  },
  "properties": [
    {
      "name": "src",
      "attribute": "src",
      "type": "string",
      "default": "''",
      "reflects": false,
      "description": "Image URL. Falls back to initials (then the default icon) if it fails to load."
    },
    {
      "name": "name",
      "attribute": "name",
      "type": "string",
      "default": "''",
      "reflects": false,
      "description": "Name used as the accessible label and to derive the initials fallback."
    },
    {
      "name": "size",
      "attribute": "size",
      "type": "string",
      "default": "'md'",
      "reflects": true,
      "description": "Avatar size: `xs`, `sm`, `md` (default), `lg`, or `xl`."
    },
    {
      "name": "badge",
      "attribute": "badge",
      "type": "number",
      "default": "0",
      "reflects": false,
      "description": "Count shown in the corner badge. `0` hides the badge."
    },
    {
      "name": "interactive",
      "attribute": "interactive",
      "type": "boolean",
      "default": "false",
      "reflects": true,
      "description": "Render as a `<button>` with focus ring and hover states."
    }
  ],
  "attributes": [],
  "events": [],
  "methods": [],
  "slots": [],
  "cssClasses": [
    {
      "name": ".l-avatar-group",
      "description": "Flex wrapper that overlaps a row of stacked avatars."
    }
  ],
  "cssParts": [
    {
      "name": "base",
      "description": "The avatar container that paints `--color`; style it (e.g. `color`) to override the auto-derived text color."
    }
  ],
  "cssProperties": [
    {
      "name": "--size",
      "default": "40px",
      "description": "Box size (any length). Set it inline (e.g. `style=\"--size: 20px\"`) for an arbitrary size beyond the `size` token scale; the font then follows proportionally. The `size` attribute sets it to the matching token."
    },
    {
      "name": "--color",
      "default": null,
      "description": "Background fill color for initials and the default icon."
    },
    {
      "name": "--text-color",
      "default": null,
      "description": "Initials/icon color over `--color`. Defaults to an auto-derived readable color; set it to enforce a specific brand color (overrides the automatic choice)."
    },
    {
      "name": "--appearance",
      "default": null,
      "description": "Set to `circle` for a fully circular avatar (default is a rounded square)."
    }
  ],
  "commands": [],
  "examples": []
}