@ionic/core 7.8.5-dev.11712853167.1d02271c → 7.8.5-nightly.20240412

package/components/ios.transition.js

@@ -56,22 +56,20 @@ const createLargeTitleTransition = (rootAnimation, rtl, backDirection, enteringE
         const leavingLargeTitleBox = leavingLargeTitle.getBoundingClientRect();
         const enteringBackButtonBox = enteringBackButton.getBoundingClientRect();
         const enteringBackButtonTextEl = shadow(enteringBackButton).querySelector('.button-text');
-        // Text element not rendered if developers pass text="" to the back button
-        const enteringBackButtonTextBox = enteringBackButtonTextEl === null || enteringBackButtonTextEl === void 0 ? void 0 : enteringBackButtonTextEl.getBoundingClientRect();
+        const enteringBackButtonTextBox = enteringBackButtonTextEl.getBoundingClientRect();
         const leavingLargeTitleTextEl = shadow(leavingLargeTitle).querySelector('.toolbar-title');
         const leavingLargeTitleTextBox = leavingLargeTitleTextEl.getBoundingClientRect();
-        animateLargeTitle(rootAnimation, rtl, backDirection, leavingLargeTitle, leavingLargeTitleBox, leavingLargeTitleTextBox, enteringBackButtonBox, enteringBackButtonTextEl, enteringBackButtonTextBox);
+        animateLargeTitle(rootAnimation, rtl, backDirection, leavingLargeTitle, leavingLargeTitleBox, leavingLargeTitleTextBox, 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');
-        // Text element not rendered if developers pass text="" to the back button
-        const leavingBackButtonTextBox = leavingBackButtonTextEl === null || leavingBackButtonTextEl === void 0 ? void 0 : leavingBackButtonTextEl.getBoundingClientRect();
+        const leavingBackButtonTextBox = leavingBackButtonTextEl.getBoundingClientRect();
         const enteringLargeTitleTextEl = shadow(enteringLargeTitle).querySelector('.toolbar-title');
         const enteringLargeTitleTextBox = enteringLargeTitleTextEl.getBoundingClientRect();
-        animateLargeTitle(rootAnimation, rtl, backDirection, enteringLargeTitle, enteringLargeTitleBox, enteringLargeTitleTextBox, leavingBackButtonBox, leavingBackButtonTextEl, leavingBackButtonTextBox);
+        animateLargeTitle(rootAnimation, rtl, backDirection, enteringLargeTitle, enteringLargeTitleBox, enteringLargeTitleTextBox, leavingBackButtonTextEl, leavingBackButtonTextBox);
         animateBackButton(rootAnimation, rtl, backDirection, leavingBackButton, leavingBackButtonBox, leavingBackButtonTextEl, leavingBackButtonTextBox, enteringLargeTitle, enteringLargeTitleTextBox);
     }
     return {
@@ -85,29 +83,26 @@ 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';
-    let WIDTH_SCALE = 1;
-    let HEIGHT_SCALE = 1;
-    let TEXT_START_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 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})`;
     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;
-        if (doTitleAndButtonTextsMatch) {
-            TEXT_START_SCALE = `scale(${WIDTH_SCALE}, ${HEIGHT_SCALE})`;
-        }
-    }
     const backButtonIconEl = shadow(backButtonEl).querySelector('ion-icon');
     const backButtonIconBox = backButtonIconEl.getBoundingClientRect();
     /**
@@ -204,11 +199,11 @@ const animateBackButton = (rootAnimation, rtl, backDirection, backButtonEl, back
         top: '0px',
         [CONTAINER_ORIGIN_X]: '0px',
     })
-        /**
-         * 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.
-         */
+        .keyframes(CONTAINER_KEYFRAMES);
+    enteringBackButtonTextAnimation
+        .beforeStyles({
+        'transform-origin': `${TEXT_ORIGIN_X} top`,
+    })
         .beforeAddWrite(() => {
         backButtonEl.style.setProperty('display', 'none');
         clonedBackButtonEl.style.setProperty(TEXT_ORIGIN_X, BACK_BUTTON_START_OFFSET);
@@ -217,11 +212,6 @@ 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
@@ -235,7 +225,7 @@ const animateBackButton = (rootAnimation, rtl, backDirection, backButtonEl, back
         enteringBackButtonAnimation,
     ]);
 };
-const animateLargeTitle = (rootAnimation, rtl, backDirection, largeTitleEl, largeTitleBox, largeTitleTextBox, backButtonBox, backButtonTextEl, backButtonTextBox) => {
+const animateLargeTitle = (rootAnimation, rtl, backDirection, largeTitleEl, largeTitleBox, largeTitleTextBox, backButtonTextEl, backButtonTextBox) => {
     var _a, _b;
     /**
      * The horizontal transform origin for the large title
@@ -255,65 +245,52 @@ 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`;
     /**
-     * How much to scale the large title up/down by.
+     * 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.
      */
