@ionic/core 8.8.8-nightly.20260520 → 8.8.9-dev.11779403760.13ea2a08

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 } from "../global/ionic-global";
+import { getIonMode, getIonTheme } 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";
@@ -319,6 +319,86 @@ const connectListeners = (doc) => {
         doc.addEventListener('focus', (ev) => {
             trapKeyboardFocus(ev, doc);
         }, 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, 'ion-alert,ion-action-sheet,ion-loading,ion-modal,ion-picker-legacy,ion-popover');
+            if (!lastOverlay || lastOverlay.classList.contains(FOCUS_TRAP_DISABLE_CLASS))
+                return;
+            const activeElement = doc.activeElement;
+            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
+            const allFocusable = [
+                ...lastOverlay.querySelectorAll(focusableQueryString),
+                ...(((_c = lastOverlay.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelectorAll(focusableQueryString)) || []),
+            ];
+            if (allFocusable.length === 0) {
+                ev.preventDefault();
+                return;
+            }
+            // Find current element's index (accounting for shadow DOM)
+            const 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;
+            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);
+            };
+            if (ev.shiftKey) {
+                // Shift+Tab: previous element, wrap to last if at first
+                if (currentIndex <= 0) {
+                    focusLastDescendant(lastOverlay);
+                }
+                else {
+                    focusElement(allFocusable[currentIndex - 1]);
+                }
+            }
+            else {
+                // Tab: next element, wrap to first if at last
+                if (currentIndex < 0 || currentIndex >= allFocusable.length - 1) {
+                    focusFirstDescendant(lastOverlay);
+                }
+                else {
+                    focusElement(allFocusable[currentIndex + 1]);
+                }
+            }
+        }, true);
         // handle back-button click
         doc.addEventListener('ionBackButton', (ev) => {
             const lastOverlay = getPresentedOverlay(doc);
@@ -432,7 +512,7 @@ export const setRootAriaHidden = (hidden = false) => {
         viewContainer.removeAttribute('aria-hidden');
     }
 };
-export const present = async (overlay, name, iosEnterAnimation, mdEnterAnimation, opts) => {
+export const present = async (overlay, name, iosEnterAnimation, mdEnterAnimation, ionicEnterAnimation, opts) => {
     var _a, _b;
     if (overlay.presented) {
         return;
@@ -480,11 +560,15 @@ 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, mode === 'ios' ? iosEnterAnimation : mdEnterAnimation);
+    const animationBuilder = overlay.enterAnimation ? overlay.enterAnimation : config.get(name, selectedAnimation);
     const completed = await overlayAnimation(overlay, animationBuilder, overlay.el, opts);
     if (completed) {
         overlay.didPresent.emit();
@@ -639,7 +723,8 @@ export const dismiss = async (overlay, data, role, name, iosLeaveAnimation, mdLe
     return true;
 };
 const getAppRoot = (doc) => {
-    return doc.querySelector('ion-app') || doc.body;
+    const appRootSelector = config.get('appRootSelector', 'ion-app');
+    return doc.querySelector(appRootSelector) || doc.body;
 };
 const overlayAnimation = async (overlay, animationBuilder, baseEl, opts) => {
     // Make overlay visible in case it's hidden

package/dist/collection/utils/sanitization/index.js

@@ -3,8 +3,22 @@
  */
 import { printIonError } from "../logging/index";
 /**
- * Does a simple sanitization of all elements
- * in an untrusted string
+ * Sanitize an untrusted HTML string.
+ *
+ * Parses the string into a detached DOM, removes blocked tags, strips
+ * attributes outside the strict `allowedAttributes` list, and scrubs
+ * `javascript:` URLs. Returns the sanitized HTML string.
+ *
+ * Use this when you have an HTML string from an unknown source and need
+ * to render it via `innerHTML`. Prefer `sanitizeDOMTree` when the source
+ * is author-controlled DOM that must keep its component attributes
+ * (`size`, `color`, `shape`, etc.).
+ *
+ * @param untrustedString - The HTML string to sanitize. Pass an
+ * `IonicSafeString` to bypass sanitization, or `undefined` to short-circuit.
+ * @returns The sanitized HTML string, or `undefined` if the input was
+ * `undefined`. Returns `''` if sanitization fails or the input contains
+ * an inline `onload=` handler.
  */
 export const sanitizeDOMString = (untrustedString) => {
     try {
@@ -80,13 +94,40 @@ export const sanitizeDOMString = (untrustedString) => {
         return '';
     }
 };
+/**
+ * Sanitize an entire author-controlled DOM tree in place.
+ *
+ * Removes blocked tags (`script`, `iframe`, etc.) from the subtree and
+ * then sanitizes attributes on every remaining element. Author-written
+ * attributes like `size`, `color`, and `shape` are preserved; event
+ * handlers (`on*`) and `javascript:` URLs are stripped.
+ *
+ * Use this when you have a DOM tree that the developer authored (e.g.
+ * cloned slot content from a component) and you need to render it
+ * elsewhere safely.
+ *
+ * @param root - The root element whose subtree will be sanitized in
+ * place. No-op when the sanitizer is disabled via `Ionic.config`.
+ */
+export const sanitizeDOMTree = (root) => {
+    if (!isSanitizerEnabled()) {
+        return;
+    }
+    blockedTags.forEach((tag) => {
+        const matches = root.querySelectorAll(tag);
+        for (let i = matches.length - 1; i >= 0; i--) {
+            matches[i].remove();
+        }
+    });
+    sanitizeElement(root, true);
+};
 /**
  * Clean up current element based on allowed attributes
  * and then recursively dig down into any child elements to
  * clean those up as well
  */
 // TODO(FW-2832): type (using Element triggers other type errors as well)
-const sanitizeElement = (element) => {
+const sanitizeElement = (element, allowSafeAuthorAttributes = false) => {
     // IE uses childNodes, so ignore nodes that are not elements
     if (element.nodeType && element.nodeType !== 1) {
         return;
@@ -104,8 +145,15 @@ const sanitizeElement = (element) => {
     for (let i = element.attributes.length - 1; i >= 0; i--) {
         const attribute = element.attributes.item(i);
         const attributeName = attribute.name;
+        const lowerName = attributeName.toLowerCase();
         // remove non-allowed attribs
-        if (!allowedAttributes.includes(attributeName.toLowerCase())) {
+        if (!allowSafeAuthorAttributes && !allowedAttributes.includes(lowerName)) {
+            element.removeAttribute(attributeName);
+            continue;
+        }
+        // strip event-handler attributes (already removed by the allowlist
+        // when !allowSafeAuthorAttributes; this guards the permissive path)
+        if (lowerName.startsWith('on')) {
             element.removeAttribute(attributeName);
             continue;
         }
@@ -118,9 +166,13 @@ const sanitizeElement = (element) => {
          * such as 	 and still be valid (i.e. java	script)
          */
         const propertyValue = element[attributeName];
+        // Only call .toLowerCase() when propertyValue is a string. Some DOM
+        // properties (e.g. `disabled`) are booleans and would throw.
         /* eslint-disable */
         if ((attributeValue != null && attributeValue.toLowerCase().includes('javascript:')) ||
-            (propertyValue != null && propertyValue.toLowerCase().includes('javascript:'))) {
+            (propertyValue != null &&
+                typeof propertyValue === 'string' &&
+                propertyValue.toLowerCase().includes('javascript:'))) {
             element.removeAttribute(attributeName);
         }
         /* eslint-enable */
@@ -131,7 +183,7 @@ const sanitizeElement = (element) => {
     const childElements = getElementChildren(element);
     /* eslint-disable-next-line */
     for (let i = 0; i < childElements.length; i++) {
-        sanitizeElement(childElements[i]);
+        sanitizeElement(childElements[i], allowSafeAuthorAttributes);
     }
 };
 /**

package/dist/collection/utils/select-option-render.js

@@ -0,0 +1,106 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { h } from "@stencil/core";
+/**
+ * Converts a DOM node into a Stencil VNode (or text string) so the
+ * resulting tree is rendered through the component's normal render
+ * path. Rendering through Stencil ensures that scoped CSS classes
+ * (e.g. `sc-ion-action-sheet-ionic`) are applied to every element.
+ *
+ * Highly recommended to pre-sanitize the source DOM (see
+ * `getOptionContent` in select.tsx). This function performs pure
+ * structural conversion — no security filtering.
+ *
+ * Preserves attributes only — properties set imperatively on the source
+ * element (e.g. `input.value` after a user types) won't carry through.
+ * In practice this isn't a concern: interactive controls shouldn't
+ * appear in select-option rich content since they'd nest inside the
+ * overlay's button/radio/checkbox wrapper, which is invalid HTML and
+ * an accessibility issue.
+ *
+ * @param node - The DOM node to convert. Text nodes become strings,
+ * element nodes become VNodes, and any other node types are skipped.
+ * @param keyPrefix - String prefix used to build a stable VNode key,
+ * so Stencil's diff can preserve elements across re-renders.
+ * @param index - Position of this node among its siblings. Combined
+ * with `keyPrefix` to form the final unique key.
+ * @returns The converted VNode, a text string, or `null` if the node
+ * type isn't supported.
+ */
+const cloneToVNode = (node, keyPrefix, index) => {
+    var _a;
+    if (node.nodeType === Node.TEXT_NODE) {
+        return (_a = node.textContent) !== null && _a !== void 0 ? _a : '';
+    }
+    if (node.nodeType !== Node.ELEMENT_NODE) {
+        return null;
+    }
+    const el = node;
+    const tag = el.tagName.toLowerCase();
+    const key = `${keyPrefix}-${index}`;
+    const attrs = { key };
+    for (let i = 0; i < el.attributes.length; i++) {
+        const attr = el.attributes.item(i);
+        attrs[attr.name] = attr.value;
+    }
+    const children = Array.from(el.childNodes)
+        .map((child, i) => cloneToVNode(child, key, i))
+        .filter((c) => c !== null);
+    return h(tag, attrs, children);
+};
+/**
+ * Renders cloned DOM content as Stencil JSX. Walking the source DOM
+ * into VNodes (rather than injecting it via innerHTML) keeps the
+ * content inside Stencil's render path, so scoped CSS classes are
+ * applied automatically and component attributes like `size` or
+ * `color` survive intact.
+ *
+ * Span elements should be used when this content renders within buttons,
+ * depending on the select interface. Buttons can only have phrasing
+ * content to prevent accessibility issues.
+ *
+ * @param id - Unique identifier for generating stable virtual DOM keys.
+ * @param content - The HTMLElement container whose child nodes will be cloned.
+ * @param className - CSS class applied to the wrapper element.
+ * @param useSpan - Whether to use a span element instead of a div for the wrapper.
+ */
+const renderClonedContent = (id, content, className, useSpan = false) => {
+    const Tag = useSpan ? 'span' : 'div';
+    const keyPrefix = `${className}-${id}`;
+    return (h(Tag, { class: className, key: keyPrefix }, Array.from(content.childNodes).map((child, i) => cloneToVNode(child, keyPrefix, i))));
+};
+/**
+ * Renders the label content for a select option within an overlay
+ * interface based on the presence of rich content.
+ *
+ * Span elements should be used when this content renders within buttons,
+ * depending on the select interface. Buttons can only have phrasing
+ * content to prevent accessibility issues.
+ *
+ * @param option - The content option data containing label, slots,
+ * and description.
+ * @param className - The base CSS class for the label element.
+ * @param useSpan - Whether to use a span element instead of a div for the label.
+ */
+export const renderOptionLabel = (option, className, useSpan = false) => {
+    const { id, label, startContent, endContent, description } = option;
+    const hasRichContent = !!startContent || !!endContent || !!description;
+    const Tag = useSpan ? 'span' : 'div';
+    // Render simple string label if there is no rich content to display
+    if (!hasRichContent && (typeof label === 'string' || !label)) {
+        return (h(Tag, { class: className, key: `${className}-${id}` }, label));
+    }
+    // Render the main label
+    const labelEl = typeof label === 'string' || !label ? (
+    // Label is a simple string or undefined
+    h(Tag, { key: `${className}-label-${id}` }, label)) : (
+    // Label is an HTMLElement with potential rich content
+    renderClonedContent(id, label, `${className}-text`, useSpan));
+    // No rich content, render just the label
+    if (!hasRichContent) {
+        return (h(Tag, { class: className, key: `${className}-${id}` }, labelEl));
+    }
+    // Render label with rich content (start, end, description)
+    return (h(Tag, { class: `${className} ${className}-has-rich-content`, key: `${className}-${id}` }, startContent && renderClonedContent(id, startContent, 'select-option-start', useSpan), h(Tag, { class: "select-option-content", key: `${className}-content-${id}` }, labelEl, description && (h(Tag, { class: "select-option-description", key: `${className}-desc-${id}` }, description))), endContent && renderClonedContent(id, endContent, 'select-option-end', useSpan)));
+};

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

@@ -8,7 +8,19 @@
  *
  * See https://playwright.dev/docs/api/class-mouse#mouse-move for more information.
  */
-export const dragElementBy = async (el, page, dragByX = 0, dragByY = 0, startXCoord, startYCoord, releaseDrag = true) => {
+/**
+ * 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) => {
     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');
@@ -19,17 +31,18 @@ export const dragElementBy = async (el, page, dragByX = 0, dragByY = 0, startXCo
     await page.mouse.move(startX, startY);
     await page.mouse.down();
     // Drag the element.
-    await moveElement(page, startX, startY, dragByX, dragByY);
+    await moveElement(page, startX, startY, dragByX, dragByY, steps);
     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 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.
+ * @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.
  */
 export const dragElementByYAxis = async (el, page, dragByY, startYCoord) => {
     const boundingBox = await el.boundingBox();
@@ -71,8 +84,7 @@ 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) => {
-    const steps = 10;
+const moveElement = async (page, startX, startY, dragByX = 0, dragByY = 0, steps = 10) => {
     const browser = page.context().browser().browserType().name();
     const viewport = page.viewportSize();
     if (viewport === null) {
@@ -87,10 +99,21 @@ const moveElement = async (page, startX, startY, dragByX = 0, dragByY = 0) => {
         const middleX = startX + (endX - startX) * (i / steps);
         const middleY = startY + (endY - startY) * (i / steps);
         await page.mouse.move(middleX, middleY);
-        // Safari needs to wait for a repaint to occur before moving the mouse again.
+        /**
+         * 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.
+         */
         if (browser === 'webkit' && i % 2 === 0) {
-            // Repainting every 2 steps is enough to keep the drag gesture smooth.
-            // Anything past 4 steps will cause the drag gesture to be flaky.
+            /**
+             * 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.
+             */
             await page.evaluate(() => new Promise(requestAnimationFrame));
         }
     }

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 });
             });
         });
     });

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;
+    var _a, _b, _c, _d, _e;
     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,15 +21,18 @@ 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;
     }
@@ -42,13 +45,15 @@ 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 formattedPalette = (_c = urlToParams.get('palette')) !== null && _c !== void 0 ? _c : palette;
-    const ionicTesting = (_d = urlToParams.get('ionic:_testing')) !== null && _d !== void 0 ? _d : 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 formattedPalette = (_d = urlToParams.get('palette')) !== null && _d !== void 0 ? _d : palette;
+    const ionicTesting = (_e = urlToParams.get('ionic:_testing')) !== null && _e !== void 0 ? _e : 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');
@@ -59,11 +64,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}&palette=${formattedPalette}${remainingQueryParamsString}`;
+    const formattedUrl = `${splitUrl[0]}?ionic:_testing=${ionicTesting}&ionic:mode=${formattedMode}&ionic:theme=${formattedTheme}&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',

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

@@ -18,29 +18,43 @@ 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;
     // The Ionic bundle is included locally by default unless the test
     // config passes in the importIonicFromCDN option. This is useful
     // when testing with the CDN version of Ionic.
-    let ionicCSSImports = `
+    let ionicCSSImports = theme === 'ionic'
+        ? `
+    <link href="${baseUrl}/css/ionic/bundle.ionic.css" rel="stylesheet" />
+    <link href="${baseUrl}/css/utils.bundle.css" rel="stylesheet" />
+  `
+        : `
     <link href="${baseUrl}/css/ionic.bundle.css" rel="stylesheet" />
   `;
     let ionicJSImports = `
     <script type="module" src="${baseUrl}/dist/ionic/ionic.esm.js"></script>
   `;
     if (options === null || options === void 0 ? void 0 : options.importIonicFromCDN) {
-        ionicCSSImports = `
+        ionicCSSImports =
+            theme === 'ionic'
+                ? `
+      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core/css/ionic/bundle.ionic.css" />
+      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core/css/utils.bundle.css" />
+    `
+                : `
       <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core/css/ionic.bundle.css" />
     `;
         ionicJSImports = `
@@ -63,7 +77,8 @@ export const setContent = async (page, html, testInfo, options) => {
         <script>
           window.Ionic = {
             config: {
-              mode: '${mode}'
+              mode: '${mode}',
+              theme: '${theme}'
             }
           }
         </script>
@@ -73,10 +88,18 @@ 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,
+    });
     if (baseUrl) {
         await page.route(baseUrl, (route) => {
             if (route.request().url() === `${baseUrl}/`) {