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

package/src/styles/vertical-bars.scss

@@ -31,8 +31,21 @@ ion-app.ios-theme-vertical-bars.ios-theme-vertical-bars-left {
   --ios-theme-vertical-bars-safe-area-right-resolved: var(--ios-theme-vertical-bars-safe-area-right, 0px);
 }
 
+// Centered dialogs do not inherit the page's rail reservation.
+ion-app.ios-theme-vertical-bars ion-modal:not(.ios-theme-vertical-bars-modal) {
+  --ios-theme-vertical-bars-safe-area-left-resolved: 0px;
+  --ios-theme-vertical-bars-safe-area-right-resolved: 0px;
+}
+
+ion-app.ios-theme-vertical-bars ion-modal.ios-theme-vertical-bars-modal {
+  --ios-theme-vertical-bars-modal-toolbar-top: max(
+    24px,
+    calc(var(--ios-theme-vertical-bars-toolbar-top, 220px) - var(--ios-theme-vertical-bars-modal-offset-top, 0px))
+  );
+}
+
 // Supply material defaults only to Web projections, never to ordinary controls.
-ion-app.ios-theme-vertical-bars.ios-theme-vertical-bars-toolbar-ready
+:is(ion-app.ios-theme-vertical-bars, ion-modal.ios-theme-vertical-bars-modal).ios-theme-vertical-bars-toolbar-ready
   > :is(ion-menu-button, ion-button).ios-theme-vertical-bars-toolbar-projection {
   --ios26-glass-background-rgb: var(--ion-background-color-rgb, 255, 255, 255);
   --ios26-glass-border-color-rgb: var(--ion-background-color-rgb, 255, 255, 255);
@@ -44,9 +57,19 @@ ion-app.ios-theme-vertical-bars .ios-transition-shade {
   clip-path: inset(0 var(--ios-theme-vertical-bars-safe-area-right-resolved) 0 var(--ios-theme-vertical-bars-safe-area-left-resolved));
 }
 
+// A vertical system rail can leave no top inset for the page header.
+ion-app.ios-theme-vertical-bars
+  ion-header.ios:not(.header-collapse-condense, .ios-theme-disabled, .ios26-disabled):not(
+    :where(ion-menu *, ion-modal:not(.ios-theme-vertical-bars-modal) *, ion-popover *)
+  ) {
+  --ion-safe-area-top: max(24px, env(safe-area-inset-top, 0px));
+}
+
 // Keep page backgrounds and the router full width; move only their foregrounds.
 ion-app.ios-theme-vertical-bars
-  ion-content:is(.ios, .md):not(.ios-theme-disabled, .ios26-disabled):not(:where(ion-menu *, ion-modal *, ion-popover *)) {
+  ion-content:is(.ios, .md):not(.ios-theme-disabled, .ios26-disabled):not(
+    :where(ion-menu *, ion-modal:not(.ios-theme-vertical-bars-modal) *, ion-popover *)
+  ) {
   --ion-safe-area-left: 0px;
   --ion-safe-area-right: 0px;
 
@@ -62,7 +85,9 @@ ion-app.ios-theme-vertical-bars
 }
 
 ion-app.ios-theme-vertical-bars
-  ion-toolbar:is(.ios, .md):not(.ios-theme-disabled, .ios26-disabled):not(:where(ion-menu *, ion-modal *, ion-popover *)) {
+  ion-toolbar:is(.ios, .md):not(.ios-theme-disabled, .ios26-disabled):not(
+    :where(ion-menu *, ion-modal:not(.ios-theme-vertical-bars-modal) *, ion-popover *)
+  ) {
   --ion-safe-area-left: 0px;
   --ion-safe-area-right: 0px;
 
@@ -131,37 +156,44 @@ ion-app.ios-theme-vertical-bars {
 ion-app.ios-theme-vertical-bars
   ion-tabs:not(:where(ion-menu *, ion-modal *, ion-popover *))
   > ion-tab-bar:is(.ios, .md):not(.ios-theme-disabled, .ios26-disabled) {
-  --ios-theme-side-tab-bar-width: 50px;
-  --ios-theme-side-tab-bar-gap: 8px;
-  --ios-theme-side-safe-area: var(--ios-theme-vertical-bars-safe-area-right-resolved);
+  // iOS 27.1 Duo: 48pt platter, 44 × 58pt items with 8pt overlap, 24pt edge gaps.
+  --ios-theme-side-tab-bar-width: 48px;
+  --ios-theme-side-tab-content-width: 44px;
+  --ios-theme-side-tab-bar-gap: 24px;
   contain: layout style;
   position: absolute;
   z-index: 2;
   display: flex;
   flex-direction: column;
-  width: 46px;
-  min-width: 46px;
-  max-width: 46px;
+  width: 44px;
+  min-width: 44px;
+  max-width: 44px;
   height: fit-content;
   min-height: 0;
   padding: 2px;
-  border-radius: 25px;
+  border-radius: 24px;
   left: auto;
-  right: max(4px, calc((var(--ios-theme-side-safe-area) - var(--ios-theme-side-tab-bar-width)) / 2));
+  right: calc(24px + (48px - var(--ios-theme-side-tab-bar-width)) / 2);
   margin: 0;
   top: auto;
-  bottom: calc(var(--ion-safe-area-bottom, 0px) + var(--ios-theme-side-tab-bar-gap));
+  bottom: var(--ios-theme-side-tab-bar-gap);
+
+  &.ios27-enable-gesture {
+    touch-action: pan-x pinch-zoom;
+  }
 
   > ion-tab-button:not(.ion-cloned-element) {
     display: block;
     flex: none;
-    width: 46px;
-    min-width: 46px;
-    height: 52px;
-    min-height: 52px;
-    border-radius: 23px;
+    width: 44px;
+    min-width: 44px;
+    height: 58px;
+    min-height: 58px;
+    border-radius: 22px;
     &::part(native) {
       justify-content: center;
+      min-height: 58px;
+      padding: 0;
     }
     ion-label {
       position: absolute;
@@ -179,32 +211,54 @@ ion-app.ios-theme-vertical-bars
       font-size: 28px;
     }
   }
+  > ion-tab-button.ion-activated {
+    transform: scale(1.16);
+  }
   > ion-tab-button:not(.ion-cloned-element) ~ ion-tab-button:not(.ion-cloned-element) {
-    margin-block-start: 0;
+    margin-block-start: -8px;
     margin-inline-start: 0;
   }
-  &:has(> ion-tab-button:is(.ion-activated, :active)) > ion-tab-button:not(.ion-cloned-element) {
+  // Duo's expanded platter keeps its center and reveals labels without shrinking icons.
+  &:is(.ios27-animated, :has(> ion-tab-button:is(.ion-activated, :active))) {
+    --ios-theme-side-tab-bar-width: 72px;
+    --ios-theme-side-tab-content-width: 64px;
+    --ios-theme-side-tab-bar-gap: 20px;
+    width: 64px;
+    min-width: 64px;
+    max-width: 64px;
+    padding: 4px;
+    border-radius: 36px;
+    transform: none;
+    -webkit-transform: none;
+  }
+  &:is(.ios27-animated, :has(> ion-tab-button:is(.ion-activated, :active))) > ion-tab-button:not(.ion-cloned-element) {
+    width: 64px;
+    min-width: 64px;
+    height: 64px;
+    min-height: 64px;
+    border-radius: 32px;
     &::part(native) {
       flex-direction: column;
-      padding-block: 4px;
+      min-height: 64px;
+      padding-block: 11px;
     }
     ion-label {
       position: static;
       width: auto;
       height: auto;
-      max-width: 44px;
+      max-width: 64px;
       padding: 0;
       margin: 1px 0 0;
       overflow: hidden;
       clip: auto;
-      font-size: 0.5rem;
-      line-height: 1;
+      font-size: 10px;
+      line-height: 12px;
       text-overflow: ellipsis;
       white-space: nowrap;
     }
     ion-icon {
       margin: 0;
-      font-size: 22px;
+      font-size: 28px;
     }
   }
 }
@@ -212,9 +266,8 @@ ion-app.ios-theme-vertical-bars
 ion-app.ios-theme-vertical-bars.ios-theme-vertical-bars-left
   ion-tabs:not(:where(ion-menu *, ion-modal *, ion-popover *))
   > ion-tab-bar:is(.ios, .md):not(.ios-theme-disabled, .ios26-disabled) {
-  --ios-theme-side-safe-area: var(--ios-theme-vertical-bars-safe-area-left-resolved);
   right: auto;
-  left: max(4px, calc((var(--ios-theme-side-safe-area) - var(--ios-theme-side-tab-bar-width)) / 2));
+  left: calc(24px + (48px - var(--ios-theme-side-tab-bar-width)) / 2);
 }
 
 .ios-theme-native-ui-shell-prehidden {
@@ -251,8 +304,11 @@ html.ios-theme-native-ui-shell-prehide
   visibility: hidden !important;
 }
 
-ion-app.ios-theme-vertical-bars.ios-theme-vertical-bars-toolbar-ready {
-  ion-toolbar:is(.ios, .md):not(.ios-theme-disabled, .ios26-disabled):not(:where(ion-menu *, ion-modal *, ion-popover *))
+ion-app.ios-theme-vertical-bars.ios-theme-vertical-bars-toolbar-ready,
+ion-app.ios-theme-vertical-bars ion-modal.ios-theme-vertical-bars-modal.ios-theme-vertical-bars-toolbar-ready {
+  ion-toolbar:is(.ios, .md):not(.ios-theme-disabled, .ios26-disabled):not(
+      :where(ion-menu *, ion-modal:not(.ios-theme-vertical-bars-modal) *, ion-popover *)
+    )
     ion-back-button:is(.ios, .md)[data-native-ui-shell]:not(
       .ios-theme-disabled,
       .ios26-disabled,
@@ -260,7 +316,9 @@ ion-app.ios-theme-vertical-bars.ios-theme-vertical-bars-toolbar-ready {
     ) {
     display: none;
   }
-  ion-toolbar:is(.ios, .md):not(.ios-theme-disabled, .ios26-disabled):not(:where(ion-menu *, ion-modal *, ion-popover *))
+  ion-toolbar:is(.ios, .md):not(.ios-theme-disabled, .ios26-disabled):not(
+      :where(ion-menu *, ion-modal:not(.ios-theme-vertical-bars-modal) *, ion-popover *)
+    )
     ion-buttons:is(.ios, .md)
     > :is(ion-button, ion-menu-button):is(.ios, .md)[data-native-ui-shell]:not(
       .ios-theme-disabled,
@@ -269,7 +327,9 @@ ion-app.ios-theme-vertical-bars.ios-theme-vertical-bars-toolbar-ready {
     ) {
     display: none;
   }
-  ion-toolbar:is(.ios, .md):not(.ios-theme-disabled, .ios26-disabled):not(:where(ion-menu *, ion-modal *, ion-popover *))
+  ion-toolbar:is(.ios, .md):not(.ios-theme-disabled, .ios26-disabled):not(
+      :where(ion-menu *, ion-modal:not(.ios-theme-vertical-bars-modal) *, ion-popover *)
+    )
     ion-buttons:is(.ios, .md):has(> :is(ion-back-button, ion-button, ion-menu-button)[data-native-ui-shell]):not(
       :has(> :is(ion-back-button, ion-button, ion-menu-button):not([data-native-ui-shell]))
     ) {
@@ -278,7 +338,7 @@ ion-app.ios-theme-vertical-bars.ios-theme-vertical-bars-toolbar-ready {
   > ion-back-button.ios-theme-vertical-bars-back-button-projection {
     position: fixed;
     z-index: 1001;
-    top: var(--ios-theme-vertical-bars-toolbar-top, 220px);
+    top: var(--ios-theme-vertical-bars-modal-toolbar-top, var(--ios-theme-vertical-bars-toolbar-top, 220px));
     right: max(4px, calc((var(--ios-theme-vertical-bars-safe-area-right-resolved) - 46px) / 2));
     display: block;
     width: 46px;
@@ -288,7 +348,10 @@ ion-app.ios-theme-vertical-bars.ios-theme-vertical-bars-toolbar-ready {
   > :is(.ios, .md).ios-theme-vertical-bars-toolbar-projection {
     position: fixed;
     z-index: 1001;
-    top: calc(var(--ios-theme-vertical-bars-toolbar-top, 220px) + var(--ios-theme-vertical-bars-toolbar-offset, 0px));
+    top: calc(
+      var(--ios-theme-vertical-bars-modal-toolbar-top, var(--ios-theme-vertical-bars-toolbar-top, 220px)) +
+        var(--ios-theme-vertical-bars-toolbar-offset, 0px)
+    );
     right: max(4px, calc((var(--ios-theme-vertical-bars-safe-area-right-resolved) - 46px) / 2));
     width: 46px;
     min-width: 46px;
@@ -307,10 +370,12 @@ ion-app.ios-theme-vertical-bars.ios-theme-vertical-bars-toolbar-ready {
     border-radius: 50%;
   }
   > ion-button:is(.ios, .md).ios-theme-vertical-bars-toolbar-projection {
-    --background: rgba(var(--ios-theme-glass-background-rgb, var(--ios26-glass-background-rgb)), 0.72);
+    &:not(.button-solid):not(.button-outline) {
+      --background: rgba(var(--ios-theme-glass-background-rgb, var(--ios26-glass-background-rgb)), 0.72);
+    }
     --border-radius: 50%;
     @include glass.light-shadow('--box-shadow');
-    &::part(native) {
+    &:not(.button-outline)::part(native) {
       @include api.glass-control-background($include-background: false, $shadow: var(--box-shadow));
     }
   }
@@ -333,10 +398,20 @@ ion-app.ios-theme-vertical-bars.ios-theme-vertical-bars-toolbar-ready {
   }
 }
 
-ion-app.ios-theme-vertical-bars.ios-theme-vertical-bars-left {
+ion-app.ios-theme-vertical-bars.ios-theme-vertical-bars-left,
+ion-app.ios-theme-vertical-bars.ios-theme-vertical-bars-left ion-modal.ios-theme-vertical-bars-modal {
   > ion-back-button.ios-theme-vertical-bars-back-button-projection,
   > :is(.ios, .md).ios-theme-vertical-bars-toolbar-projection {
     right: auto;
     left: max(4px, calc((var(--ios-theme-vertical-bars-safe-area-left-resolved) - 46px) / 2));
   }
 }
+
+// The lens is attached to body, outside the rail selectors.
+ion-tab-button.ios.ion-cloned-element.ios27-vertical-tab-effect {
+  border-radius: 32px;
+  &::part(native) {
+    min-height: 0;
+    height: 100%;
+  }
+}

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

@@ -64,6 +64,8 @@ export const attachTabBarSearchable = (
   // Initialize
   ionFooter.style.pointerEvents = 'none';
   ionFooter.style.opacity = '0';
+  // Search dismissal belongs beside the Web search field, never in the vertical rail.
+  ionFooter.querySelector('ion-buttons[slot=start]')?.classList.add('ios-theme-horizontal-only');
   const nativeSearch = registerNativeSearch(ionTabBar, ionFabButton, ionFooter);
 
   // Saved Params
@@ -72,6 +74,8 @@ export const attachTabBarSearchable = (
   // Leave is valid both while native Enter awaits its ack and after it completes.
   let nativeEntry = false;
   let nativeRequest = 0;
+  let verticalSearch = false;
+  let tabVisibilityObserver: MutationObserver | undefined;
 
   return async (event: Event, type: TabBarSearchableType) => {
     const selector = type === TabBarSearchableType.Enter ? 'ion-fab-button' : 'ion-buttons[slot=start] ion-button';
@@ -93,19 +97,38 @@ export const attachTabBarSearchable = (
       return;
     }
     if (type === TabBarSearchableType.Enter) {
-      resumeNative ??= await suspendNativeUIShell([ionTabBar, ionFooter, ionFabButton.closest('ion-fab') ?? ionFabButton]);
+      verticalSearch = !!ionTabBar.closest('ion-app.ios-theme-vertical-bars');
+      if (verticalSearch) {
+        // Ionic hides horizontal tabs when the keyboard opens; keep this rail available.
+        const keepTabsVisible = () => {
+          if (ionTabBar.classList.contains('tab-bar-hidden') && ionTabBar.closest('ion-app.ios-theme-vertical-bars')) {
+            ionTabBar.classList.remove('tab-bar-hidden');
+          }
+        };
+        tabVisibilityObserver?.disconnect();
+        tabVisibilityObserver = new MutationObserver(keepTabsVisible);
+        tabVisibilityObserver.observe(ionTabBar, { attributes: true, attributeFilter: ['class'] });
+        keepTabsVisible();
+      }
+      resumeNative ??= await suspendNativeUIShell([
+        ...(verticalSearch ? [] : [ionTabBar]),
+        ionFooter,
+        ionFabButton.closest('ion-fab') ?? ionFabButton,
+      ]);
       try {
-        searchableEventCache = await enterEvent(event, ionTabBar, ionFabButton, ionFooter);
+        searchableEventCache = await enterEvent(event, ionTabBar, ionFabButton, ionFooter, verticalSearch);
       } catch (error) {
+        tabVisibilityObserver?.disconnect();
         resumeNative();
         resumeNative = undefined;
         throw error;
       }
     } else if (searchableEventCache !== undefined) {
       try {
-        await leaveEvent(event, searchableEventCache, ionTabBar, ionFabButton, ionFooter);
+        await leaveEvent(event, searchableEventCache, ionTabBar, ionFabButton, ionFooter, verticalSearch);
         searchableEventCache = undefined;
       } finally {
+        tabVisibilityObserver?.disconnect();
         resumeNative?.();
         resumeNative = undefined;
       }
@@ -120,6 +143,7 @@ const enterEvent = async (
   ionTabBar: HTMLElement,
   ionFabButton: HTMLElement,
   ionFooter: HTMLElement,
+  verticalSearch: boolean,
 ): Promise<SearchableEventCache> => {
   if (!(event.target as HTMLElement)?.closest('ion-fab-button')) {
     throw throwErrorByFailedClickElement('ion-fab-button');
@@ -131,10 +155,12 @@ const enterEvent = async (
     ? getComputedStyle(references.selectedTabButton).getPropertyValue('--color-selected').trim()
     : '';
 
-  const effectAnimation = createEffectAnimation(references, sizes);
+  if (verticalSearch) references.closeButtonIcon.setAttribute('name', 'close');
+  const tabAnimations = verticalSearch
+    ? []
+    : [createTabBarAnimation(ionTabBar, references, sizes), createEffectAnimation(references, sizes)];
   const searchContainerAnimation = createSearchContainerAnimation(references, sizes);
   const closeButtonsAnimation = createCloseButtonsAnimation(references);
-  const tabBarAnimation = createTabBarAnimation(ionTabBar, references, sizes);
   const fabButtonAnimation = createFabButtonAnimation(ionFabButton);
 
   await createAnimation()
@@ -144,7 +170,7 @@ const enterEvent = async (
     .addElement(ionFooter)
     .afterAddWrite(() => (ionFooter.style.pointerEvents = 'auto'))
     .fromTo('opacity', '0.8', '1')
-    .addAnimation([tabBarAnimation, fabButtonAnimation, searchContainerAnimation, effectAnimation, closeButtonsAnimation])
+    .addAnimation([...tabAnimations, fabButtonAnimation, searchContainerAnimation, closeButtonsAnimation])
     .play();
 
   return {
@@ -159,6 +185,7 @@ const leaveEvent = async (
   ionTabBar: HTMLElement,
   ionFabButton: HTMLElement,
   ionFooter: HTMLElement,
+  verticalSearch: boolean,
 ): Promise<void> => {
   if (!(event.target as HTMLElement)?.closest('ion-buttons[slot=start] ion-button')) {
     throw throwErrorByFailedClickElement('ion-buttons[slot=start] ion-button');
@@ -166,10 +193,14 @@ const leaveEvent = async (
 
   const references = getElementReferences(ionTabBar, ionFooter);
 
-  const effectAnimation = createReverseEffectAnimation(references, searchableEventCache.elementSizes, searchableEventCache.colorSelected);
+  const tabAnimations = verticalSearch
+    ? []
+    : [
+        createReverseTabBarAnimation(ionTabBar, references, searchableEventCache.elementSizes),
+        createReverseEffectAnimation(references, searchableEventCache.elementSizes, searchableEventCache.colorSelected),
+      ];
   const searchContainerAnimation = createReverseSearchContainerAnimation(references, searchableEventCache.elementSizes);
   const closeButtonsAnimation = createReverseCloseButtonsAnimation(references);
-  const tabBarAnimation = createReverseTabBarAnimation(ionTabBar, references, searchableEventCache.elementSizes);
   const fabButtonAnimation = createReverseFabButtonAnimation(ionFabButton, searchableEventCache.elementSizes);
 
   await createAnimation()
@@ -179,6 +210,6 @@ const leaveEvent = async (
     .addElement(ionFooter)
     .afterAddWrite(() => (ionFooter.style.pointerEvents = 'none'))
     .fromTo('opacity', '1', '0')
-    .addAnimation([tabBarAnimation, fabButtonAnimation, searchContainerAnimation, effectAnimation, closeButtonsAnimation])
+    .addAnimation([...tabAnimations, fabButtonAnimation, searchContainerAnimation, closeButtonsAnimation])
     .play();
 };

package/src/vertical-bars.ts

@@ -1,4 +1,3 @@
 export { enableVerticalControlArea, setVerticalControlAreaPlacement, IonicNativeUIShell } from './native';
-export { HingeStatus } from './native';
 export { withNativeUIShellTransition } from './native-integration/transition';
-export type { DeviceLayout, NativeUIShellStatus, NativeUIShellSuspension, VerticalBarEdge, VerticalControlAreaHandle } from './native';
+export type { NativeUIShellStatus, NativeUIShellSuspension, VerticalBarEdge, VerticalControlAreaHandle } from './native';