@vaadin/field-base 23.1.2 → 23.2.0-alpha3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/field-base",
-  "version": "23.1.2",
+  "version": "23.2.0-alpha3",
   "publishConfig": {
     "access": "public"
   },
@@ -32,7 +32,7 @@
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/component-base": "^23.1.2",
+    "@vaadin/component-base": "23.2.0-alpha3",
     "lit": "^2.0.0"
   },
   "devDependencies": {
@@ -40,5 +40,5 @@
     "@vaadin/testing-helpers": "^0.3.2",
     "sinon": "^13.0.2"
   },
-  "gitHead": "6fb205c6e9a761feadfb779dd5d7af96d3102e56"
+  "gitHead": "06e5875be93ca50da2846dafc65a8531010c0576"
 }

package/src/checked-mixin.d.ts

@@ -3,10 +3,10 @@
  * Copyright (c) 2021 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { Constructor } from '@open-wc/dedupe-mixin';
-import { DisabledMixinClass } from '@vaadin/component-base/src/disabled-mixin.js';
-import { DelegateStateMixinClass } from './delegate-state-mixin.js';
-import { InputMixinClass } from './input-mixin.js';
+import type { Constructor } from '@open-wc/dedupe-mixin';
+import type { DisabledMixinClass } from '@vaadin/component-base/src/disabled-mixin.js';
+import type { DelegateStateMixinClass } from './delegate-state-mixin.js';
+import type { InputMixinClass } from './input-mixin.js';
 
 /**
  * A mixin to manage the checked state.

package/src/delegate-focus-mixin.d.ts

@@ -3,10 +3,10 @@
  * Copyright (c) 2021 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { Constructor } from '@open-wc/dedupe-mixin';
-import { DisabledMixinClass } from '@vaadin/component-base/src/disabled-mixin.js';
-import { FocusMixinClass } from '@vaadin/component-base/src/focus-mixin.js';
-import { TabindexMixinClass } from '@vaadin/component-base/src/tabindex-mixin.js';
+import type { Constructor } from '@open-wc/dedupe-mixin';
+import type { DisabledMixinClass } from '@vaadin/component-base/src/disabled-mixin.js';
+import type { FocusMixinClass } from '@vaadin/component-base/src/focus-mixin.js';
+import type { TabindexMixinClass } from '@vaadin/component-base/src/tabindex-mixin.js';
 
 /**
  * A mixin to forward focus to an element in the light DOM.

package/src/delegate-state-mixin.d.ts

@@ -3,7 +3,7 @@
  * Copyright (c) 2021 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { Constructor } from '@open-wc/dedupe-mixin';
+import type { Constructor } from '@open-wc/dedupe-mixin';
 
 /**
  * A mixin to delegate properties and attributes to a target element.

package/src/field-mixin.d.ts

@@ -3,10 +3,10 @@
  * Copyright (c) 2021 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { Constructor } from '@open-wc/dedupe-mixin';
-import { ControllerMixinClass } from '@vaadin/component-base/src/controller-mixin.js';
-import { LabelMixinClass } from './label-mixin.js';
-import { ValidateMixinClass } from './validate-mixin.js';
+import type { Constructor } from '@open-wc/dedupe-mixin';
+import type { ControllerMixinClass } from '@vaadin/component-base/src/controller-mixin.js';
+import type { LabelMixinClass } from './label-mixin.js';
+import type { ValidateMixinClass } from './validate-mixin.js';
 
 /**
  * A mixin to provide common field logic: label, error message and helper text.

package/src/field-mixin.js

@@ -89,10 +89,6 @@ export const FieldMixin = (superclass) =>
       this._helperController = new HelperController(this);
       this._errorController = new ErrorController(this);
 
-      this.addController(this._fieldAriaController);
-      this.addController(this._helperController);
-      this.addController(this._errorController);
-
       this._labelController.addEventListener('label-changed', (event) => {
         const { hasLabel, node } = event.detail;
         this.__labelChanged(hasLabel, node);
@@ -104,6 +100,15 @@ export const FieldMixin = (superclass) =>
       });
     }
 
+    /** @protected */
+    ready() {
+      super.ready();
+
+      this.addController(this._fieldAriaController);
+      this.addController(this._helperController);
+      this.addController(this._errorController);
+    }
+
     /** @private */
     __helperChanged(hasHelper, helperNode) {
       if (hasHelper) {

package/src/input-constraints-mixin.d.ts

@@ -3,11 +3,11 @@
  * Copyright (c) 2021 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { Constructor } from '@open-wc/dedupe-mixin';
-import { DisabledMixinClass } from '@vaadin/component-base/src/disabled-mixin.js';
-import { DelegateStateMixinClass } from './delegate-state-mixin.js';
-import { InputMixinClass } from './input-mixin.js';
-import { ValidateMixinClass } from './validate-mixin.js';
+import type { Constructor } from '@open-wc/dedupe-mixin';
+import type { DisabledMixinClass } from '@vaadin/component-base/src/disabled-mixin.js';
+import type { DelegateStateMixinClass } from './delegate-state-mixin.js';
+import type { InputMixinClass } from './input-mixin.js';
+import type { ValidateMixinClass } from './validate-mixin.js';
 
 /**
  * A mixin to combine multiple input validation constraints.

package/src/input-constraints-mixin.js

@@ -88,7 +88,7 @@ export const InputConstraintsMixin = dedupingMixin(
         if (this._hasValidConstraints(constraints)) {
           this.validate();
         } else {
-          this.invalid = false;
+          this._setInvalid(false);
         }
       }
 

package/src/input-control-mixin.d.ts

@@ -3,18 +3,18 @@
  * Copyright (c) 2021 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { Constructor } from '@open-wc/dedupe-mixin';
-import { ControllerMixinClass } from '@vaadin/component-base/src/controller-mixin.js';
-import { DisabledMixinClass } from '@vaadin/component-base/src/disabled-mixin.js';
-import { FocusMixinClass } from '@vaadin/component-base/src/focus-mixin.js';
-import { KeyboardMixinClass } from '@vaadin/component-base/src/keyboard-mixin.js';
-import { DelegateFocusMixinClass } from './delegate-focus-mixin.js';
-import { DelegateStateMixinClass } from './delegate-state-mixin.js';
-import { FieldMixinClass } from './field-mixin.js';
-import { InputConstraintsMixinClass } from './input-constraints-mixin.js';
-import { InputMixinClass } from './input-mixin.js';
-import { LabelMixinClass } from './label-mixin.js';
-import { ValidateMixinClass } from './validate-mixin.js';
+import type { Constructor } from '@open-wc/dedupe-mixin';
+import type { ControllerMixinClass } from '@vaadin/component-base/src/controller-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 { DelegateFocusMixinClass } from './delegate-focus-mixin.js';
+import type { DelegateStateMixinClass } from './delegate-state-mixin.js';
+import type { FieldMixinClass } from './field-mixin.js';
+import type { InputConstraintsMixinClass } from './input-constraints-mixin.js';
+import type { InputMixinClass } from './input-mixin.js';
+import type { LabelMixinClass } from './label-mixin.js';
+import type { ValidateMixinClass } from './validate-mixin.js';
 
 /**
  * A mixin to provide shared logic for the editable form input controls.
@@ -36,6 +36,19 @@ export declare function InputControlMixin<T extends Constructor<HTMLElement>>(
   Constructor<ValidateMixinClass>;
 
 export declare class InputControlMixinClass {
+  /**
+   * A pattern matched against individual characters the user inputs.
+   *
+   * When set, the field will prevent:
+   * - `keydown` events if the entered key doesn't match `/^allowedCharPattern$/`
+   * - `paste` events if the pasted text doesn't match `/^allowedCharPattern*$/`
+   * - `drop` events if the dropped text doesn't match `/^allowedCharPattern*$/`
+   *
+   * For example, to allow entering only numbers and minus signs, use:
+   * `allowedCharPattern = "[\\d-]"`
+   */
+  allowedCharPattern: string;
+
   /**
    * If true, the input text gets fully selected when the field is focused using click or touch / tap.
    */

package/src/input-control-mixin.js

@@ -3,6 +3,8 @@
  * Copyright (c) 2021 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
+import { timeOut } from '@vaadin/component-base/src/async.js';
+import { Debouncer } from '@vaadin/component-base/src/debounce.js';
 import { KeyboardMixin } from '@vaadin/component-base/src/keyboard-mixin.js';
 import { DelegateFocusMixin } from './delegate-focus-mixin.js';
 import { FieldMixin } from './field-mixin.js';
@@ -23,6 +25,22 @@ export const InputControlMixin = (superclass) =>
   ) {
     static get properties() {
       return {
+        /**
+         * A pattern matched against individual characters the user inputs.
+         *
+         * When set, the field will prevent:
+         * - `keydown` events if the entered key doesn't match `/^allowedCharPattern$/`
+         * - `paste` events if the pasted text doesn't match `/^allowedCharPattern*$/`
+         * - `drop` events if the dropped text doesn't match `/^allowedCharPattern*$/`
+         *
+         * For example, to allow entering only numbers and minus signs, use:
+         * `allowedCharPattern = "[\\d-]"`
+         */
+        allowedCharPattern: {
+          type: String,
+          observer: '_allowedCharPatternChanged',
+        },
+
         /**
          * If true, the input text gets fully selected when the field is focused using click or touch / tap.
          */
@@ -80,6 +98,14 @@ export const InputControlMixin = (superclass) =>
       return [...super.delegateAttrs, 'name', 'type', 'placeholder', 'readonly', 'invalid', 'title'];
     }
 
+    constructor() {
+      super();
+
+      this._boundOnPaste = this._onPaste.bind(this);
+      this._boundOnDrop = this._onDrop.bind(this);
+      this._boundOnBeforeInput = this._onBeforeInput.bind(this);
+    }
+
     /**
      * Any element extending this mixin is required to implement this getter.
      * It returns the reference to the clear button element.
@@ -172,6 +198,115 @@ export const InputControlMixin = (superclass) =>
       this.inputElement.dispatchEvent(new Event('change', { bubbles: true }));
     }
 
+    /**
+     * Override a method from `InputMixin`.
+     * @param {!HTMLElement} input
+     * @protected
+     * @override
+     */
+    _addInputListeners(input) {
+      super._addInputListeners(input);
+
+      input.addEventListener('paste', this._boundOnPaste);
+      input.addEventListener('drop', this._boundOnDrop);
+      input.addEventListener('beforeinput', this._boundOnBeforeInput);
+    }
+
+    /**
+     * Override a method from `InputMixin`.
+     * @param {!HTMLElement} input
+     * @protected
+     * @override
+     */
+    _removeInputListeners(input) {
+      super._removeInputListeners(input);
+
+      input.removeEventListener('paste', this._boundOnPaste);
+      input.removeEventListener('drop', this._boundOnDrop);
+      input.removeEventListener('beforeinput', this._boundOnBeforeInput);
+    }
+
+    /**
+     * Override an event listener from `KeyboardMixin`.
+     * @param {!KeyboardEvent} event
+     * @protected
+     * @override
+     */
+    _onKeyDown(event) {
+      super._onKeyDown(event);
+
+      if (this.allowedCharPattern && !this.__shouldAcceptKey(event)) {
+        event.preventDefault();
+        this._markInputPrevented();
+      }
+    }
+
+    /** @protected */
+    _markInputPrevented() {
+      // Add input-prevented attribute for 200ms
+      this.setAttribute('input-prevented', '');
+      this._preventInputDebouncer = Debouncer.debounce(this._preventInputDebouncer, timeOut.after(200), () => {
+        this.removeAttribute('input-prevented');
+      });
+    }
+
+    /** @private */
+    __shouldAcceptKey(event) {
+      return (
+        event.metaKey ||
+        event.ctrlKey ||
+        !event.key || // Allow typing anything if event.key is not supported
+        event.key.length !== 1 || // Allow "Backspace", "ArrowLeft" etc.
+        this.__allowedCharRegExp.test(event.key)
+      );
+    }
+
+    /** @private */
+    _onPaste(e) {
+      if (this.allowedCharPattern) {
+        const pastedText = e.clipboardData.getData('text');
+        if (!this.__allowedTextRegExp.test(pastedText)) {
+          e.preventDefault();
+          this._markInputPrevented();
+        }
+      }
+    }
+
+    /** @private */
+    _onDrop(e) {
+      if (this.allowedCharPattern) {
+        const draggedText = e.dataTransfer.getData('text');
+        if (!this.__allowedTextRegExp.test(draggedText)) {
+          e.preventDefault();
+          this._markInputPrevented();
+        }
+      }
+    }
+
+    /** @private */
+    _onBeforeInput(e) {
+      // The `beforeinput` event covers all the cases for `allowedCharPattern`: keyboard, pasting and dropping,
+      // but it is still experimental technology so we can't rely on it. It's used here just as an additional check,
+      // because it seems to be the only way to detect and prevent specific keys on mobile devices.
+      // See https://github.com/vaadin/vaadin-text-field/issues/429
+      if (this.allowedCharPattern && e.data && !this.__allowedTextRegExp.test(e.data)) {
+        e.preventDefault();
+        this._markInputPrevented();
+      }
+    }
+
+    /** @private */
+    _allowedCharPatternChanged(charPattern) {
+      if (charPattern) {
+        try {
+          this.__allowedCharRegExp = new RegExp(`^${charPattern}$`);
+          this.__allowedTextRegExp = new RegExp(`^${charPattern}*$`);
+        } catch (e) {
+          console.error(e);
+        }
+      }
+    }
+
     /**
      * Fired when the user commits a value change.
      *

package/src/input-controller.js

@@ -23,9 +23,7 @@ export class InputController extends SlotController {
         }
 
         // Ensure every instance has unique ID
-        const uniqueId = (InputController._uniqueInputId = 1 + InputController._uniqueInputId || 0);
-        host._inputId = `${host.localName}-${uniqueId}`;
-        node.id = host._inputId;
+        node.id = this.defaultId;
 
         if (typeof callback === 'function') {
           callback(node);

package/src/input-field-mixin.d.ts

@@ -3,19 +3,19 @@
  * Copyright (c) 2021 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { Constructor } from '@open-wc/dedupe-mixin';
-import { ControllerMixinClass } from '@vaadin/component-base/src/controller-mixin.js';
-import { DisabledMixinClass } from '@vaadin/component-base/src/disabled-mixin.js';
-import { FocusMixinClass } from '@vaadin/component-base/src/focus-mixin.js';
-import { KeyboardMixinClass } from '@vaadin/component-base/src/keyboard-mixin.js';
-import { DelegateFocusMixinClass } from './delegate-focus-mixin.js';
-import { DelegateStateMixinClass } from './delegate-state-mixin.js';
-import { FieldMixinClass } from './field-mixin.js';
-import { InputConstraintsMixinClass } from './input-constraints-mixin.js';
-import { InputControlMixinClass } from './input-control-mixin.js';
-import { InputMixinClass } from './input-mixin.js';
-import { LabelMixinClass } from './label-mixin.js';
-import { ValidateMixinClass } from './validate-mixin.js';
+import type { Constructor } from '@open-wc/dedupe-mixin';
+import type { ControllerMixinClass } from '@vaadin/component-base/src/controller-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 { DelegateFocusMixinClass } from './delegate-focus-mixin.js';
+import type { DelegateStateMixinClass } from './delegate-state-mixin.js';
+import type { FieldMixinClass } from './field-mixin.js';
+import type { InputConstraintsMixinClass } from './input-constraints-mixin.js';
+import type { InputControlMixinClass } from './input-control-mixin.js';
+import type { InputMixinClass } from './input-mixin.js';
+import type { LabelMixinClass } from './label-mixin.js';
+import type { ValidateMixinClass } from './validate-mixin.js';
 
 /**
  * A mixin to provide logic for vaadin-text-field and related components.

package/src/input-field-mixin.js

@@ -47,22 +47,6 @@ export const InputFieldMixin = (superclass) =>
         autocapitalize: {
           type: String,
         },
-
-        /**
-         * A pattern matched against individual characters the user inputs.
-         * When set, the field will prevent:
-         * - `keyDown` events if the entered key doesn't match `/^_enabledCharPattern$/`
-         * - `paste` events if the pasted text doesn't match `/^_enabledCharPattern*$/`
-         * - `drop` events if the dropped text doesn't match `/^_enabledCharPattern*$/`
-         *
-         * For example, to enable entering only numbers and minus signs,
-         * `_enabledCharPattern = "[\\d-]"`
-         * @protected
-         */
-        _enabledCharPattern: {
-          type: String,
-          observer: '_enabledCharPatternChanged',
-        },
       };
     }
 
@@ -70,14 +54,6 @@ export const InputFieldMixin = (superclass) =>
       return [...super.delegateAttrs, 'autocapitalize', 'autocomplete', 'autocorrect'];
     }
 
