@vaadin/message-list 24.6.0-alpha9 → 24.6.0-rc1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/message-list",
-  "version": "24.6.0-alpha9",
+  "version": "24.6.0-rc1",
   "publishConfig": {
     "access": "public"
   },
@@ -37,17 +37,18 @@
     "polymer"
   ],
   "dependencies": {
+    "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/a11y-base": "24.6.0-alpha9",
-    "@vaadin/avatar": "24.6.0-alpha9",
-    "@vaadin/component-base": "24.6.0-alpha9",
-    "@vaadin/vaadin-lumo-styles": "24.6.0-alpha9",
-    "@vaadin/vaadin-material-styles": "24.6.0-alpha9",
-    "@vaadin/vaadin-themable-mixin": "24.6.0-alpha9",
+    "@vaadin/a11y-base": "24.6.0-rc1",
+    "@vaadin/avatar": "24.6.0-rc1",
+    "@vaadin/component-base": "24.6.0-rc1",
+    "@vaadin/vaadin-lumo-styles": "24.6.0-rc1",
+    "@vaadin/vaadin-material-styles": "24.6.0-rc1",
+    "@vaadin/vaadin-themable-mixin": "24.6.0-rc1",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/chai-plugins": "24.6.0-alpha9",
+    "@vaadin/chai-plugins": "24.6.0-rc1",
     "@vaadin/testing-helpers": "^1.0.0",
     "sinon": "^18.0.0"
   },
@@ -55,5 +56,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "e303d77ba20c3089c9998be9a318733d9ec5b53c"
+  "gitHead": "d62ba309e3286777ad3ea7e015d50a2c4976bb42"
 }

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

@@ -0,0 +1 @@
+export * from './vaadin-message-list.js';

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

@@ -0,0 +1,53 @@
+/**
+ * @license
+ * Copyright (c) 2021 - 2024 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import './vaadin-lit-message.js';
+import { css, 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 { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { MessageListMixin } from './vaadin-message-list-mixin.js';
+
+/**
+ * LitElement based version of `<vaadin-message-list>` web component.
+ *
+ * ## Disclaimer
+ *
+ * This component is an experiment and not yet a part of Vaadin platform.
+ * There is no ETA regarding specific Vaadin version where it'll land.
+ * Feel free to try this code in your apps as per Apache 2.0 license.
+ */
+class MessageList extends MessageListMixin(ElementMixin(ThemableMixin(PolylitMixin(LitElement)))) {
+  static get is() {
+    return 'vaadin-message-list';
+  }
+
+  static get styles() {
+    return css`
+      :host {
+        display: block;
+        overflow: auto;
+      }
+
+      :host([hidden]) {
+        display: none !important;
+      }
+    `;
+  }
+
+  /** @protected */
+  render() {
+    return html`
+      <div part="list" role="list">
+        <slot></slot>
+      </div>
+    `;
+  }
+}
+
+defineCustomElement(MessageList);
+
+export { MessageList };

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

@@ -0,0 +1 @@
+export * from './vaadin-message.js';

package/src/vaadin-lit-message.js

@@ -0,0 +1,50 @@
+/**
+ * @license
+ * Copyright (c) 2021 - 2024 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import '@vaadin/avatar/src/vaadin-lit-avatar.js';
+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 { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { MessageMixin } from './vaadin-message-mixin.js';
+import { messageStyles } from './vaadin-message-styles.js';
+
+/**
+ * LitElement based version of `<vaadin-message>` web component.
+ *
+ * ## Disclaimer
+ *
+ * This component is an experiment and not yet a part of Vaadin platform.
+ * There is no ETA regarding specific Vaadin version where it'll land.
+ * Feel free to try this code in your apps as per Apache 2.0 license.
+ */
+class Message extends MessageMixin(ElementMixin(ThemableMixin(PolylitMixin(LitElement)))) {
+  static get is() {
+    return 'vaadin-message';
+  }
+
+  static get styles() {
+    return messageStyles;
+  }
+
+  /** @protected */
+  render() {
+    return html`
+      <slot name="avatar"></slot>
+      <div part="content">
+        <div part="header">
+          <span part="name">${this.userName}</span>
+          <span part="time">${this.time}</span>
+        </div>
+        <div part="message"><slot></slot></div>
+      </div>
+    `;
+  }
+}
+
+defineCustomElement(Message);
+
+export { Message };

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

