@vaadin/avatar 23.2.0-dev.8a7678b70 → 23.3.0-alpha1

package/README.md

@@ -2,7 +2,7 @@
 
 A web component for graphical representation of an object or entity, for example a person or an organization.
 
-[Documentation + Live Demo ↗](https://vaadin.com/docs/latest/ds/components/avatar)
+[Documentation + Live Demo ↗](https://vaadin.com/docs/latest/components/avatar)
 
 [![npm version](https://badgen.net/npm/v/@vaadin/avatar)](https://www.npmjs.com/package/@vaadin/avatar)
 [![Discord](https://img.shields.io/discord/732335336448852018?label=discord)](https://discord.gg/PHmkCKC)
@@ -13,7 +13,7 @@ A web component for graphical representation of an object or entity, for example
 <vaadin-avatar abbr="SK"></vaadin-avatar>
 ```
 
-[<img src="https://raw.githubusercontent.com/vaadin/web-components/master/packages/avatar/screenshot.png" width="132" alt="Screenshot of vaadin-avatar">](https://vaadin.com/docs/latest/ds/components/avatar)
+[<img src="https://raw.githubusercontent.com/vaadin/web-components/master/packages/avatar/screenshot.png" width="132" alt="Screenshot of vaadin-avatar">](https://vaadin.com/docs/latest/components/avatar)
 
 ## Installation
 
@@ -31,7 +31,7 @@ import '@vaadin/avatar';
 
 ## Themes
 
-Vaadin components come with two built-in [themes](https://vaadin.com/docs/latest/ds/customization/using-themes), Lumo and Material.
+Vaadin components come with two built-in [themes](https://vaadin.com/docs/latest/styling), Lumo and Material.
 The [main entrypoint](https://github.com/vaadin/web-components/blob/master/packages/avatar/vaadin-avatar.js) of the package uses the Lumo theme.
 
 To use the Material theme, import the component from the `theme/material` folder:
@@ -54,7 +54,7 @@ import '@vaadin/avatar/src/vaadin-avatar.js';
 
 ## Contributing
 
-Read the [contributing guide](https://vaadin.com/docs/latest/guide/contributing/overview) to learn about our development process, how to propose bugfixes and improvements, and how to test your changes to Vaadin components.
+Read the [contributing guide](https://vaadin.com/docs/latest/contributing/overview) to learn about our development process, how to propose bugfixes and improvements, and how to test your changes to Vaadin components.
 
 ## License
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/avatar",
-  "version": "23.2.0-dev.8a7678b70",
+  "version": "23.3.0-alpha1",
   "publishConfig": {
     "access": "public"
   },
@@ -23,7 +23,9 @@
     "src",
     "theme",
     "vaadin-*.d.ts",
-    "vaadin-*.js"
+    "vaadin-*.js",
+    "web-types.json",
+    "web-types.lit.json"
   ],
   "keywords": [
     "Vaadin",
@@ -35,18 +37,23 @@
   ],
   "dependencies": {
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/component-base": "23.2.0-dev.8a7678b70",
-    "@vaadin/item": "23.2.0-dev.8a7678b70",
-    "@vaadin/list-box": "23.2.0-dev.8a7678b70",
-    "@vaadin/vaadin-lumo-styles": "23.2.0-dev.8a7678b70",
-    "@vaadin/vaadin-material-styles": "23.2.0-dev.8a7678b70",
-    "@vaadin/vaadin-overlay": "23.2.0-dev.8a7678b70",
-    "@vaadin/vaadin-themable-mixin": "23.2.0-dev.8a7678b70"
+    "@vaadin/component-base": "23.3.0-alpha1",
+    "@vaadin/item": "23.3.0-alpha1",
+    "@vaadin/list-box": "23.3.0-alpha1",
+    "@vaadin/tooltip": "23.3.0-alpha1",
+    "@vaadin/vaadin-lumo-styles": "23.3.0-alpha1",
+    "@vaadin/vaadin-material-styles": "23.3.0-alpha1",
+    "@vaadin/vaadin-overlay": "23.3.0-alpha1",
+    "@vaadin/vaadin-themable-mixin": "23.3.0-alpha1"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
     "@vaadin/testing-helpers": "^0.3.2",
     "sinon": "^13.0.2"
   },
-  "gitHead": "85b403f96d8282f262322b56c0ff4289f843d02a"
+  "web-types": [
+    "web-types.json",
+    "web-types.lit.json"
+  ],
+  "gitHead": "beabc527d4b1274eb798ff701d406fed45cfe638"
 }

package/src/vaadin-avatar-icons.js

@@ -3,9 +3,9 @@
  * Copyright (c) 2020 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-const $_documentContainer = document.createElement('template');
+const template = document.createElement('template');
 
-$_documentContainer.innerHTML = `
+template.innerHTML = `
   <style>
     @font-face {
       font-family: 'vaadin-avatar-icons';
@@ -16,4 +16,4 @@ $_documentContainer.innerHTML = `
   </style>
 `;
 
-document.head.appendChild($_documentContainer.content);
+document.head.appendChild(template.content);

package/src/vaadin-avatar.d.ts

@@ -3,6 +3,7 @@
  * Copyright (c) 2020 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
+import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
 import { FocusMixin } from '@vaadin/component-base/src/focus-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
@@ -35,9 +36,9 @@ export interface AvatarI18n {
  * `focused`         | Set when the avatar is focused.
  * `has-color-index` | Set when the avatar has `colorIndex` and the corresponding custom CSS property exists.
  *
- * See [Styling Components](https://vaadin.com/docs/latest/ds/customization/styling-components) documentation.
+ * See [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.
  */
-declare class Avatar extends FocusMixin(ElementMixin(ThemableMixin(HTMLElement))) {
+declare class Avatar extends FocusMixin(ElementMixin(ThemableMixin(ControllerMixin(HTMLElement)))) {
   /**
    * The path to the image
    */
@@ -51,12 +52,13 @@ declare class Avatar extends FocusMixin(ElementMixin(ThemableMixin(HTMLElement))
 
   /**
    * Full name of the user
-   * used for the title of the avatar.
+   * used for the tooltip of the avatar.
    */
   name: string | null | undefined;
 
   /**
    * Color index used for avatar background.
+   * @attr {number} color-index
    */
   colorIndex: number | null | undefined;
 
@@ -66,12 +68,23 @@ declare class Avatar extends FocusMixin(ElementMixin(ThemableMixin(HTMLElement))
    * _i18n_ object or just the property you want to modify.
    *
    * The object has the following JSON structure and default values:
-   *           {
-   *             // Translation of the anonymous user avatar title.
-   *             anonymous: 'anonymous'
-   *           }
+   *
+   * ```
+   * {
+   *   // Translation of the anonymous user avatar tooltip.
+   *   anonymous: 'anonymous'
+   * }
+   * ```
    */
   i18n: AvatarI18n;
+
+  /**
+   * When true, the avatar has tooltip shown on hover and focus.
+   * The tooltip text is based on the `name` and `abbr` properties.
+   * When neither is provided, `i18n.anonymous` is used instead.
+   * @attr {boolean} with-tooltip
+   */
+  withTooltip: boolean;
 }
 
 declare global {

package/src/vaadin-avatar.js

@@ -5,8 +5,10 @@
  */
 import './vaadin-avatar-icons.js';
 import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
+import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
 import { FocusMixin } from '@vaadin/component-base/src/focus-mixin.js';
+import { TooltipController } from '@vaadin/component-base/src/tooltip-controller.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
 /**
@@ -33,14 +35,15 @@ import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mix
  * `focused`         | Set when the avatar is focused.
  * `has-color-index` | Set when the avatar has `colorIndex` and the corresponding custom CSS property exists.
  *
- * See [Styling Components](https://vaadin.com/docs/latest/ds/customization/styling-components) documentation.
+ * See [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.
  *
  * @extends HTMLElement
+ * @mixes ControllerMixin
  * @mixes FocusMixin
  * @mixes ElementMixin
  * @mixes ThemableMixin
  */
-class Avatar extends FocusMixin(ElementMixin(ThemableMixin(PolymerElement))) {
+class Avatar extends FocusMixin(ElementMixin(ThemableMixin(ControllerMixin(PolymerElement)))) {
   static get template() {
     return html`
       <style>
@@ -49,13 +52,12 @@ class Avatar extends FocusMixin(ElementMixin(ThemableMixin(PolymerElement))) {
           flex: none;
           border-radius: 50%;
           overflow: hidden;
-          height: var(--vaadin-avatar-size);
-          width: var(--vaadin-avatar-size);
+          height: var(--vaadin-avatar-size, 64px);
+          width: var(--vaadin-avatar-size, 64px);
           border: var(--vaadin-avatar-outline-width) solid transparent;
           margin: calc(var(--vaadin-avatar-outline-width) * -1);
           background-clip: content-box;
           --vaadin-avatar-outline-width: 2px;
-          --vaadin-avatar-size: 64px;
         }
 
         img {
@@ -121,6 +123,8 @@ class Avatar extends FocusMixin(ElementMixin(ThemableMixin(PolymerElement))) {
       >
         <text dy=".35em" text-anchor="middle">[[abbr]]</text>
       </svg>
+
+      <slot name="tooltip"></slot>
     `;
   }
 
@@ -150,7 +154,7 @@ class Avatar extends FocusMixin(ElementMixin(ThemableMixin(PolymerElement))) {
 
       /**
        * Full name of the user
-       * used for the title of the avatar.
+       * used for the tooltip of the avatar.
        */
       name: {
         type: String,
@@ -159,6 +163,7 @@ class Avatar extends FocusMixin(ElementMixin(ThemableMixin(PolymerElement))) {
 
       /**
        * Color index used for avatar background.
+       * @attr {number} color-index
        */
       colorIndex: {
         type: Number,
@@ -171,13 +176,17 @@ class Avatar extends FocusMixin(ElementMixin(ThemableMixin(PolymerElement))) {
        * _i18n_ object or just the property you want to modify.
        *
        * The object has the following JSON structure and default values:
-          {
-            // Translation of the anonymous user avatar title.
-            anonymous: 'anonymous'
-          }
-      * @type {!AvatarI18n}
-      * @default {English/US}
-      */
+       *
+       * ```
+       * {
+       *   // Translation of the anonymous user avatar tooltip.
+       *   anonymous: 'anonymous'
+       * }
+       * ```
+       *
+       * @type {!AvatarI18n}
+       * @default {English/US}
+       */
       i18n: {
         type: Object,
         value: () => {
@@ -187,6 +196,18 @@ class Avatar extends FocusMixin(ElementMixin(ThemableMixin(PolymerElement))) {
         },
       },
 
+      /**
+       * When true, the avatar has tooltip shown on hover and focus.
+       * The tooltip text is based on the `name` and `abbr` properties.
+       * When neither is provided, `i18n.anonymous` is used instead.
+       * @attr {boolean} with-tooltip
+       */
+      withTooltip: {
+        type: Boolean,
+        value: false,
+        observer: '__withTooltipChanged',
+      },
+
       /** @private */
       __imgVisible: Boolean,
 
@@ -195,11 +216,18 @@ class Avatar extends FocusMixin(ElementMixin(ThemableMixin(PolymerElement))) {
 
       /** @private */
       __abbrVisible: Boolean,
+
+      /** @private */
+      __tooltipNode: Object,
     };
   }
 
   static get observers() {
-    return ['__imgOrAbbrOrNameChanged(img, abbr, name)', '__i18nChanged(i18n.*)'];
+    return [
+      '__imgOrAbbrOrNameChanged(img, abbr, name)',
+      '__i18nChanged(i18n.*)',
+      '__tooltipChanged(__tooltipNode, name, abbr)',
+    ];
   }
 
   /** @protected */
@@ -208,16 +236,19 @@ class Avatar extends FocusMixin(ElementMixin(ThemableMixin(PolymerElement))) {
 
     this.__updateVisibility();
 
-    // Should set `anonymous` if name / abbr is not provided
-    if (!this.name && !this.abbr) {
-      this.__setTitle(this.name);
-    }
-
     this.setAttribute('role', 'button');
 
     if (!this.hasAttribute('tabindex')) {
       this.setAttribute('tabindex', '0');
     }
+
+    this._tooltipController = new TooltipController(this);
+    this.addController(this._tooltipController);
+
+    // Should set `anonymous` if name / abbr is not provided
+    if (!this.name && !this.abbr) {
+      this.__setTooltip();
+    }
   }
 
   /** @private */
@@ -250,7 +281,6 @@ class Avatar extends FocusMixin(ElementMixin(ThemableMixin(PolymerElement))) {
     this.__updateVisibility();
 
     if (abbr && abbr !== this.__generatedAbbr) {
-      this.__setTitle(name ? `${name} (${abbr})` : abbr);
       return;
     }
 
@@ -262,15 +292,40 @@ class Avatar extends FocusMixin(ElementMixin(ThemableMixin(PolymerElement))) {
     } else {
       this.abbr = undefined;
     }
+  }
+
+  /** @private */
+  __tooltipChanged(tooltipNode, name, abbr) {
+    if (tooltipNode) {
+      if (abbr && abbr !== this.__generatedAbbr) {
+        this.__setTooltip(name ? `${name} (${abbr})` : abbr);
+      } else {
+        this.__setTooltip(name);
+      }
+    }
+  }
 
-    this.__setTitle(name);
+  /** @private */
+  __withTooltipChanged(withTooltip, oldWithTooltip) {
+    if (withTooltip) {
+      // Create and attach tooltip
+      const tooltipNode = document.createElement('vaadin-tooltip');
+      tooltipNode.setAttribute('slot', 'tooltip');
+      this.appendChild(tooltipNode);
+      this.__tooltipNode = tooltipNode;
+    } else if (oldWithTooltip) {
+      // Cleanup and detach tooltip
+      this.__tooltipNode.target = null;
+      this.__tooltipNode.remove();
+      this.__tooltipNode = null;
+    }
   }
 
   /** @private */
   __i18nChanged(i18n) {
     if (i18n.base && i18n.base.anonymous) {
-      if (this.__oldAnonymous && this.getAttribute('title') === this.__oldAnonymous) {
-        this.__setTitle();
+      if (this.__oldAnonymous && this.__tooltipNode && this.__tooltipNode.text === this.__oldAnonymous) {
+        this.__setTooltip();
       }
 
       this.__oldAnonymous = i18n.base.anonymous;
@@ -285,11 +340,10 @@ class Avatar extends FocusMixin(ElementMixin(ThemableMixin(PolymerElement))) {
   }
 
   /** @private */
-  __setTitle(title) {
-    if (title) {
-      this.setAttribute('title', title);
-    } else {
-      this.setAttribute('title', this.i18n.anonymous);
+  __setTooltip(tooltip) {
+    const tooltipNode = this.__tooltipNode;
+    if (tooltipNode) {
+      tooltipNode.text = tooltip || this.i18n.anonymous;
     }
   }
 

package/theme/lumo/vaadin-avatar-styles.js

@@ -6,11 +6,14 @@ import '@vaadin/vaadin-lumo-styles/typography.js';
 import '@vaadin/vaadin-lumo-styles/user-colors.js';
 import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
+const globalStyle = document.createElement('style');
+globalStyle.textContent = 'html { --vaadin-avatar-size: var(--lumo-size-m); }';
+document.head.appendChild(globalStyle);
+
 registerStyles(
   'vaadin-avatar',
   css`
     :host {
-      --vaadin-avatar-size: var(--lumo-size-m);
       color: var(--lumo-secondary-text-color);
       background-color: var(--lumo-contrast-10pct);
       border-radius: 50%;

package/theme/lumo/vaadin-avatar.js

@@ -1,2 +1,3 @@
+import '@vaadin/tooltip/theme/lumo/vaadin-tooltip.js';
 import './vaadin-avatar-styles.js';
 import '../../src/vaadin-avatar.js';

package/theme/material/vaadin-avatar-styles.js

@@ -3,11 +3,14 @@ import '@vaadin/vaadin-material-styles/typography.js';
 import '@vaadin/vaadin-material-styles/user-colors.js';
 import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
+const globalStyle = document.createElement('style');
+globalStyle.textContent = 'html { --vaadin-avatar-size: 2.25rem; }';
+document.head.appendChild(globalStyle);
+
 registerStyles(
   'vaadin-avatar',
   css`
     :host {
-      --vaadin-avatar-size: 2.25rem;
       color: var(--material-secondary-text-color);
       background-color: var(--material-secondary-background-color);
       border-radius: 50%;
@@ -37,6 +40,22 @@ registerStyles(
       font-size: 3em;
       font-weight: 500;
     }
+
+    :host([theme~='xlarge']) {
+      --vaadin-avatar-size: 3.5rem;
+    }
+
+    :host([theme~='large']) {
+      --vaadin-avatar-size: 2.75rem;
+    }
+
+    :host([theme~='small']) {
+      --vaadin-avatar-size: 1.875rem;
+    }
+
+    :host([theme~='xsmall']) {
+      --vaadin-avatar-size: 1.625rem;
+    }
   `,
   { moduleId: 'material-avatar' },
 );

package/theme/material/vaadin-avatar.js

@@ -1,2 +1,3 @@
+import '@vaadin/tooltip/theme/material/vaadin-tooltip.js';
 import './vaadin-avatar-styles.js';
 import '../../src/vaadin-avatar.js';

package/web-types.json

@@ -0,0 +1,153 @@
+{
+  "$schema": "https://json.schemastore.org/web-types",
+  "name": "@vaadin/avatar",
+  "version": "23.3.0-alpha1",
+  "description-markup": "markdown",
+  "contributions": {
+    "html": {
+      "elements": [
+        {
+          "name": "vaadin-avatar",
+          "description": "`<vaadin-avatar>` is a Web Component providing avatar displaying functionality.\n\n```html\n<vaadin-avatar img=\"avatars/avatar-1.jpg\"></vaadin-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/custom-theme/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": []
+          }
+        }
+      ]
+    }
+  }
+}

package/web-types.lit.json

@@ -0,0 +1,69 @@
+{
+  "$schema": "https://json.schemastore.org/web-types",
+  "name": "@vaadin/avatar",
+  "version": "23.3.0-alpha1",
+  "description-markup": "markdown",
+  "framework": "lit",
+  "framework-config": {
+    "enable-when": {
+      "node-packages": [
+        "lit"
+      ]
+    }
+  },
+  "contributions": {
+    "html": {
+      "elements": [
+        {
+          "name": "vaadin-avatar",
+          "description": "`<vaadin-avatar>` is a Web Component providing avatar displaying functionality.\n\n```html\n<vaadin-avatar img=\"avatars/avatar-1.jpg\"></vaadin-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/custom-theme/styling-components) documentation.",
+          "extension": true,
+          "attributes": [
+            {
+              "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": {
+                "kind": "expression"
+              }
+            },
+            {
+              "name": ".img",
+              "description": "The path to the image",
+              "value": {
+                "kind": "expression"
+              }
+            },
+            {
+              "name": ".abbr",
+              "description": "A shortened form of name that is displayed\nin the avatar when `img` is not provided.",
+              "value": {
+                "kind": "expression"
+              }
+            },
+            {
+              "name": ".name",
+              "description": "Full name of the user\nused for the tooltip of the avatar.",
+              "value": {
+                "kind": "expression"
+              }
+            },
+            {
+              "name": ".colorIndex",
+              "description": "Color index used for avatar background.",
+              "value": {
+                "kind": "expression"
+              }
+            },
+            {
+              "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": {
+                "kind": "expression"
+              }
+            }
+          ]
+        }
+      ]
+    }
+  }
+}