@rdlabo/ionic-theme-ios27 1.2.0 → 1.2.1-beta.pr273.shae866fb1dca9f

package/src/native/overlays/controller.ts

@@ -0,0 +1,322 @@
+import type { NativeUIShellOptions, NativeUIShellPlugin } from '../definitions';
+import { bounded } from '../runtime';
+import { isExcluded, isPermanentlyExcluded, isShellDisabled } from '../shared/dom';
+import { activeElement, trapFocus } from './focus';
+import { relayPopover, popoverPresentation, verticalBarsPopoverAnchor } from './popover';
+import { nativeDialogAnimation } from './dialog-animation';
+import { relayStyles } from './styles';
+
+type Presentation = { kind: 'popover'; animated: boolean };
+type Overlay = HTMLIonPopoverElement;
+const lifecycle = (overlay: Overlay, phase: string) =>
+  `ion${overlay.localName.slice(4, 5).toUpperCase()}${overlay.localName.slice(5)}${phase}`;
+
+interface Connection {
+  id: string;
+  overlay: Overlay;
+  dismissed: boolean;
+  win?: Window;
+  focus: Element | null;
+  stopStyles?: () => void;
+  releaseProjection?: () => void;
+  stopContent?: () => void;
+  stopFocus?: () => void;
+  stopEvents?: () => void;
+  stopChildEvents?: () => void;
+  stopExclusions?: () => void;
+  closing?: Promise<void>;
+  nativeClosing?: Promise<void>;
+  stopAnimation?: () => void;
+  hideAnimation?: () => void;
+  stopLifecycle?: () => void;
+}
+
+/** Ionic owns lifecycle and dismissal; only one overlay is relayed at a time. */
+export const createOverlayController = async (
+  doc: Document,
+  plugin: NativeUIShellPlugin,
+  options: NativeUIShellOptions,
+  retainProjection: (deferActivation?: (id: string) => boolean) => () => void,
+  nativeVerticalBars: () => boolean,
+) => {
+  let current: Connection | undefined;
+  let opening = Promise.resolve();
+  let sequence = 0;
+  let stopped = false;
+  const suspensions = new Set<symbol>();
+  const events = ['Modal', 'Popover', 'Alert', 'ActionSheet', 'Loading', 'Picker', 'Toast'].map((name) => `ion${name}WillPresent`);
+  const cleanup = async (connection: Connection) => {
+    // Every teardown step is isolated and bounded: a throwing or hanging step
+    // must not strand the retained page projections or the child window.
+    const stage = async (label: string, run?: () => void | Promise<void>) => {
+      try {
+        await bounded(Promise.resolve(run?.()));
+      } catch (error) {
+        console.error(`Native overlay teardown failed at ${label}; continuing cleanup anyway.`, error);
+      }
+    };
+    try {
+      await stage('events', connection.stopEvents);
+      await stage('lifecycle', connection.stopLifecycle);
+      await stage('childEvents', connection.stopChildEvents);
+      await stage('exclusions', connection.stopExclusions);
+      await stage('focus', connection.stopFocus);
+      // A timed-out dismissal must not strand the relayed content in the child window.
+      await connection.nativeClosing?.catch((error) => {
+        console.error('Native overlay dismissal did not complete; restoring the Web content anyway.', error);
+      });
+      await stage('content', connection.stopContent);
+      await stage('animation', connection.stopAnimation);
+      await stage('styles', connection.stopStyles);
+      await stage('close', () => bounded(plugin.closeOverlay({ id: connection.id })));
+    } finally {
+      // The page projections must be released even if teardown throws above.
+      connection.releaseProjection?.();
+      connection.releaseProjection = undefined;
+      try {
+        connection.win?.close();
+      } catch (error) {
+        console.error('Native overlay window was already gone.', error);
+      }
+      if (current === connection) current = undefined;
+      const focus = connection.focus as HTMLElement | null;
+      if (focus?.isConnected && focus.tabIndex >= 0) focus.focus({ preventScroll: true });
+    }
+  };
+  const release = (connection: Connection): Promise<void> => (connection.closing ??= cleanup(connection));
+  const restoreWeb = async () => {
+    if (current) await release(current);
+  };
+  const excluded = (overlay: HTMLElement) => isPermanentlyExcluded(overlay) || isExcluded(overlay) || isShellDisabled(overlay);
+  const connect = async (connection: Connection, ready: Promise<void>, presentation: Presentation) => {
+    const { overlay } = connection;
+    const gone = () =>
+      current !== connection ||
+      stopped ||
+      suspensions.size ||
+      connection.dismissed ||
+      !overlay.isConnected ||
+      !nativeVerticalBars() ||
+      excluded(overlay);
+    // Keep the source invisible while the native toolbar prepares its popover.
+    connection.hideAnimation?.();
+    try {
+      // Prepare the child window concurrently with Ionic's content initialization.
+      const staging = (async () => {
+        await bounded(
+          plugin.prepareOverlay({
+            id: connection.id,
+          }),
+        );
+        if (gone()) return undefined;
+        const win = doc.defaultView!.open(`about:blank#${connection.id}`, '_blank');
+        if (!win) throw new Error('Native overlay window unavailable');
+        connection.win = win;
+        // The requested blank page replaces the initial document created by window.open.
+        // WebKit percent-encodes the '#' marker in the popup URL; compare decoded.
+        // Adopt nodes only after that navigation; otherwise WebKit discards the relay.
+        if (decodeURIComponent(win.document.URL) !== `about:blank#${connection.id}` || win.document.readyState !== 'complete')
+          await bounded(new Promise<void>((resolve) => win.addEventListener('load', () => resolve(), { once: true })));
+        if (gone()) return undefined;
+        // about:blank is a quirks-mode document in WebKit. Initialize standards
+        // mode before adopting live content: otherwise percentage button heights
+        // can resolve against the entire popover viewport.
+        win.document.open();
+        win.document.write('<!doctype html><html><head></head><body></body></html>');
+        win.document.close();
+        connection.stopChildEvents = observe(win.document);
+        const environment = relayStyles(doc, win.document, overlay);
+        connection.stopStyles = environment.stop;
+        await bounded(environment.ready);
+        if (gone()) return undefined;
+        return { destination: environment.destination, win };
+      })();
+      // The staging join is awaited below; settle early rejections quietly.
+      staging.catch(() => {});
+      // Ionic initializes its gestures after didPresent. Let that turn finish before adopting their content.
+      // A stalled presentation must not park the opening queue forever.
+      await bounded(ready);
+      // Placement is captured after Ionic has laid out the overlay.
+      await bounded(new Promise<void>((resolve) => doc.defaultView!.requestAnimationFrame(() => resolve())));
+      const staged = await staging;
+      if (gone() || !staged) {
+        await release(connection);
+        return;
+      }
+      const focused = activeElement(doc) as HTMLElement | null;
+      const nativePresentation = popoverPresentation(overlay);
+      const content = relayPopover(overlay, staged.destination);
+      connection.stopContent = content.stop;
+      connection.hideAnimation?.();
+      // Ionic does not dismiss a presented overlay when its page is hidden or
+      // destroyed; without this a popover could retain the page projections
+      // forever and freeze every later control update.
+      const exclusions = new MutationObserver(() => {
+        if (!overlay.isConnected || !nativeVerticalBars() || excluded(overlay) || isShellDisabled(content.root))
+          void release(connection).catch(console.error);
+      });
+      const attributes = { attributes: true, attributeFilter: ['class', 'data-shell', 'hidden', 'inert'] };
+      for (let node: HTMLElement | null = overlay; node; node = node.parentElement) {
+        exclusions.observe(node, attributes);
+        exclusions.observe(node, { childList: true });
+      }
+      exclusions.observe(content.root, { ...attributes, subtree: true });
+      connection.stopExclusions = () => exclusions.disconnect();
+      connection.stopFocus = trapFocus(
+        content.root,
+        () =>
+          !connection.dismissed &&
+          (!('focusTrap' in overlay) || overlay.focusTrap !== false) &&
+          !overlay.classList.contains('ion-disable-focus-trap'),
+      );
+      const close = () => {
+        void release(connection).catch(console.error);
+      };
+      const escape = (event: KeyboardEvent) => {
+        if (event.key === 'Escape' && overlay.backdropDismiss) void overlay.dismiss(undefined, 'backdrop');
+      };
+      staged.win.document.addEventListener('keydown', escape);
+      overlay.addEventListener(lifecycle(overlay, 'DidDismiss'), close, { once: true });
+      connection.stopEvents = () => {
+        staged.win.document.removeEventListener('keydown', escape);
+        overlay.removeEventListener(lifecycle(overlay, 'DidDismiss'), close);
+      };
+      // SwiftUI owns the only visible presentation animation.
+      await bounded(
+        plugin.presentOverlay({
+          id: connection.id,
+          presentation: { ...nativePresentation, animated: presentation.animated },
+        }),
+      );
+      (focused?.isConnected && focused.ownerDocument === staged.win.document ? focused : content.root).focus({ preventScroll: true });
+    } catch (error) {
+      await release(connection);
+      console.error('Native overlay projection failed; keeping Ionic content in the source WebView.', error);
+    }
+  };
+  const present = (event: Event) => {
+    const overlay = event.target as Overlay;
+    if (current) {
+      const connection = current;
+      current = undefined;
+      opening = opening.then(() => release(connection)).catch(console.error);
+      if (!connection.dismissed) return;
+      // A didDismiss handler may immediately open the next popover while SwiftUI is still closing this one.
+      connection.stopAnimation?.();
+      connection.stopAnimation = undefined;
+    }
+    const enabled =
+      overlay.localName === 'ion-popover' &&
+      options.controls?.popover === true &&
+      nativeVerticalBars() &&
+      verticalBarsPopoverAnchor(overlay) !== undefined;
+    if (stopped || suspensions.size || !enabled || excluded(overlay)) {
+      opening = opening.then(restoreWeb).catch(console.error);
+      return;
+    }
+    const connection: Connection = { id: `ios-theme-overlay-${++sequence}`, overlay, dismissed: false, focus: activeElement(doc) };
+    const presentation: Presentation = { kind: 'popover', animated: overlay.animated };
+    current = connection;
+    // Retain synchronously, before the scheduled projection update can retire the rail.
+    const anchorId = verticalBarsPopoverAnchor(overlay);
+    connection.releaseProjection = retainProjection(
+      (id) =>
+        id === anchorId &&
+        current === connection &&
+        !!connection.nativeClosing &&
+        !stopped &&
+        !suspensions.size &&
+        nativeVerticalBars() &&
+        !excluded(overlay),
+    );
+    const closed = () => {
+      connection.dismissed = true;
+    };
+    overlay.addEventListener(lifecycle(overlay, 'DidDismiss'), closed, { once: true });
+    let resolveReady!: () => void;
+    const readyPromise = new Promise<void>((resolve) => {
+      resolveReady = resolve;
+    });
+    const ready = () => {
+      resolveReady();
+    };
+    const closeNative = () =>
+      (connection.nativeClosing ??= bounded(plugin.dismissOverlay({ id: connection.id, animated: presentation.animated })));
+    const animation = nativeDialogAnimation(overlay, closeNative);
+    connection.stopAnimation = animation.stop;
+    connection.hideAnimation = animation.hide;
+    animation.hide();
+    overlay.addEventListener(lifecycle(overlay, 'DidPresent'), ready, { once: true });
+    connection.stopLifecycle = () => overlay.removeEventListener(lifecycle(overlay, 'DidDismiss'), closed);
+    opening = opening
+      .then(() => connect(connection, readyPromise, presentation))
+      .catch(console.error)
+      .finally(() => {
+        overlay.removeEventListener(lifecycle(overlay, 'DidPresent'), ready);
+      });
+  };
+  const menuOpen = (event: Event) => {
+    if (!event.composedPath().some((node): node is HTMLElement => node instanceof HTMLElement && node.matches('ion-menu'))) return;
+    // Menus render in the source document below the native overlay; release the relay.
+    const connection = current;
+    current = undefined;
+    if (connection) opening = opening.then(() => release(connection)).catch(console.error);
+  };
+  const observe = (target: Document) => {
+    for (const name of events) target.addEventListener(name, present);
+    target.addEventListener('ionWillOpen', menuOpen);
+    return () => {
+      for (const name of events) target.removeEventListener(name, present);
+      target.removeEventListener('ionWillOpen', menuOpen);
+    };
+  };
+  const invalidate = () => {
+    const connection = current;
+    current = undefined;
+    if (connection) opening = opening.then(() => release(connection)).catch(console.error);
+  };
+  // Retention must not freeze an obsolete layout or a departed page.
+  const win = doc.defaultView!;
+  win.addEventListener('resize', invalidate);
+  doc.addEventListener('ionViewWillLeave', invalidate);
+  const visibility = () => {
+    if (doc.hidden) invalidate();
+  };
+  doc.addEventListener('visibilitychange', visibility);
+  const listener = await bounded(
+    plugin.addListener('overlay', (event) => {
+      if (event.id !== current?.id) return;
+      if (event.action === 'dismiss' && current.overlay.backdropDismiss)
+        void current.overlay.dismiss(undefined, 'backdrop').catch(console.error);
+    }),
+  );
+  const stopEvents = observe(doc);
+  return {
+    async suspend() {
+      const lease = Symbol();
+      suspensions.add(lease);
+      await opening;
+      await restoreWeb();
+      return () => {
+        suspensions.delete(lease);
+      };
+    },
+    async destroy() {
+      stopped = true;
+      stopEvents();
+      win.removeEventListener('resize', invalidate);
+      doc.removeEventListener('ionViewWillLeave', invalidate);
+      doc.removeEventListener('visibilitychange', visibility);
+      try {
+        await opening;
+        await restoreWeb();
+      } finally {
+        try {
+          await bounded(plugin.stopOverlays());
+        } finally {
+          await listener.remove();
+        }
+      }
+    },
+  };
+};

