fix: update form-layout when its parent becomes visible

[web-padawan]

Description

Fixes vaadin/flow-components#6728

This is a fix for regression from #7792: as we no longer update layout when it's hidden, let's add IntersectionObserver to check the case when it becomes visible (e.g. by hidden attribute removed from the parent element).

Type of change

• Bugfix

Note

Can be tested with the following example:

<div hidden>
  <vaadin-form-layout>
    <div>Foo</div>
    <div>Bar</div>
  </vaadin-form-layout>
</div>

<script type="module">
  import '@vaadin/form-layout';

  document.querySelector('vaadin-form-layout').responsiveSteps = [{ columns: 1 }];

  requestAnimationFrame(() => {
    document.querySelector('div').removeAttribute('hidden');
  });
</script>

[web-padawan]

For some reason the test related to initially set opacity: 0 fails in WebKit, I'll investigate how to fix it.

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarCloud

[vaadin-bot]

Hi @web-padawan and @web-padawan, when i performed cherry-pick to this commit to 24.4, i have encountered the following issue. Can you take a look and pick it manually?
Error Message:
Error: Command failed: git cherry-pick 463ecce
error: could not apply 463ecce... fix: update form-layout when its parent becomes visible (#7988)
hint: After resolving the conflicts, mark them with
hint: "git add/rm ", then run
hint: "git cherry-pick --continue".
hint: You can instead skip this commit with "git cherry-pick --skip".
hint: To abort and get back to the state before "git cherry-pick",
hint: run "git cherry-pick --abort".