Merge remote-tracking branch 'origin/feature-8.0' into sp/next

core/api.txt

@@ -1677,7 +1677,4 @@ ion-toolbar,css-prop,--opacity
 ion-toolbar,css-prop,--padding-bottom
 ion-toolbar,css-prop,--padding-end
 ion-toolbar,css-prop,--padding-start
-ion-toolbar,css-prop,--padding-top
-
-test-header,scoped
-test-header,prop,testTitle,string | undefined,undefined,false,false
+ion-toolbar,css-prop,--padding-top

core/src/components.d.ts

@@ -3760,9 +3760,6 @@ export namespace Components {
          */
         "theme"?: "ios" | "md" | "ionic";
     }
-    interface TestHeader {
-        "testTitle"?: string;
-    }
 }
 export interface IonAccordionGroupCustomEvent<T> extends CustomEvent<T> {
     detail: T;
@@ -5140,12 +5137,6 @@ declare global {
         prototype: HTMLIonToolbarElement;
         new (): HTMLIonToolbarElement;
     };
-    interface HTMLTestHeaderElement extends Components.TestHeader, HTMLStencilElement {
-    }
-    var HTMLTestHeaderElement: {
-        prototype: HTMLTestHeaderElement;
-        new (): HTMLTestHeaderElement;
-    };
     interface HTMLElementTagNameMap {
         "ion-accordion": HTMLIonAccordionElement;
         "ion-accordion-group": HTMLIonAccordionGroupElement;
@@ -5240,7 +5231,6 @@ declare global {
         "ion-toast": HTMLIonToastElement;
         "ion-toggle": HTMLIonToggleElement;
         "ion-toolbar": HTMLIonToolbarElement;
-        "test-header": HTMLTestHeaderElement;
     }
 }
 declare namespace LocalJSX {
@@ -9084,9 +9074,6 @@ declare namespace LocalJSX {
          */
         "theme"?: "ios" | "md" | "ionic";
     }
-    interface TestHeader {
-        "testTitle"?: string;
-    }
     interface IntrinsicElements {
         "ion-accordion": IonAccordion;
         "ion-accordion-group": IonAccordionGroup;
@@ -9181,7 +9168,6 @@ declare namespace LocalJSX {
         "ion-toast": IonToast;
         "ion-toggle": IonToggle;
         "ion-toolbar": IonToolbar;
-        "test-header": TestHeader;
     }
 }
 export { LocalJSX as JSX };
@@ -9281,7 +9267,6 @@ declare module "@stencil/core" {
             "ion-toast": LocalJSX.IonToast & JSXBase.HTMLAttributes<HTMLIonToastElement>;
             "ion-toggle": LocalJSX.IonToggle & JSXBase.HTMLAttributes<HTMLIonToggleElement>;
             "ion-toolbar": LocalJSX.IonToolbar & JSXBase.HTMLAttributes<HTMLIonToolbarElement>;
-            "test-header": LocalJSX.TestHeader & JSXBase.HTMLAttributes<HTMLTestHeaderElement>;
         }
     }
 }

core/src/components/button/test/clear/button.e2e.ts

@@ -4,7 +4,7 @@ import { configs, test } from '@utils/test/playwright';
 /**
  * Fill="clear" does not render differently based on the direction.
  */