package/src/native/overlays/dialog-animation.ts

@@ -0,0 +1,30 @@
+import { createAnimation } from '@ionic/core/components/index.js';
+import { dismissAnimation } from './dismiss-animation';
+
+export type Dialog = HTMLIonPopoverElement;
+
+/** Hide the emptied source surface once the relay hosts the same live content. */
+export const nativeDialogAnimation = (overlay: Dialog, close: () => Promise<void>) => {
+  const enterAnimation = overlay.enterAnimation;
+  overlay.enterAnimation = () => createAnimation();
+  const leaveAnimation = overlay.leaveAnimation;
+  const opacity = overlay.style.opacity;
+  const event = 'ionPopoverWillDismiss';
+  const dismiss = () => {
+    const closing = close();
+    overlay.leaveAnimation = () => dismissAnimation(closing);
+  };
+  overlay.addEventListener(event, dismiss);
+  return {
+    // Hide the source surface while the native presentation prepares.
+    hide() {
+      overlay.style.opacity = '0';
+    },
+    stop() {
+      overlay.removeEventListener(event, dismiss);
+      overlay.enterAnimation = enterAnimation;
+      overlay.leaveAnimation = leaveAnimation;
+      overlay.style.opacity = opacity;
+    },
+  };
+};

package/src/native/overlays/dismiss-animation.ts