-    constructor() {
-      super();
-
-      this._boundOnPaste = this._onPaste.bind(this);
-      this._boundOnDrop = this._onDrop.bind(this);
-      this._boundOnBeforeInput = this._onBeforeInput.bind(this);
-    }
-
     /**
      * @param {HTMLElement} input
      * @protected
@@ -149,97 +125,4 @@ export const InputFieldMixin = (superclass) =>
         this.validate();
       }
     }
-
-    /**
-     * Override a method from `InputMixin`.
-     * @param {!HTMLElement} input
-     * @protected
-     * @override
-     */
-    _addInputListeners(input) {
-      super._addInputListeners(input);
-
-      input.addEventListener('paste', this._boundOnPaste);
-      input.addEventListener('drop', this._boundOnDrop);
-      input.addEventListener('beforeinput', this._boundOnBeforeInput);
-    }
-
-    /**
-     * Override a method from `InputMixin`.
-     * @param {!HTMLElement} input
-     * @protected
-     * @override
-     */
-    _removeInputListeners(input) {
-      super._removeInputListeners(input);
-
-      input.removeEventListener('paste', this._boundOnPaste);
-      input.removeEventListener('drop', this._boundOnDrop);
-      input.removeEventListener('beforeinput', this._boundOnBeforeInput);
-    }
-
-    /**
-     * Override an event listener from `InputControlMixin`
-     * to avoid adding a separate listener.
-     * @param {!KeyboardEvent} event
-     * @protected
-     * @override
-     */
-    _onKeyDown(event) {
-      if (this._enabledCharPattern && !this.__shouldAcceptKey(event)) {
-        event.preventDefault();
-      }
-
-      super._onKeyDown(event);
-    }
-
-    /** @private */
-    __shouldAcceptKey(event) {
-      return (
-        event.metaKey ||
-        event.ctrlKey ||
-        !event.key || // Allow typing anything if event.key is not supported
-        event.key.length !== 1 || // Allow "Backspace", "ArrowLeft" etc.
-        this.__enabledCharRegExp.test(event.key)
-      );
-    }
-
-    /** @private */
-    _onPaste(e) {
-      if (this._enabledCharPattern) {
-        const pastedText = (e.clipboardData || window.clipboardData).getData('text');
-        if (!this.__enabledTextRegExp.test(pastedText)) {
-          e.preventDefault();
-        }
-      }
-    }
-
-    /** @private */
-    _onDrop(e) {
-      if (this._enabledCharPattern) {
-        const draggedText = e.dataTransfer.getData('text');
-        if (!this.__enabledTextRegExp.test(draggedText)) {
-          e.preventDefault();
-        }
-      }
-    }
-
-    /** @private */
-    _onBeforeInput(e) {
-      // The `beforeinput` event covers all the cases for `_enabledCharPattern`: keyboard, pasting and dropping,
-      // but it is still experimental technology so we can't rely on it. It's used here just as an additional check,
-      // because it seems to be the only way to detect and prevent specific keys on mobile devices.
-      // See https://github.com/vaadin/vaadin-text-field/issues/429
-      if (this._enabledCharPattern && e.data && !this.__enabledTextRegExp.test(e.data)) {
-        e.preventDefault();
-      }
-    }
-
-    /** @private */
-    _enabledCharPatternChanged(charPattern) {
-      if (charPattern) {
-        this.__enabledCharRegExp = new RegExp(`^${charPattern}$`);
-        this.__enabledTextRegExp = new RegExp(`^${charPattern}*$`);
-      }
-    }
   };

