@ionic/core 8.8.19-dev.11786610762.137bbb21 → 8.8.19-dev.11786735826.1fad7c0a

package/dist/collection/utils/test/playwright/drag-element.js

@@ -8,20 +8,7 @@
  *
  * See https://playwright.dev/docs/api/class-mouse#mouse-move for more information.
  */
-/**
- * Drags an element by the given number of pixels on the X and Y axes.
- *
- * @param el The element to drag.
- * @param page The E2E Page object.
- * @param dragByX The number of pixels to drag on the X axis. Negative values drag left, positive values drag right.
- * @param dragByY The number of pixels to drag on the Y axis. Negative values drag up, positive values drag down.
- * @param startXCoord The X coordinate to start the drag from. Defaults to the center of the element.
- * @param startYCoord The Y coordinate to start the drag from. Defaults to the center of the element.
- * @param releaseDrag Whether to release the drag at the end of the gesture. Defaults to `true`.
- * @param steps The number of steps to divide the drag into. More steps reduce velocity; fewer steps increase it. Use this to control whether velocity-based thresholds (e.g. full-swipe) are triggered, particularly in Safari where gesture velocity is calculated relative to animation frames. Defaults to `10`.
- */
-export const dragElementBy = async (el, page, dragByX = 0, dragByY = 0, startXCoord, startYCoord, releaseDrag = true, steps) => {
-    var _a;
+export const dragElementBy = async (el, page, dragByX = 0, dragByY = 0, startXCoord, startYCoord, releaseDrag = true) => {
     const boundingBox = await el.boundingBox();
     if (!boundingBox) {
         throw new Error('Cannot get a bounding box for an element that is not visible. See https://playwright.dev/docs/api/class-locator#locator-bounding-box for more information');
@@ -42,22 +29,21 @@ export const dragElementBy = async (el, page, dragByX = 0, dragByY = 0, startXCo
     // WebKit that latency perturbs the timing-derived gesture velocity, causing
     // the item to settle a few pixels off and flaking screenshot comparisons
     // (e.g. item-sliding safe-area tests).
-    if (((_a = page.context().browser()) === null || _a === void 0 ? void 0 : _a.browserType().name()) === 'firefox') {
-        await page.evaluate(() => { var _a; return (_a = window.getSelection()) === null || _a === void 0 ? void 0 : _a.removeAllRanges(); });
+    if (page.context().browser()?.browserType().name() === 'firefox') {
+        await page.evaluate(() => window.getSelection()?.removeAllRanges());
     }
     // Drag the element.
-    await moveElement(page, startX, startY, dragByX, dragByY, steps);
+    await moveElement(page, startX, startY, dragByX, dragByY);
     if (releaseDrag) {
         await page.mouse.up();
     }
 };
 /**
  * Drags an element by the given amount of pixels on the Y axis.
- *
  * @param el The element to drag.
  * @param page The E2E Page object.
- * @param dragByY The number of pixels to drag on the Y axis.
- * @param startYCoord The Y coordinate to start the drag from. Defaults to the center of the element.
+ * @param dragByY The amount of pixels to drag the element by.
+ * @param startYCoord The Y coordinate to start the drag gesture at. Defaults to the center of the element.
  */
 export const dragElementByYAxis = async (el, page, dragByY, startYCoord) => {
     const boundingBox = await el.boundingBox();
@@ -99,7 +85,8 @@ const validateDragByY = (startY, dragByY, viewportHeight) => {
         throw new Error(`The element is being dragged past the top of the viewport. Update the dragByY value to prevent going out of bounds. A recommended value is ${recommendedDragByY}.`);
     }
 };
-const moveElement = async (page, startX, startY, dragByX = 0, dragByY = 0, steps = 10) => {
+const moveElement = async (page, startX, startY, dragByX = 0, dragByY = 0) => {
+    const steps = 10;
     const browser = page.context().browser().browserType().name();
     const viewport = page.viewportSize();
     if (viewport === null) {
@@ -114,21 +101,10 @@ const moveElement = async (page, startX, startY, dragByX = 0, dragByY = 0, steps
         const middleX = startX + (endX - startX) * (i / steps);
         const middleY = startY + (endY - startY) * (i / steps);
         await page.mouse.move(middleX, middleY);
-        /**
-         * In Safari, gesture velocity is calculated relative to animation
-         * frames, causing velocity to accumulate faster than in other
-         * browsers. Without waiting for a repaint, consecutive `mouse.move`
-         * events arrive with ~0ms time delta and velocity never accumulates,
-         * causing gesture
-         * detection to fail.
-         */
+        // Safari needs to wait for a repaint to occur before moving the mouse again.
         if (browser === 'webkit' && i % 2 === 0) {
-            /**
-             * Repainting every 2 steps is enough to keep the drag gesture
-             * smooth. Repainting on every step makes the test slow, and
-             * repainting every 4+ steps means Safari does not see enough
-             * frames to track the gesture reliably.
-             */
+            // Repainting every 2 steps is enough to keep the drag gesture smooth.
+            // Anything past 4 steps will cause the drag gesture to be flaky.
             await page.evaluate(() => new Promise(requestAnimationFrame));
         }
     }

package/dist/collection/utils/test/playwright/generator.js

@@ -8,78 +8,52 @@
  * each test title is unique.
  */
 const generateTitle = (title, config) => {
-    const { direction, palette, mode, theme } = config;
-    /**
-     * The iOS theme can only be used with the iOS mode,
-     * and the MD theme can only be used with the MD mode.
-     *
-     * This logic enables the fallback behavior for existing tests,
-     * where we only tested against a mode, which accounted for both
-     * the theme and mode.
-     */
-    if (theme === 'ios' || theme === 'md') {
-        if (palette === 'light') {
-            /**
-             * Ionic has many existing tests that existed prior to
-             * the introduction of theme testing. To maintain backwards
-             * compatibility, we will not include the theme in the test
-             * title if the theme is set to light.
-             */
-            return `${title} - ${mode}/${direction}`;
-        }
-        return `${title} - ${mode}/${direction}/${palette}`;
+    const { mode, direction, palette } = config;
+    if (palette === 'light') {
+        /**
+         * Ionic has many existing tests that existed prior to
+         * the introduction of palette testing. To maintain backwards
+         * compatibility, we will not include the palette in the test
+         * title if the palette is set to light.
+         */
+        return `${title} - ${mode}/${direction}`;
     }
-    return `${title} - ${theme}/${mode}/${direction}/${palette}`;
+    return `${title} - ${mode}/${direction}/${palette}`;
 };
 /**
  * Generates a unique filename based on a base filename
  * and a test config.
  */
 const generateScreenshotName = (fileName, config) => {
-    const { direction, palette, mode, theme } = config;
-    /**
-     * The iOS theme can only be used with the iOS mode,
-     * and the MD theme can only be used with the MD mode.
-     *
-     * This logic enables the fallback behavior for existing tests,
-     * where we only tested against a mode, which accounted for both
-     * the theme and mode.
-     */
-    if (theme === 'ios' || theme === 'md') {
-        if (palette === 'light') {
-            /**
-             * Ionic has many existing tests that existed prior to
-             * the introduction of theme testing. To maintain backwards
-             * compatibility, we will not include the theme in the screenshot
-             * name if the theme is set to light.
-             */
-            return `${fileName}-${mode}-${direction}.png`;
-        }
-        return `${fileName}-${mode}-${direction}-${palette}.png`;
+    const { mode, direction, palette } = config;
+    if (palette === 'light') {
+        /**
+         * Ionic has many existing tests that existed prior to
+         * the introduction of palette testing. To maintain backwards
+         * compatibility, we will not include the palette in the screenshot
+         * name if the palette is set to light.
+         */
+        return `${fileName}-${mode}-${direction}.png`;
     }
-    return `${fileName}-${theme}-${mode}-${direction}-${palette}.png`;
+    return `${fileName}-${mode}-${direction}-${palette}.png`;
 };
 /**
  * Given a config generate an array of test variants.
  */
 export const configs = (testConfig = DEFAULT_TEST_CONFIG_OPTION) => {
-    var _a;
     const { modes, directions } = testConfig;
     const configs = [];
     /**
      * If certain options are not provided,
      * fall back to the defaults.
      */
-    const processedModes = modes !== null && modes !== void 0 ? modes : DEFAULT_MODES;
-    const processedDirection = directions !== null && directions !== void 0 ? directions : DEFAULT_DIRECTIONS;
-    const processedPalette = (_a = testConfig.palettes) !== null && _a !== void 0 ? _a : DEFAULT_PALETTES;
-    processedModes.forEach((mode) => {
-        const [themeOrCombinedMode, modeName] = mode.split('-');
-        const parsedTheme = themeOrCombinedMode;
-        const parsedMode = modeName !== null && modeName !== void 0 ? modeName : themeOrCombinedMode;
+    const processedMode = modes ?? DEFAULT_MODES;
+    const processedDirection = directions ?? DEFAULT_DIRECTIONS;
+    const processedPalette = testConfig.palettes ?? DEFAULT_PALETTES;
+    processedMode.forEach((mode) => {
         processedDirection.forEach((direction) => {
             processedPalette.forEach((palette) => {
-                configs.push({ direction, palette, mode: parsedMode, theme: parsedTheme });
+                configs.push({ mode, direction, palette });
             });
         });
     });

package/dist/collection/utils/test/playwright/page/event-spy.js

@@ -10,27 +10,26 @@
  * Based off https://github.com/ionic-team/stencil/blob/16b8ea4dabb22024872a38bc58ba1dcf1c7cc25b/src/testing/puppeteer/puppeteer-events.ts#L64
  */
 export class EventSpy {
+    eventName;
+    /**
+     * Keeping track of a cursor
+     * ensures that no two spy.next()
+     * calls point to the same event.
+     */
+    cursor = 0;
+    queuedHandler = [];
+    events = [];
     constructor(eventName) {
         this.eventName = eventName;
-        /**
-         * Keeping track of a cursor
-         * ensures that no two spy.next()
-         * calls point to the same event.
-         */
-        this.cursor = 0;
-        this.queuedHandler = [];
-        this.events = [];
     }
     get length() {
         return this.events.length;
     }
     get firstEvent() {
-        var _a;
-        return (_a = this.events[0]) !== null && _a !== void 0 ? _a : null;
+        return this.events[0] ?? null;
     }
     get lastEvent() {
-        var _a;
-        return (_a = this.events[this.events.length - 1]) !== null && _a !== void 0 ? _a : null;
+        return this.events[this.events.length - 1] ?? null;
     }
     next() {
         const { cursor } = this;

package/dist/collection/utils/test/playwright/page/utils/goto.js

@@ -9,7 +9,6 @@
  * to be hydrated before proceeding with the test.
  */
 export const goto = async (page, url, testInfo, originalFn, options) => {
-    var _a, _b, _c, _d, _e;
     if (options === undefined && testInfo.project.metadata.mode === undefined) {
         throw new Error(`
 A config must be passed to page.goto to use a generator test:
@@ -21,18 +20,15 @@ configs().forEach(({ config, title }) => {
 });`);
     }
     let mode;
-    let theme;
     let direction;
     let palette;
     if (options == undefined) {
         mode = testInfo.project.metadata.mode;
-        theme = testInfo.project.metadata.theme;
         direction = testInfo.project.metadata.rtl ? 'rtl' : 'ltr';
         palette = testInfo.project.metadata.palette;
     }
     else {
         mode = options.mode;
-        theme = options.theme;
         direction = options.direction;
         palette = options.palette;
     }
@@ -44,16 +40,14 @@ configs().forEach(({ config, title }) => {
      * certain mode or LTR/RTL config per test.
      */
     const urlToParams = new URLSearchParams(paramsString);
-    const formattedMode = (_a = urlToParams.get('ionic:mode')) !== null && _a !== void 0 ? _a : mode;
-    const formattedTheme = (_b = urlToParams.get('ionic:theme')) !== null && _b !== void 0 ? _b : theme;
-    const formattedRtl = (_c = urlToParams.get('rtl')) !== null && _c !== void 0 ? _c : rtlString;
-    const formattedPalette = (_d = urlToParams.get('palette')) !== null && _d !== void 0 ? _d : palette;
-    const ionicTesting = (_e = urlToParams.get('ionic:_testing')) !== null && _e !== void 0 ? _e : true;
+    const formattedMode = urlToParams.get('ionic:mode') ?? mode;
+    const formattedRtl = urlToParams.get('rtl') ?? rtlString;
+    const formattedPalette = urlToParams.get('palette') ?? palette;
+    const ionicTesting = urlToParams.get('ionic:_testing') ?? true;
     /**
      * Pass through other custom query params
      */
     urlToParams.delete('ionic:mode');
-    urlToParams.delete('ionic:theme');
     urlToParams.delete('rtl');
     urlToParams.delete('palette');
     urlToParams.delete('ionic:_testing');
@@ -64,15 +58,11 @@ configs().forEach(({ config, title }) => {
      */
     const remainingQueryParams = decodeURIComponent(urlToParams.toString());
     const remainingQueryParamsString = remainingQueryParams == '' ? '' : `&${remainingQueryParams}`;
-    const formattedUrl = `${splitUrl[0]}?ionic:_testing=${ionicTesting}&ionic:mode=${formattedMode}&ionic:theme=${formattedTheme}&rtl=${formattedRtl}&palette=${formattedPalette}${remainingQueryParamsString}`;
+    const formattedUrl = `${splitUrl[0]}?ionic:_testing=${ionicTesting}&ionic:mode=${formattedMode}&rtl=${formattedRtl}&palette=${formattedPalette}${remainingQueryParamsString}`;
     testInfo.annotations.push({
         type: 'mode',
         description: formattedMode,
     });
-    testInfo.annotations.push({
-        type: 'theme',
-        description: formattedTheme,
-    });
     testInfo.annotations.push({
         type: 'direction',
         description: formattedRtl === 'true' ? 'rtl' : 'ltr',

package/dist/collection/utils/test/playwright/page/utils/set-content.js

@@ -18,43 +18,29 @@ export const setContent = async (page, html, testInfo, options) => {
     }
     let mode;
     let direction;
-    let theme;
     let palette;
     if (options == undefined) {
         mode = testInfo.project.metadata.mode;
         direction = testInfo.project.metadata.rtl ? 'rtl' : 'ltr';
-        theme = testInfo.project.metadata.theme;
         palette = testInfo.project.metadata.palette;
     }
     else {
         mode = options.mode;
         direction = options.direction;
-        theme = options.theme;
         palette = options.palette;
     }
     const baseUrl = process.env.PLAYWRIGHT_TEST_BASE_URL;
     // The Ionic bundle is included locally by default unless the test
     // config passes in the importIonicFromCDN option. This is useful
     // when testing with the CDN version of Ionic.
-    let ionicCSSImports = theme === 'ionic'
-        ? `
-    <link href="${baseUrl}/css/ionic/bundle.ionic.css" rel="stylesheet" />
-    <link href="${baseUrl}/css/utils.bundle.css" rel="stylesheet" />
-  `
-        : `
+    let ionicCSSImports = `
     <link href="${baseUrl}/css/ionic.bundle.css" rel="stylesheet" />
   `;
     let ionicJSImports = `
     <script type="module" src="${baseUrl}/dist/ionic/ionic.esm.js"></script>
   `;
-    if (options === null || options === void 0 ? void 0 : options.importIonicFromCDN) {
-        ionicCSSImports =
-            theme === 'ionic'
-                ? `
-      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core/css/ionic/bundle.ionic.css" />
-      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core/css/utils.bundle.css" />
-    `
-                : `
+    if (options?.importIonicFromCDN) {
+        ionicCSSImports = `
       <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core/css/ionic.bundle.css" />
     `;
         ionicJSImports = `
@@ -77,8 +63,7 @@ export const setContent = async (page, html, testInfo, options) => {
         <script>
           window.Ionic = {
             config: {
-              mode: '${mode}',
-              theme: '${theme}'
+              mode: '${mode}'
             }
           }
         </script>
@@ -88,18 +73,10 @@ export const setContent = async (page, html, testInfo, options) => {
       </body>
     </html>
   `;
-    testInfo.annotations.push({
-        type: 'mode',
-        description: mode,
-    });
     testInfo.annotations.push({
         type: 'palette',
         description: palette,
     });
-    testInfo.annotations.push({
-        type: 'theme',
-        description: theme,
-    });
     if (baseUrl) {
         await page.route(baseUrl, (route) => {
             if (route.request().url() === `${baseUrl}/`) {

package/dist/collection/utils/test/playwright/page/utils/set-ion-viewport.js

@@ -13,7 +13,6 @@
  *
  */
 export const setIonViewport = async (page, options) => {
-    var _a, _b;
     const currentViewport = page.viewportSize();
     const ionContent = await page.$('ion-content');
     if (ionContent) {
@@ -27,8 +26,8 @@ export const setIonViewport = async (page, options) => {
         }
         return [0, 0];
     });
-    const width = ((_a = currentViewport === null || currentViewport === void 0 ? void 0 : currentViewport.width) !== null && _a !== void 0 ? _a : 640) + ((options === null || options === void 0 ? void 0 : options.resizeViewportWidth) ? x : 0);
-    const height = ((_b = currentViewport === null || currentViewport === void 0 ? void 0 : currentViewport.height) !== null && _b !== void 0 ? _b : 480) + y;
+    const width = (currentViewport?.width ?? 640) + (options?.resizeViewportWidth ? x : 0);
+    const height = (currentViewport?.height ?? 480) + y;
     await page.setViewportSize({
         width,
         height,

package/dist/collection/utils/test/press-keys.js

@@ -1,18 +1,6 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s)
-        if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-            t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 /**
  * The purpose of this utility is to provide a way to press keys in a way that
  * is consistent across browsers and platforms. Playwright does not automatically
@@ -33,12 +21,15 @@ const COMMAND = 'meta';
  * Slimmed down version of WordPress' pressKeys utility.
  */
 export class PageUtils {
+    browser;
+    page;
+    context;
     constructor({ page }) {
-        this.pressKeys = pressKeys.bind(this);
         this.page = page;
         this.context = page.context();
         this.browser = this.context.browser();
     }
+    pressKeys = pressKeys.bind(this);
 }
 const baseModifiers = {
     primary: (_isApple) => (_isApple() ? [COMMAND] : [CTRL]),
@@ -77,7 +68,10 @@ const getHasNaturalTabNavigation = async (page) => {
     await testPage.close();
     return featureDetected;
 };
-const modifiers = Object.assign(Object.assign({}, baseModifiers), { shiftAlt: (_isApple) => (_isApple() ? [SHIFT, ALT] : [SHIFT, CTRL]) });
+const modifiers = {
+    ...baseModifiers,
+    shiftAlt: (_isApple) => (_isApple() ? [SHIFT, ALT] : [SHIFT, CTRL]),
+};
 /**
  * Presses a key combination.
  * @param key - Key combination to press.
@@ -90,8 +84,7 @@ const modifiers = Object.assign(Object.assign({}, baseModifiers), { shiftAlt: (_
  * await pressKeys('Shift+Tab');
  * ```
  */
-export async function pressKeys(key, _a = {}) {
-    var { times } = _a, pressOptions = __rest(_a, ["times"]);
+export async function pressKeys(key, { times, ...pressOptions } = {}) {
     const hasNaturalTabNavigation = await getHasNaturalTabNavigation(this.page);
     /**
      * Split the key combination into individual keys and map each key to its
@@ -118,7 +111,7 @@ export async function pressKeys(key, _a = {}) {
     });
     const normalizedKeys = keys.join('+');
     const command = () => this.page.keyboard.press(normalizedKeys);
-    times = times !== null && times !== void 0 ? times : 1;
+    times = times ?? 1;
     for (let i = 0; i < times; i += 1) {
         await command();
         if (times > 1 && pressOptions.delay !== undefined) {

package/dist/collection/utils/theme.js

@@ -1,39 +1,20 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-/**
- * Checks if an element has a parent matching the specified selector.
- * This handles an element in both light DOM and shadow DOM contexts.
- * @param selector The parent selector to check for (e.g., 'ion-datetime'
- * or 'ion-toolbar[color]').
- * @param el The element to check.
- * @returns `true` if the element has a parent matching the specified selector,
- * `false` otherwise.
- */
 export const hostContext = (selector, el) => {
-    // Check the light DOM first
-    if (el.closest(selector) !== null) {
-        return true;
-    }
-    // For attribute or class selectors (e.g., 'ion-toolbar[color]' or
-    // 'ion-toolbar.ion-color') we can only check light DOM since tagName
-    // doesn't include attributes or classes.
-    if (selector.includes('[') || selector.includes('.')) {
-        return false;
-    }
-    // Check the shadow DOM by looking at the shadow root host and
-    // converting the selector to uppercase to compare with tagName
-    const upperCaseTagName = selector.toUpperCase();
-    const rootNode = el.getRootNode();
-    const shadowHost = rootNode instanceof ShadowRoot ? rootNode.host : null;
-    return (shadowHost === null || shadowHost === void 0 ? void 0 : shadowHost.tagName) === upperCaseTagName;
+    return el.closest(selector) !== null;
 };
 /**
  * Create the mode and color classes for the component based on the classes passed in
  */
 export const createColorClasses = (color, cssClassMap) => {
     return typeof color === 'string' && color.length > 0
-        ? Object.assign({ 'ion-color': true, [`ion-color-${color}`]: true }, cssClassMap) : cssClassMap;
+        ? {
+            'ion-color': true,
+            [`ion-color-${color}`]: true,
+            ...cssClassMap,
+        }
+        : cssClassMap;
 };
 export const getClassList = (classes) => {
     if (classes !== undefined) {

package/dist/collection/utils/transition/ios.transition.js

@@ -56,7 +56,7 @@ const createLargeTitleTransition = (rootAnimation, rtl, backDirection, enteringE
         const enteringBackButtonBox = enteringBackButton.getBoundingClientRect();
         const enteringBackButtonTextEl = shadow(enteringBackButton).querySelector('.button-text');
         // Text element not rendered if developers pass text="" to the back button
-        const enteringBackButtonTextBox = enteringBackButtonTextEl === null || enteringBackButtonTextEl === void 0 ? void 0 : enteringBackButtonTextEl.getBoundingClientRect();
+        const enteringBackButtonTextBox = enteringBackButtonTextEl?.getBoundingClientRect();
         const leavingLargeTitleTextEl = shadow(leavingLargeTitle).querySelector('.toolbar-title');
         const leavingLargeTitleTextBox = leavingLargeTitleTextEl.getBoundingClientRect();
         animateLargeTitle(rootAnimation, rtl, backDirection, leavingLargeTitle, leavingLargeTitleBox, leavingLargeTitleTextBox, enteringBackButtonBox, enteringBackButtonTextEl, enteringBackButtonTextBox);
@@ -67,7 +67,7 @@ const createLargeTitleTransition = (rootAnimation, rtl, backDirection, enteringE
         const leavingBackButtonBox = leavingBackButton.getBoundingClientRect();
         const leavingBackButtonTextEl = shadow(leavingBackButton).querySelector('.button-text');
         // Text element not rendered if developers pass text="" to the back button
-        const leavingBackButtonTextBox = leavingBackButtonTextEl === null || leavingBackButtonTextEl === void 0 ? void 0 : leavingBackButtonTextEl.getBoundingClientRect();
+        const leavingBackButtonTextBox = leavingBackButtonTextEl?.getBoundingClientRect();
         const enteringLargeTitleTextEl = shadow(enteringLargeTitle).querySelector('.toolbar-title');
         const enteringLargeTitleTextBox = enteringLargeTitleTextEl.getBoundingClientRect();
         animateLargeTitle(rootAnimation, rtl, backDirection, enteringLargeTitle, enteringLargeTitleBox, enteringLargeTitleTextBox, leavingBackButtonBox, leavingBackButtonTextEl, leavingBackButtonTextBox);
@@ -79,7 +79,6 @@ const createLargeTitleTransition = (rootAnimation, rtl, backDirection, enteringE
     };
 };
 const animateBackButton = (rootAnimation, rtl, backDirection, backButtonEl, backButtonBox, backButtonTextEl, backButtonTextBox, largeTitleEl, largeTitleTextBox) => {
-    var _a, _b;
     const BACK_BUTTON_START_OFFSET = rtl ? `calc(100% - ${backButtonBox.right + 4}px)` : `${backButtonBox.left - 4}px`;
     const TEXT_ORIGIN_X = rtl ? 'right' : 'left';
     const ICON_ORIGIN_X = rtl ? 'left' : 'right';
@@ -96,7 +95,7 @@ const animateBackButton = (rootAnimation, rtl, backDirection, backButtonEl, back
          * will be incorrect. When the texts match we scale both the width and height to
          * account for font weight differences between the title and back button.
          */
-        const doTitleAndButtonTextsMatch = ((_a = backButtonTextEl.textContent) === null || _a === void 0 ? void 0 : _a.trim()) === ((_b = largeTitleEl.textContent) === null || _b === void 0 ? void 0 : _b.trim());
+        const doTitleAndButtonTextsMatch = backButtonTextEl.textContent?.trim() === largeTitleEl.textContent?.trim();
         WIDTH_SCALE = largeTitleTextBox.width / backButtonTextBox.width;
         /**
          * Subtract an offset to account for slight sizing/padding differences between the
@@ -191,7 +190,6 @@ const animateBackButton = (rootAnimation, rtl, backDirection, backButtonEl, back
     const clonedBackButtonIconEl = shadow(clonedBackButtonEl).querySelector('ion-icon');
     clonedBackButtonEl.text = backButtonEl.text;
     clonedBackButtonEl.mode = backButtonEl.mode;
-    clonedBackButtonEl.theme = backButtonEl.theme;
     clonedBackButtonEl.icon = backButtonEl.icon;
     clonedBackButtonEl.color = backButtonEl.color;
     clonedBackButtonEl.disabled = backButtonEl.disabled;
@@ -238,7 +236,6 @@ const animateBackButton = (rootAnimation, rtl, backDirection, backButtonEl, back
     ]);
 };
 const animateLargeTitle = (rootAnimation, rtl, backDirection, largeTitleEl, largeTitleBox, largeTitleTextBox, backButtonBox, backButtonTextEl, backButtonTextBox) => {
-    var _a, _b;
     /**
      * The horizontal transform origin for the large title
      */
@@ -302,7 +299,7 @@ const animateLargeTitle = (rootAnimation, rtl, backDirection, largeTitleEl, larg
          * will be incorrect. When the texts match we scale both the width and height to
          * account for font weight differences between the title and back button.
          */
-        const doTitleAndButtonTextsMatch = ((_a = backButtonTextEl.textContent) === null || _a === void 0 ? void 0 : _a.trim()) === ((_b = largeTitleEl.textContent) === null || _b === void 0 ? void 0 : _b.trim());
+        const doTitleAndButtonTextsMatch = backButtonTextEl.textContent?.trim() === largeTitleEl.textContent?.trim();
         const WIDTH_SCALE = backButtonTextBox.width / largeTitleTextBox.width;
         HEIGHT_SCALE = backButtonTextBox.height / (largeTitleTextBox.height - LARGE_TITLE_SIZE_OFFSET);
         /**
@@ -364,7 +361,6 @@ const animateLargeTitle = (rootAnimation, rtl, backDirection, largeTitleEl, larg
     rootAnimation.addAnimation(clonedLargeTitleAnimation);
 };
 export const iosTransitionAnimation = (navEl, opts) => {
-    var _a;
     try {
         const EASING = 'cubic-bezier(0.32,0.72,0,1)';
         const OPACITY = 'opacity';
@@ -384,11 +380,10 @@ export const iosTransitionAnimation = (navEl, opts) => {
         const enteringContentAnimation = createAnimation();
         rootAnimation
             .addElement(enteringEl)
-            .duration(((_a = opts.duration) !== null && _a !== void 0 ? _a : 0) || DURATION)
+            .duration((opts.duration ?? 0) || DURATION)
             .easing(opts.easing || EASING)
             .fill('both')
             .beforeRemoveClass('ion-page-invisible');
-        // eslint-disable-next-line @typescript-eslint/prefer-optional-chain
         if (leavingEl && navEl !== null && navEl !== undefined) {
             const navDecorAnimation = createAnimation();
             navDecorAnimation.addElement(navEl);
@@ -449,7 +444,7 @@ export const iosTransitionAnimation = (navEl, opts) => {
             const enteringToolBarButtons = createAnimation();
             const buttons = Array.from(enteringToolBarEl.querySelectorAll('ion-buttons,[menuToggle]'));
             const parentHeader = enteringToolBarEl.closest('ion-header');
-            const inactiveHeader = parentHeader === null || parentHeader === void 0 ? void 0 : parentHeader.classList.contains('header-collapse-condense-inactive');
+            const inactiveHeader = parentHeader?.classList.contains('header-collapse-condense-inactive');
             let buttonsToAnimate;
             if (backDirection) {
                 buttonsToAnimate = buttons.filter((button) => {
@@ -498,7 +493,7 @@ export const iosTransitionAnimation = (navEl, opts) => {
                 }
                 enteringToolBarItems.fromTo('transform', `translateX(${OFF_RIGHT})`, `translateX(${CENTER})`);
                 enteringToolBarBg.beforeClearStyles([OPACITY, 'transform']);
-                const translucentHeader = parentHeader === null || parentHeader === void 0 ? void 0 : parentHeader.translucent;
+                const translucentHeader = parentHeader?.translucent;
                 if (!translucentHeader) {
                     enteringToolBarBg.fromTo(OPACITY, 0.01, 'var(--opacity)');
                 }
@@ -582,7 +577,7 @@ export const iosTransitionAnimation = (navEl, opts) => {
                 const leavingToolBarButtons = createAnimation();
                 const buttons = leavingToolBarEl.querySelectorAll('ion-buttons,[menuToggle]');
                 const parentHeader = leavingToolBarEl.closest('ion-header');
-                const inactiveHeader = parentHeader === null || parentHeader === void 0 ? void 0 : parentHeader.classList.contains('header-collapse-condense-inactive');
+                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;
@@ -623,7 +618,7 @@ export const iosTransitionAnimation = (navEl, opts) => {
                     leavingToolBarBg.beforeClearStyles([OPACITY, 'transform']);
                     // leaving toolbar, back direction, and there's no entering toolbar
                     // should just slide out, no fading out
-                    const translucentHeader = parentHeader === null || parentHeader === void 0 ? void 0 : parentHeader.translucent;
+                    const translucentHeader = parentHeader?.translucent;
                     if (!translucentHeader) {
                         leavingToolBarBg.fromTo(OPACITY, 'var(--opacity)', 0);
                     }

package/dist/collection/utils/transition/md.transition.js

@@ -4,7 +4,6 @@
 import { createAnimation } from "../animation/animation";
 import { getIonPageElement } from "../transition";
 export const mdTransitionAnimation = (_, opts) => {
-    var _a, _b, _c;
     const OFF_BOTTOM = '40px';
     const CENTER = '0px';
     const backDirection = opts.direction === 'back';
@@ -16,11 +15,11 @@ export const mdTransitionAnimation = (_, opts) => {
     rootTransition.addElement(ionPageElement).fill('both').beforeRemoveClass('ion-page-invisible');
     // animate the component itself
     if (backDirection) {
-        rootTransition.duration(((_a = opts.duration) !== null && _a !== void 0 ? _a : 0) || 200).easing('cubic-bezier(0.47,0,0.745,0.715)');
+        rootTransition.duration((opts.duration ?? 0) || 200).easing('cubic-bezier(0.47,0,0.745,0.715)');
     }
     else {
         rootTransition
-            .duration(((_b = opts.duration) !== null && _b !== void 0 ? _b : 0) || 280)
+            .duration((opts.duration ?? 0) || 280)
             .easing('cubic-bezier(0.36,0.66,0.04,1)')
             .fromTo('transform', `translateY(${OFF_BOTTOM})`, `translateY(${CENTER})`)
             .fromTo('opacity', 0.01, 1);
@@ -34,7 +33,7 @@ export const mdTransitionAnimation = (_, opts) => {
     // setup leaving view
     if (leavingEl && backDirection) {
         // leaving content
-        rootTransition.duration(((_c = opts.duration) !== null && _c !== void 0 ? _c : 0) || 200).easing('cubic-bezier(0.47,0,0.745,0.715)');
+        rootTransition.duration((opts.duration ?? 0) || 200).easing('cubic-bezier(0.47,0,0.745,0.715)');
         const leavingPage = createAnimation();
         leavingPage
             .addElement(getIonPageElement(leavingEl))