@vaadin/field-base 23.2.0-dev.53560527d → 23.2.0

package/README.md

@@ -4,7 +4,7 @@ A set of mixins and controllers used by Vaadin field components.
 
 ## Contributing
 
-Read the [contributing guide](https://vaadin.com/docs/latest/guide/contributing/overview) to learn about our development process, how to propose bugfixes and improvements, and how to test your changes to Vaadin components.
+Read the [contributing guide](https://vaadin.com/docs/latest/contributing/overview) to learn about our development process, how to propose bugfixes and improvements, and how to test your changes to Vaadin components.
 
 ## License
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/field-base",
-  "version": "23.2.0-dev.53560527d",
+  "version": "23.2.0",
   "publishConfig": {
     "access": "public"
   },
@@ -32,7 +32,7 @@
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/component-base": "23.2.0-dev.53560527d",
+    "@vaadin/component-base": "^23.2.0",
     "lit": "^2.0.0"
   },
   "devDependencies": {
@@ -40,5 +40,5 @@
     "@vaadin/testing-helpers": "^0.3.2",
     "sinon": "^13.0.2"
   },
-  "gitHead": "6c5c18369b09e22e76365d8a8a5e4bbb220f969b"
+  "gitHead": "8b1f5941f26ac41ca038e75e24c8584e331bc7a8"
 }

package/src/checked-mixin.d.ts

@@ -3,21 +3,21 @@
  * 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.
  */
 export declare function CheckedMixin<T extends Constructor<object>>(
   base: T,
-): T &
-  Constructor<CheckedMixinClass> &
+): Constructor<CheckedMixinClass> &
   Constructor<DelegateStateMixinClass> &
   Constructor<DisabledMixinClass> &
-  Constructor<InputMixinClass>;
+  Constructor<InputMixinClass> &
+  T;
 
 export declare class CheckedMixinClass {
   /**

package/src/checked-mixin.js

@@ -5,6 +5,7 @@
  */
 import { dedupingMixin } from '@polymer/polymer/lib/utils/mixin.js';
 import { DisabledMixin } from '@vaadin/component-base/src/disabled-mixin.js';
+import { isElementFocused } from '@vaadin/component-base/src/focus-utils.js';
 import { DelegateStateMixin } from './delegate-state-mixin.js';
 import { InputMixin } from './input-mixin.js';
 
@@ -39,11 +40,20 @@ export const CheckedMixin = dedupingMixin(
       }
 
       /**
+       * @param {Event} event
        * @protected
        * @override
        */
       _onChange(event) {
-        this._toggleChecked(event.target.checked);
+        const input = event.target;
+
+        this._toggleChecked(input.checked);
+
+        // Clicking the checkbox or radio-button in Safari
+        // does not make it focused, so we do it manually.
+        if (!isElementFocused(input)) {
+          input.focus();
+        }
       }
 
       /** @protected */

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

@@ -3,21 +3,21 @@
  * 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.
  */
 export declare function DelegateFocusMixin<T extends Constructor<HTMLElement>>(
   base: T,
-): T &
-  Constructor<DelegateFocusMixinClass> &
+): Constructor<DelegateFocusMixinClass> &
   Constructor<DisabledMixinClass> &
   Constructor<FocusMixinClass> &
