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

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/tab-bar-searchable/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/tab-bar-searchable/index.ts"],"names":[],"mappings":"AACA,OAAO,EAQL,KAAK,wBAAwB,EAE9B,MAAM,2BAA2B,CAAC;AAiBnC,OAAO,EACL,oBAAoB,EACpB,KAAK,wBAAwB,EAC7B,KAAK,oBAAoB,EACzB,KAAK,YAAY,EACjB,KAAK,iBAAiB,GACvB,MAAM,2BAA2B,CAAC;AAqBnC,eAAO,MAAM,sBAAsB,GACjC,WAAW,WAAW,EACtB,cAAc,WAAW,EACzB,WAAW,WAAW,KACrB,wBAwDF,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/tab-bar-searchable/index.ts"],"names":[],"mappings":"AACA,OAAO,EAQL,KAAK,wBAAwB,EAE9B,MAAM,2BAA2B,CAAC;AAiBnC,OAAO,EACL,oBAAoB,EACpB,KAAK,wBAAwB,EAC7B,KAAK,oBAAoB,EACzB,KAAK,YAAY,EACjB,KAAK,iBAAiB,GACvB,MAAM,2BAA2B,CAAC;AAqBnC,eAAO,MAAM,sBAAsB,GACjC,WAAW,WAAW,EACtB,cAAc,WAAW,EACzB,WAAW,WAAW,KACrB,wBA+EF,CAAC"}

package/dist/tab-bar-searchable/index.js

@@ -10,11 +10,14 @@ export const attachTabBarSearchable = (ionTabBar, ionFabButton, ionFooter) => {
     }
     ionFooter.style.pointerEvents = 'none';
     ionFooter.style.opacity = '0';
+    ionFooter.querySelector('ion-buttons[slot=start]')?.classList.add('ios-theme-horizontal-only');
     const nativeSearch = registerNativeSearch(ionTabBar, ionFabButton, ionFooter);
     let searchableEventCache;
     let resumeNative;
     let nativeEntry = false;
     let nativeRequest = 0;
