@vaadin/field-base 22.0.0-alpha9 → 22.0.0

package/README.md

@@ -1,7 +1,14 @@
 # @vaadin/field-base
 
-A set of mixins for using by Vaadin field components.
+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.
 
 ## License
 
 Apache License 2.0
+
+Vaadin collects usage statistics at development time to improve this product.
+For details and to opt-out, see https://github.com/vaadin/vaadin-usage-statistics.

package/index.d.ts

@@ -1,12 +1,13 @@
-export { AriaLabelController } from './src/aria-label-controller.js';
 export { CheckedMixin } from './src/checked-mixin.js';
 export { DelegateFocusMixin } from './src/delegate-focus-mixin.js';
 export { DelegateStateMixin } from './src/delegate-state-mixin.js';
+export { FieldAriaController } from './src/field-aria-controller.js';
 export { FieldMixin } from './src/field-mixin.js';
 export { InputController } from './src/input-controller.js';
 export { InputControlMixin } from './src/input-control-mixin.js';
 export { InputFieldMixin } from './src/input-field-mixin.js';
 export { InputMixin } from './src/input-mixin.js';
+export { LabelledInputController } from './src/labelled-input-controller.js';
 export { LabelMixin } from './src/label-mixin.js';
 export { PatternMixin } from './src/pattern-mixin.js';
 export { ShadowFocusMixin } from './src/shadow-focus-mixin.js';

package/index.js

@@ -1,12 +1,13 @@
-export { AriaLabelController } from './src/aria-label-controller.js';
 export { CheckedMixin } from './src/checked-mixin.js';
 export { DelegateFocusMixin } from './src/delegate-focus-mixin.js';
 export { DelegateStateMixin } from './src/delegate-state-mixin.js';
+export { FieldAriaController } from './src/field-aria-controller.js';
 export { FieldMixin } from './src/field-mixin.js';
 export { InputController } from './src/input-controller.js';
 export { InputControlMixin } from './src/input-control-mixin.js';
 export { InputFieldMixin } from './src/input-field-mixin.js';
 export { InputMixin } from './src/input-mixin.js';
+export { LabelledInputController } from './src/labelled-input-controller.js';
 export { LabelMixin } from './src/label-mixin.js';
 export { PatternMixin } from './src/pattern-mixin.js';
 export { ShadowFocusMixin } from './src/shadow-focus-mixin.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/field-base",
-  "version": "22.0.0-alpha9",
+  "version": "22.0.0",
   "publishConfig": {
     "access": "public"
   },
@@ -29,14 +29,15 @@
     "web-component"
   ],
   "dependencies": {
+    "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/component-base": "22.0.0-alpha9",
+    "@vaadin/component-base": "^22.0.0",
     "lit": "^2.0.0"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
-    "@vaadin/testing-helpers": "^0.3.0",
+    "@vaadin/testing-helpers": "^0.3.2",
     "sinon": "^9.2.1"
   },
-  "gitHead": "6e8c899dc65918f97e3c0acb2076122c4b2ef274"
+  "gitHead": "b668e9b1a975227fbe34beb70d1cd5b03dce2348"
 }

package/src/checked-mixin.d.ts

@@ -3,19 +3,27 @@
  * Copyright (c) 2021 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { DisabledMixin } from '@vaadin/component-base/src/disabled-mixin.js';
-import { DelegateStateMixin } from './delegate-state-mixin.js';
-import { InputMixin } from './input-mixin.js';
+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';
 
 /**
  * A mixin to manage the checked state.
  */
-declare function CheckedMixin<T extends new (...args: any[]) => {}>(base: T): T & CheckedMixinConstructor;
+export declare function CheckedMixin<T extends Constructor<object>>(
+  base: T
+): T &
+  Constructor<CheckedMixinClass> &
+  Constructor<DelegateStateMixinClass> &
+  Constructor<DisabledMixinClass> &
+  Constructor<InputMixinClass>;
 
-interface CheckedMixinConstructor {
-  new (...args: any[]): CheckedMixin;
-}
-
-interface CheckedMixin extends DelegateStateMixin, DisabledMixin, InputMixin {}
+export declare class CheckedMixinClass {
+  /**
+   * True if the element is checked.
+   */
+  checked: boolean;
 
-export { CheckedMixinConstructor, CheckedMixin };
+  protected _toggleChecked(checked: boolean): void;
+}

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

@@ -3,19 +3,18 @@
  * Copyright (c) 2021 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { DisabledMixin } from '@vaadin/component-base/src/disabled-mixin.js';
-import { FocusMixin } from '@vaadin/component-base/src/focus-mixin.js';
+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';
 
 /**
  * A mixin to forward focus to an element in the light DOM.
  */
-declare function DelegateFocusMixin<T extends new (...args: any[]) => {}>(base: T): T & DelegateFocusMixinConstructor;
+export declare function DelegateFocusMixin<T extends Constructor<HTMLElement>>(
+  base: T
+): T & Constructor<DelegateFocusMixinClass> & Constructor<DisabledMixinClass> & Constructor<FocusMixinClass>;
 
