@ionic/core 8.8.16-dev.11784914346.10d0804c → 8.8.16-dev.11785274070.1b3387c9

package/dist/collection/utils/overlays.js

@@ -6,7 +6,7 @@ import { focusFirstDescendant, focusLastDescendant, focusableQueryString } from
 import { shouldUseCloseWatcher } from "./hardware-back-button";
 import { printIonError, printIonWarning } from "./logging/index";
 import { config } from "../global/config";
-import { getIonMode, getIonTheme } from "../global/ionic-global";
+import { getIonMode } from "../global/ionic-global";
 import { CoreDelegate } from "./framework-delegate";
 import { BACKDROP_NO_SCROLL } from "./gesture/gesture-controller";
 import { OVERLAY_BACK_BUTTON_PRIORITY } from "./hardware-back-button";
@@ -14,115 +14,8 @@ import { addEventListener, componentOnReady, focusVisibleElement, getElementRoot
 let lastOverlayIndex = 0;
 let lastId = 0;
 export const activeAnimations = new WeakMap();
-const OVERLAY_FOCUS_TRAP_SELECTOR = 'ion-alert,ion-action-sheet,ion-loading,ion-modal,ion-picker-legacy,ion-popover';
 /**
- * The focus trap is generic and knows nothing about which components are
- * inside an overlay. Components mark their elements with these `data-*`
- * attributes, which the trap reads, to control how Tab moves through them.
- * This keeps private component class names (e.g. `.modal-handle`,
- * `.action-sheet-button`) out of the trap, so changing a component does
- *  not silently break Tab order.
- *
- * - `data-focus-ignore`: skip this element as a tab stop.
- * - `data-focus-order`: explicit numeric placement in the tab sequence.
- * - `data-roving-focus`: a container whose focusable descendants share a
- *   single tab stop via a roving tabindex.
- */
-const FOCUS_IGNORE_SELECTOR = '[data-focus-ignore]';
-const FOCUS_ORDER_SELECTOR = '[data-focus-order]';
-const ROVING_FOCUS_SELECTOR = '[data-roving-focus]';
-/**
- * Returns the roving-focus group an element belongs to, or `null`.
- * A member is a descendant of a `[data-roving-focus]` container. The
- * container itself is not a member. Members share a single tab stop.
- */
-const getRovingFocusGroup = (el) => {
-    const group = el.closest(ROVING_FOCUS_SELECTOR);
-    return group !== null && group !== el ? group : null;
-};
-/**
- * Whether an element participates in a roving-focus group.
- */
-const isRovingFocusItem = (el) => getRovingFocusGroup(el) !== null;
-/**
- * Returns the currently focused element for keyboard focus checks.
- *
- * Starts from `document.activeElement` (non-shadow / light DOM focus).
- * If focus is inside one or more open shadow roots
- * (e.g. native control inside `ion-radio`), walks through nested
- * `shadowRoot.activeElement` values until the innermost focused node is reached.
- */
-const getActiveElement = (ownerDoc) => {
-    var _a;
-    let active = ownerDoc.activeElement;
-    if (!active) {
-        return null;
-    }
-    while ((_a = active.shadowRoot) === null || _a === void 0 ? void 0 : _a.activeElement) {
-        active = active.shadowRoot.activeElement;
-    }
-    return active;
-};
-/**
- * Walks from a focused node (possibly deep inside shadow roots) up to
- * the nearest roving-focus host (e.g. `ion-radio` inside an
- * `ion-radio-group`, or an action sheet `<button role="radio">`).
- */
-const getRovingFocusHost = (active) => {
-    let n = active;
-    while (n) {
-        if (isRovingFocusItem(n)) {
-            return n;
-        }
-        const root = n.getRootNode();
-        if (root instanceof ShadowRoot && root.host instanceof HTMLElement) {
-            n = root.host;
-        }
-        else {
-            return null;
-        }
-    }
-    return null;
-};
-/**
- * Reorders focusables for components that declare an explicit tab order
- * via `data-focus-order`. Elements without the attribute keep their
- * visual order and are visited first. Elements with it are appended
- * afterwards, sorted by ascending numeric value.
- *
- * Example (sheet modal): the options have no order and are visited
- * first in visual order, then the drag handle (`data-focus-order="1"`),
- * then the header Cancel button (`data-focus-order="2"`).
- */
-const applyFocusOrder = (elements) => {
-    const sortByVisualPosition = (els) => [...els].sort((a, b) => {
-        const ra = a.getBoundingClientRect();
-        const rb = b.getBoundingClientRect();
-        const topDiff = ra.top - rb.top;
-        if (Math.abs(topDiff) > 1) {
-            return topDiff;
-        }
-        return ra.left - rb.left;
-    });
-    const unordered = elements.filter((el) => !el.matches(FOCUS_ORDER_SELECTOR));
-    const ordered = elements
-        .filter((el) => el.matches(FOCUS_ORDER_SELECTOR))
-        .sort((a, b) => Number(a.getAttribute('data-focus-order')) - Number(b.getAttribute('data-focus-order')));
-    return [...sortByVisualPosition(unordered), ...ordered];
-};
-/**
- * Roving-focus members use a tabindex pattern where only one member is
- * tabbable (`tabIndex="0"`) while the others are not (`tabIndex="-1"`).
- * This returns the index of the current tabbable member.
- */
-const getTabbableRovingFocusIndex = (elements, overlay) => {
-    return elements.findIndex((el) => {
-        return overlay.contains(el) && isRovingFocusItem(el) && el.tabIndex >= 0;
-    });
-};
-/**
- * Determines if the overlay's backdrop is always blocking
- * (no background interaction).
+ * Determines if the overlay's backdrop is always blocking (no background interaction).
  * Returns false if showBackdrop=false or backdropBreakpoint > 0.
  */
 const isBackdropAlwaysBlocking = (el) => {
@@ -146,10 +39,6 @@ export const alertController = /*@__PURE__*/ createController('ion-alert');
 export const actionSheetController = /*@__PURE__*/ createController('ion-action-sheet');
 export const loadingController = /*@__PURE__*/ createController('ion-loading');
 export const modalController = /*@__PURE__*/ createController('ion-modal');
-/**
- * @deprecated Use the inline ion-picker component instead.
- */
-export const pickerController = /*@__PURE__*/ createController('ion-picker-legacy');
 export const popoverController = /*@__PURE__*/ createController('ion-popover');
 export const toastController = /*@__PURE__*/ createController('ion-toast');
 /**
@@ -243,7 +132,7 @@ const focusElementInOverlay = (hostToFocus, overlay) => {
  * Should NOT include: Toast
  */
 const trapKeyboardFocus = (ev, doc) => {
-    const lastOverlay = getPresentedOverlay(doc, OVERLAY_FOCUS_TRAP_SELECTOR);
+    const lastOverlay = getPresentedOverlay(doc, 'ion-alert,ion-action-sheet,ion-loading,ion-modal,ion-popover');
     const target = ev.target;
     /**
      * If no active overlay, ignore this event.
@@ -426,176 +315,6 @@ const connectListeners = (doc) => {
         doc.addEventListener('focus', (ev) => {
             trapKeyboardFocus(ev, doc);
         }, true);
-        /**
-         * Remember which roving-focus member last received focus
-         * (arrows, click, or Tab). A roving group keeps `tabIndex=0` on a
-         * single member (e.g. the checked/first radio), so the Tab trap
-         * uses this when wrapping back into the group or focusing its slot.
-         */
-        doc.addEventListener('focusin', (ev) => {
-            const lastOverlay = getPresentedOverlay(doc, OVERLAY_FOCUS_TRAP_SELECTOR);
-            if (!lastOverlay || lastOverlay.classList.contains(FOCUS_TRAP_DISABLE_CLASS)) {
-                return;
-            }
-            const target = ev.target;
-            if (!(target instanceof HTMLElement)) {
-                return;
-            }
-            const rovingHost = getRovingFocusHost(target);
-            if (rovingHost && lastOverlay.contains(rovingHost)) {
-                lastOverlay.trapLastRovingFocus = rovingHost;
-            }
-        }, true);
-        // Listen for keydown events to intercept Tab navigation.
-        // This is needed for Safari and Firefox which may skip focusable
-        // elements or allow focus to escape the overlay.
-        // It also ensures proper focus delegation for shadow DOM elements
-        // like ion-textarea.
-        doc.addEventListener('keydown', (ev) => {
-            var _a, _b, _c;
-            if (ev.key !== 'Tab' && ev.key !== 'Alt+Tab')
-                return;
-            const lastOverlay = getPresentedOverlay(doc, OVERLAY_FOCUS_TRAP_SELECTOR);
-            if (!lastOverlay || lastOverlay.classList.contains(FOCUS_TRAP_DISABLE_CLASS))
-                return;
-            const activeElement = getActiveElement(doc);
-            if (activeElement === lastOverlay) {
-                ev.preventDefault();
-                focusFirstDescendant(lastOverlay);
-                return;
-            }
-            // Check if activeElement is inside the overlay (including shadow DOM)
-            const isInsideOverlay = activeElement
-                ? lastOverlay.contains(activeElement) ||
-                    (activeElement.getRootNode() instanceof ShadowRoot &&
-                        lastOverlay.contains(activeElement.getRootNode().host)) ||
-                    ((_b = (_a = lastOverlay.shadowRoot) === null || _a === void 0 ? void 0 : _a.contains(activeElement)) !== null && _b !== void 0 ? _b : false)
-                : false;
-            if (!isInsideOverlay)
-                return;
-            // Get all focusable elements from both light and shadow DOM
-            let allFocusable = [
-                ...lastOverlay.querySelectorAll(focusableQueryString),
-                ...(((_c = lastOverlay.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelectorAll(focusableQueryString)) || []),
-            ];
-            /**
-             * Some elements match `focusableQueryString` but are not
-             * intended tab stops (e.g. the `ion-item` wrappers a select
-             * modal renders around its options). Components opt these out
-             * with `data-focus-ignore` so Tab can move between the real
-             * controls.
-             */
-            allFocusable = allFocusable.filter((el) => !el.matches(FOCUS_IGNORE_SELECTOR));
-            /**
-             * A roving-focus group is a single tab stop: only its currently
-             * tabbable member (`tabIndex >= 0`) participates. Other
-             * focusables inside the group are not independent tab stops —
-             * this includes inactive members and focusable wrappers such as
-             * the `ion-item` that carries `ion-focusable` on behalf of a
-             * radio. Drop them so Tab moves between the group and the
-             * surrounding controls (e.g. the handle), not into the wrappers.
-             */
-            allFocusable = allFocusable.filter((el) => !isRovingFocusItem(el) || el.tabIndex >= 0);
-            /**
-             * When a component declares an explicit tab order via
-             * `data-focus-order` (e.g. a sheet modal's handle and Cancel
-             * button), reorder accordingly. Overlays that declare no order
-             * keep their DOM order.
-             */
-            if (allFocusable.some((el) => el.matches(FOCUS_ORDER_SELECTOR))) {
-                allFocusable = applyFocusOrder(allFocusable);
-            }
-            if (allFocusable.length === 0) {
-                ev.preventDefault();
-                return;
-            }
-            // Find current element's index (accounting for shadow DOM)
-            let currentIndex = activeElement
-                ? allFocusable.findIndex((el) => {
-                    var _a;
-                    if (el === activeElement)
-                        return true;
-                    if ((_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.contains(activeElement))
-                        return true;
-                    const rootNode = activeElement.getRootNode();
-                    return rootNode instanceof ShadowRoot && rootNode.host === el;
-                })
-                : -1;
-            /**
-             * A roving-focus group keeps `tabIndex=0` on a single member
-             * while the others are `-1`. Arrow keys can move focus onto a
-             * `tabIndex=-1` member, which `focusableQueryString` excludes,
-             * so `findIndex` yields -1 and Tab would wrap to
-             * `allFocusable[0]`. Treat focus on any group member as the
-             * group's tabbable slot so Tab goes to the next control (e.g.
-             * handle → Cancel), not back to the first member.
-             */
-            if (currentIndex < 0 && activeElement) {
-                const rovingHost = getRovingFocusHost(activeElement);
-                if (rovingHost && lastOverlay.contains(rovingHost)) {
-                    const directIndex = allFocusable.indexOf(rovingHost);
-                    if (directIndex >= 0) {
-                        currentIndex = directIndex;
-                    }
-                    else {
-                        const tabbableIndex = getTabbableRovingFocusIndex(allFocusable, lastOverlay);
-                        if (tabbableIndex >= 0) {
-                            currentIndex = tabbableIndex;
-                        }
-                    }
-                }
-            }
-            ev.preventDefault();
-            // Helper to focus an element, handling shadow DOM properly
-            const focusElement = (element) => {
-                const shadowRoot = element.shadowRoot;
-                if (shadowRoot) {
-                    const innerFocusable = shadowRoot.querySelector(focusableQueryString);
-                    if (innerFocusable && typeof element.setFocus !== 'function') {
-                        focusVisibleElement(innerFocusable);
-                        return;
-                    }
-                }
-                focusVisibleElement(element);
-            };
-            let nextIndex;
-            if (ev.shiftKey) {
-                // Shift+Tab: previous element, wrap to last if at first
-                if (currentIndex <= 0) {
-                    nextIndex = allFocusable.length - 1;
-                }
-                else {
-                    nextIndex = currentIndex - 1;
-                }
-            }
-            else {
-                // Tab: next element, wrap to first if at last
-                if (currentIndex < 0 || currentIndex >= allFocusable.length - 1) {
-                    nextIndex = 0;
-                }
-                else {
-                    nextIndex = currentIndex + 1;
-                }
-            }
-            const nextEl = allFocusable[nextIndex];
-            const overlayTrap = lastOverlay;
-            const tabbableRovingIndex = getTabbableRovingFocusIndex(allFocusable, lastOverlay);
-            /**
-             * The trap list only includes one tabbable member of a roving
-             * group (`tabIndex >= 0`), usually the checked/first radio.
-             * `focusin` tracks the real last-focused member. Use it whenever
-             * Tab would focus that slot (wrap from Cancel, Shift+Tab from
-             * handle, etc.).
-             */
-            let focusTarget = nextEl;
-            if (tabbableRovingIndex >= 0 && nextIndex === tabbableRovingIndex) {
-                const saved = overlayTrap.trapLastRovingFocus;
-                if ((saved === null || saved === void 0 ? void 0 : saved.isConnected) && lastOverlay.contains(saved) && saved !== nextEl) {
-                    focusTarget = saved;
-                }
-            }
-            focusElement(focusTarget);
-        }, true);
         // handle back-button click
         doc.addEventListener('ionBackButton', (ev) => {
             const lastOverlay = getPresentedOverlay(doc);
@@ -647,7 +366,7 @@ export const dismissOverlay = (doc, data, role, overlayTag, id) => {
  */
 export const getOverlays = (doc, selector) => {
     if (selector === undefined) {
-        selector = 'ion-alert,ion-action-sheet,ion-loading,ion-modal,ion-picker-legacy,ion-popover,ion-toast';
+        selector = 'ion-alert,ion-action-sheet,ion-loading,ion-modal,ion-popover,ion-toast';
     }
     return Array.from(doc.querySelectorAll(selector)).filter((c) => c.overlayIndex > 0);
 };
@@ -709,7 +428,30 @@ export const setRootAriaHidden = (hidden = false) => {
         viewContainer.removeAttribute('aria-hidden');
     }
 };
-export const present = async (overlay, name, iosEnterAnimation, mdEnterAnimation, ionicEnterAnimation, opts) => {
+/**
+ * Cleans up root `aria-hidden` and `backdrop-no-scroll` when
+ * an overlay is removed from the DOM without going through
+ * the `dismiss()` flow (e.g., when a framework unmounts the
+ * overlay during a route change).
+ *
+ * Should be called from an overlay's `disconnectedCallback`
+ * when the overlay was still presented at the time of removal.
+ */
+export const cleanupRootFocusTrapAccessibility = () => {
+    if (typeof document === 'undefined') {
+        return;
+    }
+    const remainingOverlays = getPresentedOverlays(document);
+    const hasRemainingLocking = remainingOverlays.some((o) => {
+        const el = o;
+        return el.tagName !== 'ION-TOAST' && el.focusTrap !== false && isBackdropAlwaysBlocking(el);
+    });
+    if (!hasRemainingLocking) {
+        setRootAriaHidden(false);
+        document.body.classList.remove(BACKDROP_NO_SCROLL);
+    }
+};
+export const present = async (overlay, name, iosEnterAnimation, mdEnterAnimation, opts) => {
     var _a, _b;
     if (overlay.presented) {
         return;
@@ -757,15 +499,11 @@ export const present = async (overlay, name, iosEnterAnimation, mdEnterAnimation
         document.body.classList.add(BACKDROP_NO_SCROLL);
     }
     (_a = overlay.willPresentShorthand) === null || _a === void 0 ? void 0 : _a.emit();
-    const theme = getIonTheme(overlay);
     const mode = getIonMode(overlay);
-    const selectedAnimation = mode === 'ios'
-        ? iosEnterAnimation
-        : theme === 'ionic' && ionicEnterAnimation
-            ? ionicEnterAnimation
-            : mdEnterAnimation;
     // get the user's animation fn if one was provided
-    const animationBuilder = overlay.enterAnimation ? overlay.enterAnimation : config.get(name, selectedAnimation);
+    const animationBuilder = overlay.enterAnimation
+        ? overlay.enterAnimation
+        : config.get(name, mode === 'ios' ? iosEnterAnimation : mdEnterAnimation);
     const completed = await overlayAnimation(overlay, animationBuilder, overlay.el, opts);
     if (completed) {
         overlay.didPresent.emit();
@@ -943,8 +681,7 @@ export const dismiss = async (overlay, data, role, name, iosLeaveAnimation, mdLe
     return true;
 };
 const getAppRoot = (doc) => {
-    const appRootSelector = config.get('appRootSelector', 'ion-app');
-    return doc.querySelector(appRootSelector) || doc.body;
+    return doc.querySelector('ion-app') || doc.body;
 };
 const overlayAnimation = async (overlay, animationBuilder, baseEl, opts) => {
     // Make overlay visible in case it's hidden

package/dist/collection/utils/platform.js

@@ -66,9 +66,9 @@ const isDesktop = (win) => !isMobile(win);
 const isHybrid = (win) => isCordova(win) || isCapacitorNative(win);
 const isCordova = (win) => !!(win['cordova'] || win['phonegap'] || win['PhoneGap']);
 const isCapacitorNative = (win) => {
+    var _a;
     const capacitor = win['Capacitor'];
-    // TODO(ROU-11693): Remove when we no longer support Capacitor 2, which does not have isNativePlatform
-    return !!((capacitor === null || capacitor === void 0 ? void 0 : capacitor.isNative) || ((capacitor === null || capacitor === void 0 ? void 0 : capacitor.isNativePlatform) && !!capacitor.isNativePlatform()));
+    return !!((_a = capacitor === null || capacitor === void 0 ? void 0 : capacitor.isNativePlatform) === null || _a === void 0 ? void 0 : _a.call(capacitor));
 };
 const isElectron = (win) => testUserAgent(win, /electron/i);
 const isPWA = (win) => { var _a; return !!(((_a = win.matchMedia) === null || _a === void 0 ? void 0 : _a.call(win, '(display-mode: standalone)').matches) || win.navigator.standalone); };

package/dist/collection/utils/test/playwright/drag-element.js

@@ -8,19 +8,7 @@
  *
  * See https://playwright.dev/docs/api/class-mouse#mouse-move for more information.
  */
-/**
- * Drags an element by the given number of pixels on the X and Y axes.
- *
- * @param el The element to drag.
- * @param page The E2E Page object.
- * @param dragByX The number of pixels to drag on the X axis. Negative values drag left, positive values drag right.
- * @param dragByY The number of pixels to drag on the Y axis. Negative values drag up, positive values drag down.
- * @param startXCoord The X coordinate to start the drag from. Defaults to the center of the element.
- * @param startYCoord The Y coordinate to start the drag from. Defaults to the center of the element.
- * @param releaseDrag Whether to release the drag at the end of the gesture. Defaults to `true`.
- * @param steps The number of steps to divide the drag into. More steps reduce velocity; fewer steps increase it. Use this to control whether velocity-based thresholds (e.g. full-swipe) are triggered, particularly in Safari where gesture velocity is calculated relative to animation frames. Defaults to `10`.
- */
-export const dragElementBy = async (el, page, dragByX = 0, dragByY = 0, startXCoord, startYCoord, releaseDrag = true, steps) => {
+export const dragElementBy = async (el, page, dragByX = 0, dragByY = 0, startXCoord, startYCoord, releaseDrag = true) => {
     const boundingBox = await el.boundingBox();
     if (!boundingBox) {
         throw new Error('Cannot get a bounding box for an element that is not visible. See https://playwright.dev/docs/api/class-locator#locator-bounding-box for more information');
@@ -36,18 +24,17 @@ export const dragElementBy = async (el, page, dragByX = 0, dragByY = 0, startXCo
     // Clearing it here allows the drag gesture to proceed normally.
     await page.evaluate(() => { var _a; return (_a = window.getSelection()) === null || _a === void 0 ? void 0 : _a.removeAllRanges(); });
     // Drag the element.
-    await moveElement(page, startX, startY, dragByX, dragByY, steps);
+    await moveElement(page, startX, startY, dragByX, dragByY);
     if (releaseDrag) {
         await page.mouse.up();
     }
 };
 /**
  * Drags an element by the given amount of pixels on the Y axis.
- *
  * @param el The element to drag.
  * @param page The E2E Page object.
- * @param dragByY The number of pixels to drag on the Y axis.
- * @param startYCoord The Y coordinate to start the drag from. Defaults to the center of the element.
+ * @param dragByY The amount of pixels to drag the element by.
+ * @param startYCoord The Y coordinate to start the drag gesture at. Defaults to the center of the element.
  */
 export const dragElementByYAxis = async (el, page, dragByY, startYCoord) => {
     const boundingBox = await el.boundingBox();
@@ -89,7 +76,8 @@ const validateDragByY = (startY, dragByY, viewportHeight) => {
         throw new Error(`The element is being dragged past the top of the viewport. Update the dragByY value to prevent going out of bounds. A recommended value is ${recommendedDragByY}.`);
     }
 };
-const moveElement = async (page, startX, startY, dragByX = 0, dragByY = 0, steps = 10) => {
+const moveElement = async (page, startX, startY, dragByX = 0, dragByY = 0) => {
+    const steps = 10;
     const browser = page.context().browser().browserType().name();
     const viewport = page.viewportSize();
     if (viewport === null) {
@@ -104,21 +92,10 @@ const moveElement = async (page, startX, startY, dragByX = 0, dragByY = 0, steps
         const middleX = startX + (endX - startX) * (i / steps);
         const middleY = startY + (endY - startY) * (i / steps);
         await page.mouse.move(middleX, middleY);
-        /**
-         * In Safari, gesture velocity is calculated relative to animation
-         * frames, causing velocity to accumulate faster than in other
-         * browsers. Without waiting for a repaint, consecutive `mouse.move`
-         * events arrive with ~0ms time delta and velocity never accumulates,
-         * causing gesture
-         * detection to fail.
-         */
+        // Safari needs to wait for a repaint to occur before moving the mouse again.
         if (browser === 'webkit' && i % 2 === 0) {
-            /**
-             * Repainting every 2 steps is enough to keep the drag gesture
-             * smooth. Repainting on every step makes the test slow, and
-             * repainting every 4+ steps means Safari does not see enough
-             * frames to track the gesture reliably.
-             */
+            // Repainting every 2 steps is enough to keep the drag gesture smooth.
+            // Anything past 4 steps will cause the drag gesture to be flaky.
             await page.evaluate(() => new Promise(requestAnimationFrame));
         }
     }

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

@@ -8,56 +8,34 @@
  * each test title is unique.
  */
 const generateTitle = (title, config) => {
-    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}`;
+    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}`;
     }
-    return `${title} - ${theme}/${mode}/${direction}/${palette}`;
+    return `${title} - ${mode}/${direction}/${palette}`;
 };
 /**
  * Generates a unique filename based on a base filename
  * and a test config.
  */
 const generateScreenshotName = (fileName, config) => {
-    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`;
+    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`;
     }
-    return `${fileName}-${theme}-${mode}-${direction}-${palette}.png`;
+    return `${fileName}-${mode}-${direction}-${palette}.png`;
 };
 /**
  * Given a config generate an array of test variants.
@@ -70,16 +48,13 @@ export const configs = (testConfig = DEFAULT_TEST_CONFIG_OPTION) => {
      * If certain options are not provided,
      * fall back to the defaults.
      */
-    const processedModes = modes !== null && modes !== void 0 ? modes : DEFAULT_MODES;
+    const processedMode = 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;
-    processedModes.forEach((mode) => {
-        const [themeOrCombinedMode, modeName] = mode.split('-');
-        const parsedTheme = themeOrCombinedMode;
-        const parsedMode = modeName !== null && modeName !== void 0 ? modeName : themeOrCombinedMode;
+    processedMode.forEach((mode) => {
         processedDirection.forEach((direction) => {
             processedPalette.forEach((palette) => {
-                configs.push({ direction, palette, mode: parsedMode, theme: parsedTheme });
+                configs.push({ mode, direction, palette });
             });
         });
     });

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, _d, _e;
+    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,18 +21,15 @@ configs().forEach(({ config, title }) => {
 });`);
     }
     let mode;
-    let theme;
     let direction;
     let palette;
     if (options == undefined) {
         mode = testInfo.project.metadata.mode;
-        theme = testInfo.project.metadata.theme;
         direction = testInfo.project.metadata.rtl ? 'rtl' : 'ltr';
         palette = testInfo.project.metadata.palette;
     }
     else {
         mode = options.mode;
-        theme = options.theme;
         direction = options.direction;
         palette = options.palette;
     }
@@ -45,15 +42,13 @@ configs().forEach(({ config, title }) => {
      */
     const urlToParams = new URLSearchParams(paramsString);
     const formattedMode = (_a = urlToParams.get('ionic:mode')) !== null && _a !== void 0 ? _a : mode;
-    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 formattedPalette = (_d = urlToParams.get('palette')) !== null && _d !== void 0 ? _d : palette;
-    const ionicTesting = (_e = urlToParams.get('ionic:_testing')) !== null && _e !== void 0 ? _e : true;
+    const formattedRtl = (_b = urlToParams.get('rtl')) !== null && _b !== void 0 ? _b : rtlString;
+    const formattedPalette = (_c = urlToParams.get('palette')) !== null && _c !== void 0 ? _c : palette;
+    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('palette');
     urlToParams.delete('ionic:_testing');
@@ -64,15 +59,11 @@ configs().forEach(({ config, title }) => {
      */
     const remainingQueryParams = decodeURIComponent(urlToParams.toString());
     const remainingQueryParamsString = remainingQueryParams == '' ? '' : `&${remainingQueryParams}`;
-    const formattedUrl = `${splitUrl[0]}?ionic:_testing=${ionicTesting}&ionic:mode=${formattedMode}&ionic:theme=${formattedTheme}&rtl=${formattedRtl}&palette=${formattedPalette}${remainingQueryParamsString}`;
+    const formattedUrl = `${splitUrl[0]}?ionic:_testing=${ionicTesting}&ionic:mode=${formattedMode}&rtl=${formattedRtl}&palette=${formattedPalette}${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',