async hide() {
    this._hideComplete = new Promise(resolve => {
      this._hideResolve = resolve;
    });

    // save the current activeElement so we know if the user set focus to another element than the invoker of the dialog
    // while the dialog was open.
    // We need this in the _restoreFocus method to determine if we should focus this.elementToFocusAfterHide when the
    // dialog is closed or keep focus on the element that the user deliberately gave focus
    this.__activeElementRightBeforeHide = /** @type {ShadowRoot} */ (
      this.contentNode.getRootNode()
    ).activeElement;

    if (this.manager) {
      this.manager.hide(this);
    }

    if (!this.isShown) {
      /** @type {function} */ (this._hideResolve)();
      return;
    }

    const event = new CustomEvent('before-hide', { cancelable: true });
    this.dispatchEvent(event);
    if (!event.defaultPrevented) {
      await this._transitionHide({
        backdropNode: this.backdropNode,
        contentNode: this.contentNode,
      });

      if ('HTMLDialogElement' in window && this.__wrappingDialogNode instanceof HTMLDialogElement) {
        this.__wrappingDialogNode.close();
      }

      // @ts-ignore
      this.__wrappingDialogNode.style.display = 'none';
      this._handleFeatures({ phase: 'hide' });
      this._keepBodySize({ phase: 'hide' });
      this.dispatchEvent(new Event('hide'));
      this._restoreFocus();
    }
    /** @type {function} */ (this._hideResolve)();
  }
@event before-hide right before the overlay hides. Used for animations and switching overlays
@event hide right after the overlay is hidden