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

package/dist/native/prehide.d.ts

@@ -0,0 +1,5 @@
+export declare const prehideVerticalBarsToolbarSources: (doc: Document) => {
+    suspend: () => () => void;
+    stop: () => void;
+};
+//# sourceMappingURL=prehide.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"prehide.d.ts","sourceRoot":"","sources":["../../src/native/prehide.ts"],"names":[],"mappings":"AAiCA,eAAO,MAAM,iCAAiC,GAAI,KAAK,QAAQ,KAAG;IAAE,OAAO,EAAE,MAAM,MAAM,IAAI,CAAC;IAAC,IAAI,EAAE,MAAM,IAAI,CAAA;CA6N9G,CAAC"}

package/dist/native/prehide.js

@@ -0,0 +1,246 @@
+import { LIFECYCLE_DID_ENTER, LIFECYCLE_DID_LEAVE, LIFECYCLE_WILL_ENTER, LIFECYCLE_WILL_LEAVE } from '@ionic/core';
+import { VERTICAL_BARS_TRANSITION_CANCELED } from '../native-integration';
+import { childElements, clearVerticalBarsPlacement, createVerticalBarsPageState, verticalBarsActionCandidate, verticalBarsBackCandidate, verticalBarsBackWebClass, verticalBarsOwned, isVerticalBarsToolbarActionShape, isPermanentlyExcluded, isShellDisabled, prehiddenClass, prehideRootClass, rejectedClass, setVerticalBarsPlacement, } from './shared/dom';
+const overlays = 'ion-menu, ion-modal, ion-popover';
+const sourceSelector = 'ion-back-button, ion-menu-button, ion-buttons, ion-button';
+const isHtmlElement = (node) => !!node && node.nodeType === 1;
+const asElement = (node) => (isHtmlElement(node) ? node : undefined);
+const backSupported = (element) => {
+    const back = element;
+    return back.icon === undefined && back.color === undefined && !!back.shadowRoot;
+};
+const eligibleBack = verticalBarsBackCandidate;
+const eligible = verticalBarsActionCandidate;
+export const prehideVerticalBarsToolbarSources = (doc) => {
+    doc.documentElement.classList.add(prehideRootClass);
+    const scopes = new Map();
+    const owner = new WeakMap();
+    const pendingBacks = new Map();
+    const verticalBarsPages = createVerticalBarsPageState();
+    const listeners = new AbortController();
+    const root = () => doc.querySelector('ion-app.ios-theme-vertical-bars');
+    let suspended = 0;
+    let stopped = false;
+    const routedPage = (element) => element.closest('.ion-page:not(ion-app, body)');
+    const release = (scope) => {
+        for (const [element, pending] of pendingBacks) {
+            if (pending.scope !== scope)
+                continue;
+            clearTimeout(pending.timer);
+            pendingBacks.delete(element);
+        }
+        const owned = scopes.get(scope);
+        if (!owned)
+            return;
+        owned.forEach((element) => {
+            if (owner.get(element) !== scope)
+                return;
+            owner.delete(element);
+            element.classList.remove(prehiddenClass);
+            element.classList.remove(verticalBarsBackWebClass);
+            clearVerticalBarsPlacement(element);
+        });
+        scopes.delete(scope);
+    };
+    const capture = (scope) => {
+        if (!root()?.contains(scope) || scope.closest(overlays) || verticalBarsPages.isDeparted(scope))
+            return;
+        const owned = scopes.get(scope) ?? new Set();
+        const place = (element, rail) => {
+            if (owned.has(element))
+                return;
+            const previousScope = owner.get(element);
+            if (previousScope)
+                scopes.get(previousScope)?.delete(element);
+            owner.set(element, scope);
+            setVerticalBarsPlacement(element, rail);
+            if (element.matches('ion-back-button'))
+                element.classList.toggle(verticalBarsBackWebClass, !rail);
+            owned.add(element);
+        };
+        const sources = scope.matches('ion-back-button') ? [scope] : Array.from(scope.querySelectorAll(sourceSelector));
+        sources.forEach((element) => {
+            if (element.closest(overlays) || (scope.matches('.ion-page') && routedPage(element) !== scope))
+                return;
+            if (element.matches('ion-buttons')) {
+                const children = childElements(element);
+                const actions = children.filter((child) => eligible(child) && isVerticalBarsToolbarActionShape(child));
+                const group = eligible(element) &&
+                    actions.length === children.length &&
+                    (actions.length > 1 || (actions.length === 1 && actions[0].matches('ion-menu-button')));
+                const freshGroup = !owned.has(element);
+                place(element, group);
+                children.forEach((child) => {
+                    if (!child.matches('ion-back-button'))
+                        place(child, freshGroup && actions.includes(child));
+                });
+            }
+            else if (element.matches('ion-back-button') || !element.parentElement?.matches('ion-buttons')) {
+                if (owned.has(element))
+                    return;
+                if (element.matches('ion-back-button') &&
+                    eligibleBack(element) &&
+                    element.icon === undefined &&
+                    element.color === undefined &&
+                    !element.shadowRoot &&
+                    !element.classList.contains('hydrated')) {
+                    const previousPending = pendingBacks.get(element);
+                    if (previousPending && previousPending.scope !== scope) {
+                        clearTimeout(previousPending.timer);
+                        pendingBacks.delete(element);
+                    }
+                    if (!pendingBacks.has(element)) {
+                        const timer = setTimeout(() => {
+                            if (pendingBacks.get(element)?.scope !== scope)
+                                return;
+                            pendingBacks.delete(element);
+                            place(element, false);
+                            reconcile();
+                        }, 1500);
+                        pendingBacks.set(element, { scope, timer });
+                    }
+                    return;
+                }
+                const pending = pendingBacks.get(element);
+                if (pending) {
+                    clearTimeout(pending.timer);
+                    pendingBacks.delete(element);
+                }
+                place(element, element.matches('ion-back-button')
+                    ? eligibleBack(element) && backSupported(element)
+                    : eligible(element) && isVerticalBarsToolbarActionShape(element));
+            }
+        });
+        scopes.set(scope, owned);
+    };
+    const reconcile = () => {
+        const verticalBars = root();
+        if (!verticalBars) {
+            Array.from(scopes.keys()).forEach(release);
+            return;
+        }
+        for (const scope of scopes.keys())
+            if (!scope.isConnected)
+                release(scope);
+        for (const [element, pending] of pendingBacks)
+            if (element.shadowRoot || element.classList.contains('hydrated'))
+                capture(pending.scope);
+        verticalBars.querySelectorAll('.ion-page:not(ion-app, body, .ion-page-hidden)').forEach(capture);
+        verticalBars.querySelectorAll(sourceSelector).forEach((element) => {
+            if (routedPage(element) || element.closest(overlays))
+                return;
+            const scope = element.closest('ion-toolbar') ?? (element.matches('ion-back-button') ? element : null);
+            if (scope)
+                capture(scope);
+        });
+        for (const owned of scopes.values()) {
+            for (const element of owned) {
+                const groupOwnsChildren = element.parentElement?.matches('ion-buttons') &&
+                    verticalBarsOwned(element.parentElement) &&
+                    childElements(element.parentElement).every((child) => verticalBarsOwned(child));
+                const hide = !suspended &&
+                    verticalBarsOwned(element) &&
+                    !groupOwnsChildren &&
+                    element.isConnected &&
+                    !element.closest(`.${rejectedClass}`) &&
+                    !isPermanentlyExcluded(element) &&
+                    !isShellDisabled(element) &&
+                    (!element.matches('ion-back-button') || backSupported(element) || !element.classList.contains('hydrated')) &&
+                    (!element.matches('ion-buttons') || childElements(element).every((child) => verticalBarsOwned(child)));
+                element.classList.toggle(prehiddenClass, hide);
+                if (element.matches('ion-back-button'))
+                    element.classList.toggle(verticalBarsBackWebClass, !hide);
+            }
+        }
+    };
+    const onWillEnter = (event) => {
+        const page = asElement(event.target);
+        if (page?.matches('.ion-page')) {
+            verticalBarsPages.lifecycle(event);
+            release(page);
+            capture(page);
+            reconcile();
+        }
+    };
+    const onPageLifecycle = (event) => {
+        verticalBarsPages.lifecycle(event);
+        if (event.type !== LIFECYCLE_DID_LEAVE)
+            return;
+        const page = asElement(event.target);
+        if (page)
+            release(page);
+    };
+    const onTransitionCanceled = (event) => {
+        const leaving = asElement(event.target);
+        if (!leaving)
+            return;
+        const entering = event.detail?.entering;
+        verticalBarsPages.cancel(entering, leaving);
+        reconcile();
+    };
+    doc.addEventListener(LIFECYCLE_WILL_ENTER, onWillEnter, { capture: true, signal: listeners.signal });
+    for (const name of [LIFECYCLE_WILL_LEAVE, LIFECYCLE_DID_ENTER, LIFECYCLE_DID_LEAVE])
+        doc.addEventListener(name, onPageLifecycle, { capture: true, signal: listeners.signal });
+    doc.addEventListener(VERTICAL_BARS_TRANSITION_CANCELED, onTransitionCanceled, { capture: true, signal: listeners.signal });
+    reconcile();
+    const mutationRelevant = (record) => {
+        if (record.type === 'childList')
+            return [...Array.from(record.addedNodes), ...Array.from(record.removedNodes)].some((node) => isHtmlElement(node) &&
+                (node.matches(`${sourceSelector}, .ion-page, ion-toolbar`) || !!node.querySelector(`${sourceSelector}, .ion-page, ion-toolbar`)));
+        if (record.attributeName !== 'class')
+            return true;
+        const current = record.target.className;
+        const previous = record.oldValue ?? '';
+        const withoutOwned = (value) => value
+            .split(/\s+/)
+            .filter((name) => name && ![prehiddenClass, prehideRootClass, verticalBarsBackWebClass].includes(name))
+            .join(' ');
+        return typeof current !== 'string' || withoutOwned(previous) !== withoutOwned(current);
+    };
+    let scheduled = false;
+    const observer = new (doc.defaultView?.MutationObserver ?? MutationObserver)((records) => {
+        if (scheduled || stopped || !records.some(mutationRelevant))
+            return;
+        scheduled = true;
+        queueMicrotask(() => {
+            scheduled = false;
+            if (!stopped)
+                reconcile();
+        });
+    });
+    observer.observe(doc.documentElement, {
+        subtree: true,
+        childList: true,
+        attributes: true,
+        attributeOldValue: true,
+        attributeFilter: ['class', 'hidden', 'inert', 'icon', 'color'],
+    });
+    return {
+        suspend: () => {
+            if (stopped)
+                return () => { };
+            suspended++;
+            doc.documentElement.classList.remove(prehideRootClass);
+            reconcile();
+            let resumed = false;
+            return () => {
+                if (resumed || stopped)
+                    return;
+                resumed = true;
+                if (--suspended === 0) {
+                    doc.documentElement.classList.add(prehideRootClass);
+                    reconcile();
+                }
+            };
+        },
+        stop: () => {
+            if (stopped)
+                return;
+            stopped = true;
+            observer.disconnect();
+            listeners.abort();
+            doc.documentElement.classList.remove(prehideRootClass);
+            Array.from(scopes.keys()).forEach(release);
+        },
+    };
+};

