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

package/src/native/definitions.ts

@@ -10,7 +10,26 @@ export interface NativeUIShellStatus {
   reason?: string;
 }
 
-export interface NativeUIShellOptions {
+export interface VerticalControlAreaOptions {
+  /** Appearance of native vertical ion-button and ion-menu-button actions.
+   * `system` (default) uses SwiftUI styling and template icons; `source` projects supported Ionic fill and colors.
+   * Local data-projection="source|system" or ios-theme-projection-source / ios-theme-projection-system take precedence:
+   * the button itself, then its nearest ion-buttons, then this option. On the same element, a valid attribute wins;
+   * otherwise system wins if both classes are present. Invalid attribute values are ignored.
+   * Local settings update live; removing them restores inheritance. Actions, disabled state and grouping are preserved.
+   * Does not affect back buttons, tabs, FABs, horizontal controls, source elements or Web clones.
+   */
+  buttonProjection?: 'source' | 'system';
+  /** Default fill for native vertical ion-button actions resolved to `source`, including local overrides.
+   * Use `solid` for Ionic's default design, or `null` (also the omitted default) for the iOS theme's glass design.
+   * Applies when fill is omitted or `default`, outside ion-buttons. Inside ion-buttons the default is clear.
+   * Explicit clear, solid and outline take precedence; clear and outline cannot be configured as defaults.
+   * Source elements and Web clones are unchanged.
+   */
+  buttonDefaultFill?: 'solid' | null;
+}
+
+export interface NativeUIShellOptions extends VerticalControlAreaOptions {
   /** Enables Native UI Shell globally. Defaults to `true`. */
   enabled?: boolean;
   /** Controls eligible for native projection. Omit to enable every control; when present, only `true` controls are enabled. */
@@ -82,6 +101,8 @@ export interface ShellItem extends Frame {
   fontSize: number;
   fontWeight: number;
   color: string;
+  /** Resolved ion-button fill for vertical projection; clear omits the native glass background. */
+  buttonFill?: 'clear' | 'solid' | 'outline';
   backgroundColor?: string;
   borderColor?: string;
   borderWidth?: number;

package/src/native/foldable/fold-state.ts

@@ -0,0 +1,9 @@
+import type { FoldState } from './types';
+
+/** Keep posture on ion-app so descendants can follow it through CSS. */
+export function applyFoldStateClasses(root: HTMLElement, fold: FoldState): void {
+  for (const state of ['flat', 'half-opened', 'closed']) {
+    root.classList.toggle(`ios-theme-fold-${state}`, fold.state === state);
+  }
+  root.classList.toggle('ios-theme-fold-expanded', fold.state === 'half-opened' || (fold.state === 'flat' && !!fold.hingeBounds));
+}

package/src/native/foldable/types.ts

@@ -0,0 +1,4 @@
+export interface FoldState {
+  state: 'flat' | 'half-opened' | 'closed';
+  hingeBounds?: { x: number; y: number; width: number; height: number };
+}

package/src/native/index.ts

@@ -7,6 +7,7 @@ import type {
   VerticalBarEdge,
   VerticalBarPlacement,
   VerticalControlAreaHandle,
+  VerticalControlAreaOptions,
   WebViewMetrics,
 } from './definitions';
 import { createRuntime } from './runtime';
@@ -23,6 +24,7 @@ export type {
   VerticalBarEdge,
   VerticalBarPlacement,
   VerticalControlAreaHandle,
+  VerticalControlAreaOptions,
   WebViewMetrics,
 } from './definitions';
 
@@ -160,9 +162,18 @@ export const setVerticalControlAreaPlacement = (placement: VerticalBarEdge | Ver
   document.defaultView?.dispatchEvent(new Event('nativeUIShellRefresh'));
 };
 
-/** Call once at application startup. Ionic markup remains the source of truth. */
-export const enableVerticalControlArea = async (): Promise<VerticalControlAreaHandle> => {
-  const handle = await enableNativeUIShell({ controls: { tabs: true, toolbar: true }, verticalBarsOnly: true });
+/**
+ * Call once after ion-app is mounted. Ionic markup remains the source of truth.
+ * Native vertical buttons default to SwiftUI appearance.
+ * See VerticalControlAreaOptions for source styling and local overrides.
+ */
+export const enableVerticalControlArea = async (options: VerticalControlAreaOptions = {}): Promise<VerticalControlAreaHandle> => {
+  const handle = await enableNativeUIShell({
+    buttonProjection: options.buttonProjection,
+    buttonDefaultFill: options.buttonDefaultFill,
+    controls: { tabs: true, toolbar: true },
+    verticalBarsOnly: true,
+  });
   return {
     getStatus: () => handle.getStatus(),
     suspend: () => handle.suspend(),
@@ -188,6 +199,9 @@ export const enableNativeUIShell = (options: NativeUIShellOptions = {}): Promise
   const controls = options.controls;
   const configuration = JSON.stringify([
     options.verticalBarsOnly === true,
+    options.buttonProjection ?? 'system',
+    // Local source overrides can use this even when the startup projection is system.
+    options.buttonDefaultFill ?? null,
     ...(['tabs', 'toolbar', 'segment', 'fab'] as const).map((component) => !controls || controls[component] === true),
   ]);
   if (active && activeConfiguration !== configuration)

package/src/native/prehide.ts

@@ -74,6 +74,8 @@ export const prehideVerticalBarsToolbarSources = (doc: Document): { suspend: ()
     };
     const sources = scope.matches('ion-back-button') ? [scope] : Array.from(scope.querySelectorAll<HTMLElement>(sourceSelector));
     sources.forEach((element) => {
+      // Shell opt-out is temporary; decide initial placement once it is lifted.
+      if (isShellDisabled(element)) return;
       if (!modalUsesVerticalBars(element) || element.closest(overlays) || (scope.matches('.ion-page') && routedPage(element) !== scope))
         return;
       if (element.matches('ion-buttons')) {
@@ -228,7 +230,7 @@ export const prehideVerticalBarsToolbarSources = (doc: Document): { suspend: ()
     childList: true,
     attributes: true,
     attributeOldValue: true,
-    attributeFilter: ['class', 'hidden', 'inert', 'icon', 'color'],
+    attributeFilter: ['class', 'data-shell', 'hidden', 'inert', 'icon', 'color'],
   });
   return {
     suspend: () => {

package/src/native/runtime.ts

@@ -172,14 +172,14 @@ export const createRuntime = async (
       measuringPointerPages.add(pointerPage);
       pointerPage.style.setProperty('pointer-events', 'auto', 'important');
       try {
-        candidate = readCandidate(element, id);
+        candidate = readCandidate(element, id, options);
       } finally {
         if (previous) pointerPage.style.setProperty('pointer-events', previous, priority);
         else pointerPage.style.removeProperty('pointer-events');
         if (!hadStyle && !pointerPage.style.length) pointerPage.removeAttribute('style');
         win.setTimeout(() => measuringPointerPages.delete(pointerPage), 0);
       }
-    } else candidate = readCandidate(element, id);
+    } else candidate = readCandidate(element, id, options);
     if (candidate && isVerticalBarsCandidate(element)) {
       if (!nativeVerticalBars()) return undefined;
       candidate.control.placement = 'vertical-bars';

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;
 }
@@ -282,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
@@ -295,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/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"}