@@ -0,0 +1,42 @@
+/**
+ * @license
+ * Copyright (c) 2021 - 2024 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import type { Constructor } from '@open-wc/dedupe-mixin';
+import type { KeyboardDirectionMixinClass } from '@vaadin/a11y-base/src/keyboard-direction-mixin.js';
+
+export interface MessageListItem {
+  text?: string;
+  time?: string;
+  userName?: string;
+  userAbbr?: string;
+  userImg?: string;
+  userColorIndex?: number;
+  theme?: string;
+  className?: string;
+}
+
+export declare function MessageListMixin<T extends Constructor<HTMLElement>>(
+  base: T,
+): Constructor<KeyboardDirectionMixinClass> & Constructor<MessageListMixinClass> & T;
+
+export declare class MessageListMixinClass {
+  /**
+   * An array of objects which will be rendered as messages.
+   * The message objects can have the following properties:
+   * ```js
+   * Array<{
+   *   text: string,
+   *   time: string,
+   *   userName: string,
+   *   userAbbr: string,
+   *   userImg: string,
+   *   userColorIndex: number,
+   *   className: string,
+   *   theme: string
+   * }>
+   * ```
+   */
+  items: MessageListItem[] | null | undefined;
+}

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

@@ -0,0 +1,149 @@
+/**
+ * @license
+ * Copyright (c) 2021 - 2024 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { html, render } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { KeyboardDirectionMixin } from '@vaadin/a11y-base/src/keyboard-direction-mixin.js';
+
+/**
+ * @polymerMixin
+ * @mixes KeyboardDirectionMixin
+ */
+export const MessageListMixin = (superClass) =>
+  class MessageListMixinClass extends KeyboardDirectionMixin(superClass) {
+    static get properties() {
+      return {
+        /**
+         * An array of objects which will be rendered as messages.
+         * The message objects can have the following properties:
+         * ```js
+         * Array<{
+         *   text: string,
+         *   time: string,
+         *   userName: string,
+         *   userAbbr: string,
+         *   userImg: string,
+         *   userColorIndex: number,
+         *   className: string,
+         *   theme: string
+         * }>
+         * ```
+         */
+        items: {
+          type: Array,
+          value: () => [],
+          observer: '_itemsChanged',
+          sync: true,
+        },
+      };
+    }
+
+    /** @protected */
+    get _messages() {
+      return [...this.querySelectorAll('vaadin-message')];
+    }
+
+    /** @protected */
+    ready() {
+      super.ready();
+
+      // Make screen readers announce new messages
+      this.setAttribute('aria-relevant', 'additions');
+      this.setAttribute('role', 'log');
+    }
+
+    /**
+     * Override method inherited from `KeyboardDirectionMixin`
+     * to use the list of message elements as items.
+     *
+     * @return {Element[]}
+     * @protected
+     * @override
+     */
+    _getItems() {
+      return this._messages;
+    }
+
+    /** @private */
+    _itemsChanged(newVal, oldVal) {
+      const items = newVal || [];
+      const oldItems = oldVal || [];
+
+      if (items.length || oldItems.length) {
+        const focusedIndex = this._getIndexOfFocusableElement();
+        const closeToBottom = this.scrollHeight < this.clientHeight + this.scrollTop + 50;
+
+        this._renderMessages(items);
+        this._setTabIndexesByIndex(focusedIndex);
+
+        requestAnimationFrame(() => {
+          if (items.length > oldItems.length && closeToBottom) {
+            this._scrollToLastMessage();
+          }
+        });
+      }
+    }
+
+    /** @private */
+    _renderMessages(items) {
+      render(
+        html`
+          ${items.map(
+            (item) => html`
+              <vaadin-message
+                role="listitem"
+                .time="${item.time}"
+                .userAbbr="${item.userAbbr}"
+                .userName="${item.userName}"
+                .userImg="${item.userImg}"
+                .userColorIndex="${item.userColorIndex}"
+                theme="${ifDefined(item.theme)}"
+                class="${ifDefined(item.className)}"
+                @focusin="${this._onMessageFocusIn}"
+                >${item.text}<vaadin-avatar slot="avatar"></vaadin-avatar
+              ></vaadin-message>
+            `,
+          )}
+        `,
+        this,
+        { host: this },
+      );
+    }
+
+    /** @private */
+    _scrollToLastMessage() {
+      if (this.items.length > 0) {
+        this.scrollTop = this.scrollHeight - this.clientHeight;
+      }
+    }
+
+    /** @private */
+    _onMessageFocusIn(e) {
+      const target = e.composedPath().find((node) => node instanceof customElements.get('vaadin-message'));
+      this._setTabIndexesByMessage(target);
+    }
+
+    /**
+     * @param {number} idx
+     * @protected
+     */
+    _setTabIndexesByIndex(index) {
+      const message = this._messages[index] || this._messages[0];
+      this._setTabIndexesByMessage(message);
+    }
+
+    /** @private */
+    _setTabIndexesByMessage(message) {
+      this._messages.forEach((e) => {
+        e.tabIndex = e === message ? 0 : -1;
+      });
+    }
+
+    /** @private */
+    _getIndexOfFocusableElement() {
+      const index = this._messages.findIndex((e) => e.tabIndex === 0);
+      return index !== -1 ? index : 0;
+    }
+  };

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

