@rdlabo/ionic-theme-ios27 2.0.0-beta.pr313.shae1c646a70d58 → 2.0.0-beta.pr317.sha707be106d55b

package/README.md

@@ -1,7 +1,7 @@
 # Ionic Theme iOS27
 
 Install with `npm install @rdlabo/ionic-theme-ios27 @erkamyaman/capacitor-foldable`. For 1.x, use the [v1.2.1 guide](https://github.com/rdlabo-dev/ionic-theme-ios27/tree/ios27-v1.2.1).
-A theme for Ionic apps that brings iOS 27 Liquid Glass and motion to the Web. Capacitor iOS apps can also opt into a preview Native UI for supported controls.
+A theme for Ionic apps that brings iOS 27 Liquid Glass and motion to the Web. Capacitor iOS apps can also opt into Native UI for supported controls, officially supported starting with 2.0.0.
 
 **[Ionic 9 demo](https://ionic-theme-ios27.rdlabo.dev/) · [Ionic 8 demo](https://ionic8-theme-ios27.rdlabo.dev/) · [Setup guide](docs/setup.md)**
 

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":";;;;;;;AAUA,MAAa,0BACV,aACA,QAAQ,SAAS;CAChB,MAAM,YAAY,QAAQ,QAAQ,IAAI;CACtC,IAAI,MAAM,YAAY,0BAA0B,WAAW,KAAK,YAAY,KAAK,WAAW,KAAK,SAAS;CAC1G,OAAO;AACT;AAEF,MAAM,uCAAuB,IAAI,QAAmB;AACpD,MAAM,0CAA0B,IAAI,QAAmB;;AAGvD,MAAa,6BACX,WACA,UACA,SACA,cACG;CACH,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,QAAQ;CACZ,MAAM,MAAM,SAAS,cAAc;CACnC,MAAM,iBAAiB,UAA6C,CAClE,GAAG,MAAM,iBAAiB,GAC1B,GAAG,MAAM,gBAAgB,QAAQ,aAAa,CAChD;CACA,MAAM,cAAc;EAClB,IAAI,CAAC,SAAS,YAAY,CAAC,KAAK;EAChC,MAAM,eAAe;GACnB,MAAM,WAAW,cAAc,SAAS,CAAC,CACtC,KAAK,UAAU,MAAM,QAAQ,kBAAkB,CAAC,CAAC,QAAQ,CAAC,CAC1D,MAAM,UAAU,SAAS,IAAI;GAChC,IAAI,YAAY,MAAM,SAAS,WAAW,QAAQ;GAClD,QAAQ,IAAI,sBAAsB,MAAM;EAC1C;EACA,QAAQ,IAAI,sBAAsB,MAAM;CAC1C;CACA,IAAI;CACJ,IAAI,WAAW;CACf,IAAI,mBAAmB;CACvB,IAAI;CACJ,IAAI;CACJ,MAAM,WAAW,cAAc,UAC5B,gBAAA,cAAgB,gBAAgB,QAAQ;EACvC,YAAY;EACZ,GAAI,YAAY,EAAE,UAAU,IAAI,CAAC;EACjC,GAAI,cAAc,EAAE,aAAa,KAAK,IAAI,CAAC;CAC7C,CAAC,CAAC,CAAC,MAAM,WAAW;EAClB,IAAI,UAAU,OAAO,IAAI;OACpB,UAAU;CACjB,CAAC;CACH,MAAM,UAAU,WAAW,UAAU;EACnC,IAAI,OAAO,KAAK,qBAAqB,KAAK;EAC1C,QAAQ;EACR,SAAS,WAAW,WAAW,IAAI,CAAC;EACpC,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,UAAU,KAAK,OAAO;GAC5B,MAAM;GACN,MAAM;EACR,UAAU;GACR,OAAO;EACT;CACF;CACA,UAAU,iBAAiB,GAAG,SAAS;EACrC,mBAAmB;EACnB,OAAO,KAAA;EACP,MAAM,KAAA;EACN,QAAa,IAAI,CAAC,CAAC,WAAW;GAC5B,IAAI,UAAU;GACd,cAAc,GAAG,IAAI;GACrB,MAAM;GACN,mBAAmB;GACnB,IAAI,SAAS,KAAA,GAAW;IACtB,aAAa,IAAI;IACjB,SAAS,WAAW,IAAI;GAC1B;GACA,IAAI,KAAK;IACP,SAAS,gBAAgB,IAAI,OAAO,CAAC;IACrC,YAAY,GAAG,GAAG;GACpB;EACF,CAAC;EACD,OAAO;CACT;CACA,UAAU,gBAAgB,UAAU;EAClC,OAAO;EACP,IAAI,kBAAkB;GACpB,aAAa,KAAK;GAClB,SAAS,WAAW,KAAK;EAC3B;EACA,OAAO;CACT;CACA,UAAU,eAAe,GAAG,SAAS;EACnC,MAAM;EACN,IAAI,kBAAkB;GACpB,SAAS,gBAAgB,KAAK,OAAO,CAAC;GACtC,YAAY,GAAG,IAAI;EACrB;EACA,OAAO;CACT;CACA,UAAU,WAAW,GAAG,SAAS;EAC/B,WAAW;EACX,OAAO,IAAI;EACX,OAAO,QAAQ,GAAG,IAAI;CACxB;AACF"}

package/docs/features.md

@@ -31,9 +31,9 @@ ion-textarea label.textarea-wrapper {
 }
 ```
 
-## Native UI (Preview)
+## Native UI
 
-Once your theme is working, [add Native UI](add-native-ui.md) to render supported fixed controls with UIKit and SwiftUI on iOS. Keep theme styles for Web content and fallback controls. Native UI is an optional preview; adding styles alone does not enable it.
+Once your theme is working, [add Native UI](add-native-ui.md) to render supported fixed controls with UIKit and SwiftUI on iOS. Keep theme styles for Web content and fallback controls. Native UI is officially supported starting with 2.0.0 and remains opt-in; adding styles alone does not enable it.
 
 ## Selective component imports
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@rdlabo/ionic-theme-ios27",
   "private": false,
-  "version": "2.0.0-beta.pr313.shae1c646a70d58",
+  "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.pr313.shae1c646a70d58",
+    "@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) => {