@rdlabo/ionic-theme-ios27 1.1.0 → 1.2.0-0

package/src/native/shared/dom.ts

@@ -3,15 +3,202 @@ import { fadeMarker } from './crossfade';
 import type { Frame } from '../definitions';
 
 export const marker = 'data-native-ui-shell';
-export const isDark = (style: CSSStyleDeclaration): boolean => style.getPropertyValue('--ios27-color-scheme').trim() === 'dark';
-export const excluded =
-  '.ionic-theme-disabled, .ios-theme-disabled, .ios26-disabled, .ion-page-hidden, .ion-page-invisible, .ion-cloned-element, [hidden], [inert]';
+// Scoped runtimes (Stencil slot emulation) patch child accessors on upgraded
+// elements and may report none before hydration; the prototype getter still
+// reports the real light DOM.
+const childNodesGet = typeof Node === 'undefined' ? undefined : Object.getOwnPropertyDescriptor(Node.prototype, 'childNodes')?.get;
+export const childNodesOf = (element: Element): Node[] =>
+  childNodesGet ? Array.from(childNodesGet.call(element)) : Array.from(element.childNodes);
+export const childElements = (element: Element): HTMLElement[] =>
+  childNodesOf(element).filter((node) => node.nodeType === 1) as HTMLElement[];
+export const prehiddenClass = 'ios-theme-native-ui-shell-prehidden';
+export const prehideRootClass = 'ios-theme-native-ui-shell-prehide';
+export const rejectedClass = 'ios-theme-native-ui-shell-rejected';
+export const verticalBarsBackWebClass = 'ios-theme-vertical-bars-back-web-owned';
+const prehideClasses = new Set([prehiddenClass, prehideRootClass]);
+export const prehideOnlyMutation = (record: MutationRecord): boolean => {
+  if (record.attributeName !== 'class' || record.oldValue === null) return false;
+  const withoutPrehide = (value: string) =>
+    value
+      .split(/\s+/)
+      .filter((name) => name && !prehideClasses.has(name))
+      .join(' ');
+  return withoutPrehide(record.oldValue) === withoutPrehide((record.target as Element).getAttribute('class') ?? '');
+};
+
+export const withoutPrehide = <T>(element: HTMLElement, read: () => T): T => {
+  const changed: HTMLElement[] = [];
+  for (let current: HTMLElement | null = element; current; current = current.parentElement) {
+    if (current.classList.contains(prehiddenClass)) {
+      current.classList.remove(prehiddenClass);
+      changed.push(current);
+    }
+  }
+  const root = element.ownerDocument.documentElement;
+  if (element.matches('ion-back-button') && root.classList.contains(prehideRootClass)) {
+    root.classList.remove(prehideRootClass);
+    changed.push(root);
+  }
+  try {
+    return read();
+  } finally {
+    changed.forEach((current) => current.classList.add(current === root ? prehideRootClass : prehiddenClass));
+  }
+};
+export const isDark = (style: CSSStyleDeclaration): boolean => {
+  const themeScheme = style.getPropertyValue('--ios27-color-scheme').trim();
+  if (themeScheme) return themeScheme === 'dark';
+  const background = style.getPropertyValue('--ion-background-color-rgb').match(/\d+/g)?.slice(0, 3).map(Number);
+  return !!background && background.length === 3 && background[0] * 0.2126 + background[1] * 0.7152 + background[2] * 0.0722 < 128;
+};
+const permanentlyExcluded = '.ionic-theme-disabled, .ios-theme-disabled, .ios26-disabled, .ion-cloned-element, [hidden], [inert]';
+export const excluded = `${permanentlyExcluded}, .ion-page-hidden, .ion-page-invisible`;
+const enteringPages = new WeakSet<HTMLElement>();
+export const setVerticalBarsEnteringPage = (page: HTMLElement, entering: boolean): void => {
+  if (entering) enteringPages.add(page);
+  else enteringPages.delete(page);
+};
+export const verticalBarsEnteringPage = (element: HTMLElement): HTMLElement | undefined => {
+  const page = element.closest<HTMLElement>('.ion-page-invisible');
+  return page && enteringPages.has(page) && page.closest('ion-app.ios-theme-vertical-bars') ? page : undefined;
+};
+export const createVerticalBarsPageState = () => {
+  const departed = new WeakSet<HTMLElement>();
+  return {
+    isDeparted(element: HTMLElement): boolean {
+      const page = element.closest<HTMLElement>('.ion-page');
+      return !!page && departed.has(page) && !!element.closest('ion-app.ios-theme-vertical-bars');
+    },
+    lifecycle(event: Event): void {
+      // Avoid instanceof so stale listeners stay safe after global teardown.
+      const page = event.target && (event.target as Node).nodeType === 1 ? (event.target as HTMLElement) : undefined;
+      if (!page?.matches('.ion-page')) return;
+      const entering = event.type === 'ionViewWillEnter';
+      if (entering || event.type === 'ionViewDidEnter') departed.delete(page);
+      else if (event.type === 'ionViewWillLeave' || event.type === 'ionViewDidLeave') departed.add(page);
+      setVerticalBarsEnteringPage(page, entering);
+    },
+    cancel(entering?: HTMLElement, leaving?: HTMLElement): void {
+      if (entering) {
+        departed.add(entering);
+        setVerticalBarsEnteringPage(entering, false);
+      }
+      if (leaving) departed.delete(leaving);
+    },
+  };
+};
+const disabledButtonGroup = 'ion-buttons:is(.ionic-theme-disabled, .ios-theme-disabled, .ios26-disabled)';
 const shellDisabledSelector = '.ios-theme-shell-disabled';
 