-    let HEIGHT_SCALE = 0.5;
+    const END_TRANSLATE_X = rtl
+        ? `-${window.innerWidth - backButtonTextBox.right - LARGE_TITLE_TRANSLATION_OFFSET}px`
+        : `${backButtonTextBox.x - LARGE_TITLE_TRANSLATION_OFFSET}px`;
     /**
-     * The large title always starts full size.
+     * 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.
      */
-    const START_SCALE = 'scale(1)';
+    const LARGE_TITLE_TOP_PADDING = 2;
+    const END_TRANSLATE_Y = `${backButtonTextBox.y - LARGE_TITLE_TOP_PADDING}px`;
     /**
-     * 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.
+     * 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.
      */
-    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);
-        if (doTitleAndButtonTextsMatch) {
-            END_SCALE = `scale(${WIDTH_SCALE}, ${HEIGHT_SCALE})`;
-        }
-    }
     /**
-     * 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.
+     * 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 backButtonMidPoint = backButtonBox.top + backButtonBox.height / 2;
-    const titleMidPoint = (largeTitleBox.height * HEIGHT_SCALE) / 2;
-    const END_TRANSLATE_Y = `${backButtonMidPoint - titleMidPoint}px`;
+    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 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-034460de.js → index-1f7c54f8.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-26c5adb2.js'); });
-const mdTransitionAnimation = () => Promise.resolve().then(function () { return require('./md.transition-75533d44.js'); });
+const iosTransitionAnimation = () => Promise.resolve().then(function () { return require('./ios.transition-30830fc4.js'); });
+const mdTransitionAnimation = () => Promise.resolve().then(function () { return require('./md.transition-7f581866.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-c2840aea.js');
-const index = require('./index-034460de.js');
-const ios_transition = require('./ios.transition-26c5adb2.js');
-const md_transition = require('./md.transition-75533d44.js');
+const index = require('./index-1f7c54f8.js');
+const ios_transition = require('./ios.transition-30830fc4.js');
+const md_transition = require('./md.transition-7f581866.js');
 const cubicBezier = require('./cubic-bezier-f2dccc53.js');
 const index$1 = require('./index-d1b59ffa.js');
 const ionicGlobal = require('./ionic-global-c5503e93.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-e0e13baa.js');
 const lockController = require('./lock-controller-6585a42a.js');
-const index$3 = require('./index-034460de.js');
+const index$3 = require('./index-1f7c54f8.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-129dfc13.js');
 const theme = require('./theme-d1c573d2.js');
-const index$5 = require('./index-034460de.js');
+const index$5 = require('./index-1f7c54f8.js');
 const ionicGlobal = require('./ionic-global-c5503e93.js');
 const keyboard = require('./keyboard-af1bb365.js');
 const animation = require('./animation-c2840aea.js');

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

@@ -8,7 +8,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-22617dd6.js');
 const cubicBezier = require('./cubic-bezier-f2dccc53.js');
 const helpers = require('./helpers-da4c0ed1.js');
-const index$1 = require('./index-034460de.js');
+const index$1 = require('./index-1f7c54f8.js');
 const ionicGlobal = require('./ionic-global-c5503e93.js');
 const frameworkDelegate = require('./framework-delegate-e0e13baa.js');
 

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

@@ -13,7 +13,7 @@ const index$1 = require('./index-5915f9b3.js');
 const overlays = require('./overlays-129dfc13.js');
 const ionicGlobal = require('./ionic-global-c5503e93.js');
 const theme = require('./theme-d1c573d2.js');
-const index$2 = require('./index-034460de.js');
+const index$2 = require('./index-1f7c54f8.js');
 const animation = require('./animation-c2840aea.js');
 require('./index-c8d52405.js');
 require('./hardware-back-button-adba3ac7.js');

package/dist/cjs/{ios.transition-26c5adb2.js → ios.transition-30830fc4.js}

@@ -4,7 +4,7 @@
 'use strict';
 
 const animation = require('./animation-c2840aea.js');
-const index = require('./index-034460de.js');
+const index = require('./index-1f7c54f8.js');
 require('./index-c8d52405.js');
 require('./helpers-da4c0ed1.js');
 require('./index-22617dd6.js');
@@ -61,22 +61,20 @@ const createLargeTitleTransition = (rootAnimation, rtl, backDirection, enteringE
         const leavingLargeTitleBox = leavingLargeTitle.getBoundingClientRect();
         const enteringBackButtonBox = enteringBackButton.getBoundingClientRect();
         const enteringBackButtonTextEl = shadow(enteringBackButton).querySelector('.button-text');
-        // Text element not rendered if developers pass text="" to the back button
-        const enteringBackButtonTextBox = enteringBackButtonTextEl === null || enteringBackButtonTextEl === void 0 ? void 0 : enteringBackButtonTextEl.getBoundingClientRect();
+        const enteringBackButtonTextBox = enteringBackButtonTextEl.getBoundingClientRect();
         const leavingLargeTitleTextEl = shadow(leavingLargeTitle).querySelector('.toolbar-title');
         const leavingLargeTitleTextBox = leavingLargeTitleTextEl.getBoundingClientRect();
-        animateLargeTitle(rootAnimation, rtl, backDirection, leavingLargeTitle, leavingLargeTitleBox, leavingLargeTitleTextBox, enteringBackButtonBox, enteringBackButtonTextEl, enteringBackButtonTextBox);
+        animateLargeTitle(rootAnimation, rtl, backDirection, leavingLargeTitle, leavingLargeTitleBox, leavingLargeTitleTextBox, 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');
-        // Text element not rendered if developers pass text="" to the back button
-        const leavingBackButtonTextBox = leavingBackButtonTextEl === null || leavingBackButtonTextEl === void 0 ? void 0 : leavingBackButtonTextEl.getBoundingClientRect();
+        const leavingBackButtonTextBox = leavingBackButtonTextEl.getBoundingClientRect();
         const enteringLargeTitleTextEl = shadow(enteringLargeTitle).querySelector('.toolbar-title');
         const enteringLargeTitleTextBox = enteringLargeTitleTextEl.getBoundingClientRect();
-        animateLargeTitle(rootAnimation, rtl, backDirection, enteringLargeTitle, enteringLargeTitleBox, enteringLargeTitleTextBox, leavingBackButtonBox, leavingBackButtonTextEl, leavingBackButtonTextBox);
+        animateLargeTitle(rootAnimation, rtl, backDirection, enteringLargeTitle, enteringLargeTitleBox, enteringLargeTitleTextBox, leavingBackButtonTextEl, leavingBackButtonTextBox);
         animateBackButton(rootAnimation, rtl, backDirection, leavingBackButton, leavingBackButtonBox, leavingBackButtonTextEl, leavingBackButtonTextBox, enteringLargeTitle, enteringLargeTitleTextBox);
     }
     return {
@@ -90,29 +88,26 @@ 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';
-    let WIDTH_SCALE = 1;
-    let HEIGHT_SCALE = 1;
-    let TEXT_START_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 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})`;
     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;
-        if (doTitleAndButtonTextsMatch) {
-            TEXT_START_SCALE = `scale(${WIDTH_SCALE}, ${HEIGHT_SCALE})`;
-        }
-    }
     const backButtonIconEl = shadow(backButtonEl).querySelector('ion-icon');
     const backButtonIconBox = backButtonIconEl.getBoundingClientRect();
     /**
@@ -209,11 +204,11 @@ const animateBackButton = (rootAnimation, rtl, backDirection, backButtonEl, back
         top: '0px',
         [CONTAINER_ORIGIN_X]: '0px',
     })
-        /**
-         * 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.
-         */
+        .keyframes(CONTAINER_KEYFRAMES);
+    enteringBackButtonTextAnimation
+        .beforeStyles({
+        'transform-origin': `${TEXT_ORIGIN_X} top`,
+    })
         .beforeAddWrite(() => {
         backButtonEl.style.setProperty('display', 'none');
         clonedBackButtonEl.style.setProperty(TEXT_ORIGIN_X, BACK_BUTTON_START_OFFSET);
@@ -222,11 +217,6 @@ 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
@@ -240,7 +230,7 @@ const animateBackButton = (rootAnimation, rtl, backDirection, backButtonEl, back
         enteringBackButtonAnimation,
     ]);
 };
