@ionic/core 7.5.1-dev.11697139276.10eb94b8 → 7.5.1-dev.11697219113.17f86185

package/dist/types/components/picker-column-internal/picker-column-internal.d.ts

@@ -67,10 +67,8 @@ export declare class PickerColumnInternal implements ComponentInterface {
    * When ionInputModeChange is emitted, each column
    * needs to check if it is the one being made available
    * for text entry.
-   * input/change event listeners.
-   * @internal
    */
-  inputModeChange(useInputMode: boolean, inputModeColumn?: HTMLIonPickerColumnInternalElement): Promise<void>;
+  private inputModeChange;
   /**
    * Setting isActive will cause a re-render.
    * As a result, we do not want to cause the

package/dist/types/components/picker-internal/picker-internal-interfaces.d.ts

@@ -0,0 +1,8 @@
+export interface PickerInternalChangeEventDetail {
+  useInputMode: boolean;
+  inputModeColumn?: HTMLIonPickerColumnInternalElement;
+}
+export interface PickerInternalCustomEvent extends CustomEvent {
+  target: HTMLIonPickerInternalElement;
+  detail: PickerInternalChangeEventDetail;
+}

package/dist/types/components/picker-internal/picker-internal.d.ts

@@ -1,4 +1,5 @@
-import type { ComponentInterface } from '../../stencil-public-runtime';
+import type { ComponentInterface, EventEmitter } from '../../stencil-public-runtime';
+import type { PickerInternalChangeEventDetail } from './picker-internal-interfaces';
 /**
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
  * @internal
@@ -12,6 +13,7 @@ export declare class PickerInternal implements ComponentInterface {
   private destroyKeypressListener?;
   private singleColumnSearchTimeout?;
   el: HTMLIonPickerInternalElement;
+  ionInputModeChange: EventEmitter<PickerInternalChangeEventDetail>;
   /**
    * When the picker is interacted with
    * we need to prevent touchstart so other
@@ -91,10 +93,10 @@ export declare class PickerInternal implements ComponentInterface {
    */
   private onInputChange;
   /**
-   * Triggers an input mode change on child picker columns.
-   * This helps each picker column determine whether
+   * Emit ionInputModeChange. Picker columns
+   * listen for this event to determine whether
    * or not their column is "active" for text input.
    */
-  private triggerInputModeChange;
+  private emitInputModeChange;
   render(): any;
 }

package/dist/types/components.d.ts

