@lion/ui 0.12.0 → 0.13.1

package/components/form-core/src/FormControlMixin.js

@@ -24,6 +24,16 @@ import { FormRegisteringMixin } from './registration/FormRegisteringMixin.js';
  * This Mixin is a shared fundament for all form components, it's applied on:
  * - LionField (which is extended to LionInput, LionTextarea, LionSelect etc. etc.)
  * - LionFieldset (which is extended to LionRadioGroup, LionCheckboxGroup, LionForm)
+ *
+ * @slot label - The label for the form control
+ * @slot help-text - The help text for the form control
+ * @slot input - The input element for the form control, e.g. <input>, <textarea>, <select>
+ * @slot feedback - The validation feedback for the form control
+ * @slot prefix - The prefix for the form control, e.g. currency symbol
+ * @slot suffix - The suffix for the form control, e.g. currency symbol
+ * @slot before - The before element for the form control, e.g. a label
+ * @slot after - The after element for the form control, e.g. a label
+ *
  * @param {import('@open-wc/dedupe-mixin').Constructor<import('lit').LitElement>} superclass
  * @type {FormControlMixin}
  */
@@ -52,7 +62,7 @@ const FormControlMixinImplementation = superclass =>
      * @type {string}
      */
     get label() {
-      return this.__label || (this._labelNode && this._labelNode.textContent) || '';
+      return this.__label ?? (this._labelNode?.textContent || '');
     }
 
     /**
@@ -71,7 +81,7 @@ const FormControlMixinImplementation = superclass =>
      * @type {string}
      */
     get helpText() {
-      return this.__helpText || (this._helpTextNode && this._helpTextNode.textContent) || '';
+      return this.__helpText ?? (this._helpTextNode?.textContent || '');
     }
 
     /**
@@ -158,6 +168,21 @@ const FormControlMixinImplementation = superclass =>
      */
     static enabledWarnings = super.enabledWarnings?.filter(w => w !== 'change-in-update') || [];
 
+    // N.B. add these label/helpText props for types + ce manifest output
+    // (explicity setting them to undefined does not have desired result)
+
+    /**
+     * The label text for the input node.
+     * When no value is defined, textContent of [slot=label] will be used
+     * @property {string} label
+     */
+
+    /**
+     * The helpt text for the input node.
+     * When no value is defined, textContent of [slot=help-text] will be used
+     * @property {string} helpText
+     */
+
     constructor() {
       super();
 
@@ -171,26 +196,12 @@ const FormControlMixinImplementation = superclass =>
        */
       this.readOnly = false;
 
-      /**
-       * The label text for the input node.
-       * When no value is defined, textContent of [slot=label] will be used
-       * @type {string}
-       */
-      this.label = '';
-
       /**
        * The label will only be visible for srceen readers when true
        * @type {boolean}
        */
       this.labelSrOnly = false;
 
-      /**
-       * The helpt text for the input node.
-       * When no value is defined, textContent of [slot=help-text] will be used
-       * @type {string}
-       */
-      this.helpText = '';
-
       /**
        * The model value is the result of the parser function(when available).
        * It should be considered as the internal value used for validation and reasoning/logic.
@@ -293,11 +304,15 @@ const FormControlMixinImplementation = superclass =>
         );
       }
 
-      if (changedProperties.has('label') && this.__label && this._labelNode) {
+      if (changedProperties.has('label') && this.__label !== undefined && this._labelNode) {
         this._labelNode.textContent = this.label;
       }
 
-      if (changedProperties.has('helpText') && this.__helpText && this._helpTextNode) {
+      if (
+        changedProperties.has('helpText') &&
+        this.__helpText !== undefined &&
+        this._helpTextNode
+      ) {
         this._helpTextNode.textContent = this.helpText;
       }
 

package/components/form-core/src/FormatMixin.js

@@ -25,7 +25,7 @@ import { Unparseable } from './validate/Unparseable.js';
 // formattedValue condition needs to be evaluated right before syncing back to the view
 
 /**
- * @desc Designed to be applied on top of a LionField.
+ * Designed to be applied on top of a LionField.
  * To understand all concepts within the Mixin, please consult the flow diagram in the
  * documentation.
  *

package/components/form-core/src/validate/LionValidationFeedback.js

@@ -48,6 +48,14 @@ export class LionValidationFeedback extends LocalizeMixin(LitElement) {
     ];
   }
 
+  constructor() {
+    super();
+    /**
+     * @type {FeedbackMessage[] | undefined}
+     */
+    this.feedbackData = undefined;
+  }
+
   /**
    * @overridable
    * @param {Object} opts
@@ -69,16 +77,6 @@ export class LionValidationFeedback extends LocalizeMixin(LitElement) {
     if (this.feedbackData && this.feedbackData[0]) {
       this.setAttribute('type', this.feedbackData[0].type);
       this.currentType = this.feedbackData[0].type;
-      window.clearTimeout(this.removeMessage);
-      // TODO: this logic should be in ValidateMixin, so that [show-feedback-for] is in sync,
-      // plus duration should be configurable
-      if (this.currentType === 'success') {
-        this.removeMessage = window.setTimeout(() => {
-          this.removeAttribute('type');
-          /** @type {FeedbackMessage[]} */
-          this.feedbackData = [];
-        }, 3000);
-      }
     } else if (this.currentType !== 'success') {
       this.removeAttribute('type');
     }

