@ionic/core 9.0.2 → 9.0.3-dev.11788456135.1ab1d6cd

package/dist/cjs/scroll-hide-controller-DQ9ulQ11.js

@@ -0,0 +1,345 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+'use strict';
+
+var ionicGlobal = require('./ionic-global-BaVLW54G.js');
+var index = require('./index-BsDPqfGS.js');
+var keyboard = require('./keyboard-9uOUQmB-.js');
+var index$1 = require('./index-DWP810QI.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 (ionicGlobal.doc === undefined || resizeMode === keyboard.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 = index.config.get('appRootSelector', 'ion-app');
+    const ionApp = ionicGlobal.doc.querySelector(appRootSelector);
+    return ionApp ?? ionicGlobal.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.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);
+        };
+        ionicGlobal.win?.addEventListener('keyboardWillShow', keyboardWillShowHandler);
+        ionicGlobal.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 = () => {
+        ionicGlobal.win?.removeEventListener('keyboardWillShow', keyboardWillShowHandler);
+        ionicGlobal.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 = () => {
+        index.readTask(() => {
+            const heightPx = el.offsetHeight;
+            index.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 index$1.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();
+        index.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) {
+                    index.writeTask(() => commitHide(false));
+                }
+                return;
+            }
+            if (wheelEvent.deltaY < 0) {
+                scrollPositionAtDirectionChange = currentScrollTop;
+                if (controllerIsHidden) {
+                    index.writeTask(() => commitHide(false));
+                }
+            }
+            else if (wheelEvent.deltaY > 0) {
+                const scrolledSinceDirectionChange = currentScrollTop - scrollPositionAtDirectionChange;
+                if (scrolledSinceDirectionChange >= SCROLL_HIDE_THRESHOLD && !controllerIsHidden) {
+                    index.writeTask(() => commitHide(true));
+                }
+            }
+        });
+    };
+    const handleScroll = () => {
+        if (Date.now() - lastWheelEventTimestamp < WHEEL_SUPPRESS_DURATION_MS) {
+            return;
+        }
+        index.readTask(() => {
+            const currentScrollTop = scrollEl.scrollTop;
+            if (currentScrollTop <= TOP_VISIBLE_THRESHOLD) {
+                if (controllerIsHidden) {
+                    index.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;
+                }
+                index.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 };
+};
+
+exports.createKeyboardController = createKeyboardController;
+exports.createScrollHideController = createScrollHideController;

package/dist/cjs/{select-option-render-D8ZEjYji.js → select-option-render-BUF8TPE0.js}

@@ -3,8 +3,8 @@
  */
 'use strict';
 
-var index = require('./index-DXoo08JC.js');
-var index$1 = require('./index-KiSZqhYS.js');
+var index = require('./index-BsDPqfGS.js');
+var index$1 = require('./index-jHTqyXrs.js');
 
 /**
  * Converts a DOM node into a Stencil VNode (or text string) so the

package/dist/cjs/{slot-mutation-controller-D6IjSEIh.js → slot-mutation-controller-C9i1ymbP.js}

@@ -3,8 +3,8 @@
  */
 'use strict';
 
-var index = require('./index-DkNv4J_i.js');
-var helpers = require('./helpers-7wzdhdeg.js');
+var ionicGlobal = require('./ionic-global-BaVLW54G.js');
+var helpers = require('./helpers-DFJMw-qZ.js');
 var dir = require('./dir-zwDPRE5K.js');
 
 /**
@@ -96,8 +96,8 @@ const createNotchController = (el, getNotchSpacerEl, getLabelSlot) => {
          */
         width === 0 &&
             notchSpacerEl.offsetParent === null &&
-            index.win !== undefined &&
-            'IntersectionObserver' in index.win) {
+            ionicGlobal.win !== undefined &&
+            'IntersectionObserver' in ionicGlobal.win) {
             /**
              * If there is an IO already attached
              * then that will update the notch
@@ -293,7 +293,7 @@ const createStartContainerController = (el, getStartContainer, shouldApplyAdjust
 const createSlotMutationController = (el, slotName, mutationCallback) => {
     let hostMutationObserver;
     let slottedContentMutationObserver;
-    if (index.win !== undefined && 'MutationObserver' in index.win) {
+    if (ionicGlobal.win !== undefined && 'MutationObserver' in ionicGlobal.win) {
         const slots = Array.isArray(slotName) ? slotName : [slotName];
         hostMutationObserver = new MutationObserver((entries) => {
             for (const entry of entries) {

package/dist/cjs/{status-tap-CNP5eD1R.js → status-tap-DT7J4fZQ.js}

@@ -3,9 +3,10 @@
  */
 'use strict';
 
-var index = require('./index-DXoo08JC.js');
-var index$1 = require('./index-DtvKGwdh.js');
-var helpers = require('./helpers-7wzdhdeg.js');
+var index = require('./index-BsDPqfGS.js');
+var index$1 = require('./index-DWP810QI.js');
+var helpers = require('./helpers-DFJMw-qZ.js');
+require('./focus-visible-BIj-I3-C.js');
 require('./dir-zwDPRE5K.js');
 
 const startStatusTap = () => {

package/dist/cjs/{swipe-back-BYb_nLJe.js → swipe-back-BIbF7bVy.js}

@@ -3,10 +3,11 @@
  */
 'use strict';
 
-var helpers = require('./helpers-7wzdhdeg.js');
+var helpers = require('./helpers-DFJMw-qZ.js');
 var dir = require('./dir-zwDPRE5K.js');
 var index = require('./index-DRPqwSvU.js');
-require('./index-DXoo08JC.js');
+require('./focus-visible-BIj-I3-C.js');
+require('./index-BsDPqfGS.js');
 require('./gesture-controller-CeJslptU.js');
 
 const createSwipeBackGesture = (el, canStartHandler, onStartHandler, onMoveHandler, onEndHandler) => {

package/dist/cjs/{theme-Bw0rpaNN.js → theme-Cy4joHPt.js}

@@ -3,8 +3,32 @@
  */
 'use strict';
 
+/**
+ * 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/cjs/validity-CoPMWggj.js

@@ -0,0 +1,51 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+'use strict';
+
+/**
+ * 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);
+    }
+};
+
+exports.checkInvalidState = checkInvalidState;
+exports.reportValidityToElementInternals = reportValidityToElementInternals;

package/dist/cjs/x-BTF99yFH.js

@@ -0,0 +1,8 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+'use strict';
+
+const xSvg = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTYgMjU2IiBmaWxsPSJjdXJyZW50Q29sb3IiPjxwYXRoIGQ9Ik0yMDUuNjYsMTk0LjM0YTgsOCwwLDAsMS0xMS4zMiwxMS4zMkwxMjgsMTM5LjMxLDYxLjY2LDIwNS42NmE4LDgsMCwwLDEtMTEuMzItMTEuMzJMMTE2LjY5LDEyOCw1MC4zNCw2MS42NkE4LDgsMCwwLDEsNjEuNjYsNTAuMzRMMTI4LDExNi42OWw2Ni4zNC02Ni4zNWE4LDgsMCwwLDEsMTEuMzIsMTEuMzJMMTM5LjMxLDEyOFoiLz48L3N2Zz4=';
+
+exports.xSvg = xSvg;

package/dist/collection/collection-manifest.json

@@ -27,10 +27,13 @@
     "components/picker-column/picker-column.js",
     "components/picker/picker.js",
     "components/datetime-button/datetime-button.js",
+    "components/divider/divider.js",
     "components/fab/fab.js",
     "components/fab-button/fab-button.js",
     "components/fab-list/fab-list.js",
     "components/footer/footer.js",
+    "components/gallery/gallery.js",
+    "components/gallery-item/gallery-item.js",
     "components/grid/grid.js",
     "components/header/header.js",
     "components/img/img.js",
@@ -146,6 +149,11 @@
         "ion-datetime"
       ]
     },
+    {
+      "components": [
+        "ion-gallery"
+      ]
+    },
     {
       "components": [
         "ion-input"