voyager-ionic-core 9.0.7 → 9.0.9

package/dist/cjs/{slot-mutation-controller-ClDxh3EK.js → slot-mutation-controller-B2OfJEBH.js}

@@ -167,10 +167,19 @@ const SKIP_LABEL_TRANSITION_CLASS = 'skip-label-transition';
  */
 const START_CONTAINER_ADJUSTMENT_VAR = '--internal-start-container-adjustment';
 /**
- * A utility to measure and update the start container width adjustment
- * for form components (input, textarea, select) with `fill="outline"`.
- * This adjustment compensates for the start container width when
- * positioning floating/stacked labels within the outline border.
+ * Set on the host as an inline style. The component stylesheets declare
+ * this property and read it with `var()`, so it must stay in sync with
+ * the `--internal-start-end-container-width` references in those files.
+ * Renaming it here requires renaming it there too.
+ */
+const START_END_CONTAINER_WIDTH_VAR = '--internal-start-end-container-width';
+/**
+ * A utility to measure the start and end containers of form components
+ * (input, textarea, select) with `fill="outline"` and write the results
+ * to the host. The start container width offsets floating/stacked labels
+ * so they line up with the outline border. The combined start and end
+ * container width lets the floating label size itself to the full width
+ * of the outline while still being positioned relative to the control.
  *
  * Measurement is deferred with raf() to avoid forcing layout during
  * component updates, and a ResizeObserver watches for dynamic width
@@ -179,29 +188,36 @@ const START_CONTAINER_ADJUSTMENT_VAR = '--internal-start-container-adjustment';
  * @internal
  * @param el - The host element (ion-input, ion-textarea, or ion-select).
  * @param getStartContainer - A callback that returns the start container element.
- * @param shouldApplyAdjustment - A callback that determines whether the adjustment should be applied.
+ * @param getEndContainer - A callback that returns the end container element.
+ * @param shouldMeasure - A callback that determines whether the containers should be measured.
  */