-  Constructor<TabindexMixinClass>;
+  Constructor<TabindexMixinClass> &
+  T;
 
 export declare class DelegateFocusMixinClass {
   /**

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

@@ -3,14 +3,14 @@
  * 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.
  */
 export declare function DelegateStateMixin<T extends Constructor<HTMLElement>>(
   base: T,
-): T & Constructor<DelegateStateMixinClass>;
+): Constructor<DelegateStateMixinClass> & T;
 
 export declare class DelegateStateMixinClass {
   /**

package/src/error-controller.js

@@ -19,6 +19,7 @@ export class ErrorController extends SlotController {
 
         this.__updateHasError();
       },
+      true,
     );
   }
 

package/src/field-aria-controller.js

@@ -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 { addValueToAttribute, removeValueFromAttribute } from './utils.js';
+import { addValueToAttribute, removeValueFromAttribute } from '@vaadin/component-base/src/dom-utils.js';
 
 /**
  * A controller for managing ARIA attributes for a field element:
@@ -139,7 +139,7 @@ export class FieldAriaController {
       return;
     }
 
-    if (!this.__isGroupField) {
+    if (['input', 'textarea'].includes(this.__target.localName)) {
       // Native <input> or <textarea>, required is enough
       return;
     }

package/src/field-mixin.d.ts

@@ -3,21 +3,21 @@
  * 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.
  */
 export declare function FieldMixin<T extends Constructor<HTMLElement>>(
   superclass: T,
-): T &
-  Constructor<ControllerMixinClass> &
+): Constructor<ControllerMixinClass> &
   Constructor<FieldMixinClass> &
   Constructor<LabelMixinClass> &
