@ionic/core 9.0.1-nightly.20260821 → 9.0.1-nightly.20260824

package/hydrate/index.mjs

@@ -420,7 +420,7 @@ const appGlobalScript = initialize || (() => {});
 const globalScripts = appGlobalScript;
 
 /*
- Stencil Hydrate Platform v4.43.5 | MIT Licensed | https://stenciljs.com
+ Stencil Hydrate Platform v4.44.1 | MIT Licensed | https://stenciljs.com
  */
 var __create = Object.create;
 var __defProp = Object.defineProperty;
@@ -755,6 +755,8 @@ var DEFAULT_DOC_DATA = {
 };
 var SLOT_FB_CSS = "slot-fb{display:contents}slot-fb[hidden]{display:none}";
 var XLINK_NS = "http://www.w3.org/1999/xlink";
+var MAX_LAZY_LOAD_RETRIES = 3;
+var LAZY_LOAD_RETRY_INTERVAL_MS = 1e3;
 
 // src/utils/style.ts
 function createStyleSheetIfNeededAndSupported(styles2) {
@@ -818,7 +820,7 @@ function getHostSlotNodes(childNodes, hostName, slotName) {
       slottedNodes.push(childNode);
       if (typeof slotName !== "undefined") return slottedNodes;
     }
-    slottedNodes = [...slottedNodes, ...getHostSlotNodes(childNode.childNodes, hostName, slotName)];
+    slottedNodes = [...slottedNodes, ...getHostSlotNodes(internalCall(childNode, "childNodes"), hostName, slotName)];
   }
   return slottedNodes;
 }
