@ionic/core 8.2.2 → 8.2.3-dev.11718879673.1a3f486b

package/dist/collection/components/toolbar/toolbar.js

@@ -3,14 +3,15 @@
  */
 import { Host, forceUpdate, h } from "@stencil/core";
 import { createColorClasses, hostContext } from "../../utils/theme";
-import { getIonMode } from "../../global/ionic-global";
+import { getIonTheme } from "../../global/ionic-global";
 /**
- * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
+ * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component.
+ * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the visual appearance of the component.
  *
  * @slot - Content is placed between the named slots if provided without a slot.
  * @slot start - Content is placed to the left of the toolbar text in LTR, and to the right in RTL.
- * @slot secondary - Content is placed to the left of the toolbar text in `ios` mode, and directly to the right in `md` mode.
- * @slot primary - Content is placed to the right of the toolbar text in `ios` mode, and to the far right in `md` mode.
+ * @slot secondary - Content is placed to the left of the toolbar text in the `"ios"` theme, and directly to the right in the `"md"` theme.
+ * @slot primary - Content is placed to the right of the toolbar text in the `"ios"` theme, and to the far right in the `"md"` theme.
  * @slot end - Content is placed to the right of the toolbar text in LTR, and to the left in RTL.
  */
 export class Toolbar {
@@ -57,28 +58,30 @@ export class Toolbar {
         }
     }
     render() {
-        const mode = getIonMode(this);
+        const theme = getIonTheme(this);
         const childStyles = {};
         this.childrenStyles.forEach((value) => {
             Object.assign(childStyles, value);
         });
-        return (h(Host, { key: '4bb3a55001408a3bdf033af76b9196cb96c07c09', class: Object.assign(Object.assign({}, childStyles), createColorClasses(this.color, {
-                [mode]: true,
+        return (h(Host, { key: 'c9f11ae0421cf4f9cae4e1abd939c325fd2d2e5e', class: Object.assign(Object.assign({}, childStyles), createColorClasses(this.color, {
+                [theme]: true,
                 'in-toolbar': hostContext('ion-toolbar', this.el),
-            })) }, h("div", { key: '0891db157d6e028c6d03696f13fb510ea91b0296', class: "toolbar-background" }), h("div", { key: '95fbc870d808f74af4bb18cd8f8ec8c7828a9e0b', class: "toolbar-container" }, h("slot", { key: '84d4a9644660fe00ca085055ca8d12f3647531ad', name: "start" }), h("slot", { key: 'fd361dc9c9979f59aed2fedcf94629506fae62b0', name: "secondary" }), h("div", { key: '54d2b28616a4627c55766f66dc453707752758a6', class: "toolbar-content" }, h("slot", { key: '8f65e0830cce7135640b90eb694e282cb7e5efd2' })), h("slot", { key: 'c78be11a207c8674f222543646398636956087e6', name: "primary" }), h("slot", { key: 'ab25e1601ccaa8cb0d81921b849bcb7402aa7826', name: "end" }))));
+            })) }, h("div", { key: '43a695fd567085bbd0aa57f800348c9bf63bd4d3', class: "toolbar-background" }), h("div", { key: '2d6a8337447c8372cdb24ed0b40deffba24d1e5a', class: "toolbar-container" }, h("slot", { key: '1ab1c4e1d92c3aea3569d8351305c360d8729f6d', name: "start" }), h("slot", { key: '8ed80710494ce7c7ea6b926f45108e09d4525d92', name: "secondary" }), h("div", { key: '42db9b97f1bddcec771dc3d24849891980ceef0a', class: "toolbar-content" }, h("slot", { key: '24969adfabc7a16283ef0f5de4dbe2f1804b9326' })), h("slot", { key: '692c4e4ef377170664da5815a66ed59361b1222e', name: "primary" }), h("slot", { key: '880abf04839952984e4053be77fe1c1a7b71981a', name: "end" }))));
     }
     static get is() { return "ion-toolbar"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
             "ios": ["toolbar.ios.scss"],
-            "md": ["toolbar.md.scss"]
+            "md": ["toolbar.md.scss"],
+            "ionic": ["toolbar.md.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["toolbar.ios.css"],
-            "md": ["toolbar.md.css"]
+            "md": ["toolbar.md.css"],
+            "ionic": ["toolbar.md.css"]
         };
     }
     static get properties() {

package/dist/collection/components/toolbar/toolbar.md.css

@@ -1,3 +1,9 @@
+/**
+ * Convert a pixels given value into rem
+ * 
+ * @param pixels - Value in pixels to be converted (i.e. px)
+ * @param context (optional) - Baseline value
+ */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use
@@ -119,8 +125,8 @@
 }
 
 .toolbar-background {
-  left: 0;
   right: 0;
+  left: 0;
   top: 0;
   bottom: 0;
   position: absolute;
@@ -136,12 +142,18 @@
 }
 
 ::slotted(ion-progress-bar) {
-  left: 0;
   right: 0;
+  left: 0;
   bottom: 0;
   position: absolute;
 }
 
