@ionic/core 8.8.4-dev.11776710869.1a81ced2 → 8.8.4-dev.11776868665.169e5ee1

package/hydrate/index.mjs

@@ -8575,7 +8575,7 @@ const setRootAriaHidden = (hidden = false) => {
         viewContainer.removeAttribute('aria-hidden');
     }
 };
-const present = async (overlay, name, iosEnterAnimation, mdEnterAnimation, opts) => {
+const present = async (overlay, name, iosEnterAnimation, mdEnterAnimation, ionicEnterAnimation, opts) => {
     var _a, _b;
     if (overlay.presented) {
         return;
@@ -8623,11 +8623,15 @@ const present = async (overlay, name, iosEnterAnimation, mdEnterAnimation, opts)
         document.body.classList.add(BACKDROP_NO_SCROLL);
     }
     (_a = overlay.willPresentShorthand) === null || _a === void 0 ? void 0 : _a.emit();
+    const theme = getIonTheme(overlay);
     const mode = getIonMode$1(overlay);
+    const selectedAnimation = mode === 'ios'
+        ? iosEnterAnimation
+        : theme === 'ionic' && ionicEnterAnimation
+            ? ionicEnterAnimation
+            : mdEnterAnimation;
     // get the user's animation fn if one was provided
-    const animationBuilder = overlay.enterAnimation
-        ? overlay.enterAnimation
-        : config.get(name, mode === 'ios' ? iosEnterAnimation : mdEnterAnimation);
+    const animationBuilder = overlay.enterAnimation ? overlay.enterAnimation : config.get(name, selectedAnimation);
     const completed = await overlayAnimation(overlay, animationBuilder, overlay.el, opts);
     if (completed) {
         overlay.didPresent.emit();
@@ -24969,6 +24973,104 @@ const setCardStatusBarDefault = (defaultStyle = Style.Default) => {
     StatusBar.setStyle({ style: defaultStyle });
 };
 
+const createSheetEnterAnimation = (opts) => {
+    const { currentBreakpoint, backdropBreakpoint, expandToScroll, staticBackdropOpacity } = opts;
+    /**
+     * If the backdropBreakpoint is undefined, then the backdrop
+     * should always fade in. If the backdropBreakpoint came before the
+     * current breakpoint, then the backdrop should be fading in.
+     */
+    const shouldShowBackdrop = backdropBreakpoint === undefined || backdropBreakpoint < currentBreakpoint;
+    let initialBackdrop = '0';
+    if (staticBackdropOpacity) {
+        initialBackdrop = 'calc(var(--backdrop-opacity)';
+    }
+    else if (shouldShowBackdrop) {
+        initialBackdrop = `calc(var(--backdrop-opacity) * ${currentBreakpoint})`;
+    }
+    const backdropAnimation = createAnimation('backdropAnimation').fromTo('opacity', 0, initialBackdrop);
+    if (shouldShowBackdrop) {
+        backdropAnimation
+            .beforeStyles({
+            'pointer-events': 'none',
+        })
+            .afterClearStyles(['pointer-events']);
+    }
+    const wrapperAnimation = createAnimation('wrapperAnimation').keyframes([
+        { offset: 0, opacity: 1, transform: 'translateY(100%)' },
+        { offset: 1, opacity: 1, transform: `translateY(${100 - currentBreakpoint * 100}%)` },
+    ]);
+    /**
+     * This allows the content to be scrollable at any breakpoint.
+     */
+    const contentAnimation = !expandToScroll
+        ? createAnimation('contentAnimation').keyframes([
+            { offset: 0, opacity: 1, maxHeight: `${(1 - currentBreakpoint) * 100}%` },
+            { offset: 1, opacity: 1, maxHeight: `${currentBreakpoint * 100}%` },
+        ])
+        : undefined;
+    return { wrapperAnimation, backdropAnimation, contentAnimation };
+};
+const createSheetLeaveAnimation = (opts) => {
+    const { currentBreakpoint, backdropBreakpoint } = opts;
+    /**
+     * Backdrop does not always fade in from 0 to 1 if backdropBreakpoint
+     * is defined, so we need to account for that offset by figuring out
+     * what the current backdrop value should be.
+     */
+    const backdropValue = `calc(var(--backdrop-opacity) * ${getBackdropValueForSheet(currentBreakpoint, backdropBreakpoint)})`;
+    const defaultBackdrop = [
+        { offset: 0, opacity: backdropValue },
+        { offset: 1, opacity: 0 },
+    ];
+    const customBackdrop = [
+        { offset: 0, opacity: backdropValue },
+        { offset: backdropBreakpoint, opacity: 0 },
+        { offset: 1, opacity: 0 },
+    ];
+    const backdropAnimation = createAnimation('backdropAnimation').keyframes(backdropBreakpoint !== 0 ? customBackdrop : defaultBackdrop);
+    const wrapperAnimation = createAnimation('wrapperAnimation').keyframes([
+        { offset: 0, opacity: 1, transform: `translateY(${100 - currentBreakpoint * 100}%)` },
+        { offset: 1, opacity: 1, transform: `translateY(100%)` },
+    ]);
+    return { wrapperAnimation, backdropAnimation };
+};
+
+const createEnterAnimation$2 = () => {
+    const backdropAnimation = createAnimation()
+        .fromTo('opacity', 0.01, 'var(--backdrop-opacity)')
+        .beforeStyles({
+        'pointer-events': 'none',
+    })
+        .afterClearStyles(['pointer-events']);
+    const wrapperAnimation = createAnimation().keyframes([
+        { offset: 0, opacity: 0.01, transform: 'translateY(40px)' },
+        { offset: 1, opacity: 1, transform: `translateY(0px)` },
+    ]);
+    return { backdropAnimation, wrapperAnimation, contentAnimation: undefined };
+};
+/**
+ * Ionic Modal Enter Animation
+ */
+const ionicEnterAnimation = (baseEl, opts) => {
+    const { currentBreakpoint, expandToScroll } = opts;
+    const root = getElementRoot(baseEl);
+    const { wrapperAnimation, backdropAnimation, contentAnimation } = currentBreakpoint !== undefined ? createSheetEnterAnimation(opts) : createEnterAnimation$2();
+    backdropAnimation.addElement(root.querySelector('ion-backdrop'));
+    wrapperAnimation.addElement(root.querySelector('.modal-wrapper'));
+    // The content animation is only added if scrolling is enabled for
+    // all the breakpoints.
+    !expandToScroll && (contentAnimation === null || contentAnimation === void 0 ? void 0 : contentAnimation.addElement(baseEl.querySelector('.ion-page')));
+    backdropAnimation.duration(300).easing('ease-out');
+    wrapperAnimation.duration(400).easing('cubic-bezier(0.32, 0.68, 0, 1)');
+    contentAnimation === null || contentAnimation === void 0 ? void 0 : contentAnimation.duration(400).easing('cubic-bezier(0.32, 0.68, 0, 1)');
+    const baseAnimation = createAnimation().addElement(baseEl).addAnimation([backdropAnimation, wrapperAnimation]);
+    if (contentAnimation) {
+        baseAnimation.addAnimation(contentAnimation);
+    }
+    return baseAnimation;
+};
+
 const handleCanDismiss = async (el, animation) => {
     /**
      * If canDismiss is not a function
@@ -25395,69 +25497,6 @@ const calculateProgress = (el, deltaY) => {
     return Math.max(0, Math.min(1, roundedProgress));
 };
 
-const createSheetEnterAnimation = (opts) => {
-    const { currentBreakpoint, backdropBreakpoint, expandToScroll, staticBackdropOpacity } = opts;
-    /**
-     * If the backdropBreakpoint is undefined, then the backdrop
-     * should always fade in. If the backdropBreakpoint came before the
-     * current breakpoint, then the backdrop should be fading in.
-     */
-    const shouldShowBackdrop = backdropBreakpoint === undefined || backdropBreakpoint < currentBreakpoint;
-    let initialBackdrop = '0';
-    if (staticBackdropOpacity) {
-        initialBackdrop = 'calc(var(--backdrop-opacity)';
-    }
-    else if (shouldShowBackdrop) {
-        initialBackdrop = `calc(var(--backdrop-opacity) * ${currentBreakpoint})`;
-    }
-    const backdropAnimation = createAnimation('backdropAnimation').fromTo('opacity', 0, initialBackdrop);
-    if (shouldShowBackdrop) {
-        backdropAnimation
-            .beforeStyles({
-            'pointer-events': 'none',
-        })
-            .afterClearStyles(['pointer-events']);
-    }
-    const wrapperAnimation = createAnimation('wrapperAnimation').keyframes([
-        { offset: 0, opacity: 1, transform: 'translateY(100%)' },
-        { offset: 1, opacity: 1, transform: `translateY(${100 - currentBreakpoint * 100}%)` },
-    ]);
-    /**
-     * This allows the content to be scrollable at any breakpoint.
-     */
-    const contentAnimation = !expandToScroll
-        ? createAnimation('contentAnimation').keyframes([
-            { offset: 0, opacity: 1, maxHeight: `${(1 - currentBreakpoint) * 100}%` },
-            { offset: 1, opacity: 1, maxHeight: `${currentBreakpoint * 100}%` },
-        ])
-        : undefined;
-    return { wrapperAnimation, backdropAnimation, contentAnimation };
-};
-const createSheetLeaveAnimation = (opts) => {
-    const { currentBreakpoint, backdropBreakpoint } = opts;
-    /**
-     * Backdrop does not always fade in from 0 to 1 if backdropBreakpoint
-     * is defined, so we need to account for that offset by figuring out
-     * what the current backdrop value should be.
-     */
-    const backdropValue = `calc(var(--backdrop-opacity) * ${getBackdropValueForSheet(currentBreakpoint, backdropBreakpoint)})`;
-    const defaultBackdrop = [
-        { offset: 0, opacity: backdropValue },
-        { offset: 1, opacity: 0 },
-    ];
-    const customBackdrop = [
-        { offset: 0, opacity: backdropValue },
-        { offset: backdropBreakpoint, opacity: 0 },
-        { offset: 1, opacity: 0 },
-    ];
-    const backdropAnimation = createAnimation('backdropAnimation').keyframes(backdropBreakpoint !== 0 ? customBackdrop : defaultBackdrop);
-    const wrapperAnimation = createAnimation('wrapperAnimation').keyframes([
-        { offset: 0, opacity: 1, transform: `translateY(${100 - currentBreakpoint * 100}%)` },
-        { offset: 1, opacity: 1, transform: `translateY(100%)` },
-    ]);
-    return { wrapperAnimation, backdropAnimation };
-};
-
 const createEnterAnimation$1 = () => {
     const backdropAnimation = createAnimation()
         .fromTo('opacity', 0.01, 'var(--backdrop-opacity)')
@@ -25848,16 +25887,16 @@ const mdLeaveAnimation$2 = (baseEl, opts) => {
     return baseAnimation;
 };
 
-const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, backdropBreakpoint, animation, breakpoints = [], expandToScroll, getCurrentBreakpoint, onDismiss, onBreakpointChange, staticBackdropOpacity, onDragStart, onDragMove, onDragEnd) => {
+const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, backdropBreakpoint, animation, breakpoints = [], expandToScroll, getCurrentBreakpoint, onDismiss, onBreakpointChange, usePhysicsBasedGesture, onDragStart, onDragMove, onDragEnd) => {
     // Defaults for the sheet swipe animation
     const defaultBackdrop = [
         { offset: 0, opacity: 'var(--backdrop-opacity)' },
-        { offset: 1, opacity: staticBackdropOpacity ? 'var(--backdrop-opacity)' : 0.01 },
+        { offset: 1, opacity: usePhysicsBasedGesture ? 'var(--backdrop-opacity)' : 0.01 },
     ];
     const customBackdrop = [
         { offset: 0, opacity: 'var(--backdrop-opacity)' },
-        { offset: 1 - backdropBreakpoint, opacity: staticBackdropOpacity ? 'var(--backdrop-opacity)' : 0 },
-        { offset: 1, opacity: staticBackdropOpacity ? 'var(--backdrop-opacity)' : 0 },
+        { offset: 1 - backdropBreakpoint, opacity: usePhysicsBasedGesture ? 'var(--backdrop-opacity)' : 0 },
+        { offset: 1, opacity: usePhysicsBasedGesture ? 'var(--backdrop-opacity)' : 0 },
     ];
     const SheetDefaults = {
         WRAPPER_KEYFRAMES: [
@@ -26180,7 +26219,9 @@ const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, ba
             : step;
         offset = clamp(0.0001, processedStep, maxStep);
         animation.progressStep(offset);
-        const snapBreakpoint = calculateSnapBreakpoint(detail.deltaY);
+        const snapBreakpoint = usePhysicsBasedGesture
+            ? calculateVelocitySnapBreakpoint(detail.deltaY, detail.velocityY, detail.currentY)
+            : calculatePositionSnapBreakpoint(detail.deltaY);
         const eventDetail = {
             currentY: detail.currentY,
             deltaY: detail.deltaY,
@@ -26191,7 +26232,9 @@ const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, ba
         onDragMove(eventDetail);
     };
     const onEnd = (detail) => {
-        const snapBreakpoint = calculateSnapBreakpoint(detail.deltaY);
+        const snapBreakpoint = usePhysicsBasedGesture
+            ? calculateVelocitySnapBreakpoint(detail.deltaY, detail.velocityY, detail.currentY)
+            : calculatePositionSnapBreakpoint(detail.deltaY);
         const eventDetail = {
             currentY: detail.currentY,
             deltaY: detail.deltaY,
@@ -26238,6 +26281,14 @@ const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, ba
          */
         const shouldPreventDismiss = canDismiss && breakpoint === 0;
         const snapToBreakpoint = shouldPreventDismiss ? currentBreakpoint : breakpoint;
+        /**
+         * Detect snap-back behavior: when the snap target is the same as the current breakpoint,
+         * the user released before crossing the threshold to a new breakpoint.
+         * Apply different timing and easing for snap-back vs. snap-to-new.
+         */
+        const isSnapBack = snapToBreakpoint === currentBreakpoint;
+        const duration = usePhysicsBasedGesture ? (isSnapBack ? 300 : 400) : 500;
+        const easing = isSnapBack ? 'cubic-bezier(0.34, 1.4, 0.64, 1)' : 'cubic-bezier(0.32, 0.68, 0, 1)';
         const shouldRemainOpen = snapToBreakpoint !== 0;
         currentBreakpoint = 0;
         /**
@@ -26252,13 +26303,13 @@ const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, ba
             backdropAnimation.keyframes([
                 {
                     offset: 0,
-                    opacity: staticBackdropOpacity
+                    opacity: usePhysicsBasedGesture
                         ? 'var(--backdrop-opacity)'
                         : `calc(var(--backdrop-opacity) * ${getBackdropValueForSheet(1 - breakpointOffset, backdropBreakpoint)})`,
                 },
                 {
                     offset: 1,
-                    opacity: staticBackdropOpacity
+                    opacity: usePhysicsBasedGesture
                         ? 'var(--backdrop-opacity)'
                         : `calc(var(--backdrop-opacity) * ${getBackdropValueForSheet(snapToBreakpoint, backdropBreakpoint)})`,
                 },
@@ -26278,6 +26329,12 @@ const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, ba
             }
             animation.progressStep(0);
         }
+        /**
+         * Apply the appropriate easing curve for this snap behavior.
+         */
+        if (usePhysicsBasedGesture) {
+            animation.easing(easing);
+        }
         /**
          * Gesture should remain disabled until the
          * snapping animation completes.
@@ -26367,7 +26424,7 @@ const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, ba
                  * be added every time onEnd runs.
                  */
             }, { oneTimeCallback: true })
-                .progressEnd(1, 0, animated ? 500 : 0);
+                .progressEnd(1, 0, animated ? duration : 0);
         });
     };
     /**
@@ -26378,7 +26435,7 @@ const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, ba
      * @param deltaY The change in Y position since the gesture started.
      * @returns The snap breakpoint value.
      */
-    const calculateSnapBreakpoint = (deltaY) => {
+    const calculatePositionSnapBreakpoint = (deltaY) => {
         /**
          * Calculates the real-time vertical position of the modal.
          * We combine the wrapper's current bounding box position with the
@@ -26398,6 +26455,50 @@ const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, ba
         });
         return snapBreakpoint;
     };
+    /**
+     * Calculates the snap breakpoint using velocity-based logic.
+     * This provides a more intuitive and responsive sheet behavior for the Ionic theme.
+     *
+     * Rules:
+     * 1. Fast downward flick (> 500 px/s) always dismisses, regardless of position
+     * 2. Fast upward flick (> 400 px/s) snaps to the next breakpoint above
+     * 3. If dragged 40% below current snap point without fast upward flick, dismisses
+     * 4. Otherwise, falls back to position-based snap (closest breakpoint)
+     *
+     * @param deltaY The change in Y position since gesture started
+     * @param velocityY The velocity in pixels per millisecond
+     * @param currentY The current Y position of the gesture
+     * @returns The snap breakpoint value
+     */
+    const calculateVelocitySnapBreakpoint = (deltaY, velocityY, currentY) => {
+        // Convert velocity from px/ms to px/s for easier threshold comparison
+        const velocityYPerSecond = velocityY * 1000;
+        // Calculate current progress (0 = fully closed, 1 = fully expanded)
+        const currentProgress = calculateProgress(currentY);
+        // Rule 1: Fast downward flick always dismisses
+        if (velocityYPerSecond > 500) {
+            return minBreakpoint;
+        }
+        // Rule 2: Fast upward flick moves to next breakpoint above
+        if (velocityYPerSecond < -400) {
+            // Find next breakpoint above current position
+            const nextBreakpoint = breakpoints.find((bp) => bp > currentProgress);
+            // If no breakpoint above, stay at max breakpoint
+            return nextBreakpoint !== null && nextBreakpoint !== void 0 ? nextBreakpoint : maxBreakpoint;
+        }
+        // Rule 3: 40% dismissal rule (only if not flicking up and 0 breakpoint exists)
+        if (minBreakpoint === 0 && currentBreakpoint > 0) {
+            // Calculate how far we've moved below the current snap point
+            const distanceBelowSnap = currentBreakpoint - currentProgress;
+            const percentageBelowSnap = distanceBelowSnap / currentBreakpoint;
+            // If dragged more than 40% below and not flicking up, dismiss
+            if (percentageBelowSnap > 0.4 && velocityYPerSecond <= 400) {
+                return 0;
+            }
+        }
+        // Rule 4: Fallback to position-based snap (existing logic)
+        return calculatePositionSnapBreakpoint(deltaY);
+    };
     /**
      * Calculates the progress of the swipe gesture.
      *
@@ -26646,7 +26747,7 @@ const clearSafeAreaOverrides = (hostEl) => {
     hostEl.style.removeProperty('--ion-safe-area-right');
 };
 
-const modalIonicCss = () => `:host{--width:100%;--min-width:auto;--max-width:auto;--height:100%;--min-height:auto;--max-height:auto;--overflow:hidden;--border-width:0;--border-style:none;--border-color:transparent;--box-shadow:none;right:0;left:0;top:0;bottom:0;display:-ms-flexbox;display:flex;position:absolute;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;outline:none;contain:strict}.modal-wrapper,ion-backdrop{pointer-events:auto}:host(.overlay-hidden){display:none}.modal-wrapper,.modal-shadow{border-radius:var(--border-radius);width:var(--width);min-width:var(--min-width);max-width:var(--max-width);height:var(--height);min-height:var(--min-height);max-height:var(--max-height);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);background:var(--background);-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow);overflow:var(--overflow);z-index:10}.modal-shadow{position:absolute;background:transparent}.modal-handle{-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;position:absolute;-webkit-transform:translateZ(0);transform:translateZ(0);border:0;cursor:pointer;z-index:11}.modal-handle::before{position:absolute;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);content:""}:host(.modal-sheet) .modal-wrapper,:host(.modal-sheet) .modal-shadow{position:absolute;bottom:0}:host(.modal-sheet.modal-no-expand-scroll) ion-footer{position:absolute;bottom:0;width:var(--width)}:host{--background:var(--token-bg-surface-default, var(--token-primitives-base-white, #ffffff));--box-shadow:var(--token-elevation-3, 0px 2px 7px 0px rgba(0, 0, 0, 0.05), 0px 6px 32px 0px rgba(0, 0, 0, 0.16));--backdrop-opacity:1;color:var(--token-text-default, var(--token-primitives-neutral-1200, #242424))}:host(.modal-round){--border-radius:var(--token-border-radius-1000, var(--token-scale-1000, 40px))}:host(.modal-soft){--border-radius:var(--token-border-radius-400, var(--token-scale-400, 16px))}:host(.modal-rectangular){--border-radius:var(--token-border-radius-0, var(--token-scale-0, 0px))}:host(.select-modal.modal-default){--max-height:45%;--max-width:calc(100% - (var(--token-space-400, var(--token-scale-400, 16px)) * 2));--min-height:340px}.modal-handle{right:0px;left:0px;top:var(--token-space-300, var(--token-scale-300, 12px));border-radius:var(--token-border-radius-100, var(--token-scale-100, 4px));width:var(--token-scale-1100, 44px);height:var(--token-scale-100, 4px);background-color:var(--token-primitives-neutral-300, #e0e0e0)}.modal-handle::before{-webkit-padding-start:var(--token-space-100, var(--token-scale-100, 4px));padding-inline-start:var(--token-space-100, var(--token-scale-100, 4px));-webkit-padding-end:var(--token-space-100, var(--token-scale-100, 4px));padding-inline-end:var(--token-space-100, var(--token-scale-100, 4px));padding-top:var(--token-space-100, var(--token-scale-100, 4px));padding-bottom:var(--token-space-100, var(--token-scale-100, 4px))}:host(.modal-sheet) .modal-wrapper{border-start-start-radius:var(--border-radius);border-start-end-radius:var(--border-radius);border-end-end-radius:0;border-end-start-radius:0}:host(.modal-sheet){--height:calc(100% - (var(--ion-safe-area-top) + var(--token-scale-250, 10px)))}`;
+const modalIonicCss = () => `:host{--width:100%;--min-width:auto;--max-width:auto;--height:100%;--min-height:auto;--max-height:auto;--overflow:hidden;--border-width:0;--border-style:none;--border-color:transparent;--box-shadow:none;right:0;left:0;top:0;bottom:0;display:-ms-flexbox;display:flex;position:absolute;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;outline:none;contain:strict}.modal-wrapper,ion-backdrop{pointer-events:auto}:host(.overlay-hidden){display:none}.modal-wrapper,.modal-shadow{border-radius:var(--border-radius);width:var(--width);min-width:var(--min-width);max-width:var(--max-width);height:var(--height);min-height:var(--min-height);max-height:var(--max-height);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);background:var(--background);-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow);overflow:var(--overflow);z-index:10}.modal-shadow{position:absolute;background:transparent}.modal-handle{-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;position:absolute;-webkit-transform:translateZ(0);transform:translateZ(0);border:0;cursor:pointer;z-index:11}.modal-handle::before{position:absolute;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);content:""}:host(.modal-sheet) .modal-wrapper,:host(.modal-sheet) .modal-shadow{position:absolute;bottom:0}:host(.modal-sheet.modal-no-expand-scroll) ion-footer{position:absolute;bottom:0;width:var(--width)}:host{--background:var(--token-bg-surface-default, var(--token-primitives-base-white, #ffffff));--box-shadow:var(--token-elevation-3, 0px 2px 7px 0px rgba(0, 0, 0, 0.05), 0px 6px 32px 0px rgba(0, 0, 0, 0.16));--backdrop-opacity:0.7;color:var(--token-text-default, var(--token-primitives-neutral-1200, #242424))}:host(.modal-round){--border-radius:var(--token-border-radius-1000, var(--token-scale-1000, 40px))}:host(.modal-soft){--border-radius:var(--token-border-radius-400, var(--token-scale-400, 16px))}:host(.modal-rectangular){--border-radius:var(--token-border-radius-0, var(--token-scale-0, 0px))}:host(.select-modal.modal-default){--max-height:45%;--max-width:calc(100% - (var(--token-space-400, var(--token-scale-400, 16px)) * 2));--min-height:340px}.modal-handle{right:0px;left:0px;top:var(--token-space-300, var(--token-scale-300, 12px));border-radius:var(--token-border-radius-100, var(--token-scale-100, 4px));width:var(--token-scale-1100, 44px);height:var(--token-scale-100, 4px);background-color:var(--token-primitives-neutral-300, #e0e0e0)}.modal-handle::before{-webkit-padding-start:var(--token-space-100, var(--token-scale-100, 4px));padding-inline-start:var(--token-space-100, var(--token-scale-100, 4px));-webkit-padding-end:var(--token-space-100, var(--token-scale-100, 4px));padding-inline-end:var(--token-space-100, var(--token-scale-100, 4px));padding-top:var(--token-space-100, var(--token-scale-100, 4px));padding-bottom:var(--token-space-100, var(--token-scale-100, 4px))}:host(.modal-sheet) .modal-wrapper{border-start-start-radius:var(--border-radius);border-start-end-radius:var(--border-radius);border-end-end-radius:0;border-end-start-radius:0}:host(.modal-sheet){--height:calc(100% - (var(--ion-safe-area-top) + var(--token-scale-250, 10px)))}`;
 
 const modalIosCss = () => `:host{--width:100%;--min-width:auto;--max-width:auto;--height:100%;--min-height:auto;--max-height:auto;--overflow:hidden;--border-width:0;--border-style:none;--border-color:transparent;--box-shadow:none;right:0;left:0;top:0;bottom:0;display:-ms-flexbox;display:flex;position:absolute;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;outline:none;contain:strict}.modal-wrapper,ion-backdrop{pointer-events:auto}:host(.overlay-hidden){display:none}.modal-wrapper,.modal-shadow{border-radius:var(--border-radius);width:var(--width);min-width:var(--min-width);max-width:var(--max-width);height:var(--height);min-height:var(--min-height);max-height:var(--max-height);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);background:var(--background);-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow);overflow:var(--overflow);z-index:10}.modal-shadow{position:absolute;background:transparent}.modal-handle{-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;position:absolute;-webkit-transform:translateZ(0);transform:translateZ(0);border:0;cursor:pointer;z-index:11}.modal-handle::before{position:absolute;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);content:""}:host(.modal-sheet) .modal-wrapper,:host(.modal-sheet) .modal-shadow{position:absolute;bottom:0}:host(.modal-sheet.modal-no-expand-scroll) ion-footer{position:absolute;bottom:0;width:var(--width)}:host{--background:var(--ion-background-color, #fff);--border-radius:0;--backdrop-opacity:0;color:var(--ion-text-color, #000)}@media only screen and (min-width: 768px) and (min-height: 600px){:host{--width:600px;--height:500px;--ion-safe-area-top:0px;--ion-safe-area-bottom:0px;--ion-safe-area-right:0px;--ion-safe-area-left:0px}}@media only screen and (min-width: 768px) and (min-height: 768px){:host{--width:600px;--height:600px}}.modal-handle{right:0px;left:0px;top:5px;border-radius:8px;width:36px;height:5px;background:var(--ion-color-step-350, var(--ion-background-color-step-350, #c0c0be))}.modal-handle::before{-webkit-padding-start:4px;padding-inline-start:4px;-webkit-padding-end:4px;padding-inline-end:4px;padding-top:4px;padding-bottom:4px;width:36px;height:5px}:host(.modal-sheet){--height:calc(100% - (var(--ion-modal-offset-top, 0px) + 10px))}:host{--backdrop-opacity:var(--ion-backdrop-opacity, 0.4)}:host(.modal-card),:host(.modal-sheet){--border-radius:10px}@media only screen and (min-width: 768px) and (min-height: 600px){:host{--border-radius:10px}}.modal-wrapper{-webkit-transform:translate3d(0,  100%,  0);transform:translate3d(0,  100%,  0)}@media screen and (max-width: 767px){@supports (width: max(0px, 1px)){:host(.modal-card){--height:calc(100% - max(30px, var(--ion-safe-area-top)) - 10px)}}@supports not (width: max(0px, 1px)){:host(.modal-card){--height:calc(100% - 40px)}}:host(.modal-card) .modal-wrapper{border-start-start-radius:var(--border-radius);border-start-end-radius:var(--border-radius);border-end-end-radius:0;border-end-start-radius:0}:host(.modal-card){--backdrop-opacity:0;--width:100%;-ms-flex-align:end;align-items:flex-end}:host(.modal-card) .modal-shadow{display:none}:host(.modal-card) ion-backdrop{pointer-events:none}}@media screen and (min-width: 768px){:host(.modal-card){--width:calc(100% - 120px);--height:calc(100% - (120px + var(--ion-safe-area-top) + var(--ion-safe-area-bottom)));--max-width:720px;--max-height:1000px;--backdrop-opacity:0;--box-shadow:0px 0px 30px 10px rgba(0, 0, 0, 0.1);-webkit-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out}:host(.modal-card) .modal-wrapper{-webkit-box-shadow:none;box-shadow:none}:host(.modal-card) .modal-shadow{-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow)}}:host(.modal-sheet) .modal-wrapper{border-start-start-radius:var(--border-radius);border-start-end-radius:var(--border-radius);border-end-end-radius:0;border-end-start-radius:0}`;
 
@@ -27097,7 +27198,7 @@ class Modal {
             this.statusBarStyle = await StatusBar.getStyle();
             setCardStatusBarDark();
         }
-        await present(this, 'modalEnter', iosEnterAnimation$3, mdEnterAnimation$2, {
+        await present(this, 'modalEnter', iosEnterAnimation$3, mdEnterAnimation$2, ionicEnterAnimation, {
             presentingEl: presentingElement,
             currentBreakpoint: this.initialBreakpoint,
             backdropBreakpoint: this.backdropBreakpoint,
@@ -27784,20 +27885,20 @@ class Modal {
         const isHandleCycle = handleBehavior === 'cycle';
         const shape = this.getShape();
         const isSheetModalWithHandle = isSheetModal && showHandle;
-        return (hAsync(Host, Object.assign({ key: '4b323edb66d28260c34b31fd2af8f4ae53a7ef90', "no-router": true,
+        return (hAsync(Host, Object.assign({ key: '3011c8f49c1ccb6c20c01db35b59fe4f6e22ec01', "no-router": true,
             // Allow the modal to be navigable when the handle is focusable
             tabIndex: isHandleCycle && isSheetModalWithHandle ? 0 : -1 }, htmlAttributes, { style: {
                 zIndex: `${20000 + this.overlayIndex}`,
-            }, class: Object.assign({ [theme]: true, ['modal-default']: !isCardModal && !isSheetModal, [`modal-card`]: isCardModal, [`modal-sheet`]: isSheetModal, [`modal-${shape}`]: shape !== undefined, [`modal-no-expand-scroll`]: isSheetModal && !expandToScroll, 'overlay-hidden': true, [FOCUS_TRAP_DISABLE_CLASS]: focusTrap === false }, getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonModalDidPresent: this.onLifecycle, onIonModalWillPresent: this.onLifecycle, onIonModalWillDismiss: this.onLifecycle, onIonModalDidDismiss: this.onLifecycle, onFocus: this.onModalFocus }), hAsync("ion-backdrop", { key: '6059e348dc3d020f995577dde1b7949bdb2c0f2f', ref: (el) => (this.backdropEl = el), visible: this.showBackdrop, tappable: this.backdropDismiss, part: "backdrop" }), theme === 'ios' && hAsync("div", { key: '5a08a99dfc3de51ac7516fc76fdba3672f84db71', class: "modal-shadow" }), hAsync("div", Object.assign({ key: 'a7a841a5b2f740fbf576b82b82782aa235b701ee',
+            }, class: Object.assign({ [theme]: true, ['modal-default']: !isCardModal && !isSheetModal, [`modal-card`]: isCardModal, [`modal-sheet`]: isSheetModal, [`modal-${shape}`]: shape !== undefined, [`modal-no-expand-scroll`]: isSheetModal && !expandToScroll, 'overlay-hidden': true, [FOCUS_TRAP_DISABLE_CLASS]: focusTrap === false }, getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonModalDidPresent: this.onLifecycle, onIonModalWillPresent: this.onLifecycle, onIonModalWillDismiss: this.onLifecycle, onIonModalDidDismiss: this.onLifecycle, onFocus: this.onModalFocus }), hAsync("ion-backdrop", { key: 'ab99fb4ff1b335b06d5676890012dfe3cd1a1a01', ref: (el) => (this.backdropEl = el), visible: this.showBackdrop, tappable: this.backdropDismiss, part: "backdrop" }), theme === 'ios' && hAsync("div", { key: '95d4c79c4455c6a5ae6d581fa9dfaabdbee8c567', class: "modal-shadow" }), hAsync("div", Object.assign({ key: '2d7d2406cdb986c69ef52708d33eca67d8a877f8',
             /*
               role and aria-modal must be used on the
               same element. They must also be set inside the
               shadow DOM otherwise ion-button will not be highlighted
               when using VoiceOver: https://bugs.webkit.org/show_bug.cgi?id=247134
             */
-            role: "dialog" }, inheritedAttributes, { "aria-modal": "true", class: "modal-wrapper ion-overlay-wrapper", part: "content", ref: (el) => (this.wrapperEl = el) }), showHandle && (hAsync("button", { key: 'ca5567e9ab3e9e80b41314d396106faf2da09ffe', class: "modal-handle",
+            role: "dialog" }, inheritedAttributes, { "aria-modal": "true", class: "modal-wrapper ion-overlay-wrapper", part: "content", ref: (el) => (this.wrapperEl = el) }), showHandle && (hAsync("button", { key: 'ccec8bfc314763bd6dd868b69fbfdc085f5957c9', class: "modal-handle",
             // Prevents the handle from receiving keyboard focus when it does not cycle
-            tabIndex: !isHandleCycle ? -1 : 0, "aria-label": "Activate to adjust the size of the dialog overlaying the screen", onClick: isHandleCycle ? this.onHandleClick : undefined, part: "handle", ref: (el) => (this.dragHandleEl = el) })), hAsync("slot", { key: 'da5471ea4292166798d3f949e79e7b3e55a0e83f', onSlotchange: this.onSlotChange }))));
+            tabIndex: !isHandleCycle ? -1 : 0, "aria-label": "Activate to adjust the size of the dialog overlaying the screen", onClick: isHandleCycle ? this.onHandleClick : undefined, part: "handle", ref: (el) => (this.dragHandleEl = el) })), hAsync("slot", { key: '38469e3447b46983783627d697e12cadcef614fa', onSlotchange: this.onSlotChange }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -32212,7 +32313,7 @@ class Popover {
         else if (!this.keepContentsMounted) {
             await waitForMount();
         }
-        await present(this, 'popoverEnter', iosEnterAnimation$1, mdEnterAnimation$1, {
+        await present(this, 'popoverEnter', iosEnterAnimation$1, mdEnterAnimation$1, undefined, {
             event: event || this.event,
             size: this.size,
             trigger: this.triggerEl,
@@ -32321,9 +32422,9 @@ class Popover {
         const { onLifecycle, parentPopover, dismissOnSelect, side, arrow, htmlAttributes, focusTrap } = this;
         const desktop = isPlatform('desktop');
         const enableArrow = arrow && !parentPopover;
-        return (hAsync(Host, Object.assign({ key: 'cc70f9b037b16ea78b999916106a1062ceb74cb6', "aria-modal": "true", "no-router": true, tabindex: "-1" }, htmlAttributes, { style: {
+        return (hAsync(Host, Object.assign({ key: 'ba8801218aa8543eae0e8e2c57fbd0d4fbb2c8ff', "aria-modal": "true", "no-router": true, tabindex: "-1" }, htmlAttributes, { style: {
                 zIndex: `${20000 + this.overlayIndex}`,
-            }, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [theme]: true, 'popover-translucent': this.translucent, 'overlay-hidden': true, 'popover-desktop': desktop, [`popover-side-${side}`]: true, [FOCUS_TRAP_DISABLE_CLASS]: focusTrap === false, 'popover-nested': !!parentPopover }), onIonPopoverDidPresent: onLifecycle, onIonPopoverWillPresent: onLifecycle, onIonPopoverWillDismiss: onLifecycle, onIonPopoverDidDismiss: onLifecycle, onIonBackdropTap: this.onBackdropTap }), !parentPopover && hAsync("ion-backdrop", { key: 'e641e7ee28cbd54911ec3f8c0bfd9d7e3f2e85cd', tappable: this.backdropDismiss, visible: this.showBackdrop, part: "backdrop" }), hAsync("div", { key: '750494585c3524b27e42d79f02e729f3eff9e660', class: "popover-wrapper ion-overlay-wrapper", onClick: dismissOnSelect ? () => this.dismiss() : undefined }, enableArrow && hAsync("div", { key: '2e49b4ad1287e31a3cdbfebc91120405a998dc95', class: "popover-arrow", part: "arrow" }), hAsync("div", { key: '306586776e74acab787b2a96433553005bca580d', class: "popover-content", part: "content" }, hAsync("slot", { key: '0273c0975cd7dc37db5cfa0b91d418867a77c4d8' })))));
+            }, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [theme]: true, 'popover-translucent': this.translucent, 'overlay-hidden': true, 'popover-desktop': desktop, [`popover-side-${side}`]: true, [FOCUS_TRAP_DISABLE_CLASS]: focusTrap === false, 'popover-nested': !!parentPopover }), onIonPopoverDidPresent: onLifecycle, onIonPopoverWillPresent: onLifecycle, onIonPopoverWillDismiss: onLifecycle, onIonPopoverDidDismiss: onLifecycle, onIonBackdropTap: this.onBackdropTap }), !parentPopover && hAsync("ion-backdrop", { key: '0301c9a9ed70cf34445e89484cd4145dc98f3d4c', tappable: this.backdropDismiss, visible: this.showBackdrop, part: "backdrop" }), hAsync("div", { key: 'd017b8cda9eb474cf990222c90539697308a1c8f', class: "popover-wrapper ion-overlay-wrapper", onClick: dismissOnSelect ? () => this.dismiss() : undefined }, enableArrow && hAsync("div", { key: 'fdf8ec2e98a29bfa3e26788e4a432ff402800202', class: "popover-arrow", part: "arrow" }), hAsync("div", { key: '9498eace0a68daf39e7c0580ca46e33a9791f62c', class: "popover-content", part: "content" }, hAsync("slot", { key: '0f10c7e335d2f4f75e10d7fde5244c3dd5ae0bb4' })))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -39936,7 +40037,7 @@ class Tab {
     }; }
 }
 
-const tabBarIonicCss = () => `:host{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;border-top:var(--border);background:var(--background);color:var(--color);text-align:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-box-sizing:content-box !important;box-sizing:content-box !important}:host(.ion-color) ::slotted(ion-tab-button.ion-focused),:host(.tab-bar-translucent) ::slotted(ion-tab-button.ion-focused){background:var(--background-focused)}:host(.tab-bar-translucent) ::slotted(ion-tab-button){background:transparent}:host([slot=top]){border-top:0;border-bottom:var(--border)}:host(.tab-bar-hidden){display:none !important}:host(.tab-bar-full){width:auto;contain:strict;padding-bottom:var(--ion-safe-area-bottom, 0);padding-right:var(--ion-safe-area-right);padding-left:var(--ion-safe-area-left);}:host([slot=top].tab-bar-full){padding-top:var(--ion-safe-area-top, 0);padding-bottom:0}:host{--background:var(--ion-tab-bar-background, var(--token-bg-surface-default, var(--token-primitives-base-white, #ffffff)));--background-activated:var(--ion-tab-bar-background-activated, var(--token-bg-select-default, var(--token-semantics-primary-100, var(--token-primitives-blue-100, #e9ecfc))));--background-focused:var(--ion-tab-bar-background-focused, transparent);--border:var(--token-border-size-0, var(--token-scale-0, 0px)) var(--token-border-style-solid, solid) var(--ion-tab-bar-border-color, transparent);--color:var(--ion-tab-bar-color, var(--token-primitives-neutral-800, #626262));--color-selected:var(--ion-tab-bar-color-selected, var(--token-text-primary, var(--token-semantics-primary-900, var(--token-primitives-blue-900, #0d4bc3))));-ms-flex-pack:unset;justify-content:unset;max-width:100%;min-height:calc(var(--token-scale-1400, 56px) - var(--token-space-100, var(--token-scale-100, 4px)) * 2);gap:var(--token-space-300, var(--token-scale-300, 12px));-webkit-box-shadow:var(--token-elevation-2, 0px 1px 5px 0px rgba(0, 0, 0, 0.05), 0px 8px 25px 0px rgba(0, 0, 0, 0.08));box-shadow:var(--token-elevation-2, 0px 1px 5px 0px rgba(0, 0, 0, 0.05), 0px 8px 25px 0px rgba(0, 0, 0, 0.08));overflow:auto hidden;z-index:10}:host(.tab-bar-full){padding-top:var(--token-space-100, var(--token-scale-100, 4px));padding-bottom:calc(var(--token-space-100, var(--token-scale-100, 4px)) + var(--ion-safe-area-bottom, 0));padding-right:calc(var(--token-space-400, var(--token-scale-400, 16px)) + var(--ion-safe-area-right, 0));padding-left:calc(var(--token-space-400, var(--token-scale-400, 16px)) + var(--ion-safe-area-left, 0));}:host([slot=top].tab-bar-full){padding-top:calc(var(--token-space-100, var(--token-scale-100, 4px)) + var(--ion-safe-area-top, 0));padding-bottom:var(--token-space-100, var(--token-scale-100, 4px))}:host(.tab-bar-compact){-webkit-padding-start:var(--token-space-400, var(--token-scale-400, 16px));padding-inline-start:var(--token-space-400, var(--token-scale-400, 16px));-webkit-padding-end:var(--token-space-400, var(--token-scale-400, 16px));padding-inline-end:var(--token-space-400, var(--token-scale-400, 16px));padding-top:var(--token-space-100, var(--token-scale-100, 4px));padding-bottom:var(--token-space-100, var(--token-scale-100, 4px));position:absolute;-ms-flex-item-align:center;align-self:center;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;contain:content}:host([slot=top].tab-bar-compact){top:calc(var(--token-space-100, var(--token-scale-100, 4px)) + var(--ion-safe-area-top, 0))}:host([slot=bottom].tab-bar-compact){bottom:calc(var(--token-space-400, var(--token-scale-400, 16px)) + var(--ion-safe-area-bottom, 0))}@supports ((-webkit-backdrop-filter: blur(0)) or (backdrop-filter: blur(0))){:host(.tab-bar-translucent){--background:rgba(255, 255, 255, 0.6);-webkit-backdrop-filter:var(--tab-bar-backdrop-filter, blur(12px));backdrop-filter:var(--tab-bar-backdrop-filter, blur(12px))}:host(.tab-bar-translucent) ::slotted(ion-tab-button.ion-focused){--background:transparent}}:host(.tab-bar-soft){border-radius:var(--token-border-radius-400, var(--token-scale-400, 16px))}:host(.tab-bar-round){border-radius:var(--token-border-radius-full, 999px)}:host(.tab-bar-rectangular){border-radius:var(--token-border-radius-0, var(--token-scale-0, 0px))}`;
+const tabBarIonicCss = () => `:host{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;border-top:var(--border);background:var(--background);color:var(--color);text-align:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-box-sizing:content-box !important;box-sizing:content-box !important}:host(.ion-color) ::slotted(ion-tab-button.ion-focused),:host(.tab-bar-translucent) ::slotted(ion-tab-button.ion-focused){background:var(--background-focused)}:host(.tab-bar-translucent) ::slotted(ion-tab-button){background:transparent}:host([slot=top]){border-top:0;border-bottom:var(--border)}:host(.tab-bar-hidden){display:none !important}:host(.tab-bar-full){width:auto;contain:strict;padding-bottom:var(--ion-safe-area-bottom, 0);padding-right:var(--ion-safe-area-right);padding-left:var(--ion-safe-area-left);}:host([slot=top].tab-bar-full){padding-top:var(--ion-safe-area-top, 0);padding-bottom:0}:host{--background:var(--ion-tab-bar-background, var(--token-bg-surface-default, var(--token-primitives-base-white, #ffffff)));--background-activated:var(--ion-tab-bar-background-activated, var(--token-bg-select-default, var(--token-semantics-primary-100, var(--token-primitives-blue-100, #e9ecfc))));--background-focused:var(--ion-tab-bar-background-focused, transparent);--border:var(--token-border-size-0, var(--token-scale-0, 0px)) var(--token-border-style-solid, solid) var(--ion-tab-bar-border-color, transparent);--color:var(--ion-tab-bar-color, var(--token-primitives-neutral-800, #626262));--color-selected:var(--ion-tab-bar-color-selected, var(--token-text-primary, var(--token-semantics-primary-900, var(--token-primitives-blue-900, #0d4bc3))));-ms-flex-pack:unset;justify-content:unset;max-width:100%;min-height:calc(var(--token-scale-1400, 56px) - var(--token-space-100, var(--token-scale-100, 4px)) * 2);gap:var(--token-space-300, var(--token-scale-300, 12px));-webkit-box-shadow:var(--token-elevation-2, 0px 1px 5px 0px rgba(0, 0, 0, 0.05), 0px 8px 25px 0px rgba(0, 0, 0, 0.08));box-shadow:var(--token-elevation-2, 0px 1px 5px 0px rgba(0, 0, 0, 0.05), 0px 8px 25px 0px rgba(0, 0, 0, 0.08));overflow:auto hidden;z-index:10}:host(.tab-bar-full){padding-top:var(--token-space-100, var(--token-scale-100, 4px));padding-bottom:calc(var(--token-space-100, var(--token-scale-100, 4px)) + var(--ion-safe-area-bottom, 0));padding-right:calc(var(--token-space-400, var(--token-scale-400, 16px)) + var(--ion-safe-area-right, 0));padding-left:calc(var(--token-space-400, var(--token-scale-400, 16px)) + var(--ion-safe-area-left, 0));}:host([slot=top].tab-bar-full){padding-top:calc(var(--token-space-100, var(--token-scale-100, 4px)) + var(--ion-safe-area-top, 0));padding-bottom:var(--token-space-100, var(--token-scale-100, 4px))}:host(.tab-bar-compact){-webkit-padding-start:var(--token-space-400, var(--token-scale-400, 16px));padding-inline-start:var(--token-space-400, var(--token-scale-400, 16px));-webkit-padding-end:var(--token-space-400, var(--token-scale-400, 16px));padding-inline-end:var(--token-space-400, var(--token-scale-400, 16px));padding-top:var(--token-space-100, var(--token-scale-100, 4px));padding-bottom:var(--token-space-100, var(--token-scale-100, 4px));position:absolute;-ms-flex-item-align:center;align-self:center;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;-webkit-transform:translateX(-50%);transform:translateX(-50%);contain:content}:host(.tab-bar-compact){inset-inline-start:50%}:host([slot=top].tab-bar-compact){top:calc(var(--token-space-100, var(--token-scale-100, 4px)) + var(--ion-safe-area-top, 0))}:host([slot=bottom].tab-bar-compact){bottom:calc(var(--token-space-400, var(--token-scale-400, 16px)) + var(--ion-safe-area-bottom, 0))}:host(.tab-bar-hide-on-scroll){-webkit-transition:-webkit-transform var(--token-transition-time-200, 200ms) var(--token-transition-curve-spring, cubic-bezier(0.16, 1, 0.3, 1));transition:-webkit-transform var(--token-transition-time-200, 200ms) var(--token-transition-curve-spring, cubic-bezier(0.16, 1, 0.3, 1));transition:transform var(--token-transition-time-200, 200ms) var(--token-transition-curve-spring, cubic-bezier(0.16, 1, 0.3, 1));transition:transform var(--token-transition-time-200, 200ms) var(--token-transition-curve-spring, cubic-bezier(0.16, 1, 0.3, 1)), -webkit-transform var(--token-transition-time-200, 200ms) var(--token-transition-curve-spring, cubic-bezier(0.16, 1, 0.3, 1))}:host(.tab-bar-scroll-hidden){-webkit-transform:translateY(calc(100% + var(--ion-safe-area-bottom, 0) + var(--token-space-1000, var(--token-scale-1000, 40px)))) translateX(-50%);transform:translateY(calc(100% + var(--ion-safe-area-bottom, 0) + var(--token-space-1000, var(--token-scale-1000, 40px)))) translateX(-50%);-webkit-transition:-webkit-transform var(--token-transition-time-350, 350ms) var(--token-transition-curve-base, cubic-bezier(0.4, 0, 1, 1));transition:-webkit-transform var(--token-transition-time-350, 350ms) var(--token-transition-curve-base, cubic-bezier(0.4, 0, 1, 1));transition:transform var(--token-transition-time-350, 350ms) var(--token-transition-curve-base, cubic-bezier(0.4, 0, 1, 1));transition:transform var(--token-transition-time-350, 350ms) var(--token-transition-curve-base, cubic-bezier(0.4, 0, 1, 1)), -webkit-transform var(--token-transition-time-350, 350ms) var(--token-transition-curve-base, cubic-bezier(0.4, 0, 1, 1))}:host([slot=top].tab-bar-scroll-hidden){-webkit-transform:translateY(-100%) translateX(-50%);transform:translateY(-100%) translateX(-50%)}@supports ((-webkit-backdrop-filter: blur(0)) or (backdrop-filter: blur(0))){:host(.tab-bar-translucent){--background:rgba(255, 255, 255, 0.6);-webkit-backdrop-filter:var(--tab-bar-backdrop-filter, blur(12px));backdrop-filter:var(--tab-bar-backdrop-filter, blur(12px))}:host(.tab-bar-translucent) ::slotted(ion-tab-button.ion-focused){--background:transparent}}:host(.tab-bar-soft){border-radius:var(--token-border-radius-400, var(--token-scale-400, 16px))}:host(.tab-bar-round){border-radius:var(--token-border-radius-full, 999px)}:host(.tab-bar-rectangular){border-radius:var(--token-border-radius-0, var(--token-scale-0, 0px))}`;
 
 const tabBarIosCss = () => `:host{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;border-top:var(--border);background:var(--background);color:var(--color);text-align:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-box-sizing:content-box !important;box-sizing:content-box !important}:host(.ion-color) ::slotted(ion-tab-button.ion-focused),:host(.tab-bar-translucent) ::slotted(ion-tab-button.ion-focused){background:var(--background-focused)}:host(.tab-bar-translucent) ::slotted(ion-tab-button){background:transparent}:host([slot=top]){border-top:0;border-bottom:var(--border)}:host(.tab-bar-hidden){display:none !important}:host(.tab-bar-full){width:auto;contain:strict;padding-bottom:var(--ion-safe-area-bottom, 0);padding-right:var(--ion-safe-area-right);padding-left:var(--ion-safe-area-left);}:host([slot=top].tab-bar-full){padding-top:var(--ion-safe-area-top, 0);padding-bottom:0}:host{z-index:10}:host(.ion-color) ::slotted(ion-tab-button){--background-focused:var(--ion-color-shade);--color-selected:var(--ion-color-contrast)}:host(.ion-color) ::slotted(.tab-selected){color:var(--ion-color-contrast)}:host(.ion-color),:host(.ion-color) ::slotted(ion-tab-button){color:rgba(var(--ion-color-contrast-rgb), 0.7)}:host(.ion-color),:host(.ion-color) ::slotted(ion-tab-button){background:var(--ion-color-base)}:host{--background:var(--ion-tab-bar-background, var(--ion-color-step-50, var(--ion-background-color-step-50, #f7f7f7)));--background-focused:var(--ion-tab-bar-background-focused, #e0e0e0);--border:0.55px solid var(--ion-tab-bar-border-color, var(--ion-border-color, var(--ion-color-step-150, var(--ion-background-color-step-150, rgba(0, 0, 0, 0.2)))));--color:var(--ion-tab-bar-color, var(--ion-color-step-600, var(--ion-text-color-step-400, #666666)));--color-selected:var(--ion-tab-bar-color-selected, var(--ion-color-primary, #0054e9));height:50px}@supports ((-webkit-backdrop-filter: blur(0)) or (backdrop-filter: blur(0))){:host(.tab-bar-translucent){--background:rgba(var(--ion-background-color-rgb, 255, 255, 255), 0.8);-webkit-backdrop-filter:saturate(210%) blur(20px);backdrop-filter:saturate(210%) blur(20px)}:host(.ion-color.tab-bar-translucent){background:rgba(var(--ion-color-base-rgb), 0.8)}:host(.tab-bar-translucent) ::slotted(ion-tab-button.ion-focused){background:rgba(var(--ion-background-color-rgb, 255, 255, 255), 0.6)}}`;
 
@@ -39954,7 +40055,16 @@ class TabBar {
         this.keyboardCtrl = null;
         this.keyboardCtrlPromise = null;
         this.didLoad = false;
+        this.lastScrollTop = 0;
+        this.scrollDirectionChangeTop = 0;
         this.keyboardVisible = false;
+        this.scrollHidden = false;
+        /**
+         * If `true`, the tab bar will be hidden when the user scrolls down
+         * and shown when the user scrolls up.
+         * Only applies when the theme is `"ionic"` and `expand` is `"compact"`.
+         */
+        this.hideOnScroll = false;
         /**
          * If `true`, the tab bar will be translucent.
          * Only applies when the theme is `"ios"` and the device supports
@@ -39996,6 +40106,7 @@ class TabBar {
                 tab: this.selectedTab,
             });
         }
+        this.setupHideOnScroll();
     }
     async connectedCallback() {
         const promise = createKeyboardController(async (keyboardOpen, waitForResize) => {
@@ -40033,6 +40144,63 @@ class TabBar {
             this.keyboardCtrl.destroy();
             this.keyboardCtrl = null;
         }
+        this.destroyHideOnScroll();
+    }
+    setupHideOnScroll() {
+        var _a;
+        const theme = getIonTheme(this);
+        if (theme !== 'ionic' || !this.hideOnScroll || this.expand !== 'compact') {
+            return;
+        }
+        const footerEl = this.el.closest('ion-footer');
+        const pageEl = (_a = footerEl === null || footerEl === void 0 ? void 0 : footerEl.closest('ion-page, .ion-page')) !== null && _a !== void 0 ? _a : this.el.closest('ion-page, .ion-page');
+        const contentEl = pageEl ? findIonContent(pageEl) : null;
+        if (!contentEl) {
+            return;
+        }
+        this.initScrollListener(contentEl);
+    }
+    async initScrollListener(contentEl) {
+        const scrollEl = (this.scrollEl = await getScrollElement(contentEl));
+        this.contentScrollCallback = () => {
+            readTask(() => {
+                const scrollTop = scrollEl.scrollTop;
+                const shouldHide = this.checkScrollStatus(scrollTop);
+                if (shouldHide !== this.scrollHidden) {
+                    writeTask(() => {
+                        this.scrollHidden = shouldHide;
+                    });
+                }
+                this.lastScrollTop = scrollTop;
+            });
+        };
+        scrollEl.addEventListener('scroll', this.contentScrollCallback, { passive: true });
+    }
+    destroyHideOnScroll() {
+        if (this.scrollEl && this.contentScrollCallback) {
+            this.scrollEl.removeEventListener('scroll', this.contentScrollCallback);
+            this.contentScrollCallback = undefined;
+        }
+    }
+    checkScrollStatus(scrollTop) {
+        // Always visible within the first 80px of scroll
+        const visibleZone = 80;
+        // Hides after 60px of continuous downward scrolling only, when scrolling up threashold should be 0px
+        const scrollThresholdHide = 60;
+        if (scrollTop <= visibleZone) {
+            return false;
+        }
+        const isScrollingDown = scrollTop > this.lastScrollTop;
+        const wasScrollingDown = this.lastScrollTop > this.scrollDirectionChangeTop;
+        if (isScrollingDown !== wasScrollingDown) {
+            this.scrollDirectionChangeTop = this.lastScrollTop;
+        }
+        const delta = Math.abs(scrollTop - this.scrollDirectionChangeTop);
+        const threshold = isScrollingDown ? scrollThresholdHide : 0;
+        if (delta < threshold) {
+            return this.scrollHidden;
+        }
+        return isScrollingDown;
     }
     getShape() {
         const theme = getIonTheme(this);
@@ -40047,17 +40215,19 @@ class TabBar {
         return shape;
     }
     render() {
-        const { color, translucent, keyboardVisible, expand } = this;
+        const { color, translucent, keyboardVisible, scrollHidden, expand, hideOnScroll } = this;
         const theme = getIonTheme(this);
         const shape = this.getShape();
         const shouldHide = keyboardVisible && this.el.getAttribute('slot') !== 'top';
-        return (hAsync(Host, { key: 'e6466b90b72ed2e62c8c20fee2bc0b262ca4ccae', role: "tablist", "aria-hidden": shouldHide ? 'true' : null, class: createColorClasses$1(color, {
+        return (hAsync(Host, { key: '7a91bb00ad289d94d34271bdecefb7221c093fd6', role: "tablist", "aria-hidden": shouldHide ? 'true' : null, class: createColorClasses$1(color, {
                 [theme]: true,
                 'tab-bar-translucent': translucent,
                 'tab-bar-hidden': shouldHide,
+                'tab-bar-hide-on-scroll': hideOnScroll,
+                'tab-bar-scroll-hidden': scrollHidden,
                 [`tab-bar-${expand}`]: true,
                 [`tab-bar-${shape}`]: shape !== undefined,
-            }) }, hAsync("slot", { key: '6801f9523822178692d9091b0132f1b1dd41892d' })));
+            }) }, hAsync("slot", { key: '96ad10c451a6ae1e2b7c48d94d0f158fb8cde1dc' })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -40076,10 +40246,12 @@ class TabBar {
         "$members$": {
             "color": [513],
             "selectedTab": [1, "selected-tab"],
+            "hideOnScroll": [4, "hide-on-scroll"],
             "translucent": [4],
             "expand": [1],
             "shape": [1],
-            "keyboardVisible": [32]
+            "keyboardVisible": [32],
+            "scrollHidden": [32]
         },
         "$listeners$": undefined,
         "$lazyBundleId$": "-",
@@ -41776,7 +41948,7 @@ class Toast {
          * in the dismiss animation.
          */
         this.lastPresentedPosition = animationPosition;
-        await present(this, 'toastEnter', iosEnterAnimation, mdEnterAnimation, {
+        await present(this, 'toastEnter', iosEnterAnimation, mdEnterAnimation, undefined, {
             position,
             top: animationPosition.top,
             bottom: animationPosition.bottom,
@@ -41991,9 +42163,9 @@ class Toast {
         if (layout === 'stacked' && startButtons.length > 0 && endButtons.length > 0) {
             printIonWarning('[ion-toast] - This toast is using start and end buttons with the stacked toast layout. We recommend following the best practice of using either start or end buttons with the stacked toast layout.', el);
         }
-        return (hAsync(Host, Object.assign({ key: '3507eaa18a5559a9052d34db180e176952dc466f', tabindex: "-1" }, this.htmlAttributes, { style: {
+        return (hAsync(Host, Object.assign({ key: '6fd286b024a05e6960f7b4b7947a3c26cc129e14', tabindex: "-1" }, this.htmlAttributes, { style: {
                 zIndex: `${60000 + this.overlayIndex}`,
-            }, class: createColorClasses$1(this.color, Object.assign(Object.assign({ [mode]: true, [theme]: true }, getClassMap(this.cssClass)), { 'overlay-hidden': true, 'toast-translucent': this.translucent, [`toast-shape-${shape}`]: shape !== undefined, [`toast-hue-${hue}`]: hue !== undefined })), onIonToastWillDismiss: this.dispatchCancelHandler }), hAsync("div", { key: '195eb90ccd82a13254e843b80be0f380325accb4', class: wrapperClass, part: "wrapper" }, hAsync("div", { key: 'd6072aa4a4848d72e68e04a7842d3f769f844ffc', class: "toast-container", part: "container" }, this.renderButtons(startButtons, 'start'), this.icon !== undefined && (hAsync("ion-icon", { key: '02a1d72aaf401d27671906c8b84abd823def6da8', class: "toast-icon", part: "icon", icon: this.icon, lazy: false, "aria-hidden": "true" })), hAsync("div", { key: '1f133c27927ad840f58ea2e9112719ef880bf9a5', class: "toast-content", part: "content", role: "status", "aria-atomic": "true", "aria-live": "polite" }, !revealContentToScreenReader && header !== undefined && this.renderHeader('oldHeader', 'true'), !revealContentToScreenReader && message !== undefined && this.renderToastMessage('oldMessage', 'true'), revealContentToScreenReader && header !== undefined && this.renderHeader('header'), revealContentToScreenReader && message !== undefined && this.renderToastMessage('header')), this.renderButtons(endButtons, 'end')))));
+            }, class: createColorClasses$1(this.color, Object.assign(Object.assign({ [mode]: true, [theme]: true }, getClassMap(this.cssClass)), { 'overlay-hidden': true, 'toast-translucent': this.translucent, [`toast-shape-${shape}`]: shape !== undefined, [`toast-hue-${hue}`]: hue !== undefined })), onIonToastWillDismiss: this.dispatchCancelHandler }), hAsync("div", { key: '42aa178a6c7f25841bb6e257810c37b6a5703b1f', class: wrapperClass, part: "wrapper" }, hAsync("div", { key: '5cb2f2566ce8ab76de6a79ecac02a354eb242c58', class: "toast-container", part: "container" }, this.renderButtons(startButtons, 'start'), this.icon !== undefined && (hAsync("ion-icon", { key: 'f5a60e1b8c95bbbb829e3b9b01db64ab5229265a', class: "toast-icon", part: "icon", icon: this.icon, lazy: false, "aria-hidden": "true" })), hAsync("div", { key: 'a903491644c03391f66432253cc8365c782b056d', class: "toast-content", part: "content", role: "status", "aria-atomic": "true", "aria-live": "polite" }, !revealContentToScreenReader && header !== undefined && this.renderHeader('oldHeader', 'true'), !revealContentToScreenReader && message !== undefined && this.renderToastMessage('oldMessage', 'true'), revealContentToScreenReader && header !== undefined && this.renderHeader('header'), revealContentToScreenReader && message !== undefined && this.renderToastMessage('header')), this.renderButtons(endButtons, 'end')))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ionic/core",
-  "version": "8.8.4-dev.11776710869.1a81ced2",
+  "version": "8.8.4-dev.11776868665.169e5ee1",
   "description": "Base components for Ionic",
   "engines": {
     "node": ">= 16"
@@ -68,7 +68,7 @@
     "fs-extra": "^9.0.1",
     "jest": "^29.7.0",
     "jest-cli": "^29.7.0",
-    "outsystems-design-tokens": "^1.3.7",
+    "outsystems-design-tokens": "^1.3.8",
     "playwright-core": "^1.58.2",
     "prettier": "^2.8.8",
     "rollup": "^2.26.4",