[overlay] Add option to close overlay when position target is scrolled out

[web-padawan]

Motivation

Follow-up to https://github.com/vaadin/web-components/issues/10078

With the new base styles it's easy to scroll the dialog while combo-box or other components is opened:

https://github.com/user-attachments/assets/75a3c0c3-d650-47a0-ae47-9730d0122dfd

<vaadin-button>Open Dialog</vaadin-button>
<vaadin-dialog width="400px" height="300px"></vaadin-dialog>
<script type="module">
  const dialog = document.querySelector('vaadin-dialog');

  dialog.renderer = (root) => {
    if (root.firstChild) {
      return;
    }

    root.innerHTML = `
      <vaadin-combo-box></vaadin-combo-box>

      <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio laborum optio quo perferendis unde, fuga
      reprehenderit molestias cum laboriosam ipsa enim voluptatem iusto fugit. Sed, veniam repudiandae consectetur
      recusandae laudantium.</div>

      <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio laborum optio quo perferendis unde, fuga
      reprehenderit molestias cum laboriosam ipsa enim voluptatem iusto fugit. Sed, veniam repudiandae consectetur
      recusandae laudantium.</div>

      <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio laborum optio quo perferendis unde, fuga
      reprehenderit molestias cum laboriosam ipsa enim voluptatem iusto fugit. Sed, veniam repudiandae consectetur
      recusandae laudantium.</div>
    `;

    root.querySelector('vaadin-combo-box').items = ['Apple', 'Banana', 'Lemon', 'Orange', 'Pear'];
  };

  document.querySelector('vaadin-button').addEventListener('click', () => {
    dialog.opened = true;
  });
</script>

Proposed solution

We could add option e.g. closeOnScroll to PositionMixin and consider using it in field components. This way users would be to configure whether the overlay should close or remain opened.

[jouni]

I think it would be unexpected if the overlay closes immediately if I scroll the dialog just a little bit. Perhaps we can consider closing it if the target is a certain threshold outside the scroll container, something like 100px, to avoid closing the overlay eagerly if the target just accidentally comes close to the edge of the scroll container.

[web-padawan]

My original idea from https://github.com/vaadin/web-components/pull/10097 was to use IntersectionObserver and only close once target is fully hidden.