+export const isDisabledButtonGroupChild = (element: HTMLElement): boolean =>
+  element.matches('ion-button') && element.parentElement?.matches(disabledButtonGroup) === true;
+
+const verticalBarsTags = new Set(['ion-button', 'ion-back-button', 'ion-buttons', 'ion-menu-button', 'ion-tab-bar']);
+
+export const isVerticalBarsSource = (element: HTMLElement): boolean =>
+  verticalBarsTags.has(element.localName) &&
+  (element.matches('ion-tab-bar') || verticalBarsOwned(element)) &&
+  !element.closest('ion-menu, ion-modal, ion-popover') &&
+  !!element.closest('ion-app.ios-theme-vertical-bars');
+
+export const isVerticalBarsBackPosition = (element: HTMLElement): boolean => {
+  if (element.closest('ion-header[collapse], ion-footer[collapse]')) return false;
+  const page = element.closest('.ion-page');
+  if (!page) return true;
+  const candidates = Array.from(page.querySelectorAll<HTMLElement>('ion-back-button')).filter(
+    (back) =>
+      back.closest('.ion-page') === page &&
+      !back.matches('.ion-cloned-element') &&
+      !back.closest('ion-header[collapse], ion-footer[collapse], ion-menu, ion-modal, ion-popover'),
+  );
+  const rank = (back: HTMLElement) =>
+    inFixedToolbar(back) ? 0 : back.closest('ion-header ion-toolbar, ion-footer ion-toolbar') ? 1 : back.closest('ion-toolbar') ? 3 : 2;
+  const best = candidates.reduce<HTMLElement | undefined>(
+    (winner, back) => (!winner || rank(back) < rank(winner) ? back : winner),
+    undefined,
+  );
+  return best === element;
+};
+
+export const preferredVerticalBarsBack = <T extends HTMLElement>(elements: T[], doc: Document): T | undefined => {
+  const pages = Array.from(doc.querySelectorAll('.ion-page'));
+  const pageOrder = (element: Element) => pages.indexOf(element.closest('.ion-page')!);
+  return elements.sort((a, b) => pageOrder(b) - pageOrder(a) || Number(!!b.closest('ion-header')) - Number(!!a.closest('ion-header')))[0];
+};
+
+const excludedBy = (element: HTMLElement, selector: string): boolean => {
+  const owner = element.closest<HTMLElement>(selector);
+  return !!owner && !(element.parentElement === owner && isDisabledButtonGroupChild(element));
+};
+
+export const isPermanentlyExcluded = (element: HTMLElement): boolean => excludedBy(element, permanentlyExcluded);
+export const isExcluded = (element: HTMLElement, enteringPage?: HTMLElement): boolean =>
+  excludedBy(element, `${permanentlyExcluded}, .ion-page-hidden`) || (!!element.closest('.ion-page-invisible') && !enteringPage);
+
 // A shared native surface must not cover an opted-out descendant either.
 export const isShellDisabled = (element: Element): boolean =>
   !!element.closest(shellDisabledSelector) || !!element.querySelector(shellDisabledSelector);
 