package/src/input-mixin.d.ts

@@ -3,7 +3,7 @@
  * Copyright (c) 2021 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { Constructor } from '@open-wc/dedupe-mixin';
+import type { Constructor } from '@open-wc/dedupe-mixin';
 
 /**
  * A mixin to store the reference to an input element

package/src/label-mixin.d.ts

@@ -3,8 +3,8 @@
  * Copyright (c) 2021 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { Constructor } from '@open-wc/dedupe-mixin';
-import { LabelController } from './label-controller.js';
+import type { Constructor } from '@open-wc/dedupe-mixin';
+import type { LabelController } from './label-controller.js';
 
 /**
  * A mixin to provide label via corresponding property or named slot.

package/src/label-mixin.js

@@ -43,6 +43,12 @@ export const LabelMixin = dedupingMixin(
         super();
 
         this._labelController = new LabelController(this);
+      }
+
+      /** @protected */
+      ready() {
+        super.ready();
+
         this.addController(this._labelController);
       }
 

package/src/labelled-input-controller.d.ts

@@ -3,7 +3,7 @@
  * Copyright (c) 2021 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { ReactiveController } from 'lit';
+import type { ReactiveController } from 'lit';
 
 /**
  * A controller for linking a `<label>` element with an `<input>` element.

package/src/pattern-mixin.d.ts

@@ -3,12 +3,12 @@
  * Copyright (c) 2021 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { Constructor } from '@open-wc/dedupe-mixin';
-import { DisabledMixinClass } from '@vaadin/component-base/src/disabled-mixin.js';
-import { DelegateStateMixinClass } from './delegate-state-mixin.js';
-import { InputConstraintsMixinClass } from './input-constraints-mixin.js';
-import { InputMixinClass } from './input-mixin.js';
-import { ValidateMixinClass } from './validate-mixin.js';
+import type { Constructor } from '@open-wc/dedupe-mixin';
+import type { DisabledMixinClass } from '@vaadin/component-base/src/disabled-mixin.js';
+import type { DelegateStateMixinClass } from './delegate-state-mixin.js';
+import type { InputConstraintsMixinClass } from './input-constraints-mixin.js';
+import type { InputMixinClass } from './input-mixin.js';
+import type { ValidateMixinClass } from './validate-mixin.js';
 
 /**
  * A mixin to provide `pattern` and `preventInvalidInput` properties.
@@ -34,6 +34,7 @@ export declare class PatternMixinClass {
    * When set to true, user is prevented from typing a value that
    * conflicts with the given `pattern`.
    * @attr {boolean} prevent-invalid-input
+   * @deprecated Please use `allowedCharPattern` instead.
    */
   preventInvalidInput: boolean | null | undefined;
 }

