@rdlabo/ionic-theme-ios27 1.0.4 → 1.1.0-beta.pr224.shac63de393e27b

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;;mBAuU9B,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;;yBAmBJ,SAAS,EAAE,WAAW,CAAC,OAAO,EAAE,WAAW,KAAK,OAAO,GAAG,SAAS,EAAE;yBAlJhE,mBAAmB;;mBA0U9B,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

@@ -284,6 +284,8 @@ export const createSearchSupport = (doc, id, schedule) => {
                 }
                 field.label = '';
                 field.accessibilityLabel = bar.getAttribute('aria-label') ?? input.getAttribute('aria-label') ?? 'Search';
+                if (!trigger.accessibilityLabel)
+                    trigger.accessibilityLabel = field.accessibilityLabel;
                 state.layout = JSON.stringify([
                     innerWidth,
                     innerHeight,

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

@@ -1 +1 @@
-{"version":3,"file":"runtime.d.ts","sourceRoot":"","sources":["../../src/native/runtime.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAGV,mBAAmB,EACnB,oBAAoB,EACpB,mBAAmB,EAEpB,MAAM,eAAe,CAAC;AAkBvB,eAAO,MAAM,aAAa,GACxB,KAAK,QAAQ,EACb,QAAQ,mBAAmB,EAC3B,UAAS,oBAAyB,KACjC,OAAO,CAAC,mBAAmB,CAof7B,CAAC"}
+{"version":3,"file":"runtime.d.ts","sourceRoot":"","sources":["../../src/native/runtime.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAGV,mBAAmB,EACnB,oBAAoB,EACpB,mBAAmB,EAEpB,MAAM,eAAe,CAAC;AAkBvB,eAAO,MAAM,aAAa,GACxB,KAAK,QAAQ,EACb,QAAQ,mBAAmB,EAC3B,UAAS,oBAAyB,KACjC,OAAO,CAAC,mBAAmB,CA+jB7B,CAAC"}

package/dist/native/runtime.js

@@ -39,6 +39,11 @@ export const createRuntime = async (doc, plugin, options = {}) => {
     let dirty = false;
     let pending = false;
     let stopped = false;
+    let tabSwitchHandoff = false;
+    let handoffUntil = 0;
+    let handoffAcrossPending = false;
+    let handoffInstant = false;
+    let modalPresentHandoff = false;
     let frame = 0;
     let updates = 0;
     let reason;
@@ -75,7 +80,7 @@ export const createRuntime = async (doc, plugin, options = {}) => {
         search.release(element);
         element.removeAttribute(marker);
         if (!stopped)
-            crossfade.play(element, false);
+            crossfade.play(element, false, handoffInstant);
         if (element.getAttribute('aria-hidden') === 'true') {
             const previous = sources.get(element);
             if (previous == null)
@@ -186,6 +191,8 @@ export const createRuntime = async (doc, plugin, options = {}) => {
         frame = 0;
         dirty = false;
         pending = true;
+        handoffInstant = tabSwitchHandoff || handoffAcrossPending || modalPresentHandoff || win.performance.now() < handoffUntil;
+        modalPresentHandoff = false;
         try {
             const size = `${win.innerWidth}:${win.innerHeight}`;
             if (viewport !== size) {
@@ -208,15 +215,17 @@ export const createRuntime = async (doc, plugin, options = {}) => {
             const removed = Array.from(sources.keys()).filter((element) => !retained.has(element));
             if (removed.length) {
                 removed.forEach(restore);
-                await painted();
-                if (stopped || dirty)
-                    return;
+                if (!handoffInstant) {
+                    await painted();
+                    if (stopped || dirty)
+                        return;
+                }
             }
             const data = { viewportWidth: win.innerWidth, controls: candidates.map((candidate) => candidate.control) };
             const serialized = JSON.stringify(data);
             if (serialized === lastSnapshot && !forceRefresh)
                 return;
-            const snapshot = { ...data, revision: ++revision, transitionDuration: crossfade.duration() };
+            const snapshot = { ...data, revision: ++revision, transitionDuration: crossfade.duration(handoffInstant) };
             forceRefresh = false;
             updates++;
             updatingRevision = snapshot.revision;
@@ -255,7 +264,7 @@ export const createRuntime = async (doc, plugin, options = {}) => {
             for (const element of accepted.flatMap(candidateSources)) {
                 if (!sources.has(element)) {
                     sources.set(element, element.getAttribute('aria-hidden'));
-                    crossfade.play(element, true);
+                    crossfade.play(element, true, handoffInstant);
                     element.setAttribute(marker, '');
                     element.setAttribute('aria-hidden', 'true');
                     element.dispatchEvent(new CustomEvent('nativeUIShellChange'));
@@ -278,6 +287,10 @@ export const createRuntime = async (doc, plugin, options = {}) => {
             pendingActivations = [];
             if (forceRefresh)
                 rejected = new WeakMap();
+            if (!stopped && (handoffAcrossPending || (handoffInstant && dirty))) {
+                handoffUntil = Math.max(handoffUntil, win.performance.now() + 400);
+            }
+            handoffAcrossPending = false;
             pending = false;
             if (dirty && !stopped)
                 schedule();
@@ -301,12 +314,56 @@ export const createRuntime = async (doc, plugin, options = {}) => {
         getNativeSearchBindings(doc)
             .filter((binding) => page.contains(binding.footer))
             .forEach((binding) => search.retire(binding));
+        if (event.type === LIFECYCLE_WILL_LEAVE)
+            beginTabSwitchHandoffIfNeeded(page);
         pages.add(page);
         schedule();
     };
     const pageDid = (event) => {
         pages.delete(event.target);
         schedule();
+        if (tabSwitchHandoff && pages.size === 0)
+            endTabSwitchHandoff();
+    };
+    const tabOfPath = (tabs, pathname) => {
+        let best;
+        for (const button of Array.from(tabs.querySelectorAll('ion-tab-button'))) {
+            const tab = button.getAttribute('tab');
+            const href = button.getAttribute('href')?.split(/[?#]/)[0];
+            if (!tab || !href)
+                continue;
+            if (pathname === href || pathname.startsWith(`${href}/`)) {
+                if (!best || href.length > best.length)
+                    best = { tab, length: href.length };
+            }
+        }
+        return best?.tab;
+    };
+    const armTabSwitchHandoff = () => {
+        tabSwitchHandoff = true;
+        handoffUntil = Math.max(handoffUntil, win.performance.now() + 400);
+        if (pending)
+            handoffAcrossPending = true;
+    };
+    const beginTabSwitchHandoffIfNeeded = (page) => {
+        const tabs = page.closest('ion-tabs');
+        if (!tabs)
+            return;
+        const bar = tabs.querySelector('ion-tab-bar');
+        const selected = (bar && 'selectedTab' in bar ? String(bar.selectedTab ?? '') : '') ||
+            tabs.querySelector('ion-tab-button.tab-selected')?.getAttribute('tab') ||
+            undefined;
+        const destination = tabOfPath(tabs, win.location.pathname);
+        if (selected && destination && selected !== destination)
+            armTabSwitchHandoff();
+    };
+    const endTabSwitchHandoff = () => {
+        win.requestAnimationFrame(() => {
+            if (stopped || !tabSwitchHandoff)
+                return;
+            tabSwitchHandoff = false;
+            schedule();
+        });
     };
     const motion = (event) => {
         const target = event.target;
@@ -331,9 +388,19 @@ export const createRuntime = async (doc, plugin, options = {}) => {
         on(doc, name, pageWill);
     for (const name of [LIFECYCLE_DID_ENTER, LIFECYCLE_DID_LEAVE])
         on(doc, name, pageDid);
+    on(doc, 'ionTabsWillChange', () => {
+        armTabSwitchHandoff();
+        schedule();
+    });
+    on(doc, 'ionTabsDidChange', endTabSwitchHandoff);
     for (const name of overlayNames) {
         on(doc, `ion${name}WillPresent`, (event) => {
             presented.add(event.target);
+            if (name === 'Modal') {
+                modalPresentHandoff = true;
+                if (pending)
+                    handoffInstant = true;
+            }
             schedule();
         });
         on(doc, `ion${name}DidDismiss`, (event) => {
@@ -352,7 +419,6 @@ export const createRuntime = async (doc, plugin, options = {}) => {
     for (const name of [
         'ionChange',
         'ionSelect',
-        'ionTabsDidChange',
         'ionImgDidLoad',
         CSS_MOTION_EVENTS.transitionEnd,
         CSS_MOTION_EVENTS.animationEnd,

package/dist/native/shared/crossfade.d.ts

@@ -1,7 +1,7 @@
 export declare const fadeMarker = "data-native-ui-shell-fading";
 export declare const createCrossfade: (win: Window) => {
-    duration: () => 0 | 180;
-    play(element: HTMLElement, toNative: boolean): void;
+    duration: (instant?: boolean) => 0 | 180;
+    play(element: HTMLElement, toNative: boolean, instant?: boolean): void;
     settled(): Promise<void>;
     destroy(): void;
 };

package/dist/native/shared/crossfade.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"crossfade.d.ts","sourceRoot":"","sources":["../../../src/native/shared/crossfade.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,UAAU,gCAAgC,CAAC;AAGxD,eAAO,MAAM,eAAe,GAAI,KAAK,MAAM;;kBAezB,WAAW,YAAY,OAAO;;;CA8B/C,CAAC"}
+{"version":3,"file":"crossfade.d.ts","sourceRoot":"","sources":["../../../src/native/shared/crossfade.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,UAAU,gCAAgC,CAAC;AAGxD,eAAO,MAAM,eAAe,GAAI,KAAK,MAAM;;kBAezB,WAAW,YAAY,OAAO;;;CA+B/C,CAAC"}

package/dist/native/shared/crossfade.js

@@ -15,14 +15,14 @@ export const createCrossfade = (win) => {
     };
     reduced.addEventListener('change', cancelAll);
     return {
-        duration: () => (reduced.matches ? 0 : 180),
-        play(element, toNative) {
+        duration: (instant = false) => (reduced.matches || instant ? 0 : 180),
+        play(element, toNative, instant = false) {
             const previous = active.get(element);
             const current = Number(win.getComputedStyle(element).opacity);
             previous?.cancel();
             active.delete(element);
             const opacity = Number(win.getComputedStyle(element).opacity);
-            if (reduced.matches || !element.isConnected) {
+            if (reduced.matches || instant || !element.isConnected) {
                 element.removeAttribute(fadeMarker);
                 return;
             }

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/segment/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AA+CtE,eAAO,MAAM,qBAAqB,GAAI,eAAe,WAAW,KAAG,gBAAgB,GAAG,SAkUrF,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/segment/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AA+CtE,eAAO,MAAM,qBAAqB,GAAI,eAAe,WAAW,KAAG,gBAAgB,GAAG,SA6UrF,CAAC"}

package/dist/segment/index.js

@@ -102,6 +102,13 @@ export const registerSegmentEffect = (targetElement) => {
         animation?.cancel();
         handoff.forEach((effect) => effect.cancel());
         handoff = [];
+        const first = frames[0];
+        if (first) {
+            lens.style.transform = String(first['transform']);
+            lens.style.width = String(first['width']);
+            lens.style.height = String(first['height']);
+            lens.style.backgroundColor = String(first['backgroundColor']);
+        }
         segment.classList.add('ios27-animated');
         lens.hidden = false;
         const running = lens.animate(frames, { duration, easing: 'linear', fill: 'forwards' });

package/docs/animation.md

@@ -78,7 +78,7 @@ Use the following structure inside `ion-tabs` to animate a search button into a
 ```html
 <ion-content>...</ion-content>
 <ion-fab vertical="bottom" horizontal="end" slot="fixed">
-  <ion-fab-button (click)="present($event)">
+  <ion-fab-button aria-label="Search" (click)="present($event)">
     <ion-icon name="search"></ion-icon>
   </ion-fab-button>
 </ion-fab>
@@ -89,7 +89,7 @@ Use the following structure inside `ion-tabs` to animate a search button into a
       <ion-button fill="default"><ion-icon slot="icon-only"></ion-icon> </ion-button>
     </ion-buttons>
     <!-- User set `ionChange` or other events. -->
-    <ion-searchbar (ionChange)="example($event)"></ion-searchbar>
+    <ion-searchbar aria-label="Search" (ionChange)="example($event)"></ion-searchbar>
   </ion-toolbar>
 </ion-footer>
 ```

package/docs/native-ui-shell.md

@@ -118,6 +118,8 @@ Custom host animation or transition declarations on the FAB, list or button keep
 
 The connection in `src/transition/ios.transition.ts` waits for native retirement before starting the Web animation. Interactive progress and completion/cancellation are queued while that retirement is in progress. Stationary shared tabs are retained. First render and transitions without an animation builder are covered by the startup runtime and Ionic lifecycle events.
 
+Tab switches skip the Web/native crossfade so a retiring UIKit snapshot cannot linger over the next tab. Detection uses the router URL versus the still-selected tab on `ionViewWillLeave` (and vanilla `ionTabsWillChange` / `ionTabsDidChange` DOM events). Stack pushes and pops keep the normal 180ms handoff.
+
 Standard Ionic overlays suspend native projection until dismissal. Unsupported searchable-tab configurations use the existing Web animation and share this ownership with Web glass gestures. CSS motion of supported containing surfaces also causes temporary Web rendering.
 
 During retirement, the source is restored and allowed to paint before its native cover is removed. During acquisition, the source is hidden only after a successful, current native response. Delayed responses are revalidated per control: existing eligible controls retain their native cover while content updates catch up. Only removed or ineligible sources return to Web; newly acquired sources require an exact acknowledgement. Ordinary page mutations never call the global clear operation. UIKit tab instances and items are retained, and equal frames/selections are not reapplied. Duplicate/stale activations are discarded. WebKit and UIKit still render separately: the implementation avoids an intentional blank frame, but does not provide an OS-level atomic compositing guarantee. Validate custom transitions and overlays on the app's supported simulators before rollout; unknown overlay systems are outside the automatic integration contract.

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@rdlabo/ionic-theme-ios27",
   "private": false,
-  "version": "1.0.4",
+  "version": "1.1.0-beta.pr224.shac63de393e27b",
   "description": "iOS27 Theme for Ionic Framework",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -56,11 +56,8 @@
   },
   "homepage": "https://docs.rdlabo.dev/projects/ionic-theme-ios27",
   "dependencies": {
-    "@rdlabo/ionic-theme-utils": "git+https://github.com/rdlabo-dev/ionic-theme-utils.git#e82be4389d9209750229f5fee990046b5b1217da"
+    "@rdlabo/ionic-theme-utils": "0.1.1"
   },
-  "bundleDependencies": [
-    "@rdlabo/ionic-theme-utils"
-  ],
   "devDependencies": {
     "@capacitor/core": "^8.5.2",
     "@ionic/angular": "^9.0.0",

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

@@ -310,6 +310,9 @@ export const createSearchSupport = (doc: Document, id: (element: Element) => str
         }
         field.label = '';
         field.accessibilityLabel = bar.getAttribute('aria-label') ?? input.getAttribute('aria-label') ?? 'Search';
+        // Icon-only search FABs often rely on the searchbar for their accessible
+        // name. Carry that semantic name into the independent resting trigger.
+        if (!trigger.accessibilityLabel) trigger.accessibilityLabel = field.accessibilityLabel;
         state.layout = JSON.stringify([
           innerWidth,
           innerHeight,

package/src/native/runtime.ts

@@ -58,6 +58,16 @@ export const createRuntime = async (
   let dirty = false;
   let pending = false;
   let stopped = false;
+  /** True while a tab-switch handoff should skip crossfade. */
+  let tabSwitchHandoff = false;
+  /** Keep instant updates until this time — DidLeave often precedes the retire sync. */
+  let handoffUntil = 0;
+  /** Tab switch armed while a sync was already in flight; extend instant past that sync. */
+  let handoffAcrossPending = false;
+  /** Captured at the start of each sync so an in-flight update keeps a stable duration. */
+  let handoffInstant = false;
+  /** Retire native controls immediately as a modal starts covering the page. */
+  let modalPresentHandoff = false;
   let frame = 0;
   let updates = 0;
   let reason: string | undefined;
@@ -91,7 +101,7 @@ export const createRuntime = async (
     lastSnapshot = '';
     search.release(element);
     element.removeAttribute(marker);
-    if (!stopped) crossfade.play(element, false);
+    if (!stopped) crossfade.play(element, false, handoffInstant);
     if (element.getAttribute('aria-hidden') === 'true') {
       const previous = sources.get(element);
       if (previous == null) element.removeAttribute('aria-hidden');
@@ -197,6 +207,8 @@ export const createRuntime = async (
     frame = 0;
     dirty = false;
     pending = true;
+    handoffInstant = tabSwitchHandoff || handoffAcrossPending || modalPresentHandoff || win.performance.now() < handoffUntil;
+    modalPresentHandoff = false;
     try {
       const size = `${win.innerWidth}:${win.innerHeight}`;
       // WebKit can resize before Ionic's fixed DOM positions catch up.
@@ -225,13 +237,17 @@ export const createRuntime = async (
       if (removed.length) {
         // Restore the source and let WebKit paint before removing its native cover.
         removed.forEach(restore);
-        await painted();
-        if (stopped || dirty) return;
+        // The outgoing tab is no longer visible, so waiting two frames only leaves its
+        // native snapshot over the destination. Stack transitions still need the paint.
+        if (!handoffInstant) {
+          await painted();
+          if (stopped || dirty) return;
+        }
       }
       const data = { viewportWidth: win.innerWidth, controls: candidates.map((candidate) => candidate.control) };
       const serialized = JSON.stringify(data);
       if (serialized === lastSnapshot && !forceRefresh) return;
-      const snapshot: ShellSnapshot = { ...data, revision: ++revision, transitionDuration: crossfade.duration() };
+      const snapshot: ShellSnapshot = { ...data, revision: ++revision, transitionDuration: crossfade.duration(handoffInstant) };
       // A native visibility notification during this update must survive its ack.
       forceRefresh = false;
       updates++;
@@ -272,7 +288,7 @@ export const createRuntime = async (
       for (const element of accepted.flatMap(candidateSources)) {
         if (!sources.has(element)) {
           sources.set(element, element.getAttribute('aria-hidden'));
-          crossfade.play(element, true);
+          crossfade.play(element, true, handoffInstant);
           element.setAttribute(marker, '');
           element.setAttribute('aria-hidden', 'true');
           element.dispatchEvent(new CustomEvent('nativeUIShellChange'));
@@ -294,6 +310,11 @@ export const createRuntime = async (
       pendingActivations = [];
       // A refresh received before the ack must also invalidate that ack's rejects.
       if (forceRefresh) rejected = new WeakMap();
+      // A tab switch mid-update (or a dirty follow-up) must keep instant through the retire sync.
+      if (!stopped && (handoffAcrossPending || (handoffInstant && dirty))) {
+        handoffUntil = Math.max(handoffUntil, win.performance.now() + 400);
+      }
+      handoffAcrossPending = false;
       pending = false;
       if (dirty && !stopped) schedule();
       else finishWaiters();
@@ -323,12 +344,55 @@ export const createRuntime = async (
     getNativeSearchBindings(doc)
       .filter((binding) => page.contains(binding.footer))
       .forEach((binding) => search.retire(binding));
+    // Angular updates the URL before willLeave, but keeps ion-tab-bar.selectedTab on the
+    // leaving tab until DidChange. A mismatch means this leave is a tab switch, not a stack push.
+    if (event.type === LIFECYCLE_WILL_LEAVE) beginTabSwitchHandoffIfNeeded(page);
     pages.add(page);
     schedule();
   };
   const pageDid: EventListener = (event) => {
     pages.delete(event.target as HTMLElement);
     schedule();
+    if (tabSwitchHandoff && pages.size === 0) endTabSwitchHandoff();
+  };
+  const tabOfPath = (tabs: Element, pathname: string) => {
+    let best: { tab: string; length: number } | undefined;
+    for (const button of Array.from(tabs.querySelectorAll('ion-tab-button'))) {
+      const tab = button.getAttribute('tab');
+      const href = button.getAttribute('href')?.split(/[?#]/)[0];
+      if (!tab || !href) continue;
+      if (pathname === href || pathname.startsWith(`${href}/`)) {
+        if (!best || href.length > best.length) best = { tab, length: href.length };
+      }
+    }
+    return best?.tab;
+  };
+  const armTabSwitchHandoff = () => {
+    tabSwitchHandoff = true;
+    // Retiring outgoing controls often lands in a later async sync than WillLeave/DidChange.
+    handoffUntil = Math.max(handoffUntil, win.performance.now() + 400);
+    // The in-flight sync already captured handoffInstant=false; hold instant for the next one.
+    if (pending) handoffAcrossPending = true;
+  };
+  const beginTabSwitchHandoffIfNeeded = (page: HTMLElement) => {
+    const tabs = page.closest('ion-tabs');
+    if (!tabs) return;
+    const bar = tabs.querySelector('ion-tab-bar');
+    const selected =
+      (bar && 'selectedTab' in bar ? String((bar as HTMLElement & { selectedTab?: string }).selectedTab ?? '') : '') ||
+      tabs.querySelector('ion-tab-button.tab-selected')?.getAttribute('tab') ||
+      undefined;
+    const destination = tabOfPath(tabs, win.location.pathname);
+    if (selected && destination && selected !== destination) armTabSwitchHandoff();
+  };
+  // DidChange / pageDid can land in the same turn as WillLeave. Clear the sticky flag on the
+  // next frame; handoffUntil / handoffAcrossPending still cover the async retire sync.
+  const endTabSwitchHandoff = () => {
+    win.requestAnimationFrame(() => {
+      if (stopped || !tabSwitchHandoff) return;
+      tabSwitchHandoff = false;
+      schedule();
+    });
   };
   const motion: EventListener = (event) => {
     const target = event.target as HTMLElement;
@@ -347,9 +411,21 @@ export const createRuntime = async (
   for (const name of Object.values(CSS_MOTION_EVENTS)) on(doc, name, motion);
   for (const name of [LIFECYCLE_WILL_ENTER, LIFECYCLE_WILL_LEAVE]) on(doc, name, pageWill);
   for (const name of [LIFECYCLE_DID_ENTER, LIFECYCLE_DID_LEAVE]) on(doc, name, pageDid);
+  on(doc, 'ionTabsWillChange', () => {
+    // Vanilla ion-tabs dispatches DOM events; @ionic/angular uses EventEmitters instead.
+    armTabSwitchHandoff();
+    schedule();
+  });
+  on(doc, 'ionTabsDidChange', endTabSwitchHandoff);
   for (const name of overlayNames) {
     on(doc, `ion${name}WillPresent`, (event) => {
       presented.add(event.target as HTMLElement);
+      if (name === 'Modal') {
+        modalPresentHandoff = true;
+        // WillPresent may arrive while another bridge update is awaiting its ack.
+        // Make that retirement instant too instead of racing the modal animation.
+        if (pending) handoffInstant = true;
+      }
       schedule();
     });
     on(doc, `ion${name}DidDismiss`, (event) => {
@@ -368,7 +444,6 @@ export const createRuntime = async (
   for (const name of [
     'ionChange',
     'ionSelect',
-    'ionTabsDidChange',
     'ionImgDidLoad',
     CSS_MOTION_EVENTS.transitionEnd,
     CSS_MOTION_EVENTS.animationEnd,

package/src/native/shared/crossfade.ts

@@ -15,14 +15,15 @@ export const createCrossfade = (win: Window) => {
   };
   reduced.addEventListener('change', cancelAll);
   return {
-    duration: () => (reduced.matches ? 0 : 180),
-    play(element: HTMLElement, toNative: boolean) {
+    duration: (instant = false) => (reduced.matches || instant ? 0 : 180),
+    play(element: HTMLElement, toNative: boolean, instant = false) {
       const previous = active.get(element);
       const current = Number(win.getComputedStyle(element).opacity);
       previous?.cancel();
       active.delete(element);
       const opacity = Number(win.getComputedStyle(element).opacity);
-      if (reduced.matches || !element.isConnected) {
+      // Tab switches skip the opacity handoff so a retiring native snapshot cannot linger.
+      if (reduced.matches || instant || !element.isConnected) {
         element.removeAttribute(fadeMarker);
         return;
       }

package/src/segment/index.ts

@@ -119,6 +119,17 @@ export const registerSegmentEffect = (targetElement: HTMLElement): registeredEff
     animation?.cancel();
     handoff.forEach((effect) => effect.cancel());
     handoff = [];
+    // WebKit can paint the newly unhidden element once at its underlying
+    // top-left position before the replacement WAAPI effect is sampled.
+    // Prime that underlying style so interrupted/reversed selections always
+    // hand off from the first frame instead of briefly flashing at (0, 0).
+    const first = frames[0];
+    if (first) {
+      lens.style.transform = String(first['transform']);
+      lens.style.width = String(first['width']);
+      lens.style.height = String(first['height']);
+      lens.style.backgroundColor = String(first['backgroundColor']);
+    }
     segment.classList.add('ios27-animated');
     lens.hidden = false;
     const running = lens.animate(frames, { duration, easing: 'linear', fill: 'forwards' });

package/src/styles/components/ion-toggle.scss

@@ -5,7 +5,10 @@ ion-toggle.ios:not(.ios-theme-disabled, .ios26-disabled) {
   --handle-max-width: none;
   --handle-max-height: none;
   --border-radius: 14px;
-  --track-background-checked: var(--ion-color-base, #34c759);
+  --track-background-checked: var(--ion-color-primary, #3880ff);
+  &.ion-color {
+    --track-background-checked: var(--ion-color-base);
+  }
   &::part(track) {
     width: 63px;
     height: 28px;
@@ -48,7 +51,10 @@ ion-toggle.ios:not(.ios-theme-disabled, .ios26-disabled) {
     &:not(.ion-color) {
       --track-background: rgba(var(--ion-color-contrast-rgb, var(--ion-text-color-rgb, 0, 0, 0)), 0.23);
     }
-    --track-background-checked: var(--ion-color-base, #34c759);
+    --track-background-checked: var(--ion-color-primary, #3880ff);
+    &.ion-color {
+      --track-background-checked: var(--ion-color-base);
+    }
     // Measured from the iOS 27 UISwitch presentation layer (37 -> 58pt).
     --ios27-toggle-release: linear(
       0,

package/src/tab-bar-searchable/index.ts

@@ -48,7 +48,7 @@ export {
  *     </ion-button>
  *     </ion-buttons>
  *     <!-- User set `ionChange` or other events. -->
- *     <ion-searchbar (ionChange)="example($event)"></ion-searchbar>
+ *     <ion-searchbar aria-label="Search" (ionChange)="example($event)"></ion-searchbar>
  *   </ion-toolbar>
  *  </ion-footer>
  **/

package/node_modules/@rdlabo/ionic-theme-utils/LICENSE

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2026 Masahiko Sakakibara
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.

package/node_modules/@rdlabo/ionic-theme-utils/README.md

@@ -1,28 +0,0 @@
-# @rdlabo/ionic-theme-utils
-
-Shared, theme-neutral utilities for Rdlabo Ionic themes.
-
-TypeScript and Sass sources are exported directly. Consumers are expected to
-compile them as part of an Angular/Ionic application build.
-
-```typescript
-import { createIosTransitionAnimation, getPopoverPosition } from '@rdlabo/ionic-theme-utils';
-```
-
-```scss
-@use 'pkg:@rdlabo/ionic-theme-utils/styles/structured-list';
-```
-
-The package currently contains shared iOS transition construction, popover
-positioning, searchable tab-bar utilities, and structured-list Sass mixins.
-
-## Development
-
-```shell
-npm install
-npm run build
-npm run lint
-```
-
-Use `npm link` while developing this package together with a theme repository.
-Theme repositories should use a tagged Git dependency for reproducible installs.

package/node_modules/@rdlabo/ionic-theme-utils/dist/dom.d.ts

@@ -1,3 +0,0 @@
-export declare const getElementRoot: (el: HTMLElement, fallback?: HTMLElement) => HTMLElement | ShadowRoot;
-export declare const raf: (h: FrameRequestCallback) => any;
-//# sourceMappingURL=dom.d.ts.map

package/node_modules/@rdlabo/ionic-theme-utils/dist/dom.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"dom.d.ts","sourceRoot":"","sources":["../src/dom.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,cAAc,GAAI,IAAI,WAAW,EAAE,WAAU,WAAgB,6BAEzE,CAAC;AAEF,eAAO,MAAM,GAAG,GAAI,GAAG,oBAAoB,QAQ1C,CAAC"}

package/node_modules/@rdlabo/ionic-theme-utils/dist/dom.js

@@ -1,13 +0,0 @@
-export const getElementRoot = (el, fallback = el) => {
-    return el.shadowRoot || fallback;
-};
-export const raf = (h) => {
-    if (typeof __zone_symbol__requestAnimationFrame === 'function') {
-        return __zone_symbol__requestAnimationFrame(h);
-    }
-    if (typeof requestAnimationFrame === 'function') {
-        return requestAnimationFrame(h);
-    }
-    return setTimeout(h);
-};
-//# sourceMappingURL=dom.js.map

package/node_modules/@rdlabo/ionic-theme-utils/dist/dom.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"dom.js","sourceRoot":"","sources":["../src/dom.ts"],"names":[],"mappings":"AAGA,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,EAAe,EAAE,WAAwB,EAAE,EAAE,EAAE;IAC5E,OAAO,EAAE,CAAC,UAAU,IAAI,QAAQ,CAAC;AACnC,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,GAAG,GAAG,CAAC,CAAuB,EAAE,EAAE;IAC7C,IAAI,OAAO,oCAAoC,KAAK,UAAU,EAAE,CAAC;QAC/D,OAAO,oCAAoC,CAAC,CAAC,CAAC,CAAC;IACjD,CAAC;IACD,IAAI,OAAO,qBAAqB,KAAK,UAAU,EAAE,CAAC;QAChD,OAAO,qBAAqB,CAAC,CAAC,CAAC,CAAC;IAClC,CAAC;IACD,OAAO,UAAU,CAAC,CAAC,CAAC,CAAC;AACvB,CAAC,CAAC"}

package/node_modules/@rdlabo/ionic-theme-utils/dist/focus-controller.d.ts

@@ -1,6 +0,0 @@
-export interface FocusController {
-    saveViewFocus(referenceEl?: HTMLElement): void;
-    setViewFocus(referenceEl: HTMLElement): void;
-}
-export declare const createFocusController: () => FocusController;
-//# sourceMappingURL=focus-controller.d.ts.map

package/node_modules/@rdlabo/ionic-theme-utils/dist/focus-controller.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"focus-controller.d.ts","sourceRoot":"","sources":["../src/focus-controller.ts"],"names":[],"mappings":"AASA,MAAM,WAAW,eAAe;IAC9B,aAAa,CAAC,WAAW,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC/C,YAAY,CAAC,WAAW,EAAE,WAAW,GAAG,IAAI,CAAC;CAC9C;AAED,eAAO,MAAM,qBAAqB,QAAO,eAuBvC,CAAC"}