@rdlabo/ionic-theme-ios27 1.2.0-1 → 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/vertical-bars.d.ts

@@ -1,5 +1,4 @@
 export { enableVerticalControlArea, setVerticalControlAreaPlacement, IonicNativeUIShell } from './native';
-export { HingeStatus } from './native';
 export { withNativeUIShellTransition } from './native-integration/transition';
-export type { DeviceLayout, NativeUIShellStatus, NativeUIShellSuspension, VerticalBarEdge, VerticalControlAreaHandle } from './native';
+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,OAAO,EAAE,2BAA2B,EAAE,MAAM,iCAAiC,CAAC;AAC9E,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,3 +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

@@ -17,7 +17,7 @@ Available in `1.2.0-0` as an **experimental** feature. APIs and supported behavi
 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-0
+npm install @rdlabo/ionic-theme-ios27@1.2.0-1
 ```
 
 Keep your existing theme imports. Add this to your global Sass file:
@@ -62,9 +62,23 @@ const ionicConfig = {
 
 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 already configures `navAnimation`, wrap that builder instead:
+If your app uses another builder for `navAnimation`, wrap it:
 
 ```ts
 import type { AnimationBuilder } from '@ionic/core';
@@ -80,7 +94,7 @@ The adapter returns the original `Animation`, preserving its effects, duration,
 
 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.
 
-The adapter is available after `1.2.0-0`. With `1.2.0-0`, use the package's `iosTransitionAnimation` for iOS mode and keep your existing MD configuration.
+`withNativeUIShellTransition()` is available in `1.2.0-1` and later.
 
 ### 4. Start the controls after the app root is mounted
 
@@ -92,9 +106,9 @@ import { enableVerticalControlArea } from '@rdlabo/ionic-theme-ios27/vertical-ba
 const rail = await enableVerticalControlArea();
 ```
 
-**What you should see:** your existing tab bar moves to the side, and supported icon-based fixed-toolbar actions 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.
+**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 and routing. Text-only toolbar actions remain horizontal. Add `.ios-theme-horizontal-only` to an `ion-buttons` group or individual `ion-button` to keep an action in the horizontal toolbar.
+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).
 
@@ -103,28 +117,36 @@ When the application owner is disposed, call `await rail.destroy()` to restore t
 | 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 supported icon-based actions in a fixed toolbar. |
-| One action stays horizontal | Text-only actions, custom fills, and explicitly excluded controls keep their original presentation. See [control requirements](https://docs.rdlabo.dev/projects/ionic-theme-ios27/docs/iphone-duo#project-controls-into-the-rail). |
+| 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
 
-For Capacitor iOS, run `npx cap sync ios`. Build with Xcode 27.1 or newer and link against the iOS 27.1 SDK or later to receive the actual rail edge, safe-area inset, and hinge posture. The plugin 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).
+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, IonicNativeUIShell } from '@rdlabo/ionic-theme-ios27/vertical-bars';
+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') {
-  // The runtime already monitors device layout; only subscribe.
-  layoutListener = await IonicNativeUIShell.addListener('deviceLayoutChange', ({ placement }) =>
-    rail.setPlacement(placement),
+  layoutListener = await Foldable.addListener('barPlacementChange', ({ verticalBarEdge, inset }) =>
+    rail.setPlacement({ edge: verticalBarEdge, nativeEdge: verticalBarEdge, inset }),
   );
-  rail.setPlacement((await IonicNativeUIShell.getDeviceLayout()).placement);
+  const { verticalBarEdge, inset } = await Foldable.getBarPlacement();
+  rail.setPlacement({ edge: verticalBarEdge, nativeEdge: verticalBarEdge, inset });
 }
 
 // Call when the application owner is disposed.
@@ -134,13 +156,13 @@ const stopVerticalArea = async () => {
 };
 ```
 
-`setPlacement()` applies the measured inset and resolves the logical edge through the document direction. A `null` edge restores the ordinary layout. Devices without a rail and apps built with older SDKs report `null`, so this example restores the ordinary layout there. To deliberately preview a DOM rail on such an iOS build, 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.
+`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 `getDeviceLayout()` and `deviceLayoutChange` directly, pairing `startDeviceLayoutMonitoring()` with `stopDeviceLayoutMonitoring()` and removing the listener when finished.
+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.