-configs({ directions: ['ltr'], modes: ['ios', 'md', 'ionic-md'] }).forEach(({ title, config, screenshot }) => {
+configs({ directions: ['ltr'], themes: ['ios', 'md', 'ionic'] }).forEach(({ title, config, screenshot }) => {
   test.describe(title('button: fill: clear'), () => {
     test('should not have visual regressions', async ({ page }) => {
       await page.goto(`/src/components/button/test/clear`, config);

core/src/components/button/test/shape/button.e2e.ts

@@ -74,7 +74,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
 /**
  * Shape="rectangular" is only available in the Ionic theme.
  */
-configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ title, screenshot, config }) => {
+configs({ directions: ['ltr'], themes: ['ionic'] }).forEach(({ title, screenshot, config }) => {
   test.describe(title('button: shape'), () => {
     test.describe('rectangular', () => {
       test('should not have visual regressions', async ({ page }) => {

core/src/components/button/test/size/button.e2e.ts

@@ -1,7 +1,8 @@
 import { expect } from '@playwright/test';
 import { configs, test } from '@utils/test/playwright';
 
-configs({ directions: ['ltr'], modes: ['ionic-md', 'md', 'ios'] }).forEach(({ title, screenshot, config }) => {
+// TODO: FW-6077 - Limit this test to just the Ionic theme on MD mode.
+configs({ directions: ['ltr'], themes: ['ionic', 'md', 'ios'] }).forEach(({ title, screenshot, config }) => {
   test.describe(title('button: size'), () => {
     test('should render small buttons', async ({ page }) => {
       await page.setContent(
@@ -64,7 +65,7 @@ configs({ directions: ['ltr'], modes: ['ionic-md', 'md', 'ios'] }).forEach(({ ti
 /**
  * The following tests are specific to the Ionic theme and do not depend on the text direction.
  */
-configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ title, screenshot, config }) => {
+configs({ directions: ['ltr'], themes: ['ionic'] }).forEach(({ title, screenshot, config }) => {
   test.describe(title('button: size'), () => {
     test('should render xsmall buttons', async ({ page }) => {
       await page.setContent(`<ion-button size="xsmall" fill="solid">X-Small Button</ion-button>`, config);

core/src/components/datetime/test/basic/index.html

@@ -31,6 +31,10 @@
         }
       }
 
+      .options-popover {
+        --width: 300px;
+      }
+
       ion-modal.ios,
       ion-popover.datetime-popover.ios {
         --width: 350px;
@@ -45,36 +49,206 @@
       ion-datetime {
         width: 350px;
       }
+
+      body.dark {
+        --ion-color-primary: #428cff;
+        --ion-color-primary-rgb: 66, 140, 255;
+        --ion-color-primary-contrast: #ffffff;
+        --ion-color-primary-contrast-rgb: 255, 255, 255;
+        --ion-color-primary-shade: #3a7be0;
+        --ion-color-primary-tint: #5598ff;
+
+        --ion-color-secondary: #50c8ff;
+        --ion-color-secondary-rgb: 80, 200, 255;
+        --ion-color-secondary-contrast: #ffffff;
+        --ion-color-secondary-contrast-rgb: 255, 255, 255;
+        --ion-color-secondary-shade: #46b0e0;
+        --ion-color-secondary-tint: #62ceff;
+
+        --ion-color-tertiary: #6a64ff;
+        --ion-color-tertiary-rgb: 106, 100, 255;
+        --ion-color-tertiary-contrast: #ffffff;
+        --ion-color-tertiary-contrast-rgb: 255, 255, 255;
+        --ion-color-tertiary-shade: #5d58e0;
+        --ion-color-tertiary-tint: #7974ff;
+
+        --ion-color-success: #2fdf75;
+        --ion-color-success-rgb: 47, 223, 117;
+        --ion-color-success-contrast: #000000;
+        --ion-color-success-contrast-rgb: 0, 0, 0;
+        --ion-color-success-shade: #29c467;
+        --ion-color-success-tint: #44e283;
+
+        --ion-color-warning: #ffd534;
+        --ion-color-warning-rgb: 255, 213, 52;
+        --ion-color-warning-contrast: #000000;
+        --ion-color-warning-contrast-rgb: 0, 0, 0;
+        --ion-color-warning-shade: #e0bb2e;
+        --ion-color-warning-tint: #ffd948;
+
+        --ion-color-danger: #ff4961;
+        --ion-color-danger-rgb: 255, 73, 97;
+        --ion-color-danger-contrast: #ffffff;
+        --ion-color-danger-contrast-rgb: 255, 255, 255;
+        --ion-color-danger-shade: #e04055;
+        --ion-color-danger-tint: #ff5b71;
+
+        --ion-color-dark: #f4f5f8;
+        --ion-color-dark-rgb: 244, 245, 248;
+        --ion-color-dark-contrast: #000000;
+        --ion-color-dark-contrast-rgb: 0, 0, 0;
+        --ion-color-dark-shade: #d7d8da;
+        --ion-color-dark-tint: #f5f6f9;
+
+        --ion-color-medium: #989aa2;
+        --ion-color-medium-rgb: 152, 154, 162;
+        --ion-color-medium-contrast: #000000;
+        --ion-color-medium-contrast-rgb: 0, 0, 0;
+        --ion-color-medium-shade: #86888f;
+        --ion-color-medium-tint: #a2a4ab;
+
+        --ion-color-light: #222428;
+        --ion-color-light-rgb: 34, 36, 40;
+        --ion-color-light-contrast: #ffffff;
+        --ion-color-light-contrast-rgb: 255, 255, 255;
+        --ion-color-light-shade: #1e2023;
+        --ion-color-light-tint: #383a3e;
+      }
+
+      /*
+       * iOS Dark Theme
+       * -------------------------------------------
+       */
+
+      .ios body.dark {
+        --ion-background-color: #000000;
+        --ion-background-color-rgb: 0, 0, 0;
+
+        --ion-text-color: #ffffff;
+        --ion-text-color-rgb: 255, 255, 255;
+
+        --ion-color-step-50: #0d0d0d;
+        --ion-color-step-100: #1a1a1a;
+        --ion-color-step-150: #262626;
+        --ion-color-step-200: #333333;
+        --ion-color-step-250: #404040;
+        --ion-color-step-300: #4d4d4d;
+        --ion-color-step-350: #595959;
+        --ion-color-step-400: #666666;
+        --ion-color-step-450: #737373;
+        --ion-color-step-500: #808080;
+        --ion-color-step-550: #8c8c8c;
+        --ion-color-step-600: #999999;
+        --ion-color-step-650: #a6a6a6;
+        --ion-color-step-700: #b3b3b3;
+        --ion-color-step-750: #bfbfbf;
+        --ion-color-step-800: #cccccc;
+        --ion-color-step-850: #d9d9d9;
+        --ion-color-step-900: #e6e6e6;
+        --ion-color-step-950: #f2f2f2;
+
+        --ion-item-background: #000000;
+
+        --ion-card-background: #1c1c1d;
+      }
+
+      .ios body.dark ion-modal {
+        --ion-background-color: var(--ion-color-step-100);
+        --ion-toolbar-background: var(--ion-color-step-150);
+        --ion-toolbar-border-color: var(--ion-color-step-250);
+        --ion-item-background: var(--ion-color-step-150);
+      }
+
+      /*
+       * Material Design Dark Theme
+       * -------------------------------------------
+       */
+
+      .md body.dark {
+        --ion-background-color: #121212;
+        --ion-background-color-rgb: 18, 18, 18;
+
+        --ion-text-color: #ffffff;
+        --ion-text-color-rgb: 255, 255, 255;
+
+        --ion-border-color: #222222;
+
+        --ion-color-step-50: #1e1e1e;
+        --ion-color-step-100: #2a2a2a;
+        --ion-color-step-150: #363636;
+        --ion-color-step-200: #414141;
+        --ion-color-step-250: #4d4d4d;
+        --ion-color-step-300: #595959;
+        --ion-color-step-350: #656565;
+        --ion-color-step-400: #717171;
+        --ion-color-step-450: #7d7d7d;
+        --ion-color-step-500: #898989;
+        --ion-color-step-550: #949494;
+        --ion-color-step-600: #a0a0a0;
+        --ion-color-step-650: #acacac;
+        --ion-color-step-700: #b8b8b8;
+        --ion-color-step-750: #c4c4c4;
+        --ion-color-step-800: #d0d0d0;
+        --ion-color-step-850: #dbdbdb;
+        --ion-color-step-900: #e7e7e7;
+        --ion-color-step-950: #f3f3f3;
+
+        --ion-item-background: #1e1e1e;
+
+        --ion-toolbar-background: #1f1f1f;
+
+        --ion-tab-bar-background: #1f1f1f;
+
+        --ion-card-background: #1e1e1e;
+      }
     </style>
   </head>
   <body>
     <ion-app>
-      <test-header test-title="Datetime - Basic">
-        <div slot="items">
-          <ion-item>
-            <ion-toggle id="titleToggle">Show Default Title</ion-toggle>
-          </ion-item>
+      <ion-header translucent="true">
+        <ion-toolbar>
+          <ion-title>Datetime - Basic</ion-title>
+          <ion-buttons slot="end">
+            <ion-button id="popover-trigger">Options</ion-button>
+          </ion-buttons>
+          <ion-popover class="options-popover" trigger="popover-trigger">
+            <ion-list lines="none">
+              <ion-item>
+                <ion-checkbox>Dark Mode</ion-checkbox>
+              </ion-item>
+              <ion-item detail="true" href="?ionic:mode=ios">
+                <ion-label>iOS Mode</ion-label>
+              </ion-item>
+              <ion-item detail="true" href="?ionic:mode=md">
+                <ion-label>MD Mode</ion-label>
+              </ion-item>
 
-          <ion-item>
-            <ion-toggle id="buttonsToggle">Show Default Buttons</ion-toggle>
-          </ion-item>
+              <ion-item>
+                <ion-toggle id="titleToggle">Show Default Title</ion-toggle>
+              </ion-item>
 
-          <ion-item>
-            <ion-input label="Locale" placeholder="default" id="locale"></ion-input>
-          </ion-item>
+              <ion-item>
+                <ion-toggle id="buttonsToggle">Show Default Buttons</ion-toggle>
+              </ion-item>
 
-          <ion-item>
-            <ion-select label="Color" id="color" value="primary">
-              <ion-select-option value="primary">Primary</ion-select-option>
-              <ion-select-option value="secondary">Secondary</ion-select-option>
-              <ion-select-option value="tertiary">Tertiary</ion-select-option>
-              <ion-select-option value="success">Success</ion-select-option>
-              <ion-select-option value="warning">Warning</ion-select-option>
-              <ion-select-option value="danger">Danger</ion-select-option>
-            </ion-select>
-          </ion-item>
-        </div>
-      </test-header>
+              <ion-item>
+                <ion-input label="Locale" placeholder="default" id="locale"></ion-input>
+              </ion-item>
+
+              <ion-item>
+                <ion-select label="Color" id="color" value="primary">
+                  <ion-select-option value="primary">Primary</ion-select-option>
+                  <ion-select-option value="secondary">Secondary</ion-select-option>
+                  <ion-select-option value="tertiary">Tertiary</ion-select-option>
+                  <ion-select-option value="success">Success</ion-select-option>
+                  <ion-select-option value="warning">Warning</ion-select-option>
+                  <ion-select-option value="danger">Danger</ion-select-option>
+                </ion-select>
+              </ion-item>
+            </ion-list>
+          </ion-popover>
+        </ion-toolbar>
+      </ion-header>
       <ion-content class="ion-padding">
         <div class="grid">
           <div class="grid-item">
@@ -159,6 +333,14 @@
           });
         });
 
+        const darkModeCheckbox = document.querySelector('ion-checkbox');
+        darkModeCheckbox.addEventListener('ionChange', (ev) => {
+          if (ev.detail.checked) {
+            document.body.classList.add('dark');
+          } else {
+            document.body.classList.remove('dark');
+          }
+        });
         color.addEventListener('ionChange', (ev) => {
           datetime.color = ev.target.value;
           buttons.forEach((button) => {

core/src/components/picker/test/basic/index.html

@@ -44,7 +44,11 @@
 
   <body>
     <ion-app>
-      <test-header test-title="Picker - Basic"></test-header>
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Picker - Basic</ion-title>
+        </ion-toolbar>
+      </ion-header>
       <ion-content class="ion-padding">
         <div class="grid">
           <div class="grid-item">

core/src/global/ionic-global.ts

@@ -227,7 +227,7 @@ export const initialize = (userConfig: IonicConfig = {}) => {
      * behavior for applications that are not setting the "theme".
      */
     while (elm) {
-      const theme = (elm as any).theme || elm.getAttribute('theme');
+      const theme = elm.getAttribute('theme');
 
       if (theme) {
         if (isThemeSupported(theme)) {
@@ -241,7 +241,7 @@ export const initialize = (userConfig: IonicConfig = {}) => {
        * If a theme is not detected, then fallback to using the
        * `mode` attribute to determine the style sheets to use.
        */
-      const elmMode = (elm as any).mode || elm.getAttribute('mode');
+      const elmMode = elm.getAttribute('mode');
 
       if (elmMode) {
         if (isModeSupported(elmMode)) {

core/src/utils/test/playwright/generator.ts

@@ -1,4 +1,6 @@
-export type Mode = 'ios' | 'md' | 'ionic-ios' | 'ionic-md';
+import { isModeValidForTheme } from '../../../global/ionic-global';
+
+export type Mode = 'ios' | 'md';
 export type Direction = 'ltr' | 'rtl';
 export type Theme = 'ios' | 'md' | 'ionic';
 
@@ -17,9 +19,9 @@ export type ScreenshotFn = (fileName: string) => string;
 
 export interface TestConfig {
   direction: Direction;
+  theme: Theme;
   palette: Palette;
   mode: Mode;
-  theme: Theme;
 }
 
 interface TestUtilities {
@@ -29,36 +31,14 @@ interface TestUtilities {
 }
 
 interface TestConfigOption {
-  /**
-   * The available options to test against.
-   * - "ios": Test against iOS theme on iOS mode.
-   * - "md": Test against Material Design theme on Material Design mode.
-   * - "ionic-ios": Test against Ionic theme on iOS mode.
-   * - "ionic-md": Test against Ionic theme on Material Design mode.
-   *
-   * If unspecified, tests will run against "ios" and "md".
-   */
   modes?: Mode[];
-  /**
-   * The text direction to test against.
-   *
-   * - "ltr": Test against left-to-right direction.
-   * - "rtl": Test against right-to-left direction.
-   *
-   * If unspecified, tests will run against both directions.
-   */
   directions?: Direction[];
-  /**
-   * The color palette to test against.
-   *
-   * - "light": Test against light palette.
-   * - "dark": Test against dark palette.
-   * - "high-contrast": Test against high contrast light palette.
-   * - "high-contrast-dark": Test against high contrast dark palette.
-   *
-   * If unspecified, tests will run against light theme.
-   */
   palettes?: Palette[];
+  /**
+   * The individual themes (iOS, Material Design and Ionic) to test
+   * against. If unspecified, defaults iOS and Material Design
+   */
+  themes?: Theme[];
 }
 
 /**
@@ -68,17 +48,14 @@ interface TestConfigOption {
  * each test title is unique.
  */
 const generateTitle = (title: string, config: TestConfig): string => {
-  const { direction, palette, mode, theme } = config;
+  const { direction, palette, theme, mode } = config;
+
+  if (theme === mode) {
+    /**
+     * Fallback to the old test title naming convention
+     * when the theme and mode are the same.
+     */
 
-  /**
-   * The iOS theme can only be used with the iOS mode,
-   * and the MD theme can only be used with the MD mode.
-   *
-   * This logic enables the fallback behavior for existing tests,
-   * where we only tested against a mode, which accounted for both
-   * the theme and mode.
-   */
-  if (theme === 'ios' || theme === 'md') {
     if (palette === 'light') {
       /**
        * Ionic has many existing tests that existed prior to
@@ -86,9 +63,10 @@ const generateTitle = (title: string, config: TestConfig): string => {
        * compatibility, we will not include the theme in the test
        * title if the theme is set to light.
        */
-      return `${title} - ${mode}/${direction}`;
+      return `${title} - ${theme}/${direction}`;
     }
-    return `${title} - ${mode}/${direction}/${palette}`;
+
+    return `${title} - ${theme}/${direction}/${palette}`;
   }
 
   return `${title} - ${theme}/${mode}/${direction}/${palette}`;
@@ -99,16 +77,13 @@ const generateTitle = (title: string, config: TestConfig): string => {
  * and a test config.
  */
 const generateScreenshotName = (fileName: string, config: TestConfig): string => {
-  const { direction, palette, mode, theme } = config;
-  /**
-   * The iOS theme can only be used with the iOS mode,
-   * and the MD theme can only be used with the MD mode.
-   *
-   * This logic enables the fallback behavior for existing tests,
-   * where we only tested against a mode, which accounted for both
-   * the theme and mode.
-   */
-  if (theme === 'ios' || theme === 'md') {
+  const { theme, direction, palette, mode } = config;
+
+  if (theme === mode) {
+    /**
+     * Fallback to the old screenshot naming convention
+     * when the theme and mode are the same.
+     */
     if (palette === 'light') {
       /**
        * Ionic has many existing tests that existed prior to
@@ -116,9 +91,10 @@ const generateScreenshotName = (fileName: string, config: TestConfig): string =>
        * compatibility, we will not include the theme in the screenshot
        * name if the theme is set to light.
        */
-      return `${fileName}-${mode}-${direction}.png`;
+      return `${fileName}-${theme}-${direction}.png`;
     }
-    return `${fileName}-${mode}-${direction}-${palette}.png`;
+
+    return `${fileName}-${theme}-${direction}-${palette}.png`;
   }
 
   return `${fileName}-${theme}-${mode}-${direction}-${palette}.png`;
@@ -128,7 +104,7 @@ const generateScreenshotName = (fileName: string, config: TestConfig): string =>
  * Given a config generate an array of test variants.
  */
 export const configs = (testConfig: TestConfigOption = DEFAULT_TEST_CONFIG_OPTION): TestUtilities[] => {
-  const { modes, directions } = testConfig;
+  const { modes, themes, directions } = testConfig;
 
   const configs: TestConfig[] = [];
 
@@ -137,17 +113,19 @@ export const configs = (testConfig: TestConfigOption = DEFAULT_TEST_CONFIG_OPTIO
    * fall back to the defaults.
    */
   const processedModes = modes ?? DEFAULT_MODES;
+  const processedTheme = themes ?? DEFAULT_THEMES;
   const processedDirection = directions ?? DEFAULT_DIRECTIONS;
   const processedPalette = testConfig.palettes ?? DEFAULT_PALETTES;
 
   processedModes.forEach((mode) => {
-    const [themeOrCombinedMode, modeName] = mode.split('-') as [Theme, Mode];
-    const parsedTheme = themeOrCombinedMode;
-    const parsedMode = modeName ?? themeOrCombinedMode;
-
-    processedDirection.forEach((direction) => {
-      processedPalette.forEach((palette) => {
-        configs.push({ direction, palette, mode: parsedMode, theme: parsedTheme });
+    processedTheme.forEach((theme) => {
+      if (!isModeValidForTheme(mode, theme)) {
+        return;
+      }
+      processedDirection.forEach((direction) => {
+        processedPalette.forEach((palette) => {
+          configs.push({ theme, direction, palette, mode });
+        });
       });
     });
   });
@@ -162,11 +140,13 @@ export const configs = (testConfig: TestConfigOption = DEFAULT_TEST_CONFIG_OPTIO
 };
 
 const DEFAULT_MODES: Mode[] = ['ios', 'md'];
+const DEFAULT_THEMES: Theme[] = ['ios', 'md'];
 const DEFAULT_DIRECTIONS: Direction[] = ['ltr', 'rtl'];
 const DEFAULT_PALETTES: Palette[] = ['light'];
 
 const DEFAULT_TEST_CONFIG_OPTION = {
   modes: DEFAULT_MODES,
+  themes: DEFAULT_THEMES,
   directions: DEFAULT_DIRECTIONS,
   palettes: DEFAULT_PALETTES,
 };

core/src/utils/test/test-header.scss

@@ -1,3 +0,0 @@
-.options-popover {
-  --width: 300px;
-}

core/src/utils/test/test-header.tsx

@@ -1,81 +0,0 @@
-import type { ComponentInterface } from '@stencil/core';
-import { Component, Host, Prop, h } from '@stencil/core';
-import { getIonMode } from 'src/global/ionic-global';
-
-@Component({
-  tag: 'test-header',
-  styleUrl: 'test-header.scss',
-  scoped: true,
-})
-export class TestHeader implements ComponentInterface {
-  @Prop() testTitle?: string;
-
-  locale = document.querySelector('#locale');
-
-  setTheme = (ev: CustomEvent) => {
-    window.location.search = `?ionic:theme=${ev.detail.value}`;
-  };
-
-  toggleDir = (ev: CustomEvent) => {
-    if (ev.detail.checked) {
-      document.body.setAttribute('dir', 'rtl');
-    } else {
-      document.body.setAttribute('dir', 'ltr');
-    }
-  };
-
-  togglePalette = (ev: CustomEvent) => {
-    const paletteLinkEl = document.getElementById('palette');
-    if (ev.detail.checked) {
-      paletteLinkEl?.setAttribute('href', 'https://cdn.jsdelivr.net/npm/@ionic/core@next/css/palettes/dark.always.css');
-      paletteLinkEl?.setAttribute('rel', 'stylesheet');
-      paletteLinkEl?.setAttribute('type', 'text/css');
-    } else {
-      paletteLinkEl?.removeAttribute('href');
-      paletteLinkEl?.removeAttribute('rel');
-      paletteLinkEl?.removeAttribute('type');
-    }
-  };
-
-  render() {
-    return (
-      <Host class={getIonMode(this)}>
-        <ion-header translucent={true}>
-          <ion-toolbar>
-            <ion-title>{this.testTitle}</ion-title>
-            <ion-buttons slot="end">
-              <ion-button id="popover-trigger">Options</ion-button>
-            </ion-buttons>
-            {/* @ts-ignore */}
-            <ion-popover class="options-popover" trigger="popover-trigger">
-              <ion-list lines="none">
-                <ion-item>
-                  <ion-toggle onIonChange={this.togglePalette}>Dark Mode</ion-toggle>
-                </ion-item>
-                <ion-item>
-                  <ion-toggle onIonChange={this.toggleDir}>RTL</ion-toggle>
-                </ion-item>
-                {/* <ion-item detail={true} href="?ionic:mode=ios">
-                  <ion-label>iOS Mode</ion-label>
-                </ion-item>
-                <ion-item detail={true} href="?ionic:mode=md">
-                  <ion-label>MD Mode</ion-label>
-                </ion-item> */}
-                <ion-item>
-                  <ion-select onIonChange={this.setTheme} interface="popover" placeholder="Theme">
-                    <ion-select-option value="ios">iOS Theme</ion-select-option>
-                    <ion-select-option value="md">MD Theme</ion-select-option>
-                    <ion-select-option value="ionic">Ionic Theme</ion-select-option>
-                  </ion-select>
-                </ion-item>
-
-                <slot name="items"></slot>
-              </ion-list>
-            </ion-popover>
-          </ion-toolbar>
-        </ion-header>
-        <link id="palette" />
-      </Host>
-    );
-  }
-}

packages/angular/src/directives/proxies-list.ts

@@ -82,6 +82,5 @@ export const DIRECTIVES = [
   d.IonTitle,
   d.IonToast,
   d.IonToggle,
-  d.IonToolbar,
-  d.TestHeader
+  d.IonToolbar
 ];

packages/angular/src/directives/proxies.ts

@@ -2427,25 +2427,3 @@ export class IonToolbar {
 export declare interface IonToolbar extends Components.IonToolbar {}
 
 
-@ProxyCmp({
-  inputs: ['testTitle']
-})
-@Component({
-  selector: 'test-header',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  template: '<ng-content></ng-content>',
-  // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['testTitle'],
-})
-export class TestHeader {
-  protected el: HTMLElement;
-  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
-    c.detach();
-    this.el = r.nativeElement;
-  }
-}
-
-
-export declare interface TestHeader extends Components.TestHeader {}
-
-

packages/angular/standalone/src/directives/proxies.ts

@@ -76,7 +76,6 @@ import { defineCustomElement as defineIonThumbnail } from '@ionic/core/component
 import { defineCustomElement as defineIonTitle } from '@ionic/core/components/ion-title.js';
 import { defineCustomElement as defineIonToast } from '@ionic/core/components/ion-toast.js';
 import { defineCustomElement as defineIonToolbar } from '@ionic/core/components/ion-toolbar.js';
-import { defineCustomElement as defineTestHeader } from '@ionic/core/components/test-header.js';
 @ProxyCmp({
   defineCustomElementFn: defineIonAccordion,
   inputs: ['disabled', 'mode', 'readonly', 'theme', 'toggleIcon', 'toggleIconSlot', 'value']
@@ -2153,27 +2152,3 @@ export class IonToolbar {
 export declare interface IonToolbar extends Components.IonToolbar {}
 
 
-@ProxyCmp({
-  defineCustomElementFn: defineTestHeader,
-  inputs: ['testTitle']
-})
-@Component({
-  selector: 'test-header',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  template: '<ng-content></ng-content>',
-  // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['testTitle'],
-  standalone: true
-})
-export class TestHeader {
-  protected el: HTMLElement;
-  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
-    c.detach();
-    this.el = r.nativeElement;
-  }
-}
-
-
-export declare interface TestHeader extends Components.TestHeader {}
-
-

packages/react/src/components/proxies.ts

@@ -73,7 +73,6 @@ import { defineCustomElement as defineIonThumbnail } from '@ionic/core/component
 import { defineCustomElement as defineIonTitle } from '@ionic/core/components/ion-title.js';
 import { defineCustomElement as defineIonToggle } from '@ionic/core/components/ion-toggle.js';
 import { defineCustomElement as defineIonToolbar } from '@ionic/core/components/ion-toolbar.js';
-import { defineCustomElement as defineTestHeader } from '@ionic/core/components/test-header.js';
 
 export const IonAccordion = /*@__PURE__*/createReactComponent<JSX.IonAccordion, HTMLIonAccordionElement>('ion-accordion', undefined, undefined, defineIonAccordion);
 export const IonAccordionGroup = /*@__PURE__*/createReactComponent<JSX.IonAccordionGroup, HTMLIonAccordionGroupElement>('ion-accordion-group', undefined, undefined, defineIonAccordionGroup);
@@ -143,4 +142,3 @@ export const IonThumbnail = /*@__PURE__*/createReactComponent<JSX.IonThumbnail,
 export const IonTitle = /*@__PURE__*/createReactComponent<JSX.IonTitle, HTMLIonTitleElement>('ion-title', undefined, undefined, defineIonTitle);
 export const IonToggle = /*@__PURE__*/createReactComponent<JSX.IonToggle, HTMLIonToggleElement>('ion-toggle', undefined, undefined, defineIonToggle);
 export const IonToolbar = /*@__PURE__*/createReactComponent<JSX.IonToolbar, HTMLIonToolbarElement>('ion-toolbar', undefined, undefined, defineIonToolbar);
-export const TestHeader = /*@__PURE__*/createReactComponent<JSX.TestHeader, HTMLTestHeaderElement>('test-header', undefined, undefined, defineTestHeader);

packages/vue/src/proxies.ts

@@ -78,7 +78,6 @@ import { defineCustomElement as defineIonThumbnail } from '@ionic/core/component
 import { defineCustomElement as defineIonTitle } from '@ionic/core/components/ion-title.js';
 import { defineCustomElement as defineIonToggle } from '@ionic/core/components/ion-toggle.js';
 import { defineCustomElement as defineIonToolbar } from '@ionic/core/components/ion-toolbar.js';
-import { defineCustomElement as defineTestHeader } from '@ionic/core/components/test-header.js';
 
 
 export const IonAccordion = /*@__PURE__*/ defineContainer<JSX.IonAccordion>('ion-accordion', defineIonAccordion, [
@@ -881,8 +880,3 @@ export const IonToolbar = /*@__PURE__*/ defineContainer<JSX.IonToolbar>('ion-too
   'color'
 ]);
 
-
-export const TestHeader = /*@__PURE__*/ defineContainer<JSX.TestHeader>('test-header', defineTestHeader, [
-  'testTitle'
-]);
-