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

package/dist/sheets-of-glass/animations.js

@@ -1,5 +1,18 @@
 import { createAnimation } from '@ionic/core';
 import { getStep } from '../utils';
+export const animationRect = (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, y, vertical) => `translate3d(${vertical ? y : x}px, ${vertical ? x : y}px, 0)`;
+const stretchTransform = (x, y, vertical) => `scale(${vertical ? y : x}, ${vertical ? x : y})`;
+const mainSize = (element, vertical) => (vertical ? element.offsetHeight : element.offsetWidth);
+const axisScale = (transform, vertical) => {
+    const matrix = new DOMMatrixReadOnly(transform);
+    return vertical ? { a: matrix.d, d: matrix.a } : matrix;
+};
 export const getScaleAnimation = (effectElement) => {
     return createAnimation().addElement(effectElement.shadowRoot.querySelector('[part="native"]')).easing('ease-out');
 };
@@ -37,66 +50,67 @@ const tabBarTapFrames = [
     [0.7, 1.003, -0.74, 0.59],
     [0.8, 1, 0, 0],
 ];
-export const createTabBarPressAnimation = (effect, from, to, bar) => {
-    const box = bar.getBoundingClientRect();
+export const createTabBarPressAnimation = (effect, from, to, bar, vertical = false) => {
+    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;
         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]);
 };
-export const createTabBarDragAnimation = (effect, bar, velocity) => {
+export const createTabBarDragAnimation = (effect, bar, velocity, vertical = false) => {
     const native = effect.shadowRoot.querySelector('[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;
     const stretch = Math.min(16, 32 * velocity * velocity) * scale;
     const rebound = Math.max(stretch, (current.a - restX) * width) * 0.8;
     return getScaleAnimation(effect)
         .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) },
     ]);
 };
-export const createTabBarReleaseAnimation = (effectElement, target, tap) => {
+export const createTabBarReleaseAnimation = (effectElement, target, tap, vertical = false) => {
     const tapElapsed = tap?.elapsed;
     const native = effectElement.shadowRoot.querySelector('[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],
@@ -110,22 +124,24 @@ export const createTabBarReleaseAnimation = (effectElement, target, tap) => {
         [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 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];
@@ -136,7 +152,7 @@ export const createTabBarReleaseAnimation = (effectElement, target, tap) => {
             ...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,
             })),
@@ -146,14 +162,14 @@ export const createTabBarReleaseAnimation = (effectElement, target, tap) => {
         .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)
         .easing('linear')
         .keyframes(frames.map(({ offset, x, y }) => ({
         offset,
-        transform: `translate3d(${x}px, ${y}px, 0)`,
+        transform: translate(x, y, vertical),
     })));
     const offset = 1 - 200 / duration;
     const selectedBackground = 'var(--ios27-tab-selected-background, rgba(var(--ios-theme-button-color-selected-rgb, var(--ios26-button-color-selected-rgb, var(--ios27-button-color-selected-default-rgb))), 0.095))';
@@ -174,8 +190,8 @@ export const createTabBarReleaseAnimation = (effectElement, target, tap) => {
         { offset: 1, backgroundColor: selectedBackground },
     ]);
     const release = createAnimation().duration(duration).addAnimation([stretch, move, glass, selected]);
-    if (tapElapsed !== undefined) {
-        const width = bar.offsetWidth;
+    if (tapElapsed !== undefined && !vertical) {
+        const width = mainSize(bar, vertical);
         const expansion = box.width - width;
         const peak = Math.max(8.65, expansion);
         const platter = createAnimation()
@@ -236,7 +252,7 @@ export const createPreMoveAnimation = (effectElement, tabSelectedElement, curren
         },
     ]);
 };
