@rdlabo/ionic-theme-ios26 1.0.5 → 1.1.0

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

@@ -0,0 +1,97 @@
+import { createAnimation } from '@ionic/core';
+import { getStep } from '../utils';
+export const getScaleAnimation = (effectElement) => {
+    return createAnimation().addElement(effectElement.shadowRoot.querySelector('[part="native"]')).easing('ease-out');
+};
+export const createPreMoveAnimation = (effectElement, tabSelectedElement, currentTouchedElement, animationPosition) => {
+    const diff = Math.max(Math.abs(tabSelectedElement.getBoundingClientRect().left - currentTouchedElement.getBoundingClientRect().left), 120);
+    return createAnimation()
+        .duration(diff * 1.8)
+        .easing('ease-out')
+        .addElement(effectElement)
+        .beforeStyles({
+        width: `${tabSelectedElement.clientWidth}px`,
+        height: `${tabSelectedElement.clientHeight}px`,
+        display: 'block',
+        opacity: '1',
+        transform: 'none',
+    })
+        .keyframes([
+        {
+            offset: 0,
+            transform: `translate3d(${tabSelectedElement.getBoundingClientRect().left}px,  ${animationPosition.positionY}px, 0)`,
+        },
+        {
+            offset: 1,
+            transform: `translate3d(${currentTouchedElement.getBoundingClientRect().left}px,  ${animationPosition.positionY}px, 0)`,
+        },
+    ]);
+};
+export const createMoveAnimation = (effectElement, detail, tabSelectedElement, animationPosition) => {
+    return createAnimation()
+        .duration(500)
+        .addElement(effectElement)
+        .beforeStyles({
+        width: `${tabSelectedElement.clientWidth}px`,
+        height: `${tabSelectedElement.clientHeight}px`,
+        display: 'block',
+        opacity: '1',
+        transform: 'none',
+    })
+        .fromTo('transform', `translate3d(${animationPosition.minPositionX}px, ${animationPosition.positionY}px, 0)`, `translate3d(${animationPosition.maxPositionX}px, ${animationPosition.positionY}px, 0)`)
+        .progressStep(getStep(detail.currentX, animationPosition));
+};
+export const getMoveAnimationKeyframe = (type, scales) => {
+    return {
+        moveRight: [
+            {
+                offset: 0,
+                transform: scales.large,
+            },
+            {
+                offset: 0.4,
+                transform: scales.small,
+            },
+            {
+                offset: 0.75,
+                transform: scales.xlarge,
+            },
+            {
+                offset: 1,
+                transform: scales.large,
+            },
+        ],
+        moveLeft: [
+            {
+                offset: 0,
+                transform: scales.large,
+            },
+            {
+                offset: 0.1,
+                transform: scales.xlarge,
+            },
+            {
+                offset: 0.6,
+                transform: scales.small,
+            },
+            {
+                offset: 1,
+                transform: scales.large,
+            },
+        ],
+        slowly: [
+            {
+                offset: 0,
+                transform: scales.large,
+            },
+            {
+                offset: 0.4,
+                transform: scales.medium,
+            },
+            {
+                offset: 1,
+                transform: scales.large,
+            },
+        ],
+    }[type];
+};

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

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

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

@@ -0,0 +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;AAUjF,eAAO,MAAM,cAAc,GACzB,eAAe,WAAW,EAC1B,eAAe,MAAM,EACrB,mBAAmB,MAAM,EACzB,QAAQ,YAAY,KACnB,gBAAgB,GAAG,SAyLrB,CAAC"}

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

