@rdlabo/ionic-theme-ios27 0.1.0 → 0.2.1-beta.pr185.sha0793981f6cf4

package/dist/native/runtime.js

@@ -12,7 +12,7 @@ const bounded = (promise) => new Promise((resolve, reject) => {
     const timer = setTimeout(() => reject(new Error('Native UI Shell bridge timed out')), 5000);
     promise.then(resolve, reject).finally(() => clearTimeout(timer));
 });
-export const createRuntime = async (doc, plugin) => {
+export const createRuntime = async (doc, plugin, options = {}) => {
     const win = doc.defaultView;
     const icons = createIconRenderer();
     const crossfade = createCrossfade(win);
@@ -22,6 +22,7 @@ export const createRuntime = async (doc, plugin) => {
     const suspended = new Set();
     const pages = new Set();
     const presented = new Set();
+    const manualSuspensions = new Set();
     const moving = new Map();
     const observed = new Set();
     const listeners = new AbortController();
@@ -44,6 +45,19 @@ export const createRuntime = async (doc, plugin) => {
     let listener;
     let searchListener;
     let waiters = [];
+    const control = (kind) => {
+        if (kind === 'ion-tab-bar')
+            return 'tabs';
+        if (kind === 'ion-segment')
+            return 'segment';
+        if (kind === 'ion-fab')
+            return 'fab';
+        return 'toolbar';
+    };
+    const controlEnabled = (candidate) => {
+        const controls = options.controls;
+        return controls === undefined || controls[control(candidate.control.kind)] === true;
+    };
     const id = (element) => {
         let value = ids.get(element);
         if (!value) {
@@ -87,6 +101,10 @@ export const createRuntime = async (doc, plugin) => {
     };
     const search = createSearchSupport(doc, id, schedule);
     const candidateSources = (candidate) => candidate.sources ?? [candidate.element];
+    const readEnabledCandidate = (element) => {
+        const candidate = readCandidate(element, id);
+        return candidate && controlEnabled(candidate) ? candidate : undefined;
+    };
     const flush = async () => {
         if (stopped)
             return;
@@ -106,7 +124,8 @@ export const createRuntime = async (doc, plugin) => {
         for (const element of presented)
             if (!element.isConnected)
                 presented.delete(element);
-        return (presented.size > 0 ||
+        return (manualSuspensions.size > 0 ||
+            presented.size > 0 ||
             Array.from(doc.querySelectorAll(overlays)).some((element) => element.presented || element.classList.contains('show-menu')));
     };
     const signature = (candidate) => JSON.stringify({ control: candidate.control, icons: candidate.icons.map(({ source }) => source) });
@@ -118,12 +137,14 @@ export const createRuntime = async (doc, plugin) => {
         for (const surface of moving.keys())
             if (!surface.isConnected)
                 moving.delete(surface);
-        if (doc.hidden || overlayOpen() || (win.visualViewport && (win.visualViewport.scale !== 1 || win.visualViewport.offsetTop !== 0)))
+        if (doc.hidden || overlayOpen())
+            return [];
+        if (win.visualViewport && (win.visualViewport.scale !== 1 || win.visualViewport.offsetTop !== 0) && !search.hasActive())
             return [];
         return unprojected(sources.keys(), () => search
             .decorate(Array.from(doc.querySelectorAll(selector))
             .filter((element) => !blocked(element))
-            .map((element) => readCandidate(element, id))
+            .map(readEnabledCandidate)
             .filter((candidate) => !!candidate), blocked)
             .filter((candidate) => !rejected.has(candidate.element) || rejected.get(candidate.element) !== signature(candidate)));
     };
@@ -211,6 +232,7 @@ export const createRuntime = async (doc, plugin) => {
             }
             if (result.rejectedSearches?.length) {
                 search.reject(result.rejectedSearches);
+                lastSnapshot = '';
                 dirty = true;
             }
             for (const candidate of candidates) {
@@ -366,6 +388,25 @@ export const createRuntime = async (doc, plugin) => {
             updates,
             reason,
         }),
+        async suspend() {
+            const token = Symbol();
+            let resumed = false;
+            if (!stopped) {
+                manualSuspensions.add(token);
+                getNativeSearchBindings(doc).forEach((binding) => search.retire(binding));
+                await flush();
+            }
+            return {
+                async resume() {
+                    if (resumed)
+                        return;
+                    resumed = true;
+                    if (stopped || !manualSuspensions.delete(token))
+                        return;
+                    await flush();
+                },
+            };
+        },
         async destroy() {
             if (stopped)
                 return;
@@ -392,6 +433,7 @@ export const createRuntime = async (doc, plugin) => {
             icons.clear();
             pages.clear();
             presented.clear();
+            manualSuspensions.clear();
             moving.clear();
             suspended.clear();
             await listener?.remove().catch(() => { });
@@ -418,7 +460,7 @@ export const createRuntime = async (doc, plugin) => {
         const owner = Array.from(sources.keys()).find((source) => source === element || source.contains(element));
         if (!owner)
             return;
-        const direct = !blocked(owner) && unprojected(sources.keys(), () => readCandidate(owner, id));
+        const direct = !blocked(owner) && unprojected(sources.keys(), () => readEnabledCandidate(owner));
         const candidate = direct || read().find((candidate) => candidate.actions.has(event.id));
         const item = candidate?.control.items.find((item) => item.id === event.id);
         const searchAction = candidate?.control.search && [candidate.control.search.trigger.id, candidate.control.search.closeId].includes(event.id);
@@ -441,12 +483,16 @@ export const createRuntime = async (doc, plugin) => {
             async search(binding, active, focus) {
                 if (!getNativeSearchBindings(doc).includes(binding) || !search.projected(binding))
                     return false;
-                if (active && !binding.active)
-                    search.begin(binding, revision + 1);
-                binding.active = active;
-                binding.focused = focus ?? (active && binding.focused);
-                if (!active)
-                    search.retire(binding);
+                if (!active) {
+                    search.setStatus(binding, false);
+                }
+                else {
+                    const entering = !binding.active;
+                    if (entering)
+                        search.begin(binding, revision + 1);
+                    const nextFocused = focus === true ? true : focus === false ? false : entering ? false : binding.focused;
+                    search.setStatus(binding, true, nextFocused);
+                }
                 await flush();
                 return !stopped && search.projected(binding);
             },

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,10 @@
+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 interface IosTransitionConfig {
+    radius: number;
+}
+export declare const setConfig: (config: Partial<IosTransitionConfig>) => void;
 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,SA4WpF,CAAC"}
+{"version":3,"file":"ios.transition.d.ts","sourceRoot":"","sources":["../../src/transition/ios.transition.ts"],"names":[],"mappings":"AAAA,OAAO,EAAgC,MAAM,EAAE,MAAM,2BAA2B,CAAC;AACjF,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAC7C,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAIjD,OAAO,EAAE,MAAM,EAAE,CAAC;AAElB,MAAM,WAAW,mBAAmB;IAClC,MAAM,EAAE,MAAM,CAAC;CAChB;AASD,eAAO,MAAM,SAAS,GAAI,QAAQ,OAAO,CAAC,mBAAmB,CAAC,KAAG,IAEhE,CAAC;AAEF,eAAO,MAAM,sBAAsB,EAAE,CAAC,KAAK,EAAE,WAAW,EAAE,IAAI,EAAE,iBAAiB,KAAK,SACnB,CAAC"}

package/dist/transition/ios.transition.js

@@ -1,389 +1,14 @@
-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 { shadow };
+const transitionConfig = {
+    offLeftPercent: 30,
+    getIonPageElement,
+    connectNativeUIShellTransition,
+    radius: 0,
 };
-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;
-        if (topPage?.querySelector(':scope > ion-header.header-translucent:not(.ios-theme-disabled, .ios26-disabled)')) {
-            const shadow = topPage.style.boxShadow;
-            rootAnimation.beforeAddWrite(() => {
-                topPage.style.boxShadow = `${isRTL ? 4 : -4}px 0 24px rgba(0, 0, 0, 0.04)`;
-            });
-            rootAnimation.afterAddWrite(() => {
-                topPage.style.boxShadow = shadow;
-            });
-        }
-        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, 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, 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 const setConfig = (config) => {
+    Object.assign(transitionConfig, config);
 };
+export const iosTransitionAnimation = createIosTransitionAnimation(transitionConfig);