@vaadin/text-area 24.8.0-alpha9 → 25.0.0-alpha2

package/README.md

@@ -24,29 +24,6 @@ Once installed, import the component in your application:
 import '@vaadin/text-area';
 ```
 
-## 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/text-area/vaadin-text-area.js) of the package uses Lumo theme.
-
-To use the Material theme, import the component from the `theme/material` folder:
-
-```js
-import '@vaadin/text-area/theme/material/vaadin-text-area.js';
-```
-
-You can also import the Lumo version of the component explicitly:
-
-```js
-import '@vaadin/text-area/theme/lumo/vaadin-text-area.js';
-```
-
-Finally, you can import the un-themed component from the `src` folder to get a minimal starting point:
-
-```js
-import '@vaadin/text-area/src/vaadin-text-area.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/text-area",
-  "version": "24.8.0-alpha9",
+  "version": "25.0.0-alpha2",
   "publishConfig": {
     "access": "public"
   },
@@ -21,6 +21,8 @@
   "type": "module",
   "files": [
     "src",
+    "!src/*-base-styles.d.ts",
+    "!src/*-base-styles.js",
     "theme",
     "vaadin-*.d.ts",
     "vaadin-*.js",
@@ -35,25 +37,23 @@
   ],
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
-    "@polymer/polymer": "^3.0.0",
-    "@vaadin/a11y-base": "24.8.0-alpha9",
-    "@vaadin/component-base": "24.8.0-alpha9",
-    "@vaadin/field-base": "24.8.0-alpha9",
-    "@vaadin/input-container": "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/a11y-base": "25.0.0-alpha2",
+    "@vaadin/component-base": "25.0.0-alpha2",
+    "@vaadin/field-base": "25.0.0-alpha2",
+    "@vaadin/input-container": "25.0.0-alpha2",
+    "@vaadin/vaadin-lumo-styles": "25.0.0-alpha2",
+    "@vaadin/vaadin-themable-mixin": "25.0.0-alpha2",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/chai-plugins": "24.8.0-alpha9",
-    "@vaadin/test-runner-commands": "24.8.0-alpha9",
-    "@vaadin/testing-helpers": "^1.1.0",
+    "@vaadin/chai-plugins": "25.0.0-alpha2",
+    "@vaadin/test-runner-commands": "25.0.0-alpha2",
+    "@vaadin/testing-helpers": "^2.0.0",
     "sinon": "^18.0.0"
   },
   "web-types": [
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "4de3809275ddfd733b0d13fd02af8faf73eb6770"
+  "gitHead": "67ffcd5355cf21ce1b5039c598525109fc4c164b"
 }

package/src/vaadin-text-area-base-styles.js

