@vaadin/message-input 24.8.0-alpha9 → 25.0.0-alpha1

package/README.md

@@ -24,29 +24,6 @@ Once installed, import the component in your application:
 import '@vaadin/message-input';
 ```
 
-## Themes
-
-Vaadin components come with two built-in [themes](https://vaadin.com/docs/latest/styling), Lumo and Material.
-The [main entrypoint](https://github.com/vaadin/web-components/blob/main/packages/message-input/vaadin-message-input.js) of the package uses the Lumo theme.
-
-To use the Material theme, import the component from the `theme/material` folder:
-
-```js
-import '@vaadin/message-input/theme/material/vaadin-message-input.js';
-```
-
-You can also import the Lumo version of the component explicitly:
-
-```js
-import '@vaadin/message-input/theme/lumo/vaadin-message-input.js';
-```
-
-Finally, you can import the un-themed component from the `src` folder to get a minimal starting point:
-
-```js
-import '@vaadin/message-input/src/vaadin-message-input.js';
-```
-
 ## Contributing
 
 Read the [contributing guide](https://vaadin.com/docs/latest/contributing) to learn about our development process, how to propose bugfixes and improvements, and how to test your changes to Vaadin components.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/message-input",
-  "version": "24.8.0-alpha9",
+  "version": "25.0.0-alpha1",
   "publishConfig": {
     "access": "public"
   },
@@ -31,23 +31,20 @@
     "Vaadin",
     "message-input",
     "web-components",
-    "web-component",
-    "polymer"
+    "web-component"
   ],
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
-    "@polymer/polymer": "^3.0.0",
-    "@vaadin/button": "24.8.0-alpha9",
-    "@vaadin/component-base": "24.8.0-alpha9",
-    "@vaadin/text-area": "24.8.0-alpha9",
-    "@vaadin/vaadin-lumo-styles": "24.8.0-alpha9",
-    "@vaadin/vaadin-material-styles": "24.8.0-alpha9",
-    "@vaadin/vaadin-themable-mixin": "24.8.0-alpha9",
+    "@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",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/chai-plugins": "24.8.0-alpha9",
-    "@vaadin/test-runner-commands": "24.8.0-alpha9",
+    "@vaadin/chai-plugins": "25.0.0-alpha1",
+    "@vaadin/test-runner-commands": "25.0.0-alpha1",
     "@vaadin/testing-helpers": "^1.1.0",
     "sinon": "^18.0.0"
   },
@@ -55,5 +52,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "4de3809275ddfd733b0d13fd02af8faf73eb6770"
+  "gitHead": "b8c22a4a0c64156210d0daac96b43ae4e5526d49"
 }

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

@@ -4,7 +4,6 @@
  * 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 { ControllerMixinClass } from '@vaadin/component-base/src/controller-mixin.js';
 import type { I18nMixinClass } from '@vaadin/component-base/src/i18n-mixin.js';
 
 export interface MessageInputI18n {
@@ -14,10 +13,7 @@ export interface MessageInputI18n {
 
 export declare function MessageInputMixin<T extends Constructor<HTMLElement>>(
   base: T,
-): Constructor<ControllerMixinClass> &
-  Constructor<I18nMixinClass<MessageInputI18n>> &
-  Constructor<MessageInputMixinClass> &
-  T;
+): Constructor<I18nMixinClass<MessageInputI18n>> & Constructor<MessageInputMixinClass> & T;
 
 export declare class MessageInputMixinClass {
   /**

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

@@ -3,7 +3,6 @@
  * Copyright (c) 2021 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
 import { I18nMixin } from '@vaadin/component-base/src/i18n-mixin.js';
 import { SlotController } from '@vaadin/component-base/src/slot-controller.js';
 import { TooltipController } from '@vaadin/component-base/src/tooltip-controller.js';
@@ -15,10 +14,10 @@ const DEFAULT_I18N = {
 
 /**
  * @polymerMixin
- * @mixes ControllerMixin
+ * @mixes I18nMixin
  */
 export const MessageInputMixin = (superClass) =>
-  class MessageInputMixinClass extends I18nMixin(DEFAULT_I18N, ControllerMixin(superClass)) {
+  class MessageInputMixinClass extends I18nMixin(DEFAULT_I18N, superClass) {
     static get properties() {
       return {
         /**

package/src/vaadin-message-input.js

@@ -5,9 +5,10 @@
  */
 import '@vaadin/button/src/vaadin-button.js';
 import '@vaadin/text-area/src/vaadin-text-area.js';
-import { html, PolymerElement } from '@polymer/polymer/polymer-element.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 { MessageInputMixin } from './vaadin-message-input-mixin.js';
 
@@ -29,32 +30,40 @@ import { MessageInputMixin } from './vaadin-message-input-mixin.js';
  * @mixes ThemableMixin
  * @mixes ElementMixin
  */
-class MessageInput extends MessageInputMixin(ElementMixin(ThemableMixin(PolymerElement))) {
-  static get template() {
-    return html`
-      <style>
-        :host {
-          align-items: flex-start;
-          box-sizing: border-box;
-          display: flex;
-          max-height: 50vh;
-          overflow: hidden;
-          flex-shrink: 0;
-        }
+class MessageInput extends MessageInputMixin(ElementMixin(ThemableMixin(PolylitMixin(LitElement)))) {
+  static get is() {
+    return 'vaadin-message-input';
+  }
 
-        :host([hidden]) {
-          display: none !important;
-        }
+  static get styles() {
+    return css`
+      :host {
+        align-items: flex-start;
+        box-sizing: border-box;
+        display: flex;
+        max-height: 50vh;
+        overflow: hidden;
+        flex-shrink: 0;
+      }
 
-        ::slotted([slot='button']) {
-          flex-shrink: 0;
-        }
+      :host([hidden]) {
+        display: none !important;
+      }
 
-        ::slotted([slot='textarea']) {
-          align-self: stretch;
-          flex-grow: 1;
-        }
-      </style>
+      ::slotted([slot='button']) {
+        flex-shrink: 0;
+      }
+
+      ::slotted([slot='textarea']) {
+        align-self: stretch;
+        flex-grow: 1;
+      }
+    `;
+  }
+
+  /** @protected */
+  render() {
+    return html`
       <slot name="textarea"></slot>
 
       <slot name="button"></slot>
@@ -62,10 +71,6 @@ class MessageInput extends MessageInputMixin(ElementMixin(ThemableMixin(PolymerE
       <slot name="tooltip"></slot>
     `;
   }
-
-  static get is() {
-    return 'vaadin-message-input';
-  }
 }
 
 defineCustomElement(MessageInput);

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/message-input",
-  "version": "24.8.0-alpha9",
+  "version": "25.0.0-alpha1",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -10,6 +10,15 @@
           "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```",
           "attributes": [
+            {
+              "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\nShould be overridden by subclasses to provide a custom JSDoc with the\ndefault I18N properties.",
+              "value": {
+                "type": [
+                  "Object"
+                ]
+              }
+            },
             {
               "name": "value",
               "description": "Current content of the text input field",

package/web-types.lit.json

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

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

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

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

@@ -1,69 +0,0 @@
-/**
- * @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/button/src/vaadin-lit-button.js';
-import '@vaadin/text-area/src/vaadin-lit-text-area.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 { MessageInputMixin } from './vaadin-message-input-mixin.js';
-
-/**
- * LitElement based version of `<vaadin-message-input>` 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 MessageInput extends MessageInputMixin(ElementMixin(ThemableMixin(PolylitMixin(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;
-      }
-    `;
-  }
-
-  /** @protected */
-  render() {
-    return html`
-      <slot name="textarea"></slot>
-
-      <slot name="button"></slot>
-
-      <slot name="tooltip"></slot>
-    `;
-  }
-}
-
-defineCustomElement(MessageInput);
-
-export { MessageInput };

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

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

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

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

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

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

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

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

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

@@ -1,2 +0,0 @@
-import '@vaadin/vaadin-material-styles/color.js';
-import '@vaadin/vaadin-material-styles/typography.js';

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

@@ -1,18 +0,0 @@
-import '@vaadin/vaadin-material-styles/color.js';
-import '@vaadin/vaadin-material-styles/typography.js';
-import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-
-registerStyles(
-  'vaadin-message-input',
-  css`
-    :host {
-      padding: 0.5em 1em;
-    }
-
-    ::slotted([slot='textarea']) {
-      margin: 0;
-      margin-inline-end: 0.5em;
-    }
-  `,
-  { moduleId: 'material-message-input' },
-);

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

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

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

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

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

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

package/vaadin-lit-message-input.js

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