voyager-ionic-core 7.5.0 → 7.5.1

package/components/ion-title.js

@@ -5,7 +5,7 @@ import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/
 import { c as createColorClasses } from './theme.js';
 import { b as getIonMode } from './ionic-global.js';
 
-const titleIosCss = ":host{--color:initial;display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-align:center;align-items:center;-webkit-transform:translateZ(0);transform:translateZ(0);color:var(--color)}:host(.ion-color){color:var(--ion-color-base)}.toolbar-title{display:block;width:100%;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;pointer-events:auto}:host(.title-small) .toolbar-title{white-space:normal}:host{top:0;-webkit-padding-start:90px;padding-inline-start:90px;-webkit-padding-end:90px;padding-inline-end:90px;padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);position:absolute;width:100%;height:100%;-webkit-transform:translateZ(0);transform:translateZ(0);font-size:min(1.0625rem, 20.4px);font-weight:600;text-align:center;-webkit-box-sizing:border-box;box-sizing:border-box;pointer-events:none}@supports (inset-inline-start: 0){:host{inset-inline-start:0}}@supports not (inset-inline-start: 0){:host{left:0}:host-context([dir=rtl]){left:unset;right:unset;right:0}@supports selector(:dir(rtl)){:host:dir(rtl){left:unset;right:unset;right:0}}}:host(.title-small){-webkit-padding-start:9px;padding-inline-start:9px;-webkit-padding-end:9px;padding-inline-end:9px;padding-top:6px;padding-bottom:16px;position:relative;font-size:min(0.8125rem, 23.4px);font-weight:normal}:host(.title-large){-webkit-padding-start:12px;padding-inline-start:12px;-webkit-padding-end:12px;padding-inline-end:12px;padding-top:2px;padding-bottom:4px;-webkit-transform-origin:left center;transform-origin:left center;position:static;-ms-flex-align:end;align-items:flex-end;min-width:100%;font-size:min(2.125rem, 61.2px);font-weight:700;text-align:start}:host(.title-large.title-rtl){-webkit-transform-origin:right center;transform-origin:right center}:host(.title-large.ion-cloned-element){--color:var(--ion-text-color, #000);font-family:var(--ion-font-family)}:host(.title-large) .toolbar-title{-webkit-transform-origin:inherit;transform-origin:inherit}:host-context([dir=rtl]):host(.title-large) .toolbar-title,:host-context([dir=rtl]).title-large .toolbar-title{-webkit-transform-origin:calc(100% - inherit);transform-origin:calc(100% - inherit)}@supports selector(:dir(rtl)){:host(.title-large) .toolbar-title:dir(rtl){-webkit-transform-origin:calc(100% - inherit);transform-origin:calc(100% - inherit)}}";
+const titleIosCss = ":host{--color:initial;display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-align:center;align-items:center;-webkit-transform:translateZ(0);transform:translateZ(0);color:var(--color)}:host(.ion-color){color:var(--ion-color-base)}.toolbar-title{display:block;width:100%;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;pointer-events:auto}:host(.title-small) .toolbar-title{white-space:normal}:host{top:0;-webkit-padding-start:90px;padding-inline-start:90px;-webkit-padding-end:90px;padding-inline-end:90px;padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);position:absolute;width:100%;height:100%;-webkit-transform:translateZ(0);transform:translateZ(0);font-size:min(1.0625rem, 20.4px);font-weight:600;text-align:center;-webkit-box-sizing:border-box;box-sizing:border-box;pointer-events:none}@supports (inset-inline-start: 0){:host{inset-inline-start:0}}@supports not (inset-inline-start: 0){:host{left:0}:host-context([dir=rtl]){left:unset;right:unset;right:0}@supports selector(:dir(rtl)){:host:dir(rtl){left:unset;right:unset;right:0}}}:host(.title-small){-webkit-padding-start:9px;padding-inline-start:9px;-webkit-padding-end:9px;padding-inline-end:9px;padding-top:6px;padding-bottom:16px;position:relative;font-size:min(0.8125rem, 23.4px);font-weight:normal}:host(.title-large){-webkit-padding-start:12px;padding-inline-start:12px;-webkit-padding-end:12px;padding-inline-end:12px;padding-top:2px;padding-bottom:4px;-webkit-transform-origin:left center;transform-origin:left center;position:static;-ms-flex-align:end;align-items:flex-end;min-width:100%;font-size:min(2.125rem, 61.2px);font-weight:700;text-align:start}:host(.title-large.title-rtl){-webkit-transform-origin:right center;transform-origin:right center}:host(.title-large.ion-cloned-element){--color:var(--ion-text-color, #000);font-family:var(--ion-font-family)}:host(.title-large) .toolbar-title{-webkit-transform-origin:inherit;transform-origin:inherit;width:auto}:host-context([dir=rtl]):host(.title-large) .toolbar-title,:host-context([dir=rtl]).title-large .toolbar-title{-webkit-transform-origin:calc(100% - inherit);transform-origin:calc(100% - inherit)}@supports selector(:dir(rtl)){:host(.title-large) .toolbar-title:dir(rtl){-webkit-transform-origin:calc(100% - inherit);transform-origin:calc(100% - inherit)}}";
 
 const titleMdCss = ":host{--color:initial;display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-align:center;align-items:center;-webkit-transform:translateZ(0);transform:translateZ(0);color:var(--color)}:host(.ion-color){color:var(--ion-color-base)}.toolbar-title{display:block;width:100%;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;pointer-events:auto}:host(.title-small) .toolbar-title{white-space:normal}:host{-webkit-padding-start:20px;padding-inline-start:20px;-webkit-padding-end:20px;padding-inline-end:20px;padding-top:0;padding-bottom:0;font-size:1.25rem;font-weight:500;letter-spacing:0.0125em}:host(.title-small){width:100%;height:100%;font-size:0.9375rem;font-weight:normal}";
 

