@vaadin/field-base 22.0.0-beta2 → 22.0.2

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-beta2",
+  "version": "22.0.2",
   "publishConfig": {
     "access": "public"
   },
@@ -31,13 +31,13 @@
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/component-base": "22.0.0-beta2",
+    "@vaadin/component-base": "^22.0.2",
     "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": "f13833683e6667f6ca6678452db14aa6b7eac4a4"
+  "gitHead": "df21370c4a655a38eac11f79686021ab3b0887ad"
 }

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

@@ -4,7 +4,7 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { Constructor } from '@open-wc/dedupe-mixin';
-import { DelegateStateMixinClass } from './delegate-state-mixin.js';
+import { ControllerMixinClass } from '@vaadin/component-base/src/controller-mixin.js';
 import { LabelMixinClass } from './label-mixin.js';
 import { ValidateMixinClass } from './validate-mixin.js';
 
@@ -14,7 +14,7 @@ import { ValidateMixinClass } from './validate-mixin.js';
 export declare function FieldMixin<T extends Constructor<HTMLElement>>(
   superclass: T
 ): T &
-  Constructor<DelegateStateMixinClass> &
+  Constructor<ControllerMixinClass> &
   Constructor<FieldMixinClass> &
   Constructor<LabelMixinClass> &
   Constructor<ValidateMixinClass>;
@@ -33,15 +33,11 @@ export declare class FieldMixinClass {
   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;
-
-  protected readonly _ariaAttr: 'aria-labelledby' | 'aria-describedby';
-
-  protected _ariaTargetChanged(target: HTMLElement): void;
+  errorMessage: string | null | undefined;
 
   protected readonly _errorNode: HTMLElement;
 
@@ -49,7 +45,13 @@ export declare class FieldMixinClass {
 
   protected _helperTextChanged(helperText: string | null | undefined): void;
 
-  protected _updateAriaAttribute(target: HTMLElement, invalid: boolean, helperId: string): void;
+  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 _updateAriaRequiredAttribute(target: HTMLElement, required: boolean): void;
+  protected _invalidChanged(invalid: boolean): void;
 }

package/src/field-mixin.js

@@ -5,7 +5,9 @@
  */
 import { FlattenedNodesObserver } from '@polymer/polymer/lib/utils/flattened-nodes-observer.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 {
         /**
@@ -66,9 +69,11 @@ export const FieldMixin = (superclass) =>
 
     static get observers() {
       return [
-        '__ariaChanged(invalid, _helperId, required)',
         '__observeOffsetHeight(errorMessage, invalid, label, helperText)',
-        '_updateErrorMessage(invalid, errorMessage)'
+        '_updateErrorMessage(invalid, errorMessage)',
+        '_invalidChanged(invalid)',
+        '_requiredChanged(required)',
+        '_helperIdChanged(_helperId)'
       ];
     }
 
@@ -88,14 +93,6 @@ export const FieldMixin = (superclass) =>
       return this._getDirectSlotChild('helper');
     }
 
-    /**
-     * @protected
-     * @return {string}
-     */
-    get _ariaAttr() {
-      return 'aria-describedby';
-    }
-
     constructor() {
       super();
 
@@ -106,6 +103,8 @@ export const FieldMixin = (superclass) =>
 
       // Save generated ID to restore later
       this.__savedHelperId = this._helperId;
+
+      this._fieldAriaController = new FieldAriaController(this);
     }
 
     /** @protected */
@@ -166,6 +165,8 @@ export const FieldMixin = (superclass) =>
           this.__applyDefaultHelper(this.helperText);
         }
       });
+
+      this.addController(this._fieldAriaController);
     }
 
     /** @private */
@@ -206,6 +207,7 @@ export const FieldMixin = (superclass) =>
       }
 
       helper.id = this.__savedHelperId;
+      this._helperId = helper.id;
       this.appendChild(helper);
       this._currentHelper = helper;
 
@@ -266,9 +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} errorMessage
+     * @param {string | null | undefined} errorMessage
      * @protected
      */
     _updateErrorMessage(invalid, errorMessage) {
@@ -283,6 +301,7 @@ export const FieldMixin = (superclass) =>
       }
       const hasError = Boolean(invalid && errorMessage);
       error.textContent = hasError ? errorMessage : '';