+    let verticalSearch = false;
+    let tabVisibilityObserver;
     return async (event, type) => {
         const selector = type === TabBarSearchableType.Enter ? 'ion-fab-button' : 'ion-buttons[slot=start] ion-button';
         if (!event.target?.closest(selector))
@@ -37,11 +40,28 @@ export const attachTabBarSearchable = (ionTabBar, ionFabButton, ionFooter) => {
             return;
         }
         if (type === TabBarSearchableType.Enter) {
-            resumeNative ?? (resumeNative = await suspendNativeUIShell([ionTabBar, ionFooter, ionFabButton.closest('ion-fab') ?? ionFabButton]));
+            verticalSearch = !!ionTabBar.closest('ion-app.ios-theme-vertical-bars');
+            if (verticalSearch) {
+                const keepTabsVisible = () => {
+                    if (ionTabBar.classList.contains('tab-bar-hidden') && ionTabBar.closest('ion-app.ios-theme-vertical-bars')) {
+                        ionTabBar.classList.remove('tab-bar-hidden');
+                    }
+                };
+                tabVisibilityObserver?.disconnect();
+                tabVisibilityObserver = new MutationObserver(keepTabsVisible);
+                tabVisibilityObserver.observe(ionTabBar, { attributes: true, attributeFilter: ['class'] });
+                keepTabsVisible();
+            }
+            resumeNative ?? (resumeNative = await suspendNativeUIShell([
+                ...(verticalSearch ? [] : [ionTabBar]),
+                ionFooter,
+                ionFabButton.closest('ion-fab') ?? ionFabButton,
+            ]));
             try {
-                searchableEventCache = await enterEvent(event, ionTabBar, ionFabButton, ionFooter);
+                searchableEventCache = await enterEvent(event, ionTabBar, ionFabButton, ionFooter, verticalSearch);
             }
             catch (error) {
+                tabVisibilityObserver?.disconnect();
                 resumeNative();
                 resumeNative = undefined;
                 throw error;
@@ -49,10 +69,11 @@ export const attachTabBarSearchable = (ionTabBar, ionFabButton, ionFooter) => {
         }
         else if (searchableEventCache !== undefined) {
             try {
-                await leaveEvent(event, searchableEventCache, ionTabBar, ionFabButton, ionFooter);
+                await leaveEvent(event, searchableEventCache, ionTabBar, ionFabButton, ionFooter, verticalSearch);
                 searchableEventCache = undefined;
             }
             finally {
+                tabVisibilityObserver?.disconnect();
                 resumeNative?.();
                 resumeNative = undefined;
             }
@@ -62,7 +83,7 @@ export const attachTabBarSearchable = (ionTabBar, ionFabButton, ionFooter) => {
         }
     };
 };
-const enterEvent = async (event, ionTabBar, ionFabButton, ionFooter) => {
+const enterEvent = async (event, ionTabBar, ionFabButton, ionFooter, verticalSearch) => {
     if (!event.target?.closest('ion-fab-button')) {
         throw throwErrorByFailedClickElement('ion-fab-button');
     }
@@ -71,10 +92,13 @@ const enterEvent = async (event, ionTabBar, ionFabButton, ionFooter) => {
     const colorSelected = references.selectedTabButton
         ? getComputedStyle(references.selectedTabButton).getPropertyValue('--color-selected').trim()
         : '';
-    const effectAnimation = createEffectAnimation(references, sizes);
+    if (verticalSearch)
+        references.closeButtonIcon.setAttribute('name', 'close');
+    const tabAnimations = verticalSearch
+        ? []
+        : [createTabBarAnimation(ionTabBar, references, sizes), createEffectAnimation(references, sizes)];
     const searchContainerAnimation = createSearchContainerAnimation(references, sizes);
     const closeButtonsAnimation = createCloseButtonsAnimation(references);
-    const tabBarAnimation = createTabBarAnimation(ionTabBar, references, sizes);
     const fabButtonAnimation = createFabButtonAnimation(ionFabButton);
     await createAnimation()
         .delay(ANIMATION_DELAY_BASE)
@@ -83,22 +107,26 @@ const enterEvent = async (event, ionTabBar, ionFabButton, ionFooter) => {
         .addElement(ionFooter)
         .afterAddWrite(() => (ionFooter.style.pointerEvents = 'auto'))
         .fromTo('opacity', '0.8', '1')
-        .addAnimation([tabBarAnimation, fabButtonAnimation, searchContainerAnimation, effectAnimation, closeButtonsAnimation])
+        .addAnimation([...tabAnimations, fabButtonAnimation, searchContainerAnimation, closeButtonsAnimation])
         .play();
     return {
         elementSizes: sizes,
         colorSelected,
     };
 };
-const leaveEvent = async (event, searchableEventCache, ionTabBar, ionFabButton, ionFooter) => {
+const leaveEvent = async (event, searchableEventCache, ionTabBar, ionFabButton, ionFooter, verticalSearch) => {
     if (!event.target?.closest('ion-buttons[slot=start] ion-button')) {
         throw throwErrorByFailedClickElement('ion-buttons[slot=start] ion-button');
     }
     const references = getElementReferences(ionTabBar, ionFooter);
-    const effectAnimation = createReverseEffectAnimation(references, searchableEventCache.elementSizes, searchableEventCache.colorSelected);
+    const tabAnimations = verticalSearch
+        ? []
+        : [
+            createReverseTabBarAnimation(ionTabBar, references, searchableEventCache.elementSizes),
+            createReverseEffectAnimation(references, searchableEventCache.elementSizes, searchableEventCache.colorSelected),
+        ];
     const searchContainerAnimation = createReverseSearchContainerAnimation(references, searchableEventCache.elementSizes);
     const closeButtonsAnimation = createReverseCloseButtonsAnimation(references);
-    const tabBarAnimation = createReverseTabBarAnimation(ionTabBar, references, searchableEventCache.elementSizes);
     const fabButtonAnimation = createReverseFabButtonAnimation(ionFabButton, searchableEventCache.elementSizes);
     await createAnimation()
         .delay(ANIMATION_DELAY_BASE)
@@ -107,6 +135,6 @@ const leaveEvent = async (event, searchableEventCache, ionTabBar, ionFabButton,
         .addElement(ionFooter)
         .afterAddWrite(() => (ionFooter.style.pointerEvents = 'none'))
         .fromTo('opacity', '1', '0')
-        .addAnimation([tabBarAnimation, fabButtonAnimation, searchContainerAnimation, effectAnimation, closeButtonsAnimation])
+        .addAnimation([...tabAnimations, fabButtonAnimation, searchContainerAnimation, closeButtonsAnimation])
         .play();
 };

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';