voyager-ionic-core 7.5.0 → 7.5.1

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

@@ -54,60 +54,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;
@@ -115,11 +189,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');
@@ -136,21 +218,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');
@@ -161,8 +313,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,
@@ -475,3 +633,13 @@ export 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;

package/dist/docs.json

@@ -1,8 +1,8 @@
 {
-  "timestamp": "2023-10-11T14:54:40",
+  "timestamp": "2023-10-19T00:28:11",
   "compiler": {
     "name": "@stencil/core",
-    "version": "4.4.1",
+    "version": "4.5.0",
     "typescriptVersion": "5.2.2"
   },
   "components": [

package/dist/esm/{index-7d2b2808.js → index-a09eac70.js}

@@ -10,8 +10,8 @@ const LIFECYCLE_WILL_LEAVE = 'ionViewWillLeave';
 const LIFECYCLE_DID_LEAVE = 'ionViewDidLeave';
 const LIFECYCLE_WILL_UNLOAD = 'ionViewWillUnload';
 
-const iosTransitionAnimation = () => import('./ios.transition-a86d7bbe.js');
-const mdTransitionAnimation = () => import('./md.transition-365ef6b6.js');
+const iosTransitionAnimation = () => import('./ios.transition-4d1322d6.js');
+const mdTransitionAnimation = () => import('./md.transition-66b425d0.js');
 // TODO(FW-2832): types
 const transition = (opts) => {
   return new Promise((resolve, reject) => {

package/dist/esm/index.js

@@ -2,9 +2,9 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 export { c as createAnimation } from './animation-92066c62.js';
-export { a as LIFECYCLE_DID_ENTER, c as LIFECYCLE_DID_LEAVE, L as LIFECYCLE_WILL_ENTER, b as LIFECYCLE_WILL_LEAVE, d as LIFECYCLE_WILL_UNLOAD, g as getIonPageElement } from './index-7d2b2808.js';
-export { iosTransitionAnimation } from './ios.transition-a86d7bbe.js';
-export { mdTransitionAnimation } from './md.transition-365ef6b6.js';
+export { a as LIFECYCLE_DID_ENTER, c as LIFECYCLE_DID_LEAVE, L as LIFECYCLE_WILL_ENTER, b as LIFECYCLE_WILL_LEAVE, d as LIFECYCLE_WILL_UNLOAD, g as getIonPageElement } from './index-a09eac70.js';
+export { iosTransitionAnimation } from './ios.transition-4d1322d6.js';
+export { mdTransitionAnimation } from './md.transition-66b425d0.js';
 export { g as getTimeGivenProgression } from './cubic-bezier-66542bc5.js';
 export { createGesture } from './index-ff313b19.js';
 export { g as getPlatforms, i as initialize, a as isPlatform } from './ionic-global-246ca78f.js';

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

@@ -11,7 +11,7 @@ import { c as createKeyboardController } from './keyboard-controller-0c2dce71.js
 import { g as getTimeGivenProgression } from './cubic-bezier-66542bc5.js';
 import { a as attachComponent, d as detachComponent } from './framework-delegate-aa433dea.js';
 import { c as createLockController } from './lock-controller-e8c6c051.js';
-import { t as transition } from './index-7d2b2808.js';
+import { t as transition } from './index-a09eac70.js';
 import './index-595d62c9.js';
 import './index-7a14ecec.js';
 import './keyboard-b063f012.js';
@@ -1166,7 +1166,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/esm/ion-modal.entry.js

@@ -10,7 +10,7 @@ import { p as printIonWarning } from './index-595d62c9.js';
 import { g as getCapacitor } from './capacitor-b4979570.js';
 import { G as GESTURE, e as createTriggerController, B as BACKDROP, j as prepareOverlay, k as setOverlayId, f as present, n as activeAnimations, g as dismiss, h as eventMethod } from './overlays-cec6bac8.js';
 import { g as getClassMap } from './theme-17531cdf.js';
-import { e as deepReady, w as waitForMount } from './index-7d2b2808.js';
+import { e as deepReady, w as waitForMount } from './index-a09eac70.js';
 import { b as getIonMode, c as config } from './ionic-global-246ca78f.js';
 import { KEYBOARD_DID_OPEN } from './keyboard-b551279d.js';
 import { c as createAnimation } from './animation-92066c62.js';

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

@@ -4,7 +4,7 @@
 import { r as registerInstance, d as createEvent, h, f as getElement, H as Host } from './index-b49b173c.js';
 import { g as getTimeGivenProgression } from './cubic-bezier-66542bc5.js';
 import { o as assert, s as shallowEqualStringMap } from './helpers-3379ba19.js';
-import { l as lifecycle, t as transition, s as setPageHidden, d as LIFECYCLE_WILL_UNLOAD, b as LIFECYCLE_WILL_LEAVE, c as LIFECYCLE_DID_LEAVE } from './index-7d2b2808.js';
+import { l as lifecycle, t as transition, s as setPageHidden, d as LIFECYCLE_WILL_UNLOAD, b as LIFECYCLE_WILL_LEAVE, c as LIFECYCLE_DID_LEAVE } from './index-a09eac70.js';
 import { b as getIonMode, c as config } from './ionic-global-246ca78f.js';
 import { a as attachComponent } from './framework-delegate-aa433dea.js';
 

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

@@ -9,7 +9,7 @@ import { p as printIonWarning } from './index-595d62c9.js';
 import { B as BACKDROP, j as prepareOverlay, k as setOverlayId, f as present, o as focusFirstDescendant, g as dismiss, h as eventMethod } from './overlays-cec6bac8.js';
 import { b as getIonMode, a as isPlatform } from './ionic-global-246ca78f.js';
 import { g as getClassMap } from './theme-17531cdf.js';
-import { e as deepReady, w as waitForMount } from './index-7d2b2808.js';
+import { e as deepReady, w as waitForMount } from './index-a09eac70.js';
 import { c as createAnimation } from './animation-92066c62.js';
 import './index-7a14ecec.js';
 import './hardware-back-button-39299f84.js';

package/dist/esm/ionic.js

@@ -7,7 +7,7 @@ import { g as globalScripts } from './app-globals-ec816a70.js';
 import './ionic-global-246ca78f.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 = import.meta.url;