@ionic/core 8.8.11 → 8.8.12-dev.11781793379.156d3260

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 `allowedAttributes` list (refer `sanitizeElement`),
+ * and scrubs script-scheme 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`. Use `sanitizeDOMTree` instead when you already
+ * have a DOM tree and want to sanitize it in place without a string round
+ * trip; both apply the same attribute policy.
+ *
+ * @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,6 +94,36 @@ export const sanitizeDOMString = (untrustedString) => {
         return '';
     }
 };
+/**
+ * Sanitize an entire trusted DOM tree in place.
+ *
+ * Removes blocked tags (`script`, `iframe`, etc.) from the subtree and
+ * then sanitizes attributes on every remaining element using the same
+ * allowlist policy as `sanitizeDOMString` (refer `sanitizeElement`).
+ * Component presentational attributes (`size`, `color`, `shape`, inline
+ * SVG, `aria-*`, `data-*`) are preserved; `style`, event handlers (`on*`),
+ * form/navigation-hijack attributes, script-scheme URLs, and non-image
+ * `data:` URLs are stripped.
+ *
+ * Use this when you have a DOM tree the developer controls (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);
+};
 /**
  * Clean up current element based on allowed attributes
  * and then recursively dig down into any child elements to
@@ -101,29 +145,60 @@ const sanitizeElement = (element) => {
         element.remove();
         return;
     }
+    /**
+     * Always strip `style` (CSS injection, `background:url()` beaconing, UI
+     * spoofing). It is never on the allowlist, but it is removed explicitly
+     * here because some engines (e.g. jsdom) don't enumerate the CSSOM-backed
+     * `style` attribute in `element.attributes`, which would let the loop
+     * below skip over it.
+     */
+    element.removeAttribute('style');
     for (let i = element.attributes.length - 1; i >= 0; i--) {
         const attribute = element.attributes.item(i);
         const attributeName = attribute.name;
-        // remove non-allowed attribs
-        if (!allowedAttributes.includes(attributeName.toLowerCase())) {
+        const lowerName = attributeName.toLowerCase();
+        /**
+         * Remove any attribute that is not on the allowlist. This drops event
+         * handlers (`on*`), `style`, the form/navigation-hijack attributes
+         * (`formaction`, `action`, `target`), namespaced attributes like
+         * `xlink:href`, and anything else not explicitly known to be safe.
+         */
+        if (!isAttributeAllowed(lowerName)) {
             element.removeAttribute(attributeName);
             continue;
         }
         // clean up any allowed attribs
         // that attempt to do any JS funny-business
         const attributeValue = attribute.value;
+        if (attributeValue == null) {
+            continue;
+        }
         /**
-         * We also need to check the property value
-         * as javascript: can allow special characters
-         * such as 	 and still be valid (i.e. java	script)
+         * Scrub dangerous schemes from the value. The value is normalized first
+         * (whitespace and ASCII control characters removed) so entity-obfuscated
+         * payloads such as `java	script:`, which the parser decodes to
+         * `java\tscript:`, are still caught. Normalizing the value also covers
+         * namespaced attributes, where the previous `element[attributeName]`
+         * property reflection returned `undefined` and let them slip through.
          */
-        const propertyValue = element[attributeName];
-        /* eslint-disable */
-        if ((attributeValue != null && attributeValue.toLowerCase().includes('javascript:')) ||
-            (propertyValue != null && propertyValue.toLowerCase().includes('javascript:'))) {
+        const normalizedValue = attributeValue.replace(controlCharactersAndWhitespace, '').toLowerCase();
+        // Script schemes are never allowed, on any attribute.
+        if (normalizedValue.includes('javascript:') || normalizedValue.includes('vbscript:')) {
+            element.removeAttribute(attributeName);
+            continue;
+        }
+        /**
+         * For URL-bearing attributes, allow `data:` URIs only for raster
+         * images. Document-bearing types (`text/html`, `image/svg+xml`,
+         * `application/*`, etc.) can carry markup or script when navigated to
+         * or rendered, so they are stripped, while safe image types are kept so
+         * inline images keep working.
+         */
+        if (urlAttributes.includes(lowerName) &&
+            normalizedValue.startsWith('data:') &&
+            !safeDataImageUri.test(normalizedValue)) {
             element.removeAttribute(attributeName);
         }
