@vaadin/field-base 24.0.0-alpha5 → 24.0.0-alpha7

package/index.d.ts

@@ -10,7 +10,6 @@ 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';
 export { SlotStylesMixin } from './src/slot-styles-mixin.js';
 export { TextAreaController } from './src/text-area-controller.js';
 export { ValidateMixin } from './src/validate-mixin.js';

package/index.js

@@ -10,7 +10,6 @@ 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';
 export { SlotStylesMixin } from './src/slot-styles-mixin.js';
 export { TextAreaController } from './src/text-area-controller.js';
 export { ValidateMixin } from './src/validate-mixin.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/field-base",
-  "version": "24.0.0-alpha5",
+  "version": "24.0.0-alpha7",
   "publishConfig": {
     "access": "public"
   },
@@ -32,7 +32,7 @@
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/component-base": "24.0.0-alpha5",
+    "@vaadin/component-base": "24.0.0-alpha7",
     "lit": "^2.0.0"
   },
   "devDependencies": {
@@ -40,5 +40,5 @@
     "@vaadin/testing-helpers": "^0.3.2",
     "sinon": "^13.0.2"
   },
-  "gitHead": "fc0b1721eda9e39cb289b239e440fc9e29573a31"
+  "gitHead": "aeb4535336813636736759e0a5de148b26bfc3b6"
 }

package/src/error-controller.d.ts