package/dist/native/runtime.d.ts

@@ -1,3 +1,3 @@
 import type { NativeUIShellHandle, NativeUIShellOptions, NativeUIShellPlugin } from './definitions';
-export declare const createRuntime: (doc: Document, plugin: NativeUIShellPlugin, options?: NativeUIShellOptions) => Promise<NativeUIShellHandle>;
+export declare const createRuntime: (doc: Document, plugin: NativeUIShellPlugin, options?: NativeUIShellOptions, nativeVerticalBars?: () => boolean, verticalBarsOnly?: boolean) => Promise<NativeUIShellHandle>;
 //# sourceMappingURL=runtime.d.ts.map

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,CA+jB7B,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;AA6BvB,eAAO,MAAM,aAAa,GACxB,KAAK,QAAQ,EACb,QAAQ,mBAAmB,EAC3B,UAAS,oBAAyB,EAClC,qBAAoB,MAAM,OAAoB,EAC9C,0BAAwB,KACvB,OAAO,CAAC,mBAAmB,CAosB7B,CAAC"}

package/dist/native/runtime.js

@@ -1,26 +1,31 @@
 import { LIFECYCLE_WILL_ENTER, LIFECYCLE_WILL_LEAVE, LIFECYCLE_DID_ENTER, LIFECYCLE_DID_LEAVE } from '@ionic/core';
