@vaadin/message-input 25.0.0-alpha1 → 25.0.0-alpha11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/message-input",
-  "version": "25.0.0-alpha1",
+  "version": "25.0.0-alpha11",
   "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-alpha1",
-    "@vaadin/component-base": "25.0.0-alpha1",
-    "@vaadin/text-area": "25.0.0-alpha1",
-    "@vaadin/vaadin-lumo-styles": "25.0.0-alpha1",
-    "@vaadin/vaadin-themable-mixin": "25.0.0-alpha1",
+    "@vaadin/button": "25.0.0-alpha11",
+    "@vaadin/component-base": "25.0.0-alpha11",
+    "@vaadin/text-area": "25.0.0-alpha11",
+    "@vaadin/vaadin-themable-mixin": "25.0.0-alpha11",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/chai-plugins": "25.0.0-alpha1",
-    "@vaadin/test-runner-commands": "25.0.0-alpha1",
-    "@vaadin/testing-helpers": "^1.1.0",
+    "@vaadin/chai-plugins": "25.0.0-alpha11",
+    "@vaadin/test-runner-commands": "25.0.0-alpha11",
+    "@vaadin/testing-helpers": "^2.0.0",
+    "@vaadin/vaadin-lumo-styles": "25.0.0-alpha11",
     "sinon": "^18.0.0"
   },
   "web-types": [
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "b8c22a4a0c64156210d0daac96b43ae4e5526d49"
+  "gitHead": "abfd315ba5a7484a613e0768635a4e8fe945a44b"
 }

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/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-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 contained');
-
           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

@@ -5,11 +5,13 @@
  */
 import '@vaadin/button/src/vaadin-button.js';
 import '@vaadin/text-area/src/vaadin-text-area.js';
-import { css, html, LitElement } from 'lit';
+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';
 
 /**
@@ -30,35 +32,15 @@ import { MessageInputMixin } from './vaadin-message-input-mixin.js';
  * @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,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/message-input",
-  "version": "25.0.0-alpha1",
+  "version": "25.0.0-alpha11",
   "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-alpha1",
+  "version": "25.0.0-alpha11",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {

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';