[overlay] Overlay dir attribute not updated on re-opening after setting dir to RTL

[web-padawan]

Description

When using vaadin-tooltip or vaadin-popover that uses e.g. bottom-start position, it isn't correctly flipped horizontally once the dir attribute on the document is set to rtl.

This is apparently caused by this logic that checks computedStyle() on first open and then sets attribute without relying on the global dir value available through DirMixin:

web-components/packages/overlay/src/vaadin-overlay-position-mixin.js

Line 206 in 881a9f9

this.setAttribute('dir', computedStyle.direction);

Expected outcome

I would expect the dir attribute to apply to the overlay so that horizontal alignment would be updated correctly.

Expected alignment

Actual alignment

Minimal reproducible example

<div style="max-width: 100px; margin: 0 auto">
  <button id="button">Toggle RTL</button>
</div>
<vaadin-tooltip
  text="Switch document direction"
  for="button"
  position="bottom-start"
></vaadin-tooltip>
<script type="module">
  import '@vaadin/tooltip';

  const button = document.querySelector('button');
  button.addEventListener('click', () => {
    if (document.dir === 'rtl') {
      document.dir = '';
    } else {
      document.dir = 'rtl';
    }
  });
</script>

Steps to reproduce

1. Move mouse to the button, note the tooltip overlay position
2. Click the button to toggle document dir
3. Move mouse to the button again, the position is the same

Environment

Vaadin version(s): 24.5 and earlier

Browsers

Issue is not browser related