@vaadin/message-list 23.3.0-alpha3 → 24.0.0-alpha1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/message-list",
-  "version": "23.3.0-alpha3",
+  "version": "24.0.0-alpha1",
   "publishConfig": {
     "access": "public"
   },
@@ -38,11 +38,11 @@
   ],
   "dependencies": {
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/avatar": "23.3.0-alpha3",
-    "@vaadin/component-base": "23.3.0-alpha3",
-    "@vaadin/vaadin-lumo-styles": "23.3.0-alpha3",
-    "@vaadin/vaadin-material-styles": "23.3.0-alpha3",
-    "@vaadin/vaadin-themable-mixin": "23.3.0-alpha3"
+    "@vaadin/avatar": "24.0.0-alpha1",
+    "@vaadin/component-base": "24.0.0-alpha1",
+    "@vaadin/vaadin-lumo-styles": "24.0.0-alpha1",
+    "@vaadin/vaadin-material-styles": "24.0.0-alpha1",
+    "@vaadin/vaadin-themable-mixin": "24.0.0-alpha1"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
@@ -53,5 +53,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "e86cd2abf3e28bade37711291331415d92c454ec"
+  "gitHead": "427527c27c4b27822d61fd41d38d7b170134770b"
 }

package/src/vaadin-message-list.d.ts

