@ionic/core 8.8.16-dev.11784841344.1aa1a41c → 8.8.16-dev.11784914346.10d0804c

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

@@ -1,10 +1,13 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { Host, h, readTask, writeTask } from "@stencil/core";
-import { findIonContent, getScrollElement } from "../../utils/content/index";
+import { Host, h } from "@stencil/core";
+import { findIonContent } from "../../utils/content/index";
 import { createKeyboardController } from "../../utils/keyboard/keyboard-controller";
+import { printIonWarning } from "../../utils/logging/index";
+import { createScrollHideController } from "../../utils/scroll-hide-controller";
 import { createColorClasses } from "../../utils/theme";
+import { config } from "../../global/config";
 import { getIonTheme } from "../../global/ionic-global";
 /**
  * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component.
@@ -15,16 +18,9 @@ export class TabBar {
         this.keyboardCtrl = null;
         this.keyboardCtrlPromise = null;
         this.didLoad = false;
-        this.lastScrollTop = 0;
-        this.scrollDirectionChangeTop = 0;
+        this.scrollHideCtrlPromise = null;
+        this.hasWarnedFooter = false;
         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
@@ -41,6 +37,40 @@ export class TabBar {
          * Defaults to `"full"`.
          */
         this.expand = 'full';
+        this.setupScrollEffect = async () => {
+            // When nested inside ion-footer, the tab-bar should not hide
+            // independently — doing so would leave an empty footer behind.
+            // The footer should own the scroll effect instead.
+            if (this.el.closest('ion-footer')) {
+                if (!this.hasWarnedFooter) {
+                    this.hasWarnedFooter = true;
+                    printIonWarning(`[ion-tab-bar] - scroll-effect="hide" is ignored when nested inside <ion-footer>. ` +
+                        `Set scroll-effect="hide" on the <ion-footer> instead.`, this.el);
+                }
+                return;
+            }
+            const appRootSelector = config.get('appRootSelector', 'ion-app');
+            const pageEl = this.el.closest(`${appRootSelector}, ion-page, .ion-page, page-inner`);
+            const contentEl = pageEl ? findIonContent(pageEl) : null;
+            if (!contentEl) {
+                return;
+            }
+            const setupPromise = createScrollHideController(contentEl, {
+                el: this.el,
+                cssVar: '--internal-tab-bar-hide-height',
+                hiddenClass: 'tab-bar-scroll-hidden',
+                contentPartnerClass: 'content-tab-bar-hide-scroll-partner',
+                contentHiddenClass: 'content-tab-bar-hide-scroll-hidden',
+                shouldKeepAriaHidden: () => this.keyboardVisible && this.el.getAttribute('slot') !== 'top',
+            });
+            this.scrollHideCtrlPromise = setupPromise;
+            const controller = await setupPromise;
+            if (this.scrollHideCtrlPromise === setupPromise) {
+                this.scrollHideCtrlPromise = null;
+                controller.init();
+                this.scrollHideCtrl = controller;
+            }
+        };
     }
     selectedTabChanged() {
         // Skip the initial watcher call that happens during component load
@@ -54,22 +84,28 @@ export class TabBar {
             });
         }
     }
