@vaadin/message-input 25.0.0-alpha2 → 25.0.0-alpha21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/message-input",
-  "version": "25.0.0-alpha2",
+  "version": "25.0.0-alpha21",
   "publishConfig": {
     "access": "public"
   },
@@ -21,7 +21,6 @@
   "type": "module",
   "files": [
     "src",
-    "theme",
     "vaadin-*.d.ts",
     "vaadin-*.js",
     "web-types.json",
@@ -35,22 +34,22 @@
   ],
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
-    "@vaadin/button": "25.0.0-alpha2",
-    "@vaadin/component-base": "25.0.0-alpha2",
-    "@vaadin/text-area": "25.0.0-alpha2",
-    "@vaadin/vaadin-lumo-styles": "25.0.0-alpha2",
-    "@vaadin/vaadin-themable-mixin": "25.0.0-alpha2",
+    "@vaadin/button": "25.0.0-alpha21",
+    "@vaadin/component-base": "25.0.0-alpha21",
+    "@vaadin/text-area": "25.0.0-alpha21",
+    "@vaadin/vaadin-themable-mixin": "25.0.0-alpha21",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/chai-plugins": "25.0.0-alpha2",
-    "@vaadin/test-runner-commands": "25.0.0-alpha2",
+    "@vaadin/chai-plugins": "25.0.0-alpha21",
+    "@vaadin/test-runner-commands": "25.0.0-alpha21",
     "@vaadin/testing-helpers": "^2.0.0",
-    "sinon": "^18.0.0"
+    "@vaadin/vaadin-lumo-styles": "25.0.0-alpha21",
+    "sinon": "^21.0.0"
   },
   "web-types": [
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "67ffcd5355cf21ce1b5039c598525109fc4c164b"
+  "gitHead": "8fb9e9710c01449edf623a1aaac4655cdc11a933"
 }

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

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

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

@@ -0,0 +1,45 @@
+/**
+ * @license
+ * Copyright (c) 2021 - 2025 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 messageInputStyles = css`
+  :host {
+    box-sizing: border-box;
+    display: flex;
+    max-height: 50vh;
+    flex-shrink: 0;
+    border: var(--vaadin-input-field-border-width, 1px) solid
+      var(--vaadin-input-field-border-color, var(--vaadin-border-color));
+    border-radius: var(--vaadin-input-field-border-radius, var(--vaadin-radius-m));
+    background: var(--vaadin-input-field-background, var(--vaadin-background-color));
+  }
+
+  :host([hidden]) {
+    display: none !important;
+  }
+
+  :host(:focus-within) {
+    outline: var(--vaadin-focus-ring-width) solid var(--vaadin-focus-ring-color);
+    outline-offset: calc(var(--vaadin-input-field-border-width, 1px) * -1);
+  }
+
+  :host([disabled]) {
+    --vaadin-input-field-value-color: var(--vaadin-input-field-disabled-text-color, var(--vaadin-text-color-disabled));
+    --vaadin-input-field-background: var(
+      --vaadin-input-field-disabled-background,
+      var(--vaadin-background-container-strong)
+    );
+    --vaadin-input-field-border-color: transparent;
+  }
+
+  ::slotted([slot='textarea']) {
+    flex: 1;
+    --vaadin-input-field-border-width: 0 !important;
+    --vaadin-focus-ring-width: 0;
+    --vaadin-input-field-background: transparent !important;
+  }
+`;

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

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

package/src/styles/vaadin-message-input-button-styles.js

@@ -0,0 +1,19 @@
+/**
+ * @license
+ * Copyright (c) 2021 - 2025 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 messageInputButtonStyles = css`
+  :host {
+    flex: none;
+    align-self: end;
+    margin: var(--vaadin-input-field-padding, var(--vaadin-padding-container));
+    --vaadin-button-border-width: 0;
+    --vaadin-button-background: transparent;
+    --vaadin-button-text-color: var(--vaadin-text-color);
+    --vaadin-button-padding: 0;
+  }
+`;

package/src/vaadin-message-input-button.d.ts

@@ -0,0 +1,21 @@
+/**
+ * @license
+ * Copyright (c) 2021 - 2025 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { ButtonMixin } from '@vaadin/button/src/vaadin-button-mixin.js';
+import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
+import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+
+/**
+ * An element used internally by `<vaadin-message-input>`. Not intended to be used separately.
+ */
+declare class MessageInputButton extends ButtonMixin(DirMixin(ThemableMixin(HTMLElement))) {}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'vaadin-message-input-button': MessageInputButton;
+  }
+}
+
+export { MessageInputButton };