@@ -0,0 +1,15 @@
+import { createAnimation } from '@ionic/core/components/index.js';
+
+/** Let Ionic finish dismissal after the native presentation has closed. */
+export const dismissAnimation = (closing: Promise<void>) => {
+  const animation = createAnimation();
+  const play = animation.play;
+  animation.play = async (options) => {
+    // A native failure must not suppress Ionic's didDismiss event/data.
+    await closing.catch((error) => {
+      console.error('Native popover dismissal failed; completing the Ionic lifecycle.', error);
+    });
+    await play(options);
+  };
+  return animation;
+};

package/src/native/overlays/focus.ts

@@ -0,0 +1,64 @@
+export const activeElement = (doc: Document): Element | null => {
+  let element = doc.activeElement;
+  while (element?.shadowRoot?.activeElement) element = element.shadowRoot.activeElement;
+  return element;
+};
+
+const focusableElements = (root: HTMLElement): HTMLElement[] => {
+  const elements: HTMLElement[] = [];
+  const win = root.ownerDocument.defaultView!;
+  const collect = (scope: HTMLElement | ShadowRoot) => {
+    for (const node of Array.from(scope.querySelectorAll<HTMLElement>('*'))) {
+      if (node.inert || node.closest('[inert]') || (node as HTMLButtonElement).disabled) continue;
+      const before = elements.length;
+      if (node.shadowRoot) collect(node.shadowRoot);
+      const css = win.getComputedStyle(node);
+      if (
+        elements.length === before &&
+        node.tabIndex >= 0 &&
+        !node.hidden &&
+        css.display !== 'none' &&
+        css.visibility !== 'hidden' &&
+        node.getClientRects().length
+      )
+        elements.push(node);
+    }
+  };
+  collect(root);
+  return elements
+    .map((element, index) => ({ element, index }))
+    .sort((a, b) => (a.element.tabIndex || Infinity) - (b.element.tabIndex || Infinity) || a.index - b.index)
+    .map(({ element }) => element);
+};
+
+export const trapFocus = (root: HTMLElement, enabled: () => boolean): (() => void) => {
+  const doc = root.ownerDocument;
+  const previous = root.getAttribute('tabindex');
+  root.tabIndex = -1;
+  let last: Element | null;
+  const onFocus = (event: FocusEvent) => {
+    if (!enabled()) return;
+    if (event.composedPath().includes(root)) {
+      last = activeElement(doc);
+      return;
+    }
+    const elements = focusableElements(root);
+    (elements.find((element) => element === last) ?? elements[0] ?? root).focus({ preventScroll: true });
+  };
+  const onKey = (event: KeyboardEvent) => {
+    if (event.key !== 'Tab' || event.altKey || event.ctrlKey || event.metaKey || !enabled()) return;
+    const elements = focusableElements(root);
+    const index = elements.findIndex((element) => element === activeElement(doc));
+    const next = event.shiftKey ? (index <= 0 ? elements.length - 1 : index - 1) : (index + 1) % elements.length;
+    event.preventDefault();
+    (elements[next] ?? root).focus();
+  };
+  doc.addEventListener('focusin', onFocus, true);
+  doc.addEventListener('keydown', onKey, true);
+  return () => {
+    doc.removeEventListener('focusin', onFocus, true);
+    doc.removeEventListener('keydown', onKey, true);
+    if (previous === null) root.removeAttribute('tabindex');
+    else root.setAttribute('tabindex', previous);
+  };
+};