@@ -1062,6 +1064,11 @@ var h = (nodeName, vnodeData, ...children) => {
       } else if (child != null && typeof child !== "boolean") {
         if (simple = typeof nodeName !== "function" && !isComplexType(child)) {
           child = String(child);
+        } else if (typeof nodeName !== "function" && child.$flags$ === void 0) {
+          {
+            consoleError("Invalid vNode child");
+          }
+          continue;
         }
         if (simple && lastSimple) {
           vNodeChildren[vNodeChildren.length - 1].$text$ += child;
@@ -2297,7 +2304,7 @@ var setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags, initialRen
       }
     }
     if (newValue == null || newValue === false) {
-      if (newValue !== false || elm.getAttribute(memberName) === "") {
+      if (newValue !== false || elm.getAttribute(memberName) === "" || flags & 4 /* isHost */ && !isEnumeratedAttribute(memberName)) {
         if (xlink) {
           elm.removeAttributeNS(XLINK_NS, memberName);
         } else {
@@ -2314,6 +2321,8 @@ var setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags, initialRen
     }
   }
 };
+var ENUMERATED_ATTRIBUTES = /* @__PURE__ */ new Set(["draggable", "contenteditable", "spellcheck"]);
+var isEnumeratedAttribute = (attrName) => ENUMERATED_ATTRIBUTES.has(attrName) || attrName.startsWith("aria-");
 var parseClassListRegex = /\s/;
 var parseClassList = (value) => {
   if (typeof value === "object" && value && "baseVal" in value) {
@@ -2716,7 +2725,10 @@ var markSlotContentForRelocation = (elm) => {
       const slotName = childNode["s-sn"];
       for (j = hostContentNodes.length - 1; j >= 0; j--) {
         node = hostContentNodes[j];
-        if (!node["s-cn"] && !node["s-nr"] && node["s-hn"] !== childNode["s-hn"] && (!node["s-sh"] || node["s-sh"] !== childNode["s-hn"])) {
+        if (!node["s-cn"] && !node["s-nr"] && node["s-hn"] !== childNode["s-hn"] && // let an exact named-slot match override a stale default-slot claim. Skip this for
+        // `slotName === ''` itself - a matched default node's cached `s-sn` is `''` too, which
+        // would trivially "match" on every re-render and force pointless re-insertion.
+        (!node["s-sh"] || node["s-sh"] !== childNode["s-hn"] || slotName !== "" && getSlotName(node) === slotName)) {
           if (isNodeLocatedInSlot(node, slotName)) {
             let relocateNodeData = relocateNodes.find((r) => r.$nodeToRelocate$ === node);
             checkSlotFallbackVisibility = true;
@@ -2786,7 +2798,7 @@ var insertBefore = (parent, newNode, reference, isInitialLoad) => {
       return newNode;
     }
   }
-  if (parent.__insertBefore) {
+  if ((parent == null ? void 0 : parent.__insertBefore)) {
     return parent.__insertBefore(newNode, reference);
   } else {
     return parent == null ? void 0 : parent.insertBefore(newNode, reference);
@@ -3291,10 +3303,12 @@ var proxyComponent = (Cstr, cmpMeta, flags) => {
 
 // src/runtime/initialize-component.ts
 var initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId) => {
+  var _a2;
   let Cstr;
   try {
     if ((hostRef.$flags$ & 32 /* hasInitializedComponent */) === 0) {
       hostRef.$flags$ |= 32 /* hasInitializedComponent */;
+      hostRef.$flags$ &= -1025 /* hasFailedLoad */;
       const bundleId = cmpMeta.$lazyBundleId$;
       if (bundleId) {
         const CstrImport = loadModule(cmpMeta);
@@ -3306,6 +3320,11 @@ var initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId) => {
           Cstr = CstrImport;
         }
         if (!Cstr) {
+          hostRef.$flags$ &= -33 /* hasInitializedComponent */;
+          hostRef.$loadRetryCount$ = ((_a2 = hostRef.$loadRetryCount$) != null ? _a2 : 0) + 1;
+          if (hostRef.$loadRetryCount$ < MAX_LAZY_LOAD_RETRIES) {
+            hostRef.$flags$ |= 1024 /* hasFailedLoad */;
+          }
           throw new Error(`Constructor for "${cmpMeta.$tagName$}#${hostRef.$modeName$}" was not found`);
         }
         if (!Cstr.isProxied) {
@@ -3385,7 +3404,7 @@ var initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId) => {
       hostRef.$onRenderResolve$();
       hostRef.$onRenderResolve$ = void 0;
     }
-    if (hostRef.$onReadyResolve$) {
+    if (hostRef.$onReadyResolve$ && !(hostRef.$flags$ & 1024 /* hasFailedLoad */)) {
       hostRef.$onReadyResolve$(elm);
     }
   }
@@ -3444,6 +3463,8 @@ var connectedCallback = (elm) => {
       addHostEventListeners(elm, hostRef, cmpMeta.$listeners$);
       if (hostRef == null ? void 0 : hostRef.$lazyInstance$) {
         fireConnectedCallback(hostRef.$lazyInstance$, elm);
+      } else if (hostRef.$flags$ & 1024 /* hasFailedLoad */) {
+        setTimeout(() => initializeComponent(elm, hostRef, cmpMeta), LAZY_LOAD_RETRY_INTERVAL_MS);
       } else if (hostRef == null ? void 0 : hostRef.$onReadyPromise$) {
         hostRef.$onReadyPromise$.then(() => fireConnectedCallback(hostRef.$lazyInstance$, elm));
       }
@@ -17026,7 +17047,6 @@ class Datetime {
     }
     renderCombinedDatePickerColumn() {
         const { defaultParts, disabled, workingParts, locale, minParts, maxParts, todayParts, isDateEnabled } = this;
-        const activePart = this.getActivePartsWithFallback();
         /**
          * By default, generate a range of 3 months:
          * Previous month, current month, and next month
@@ -17082,8 +17102,10 @@ class Datetime {
         return (hAsync("ion-picker-column", { part: WHEEL_PART, "aria-label": "Select a date", class: "date-column", color: this.color, disabled: disabled, value: todayString, onIonChange: (ev) => {
                 const { value } = ev.detail;
                 const findPart = parts.find(({ month, day, year }) => value === `${year}-${month}-${day}`);
+                // Read live so parts a sibling column just committed are included.
+                const activePart = this.getActivePartsWithFallback();
                 this.setWorkingParts({
-                    ...workingParts,
+                    ...this.workingParts,
                     ...findPart,
                 });
                 this.setActiveParts({
@@ -17160,11 +17182,12 @@ class Datetime {
             return [];
         }
         const { disabled, workingParts } = this;
-        const activePart = this.getActivePartsWithFallback();
         const pickerColumnValue = (workingParts.day !== null ? workingParts.day : this.defaultParts.day) ?? undefined;
         return (hAsync("ion-picker-column", { part: WHEEL_PART, "aria-label": "Select a day", class: "day-column", color: this.color, disabled: disabled, value: pickerColumnValue, onIonChange: (ev) => {
+                // Read live so parts a sibling column just committed are included.
+                const activePart = this.getActivePartsWithFallback();
                 this.setWorkingParts({
-                    ...workingParts,
+                    ...this.workingParts,
                     day: ev.detail.value,
                 });
                 this.setActiveParts({
@@ -17179,10 +17202,11 @@ class Datetime {
             return [];
         }
         const { disabled, workingParts } = this;
-        const activePart = this.getActivePartsWithFallback();
         return (hAsync("ion-picker-column", { part: WHEEL_PART, "aria-label": "Select a month", class: "month-column", color: this.color, disabled: disabled, value: workingParts.month, onIonChange: (ev) => {
+                // Read live so parts a sibling column just committed are included.
+                const activePart = this.getActivePartsWithFallback();
                 this.setWorkingParts({
-                    ...workingParts,
+                    ...this.workingParts,
                     month: ev.detail.value,
                 });
                 // Month wheel is navigation-only in multi-select mode as a fix for https://github.com/ionic-team/ionic-framework/issues/29673
@@ -17200,10 +17224,11 @@ class Datetime {
             return [];
         }
         const { disabled, workingParts } = this;
-        const activePart = this.getActivePartsWithFallback();
         return (hAsync("ion-picker-column", { part: WHEEL_PART, "aria-label": "Select a year", class: "year-column", color: this.color, disabled: disabled, value: workingParts.year, onIonChange: (ev) => {
+                // Read live so parts a sibling column just committed are included.
+                const activePart = this.getActivePartsWithFallback();
                 this.setWorkingParts({
-                    ...workingParts,
+                    ...this.workingParts,
                     year: ev.detail.value,
                 });
                 // Year wheel is navigation-only in multi-select mode as a fix for https://github.com/ionic-team/ionic-framework/issues/29673
@@ -17239,13 +17264,14 @@ class Datetime {
         ];
     }
     renderHourPickerColumn(hoursData) {
-        const { disabled, workingParts } = this;
+        const { disabled } = this;
         if (hoursData.length === 0)
             return [];
         const activePart = this.getActivePartsWithFallback();
         return (hAsync("ion-picker-column", { part: WHEEL_PART, "aria-label": "Select an hour", color: this.color, disabled: disabled, value: activePart.hour, numericInput: true, onIonChange: (ev) => {
+                // Read live so parts a sibling column just committed are included.
                 this.setWorkingParts({
-                    ...workingParts,
+                    ...this.workingParts,
                     hour: ev.detail.value,
                 });
                 this.setActiveParts({
@@ -17256,13 +17282,14 @@ class Datetime {
             } }, hoursData.map((hour) => (hAsync("ion-picker-column-option", { color: this.color, part: hour.value === activePart.hour ? `${WHEEL_ITEM_PART} ${WHEEL_ITEM_ACTIVE_PART}` : WHEEL_ITEM_PART, key: hour.value, disabled: hour.disabled, value: hour.value }, hour.text)))));
     }
     renderMinutePickerColumn(minutesData) {
-        const { disabled, workingParts } = this;
+        const { disabled } = this;
         if (minutesData.length === 0)
             return [];
         const activePart = this.getActivePartsWithFallback();
         return (hAsync("ion-picker-column", { part: WHEEL_PART, "aria-label": "Select a minute", color: this.color, disabled: disabled, value: activePart.minute, numericInput: true, onIonChange: (ev) => {
+                // Read live so parts a sibling column just committed are included.
                 this.setWorkingParts({
-                    ...workingParts,
+                    ...this.workingParts,
                     minute: ev.detail.value,
                 });
                 this.setActiveParts({
@@ -17273,16 +17300,18 @@ class Datetime {
             } }, minutesData.map((minute) => (hAsync("ion-picker-column-option", { color: this.color, part: minute.value === activePart.minute ? `${WHEEL_ITEM_PART} ${WHEEL_ITEM_ACTIVE_PART}` : WHEEL_ITEM_PART, key: minute.value, disabled: minute.disabled, value: minute.value }, minute.text)))));
     }
     renderDayPeriodPickerColumn(dayPeriodData) {
-        const { disabled, workingParts } = this;
+        const { disabled } = this;
         if (dayPeriodData.length === 0) {
             return [];
         }
         const activePart = this.getActivePartsWithFallback();
         const isDayPeriodRTL = isLocaleDayPeriodRTL(this.locale);
         return (hAsync("ion-picker-column", { part: WHEEL_PART, "aria-label": "Select a day period", style: isDayPeriodRTL ? { order: '-1' } : {}, color: this.color, disabled: disabled, value: activePart.ampm, onIonChange: (ev) => {
-                const hour = calculateHourFromAMPM(workingParts, ev.detail.value);
+                // Read live so parts a sibling column just committed are included.
+                const currentParts = this.workingParts;
+                const hour = calculateHourFromAMPM(currentParts, ev.detail.value);
                 this.setWorkingParts({
-                    ...workingParts,
+                    ...currentParts,
                     ampm: ev.detail.value,
                     hour,
                 });
@@ -17634,7 +17663,7 @@ class Datetime {
         const hasDatePresentation = presentation === 'date' || presentation === 'date-time' || presentation === 'time-date';
         const hasWheelVariant = hasDatePresentation && preferWheel;
         renderHiddenInput(true, el, name, formatValue(value), disabled);
-        return (hAsync(Host, { key: 'd8e6dfe5e3bffb1c38a3e37b63b3aec099f40d29', "aria-disabled": disabled ? 'true' : null, onFocus: this.onFocus, onBlur: this.onBlur, class: {
+        return (hAsync(Host, { key: '4e0b529a70924b065bcc6191e08550428b5a52a0', "aria-disabled": disabled ? 'true' : null, onFocus: this.onFocus, onBlur: this.onBlur, class: {
                 ...createColorClasses$1(color, {
                     [mode]: true,
                     ['datetime-readonly']: readonly,
@@ -17646,7 +17675,7 @@ class Datetime {
                     [`datetime-prefer-wheel`]: hasWheelVariant,
                     [`datetime-grid`]: isGridStyle,
                 }),
-            } }, hAsync("div", { key: '20889d3c68dd5109633c0e214411a63d6f3025bb', class: "intersection-tracker", ref: (el) => (this.intersectionTrackerRef = el) }), this.renderDatetime(mode)));
+            } }, hAsync("div", { key: 'cc9d1b92f960984cb0466d0003a240ace67da243', class: "intersection-tracker", ref: (el) => (this.intersectionTrackerRef = el) }), this.renderDatetime(mode)));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -29255,6 +29284,12 @@ class PickerColumn {
         this.isColumnVisible = false;
         this.canExitInputMode = true;
         this.updateValueTextOnScroll = false;
+        this.isUserScroll = false;
+        /**
+         * The haptics for the wheel picker are an iOS-only feature. As a result,
+         * they should be disabled on Android.
+         */
+        this.enableHaptics = false;
         this.ariaLabel = null;
         this.isActive = false;
         /**
@@ -29286,6 +29321,12 @@ class PickerColumn {
                      */
                     this.canExitInputMode = canExitInputMode;
                     this.updateValueTextOnScroll = false;
+                    /**
+                     * This scroll takes over from whatever the user was doing, so an outside
+                     * press must not commit an option the column is only passing through.
+                     */
+                    this.isUserScroll = false;
+                    this.stopWatchingForOutsidePress();
                     scrollEl.scroll({
                         top,
                         left: 0,
@@ -29340,6 +29381,117 @@ class PickerColumn {
             }
             this.isActive = state;
         };
+        this.clearScrollEndTimeout = () => {
+            if (this.scrollEndTimeout) {
+                clearTimeout(this.scrollEndTimeout);
+                this.scrollEndTimeout = undefined;
+            }
+        };
+        /**
+         * Resets the idle timer that commits the centered option.
+         */
+        this.resetScrollEndTimeout = () => {
+            this.clearScrollEndTimeout();
+            this.scrollEndTimeout = setTimeout(this.settle, SCROLL_END_DELAY);
+        };
+        /**
+         * Capture so the column still commits if an application's own pointerdown
+         * handler stops the event before it reaches the document.
+         */
+        this.watchForOutsidePress = () => {
+            doc?.addEventListener('pointerdown', this.onPointerDownOutside, { capture: true });
+        };
+        this.stopWatchingForOutsidePress = () => {
+            doc?.removeEventListener('pointerdown', this.onPointerDownOutside, { capture: true });
+        };
+        /**
+         * Resets everything the current scroll interaction is holding, so nothing
+         * pending on it can commit later.
+         */
+        this.discardScroll = () => {
+            this.stopWatchingForOutsidePress();
+            this.clearScrollEndTimeout();
+            this.scrollEndCallback = undefined;
+            this.centeredOption = undefined;
+            this.haltedAtScrollTop = undefined;
+            this.isScrolling = false;
+            this.isUserScroll = false;
+            this.canExitInputMode = true;
+        };
+        /**
+         * Commits the option that is currently centered under the highlight and ends
+         * the scroll interaction.
+         */
+        this.settle = () => {
+            const { centeredOption } = this;
+            this.clearScrollEndTimeout();
+            this.stopWatchingForOutsidePress();
+            this.isUserScroll = false;
+            this.isScrolling = false;
+            this.updateValueTextOnScroll = true;
+            this.enableHaptics && hapticSelectionEnd();
+            /**
+             * Certain tasks (such as those that
+             * cause re-renders) should only be done
+             * once scrolling has finished, otherwise
+             * flickering may occur.
+             */
+            const { scrollEndCallback } = this;
+            if (scrollEndCallback) {
+                scrollEndCallback();
+                this.scrollEndCallback = undefined;
+            }
+            /**
+             * Reset this flag as the
+             * next scroll interaction could
+             * be a scroll from the user. In this
+             * case, we should exit input mode.
+             */
+            this.canExitInputMode = true;
+            if (centeredOption !== undefined) {
+                // Cleared here so a later scroll that centers nothing cannot fall back on it.
+                this.centeredOption = undefined;
+                if (centeredOption.isConnected) {
+                    this.setValue(centeredOption.value);
+                }
+            }
+        };
+        /**
+         * Commits the option the user can see when they press anything outside of the
+         * column during a scroll they started. This runs on pointerdown rather than
+         * click so the value is up to date by the time an application's own click
+         * handler (a Save button, for example) reads it.
+         */
+        this.onPointerDownOutside = (ev) => {
+            const { centeredOption, parentEl, scrollEl } = this;
+            if (!this.isScrolling) {
+                return;
+            }
+            /**
+             * The column can live in another component's Shadow DOM, where a document
+             * listener sees the target retargeted to the outer host. The composed path
+             * is the only reliable way to tell a press on the column apart.
+             */
+            const path = ev.composedPath();
+            /**
+             * A press anywhere in the parent picker counts as inside, so reaching for a
+             * sibling wheel leaves this column coasting.
+             */
+            if (path.includes(this.el) || (parentEl != null && path.includes(parentEl))) {
+                return;
+            }
+            /**
+             * Landing on the centered option halts the in-flight momentum scroll, so the
+             * committed value and the option the user is left looking at agree. The
+             * option list can be replaced mid-scroll, and a detached option has no
+             * offset to center on.
+             */
+            if (centeredOption !== undefined && centeredOption.isConnected) {
+                this.centerPickerItemInView(centeredOption, false, false);
+                this.haltedAtScrollTop = scrollEl?.scrollTop;
+            }
+            this.settle();
+        };
         /**
          * When the column scrolls, the component
          * needs to determine which item is centered
@@ -29347,27 +29499,42 @@ class PickerColumn {
          * the item object.
          */
         this.initializeScrollListener = () => {
-            /**
-             * The haptics for the wheel picker are
-             * an iOS-only feature. As a result, they should
-             * be disabled on Android.
-             */
-            const enableHaptics = isPlatform('ios');
+            this.enableHaptics = isPlatform('ios');
             const { el, scrollEl } = this;
-            let timeout;
             let activeEl = this.activeItem;
             const scrollCallback = () => {
                 raf(() => {
-                    if (!scrollEl)
+                    /**
+                     * This frame cannot be cancelled, and moving the column disconnects it
+                     * without the observer reporting a change, so this checks live state.
+                     */
+                    if (!this.el.isConnected || !this.isColumnVisible || !scrollEl)
                         return;
-                    if (timeout) {
-                        clearTimeout(timeout);
-                        timeout = undefined;
+                    const { haltedAtScrollTop } = this;
+                    if (haltedAtScrollTop !== undefined) {
+                        /**
+                         * Still at the halted position, so this frame is the halt landing
+                         * rather than the wheel moving, and re-arming would start a second
+                         * commit cycle.
+                         */
+                        if (Math.abs(scrollEl.scrollTop - haltedAtScrollTop) <= HALT_TOLERANCE)
+                            return;
+                        this.haltedAtScrollTop = undefined;
                     }
+                    // Armed before the early returns below, so a scroll never ends uncommitted.
+                    this.resetScrollEndTimeout();
                     if (!this.isScrolling) {
-                        enableHaptics && hapticSelectionStart();
+                        this.enableHaptics && hapticSelectionStart();
                         this.isScrolling = true;
                     }
+                    /**
+                     * Only a user-driven scroll holds an uncommitted selection. Checked every
+                     * frame because the user can take hold of the wheel mid-scroll, and
+                     * re-adding the same listener is a no-op.
+                     */
+                    if (this.isUserScroll) {
+                        this.watchForOutsidePress();
+                    }
                     /**
                      * Select item in the center of the column
                      * which is the month/year that we want to select
@@ -29427,18 +29594,23 @@ class PickerColumn {
                             newActiveElement = fallbackActiveElement;
                         }
                     }
-                    if (activeEl !== undefined) {
-                        this.setPickerItemActiveState(activeEl, false);
-                    }
+                    /**
+                     * A scroll can land with no selectable option centered, such as an
+                     * overscroll bounce briefly centering the empty padding rows. Keep the
+                     * current selection until an option is centered again.
+                     */
                     if (newActiveElement === undefined || newActiveElement.disabled) {
                         return;
                     }
+                    if (activeEl !== undefined) {
+                        this.setPickerItemActiveState(activeEl, false);
+                    }
                     /**
                      * If we are selecting a new value,
                      * we need to run haptics again.
                      */
                     if (newActiveElement !== activeEl) {
-                        enableHaptics && hapticSelectionChanged();
+                        this.enableHaptics && hapticSelectionChanged();
                         if (this.canExitInputMode) {
                             /**
                              * The native iOS wheel picker
@@ -29470,32 +29642,14 @@ class PickerColumn {
                     if (this.updateValueTextOnScroll) {
                         this.assistiveFocusable?.setAttribute('aria-valuetext', this.getOptionValueText(newActiveElement));
                     }
-                    timeout = setTimeout(() => {
-                        this.isScrolling = false;
-                        this.updateValueTextOnScroll = true;
-                        enableHaptics && hapticSelectionEnd();
-                        /**
-                         * Certain tasks (such as those that
-                         * cause re-renders) should only be done
-                         * once scrolling has finished, otherwise
-                         * flickering may occur.
-                         */
-                        const { scrollEndCallback } = this;
-                        if (scrollEndCallback) {
-                            scrollEndCallback();
-                            this.scrollEndCallback = undefined;
-                        }
-                        /**
-                         * Reset this flag as the
-                         * next scroll interaction could
-                         * be a scroll from the user. In this
-                         * case, we should exit input mode.
-                         */
-                        this.canExitInputMode = true;
-                        this.setValue(newActiveElement.value);
-                    }, 250);
+                    this.centeredOption = newActiveElement;
                 });
             };
+            const userScrollCallback = () => {
+                this.isUserScroll = true;
+                // Taking hold of the wheel ends the halt even if it has not moved yet.
+                this.haltedAtScrollTop = undefined;
+            };
             /**
              * Wrap this in an raf so that the scroll callback
              * does not fire when component is initially shown.
@@ -29504,8 +29658,19 @@ class PickerColumn {
                 if (!scrollEl)
                     return;
                 scrollEl.addEventListener('scroll', scrollCallback);
+                scrollEl.addEventListener('pointerdown', userScrollCallback);
+                scrollEl.addEventListener('wheel', userScrollCallback, { passive: true });
+                /**
+                 * A `pointerdown` fires once per touch, so a drag that pauses long enough
+                 * to commit would look like a scroll the column started. A `touchmove`
+                 * keeps arriving while the finger moves.
+                 */
+                scrollEl.addEventListener('touchmove', userScrollCallback, { passive: true });
                 this.destroyScrollListener = () => {
                     scrollEl.removeEventListener('scroll', scrollCallback);
+                    scrollEl.removeEventListener('pointerdown', userScrollCallback);
+                    scrollEl.removeEventListener('wheel', userScrollCallback);
+                    scrollEl.removeEventListener('touchmove', userScrollCallback);
                 };
             });
         };
@@ -29688,6 +29853,14 @@ class PickerColumn {
             }
             else {
                 this.isColumnVisible = false;
+                /**
+                 * The pending timer still runs so it resets the scroll state, but the
+                 * option it would have committed is dropped. A column the user cannot
+                 * see should not change its value.
+                 */
+                this.stopWatchingForOutsidePress();
+                this.centeredOption = undefined;
+                this.haltedAtScrollTop = undefined;
                 if (this.destroyScrollListener) {
                     this.destroyScrollListener();
                     this.destroyScrollListener = undefined;
@@ -29758,6 +29931,13 @@ class PickerColumn {
     connectedCallback() {
         this.ariaLabel = this.el.getAttribute('aria-label') ?? 'Select a value';
     }
+    disconnectedCallback() {
+        /**
+         * A pending settle would otherwise commit a value on a column that is no
+         * longer in the DOM.
+         */
+        this.discardScroll();
+    }
     get activeItem() {
         const { value } = this;
         const options = Array.from(this.el.querySelectorAll('ion-picker-column-option'));
@@ -29775,14 +29955,14 @@ class PickerColumn {
     render() {
         const { color, disabled, isActive, numericInput } = this;
         const mode = getIonMode$1(this);
-        return (hAsync(Host, { key: '78b46ad10d88ea1bb43ca8c36748767912f03224', class: createColorClasses$1(color, {
+        return (hAsync(Host, { key: '60a893619d0b01fba53fbccef67a10d533a22657', class: createColorClasses$1(color, {
                 [mode]: true,
                 ['picker-column-active']: isActive,
                 ['picker-column-numeric-input']: numericInput,
                 ['picker-column-disabled']: disabled,
-            }) }, hAsync("slot", { key: '761e501df77f7de896ffb3ebb99ebf88c5c3bf70', name: "prefix" }), hAsync("div", { key: '9f4caaeef8ab704522a85f30876d371712f47c5c', class: "picker-opts", ref: (el) => {
+            }) }, hAsync("slot", { key: '79f1e047f89c5ec916ed02efaac56ef3f73b8969', name: "prefix" }), hAsync("div", { key: 'c45c86e88353a196ff38159f40f390bc27852c9e', class: "picker-opts", ref: (el) => {
                 this.scrollEl = el;
-            }, role: "slider", tabindex: this.disabled ? undefined : 0, "aria-label": this.ariaLabel, "aria-valuemin": 0, "aria-valuemax": 0, "aria-valuenow": 0, "aria-valuetext": this.getOptionValueText(this.activeItem), "aria-orientation": "vertical", onKeyDown: (ev) => this.onKeyDown(ev) }, hAsync("div", { key: '9d3533436aba6c61c93f65f84a077fba832194a0', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), hAsync("div", { key: '3f18d3a47361f06f55321b65fdf5742a61722b26', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), hAsync("div", { key: 'eac0d20ab8c533ef829875e323e93e1ee2067d6d', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), hAsync("slot", { key: '92e25989ef41cf6f910c73238e1a0a5ac03f1c1f' }), hAsync("div", { key: '33a84644ebdc84108b44a8e3a129b54e824939c8', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), hAsync("div", { key: '128ad61a3a68c7ff2d2e44a6e968424fcc608a15', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), hAsync("div", { key: '6e4d59a4f75befcbbf47279a263f28a69b12dbbd', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0")), hAsync("slot", { key: '3c6621b64438792a3024c90e3d9916a0a3614506', name: "suffix" })));
+            }, role: "slider", tabindex: this.disabled ? undefined : 0, "aria-label": this.ariaLabel, "aria-valuemin": 0, "aria-valuemax": 0, "aria-valuenow": 0, "aria-valuetext": this.getOptionValueText(this.activeItem), "aria-orientation": "vertical", onKeyDown: (ev) => this.onKeyDown(ev) }, hAsync("div", { key: 'e02d76752f5d3dd4cd2846fbc28645f1508a4b49', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), hAsync("div", { key: 'd577bcbadc530970b2781692b050811633625c5a', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), hAsync("div", { key: 'c89e78c3a896bc1f55b922d01df16fdbb1259bdd', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), hAsync("slot", { key: '6c597ff899692597432ee2aa0b42de53b86deed4' }), hAsync("div", { key: '91686ed94f14c47647836ed4d63e54b5c54ee3b9', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), hAsync("div", { key: '2ff058c6d0e8cef4e143c2d848f9a52684579af1', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), hAsync("div", { key: 'bc7386bec6fced36e44084a7a137b3fe6506c996', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0")), hAsync("slot", { key: '8835fd3f4e025bce964e6f05984c9aaadc20d7fb', name: "suffix" })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -29814,6 +29994,19 @@ class PickerColumn {
     }; }
 }
 const PICKER_ITEM_ACTIVE_CLASS = 'option-active';
+/**
+ * How long the column must be idle before the centered option is treated as
+ * the user's selection. Replaceable by the `scrollend` event once that is
+ * supported everywhere (https://caniuse.com/?search=scrollend).
+ */
+const SCROLL_END_DELAY = 250;
+/**
+ * How far, in pixels, the column may report from where it was halted and still
+ * count as having stayed there. Centering targets a position between two snap
+ * points, so mandatory snapping corrects it by half the column height less
+ * three option heights: 2px at the default sizes.
+ */
+const HALT_TOLERANCE = 2;
 
 const pickerColumnOptionIosCss = () => `.picker-column-option-button{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;width:100%;height:34px;border:0px;outline:none;background:transparent;color:inherit;font-family:var(--ion-font-family, inherit);font-size:inherit;line-height:34px;text-align:inherit;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;overflow:hidden}:host(.option-disabled){opacity:0.4}:host(.option-disabled) .picker-column-option-button{cursor:default}`;
 
@@ -42754,7 +42947,7 @@ var NAMESPACE = (
 );
 
 /*
- Stencil Hydrate Runner v4.43.5 | MIT Licensed | https://stenciljs.com
+ Stencil Hydrate Runner v4.44.1 | MIT Licensed | https://stenciljs.com
  */
 var __create = Object.create;
 var __defProp = Object.defineProperty;

package/loader/index.d.ts

@@ -8,7 +8,7 @@ export interface CustomElementsDefineOptions {
   ael?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
   rel?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
 }
-export declare function defineCustomElements(win?: Window, opts?: CustomElementsDefineOptions): void;
+export declare function defineCustomElements(win?: Window, opts?: CustomElementsDefineOptions): Promise<void>;
 /**
  * @deprecated
  */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ionic/core",
-  "version": "9.0.1-nightly.20260821",
+  "version": "9.0.1-nightly.20260824",
   "description": "Base components for Ionic",
   "engines": {
     "node": ">= 16"
@@ -66,7 +66,7 @@
     "loader/"
   ],
   "dependencies": {
-    "@stencil/core": "^4.43.5",
+    "@stencil/core": "^4.44.1",
     "ionicons": "^8.1.0",
     "tslib": "^2.1.0"
   },

package/components/p-6Vp915Y7.js

@@ -1,4 +0,0 @@
-/*!
- * (C) Ionic http://ionicframework.com - MIT License
- */
-import{w as o,d as t}from"./p-ZjP4CjeZ.js";import{g as n,h as i,a}from"./p-66ogmUZU.js";import{a as e,b as r,c as s}from"./p-BrFaQbGY.js";import{a as d,K as c}from"./p-BMPN55of.js";const l=new WeakMap,u=(o,t,n,i=0,a=!1)=>{l.has(o)!==n&&(n?f(o,t,i,a):w(o,t))},f=(o,t,n,i=!1)=>{const a=t.parentNode,e=t.cloneNode(!1);e.classList.add("cloned-input"),e.tabIndex=-1,i&&(e.disabled=!0);const r="rtl"===o.ownerDocument.dir;e.style.insetInlineStart=r?a.offsetWidth-t.offsetLeft-t.offsetWidth+"px":`${t.offsetLeft}px`,a.appendChild(e),l.set(o,e);const s=r?9999:-9999;o.style.pointerEvents="none",t.style.transform=`translate3d(${s}px,${n}px,0) scale(0)`},w=(o,t)=>{const n=l.get(o);n&&(l.delete(o),n.remove()),o.style.pointerEvents="",t.style.transform=""},p="input, textarea, [no-blur], [contenteditable]",m="$ionPaddingTimer",b=(o,t,n)=>{const i=o[m];i&&clearTimeout(i),t>0?o.style.setProperty("--keyboard-offset",`${t}px`):o[m]=setTimeout((()=>{o.style.setProperty("--keyboard-offset","0px"),n&&n()}),120)},h=(o,t,n)=>{o.addEventListener("focusout",(()=>{t&&b(t,0,n)}),{once:!0})};let y=0;const S="data-ionic-skip-scroll-assist",D=o=>{if(document.activeElement===o)return;const t=o.getAttribute("id"),n=o.closest(`label[for="${t}"]`),i=document.activeElement?.closest(`label[for="${t}"]`);null!==n&&n===i||(o.setAttribute(S,"true"),o.focus())},M=async(o,t,a,e,r,s,d=!1,c=0,l=!0)=>{if(!a&&!e)return;const f=((o,t,n,i)=>((o,t,n,i)=>{const a=o.top,e=o.bottom,r=t.top,s=r+15,d=Math.min(t.bottom,i-n)-50-e,c=s-a,l=Math.round(d<0?-d:c>0?-c:0),u=Math.min(l,a-r),f=Math.abs(u);return{scrollAmount:u,scrollDuration:Math.min(400,Math.max(150,f/.3)),scrollPadding:n,inputSafeY:4-(a-s)}})((o.closest("ion-item,[ion-item]")??o).getBoundingClientRect(),t.getBoundingClientRect(),n,i))(o,a||e,r,c);if(a&&Math.abs(f.scrollAmount)<4)return D(t),void(s&&null!==a&&(b(a,y),h(t,a,(()=>y=0))));if(u(o,t,!0,f.inputSafeY,d),D(t),s&&a&&(y=f.scrollPadding,b(a,y)),"undefined"!=typeof window){let e;const r=async()=>{void 0!==e&&clearTimeout(e),window.removeEventListener("ionKeyboardDidShow",d),window.removeEventListener("ionKeyboardDidShow",r),a&&await i(a,0,f.scrollAmount,f.scrollDuration),u(o,t,!1,f.inputSafeY),document.activeElement===t&&D(t),s&&h(t,a,(()=>y=0))},d=()=>{window.removeEventListener("ionKeyboardDidShow",d),window.addEventListener("ionKeyboardDidShow",r)};if(a){const o=await n(a);if(l&&f.scrollAmount>o.scrollHeight-o.clientHeight-o.scrollTop)return"password"===t.type?(f.scrollAmount+=50,window.addEventListener("ionKeyboardDidShow",d)):window.addEventListener("ionKeyboardDidShow",r),void(e=setTimeout(r,1e3))}r()}},x=async(n,i)=>{if(void 0===t)return;const l="ios"===i,f="android"===i,w=n.getNumber("keyboardHeight",290),m=n.getBoolean("scrollAssist",!0),b=n.getBoolean("hideCaretOnScroll",l),h=n.getBoolean("inputBlurring",!1),y=n.getBoolean("scrollPadding",!0),D=Array.from(t.querySelectorAll("ion-input, ion-textarea")),x=new WeakMap,K=new WeakMap,v=await c.getResizeMode(),g=async t=>{await new Promise((o=>s(t,o)));const n=t.shadowRoot||t,i=n.querySelector("input")||n.querySelector("textarea"),c=a(t),l=c?null:t.closest("ion-footer");if(i){if(c&&b&&!x.has(t)){const o=((o,t,n)=>{if(!n||!t)return()=>{};const i=n=>{var i;(i=t)===i.getRootNode().activeElement&&u(o,t,n)},a=()=>u(o,t,!1),s=()=>i(!0),d=()=>i(!1);return e(n,"ionScrollStart",s),e(n,"ionScrollEnd",d),t.addEventListener("blur",a),()=>{r(n,"ionScrollStart",s),r(n,"ionScrollEnd",d),t.removeEventListener("blur",a)}})(t,i,c);x.set(t,o)}if("date"!==i.type&&"datetime-local"!==i.type&&(c||l)&&m&&!K.has(t)){const n=((t,n,i,a,e,r,s,c=!1)=>{const l=r&&(void 0===s||s.mode===d.None);let u=!1;const f=void 0!==o?o.innerHeight:0,w=o=>{!1!==u?M(t,n,i,a,o.detail.keyboardHeight,l,c,f,!1):u=!0},p=()=>{u=!1,o?.removeEventListener("ionKeyboardDidShow",w),t.removeEventListener("focusout",p)},m=async()=>{n.hasAttribute(S)?n.removeAttribute(S):(M(t,n,i,a,e,l,c,f),o?.addEventListener("ionKeyboardDidShow",w),t.addEventListener("focusout",p))};return t.addEventListener("focusin",m),()=>{t.removeEventListener("focusin",m),o?.removeEventListener("ionKeyboardDidShow",w),t.removeEventListener("focusout",p)}})(t,i,c,l,w,y,v,f);K.set(t,n)}}};h&&(()=>{let o=!0,t=!1;const n=document;e(n,"ionScrollStart",(()=>{t=!0})),n.addEventListener("focusin",(()=>{o=!0}),!0),n.addEventListener("touchend",(i=>{if(t)return void(t=!1);const a=n.activeElement;if(!a)return;if(a.matches(p))return;const e=i.target;e!==a&&(e.matches(p)||e.closest(p)||(o=!1,setTimeout((()=>{o||a.blur()}),50)))}),!1)})();for(const o of D)g(o);t.addEventListener("ionInputDidLoad",(o=>{g(o.detail)})),t.addEventListener("ionInputDidUnload",(o=>{(o=>{if(b){const t=x.get(o);t&&t(),x.delete(o)}if(m){const t=K.get(o);t&&t(),K.delete(o)}})(o.detail)}))};export{x as startInputShims}