@ionic/core 9.0.6-dev.11790349282.1a877abd → 9.0.6-dev.11790776272.1d27d1bd

package/dist/esm/scroll-hide-controller-m-39_CyK.js

@@ -0,0 +1,342 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { w as win, d as doc } from './index-ZjP4CjeZ.js';
+import { i as config, e as readTask, w as writeTask } from './index-CsxpVq9f.js';
+import { K as Keyboard, a as KeyboardResize } from './keyboard-DAF8GNJ9.js';
+import { g as getScrollElement } from './index-D0-93AmS.js';
+
+/**
+ * The element that resizes when the keyboard opens
+ * is going to depend on the resize mode
+ * which is why we check that here.
+ */
+const getResizeContainer = (resizeMode) => {
+    /**
+     * If doc is undefined then we are
+     * in an SSR environment, so the keyboard
+     * adjustment does not apply.
+     * If the webview does not resize then there
+     * is no container to resize.
+     */
+    if (doc === undefined || resizeMode === KeyboardResize.None || resizeMode === undefined) {
+        return null;
+    }
+    /**
+     * The three remaining resize modes: Native, Ionic, and Body
+     * all cause `ion-app` to resize, so we can listen for changes
+     * on that. In the event `ion-app` is not available then
+     * we can fall back to `body`.
+     */
+    const appRootSelector = config.get('appRootSelector', 'ion-app');
+    const ionApp = doc.querySelector(appRootSelector);
+    return ionApp ?? doc.body;
+};
+/**
+ * Get the height of ion-app or body.
+ * This is used for determining if the webview
+ * has resized before the keyboard closed.
+ * */
+const getResizeContainerHeight = (resizeMode) => {
+    const containerElement = getResizeContainer(resizeMode);
+    return containerElement === null ? 0 : containerElement.clientHeight;
+};
+/**
+ * Creates a controller that tracks and reacts to opening or closing the keyboard.
+ *
+ * @internal
+ * @param keyboardChangeCallback A function to call when the keyboard opens or closes.
+ */
+const createKeyboardController = async (keyboardChangeCallback) => {
+    let keyboardWillShowHandler;
+    let keyboardWillHideHandler;
+    let keyboardVisible;
+    /**
+     * This lets us determine if the webview content
+     * has resized as a result of the keyboard.
+     */
+    let initialResizeContainerHeight;
+    const init = async () => {
+        const resizeOptions = await Keyboard.getResizeMode();
+        const resizeMode = resizeOptions === undefined ? undefined : resizeOptions.mode;
+        keyboardWillShowHandler = () => {
+            /**
+             * We need to compute initialResizeContainerHeight right before
+             * the keyboard opens to guarantee the resize container is visible.
+             * The resize container may not be visible if we compute this
+             * as soon as the keyboard controller is created.
+             * We should only need to do this once to avoid additional clientHeight
+             * computations.
+             */
+            if (initialResizeContainerHeight === undefined) {
+                initialResizeContainerHeight = getResizeContainerHeight(resizeMode);
+            }
+            keyboardVisible = true;
+            fireChangeCallback(keyboardVisible, resizeMode);
+        };
+        keyboardWillHideHandler = () => {
+            keyboardVisible = false;
+            fireChangeCallback(keyboardVisible, resizeMode);
+        };
+        win?.addEventListener('keyboardWillShow', keyboardWillShowHandler);
+        win?.addEventListener('keyboardWillHide', keyboardWillHideHandler);
+    };
+    const fireChangeCallback = (state, resizeMode) => {
+        if (keyboardChangeCallback) {
+            keyboardChangeCallback(state, createResizePromiseIfNeeded(resizeMode));
+        }
+    };
+    /**
+     * Code responding to keyboard lifecycles may need
+     * to show/hide content once the webview has
+     * resized as a result of the keyboard showing/hiding.
+     * createResizePromiseIfNeeded provides a way for code to wait for the
+     * resize event that was triggered as a result of the keyboard.
+     */
+    const createResizePromiseIfNeeded = (resizeMode) => {
+        if (
+        /**
+         * If we are in an SSR environment then there is
+         * no window to resize. Additionally, if there
+         * is no resize mode or the resize mode is "None"
+         * then initialResizeContainerHeight will be 0
+         */
+        initialResizeContainerHeight === 0 ||
+            /**
+             * If the keyboard is closed before the webview resizes initially
+             * then the webview will never resize.
+             */
+            initialResizeContainerHeight === getResizeContainerHeight(resizeMode)) {
+            return;
+        }
+        /**
+         * Get the resize container so we can
+         * attach the ResizeObserver below to
+         * the correct element.
+         */
+        const containerElement = getResizeContainer(resizeMode);
+        if (containerElement === null) {
+            return;
+        }
+        /**
+         * Some part of the web content should resize,
+         * and we need to listen for a resize.
+         */
+        return new Promise((resolve) => {
+            const callback = () => {
+                /**
+                 * As per the spec, the ResizeObserver
+                 * will fire when observation starts if
+                 * the observed element is rendered and does not
+                 * have a size of 0 x 0. However, the watched element
+                 * may or may not have resized by the time this first
+                 * callback is fired. As a result, we need to check
+                 * the dimensions of the element.
+                 *
+                 * https://www.w3.org/TR/resize-observer/#intro
+                 */
+                if (containerElement.clientHeight === initialResizeContainerHeight) {
+                    /**
+                     * The resize happened, so stop listening
+                     * for resize on this element.
+                     */
+                    ro.disconnect();
+                    resolve();
+                }
+            };
+            /**
+             * In Capacitor there can be delay between when the window
+             * resizes and when the container element resizes, so we cannot
+             * rely on a 'resize' event listener on the window.
+             * Instead, we need to determine when the container
+             * element resizes using a ResizeObserver.
+             */
+            const ro = new ResizeObserver(callback);
+            ro.observe(containerElement);
+        });
+    };
+    const destroy = () => {
+        win?.removeEventListener('keyboardWillShow', keyboardWillShowHandler);
+        win?.removeEventListener('keyboardWillHide', keyboardWillHideHandler);
+        keyboardWillShowHandler = keyboardWillHideHandler = undefined;
+    };
+    const isKeyboardVisible = () => keyboardVisible;
+    await init();
+    return { init, destroy, isKeyboardVisible };
+};
+
+const TOP_VISIBLE_THRESHOLD = 80;
+const SCROLL_HIDE_THRESHOLD = 60;
+const WHEEL_SUPPRESS_DURATION_MS = 80;
+const SUPPRESS_SHOW_DURATION_MS = 400;
+/**
+ * Creates a controller that manages scroll-based hide/show behavior
+ * for headers, footers, and tab bars.
+ *
+ * Listens to both wheel and scroll events. Wheel events (desktop mice)
+ * give direction instantly via deltaY. Scroll events cover touch,
+ * trackpad, and programmatic scrolling where wheel doesn't fire.
+ * A short suppression window stops them from double-processing the
+ * same gesture.
+ *
+ * When the user reverses scroll direction, we save that position as
+ * an anchor. The bar only hides after scrolling 60px past that
+ * anchor, which prevents flickering on small or jittery movements.
+ * Showing is immediate on direction change.
+ *
+ * When `options` is provided, the controller also handles the DOM
+ * setup: ResizeObserver for height tracking, CSS variable read/write,
+ * content partner/hidden class toggling, inert/aria-hidden, and
+ * full teardown cleanup. This avoids duplicating the same setup
+ * across header, footer, and tab-bar.
+ *
+ * @internal
+ * @param contentEl The content element to resolve the scroll element from.
+ * @param options Configuration for DOM setup (classes, CSS vars, a11y).
+ */
+const createScrollHideController = async (contentEl, options) => {
+    const { el, cssVar, hiddenClass, contentPartnerClass, contentHiddenClass, shouldKeepAriaHidden } = options;
+    let controllerIsHidden = false;
+    let resizeObserver;
+    // --- DOM setup: height tracking, classes, a11y ---
+    const updateHideHeight = () => {
+        readTask(() => {
+            const heightPx = el.offsetHeight;
+            writeTask(() => {
+                el.style.setProperty(cssVar, `${heightPx}px`);
+                contentEl.style.setProperty(cssVar, `${heightPx}px`);
+            });
+        });
+    };
+    const setHidden = (hidden) => {
+        controllerIsHidden = hidden;
+        el.classList.toggle(hiddenClass, hidden);
+        if (hidden) {
+            el.setAttribute('inert', '');
+            el.setAttribute('aria-hidden', 'true');
+        }
+        else {
+            el.removeAttribute('inert');
+            if (!shouldKeepAriaHidden || !shouldKeepAriaHidden()) {
+                el.removeAttribute('aria-hidden');
+            }
+        }
+        contentEl.classList.toggle(contentHiddenClass, hidden);
+    };
+    // --- Scroll math ---
+    const scrollEl = await getScrollElement(contentEl);
+    let lastScrollPosition = 0;
+    let scrollPositionAtDirectionChange = 0;
+    let lastWheelEventTimestamp = 0;
+    let suppressShowUntil = 0;
+    const commitHide = (hidden) => {
+        if (hidden) {
+            suppressShowUntil = Date.now() + SUPPRESS_SHOW_DURATION_MS;
+        }
+        else {
+            suppressShowUntil = 0;
+        }
+        setHidden(hidden);
+    };
+    const handleWheel = (wheelEvent) => {
+        lastWheelEventTimestamp = Date.now();
+        readTask(() => {
+            const currentScrollTop = scrollEl.scrollTop;
+            // Both wheel and scroll events fire for mouse wheel input.
+            // Scroll events are suppressed for 80ms after a wheel event,
+            // but when they resume, handleScroll needs an up-to-date
+            // lastScrollPosition or it may detect the wrong direction.
+            lastScrollPosition = currentScrollTop;
+            if (currentScrollTop <= TOP_VISIBLE_THRESHOLD) {
+                if (controllerIsHidden) {
+                    writeTask(() => commitHide(false));
+                }
+                return;
+            }
+            if (wheelEvent.deltaY < 0) {
+                scrollPositionAtDirectionChange = currentScrollTop;
+                if (controllerIsHidden) {
+                    writeTask(() => commitHide(false));
+                }
+            }
+            else if (wheelEvent.deltaY > 0) {
+                const scrolledSinceDirectionChange = currentScrollTop - scrollPositionAtDirectionChange;
+                if (scrolledSinceDirectionChange >= SCROLL_HIDE_THRESHOLD && !controllerIsHidden) {
+                    writeTask(() => commitHide(true));
+                }
+            }
+        });
+    };
+    const handleScroll = () => {
+        if (Date.now() - lastWheelEventTimestamp < WHEEL_SUPPRESS_DURATION_MS) {
+            return;
+        }
+        readTask(() => {
+            const currentScrollTop = scrollEl.scrollTop;
+            if (currentScrollTop <= TOP_VISIBLE_THRESHOLD) {
+                if (controllerIsHidden) {
+                    writeTask(() => commitHide(false));
+                }
+                lastScrollPosition = currentScrollTop;
+                return;
+            }
+            if (currentScrollTop === lastScrollPosition) {
+                return;
+            }
+            const isScrollingDown = currentScrollTop > lastScrollPosition;
+            const wasScrollingDown = lastScrollPosition > scrollPositionAtDirectionChange;
+            if (isScrollingDown !== wasScrollingDown) {
+                scrollPositionAtDirectionChange = lastScrollPosition;
+            }
+            const scrolledSinceDirectionChange = Math.abs(currentScrollTop - scrollPositionAtDirectionChange);
+            const requiredScrollDistance = isScrollingDown ? SCROLL_HIDE_THRESHOLD : 0;
+            lastScrollPosition = currentScrollTop;
+            if (scrolledSinceDirectionChange < requiredScrollDistance) {
+                return;
+            }
+            const shouldHide = isScrollingDown;
+            if (shouldHide !== controllerIsHidden) {
+                if (!shouldHide && Date.now() < suppressShowUntil) {
+                    return;
+                }
+                writeTask(() => commitHide(shouldHide));
+            }
+        });
+    };
+    // --- Controller ---
+    let initialized = false;
+    const init = () => {
+        initialized = true;
+        updateHideHeight();
+        if (typeof ResizeObserver !== 'undefined') {
+            resizeObserver = new ResizeObserver(() => updateHideHeight());
+            resizeObserver.observe(el);
+        }
+        scrollEl.addEventListener('scroll', handleScroll, { passive: true });
+        scrollEl.addEventListener('wheel', handleWheel, { passive: true });
+        contentEl.classList.add(contentPartnerClass);
+    };
+    const destroy = () => {
+        if (!initialized)
+            return;
+        scrollEl.removeEventListener('scroll', handleScroll);
+        scrollEl.removeEventListener('wheel', handleWheel);
+        if (resizeObserver) {
+            resizeObserver.disconnect();
+            resizeObserver = undefined;
+        }
+        contentEl.classList.remove(contentPartnerClass, contentHiddenClass);
+        contentEl.style.removeProperty(cssVar);
+        if (controllerIsHidden) {
+            el.classList.remove(hiddenClass);
+            el.removeAttribute('inert');
+            el.removeAttribute('aria-hidden');
+            controllerIsHidden = false;
+        }
+        el.style.removeProperty(cssVar);
+    };
+    const isHidden = () => controllerIsHidden;
+    return { isHidden, init, destroy };
+};
+
+export { createKeyboardController as a, createScrollHideController as c };