package/src/vaadin-message-input-button.js

@@ -0,0 +1,49 @@
+/**
+ * @license
+ * Copyright (c) 2021 - 2025 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { html, LitElement } from 'lit';
+import { buttonStyles } from '@vaadin/button/src/styles/vaadin-button-base-styles.js';
+import { ButtonMixin } from '@vaadin/button/src/vaadin-button-mixin.js';
+import { defineCustomElement } from '@vaadin/component-base/src/define.js';
+import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
+import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
+import { LumoInjectionMixin } from '@vaadin/vaadin-themable-mixin/lumo-injection-mixin.js';
+import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { messageInputButtonStyles } from './styles/vaadin-message-input-button-styles.js';
+
+/**
+ * An element used internally by `<vaadin-message-input>`. Not intended to be used separately.
+ *
+ * @customElement
+ * @extends HTMLElement
+ * @mixes ButtonMixin
+ * @mixes DirMixin
+ * @mixes ThemableMixin
+ * @private
+ */
+class MessageInputButton extends ButtonMixin(DirMixin(ThemableMixin(PolylitMixin(LumoInjectionMixin(LitElement))))) {
+  static get is() {
+    return 'vaadin-message-input-button';
+  }
+
+  static get styles() {
+    return [buttonStyles, messageInputButtonStyles];
+  }
+
+  /** @protected */
+  render() {
+    return html`
+      <div class="vaadin-button-container">
+        <span part="label">
+          <slot></slot>
+        </span>
+      </div>
+    `;
+  }
+}
+
+defineCustomElement(MessageInputButton);
+
+export { MessageInputButton };

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

