@rdlabo/ionic-theme-ios27 1.2.1 → 2.0.0-beta.pr303.shaf4f5ca16816f

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@rdlabo/ionic-theme-ios27",
   "private": false,
-  "version": "1.2.1",
+  "version": "2.0.0-beta.pr303.shaf4f5ca16816f",
   "description": "iOS27 Theme for Ionic Framework",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -12,40 +12,25 @@
       "import": "./dist/index.js"
     },
     "./dist/css/*": "./dist/css/*",
-    "./src/styles/*": "./src/styles/*",
-    "./native": {
-      "types": "./dist/native/index.d.ts",
-      "import": "./dist/native/index.js"
-    },
-    "./vertical-bars": {
-      "types": "./dist/vertical-bars.d.ts",
-      "import": "./dist/vertical-bars.js"
-    }
+    "./src/styles/*": "./src/styles/*"
   },
   "files": [
     "dist",
     "src",
-    "package.json",
-    "docs",
-    "ios",
-    "Package.swift"
+    "LICENSE",
+    "README.md",
+    "docs"
   ],
   "scripts": {
-    "build": "npm run docgen && npm run build:css && npm run build:ts",
     "prebuild:css": "rdlabo-copy-structured-list src/styles/utils/structured-list.scss",
     "build:css": "rm -rf dist/css && sass src/styles:dist/css --style=compressed --no-source-map",
     "build:ts": "tsc --noEmit && rdlabo-build-theme",
-    "docgen": "docgen --project tsconfig.docgen.json --api NativeUIShellHandle --output-readme docs/native-ui-shell.md && docgen --project tsconfig.docgen.json --api VerticalControlAreaHandle --output-readme docs/vertical-bars.md",
-    "build:demo": "npm run build && cd demo && npm install && npm run build -- --configuration=production",
-    "lint": "prettier --check \"./**/*.{scss,ts}\" &&  prettier --parser angular --check \"./**/*.html\"",
-    "fmt": "prettier --write \"./**/*.{scss,ts}\" &&  prettier --parser angular --write \"./**/*.html\"",
-    "release": "np --no-tests --no-publish",
-    "prepublishOnly": "npm run build",
-    "test:esm": "rdlabo-check-esm"
+    "build": "rm -rf dist && npm run build:css && npm run build:ts"
   },
   "repository": {
     "type": "git",
-    "url": "git+ssh://git@github.com/rdlabo-dev/ionic-theme-ios27.git"
+    "url": "git+ssh://git@github.com/rdlabo-dev/ionic-theme-ios27.git",
+    "directory": "packages/theme-ios27"
   },
   "keywords": [
     "ionic",
@@ -61,20 +46,10 @@
   },
   "homepage": "https://docs.rdlabo.dev/projects/ionic-theme-ios27",
   "dependencies": {
-    "@rdlabo/ionic-theme-utils": "0.1.2"
-  },
-  "devDependencies": {
-    "@capacitor/core": "^8.5.2",
-    "@ionic/angular": "^9.0.0",
-    "@rdlabo/capacitor-docgen": "^0.4.1",
-    "husky": "^9.1.7",
-    "lint-staged": "^16.2.1",
-    "np": "^10.2.0",
-    "prettier": "^3.6.2",
-    "sass": "^1.93.2",
-    "tsdown": "^0.23.0",
-    "typescript": "^5.9.3",
-    "wrangler": "^4.125.0"
+    "@rdlabo/capacitor-native-ui": "2.0.0-beta.pr303.shaf4f5ca16816f",
+    "@rdlabo/ionic-theme-utils": "0.1.4",
+    "@stencil/core": "^4.43.5",
+    "ionicons": "^8.1.0"
   },
   "peerDependencies": {
     "@capacitor/core": ">=8.0.0 <9",
@@ -85,10 +60,5 @@
       "optional": true
     }
   },
-  "capacitor": {
-    "ios": {
-      "src": "ios"
-    }
-  },
   "type": "module"
 }

package/src/index.ts

@@ -8,7 +8,7 @@ export {
 export * from './tab-bar-searchable';
 export * from './searchbar';
 export * from './transition/ios.transition';
-export { withNativeUIShellTransition } from './native-integration/transition';
+export { withNativeUITransition } from './transition/native-ui';
 export { registerSegmentEffect } from './segment';
 
 export const registerTabBarEffect = (targetElement: HTMLElement): registeredEffect | undefined => {
@@ -75,3 +75,5 @@ export const registerTabBarEffect = (targetElement: HTMLElement): registeredEffe
     },
   };
 };
