@rdlabo/ionic-theme-ios27 1.2.0 → 1.2.1

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;