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

package/src/native/runtime.ts

@@ -1,6 +1,7 @@
+import { projectionIds } from './shared/projection-id';
 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 { LIFECYCLE_WILL_ENTER, LIFECYCLE_WILL_LEAVE, LIFECYCLE_DID_ENTER, LIFECYCLE_DID_LEAVE } from '@ionic/core/components/index.js';
 import { VERTICAL_BARS_TRANSITION_CANCELED, getNativeSearchBindings, setNativeUIShellIntegration } from '../native-integration';
 import { createSearchSupport } from './components/searchable-tabs';
 import type {
@@ -18,6 +19,8 @@ import {
   isVerticalBarsSource,
   preferredVerticalBarsBack,
   marker,
+  syncToolbarText,
+  toolbarTextMarker,
   prehideOnlyMutation,
   rejectedClass,
   unprojected,
@@ -33,7 +36,7 @@ const verticalBarsMarker = 'data-native-ui-shell-vertical-bars';
 const verticalBarsMemberMarker = 'data-native-ui-shell-vertical-bars-member';
 
 // A failed bridge must not leave the source inaccessible indefinitely.
-const bounded = <T>(promise: Promise<T>): Promise<T> =>
+export const bounded = <T>(promise: Promise<T>): Promise<T> =>
   new Promise((resolve, reject) => {
     const timer = setTimeout(() => reject(new Error('Native UI Shell bridge timed out')), 5000);
     promise.then(resolve, reject).finally(() => clearTimeout(timer));
@@ -45,7 +48,7 @@ export const createRuntime = async (
   options: NativeUIShellOptions = {},
   nativeVerticalBars: () => boolean = () => true,
   verticalBarsOnly = false,
-): Promise<NativeUIShellHandle> => {
+): Promise<NativeUIShellHandle & { retain: (deferActivation?: (id: string) => boolean) => () => void }> => {
   const win = doc.defaultView!;
   const icons = createIconRenderer();
   const crossfade = createCrossfade(win);
@@ -75,6 +78,7 @@ export const createRuntime = async (
   let dirty = false;
   let pending = false;
   let stopped = false;
+  const retentions = new Set<{ accepts?: (id: string) => boolean; activation?: ShellActivation }>();
   /** True while a tab-switch handoff should skip crossfade. */
   let tabSwitchHandoff = false;
   /** Keep instant updates until this time — DidLeave often precedes the retire sync. */
@@ -106,6 +110,7 @@ export const createRuntime = async (
     if (!value) {
       value = `shell-${++nextId}`;
       ids.set(element, value);
+      projectionIds.set(element, value);
     }
     return value;
   };
@@ -299,9 +304,13 @@ export const createRuntime = async (
     frame = 0;
     dirty = false;
     pending = true;
+    syncToolbarText(doc);
     handoffInstant = tabSwitchHandoff || handoffAcrossPending || modalPresentHandoff || win.performance.now() < handoffUntil;
-    modalPresentHandoff = false;
     try {
+      // A retained sync performs no update; keep the modal handoff armed so the
+      // deferred retirement still runs instantly after the overlay releases.
+      if (retentions.size && !manualSuspensions.size) return;
+      modalPresentHandoff = false;
       const size = `${win.innerWidth}:${win.innerHeight}`;
       // WebKit can resize before Ionic's fixed DOM positions catch up.
       // Measure on the next frame instead of retiring a valid native search.
@@ -323,7 +332,7 @@ export const createRuntime = async (
           );
         }
       }
-      if (stopped || dirty) return;
+      if (stopped || dirty || (retentions.size && !manualSuspensions.size)) return;
       const retained = new Set(candidates.flatMap(candidateSources));
       const removed = Array.from(sources.keys()).filter((element) => !retained.has(element));
       if (removed.length) {
@@ -358,7 +367,7 @@ export const createRuntime = async (
       updates++;
       updatingRevision = snapshot.revision;
       const result = await bounded(plugin.update(snapshot));
-      if (stopped) return;
+      if (stopped || (retentions.size && !manualSuspensions.size)) return;
       if (result.revision !== snapshot.revision) throw new Error('Native UI Shell revision mismatch');
       if (`${win.innerWidth}:${win.innerHeight}` !== size) {
         lastSnapshot = '';
@@ -466,6 +475,7 @@ export const createRuntime = async (
       records.some(
         (record) =>
           record.attributeName !== marker &&
+          record.attributeName !== toolbarTextMarker &&
           record.attributeName !== fadeMarker &&
           !prehideOnlyMutation(record) &&
           !(record.attributeName === 'style' && measuringPointerPages.has(record.target as HTMLElement)) &&
@@ -633,7 +643,20 @@ export const createRuntime = async (
     on(win.visualViewport, 'resize', refreshLayout);
     on(win.visualViewport, 'scroll');
   }
-  const handle: NativeUIShellHandle = {
+  const handle: NativeUIShellHandle & { retain: (deferActivation?: (id: string) => boolean) => () => void } = {
+    // A native overlay covers this surface; keep its controls and Web ownership intact.
+    retain(deferActivation) {
+      const retention: { accepts?: (id: string) => boolean; activation?: ShellActivation } = { accepts: deferActivation };
+      retentions.add(retention);
+      return () => {
+        if (!retentions.delete(retention)) return;
+        // UIKit may already expose the anchor while Ionic is still dismissing.
+        // Replay at most one validated input after the live content is restored.
+        const activation = retention.activation;
+        if (activation && retention.accepts?.(activation.id)) win.queueMicrotask(() => activate(activation));
+        schedule();
+      };
+    },
     getStatus: (): NativeUIShellStatus => ({
       state: stopped ? 'stopped' : sources.size ? 'native' : 'web',
       projected: sources.size,
@@ -691,15 +714,16 @@ export const createRuntime = async (
     },
   };
   const activate = (event: ShellActivation) => {
-    if (
-      stopped ||
-      doc.hidden ||
-      event.revision < acceptedRevision ||
-      event.revision > revision ||
-      event.sequence <= lastSequence ||
-      overlayOpen(false, true)
-    )
+    if (stopped || doc.hidden || event.revision < acceptedRevision || event.revision > revision || event.sequence <= lastSequence) return;
+    if (overlayOpen(false, true)) {
+      if (!manualSuspensions.size) {
+        for (const retention of retentions) {
+          if (retention.accepts?.(event.id) && (!retention.activation || event.sequence > retention.activation.sequence))
+            retention.activation = event;
+        }
+      }
       return;
+    }
     // Native may send input before update() resolves on the JS bridge.
     // Revalidate it after ownership is accepted, using the same action path.
     if (event.revision > acceptedRevision && event.revision === updatingRevision) {

package/src/native/shared/dom.ts

@@ -193,6 +193,20 @@ export const isVerticalBarsToolbarGroup = (element: HTMLElement): boolean => {
   );
 };
 
+export const toolbarTextMarker = 'data-native-ui-shell-toolbar-text';
+
+export const syncToolbarText = (doc: Document): void => {
+  for (const toolbar of Array.from(
+    doc.querySelectorAll<HTMLElement>(`ion-app.ios-theme-vertical-bars ion-toolbar, ion-toolbar[${toolbarTextMarker}]`),
+  )) {
+    toolbar.toggleAttribute(
+      toolbarTextMarker,
+      !!toolbar.closest('ion-app.ios-theme-vertical-bars') &&
+        childNodesOf(toolbar).some((node) => node.nodeType === Node.TEXT_NODE && !!node.textContent?.trim()),
+    );
+  }
+};
+
 export const activateProjectedElement = (element: HTMLElement): void => {
   const target = element.matches('ion-button, ion-back-button, ion-menu-button')
     ? element.shadowRoot?.querySelector<HTMLElement>('[part~="native"]')

package/src/native/shared/projection-id.ts

@@ -0,0 +1,2 @@
+/** Internal identity used to anchor overlays to their native control. */
+export const projectionIds = new WeakMap<Element, string>();

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

@@ -15,6 +15,8 @@ import {
   preferredVerticalBarsBack,
   verticalBarsOwned,
   marker,
+  syncToolbarText,
+  toolbarTextMarker,
   prehideOnlyMutation,
   prehiddenClass,
   unprojected,
@@ -271,6 +273,7 @@ export const createVerticalBarsWebProjection = (
   };
   const performUpdate = () => {
     frame = 0;
+    syncToolbarText(doc);
     const currentRoot = verticalBarsRoot();
     if (observingVerticalBars !== !!currentRoot) {
       observingVerticalBars = !!currentRoot;
@@ -278,6 +281,7 @@ export const createVerticalBarsWebProjection = (
       observer.observe(doc.documentElement, {
         subtree: true,
         childList: true,
+        characterData: observingVerticalBars,
         attributes: true,
         attributeOldValue: true,
         attributeFilter: observingVerticalBars ? undefined : ['class'],
@@ -335,7 +339,13 @@ export const createVerticalBarsWebProjection = (
     );
     if (
       (observingVerticalBars &&
-        records.some((record) => record.attributeName !== marker && !prehideOnlyMutation(record) && !insideProjection(record.target))) ||
+        records.some(
+          (record) =>
+            record.attributeName !== marker &&
+            record.attributeName !== toolbarTextMarker &&
+            !prehideOnlyMutation(record) &&
+            !insideProjection(record.target),
+        )) ||
       (!observingVerticalBars && verticalBarsChanged && records.some((record) => !prehideOnlyMutation(record)))
     )
       schedule();

package/src/native-integration/index.ts

@@ -1,5 +1,5 @@
 /// <reference lib="es2021.weakref" />
-import type { Animation } from '@ionic/core';
+import type { Animation } from '@ionic/core/components';
 
 export interface NativeUIShellIntegration {
   suspend(scopes: HTMLElement[]): Promise<(canceled?: boolean) => void>;

package/src/native-integration/transition.ts

@@ -1,4 +1,4 @@
-import type { AnimationBuilder } from '@ionic/core';
+import type { AnimationBuilder } from '@ionic/core/components';
 import { connectNativeUIShellTransition } from './index';
 
 /**

package/src/sheets-of-glass/animations.ts

@@ -1,6 +1,6 @@
-import type { Animation, AnimationKeyFrames } from '@ionic/core';
+import type { Animation, AnimationKeyFrames, GestureDetail } from '@ionic/core/components';
 import { AnimationPosition, EffectScales } from './interfaces';
-import { createAnimation, GestureDetail } from '@ionic/core';
+import { createAnimation } from '@ionic/core/components/index.js';
 import { getStep } from '../utils';
 
 // Work in main/cross-axis coordinates so native horizontal samples also drive the rail.

package/src/sheets-of-glass/index.ts

@@ -1,6 +1,6 @@
 import { AnimationPosition, EffectScales, registeredEffect } from './interfaces';
-import { createAnimation, createGesture } from '@ionic/core';
-import type { Animation, Gesture, GestureDetail } from '@ionic/core';
+import { createAnimation, createGesture } from '@ionic/core/components/index.js';
+import type { Animation, Gesture, GestureDetail } from '@ionic/core/components';
 import { changeSelectedElement, cloneElement, getStep } from '../utils';
 import { isNativeUIShell } from '../native-integration';
 import {

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

@@ -436,3 +436,50 @@ ion-button.ios:not(.ios-theme-disabled, .ios26-disabled) {
 ion-back-button.ios:not(.ios-theme-disabled, .ios26-disabled) {
   @include theme-button($is-back-button: true);
 }
+
+// Toolbar button typography and spacing follow system toolbar controls.
+ion-toolbar.ios:not(.ios-theme-disabled, .ios26-disabled) {
+  ion-button.ios:not(.ios-theme-disabled, .ios26-disabled):not(.button-small, .button-large):not(
+      :where(ion-buttons.ios-theme-disabled *, ion-buttons.ios26-disabled *)
+    ) {
+    font-size: 1rem;
+    font-weight: 400;
+    // TODO(v2.0.0): Remove .back-button-has-icon-only; Ionic only adds it to ion-back-button.
+    &:not(.button-has-icon-only, .back-button-has-icon-only) {
+      --padding-start: 16px;
+      --padding-end: 16px;
+    }
+  }
+
+  ion-buttons.ios:not(.ios-theme-disabled, .ios26-disabled):has(ion-button ~ ion-button):not(
+      :has(
+        ion-back-button,
+        ion-button:not(.button-clear),
+        ion-menu-button,
+        .ios-theme-disabled,
+        .ios26-disabled,
+        .button-small,
+        .button-large
+      )
+    ) {
+    height: 44px;
+    padding-inline: 3.5px;
+    // SwiftUI toolbar items share glass with 16pt between their inner controls.
+    gap: 16px;
+
+    ion-button.ios:not(.ios-theme-disabled, .ios26-disabled).button-clear {
+      // Keep the action's hit area through the group's height, while the
+      // inner plain control follows the system's 36px visual layout.
+      height: 100%;
+      display: inline-flex;
+      align-items: center;
+      --padding-start: 7px;
+      --padding-end: 7px;
+      &::part(native) {
+        width: auto;
+        height: 36px;
+        min-height: 36px;
+      }
+    }
+  }
+}

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

@@ -13,22 +13,27 @@ ion-header.ios:not(.ios-theme-disabled, .ios26-disabled) ion-toolbar:not(.ios-th
 ion-modal.ios:not(.ios-theme-disabled, .ios26-disabled).modal-card,
 ion-modal.ios:not(.ios-theme-disabled, .ios26-disabled).modal-sheet {
   ion-header.ios:not(.ios-theme-disabled, .ios26-disabled) ion-toolbar.ios:not(.ios-theme-disabled, .ios26-disabled):first-of-type {
-    padding-top: 0;
+    // The system's modal safe area places the 44px control 16px below the
+    // content edge, with or without a sheet drag indicator.
+    padding-top: 6px;
     padding-bottom: 0;
     --min-height: 64px;
-    --padding-start: 3px;
-    --padding-end: 3px;
   }
 }
 
 @media (min-width: 768px) and (min-height: 600px) {
-  ion-modal.ios:not(.ios-theme-disabled, .ios26-disabled) {
+  ion-modal.ios:not(.ios-theme-disabled, .ios26-disabled):not(.modal-sheet) {
     ion-header.ios:not(.ios-theme-disabled, .ios26-disabled) ion-toolbar.ios:not(.ios-theme-disabled, .ios26-disabled):first-of-type {
-      padding-top: 0;
+      // Center a 44px control at 10px, retaining the safe area in fullscreen modals.
+      padding-top: max(calc(var(--ion-safe-area-top, 0px) - 10px), 0px);
       padding-bottom: 0;
       --min-height: 64px;
-      --padding-start: 3px;
-      --padding-end: 3px;
+    }
+  }
+  // Ionic keeps the root safe area in card modals, including centered dialogs.
+  ion-modal.ios:not(.ios-theme-disabled, .ios26-disabled).modal-card {
+    ion-header.ios:not(.ios-theme-disabled, .ios26-disabled) ion-toolbar.ios:not(.ios-theme-disabled, .ios26-disabled):first-of-type {
+      padding-top: 0;
     }
   }
 }
@@ -106,4 +111,54 @@ ion-toolbar.ios:not(.ios-theme-disabled, .ios26-disabled) {
   ion-buttons > ion-back-button {
     margin-inline: 0;
   }
+
+  // Keep the outer inset for individual actions too. Adjacent actions in the
+  // same slot share a 12px gap rather than adding two outer margins together.
+  > ion-button:not(.ios-theme-disabled, .ios26-disabled) {
+    margin-inline: 12px;
+  }
+  // Rail sources leave toolbar layout; ordinary native projection retains it.
+  $visible: ':not([hidden], .ios-theme-native-ui-shell-prehidden, [data-native-ui-shell][data-native-ui-shell-vertical-bars], ion-menu-button.menu-button-hidden, ion-back-button:not(.show-back-button))';
+  $button: ':is(ion-button, ion-back-button)#{$visible}';
+  $group: 'ion-buttons#{$visible}';
+  $action: ':is(#{$button}, #{$group}:has(> #{$visible}))';
+  $optOut: ':is(.ios-theme-disabled, .ios26-disabled)';
+
+  > ion-buttons:not(:has(> #{$visible})) {
+    display: none;
+  }
+
+  @each $slot in start, end, primary, secondary {
+    // Keep standalone margins when the slot includes a visible opted-out action.
+    &:not(.toolbar-searchbar):not(:has(> #{$button}#{$optOut}[slot='#{$slot}'], > #{$group}#{$optOut}[slot='#{$slot}'] > #{$visible})) {
+      > #{$action}[slot='#{$slot}'] {
+        margin-inline: 6px;
+      }
+      > :nth-child(1 of #{$action}[slot='#{$slot}']) {
+        margin-inline-start: 12px;
+      }
+      > :nth-last-child(1 of #{$action}[slot='#{$slot}']) {
+        margin-inline-end: 12px;
+      }
+    }
+  }
+  // Ionic orders these slots together, independently of their DOM order.
+  @each $first, $second in (start, secondary), (primary, end) {
+    &:not(.toolbar-searchbar):has(> #{$button}[slot='#{$first}'], > #{$group}[slot='#{$first}'] > #{$visible}):has(
+        > #{$button}[slot='#{$second}'],
+        > #{$group}[slot='#{$second}'] > #{$visible}
+      ):not(
+        :has(
+          > #{$button}#{$optOut}:is([slot='#{$first}'], [slot='#{$second}']),
+          > #{$group}#{$optOut}:is([slot='#{$first}'], [slot='#{$second}']) > #{$visible}
+        )
+      ) {
+      > :nth-last-child(1 of #{$action}[slot='#{$first}']) {
+        margin-inline-end: 6px;
+      }
+      > :nth-child(1 of #{$action}[slot='#{$second}']) {
+        margin-inline-start: 6px;
+      }
+    }
+  }
 }

package/src/styles/vertical-bars.scss

@@ -92,8 +92,31 @@ ion-app.ios-theme-vertical-bars
   --ion-safe-area-left: 0px;
   --ion-safe-area-right: 0px;
 
+  // Reserve the final layout before a page transition, using the same prehide
+  // decision as its rail controls. Horizontal native projection keeps its space.
+  // Titles, custom content and horizontal-only controls keep the toolbar visible.
+  &:not([data-native-ui-shell-toolbar-text]):has(
+      > .ios-theme-native-ui-shell-prehidden,
+      > ion-buttons > .ios-theme-native-ui-shell-prehidden
+    ):not(:has(> :not(ion-buttons, .ios-theme-native-ui-shell-prehidden))):not(
+      :has(> ion-buttons:not(.ios-theme-native-ui-shell-prehidden) > :not(.ios-theme-native-ui-shell-prehidden))
+    ) {
+    display: none;
+  }
+
   // Collapse headers already sit inside the padded ion-content scroll area.
   &:not(:where(ion-header.header-collapse-condense *, ion-footer.footer-collapse-fade *)) {
+    // Ionic's centered iOS title is absolute and does not follow container padding.
+    // Center it within the same foreground width as the page content.
+    > ion-title.ios.title-default:not(.ios-theme-disabled, .ios26-disabled) {
+      inset-inline-start: var(--ios-theme-vertical-bars-safe-area-left-resolved);
+      width: calc(100% - var(--ios-theme-vertical-bars-safe-area-left-resolved) - var(--ios-theme-vertical-bars-safe-area-right-resolved));
+
+      &:dir(rtl) {
+        inset-inline-start: var(--ios-theme-vertical-bars-safe-area-right-resolved);
+      }
+    }
+
     &::part(container) {
       padding-inline-start: calc(var(--padding-start, 0px) + var(--ios-theme-vertical-bars-safe-area-left-resolved));
       padding-inline-end: calc(var(--padding-end, 0px) + var(--ios-theme-vertical-bars-safe-area-right-resolved));

package/src/tab-bar-searchable/animations/enter.ts

@@ -1,4 +1,5 @@
-import { Animation, createAnimation } from '@ionic/core';
+import type { Animation } from '@ionic/core/components';
+import { createAnimation } from '@ionic/core/components/index.js';
 import { ANIMATION_DELAY_CLOSE_BUTTONS, OPACITY_TRANSITION, type ElementReferences, type ElementSizes } from '@rdlabo/ionic-theme-utils';
 import { cloneElement } from '../../utils';
 

package/src/tab-bar-searchable/animations/leave.ts

@@ -1,4 +1,5 @@
-import { Animation, createAnimation } from '@ionic/core';
+import type { Animation } from '@ionic/core/components';
+import { createAnimation } from '@ionic/core/components/index.js';
 import { ANIMATION_DELAY_CLOSE_BUTTONS, OPACITY_TRANSITION, type ElementReferences, type ElementSizes } from '@rdlabo/ionic-theme-utils';
 import { cloneElement } from '../../utils';
 

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

@@ -1,4 +1,4 @@
-import { createAnimation } from '@ionic/core';
+import { createAnimation } from '@ionic/core/components/index.js';
 import { addSearchDismissButton } from './dismiss-button';
 import {
   ANIMATION_DELAY_BASE,

package/src/transition/index.ts

@@ -1,9 +1,9 @@
 import { config } from '../utils';
 import { Build, writeTask } from '@stencil/core';
 
-import { LIFECYCLE_DID_ENTER, LIFECYCLE_DID_LEAVE, LIFECYCLE_WILL_ENTER, LIFECYCLE_WILL_LEAVE } from '@ionic/core';
-import type { NavOptions, NavDirection } from '@ionic/core';
-import type { Animation, AnimationBuilder } from '@ionic/core';
+import { LIFECYCLE_DID_ENTER, LIFECYCLE_DID_LEAVE, LIFECYCLE_WILL_ENTER, LIFECYCLE_WILL_LEAVE } from '@ionic/core/components/index.js';
+import type { NavOptions, NavDirection } from '@ionic/core/components';
+import type { Animation, AnimationBuilder } from '@ionic/core/components';
 import { createFocusController } from '../focus-controller';
 import { raf } from '../utils';
 

package/src/transition/ios.transition.ts

@@ -1,5 +1,5 @@
 import { createIosTransitionAnimation, shadow } from '@rdlabo/ionic-theme-utils';
-import type { Animation } from '@ionic/core';
+import type { Animation } from '@ionic/core/components';
 import type { TransitionOptions } from './index';
 import { getIonPageElement } from './index';
 import { withNativeUIShellTransition } from '../native-integration/transition';

package/src/utils.ts

@@ -1,5 +1,5 @@
 import { AnimationPosition } from './sheets-of-glass/interfaces';
-import { IonicConfig } from '@ionic/core';
+import type { IonicConfig } from '@ionic/core/components';
 
 declare const __zone_symbol__requestAnimationFrame: ((callback: FrameRequestCallback) => number) | undefined;
 declare const requestAnimationFrame: ((callback: FrameRequestCallback) => number) | undefined;