-interface DelegateFocusMixinConstructor {
-  new (...args: any[]): DelegateFocusMixin;
-}
-
-interface DelegateFocusMixin extends DisabledMixin, FocusMixin {
+export declare class DelegateFocusMixinClass {
   /**
    * Specify that this control should have input focus when the page loads.
    */
@@ -28,7 +27,17 @@ interface DelegateFocusMixin extends DisabledMixin, FocusMixin {
    * Any component implementing this mixin is expected to provide it
    * by using `this._setFocusElement(input)` Polymer API.
    */
-  readonly focusElement: Element | null | undefined;
-}
+  readonly focusElement: HTMLElement | null | undefined;
+
+  protected _addFocusListeners(element: HTMLElement): void;
+
+  protected _removeFocusListeners(element: HTMLElement): void;
 
-export { DelegateFocusMixinConstructor, DelegateFocusMixin };
+  protected _focusElementChanged(element: HTMLElement, oldElement: HTMLElement): void;
+
+  protected _onBlur(event: FocusEvent): void;
+
+  protected _onFocus(event: FocusEvent): void;
+
+  protected _setFocusElement(element: HTMLElement): void;
+}

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

@@ -3,21 +3,18 @@
  * Copyright (c) 2021 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';
 
 /**
  * A mixin to delegate properties and attributes to a target element.
  */
-declare function DelegateStateMixin<T extends new (...args: any[]) => {}>(base: T): T & DelegateStateMixinConstructor;
+export declare function DelegateStateMixin<T extends Constructor<HTMLElement>>(
+  base: T
+): T & Constructor<DelegateStateMixinClass>;
 
-interface DelegateStateMixinConstructor {
-  new (...args: any[]): DelegateStateMixin;
-}
-
-interface DelegateStateMixin {
+export declare class DelegateStateMixinClass {
   /**
    * A target element to which attributes and properties are delegated.
    */
   stateTarget: HTMLElement | null;
 }
-
-export { DelegateStateMixinConstructor, DelegateStateMixin };

package/src/field-aria-controller.d.ts

@@ -0,0 +1,56 @@
+/**
+ * @license
+ * Copyright (c) 2021 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+
+/**
+ * A controller for managing ARIA attributes for a field element:
+ * either the component itself or slotted `<input>` element.
+ */
+export class FieldAriaController {
+  constructor(host: HTMLElement);
+
+  /**
+   * The controller host element.
+   */
+  host: HTMLElement;
+
+  /**
+   * Sets a target element to which ARIA attributes are added.
+   */
+  setTarget(target: HTMLElement): void;
+
+  /**
+   * Toggles the `aria-required` attribute on the target element
+   * if the target is the host component (e.g. a field group).
+   * Otherwise, it does nothing.
+   */
+  setRequired(required: boolean): void;
+
+  /**
+   * Links the target element with a slotted label element
+   * via the target's attribute `aria-labelledby`.
+   *
+   * To unlink the previous slotted label element, pass `null` as `labelId`.
+   */
+  setLabelId(labelId: string | null): void;
+
+  /**
+   * Links the target element with a slotted error element via the target's attribute:
+   * - `aria-labelledby` if the target is the host component (e.g a field group).
+   * - `aria-describedby` otherwise.
+   *
+   * To unlink the previous slotted error element, pass `null` as `errorId`.
+   */
+  setErrorId(errorId: string | null): void;
+
+  /**
+   * Links the target element with a slotted helper element via the target's attribute:
+   * - `aria-labelledby` if the target is the host component (e.g a field group).
+   * - `aria-describedby` otherwise.
+   *
+   * To unlink the previous slotted helper element, pass `null` as `helperId`.
+   */
+  setHelperId(helperId: string | null): void;
+}

package/src/field-aria-controller.js

@@ -0,0 +1,175 @@
+/**
+ * @license
+ * Copyright (c) 2021 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+
+/**
+ * A controller for managing ARIA attributes for a field element:
+ * either the component itself or slotted `<input>` element.
+ */
+export class FieldAriaController {
+  constructor(host) {
+    this.host = host;
+    this.__required = false;
+  }
+
+  /**
+   * Sets a target element to which ARIA attributes are added.
+   *
+   * @param {HTMLElement} target
+   */
+  setTarget(target) {
+    this.__target = target;
+    this.__setAriaRequiredAttribute(this.__required);
+    this.__setLabelIdToAriaAttribute(this.__labelId);
+    this.__setErrorIdToAriaAttribute(this.__errorId);
+    this.__setHelperIdToAriaAttribute(this.__helperId);
+  }
+
+  /**
+   * Toggles the `aria-required` attribute on the target element
+   * if the target is the host component (e.g. a field group).
+   * Otherwise, it does nothing.
+   *
+   * @param {boolean} required
+   */
+  setRequired(required) {
+    this.__setAriaRequiredAttribute(required);
+    this.__required = required;
+  }
+
+  /**
+   * Links the target element with a slotted label element
+   * via the target's attribute `aria-labelledby`.
+   *
+   * To unlink the previous slotted label element, pass `null` as `labelId`.
+   *
+   * @param {string | null} labelId
+   */
+  setLabelId(labelId) {
+    this.__setLabelIdToAriaAttribute(labelId, this.__labelId);
+    this.__labelId = labelId;
+  }
+
+  /**
+   * Links the target element with a slotted error element via the target's attribute:
+   * - `aria-labelledby` if the target is the host component (e.g a field group).
+   * - `aria-describedby` otherwise.
+   *
+   * To unlink the previous slotted error element, pass `null` as `errorId`.
+   *
+   * @param {string | null} errorId
+   */
+  setErrorId(errorId) {
+    this.__setErrorIdToAriaAttribute(errorId, this.__errorId);
+    this.__errorId = errorId;
+  }
+
+  /**
+   * Links the target element with a slotted helper element via the target's attribute:
+   * - `aria-labelledby` if the target is the host component (e.g a field group).
+   * - `aria-describedby` otherwise.
+   *
+   * To unlink the previous slotted helper element, pass `null` as `helperId`.
+   *
+   * @param {string | null} helperId
+   */
+  setHelperId(helperId) {
+    this.__setHelperIdToAriaAttribute(helperId, this.__helperId);
+    this.__helperId = helperId;
+  }
+
+  /**
+   * `true` if the target element is the host component itself, `false` otherwise.
+   *
+   * @return {boolean}
+   * @private
+   */
+  get __isGroupField() {
+    return this.__target === this.host;
+  }
+
+  /**
+   * @param {string | null | undefined} labelId
+   * @param {string | null | undefined} oldLabelId
+   * @private
+   */
+  __setLabelIdToAriaAttribute(labelId, oldLabelId) {
+    this.__setAriaAttributeId('aria-labelledby', labelId, oldLabelId);
+  }
+
+  /**
+   * @param {string | null | undefined} errorId
+   * @param {string | null | undefined} oldErrorId
+   * @private
+   */
+  __setErrorIdToAriaAttribute(errorId, oldErrorId) {
+    // For groups, add all IDs to aria-labelledby rather than aria-describedby -
+    // that should guarantee that it's announced when the group is entered.
+    if (this.__isGroupField) {
+      this.__setAriaAttributeId('aria-labelledby', errorId, oldErrorId);
+    } else {
+      this.__setAriaAttributeId('aria-describedby', errorId, oldErrorId);
+    }
+  }
+
+  /**
+   * @param {string | null | undefined} helperId
+   * @param {string | null | undefined} oldHelperId
+   * @private
+   */
+  __setHelperIdToAriaAttribute(helperId, oldHelperId) {
+    // For groups, add all IDs to aria-labelledby rather than aria-describedby -
+    // that should guarantee that it's announced when the group is entered.
+    if (this.__isGroupField) {
+      this.__setAriaAttributeId('aria-labelledby', helperId, oldHelperId);
+    } else {
+      this.__setAriaAttributeId('aria-describedby', helperId, oldHelperId);
+    }
+  }
+
+  /**
+   * @param {boolean} required
+   * @private
+   */
+  __setAriaRequiredAttribute(required) {
+    if (!this.__target) {
+      return;
+    }
+
+    if (!this.__isGroupField) {
+      // native <input> or <textarea>, required is enough
+      return;
+    }
+
+    if (required) {
+      this.__target.setAttribute('aria-required', 'true');
+    } else {
+      this.__target.removeAttribute('aria-required');
+    }
+  }
+
+  /**
+   * @param {string | null | undefined} newId
+   * @param {string | null | undefined} oldId
+   * @private
+   */
+  __setAriaAttributeId(attr, newId, oldId) {
+    if (!this.__target) {
+      return;
+    }
+
+    const value = this.__target.getAttribute(attr);
+    const ids = value ? new Set(value.split(' ')) : new Set();
+
+    if (oldId) {
+      ids.delete(oldId);
+    }
+    if (newId) {
+      ids.add(newId);
+    }
+
+    this.__target.setAttribute(attr, [...ids].join(' '));
+  }
+}

package/src/field-mixin.d.ts

@@ -3,19 +3,23 @@
  * Copyright (c) 2021 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { LabelMixin } from './label-mixin.js';
-import { ValidateMixin } from './validate-mixin.js';
+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';
 
 /**
  * A mixin to provide common field logic: label, error message and helper text.
  */
-declare function FieldMixin<T extends new (...args: any[]) => {}>(base: T): T & FieldMixinConstructor;
+export declare function FieldMixin<T extends Constructor<HTMLElement>>(
+  superclass: T
+): T &
+  Constructor<ControllerMixinClass> &
+  Constructor<FieldMixinClass> &
+  Constructor<LabelMixinClass> &
+  Constructor<ValidateMixinClass>;
 
-interface FieldMixinConstructor {
-  new (...args: any[]): FieldMixin;
-}
-
-interface FieldMixin extends LabelMixin, ValidateMixin {
+export declare class FieldMixinClass {
   /**
    * A target element to which ARIA attributes are set.
    */
@@ -29,11 +33,25 @@ interface FieldMixin extends LabelMixin, ValidateMixin {
   helperText: string | null | undefined;
 
   /**
-   * Error to show when the field is invalid.
+   * Error message to show when the field is invalid.
    *
    * @attr {string} error-message
    */
-  errorMessage: string;
-}
+  errorMessage: string | null | undefined;
+
+  protected readonly _errorNode: HTMLElement;
+
+  protected readonly _helperNode?: HTMLElement;
+
+  protected _helperTextChanged(helperText: string | null | undefined): void;
 
-export { FieldMixin, FieldMixinConstructor };
+  protected _ariaTargetChanged(target: HTMLElement): void;
+
+  protected _updateErrorMessage(invalid: boolean, errorMessage: string | null | undefined): void;
+
+  protected _requiredChanged(required: boolean): void;
+
+  protected _helperIdChanged(helperId: string): void;
+
+  protected _invalidChanged(invalid: boolean): void;
+}

package/src/field-mixin.js

@@ -4,8 +4,10 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { FlattenedNodesObserver } from '@polymer/polymer/lib/utils/flattened-nodes-observer.js';
-import { Debouncer } from '@vaadin/component-base/src/debounce.js';
 import { animationFrame } from '@vaadin/component-base/src/async.js';
+import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
+import { Debouncer } from '@vaadin/component-base/src/debounce.js';
+import { FieldAriaController } from './field-aria-controller.js';
 import { LabelMixin } from './label-mixin.js';
 import { ValidateMixin } from './validate-mixin.js';
 
@@ -13,11 +15,12 @@ import { ValidateMixin } from './validate-mixin.js';
  * A mixin to provide common field logic: label, error message and helper text.
  *
  * @polymerMixin
+ * @mixes ControllerMixin
  * @mixes LabelMixin
  * @mixes ValidateMixin
  */
 export const FieldMixin = (superclass) =>
-  class FieldMixinClass extends ValidateMixin(LabelMixin(superclass)) {
+  class FieldMixinClass extends ValidateMixin(LabelMixin(ControllerMixin(superclass))) {
     static get properties() {
       return {
         /**
@@ -59,7 +62,6 @@ export const FieldMixin = (superclass) =>
         'error-message': () => {
           const error = document.createElement('div');
           error.textContent = this.errorMessage;
-          error.setAttribute('aria-live', 'assertive');
           return error;
         }
       };
@@ -67,27 +69,30 @@ export const FieldMixin = (superclass) =>
 
     static get observers() {
       return [
-        '__ariaChanged(invalid, _helperId)',
         '__observeOffsetHeight(errorMessage, invalid, label, helperText)',
-        '_updateErrorMessage(invalid, errorMessage)'
+        '_updateErrorMessage(invalid, errorMessage)',
+        '_invalidChanged(invalid)',
+        '_requiredChanged(required)',
+        '_helperIdChanged(_helperId)'
       ];
     }
 
-    /** @protected */
+    /**
+     * @protected
+     * @return {HTMLElement}
+     */
     get _errorNode() {
       return this._getDirectSlotChild('error-message');
     }
 
-    /** @protected */
+    /**
+     * @protected
+     * @return {HTMLElement}
+     */
     get _helperNode() {
       return this._getDirectSlotChild('helper');
     }
 
-    /** @protected */
-    get _ariaAttr() {
-      return 'aria-describedby';
-    }
-
     constructor() {
       super();
 
@@ -98,6 +103,8 @@ export const FieldMixin = (superclass) =>
 
       // Save generated ID to restore later
       this.__savedHelperId = this._helperId;
+
+      this._fieldAriaController = new FieldAriaController(this);
     }
 
     /** @protected */
@@ -158,6 +165,8 @@ export const FieldMixin = (superclass) =>
           this.__applyDefaultHelper(this.helperText);
         }
       });
+
+      this.addController(this._fieldAriaController);
     }
 
     /** @private */
@@ -169,14 +178,20 @@ export const FieldMixin = (superclass) =>
       }
     }
 
-    /** @private */
+    /**
+     * @param {HTMLElement} helper
+     * @private
+     */
     __applyCustomHelper(helper) {
       this.__updateHelperId(helper);
       this._currentHelper = helper;
       this.__toggleHasHelper(helper.children.length > 0 || this.__isNotEmpty(helper.textContent));
     }
 
-    /** @private */
+    /**
+     * @param {string} helperText
+     * @private
+     */
     __isNotEmpty(helperText) {
       return helperText && helperText.trim() !== '';
     }
@@ -192,13 +207,17 @@ export const FieldMixin = (superclass) =>
       }
 
       helper.id = this.__savedHelperId;