package/dist/esm/{select-option-render-CGxPejmz.js → select-option-render-CDyG_Ujc.js}

@@ -1,8 +1,8 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { h } from './index-D9OR05yj.js';
-import { a as sanitizeDOMTree } from './index-D4ZMZz_3.js';
+import { h } from './index-CsxpVq9f.js';
+import { a as sanitizeDOMTree } from './index-BOBjcNAK.js';
 
 /**
  * Converts a DOM node into a Stencil VNode (or text string) so the

package/dist/esm/{slot-mutation-controller-C3s4-_YN.js → slot-mutation-controller-DXsogmcJ.js}

@@ -1,7 +1,8 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { r as raf, w as win } from './helpers-B54ynME_.js';
+import { w as win } from './index-ZjP4CjeZ.js';
+import { r as raf } from './helpers-DxiyEiQq.js';
 import { i as isRTL } from './dir-Dojwmvde.js';
 
 /**

package/dist/esm/{status-tap-DRx9wSD_.js → status-tap-BzPUcwpI.js}

@@ -1,9 +1,11 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { e as readTask, w as writeTask } from './index-D9OR05yj.js';
-import { a as findClosestIonContent, s as scrollToTop } from './index--21qeSt0.js';
-import { c as componentOnReady } from './helpers-B54ynME_.js';
+import { e as readTask, w as writeTask } from './index-CsxpVq9f.js';
+import { a as findClosestIonContent, s as scrollToTop } from './index-D0-93AmS.js';
+import { c as componentOnReady } from './helpers-DxiyEiQq.js';
+import './index-ZjP4CjeZ.js';
+import './focus-visible-BYk20Mf5.js';
 import './dir-Dojwmvde.js';
 
 const startStatusTap = () => {

package/dist/esm/{swipe-back-Ch3UU_US.js → swipe-back-D8sqbjOf.js}

@@ -1,10 +1,12 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { e as clamp } from './helpers-B54ynME_.js';
+import { e as clamp } from './helpers-DxiyEiQq.js';
 import { i as isRTL } from './dir-Dojwmvde.js';
 import { createGesture } from './index-BmLuEdV7.js';
-import './index-D9OR05yj.js';
+import './index-ZjP4CjeZ.js';
+import './focus-visible-BYk20Mf5.js';
+import './index-CsxpVq9f.js';
 import './gesture-controller-B_gJaBk0.js';
 
 const createSwipeBackGesture = (el, canStartHandler, onStartHandler, onMoveHandler, onEndHandler) => {

package/dist/esm/{theme-byZM6qHV.js → theme-BUF_V-Kg.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.
+ */
 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?.tagName === upperCaseTagName;
 };
 /**
  * Create the mode and color classes for the component based on the classes passed in

package/dist/esm/validity-NcQUGze-.js

@@ -0,0 +1,48 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+/**
+ * Checks if the form element is in an invalid state based on
+ * Ionic validation classes.
+ *
+ * @param el The form element to check.
+ * @returns `true` if the element is invalid, `false` otherwise.
+ */
+const checkInvalidState = (el) => {
+    const hasIonTouched = el.classList.contains('ion-touched');
+    const hasIonInvalid = el.classList.contains('ion-invalid');
+    return hasIonTouched && hasIonInvalid;
+};
+const getValidityFlags = (validity) => {
+    return {
+        badInput: validity.badInput,
+        customError: validity.customError,
+        patternMismatch: validity.patternMismatch,
+        rangeOverflow: validity.rangeOverflow,
+        rangeUnderflow: validity.rangeUnderflow,
+        stepMismatch: validity.stepMismatch,
+        tooLong: validity.tooLong,
+        tooShort: validity.tooShort,
+        typeMismatch: validity.typeMismatch,
+        valueMissing: validity.valueMissing,
+    };
+};
+/**
+ * Reports the validity state of a native form element to ElementInternals.
+ * This delegates to the native element's built-in validation, which automatically
+ * handles required, minlength, maxlength, and other constraints.
+ */
+const reportValidityToElementInternals = (nativeElement, internals) => {
+    if (!nativeElement?.validity) {
+        return;
+    }
+    if (nativeElement.validity.valid) {
+        internals.setValidity({});
+    }
+    else {
+        const validityFlags = getValidityFlags(nativeElement.validity);
+        internals.setValidity(validityFlags, nativeElement.validationMessage, nativeElement);
+    }
+};
+
+export { checkInvalidState as c, reportValidityToElementInternals as r };