@vaadin/message-list 25.1.0-alpha4 → 25.1.0-alpha6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/message-list",
-  "version": "25.1.0-alpha4",
+  "version": "25.1.0-alpha6",
   "publishConfig": {
     "access": "public"
   },
@@ -36,24 +36,24 @@
   ],
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
-    "@vaadin/a11y-base": "25.1.0-alpha4",
-    "@vaadin/avatar": "25.1.0-alpha4",
-    "@vaadin/component-base": "25.1.0-alpha4",
-    "@vaadin/markdown": "25.1.0-alpha4",
-    "@vaadin/vaadin-themable-mixin": "25.1.0-alpha4",
+    "@vaadin/a11y-base": "25.1.0-alpha6",
+    "@vaadin/avatar": "25.1.0-alpha6",
+    "@vaadin/component-base": "25.1.0-alpha6",
+    "@vaadin/markdown": "25.1.0-alpha6",
+    "@vaadin/vaadin-themable-mixin": "25.1.0-alpha6",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/aura": "25.1.0-alpha4",
-    "@vaadin/chai-plugins": "25.1.0-alpha4",
-    "@vaadin/test-runner-commands": "25.1.0-alpha4",
+    "@vaadin/aura": "25.1.0-alpha6",
+    "@vaadin/chai-plugins": "25.1.0-alpha6",
+    "@vaadin/test-runner-commands": "25.1.0-alpha6",
     "@vaadin/testing-helpers": "^2.0.0",
-    "@vaadin/vaadin-lumo-styles": "25.1.0-alpha4",
+    "@vaadin/vaadin-lumo-styles": "25.1.0-alpha6",
     "sinon": "^21.0.0"
   },
   "web-types": [
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "4fb917150617231c1acf27faabf386560dcd3bc5"
+  "gitHead": "da6f4194492cbd77d18c6c1cd8d4d9f072e9ce8d"
 }

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

@@ -66,4 +66,50 @@ export const messageStyles = css`
   ::slotted(vaadin-markdown) {
     white-space: normal;
   }
+
+  [part='attachments'] {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px;
+  }
+
+  [part~='attachment'] {
+    display: inline-flex;
+    align-items: center;
+    color: inherit;
+    background: none;
+    border: none;
+    padding: 0;
+    margin: 0;
+    font: inherit;
+    cursor: pointer;
+    text-align: start;
+  }
+
+  [part~='attachment-image'] [part='attachment-preview'] {
+    display: block;
+    max-width: 200px;
+    max-height: 150px;
+  }
+
+  [part~='attachment-file'] {
+    gap: 6px;
+  }
+
+  [part='attachment-icon'] {
+    display: inline-block;
+    width: 1em;
+    height: 1em;
+    background: currentColor;
+    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"/><path d="M14 2v4a2 2 0 0 0 2 2h4"/></svg>');
+    mask-size: contain;
+    mask-repeat: no-repeat;
+    flex-shrink: 0;
+  }
+
+  [part='attachment-name'] {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
 `;

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

@@ -5,6 +5,14 @@
  */
 import type { Constructor } from '@open-wc/dedupe-mixin';
 import type { KeyboardDirectionMixinClass } from '@vaadin/a11y-base/src/keyboard-direction-mixin.js';
