@rdlabo/ionic-theme-ios27 1.1.0 → 1.2.0-0

package/dist/native-integration/index.d.ts

@@ -1,6 +1,6 @@
 import type { Animation } from '@ionic/core';
 export interface NativeUIShellIntegration {
-    suspend(scopes: HTMLElement[]): Promise<() => void>;
+    suspend(scopes: HTMLElement[]): Promise<(canceled?: boolean) => void>;
     search?(binding: NativeSearchBinding, active: boolean, focus?: boolean): Promise<boolean>;
 }
 export interface NativeSearchBinding {
@@ -13,8 +13,9 @@ export interface NativeSearchBinding {
 export declare const registerNativeSearch: (tabBar: HTMLElement, trigger: HTMLElement, footer: HTMLElement) => NativeSearchBinding;
 export declare const getNativeSearchBindings: (doc: Document) => NativeSearchBinding[];
 export declare const requestNativeSearch: (binding: NativeSearchBinding, active: boolean, focus?: boolean) => Promise<boolean>;
+export declare const VERTICAL_BARS_TRANSITION_CANCELED = "iosThemeVerticalBarsTransitionCanceled";
 export declare const setNativeUIShellIntegration: (doc: Document, runtime?: NativeUIShellIntegration) => void;
 export declare const isNativeUIShell: (element: HTMLElement) => boolean;
-export declare const suspendNativeUIShell: (scopes: HTMLElement[]) => Promise<() => void>;
+export declare const suspendNativeUIShell: (scopes: HTMLElement[]) => Promise<(canceled?: boolean) => void>;
 export declare const connectNativeUIShellTransition: (animation: Animation, entering: HTMLElement, leaving?: HTMLElement) => void;
 //# sourceMappingURL=index.d.ts.map

package/dist/native-integration/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/native-integration/index.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAE7C,MAAM,WAAW,wBAAwB;IACvC,OAAO,CAAC,MAAM,EAAE,WAAW,EAAE,GAAG,OAAO,CAAC,MAAM,IAAI,CAAC,CAAC;IACpD,MAAM,CAAC,CAAC,OAAO,EAAE,mBAAmB,EAAE,MAAM,EAAE,OAAO,EAAE,KAAK,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC,OAAO,CAAC,CAAC;CAC3F;AAED,MAAM,WAAW,mBAAmB;IAClC,MAAM,EAAE,WAAW,CAAC;IACpB,OAAO,EAAE,WAAW,CAAC;IACrB,MAAM,EAAE,WAAW,CAAC;IACpB,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,OAAO,CAAC;CAClB;AAID,eAAO,MAAM,oBAAoB,GAAI,QAAQ,WAAW,EAAE,SAAS,WAAW,EAAE,QAAQ,WAAW,KAAG,mBAOrG,CAAC;AAEF,eAAO,MAAM,uBAAuB,GAAI,KAAK,QAAQ,KAAG,mBAAmB,EACR,CAAC;AAEpE,eAAO,MAAM,mBAAmB,GAAU,SAAS,mBAAmB,EAAE,QAAQ,OAAO,EAAE,QAAQ,OAAO,KAAG,OAAO,CAAC,OAAO,CAC3B,CAAC;AAIhG,eAAO,MAAM,2BAA2B,GAAI,KAAK,QAAQ,EAAE,UAAU,wBAAwB,SAG5F,CAAC;AAEF,eAAO,MAAM,eAAe,GAAI,SAAS,WAAW,YAAiD,CAAC;AAEtG,eAAO,MAAM,oBAAoB,GAAU,QAAQ,WAAW,EAAE,KAAG,OAAO,CAAC,MAAM,IAAI,CACN,CAAC;AAGhF,eAAO,MAAM,8BAA8B,GAAI,WAAW,SAAS,EAAE,UAAU,WAAW,EAAE,UAAU,WAAW,SA8DhH,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/native-integration/index.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAE7C,MAAM,WAAW,wBAAwB;IACvC,OAAO,CAAC,MAAM,EAAE,WAAW,EAAE,GAAG,OAAO,CAAC,CAAC,QAAQ,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC,CAAC;IACtE,MAAM,CAAC,CAAC,OAAO,EAAE,mBAAmB,EAAE,MAAM,EAAE,OAAO,EAAE,KAAK,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC,OAAO,CAAC,CAAC;CAC3F;AAED,MAAM,WAAW,mBAAmB;IAClC,MAAM,EAAE,WAAW,CAAC;IACpB,OAAO,EAAE,WAAW,CAAC;IACrB,MAAM,EAAE,WAAW,CAAC;IACpB,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,OAAO,CAAC;CAClB;AAID,eAAO,MAAM,oBAAoB,GAAI,QAAQ,WAAW,EAAE,SAAS,WAAW,EAAE,QAAQ,WAAW,KAAG,mBAOrG,CAAC;AAEF,eAAO,MAAM,uBAAuB,GAAI,KAAK,QAAQ,KAAG,mBAAmB,EACR,CAAC;AAEpE,eAAO,MAAM,mBAAmB,GAAU,SAAS,mBAAmB,EAAE,QAAQ,OAAO,EAAE,QAAQ,OAAO,KAAG,OAAO,CAAC,OAAO,CAC3B,CAAC;AAGhG,eAAO,MAAM,iCAAiC,2CAA2C,CAAC;AAE1F,eAAO,MAAM,2BAA2B,GAAI,KAAK,QAAQ,EAAE,UAAU,wBAAwB,SAG5F,CAAC;AAEF,eAAO,MAAM,eAAe,GAAI,SAAS,WAAW,YAAiD,CAAC;AAEtG,eAAO,MAAM,oBAAoB,GAAU,QAAQ,WAAW,EAAE,KAAG,OAAO,CAAC,CAAC,QAAQ,CAAC,EAAE,OAAO,KAAK,IAAI,CACxB,CAAC;AAGhF,eAAO,MAAM,8BAA8B,GAAI,WAAW,SAAS,EAAE,UAAU,WAAW,EAAE,UAAU,WAAW,SAkEhH,CAAC"}

package/dist/native-integration/index.js

@@ -10,6 +10,7 @@ export const registerNativeSearch = (tabBar, trigger, footer) => {
 export const getNativeSearchBindings = (doc) => (searches.get(doc) ?? []).flatMap((entry) => entry.deref() ?? []);
 export const requestNativeSearch = async (binding, active, focus) => (await runtimes.get(binding.tabBar.ownerDocument)?.search?.(binding, active, focus)) ?? false;
 const runtimes = new WeakMap();
+export const VERTICAL_BARS_TRANSITION_CANCELED = 'iosThemeVerticalBarsTransitionCanceled';
 export const setNativeUIShellIntegration = (doc, runtime) => {
     if (runtime)
         runtimes.set(doc, runtime);
@@ -19,6 +20,11 @@ export const setNativeUIShellIntegration = (doc, runtime) => {
 export const isNativeUIShell = (element) => element.hasAttribute('data-native-ui-shell');
 export const suspendNativeUIShell = async (scopes) => (await runtimes.get(scopes[0]?.ownerDocument)?.suspend(scopes)) ?? (() => { });
 export const connectNativeUIShellTransition = (animation, entering, leaving) => {
+    if (leaving)
+        animation.onFinish((step) => {
+            if (step === 0)
+                leaving.dispatchEvent(new CustomEvent(VERTICAL_BARS_TRANSITION_CANCELED, { bubbles: true, detail: { entering } }));
+        });
     if (!runtimes.has(entering.ownerDocument))
         return;
     const scopes = leaving ? [entering, leaving] : [entering];
@@ -35,16 +41,16 @@ export const connectNativeUIShellTransition = (animation, entering, leaving) =>
     let end;
     const prepare = () => (preparation ?? (preparation = suspendNativeUIShell(scopes).then((resume) => {
         if (disposed)
-            resume();
+            resume(true);
         else
             release = resume;
     })));
-    const finish = () => {
-        release?.();
+    const finish = (canceled = false) => {
+        release?.(canceled);
         release = undefined;
         preparation = undefined;
     };
-    animation.onFinish(finish);
+    animation.onFinish((step) => finish(step === 0));
     animation.play = async (options) => {
         await prepare();
         if (disposed)
@@ -86,7 +92,7 @@ export const connectNativeUIShellTransition = (animation, entering, leaving) =>
     };
     animation.destroy = (...args) => {
         disposed = true;
-        finish();
+        finish(true);
         return destroy(...args);
     };
 };

package/dist/transition/index.d.ts

@@ -3,12 +3,12 @@ import type { Animation } from '@ionic/core';
 export declare const transition: (opts: TransitionOptions) => Promise<TransitionResult>;
 export declare const lifecycle: (el: HTMLElement | undefined, eventName: string) => void;
 export declare const waitForMount: () => Promise<void>;
-export declare const deepReady: (el: any | undefined) => Promise<void>;
+export declare const deepReady: (el: Element | undefined) => Promise<void>;
 export declare const setPageHidden: (el: HTMLElement, hidden: boolean) => void;
 export declare const getIonPageElement: (element: HTMLElement) => Element;
 export interface TransitionOptions extends NavOptions {
     progressCallback?: (ani: Animation | undefined) => void;
-    baseEl: any;
+    baseEl: HTMLElement;
     enteringEl: HTMLElement;
     leavingEl: HTMLElement | undefined;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/transition/index.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,UAAU,EAAgB,MAAM,aAAa,CAAC;AAC5D,OAAO,KAAK,EAAE,SAAS,EAAoB,MAAM,aAAa,CAAC;AAmB/D,eAAO,MAAM,UAAU,GAAI,MAAM,iBAAiB,KAAG,OAAO,CAAC,gBAAgB,CAyB5E,CAAC;AAkKF,eAAO,MAAM,SAAS,GAAI,IAAI,WAAW,GAAG,SAAS,EAAE,WAAW,MAAM,SAQvE,CAAC;AAeF,eAAO,MAAM,YAAY,QAAO,OAAO,CAAC,IAAI,CAE3C,CAAC;AAEF,eAAO,MAAM,SAAS,GAAU,IAAI,GAAG,GAAG,SAAS,KAAG,OAAO,CAAC,IAAI,CAyBjE,CAAC;AAEF,eAAO,MAAM,aAAa,GAAI,IAAI,WAAW,EAAE,QAAQ,OAAO,SAS7D,CAAC;AA6CF,eAAO,MAAM,iBAAiB,GAAI,SAAS,WAAW,YAWrD,CAAC;AA4BF,MAAM,WAAW,iBAAkB,SAAQ,UAAU;IACnD,gBAAgB,CAAC,EAAE,CAAC,GAAG,EAAE,SAAS,GAAG,SAAS,KAAK,IAAI,CAAC;IACxD,MAAM,EAAE,GAAG,CAAC;IACZ,UAAU,EAAE,WAAW,CAAC;IACxB,SAAS,EAAE,WAAW,GAAG,SAAS,CAAC;CACpC;AAED,MAAM,WAAW,gBAAgB;IAC/B,YAAY,EAAE,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,SAAS,CAAC;CACvB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/transition/index.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,UAAU,EAAgB,MAAM,aAAa,CAAC;AAC5D,OAAO,KAAK,EAAE,SAAS,EAAoB,MAAM,aAAa,CAAC;AAmB/D,eAAO,MAAM,UAAU,GAAI,MAAM,iBAAiB,KAAG,OAAO,CAAC,gBAAgB,CAyB5E,CAAC;AAkKF,eAAO,MAAM,SAAS,GAAI,IAAI,WAAW,GAAG,SAAS,EAAE,WAAW,MAAM,SAQvE,CAAC;AAeF,eAAO,MAAM,YAAY,QAAO,OAAO,CAAC,IAAI,CAE3C,CAAC;AAOF,eAAO,MAAM,SAAS,GAAU,IAAI,OAAO,GAAG,SAAS,KAAG,OAAO,CAAC,IAAI,CAyBrE,CAAC;AAEF,eAAO,MAAM,aAAa,GAAI,IAAI,WAAW,EAAE,QAAQ,OAAO,SAS7D,CAAC;AA6CF,eAAO,MAAM,iBAAiB,GAAI,SAAS,WAAW,YAWrD,CAAC;AA4BF,MAAM,WAAW,iBAAkB,SAAQ,UAAU;IACnD,gBAAgB,CAAC,EAAE,CAAC,GAAG,EAAE,SAAS,GAAG,SAAS,KAAK,IAAI,CAAC;IACxD,MAAM,EAAE,WAAW,CAAC;IACpB,UAAU,EAAE,WAAW,CAAC;IACxB,SAAS,EAAE,WAAW,GAAG,SAAS,CAAC;CACpC;AAED,MAAM,WAAW,gBAAgB;IAC/B,YAAY,EAAE,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,SAAS,CAAC;CACvB"}

package/dist/transition/index.js

@@ -159,7 +159,7 @@ export const deepReady = async (el) => {
             await waitForCustomElement;
             return;
         }
-        await Promise.all(Array.from(element.children).map(deepReady));
+        await Promise.all(Array.from(element.children).map((child) => deepReady(child)));
     }
 };
 export const setPageHidden = (el, hidden) => {

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

@@ -1 +1 @@
-{"version":3,"file":"ios.transition.d.ts","sourceRoot":"","sources":["../../src/transition/ios.transition.ts"],"names":[],"mappings":"AAAA,OAAO,EAAgC,MAAM,EAAE,MAAM,2BAA2B,CAAC;AACjF,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAC7C,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAIjD,OAAO,EAAE,MAAM,EAAE,CAAC;AAElB,MAAM,WAAW,mBAAmB;IAClC,MAAM,EAAE,MAAM,CAAC;CAChB;AASD,eAAO,MAAM,SAAS,GAAI,QAAQ,OAAO,CAAC,mBAAmB,CAAC,KAAG,IAEhE,CAAC;AAEF,eAAO,MAAM,sBAAsB,EAAE,CAAC,KAAK,EAAE,WAAW,EAAE,IAAI,EAAE,iBAAiB,KAAK,SACnB,CAAC"}
+{"version":3,"file":"ios.transition.d.ts","sourceRoot":"","sources":["../../src/transition/ios.transition.ts"],"names":[],"mappings":"AAAA,OAAO,EAAgC,MAAM,EAAE,MAAM,2BAA2B,CAAC;AACjF,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAC7C,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAIjD,OAAO,EAAE,MAAM,EAAE,CAAC;AAElB,MAAM,WAAW,mBAAmB;IAClC,MAAM,EAAE,MAAM,CAAC;CAChB;AAUD,eAAO,MAAM,SAAS,GAAI,QAAQ,OAAO,CAAC,mBAAmB,CAAC,KAAG,IAEhE,CAAC;AAEF,eAAO,MAAM,sBAAsB,EAAE,CAAC,KAAK,EAAE,WAAW,EAAE,IAAI,EAAE,iBAAiB,KAAK,SACnB,CAAC"}

package/dist/transition/ios.transition.js

@@ -6,6 +6,7 @@ const transitionConfig = {
     offLeftPercent: 30,
     getIonPageElement,
     connectNativeUIShellTransition,
+    shouldAnimateFixedBackButton: (navEl) => !navEl.closest('ion-app.ios-theme-vertical-bars'),
     radius: 0,
 };
 export const setConfig = (config) => {

package/dist/utils.d.ts

@@ -1,17 +1,17 @@
 import { AnimationPosition } from './sheets-of-glass/interfaces';
 import { IonicConfig } from '@ionic/core';
 export declare const getElementRoot: (el: HTMLElement, fallback?: HTMLElement) => HTMLElement | ShadowRoot;
-export declare const raf: (h: FrameRequestCallback) => any;
+export declare const raf: (h: FrameRequestCallback) => number;
 export declare const cloneElement: (tagName: string, useCache?: boolean) => HTMLElement;
 export declare const getStep: (targetX: number, animationPosition: AnimationPosition) => number;
 export declare const changeSelectedElement: (targetElement: HTMLElement, selectedElement: HTMLElement, effectTagName: string, selectedClassName: string) => void;
 export declare class Config {
     private m;
     reset(configObj: IonicConfig): void;
-    get(key: keyof IonicConfig, fallback?: any): any;
+    get<T>(key: keyof IonicConfig, fallback?: T): T;
     getBoolean(key: keyof IonicConfig, fallback?: boolean): boolean;
     getNumber(key: keyof IonicConfig, fallback?: number): number;
-    set(key: keyof IonicConfig, value: any): void;
+    set(key: keyof IonicConfig, value: unknown): void;
 }
 export declare const config: Config;
 //# sourceMappingURL=utils.d.ts.map

package/dist/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../src/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,8BAA8B,CAAC;AACjE,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAK1C,eAAO,MAAM,cAAc,GAAI,IAAI,WAAW,EAAE,WAAU,WAAgB,6BAEzE,CAAC;AAEF,eAAO,MAAM,GAAG,GAAI,GAAG,oBAAoB,QAQ1C,CAAC;AAEF,eAAO,MAAM,YAAY,GAAI,SAAS,MAAM,EAAE,WAAU,OAAc,KAAG,WAcxE,CAAC;AAEF,eAAO,MAAM,OAAO,GAAI,SAAS,MAAM,EAAE,mBAAmB,iBAAiB,WAQ5E,CAAC;AAEF,eAAO,MAAM,qBAAqB,GAChC,eAAe,WAAW,EAC1B,iBAAiB,WAAW,EAC5B,eAAe,MAAM,EACrB,mBAAmB,MAAM,KACxB,IAMF,CAAC;AAEF,qBAAa,MAAM;IACjB,OAAO,CAAC,CAAC,CAAqC;IAE9C,KAAK,CAAC,SAAS,EAAE,WAAW;IAI5B,GAAG,CAAC,GAAG,EAAE,MAAM,WAAW,EAAE,QAAQ,CAAC,EAAE,GAAG,GAAG,GAAG;IAKhD,UAAU,CAAC,GAAG,EAAE,MAAM,WAAW,EAAE,QAAQ,UAAQ,GAAG,OAAO;IAW7D,SAAS,CAAC,GAAG,EAAE,MAAM,WAAW,EAAE,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM;IAK5D,GAAG,CAAC,GAAG,EAAE,MAAM,WAAW,EAAE,KAAK,EAAE,GAAG;CAGvC;AAED,eAAO,MAAM,MAAM,QAA6B,CAAC"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../src/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,8BAA8B,CAAC;AACjE,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAK1C,eAAO,MAAM,cAAc,GAAI,IAAI,WAAW,EAAE,WAAU,WAAgB,6BAEzE,CAAC;AAEF,eAAO,MAAM,GAAG,GAAI,GAAG,oBAAoB,WAQ1C,CAAC;AAEF,eAAO,MAAM,YAAY,GAAI,SAAS,MAAM,EAAE,WAAU,OAAc,KAAG,WAcxE,CAAC;AAEF,eAAO,MAAM,OAAO,GAAI,SAAS,MAAM,EAAE,mBAAmB,iBAAiB,WAQ5E,CAAC;AAEF,eAAO,MAAM,qBAAqB,GAChC,eAAe,WAAW,EAC1B,iBAAiB,WAAW,EAC5B,eAAe,MAAM,EACrB,mBAAmB,MAAM,KACxB,IAMF,CAAC;AAEF,qBAAa,MAAM;IACjB,OAAO,CAAC,CAAC,CAAyC;IAElD,KAAK,CAAC,SAAS,EAAE,WAAW;IAI5B,GAAG,CAAC,CAAC,EAAE,GAAG,EAAE,MAAM,WAAW,EAAE,QAAQ,CAAC,EAAE,CAAC,GAAG,CAAC;IAK/C,UAAU,CAAC,GAAG,EAAE,MAAM,WAAW,EAAE,QAAQ,UAAQ,GAAG,OAAO;IAW7D,SAAS,CAAC,GAAG,EAAE,MAAM,WAAW,EAAE,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM;IAK5D,GAAG,CAAC,GAAG,EAAE,MAAM,WAAW,EAAE,KAAK,EAAE,OAAO;CAG3C;AAED,eAAO,MAAM,MAAM,QAA6B,CAAC"}

package/dist/utils.js

@@ -61,7 +61,7 @@ export class Config {
         return !!val;
     }
     getNumber(key, fallback) {
-        const val = parseFloat(this.m.get(key));
+        const val = parseFloat(String(this.m.get(key)));
         return isNaN(val) ? (fallback !== undefined ? fallback : NaN) : val;
     }
     set(key, value) {

package/dist/vertical-bars.d.ts

@@ -0,0 +1,4 @@
+export { enableVerticalControlArea, setVerticalControlAreaPlacement, IonicNativeUIShell } from './native';
+export { HingeStatus } from './native';
+export type { DeviceLayout, NativeUIShellStatus, NativeUIShellSuspension, VerticalBarEdge, VerticalControlAreaHandle } from './native';
+//# sourceMappingURL=vertical-bars.d.ts.map

package/dist/vertical-bars.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"vertical-bars.d.ts","sourceRoot":"","sources":["../src/vertical-bars.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,yBAAyB,EAAE,+BAA+B,EAAE,kBAAkB,EAAE,MAAM,UAAU,CAAC;AAC1G,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AACvC,YAAY,EAAE,YAAY,EAAE,mBAAmB,EAAE,uBAAuB,EAAE,eAAe,EAAE,yBAAyB,EAAE,MAAM,UAAU,CAAC"}

package/dist/vertical-bars.js

@@ -0,0 +1,2 @@
+export { enableVerticalControlArea, setVerticalControlAreaPlacement, IonicNativeUIShell } from './native';
+export { HingeStatus } from './native';

package/docs/iphone-duo.md

@@ -0,0 +1,255 @@
+---
+title: iPhone Duo support (experimental)
+---
+
+# iPhone Duo support (experimental)
+
+iPhone Duo support is experimental, including the Vertical Control Area, device-layout reporting, and posture-driven split-pane layout. It is planned for release alongside [Native UI Shell](https://docs.rdlabo.dev/projects/ionic-theme-ios27/docs/native-ui-shell). Its APIs and supported behavior may change.
+
+iPhone Duo folds along a hinge and reserves a physical system rail on one side of the display. On iOS 27.1 and later, the system reports both facts to the app: the rail's edge with its safe-area inset, and the hinge posture while the device opens and closes.
+
+This package provides three independent pieces for that hardware. Each works **without the iOS 27 theme stylesheets** and **without the full Native UI Shell**:
+
+- `dist/css/vertical-bars.css` — opt-in classes that reserve the rail's safe area, plus a registered custom property for a posture-driven split-pane width.
+- `enableVerticalControlArea()` — moves eligible tabs and toolbar controls into the reserved area. On Capacitor iOS they are rendered by a native SwiftUI `TabView` and toolbar; everywhere else the same controls appear as Web clones.
+- Device-layout reporting — the bundled Capacitor plugin reports rail placement, hinge status and the WebView corner radius through `getDeviceLayout()` and the `deviceLayoutChange` event.
+
+The pieces map to distinct responsibilities. The plugin reports **device facts** and never touches the DOM. The **application** decides what each value means for its layout. The **stylesheet and runtime** apply that decision — reserving space, projecting controls and adapting the split pane. Keeping these boundaries separate makes the native values easy to mock in tests and keeps the theme's own responsibility small.
+
+## Choose what to adopt
+
+| Goal                                             | Stylesheet          | Runtime                                                            |
+| ------------------------------------------------ | ------------------- | ------------------------------------------------------------------ |
+| Hinge posture only (split pane, layout switches) | `vertical-bars.css` | none — subscribe to the plugin directly                            |
+| Vertical rail for tabs and toolbar actions       | `vertical-bars.css` | `enableVerticalControlArea()`                                      |
+| Native shell plus the rail                       | `vertical-bars.css` | `enableNativeUIShell()` — already includes rail and posture support |
+
+```scss
+@use '@rdlabo/ionic-theme-ios27/dist/css/vertical-bars.css';
+```
+
+The stylesheet never changes ordinary Ionic UI by itself; every rule requires an opt-in class. Load it unconditionally — these values are simulation and layout inputs, independent from Ionic's normal safe-area variables.
+
+The `/vertical-bars` entry point imports `@capacitor/core` at module load, so install it even for Web-only use (it is an optional peer dependency). Apps that want only the stylesheet and its opt-in classes need nothing else.
+
+## Read the device layout
+
+`npx cap sync ios` registers the plugin automatically; no `configure` call is needed for device layout. An app that only wants the hinge posture — for example to drive a split pane — uses this API alone, with no projection runtime:
+
+```ts
+import { Capacitor } from '@capacitor/core';
+import { HingeStatus, IonicNativeUIShell } from '@rdlabo/ionic-theme-ios27/vertical-bars';
+
+// The plugin has no Web implementation; guard the subscription.
+if (Capacitor.getPlatform() === 'ios') {
+  await IonicNativeUIShell.startDeviceLayoutMonitoring();
+  const listener = await IonicNativeUIShell.addListener('deviceLayoutChange', ({ hingeStatus }) => {
+    // apply the posture
+  });
+  const { hingeStatus } = await IonicNativeUIShell.getDeviceLayout(); // initial value
+
+  // When the consumer goes away:
+  // await listener.remove();
+  // await IonicNativeUIShell.stopDeviceLayoutMonitoring();
+}
+```
+
+`DeviceLayout` carries:
+
+| Field                   | Meaning                                                                                                    |
+| ----------------------- | ---------------------------------------------------------------------------------------------------------- |
+| `placement`             | `{ edge: 'leading' \| 'trailing' \| null, inset }` — the rail's logical edge in the reading direction and its UIKit safe-area inset in points; `edge` is `null` on devices without a rail |
+| `hingeStatus`           | `HingeStatus.Closed`, `PartiallyOpen`, or `FullyOpen`; `null` when the device reports no hinge             |
+| `webViewMetrics.radius` | the WebView's effective top-left corner radius in points                                                   |
+
+`edge` is a **logical** direction: `'leading'` is where a reader starts a line — the physical left in LTR and the physical right in RTL. This is the same vocabulary as UIKit's `verticalBarEdge` trait and `@erkamyaman/capacitor-foldable`'s `getBarPlacement()`, so values from that plugin can be applied as-is without conversion.
+
+Monitoring is reference-counted: each consumer pairs `startDeviceLayoutMonitoring()` with `stopDeviceLayoutMonitoring()`, and events stop when the last consumer releases it. `getDeviceLayout()` also works without monitoring for a one-shot read. While `enableVerticalControlArea()` or `enableNativeUIShell()` has native projection active it already holds a monitoring reference, so those users only add a listener and read the initial value — no extra start/stop pair.
+
+**Build requirement:** iOS only enables the vertical bar for apps linked against the iOS 27.1 SDK or later — build with Xcode 27.1 or newer. Apps built with an older SDK run in backward-compatibility mode on iPhone Duo: the system reserves no rail, `placement.edge` stays `null`, `inset` stays `0`, and `hingeStatus` stays `null`. Everything else still works in that state — the opt-in classes reserve the DOM strip and the rail follows whatever placement the application applies — so the compat build remains usable and testable; only the real system rail, its measured inset and hinge posture require the newer toolchain.
+
+## Reserve the vertical rail
+
+Add `.ios-theme-vertical-bars` to `ion-app` to reserve the rail region on the physical right, or add `.ios-theme-vertical-bars-left` as well to use the physical left:
+
+```html
+<ion-app class="ios-theme-vertical-bars">...</ion-app>
+```
+
+The classes are physical — `-left` always means the physical left edge — because CSS and the native renderer work in physical coordinates. `setPlacement` (below) is the usual way to apply them: it accepts the logical `placement.edge` reported by the plugin and resolves it through the document's direction, so an RTL app does not need its own conversion.
+
+For Chrome development, no native plugin is needed — the class alone reserves `80px` to simulate iPhone Duo. When `setPlacement` receives a native placement, the measured UIKit inset replaces the simulated width, even when that inset is less than `80px`. Override `--ios-theme-vertical-bars-safe-area-left` or `--ios-theme-vertical-bars-safe-area-right` when simulating a different layout.
+
+This keeps routers and component backgrounds full-viewport. `ion-content` moves its scroll foreground, `ion-toolbar` moves its container foreground, and `ion-fab` adjusts only when placed beside the system UI. The corresponding Ionic safe-area variable is reset inside those foreground components so descendants do not add the inset again.
+
+`ion-menu`, `ion-modal`, and `ion-popover` are handled as separate surfaces: their internal foreground components do not receive the main-page conversion and retain Ionic's standard safe-area handling. A menu presented beside the system UI keeps Ionic's full-viewport animation host and offsets only its visible container by the corresponding inset; a menu from the opposite side is unchanged. Left and right remain physical coordinates in RTL, while Ionic's `side="start"` and `side="end"` values remain logical.
+
+The mode is component-mode independent: an app can keep Ionic `mode: 'md'` on iOS and still enable Vertical Bars. No component needs `mode="ios"`.
+
+## Project controls into the rail
+
+Start the standalone runtime once at application startup:
+
+```ts
+import { Capacitor } from '@capacitor/core';
+import { enableVerticalControlArea, IonicNativeUIShell } from '@rdlabo/ionic-theme-ios27/vertical-bars';
+
+// Start on Chrome too; the Web projection stays idle until the class is present.
+const rail = await enableVerticalControlArea();
+
+if (Capacitor.getPlatform() === 'ios') {
+  // The runtime already monitors device layout; only subscribe.
+  await IonicNativeUIShell.addListener('deviceLayoutChange', ({ placement }) => rail.setPlacement(placement));
+  rail.setPlacement((await IonicNativeUIShell.getDeviceLayout()).placement);
+}
+```
+
+`setPlacement` on the handle and the exported `setVerticalControlAreaPlacement` are the same function; either applies the application's chosen placement to the CSS layout and both projections. It requires a mounted `ion-app` — call it after the app root exists.
+
+- Pass the `placement` object from `getDeviceLayout()`/`deviceLayoutChange`, or just a logical edge: `'leading'` or `'trailing'`. The logical edge resolves to a physical side through the nearest `dir` attribute, or through an explicit `rtl` second argument when the app already knows its direction.
+- Pass `null` to restore the ordinary layout.
+- The device-layout listener reports what iOS chose; the application decides whether to apply it. An app that wants a fixed edge regardless of the report can simply pass its own `'leading'` or `'trailing'`.
+
+Start either `enableVerticalControlArea()` or the full `enableNativeUIShell()` — not both. Repeating the same configuration returns the shared runtime; starting a different configuration while it is active throws an error. The application should have one owner responsible for destroying that runtime. If the app already uses `enableNativeUIShell()`, keep that single runtime and call `setVerticalControlAreaPlacement(placement)` from its listener.
+
+On supported iOS versions the runtime hands eligible tabs, back navigation, menu buttons, and fixed-toolbar actions to a native SwiftUI `TabView` and toolbar; on Web, Android, or when native projection is unavailable, Web clones remain the fallback. Back navigation can come from outside a fixed toolbar; other actions still require one. Fixed-toolbar actions need an icon or SVG, no direct text node, and standard `fill="default"` or `fill="clear"` — text-only actions stay in the original Web toolbar. Add `.ios-theme-horizontal-only` to an `ion-buttons` group or individual `ion-button` to keep it in the horizontal toolbar. Placement is chosen when a routed page enters; changing an existing button's content does not move it between the toolbar and rail until the page leaves and re-enters. Menus, modals, and popovers retain their own toolbar layout.
+
+When the app contains `ion-tabs`, its tab bar moves into the reserved region and aligns above the bottom safe area; the Ionic `slot` value does not select a different position. Without native projection, the stable Web rail is icon-only, matching a four-tab SwiftUI `TabView`. While the user presses and drags across that rail, every icon-and-label tab reveals its label so the pending destination stays identifiable. The Web tab bar receives pointer input in the simulated system region. Use `ion-menu` when navigation should become a sidebar; this mode does not convert tabs into a menu. Web clones also work when no `ion-tabs` exists. Disabling the mode or leaving the page removes the native ownership or Web clones and restores their sources. Override `--ios-theme-vertical-bars-toolbar-top` when the simulated system controls use a different vertical layout.
+
+## Adapt the split pane
+
+For a side-by-side menu on iPhone Duo, opt the `ion-split-pane` into the separately measured Settings layout. The sidebar is 320pt when fully unfolded and reaches the display midpoint when half-opened (50vw). The application supplies the posture; both states have the same viewport width, so a width media query cannot distinguish them:
+
+```html
+<ion-split-pane
+  [class.ios-theme-split-pane-half-open]="halfOpened"
+  contentId="main-content"
+  when="(min-width: 900px)"
+>
+  <ion-menu contentId="main-content">...</ion-menu>
+  <div id="main-content">...</div>
+</ion-split-pane>
+```
+
+Set the ordinary split-pane width to 320pt in the application's stylesheet, and let the half-open class change only the width value:
+
+```css
+ion-split-pane {
+  --ios-theme-menu-width: var(--ios-theme-split-pane-width);
+  --side-width: var(--ios-theme-menu-width);
+  --side-max-width: var(--ios-theme-menu-width);
+  transition: --ios-theme-split-pane-width 300ms ease;
+}
+```
+
+The registered `--ios-theme-split-pane-width` defaults to `320px`; `.ios-theme-split-pane-half-open` sets it to `50vw`. Set `halfOpened` when `deviceLayoutChange` reports `HingeStatus.PartiallyOpen` (and read the initial value with `getDeviceLayout`). Ionic's `when` decides whether the menu is a persistent side pane; choose its breakpoint so the pane is hidden when closed — `null` means the device has no hinge, so restore the ordinary breakpoint for it. The application chooses where to apply this width rule; an ordinary split pane elsewhere is unchanged. This layout does not enable Vertical Bars or move an overlay menu.
+
+## Vertical Control Area API
+
+The generated reference below documents the handle returned by `enableVerticalControlArea()`.
+
+<docgen-index>
+
+* [`setPlacement(...)`](#setplacement)
+* [`getStatus()`](#getstatus)
+* [`suspend()`](#suspend)
+* [`destroy()`](#destroy)
+* [Interfaces](#interfaces)
+* [Type Aliases](#type-aliases)
+
+</docgen-index>
+
+<docgen-api>
+<!--Update the source file JSDoc comments and rerun docgen to update the docs below-->
+
+### setPlacement(...)
+
+```typescript
+setPlacement(placement: VerticalBarEdge | VerticalBarPlacement, rtl?: boolean | undefined) => void
+```
+
+Applies the application's chosen placement to both Web and native controls.
+
+| Param           | Type                                                                                                                    |
+| --------------- | ----------------------------------------------------------------------------------------------------------------------- |
+| **`placement`** | <code><a href="#verticalbaredge">VerticalBarEdge</a> \| <a href="#verticalbarplacement">VerticalBarPlacement</a></code> |
+| **`rtl`**       | <code>boolean</code>                                                                                                    |
+
+--------------------
+
+
+### getStatus()
+
+```typescript
+getStatus() => NativeUIShellStatus
+```
+
+Returns the current Web/native projection state.
+
+**Returns:** <code><a href="#nativeuishellstatus">NativeUIShellStatus</a></code>
+
+--------------------
+
+
+### suspend()
+
+```typescript
+suspend() => Promise<NativeUIShellSuspension>
+```
+
+Restores projected controls to the Web until the returned lease is resumed.
+
+**Returns:** <code>Promise&lt;<a href="#nativeuishellsuspension">NativeUIShellSuspension</a>&gt;</code>
+
+--------------------
+
+
+### destroy()
+
+```typescript
+destroy() => Promise<void>
+```
+
+Stops synchronization, restores Web controls and releases native resources.
+
+--------------------
+
+
+### Interfaces
+
+
+#### VerticalBarPlacement
+
+| Prop        | Type                                                        | Description                                                |
+| ----------- | ----------------------------------------------------------- | ---------------------------------------------------------- |
+| **`edge`**  | <code><a href="#verticalbaredge">VerticalBarEdge</a></code> |                                                            |
+| **`inset`** | <code>number</code>                                         | UIKit safe-area inset on the vertical-bar edge, in points. |
+
+
+#### NativeUIShellStatus
+
+| Prop            | Type                                        |
+| --------------- | ------------------------------------------- |
+| **`state`**     | <code>'native' \| 'stopped' \| 'web'</code> |
+| **`projected`** | <code>number</code>                         |
+| **`updates`**   | <code>number</code>                         |
+| **`reason`**    | <code>string</code>                         |
+
+
+#### NativeUIShellSuspension
+
+| Method     | Signature                    | Description                                                                                    |
+| ---------- | ---------------------------- | ---------------------------------------------------------------------------------------------- |
+| **resume** | () =&gt; Promise&lt;void&gt; | Releases this suspension. Native projection resumes after all active suspensions are released. |
+
+
+### Type Aliases
+
+
+#### VerticalBarEdge
+
+Logical edge in the reading direction, matching UIVerticalBarEdge and capacitor-foldable.
+
+<code>'leading' | 'trailing' | null</code>
+
+</docgen-api>

package/docs/migration.md

@@ -6,7 +6,7 @@ title: Migration
 
 ## From the iOS 26 theme
 
-For an app using `@rdlabo/ionic-theme-ios26`, the recommended migration keeps that package and adds `@rdlabo/ionic-theme-ios27`. The [README setup](https://docs.rdlabo.dev/projects/ionic-theme-ios27#get-started) selects iOS 27 or iOS 26 styles by browser capability and leaves Ionic's default iOS appearance on older browsers.
+For an app using `@rdlabo/ionic-theme-ios26`, the recommended migration keeps that package and adds `@rdlabo/ionic-theme-ios27`. The [README setup](https://docs.rdlabo.dev/projects/ionic-theme-ios27/docs/readme#get-started) selects iOS 27 or iOS 26 styles by browser capability and leaves Ionic's default iOS appearance on older browsers.
 
 ### 1. Add the new package
 
@@ -104,7 +104,7 @@ To switch entirely to iOS 27, remove the iOS 26 package and replace its styleshe
 + @use '@rdlabo/ionic-theme-ios27/src/styles/md-remove-ios-class-effect.scss';
 ```
 
-Change the animation import from `@rdlabo/ionic-theme-ios26` to `@rdlabo/ionic-theme-ios27`; the existing `isPlatform('ios')` configuration can stay. See the README's [iOS 27-only setup](https://docs.rdlabo.dev/projects/ionic-theme-ios27#use-only-the-ios-27-theme). Unconditional imports apply the new styles on every browser using Ionic iOS mode.
+Change the animation import from `@rdlabo/ionic-theme-ios26` to `@rdlabo/ionic-theme-ios27`; the existing `isPlatform('ios')` configuration can stay. See the README's [iOS 27-only setup](https://docs.rdlabo.dev/projects/ionic-theme-ios27/docs/readme#use-only-the-ios-27-theme). Unconditional imports apply the new styles on every browser using Ionic iOS mode.
 
 ## iOS 27 naming
 

package/docs/native-ui-shell.md

@@ -6,7 +6,7 @@ title: Native UI Shell (Experimental)
 
 Native UI Shell is experimental. Its API and supported controls may change.
 
-Native UI Shell gives an Ionic app native navigation and action controls around its Web content. The optional Capacitor iOS plugin renders supported fixed Ionic controls with UIKit and the system's Liquid Glass material. Page content, scrolling, application state and routing remain in Ionic's WebView.
+Native UI Shell gives an Ionic app native navigation and action controls around its Web content. The optional Capacitor iOS plugin renders supported fixed Ionic controls with UIKit or SwiftUI and the system's Liquid Glass material. Page content, scrolling, application state and routing remain in Ionic's WebView.
 
 ## Background
 
@@ -50,7 +50,7 @@ Native appearance follows the applied class, system or always-dark theme CSS. Sy
 | `ion-segment`                                 | Fixed toolbar, non-scrollable, text **or** one icon per item                                              | `UISegmentedControl`                                                  |
 | `ion-fab` / `ion-fab-button` / `ion-fab-list` | Glass FAB in an `ion-content` fixed slot; one main button and optional directional lists                  | Persistent glass `UIButton` per button; one FAB synchronization group |
 
-Only iOS-mode components with the theme variables installed are eligible. `ionic-theme-disabled`, `ios-theme-disabled`, and the legacy `ios26-disabled` on an element or ancestor always exclude it. A disabled theme on one tab/segment item keeps its whole group on the Web.
+For the ordinary Native UI Shell, only iOS-mode components with the theme variables installed are eligible. Explicitly enabled Vertical Bars is mode-independent as described below. `ionic-theme-disabled`, `ios-theme-disabled`, and the legacy `ios26-disabled` on an element or ancestor always exclude it. A disabled theme on one tab/segment item keeps its whole group on the Web.
 
 Use `ios-theme-shell-disabled` to disable only the iOS Native UI Shell while keeping the Web theme. It excludes the element and all its descendants. Adding or removing the class at runtime automatically restores Web rendering or re-evaluates native eligibility.
 
@@ -62,7 +62,7 @@ Use `ios-theme-shell-disabled` to disable only the iOS Native UI Shell while kee
 
 If a child inside a shared native surface opts out, the entire surface stays on the Web: this includes button groups, tab bars, segments and FAB lists. Opting out of the search FAB or any part of the search footer disables native search integration; the tab bar can still render natively if it remains eligible.
 
-Placement is required even when the appearance is glass. Buttons, back buttons, menu-button groups and segments need a toolbar directly inside `ion-header` or `ion-footer`, with no `ion-content` ancestor around the control. Buttons directly inside a header/footer, standalone toolbars, and toolbars or headers nested in scrolling content stay on the Web. FABs without `slot="fixed"` also stay on the Web. Moving a projected control to an excluded location restores its Web rendering; moving it back re-evaluates eligibility.
+Placement is required even when the appearance is glass. In the ordinary Native UI Shell, buttons, back buttons, menu-button groups and segments need a toolbar directly inside `ion-header` or `ion-footer`, with no `ion-content` ancestor around the control. Buttons directly inside a header/footer, standalone toolbars, and toolbars or headers nested in scrolling content stay on the Web. FABs without `slot="fixed"` also stay on the Web. Moving a projected control to an excluded location restores its Web rendering; moving it back re-evaluates eligibility. When `.ios-theme-vertical-bars` is enabled, a standard `ion-back-button` can instead be projected to the Vertical Control Area from outside a fixed toolbar, including routed content or a persistent app shell. The application chooses where to enable this mode and which Ionic component mode to use; Vertical Bars projection does not require `ios` mode classes. Overlays, collapsed headers, opted-out controls and departed pages are excluded.
 
 Native tabs accept equal-width items with Ionic's default `layout="icon-top"`. The native bar uses a local compact horizontal and regular vertical size class to preserve the Web's stacked icon/label arrangement on iPad and in landscape. This does not change the app's size class. Label size and weight follow the Web snapshot. Other explicit Ionic layouts (`icon-start`, `icon-end`, `icon-bottom`, `icon-hide`, `label-hide`) and unequal item widths keep the entire tab bar on the Web. Start, center and end placement follow the original `ion-tab-bar`, including RTL. Directional `ion-icon` artwork preserves its rendered RTL flip.
 
@@ -167,6 +167,18 @@ Suspensions are nestable and `resume()` is idempotent. Native projection resumes
 
 The native material and control appearance follow the running iOS version; an iOS 26 device does not acquire iOS 27's appearance merely by installing this theme.
 
+## Support iPhone Duo (experimental)
+
+iPhone Duo support is experimental, including standalone use without Native UI Shell. It is planned for release alongside Native UI Shell. Its APIs and supported behavior may change.
+
+The standalone Vertical Control Area entry point (`@rdlabo/ionic-theme-ios27/vertical-bars`) and `dist/css/vertical-bars.css` work without loading the iOS 27 theme. Call `enableVerticalControlArea()` for this use case; it projects only controls placed in the vertical area. Apps already calling `enableNativeUIShell()` should keep that single runtime rather than starting both. See [iPhone Duo support](https://docs.rdlabo.dev/projects/ionic-theme-ios27/docs/iphone-duo) for the complete setup, including hinge posture and the split-pane layout for apps that do not use this shell at all.
+
+On supported iOS versions, adding `.ios-theme-vertical-bars` changes only controls that the system relocates into the physical side rail. Native UI Shell presents eligible tabs, back navigation, menu buttons, and toolbar actions through a SwiftUI `TabView` and toolbar once the class is applied. When the OS reports a rail edge — on iPhone Duo linked against iOS 27.1 or later — it must agree with the applied placement; a disagreeing report keeps the rail on the Web. Older toolchains that cannot report an edge trust the DOM placement directly. SwiftUI owns their adaptive placement and Liquid Glass appearance; Ionic remains the source of labels, icons, selected/disabled state, routing, form submission, and click handlers.
+
+The SwiftUI surface is clipped and hit-tested to the system rail. Web content remains visible and interactive outside that physical region. The runtime optimistically updates tab selection before forwarding the action to the original `ion-tab-button`, using the same event and stale-revision protection as the other native controls. Menus, modals, and popovers remain independent surfaces and are not moved into the main-page rail.
+
+This mode accepts standard `fill="default"` and `fill="clear"` fixed-toolbar buttons because SwiftUI determines their compact representation. Solid, outline, custom-color, scrolling, and explicitly opted-out controls remain on the Web. Add `.ios-theme-horizontal-only` to an `ion-buttons` group or individual `ion-button` to keep it in the horizontal Web toolbar. On Web, Android, older iOS, or when native projection is unavailable during setup, the Web projection remains the fallback.
+
 ## Native UI Shell API
 
 The generated reference below documents the handle returned by `enableNativeUIShell()`. The underlying Capacitor bridge and its control-snapshot protocol are implementation details.

package/docs/special-markup.md

@@ -47,6 +47,12 @@ Add one of `tab-bar-position-start`, `tab-bar-position-center`, or `tab-bar-posi
 
 These classes do not reposition a separate `ion-fab`; leave room for it when choosing the bar's position.
 
+## Support iPhone Duo (experimental)
+
+iPhone Duo support is experimental. It is planned for release alongside Native UI Shell. Its APIs and supported behavior may change.
+
+iPhone Duo support — the vertical system rail, hinge posture, and the posture-driven split-pane layout — is independent of the iOS 27 theme and the full Native UI Shell. See [iPhone Duo support](https://docs.rdlabo.dev/projects/ionic-theme-ios27/docs/iphone-duo) for the complete setup, including device-layout monitoring without a projection runtime.
+
 ## Two-line inset list items
 
 Place an unslotted `ion-label` immediately alongside an unslotted `ion-note` to render a two-line item. When using the iOS-style inset-list background, wrap the items in `ion-item-group`; keep `ion-list-header` outside the group.

package/ios/Sources/IonicNativeUIShellPlugin/Components/ShellSearchController.swift

@@ -45,8 +45,22 @@ private final class ShellSearchInputDelegate: NSObject, UITextFieldDelegate {
     func textFieldShouldClear(_ textField: UITextField) -> Bool { clear?(); return false }
 }
 
+// Lets the plugin registry retain iOS 26-gated search controllers without
+// availability-gated stored properties, mirroring ShellVerticalBarsControlling.
+protocol ShellSearchControlling: AnyObject {
+    var surface: ShellSearchHost { get }
+    var ownsKeyboard: Bool { get }
+    var ownsKeyboardChrome: Bool { get }
+    var transitionCoordinator: UIViewControllerTransitionCoordinator? { get }
+    var activate: ((String) -> Void)? { get set }
+    var changed: ((String, ShellSearchPhase, String, Bool, Int) -> Int)? { get set }
+    func attach(to parent: UIViewController, in container: UIView)
+    func detach()
+    func apply(_ snapshot: ShellControl, webFrame: CGRect, barFrame: CGRect, triggerFrame: CGRect, rendering: ShellRendering) -> Bool
+}
+
 @available(iOS 26.0, *)
-final class ShellSearchController: UITabBarController, UITabBarControllerDelegate, UISearchBarDelegate {
+final class ShellSearchController: UITabBarController, UITabBarControllerDelegate, UISearchBarDelegate, ShellSearchControlling {
     // Wire stays active+focused; local session drives chrome (idle / presented / focused).
     private enum Session: Equatable { case idle, presented, focused }