package/src/pattern-mixin.js

@@ -29,9 +29,11 @@ export const PatternMixin = (superclass) =>
          * When set to true, user is prevented from typing a value that
          * conflicts with the given `pattern`.
          * @attr {boolean} prevent-invalid-input
+         * @deprecated Please use `allowedCharPattern` instead.
          */
         preventInvalidInput: {
           type: Boolean,
+          observer: '_preventInvalidInputChanged',
         },
       };
     }
@@ -68,4 +70,13 @@ export const PatternMixin = (superclass) =>
 
       super._onInput(event);
     }
+
+    /** @private */
+    _preventInvalidInputChanged(preventInvalidInput) {
+      if (preventInvalidInput) {
+        console.warn(
+          `WARNING: Since Vaadin 23.2, "preventInvalidInput" is deprecated. Please use "allowedCharPattern" instead.`,
+        );
+      }
+    }
   };

package/src/shadow-focus-mixin.d.ts

@@ -3,12 +3,12 @@
  * Copyright (c) 2021 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { Constructor } from '@open-wc/dedupe-mixin';
-import { DisabledMixinClass } from '@vaadin/component-base/src/disabled-mixin.js';
-import { FocusMixinClass } from '@vaadin/component-base/src/focus-mixin.js';
-import { KeyboardMixinClass } from '@vaadin/component-base/src/keyboard-mixin.js';
-import { TabindexMixinClass } from '@vaadin/component-base/src/tabindex-mixin.js';
-import { DelegateFocusMixinClass } from './delegate-focus-mixin.js';
+import type { Constructor } from '@open-wc/dedupe-mixin';
+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 { TabindexMixinClass } from '@vaadin/component-base/src/tabindex-mixin.js';
+import type { DelegateFocusMixinClass } from './delegate-focus-mixin.js';
 
 /**
  * A mixin to forward focus to an element in the shadow DOM.

package/src/slot-styles-mixin.d.ts

@@ -3,7 +3,7 @@
  * Copyright (c) 2021 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { Constructor } from '@open-wc/dedupe-mixin';
+import type { Constructor } from '@open-wc/dedupe-mixin';
 
 /**
  * Mixin to insert styles into the outer scope to handle slotted components.

package/src/slot-target-controller.d.ts

@@ -3,7 +3,7 @@
  * Copyright (c) 2021 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { ReactiveController } from 'lit';
+import type { ReactiveController } from 'lit';
 
 export class SlotTargetController implements ReactiveController {
   /**

package/src/slot-target-controller.js

@@ -41,7 +41,11 @@ export class SlotTargetController {
 
     // Ensure the content is up to date when host is connected
     // to handle e.g. mutating text content while disconnected.
-    this.__checkAndCopyNodesToSlotTarget();
+    // Note, `hostConnected()` is called twice if the controller
+    // is initialized in `ready()` when using `ControllerMixin`.
+    if (!this.__copying) {
+      this.__checkAndCopyNodesToSlotTarget();
+    }
   }
 
   /**

package/src/styles/clear-button-styles.d.ts

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

package/src/styles/field-shared-styles.d.ts

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

package/src/styles/input-field-container-styles.d.ts

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

package/src/styles/input-field-shared-styles.d.ts

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

package/src/text-area-controller.js

@@ -25,10 +25,7 @@ export class TextAreaController extends SlotController {
           node.setAttribute('name', name);
         }
 
-        // Ensure every instance has unique ID
-        const uniqueId = (TextAreaController._uniqueTextAreaId = 1 + TextAreaController._uniqueTextAreaId || 0);
-        host._textareaId = `${host.localName}-${uniqueId}`;
-        node.id = host._textareaId;
+        node.id = this.defaultId;
 
         if (typeof callback === 'function') {
           callback(node);

package/src/validate-mixin.d.ts

@@ -3,7 +3,7 @@
  * Copyright (c) 2021 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { Constructor } from '@open-wc/dedupe-mixin';
+import type { Constructor } from '@open-wc/dedupe-mixin';
 
 /**
  * A mixin to provide required state and validation logic.
@@ -30,4 +30,12 @@ export declare class ValidateMixinClass {
    * Returns true if the field value satisfies all constraints (if any).
    */
   checkValidity(): boolean;