+import type { MessageAttachment, MessageAttachmentClickEvent } from './vaadin-message-mixin.js';
+
+export { MessageAttachment, MessageAttachmentClickEvent };
+
+/**
+ * Fired when an attachment is clicked in a message list item.
+ */
+export type MessageListAttachmentClickEvent = CustomEvent<{ attachment: MessageAttachment; item: MessageListItem }>;
 
 export interface MessageListItem {
   text?: string;
@@ -15,6 +23,7 @@ export interface MessageListItem {
   userColorIndex?: number;
   theme?: string;
   className?: string;
+  attachments?: MessageAttachment[];
 }
 
 export declare function MessageListMixin<T extends Constructor<HTMLElement>>(
@@ -34,9 +43,19 @@ export declare class MessageListMixinClass {
    *   userImg: string,
    *   userColorIndex: number,
    *   className: string,
-   *   theme: string
+   *   theme: string,
+   *   attachments: Array<{
+   *     name: string,
+   *     url: string,
+   *     type: string
+   *   }>
    * }>
    * ```
+   *
+   * When a message has attachments, they are rendered in the message's shadow DOM.
+   * Image attachments (type starting with "image/") show a thumbnail preview,
+   * while other attachments show a document icon with the file name.
+   * Clicking an attachment dispatches an `attachment-click` event.
    */
   items: MessageListItem[] | null | undefined;
 

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

@@ -29,9 +29,19 @@ export const MessageListMixin = (superClass) =>
          *   userImg: string,
          *   userColorIndex: number,
          *   className: string,
-         *   theme: string
+         *   theme: string,
+         *   attachments: Array<{
+         *     name: string,
+         *     url: string,
+         *     type: string
+         *   }>
          * }>
          * ```
+         *
+         * When a message has attachments, they are rendered in the message's shadow DOM.
+         * Image attachments (type starting with "image/") show a thumbnail preview,
+         * while other attachments show a document icon with the file name.
+         * Clicking an attachment dispatches an `attachment-click` event.
          */
         items: {
           type: Array,
@@ -78,6 +88,24 @@ export const MessageListMixin = (superClass) =>
       this.setAttribute('role', 'region');
     }
 
+    /**
+     * Handles attachment-click events from child messages and dispatches
+     * a new event enriched with the item.
+     * @param {CustomEvent} e
+     * @param {Object} item
+     * @private
+     */
+    __onAttachmentClick(e, item) {
+      this.dispatchEvent(
+        new CustomEvent('attachment-click', {
+          detail: {
+            ...e.detail,
+            item,
+          },
+        }),
+      );
+    }
+
     /**
      * Override method inherited from `KeyboardDirectionMixin`
      * to use the list of message elements as items.
@@ -142,9 +170,11 @@ export const MessageListMixin = (superClass) =>
                 .userName="${item.userName}"
                 .userImg="${item.userImg}"
                 .userColorIndex="${item.userColorIndex}"
+                .attachments="${item.attachments}"
                 theme="${ifDefined(item.theme)}"
                 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>`

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

@@ -6,9 +6,18 @@
 import { ElementMixin } from '@vaadin/component-base/src/element-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 { MessageListMixin } from './vaadin-message-list-mixin.js';
+import { type MessageListAttachmentClickEvent, MessageListMixin } from './vaadin-message-list-mixin.js';
 
-export { MessageListItem } from './vaadin-message-list-mixin.js';
+export {
+  MessageAttachment,
+  MessageAttachmentClickEvent,
+  MessageListAttachmentClickEvent,
+  MessageListItem,
+} from './vaadin-message-list-mixin.js';
+
+export type MessageListEventMap = HTMLElementEventMap & {
+  'attachment-click': MessageListAttachmentClickEvent;
+};
 
 /**
  * `<vaadin-message-list>` is a Web Component for showing an ordered list of messages. The messages are rendered as <vaadin-message>
@@ -42,8 +51,22 @@ export { MessageListItem } from './vaadin-message-list-mixin.js';
  * state attributes and stylable shadow parts of message elements.
  *
  * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
+ *
+ * @fires {CustomEvent} attachment-click - Fired when an attachment is clicked.
  */
-declare class MessageList extends SlotStylesMixin(MessageListMixin(ThemableMixin(ElementMixin(HTMLElement)))) {}
+declare class MessageList extends SlotStylesMixin(MessageListMixin(ThemableMixin(ElementMixin(HTMLElement)))) {
+  addEventListener<K extends keyof MessageListEventMap>(
+    type: K,
+    listener: (this: MessageList, ev: MessageListEventMap[K]) => void,
+    options?: AddEventListenerOptions | boolean,
+  ): void;
+
+  removeEventListener<K extends keyof MessageListEventMap>(
+    type: K,
+    listener: (this: MessageList, ev: MessageListEventMap[K]) => void,
+    options?: EventListenerOptions | boolean,
+  ): void;
+}
 
 declare global {
   interface HTMLElementTagNameMap {

package/src/vaadin-message-list.js

@@ -45,6 +45,8 @@ import { MessageListMixin } from './vaadin-message-list-mixin.js';
  *
  * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
  *
+ * @fires {CustomEvent} attachment-click - Fired when an attachment is clicked.
+ *
  * @customElement
  * @extends HTMLElement
  * @mixes ThemableMixin

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

@@ -6,6 +6,17 @@
 import type { Constructor } from '@open-wc/dedupe-mixin';
 import type { FocusMixinClass } from '@vaadin/a11y-base/src/focus-mixin.js';
 
+export interface MessageAttachment {
+  name?: string;
+  url?: string;
+  type?: string;
+}
+
+/**
+ * Fired when an attachment is clicked.
+ */
+export type MessageAttachmentClickEvent = CustomEvent<{ attachment: MessageAttachment }>;
+
 export declare function MessageMixin<T extends Constructor<HTMLElement>>(
   base: T,
 ): Constructor<FocusMixinClass> & Constructor<MessageMixinClass> & T;
@@ -64,4 +75,16 @@ export declare class MessageMixinClass {
    * @attr {number} user-color-index
    */
   userColorIndex: number | null | undefined;
+
+  /**
+   * An array of attachment objects to display with the message.
+   * Each attachment object can have the following properties:
+   * - `name`: The name of the attachment file
+   * - `url`: The URL of the attachment
+   * - `type`: The MIME type of the attachment (e.g., 'image/png', 'application/pdf')
+   *
+   * Image attachments (type starting with "image/") show a thumbnail preview,
+   * while other attachments show a document icon with the file name.
+   */
+  attachments: MessageAttachment[] | null | undefined;
 }

package/src/vaadin-message-mixin.js

@@ -3,6 +3,8 @@
  * Copyright (c) 2021 - 2026 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
+import { html } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import { FocusMixin } from '@vaadin/a11y-base/src/focus-mixin.js';
 import { SlotController } from '@vaadin/component-base/src/slot-controller.js';
 
@@ -78,6 +80,22 @@ export const MessageMixin = (superClass) =>
           type: Number,
         },
 
+        /**
+         * An array of attachment objects to display with the message.
+         * Each attachment object can have the following properties:
+         * - `name`: The name of the attachment file
+         * - `url`: The URL of the attachment
+         * - `type`: The MIME type of the attachment (e.g., 'image/png', 'application/pdf')
+         *
+         * Image attachments (type starting with "image/") show a thumbnail preview,
+         * while other attachments show a document icon with the file name.
+         *
+         * @type {Array<{name?: string, url?: string, type?: string}>}
+         */
+        attachments: {
+          type: Array,
+        },
+
         /** @private */
         _avatar: {
           type: Object,
@@ -113,4 +131,61 @@ export const MessageMixin = (superClass) =>
         });
       }
     }
