@ionic/core 8.0.0-dev.11709632212.139b6f63 → 8.0.0-dev.11711408410.14d71406

package/dist/collection/utils/native/haptic.js

@@ -46,12 +46,6 @@ export var NotificationType;
 })(NotificationType || (NotificationType = {}));
 const HapticEngine = {
     getEngine() {
-        const tapticEngine = window.TapticEngine;
-        if (tapticEngine) {
-            // Cordova
-            // TODO FW-4707 - Remove this in Ionic 8
-            return tapticEngine;
-        }
         const capacitor = getCapacitor();
         if (capacitor === null || capacitor === void 0 ? void 0 : capacitor.isPluginAvailable('Haptics')) {
             // Capacitor
@@ -80,85 +74,43 @@ const HapticEngine = {
         }
         return true;
     },
-    isCordova() {
-        return window.TapticEngine !== undefined;
-    },
-    isCapacitor() {
-        return getCapacitor() !== undefined;
-    },
     impact(options) {
         const engine = this.getEngine();
         if (!engine) {
             return;
         }
-        /**
-         * To provide backwards compatibility with Cordova apps,
-         * we convert the style to lowercase.
-         *
-         * TODO: FW-4707 - Remove this in Ionic 8
-         */
-        const style = this.isCapacitor() ? options.style : options.style.toLowerCase();
-        engine.impact({ style });
+        engine.impact({ style: options.style });
     },
     notification(options) {
         const engine = this.getEngine();
         if (!engine) {
             return;
         }
-        /**
-         * To provide backwards compatibility with Cordova apps,
-         * we convert the style to lowercase.
-         *
-         * TODO: FW-4707 - Remove this in Ionic 8
-         */
-        const type = this.isCapacitor() ? options.type : options.type.toLowerCase();
-        engine.notification({ type });
+        engine.notification({ type: options.type });
     },
     selection() {
-        /**
-         * To provide backwards compatibility with Cordova apps,
-         * we convert the style to lowercase.
-         *
-         * TODO: FW-4707 - Remove this in Ionic 8
-         */
-        const style = this.isCapacitor() ? ImpactStyle.Light : 'light';
-        this.impact({ style });
+        this.impact({ style: ImpactStyle.Light });
     },
     selectionStart() {
         const engine = this.getEngine();
         if (!engine) {
             return;
         }
-        if (this.isCapacitor()) {
-            engine.selectionStart();
-        }
-        else {
-            engine.gestureSelectionStart();
-        }
+        engine.selectionStart();
     },
     selectionChanged() {
         const engine = this.getEngine();
         if (!engine) {
             return;
         }
-        if (this.isCapacitor()) {
-            engine.selectionChanged();
-        }
-        else {
-            engine.gestureSelectionChanged();
-        }
+        engine.selectionChanged();
     },
     selectionEnd() {
         const engine = this.getEngine();
         if (!engine) {
             return;
         }
-        if (this.isCapacitor()) {
-            engine.selectionEnd();
-        }
-        else {
-            engine.gestureSelectionEnd();
-        }
+        engine.selectionEnd();
     },
 };
 /**

package/dist/collection/utils/overlays.js

@@ -2,7 +2,8 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { doc } from "./browser/index";
-import { shoudUseCloseWatcher } from "./hardware-back-button";
+import { focusFirstDescendant, focusLastDescendant, focusableQueryString } from "./focus-trap";
+import { shouldUseCloseWatcher } from "./hardware-back-button";
 import { config } from "../global/config";
 import { getIonMode } from "../global/ionic-global";
 import { CoreDelegate } from "./framework-delegate";
@@ -90,39 +91,7 @@ export const createOverlay = (tagName, opts) => {
     }
     return Promise.resolve();
 };
-/**
- * This query string selects elements that
- * are eligible to receive focus. We select
- * interactive elements that meet the following
- * criteria:
- * 1. Element does not have a negative tabindex
- * 2. Element does not have `hidden`
- * 3. Element does not have `disabled` for non-Ionic components.
- * 4. Element does not have `disabled` or `disabled="true"` for Ionic components.
- * Note: We need this distinction because `disabled="false"` is
- * valid usage for the disabled property on ion-button.
- */
-const focusableQueryString = '[tabindex]:not([tabindex^="-"]):not([hidden]):not([disabled]), input:not([type=hidden]):not([tabindex^="-"]):not([hidden]):not([disabled]), textarea:not([tabindex^="-"]):not([hidden]):not([disabled]), button:not([tabindex^="-"]):not([hidden]):not([disabled]), select:not([tabindex^="-"]):not([hidden]):not([disabled]), .ion-focusable:not([tabindex^="-"]):not([hidden]):not([disabled]), .ion-focusable[disabled="false"]:not([tabindex^="-"]):not([hidden])';
 const isOverlayHidden = (overlay) => overlay.classList.contains('overlay-hidden');
-/**
- * Focuses the first descendant in an overlay
- * that can receive focus. If none exists,
- * the entire overlay will be focused.
- */
-export const focusFirstDescendant = (ref, overlay) => {
-    const firstInput = ref.querySelector(focusableQueryString);
-    focusElementInOverlay(firstInput, overlay);
-};
-/**
- * Focuses the last descendant in an overlay
- * that can receive focus. If none exists,
- * the entire overlay will be focused.
- */
-const focusLastDescendant = (ref, overlay) => {
-    const inputs = Array.from(ref.querySelectorAll(focusableQueryString));
-    const lastInput = inputs.length > 0 ? inputs[inputs.length - 1] : null;
-    focusElementInOverlay(lastInput, overlay);
-};
 /**
  * Focuses a particular element in an overlay. If the element
  * doesn't have anything focusable associated with it then
@@ -313,7 +282,7 @@ const trapKeyboardFocus = (ev, doc) => {
              */
             const lastFocus = lastOverlay.lastFocus;
             // Focus the first element in the overlay wrapper
-            focusFirstDescendant(lastOverlay, lastOverlay);
+            focusFirstDescendant(lastOverlay);
             /**
              * If the cached last focused element is the
              * same as the active element, then we need
@@ -324,7 +293,7 @@ const trapKeyboardFocus = (ev, doc) => {
              * last focus to equal the active element.
              */
             if (lastFocus === doc.activeElement) {
-                focusLastDescendant(lastOverlay, lastOverlay);
+                focusLastDescendant(lastOverlay);
             }
             lastOverlay.lastFocus = doc.activeElement;
         }