package/src/native/overlays/popover.ts

@@ -0,0 +1,80 @@
+import type { ShellPopoverPresentation } from '../definitions';
+import { projectionIds } from '../shared/projection-id';
+import { isDark } from '../shared/dom';
+import { moveContent } from './content';
+
+export const popoverTrigger = (overlay: HTMLIonPopoverElement): Element | undefined => {
+  const event = overlay.event as MouseEvent | undefined;
+  const target = (overlay.trigger ? overlay.ownerDocument.getElementById(overlay.trigger) : event?.target) as Element | undefined;
+  return target?.closest?.('ion-button,ion-fab-button,ion-item') ?? target;
+};
+
+/** Only accepted native rail buttons can retain the page projection. */
+export const verticalBarsPopoverAnchor = (overlay: HTMLIonPopoverElement): string | undefined => {
+  const trigger = popoverTrigger(overlay);
+  if (
+    !trigger?.matches('ion-button[data-native-ui-shell-vertical-bars-member]') ||
+    !trigger.closest('[data-native-ui-shell]') ||
+    (trigger as HTMLIonButtonElement).disabled
+  )
+    return undefined;
+  return projectionIds.get(trigger);
+};
+
+export const popoverPresentation = (overlay: HTMLIonPopoverElement): ShellPopoverPresentation => {
+  const content = overlay.shadowRoot!.querySelector<HTMLElement>('.popover-content')!;
+  const rect = content.getBoundingClientRect();
+  const anchorId = verticalBarsPopoverAnchor(overlay);
+  if (!anchorId) throw new Error('Native Vertical Bars anchor unavailable');
+  return {
+    kind: 'popover',
+    animated: overlay.animated,
+    dark: isDark(overlay.ownerDocument.defaultView!.getComputedStyle(overlay)),
+    anchorId,
+    width: rect.width,
+    height: rect.height,
+    backgroundColor: overlay.ownerDocument.defaultView!.getComputedStyle(content).backgroundColor,
+    backdropDismiss: overlay.backdropDismiss,
+  };
+};
+
+export const relayPopover = (overlay: HTMLIonPopoverElement, destination: HTMLElement) => {
+  const doc = destination.ownerDocument;
+  const source = overlay.shadowRoot!.querySelector<HTMLElement>('.popover-content')!;
+  const root = doc.createElement('ion-popover');
+  for (const attribute of Array.from(overlay.attributes)) root.setAttribute(attribute.name, attribute.value);
+  Object.assign(root.style, {
+    position: 'absolute',
+    inset: '0',
+    display: 'block',
+    visibility: 'visible',
+    opacity: '1',
+    pointerEvents: 'auto',
+  });
+  root.setAttribute('role', 'dialog');
+  root.setAttribute('aria-modal', 'true');
+  const shadow = root.attachShadow({ mode: 'open' });
+  const shell = doc.createElement('div');
+  const css = overlay.ownerDocument.defaultView!.getComputedStyle(source);
+  Object.assign(shell.style, { height: '100%', overflow: css.overflow, background: css.backgroundColor });
+  shell.append(doc.createElement('slot'));
+  shadow.append(shell);
+  destination.append(root);
+  // Components such as ion-select-popover dismiss their closest ion-popover.
+  root.dismiss = (...args) => overlay.dismiss(...args);
+  const restore = moveContent(Array.from(source.querySelector('slot')!.assignedElements()) as HTMLElement[], root);
+  const select = (event: MouseEvent) => {
+    if (!event.composedPath().includes(shell)) {
+      if (overlay.backdropDismiss) void overlay.dismiss(undefined, 'backdrop');
+    } else if (overlay.dismissOnSelect) void overlay.dismiss();
+  };
+  root.addEventListener('click', select);
+  return {
+    root,
+    stop() {
+      root.removeEventListener('click', select);
+      restore();
+      root.remove();
+    },
+  };
+};

