voyager-ionic-core 9.0.7 → 9.0.9

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;

package/dist/collection/components/select/select.js

@@ -3,7 +3,7 @@
  */
 import { Build, Host, h, forceUpdate, } from "@stencil/core";
 import { ENABLE_HTML_CONTENT_DEFAULT } from "../../utils/config";
-import { compareOptions, createClickController, createNotchController, createStartContainerController, getSlottedClickContent, isOptionSelected, checkInvalidState, } from "../../utils/forms/index";
+import { compareOptions, createClickController, createNotchController, createStartEndContainerController, getSlottedClickContent, isOptionSelected, checkInvalidState, } from "../../utils/forms/index";
 import { focusVisibleElement, renderHiddenInput, inheritAttributes } from "../../utils/helpers";
 import { printIonWarning } from "../../utils/logging/index";
 import { actionSheetController, alertController, popoverController, modalController } from "../../utils/overlays";
@@ -186,14 +186,14 @@ export class Select {
     async connectedCallback() {
         const { el } = this;
         this.slotMutationController = createSlotMutationController(el, ['label', 'start', 'end'], () => {
-            this.startContainerController?.calculateStartContainerWidth();
+            this.startEndContainerController?.calculateContainerWidths();
             forceUpdate(this);
         });
         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.updateOverlayOptions();
         this.emitStyle();
@@ -274,9 +274,9 @@ export class Select {
             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) {
@@ -752,7 +752,7 @@ export class Select {
     }
     componentDidRender() {
         this.notchController?.calculateNotchWidth();
-        this.startContainerController?.calculateStartContainerWidth();
+        this.startEndContainerController?.calculateContainerWidths();
     }
     /**
      * Gets any content passed into the `label` slot,
@@ -940,7 +940,7 @@ export class Select {
         const hasOutlineFill = mode === 'md' && fill === 'outline';
         renderHiddenInput(true, el, name, parseValue(value), disabled);
         const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || hasFocus || isExpanded));
-        return (h(Host, { key: '31585557ac49c439939b5a084867f5039dc2f1ce', onClick: this.onClick, class: createColorClasses(this.color, {
+        return (h(Host, { key: 'c1949b8a58c5bde1cc7627d3b32c54bcb46a4752', onClick: this.onClick, class: createColorClasses(this.color, {
                 [mode]: true,
                 'in-item': inItem,
                 'in-item-color': hostContext('ion-item.ion-color', el),
@@ -958,7 +958,7 @@ export class Select {
                 [`select-justify-${justify}`]: justifyEnabled,
                 [`select-shape-${shape}`]: shape !== undefined,
                 [`select-label-placement-${labelPlacement}`]: true,
-            }) }, h("label", { key: '368f5f0c77550be6a743752dd1acbfe9915f0a3d', class: "select-wrapper", id: "select-label", onClick: this.onLabelClick, part: "wrapper" }, hasOutlineFill && this.renderOutlineContainer(), h("div", { key: '2e9039eaa15f398ebe54808ff659db89d3621681', class: "select-start", part: "start", ref: (el) => (this.startContainerEl = el) }, h("slot", { key: 'b83e362f89bd8cbc564ad7122778e3a0f08be66d', name: "start" })), h("div", { key: 'f55ac9fc3bbd9a4a3819a101a3780fc02ae8a8e0', class: "select-control", part: "control" }, this.renderLabel(), h("div", { key: 'e32984e57cda5cf341af8e354a2aef5a114827c0', class: "native-wrapper", ref: (el) => (this.nativeWrapperEl = el), part: "container" }, this.renderSelectText(), this.renderListbox(), !hasFloatingOrStackedLabel && this.renderSelectIcon())), h("div", { key: 'fc4cb7c392c46129afe709d9557ad9a10d72b564', class: "select-end", part: "end" }, hasFloatingOrStackedLabel && this.renderSelectIcon(), h("slot", { key: '6d65c92cdafe985a769fb3b41a58625077803eef', name: "end" })), shouldRenderHighlight && h("div", { key: '9a912c64d7cd77f074a069d126cd0bada1b71eed', class: "select-highlight" })), this.renderBottomContent()));
+            }) }, h("label", { key: 'af4521a3679d9e4e08511e205f53663d8d5b6701', class: "select-wrapper", id: "select-label", onClick: this.onLabelClick, part: "wrapper" }, hasOutlineFill && this.renderOutlineContainer(), h("div", { key: '73e13f28ed4c2b0e9115f3d1b86934b84f8c5bc0', class: "select-start", part: "start", ref: (el) => (this.startContainerEl = el) }, h("slot", { key: 'ce88e5bbb15a4cde6a5f8580a35d7099e315e9e6', name: "start" })), h("div", { key: 'd1557c3d0ff41f5070a27b719fbfaf18eafa9052', class: "select-control", part: "control" }, this.renderLabel(), h("div", { key: 'bcd03ac6c6d72ab76a4344069d83c29a2cdaabf0', class: "native-wrapper", ref: (el) => (this.nativeWrapperEl = el), part: "container" }, this.renderSelectText(), this.renderListbox(), !hasFloatingOrStackedLabel && this.renderSelectIcon())), h("div", { key: '9be05035c1efb5c332a0044c81e032215c81278b', class: "select-end", part: "end", ref: (el) => (this.endContainerEl = el) }, hasFloatingOrStackedLabel && this.renderSelectIcon(), h("slot", { key: '551ab0cf3594805caaf14f36197f9cc56b9ee46a', name: "end" })), shouldRenderHighlight && h("div", { key: 'dd500fb4ae7d91d1733fec521dac9baaef6654a0', class: "select-highlight" })), this.renderBottomContent()));
     }
     static get is() { return "ion-select"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/select/select.md.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;
@@ -981,12 +985,20 @@ button {
   --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;
 }
 
@@ -1056,9 +1068,8 @@ button {
 :host(.select-fill-outline.select-label-placement-floating) .label-text-wrapper {
   position: absolute;
   /**
-   * While resting this is the width of the select, 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 select, which already
+   * excludes the start and end slots.
    */
   max-width: 100%;
 }
@@ -1074,11 +1085,12 @@ button {
 }
 
 /**
- * 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 select 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(.select-fill-outline:not(.label-floating)) .select-control {
+:host(.select-fill-outline) .select-control {
   position: relative;
 }
 
@@ -1092,10 +1104,11 @@ button {
   margin-top: 0;
   margin-bottom: 0;
   /**
-   * Label text should not extend
-   * beyond the bounds of the select.
+   * Label text should not extend beyond the bounds of the select.
+   * 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);
 }
 
 /**

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

@@ -453,7 +453,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 textarea
@@ -467,8 +471,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;

package/dist/collection/components/textarea/textarea.js

@@ -2,7 +2,7 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { Build, Host, forceUpdate, h, writeTask, } 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";
@@ -194,14 +194,14 @@ export class Textarea {
     connectedCallback() {
         const { el } = this;
         this.slotMutationController = createSlotMutationController(el, ['label', 'start', 'end'], () => {
-            this.startContainerController?.calculateStartContainerWidth();
+            this.startEndContainerController?.calculateContainerWidths();
             forceUpdate(this);
         });
         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') {
@@ -241,9 +241,9 @@ export class Textarea {
             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) {
@@ -263,7 +263,7 @@ export class Textarea {
     }
     componentDidRender() {
         this.notchController?.calculateNotchWidth();
-        this.startContainerController?.calculateStartContainerWidth();
+        this.startEndContainerController?.calculateContainerWidths();
     }
     /**
      * Sets focus on the native `textarea` in `ion-textarea`. Use this method instead of the global
@@ -458,7 +458,7 @@ export class Textarea {
          * the textarea has a value or is focused.
          */
         const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || hasFocus));