package/components/form-core/src/validate/ValidateMixin.js

@@ -420,6 +420,22 @@ export const ValidateMixinImplementation = superclass =>
       await this.__executeValidators();
     }
 
+    /**
+     * @param {Validator} validator
+     * @returns {boolean}
+     */
+    #isInstanceOfRequiredValidator(validator) {
+      // walk prototype and check if validatorName is 'Required'
+      let validatorLvlInPrototype = validator;
+      while (validatorLvlInPrototype) {
+        const ctor = /** @type {typeof Validator} */ (validatorLvlInPrototype.constructor);
+        if (ctor.validatorName === 'Required') return true;
+
+        validatorLvlInPrototype = Object.getPrototypeOf(validatorLvlInPrototype);
+      }
+      return false;
+    }
+
     /**
      * @desc step a1-3 + b (as explained in `validate()`)
      */
@@ -482,7 +498,7 @@ export const ValidateMixinImplementation = superclass =>
       for (const v of this._allValidators) {
         if (/** @type {MetaValidator} */ (v)?.executeOnResults) {
           metaValidators.push(/** @type {MetaValidator} */ (v));
-        } else if (/** @type {typeof Validator} */ (v.constructor)?.validatorName === 'Required') {
+        } else if (this.#isInstanceOfRequiredValidator(v)) {
           // Required validator was already handled
         } else if (/** @type {typeof Validator} */ (v.constructor).async) {
           asyncValidators.push(v);
@@ -574,7 +590,7 @@ export const ValidateMixinImplementation = superclass =>
         return [];
       }
 
-      // If empty, do not show the ResulValidation message (e.g. Correct!)
+      // If empty, do not show the ResultValidation message (e.g. Correct!)
       if (this._isEmpty(this.modelValue)) {
         this.__prevShownValidationResult = [];
         return [];
@@ -603,7 +619,7 @@ export const ValidateMixinImplementation = superclass =>
      * - on sync validation
      * - on async validation (can depend on server response)
      *
-     * This method inishes a pass by adding the properties to the instance:
+     * This method finishes a pass by adding the properties to the instance:
      * - validationStates
      * - hasFeedbackFor
      *
@@ -747,6 +763,7 @@ export const ValidateMixinImplementation = superclass =>
      * @property {string} type will be 'error' for messages from default Validators. Could be
      * 'warning', 'info' etc. for Validators with custom types. Needed as a directive for
      * feedbackNode how to render a message of a certain type
+     * @property {number} visibilityDuration duration in ms for how long the message should be shown
      * @property {Validator} [validator] when the message is directly coupled to a Validator
      * (in most cases), this property is filled. When a message is not coupled to a Validator
      * (in case of success feedback which is based on a diff or current and previous validation
@@ -772,7 +789,12 @@ export const ValidateMixinImplementation = superclass =>
             fieldName,
             outcome,
           });
-          return { message, type: validator.type, validator };
+          return {
+            message,
+            type: validator.type,
+            validator,
+            visibilityDuration: validator.config?.visibilityDuration || 3000,
+          };
         }),
       );
     }
