@ionic/core 8.8.7-dev.11779400352.127ba526 → 8.8.7-dev.11779921691.1777274a

package/dist/collection/themes/md/high-contrast-dark.tokens.js

@@ -0,0 +1,10 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { generateColorSteps } from "../../utils/theme";
+import { highContrastDarkTheme as baseHighContrastDarkTheme } from "../base/high-contrast-dark.tokens";
+export const highContrastDarkTheme = Object.assign(Object.assign({}, baseHighContrastDarkTheme), { backgroundColor: '#121212',
+    // TODO(FW-6864): Remove once IonToolbar themes are added
+    toolbar: {
+        background: '#1f1f1f',
+    }, backgroundColorStep: generateColorSteps('#121212', '#ffffff'), textColorStep: generateColorSteps('#ffffff', '#888888') });

package/dist/collection/themes/md/high-contrast.tokens.js

@@ -0,0 +1,5 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { highContrastTheme as baseHighContrastTheme } from "../base/high-contrast.tokens";
+export const highContrastTheme = Object.assign({}, baseHighContrastTheme);

package/dist/collection/themes/md/light.tokens.js

@@ -0,0 +1,4 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+export const lightTheme = {};

package/dist/collection/themes/md/shared.tokens.js

@@ -0,0 +1,127 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+/**
+ * Common tokens utilized multiple times across `md` theme files.
+ */
+import { mix, rgba } from "../../utils/theme";
+import { defaultTheme as baseDefaultTheme } from "../base/default.tokens";
+import { colors as baseColors } from "../base/shared.tokens";
+export const global = {
+    root: parseFloat(baseDefaultTheme.fontSize.root),
+};
+export const components = {
+    chip: {
+        font: {
+            size: 14,
+        },
+    },
+    item: {
+        padding: {
+            start: 'var(--ion-spacing-lg)',
+        },
+        inner: {
+            padding: {
+                end: 'var(--ion-spacing-lg)',
+            },
+        },
+        border: {
+            color: `var(--ion-item-border-color, var(--ion-border-color, var(--ion-background-color-step-150, ${rgba(baseColors.textColorRgb, 0.13)})))`,
+        },
+        // Targets host with slots or all children with slots
+        slot: {
+            child: {
+                // Targets `::slotted([slot="start"])`
+                start: {
+                    margin: {
+                        end: 'var(--ion-spacing-lg)',
+                    },
+                },
+                // Targets `::slotted([slot="end"])`
+                end: {
+                    margin: {
+                        start: 'var(--ion-spacing-lg)',
+                    },
+                },
+            },
+        },
+        icon: {
+            slot: {
+                color: rgba(baseColors.textColorRgb, 0.54),
+                font: {
+                    size: 24,
+                },
+                margin: {
+                    top: 'var(--ion-spacing-md)',
+                    bottom: 'var(--ion-spacing-md)',
+                },
+            },
+            start: {
+                slot: {
+                    margin: {
+                        end: 'var(--ion-spacing-xxxxl)',
+                    },
+                },
+            },
+            end: {
+                slot: {
+                    margin: {
+                        start: 'var(--ion-spacing-lg)',
+                    },
+                },
+            },
+        },
+        note: {
+            slot: {
+                font: {
+                    size: 11,
+                },
+                padding: {
+                    top: 'var(--ion-spacing-450)',
+                    end: 'var(--ion-spacing-0)',
+                    bottom: 'var(--ion-spacing-250)',
+                    start: 'var(--ion-spacing-0)',
+                },
+            },
+        },
+        avatar: {
+            width: 'var(--ion-scaling-xl)',
+            height: 'var(--ion-scaling-xl)',
+        },
+        thumbnail: {
+            width: 'var(--ion-scaling-1400)',
+            height: 'var(--ion-scaling-1400)',
+        },
+        // media: avatar and thumbnail
+        media: {
+            slot: {
+                margin: {
+                    top: 'var(--ion-spacing-sm)',
+                    bottom: 'var(--ion-spacing-sm)',
+                },
+            },
+            start: {
+                slot: {
+                    margin: {
+                        end: 'var(--ion-spacing-lg)',
+                    },
+                },
+            },
+            end: {
+                slot: {
+                    margin: {
+                        start: 'var(--ion-spacing-lg)',
+                    },
+                },
+            },
+        },
+        paragraph: {
+            color: `var(--ion-text-color-400, ${mix(baseColors.white, baseColors.black, '40%')})`,
+        },
+    },
+    itemDivider: {
+        font: {
+            size: 14,
+        },
+    },
+};