@@ -369,7 +338,7 @@ const connectListeners = (doc) => {
          * this behavior will be handled via the ionBackButton
          * event.
          */
-        if (!shoudUseCloseWatcher()) {
+        if (!shouldUseCloseWatcher()) {
             doc.addEventListener('keydown', (ev) => {
                 if (ev.key === 'Escape') {
                     const lastOverlay = getPresentedOverlay(doc);
@@ -460,15 +429,7 @@ export const present = async (overlay, name, iosEnterAnimation, mdEnterAnimation
     }
     setRootAriaHidden(true);
     document.body.classList.add(BACKDROP_NO_SCROLL);
-    /**
-     * Hide all other overlays from screen readers so only this one
-     * can be read. Note that presenting an overlay always makes
-     * it the topmost one.
-     */
-    if (doc !== undefined) {
-        const presentedOverlays = getPresentedOverlays(doc);
-        presentedOverlays.forEach((o) => o.setAttribute('aria-hidden', 'true'));
-    }
+    hideOverlaysFromScreenReaders(overlay.el);
     overlay.presented = true;
     overlay.willPresent.emit();
     (_a = overlay.willPresentShorthand) === null || _a === void 0 ? void 0 : _a.emit();
@@ -561,7 +522,7 @@ const restoreElementFocus = async (overlayEl) => {
     }
 };
 export const dismiss = async (overlay, data, role, name, iosLeaveAnimation, mdLeaveAnimation, opts) => {
-    var _a, _b, _c;
+    var _a, _b;
     if (!overlay.presented) {
         return false;
     }
@@ -614,13 +575,7 @@ export const dismiss = async (overlay, data, role, name, iosLeaveAnimation, mdLe
         console.error(err);
     }
     overlay.el.remove();
-    /**
-     * If there are other overlays presented, unhide the new
-     * topmost one from screen readers.
-     */
-    if (doc !== undefined) {
-        (_c = getPresentedOverlay(doc)) === null || _c === void 0 ? void 0 : _c.removeAttribute('aria-hidden');
-    }
+    revealOverlaysToScreenReaders();
     return true;
 };
 const getAppRoot = (doc) => {
@@ -816,3 +771,59 @@ export const createTriggerController = () => {
         removeClickListener,
     };
 };
+/**
+ * Ensure that underlying overlays have aria-hidden if necessary so that screen readers
+ * cannot move focus to these elements. Note that we cannot rely on focus/focusin/focusout
+ * events here because those events do not fire when the screen readers moves to a non-focusable
+ * element such as text.
+ * Without this logic screen readers would be able to move focus outside of the top focus-trapped overlay.
+ *
+ * @param newTopMostOverlay - The overlay that is being presented. Since the overlay has not been
+ * fully presented yet at the time this function is called it will not be included in the getPresentedOverlays result.
+ */
+const hideOverlaysFromScreenReaders = (newTopMostOverlay) => {
+    var _a;
+    if (doc === undefined)
+        return;
+    const overlays = getPresentedOverlays(doc);
+    for (let i = overlays.length - 1; i >= 0; i--) {
+        const presentedOverlay = overlays[i];
+        const nextPresentedOverlay = (_a = overlays[i + 1]) !== null && _a !== void 0 ? _a : newTopMostOverlay;
+        /**
+         * If next overlay has aria-hidden then all remaining overlays will have it too.
+         * Or, if the next overlay is a Toast that does not have aria-hidden then current overlay
+         * should not have aria-hidden either so focus can remain in the current overlay.
+         */
+        if (nextPresentedOverlay.hasAttribute('aria-hidden') || nextPresentedOverlay.tagName !== 'ION-TOAST') {
+            presentedOverlay.setAttribute('aria-hidden', 'true');
+        }
+    }
+};
+/**
+ * When dismissing an overlay we need to reveal the new top-most overlay to screen readers.
+ * If the top-most overlay is a Toast we potentially need to reveal more overlays since
+ * focus is never automatically moved to the Toast.
+ */
+const revealOverlaysToScreenReaders = () => {
+    if (doc === undefined)
+        return;
+    const overlays = getPresentedOverlays(doc);
+    for (let i = overlays.length - 1; i >= 0; i--) {
+        const currentOverlay = overlays[i];
+        /**
+         * If the current we are looking at is a Toast then we can remove aria-hidden.
+         * However, we potentially need to keep looking at the overlay stack because there
+         * could be more Toasts underneath. Additionally, we need to unhide the closest non-Toast
+         * overlay too so focus can move there since focus is never automatically moved to the Toast.
+         */
+        currentOverlay.removeAttribute('aria-hidden');
+        /**
+         * If we found a non-Toast element then we can just remove aria-hidden and stop searching entirely
+         * since this overlay should always receive focus. As a result, all underlying overlays should still
+         * be hidden from screen readers.
+         */
+        if (currentOverlay.tagName !== 'ION-TOAST') {
+            break;
+        }
+    }
+};

package/dist/collection/utils/slot-mutation-controller.js

@@ -45,6 +45,18 @@ export const createSlotMutationController = (el, slotName, mutationCallback) =>
         });
         hostMutationObserver.observe(el, {
             childList: true,
+            /**
+             * This fixes an issue with the `ion-input` and
+             * `ion-textarea` not re-rendering in some cases
+             * when using the label slot functionality.
+             *
+             * HTML element patches in Stencil that are enabled
+             * by the `experimentalSlotFixes` flag in Stencil v4
+             * result in DOM manipulations that won't trigger
+             * the current mutation observer configuration and
+             * callback.
+             */
+            subtree: true,
         });
     }
     /**

package/dist/collection/utils/tap-click/index.js

@@ -2,43 +2,17 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { doc } from "../browser/index";
-import { now, pointerCoord } from "../helpers";
+import { pointerCoord } from "../helpers";
 export const startTapClick = (config) => {
     if (doc === undefined) {
         return;
     }
-    let lastTouch = -MOUSE_WAIT * 10;
     let lastActivated = 0;
     let activatableEle;
     let activeRipple;
     let activeDefer;
     const useRippleEffect = config.getBoolean('animated', true) && config.getBoolean('rippleEffect', true);
     const clearDefers = new WeakMap();
-    // Touch Events
-    const onTouchStart = (ev) => {
-        lastTouch = now(ev);
-        pointerDown(ev);
-    };
-    const onTouchEnd = (ev) => {
-        lastTouch = now(ev);
-        pointerUp(ev);
-    };
-    const onMouseDown = (ev) => {
-        // Ignore right clicks
-        if (ev.button === 2) {
-            return;
-        }
-        const t = now(ev) - MOUSE_WAIT;
-        if (lastTouch < t) {
-            pointerDown(ev);
-        }
-    };
-    const onMouseUp = (ev) => {
-        const t = now(ev) - MOUSE_WAIT;
-        if (lastTouch < t) {
-            pointerUp(ev);
-        }
-    };
     const cancelActive = () => {
         if (activeDefer)
             clearTimeout(activeDefer);
@@ -49,7 +23,8 @@ export const startTapClick = (config) => {
         }
     };
     const pointerDown = (ev) => {
-        if (activatableEle) {
+        // Ignore right clicks
+        if (activatableEle || ev.button === 2) {
             return;
         }
         setActivatedElement(getActivatableTarget(ev), ev);
@@ -133,9 +108,8 @@ export const startTapClick = (config) => {
         }
     };
     doc.addEventListener('ionGestureCaptured', cancelActive);
-    doc.addEventListener('touchstart', onTouchStart, true);
-    doc.addEventListener('touchcancel', onTouchEnd, true);
-    doc.addEventListener('touchend', onTouchEnd, true);
+    doc.addEventListener('pointerdown', pointerDown, true);
+    doc.addEventListener('pointerup', pointerUp, true);
     /**
      * Tap click effects such as the ripple effect should
      * not happen when scrolling. For example, if a user scrolls
@@ -149,8 +123,6 @@ export const startTapClick = (config) => {
      * ion-content's scroll events.
      */
     doc.addEventListener('pointercancel', cancelActive, true);
-    doc.addEventListener('mousedown', onMouseDown, true);
-    doc.addEventListener('mouseup', onMouseUp, true);
 };
 // TODO(FW-2832): type
 const getActivatableTarget = (ev) => {
@@ -190,4 +162,3 @@ const getRippleEffect = (el) => {
 const ACTIVATED = 'ion-activated';
 const ADD_ACTIVATED_DEFERS = 100;
 const CLEAR_STATE_DEFERS = 150;
-const MOUSE_WAIT = 2500;

package/dist/collection/utils/test/overlays/overlays.spec.js

@@ -3,6 +3,7 @@
  */
 import { newSpecPage } from "@stencil/core/testing";
 import { Modal } from "../../../components/modal/modal";
+import { Toast } from "../../../components/toast/toast";
 import { Nav } from "../../../components/nav/nav";
 import { RouterOutlet } from "../../../components/router-outlet/router-outlet";
 import { setRootAriaHidden } from "../../overlays";
@@ -150,4 +151,56 @@ describe('aria-hidden on individual overlays', () => {
         await modalOne.present();
         expect(modalOne.hasAttribute('aria-hidden')).toEqual(false);
     });
+    it('should not hide previous overlay if top-most overlay is toast', async () => {
+        const page = await newSpecPage({
+            components: [Modal, Toast],
+            html: `
+        <ion-modal id="m-one"></ion-modal>
+        <ion-modal id="m-two"></ion-modal>
+        <ion-toast id="t-one"></ion-toast>
+        <ion-toast id="t-two"></ion-toast>
+      `,
+        });
+        const modalOne = page.body.querySelector('ion-modal#m-one');
+        const modalTwo = page.body.querySelector('ion-modal#m-two');
+        const toastOne = page.body.querySelector('ion-toast#t-one');
+        const toastTwo = page.body.querySelector('ion-toast#t-two');
+        await modalOne.present();
+        await modalTwo.present();
+        await toastOne.present();
+        await toastTwo.present();
+        expect(modalOne.hasAttribute('aria-hidden')).toEqual(true);
+        expect(modalTwo.hasAttribute('aria-hidden')).toEqual(false);
+        expect(toastOne.hasAttribute('aria-hidden')).toEqual(false);
+        expect(toastTwo.hasAttribute('aria-hidden')).toEqual(false);
+        await toastTwo.dismiss();
+        expect(modalOne.hasAttribute('aria-hidden')).toEqual(true);
+        expect(modalTwo.hasAttribute('aria-hidden')).toEqual(false);
+        expect(toastOne.hasAttribute('aria-hidden')).toEqual(false);
+        await toastOne.dismiss();
+        expect(modalOne.hasAttribute('aria-hidden')).toEqual(true);
+        expect(modalTwo.hasAttribute('aria-hidden')).toEqual(false);
+    });
+    it('should hide previous overlay even with a toast that is not the top-most overlay', async () => {
+        const page = await newSpecPage({
+            components: [Modal, Toast],
+            html: `
+        <ion-modal id="m-one"></ion-modal>
+        <ion-toast id="t-one"></ion-toast>
+        <ion-modal id="m-two"></ion-modal>
+      `,
+        });
+        const modalOne = page.body.querySelector('ion-modal#m-one');
+        const modalTwo = page.body.querySelector('ion-modal#m-two');
+        const toastOne = page.body.querySelector('ion-toast#t-one');
+        await modalOne.present();
+        await toastOne.present();
+        await modalTwo.present();
+        expect(modalOne.hasAttribute('aria-hidden')).toEqual(true);
+        expect(toastOne.hasAttribute('aria-hidden')).toEqual(true);
+        expect(modalTwo.hasAttribute('aria-hidden')).toEqual(false);
+        await modalTwo.dismiss();
+        expect(modalOne.hasAttribute('aria-hidden')).toEqual(false);
+        expect(toastOne.hasAttribute('aria-hidden')).toEqual(false);
+    });
 });

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

@@ -1,6 +1,7 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
+import { isModeValidForTheme } from "../../../global/ionic-global";
 /**
  * Generates a unique test title based on a base title
  * and a test config. Playwright uses test titles to generate
@@ -8,53 +9,73 @@
  * each test title is unique.
  */
 const generateTitle = (title, config) => {
-    const { mode, direction, theme } = config;
-    if (theme === 'light') {
+    const { direction, palette, theme, mode } = config;
+    if (theme === mode) {
         /**
-         * 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.
+         * Fallback to the old test title naming convention
+         * when the theme and mode are the same.
          */
-        return `${title} - ${mode}/${direction}`;
+        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} - ${theme}/${direction}`;
+        }
+        return `${title} - ${theme}/${direction}/${palette}`;
     }
-    return `${title} - ${mode}/${direction}/${theme}`;
+    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, theme } = config;
-    if (theme === 'light') {
+    const { theme, direction, palette, mode } = config;
+    if (theme === mode) {
         /**
-         * 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.
+         * Fallback to the old screenshot naming convention
+         * when the theme and mode are the same.
          */
-        return `${fileName}-${mode}-${direction}.png`;
+        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}-${theme}-${direction}.png`;
+        }
+        return `${fileName}-${theme}-${direction}-${palette}.png`;
     }
-    return `${fileName}-${mode}-${direction}-${theme}.png`;
+    return `${fileName}-${theme}-${mode}-${direction}-${palette}.png`;
 };
 /**
  * Given a config generate an array of test variants.
  */
 export const configs = (testConfig = DEFAULT_TEST_CONFIG_OPTION) => {
     var _a;
-    const { modes, directions } = testConfig;
+    const { modes, themes, directions } = testConfig;
     const configs = [];
     /**
      * 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 processedTheme = themes !== null && themes !== void 0 ? themes : DEFAULT_THEMES;
     const processedDirection = directions !== null && directions !== void 0 ? directions : DEFAULT_DIRECTIONS;
-    const processedTheme = (_a = testConfig.themes) !== null && _a !== void 0 ? _a : DEFAULT_THEMES;
-    processedMode.forEach((mode) => {
-        processedDirection.forEach((direction) => {
-            processedTheme.forEach((theme) => {
-                configs.push({ mode, direction, theme });
+    const processedPalette = (_a = testConfig.palettes) !== null && _a !== void 0 ? _a : 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 });
+                });
             });
         });
     });
@@ -67,10 +88,12 @@ export const configs = (testConfig = DEFAULT_TEST_CONFIG_OPTION) => {
     });
 };
 const DEFAULT_MODES = ['ios', 'md'];
+const DEFAULT_THEMES = ['ios', 'md'];
 const DEFAULT_DIRECTIONS = ['ltr', 'rtl'];
-const DEFAULT_THEMES = ['light'];
+const DEFAULT_PALETTES = ['light'];
 const DEFAULT_TEST_CONFIG_OPTION = {
     modes: DEFAULT_MODES,
-    directions: DEFAULT_DIRECTIONS,
     themes: DEFAULT_THEMES,
+    directions: DEFAULT_DIRECTIONS,
+    palettes: DEFAULT_PALETTES,
 };

package/dist/collection/utils/test/playwright/page/utils/goto.js

@@ -9,7 +9,7 @@
  * to be hydrated before proceeding with the test.
  */
 export const goto = async (page, url, testInfo, originalFn, options) => {
-    var _a, _b, _c;
+    var _a, _b, _c, _d;
     if (options === undefined && testInfo.project.metadata.mode === undefined) {
         throw new Error(`
 A config must be passed to page.goto to use a generator test:
@@ -21,13 +21,16 @@ configs().forEach(({ config, title }) => {
 });`);
     }
     let mode;
+    let theme;
     let direction;
     if (options == undefined) {
         mode = testInfo.project.metadata.mode;
+        theme = testInfo.project.metadata.theme;
         direction = testInfo.project.metadata.rtl ? 'rtl' : 'ltr';
     }
     else {
         mode = options.mode;
+        theme = options.theme;
         direction = options.direction;
     }
     const rtlString = direction === 'rtl' ? 'true' : undefined;
@@ -39,12 +42,14 @@ configs().forEach(({ config, title }) => {
      */
     const urlToParams = new URLSearchParams(paramsString);
     const formattedMode = (_a = urlToParams.get('ionic:mode')) !== null && _a !== void 0 ? _a : mode;
-    const formattedRtl = (_b = urlToParams.get('rtl')) !== null && _b !== void 0 ? _b : rtlString;
-    const ionicTesting = (_c = urlToParams.get('ionic:_testing')) !== null && _c !== void 0 ? _c : true;
+    const formattedTheme = (_b = urlToParams.get('ionic:theme')) !== null && _b !== void 0 ? _b : theme;
+    const formattedRtl = (_c = urlToParams.get('rtl')) !== null && _c !== void 0 ? _c : rtlString;
+    const ionicTesting = (_d = urlToParams.get('ionic:_testing')) !== null && _d !== void 0 ? _d : true;
     /**
      * Pass through other custom query params
      */
     urlToParams.delete('ionic:mode');
+    urlToParams.delete('ionic:theme');
     urlToParams.delete('rtl');
     urlToParams.delete('ionic:_testing');
     /**
@@ -54,11 +59,15 @@ configs().forEach(({ config, title }) => {
      */
     const remainingQueryParams = decodeURIComponent(urlToParams.toString());
     const remainingQueryParamsString = remainingQueryParams == '' ? '' : `&${remainingQueryParams}`;
-    const formattedUrl = `${splitUrl[0]}?ionic:_testing=${ionicTesting}&ionic:mode=${formattedMode}&rtl=${formattedRtl}${remainingQueryParamsString}`;
+    const formattedUrl = `${splitUrl[0]}?ionic:_testing=${ionicTesting}&ionic:mode=${formattedMode}&ionic:theme=${formattedTheme}&rtl=${formattedRtl}${remainingQueryParamsString}`;
     testInfo.annotations.push({
         type: 'mode',
         description: formattedMode,
     });
+    testInfo.annotations.push({
+        type: 'theme',
+        description: formattedTheme,
+    });
     testInfo.annotations.push({
         type: 'direction',
         description: formattedRtl === 'true' ? 'rtl' : 'ltr',

package/dist/collection/utils/test/playwright/page/utils/set-content.js

@@ -19,15 +19,18 @@ export const setContent = async (page, html, testInfo, options) => {
     let mode;
     let direction;
     let theme;
+    let palette;
     if (options == undefined) {
         mode = testInfo.project.metadata.mode;
         direction = testInfo.project.metadata.rtl ? 'rtl' : 'ltr';
         theme = testInfo.project.metadata.theme;
+        palette = testInfo.project.metadata.palette;
     }
     else {
         mode = options.mode;
         direction = options.direction;
         theme = options.theme;
+        palette = options.palette;
     }
     const baseUrl = process.env.PLAYWRIGHT_TEST_BASE_URL;
     const output = `
@@ -39,13 +42,14 @@ export const setContent = async (page, html, testInfo, options) => {
         <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
         <link href="${baseUrl}/css/ionic.bundle.css" rel="stylesheet" />
         <link href="${baseUrl}/scripts/testing/styles.css" rel="stylesheet" />
-        ${theme !== 'light' ? `<link href="${baseUrl}/css/themes/${theme}.always.css" rel="stylesheet" />` : ''}
+        ${palette !== 'light' ? `<link href="${baseUrl}/css/palettes/${palette}.always.css" rel="stylesheet" />` : ''}
         <script src="${baseUrl}/scripts/testing/scripts.js"></script>
         <script type="module" src="${baseUrl}/dist/ionic/ionic.esm.js"></script>
         <script>
           window.Ionic = {
             config: {
-              mode: '${mode}'
+              mode: '${mode}',
+              theme: '${theme}'
             }
           }
         </script>
@@ -55,6 +59,14 @@ export const setContent = async (page, html, testInfo, options) => {
       </body>
     </html>
   `;
+    testInfo.annotations.push({
+        type: 'mode',
+        description: mode,
+    });
+    testInfo.annotations.push({
+        type: 'palette',
+        description: palette,
+    });
     testInfo.annotations.push({
         type: 'theme',
         description: theme,