-import { getNativeSearchBindings, setNativeUIShellIntegration } from '../native-integration';
+import { VERTICAL_BARS_TRANSITION_CANCELED, getNativeSearchBindings, setNativeUIShellIntegration } from '../native-integration';
 import { createSearchSupport } from './components/searchable-tabs';
-import { readCandidate, selector, shadowSelector, motionSelector } from './components';
-import { marker, unprojected } from './shared/dom';
+import { readCandidate, selector, shadowSelector, motionSelector, isVerticalBarsCandidate } from './components';
+import { activateProjectedElement, createVerticalBarsPageState, isVerticalBarsSource, preferredVerticalBarsBack, marker, prehideOnlyMutation, rejectedClass, unprojected, } from './shared/dom';
 import { createIconRenderer } from './shared/icons';
 import { CSS_MOTION_EVENTS } from './shared/events';
 import { createCrossfade, fadeMarker } from './shared/crossfade';
 const overlays = 'ion-modal, ion-popover, ion-alert, ion-action-sheet, ion-loading, ion-picker, ion-toast, ion-menu';
 const overlayNames = ['Modal', 'Popover', 'Alert', 'ActionSheet', 'Loading', 'Picker', 'Toast'];
+const verticalBarsMarker = 'data-native-ui-shell-vertical-bars';
+const verticalBarsMemberMarker = 'data-native-ui-shell-vertical-bars-member';
 const bounded = (promise) => new Promise((resolve, reject) => {
     const timer = setTimeout(() => reject(new Error('Native UI Shell bridge timed out')), 5000);
     promise.then(resolve, reject).finally(() => clearTimeout(timer));
 });
