@rdlabo/ionic-theme-ios27 1.2.1 → 2.0.0-2

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

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","names":["button","buttons","backButton","menuButton","tabBar","segment","fab"],"sources":["../../../src/native/components/index.ts"],"mappings":";;;;;;;;;;qBAYa,6BAAUA,6BAAAC,8BAAAC,kCAAAC,kCAAAC,8BAAAC,8BAAAC;YACX,iCAAiC;qBAChC;qBAIA;qBAIA;qBAQA,0BAAuB,SAAA;qBAEvB,gBAAiB,SAAS,aAAa,IAAI,UAAU,UAAS,+BAAkC"}

package/dist/native/components/index.js

@@ -1,40 +0,0 @@
-import { isDisabledButtonGroupChild, isVerticalBarsSource, visible, withoutPrehide } from "../shared/dom.js";
-import { ion_button_exports } from "./ion-button.js";
-import { ion_menu_button_exports } from "./ion-menu-button.js";
-import { ion_buttons_exports } from "./ion-buttons.js";
-import { ion_back_button_exports } from "./ion-back-button.js";
-import { ion_tab_bar_exports } from "./ion-tab-bar.js";
-import { ion_segment_exports } from "./ion-segment.js";
-import { ion_fab_exports } from "./ion-fab.js";
-//#region src/native/components/index.ts
-const components = [
-	ion_button_exports,
-	ion_buttons_exports,
-	ion_back_button_exports,
-	ion_menu_button_exports,
-	ion_tab_bar_exports,
-	ion_segment_exports,
-	ion_fab_exports
-];
-const selector = components.map((component) => "selector" in component ? component.selector : component.tag).filter(Boolean).join(", ");
-const shadowSelector = ["ion-icon", ...components.flatMap((component) => "shadowSelector" in component ? [component.shadowSelector] : [])].join(", ");
-const motionSelector = [
-	".ion-page",
-	"ion-header",
-	"ion-footer",
-	"ion-toolbar",
-	...components.filter((component) => "tracksMotion" in component && component.tracksMotion).map((component) => component.tag)
-].join(", ");
-const isVerticalBarsCandidate = isVerticalBarsSource;
-const readCandidate = (element, id, options = {}) => {
-	const verticalBars = isVerticalBarsCandidate(element);
-	if (!element.classList.contains("ios") && !verticalBars || !visible(element, verticalBars) || element.closest("ion-popover") || element.closest("ion-modal") && !verticalBars) return;
-	const style = getComputedStyle(element);
-	if (!isDisabledButtonGroupChild(element) && !style.getPropertyValue("--ios-theme-glass-background-rgb").trim() && !style.getPropertyValue("--ios26-glass-background-rgb").trim() && !verticalBars) return;
-	if (element.contains(element.ownerDocument.activeElement)) return;
-	return withoutPrehide(element, () => components.find((component) => component.tag === element.localName)?.read(element, id, options));
-};
-//#endregion
-export { components, isVerticalBarsCandidate, motionSelector, readCandidate, selector, shadowSelector };
-
-//# sourceMappingURL=index.js.map

