fix: position loader part correctly in RTL mode (#7566) (#7571)

Co-authored-by: Serhii Kulykov <[email protected]>

packages/combo-box/test/visual/common.js

@@ -10,3 +10,14 @@ registerStyles(
     }
   `,
 );
+
+/* Stop loader animation */
+registerStyles(
+  'vaadin-combo-box-overlay',
+  css`
+    :host([loading]) [part='loader'] {
+      animation: none;
+      opacity: 1;
+    }
+  `,
+);

packages/combo-box/test/visual/lumo/combo-box.test.js

@@ -1,4 +1,4 @@
-import { fixtureSync } from '@vaadin/testing-helpers/dist/fixture.js';
+import { fixtureSync, nextFrame } from '@vaadin/testing-helpers';
 import { sendKeys } from '@web/test-runner-commands';
 import { visualDiff } from '@web/test-runner-visual-regression';
 import '../common.js';
@@ -19,14 +19,6 @@ describe('combo-box', () => {
     await visualDiff(div, 'basic');
   });
 
-  it('opened', async () => {
-    div.style.height = '200px';
-    div.style.width = '200px';
-    element.items = ['Foo', 'Bar', 'Baz'];
-    element.click();
-    await visualDiff(div, 'opened');
-  });
-
   it('focus-ring', async () => {
     await sendKeys({ press: 'Tab' });
 
@@ -98,4 +90,33 @@ describe('combo-box', () => {
     element.appendChild(span);
     await visualDiff(div, 'prefix');
   });
+
+  ['ltr', 'rtl'].forEach((dir) => {
+    describe(dir, () => {
+      before(() => {
+        document.documentElement.setAttribute('dir', dir);
+      });
+
+      after(() => {
+        document.documentElement.removeAttribute('dir');
+      });
+
+      beforeEach(() => {
+        div.style.height = '200px';
+        div.style.width = '200px';
+        element.items = ['Foo', 'Bar', 'Baz'];
+        element.open();
+      });
+
+      it(`${dir} opened`, async () => {
+        await visualDiff(div, `${dir}-opened`);
+      });
+
+      it(`${dir} loading`, async () => {
+        element.loading = true;
+        await nextFrame();
+        await visualDiff(div, `${dir}-loading`);
+      });
+    });
+  });
 });

packages/combo-box/theme/lumo/vaadin-combo-box-overlay-styles.js

@@ -33,20 +33,9 @@ const comboBoxLoader = css`
   [part~='loader'] {
     position: absolute;
     z-index: 1;
-    left: var(--lumo-space-s);
-    right: var(--lumo-space-s);
+    inset-inline: var(--lumo-space-s);
     top: var(--lumo-space-s);
-    margin-left: auto;
-    margin-inline-start: auto;
-    margin-inline-end: 0;
-  }
-
-  :host([dir='rtl']) [part~='loader'] {
-    left: auto;
-    margin-left: 0;
-    margin-right: auto;
-    margin-inline-start: 0;
-    margin-inline-end: auto;
+    margin-inline: auto 0;
   }
 `;