@@ -9,11 +9,6 @@ import { SlotController } from '@vaadin/component-base/src/slot-controller.js';
  * A controller that manages the error message node content.
  */
 export class ErrorController extends SlotController {
-  /**
-   * ID attribute value set on the error message element.
-   */
-  readonly errorId: string;
-
   /**
    * String used for the error message text content.
    */

package/src/error-controller.js

@@ -3,30 +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 { SlotController } from '@vaadin/component-base/src/slot-controller.js';
+import { SlotObserveController } from '@vaadin/component-base/src/slot-observe-controller.js';
 
 /**
  * A controller that manages the error message node content.
  */
-export class ErrorController extends SlotController {
+export class ErrorController extends SlotObserveController {
   constructor(host) {
-    super(host, 'error-message', 'div', {
-      initializer: (node) => {
-        this.__updateErrorId(node);
-
-        this.__updateHasError();
-      },
-      useUniqueId: true,
-    });
-  }
-
-  /**
-   * ID attribute value set on the error message element.
-   *
-   * @return {string}
-   */
-  get errorId() {
-    return this.node && this.node.id;
+    super(host, 'error-message', 'div');
   }
 
   /**
@@ -37,7 +21,7 @@ export class ErrorController extends SlotController {
   setErrorMessage(errorMessage) {
     this.errorMessage = errorMessage;
 
-    this.__updateHasError();
+    this.updateDefaultNode(this.node);
   }
 
   /**
@@ -48,7 +32,33 @@ export class ErrorController extends SlotController {
   setInvalid(invalid) {
     this.invalid = invalid;
 
-    this.__updateHasError();
+    this.updateDefaultNode(this.node);
+  }
+
+  /**
+   * Override method inherited from `SlotController` to not run
+   * initializer on the custom slotted node unnecessarily.
+   *
+   * @param {Node} node
+   * @protected
+   * @override
+   */
+  initAddedNode(node) {
+    if (node !== this.defaultNode) {
+      // There is no need to run `initNode`.
+      this.initCustomNode(node);
+    }
+  }
+
+  /**
+   * Override to initialize the newly added default error message.
+   *
+   * @param {Node} errorNode
+   * @protected
+   * @override
+   */
+  initNode(errorNode) {
+    this.updateDefaultNode(errorNode);
   }
 
   /**
@@ -59,53 +69,43 @@ export class ErrorController extends SlotController {
    * @override
    */
   initCustomNode(errorNode) {
-    this.__updateErrorId(errorNode);
-
     // Save the custom error message content on the host.
     if (errorNode.textContent && !this.errorMessage) {
       this.errorMessage = errorNode.textContent.trim();
     }
 
-    this.__updateHasError();
+    // Notify the host about custom node.
+    super.initCustomNode(errorNode);
   }
 
   /**
-   * Override to cleanup error message node when it's removed.
+   * Override method inherited from `SlotObserveController`
+   * to restore and the default error message element.
    *
-   * @param {Node} node
    * @protected
    * @override
    */
-  teardownNode(node) {
-    let errorNode = this.getSlotChild();
-
-    // If custom error was removed, restore the default one.
-    if (!errorNode && node !== this.defaultNode) {
-      errorNode = this.attachDefaultNode();
-
-      // Run initializer to update default error message ID.
-      this.initNode(errorNode);
-    }
-
-    this.__updateHasError();
+  restoreDefaultNode() {
+    this.attachDefaultNode();
   }
 
   /**
-   * @param {string} error
-   * @private
+   * Override method inherited from `SlotObserveController`
+   * to update the error message text and hidden state.
+   *
+   * Note: unlike with other controllers, this method is
+   * called for both default and custom error message.
+   *
+   * @param {Node | undefined} node
+   * @protected
+   * @override
    */
-  __isNotEmpty(error) {
-    return Boolean(error && error.trim() !== '');
-  }
-
-  /** @private */
-  __updateHasError() {
-    const errorNode = this.node;
-    const hasError = Boolean(this.invalid && this.__isNotEmpty(this.errorMessage));
+  updateDefaultNode(errorNode) {
+    const { errorMessage, invalid } = this;
+    const hasError = Boolean(invalid && errorMessage && errorMessage.trim() !== '');
 
-    // Update both default and custom error message node.
     if (errorNode) {
-      errorNode.textContent = hasError ? this.errorMessage : '';
+      errorNode.textContent = hasError ? errorMessage : '';
       errorNode.hidden = !hasError;
 
       // Role alert will make the error message announce immediately
@@ -117,16 +117,7 @@ export class ErrorController extends SlotController {
       }
     }
 
-    this.host.toggleAttribute('has-error-message', hasError);
-  }
-
-  /**
-   * @param {HTMLElement} errorNode
-   * @private
-   */
-  __updateErrorId(errorNode) {
-    if (!errorNode.id) {
-      errorNode.id = this.defaultId;
-    }
+    // Notify the host after update.
+    super.updateDefaultNode(errorNode);
   }
 }

package/src/field-mixin.js

@@ -56,11 +56,6 @@ export const FieldMixin = (superclass) =>
       return ['_invalidChanged(invalid)', '_requiredChanged(required)'];
     }
 
-    /** @protected */
-    get _errorId() {
-      return this._errorController.errorId;
-    }
-
     /**
      * @protected
      * @return {HTMLElement}
@@ -69,11 +64,6 @@ export const FieldMixin = (superclass) =>
       return this._errorController.node;
     }
 
-    /** @protected */
-    get _helperId() {
-      return this._helperController.helperId;
-    }
-
     /**
      * @protected
      * @return {HTMLElement}
@@ -89,14 +79,19 @@ export const FieldMixin = (superclass) =>
       this._helperController = new HelperController(this);
       this._errorController = new ErrorController(this);
 
-      this._labelController.addEventListener('label-changed', (event) => {
-        const { hasLabel, node } = event.detail;
-        this.__labelChanged(hasLabel, node);
+      this._errorController.addEventListener('slot-content-changed', (event) => {
+        this.toggleAttribute('has-error-message', event.detail.hasContent);
+      });
+
+      this._labelController.addEventListener('slot-content-changed', (event) => {
+        const { hasContent, node } = event.detail;
+        this.__labelChanged(hasContent, node);
       });
 
-      this._helperController.addEventListener('helper-changed', (event) => {
-        const { hasHelper, node } = event.detail;
-        this.__helperChanged(hasHelper, node);
+      this._helperController.addEventListener('slot-content-changed', (event) => {
+        const { hasContent, node } = event.detail;
+        this.toggleAttribute('has-helper', hasContent);
+        this.__helperChanged(hasContent, node);
       });
     }
 
@@ -178,7 +173,8 @@ export const FieldMixin = (superclass) =>
         // 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._errorController.errorId);
+          const node = this._errorNode;
+          this._fieldAriaController.setErrorId(node && node.id);
         } else {
           this._fieldAriaController.setErrorId(null);
         }

package/src/helper-controller.d.ts

@@ -14,8 +14,6 @@ export class HelperController extends SlotController {
    */
   helperText: string | null | undefined;
 
-  helperId: string;
-
   /**
    * Set helper text based on corresponding host property.
    */

package/src/helper-controller.js

@@ -3,189 +3,87 @@
  * 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';
+import { SlotObserveController } from '@vaadin/component-base/src/slot-observe-controller.js';
 
 /**
  * A controller that manages the helper node content.
  */
-export class HelperController extends SlotController {
+export class HelperController extends SlotObserveController {
   constructor(host) {
     // Do not provide tag name, as we create helper lazily.
-    super(host, 'helper', null, {
-      useUniqueId: true,
-    });
-  }
-
-  get helperId() {
-    return this.node && this.node.id;
-  }
-
-  /**
-   * Override to initialize the newly added custom helper.
-   *
-   * @param {Node} helperNode
-   * @protected
-   * @override
-   */
-  initCustomNode(helperNode) {
-    this.__updateHelperId(helperNode);
-
-    this.__observeHelper(helperNode);
-
-    const hasHelper = this.__hasHelper(helperNode);
-    this.__toggleHasHelper(hasHelper);
-  }
-
-  /**
-   * Override to cleanup helper node when it's removed.
-   *
-   * @param {Node} _node
-   * @protected
-   * @override
-   */
-  teardownNode(_node) {
-    // The observer does not exist when the default helper is removed.
-    if (this.__helperIdObserver) {
-      this.__helperIdObserver.disconnect();
-    }
-
-    const helperNode = this.getSlotChild();
-
-    // Custom node is added to helper slot
-    if (helperNode && helperNode !== this.defaultNode) {
-      const hasHelper = this.__hasHelper(helperNode);
-      this.__toggleHasHelper(hasHelper);
-    } else {
-      // Restore default helper if needed
-      this.__applyDefaultHelper(this.helperText, helperNode);
-    }
+    super(host, 'helper', null);
   }
 
   /**
    * Set helper text based on corresponding host property.
+   *
    * @param {string} helperText
    */
   setHelperText(helperText) {
     this.helperText = helperText;
 
+    // Restore the default helper, if needed.
     const helperNode = this.getSlotChild();
-    if (!helperNode || helperNode === this.defaultNode) {
-      this.__applyDefaultHelper(helperText, helperNode);
-    }
-  }
-
-  /**
-   * @param {HTMLElement} helperNode
-   * @return {boolean}
-   * @private
-   */
-  __hasHelper(helperNode) {
     if (!helperNode) {
-      return false;
+      this.restoreDefaultNode();
     }
 
-    return (
-      helperNode.children.length > 0 ||
-      (helperNode.nodeType === Node.ELEMENT_NODE && customElements.get(helperNode.localName)) ||
-      this.__isNotEmpty(helperNode.textContent)
-    );
-  }
-
-  /**
-   * @param {string} helperText
-   * @private
-   */
-  __isNotEmpty(helperText) {
-    return helperText && helperText.trim() !== '';
+    // When default helper is used, update it.
+    if (this.node === this.defaultNode) {
+      this.updateDefaultNode(this.node);
+    }
   }
 
   /**
-   * @param {string} helperText
-   * @param {Node} helperNode
-   * @private
+   * Override method inherited from `SlotObserveController`
+   * to create the default helper element lazily as needed.
+   *
+   * @param {Node | undefined} node
+   * @protected
+   * @override
    */
-  __applyDefaultHelper(helperText, helperNode) {
-    const hasHelperText = this.__isNotEmpty(helperText);
+  restoreDefaultNode() {
+    const { helperText } = this;
 
-    if (hasHelperText && !helperNode) {
-      // Set tag name lazily to only create helper node when needed.
+    // No helper yet, create one.
+    if (helperText && helperText.trim() !== '') {
       this.tagName = 'div';
 
-      helperNode = this.attachDefaultNode();
+      const helperNode = this.attachDefaultNode();
 
-      this.__updateHelperId(helperNode);
-      this.__observeHelper(helperNode);
+      // Observe the default node.
+      this.observeNode(helperNode);
     }
-
-    if (helperNode) {
-      helperNode.textContent = helperText;
-    }
-
-    this.__toggleHasHelper(hasHelperText);
   }
 
   /**
-   * @param {HTMLElement} helperNode
-   * @private
+   * Override method inherited from `SlotObserveController`
+   * to update the default helper element text content.
+   *
+   * @param {Node | undefined} node
+   * @protected
+   * @override
    */
-  __observeHelper(helperNode) {
-    this.__helperObserver = new MutationObserver((mutations) => {
-      mutations.forEach((mutation) => {
-        const target = mutation.target;
-
-        // Ensure the mutation target is the currently connected helper
-        // to ignore async mutations dispatched for removed element.
-        const isHelperMutation = target === this.node;
-
-        if (mutation.type === 'attributes') {
-          // We use attributeFilter to only observe ID mutation,
-          // no need to check for attribute name separately.
-          if (isHelperMutation && target.id !== this.defaultId) {
-            this.__updateHelperId(target);
-          }
-        } else if (isHelperMutation || target.parentElement === this.node) {
-          // Update has-helper when textContent changes
-          const hasHelper = this.__hasHelper(this.node);
-          this.__toggleHasHelper(hasHelper);
-        }
-      });
-    });
+  updateDefaultNode(node) {
+    if (node) {
+      node.textContent = this.helperText;
+    }
 
-    // Observe changes to helper ID attribute, text content and children.
-    this.__helperObserver.observe(helperNode, {
-      attributes: true,
-      attributeFilter: ['id'],
-      childList: true,
-      subtree: true,
-      characterData: true,
-    });
+    // Notify the host after update.
+    super.updateDefaultNode(node);
   }
 
   /**
-   * @param {boolean} hasHelper
-   * @private
+   * Override to observe the newly added custom node.
+   *
+   * @param {Node} node
+   * @protected
+   * @override
    */
-  __toggleHasHelper(hasHelper) {
-    this.host.toggleAttribute('has-helper', hasHelper);
-
-    // Make it possible for other mixins to observe change
-    this.dispatchEvent(
-      new CustomEvent('helper-changed', {
-        detail: {
-          hasHelper,
-          node: this.node,
-        },
-      }),
-    );
-  }
+  initCustomNode(node) {
+    // Notify the host about a custom slotted helper.
+    super.initCustomNode(node);
 
-  /**
-   * @param {HTMLElement} helperNode
-   * @private
-   */
-  __updateHelperId(helperNode) {
-    if (!helperNode.id) {
-      helperNode.id = this.defaultId;
-    }
+    this.observeNode(node);
   }
 }

package/src/input-mixin.d.ts

@@ -56,4 +56,6 @@ export declare class InputMixinClass {
   protected _toggleHasValue(hasValue: boolean): void;
 
   protected _valueChanged(value?: string, oldValue?: string): void;
+
+  protected _setHasInputValue(event: InputEvent): void;
 }

package/src/input-mixin.js

@@ -161,11 +161,7 @@ export const InputMixin = dedupingMixin(
        * @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._setHasInputValue(event);
         this._onInput(event);
       }
 
@@ -236,5 +232,19 @@ export const InputMixin = dedupingMixin(
       get _hasValue() {
         return this.value != null && this.value !== '';
       }
+
+      /**
+       * Sets the `_hasInputValue` property based on the `input` event.
+       *
+       * @param {InputEvent} event
+       * @protected
+       */
+      _setHasInputValue(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;
+      }
     },
 );

package/src/label-controller.d.ts

@@ -9,11 +9,6 @@ import { SlotController } from '@vaadin/component-base/src/slot-controller.js';
  * A controller to manage the label element.
  */
 export class LabelController extends SlotController {
-  /**
-   * ID attribute value set on the label element.
-   */
-  labelId: string;
-
   /**
    * String used for the label.
    */

package/src/label-controller.js

@@ -3,72 +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 { SlotController } from '@vaadin/component-base/src/slot-controller.js';
+import { SlotObserveController } from '@vaadin/component-base/src/slot-observe-controller.js';
 
 /**
  * A controller to manage the label element.
  */
-export class LabelController extends SlotController {
+export class LabelController extends SlotObserveController {
   constructor(host) {
-    super(host, 'label', 'label', {
-      initializer: (node) => {
-        // Set ID attribute or use the existing one.
-        this.__updateLabelId(node);
-
-        // Set text content for the default label.
-        this.__updateDefaultLabel(this.label);
-
-        this.__observeLabel(node);
-      },
-      useUniqueId: true,
-    });
-  }
-
-  /**
-   * @return {string}
-   */
-  get labelId() {
-    return this.node.id;
-  }
-
-  /**
-   * Override to initialize the newly added custom label.
-   *
-   * @param {Node} labelNode
-   * @protected
-   * @override
-   */
-  initCustomNode(labelNode) {
-    this.__updateLabelId(labelNode);
-
-    const hasLabel = this.__hasLabel(labelNode);
-    this.__toggleHasLabel(hasLabel);
-  }
-
-  /**
-   * Override to cleanup label node when it's removed.
-   *
-   * @param {Node} node
-   * @protected
-   * @override
-   */
-  teardownNode(node) {
-    if (this.__labelObserver) {
-      this.__labelObserver.disconnect();
-    }
-
-    let labelNode = this.getSlotChild();
-
-    // If custom label was removed, restore the default one.
-    if (!labelNode && node !== this.defaultNode) {
-      labelNode = this.attachDefaultNode();
-
-      // Run initializer to update default label and ID.
-      this.initNode(labelNode);
-    }
-
-    const hasLabel = this.__hasLabel(labelNode);
-    this.__toggleHasLabel(hasLabel);
+    super(host, 'label', 'label');
   }
 
   /**
@@ -79,108 +21,80 @@ export class LabelController extends SlotController {
   setLabel(label) {
     this.label = label;
 
-    this.__updateDefaultLabel(label);
-  }
-
-  /**
-   * @param {HTMLElement} labelNode
-   * @return {boolean}
-   * @private
-   */
-  __hasLabel(labelNode) {
+    // Restore the default label, if needed.
+    const labelNode = this.getSlotChild();
     if (!labelNode) {
-      return false;
+      this.restoreDefaultNode();
     }
 
-    return labelNode.children.length > 0 || this.__isNotEmpty(labelNode.textContent);
-  }
-
-  /**
-   * @param {string} label
-   * @private
-   */
-  __isNotEmpty(label) {
-    return Boolean(label && label.trim() !== '');
+    // When default label is used, update it.
+    if (this.node === this.defaultNode) {
+      this.updateDefaultNode(this.node);
+    }
   }
 
   /**
-   * @param {HTMLElement} labelNode
-   * @private
+   * Override method inherited from `SlotObserveController`
+   * to restore and observe the default label element.
+   *
+   * @protected
+   * @override
    */
-  __observeLabel(labelNode) {
-    this.__labelObserver = new MutationObserver((mutations) => {
-      mutations.forEach((mutation) => {
-        const target = mutation.target;
-
-        // Ensure the mutation target is the currently connected label
-        // to ignore async mutations dispatched for removed element.
-        const isLabelMutation = target === this.node;
+  restoreDefaultNode() {
+    const { label } = this;
 
-        if (mutation.type === 'attributes') {
-          // We use attributeFilter to only observe ID mutation,
-          // no need to check for attribute name separately.
-          if (isLabelMutation && target.id !== this.defaultId) {
-            this.__updateLabelId(target);
-          }
-        } else if (isLabelMutation || target.parentElement === this.node) {
-          // Update has-label when textContent changes
-          const hasLabel = this.__hasLabel(this.node);
-          this.__toggleHasLabel(hasLabel);
-        }
-      });
-    });
+    // Restore the default label.
+    if (label && label.trim() !== '') {
+      const labelNode = this.attachDefaultNode();
 
-    // Observe changes to label ID attribute, text content and children.
-    this.__labelObserver.observe(labelNode, {
-      attributes: true,
-      attributeFilter: ['id'],
-      childList: true,
-      subtree: true,
-      characterData: true,
-    });
+      // Observe the default label.
+      this.observeNode(labelNode);
+    }
   }
 
   /**
-   * @param {boolean} hasLabel
-   * @private
+   * Override method inherited from `SlotObserveController`
+   * to update the default label element text content.
+   *
+   * @param {Node | undefined} node
+   * @protected
+   * @override
    */
-  __toggleHasLabel(hasLabel) {
-    this.host.toggleAttribute('has-label', hasLabel);
+  updateDefaultNode(node) {
+    if (node) {
+      node.textContent = this.label;
+    }
 
-    // Make it possible for other mixins to observe change
-    this.dispatchEvent(
-      new CustomEvent('label-changed', {
-        detail: {
-          hasLabel,
-          node: this.node,
-        },
-      }),
-    );
+    // Notify the host after update.
+    super.updateDefaultNode(node);
   }
 
   /**
-   * @param {string} label
-   * @private
+   * Override method inherited from `SlotMixin` to observe
+   * the default label node, but not the custom one.
+   *
+   * @param {Node} node
+   * @protected
+   * @override
    */
-  __updateDefaultLabel(label) {
-    if (this.defaultNode) {
-      this.defaultNode.textContent = label;
-
-      // Update has-label if default label is used
-      if (this.defaultNode === this.node) {
-        const hasLabel = this.__isNotEmpty(label);
-        this.__toggleHasLabel(hasLabel);
-      }
+  initNode(node) {
+    if (node === this.defaultNode) {
+      this.updateDefaultNode(node);
+      this.observeNode(node);
     }
   }
 
   /**
-   * @param {HTMLElement} labelNode
-   * @private
+   * Override to observe the newly added custom node.
+   *
+   * @param {Node} node
+   * @protected
+   * @override
    */
-  __updateLabelId(labelNode) {
-    if (!labelNode.id) {
-      labelNode.id = this.defaultId;
-    }
+  initCustomNode(node) {
+    // Notify the host about adding a custom node.
+    super.initCustomNode(node);
+
+    this.observeNode(node);
   }
 }

package/src/label-mixin.js

@@ -31,7 +31,8 @@ export const LabelMixin = dedupingMixin(
 
       /** @protected */
       get _labelId() {
-        return this._labelController.labelId;
+        const node = this._labelNode;
+        return node && node.id;
       }
 
       /** @protected */
@@ -43,6 +44,10 @@ export const LabelMixin = dedupingMixin(
         super();
 
         this._labelController = new LabelController(this);
+
+        this._labelController.addEventListener('slot-content-changed', (event) => {
+          this.toggleAttribute('has-label', event.detail.hasContent);
+        });
       }
 
       /** @protected */

package/src/labelled-input-controller.js

@@ -12,7 +12,7 @@ export class LabelledInputController {
     this.input = input;
     this.__preventDuplicateLabelClick = this.__preventDuplicateLabelClick.bind(this);
 
-    labelController.addEventListener('label-changed', (event) => {
+    labelController.addEventListener('slot-content-changed', (event) => {
       this.__initLabel(event.detail.node);
     });
 

package/src/slot-target-controller.js

@@ -97,7 +97,7 @@ export class SlotTargetController {
    * @private
    */
   __copyNodesToSlotTarget(nodes, slotTarget) {
-    this.__slotTargetClones = this.__slotTargetClones || [];
+    this.__slotTargetClones ||= [];
 
     nodes.forEach((node) => {
       // Clone the nodes and append the clones to the target

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

@@ -1,23 +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/
- */
-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,
-): Constructor<DelegateFocusMixinClass> &
-  Constructor<DisabledMixinClass> &
-  Constructor<FocusMixinClass> &
-  Constructor<KeyboardMixinClass> &
-  Constructor<TabindexMixinClass> &
-  T;

package/src/shadow-focus-mixin.js

@@ -1,97 +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/
- */
-import { KeyboardMixin } from '@vaadin/component-base/src/keyboard-mixin.js';
-import { DelegateFocusMixin } from './delegate-focus-mixin.js';
-
-/**
- * A mixin to forward focus to an element in the shadow DOM.
- *
- * @polymerMixin
- * @mixes DelegateFocusMixin
- * @mixes KeyboardMixin
- */
-export const ShadowFocusMixin = (superClass) =>
-  class ShadowFocusMixinClass extends DelegateFocusMixin(KeyboardMixin(superClass)) {
-    static get properties() {
-      return {
-        /**
-         * Indicates whether the element can be focused and where it participates in sequential keyboard navigation.
-         *
-         * @override
-         * @protected
-         */
-        tabindex: {
-          type: Number,
-          value: 0,
-        },
-      };
-    }
-
-    /**
-     * Override an event listener from `KeyboardMixin`
-     * to prevent focusing the host element on Shift Tab.
-     * @param {KeyboardEvent} event
-     * @protected
-     * @override
-     */
-    _onKeyDown(event) {
-      super._onKeyDown(event);
-
-      // When focus moves with Shift + Tab, skip focusing the host element
-      // by focusing it before the default browser focus handling runs
-      if (!event.defaultPrevented && event.keyCode === 9 && event.shiftKey) {
-        HTMLElement.prototype.focus.apply(this);
-      }
-    }
-
-    /**
-     * Override method inherited from `FocusMixin`
-     * to support focusElement in Shadow DOM.
-     * @param {Event} event
-     * @return {boolean}
-     * @protected
-     * @override
-     */
-    _shouldSetFocus(event) {
-      if (!this.disabled && this.focusElement) {
-        const path = event.composedPath();
-
-        // When focus moves to the host element itself, then delegate it to the focusElement
-        // This should only move focus when using keyboard navigation, for clicks we don't want to interfere,
-        // for example when the user tries to select some text
-        if (path[0] === this && this._keyboardActive) {
-          this.focusElement.focus();
-        }
-        if (path[0] === this || path.includes(this.focusElement)) {
-          return true;
-        }
-      }
-
-      return false;
-    }
-
-    /**
-     * Override an observer from `TabindexMixin`.
-     * Do not call super to remove tabindex attribute
-     * from host when disabled by setting undefined.
-     * @param {string} tabindex
-     * @protected
-     * @override
-     */
-    _tabindexChanged(tabindex) {
-      if (tabindex !== undefined) {
-        this.focusElement.tabIndex = tabindex;
-      }
-
-      if (this.disabled && tabindex) {
-        // If tabindex attribute was changed while component was disabled
-        if (tabindex !== -1) {
-          this._lastTabIndex = tabindex;
-        }
-        this.tabindex = undefined;
-      }
-    }
-  };