@@ -0,0 +1,160 @@
+import { createGesture } from '@ionic/core';
+import { changeSelectedElement, cloneElement, getStep } from '../utils';
+import { createMoveAnimation, createPreMoveAnimation, getMoveAnimationKeyframe, getScaleAnimation } from './animations';
+const GESTURE_NAME = 'ios26-enable-gesture';
+const ANIMATED_NAME = 'ios26-animated';
+export const registerEffect = (targetElement, effectTagName, selectedClassName, scales) => {
+    if (!targetElement.classList.contains('ios')) {
+        return undefined;
+    }
+    let gesture;
+    let moveAnimation;
+    let currentTouchedElement;
+    let clearActivatedTimer;
+    let animationPosition = undefined;
+    let scaleAnimationPromise;
+    let startAnimationPromise;
+    let maxVelocity = 0;
+    const effectElement = cloneElement(effectTagName);
+    const onPointerDown = () => {
+        clearActivated();
+        gesture.destroy();
+        createAnimationGesture();
+    };
+    const onPointerUp = (event) => {
+        clearActivatedTimer = setTimeout(async () => {
+            await onEndGesture();
+            gesture.destroy();
+            createAnimationGesture();
+        });
+    };
+    targetElement.addEventListener('pointerdown', onPointerDown);
+    targetElement.addEventListener('pointerup', onPointerUp);
+    const createAnimationGesture = () => {
+        targetElement.classList.add(GESTURE_NAME);
+        gesture = createGesture({
+            el: targetElement,
+            threshold: 0,
+            gestureName: `${GESTURE_NAME}_${effectTagName}_${crypto.randomUUID()}`,
+            onStart: (event) => onStartGesture(event),
+            onMove: (event) => onMoveGesture(event),
+            onEnd: () => {
+                onEndGesture().then();
+            },
+        });
+        gesture.enable(true);
+    };
+    createAnimationGesture();
+    const clearActivated = () => {
+        if (!currentTouchedElement) {
+            return;
+        }
+        currentTouchedElement.click();
+        currentTouchedElement?.classList.remove('ion-activated');
+        currentTouchedElement = undefined;
+        effectElement.style.display = 'none';
+        maxVelocity = 0;
+        targetElement.classList.remove(ANIMATED_NAME);
+    };
+    const onStartGesture = (detail) => {
+        currentTouchedElement = detail.event.target.closest(effectTagName) || undefined;
+        const tabSelectedElement = targetElement.querySelector(`${effectTagName}.${selectedClassName}`);
+        if (currentTouchedElement === undefined || tabSelectedElement === null) {
+            return false;
+        }
+        animationPosition = {
+            minPositionX: targetElement.getBoundingClientRect().left,
+            maxPositionX: targetElement.getBoundingClientRect().right - tabSelectedElement.clientWidth,
+            width: tabSelectedElement.clientWidth,
+            positionY: tabSelectedElement.getBoundingClientRect().top,
+        };
+        targetElement.classList.add(ANIMATED_NAME);
+        changeSelectedElement(targetElement, currentTouchedElement, effectTagName, selectedClassName);
+        startAnimationPromise = (() => {
+            if (tabSelectedElement === currentTouchedElement) {
+                return new Promise((resolve) => resolve());
+            }
+            else {
+                const preMoveAnimation = createPreMoveAnimation(effectElement, tabSelectedElement, currentTouchedElement, animationPosition);
+                return preMoveAnimation.play().finally(() => preMoveAnimation.destroy());
+            }
+        })();
+        startAnimationPromise.then(() => {
+            moveAnimation = createMoveAnimation(effectElement, detail, tabSelectedElement, animationPosition);
+            moveAnimation.progressStart(true, getStep(currentTouchedElement.getBoundingClientRect().left + currentTouchedElement.clientWidth / 2, animationPosition));
+        });
+        getScaleAnimation(effectElement).duration(200).to('opacity', 1).to('transform', scales.large).play();
+        return true;
+    };
+    const onMoveGesture = (detail) => {
+        if (currentTouchedElement === undefined || !moveAnimation) {
+            return false;
+        }
+        if (scaleAnimationPromise === undefined) {
+            if (Math.abs(detail.velocityX) > maxVelocity) {
+                maxVelocity = Math.abs(detail.velocityX);
+            }
+            if (Math.abs(detail.velocityX) > 0.2) {
+                scaleAnimationPromise = getScaleAnimation(effectElement)
+                    .duration(720)
+                    .keyframes(getMoveAnimationKeyframe('slowly', scales))
+                    .play()
+                    .finally(() => (scaleAnimationPromise = undefined));
+            }
+            if (maxVelocity > 0.2 && Math.abs(detail.velocityX) < 0.15 && Math.abs(detail.startX - detail.currentX) > 100) {
+                scaleAnimationPromise = getScaleAnimation(effectElement)
+                    .duration(720)
+                    .keyframes(getMoveAnimationKeyframe(detail.velocityX > 0 ? 'moveRight' : 'moveLeft', scales))
+                    .play()
+                    .finally(() => (scaleAnimationPromise = undefined));
+                maxVelocity = 0;
+            }
+        }
+        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) {
+            currentTouchedElement = latestTouchedElement;
+            changeSelectedElement(targetElement, currentTouchedElement, effectTagName, selectedClassName);
+        }
+        moveAnimation.progressStep(getStep(detail.currentX, animationPosition));
+        return true;
+    };
+    const onEndGesture = async () => {
+        if (clearActivatedTimer !== undefined) {
+            clearTimeout(clearActivatedTimer);
+            clearActivatedTimer = undefined;
+        }
+        if (startAnimationPromise) {
+            await startAnimationPromise;
+        }
+        if (currentTouchedElement === undefined || !moveAnimation) {
+            return false;
+        }
+        setTimeout(() => {
+            const targetX = currentTouchedElement.getBoundingClientRect().left + currentTouchedElement.clientWidth / 2;
+            const step = getStep(targetX, animationPosition);
+            moveAnimation.progressStep(step);
+        });
+        await getScaleAnimation(effectElement).duration(120).to('transform', `scale(1, 0.92)`).play();
+        moveAnimation.destroy();
+        clearActivated();
+        return true;
+    };
+    return {
+        destroy: () => {
+            targetElement.removeEventListener('pointerdown', onPointerDown);
+            targetElement.removeEventListener('pointerup', onPointerUp);
+            if (clearActivatedTimer !== undefined) {
+                clearTimeout(clearActivatedTimer);
+                clearActivatedTimer = undefined;
+            }
+            clearActivated();
+            if (gesture) {
+                gesture.destroy();
+            }
+            targetElement.classList.remove(GESTURE_NAME);
+        },
+    };
+};

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

