@vaadin/message-list 25.3.0-alpha9 → 25.3.0-beta2

package/custom-elements.json

@@ -136,7 +136,7 @@
       "declarations": [
         {
           "kind": "class",
-          "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`](#/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>`](#/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/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`](#/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\nThe following custom CSS properties are available for styling:\n\nCustom CSS property                |\n:--------------------------------- |\n`--vaadin-message-list-max-width`  |\n`--vaadin-message-list-padding`    |\n\n### Built-in Theme Variants\n\n`<vaadin-message-list>` supports the following theme variants:\n\nTheme variant        | Description\n---------------------|---------------\n`theme=\"bubble\"`     | Shows the messages as chat bubbles\n`theme=\"one-to-one\"` | Hides the avatar and name of every message, for a chat between two participants. Works together with `bubble`\n\nSee the [`<vaadin-message>`](#/elements/vaadin-message) documentation for the available\ntheme variants, state attributes and stylable shadow parts of message elements.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
           "name": "MessageList",
           "members": [
             {
@@ -327,7 +327,7 @@
               "type": {
                 "text": "number"
               },
-              "description": "A color index to be used to render the color of the avatar.",
+              "description": "A color index to be used to render the color of the avatar.\nAlso sets `--vaadin-message-user-color` custom CSS property.",
               "attribute": "user-color-index"
             },
             {
@@ -381,7 +381,7 @@
               "type": {
                 "text": "number"
               },
-              "description": "A color index to be used to render the color of the avatar.",
+              "description": "A color index to be used to render the color of the avatar.\nAlso sets `--vaadin-message-user-color` custom CSS property.",
               "fieldName": "userColorIndex"
             },
             {
@@ -431,7 +431,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "`<vaadin-message>` is a Web Component for showing a single message with an author, message and time.\n\n```html\n<vaadin-message\n  time=\"2021-01-28 10:43\"\n  user-name=\"Bob Ross\"\n  user-abbr=\"BR\"\n  user-img=\"/static/img/avatar.jpg\"\n>\n There is no real ending. It's just the place where you stop the story.\n</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`attachments`       | Container for the attachments\n`attachment`        | Individual attachment button\n`attachment-image`  | Image attachment button (in addition to `attachment`)\n`attachment-file`   | File attachment button (in addition to `attachment`)\n`attachment-preview`| Image preview inside an image attachment\n`attachment-icon`   | File icon inside a file attachment\n`attachment-name`   | File name inside a file attachment\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\nThe following custom CSS properties are available for styling:\n\nCustom CSS property                          |\n:------------------------------------------- |\n`--vaadin-message-attachment-background`     |\n`--vaadin-message-attachment-border-color`   |\n`--vaadin-message-attachment-border-radius`  |\n`--vaadin-message-attachment-border-width`   |\n`--vaadin-message-attachment-font-size`      |\n`--vaadin-message-attachment-font-weight`    |\n`--vaadin-message-attachment-gap`            |\n`--vaadin-message-attachment-line-height`    |\n`--vaadin-message-attachment-padding`        |\n`--vaadin-message-attachment-text-color`     |\n`--vaadin-message-font-size`                 |\n`--vaadin-message-font-weight`               |\n`--vaadin-message-gap`                       |\n`--vaadin-message-header-line-height`        |\n`--vaadin-message-line-height`               |\n`--vaadin-message-name-color`                |\n`--vaadin-message-name-font-size`            |\n`--vaadin-message-name-font-weight`          |\n`--vaadin-message-padding`                   |\n`--vaadin-message-text-color`                |\n`--vaadin-message-time-color`                |\n`--vaadin-message-time-font-size`            |\n`--vaadin-message-time-font-weight`          |\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
+          "description": "`<vaadin-message>` is a Web Component for showing a single message with an author, message and time.\n\n```html\n<vaadin-message\n  time=\"2021-01-28 10:43\"\n  user-name=\"Bob Ross\"\n  user-abbr=\"BR\"\n  user-img=\"/static/img/avatar.jpg\"\n>\n There is no real ending. It's just the place where you stop the story.\n</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`attachments`       | Container for the attachments\n`attachment`        | Individual attachment button\n`attachment-image`  | Image attachment button (in addition to `attachment`)\n`attachment-file`   | File attachment button (in addition to `attachment`)\n`attachment-preview`| Image preview inside an image attachment\n`attachment-icon`   | File icon inside a file attachment\n`attachment-name`   | File name inside a file attachment\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\nThe following custom CSS properties are available for styling:\n\nCustom CSS property                          |\n:------------------------------------------- |\n`--vaadin-message-attachment-background`     |\n`--vaadin-message-attachment-border-color`   |\n`--vaadin-message-attachment-border-radius`  |\n`--vaadin-message-attachment-border-width`   |\n`--vaadin-message-attachment-font-size`      |\n`--vaadin-message-attachment-font-weight`    |\n`--vaadin-message-attachment-gap`            |\n`--vaadin-message-attachment-line-height`    |\n`--vaadin-message-attachment-padding`        |\n`--vaadin-message-attachment-text-color`     |\n`--vaadin-message-attachments-alignment`     |\n`--vaadin-message-content-background`        |\n`--vaadin-message-content-border-radius`     |\n`--vaadin-message-content-padding`           |\n`--vaadin-message-font-size`                 |\n`--vaadin-message-font-weight`               |\n`--vaadin-message-gap`                       |\n`--vaadin-message-header-line-height`        |\n`--vaadin-message-line-height`               |\n`--vaadin-message-name-color`                |\n`--vaadin-message-name-font-size`            |\n`--vaadin-message-name-font-weight`          |\n`--vaadin-message-padding`                   |\n`--vaadin-message-text-color`                |\n`--vaadin-message-time-color`                |\n`--vaadin-message-time-font-size`            |\n`--vaadin-message-time-font-weight`          |\n`--vaadin-message-user-color`                |\n\n### Built-in Theme Variants\n\n`<vaadin-message>` supports the following theme variants. Both of them require the parent\n[`<vaadin-message-list>`](#/elements/vaadin-message-list) to use `theme=\"bubble\"`:\n\nTheme variant         | Description\n----------------------|---------------\n`theme=\"self\"`        | Shows the message as sent by the current user, hides the avatar and name\n`theme=\"full-width\"`  | Removes the bubble and the width restriction, for an assistant or AI response\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
           "name": "Message",
           "members": [
             {
@@ -483,7 +483,7 @@
               "type": {
                 "text": "number"
               },
-              "description": "A color index to be used to render the color of the avatar.",
+              "description": "A color index to be used to render the color of the avatar.\nAlso sets `--vaadin-message-user-color` custom CSS property.",
               "attribute": "user-color-index",
               "inheritedFrom": {
                 "name": "MessageMixin",
@@ -569,7 +569,7 @@
               "type": {
                 "text": "number"
               },
-              "description": "A color index to be used to render the color of the avatar.",
+              "description": "A color index to be used to render the color of the avatar.\nAlso sets `--vaadin-message-user-color` custom CSS property.",
               "fieldName": "userColorIndex",
               "inheritedFrom": {
                 "name": "MessageMixin",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/message-list",
-  "version": "25.3.0-alpha9",
+  "version": "25.3.0-beta2",
   "publishConfig": {
     "access": "public"
   },
@@ -37,19 +37,19 @@
   ],
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
-    "@vaadin/a11y-base": "25.3.0-alpha9",
-    "@vaadin/avatar": "25.3.0-alpha9",
-    "@vaadin/component-base": "25.3.0-alpha9",
-    "@vaadin/markdown": "25.3.0-alpha9",
-    "@vaadin/vaadin-themable-mixin": "25.3.0-alpha9",
+    "@vaadin/a11y-base": "25.3.0-beta2",
+    "@vaadin/avatar": "25.3.0-beta2",
+    "@vaadin/component-base": "25.3.0-beta2",
+    "@vaadin/markdown": "25.3.0-beta2",
+    "@vaadin/vaadin-themable-mixin": "25.3.0-beta2",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/aura": "25.3.0-alpha9",
-    "@vaadin/chai-plugins": "25.3.0-alpha9",
-    "@vaadin/test-runner-commands": "25.3.0-alpha9",
+    "@vaadin/aura": "25.3.0-beta2",
+    "@vaadin/chai-plugins": "25.3.0-beta2",
+    "@vaadin/test-runner-commands": "25.3.0-beta2",
     "@vaadin/testing-helpers": "^2.0.0",
-    "@vaadin/vaadin-lumo-styles": "25.3.0-alpha9",
+    "@vaadin/vaadin-lumo-styles": "25.3.0-beta2",
     "sinon": "^22.0.0"
   },
   "customElements": "custom-elements.json",
@@ -57,5 +57,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "cb915ebde095ec5b94a87af93dd4530f51984c52"
+  "gitHead": "d97ccbec217b60c39f3c8b2dd52473c79a48c8c1"
 }

package/src/styles/vaadin-message-base-styles.js

@@ -10,6 +10,7 @@ export const messageStyles = css`
   :host {
     display: flex;
     flex-direction: row;
+    box-sizing: border-box;
     padding: var(--vaadin-message-padding, var(--vaadin-padding-s) var(--vaadin-padding-m));
     gap: var(--vaadin-message-gap, var(--vaadin-gap-xs) var(--vaadin-gap-s));
     outline-offset: calc(var(--vaadin-focus-ring-width) * -1);
@@ -29,6 +30,9 @@ export const messageStyles = css`
     flex-direction: column;
     flex-grow: 1;
     gap: inherit;
+    background: var(--vaadin-message-content-background, transparent);
+    padding: var(--vaadin-message-content-padding, 0);
+    border-radius: var(--vaadin-message-content-border-radius, 0);
   }
 
   [part='header'] {
@@ -62,6 +66,8 @@ export const messageStyles = css`
 
   ::slotted([slot='avatar']) {
     flex: none;
+    visibility: var(--_vaadin-message-avatar-visibility, revert-layer);
+    display: var(--_vaadin-message-avatar-display, revert-layer);
   }
 
   ::slotted(vaadin-markdown) {
@@ -73,6 +79,7 @@ export const messageStyles = css`
     flex-wrap: wrap;
     gap: var(--vaadin-gap-s);
     padding-bottom: var(--vaadin-gap-xs);
+    justify-content: var(--vaadin-message-attachments-alignment, start);
   }
 
   [part~='attachment'] {

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

@@ -0,0 +1,8 @@
+/**
+ * @license
+ * Copyright (c) 2021 - 2026 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import type { CSSResult } from 'lit';
+
+export const messageListStyles: CSSResult;

package/src/styles/vaadin-message-list-base-styles.js

@@ -0,0 +1,72 @@
+/**
+ * @license
+ * Copyright (c) 2021 - 2026 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import '@vaadin/component-base/src/styles/style-props.js';
+import { css } from 'lit';
+
+export const messageListStyles = css`
+  :host {
+    display: block;
+    overflow: auto;
+    box-sizing: border-box;
+    padding: var(--vaadin-message-list-padding, var(--vaadin-padding-xs) 0);
+    scroll-padding: var(--vaadin-message-list-padding, var(--vaadin-padding-xs) 0);
+    scroll-snap-type: y proximity;
+  }
+
+  :host([hidden]) {
+    display: none !important;
+  }
+
+  [part='list'] {
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+    width: 100%;
+    min-height: 100%;
+    max-width: var(--vaadin-message-list-max-width, none);
+    margin-inline: auto;
+  }
+
+  [part='list']::after {
+    content: '';
+    display: block;
+    scroll-snap-align: var(--_vaadin-message-list-scroll-snap-align, none);
+  }
+
+  :host([theme~='bubble']) {
+    & ::slotted(vaadin-message) {
+      --vaadin-message-name-font-size: 0.9em;
+    }
+
+    & ::slotted(vaadin-message[theme~='full-width']) {
+      padding-block: var(--vaadin-padding-xl);
+    }
+
+    & ::slotted(vaadin-message:not([theme~='full-width'])) {
+      --vaadin-message-content-background: var(--vaadin-background-container);
+      --vaadin-message-content-padding: var(--vaadin-padding-s) var(--vaadin-padding-m);
+      --vaadin-message-content-border-radius: var(--vaadin-radius-l);
+
+      width: fit-content;
+      max-width: calc(100% - 2em);
+    }
+
+    & ::slotted(vaadin-message[theme~='self']) {
+      --_vaadin-message-avatar-visibility: hidden;
+      --vaadin-message-content-background: linear-gradient(
+          color-mix(in srgb, var(--vaadin-message-user-color, var(--vaadin-user-color-0)) 10%, transparent)
+        )
+        var(--vaadin-background-color);
+      --vaadin-message-attachments-alignment: end;
+      align-items: end;
+      align-self: end;
+    }
+  }
+
+  :host([theme~='bubble'][theme~='one-to-one']) ::slotted(vaadin-message) {
+    --_vaadin-message-avatar-display: none;
+  }
+`;

package/src/vaadin-message-list-mixin.js

@@ -42,7 +42,6 @@ export const MessageListMixin = (superClass) =>
         items: {
           type: Array,
           value: () => [],
-          observer: '_itemsChanged',
           sync: true,
         },
 
@@ -51,7 +50,6 @@ export const MessageListMixin = (superClass) =>
          */
         markdown: {
           type: Boolean,
-          observer: '__markdownChanged',
           reflectToAttribute: true,
         },
 
@@ -82,6 +80,19 @@ export const MessageListMixin = (superClass) =>
       this.setAttribute('role', 'region');
     }
 
+    /** @protected */
+    updated(props) {
+      super.updated(props);
+
+      if (props.has('items')) {
+        this._itemsChanged(this.items, props.get('items'));
+      }
+
+      if (props.has('markdown')) {
+        this.__markdownChanged(this.markdown);
+      }
+    }
+
     /**
      * Handles attachment-click events from child messages and dispatches
      * a new event enriched with the item.
@@ -142,12 +153,25 @@ export const MessageListMixin = (superClass) =>
           this.__enableScrollSnapping();
         }
 
-        requestAnimationFrame(() => {
-          if (items.length > oldItems.length && closeToBottom) {
-            this._scrollToLastMessage();
-          }
-        });
+        if (items.length > oldItems.length && closeToBottom) {
+          this.__scrollToLastMessagePending = true;
+          this.__flushScrollToLastMessage();
+        }
+      }
+    }
+
+    /**
+     * Scrolls to the last message, unless the markdown component is still loading,
+     * in which case the final height of the messages is not yet known.
+     * @private
+     */
+    __flushScrollToLastMessage() {
+      if (!this.__scrollToLastMessagePending || (this.markdown && !customElements.get('vaadin-markdown'))) {
+        return;
       }
+
+      this.__scrollToLastMessagePending = false;
+      requestAnimationFrame(() => this._scrollToLastMessage());
     }
 
     /** @private */
@@ -157,17 +181,14 @@ export const MessageListMixin = (superClass) =>
         import('@vaadin/markdown/src/vaadin-markdown.js')
           // Wait until the component is defined
           .then(() => customElements.whenDefined('vaadin-markdown'))
-          // Render the messages again
-          .then(() => this._renderMessages(this.items));
+          // The messages grow once the markdown content is rendered
+          .then(() => this.__flushScrollToLastMessage());
       }
       this._renderMessages(this.items);
     }
 
     /** @private */
     _renderMessages(items) {
-      // Check if markdown component is still loading
-      const loadingMarkdown = this.markdown && !customElements.get('vaadin-markdown');
-
       render(
         html`
           ${items.map(
@@ -184,9 +205,10 @@ export const MessageListMixin = (superClass) =>
                 class="${ifDefined(item.className)}"
                 @focusin="${this._onMessageFocusIn}"
                 @attachment-click="${(e) => this.__onAttachmentClick(e, item)}"
-                style="${ifDefined(loadingMarkdown ? 'visibility: hidden' : undefined)}"
                 >${
-                  this.markdown ? html`<vaadin-markdown .content=${item.text}></vaadin-markdown>` : item.text
+                  this.markdown
+                    ? html`<vaadin-markdown .content=${item.text} line-breaks></vaadin-markdown>`
+                    : item.text
                 }<vaadin-avatar slot="avatar"></vaadin-avatar
               ></vaadin-message>
             `,

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

@@ -47,8 +47,24 @@ export type MessageListEventMap = HTMLElementEventMap & {
  * ----------|----------------
  * `list`    | The container wrapping messages.
  *
+ * The following custom CSS properties are available for styling:
+ *
+ * Custom CSS property                |
+ * :--------------------------------- |
+ * `--vaadin-message-list-max-width`  |
+ * `--vaadin-message-list-padding`    |
+ *
+ * ### Built-in Theme Variants
+ *
+ * `<vaadin-message-list>` supports the following theme variants:
+ *
+ * Theme variant        | Description
+ * ---------------------|---------------
+ * `theme="bubble"`     | Shows the messages as chat bubbles
+ * `theme="one-to-one"` | Hides the avatar and name of every message, for a chat between two participants. Works together with `bubble`
+ *
  * See the [`<vaadin-message>`](#/elements/vaadin-message) documentation for the available
- * state attributes and stylable shadow parts of message elements.
+ * theme variants, state attributes and stylable shadow parts of message elements.
  *
  * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
  *

package/src/vaadin-message-list.js

@@ -4,12 +4,13 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import './vaadin-message.js';
-import { css, html, LitElement } from 'lit';
+import { html, LitElement } from 'lit';
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
 import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
 import { SlotStylesMixin } from '@vaadin/component-base/src/slot-styles-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { messageListStyles } from './styles/vaadin-message-list-base-styles.js';
 import { MessageListMixin } from './vaadin-message-list-mixin.js';
 
 /**
@@ -40,8 +41,24 @@ import { MessageListMixin } from './vaadin-message-list-mixin.js';
  * ----------|----------------
  * `list`    | The container wrapping messages.
  *
+ * The following custom CSS properties are available for styling:
+ *
+ * Custom CSS property                |
+ * :--------------------------------- |
+ * `--vaadin-message-list-max-width`  |
+ * `--vaadin-message-list-padding`    |
+ *
+ * ### Built-in Theme Variants
+ *
+ * `<vaadin-message-list>` supports the following theme variants:
+ *
+ * Theme variant        | Description
+ * ---------------------|---------------
+ * `theme="bubble"`     | Shows the messages as chat bubbles
+ * `theme="one-to-one"` | Hides the avatar and name of every message, for a chat between two participants. Works together with `bubble`
+ *
  * See the [`<vaadin-message>`](#/elements/vaadin-message) documentation for the available
- * state attributes and stylable shadow parts of message elements.
+ * theme variants, state attributes and stylable shadow parts of message elements.
  *
  * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
  *
@@ -57,25 +74,7 @@ class MessageList extends SlotStylesMixin(MessageListMixin(ElementMixin(Themable
   }
 
   static get styles() {
-    return css`
-      :host {
-        display: block;
-        overflow: auto;
-        padding: var(--vaadin-message-list-padding, var(--vaadin-padding-xs) 0);
-        scroll-padding: var(--vaadin-message-list-padding, var(--vaadin-padding-xs) 0);
-        scroll-snap-type: y proximity;
-      }
-
-      :host([hidden]) {
-        display: none !important;
-      }
-
-      [part='list']::after {
-        content: '';
-        display: block;
-        scroll-snap-align: var(--_vaadin-message-list-scroll-snap-align, none);
-      }
-    `;
+    return messageListStyles;
   }
 
   /** @protected */
@@ -92,6 +91,10 @@ class MessageList extends SlotStylesMixin(MessageListMixin(ElementMixin(Themable
     const tag = this.localName;
     return [
       `
+      ${tag} vaadin-message:has(> vaadin-markdown:not(:defined)) {
+        visibility: hidden;
+      }
+
       ${tag} :where(vaadin-markdown > :is(h1, h2, h3, h4, h5, h6, p, ul, ol):first-child) {
         margin-top: 0;
       }
@@ -99,6 +102,20 @@ class MessageList extends SlotStylesMixin(MessageListMixin(ElementMixin(Themable
       ${tag} :where(vaadin-markdown > :is(h1, h2, h3, h4, h5, h6, p, ul, ol):last-child) {
         margin-bottom: 0;
       }
+
+      ${tag}[theme~='bubble'] :where(vaadin-message[theme~='self'])::part(name),
+      ${tag}[theme~='bubble'][theme~='one-to-one'] :where(vaadin-message)::part(name) {
+        border: 0 !important;
+        clip: rect(1px, 1px, 1px, 1px) !important;
+        clip-path: inset(50%) !important;
+        height: 1px !important;
+        margin: -1px !important;
+        overflow: hidden !important;
+        padding: 0 !important;
+        position: absolute !important;
+        width: 1px !important;
+        white-space: nowrap !important;
+      }
       `,
     ];
   }

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

@@ -56,6 +56,7 @@ export declare class MessageMixinClass {
 
   /**
    * A color index to be used to render the color of the avatar.
+   * Also sets `--vaadin-message-user-color` custom CSS property.
    *
    * @attr {number} user-color-index
    */

package/src/vaadin-message-mixin.js

@@ -54,6 +54,7 @@ export const MessageMixin = (superClass) =>
 
         /**
          * A color index to be used to render the color of the avatar.
+         * Also sets `--vaadin-message-user-color` custom CSS property.
          *
          * @attr {number} user-color-index
          */
@@ -101,6 +102,20 @@ export const MessageMixin = (superClass) =>
       this.addController(this._avatarController);
     }
 
+    /** @protected */
+    updated(props) {
+      super.updated(props);
+
+      if (props.has('userColorIndex')) {
+        const index = this.userColorIndex;
+        if (index != null) {
+          this.style.setProperty('--vaadin-message-user-color', `var(--vaadin-user-color-${index})`);
+        } else {
+          this.style.removeProperty('--vaadin-message-user-color');
+        }
+      }
+    }
+
     /** @private */
     __avatarChanged(avatar, userName, userAbbr, userImg, userColorIndex) {
       if (avatar) {

package/src/vaadin-message.d.ts

@@ -65,6 +65,10 @@ export type MessageEventMap = HTMLElementEventMap & {
  * `--vaadin-message-attachment-line-height`    |
  * `--vaadin-message-attachment-padding`        |
  * `--vaadin-message-attachment-text-color`     |
+ * `--vaadin-message-attachments-alignment`     |
+ * `--vaadin-message-content-background`        |
+ * `--vaadin-message-content-border-radius`     |
+ * `--vaadin-message-content-padding`           |
  * `--vaadin-message-font-size`                 |
  * `--vaadin-message-font-weight`               |
  * `--vaadin-message-gap`                       |
@@ -78,6 +82,17 @@ export type MessageEventMap = HTMLElementEventMap & {
  * `--vaadin-message-time-color`                |
  * `--vaadin-message-time-font-size`            |
  * `--vaadin-message-time-font-weight`          |
+ * `--vaadin-message-user-color`                |
+ *
+ * ### Built-in Theme Variants
+ *
+ * `<vaadin-message>` supports the following theme variants. Both of them require the parent
+ * [`<vaadin-message-list>`](#/elements/vaadin-message-list) to use `theme="bubble"`:
+ *
+ * Theme variant         | Description
+ * ----------------------|---------------
+ * `theme="self"`        | Shows the message as sent by the current user, hides the avatar and name
+ * `theme="full-width"`  | Removes the bubble and the width restriction, for an assistant or AI response
  *
  * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
  *

package/src/vaadin-message.js

@@ -65,6 +65,10 @@ import { MessageMixin } from './vaadin-message-mixin.js';
  * `--vaadin-message-attachment-line-height`    |
  * `--vaadin-message-attachment-padding`        |
  * `--vaadin-message-attachment-text-color`     |
+ * `--vaadin-message-attachments-alignment`     |
+ * `--vaadin-message-content-background`        |
+ * `--vaadin-message-content-border-radius`     |
+ * `--vaadin-message-content-padding`           |
  * `--vaadin-message-font-size`                 |
  * `--vaadin-message-font-weight`               |
  * `--vaadin-message-gap`                       |
@@ -78,6 +82,17 @@ import { MessageMixin } from './vaadin-message-mixin.js';
  * `--vaadin-message-time-color`                |
  * `--vaadin-message-time-font-size`            |
  * `--vaadin-message-time-font-weight`          |
+ * `--vaadin-message-user-color`                |
+ *
+ * ### Built-in Theme Variants
+ *
+ * `<vaadin-message>` supports the following theme variants. Both of them require the parent
+ * [`<vaadin-message-list>`](#/elements/vaadin-message-list) to use `theme="bubble"`:
+ *
+ * Theme variant         | Description
+ * ----------------------|---------------
+ * `theme="self"`        | Shows the message as sent by the current user, hides the avatar and name
+ * `theme="full-width"`  | Removes the bubble and the width restriction, for an assistant or AI response
  *
  * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
  *

package/web-types.json

@@ -1,14 +1,14 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/message-list",
-  "version": "25.3.0-alpha9",
+  "version": "25.3.0-beta2",
   "description-markup": "markdown",
   "contributions": {
     "html": {
       "elements": [
         {
           "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\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/25.3.0-alpha9/#/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/25.3.0-alpha9/#/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/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/25.3.0-beta2/#/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\nThe following custom CSS properties are available for styling:\n\nCustom CSS property                |\n:--------------------------------- |\n`--vaadin-message-list-max-width`  |\n`--vaadin-message-list-padding`    |\n\n### Built-in Theme Variants\n\n`<vaadin-message-list>` supports the following theme variants:\n\nTheme variant        | Description\n---------------------|---------------\n`theme=\"bubble\"`     | Shows the messages as chat bubbles\n`theme=\"one-to-one\"` | Hides the avatar and name of every message, for a chat between two participants. Works together with `bubble`\n\nSee the [`<vaadin-message>`](https://cdn.vaadin.com/vaadin-web-components/25.3.0-beta2/#/elements/vaadin-message) documentation for the available\ntheme variants, state attributes and stylable shadow parts of message elements.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
           "attributes": [
             {
               "name": "announce-messages",
@@ -78,7 +78,7 @@
         },
         {
           "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\n  time=\"2021-01-28 10:43\"\n  user-name=\"Bob Ross\"\n  user-abbr=\"BR\"\n  user-img=\"/static/img/avatar.jpg\"\n>\n There is no real ending. It's just the place where you stop the story.\n</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`attachments`       | Container for the attachments\n`attachment`        | Individual attachment button\n`attachment-image`  | Image attachment button (in addition to `attachment`)\n`attachment-file`   | File attachment button (in addition to `attachment`)\n`attachment-preview`| Image preview inside an image attachment\n`attachment-icon`   | File icon inside a file attachment\n`attachment-name`   | File name inside a file attachment\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\nThe following custom CSS properties are available for styling:\n\nCustom CSS property                          |\n:------------------------------------------- |\n`--vaadin-message-attachment-background`     |\n`--vaadin-message-attachment-border-color`   |\n`--vaadin-message-attachment-border-radius`  |\n`--vaadin-message-attachment-border-width`   |\n`--vaadin-message-attachment-font-size`      |\n`--vaadin-message-attachment-font-weight`    |\n`--vaadin-message-attachment-gap`            |\n`--vaadin-message-attachment-line-height`    |\n`--vaadin-message-attachment-padding`        |\n`--vaadin-message-attachment-text-color`     |\n`--vaadin-message-font-size`                 |\n`--vaadin-message-font-weight`               |\n`--vaadin-message-gap`                       |\n`--vaadin-message-header-line-height`        |\n`--vaadin-message-line-height`               |\n`--vaadin-message-name-color`                |\n`--vaadin-message-name-font-size`            |\n`--vaadin-message-name-font-weight`          |\n`--vaadin-message-padding`                   |\n`--vaadin-message-text-color`                |\n`--vaadin-message-time-color`                |\n`--vaadin-message-time-font-size`            |\n`--vaadin-message-time-font-weight`          |\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
+          "description": "`<vaadin-message>` is a Web Component for showing a single message with an author, message and time.\n\n```html\n<vaadin-message\n  time=\"2021-01-28 10:43\"\n  user-name=\"Bob Ross\"\n  user-abbr=\"BR\"\n  user-img=\"/static/img/avatar.jpg\"\n>\n There is no real ending. It's just the place where you stop the story.\n</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`attachments`       | Container for the attachments\n`attachment`        | Individual attachment button\n`attachment-image`  | Image attachment button (in addition to `attachment`)\n`attachment-file`   | File attachment button (in addition to `attachment`)\n`attachment-preview`| Image preview inside an image attachment\n`attachment-icon`   | File icon inside a file attachment\n`attachment-name`   | File name inside a file attachment\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\nThe following custom CSS properties are available for styling:\n\nCustom CSS property                          |\n:------------------------------------------- |\n`--vaadin-message-attachment-background`     |\n`--vaadin-message-attachment-border-color`   |\n`--vaadin-message-attachment-border-radius`  |\n`--vaadin-message-attachment-border-width`   |\n`--vaadin-message-attachment-font-size`      |\n`--vaadin-message-attachment-font-weight`    |\n`--vaadin-message-attachment-gap`            |\n`--vaadin-message-attachment-line-height`    |\n`--vaadin-message-attachment-padding`        |\n`--vaadin-message-attachment-text-color`     |\n`--vaadin-message-attachments-alignment`     |\n`--vaadin-message-content-background`        |\n`--vaadin-message-content-border-radius`     |\n`--vaadin-message-content-padding`           |\n`--vaadin-message-font-size`                 |\n`--vaadin-message-font-weight`               |\n`--vaadin-message-gap`                       |\n`--vaadin-message-header-line-height`        |\n`--vaadin-message-line-height`               |\n`--vaadin-message-name-color`                |\n`--vaadin-message-name-font-size`            |\n`--vaadin-message-name-font-weight`          |\n`--vaadin-message-padding`                   |\n`--vaadin-message-text-color`                |\n`--vaadin-message-time-color`                |\n`--vaadin-message-time-font-size`            |\n`--vaadin-message-time-font-weight`          |\n`--vaadin-message-user-color`                |\n\n### Built-in Theme Variants\n\n`<vaadin-message>` supports the following theme variants. Both of them require the parent\n[`<vaadin-message-list>`](https://cdn.vaadin.com/vaadin-web-components/25.3.0-beta2/#/elements/vaadin-message-list) to use `theme=\"bubble\"`:\n\nTheme variant         | Description\n----------------------|---------------\n`theme=\"self\"`        | Shows the message as sent by the current user, hides the avatar and name\n`theme=\"full-width\"`  | Removes the bubble and the width restriction, for an assistant or AI response\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
           "attributes": [
             {
               "name": "theme",
@@ -109,7 +109,7 @@
             },
             {
               "name": "user-color-index",
-              "description": "A color index to be used to render the color of the avatar.",
+              "description": "A color index to be used to render the color of the avatar.\nAlso sets `--vaadin-message-user-color` custom CSS property.",
               "value": {
                 "type": [
                   "number"
@@ -166,7 +166,7 @@
               },
               {
                 "name": "userColorIndex",
-                "description": "A color index to be used to render the color of the avatar.",
+                "description": "A color index to be used to render the color of the avatar.\nAlso sets `--vaadin-message-user-color` custom CSS property.",
                 "value": {
                   "type": [
                     "number"

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/message-list",
-  "version": "25.3.0-alpha9",
+  "version": "25.3.0-beta2",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {
@@ -16,7 +16,7 @@
       "elements": [
         {
           "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\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/25.3.0-alpha9/#/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/25.3.0-alpha9/#/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/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/25.3.0-beta2/#/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\nThe following custom CSS properties are available for styling:\n\nCustom CSS property                |\n:--------------------------------- |\n`--vaadin-message-list-max-width`  |\n`--vaadin-message-list-padding`    |\n\n### Built-in Theme Variants\n\n`<vaadin-message-list>` supports the following theme variants:\n\nTheme variant        | Description\n---------------------|---------------\n`theme=\"bubble\"`     | Shows the messages as chat bubbles\n`theme=\"one-to-one\"` | Hides the avatar and name of every message, for a chat between two participants. Works together with `bubble`\n\nSee the [`<vaadin-message>`](https://cdn.vaadin.com/vaadin-web-components/25.3.0-beta2/#/elements/vaadin-message) documentation for the available\ntheme variants, state attributes and stylable shadow parts of message elements.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
           "extension": true,
           "attributes": [
             {
@@ -51,7 +51,7 @@
         },
         {
           "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\n  time=\"2021-01-28 10:43\"\n  user-name=\"Bob Ross\"\n  user-abbr=\"BR\"\n  user-img=\"/static/img/avatar.jpg\"\n>\n There is no real ending. It's just the place where you stop the story.\n</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`attachments`       | Container for the attachments\n`attachment`        | Individual attachment button\n`attachment-image`  | Image attachment button (in addition to `attachment`)\n`attachment-file`   | File attachment button (in addition to `attachment`)\n`attachment-preview`| Image preview inside an image attachment\n`attachment-icon`   | File icon inside a file attachment\n`attachment-name`   | File name inside a file attachment\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\nThe following custom CSS properties are available for styling:\n\nCustom CSS property                          |\n:------------------------------------------- |\n`--vaadin-message-attachment-background`     |\n`--vaadin-message-attachment-border-color`   |\n`--vaadin-message-attachment-border-radius`  |\n`--vaadin-message-attachment-border-width`   |\n`--vaadin-message-attachment-font-size`      |\n`--vaadin-message-attachment-font-weight`    |\n`--vaadin-message-attachment-gap`            |\n`--vaadin-message-attachment-line-height`    |\n`--vaadin-message-attachment-padding`        |\n`--vaadin-message-attachment-text-color`     |\n`--vaadin-message-font-size`                 |\n`--vaadin-message-font-weight`               |\n`--vaadin-message-gap`                       |\n`--vaadin-message-header-line-height`        |\n`--vaadin-message-line-height`               |\n`--vaadin-message-name-color`                |\n`--vaadin-message-name-font-size`            |\n`--vaadin-message-name-font-weight`          |\n`--vaadin-message-padding`                   |\n`--vaadin-message-text-color`                |\n`--vaadin-message-time-color`                |\n`--vaadin-message-time-font-size`            |\n`--vaadin-message-time-font-weight`          |\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
+          "description": "`<vaadin-message>` is a Web Component for showing a single message with an author, message and time.\n\n```html\n<vaadin-message\n  time=\"2021-01-28 10:43\"\n  user-name=\"Bob Ross\"\n  user-abbr=\"BR\"\n  user-img=\"/static/img/avatar.jpg\"\n>\n There is no real ending. It's just the place where you stop the story.\n</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`attachments`       | Container for the attachments\n`attachment`        | Individual attachment button\n`attachment-image`  | Image attachment button (in addition to `attachment`)\n`attachment-file`   | File attachment button (in addition to `attachment`)\n`attachment-preview`| Image preview inside an image attachment\n`attachment-icon`   | File icon inside a file attachment\n`attachment-name`   | File name inside a file attachment\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\nThe following custom CSS properties are available for styling:\n\nCustom CSS property                          |\n:------------------------------------------- |\n`--vaadin-message-attachment-background`     |\n`--vaadin-message-attachment-border-color`   |\n`--vaadin-message-attachment-border-radius`  |\n`--vaadin-message-attachment-border-width`   |\n`--vaadin-message-attachment-font-size`      |\n`--vaadin-message-attachment-font-weight`    |\n`--vaadin-message-attachment-gap`            |\n`--vaadin-message-attachment-line-height`    |\n`--vaadin-message-attachment-padding`        |\n`--vaadin-message-attachment-text-color`     |\n`--vaadin-message-attachments-alignment`     |\n`--vaadin-message-content-background`        |\n`--vaadin-message-content-border-radius`     |\n`--vaadin-message-content-padding`           |\n`--vaadin-message-font-size`                 |\n`--vaadin-message-font-weight`               |\n`--vaadin-message-gap`                       |\n`--vaadin-message-header-line-height`        |\n`--vaadin-message-line-height`               |\n`--vaadin-message-name-color`                |\n`--vaadin-message-name-font-size`            |\n`--vaadin-message-name-font-weight`          |\n`--vaadin-message-padding`                   |\n`--vaadin-message-text-color`                |\n`--vaadin-message-time-color`                |\n`--vaadin-message-time-font-size`            |\n`--vaadin-message-time-font-weight`          |\n`--vaadin-message-user-color`                |\n\n### Built-in Theme Variants\n\n`<vaadin-message>` supports the following theme variants. Both of them require the parent\n[`<vaadin-message-list>`](https://cdn.vaadin.com/vaadin-web-components/25.3.0-beta2/#/elements/vaadin-message-list) to use `theme=\"bubble\"`:\n\nTheme variant         | Description\n----------------------|---------------\n`theme=\"self\"`        | Shows the message as sent by the current user, hides the avatar and name\n`theme=\"full-width\"`  | Removes the bubble and the width restriction, for an assistant or AI response\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
           "extension": true,
           "attributes": [
             {
@@ -77,7 +77,7 @@
             },
             {
               "name": ".userColorIndex",
-              "description": "A color index to be used to render the color of the avatar.",
+              "description": "A color index to be used to render the color of the avatar.\nAlso sets `--vaadin-message-user-color` custom CSS property.",
               "value": {
                 "kind": "expression"
               }