@rdlabo/ionic-theme-ios27 1.2.0-1 → 1.2.0-3

package/ios/Tests/IonicNativeUIShellPluginTests/ShellSnapshotTests.swift

@@ -22,6 +22,18 @@ final class ShellSnapshotTests: XCTestCase {
         try JSValueDecoder().decode(ShellSnapshot.self, from: ["revision": 1, "viewportWidth": width, "controls": controls])
     }
 
+    func testModalRailFrameIsOptionalAndRequiresPositiveBounds() throws {
+        var payload: JSObject = ["revision": 1, "viewportWidth": 466.0, "controls": [control()]]
+        let page = try JSValueDecoder().decode(ShellSnapshot.self, from: payload)
+        XCTAssertNil(page.verticalBarFrame)
+        for height in [339.0, 0.0, -1.0] {
+            payload["verticalBarFrame"] = ["x": 0.0, "y": 339.0, "width": 466.0, "height": height]
+            let modal = try JSValueDecoder().decode(ShellSnapshot.self, from: payload)
+            XCTAssertEqual(modal.isValid, height > 0)
+            XCTAssertEqual(modal.verticalBarFrame?.y, 339)
+        }
+    }
+
     @MainActor func testTabTypographyPreservesCSSWeightsAndSize() throws {
         let weights: [UIFont.Weight] = [.ultraLight, .thin, .light, .regular, .medium, .semibold, .bold, .heavy, .black]
         let tab = UITabBarItem()
@@ -37,6 +49,24 @@ final class ShellSnapshotTests: XCTestCase {
         }
     }
 