+/**
+ * Convert a pixels given value into rem
+ * 
+ * @param pixels - Value in pixels to be converted (i.e. px)
+ * @param context (optional) - Baseline value
+ */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use

package/dist/collection/css/test/link/basic/link.e2e.js

@@ -0,0 +1,35 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { expect } from "@playwright/test";
+import { configs, test } from "../../../../utils/test/playwright/index";
+/**
+ * Link global classes are only available in the Ionic theme.
+ */
+configs({ modes: ['ionic-md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+    test.describe(title('link global classes'), () => {
+        test.beforeEach(async ({ page }) => {
+            await page.goto('/src/css/test/link/basic/index.html', config);
+        });
+        test.describe('.ion-link class', () => {
+            test('should apply to anchor elements', async ({ page }) => {
+                const standalone = page.locator('#standalone');
+                await expect(standalone).toHaveScreenshot(screenshot('link-standalone'));
+            });
+            test('should apply to child anchor elements', async ({ page }) => {
+                const standalone = page.locator('#standalone-nested');
+                await expect(standalone).toHaveScreenshot(screenshot('link-standalone-nested'));
+            });
+        });
+        test.describe('.ion-link-underline class', () => {
+            test('should apply to anchor elements', async ({ page }) => {
+                const standalone = page.locator('#underline');
+                await expect(standalone).toHaveScreenshot(screenshot('link-underline'));
+            });
+            test('should apply to child anchor elements', async ({ page }) => {
+                const standalone = page.locator('#underline-nested');
+                await expect(standalone).toHaveScreenshot(screenshot('link-underline-nested'));
+            });
+        });
+    });
+});

package/dist/collection/css/test/{a11y → typography/a11y}/typography.e2e.js

@@ -3,7 +3,7 @@
  */
 import AxeBuilder from "@axe-core/playwright";
 import { expect } from "@playwright/test";
