@vaadin/text-area 24.0.0-beta1 → 24.0.0-beta3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/text-area",
-  "version": "24.0.0-beta1",
+  "version": "24.0.0-beta3",
   "publishConfig": {
     "access": "public"
   },
@@ -21,6 +21,8 @@
   "type": "module",
   "files": [
     "src",
+    "!src/vaadin-lit-text-area.d.ts",
+    "!src/vaadin-lit-text-area.js",
     "theme",
     "vaadin-*.d.ts",
     "vaadin-*.js",
@@ -34,13 +36,15 @@
     "web-component"
   ],
   "dependencies": {
+    "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/component-base": "24.0.0-beta1",
-    "@vaadin/field-base": "24.0.0-beta1",
-    "@vaadin/input-container": "24.0.0-beta1",
-    "@vaadin/vaadin-lumo-styles": "24.0.0-beta1",
-    "@vaadin/vaadin-material-styles": "24.0.0-beta1",
-    "@vaadin/vaadin-themable-mixin": "24.0.0-beta1"
+    "@vaadin/component-base": "24.0.0-beta3",
+    "@vaadin/field-base": "24.0.0-beta3",
+    "@vaadin/input-container": "24.0.0-beta3",
+    "@vaadin/vaadin-lumo-styles": "24.0.0-beta3",
+    "@vaadin/vaadin-material-styles": "24.0.0-beta3",
+    "@vaadin/vaadin-themable-mixin": "24.0.0-beta3",
+    "lit": "^2.0.0"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
@@ -51,5 +55,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "c5b48921a62482746df8e46994b37e1490fec27e"
+  "gitHead": "4daeac63327393aacd9cfaa5abeb031ea86b14a5"
 }

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

@@ -0,0 +1,62 @@
+/**
+ * @license
+ * Copyright (c) 2021 - 2023 Vaadin Ltd.
+ * 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 { DelegateFocusMixinClass } from '@vaadin/component-base/src/delegate-focus-mixin.js';
+import type { DelegateStateMixinClass } from '@vaadin/component-base/src/delegate-state-mixin.js';
+import type { DisabledMixinClass } from '@vaadin/component-base/src/disabled-mixin.js';
+import type { FocusMixinClass } from '@vaadin/component-base/src/focus-mixin.js';
+import type { KeyboardMixinClass } from '@vaadin/component-base/src/keyboard-mixin.js';
+import type { ResizeMixinClass } from '@vaadin/component-base/src/resize-mixin.js';
+import type { FieldMixinClass } from '@vaadin/field-base/src/field-mixin.js';
+import type { InputConstraintsMixinClass } from '@vaadin/field-base/src/input-constraints-mixin.js';
+import type { InputControlMixinClass } from '@vaadin/field-base/src/input-control-mixin.js';
+import type { InputFieldMixinClass } from '@vaadin/field-base/src/input-field-mixin.js';
+import type { InputMixinClass } from '@vaadin/field-base/src/input-mixin.js';
+import type { LabelMixinClass } from '@vaadin/field-base/src/label-mixin.js';
+import type { SlotStylesMixinClass } from '@vaadin/field-base/src/slot-styles-mixin.js';
+import type { ValidateMixinClass } from '@vaadin/field-base/src/validate-mixin.js';
+
+/**
+ * A mixin providing common text area functionality.
+ */
+export declare function TextAreaMixin<T extends Constructor<HTMLElement>>(
+  base: T,
+): Constructor<ControllerMixinClass> &
+  Constructor<DelegateFocusMixinClass> &
+  Constructor<DelegateStateMixinClass> &
+  Constructor<DisabledMixinClass> &
+  Constructor<FieldMixinClass> &
+  Constructor<FocusMixinClass> &
+  Constructor<InputConstraintsMixinClass> &
+  Constructor<InputControlMixinClass> &
+  Constructor<InputFieldMixinClass> &
+  Constructor<InputMixinClass> &
+  Constructor<KeyboardMixinClass> &
+  Constructor<LabelMixinClass> &
+  Constructor<ResizeMixinClass> &
+  Constructor<SlotStylesMixinClass> &
+  Constructor<TextAreaMixinClass> &
+  Constructor<ValidateMixinClass> &
+  T;
+
+export declare class TextAreaMixinClass {
+  /**
+   * Maximum number of characters (in Unicode code points) that the user can enter.
+   */
+  maxlength: number | null | undefined;
+
+  /**
+   * Minimum number of characters (in Unicode code points) that the user can enter.
+   */
+  minlength: number | null | undefined;
+
+  /**
+   * A regular expression that the value is checked against.
+   * The pattern must match the entire value, not just some subset.
+   */
+  pattern: string;
+}

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

