chore(): create reusable test header

Issue number: N/A

---------

<!-- 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. -->

Developers are not able to easily add the "ionic" theme to existing test
cases, without running the test against both iOS and MD mode:

```ts
configs({ themes: ['ios', 'md', 'ionic'] })
// Generates 4 test cases
// - iOS theme on iOS mode
// - MD theme on MD mode
// - Ionic theme on iOS mode
// - Ionic theme on MD mode
```

With the separation of `mode` into look and feel, the majority of test
cases do not require testing the mode behavior and instead only need to
test the visual theme that is applied to the component.

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

- Removes the `themes` option from the `configs` test generator object.

```ts
configs({ modes: ['ios', 'md', 'ionic-md'] })
```

- Combines `theme` and `mode` into the existing `modes` test generator
object
- The new options are `ionic-ios` and `ionic-md`, to run the Ionic theme
against the respective mode.
- This path was preferred to avoid deprecating and migrating all
existing tests.

## 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/.github/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. -->

I do not have a strong preference on the semantics of `ionic-ios` vs.
`ios-ionic` (theme first vs. mode first). If anyone has an opinion or
alternative suggestion, please add a comment.

---------

Co-authored-by: Liam DeBeasi <liamdebeasi@users.noreply.github.com>

core/api.txt

@@ -321,9 +321,6 @@ ion-checkbox,prop,justify,"end" | "space-between" | "start",'space-between',fals
 ion-checkbox,prop,labelPlacement,"end" | "fixed" | "stacked" | "start",'start',false,false
 ion-checkbox,prop,mode,"ios" | "md",undefined,false,false
 ion-checkbox,prop,name,string,this.inputId,false,false
-ion-checkbox,prop,required,boolean,false,false,false
-ion-checkbox,prop,shape,"rectangular" | "soft" | undefined,'soft',false,true
-ion-checkbox,prop,size,"default" | "small" | undefined,'default',false,true
 ion-checkbox,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 ion-checkbox,prop,value,any,'on',false,false
 ion-checkbox,event,ionBlur,void,true
@@ -341,7 +338,6 @@ ion-checkbox,css-prop,--checkmark-width
 ion-checkbox,css-prop,--size
 ion-checkbox,css-prop,--transition
 ion-checkbox,part,container
-ion-checkbox,part,focus-ring
 ion-checkbox,part,label
 ion-checkbox,part,mark
 
@@ -1681,4 +1677,7 @@ 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
+ion-toolbar,css-prop,--padding-top
+
+test-header,scoped
+test-header,prop,testTitle,string | undefined,undefined,false,false

core/src/components.d.ts