package/components/ios.transition.js

@@ -55,60 +55,134 @@ const createLargeTitleTransition = (rootAnimation, rtl, backDirection, enteringE
   if (shouldAnimationForward) {
     const leavingLargeTitleBox = leavingLargeTitle.getBoundingClientRect();
     const enteringBackButtonBox = enteringBackButton.getBoundingClientRect();
-    animateLargeTitle(rootAnimation, rtl, backDirection, leavingLargeTitle, leavingLargeTitleBox, enteringBackButtonBox);
-    animateBackButton(rootAnimation, rtl, backDirection, enteringBackButton, leavingLargeTitleBox, enteringBackButtonBox);
+    const enteringBackButtonTextEl = shadow(enteringBackButton).querySelector('.button-text');
+    const enteringBackButtonTextBox = enteringBackButtonTextEl.getBoundingClientRect();
+    const leavingLargeTitleTextEl = shadow(leavingLargeTitle).querySelector('.toolbar-title');
+    const leavingLargeTitleTextBox = leavingLargeTitleTextEl.getBoundingClientRect();
+    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();
-    animateLargeTitle(rootAnimation, rtl, backDirection, enteringLargeTitle, enteringLargeTitleBox, leavingBackButtonBox);
-    animateBackButton(rootAnimation, rtl, backDirection, leavingBackButton, enteringLargeTitleBox, leavingBackButtonBox);
+    const leavingBackButtonTextEl = shadow(leavingBackButton).querySelector('.button-text');
+    const leavingBackButtonTextBox = leavingBackButtonTextEl.getBoundingClientRect();
+    const enteringLargeTitleTextEl = shadow(enteringLargeTitle).querySelector('.toolbar-title');
+    const enteringLargeTitleTextBox = enteringLargeTitleTextEl.getBoundingClientRect();
+    animateLargeTitle(rootAnimation, rtl, backDirection, enteringLargeTitle, enteringLargeTitleBox, enteringLargeTitleTextBox, leavingBackButtonTextEl, leavingBackButtonTextBox);
+    animateBackButton(rootAnimation, rtl, backDirection, leavingBackButton, leavingBackButtonBox, leavingBackButtonTextEl, leavingBackButtonTextBox, enteringLargeTitle, enteringLargeTitleTextBox);
   }
   return {
     forward: shouldAnimationForward,
     backward: shouldAnimationBackward,
   };
 };