package/dist/native/components/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","names":["button","buttons","backButton","menuButton","tabBar","segment","fab"],"sources":["../../../src/native/components/index.ts"],"sourcesContent":["import type { VerticalControlAreaOptions } from '../definitions';\nimport * as button from './ion-button';\nimport * as buttons from './ion-buttons';\nimport * as backButton from './ion-back-button';\nimport * as menuButton from './ion-menu-button';\nimport * as tabBar from './ion-tab-bar';\nimport * as segment from './ion-segment';\nimport * as fab from './ion-fab';\nimport { isDisabledButtonGroupChild, isVerticalBarsSource, visible, withoutPrehide } from '../shared/dom';\nimport type { Candidate, Identify } from '../shared/candidate';\n\n// Static composition only. Each component declares its own tag, discovery and reader.\nexport const components = [button, buttons, backButton, menuButton, tabBar, segment, fab] as const;\nexport type NativeUIShellComponent = (typeof components)[number]['tag'];\nexport const selector = components\n  .map((component) => ('selector' in component ? component.selector : component.tag))\n  .filter(Boolean)\n  .join(', ');\nexport const shadowSelector = [\n  'ion-icon',\n  ...components.flatMap((component) => ('shadowSelector' in component ? [component.shadowSelector] : [])),\n].join(', ');\nexport const motionSelector = [\n  '.ion-page',\n  'ion-header',\n  'ion-footer',\n  'ion-toolbar',\n  ...components.filter((component) => 'tracksMotion' in component && component.tracksMotion).map((component) => component.tag),\n].join(', ');\n\nexport const isVerticalBarsCandidate = isVerticalBarsSource;\n\nexport const readCandidate = (element: HTMLElement, id: Identify, options: VerticalControlAreaOptions = {}): Candidate | undefined => {\n  const verticalBars = isVerticalBarsCandidate(element);\n  if (\n    (!element.classList.contains('ios') && !verticalBars) ||\n    !visible(element, verticalBars) ||\n    element.closest('ion-popover') ||\n    (element.closest('ion-modal') && !verticalBars)\n  )\n    return;\n  const style = getComputedStyle(element);\n  if (\n    !isDisabledButtonGroupChild(element) &&\n    !style.getPropertyValue('--ios-theme-glass-background-rgb').trim() &&\n    !style.getPropertyValue('--ios26-glass-background-rgb').trim() &&\n    !verticalBars\n  )\n    return;\n  if (element.contains(element.ownerDocument.activeElement)) return;\n  // Read icon and control geometry before restoring prehide, which can collapse the toolbar.\n  return withoutPrehide(element, () => components.find((component) => component.tag === element.localName)?.read(element, id, options));\n};\n"],"mappings":";;;;;;;;;AAYA,MAAa,aAAa;CAACA;CAAQC;CAASC;CAAYC;CAAYC;CAAQC;CAASC;AAAG;AAExF,MAAa,WAAW,WACrB,KAAK,cAAe,cAAc,YAAY,UAAU,WAAW,UAAU,GAAI,CAAC,CAClF,OAAO,OAAO,CAAC,CACf,KAAK,IAAI;AACZ,MAAa,iBAAiB,CAC5B,YACA,GAAG,WAAW,SAAS,cAAe,oBAAoB,YAAY,CAAC,UAAU,cAAc,IAAI,CAAC,CAAE,CACxG,CAAC,CAAC,KAAK,IAAI;AACX,MAAa,iBAAiB;CAC5B;CACA;CACA;CACA;CACA,GAAG,WAAW,QAAQ,cAAc,kBAAkB,aAAa,UAAU,YAAY,CAAC,CAAC,KAAK,cAAc,UAAU,GAAG;AAC7H,CAAC,CAAC,KAAK,IAAI;AAEX,MAAa,0BAA0B;AAEvC,MAAa,iBAAiB,SAAsB,IAAc,UAAsC,CAAC,MAA6B;CACpI,MAAM,eAAe,wBAAwB,OAAO;CACpD,IACG,CAAC,QAAQ,UAAU,SAAS,KAAK,KAAK,CAAC,gBACxC,CAAC,QAAQ,SAAS,YAAY,KAC9B,QAAQ,QAAQ,aAAa,KAC5B,QAAQ,QAAQ,WAAW,KAAK,CAAC,cAElC;CACF,MAAM,QAAQ,iBAAiB,OAAO;CACtC,IACE,CAAC,2BAA2B,OAAO,KACnC,CAAC,MAAM,iBAAiB,kCAAkC,CAAC,CAAC,KAAK,KACjE,CAAC,MAAM,iBAAiB,8BAA8B,CAAC,CAAC,KAAK,KAC7D,CAAC,cAED;CACF,IAAI,QAAQ,SAAS,QAAQ,cAAc,aAAa,GAAG;CAE3D,OAAO,eAAe,eAAe,WAAW,MAAM,cAAc,UAAU,QAAQ,QAAQ,SAAS,CAAC,EAAE,KAAK,SAAS,IAAI,OAAO,CAAC;AACtI"}

