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

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,55 +61,60 @@ 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 growth = vertical ? 20 / 16 : 1;
   const frames = tabBarPressFrames.map(([time, position, extraWidth, extraHeight, expansion]) => {
-    const scale = 1 + (14.14 / bar.offsetWidth) * expansion;
+    const scale = vertical ? 1 : 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 {
       offset: time / 0.9,
       x: center + (left + start + (end - start) * position - center) * scale - width / 2,
-      sx: ((width + (selected ? 16 * press : extraWidth)) * scale) / width,
-      sy: ((height + (selected ? 16 * press : extraHeight)) * scale) / height,
+      sx: ((width + (selected ? 16 * press : extraWidth) * growth) * scale) / width,
+      sy: ((height + (selected ? 16 * press : extraHeight) * growth) * scale) / height,
     };
   });
   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 restX = ((width + 16) * scale) / width;
-  const restY = ((height + 16) * scale) / height;
+  const current = axisScale(native.style.transform || getComputedStyle(native).transform, vertical);
+  const { width, height } = animationRect(effect, vertical);
+  const scale = vertical ? 1 : 1 + 14.14 / mainSize(bar, vertical);
+  const restX = ((width + (vertical ? 20 : 16)) * scale) / width;
+  const restY = ((height + (vertical ? 20 : 16)) * scale) / height;
   // Approximate the 100/600pt/s UIKit samples; keep deformation bounded for fast swipes.
   const stretch = Math.min(16, 32 * velocity * velocity) * scale;
   const rebound = Math.max(stretch, (current.a - restX) * width) * 0.8;
@@ -102,10 +122,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 +134,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,22 +152,25 @@ 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;
+  // The vertical platter contracts from 64pt items to 44 × 58pt on release.
+  const endScaleX = vertical ? target.offsetHeight / current.width : 1;
+  const endScaleY = vertical ? target.offsetWidth / current.height : 1;
   const elapsed = (tapElapsed ?? 0) / 1000;
   const duration = tapElapsed === undefined ? 450 : 800 - tapElapsed;
   let frames = samples.map(([time, remaining]) => ({
     offset: time / 0.45,
     x: x + (current.x - x) * remaining,
     y: y + (current.y - y) * remaining,
-    sx: 1 + (scale.a - 1) * remaining,
-    sy: 1 + (scale.d - 1) * remaining,
+    sx: endScaleX + (scale.a - endScaleX) * remaining,
+    sy: endScaleY + (scale.d - endScaleY) * remaining,
   }));
-  if (tapElapsed !== undefined) {
+  if (tapElapsed !== undefined && !vertical) {
     const nextIndex = tabBarTapFrames.findIndex(([time]) => time > elapsed);
     const previous = tabBarTapFrames[Math.max(0, nextIndex - 1)];
     const next = tabBarTapFrames[nextIndex];
@@ -159,7 +183,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 +193,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 +201,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.
@@ -201,10 +225,10 @@ export const createTabBarReleaseAnimation = (
       { offset: 1, backgroundColor: selectedBackground },
     ]);
   const release = createAnimation().duration(duration).addAnimation([stretch, move, glass, selected]);
-  if (tapElapsed !== undefined) {
+  if (tapElapsed !== undefined && !vertical) {
     // 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 +306,7 @@ export const createMoveAnimation = (
   detail: GestureDetail,
   tabSelectedElement: Element,
   animationPosition: AnimationPosition,
+  vertical = false,
 ): Animation => {
   return createAnimation()
     .duration(500)
@@ -295,8 +320,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"]')!;
@@ -121,18 +124,39 @@ export const registerEffect = (
     document.addEventListener('pointercancel', onPointerCancel);
   };
   targetElement.addEventListener('pointerdown', onPointerDown);
+  const onClick = (event: MouseEvent) => {
+    // A drag commits its destination itself; the browser may click the old pressed tab.
+    if (vertical && tabDragging && event.isTrusted && event.detail > 0) {
+      event.preventDefault();
+      event.stopImmediatePropagation();
+    }
+  };
+  targetElement.addEventListener('click', onClick, true);
 
+  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 +184,49 @@ 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)),
+      );
     }
