@rdlabo/ionic-theme-ios27 2.0.0-beta.pr316.sha812440877761 → 2.0.0-beta.pr317.sha707be106d55b

package/dist/transition/ios.transition.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ios.transition.d.ts","names":[],"sources":["../../src/transition/ios.transition.ts"],"mappings":";;;;iBASiB;EACf;;qBAYW,YAAa,QAAQ,QAAQ;qBAI7B,yBAAyB,OAAO,aAAa,MAAM,sBAAsB"}
+{"version":3,"file":"ios.transition.d.ts","names":[],"sources":["../../src/transition/ios.transition.ts"],"mappings":";;;;iBAUiB;EACf;;qBAYW,YAAa,QAAQ,QAAQ;qBAK7B,yBAAyB,OAAO,aAAa,MAAM,sBAAsB"}

package/dist/transition/ios.transition.js

@@ -1,5 +1,6 @@
 import { getIonPageElement } from "./index.js";
 import { withNativeUITransition } from "./native-ui.js";
+import { createAnimation } from "@ionic/core/components/index.js";
 import { nativeWebViewMetrics } from "@rdlabo/capacitor-native-ui/integration";
 import { createIosTransitionAnimation, shadow } from "@rdlabo/ionic-theme-utils";
 //#region src/transition/ios.transition.ts
