@rdlabo/ionic-theme-ios27 0.1.0-beta.pr171.sha1f9944f21de7 → 0.1.0-beta.pr172.sha0316ffe45969

package/dist/index.d.ts

@@ -1,7 +1,6 @@
 import { registeredEffect } from './sheets-of-glass/interfaces';
 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 { iosPopoverEnterAnimation as popoverEnterAnimation, iosPopoverLeaveAnimation as popoverLeaveAnimation, } from '@rdlabo/ionic-theme-utils';
 export * from './tab-bar-searchable';
 export * from './searchbar';
 export * from './transition/ios.transition';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAEhE,cAAc,8BAA8B,CAAC;AAC7C,OAAO,EAAE,iBAAiB,IAAI,qBAAqB,EAAE,MAAM,gCAAgC,CAAC;AAC5F,OAAO,EAAE,iBAAiB,IAAI,qBAAqB,EAAE,MAAM,gCAAgC,CAAC;AAC5F,cAAc,sBAAsB,CAAC;AACrC,cAAc,aAAa,CAAC;AAC5B,cAAc,6BAA6B,CAAC;AAC5C,OAAO,EAAE,qBAAqB,EAAE,MAAM,WAAW,CAAC;AAElD,eAAO,MAAM,oBAAoB,GAAI,eAAe,WAAW,KAAG,gBAAgB,GAAG,SAyBpF,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAEhE,cAAc,8BAA8B,CAAC;AAC7C,OAAO,EACL,wBAAwB,IAAI,qBAAqB,EACjD,wBAAwB,IAAI,qBAAqB,GAClD,MAAM,2BAA2B,CAAC;AACnC,cAAc,sBAAsB,CAAC;AACrC,cAAc,aAAa,CAAC;AAC5B,cAAc,6BAA6B,CAAC;AAC5C,OAAO,EAAE,qBAAqB,EAAE,MAAM,WAAW,CAAC;AAElD,eAAO,MAAM,oBAAoB,GAAI,eAAe,WAAW,KAAG,gBAAgB,GAAG,SAyBpF,CAAC"}

package/dist/index.js

@@ -1,7 +1,6 @@
 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 { iosPopoverEnterAnimation as popoverEnterAnimation, iosPopoverLeaveAnimation as popoverLeaveAnimation, } from '@rdlabo/ionic-theme-utils';
 export * from './tab-bar-searchable';
 export * from './searchbar';
 export * from './transition/ios.transition';

package/dist/tab-bar-searchable/animations/enter.d.ts

@@ -1,5 +1,5 @@
-import { ElementReferences, ElementSizes } from '../interfaces';
 import { Animation } from '@ionic/core';
+import { type ElementReferences, type ElementSizes } from '@rdlabo/ionic-theme-utils';
 export declare const createEffectAnimation: (references: ElementReferences, sizes: ElementSizes) => Animation;
 export declare const createSearchContainerAnimation: (references: ElementReferences, sizes: ElementSizes) => Animation;
 export declare const createCloseButtonsAnimation: (references: ElementReferences) => Animation;

