Merge branch 'next' into ROU-12556-v2

Author: gnbm

core/src/components/popover/popover.scss …c/components/popover/popover.common.scsscore/src/components/popover/popover.scss renamed to core/src/components/popover/popover.common.scss core/src/components/popover/popover.scss renamed to core/src/components/popover/popover.common.scss

@@ -0,0 +1,21 @@
+@use "../../themes/ionic/ionic.globals.scss" as globals;
+@use "./popover.common";
+
+// Ionic Popover
+// --------------------------------------------------
+
+:host {
+  --width: 250px;
+  --max-height: 90%;
+  --box-shadow: #{globals.$ion-elevation-4};
+  --backdrop-opacity: 0.3;
+}
+
+.popover-content {
+  @include globals.border-radius(globals.$ion-border-radius-400);
+  @include globals.transform-origin(start, top);
+}
+
+.popover-viewport {
+  transition-delay: 100ms;
+}

core/src/components/popover/popover.ionic.scss

@@ -1,4 +1,4 @@
-@import "./popover";
+@import "./popover.common";
 @import "./popover.ios.vars";
 
 // iOS Popover

core/src/components/popover/popover.ios.scss

@@ -1,4 +1,4 @@
-@import "./popover";
+@import "./popover.common";
 @import "./popover.md.vars";
 
 // Material Design Popover

core/src/components/popover/popover.md.scss

@@ -53,7 +53,7 @@ import { configureDismissInteraction, configureKeyboardInteraction, configureTri
   styleUrls: {
     ios: 'popover.ios.scss',
     md: 'popover.md.scss',
-    ionic: 'popover.md.scss',
+    ionic: 'popover.ionic.scss',
   },
   shadow: true,
 })

core/src/components/popover/popover.tsx

@@ -3,7 +3,7 @@ import { configs, test } from '@utils/test/playwright';
 
 import { PopoverFixture } from '../fixture';
 
-configs().forEach(({ title, screenshot, config }) => {
+configs({ modes: ['md', 'ios', 'ionic-md'] }).forEach(({ title, screenshot, config }) => {
   test.describe(title('popover: rendering'), async () => {
     test('should not have visual regressions', async ({ page }) => {
       const popoverFixture = new PopoverFixture(page);
@@ -18,7 +18,7 @@ configs().forEach(({ title, screenshot, config }) => {
 /**
  * This behavior does not vary across directions.
  */
-configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+configs({ directions: ['ltr'], modes: ['md', 'ios', 'ionic-md'] }).forEach(({ title, screenshot, config }) => {
   test.describe(title('popover: rendering variants'), async () => {
     let popoverFixture!: PopoverFixture;
     test.beforeEach(async ({ page }) => {