@ionic/core 8.8.19 → 8.8.20-dev.11787158518.168a2fea

package/dist/collection/utils/select-option-render.js

@@ -0,0 +1,118 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { h } from "@stencil/core";
+import { sanitizeDOMTree } from "./sanitization/index";
+/**
+ * Converts a DOM node into a Stencil VNode (or text string) so the
+ * resulting tree is rendered through the component's normal render
+ * path. Rendering through Stencil ensures that scoped CSS classes
+ * (e.g. `sc-ion-action-sheet-ionic`) are applied to every element.
+ *
+ * Highly recommended to pre-sanitize the source DOM (see
+ * `getOptionContent` in select.tsx). This function performs pure
+ * structural conversion — no security filtering.
+ *
+ * Preserves attributes only — properties set imperatively on the source
+ * element (e.g. `input.value` after a user types) won't carry through.
+ * In practice this isn't a concern: interactive controls shouldn't
+ * appear in select-option rich content since they'd nest inside the
+ * overlay's button/radio/checkbox wrapper, which is invalid HTML and
+ * an accessibility issue.
+ *
+ * @param node - The DOM node to convert. Text nodes become strings,
+ * element nodes become VNodes, and any other node types are skipped.
+ * @param keyPrefix - String prefix used to build a stable VNode key,
+ * so Stencil's diff can preserve elements across re-renders.
+ * @param index - Position of this node among its siblings. Combined
+ * with `keyPrefix` to form the final unique key.
+ * @returns The converted VNode, a text string, or `null` if the node
+ * type isn't supported.
+ *
+ * @internal Exported only so it can be unit tested; not part of the
+ * public API.
+ */
+export const cloneToVNode = (node, keyPrefix, index) => {
+    if (node.nodeType === Node.TEXT_NODE) {
+        return node.textContent ?? '';
+    }
+    if (node.nodeType !== Node.ELEMENT_NODE) {
+        return null;
+    }
+    const el = node;
+    const tag = el.tagName.toLowerCase();
+    const key = `${keyPrefix}-${index}`;
+    const attrs = { key };
+    for (let i = 0; i < el.attributes.length; i++) {
+        const attr = el.attributes.item(i);
+        attrs[attr.name] = attr.value;
+    }
+    const children = Array.from(el.childNodes)
+        .map((child, i) => cloneToVNode(child, key, i))
+        .filter((c) => c !== null);
+    return h(tag, attrs, children);
+};
+/**
+ * Renders cloned DOM content as Stencil JSX. Walking the source DOM
+ * into VNodes (rather than injecting it via innerHTML) keeps the
+ * content inside Stencil's render path, so scoped CSS classes are
+ * applied automatically and component attributes like `size` or
+ * `color` survive intact.
+ *
+ * Span elements should be used when this content renders within buttons,
+ * depending on the select interface. Buttons can only have phrasing
+ * content to prevent accessibility issues.
+ *
+ * @param id - Unique identifier for generating stable virtual DOM keys.
+ * @param content - The HTMLElement container whose child nodes will be cloned.
+ * @param className - CSS class applied to the wrapper element.
+ * @param useSpan - Whether to use a span element instead of a div for the wrapper.
+ */
+const renderClonedContent = (id, content, className, useSpan = false) => {
+    const Tag = useSpan ? 'span' : 'div';
+    const keyPrefix = `${className}-${id}`;
+    /**
+     * Do not remove. This is the only sanitization pass for callers that pass
+     * an `HTMLElement` straight to `renderOptionLabel` (e.g. vanilla JS)
+     * without going through `getOptionContent`, which sanitizes upstream.
+     * `cloneToVNode` does pure structural conversion and no security
+     * filtering, so dropping this call would reopen an XSS hole on the
+     * direct `HTMLElement` path.
+     */
+    sanitizeDOMTree(content);
+    return (h(Tag, { class: className, key: keyPrefix }, Array.from(content.childNodes).map((child, i) => cloneToVNode(child, keyPrefix, i))));
+};
+/**
+ * Renders the label content for a select option within an overlay
+ * interface based on the presence of rich content.
+ *
+ * Span elements should be used when this content renders within buttons,
+ * depending on the select interface. Buttons can only have phrasing
+ * content to prevent accessibility issues.
+ *
+ * @param option - The content option data containing label, slots,
+ * and description.
+ * @param className - The base CSS class for the label element.
+ * @param useSpan - Whether to use a span element instead of a div for the label.
+ */
+export const renderOptionLabel = (option, className, useSpan = false) => {
+    const { id, label, startContent, endContent, description } = option;
+    const hasRichContent = !!startContent || !!endContent || !!description;
+    const Tag = useSpan ? 'span' : 'div';
+    // Render simple string label if there is no rich content to display
+    if (!hasRichContent && (typeof label === 'string' || !label)) {
+        return (h(Tag, { class: className, key: `${className}-${id}` }, label));
+    }
+    // Render the main label
+    const labelEl = typeof label === 'string' || !label ? (
+    // Label is a simple string or undefined
+    h(Tag, { key: `${className}-label-${id}` }, label)) : (
+    // Label is an HTMLElement with potential rich content
+    renderClonedContent(id, label, `${className}-text`, useSpan));
+    // No rich content, render just the label
+    if (!hasRichContent) {
+        return (h(Tag, { class: className, key: `${className}-${id}` }, labelEl));
+    }
+    // Render label with rich content (start, end, description)
+    return (h(Tag, { class: `${className} ${className}-has-rich-content`, key: `${className}-${id}` }, startContent && renderClonedContent(id, startContent, 'select-option-start', useSpan), h(Tag, { class: "select-option-content", key: `${className}-content-${id}` }, labelEl, description && (h(Tag, { class: "select-option-description", key: `${className}-desc-${id}` }, description))), endContent && renderClonedContent(id, endContent, 'select-option-end', useSpan)));
+};