-const animateLargeTitle = (rootAnimation, rtl, backDirection, largeTitleEl, largeTitleBox, largeTitleTextBox, backButtonBox, backButtonTextEl, backButtonTextBox) => {
+const animateLargeTitle = (rootAnimation, rtl, backDirection, largeTitleEl, largeTitleBox, largeTitleTextBox, backButtonTextEl, backButtonTextBox) => {
     var _a, _b;
     /**
      * The horizontal transform origin for the large title
@@ -260,65 +250,52 @@ 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`;
     /**
-     * How much to scale the large title up/down by.
+     * 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.
      */
-    let HEIGHT_SCALE = 0.5;
+    const END_TRANSLATE_X = rtl
+        ? `-${window.innerWidth - backButtonTextBox.right - LARGE_TITLE_TRANSLATION_OFFSET}px`
+        : `${backButtonTextBox.x - LARGE_TITLE_TRANSLATION_OFFSET}px`;
     /**
-     * The large title always starts full size.
+     * 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.
      */
-    const START_SCALE = 'scale(1)';
+    const LARGE_TITLE_TOP_PADDING = 2;
+    const END_TRANSLATE_Y = `${backButtonTextBox.y - LARGE_TITLE_TOP_PADDING}px`;
     /**
-     * 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.
+     * 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.
      */
-    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);
-        if (doTitleAndButtonTextsMatch) {
-            END_SCALE = `scale(${WIDTH_SCALE}, ${HEIGHT_SCALE})`;
-        }
-    }
     /**
-     * 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.
+     * 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 backButtonMidPoint = backButtonBox.top + backButtonBox.height / 2;
-    const titleMidPoint = (largeTitleBox.height * HEIGHT_SCALE) / 2;
-    const END_TRANSLATE_Y = `${backButtonMidPoint - titleMidPoint}px`;
+    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 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-75533d44.js → md.transition-7f581866.js}

@@ -4,7 +4,7 @@
 'use strict';
 
 const animation = require('./animation-c2840aea.js');
-const index = require('./index-034460de.js');
+const index = require('./index-1f7c54f8.js');
 require('./index-c8d52405.js');
 require('./helpers-da4c0ed1.js');
 require('./index-22617dd6.js');