-export const createRuntime = async (doc, plugin, options = {}) => {
+export const createRuntime = async (doc, plugin, options = {}, nativeVerticalBars = () => true, verticalBarsOnly = false) => {
     const win = doc.defaultView;
     const icons = createIconRenderer();
     const crossfade = createCrossfade(win);
     const ids = new WeakMap();
     let rejected = new WeakMap();
     const sources = new Map();
+    const verticalBarsOwners = new Set();
+    const verticalBarsMembers = new Set();
     const suspended = new Set();
     const pages = new Set();
+    const verticalBarsPages = createVerticalBarsPageState();
     const presented = new Set();
     const manualSuspensions = new Set();
     const moving = new Map();
@@ -74,13 +79,22 @@ export const createRuntime = async (doc, plugin, options = {}) => {
     const style = doc.createElement('style');
     const hidden = `[${marker}]:not([${fadeMarker}])`;
     style.textContent = `${hidden}, ${hidden} *, ${hidden}::before, ${hidden}::after, ${hidden}::part(native) { visibility: hidden !important; }
-    [${marker}], [${marker}] * { pointer-events: none !important; }`;
+    [${marker}], [${marker}] * { pointer-events: none !important; }
+    /* Ionic disables the covered page while a menu is open. VerticalBars rail
+       controls remain outside that page; zero specificity preserves any
+       pointer-events rule supplied by the application itself. */
+    :where(.menu-content-open) :where([${verticalBarsMarker}]) {
+      pointer-events: auto;
+    }
+    :where(.menu-content-open) :where([${verticalBarsMarker}]) > :where(:not([${verticalBarsMemberMarker}])) {
+      pointer-events: none;
+    }`;
     const restore = (element) => {
         lastSnapshot = '';
         search.release(element);
         element.removeAttribute(marker);
         if (!stopped)
-            crossfade.play(element, false, handoffInstant);
+            crossfade.play(element, false, handoffInstant || isVerticalBarsSource(element));
         if (element.getAttribute('aria-hidden') === 'true') {
             const previous = sources.get(element);
             if (previous == null)
@@ -91,7 +105,13 @@ export const createRuntime = async (doc, plugin, options = {}) => {
         sources.delete(element);
         element.dispatchEvent(new CustomEvent('nativeUIShellChange'));
     };
-    const restoreAll = () => Array.from(sources.keys()).forEach(restore);
+    const restoreAll = () => {
+        Array.from(sources.keys()).forEach(restore);
+        verticalBarsOwners.forEach((element) => element.removeAttribute(verticalBarsMarker));
+        verticalBarsOwners.clear();
+        verticalBarsMembers.forEach((element) => element.removeAttribute(verticalBarsMemberMarker));
+        verticalBarsMembers.clear();
+    };
     const finishWaiters = () => {
         const current = waiters;
         waiters = [];
@@ -106,8 +126,48 @@ export const createRuntime = async (doc, plugin, options = {}) => {
     };
     const search = createSearchSupport(doc, id, schedule);
     const candidateSources = (candidate) => candidate.sources ?? [candidate.element];
+    const setRejected = (element, value) => {
+        element.classList.toggle(rejectedClass, value);
+    };
+    const measuringPointerPages = new WeakSet();
     const readEnabledCandidate = (element) => {
-        const candidate = readCandidate(element, id);
+        if (element.matches('ion-back-button') && element.closest('ion-app.ios-theme-vertical-bars') && !isVerticalBarsCandidate(element))
+            return;
+        if (verticalBarsOnly && !isVerticalBarsCandidate(element))
+            return;
+        const pointerPage = isVerticalBarsCandidate(element) ? element.closest('.ion-page') : undefined;
+        let candidate;
+        if (pointerPage && getComputedStyle(pointerPage).pointerEvents === 'none') {
+            const previous = pointerPage.style.getPropertyValue('pointer-events');
+            const priority = pointerPage.style.getPropertyPriority('pointer-events');
+            const hadStyle = pointerPage.hasAttribute('style');
+            measuringPointerPages.add(pointerPage);
+            pointerPage.style.setProperty('pointer-events', 'auto', 'important');
+            try {
+                candidate = readCandidate(element, id);
+            }
+            finally {
+                if (previous)
+                    pointerPage.style.setProperty('pointer-events', previous, priority);
+                else
+                    pointerPage.style.removeProperty('pointer-events');
+                if (!hadStyle && !pointerPage.style.length)
+                    pointerPage.removeAttribute('style');
+                win.setTimeout(() => measuringPointerPages.delete(pointerPage), 0);
+            }
+        }
+        else
+            candidate = readCandidate(element, id);
+        if (candidate && isVerticalBarsCandidate(element)) {
+            if (!nativeVerticalBars())
+                return undefined;
+            candidate.control.placement = 'vertical-bars';
+            if (['ion-button', 'ion-buttons', 'ion-menu-button'].includes(candidate.control.kind)) {
+                const slot = (element.matches('ion-buttons') ? element : (element.closest('ion-buttons') ?? element)).getAttribute('slot');
+                if (slot === 'start' || slot === 'end')
+                    candidate.control.toolbarSlot = slot;
+            }
+        }
         return candidate && controlEnabled(candidate) ? candidate : undefined;
     };
     const flush = async () => {
@@ -121,17 +181,21 @@ export const createRuntime = async (doc, plugin, options = {}) => {
             await fail(error);
         }
     };
-    const blocked = (element) => Array.from(suspended).some((scopes) => scopes.some((scope) => scope.contains(element))) ||
-        Array.from(pages).some((page) => page.contains(element)) ||
-        Array.from(moving.keys()).some((surface) => surface.contains(element));
+    const blocked = (element) => verticalBarsPages.isDeparted(element) ||
+        (!isVerticalBarsSource(element) &&
+            (Array.from(suspended).some((scopes) => scopes.some((scope) => scope.contains(element))) ||
+                Array.from(pages).some((scope) => scope.contains(element)) ||
+                Array.from(moving.keys()).some((surface) => surface.contains(element))));
     const painted = () => new Promise((resolve) => win.requestAnimationFrame(() => win.requestAnimationFrame(() => resolve())));
-    const overlayOpen = () => {
+    const overlayOpen = (includeMenu = true) => {
         for (const element of presented)
             if (!element.isConnected)
                 presented.delete(element);
+        const presentedOverlayOpen = Array.from(presented).some((element) => includeMenu || !element.matches('ion-menu'));
         return (manualSuspensions.size > 0 ||
-            presented.size > 0 ||
-            Array.from(doc.querySelectorAll(overlays)).some((element) => element.presented || element.classList.contains('show-menu')));
+            presentedOverlayOpen ||
+            Array.from(doc.querySelectorAll(overlays)).some((element) => (includeMenu || !element.matches('ion-menu')) &&
+                (element.presented || element.classList.contains('show-menu'))));
     };
     const signature = (candidate) => JSON.stringify({ control: candidate.control, icons: candidate.icons.map(({ source }) => source) });
     const read = () => {
@@ -142,16 +206,22 @@ export const createRuntime = async (doc, plugin, options = {}) => {
         for (const surface of moving.keys())
             if (!surface.isConnected)
                 moving.delete(surface);
-        if (doc.hidden || overlayOpen())
+        if (doc.hidden || overlayOpen(false))
             return [];
         if (win.visualViewport && (win.visualViewport.scale !== 1 || win.visualViewport.offsetTop !== 0) && !search.hasActive())
             return [];
-        return unprojected(sources.keys(), () => search
+        const menuOpen = overlayOpen();
+        const candidates = unprojected(sources.keys(), () => search
             .decorate(Array.from(doc.querySelectorAll(selector))
-            .filter((element) => !blocked(element))
+            .filter((element) => !verticalBarsPages.isDeparted(element) && (!blocked(element) || (menuOpen && isVerticalBarsSource(element))))
             .map(readEnabledCandidate)
             .filter((candidate) => !!candidate), blocked)
             .filter((candidate) => !rejected.has(candidate.element) || rejected.get(candidate.element) !== signature(candidate)));
+        const back = preferredVerticalBarsBack(candidates
+            .filter((candidate) => candidate.control.kind === 'ion-back-button' && isVerticalBarsCandidate(candidate.element))
+            .map((candidate) => candidate.element), doc);
+        const selected = candidates.filter((candidate) => candidate.control.kind !== 'ion-back-button' || !isVerticalBarsCandidate(candidate.element) || candidate.element === back);
+        return menuOpen ? selected.filter((candidate) => isVerticalBarsCandidate(candidate.element)) : selected;
     };
     const observe = () => {
         const wanted = new Set();
@@ -186,6 +256,7 @@ export const createRuntime = async (doc, plugin, options = {}) => {
         reason = error instanceof Error ? error.message : String(error);
         console.warn('[Native UI Shell] Returning to Web:', reason);
         await handle.destroy();
+        win.dispatchEvent(new Event('nativeUIShellRefresh'));
     };
     const sync = async () => {
         frame = 0;
@@ -215,13 +286,19 @@ export const createRuntime = async (doc, plugin, options = {}) => {
             const removed = Array.from(sources.keys()).filter((element) => !retained.has(element));
             if (removed.length) {
                 removed.forEach(restore);
-                if (!handoffInstant) {
+                if (!handoffInstant && removed.some((element) => !isVerticalBarsSource(element))) {
                     await painted();
                     if (stopped || dirty)
                         return;
                 }
             }
-            const data = { viewportWidth: win.innerWidth, controls: candidates.map((candidate) => candidate.control) };
+            const root = doc.querySelector('ion-app.ios-theme-vertical-bars');
+            const verticalBarEdge = root
+                ? root.classList.contains('ios-theme-vertical-bars-left')
+                    ? 'left'
+                    : 'right'
+                : undefined;
+            const data = { viewportWidth: win.innerWidth, verticalBarEdge, controls: candidates.map((candidate) => candidate.control) };
             const serialized = JSON.stringify(data);
             if (serialized === lastSnapshot && !forceRefresh)
                 return;
@@ -247,6 +324,7 @@ export const createRuntime = async (doc, plugin, options = {}) => {
             for (const candidate of candidates) {
                 if (result.rejectedControls?.includes(candidate.control.id)) {
                     rejected.set(candidate.element, signatures.get(candidate.element));
+                    setRejected(candidate.element, true);
                     dirty = true;
                 }
             }
@@ -254,6 +332,11 @@ export const createRuntime = async (doc, plugin, options = {}) => {
             const current = dirty ? new Map(currentCandidates.map((candidate) => [candidate.element, signature(candidate)])) : signatures;
             const currentSources = new Set(currentCandidates.flatMap(candidateSources));
             const accepted = candidates.filter((candidate) => current.get(candidate.element) === signatures.get(candidate.element));
+            accepted.forEach((candidate) => setRejected(candidate.element, false));
+            const acceptedVerticalBarsOwners = new Set(accepted.filter((candidate) => candidate.control.placement === 'vertical-bars').map((candidate) => candidate.element));
+            const acceptedVerticalBarsMembers = new Set(accepted
+                .filter((candidate) => candidate.control.placement === 'vertical-bars')
+                .flatMap((candidate) => Array.from(candidate.actions.values())));
             const invalidated = candidates.length !== accepted.length;
             acceptedRevision = result.revision;
             lastSnapshot = invalidated ? '' : serialized;
@@ -261,10 +344,30 @@ export const createRuntime = async (doc, plugin, options = {}) => {
             for (const element of sources.keys())
                 if (!currentSources.has(element))
                     restore(element);
+            for (const element of verticalBarsOwners) {
+                if (acceptedVerticalBarsOwners.has(element))
+                    continue;
+                element.removeAttribute(verticalBarsMarker);
+                verticalBarsOwners.delete(element);
+            }
+            for (const element of acceptedVerticalBarsOwners) {
+                element.setAttribute(verticalBarsMarker, '');
+                verticalBarsOwners.add(element);
+            }
+            for (const element of verticalBarsMembers) {
+                if (acceptedVerticalBarsMembers.has(element))
+                    continue;
+                element.removeAttribute(verticalBarsMemberMarker);
+                verticalBarsMembers.delete(element);
+            }
+            for (const element of acceptedVerticalBarsMembers) {
+                element.setAttribute(verticalBarsMemberMarker, '');
+                verticalBarsMembers.add(element);
+            }
             for (const element of accepted.flatMap(candidateSources)) {
                 if (!sources.has(element)) {
                     sources.set(element, element.getAttribute('aria-hidden'));
-                    crossfade.play(element, true, handoffInstant);
+                    crossfade.play(element, true, handoffInstant || isVerticalBarsSource(element));
                     element.setAttribute(marker, '');
                     element.setAttribute('aria-hidden', 'true');
                     element.dispatchEvent(new CustomEvent('nativeUIShellChange'));
@@ -298,10 +401,18 @@ export const createRuntime = async (doc, plugin, options = {}) => {
                 finishWaiters();
         }
     };
-    const observation = { subtree: true, childList: true, characterData: true, attributes: true };
+    const observation = {
+        subtree: true,
+        childList: true,
+        characterData: true,
+        attributes: true,
+        attributeOldValue: true,
+    };
     const observer = new MutationObserver((records) => {
         if (records.some((record) => record.attributeName !== marker &&
             record.attributeName !== fadeMarker &&
+            !prehideOnlyMutation(record) &&
+            !(record.attributeName === 'style' && measuringPointerPages.has(record.target)) &&
             !(record.attributeName === 'aria-hidden' &&
                 sources.has(record.target) &&
                 record.target.getAttribute('aria-hidden') === 'true')))
@@ -311,6 +422,7 @@ export const createRuntime = async (doc, plugin, options = {}) => {
     const on = (target, name, callback = schedule) => target.addEventListener(name, callback, { capture: true, signal: listeners.signal });
     const pageWill = (event) => {
         const page = event.target;
+        verticalBarsPages.lifecycle(event);
         getNativeSearchBindings(doc)
             .filter((binding) => page.contains(binding.footer))
             .forEach((binding) => search.retire(binding));
@@ -320,7 +432,9 @@ export const createRuntime = async (doc, plugin, options = {}) => {
         schedule();
     };
     const pageDid = (event) => {
-        pages.delete(event.target);
+        const page = event.target;
+        verticalBarsPages.lifecycle(event);
+        pages.delete(page);
         schedule();
         if (tabSwitchHandoff && pages.size === 0)
             endTabSwitchHandoff();
@@ -388,6 +502,15 @@ 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, VERTICAL_BARS_TRANSITION_CANCELED, (event) => {
+        const leaving = event.target;
+        const entering = event.detail?.entering;
+        verticalBarsPages.cancel(entering, leaving);
+        pages.delete(leaving);
+        if (entering)
+            pages.delete(entering);
+        schedule();
+    });
     on(doc, 'ionTabsWillChange', () => {
         armTabSwitchHandoff();
         schedule();
@@ -408,12 +531,17 @@ export const createRuntime = async (doc, plugin, options = {}) => {
             schedule();
         });
     }
+    const eventMenu = (event) => event.composedPath().find((target) => target instanceof HTMLElement && target.matches('ion-menu'));
     on(doc, 'ionWillOpen', (event) => {
-        presented.add(event.target);
+        const menu = eventMenu(event);
+        if (menu)
+            presented.add(menu);
         schedule();
     });
     on(doc, 'ionDidClose', (event) => {
-        presented.delete(event.target);
+        const menu = eventMenu(event);
+        if (menu)
+            presented.delete(menu);
         schedule();
     });
     for (const name of [
@@ -496,6 +624,7 @@ export const createRuntime = async (doc, plugin, options = {}) => {
             catch {
             }
             style.remove();
+            doc.querySelectorAll(`.${rejectedClass}`).forEach((element) => setRejected(element, false));
             icons.clear();
             pages.clear();
             presented.clear();
@@ -513,7 +642,7 @@ export const createRuntime = async (doc, plugin, options = {}) => {
             event.revision < acceptedRevision ||
             event.revision > revision ||
             event.sequence <= lastSequence ||
-            overlayOpen())
+            overlayOpen(false))
             return;
         if (event.revision > acceptedRevision && event.revision === updatingRevision) {
             pendingActivations.push(event);
@@ -532,7 +661,7 @@ export const createRuntime = async (doc, plugin, options = {}) => {
         const searchAction = candidate?.control.search && [candidate.control.search.trigger.id, candidate.control.search.closeId].includes(event.id);
         if (!searchAction && (!item || item.disabled || item.visible === false))
             return;
-        element.click();
+        activateProjectedElement(element);
         lastSnapshot = '';
         schedule();
     };
@@ -569,9 +698,14 @@ export const createRuntime = async (doc, plugin, options = {}) => {
                 suspended.add(scopes);
                 await flush();
                 await new Promise((resolve) => win.requestAnimationFrame(() => resolve()));
-                return () => {
+                return (canceled = false) => {
                     suspended.delete(scopes);
-                    scopes.forEach((scope) => pages.delete(scope));
+                    if (canceled || !scopes.some((scope) => scope.closest('ion-app.ios-theme-vertical-bars'))) {
+                        scopes.forEach((scope) => pages.delete(scope));
+                        if (canceled) {
+                            verticalBarsPages.cancel(scopes[0], scopes[1]);
+                        }
+                    }
                     schedule();
                 };
             },

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

@@ -1 +1 @@
-{"version":3,"file":"candidate.d.ts","sourceRoot":"","sources":["../../../src/native/shared/candidate.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,sBAAsB,EAAE,MAAM,gBAAgB,CAAC;AAItF,MAAM,WAAW,SAAS;IACxB,OAAO,EAAE,WAAW,CAAC;IACrB,OAAO,CAAC,EAAE,WAAW,EAAE,CAAC;IACxB,OAAO,EAAE,YAAY,CAAC;IACtB,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,WAAW,CAAC,CAAC;IAClC,KAAK,EAAE;QAAE,IAAI,EAAE,SAAS,CAAC;QAAC,MAAM,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,WAAW,CAAA;KAAE,EAAE,CAAC;CACnE;AAED,MAAM,MAAM,QAAQ,GAAG,CAAC,OAAO,EAAE,WAAW,KAAK,MAAM,CAAC;AAGxD,eAAO,MAAM,eAAe,GAAI,SAAS,WAAW,EAAE,MAAM,sBAAsB,EAAE,IAAI,QAAQ,KAAG,SAgBlG,CAAC;AAGF,eAAO,MAAM,UAAU,GACrB,WAAW,SAAS,EACpB,OAAO,WAAW,EAClB,IAAI,QAAQ,EACZ,UAAS,UAAkB,EAC3B,cAAmB,KAClB,SAAS,GAAG,SA8Dd,CAAC"}
+{"version":3,"file":"candidate.d.ts","sourceRoot":"","sources":["../../../src/native/shared/candidate.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,sBAAsB,EAAE,MAAM,gBAAgB,CAAC;AAItF,MAAM,WAAW,SAAS;IACxB,OAAO,EAAE,WAAW,CAAC;IACrB,OAAO,CAAC,EAAE,WAAW,EAAE,CAAC;IACxB,OAAO,EAAE,YAAY,CAAC;IACtB,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,WAAW,CAAC,CAAC;IAClC,KAAK,EAAE;QAAE,IAAI,EAAE,SAAS,CAAC;QAAC,MAAM,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,WAAW,CAAA;KAAE,EAAE,CAAC;CACnE;AAED,MAAM,MAAM,QAAQ,GAAG,CAAC,OAAO,EAAE,WAAW,KAAK,MAAM,CAAC;AAGxD,eAAO,MAAM,eAAe,GAAI,SAAS,WAAW,EAAE,MAAM,sBAAsB,EAAE,IAAI,QAAQ,KAAG,SAgBlG,CAAC;AAGF,eAAO,MAAM,UAAU,GACrB,WAAW,SAAS,EACpB,OAAO,WAAW,EAClB,IAAI,QAAQ,EACZ,UAAS,UAAkB,EAC3B,cAAmB,KAClB,SAAS,GAAG,SAsEd,CAAC"}