@@ -0,0 +1,207 @@
+/**
+ * @license
+ * Copyright (c) 2021 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { ResizeMixin } from '@vaadin/component-base/src/resize-mixin.js';
+import { InputFieldMixin } from '@vaadin/field-base/src/input-field-mixin.js';
+import { LabelledInputController } from '@vaadin/field-base/src/labelled-input-controller.js';
+import { TextAreaController } from '@vaadin/field-base/src/text-area-controller.js';
+
+/**
+ * A mixin providing common text area functionality.
+ *
+ * @polymerMixin
+ * @mixes InputFieldMixin
+ * @mixes ResizeMixin
+ */
+export const TextAreaMixin = (superClass) =>
+  class TextAreaMixinClass extends ResizeMixin(InputFieldMixin(superClass)) {
+    static get properties() {
+      return {
+        /**
+         * Maximum number of characters (in Unicode code points) that the user can enter.
+         */
+        maxlength: {
+          type: Number,
+        },
+
+        /**
+         * Minimum number of characters (in Unicode code points) that the user can enter.
+         */
+        minlength: {
+          type: Number,
+        },
+
+        /**
+         * A regular expression that the value is checked against.
+         * The pattern must match the entire value, not just some subset.
+         */
+        pattern: {
+          type: String,
+        },
+      };
+    }
+
+    static get delegateAttrs() {
+      return [...super.delegateAttrs, 'maxlength', 'minlength', 'pattern'];
+    }
+
+    static get constraints() {
+      return [...super.constraints, 'maxlength', 'minlength', 'pattern'];
+    }
+
+    /**
+     * Used by `InputControlMixin` as a reference to the clear button element.
+     * @protected
+     */
+    get clearElement() {
+      return this.$.clearButton;
+    }
+
+    /**
+     * @protected
+     * @override
+     */
+    _onResize() {
+      this.__scrollPositionUpdated();
+    }
+
+    /** @protected */
+    _onScroll() {
+      this.__scrollPositionUpdated();
+    }
+
+    /** @protected */
+    ready() {
+      super.ready();
+
+      this.addController(
+        new TextAreaController(this, (input) => {
+          this._setInputElement(input);
+          this._setFocusElement(input);
+          this.stateTarget = input;
+          this.ariaTarget = input;
+        }),
+      );
+      this.addController(new LabelledInputController(this.inputElement, this._labelController));
+
+      this.addEventListener('animationend', this._onAnimationEnd);
+
+      this._inputField = this.shadowRoot.querySelector('[part=input-field]');
+
+      // Wheel scrolling results in async scroll events. Preventing the wheel
+      // event, scrolling manually and then synchronously updating the scroll position CSS variable
+      // allows us to avoid some jumpy behavior that would occur on wheel otherwise.
+      this._inputField.addEventListener('wheel', (e) => {
+        const scrollTopBefore = this._inputField.scrollTop;
+        this._inputField.scrollTop += e.deltaY;
+
+        if (scrollTopBefore !== this._inputField.scrollTop) {
+          e.preventDefault();
+          this.__scrollPositionUpdated();
+        }
+      });
+
+      this._updateHeight();
+      this.__scrollPositionUpdated();
+    }
+
+    /** @private */
+    __scrollPositionUpdated() {
+      this._inputField.style.setProperty('--_text-area-vertical-scroll-position', '0px');
+      this._inputField.style.setProperty('--_text-area-vertical-scroll-position', `${this._inputField.scrollTop}px`);
+    }
+
+    /** @private */
+    _onAnimationEnd(e) {
+      if (e.animationName.indexOf('vaadin-text-area-appear') === 0) {
+        this._updateHeight();
+      }
+    }
+
+    /**
+     * @param {unknown} newVal
+     * @param {unknown} oldVal
+     * @protected
+     * @override
+     */
+    _valueChanged(newVal, oldVal) {
+      super._valueChanged(newVal, oldVal);
+
+      this._updateHeight();
+    }
+
+    /** @private */
+    _updateHeight() {
+      const input = this.inputElement;
+      const inputField = this._inputField;
+
+      if (!input || !inputField) {
+        return;
+      }
+
+      const scrollTop = inputField.scrollTop;
+
+      // Only clear the height when the content shortens to minimize scrollbar flickering.
+      const valueLength = this.value ? this.value.length : 0;
+
+      if (this._oldValueLength >= valueLength) {
+        const inputFieldHeight = getComputedStyle(inputField).height;
+        const inputWidth = getComputedStyle(input).width;
+
+        // Temporarily fix the height of the wrapping input field container to prevent changing the browsers scroll
+        // position while resetting the textareas height. If the textarea had a large height, then removing its height
+        // will reset its height to the default of two rows. That might reduce the height of the page, and the
+        // browser might adjust the scroll position before we can restore the measured height of the textarea.
+        inputField.style.display = 'block';
+        inputField.style.height = inputFieldHeight;
+
+        // Fix the input element width so its scroll height isn't affected by host's disappearing scrollbars
+        input.style.maxWidth = inputWidth;
+
+        // Clear the height of the textarea to allow measuring a reduced scroll height
+        input.style.height = 'auto';
+      }
+      this._oldValueLength = valueLength;
+
+      const inputHeight = input.scrollHeight;
+      if (inputHeight > input.clientHeight) {
+        input.style.height = `${inputHeight}px`;
+      }
+
+      // Restore
+      input.style.removeProperty('max-width');
+      inputField.style.removeProperty('display');
+      inputField.style.removeProperty('height');
+      inputField.scrollTop = scrollTop;
+    }
+
+    /**
+     * Returns true if the current textarea value satisfies all constraints (if any).
+     * @return {boolean}
+     * @override
+     */
+    checkValidity() {
+      if (!super.checkValidity()) {
+        return false;
+      }
+
+      // Native <textarea> does not support pattern attribute, so we have a custom logic
+      // according to WHATWG spec for <input>, with tests inspired by web-platform-tests
+      // https://html.spec.whatwg.org/multipage/input.html#the-pattern-attribute
+
+      if (!this.pattern || !this.inputElement.value) {
+        // Mark as valid if there is no pattern, or the value is empty
+        return true;
+      }
+
+      try {
+        const match = this.inputElement.value.match(this.pattern);
+        return match ? match[0] === match.input : false;
+      } catch (_) {
+        // If the pattern can not be compiled, then report as valid
+        return true;
+      }
+    }
+  };

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

