@rdlabo/ionic-theme-ios27 1.2.0-1 → 1.2.0-3

package/src/native/runtime.ts

@@ -1,3 +1,4 @@
+import { inVerticalBarsSurface, topModal, modalUsesVerticalBars, modalVerticalBarFrame } from './shared/modal';
 import type { PluginListenerHandle } from '@capacitor/core';
 import { LIFECYCLE_WILL_ENTER, LIFECYCLE_WILL_LEAVE, LIFECYCLE_DID_ENTER, LIFECYCLE_DID_LEAVE } from '@ionic/core';
 import { VERTICAL_BARS_TRANSITION_CANCELED, getNativeSearchBindings, setNativeUIShellIntegration } from '../native-integration';
@@ -126,7 +127,7 @@ export const createRuntime = async (
     lastSnapshot = '';
     search.release(element);
     element.removeAttribute(marker);
-    if (!stopped) crossfade.play(element, false, handoffInstant || isVerticalBarsSource(element));
+    if (!stopped) crossfade.play(element, false, isVerticalBarsSource(element) ? !element.matches('ion-tab-bar') : handoffInstant);
     if (element.getAttribute('aria-hidden') === 'true') {
       const previous = sources.get(element);
       if (previous == null) element.removeAttribute('aria-hidden');
@@ -205,14 +206,19 @@ export const createRuntime = async (
         Array.from(pages).some((scope) => scope.contains(element)) ||
         Array.from(moving.keys()).some((surface) => surface.contains(element))));
   const painted = () => new Promise<void>((resolve) => win.requestAnimationFrame(() => win.requestAnimationFrame(() => resolve())));
-  const overlayOpen = (includeMenu = true) => {
+  const overlayOpen = (includeMenu = true, allowModal = false) => {
+    const modal = topModal(doc);
+    const ignored = (element: Element) => allowModal && !!modal && modalUsesVerticalBars(modal) && element.matches('ion-modal');
     for (const element of presented) if (!element.isConnected) presented.delete(element);
-    const presentedOverlayOpen = Array.from(presented).some((element) => includeMenu || !element.matches('ion-menu'));
+    const presentedOverlayOpen = Array.from(presented).some(
+      (element) => !ignored(element) && (includeMenu || !element.matches('ion-menu')),
+    );
     return (
       manualSuspensions.size > 0 ||
       presentedOverlayOpen ||
       Array.from(doc.querySelectorAll(overlays)).some(
         (element) =>
+          !ignored(element) &&
           (includeMenu || !element.matches('ion-menu')) &&
           ((element as Element & { presented?: boolean }).presented || element.classList.contains('show-menu')),
       )
@@ -225,7 +231,7 @@ export const createRuntime = async (
     search.keepSearchTabsVisible();
     for (const page of pages) if (!page.isConnected) pages.delete(page);
     for (const surface of moving.keys()) if (!surface.isConnected) moving.delete(surface);
-    if (doc.hidden || overlayOpen(false)) return [];
+    if (doc.hidden || overlayOpen(false, true)) return [];
     if (win.visualViewport && (win.visualViewport.scale !== 1 || win.visualViewport.offsetTop !== 0) && !search.hasActive()) return [];
     const menuOpen = overlayOpen();
     const candidates = unprojected(sources.keys(), () =>
@@ -233,7 +239,10 @@ export const createRuntime = async (
         .decorate(
           Array.from(doc.querySelectorAll<HTMLElement>(selector))
             .filter(
-              (element) => !verticalBarsPages.isDeparted(element) && (!blocked(element) || (menuOpen && isVerticalBarsSource(element))),
+              (element) =>
+                inVerticalBarsSurface(element) &&
+                !verticalBarsPages.isDeparted(element) &&
+                (!blocked(element) || (menuOpen && isVerticalBarsSource(element))),
             )
             .map(readEnabledCandidate)
             .filter((candidate): candidate is Candidate => !!candidate),
@@ -333,7 +342,14 @@ export const createRuntime = async (
           ? 'left'
           : 'right'
         : undefined;
-      const data = { viewportWidth: win.innerWidth, verticalBarEdge, controls: candidates.map((candidate) => candidate.control) };
+      const modal = topModal(doc);
+      const verticalBarFrame = modal && modalUsesVerticalBars(modal) ? modalVerticalBarFrame(modal) : undefined;
+      const data = {
+        verticalBarFrame,
+        viewportWidth: win.innerWidth,
+        verticalBarEdge,
+        controls: candidates.map((candidate) => candidate.control),
+      };
       const serialized = JSON.stringify(data);
       if (serialized === lastSnapshot && !forceRefresh) return;
       const snapshot: ShellSnapshot = { ...data, revision: ++revision, transitionDuration: crossfade.duration(handoffInstant) };
@@ -403,13 +419,14 @@ export const createRuntime = async (
         verticalBarsMembers.add(element);
       }
       for (const element of accepted.flatMap(candidateSources)) {
+        const newlyProjected = !sources.has(element) || !element.hasAttribute(marker);
         if (!sources.has(element)) {
           sources.set(element, element.getAttribute('aria-hidden'));
           crossfade.play(element, true, handoffInstant || isVerticalBarsSource(element));
-          element.setAttribute(marker, '');
-          element.setAttribute('aria-hidden', 'true');
-          element.dispatchEvent(new CustomEvent('nativeUIShellChange'));
         }
+        element.setAttribute(marker, '');
+        element.setAttribute('aria-hidden', 'true');
+        if (newlyProjected) element.dispatchEvent(new CustomEvent('nativeUIShellChange'));
       }
       const received = pendingActivations;
       pendingActivations = [];
@@ -591,24 +608,29 @@ export const createRuntime = async (
     'focusout',
   ])
     on(doc, name);
-  on(doc, 'visibilitychange', () => {
-    if (doc.hidden) getNativeSearchBindings(doc).forEach((binding) => search.retire(binding));
+  const refreshLayout = () => {
+    rejected = new WeakMap();
+    forceRefresh = true;
     schedule();
+  };
+  on(doc, 'visibilitychange', () => {
+    if (doc.hidden) {
+      getNativeSearchBindings(doc).forEach((binding) => search.retire(binding));
+      schedule();
+    } else refreshLayout();
   });
-  on(win, 'resize');
+  on(win, 'resize', refreshLayout);
   on(win, 'keyboardWillShow', () => search.keyboard(true));
   on(win, 'keyboardWillHide', () => search.keyboard(false));
   on(win, 'scroll');
   on(win.matchMedia('(prefers-color-scheme: dark)'), 'change');
   on(win, 'nativeUIShellRefresh', (event) => {
-    rejected = new WeakMap();
     if ((event as Event & { retireSearch?: boolean }).retireSearch)
       getNativeSearchBindings(doc).forEach((binding) => search.retire(binding));
-    forceRefresh = true;
-    schedule();
+    refreshLayout();
   });
   if (win.visualViewport) {
-    on(win.visualViewport, 'resize');
+    on(win.visualViewport, 'resize', refreshLayout);
     on(win.visualViewport, 'scroll');
   }
   const handle: NativeUIShellHandle = {
@@ -675,7 +697,7 @@ export const createRuntime = async (
       event.revision < acceptedRevision ||
       event.revision > revision ||
       event.sequence <= lastSequence ||
-      overlayOpen(false)
+      overlayOpen(false, true)
     )
       return;
     // Native may send input before update() resolves on the JS bridge.
@@ -688,7 +710,7 @@ export const createRuntime = async (
     const element = actions.get(event.id);
     if (!element) return;
     const owner = Array.from(sources.keys()).find((source) => source === element || source.contains(element));
-    if (!owner) return;
+    if (!owner || !inVerticalBarsSurface(owner)) return;
     const direct = !blocked(owner) && unprojected(sources.keys(), () => readEnabledCandidate(owner));
     const candidate = direct || read().find((candidate) => candidate.actions.has(event.id));
     const item = candidate?.control.items.find((item) => item.id === event.id);

package/src/native/shared/candidate.ts

@@ -54,6 +54,10 @@ export const appendItem = (
   const labelStyle = getComputedStyle(labelElement);
   const badge = child.querySelector<HTMLElement>('ion-badge');
   const badgeStyle = badge && visible(badge) ? getComputedStyle(badge) : undefined;
+  const outline =
+    isVerticalBarsSource(child) && child.matches('ion-button') && (child as HTMLIonButtonElement).fill === 'outline'
+      ? getComputedStyle(native ?? child)
+      : undefined;
   const item: ShellItem = {
     id: id(child),
     ...frame(child.getBoundingClientRect(), candidate.element.getBoundingClientRect()),
@@ -71,6 +75,12 @@ export const appendItem = (
     fontSize: parseFloat(labelStyle.fontSize),
     fontWeight: parseInt(labelStyle.fontWeight, 10) || 400,
     color: getComputedStyle(native ?? child).color,
+    backgroundColor:
+      isVerticalBarsSource(child) && child.matches('ion-button') && (child as HTMLIonButtonElement).fill === 'solid'
+        ? getComputedStyle(native ?? child).backgroundColor
+        : undefined,
+    borderColor: outline?.borderTopColor,
+    borderWidth: outline ? parseFloat(outline.borderTopWidth) : undefined,
     badge: badgeStyle
       ? { value: badge!.textContent?.trim() ?? '', color: badgeStyle.backgroundColor, textColor: badgeStyle.color }
       : undefined,

package/src/native/shared/dom.ts

@@ -1,4 +1,5 @@
 import { fadeMarker } from './crossfade';
+import { modalUsesVerticalBars } from './modal';
 
 import type { Frame } from '../definitions';
 
@@ -98,7 +99,8 @@ const verticalBarsTags = new Set(['ion-button', 'ion-back-button', 'ion-buttons'
 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-menu, ion-popover') &&
+  modalUsesVerticalBars(element) &&
   !!element.closest('ion-app.ios-theme-vertical-bars');
 
 export const isVerticalBarsBackPosition = (element: HTMLElement): boolean => {
@@ -109,7 +111,8 @@ export const isVerticalBarsBackPosition = (element: HTMLElement): boolean => {
     (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'),
+      !back.closest('ion-header[collapse], ion-footer[collapse], ion-menu, ion-popover') &&
+      modalUsesVerticalBars(back),
   );
   const rank = (back: HTMLElement) =>
     inFixedToolbar(back) ? 0 : back.closest('ion-header ion-toolbar, ion-footer ion-toolbar') ? 1 : back.closest('ion-toolbar') ? 3 : 2;
@@ -141,11 +144,7 @@ export const isShellDisabled = (element: Element): boolean =>
 
 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'));
+  (element.matches('ion-button') && !!element.querySelector('ion-icon[slot="icon-only"], svg[slot="icon-only"]'));
 
 // Placement belongs to the DOM identity for one routed-page epoch. Changes to
 // content/disabled state affect rendering, never its chosen surface.
@@ -161,7 +160,7 @@ export const verticalBarsOwned = (element: HTMLElement): boolean => verticalBars
 export const isVerticalBarsToolbarAction = (element: HTMLElement): boolean =>
   verticalBarsOwned(element) && !isExcluded(element, verticalBarsEnteringPage(element)) && !isShellDisabled(element);
 
-const overlays = 'ion-menu, ion-modal, ion-popover';
+const overlays = 'ion-menu, ion-popover';
 
 /** Shared eligibility for a toolbar action candidate, before placement is decided (prehide) or consumed (projection). */
 export const verticalBarsActionCandidate = (element: HTMLElement): boolean =>
@@ -169,7 +168,8 @@ export const verticalBarsActionCandidate = (element: HTMLElement): boolean =>
   !element.closest('ion-buttons.ios-theme-horizontal-only, ion-button.ios-theme-horizontal-only') &&
   !isPermanentlyExcluded(element) &&
   !isShellDisabled(element) &&
-  !element.closest(overlays);
+  !element.closest(overlays) &&
+  modalUsesVerticalBars(element);
 
 /** Shared eligibility for a back-button candidate; the back button may sit outside a fixed toolbar. */
 export const verticalBarsBackCandidate = (element: HTMLElement): boolean =>
@@ -177,7 +177,8 @@ export const verticalBarsBackCandidate = (element: HTMLElement): boolean =>
   !element.closest('ion-buttons.ios-theme-horizontal-only') &&
   !isPermanentlyExcluded(element) &&
   !isShellDisabled(element) &&
-  !element.closest(overlays);
+  !element.closest(overlays) &&
+  modalUsesVerticalBars(element);
 
 export const verticalBarsToolbarActions = (element: HTMLElement): HTMLElement[] =>
   // Back buttons use the dedicated rail slot; they are never toolbar actions.

package/src/native/shared/modal.ts

@@ -0,0 +1,157 @@
+import type { Frame } from '../definitions';
+
+/** Modal hosts cover the viewport even when their visible dialog is centered. */
+export const modalRailClass = 'ios-theme-vertical-bars-modal';
+const states = new WeakMap<Document, { top?: HTMLIonModalElement }>();
+
+export const topModal = (doc: Document): HTMLIonModalElement | undefined => states.get(doc)?.top;
+export const modalUsesVerticalBars = (element: Element): boolean => {
+  const modal = element.closest('ion-modal');
+  return !modal || modal.classList.contains(modalRailClass);
+};
+
+/** Only the foreground modal may contribute controls; never the covered page. */
+export const inVerticalBarsSurface = (element: Element): boolean => {
+  const modal = topModal(element.ownerDocument);
+  return modal ? element.closest('ion-modal') === modal && modalUsesVerticalBars(element) : !element.closest('ion-modal');
+};
+
+export const observeVerticalBarsModals = (doc: Document): (() => void) => {
+  const win = doc.defaultView!;
+  const state: { top?: HTMLIonModalElement } = {};
+  states.set(doc, state);
+  const presenting = new Set<HTMLIonModalElement>();
+  const dismissed = new WeakSet<HTMLIonModalElement>();
+  const observed = new Set<Element>();
+  const listeners = new AbortController();
+  let stopped = false;
+  let frame = 0;
+  let pointerActive = false;
+  let bounds = '';
+  const toolbarTop = '--ios-theme-vertical-bars-modal-offset-top';
+  const refresh = () => {
+    win.cancelAnimationFrame(frame);
+    frame = 0;
+    if (stopped) return;
+    const app = doc.querySelector('ion-app.ios-theme-vertical-bars');
+    const modals = Array.from(doc.querySelectorAll<HTMLIonModalElement>('ion-modal'));
+    const active = modals.filter(
+      (modal) => !dismissed.has(modal) && ((modal as HTMLIonModalElement & { presented?: boolean }).presented || presenting.has(modal)),
+    );
+    for (const modal of presenting) if (!modal.isConnected) presenting.delete(modal);
+    const top = active.sort((a, b) => a.overlayIndex - b.overlayIndex).slice(-1)[0];
+    let changed = state.top !== top;
+    state.top = top;
+    const nextBounds = top ? JSON.stringify(modalVerticalBarFrame(top)) : '';
+    changed ||= bounds !== nextBounds;
+    bounds = nextBounds;
+    const wanted = new Set<Element>();
+    for (const modal of modals) {
+      const content = modal.shadowRoot?.querySelector<HTMLElement>('[part~="content"]');
+      if (content) wanted.add(content);
+      // offsetWidth is unaffected by Ionic's presentation transforms.
+      const fullWidth = !!content && Math.abs(content.offsetWidth - win.innerWidth) <= 1 && Math.abs(content.offsetLeft) <= 1;
+      const enabled = !!app?.contains(modal) && active.includes(modal) && fullWidth;
+      if (enabled) {
+        const top = modalVerticalBarFrame(modal)?.y ?? 0;
+        const offset = `${top}px`;
+        if (modal.style.getPropertyValue(toolbarTop) !== offset) {
+          modal.style.setProperty(toolbarTop, offset);
+          changed = true;
+        }
+      } else modal.style.removeProperty(toolbarTop);
+      if (modal.classList.contains(modalRailClass) !== enabled) {
+        modal.classList.toggle(modalRailClass, enabled);
+        changed = true;
+      }
+    }
+    if (wanted.size !== observed.size || [...wanted].some((element) => !observed.has(element))) {
+      resize?.disconnect();
+      observer.disconnect();
+      observer.observe(doc.documentElement, observation);
+      observed.clear();
+      for (const element of wanted) {
+        resize?.observe(element);
+        observer.observe(element, { attributes: true, attributeFilter: ['style', 'class'] });
+        observed.add(element);
+      }
+    }
+    if (changed) win.dispatchEvent(new Event('nativeUIShellRefresh'));
+    if (
+      top &&
+      (pointerActive ||
+        Array.from(wanted).some((element) => element.getAnimations().some((animation) => animation.playState === 'running')))
+    )
+      schedule();
+  };
+  const schedule = () => {
+    if (!stopped && !frame) frame = win.requestAnimationFrame(refresh);
+  };
+  const resize = win.ResizeObserver ? new win.ResizeObserver(schedule) : undefined;
+  const observer = new MutationObserver(schedule);
+  const observation = { subtree: true, childList: true, attributes: true, attributeFilter: ['class', 'style'] };
+  observer.observe(doc.documentElement, observation);
+  for (const name of ['ionModalWillPresent', 'ionModalDidPresent', 'ionModalWillDismiss', 'ionModalDidDismiss', 'ionBreakpointDidChange']) {
+    doc.addEventListener(
+      name,
+      (event) => {
+        const modal = event.target as HTMLIonModalElement;
+        if (modal.localName !== 'ion-modal') return;
+        if (name === 'ionModalDidDismiss') {
+          presenting.delete(modal);
+          dismissed.add(modal);
+        } else {
+          presenting.add(modal);
+          dismissed.delete(modal);
+        }
+        refresh();
+      },
+      { capture: true, signal: listeners.signal },
+    );
+  }
+  doc.addEventListener(
+    'pointerdown',
+    (event) => {
+      if ((event.target as Element).closest('ion-modal')) {
+        pointerActive = true;
+        schedule();
+      }
+    },
+    { capture: true, signal: listeners.signal },
+  );
+  for (const name of ['pointerup', 'pointercancel'])
+    doc.addEventListener(
+      name,
+      () => {
+        pointerActive = false;
+        schedule();
+      },
+      { capture: true, signal: listeners.signal },
+    );
+  win.addEventListener('resize', schedule, { signal: listeners.signal });
+  win.addEventListener('nativeUIShellRefresh', schedule, { signal: listeners.signal });
+  refresh();
+  return () => {
+    stopped = true;
+    win.cancelAnimationFrame(frame);
+    observer.disconnect();
+    resize?.disconnect();
+    listeners.abort();
+    if (states.get(doc) !== state) return;
+    states.delete(doc);
+    doc.querySelectorAll<HTMLElement>(`.${modalRailClass}`).forEach((modal) => {
+      modal.classList.remove(modalRailClass);
+      modal.style.removeProperty(toolbarTop);
+    });
+  };
+};
+
+/** Visible modal bounds, clipped at the viewport for Ionic's translated sheets. */
+export const modalVerticalBarFrame = (modal: Element): Frame | undefined => {
+  const rect = modal.shadowRoot?.querySelector('[part~="content"]')?.getBoundingClientRect();
+  const win = modal.ownerDocument.defaultView!;
+  if (!rect) return;
+  const y = Math.max(0, rect.top);
+  const height = Math.min(win.innerHeight, rect.bottom) - y;
+  return height > 0 ? { x: 0, y, width: win.innerWidth, height } : undefined;
+};

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

@@ -1,3 +1,4 @@
+import { inVerticalBarsSurface, topModal } from './shared/modal';
 import type { NativeUIShellHandle, NativeUIShellOptions, NativeUIShellStatus } from './definitions';
 import { VERTICAL_BARS_TRANSITION_CANCELED } from '../native-integration';
 import {
@@ -74,11 +75,13 @@ export const createVerticalBarsWebProjection = (
     });
   const inEligibleToolbar = (element: HTMLElement) =>
     !!verticalBarsRoot()?.contains(element) &&
+    inVerticalBarsSurface(element) &&
     verticalBarsActionCandidate(element) &&
     !isExcluded(element, verticalBarsEnteringPage(element)) &&
     !verticalBarsPages.isDeparted(element);
   const isEligibleBack = (element: HTMLIonBackButtonElement) =>
     !!verticalBarsRoot()?.contains(element) &&
+    inVerticalBarsSurface(element) &&
     verticalBarsOwned(element) &&
     verticalBarsBackCandidate(element) &&
     !isExcluded(element, verticalBarsEnteringPage(element)) &&
@@ -151,7 +154,10 @@ export const createVerticalBarsWebProjection = (
   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();
+    const label =
+      original.getAttribute('aria-label') ??
+      original.shadowRoot?.querySelector('[part~=native]')?.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')) {
@@ -185,7 +191,7 @@ export const createVerticalBarsWebProjection = (
     }
   };
   const project = (nextBack: HTMLIonBackButtonElement | undefined, groups: ToolbarSource[]) => {
-    root = verticalBarsRoot()!;
+    root = topModal(doc) ?? verticalBarsRoot()!;
     let topOffset = 0;
     if (nextBack) {
       backSource = nextBack;
@@ -269,7 +275,7 @@ export const createVerticalBarsWebProjection = (
     const nextBack = findBack();
     const groups = findToolbarGroups();
     if (!nextBack && !groups.length) return restore();
-    if (sameSources(nextBack, groups)) return syncExisting();
+    if (root === (topModal(doc) ?? currentRoot) && sameSources(nextBack, groups)) return syncExisting();
     restore();
     project(nextBack, groups);
     updates++;
@@ -287,6 +293,8 @@ export const createVerticalBarsWebProjection = (
   };
   const schedule = (): Promise<void> => {
     if (stopped) return Promise.resolve();
+    // Release Web ownership before the native runtime can acknowledge its next frame.
+    if (!enabled()) restore();
     const done = new Promise<void>((resolve) => waiters.push(resolve));
     if (!frame) frame = win.requestAnimationFrame(update);
     return done;
@@ -336,6 +344,7 @@ export const createVerticalBarsWebProjection = (
   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('resize', schedule, { signal: listeners.signal });
   win.addEventListener('nativeUIShellRefresh', schedule, { signal: listeners.signal });
   schedule();