@@ -25,6 +25,7 @@ import { NavComponent, NavComponentWithProps, NavOptions, RouterOutletOptions, S
 import { ViewController } from "./components/nav/view-controller";
 import { PickerButton, PickerColumn } from "./components/picker/picker-interface";
 import { PickerColumnItem } from "./components/picker-column-internal/picker-column-internal-interfaces";
+import { PickerInternalChangeEventDetail } from "./components/picker-internal/picker-internal-interfaces";
 import { PopoverSize, PositionAlign, PositionReference, PositionSide, TriggerAction } from "./components/popover/popover-interface";
 import { RadioGroupChangeEventDetail } from "./components/radio-group/radio-group-interface";
 import { PinFormatter, RangeChangeEventDetail, RangeKnobMoveEndEventDetail, RangeKnobMoveStartEventDetail, RangeValue } from "./components/range/range-interface";
@@ -60,6 +61,7 @@ export { NavComponent, NavComponentWithProps, NavOptions, RouterOutletOptions, S
 export { ViewController } from "./components/nav/view-controller";
 export { PickerButton, PickerColumn } from "./components/picker/picker-interface";
 export { PickerColumnItem } from "./components/picker-column-internal/picker-column-internal-interfaces";
+export { PickerInternalChangeEventDetail } from "./components/picker-internal/picker-internal-interfaces";
 export { PopoverSize, PositionAlign, PositionReference, PositionSide, TriggerAction } from "./components/popover/popover-interface";
 export { RadioGroupChangeEventDetail } from "./components/radio-group/radio-group-interface";
 export { PinFormatter, RangeChangeEventDetail, RangeKnobMoveEndEventDetail, RangeKnobMoveStartEventDetail, RangeValue } from "./components/range/range-interface";
@@ -2041,10 +2043,6 @@ export namespace Components {
           * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
          */
         "color"?: Color;
-        /**
-          * When ionInputModeChange is emitted, each column needs to check if it is the one being made available for text entry. input/change event listeners.
-         */
-        "inputModeChange": (useInputMode: boolean, inputModeColumn?: HTMLIonPickerColumnInternalElement) => Promise<void>;
         /**
           * A list of options to be displayed in the picker
          */
@@ -3332,6 +3330,10 @@ export interface IonPickerColumnInternalCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLIonPickerColumnInternalElement;
 }
+export interface IonPickerInternalCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLIonPickerInternalElement;
+}
 export interface IonPopoverCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLIonPopoverElement;
@@ -5996,6 +5998,7 @@ declare namespace LocalJSX {
           * The mode determines which platform styles to use.
          */
         "mode"?: "ios" | "md";
+        "onIonInputModeChange"?: (event: IonPickerInternalCustomEvent<PickerInternalChangeEventDetail>) => void;
     }
     interface IonPopover {
         /**

package/dist/types/utils/menu-controller/index.d.ts

@@ -1,21 +1,2 @@
-import type { MenuI } from '../../components/menu/menu-interface';
-import type { AnimationBuilder } from '../../interface';
-export declare const menuController: {
-  registerAnimation: (name: string, animation: AnimationBuilder) => void;
-  get: (menu?: string | null, logOnMultipleSideMenus?: boolean) => Promise<HTMLIonMenuElement | undefined>;
-  getMenus: () => Promise<HTMLIonMenuElement[]>;
-  getOpen: () => Promise<HTMLIonMenuElement | undefined>;
-  isEnabled: (menu?: string | null) => Promise<boolean>;
-  swipeGesture: (shouldEnable: boolean, menu?: string | null) => Promise<HTMLIonMenuElement | undefined>;
-  isAnimating: () => Promise<boolean>;
-  isOpen: (menu?: string | null) => Promise<boolean>;
-  enable: (shouldEnable: boolean, menu?: string | null) => Promise<HTMLIonMenuElement | undefined>;
-  toggle: (menu?: string | null) => Promise<boolean>;
-  close: (menu?: string | null) => Promise<boolean>;
-  open: (menu?: string | null) => Promise<boolean>;
-  _getOpenSync: () => HTMLIonMenuElement | undefined;
-  _createAnimation: (type: string, menuCmp: MenuI) => any;
-  _register: (menu: MenuI) => void;
-  _unregister: (menu: MenuI) => void;
-  _setOpen: (menu: MenuI, shouldOpen: boolean, animated: boolean) => Promise<boolean>;
-};
+import type { MenuControllerI } from '../../components/menu/menu-interface';
+export declare const menuController: MenuControllerI;

package/hydrate/index.js

@@ -6,7 +6,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 /*!
- Stencil Mock Doc v4.4.1 | MIT Licensed | https://stenciljs.com
+ Stencil Mock Doc v4.4.1-dev.1697216096.18bf460 | MIT Licensed | https://stenciljs.com
  */
 const CONTENT_REF_ID = 'r';
 const ORG_LOCATION_ID = 'o';
@@ -25053,6 +25053,27 @@ class PickerColumnInternal {
         item.part.remove(PICKER_ITEM_ACTIVE_PART);
       }
     };
+    /**
+     * When ionInputModeChange is emitted, each column
+     * needs to check if it is the one being made available
+     * for text entry.
+     */
+    this.inputModeChange = (ev) => {
+      if (!this.numericInput) {
+        return;
+      }
+      const { useInputMode, inputModeColumn } = ev.detail;
+      /**
+       * If inputModeColumn is undefined then this means
+       * all numericInput columns are being selected.
+       */
+      const isColumnActive = inputModeColumn === undefined || inputModeColumn === this.el;
+      if (!useInputMode || !isColumnActive) {
+        this.setInputModeActive(false);
+        return;
+      }
+      this.setInputModeActive(true);
+    };
     /**
      * Setting isActive will cause a re-render.
      * As a result, we do not want to cause the
@@ -25254,7 +25275,11 @@ class PickerColumnInternal {
       }
     };
     new IntersectionObserver(visibleCallback, { threshold: 0.001 }).observe(this.el);
-    this.parentEl = this.el.closest('ion-picker-internal');
+    const parentEl = (this.parentEl = this.el.closest('ion-picker-internal'));
+    if (parentEl !== null) {
+      // TODO(FW-2832): type
+      parentEl.addEventListener('ionInputModeChange', (ev) => this.inputModeChange(ev));
+    }
   }
   componentDidRender() {
     var _a;
@@ -25297,29 +25322,6 @@ class PickerColumnInternal {
       this.ionChange.emit(findItem);
     }
   }
-  /**
-   * When ionInputModeChange is emitted, each column
-   * needs to check if it is the one being made available
-   * for text entry.
-   * input/change event listeners.
-   * @internal
-   */
-  async inputModeChange(useInputMode, inputModeColumn) {
-    if (!this.numericInput) {
-      return;
-    }
-    /**
-     * If inputModeColumn is undefined then this means
-     * all numericInput columns are being selected.
-     */
-    const isColumnActive = inputModeColumn === undefined || inputModeColumn === this.el;
-    if (!useInputMode || !isColumnActive) {
-      this.setInputModeActive(false);
-      return;
-    }
-    this.setInputModeActive(true);
-  }
-  ;
   get activeItem() {
     return getElementRoot(this.el).querySelector(`.picker-item[data-value="${this.value}"]:not([disabled])`);
   }
@@ -25363,8 +25365,7 @@ class PickerColumnInternal {
       "numericInput": [4, "numeric-input"],
       "isActive": [32],
       "scrollActiveItemIntoView": [64],
-      "setValue": [64],
-      "inputModeChange": [64]
+      "setValue": [64]
     },
     "$listeners$": undefined,
     "$lazyBundleId$": "-",
@@ -25386,6 +25387,7 @@ const pickerInternalMdCss = "/*!@:host*/.sc-ion-picker-internal-md-h{display:-ms
 class PickerInternal {
   constructor(hostRef) {
     registerInstance(this, hostRef);
+    this.ionInputModeChange = createEvent(this, "ionInputModeChange", 7);
     this.useInputMode = false;
     this.isInHighlightBounds = (ev) => {
       const { highlightEl } = this;
@@ -25599,7 +25601,7 @@ class PickerInternal {
           el.removeEventListener('keypress', this.onKeyPress);
         };
       }
-      this.triggerInputModeChange();
+      this.emitInputModeChange();
     };
     this.onKeyPress = (ev) => {
       const { inputEl } = this;
@@ -25795,13 +25797,16 @@ class PickerInternal {
       }
     };
     /**
-     * Triggers an input mode change on child picker columns.
-     * This helps each picker column determine whether
+     * Emit ionInputModeChange. Picker columns
+     * listen for this event to determine whether
      * or not their column is "active" for text input.
      */
-    this.triggerInputModeChange = () => {
-      const pickerColumns = this.el.querySelectorAll('ion-picker-column-internal');
-      pickerColumns.forEach((pickerColumn) => pickerColumn.inputModeChange(this.useInputMode, this.inputModeColumn));
+    this.emitInputModeChange = () => {
+      const { useInputMode, inputModeColumn } = this;
+      this.ionInputModeChange.emit({
+        useInputMode,
+        inputModeColumn,
+      });
     };
   }
   /**
@@ -25838,7 +25843,7 @@ class PickerInternal {
       this.destroyKeypressListener();
       this.destroyKeypressListener = undefined;
     }
-    this.triggerInputModeChange();
+    this.emitInputModeChange();
   }
   render() {
     return (hAsync(Host, { onPointerDown: (ev) => this.onPointerDown(ev), onClick: () => this.onClick() }, hAsync("input", { "aria-hidden": "true", tabindex: -1, inputmode: "numeric", type: "number", ref: (el) => (this.inputEl = el), onInput: () => this.onInputChange(), onBlur: () => this.exitInputMode() }), hAsync("div", { class: "picker-before" }), hAsync("div", { class: "picker-after" }), hAsync("div", { class: "picker-highlight", ref: (el) => (this.highlightEl = el) }), hAsync("slot", null)));
@@ -34659,7 +34664,7 @@ class Toolbar {
   }; }
 }
 
-const titleIosCss = "/*!@:host*/.sc-ion-title-ios-h{--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)*/.ion-color.sc-ion-title-ios-h{color:var(--ion-color-base)}/*!@.toolbar-title*/.toolbar-title.sc-ion-title-ios{display:block;width:100%;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;pointer-events:auto}/*!@:host(.title-small) .toolbar-title*/.title-small.sc-ion-title-ios-h .toolbar-title.sc-ion-title-ios{white-space:normal}/*!@:host*/.sc-ion-title-ios-h{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*/.sc-ion-title-ios-h{inset-inline-start:0}}@supports not (inset-inline-start: 0){/*!@:host*/.sc-ion-title-ios-h{left:0}/*!@:host-context([dir=rtl])*/[dir=rtl].sc-ion-title-ios-h,[dir=rtl] .sc-ion-title-ios-h{left:unset;right:unset;right:0}/*!@@supports selector(:dir(rtl))*/@supports .sc-ion-title-ios selector(.sc-ion-title-ios:dir(rtl)){.sc-ion-title-ios-h:dir(rtl){left:unset;right:unset;right:0}}}/*!@:host(.title-small)*/.title-small.sc-ion-title-ios-h{-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)*/.title-large.sc-ion-title-ios-h{-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)*/.title-large.title-rtl.sc-ion-title-ios-h{-webkit-transform-origin:right center;transform-origin:right center}/*!@:host(.title-large.ion-cloned-element)*/.title-large.ion-cloned-element.sc-ion-title-ios-h{--color:var(--ion-text-color, #000);font-family:var(--ion-font-family)}/*!@:host(.title-large) .toolbar-title*/.title-large.sc-ion-title-ios-h .toolbar-title.sc-ion-title-ios{-webkit-transform-origin:inherit;transform-origin:inherit}/*!@:host-context([dir=rtl]):host(.title-large) .toolbar-title, :host-context([dir=rtl]).title-large .toolbar-title*/[dir=rtl].sc-ion-title-ios-h -no-combinator.title-large.sc-ion-title-ios-h .toolbar-title.sc-ion-title-ios,[dir=rtl] .sc-ion-title-ios-h -no-combinator.title-large.sc-ion-title-ios-h .toolbar-title.sc-ion-title-ios,[dir=rtl].title-large.sc-ion-title-ios-h .toolbar-title.sc-ion-title-ios,[dir=rtl] .title-large.sc-ion-title-ios-h .toolbar-title.sc-ion-title-ios{-webkit-transform-origin:calc(100% - inherit);transform-origin:calc(100% - inherit)}@supports selector(:dir(rtl)){/*!@:host(.title-large) .toolbar-title:dir(rtl)*/.title-large.sc-ion-title-ios-h .toolbar-title.sc-ion-title-ios:dir(rtl){-webkit-transform-origin:calc(100% - inherit);transform-origin:calc(100% - inherit)}}";
+const titleIosCss = "/*!@:host*/.sc-ion-title-ios-h{--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)*/.ion-color.sc-ion-title-ios-h{color:var(--ion-color-base)}/*!@.toolbar-title*/.toolbar-title.sc-ion-title-ios{display:block;width:100%;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;pointer-events:auto}/*!@:host(.title-small) .toolbar-title*/.title-small.sc-ion-title-ios-h .toolbar-title.sc-ion-title-ios{white-space:normal}/*!@:host*/.sc-ion-title-ios-h{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*/.sc-ion-title-ios-h{inset-inline-start:0}}@supports not (inset-inline-start: 0){/*!@:host*/.sc-ion-title-ios-h{left:0}/*!@:host-context([dir=rtl])*/[dir=rtl].sc-ion-title-ios-h,[dir=rtl] .sc-ion-title-ios-h{left:unset;right:unset;right:0}/*!@@supports selector(:dir(rtl))*/@supports .sc-ion-title-ios selector(.sc-ion-title-ios:dir(rtl)){.sc-ion-title-ios-h:dir(rtl){left:unset;right:unset;right:0}}}/*!@:host(.title-small)*/.title-small.sc-ion-title-ios-h{-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)*/.title-large.sc-ion-title-ios-h{-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)*/.title-large.title-rtl.sc-ion-title-ios-h{-webkit-transform-origin:right center;transform-origin:right center}/*!@:host(.title-large.ion-cloned-element)*/.title-large.ion-cloned-element.sc-ion-title-ios-h{--color:var(--ion-text-color, #000);font-family:var(--ion-font-family)}/*!@:host(.title-large) .toolbar-title*/.title-large.sc-ion-title-ios-h .toolbar-title.sc-ion-title-ios{-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*/[dir=rtl].sc-ion-title-ios-h -no-combinator.title-large.sc-ion-title-ios-h .toolbar-title.sc-ion-title-ios,[dir=rtl] .sc-ion-title-ios-h -no-combinator.title-large.sc-ion-title-ios-h .toolbar-title.sc-ion-title-ios,[dir=rtl].title-large.sc-ion-title-ios-h .toolbar-title.sc-ion-title-ios,[dir=rtl] .title-large.sc-ion-title-ios-h .toolbar-title.sc-ion-title-ios{-webkit-transform-origin:calc(100% - inherit);transform-origin:calc(100% - inherit)}@supports selector(:dir(rtl)){/*!@:host(.title-large) .toolbar-title:dir(rtl)*/.title-large.sc-ion-title-ios-h .toolbar-title.sc-ion-title-ios:dir(rtl){-webkit-transform-origin:calc(100% - inherit);transform-origin:calc(100% - inherit)}}";
 
 const titleMdCss = "/*!@:host*/.sc-ion-title-md-h{--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)*/.ion-color.sc-ion-title-md-h{color:var(--ion-color-base)}/*!@.toolbar-title*/.toolbar-title.sc-ion-title-md{display:block;width:100%;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;pointer-events:auto}/*!@:host(.title-small) .toolbar-title*/.title-small.sc-ion-title-md-h .toolbar-title.sc-ion-title-md{white-space:normal}/*!@:host*/.sc-ion-title-md-h{-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)*/.title-small.sc-ion-title-md-h{width:100%;height:100%;font-size:0.9375rem;font-weight:normal}";
 
@@ -34861,60 +34866,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;
@@ -34922,11 +35001,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');
@@ -34943,21 +35030,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');
@@ -34968,8 +35125,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,
@@ -35282,6 +35445,16 @@ 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;
 
 var ios_transition = /*#__PURE__*/Object.freeze({
   __proto__: null,
@@ -35491,7 +35664,7 @@ function patchDomImplementation(e, t) {
   r.CustomEvent !== t && (r.CustomEvent = t);
  }
  try {
-  e.baseURI;
+  r.__stencil_baseURI = e.baseURI;
  } catch (t) {
   Object.defineProperty(e, "baseURI", {
    get() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ionic/core",
-  "version": "7.5.1-dev.11697139276.10eb94b8",
+  "version": "7.5.1-dev.11697219113.17f86185",
   "description": "Base components for Ionic",
   "keywords": [
     "ionic",
@@ -31,7 +31,7 @@
     "loader/"
   ],
   "dependencies": {
-    "@stencil/core": "^4.4.1",
+    "@stencil/core": "^4.4.1-dev.1697216096.18bf460",
     "ionicons": "^7.2.1",
     "tslib": "^2.1.0"
   },
@@ -44,7 +44,7 @@
     "@ionic/eslint-config": "^0.3.0",
     "@ionic/prettier-config": "^2.0.0",
     "@jest/core": "^27.5.1",
-    "@playwright/test": "^1.38.1",
+    "@playwright/test": "^1.39.0",
     "@rollup/plugin-node-resolve": "^8.4.0",
     "@rollup/plugin-virtual": "^2.0.3",
     "@stencil/angular-output-target": "^0.8.2",