-export const createMoveAnimation = (effectElement, detail, tabSelectedElement, animationPosition) => {
+export const createMoveAnimation = (effectElement, detail, tabSelectedElement, animationPosition, vertical = false) => {
     return createAnimation()
         .duration(500)
         .addElement(effectElement)
@@ -247,7 +263,7 @@ export const createMoveAnimation = (effectElement, detail, tabSelectedElement, a
         opacity: '1',
         transform: 'none',
     })
-        .fromTo('transform', `translate3d(${animationPosition.minPositionX}px, ${animationPosition.positionY}px, 0)`, `translate3d(${animationPosition.maxPositionX}px, ${animationPosition.positionY}px, 0)`)
+        .fromTo('transform', translate(animationPosition.minPositionX, animationPosition.positionY, vertical), translate(animationPosition.maxPositionX, animationPosition.positionY, vertical))
         .progressStep(getStep(detail.currentX, animationPosition));
 };
 export const getMoveAnimationKeyframe = (type, scales) => {

package/dist/sheets-of-glass/index.d.ts

@@ -1,3 +1,3 @@
 import { EffectScales, registeredEffect } from './interfaces';
-export declare const registerEffect: (targetElement: HTMLElement, effectTagName: string, selectedClassName: string, scales: EffectScales) => registeredEffect | undefined;
+export declare const registerEffect: (targetElement: HTMLElement, effectTagName: string, selectedClassName: string, scales: EffectScales, vertical?: boolean) => registeredEffect | undefined;
 //# sourceMappingURL=index.d.ts.map

package/dist/sheets-of-glass/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/sheets-of-glass/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAqB,YAAY,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAkBjF,eAAO,MAAM,cAAc,GACzB,eAAe,WAAW,EAC1B,eAAe,MAAM,EACrB,mBAAmB,MAAM,EACzB,QAAQ,YAAY,KACnB,gBAAgB,GAAG,SAqVrB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/sheets-of-glass/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAqB,YAAY,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAmBjF,eAAO,MAAM,cAAc,GACzB,eAAe,WAAW,EAC1B,eAAe,MAAM,EACrB,mBAAmB,MAAM,EACzB,QAAQ,YAAY,EACpB,kBAAgB,KACf,gBAAgB,GAAG,SAqZrB,CAAC"}

package/dist/sheets-of-glass/index.js

@@ -1,10 +1,10 @@
 import { createGesture } from '@ionic/core';
 import { changeSelectedElement, cloneElement, getStep } from '../utils';
 import { isNativeUIShell } from '../native-integration';
-import { createMoveAnimation, createPreMoveAnimation, createTabBarDragAnimation, createTabBarPressAnimation, createTabBarReleaseAnimation, getMoveAnimationKeyframe, getScaleAnimation, } from './animations';
+import { animationRect, createMoveAnimation, createPreMoveAnimation, createTabBarDragAnimation, createTabBarPressAnimation, createTabBarReleaseAnimation, getMoveAnimationKeyframe, getScaleAnimation, } from './animations';
 const GESTURE_NAME = 'ios27-enable-gesture';
 const ANIMATED_NAME = 'ios27-animated';
-export const registerEffect = (targetElement, effectTagName, selectedClassName, scales) => {
+export const registerEffect = (targetElement, effectTagName, selectedClassName, scales, vertical = false) => {
     if (!targetElement.classList.contains('ios')) {
         return undefined;
     }
@@ -24,6 +24,8 @@ export const registerEffect = (targetElement, effectTagName, selectedClassName,
     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;
@@ -98,17 +100,36 @@ export const registerEffect = (targetElement, effectTagName, selectedClassName,
         document.addEventListener('pointercancel', onPointerCancel);
     };
     targetElement.addEventListener('pointerdown', onPointerDown);
+    const onClick = (event) => {
+        if (vertical && tabDragging && event.isTrusted && event.detail > 0) {
+            event.preventDefault();
+            event.stopImmediatePropagation();
+        }
+    };
+    targetElement.addEventListener('click', onClick, true);
+    const axisDetail = (detail) => 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) => {
                 if (effectTagName === 'ion-tab-button' && tabDragging)
-                    onMoveGesture(detail);
+                    onMoveGesture(axisDetail(detail));
                 onEndGesture().then();
             },
         });
@@ -135,25 +156,31 @@ export const registerEffect = (targetElement, effectTagName, selectedClassName,
             return false;
         currentTouchedElement = detail.event.target.closest(effectTagName) || undefined;
         const tabSelectedElement = targetElement.querySelector(`${effectTagName}.${selectedClassName}`);
-        if (currentTouchedElement === undefined || tabSelectedElement === null) {
+        if (currentTouchedElement === undefined ||
+            currentTouchedElement.parentElement !== targetElement ||
+            currentTouchedElement.disabled ||
+            tabSelectedElement === null) {
+            currentTouchedElement = undefined;
             return false;
         }
         selectedElementBeforeGesture = tabSelectedElement;
         if (effectTagName === 'ion-tab-button') {
-            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.progressStart(true, getStep(tabSelectedElement.getBoundingClientRect().left + tabSelectedElement.clientWidth / 2, animationPosition));
-            tabPressAnimation = createTabBarPressAnimation(effectElement, tabSelectedElement, currentTouchedElement, targetElement);
+            moveAnimation = createMoveAnimation(effectElement, detail, tabSelectedElement, animationPosition, vertical);
+            moveAnimation.progressStart(true, getStep(animationRect(tabSelectedElement, vertical).left + animationRect(tabSelectedElement, vertical).width / 2, animationPosition));
+            tabPressAnimation = createTabBarPressAnimation(effectElement, tabSelectedElement, currentTouchedElement, targetElement, vertical);
             tabPressStartedAt = performance.now();
             void tabPressAnimation.play();
             return true;
@@ -187,7 +214,7 @@ export const registerEffect = (targetElement, effectTagName, selectedClassName,
                 return;
             tabDragging = true;
             stopTabPress();
-            tabPressAnimation = createTabBarDragAnimation(effectElement, targetElement, detail.velocityX);
+            tabPressAnimation = createTabBarDragAnimation(effectElement, targetElement, detail.velocityX, vertical);
             void tabPressAnimation.play();
         }
         else if (scaleAnimationPromise === undefined) {
@@ -211,10 +238,22 @@ export const registerEffect = (targetElement, effectTagName, selectedClassName,
             }
         }
         const currentX = detail.currentX;
-        const previousY = targetElement.getBoundingClientRect().top + targetElement.getBoundingClientRect().height / 2;
-        const nextEl = targetElement.getRootNode().elementFromPoint(currentX, previousY);
-        const latestTouchedElement = nextEl?.closest(effectTagName) || undefined;
-        if (latestTouchedElement && currentTouchedElement !== latestTouchedElement) {
+        const previousY = animationRect(targetElement, vertical).top + animationRect(targetElement, vertical).height / 2;
+        const nextEl = targetElement.getRootNode().elementFromPoint(vertical ? previousY : currentX, vertical ? currentX : previousY);
+        let latestTouchedElement = nextEl?.closest(effectTagName) || undefined;
+        if (vertical && effectTagName === 'ion-tab-button') {
+            const bar = targetElement.getBoundingClientRect();
+            const tabs = Array.from(targetElement.querySelectorAll(effectTagName)).filter((tab) => tab.offsetWidth > 0);
+            const distance = (tab) => Math.abs(currentX - (bar.top + tab.offsetTop + tab.offsetHeight / 2));
+            latestTouchedElement =
+                currentX >= bar.top && currentX <= bar.bottom
+                    ? tabs.reduce((closest, tab) => (!closest || distance(tab) < distance(closest) ? tab : closest), undefined)
+                    : undefined;
+        }
+        if (latestTouchedElement &&
+            latestTouchedElement.parentElement === targetElement &&
+            !latestTouchedElement.disabled &&
+            currentTouchedElement !== latestTouchedElement) {
             currentTouchedElement = latestTouchedElement;
             changeSelectedElement(targetElement, currentTouchedElement, effectTagName, selectedClassName);
         }
@@ -263,12 +302,16 @@ export const registerEffect = (targetElement, effectTagName, selectedClassName,
             moveAnimation.destroy();
             moveAnimation = undefined;
             const tabs = Array.from(targetElement.querySelectorAll(effectTagName)).filter((tab) => tab.offsetWidth > 0);
+            if (vertical) {
+                currentTouchedElement.classList.remove('ion-activated');
+                targetElement.classList.remove(ANIMATED_NAME);
+            }
             const releasing = createTabBarReleaseAnimation(effectElement, currentTouchedElement, tapElapsed !== undefined && tapElapsed < 200
                 ? {
                     elapsed: tapElapsed,
                     distance: Math.abs(tabs.indexOf(currentTouchedElement) - tabs.indexOf(selectedElementBeforeGesture)),
                 }
-                : undefined);
+                : undefined, vertical);
             currentTouchedElement.classList.remove('ion-activated');
             releaseAnimation = releasing;
             await releasing.play();
@@ -297,6 +340,7 @@ export const registerEffect = (targetElement, effectTagName, selectedClassName,
             destroyed = true;
             cancelActiveGesture();
             targetElement.removeEventListener('pointerdown', onPointerDown);
+            targetElement.removeEventListener('click', onClick, true);
             targetElement.removeEventListener('nativeUIShellChange', nativeChanged);
             if (gesture) {
                 gesture.destroy();

package/dist/transition/ios.transition.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ios.transition.d.ts","sourceRoot":"","sources":["../../src/transition/ios.transition.ts"],"names":[],"mappings":"AAAA,OAAO,EAAgC,MAAM,EAAE,MAAM,2BAA2B,CAAC;AACjF,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAC7C,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAIjD,OAAO,EAAE,MAAM,EAAE,CAAC;AAElB,MAAM,WAAW,mBAAmB;IAClC,MAAM,EAAE,MAAM,CAAC;CAChB;AAUD,eAAO,MAAM,SAAS,GAAI,QAAQ,OAAO,CAAC,mBAAmB,CAAC,KAAG,IAEhE,CAAC;AAEF,eAAO,MAAM,sBAAsB,EAAE,CAAC,KAAK,EAAE,WAAW,EAAE,IAAI,EAAE,iBAAiB,KAAK,SACnB,CAAC"}
+{"version":3,"file":"ios.transition.d.ts","sourceRoot":"","sources":["../../src/transition/ios.transition.ts"],"names":[],"mappings":"AAAA,OAAO,EAAgC,MAAM,EAAE,MAAM,2BAA2B,CAAC;AACjF,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAC7C,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAIjD,OAAO,EAAE,MAAM,EAAE,CAAC;AAElB,MAAM,WAAW,mBAAmB;IAClC,MAAM,EAAE,MAAM,CAAC;CAChB;AASD,eAAO,MAAM,SAAS,GAAI,QAAQ,OAAO,CAAC,mBAAmB,CAAC,KAAG,IAEhE,CAAC;AAEF,eAAO,MAAM,sBAAsB,EAAE,CAAC,KAAK,EAAE,WAAW,EAAE,IAAI,EAAE,iBAAiB,KAAK,SAErF,CAAC"}

package/dist/transition/ios.transition.js

@@ -1,15 +1,14 @@
 import { createIosTransitionAnimation, shadow } from '@rdlabo/ionic-theme-utils';
 import { getIonPageElement } from './index';
-import { connectNativeUIShellTransition } from '../native-integration';
+import { withNativeUIShellTransition } from '../native-integration/transition';
 export { shadow };
 const transitionConfig = {
     offLeftPercent: 30,
     getIonPageElement,
-    connectNativeUIShellTransition,
     shouldAnimateFixedBackButton: (navEl) => !navEl.closest('ion-app.ios-theme-vertical-bars'),
     radius: 0,
 };
 export const setConfig = (config) => {
     Object.assign(transitionConfig, config);
 };
-export const iosTransitionAnimation = createIosTransitionAnimation(transitionConfig);
+export const iosTransitionAnimation = withNativeUIShellTransition(createIosTransitionAnimation(transitionConfig));

package/dist/vertical-bars.d.ts

@@ -1,4 +1,4 @@
 export { enableVerticalControlArea, setVerticalControlAreaPlacement, IonicNativeUIShell } from './native';
-export { HingeStatus } from './native';
-export type { DeviceLayout, NativeUIShellStatus, NativeUIShellSuspension, VerticalBarEdge, VerticalControlAreaHandle } from './native';
+export { withNativeUIShellTransition } from './native-integration/transition';
+export type { NativeUIShellStatus, NativeUIShellSuspension, VerticalBarEdge, VerticalControlAreaHandle } from './native';
 //# sourceMappingURL=vertical-bars.d.ts.map

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

@@ -1 +1 @@
-{"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,WAAW,EAAE,MAAM,UAAU,CAAC;AACvC,YAAY,EAAE,YAAY,EAAE,mBAAmB,EAAE,uBAAuB,EAAE,eAAe,EAAE,yBAAyB,EAAE,MAAM,UAAU,CAAC"}
+{"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"}

package/dist/vertical-bars.js

@@ -1,2 +1,2 @@
 export { enableVerticalControlArea, setVerticalControlAreaPlacement, IonicNativeUIShell } from './native';
-export { HingeStatus } from './native';
+export { withNativeUIShellTransition } from './native-integration/transition';

package/docs/iphone-duo-with-original-theme.md

@@ -0,0 +1,171 @@
+---
+title: iPhone Duo with your existing theme (experimental)
+---
+
+# iPhone Duo with your existing theme (experimental)
+
+Add a vertical navigation area to your Ionic app while keeping its existing theme. Tabs and supported toolbar actions move to the side of the screen; your content and horizontal controls keep their current appearance. Both Ionic `ios` and `md` modes are supported.
+
+**Try it in Chrome first.** You can preview the layout with Web controls before setting up an iPhone Duo or an iOS build. On supported Capacitor iOS, the same Ionic markup supplies native SwiftUI controls in the system rail.
+
+Available in `1.2.0-0` as an **experimental** feature. APIs and supported behavior may change.
+
+## Try it in your existing Ionic app
+
+### 1. Install and load the standalone stylesheet
+
+This guide assumes an existing Ionic app with Ionic `>=8.8.1 <10` and Capacitor Core `>=8 <9`. Keep your existing Capacitor 8 installation. If your app uses another Capacitor major, migrate its Core, CLI, and platform packages together before following this guide. For a Web-only app without Capacitor, also install `@capacitor/core@^8`; the JavaScript entry point needs it even in Chrome.
+
+```bash
+npm install @rdlabo/ionic-theme-ios27@1.2.0-1
+```
+
+Keep your existing theme imports. Add this to your global Sass file:
+
+```scss
+@use '@rdlabo/ionic-theme-ios27/dist/css/vertical-bars.css';
+```
+
+The standalone JavaScript entry point needs `@capacitor/core` even in Chrome. The iOS 27 theme stylesheets are not required.
+
+### 2. Opt your app into the side layout
+
+Add the class to your existing app root and keep the content inside it:
+
+```html
+<ion-app class="ios-theme-vertical-bars">
+  <!-- Keep your existing pages, tabs, and toolbar controls here. -->
+</ion-app>
+```
+
+The preview reserves `80px` on the physical right. To preview the left side, also add `ios-theme-vertical-bars-left`.
+
+### 3. Connect your navigation animation
+
+Configure `navAnimation` before Ionic initializes. Starting the rail runtime does not register this option. The adapter waits for native control retirement and coordinates swipe progress and cancellation while keeping your existing animation.
+
+#### Keep Ionic's default animation
+
+If you have not configured `navAnimation`, wrap Ionic's standard builders. Select the builder from Ionic's transition `mode` so both `ios` and `md` keep their usual animation:
+
+```ts
+import { iosTransitionAnimation, mdTransitionAnimation, type AnimationBuilder } from '@ionic/core';
+import { withNativeUIShellTransition } from '@rdlabo/ionic-theme-ios27/vertical-bars';
+
+const defaultTransition: AnimationBuilder = (baseEl, opts) =>
+  (opts.mode === 'ios' ? iosTransitionAnimation : mdTransitionAnimation)(baseEl, opts);
+
+const ionicConfig = {
+  navAnimation: withNativeUIShellTransition(defaultTransition),
+};
+```
+
+Merge this option into your existing Ionic configuration before initialization: pass it to Angular's `provideIonicAngular()`, React's `setupIonicReact()`, or Vue's `IonicVue` plugin options. Keep your existing theme stylesheet imports. No iOS 27 theme stylesheet is required.
+
+#### Use this package's iOS animation
+
+If you already use the iOS 27 transition, keep this configuration. It includes the native adapter and excludes the horizontal back-button effect in vertical layouts; no additional wrapper is needed. Importing this JavaScript entry point does not load the theme stylesheets.
+
+```ts
+import { iosTransitionAnimation } from '@rdlabo/ionic-theme-ios27';
+
+const ionicConfig = {
+  navAnimation: iosTransitionAnimation,
+};
+```
+
+Apply this option to your existing iOS-mode configuration and keep your MD configuration.
+
+#### Keep your custom animation
+
+If your app uses another builder for `navAnimation`, wrap it:
+
+```ts
+import type { AnimationBuilder } from '@ionic/core';
+import { withNativeUIShellTransition } from '@rdlabo/ionic-theme-ios27/vertical-bars';
+
+// Pass the animation builder your app already uses.
+const configureNavigation = (existingTransition: AnimationBuilder) => ({
+  navAnimation: withNativeUIShellTransition(existingTransition),
+});
+```
+
+The adapter returns the original `Animation`, preserving its effects, duration, and easing. Use it only for navigation, not modal or popover animations. The builder must return a fresh `Animation` for each navigation; Ionic destroys it after the transition. Keep lifecycle events for control registration and transitions without animation.
+
+The adapter keeps the builder's animation targets, including any horizontal back-button effect. If you need the iOS 27 transition with that effect excluded in vertical layouts, use `iosTransitionAnimation` from `@rdlabo/ionic-theme-ios27` as your `navAnimation` instead. It already includes the adapter, so no wrapper is needed.
+
+`withNativeUIShellTransition()` is available in `1.2.0-1` and later.
+
+### 4. Start the controls after the app root is mounted
+
+Call this once from your application startup after `ion-app` exists in the DOM:
+
+```ts
+import { enableVerticalControlArea } from '@rdlabo/ionic-theme-ios27/vertical-bars';
+
+const rail = await enableVerticalControlArea();
+```
+
+**What you should see:** your existing tab bar moves to the side, and fixed-toolbar buttons with an `ion-icon` or SVG using `slot="icon-only"` appear there too. Content keeps its existing theme and leaves room for the controls. The Web tab rail displays icons; pressing and dragging reveals tab labels.
+
+Use your existing Ionic click handlers, routing, and form associations. All button fills (`default`, `clear`, `solid`, and `outline`) use the same `icon-only` rule, including submit buttons. Actions without that slot remain horizontal. Add `.ios-theme-horizontal-only` to an `ion-buttons` group or individual `ion-button` to keep an action in the horizontal toolbar.
+
+When the application owner is disposed, call `await rail.destroy()` to restore the original controls and release the runtime. If you already use `enableNativeUIShell()`, keep that runtime and follow the [shared placement guide](https://docs.rdlabo.dev/projects/ionic-theme-ios27/docs/iphone-duo#project-controls-into-the-rail).
+
+### If the preview does not appear
+
+| What you see | What to check |
+| --- | --- |
+| No space at the side | Load `vertical-bars.css` and put the class on `ion-app`. |
+| Space appears, but controls stay horizontal | Start `enableVerticalControlArea()` after mounting the app root. Use existing tabs or `slot="icon-only"` actions in a fixed header/footer toolbar. |
+| One action stays horizontal | Check for `slot="icon-only"` on the icon and a fixed toolbar outside scrolling content. Explicitly excluded controls and controls in centered modals stay horizontal; `fill` and `type="submit"` do not prevent movement. See [control requirements](https://docs.rdlabo.dev/projects/ionic-theme-ios27/docs/iphone-duo#toolbar-actions). |
+
+## Connect an iPhone Duo
+
+Install [`@erkamyaman/capacitor-foldable`](https://github.com/erkamyaman/capacitor-foldable) for device state:
+
+```bash
+npm install @erkamyaman/capacitor-foldable
+npx cap sync ios
+```
+
+Use Capacitor 8.5 or later and build with Xcode 27.1 or newer for actual rail placement and hinge posture on iOS 27.1. Native UI Shell uses Swift Package Manager; existing CocoaPods apps can follow [Native UI Shell setup](https://docs.rdlabo.dev/projects/ionic-theme-ios27/docs/native-ui-shell#enable-the-shell). Keep this package's `vertical-bars.css`; the device plugin's `ionic-tabs.css` is not needed with our rail projection.
+
+Replace the browser-only startup above with this after `ion-app` is mounted:
+
+```ts
+import { Capacitor, type PluginListenerHandle } from '@capacitor/core';
+import { enableVerticalControlArea } from '@rdlabo/ionic-theme-ios27/vertical-bars';
+import { Foldable } from '@erkamyaman/capacitor-foldable';
+
+const rail = await enableVerticalControlArea();
+let layoutListener: PluginListenerHandle | undefined;
+
+if (Capacitor.getPlatform() === 'ios') {
+  layoutListener = await Foldable.addListener('barPlacementChange', ({ verticalBarEdge, inset }) =>
+    rail.setPlacement({ edge: verticalBarEdge, nativeEdge: verticalBarEdge, inset }),
+  );
+  const { verticalBarEdge, inset } = await Foldable.getBarPlacement();
+  rail.setPlacement({ edge: verticalBarEdge, nativeEdge: verticalBarEdge, inset });
+}
+
+// Call when the application owner is disposed.
+const stopVerticalArea = async () => {
+  await layoutListener?.remove();
+  await rail.destroy();
+};
+```
+
+`setPlacement()` resolves the logical edge through the document direction. Pass Foldable’s measured `inset` with the reported edge so the theme reserves the actual bar width and follows width changes. An inset of `0` clears the explicit width; manually requested rails then use the theme’s CSS safe-area rules. A `null` edge restores the ordinary layout. Devices without a reported rail return `null`, so this example restores the ordinary layout there. On iOS 27.1 or later, Foldable can infer Duo bar placement from safe-area insets when the app is built with an older SDK. To deliberately request a rail when the plugin reports no edge, have your application choose a fixed edge with `rail.setPlacement('trailing')` instead of applying that null placement. This simulates the layout; it does not provide a real system rail or hinge measurements.
+
+On supported iOS, controls in the rail use the system SwiftUI appearance; your custom Web styling still applies to ordinary content and horizontal controls. Web and Android use Web clones.
+
+## Use hinge posture without projecting controls
+
+If your existing theme needs only a posture-driven split pane or a layout switch, do not start a projection runtime or add `.ios-theme-vertical-bars`. Use `Foldable.getFoldState()` and `foldStateChange` directly, removing the listener when finished. There is no separate start/stop monitoring call.
+
+See [Read the device layout](https://docs.rdlabo.dev/projects/ionic-theme-ios27/docs/iphone-duo#read-the-device-layout) for the subscription example, null values, and monitoring lifetime. See [Adapt the split pane](https://docs.rdlabo.dev/projects/ionic-theme-ios27/docs/iphone-duo#adapt-the-split-pane) for the opt-in width rules and half-open state.
+
+## Shared layout rules and API
+
+Safe-area handling, overlays, RTL, control eligibility, Web simulation, and the handle API are documented in [iPhone Duo support](https://docs.rdlabo.dev/projects/ionic-theme-ios27/docs/iphone-duo). Those rules apply to this standalone setup too.