+      error.hidden = !hasError;
       this.toggleAttribute('has-error-message', hasError);
 
       // Role alert will make the error message announce immediately
@@ -320,66 +339,48 @@ export const FieldMixin = (superclass) =>
     }
 
     /**
-     * @param {HTMLElement} target
+     * @param {HTMLElement | null | undefined} target
      * @protected
      */
     _ariaTargetChanged(target) {
       if (target) {
-        this._updateAriaAttribute(target, this.invalid, this._helperId);
-        this._updateAriaRequiredAttribute(target, this.required);
+        this._fieldAriaController.setTarget(target);
       }
     }
 
     /**
-     * @param {HTMLElement} target
-     * @param {boolean} invalid
-     * @param {string} helperId
+     * @param {boolean} required
      * @protected
      */
-    _updateAriaAttribute(target, invalid, helperId) {
-      const attr = this._ariaAttr;
-
-      if (target && 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);
-        }
-
-        target.setAttribute(attr, ariaIds.join(' '));
-      }
+    _requiredChanged(required) {
+      this._fieldAriaController.setRequired(required);
     }
 
     /**
-     * @param {HTMLElement} target
-     * @param {boolean} required
+     * @param {string} helperId
      * @protected
      */
-    _updateAriaRequiredAttribute(target, required) {
-      if (target !== this) {
-        // native <input> or <textarea>, required is enough
-        return;
-      }
-
-      if (required) {
-        target.setAttribute('aria-required', true);
-      } else {
-        target.removeAttribute('aria-required');
-      }
+    _helperIdChanged(helperId) {
+      this._fieldAriaController.setHelperId(helperId);
     }
 
     /**
-     * @param {boolean} invalid
-     * @param {string} helperId
      * @param {boolean} required
-     * @private
+     * @protected
      */
-    __ariaChanged(invalid, helperId, required) {
-      this._updateAriaAttribute(this.ariaTarget, invalid, helperId);
-      this._updateAriaRequiredAttribute(this.ariaTarget, required);
+    _invalidChanged(invalid) {
+      // This timeout is needed to prevent NVDA from announcing the error message twice:
+      // 1. Once adding the `[role=alert]` attribute by the `_updateErrorMessage` method (OK).
+      // 2. Once linking the error ID with the ARIA target here (unwanted).
+      // Related issue: https://github.com/vaadin/web-components/issues/3061.
+      setTimeout(() => {
+        // 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-control-mixin.d.ts

@@ -4,6 +4,7 @@
  * 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';
@@ -21,6 +22,7 @@ import { ValidateMixinClass } from './validate-mixin.js';
 export declare function InputControlMixin<T extends Constructor<HTMLElement>>(
   base: T
 ): T &
+  Constructor<ControllerMixinClass> &
   Constructor<DelegateFocusMixinClass> &
   Constructor<DelegateStateMixinClass> &
   Constructor<DisabledMixinClass> &

package/src/input-controller.d.ts

@@ -3,9 +3,9 @@
  * Copyright (c) 2021 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { SlotController } from './slot-controller.js';
+import { SlotController } from '@vaadin/component-base/src/slot-controller.js';
 
 /**
  * A controller to create and initialize slotted `<input>` element.
  */
-export class InputController implements SlotController {}
+export class InputController extends SlotController {}

package/src/input-controller.js

@@ -3,14 +3,15 @@
  * Copyright (c) 2021 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { SlotController } from './slot-controller.js';
+import { SlotController } from '@vaadin/component-base/src/slot-controller.js';
 
 /**
  * A controller to create and initialize slotted `<input>` element.
  */
 export class InputController extends SlotController {
   constructor(host, callback) {
-    super(host, [
+    super(
+      host,
       'input',
       () => document.createElement('input'),
       (host, node) => {
@@ -30,6 +31,6 @@ export class InputController extends SlotController {
           callback(node);
         }
       }
-    ]);
+    );
   }
 }

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

@@ -4,6 +4,7 @@
  * 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';
@@ -22,6 +23,7 @@ import { ValidateMixinClass } from './validate-mixin.js';
 export declare function InputFieldMixin<T extends Constructor<HTMLElement>>(
   base: T
 ): T &
+  Constructor<ControllerMixinClass> &
   Constructor<DelegateFocusMixinClass> &
   Constructor<DelegateStateMixinClass> &
   Constructor<DisabledMixinClass> &

package/src/label-mixin.js

@@ -87,7 +87,6 @@ export const LabelMixin = dedupingMixin(
           const hasLabel = this._labelNode.children.length > 0 || this._labelNode.textContent.trim() !== '';
 
           this.toggleAttribute('has-label', hasLabel);
-          this.dispatchEvent(new CustomEvent('has-label-changed', { detail: { value: hasLabel } }));
         }
       }
     }

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,10 +5,10 @@
  */
 
 /**
- * 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 {
-  constructor(host, input, label) {
+export class LabelledInputController {
+  constructor(input, label) {
     this.input = input;
     this.__preventDuplicateLabelClick = this.__preventDuplicateLabelClick.bind(this);
 
@@ -17,11 +17,6 @@ export class AriaLabelController {
 
       if (input) {
         label.setAttribute('for', input.id);
-
-        this.__setAriaLabelledBy(input, host.hasAttribute('has-label') ? label.id : null);
-        host.addEventListener('has-label-changed', (event) =>
-          this.__setAriaLabelledBy(input, event.detail.value ? label.id : null)
-        );
       }
     }
   }
@@ -41,18 +36,4 @@ export class AriaLabelController {
     };
     this.input.addEventListener('click', inputClickHandler);
   }
-
-  /**
-   * Sets or removes the `aria-labelledby` attribute on the input element.
-   * @param {HTMLElement} input
-   * @param {string | null | undefined} value
-   * @private
-   */
-  __setAriaLabelledBy(input, value) {
-    if (value) {
-      input.setAttribute('aria-labelledby', value);
-    } else {
-      input.removeAttribute('aria-labelledby');
-    }
-  }
 }

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

@@ -3,9 +3,9 @@
  * Copyright (c) 2021 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { SlotController } from './slot-controller.js';
+import { SlotController } from '@vaadin/component-base/src/slot-controller.js';
 
 /**
  * A controller to create and initialize slotted `<textarea>` element.
  */
-export class TextAreaController implements SlotController {}
+export class TextAreaController extends SlotController {}

package/src/text-area-controller.js

@@ -3,14 +3,15 @@
  * Copyright (c) 2021 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { SlotController } from './slot-controller.js';
+import { SlotController } from '@vaadin/component-base/src/slot-controller.js';
 
 /**
  * A controller to create and initialize slotted `<textarea>` element.
  */
 export class TextAreaController extends SlotController {
   constructor(host, callback) {
-    super(host, [
+    super(
+      host,
       'textarea',
       () => document.createElement('textarea'),
       (host, node) => {
@@ -33,6 +34,6 @@ export class TextAreaController extends SlotController {
           callback(node);
         }
       }
-    ]);
+    );
   }
 }

package/src/slot-controller.d.ts

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

package/src/slot-controller.js

@@ -1,36 +0,0 @@
-/**
- * @license
- * Copyright (c) 2021 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-export class SlotController {
-  constructor(host, [slotName, slotFactory, slotInitializer]) {
-    this.host = host;
-    this.slotName = slotName;
-    this.slotFactory = slotFactory;
-    this.slotInitializer = slotInitializer;
-  }
-
-  hostConnected() {
-    if (!this.__initialized) {
-      const { host, slotName, slotFactory } = this;
-
-      const slotted = host.querySelector(`[slot=${slotName}]`);
-
-      if (!slotted) {
-        const slotContent = slotFactory(host);
-        if (slotContent instanceof Element) {
-          slotContent.setAttribute('slot', slotName);
-          host.appendChild(slotContent);
-          this.__slotContent = slotContent;
-        }
-      } else {
-        this.__slotContent = slotted;
-      }
-
-      this.slotInitializer(host, this.__slotContent);
-
-      this.__initialized = true;
-    }
-  }
-}