-const createStartContainerController = (el, getStartContainer, shouldApplyAdjustment) => {
+const createStartEndContainerController = (el, getStartContainer, getEndContainer, shouldMeasure) => {
     let resizeObserver;
-    let observedContainer;
+    let observedStartContainer;
+    let observedEndContainer;
     let measurementRaf;
     let transitionRaf;
     let appliedAdjustment;
-    const calculateAdjustment = () => {
-        const startSlot = getStartContainer();
-        if (!startSlot || !shouldApplyAdjustment()) {
-            return '';
+    let appliedStartEndWidth;
+    /*
+     * Round to one decimal place so fractional widths produce a stable
+     * label offset and width when a container is added, removed, or resized.
+     */
+    const roundWidth = (width) => Math.round(width * 10) / 10;
+    const measureContainers = () => {
+        const startContainer = getStartContainer();
+        if (!startContainer || !shouldMeasure()) {
+            return { adjustment: '', startEndWidth: '' };
         }
-        /*
-         * Round to one decimal place so fractional widths produce a stable
-         * label offset when the start container is added, removed, or resized.
-         */
-        const startContainerWidth = startSlot.getBoundingClientRect().width;
-        const roundedWidth = Math.round(startContainerWidth * 10) / 10;
+        const startContainerWidth = roundWidth(startContainer.getBoundingClientRect().width);
+        const endContainerWidth = roundWidth(getEndContainer()?.getBoundingClientRect().width ?? 0);
         const sign = dir.isRTL(el) ? '' : '-';
-        return roundedWidth ? `${sign}${roundedWidth}px` : '0px';
+        return {
+            adjustment: startContainerWidth ? `${sign}${startContainerWidth}px` : '0px',
+            startEndWidth: `${roundWidth(startContainerWidth + endContainerWidth)}px`,
+        };
     };
-    const scheduleAdjustmentUpdate = () => {
+    const scheduleMeasurement = () => {
         // Return if there is already a measurement queued to avoid a flicker
         if (measurementRaf !== undefined) {
             return;
@@ -212,7 +228,17 @@ const createStartContainerController = (el, getStartContainer, shouldApplyAdjust
          */
         measurementRaf = helpers.raf(() => {
             measurementRaf = undefined;
-            const adjustment = calculateAdjustment();
+            const { adjustment, startEndWidth } = measureContainers();
+            /*
+             * The width only changes how much of the label fits, so it can
+             * animate. The transition is not suppressed here because the end
+             * container can change size while the label is floating, such as
+             * when async content loads, and that should not cut the float short.
+             */
+            if (startEndWidth !== appliedStartEndWidth) {
+                el.style.setProperty(START_END_CONTAINER_WIDTH_VAR, startEndWidth);
+                appliedStartEndWidth = startEndWidth;
+            }
             // Only suppress the label transition when the label has to move
             if (adjustment !== appliedAdjustment) {
                 // Discard a removal queued by an earlier change
@@ -235,29 +261,36 @@ const createStartContainerController = (el, getStartContainer, shouldApplyAdjust
         if (resizeObserver) {
             resizeObserver.disconnect();
             resizeObserver = undefined;
-            observedContainer = undefined;
+            observedStartContainer = undefined;
+            observedEndContainer = undefined;
         }
     };
     const setupResizeObserver = () => {
-        const startSlot = getStartContainer();
-        // Stop watching once the adjustment no longer applies
-        if (!startSlot || !shouldApplyAdjustment()) {
+        const startContainer = getStartContainer();
+        const endContainer = getEndContainer();
+        // Stop watching once the measurements no longer apply
+        if (!startContainer || !shouldMeasure()) {
             disconnectResizeObserver();
             return;
         }
-        // Return when prerendering or already watching this container
-        if (typeof ResizeObserver !== 'function' || (resizeObserver && observedContainer === startSlot)) {
+        // Return when prerendering or already watching these containers
+        if (typeof ResizeObserver !== 'function' ||
+            (resizeObserver && observedStartContainer === startContainer && observedEndContainer === endContainer)) {
             return;
         }
         disconnectResizeObserver();
         resizeObserver = new ResizeObserver(() => {
-            scheduleAdjustmentUpdate();
+            scheduleMeasurement();
         });
-        observedContainer = startSlot;
-        resizeObserver.observe(startSlot);
+        observedStartContainer = startContainer;
+        resizeObserver.observe(startContainer);
+        if (endContainer) {
+            observedEndContainer = endContainer;
+            resizeObserver.observe(endContainer);
+        }
     };
-    const calculateStartContainerWidth = () => {
-        scheduleAdjustmentUpdate();
+    const calculateContainerWidths = () => {
+        scheduleMeasurement();
     };
     const destroy = () => {
         disconnectResizeObserver();
@@ -273,9 +306,10 @@ const createStartContainerController = (el, getStartContainer, shouldApplyAdjust
         }
         // Re-apply from scratch if the element is connected again
         appliedAdjustment = undefined;
+        appliedStartEndWidth = undefined;
     };
     return {
-        calculateStartContainerWidth,
+        calculateContainerWidths,
         destroy,
     };
 };
@@ -461,5 +495,5 @@ const createSlotMutationController = (el, slotName, mutationCallback) => {
 exports.createClickController = createClickController;
 exports.createNotchController = createNotchController;
 exports.createSlotMutationController = createSlotMutationController;
-exports.createStartContainerController = createStartContainerController;
+exports.createStartEndContainerController = createStartEndContainerController;
 exports.getSlottedClickContent = getSlottedClickContent;

package/dist/collection/components/backdrop/backdrop.js

@@ -7,6 +7,10 @@ export class Backdrop {
     constructor() {
         /**
          * If `true`, the backdrop will be visible.
+         * This property controls whether or not the backdrop's
+         * default background is shown. It does not control whether
+         * or not the backdrop blocks interaction, and it does not
+         * override a custom background set on `ion-backdrop`.
          */
         this.visible = true;
         /**
@@ -32,7 +36,7 @@ export class Backdrop {
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { key: '7abaf2c310aa399607451b14063265e8a5846938', "aria-hidden": "true", class: {
+        return (h(Host, { key: '14141148f4a22371b8ad7cb9dcdc32398ec109aa', "aria-hidden": "true", class: {
                 [mode]: true,
                 'backdrop-hide': !this.visible,
                 'backdrop-no-tappable': !this.tappable,
@@ -66,7 +70,7 @@ export class Backdrop {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "If `true`, the backdrop will be visible."
+                    "text": "If `true`, the backdrop will be visible.\nThis property controls whether or not the backdrop's\ndefault background is shown. It does not control whether\nor not the backdrop blocks interaction, and it does not\noverride a custom background set on `ion-backdrop`."
                 },
                 "getter": false,
                 "setter": false,

package/dist/collection/components/datetime/datetime.js

@@ -56,6 +56,13 @@ import { checkForPresentationFormatMismatch, warnIfTimeZoneProvided } from "./ut
 export class Datetime {
     constructor() {
         this.inputId = `ion-dt-${datetimeIds++}`;
+        /**
+         * Set when the user selects a value, cleared when it's confirmed
+         * or `processValue` runs (`reset()`, or `value` being set to a
+         * non-empty value). The overlay present listener only discards a
+         * selection while this is set.
+         */
+        this.hasUnconfirmedSelection = false;
         this.prevPresentation = null;
         this.showMonthAndYear = false;
         this.activeParts = [];
@@ -219,6 +226,7 @@ export class Datetime {
             if (popoverOrModal) {
                 popoverOrModal.dismiss(undefined, role);
             }
+            return popoverOrModal !== null;
         };
         this.setWorkingParts = (parts) => {
             this.workingParts = {
@@ -233,6 +241,7 @@ export class Datetime {
             if (this.readonly) {
                 return;
             }
+            this.hasUnconfirmedSelection = true;
             const { multiple, minParts, maxParts, activeParts } = this;
             /**
              * When setting the active parts, it is possible
@@ -653,7 +662,8 @@ export class Datetime {
                 this.loadTimeout = undefined;
             }
         };
-        this.processValue = (value) => {
+        this.processValue = (value, animated = true) => {
+            this.hasUnconfirmedSelection = false;
             const hasValue = value !== null && value !== undefined && value !== '' && (!Array.isArray(value) || value.length > 0);
             const valueToProcess = hasValue ? parseDate(value) : this.defaultParts;
             const { minParts, maxParts, workingParts, el } = this;
@@ -716,13 +726,14 @@ export class Datetime {
             const didChangeMonth = (month !== undefined && month !== workingParts.month) || (year !== undefined && year !== workingParts.year);
             const bodyIsVisible = el.classList.contains('datetime-ready');
             const { isGridStyle, showMonthAndYear } = this;
-            if (isGridStyle && didChangeMonth && bodyIsVisible && !showMonthAndYear) {
+            if (isGridStyle && didChangeMonth && bodyIsVisible && !showMonthAndYear && animated) {
                 /**
                  * Only animate if:
                  * 1. We're using grid style (wheel style pickers should just jump to new value)
                  * 2. The month and/or year actually changed, and both are defined (otherwise there's nothing to animate to)
                  * 3. The calendar body is visible (prevents animation when in collapsed datetime-button, for example)
                  * 4. The month/year picker is not open (since you wouldn't see the animation anyway)
+                 * 5. The caller did not opt out (e.g. the parent overlay is still hidden)
                  */
                 this.animateToDate(targetValue);
             }
@@ -893,6 +904,7 @@ export class Datetime {
                 this.setValue(convertDataToISO(activeParts));
             }
         }
+        this.hasUnconfirmedSelection = false;
         if (closeOverlay) {
             this.closeParentOverlay(CONFIRM_ROLE);
         }
@@ -908,17 +920,22 @@ export class Datetime {
         this.processValue(startDate);
     }
     /**
-     * Emits the ionCancel event and
-     * optionally closes the popover
-     * or modal that the datetime was
+     * Emits the ionCancel event, discards
+     * any unconfirmed selection, and
+     * optionally closes the popover or
+     * modal that the datetime was
      * presented in.
      *
      * @param closeOverlay If `true`, closes the parent overlay. Defaults to `false`.
      */
     async cancel(closeOverlay = false) {
         this.ionCancel.emit();
-        if (closeOverlay) {
-            this.closeParentOverlay(CANCEL_ROLE);
+        /**
+         * When a parent overlay closes, the present listener discards
+         * the selection on the next open. Otherwise discard it now.
+         */
+        if (!closeOverlay || !this.closeParentOverlay(CANCEL_ROLE)) {
+            this.processValue(this.value);
         }
     }
     /**
@@ -940,6 +957,7 @@ export class Datetime {
         this.loadTimeout = setTimeout(() => {
             this.ensureReadyIfVisible();
         }, 100);
+        this.initializeOverlayPresentListener();
     }
     disconnectedCallback() {
         if (this.clearFocusVisible) {
@@ -947,6 +965,34 @@ export class Datetime {
             this.clearFocusVisible = undefined;
         }
         this.loadTimeoutCleanup();
+        if (this.destroyOverlayPresentListener) {
+            this.destroyOverlayPresentListener();
+            this.destroyOverlayPresentListener = undefined;
+        }
+    }
+    /**
+     * A datetime in a modal or popover stays mounted between
+     * presentations, so an unconfirmed selection would still show when
+     * it reopens. Discarding on present rather than dismiss lets app
+     * code that runs on dismiss still confirm or reset the selection,
+     * whatever order its listeners were added in.
+     */
+    initializeOverlayPresentListener() {
+        const overlay = this.el.closest('ion-modal, ion-popover');
+        if (!overlay) {
+            return;
+        }
+        const eventName = overlay.tagName === 'ION-MODAL' ? 'ionModalWillPresent' : 'ionPopoverWillPresent';
+        const onPresent = (ev) => {
+            // Ignore nested overlays and skip when there's nothing to discard.
+            if (ev.target !== overlay || !this.hasUnconfirmedSelection) {
+                return;
+            }
+            // The overlay is still hidden, so skip the month animation.
+            this.processValue(this.value, false);
+        };
+        overlay.addEventListener(eventName, onPresent);
+        this.destroyOverlayPresentListener = () => overlay.removeEventListener(eventName, onPresent);
     }
     initializeListeners() {
         this.initializeCalendarListener();
@@ -1829,7 +1875,7 @@ export class Datetime {
         const hasDatePresentation = presentation === 'date' || presentation === 'date-time' || presentation === 'time-date';
         const hasWheelVariant = hasDatePresentation && preferWheel;
         renderHiddenInput(true, el, name, formatValue(value), disabled);
-        return (h(Host, { key: 'a9128b5c55464e30a269daf9d725bf430c8c655c', "aria-disabled": disabled ? 'true' : null, onFocus: this.onFocus, onBlur: this.onBlur, class: {
+        return (h(Host, { key: 'e9b99bb5610fc7fe879200a56dcc865c6e2f1404', "aria-disabled": disabled ? 'true' : null, onFocus: this.onFocus, onBlur: this.onBlur, class: {
                 ...createColorClasses(color, {
                     [mode]: true,
                     ['datetime-readonly']: readonly,
@@ -1841,7 +1887,7 @@ export class Datetime {
                     [`datetime-prefer-wheel`]: hasWheelVariant,
                     [`datetime-grid`]: isGridStyle,
                 }),
-            } }, h("div", { key: 'b49f3a98db2b7cf535d7ea894d518f75f8a1fefb', class: "intersection-tracker", ref: (el) => (this.intersectionTrackerRef = el) }), this.renderDatetime(mode)));
+            } }, h("div", { key: 'a5e61be2989468dc24ec8fb394116d9339b7824c', class: "intersection-tracker", ref: (el) => (this.intersectionTrackerRef = el) }), this.renderDatetime(mode)));
     }
     static get is() { return "ion-datetime"; }
     static get encapsulation() { return "shadow"; }
@@ -2721,7 +2767,7 @@ export class Datetime {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "Emits the ionCancel event and\noptionally closes the popover\nor modal that the datetime was\npresented in.",
+                    "text": "Emits the ionCancel event, discards\nany unconfirmed selection, and\noptionally closes the popover or\nmodal that the datetime was\npresented in.",
                     "tags": [{
                             "name": "param",
                             "text": "closeOverlay If `true`, closes the parent overlay. Defaults to `false`."

package/dist/collection/components/input/input.ios.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;

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 {