@@ -0,0 +1,8 @@
+/**
+ * @license
+ * Copyright (c) 2021 - 2023 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 textAreaStyles: CSSResult;

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

@@ -0,0 +1,73 @@
+/**
+ * @license
+ * Copyright (c) 2021 - 2023 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`
+  :host {
+    animation: 1ms vaadin-text-area-appear;
+  }
+
+  .vaadin-text-area-container {
+    flex: auto;
+  }
+
+  /* The label, helper text and the error message should neither grow nor shrink. */
+  [part='label'],
+  [part='helper-text'],
+  [part='error-message'] {
+    flex: none;
+  }
+
+  [part='input-field'] {
+    flex: auto;
+    overflow: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  ::slotted(textarea) {
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    flex: auto;
+    overflow: hidden;
+    width: 100%;
+    height: 100%;
+    outline: none;
+    resize: none;
+    margin: 0;
+    padding: 0 0.25em;
+    border: 0;
+    border-radius: 0;
+    min-width: 0;
+    font: inherit;
+    font-size: 1em;
+    line-height: normal;
+    color: inherit;
+    background-color: transparent;
+    /* Disable default invalid style in Firefox */
+    box-shadow: none;
+  }
+
+  /* Override styles from <vaadin-input-container> */
+  [part='input-field'] ::slotted(textarea) {
+    align-self: stretch;
+    white-space: pre-wrap;
+  }
+
+  [part='input-field'] ::slotted(:not(textarea)) {
+    align-self: flex-start;
+  }
+
+  /* Workaround https://bugzilla.mozilla.org/show_bug.cgi?id=1739079 */
+  :host([disabled]) ::slotted(textarea) {
+    user-select: none;
+  }
+
+  @keyframes vaadin-text-area-appear {
+    to {
+      opacity: 1;
+    }
+  }
+`;

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

@@ -4,10 +4,8 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
-import { ResizeMixin } from '@vaadin/component-base/src/resize-mixin.js';
-import { InputFieldMixin } from '@vaadin/field-base/src/input-field-mixin.js';
-import { PatternMixin } from '@vaadin/field-base/src/pattern-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { TextAreaMixin } from './vaadin-text-area-mixin.js';
 
 /**
  * Fired when the user commits a value change.
@@ -85,17 +83,7 @@ export interface TextAreaEventMap extends HTMLElementEventMap, TextAreaCustomEve
  * @fires {CustomEvent} value-changed - Fired when the `value` property changes.
  * @fires {CustomEvent} validated - Fired whenever the field is validated.
  */
-declare class TextArea extends ResizeMixin(PatternMixin(InputFieldMixin(ThemableMixin(ElementMixin(HTMLElement))))) {
-  /**
-   * Maximum number of characters (in Unicode code points) that the user can enter.
-   */
-  maxlength: number | null | undefined;
-
-  /**
-   * Minimum number of characters (in Unicode code points) that the user can enter.
-   */
-  minlength: number | null | undefined;
-
+declare class TextArea extends TextAreaMixin(ThemableMixin(ElementMixin(HTMLElement))) {
   addEventListener<K extends keyof TextAreaEventMap>(
     type: K,
     listener: (this: TextArea, ev: TextAreaEventMap[K]) => void,

package/src/vaadin-text-area.js

@@ -6,16 +6,13 @@
 import '@vaadin/input-container/src/vaadin-input-container.js';
 import { html, PolymerElement } from '@polymer/polymer';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
-import { ResizeMixin } from '@vaadin/component-base/src/resize-mixin.js';
 import { TooltipController } from '@vaadin/component-base/src/tooltip-controller.js';
-import { InputFieldMixin } from '@vaadin/field-base/src/input-field-mixin.js';
-import { LabelledInputController } from '@vaadin/field-base/src/labelled-input-controller.js';
-import { PatternMixin } from '@vaadin/field-base/src/pattern-mixin.js';
 import { inputFieldShared } from '@vaadin/field-base/src/styles/input-field-shared-styles.js';
-import { TextAreaController } from '@vaadin/field-base/src/text-area-controller.js';
 import { registerStyles, 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';
 
-registerStyles('vaadin-text-area', inputFieldShared, { moduleId: 'vaadin-text-area-styles' });
+registerStyles('vaadin-text-area', [inputFieldShared, textAreaStyles], { moduleId: 'vaadin-text-area-styles' });
 
 /**
  * `<vaadin-text-area>` is a web component for multi-line text input.
@@ -58,86 +55,17 @@ registerStyles('vaadin-text-area', inputFieldShared, { moduleId: 'vaadin-text-ar
  * @fires {CustomEvent} validated - Fired whenever the field is validated.
  *
  * @extends HTMLElement
- * @mixes InputFieldMixin
  * @mixes ElementMixin
- * @mixes PatternMixin
+ * @mixes TextAreaMixin
  * @mixes ThemableMixin
- * @mixes ResizeMixin
  */
-export class TextArea extends ResizeMixin(PatternMixin(InputFieldMixin(ThemableMixin(ElementMixin(PolymerElement))))) {
+export class TextArea extends TextAreaMixin(ThemableMixin(ElementMixin(PolymerElement))) {
   static get is() {
     return 'vaadin-text-area';
   }
 
   static get template() {
     return html`
-      <style>
-        :host {
-          animation: 1ms vaadin-text-area-appear;
-        }
-
-        .vaadin-text-area-container {
-          flex: auto;
-        }
-
-        /* The label, helper text and the error message should neither grow nor shrink. */
-        [part='label'],
-        [part='helper-text'],
-        [part='error-message'] {
-          flex: none;
-        }
-
-        [part='input-field'] {
-          flex: auto;
-          overflow: auto;
-          -webkit-overflow-scrolling: touch;
-        }
-
-        ::slotted(textarea) {
-          -webkit-appearance: none;
-          -moz-appearance: none;
-          flex: auto;
-          overflow: hidden;
-          width: 100%;
-          height: 100%;
-          outline: none;
-          resize: none;
-          margin: 0;
-          padding: 0 0.25em;
-          border: 0;
-          border-radius: 0;
-          min-width: 0;
-          font: inherit;
-          font-size: 1em;
-          line-height: normal;
-          color: inherit;
-          background-color: transparent;
-          /* Disable default invalid style in Firefox */
-          box-shadow: none;
-        }
-
-        /* Override styles from <vaadin-input-container> */
-        [part='input-field'] ::slotted(textarea) {
-          align-self: stretch;
-          white-space: pre-wrap;
-        }
-
-        [part='input-field'] ::slotted(:not(textarea)) {
-          align-self: flex-start;
-        }
-
-        /* Workaround https://bugzilla.mozilla.org/show_bug.cgi?id=1739079 */
-        :host([disabled]) ::slotted(textarea) {
-          user-select: none;
-        }
-
-        @keyframes vaadin-text-area-appear {
-          to {
-            opacity: 1;
-          }
-        }
-      </style>
-
       <div class="vaadin-text-area-container">
         <div part="label">
           <slot name="label"></slot>
@@ -150,7 +78,7 @@ export class TextArea extends ResizeMixin(PatternMixin(InputFieldMixin(ThemableM
           disabled="[[disabled]]"
           invalid="[[invalid]]"
           theme$="[[_theme]]"
-          on-scroll="__scrollPositionUpdated"
+          on-scroll="_onScroll"
         >
           <slot name="prefix" slot="prefix"></slot>
           <slot name="textarea"></slot>
@@ -171,182 +99,13 @@ export class TextArea extends ResizeMixin(PatternMixin(InputFieldMixin(ThemableM
     `;
   }
 
-  static get properties() {
-    return {
-      /**
-       * Maximum number of characters (in Unicode code points) that the user can enter.
-       */
-      maxlength: {
-        type: Number,
-      },
-
-      /**
-       * Minimum number of characters (in Unicode code points) that the user can enter.
-       */
-      minlength: {
-        type: Number,
-      },
-    };
-  }
-
-  static get delegateAttrs() {
-    return [...super.delegateAttrs, 'maxlength', 'minlength'];
-  }
-
-  static get constraints() {
-    return [...super.constraints, 'maxlength', 'minlength'];
-  }
-
-  /**
-   * Used by `InputControlMixin` as a reference to the clear button element.
-   * @protected
-   */
-  get clearElement() {
-    return this.$.clearButton;
-  }
-
-  /**
-   * @protected
-   * @override
-   */
-  _onResize() {
-    this.__scrollPositionUpdated();
-  }
-
   /** @protected */
   ready() {
     super.ready();
 
-    this.addController(
-      new TextAreaController(this, (input) => {
-        this._setInputElement(input);
-        this._setFocusElement(input);
-        this.stateTarget = input;
-        this.ariaTarget = input;
-      }),
-    );
-    this.addController(new LabelledInputController(this.inputElement, this._labelController));
-
     this._tooltipController = new TooltipController(this);
     this._tooltipController.setPosition('top');
     this.addController(this._tooltipController);
-
-    this.addEventListener('animationend', this._onAnimationEnd);
-
-    this._inputField = this.shadowRoot.querySelector('[part=input-field]');
-
-    // Wheel scrolling results in async scroll events. Preventing the wheel
-    // event, scrolling manually and then synchronously updating the scroll position CSS variable
-    // allows us to avoid some jumpy behavior that would occur on wheel otherwise.
-    this._inputField.addEventListener('wheel', (e) => {
-      const scrollTopBefore = this._inputField.scrollTop;
-      this._inputField.scrollTop += e.deltaY;
-
-      if (scrollTopBefore !== this._inputField.scrollTop) {
-        e.preventDefault();
-        this.__scrollPositionUpdated();
-      }
-    });
-
-    this._updateHeight();
-    this.__scrollPositionUpdated();
-  }
-
-  /** @private */
-  __scrollPositionUpdated() {
-    this._inputField.style.setProperty('--_text-area-vertical-scroll-position', '0px');
-    this._inputField.style.setProperty('--_text-area-vertical-scroll-position', `${this._inputField.scrollTop}px`);
-  }
-
-  /** @private */
-  _onAnimationEnd(e) {
-    if (e.animationName.indexOf('vaadin-text-area-appear') === 0) {
-      this._updateHeight();
-    }
-  }
-
-  /**
-   * @param {unknown} newVal
-   * @param {unknown} oldVal
-   * @protected
-   * @override
-   */
-  _valueChanged(newVal, oldVal) {
-    super._valueChanged(newVal, oldVal);
-
-    this._updateHeight();
-  }
-
-  /** @private */
-  _updateHeight() {
-    const input = this.inputElement;
-    const inputField = this._inputField;
-
-    if (!input || !inputField) {
-      return;
-    }
-
-    const scrollTop = inputField.scrollTop;
-
-    // Only clear the height when the content shortens to minimize scrollbar flickering.
-    const valueLength = this.value ? this.value.length : 0;
-
-    if (this._oldValueLength >= valueLength) {
-      const inputFieldHeight = getComputedStyle(inputField).height;
-      const inputWidth = getComputedStyle(input).width;
-
-      // Temporarily fix the height of the wrapping input field container to prevent changing the browsers scroll
-      // position while resetting the textareas height. If the textarea had a large height, then removing its height
-      // will reset its height to the default of two rows. That might reduce the height of the page, and the
-      // browser might adjust the scroll position before we can restore the measured height of the textarea.
-      inputField.style.display = 'block';
-      inputField.style.height = inputFieldHeight;
-
-      // Fix the input element width so its scroll height isn't affected by host's disappearing scrollbars
-      input.style.maxWidth = inputWidth;
-
-      // Clear the height of the textarea to allow measuring a reduced scroll height
-      input.style.height = 'auto';
-    }
-    this._oldValueLength = valueLength;
-
-    const inputHeight = input.scrollHeight;
-    if (inputHeight > input.clientHeight) {
-      input.style.height = `${inputHeight}px`;
-    }
-
-    // Restore
-    input.style.removeProperty('max-width');
-    inputField.style.removeProperty('display');
-    inputField.style.removeProperty('height');
-    inputField.scrollTop = scrollTop;
-  }
-
-  /**
-   * Returns true if the current textarea value satisfies all constraints (if any).
-   * @return {boolean}
-   */
-  checkValidity() {
-    if (!super.checkValidity()) {
-      return false;
-    }
-
-    // Native <textarea> does not support pattern attribute, so we have a custom logic
-    // according to WHATWG spec for <input>, with tests inspired by web-platform-tests
-    // https://html.spec.whatwg.org/multipage/input.html#the-pattern-attribute
-
-    if (!this.pattern || !this.inputElement.value) {
-      // Mark as valid if there is no pattern, or the value is empty
-      return true;
-    }
-
-    try {
-      const match = this.inputElement.value.match(this.pattern);
-      return match ? match[0] === match.input : false;
-    } catch (_) {
-      // If the pattern can not be compiled, then report as valid
-      return true;
-    }
   }
 }
 

package/web-types.json

@@ -1,14 +1,14 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/text-area",
-  "version": "24.0.0-alpha12",
+  "version": "24.0.0-beta3",
   "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.0.0-alpha12/#/elements/vaadin-text-field) for the styling documentation.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/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/24.0.0-beta3/#/elements/vaadin-text-field) for the styling documentation.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.",
           "attributes": [
             {
               "name": "disabled",
@@ -99,30 +99,30 @@
               }
             },
             {
-              "name": "allowed-char-pattern",
-              "description": "A pattern matched against individual characters the user inputs.\n\nWhen set, the field will prevent:\n- `keydown` events if the entered key doesn't match `/^allowedCharPattern$/`\n- `paste` events if the pasted text doesn't match `/^allowedCharPattern*$/`\n- `drop` events if the dropped text doesn't match `/^allowedCharPattern*$/`\n\nFor example, to allow entering only numbers and minus signs, use:\n`allowedCharPattern = \"[\\\\d-]\"`",
+              "name": "clear-button-visible",
+              "description": "Set to true to display the clear icon which clears the input.\n\nIt is up to the component to choose where to place the clear icon:\nin the Shadow DOM or in the light DOM. In any way, a reference to\nthe clear icon element should be provided via the `clearElement` getter.",
               "value": {
                 "type": [
-                  "string",
+                  "boolean",
                   "null",
                   "undefined"
                 ]
               }
             },
             {
-              "name": "autoselect",
-              "description": "If true, the input text gets fully selected when the field is focused using click or touch / tap.",
+              "name": "allowed-char-pattern",
+              "description": "A pattern matched against individual characters the user inputs.\n\nWhen set, the field will prevent:\n- `keydown` events if the entered key doesn't match `/^allowedCharPattern$/`\n- `paste` events if the pasted text doesn't match `/^allowedCharPattern*$/`\n- `drop` events if the dropped text doesn't match `/^allowedCharPattern*$/`\n\nFor example, to allow entering only numbers and minus signs, use:\n`allowedCharPattern = \"[\\\\d-]\"`",
               "value": {
                 "type": [
-                  "boolean",
+                  "string",
                   "null",
                   "undefined"
                 ]
               }
             },
             {
-              "name": "clear-button-visible",
-              "description": "Set to true to display the clear icon which clears the input.",
+              "name": "autoselect",
+              "description": "If true, the input text gets fully selected when the field is focused using click or touch / tap.",
               "value": {
                 "type": [
                   "boolean",
@@ -209,19 +209,19 @@
               }
             },
             {
-              "name": "pattern",
-              "description": "A regular expression that the value is checked against.\nThe pattern must match the entire value, not just some subset.",
+              "name": "maxlength",
+              "description": "Maximum number of characters (in Unicode code points) that the user can enter.",
               "value": {
                 "type": [
-                  "string",
+                  "number",
                   "null",
                   "undefined"
                 ]
               }
             },
             {
-              "name": "maxlength",
-              "description": "Maximum number of characters (in Unicode code points) that the user can enter.",
+              "name": "minlength",
+              "description": "Minimum number of characters (in Unicode code points) that the user can enter.",
               "value": {
                 "type": [
                   "number",
@@ -231,11 +231,11 @@
               }
             },
             {
-              "name": "minlength",
-              "description": "Minimum number of characters (in Unicode code points) that the user can enter.",
+              "name": "pattern",
+              "description": "A regular expression that the value is checked against.\nThe pattern must match the entire value, not just some subset.",
               "value": {
                 "type": [
-                  "number",
+                  "string",
                   "null",
                   "undefined"
                 ]
@@ -344,30 +344,30 @@
                 }
               },
               {
-                "name": "allowedCharPattern",
-                "description": "A pattern matched against individual characters the user inputs.\n\nWhen set, the field will prevent:\n- `keydown` events if the entered key doesn't match `/^allowedCharPattern$/`\n- `paste` events if the pasted text doesn't match `/^allowedCharPattern*$/`\n- `drop` events if the dropped text doesn't match `/^allowedCharPattern*$/`\n\nFor example, to allow entering only numbers and minus signs, use:\n`allowedCharPattern = \"[\\\\d-]\"`",
+                "name": "clearButtonVisible",
+                "description": "Set to true to display the clear icon which clears the input.\n\nIt is up to the component to choose where to place the clear icon:\nin the Shadow DOM or in the light DOM. In any way, a reference to\nthe clear icon element should be provided via the `clearElement` getter.",
                 "value": {
                   "type": [
-                    "string",
+                    "boolean",
                     "null",
                     "undefined"
                   ]
                 }
               },
               {
-                "name": "autoselect",
-                "description": "If true, the input text gets fully selected when the field is focused using click or touch / tap.",
+                "name": "allowedCharPattern",
+                "description": "A pattern matched against individual characters the user inputs.\n\nWhen set, the field will prevent:\n- `keydown` events if the entered key doesn't match `/^allowedCharPattern$/`\n- `paste` events if the pasted text doesn't match `/^allowedCharPattern*$/`\n- `drop` events if the dropped text doesn't match `/^allowedCharPattern*$/`\n\nFor example, to allow entering only numbers and minus signs, use:\n`allowedCharPattern = \"[\\\\d-]\"`",
                 "value": {
                   "type": [
-                    "boolean",
+                    "string",
                     "null",
                     "undefined"
                   ]
                 }
               },
               {
-                "name": "clearButtonVisible",
-                "description": "Set to true to display the clear icon which clears the input.",
+                "name": "autoselect",
+                "description": "If true, the input text gets fully selected when the field is focused using click or touch / tap.",
                 "value": {
                   "type": [
                     "boolean",
@@ -454,19 +454,19 @@
                 }
               },
               {
-                "name": "pattern",
-                "description": "A regular expression that the value is checked against.\nThe pattern must match the entire value, not just some subset.",
+                "name": "maxlength",
+                "description": "Maximum number of characters (in Unicode code points) that the user can enter.",
                 "value": {
                   "type": [
-                    "string",
+                    "number",
                     "null",
                     "undefined"
                   ]
                 }
               },
               {
-                "name": "maxlength",
-                "description": "Maximum number of characters (in Unicode code points) that the user can enter.",
+                "name": "minlength",
+                "description": "Minimum number of characters (in Unicode code points) that the user can enter.",
                 "value": {
                   "type": [
                     "number",
@@ -476,11 +476,11 @@
                 }
               },
               {
-                "name": "minlength",
-                "description": "Minimum number of characters (in Unicode code points) that the user can enter.",
+                "name": "pattern",
+                "description": "A regular expression that the value is checked against.\nThe pattern must match the entire value, not just some subset.",
                 "value": {
                   "type": [
-                    "number",
+                    "string",
                     "null",
                     "undefined"
                   ]

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/text-area",
-  "version": "24.0.0-alpha12",
+  "version": "24.0.0-beta3",
   "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.0.0-alpha12/#/elements/vaadin-text-field) for the styling documentation.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/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/24.0.0-beta3/#/elements/vaadin-text-field) for the styling documentation.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.",
           "extension": true,
           "attributes": [
             {
@@ -48,15 +48,15 @@
               }
             },
             {
-              "name": "?autoselect",
-              "description": "If true, the input text gets fully selected when the field is focused using click or touch / tap.",
+              "name": "?clearButtonVisible",
+              "description": "Set to true to display the clear icon which clears the input.\n\nIt is up to the component to choose where to place the clear icon:\nin the Shadow DOM or in the light DOM. In any way, a reference to\nthe clear icon element should be provided via the `clearElement` getter.",
               "value": {
                 "kind": "expression"
               }
             },
             {
-              "name": "?clearButtonVisible",
-              "description": "Set to true to display the clear icon which clears the input.",
+              "name": "?autoselect",
+              "description": "If true, the input text gets fully selected when the field is focused using click or touch / tap.",
               "value": {
                 "kind": "expression"
               }
@@ -146,22 +146,22 @@
               }
             },
             {
-              "name": ".pattern",
-              "description": "A regular expression that the value is checked against.\nThe pattern must match the entire value, not just some subset.",
+              "name": ".maxlength",
+              "description": "Maximum number of characters (in Unicode code points) that the user can enter.",
               "value": {
                 "kind": "expression"
               }
             },
             {
-              "name": ".maxlength",
-              "description": "Maximum number of characters (in Unicode code points) that the user can enter.",
+              "name": ".minlength",
+              "description": "Minimum number of characters (in Unicode code points) that the user can enter.",
               "value": {
                 "kind": "expression"
               }
             },
             {
-              "name": ".minlength",
-              "description": "Minimum number of characters (in Unicode code points) that the user can enter.",
+              "name": ".pattern",
+              "description": "A regular expression that the value is checked against.\nThe pattern must match the entire value, not just some subset.",
               "value": {
                 "kind": "expression"
               }