testing sheet

core/api.txt

@@ -667,33 +667,15 @@ 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,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,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,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"` 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.
+          * 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.
           * @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"` 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.
+          * 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.
           * @default false
          */
         "translucent"?: boolean;

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

@@ -1,8 +0,0 @@
-@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,12 +24,8 @@ 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;
@@ -462,7 +458,6 @@ 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,26 +11,9 @@ 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"` or `"ionic"` and the device supports
+   * 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`
@@ -236,11 +236,10 @@ 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 !== 'md' && translucent && <div class="header-background"></div>}
+        {theme === 'ios' && 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 and Ionic mode.
+ * Translucent effect is only available in iOS mode.
  */
-configs({ modes: ['ios', 'ionic-md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+configs({ modes: ['ios'], 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,10 +196,7 @@
         element.innerHTML = `
       <ion-header>
         <ion-toolbar>
-          <ion-title>Super Modal</ion-title>
-          <ion-buttons slot="end">
-            <ion-button class="dismiss">Dismiss Modal</ion-button>
-          </ion-buttons>
+          Super Modal
         </ion-toolbar>
       </ion-header>
       <ion-content>
@@ -209,7 +206,7 @@
       </ion-content>
       <ion-footer>
         <ion-toolbar>
-          <ion-title>Footer</ion-title>
+          <ion-button>Footer</ion-button>
         </ion-toolbar>
       </ion-footer>
       `;