package/dist/collection/themes/themes.interfaces.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/utils/badge-position.js

@@ -0,0 +1,171 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { isRTL } from "./rtl/index";
+/**
+ * Positions a badge relative to a target element.
+ *
+ * Two modes are selected via `anchorToEdge`:
+ *
+ * - Arc-based (default, `anchorToEdge: false`): Places the badge at the
+ *   45 degree point on the target's corner arc using `borderRadius * 0.2929`.
+ *   Used for avatars, buttons, and tab button labels.
+ *
+ * - Fixed overlap (`anchorToEdge: true`): Positions the badge so it overlaps
+ *   the target's inline-end edge by `OVERLAP` pixels, with the top/bottom edge
+ *   aligned to the target's top/bottom edge. Used for tab button icons.
+ *
+ * If `relativeTo` is provided, the position accounts for the delta between
+ * the target and the badge's positioned ancestor.
+ *
+ * @param config The configuration for badge positioning
+ */
+export function positionBadge(config) {
+    var _a, _b;
+    const { badge, target, clamp = true } = config;
+    const relativeTo = (_a = config.relativeTo) !== null && _a !== void 0 ? _a : target;
+    const rootNode = target.getRootNode();
+    const host = (_b = config.host) !== null && _b !== void 0 ? _b : (rootNode instanceof ShadowRoot ? rootNode.host : target);
+    const rtl = isRTL(host);
+    const OVERLAP = 6;
+    const targetRect = target.getBoundingClientRect();
+    const relativeToRect = relativeTo.getBoundingClientRect();
+    const vertical = badge.getAttribute('vertical');
+    // Delta from the relativeTo element's edges to the target's edges
+    const deltaTop = targetRect.top - relativeToRect.top;
+    const deltaBottom = relativeToRect.bottom - targetRect.bottom;
+    // Horizontal delta flips depending on direction
+    const deltaInlineEnd = rtl ? targetRect.left - relativeToRect.left : relativeToRect.right - targetRect.right;
+    let inlineStart;
+    let top;
+    let bottom;
+    if (config.anchorToEdge) {
+        /**
+         * Fixed overlap: badge overlaps the target's inline-end edge by
+         * OVERLAP pixels, top/bottom edge aligned with target's top/bottom
+         * edge.
+         */
+        inlineStart = relativeToRect.width - deltaInlineEnd - OVERLAP;
+        top = deltaTop;
+        bottom = deltaBottom;
+    }
+    else {
+        /**
+         * Arc-based: badge center placed at the 45 degree point on the target's
+         * corner arc.
+         */
+        const computedStyles = getComputedStyle(target);
+        let borderRadius = parseFloat(computedStyles.borderTopRightRadius) || 0;
+        const maxRadius = Math.min(targetRect.width, targetRect.height) / 2;
+        borderRadius = Math.min(borderRadius, maxRadius);
+        // 0.2929 = 1 - cos(45°)
+        const cornerOffset = borderRadius * 0.2929;
+        const badgeRect = badge.getBoundingClientRect();
+        inlineStart = relativeToRect.width - cornerOffset - deltaInlineEnd - OVERLAP / 2;
+        top = cornerOffset + deltaTop - badgeRect.height / 2;
+        bottom = cornerOffset + deltaBottom - badgeRect.height / 2;
+    }
+    // Optionally clamp so the badge doesn't extend past the target's edges
+    const clampedTop = clamp ? Math.max(top, deltaTop) : top;
+    const clampedBottom = clamp ? Math.max(bottom, deltaBottom) : bottom;
+    badge.style.insetInlineStart = `${inlineStart}px`;
+    if (vertical === 'top') {
+        badge.style.top = `${clampedTop}px`;
+        badge.style.bottom = '';
+    }
+    else if (vertical === 'bottom') {
+        badge.style.bottom = `${clampedBottom}px`;
+        badge.style.top = '';
+    }
+}
+/**
+ * Creates a ResizeObserver that repositions the badge whenever
+ * the target element changes size.
+ *
+ * @param config The configuration for badge positioning and observation
+ * @returns BadgeObserver
+ */
+export function createBadgeObserver(config) {
+    var _a;
+    const observer = new ResizeObserver(() => {
+        positionBadge(config);
+    });
+    observer.observe(config.target);
+    /**
+     * The `relativeTo` element must also be observed when it differs
+     * from `target`. Slotted content (like `ion-icon`) may render
+     * asynchronously after the parent component loads, causing
+     * `relativeTo` to resize to its final dimensions in a later
+     * frame. Without observing it, the badge position would be
+     * calculated against stale dimensions and never corrected.
+     */
+    const relativeTo = (_a = config.relativeTo) !== null && _a !== void 0 ? _a : config.target;
+    if (relativeTo !== config.target) {
+        observer.observe(relativeTo);
+    }
+    /**
+     * The badge itself must also be observed. Arc-based positioning uses
+     * `badgeRect.height / 2` for both top and bottom offsets, so if the
+     * badge resizes after initial layout (e.g. count changes from "9" to
+     * "99+") the position would be stale by half the height delta.
+     */
+    observer.observe(config.badge);
+    return {
+        disconnect: () => observer.disconnect(),
+    };
+}
+/**
+ * Creates a BadgeManager for a host element.
+ *
+ * @param host The element that has the slotted badge.
+ * @param getConfig A function that returns the config for the badge observer.
+ */
+export function createBadgeManager(host, getConfig) {
+    let observer;
+    const getBadge = () => {
+        return host.querySelector('ion-badge[vertical]');
+    };
+    const setup = () => {
+        observer === null || observer === void 0 ? void 0 : observer.disconnect();
+        observer = undefined;
+        const badge = getBadge();
+        if (!badge) {
+            return;
+        }
+        const config = getConfig();
+        // If config is undefined, it means the target element (e.g. ion-icon) wasn't found, so an observer shouldn't be created.
+        if (!config) {
+            return;
+        }
+        observer = createBadgeObserver(Object.assign(Object.assign({}, config), { badge }));
+    };
+    const destroy = () => {
+        observer === null || observer === void 0 ? void 0 : observer.disconnect();
+        observer = undefined;
+    };
+    const onSlotChanged = () => {
+        /**
+         * Badges can be added or removed dynamically to mimic use
+         * cases like notifications. Based on the presence of a
+         * badge, we need to set up or destroy the badge observer.
+         *
+         * If the badge observer is already set up and there is a
+         * badge, then we don't need to do anything.
+         */
+        const badge = getBadge();
+        if (badge && observer) {
+            return;
+        }
+        if (badge) {
+            setup();
+        }
+        else {
+            destroy();
+        }
+    };
+    return {
+        init: setup,
+        destroy,
+        onSlotChanged,
+    };
+}

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

