@ionic/core 8.8.7-dev.11779467048.1641d05e → 8.8.7-dev.11779921691.1777274a

package/dist/collection/utils/overlays.js

@@ -10,105 +10,12 @@ 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";
-import { addEventListener, componentOnReady, focusVisibleElement, getElementRoot, removeEventListener, } from "./helpers";
+import { addEventListener, focusVisibleElement, getElementRoot, removeEventListener, waitForComponentReady, } from "./helpers";
 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';
-const ION_SELECT_MODAL_SELECTOR = 'ion-select-modal';
-const isSelectModalOptionControl = (el) => el.tagName === 'ION-RADIO' || el.tagName === 'ION-CHECKBOX';
 /**
- * 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 `ion-radio` / `ion-checkbox` host.
- */
-const getOptionControlHost = (active) => {
-    let n = active;
-    while (n) {
-        if (isSelectModalOptionControl(n)) {
-            return n;
-        }
-        const root = n.getRootNode();
-        if (root instanceof ShadowRoot && root.host instanceof HTMLElement) {
-            n = root.host;
-        }
-        else {
-            return null;
-        }
-    }
-    return null;
-};
-/**
- * Sheet modals can have visual order that differs from DOM order.
- * Without sorting, Tab can skip the handle after option traversal.
- *
- * Order: option controls (radio/checkbox) → sheet handle → end-slot
- * header button. Any other focusables are appended after.
- */
-const sortSheetModalFocusables = (overlay, elements) => {
-    const optionControls = elements.filter((el) => {
-        return overlay.contains(el) && isSelectModalOptionControl(el) && el.tabIndex >= 0;
-    });
-    const cancelControl = elements.find((el) => overlay.contains(el) &&
-        el.tagName === 'ION-BUTTON' &&
-        el.closest('ion-header ion-buttons[slot="end"]') !== null);
-    const handleControl = elements.find((el) => el.classList.contains('modal-handle'));
-    const sortByGeometry = (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 ordered = [];
-    ordered.push(...sortByGeometry(optionControls));
-    if (handleControl) {
-        ordered.push(handleControl);
-    }
-    if (cancelControl) {
-        ordered.push(cancelControl);
-    }
-    const used = new Set(ordered);
-    for (const el of elements) {
-        if (!used.has(el)) {
-            ordered.push(el);
-        }
-    }
-    return ordered;
-};
-/**
- * Option controls in groups use a tabindex pattern where only one
- * option is tabbable (`tabIndex="0"`) while the others are `-1`.
- * This returns the index of that current tabbable option.
- */
-const getTabbableOptionControlIndex = (elements, overlay) => {
-    return elements.findIndex((el) => {
-        return overlay.contains(el) && isSelectModalOptionControl(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) => {
@@ -187,7 +94,7 @@ export const createOverlay = (tagName, opts) => {
             Object.assign(element, Object.assign(Object.assign({}, opts), { hasController: true }));
             // append the overlay element to the document body
             getAppRoot(document).appendChild(element);
-            return new Promise((resolve) => componentOnReady(element, resolve));
+            return waitForComponentReady(element);
         });
     }
     return Promise.resolve();
@@ -229,7 +136,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-picker-legacy,ion-popover');
     const target = ev.target;
     /**
      * If no active overlay, ignore this event.
@@ -412,30 +319,6 @@ const connectListeners = (doc) => {
         doc.addEventListener('focus', (ev) => {
             trapKeyboardFocus(ev, doc);
         }, true);
-        /**
-         * Remember which option control last received focus
-         * (arrows, click, or Tab). This pattern keeps `tabIndex=0` on the
-         * checked/first radio, so the Tab trap uses this when wrapping back
-         * into the list or focusing the option-group slot.
-         */
-        doc.addEventListener('focusin', (ev) => {
-            const lastOverlay = getPresentedOverlay(doc, OVERLAY_FOCUS_TRAP_SELECTOR);
-            if (!lastOverlay || lastOverlay.classList.contains(FOCUS_TRAP_DISABLE_CLASS)) {
-                return;
-            }
-            const isSheetModal = lastOverlay.classList.contains('modal-sheet');
-            if (!isSheetModal) {
-                return;
-            }
-            const target = ev.target;
-            if (!(target instanceof HTMLElement)) {
-                return;
-            }
-            const optionHost = getOptionControlHost(target);
-            if (optionHost && lastOverlay.contains(optionHost)) {
-                lastOverlay.trapLastSheetOptionControl = optionHost;
-            }
-        }, 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.
@@ -445,10 +328,10 @@ const connectListeners = (doc) => {
             var _a, _b, _c;
             if (ev.key !== 'Tab' && ev.key !== 'Alt+Tab')
                 return;
-            const lastOverlay = getPresentedOverlay(doc, OVERLAY_FOCUS_TRAP_SELECTOR);
+            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 = getActiveElement(doc);
+            const activeElement = doc.activeElement;
             if (activeElement === lastOverlay) {
                 ev.preventDefault();
                 focusFirstDescendant(lastOverlay);
@@ -464,32 +347,16 @@ const connectListeners = (doc) => {
             if (!isInsideOverlay)
                 return;
             // Get all focusable elements from both light and shadow DOM
-            let allFocusable = [
+            const allFocusable = [
                 ...lastOverlay.querySelectorAll(focusableQueryString),
                 ...(((_c = lastOverlay.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelectorAll(focusableQueryString)) || []),
             ];
-            const selectModalEl = lastOverlay.querySelector(ION_SELECT_MODAL_SELECTOR);
-            const isSheetModal = lastOverlay.classList.contains('modal-sheet');
-            /**
-             * Some sheet modal content, including ion-select-modal,
-             * renders option containers as `ion-item.select-interface-option`.
-             * These can match focusable selectors in some builds but
-             * are not intended tab stops. Keep only true interactive
-             * controls so Tab can move from options to header
-             * controls/handle.
-             */
-            if (selectModalEl) {
-                allFocusable = allFocusable.filter((el) => !el.matches('ion-item.select-interface-option'));
-            }
-            if (isSheetModal) {
-                allFocusable = sortSheetModalFocusables(lastOverlay, allFocusable);
-            }
             if (allFocusable.length === 0) {
                 ev.preventDefault();
                 return;
             }
             // Find current element's index (accounting for shadow DOM)
-            let currentIndex = activeElement
+            const currentIndex = activeElement
                 ? allFocusable.findIndex((el) => {
                     var _a;
                     if (el === activeElement)
@@ -500,31 +367,6 @@ const connectListeners = (doc) => {
                     return rootNode instanceof ShadowRoot && rootNode.host === el;
                 })
                 : -1;
-            /**
-             * Radio/checkbox groups can move focus onto an option with
-             * `tabIndex=-1`, while another option still has `tabIndex=0`
-             * in the list. `findIndex` then yields -1 and Tab incorrectly
-             * wraps to `allFocusable[0]`.
-             * Treat focus on any option control inside the sheet modal
-             * as the same trap slot as the listed tabbable option
-             * (`tabIndex >= 0`) so Tab goes handle → Cancel, not back
-             * to the first radio.
-             */
-            if (currentIndex < 0 && isSheetModal && activeElement) {
-                const optionHost = getOptionControlHost(activeElement);
-                if (optionHost && lastOverlay.contains(optionHost)) {
-                    const directIndex = allFocusable.indexOf(optionHost);
-                    if (directIndex >= 0) {
-                        currentIndex = directIndex;
-                    }
-                    else {
-                        const tabbableOptionIndex = getTabbableOptionControlIndex(allFocusable, lastOverlay);
-                        if (tabbableOptionIndex >= 0) {
-                            currentIndex = tabbableOptionIndex;
-                        }
-                    }
-                }
-            }
             ev.preventDefault();
             // Helper to focus an element, handling shadow DOM properly
             const focusElement = (element) => {
@@ -538,43 +380,24 @@ const connectListeners = (doc) => {
                 }
                 focusVisibleElement(element);
             };
-            let nextIndex;
             if (ev.shiftKey) {
                 // Shift+Tab: previous element, wrap to last if at first
                 if (currentIndex <= 0) {
-                    nextIndex = allFocusable.length - 1;
+                    focusLastDescendant(lastOverlay);
                 }
                 else {
-                    nextIndex = currentIndex - 1;
+                    focusElement(allFocusable[currentIndex - 1]);
                 }
             }
             else {
                 // Tab: next element, wrap to first if at last
                 if (currentIndex < 0 || currentIndex >= allFocusable.length - 1) {
-                    nextIndex = 0;
+                    focusFirstDescendant(lastOverlay);
                 }
                 else {
-                    nextIndex = currentIndex + 1;
-                }
-            }
-            const nextEl = allFocusable[nextIndex];
-            const overlayTrap = lastOverlay;
-            const tabbableOptionIndex = isSheetModal ? getTabbableOptionControlIndex(allFocusable, lastOverlay) : -1;
-            /**
-             * The trap list only includes one tabbable option host
-             * (`tabIndex >= 0`), usually the checked/first radio.
-             * `focusin` tracks the real last-focused option; use it
-             * whenever Tab would focus that slot (wrap from Cancel,
-             * Shift+Tab from handle, etc.).
-             */
-            let focusTarget = nextEl;
-            if (isSheetModal && tabbableOptionIndex >= 0 && nextIndex === tabbableOptionIndex) {
-                const saved = overlayTrap.trapLastSheetOptionControl;
-                if ((saved === null || saved === void 0 ? void 0 : saved.isConnected) && lastOverlay.contains(saved) && saved !== nextEl) {
-                    focusTarget = saved;
+                    focusElement(allFocusable[currentIndex + 1]);
                 }
             }
-            focusElement(focusTarget);
         }, true);
         // handle back-button click
         doc.addEventListener('ionBackButton', (ev) => {

package/dist/collection/utils/status-tap.js

@@ -3,7 +3,7 @@
  */
 import { readTask, writeTask } from "@stencil/core";
 import { findClosestIonContent, scrollToTop } from "./content";
-import { componentOnReady } from "./helpers";
+import { waitForComponentReady } from "./helpers";
 export const startStatusTap = () => {
     const win = window;
     win.addEventListener('statusTap', () => {
@@ -16,7 +16,7 @@ export const startStatusTap = () => {
             }
             const contentEl = findClosestIonContent(el);
             if (contentEl) {
-                new Promise((resolve) => componentOnReady(contentEl, resolve)).then(() => {
+                waitForComponentReady(contentEl).then(() => {
                     writeTask(async () => {
                         /**
                          * If scrolling and user taps status bar,

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

@@ -1,6 +1,10 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
+import { defaultTheme as baseTheme } from "../../../../../themes/base/default.tokens";
+import { defaultTheme as ionicTheme } from "../../../../../themes/ionic/default.tokens";
+import { defaultTheme as iosTheme } from "../../../../../themes/ios/default.tokens";
+import { defaultTheme as mdTheme } from "../../../../../themes/md/default.tokens";
 /**
  * Overwrites the default Playwright page.setContent method.
  *
@@ -62,6 +66,36 @@ export const setContent = async (page, html, testInfo, options) => {
       <script nomodule src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.js"></script>
     `;
     }
+    const themes = {
+        ios: iosTheme,
+        md: mdTheme,
+        ionic: ionicTheme,
+        base: baseTheme,
+    };
+    const tokens = themes[theme];
+    /**
+     * This object is CRITICAL for Playwright stability.
+     *
+     * WHY IT'S NEEDED:
+     * 1. Bypasses Dynamic Loading: It avoids the consistent import
+     * failure 'await import(...)' when the global theme needed to be
+     * re-applied after the initial Ionic framework load.
+     * 2. Prevents Incorrect Palettes: It directly initializes with the
+     * required 'enabled: "always"' palette before any scripts run. This guarantees that correct CSS variables are loaded from the start.
+     * Otherwise, it would load the default light palette.
+     * 3. Ensures Component Setup: Since components do not automatically
+     * re-render if 'window.Ionic.config' is modified post-load, tokens MUST
+     * be present during the initial render to ensure properties and classes
+     * (e.g., 'chip-size-large') are correctly applied. Hence, the need to
+     * import the tokens and set the 'customTheme' here.
+     */
+    const customTheme = Object.assign(Object.assign({}, tokens), { palette: Object.assign(Object.assign({}, tokens.palette), { dark: {
+                enabled: palette === 'dark' ? 'always' : 'never',
+            }, highContrast: {
+                enabled: palette === 'high-contrast' ? 'always' : 'never',
+            }, highContrastDark: {
+                enabled: palette === 'high-contrast-dark' ? 'always' : 'never',
+            } }) });
     const output = `
     <!DOCTYPE html>
     <html dir="${direction}" lang="en">
@@ -71,14 +105,14 @@ export const setContent = async (page, html, testInfo, options) => {
         <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
         ${ionicCSSImports}
         <link href="${baseUrl}/scripts/testing/styles.css" rel="stylesheet" />
-        ${palette !== 'light' ? `<link href="${baseUrl}/css/palettes/${palette}.always.css" rel="stylesheet" />` : ''}
         <script src="${baseUrl}/scripts/testing/scripts.js"></script>
         ${ionicJSImports}
         <script>
           window.Ionic = {
             config: {
               mode: '${mode}',
-              theme: '${theme}'
+              theme: '${theme}',
+              customTheme: ${JSON.stringify(customTheme)}
             }
           }
         </script>