+
+    /**
+     * Renders attachments for the message.
+     * @private
+     */
+    __renderAttachments() {
+      const attachments = this.attachments;
+      if (!attachments || attachments.length === 0) {
+        return '';
+      }
+
+      return html`
+        <div part="attachments">${attachments.map((attachment) => this.__renderAttachment(attachment))}</div>
+      `;
+    }
+
+    /**
+     * Renders a single attachment.
+     * @param {Object} attachment - The attachment object with name, url, and type properties
+     * @private
+     */
+    __renderAttachment(attachment) {
+      const isImage = attachment.type && attachment.type.startsWith('image/');
+
+      if (isImage) {
+        return html`
+          <button
+            type="button"
+            part="attachment attachment-image"
+            aria-label="${attachment.name || ''}"
+            @click="${() => this.__onAttachmentClick(attachment)}"
+          >
+            <img part="attachment-preview" src="${ifDefined(attachment.url)}" alt="" />
+          </button>
+        `;
+      }
+
+      return html`
+        <button type="button" part="attachment attachment-file" @click="${() => this.__onAttachmentClick(attachment)}">
+          <span part="attachment-icon" aria-hidden="true"></span>
+          <span part="attachment-name">${attachment.name || ''}</span>
+        </button>
+      `;
+    }
+
+    /**
+     * Dispatches an event when an attachment is clicked.
+     * @param {Object} attachment - The attachment that was clicked
+     * @private
+     */
+    __onAttachmentClick(attachment) {
+      this.dispatchEvent(
+        new CustomEvent('attachment-click', {
+          detail: { attachment },
+        }),
+      );
+    }
   };

package/src/vaadin-message.d.ts

