Merge branch 'next' into ROU-11977-v2

core/api.txt

@@ -667,15 +667,33 @@ ion-content,method,scrollToTop,scrollToTop(duration?: number) => Promise<void>
 ion-content,event,ionScroll,ScrollDetail,true
 ion-content,event,ionScrollEnd,ScrollBaseDetail,true
 ion-content,event,ionScrollStart,ScrollBaseDetail,true
-ion-content,css-prop,--background
-ion-content,css-prop,--color
-ion-content,css-prop,--keyboard-offset
-ion-content,css-prop,--offset-bottom
-ion-content,css-prop,--offset-top
-ion-content,css-prop,--padding-bottom
-ion-content,css-prop,--padding-end
-ion-content,css-prop,--padding-start
-ion-content,css-prop,--padding-top
+ion-content,css-prop,--background,ionic
+ion-content,css-prop,--background,ios
+ion-content,css-prop,--background,md
+ion-content,css-prop,--color,ionic
+ion-content,css-prop,--color,ios
+ion-content,css-prop,--color,md
+ion-content,css-prop,--keyboard-offset,ionic
+ion-content,css-prop,--keyboard-offset,ios
+ion-content,css-prop,--keyboard-offset,md
+ion-content,css-prop,--offset-bottom,ionic
+ion-content,css-prop,--offset-bottom,ios
+ion-content,css-prop,--offset-bottom,md
+ion-content,css-prop,--offset-top,ionic
+ion-content,css-prop,--offset-top,ios
+ion-content,css-prop,--offset-top,md
+ion-content,css-prop,--padding-bottom,ionic
+ion-content,css-prop,--padding-bottom,ios
+ion-content,css-prop,--padding-bottom,md
+ion-content,css-prop,--padding-end,ionic
+ion-content,css-prop,--padding-end,ios
+ion-content,css-prop,--padding-end,md
+ion-content,css-prop,--padding-start,ionic
+ion-content,css-prop,--padding-start,ios
+ion-content,css-prop,--padding-start,md
+ion-content,css-prop,--padding-top,ionic
+ion-content,css-prop,--padding-top,ios
+ion-content,css-prop,--padding-top,md
 ion-content,part,background
 ion-content,part,scroll
 

core/src/components/content/content.ionic.scss

@@ -0,0 +1,8 @@
+@import "./content.scss";
+
+// Ionic Content
+// --------------------------------------------------
+
+:host(.in-modal) {
+  --background: var(--ion-bg-surface-default, var(--ion-primitives-base-white));
+}

core/src/components/content/content.tsx

@@ -24,8 +24,12 @@ import type { ScrollBaseDetail, ScrollDetail } from './content-interface';
  */
 @Component({
   tag: 'ion-content',
-  styleUrl: 'content.scss',
   shadow: true,
+  styleUrls: {
+    ios: 'content.scss',
+    md: 'content.scss',
+    ionic: 'content.ionic.scss',
+  },
 })
 export class Content implements ComponentInterface {
   private watchDog: ReturnType<typeof setInterval> | null = null;
@@ -458,6 +462,7 @@ export class Content implements ComponentInterface {
           'content-sizing': hostContext('ion-popover', this.el),
           overscroll: forceOverscroll,
           [`content-${rtl}`]: true,
+          'in-modal': hostContext('ion-modal', this.el),
         })}
         style={{
           '--offset-top': `${this.cTop}px`,

core/src/components/header/header.ionic.scss

@@ -11,6 +11,10 @@ ion-header {
   &.header-divider {
     border-bottom: globals.$ion-border-size-025 globals.$ion-border-style-solid globals.$ion-primitives-neutral-300;
   }
+
+  &.in-modal {
+    --background: var(--ion-bg-surface-default, var(--ion-primitives-base-white));
+  }
 }
 
 ion-toolbar + ion-toolbar {

core/src/components/header/header.tsx

@@ -236,6 +236,7 @@ export class Header implements ComponentInterface {
           [`header-collapse-${collapse}`]: true,
           [`header-translucent-${theme}`]: this.translucent,
           ['header-divider']: divider,
+          'in-modal': hostContext('ion-modal', this.el),
         }}
         {...inheritedAttributes}
       >