ner("resize", this._onResize);
  }

  disconnectedCallback() {
    super.disconnectedCallback();
    if (this._onResize) {
      window.removeEventListener("resize", this._onResize);
    }
  }

  show() {
    this.passwordRulesEl.showPopover();
    this.positionPopover();
  }

  hide() {
    this.passwordRulesEl.hidePopover();
  }

  positionPopover() {
    const anchorRect = this.getBoundingClientRect();
    const popover = this.passwordRulesEl;
    const isWideViewport = window.innerWidth >= 1200;
    const isRTL = document.dir === "rtl";

    // Calculate top position
    const topPos = isWideViewport
      ? anchorRect.top + anchorRect.height / 2
      : anchorRect.bottom;

    popover.style.top = `${topPos}px`;
    popover.style.right = isRTL ? "auto" : "inherit";
    popover.style.left = isRTL ? "inherit" : "auto";
  }

  _onBeforeToggle(e) {
    this.open = e.newState == "open";
  }

  render() {
    return html`
      <link
        rel="stylesheet"
        href="chrome://browser/content/backup/password-rules-tooltip.css"
      />
      <div
        id="password-rules-wrapper"
        role="tooltip"
        aria-describedby="password-rules-header"
        popover="manual"
        @beforetoggle=${this._onBeforeToggle}
      >
        <h2
          id="password-rules-header"
          data-l10n-id="password-rules-header"
        ></h2>
        <ul>
          <li class=${this.tooShort && "warning"}>
            <span
              data-l10n-id="password-rules-length-description"
              class="rule-description"
              aria-labelledby="password-rules-header"
            ></span>
          </li>
          <li class=${this.hasEmail && "warning"}>
            <span
              data-l10n-id="password-rules-email-description"
              class="rule-description"
              aria-labelledby="password-rules-header"
            ></span>
          </li>
        </ul>
      </div>
    `;
  }
}

customElements.define("password-rules-tooltip", PasswordRulesTooltip);
PK