refactor: update popover overlay Lumo CSS to use base styles (#10064)

Author: web-padawan

packages/popover/src/styles/vaadin-popover-overlay-base-styles.js

@@ -85,7 +85,7 @@ const popoverOverlay = css`
   }
 
   :host([theme~='arrow']) {
-    --_default-offset: calc(4px + var(--_arrow-size) / 2);
+    --_default-offset: var(--_arrow-size);
   }
 
   :host([theme~='arrow']) [part='arrow'] {

packages/popover/src/vaadin-popover-overlay.js

@@ -34,6 +34,12 @@ class PopoverOverlay extends PopoverOverlayMixin(
     return popoverOverlayStyles;
   }
 
+  static get lumoInjector() {
+    return {
+      includeBaseStyles: true,
+    };
+  }
+
   /** @protected */
   render() {
     return html`

packages/popover/test/visual/lumo/popover.test.js

@@ -24,35 +24,47 @@ describe('popover', () => {
     await nextRender();
   });
 
-  [
-    'top-start',
-    'top',
-    'top-end',
-    'bottom-start',
-    'bottom',
-    'bottom-end',
-    'start-top',
-    'start',
-    'start-bottom',
-    'end-top',
-    'end',
-    'end-bottom',
-  ].forEach((position) => {
-    it(position, async () => {
-      element.position = position;
-      await nextUpdate(element);
-      target.click();
-      await nextRender();
-      await visualDiff(div, position);
-    });
+  ['ltr', 'rtl'].forEach((dir) => {
+    describe(dir, () => {
+      before(() => {
+        document.documentElement.setAttribute('dir', dir);
+      });
 
-    it(`${position} arrow`, async () => {
-      element.setAttribute('theme', 'arrow');
-      element.position = position;
-      await nextUpdate(element);
-      target.click();
-      await nextRender();
-      await visualDiff(div, `${position}-arrow`);
+      after(() => {
+        document.documentElement.removeAttribute('dir');
+      });
+
+      [
+        'top-start',
+        'top',
+        'top-end',
+        'bottom-start',
+        'bottom',
+        'bottom-end',
+        'start-top',
+        'start',
+        'start-bottom',
+        'end-top',
+        'end',
+        'end-bottom',
+      ].forEach((position) => {
+        it(position, async () => {
+          element.position = position;
+          await nextUpdate(element);
+          target.click();
+          await nextRender();
+          await visualDiff(div, `${dir}-${position}`);
+        });
+
+        it(`${position} arrow`, async () => {
+          element.setAttribute('theme', 'arrow');
+          element.position = position;
+          await nextUpdate(element);
+          target.click();
+          await nextRender();
+          await visualDiff(div, `${dir}-${position}-arrow`);
+        });
+      });
     });
   });