@ionic/core 8.8.5 → 8.8.6-dev.11777490150.1970e4f2

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/select-option-render.js

@@ -0,0 +1,76 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { h } from "@stencil/core";
+import { sanitizeDOMString } from "./sanitization";
+/**
+ * Cache that maps rendered span elements to the source HTMLElement
+ * they were cloned from. This prevents flickering when a user
+ * selects an option that has rich content, as the content will only be
+ * re-rendered if the source HTMLElement changes.
+ */
+const contentCache = new WeakMap();
+/**
+ * Renders cloned DOM content into an element via a ref callback.
+ * The content is only cloned when the source element changes,
+ * preventing flicker caused by destroying and recreating web
+ * components (e.g., ion-avatar) on every re-render cycle.
+ *
+ * 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 span.
+ * @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';
+    return (h(Tag, { class: className, key: `${className}-${id}`, ref: (el) => {
+            if (el) {
+                const cached = contentCache.get(el);
+                // Skip if this element already has clones from the same source
+                if (cached === content) {
+                    return;
+                }
+                const sanitized = sanitizeDOMString(content.innerHTML);
+                el.innerHTML = sanitized !== null && sanitized !== void 0 ? sanitized : '';
+                contentCache.set(el, content);
+            }
+        } }));
+};
+/**
+ * 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, 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,7 @@
  *
  * 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) => {
+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,7 +19,7 @@ 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();
     }
@@ -71,8 +71,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) {

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}/`) {

package/dist/collection/utils/theme.js

@@ -1,8 +1,32 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
+/**
+ * Checks if an element has a parent matching the specified selector.
+ * This handles an element in both light DOM and shadow DOM contexts.
+ * @param selector The parent selector to check for (e.g., 'ion-datetime'
+ * or 'ion-toolbar[color]').
+ * @param el The element to check.
+ * @returns `true` if the element has a parent matching the specified selector,
+ * `false` otherwise.
+ */
 export const hostContext = (selector, el) => {
-    return el.closest(selector) !== null;
+    // Check the light DOM first
+    if (el.closest(selector) !== null) {
+        return true;
+    }
+    // For attribute or class selectors (e.g., 'ion-toolbar[color]' or
+    // 'ion-toolbar.ion-color') we can only check light DOM since tagName
+    // doesn't include attributes or classes.
+    if (selector.includes('[') || selector.includes('.')) {
+        return false;
+    }
+    // Check the shadow DOM by looking at the shadow root host and
+    // converting the selector to uppercase to compare with tagName
+    const upperCaseTagName = selector.toUpperCase();
+    const rootNode = el.getRootNode();
+    const shadowHost = rootNode instanceof ShadowRoot ? rootNode.host : null;
+    return (shadowHost === null || shadowHost === void 0 ? void 0 : shadowHost.tagName) === upperCaseTagName;
 };
 /**
  * Create the mode and color classes for the component based on the classes passed in

package/dist/collection/utils/transition/ios.transition.js

@@ -191,6 +191,7 @@ const animateBackButton = (rootAnimation, rtl, backDirection, backButtonEl, back
     const clonedBackButtonIconEl = shadow(clonedBackButtonEl).querySelector('ion-icon');
     clonedBackButtonEl.text = backButtonEl.text;
     clonedBackButtonEl.mode = backButtonEl.mode;
+    clonedBackButtonEl.theme = backButtonEl.theme;
     clonedBackButtonEl.icon = backButtonEl.icon;
     clonedBackButtonEl.color = backButtonEl.color;
     clonedBackButtonEl.disabled = backButtonEl.disabled;