@@ -0,0 +1,16 @@
+export interface EffectScales {
+    small: string;
+    medium: string;
+    large: string;
+    xlarge: string;
+}
+export interface registeredEffect {
+    destroy: () => void;
+}
+export interface AnimationPosition {
+    minPositionX: number;
+    maxPositionX: number;
+    width: number;
+    positionY: number;
+}
+//# sourceMappingURL=interfaces.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../src/sheets-of-glass/interfaces.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,gBAAgB;IAC/B,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,MAAM,WAAW,iBAAiB;IAChC,YAAY,EAAE,MAAM,CAAC;IACrB,YAAY,EAAE,MAAM,CAAC;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,MAAM,CAAC;CACnB"}

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

@@ -0,0 +1 @@
+export {};

package/dist/utils.d.ts

@@ -1,3 +1,7 @@
+import { AnimationPosition } from './sheets-of-glass/interfaces';
+export declare const getElementRoot: (el: HTMLElement, fallback?: HTMLElement) => HTMLElement | ShadowRoot;
+export declare const raf: (h: FrameRequestCallback) => any;
 export declare const cloneElement: (tagName: string) => HTMLElement;
-export declare const getTransform: (detailCurrentX: number, tabEffectElY: number, tabSelectedActual: Element) => string;
+export declare const getStep: (targetX: number, animationPosition: AnimationPosition) => number;
+export declare const changeSelectedElement: (targetElement: HTMLElement, selectedElement: HTMLElement, effectTagName: string, selectedClassName: string) => void;
 //# sourceMappingURL=utils.d.ts.map