@@ -0,0 +1,32 @@
+/**
+ * @license
+ * Copyright (c) 2021 - 2025 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { css } from 'lit';
+
+export const textAreaStyles = css`
+  @layer base {
+    [part='input-field'] {
+      overflow: auto;
+      scroll-padding: var(--vaadin-input-field-padding, var(--_vaadin-padding-container));
+    }
+
+    ::slotted(textarea) {
+      resize: none;
+      white-space: pre-wrap;
+    }
+
+    [part='input-field'] ::slotted(:not(textarea)),
+    [part='clear-button'] {
+      align-self: flex-start;
+      position: sticky;
+      top: 0;
+    }
+
+    /* Workaround https://bugzilla.mozilla.org/show_bug.cgi?id=1739079 */
+    :host([disabled]) ::slotted(textarea) {
+      user-select: none;
+    }
+  }
+`;

package/src/{vaadin-lit-text-area.d.ts → vaadin-text-area-core-styles.d.ts}

@@ -3,4 +3,6 @@
  * Copyright (c) 2021 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-export * from './vaadin-text-area.js';
+import type { CSSResult } from 'lit';
+
+export const textAreaStyles: CSSResult;

package/src/vaadin-text-area-mixin.d.ts

@@ -8,7 +8,6 @@ import type { DelegateFocusMixinClass } from '@vaadin/a11y-base/src/delegate-foc
 import type { DisabledMixinClass } from '@vaadin/a11y-base/src/disabled-mixin.js';
 import type { FocusMixinClass } from '@vaadin/a11y-base/src/focus-mixin.js';
 import type { KeyboardMixinClass } from '@vaadin/a11y-base/src/keyboard-mixin.js';
-import type { ControllerMixinClass } from '@vaadin/component-base/src/controller-mixin.js';
 import type { DelegateStateMixinClass } from '@vaadin/component-base/src/delegate-state-mixin.js';
 import type { ResizeMixinClass } from '@vaadin/component-base/src/resize-mixin.js';
 import type { SlotStylesMixinClass } from '@vaadin/component-base/src/slot-styles-mixin.js';
@@ -27,7 +26,6 @@ import type { ValidateMixinClass } from '@vaadin/field-base/src/validate-mixin.j
 export declare function TextAreaMixin<T extends Constructor<HTMLElement>>(
   base: T,
 ): Constructor<ClearButtonMixinClass> &
-  Constructor<ControllerMixinClass> &
   Constructor<DelegateFocusMixinClass> &
   Constructor<DelegateStateMixinClass> &
   Constructor<DisabledMixinClass> &

package/src/vaadin-text-area-mixin.js

@@ -235,6 +235,8 @@ export const TextAreaMixin = (superClass) =>
           parseFloat(inputStyle.paddingBottom) +
           parseFloat(inputStyle.marginTop) +
           parseFloat(inputStyle.marginBottom) +
+          parseFloat(inputFieldStyle.borderTopWidth) +
+          parseFloat(inputFieldStyle.borderBottomWidth) +
           parseFloat(inputFieldStyle.paddingTop) +
           parseFloat(inputFieldStyle.paddingBottom);
         const maxHeight = Math.ceil(contentHeight + marginsAndPaddings);

package/src/vaadin-text-area.js

@@ -4,16 +4,16 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import '@vaadin/input-container/src/vaadin-input-container.js';
-import { html, PolymerElement } from '@polymer/polymer';
+import { html, LitElement } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
 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 { TooltipController } from '@vaadin/component-base/src/tooltip-controller.js';
 import { inputFieldShared } from '@vaadin/field-base/src/styles/input-field-shared-styles.js';
-import { registerStyles, ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { textAreaStyles } from './vaadin-text-area-core-styles.js';
 import { TextAreaMixin } from './vaadin-text-area-mixin.js';
-import { textAreaStyles } from './vaadin-text-area-styles.js';
-
-registerStyles('vaadin-text-area', [inputFieldShared, textAreaStyles], { moduleId: 'vaadin-text-area-styles' });
 
 /**
  * `<vaadin-text-area>` is a web component for multi-line text input.
@@ -61,26 +61,31 @@ registerStyles('vaadin-text-area', [inputFieldShared, textAreaStyles], { moduleI
  * @mixes TextAreaMixin
  * @mixes ThemableMixin
  */
-export class TextArea extends TextAreaMixin(ThemableMixin(ElementMixin(PolymerElement))) {
+export class TextArea extends TextAreaMixin(ThemableMixin(ElementMixin(PolylitMixin(LitElement)))) {
   static get is() {
     return 'vaadin-text-area';
   }
 
-  static get template() {
+  static get styles() {
+    return [inputFieldShared, textAreaStyles];
+  }
+
+  /** @protected */
+  render() {
     return html`
       <div class="vaadin-text-area-container">
         <div part="label">
           <slot name="label"></slot>
-          <span part="required-indicator" aria-hidden="true" on-click="focus"></span>
+          <span part="required-indicator" aria-hidden="true" @click="${this.focus}"></span>
         </div>
 
         <vaadin-input-container
           part="input-field"
-          readonly="[[readonly]]"
-          disabled="[[disabled]]"
-          invalid="[[invalid]]"
-          theme$="[[_theme]]"
-          on-scroll="_onScroll"
+          .readonly="${this.readonly}"
+          .disabled="${this.disabled}"
+          .invalid="${this.invalid}"
+          theme="${ifDefined(this._theme)}"
+          @scroll="${this._onScroll}"
         >
           <slot name="prefix" slot="prefix"></slot>
           <slot name="textarea"></slot>

package/web-types.json

