@ionic/core 8.8.4-dev.11776710869.1a81ced2 → 8.8.4-dev.11776868665.169e5ee1

package/dist/collection/components/tab-bar/tab-bar.js

@@ -1,7 +1,8 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { Host, h } from "@stencil/core";
+import { Host, h, readTask, writeTask } from "@stencil/core";
+import { findIonContent, getScrollElement } from "../../utils/content/index";
 import { createKeyboardController } from "../../utils/keyboard/keyboard-controller";
 import { createColorClasses } from "../../utils/theme";
 import { getIonTheme } from "../../global/ionic-global";
@@ -14,7 +15,16 @@ export class TabBar {
         this.keyboardCtrl = null;
         this.keyboardCtrlPromise = null;
         this.didLoad = false;
+        this.lastScrollTop = 0;
+        this.scrollDirectionChangeTop = 0;
         this.keyboardVisible = false;
+        this.scrollHidden = false;
+        /**
+         * If `true`, the tab bar will be hidden when the user scrolls down
+         * and shown when the user scrolls up.
+         * Only applies when the theme is `"ionic"` and `expand` is `"compact"`.
+         */
+        this.hideOnScroll = false;
         /**
          * If `true`, the tab bar will be translucent.
          * Only applies when the theme is `"ios"` and the device supports
@@ -56,6 +66,7 @@ export class TabBar {
                 tab: this.selectedTab,
             });
         }
+        this.setupHideOnScroll();
     }
     async connectedCallback() {
         const promise = createKeyboardController(async (keyboardOpen, waitForResize) => {
@@ -93,6 +104,63 @@ export class TabBar {
             this.keyboardCtrl.destroy();
             this.keyboardCtrl = null;
         }
+        this.destroyHideOnScroll();
+    }
+    setupHideOnScroll() {
+        var _a;
+        const theme = getIonTheme(this);
+        if (theme !== 'ionic' || !this.hideOnScroll || this.expand !== 'compact') {
+            return;
+        }
+        const footerEl = this.el.closest('ion-footer');
+        const pageEl = (_a = footerEl === null || footerEl === void 0 ? void 0 : footerEl.closest('ion-page, .ion-page')) !== null && _a !== void 0 ? _a : this.el.closest('ion-page, .ion-page');
+        const contentEl = pageEl ? findIonContent(pageEl) : null;
+        if (!contentEl) {
+            return;
+        }
+        this.initScrollListener(contentEl);
+    }
+    async initScrollListener(contentEl) {
+        const scrollEl = (this.scrollEl = await getScrollElement(contentEl));
+        this.contentScrollCallback = () => {
+            readTask(() => {
+                const scrollTop = scrollEl.scrollTop;
+                const shouldHide = this.checkScrollStatus(scrollTop);
+                if (shouldHide !== this.scrollHidden) {
+                    writeTask(() => {
+                        this.scrollHidden = shouldHide;
+                    });
+                }
+                this.lastScrollTop = scrollTop;
+            });
+        };
+        scrollEl.addEventListener('scroll', this.contentScrollCallback, { passive: true });
+    }
+    destroyHideOnScroll() {
+        if (this.scrollEl && this.contentScrollCallback) {
+            this.scrollEl.removeEventListener('scroll', this.contentScrollCallback);
+            this.contentScrollCallback = undefined;
+        }
+    }
+    checkScrollStatus(scrollTop) {
+        // Always visible within the first 80px of scroll
+        const visibleZone = 80;
+        // Hides after 60px of continuous downward scrolling only, when scrolling up threashold should be 0px
+        const scrollThresholdHide = 60;
+        if (scrollTop <= visibleZone) {
+            return false;
+        }
+        const isScrollingDown = scrollTop > this.lastScrollTop;
+        const wasScrollingDown = this.lastScrollTop > this.scrollDirectionChangeTop;
+        if (isScrollingDown !== wasScrollingDown) {
+            this.scrollDirectionChangeTop = this.lastScrollTop;
+        }
+        const delta = Math.abs(scrollTop - this.scrollDirectionChangeTop);
+        const threshold = isScrollingDown ? scrollThresholdHide : 0;
+        if (delta < threshold) {
+            return this.scrollHidden;
+        }
+        return isScrollingDown;
     }
     getShape() {
         const theme = getIonTheme(this);
@@ -107,17 +175,19 @@ export class TabBar {
         return shape;
     }
     render() {
-        const { color, translucent, keyboardVisible, expand } = this;
+        const { color, translucent, keyboardVisible, scrollHidden, expand, hideOnScroll } = this;
         const theme = getIonTheme(this);
         const shape = this.getShape();
         const shouldHide = keyboardVisible && this.el.getAttribute('slot') !== 'top';
-        return (h(Host, { key: 'e6466b90b72ed2e62c8c20fee2bc0b262ca4ccae', role: "tablist", "aria-hidden": shouldHide ? 'true' : null, class: createColorClasses(color, {
+        return (h(Host, { key: '7a91bb00ad289d94d34271bdecefb7221c093fd6', role: "tablist", "aria-hidden": shouldHide ? 'true' : null, class: createColorClasses(color, {
                 [theme]: true,
                 'tab-bar-translucent': translucent,
                 'tab-bar-hidden': shouldHide,
+                'tab-bar-hide-on-scroll': hideOnScroll,
+                'tab-bar-scroll-hidden': scrollHidden,
                 [`tab-bar-${expand}`]: true,
                 [`tab-bar-${shape}`]: shape !== undefined,
-            }) }, h("slot", { key: '6801f9523822178692d9091b0132f1b1dd41892d' })));
+            }) }, h("slot", { key: '96ad10c451a6ae1e2b7c48d94d0f158fb8cde1dc' })));
     }
     static get is() { return "ion-tab-bar"; }
     static get encapsulation() { return "shadow"; }
@@ -182,6 +252,26 @@ export class TabBar {
                 "reflect": false,
                 "attribute": "selected-tab"
             },
+            "hideOnScroll": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, the tab bar will be hidden when the user scrolls down\nand shown when the user scrolls up.\nOnly applies when the theme is `\"ionic\"` and `expand` is `\"compact\"`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "hide-on-scroll",
+                "defaultValue": "false"
+            },
             "translucent": {
                 "type": "boolean",
                 "mutable": false,
@@ -245,7 +335,8 @@ export class TabBar {
     }
     static get states() {
         return {
-            "keyboardVisible": {}
+            "keyboardVisible": {},
+            "scrollHidden": {}
         };
     }
     static get events() {

package/dist/collection/components/toast/toast.js

@@ -224,7 +224,7 @@ export class Toast {
          * in the dismiss animation.
          */
         this.lastPresentedPosition = animationPosition;
-        await present(this, 'toastEnter', iosEnterAnimation, mdEnterAnimation, {
+        await present(this, 'toastEnter', iosEnterAnimation, mdEnterAnimation, undefined, {
             position,
             top: animationPosition.top,
             bottom: animationPosition.bottom,
@@ -439,9 +439,9 @@ export class Toast {
         if (layout === 'stacked' && startButtons.length > 0 && endButtons.length > 0) {
             printIonWarning('[ion-toast] - This toast is using start and end buttons with the stacked toast layout. We recommend following the best practice of using either start or end buttons with the stacked toast layout.', el);
         }
-        return (h(Host, Object.assign({ key: '3507eaa18a5559a9052d34db180e176952dc466f', tabindex: "-1" }, this.htmlAttributes, { style: {
+        return (h(Host, Object.assign({ key: '6fd286b024a05e6960f7b4b7947a3c26cc129e14', tabindex: "-1" }, this.htmlAttributes, { style: {
                 zIndex: `${60000 + this.overlayIndex}`,
-            }, class: createColorClasses(this.color, Object.assign(Object.assign({ [mode]: true, [theme]: true }, getClassMap(this.cssClass)), { 'overlay-hidden': true, 'toast-translucent': this.translucent, [`toast-shape-${shape}`]: shape !== undefined, [`toast-hue-${hue}`]: hue !== undefined })), onIonToastWillDismiss: this.dispatchCancelHandler }), h("div", { key: '195eb90ccd82a13254e843b80be0f380325accb4', class: wrapperClass, part: "wrapper" }, h("div", { key: 'd6072aa4a4848d72e68e04a7842d3f769f844ffc', class: "toast-container", part: "container" }, this.renderButtons(startButtons, 'start'), this.icon !== undefined && (h("ion-icon", { key: '02a1d72aaf401d27671906c8b84abd823def6da8', class: "toast-icon", part: "icon", icon: this.icon, lazy: false, "aria-hidden": "true" })), h("div", { key: '1f133c27927ad840f58ea2e9112719ef880bf9a5', class: "toast-content", part: "content", role: "status", "aria-atomic": "true", "aria-live": "polite" }, !revealContentToScreenReader && header !== undefined && this.renderHeader('oldHeader', 'true'), !revealContentToScreenReader && message !== undefined && this.renderToastMessage('oldMessage', 'true'), revealContentToScreenReader && header !== undefined && this.renderHeader('header'), revealContentToScreenReader && message !== undefined && this.renderToastMessage('header')), this.renderButtons(endButtons, 'end')))));
+            }, class: createColorClasses(this.color, Object.assign(Object.assign({ [mode]: true, [theme]: true }, getClassMap(this.cssClass)), { 'overlay-hidden': true, 'toast-translucent': this.translucent, [`toast-shape-${shape}`]: shape !== undefined, [`toast-hue-${hue}`]: hue !== undefined })), onIonToastWillDismiss: this.dispatchCancelHandler }), h("div", { key: '42aa178a6c7f25841bb6e257810c37b6a5703b1f', class: wrapperClass, part: "wrapper" }, h("div", { key: '5cb2f2566ce8ab76de6a79ecac02a354eb242c58', class: "toast-container", part: "container" }, this.renderButtons(startButtons, 'start'), this.icon !== undefined && (h("ion-icon", { key: 'f5a60e1b8c95bbbb829e3b9b01db64ab5229265a', class: "toast-icon", part: "icon", icon: this.icon, lazy: false, "aria-hidden": "true" })), h("div", { key: 'a903491644c03391f66432253cc8365c782b056d', class: "toast-content", part: "content", role: "status", "aria-atomic": "true", "aria-live": "polite" }, !revealContentToScreenReader && header !== undefined && this.renderHeader('oldHeader', 'true'), !revealContentToScreenReader && message !== undefined && this.renderToastMessage('oldMessage', 'true'), revealContentToScreenReader && header !== undefined && this.renderHeader('header'), revealContentToScreenReader && message !== undefined && this.renderToastMessage('header')), this.renderButtons(endButtons, 'end')))));
     }
     static get is() { return "ion-toast"; }
     static get encapsulation() { return "shadow"; }

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";
@@ -512,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;
@@ -560,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();

package/dist/docs.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2026-04-20T18:50:11",
+  "timestamp": "2026-04-22T14:40:13",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.43.0",
@@ -40359,6 +40359,35 @@
           "getter": false,
           "setter": false
         },
+        {
+          "name": "hideOnScroll",
+          "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "hide-on-scroll",
+          "reflectToAttr": false,
+          "docs": "If `true`, the tab bar will be hidden when the user scrolls down\nand shown when the user scrolls up.\nOnly applies when the theme is `\"ionic\"` and `expand` is `\"compact\"`.",
+          "docsTags": [
+            {
+              "name": "default",
+              "text": "false"
+            }
+          ],
+          "default": "false",
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
         {
           "name": "mode",
           "type": "\"ios\" | \"md\"",

package/dist/esm/index.js

@@ -13,7 +13,7 @@ export { L as LogLevel } from './index-Omi_TcwW.js';
 export { I as IonicSafeString, g as getMode, s as setupConfig } from './config-BvDxfLa-.js';
 export { o as openURL } from './theme-DaJxRxSQ.js';
 export { m as menuController } from './index-hpH08p5s.js';
-export { b as actionSheetController, a as alertController, l as loadingController, m as modalController, p as pickerController, c as popoverController, t as toastController } from './overlays-CvFHfO3y.js';
+export { b as actionSheetController, a as alertController, l as loadingController, m as modalController, p as pickerController, c as popoverController, t as toastController } from './overlays-rwDDzEs4.js';
 import './gesture-controller-BTEOs1at.js';
 import './focus-visible-vXpMhGrs.js';
 import './framework-delegate-CjVwn_KZ.js';

package/dist/esm/ion-action-sheet.entry.js

@@ -5,7 +5,7 @@ import { r as registerInstance, c as createEvent, a as readTask, h, d as Host, g
 import { c as createButtonActiveGesture } from './button-active-g6ZnZzDZ.js';
 import { r as raf } from './helpers-Do7zwvM1.js';
 import { c as createLockController } from './lock-controller-B-hirT0v.js';
-import { d as createDelegateController, e as createTriggerController, B as BACKDROP, i as isCancel, f as present, g as dismiss, h as eventMethod, s as safeCall, j as prepareOverlay, k as setOverlayId } from './overlays-CvFHfO3y.js';
+import { d as createDelegateController, e as createTriggerController, B as BACKDROP, i as isCancel, f as present, g as dismiss, h as eventMethod, s as safeCall, j as prepareOverlay, k as setOverlayId } from './overlays-rwDDzEs4.js';
 import { g as getClassMap } from './theme-DaJxRxSQ.js';
 import { b as getIonMode, c as getIonTheme } from './ionic-global-CAZb-5i-.js';
 import { c as createAnimation } from './animation-Cqe2x-Pt.js';

package/dist/esm/ion-alert.entry.js

@@ -6,7 +6,7 @@ import { E as ENABLE_HTML_CONTENT_DEFAULT, a as sanitizeDOMString } from './conf
 import { c as createButtonActiveGesture } from './button-active-g6ZnZzDZ.js';
 import { r as raf } from './helpers-Do7zwvM1.js';
 import { c as createLockController } from './lock-controller-B-hirT0v.js';
-import { d as createDelegateController, e as createTriggerController, B as BACKDROP, i as isCancel, j as prepareOverlay, k as setOverlayId, f as present, g as dismiss, h as eventMethod, s as safeCall } from './overlays-CvFHfO3y.js';
+import { d as createDelegateController, e as createTriggerController, B as BACKDROP, i as isCancel, j as prepareOverlay, k as setOverlayId, f as present, g as dismiss, h as eventMethod, s as safeCall } from './overlays-rwDDzEs4.js';
 import { g as getClassMap } from './theme-DaJxRxSQ.js';
 import { b as getIonMode, c as getIonTheme } from './ionic-global-CAZb-5i-.js';
 import { c as createAnimation } from './animation-Cqe2x-Pt.js';

package/dist/esm/ion-datetime_3.entry.js

@@ -6,7 +6,7 @@ import { c as caretLeftSvg } from './caret-left-fIOYmaqA.js';
 import { c as caretRightSvg } from './caret-right-BYSs-jZz.js';
 import { startFocusVisible } from './focus-visible-vXpMhGrs.js';
 import { r as raf, g as getElementRoot, a as renderHiddenInput, e as clamp } from './helpers-Do7zwvM1.js';
-import { F as FOCUS_TRAP_DISABLE_CLASS, d as createDelegateController, e as createTriggerController, B as BACKDROP, i as isCancel, j as prepareOverlay, k as setOverlayId, f as present, g as dismiss, h as eventMethod, s as safeCall } from './overlays-CvFHfO3y.js';
+import { F as FOCUS_TRAP_DISABLE_CLASS, d as createDelegateController, e as createTriggerController, B as BACKDROP, i as isCancel, j as prepareOverlay, k as setOverlayId, f as present, g as dismiss, h as eventMethod, s as safeCall } from './overlays-rwDDzEs4.js';
 import { i as isRTL } from './dir-C53feagD.js';
 import { c as createColorClasses, g as getClassMap } from './theme-DaJxRxSQ.js';
 import { o as chevronForward, c as chevronBack, p as caretDownSharp, q as caretUpSharp, l as chevronDown } from './index-D2tu5BUg.js';

package/dist/esm/ion-loading.entry.js

@@ -5,7 +5,7 @@ import { r as registerInstance, c as createEvent, e as config, h, d as Host, g a
 import { E as ENABLE_HTML_CONTENT_DEFAULT, a as sanitizeDOMString } from './config-BvDxfLa-.js';
 import { r as raf } from './helpers-Do7zwvM1.js';
 import { c as createLockController } from './lock-controller-B-hirT0v.js';
-import { d as createDelegateController, e as createTriggerController, B as BACKDROP, j as prepareOverlay, k as setOverlayId, f as present, g as dismiss, h as eventMethod } from './overlays-CvFHfO3y.js';
+import { d as createDelegateController, e as createTriggerController, B as BACKDROP, j as prepareOverlay, k as setOverlayId, f as present, g as dismiss, h as eventMethod } from './overlays-rwDDzEs4.js';
 import { g as getClassMap } from './theme-DaJxRxSQ.js';
 import { c as getIonTheme } from './ionic-global-CAZb-5i-.js';
 import { c as createAnimation } from './animation-Cqe2x-Pt.js';

package/dist/esm/ion-menu_3.entry.js

@@ -3,7 +3,7 @@
  */
 import { r as registerInstance, c as createEvent, e as config, j as printIonError, h, d as Host, g as getElement } from './index-Omi_TcwW.js';
 import { g as getTimeGivenProgression } from './cubic-bezier-hHmYLOfE.js';
-import { o as getPresentedOverlay, B as BACKDROP, n as focusFirstDescendant, q as focusLastDescendant, G as GESTURE } from './overlays-CvFHfO3y.js';
+import { o as getPresentedOverlay, B as BACKDROP, n as focusFirstDescendant, q as focusLastDescendant, G as GESTURE } from './overlays-rwDDzEs4.js';
 import { G as GESTURE_CONTROLLER } from './gesture-controller-BTEOs1at.js';
 import { b as getIonMode, a as isPlatform, c as getIonTheme, s as shouldUseCloseWatcher } from './ionic-global-CAZb-5i-.js';
 import { p as isEndSide, i as inheritAriaAttributes, l as assert, e as clamp } from './helpers-Do7zwvM1.js';