@rdlabo/ionic-theme-ios27 1.2.0-2 → 1.2.0-4

package/src/native/shared/candidate.ts

@@ -1,8 +1,10 @@
-import type { ShellControl, ShellItem, NativeUIShellComponent } from '../definitions';
+import type { ShellControl, ShellItem, NativeUIShellComponent, VerticalControlAreaOptions } from '../definitions';
 import { frame, isDark, isVerticalBarsSource, text, visible } from './dom';
 import { iconSource } from './icons';
 
 export interface Candidate {
+  buttonProjection?: VerticalControlAreaOptions['buttonProjection'];
+  buttonDefaultFill?: VerticalControlAreaOptions['buttonDefaultFill'];
   element: HTMLElement;
   sources?: HTMLElement[];
   control: ShellControl;
@@ -13,11 +15,18 @@ export interface Candidate {
 export type Identify = (element: HTMLElement) => string;
 type ItemElement = HTMLElement & { disabled?: boolean; selected?: boolean };
 
-export const createCandidate = (element: HTMLElement, kind: NativeUIShellComponent, id: Identify): Candidate => {
+export const createCandidate = (
+  element: HTMLElement,
+  kind: NativeUIShellComponent,
+  id: Identify,
+  options: VerticalControlAreaOptions = {},
+): Candidate => {
   const rect = element.getBoundingClientRect();
   const style = getComputedStyle(element);
   return {
     element,
+    buttonProjection: options.buttonProjection,
+    buttonDefaultFill: options.buttonDefaultFill,
     control: {
       id: id(element),
       kind,
@@ -54,10 +63,31 @@ 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)
+  const sourceFill = (child as HTMLIonButtonElement).fill;
+  const projectionOwner = [child, child.closest('ion-buttons')].find((element) =>
+    element?.matches('[data-projection="source"], [data-projection="system"], .ios-theme-projection-source, .ios-theme-projection-system'),
+  );
+  const attributeProjection = projectionOwner?.getAttribute('data-projection');
+  const projection =
+    attributeProjection === 'source' || attributeProjection === 'system'
+      ? attributeProjection
+      : projectionOwner
+        ? projectionOwner.classList.contains('ios-theme-projection-system')
+          ? 'system'
+          : 'source'
+        : candidate.buttonProjection;
+  const systemButton = projection !== 'source' && isVerticalBarsSource(child) && child.matches('ion-button, ion-menu-button');
+  // Ionic defaults buttons inside ion-buttons to clear, even when the app defaults to solid.
+  const defaultFill = child.closest('ion-buttons') ? 'clear' : candidate.buttonDefaultFill;
+  const fill = !sourceFill || sourceFill === 'default' ? defaultFill : sourceFill;
+  const buttonFill =
+    !systemButton &&
+    isVerticalBarsSource(child) &&
+    child.matches('ion-button') &&
+    (fill === 'clear' || fill === 'solid' || fill === 'outline')
+      ? fill
       : undefined;
+  const outline = buttonFill === 'outline' ? getComputedStyle(native ?? child) : undefined;
   const item: ShellItem = {
     id: id(child),
     ...frame(child.getBoundingClientRect(), candidate.element.getBoundingClientRect()),
@@ -74,11 +104,10 @@ export const appendItem = (
     selected: !!(child as ItemElement).selected,
     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,
+    color: systemButton ? 'currentColor' : getComputedStyle(native ?? child).color,
+    iconTemplate: systemButton ? true : undefined,
+    buttonFill,
+    backgroundColor: buttonFill === 'solid' ? getComputedStyle(native ?? child).backgroundColor : undefined,
     borderColor: outline?.borderTopColor,
     borderWidth: outline ? parseFloat(outline.borderTopWidth) : undefined,
     badge: badgeStyle

package/src/native/shared/dom.ts

@@ -52,7 +52,7 @@ export const isDark = (style: CSSStyleDeclaration): boolean => {
   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]';
+const permanentlyExcluded = '.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 => {
@@ -88,8 +88,8 @@ export const createVerticalBarsPageState = () => {
     },
   };
 };
-const disabledButtonGroup = 'ion-buttons:is(.ionic-theme-disabled, .ios-theme-disabled, .ios26-disabled)';
-const shellDisabledSelector = '.ios-theme-shell-disabled';
+const disabledButtonGroup = 'ion-buttons:is(.ios-theme-disabled, .ios26-disabled)';
+const shellDisabledSelector = '.ios-theme-shell-disabled, [data-shell="disabled"]';
 
 export const isDisabledButtonGroupChild = (element: HTMLElement): boolean =>
   element.matches('ion-button') && element.parentElement?.matches(disabledButtonGroup) === true;
@@ -188,7 +188,7 @@ export const isVerticalBarsToolbarGroup = (element: HTMLElement): boolean => {
   return (
     element.matches('ion-buttons') &&
     verticalBarsOwned(element) &&
-    !element.matches('.ionic-theme-disabled, .ios-theme-disabled, .ios26-disabled') &&
+    !element.matches('.ios-theme-disabled, .ios26-disabled') &&
     !isShellDisabled(element)
   );
 };

package/src/styles/vertical-bars.scss

@@ -11,6 +11,7 @@
   initial-value: 320px;
 }
 
+ion-app.ios-theme-fold-half-opened ion-split-pane.split-pane-fold-layout,
 ion-split-pane.ios-theme-split-pane-half-open {
   --ios-theme-split-pane-width: 50vw;
 }
@@ -57,6 +58,14 @@ 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(
@@ -274,7 +283,8 @@ html.ios-theme-native-ui-shell-prehide
     [icon],
     [color],
     .ios-theme-vertical-bars-back-web-owned,
-    .ionic-theme-disabled,
+    .ios-theme-shell-disabled,
+    [data-shell='disabled'],
     .ios-theme-disabled,
     .ios26-disabled,
     .ios-theme-vertical-bars-back-button-projection
@@ -287,7 +297,7 @@ html.ios-theme-native-ui-shell-prehide
       ion-footer[collapse] *,
       ion-buttons.ios-theme-horizontal-only *,
       .ios-theme-shell-disabled *,
-      .ionic-theme-disabled *,
+      [data-shell='disabled'] *,
       .ios-theme-disabled *,
       .ios26-disabled *
     )

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,3 +1,11 @@
 export { enableVerticalControlArea, setVerticalControlAreaPlacement, IonicNativeUIShell } from './native';
 export { withNativeUIShellTransition } from './native-integration/transition';
-export type { NativeUIShellStatus, NativeUIShellSuspension, VerticalBarEdge, VerticalControlAreaHandle } from './native';
+export type {
+  NativeUIShellStatus,
+  NativeUIShellSuspension,
+  VerticalBarEdge,
+  VerticalControlAreaHandle,
+  VerticalControlAreaOptions,
+} from './native';
+
+export { applyFoldStateClasses } from './native/foldable/fold-state';

package/dist/vertical-bars.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"vertical-bars.d.ts","sourceRoot":"","sources":["../src/vertical-bars.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,yBAAyB,EAAE,+BAA+B,EAAE,kBAAkB,EAAE,MAAM,UAAU,CAAC;AAC1G,OAAO,EAAE,2BAA2B,EAAE,MAAM,iCAAiC,CAAC;AAC9E,YAAY,EAAE,mBAAmB,EAAE,uBAAuB,EAAE,eAAe,EAAE,yBAAyB,EAAE,MAAM,UAAU,CAAC"}