@@ -793,6 +815,8 @@ export const ValidateMixinImplementation = superclass =>
      * @protected
      */
     _updateFeedbackComponent() {
+      window.clearTimeout(this.removeMessage);
+
       const { _feedbackNode } = this;
       if (!_feedbackNode) {
         return;
@@ -824,6 +848,18 @@ export const ValidateMixinImplementation = superclass =>
 
           const messageMap = await this.__getFeedbackMessages(this.__prioritizedResult);
           _feedbackNode.feedbackData = messageMap || [];
+
+          if (
+            messageMap?.[0] &&
+            messageMap[0].type === 'success' &&
+            messageMap[0].visibilityDuration !== Infinity
+          ) {
+            this.removeMessage = window.setTimeout(() => {
+              _feedbackNode.removeAttribute('type');
+              /** @type {FeedbackMessage[]} */
+              _feedbackNode.feedbackData = [];
+            }, messageMap[0].visibilityDuration);
+          }
         });
       } else {
         this.__feedbackQueue.add(async () => {

package/components/form-core/test/FormControlMixin.test.js

@@ -86,6 +86,40 @@ describe('FormControlMixin', () => {
       expect(el.label).to.equal('');
     });
 
+    it('supports empty string as label', async () => {
+      const el = /** @type {FormControlMixinClass} */ (
+        await fixture(html`
+        <${tag} label="With Value">${inputSlot}</${tag}>
+      `)
+      );
+
+      expect(el.label).to.equal('With Value');
+      // @ts-expect-error
+      expect(el._labelNode.innerHTML).to.equal('With Value');
+
+      el.label = '';
+      await el.updateComplete;
+
+      expect(el.label).to.equal('');
+      // @ts-expect-error
+      expect(el._labelNode.innerHTML).to.equal('');
+
+      // Reset
+      el.label = 'With Value';
+      await el.updateComplete;
+
+      expect(el.label).to.equal('With Value');
+      // @ts-expect-error
+      expect(el._labelNode.innerHTML).to.equal('With Value');
+
+      el.setAttribute('label', '');
+      await el.updateComplete;
+
+      expect(el.label).to.equal('');
+      // @ts-expect-error
+      expect(el._labelNode.innerHTML).to.equal('');
+    });
+
     /**
      * N.B. For platform controls, the same would be achieved with <input aria-label="My label">
      * However, since FormControl is usually not the activeElement (_inputNode is), this
@@ -176,6 +210,40 @@ describe('FormControlMixin', () => {
       );
       expect(el.helpText).to.equal('');
     });
+
+    it('supports empty string as help-text', async () => {
+      const el = /** @type {FormControlMixinClass} */ (
+        await fixture(html`
+        <${tag} help-text="With Value">${inputSlot}</${tag}>
+      `)
+      );
+
+      expect(el.helpText).to.equal('With Value');
+      // @ts-expect-error
+      expect(el._helpTextNode.innerHTML).to.equal('With Value');
+
+      el.helpText = '';
+      await el.updateComplete;
+
+      expect(el.helpText).to.equal('');
+      // @ts-expect-error
+      expect(el._helpTextNode.innerHTML).to.equal('');
+
+      // Reset
+      el.helpText = 'With Value';
+      await el.updateComplete;
+
+      expect(el.helpText).to.equal('With Value');
+      // @ts-expect-error
+      expect(el._helpTextNode.innerHTML).to.equal('With Value');
+
+      el.setAttribute('help-text', '');
+      await el.updateComplete;
+
+      expect(el.helpText).to.equal('');
+      // @ts-expect-error
+      expect(el._helpTextNode.innerHTML).to.equal('');
+    });
   });
 
   describe('Accessibility', () => {

package/components/form-core/test/validate/lion-validation-feedback.test.js

@@ -33,28 +33,6 @@ describe('lion-validation-feedback', () => {
     expect(el.getAttribute('type')).to.equal('warning');
   });
 
-  it('success message clears after 3s', async () => {
-    const el = /** @type {LionValidationFeedback} */ (
-      await fixture(html`<lion-validation-feedback></lion-validation-feedback>`)
-    );
-
-    const clock = sinon.useFakeTimers();
-
-    el.feedbackData = [{ message: 'hello', type: 'success', validator: new AlwaysValid() }];
-    await el.updateComplete;
-    expect(el.getAttribute('type')).to.equal('success');
-
-    clock.tick(2900);
-
-    expect(el.getAttribute('type')).to.equal('success');
-
-    clock.tick(200);
-
-    expect(el).to.not.have.attribute('type');
-
-    clock.restore();
-  });
-
   it('does not clear error messages', async () => {
     const el = /** @type {LionValidationFeedback} */ (
       await fixture(html`<lion-validation-feedback></lion-validation-feedback>`)

package/components/form-core/test-suites/ValidateMixin.suite.js

@@ -130,6 +130,7 @@ export function runValidateMixinSuite(customConfig) {
         expect(el.hasFeedbackFor).to.deep.equal(['error']);
       });
 
+      // TODO: keep this use case for backwards compatibility or just required extending Required?
       it('determines whether the "Required" validator was already handled by judging the validatorName', async () => {
         class BundledValidator extends EventTarget {
           static ['_$isValidator$'] = true;
@@ -163,9 +164,7 @@ export function runValidateMixinSuite(customConfig) {
         }
 
         class BundledRequired extends BundledValidator {
-          static get validatorName() {
-            return 'Required';
-          }
+          static validatorName = 'Required';
         }
 
         const el = /** @type {ValidateElement} */ (
@@ -180,6 +179,23 @@ export function runValidateMixinSuite(customConfig) {
         expect(el.hasFeedbackFor).to.deep.equal([]);
       });
 
+      it('determines whether the "Required" validator was already handled by judging the validatorName', async () => {
+        class MyRequired extends Required {
+          static validatorName = 'SomethingOtherThanRequired';
+        }
+
+        const el = /** @type {ValidateElement} */ (
+          await fixture(html`
+            <${tag}
+            .validators=${[new MyRequired()]}
+            .modelValue=${'myValue'}
+          >${lightDom}</${tag}>
+          `)
+        );
+
+        expect(el.hasFeedbackFor).to.deep.equal([]);
+      });
+
       it('determines whether the passed Validators are ResultValidators judging by the presence of "executeOnResults"', async () => {
         class ValidateElementWithSuccessType extends ValidateElement {
           static get validationTypes() {

package/components/form-core/test-suites/ValidateMixinFeedbackPart.suite.js

@@ -349,6 +349,125 @@ export function runValidateMixinFeedbackPart() {
       expect(_feedbackNode.feedbackData?.[0].message).to.equal('Nachricht für MinLength');
     });
 
+    it('shows success message and clears after 3s', async () => {
+      class ValidateElementCustomTypes extends ValidateMixin(LitElement) {
+        static get validationTypes() {
+          return ['error', 'success'];
+        }
+      }
+      const clock = sinon.useFakeTimers();
+      const elTagString = defineCE(ValidateElementCustomTypes);
+      const elTag = unsafeStatic(elTagString);
+      const el = /** @type {ValidateElementCustomTypes} */ (
+        await fixture(html`
+        <${elTag}
+          .submitted=${true}
+          .validators=${[
+            new MinLength(3),
+            new DefaultSuccess(null, { getMessage: () => 'This is a success message' }),
+          ]}
+        >${lightDom}</${elTag}>
+      `)
+      );
+      const { _feedbackNode } = getFormControlMembers(el);
+
+      el.modelValue = 'a';
+      await el.updateComplete;
+      await el.feedbackComplete;
+      expect(_feedbackNode.feedbackData?.[0].message).to.equal('Message for MinLength');
+
+      el.modelValue = 'abcd';
+      await el.updateComplete;
+      await el.feedbackComplete;
+      expect(_feedbackNode.feedbackData?.[0].message).to.equal('This is a success message');
+      clock.tick(2900);
+      expect(_feedbackNode.feedbackData?.[0].message).to.equal('This is a success message');
+      clock.tick(200);
+      expect(_feedbackNode.feedbackData).to.be.empty;
+    });
+
+    it('shows success message and clears after configured time', async () => {
+      class ValidateElementCustomTypes extends ValidateMixin(LitElement) {
+        static get validationTypes() {
+          return ['error', 'success'];
+        }
+      }
+      const clock = sinon.useFakeTimers();
+      const elTagString = defineCE(ValidateElementCustomTypes);
+      const elTag = unsafeStatic(elTagString);
+      const el = /** @type {ValidateElementCustomTypes} */ (
+        await fixture(html`
+        <${elTag}
+          .submitted=${true}
+          .validators=${[
+            new MinLength(3),
+            new DefaultSuccess(null, {
+              getMessage: () => 'This is a success message',
+              visibilityDuration: 6000,
+            }),
+          ]}
+        >${lightDom}</${elTag}>
+      `)
+      );
+      const { _feedbackNode } = getFormControlMembers(el);
+
+      el.modelValue = 'a';
+      await el.updateComplete;
+      await el.feedbackComplete;
+      expect(_feedbackNode.feedbackData?.[0].message).to.equal('Message for MinLength');
+
+      el.modelValue = 'abcd';
+      await el.updateComplete;
+      await el.feedbackComplete;
+      expect(_feedbackNode.feedbackData?.[0].message).to.equal('This is a success message');
+      clock.tick(5900);
+      expect(_feedbackNode.feedbackData?.[0].message).to.equal('This is a success message');
+      clock.tick(200);
+      expect(_feedbackNode.feedbackData).to.be.empty;
+    });
+
+    it('shows success message and stays persistent', async () => {
+      class ValidateElementCustomTypes extends ValidateMixin(LitElement) {
+        static get validationTypes() {
+          return ['error', 'success'];
+        }
+      }
+      const clock = sinon.useFakeTimers();
+      const elTagString = defineCE(ValidateElementCustomTypes);
+      const elTag = unsafeStatic(elTagString);
+      const el = /** @type {ValidateElementCustomTypes} */ (
+        await fixture(html`
+        <${elTag}
+          .submitted=${true}
+          .validators=${[
+            new MinLength(3),
+            new DefaultSuccess(null, {
+              getMessage: () => 'This is a success message',
+              visibilityDuration: Infinity,
+            }),
+          ]}
+        >${lightDom}</${elTag}>
+      `)
+      );
+      const { _feedbackNode } = getFormControlMembers(el);
+
+      el.modelValue = 'a';
+      await el.updateComplete;
+      await el.feedbackComplete;
+      expect(_feedbackNode.feedbackData?.[0].message).to.equal('Message for MinLength');
+
+      el.modelValue = 'abcd';
+      await el.updateComplete;
+      await el.feedbackComplete;
+      expect(_feedbackNode.feedbackData?.[0].message).to.equal('This is a success message');
+      clock.tick(2900);
+      expect(_feedbackNode.feedbackData?.[0].message).to.equal('This is a success message');
+      clock.tick(200);
+      expect(_feedbackNode.feedbackData?.[0].message).to.equal('This is a success message');
+      clock.tick(20000);
+      expect(_feedbackNode.feedbackData?.[0].message).to.equal('This is a success message');
+    });
+
     it('shows success message after fixing an error', async () => {
       class ValidateElementCustomTypes extends ValidateMixin(LitElement) {
         static get validationTypes() {

package/components/form-core/types/validate/validate.ts

@@ -31,6 +31,7 @@ export type ValidatorConfig = {
   type?: ValidationType;
   node?: FormControlHost;
   fieldName?: string | Promise<string>;
+  visibilityDuration?: number;
 };
 
 /**

package/components/icon/src/LionIcon.js

@@ -29,6 +29,8 @@ function validateSvg(svg) {
 
 /**
  * Custom element for rendering SVG icons
+ *
+ * @customElement lion-icon
  */
 export class LionIcon extends LitElement {
   static get properties() {

package/components/input-file/src/LionInputFile.js

@@ -31,6 +31,15 @@ function formatBytes(bytes, decimals = 2) {
   return `${parseFloat((bytes / k ** i).toFixed(dm))}${sizes[i]}`;
 }
 
+/**
+ * LionInputFile: A file input component
+ * This component allows users to select files, displays selected files, and handles file uploads.
+ *
+ * @slot file-select-button - [private] The button to open the file dialog
+ * @slot selected-file-list - [private] The list of selected files
+ *
+ * @customElement lion-input-file
+ */
 export class LionInputFile extends ScopedElementsMixin(LocalizeMixin(LionField)) {
   static get scopedElements() {
     return {

package/components/input-tel/src/LionInputTel.js

@@ -18,6 +18,9 @@ import { localizeNamespaceLoader } from './localizeNamespaceLoader.js';
  * @typedef {FormatOptions & {regionCode: RegionCode; formatStrategy: PhoneNumberFormat; formatCountryCodeStyle: string;}} FormatOptionsTel
  */
 
+/**
+ * @customElement lion-input-tel
+ */
 export class LionInputTel extends LocalizeMixin(LionInput) {
   /**
    * @configure LitElement

package/components/input-tel-dropdown/src/LionInputTelDropdown.js

@@ -40,6 +40,8 @@ import { regionCodeToLocale } from './regionCodeToLocale.js';
  * possible. Also, it doesn't need to be a `FormControl`, because it's purely a helper element
  * to provide better UX: the modelValue (the text field) contains all needed info, since it's in
  * `e164` format that contains all info (both region code and national phone number).
+ *
+ * @customElement lion-input-tel-dropdown
  */
 export class LionInputTelDropdown extends LionInputTel {
   refs = {

package/components/listbox/src/LionListbox.js

@@ -7,6 +7,8 @@ import { ListboxMixin } from './ListboxMixin.js';
 /**
  * LionListbox: implements the wai-aria listbox design pattern and integrates it as a Lion
  * FormControl
+ *
+ * @customElement lion-listbox
  */
 export class LionListbox extends ListboxMixin(
   FocusMixin(InteractionStateMixin(ValidateMixin(LitElement))),

package/components/overlays/src/OverlayController.js

@@ -528,8 +528,6 @@ export class OverlayController extends EventTarget {
       this.__contentHasBeenInitialized = true;
     }
 
-    this.__wrappingDialogNode?.addEventListener('cancel', this.__cancelHandler);
-
     // Reset all positioning styles (local, c.q. Popper) and classes (global)
     this.contentWrapperNode.removeAttribute('style');
     this.contentWrapperNode.removeAttribute('class');
@@ -618,8 +616,9 @@ export class OverlayController extends EventTarget {
       contentWrapperNodeL2: this.contentWrapperNode,
       contentNodeL3: this.contentNode,
     });
-    // @ts-ignore
+    // @ts-expect-error
     wrappingDialogElement.open = true;
+
     if (this.isTooltip) {
       // needed to prevent tooltip getting focus in Safari and Firefox
       wrappingDialogElement.setAttribute('tabindex', '-1');
@@ -633,6 +632,35 @@ export class OverlayController extends EventTarget {
       // computed height of 0...
       this.contentNode.style.position = 'static';
     }
+
+    // Here we prevent any interference of the native <dialog> element with the keyboard behavior
+    // as defined by the OverlayController. This is needed until we can configure `closedby="none"`
+    // on the native dialog for all browsers: https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/dialog#closedby
+    const hasClosedBySupport = HTMLDialogElement && 'closedBy' in HTMLDialogElement.prototype;
+    if (hasClosedBySupport) {
+      // @ts-expect-error
+      wrappingDialogElement.closedBy = 'none';
+    } else {
+      wrappingDialogElement.addEventListener(
+        'keydown',
+        (/** @type {* & KeyboardEvent} */ event) => {
+          if (event.key === 'Escape') {
+            event.preventDefault();
+          }
+        },
+      );
+      wrappingDialogElement.addEventListener('keyup', (/** @type {* & KeyboardEvent} */ event) => {
+        if (event.key === 'Escape') {
+          event.preventDefault();
+        }
+      });
+      wrappingDialogElement.addEventListener('cancel', event => {
+        event.stopPropagation();
+      });
+      wrappingDialogElement.addEventListener('close', event => {
+        event.stopPropagation();
+      });
+    }
   }
 
   /**
@@ -1188,6 +1216,7 @@ export class OverlayController extends EventTarget {
     const hasPressedInside =
       event.composedPath().includes(this.contentNode) ||
       deepContains(this.contentNode, /** @type {HTMLElement|ShadowRoot} */ (event.target));
+
     if (hasPressedInside) {
       this.hide();
       // We could do event.stopPropagation() here, but we don't want to hide info for
@@ -1384,8 +1413,6 @@ export class OverlayController extends EventTarget {
   teardown() {
     this.__handleOverlayStyles({ phase: 'teardown' });
     this._handleFeatures({ phase: 'teardown' });
-    this.__wrappingDialogNode?.removeEventListener('cancel', this.__cancelHandler);
-
     if (this.#isRegisteredOnManager()) {
       this.manager.remove(this);
     }

package/components/overlays/src/OverlayMixin.js

@@ -9,6 +9,10 @@ import { isEqualConfig } from './utils/is-equal-config.js';
  */
 
 /**
+ * @slot backdrop - The backdrop element for the overlay
+ * @slot content - The content element for the overlay
+ * @slot invoker - The invoker element for the overlay
+ *
  * @type {OverlayMixin}
  * @param {import('@open-wc/dedupe-mixin').Constructor<import('lit').LitElement>} superclass
  */
@@ -179,6 +183,7 @@ export const OverlayMixinImplementation = superclass =>
       super.connectedCallback();
 
       this.updateComplete.then(() => {
+        if (!this.isConnected) return;
         if (this.#hasSetup) return;
         this._setupOverlayCtrl();
         this.#hasSetup = true;