@ionic/core 9.0.8 → 9.0.9-nightly.20261016

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/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();
             }
@@ -64,7 +72,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) {
@@ -87,6 +109,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) {
@@ -198,7 +226,7 @@ export class RouterOutlet {
         return true;
     }
     render() {
-        return h("slot", { key: '249e7d8a063c781db52fa535e42d648c7bf2909a' });
+        return h("slot", { key: '078cdc7a63b98570746409fc08c4af80f8d7da4d' });
     }
     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"; }

package/dist/collection/components/textarea/textarea.md.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;
@@ -1060,12 +1064,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;
 }
 
 :host(.textarea-fill-outline.textarea-shape-round) {
@@ -1120,11 +1132,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 textarea 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(.textarea-fill-outline:not(.label-floating)) .textarea-control {
+:host(.textarea-fill-outline) .textarea-control {
   position: relative;
 }
 
@@ -1133,9 +1146,8 @@
   transform-origin: left top;
   position: absolute;
   /**
-   * While resting this is the width of the textarea, 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 textarea, which already
+   * excludes the start and end slots.
    */
   max-width: 100%;
 }
@@ -1168,12 +1180,11 @@
   margin-top: 0;
   margin-bottom: 0;
   /**
-   * Label text should not extend
-   * beyond the bounds of the textarea.
+   * Label text should not extend beyond the bounds of the textarea.
+   * 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/utils/forms/index.js

@@ -2,7 +2,7 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 export * from './notch-controller';
-export * from './start-container-controller';
+export * from './start-end-container-controller';
 export * from './compare-with-utils';
 export * from './item-multiple-inputs';
 export * from './click-controller';