package/dist/collection/utils/slot-mutation-controller.js

@@ -69,7 +69,6 @@ export const createSlotMutationController = (el, slotName, mutationCallback) =>
      * of the component.
      */
     const watchForSlotChange = (slottedEl) => {
-        var _a;
         if (slottedContentMutationObserver) {
             slottedContentMutationObserver.disconnect();
             slottedContentMutationObserver = undefined;
@@ -95,7 +94,7 @@ export const createSlotMutationController = (el, slotName, mutationCallback) =>
          * We listen on the parentElement so that we can
          * detect when slotted element itself is removed.
          */
-        slottedContentMutationObserver.observe((_a = slottedEl.parentElement) !== null && _a !== void 0 ? _a : slottedEl, { subtree: true, childList: true });
+        slottedContentMutationObserver.observe(slottedEl.parentElement ?? slottedEl, { subtree: true, childList: true });
     };
     const destroy = () => {
         if (hostMutationObserver) {

package/dist/collection/utils/test/playwright/apply-keyboard-focus.js

@@ -17,7 +17,7 @@ import { expect } from "@playwright/test";
  */
 export const applyKeyboardFocus = async (page, locator, indicatorLocator = locator) => {
     await expect(async () => {
-        await page.evaluate(() => { var _a; return (_a = document.activeElement) === null || _a === void 0 ? void 0 : _a.blur(); });
+        await page.evaluate(() => document.activeElement?.blur());
         await page.keyboard.press('Shift');
         await locator.focus();
         await expect(indicatorLocator).toHaveClass(/ion-focused/, { timeout: 250 });

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

@@ -9,7 +9,6 @@
  * See https://playwright.dev/docs/api/class-mouse#mouse-move for more information.
  */
 export const dragElementBy = async (el, page, dragByX = 0, dragByY = 0, startXCoord, startYCoord, releaseDrag = true) => {
-    var _a;
     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');
@@ -30,8 +29,8 @@ 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);

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

@@ -41,16 +41,15 @@ const generateScreenshotName = (fileName, config) => {
  * 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 processedMode = 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;
+    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) => {

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;
     if (options === undefined && testInfo.project.metadata.mode === undefined) {
         throw new Error(`
 A config must be passed to page.goto to use a generator test:
@@ -41,10 +40,10 @@ 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 formattedRtl = (_b = urlToParams.get('rtl')) !== null && _b !== void 0 ? _b : rtlString;
-    const formattedPalette = (_c = urlToParams.get('palette')) !== null && _c !== void 0 ? _c : palette;
-    const ionicTesting = (_d = urlToParams.get('ionic:_testing')) !== null && _d !== void 0 ? _d : 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
      */

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

@@ -39,7 +39,7 @@ export const setContent = async (page, html, testInfo, options) => {
     let ionicJSImports = `
     <script type="module" src="${baseUrl}/dist/ionic/ionic.esm.js"></script>
   `;
-    if (options === null || options === void 0 ? void 0 : options.importIonicFromCDN) {
+    if (options?.importIonicFromCDN) {
         ionicCSSImports = `
       <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core/css/ionic.bundle.css" />
     `;

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

@@ -9,7 +9,12 @@ export const hostContext = (selector, el) => {
  */
 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
@@ -237,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
      */
@@ -301,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);
         /**
@@ -363,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';
@@ -383,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);
@@ -448,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) => {
@@ -497,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)');
                 }
@@ -581,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;
@@ -622,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))