@rdlabo/ionic-theme-ios27 1.2.0-beta.pr231.sha22a35d481cf3 → 1.2.0-beta.pr233.sha647eef34274b

package/README.md

@@ -125,6 +125,15 @@ Use this markup to preview the inset grouped list look. For the list structure t
 
 Keep your existing Ionic theme and move tabs and supported toolbar actions into a vertical side area. **Start in Chrome** with one stylesheet, an app class, and `enableVerticalControlArea()`; then connect the layout to iPhone Duo device events for the system rail and hinge posture.
 
+Device state is supplied by [`@erkamyaman/capacitor-foldable`](https://github.com/erkamyaman/capacitor-foldable), installed in your app:
+
+```bash
+npm install @erkamyaman/capacitor-foldable
+npx cap sync
+```
+
+Use its `getBarPlacement()` / `barPlacementChange` and `getFoldState()` / `foldStateChange` APIs to drive the theme's layout. Device monitoring is not bundled with the theme.
+
 Follow [iPhone Duo with your existing theme](https://docs.rdlabo.dev/projects/ionic-theme-ios27/docs/iphone-duo-with-original-theme) for the browser preview and iOS setup. For shared layout rules and APIs, see [iPhone Duo support](https://docs.rdlabo.dev/projects/ionic-theme-ios27/docs/iphone-duo). Available in `1.2.0-0` as an experimental feature; APIs and supported behavior may change.
 
 ### Use only the iOS 27 theme

package/dist/native/components/searchable-tabs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"searchable-tabs.d.ts","sourceRoot":"","sources":["../../../src/native/components/searchable-tabs.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAGpE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AACrD,OAAO,KAAK,EAA0B,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAmB/E,eAAO,MAAM,mBAAmB,GAAI,KAAK,QAAQ,EAAE,IAAI,CAAC,OAAO,EAAE,OAAO,KAAK,MAAM,EAAE,UAAU,MAAM,IAAI;sBA8InF,OAAO;;yBAmBJ,SAAS,EAAE,WAAW,CAAC,OAAO,EAAE,WAAW,KAAK,OAAO,GAAG,SAAS,EAAE;yBAlJhE,mBAAmB;;mBAkV9B,mBAAmB,YAAY,MAAM;uBAKjC,mBAAmB,UAAU,OAAO;qBAUtC,WAAW;gBAGhB,MAAM,EAAE;iBASP,gBAAgB;oBAqCb,mBAAmB;;CAoBtC,CAAC"}
+{"version":3,"file":"searchable-tabs.d.ts","sourceRoot":"","sources":["../../../src/native/components/searchable-tabs.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAGpE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AACrD,OAAO,KAAK,EAA0B,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAmB/E,eAAO,MAAM,mBAAmB,GAAI,KAAK,QAAQ,EAAE,IAAI,CAAC,OAAO,EAAE,OAAO,KAAK,MAAM,EAAE,UAAU,MAAM,IAAI;sBA8InF,OAAO;;yBAwBJ,SAAS,EAAE,WAAW,CAAC,OAAO,EAAE,WAAW,KAAK,OAAO,GAAG,SAAS,EAAE;yBAvJhE,mBAAmB;;mBA+U9B,mBAAmB,YAAY,MAAM;uBAKjC,mBAAmB,UAAU,OAAO;qBAUtC,WAAW;gBAGhB,MAAM,EAAE;iBASP,gBAAgB;oBAqCb,mBAAmB;;CAoBtC,CAAC"}

package/dist/native/components/searchable-tabs.js

@@ -151,7 +151,11 @@ export const createSearchSupport = (doc, id, schedule) => {
         keyboard(visible) {
             keyboardVisible = visible;
             if (!visible) {
-                states.forEach((state) => (state.keyboardHidden = false));
+                for (const [binding, state] of states) {
+                    if (state.keyboardHidden)
+                        binding.tabBar.classList.remove('tab-bar-hidden');
+                    state.keyboardHidden = false;
+                }
                 releaseKeyboardResize();
             }
             schedule();
@@ -184,10 +188,7 @@ export const createSearchSupport = (doc, id, schedule) => {
             };
             for (const binding of bindings) {
                 const candidate = candidates.find((c) => c.element === binding.tabBar);
-                if (!candidate ||
-                    candidate.control.search ||
-                    candidate.control.placement === 'vertical-bars' ||
-                    binding.tabBar.getAttribute('slot') !== 'bottom')
+                if (!candidate || candidate.control.search || binding.tabBar.getAttribute('slot') !== 'bottom')
                     continue;
                 const fab = binding.trigger.parentElement;
                 if (!fab?.matches('ion-fab[slot="fixed"]') ||
@@ -415,8 +416,6 @@ export const createSearchSupport = (doc, id, schedule) => {
             const state = states.get(binding);
             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/dist/native/definitions.d.ts

@@ -26,12 +26,8 @@ export interface NativeUIShellHandle {
 export type VerticalBarEdge = 'leading' | 'trailing' | null;
 export interface VerticalBarPlacement {
     edge: VerticalBarEdge;
-    inset: number;
-}
-export declare enum HingeStatus {
-    Closed = "closed",
-    PartiallyOpen = "partiallyOpen",
-    FullyOpen = "fullyOpen"
+    inset?: number;
+    nativeEdge?: VerticalBarEdge;
 }
 export interface VerticalControlAreaHandle extends NativeUIShellHandle {
     setPlacement(placement: VerticalBarEdge | VerticalBarPlacement, rtl?: boolean): void;
@@ -127,20 +123,13 @@ export interface ShellActivation {
 export interface WebViewMetrics {
     radius: number;
 }
-export interface DeviceLayout {
-    placement: VerticalBarPlacement;
-    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[];
@@ -151,6 +140,6 @@ export interface NativeUIShellPlugin {
     }): 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>;
 }
 //# sourceMappingURL=definitions.d.ts.map

package/dist/native/definitions.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"definitions.d.ts","sourceRoot":"","sources":["../../src/native/definitions.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"definitions.d.ts","sourceRoot":"","sources":["../../src/native/definitions.ts"],"names":[],"mappings":"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"}

package/dist/native/definitions.js

@@ -1,6 +1 @@
-export var HingeStatus;
-(function (HingeStatus) {
-    HingeStatus["Closed"] = "closed";
-    HingeStatus["PartiallyOpen"] = "partiallyOpen";
-    HingeStatus["FullyOpen"] = "fullyOpen";
-})(HingeStatus || (HingeStatus = {}));
+export {};

package/dist/native/index.d.ts

@@ -1,6 +1,5 @@
 import type { NativeUIShellHandle, NativeUIShellOptions, NativeUIShellPlugin, VerticalBarEdge, VerticalBarPlacement, VerticalControlAreaHandle, WebViewMetrics } from './definitions';
-export type { NativeUIShellComponent, NativeUIShellControls, NativeUIShellHandle, NativeUIShellOptions, NativeUIShellStatus, NativeUIShellSuspension, DeviceLayout, VerticalBarEdge, VerticalBarPlacement, VerticalControlAreaHandle, WebViewMetrics, } from './definitions';
-export { HingeStatus } from './definitions';
+export type { NativeUIShellComponent, NativeUIShellControls, NativeUIShellHandle, NativeUIShellOptions, NativeUIShellStatus, NativeUIShellSuspension, VerticalBarEdge, VerticalBarPlacement, VerticalControlAreaHandle, WebViewMetrics, } from './definitions';
 export declare const IonicNativeUIShell: NativeUIShellPlugin;
 export declare const configureNativeTransition: () => Promise<WebViewMetrics>;
 export declare const setVerticalControlAreaPlacement: (placement: VerticalBarEdge | VerticalBarPlacement, rtl?: boolean) => void;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/native/index.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EACV,mBAAmB,EACnB,oBAAoB,EACpB,mBAAmB,EACnB,eAAe,EACf,oBAAoB,EACpB,yBAAyB,EACzB,cAAc,EACf,MAAM,eAAe,CAAC;AAKvB,YAAY,EACV,sBAAsB,EACtB,qBAAqB,EACrB,mBAAmB,EACnB,oBAAoB,EACpB,mBAAmB,EACnB,uBAAuB,EACvB,YAAY,EACZ,eAAe,EACf,oBAAoB,EACpB,yBAAyB,EACzB,cAAc,GACf,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAG5C,eAAO,MAAM,kBAAkB,qBAAS,CAAC;AAoEzC,eAAO,MAAM,yBAAyB,QAAa,OAAO,CAAC,cAAc,CAKxE,CAAC;AAYF,eAAO,MAAM,+BAA+B,GAAI,WAAW,eAAe,GAAG,oBAAoB,EAAE,MAAM,OAAO,KAAG,IASlH,CAAC;AAGF,eAAO,MAAM,yBAAyB,QAAa,OAAO,CAAC,yBAAyB,CAQnF,CAAC;AAGF,eAAO,MAAM,mBAAmB,GAAI,UAAS,oBAAyB,KAAG,OAAO,CAAC,mBAAmB,CAgGnG,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/native/index.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EACV,mBAAmB,EACnB,oBAAoB,EACpB,mBAAmB,EACnB,eAAe,EACf,oBAAoB,EACpB,yBAAyB,EACzB,cAAc,EACf,MAAM,eAAe,CAAC;AAKvB,YAAY,EACV,sBAAsB,EACtB,qBAAqB,EACrB,mBAAmB,EACnB,oBAAoB,EACpB,mBAAmB,EACnB,uBAAuB,EACvB,eAAe,EACf,oBAAoB,EACpB,yBAAyB,EACzB,cAAc,GACf,MAAM,eAAe,CAAC;AAGvB,eAAO,MAAM,kBAAkB,qBAAS,CAAC;AAoEzC,eAAO,MAAM,yBAAyB,QAAa,OAAO,CAAC,cAAc,CAIxE,CAAC;AA6CF,eAAO,MAAM,+BAA+B,GAAI,WAAW,eAAe,GAAG,oBAAoB,EAAE,MAAM,OAAO,KAAG,IAclH,CAAC;AAGF,eAAO,MAAM,yBAAyB,QAAa,OAAO,CAAC,yBAAyB,CAQnF,CAAC;AAGF,eAAO,MAAM,mBAAmB,GAAI,UAAS,oBAAyB,KAAG,OAAO,CAAC,mBAAmB,CA4FnG,CAAC"}

package/dist/native/index.js

@@ -4,7 +4,6 @@ import { createRuntime } from './runtime';
 import { createVerticalBarsWebProjection } from './vertical-bars-web';
 import { prehideVerticalBarsToolbarSources } from './prehide';
 import { observeVerticalBarsModals } from './shared/modal';
-export { HingeStatus } from './definitions';
 const plugin = registerPlugin('IonicNativeUIShell');
 export const IonicNativeUIShell = plugin;
 let active;
@@ -62,25 +61,59 @@ const manage = (handle, lifecycle = {}) => {
     };
 };
 export const configureNativeTransition = async () => {
-    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;
 };
 const physicalVerticalBarEdge = (edge, rtl) => (edge === 'leading') !== rtl ? 'left' : 'right';
 const elementRtl = (element) => element.closest('[dir]')?.getAttribute('dir') === 'rtl';
+const nativePlacements = new WeakMap();
+const horizontalFallbackAttribute = 'data-native-ui-shell-vertical-bars-suspended';
+const observeNativeVerticalBarsLayout = (doc) => {
+    const reconcile = () => {
+        const app = doc.querySelector('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(`ion-app[${horizontalFallbackAttribute}]`);
+        if (app) {
+            app.removeAttribute(horizontalFallbackAttribute);
+            app.classList.add('ios-theme-vertical-bars');
+        }
+    };
+};
 export const setVerticalControlAreaPlacement = (placement, rtl) => {
     if (typeof document === 'undefined')
         return;
     const app = document.querySelector('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'));
 };
 export const enableVerticalControlArea = async () => {
     const handle = await enableNativeUIShell({ controls: { tabs: true, toolbar: true }, verticalBarsOnly: true });
@@ -138,40 +171,38 @@ export const enableNativeUIShell = (options = {}) => {
             if (Capacitor.getPlatform() !== 'ios')
                 return fallback('Requires Capacitor iOS');
             let runtime;
-            let placementListener;
-            let monitoring = false;
+            let metricsListener;
+            let stopVerticalBarsLayout;
             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 = null;
+                if (!options.verticalBarsOnly)
+                    stopVerticalBarsLayout = observeNativeVerticalBarsLayout(document);
                 const nativeVerticalBars = () => {
-                    const root = document.querySelector('ion-app.ios-theme-vertical-bars');
-                    if (!root)
+                    const app = document.querySelector('ion-app.ios-theme-vertical-bars');
+                    if (!app)
                         return false;
-                    const domEdge = root.classList.contains('ios-theme-vertical-bars-left') ? 'left' : 'right';
-                    return nativeEdge === null || physicalVerticalBarEdge(nativeEdge, elementRtl(root)) === domEdge;
+                    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, createVerticalBarsWebProjection(document, options, () => !nativeVerticalBars() || native.getStatus().state === 'stopped'));
                 return manage(runtime, {
                     suspend: () => prehide?.suspend(),
                     release,
                     destroy: async () => {
-                        await placementListener?.remove().catch(() => { });
-                        if (monitoring)
-                            await plugin.stopDeviceLayoutMonitoring().catch(() => { });
+                        await metricsListener?.remove().catch(() => { });
+                        stopVerticalBarsLayout?.();
                         prehide?.stop();
                         stopModals();
                     },
@@ -179,9 +210,8 @@ export const enableNativeUIShell = (options = {}) => {
             }
             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/dist/native/runtime.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"runtime.d.ts","sourceRoot":"","sources":["../../src/native/runtime.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAGV,mBAAmB,EACnB,oBAAoB,EACpB,mBAAmB,EAEpB,MAAM,eAAe,CAAC;AA6BvB,eAAO,MAAM,aAAa,GACxB,KAAK,QAAQ,EACb,QAAQ,mBAAmB,EAC3B,UAAS,oBAAyB,EAClC,qBAAoB,MAAM,OAAoB,EAC9C,0BAAwB,KACvB,OAAO,CAAC,mBAAmB,CAmtB7B,CAAC"}
+{"version":3,"file":"runtime.d.ts","sourceRoot":"","sources":["../../src/native/runtime.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAGV,mBAAmB,EACnB,oBAAoB,EACpB,mBAAmB,EAEpB,MAAM,eAAe,CAAC;AA6BvB,eAAO,MAAM,aAAa,GACxB,KAAK,QAAQ,EACb,QAAQ,mBAAmB,EAC3B,UAAS,oBAAyB,EAClC,qBAAoB,MAAM,OAAoB,EAC9C,0BAAwB,KACvB,OAAO,CAAC,mBAAmB,CAytB7B,CAAC"}

package/dist/native/runtime.js

@@ -378,13 +378,15 @@ export const createRuntime = async (doc, plugin, options = {}, nativeVerticalBar
                 verticalBarsMembers.add(element);
             }
             for (const element of accepted.flatMap(candidateSources)) {
+                const newlyProjected = !sources.has(element) || !element.hasAttribute(marker);
                 if (!sources.has(element)) {
                     sources.set(element, element.getAttribute('aria-hidden'));
                     crossfade.play(element, true, handoffInstant || isVerticalBarsSource(element));
-                    element.setAttribute(marker, '');
-                    element.setAttribute('aria-hidden', 'true');
-                    element.dispatchEvent(new CustomEvent('nativeUIShellChange'));
                 }
+                element.setAttribute(marker, '');
+                element.setAttribute('aria-hidden', 'true');
+                if (newlyProjected)
+                    element.dispatchEvent(new CustomEvent('nativeUIShellChange'));
             }
             const received = pendingActivations;
             pendingActivations = [];
@@ -567,25 +569,31 @@ export const createRuntime = async (doc, plugin, options = {}, nativeVerticalBar
         'focusout',
     ])
         on(doc, name);
+    const refreshLayout = () => {
+        rejected = new WeakMap();
+        forceRefresh = true;
+        schedule();
+    };
     on(doc, 'visibilitychange', () => {
-        if (doc.hidden)
+        if (doc.hidden) {
             getNativeSearchBindings(doc).forEach((binding) => search.retire(binding));
-        schedule();
+            schedule();
+        }
+        else
+            refreshLayout();
     });
-    on(win, 'resize');
+    on(win, 'resize', refreshLayout);
     on(win, 'keyboardWillShow', () => search.keyboard(true));
     on(win, 'keyboardWillHide', () => search.keyboard(false));
     on(win, 'scroll');
     on(win.matchMedia('(prefers-color-scheme: dark)'), 'change');
     on(win, 'nativeUIShellRefresh', (event) => {
-        rejected = new WeakMap();
         if (event.retireSearch)
             getNativeSearchBindings(doc).forEach((binding) => search.retire(binding));
-        forceRefresh = true;
-        schedule();
+        refreshLayout();
     });
     if (win.visualViewport) {
-        on(win.visualViewport, 'resize');
+        on(win.visualViewport, 'resize', refreshLayout);
         on(win.visualViewport, 'scroll');
     }
     const handle = {

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

@@ -1 +1 @@
-{"version":3,"file":"vertical-bars-web.d.ts","sourceRoot":"","sources":["../../src/native/vertical-bars-web.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,mBAAmB,EAAE,oBAAoB,EAAuB,MAAM,eAAe,CAAC;AAqCpG,eAAO,MAAM,+BAA+B,GAC1C,KAAK,QAAQ,EACb,SAAS,oBAAoB,EAC7B,UAAS,MAAM,OAAoB,KAClC,mBAkVF,CAAC"}
+{"version":3,"file":"vertical-bars-web.d.ts","sourceRoot":"","sources":["../../src/native/vertical-bars-web.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,mBAAmB,EAAE,oBAAoB,EAAuB,MAAM,eAAe,CAAC;AAqCpG,eAAO,MAAM,+BAA+B,GAC1C,KAAK,QAAQ,EACb,SAAS,oBAAoB,EAC7B,UAAS,MAAM,OAAoB,KAClC,mBAoVF,CAAC"}

package/dist/native/vertical-bars-web.js

@@ -260,6 +260,8 @@ export const createVerticalBarsWebProjection = (doc, options, enabled = () => tr
     const schedule = () => {
         if (stopped)
             return Promise.resolve();
+        if (!enabled())
+            restore();
         const done = new Promise((resolve) => waiters.push(resolve));
         if (!frame)
             frame = win.requestAnimationFrame(update);

package/dist/tab-bar-searchable/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/tab-bar-searchable/index.ts"],"names":[],"mappings":"AACA,OAAO,EAQL,KAAK,wBAAwB,EAE9B,MAAM,2BAA2B,CAAC;AAiBnC,OAAO,EACL,oBAAoB,EACpB,KAAK,wBAAwB,EAC7B,KAAK,oBAAoB,EACzB,KAAK,YAAY,EACjB,KAAK,iBAAiB,GACvB,MAAM,2BAA2B,CAAC;AAqBnC,eAAO,MAAM,sBAAsB,GACjC,WAAW,WAAW,EACtB,cAAc,WAAW,EACzB,WAAW,WAAW,KACrB,wBAwDF,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/tab-bar-searchable/index.ts"],"names":[],"mappings":"AACA,OAAO,EAQL,KAAK,wBAAwB,EAE9B,MAAM,2BAA2B,CAAC;AAiBnC,OAAO,EACL,oBAAoB,EACpB,KAAK,wBAAwB,EAC7B,KAAK,oBAAoB,EACzB,KAAK,YAAY,EACjB,KAAK,iBAAiB,GACvB,MAAM,2BAA2B,CAAC;AAqBnC,eAAO,MAAM,sBAAsB,GACjC,WAAW,WAAW,EACtB,cAAc,WAAW,EACzB,WAAW,WAAW,KACrB,wBA+EF,CAAC"}

package/dist/tab-bar-searchable/index.js

@@ -10,11 +10,14 @@ export const attachTabBarSearchable = (ionTabBar, ionFabButton, ionFooter) => {
     }
     ionFooter.style.pointerEvents = 'none';
     ionFooter.style.opacity = '0';
+    ionFooter.querySelector('ion-buttons[slot=start]')?.classList.add('ios-theme-horizontal-only');
     const nativeSearch = registerNativeSearch(ionTabBar, ionFabButton, ionFooter);
     let searchableEventCache;
     let resumeNative;
     let nativeEntry = false;
     let nativeRequest = 0;
+    let verticalSearch = false;
+    let tabVisibilityObserver;
     return async (event, type) => {
         const selector = type === TabBarSearchableType.Enter ? 'ion-fab-button' : 'ion-buttons[slot=start] ion-button';
         if (!event.target?.closest(selector))
@@ -37,11 +40,28 @@ export const attachTabBarSearchable = (ionTabBar, ionFabButton, ionFooter) => {
             return;
         }
         if (type === TabBarSearchableType.Enter) {
-            resumeNative ?? (resumeNative = await suspendNativeUIShell([ionTabBar, ionFooter, ionFabButton.closest('ion-fab') ?? ionFabButton]));
+            verticalSearch = !!ionTabBar.closest('ion-app.ios-theme-vertical-bars');
+            if (verticalSearch) {
+                const keepTabsVisible = () => {
+                    if (ionTabBar.classList.contains('tab-bar-hidden') && ionTabBar.closest('ion-app.ios-theme-vertical-bars')) {
+                        ionTabBar.classList.remove('tab-bar-hidden');
+                    }
+                };
+                tabVisibilityObserver?.disconnect();
+                tabVisibilityObserver = new MutationObserver(keepTabsVisible);
+                tabVisibilityObserver.observe(ionTabBar, { attributes: true, attributeFilter: ['class'] });
+                keepTabsVisible();
+            }
+            resumeNative ?? (resumeNative = await suspendNativeUIShell([
+                ...(verticalSearch ? [] : [ionTabBar]),
+                ionFooter,
+                ionFabButton.closest('ion-fab') ?? ionFabButton,
+            ]));
             try {
-                searchableEventCache = await enterEvent(event, ionTabBar, ionFabButton, ionFooter);
+                searchableEventCache = await enterEvent(event, ionTabBar, ionFabButton, ionFooter, verticalSearch);
             }
             catch (error) {
+                tabVisibilityObserver?.disconnect();
                 resumeNative();
                 resumeNative = undefined;
                 throw error;
@@ -49,10 +69,11 @@ export const attachTabBarSearchable = (ionTabBar, ionFabButton, ionFooter) => {
         }
         else if (searchableEventCache !== undefined) {
             try {
-                await leaveEvent(event, searchableEventCache, ionTabBar, ionFabButton, ionFooter);
+                await leaveEvent(event, searchableEventCache, ionTabBar, ionFabButton, ionFooter, verticalSearch);
                 searchableEventCache = undefined;
             }
             finally {
+                tabVisibilityObserver?.disconnect();
                 resumeNative?.();
                 resumeNative = undefined;
             }
@@ -62,7 +83,7 @@ export const attachTabBarSearchable = (ionTabBar, ionFabButton, ionFooter) => {
         }
     };
 };
-const enterEvent = async (event, ionTabBar, ionFabButton, ionFooter) => {
+const enterEvent = async (event, ionTabBar, ionFabButton, ionFooter, verticalSearch) => {
     if (!event.target?.closest('ion-fab-button')) {
         throw throwErrorByFailedClickElement('ion-fab-button');
     }
@@ -71,10 +92,13 @@ const enterEvent = async (event, ionTabBar, ionFabButton, ionFooter) => {
     const colorSelected = references.selectedTabButton
         ? getComputedStyle(references.selectedTabButton).getPropertyValue('--color-selected').trim()
         : '';
-    const effectAnimation = createEffectAnimation(references, sizes);
+    if (verticalSearch)
+        references.closeButtonIcon.setAttribute('name', 'close');
+    const tabAnimations = verticalSearch
+        ? []
+        : [createTabBarAnimation(ionTabBar, references, sizes), createEffectAnimation(references, sizes)];
     const searchContainerAnimation = createSearchContainerAnimation(references, sizes);
     const closeButtonsAnimation = createCloseButtonsAnimation(references);
-    const tabBarAnimation = createTabBarAnimation(ionTabBar, references, sizes);
     const fabButtonAnimation = createFabButtonAnimation(ionFabButton);
     await createAnimation()
         .delay(ANIMATION_DELAY_BASE)
@@ -83,22 +107,26 @@ const enterEvent = async (event, ionTabBar, ionFabButton, ionFooter) => {
         .addElement(ionFooter)
         .afterAddWrite(() => (ionFooter.style.pointerEvents = 'auto'))
         .fromTo('opacity', '0.8', '1')
-        .addAnimation([tabBarAnimation, fabButtonAnimation, searchContainerAnimation, effectAnimation, closeButtonsAnimation])
+        .addAnimation([...tabAnimations, fabButtonAnimation, searchContainerAnimation, closeButtonsAnimation])
         .play();
     return {
         elementSizes: sizes,
         colorSelected,
     };
 };
-const leaveEvent = async (event, searchableEventCache, ionTabBar, ionFabButton, ionFooter) => {
+const leaveEvent = async (event, searchableEventCache, ionTabBar, ionFabButton, ionFooter, verticalSearch) => {
     if (!event.target?.closest('ion-buttons[slot=start] ion-button')) {
         throw throwErrorByFailedClickElement('ion-buttons[slot=start] ion-button');
     }
     const references = getElementReferences(ionTabBar, ionFooter);
-    const effectAnimation = createReverseEffectAnimation(references, searchableEventCache.elementSizes, searchableEventCache.colorSelected);
+    const tabAnimations = verticalSearch
+        ? []
+        : [
+            createReverseTabBarAnimation(ionTabBar, references, searchableEventCache.elementSizes),
+            createReverseEffectAnimation(references, searchableEventCache.elementSizes, searchableEventCache.colorSelected),
+        ];
     const searchContainerAnimation = createReverseSearchContainerAnimation(references, searchableEventCache.elementSizes);
     const closeButtonsAnimation = createReverseCloseButtonsAnimation(references);
-    const tabBarAnimation = createReverseTabBarAnimation(ionTabBar, references, searchableEventCache.elementSizes);
     const fabButtonAnimation = createReverseFabButtonAnimation(ionFabButton, searchableEventCache.elementSizes);
     await createAnimation()
         .delay(ANIMATION_DELAY_BASE)
@@ -107,6 +135,6 @@ const leaveEvent = async (event, searchableEventCache, ionTabBar, ionFabButton,
         .addElement(ionFooter)
         .afterAddWrite(() => (ionFooter.style.pointerEvents = 'none'))
         .fromTo('opacity', '1', '0')
-        .addAnimation([tabBarAnimation, fabButtonAnimation, searchContainerAnimation, effectAnimation, closeButtonsAnimation])
+        .addAnimation([...tabAnimations, fabButtonAnimation, searchContainerAnimation, closeButtonsAnimation])
         .play();
 };

package/dist/vertical-bars.d.ts

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

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

@@ -1 +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,OAAO,EAAE,2BAA2B,EAAE,MAAM,iCAAiC,CAAC;AAC9E,YAAY,EAAE,YAAY,EAAE,mBAAmB,EAAE,uBAAuB,EAAE,eAAe,EAAE,yBAAyB,EAAE,MAAM,UAAU,CAAC"}
+{"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,2BAA2B,EAAE,MAAM,iCAAiC,CAAC;AAC9E,YAAY,EAAE,mBAAmB,EAAE,uBAAuB,EAAE,eAAe,EAAE,yBAAyB,EAAE,MAAM,UAAU,CAAC"}

package/dist/vertical-bars.js

@@ -1,3 +1,2 @@
 export { enableVerticalControlArea, setVerticalControlAreaPlacement, IonicNativeUIShell } from './native';
-export { HingeStatus } from './native';
 export { withNativeUIShellTransition } from './native-integration/transition';

package/docs/iphone-duo-with-original-theme.md

@@ -122,23 +122,31 @@ When the application owner is disposed, call `await rail.destroy()` to restore t
 
 ## Connect an iPhone Duo
 
-For Capacitor iOS, run `npx cap sync ios`. Build with Xcode 27.1 or newer and link against the iOS 27.1 SDK or later to receive the actual rail edge, safe-area inset, and hinge posture. The plugin uses Swift Package Manager; existing CocoaPods apps can follow [Native UI Shell setup](https://docs.rdlabo.dev/projects/ionic-theme-ios27/docs/native-ui-shell#enable-the-shell).
+Install [`@erkamyaman/capacitor-foldable`](https://github.com/erkamyaman/capacitor-foldable) for device state:
+
+```bash
+npm install @erkamyaman/capacitor-foldable
+npx cap sync ios
+```
+
+Use Capacitor 8.5 or later and build with Xcode 27.1 or newer for actual rail placement and hinge posture on iOS 27.1. Native UI Shell uses Swift Package Manager; existing CocoaPods apps can follow [Native UI Shell setup](https://docs.rdlabo.dev/projects/ionic-theme-ios27/docs/native-ui-shell#enable-the-shell). Keep this package's `vertical-bars.css`; the device plugin's `ionic-tabs.css` is not needed with our rail projection.
 
 Replace the browser-only startup above with this after `ion-app` is mounted:
 
 ```ts
 import { Capacitor, type PluginListenerHandle } from '@capacitor/core';
-import { enableVerticalControlArea, IonicNativeUIShell } from '@rdlabo/ionic-theme-ios27/vertical-bars';
+import { enableVerticalControlArea } from '@rdlabo/ionic-theme-ios27/vertical-bars';
+import { Foldable } from '@erkamyaman/capacitor-foldable';
 
 const rail = await enableVerticalControlArea();
 let layoutListener: PluginListenerHandle | undefined;
 
 if (Capacitor.getPlatform() === 'ios') {
-  // The runtime already monitors device layout; only subscribe.
-  layoutListener = await IonicNativeUIShell.addListener('deviceLayoutChange', ({ placement }) =>
-    rail.setPlacement(placement),
+  layoutListener = await Foldable.addListener('barPlacementChange', ({ verticalBarEdge, inset }) =>
+    rail.setPlacement({ edge: verticalBarEdge, nativeEdge: verticalBarEdge, inset }),
   );
-  rail.setPlacement((await IonicNativeUIShell.getDeviceLayout()).placement);
+  const { verticalBarEdge, inset } = await Foldable.getBarPlacement();
+  rail.setPlacement({ edge: verticalBarEdge, nativeEdge: verticalBarEdge, inset });
 }
 
 // Call when the application owner is disposed.
@@ -148,13 +156,13 @@ const stopVerticalArea = async () => {
 };
 ```
 
-`setPlacement()` applies the measured inset and resolves the logical edge through the document direction. A `null` edge restores the ordinary layout. Devices without a rail and apps built with older SDKs report `null`, so this example restores the ordinary layout there. To deliberately preview a DOM rail on such an iOS build, have your application choose a fixed edge with `rail.setPlacement('trailing')` instead of applying that null placement. This simulates the layout; it does not provide a real system rail or hinge measurements.
+`setPlacement()` resolves the logical edge through the document direction. Pass Foldable’s measured `inset` with the reported edge so the theme reserves the actual bar width and follows width changes. An inset of `0` clears the explicit width; manually requested rails then use the theme’s CSS safe-area rules. A `null` edge restores the ordinary layout. Devices without a reported rail return `null`, so this example restores the ordinary layout there. On iOS 27.1 or later, Foldable can infer Duo bar placement from safe-area insets when the app is built with an older SDK. To deliberately request a rail when the plugin reports no edge, have your application choose a fixed edge with `rail.setPlacement('trailing')` instead of applying that null placement. This simulates the layout; it does not provide a real system rail or hinge measurements.
 
 On supported iOS, controls in the rail use the system SwiftUI appearance; your custom Web styling still applies to ordinary content and horizontal controls. Web and Android use Web clones.
 
 ## Use hinge posture without projecting controls
 
-If your existing theme needs only a posture-driven split pane or a layout switch, do not start a projection runtime or add `.ios-theme-vertical-bars`. Use `getDeviceLayout()` and `deviceLayoutChange` directly, pairing `startDeviceLayoutMonitoring()` with `stopDeviceLayoutMonitoring()` and removing the listener when finished.
+If your existing theme needs only a posture-driven split pane or a layout switch, do not start a projection runtime or add `.ios-theme-vertical-bars`. Use `Foldable.getFoldState()` and `foldStateChange` directly, removing the listener when finished. There is no separate start/stop monitoring call.
 
 See [Read the device layout](https://docs.rdlabo.dev/projects/ionic-theme-ios27/docs/iphone-duo#read-the-device-layout) for the subscription example, null values, and monitoring lifetime. See [Adapt the split pane](https://docs.rdlabo.dev/projects/ionic-theme-ios27/docs/iphone-duo#adapt-the-split-pane) for the opt-in width rules and half-open state.