-        /* eslint-enable */
     }
     /**
      * Sanitize any nested children
@@ -156,8 +231,174 @@ const isSanitizerEnabled = () => {
     }
     return true;
 };
-const allowedAttributes = ['class', 'id', 'href', 'src', 'name', 'slot'];
-const blockedTags = ['script', 'style', 'iframe', 'meta', 'link', 'object', 'embed'];
+/**
+ * Mirror known custom-element DOM properties onto attributes so they
+ * survive `cloneNode`. Call this on a DOM subtree before cloning it for
+ * rendering elsewhere (e.g. cloning slotted option content into an
+ * overlay).
+ *
+ * Only sets the attribute when the property holds a non-empty string
+ * and the attribute isn't already present, so existing attributes
+ * take precedence.
+ *
+ * @param root - The root element whose subtree (and itself) will be
+ * inspected.
+ */
+export const reflectPropertiesToAttributes = (root) => {
+    const candidates = [];
+    if (root.tagName in elementPropsToReflect) {
+        candidates.push(root);
+    }
+    for (const tagName of Object.keys(elementPropsToReflect)) {
+        candidates.push(...Array.from(root.querySelectorAll(tagName.toLowerCase())));
+    }
+    for (const el of candidates) {
+        if (!(el.tagName in elementPropsToReflect)) {
+            continue;
+        }
+        const props = elementPropsToReflect[el.tagName];
+        for (const prop of props) {
+            const value = el[prop];
+            if (typeof value === 'string' && value.length > 0 && !el.hasAttribute(prop)) {
+                el.setAttribute(prop, value);
+            }
+        }
+    }
+};
+/**
+ * Attribute names that are always safe to keep. Covers global HTML
+ * attributes, the Ionic component presentational props that cloned rich
+ * content (e.g. `ion-select-option` markup) relies on, and the inert SVG
+ * presentation attributes used by inline icons.
+ *
+ * `aria-*` and `data-*` are allowed separately by prefix (refer
+ * `allowedAttributePrefixes`) since they are inert and not worth
+ * enumerating. URL-bearing names (`href`, `src`) are allowed here, but
+ * their values are still scrubbed for script schemes in `sanitizeElement`.
+ *
+ * Notably absent: `style`, event handlers (`on*`), and the
+ * form/navigation-hijack attributes (`formaction`, `action`, `target`),
+ * which are therefore stripped.
+ */
+const allowedAttributes = [
+    // Global / structural
+    'class',
+    'id',
+    'slot',
+    'name',
+    'title',
+    'alt',
+    'lang',
+    'dir',
+    'role',
+    'type',
+    'value',
+    'disabled',
+    'width',
+    'height',
+    'href',
+    'src',
+    // Ionic component presentational props
+    'color',
+    'size',
+    'shape',
+    'fill',
+    'expand',
+    'mode',
+    'theme',
+    'icon',
+    'label',
+    'label-placement',
+    'justify',
+    'inset',
+    'lines',
+    'ios',
+    'md',
+    // SVG presentation attributes (compared lowercased, e.g. `viewBox`)
+    'xmlns',
+    'viewbox',
+    'preserveaspectratio',
+    'stroke',
+    'stroke-width',
+    'stroke-linecap',
+    'stroke-linejoin',
+    'stroke-opacity',
+    'stroke-dasharray',
+    'fill-rule',
+    'fill-opacity',
+    'clip-rule',
+    'd',
+    'points',
+    'cx',
+    'cy',
+    'r',
+    'rx',
+    'ry',
+    'x',
+    'y',
+    'x1',
+    'y1',
+    'x2',
+    'y2',
+    'transform',
+    'opacity',
+];
+/**
+ * Attribute-name prefixes that are always safe to keep. `aria-*` and
+ * `data-*` attributes cannot execute script or load resources, so they are
+ * allowed wholesale rather than enumerated by name.
+ */
+const allowedAttributePrefixes = ['aria-', 'data-'];
+/**
+ * Whether an attribute name (already lowercased) is safe to keep, by exact
+ * match or by an allowed prefix.
+ */
+const isAttributeAllowed = (lowerName) => {
+    if (allowedAttributes.includes(lowerName)) {
+        return true;
+    }
+    return allowedAttributePrefixes.some((prefix) => lowerName.startsWith(prefix));
+};
+/**
+ * Matches ASCII control characters and whitespace (including the
+ * non-breaking space). Used to normalize attribute values before matching
+ * a URL scheme so entity-obfuscated payloads such as `java	script:`
+ * (decoded by the parser to `java\tscript:`) can't smuggle a scheme past
+ * the check.
+ */
+// eslint-disable-next-line no-control-regex -- matching control characters is the point
+const controlCharactersAndWhitespace = /[\u0000-\u0020\u007f-\u00a0]/g;
+/**
+ * Attributes whose values are URLs. Their values are scheme-checked in
+ * `sanitizeElement` (e.g. `data:` filtering) beyond the script-scheme scrub
+ * applied to every attribute.
+ */
+const urlAttributes = ['href', 'src'];
+/**
+ * Matches a `data:` URI for a raster image type that cannot carry script.
+ * `image/svg+xml` is deliberately excluded (SVG can execute script), as are
+ * document types like `text/html` and `application/*`. The value is already
+ * lowercased and whitespace-stripped before this is tested.
+ */
+const safeDataImageUri = /^data:image\/(?:png|jpe?g|gif|webp|bmp|avif|x-icon|vnd\.microsoft\.icon)[;,]/;
+/**
+ * Tags removed entirely (with their subtree) before attribute sanitization.
+ * Exported so tests can assert the set without hardcoding it.
+ */
+export const blockedTags = ['script', 'style', 'iframe', 'meta', 'link', 'object', 'embed', 'base'];
+/**
+ * Properties on custom elements that frameworks (Vue, Angular) often
+ * set as DOM properties rather than attributes. `cloneNode` only copies
+ * attributes, so these values are lost when slotted content is cloned
+ * into an overlay. For each known custom element, we mirror the listed
+ * properties onto attributes so the cloned copy still has the data it
+ * needs to render.
+ *
+ * Keyed by uppercased tagName so the lookup matches `Element.tagName`.
+ */
+const elementPropsToReflect = {
+    'ION-ICON': ['icon', 'name', 'src', 'ios', 'md'],
+};
 export class IonicSafeString {
     constructor(value) {
         this.value = value;

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

@@ -0,0 +1,111 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { h } from "@stencil/core";
+import { sanitizeDOMTree } from "./sanitization/index";
+/**
+ * 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.
+ *
+ * @internal Exported only so it can be unit tested; not part of the
+ * public API.
+ */
+export 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}`;
+    sanitizeDOMTree(content);
+    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',