@@ -14,7 +15,46 @@ const transitionConfig = {
 const setConfig = (config) => {
 	if (config.radius !== void 0) nativeWebViewMetrics.radius = config.radius;
 };
-const iosTransitionAnimation = withNativeUITransition(createIosTransitionAnimation(transitionConfig));
+const buildTransition = createIosTransitionAnimation(transitionConfig);
+const iosTransitionAnimation = withNativeUITransition((navEl, opts) => {
+	const animation = buildTransition(navEl, opts);
+	const backing = "var(--ion-background-color, #fff)";
+	let ownsBacking = false;
+	animation.beforeAddWrite(() => {
+		if (navEl.style.backgroundColor) return;
+		const style = navEl.ownerDocument.defaultView?.getComputedStyle(navEl);
+		if (!style || !["transparent", "rgba(0, 0, 0, 0)"].includes(style.backgroundColor)) return;
+		if (style.backgroundImage && style.backgroundImage !== "none") return;
+		navEl.style.backgroundColor = backing;
+		ownsBacking = true;
+	});
+	const restoreBacking = () => {
+		if (ownsBacking && navEl.style.backgroundColor === backing && !navEl.style.getPropertyPriority("background-color")) navEl.style.removeProperty("background-color");
+		ownsBacking = false;
+	};
+	animation.afterAddWrite(restoreBacking);
+	const destroy = animation.destroy.bind(animation);
+	animation.destroy = (...args) => {
+		restoreBacking();
+		return destroy(...args);
+	};
+	const buttons = opts.leavingEl?.querySelectorAll(":scope > ion-header.header-translucent ion-buttons, :scope > ion-header.header-translucent ion-toolbar > ion-button");
+	if (buttons?.length) animation.addAnimation(createAnimation().addElement(buttons).keyframes([
+		{
+			offset: 0,
+			opacity: 1
+		},
+		{
+			offset: .5,
+			opacity: 0
+		},
+		{
+			offset: 1,
+			opacity: 0
+		}
+	]));
+	return animation;
+});
 //#endregion
 export { iosTransitionAnimation, setConfig, shadow };
 

package/dist/transition/ios.transition.js.map

@@ -1 +1 @@
-{"version":3,"file":"ios.transition.js","names":[],"sources":["../../src/transition/ios.transition.ts"],"sourcesContent":["import { createIosTransitionAnimation, shadow } from '@rdlabo/ionic-theme-utils';\nimport type { Animation } from '@ionic/core/components';\nimport type { TransitionOptions } from './index';\nimport { getIonPageElement } from './index';\nimport { nativeWebViewMetrics } from '@rdlabo/capacitor-native-ui/integration';\nimport { withNativeUITransition } from './native-ui';\n\nexport { shadow };\n\nexport interface IosTransitionConfig {\n  radius: number;\n}\n\nconst transitionConfig = {\n  offLeftPercent: 30,\n  getIonPageElement,\n  shouldAnimateFixedBackButton: (navEl: HTMLElement) => !navEl.closest('ion-app.ios-theme-vertical-bars'),\n  get radius() {\n    return nativeWebViewMetrics.radius;\n  },\n};\n\nexport const setConfig = (config: Partial<IosTransitionConfig>): void => {\n  if (config.radius !== undefined) nativeWebViewMetrics.radius = config.radius;\n};\n\nexport const iosTransitionAnimation: (navEl: HTMLElement, opts: TransitionOptions) => Animation = withNativeUITransition(\n  createIosTransitionAnimation<TransitionOptions>(transitionConfig),\n);\n"],"mappings":";;;;;AAaA,MAAM,mBAAmB;CACvB,gBAAgB;CAChB;CACA,+BAA+B,UAAuB,CAAC,MAAM,QAAQ,iCAAiC;CACtG,IAAI,SAAS;EACX,OAAO,qBAAqB;CAC9B;AACF;AAEA,MAAa,aAAa,WAA+C;CACvE,IAAI,OAAO,WAAW,KAAA,GAAW,qBAAqB,SAAS,OAAO;AACxE;AAEA,MAAa,yBAAqF,uBAChG,6BAAgD,gBAAgB,CAClE"}
+{"version":3,"file":"ios.transition.js","names":[],"sources":["../../src/transition/ios.transition.ts"],"sourcesContent":["import { createIosTransitionAnimation, shadow } from '@rdlabo/ionic-theme-utils';\nimport { createAnimation } from '@ionic/core/components/index.js';\nimport type { Animation } from '@ionic/core/components';\nimport type { TransitionOptions } from './index';\nimport { getIonPageElement } from './index';\nimport { nativeWebViewMetrics } from '@rdlabo/capacitor-native-ui/integration';\nimport { withNativeUITransition } from './native-ui';\n\nexport { shadow };\n\nexport interface IosTransitionConfig {\n  radius: number;\n}\n\nconst transitionConfig = {\n  offLeftPercent: 30,\n  getIonPageElement,\n  shouldAnimateFixedBackButton: (navEl: HTMLElement) => !navEl.closest('ion-app.ios-theme-vertical-bars'),\n  get radius() {\n    return nativeWebViewMetrics.radius;\n  },\n};\n\nexport const setConfig = (config: Partial<IosTransitionConfig>): void => {\n  if (config.radius !== undefined) nativeWebViewMetrics.radius = config.radius;\n};\n\nconst buildTransition = createIosTransitionAnimation<TransitionOptions>(transitionConfig);\nexport const iosTransitionAnimation: (navEl: HTMLElement, opts: TransitionOptions) => Animation = withNativeUITransition((navEl, opts) => {\n  const animation = buildTransition(navEl, opts);\n  const backing = 'var(--ion-background-color, #fff)';\n  let ownsBacking = false;\n  // Translucent pages expose the outlet as they move. Keep that backing surface\n  // in the page theme instead of exposing WKWebView's transparent native backing.\n  animation.beforeAddWrite(() => {\n    if (navEl.style.backgroundColor) return;\n    const style = navEl.ownerDocument.defaultView?.getComputedStyle(navEl);\n    if (!style || !['transparent', 'rgba(0, 0, 0, 0)'].includes(style.backgroundColor)) return;\n    if (style.backgroundImage && style.backgroundImage !== 'none') return;\n    navEl.style.backgroundColor = backing;\n    ownsBacking = true;\n  });\n  const restoreBacking = () => {\n    if (ownsBacking && navEl.style.backgroundColor === backing && !navEl.style.getPropertyPriority('background-color'))\n      navEl.style.removeProperty('background-color');\n    ownsBacking = false;\n  };\n  animation.afterAddWrite(restoreBacking);\n  // Ionic destroy does not run after-write hooks when playback is interrupted.\n  const destroy = animation.destroy.bind(animation);\n  animation.destroy = (...args) => {\n    restoreBacking();\n    return destroy(...args);\n  };\n  // Translucent pages move as a whole, but outgoing toolbar actions still need\n  // the same exit fade as opaque headers when they return from native to Web.\n  const buttons = opts.leavingEl?.querySelectorAll(\n    ':scope > ion-header.header-translucent ion-buttons, :scope > ion-header.header-translucent ion-toolbar > ion-button',\n  );\n  if (buttons?.length)\n    animation.addAnimation(\n      createAnimation()\n        .addElement(buttons)\n        .keyframes([\n          { offset: 0, opacity: 1 },\n          // Finish the exit before the incoming title occupies this toolbar.\n          { offset: 0.5, opacity: 0 },\n          { offset: 1, opacity: 0 },\n        ]),\n    );\n  return animation;\n});\n"],"mappings":";;;;;;AAcA,MAAM,mBAAmB;CACvB,gBAAgB;CAChB;CACA,+BAA+B,UAAuB,CAAC,MAAM,QAAQ,iCAAiC;CACtG,IAAI,SAAS;EACX,OAAO,qBAAqB;CAC9B;AACF;AAEA,MAAa,aAAa,WAA+C;CACvE,IAAI,OAAO,WAAW,KAAA,GAAW,qBAAqB,SAAS,OAAO;AACxE;AAEA,MAAM,kBAAkB,6BAAgD,gBAAgB;AACxF,MAAa,yBAAqF,wBAAwB,OAAO,SAAS;CACxI,MAAM,YAAY,gBAAgB,OAAO,IAAI;CAC7C,MAAM,UAAU;CAChB,IAAI,cAAc;CAGlB,UAAU,qBAAqB;EAC7B,IAAI,MAAM,MAAM,iBAAiB;EACjC,MAAM,QAAQ,MAAM,cAAc,aAAa,iBAAiB,KAAK;EACrE,IAAI,CAAC,SAAS,CAAC,CAAC,eAAe,kBAAkB,CAAC,CAAC,SAAS,MAAM,eAAe,GAAG;EACpF,IAAI,MAAM,mBAAmB,MAAM,oBAAoB,QAAQ;EAC/D,MAAM,MAAM,kBAAkB;EAC9B,cAAc;CAChB,CAAC;CACD,MAAM,uBAAuB;EAC3B,IAAI,eAAe,MAAM,MAAM,oBAAoB,WAAW,CAAC,MAAM,MAAM,oBAAoB,kBAAkB,GAC/G,MAAM,MAAM,eAAe,kBAAkB;EAC/C,cAAc;CAChB;CACA,UAAU,cAAc,cAAc;CAEtC,MAAM,UAAU,UAAU,QAAQ,KAAK,SAAS;CAChD,UAAU,WAAW,GAAG,SAAS;EAC/B,eAAe;EACf,OAAO,QAAQ,GAAG,IAAI;CACxB;CAGA,MAAM,UAAU,KAAK,WAAW,iBAC9B,qHACF;CACA,IAAI,SAAS,QACX,UAAU,aACR,gBAAgB,CAAC,CACd,WAAW,OAAO,CAAC,CACnB,UAAU;EACT;GAAE,QAAQ;GAAG,SAAS;EAAE;EAExB;GAAE,QAAQ;GAAK,SAAS;EAAE;EAC1B;GAAE,QAAQ;GAAG,SAAS;EAAE;CAC1B,CAAC,CACL;CACF,OAAO;AACT,CAAC"}

package/dist/transition/native-ui.d.ts

@@ -1,6 +1,6 @@
 import { Animation, AnimationBuilder } from "@ionic/core/components";
 //#region src/transition/native-ui.d.ts
 export declare const withNativeUITransition: (builder: AnimationBuilder) => AnimationBuilder;
-export declare const connectNativeUITransition: (animation: Animation, entering: HTMLElement, leaving?: HTMLElement) => void;
+export declare const connectNativeUITransition: (animation: Animation, entering: HTMLElement, leaving?: HTMLElement, direction?: "forward" | "back" | "root") => void;
 //#endregion
 //# sourceMappingURL=native-ui.d.ts.map

package/dist/transition/native-ui.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"native-ui.d.ts","names":[],"sources":["../../src/transition/native-ui.ts"],"mappings":";;qBASa,yBACV,SAAS,qBAAmB;qBAWlB,4BAA6B,WAAW,WAAW,UAAU,aAAa,UAAU"}
+{"version":3,"file":"native-ui.d.ts","names":[],"sources":["../../src/transition/native-ui.ts"],"mappings":";;qBAUa,yBACV,SAAS,qBAAmB;qBAWlB,4BACX,WAAW,WACX,UAAU,aACV,UAAU,aACV"}

