@vaadin/message-input 25.0.0-alpha6 → 25.0.0-alpha8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/message-input",
-  "version": "25.0.0-alpha6",
+  "version": "25.0.0-alpha8",
   "publishConfig": {
     "access": "public"
   },
@@ -21,6 +21,8 @@
   "type": "module",
   "files": [
     "src",
+    "!src/styles/*-base-styles.d.ts",
+    "!src/styles/*-base-styles.js",
     "theme",
     "vaadin-*.d.ts",
     "vaadin-*.js",
@@ -35,16 +37,16 @@
   ],
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
-    "@vaadin/button": "25.0.0-alpha6",
-    "@vaadin/component-base": "25.0.0-alpha6",
-    "@vaadin/text-area": "25.0.0-alpha6",
-    "@vaadin/vaadin-lumo-styles": "25.0.0-alpha6",
-    "@vaadin/vaadin-themable-mixin": "25.0.0-alpha6",
+    "@vaadin/button": "25.0.0-alpha8",
+    "@vaadin/component-base": "25.0.0-alpha8",
+    "@vaadin/text-area": "25.0.0-alpha8",
+    "@vaadin/vaadin-lumo-styles": "25.0.0-alpha8",
+    "@vaadin/vaadin-themable-mixin": "25.0.0-alpha8",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/chai-plugins": "25.0.0-alpha6",
-    "@vaadin/test-runner-commands": "25.0.0-alpha6",
+    "@vaadin/chai-plugins": "25.0.0-alpha8",
+    "@vaadin/test-runner-commands": "25.0.0-alpha8",
     "@vaadin/testing-helpers": "^2.0.0",
     "sinon": "^18.0.0"
   },
@@ -52,5 +54,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "cd1d084198d2b326c58d44bb39fa4845b71ce551"
+  "gitHead": "ebf53673d5f639d2b1b6f2b31f640f530643ee2f"
 }

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,82 @@
+/**
+ * @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/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-strong));
+    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-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;
+  }
+
+  ::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/vaadin-message-input-mixin.js

@@ -92,8 +92,6 @@ export const MessageInputMixin = (superClass) =>
 
       this._buttonController = new SlotController(this, 'button', 'vaadin-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;
         },

package/src/vaadin-message-input.js

@@ -33,7 +33,7 @@ import { MessageInputMixin } from './vaadin-message-input-mixin.js';
  * @mixes ElementMixin
  */
 class MessageInput extends MessageInputMixin(
-  ElementMixin(ThemableMixin(LumoInjectionMixin(PolylitMixin(LitElement)))),
+  ElementMixin(ThemableMixin(PolylitMixin(LumoInjectionMixin(LitElement)))),
 ) {
   static get is() {
     return 'vaadin-message-input';

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/message-input",
-  "version": "25.0.0-alpha6",
+  "version": "25.0.0-alpha8",
   "description-markup": "markdown",
   "contributions": {
     "html": {

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/message-input",
-  "version": "25.0.0-alpha6",
+  "version": "25.0.0-alpha8",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {