@vaadin/message-input 25.0.0-alpha19 → 25.0.0-alpha20

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/message-input",
-  "version": "25.0.0-alpha19",
+  "version": "25.0.0-alpha20",
   "publishConfig": {
     "access": "public"
   },
@@ -34,22 +34,22 @@
   ],
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
-    "@vaadin/button": "25.0.0-alpha19",
-    "@vaadin/component-base": "25.0.0-alpha19",
-    "@vaadin/text-area": "25.0.0-alpha19",
-    "@vaadin/vaadin-themable-mixin": "25.0.0-alpha19",
+    "@vaadin/button": "25.0.0-alpha20",
+    "@vaadin/component-base": "25.0.0-alpha20",
+    "@vaadin/text-area": "25.0.0-alpha20",
+    "@vaadin/vaadin-themable-mixin": "25.0.0-alpha20",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/chai-plugins": "25.0.0-alpha19",
-    "@vaadin/test-runner-commands": "25.0.0-alpha19",
+    "@vaadin/chai-plugins": "25.0.0-alpha20",
+    "@vaadin/test-runner-commands": "25.0.0-alpha20",
     "@vaadin/testing-helpers": "^2.0.0",
-    "@vaadin/vaadin-lumo-styles": "25.0.0-alpha19",
+    "@vaadin/vaadin-lumo-styles": "25.0.0-alpha20",
     "sinon": "^21.0.0"
   },
   "web-types": [
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "1f9af1ce5f0bae8daff044176c8a8df697763881"
+  "gitHead": "c948aae591a30b432f3784000d4677674cae56e0"
 }

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

@@ -28,7 +28,7 @@ export const messageInputStyles = css`
   }
 
   :host([disabled]) {
-    --vaadin-input-field-value-color: var(--vaadin-input-field-disabled-text-color, var(--vaadin-color-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)
@@ -42,41 +42,4 @@ export const messageInputStyles = css`
     --vaadin-focus-ring-width: 0;
     --vaadin-input-field-background: transparent !important;
   }
-
-  ::slotted([slot='button']) {
-    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-color);
-    --vaadin-button-padding: 0;
-  }
-
-  :host([theme~='icon-button']) ::slotted([slot='button']) {
-    width: var(--vaadin-icon-size, 1lh);
-    height: var(--vaadin-icon-size, 1lh);
-    color: transparent;
-    position: relative;
-    contain: strict;
-  }
-
-  :host([theme~='icon-button']) ::slotted([slot='button'])::before {
-    content: '';
-    position: absolute;
-    inset: 0;
-    mask-image: var(--_vaadin-icon-paper-airplane);
-    background: var(--vaadin-button-text-color);
-  }
-
-  :host([dir='rtl'][theme~='icon-button']) ::slotted([slot='button'])::before {
-    scale: -1;
-  }
-
-  @media (forced-colors: active) {
-    :host([theme~='icon-button']) ::slotted([slot='button']) {
-      forced-color-adjust: none;
-      --vaadin-button-text-color: CanvasText;
-    }
-  }
 `;

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.js

@@ -90,7 +90,7 @@ 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.addEventListener('click', () => {
             this.__submit();

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

@@ -42,6 +42,14 @@ export type MessageInputEventMap = HTMLElementEventMap & MessageInputCustomEvent
  * `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))) {

package/src/vaadin-message-input.js

@@ -3,8 +3,8 @@
  * 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 './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';
@@ -35,6 +35,14 @@ import { MessageInputMixin } from './vaadin-message-input-mixin.js';
  * `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

package/web-types.json

@@ -1,14 +1,14 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/message-input",
-  "version": "25.0.0-alpha19",
+  "version": "25.0.0-alpha20",
   "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```\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\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
+          "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",

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/message-input",
-  "version": "25.0.0-alpha19",
+  "version": "25.0.0-alpha20",
   "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```\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\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
+          "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": [
             {