@rdlabo/ionic-theme-ios27 1.2.0-1 → 1.2.0-beta.pr226.shaa2e125f11160

package/src/index.ts

@@ -17,24 +17,55 @@ export const registerTabBarEffect = (targetElement: HTMLElement): registeredEffe
   const reducedMotion = win.matchMedia('(prefers-reduced-motion: reduce)');
   const verticalBarsRoot = targetElement.closest('ion-app');
   let effect: registeredEffect | undefined;
+  let placement: 'disabled' | 'horizontal' | 'left' | 'right' | undefined;
   const update = () => {
-    effect?.destroy();
     const isVertical =
-      !!verticalBarsRoot?.classList.contains('ios-theme-vertical-bars') && !targetElement.closest('ion-menu, ion-modal, ion-popover');
-    effect =
-      reducedMotion.matches || isVertical
-        ? undefined
-        : registerEffect(targetElement, 'ion-tab-button', 'tab-selected', {
+      !!verticalBarsRoot?.classList.contains('ios-theme-vertical-bars') &&
+      targetElement.matches('ion-tabs > ion-tab-bar:not(.ios-theme-disabled, .ios26-disabled)') &&
+      !targetElement.closest('ion-menu, ion-modal, ion-popover');
+    const disabled = reducedMotion.matches || !targetElement.matches('.ios:not(.ios-theme-disabled, .ios26-disabled)');
+    const nextPlacement = disabled
+      ? 'disabled'
+      : isVertical
+        ? verticalBarsRoot?.classList.contains('ios-theme-vertical-bars-left')
+          ? 'left'
+          : 'right'
+        : 'horizontal';
+    // Gesture/activation classes also change during interaction. Rebuild only when
+    // eligibility or placement changes, retaining cancellation when the rail changes sides.
+    if (placement === nextPlacement) return;
+    placement = nextPlacement;
+    effect?.destroy();
+    effect = disabled
+      ? undefined
+      : registerEffect(
+          targetElement,
+          'ion-tab-button',
+          'tab-selected',
+          {
             small: 'scale(1.1, 1)',
             medium: 'scale(1.2)',
             large: 'scale(1.15, 1.4)',
             xlarge: 'scale(1.3)',
-          });
+          },
+          isVertical,
+        );
   };
   update();
   reducedMotion.addEventListener('change', update);