+    if (vertical) targetElement.classList.add(ANIMATED_NAME);
     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 +264,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 +288,32 @@ 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 latestTouchedElement = (nextEl?.closest(effectTagName) as HTMLElement) || undefined;
+    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,
+    );
+    let latestTouchedElement: HTMLElement | undefined = (nextEl?.closest(effectTagName) as HTMLElement) || undefined;
+    if (vertical && effectTagName === 'ion-tab-button') {
+      // Overlapping, scaled tabs must not steal a drag from their neighbor.
+      const bar = targetElement.getBoundingClientRect();
+      const tabs = Array.from(targetElement.querySelectorAll<HTMLElement>(effectTagName)).filter((tab) => tab.offsetWidth > 0);
+      const distance = (tab: HTMLElement) => Math.abs(currentX - (bar.top + tab.offsetTop + tab.offsetHeight / 2));
+      latestTouchedElement =
+        currentX >= bar.top && currentX <= bar.bottom
+          ? tabs.reduce<HTMLElement | undefined>(
+              (closest, tab) => (!closest || distance(tab) < distance(closest) ? tab : closest),
+              undefined,
+            )
+          : undefined;
+    }
 
-    if (latestTouchedElement && currentTouchedElement !== latestTouchedElement) {
+    if (
+      latestTouchedElement &&
+      latestTouchedElement.parentElement === targetElement &&
+      !(latestTouchedElement as HTMLIonTabButtonElement).disabled &&
+      currentTouchedElement !== latestTouchedElement
+    ) {
       currentTouchedElement = latestTouchedElement;
       changeSelectedElement(targetElement, currentTouchedElement, effectTagName, selectedClassName);
     }
@@ -308,6 +368,10 @@ export const registerEffect = (
       moveAnimation.destroy();
       moveAnimation = undefined;
       const tabs = Array.from(targetElement.querySelectorAll<HTMLElement>(effectTagName)).filter((tab) => tab.offsetWidth > 0);
+      if (vertical) {
+        currentTouchedElement.classList.remove('ion-activated');
+        targetElement.classList.remove(ANIMATED_NAME);
+      }
       const releasing = createTabBarReleaseAnimation(
         effectElement,
         currentTouchedElement,
@@ -317,6 +381,7 @@ export const registerEffect = (
               distance: Math.abs(tabs.indexOf(currentTouchedElement) - tabs.indexOf(selectedElementBeforeGesture!)),
             }
           : undefined,
+        vertical,
       );
       currentTouchedElement.classList.remove('ion-activated');
       releaseAnimation = releasing;
@@ -347,6 +412,7 @@ export const registerEffect = (
       cancelActiveGesture();
       // Remove event listeners
       targetElement.removeEventListener('pointerdown', onPointerDown);
+      targetElement.removeEventListener('click', onClick, true);
       targetElement.removeEventListener('nativeUIShellChange', nativeChanged);
 
       // Destroy gesture

package/src/styles/components/ion-tabs.scss

@@ -70,11 +70,14 @@ ion-tab-bar.ios:not(.ios-theme-disabled, .ios26-disabled) {
   height: 54px;
   min-height: 54px;
   &:has(> ion-tab-button:nth-child(2):last-child) {
-    width: 180px; // 188px including the 4px inset on each side.
+    width: var(--ios-theme-side-tab-content-width, 180px); // 188px including the 4px inset on each side.
   }
   &:has(:nth-child(5)) {
-    width: calc(100% - calc(18px + var(--ion-safe-area-left, 0px)) - calc(18px + var(--ion-safe-area-right, 0px)) - 3px);
-    max-width: 543px;
+    width: var(
+      --ios-theme-side-tab-content-width,
+      calc(100% - calc(18px + var(--ion-safe-area-left, 0px)) - calc(18px + var(--ion-safe-area-right, 0px)) - 3px)
+    );
+    max-width: var(--ios-theme-side-tab-content-width, 543px);
   }
   padding: 4px;
 
@@ -96,7 +99,7 @@ ion-tab-bar.ios:not(.ios-theme-disabled, .ios26-disabled) {
             1 of ion-tab-button:not(.ion-cloned-element)
           )
       ) {
-        max-width: $width - 8px;
+        max-width: var(--ios-theme-side-tab-content-width, #{$width - 8px});
       }
     }
   }