@ionic/core 8.0.2-nightly.20240429 → 8.0.2-nightly.20240501

package/dist/cjs/{ios.transition-288dfa83.js → ios.transition-59b0e1d9.js}

@@ -4,9 +4,9 @@
 'use strict';
 
 const animation = require('./animation-b4fdf128.js');
-const index = require('./index-c76a1d14.js');
+const index = require('./index-6047957b.js');
 require('./index-c8d52405.js');
-require('./index-1437d080.js');
+require('./index-8709af32.js');
 require('./helpers-afaa9001.js');
 
 const DURATION = 540;
@@ -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/loader.cjs.js

@@ -5,9 +5,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-1437d080.js');
-const appGlobals = require('./app-globals-542c4d91.js');
-require('./ionic-global-f3622afe.js');
+const index = require('./index-8709af32.js');
+const appGlobals = require('./app-globals-66b7dc06.js');
+require('./ionic-global-35b86a09.js');
 
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;

package/dist/cjs/{md.transition-6e5f6a8d.js → md.transition-0cc7c831.js}

@@ -4,9 +4,9 @@
 'use strict';
 
 const animation = require('./animation-b4fdf128.js');
-const index = require('./index-c76a1d14.js');
+const index = require('./index-6047957b.js');
 require('./index-c8d52405.js');