+    @MainActor func testVerticalBarsPreserveButtonAppearance() throws {
+        guard #available(iOS 26.0, *) else { throw XCTSkip("Requires SwiftUI adaptive controls") }
+        let controls = try decode([control(["kind": "ion-buttons", "items": [
+            item(["backgroundColor": "rgb(0, 122, 255)"]),
+            item(["id": "outline", "borderColor": "rgb(255, 0, 0)", "borderWidth": 2.0])
+        ]])]).controls
+        XCTAssertEqual(controls.first?.items.first?.content.backgroundColor, "rgb(0, 122, 255)")
+        let model = ShellVerticalBarsModel()
+        model.apply(controls, rendering: ShellRendering())
+        XCTAssertNotNil(model.groups.first?.items.first?.background)
+        XCTAssertNotNil(model.groups.first?.items.last?.borderColor)
+        XCTAssertEqual(model.groups.first?.items.last?.borderWidth, 2)
+        model.apply(try decode([control(["kind": "ion-button"])]).controls, rendering: ShellRendering())
+        XCTAssertNil(model.groups.first?.items.first?.background)
+        XCTAssertNil(model.groups.first?.items.first?.borderColor)
+        XCTAssertEqual(model.groups.first?.items.first?.borderWidth, 0)
+    }
+
     @MainActor func testVerticalBarsTabOptimismWaitsForWebAndRollsBackWhenStale() throws {
         guard #available(iOS 26.0, *) else { throw XCTSkip("Requires SwiftUI adaptive tabs") }
         func tabs(_ selected: String, includeRight: Bool = true) throws -> [ShellControl] {
@@ -577,4 +607,41 @@ final class ShellSnapshotTests: XCTestCase {
         XCTAssertEqual(phases, ["input"])
     }
 
+    func testVerticalSearchBridgesInputFocusAndDismissalWithoutStaleWebEchoes() throws {
+        guard #available(iOS 26.0, *) else { throw XCTSkip("Requires native glass search") }
+        func node(active: Bool, value: String = "", version: Int = 0) throws -> ShellControl {
+            let search: JSObject = ["id": "search", "field": item(),
+                "trigger": item(["id": "trigger"]), "closeId": "close", "active": active,
+                "available": true, "focused": false, "value": value, "placeholder": "Search",
+                "disabled": false, "editSequence": 0, "valueVersion": version]
+            return try XCTUnwrap(decode([control(["kind": "ion-tab-bar", "placement": "vertical-bars",
+                "search": search, "items": [item(["id": "first", "selected": true]), item(["id": "second"])]])]).controls.first)
+        }
+        var actions: [String] = []
+        var values: [String] = []
+        let rail = UIView()
+        let model = ShellVerticalSearchModel(try XCTUnwrap(node(active: false).search), in: rail,
+            activate: { actions.append($0) },
+            changed: { _, _, value, _, _ in values.append(value); return values.count })
+        model.present(true)
+        XCTAssertEqual(actions, ["trigger"])
+        model.apply(try XCTUnwrap(node(active: true).search))
+        XCTAssertTrue(model.presented)
+        model.input("native query")
+        XCTAssertEqual(values, ["native query"])
+        model.apply(try XCTUnwrap(node(active: true).search))
+        XCTAssertEqual(model.text, "native query")
+        // The first presentation acknowledgement must not undo native focus.
+        model.focus(true)
+        model.apply(try XCTUnwrap(node(active: true).search))
+        XCTAssertTrue(model.focused)
+        model.apply(try XCTUnwrap(node(active: true, value: "application", version: 1).search))
+        XCTAssertEqual(model.text, "application")
+        model.present(false)
+        XCTAssertEqual(actions, ["trigger", "close"])
+        model.apply(try XCTUnwrap(node(active: false).search))
+        XCTAssertFalse(model.presented)
+        XCTAssertFalse(model.focused)
+    }
+
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@rdlabo/ionic-theme-ios27",
   "private": false,
-  "version": "1.2.0-1",
+  "version": "1.2.0-3",
   "description": "iOS27 Theme for Ionic Framework",
   "main": "./dist/index.js",
   "module": "./dist/index.js",

package/src/index.ts

@@ -17,24 +17,55 @@ export const registerTabBarEffect = (targetElement: HTMLElement): registeredEffe
   const reducedMotion = win.matchMedia('(prefers-reduced-motion: reduce)');
   const verticalBarsRoot = targetElement.closest('ion-app');
   let effect: registeredEffect | undefined;
+  let placement: 'disabled' | 'horizontal' | 'left' | 'right' | undefined;
   const update = () => {
-    effect?.destroy();
     const isVertical =
-      !!verticalBarsRoot?.classList.contains('ios-theme-vertical-bars') && !targetElement.closest('ion-menu, ion-modal, ion-popover');
-    effect =
-      reducedMotion.matches || isVertical
-        ? undefined
-        : registerEffect(targetElement, 'ion-tab-button', 'tab-selected', {
+      !!verticalBarsRoot?.classList.contains('ios-theme-vertical-bars') &&
+      targetElement.matches('ion-tabs > ion-tab-bar:not(.ios-theme-disabled, .ios26-disabled)') &&
+      !targetElement.closest('ion-menu, ion-modal, ion-popover');
+    const disabled = reducedMotion.matches || !targetElement.matches('.ios:not(.ios-theme-disabled, .ios26-disabled)');
+    const nextPlacement = disabled
+      ? 'disabled'
+      : isVertical
+        ? verticalBarsRoot?.classList.contains('ios-theme-vertical-bars-left')
+          ? 'left'
+          : 'right'
+        : 'horizontal';
+    // Gesture/activation classes also change during interaction. Rebuild only when
+    // eligibility or placement changes, retaining cancellation when the rail changes sides.
+    if (placement === nextPlacement) return;
+    placement = nextPlacement;
+    effect?.destroy();
+    effect = disabled
+      ? undefined
+      : registerEffect(
+          targetElement,
+          'ion-tab-button',
+          'tab-selected',
+          {
             small: 'scale(1.1, 1)',
             medium: 'scale(1.2)',
             large: 'scale(1.15, 1.4)',
             xlarge: 'scale(1.3)',
-          });
+          },
+          isVertical,
+        );
   };
   update();
   reducedMotion.addEventListener('change', update);
-  const placementObserver = new win.MutationObserver(update);
-  if (verticalBarsRoot) placementObserver.observe(verticalBarsRoot, { attributes: true, attributeFilter: ['class'] });
+  const placementObserver = new win.MutationObserver((records) => {
+    if (
+      records.some((record) =>
+        record.type === 'attributes'
+          ? record.target === targetElement || record.target === verticalBarsRoot
+          : [...Array.from(record.addedNodes), ...Array.from(record.removedNodes)].some((node) => node.contains(targetElement)),
+      )
+    )
+      update();
+  });
+  if (verticalBarsRoot)
+    placementObserver.observe(verticalBarsRoot, { attributes: true, attributeFilter: ['class'], childList: true, subtree: true });
+  placementObserver.observe(targetElement, { attributes: true, attributeFilter: ['class'] });
   return {
     destroy: () => {
       reducedMotion.removeEventListener('change', update);

package/src/native/components/index.ts

@@ -31,7 +31,12 @@ export const isVerticalBarsCandidate = isVerticalBarsSource;
 
 export const readCandidate = (element: HTMLElement, id: Identify): Candidate | undefined => {
   const verticalBars = isVerticalBarsCandidate(element);
-  if ((!element.classList.contains('ios') && !verticalBars) || !visible(element, verticalBars) || element.closest('ion-modal, ion-popover'))
+  if (
+    (!element.classList.contains('ios') && !verticalBars) ||
+    !visible(element, verticalBars) ||
+    element.closest('ion-popover') ||
+    (element.closest('ion-modal') && !verticalBars)
+  )
     return;
   const style = getComputedStyle(element);
   if (

package/src/native/components/ion-button.ts

@@ -1,3 +1,4 @@
+import { modalUsesVerticalBars } from '../shared/modal';
 import { createCandidate, appendItem } from '../shared/candidate';
 import type { Candidate, Identify } from '../shared/candidate';
 import { inFixedToolbar, isVerticalBarsToolbarAction, isVerticalBarsToolbarGroup } from '../shared/dom';
@@ -6,15 +7,15 @@ export const tag = 'ion-button';
 
 export const read = (element: HTMLElement, id: Identify): Candidate | undefined => {
   const button = element as HTMLIonButtonElement;
-  const verticalBars = !element.closest('ion-menu, ion-modal, ion-popover') && !!element.closest('ion-app.ios-theme-vertical-bars');
+  const verticalBars =
+    !element.closest('ion-menu, ion-popover') && modalUsesVerticalBars(element) && !!element.closest('ion-app.ios-theme-vertical-bars');
   if (verticalBars && element.parentElement && isVerticalBarsToolbarGroup(element.parentElement)) return;
   const fill = button.fill ?? 'default';
   if (
     !inFixedToolbar(element) ||
     (verticalBars && !isVerticalBarsToolbarAction(element)) ||
     (!verticalBars && fill !== 'default') ||
-    (verticalBars && !['default', 'clear'].includes(fill)) ||
-    button.classList.contains('ion-color')
+    (!verticalBars && button.classList.contains('ion-color'))
   )
     return;
   const candidate = createCandidate(element, tag, id);

package/src/native/components/ion-buttons.ts

@@ -1,3 +1,4 @@
+import { modalUsesVerticalBars } from '../shared/modal';
 import { createCandidate, appendItem } from '../shared/candidate';
 import type { Candidate, Identify } from '../shared/candidate';
 import { childElements, verticalBarsToolbarActions, inFixedToolbar, isVerticalBarsToolbarGroup } from '../shared/dom';
@@ -10,7 +11,8 @@ export const read = (element: HTMLElement, id: Identify): Candidate | undefined
   if (!inFixedToolbar(element)) return;
   let children = childElements(element);
   if (children.length === 1) return menuButton.read(element, id);
-  const verticalBars = !element.closest('ion-menu, ion-modal, ion-popover') && !!element.closest('ion-app.ios-theme-vertical-bars');
+  const verticalBars =
+    !element.closest('ion-menu, ion-popover') && modalUsesVerticalBars(element) && !!element.closest('ion-app.ios-theme-vertical-bars');
   if (verticalBars && !isVerticalBarsToolbarGroup(element)) return;
   if (verticalBars) children = verticalBarsToolbarActions(element);
   if (
@@ -19,7 +21,7 @@ export const read = (element: HTMLElement, id: Identify): Candidate | undefined
       (child) =>
         !child.matches(`${menuButton.tag}${verticalBars ? '' : '.ios'}`) &&
         (!child.matches(`ion-button${verticalBars ? '' : '.ios.button-clear'}`) ||
-          !(verticalBars ? ['default', 'clear'] : ['clear']).includes((child as HTMLIonButtonElement).fill ?? 'default')),
+          (!verticalBars && (child as HTMLIonButtonElement).fill !== 'clear')),
     )
   )
     return;

package/src/native/components/searchable-tabs.ts

@@ -167,7 +167,12 @@ export const createSearchSupport = (doc: Document, id: (element: Element) => str
     keyboard(visible: boolean) {
       keyboardVisible = visible;
       if (!visible) {
-        states.forEach((state) => (state.keyboardHidden = false));
+        for (const [binding, state] of states) {
+          // Ionic can wait for the pre-keyboard height indefinitely after rotation.
+          // Release the visibility override we own when native search's keyboard closes.
+          if (state.keyboardHidden) binding.tabBar.classList.remove('tab-bar-hidden');
+          state.keyboardHidden = false;
+        }
         releaseKeyboardResize();
       }
       schedule();
@@ -202,15 +207,7 @@ export const createSearchSupport = (doc: Document, id: (element: Element) => str
       };
       for (const binding of bindings) {
         const candidate = candidates.find((c) => c.element === binding.tabBar);
-        // The vertical rail has no search surface; hiding the FAB/footer there
-        // would leave searchable tabs without any search control.
-        if (
-          !candidate ||
-          candidate.control.search ||
-          candidate.control.placement === 'vertical-bars' ||
-          binding.tabBar.getAttribute('slot') !== 'bottom'
-        )
-          continue;
+        if (!candidate || candidate.control.search || binding.tabBar.getAttribute('slot') !== 'bottom') continue;
         const fab = binding.trigger.parentElement;
         // Search also supports the existing page-level fixed FAB, outside scrolling content.
         if (
@@ -441,8 +438,8 @@ export const createSearchSupport = (doc: Document, id: (element: Element) => str
     },
     retire(binding: NativeSearchBinding) {
       const state = states.get(binding);
+      // Keep ownership until keyboardWillHide can release this class.
       if (state?.keyboardHidden && keyboardVisible) binding.tabBar.classList.add('tab-bar-hidden');
-      if (state) state.keyboardHidden = false;
       if (state?.focused) {
         state.focused = false;
         state.input.dispatchEvent(new FocusEvent('blur'));

package/src/native/definitions.ts

@@ -44,14 +44,10 @@ export type VerticalBarEdge = 'leading' | 'trailing' | null;
 
 export interface VerticalBarPlacement {
   edge: VerticalBarEdge;
-  /** UIKit safe-area inset on the vertical-bar edge, in points. */
-  inset: number;
-}
-
-export enum HingeStatus {
-  Closed = 'closed',
-  PartiallyOpen = 'partiallyOpen',
-  FullyOpen = 'fullyOpen',
+  /** Explicit rail width in CSS pixels; omitted to use the stylesheet's safe-area rules. */
+  inset?: number;
+  /** Native logical edge reported by the application's device plugin. Null or an unregistered edge uses a Web rail in verticalBarsOnly mode, or the ordinary Native UI Shell layout otherwise. Omission keeps the last supplied value. */
+  nativeEdge?: VerticalBarEdge;
 }
 
 export interface VerticalControlAreaHandle extends NativeUIShellHandle {
@@ -86,6 +82,9 @@ export interface ShellItem extends Frame {
   fontSize: number;
   fontWeight: number;
   color: string;
+  backgroundColor?: string;
+  borderColor?: string;
+  borderWidth?: number;
   badge?: ShellBadge;
   icon?: string;
   iconWidth?: number;
@@ -144,6 +143,8 @@ export interface ShellSnapshot {
   viewportWidth: number;
   /** Physical side the native rail is drawn on; the runtime resolves the logical edge through the document direction. */
   verticalBarEdge?: 'left' | 'right';
+  /** Visible foreground modal bounds; omitted for the full page. */
+  verticalBarFrame?: Frame;
   controls: ShellControl[];
 }
 
@@ -158,21 +159,12 @@ export interface WebViewMetrics {
   radius: number;
 }
 
-export interface DeviceLayout {
-  placement: VerticalBarPlacement;
-  /** Fold hinge posture, or `null` when the device reports no hinge. */
-  hingeStatus: HingeStatus | null;
-  webViewMetrics: WebViewMetrics;
-}
-
 export interface NativeUIShellPlugin {
   configure(options?: { verticalBarsOnly?: boolean }): Promise<{ supported: boolean }>;
-  getDeviceLayout(): Promise<DeviceLayout>;
-  startDeviceLayoutMonitoring(): Promise<void>;
-  stopDeviceLayoutMonitoring(): Promise<void>;
+  getWebViewMetrics(): Promise<WebViewMetrics>;
   update(snapshot: ShellSnapshot): Promise<{ revision: number; rejectedSearches?: string[]; rejectedControls?: string[] }>;
   clear(options: { revision: number }): Promise<void>;
   addListener(name: 'activate', listener: (event: ShellActivation) => void): Promise<PluginListenerHandle>;
   addListener(name: 'search', listener: (event: ShellSearchEvent) => void): Promise<PluginListenerHandle>;
-  addListener(name: 'deviceLayoutChange', listener: (event: DeviceLayout) => void): Promise<PluginListenerHandle>;
+  addListener(name: 'webViewMetricsChange', listener: (event: WebViewMetrics) => void): Promise<PluginListenerHandle>;
 }

package/src/native/index.ts

@@ -12,6 +12,7 @@ import type {
 import { createRuntime } from './runtime';
 import { createVerticalBarsWebProjection } from './vertical-bars-web';
 import { prehideVerticalBarsToolbarSources } from './prehide';
+import { observeVerticalBarsModals } from './shared/modal';
 export type {
   NativeUIShellComponent,
   NativeUIShellControls,
@@ -19,13 +20,11 @@ export type {
   NativeUIShellOptions,
   NativeUIShellStatus,
   NativeUIShellSuspension,
-  DeviceLayout,
   VerticalBarEdge,
   VerticalBarPlacement,
   VerticalControlAreaHandle,
   WebViewMetrics,
 } from './definitions';
-export { HingeStatus } from './definitions';
 
 const plugin = registerPlugin<NativeUIShellPlugin>('IonicNativeUIShell');
 export const IonicNativeUIShell = plugin;
@@ -97,8 +96,7 @@ const manage = (
 
 /** Reads the current native WebView geometry and applies it to page transitions. */
 export const configureNativeTransition = async (): Promise<WebViewMetrics> => {
-  const metrics =
-    typeof document !== 'undefined' && Capacitor.getPlatform() === 'ios' ? (await plugin.getDeviceLayout()).webViewMetrics : { radius: 0 };
+  const metrics = typeof document !== 'undefined' && Capacitor.getPlatform() === 'ios' ? await plugin.getWebViewMetrics() : { radius: 0 };
   setConfig({ radius: metrics.radius });
   return metrics;
 };
@@ -109,6 +107,39 @@ const physicalVerticalBarEdge = (edge: Exclude<VerticalBarEdge, null>, rtl: bool
 
 const elementRtl = (element: Element): boolean => element.closest('[dir]')?.getAttribute('dir') === 'rtl';
 
+// Device facts are supplied by the application; the theme only compares placement.
+const nativePlacements = new WeakMap<HTMLElement, { edge: VerticalBarEdge; rtl?: boolean }>();
+const horizontalFallbackAttribute = 'data-native-ui-shell-vertical-bars-suspended';
+
+// Keep the requested rail while ordinary Native UI Shell temporarily uses its
+// horizontal layout. Removing the effective class restores normal measurements,
+// toolbar ownership and safe areas throughout the existing rendering pipeline.
+const observeNativeVerticalBarsLayout = (doc: Document): (() => void) => {
+  const reconcile = () => {
+    const app = doc.querySelector<HTMLElement>('ion-app');
+    if (!app) return;
+    const requested = app.classList.contains('ios-theme-vertical-bars') || app.hasAttribute(horizontalFallbackAttribute);
+    const suspended = requested && nativePlacements.get(app)?.edge == null;
+    if (app.hasAttribute(horizontalFallbackAttribute) !== suspended) app.toggleAttribute(horizontalFallbackAttribute, suspended);
+    if (app.classList.contains('ios-theme-vertical-bars') !== (requested && !suspended)) {
+      app.classList.toggle('ios-theme-vertical-bars', requested && !suspended);
+    }
+  };
+  const observer = new MutationObserver(reconcile);
+  observer.observe(doc.documentElement, { childList: true, subtree: true, attributes: true, attributeFilter: ['class'] });
+  doc.defaultView?.addEventListener('nativeUIShellRefresh', reconcile);
+  reconcile();
+  return () => {
+    observer.disconnect();
+    doc.defaultView?.removeEventListener('nativeUIShellRefresh', reconcile);
+    const app = doc.querySelector<HTMLElement>(`ion-app[${horizontalFallbackAttribute}]`);
+    if (app) {
+      app.removeAttribute(horizontalFallbackAttribute);
+      app.classList.add('ios-theme-vertical-bars');
+    }
+  };
+};
+
 /**
  * Applies one placement to the CSS layout and both Web/native projections.
  * Pass `rtl` when the document direction is known; otherwise the nearest `dir` attribute is used.
@@ -117,11 +148,16 @@ export const setVerticalControlAreaPlacement = (placement: VerticalBarEdge | Ver
   if (typeof document === 'undefined') return;
   const app = document.querySelector<HTMLElement>('ion-app');
   if (!app) throw new Error('Vertical Control Area requires ion-app');
-  const { edge, inset } = placement && typeof placement === 'object' ? placement : { edge: placement, inset: 0 };
+  const { edge, inset = 0 } = placement && typeof placement === 'object' ? placement : { edge: placement, inset: 0 };
+  if (placement && typeof placement === 'object' && placement.nativeEdge !== undefined) {
+    nativePlacements.set(app, { edge: placement.nativeEdge, rtl });
+  }
+  app.removeAttribute(horizontalFallbackAttribute);
   app.classList.toggle('ios-theme-vertical-bars', edge !== null);
   app.classList.toggle('ios-theme-vertical-bars-left', edge !== null && physicalVerticalBarEdge(edge, rtl ?? elementRtl(app)) === 'left');
   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');
+  document.defaultView?.dispatchEvent(new Event('nativeUIShellRefresh'));
 };
 
 /** Call once at application startup. Ionic markup remains the source of truth. */
@@ -160,6 +196,7 @@ export const enableNativeUIShell = (options: NativeUIShellOptions = {}): Promise
     );
   if (active) return active;
   activeConfiguration = configuration;
+  const stopModals = observeVerticalBarsModals(document);
   const prehide =
     options.controls === undefined || options.controls.toolbar === true ? prehideVerticalBarsToolbarSources(document) : undefined;
   // A slow destroy of a superseded activation must not release a newer one.
@@ -174,38 +211,37 @@ export const enableNativeUIShell = (options: NativeUIShellOptions = {}): Promise
     manage(createVerticalBarsWebProjection(document, options), {
       reason,
       suspend: () => prehide?.suspend(),
-      destroy: () => prehide?.stop(),
+      destroy: () => {
+        prehide?.stop();
+        stopModals();
+      },
       release,
     });
   return (start = active =
     (async () => {
       if (Capacitor.getPlatform() !== 'ios') return fallback('Requires Capacitor iOS');
       let runtime: NativeUIShellHandle | undefined;
-      let placementListener: Awaited<ReturnType<typeof plugin.addListener>> | undefined;
-      let monitoring = false;
+      let metricsListener: Awaited<ReturnType<typeof plugin.addListener>> | undefined;
+      let stopVerticalBarsLayout: (() => void) | undefined;
       try {
-        if (!options.verticalBarsOnly) await configureNativeTransition().catch(() => undefined);
         const capabilities = await plugin.configure({ verticalBarsOnly: options.verticalBarsOnly === true });
         if (!capabilities.supported) return fallback('Requires iOS 26 or later');
-        let nativeEdge: VerticalBarEdge = null;
+        if (!options.verticalBarsOnly) stopVerticalBarsLayout = observeNativeVerticalBarsLayout(document);
+        // The application owns device state and selects the rail through placement classes.
         const nativeVerticalBars = () => {
-          const root = document.querySelector('ion-app.ios-theme-vertical-bars');
-          if (!root) return false;
-          // The trait stays unspecified when the OS cannot report a rail — for
-          // example an app linked against an SDK older than 27.1 — so the DOM
-          // class is trusted there. When the OS does report an edge, the native
-          // rail only takes over once the app has applied the matching class.
-          const domEdge = root.classList.contains('ios-theme-vertical-bars-left') ? 'left' : 'right';
-          return nativeEdge === null || physicalVerticalBarEdge(nativeEdge, elementRtl(root)) === domEdge;
+          const app = document.querySelector<HTMLElement>('ion-app.ios-theme-vertical-bars');
+          if (!app) return false;
+          const reported = nativePlacements.get(app);
+          if (!reported?.edge) return false;
+          const physicalEdge = app.classList.contains('ios-theme-vertical-bars-left') ? 'left' : 'right';
+          return physicalEdge === physicalVerticalBarEdge(reported.edge, reported.rtl ?? elementRtl(app));
         };
-        await plugin.startDeviceLayoutMonitoring();
-        monitoring = true;
-        placementListener = await plugin.addListener('deviceLayoutChange', ({ placement, webViewMetrics }) => {
-          nativeEdge = placement.edge;
-          if (!options.verticalBarsOnly) setConfig({ radius: webViewMetrics.radius });
-          document.defaultView?.dispatchEvent(new Event('nativeUIShellRefresh'));
-        });
-        nativeEdge = (await plugin.getDeviceLayout()).placement.edge;
+        if (!options.verticalBarsOnly) {
+          metricsListener = await plugin.addListener('webViewMetricsChange', (metrics) => {
+            setConfig({ radius: metrics.radius });
+          });
+          await configureNativeTransition().catch(() => undefined);
+        }
         const native = await createRuntime(document, plugin, options, nativeVerticalBars, options.verticalBarsOnly === true);
         runtime = combine(
           native,
@@ -215,15 +251,16 @@ export const enableNativeUIShell = (options: NativeUIShellOptions = {}): Promise
           suspend: () => prehide?.suspend(),
           release,
           destroy: async () => {
-            await placementListener?.remove().catch(() => {});
-            if (monitoring) await plugin.stopDeviceLayoutMonitoring().catch(() => {});
+            await metricsListener?.remove().catch(() => {});
+            stopVerticalBarsLayout?.();
             prehide?.stop();
+            stopModals();
           },
         });
       } catch (error) {
         await runtime?.destroy();
-        await placementListener?.remove().catch(() => {});
-        if (monitoring) await plugin.stopDeviceLayoutMonitoring().catch(() => {});
+        await metricsListener?.remove().catch(() => {});
+        stopVerticalBarsLayout?.();
         return fallback(error instanceof Error ? error.message : String(error));
       }
     })());

package/src/native/prehide.ts

@@ -1,3 +1,4 @@
+import { modalUsesVerticalBars } from './shared/modal';
 import { LIFECYCLE_DID_ENTER, LIFECYCLE_DID_LEAVE, LIFECYCLE_WILL_ENTER, LIFECYCLE_WILL_LEAVE } from '@ionic/core';
 import { VERTICAL_BARS_TRANSITION_CANCELED } from '../native-integration';
 import {
@@ -17,7 +18,7 @@ import {
   setVerticalBarsPlacement,
 } from './shared/dom';
 
-const overlays = 'ion-menu, ion-modal, ion-popover';
+const overlays = 'ion-menu, ion-popover';
 const sourceSelector = 'ion-back-button, ion-menu-button, ion-buttons, ion-button';
 // Realm- and teardown-safe: globals such as Element/HTMLElement may be gone
 // when a queued mutation microtask or a stale listener still runs.
@@ -60,7 +61,7 @@ export const prehideVerticalBarsToolbarSources = (doc: Document): { suspend: ()
     scopes.delete(scope);
   };
   const capture = (scope: HTMLElement) => {
-    if (!root()?.contains(scope) || scope.closest(overlays) || verticalBarsPages.isDeparted(scope)) return;
+    if (!root()?.contains(scope) || scope.closest(overlays) || !modalUsesVerticalBars(scope) || verticalBarsPages.isDeparted(scope)) return;
     const owned = scopes.get(scope) ?? new Set<HTMLElement>();
     const place = (element: HTMLElement, rail: boolean) => {
       if (owned.has(element)) return;
@@ -73,7 +74,8 @@ export const prehideVerticalBarsToolbarSources = (doc: Document): { suspend: ()
     };
     const sources = scope.matches('ion-back-button') ? [scope] : Array.from(scope.querySelectorAll<HTMLElement>(sourceSelector));
     sources.forEach((element) => {
-      if (element.closest(overlays) || (scope.matches('.ion-page') && routedPage(element) !== scope)) return;
+      if (!modalUsesVerticalBars(element) || element.closest(overlays) || (scope.matches('.ion-page') && routedPage(element) !== scope))
+        return;
       if (element.matches('ion-buttons')) {
         const children = childElements(element);
         const actions = children.filter((child) => eligible(child) && isVerticalBarsToolbarActionShape(child));
@@ -134,7 +136,7 @@ export const prehideVerticalBarsToolbarSources = (doc: Document): { suspend: ()
       Array.from(scopes.keys()).forEach(release);
       return;
     }
-    for (const scope of scopes.keys()) if (!scope.isConnected) release(scope);
+    for (const scope of scopes.keys()) if (!scope.isConnected || !modalUsesVerticalBars(scope)) release(scope);
     for (const [element, pending] of pendingBacks) if (element.shadowRoot || element.classList.contains('hydrated')) capture(pending.scope);
     // Ionic inserts the destination as invisible before WillEnter. Hide its
     // sources in that same mutation microtask; capture new DOM identities on active pages too.
@@ -193,6 +195,7 @@ export const prehideVerticalBarsToolbarSources = (doc: Document): { suspend: ()
   for (const name of [LIFECYCLE_WILL_LEAVE, LIFECYCLE_DID_ENTER, LIFECYCLE_DID_LEAVE])
     doc.addEventListener(name, onPageLifecycle, { capture: true, signal: listeners.signal });
   doc.addEventListener(VERTICAL_BARS_TRANSITION_CANCELED, onTransitionCanceled, { capture: true, signal: listeners.signal });
+  doc.defaultView?.addEventListener('nativeUIShellRefresh', reconcile, { signal: listeners.signal });
   reconcile();
   const mutationRelevant = (record: MutationRecord) => {
     if (record.type === 'childList')