package/dist/native/components/ion-back-button.d.ts

@@ -1,9 +0,0 @@
-import { Candidate, Identify } from "../shared/candidate.js";
-declare namespace ion_back_button_d_exports {
-  export { read, tag };
-}
-export declare const tag = "ion-back-button";
-export declare const read: (element: HTMLElement, id: Identify) => Candidate | undefined;
-//#endregion
-export { ion_back_button_d_exports };
-//# sourceMappingURL=ion-back-button.d.ts.map

package/dist/native/components/ion-back-button.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ion-back-button.d.ts","names":[],"sources":["../../../src/native/components/ion-back-button.ts"],"mappings":";;;;qBAIa;qBAEA,OAAQ,SAAS,aAAa,IAAI,aAAW"}

package/dist/native/components/ion-back-button.js

@@ -1,20 +0,0 @@
-import { __exportAll } from "../../_virtual/_rolldown/runtime.js";
-import { inFixedToolbar, isVerticalBarsSource } from "../shared/dom.js";
-import { appendItem, createCandidate } from "../shared/candidate.js";
-//#region src/native/components/ion-back-button.ts
-var ion_back_button_exports = /* @__PURE__ */ __exportAll({
-	read: () => read,
-	tag: () => tag
-});
-const tag = "ion-back-button";
-const read = (element, id) => {
-	const button = element;
-	if (!button.shadowRoot || button.icon !== void 0 || button.color !== void 0 || !isVerticalBarsSource(element) && !inFixedToolbar(element)) return;
-	const candidate = createCandidate(element, tag, id);
-	const label = button.shadowRoot.querySelector("[part=\"text\"]")?.textContent?.trim() ?? "";
-	return appendItem(candidate, element, id, button.shadowRoot, label) ? candidate : void 0;
-};
-//#endregion
-export { ion_back_button_exports, read, tag };
-
-//# sourceMappingURL=ion-back-button.js.map

package/dist/native/components/ion-back-button.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ion-back-button.js","names":[],"sources":["../../../src/native/components/ion-back-button.ts"],"sourcesContent":["import { createCandidate, appendItem } from '../shared/candidate';\nimport type { Candidate, Identify } from '../shared/candidate';\nimport { inFixedToolbar, isVerticalBarsSource } from '../shared/dom';\n\nexport const tag = 'ion-back-button';\n\nexport const read = (element: HTMLElement, id: Identify): Candidate | undefined => {\n  const button = element as HTMLIonBackButtonElement;\n  if (\n    !button.shadowRoot ||\n    button.icon !== undefined ||\n    button.color !== undefined ||\n    (!isVerticalBarsSource(element) && !inFixedToolbar(element))\n  )\n    return;\n  const candidate = createCandidate(element, tag, id);\n  const label = button.shadowRoot.querySelector('[part=\"text\"]')?.textContent?.trim() ?? '';\n  return appendItem(candidate, element, id, button.shadowRoot, label) ? candidate : undefined;\n};\n"],"mappings":";;;;;;;;AAIA,MAAa,MAAM;AAEnB,MAAa,QAAQ,SAAsB,OAAwC;CACjF,MAAM,SAAS;CACf,IACE,CAAC,OAAO,cACR,OAAO,SAAS,KAAA,KAChB,OAAO,UAAU,KAAA,KAChB,CAAC,qBAAqB,OAAO,KAAK,CAAC,eAAe,OAAO,GAE1D;CACF,MAAM,YAAY,gBAAgB,SAAS,KAAK,EAAE;CAClD,MAAM,QAAQ,OAAO,WAAW,cAAc,iBAAe,CAAC,EAAE,aAAa,KAAK,KAAK;CACvF,OAAO,WAAW,WAAW,SAAS,IAAI,OAAO,YAAY,KAAK,IAAI,YAAY,KAAA;AACpF"}