@@ -21,12 +21,15 @@ export interface MessageListItem {
  * `<vaadin-message-list>` is a Web Component for showing an ordered list of messages. The messages are rendered as <vaadin-message>
  *
  * ### Example
+ *
  * To create a new message list, add the component to the page:
+ *
  * ```html
  * <vaadin-message-list></vaadin-message-list>
  * ```
  *
- * Provide the messages to the message list with the `items` property.
+ * Provide the messages to the message list with the [`items`](#/elements/vaadin-message-list#property-items) property.
+ *
  * ```js
  * document.querySelector('vaadin-message-list').items = [
  *   { text: 'Hello list', time: 'yesterday', userName: 'Matt Mambo', userAbbr: 'MM', userColorIndex: 1 },
@@ -42,6 +45,9 @@ export interface MessageListItem {
  * ----------|----------------
  * `list`    | The container wrapping messages.
  *
+ * See the [`<vaadin-message>`](#/elements/vaadin-message) documentation for the available
+ * state attributes and stylable shadow parts of message elements.
+ *
  * See [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.
  */
 declare class MessageList extends KeyboardDirectionMixin(ThemableMixin(ElementMixin(HTMLElement))) {

package/src/vaadin-message-list.js

@@ -3,9 +3,7 @@
  * Copyright (c) 2021 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import '@polymer/polymer/lib/elements/dom-repeat.js';
 import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
-import { microTask } from '@vaadin/component-base/src/async.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
 import { KeyboardDirectionMixin } from '@vaadin/component-base/src/keyboard-direction-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
@@ -15,12 +13,15 @@ import { Message } from './vaadin-message.js';
  * `<vaadin-message-list>` is a Web Component for showing an ordered list of messages. The messages are rendered as <vaadin-message>
  *
  * ### Example
+ *
  * To create a new message list, add the component to the page:
+ *
  * ```html
  * <vaadin-message-list></vaadin-message-list>
  * ```
  *
- * Provide the messages to the message list with the `items` property.
+ * Provide the messages to the message list with the [`items`](#/elements/vaadin-message-list#property-items) property.
+ *
  * ```js
  * document.querySelector('vaadin-message-list').items = [
  *   { text: 'Hello list', time: 'yesterday', userName: 'Matt Mambo', userAbbr: 'MM', userColorIndex: 1 },
@@ -36,6 +37,9 @@ import { Message } from './vaadin-message.js';
  * ----------|----------------
  * `list`    | The container wrapping messages.
  *
+ * See the [`<vaadin-message>`](#/elements/vaadin-message) documentation for the available
+ * state attributes and stylable shadow parts of message elements.
+ *
  * See [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.
  *
  * @extends HTMLElement
@@ -86,19 +90,7 @@ class MessageList extends KeyboardDirectionMixin(ElementMixin(ThemableMixin(Poly
         }
       </style>
       <div part="list" role="list">
-        <template is="dom-repeat" items="[[items]]">
-          <vaadin-message
-            time="[[item.time]]"
-            user-name="[[item.userName]]"
-            user-abbr="[[item.userAbbr]]"
-            user-img="[[item.userImg]]"
-            user-color-index="[[item.userColorIndex]]"
-            theme$="[[item.theme]]"
-            role="listitem"
-            on-focusin="_handleFocusEvent"
-            >[[item.text]]</vaadin-message
-          >
-        </template>
+        <slot></slot>
       </div>
     `;
   }
@@ -126,24 +118,81 @@ class MessageList extends KeyboardDirectionMixin(ElementMixin(ThemableMixin(Poly
 
   /** @protected */
   get _messages() {
-    return Array.from(this.shadowRoot.querySelectorAll('vaadin-message'));
+    return [...this.querySelectorAll('vaadin-message')];
   }
 
   /** @private */
   _itemsChanged(newVal, oldVal) {
-    const focusedIndex = this._getIndexOfFocusableElement();
-    if (newVal && newVal.length) {
-      const moreItems = !oldVal || newVal.length > oldVal.length;
+    const items = newVal || [];
+    const oldItems = oldVal || [];
+
+    if (items.length || oldItems.length) {
+      const focusedIndex = this._getIndexOfFocusableElement();
       const closeToBottom = this.scrollHeight < this.clientHeight + this.scrollTop + 50;
-      microTask.run(() => {
-        this._setTabIndexesByIndex(focusedIndex);
-        if (moreItems && closeToBottom) {
+
+      const removed = oldItems.filter((item) => !items.includes(item));
+      const added = [...items];
+
+      this._messages.forEach((message) => {
+        const item = message._item;
+        if (removed.includes(item)) {
+          message.remove();
+        } else if (added.includes(item)) {
+          added.splice(added.indexOf(item), 1);
+        }
+      });
+
+      this.__addMessages(added, items);
+
+      this._setTabIndexesByIndex(focusedIndex);
+
+      requestAnimationFrame(() => {
+        if (items.length > oldItems.length && closeToBottom) {
           this._scrollToLastMessage();
         }
       });
     }
   }
 
+  /** @private */
+  __addMessages(itemsToAdd, allItems) {
+    itemsToAdd.forEach((item) => {
+      const message = this.__createMessage(item);
+      const nextItem = allItems[allItems.indexOf(item) + 1];
+      const nextMessage = this._messages.find((msg) => msg._item === nextItem);
+      if (nextMessage) {
+        this.insertBefore(message, nextMessage);
+      } else {
+        this.appendChild(message);
+      }
+    });
+  }
+
+  /** @private */
+  __createMessage(item) {
+    const message = document.createElement('vaadin-message');
+    message.setAttribute('role', 'listitem');
+
+    message.textContent = item.text;
+    message.time = item.time;
+    message.userName = item.userName;
+    message.userAbbr = item.userAbbr;
+    message.userImg = item.userImg;
+    message.userColorIndex = item.userColorIndex;
+
+    message._item = item;
+
+    if (item.theme) {
+      message.setAttribute('theme', item.theme);
+    }
+
+    message.addEventListener('focusin', (e) => {
+      this._onMessageFocusIn(e);
+    });
+
+    return message;
+  }
+
   /** @private */
   _scrollToLastMessage() {
     if (this.items.length > 0) {
@@ -152,7 +201,7 @@ class MessageList extends KeyboardDirectionMixin(ElementMixin(ThemableMixin(Poly
   }
 
   /** @private */
-  _handleFocusEvent(e) {
+  _onMessageFocusIn(e) {
     const target = e.composedPath().find((node) => node instanceof Message);
     this._setTabIndexesByMessage(target);
   }

package/src/vaadin-message.d.ts

@@ -3,6 +3,7 @@
  * Copyright (c) 2021 - 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';
@@ -23,7 +24,6 @@ import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mix
  *
  * Part name | Description
  * ----------|----------------
- * `avatar`  | The author's avatar
  * `name`    | Author's name
  * `time`    | When the message was posted
  * `content` | The message itself as a slotted content
@@ -36,15 +36,8 @@ import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mix
  * `focused`    | Set when the message is focused.
  *
  * See [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.
- *
- * ### Internal components
- *
- * In addition to `<vaadin-message>` itself, the following internal
- * components are themable:
- *
- * - `<vaadin-message-avatar>` - has the same API as [`<vaadin-avatar>`](#/elements/vaadin-avatar).
  */
-declare class Message extends FocusMixin(ThemableMixin(ElementMixin(HTMLElement))) {
+declare class Message extends FocusMixin(ThemableMixin(ElementMixin(ControllerMixin(HTMLElement)))) {
   /**
    * Time of sending the message. It is rendered as-is to the part='time' slot,
    * so the formatting is up to you.

package/src/vaadin-message.js

@@ -3,10 +3,12 @@
  * Copyright (c) 2021 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import './vaadin-message-avatar.js';
+import '@vaadin/avatar/src/vaadin-avatar.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 { SlotController } from '@vaadin/component-base/src/slot-controller.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
 /**
@@ -25,7 +27,6 @@ import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mix
  *
  * Part name | Description
  * ----------|----------------
- * `avatar`  | The author's avatar
  * `name`    | Author's name
  * `time`    | When the message was posted
  * `content` | The message itself as a slotted content
@@ -39,19 +40,13 @@ import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mix
  *
  * See [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.
  *
- * ### Internal components
- *
- * In addition to `<vaadin-message>` itself, the following internal
- * components are themable:
- *
- * - `<vaadin-message-avatar>` - has the same API as [`<vaadin-avatar>`](#/elements/vaadin-avatar).
- *
  * @extends HTMLElement
+ * @mixes ControllerMixin
  * @mixes FocusMixin
  * @mixes ThemableMixin
  * @mixes ElementMixin
  */
-class Message extends FocusMixin(ElementMixin(ThemableMixin(PolymerElement))) {
+class Message extends FocusMixin(ElementMixin(ThemableMixin(ControllerMixin(PolymerElement)))) {
   static get properties() {
     return {
       /**
@@ -117,6 +112,11 @@ class Message extends FocusMixin(ElementMixin(ThemableMixin(PolymerElement))) {
       userColorIndex: {
         type: Number,
       },
+
+      /** @private */
+      _avatar: {
+        ttype: Object,
+      },
     };
   }
 
@@ -153,16 +153,13 @@ class Message extends FocusMixin(ElementMixin(ThemableMixin(PolymerElement))) {
         [part='message'] {
           white-space: pre-wrap;
         }
+
+        ::slotted([slot='avatar']) {
+          --vaadin-avatar-outline-width: 0px;
+          flex-shrink: 0;
+        }
       </style>
-      <vaadin-message-avatar
-        part="avatar"
-        name="[[userName]]"
-        abbr="[[userAbbr]]"
-        img="[[userImg]]"
-        color-index="[[userColorIndex]]"
-        tabindex="-1"
-        aria-hidden="true"
-      ></vaadin-message-avatar>
+      <slot name="avatar"></slot>
       <div part="content">
         <div part="header">
           <span part="name">[[userName]]</span>
@@ -176,6 +173,39 @@ class Message extends FocusMixin(ElementMixin(ThemableMixin(PolymerElement))) {
   static get is() {
     return 'vaadin-message';
   }
+
+  static get observers() {
+    return ['__avatarChanged(_avatar, userName, userAbbr, userImg, userColorIndex)'];
+  }
+
+  /** @protected */
+  ready() {
+    super.ready();
+
+    this._avatarController = new SlotController(
+      this,
+      'avatar',
+      () => document.createElement('vaadin-avatar'),
+      (_, avatar) => {
+        avatar.setAttribute('tabindex', '-1');
+        avatar.setAttribute('aria-hidden', 'true');
+        this._avatar = avatar;
+      },
+    );
+    this.addController(this._avatarController);
+  }
+
+  /** @private */
+  __avatarChanged(avatar, userName, userAbbr, userImg, userColorIndex) {
+    if (avatar) {
+      avatar.setProperties({
+        name: userName,
+        abbr: userAbbr,
+        img: userImg,
+        colorIndex: userColorIndex,
+      });
+    }
+  }
 }
 
 customElements.define(Message.is, Message);

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

@@ -3,7 +3,7 @@ import '@vaadin/vaadin-lumo-styles/sizing.js';
 import '@vaadin/vaadin-lumo-styles/spacing.js';
 import '@vaadin/vaadin-lumo-styles/style.js';
 import '@vaadin/vaadin-lumo-styles/typography.js';
-import './vaadin-message-avatar-styles.js';
+import '@vaadin/avatar/theme/lumo/vaadin-avatar-styles.js';
 import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
 registerStyles(
@@ -49,6 +49,12 @@ registerStyles(
       color: var(--lumo-secondary-text-color);
       font-size: var(--lumo-font-size-s);
     }
+
+    ::slotted([slot='avatar']) {
+      --vaadin-avatar-size: var(--lumo-size-m);
+      margin-top: calc(var(--lumo-space-s));
+      margin-inline-end: calc(var(--lumo-space-m));
+    }
   `,
   { moduleId: 'lumo-message' },
 );

package/theme/lumo/vaadin-message.js

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

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

@@ -1,6 +1,6 @@
 import '@vaadin/vaadin-material-styles/color.js';
 import '@vaadin/vaadin-material-styles/typography.js';
-import './vaadin-message-avatar-styles.js';
+import '@vaadin/avatar/theme/material/vaadin-avatar-styles.js';
 import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
 registerStyles(
@@ -58,6 +58,12 @@ registerStyles(
       font-size: var(--material-small-font-size);
       line-height: 1.25rem;
     }
+
+    ::slotted([slot='avatar']) {
+      --vaadin-avatar-size: 2.5rem;
+      margin-top: 0.25rem;
+      margin-inline-end: 1rem;
+    }
   `,
   { moduleId: 'material-message' },
 );

package/theme/material/vaadin-message.js

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

package/web-types.json

@@ -1,14 +1,14 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/message-list",
-  "version": "23.3.0-alpha3",
+  "version": "24.0.0-alpha1",
   "description-markup": "markdown",
   "contributions": {
     "html": {
       "elements": [
         {
           "name": "vaadin-message",
-          "description": "`<vaadin-message>` is a Web Component for showing a single message with an author, message and time.\n\n```html\n<vaadin-message time=\"2021-01-28 10:43\"\n    user-name = \"Bob Ross\"\n    user-abbr = \"BR\"\n    user-img = \"/static/img/avatar.jpg\">There is no real ending. It's just the place where you stop the story.</vaadin-message>\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n----------|----------------\n`avatar`  | The author's avatar\n`name`    | Author's name\n`time`    | When the message was posted\n`content` | The message itself as a slotted content\n\nThe following state attributes are available for styling:\n\nAttribute    | Description\n-------------|-------------\n`focus-ring` | Set when the message is focused using the keyboard.\n`focused`    | Set when the message is focused.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.\n\n### Internal components\n\nIn addition to `<vaadin-message>` itself, the following internal\ncomponents are themable:\n\n- `<vaadin-message-avatar>` - has the same API as [`<vaadin-avatar>`](https://cdn.vaadin.com/vaadin-web-components/23.3.0-alpha3/#/elements/vaadin-avatar).",
+          "description": "`<vaadin-message>` is a Web Component for showing a single message with an author, message and time.\n\n```html\n<vaadin-message time=\"2021-01-28 10:43\"\n    user-name = \"Bob Ross\"\n    user-abbr = \"BR\"\n    user-img = \"/static/img/avatar.jpg\">There is no real ending. It's just the place where you stop the story.</vaadin-message>\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n----------|----------------\n`name`    | Author's name\n`time`    | When the message was posted\n`content` | The message itself as a slotted content\n\nThe following state attributes are available for styling:\n\nAttribute    | Description\n-------------|-------------\n`focus-ring` | Set when the message is focused using the keyboard.\n`focused`    | Set when the message is focused.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.",
           "attributes": [
             {
               "name": "time",
@@ -140,7 +140,7 @@
         },
         {
           "name": "vaadin-message-list",
-          "description": "`<vaadin-message-list>` is a Web Component for showing an ordered list of messages. The messages are rendered as <vaadin-message>\n\n### Example\nTo create a new message list, add the component to the page:\n```html\n<vaadin-message-list></vaadin-message-list>\n```\n\nProvide the messages to the message list with the `items` property.\n```js\ndocument.querySelector('vaadin-message-list').items = [\n  { text: 'Hello list', time: 'yesterday', userName: 'Matt Mambo', userAbbr: 'MM', userColorIndex: 1 },\n  { text: 'Another message', time: 'right now', userName: 'Linsey Listy', userAbbr: 'LL', userColorIndex: 2, userImg: '/static/img/avatar.jpg' }\n];\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n----------|----------------\n`list`    | The container wrapping messages.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.",
+          "description": "`<vaadin-message-list>` is a Web Component for showing an ordered list of messages. The messages are rendered as <vaadin-message>\n\n### Example\n\nTo create a new message list, add the component to the page:\n\n```html\n<vaadin-message-list></vaadin-message-list>\n```\n\nProvide the messages to the message list with the [`items`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha1/#/elements/vaadin-message-list#property-items) property.\n\n```js\ndocument.querySelector('vaadin-message-list').items = [\n  { text: 'Hello list', time: 'yesterday', userName: 'Matt Mambo', userAbbr: 'MM', userColorIndex: 1 },\n  { text: 'Another message', time: 'right now', userName: 'Linsey Listy', userAbbr: 'LL', userColorIndex: 2, userImg: '/static/img/avatar.jpg' }\n];\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n----------|----------------\n`list`    | The container wrapping messages.\n\nSee the [`<vaadin-message>`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha1/#/elements/vaadin-message) documentation for the available\nstate attributes and stylable shadow parts of message elements.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.",
           "attributes": [
             {
               "name": "theme",

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/message-list",
-  "version": "23.3.0-alpha3",
+  "version": "24.0.0-alpha1",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {
@@ -16,7 +16,7 @@
       "elements": [
         {
           "name": "vaadin-message",
-          "description": "`<vaadin-message>` is a Web Component for showing a single message with an author, message and time.\n\n```html\n<vaadin-message time=\"2021-01-28 10:43\"\n    user-name = \"Bob Ross\"\n    user-abbr = \"BR\"\n    user-img = \"/static/img/avatar.jpg\">There is no real ending. It's just the place where you stop the story.</vaadin-message>\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n----------|----------------\n`avatar`  | The author's avatar\n`name`    | Author's name\n`time`    | When the message was posted\n`content` | The message itself as a slotted content\n\nThe following state attributes are available for styling:\n\nAttribute    | Description\n-------------|-------------\n`focus-ring` | Set when the message is focused using the keyboard.\n`focused`    | Set when the message is focused.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.\n\n### Internal components\n\nIn addition to `<vaadin-message>` itself, the following internal\ncomponents are themable:\n\n- `<vaadin-message-avatar>` - has the same API as [`<vaadin-avatar>`](https://cdn.vaadin.com/vaadin-web-components/23.3.0-alpha3/#/elements/vaadin-avatar).",
+          "description": "`<vaadin-message>` is a Web Component for showing a single message with an author, message and time.\n\n```html\n<vaadin-message time=\"2021-01-28 10:43\"\n    user-name = \"Bob Ross\"\n    user-abbr = \"BR\"\n    user-img = \"/static/img/avatar.jpg\">There is no real ending. It's just the place where you stop the story.</vaadin-message>\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n----------|----------------\n`name`    | Author's name\n`time`    | When the message was posted\n`content` | The message itself as a slotted content\n\nThe following state attributes are available for styling:\n\nAttribute    | Description\n-------------|-------------\n`focus-ring` | Set when the message is focused using the keyboard.\n`focused`    | Set when the message is focused.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.",
           "extension": true,
           "attributes": [
             {
@@ -58,7 +58,7 @@
         },
         {
           "name": "vaadin-message-list",
-          "description": "`<vaadin-message-list>` is a Web Component for showing an ordered list of messages. The messages are rendered as <vaadin-message>\n\n### Example\nTo create a new message list, add the component to the page:\n```html\n<vaadin-message-list></vaadin-message-list>\n```\n\nProvide the messages to the message list with the `items` property.\n```js\ndocument.querySelector('vaadin-message-list').items = [\n  { text: 'Hello list', time: 'yesterday', userName: 'Matt Mambo', userAbbr: 'MM', userColorIndex: 1 },\n  { text: 'Another message', time: 'right now', userName: 'Linsey Listy', userAbbr: 'LL', userColorIndex: 2, userImg: '/static/img/avatar.jpg' }\n];\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n----------|----------------\n`list`    | The container wrapping messages.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.",
+          "description": "`<vaadin-message-list>` is a Web Component for showing an ordered list of messages. The messages are rendered as <vaadin-message>\n\n### Example\n\nTo create a new message list, add the component to the page:\n\n```html\n<vaadin-message-list></vaadin-message-list>\n```\n\nProvide the messages to the message list with the [`items`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha1/#/elements/vaadin-message-list#property-items) property.\n\n```js\ndocument.querySelector('vaadin-message-list').items = [\n  { text: 'Hello list', time: 'yesterday', userName: 'Matt Mambo', userAbbr: 'MM', userColorIndex: 1 },\n  { text: 'Another message', time: 'right now', userName: 'Linsey Listy', userAbbr: 'LL', userColorIndex: 2, userImg: '/static/img/avatar.jpg' }\n];\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n----------|----------------\n`list`    | The container wrapping messages.\n\nSee the [`<vaadin-message>`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha1/#/elements/vaadin-message) documentation for the available\nstate attributes and stylable shadow parts of message elements.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.",
           "extension": true,
           "attributes": [
             {

package/src/vaadin-message-avatar.d.ts

@@ -1,17 +0,0 @@
-/**
- * @license
- * Copyright (c) 2021 - 2022 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-import { Avatar } from '@vaadin/avatar/src/vaadin-avatar.js';
-
-/**
- * An element used internally by `<vaadin-message>`. Not intended to be used separately.
- */
-declare class MessageAvatar extends Avatar {}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'vaadin-message-avatar': MessageAvatar;
-  }
-}

package/src/vaadin-message-avatar.js

@@ -1,32 +0,0 @@
-/**
- * @license
- * Copyright (c) 2021 - 2022 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-import { Avatar } from '@vaadin/avatar/src/vaadin-avatar.js';
-import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-
-registerStyles(
-  'vaadin-message-avatar',
-  css`
-    :host {
-      --vaadin-avatar-outline-width: 0px; /* stylelint-disable-line length-zero-no-unit */
-      flex-shrink: 0;
-    }
-  `,
-  { moduleId: 'vaadin-message-avatar-styles' },
-);
-
-/**
- * An element used internally by `<vaadin-message>`. Not intended to be used separately.
- *
- * @extends Avatar
- * @private
- */
-class MessageAvatar extends Avatar {
-  static get is() {
-    return 'vaadin-message-avatar';
-  }
-}
-
-customElements.define(MessageAvatar.is, MessageAvatar);

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

@@ -1,18 +0,0 @@
-import '@vaadin/avatar/theme/lumo/vaadin-avatar-styles.js';
-import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-
-registerStyles(
-  'vaadin-message-avatar',
-  css`
-    :host {
-      margin-right: calc(var(--lumo-space-m) - var(--vaadin-avatar-outline-width));
-      margin-top: calc(var(--lumo-space-s) - var(--vaadin-avatar-outline-width));
-    }
-
-    :host([dir='rtl']) {
-      margin-left: calc(var(--lumo-space-m) - var(--vaadin-avatar-outline-width));
-      margin-right: calc(var(--vaadin-avatar-outline-width) * -1);
-    }
-  `,
-  { moduleId: 'lumo-message-avatar' },
-);

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

@@ -1,2 +0,0 @@
-import './vaadin-message-avatar-styles.js';
-import '../../src/vaadin-message-avatar.js';

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

@@ -1,19 +0,0 @@
-import '@vaadin/avatar/theme/material/vaadin-avatar-styles.js';
-import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-
-registerStyles(
-  'vaadin-message-avatar',
-  css`
-    :host {
-      --vaadin-avatar-size: 2.5rem;
-      margin-right: calc(1rem - var(--vaadin-avatar-outline-width));
-      margin-top: calc(0.25rem - var(--vaadin-avatar-outline-width));
-    }
-
-    :host([dir='rtl']) {
-      margin-left: calc(1em - var(--vaadin-avatar-outline-width));
-      margin-right: calc(var(--vaadin-avatar-outline-width) * -1);
-    }
-  `,
-  { moduleId: 'material-message-avatar' },
-);

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

@@ -1,2 +0,0 @@
-import './vaadin-message-avatar-styles.js';
-import '../../src/vaadin-message-avatar.js';