@@ -3,20 +3,11 @@
  * Copyright (c) 2021 - 2024 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { KeyboardDirectionMixin } from '@vaadin/a11y-base/src/keyboard-direction-mixin.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { MessageListMixin } from './vaadin-message-list-mixin.js';
 
-export interface MessageListItem {
-  text?: string;
-  time?: string;
-  userName?: string;
-  userAbbr?: string;
-  userImg?: string;
-  userColorIndex?: number;
-  theme?: string;
-  className?: string;
-}
+export { MessageListItem } from './vaadin-message-list-mixin.js';
 
 /**
  * `<vaadin-message-list>` is a Web Component for showing an ordered list of messages. The messages are rendered as <vaadin-message>
@@ -51,27 +42,7 @@ export interface MessageListItem {
  *
  * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
  */
-declare class MessageList extends KeyboardDirectionMixin(ThemableMixin(ElementMixin(HTMLElement))) {
-  /**
-   * An array of objects which will be rendered as messages.
-   * The message objects can have the following properties:
-   * ```js
-   * Array<{
-   *   text: string,
-   *   time: string,
-   *   userName: string,
-   *   userAbbr: string,
-   *   userImg: string,
-   *   userColorIndex: number,
-   *   className: string,
-   *   theme: string
-   * }>
-   * ```
-   *
-   * @type {!Array<!MessageListItem>}
-   */
-  items: MessageListItem[] | null | undefined;
-}
+declare class MessageList extends MessageListMixin(ThemableMixin(ElementMixin(HTMLElement))) {}
 
 declare global {
   interface HTMLElementTagNameMap {

package/src/vaadin-message-list.js

@@ -3,14 +3,12 @@
  * Copyright (c) 2021 - 2024 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { html as legacyHtml, PolymerElement } from '@polymer/polymer/polymer-element.js';
-import { html, render } from 'lit';
-import { ifDefined } from 'lit/directives/if-defined.js';
-import { KeyboardDirectionMixin } from '@vaadin/a11y-base/src/keyboard-direction-mixin.js';
+import './vaadin-message.js';
+import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-import { Message } from './vaadin-message.js';
+import { MessageListMixin } from './vaadin-message-list-mixin.js';
 
 /**
  * `<vaadin-message-list>` is a Web Component for showing an ordered list of messages. The messages are rendered as <vaadin-message>
@@ -49,41 +47,15 @@ import { Message } from './vaadin-message.js';
  * @extends HTMLElement
  * @mixes ThemableMixin
  * @mixes ElementMixin
- * @mixes KeyboardDirectionMixin
+ * @mixes MessageListMixin
  */
-class MessageList extends KeyboardDirectionMixin(ElementMixin(ThemableMixin(PolymerElement))) {
+class MessageList extends MessageListMixin(ElementMixin(ThemableMixin(PolymerElement))) {
   static get is() {
     return 'vaadin-message-list';
   }
 
-  static get properties() {
-    return {
-      /**
-       * An array of objects which will be rendered as messages.
-       * The message objects can have the following properties:
-       * ```js
-       * Array<{
-       *   text: string,
-       *   time: string,
-       *   userName: string,
-       *   userAbbr: string,
-       *   userImg: string,
-       *   userColorIndex: number,
-       *   className: string,
-       *   theme: string
-       * }>
-       * ```
-       */
-      items: {
-        type: Array,
-        value: () => [],
-        observer: '_itemsChanged',
-      },
-    };
-  }
-
   static get template() {
-    return legacyHtml`
+    return html`
       <style>
         :host {
           display: block;
@@ -99,113 +71,6 @@ class MessageList extends KeyboardDirectionMixin(ElementMixin(ThemableMixin(Poly
       </div>
     `;
   }
-
-  /** @protected */
-  get _messages() {
-    return [...this.querySelectorAll('vaadin-message')];
-  }
-
-  /** @protected */
-  ready() {
-    super.ready();
-
-    // Make screen readers announce new messages
-    this.setAttribute('aria-relevant', 'additions');
-    this.setAttribute('role', 'log');
-  }
-
-  /**
-   * Override method inherited from `KeyboardDirectionMixin`
-   * to use the list of message elements as items.
-   *
-   * @return {Element[]}
-   * @protected
-   * @override
-   */
-  _getItems() {
-    return this._messages;
-  }
-
-  /** @private */
-  _itemsChanged(newVal, oldVal) {
-    const items = newVal || [];
-    const oldItems = oldVal || [];
-
-    if (items.length || oldItems.length) {
-      const focusedIndex = this._getIndexOfFocusableElement();
-      const closeToBottom = this.scrollHeight < this.clientHeight + this.scrollTop + 50;
-
-      this._renderMessages(items);
-      this._setTabIndexesByIndex(focusedIndex);
-
-      requestAnimationFrame(() => {
-        if (items.length > oldItems.length && closeToBottom) {
-          this._scrollToLastMessage();
-        }
-      });
-    }
-  }
-
-  /** @private */
-  _renderMessages(items) {
-    render(
-      html`
-        ${items.map(
-          (item) => html`
-            <vaadin-message
-              role="listitem"
-              .time="${item.time}"
-              .userAbbr="${item.userAbbr}"
-              .userName="${item.userName}"
-              .userImg="${item.userImg}"
-              .userColorIndex="${item.userColorIndex}"
-              theme="${ifDefined(item.theme)}"
-              class="${ifDefined(item.className)}"
-              @focusin="${this._onMessageFocusIn}"
-              >${item.text}<vaadin-avatar slot="avatar"></vaadin-avatar
-            ></vaadin-message>
-          `,
-        )}
-      `,
-      this,
-      { host: this },
-    );
-  }
-
-  /** @private */
-  _scrollToLastMessage() {
-    if (this.items.length > 0) {
-      this.scrollTop = this.scrollHeight - this.clientHeight;
-    }
-  }
-
-  /** @private */
-  _onMessageFocusIn(e) {
-    const target = e.composedPath().find((node) => node instanceof Message);
-    this._setTabIndexesByMessage(target);
-  }
-
-  /**
-   * @param {number} idx
-   * @protected
-   */
-  _setTabIndexesByIndex(index) {
-    const message = this._messages[index] || this._messages[0];
-    this._setTabIndexesByMessage(message);
-  }
-
-  /** @private */
-  _setTabIndexesByMessage(message) {
-    this._messages.forEach((e) => {
-      e.tabIndex = e === message ? 0 : -1;
-    });
-  }
-
-  /** @private */
-  _getIndexOfFocusableElement() {
-    const index = this._messages.findIndex((e) => e.tabIndex === 0);
-    return index !== -1 ? index : 0;
-  }
 }
 
 defineCustomElement(MessageList);

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

@@ -0,0 +1,68 @@
+/**
+ * @license
+ * Copyright (c) 2021 - 2024 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import type { Constructor } from '@open-wc/dedupe-mixin';
+import type { FocusMixinClass } from '@vaadin/a11y-base/src/focus-mixin.js';
+import type { ControllerMixinClass } from '@vaadin/component-base/src/controller-mixin.js';
+
+export declare function MessageMixin<T extends Constructor<HTMLElement>>(
+  base: T,
+): Constructor<ControllerMixinClass> & Constructor<FocusMixinClass> & Constructor<MessageMixinClass> & T;
+
+export declare class MessageMixinClass {
+  /**
+   * Time of sending the message. It is rendered as-is to the part='time' slot,
+   * so the formatting is up to you.
+   */
+  time: string | null | undefined;
+
+  /**
+   * The name of the user posting the message.
+   * It will be placed in the name part to indicate who has sent the message.
+   * It is also used as a tooltip for the avatar.
+   * Example: `message.userName = "Jessica Jacobs";`
+   * @attr {string} user-name
+   */
+  userName: string | null | undefined;
+
+  /**
+   * The abbreviation of the user.
+   * The abbreviation will be passed on to avatar of the message.
+   * If the user does not have an avatar picture set with `userImg`, `userAbbr` will be shown in the avatar.
+   * Example: `message.userAbbr = "JJ";`
+   * @attr {string} user-abbr
+   */
+  userAbbr: string | null | undefined;
+
+  /**
+   * An URL for a user image.
+   * The image will be used in the avatar component to show who has sent the message.
+   * Example: `message.userImg = "/static/img/avatar.jpg";`
+   * @attr {string} user-img
+   */
+  userImg: string | null | undefined;
+
+  /**
+   * A color index to be used to render the color of the avatar.
+   * With no `userColorIndex` set, the basic avatar color will be used.
+   * By setting a userColorIndex, the component will check if there exists a CSS variable defining the color, and uses it if there is one.
+   * If now CSS variable is found for the color index, the property for the color will not be set.
+   *
+   * Example:
+   * CSS:
+   * ```css
+   * html {
+   *   --vaadin-user-color-1: red;
+   * }
+   * ```
+   *
+   * JavaScript:
+   * ```js
+   * message.userColorIndex = 1;
+   * ```
+   * @attr {number} user-color-index
+   */
+  userColorIndex: number | null | undefined;
+}

package/src/vaadin-message-mixin.js

@@ -0,0 +1,119 @@
+/**
+ * @license
+ * Copyright (c) 2021 - 2024 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { FocusMixin } from '@vaadin/a11y-base/src/focus-mixin.js';
+import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
+import { SlotController } from '@vaadin/component-base/src/slot-controller.js';
+
+/**
+ * @polymerMixin
+ * @mixes ControllerMixin
+ * @mixes FocusMixin
+ */
+export const MessageMixin = (superClass) =>
+  class MessageMixinClass extends FocusMixin(ControllerMixin(superClass)) {
+    static get properties() {
+      return {
+        /**
+         * Time of sending the message. It is rendered as-is to the part='time' slot,
+         * so the formatting is up to you.
+         */
+        time: {
+          type: String,
+        },
+
+        /**
+         * The name of the user posting the message.
+         * It will be placed in the name part to indicate who has sent the message.
+         * It is also used as a tooltip for the avatar.
+         * Example: `message.userName = "Jessica Jacobs";`
+         * @attr {string} user-name
+         */
+        userName: {
+          type: String,
+        },
+
+        /**
+         * The abbreviation of the user.
+         * The abbreviation will be passed on to avatar of the message.
+         * If the user does not have an avatar picture set with `userImg`, `userAbbr` will be shown in the avatar.
+         * Example: `message.userAbbr = "JJ";`
+         * @attr {string} user-abbr
+         */
+        userAbbr: {
+          type: String,
+        },
+
+        /**
+         * An URL for a user image.
+         * The image will be used in the avatar component to show who has sent the message.
+         * Example: `message.userImg = "/static/img/avatar.jpg";`
+         * @attr {string} user-img
+         */
+        userImg: {
+          type: String,
+        },
+
+        /**
+         * A color index to be used to render the color of the avatar.
+         * With no `userColorIndex` set, the basic avatar color will be used.
+         * By setting a userColorIndex, the component will check if there exists a CSS variable defining the color, and uses it if there is one.
+         * If now CSS variable is found for the color index, the property for the color will not be set.
+         *
+         * Example:
+         * CSS:
+         * ```css
+         * html {
+         *   --vaadin-user-color-1: red;
+         * }
+         * ```
+         *
+         * JavaScript:
+         * ```js
+         * message.userColorIndex = 1;
+         * ```
+         * @attr {number} user-color-index
+         */
+        userColorIndex: {
+          type: Number,
+        },
+
+        /** @private */
+        _avatar: {
+          type: Object,
+        },
+      };
+    }
+
+    static get observers() {
+      return ['__avatarChanged(_avatar, userName, userAbbr, userImg, userColorIndex)'];
+    }
+
+    /** @protected */
+    ready() {
+      super.ready();
+
+      this._avatarController = new SlotController(this, 'avatar', 'vaadin-avatar', {
+        initializer: (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,
+        });
+      }
+    }
+  };

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

@@ -0,0 +1,8 @@
+/**
+ * @license
+ * Copyright (c) 2021 - 2024 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 messageStyles: CSSResult;

package/src/vaadin-message-styles.js

@@ -0,0 +1,43 @@
+/**
+ * @license
+ * Copyright (c) 2021 - 2024 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { css } from 'lit';
+
+export const messageStyles = css`
+  :host {
+    display: flex;
+    flex-direction: row;
+    outline: none;
+  }
+
+  :host([hidden]) {
+    display: none !important;
+  }
+
+  [part='content'] {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+  }
+
+  [part='header'] {
+    align-items: baseline;
+    display: flex;
+    flex-flow: row wrap;
+  }
+
+  [part='name'] {
+    font-weight: 500;
+  }
+
+  [part='message'] {
+    white-space: pre-wrap;
+  }
+
+  ::slotted([slot='avatar']) {
+    --vaadin-avatar-outline-width: 0;
+    flex-shrink: 0;
+  }
+`;

package/src/vaadin-message.d.ts

@@ -3,10 +3,9 @@
  * Copyright (c) 2021 - 2024 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { FocusMixin } from '@vaadin/a11y-base/src/focus-mixin.js';
-import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
 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';
 
 /**
  * `<vaadin-message>` is a Web Component for showing a single message with an author, message and time.
@@ -37,61 +36,7 @@ import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mix
  *
  * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
  */
-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.
-   */
-  time: string | null | undefined;
-
-  /**
-   * The name of the user posting the message.
-   * It will be placed in the name part to indicate who has sent the message.
-   * It is also used as a tooltip for the avatar.
-   * Example: `message.userName = "Jessica Jacobs";`
-   * @attr {string} user-name
-   */
-  userName: string | null | undefined;
-
-  /**
-   * The abbreviation of the user.
-   * The abbreviation will be passed on to avatar of the message.
-   * If the user does not have an avatar picture set with `userImg`, `userAbbr` will be shown in the avatar.
-   * Example: `message.userAbbr = "JJ";`
-   * @attr {string} user-abbr
-   */
-  userAbbr: string | null | undefined;
-
-  /**
-   * An URL for a user image.
-   * The image will be used in the avatar component to show who has sent the message.
-   * Example: `message.userImg = "/static/img/avatar.jpg";`
-   * @attr {string} user-img
-   */
-  userImg: string | null | undefined;
-
-  /**
-   * A color index to be used to render the color of the avatar.
-   * With no `userColorIndex` set, the basic avatar color will be used.
-   * By setting a userColorIndex, the component will check if there exists a CSS variable defining the color, and uses it if there is one.
-   * If now CSS variable is found for the color index, the property for the color will not be set.
-   *
-   * Example:
-   * CSS:
-   * ```css
-   * html {
-   *   --vaadin-user-color-1: red;
-   * }
-   * ```
-   *
-   * JavaScript:
-   * ```js
-   * message.userColorIndex = 1;
-   * ```
-   * @attr {number} user-color-index
-   */
-  userColorIndex: number | null | undefined;
-}
+declare class Message extends MessageMixin(ThemableMixin(ElementMixin(HTMLElement))) {}
 
 declare global {
   interface HTMLElementTagNameMap {

package/src/vaadin-message.js

@@ -5,12 +5,13 @@
  */
 import '@vaadin/avatar/src/vaadin-avatar.js';
 import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
-import { FocusMixin } from '@vaadin/a11y-base/src/focus-mixin.js';
-import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
-import { SlotController } from '@vaadin/component-base/src/slot-controller.js';
-import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { registerStyles, ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { MessageMixin } from './vaadin-message-mixin.js';
+import { messageStyles } from './vaadin-message-styles.js';
+
+registerStyles('vaadin-message', messageStyles, { moduleId: 'vaadin-message-styles' });
 
 /**
  * `<vaadin-message>` is a Web Component for showing a single message with an author, message and time.
@@ -43,124 +44,13 @@ import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mix
  *
  * @customElement
  * @extends HTMLElement
- * @mixes ControllerMixin
- * @mixes FocusMixin
+ * @mixes MessageMixin
  * @mixes ThemableMixin
  * @mixes ElementMixin
  */
-class Message extends FocusMixin(ElementMixin(ThemableMixin(ControllerMixin(PolymerElement)))) {
-  static get properties() {
-    return {
-      /**
-       * Time of sending the message. It is rendered as-is to the part='time' slot,
-       * so the formatting is up to you.
-       */
-      time: {
-        type: String,
-      },
-
-      /**
-       * The name of the user posting the message.
-       * It will be placed in the name part to indicate who has sent the message.
-       * It is also used as a tooltip for the avatar.
-       * Example: `message.userName = "Jessica Jacobs";`
-       * @attr {string} user-name
-       */
-      userName: {
-        type: String,
-      },
-
-      /**
-       * The abbreviation of the user.
-       * The abbreviation will be passed on to avatar of the message.
-       * If the user does not have an avatar picture set with `userImg`, `userAbbr` will be shown in the avatar.
-       * Example: `message.userAbbr = "JJ";`
-       * @attr {string} user-abbr
-       */
-      userAbbr: {
-        type: String,
-      },
-
-      /**
-       * An URL for a user image.
-       * The image will be used in the avatar component to show who has sent the message.
-       * Example: `message.userImg = "/static/img/avatar.jpg";`
-       * @attr {string} user-img
-       */
-      userImg: {
-        type: String,
-      },
-
-      /**
-       * A color index to be used to render the color of the avatar.
-       * With no `userColorIndex` set, the basic avatar color will be used.
-       * By setting a userColorIndex, the component will check if there exists a CSS variable defining the color, and uses it if there is one.
-       * If now CSS variable is found for the color index, the property for the color will not be set.
-       *
-       * Example:
-       * CSS:
-       * ```css
-       * html {
-       *   --vaadin-user-color-1: red;
-       * }
-       * ```
-       *
-       * JavaScript:
-       * ```js
-       * message.userColorIndex = 1;
-       * ```
-       * @attr {number} user-color-index
-       */
-      userColorIndex: {
-        type: Number,
-      },
-
-      /** @private */
-      _avatar: {
-        ttype: Object,
-      },
-    };
-  }
-
+class Message extends MessageMixin(ElementMixin(ThemableMixin(PolymerElement))) {
   static get template() {
     return html`
-      <style>
-        :host {
-          display: flex;
-          flex-direction: row;
-          outline: none;
-        }
-
-        :host([hidden]) {
-          display: none !important;
-        }
-
-        [part='content'] {
-          display: flex;
-          flex-direction: column;
-          flex-grow: 1;
-        }
-
-        [part='header'] {
-          align-items: baseline;
-          display: flex;
-          flex-direction: row;
-          flex-wrap: wrap;
-        }
-
-        [part='name'] {
-          font-weight: 500;
-        }
-
-        [part='message'] {
-          white-space: pre-wrap;
-        }
-
-        ::slotted([slot='avatar']) {
-          --vaadin-avatar-outline-width: 0px;
-          flex-shrink: 0;
-        }
-      </style>
       <slot name="avatar"></slot>
       <div part="content">
         <div part="header">
@@ -175,36 +65,6 @@ class Message extends FocusMixin(ElementMixin(ThemableMixin(ControllerMixin(Poly
   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', 'vaadin-avatar', {
-      initializer: (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,
-      });
-    }
-  }
 }
 
 defineCustomElement(Message);

package/theme/lumo/vaadin-lit-message-list.d.ts

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

package/theme/lumo/vaadin-lit-message-list.js

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

package/theme/lumo/vaadin-lit-message.d.ts

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

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

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

package/theme/material/vaadin-lit-message-list.d.ts

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

package/theme/material/vaadin-lit-message-list.js

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

package/theme/material/vaadin-lit-message.d.ts

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

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

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

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

@@ -0,0 +1 @@
+export * from './src/vaadin-message-list.js';

package/vaadin-lit-message-list.js

@@ -0,0 +1,2 @@
+import './theme/lumo/vaadin-lit-message-list.js';
+export * from './src/vaadin-lit-message-list.js';

package/vaadin-lit-message.d.ts

@@ -0,0 +1 @@
+export * from './src/vaadin-message.js';

package/vaadin-lit-message.js

@@ -0,0 +1,2 @@
+import './theme/lumo/vaadin-lit-message-list.js';
+export * from './src/vaadin-lit-message.js';

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/message-list",
-  "version": "24.6.0-alpha9",
+  "version": "24.6.0-rc1",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -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\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.6.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/24.6.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/24.6.0-rc1/#/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.6.0-rc1/#/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": "theme",

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/message-list",
-  "version": "24.6.0-alpha9",
+  "version": "24.6.0-rc1",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {
@@ -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\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.6.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/24.6.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/24.6.0-rc1/#/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.6.0-rc1/#/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": [
             {