-import { configs, test } from "../../../utils/test/playwright/index";
+import { configs, test } from "../../../../utils/test/playwright/index";
 configs({ directions: ['ltr'], modes: ['ios'] }).forEach(({ title, screenshot, config }) => {
     test.describe(title('typography: font scaling'), () => {
         test('should scale text on larger font sizes', async ({ page }) => {

package/dist/collection/css/test/typography/basic/typography.e2e.js

@@ -0,0 +1,14 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { expect } from "@playwright/test";
+import { configs, test } from "../../../../utils/test/playwright/index";
+configs({ modes: ['ionic-md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+    test.describe(title('Typography: basic'), () => {
+        test('should not have visual regressions', async ({ page }) => {
+            await page.goto(`/src/css/test/typography/basic`, config);
+            await page.setIonViewport();
+            await expect(page).toHaveScreenshot(screenshot(`ionic-typography-basic-styles`));
+        });
+    });
+});

package/dist/collection/global/ionic-global.js

@@ -1,13 +1,120 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { getMode, setMode, setPlatformHelpers } from "@stencil/core";
+import { getMode, setMode, setPlatformHelpers, getElement } from "@stencil/core";
+import { printIonWarning } from "../utils/logging/index";
 import { isPlatform, setupPlatforms } from "../utils/platform";
 import { config, configFromSession, configFromURL, saveConfig } from "./config";
-// TODO(FW-2832): types
 let defaultMode;
-export const getIonMode = (ref) => {
-    return (ref && getMode(ref)) || defaultMode;
+let defaultTheme = 'md';
+/**
+ * Prints a warning message to the developer to inform them of
+ * an invalid configuration of mode and theme.
+ * @param mode The invalid mode configuration.
+ * @param theme The invalid theme configuration.
+ */
+const printInvalidModeWarning = (mode, theme, ref) => {
+    printIonWarning(`Invalid mode and theme combination provided: mode: ${mode}, theme: ${theme}. Fallback mode ${getDefaultModeForTheme(theme)} will be used.`, ref);
+};
+/**
+ * Validates if a mode is accepted for a theme configuration.
+ * @param mode The mode to validate.
+ * @param theme The theme the mode is being used with.
+ * @returns `true` if the mode is valid for the theme, `false` if invalid.
+ */
+export const isModeValidForTheme = (mode, theme) => {
+    if (mode === 'md') {
+        return theme === 'md' || theme === 'ionic';
+    }
+    else if (mode === 'ios') {
+        return theme === 'ios' || theme === 'ionic';
+    }
+    return false;
+};
+/**
+ * Returns the default mode for a specified theme.
+ * @param theme The theme to return a default mode for.
+ * @returns The default mode, either `ios` or `md`.
+ */
+const getDefaultModeForTheme = (theme) => {
+    if (theme === 'ios') {
+        return 'ios';
+    }
+    return 'md';
+};
+/**
+ * Returns the default theme for a specified mode.
+ * @param mode The mode to return a default theme for.
+ * @returns The default theme.
+ */
+const getDefaultThemeForMode = (mode) => {
+    if (mode === 'ios') {
+        return 'ios';
+    }
+    return 'md';
+};
+const isModeSupported = (elmMode) => ['ios', 'md'].includes(elmMode);
+const isThemeSupported = (theme) => ['ios', 'md', 'ionic'].includes(theme);
+const isIonicElement = (elm) => { var _a; return (_a = elm.tagName) === null || _a === void 0 ? void 0 : _a.startsWith('ION-'); };
+/**
+ * Returns the mode value of the element reference or the closest
+ * parent with a valid mode.
+ * @param ref The element reference to look up the mode for.
+ * @param theme Optionally can provide the theme to avoid an additional look-up.
+ * @returns The mode value for the element reference.
+ */
+export const getIonMode = (ref, theme = getIonTheme(ref)) => {
+    var _a;
+    if ((ref === null || ref === void 0 ? void 0 : ref.mode) && isModeValidForTheme(ref === null || ref === void 0 ? void 0 : ref.mode, theme)) {
+        /**
+         * If the reference already has a mode configuration,
+         * use it instead of performing a look-up.
+         */
+        return ref.mode;
+    }
+    else {
+        const el = getElement(ref);
+        const mode = ((_a = el.closest('[mode]')) === null || _a === void 0 ? void 0 : _a.getAttribute('mode')) || defaultMode;
+        if (isModeValidForTheme(mode, theme)) {
+            /**
+             * The mode configuration is supported for the configured theme.
+             */
+            return mode;
+        }
+        else {
+            printInvalidModeWarning(mode, theme, ref);
+        }
+    }
+    return getDefaultModeForTheme(theme);
+};
+/**
+ * Returns the theme value of the element reference or the closest
+ * parent with a valid theme.
+ *
+ * @param ref The element reference to look up the theme for.
+ * @returns The theme value for the element reference, defaults to
+ * the default theme if it cannot be determined.
+ */
+export const getIonTheme = (ref) => {
+    var _a, _b;
+    const theme = ref && getMode(ref);
+    if (theme) {
+        return theme;
+    }
+    /**
+     * If the theme cannot be detected, then fallback to using
+     * the `mode` attribute to determine the style sheets to use.
+     */
+    const el = getElement(ref);
+    const mode = (_a = ref === null || ref === void 0 ? void 0 : ref.mode) !== null && _a !== void 0 ? _a : (_b = el.closest('[mode]')) === null || _b === void 0 ? void 0 : _b.getAttribute('mode');
+    if (mode) {
+        return getDefaultThemeForMode(mode);
+    }
+    /**
+     * If a mode is not detected, then fallback to using the
+     * default theme.
+     */
+    return defaultTheme;
 };
 export const initialize = (userConfig = {}) => {
     if (typeof window === 'undefined') {
@@ -36,33 +143,74 @@ export const initialize = (userConfig = {}) => {
     }
     // Setup platforms
     setupPlatforms(win);
-    // first see if the mode was set as an attribute on <html>
-    // which could have been set by the user, or by pre-rendering
-    // otherwise get the mode via config settings, and fallback to md
     Ionic.config = config;
+    /**
+     * Check if the mode was set as an attribute on <html>
+     * which could have been set by the user, or by pre-rendering
+     * otherwise get the mode via config settings, and fallback to md.
+     */
     Ionic.mode = defaultMode = config.get('mode', doc.documentElement.getAttribute('mode') || (isPlatform(win, 'ios') ? 'ios' : 'md'));
+    /**
+     * Check if the theme was set as an attribute on <html>
+     * which could have been set by the user, or by pre-rendering
+     * otherwise get the theme via config settings, and fallback to md.
+     */
+    Ionic.theme = defaultTheme = config.get('theme', doc.documentElement.getAttribute('theme') || getDefaultThemeForMode(defaultMode));
+    if (!isModeValidForTheme(defaultMode, defaultTheme)) {
+        printInvalidModeWarning(defaultMode, defaultTheme, configObj);
+        defaultMode = getDefaultModeForTheme(defaultTheme);
+    }
     config.set('mode', defaultMode);
     doc.documentElement.setAttribute('mode', defaultMode);
     doc.documentElement.classList.add(defaultMode);
+    config.set('theme', defaultTheme);
+    doc.documentElement.setAttribute('theme', defaultTheme);
+    doc.documentElement.classList.add(defaultTheme);
     if (config.getBoolean('_testing')) {
         config.set('animated', false);
     }
-    const isIonicElement = (elm) => { var _a; return (_a = elm.tagName) === null || _a === void 0 ? void 0 : _a.startsWith('ION-'); };
-    const isAllowedIonicModeValue = (elmMode) => ['ios', 'md'].includes(elmMode);
     setMode((elm) => {
+        /**
+         * Iterate over all the element nodes, to both validate and
+         * set the "mode" that is used for determining the styles to
+         * apply to the element.
+         *
+         * setMode refers to Stencil's internal metadata for "mode",
+         * which is used to set the correct styleUrl for the component.
+         *
+         * If the "theme" attribute or property is set, then use it
+         * to determine the style sheets to use.
+         *
+         * If the "mode" attribute or property is set, then use it
+         * to determine the style sheets to use. This is fallback
+         * behavior for applications that are not setting the "theme".
+         */
         while (elm) {
-            const elmMode = elm.mode || elm.getAttribute('mode');
+            const theme = elm.getAttribute('theme');
+            if (theme) {
+                if (isThemeSupported(theme)) {
+                    return theme;
+                }
+                else if (isIonicElement(elm)) {
+                    printIonWarning(`Invalid theme: "${theme}". Supported themes include: "ios" or "md".`);
+                }
+            }
+            /**
+             * If a theme is not detected, then fallback to using the
+             * `mode` attribute to determine the style sheets to use.
+             */
+            const elmMode = elm.getAttribute('mode');
             if (elmMode) {
-                if (isAllowedIonicModeValue(elmMode)) {
+                if (isModeSupported(elmMode)) {
                     return elmMode;
                 }
                 else if (isIonicElement(elm)) {
-                    console.warn('Invalid ionic mode: "' + elmMode + '", expected: "ios" or "md"');
+                    printIonWarning(`Invalid mode: "${elmMode}". Ionic modes can be only "ios" or "md"`);
                 }
             }
             elm = elm.parentElement;
         }
-        return defaultMode;
+        return defaultTheme;
     });
 };
 export default initialize;

package/dist/collection/global/test/ionic-global.spec.js

@@ -0,0 +1,109 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+const getMode = jest.fn();
+const getElement = jest.fn();
+jest.mock('@stencil/core', () => {
+    const original = jest.requireActual('@stencil/core');
+    return Object.assign(Object.assign({}, original), { getMode,
+        getElement });
+});
+/**
+ * The implementation needs to be mocked before the implementation is imported.
+ */
+// eslint-disable-next-line import/first
+import { getIonTheme, isModeValidForTheme, getIonMode } from "../ionic-global";
+describe('Ionic Global', () => {
+    describe('isModeValidForTheme', () => {
+        it('should return true for md mode with md theme', () => {
+            expect(isModeValidForTheme('md', 'md')).toBe(true);
+        });
+        it('should return true for md mode with ionic theme', () => {
+            expect(isModeValidForTheme('md', 'ionic')).toBe(true);
+        });
+        it('should return true for ios mode with ios theme', () => {
+            expect(isModeValidForTheme('ios', 'ios')).toBe(true);
+        });
+        it('should return true for ios mode with ionic theme', () => {
+            expect(isModeValidForTheme('ios', 'ionic')).toBe(true);
+        });
+        it('should return false for md mode with ios theme', () => {
+            expect(isModeValidForTheme('md', 'ios')).toBe(false);
+        });
+        it('should return false for ios mode with md theme', () => {
+            expect(isModeValidForTheme('ios', 'md')).toBe(false);
+        });
+    });
+    describe('getIonMode', () => {
+        const parentRef = { mode: 'md' };
+        const ref = { parentElement: parentRef };
+        beforeEach(() => {
+            getMode.mockImplementation((ref) => { var _a; return (_a = ref.mode) !== null && _a !== void 0 ? _a : parentRef.mode; });
+            getElement.mockImplementation(() => ({
+                closest: () => ({
+                    getAttribute: () => parentRef.mode,
+                }),
+            }));
+        });
+        afterEach(() => {
+            getMode.mockReset();
+            getElement.mockReset();
+        });
+        it('should return the mode value of the element reference', () => {
+            const ref = { mode: 'ios' };
+            getMode.mockImplementation((ref) => ref.mode);
+            getElement.mockImplementation(() => ({
+                closest: () => ({
+                    getAttribute: () => ref.mode,
+                }),
+            }));
+            expect(getIonMode(ref, 'ios')).toBe('ios');
+        });
+        it('should return the mode value of the closest parent with a valid mode', () => {
+            expect(getIonMode(ref)).toBe('md');
+        });
+        it('should return the default mode if the mode cannot be determined', () => {
+            expect(getIonMode()).toBe('md');
+        });
+        it('should return the theme value if provided and no mode is found', () => {
+            const ref = { mode: undefined };
+            const theme = 'ios';
+            expect(getIonMode(ref, theme)).toBe('ios');
+        });
+    });
+    describe('getIonTheme', () => {
+        const parentRef = { mode: 'md' };
+        beforeEach(() => {
+            getMode.mockImplementation((ref) => { var _a; return (_a = ref === null || ref === void 0 ? void 0 : ref.mode) !== null && _a !== void 0 ? _a : parentRef.mode; });
+            getElement.mockImplementation(() => ({
+                closest: () => ({
+                    getAttribute: () => parentRef.mode,
+                }),
+            }));
+        });
+        afterEach(() => {
+            getMode.mockReset();
+            getElement.mockReset();
+        });
+        it('should return the theme value of the element reference', () => {
+            const ref = { mode: 'ios' };
+            expect(getIonTheme(ref)).toBe('ios');
+        });
+        it('should return the theme value of the closest parent with a valid theme', () => {
+            getElement.mockImplementation(() => ({
+                closest: () => ({
+                    getAttribute: () => 'ios',
+                }),
+            }));
+            expect(getIonTheme()).toBe('ios');
+        });
+        it('should return the default theme if it cannot be determined', () => {
+            getElement.mockImplementation(() => ({
+                closest: () => ({
+                    getAttribute: () => null,
+                }),
+            }));
+            expect(getIonTheme()).toBe('md');
+        });
+    });
+});

package/dist/collection/themes/{test → native/test}/colors/theme.e2e.js

@@ -3,7 +3,7 @@
  */
 import AxeBuilder from "@axe-core/playwright";
 import { expect } from "@playwright/test";
-import { configs, test } from "../../../utils/test/playwright/index";
+import { configs, test } from "../../../../utils/test/playwright/index";
 /**
  * Small text is defined as 14pt (~18.5px)
  * when computing color contrast: https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html

package/dist/collection/utils/menu-controller/animations/overlay.js

@@ -27,8 +27,8 @@ export const menuOverlayAnimation = (menu) => {
     }
     menuAnimation.addElement(menu.menuInnerEl).fromTo('transform', `translateX(${closedX})`, `translateX(${openedX})`);
     const mode = getIonMode(menu);
-    const isIos = mode === 'ios';
-    const opacity = isIos ? 0.2 : 0.25;
+    const isIOS = mode === 'ios';
+    const opacity = isIOS ? 0.2 : 0.25;
     backdropAnimation.addElement(menu.backdropEl).fromTo('opacity', 0.01, opacity);
-    return baseAnimation(isIos).addAnimation([menuAnimation, backdropAnimation]);
+    return baseAnimation(isIOS).addAnimation([menuAnimation, backdropAnimation]);
 };

package/dist/collection/utils/menu-controller/animations/push.js

@@ -14,6 +14,7 @@ export const menuPushAnimation = (menu) => {
     let menuClosedX;
     const mode = getIonMode(menu);
     const width = menu.width;
+    const isIOS = mode === 'ios';
     if (menu.isEndSide) {
         contentOpenedX = -width + 'px';
         menuClosedX = width + 'px';
@@ -29,5 +30,5 @@ export const menuPushAnimation = (menu) => {
         .addElement(menu.contentEl)
         .fromTo('transform', 'translateX(0px)', `translateX(${contentOpenedX})`);
     const backdropAnimation = createAnimation().addElement(menu.backdropEl).fromTo('opacity', 0.01, 0.32);
-    return baseAnimation(mode === 'ios').addAnimation([menuAnimation, contentAnimation, backdropAnimation]);
+    return baseAnimation(isIOS).addAnimation([menuAnimation, contentAnimation, backdropAnimation]);
 };

package/dist/collection/utils/menu-controller/animations/reveal.js

@@ -11,9 +11,10 @@ import { baseAnimation } from "./base";
  */
 export const menuRevealAnimation = (menu) => {
     const mode = getIonMode(menu);
+    const isIOS = mode === 'ios';
     const openedX = menu.width * (menu.isEndSide ? -1 : 1) + 'px';
     const contentOpen = createAnimation()
         .addElement(menu.contentEl) // REVIEW
         .fromTo('transform', 'translateX(0px)', `translateX(${openedX})`);
-    return baseAnimation(mode === 'ios').addAnimation(contentOpen);
+    return baseAnimation(isIOS).addAnimation(contentOpen);
 };

package/dist/collection/utils/test/playwright/generator.js

@@ -8,34 +8,56 @@
  * each test title is unique.
  */
 const generateTitle = (title, config) => {
-    const { mode, direction, palette } = config;
-    if (palette === 'light') {
-        /**
-         * Ionic has many existing tests that existed prior to
-         * the introduction of palette testing. To maintain backwards
-         * compatibility, we will not include the palette in the test
-         * title if the palette is set to light.
-         */
-        return `${title} - ${mode}/${direction}`;
+    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
+             * the introduction of theme testing. To maintain backwards
+             * compatibility, we will not include the theme in the test
+             * title if the theme is set to light.
+             */
+            return `${title} - ${mode}/${direction}`;
+        }
+        return `${title} - ${mode}/${direction}/${palette}`;
     }
-    return `${title} - ${mode}/${direction}/${palette}`;
+    return `${title} - ${theme}/${mode}/${direction}/${palette}`;
 };
 /**
  * Generates a unique filename based on a base filename
  * and a test config.
  */
 const generateScreenshotName = (fileName, config) => {
-    const { mode, direction, palette } = config;
-    if (palette === 'light') {
-        /**
-         * Ionic has many existing tests that existed prior to
-         * the introduction of palette testing. To maintain backwards
-         * compatibility, we will not include the palette in the screenshot
-         * name if the palette is set to light.
-         */
-        return `${fileName}-${mode}-${direction}.png`;
+    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
+             * the introduction of theme testing. To maintain backwards
+             * 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}-${mode}-${direction}-${palette}.png`;
     }
-    return `${fileName}-${mode}-${direction}-${palette}.png`;
+    return `${fileName}-${theme}-${mode}-${direction}-${palette}.png`;
 };
 /**
  * Given a config generate an array of test variants.
@@ -48,13 +70,16 @@ export const configs = (testConfig = DEFAULT_TEST_CONFIG_OPTION) => {
      * If certain options are not provided,
      * fall back to the defaults.
      */
-    const processedMode = modes !== null && modes !== void 0 ? modes : DEFAULT_MODES;
+    const processedModes = modes !== null && modes !== void 0 ? modes : DEFAULT_MODES;
     const processedDirection = directions !== null && directions !== void 0 ? directions : DEFAULT_DIRECTIONS;
     const processedPalette = (_a = testConfig.palettes) !== null && _a !== void 0 ? _a : DEFAULT_PALETTES;
-    processedMode.forEach((mode) => {
+    processedModes.forEach((mode) => {
+        const [themeOrCombinedMode, modeName] = mode.split('-');
+        const parsedTheme = themeOrCombinedMode;
+        const parsedMode = modeName !== null && modeName !== void 0 ? modeName : themeOrCombinedMode;
         processedDirection.forEach((direction) => {
             processedPalette.forEach((palette) => {
-                configs.push({ mode, direction, palette });
+                configs.push({ direction, palette, mode: parsedMode, theme: parsedTheme });
             });
         });
     });