+      this._helperId = helper.id;
       this.appendChild(helper);
       this._currentHelper = helper;
 
       return helper;
     }
 
-    /** @private */
+    /**
+     * @param {string} helperText
+     * @private
+     */
     __applyDefaultHelper(helperText) {
       let helper = this._helperNode;
 
@@ -216,7 +235,10 @@ export const FieldMixin = (superclass) =>
       this.__toggleHasHelper(hasHelperText);
     }
 
-    /** @private */
+    /**
+     * @param {boolean} hasHelper
+     * @private
+     */
     __toggleHasHelper(hasHelper) {
       this.toggleAttribute('has-helper', hasHelper);
     }
@@ -246,8 +268,25 @@ export const FieldMixin = (superclass) =>
       );
     }
 
+    /**
+     * @protected
+     * @override
+     */
+    _toggleHasLabelAttribute() {
+      super._toggleHasLabelAttribute();
+
+      // Label ID should be only added when the label content is present.
+      // Otherwise, it may conflict with an `aria-label` attribute possibly added by the user.
+      if (this.hasAttribute('has-label')) {
+        this._fieldAriaController.setLabelId(this._labelId);
+      } else {
+        this._fieldAriaController.setLabelId(null);
+      }
+    }
+
     /**
      * @param {boolean} invalid
+     * @param {string | null | undefined} errorMessage
      * @protected
      */
     _updateErrorMessage(invalid, errorMessage) {
@@ -263,9 +302,20 @@ export const FieldMixin = (superclass) =>
       const hasError = Boolean(invalid && errorMessage);
       error.textContent = hasError ? errorMessage : '';
       this.toggleAttribute('has-error-message', hasError);
+
+      // Role alert will make the error message announce immediately
+      // as the field becomes invalid
+      if (hasError) {
+        error.setAttribute('role', 'alert');
+      } else {
+        error.removeAttribute('role');
+      }
     }
 