-  const placementObserver = new win.MutationObserver(update);
-  if (verticalBarsRoot) placementObserver.observe(verticalBarsRoot, { attributes: true, attributeFilter: ['class'] });
+  const placementObserver = new win.MutationObserver((records) => {
+    if (
+      records.some((record) =>
+        record.type === 'attributes'
+          ? record.target === targetElement || record.target === verticalBarsRoot
+          : [...Array.from(record.addedNodes), ...Array.from(record.removedNodes)].some((node) => node.contains(targetElement)),
+      )
+    )
+      update();
+  });
+  if (verticalBarsRoot)
+    placementObserver.observe(verticalBarsRoot, { attributes: true, attributeFilter: ['class'], childList: true, subtree: true });
+  placementObserver.observe(targetElement, { attributes: true, attributeFilter: ['class'] });
   return {
     destroy: () => {
       reducedMotion.removeEventListener('change', update);

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

@@ -3,6 +3,21 @@ import { AnimationPosition, EffectScales } from './interfaces';
 import { createAnimation, GestureDetail } from '@ionic/core';
 import { getStep } from '../utils';
 
+// Work in main/cross-axis coordinates so native horizontal samples also drive the rail.
+export const animationRect = (element: Element, vertical = false) => {
+  const rect = element.getBoundingClientRect();
+  return vertical
+    ? { left: rect.top, top: rect.left, right: rect.bottom, width: rect.height, height: rect.width, x: rect.y, y: rect.x }
+    : rect;
+};
+const translate = (x: number, y: number, vertical: boolean) => `translate3d(${vertical ? y : x}px, ${vertical ? x : y}px, 0)`;
+const stretchTransform = (x: number, y: number, vertical: boolean) => `scale(${vertical ? y : x}, ${vertical ? x : y})`;
+const mainSize = (element: HTMLElement, vertical: boolean) => (vertical ? element.offsetHeight : element.offsetWidth);
+const axisScale = (transform: string, vertical: boolean) => {
+  const matrix = new DOMMatrixReadOnly(transform);
+  return vertical ? { a: matrix.d, d: matrix.a } : matrix;
+};
+
 export const getScaleAnimation = (effectElement: Element): Animation => {
   return createAnimation().addElement(effectElement.shadowRoot!.querySelector<HTMLElement>('[part="native"]')!).easing('ease-out');
 };
@@ -46,21 +61,27 @@ const tabBarTapFrames = [
 ];
 
 // UITabBarController presentation-layer samples: horizontal stretch precedes vertical stretch.
-export const createTabBarPressAnimation = (effect: HTMLElement, from: HTMLElement, to: HTMLElement, bar: HTMLElement): Animation => {
-  const box = bar.getBoundingClientRect();
+export const createTabBarPressAnimation = (
+  effect: HTMLElement,
+  from: HTMLElement,
+  to: HTMLElement,
+  bar: HTMLElement,
+  vertical = false,
+): Animation => {
+  const box = animationRect(bar, vertical);
   const center = box.left + box.width / 2;
-  const left = center - bar.offsetWidth / 2;
-  const fromBox = from.getBoundingClientRect();
-  const toBox = to.getBoundingClientRect();
-  const parentScale = box.width / bar.offsetWidth;
-  const buttonScale = new DOMMatrixReadOnly(getComputedStyle(from).transform);
+  const left = center - mainSize(bar, vertical) / 2;
+  const fromBox = animationRect(from, vertical);
+  const toBox = animationRect(to, vertical);
+  const parentScale = box.width / mainSize(bar, vertical);
+  const buttonScale = axisScale(getComputedStyle(from).transform, vertical);
   const width = fromBox.width / parentScale / buttonScale.a;
   const height = fromBox.height / parentScale / buttonScale.d;
   const start = (fromBox.left + fromBox.width / 2 - box.left) / parentScale;
   const end = (toBox.left + toBox.width / 2 - box.left) / parentScale;
   const selected = from === to;
   const frames = tabBarPressFrames.map(([time, position, extraWidth, extraHeight, expansion]) => {
-    const scale = 1 + (14.14 / bar.offsetWidth) * expansion;
+    const scale = 1 + (14.14 / mainSize(bar, vertical)) * expansion;
     // A selected item expands in place, without the transfer's sideways deformation.
     const press = 1 - Math.exp(-18 * time) * (1 + 18 * time);
     return {
@@ -73,26 +94,24 @@ export const createTabBarPressAnimation = (effect: HTMLElement, from: HTMLElemen
   const move = createAnimation()
     .addElement(effect)
     .beforeStyles({
-      width: `${width}px`,
-      height: `${height}px`,
+      width: `${vertical ? height : width}px`,
+      height: `${vertical ? width : height}px`,
       display: 'block',
       opacity: '1',
     })
-    .keyframes(
-      frames.map(({ offset, x }) => ({ offset, transform: `translate3d(${x}px, ${box.top + box.height / 2 - height / 2}px, 0)` })),
-    );
+    .keyframes(frames.map(({ offset, x }) => ({ offset, transform: translate(x, box.top + box.height / 2 - height / 2, vertical) })));
   const stretch = getScaleAnimation(effect)
     .easing('linear')
-    .keyframes(frames.map(({ offset, sx, sy }) => ({ offset, transform: `scale(${sx}, ${sy})` })));
+    .keyframes(frames.map(({ offset, sx, sy }) => ({ offset, transform: stretchTransform(sx, sy, vertical) })));
   return createAnimation().duration(900).easing('linear').addAnimation([move, stretch]);
 };
 
 // Drag samples: faster movement stretches sideways, then rebounds vertically at rest.
-export const createTabBarDragAnimation = (effect: HTMLElement, bar: HTMLElement, velocity: number): Animation => {
+export const createTabBarDragAnimation = (effect: HTMLElement, bar: HTMLElement, velocity: number, vertical = false): Animation => {
   const native = effect.shadowRoot!.querySelector<HTMLElement>('[part="native"]')!;
-  const current = new DOMMatrixReadOnly(native.style.transform || getComputedStyle(native).transform);
-  const { width, height } = effect.getBoundingClientRect();
-  const scale = 1 + 14.14 / bar.offsetWidth;
+  const current = axisScale(native.style.transform || getComputedStyle(native).transform, vertical);
+  const { width, height } = animationRect(effect, vertical);
+  const scale = 1 + 14.14 / mainSize(bar, vertical);
   const restX = ((width + 16) * scale) / width;
   const restY = ((height + 16) * scale) / height;
   // Approximate the 100/600pt/s UIKit samples; keep deformation bounded for fast swipes.
@@ -102,10 +121,10 @@ export const createTabBarDragAnimation = (effect: HTMLElement, bar: HTMLElement,
     .duration(500)
     .easing('linear')
     .keyframes([
-      { offset: 0, transform: `scale(${current.a}, ${current.d})` },
-      { offset: 0.2, transform: `scale(${restX + stretch / width}, ${restY - stretch / height})` },
-      { offset: 0.44, transform: `scale(${restX - rebound / width}, ${restY + rebound / height})` },
-      { offset: 1, transform: `scale(${restX}, ${restY})` },
+      { offset: 0, transform: stretchTransform(current.a, current.d, vertical) },
+      { offset: 0.2, transform: stretchTransform(restX + stretch / width, restY - stretch / height, vertical) },
+      { offset: 0.44, transform: stretchTransform(restX - rebound / width, restY + rebound / height, vertical) },
+      { offset: 1, transform: stretchTransform(restX, restY, vertical) },
     ]);
 };
 
@@ -114,10 +133,11 @@ export const createTabBarReleaseAnimation = (
   effectElement: Element,
   target: HTMLElement,
   tap?: { elapsed: number; distance: number },
+  vertical = false,
 ): Animation => {
   const tapElapsed = tap?.elapsed;
   const native = effectElement.shadowRoot!.querySelector<HTMLElement>('[part="native"]')!;
-  const scale = new DOMMatrixReadOnly(native.style.transform || getComputedStyle(native).transform);
+  const scale = axisScale(native.style.transform || getComputedStyle(native).transform, vertical);
   const samples = [
     [0, 1],
     [0.033, 0.85],
@@ -131,11 +151,11 @@ export const createTabBarReleaseAnimation = (
     [0.45, 0],
   ];
   const bar = target.parentElement!;
-  const box = bar.getBoundingClientRect();
-  const current = effectElement.getBoundingClientRect();
-  const targetBox = target.getBoundingClientRect();
+  const box = animationRect(bar, vertical);
+  const current = animationRect(effectElement, vertical);
+  const targetBox = animationRect(target, vertical);
   const center = box.left + box.width / 2;
-  const x = center + (targetBox.left + targetBox.width / 2 - center) / (box.width / bar.offsetWidth) - current.width / 2;
+  const x = center + (targetBox.left + targetBox.width / 2 - center) / (box.width / mainSize(bar, vertical)) - current.width / 2;
   const y = box.top + box.height / 2 - current.height / 2;
   const elapsed = (tapElapsed ?? 0) / 1000;
   const duration = tapElapsed === undefined ? 450 : 800 - tapElapsed;
@@ -159,7 +179,7 @@ export const createTabBarReleaseAnimation = (
       ...tabBarTapFrames.slice(nextIndex).map(([time, position, width, height]) => ({
         offset: (time - elapsed) / (0.8 - elapsed),
         x: x + ((current.x - x) * (1 - position)) / Math.max(0.1, 1 - progress),
-        y,
+        y: y + ((current.y - y) * (1 - position)) / Math.max(0.1, 1 - progress),
         sx: 1 + (width * (time >= 0.367 ? 1 + 0.75 * extraDistance : 1)) / current.width,
         sy: 1 + (height * (time >= 0.367 ? 1 + 0.5 * extraDistance : 1)) / current.height,
       })),
@@ -169,7 +189,7 @@ export const createTabBarReleaseAnimation = (
     .addElement(native)
     .duration(duration)
     .easing('linear')
-    .keyframes(frames.map(({ offset, sx, sy }) => ({ offset, transform: `scale(${sx}, ${sy})` })));
+    .keyframes(frames.map(({ offset, sx, sy }) => ({ offset, transform: stretchTransform(sx, sy, vertical) })));
   const move = createAnimation()
     .addElement(effectElement)
     .duration(duration)
@@ -177,7 +197,7 @@ export const createTabBarReleaseAnimation = (
     .keyframes(
       frames.map(({ offset, x, y }) => ({
         offset,
-        transform: `translate3d(${x}px, ${y}px, 0)`,
+        transform: translate(x, y, vertical),
       })),
     );
   // Blend the reflective lens into the selected surface during the final 200ms.
@@ -204,7 +224,7 @@ export const createTabBarReleaseAnimation = (
   if (tapElapsed !== undefined) {
     // A short UIKit tap keeps expanding after lift-off, then settles independently of the lens.
     // Width deltas from the 50ms tap; preserve the rendered size for an uninterrupted handoff.
-    const width = bar.offsetWidth;
+    const width = mainSize(bar, vertical);
     const expansion = box.width - width;
     const peak = Math.max(8.65, expansion);
     const platter = createAnimation()
@@ -282,6 +302,7 @@ export const createMoveAnimation = (
   detail: GestureDetail,
   tabSelectedElement: Element,
   animationPosition: AnimationPosition,
+  vertical = false,
 ): Animation => {
   return createAnimation()
     .duration(500)
@@ -295,8 +316,8 @@ export const createMoveAnimation = (
     })
     .fromTo(
       'transform',
-      `translate3d(${animationPosition.minPositionX}px, ${animationPosition.positionY}px, 0)`,
-      `translate3d(${animationPosition.maxPositionX}px, ${animationPosition.positionY}px, 0)`,
+      translate(animationPosition.minPositionX, animationPosition.positionY, vertical),
+      translate(animationPosition.maxPositionX, animationPosition.positionY, vertical),
     )
     .progressStep(getStep(detail.currentX, animationPosition));
 };

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

@@ -4,6 +4,7 @@ import type { Animation, Gesture, GestureDetail } from '@ionic/core';
 import { changeSelectedElement, cloneElement, getStep } from '../utils';
 import { isNativeUIShell } from '../native-integration';
 import {
+  animationRect,
   createMoveAnimation,
   createPreMoveAnimation,
   createTabBarDragAnimation,
@@ -21,6 +22,7 @@ export const registerEffect = (
   effectTagName: string,
   selectedClassName: string,
   scales: EffectScales,
+  vertical = false,
 ): registeredEffect | undefined => {
   if (!targetElement.classList.contains('ios')) {
     return undefined;
@@ -42,6 +44,7 @@ export const registerEffect = (
   let destroyed = false;
   const originalTabBarScale = targetElement.style.getPropertyValue('--ios27-tab-bar-scale');
   const effectElement = cloneElement(effectTagName, false);
+  if (vertical) effectElement.classList.add('ios27-vertical-tab-effect');
   const stopTabPress = () => {
     if (!tabPressAnimation) return;
     const native = effectElement.shadowRoot!.querySelector<HTMLElement>('[part="native"]')!;
@@ -122,17 +125,30 @@ export const registerEffect = (
   };
   targetElement.addEventListener('pointerdown', onPointerDown);
 
+  const axisDetail = (detail: GestureDetail): GestureDetail =>
+    vertical
+      ? {
+          ...detail,
+          currentX: detail.currentY,
+          currentY: detail.currentX,
+          startX: detail.startY,
+          startY: detail.startX,
+          velocityX: detail.velocityY,
+          velocityY: detail.velocityX,
+        }
+      : detail;
   const createAnimationGesture = () => {
     targetElement.classList.add(GESTURE_NAME);
     gesture = createGesture({
       el: targetElement,
       threshold: 0,
+      direction: vertical ? 'y' : 'x',
       gestureName: `${GESTURE_NAME}_${effectTagName}_${crypto.randomUUID()}`,
-      onStart: (event) => onStartGesture(event),
-      onMove: (event) => onMoveGesture(event),
+      onStart: (event) => onStartGesture(axisDetail(event)),
+      onMove: (event) => onMoveGesture(axisDetail(event)),
       onEnd: (detail) => {
         // Ionic coalesces moves; consume the release coordinate before committing a drag.
-        if (effectTagName === 'ion-tab-button' && tabDragging) onMoveGesture(detail);
+        if (effectTagName === 'ion-tab-button' && tabDragging) onMoveGesture(axisDetail(detail));
         onEndGesture().then();
       },
     });
@@ -160,34 +176,48 @@ export const registerEffect = (
     if (isNativeUIShell(targetElement)) return false;
     currentTouchedElement = ((detail.event.target as HTMLElement).closest(effectTagName) as HTMLElement) || undefined;
     const tabSelectedElement = targetElement.querySelector(`${effectTagName}.${selectedClassName}`);
-    if (currentTouchedElement === undefined || tabSelectedElement === null) {
+    if (
+      currentTouchedElement === undefined ||
+      currentTouchedElement.parentElement !== targetElement ||
+      (currentTouchedElement as HTMLIonTabButtonElement).disabled ||
+      tabSelectedElement === null
+    ) {
+      currentTouchedElement = undefined;
       return false;
     }
     selectedElementBeforeGesture = tabSelectedElement as HTMLElement;
     if (effectTagName === 'ion-tab-button') {
       // UIKit expands the platter by 14.14pt at both two- and four-tab widths.
-      targetElement.style.setProperty('--ios27-tab-bar-scale', String(1 + 14.14 / targetElement.offsetWidth));
+      targetElement.style.setProperty(
+        '--ios27-tab-bar-scale',
+        String(1 + 14.14 / (vertical ? targetElement.offsetHeight : targetElement.offsetWidth)),
+      );
     }
     animationPosition = {
-      minPositionX: targetElement.getBoundingClientRect().left,
-      maxPositionX: targetElement.getBoundingClientRect().right - tabSelectedElement.clientWidth,
-      width: tabSelectedElement.clientWidth,
-      positionY: tabSelectedElement.getBoundingClientRect().top,
+      minPositionX: animationRect(targetElement, vertical).left,
+      maxPositionX:
+        animationRect(targetElement, vertical).right - (vertical ? tabSelectedElement.clientHeight : tabSelectedElement.clientWidth),
+      width: vertical ? tabSelectedElement.clientHeight : tabSelectedElement.clientWidth,
+      positionY: animationRect(tabSelectedElement, vertical).top,
     };
     targetElement.classList.add(ANIMATED_NAME);
     changeSelectedElement(targetElement, currentTouchedElement, effectTagName, selectedClassName);
 
     if (effectTagName === 'ion-tab-button') {
-      moveAnimation = createMoveAnimation(effectElement, detail, tabSelectedElement, animationPosition);
+      moveAnimation = createMoveAnimation(effectElement, detail, tabSelectedElement, animationPosition, vertical);
       moveAnimation.progressStart(
         true,
-        getStep(tabSelectedElement.getBoundingClientRect().left + tabSelectedElement.clientWidth / 2, animationPosition),
+        getStep(
+          animationRect(tabSelectedElement, vertical).left + animationRect(tabSelectedElement, vertical).width / 2,
+          animationPosition,
+        ),
       );
       tabPressAnimation = createTabBarPressAnimation(
         effectElement,
         tabSelectedElement as HTMLElement,
         currentTouchedElement,
         targetElement,
+        vertical,
       );
       tabPressStartedAt = performance.now();
       void tabPressAnimation.play();
@@ -225,7 +255,7 @@ export const registerEffect = (
       if (Math.abs(detail.currentX - detail.startX) < 3 && !tabDragging) return;
       tabDragging = true;
       stopTabPress();
-      tabPressAnimation = createTabBarDragAnimation(effectElement, targetElement, detail.velocityX);
+      tabPressAnimation = createTabBarDragAnimation(effectElement, targetElement, detail.velocityX, vertical);
       void tabPressAnimation.play();
     } else if (scaleAnimationPromise === undefined) {
       if (Math.abs(detail.velocityX) > maxVelocity) {
@@ -249,11 +279,19 @@ export const registerEffect = (
     }
 
     const currentX = detail.currentX;
-    const previousY = targetElement.getBoundingClientRect().top + targetElement.getBoundingClientRect().height / 2;
-    const nextEl = (targetElement.getRootNode() as Document | ShadowRoot).elementFromPoint(currentX, previousY);
+    const previousY = animationRect(targetElement, vertical).top + animationRect(targetElement, vertical).height / 2;
+    const nextEl = (targetElement.getRootNode() as Document | ShadowRoot).elementFromPoint(
+      vertical ? previousY : currentX,
+      vertical ? currentX : previousY,
+    );
     const latestTouchedElement = (nextEl?.closest(effectTagName) as HTMLElement) || undefined;
 
-    if (latestTouchedElement && currentTouchedElement !== latestTouchedElement) {
+    if (
+      latestTouchedElement &&
+      latestTouchedElement.parentElement === targetElement &&
+      !(latestTouchedElement as HTMLIonTabButtonElement).disabled &&
+      currentTouchedElement !== latestTouchedElement
+    ) {
       currentTouchedElement = latestTouchedElement;
       changeSelectedElement(targetElement, currentTouchedElement, effectTagName, selectedClassName);
     }
@@ -317,6 +355,7 @@ export const registerEffect = (
               distance: Math.abs(tabs.indexOf(currentTouchedElement) - tabs.indexOf(selectedElementBeforeGesture!)),
             }
           : undefined,
+        vertical,
       );
       currentTouchedElement.classList.remove('ion-activated');
       releaseAnimation = releasing;

package/src/styles/vertical-bars.scss

@@ -152,6 +152,10 @@ ion-app.ios-theme-vertical-bars
   top: auto;
   bottom: calc(var(--ion-safe-area-bottom, 0px) + 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;
@@ -162,6 +166,7 @@ ion-app.ios-theme-vertical-bars
     border-radius: 23px;
     &::part(native) {
       justify-content: center;
+      min-height: 52px;
     }
     ion-label {
       position: absolute;
@@ -340,3 +345,12 @@ ion-app.ios-theme-vertical-bars.ios-theme-vertical-bars-left {
     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: 23px;
+  &::part(native) {
+    min-height: 0;
+    height: 100%;
+  }
+}