voyager-ionic-core 9.0.6 → 9.0.9

package/dist/collection/components/input/input.js

@@ -2,7 +2,7 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { Build, Host, forceUpdate, h, } from "@stencil/core";
-import { createClickController, createNotchController, createStartContainerController, checkInvalidState, } from "../../utils/forms/index";
+import { createClickController, createNotchController, createStartEndContainerController, checkInvalidState, } from "../../utils/forms/index";
 import { inheritAriaAttributes, debounceEvent, inheritAttributes, componentOnReady } from "../../utils/helpers";
 import { createSlotMutationController } from "../../utils/slot-mutation-controller";
 import { createColorClasses, hostContext } from "../../utils/theme";
@@ -238,16 +238,16 @@ export class Input {
     connectedCallback() {
         const { el } = this;
         this.slotMutationController = createSlotMutationController(el, ['label', 'start', 'end'], () => {
-            this.startContainerController?.calculateStartContainerWidth();
+            this.startEndContainerController?.calculateContainerWidths();
             this.setSlottedLabelId();
             forceUpdate(this);
         });
         this.setSlottedLabelId();
         this.notchController = createNotchController(el, () => this.notchSpacerEl, () => this.labelSlot);
-        this.startContainerController = createStartContainerController(el, () => this.startContainerEl, () => {
+        this.startEndContainerController = createStartEndContainerController(el, () => this.startContainerEl, () => this.endContainerEl, () => {
             return Build.isBrowser && getIonMode(this) === 'md' && this.fill === 'outline';
         });
-        this.startContainerController.calculateStartContainerWidth();
+        this.startEndContainerController.calculateContainerWidths();
         this.clickController = createClickController(el, () => this.nativeInput);
         // Watch for class changes to update validation state
         if (Build.isBrowser && typeof MutationObserver !== 'undefined') {
@@ -286,7 +286,7 @@ export class Input {
     }
     componentDidRender() {
         this.notchController?.calculateNotchWidth();
-        this.startContainerController?.calculateStartContainerWidth();
+        this.startEndContainerController?.calculateContainerWidths();
     }
     disconnectedCallback() {
         if (Build.isBrowser) {
@@ -302,9 +302,9 @@ export class Input {
             this.notchController.destroy();
             this.notchController = undefined;
         }
-        if (this.startContainerController) {
-            this.startContainerController.destroy();
-            this.startContainerController = undefined;
+        if (this.startEndContainerController) {
+            this.startEndContainerController.destroy();
+            this.startEndContainerController = undefined;
         }
         // Clean up validation observer to prevent memory leaks
         if (this.validationObserver) {
@@ -524,7 +524,7 @@ export class Input {
          * the input has a value or is focused.
          */
         const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || hasFocus));
-        return (h(Host, { key: '290cf987de670276bf40b9f19d35d3769d9c0540', class: createColorClasses(this.color, {
+        return (h(Host, { key: '0d03d37173639105b19083c0b44da25d9115a449', class: createColorClasses(this.color, {
                 [mode]: true,
                 'has-value': hasValue,
                 'has-focus': hasFocus,
@@ -535,14 +535,14 @@ export class Input {
                 'in-item': inItem,
                 'in-item-color': hostContext('ion-item.ion-color', this.el),
                 'input-disabled': disabled,
-            }) }, h("label", { key: '27f4bd671f6084a7e608e4f9442192c950879dc2', class: "input-wrapper", htmlFor: inputId, onClick: this.onLabelClick }, hasOutlineFill && this.renderOutlineContainer(), h("div", { key: '7827c61ffdd02952fc8cf2096f621b50fc51ec03', class: "input-start", ref: (el) => (this.startContainerEl = el) }, h("slot", { key: '1d8af52d3506742d87334b388859a8bf613e1be0', name: "start" })), h("div", { key: '927a412064538c00df98fabc06a32c564d05e984', class: "input-control" }, this.renderLabel(), h("div", { key: '05f80c0b11a7da57445f976bd2dbb557fa63c9bc', class: "native-wrapper", onClick: this.onLabelClick }, h("input", { key: 'cb6f5d81ba7c2a04cc4c9deb5d3f5bca8562b6db', class: "native-input", ref: (input) => (this.nativeInput = input), id: inputId, disabled: disabled, autoCapitalize: this.autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect ? 'on' : 'off', autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, min: this.min, max: this.max, minLength: this.minlength, maxLength: this.maxlength, multiple: this.multiple, name: this.name, pattern: this.pattern, placeholder: this.placeholder || '', readOnly: readonly, required: this.required, spellcheck: this.spellcheck, step: this.step, type: this.type, value: value, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeydown, onCompositionstart: this.onCompositionStart, onCompositionend: this.onCompositionEnd, "aria-describedby": this.getHintTextID(), "aria-invalid": this.isInvalid ? 'true' : undefined, "aria-labelledby": this.getLabelledById(), ...this.inheritedAttributes }))), h("div", { key: '82cd1b0458dcd491fd1a46b29764f2b79a969bc6', class: "input-end" }, this.clearInput && !readonly && !disabled && (h("button", { key: 'dfcf0ed81cf36fc61b8e12ed4605ac6b6eb50dad', "aria-label": "reset", type: "button", class: "input-clear-icon", onPointerDown: (ev) => {
+            }) }, h("label", { key: '1d62890b6a54229fccae0832eebe92e546e6e53d', class: "input-wrapper", htmlFor: inputId, onClick: this.onLabelClick }, hasOutlineFill && this.renderOutlineContainer(), h("div", { key: 'b1ceeb7666678569f6479729d556a29b8e549ce5', class: "input-start", ref: (el) => (this.startContainerEl = el) }, h("slot", { key: '1af55c89b1390ff9063a6c6d49a1e8bd01c7c78e', name: "start" })), h("div", { key: '6df6bc5521352ca87aeb400d169b0c9129521249', class: "input-control" }, this.renderLabel(), h("div", { key: '55d2b3a235332d7fbf61356b13052b5c9cda01de', class: "native-wrapper", onClick: this.onLabelClick }, h("input", { key: 'a938cb7ef2e87bde9da310817e1a48e7a5c67bc3', class: "native-input", ref: (input) => (this.nativeInput = input), id: inputId, disabled: disabled, autoCapitalize: this.autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect ? 'on' : 'off', autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, min: this.min, max: this.max, minLength: this.minlength, maxLength: this.maxlength, multiple: this.multiple, name: this.name, pattern: this.pattern, placeholder: this.placeholder || '', readOnly: readonly, required: this.required, spellcheck: this.spellcheck, step: this.step, type: this.type, value: value, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeydown, onCompositionstart: this.onCompositionStart, onCompositionend: this.onCompositionEnd, "aria-describedby": this.getHintTextID(), "aria-invalid": this.isInvalid ? 'true' : undefined, "aria-labelledby": this.getLabelledById(), ...this.inheritedAttributes }))), h("div", { key: 'c99685e001ee133220d74cfa877a72063d46433c', class: "input-end", ref: (el) => (this.endContainerEl = el) }, this.clearInput && !readonly && !disabled && (h("button", { key: '0e0e154182cca8b5367c1586b3c8c5b20b38006b', "aria-label": "reset", type: "button", class: "input-clear-icon", onPointerDown: (ev) => {
                 /**
                  * This prevents mobile browsers from
                  * blurring the input when the clear
                  * button is activated.
                  */
                 ev.preventDefault();
-            }, onClick: this.clearTextInput }, h("ion-icon", { key: '11e2c866135f332e81b4637de178e1c5c7da0d38', "aria-hidden": "true", icon: clearIconData }))), h("slot", { key: 'afb0e75e7103b2bf925a9c7649c93eb1d5702670', name: "end" })), shouldRenderHighlight && h("div", { key: '1f305bba279e93685d7139acf0aff6bf4a77500c', class: "input-highlight" })), this.renderBottomContent()));
+            }, onClick: this.clearTextInput }, h("ion-icon", { key: '655e8d25940dbfb96e7e83b6e89575337e3e91d3', "aria-hidden": "true", icon: clearIconData }))), h("slot", { key: '6104c04ae34a26da62095de70c752efb2a0417ab', name: "end" })), shouldRenderHighlight && h("div", { key: 'c85cd8e07397e0bbd1e5a120014d83f391dfbc4c', class: "input-highlight" })), this.renderBottomContent()));
     }
     static get is() { return "ion-input"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/input/input.md.css

@@ -425,7 +425,11 @@
    * would not be able to see what they are typing.
    */
   max-width: 200px;
-  transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1), transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
+  /**
+   * The max-width animates with the transform so the label does not
+   * reveal its full floating width while it is still at full size.
+   */
+  transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1), transform 150ms cubic-bezier(0.4, 0, 0.2, 1), max-width 150ms cubic-bezier(0.4, 0, 0.2, 1);
   /**
    * This ensures that double tapping this text
    * clicks the <label> and focuses the input
@@ -439,8 +443,8 @@
  * disable the label transition to prevent the floating label
  * from animating as its position is adjusted.
  *
- * This class is applied by the start container controller, so
- * renaming it here requires renaming it there too.
+ * This class is applied by the start and end container controller,
+ * so renaming it here requires renaming it there too.
  */
 :host(.skip-label-transition) .label-text-wrapper {
   transition: none;
@@ -946,12 +950,20 @@
   --padding-end: 16px;
   /**
    * The measured width of the start container, as a negative offset
-   * in LTR and a positive one in RTL. Written to the host by the
-   * start container controller, so renaming it here requires renaming
+   * in LTR and a positive one in RTL. Written to the host by the start
+   * and end container controller, so renaming it here requires renaming
    * it there too. Declared with a default so the label is positioned
    * correctly before the first measurement runs.
    */
   --internal-start-container-adjustment: 0px;
+  /**
+   * The measured combined width of the start and end containers.
+   * Written to the host by the start and end container controller, so
+   * renaming it here requires renaming it there too. Declared with a
+   * default so the floating label falls back to the width of the
+   * control before the first measurement runs.
+   */
+  --internal-start-end-container-width: 0px;
   min-height: 56px;
 }
 
@@ -1007,11 +1019,12 @@
 }
 
 /**
- * The resting label is positioned relative to the control so it can size to
- * the space between the start and end slots. When floating, the label needs
- * to escape the control and position itself relative to the wrapper instead.
+ * The label is positioned relative to the control whether it is resting
+ * over the input or floating in the notch, so its max-width always resolves
+ * against the same width. This lets the max-width animate between the
+ * resting and floating values without jumping.
  */
-:host(.input-fill-outline:not(.label-floating)) .input-control {
+:host(.input-fill-outline) .input-control {
   position: relative;
 }
 
@@ -1020,9 +1033,8 @@
   transform-origin: left top;
   position: absolute;
   /**
-   * While resting this is the width of the text input, which already
-   * excludes the start and end slots. Once the label floats the
-   * containing block becomes the wrapper and the rule below takes over.
+   * This is the width of the text input, which already
+   * excludes the start and end slots.
    */
   max-width: 100%;
 }
@@ -1055,10 +1067,11 @@
   margin-top: 0;
   margin-bottom: 0;
   /**
-   * Label text should not extend
-   * beyond the bounds of the input.
+   * Label text should not extend beyond the bounds of the input.
+   * The control excludes the start and end slots, but the notch spans
+   * the full width of the outline, so their width is added back.
    */
-  max-width: calc((100% - var(--padding-start) - var(--padding-end) - 8px) / 0.75);
+  max-width: calc((100% + var(--internal-start-end-container-width) - 8px) / 0.75);
 }
 
 :host(.input-fill-outline) .input-outline-container {

package/dist/collection/components/input-otp/input-otp.js

@@ -19,6 +19,11 @@ export class InputOTP {
          * focus behavior when an input box is focused.
          */
         this.isKeyboardNavigation = false;
+        /**
+         * The `length` watcher runs before new inputs render, so
+         * `componentDidRender` updates their tab indexes instead.
+         */
+        this.updateTabIndexesAfterRender = false;
         this.inputValues = [];
         this.hasFocus = false;
         this.previousInputValues = [];
@@ -378,6 +383,10 @@ export class InputOTP {
         this.initializeValues();
         this.updateTabIndexes();
     }
+    lengthChanged() {
+        this.initializeValues();
+        this.updateTabIndexesAfterRender = true;
+    }
     /**
      * Processes the separators prop into an array of numbers.
      *
@@ -434,6 +443,12 @@ export class InputOTP {
     componentDidLoad() {
         this.updateTabIndexes();
     }
+    componentDidRender() {
+        if (this.updateTabIndexesAfterRender) {
+            this.updateTabIndexesAfterRender = false;
+            this.updateTabIndexes();
+        }
+    }
     /**
      * Get the regex pattern for allowed characters.
      * If a pattern is provided, use it to create a regex pattern
@@ -611,7 +626,7 @@ export class InputOTP {
         const tabbableIndex = this.getTabbableIndex();
         const pattern = this.getPattern();
         const hasDescription = el.querySelector('.input-otp-description')?.textContent?.trim() !== '';
-        return (h(Host, { key: 'bd37661e13cde21feff30c663e6813ce3fff0d9a', class: createColorClasses(color, {
+        return (h(Host, { key: 'def9fbd4fa135e6f435380c6ea86ac1621b4a111', class: createColorClasses(color, {
                 [mode]: true,
                 'has-focus': hasFocus,
                 [`input-otp-size-${size}`]: true,
@@ -619,10 +634,18 @@ export class InputOTP {
                 [`input-otp-fill-${fill}`]: true,
                 'input-otp-disabled': disabled,
                 'input-otp-readonly': readonly,
-            }) }, h("div", { key: '5e206f870024f1ecfebda999ff31e6e815774deb', role: "group", "aria-label": "One-time password input", class: "input-otp-group", ...inheritedAttributes }, Array.from({ length }).map((_, index) => (h(Fragment, null, h("div", { class: "native-wrapper" }, h("input", { class: "native-input", id: `${inputId}-${index}`, "aria-label": `Input ${index + 1} of ${length}`, type: "text", autoCapitalize: autocapitalize, inputmode: inputmode, pattern: pattern, disabled: disabled, readOnly: readonly, tabIndex: index === tabbableIndex ? 0 : -1, value: inputValues[index] || '', autocomplete: "one-time-code", ref: (el) => (inputRefs[index] = el), onInput: this.onInput(index), onBlur: this.onBlur, onFocus: this.onFocus(index), onKeyDown: this.onKeyDown(index), onPaste: this.onPaste })), this.showSeparator(index) && h("div", { class: "input-otp-separator" }))))), h("div", { key: 'c268f838ddab2c8d6a612a11c7d38e6ca076436d', class: {
+            }) }, h("div", { key: '5d3d7646a3d4fc856b7b2e1f53d29fca47b10baf', role: "group", "aria-label": "One-time password input", class: "input-otp-group", ...inheritedAttributes }, Array.from({ length }).map((_, index) => (h(Fragment, null, h("div", { class: "native-wrapper" }, h("input", { class: "native-input", id: `${inputId}-${index}`, "aria-label": `Input ${index + 1} of ${length}`, type: "text", autoCapitalize: autocapitalize, inputmode: inputmode, pattern: pattern, disabled: disabled, readOnly: readonly, tabIndex: index === tabbableIndex ? 0 : -1, value: inputValues[index] || '', autocomplete: "one-time-code", ref: (el) => {
+                if (el) {
+                    inputRefs[index] = el;
+                }
+                else {
+                    // The input was removed, so drop its ref and any after it.
+                    inputRefs.splice(index);
+                }
+            }, onInput: this.onInput(index), onBlur: this.onBlur, onFocus: this.onFocus(index), onKeyDown: this.onKeyDown(index), onPaste: this.onPaste })), this.showSeparator(index) && h("div", { class: "input-otp-separator" }))))), h("div", { key: '9d72a4ab35b5fdd6bba9701050c385ed253b310f', class: {
                 'input-otp-description': true,
                 'input-otp-description-hidden': !hasDescription,
-            } }, h("slot", { key: 'c0736359b26f609b795e399fc1ad9b540632af18' }))));
+            } }, h("slot", { key: '7deb3373c0d4e5deac22fa51577d271b9bb3a6d2' }))));
     }
     static get is() { return "ion-input-otp"; }
     static get encapsulation() { return "scoped"; }
@@ -1054,6 +1077,9 @@ export class InputOTP {
         return [{
                 "propName": "value",
                 "methodName": "valueChanged"
+            }, {
+                "propName": "length",
+                "methodName": "lengthChanged"
             }, {
                 "propName": "separators",
                 "methodName": "processSeparators"

package/dist/collection/components/menu/menu.js

@@ -5,7 +5,7 @@ import { Build, Host, h } from "@stencil/core";
 import { getTimeGivenProgression } from "../../utils/animation/cubic-bezier";
 import { focusFirstDescendant, focusLastDescendant } from "../../utils/focus-trap";
 import { GESTURE_CONTROLLER } from "../../utils/gesture/index";
-import { shouldUseCloseWatcher } from "../../utils/hardware-back-button";
+import { shouldUseCloseWatcher, updateCloseWatcher } from "../../utils/hardware-back-button";
 import { inheritAriaAttributes, assert, clamp, isEndSide as isEnd } from "../../utils/helpers";
 import { printIonError } from "../../utils/logging/index";
 import { menuController } from "../../utils/menu-controller/index";
@@ -560,6 +560,7 @@ export class Menu {
         // emit opened/closed events
         this._isOpen = isOpen;
         this.isAnimating = false;
+        updateCloseWatcher();
         if (!this._isOpen) {
             this.blocker.unblock();
         }
@@ -656,14 +657,14 @@ export class Menu {
          * the ionBackButton listener in the menu controller
          * will handle closing the menu when Escape is pressed.
          */
-        return (h(Host, { key: '1208ba437fa58680325408d3d4c8580950da1d68', onKeyDown: shouldUseCloseWatcher() ? null : this.onKeydown, role: "navigation", "aria-label": inheritedAttributes['aria-label'] || 'menu', class: {
+        return (h(Host, { key: '5cf26df26d4e539860cbeaea98ec621b98c3fcfc', onKeyDown: shouldUseCloseWatcher() ? null : this.onKeydown, role: "navigation", "aria-label": inheritedAttributes['aria-label'] || 'menu', class: {
                 [mode]: true,
                 [`menu-type-${type}`]: true,
                 'menu-enabled': !disabled,
                 [`menu-side-${side}`]: true,
                 'menu-pane-visible': isPaneVisible,
                 'split-pane-side': hostContext('ion-split-pane', el),
-            } }, h("div", { key: 'c0ddc957b7a7956b41901d77ae02d91e73071c55', class: "menu-inner", part: "container", ref: (el) => (this.menuInnerEl = el) }, h("slot", { key: '6e44c56116431a024f114ab85ded1b822c942fac' })), h("ion-backdrop", { key: '5f4bbcf84444d96ec6b02bf567e1aaf95f59078d', ref: (el) => (this.backdropEl = el), class: "menu-backdrop", tappable: false, stopPropagation: false, part: "backdrop" })));
+            } }, h("div", { key: 'f337016e293bb8665c99762e0c389dd6c372bb33', class: "menu-inner", part: "container", ref: (el) => (this.menuInnerEl = el) }, h("slot", { key: '4c3fe331aa42cd57d7ad9bd1f5910f8eeb62d7da' })), h("ion-backdrop", { key: '61af7ea876d81574841e1dd3e81e2352e555d096', ref: (el) => (this.backdropEl = el), class: "menu-backdrop", tappable: false, stopPropagation: false, part: "backdrop" })));
     }
     static get is() { return "ion-menu"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/modal/gestures/sheet.js

@@ -7,6 +7,8 @@ import { clamp, getElementRoot, raf } from "../../../utils/helpers";
 import { FOCUS_TRAP_DISABLE_CLASS } from "../../../utils/overlays";
 import { getBackdropValueForSheet } from "../utils";
 import { calculateSpringStep, canSwipeOnContent, handleCanDismiss } from "./utils";
+/** How far ahead, in milliseconds, a drag's velocity is projected when snapping. */
+const FLICK_PROJECTION_MS = 350;
 export const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, backdropBreakpoint, animation, breakpoints = [], expandToScroll, getCurrentBreakpoint, onDismiss, onBreakpointChange, onDragStart, onDragMove, onDragEnd) => {
     // Defaults for the sheet swipe animation
     const defaultBackdrop = [
@@ -32,6 +34,11 @@ export const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpo
     const contentEl = baseEl.querySelector('ion-content');
     // Cache the initial value so the gesture restores it instead of forcing scrolling on.
     const initialContentScrollY = contentEl?.scrollY ?? true;
+    /**
+     * The height of the sheet the user actually sees. This comes from the wrapper
+     * rather than the host element, which is stretched to the full viewport no
+     * matter how tall the sheet itself is.
+     */
     const height = wrapperEl.clientHeight;
     let currentBreakpoint = initialBreakpoint;
     let offset = 0;
@@ -329,18 +336,18 @@ export const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpo
             : step;
         offset = clamp(0.0001, processedStep, maxStep);
         animation.progressStep(offset);
-        const snapBreakpoint = calculateSnapBreakpoint(detail.deltaY);
+        const snapBreakpoint = calculateSnapBreakpoint(detail.deltaY, detail.velocityY);
         const eventDetail = {
             currentY: detail.currentY,
             deltaY: detail.deltaY,
             velocityY: detail.velocityY,
-            progress: calculateProgress(detail.currentY),
+            progress: calculateEventProgress(detail.deltaY),
             snapBreakpoint: snapBreakpoint,
         };
         onDragMove(eventDetail);
     };
     const onEnd = (detail) => {
-        const snapBreakpoint = calculateSnapBreakpoint(detail.deltaY);
+        const snapBreakpoint = calculateSnapBreakpoint(detail.deltaY, detail.velocityY);
         /**
          * `snapBreakpoint === 0` is not enough on its own. `canDismiss: false`
          * snaps to 0 but never dismisses, since `handleCanDismiss` returns early
@@ -354,7 +361,7 @@ export const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpo
             currentY: detail.currentY,
             deltaY: detail.deltaY,
             velocityY: detail.velocityY,
-            progress: calculateProgress(detail.currentY),
+            progress: calculateEventProgress(detail.deltaY),
             snapBreakpoint,
             isDismissing,
         };
@@ -530,24 +537,15 @@ export const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpo
         });
     };
     /**
-     * Calculates the breakpoint based on the current deltaY.
-     * This determines where the sheet should snap to when the user releases the
-     * gesture.
+     * Decides which breakpoint the sheet should settle on for the current drag.
      *
-     * @param deltaY The change in Y position since the gesture started.
-     * @returns The snap breakpoint value.
+     * @param deltaY The change in Y position since the gesture started
+     * @param velocityY The velocity in pixels per millisecond
+     * @returns The snap breakpoint value
      */
-    const calculateSnapBreakpoint = (deltaY) => {
-        /**
-         * Calculates the real-time vertical position of the modal.
-         * We combine the wrapper's current bounding box position with the
-         * gesture's deltaY to account for the physical movement during the drag.
-         */
-        const currentY = wrapperEl.getBoundingClientRect().top + deltaY;
-        /**
-         * Convert that pixel position back into a 0 to 1 progress value.
-         */
-        const currentProgress = calculateProgress(currentY);
+    const calculateSnapBreakpoint = (deltaY, velocityY) => {
+        // Project the drag forward so a quick flick counts.
+        const currentProgress = calculateProgress(deltaY + velocityY * FLICK_PROJECTION_MS);
         /**
          * Find and return the defined breakpoint that is closest to the
          * current progress.
@@ -558,74 +556,26 @@ export const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpo
         return snapBreakpoint;
     };
     /**
-     * Calculates the progress of the swipe gesture.
+     * Calculates how open the sheet is part way through a gesture, on the same
+     * 0 to 1 scale as the breakpoints: 1 is fully open and 0 is fully closed.
      *
-     * The progress is a value between 0 and 1 that represents how far
-     * the swipe has progressed towards closing the modal.
-     *
-     * A value closer to 1 means the modal is closer to being opened,
-     * while a value closer to 0 means the modal is closer to being closed.
-     *
-     * @param currentY The current Y position of the gesture
+     * @param deltaY The change in Y position since the gesture started
      * @returns The progress of the sheet gesture
      */
-    const calculateProgress = (currentY) => {
-        const minBreakpoint = breakpoints[0];
-        const maxBreakpoint = breakpoints[breakpoints.length - 1];
-        /**
-         * The lowest point the sheet can be dragged to aka the point at which
-         * the sheet is fully closed.
-         */
-        const maxY = convertBreakpointToY(minBreakpoint);
-        /**
-         * The highest point the sheet can be dragged to aka the point at which
-         * the sheet is fully open.
-         */
-        const minY = convertBreakpointToY(maxBreakpoint);
-        // The total distance between the fully open and fully closed positions.
-        const totalDistance = maxY - minY;
-        // The distance from the current position to the fully closed position.
-        const distanceFromBottom = maxY - currentY;
-        /**
-         * The progress represents how far the sheet is from the bottom relative
-         * to the total distance. When the user starts swiping up, the progress
-         * should be close to 1, and when the user has swiped all the way down,
-         * the progress should be close to 0.
-         */
-        const progress = distanceFromBottom / totalDistance;
+    const calculateProgress = (deltaY) => {
+        // Mirrors the animation step in onMove, so the snap matches where the sheet is drawn.
+        const progress = currentBreakpoint - deltaY / height;
         // Round to the nearest thousandth to avoid returning very small decimal
         const roundedProgress = Math.round(progress * 1000) / 1000;
-        return Math.max(0, Math.min(1, roundedProgress));
+        return clamp(0, roundedProgress, 1);
     };
     /**
-     * Converts a breakpoint value (0 to 1) into a pixel Y coordinate
-     * on the screen.
-     *
-     * @param breakpoint The breakpoint value (e.g., 0.5 for half-open)
-     * @returns The pixel Y coordinate on the screen
+     * Scales the progress from the lowest to the highest breakpoint, so the
+     * drag events report 0 at the lowest breakpoint and 1 at the highest.
      */
-    const convertBreakpointToY = (breakpoint) => {
-        const rect = baseEl.getBoundingClientRect();
-        const modalHeight = rect.height;
-        // The bottom of the screen.
-        const viewportBottom = window.innerHeight;
-        /**
-         * The active height is how much of the modal is actually showing
-         * on the screen for this specific breakpoint.
-         */
-        const activeHeight = modalHeight * breakpoint;
-        /**
-         * To find the Y coordinate, start at the bottom of the screen
-         * and move up by the active height of the modal.
-         *
-         * A breakpoint of 1.0 means the active height is the full modal height
-         * (fully open). A breakpoint of 0.0 means the active height is 0
-         * (fully closed).
-         *
-         * Since screen Y coordinates get smaller as you go up, we subtract the
-         * active height from the viewport bottom.
-         */
-        return viewportBottom - activeHeight;
+    const calculateEventProgress = (deltaY) => {
+        const progress = (calculateProgress(deltaY) - minBreakpoint) / (maxBreakpoint - minBreakpoint);
+        return clamp(0, progress, 1);
     };
     const gesture = createGesture({
         el: wrapperEl,

package/dist/collection/components/nav/nav.js

@@ -5,7 +5,7 @@ import { h } from "@stencil/core";
 import { getTimeGivenProgression } from "../../utils/animation/cubic-bezier";
 import { assert } from "../../utils/helpers";
 import { printIonWarning } from "../../utils/logging/index";
-import { lifecycle, setPageHidden, transition } from "../../utils/transition/index";
+import { blockSwipeClicks, lifecycle, setPageHidden, transition } from "../../utils/transition/index";
 import { config } from "../../global/config";
 import { getIonMode } from "../../global/ionic-global";
 import { LIFECYCLE_DID_LEAVE, LIFECYCLE_WILL_LEAVE, LIFECYCLE_WILL_UNLOAD } from "./constants";
@@ -68,6 +68,12 @@ export class Nav {
             this.gesture.destroy();
             this.gesture = undefined;
         }
+        // Destroying the gesture skips onEnd, so end a deferred swipe here.
+        if (this.unblockSwipeClicks) {
+            this.unblockSwipeClicks();
+            this.unblockSwipeClicks = undefined;
+            this.gestureOrAnimationInProgress = false;
+        }
         this.transInstr.length = 0;
         this.views.length = 0;
         this.destroyed = true;
@@ -688,6 +694,14 @@ export class Nav {
     }
     onStart() {
         this.gestureOrAnimationInProgress = true;
+        /**
+         * Without animations there's nothing for the swipe to drive, so
+         * wait until the gesture ends to decide whether to go back.
+         */
+        if (!(this.animated && config.getBoolean('animated', true))) {
+            this.unblockSwipeClicks = blockSwipeClicks(this.el);
+            return;
+        }
         this.pop({ direction: 'back', progressAnimation: true });
     }
     onMove(stepValue) {
@@ -721,10 +735,18 @@ export class Nav {
         }
         else {
             this.gestureOrAnimationInProgress = false;
+            const { unblockSwipeClicks } = this;
+            if (unblockSwipeClicks) {
+                this.unblockSwipeClicks = undefined;
+                if (shouldComplete) {
+                    this.pop({ direction: 'back' });
+                }
+                unblockSwipeClicks();
+            }
         }
     }
     render() {
-        return h("slot", { key: '1886154d3c2fa8511af4d641d269aaa4c0f45c05' });
+        return h("slot", { key: '0aea554c0cf00dd3829757ec74c3855eccf1e068' });
     }
     static get is() { return "ion-nav"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/router-outlet/router-outlet.js

@@ -7,7 +7,7 @@ import { attachComponent, detachComponent } from "../../utils/framework-delegate
 import { shallowEqualStringMap, hasLazyBuild } from "../../utils/helpers";
 import { createLockController } from "../../utils/lock-controller";
 import { printIonError } from "../../utils/logging/index";
-import { transition } from "../../utils/transition/index";
+import { blockSwipeClicks, transition } from "../../utils/transition/index";
 import { config } from "../../global/config";
 import { getIonMode } from "../../global/ionic-global";
 export class RouterOutlet {
@@ -32,6 +32,14 @@ export class RouterOutlet {
     async connectedCallback() {
         const onStart = () => {
             this.gestureOrAnimationInProgress = true;
+            /**
+             * Without animations there's nothing for the swipe to drive, so
+             * wait until the gesture ends to decide whether to go back.
+             */
+            if (!(this.animated && config.getBoolean('animated', true))) {
+                this.unblockSwipeClicks = blockSwipeClicks(this.el);
+                return;
+            }
             if (this.swipeHandler) {
                 this.swipeHandler.onStart();
             }
@@ -65,7 +73,21 @@ export class RouterOutlet {
                 this.ani.progressEnd(shouldComplete ? 1 : 0, newStepValue, dur);
             }
             else {
-                this.gestureOrAnimationInProgress = false;
+                const { swipeHandler, unblockSwipeClicks: unblock } = this;
+                this.unblockSwipeClicks = undefined;
+                // The stack can change during the swipe, so check that going back is still possible.
+                if (unblock && shouldComplete && swipeHandler?.canStart()) {
+                    new Promise((resolve) => resolve(swipeHandler.onStart()))
+                        .then(() => swipeHandler.onEnd(true))
+                        .finally(() => {
+                        this.gestureOrAnimationInProgress = false;
+                        unblock();
+                    });
+                }
+                else {
+                    this.gestureOrAnimationInProgress = false;
+                    unblock?.();
+                }
             }
         });
         if (this.swipeGesture === undefined) {
@@ -88,6 +110,12 @@ export class RouterOutlet {
             this.gesture.destroy();
             this.gesture = undefined;
         }
+        // Destroying the gesture skips onEnd, so end a deferred swipe here.
+        if (this.unblockSwipeClicks) {
+            this.unblockSwipeClicks();
+            this.unblockSwipeClicks = undefined;
+            this.gestureOrAnimationInProgress = false;
+        }
     }
     /** @internal */
     async commit(enteringEl, leavingEl, opts) {
@@ -199,7 +227,7 @@ export class RouterOutlet {
         return true;
     }
     render() {
-        return h("slot", { key: 'b84efe2b852f24f6b43e0667b25266f9223447ae' });
+        return h("slot", { key: '811f32d8794e58fcc79deef1e217c4d419778742' });
     }
     static get is() { return "ion-router-outlet"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/select/select.ios.css

@@ -390,7 +390,11 @@ button {
    * would not be able to see what they are typing.
    */
   max-width: 200px;
-  transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1), transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
+  /**
+   * The max-width animates with the transform so the label does not
+   * reveal its full floating width while it is still at full size.
+   */
+  transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1), transform 150ms cubic-bezier(0.4, 0, 0.2, 1), max-width 150ms cubic-bezier(0.4, 0, 0.2, 1);
   /**
    * This ensures that double tapping this text
    * clicks the <label> and focuses the input
@@ -404,8 +408,8 @@ button {
  * disable the label transition to prevent the floating label
  * from animating as its position is adjusted.
  *
- * This class is applied by the start container controller, so
- * renaming it here requires renaming it there too.
+ * This class is applied by the start and end container controller,
+ * so renaming it here requires renaming it there too.
  */
 :host(.skip-label-transition) .label-text-wrapper {
   transition: none;