-    /** @private */
+    /**
+     * @param {HTMLElement} customHelper
+     * @private
+     */
     __updateHelperId(customHelper) {
       let newId;
 
@@ -279,39 +329,51 @@ export const FieldMixin = (superclass) =>
       this._helperId = newId;
     }
 
-    /** @protected */
+    /**
+     * @param {string} helperText
+     * @protected
+     */
     _helperTextChanged(helperText) {
       this.__applyDefaultHelper(helperText);
     }
 
-    /** @protected */
+    /**
+     * @param {HTMLElement | null | undefined} target
+     * @protected
+     */
     _ariaTargetChanged(target) {
       if (target) {
-        this._updateAriaAttribute(this.invalid, this._helperId);
+        this._fieldAriaController.setTarget(target);
       }
     }
 
-    /** @protected */
-    _updateAriaAttribute(invalid, helperId) {
-      const attr = this._ariaAttr;
-
-      if (this.ariaTarget && attr) {
-        // For groups, add all IDs to aria-labelledby rather than aria-describedby -
-        // that should guarantee that it's announced when the group is entered.
-        const ariaIds = attr === 'aria-describedby' ? [helperId] : [this._labelId, helperId];
-
-        // Error message ID needs to be dynamically added / removed based on the validity
-        // Otherwise assistive technologies would announce the error, even if we hide it.
-        if (invalid) {
-          ariaIds.push(this._errorId);
-        }
+    /**
+     * @param {boolean} required
+     * @protected
+     */
+    _requiredChanged(required) {
+      this._fieldAriaController.setRequired(required);
+    }
 
-        this.ariaTarget.setAttribute(attr, ariaIds.join(' '));
-      }
+    /**
+     * @param {string} helperId
+     * @protected
+     */
+    _helperIdChanged(helperId) {
+      this._fieldAriaController.setHelperId(helperId);
     }
 
-    /** @private */
-    __ariaChanged(invalid, helperId) {
-      this._updateAriaAttribute(invalid, helperId);
+    /**
+     * @param {boolean} required
+     * @protected
+     */
+    _invalidChanged(invalid) {
+      // Error message ID needs to be dynamically added / removed based on the validity
+      // Otherwise assistive technologies would announce the error, even if we hide it.
+      if (invalid) {
+        this._fieldAriaController.setErrorId(this._errorId);
+      } else {
+        this._fieldAriaController.setErrorId(null);
+      }
     }
   };

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

@@ -3,26 +3,27 @@
  * Copyright (c) 2021 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { DelegateStateMixin } from './delegate-state-mixin.js';
-import { InputMixin } from './input-mixin.js';
-import { ValidateMixin } from './validate-mixin.js';
+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';
 
 /**
  * A mixin to combine multiple input validation constraints.
  */
-declare function InputConstraintsMixin<T extends new (...args: any[]) => {}>(
+export declare function InputConstraintsMixin<T extends Constructor<HTMLElement>>(
   base: T
-): T & InputConstraintsMixinConstructor;
+): T &
+  Constructor<DelegateStateMixinClass> &
+  Constructor<DisabledMixinClass> &
+  Constructor<InputConstraintsMixinClass> &
+  Constructor<InputMixinClass> &
+  Constructor<ValidateMixinClass>;
 
-interface InputConstraintsMixinConstructor {
-  new (...args: any[]): InputConstraintsMixin;
-}
-
-interface InputConstraintsMixin extends DelegateStateMixin, InputMixin, ValidateMixin {
+export declare class InputConstraintsMixinClass {
   /**
    * Returns true if the current input value satisfies all constraints (if any).
    */
   checkValidity(): boolean;
 }
-
-export { InputConstraintsMixin, InputConstraintsMixinConstructor };

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

@@ -3,22 +3,41 @@
  * Copyright (c) 2021 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { KeyboardMixin } from '@vaadin/component-base/src/keyboard-mixin.js';
-import { FieldMixin } from './field-mixin.js';
-import { InputConstraintsMixin } from './input-constraints-mixin.js';
+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';
 
 /**
  * A mixin to provide shared logic for the editable form input controls.
  */
-declare function InputControlMixin<T extends new (...args: any[]) => {}>(base: T): T & InputControlMixinConstructor;
+export declare function InputControlMixin<T extends Constructor<HTMLElement>>(
+  base: T
+): T &
+  Constructor<ControllerMixinClass> &
+  Constructor<DelegateFocusMixinClass> &
+  Constructor<DelegateStateMixinClass> &
+  Constructor<DisabledMixinClass> &
+  Constructor<FieldMixinClass> &
+  Constructor<FocusMixinClass> &
+  Constructor<InputConstraintsMixinClass> &
+  Constructor<InputControlMixinClass> &
+  Constructor<InputMixinClass> &
+  Constructor<KeyboardMixinClass> &
+  Constructor<LabelMixinClass> &
+  Constructor<ValidateMixinClass>;
 
-interface InputControlMixinConstructor {
-  new (...args: any[]): InputControlMixin;
-}
-
-interface InputControlMixin extends KeyboardMixin, InputConstraintsMixin, FieldMixin {
+export declare class InputControlMixinClass {
   /**
-   * Specify that the value should be automatically selected when the field gains focus.
+   * If true, the input text gets fully selected when the field is focused using click or touch / tap.
    */
   autoselect: boolean;
 
@@ -48,5 +67,3 @@ interface InputControlMixin extends KeyboardMixin, InputConstraintsMixin, FieldM
    */
   title: string;
 }
-
-export { InputControlMixin, InputControlMixinConstructor };

package/src/input-control-mixin.js

@@ -24,7 +24,7 @@ export const InputControlMixin = (superclass) =>
     static get properties() {
       return {
         /**
-         * Specify that the value should be automatically selected when the field gains focus.
+         * If true, the input text gets fully selected when the field is focused using click or touch / tap.
          */
         autoselect: {
           type: Boolean,

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

@@ -3,18 +3,41 @@
  * Copyright (c) 2021 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { InputControlMixin } from './input-control-mixin.js';
+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';
 
 /**
  * A mixin to provide logic for vaadin-text-field and related components.
  */
-declare function InputFieldMixin<T extends new (...args: any[]) => {}>(base: T): T & InputFieldMixinConstructor;
+export declare function InputFieldMixin<T extends Constructor<HTMLElement>>(
+  base: T
+): 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<ValidateMixinClass>;
 
-interface InputFieldMixinConstructor {
-  new (...args: any[]): InputFieldMixin;
-}
-
-interface InputFieldMixin extends InputControlMixin {
+export declare class InputFieldMixinClass {
   /**
    * Whether the value of the control can be automatically completed by the browser.
    * List of available options at:
@@ -42,5 +65,3 @@ interface InputFieldMixin extends InputControlMixin {
    */
   autocapitalize: 'on' | 'off' | 'none' | 'characters' | 'words' | 'sentences' | undefined;
 }
-
-export { InputFieldMixin, InputFieldMixinConstructor };

package/src/input-mixin.d.ts

@@ -3,18 +3,15 @@
  * Copyright (c) 2021 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';
 
 /**
  * A mixin to store the reference to an input element
  * and add input and change event listeners to it.
  */
-declare function InputMixin<T extends new (...args: any[]) => {}>(base: T): T & InputMixinConstructor;
+export declare function InputMixin<T extends Constructor<HTMLElement>>(base: T): T & Constructor<InputMixinClass>;
 
-interface InputMixinConstructor {
-  new (...args: any[]): InputMixin;
-}
-
-interface InputMixin {
+export declare class InputMixinClass {
   /**
    * A reference to the input element controlled by the mixin.
    * Any component implementing this mixin is expected to provide it
@@ -24,7 +21,7 @@ interface InputMixin {
    * However, the input element does not have to always be native <input>:
    * as an example, <vaadin-combo-box-light> accepts other components.
    */
-  readonly inputElement: HTMLInputElement;
+  readonly inputElement: HTMLElement;
 
   /**
    * The value of the field.
@@ -35,6 +32,22 @@ interface InputMixin {
    * Clear the value of the field.
    */
   clear(): void;
-}
 
-export { InputMixin, InputMixinConstructor };
+  protected _addInputListeners(input: HTMLElement): void;
+
+  protected _removeInputListeners(input: HTMLElement): void;
+
+  protected _forwardInputValue(input: HTMLElement): void;
+
+  protected _inputElementChanged(input: HTMLElement, oldInput: HTMLElement): void;
+
+  protected _onChange(event: void): void;
+
+  protected _onInput(event: void): void;
+
+  protected _setInputElement(input: HTMLElement): void;
+
+  protected _toggleHasValue(value: boolean): void;
+
+  protected _valueChanged(value?: string, oldValue?: string): void;
+}

package/src/label-mixin.d.ts

@@ -3,22 +3,25 @@
  * Copyright (c) 2021 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { SlotMixin } from '@vaadin/component-base/src/slot-mixin.js';
+import { Constructor } from '@open-wc/dedupe-mixin';
+import { SlotMixinClass } from '@vaadin/component-base/src/slot-mixin.js';
 
 /**
  * A mixin to provide label via corresponding property or named slot.
  */
-declare function LabelMixin<T extends new (...args: any[]) => {}>(base: T): T & LabelMixinConstructor;
+export declare function LabelMixin<T extends Constructor<HTMLElement>>(
+  base: T
+): T & Constructor<LabelMixinClass> & Constructor<SlotMixinClass>;
 
-interface LabelMixinConstructor {
-  new (...args: any[]): LabelMixin;
-}
-
-interface LabelMixin extends SlotMixin {
+export declare class LabelMixinClass {
   /**
    * String used for a label element.
    */
   label: string | null | undefined;
-}
 
-export { LabelMixinConstructor, LabelMixin };
+  protected readonly _labelNode: HTMLLabelElement;
+
+  protected _labelChanged(label: string | null | undefined): void;
+
+  protected _toggleHasLabelAttribute(): void;
+}

package/src/label-mixin.js

@@ -69,7 +69,7 @@ export const LabelMixin = dedupingMixin(
           this._labelNode.id = this._labelId;
           this._toggleHasLabelAttribute();
 
-          this.__labelNodeObserver.observe(this._labelNode, { childList: true });
+          this.__labelNodeObserver.observe(this._labelNode, { childList: true, subtree: true, characterData: true });
         }
       }
 

package/src/{aria-label-controller.d.ts → labelled-input-controller.d.ts}

@@ -6,6 +6,6 @@
 import { ReactiveController } from 'lit';
 
 /**
- * A controller to link an input element with a slotted `<label>` element.
+ * A controller for linking a `<label>` element with an `<input>` element.
  */
-export class AriaLabelController implements ReactiveController {}
+export class LabelledInputController implements ReactiveController {}

package/src/{aria-label-controller.js → labelled-input-controller.js}

@@ -5,36 +5,22 @@
  */
 
 /**
- * A controller to link an input element with a slotted `<label>` element.
+ * A controller for linking a `<label>` element with an `<input>` element.
  */
-export class AriaLabelController {
+export class LabelledInputController {
   constructor(input, label) {
     this.input = input;
-    this.label = label;
     this.__preventDuplicateLabelClick = this.__preventDuplicateLabelClick.bind(this);
-  }
-
-  hostConnected() {
-    const label = this.label;
-    const input = this.input;
 
     if (label) {
       label.addEventListener('click', this.__preventDuplicateLabelClick);
 
       if (input) {
-        input.setAttribute('aria-labelledby', label.id);
         label.setAttribute('for', input.id);
       }
     }
   }
 
-  hostDisconnected() {
-    const label = this.label;
-    if (label) {
-      label.removeEventListener('click', this.__preventDuplicateLabelClick);
-    }
-  }
-
   /**
    * The native platform fires an event for both the click on the label, and also
    * the subsequent click on the native input element caused by label click.

package/src/pattern-mixin.d.ts

@@ -3,18 +3,27 @@
  * Copyright (c) 2021 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { InputConstraintsMixin } from './input-constraints-mixin.js';
+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';
 
 /**
  * A mixin to provide `pattern` and `preventInvalidInput` properties.
  */
-declare function PatternMixin<T extends new (...args: any[]) => {}>(base: T): T & PatternMixinConstructor;
+export declare function PatternMixin<T extends Constructor<HTMLElement>>(
+  base: T
+): T &
+  Constructor<DelegateStateMixinClass> &
+  Constructor<DisabledMixinClass> &
+  Constructor<InputConstraintsMixinClass> &
+  Constructor<InputMixinClass> &
+  Constructor<PatternMixinClass> &
+  Constructor<ValidateMixinClass>;
 
-interface PatternMixinConstructor {
-  new (...args: any[]): PatternMixin;
-}
-
-interface PatternMixin extends InputConstraintsMixin {
+export declare class PatternMixinClass {
   /**
    * A regular expression that the value is checked against.
    * The pattern must match the entire value, not just some subset.
@@ -28,5 +37,3 @@ interface PatternMixin extends InputConstraintsMixin {
    */
   preventInvalidInput: boolean | null | undefined;
 }
-
-export { PatternMixin, PatternMixinConstructor };

package/src/pattern-mixin.js

@@ -3,8 +3,8 @@
  * Copyright (c) 2021 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { Debouncer } from '@vaadin/component-base/src/debounce.js';
 import { timeOut } from '@vaadin/component-base/src/async.js';
+import { Debouncer } from '@vaadin/component-base/src/debounce.js';
 import { InputConstraintsMixin } from './input-constraints-mixin.js';
 
 /**

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

@@ -3,19 +3,21 @@
  * Copyright (c) 2021 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { KeyboardMixin } from '@vaadin/component-base/src/keyboard-mixin.js';
-import { TabindexMixin } from '@vaadin/component-base/src/tabindex-mixin.js';
-import { DelegateFocusMixin } from './delegate-focus-mixin.js';
+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';
 
 /**
  * A mixin to forward focus to an element in the shadow DOM.
  */
-declare function ShadowFocusMixin<T extends new (...args: any[]) => {}>(base: T): T & ShadowFocusMixinConstructor;
-
-interface ShadowFocusMixinConstructor {
-  new (...args: any[]): ShadowFocusMixin;
-}
-
-interface ShadowFocusMixin extends KeyboardMixin, TabindexMixin, DelegateFocusMixin {}
-
-export { ShadowFocusMixinConstructor, ShadowFocusMixin };
+export declare function ShadowFocusMixin<T extends Constructor<HTMLElement>>(
+  base: T
+): T &
+  Constructor<DelegateFocusMixinClass> &
+  Constructor<DisabledMixinClass> &
+  Constructor<FocusMixinClass> &
+  Constructor<KeyboardMixinClass> &
+  Constructor<TabindexMixinClass>;

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

@@ -3,18 +3,13 @@
  * Copyright (c) 2021 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { LabelMixin } from './label-mixin.js';
-import { SlotTargetMixin } from './slot-target-mixin.js';
+import { Constructor } from '@open-wc/dedupe-mixin';
+import { LabelMixinClass } from './label-mixin.js';
+import { SlotTargetMixinClass } from './slot-target-mixin.js';
 
 /**
  * A mixin to forward any content from the default slot to the label node.
  */
-declare function SlotLabelMixin<T extends new (...args: any[]) => {}>(base: T): T & SlotLabelMixinConstructor;
-
-interface SlotLabelMixinConstructor {
-  new (...args: any[]): SlotLabelMixin;
-}
-
-interface SlotLabelMixin extends SlotTargetMixin, LabelMixin {}
-
-export { SlotLabelMixinConstructor, SlotLabelMixin };
+export declare function SlotLabelMixin<T extends Constructor<HTMLElement>>(
+  base: T
+): T & Constructor<LabelMixinClass> & Constructor<SlotTargetMixinClass>;

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

@@ -3,22 +3,19 @@
  * Copyright (c) 2021 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';
 
 /**
  * Mixin to insert styles into the outer scope to handle slotted components.
  * This is useful e.g. to hide native `<input type="number">` controls.
  */
-declare function SlotStylesMixin<T extends new (...args: any[]) => {}>(base: T): T & SlotStylesMixinConstructor;
+export declare function SlotStylesMixin<T extends Constructor<HTMLElement>>(
+  base: T
+): T & Constructor<SlotStylesMixinClass>;
 
-interface SlotStylesMixinConstructor {
-  new (...args: any[]): SlotStylesMixin;
-}
-
-interface SlotStylesMixin {
+export declare class SlotStylesMixinClass {
   /**
    * List of styles to insert into root.
    */
-  readonly slotStyles: string[];
+  protected readonly slotStyles: string[];
 }
-
-export { SlotStylesMixinConstructor, SlotStylesMixin };

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

@@ -3,30 +3,23 @@
  * Copyright (c) 2021 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';
 
 /**
  * A mixin to copy the content from a source slot to a target element.
  */
-declare function SlotTargetMixin<T extends new (...args: any[]) => {}>(base: T): T & SlotTargetMixinConstructor;
+export declare function SlotTargetMixin<T extends Constructor<HTMLElement>>(
+  base: T
+): T & Constructor<SlotTargetMixinClass>;
 
-interface SlotTargetMixinConstructor {
-  new (...args: any[]): SlotTargetMixin;
-}
-
-interface SlotTargetMixin {
+export declare class SlotTargetMixinClass {
   /**
    * A reference to the source slot from which the content is copied to the target element.
-   *
-   * @protected
    */
-  _sourceSlot: HTMLSlotElement;
+  protected readonly _sourceSlot: HTMLSlotElement;
 
   /**
    * A reference to the target element to which the content is copied from the source slot.
-   *
-   * @protected
    */
-  _slotTarget: HTMLElement;
+  protected readonly _slotTarget: HTMLElement;
 }
-
-export { SlotTargetMixinConstructor, SlotTargetMixin };

package/src/text-area-controller.js

@@ -25,7 +25,7 @@ export class TextAreaController extends SlotController {
         }
 
         // Ensure every instance has unique ID
-        const uniqueId = (TextAreaController._uniqueTextAreaId = 1 + TextAreaController._uniqueInputId || 0);
+        const uniqueId = (TextAreaController._uniqueTextAreaId = 1 + TextAreaController._uniqueTextAreaId || 0);
         host._textareaId = `${host.localName}-${uniqueId}`;
         node.id = host._textareaId;
 

package/src/validate-mixin.d.ts

@@ -3,17 +3,14 @@
  * Copyright (c) 2021 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';
 
 /**
  * A mixin to provide required state and validation logic.
  */
-declare function ValidateMixin<T extends new (...args: any[]) => {}>(base: T): T & ValidateMixinConstructor;
+export declare function ValidateMixin<T extends Constructor<HTMLElement>>(base: T): T & Constructor<ValidateMixinClass>;
 
-interface ValidateMixinConstructor {
-  new (...args: any[]): ValidateMixin;
-}
-
-interface ValidateMixin {
+export declare class ValidateMixinClass {
   /**
    * Set to true when the field is invalid.
    */
@@ -34,5 +31,3 @@ interface ValidateMixin {
    */
   checkValidity(): boolean;
 }
-
-export { ValidateMixinConstructor, ValidateMixin };