@@ -1,7 +1,7 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { componentOnReady } from "../helpers";
+import { waitForComponentReady } from "../helpers";
 import { printRequiredElementError } from "../logging";
 const ION_CONTENT_TAG_NAME = 'ION-CONTENT';
 export const ION_CONTENT_ELEMENT_SELECTOR = 'ion-content';
@@ -27,7 +27,7 @@ export const isIonContent = (el) => el.tagName === ION_CONTENT_TAG_NAME;
  */
 export const getScrollElement = async (el) => {
     if (isIonContent(el)) {
-        await new Promise((resolve) => componentOnReady(el, resolve));
+        await waitForComponentReady(el);
         return el.getScrollElement();
     }
     return el;

package/dist/collection/utils/framework-delegate.js

@@ -2,7 +2,7 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { config } from "../global/config";
-import { componentOnReady } from "./helpers";
+import { waitForComponentReady } from "./helpers";
 // TODO(FW-2832): types
 export const attachComponent = async (delegate, container, component, cssClasses, componentProps, inline) => {
     var _a;
@@ -20,7 +20,7 @@ export const attachComponent = async (delegate, container, component, cssClasses
         Object.assign(el, componentProps);
     }
     container.appendChild(el);
-    await new Promise((resolve) => componentOnReady(el, resolve));
+    await waitForComponentReady(el);
     return el;
 };
 export const detachComponent = (delegate, element) => {
@@ -67,7 +67,7 @@ export const CoreDelegate = () => {
              */
             BaseComponent.appendChild(el);
             ChildComponent = el;
-            await new Promise((resolve) => componentOnReady(el, resolve));
+            await waitForComponentReady(el);
         }
         else if (BaseComponent.children.length > 0 &&
             (BaseComponent.tagName === 'ION-MODAL' || BaseComponent.tagName === 'ION-POPOVER')) {

package/dist/collection/utils/helpers.js

@@ -68,6 +68,14 @@ export const componentOnReady = (el, callback) => {
         raf(() => callback(el));
     }
 };
+/**
+ * Promise-based wrapper around componentOnReady. Use when you need to await
+ * component readiness before accessing internal refs (e.g. in early lifecycle
+ * hooks like Vue onMounted with the custom elements build).
+ */
+export const waitForComponentReady = (el) => {
+    return new Promise((resolve) => componentOnReady(el, () => resolve(el)));
+};
 /**
  * This functions checks if a Stencil component is using
  * the lazy loaded build of Stencil. Returns `true` if
@@ -397,3 +405,35 @@ export const shallowEqualStringMap = (map1, map2) => {
 export const isSafeNumber = (input) => {
     return typeof input === 'number' && !isNaN(input) && isFinite(input);
 };
+const SCHEME = /^[a-z][a-z0-9+\-.]*:/;
+export const openURL = async (url, ev, direction, animation) => {
+    if (url != null && url[0] !== '#' && !SCHEME.test(url)) {
+        const router = document.querySelector('ion-router');
+        if (router) {
+            if (ev != null) {
+                ev.preventDefault();
+            }
+            return router.push(url, direction, animation);
+        }
+    }
+    return false;
+};
+/**
+ * Deep merges two objects, with source properties overriding target properties
+ * @param target The target object to merge into
+ * @param source The source object to merge from
+ * @returns The merged object
+ */
+export const deepMerge = (target, source) => {
+    var _a;
+    const result = Object.assign({}, target);
+    for (const key in source) {
+        if (source[key] && typeof source[key] === 'object' && !Array.isArray(source[key])) {
+            result[key] = deepMerge((_a = result[key]) !== null && _a !== void 0 ? _a : {}, source[key]);
+        }
+        else {
+            result[key] = source[key];
+        }
+    }
+    return result;
+};

package/dist/collection/utils/input-shims/hacks/scroll-padding.js

@@ -26,11 +26,11 @@ export const setScrollPadding = (contentEl, paddingAmount, clearCallback) => {
         clearTimeout(timer);
     }
     if (paddingAmount > 0) {
-        contentEl.style.setProperty('--keyboard-offset', `${paddingAmount}px`);
+        contentEl.style.setProperty('--internal-keyboard-offset', `${paddingAmount}px`);
     }
     else {
         contentEl[PADDING_TIMER_KEY] = setTimeout(() => {
-            contentEl.style.setProperty('--keyboard-offset', '0px');
+            contentEl.style.setProperty('--internal-keyboard-offset', '0px');
             if (clearCallback) {
                 clearCallback();
             }

package/dist/collection/utils/input-shims/input-shims.js

@@ -3,7 +3,7 @@
  */
 import { doc } from "../browser/index";
 import { findClosestIonContent } from "../content";
-import { componentOnReady } from "../helpers";
+import { waitForComponentReady } from "../helpers";
 import { Keyboard } from "../native/keyboard";
 import { enableHideCaretOnScroll } from "./hacks/hide-caret";
 import { enableInputBlurring } from "./hacks/input-blurring";
@@ -51,7 +51,7 @@ export const startInputShims = async (config, platform) => {
      */
     const keyboardResizeMode = await Keyboard.getResizeMode();
     const registerInput = async (componentEl) => {
-        await new Promise((resolve) => componentOnReady(componentEl, resolve));
+        await waitForComponentReady(componentEl);
         const inputRoot = componentEl.shadowRoot || componentEl;
         const inputEl = inputRoot.querySelector('input') || inputRoot.querySelector('textarea');
         const scrollEl = findClosestIonContent(componentEl);

package/dist/collection/utils/media.js

@@ -1,7 +1,6 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-// TODO(FW-7285): Replace with global breakpoints
 export const SIZE_TO_MEDIA = {
     xs: '(min-width: 0px)',
     sm: '(min-width: 576px)',

package/dist/collection/utils/menu-controller/index.js

@@ -4,7 +4,7 @@
 import { doc } from "../browser/index";
 import { MENU_BACK_BUTTON_PRIORITY } from "../hardware-back-button";
 import { printIonWarning } from "../logging/index";
-import { componentOnReady } from "../helpers";
+import { waitForComponentReady } from "../helpers";
 import { menuOverlayAnimation } from "./animations/overlay";
 import { menuPushAnimation } from "./animations/push";
 import { menuRevealAnimation } from "./animations/reveal";
@@ -180,7 +180,7 @@ const createMenuController = () => {
         return undefined;
     };
     const waitUntilReady = () => {
-        return Promise.all(Array.from(document.querySelectorAll('ion-menu')).map((menu) => new Promise((resolve) => componentOnReady(menu, resolve))));
+        return Promise.all(Array.from(document.querySelectorAll('ion-menu')).map((menu) => waitForComponentReady(menu)));
     };
     registerAnimation('reveal', menuRevealAnimation);
     registerAnimation('push', menuPushAnimation);

package/dist/collection/utils/overlays.js

@@ -10,7 +10,7 @@ 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();
@@ -94,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();

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>