+
+export { setVerticalBarsLayout, applyFoldStateClasses, type VerticalBarsLayout, type FoldState } from './layout';

package/src/layout/index.ts

@@ -0,0 +1,29 @@
+/** Web layout inputs. Device capabilities belong to the application or native plugin. */
+export interface VerticalBarsLayout {
+  edge: 'leading' | 'trailing' | null;
+  inset?: number;
+}
+
+/** Applies only Web layout. Does not enable Native UI or report native availability. */
+export const setVerticalBarsLayout = (layout: VerticalBarsLayout, root?: HTMLElement, rtl?: boolean): void => {
+  const app = root ?? (typeof document === 'undefined' ? undefined : document.querySelector<HTMLElement>('ion-app'));
+  if (!app) return;
+  const { edge, inset = 0 } = layout;
+  const direction = rtl ?? app.closest('[dir]')?.getAttribute('dir') === 'rtl';
+  app.classList.toggle('ios-theme-vertical-bars', edge !== null);
+  app.classList.toggle('ios-theme-vertical-bars-left', edge !== null && (edge === 'leading') !== direction);
+  if (edge && Number.isFinite(inset) && inset > 0) app.style.setProperty('--ios-theme-vertical-bars-native-inset', `${inset}px`);
+  else app.style.removeProperty('--ios-theme-vertical-bars-native-inset');
+  app.ownerDocument.defaultView?.dispatchEvent(new Event('nativeUIRefresh'));
+};
+
+export interface FoldState {
+  state: 'flat' | 'half-opened' | 'closed';
+  hingeBounds?: { x: number; y: number; width: number; height: number };
+}
+
+/** Maps application-supplied posture to theme CSS, without subscribing to a device plugin. */
+export function applyFoldStateClasses(root: HTMLElement, fold: FoldState): void {
+  for (const state of ['flat', 'half-opened', 'closed']) root.classList.toggle(`ios-theme-fold-${state}`, fold.state === state);
+  root.classList.toggle('ios-theme-fold-expanded', fold.state === 'half-opened' || (fold.state === 'flat' && !!fold.hingeBounds));
+}

package/src/segment/index.ts

@@ -1,5 +1,5 @@
 import type { registeredEffect } from '../sheets-of-glass/interfaces';
-import { isNativeUIShell } from '../native-integration';
+import { isNativeUI } from '@rdlabo/capacitor-native-ui/integration';
 
 interface LensRect {
   x: number;
@@ -216,7 +216,7 @@ export const registerSegmentEffect = (targetElement: HTMLElement): registeredEff
     );
   };
   const down = (event: PointerEvent) => {
-    if (pointer || event.button !== 0 || segment.disabled || reducedMotion.matches || isNativeUIShell(segment)) return;
+    if (pointer || event.button !== 0 || segment.disabled || reducedMotion.matches || isNativeUI(segment)) return;
     const button = (event.target as Element).closest<HTMLIonSegmentButtonElement>('ion-segment-button');
     const old = selected();
     if (!button || button.disabled || !old) return;
@@ -368,7 +368,7 @@ export const registerSegmentEffect = (targetElement: HTMLElement): registeredEff
     { signal: listeners.signal },
   );
   reducedMotion.addEventListener('change', abort, { signal: listeners.signal });