@@ -27,7 +27,7 @@ export declare class MessageInputMixinClass {
    * just the individual properties you want to change.
    *
    * The object has the following JSON structure and default values:
-   * ```
+   * ```js
    * {
    *   // Used as the button label
    *   send: 'Send',

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

@@ -67,7 +67,7 @@ export const MessageInputMixin = (superClass) =>
      * just the individual properties you want to change.
      *
      * The object has the following JSON structure and default values:
-     * ```
+     * ```js
      * {
      *   // Used as the button label
      *   send: 'Send',
@@ -90,10 +90,8 @@ export const MessageInputMixin = (superClass) =>
     ready() {
       super.ready();
 
-      this._buttonController = new SlotController(this, 'button', 'vaadin-button', {
+      this._buttonController = new SlotController(this, 'button', 'vaadin-message-input-button', {
         initializer: (btn) => {
-          btn.setAttribute('theme', 'primary');
-
           btn.addEventListener('click', () => {
             this.__submit();
           });
@@ -118,6 +116,7 @@ export const MessageInputMixin = (superClass) =>
           });
 
           textarea.minRows = 1;
+          (textarea.inputElement || textarea).setAttribute('enterkeyhint', 'send');
 
           this._textArea = textarea;
         },
@@ -128,9 +127,9 @@ export const MessageInputMixin = (superClass) =>
       this.addController(this._tooltipController);
     }
 
-    focus() {
+    focus(options) {
       if (this._textArea) {
-        this._textArea.focus();
+        this._textArea.focus(options);
       }
     }
 

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

@@ -32,6 +32,25 @@ export type MessageInputEventMap = HTMLElementEventMap & MessageInputCustomEvent
  * ```html
  * <vaadin-message-input></vaadin-message-input>
  * ```
+ *
+ * ### Styling
+ *
+ * The following state attributes are available for styling:
+ *
+ * Attribute      | Description
+ * ---------------|---------------------------------
+ * `disabled`     | Set when the element is disabled
+ * `has-tooltip`  | Set when the element has a slotted tooltip
+ *
+ * ### Internal components
+ *
+ * In addition to `<vaadin-message-input>` itself, the following internal
+ * components are themable:
+ *
+ * - `<vaadin-message-input-button>` - has the same API as `<vaadin-button>`
+ * - `<vaadin-text-area>`
+ *
+ * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
  */
 declare class MessageInput extends MessageInputMixin(ThemableMixin(ElementMixin(HTMLElement))) {
   addEventListener<K extends keyof MessageInputEventMap>(

package/src/vaadin-message-input.js

@@ -3,13 +3,15 @@
  * Copyright (c) 2021 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import '@vaadin/button/src/vaadin-button.js';
 import '@vaadin/text-area/src/vaadin-text-area.js';
-import { css, html, LitElement } from 'lit';
+import './vaadin-message-input-button.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 { LumoInjectionMixin } from '@vaadin/vaadin-themable-mixin/lumo-injection-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { messageInputStyles } from './styles/vaadin-message-input-base-styles.js';
 import { MessageInputMixin } from './vaadin-message-input-mixin.js';
 
 /**
@@ -24,41 +26,40 @@ import { MessageInputMixin } from './vaadin-message-input-mixin.js';
  * <vaadin-message-input></vaadin-message-input>
  * ```
  *
+ * ### Styling
+ *
+ * The following state attributes are available for styling:
+ *
+ * Attribute      | Description
+ * ---------------|---------------------------------
+ * `disabled`     | Set when the element is disabled
+ * `has-tooltip`  | Set when the element has a slotted tooltip
+ *
+ * ### Internal components
+ *
+ * In addition to `<vaadin-message-input>` itself, the following internal
+ * components are themable:
+ *
+ * - `<vaadin-message-input-button>` - has the same API as `<vaadin-button>`
+ * - `<vaadin-text-area>`
+ *
+ * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
+ *
  * @customElement
  * @extends HTMLElement
  * @mixes MessageInputMixin
  * @mixes ThemableMixin
  * @mixes ElementMixin
  */
-class MessageInput extends MessageInputMixin(ElementMixin(ThemableMixin(PolylitMixin(LitElement)))) {
+class MessageInput extends MessageInputMixin(
+  ElementMixin(ThemableMixin(PolylitMixin(LumoInjectionMixin(LitElement)))),
+) {
   static get is() {
     return 'vaadin-message-input';
   }
 
   static get styles() {
-    return css`
-      :host {
-        align-items: flex-start;
-        box-sizing: border-box;
-        display: flex;
-        max-height: 50vh;
-        overflow: hidden;
-        flex-shrink: 0;
-      }
-
-      :host([hidden]) {
-        display: none !important;
-      }
-
-      ::slotted([slot='button']) {
-        flex-shrink: 0;
-      }
-
-      ::slotted([slot='textarea']) {
-        align-self: stretch;
-        flex-grow: 1;
-      }
-    `;
+    return messageInputStyles;
   }
 
   /** @protected */

package/vaadin-message-input.js

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

package/web-types.json

@@ -1,14 +1,14 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/message-input",
-  "version": "25.0.0-alpha2",
+  "version": "25.0.0-alpha21",
   "description-markup": "markdown",
   "contributions": {
     "html": {
       "elements": [
         {
           "name": "vaadin-message-input",
-          "description": "`<vaadin-message-input>` is a Web Component for sending messages.\nIt consists of a text area that grows on along with the content, and a send button to send message.\n\nThe message can be sent by one of the following actions:\n- by pressing Enter (use Shift + Enter to add a new line)\n- by clicking `submit` button.\n\n```html\n<vaadin-message-input></vaadin-message-input>\n```",
+          "description": "`<vaadin-message-input>` is a Web Component for sending messages.\nIt consists of a text area that grows on along with the content, and a send button to send message.\n\nThe message can be sent by one of the following actions:\n- by pressing Enter (use Shift + Enter to add a new line)\n- by clicking `submit` button.\n\n```html\n<vaadin-message-input></vaadin-message-input>\n```\n\n### Styling\n\nThe following state attributes are available for styling:\n\nAttribute      | Description\n---------------|---------------------------------\n`disabled`     | Set when the element is disabled\n`has-tooltip`  | Set when the element has a slotted tooltip\n\n### Internal components\n\nIn addition to `<vaadin-message-input>` itself, the following internal\ncomponents are themable:\n\n- `<vaadin-message-input-button>` - has the same API as `<vaadin-button>`\n- `<vaadin-text-area>`\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
           "attributes": [
             {
               "name": "i18n",
@@ -55,7 +55,7 @@
             "properties": [
               {
                 "name": "i18n",
-                "description": "The object used to localize this component. To change the default\nlocalization, replace this with an object that provides all properties, or\njust the individual properties you want to change.\n\nThe object has the following JSON structure and default values:\n```\n{\n  // Used as the button label\n  send: 'Send',\n\n  // Used as the input field's placeholder and aria-label\n  message: 'Message'\n}\n```",
+                "description": "The object used to localize this component. To change the default\nlocalization, replace this with an object that provides all properties, or\njust the individual properties you want to change.\n\nThe object has the following JSON structure and default values:\n```js\n{\n  // Used as the button label\n  send: 'Send',\n\n  // Used as the input field's placeholder and aria-label\n  message: 'Message'\n}\n```",
                 "value": {
                   "type": [
                     "MessageInputI18n"

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/message-input",
-  "version": "25.0.0-alpha2",
+  "version": "25.0.0-alpha21",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {
@@ -16,7 +16,7 @@
       "elements": [
         {
           "name": "vaadin-message-input",
-          "description": "`<vaadin-message-input>` is a Web Component for sending messages.\nIt consists of a text area that grows on along with the content, and a send button to send message.\n\nThe message can be sent by one of the following actions:\n- by pressing Enter (use Shift + Enter to add a new line)\n- by clicking `submit` button.\n\n```html\n<vaadin-message-input></vaadin-message-input>\n```",
+          "description": "`<vaadin-message-input>` is a Web Component for sending messages.\nIt consists of a text area that grows on along with the content, and a send button to send message.\n\nThe message can be sent by one of the following actions:\n- by pressing Enter (use Shift + Enter to add a new line)\n- by clicking `submit` button.\n\n```html\n<vaadin-message-input></vaadin-message-input>\n```\n\n### Styling\n\nThe following state attributes are available for styling:\n\nAttribute      | Description\n---------------|---------------------------------\n`disabled`     | Set when the element is disabled\n`has-tooltip`  | Set when the element has a slotted tooltip\n\n### Internal components\n\nIn addition to `<vaadin-message-input>` itself, the following internal\ncomponents are themable:\n\n- `<vaadin-message-input-button>` - has the same API as `<vaadin-button>`\n- `<vaadin-text-area>`\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
           "extension": true,
           "attributes": [
             {
@@ -28,7 +28,7 @@
             },
             {
               "name": ".i18n",
-              "description": "The object used to localize this component. To change the default\nlocalization, replace this with an object that provides all properties, or\njust the individual properties you want to change.\n\nThe object has the following JSON structure and default values:\n```\n{\n  // Used as the button label\n  send: 'Send',\n\n  // Used as the input field's placeholder and aria-label\n  message: 'Message'\n}\n```",
+              "description": "The object used to localize this component. To change the default\nlocalization, replace this with an object that provides all properties, or\njust the individual properties you want to change.\n\nThe object has the following JSON structure and default values:\n```js\n{\n  // Used as the button label\n  send: 'Send',\n\n  // Used as the input field's placeholder and aria-label\n  message: 'Message'\n}\n```",
               "value": {
                 "kind": "expression"
               }

package/theme/lumo/vaadin-message-input-styles.d.ts

@@ -1,4 +0,0 @@
-import '@vaadin/vaadin-lumo-styles/color.js';
-import '@vaadin/vaadin-lumo-styles/sizing.js';
-import '@vaadin/vaadin-lumo-styles/spacing.js';
-import '@vaadin/vaadin-lumo-styles/style.js';

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

@@ -1,19 +0,0 @@
-import '@vaadin/vaadin-lumo-styles/color.js';
-import '@vaadin/vaadin-lumo-styles/sizing.js';
-import '@vaadin/vaadin-lumo-styles/spacing.js';
-import '@vaadin/vaadin-lumo-styles/style.js';
-import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-
-registerStyles(
-  'vaadin-message-input',
-  css`
-    :host {
-      padding: var(--lumo-space-s) var(--lumo-space-m);
-    }
-
-    ::slotted([slot='textarea']) {
-      margin-inline-end: var(--lumo-space-s);
-    }
-  `,
-  { moduleId: 'lumo-message-input' },
-);

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

@@ -1,4 +0,0 @@
-import '@vaadin/button/theme/lumo/vaadin-button.js';
-import '@vaadin/text-area/theme/lumo/vaadin-text-area.js';
-import './vaadin-message-input-styles.js';
-import '../../src/vaadin-message-input.js';

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

@@ -1,4 +0,0 @@
-import '@vaadin/button/theme/lumo/vaadin-button.js';
-import '@vaadin/text-area/theme/lumo/vaadin-text-area.js';
-import './vaadin-message-input-styles.js';
-import '../../src/vaadin-message-input.js';