package/src/native/overlays/styles.ts

@@ -0,0 +1,80 @@
+export const sheetText = (sheets: readonly CSSStyleSheet[]): string =>
+  sheets.flatMap((sheet) => Array.from(sheet.cssRules, (rule) => rule.cssText)).join('\n');
+
+export const relayStyles = (
+  source: Document,
+  destination: Document,
+  overlay: HTMLElement,
+): { destination: HTMLElement; ready: Promise<void>; stop: () => void } => {
+  const base = destination.createElement('base');
+  base.href = source.baseURI;
+  destination.head.append(base);
+  const copies = new Map<Element, Element>();
+  const sheets = destination.createElement('style');
+  destination.head.append(sheets);
+  const sync = () => {
+    sheets.textContent = sheetText(source.adoptedStyleSheets);
+    const sources = Array.from(source.querySelectorAll('meta[name=viewport],link[rel=stylesheet],style:not([data-overlay-relay-local])'));
+    for (const [node, copy] of copies)
+      if (!sources.includes(node)) {
+        copy.remove();
+        copies.delete(node);
+      }
+    for (const node of sources) {
+      let copy = copies.get(node);
+      if (!copy) {
+        copy = node.cloneNode(true) as Element;
+        copies.set(node, copy);
+      } else {
+        for (const attribute of Array.from(copy.attributes)) copy.removeAttribute(attribute.name);
+        for (const attribute of Array.from(node.attributes)) copy.setAttribute(attribute.name, attribute.value);
+        copy.textContent = node.textContent;
+      }
+      destination.head.append(copy);
+    }
+    destination.head.append(surface);
+  };
+  const surface = destination.createElement('style');
+  surface.textContent = 'html,body{background:transparent!important}';
+  const observers: MutationObserver[] = [];
+  const mirror = (node: Element, target: HTMLElement, flatten = false) => {
+    const update = () => {
+      for (const attribute of Array.from(target.attributes)) if (!node.hasAttribute(attribute.name)) target.removeAttribute(attribute.name);
+      for (const attribute of Array.from(node.attributes)) target.setAttribute(attribute.name, attribute.value);
+      // The popover content must not inherit the source page's rail layout.
+      if (target.localName === 'ion-app') target.classList.remove('ios-theme-vertical-bars');
+      if (flatten) target.style.setProperty('display', 'contents', 'important');
+    };
+    update();
+    const observer = new MutationObserver(update);
+    observer.observe(node, { attributes: true });
+    observers.push(observer);
+  };
+  mirror(source.documentElement, destination.documentElement);
+  mirror(source.body, destination.body);
+  const ancestors: Element[] = [];
+  for (let node = overlay.parentElement; node && node !== source.body; node = node.parentElement) ancestors.unshift(node);
+  let parent = destination.body;
+  for (const node of ancestors) {
+    const shell = destination.createElement(node.localName);
+    mirror(node, shell, true);
+    parent.append(shell);
+    parent = shell;
+  }
+  sync();
+  // A copied external stylesheet can still be loading when Ionic's content is
+  // ready. Do not expose an unstyled first native frame (notably button sizes).
+  const ready = Promise.all(
+    Array.from(destination.querySelectorAll<HTMLLinkElement>('link[rel=stylesheet]'), (link) => {
+      if (link.sheet) return Promise.resolve();
+      return new Promise<void>((resolve, reject) => {
+        link.addEventListener('load', () => resolve(), { once: true });
+        link.addEventListener('error', () => reject(new Error('Popover stylesheet unavailable')), { once: true });
+      });
+    }),
+  ).then(() => undefined);
+  const observer = new MutationObserver(sync);
+  observer.observe(source.head, { subtree: true, childList: true, characterData: true, attributes: true });
+  observers.push(observer);
+  return { destination: parent, ready, stop: () => observers.forEach((item) => item.disconnect()) };
+};