@@ -5,7 +5,13 @@
  */
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-import { MessageMixin } from './vaadin-message-mixin.js';
+import { type MessageAttachmentClickEvent, MessageMixin } from './vaadin-message-mixin.js';
+
+export { MessageAttachment, MessageAttachmentClickEvent } from './vaadin-message-mixin.js';
+
+export type MessageEventMap = HTMLElementEventMap & {
+  'attachment-click': MessageAttachmentClickEvent;
+};
 
 /**
  * `<vaadin-message>` is a Web Component for showing a single message with an author, message and time.
@@ -21,11 +27,18 @@ import { MessageMixin } from './vaadin-message-mixin.js';
  *
  * The following shadow DOM parts are available for styling:
  *
- * Part name | Description
- * ----------|----------------
- * `name`    | Author's name
- * `time`    | When the message was posted
- * `content` | The message itself as a slotted content
+ * Part name           | Description
+ * --------------------|----------------
+ * `name`              | Author's name
+ * `time`              | When the message was posted
+ * `content`           | The message itself as a slotted content
+ * `attachments`       | Container for the attachments
+ * `attachment`        | Individual attachment button
+ * `attachment-image`  | Image attachment button (in addition to `attachment`)
+ * `attachment-file`   | File attachment button (in addition to `attachment`)
+ * `attachment-preview`| Image preview inside an image attachment
+ * `attachment-icon`   | File icon inside a file attachment
+ * `attachment-name`   | File name inside a file attachment
  *
  * The following state attributes are available for styling:
  *
@@ -35,8 +48,22 @@ import { MessageMixin } from './vaadin-message-mixin.js';
  * `focused`    | Set when the message is focused.
  *
  * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
+ *
+ * @fires {CustomEvent} attachment-click - Fired when an attachment is clicked.
  */
