@ionic/core 8.0.2-nightly.20240430 → 8.0.2

package/components/ios.transition.js

@@ -56,20 +56,22 @@ const createLargeTitleTransition = (rootAnimation, rtl, backDirection, enteringE
         const leavingLargeTitleBox = leavingLargeTitle.getBoundingClientRect();
         const enteringBackButtonBox = enteringBackButton.getBoundingClientRect();
         const enteringBackButtonTextEl = shadow(enteringBackButton).querySelector('.button-text');
-        const enteringBackButtonTextBox = enteringBackButtonTextEl.getBoundingClientRect();
+        // Text element not rendered if developers pass text="" to the back button
+        const enteringBackButtonTextBox = enteringBackButtonTextEl === null || enteringBackButtonTextEl === void 0 ? void 0 : enteringBackButtonTextEl.getBoundingClientRect();
         const leavingLargeTitleTextEl = shadow(leavingLargeTitle).querySelector('.toolbar-title');
         const leavingLargeTitleTextBox = leavingLargeTitleTextEl.getBoundingClientRect();
-        animateLargeTitle(rootAnimation, rtl, backDirection, leavingLargeTitle, leavingLargeTitleBox, leavingLargeTitleTextBox, enteringBackButtonTextEl, enteringBackButtonTextBox);
+        animateLargeTitle(rootAnimation, rtl, backDirection, leavingLargeTitle, leavingLargeTitleBox, leavingLargeTitleTextBox, enteringBackButtonBox, enteringBackButtonTextEl, enteringBackButtonTextBox);
         animateBackButton(rootAnimation, rtl, backDirection, enteringBackButton, enteringBackButtonBox, enteringBackButtonTextEl, enteringBackButtonTextBox, leavingLargeTitle, leavingLargeTitleTextBox);
     }
     else if (shouldAnimationBackward) {
         const enteringLargeTitleBox = enteringLargeTitle.getBoundingClientRect();
         const leavingBackButtonBox = leavingBackButton.getBoundingClientRect();
         const leavingBackButtonTextEl = shadow(leavingBackButton).querySelector('.button-text');
-        const leavingBackButtonTextBox = leavingBackButtonTextEl.getBoundingClientRect();
+        // Text element not rendered if developers pass text="" to the back button
+        const leavingBackButtonTextBox = leavingBackButtonTextEl === null || leavingBackButtonTextEl === void 0 ? void 0 : leavingBackButtonTextEl.getBoundingClientRect();
         const enteringLargeTitleTextEl = shadow(enteringLargeTitle).querySelector('.toolbar-title');
         const enteringLargeTitleTextBox = enteringLargeTitleTextEl.getBoundingClientRect();
-        animateLargeTitle(rootAnimation, rtl, backDirection, enteringLargeTitle, enteringLargeTitleBox, enteringLargeTitleTextBox, leavingBackButtonTextEl, leavingBackButtonTextBox);
+        animateLargeTitle(rootAnimation, rtl, backDirection, enteringLargeTitle, enteringLargeTitleBox, enteringLargeTitleTextBox, leavingBackButtonBox, leavingBackButtonTextEl, leavingBackButtonTextBox);
         animateBackButton(rootAnimation, rtl, backDirection, leavingBackButton, leavingBackButtonBox, leavingBackButtonTextEl, leavingBackButtonTextBox, enteringLargeTitle, enteringLargeTitleTextBox);
     }
     return {
@@ -83,26 +85,31 @@ const animateBackButton = (rootAnimation, rtl, backDirection, backButtonEl, back
     const TEXT_ORIGIN_X = rtl ? 'right' : 'left';
     const ICON_ORIGIN_X = rtl ? 'left' : 'right';
     const CONTAINER_ORIGIN_X = rtl ? 'right' : 'left';
-    /**
-     * When the title and back button texts match
-     * then they should overlap during the page transition.
-     * If the texts do not match up then the back button text scale adjusts
-     * to not perfectly match the large title text otherwise the
-     * proportions will be incorrect.
-     * When the texts match we scale both the width and height to account for
-     * font weight differences between the title and back button.
-     */
-    const doTitleAndButtonTextsMatch = ((_a = backButtonTextEl.textContent) === null || _a === void 0 ? void 0 : _a.trim()) === ((_b = largeTitleEl.textContent) === null || _b === void 0 ? void 0 : _b.trim());
-    const WIDTH_SCALE = largeTitleTextBox.width / backButtonTextBox.width;
-    /**
-     * We subtract an offset to account for slight sizing/padding
-     * differences between the title and the back button.
-     */
-    const HEIGHT_SCALE = (largeTitleTextBox.height - LARGE_TITLE_SIZE_OFFSET) / backButtonTextBox.height;
-    const TEXT_START_SCALE = doTitleAndButtonTextsMatch
-        ? `scale(${WIDTH_SCALE}, ${HEIGHT_SCALE})`
-        : `scale(${HEIGHT_SCALE})`;
+    let WIDTH_SCALE = 1;
+    let HEIGHT_SCALE = 1;
+    let TEXT_START_SCALE = `scale(${HEIGHT_SCALE})`;
     const TEXT_END_SCALE = 'scale(1)';
+    if (backButtonTextEl && backButtonTextBox) {
+        /**
+         * When the title and back button texts match then they should overlap during the
+         * page transition. If the texts do not match up then the back button text scale
+         * adjusts to not perfectly match the large title text otherwise the proportions
+         * will be incorrect. When the texts match we scale both the width and height to
+         * account for font weight differences between the title and back button.
+         */
+        const doTitleAndButtonTextsMatch = ((_a = backButtonTextEl.textContent) === null || _a === void 0 ? void 0 : _a.trim()) === ((_b = largeTitleEl.textContent) === null || _b === void 0 ? void 0 : _b.trim());
+        WIDTH_SCALE = largeTitleTextBox.width / backButtonTextBox.width;
+        /**
+         * Subtract an offset to account for slight sizing/padding differences between the
+         * title and the back button.
+         */
+        HEIGHT_SCALE = (largeTitleTextBox.height - LARGE_TITLE_SIZE_OFFSET) / backButtonTextBox.height;
+        /**
+         * Even though we set TEXT_START_SCALE to HEIGHT_SCALE above, we potentially need
+         * to re-compute this here since the HEIGHT_SCALE may have changed.
+         */
+        TEXT_START_SCALE = doTitleAndButtonTextsMatch ? `scale(${WIDTH_SCALE}, ${HEIGHT_SCALE})` : `scale(${HEIGHT_SCALE})`;
+    }
     const backButtonIconEl = shadow(backButtonEl).querySelector('ion-icon');
     const backButtonIconBox = backButtonIconEl.getBoundingClientRect();
     /**
@@ -199,11 +206,11 @@ const animateBackButton = (rootAnimation, rtl, backDirection, backButtonEl, back
         top: '0px',
         [CONTAINER_ORIGIN_X]: '0px',
     })
-        .keyframes(CONTAINER_KEYFRAMES);
-    enteringBackButtonTextAnimation
-        .beforeStyles({
-        'transform-origin': `${TEXT_ORIGIN_X} top`,
-    })
+        /**
+         * The write hooks must be set on this animation as it is guaranteed to run. Other
+         * animations such as the back button text animation will not run if the back button
+         * has no visible text.
+         */
         .beforeAddWrite(() => {
         backButtonEl.style.setProperty('display', 'none');
         clonedBackButtonEl.style.setProperty(TEXT_ORIGIN_X, BACK_BUTTON_START_OFFSET);
@@ -212,6 +219,11 @@ const animateBackButton = (rootAnimation, rtl, backDirection, backButtonEl, back
         backButtonEl.style.setProperty('display', '');
         clonedBackButtonEl.style.setProperty('display', 'none');
         clonedBackButtonEl.style.removeProperty(TEXT_ORIGIN_X);
+    })
+        .keyframes(CONTAINER_KEYFRAMES);
+    enteringBackButtonTextAnimation
+        .beforeStyles({
+        'transform-origin': `${TEXT_ORIGIN_X} top`,
     })
         .keyframes(TEXT_KEYFRAMES);
     enteringBackButtonIconAnimation
@@ -225,7 +237,7 @@ const animateBackButton = (rootAnimation, rtl, backDirection, backButtonEl, back
         enteringBackButtonAnimation,
     ]);
 };
-const animateLargeTitle = (rootAnimation, rtl, backDirection, largeTitleEl, largeTitleBox, largeTitleTextBox, backButtonTextEl, backButtonTextBox) => {
+const animateLargeTitle = (rootAnimation, rtl, backDirection, largeTitleEl, largeTitleBox, largeTitleTextBox, backButtonBox, backButtonTextEl, backButtonTextBox) => {
     var _a, _b;
     /**
      * The horizontal transform origin for the large title
@@ -245,52 +257,67 @@ const animateLargeTitle = (rootAnimation, rtl, backDirection, largeTitleEl, larg
      * title and the back button due to padding and font weight.
      */
     const LARGE_TITLE_TRANSLATION_OFFSET = 8;
+    let END_TRANSLATE_X = rtl
+        ? `-${window.innerWidth - backButtonBox.right - LARGE_TITLE_TRANSLATION_OFFSET}px`
+        : `${backButtonBox.x + LARGE_TITLE_TRANSLATION_OFFSET}px`;
     /**
-     * The scaled title should (roughly) overlap the back button.
-     * This ensures that the back button and title overlap during
-     * the animation. Note that since both elements either fade in
-     * or fade out over the course of the animation, neither element
-     * will be fully visible on top of the other. As a result, the overlap
-     * does not need to be perfect, so approximate values are acceptable here.
+     * How much to scale the large title up/down by.
      */
-    const END_TRANSLATE_X = rtl
-        ? `-${window.innerWidth - backButtonTextBox.right - LARGE_TITLE_TRANSLATION_OFFSET}px`
-        : `${backButtonTextBox.x - LARGE_TITLE_TRANSLATION_OFFSET}px`;
+    let HEIGHT_SCALE = 0.5;
     /**
-     * The top of the scaled large title
-     * should match with the top of the
-     * back button text element.
-     * We subtract 2px to account for the top padding
-     * on the large title element.
+     * The large title always starts full size.
      */
-    const LARGE_TITLE_TOP_PADDING = 2;
-    const END_TRANSLATE_Y = `${backButtonTextBox.y - LARGE_TITLE_TOP_PADDING}px`;
+    const START_SCALE = 'scale(1)';
     /**
-     * In the forward direction, the large title should start at its
-     * normal size and then scale down to be (roughly) the size of the
-     * back button on the other view. In the backward direction, the
-     * large title should start at (roughly) the size of the back button
-     * and then scale up to its original size.
-     *
-     * Note that since both elements either fade in
-     * or fade out over the course of the animation, neither element
-     * will be fully visible on top of the other. As a result, the overlap
-     * does not need to be perfect, so approximate values are acceptable here.
+     * By default, we don't worry about having the large title scaled to perfectly
+     * match the back button because we don't know if the back button's text matches
+     * the large title's text.
      */
+    let END_SCALE = `scale(${HEIGHT_SCALE})`;
+    // Text element not rendered if developers pass text="" to the back button
+    if (backButtonTextEl && backButtonTextBox) {
+        /**
+         * The scaled title should (roughly) overlap the back button. This ensures that
+         * the back button and title overlap during the animation. Note that since both
+         * elements either fade in or fade out over the course of the animation, neither
+         * element will be fully visible on top of the other. As a result, the overlap
+         * does not need to be perfect, so approximate values are acceptable here.
+         */
+        END_TRANSLATE_X = rtl
+            ? `-${window.innerWidth - backButtonTextBox.right - LARGE_TITLE_TRANSLATION_OFFSET}px`
+            : `${backButtonTextBox.x - LARGE_TITLE_TRANSLATION_OFFSET}px`;
+        /**
+         * In the forward direction, the large title should start at its normal size and
+         * then scale down to be (roughly) the size of the back button on the other view.
+         * In the backward direction, the large title should start at (roughly) the size
+         * of the back button and then scale up to its original size.
+         * Note that since both elements either fade in or fade out over the course of the
+         * animation, neither element will be fully visible on top of the other. As a result,
+         * the overlap  does not need to be perfect, so approximate values are acceptable here.
+         */
+        /**
+         * When the title and back button texts match then they should overlap during the
+         * page transition. If the texts do not match up then the large title text scale
+         * adjusts to not perfectly match the back button text otherwise the proportions
+         * will be incorrect. When the texts match we scale both the width and height to
+         * account for font weight differences between the title and back button.
+         */
+        const doTitleAndButtonTextsMatch = ((_a = backButtonTextEl.textContent) === null || _a === void 0 ? void 0 : _a.trim()) === ((_b = largeTitleEl.textContent) === null || _b === void 0 ? void 0 : _b.trim());
+        const WIDTH_SCALE = backButtonTextBox.width / largeTitleTextBox.width;
+        HEIGHT_SCALE = backButtonTextBox.height / (largeTitleTextBox.height - LARGE_TITLE_SIZE_OFFSET);
+        /**
+         * Even though we set TEXT_START_SCALE to HEIGHT_SCALE above, we potentially need
+         * to re-compute this here since the HEIGHT_SCALE may have changed.
+         */
+        END_SCALE = doTitleAndButtonTextsMatch ? `scale(${WIDTH_SCALE}, ${HEIGHT_SCALE})` : `scale(${HEIGHT_SCALE})`;
+    }
     /**
-     * When the title and back button texts match
-     * then they should overlap during the page transition.
-     * If the texts do not match up then the large title text scale adjusts
-     * to not perfectly match the back button text otherwise the
-     * proportions will be incorrect.
-     * When the texts match we scale both the width and height to account for
-     * font weight differences between the title and back button.
+     * The midpoints of the back button and the title should align such that the back
+     * button and title appear to be centered with each other.
      */
-    const doTitleAndButtonTextsMatch = ((_a = backButtonTextEl.textContent) === null || _a === void 0 ? void 0 : _a.trim()) === ((_b = largeTitleEl.textContent) === null || _b === void 0 ? void 0 : _b.trim());
-    const WIDTH_SCALE = backButtonTextBox.width / largeTitleTextBox.width;
-    const HEIGHT_SCALE = backButtonTextBox.height / (largeTitleTextBox.height - LARGE_TITLE_SIZE_OFFSET);
-    const START_SCALE = 'scale(1)';
-    const END_SCALE = doTitleAndButtonTextsMatch ? `scale(${WIDTH_SCALE}, ${HEIGHT_SCALE})` : `scale(${HEIGHT_SCALE})`;
+    const backButtonMidPoint = backButtonBox.top + backButtonBox.height / 2;
+    const titleMidPoint = (largeTitleBox.height * HEIGHT_SCALE) / 2;
+    const END_TRANSLATE_Y = `${backButtonMidPoint - titleMidPoint}px`;
     const BACKWARDS_KEYFRAMES = [
         { offset: 0, opacity: 0, transform: `translate3d(${END_TRANSLATE_X}, ${END_TRANSLATE_Y}, 0) ${END_SCALE}` },
         { offset: 0.1, opacity: 0 },

package/dist/cjs/{index-1a575e52.js → index-6047957b.js}

@@ -12,8 +12,8 @@ const LIFECYCLE_WILL_LEAVE = 'ionViewWillLeave';
 const LIFECYCLE_DID_LEAVE = 'ionViewDidLeave';
 const LIFECYCLE_WILL_UNLOAD = 'ionViewWillUnload';
 
-const iosTransitionAnimation = () => Promise.resolve().then(function () { return require('./ios.transition-2b4db49c.js'); });
-const mdTransitionAnimation = () => Promise.resolve().then(function () { return require('./md.transition-8f3e1081.js'); });
+const iosTransitionAnimation = () => Promise.resolve().then(function () { return require('./ios.transition-59b0e1d9.js'); });
+const mdTransitionAnimation = () => Promise.resolve().then(function () { return require('./md.transition-0cc7c831.js'); });
 // TODO(FW-2832): types
 const transition = (opts) => {
     return new Promise((resolve, reject) => {

package/dist/cjs/index.cjs.js

@@ -6,9 +6,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const animation = require('./animation-b4fdf128.js');
-const index = require('./index-1a575e52.js');
-const ios_transition = require('./ios.transition-2b4db49c.js');
-const md_transition = require('./md.transition-8f3e1081.js');
+const index = require('./index-6047957b.js');
+const ios_transition = require('./ios.transition-59b0e1d9.js');
+const md_transition = require('./md.transition-0cc7c831.js');
 const cubicBezier = require('./cubic-bezier-f2dccc53.js');
 const index$1 = require('./index-ee07ed59.js');
 const ionicGlobal = require('./ionic-global-35b86a09.js');

package/dist/cjs/ion-app_8.cjs.entry.js

@@ -17,7 +17,7 @@ const keyboardController = require('./keyboard-controller-c05e747a.js');
 const cubicBezier = require('./cubic-bezier-f2dccc53.js');
 const frameworkDelegate = require('./framework-delegate-55f5683a.js');
 const lockController = require('./lock-controller-6585a42a.js');
-const index$3 = require('./index-1a575e52.js');
+const index$3 = require('./index-6047957b.js');
 require('./index-c8d52405.js');
 require('./keyboard-0272231f.js');
 require('./capacitor-c04564bf.js');

package/dist/cjs/ion-modal.cjs.entry.js

@@ -14,7 +14,7 @@ const index$4 = require('./index-5915f9b3.js');
 const capacitor = require('./capacitor-c04564bf.js');
 const overlays = require('./overlays-2feabb85.js');
 const theme = require('./theme-d1c573d2.js');
-const index$5 = require('./index-1a575e52.js');
+const index$5 = require('./index-6047957b.js');
 const ionicGlobal = require('./ionic-global-35b86a09.js');
 const keyboard = require('./keyboard-af1bb365.js');
 const animation = require('./animation-b4fdf128.js');

package/dist/cjs/ion-nav_2.cjs.entry.js

@@ -8,7 +8,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-8709af32.js');
 const cubicBezier = require('./cubic-bezier-f2dccc53.js');
 const helpers = require('./helpers-afaa9001.js');
-const index$1 = require('./index-1a575e52.js');
+const index$1 = require('./index-6047957b.js');
 const ionicGlobal = require('./ionic-global-35b86a09.js');
 const frameworkDelegate = require('./framework-delegate-55f5683a.js');
 

package/dist/cjs/ion-popover.cjs.entry.js

@@ -13,7 +13,7 @@ const lockController = require('./lock-controller-6585a42a.js');
 const index$1 = require('./index-5915f9b3.js');
 const ionicGlobal = require('./ionic-global-35b86a09.js');
 const theme = require('./theme-d1c573d2.js');
-const index$2 = require('./index-1a575e52.js');
+const index$2 = require('./index-6047957b.js');
 const animation = require('./animation-b4fdf128.js');
 require('./index-c8d52405.js');
 require('./hardware-back-button-ed931127.js');

package/dist/cjs/{ios.transition-2b4db49c.js → ios.transition-59b0e1d9.js}

@@ -4,7 +4,7 @@
 'use strict';
 
 const animation = require('./animation-b4fdf128.js');
-const index = require('./index-1a575e52.js');
+const index = require('./index-6047957b.js');
 require('./index-c8d52405.js');
 require('./index-8709af32.js');
 require('./helpers-afaa9001.js');
@@ -61,20 +61,22 @@ const createLargeTitleTransition = (rootAnimation, rtl, backDirection, enteringE
         const leavingLargeTitleBox = leavingLargeTitle.getBoundingClientRect();
         const enteringBackButtonBox = enteringBackButton.getBoundingClientRect();
         const enteringBackButtonTextEl = shadow(enteringBackButton).querySelector('.button-text');
-        const enteringBackButtonTextBox = enteringBackButtonTextEl.getBoundingClientRect();
+        // Text element not rendered if developers pass text="" to the back button
+        const enteringBackButtonTextBox = enteringBackButtonTextEl === null || enteringBackButtonTextEl === void 0 ? void 0 : enteringBackButtonTextEl.getBoundingClientRect();
         const leavingLargeTitleTextEl = shadow(leavingLargeTitle).querySelector('.toolbar-title');
         const leavingLargeTitleTextBox = leavingLargeTitleTextEl.getBoundingClientRect();
-        animateLargeTitle(rootAnimation, rtl, backDirection, leavingLargeTitle, leavingLargeTitleBox, leavingLargeTitleTextBox, enteringBackButtonTextEl, enteringBackButtonTextBox);
+        animateLargeTitle(rootAnimation, rtl, backDirection, leavingLargeTitle, leavingLargeTitleBox, leavingLargeTitleTextBox, enteringBackButtonBox, enteringBackButtonTextEl, enteringBackButtonTextBox);
         animateBackButton(rootAnimation, rtl, backDirection, enteringBackButton, enteringBackButtonBox, enteringBackButtonTextEl, enteringBackButtonTextBox, leavingLargeTitle, leavingLargeTitleTextBox);
     }
     else if (shouldAnimationBackward) {
         const enteringLargeTitleBox = enteringLargeTitle.getBoundingClientRect();
         const leavingBackButtonBox = leavingBackButton.getBoundingClientRect();
         const leavingBackButtonTextEl = shadow(leavingBackButton).querySelector('.button-text');
-        const leavingBackButtonTextBox = leavingBackButtonTextEl.getBoundingClientRect();
+        // Text element not rendered if developers pass text="" to the back button
+        const leavingBackButtonTextBox = leavingBackButtonTextEl === null || leavingBackButtonTextEl === void 0 ? void 0 : leavingBackButtonTextEl.getBoundingClientRect();
         const enteringLargeTitleTextEl = shadow(enteringLargeTitle).querySelector('.toolbar-title');
         const enteringLargeTitleTextBox = enteringLargeTitleTextEl.getBoundingClientRect();
-        animateLargeTitle(rootAnimation, rtl, backDirection, enteringLargeTitle, enteringLargeTitleBox, enteringLargeTitleTextBox, leavingBackButtonTextEl, leavingBackButtonTextBox);
+        animateLargeTitle(rootAnimation, rtl, backDirection, enteringLargeTitle, enteringLargeTitleBox, enteringLargeTitleTextBox, leavingBackButtonBox, leavingBackButtonTextEl, leavingBackButtonTextBox);
         animateBackButton(rootAnimation, rtl, backDirection, leavingBackButton, leavingBackButtonBox, leavingBackButtonTextEl, leavingBackButtonTextBox, enteringLargeTitle, enteringLargeTitleTextBox);
     }
     return {
@@ -88,26 +90,31 @@ const animateBackButton = (rootAnimation, rtl, backDirection, backButtonEl, back
     const TEXT_ORIGIN_X = rtl ? 'right' : 'left';
     const ICON_ORIGIN_X = rtl ? 'left' : 'right';
     const CONTAINER_ORIGIN_X = rtl ? 'right' : 'left';
-    /**
-     * When the title and back button texts match
-     * then they should overlap during the page transition.
-     * If the texts do not match up then the back button text scale adjusts
-     * to not perfectly match the large title text otherwise the
-     * proportions will be incorrect.
-     * When the texts match we scale both the width and height to account for
-     * font weight differences between the title and back button.
-     */
-    const doTitleAndButtonTextsMatch = ((_a = backButtonTextEl.textContent) === null || _a === void 0 ? void 0 : _a.trim()) === ((_b = largeTitleEl.textContent) === null || _b === void 0 ? void 0 : _b.trim());
-    const WIDTH_SCALE = largeTitleTextBox.width / backButtonTextBox.width;
-    /**
-     * We subtract an offset to account for slight sizing/padding
-     * differences between the title and the back button.
-     */
-    const HEIGHT_SCALE = (largeTitleTextBox.height - LARGE_TITLE_SIZE_OFFSET) / backButtonTextBox.height;
-    const TEXT_START_SCALE = doTitleAndButtonTextsMatch
-        ? `scale(${WIDTH_SCALE}, ${HEIGHT_SCALE})`
-        : `scale(${HEIGHT_SCALE})`;
+    let WIDTH_SCALE = 1;
+    let HEIGHT_SCALE = 1;
+    let TEXT_START_SCALE = `scale(${HEIGHT_SCALE})`;
     const TEXT_END_SCALE = 'scale(1)';
+    if (backButtonTextEl && backButtonTextBox) {
+        /**
+         * When the title and back button texts match then they should overlap during the
+         * page transition. If the texts do not match up then the back button text scale
+         * adjusts to not perfectly match the large title text otherwise the proportions
+         * will be incorrect. When the texts match we scale both the width and height to
+         * account for font weight differences between the title and back button.
+         */
+        const doTitleAndButtonTextsMatch = ((_a = backButtonTextEl.textContent) === null || _a === void 0 ? void 0 : _a.trim()) === ((_b = largeTitleEl.textContent) === null || _b === void 0 ? void 0 : _b.trim());
+        WIDTH_SCALE = largeTitleTextBox.width / backButtonTextBox.width;
+        /**
+         * Subtract an offset to account for slight sizing/padding differences between the
+         * title and the back button.
+         */
+        HEIGHT_SCALE = (largeTitleTextBox.height - LARGE_TITLE_SIZE_OFFSET) / backButtonTextBox.height;
+        /**
+         * Even though we set TEXT_START_SCALE to HEIGHT_SCALE above, we potentially need
+         * to re-compute this here since the HEIGHT_SCALE may have changed.
+         */
+        TEXT_START_SCALE = doTitleAndButtonTextsMatch ? `scale(${WIDTH_SCALE}, ${HEIGHT_SCALE})` : `scale(${HEIGHT_SCALE})`;
+    }
     const backButtonIconEl = shadow(backButtonEl).querySelector('ion-icon');
     const backButtonIconBox = backButtonIconEl.getBoundingClientRect();
     /**
@@ -204,11 +211,11 @@ const animateBackButton = (rootAnimation, rtl, backDirection, backButtonEl, back
         top: '0px',
         [CONTAINER_ORIGIN_X]: '0px',
     })
-        .keyframes(CONTAINER_KEYFRAMES);
-    enteringBackButtonTextAnimation
-        .beforeStyles({
-        'transform-origin': `${TEXT_ORIGIN_X} top`,
-    })
+        /**
+         * The write hooks must be set on this animation as it is guaranteed to run. Other
+         * animations such as the back button text animation will not run if the back button
+         * has no visible text.
+         */
         .beforeAddWrite(() => {
         backButtonEl.style.setProperty('display', 'none');
         clonedBackButtonEl.style.setProperty(TEXT_ORIGIN_X, BACK_BUTTON_START_OFFSET);
@@ -217,6 +224,11 @@ const animateBackButton = (rootAnimation, rtl, backDirection, backButtonEl, back
         backButtonEl.style.setProperty('display', '');
         clonedBackButtonEl.style.setProperty('display', 'none');
         clonedBackButtonEl.style.removeProperty(TEXT_ORIGIN_X);
+    })
+        .keyframes(CONTAINER_KEYFRAMES);
+    enteringBackButtonTextAnimation
+        .beforeStyles({
+        'transform-origin': `${TEXT_ORIGIN_X} top`,
     })
         .keyframes(TEXT_KEYFRAMES);
     enteringBackButtonIconAnimation
@@ -230,7 +242,7 @@ const animateBackButton = (rootAnimation, rtl, backDirection, backButtonEl, back
         enteringBackButtonAnimation,
     ]);
 };
-const animateLargeTitle = (rootAnimation, rtl, backDirection, largeTitleEl, largeTitleBox, largeTitleTextBox, backButtonTextEl, backButtonTextBox) => {
+const animateLargeTitle = (rootAnimation, rtl, backDirection, largeTitleEl, largeTitleBox, largeTitleTextBox, backButtonBox, backButtonTextEl, backButtonTextBox) => {
     var _a, _b;
     /**
      * The horizontal transform origin for the large title
@@ -250,52 +262,67 @@ const animateLargeTitle = (rootAnimation, rtl, backDirection, largeTitleEl, larg
      * title and the back button due to padding and font weight.
      */
     const LARGE_TITLE_TRANSLATION_OFFSET = 8;
+    let END_TRANSLATE_X = rtl
+        ? `-${window.innerWidth - backButtonBox.right - LARGE_TITLE_TRANSLATION_OFFSET}px`
+        : `${backButtonBox.x + LARGE_TITLE_TRANSLATION_OFFSET}px`;
     /**
-     * The scaled title should (roughly) overlap the back button.
-     * This ensures that the back button and title overlap during
-     * the animation. Note that since both elements either fade in
-     * or fade out over the course of the animation, neither element
-     * will be fully visible on top of the other. As a result, the overlap
-     * does not need to be perfect, so approximate values are acceptable here.
+     * How much to scale the large title up/down by.
      */
-    const END_TRANSLATE_X = rtl
-        ? `-${window.innerWidth - backButtonTextBox.right - LARGE_TITLE_TRANSLATION_OFFSET}px`
-        : `${backButtonTextBox.x - LARGE_TITLE_TRANSLATION_OFFSET}px`;
+    let HEIGHT_SCALE = 0.5;
     /**
-     * The top of the scaled large title
-     * should match with the top of the
-     * back button text element.
-     * We subtract 2px to account for the top padding
-     * on the large title element.
+     * The large title always starts full size.
      */
-    const LARGE_TITLE_TOP_PADDING = 2;
-    const END_TRANSLATE_Y = `${backButtonTextBox.y - LARGE_TITLE_TOP_PADDING}px`;
+    const START_SCALE = 'scale(1)';
     /**
-     * In the forward direction, the large title should start at its
-     * normal size and then scale down to be (roughly) the size of the
-     * back button on the other view. In the backward direction, the
-     * large title should start at (roughly) the size of the back button
-     * and then scale up to its original size.
-     *
-     * Note that since both elements either fade in
-     * or fade out over the course of the animation, neither element
-     * will be fully visible on top of the other. As a result, the overlap
-     * does not need to be perfect, so approximate values are acceptable here.
+     * By default, we don't worry about having the large title scaled to perfectly
+     * match the back button because we don't know if the back button's text matches
+     * the large title's text.
      */
+    let END_SCALE = `scale(${HEIGHT_SCALE})`;
+    // Text element not rendered if developers pass text="" to the back button
+    if (backButtonTextEl && backButtonTextBox) {
+        /**
+         * The scaled title should (roughly) overlap the back button. This ensures that
+         * the back button and title overlap during the animation. Note that since both
+         * elements either fade in or fade out over the course of the animation, neither
+         * element will be fully visible on top of the other. As a result, the overlap
+         * does not need to be perfect, so approximate values are acceptable here.
+         */
+        END_TRANSLATE_X = rtl
+            ? `-${window.innerWidth - backButtonTextBox.right - LARGE_TITLE_TRANSLATION_OFFSET}px`
+            : `${backButtonTextBox.x - LARGE_TITLE_TRANSLATION_OFFSET}px`;
+        /**
+         * In the forward direction, the large title should start at its normal size and
+         * then scale down to be (roughly) the size of the back button on the other view.
+         * In the backward direction, the large title should start at (roughly) the size
+         * of the back button and then scale up to its original size.
+         * Note that since both elements either fade in or fade out over the course of the
+         * animation, neither element will be fully visible on top of the other. As a result,
+         * the overlap  does not need to be perfect, so approximate values are acceptable here.
+         */
+        /**
+         * When the title and back button texts match then they should overlap during the
+         * page transition. If the texts do not match up then the large title text scale
+         * adjusts to not perfectly match the back button text otherwise the proportions
+         * will be incorrect. When the texts match we scale both the width and height to
+         * account for font weight differences between the title and back button.
+         */
+        const doTitleAndButtonTextsMatch = ((_a = backButtonTextEl.textContent) === null || _a === void 0 ? void 0 : _a.trim()) === ((_b = largeTitleEl.textContent) === null || _b === void 0 ? void 0 : _b.trim());
+        const WIDTH_SCALE = backButtonTextBox.width / largeTitleTextBox.width;
+        HEIGHT_SCALE = backButtonTextBox.height / (largeTitleTextBox.height - LARGE_TITLE_SIZE_OFFSET);
+        /**
+         * Even though we set TEXT_START_SCALE to HEIGHT_SCALE above, we potentially need
+         * to re-compute this here since the HEIGHT_SCALE may have changed.
+         */
+        END_SCALE = doTitleAndButtonTextsMatch ? `scale(${WIDTH_SCALE}, ${HEIGHT_SCALE})` : `scale(${HEIGHT_SCALE})`;
+    }
     /**
-     * When the title and back button texts match
-     * then they should overlap during the page transition.
-     * If the texts do not match up then the large title text scale adjusts
-     * to not perfectly match the back button text otherwise the
-     * proportions will be incorrect.
-     * When the texts match we scale both the width and height to account for
-     * font weight differences between the title and back button.
+     * The midpoints of the back button and the title should align such that the back
+     * button and title appear to be centered with each other.
      */
-    const doTitleAndButtonTextsMatch = ((_a = backButtonTextEl.textContent) === null || _a === void 0 ? void 0 : _a.trim()) === ((_b = largeTitleEl.textContent) === null || _b === void 0 ? void 0 : _b.trim());
-    const WIDTH_SCALE = backButtonTextBox.width / largeTitleTextBox.width;
-    const HEIGHT_SCALE = backButtonTextBox.height / (largeTitleTextBox.height - LARGE_TITLE_SIZE_OFFSET);
-    const START_SCALE = 'scale(1)';
-    const END_SCALE = doTitleAndButtonTextsMatch ? `scale(${WIDTH_SCALE}, ${HEIGHT_SCALE})` : `scale(${HEIGHT_SCALE})`;
+    const backButtonMidPoint = backButtonBox.top + backButtonBox.height / 2;
+    const titleMidPoint = (largeTitleBox.height * HEIGHT_SCALE) / 2;
+    const END_TRANSLATE_Y = `${backButtonMidPoint - titleMidPoint}px`;
     const BACKWARDS_KEYFRAMES = [
         { offset: 0, opacity: 0, transform: `translate3d(${END_TRANSLATE_X}, ${END_TRANSLATE_Y}, 0) ${END_SCALE}` },
         { offset: 0.1, opacity: 0 },

package/dist/cjs/{md.transition-8f3e1081.js → md.transition-0cc7c831.js}

@@ -4,7 +4,7 @@
 'use strict';
 
 const animation = require('./animation-b4fdf128.js');
-const index = require('./index-1a575e52.js');
+const index = require('./index-6047957b.js');
 require('./index-c8d52405.js');
 require('./index-8709af32.js');
 require('./helpers-afaa9001.js');