-        return (h(Host, { key: '0f01ed6565313c45beaea5e0aa429a86b9cfa1a0', class: createColorClasses(this.color, {
+        return (h(Host, { key: '59f577d7b82036d5e12d7b4e7d5f0339af1d185a', class: createColorClasses(this.color, {
                 [mode]: true,
                 'has-value': hasValue,
                 'has-focus': hasFocus,
@@ -467,7 +467,7 @@ export class Textarea {
                 [`textarea-shape-${shape}`]: shape !== undefined,
                 [`textarea-label-placement-${labelPlacement}`]: true,
                 'textarea-disabled': disabled,
-            }) }, h("label", { key: 'a59548c3d3bf66543fd6e06b5c3b6e649f963164', class: "textarea-wrapper", htmlFor: inputId, onClick: this.onLabelClick }, hasOutlineFill && this.renderOutlineContainer(), h("div", { key: '29055193d664d9fe84ba0340fdcbbc54fec0e403', class: "textarea-start", ref: (el) => (this.startContainerEl = el) }, h("slot", { key: '2cc122d9541ce7ae3c2309c27123b6c6c91cbfc7', name: "start" })), h("div", { key: 'c847a6fa1eaf6ef2b296415cd72bdd3aee9828a2', class: "textarea-control" }, this.renderLabel(), h("div", { key: 'f9205f82d6346daa86dc7e0f6e1eb221c76ed7b0', class: "native-wrapper", ref: (el) => (this.textareaWrapper = el) }, h("textarea", { key: '0bdb517fa5b3a44eeb3bb2ed1f9a8eab21a9a6a1', class: "native-textarea", ref: (el) => (this.nativeInput = el), id: inputId, disabled: disabled, autoCapitalize: this.autocapitalize, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, minLength: this.minlength, maxLength: this.maxlength, name: this.name, placeholder: this.placeholder || '', readOnly: this.readonly, required: this.required, spellcheck: this.spellcheck, cols: this.cols, rows: this.rows, wrap: this.wrap, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeyDown, "aria-describedby": this.getHintTextID(), "aria-invalid": this.isInvalid ? 'true' : undefined, ...this.inheritedAttributes }, value))), h("div", { key: '1ce661b800ef12146bdb97fb193e22be227ea052', class: "textarea-end" }, h("slot", { key: 'aca5704db48fe8e0e784cf57f2978ae2d63b3edc', name: "end" })), shouldRenderHighlight && h("div", { key: 'd916816d44cbdb4bc9a05032c5490eaa9bf3ba47', class: "textarea-highlight" })), this.renderBottomContent()));
+            }) }, h("label", { key: '4684c4e760f0272d377809fcb28ed6fcad48b542', class: "textarea-wrapper", htmlFor: inputId, onClick: this.onLabelClick }, hasOutlineFill && this.renderOutlineContainer(), h("div", { key: 'a3dd0e7b9494fce1ee33d011138600e8b697b227', class: "textarea-start", ref: (el) => (this.startContainerEl = el) }, h("slot", { key: '8f0a36f2373c859039b1437a0fdf8e7bef278272', name: "start" })), h("div", { key: '2cb3def25a6447aefb656e5fd89716be280055f1', class: "textarea-control" }, this.renderLabel(), h("div", { key: '613caadf5331ff4d9b52e1d2b22a7da36b248e76', class: "native-wrapper", ref: (el) => (this.textareaWrapper = el) }, h("textarea", { key: '3015a96367fa845f068118c5ae2484c4c8f30931', class: "native-textarea", ref: (el) => (this.nativeInput = el), id: inputId, disabled: disabled, autoCapitalize: this.autocapitalize, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, minLength: this.minlength, maxLength: this.maxlength, name: this.name, placeholder: this.placeholder || '', readOnly: this.readonly, required: this.required, spellcheck: this.spellcheck, cols: this.cols, rows: this.rows, wrap: this.wrap, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeyDown, "aria-describedby": this.getHintTextID(), "aria-invalid": this.isInvalid ? 'true' : undefined, ...this.inheritedAttributes }, value))), h("div", { key: 'f97f361e9339125407b0ef5f53d8c55021f1f824', class: "textarea-end", ref: (el) => (this.endContainerEl = el) }, h("slot", { key: '032bd68ec3603f8cf598225714e02447712a283a', name: "end" })), shouldRenderHighlight && h("div", { key: '8e27cee63918d2f40a46c442a3bb2802be4cf3e4', class: "textarea-highlight" })), this.renderBottomContent()));
     }
     static get is() { return "ion-textarea"; }
     static get encapsulation() { return "scoped"; }