-const animateBackButton = (rootAnimation, rtl, backDirection, backButtonEl, largeTitleBox, backButtonBox) => {
+const animateBackButton = (rootAnimation, rtl, backDirection, backButtonEl, backButtonBox, backButtonTextEl, backButtonTextBox, largeTitleEl, largeTitleTextBox) => {
+  var _a, _b;
   const BACK_BUTTON_START_OFFSET = rtl ? `calc(100% - ${backButtonBox.right + 4}px)` : `${backButtonBox.left - 4}px`;
-  const START_TEXT_TRANSLATE = rtl ? '7px' : '-7px';
-  const END_TEXT_TRANSLATE = rtl ? '-4px' : '4px';
-  const ICON_TRANSLATE = rtl ? '-4px' : '4px';
   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})`;
+  const TEXT_END_SCALE = 'scale(1)';
+  const backButtonIconEl = shadow(backButtonEl).querySelector('ion-icon');
+  const backButtonIconBox = backButtonIconEl.getBoundingClientRect();
+  /**
+   * We need to offset the container by the icon dimensions
+   * so that the back button text aligns with the large title
+   * text. Otherwise, the back button icon will align with the
+   * large title text but the back button text will not.
+   */
+  const CONTAINER_START_TRANSLATE_X = rtl
+    ? `${backButtonIconBox.width / 2 - (backButtonIconBox.right - backButtonBox.right)}px`
+    : `${backButtonBox.left - backButtonIconBox.width / 2}px`;
+  const CONTAINER_END_TRANSLATE_X = rtl ? `-${window.innerWidth - backButtonBox.right}px` : `${backButtonBox.left}px`;
+  /**
+   * Back button container should be
+   * aligned to the top of the title container
+   * so the texts overlap as the back button
+   * text begins to fade in.
+   */
+  const CONTAINER_START_TRANSLATE_Y = `${largeTitleTextBox.top}px`;
+  /**
+   * The cloned back button should align exactly with the
+   * real back button on the entering page otherwise there will
+   * be a layout shift.
+   */
+  const CONTAINER_END_TRANSLATE_Y = `${backButtonBox.top}px`;
+  /**
+   * In the forward direction, the cloned back button
+   * container should translate from over the large title
+   * to over the back button. In the backward direction,
+   * it should translate from over the back button to over
+   * the large title.
+   */
+  const FORWARD_CONTAINER_KEYFRAMES = [
+    { offset: 0, transform: `translate3d(${CONTAINER_START_TRANSLATE_X}, ${CONTAINER_START_TRANSLATE_Y}, 0)` },
+    { offset: 1, transform: `translate3d(${CONTAINER_END_TRANSLATE_X}, ${CONTAINER_END_TRANSLATE_Y}, 0)` },
+  ];
+  const BACKWARD_CONTAINER_KEYFRAMES = [
+    { offset: 0, transform: `translate3d(${CONTAINER_END_TRANSLATE_X}, ${CONTAINER_END_TRANSLATE_Y}, 0)` },
+    { offset: 1, transform: `translate3d(${CONTAINER_START_TRANSLATE_X}, ${CONTAINER_START_TRANSLATE_Y}, 0)` },
+  ];
+  const CONTAINER_KEYFRAMES = backDirection ? BACKWARD_CONTAINER_KEYFRAMES : FORWARD_CONTAINER_KEYFRAMES;
+  /**
+   * In the forward direction, the text in the cloned back button
+   * should start to be (roughly) the size of the large title
+   * and then scale down to be the size of the actual back button.
+   * The text should also translate, but that translate is handled
+   * by the container keyframes.
+   */
   const FORWARD_TEXT_KEYFRAMES = [
-    {
-      offset: 0,
-      opacity: 0,
-      transform: `translate3d(${START_TEXT_TRANSLATE}, ${largeTitleBox.top - 40}px, 0) scale(2.1)`,
-    },
-    { offset: 1, opacity: 1, transform: `translate3d(${END_TEXT_TRANSLATE}, ${backButtonBox.top - 46}px, 0) scale(1)` },
+    { offset: 0, opacity: 0, transform: TEXT_START_SCALE },
+    { offset: 1, opacity: 1, transform: TEXT_END_SCALE },
   ];
   const BACKWARD_TEXT_KEYFRAMES = [
-    { offset: 0, opacity: 1, transform: `translate3d(${END_TEXT_TRANSLATE}, ${backButtonBox.top - 46}px, 0) scale(1)` },
-    { offset: 0.6, opacity: 0 },
-    {
-      offset: 1,
-      opacity: 0,
-      transform: `translate3d(${START_TEXT_TRANSLATE}, ${largeTitleBox.top - 40}px, 0) scale(2.1)`,
-    },
+    { offset: 0, opacity: 1, transform: TEXT_END_SCALE },
+    { offset: 1, opacity: 0, transform: TEXT_START_SCALE },
   ];
   const TEXT_KEYFRAMES = backDirection ? BACKWARD_TEXT_KEYFRAMES : FORWARD_TEXT_KEYFRAMES;
+  /**
+   * The icon should scale in/out in the second
+   * half of the animation. The icon should also
+   * translate, but that translate is handled by the
+   * container keyframes.
+   */
   const FORWARD_ICON_KEYFRAMES = [
-    { offset: 0, opacity: 0, transform: `translate3d(${ICON_TRANSLATE}, ${backButtonBox.top - 41}px, 0) scale(0.6)` },
-    { offset: 1, opacity: 1, transform: `translate3d(${ICON_TRANSLATE}, ${backButtonBox.top - 46}px, 0) scale(1)` },
+    { offset: 0, opacity: 0, transform: 'scale(0.6)' },
+    { offset: 0.6, opacity: 0, transform: 'scale(0.6)' },
+    { offset: 1, opacity: 1, transform: 'scale(1)' },
   ];
   const BACKWARD_ICON_KEYFRAMES = [
-    { offset: 0, opacity: 1, transform: `translate3d(${ICON_TRANSLATE}, ${backButtonBox.top - 46}px, 0) scale(1)` },
-    { offset: 0.2, opacity: 0, transform: `translate3d(${ICON_TRANSLATE}, ${backButtonBox.top - 41}px, 0) scale(0.6)` },
-    { offset: 1, opacity: 0, transform: `translate3d(${ICON_TRANSLATE}, ${backButtonBox.top - 41}px, 0) scale(0.6)` },
+    { offset: 0, opacity: 1, transform: 'scale(1)' },
+    { offset: 0.2, opacity: 0, transform: 'scale(0.6)' },
+    { offset: 1, opacity: 0, transform: 'scale(0.6)' },
   ];
   const ICON_KEYFRAMES = backDirection ? BACKWARD_ICON_KEYFRAMES : FORWARD_ICON_KEYFRAMES;
   const enteringBackButtonTextAnimation = createAnimation();
   const enteringBackButtonIconAnimation = createAnimation();
+  const enteringBackButtonAnimation = createAnimation();
   const clonedBackButtonEl = getClonedElement('ion-back-button');
-  const backButtonTextEl = shadow(clonedBackButtonEl).querySelector('.button-text');
-  const backButtonIconEl = shadow(clonedBackButtonEl).querySelector('ion-icon');
+  const clonedBackButtonTextEl = shadow(clonedBackButtonEl).querySelector('.button-text');
+  const clonedBackButtonIconEl = shadow(clonedBackButtonEl).querySelector('ion-icon');
   clonedBackButtonEl.text = backButtonEl.text;
   clonedBackButtonEl.mode = backButtonEl.mode;
   clonedBackButtonEl.icon = backButtonEl.icon;
@@ -116,11 +190,19 @@ const animateBackButton = (rootAnimation, rtl, backDirection, backButtonEl, larg
   clonedBackButtonEl.disabled = backButtonEl.disabled;
   clonedBackButtonEl.style.setProperty('display', 'block');
   clonedBackButtonEl.style.setProperty('position', 'fixed');
-  enteringBackButtonIconAnimation.addElement(backButtonIconEl);
-  enteringBackButtonTextAnimation.addElement(backButtonTextEl);
+  enteringBackButtonIconAnimation.addElement(clonedBackButtonIconEl);
+  enteringBackButtonTextAnimation.addElement(clonedBackButtonTextEl);
+  enteringBackButtonAnimation.addElement(clonedBackButtonEl);
+  enteringBackButtonAnimation
+    .beforeStyles({
+    position: 'absolute',
+    top: '0px',
+    [CONTAINER_ORIGIN_X]: '0px',
+  })
+    .keyframes(CONTAINER_KEYFRAMES);
   enteringBackButtonTextAnimation
     .beforeStyles({
-    'transform-origin': `${TEXT_ORIGIN_X} center`,
+    'transform-origin': `${TEXT_ORIGIN_X} top`,
   })
     .beforeAddWrite(() => {
     backButtonEl.style.setProperty('display', 'none');
@@ -137,21 +219,91 @@ const animateBackButton = (rootAnimation, rtl, backDirection, backButtonEl, larg
     'transform-origin': `${ICON_ORIGIN_X} center`,
   })
     .keyframes(ICON_KEYFRAMES);
-  rootAnimation.addAnimation([enteringBackButtonTextAnimation, enteringBackButtonIconAnimation]);
+  rootAnimation.addAnimation([
+    enteringBackButtonTextAnimation,
+    enteringBackButtonIconAnimation,
+    enteringBackButtonAnimation,
+  ]);
 };
-const animateLargeTitle = (rootAnimation, rtl, backDirection, largeTitleEl, largeTitleBox, backButtonBox) => {
-  const TITLE_START_OFFSET = rtl ? `calc(100% - ${largeTitleBox.right}px)` : `${largeTitleBox.left}px`;
-  const START_TRANSLATE = rtl ? '-18px' : '18px';
+const animateLargeTitle = (rootAnimation, rtl, backDirection, largeTitleEl, largeTitleBox, largeTitleTextBox, backButtonTextEl, backButtonTextBox) => {
+  var _a, _b;
+  /**
+   * The horizontal transform origin for the large title
+   */
   const ORIGIN_X = rtl ? 'right' : 'left';
+  const TITLE_START_OFFSET = rtl ? `calc(100% - ${largeTitleBox.right}px)` : `${largeTitleBox.left}px`;
+  /**
+   * The cloned large should align exactly with the
+   * real large title on the leaving page otherwise there will
+   * be a layout shift.
+   */
+  const START_TRANSLATE_X = '0px';
+  const START_TRANSLATE_Y = `${largeTitleBox.top}px`;
+  /**
+   * How much to offset the large title translation by.
+   * This accounts for differences in sizing between the large
+   * title and the back button due to padding and font weight.
+   */
+  const LARGE_TITLE_TRANSLATION_OFFSET = 8;
+  /**
+   * 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.
+   */
+  const END_TRANSLATE_X = rtl
+    ? `-${window.innerWidth - backButtonTextBox.right - LARGE_TITLE_TRANSLATION_OFFSET}px`
+    : `${backButtonTextBox.x - LARGE_TITLE_TRANSLATION_OFFSET}px`;
+  /**
+   * 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 LARGE_TITLE_TOP_PADDING = 2;
+  const END_TRANSLATE_Y = `${backButtonTextBox.y - LARGE_TITLE_TOP_PADDING}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;
+  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(${START_TRANSLATE}, ${backButtonBox.top - 4}px, 0) scale(0.49)` },
+    { offset: 0, opacity: 0, transform: `translate3d(${END_TRANSLATE_X}, ${END_TRANSLATE_Y}, 0) ${END_SCALE}` },
     { offset: 0.1, opacity: 0 },
-    { offset: 1, opacity: 1, transform: `translate3d(0, ${largeTitleBox.top + 2}px, 0) scale(1)` },
+    { offset: 1, opacity: 1, transform: `translate3d(${START_TRANSLATE_X}, ${START_TRANSLATE_Y}, 0) ${START_SCALE}` },
   ];
   const FORWARDS_KEYFRAMES = [
-    { offset: 0, opacity: 0.99, transform: `translate3d(0, ${largeTitleBox.top + 2}px, 0) scale(1)` },
+    {
+      offset: 0,
+      opacity: 0.99,
+      transform: `translate3d(${START_TRANSLATE_X}, ${START_TRANSLATE_Y}, 0) ${START_SCALE}`,
+    },
     { offset: 0.6, opacity: 0 },
-    { offset: 1, opacity: 0, transform: `translate3d(${START_TRANSLATE}, ${backButtonBox.top - 4}px, 0) scale(0.5)` },
+    { offset: 1, opacity: 0, transform: `translate3d(${END_TRANSLATE_X}, ${END_TRANSLATE_Y}, 0) ${END_SCALE}` },
   ];
   const KEYFRAMES = backDirection ? BACKWARDS_KEYFRAMES : FORWARDS_KEYFRAMES;
   const clonedTitleEl = getClonedElement('ion-title');
@@ -162,8 +314,14 @@ const animateLargeTitle = (rootAnimation, rtl, backDirection, largeTitleEl, larg
   clonedLargeTitleAnimation.addElement(clonedTitleEl);
   clonedLargeTitleAnimation
     .beforeStyles({
-    'transform-origin': `${ORIGIN_X} center`,
-    height: '46px',
+    'transform-origin': `${ORIGIN_X} top`,
+    /**
+     * Since font size changes will cause
+     * the dimension of the large title to change
+     * we need to set the cloned title height
+     * equal to that of the original large title height.
+     */
+    height: `${largeTitleBox.height}px`,
     display: '',
     position: 'relative',
     [ORIGIN_X]: TITLE_START_OFFSET,
@@ -476,5 +634,15 @@ const iosTransitionAnimation = (navEl, opts) => {
     throw err;
   }
 };
+/**
+ * The scale of the back button during the animation
+ * is computed based on the scale of the large title
+ * and vice versa. However, we need to account for slight
+ * variations in the size of the large title due to
+ * padding and font weight. This value should be used to subtract
+ * a small amount from the large title height when computing scales
+ * to get more accurate scale results.
+ */
+const LARGE_TITLE_SIZE_OFFSET = 10;
 
 export { iosTransitionAnimation, shadow };

package/dist/cjs/{index-d93fb71d.js → index-eccba000.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-a4d545dd.js'); });
-const mdTransitionAnimation = () => Promise.resolve().then(function () { return require('./md.transition-80bb961b.js'); });
+const iosTransitionAnimation = () => Promise.resolve().then(function () { return require('./ios.transition-5af5991e.js'); });
+const mdTransitionAnimation = () => Promise.resolve().then(function () { return require('./md.transition-1e740a6a.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-c8bdd3c7.js');
-const index = require('./index-d93fb71d.js');
-const ios_transition = require('./ios.transition-a4d545dd.js');
-const md_transition = require('./md.transition-80bb961b.js');
+const index = require('./index-eccba000.js');
+const ios_transition = require('./ios.transition-5af5991e.js');
+const md_transition = require('./md.transition-1e740a6a.js');
 const cubicBezier = require('./cubic-bezier-6b9222ad.js');
 const index$1 = require('./index-0ee995e4.js');
 const ionicGlobal = require('./ionic-global-fb752503.js');

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

@@ -15,7 +15,7 @@ const keyboardController = require('./keyboard-controller-50beb83a.js');
 const cubicBezier = require('./cubic-bezier-6b9222ad.js');
 const frameworkDelegate = require('./framework-delegate-c0873a6f.js');
 const lockController = require('./lock-controller-4ae2eb59.js');
-const index$2 = require('./index-d93fb71d.js');
+const index$2 = require('./index-eccba000.js');
 require('./index-cc7dfb7c.js');
 require('./index-306a7476.js');
 require('./keyboard-fd7db491.js');
@@ -1170,7 +1170,7 @@ const RouterOutlet = class {
 };
 RouterOutlet.style = routerOutletCss;
 
-const titleIosCss = ":host{--color:initial;display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-align:center;align-items:center;-webkit-transform:translateZ(0);transform:translateZ(0);color:var(--color)}:host(.ion-color){color:var(--ion-color-base)}.toolbar-title{display:block;width:100%;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;pointer-events:auto}:host(.title-small) .toolbar-title{white-space:normal}:host{top:0;-webkit-padding-start:90px;padding-inline-start:90px;-webkit-padding-end:90px;padding-inline-end:90px;padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);position:absolute;width:100%;height:100%;-webkit-transform:translateZ(0);transform:translateZ(0);font-size:min(1.0625rem, 20.4px);font-weight:600;text-align:center;-webkit-box-sizing:border-box;box-sizing:border-box;pointer-events:none}@supports (inset-inline-start: 0){:host{inset-inline-start:0}}@supports not (inset-inline-start: 0){:host{left:0}:host-context([dir=rtl]){left:unset;right:unset;right:0}@supports selector(:dir(rtl)){:host:dir(rtl){left:unset;right:unset;right:0}}}:host(.title-small){-webkit-padding-start:9px;padding-inline-start:9px;-webkit-padding-end:9px;padding-inline-end:9px;padding-top:6px;padding-bottom:16px;position:relative;font-size:min(0.8125rem, 23.4px);font-weight:normal}:host(.title-large){-webkit-padding-start:12px;padding-inline-start:12px;-webkit-padding-end:12px;padding-inline-end:12px;padding-top:2px;padding-bottom:4px;-webkit-transform-origin:left center;transform-origin:left center;position:static;-ms-flex-align:end;align-items:flex-end;min-width:100%;font-size:min(2.125rem, 61.2px);font-weight:700;text-align:start}:host(.title-large.title-rtl){-webkit-transform-origin:right center;transform-origin:right center}:host(.title-large.ion-cloned-element){--color:var(--ion-text-color, #000);font-family:var(--ion-font-family)}:host(.title-large) .toolbar-title{-webkit-transform-origin:inherit;transform-origin:inherit}:host-context([dir=rtl]):host(.title-large) .toolbar-title,:host-context([dir=rtl]).title-large .toolbar-title{-webkit-transform-origin:calc(100% - inherit);transform-origin:calc(100% - inherit)}@supports selector(:dir(rtl)){:host(.title-large) .toolbar-title:dir(rtl){-webkit-transform-origin:calc(100% - inherit);transform-origin:calc(100% - inherit)}}";
+const titleIosCss = ":host{--color:initial;display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-align:center;align-items:center;-webkit-transform:translateZ(0);transform:translateZ(0);color:var(--color)}:host(.ion-color){color:var(--ion-color-base)}.toolbar-title{display:block;width:100%;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;pointer-events:auto}:host(.title-small) .toolbar-title{white-space:normal}:host{top:0;-webkit-padding-start:90px;padding-inline-start:90px;-webkit-padding-end:90px;padding-inline-end:90px;padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);position:absolute;width:100%;height:100%;-webkit-transform:translateZ(0);transform:translateZ(0);font-size:min(1.0625rem, 20.4px);font-weight:600;text-align:center;-webkit-box-sizing:border-box;box-sizing:border-box;pointer-events:none}@supports (inset-inline-start: 0){:host{inset-inline-start:0}}@supports not (inset-inline-start: 0){:host{left:0}:host-context([dir=rtl]){left:unset;right:unset;right:0}@supports selector(:dir(rtl)){:host:dir(rtl){left:unset;right:unset;right:0}}}:host(.title-small){-webkit-padding-start:9px;padding-inline-start:9px;-webkit-padding-end:9px;padding-inline-end:9px;padding-top:6px;padding-bottom:16px;position:relative;font-size:min(0.8125rem, 23.4px);font-weight:normal}:host(.title-large){-webkit-padding-start:12px;padding-inline-start:12px;-webkit-padding-end:12px;padding-inline-end:12px;padding-top:2px;padding-bottom:4px;-webkit-transform-origin:left center;transform-origin:left center;position:static;-ms-flex-align:end;align-items:flex-end;min-width:100%;font-size:min(2.125rem, 61.2px);font-weight:700;text-align:start}:host(.title-large.title-rtl){-webkit-transform-origin:right center;transform-origin:right center}:host(.title-large.ion-cloned-element){--color:var(--ion-text-color, #000);font-family:var(--ion-font-family)}:host(.title-large) .toolbar-title{-webkit-transform-origin:inherit;transform-origin:inherit;width:auto}:host-context([dir=rtl]):host(.title-large) .toolbar-title,:host-context([dir=rtl]).title-large .toolbar-title{-webkit-transform-origin:calc(100% - inherit);transform-origin:calc(100% - inherit)}@supports selector(:dir(rtl)){:host(.title-large) .toolbar-title:dir(rtl){-webkit-transform-origin:calc(100% - inherit);transform-origin:calc(100% - inherit)}}";
 
 const titleMdCss = ":host{--color:initial;display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-align:center;align-items:center;-webkit-transform:translateZ(0);transform:translateZ(0);color:var(--color)}:host(.ion-color){color:var(--ion-color-base)}.toolbar-title{display:block;width:100%;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;pointer-events:auto}:host(.title-small) .toolbar-title{white-space:normal}:host{-webkit-padding-start:20px;padding-inline-start:20px;-webkit-padding-end:20px;padding-inline-end:20px;padding-top:0;padding-bottom:0;font-size:1.25rem;font-weight:500;letter-spacing:0.0125em}:host(.title-small){width:100%;height:100%;font-size:0.9375rem;font-weight:normal}";
 

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

@@ -14,7 +14,7 @@ const index$4 = require('./index-cc7dfb7c.js');
 const capacitor = require('./capacitor-2ffba62a.js');
 const overlays = require('./overlays-1a734051.js');
 const theme = require('./theme-fbc56b3b.js');
-const index$5 = require('./index-d93fb71d.js');
+const index$5 = require('./index-eccba000.js');
 const ionicGlobal = require('./ionic-global-fb752503.js');
 const keyboard = require('./keyboard-38f2bb7b.js');
 const animation = require('./animation-c8bdd3c7.js');

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

@@ -8,7 +8,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-305a23dc.js');
 const cubicBezier = require('./cubic-bezier-6b9222ad.js');
 const helpers = require('./helpers-ea4ccbcb.js');
-const index$1 = require('./index-d93fb71d.js');
+const index$1 = require('./index-eccba000.js');
 const ionicGlobal = require('./ionic-global-fb752503.js');
 const frameworkDelegate = require('./framework-delegate-c0873a6f.js');
 

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

@@ -13,7 +13,7 @@ const index$1 = require('./index-cc7dfb7c.js');
 const overlays = require('./overlays-1a734051.js');
 const ionicGlobal = require('./ionic-global-fb752503.js');
 const theme = require('./theme-fbc56b3b.js');
-const index$2 = require('./index-d93fb71d.js');
+const index$2 = require('./index-eccba000.js');
 const animation = require('./animation-c8bdd3c7.js');
 require('./index-306a7476.js');
 require('./hardware-back-button-b67c8e75.js');

package/dist/cjs/ionic.cjs.js

@@ -10,7 +10,7 @@ const appGlobals = require('./app-globals-fe1ad535.js');
 require('./ionic-global-fb752503.js');
 
 /*
- Stencil Client Patch Browser v4.4.1 | MIT Licensed | https://stenciljs.com
+ Stencil Client Patch Browser v4.5.0 | MIT Licensed | https://stenciljs.com
  */
 const patchBrowser = () => {
     const importMeta = (typeof document === 'undefined' ? new (require('u' + 'rl').URL)('file:' + __filename).href : (document.currentScript && document.currentScript.src || new URL('ionic.cjs.js', document.baseURI).href));