Merge branch 'next' into ROU-11977-v2

Issue number: internal

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->

When using ionic theme there's no support for translucent prop on the
ion-header.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- Add support for translucent prop on Ionic theme
- Adjusted tests to also run for ionic-md 

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!--
  If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
  2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer
for more information.
-->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

[Ionic header
fade](https://ionic-framework-git-rou-11911-ionic1.vercel.app/src/components/header/test/fade?ionic:theme=ionic)

---------

Co-authored-by: ionitron <hi@ionicframework.com>

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.d.ts

@@ -1460,7 +1460,7 @@ export namespace Components {
          */
         "theme"?: "ios" | "md" | "ionic";
         /**
-          * If `true`, the header will be translucent. Only applies when the theme is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).  Note: In order to scroll content behind the header, the `fullscreen` attribute needs to be set on the content.
+          * If `true`, the header will be translucent. Only applies when the theme is `"ios"` or `"ionic"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).  Note: In order to scroll content behind the header, the `fullscreen` attribute needs to be set on the content.
           * @default false
          */
         "translucent": boolean;
@@ -7369,7 +7369,7 @@ declare namespace LocalJSX {
          */
         "theme"?: "ios" | "md" | "ionic";
         /**
-          * If `true`, the header will be translucent. Only applies when the theme is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).  Note: In order to scroll content behind the header, the `fullscreen` attribute needs to be set on the content.
+          * If `true`, the header will be translucent. Only applies when the theme is `"ios"` or `"ionic"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).  Note: In order to scroll content behind the header, the `fullscreen` attribute needs to be set on the content.
           * @default false
          */
         "translucent"?: boolean;

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,9 +11,26 @@ 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 {
   --padding-start: #{globals.$ion-space-400};
   --padding-end: #{globals.$ion-space-400};
 }
+
+@supports (backdrop-filter: blur(0)) {
+  .header-background {
+    @include globals.position(0, 0, 0, 0);
+
+    position: absolute;
+
+    backdrop-filter: saturate(180%) blur(globals.$ion-scale-100);
+  }
+  .header-translucent-ionic ion-toolbar {
+    --opacity: 0.7;
+  }
+}

core/src/components/header/header.tsx

@@ -55,7 +55,7 @@ export class Header implements ComponentInterface {
 
   /**
    * If `true`, the header will be translucent.
-   * Only applies when the theme is `"ios"` and the device supports
+   * Only applies when the theme is `"ios"` or `"ionic"` and the device supports
    * [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).
    *
    * Note: In order to scroll content behind the header, the `fullscreen`
@@ -236,10 +236,11 @@ 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}
       >
-        {theme === 'ios' && translucent && <div class="header-background"></div>}
+        {theme !== 'md' && translucent && <div class="header-background"></div>}
         <slot></slot>
       </Host>
     );

core/src/components/header/test/fade/header.e2e.ts

@@ -2,9 +2,9 @@ import { expect } from '@playwright/test';
 import { configs, test } from '@utils/test/playwright';
 
 /**
- * Translucent effect is only available in iOS mode.
+ * Translucent effect is only available in iOS and Ionic mode.
  */
-configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+configs({ modes: ['ios', 'ionic-md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
   test.describe(title('header: fade'), () => {
     test('should not have visual regressions with fade header', async ({ page }) => {
       await page.goto('/src/components/header/test/fade', config);

core/src/components/modal/test/sheet/index.html

@@ -196,7 +196,10 @@
         element.innerHTML = `
       <ion-header>
         <ion-toolbar>
-          Super Modal
+          <ion-title>Super Modal</ion-title>
+          <ion-buttons slot="end">
+            <ion-button class="dismiss">Dismiss Modal</ion-button>
+          </ion-buttons>
         </ion-toolbar>
       </ion-header>
       <ion-content>
@@ -206,7 +209,7 @@
       </ion-content>
       <ion-footer>
         <ion-toolbar>
-          <ion-button>Footer</ion-button>
+          <ion-title>Footer</ion-title>
         </ion-toolbar>
       </ion-footer>
       `;