-  segment.addEventListener('nativeUIShellChange', abort, { signal: listeners.signal });
+  segment.addEventListener('nativeUIChange', abort, { signal: listeners.signal });
   return {
     destroy: () => {
       destroyed = true;

package/src/sheets-of-glass/index.ts

@@ -2,7 +2,7 @@ import { AnimationPosition, EffectScales, registeredEffect } from './interfaces'
 import { createAnimation, createGesture } from '@ionic/core/components/index.js';
 import type { Animation, Gesture, GestureDetail } from '@ionic/core/components';
 import { changeSelectedElement, cloneElement, getStep } from '../utils';
-import { isNativeUIShell } from '../native-integration';
+import { isNativeUI } from '@rdlabo/capacitor-native-ui/integration';
 import {
   animationRect,
   createMoveAnimation,
@@ -97,7 +97,7 @@ export const registerEffect = (
    * They terminate the gesture using native events as a fallback.
    */
   const onPointerDown = (event: PointerEvent) => {
-    if (isNativeUIShell(targetElement)) return;
+    if (isNativeUI(targetElement)) return;
     stopTabPress();
     tabDragging = false;
     releaseAnimation?.destroy();
@@ -181,7 +181,7 @@ export const registerEffect = (
   };
 
   const onStartGesture = (detail: GestureDetail): boolean | undefined => {
-    if (isNativeUIShell(targetElement)) return false;
+    if (isNativeUI(targetElement)) return false;
     currentTouchedElement = ((detail.event.target as HTMLElement).closest(effectTagName) as HTMLElement) || undefined;
     const tabSelectedElement = targetElement.querySelector(`${effectTagName}.${selectedClassName}`);
     if (
@@ -400,11 +400,11 @@ export const registerEffect = (
   };
 
   const nativeChanged = () => {
-    gesture.enable(!isNativeUIShell(targetElement));
+    gesture.enable(!isNativeUI(targetElement));
     cancelActiveGesture();
   };
-  targetElement.addEventListener('nativeUIShellChange', nativeChanged);
-  if (isNativeUIShell(targetElement)) nativeChanged();
+  targetElement.addEventListener('nativeUIChange', nativeChanged);
+  if (isNativeUI(targetElement)) nativeChanged();
 
   return {
     destroy: () => {
@@ -413,7 +413,7 @@ export const registerEffect = (
       // Remove event listeners
       targetElement.removeEventListener('pointerdown', onPointerDown);
       targetElement.removeEventListener('click', onClick, true);
-      targetElement.removeEventListener('nativeUIShellChange', nativeChanged);
+      targetElement.removeEventListener('nativeUIChange', nativeChanged);
 
       // Destroy gesture
       if (gesture) {

package/src/styles/components/ion-toolbar.scss

@@ -118,7 +118,7 @@ ion-toolbar.ios:not(.ios-theme-disabled, .ios26-disabled) {
     margin-inline: 12px;
   }
   // Rail sources leave toolbar layout; ordinary native projection retains it.
-  $visible: ':not([hidden], .ios-theme-native-ui-shell-prehidden, [data-native-ui-shell][data-native-ui-shell-vertical-bars], ion-menu-button.menu-button-hidden, ion-back-button:not(.show-back-button))';
+  $visible: ':not([hidden], .native-ui-prehidden, [data-native-ui-projected][data-native-ui-vertical-bars], ion-menu-button.menu-button-hidden, ion-back-button:not(.show-back-button))';
   $button: ':is(ion-button, ion-back-button)#{$visible}';
   $group: 'ion-buttons#{$visible}';
   $action: ':is(#{$button}, #{$group}:has(> #{$visible}))';

package/src/styles/vertical-bars.scss

@@ -95,12 +95,9 @@ ion-app.ios-theme-vertical-bars
   // Reserve the final layout before a page transition, using the same prehide
   // decision as its rail controls. Horizontal native projection keeps its space.
   // Titles, custom content and horizontal-only controls keep the toolbar visible.
-  &:not([data-native-ui-shell-toolbar-text]):has(
-      > .ios-theme-native-ui-shell-prehidden,
-      > ion-buttons > .ios-theme-native-ui-shell-prehidden
-    ):not(:has(> :not(ion-buttons, .ios-theme-native-ui-shell-prehidden))):not(
-      :has(> ion-buttons:not(.ios-theme-native-ui-shell-prehidden) > :not(.ios-theme-native-ui-shell-prehidden))
-    ) {
+  &:not([data-native-ui-toolbar-text]):has(> .native-ui-prehidden, > ion-buttons > .native-ui-prehidden):not(
+      :has(> :not(ion-buttons, .native-ui-prehidden))
+    ):not(:has(> ion-buttons:not(.native-ui-prehidden) > :not(.native-ui-prehidden))) {
     display: none;
   }
 
@@ -294,20 +291,20 @@ ion-app.ios-theme-vertical-bars.ios-theme-vertical-bars-left
   left: calc(24px + (48px - var(--ios-theme-side-tab-bar-width)) / 2);
 }
 
-.ios-theme-native-ui-shell-prehidden {
+.native-ui-prehidden {
   position: absolute !important;
   visibility: hidden !important;
 }
 
 // Hide an entering back source until JS decides whether it belongs in the rail.
-html.ios-theme-native-ui-shell-prehide
+html.native-ui-prehide
   ion-app.ios-theme-vertical-bars
   ion-back-button:not(
     [icon],
     [color],
     .ios-theme-vertical-bars-back-web-owned,
-    .ios-theme-shell-disabled,
-    [data-shell='disabled'],
+    .native-ui-disabled,
+    [data-native-ui='disabled'],
     .ios-theme-disabled,
     .ios26-disabled,
     .ios-theme-vertical-bars-back-button-projection
@@ -319,8 +316,8 @@ html.ios-theme-native-ui-shell-prehide
       ion-header[collapse] *,
       ion-footer[collapse] *,
       ion-buttons.ios-theme-horizontal-only *,
-      .ios-theme-shell-disabled *,
-      [data-shell='disabled'] *,
+      .native-ui-disabled *,
+      [data-native-ui='disabled'] *,
       .ios-theme-disabled *,
       .ios26-disabled *
     )
@@ -334,7 +331,7 @@ ion-app.ios-theme-vertical-bars ion-modal.ios-theme-vertical-bars-modal.ios-them
   ion-toolbar:is(.ios, .md):not(.ios-theme-disabled, .ios26-disabled):not(
       :where(ion-menu *, ion-modal:not(.ios-theme-vertical-bars-modal) *, ion-popover *)
     )
-    ion-back-button:is(.ios, .md)[data-native-ui-shell]:not(
+    ion-back-button:is(.ios, .md)[data-native-ui-projected]:not(
       .ios-theme-disabled,
       .ios26-disabled,
       .ios-theme-vertical-bars-back-button-projection
@@ -345,7 +342,7 @@ ion-app.ios-theme-vertical-bars ion-modal.ios-theme-vertical-bars-modal.ios-them
       :where(ion-menu *, ion-modal:not(.ios-theme-vertical-bars-modal) *, ion-popover *)
     )
     ion-buttons:is(.ios, .md)
-    > :is(ion-button, ion-menu-button):is(.ios, .md)[data-native-ui-shell]:not(
+    > :is(ion-button, ion-menu-button):is(.ios, .md)[data-native-ui-projected]:not(
       .ios-theme-disabled,
       .ios26-disabled,
       .ios-theme-vertical-bars-toolbar-action
@@ -355,8 +352,8 @@ ion-app.ios-theme-vertical-bars ion-modal.ios-theme-vertical-bars-modal.ios-them
   ion-toolbar:is(.ios, .md):not(.ios-theme-disabled, .ios26-disabled):not(
       :where(ion-menu *, ion-modal:not(.ios-theme-vertical-bars-modal) *, ion-popover *)
     )
-    ion-buttons:is(.ios, .md):has(> :is(ion-back-button, ion-button, ion-menu-button)[data-native-ui-shell]):not(
-      :has(> :is(ion-back-button, ion-button, ion-menu-button):not([data-native-ui-shell]))
+    ion-buttons:is(.ios, .md):has(> :is(ion-back-button, ion-button, ion-menu-button)[data-native-ui-projected]):not(
+      :has(> :is(ion-back-button, ion-button, ion-menu-button):not([data-native-ui-projected]))
     ) {
     display: none;
   }
@@ -441,7 +438,7 @@ ion-tab-button.ios.ion-cloned-element.ios27-vertical-tab-effect {
   }
 }
 
-// Search shares the Web rail before Native UI Shell takes ownership.
+// Search shares the Web rail before Native UI takes ownership.
 :is(ion-app.ios-theme-vertical-bars, ion-modal.ios-theme-vertical-bars-modal) > ion-fab.ios-theme-vertical-bars-search-projection {
   position: fixed;
   left: auto;
@@ -459,7 +456,7 @@ ion-tab-button.ios.ion-cloned-element.ios27-vertical-tab-effect {
   }
 }
 
-ion-app.ios-theme-vertical-bars ion-fab > ion-fab-button[data-native-ui-shell] {
+ion-app.ios-theme-vertical-bars ion-fab > ion-fab-button[data-native-ui-projected] {
   visibility: hidden !important;
 }
 

package/src/tab-bar-searchable/dismiss-button.ts

@@ -14,9 +14,77 @@ export const addSearchDismissButton = (footer: HTMLElement): void => {
   button.fill = 'default';
   button.type = 'button';
   button.setAttribute('aria-label', original.getAttribute('aria-label') ?? 'Close');
-  // Keep the field focused until click; blur would hide this button before dismissal.
-  button.addEventListener('pointerdown', (event) => event.preventDefault());
-  button.addEventListener('click', () => original.click());
+  // WebKit can blur the field between pointerup and click despite preventDefault.
+  // Complete pointer activation on release before blur can remove the button.
+  const doc = footer.ownerDocument;
+  let pointer: number | undefined;
+  let pointerTarget: HTMLElement | undefined;
+  const actionTarget = (event: Event): HTMLElement | undefined => {
+    const target = event.target instanceof Element ? event.target : undefined;
+    if (target?.closest('ion-button') === button) return button;
+    const clear = target?.closest<HTMLElement>('ion-searchbar .searchbar-clear-button');
+    return clear && footer.contains(clear) ? clear : undefined;
+  };
+  const syncEditing = () => {
+    if (!footer.contains(doc.activeElement)) footer.classList.remove('ios-theme-searchable-editing');
+  };
+  const releasePointer = () => {
+    pointer = undefined;
+    pointerTarget = undefined;
+    doc.removeEventListener('pointerup', finishPointer, true);
+    doc.removeEventListener('pointercancel', cancelPointer, true);
+    doc.defaultView?.removeEventListener('blur', releasePointer);
+    syncEditing();
+  };
+  const finishPointer = (event: PointerEvent) => {
+    if (event.pointerId !== pointer || !pointerTarget) return;
+    const target = pointerTarget;
+    const rect = target.getBoundingClientRect();
+    const inside =
+      rect.width > 0 &&
+      rect.height > 0 &&
+      event.clientX >= rect.left &&
+      event.clientX <= rect.right &&
+      event.clientY >= rect.top &&
+      event.clientY <= rect.bottom;
+    releasePointer();
+    if (inside) (target === button ? original : target).click();
+  };
+  const cancelPointer = (event: PointerEvent) => {
+    if (event.pointerId === pointer) releasePointer();
+  };
+  footer.addEventListener(
+    'pointerdown',
+    (event) => {
+      const target = actionTarget(event);
+      if (!target || !event.isPrimary || event.button !== 0) return;
+      event.preventDefault();
+      pointer = event.pointerId;
+      pointerTarget = target;
+      doc.addEventListener('pointerup', finishPointer, true);
+      doc.addEventListener('pointercancel', cancelPointer, true);
+      doc.defaultView?.addEventListener('blur', releasePointer);
+    },
+    true,
+  );
+  // Capture before Ionic's clear handler. Our programmatic click (detail 0) still
+  // invokes its existing ionClear/input/refocus behavior, including after hydration.
+  footer.addEventListener(
+    'click',
+    (event) => {
+      if (event.detail !== 0 && actionTarget(event)) {
+        event.preventDefault();
+        event.stopPropagation();
+      }
+    },
+    true,
+  );
+  button.addEventListener('click', (event) => {
+    // Pointer release already invoked the action. Keyboard/AT activation has no pointer click count.
+    if (event.detail !== 0) return;
+    releasePointer();
+    original.click();
+  });
   const icon = footer.ownerDocument.createElement('ion-icon');
   icon.slot = 'icon-only';
   icon.icon = close;
@@ -27,7 +95,8 @@ export const addSearchDismissButton = (footer: HTMLElement): void => {
     if ((event.target as HTMLElement).closest('ion-searchbar')) footer.classList.add('ios-theme-searchable-editing');
   });
   footer.addEventListener('focusout', (event) => {
-    if (!footer.contains(event.relatedTarget as Node | null)) footer.classList.remove('ios-theme-searchable-editing');
+    if (pointer === undefined && !footer.contains(event.relatedTarget as Node | null))
+      footer.classList.remove('ios-theme-searchable-editing');
   });
   original.closest('ion-toolbar')?.append(buttons);
 };

package/src/tab-bar-searchable/index.ts

@@ -11,7 +11,7 @@ import {
   type TabBarSearchableFunction,
   TabBarSearchableType,
 } from '@rdlabo/ionic-theme-utils';
-import { isNativeUIShell, registerNativeSearch, requestNativeSearch, suspendNativeUIShell } from '../native-integration';
+import { isNativeUI, registerNativeSearch, requestNativeSearch, suspendNativeUI } from '@rdlabo/capacitor-native-ui/integration';
 import {
   createCloseButtonsAnimation,
   createEffectAnimation,
@@ -75,6 +75,7 @@ export const attachTabBarSearchable = (
   // Saved Params
   let searchableEventCache: SearchableEventCache | undefined;
   let resumeNative: (() => void) | undefined;
+  let restoreTrigger: (() => void) | undefined;
   // Leave is valid both while native Enter awaits its ack and after it completes.
   let nativeEntry = false;
   let nativeRequest = 0;
@@ -88,7 +89,7 @@ export const attachTabBarSearchable = (
       throw new Error('TabBarSearchableType.Leave should be run after TabBarSearchableType.Enter');
     const hadNativeEntry = nativeEntry;
     const request = ++nativeRequest;
-    if (type === TabBarSearchableType.Enter) nativeEntry ||= isNativeUIShell(ionFooter);
+    if (type === TabBarSearchableType.Enter) nativeEntry ||= isNativeUI(ionFooter);
     const accepted = await requestNativeSearch(nativeSearch, type === TabBarSearchableType.Enter);
     if (request !== nativeRequest) return;
     if (accepted) {
@@ -114,14 +115,28 @@ export const attachTabBarSearchable = (
         tabVisibilityObserver.observe(ionTabBar, { attributes: true, attributeFilter: ['class'] });
         keepTabsVisible();
       }
-      resumeNative ??= await suspendNativeUIShell([
+      resumeNative ??= await suspendNativeUI([
         ...(verticalSearch ? [] : [ionTabBar]),
         ionFooter,
         ionFabButton.closest('ion-fab') ?? ionFabButton,
       ]);
       try {
         searchableEventCache = await enterEvent(event, ionTabBar, ionFabButton, ionFooter, verticalSearch);
+        if (!restoreTrigger) {
+          // WebKit can hit an opacity-zero FAB above the focused close button.
+          // Hide its complete host after the entrance animation; restore before animating out.
+          const trigger = ionFabButton.closest('ion-fab') ?? ionFabButton;
+          const visibility = trigger.style.getPropertyValue('visibility');
+          const priority = trigger.style.getPropertyPriority('visibility');
+          restoreTrigger = () => {
+            if (visibility) trigger.style.setProperty('visibility', visibility, priority);
+            else trigger.style.removeProperty('visibility');
+            restoreTrigger = undefined;
+          };
+          trigger.style.setProperty('visibility', 'hidden', 'important');
+        }
       } catch (error) {
+        restoreTrigger?.();
         tabVisibilityObserver?.disconnect();
         resumeNative();
         resumeNative = undefined;
@@ -129,9 +144,11 @@ export const attachTabBarSearchable = (
       }
     } else if (searchableEventCache !== undefined) {
       try {
+        restoreTrigger?.();
         await leaveEvent(event, searchableEventCache, ionTabBar, ionFabButton, ionFooter, verticalSearch);
         searchableEventCache = undefined;
       } finally {
+        restoreTrigger?.();
         tabVisibilityObserver?.disconnect();
         resumeNative?.();
         resumeNative = undefined;

package/src/transition/ios.transition.ts

@@ -2,7 +2,8 @@ import { createIosTransitionAnimation, shadow } from '@rdlabo/ionic-theme-utils'
 import type { Animation } from '@ionic/core/components';
 import type { TransitionOptions } from './index';
 import { getIonPageElement } from './index';
-import { withNativeUIShellTransition } from '../native-integration/transition';
+import { nativeWebViewMetrics } from '@rdlabo/capacitor-native-ui/integration';
+import { withNativeUITransition } from './native-ui';
 
 export { shadow };
 
@@ -14,13 +15,15 @@ const transitionConfig = {
   offLeftPercent: 30,
   getIonPageElement,
   shouldAnimateFixedBackButton: (navEl: HTMLElement) => !navEl.closest('ion-app.ios-theme-vertical-bars'),
-  radius: 0,
+  get radius() {
+    return nativeWebViewMetrics.radius;
+  },
 };
 
 export const setConfig = (config: Partial<IosTransitionConfig>): void => {
-  Object.assign(transitionConfig, config);
+  if (config.radius !== undefined) nativeWebViewMetrics.radius = config.radius;
 };
 
-export const iosTransitionAnimation: (navEl: HTMLElement, opts: TransitionOptions) => Animation = withNativeUIShellTransition(
+export const iosTransitionAnimation: (navEl: HTMLElement, opts: TransitionOptions) => Animation = withNativeUITransition(
   createIosTransitionAnimation<TransitionOptions>(transitionConfig),
 );

package/src/{native-integration/index.ts → transition/native-ui.ts}

@@ -1,61 +1,32 @@
-/// <reference lib="es2021.weakref" />
 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';
 
-export interface NativeUIShellIntegration {
-  suspend(scopes: HTMLElement[]): Promise<(canceled?: boolean) => void>;
-  search?(binding: NativeSearchBinding, active: boolean, focus?: boolean): Promise<boolean>;
-}
-
-export interface NativeSearchBinding {
-  tabBar: HTMLElement;
-  trigger: HTMLElement;
-  footer: HTMLElement;
-  active: boolean;
-  focused: boolean;
-}
-
-const searches = new WeakMap<Document, WeakRef<NativeSearchBinding>[]>();
-
-export const registerNativeSearch = (tabBar: HTMLElement, trigger: HTMLElement, footer: HTMLElement): NativeSearchBinding => {
-  const binding = { tabBar, trigger, footer, active: false, focused: false };
-  const entries = (searches.get(tabBar.ownerDocument) ?? []).filter((entry) => entry.deref() && entry.deref()?.footer !== footer);
-  entries.push(new WeakRef(binding));
-  searches.set(tabBar.ownerDocument, entries);
-  tabBar.ownerDocument.defaultView?.dispatchEvent(new Event('nativeUIShellRefresh'));
-  return binding;
-};
-
-export const getNativeSearchBindings = (doc: Document): NativeSearchBinding[] =>
-  (searches.get(doc) ?? []).flatMap((entry) => entry.deref() ?? []);
-
-export const requestNativeSearch = async (binding: NativeSearchBinding, active: boolean, focus?: boolean): Promise<boolean> =>
-  (await runtimes.get(binding.tabBar.ownerDocument)?.search?.(binding, active, focus)) ?? false;
-
-const runtimes = new WeakMap<Document, NativeUIShellIntegration>();
-export const VERTICAL_BARS_TRANSITION_CANCELED = 'iosThemeVerticalBarsTransitionCanceled';
-
-export const setNativeUIShellIntegration = (doc: Document, runtime?: NativeUIShellIntegration) => {
-  if (runtime) runtimes.set(doc, runtime);
-  else runtimes.delete(doc);
-};
-
-export const isNativeUIShell = (element: HTMLElement) => element.hasAttribute('data-native-ui-shell');
-
-export const suspendNativeUIShell = async (scopes: HTMLElement[]): Promise<(canceled?: boolean) => void> =>
-  (await runtimes.get(scopes[0]?.ownerDocument)?.suspend(scopes)) ?? (() => {});
+/**
+ * Keeps an existing Ionic navigation animation and coordinates native control handoff.
+ * Register the returned builder as navAnimation. Do not use it for overlay animations.
+ * The builder must return a fresh Animation for each navigation; Ionic destroys it afterward.
+ */
+export const withNativeUITransition =
+  (builder: AnimationBuilder): AnimationBuilder =>
+  (baseEl, opts) => {
+    const animation = builder(baseEl, opts);
+    if (opts?.enteringEl) connectNativeUITransition(animation, opts.enteringEl, opts.leavingEl);
+    return animation;
+  };
 
 const connectedTransitions = new WeakSet<Animation>();
 const cancellationTransitions = new WeakSet<Animation>();
 
 /** Ionic write hooks cannot await the bridge. Gate playback, including interactive playback. */
-export const connectNativeUIShellTransition = (animation: Animation, entering: HTMLElement, leaving?: HTMLElement) => {
+export const connectNativeUITransition = (animation: Animation, entering: HTMLElement, leaving?: HTMLElement) => {
   if (leaving && !cancellationTransitions.has(animation)) {
     cancellationTransitions.add(animation);
     animation.onFinish((step) => {
       if (step === 0) leaving.dispatchEvent(new CustomEvent(VERTICAL_BARS_TRANSITION_CANCELED, { bubbles: true, detail: { entering } }));
     });
   }
-  if (connectedTransitions.has(animation) || !runtimes.has(entering.ownerDocument)) return;
+  if (connectedTransitions.has(animation) || !hasNativeUIIntegration(entering.ownerDocument)) return;
   connectedTransitions.add(animation);
   const scopes = leaving ? [entering, leaving] : [entering];
   const play = animation.play.bind(animation);
@@ -70,7 +41,7 @@ export const connectNativeUIShellTransition = (animation: Animation, entering: H
   let step: number | undefined;
   let end: Parameters<Animation['progressEnd']> | undefined;
   const prepare = () =>
-    (preparation ??= suspendNativeUIShell(scopes).then((resume) => {
+    (preparation ??= suspendNativeUI(scopes).then((resume) => {
       if (disposed) resume(true);
       else release = resume;
     }));

package/Package.swift

@@ -1,21 +0,0 @@
-// swift-tools-version: 5.9
-import PackageDescription
-
-let package = Package(
-    name: "RdlaboIonicThemeIos27",
-    platforms: [.iOS(.v15)],
-    products: [.library(name: "RdlaboIonicThemeIos27", targets: ["IonicNativeUIShellPlugin"])],
-    dependencies: [.package(url: "https://github.com/ionic-team/capacitor-swift-pm.git", from: "8.0.0")],
-    targets: [.target(
-        name: "IonicNativeUIShellPlugin",
-        dependencies: [
-            .product(name: "Capacitor", package: "capacitor-swift-pm"),
-            .product(name: "Cordova", package: "capacitor-swift-pm")
-        ],
-        path: "ios/Sources/IonicNativeUIShellPlugin"
-    ), .testTarget(
-        name: "IonicNativeUIShellPluginTests",
-        dependencies: ["IonicNativeUIShellPlugin"],
-        path: "ios/Tests/IonicNativeUIShellPluginTests"
-    )]
-)

package/dist/_virtual/_rolldown/runtime.js

@@ -1,13 +0,0 @@
-//#region \0rolldown/runtime.js
-var __defProp = Object.defineProperty;
-var __exportAll = (all, no_symbols) => {
-	let target = {};
-	for (var name in all) __defProp(target, name, {
-		get: all[name],
-		enumerable: true
-	});
-	if (!no_symbols) __defProp(target, Symbol.toStringTag, { value: "Module" });
-	return target;
-};
-//#endregion
-export { __exportAll };

package/dist/native/components/index.d.ts

@@ -1,19 +0,0 @@
-import { VerticalControlAreaOptions } from "../definitions.js";
-import { Candidate, Identify } from "../shared/candidate.js";
-import { ion_button_d_exports } from "./ion-button.js";
-import { ion_buttons_d_exports } from "./ion-buttons.js";
-import { ion_back_button_d_exports } from "./ion-back-button.js";
-import { ion_menu_button_d_exports } from "./ion-menu-button.js";
-import { ion_tab_bar_d_exports } from "./ion-tab-bar.js";
-import { ion_segment_d_exports } from "./ion-segment.js";
-import { ion_fab_d_exports } from "./ion-fab.js";
-//#region src/native/components/index.d.ts
-export declare const components: readonly [typeof ion_button_d_exports, typeof ion_buttons_d_exports, typeof ion_back_button_d_exports, typeof ion_menu_button_d_exports, typeof ion_tab_bar_d_exports, typeof ion_segment_d_exports, typeof ion_fab_d_exports];
-export type NativeUIShellComponent = (typeof components)[number]['tag'];
-export declare const selector: string;
-export declare const shadowSelector: string;
-export declare const motionSelector: string;
-export declare const isVerticalBarsCandidate: (element: HTMLElement) => boolean;
-export declare const readCandidate: (element: HTMLElement, id: Identify, options?: VerticalControlAreaOptions) => Candidate | undefined;
-//#endregion
-//# sourceMappingURL=index.d.ts.map