feat: support iPhone Duo with vertical bars

.gitignore

@@ -1,4 +1,5 @@
 dist/
+/integration/ionic-conference-app/
 # Generated by @rdlabo/ionic-theme-utils before Sass compilation.
 /src/styles/utils/structured-list.scss
 

README.md

@@ -121,6 +121,10 @@ Use this markup to preview the inset grouped list look. For the list structure t
 
 ## Optional setups
 
+### Support iPhone Duo without the iOS 27 theme
+
+Import only `@rdlabo/ionic-theme-ios27/dist/css/vertical-bars.css`, add `ios-theme-vertical-bars` to `ion-app`, and call `enableVerticalControlArea()` from `@rdlabo/ionic-theme-ios27/vertical-bars` at startup. This uses Ionic's standard appearance outside the Vertical Control Area; on supported iOS, only controls moved into that area are projected natively. To read only the hinge posture — for example to adapt an `ion-split-pane` — subscribe to the plugin's `deviceLayoutChange` event without starting any runtime. See [iPhone Duo support](https://docs.rdlabo.dev/projects/ionic-theme-ios27/docs/iphone-duo) for the complete setup.
+
 ### Use only the iOS 27 theme
 
 Install only `@rdlabo/ionic-theme-ios27` and import its styles unconditionally in your global stylesheet:
@@ -207,6 +211,7 @@ For Ionic 9 Angular, import `isPlatform` and `provideIonicAngular` from `@ionic/
 - [ESLint](https://docs.rdlabo.dev/projects/ionic-theme-ios27/docs/eslint) — check list structure with ESLint rules.
 - [Features](https://docs.rdlabo.dev/projects/ionic-theme-ios27/docs/features) — CSS variables, Liquid Glass, selective imports, and dark mode.
 - [Native UI Shell (Experimental)](https://docs.rdlabo.dev/projects/ionic-theme-ios27/docs/native-ui-shell) — project supported Ionic controls, text, and icons into UIKit.
+- [iPhone Duo support](https://docs.rdlabo.dev/projects/ionic-theme-ios27/docs/iphone-duo) — vertical system rail, hinge posture, and split-pane layout; usable without the theme or the shell.
 - [Animation](https://docs.rdlabo.dev/projects/ionic-theme-ios27/docs/animation) — tab, segment, and searchable effects.
 - [Migration from iOS 26](https://docs.rdlabo.dev/projects/ionic-theme-ios27/docs/migration) — upgrade an existing app, including stylesheet, class, and CSS variable changes.
 - [iOS 26 migration history](https://docs.rdlabo.dev/projects/ionic-theme-ios26/docs/migration) — earlier major-version changes for the previous package.

demo/e2e/adaptive-tab-bar.spec.ts

@@ -0,0 +1,56 @@
+import { expect, test } from '@playwright/test';
+
+const enableVerticalBars = async (page: import('@playwright/test').Page) => {
+  const toggle = page.getByText('iPhone Duo Mode').locator('..').locator('ion-toggle');
+  await toggle.click();
+  await expect(page.locator('ion-app')).toHaveClass(/ios-theme-vertical-bars/);
+};
+
+test('verticalBars mode moves tabs into the right rail and reveals labels while dragging', async ({ page }) => {
+  await page.setViewportSize({ width: 700, height: 900 });
+  await page.goto('/main/index');
+  await enableVerticalBars(page);
+
+  const bar = page.locator('#tab-bar-bottom');
+  const buttons = bar.locator('ion-tab-button');
+  await expect.poll(async () => (await bar.boundingBox())?.x).toBeGreaterThan(620);
+  const barBox = (await bar.boundingBox())!;
+  expect(barBox.width).toBeCloseTo(50, 0);
+  await expect(buttons.first().locator('ion-label')).toHaveCSS('position', 'absolute');
+  await expect(buttons.nth(1).locator('ion-label')).toHaveCSS('position', 'absolute');
+
+  const selectedBox = (await buttons.first().boundingBox())!;
+  const targetBox = (await buttons.nth(1).boundingBox())!;
+  await page.mouse.move(selectedBox.x + selectedBox.width / 2, selectedBox.y + selectedBox.height / 2);
+  await page.mouse.down();
+  await page.mouse.move(targetBox.x + targetBox.width / 2, targetBox.y + targetBox.height / 2, { steps: 4 });
+  await expect.poll(() => buttons.first().evaluate((element) => element.matches(':active'))).toBe(true);
+
+  await expect(page).toHaveScreenshot('vertical-bars-tab-drag-labels.png', { animations: 'disabled' });
+  await page.mouse.up();
+
+  const overlayDirection = await page.evaluate(async () => {
+    const menu = document.querySelector('ion-menu')!;
+    const tabs = document.createElement('ion-tabs');
+    const overlayBar = document.createElement('ion-tab-bar');
+    overlayBar.mode = 'ios';
+    tabs.append(overlayBar);
+    menu.append(tabs);
+    await customElements.whenDefined('ion-tab-bar');
+    await new Promise<void>((resolve) => requestAnimationFrame(() => requestAnimationFrame(() => resolve())));
+    const direction = getComputedStyle(overlayBar).flexDirection;
+    tabs.remove();
+    return direction;
+  });
+  expect(overlayDirection).toBe('row');
+});
+
+test('manual classes place the Web rail on the left in Chrome', async ({ page }) => {
+  await page.setViewportSize({ width: 700, height: 900 });
+  await page.goto('/main/index');
+  await page.locator('ion-app').evaluate((root) => root.classList.add('ios-theme-vertical-bars', 'ios-theme-vertical-bars-left'));
+
+  const bar = page.locator('#tab-bar-bottom');
+  await expect.poll(async () => (await bar.boundingBox())?.x).toBeLessThan(35);
+  await expect(bar).toHaveScreenshot('vertical-bars-left.png', { animations: 'disabled' });
+});

demo/e2e/animation.spec.ts

@@ -1,10 +1,11 @@
 import { expect, test, type Page } from '@playwright/test';
+import type { AnimationCall } from './native-shell-mock';
 
 const installAnimationObserver = async (page: Page) => {
   await page.addInitScript(() => {
     const originalAnimate = Element.prototype.animate;
 
-    (window as any).__IONIC_ANIMATION_CALLS__ = [];
+    document.__IONIC_ANIMATION_CALLS__ = [];
     Element.prototype.animate = function (keyframes, options) {
       const animation = originalAnimate.call(this, keyframes, options);
       const properties = Array.isArray(keyframes)
@@ -16,7 +17,7 @@ const installAnimationObserver = async (page: Page) => {
         : Object.keys(keyframes ?? {}).filter((key) => !['offset', 'easing', 'composite'].includes(key));
       const duration = typeof options === 'number' ? options : typeof options?.duration === 'number' ? options.duration : 0;
 
-      (window as any).__IONIC_ANIMATION_CALLS__.push({
+      document.__IONIC_ANIMATION_CALLS__!.push({
         animation,
         duration,
         properties,
@@ -30,13 +31,13 @@ const installAnimationObserver = async (page: Page) => {
 };
 
 const clearAnimationCalls = async (page: Page) => {
-  await page.evaluate(() => ((window as any).__IONIC_ANIMATION_CALLS__ = []));
+  await page.evaluate(() => (document.__IONIC_ANIMATION_CALLS__ = []));
 };
 
 const hasRunningAnimation = (page: Page, targetClass?: string) => {
   return page.evaluate((expectedClass) => {
-    return (window as any).__IONIC_ANIMATION_CALLS__.some(
-      (call: { animation: Animation; duration: number; properties: string[]; targetClass: string }) =>
+    return document.__IONIC_ANIMATION_CALLS__!.some(
+      (call: AnimationCall) =>
         call.animation.playState === 'running' &&
         call.duration > 0 &&
         call.properties.includes('transform') &&
@@ -47,8 +48,8 @@ const hasRunningAnimation = (page: Page, targetClass?: string) => {
 
 const hasAnimationCall = (page: Page, targetClass: string) => {
   return page.evaluate((expectedClass) => {
-    return (window as any).__IONIC_ANIMATION_CALLS__.some(
-      (call: { duration: number; properties: string[]; targetClass: string }) =>
+    return document.__IONIC_ANIMATION_CALLS__!.some(
+      (call: AnimationCall) =>
         call.duration > 0 && call.properties.includes('transform') && call.targetClass.split(' ').includes(expectedClass),
     );
   }, targetClass);
@@ -104,6 +105,17 @@ test.describe('Animation Tests', () => {
     await expect(shade).toHaveCount(0);
   });
 
+  test('verticalBars page transition keeps its shade outside the control rail', async ({ page }) => {
+    await page.goto('/main/index', { waitUntil: 'networkidle' });
+    await page.locator('ion-app').evaluate((app) => app.classList.add('ios-theme-vertical-bars'));
+    await page.getByRole('button', { name: 'button', exact: true }).click();
+    const shade = page.locator('.ios-transition-shade');
+    await expect(shade).toBeVisible();
+    await page.evaluate(() => document.getAnimations().forEach((animation) => animation.pause()));
+    await expect(shade).toHaveCSS('clip-path', 'inset(0px 80px 0px 0px)');
+    await page.evaluate(() => document.getAnimations().forEach((animation) => animation.play()));
+  });
+
   test('runs and completes the iOS popover animations', async ({ page }) => {
     await page.goto('/main/index/popover', { waitUntil: 'networkidle' });
     await clearAnimationCalls(page);

demo/e2e/card-opt-out.spec.ts

@@ -18,7 +18,11 @@ for (const disabled of ['ios-theme-disabled', 'ios26-disabled']) {
             return card;
           };
           const cards = [create(false), create(true)];
-          await Promise.all(cards.flatMap((card) => [card, ...card.querySelectorAll('*')]).map((el: any) => el.componentOnReady?.()));
+          await Promise.all(
+            cards
+              .flatMap((card) => [card, ...card.querySelectorAll('*')])
+              .map((el: Element & { componentOnReady?: () => Promise<unknown> }) => el.componentOnReady?.()),
+          );
           const result = cards.map((card) =>
             [...card.querySelectorAll(tag)].map((el) => {
               const s = getComputedStyle(el);

demo/e2e/native-shell-mock.ts

@@ -0,0 +1,77 @@
+import type { NativeUIShellHandle, NativeUIShellSuspension, ShellControl, ShellSnapshot } from '../../src/native/definitions';
+
+/**
+ * State carried by the fake native plugin that `mockNative` installs.
+ *
+ * The init script intercepts the `window.Capacitor` assignment during
+ * `@capacitor/core` initialisation and patches `registerPlugin`, so the app's
+ * `registerPlugin<NativeUIShellPlugin>('IonicNativeUIShell')` receives the mock
+ * object itself. Specs reach it the same way the application does:
+ *
+ *   Capacitor.registerPlugin<ShellMock>('IonicNativeUIShell')
+ */
+export interface ShellMockCore {
+  /** update()/clear() snapshots received by the plugin. */
+  updates: ShellSnapshot[];
+  /** Monotonic sequence counter for emitted events. */
+  sequence: number;
+  /** Listener registry mirroring Capacitor's WebPlugin semantics. */
+  listeners: Record<string, ((event: never) => void)[]>;
+  /** Emits a native event to every registered listener. */
+  notifyListeners(eventName: string, data: unknown): void;
+}
+
+export interface AnimationCall {
+  animation: Animation;
+  duration: number;
+  properties: string[];
+  targetClass: string;
+  targetTag: string;
+}
+
+/** Test probes attached to the demo's <ion-app> element instead of `window`. */
+export interface TestAppElement extends HTMLElement {
+  nativeUIShell?: NativeUIShellHandle;
+  verticalBarsLease?: NativeUIShellSuspension;
+  verticalBarsBackButtonReads?: number;
+  verticalBarsBackCloneMoved?: boolean;
+  fabClicks?: number;
+  fabRetired?: boolean;
+  menuExtra?: boolean;
+  retiredSearchbar?: HTMLIonSearchbarElement;
+  searchEvents?: [string, unknown][];
+  placement?: {
+    element: Element;
+    parent: HTMLElement | null;
+    next: ChildNode | null;
+    slot: string;
+    zone: Element;
+  };
+  searchPlacement?: {
+    page: HTMLElement;
+    footer: Element;
+    fab: Element;
+    buttons: Element;
+    toolbar: Element;
+  };
+}
+
+declare global {
+  const Capacitor: {
+    getPlatform(): string;
+    registerPlugin<T>(name: string, implementations?: Record<string, unknown>): T;
+    Plugins: Record<string, unknown>;
+    [key: string]: unknown;
+  };
+
+  interface Window {
+    Capacitor?: typeof Capacitor;
+    CapacitorCustomPlatform?: { name: string };
+  }
+
+  interface Document {
+    /** Set by e2e init scripts to force the app into its animation-free mode. */
+    IONIC_E2E_TESTING?: boolean;
+    __IONIC_ANIMATION_CALLS__?: AnimationCall[];
+  }
+}