+export const isVerticalBarsToolbarActionShape = (element: HTMLElement): boolean =>
+  element.matches('ion-menu-button') ||
+  (element.matches('ion-button') &&
+    !!element.querySelector('ion-icon, svg') &&
+    !childNodesOf(element).some((node) => node.nodeType === 3 && !!node.textContent?.trim()) &&
+    !element.matches('.ion-color, [color]') &&
+    ['default', 'clear'].includes((element as HTMLIonButtonElement).fill ?? element.getAttribute('fill') ?? 'default'));
+
+// Placement belongs to the DOM identity for one routed-page epoch. Changes to
+// content/disabled state affect rendering, never its chosen surface.
+const verticalBarsPlacement = new WeakMap<HTMLElement, boolean>();
+export const setVerticalBarsPlacement = (element: HTMLElement, rail: boolean): void => {
+  verticalBarsPlacement.set(element, rail);
+};
+export const clearVerticalBarsPlacement = (element: HTMLElement): void => {
+  verticalBarsPlacement.delete(element);
+};
+export const verticalBarsOwned = (element: HTMLElement): boolean => verticalBarsPlacement.get(element) === true;
+
+export const isVerticalBarsToolbarAction = (element: HTMLElement): boolean =>
+  verticalBarsOwned(element) && !isExcluded(element, verticalBarsEnteringPage(element)) && !isShellDisabled(element);
+
+const overlays = 'ion-menu, ion-modal, ion-popover';
+
+/** Shared eligibility for a toolbar action candidate, before placement is decided (prehide) or consumed (projection). */
+export const verticalBarsActionCandidate = (element: HTMLElement): boolean =>
+  inFixedToolbar(element) &&
+  !element.closest('ion-buttons.ios-theme-horizontal-only, ion-button.ios-theme-horizontal-only') &&
+  !isPermanentlyExcluded(element) &&
+  !isShellDisabled(element) &&
+  !element.closest(overlays);
+
+/** Shared eligibility for a back-button candidate; the back button may sit outside a fixed toolbar. */
+export const verticalBarsBackCandidate = (element: HTMLElement): boolean =>
+  isVerticalBarsBackPosition(element) &&
+  !element.closest('ion-buttons.ios-theme-horizontal-only') &&
+  !isPermanentlyExcluded(element) &&
+  !isShellDisabled(element) &&
+  !element.closest(overlays);
+
+export const verticalBarsToolbarActions = (element: HTMLElement): HTMLElement[] =>
+  // Back buttons use the dedicated rail slot; they are never toolbar actions.
+  childElements(element).filter((child) => !child.matches('ion-back-button') && isVerticalBarsToolbarAction(child));
+
+export const isVerticalBarsToolbarGroup = (element: HTMLElement): boolean => {
+  return (
+    element.matches('ion-buttons') &&
+    verticalBarsOwned(element) &&
+    !element.matches('.ionic-theme-disabled, .ios-theme-disabled, .ios26-disabled') &&
+    !isShellDisabled(element)
+  );
+};
+
+export const activateProjectedElement = (element: HTMLElement): void => {
+  const target = element.matches('ion-button, ion-back-button, ion-menu-button')
+    ? element.shadowRoot?.querySelector<HTMLElement>('[part~="native"]')
+    : undefined;
+  (target ?? element).click();
+};
+
 export const unprojected = <T>(elements: Iterable<HTMLElement>, read: () => T): T => {
   const hidden = Array.from(elements).filter((element) => element.hasAttribute(marker));
   hidden.forEach((element) => element.removeAttribute(marker));
@@ -22,14 +209,22 @@ export const unprojected = <T>(elements: Iterable<HTMLElement>, read: () => T):
   }
 };
 