+
+  /**
+   * Fired whenever the field is validated.
+   *
+   * @event validated
+   * @param {Object} detail
+   * @param {boolean} detail.valid the result of the validation.
+   */
 }

package/src/validate-mixin.js

@@ -36,12 +36,17 @@ export const ValidateMixin = dedupingMixin(
       }
 
       /**
-       * Returns true if field is valid, and sets `invalid` based on the field validity.
+       * Validates the field and sets the `invalid` property based on the result.
+       *
+       * The method fires a `validated` event with the result of the validation.
        *
        * @return {boolean} True if the value is valid.
        */
       validate() {
-        return !(this.invalid = !this.checkValidity());
+        const isValid = this.checkValidity();
+        this._setInvalid(!isValid);
+        this.dispatchEvent(new CustomEvent('validated', { detail: { valid: isValid } }));
+        return isValid;
       }
 
       /**
@@ -52,5 +57,34 @@ export const ValidateMixin = dedupingMixin(
       checkValidity() {
         return !this.required || !!this.value;
       }
+
+      /**
+       * @param {boolean} invalid
+       * @protected
+       */
+      _setInvalid(invalid) {
+        if (this._shouldSetInvalid(invalid)) {
+          this.invalid = invalid;
+        }
+      }
+
+      /**
+       * Override this method to define whether the given `invalid` state should be set.
+       *
+       * @param {boolean} _invalid
+       * @return {boolean}
+       * @protected
+       */
+      _shouldSetInvalid(_invalid) {
+        return true;
+      }
+
+      /**
+       * Fired whenever the field is validated.
+       *
+       * @event validated
+       * @param {Object} detail
+       * @param {boolean} detail.valid the result of the validation.
+       */
     },
 );

package/src/virtual-keyboard-controller.d.ts

@@ -3,7 +3,7 @@
  * Copyright (c) 2021 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { ReactiveController } from 'lit';
+import type { ReactiveController } from 'lit';
 
 /**
  * A controller which prevents the virtual keyboard from showing up on mobile devices