package/dist/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../src/utils.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,YAAY,GAAI,SAAS,MAAM,KAAG,WAY9C,CAAC;AAEF,eAAO,MAAM,YAAY,GAAI,gBAAgB,MAAM,EAAE,cAAc,MAAM,EAAE,mBAAmB,OAAO,KAAG,MAavG,CAAC"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../src/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,8BAA8B,CAAC;AAKjE,eAAO,MAAM,cAAc,GAAI,IAAI,WAAW,EAAE,WAAU,WAAgB,6BAEzE,CAAC;AAEF,eAAO,MAAM,GAAG,GAAI,GAAG,oBAAoB,QAQ1C,CAAC;AAEF,eAAO,MAAM,YAAY,GAAI,SAAS,MAAM,KAAG,WAY9C,CAAC;AAEF,eAAO,MAAM,OAAO,GAAI,SAAS,MAAM,EAAE,mBAAmB,iBAAiB,WAQ5E,CAAC;AAEF,eAAO,MAAM,qBAAqB,GAChC,eAAe,WAAW,EAC1B,iBAAiB,WAAW,EAC5B,eAAe,MAAM,EACrB,mBAAmB,MAAM,KACxB,IAMF,CAAC"}

package/dist/utils.js

@@ -1,3 +1,15 @@
+export const getElementRoot = (el, fallback = el) => {
+    return el.shadowRoot || fallback;
+};
+export const raf = (h) => {
+    if (typeof __zone_symbol__requestAnimationFrame === 'function') {
+        return __zone_symbol__requestAnimationFrame(h);
+    }
+    if (typeof requestAnimationFrame === 'function') {
+        return requestAnimationFrame(h);
+    }
+    return setTimeout(h);
+};
 export const cloneElement = (tagName) => {
     const getCachedEl = document.querySelector(`${tagName}.ion-cloned-element`);
     if (getCachedEl !== null) {
@@ -9,16 +21,19 @@ export const cloneElement = (tagName) => {
     document.body.appendChild(clonedEl);
     return clonedEl;
 };
-export const getTransform = (detailCurrentX, tabEffectElY, tabSelectedActual) => {
-    const diff = -2;
-    const currentX = detailCurrentX - tabSelectedActual.clientWidth / 2;
-    const maxLeft = tabSelectedActual.getBoundingClientRect().left + diff;
-    const maxRight = tabSelectedActual.getBoundingClientRect().right - diff - tabSelectedActual.clientWidth;
-    if (maxLeft < currentX && currentX < maxRight) {
-        return `translate3d(${currentX}px, ${tabEffectElY}px, 0)`;
-    }
-    if (maxLeft > currentX) {
-        return `translate3d(${maxLeft}px, ${tabEffectElY}px, 0)`;
+export const getStep = (targetX, animationPosition) => {
+    if (animationPosition === undefined) {
+        return 0;
     }
-    return `translate3d(${maxRight}px, ${tabEffectElY}px, 0)`;
+    const currentX = targetX - animationPosition.width / 2;
+    let progress = (currentX - animationPosition.minPositionX) / (animationPosition.maxPositionX - animationPosition.minPositionX);
+    progress = Math.max(0, Math.min(1, progress));
+    return progress;
+};
+export const changeSelectedElement = (targetElement, selectedElement, effectTagName, selectedClassName) => {
+    targetElement.querySelectorAll(effectTagName).forEach((element) => {
+        element.classList.remove(selectedClassName);
+        element.classList.remove('ion-activated');
+    });
+    selectedElement.classList.add(selectedClassName, 'ion-activated');
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rdlabo/ionic-theme-ios26",
-  "version": "1.0.5",
+  "version": "1.1.0",
   "description": "iOS26 Theme for Ionic Framework",
   "main": "./dist/index.js",
   "module": "./dist/index.js",

package/src/index.ts

@@ -1,6 +1,8 @@
-import { registeredEffect } from './gestures/interfaces';
-import { registerEffect } from './gestures';
-export * from './gestures/interfaces';
+import { registeredEffect } from './sheets-of-glass/interfaces';
+import { registerEffect } from './sheets-of-glass';
+export * from './sheets-of-glass/interfaces';
+export { iosEnterAnimation as popoverEnterAnimation } from './popover/animations/ios.enter';
+export { iosLeaveAnimation as popoverLeaveAnimation } from './popover/animations/ios.leave';
 
 export const registerTabBarEffect = (targetElement: HTMLElement): registeredEffect | undefined => {
   return registerEffect(targetElement, 'ion-tab-button', 'tab-selected', {

package/src/popover/animations/ios.enter.ts

@@ -0,0 +1,176 @@
+import { createAnimation, isPlatform } from '@ionic/core';
+import type { Animation } from '@ionic/core/dist/types/utils/animation/animation-interface';
+import { getElementRoot } from '../../utils';
+import { calculateWindowAdjustment, getArrowDimensions, getPopoverDimensions, getPopoverPosition, shouldShowArrow } from '../utils';
+
+const POPOVER_IOS_BODY_PADDING = 5;
+export const POPOVER_IOS_BODY_MARGIN = 8;
+
+/**
+ * iOS Popover Enter Animation
+ */
+// TODO(FW-2832): types
+export const iosEnterAnimation = (baseEl: HTMLElement, opts?: any): Animation => {
+  const { event: ev, size, trigger, reference, side, align } = opts;
+  const doc = baseEl.ownerDocument as any;
+  const isRTL = doc.dir === 'rtl';
+  const bodyWidth = doc.defaultView.innerWidth;
+  const bodyHeight = doc.defaultView.innerHeight;
+
+  const root = getElementRoot(baseEl);
+  const contentEl = root.querySelector('.popover-content') as HTMLElement;
+  const arrowEl = root.querySelector('.popover-arrow') as HTMLElement | null;
+
+  const referenceSizeEl = trigger || ev?.detail?.ionShadowTarget || ev?.target;
+  const { contentWidth, contentHeight } = getPopoverDimensions(size, contentEl, referenceSizeEl);
+  const { arrowWidth, arrowHeight } = getArrowDimensions(arrowEl);
+
+  const isReplace = ((): boolean => {
+    if (!['ion-button', 'ion-buttons'].includes(referenceSizeEl.localName)) {
+      return false;
+    }
+    if (referenceSizeEl.classList.contains('ios26-disabled')) {
+      return false;
+    }
+    return true;
+  })();
+
+  const defaultPosition = {
+    top: bodyHeight / 2 - contentHeight / 2,
+    left: bodyWidth / 2 - contentWidth / 2,
+    originX: isRTL ? 'right' : 'left',
+    originY: 'top',
+  };
+
+  const results = getPopoverPosition(
+    isRTL,
+    contentWidth,
+    contentHeight,
+    arrowWidth,
+    arrowHeight,
+    reference,
+    side,
+    align,
+    defaultPosition,
+    trigger,
+    ev,
+  );
+
+  const padding = size === 'cover' ? 0 : POPOVER_IOS_BODY_PADDING;
+  const margin = size === 'cover' ? 0 : 25;
+
+  const { originX, originY, top, left, bottom, checkSafeAreaLeft, checkSafeAreaRight, arrowTop, arrowLeft, addPopoverBottomClass } =
+    calculateWindowAdjustment(
+      side,
+      results.top,
+      results.left,
+      padding,
+      bodyWidth,
+      bodyHeight,
+      contentWidth,
+      contentHeight,
+      margin,
+      results.originX,
+      results.originY,
+      results.referenceCoordinates,
+      results.arrowTop,
+      results.arrowLeft,
+      arrowHeight,
+      referenceSizeEl.getBoundingClientRect(),
+      isReplace,
+    );
+
+  const baseAnimation = createAnimation();
+  const backdropAnimation = createAnimation();
+  const contentAnimation = createAnimation();
+  const targetAnimation = createAnimation();
+
+  backdropAnimation
+    .delay(100)
+    .duration(300)
+    .addElement(root.querySelector('ion-backdrop')!)
+    .fromTo('opacity', 0.01, 'var(--backdrop-opacity)')
+    .beforeStyles({
+      'pointer-events': 'none',
+    })
+    .afterClearStyles(['pointer-events']);
+
+  // In Chromium, if the wrapper animates, the backdrop filter doesn't work.
+  // The Chromium team stated that this behavior is expected and not a bug. The element animating opacity creates a backdrop root for the backdrop-filter.
+  // To get around this, instead of animating the wrapper, animate both the arrow and content.
+  // https://bugs.chromium.org/p/chromium/issues/detail?id=1148826
+  contentAnimation
+    .easing('cubic-bezier(0, 1, 0.22, 1)')
+    .delay(100)
+    .duration(400)
+    .addElement(root.querySelector('.popover-arrow')!)
+    .addElement(root.querySelector('.popover-content')!)
+    .beforeStyles({ 'transform-origin': `${originY} ${originX}` })
+    .beforeAddWrite(() => {
+      /**
+       * 'transformOrigin' use for leave animation.
+       */
+      root.querySelector<HTMLElement>('.popover-content')!.dataset['transformOrigin'] = `${originY} ${originX}`;
+    })
+    .fromTo('transform', 'scale(0)', 'scale(1)')
+    .fromTo('opacity', 0.01, 1);
+  // TODO(FW-4376) Ensure that arrow also blurs when translucent
+
+  if (isReplace) {
+    targetAnimation
+      .delay(0)
+      .duration(200)
+      .addElement(referenceSizeEl)
+      .beforeStyles({ 'transform-origin': `${originY} ${originX}` })
+      .beforeAddClass('ios26-replace-element')
+      .fromTo('transform', 'scale(1)', 'scale(1.05)')
+      .fromTo('opacity', 1, 0);
+  }
+
+  return baseAnimation
+    .easing('ease')
+    .delay(100)
+    .duration(100)
+    .beforeAddWrite(() => {
+      if (size === 'cover') {
+        baseEl.style.setProperty('--width', `${contentWidth}px`);
+      }
+
+      if (addPopoverBottomClass) {
+        baseEl.classList.add('popover-bottom');
+      }
+
+      if (bottom !== undefined) {
+        contentEl.style.setProperty('bottom', `${bottom}px`);
+      }
+
+      const safeAreaLeft = ' + var(--ion-safe-area-left, 0)';
+      const safeAreaRight = ' - var(--ion-safe-area-right, 0)';
+
+      let leftValue = `${left}px`;
+
+      if (checkSafeAreaLeft) {
+        leftValue = `${left}px${safeAreaLeft}`;
+      }
+      if (checkSafeAreaRight) {
+        leftValue = `${left}px${safeAreaRight}`;
+      }
+
+      contentEl.style.setProperty('top', `calc(${top}px + var(--offset-y, 0))`);
+      contentEl.style.setProperty('left', `calc(${leftValue} + var(--offset-x, 0))`);
+      contentEl.style.setProperty('transform-origin', `${originY} ${originX}`);
+
+      if (arrowEl !== null) {
+        const didAdjustBounds = results.top !== top || results.left !== left;
+        const showArrow = shouldShowArrow(side, didAdjustBounds, ev, trigger);
+
+        if (showArrow) {
+          arrowEl.style.setProperty('top', `calc(${arrowTop}px + var(--offset-y, 0))`);
+          arrowEl.style.setProperty('left', `calc(${arrowLeft}px + var(--offset-x, 0))`);
+        } else {
+          arrowEl.style.setProperty('display', 'none');
+        }
+      }
+    })
+    .addAnimation([backdropAnimation, contentAnimation, targetAnimation]);
+};

package/src/popover/animations/ios.leave.ts

@@ -0,0 +1,76 @@
+import { createAnimation } from '@ionic/core';
+import { getElementRoot } from '../../utils';
+
+import type { Animation } from '@ionic/core/dist/types/utils/animation/animation-interface';
+
+/**
+ * iOS Popover Leave Animation
+ */
+export const iosLeaveAnimation = (baseEl: HTMLElement): Animation => {
+  const root = getElementRoot(baseEl);
+  const contentEl = root.querySelector('.popover-content') as HTMLElement;
+  const arrowEl = root.querySelector('.popover-arrow') as HTMLElement | null;
+
+  const baseAnimation = createAnimation();
+  const backdropAnimation = createAnimation();
+  const contentAnimation = createAnimation();
+  const targetAnimation = createAnimation();
+
+  const doc = baseEl.ownerDocument as any;
+  const replaceElement = doc.querySelector('.ios26-replace-element') as HTMLElement | null;
+
+  if (replaceElement) {
+    const ratio = contentEl.getBoundingClientRect().width / contentEl.getBoundingClientRect().height;
+    const scale = ratio > 1 ? `${Math.min(1.2, 1.05 * ratio)}, 1.05` : `1.05, ${Math.min(1.2, 1.05 * ratio)}`;
+
+    targetAnimation
+      .addElement(replaceElement)
+      .delay(100)
+      .duration(300)
+      .afterRemoveClass('ios26-replace-element')
+      .fromTo('transform', `scale(${scale})`, 'scale(1)')
+      .fromTo('opacity', 0, 0.9);
+  }
+
+  backdropAnimation.addElement(root.querySelector('ion-backdrop')!).fromTo('opacity', 'var(--backdrop-opacity)', 0);
+
+  contentAnimation
+    .duration(400)
+    .easing('ease')
+    .addElement(root.querySelector('.popover-arrow')!)
+    .addElement(root.querySelector('.popover-content')!)
+    .fromTo('opacity', 0.99, 0);
+
+  const popoverContentDataset = root.querySelector<HTMLElement>('.popover-content')!.dataset['transformOrigin'];
+  if (popoverContentDataset) {
+    contentAnimation.beforeStyles({ 'transform-origin': popoverContentDataset }).afterAddRead(() => {
+      root.querySelector<HTMLElement>('.popover-content')!.dataset['transformOrigin'] = '';
+    });
+
+    if (replaceElement) {
+      contentAnimation.fromTo('transform', 'scale(1)', 'scale(0.55)');
+    } else {
+      contentAnimation.fromTo('transform', 'scale(1)', 'scale(0)');
+    }
+  }
+
+  return baseAnimation
+    .easing('ease')
+    .afterAddWrite(() => {
+      baseEl.style.removeProperty('--width');
+      baseEl.classList.remove('popover-bottom');
+
+      contentEl.style.removeProperty('top');
+      contentEl.style.removeProperty('left');
+      contentEl.style.removeProperty('bottom');
+      contentEl.style.removeProperty('transform-origin');
+
+      if (arrowEl) {
+        arrowEl.style.removeProperty('top');
+        arrowEl.style.removeProperty('left');
+        arrowEl.style.removeProperty('display');
+      }
+    })
+    .duration(300)
+    .addAnimation([backdropAnimation, contentAnimation, targetAnimation]);
+};

package/src/popover/popover-interface.ts

@@ -0,0 +1,44 @@
+import type { AnimationBuilder, ComponentProps, ComponentRef, FrameworkDelegate, Mode, OverlayInterface } from '@ionic/core';
+
+export interface PopoverInterface extends OverlayInterface {
+  present: (event?: MouseEvent | TouchEvent | PointerEvent) => Promise<void>;
+}
+
+export interface PopoverOptions<T extends ComponentRef = ComponentRef> {
+  component: T;
+  componentProps?: ComponentProps<T>;
+  showBackdrop?: boolean;
+  backdropDismiss?: boolean;
+  translucent?: boolean;
+  cssClass?: string | string[];
+  event?: Event;
+  delegate?: FrameworkDelegate;
+  animated?: boolean;
+  focusTrap?: boolean;
+
+  mode?: Mode;
+  keyboardClose?: boolean;
+  id?: string;
+  htmlAttributes?: { [key: string]: any };
+
+  enterAnimation?: AnimationBuilder;
+  leaveAnimation?: AnimationBuilder;
+
+  size?: PopoverSize;
+  dismissOnSelect?: boolean;
+  reference?: PositionReference;
+  side?: PositionSide;
+  alignment?: PositionAlign;
+  arrow?: boolean;
+
+  trigger?: string;
+  triggerAction?: string;
+}
+
+export type PopoverSize = 'cover' | 'auto';
+
+export type TriggerAction = 'click' | 'hover' | 'context-menu';
+
+export type PositionReference = 'trigger' | 'event';
+export type PositionSide = 'top' | 'right' | 'bottom' | 'left' | 'start' | 'end';
+export type PositionAlign = 'start' | 'center' | 'end';