@@ -724,18 +724,6 @@ export namespace Components {
           * The name of the control, which is submitted with the form data.
          */
         "name": string;
-        /**
-          * If `true`, the checkbox will be presented with an error style when it is unchecked.
-         */
-        "required": boolean;
-        /**
-          * Set to `"soft"` for a checkbox with more rounded corners.
-         */
-        "shape"?: 'soft' | 'rectangular';
-        /**
-          * Set to `"small"` for a checkbox with less height and padding or to `"default"` for a checkbox with the default height and padding.
-         */
-        "size"?: 'small' | 'default';
         /**
           * The theme determines the visual appearance of the component.
          */
@@ -3772,6 +3760,9 @@ export namespace Components {
          */
         "theme"?: "ios" | "md" | "ionic";
     }
+    interface TestHeader {
+        "testTitle"?: string;
+    }
 }
 export interface IonAccordionGroupCustomEvent<T> extends CustomEvent<T> {
     detail: T;
@@ -5149,6 +5140,12 @@ 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;
@@ -5243,6 +5240,7 @@ declare global {
         "ion-toast": HTMLIonToastElement;
         "ion-toggle": HTMLIonToggleElement;
         "ion-toolbar": HTMLIonToolbarElement;
+        "test-header": HTMLTestHeaderElement;
     }
 }
 declare namespace LocalJSX {
@@ -5964,18 +5962,6 @@ declare namespace LocalJSX {
           * Emitted when the checkbox has focus.
          */
         "onIonFocus"?: (event: IonCheckboxCustomEvent<void>) => void;
-        /**
-          * If `true`, the checkbox will be presented with an error style when it is unchecked.
-         */
-        "required"?: boolean;
-        /**
-          * Set to `"soft"` for a checkbox with more rounded corners.
-         */
-        "shape"?: 'soft' | 'rectangular';
-        /**
-          * Set to `"small"` for a checkbox with less height and padding or to `"default"` for a checkbox with the default height and padding.
-         */
-        "size"?: 'small' | 'default';
         /**
           * The theme determines the visual appearance of the component.
          */
@@ -9098,6 +9084,9 @@ declare namespace LocalJSX {
          */
         "theme"?: "ios" | "md" | "ionic";
     }
+    interface TestHeader {
+        "testTitle"?: string;
+    }
     interface IntrinsicElements {
         "ion-accordion": IonAccordion;
         "ion-accordion-group": IonAccordionGroup;
@@ -9192,6 +9181,7 @@ declare namespace LocalJSX {
         "ion-toast": IonToast;
         "ion-toggle": IonToggle;
         "ion-toolbar": IonToolbar;
+        "test-header": TestHeader;
     }
 }
 export { LocalJSX as JSX };
@@ -9291,6 +9281,7 @@ 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'], themes: ['ios', 'md', 'ionic'] }).forEach(({ title, config, screenshot }) => {
+configs({ directions: ['ltr'], modes: ['ios', 'md', 'ionic-md'] }).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'], themes: ['ionic'] }).forEach(({ title, screenshot, config }) => {
+configs({ directions: ['ltr'], modes: ['ionic-md'] }).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,8 +1,7 @@
 import { expect } from '@playwright/test';
 import { configs, test } from '@utils/test/playwright';
 
-// 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 }) => {
+configs({ directions: ['ltr'], modes: ['ionic-md', 'md', 'ios'] }).forEach(({ title, screenshot, config }) => {
   test.describe(title('button: size'), () => {
     test('should render small buttons', async ({ page }) => {
       await page.setContent(
@@ -65,7 +64,7 @@ configs({ directions: ['ltr'], themes: ['ionic', 'md', 'ios'] }).forEach(({ titl
 /**
  * The following tests are specific to the Ionic theme and do not depend on the text direction.
  */
-configs({ directions: ['ltr'], themes: ['ionic'] }).forEach(({ title, screenshot, config }) => {
+configs({ directions: ['ltr'], modes: ['ionic-md'] }).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/checkbox/checkbox.ionic.scss

@@ -1,165 +0,0 @@
-@import "./checkbox";
-@import "./checkbox.ionic.vars";
-
-// ionic Checkbox
-// --------------------------------------------------
-
-:host {
-  // Border
-  --border-radius: calc(var(--size) * .125);
-  --border-width: #{$checkbox-ionic-icon-border-width};
-  --border-style: #{$checkbox-ionic-icon-border-style};
-  --border-color: #{$checkbox-ionic-icon-border-color-off};
-  --checkmark-width: 3;
-  --padding-top: #{$checkbox-ionic-padding-top};
-  --padding-bottom: #{$checkbox-ionic-padding-bottom};
-
-  // Background
-  --checkbox-background: #{$checkbox-ionic-icon-background-color-off};
-
-  // Transition
-  --transition: #{background $checkbox-ionic-transition-duration $checkbox-ionic-transition-easing};
-
-  // Size
-  --size: #{$checkbox-ionic-icon-size};
-  // add to existing selector
-
-  // margin is required to make room for outline on focus, otherwise the outline may get cut off
-  @include margin($checkbox-ionic-outline-width);  
-  @include padding(--padding-top, null, --padding-bottom, null);
-
-  // Target area
-  &::after {
-    @include position(50%, 0, null, 0);
-
-    position: absolute;
-
-    height: 100%;
-    min-height: 48px;
-
-    transform: translateY(-50%);
-
-    content: "";
-
-    cursor: pointer;
-
-    z-index: 1;
-  }
-
-  .native-wrapper{
-    position: relative;
-  }
-}
-
-// Ionic Design Checkbox Sizes
-// --------------------------------------------------
-:host(.checkbox-small) {
-  --padding-top: #{$checkbox-ionic-small-padding-top};
-  --padding-bottom: #{$checkbox-ionic-small-padding-bottom};
-
-   // Size
-   --size: #{$checkbox-ionic-small-icon-size};
-}
-
-// Ionic Design Checkbox Shapes
-// --------------------------------------------------
-:host(.checkbox-rectangular) {
-  --border-radius: #{$checkbox-ionic-rectangular-border};
-}
-
-// Ionic Design Checkbox Disabled
-// --------------------------------------------------
-// disabled, indeterminate checkbox
-:host(.checkbox-disabled.checkbox-indeterminate) .checkbox-icon {
-  border-width: 0;
-
-  background-color: #74aafc;
-}
-
-// disabled, unchecked checkbox
-:host(.checkbox-disabled) .checkbox-icon {
-  border-color: #c9c9c9;
-
-  background-color: #f5f5f5;
-}
-// disabled, checked checkbox
-:host(.checkbox-disabled.checkbox-checked) .checkbox-icon {
-  border-width: 0;
-
-  background-color: #A8C8F8;
-}
-
-// Ionic Design Checkbox Required State
-// --------------------------------------------------
-// Unhecked checkbox with `required` property set to true
-:host(.checkbox-required:not(.checkbox-checked):not(.checkbox-indeterminate)) {
-  .checkbox-icon {
-    border-color: #f72c2c;
-  }
-}
-
-// Focused: Unchecked checkbox with `required` property set to true
-:host(.ion-focusable.checkbox-required:not(.checkbox-checked):not(.checkbox-indeterminate)) .checkbox-icon {
-  outline-color: #ffafaf;
-}
-
-// Ionic Design Checkbox Focus Ring
-// --------------------------------------------------
-:host(.ion-focused:not(.checkbox-disabled)) .focus-ring {
-  @include position(-4px, -4px, -4px, -4px);
-  position: absolute;
-
-  width: calc(100% + 8px);
-  height: calc(100% + 8px);
-
-  transition: border-color 0.3s;
-
-  border: 2px solid $checkbox-ionic-focus-ring-color;
-
-  @include border-radius(var(--border-radius));
-
-  content: "";
-  box-sizing: border-box;
-}
-
-// Required state
-:host(.ion-focused.checkbox-required) .focus-ring {
-  border-color:$checkbox-ionic-focus-required-ring-color;
-}
-
-// Checkbox: Hover
-// --------------------------------------------------------
-@media (any-hover: hover) {
-:host(:hover) .checkbox-icon {
-  background-color: #ececec; // mix of 'white', '#121212', 0.08, 'rgb'
-}
-
-:host(:hover.checkbox-checked) .checkbox-icon,
-:host(:hover.checkbox-indeterminate) .checkbox-icon {
-  background-color: #1061da; // mix of '#1068eb', '#121212', 0.08, 'rgb'
-}
-
-// unchecked checkbox with `required` property set to true
-:host(:hover.checkbox-required:not(.checkbox-checked):not(.checkbox-indeterminate)) {
-  .checkbox-icon {
-    border-color: #ee2b2b;
-  }
-}
-}
-
-// Checkbox: Active
-// --------------------------------------------------------
-:host(.ion-activated) .checkbox-icon {
-  background-color: #e3e3e3; // mix of 'white', '#121212', 0.12, 'rgb'
-}
-
-:host(.ion-activated.checkbox-checked) .checkbox-icon,
-:host(.ion-activated.checkbox-indeterminate) .checkbox-icon {
-  background-color: #105ed1; // mix of '#1068eb', '#121212', 0.12, 'rgb'
-}
-
-:host(.checkbox-label-placement-start) {
-  display: flex;
-
-  justify-content: space-between;
-}

core/src/components/checkbox/checkbox.ionic.vars.scss

@@ -1,63 +0,0 @@
-@import "../../themes/ionic.globals.md";
-@import "../item/item.md.vars";
-
-// ionic Checkbox
-// --------------------------------------------------
-
-/// @prop - Background color of the checkbox icon when off
-$checkbox-ionic-icon-background-color-off:  $item-md-background !default;
-
-/// @prop - Size of the checkbox icon
-/// The icon size does not use dynamic font
-/// because it does not scale in native.
-$checkbox-ionic-icon-size: 24px !default;
-
-/// @prop - Icon size of the checkbox for the small size
-$checkbox-ionic-small-icon-size: 16px !default;
-
-/// @prop - Border width of the checkbox icon
-$checkbox-ionic-icon-border-width: 1px !default;
-
-/// @prop - Border style of the checkbox icon
-$checkbox-ionic-icon-border-style: solid !default;
-
-/// @prop - Border color of the checkbox icon when off
-$checkbox-ionic-icon-border-color-off: #9a9a9a !default;
-
-/// @prop - Outline width of the checkbox
-$checkbox-ionic-outline-width: 2px !default;
-
-/// @prop - Padding top of the checkbox for the default size
-$checkbox-ionic-padding-top: 12px !default;
-
-/// @prop - Padding bottom of the button for the default size
-$checkbox-ionic-padding-bottom: 12px !default;
-
-/// @prop - Padding top of the checkbox for the small size
-$checkbox-ionic-small-padding-top: 16px !default;
-
-/// @prop - Padding bottom of the button for the small size
-$checkbox-ionic-small-padding-bottom: 16px !default;
-
-/// @prop - Focus color of the checkbox
-$checkbox-ionic-focus-ring-color: #9ec4fd !default;
-
-/// @prop - Focus color of the required checkbox
-$checkbox-ionic-focus-required-ring-color: #FFAFAF !default;
-
-/// @prop - Transition duration of the checkbox
-$checkbox-ionic-transition-duration: 180ms !default;
-
-/// @prop - Transition easing of the checkbox
-$checkbox-ionic-transition-easing: cubic-bezier(.4, 0, .2, 1) !default;
-
-
-// Checkbox Shapes
-// -------------------------------------------------------------------------------
-
-/* Rectangular */
-/// @prop - Rectangular border radius of the checkbox
-$checkbox-ionic-rectangular-border: 0 !default;
-
-
-

core/src/components/checkbox/checkbox.tsx

@@ -18,14 +18,13 @@ import type { CheckboxChangeEventDetail } from './checkbox-interface';
  * @part container - The container for the checkbox mark.
  * @part label - The label text describing the checkbox.
  * @part mark - The checkmark used to indicate the checked state.
- * @part focus-ring - The visual indicator that appears as an outline around the checkbox when focused. Only available for the Ionic theme.
  */
 @Component({
   tag: 'ion-checkbox',
   styleUrls: {
     ios: 'checkbox.ios.scss',
     md: 'checkbox.md.scss',
-    ionic: 'checkbox.ionic.scss',
+    ionic: 'checkbox.md.scss',
   },
   shadow: true,
 })
@@ -99,22 +98,6 @@ export class Checkbox implements ComponentInterface {
    */
   @Prop() alignment: 'start' | 'center' = 'center';
 
-  /**
-   * If `true`, the checkbox will be presented with an error style when it is unchecked.
-   */
-  @Prop() required = false;
-
-  /**
-   * Set to `"soft"` for a checkbox with more rounded corners.
-   */
-  @Prop() shape?: 'soft' | 'rectangular' = 'soft';
-
-  /**
-   * Set to `"small"` for a checkbox with less height and padding or to `"default"`
-   * for a checkbox with the default height and padding.
-   */
-  @Prop() size?: 'small' | 'default' = 'default';
-
   /**
    * Emitted when the checked property has changed
    * as a result of a user action such as a click.
@@ -198,9 +181,6 @@ export class Checkbox implements ComponentInterface {
       name,
       value,
       alignment,
-      required,
-      size,
-      shape,
     } = this;
     const theme = getIonTheme(this);
 
@@ -221,9 +201,6 @@ export class Checkbox implements ComponentInterface {
           [`checkbox-justify-${justify}`]: true,
           [`checkbox-alignment-${alignment}`]: true,
           [`checkbox-label-placement-${labelPlacement}`]: true,
-          'checkbox-required': required,
-          [`checkbox-${size}`]: true,
-          [`checkbox-${shape}`]: true,
         })}
         onClick={this.onClick}
       >
@@ -256,7 +233,6 @@ export class Checkbox implements ComponentInterface {
             <svg class="checkbox-icon" viewBox="0 0 24 24" part="container">
               {path}
             </svg>
-            {theme === 'ionic' && <div part="focus-ring" class="focus-ring"></div>}
           </div>
         </label>
       </Host>
@@ -276,12 +252,6 @@ export class Checkbox implements ComponentInterface {
       ) : (
         <path d="M1.73,12.91 8.1,19.28 22.79,4.59" part="mark" />
       );
-    } else if (theme === 'ionic') {
-      path = indeterminate ? (
-        <path d="M6.5 12H17.5" stroke-linecap="round" part="mark" />
-      ) : (
-        <path d="M6 12.5L10 16.5L18.5 8" stroke-linecap="round" stroke-linejoin="round" part="mark" />
-      );
     }
 
     return path;

core/src/components/checkbox/test/theme-ionic/checkbox.e2e.ts

@@ -1,43 +0,0 @@
-import { expect } from '@playwright/test';
-import type { E2EPage } from '@utils/test/playwright';
-import { configs, test } from '@utils/test/playwright';
-
-class CheckboxFixture {
-  readonly page: E2EPage;
-  readonly screenshotFn?: (file: string) => string;
-
-  constructor(page: E2EPage, screenshot?: (file: string) => string) {
-    this.page = page;
-    this.screenshotFn = screenshot;
-  }
-
-  async checkScreenshot(modifier: string) {
-    const { screenshotFn } = this;
-
-    if (!screenshotFn) {
-      throw new Error(
-        'A screenshot function is required to take a screenshot. Pass one in when creating CheckboxFixture.'
-      );
-    }
-
-    const wrapper = this.page.locator('#screenshot-wrapper');
-
-    await expect(wrapper).toHaveScreenshot(screenshotFn(`${modifier}-checkbox`));
-  }
-}
-
-configs({ themes: ['ionic'], modes: ['md'] }).forEach(({ config, screenshot, title }) => {
-  test.describe(title('checkbox: theme ionic'), () => {
-    let checkboxFixture!: CheckboxFixture;
-
-    test.beforeEach(async ({ page }) => {
-      await page.goto(`/src/components/checkbox/test/theme-ionic`, config);
-      await page.setIonViewport();
-      checkboxFixture = new CheckboxFixture(page, screenshot);
-    });
-
-    test('default', async () => {
-      await checkboxFixture.checkScreenshot(`default`);
-    });
-  });
-});

core/src/components/checkbox/test/theme-ionic/index.html

@@ -1,419 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" dir="ltr" theme="ionic">
-  <head>
-    <meta charset="UTF-8" />
-    <title>Checkbox - Basic</title>
-    <meta
-      name="viewport"
-      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
-    />
-    <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
-    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
-    <script src="../../../../../scripts/testing/scripts.js"></script>
-    <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
-    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
-  </head>
-  <style>
-    ion-checkbox.checkbox-part::part(mark) {
-      transform: scale(0.5);
-      transform-origin: center;
-    }
-    ion-col {
-      border: 1px solid cadetblue;
-    }
-  </style>
-  <body>
-    <ion-app>
-      <ion-header>
-        <ion-toolbar>
-          <ion-title>Checkbox - Basic</ion-title>
-        </ion-toolbar>
-      </ion-header>
-
-      <ion-content class="ion-padding">
-        <div id="checkboxes">
-          <ion-title>Label Placement Default</ion-title>
-          <ion-grid>
-            <ion-row>
-              <ion-col class="ion-text-center"><ion-title>Unchecked</ion-title></ion-col>
-            </ion-row>
-            <ion-row>
-              <ion-col class="ion-text-center">Default</ion-col>
-              <ion-col class="ion-text-center">Small</ion-col>
-            </ion-row>
-            <ion-row>
-              <ion-col><ion-checkbox>Default</ion-checkbox></ion-col>
-              <ion-col><ion-checkbox size="small" class="ion-margin-start">Default</ion-checkbox></ion-col>
-            </ion-row>
-            <ion-row>
-              <ion-col><ion-checkbox shape="rectangular" class="ion-margin-start">Rectangular</ion-checkbox></ion-col>
-              <ion-col>
-                <ion-checkbox size="small" shape="rectangular" class="ion-margin-start"> Rectangular</ion-checkbox>
-              </ion-col>
-            </ion-row>
-            <ion-row>
-              <ion-col><ion-checkbox class="ion-focused ion-margin-start">Focused</ion-checkbox></ion-col>
-              <ion-col><ion-checkbox size="small" class="ion-focused ion-margin-start">Focused</ion-checkbox></ion-col>
-            </ion-row>
-            <ion-row>
-              <ion-col>
-                <ion-checkbox shape="rectangular" class="ion-focused ion-margin-start">Rect Focus</ion-checkbox>
-              </ion-col>
-              <ion-col>
-                <ion-checkbox size="small" shape="rectangular" class="ion-focused ion-margin-start">
-                  Rect Focus
-                </ion-checkbox>
-              </ion-col>
-            </ion-row>
-          </ion-grid>
-
-          <ion-grid>
-            <ion-row>
-              <ion-col class="ion-text-center"><ion-title>Checked</ion-title></ion-col>
-            </ion-row>
-            <ion-row>
-              <ion-col class="ion-text-center">Default</ion-col>
-              <ion-col class="ion-text-center">Small</ion-col>
-            </ion-row>
-            <ion-row>
-              <ion-col><ion-checkbox checked>Default</ion-checkbox></ion-col>
-              <ion-col><ion-checkbox size="small" checked>Default</ion-checkbox></ion-col>
-            </ion-row>
-            <ion-row>
-              <ion-col><ion-checkbox shape="rectangular" checked>Rectangular</ion-checkbox></ion-col>
-              <ion-col><ion-checkbox size="small" shape="rectangular" checked>Rectangular</ion-checkbox></ion-col>
-            </ion-row>
-            <ion-row>
-              <ion-col><ion-checkbox class="ion-focused" checked>Focused</ion-checkbox></ion-col>
-              <ion-col><ion-checkbox size="small" class="ion-focused" checked>Focused</ion-checkbox></ion-col>
-            </ion-row>
-            <ion-row>
-              <ion-col><ion-checkbox shape="rectangular" class="ion-focused" checked>Rect Focus</ion-checkbox></ion-col>
-              <ion-col>
-                <ion-checkbox size="small" shape="rectangular" class="ion-focused" checked>Rect Focus</ion-checkbox>
-              </ion-col>
-            </ion-row>
-          </ion-grid>
-
-          <ion-grid>
-            <ion-row>
-              <ion-col class="ion-text-center"><ion-title>Disabled</ion-title></ion-col>
-            </ion-row>
-            <ion-row>
-              <ion-col class="ion-text-center">Default</ion-col>
-              <ion-col class="ion-text-center">Small</ion-col>
-            </ion-row>
-            <ion-row>
-              <ion-col><ion-checkbox disabled>Default</ion-checkbox></ion-col>
-              <ion-col><ion-checkbox size="small" disabled>Default</ion-checkbox></ion-col>
-            </ion-row>
-            <ion-row>
-              <ion-col><ion-checkbox shape="rectangular" disabled>Rectangular</ion-checkbox></ion-col>
-              <ion-col><ion-checkbox size="small" shape="rectangular" disabled>Rectangular</ion-checkbox></ion-col>
-            </ion-row>
-            <ion-row>
-              <ion-col><ion-checkbox class="ion-focused" disabled>Focused</ion-checkbox></ion-col>
-              <ion-col><ion-checkbox size="small" class="ion-focused" disabled>Focused</ion-checkbox></ion-col>
-            </ion-row>
-            <ion-row>
-              <ion-col>
-                <ion-checkbox shape="rectangular" class="ion-focused" disabled>Rect Focus</ion-checkbox>
-              </ion-col>
-              <ion-col>
-                <ion-checkbox size="small" shape="rectangular" class="ion-focused" disabled>Rect Focus</ion-checkbox>
-              </ion-col>
-            </ion-row>
-          </ion-grid>
-
-          <ion-grid>
-            <ion-row>
-              <ion-col class="ion-text-center"><ion-title>Required</ion-title></ion-col>
-            </ion-row>
-            <ion-row>
-              <ion-col class="ion-text-center">Default</ion-col>
-              <ion-col class="ion-text-center">Small</ion-col>
-            </ion-row>
-            <ion-row>
-              <ion-col><ion-checkbox required>Default</ion-checkbox></ion-col>
-              <ion-col><ion-checkbox size="small" required>Default</ion-checkbox></ion-col>
-            </ion-row>
-            <ion-row>
-              <ion-col><ion-checkbox shape="rectangular" required>Rectangular</ion-checkbox></ion-col>
-              <ion-col><ion-checkbox size="small" shape="rectangular" required>Rectangular</ion-checkbox></ion-col>
-            </ion-row>
-            <ion-row>
-              <ion-col><ion-checkbox class="ion-focused" required>Focused</ion-checkbox></ion-col>
-              <ion-col><ion-checkbox size="small" class="ion-focused" required>Small Focused</ion-checkbox></ion-col>
-            </ion-row>
-            <ion-row>
-              <ion-col>
-                <ion-checkbox shape="rectangular" class="ion-focused" required>Rect Focus</ion-checkbox>
-              </ion-col>
-              <ion-col>
-                <ion-checkbox size="small" shape="rectangular" class="ion-focused" required>Rect Focus</ion-checkbox>
-              </ion-col>
-            </ion-row>
-          </ion-grid>
-
-          <ion-grid>
-            <ion-row>
-              <ion-col class="ion-text-center"><ion-title>Indeterminate</ion-title></ion-col>
-            </ion-row>
-            <ion-row>
-              <ion-col class="ion-text-center">Default</ion-col>
-              <ion-col class="ion-text-center">Small</ion-col>
-            </ion-row>
-            <ion-row>
-              <ion-col><ion-checkbox indeterminate>Default</ion-checkbox></ion-col>
-              <ion-col><ion-checkbox size="small" indeterminate>Default</ion-checkbox></ion-col>
-            </ion-row>
-            <ion-row>
-              <ion-col><ion-checkbox shape="rectangular" indeterminate>Rectangular</ion-checkbox></ion-col>
-              <ion-col><ion-checkbox size="small" shape="rectangular" indeterminate>Rectangular</ion-checkbox></ion-col>
-            </ion-row>
-            <ion-row>
-              <ion-col><ion-checkbox class="ion-focused" indeterminate>Focused</ion-checkbox></ion-col>
-              <ion-col><ion-checkbox size="small" class="ion-focused" indeterminate>Focused</ion-checkbox></ion-col>
-            </ion-row>
-            <ion-row>
-              <ion-col>
-                <ion-checkbox shape="rectangular" class="ion-focused" indeterminate>Rect Focus</ion-checkbox>
-              </ion-col>
-              <ion-col>
-                <ion-checkbox size="small" shape="rectangular" class="ion-focused" indeterminate>
-                  Rect Focus
-                </ion-checkbox>
-              </ion-col>
-            </ion-row>
-          </ion-grid>
-        </div>
-
-        <div id="checkboxes2">
-          <ion-title>Label Placement End</ion-title>
-          <ion-grid>
-            <ion-row>
-              <ion-col class="ion-text-center"><ion-title>Unchecked</ion-title></ion-col>
-            </ion-row>
-            <ion-row>
-              <ion-col class="ion-text-center">Default</ion-col>
-              <ion-col class="ion-text-center">Small</ion-col>
-            </ion-row>
-            <ion-row>
-              <ion-col><ion-checkbox label-placement="end">Default</ion-checkbox></ion-col>
-              <ion-col>
-                <ion-checkbox label-placement="end" size="small" class="ion-margin-start">Default</ion-checkbox>
-              </ion-col>
-            </ion-row>
-            <ion-row>
-              <ion-col>
-                <ion-checkbox label-placement="end" shape="rectangular" class="ion-margin-start">
-                  Rectangular
-                </ion-checkbox>
-              </ion-col>
-              <ion-col>
-                <ion-checkbox label-placement="end" size="small" shape="rectangular" class="ion-margin-start">
-                  Rectangular
-                </ion-checkbox>
-              </ion-col>
-            </ion-row>
-            <ion-row>
-              <ion-col>
-                <ion-checkbox label-placement="end" class="ion-focused ion-margin-start">Focused</ion-checkbox>
-              </ion-col>
-              <ion-col>
-                <ion-checkbox label-placement="end" size="small" class="ion-focused ion-margin-start">
-                  Focused
-                </ion-checkbox>
-              </ion-col>
-            </ion-row>
-            <ion-row>
-              <ion-col>
-                <ion-checkbox label-placement="end" shape="rectangular" class="ion-focused ion-margin-start">
-                  Rect Focus
-                </ion-checkbox>
-              </ion-col>
-              <ion-col>
-                <ion-checkbox
-                  label-placement="end"
-                  size="small"
-                  shape="rectangular"
-                  class="ion-focused ion-margin-start"
-                >
-                  Rect Focus
-                </ion-checkbox>
-              </ion-col>
-            </ion-row>
-          </ion-grid>
-
-          <ion-grid>
-            <ion-row>
-              <ion-col class="ion-text-center"><ion-title>Checked</ion-title></ion-col>
-            </ion-row>
-            <ion-row>
-              <ion-col class="ion-text-center">Default</ion-col>
-              <ion-col class="ion-text-center">Small</ion-col>
-            </ion-row>
-            <ion-row>
-              <ion-col><ion-checkbox label-placement="end" checked>Default</ion-checkbox></ion-col>
-              <ion-col><ion-checkbox label-placement="end" size="small" checked>Default</ion-checkbox></ion-col>
-            </ion-row>
-            <ion-row>
-              <ion-col>
-                <ion-checkbox label-placement="end" shape="rectangular" checked>Rectangular</ion-checkbox>
-              </ion-col>
-              <ion-col>
-                <ion-checkbox label-placement="end" size="small" shape="rectangular" checked>Rectangular</ion-checkbox>
-              </ion-col>
-            </ion-row>
-            <ion-row>
-              <ion-col><ion-checkbox label-placement="end" class="ion-focused" checked>Focused</ion-checkbox></ion-col>
-              <ion-col>
-                <ion-checkbox label-placement="end" size="small" class="ion-focused" checked>Focused</ion-checkbox>
-              </ion-col>
-            </ion-row>
-            <ion-row>
-              <ion-col>
-                <ion-checkbox label-placement="end" shape="rectangular" class="ion-focused" checked>
-                  Rect Focus
-                </ion-checkbox>
-              </ion-col>
-              <ion-col>
-                <ion-checkbox label-placement="end" size="small" shape="rectangular" class="ion-focused" checked>
-                  Rect Focus
-                </ion-checkbox>
-              </ion-col>
-            </ion-row>
-          </ion-grid>
-
-          <ion-grid>
-            <ion-row>
-              <ion-col class="ion-text-center"><ion-title>Disabled</ion-title></ion-col>
-            </ion-row>
-            <ion-row>
-              <ion-col class="ion-text-center">Default</ion-col>
-              <ion-col class="ion-text-center">Small</ion-col>
-            </ion-row>
-            <ion-row>
-              <ion-col><ion-checkbox label-placement="end" disabled>Default</ion-checkbox></ion-col>
-              <ion-col><ion-checkbox label-placement="end" size="small" disabled>Default</ion-checkbox></ion-col>
-            </ion-row>
-            <ion-row>
-              <ion-col>
-                <ion-checkbox label-placement="end" shape="rectangular" disabled>Rectangular</ion-checkbox>
-              </ion-col>
-              <ion-col>
-                <ion-checkbox label-placement="end" size="small" shape="rectangular" disabled>Rectangular</ion-checkbox>
-              </ion-col>
-            </ion-row>
-            <ion-row>
-              <ion-col><ion-checkbox label-placement="end" class="ion-focused" disabled>Focused</ion-checkbox></ion-col>
-              <ion-col>
-                <ion-checkbox label-placement="end" size="small" class="ion-focused" disabled>Focused</ion-checkbox>
-              </ion-col>
-            </ion-row>
-            <ion-row>
-              <ion-col>
-                <ion-checkbox label-placement="end" shape="rectangular" class="ion-focused" disabled>
-                  Rect Focus
-                </ion-checkbox>
-              </ion-col>
-              <ion-col>
-                <ion-checkbox label-placement="end" size="small" shape="rectangular" class="ion-focused" disabled>
-                  Rect Focus
-                </ion-checkbox>
-              </ion-col>
-            </ion-row>
-          </ion-grid>
-
-          <ion-grid>
-            <ion-row>
-              <ion-col class="ion-text-center"><ion-title>Required</ion-title></ion-col>
-            </ion-row>
-            <ion-row>
-              <ion-col class="ion-text-center">Default</ion-col>
-              <ion-col class="ion-text-center">Small</ion-col>
-            </ion-row>
-            <ion-row>
-              <ion-col><ion-checkbox label-placement="end" required>Default</ion-checkbox></ion-col>
-              <ion-col><ion-checkbox label-placement="end" size="small" required>Default</ion-checkbox></ion-col>
-            </ion-row>
-            <ion-row>
-              <ion-col>
-                <ion-checkbox label-placement="end" shape="rectangular" required>Rectangular</ion-checkbox>
-              </ion-col>
-              <ion-col>
-                <ion-checkbox label-placement="end" size="small" shape="rectangular" required>Rectangular</ion-checkbox>
-              </ion-col>
-            </ion-row>
-            <ion-row>
-              <ion-col><ion-checkbox label-placement="end" class="ion-focused" required>Focused</ion-checkbox></ion-col>
-              <ion-col>
-                <ion-checkbox label-placement="end" size="small" class="ion-focused" required>
-                  Small Focused
-                </ion-checkbox>
-              </ion-col>
-            </ion-row>
-            <ion-row>
-              <ion-col>
-                <ion-checkbox label-placement="end" shape="rectangular" class="ion-focused" required>
-                  Rect Focus
-                </ion-checkbox>
-              </ion-col>
-              <ion-col>
-                <ion-checkbox label-placement="end" size="small" shape="rectangular" class="ion-focused" required>
-                  Rect Focus
-                </ion-checkbox>
-              </ion-col>
-            </ion-row>
-          </ion-grid>
-
-          <ion-grid>
-            <ion-row>
-              <ion-col class="ion-text-center"><ion-title>Indeterminate</ion-title></ion-col>
-            </ion-row>
-            <ion-row>
-              <ion-col class="ion-text-center">Default</ion-col>
-              <ion-col class="ion-text-center">Small</ion-col>
-            </ion-row>
-            <ion-row>
-              <ion-col><ion-checkbox label-placement="end" indeterminate>Default</ion-checkbox></ion-col>
-              <ion-col><ion-checkbox label-placement="end" size="small" indeterminate>Default</ion-checkbox></ion-col>
-            </ion-row>
-            <ion-row>
-              <ion-col>
-                <ion-checkbox label-placement="end" shape="rectangular" indeterminate>Rectangular</ion-checkbox>
-              </ion-col>
-              <ion-col>
-                <ion-checkbox label-placement="end" size="small" shape="rectangular" indeterminate>
-                  Rectangular
-                </ion-checkbox>
-              </ion-col>
-            </ion-row>
-            <ion-row>
-              <ion-col>
-                <ion-checkbox label-placement="end" class="ion-focused" indeterminate>Focused</ion-checkbox>
-              </ion-col>
-              <ion-col>
-                <ion-checkbox label-placement="end" size="small" class="ion-focused" indeterminate>
-                  Focused
-                </ion-checkbox>
-              </ion-col>
-            </ion-row>
-            <ion-row>
-              <ion-col>
-                <ion-checkbox label-placement="end" shape="rectangular" class="ion-focused" indeterminate>
-                  Rect Focus
-                </ion-checkbox>
-              </ion-col>
-              <ion-col>
-                <ion-checkbox label-placement="end" size="small" shape="rectangular" class="ion-focused" indeterminate>
-                  Rect Focus
-                </ion-checkbox>
-              </ion-col>
-            </ion-row>
-          </ion-grid>
-        </div>
-      </ion-content>
-    </ion-app>
-  </body>
-</html>

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

@@ -31,10 +31,6 @@
         }
       }
 
-      .options-popover {
-        --width: 300px;
-      }
-
       ion-modal.ios,
       ion-popover.datetime-popover.ios {
         --width: 350px;
@@ -49,206 +45,36 @@
       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>
-      <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>
+      <test-header test-title="Datetime - Basic">
+        <div slot="items">
+          <ion-item>
+            <ion-toggle id="titleToggle">Show Default Title</ion-toggle>
+          </ion-item>
 
-              <ion-item>
-                <ion-toggle id="titleToggle">Show Default Title</ion-toggle>
-              </ion-item>
+          <ion-item>
+            <ion-toggle id="buttonsToggle">Show Default Buttons</ion-toggle>
+          </ion-item>
 
-              <ion-item>
-                <ion-toggle id="buttonsToggle">Show Default Buttons</ion-toggle>
-              </ion-item>
+          <ion-item>
+            <ion-input label="Locale" placeholder="default" id="locale"></ion-input>
+          </ion-item>
 
-              <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-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-content class="ion-padding">
         <div class="grid">
           <div class="grid-item">
@@ -333,14 +159,6 @@
           });
         });
 
-        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,11 +44,7 @@
 
   <body>
     <ion-app>
-      <ion-header>
-        <ion-toolbar>
-          <ion-title>Picker - Basic</ion-title>
-        </ion-toolbar>
-      </ion-header>
+      <test-header test-title="Picker - Basic"></test-header>
       <ion-content class="ion-padding">
         <div class="grid">
           <div class="grid-item">

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

@@ -1,6 +1,4 @@
-import { isModeValidForTheme } from '../../../global/ionic-global';
-
-export type Mode = 'ios' | 'md';
+export type Mode = 'ios' | 'md' | 'ionic-ios' | 'ionic-md';
 export type Direction = 'ltr' | 'rtl';
 export type Theme = 'ios' | 'md' | 'ionic';
 
@@ -19,9 +17,9 @@ export type ScreenshotFn = (fileName: string) => string;
 
 export interface TestConfig {
   direction: Direction;
-  theme: Theme;
   palette: Palette;
   mode: Mode;
+  theme: Theme;
 }
 
 interface TestUtilities {
@@ -31,14 +29,36 @@ interface TestUtilities {
 }
 
 interface TestConfigOption {
-  modes?: Mode[];
-  directions?: Direction[];
-  palettes?: Palette[];
   /**
-   * The individual themes (iOS, Material Design and Ionic) to test
-   * against. If unspecified, defaults iOS and Material Design
+   * 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".
    */
-  themes?: Theme[];
+  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[];
 }
 
 /**
@@ -48,14 +68,17 @@ interface TestConfigOption {
  * each test title is unique.
  */
 const generateTitle = (title: string, config: TestConfig): string => {
-  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.
-     */
+  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') {
     if (palette === 'light') {
       /**
        * Ionic has many existing tests that existed prior to
@@ -63,10 +86,9 @@ 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} - ${theme}/${direction}`;
+      return `${title} - ${mode}/${direction}`;
     }
-
-    return `${title} - ${theme}/${direction}/${palette}`;
+    return `${title} - ${mode}/${direction}/${palette}`;
   }
 
   return `${title} - ${theme}/${mode}/${direction}/${palette}`;
@@ -77,13 +99,16 @@ const generateTitle = (title: string, config: TestConfig): string => {
  * and a test config.
  */
 const generateScreenshotName = (fileName: string, config: TestConfig): string => {
-  const { theme, direction, palette, mode } = config;
-
-  if (theme === mode) {
-    /**
-     * Fallback to the old screenshot naming convention
-     * when the theme and mode are the same.
-     */
+  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') {
     if (palette === 'light') {
       /**
        * Ionic has many existing tests that existed prior to
@@ -91,10 +116,9 @@ 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}-${theme}-${direction}.png`;
+      return `${fileName}-${mode}-${direction}.png`;
     }
-
-    return `${fileName}-${theme}-${direction}-${palette}.png`;
+    return `${fileName}-${mode}-${direction}-${palette}.png`;
   }
 
   return `${fileName}-${theme}-${mode}-${direction}-${palette}.png`;
@@ -104,7 +128,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, themes, directions } = testConfig;
+  const { modes, directions } = testConfig;
 
   const configs: TestConfig[] = [];
 
@@ -113,19 +137,17 @@ 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) => {
-    processedTheme.forEach((theme) => {
-      if (!isModeValidForTheme(mode, theme)) {
-        return;
-      }
-      processedDirection.forEach((direction) => {
-        processedPalette.forEach((palette) => {
-          configs.push({ theme, direction, palette, 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 });
       });
     });
   });
@@ -140,13 +162,11 @@ 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

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

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

@@ -0,0 +1,81 @@
+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,5 +82,6 @@ export const DIRECTIVES = [
   d.IonTitle,
   d.IonToast,
   d.IonToggle,
-  d.IonToolbar
+  d.IonToolbar,
+  d.TestHeader
 ];

packages/angular/src/directives/proxies.ts

@@ -509,14 +509,14 @@ export declare interface IonCardTitle extends Components.IonCardTitle {}
 
 
 @ProxyCmp({
-  inputs: ['alignment', 'checked', 'color', 'disabled', 'indeterminate', 'justify', 'labelPlacement', 'mode', 'name', 'required', 'shape', 'size', 'theme', 'value']
+  inputs: ['alignment', 'checked', 'color', 'disabled', 'indeterminate', 'justify', 'labelPlacement', 'mode', 'name', 'theme', 'value']
 })
 @Component({
   selector: 'ion-checkbox',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['alignment', 'checked', 'color', 'disabled', 'indeterminate', 'justify', 'labelPlacement', 'mode', 'name', 'required', 'shape', 'size', 'theme', 'value'],
+  inputs: ['alignment', 'checked', 'color', 'disabled', 'indeterminate', 'justify', 'labelPlacement', 'mode', 'name', 'theme', 'value'],
 })
 export class IonCheckbox {
   protected el: HTMLElement;
@@ -2427,3 +2427,25 @@ 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,6 +76,7 @@ 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']
@@ -2152,3 +2153,27 @@ 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,6 +73,7 @@ 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);
@@ -142,3 +143,4 @@ 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,6 +78,7 @@ 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, [
@@ -217,9 +218,6 @@ export const IonCheckbox = /*@__PURE__*/ defineContainer<JSX.IonCheckbox, JSX.Io
   'labelPlacement',
   'justify',
   'alignment',
-  'required',
-  'shape',
-  'size',
   'ionChange',
   'ionFocus',
   'ionBlur'
@@ -883,3 +881,8 @@ export const IonToolbar = /*@__PURE__*/ defineContainer<JSX.IonToolbar>('ion-too
   'color'
 ]);
 
+
+export const TestHeader = /*@__PURE__*/ defineContainer<JSX.TestHeader>('test-header', defineTestHeader, [
+  'testTitle'
+]);
+