-declare class Message extends MessageMixin(ThemableMixin(ElementMixin(HTMLElement))) {}
+declare class Message extends MessageMixin(ThemableMixin(ElementMixin(HTMLElement))) {
+  addEventListener<K extends keyof MessageEventMap>(
+    type: K,
+    listener: (this: Message, ev: MessageEventMap[K]) => void,
+    options?: AddEventListenerOptions | boolean,
+  ): void;
+
+  removeEventListener<K extends keyof MessageEventMap>(
+    type: K,
+    listener: (this: Message, ev: MessageEventMap[K]) => void,
+    options?: EventListenerOptions | boolean,
+  ): void;
+}
 
 declare global {
   interface HTMLElementTagNameMap {

package/src/vaadin-message.js

@@ -27,11 +27,18 @@ import { MessageMixin } from './vaadin-message-mixin.js';
  *
  * The following shadow DOM parts are available for styling:
  *
- * Part name | Description
- * ----------|----------------
- * `name`    | Author's name
- * `time`    | When the message was posted
- * `content` | The message itself as a slotted content
+ * Part name           | Description
+ * --------------------|----------------
+ * `name`              | Author's name
+ * `time`              | When the message was posted
+ * `content`           | The message itself as a slotted content
+ * `attachments`       | Container for the attachments
+ * `attachment`        | Individual attachment button
+ * `attachment-image`  | Image attachment button (in addition to `attachment`)
+ * `attachment-file`   | File attachment button (in addition to `attachment`)
+ * `attachment-preview`| Image preview inside an image attachment
+ * `attachment-icon`   | File icon inside a file attachment
+ * `attachment-name`   | File name inside a file attachment
  *
  * The following state attributes are available for styling:
  *
@@ -42,6 +49,8 @@ import { MessageMixin } from './vaadin-message-mixin.js';
  *
  * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
  *
+ * @fires {CustomEvent} attachment-click - Fired when an attachment is clicked.
+ *
  * @customElement
  * @extends HTMLElement
  * @mixes MessageMixin
@@ -70,6 +79,7 @@ class Message extends MessageMixin(ElementMixin(ThemableMixin(PolylitMixin(LumoI
           <span part="name">${this.userName}</span>
           <span part="time">${this.time}</span>
         </div>
+        ${this.__renderAttachments()}
         <div part="message"><slot></slot></div>
       </div>
     `;

package/web-types.json

@@ -1,14 +1,14 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/message-list",
-  "version": "25.1.0-alpha4",
+  "version": "25.1.0-alpha6",
   "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`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/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 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`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\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
           "attributes": [
             {
               "name": "time",
@@ -133,6 +133,17 @@
                     "undefined"
                   ]
                 }
+              },
+              {
+                "name": "attachments",
+                "description": "An array of attachment objects to display with the message.\nEach attachment object can have the following properties:\n- `name`: The name of the attachment file\n- `url`: The URL of the attachment\n- `type`: The MIME type of the attachment (e.g., 'image/png', 'application/pdf')\n\nImage attachments (type starting with \"image/\") show a thumbnail preview,\nwhile other attachments show a document icon with the file name.",
+                "value": {
+                  "type": [
+                    "Array",
+                    "null",
+                    "undefined"
+                  ]
+                }
               }
             ],
             "events": []
@@ -140,7 +151,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\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.1.0-alpha4/#/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.1.0-alpha4/#/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.1.0-alpha6/#/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.1.0-alpha6/#/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.",
           "attributes": [
             {
               "name": "markdown",
@@ -176,7 +187,7 @@
             "properties": [
               {
                 "name": "items",
-                "description": "An array of objects which will be rendered as messages.\nThe message objects can have the following properties:\n```js\nArray<{\n  text: string,\n  time: string,\n  userName: string,\n  userAbbr: string,\n  userImg: string,\n  userColorIndex: number,\n  className: string,\n  theme: string\n}>\n```",
+                "description": "An array of objects which will be rendered as messages.\nThe message objects can have the following properties:\n```js\nArray<{\n  text: string,\n  time: string,\n  userName: string,\n  userAbbr: string,\n  userImg: string,\n  userColorIndex: number,\n  className: string,\n  theme: string,\n  attachments: Array<{\n    name: string,\n    url: string,\n    type: string\n  }>\n}>\n```\n\nWhen a message has attachments, they are rendered in the message's shadow DOM.\nImage attachments (type starting with \"image/\") show a thumbnail preview,\nwhile other attachments show a document icon with the file name.\nClicking an attachment dispatches an `attachment-click` event.",
                 "value": {
                   "type": [
                     "Array",

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/message-list",
-  "version": "25.1.0-alpha4",
+  "version": "25.1.0-alpha6",
   "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`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/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 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`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\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
           "extension": true,
           "attributes": [
             {
@@ -53,12 +53,19 @@
               "value": {
                 "kind": "expression"
               }
+            },
+            {
+              "name": ".attachments",
+              "description": "An array of attachment objects to display with the message.\nEach attachment object can have the following properties:\n- `name`: The name of the attachment file\n- `url`: The URL of the attachment\n- `type`: The MIME type of the attachment (e.g., 'image/png', 'application/pdf')\n\nImage attachments (type starting with \"image/\") show a thumbnail preview,\nwhile other attachments show a document icon with the file name.",
+              "value": {
+                "kind": "expression"
+              }
             }
           ]
         },
         {
           "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.1.0-alpha4/#/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.1.0-alpha4/#/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.1.0-alpha6/#/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.1.0-alpha6/#/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.",
           "extension": true,
           "attributes": [
             {
@@ -77,7 +84,7 @@
             },
             {
               "name": ".items",
-              "description": "An array of objects which will be rendered as messages.\nThe message objects can have the following properties:\n```js\nArray<{\n  text: string,\n  time: string,\n  userName: string,\n  userAbbr: string,\n  userImg: string,\n  userColorIndex: number,\n  className: string,\n  theme: string\n}>\n```",
+              "description": "An array of objects which will be rendered as messages.\nThe message objects can have the following properties:\n```js\nArray<{\n  text: string,\n  time: string,\n  userName: string,\n  userAbbr: string,\n  userImg: string,\n  userColorIndex: number,\n  className: string,\n  theme: string,\n  attachments: Array<{\n    name: string,\n    url: string,\n    type: string\n  }>\n}>\n```\n\nWhen a message has attachments, they are rendered in the message's shadow DOM.\nImage attachments (type starting with \"image/\") show a thumbnail preview,\nwhile other attachments show a document icon with the file name.\nClicking an attachment dispatches an `attachment-click` event.",
               "value": {
                 "kind": "expression"
               }