package/dist/tab-bar-searchable/animations/enter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"enter.d.ts","sourceRoot":"","sources":["../../../src/tab-bar-searchable/animations/enter.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAChE,OAAO,EAAE,SAAS,EAAmB,MAAM,aAAa,CAAC;AAIzD,eAAO,MAAM,qBAAqB,GAAI,YAAY,iBAAiB,EAAE,OAAO,YAAY,KAAG,SA0B1F,CAAC;AAEF,eAAO,MAAM,8BAA8B,GAAI,YAAY,iBAAiB,EAAE,OAAO,YAAY,KAAG,SAUnG,CAAC;AAEF,eAAO,MAAM,2BAA2B,GAAI,YAAY,iBAAiB,KAAG,SAO3E,CAAC;AAEF,eAAO,MAAM,qBAAqB,GAAI,WAAW,WAAW,EAAE,YAAY,iBAAiB,EAAE,OAAO,YAAY,KAAG,SAyBlH,CAAC;AAEF,eAAO,MAAM,wBAAwB,GAAI,cAAc,WAAW,KAAG,SAWpE,CAAC"}
+{"version":3,"file":"enter.d.ts","sourceRoot":"","sources":["../../../src/tab-bar-searchable/animations/enter.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAmB,MAAM,aAAa,CAAC;AACzD,OAAO,EAAqD,KAAK,iBAAiB,EAAE,KAAK,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAGzI,eAAO,MAAM,qBAAqB,GAAI,YAAY,iBAAiB,EAAE,OAAO,YAAY,KAAG,SA0B1F,CAAC;AAEF,eAAO,MAAM,8BAA8B,GAAI,YAAY,iBAAiB,EAAE,OAAO,YAAY,KAAG,SAUnG,CAAC;AAEF,eAAO,MAAM,2BAA2B,GAAI,YAAY,iBAAiB,KAAG,SAO3E,CAAC;AAEF,eAAO,MAAM,qBAAqB,GAAI,WAAW,WAAW,EAAE,YAAY,iBAAiB,EAAE,OAAO,YAAY,KAAG,SAyBlH,CAAC;AAEF,eAAO,MAAM,wBAAwB,GAAI,cAAc,WAAW,KAAG,SAWpE,CAAC"}

package/dist/tab-bar-searchable/animations/enter.js

@@ -1,6 +1,6 @@
 import { createAnimation } from '@ionic/core';
+import { ANIMATION_DELAY_CLOSE_BUTTONS, OPACITY_TRANSITION } from '@rdlabo/ionic-theme-utils';
 import { cloneElement } from '../../utils';
-import { ANIMATION_DELAY_CLOSE_BUTTONS, OPACITY_TRANSITION } from '../utils';
 export const createEffectAnimation = (references, sizes) => {
     const effectElement = cloneElement('ion-icon');
     const closeButtonRect = references.closeButtonIcon?.getBoundingClientRect();

package/dist/tab-bar-searchable/animations/leave.d.ts

@@ -1,5 +1,5 @@
-import { ElementReferences, ElementSizes } from '../interfaces';
 import { Animation } from '@ionic/core';
+import { type ElementReferences, type ElementSizes } from '@rdlabo/ionic-theme-utils';
 export declare const createReverseEffectAnimation: (references: ElementReferences, searchableElementSizes: ElementSizes, colorSelected: string) => Animation;
 export declare const createReverseSearchContainerAnimation: (references: ElementReferences, sizes: ElementSizes) => Animation;
 export declare const createReverseCloseButtonsAnimation: (references: ElementReferences) => Animation;

package/dist/tab-bar-searchable/animations/leave.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"leave.d.ts","sourceRoot":"","sources":["../../../src/tab-bar-searchable/animations/leave.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAChE,OAAO,EAAE,SAAS,EAAmB,MAAM,aAAa,CAAC;AAIzD,eAAO,MAAM,4BAA4B,GACvC,YAAY,iBAAiB,EAC7B,wBAAwB,YAAY,EACpC,eAAe,MAAM,KACpB,SAyBF,CAAC;AAEF,eAAO,MAAM,qCAAqC,GAAI,YAAY,iBAAiB,EAAE,OAAO,YAAY,KAAG,SAU1G,CAAC;AAEF,eAAO,MAAM,kCAAkC,GAAI,YAAY,iBAAiB,KAAG,SAOlF,CAAC;AAEF,eAAO,MAAM,4BAA4B,GAAI,WAAW,WAAW,EAAE,YAAY,iBAAiB,EAAE,OAAO,YAAY,KAAG,SAkBzH,CAAC;AAEF,eAAO,MAAM,+BAA+B,GAAI,cAAc,WAAW,EAAE,YAAY,YAAY,KAAG,SAYrG,CAAC"}
+{"version":3,"file":"leave.d.ts","sourceRoot":"","sources":["../../../src/tab-bar-searchable/animations/leave.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAmB,MAAM,aAAa,CAAC;AACzD,OAAO,EAAqD,KAAK,iBAAiB,EAAE,KAAK,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAGzI,eAAO,MAAM,4BAA4B,GACvC,YAAY,iBAAiB,EAC7B,wBAAwB,YAAY,EACpC,eAAe,MAAM,KACpB,SAyBF,CAAC;AAEF,eAAO,MAAM,qCAAqC,GAAI,YAAY,iBAAiB,EAAE,OAAO,YAAY,KAAG,SAU1G,CAAC;AAEF,eAAO,MAAM,kCAAkC,GAAI,YAAY,iBAAiB,KAAG,SAOlF,CAAC;AAEF,eAAO,MAAM,4BAA4B,GAAI,WAAW,WAAW,EAAE,YAAY,iBAAiB,EAAE,OAAO,YAAY,KAAG,SAkBzH,CAAC;AAEF,eAAO,MAAM,+BAA+B,GAAI,cAAc,WAAW,EAAE,YAAY,YAAY,KAAG,SAYrG,CAAC"}

package/dist/tab-bar-searchable/animations/leave.js

@@ -1,6 +1,6 @@
 import { createAnimation } from '@ionic/core';
+import { ANIMATION_DELAY_CLOSE_BUTTONS, OPACITY_TRANSITION } from '@rdlabo/ionic-theme-utils';
 import { cloneElement } from '../../utils';
-import { ANIMATION_DELAY_CLOSE_BUTTONS, OPACITY_TRANSITION } from '../utils';
 export const createReverseEffectAnimation = (references, searchableElementSizes, colorSelected) => {
     const effectElement = cloneElement('ion-icon');
     const closeButtonRect = references.closeButtonIcon?.getBoundingClientRect();

package/dist/tab-bar-searchable/index.d.ts

@@ -1,4 +1,4 @@
-import { TabBarSearchableFunction } from './interfaces';
-export * from './interfaces';
+import { type TabBarSearchableFunction } from '@rdlabo/ionic-theme-utils';
+export { TabBarSearchableType, type TabBarSearchableFunction, type SearchableEventCache, type ElementSizes, type ElementReferences, } from '@rdlabo/ionic-theme-utils';
 export declare const attachTabBarSearchable: (ionTabBar: HTMLElement, ionFabButton: HTMLElement, ionFooter: HTMLElement) => TabBarSearchableFunction;
 //# sourceMappingURL=index.d.ts.map

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":"AAUA,OAAO,EAAwB,wBAAwB,EAAwB,MAAM,cAAc,CAAC;AAgBpG,cAAc,cAAc,CAAC;AAqB7B,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,wBAwDF,CAAC"}

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

@@ -1,10 +1,9 @@
 import { createAnimation } from '@ionic/core';
+import { ANIMATION_DELAY_BASE, ANIMATION_DURATION, ANIMATION_EASING, getElementReferences, getElementSizes, throwErrorByFailedClickElement, TabBarSearchableType, } from '@rdlabo/ionic-theme-utils';
 import { isNativeUIShell, registerNativeSearch, requestNativeSearch, suspendNativeUIShell } from '../native-integration';
-import { ANIMATION_DELAY_BASE, ANIMATION_DURATION, ANIMATION_EASING, getElementReferences, getElementSizes, throwErrorByFailedClickElement, } from './utils';
-import { TabBarSearchableType } from './interfaces';
 import { createCloseButtonsAnimation, createEffectAnimation, createFabButtonAnimation, createSearchContainerAnimation, createTabBarAnimation, } from './animations/enter';
 import { createReverseCloseButtonsAnimation, createReverseEffectAnimation, createReverseFabButtonAnimation, createReverseSearchContainerAnimation, createReverseTabBarAnimation, } from './animations/leave';
-export * from './interfaces';
+export { TabBarSearchableType, } from '@rdlabo/ionic-theme-utils';
 export const attachTabBarSearchable = (ionTabBar, ionFabButton, ionFooter) => {
     if (!ionTabBar || !ionFabButton || !ionFooter) {
         throw new Error('TabBarSearchable should be defined with props');

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

@@ -1,5 +1,6 @@
+import { shadow } from '@rdlabo/ionic-theme-utils';
 import type { Animation } from '@ionic/core';
 import type { TransitionOptions } from './index';
-export declare const shadow: <T extends Element>(el: T) => ShadowRoot | T;
+export { shadow };
 export declare const iosTransitionAnimation: (navEl: HTMLElement, opts: TransitionOptions) => Animation;
 //# sourceMappingURL=ios.transition.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ios.transition.d.ts","sourceRoot":"","sources":["../../src/transition/ios.transition.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAE7C,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAUjD,eAAO,MAAM,MAAM,GAAI,CAAC,SAAS,OAAO,EAAE,IAAI,CAAC,KAAG,UAAU,GAAG,CAE9D,CAAC;AAyGF,eAAO,MAAM,sBAAsB,GAAI,OAAO,WAAW,EAAE,MAAM,iBAAiB,KAAG,SA8ZpF,CAAC"}
+{"version":3,"file":"ios.transition.d.ts","sourceRoot":"","sources":["../../src/transition/ios.transition.ts"],"names":[],"mappings":"AAAA,OAAO,EAAgC,MAAM,EAAE,MAAM,2BAA2B,CAAC;AACjF,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAC7C,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAIjD,OAAO,EAAE,MAAM,EAAE,CAAC;AAElB,eAAO,MAAM,sBAAsB,EAAE,CAAC,KAAK,EAAE,WAAW,EAAE,IAAI,EAAE,iBAAiB,KAAK,SAKlF,CAAC"}

package/dist/transition/ios.transition.js

@@ -1,429 +1,9 @@
-import { createAnimation } from '@ionic/core';
+import { createIosTransitionAnimation, shadow } from '@rdlabo/ionic-theme-utils';
 import { getIonPageElement } from './index';
 import { connectNativeUIShellTransition } from '../native-integration';
-const DURATION = 540;
-const getClonedElement = (tagName) => {
-    return document.querySelector(`${tagName}.ion-cloned-element`);
-};
-export const shadow = (el) => {
-    return el.shadowRoot || el;
-};
-const animateFixedBackButton = (root, navEl, page, entering, interactive, otherPage) => {
-    const button = page.querySelector(':scope > ion-header.header-translucent:not(.ios-theme-disabled, .ios26-disabled) ion-back-button:not(.ios-theme-disabled, .ios26-disabled)');
-    if (!button || button.offsetWidth === 0) {
-        return;
-    }
-    const otherButton = otherPage?.querySelector(':scope > ion-header.header-translucent:not(.ios-theme-disabled, .ios26-disabled) ion-back-button:not(.ios-theme-disabled, .ios26-disabled)');
-    const persistent = !!otherButton && otherButton.offsetWidth > 0;
-    const buttons = [button, ...(persistent ? [otherButton] : [])].map((element) => ({
-        element,
-        visibility: element.style.visibility,
-    }));
-    const rect = button.getBoundingClientRect();
-    const width = button.offsetWidth;
-    const height = button.offsetHeight;
-    const clone = getClonedElement('ion-back-button');
-    if (!clone) {
-        return;
-    }
-    const cloneParent = clone.parentNode;
-    const cloneNextSibling = clone.nextSibling;
-    const cloneStyle = clone.getAttribute('style');
-    clone.icon = button.icon;
-    clone.text = button.text;
-    clone.mode = button.mode;
-    clone.color = button.color;
-    clone.disabled = button.disabled;
-    const icon = shadow(clone).querySelector('ion-icon');
-    const animation = createAnimation().addElement(clone);
-    const fadeStart = !entering && interactive ? 0.8 : 0.4;
-    const fadeEnd = entering ? 0.96 : interactive ? 1 : 0.95;
-    if (persistent) {
-        animation.fromTo('transform', 'scale(1)', 'scale(1)').fromTo('opacity', 1, 1);
-    }
-    else if (entering) {
-        animation.keyframes([
-            { offset: 0, transform: 'scale(1.2)', opacity: 0 },
-            { offset: fadeStart, transform: 'scale(1.2)', opacity: 0 },
-            { offset: 0.65, transform: 'scale(1.12)', opacity: 0.15 },
-            { offset: 0.9, transform: 'scale(1.02)', opacity: 0.75 },
-            { offset: fadeEnd, transform: 'scale(1)', opacity: 1 },
-            { offset: 1, transform: 'scale(1)', opacity: 1 },
-        ]);
-    }
-    else {
-        animation.keyframes([
-            { offset: 0, transform: 'scale(1)', opacity: 1 },
-            { offset: fadeStart, transform: 'scale(1)', opacity: 1 },
-            { offset: fadeEnd, transform: 'scale(1.2)', opacity: 0 },
-            { offset: 1, transform: 'scale(1.2)', opacity: 0 },
-        ]);
-    }
-    if (icon && !persistent) {
-        const from = entering ? 'blur(4px)' : 'blur(0px)';
-        const to = entering ? 'blur(0px)' : 'blur(4px)';
-        animation.addAnimation(createAnimation()
-            .addElement(icon)
-            .keyframes([
-            { offset: 0, filter: from },
-            { offset: fadeStart, filter: from },
-            { offset: fadeEnd, filter: to },
-            { offset: 1, filter: to },
-        ]));
-    }
-    root.beforeAddWrite(() => {
-        Object.assign(clone.style, {
-            position: 'fixed',
-            left: `${rect.left + (rect.width - width) / 2}px`,
-            top: `${rect.top + (rect.height - height) / 2}px`,
-            width: `${width}px`,
-            height: `${height}px`,
-            margin: '0',
-            pointerEvents: 'none',
-            visibility: 'visible',
-            display: getComputedStyle(button).display,
-            zIndex: '1000',
-        });
-        navEl.appendChild(clone);
-        buttons.forEach(({ element }) => (element.style.visibility = 'hidden'));
-    });
-    root.afterAddWrite(() => {
-        buttons.forEach(({ element, visibility }) => (element.style.visibility = visibility));
-        cloneParent.insertBefore(clone, cloneNextSibling);
-        if (cloneStyle === null) {
-            clone.removeAttribute('style');
-        }
-        else {
-            clone.setAttribute('style', cloneStyle);
-        }
-    });
-    root.addAnimation(animation);
-};
-export const iosTransitionAnimation = (navEl, opts) => {
-    try {
-        const EASING = 'cubic-bezier(0.32,0.72,0,1)';
-        const OPACITY = 'opacity';
-        const TRANSFORM = 'transform';
-        const CENTER = '0%';
-        const OFF_OPACITY = 0.8;
-        const isRTL = navEl.ownerDocument.dir === 'rtl';
-        const OFF_RIGHT = isRTL ? '-99.5%' : '99.5%';
-        const OFF_LEFT = isRTL ? '33%' : '-33%';
-        const enteringEl = opts.enteringEl;
-        const leavingEl = opts.leavingEl;
-        const backDirection = opts.direction === 'back';
-        const contentEl = enteringEl.querySelector(':scope > ion-content');
-        const headerEls = enteringEl.querySelectorAll(':scope > ion-header > *:not(ion-toolbar), :scope > ion-footer > *');
-        const enteringToolBarEls = enteringEl.querySelectorAll(':scope > ion-header > ion-toolbar');
-        const rootAnimation = createAnimation();
-        const enteringContentAnimation = createAnimation();
-        rootAnimation
-            .addElement(enteringEl)
-            .duration((opts.duration ?? 0) || DURATION)
-            .easing(opts.easing || EASING)
-            .fill('both')
-            .beforeRemoveClass('ion-page-invisible');
-        const topPage = backDirection ? leavingEl : enteringEl;
-        const translucentTop = topPage?.querySelector(':scope > ion-header.header-translucent:not(.ios-theme-disabled, .ios26-disabled)');
-        if (topPage && translucentTop) {
-            const shade = navEl.ownerDocument.createElement('div');
-            shade.className = 'ios27-transition-shade';
-            shade.setAttribute('aria-hidden', 'true');
-            const edge = navEl.ownerDocument.createElement('div');
-            edge.setAttribute('aria-hidden', 'true');
-            const clipPath = topPage.style.clipPath;
-            const [corner, control] = topPage.offsetWidth >= 768 ? [36, 13] : [78, 22];
-            Object.assign(shade.style, {
-                position: 'absolute',
-                inset: '0',
-                zIndex: topPage.style.zIndex,
-                pointerEvents: 'none',
-                background: 'rgba(0, 0, 0, 0.1)',
-            });
-            Object.assign(edge.style, {
-                position: 'absolute',
-                top: '0',
-                bottom: '0',
-                [isRTL ? 'right' : 'left']: '-100%',
-                width: '100%',
-                zIndex: topPage.style.zIndex,
-                pointerEvents: 'none',
-                background: `linear-gradient(to ${isRTL ? 'right' : 'left'}, rgba(0, 0, 0, 0.02), transparent 18px)`,
-            });
-            rootAnimation.beforeAddWrite(() => {
-                topPage.before(shade, edge);
-                topPage.style.clipPath = `inset(0 round ${corner * 0.82}px)`;
-                topPage.style.clipPath = `shape(from 0px ${corner}px,
-          curve to ${corner}px 0px with 0px ${control}px / ${control}px 0px, hline to calc(100% - ${corner}px),
-          curve to 100% ${corner}px with calc(100% - ${control}px) 0px / 100% ${control}px, vline to calc(100% - ${corner}px),
-          curve to calc(100% - ${corner}px) 100% with 100% calc(100% - ${control}px) / calc(100% - ${control}px) 100%, hline to ${corner}px,
-          curve to 0px calc(100% - ${corner}px) with ${control}px 100% / 0px calc(100% - ${control}px), close)`;
-            });
-            rootAnimation.afterAddWrite(() => {
-                shade.remove();
-                edge.remove();
-                topPage.style.clipPath = clipPath;
-            });
-            rootAnimation.addAnimation(createAnimation()
-                .addElement(shade)
-                .fromTo(OPACITY, backDirection ? 1 : 0, backDirection ? 0 : 1));
-            rootAnimation.addAnimation(createAnimation()
-                .addElement(edge)
-                .fromTo(TRANSFORM, `translateX(${backDirection ? CENTER : OFF_RIGHT})`, `translateX(${backDirection ? (isRTL ? '-100%' : '100%') : CENTER})`));
-        }
-        if (leavingEl && navEl !== null && navEl !== undefined) {
-            const navDecorAnimation = createAnimation();
-            navDecorAnimation.addElement(navEl);
-            rootAnimation.addAnimation(navDecorAnimation);
-        }
-        if (enteringEl.querySelector(':scope > ion-header.header-translucent:not(.ios-theme-disabled, .ios26-disabled)')) {
-            enteringContentAnimation.addElement(enteringEl);
-        }
-        else if (!contentEl && enteringToolBarEls.length === 0 && headerEls.length === 0) {
-            enteringContentAnimation.addElement(enteringEl.querySelector(':scope > .ion-page, :scope > ion-nav, :scope > ion-tabs'));
-        }
-        else {
-            enteringContentAnimation.addElement(contentEl);
-            enteringContentAnimation.addElement(headerEls);
-        }
-        rootAnimation.addAnimation(enteringContentAnimation);
-        if (backDirection) {
-            enteringContentAnimation
-                .beforeClearStyles([OPACITY])
-                .fromTo('transform', `translateX(${OFF_LEFT})`, `translateX(${CENTER})`)
-                .fromTo(OPACITY, translucentTop ? 1 : OFF_OPACITY, 1);
-        }
-        else {
-            enteringContentAnimation.beforeClearStyles([OPACITY]).fromTo('transform', `translateX(${OFF_RIGHT})`, `translateX(${CENTER})`);
-        }
-        if (contentEl && !enteringEl.querySelector(':scope > ion-header.header-translucent:not(.ios-theme-disabled, .ios26-disabled)')) {
-            const enteringTransitionEffectEl = shadow(contentEl).querySelector('.transition-effect');
-            if (enteringTransitionEffectEl) {
-                const enteringTransitionCoverEl = enteringTransitionEffectEl.querySelector('.transition-cover');
-                const enteringTransitionShadowEl = enteringTransitionEffectEl.querySelector('.transition-shadow');
-                const enteringTransitionEffect = createAnimation();
-                const enteringTransitionCover = createAnimation();
-                const enteringTransitionShadow = createAnimation();
-                enteringTransitionEffect
-                    .addElement(enteringTransitionEffectEl)
-                    .beforeStyles({ opacity: '1', display: 'block' })
-                    .afterStyles({ opacity: '', display: '' });
-                enteringTransitionCover
-                    .addElement(enteringTransitionCoverEl)
-                    .beforeClearStyles([OPACITY])
-                    .fromTo(OPACITY, 0, 0.1);
-                enteringTransitionShadow
-                    .addElement(enteringTransitionShadowEl)
-                    .beforeClearStyles([OPACITY])
-                    .fromTo(OPACITY, 0.03, 0.7);
-                enteringTransitionEffect.addAnimation([enteringTransitionCover, enteringTransitionShadow]);
-                enteringContentAnimation.addAnimation([enteringTransitionEffect]);
-            }
-        }
-        if (topPage) {
-            animateFixedBackButton(rootAnimation, navEl, topPage, !backDirection, opts.progressCallback !== undefined, backDirection ? enteringEl : leavingEl);
-        }
-        const enteringContentHasLargeTitle = enteringEl.querySelector('ion-header.header-collapse-condense');
-        enteringToolBarEls.forEach((enteringToolBarEl) => {
-            if (enteringToolBarEl.closest('ion-header')?.matches('.header-translucent:not(.ios-theme-disabled, .ios26-disabled)')) {
-                return;
-            }
-            const enteringToolBar = createAnimation();
-            enteringToolBar.addElement(enteringToolBarEl);
-            rootAnimation.addAnimation(enteringToolBar);
-            const enteringTitle = createAnimation();
-            enteringTitle.addElement(enteringToolBarEl.querySelector('ion-title'));
-            const enteringToolBarButtons = createAnimation();
-            const buttons = Array.from(enteringToolBarEl.querySelectorAll('ion-buttons,[menuToggle]'));
-            const parentHeader = enteringToolBarEl.closest('ion-header');
-            const inactiveHeader = parentHeader?.classList.contains('header-collapse-condense-inactive');
-            let buttonsToAnimate;
-            if (backDirection) {
-                buttonsToAnimate = buttons.filter((button) => {
-                    const isCollapseButton = button.classList.contains('buttons-collapse');
-                    return (isCollapseButton && !inactiveHeader) || !isCollapseButton;
-                });
-            }
-            else {
-                buttonsToAnimate = buttons.filter((button) => !button.classList.contains('buttons-collapse'));
-            }
-            enteringToolBarButtons.addElement(buttonsToAnimate);
-            const enteringToolBarItems = createAnimation();
-            enteringToolBarItems.addElement(enteringToolBarEl.querySelectorAll(':scope > *:not(ion-title):not(ion-buttons):not([menuToggle])'));
-            const enteringToolBarBg = createAnimation();
-            enteringToolBarBg.addElement(shadow(enteringToolBarEl).querySelector('.toolbar-background'));
-            const enteringBackButton = createAnimation();
-            const backButtonEl = enteringToolBarEl.querySelector('ion-back-button');
-            if (backButtonEl) {
-                enteringBackButton.addElement(backButtonEl);
-            }
-            enteringToolBar.addAnimation([enteringTitle, enteringToolBarButtons, enteringToolBarItems, enteringToolBarBg, enteringBackButton]);
-            enteringToolBarButtons.fromTo(OPACITY, 0.01, 1);
-            enteringToolBarItems.fromTo(OPACITY, 0.01, 1);
-            if (backDirection) {
-                if (!inactiveHeader) {
-                    enteringTitle.fromTo('transform', `translateX(${OFF_LEFT})`, `translateX(${CENTER})`).fromTo(OPACITY, 0.01, 1);
-                }
-                enteringToolBarItems.fromTo('transform', `translateX(${OFF_LEFT})`, `translateX(${CENTER})`);
-                enteringBackButton.fromTo(OPACITY, 0.01, 1);
-            }
-            else {
-                if (!enteringContentHasLargeTitle) {
-                    enteringTitle.fromTo('transform', `translateX(${OFF_RIGHT})`, `translateX(${CENTER})`).fromTo(OPACITY, 0.01, 1);
-                }
-                enteringToolBarItems.fromTo('transform', `translateX(${OFF_RIGHT})`, `translateX(${CENTER})`);
-                enteringToolBarBg.beforeClearStyles([OPACITY, 'transform']);
-                const translucentHeader = parentHeader?.translucent;
-                if (!translucentHeader) {
-                    enteringToolBarBg.fromTo(OPACITY, 0.01, 'var(--opacity)');
-                }
-                else {
-                    enteringToolBarBg.fromTo('transform', isRTL ? 'translateX(-100%)' : 'translateX(100%)', 'translateX(0px)');
-                }
-                enteringBackButton.fromTo(OPACITY, 0.01, 1);
-                if (backButtonEl) {
-                    const enteringBackBtnText = createAnimation();
-                    enteringBackBtnText
-                        .addElement(shadow(backButtonEl).querySelector('.button-text'))
-                        .fromTo(`transform`, isRTL ? 'translateX(-100px)' : 'translateX(100px)', 'translateX(0px)');
-                    enteringToolBar.addAnimation(enteringBackBtnText);
-                }
-            }
-        });
-        if (leavingEl) {
-            const leavingContent = createAnimation();
-            const leavingContentEl = leavingEl.querySelector(':scope > ion-content');
-            const leavingToolBarEls = leavingEl.querySelectorAll(':scope > ion-header > ion-toolbar');
-            const leavingHeaderEls = leavingEl.querySelectorAll(':scope > ion-header > *:not(ion-toolbar), :scope > ion-footer > *');
-            if (leavingEl.querySelector(':scope > ion-header.header-translucent:not(.ios-theme-disabled, .ios26-disabled)')) {
-                leavingContent.addElement(leavingEl);
-            }
-            else if (!leavingContentEl && leavingToolBarEls.length === 0 && leavingHeaderEls.length === 0) {
-                leavingContent.addElement(leavingEl.querySelector(':scope > .ion-page, :scope > ion-nav, :scope > ion-tabs'));
-            }
-            else {
-                leavingContent.addElement(leavingContentEl);
-                leavingContent.addElement(leavingHeaderEls);
-            }
-            rootAnimation.addAnimation(leavingContent);
-            if (backDirection) {
-                leavingContent
-                    .beforeClearStyles([OPACITY])
-                    .fromTo('transform', `translateX(${CENTER})`, isRTL ? 'translateX(-100%)' : 'translateX(100%)');
-                const leavingPage = getIonPageElement(leavingEl);
-                rootAnimation.afterAddWrite(() => {
-                    if (rootAnimation.getDirection() === 'normal') {
-                        leavingPage.style.setProperty('display', 'none');
-                    }
-                });
-            }
-            else {
-                leavingContent
-                    .fromTo('transform', `translateX(${CENTER})`, `translateX(${OFF_LEFT})`)
-                    .fromTo(OPACITY, 1, translucentTop ? 1 : OFF_OPACITY);
-            }
-            if (leavingContentEl &&
-                !leavingEl.querySelector(':scope > ion-header.header-translucent:not(.ios-theme-disabled, .ios26-disabled)')) {
-                const leavingTransitionEffectEl = shadow(leavingContentEl).querySelector('.transition-effect');
-                if (leavingTransitionEffectEl) {
-                    const leavingTransitionCoverEl = leavingTransitionEffectEl.querySelector('.transition-cover');
-                    const leavingTransitionShadowEl = leavingTransitionEffectEl.querySelector('.transition-shadow');
-                    const leavingTransitionEffect = createAnimation();
-                    const leavingTransitionCover = createAnimation();
-                    const leavingTransitionShadow = createAnimation();
-                    leavingTransitionEffect
-                        .addElement(leavingTransitionEffectEl)
-                        .beforeStyles({ opacity: '1', display: 'block' })
-                        .afterStyles({ opacity: '', display: '' });
-                    leavingTransitionCover
-                        .addElement(leavingTransitionCoverEl)
-                        .beforeClearStyles([OPACITY])
-                        .fromTo(OPACITY, 0.1, 0);
-                    leavingTransitionShadow
-                        .addElement(leavingTransitionShadowEl)
-                        .beforeClearStyles([OPACITY])
-                        .fromTo(OPACITY, 0.7, 0.03);
-                    leavingTransitionEffect.addAnimation([leavingTransitionCover, leavingTransitionShadow]);
-                    leavingContent.addAnimation([leavingTransitionEffect]);
-                }
-            }
-            leavingToolBarEls.forEach((leavingToolBarEl) => {
-                if (leavingToolBarEl.closest('ion-header')?.matches('.header-translucent:not(.ios-theme-disabled, .ios26-disabled)')) {
-                    return;
-                }
-                const leavingToolBar = createAnimation();
-                leavingToolBar.addElement(leavingToolBarEl);
-                const leavingTitle = createAnimation();
-                leavingTitle.addElement(leavingToolBarEl.querySelector('ion-title'));
-                const leavingToolBarButtons = createAnimation();
-                const buttons = leavingToolBarEl.querySelectorAll('ion-buttons,[menuToggle]');
-                const parentHeader = leavingToolBarEl.closest('ion-header');
-                const inactiveHeader = parentHeader?.classList.contains('header-collapse-condense-inactive');
-                const buttonsToAnimate = Array.from(buttons).filter((button) => {
-                    const isCollapseButton = button.classList.contains('buttons-collapse');
-                    return (isCollapseButton && !inactiveHeader) || !isCollapseButton;
-                });
-                leavingToolBarButtons.addElement(buttonsToAnimate);
-                const leavingToolBarItems = createAnimation();
-                const leavingToolBarItemEls = leavingToolBarEl.querySelectorAll(':scope > *:not(ion-title):not(ion-buttons):not([menuToggle])');
-                if (leavingToolBarItemEls.length > 0) {
-                    leavingToolBarItems.addElement(leavingToolBarItemEls);
-                }
-                const leavingToolBarBg = createAnimation();
-                leavingToolBarBg.addElement(shadow(leavingToolBarEl).querySelector('.toolbar-background'));
-                const leavingBackButton = createAnimation();
-                const backButtonEl = leavingToolBarEl.querySelector('ion-back-button');
-                if (backButtonEl) {
-                    leavingBackButton.addElement(backButtonEl);
-                }
-                leavingToolBar.addAnimation([leavingTitle, leavingToolBarButtons, leavingToolBarItems, leavingBackButton, leavingToolBarBg]);
-                rootAnimation.addAnimation(leavingToolBar);
-                leavingBackButton.fromTo(OPACITY, 0.99, 0);
-                leavingToolBarButtons.fromTo(OPACITY, 0.99, 0);
-                leavingToolBarItems.fromTo(OPACITY, 0.99, 0);
-                if (backDirection) {
-                    if (!inactiveHeader) {
-                        leavingTitle
-                            .fromTo('transform', `translateX(${CENTER})`, isRTL ? 'translateX(-100%)' : 'translateX(100%)')
-                            .fromTo(OPACITY, 0.99, 0);
-                    }
-                    leavingToolBarItems.fromTo('transform', `translateX(${CENTER})`, isRTL ? 'translateX(-100%)' : 'translateX(100%)');
-                    leavingToolBarBg.beforeClearStyles([OPACITY, 'transform']);
-                    const translucentHeader = parentHeader?.translucent;
-                    if (!translucentHeader) {
-                        leavingToolBarBg.fromTo(OPACITY, 'var(--opacity)', 0);
-                    }
-                    else {
-                        leavingToolBarBg.fromTo('transform', 'translateX(0px)', isRTL ? 'translateX(-100%)' : 'translateX(100%)');
-                    }
-                    if (backButtonEl) {
-                        const leavingBackBtnText = createAnimation();
-                        leavingBackBtnText
-                            .addElement(shadow(backButtonEl).querySelector('.button-text'))
-                            .fromTo('transform', `translateX(${CENTER})`, `translateX(${(isRTL ? -124 : 124) + 'px'})`);
-                        leavingToolBar.addAnimation(leavingBackBtnText);
-                    }
-                }
-                else {
-                    if (!inactiveHeader) {
-                        leavingTitle
-                            .fromTo('transform', `translateX(${CENTER})`, `translateX(${OFF_LEFT})`)
-                            .fromTo(OPACITY, 0.99, 0)
-                            .afterClearStyles([TRANSFORM, OPACITY]);
-                    }
-                    leavingToolBarItems
-                        .fromTo('transform', `translateX(${CENTER})`, `translateX(${OFF_LEFT})`)
-                        .afterClearStyles([TRANSFORM, OPACITY]);
-                    leavingBackButton.afterClearStyles([OPACITY]);
-                    leavingTitle.afterClearStyles([OPACITY]);
-                    leavingToolBarButtons.afterClearStyles([OPACITY]);
-                }
-            });
-        }
-        connectNativeUIShellTransition(rootAnimation, enteringEl, leavingEl);
-        return rootAnimation;
-    }
-    catch (err) {
-        throw err;
-    }
-};
+export { shadow };
+export const iosTransitionAnimation = createIosTransitionAnimation({
+    offLeftPercent: 30,
+    getIonPageElement,
+    connectNativeUIShellTransition,
+});

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@rdlabo/ionic-theme-ios27",
   "private": false,
-  "version": "0.1.0-beta.pr171.sha1f9944f21de7",
+  "version": "0.1.0-beta.pr172.sha0316ffe45969",
   "description": "iOS27 Theme for Ionic Framework",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -28,7 +28,7 @@
   ],
   "scripts": {
     "build": "npm run build:css && npm run build:ts",
-    "build:css": "rm -rf dist/css && sass src/styles:dist/css --style=compressed --no-source-map",
+    "build:css": "rm -rf dist/css && sass src/styles:dist/css --style=compressed --no-source-map --pkg-importer=node",
     "build:ts": "tsc",
     "build:demo": "npm run build && cd demo && npm install && npm run build -- --configuration=production",
     "lint": "prettier --check \"./**/*.{scss,ts}\" &&  prettier --parser angular --check \"./**/*.html\"",
@@ -53,6 +53,9 @@
     "url": "https://github.com/rdlabo-dev/ionic-theme-ios27/issues"
   },
   "homepage": "https://docs.rdlabo.dev/projects/ionic-theme-ios27",
+  "dependencies": {
+    "@rdlabo/ionic-theme-utils": "git+ssh://git@github.com/rdlabo-dev/ionic-theme-utils.git#d27e4d9bc1bc53f932bcc653d420936553847f4c"
+  },
   "devDependencies": {
     "@capacitor/core": "^8.5.2",
     "@ionic/angular": "^9.0.0",

package/src/index.ts

@@ -1,8 +1,10 @@
 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 {
+  iosPopoverEnterAnimation as popoverEnterAnimation,
+  iosPopoverLeaveAnimation as popoverLeaveAnimation,
+} from '@rdlabo/ionic-theme-utils';
 export * from './tab-bar-searchable';
 export * from './searchbar';
 export * from './transition/ios.transition';

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

@@ -1,4 +1,4 @@
-@use '../utils/structured-list';
+@use 'pkg:@rdlabo/ionic-theme-utils/styles/structured-list';
 
 ion-list.ios:not(.ios-theme-disabled, .ios26-disabled) {
   --ion-border-color: var(--ion-color-step-100, var(--ion-background-color-step-100, #e8e8e8));
@@ -11,7 +11,7 @@ ion-list.ios:not(.ios-theme-disabled, .ios26-disabled) {
 }
 
 ion-list.list-inset.ios:not(.ios-theme-disabled, .ios26-disabled) {
-  @include structured-list.layout(20px, 28px);
+  @include structured-list.layout(20px, 28px, $variant: ios27);
 
   ion-radio-group,
   ion-reorder-group {

package/src/styles/md-ion-list-inset.scss

@@ -1,10 +1,10 @@
-@use 'utils/structured-list';
+@use 'pkg:@rdlabo/ionic-theme-utils/styles/structured-list';
 
 ion-list.md {
   @include structured-list.support-text;
 
   &.list-inset {
-    @include structured-list.layout(8px, 16px);
+    @include structured-list.layout(8px, 16px, $variant: ios27);
     :is(#{structured-list.$groups}) ion-item {
       & > ion-input[labelplacement='floating'] {
         transition: transform 200ms ease;

package/src/styles/utils/dark/ion-list.scss

@@ -1,4 +1,4 @@
-@use '../structured-list';
+@use 'pkg:@rdlabo/ionic-theme-utils/styles/structured-list';
 
 @mixin ion-list {
   ion-list.ios:not(.ios-theme-disabled, .ios26-disabled) {