package/dist/transition/native-ui.js

@@ -7,13 +7,13 @@ import { VERTICAL_BARS_TRANSITION_CANCELED, hasNativeUIIntegration, suspendNativ
 */
 const withNativeUITransition = (builder) => (baseEl, opts) => {
 	const animation = builder(baseEl, opts);
-	if (opts?.enteringEl) connectNativeUITransition(animation, opts.enteringEl, opts.leavingEl);
+	if (opts?.enteringEl) connectNativeUITransition(animation, opts.enteringEl, opts.leavingEl, opts.direction);
 	return animation;
 };
 const connectedTransitions = /* @__PURE__ */ new WeakSet();
 const cancellationTransitions = /* @__PURE__ */ new WeakSet();
 /** Ionic write hooks cannot await the bridge. Gate playback, including interactive playback. */
-const connectNativeUITransition = (animation, entering, leaving) => {
+const connectNativeUITransition = (animation, entering, leaving, direction) => {
 	if (leaving && !cancellationTransitions.has(animation)) {
 		cancellationTransitions.add(animation);
 		animation.onFinish((step) => {
@@ -32,16 +32,35 @@ const connectNativeUITransition = (animation, entering, leaving) => {
 	const progressEnd = animation.progressEnd.bind(animation);
 	const destroy = animation.destroy.bind(animation);
 	let release;
+	let frame = 0;
+	const win = entering.ownerDocument.defaultView;
+	const webAnimations = (value) => [...value.getWebAnimations(), ...value.childAnimations.flatMap(webAnimations)];
+	const track = () => {
+		if (!release?.progress || !win) return;
+		const sample = () => {
+			const progress = webAnimations(animation).map((value) => value.effect?.getComputedTiming().progress).find((value) => value != null);
+			if (progress != null) release?.progress?.(progress);
+			frame = win.requestAnimationFrame(sample);
+		};
+		frame = win.requestAnimationFrame(sample);
+	};
 	let preparation;
 	let disposed = false;
 	let interactiveReady = false;
 	let step;
 	let end;
-	const prepare = () => preparation ?? (preparation = suspendNativeUI(scopes).then((resume) => {
+	const prepare = (interactive = false) => preparation ?? (preparation = suspendNativeUI(scopes, {
+		navigation: true,
+		...direction ? { direction } : {},
+		...interactive ? { interactive: true } : {}
+	}).then((resume) => {
 		if (disposed) resume(true);
 		else release = resume;
 	}));
 	const finish = (canceled = false) => {
+		if (frame) win?.cancelAnimationFrame(frame);
+		frame = 0;
+		release?.progress?.(canceled ? 0 : 1);
 		release?.(canceled);
 		release = void 0;
 		preparation = void 0;
@@ -51,7 +70,9 @@ const connectNativeUITransition = (animation, entering, leaving) => {
 		await prepare();
 		if (disposed) return;
 		try {
-			await play(options);
+			const playing = play(options);
+			track();
+			await playing;
 		} finally {
 			finish();
 		}
@@ -60,23 +81,36 @@ const connectNativeUITransition = (animation, entering, leaving) => {
 		interactiveReady = false;
 		step = void 0;
 		end = void 0;
-		prepare().then(() => {
+		prepare(true).then(() => {
 			if (disposed) return;
 			progressStart(...args);
+			track();
 			interactiveReady = true;
-			if (step !== void 0) progressStep(step);
-			if (end) progressEnd(...end);
+			if (step !== void 0) {
+				progressStep(step);
+				release?.progress?.(step);
+			}
+			if (end) {
+				release?.finishGesture?.(end[0] === 1);
+				progressEnd(...end);
+			}
 		});
 		return animation;
 	};
 	animation.progressStep = (value) => {
 		step = value;
-		if (interactiveReady) progressStep(value);
+		if (interactiveReady) {
+			progressStep(value);
+			release?.progress?.(value);
+		}
 		return animation;
 	};
 	animation.progressEnd = (...args) => {
 		end = args;
-		if (interactiveReady) progressEnd(...args);
+		if (interactiveReady) {
+			release?.finishGesture?.(args[0] === 1);
+			progressEnd(...args);
+		}
 		return animation;
 	};
 	animation.destroy = (...args) => {

package/dist/transition/native-ui.js.map

@@ -1 +1 @@
-{"version":3,"file":"native-ui.js","names":[],"sources":["../../src/transition/native-ui.ts"],"sourcesContent":["import type { Animation } from '@ionic/core/components';\nimport { hasNativeUIIntegration, suspendNativeUI, VERTICAL_BARS_TRANSITION_CANCELED } from '@rdlabo/capacitor-native-ui/integration';\nimport type { AnimationBuilder } from '@ionic/core/components';\n\n/**\n * Keeps an existing Ionic navigation animation and coordinates native control handoff.\n * Register the returned builder as navAnimation. Do not use it for overlay animations.\n * The builder must return a fresh Animation for each navigation; Ionic destroys it afterward.\n */\nexport const withNativeUITransition =\n  (builder: AnimationBuilder): AnimationBuilder =>\n  (baseEl, opts) => {\n    const animation = builder(baseEl, opts);\n    if (opts?.enteringEl) connectNativeUITransition(animation, opts.enteringEl, opts.leavingEl);\n    return animation;\n  };\n\nconst connectedTransitions = new WeakSet<Animation>();\nconst cancellationTransitions = new WeakSet<Animation>();\n\n/** Ionic write hooks cannot await the bridge. Gate playback, including interactive playback. */\nexport const connectNativeUITransition = (animation: Animation, entering: HTMLElement, leaving?: HTMLElement) => {\n  if (leaving && !cancellationTransitions.has(animation)) {\n    cancellationTransitions.add(animation);\n    animation.onFinish((step) => {\n      if (step === 0) leaving.dispatchEvent(new CustomEvent(VERTICAL_BARS_TRANSITION_CANCELED, { bubbles: true, detail: { entering } }));\n    });\n  }\n  if (connectedTransitions.has(animation) || !hasNativeUIIntegration(entering.ownerDocument)) return;\n  connectedTransitions.add(animation);\n  const scopes = leaving ? [entering, leaving] : [entering];\n  const play = animation.play.bind(animation);\n  const progressStart = animation.progressStart.bind(animation);\n  const progressStep = animation.progressStep.bind(animation);\n  const progressEnd = animation.progressEnd.bind(animation);\n  const destroy = animation.destroy.bind(animation);\n  let release: ((canceled?: boolean) => void) | undefined;\n  let preparation: Promise<void> | undefined;\n  let disposed = false;\n  let interactiveReady = false;\n  let step: number | undefined;\n  let end: Parameters<Animation['progressEnd']> | undefined;\n  const prepare = () =>\n    (preparation ??= suspendNativeUI(scopes).then((resume) => {\n      if (disposed) resume(true);\n      else release = resume;\n    }));\n  const finish = (canceled = false) => {\n    release?.(canceled);\n    release = undefined;\n    preparation = undefined;\n  };\n  animation.onFinish((step) => finish(step === 0));\n  animation.play = async (options) => {\n    await prepare();\n    if (disposed) return;\n    try {\n      await play(options);\n    } finally {\n      finish();\n    }\n  };\n  animation.progressStart = (...args) => {\n    interactiveReady = false;\n    step = undefined;\n    end = undefined;\n    void prepare().then(() => {\n      if (disposed) return;\n      progressStart(...args);\n      interactiveReady = true;\n      if (step !== undefined) progressStep(step);\n      if (end) progressEnd(...end);\n    });\n    return animation;\n  };\n  animation.progressStep = (value) => {\n    step = value;\n    if (interactiveReady) progressStep(value);\n    return animation;\n  };\n  animation.progressEnd = (...args) => {\n    end = args;\n    if (interactiveReady) progressEnd(...args);\n    return animation;\n  };\n  animation.destroy = (...args) => {\n    disposed = true;\n    finish(true);\n    return destroy(...args);\n  };\n};\n"],"mappings":";;;;;;;AASA,MAAa,0BACV,aACA,QAAQ,SAAS;CAChB,MAAM,YAAY,QAAQ,QAAQ,IAAI;CACtC,IAAI,MAAM,YAAY,0BAA0B,WAAW,KAAK,YAAY,KAAK,SAAS;CAC1F,OAAO;AACT;AAEF,MAAM,uCAAuB,IAAI,QAAmB;AACpD,MAAM,0CAA0B,IAAI,QAAmB;;AAGvD,MAAa,6BAA6B,WAAsB,UAAuB,YAA0B;CAC/G,IAAI,WAAW,CAAC,wBAAwB,IAAI,SAAS,GAAG;EACtD,wBAAwB,IAAI,SAAS;EACrC,UAAU,UAAU,SAAS;GAC3B,IAAI,SAAS,GAAG,QAAQ,cAAc,IAAI,YAAY,mCAAmC;IAAE,SAAS;IAAM,QAAQ,EAAE,SAAS;GAAE,CAAC,CAAC;EACnI,CAAC;CACH;CACA,IAAI,qBAAqB,IAAI,SAAS,KAAK,CAAC,uBAAuB,SAAS,aAAa,GAAG;CAC5F,qBAAqB,IAAI,SAAS;CAClC,MAAM,SAAS,UAAU,CAAC,UAAU,OAAO,IAAI,CAAC,QAAQ;CACxD,MAAM,OAAO,UAAU,KAAK,KAAK,SAAS;CAC1C,MAAM,gBAAgB,UAAU,cAAc,KAAK,SAAS;CAC5D,MAAM,eAAe,UAAU,aAAa,KAAK,SAAS;CAC1D,MAAM,cAAc,UAAU,YAAY,KAAK,SAAS;CACxD,MAAM,UAAU,UAAU,QAAQ,KAAK,SAAS;CAChD,IAAI;CACJ,IAAI;CACJ,IAAI,WAAW;CACf,IAAI,mBAAmB;CACvB,IAAI;CACJ,IAAI;CACJ,MAAM,gBACH,gBAAA,cAAgB,gBAAgB,MAAM,CAAC,CAAC,MAAM,WAAW;EACxD,IAAI,UAAU,OAAO,IAAI;OACpB,UAAU;CACjB,CAAC;CACH,MAAM,UAAU,WAAW,UAAU;EACnC,UAAU,QAAQ;EAClB,UAAU,KAAA;EACV,cAAc,KAAA;CAChB;CACA,UAAU,UAAU,SAAS,OAAO,SAAS,CAAC,CAAC;CAC/C,UAAU,OAAO,OAAO,YAAY;EAClC,MAAM,QAAQ;EACd,IAAI,UAAU;EACd,IAAI;GACF,MAAM,KAAK,OAAO;EACpB,UAAU;GACR,OAAO;EACT;CACF;CACA,UAAU,iBAAiB,GAAG,SAAS;EACrC,mBAAmB;EACnB,OAAO,KAAA;EACP,MAAM,KAAA;EACN,QAAa,CAAC,CAAC,WAAW;GACxB,IAAI,UAAU;GACd,cAAc,GAAG,IAAI;GACrB,mBAAmB;GACnB,IAAI,SAAS,KAAA,GAAW,aAAa,IAAI;GACzC,IAAI,KAAK,YAAY,GAAG,GAAG;EAC7B,CAAC;EACD,OAAO;CACT;CACA,UAAU,gBAAgB,UAAU;EAClC,OAAO;EACP,IAAI,kBAAkB,aAAa,KAAK;EACxC,OAAO;CACT;CACA,UAAU,eAAe,GAAG,SAAS;EACnC,MAAM;EACN,IAAI,kBAAkB,YAAY,GAAG,IAAI;EACzC,OAAO;CACT;CACA,UAAU,WAAW,GAAG,SAAS;EAC/B,WAAW;EACX,OAAO,IAAI;EACX,OAAO,QAAQ,GAAG,IAAI;CACxB;AACF"}
+{"version":3,"file":"native-ui.js","names":[],"sources":["../../src/transition/native-ui.ts"],"sourcesContent":["import type { NativeUITransitionRelease } from '@rdlabo/capacitor-native-ui/integration';\nimport type { Animation } from '@ionic/core/components';\nimport { hasNativeUIIntegration, suspendNativeUI, VERTICAL_BARS_TRANSITION_CANCELED } from '@rdlabo/capacitor-native-ui/integration';\nimport type { AnimationBuilder } from '@ionic/core/components';\n\n/**\n * Keeps an existing Ionic navigation animation and coordinates native control handoff.\n * Register the returned builder as navAnimation. Do not use it for overlay animations.\n * The builder must return a fresh Animation for each navigation; Ionic destroys it afterward.\n */\nexport const withNativeUITransition =\n  (builder: AnimationBuilder): AnimationBuilder =>\n  (baseEl, opts) => {\n    const animation = builder(baseEl, opts);\n    if (opts?.enteringEl) connectNativeUITransition(animation, opts.enteringEl, opts.leavingEl, opts.direction);\n    return animation;\n  };\n\nconst connectedTransitions = new WeakSet<Animation>();\nconst cancellationTransitions = new WeakSet<Animation>();\n\n/** Ionic write hooks cannot await the bridge. Gate playback, including interactive playback. */\nexport const connectNativeUITransition = (\n  animation: Animation,\n  entering: HTMLElement,\n  leaving?: HTMLElement,\n  direction?: 'forward' | 'back' | 'root',\n) => {\n  if (leaving && !cancellationTransitions.has(animation)) {\n    cancellationTransitions.add(animation);\n    animation.onFinish((step) => {\n      if (step === 0) leaving.dispatchEvent(new CustomEvent(VERTICAL_BARS_TRANSITION_CANCELED, { bubbles: true, detail: { entering } }));\n    });\n  }\n  if (connectedTransitions.has(animation) || !hasNativeUIIntegration(entering.ownerDocument)) return;\n  connectedTransitions.add(animation);\n  const scopes = leaving ? [entering, leaving] : [entering];\n  const play = animation.play.bind(animation);\n  const progressStart = animation.progressStart.bind(animation);\n  const progressStep = animation.progressStep.bind(animation);\n  const progressEnd = animation.progressEnd.bind(animation);\n  const destroy = animation.destroy.bind(animation);\n  let release: NativeUITransitionRelease | undefined;\n  let frame = 0;\n  const win = entering.ownerDocument.defaultView;\n  const webAnimations = (value: Animation): globalThis.Animation[] => [\n    ...value.getWebAnimations(),\n    ...value.childAnimations.flatMap(webAnimations),\n  ];\n  const track = () => {\n    if (!release?.progress || !win) return;\n    const sample = () => {\n      const progress = webAnimations(animation)\n        .map((value) => value.effect?.getComputedTiming().progress)\n        .find((value) => value != null);\n      if (progress != null) release?.progress?.(progress);\n      frame = win.requestAnimationFrame(sample);\n    };\n    frame = win.requestAnimationFrame(sample);\n  };\n  let preparation: Promise<void> | undefined;\n  let disposed = false;\n  let interactiveReady = false;\n  let step: number | undefined;\n  let end: Parameters<Animation['progressEnd']> | undefined;\n  const prepare = (interactive = false) =>\n    (preparation ??= suspendNativeUI(scopes, {\n      navigation: true,\n      ...(direction ? { direction } : {}),\n      ...(interactive ? { interactive: true } : {}),\n    }).then((resume) => {\n      if (disposed) resume(true);\n      else release = resume;\n    }));\n  const finish = (canceled = false) => {\n    if (frame) win?.cancelAnimationFrame(frame);\n    frame = 0;\n    release?.progress?.(canceled ? 0 : 1);\n    release?.(canceled);\n    release = undefined;\n    preparation = undefined;\n  };\n  animation.onFinish((step) => finish(step === 0));\n  animation.play = async (options) => {\n    await prepare();\n    if (disposed) return;\n    try {\n      const playing = play(options);\n      track();\n      await playing;\n    } finally {\n      finish();\n    }\n  };\n  animation.progressStart = (...args) => {\n    interactiveReady = false;\n    step = undefined;\n    end = undefined;\n    void prepare(true).then(() => {\n      if (disposed) return;\n      progressStart(...args);\n      track();\n      interactiveReady = true;\n      if (step !== undefined) {\n        progressStep(step);\n        release?.progress?.(step);\n      }\n      if (end) {\n        release?.finishGesture?.(end[0] === 1);\n        progressEnd(...end);\n      }\n    });\n    return animation;\n  };\n  animation.progressStep = (value) => {\n    step = value;\n    if (interactiveReady) {\n      progressStep(value);\n      release?.progress?.(value);\n    }\n    return animation;\n  };\n  animation.progressEnd = (...args) => {\n    end = args;\n    if (interactiveReady) {\n      release?.finishGesture?.(args[0] === 1);\n      progressEnd(...args);\n    }\n    return animation;\n  };\n  animation.destroy = (...args) => {\n    disposed = true;\n    finish(true);\n    return destroy(...args);\n  };\n};\n"],"mappings":"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"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@rdlabo/ionic-theme-ios27",
   "private": false,
-  "version": "2.0.0-beta.pr316.sha812440877761",
+  "version": "2.0.0-beta.pr317.sha707be106d55b",
   "description": "iOS27 Theme for Ionic Framework",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -46,7 +46,7 @@
   },
   "homepage": "https://docs.rdlabo.dev/projects/ionic-theme-ios27",
   "dependencies": {
-    "@rdlabo/capacitor-native-ui": "2.0.0-beta.pr316.sha812440877761",
+    "@rdlabo/capacitor-native-ui": "2.0.0-beta.pr317.sha707be106d55b",
     "@rdlabo/ionic-theme-utils": "0.1.5",
     "@stencil/core": "^4.43.5",
     "ionicons": "^8.1.0"

package/src/transition/ios.transition.ts

@@ -1,4 +1,5 @@
 import { createIosTransitionAnimation, shadow } from '@rdlabo/ionic-theme-utils';
+import { createAnimation } from '@ionic/core/components/index.js';
 import type { Animation } from '@ionic/core/components';
 import type { TransitionOptions } from './index';
 import { getIonPageElement } from './index';
@@ -24,6 +25,48 @@ export const setConfig = (config: Partial<IosTransitionConfig>): void => {
   if (config.radius !== undefined) nativeWebViewMetrics.radius = config.radius;
 };
 
-export const iosTransitionAnimation: (navEl: HTMLElement, opts: TransitionOptions) => Animation = withNativeUITransition(
-  createIosTransitionAnimation<TransitionOptions>(transitionConfig),
-);
+const buildTransition = createIosTransitionAnimation<TransitionOptions>(transitionConfig);
+export const iosTransitionAnimation: (navEl: HTMLElement, opts: TransitionOptions) => Animation = withNativeUITransition((navEl, opts) => {
+  const animation = buildTransition(navEl, opts);
+  const backing = 'var(--ion-background-color, #fff)';
+  let ownsBacking = false;
+  // Translucent pages expose the outlet as they move. Keep that backing surface
+  // in the page theme instead of exposing WKWebView's transparent native backing.
+  animation.beforeAddWrite(() => {
+    if (navEl.style.backgroundColor) return;
+    const style = navEl.ownerDocument.defaultView?.getComputedStyle(navEl);
+    if (!style || !['transparent', 'rgba(0, 0, 0, 0)'].includes(style.backgroundColor)) return;
+    if (style.backgroundImage && style.backgroundImage !== 'none') return;
+    navEl.style.backgroundColor = backing;
+    ownsBacking = true;
+  });
+  const restoreBacking = () => {
+    if (ownsBacking && navEl.style.backgroundColor === backing && !navEl.style.getPropertyPriority('background-color'))
+      navEl.style.removeProperty('background-color');
+    ownsBacking = false;
+  };
+  animation.afterAddWrite(restoreBacking);
+  // Ionic destroy does not run after-write hooks when playback is interrupted.
+  const destroy = animation.destroy.bind(animation);
+  animation.destroy = (...args) => {
+    restoreBacking();
+    return destroy(...args);
+  };
+  // Translucent pages move as a whole, but outgoing toolbar actions still need
+  // the same exit fade as opaque headers when they return from native to Web.
+  const buttons = opts.leavingEl?.querySelectorAll(
+    ':scope > ion-header.header-translucent ion-buttons, :scope > ion-header.header-translucent ion-toolbar > ion-button',
+  );
+  if (buttons?.length)
+    animation.addAnimation(
+      createAnimation()
+        .addElement(buttons)
+        .keyframes([
+          { offset: 0, opacity: 1 },
+          // Finish the exit before the incoming title occupies this toolbar.
+          { offset: 0.5, opacity: 0 },
+          { offset: 1, opacity: 0 },
+        ]),
+    );
+  return animation;
+});

package/src/transition/native-ui.ts

@@ -1,3 +1,4 @@
+import type { NativeUITransitionRelease } from '@rdlabo/capacitor-native-ui/integration';
 import type { Animation } from '@ionic/core/components';
 import { hasNativeUIIntegration, suspendNativeUI, VERTICAL_BARS_TRANSITION_CANCELED } from '@rdlabo/capacitor-native-ui/integration';
 import type { AnimationBuilder } from '@ionic/core/components';
@@ -11,7 +12,7 @@ export const withNativeUITransition =
   (builder: AnimationBuilder): AnimationBuilder =>
   (baseEl, opts) => {
     const animation = builder(baseEl, opts);
-    if (opts?.enteringEl) connectNativeUITransition(animation, opts.enteringEl, opts.leavingEl);
+    if (opts?.enteringEl) connectNativeUITransition(animation, opts.enteringEl, opts.leavingEl, opts.direction);
     return animation;
   };
 
@@ -19,7 +20,12 @@ const connectedTransitions = new WeakSet<Animation>();
 const cancellationTransitions = new WeakSet<Animation>();
 
 /** Ionic write hooks cannot await the bridge. Gate playback, including interactive playback. */
-export const connectNativeUITransition = (animation: Animation, entering: HTMLElement, leaving?: HTMLElement) => {
+export const connectNativeUITransition = (
+  animation: Animation,
+  entering: HTMLElement,
+  leaving?: HTMLElement,
+  direction?: 'forward' | 'back' | 'root',
+) => {
   if (leaving && !cancellationTransitions.has(animation)) {
     cancellationTransitions.add(animation);
     animation.onFinish((step) => {
@@ -34,18 +40,42 @@ export const connectNativeUITransition = (animation: Animation, entering: HTMLEl
   const progressStep = animation.progressStep.bind(animation);
   const progressEnd = animation.progressEnd.bind(animation);
   const destroy = animation.destroy.bind(animation);
-  let release: ((canceled?: boolean) => void) | undefined;
+  let release: NativeUITransitionRelease | undefined;
+  let frame = 0;
+  const win = entering.ownerDocument.defaultView;
+  const webAnimations = (value: Animation): globalThis.Animation[] => [
+    ...value.getWebAnimations(),
+    ...value.childAnimations.flatMap(webAnimations),
+  ];
+  const track = () => {
+    if (!release?.progress || !win) return;
+    const sample = () => {
+      const progress = webAnimations(animation)
+        .map((value) => value.effect?.getComputedTiming().progress)
+        .find((value) => value != null);
+      if (progress != null) release?.progress?.(progress);
+      frame = win.requestAnimationFrame(sample);
+    };
+    frame = win.requestAnimationFrame(sample);
+  };
   let preparation: Promise<void> | undefined;
   let disposed = false;
   let interactiveReady = false;
   let step: number | undefined;
   let end: Parameters<Animation['progressEnd']> | undefined;
-  const prepare = () =>
-    (preparation ??= suspendNativeUI(scopes).then((resume) => {
+  const prepare = (interactive = false) =>
+    (preparation ??= suspendNativeUI(scopes, {
+      navigation: true,
+      ...(direction ? { direction } : {}),
+      ...(interactive ? { interactive: true } : {}),
+    }).then((resume) => {
       if (disposed) resume(true);
       else release = resume;
     }));
   const finish = (canceled = false) => {
+    if (frame) win?.cancelAnimationFrame(frame);
+    frame = 0;
+    release?.progress?.(canceled ? 0 : 1);
     release?.(canceled);
     release = undefined;
     preparation = undefined;
@@ -55,7 +85,9 @@ export const connectNativeUITransition = (animation: Animation, entering: HTMLEl
     await prepare();
     if (disposed) return;
     try {
-      await play(options);
+      const playing = play(options);
+      track();
+      await playing;
     } finally {
       finish();
     }
@@ -64,23 +96,36 @@ export const connectNativeUITransition = (animation: Animation, entering: HTMLEl
     interactiveReady = false;
     step = undefined;
     end = undefined;
-    void prepare().then(() => {
+    void prepare(true).then(() => {
       if (disposed) return;
       progressStart(...args);
+      track();
       interactiveReady = true;
-      if (step !== undefined) progressStep(step);
-      if (end) progressEnd(...end);
+      if (step !== undefined) {
+        progressStep(step);
+        release?.progress?.(step);
+      }
+      if (end) {
+        release?.finishGesture?.(end[0] === 1);
+        progressEnd(...end);
+      }
     });
     return animation;
   };
   animation.progressStep = (value) => {
     step = value;
-    if (interactiveReady) progressStep(value);
+    if (interactiveReady) {
+      progressStep(value);
+      release?.progress?.(value);
+    }
     return animation;
   };
   animation.progressEnd = (...args) => {
     end = args;
-    if (interactiveReady) progressEnd(...args);
+    if (interactiveReady) {
+      release?.finishGesture?.(args[0] === 1);
+      progressEnd(...args);
+    }
     return animation;
   };
   animation.destroy = (...args) => {