-require('./index-1437d080.js');
+require('./index-8709af32.js');
 require('./helpers-afaa9001.js');
 
 const mdTransitionAnimation = (_, opts) => {

package/dist/cjs/{overlays-32cfd236.js → overlays-2feabb85.js}

@@ -5,8 +5,8 @@
 
 const index = require('./index-c8d52405.js');
 const helpers = require('./helpers-afaa9001.js');
-const hardwareBackButton = require('./hardware-back-button-06ae4d9c.js');
-const ionicGlobal = require('./ionic-global-f3622afe.js');
+const hardwareBackButton = require('./hardware-back-button-ed931127.js');
+const ionicGlobal = require('./ionic-global-35b86a09.js');
 const frameworkDelegate = require('./framework-delegate-55f5683a.js');
 const gestureController = require('./gesture-controller-9436f482.js');
 const index$1 = require('./index-5915f9b3.js');

package/dist/cjs/{status-tap-c47ff5f5.js → status-tap-5b2775cd.js}

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-const index = require('./index-1437d080.js');
+const index = require('./index-8709af32.js');
 const index$1 = require('./index-5b6a7459.js');
 const helpers = require('./helpers-afaa9001.js');
 require('./index-5915f9b3.js');

package/dist/collection/collection-manifest.json

@@ -96,7 +96,7 @@
   ],
   "compiler": {
     "name": "@stencil/core",
-    "version": "4.17.1",
+    "version": "4.17.2",
     "typescriptVersion": "5.4.5"
   },
   "collections": [

package/dist/collection/components/datetime/datetime.js

@@ -319,7 +319,8 @@ export class Datetime {
                      * Check below the next line ensures that we did not
                      * swipe and abort (i.e. we swiped but we are still on the current month).
                      */
-                    const month = calendarBodyRef.scrollLeft <= 2 ? startMonth : endMonth;
+                    const condition = isRTL(this.el) ? calendarBodyRef.scrollLeft >= -2 : calendarBodyRef.scrollLeft <= 2;
+                    const month = condition ? startMonth : endMonth;
                     /**
                      * The edge of the month must be lined up with
                      * the edge of the calendar body in order for
@@ -1556,7 +1557,7 @@ export class Datetime {
         const hasDatePresentation = presentation === 'date' || presentation === 'date-time' || presentation === 'time-date';
         const hasWheelVariant = hasDatePresentation && preferWheel;
         renderHiddenInput(true, el, name, formatValue(value), disabled);
-        return (h(Host, { key: '0b8c97bfb84dff5f8ef8097bba44f6c4ad119f76', "aria-disabled": disabled ? 'true' : null, onFocus: this.onFocus, onBlur: this.onBlur, class: Object.assign({}, createColorClasses(color, {
+        return (h(Host, { key: '11508a20af9da98e21eb92d2b882bb7cf8370da6', "aria-disabled": disabled ? 'true' : null, onFocus: this.onFocus, onBlur: this.onBlur, class: Object.assign({}, createColorClasses(color, {
                 [mode]: true,
                 ['datetime-readonly']: readonly,
                 ['datetime-disabled']: disabled,
@@ -1566,7 +1567,7 @@ export class Datetime {
                 [`datetime-size-${size}`]: true,
                 [`datetime-prefer-wheel`]: hasWheelVariant,
                 [`datetime-grid`]: isGridStyle,
-            })) }, h("div", { key: '36e389a8c49944b5bbc0429f6b86d9c28a5b860a', class: "intersection-tracker", ref: (el) => (this.intersectionTrackerRef = el) }), this.renderDatetime(mode)));
+            })) }, h("div", { key: 'e35a98de33fa67c8b20c1d40620c1c75dee07512', class: "intersection-tracker", ref: (el) => (this.intersectionTrackerRef = el) }), this.renderDatetime(mode)));
     }
     static get is() { return "ion-datetime"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/item/test/a11y/item.e2e.js

@@ -4,6 +4,29 @@
 import AxeBuilder from "@axe-core/playwright";
 import { expect } from "@playwright/test";
 import { configs, test } from "../../../../utils/test/playwright/index";
+configs({ directions: ['ltr'], palettes: ['dark'] }).forEach(({ config, screenshot, title }) => {
+    test.describe(title('item: dark palette'), () => {
+        /**
+         * This test was originally created to ensure the item border has sufficient
+         * contrast. We don't use an Axe test here because Axe not warn about color
+         * contrast on the item borders.
+         */
+        test('borders should have sufficient contrast', async ({ page }) => {
+            test.info().annotations.push({
+                type: 'issue',
+                description: 'https://github.com/ionic-team/ionic-framework/issues/29386',
+            });
+            await page.setContent(`
+        <ion-list>
+          <ion-item>Item</ion-item>
+          <ion-item>Item</ion-item>
+        </ion-list>
+      `, config);
+            const list = page.locator('ion-list');
+            await expect(list).toHaveScreenshot(screenshot(`item-dark`));
+        });
+    });
+});
 configs({ directions: ['ltr'] }).forEach(({ config, screenshot, title }) => {
     test.describe(title('item: axe'), () => {
         test('should not have accessibility violations', async ({ page }) => {

package/dist/collection/components/select/test/fill/select.e2e.js

@@ -189,4 +189,29 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, co
             await expect(notchCutout).toBeHidden();
         });
     });
+    test(title('select: fill outline: fit-content should display select options'), async ({ page }, testInfo) => {
+        testInfo.annotations.push({
+            type: 'issue',
+            description: 'https://github.com/ionic-team/ionic-framework/issues/29321',
+        });
+        await page.setContent(`
+        <ion-select
+          fill="outline"
+          aria-label="Fruit"
+          value="apple"
+          interface="popover"
+          style="width: fit-content"
+        >
+          <ion-select-option value="5">5</ion-select-option>
+          <ion-select-option value="10">10</ion-select-option>
+          <ion-select-option value="15">15</ion-select-option>
+        </ion-select>
+      `, config);
+        const select = page.locator('ion-select');
+        const ionPopoverDidPresent = await page.spyOnEvent('ionPopoverDidPresent');
+        await select.click();
+        await ionPopoverDidPresent.next();
+        const selectPopover = page.locator('ion-select-popover');
+        await expect(selectPopover).toHaveScreenshot(screenshot(`select-fill-outline-fit-content`));
+    });
 });

package/dist/collection/components/select-popover/select-popover.md.css

@@ -189,7 +189,14 @@ ion-label {
  * }
  */
 ion-list ion-radio::part(container) {
-  opacity: 0;
+  display: none;
+}
+
+ion-list ion-radio::part(label) {
+  margin-left: 0;
+  margin-right: 0;
+  margin-top: 0;
+  margin-bottom: 0;
 }
 
 ion-item {

package/dist/collection/utils/transition/ios.transition.js

@@ -55,20 +55,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 {
@@ -82,26 +84,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();
     /**
@@ -198,11 +205,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);
@@ -211,6 +218,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
@@ -224,7 +236,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
@@ -244,52 +256,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/docs.json

@@ -1,8 +1,8 @@
 {
-  "timestamp": "2024-04-29T06:08:00",
+  "timestamp": "2024-05-01T06:08:18",
   "compiler": {
     "name": "@stencil/core",
-    "version": "4.17.1",
+    "version": "4.17.2",
     "typescriptVersion": "5.4.5"
   },
   "components": [