@@ -1,14 +1,14 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/text-area",
-  "version": "24.8.0-alpha9",
+  "version": "25.0.0-alpha2",
   "description-markup": "markdown",
   "contributions": {
     "html": {
       "elements": [
         {
           "name": "vaadin-text-area",
-          "description": "`<vaadin-text-area>` is a web component for multi-line text input.\n\n```html\n<vaadin-text-area label=\"Comment\"></vaadin-text-area>\n```\n\n### Prefixes and suffixes\n\nThese are child elements of a `<vaadin-text-area>` that are displayed\ninline with the input, before or after.\nIn order for an element to be considered as a prefix, it must have the slot\nattribute set to `prefix` (and similarly for `suffix`).\n\n```html\n<vaadin-text-area label=\"Description\">\n  <div slot=\"prefix\">Details:</div>\n  <div slot=\"suffix\">The end!</div>\n</vaadin-text-area>\n```\n\n### Styling\n\nThe following custom properties are available for styling:\n\nCustom property                | Description                | Default\n-------------------------------|----------------------------|---------\n`--vaadin-field-default-width` | Default width of the field | `12em`\n\n`<vaadin-text-area>` provides the same set of shadow DOM parts and state attributes as `<vaadin-text-field>`.\nSee [`<vaadin-text-field>`](https://cdn.vaadin.com/vaadin-web-components/24.8.0-alpha9/#/elements/vaadin-text-field) for the styling documentation.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
+          "description": "`<vaadin-text-area>` is a web component for multi-line text input.\n\n```html\n<vaadin-text-area label=\"Comment\"></vaadin-text-area>\n```\n\n### Prefixes and suffixes\n\nThese are child elements of a `<vaadin-text-area>` that are displayed\ninline with the input, before or after.\nIn order for an element to be considered as a prefix, it must have the slot\nattribute set to `prefix` (and similarly for `suffix`).\n\n```html\n<vaadin-text-area label=\"Description\">\n  <div slot=\"prefix\">Details:</div>\n  <div slot=\"suffix\">The end!</div>\n</vaadin-text-area>\n```\n\n### Styling\n\nThe following custom properties are available for styling:\n\nCustom property                | Description                | Default\n-------------------------------|----------------------------|---------\n`--vaadin-field-default-width` | Default width of the field | `12em`\n\n`<vaadin-text-area>` provides the same set of shadow DOM parts and state attributes as `<vaadin-text-field>`.\nSee [`<vaadin-text-field>`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha2/#/elements/vaadin-text-field) for the styling documentation.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
           "attributes": [
             {
               "name": "disabled",

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/text-area",
-  "version": "24.8.0-alpha9",
+  "version": "25.0.0-alpha2",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {
@@ -16,7 +16,7 @@
       "elements": [
         {
           "name": "vaadin-text-area",
-          "description": "`<vaadin-text-area>` is a web component for multi-line text input.\n\n```html\n<vaadin-text-area label=\"Comment\"></vaadin-text-area>\n```\n\n### Prefixes and suffixes\n\nThese are child elements of a `<vaadin-text-area>` that are displayed\ninline with the input, before or after.\nIn order for an element to be considered as a prefix, it must have the slot\nattribute set to `prefix` (and similarly for `suffix`).\n\n```html\n<vaadin-text-area label=\"Description\">\n  <div slot=\"prefix\">Details:</div>\n  <div slot=\"suffix\">The end!</div>\n</vaadin-text-area>\n```\n\n### Styling\n\nThe following custom properties are available for styling:\n\nCustom property                | Description                | Default\n-------------------------------|----------------------------|---------\n`--vaadin-field-default-width` | Default width of the field | `12em`\n\n`<vaadin-text-area>` provides the same set of shadow DOM parts and state attributes as `<vaadin-text-field>`.\nSee [`<vaadin-text-field>`](https://cdn.vaadin.com/vaadin-web-components/24.8.0-alpha9/#/elements/vaadin-text-field) for the styling documentation.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
+          "description": "`<vaadin-text-area>` is a web component for multi-line text input.\n\n```html\n<vaadin-text-area label=\"Comment\"></vaadin-text-area>\n```\n\n### Prefixes and suffixes\n\nThese are child elements of a `<vaadin-text-area>` that are displayed\ninline with the input, before or after.\nIn order for an element to be considered as a prefix, it must have the slot\nattribute set to `prefix` (and similarly for `suffix`).\n\n```html\n<vaadin-text-area label=\"Description\">\n  <div slot=\"prefix\">Details:</div>\n  <div slot=\"suffix\">The end!</div>\n</vaadin-text-area>\n```\n\n### Styling\n\nThe following custom properties are available for styling:\n\nCustom property                | Description                | Default\n-------------------------------|----------------------------|---------\n`--vaadin-field-default-width` | Default width of the field | `12em`\n\n`<vaadin-text-area>` provides the same set of shadow DOM parts and state attributes as `<vaadin-text-field>`.\nSee [`<vaadin-text-field>`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha2/#/elements/vaadin-text-field) for the styling documentation.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
           "extension": true,
           "attributes": [
             {

package/src/vaadin-lit-text-area.js

@@ -1,83 +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/input-container/src/vaadin-lit-input-container.js';
-import { html, LitElement } from 'lit';
-import { ifDefined } from 'lit/directives/if-defined.js';
-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 { TooltipController } from '@vaadin/component-base/src/tooltip-controller.js';
-import { inputFieldShared } from '@vaadin/field-base/src/styles/input-field-shared-styles.js';
-import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-import { TextAreaMixin } from './vaadin-text-area-mixin.js';
-import { textAreaStyles } from './vaadin-text-area-styles.js';
-
-/**
- * LitElement based version of `<vaadin-text-area>` 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.
- */
-export class TextArea extends TextAreaMixin(ThemableMixin(ElementMixin(PolylitMixin(LitElement)))) {
-  static get is() {
-    return 'vaadin-text-area';
-  }
-
-  static get styles() {
-    return [inputFieldShared, textAreaStyles];
-  }
-
-  /** @protected */
-  render() {
-    return html`
-      <div class="vaadin-text-area-container">
-        <div part="label">
-          <slot name="label"></slot>
-          <span part="required-indicator" aria-hidden="true" @click="${this.focus}"></span>
-        </div>
-
-        <vaadin-input-container
-          part="input-field"
-          .readonly="${this.readonly}"
-          .disabled="${this.disabled}"
-          .invalid="${this.invalid}"
-          theme="${ifDefined(this._theme)}"
-          @scroll="${this._onScroll}"
-        >
-          <slot name="prefix" slot="prefix"></slot>
-          <slot name="textarea"></slot>
-          <slot name="suffix" slot="suffix"></slot>
-          <div id="clearButton" part="clear-button" slot="suffix" aria-hidden="true"></div>
-        </vaadin-input-container>
-
-        <div part="helper-text">
-          <slot name="helper"></slot>
-        </div>
-
-        <div part="error-message">
-          <slot name="error-message"></slot>
-        </div>
-      </div>
-
-      <slot name="tooltip"></slot>
-    `;
-  }
-
-  /** @protected */
-  ready() {
-    super.ready();
-
-    this._tooltipController = new TooltipController(this);
-    this._tooltipController.setPosition('top');
-    this._tooltipController.setAriaTarget(this.inputElement);
-    this.addController(this._tooltipController);
-  }
-}
-
-defineCustomElement(TextArea);

package/theme/lumo/vaadin-lit-text-area.d.ts

@@ -1,2 +0,0 @@
-import './vaadin-text-area-styles.js';
-import '../../src/vaadin-lit-text-area.js';

package/theme/lumo/vaadin-lit-text-area.js

@@ -1,2 +0,0 @@
-import './vaadin-text-area-styles.js';
-import '../../src/vaadin-lit-text-area.js';

package/theme/material/vaadin-lit-text-area.d.ts

@@ -1,2 +0,0 @@
-import './vaadin-text-area-styles.js';
-import '../../src/vaadin-lit-text-area.js';

package/theme/material/vaadin-lit-text-area.js

@@ -1,2 +0,0 @@
-import './vaadin-text-area-styles.js';
-import '../../src/vaadin-lit-text-area.js';

package/theme/material/vaadin-text-area-styles.d.ts

@@ -1,6 +0,0 @@
-/**
- * @license
- * Copyright (c) 2017 - 2025 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-import '@vaadin/input-container/theme/material/vaadin-input-container-styles.js';

package/theme/material/vaadin-text-area-styles.js

@@ -1,42 +0,0 @@
-/**
- * @license
- * Copyright (c) 2017 - 2025 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-import '@vaadin/input-container/theme/material/vaadin-input-container-styles.js';
-import { inputFieldShared } from '@vaadin/vaadin-material-styles/mixins/input-field-shared.js';
-import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-
-const textArea = css`
-  [part='input-field'] {
-    height: auto;
-    box-sizing: border-box;
-  }
-
-  [part='input-field'] ::slotted(textarea) {
-    padding-top: 0;
-    padding-bottom: 4px;
-    margin-top: 4px;
-  }
-
-  [part='input-field']::before,
-  [part='input-field']::after {
-    bottom: calc(var(--_text-area-vertical-scroll-position) * -1);
-  }
-
-  /* Use sticky positioning to keep prefix/suffix/clear button visible when scrolling textarea container */
-  [part='input-field'] ::slotted([slot$='fix']),
-  [part='clear-button'] {
-    position: sticky;
-    top: 0;
-    align-self: flex-start;
-  }
-
-  /* Align prefix/suffix icon or text with native textarea */
-  [part='input-field'] ::slotted([slot$='fix']) {
-    top: 4px;
-    margin-top: 4px;
-  }
-`;
-
-registerStyles('vaadin-text-area', [inputFieldShared, textArea], { moduleId: 'material-text-area' });

package/theme/material/vaadin-text-area.d.ts

@@ -1,7 +0,0 @@
-/**
- * @license
- * Copyright (c) 2017 - 2025 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-import './vaadin-text-area-styles.js';
-import '../../src/vaadin-text-area.js';

package/theme/material/vaadin-text-area.js

@@ -1,7 +0,0 @@
-/**
- * @license
- * Copyright (c) 2017 - 2025 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-import './vaadin-text-area-styles.js';
-import '../../src/vaadin-text-area.js';

package/vaadin-lit-text-area.d.ts

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

package/vaadin-lit-text-area.js

@@ -1,3 +0,0 @@
-import './theme/lumo/vaadin-lit-text-area.js';
-
-export * from './src/vaadin-lit-text-area.js';