package/src/native/prehide.ts

@@ -1,5 +1,5 @@
 import { modalUsesVerticalBars } from './shared/modal';
-import { LIFECYCLE_DID_ENTER, LIFECYCLE_DID_LEAVE, LIFECYCLE_WILL_ENTER, LIFECYCLE_WILL_LEAVE } from '@ionic/core';
+import { LIFECYCLE_DID_ENTER, LIFECYCLE_DID_LEAVE, LIFECYCLE_WILL_ENTER, LIFECYCLE_WILL_LEAVE } from '@ionic/core/components/index.js';
 import { VERTICAL_BARS_TRANSITION_CANCELED } from '../native-integration';
 import {
   childElements,
@@ -16,6 +16,7 @@ import {
   prehideRootClass,
   rejectedClass,
   setVerticalBarsPlacement,
+  syncToolbarText,
 } from './shared/dom';
 
 const overlays = 'ion-menu, ion-popover';
@@ -133,6 +134,7 @@ export const prehideVerticalBarsToolbarSources = (doc: Document): { suspend: ()
     scopes.set(scope, owned);
   };
   const reconcile = () => {
+    syncToolbarText(doc);
     const verticalBars = root();
     if (!verticalBars) {
       Array.from(scopes.keys()).forEach(release);
@@ -200,6 +202,8 @@ export const prehideVerticalBarsToolbarSources = (doc: Document): { suspend: ()
   doc.defaultView?.addEventListener('nativeUIShellRefresh', reconcile, { signal: listeners.signal });
   reconcile();
   const mutationRelevant = (record: MutationRecord) => {
+    if (record.type === 'characterData') return record.target.parentElement?.matches('ion-toolbar') === true;
+    if (record.type === 'childList' && asElement(record.target)?.matches('ion-toolbar')) return true;
     if (record.type === 'childList')
       return [...Array.from(record.addedNodes), ...Array.from(record.removedNodes)].some(
         (node) =>
@@ -228,6 +232,7 @@ export const prehideVerticalBarsToolbarSources = (doc: Document): { suspend: ()
   observer.observe(doc.documentElement, {
     subtree: true,
     childList: true,
+    characterData: true,
     attributes: true,
     attributeOldValue: true,
     attributeFilter: ['class', 'data-shell', 'hidden', 'inert', 'icon', 'color'],