-  Constructor<ValidateMixinClass>;
+  Constructor<ValidateMixinClass> &
+  T;
 
 export declare class FieldMixinClass {
   /**

package/src/field-mixin.js

@@ -164,7 +164,7 @@ export const FieldMixin = (superclass) =>
     }
 
     /**
-     * @param {boolean} required
+     * @param {boolean} invalid
      * @protected
      */
     _invalidChanged(invalid) {

package/src/helper-controller.d.ts

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 Vaadin Ltd.
+ * Copyright (c) 2021 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { SlotController } from '@vaadin/component-base/src/slot-controller.js';

package/src/helper-controller.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 Vaadin Ltd.
+ * Copyright (c) 2021 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { SlotController } from '@vaadin/component-base/src/slot-controller.js';
@@ -11,7 +11,7 @@ import { SlotController } from '@vaadin/component-base/src/slot-controller.js';
 export class HelperController extends SlotController {
   constructor(host) {
     // Do not provide slot factory, as only create helper lazily.
-    super(host, 'helper');
+    super(host, 'helper', null, null, true);
   }
 
   get helperId() {

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

@@ -3,23 +3,23 @@
  * 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.
  */
 export declare function InputConstraintsMixin<T extends Constructor<HTMLElement>>(
   base: T,
-): T &
-  Constructor<DelegateStateMixinClass> &
+): Constructor<DelegateStateMixinClass> &
   Constructor<DisabledMixinClass> &
   Constructor<InputConstraintsMixinClass> &
   Constructor<InputMixinClass> &
-  Constructor<ValidateMixinClass>;
+  Constructor<ValidateMixinClass> &
+  T;
 
 export declare class InputConstraintsMixinClass {
   /**

package/src/input-constraints-mixin.js

@@ -70,26 +70,32 @@ export const InputConstraintsMixin = dedupingMixin(
       _createConstraintsObserver() {
         // This complex observer needs to be added dynamically instead of using `static get observers()`
         // to make it possible to tweak this behavior in classes that apply this mixin.
-        this._createMethodObserver(`_constraintsChanged(${this.constructor.constraints.join(', ')})`);
+        this._createMethodObserver(`_constraintsChanged(stateTarget, ${this.constructor.constraints.join(', ')})`);
       }
 
       /**
        * Override this method to implement custom validation constraints.
+       * @param {HTMLElement | undefined} stateTarget
        * @param {unknown[]} constraints
        * @protected
        */
-      _constraintsChanged(...constraints) {
-        // Prevent marking field as invalid when setting required state
-        // or any other constraint before a user has entered the value.
-        if (!this.invalid) {
+      _constraintsChanged(stateTarget, ...constraints) {
+        // The input element's validity cannot be determined until
+        // all the necessary constraint attributes aren't set on it.
+        if (!stateTarget) {
           return;
         }
 
-        if (this._hasValidConstraints(constraints)) {
+        const hasConstraints = this._hasValidConstraints(constraints);
+        const isLastConstraintRemoved = this.__previousHasConstraints && !hasConstraints;
+
+        if ((this._hasValue || this.invalid) && hasConstraints) {
           this.validate();
-        } else {
-          this.invalid = false;
+        } else if (isLastConstraintRemoved) {
+          this._setInvalid(false);
         }
+
+        this.__previousHasConstraints = hasConstraints;
       }
 
       /**

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

@@ -3,26 +3,25 @@
  * 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.
  */
 export declare function InputControlMixin<T extends Constructor<HTMLElement>>(
   base: T,
-): T &
-  Constructor<ControllerMixinClass> &
+): Constructor<ControllerMixinClass> &
   Constructor<DelegateFocusMixinClass> &
   Constructor<DelegateStateMixinClass> &
   Constructor<DisabledMixinClass> &
@@ -33,7 +32,8 @@ export declare function InputControlMixin<T extends Constructor<HTMLElement>>(
   Constructor<InputMixinClass> &
   Constructor<KeyboardMixinClass> &
   Constructor<LabelMixinClass> &
-  Constructor<ValidateMixinClass>;
+  Constructor<ValidateMixinClass> &
+  T;
 
 export declare class InputControlMixinClass {
   /**

package/src/input-controller.js

@@ -29,6 +29,7 @@ export class InputController extends SlotController {
           callback(node);
         }
       },
+      true,
     );
   }
 }

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

@@ -3,27 +3,26 @@
  * 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.
  */
 export declare function InputFieldMixin<T extends Constructor<HTMLElement>>(
   base: T,
-): T &
-  Constructor<ControllerMixinClass> &
+): Constructor<ControllerMixinClass> &
   Constructor<DelegateFocusMixinClass> &
   Constructor<DelegateStateMixinClass> &
   Constructor<DisabledMixinClass> &
@@ -35,7 +34,8 @@ export declare function InputFieldMixin<T extends Constructor<HTMLElement>>(
   Constructor<InputMixinClass> &
   Constructor<KeyboardMixinClass> &
   Constructor<LabelMixinClass> &
-  Constructor<ValidateMixinClass>;
+  Constructor<ValidateMixinClass> &
+  T;
 
 export declare class InputFieldMixinClass {
   /**
@@ -52,7 +52,7 @@ export declare class InputFieldMixinClass {
    * on: Enable autocorrection.
    * off: Disable autocorrection.
    */
-  autocorrect: 'on' | 'off' | undefined;
+  autocorrect: 'off' | 'on' | undefined;
 
   /**
    * This is a property supported by Safari and Chrome that is used to control whether
@@ -63,5 +63,5 @@ export declare class InputFieldMixinClass {
    * sentences: Sentences capitalization.
    * none: No capitalization.
    */
-  autocapitalize: 'on' | 'off' | 'none' | 'characters' | 'words' | 'sentences' | undefined;
+  autocapitalize: 'characters' | 'none' | 'off' | 'on' | 'sentences' | 'words' | undefined;
 }

package/src/input-field-mixin.js

@@ -85,15 +85,17 @@ export const InputFieldMixin = (superclass) =>
     }
 
     /**
-     * Override an event listener from `DelegateFocusMixin`.
-     * @param {FocusEvent} event
+     * Override an event listener from `FocusMixin`.
+     * @param {boolean} focused
      * @protected
      * @override
      */
-    _onBlur(event) {
-      super._onBlur(event);
+    _setFocused(focused) {
+      super._setFocused(focused);
 
-      this.validate();
+      if (!focused) {
+        this.validate();
+      }
     }
 
     /**
@@ -112,14 +114,20 @@ export const InputFieldMixin = (superclass) =>
     }
 
     /**
-     * Override a method from `InputMixin` to validate the field
+     * Override an observer from `InputMixin` to validate the field
      * when a new value is set programmatically.
-     * @param {string} value
+     *
+     * @param {string | undefined} newValue
+     * @param {string | undefined} oldValue
      * @protected
      * @override
      */
-    _forwardInputValue(value) {
-      super._forwardInputValue(value);
+    _valueChanged(newValue, oldValue) {
+      super._valueChanged(newValue, oldValue);
+
+      if (oldValue === undefined) {
+        return;
+      }
 
       if (this.invalid) {
         this.validate();

package/src/input-mixin.d.ts

@@ -3,13 +3,13 @@
  * 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
  * and add input and change event listeners to it.
  */
-export declare function InputMixin<T extends Constructor<HTMLElement>>(base: T): T & Constructor<InputMixinClass>;
+export declare function InputMixin<T extends Constructor<HTMLElement>>(base: T): Constructor<InputMixinClass> & T;
 
 export declare class InputMixinClass {
   /**
@@ -28,6 +28,12 @@ export declare class InputMixinClass {
    */
   value: string;
 
+  /**
+   * Indicates whether the value is different from the default one.
+   * Override if the `value` property has a type other than `string`.
+   */
+  protected readonly _hasValue: boolean;
+
   /**
    * Clear the value of the field.
    */
@@ -47,7 +53,7 @@ export declare class InputMixinClass {
 
   protected _setInputElement(input: HTMLElement): void;
 
-  protected _toggleHasValue(value: boolean): void;
+  protected _toggleHasValue(hasValue: boolean): void;
 
   protected _valueChanged(value?: string, oldValue?: string): void;
 }

package/src/input-mixin.js

@@ -52,13 +52,23 @@ export const InputMixin = dedupingMixin(
             observer: '_valueChanged',
             notify: true,
           },
+
+          /**
+           * When true, the input element has a non-empty value entered by the user.
+           * @protected
+           */
+          _hasInputValue: {
+            type: Boolean,
+            value: false,
+            observer: '_hasInputValueChanged',
+          },
         };
       }
 
       constructor() {
         super();
 
-        this._boundOnInput = this._onInput.bind(this);
+        this._boundOnInput = this.__onInput.bind(this);
         this._boundOnChange = this._onChange.bind(this);
       }
 
@@ -73,6 +83,7 @@ export const InputMixin = dedupingMixin(
        * Add event listeners to the input element instance.
        * Override this method to add custom listeners.
        * @param {!HTMLElement} input
+       * @protected
        */
       _addInputListeners(input) {
         input.addEventListener('input', this._boundOnInput);
@@ -82,6 +93,7 @@ export const InputMixin = dedupingMixin(
       /**
        * Remove event listeners from the input element instance.
        * @param {!HTMLElement} input
+       * @protected
        */
       _removeInputListeners(input) {
         input.removeEventListener('input', this._boundOnInput);
@@ -95,7 +107,6 @@ export const InputMixin = dedupingMixin(
        * for example to skip this in certain conditions.
        * @param {string} value
        * @protected
-       * @override
        */
       _forwardInputValue(value) {
         // Value might be set before an input element is initialized.
@@ -112,7 +123,11 @@ export const InputMixin = dedupingMixin(
         }
       }
 
-      /** @protected */
+      /**
+       * @param {HTMLElement | undefined} input
+       * @param {HTMLElement | undefined} oldInput
+       * @protected
+       */
       _inputElementChanged(input, oldInput) {
         if (input) {
           this._addInputListeners(input);
@@ -121,17 +136,47 @@ export const InputMixin = dedupingMixin(
         }
       }
 
+      /**
+       * Observer to notify about the change of private property.
+       *
+       * @private
+       */
+      _hasInputValueChanged(hasValue, oldHasValue) {
+        if (hasValue || oldHasValue) {
+          this.dispatchEvent(new CustomEvent('has-input-value-changed'));
+        }
+      }
+
+      /**
+       * An input event listener used to update `_hasInputValue` property.
+       * Do not override this method.
+       *
+       * @param {Event} event
+       * @private
+       */
+      __onInput(event) {
+        // In the case a custom web component is passed as `inputElement`,
+        // the actual native input element, on which the event occurred,
+        // can be inside shadow trees.
+        const target = event.composedPath()[0];
+        this._hasInputValue = target.value.length > 0;
+        this._onInput(event);
+      }
+
       /**
        * An input event listener used to update the field value.
-       * Override this method with an actual implementation.
-       * @param {Event} _event
+       *
+       * @param {Event} event
        * @protected
-       * @override
        */
       _onInput(event) {
+        // In the case a custom web component is passed as `inputElement`,
+        // the actual native input element, on which the event occurred,
+        // can be inside shadow trees.
+        const target = event.composedPath()[0];
         // Ignore fake input events e.g. used by clear button.
         this.__userInput = event.isTrusted;
-        this.value = event.target.value;
+        this.value = target.value;
         this.__userInput = false;
       }
 
@@ -140,12 +185,12 @@ export const InputMixin = dedupingMixin(
        * Override this method with an actual implementation.
        * @param {Event} _event
        * @protected
-       * @override
        */
       _onChange(_event) {}
 
       /**
        * Toggle the has-value attribute based on the value property.
+       *
        * @param {boolean} hasValue
        * @protected
        */
@@ -158,10 +203,9 @@ export const InputMixin = dedupingMixin(
        * @param {string | undefined} newVal
        * @param {string | undefined} oldVal
        * @protected
-       * @override
        */
       _valueChanged(newVal, oldVal) {
-        this._toggleHasValue(newVal !== '' && newVal != null);
+        this._toggleHasValue(this._hasValue);
 
         // Setting initial value to empty string, do nothing.
         if (newVal === '' && oldVal === undefined) {
@@ -176,5 +220,15 @@ export const InputMixin = dedupingMixin(
         // Setting a value programmatically, sync it to input element.
         this._forwardInputValue(newVal);
       }
+
+      /**
+       * Indicates whether the value is different from the default one.
+       * Override if the `value` property has a type other than `string`.
+       *
+       * @protected
+       */
+      get _hasValue() {
+        return this.value != null && this.value !== '';
+      }
     },
 );

package/src/label-controller.js

@@ -23,6 +23,7 @@ export class LabelController extends SlotController {
 
         this.__observeLabel(node);
       },
+      true,
     );
   }
 

package/src/label-mixin.d.ts

@@ -3,13 +3,13 @@
  * 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.
  */
-export declare function LabelMixin<T extends Constructor<HTMLElement>>(base: T): T & Constructor<LabelMixinClass>;
+export declare function LabelMixin<T extends Constructor<HTMLElement>>(base: T): Constructor<LabelMixinClass> & T;
 
 export declare class LabelMixinClass {
   /**

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,25 +3,25 @@
  * 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.
  */
 export declare function PatternMixin<T extends Constructor<HTMLElement>>(
   base: T,
-): T &
-  Constructor<DelegateStateMixinClass> &
+): Constructor<DelegateStateMixinClass> &
   Constructor<DisabledMixinClass> &
   Constructor<InputConstraintsMixinClass> &
   Constructor<InputMixinClass> &
   Constructor<PatternMixinClass> &
-  Constructor<ValidateMixinClass>;
+  Constructor<ValidateMixinClass> &
+  T;
 
 export declare class PatternMixinClass {
   /**

package/src/pattern-mixin.js

@@ -64,6 +64,7 @@ export const PatternMixin = (superclass) =>
     /**
      * @param {Event} event
      * @protected
+     * @override
      */
     _onInput(event) {
       this._checkInputValue();

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

@@ -3,21 +3,21 @@
  * 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.
  */
 export declare function ShadowFocusMixin<T extends Constructor<HTMLElement>>(
   base: T,
-): T &
-  Constructor<DelegateFocusMixinClass> &
+): Constructor<DelegateFocusMixinClass> &
   Constructor<DisabledMixinClass> &
   Constructor<FocusMixinClass> &
   Constructor<KeyboardMixinClass> &
-  Constructor<TabindexMixinClass>;
+  Constructor<TabindexMixinClass> &
+  T;

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.
@@ -11,7 +11,7 @@ import { Constructor } from '@open-wc/dedupe-mixin';
  */
 export declare function SlotStylesMixin<T extends Constructor<HTMLElement>>(
   base: T,
-): T & Constructor<SlotStylesMixinClass>;
+): Constructor<SlotStylesMixinClass> & T;
 
 export declare class SlotStylesMixinClass {
   /**

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/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

@@ -31,6 +31,7 @@ export class TextAreaController extends SlotController {
           callback(node);
         }
       },
+      true,
     );
   }
 }

package/src/validate-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 type { Constructor } from '@open-wc/dedupe-mixin';
 
 /**
  * A mixin to provide required state and validation logic.
  */
-export declare function ValidateMixin<T extends Constructor<HTMLElement>>(base: T): T & Constructor<ValidateMixinClass>;
+export declare function ValidateMixin<T extends Constructor<HTMLElement>>(base: T): Constructor<ValidateMixinClass> & T;
 
 export declare class ValidateMixinClass {
   /**
@@ -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,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 { ReactiveController } from 'lit';
+import type { ReactiveController } from 'lit';
 
 /**
  * A controller which prevents the virtual keyboard from showing up on mobile devices
  * when the field's overlay is closed.
  */
 export class VirtualKeyboardController implements ReactiveController {
-  constructor(host: { inputElement?: HTMLElement; opened: boolean } & HTMLElement);
+  constructor(host: HTMLElement & { inputElement?: HTMLElement; opened: boolean });
 }

package/src/utils.d.ts

@@ -1,16 +0,0 @@
-/**
- * @license
- * Copyright (c) 2021 - 2022 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-
-/**
- * Adds a value to an attribute containing space-delimited values.
- */
-export declare function addValueToAttribute(element: HTMLElement, attr: string, value: string): void;
-
-/**
- * Removes a value from an attribute containing space-delimited values.
- * If the value is the last one, the whole attribute is removed.
- */
-export declare function removeValueFromAttribute(element: HTMLElement, attr: string, value: string): void;

package/src/utils.js

@@ -1,56 +0,0 @@
-/**
- * @license
- * Copyright (c) 2021 - 2022 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-
-/**
- * @param {string} value
- * @return {Set<string>}
- */
-function deserializeAttributeValue(value) {
-  if (!value) {
-    return new Set();
-  }
-
-  return new Set(value.split(' '));
-}
-
-/**
- * @param {Set<string>} values
- * @return {string}
- */
-function serializeAttributeValue(values) {
-  return [...values].join(' ');
-}
-
-/**
- * Adds a value to an attribute containing space-delimited values.
- *
- * @param {HTMLElement} element
- * @param {string} attr
- * @param {string} value
- */
-export function addValueToAttribute(element, attr, value) {
-  const values = deserializeAttributeValue(element.getAttribute(attr));
-  values.add(value);
-  element.setAttribute(attr, serializeAttributeValue(values));
-}
-
-/**
- * Removes a value from an attribute containing space-delimited values.
- * If the value is the last one, the whole attribute is removed.
- *
- * @param {HTMLElement} element
- * @param {string} attr
- * @param {string} value
- */
-export function removeValueFromAttribute(element, attr, value) {
-  const values = deserializeAttributeValue(element.getAttribute(attr));
-  values.delete(value);
-  if (values.size === 0) {
-    element.removeAttribute(attr);
-    return;
-  }
-  element.setAttribute(attr, serializeAttributeValue(values));
-}