-export const visible = (element: HTMLElement): boolean => {
-  if (!element.isConnected || element.closest(excluded) || isShellDisabled(element)) return false;
+const readVisible = (element: HTMLElement, allowOutsideViewport: boolean): boolean => {
+  const enteringPage = isVerticalBarsSource(element) ? verticalBarsEnteringPage(element) : undefined;
+  if (!element.isConnected || isExcluded(element, enteringPage) || isShellDisabled(element)) return false;
   for (let current: HTMLElement | null = element; current; current = current.parentElement) {
     const style = getComputedStyle(current);
-    if (style.display === 'none' || style.visibility !== 'visible' || (Number(style.opacity) === 0 && !current.hasAttribute(fadeMarker)))
+    if (
+      style.display === 'none' ||
+      style.visibility !== 'visible' ||
+      (Number(style.opacity) === 0 && !current.hasAttribute(fadeMarker) && current !== enteringPage)
+    )
       return false;
-    // Moving/collapsing/custom transformed surfaces stay in Web coordinates.
+    // Ordinary controls on moving/collapsing/custom transformed surfaces stay in Web coordinates.
+    // VerticalBars rail controls are placed independently of their Web coordinates and must remain
+    // owned while Ionic transforms the content behind an open menu.
     if (
+      !allowOutsideViewport &&
       style.transform !== 'none' &&
       !new DOMMatrixReadOnly(style.transform).isIdentity &&
       current !== element &&
@@ -39,10 +234,15 @@ export const visible = (element: HTMLElement): boolean => {
   }
   const rect = element.getBoundingClientRect();
   return (
-    rect.width > 0 && rect.height > 0 && rect.left >= -1 && rect.top >= -1 && rect.right <= innerWidth + 1 && rect.bottom <= innerHeight + 1
+    rect.width > 0 &&
+    rect.height > 0 &&
+    (allowOutsideViewport || (rect.left >= -1 && rect.top >= -1 && rect.right <= innerWidth + 1 && rect.bottom <= innerHeight + 1))
   );
 };
 
+export const visible = (element: HTMLElement, allowOutsideViewport = false): boolean =>
+  withoutPrehide(element, () => readVisible(element, allowOutsideViewport));
+
 export const frame = (rect: DOMRect, origin?: DOMRect): Frame => ({
   x: rect.x - (origin?.x ?? 0),
   y: rect.y - (origin?.y ?? 0),
@@ -52,8 +252,8 @@ export const frame = (rect: DOMRect, origin?: DOMRect): Frame => ({
 
 export const text = (element: Element): string => {
   if (element.matches('ion-icon, svg, ion-badge, .ios27-segment-lens, .ion-cloned-element')) return '';
-  return Array.from(element.childNodes)
-    .map((node) => (node.nodeType === Node.TEXT_NODE ? node.textContent : node instanceof Element ? text(node) : ''))
+  return childNodesOf(element)
+    .map((node) => (node.nodeType === 3 ? node.textContent : node.nodeType === 1 ? text(node as Element) : ''))
     .join('')
     .replace(/\s+/g, ' ')
     .trim();
@@ -61,10 +261,11 @@ export const text = (element: Element): string => {
 
 export const inFixedToolbar = (element: Element): boolean => {
   const edge = element.closest('ion-toolbar')?.parentElement;
+  const verticalBars = !!element.closest('ion-app.ios-theme-vertical-bars');
   return (
     !!edge?.matches('ion-header, ion-footer') &&
     !element.closest('ion-content') &&
     !edge.hasAttribute('collapse') &&
-    !edge.matches('.header-collapse-main, .header-collapse-condense')
+    (verticalBars || !edge.matches('.header-collapse-main, .header-collapse-condense'))
   );
 };

package/src/native/vertical-bars-web.ts

@@ -0,0 +1,374 @@
+import type { NativeUIShellHandle, NativeUIShellOptions, NativeUIShellStatus } from './definitions';
+import { VERTICAL_BARS_TRANSITION_CANCELED } from '../native-integration';
+import {
+  activateProjectedElement,
+  createVerticalBarsPageState,
+  verticalBarsActionCandidate,
+  verticalBarsBackCandidate,
+  verticalBarsEnteringPage,
+  verticalBarsToolbarActions,
+  isExcluded,
+  isVerticalBarsToolbarGroup,
+  preferredVerticalBarsBack,
+  verticalBarsOwned,
+  marker,
+  prehideOnlyMutation,
+  prehiddenClass,
+  unprojected,
+  withoutPrehide,
+} from './shared/dom';
+
+const backProjectionClass = 'ios-theme-vertical-bars-back-button-projection';
+const toolbarProjectionClass = 'ios-theme-vertical-bars-toolbar-projection';
+const readyClass = 'ios-theme-vertical-bars-toolbar-ready';
+const toolbarControlSize = 46;
+const toolbarControlGap = 10;
+
+interface ToolbarProjection {
+  source: HTMLIonButtonsElement;
+  projection: HTMLElement;
+  actions: { source: HTMLElement; projection: HTMLElement; previousAriaHidden: string | null }[];
+}
+
+interface ToolbarSource {
+  group: HTMLIonButtonsElement;
+  actions: HTMLElement[];
+}
+
+export const createVerticalBarsWebProjection = (
+  doc: Document,
+  options: NativeUIShellOptions,
+  enabled: () => boolean = () => true,
+): NativeUIShellHandle => {
+  const win = doc.defaultView!;
+  if (options.controls !== undefined && options.controls.toolbar !== true)
+    return {
+      getStatus: () => ({ state: 'web', projected: 0, updates: 0 }),
+      suspend: async () => ({ resume: async () => {} }),
+      destroy: async () => {},
+    };
+  let root: HTMLElement | undefined;
+  let backSource: HTMLIonBackButtonElement | undefined;
+  let backProjection: HTMLIonBackButtonElement | undefined;
+  let previousBackAriaHidden: string | null = null;
+  let toolbarProjections: ToolbarProjection[] = [];
+  let suspended = 0;
+  let stopped = false;
+  let frame = 0;
+  let updates = 0;
+  let observingVerticalBars = false;
+  const verticalBarsPages = createVerticalBarsPageState();
+  let sourceObserver: MutationObserver | undefined;
+  let waiters: (() => void)[] = [];
+  const listeners = new AbortController();
+  const verticalBarsRoot = () => doc.querySelector<HTMLElement>('ion-app.ios-theme-vertical-bars');
+  const projectedSources = () =>
+    [backSource, ...toolbarProjections.flatMap(({ actions }) => actions.map(({ source }) => source))].filter(
+      (source): source is HTMLElement => !!source,
+    );
+  const isRendered = (element: HTMLElement) =>
+    withoutPrehide(element, () => {
+      const style = getComputedStyle(element);
+      const rect = element.getBoundingClientRect();
+      return element.isConnected && style.display !== 'none' && style.visibility === 'visible' && rect.width > 0 && rect.height > 0;
+    });
+  const inEligibleToolbar = (element: HTMLElement) =>
+    !!verticalBarsRoot()?.contains(element) &&
+    verticalBarsActionCandidate(element) &&
+    !isExcluded(element, verticalBarsEnteringPage(element)) &&
+    !verticalBarsPages.isDeparted(element);
+  const isEligibleBack = (element: HTMLIonBackButtonElement) =>
+    !!verticalBarsRoot()?.contains(element) &&
+    verticalBarsOwned(element) &&
+    verticalBarsBackCandidate(element) &&
+    !isExcluded(element, verticalBarsEnteringPage(element)) &&
+    !verticalBarsPages.isDeparted(element) &&
+    unprojected(projectedSources(), () => isRendered(element));
+  const pageOrder = (element: Element) => Array.from(doc.querySelectorAll('.ion-page')).indexOf(element.closest('.ion-page')!);
+  const findBack = () => {
+    const candidates = Array.from(doc.querySelectorAll<HTMLIonBackButtonElement>(`ion-back-button:not(.${backProjectionClass})`)).filter(
+      isEligibleBack,
+    );
+    return preferredVerticalBarsBack(candidates, doc);
+  };
+  const findToolbarGroups = () => {
+    const candidates = Array.from(doc.querySelectorAll<HTMLIonButtonsElement>(`ion-buttons:not(.${toolbarProjectionClass})`)).flatMap(
+      (group): ToolbarSource[] => {
+        const actions = verticalBarsToolbarActions(group).filter((action) => unprojected(projectedSources(), () => isRendered(action)));
+        if (!actions.length) return [];
+        if (!isVerticalBarsToolbarGroup(group)) return actions.filter(inEligibleToolbar).map((action) => ({ group, actions: [action] }));
+        return inEligibleToolbar(group) && unprojected(projectedSources(), () => isRendered(group)) ? [{ group, actions }] : [];
+      },
+    );
+    const highestPage = Math.max(...candidates.map(({ group }) => pageOrder(group)));
+    return candidates.filter(({ group }) => pageOrder(group) === highestPage);
+  };
+  const isCurrentToolbarAction = (source: HTMLElement) => findToolbarGroups().some(({ actions }) => actions.includes(source));
+  const restore = () => {
+    backProjection?.remove();
+    backProjection = undefined;
+    if (backSource) {
+      backSource.removeAttribute(marker);
+      if (previousBackAriaHidden === null) backSource.removeAttribute('aria-hidden');
+      else backSource.setAttribute('aria-hidden', previousBackAriaHidden);
+      backSource.dispatchEvent(new CustomEvent('nativeUIShellChange'));
+    }
+    backSource = undefined;
+    previousBackAriaHidden = null;
+    for (const { projection, actions } of toolbarProjections) {
+      projection.remove();
+      for (const { source, previousAriaHidden } of actions) {
+        source.removeAttribute(marker);
+        if (previousAriaHidden === null) source.removeAttribute('aria-hidden');
+        else source.setAttribute('aria-hidden', previousAriaHidden);
+        source.dispatchEvent(new CustomEvent('nativeUIShellChange'));
+      }
+    }
+    toolbarProjections = [];
+    sourceObserver?.disconnect();
+    sourceObserver = undefined;
+    root?.classList.remove(readyClass);
+    root = undefined;
+  };
+  const copyAttributes = (target: HTMLElement, original: HTMLElement) => {
+    for (const name of ['id', 'slot', marker, 'aria-hidden']) target.removeAttribute(name);
+    for (const attribute of Array.from(target.attributes))
+      if (!['class', marker].includes(attribute.name) && !original.hasAttribute(attribute.name)) target.removeAttribute(attribute.name);
+    for (const attribute of Array.from(original.attributes))
+      if (!['id', 'slot', marker, 'aria-hidden'].includes(attribute.name)) target.setAttribute(attribute.name, attribute.value);
+    target.classList.remove(prehiddenClass);
+  };
+  const syncBack = (target: HTMLIonBackButtonElement, original: HTMLIonBackButtonElement) => {
+    copyAttributes(target, original);
+    target.classList.add(backProjectionClass, 'ion-cloned-element');
+    target.disabled = original.disabled;
+    target.defaultHref = original.defaultHref;
+    target.icon = original.icon;
+    target.color = original.color;
+    target.mode = original.mode;
+    target.text = '';
+  };
+  const syncAction = (target: HTMLElement, original: HTMLElement) => {
+    copyAttributes(target, original);
+    target.classList.add('ios-theme-vertical-bars-toolbar-action', 'ion-cloned-element');
+    const label = original.getAttribute('aria-label') ?? original.textContent?.trim();
+    if (label) target.setAttribute('aria-label', label);
+    if ('disabled' in original) (target as HTMLIonButtonElement).disabled = (original as HTMLIonButtonElement).disabled;
+    if (original.matches('ion-button')) {
+      const icon = original.querySelector<HTMLElement>('ion-icon, svg');
+      const clonedIcon = icon?.cloneNode(true) as HTMLElement | undefined;
+      clonedIcon?.setAttribute('slot', 'icon-only');
+      target.replaceChildren(...(clonedIcon ? [clonedIcon] : []));
+    }
+  };
+  const sameSources = (back: HTMLIonBackButtonElement | undefined, groups: ToolbarSource[]) =>
+    back === backSource &&
+    groups.length === toolbarProjections.length &&
+    groups.every(({ group, actions }, index) => {
+      const current = toolbarProjections[index];
+      return (
+        group === current.source &&
+        actions.length === current.actions.length &&
+        actions.every((action, actionIndex) => action === current.actions[actionIndex].source)
+      );
+    });
+  const syncExisting = () => {
+    if (backSource && backProjection) syncBack(backProjection, backSource);
+    let topOffset = backSource ? toolbarControlSize + toolbarControlGap : 0;
+    for (const { projection, source, actions } of toolbarProjections) {
+      if (actions.length === 1 && !projection.matches('ion-buttons')) syncAction(projection, actions[0].source);
+      else copyAttributes(projection, source);
+      projection.classList.add(toolbarProjectionClass, 'ion-cloned-element');
+      projection.style.setProperty('--ios-theme-vertical-bars-toolbar-offset', `${topOffset}px`);
+      if (projection.matches('ion-buttons')) actions.forEach(({ source: action, projection: clone }) => syncAction(clone, action));
+      topOffset += actions.length * toolbarControlSize + toolbarControlGap;
+    }
+  };
+  const project = (nextBack: HTMLIonBackButtonElement | undefined, groups: ToolbarSource[]) => {
+    root = verticalBarsRoot()!;
+    let topOffset = 0;
+    if (nextBack) {
+      backSource = nextBack;
+      previousBackAriaHidden = nextBack.getAttribute('aria-hidden');
+      backProjection = nextBack.cloneNode(false) as HTMLIonBackButtonElement;
+      syncBack(backProjection, nextBack);
+      backProjection.addEventListener(
+        'click',
+        (event) => {
+          event.preventDefault();
+          event.stopImmediatePropagation();
+          if (backSource && backSource === findBack()) activateProjectedElement(backSource);
+        },
+        { capture: true },
+      );
+      root.append(backProjection);
+      nextBack.setAttribute(marker, '');
+      nextBack.setAttribute('aria-hidden', 'true');
+      nextBack.dispatchEvent(new CustomEvent('nativeUIShellChange'));
+      topOffset = toolbarControlSize + toolbarControlGap;
+    }
+    for (const { group, actions: sources } of groups) {
+      const projection = (sources.length === 1 ? sources[0] : group).cloneNode(false) as HTMLElement;
+      if (sources.length === 1) syncAction(projection, sources[0]);
+      else copyAttributes(projection, group);
+      projection.classList.add(toolbarProjectionClass, 'ion-cloned-element');
+      projection.style.setProperty('--ios-theme-vertical-bars-toolbar-offset', `${topOffset}px`);
+      const actions = sources.map((source) => {
+        const clone = sources.length === 1 ? projection : (source.cloneNode(false) as HTMLElement);
+        if (sources.length > 1) syncAction(clone, source);
+        clone.addEventListener(
+          'click',
+          (event) => {
+            event.preventDefault();
+            event.stopImmediatePropagation();
+            if (isCurrentToolbarAction(source)) activateProjectedElement(source);
+          },
+          { capture: true },
+        );
+        if (sources.length > 1) projection.append(clone);
+        const previousAriaHidden = source.getAttribute('aria-hidden');
+        source.setAttribute(marker, '');
+        source.setAttribute('aria-hidden', 'true');
+        source.dispatchEvent(new CustomEvent('nativeUIShellChange'));
+        return { source, projection: clone, previousAriaHidden };
+      });
+      root.append(projection);
+      toolbarProjections.push({ source: group, projection, actions });
+      topOffset += actions.length * toolbarControlSize + toolbarControlGap;
+    }
+    if (nextBack || toolbarProjections.length) root.classList.add(readyClass);
+    sourceObserver = new MutationObserver((records) => {
+      if (
+        records.some(
+          (record) =>
+            record.type !== 'attributes' || (![marker, 'aria-hidden'].includes(record.attributeName ?? '') && !prehideOnlyMutation(record)),
+        )
+      )
+        schedule();
+    });
+    if (nextBack?.shadowRoot)
+      sourceObserver.observe(nextBack.shadowRoot, { subtree: true, childList: true, attributes: true, attributeOldValue: true });
+    for (const { group } of groups)
+      sourceObserver.observe(group, { subtree: true, childList: true, attributes: true, attributeOldValue: true });
+  };
+  const performUpdate = () => {
+    frame = 0;
+    const currentRoot = verticalBarsRoot();
+    if (observingVerticalBars !== !!currentRoot) {
+      observingVerticalBars = !!currentRoot;
+      observer.disconnect();
+      observer.observe(doc.documentElement, {
+        subtree: true,
+        childList: true,
+        attributes: true,
+        attributeOldValue: true,
+        attributeFilter: observingVerticalBars ? undefined : ['class'],
+      });
+    }
+    if (stopped || suspended || !currentRoot || !enabled()) return restore();
+    const nextBack = findBack();
+    const groups = findToolbarGroups();
+    if (!nextBack && !groups.length) return restore();
+    if (sameSources(nextBack, groups)) return syncExisting();
+    restore();
+    project(nextBack, groups);
+    updates++;
+  };
+  const update = () => {
+    try {
+      performUpdate();
+    } catch {
+      restore();
+    } finally {
+      const pending = waiters;
+      waiters = [];
+      pending.forEach((resolve) => resolve());
+    }
+  };
+  const schedule = (): Promise<void> => {
+    if (stopped) return Promise.resolve();
+    const done = new Promise<void>((resolve) => waiters.push(resolve));
+    if (!frame) frame = win.requestAnimationFrame(update);
+    return done;
+  };
+  const observer = new MutationObserver((records) => {
+    const insideProjection = (target: Node) => {
+      const element = target instanceof Element ? target : target.parentNode instanceof Element ? target.parentNode : undefined;
+      const rootNode = target.getRootNode();
+      const shadowHost = rootNode instanceof ShadowRoot ? rootNode.host : undefined;
+      return !![element, shadowHost].some((candidate) => candidate?.closest(`.${backProjectionClass}, .${toolbarProjectionClass}`));
+    };
+    const verticalBarsChanged = records.some(
+      (record) =>
+        (record.type === 'attributes' && (record.target as Element).matches('ion-app')) ||
+        (record.type === 'childList' &&
+          Array.from(record.addedNodes).some(
+            (node) =>
+              node instanceof Element &&
+              (node.matches('ion-app.ios-theme-vertical-bars') || !!node.querySelector('ion-app.ios-theme-vertical-bars')),
+          )),
+    );
+    if (
+      (observingVerticalBars &&
+        records.some((record) => record.attributeName !== marker && !prehideOnlyMutation(record) && !insideProjection(record.target))) ||
+      (!observingVerticalBars && verticalBarsChanged && records.some((record) => !prehideOnlyMutation(record)))
+    )
+      schedule();
+  });
+  observer.observe(doc.documentElement, {
+    subtree: true,
+    childList: true,
+    attributes: true,
+    attributeOldValue: true,
+    attributeFilter: ['class'],
+  });
+  const pageLifecycle = (event: Event) => {
+    const page = event.target;
+    if (!(page instanceof HTMLElement) || !page.matches('.ion-page')) return;
+    if (event.type === VERTICAL_BARS_TRANSITION_CANCELED) {
+      const entering = (event as CustomEvent<{ entering?: HTMLElement }>).detail?.entering;
+      verticalBarsPages.cancel(entering, page);
+    } else verticalBarsPages.lifecycle(event);
+    if (verticalBarsRoot()) schedule();
+  };
+  for (const name of ['ionViewWillEnter', 'ionViewWillLeave', 'ionViewDidEnter', 'ionViewDidLeave'])
+    doc.addEventListener(name, pageLifecycle, { capture: true, signal: listeners.signal });
+  doc.addEventListener(VERTICAL_BARS_TRANSITION_CANCELED, pageLifecycle, { capture: true, signal: listeners.signal });
+  for (const name of ['ionModalWillPresent', 'ionModalDidDismiss'])
+    doc.addEventListener(name, schedule, { capture: true, signal: listeners.signal });
+  win.addEventListener('nativeUIShellRefresh', schedule, { signal: listeners.signal });
+  schedule();
+
+  return {
+    getStatus: (): NativeUIShellStatus => ({
+      state: stopped ? 'stopped' : 'web',
+      projected: Number(!!backSource) + toolbarProjections.reduce((count, group) => count + group.actions.length, 0),
+      updates,
+    }),
+    async suspend() {
+      suspended++;
+      restore();
+      let resumed = false;
+      return {
+        async resume() {
+          if (resumed) return;
+          resumed = true;
+          suspended = Math.max(0, suspended - 1);
+          if (!suspended) await schedule();
+        },
+      };
+    },
+    async destroy() {
+      if (stopped) return;
+      stopped = true;
+      win.cancelAnimationFrame(frame);
+      frame = 0;
+      waiters.forEach((resolve) => resolve());
+      waiters = [];
+      observer.disconnect();
+      sourceObserver?.disconnect();
+      listeners.abort();
+      restore();
+    },
+  };
+};