+    scrollEffectChanged() {
+        this.checkScrollEffect();
+    }
     componentDidLoad() {
         this.ionTabBarLoaded.emit();
-        // Set the flag to indicate the component has loaded
-        // This allows the watcher to emit changes from this point forward
         this.didLoad = true;
-        // Emit the initial selected tab after the component is fully loaded
-        // This ensures all child components (ion-tab-button) are ready
         if (this.selectedTab !== undefined) {
             this.ionTabBarChanged.emit({
                 tab: this.selectedTab,
             });
         }
-        this.setupHideOnScroll();
+        this.checkScrollEffect();
+    }
+    checkScrollEffect() {
+        this.destroyScrollEffect();
+        if (this.scrollEffect === 'hide') {
+            this.setupScrollEffect();
+        }
     }
     async connectedCallback() {
         const promise = createKeyboardController(async (keyboardOpen, waitForResize) => {
+            var _a, _b;
             /**
              * If the keyboard is hiding, then we need to wait
              * for the webview to resize. Otherwise, the tab bar
@@ -79,6 +115,18 @@ export class TabBar {
                 await waitForResize;
             }
             this.keyboardVisible = keyboardOpen; // trigger re-render by updating state
+            // Toggle aria-hidden imperatively for the keyboard case.
+            // scroll-effect hide also sets aria-hidden via setHidden,
+            // so keeping a single imperative path avoids render() clearing
+            // the scroll-set attribute on re-render.
+            const shouldHide = keyboardOpen && this.el.getAttribute('slot') !== 'top';
+            const isScrollHidden = (_b = (_a = this.scrollHideCtrl) === null || _a === void 0 ? void 0 : _a.isHidden()) !== null && _b !== void 0 ? _b : false;
+            if (shouldHide || isScrollHidden) {
+                this.el.setAttribute('aria-hidden', 'true');
+            }
+            else {
+                this.el.removeAttribute('aria-hidden');
+            }
         });
         this.keyboardCtrlPromise = promise;
         const keyboardCtrl = await promise;
@@ -96,6 +144,7 @@ export class TabBar {
         }
     }
     disconnectedCallback() {
+        this.destroyScrollEffect();
         if (this.keyboardCtrlPromise) {
             this.keyboardCtrlPromise.then((ctrl) => ctrl.destroy());
             this.keyboardCtrlPromise = null;
@@ -104,63 +153,13 @@ 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;
+    destroyScrollEffect() {
+        this.scrollHideCtrlPromise = null;
+        if (this.scrollHideCtrl) {
+            this.scrollHideCtrl.destroy();
+            this.scrollHideCtrl = undefined;
         }
-        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);
@@ -175,19 +174,18 @@ export class TabBar {
         return shape;
     }
     render() {
-        const { color, translucent, keyboardVisible, scrollHidden, expand, hideOnScroll } = this;
+        const { color, translucent, keyboardVisible, scrollEffect, expand } = this;
         const theme = getIonTheme(this);
         const shape = this.getShape();
         const shouldHide = keyboardVisible && this.el.getAttribute('slot') !== 'top';
-        return (h(Host, { key: '16cd11a815d777a7517150b49b57a204c83c3c37', role: "tablist", "aria-hidden": shouldHide ? 'true' : null, class: createColorClasses(color, {
+        return (h(Host, { key: '749dbd95dd87e73ceea2dab9767a285fa3ccf5e1', role: "tablist", 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-scroll-effect-hide': scrollEffect === 'hide',
                 [`tab-bar-${expand}`]: true,
                 [`tab-bar-${shape}`]: shape !== undefined,
-            }) }, h("slot", { key: 'dfdff308f24b3addaf18528a8d869b3fc64306d1' })));
+            }) }, h("slot", { key: '05a13a25a37c76245dad1710ef58ba5e69cf9f6c' })));
     }
     static get is() { return "ion-tab-bar"; }
     static get encapsulation() { return "shadow"; }
@@ -252,25 +250,31 @@ export class TabBar {
                 "reflect": false,
                 "attribute": "selected-tab"
             },
-            "hideOnScroll": {
-                "type": "boolean",
+            "scrollEffect": {
+                "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
+                    "original": "TabBarScrollEffect",
+                    "resolved": "\"hide\" | undefined",
+                    "references": {
+                        "TabBarScrollEffect": {
+                            "location": "import",
+                            "path": "./tab-bar-interface",
+                            "id": "src/components/tab-bar/tab-bar-interface.ts::TabBarScrollEffect",
+                            "referenceLocation": "TabBarScrollEffect"
+                        }
+                    }
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "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\"`."
+                    "text": "Describes the scroll effect that will be applied to the tab bar.\n`\"hide\"` slides the tab bar out of view when scrolling down and back in\nwhen scrolling up.\n\nNote: `\"hide\"` is ignored when the tab bar is nested inside an\n`ion-footer` to avoid leaving an empty footer visible on screen.\nSet `scroll-effect=\"hide\"` on the footer instead so the entire\nfooter hides together."
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
-                "attribute": "hide-on-scroll",
-                "defaultValue": "false"
+                "reflect": true,
+                "attribute": "scroll-effect"
             },
             "translucent": {
                 "type": "boolean",
@@ -335,8 +339,7 @@ export class TabBar {
     }
     static get states() {
         return {
-            "keyboardVisible": {},
-            "scrollHidden": {}
+            "keyboardVisible": {}
         };
     }
     static get events() {
@@ -390,6 +393,9 @@ export class TabBar {
         return [{
                 "propName": "selectedTab",
                 "methodName": "selectedTabChanged"
+            }, {
+                "propName": "scrollEffect",
+                "methodName": "scrollEffectChanged"
             }];
     }
 }

package/dist/collection/components/tab-bar/tab-bar.md.css

@@ -51,6 +51,21 @@
   padding-bottom: 0;
 }
 
+:host(.tab-bar-scroll-effect-hide) {
+  transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+:host(.tab-bar-scroll-effect-hide.tab-bar-scroll-hidden) {
+  transform: translateY(100%);
+  transition: transform 350ms cubic-bezier(0.4, 0, 1, 1);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :host(.tab-bar-scroll-effect-hide),
+  :host(.tab-bar-scroll-effect-hide.tab-bar-scroll-hidden) {
+    transition: none;
+  }
+}
 /**
  * Convert a pixels given value into rem
  * 

package/dist/collection/components/tab-button/tab-button.ionic.css

@@ -276,7 +276,8 @@ ion-ripple-effect {
 }
 
 ::slotted(ion-icon) {
-  font-size: var(--token-font-size-600, 1.5rem);
+  width: var(--token-scale-600, 24px);
+  height: var(--token-scale-600, 24px);
 }
 
 :host(.tab-button-shape-soft) {

package/dist/collection/components/title/title.md.css

@@ -127,4 +127,11 @@
   height: 100%;
   font-size: 0.9375rem;
   font-weight: normal;
+}
+
+:host(.title-large) {
+  width: 100%;
+  height: 100%;
+  font-size: 1.75rem;
+  font-weight: 400;
 }

package/dist/collection/utils/scroll-hide-controller.js

@@ -0,0 +1,178 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { readTask, writeTask } from "@stencil/core";
+import { getScrollElement } from "./content";
+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).
+ */
+export 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 };
+};