@ionic/core 8.5.8-dev.11748388365.11ad9dfe → 8.5.8-dev.11748525800.1cdc649b

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

@@ -35,6 +35,9 @@ export const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpo
     let offset = 0;
     let canDismissBlocksGesture = false;
     let cachedScrollEl = null;
+    let cachedFooterEl = null;
+    let cachedFooterYPosition = null;
+    let currentFooterState = null;
     const canDismissMaxStep = 0.95;
     const maxBreakpoint = breakpoints[breakpoints.length - 1];
     const minBreakpoint = breakpoints[0];
@@ -64,29 +67,66 @@ export const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpo
         baseEl.classList.add(FOCUS_TRAP_DISABLE_CLASS);
     };
     /**
-     * Toggles the visible modal footer when `expandToScroll` is disabled.
-     * @param footer The footer to show.
+     * Toggles the footer to an absolute position while moving to prevent
+     * it from shaking while the sheet is being dragged.
+     * @param footer Whether the footer is in a moving or stationary position.
      */
-    const swapFooterVisibility = (footer) => {
-        const originalFooter = baseEl.querySelector('ion-footer');
-        if (!originalFooter) {
-            return;
+    const swapFooterPosition = (newPosition) => {
+        if (!cachedFooterEl) {
+            cachedFooterEl = baseEl.querySelector('ion-footer');
+            if (!cachedFooterEl) {
+                return;
+            }
         }
-        const clonedFooter = wrapperEl.nextElementSibling;
-        const footerToHide = footer === 'original' ? clonedFooter : originalFooter;
-        const footerToShow = footer === 'original' ? originalFooter : clonedFooter;
-        footerToShow.style.removeProperty('display');
-        footerToShow.removeAttribute('aria-hidden');
         const page = baseEl.querySelector('.ion-page');
-        if (footer === 'original') {
-            page.style.removeProperty('padding-bottom');
+        currentFooterState = newPosition;
+        if (newPosition === 'stationary') {
+            // Reset positioning styles to allow normal document flow
+            cachedFooterEl.classList.remove('modal-footer-moving');
+            cachedFooterEl.style.removeProperty('position');
+            cachedFooterEl.style.removeProperty('width');
+            cachedFooterEl.style.removeProperty('height');
+            cachedFooterEl.style.removeProperty('top');
+            cachedFooterEl.style.removeProperty('left');
+            page === null || page === void 0 ? void 0 : page.style.removeProperty('padding-bottom');
+            // Move to page
+            page === null || page === void 0 ? void 0 : page.appendChild(cachedFooterEl);
         }
         else {
-            const pagePadding = footerToShow.clientHeight;
-            page.style.setProperty('padding-bottom', `${pagePadding}px`);
+            // Get both the footer and document body positions
+            const cachedFooterElRect = cachedFooterEl.getBoundingClientRect();
+            const bodyRect = document.body.getBoundingClientRect();
+            // Add padding to the parent element to prevent content from being hidden
+            // when the footer is positioned absolutely. This has to be done before we
+            // make the footer absolutely positioned or we may accidentally cause the
+            // sheet to scroll.
+            const footerHeight = cachedFooterEl.clientHeight;
+            page === null || page === void 0 ? void 0 : page.style.setProperty('padding-bottom', `${footerHeight}px`);
+            // Apply positioning styles to keep footer at bottom
+            cachedFooterEl.classList.add('modal-footer-moving');
+            // Calculate absolute position relative to body
+            // We need to subtract the body's offsetTop to get true position within document.body
+            const absoluteTop = cachedFooterElRect.top - bodyRect.top;
+            const absoluteLeft = cachedFooterElRect.left - bodyRect.left;
+            // Capture the footer's current dimensions and hard code them during the drag
+            cachedFooterEl.style.setProperty('position', 'absolute');
+            cachedFooterEl.style.setProperty('width', `${cachedFooterEl.clientWidth}px`);
+            cachedFooterEl.style.setProperty('height', `${cachedFooterEl.clientHeight}px`);
+            cachedFooterEl.style.setProperty('top', `${absoluteTop}px`);
+            cachedFooterEl.style.setProperty('left', `${absoluteLeft}px`);
+            // Also cache the footer Y position, which we use to determine if the
+            // sheet has been moved below the footer. When that happens, we need to swap
+            // the position back so it will collapse correctly.
+            cachedFooterYPosition = absoluteTop;
+            // If there's a toolbar, we need to combine the toolbar height with the footer position
+            // because the toolbar moves with the drag handle, so when it starts overlapping the footer,
+            // we need to account for that.
+            const toolbar = baseEl.querySelector('ion-toolbar');
+            if (toolbar) {
+                cachedFooterYPosition -= toolbar.clientHeight;
+            }
+            document.body.appendChild(cachedFooterEl);
         }
-        footerToHide.style.setProperty('display', 'none');
-        footerToHide.setAttribute('aria-hidden', 'true');
     };
     /**
      * After the entering animation completes,
@@ -180,12 +220,11 @@ export const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpo
         }
         /**
          * If expandToScroll is disabled, we need to swap
-         * the footer visibility to the original, so if the modal
-         * is dismissed, the footer dismisses with the modal
-         * and doesn't stay on the screen after the modal is gone.
+         * the footer position to moving so that it doesn't shake
+         * while the sheet is being dragged.
          */
         if (!expandToScroll) {
-            swapFooterVisibility('original');
+            swapFooterPosition('moving');
         }
         /**
          * If we are pulling down, then it is possible we are pulling on the content.
@@ -204,6 +243,21 @@ export const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpo
         animation.progressStart(true, 1 - currentBreakpoint);
     };
     const onMove = (detail) => {
+        /**
+         * If `expandToScroll` is disabled, we need to see if we're currently below
+         * the footer element and the footer is in a stationary position. If so,
+         * we need to make the stationary the original position so that the footer
+         * collapses with the sheet.
+         */
+        if (!expandToScroll && cachedFooterYPosition !== null && currentFooterState !== null) {
+            // Check if we need to swap the footer position
+            if (detail.currentY >= cachedFooterYPosition && currentFooterState === 'moving') {
+                swapFooterPosition('stationary');
+            }
+            else if (detail.currentY < cachedFooterYPosition && currentFooterState === 'stationary') {
+                swapFooterPosition('moving');
+            }
+        }
         /**
          * If `expandToScroll` is disabled, and an upwards swipe gesture is done within
          * the scrollable content, we should not allow the swipe gesture to continue.
@@ -337,14 +391,6 @@ export const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpo
          * snapping animation completes.
          */
         gesture.enable(false);
-        /**
-         * If expandToScroll is disabled, we need to swap
-         * the footer visibility to the cloned one so the footer
-         * doesn't flicker when the sheet's height is animated.
-         */
-        if (!expandToScroll && shouldRemainOpen) {
-            swapFooterVisibility('cloned');
-        }
         if (shouldPreventDismiss) {
             handleCanDismiss(baseEl, animation);
         }
@@ -361,10 +407,26 @@ export const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpo
         if (contentEl && (snapToBreakpoint === breakpoints[breakpoints.length - 1] || !expandToScroll)) {
             contentEl.scrollY = true;
         }
+        /**
+         * If expandToScroll is disabled and we're animating
+         * to the close of the sheet, we need to swap
+         * the footer position to stationary so that it
+         * will collapse correctly. We cannot just always swap
+         * here or it'll be jittery while animating movement.
+         */
+        if (!expandToScroll && snapToBreakpoint === 0) {
+            swapFooterPosition('stationary');
+        }
         return new Promise((resolve) => {
             animation
                 .onFinish(() => {
                 if (shouldRemainOpen) {
+                    /**
+                     * If expandToScroll is disabled, we need to swap
+                     * the footer position to stationary so that it
+                     * will act as it would by default
+                     */
+                    swapFooterPosition('stationary');
                     /**
                      * Once the snapping animation completes,
                      * we need to reset the animation to go

package/dist/collection/components/picker-legacy-column/picker-column.js

@@ -328,7 +328,7 @@ export class PickerColumnCmp {
         const colEl = this.optsEl;
         if (colEl) {
             // DOM READ
-            // We perfom a DOM read over a rendered item, this needs to happen after the first render or after the column has changed
+            // We perfom a DOM read over a rendered item, this needs to happen after the first render or after the the column has changed
             this.optHeight = colEl.firstElementChild ? colEl.firstElementChild.clientHeight : 0;
         }
         this.refresh(forceRefresh, animated);
@@ -336,9 +336,9 @@ export class PickerColumnCmp {
     render() {
         const col = this.col;
         const mode = getIonMode(this);
-        return (h(Host, { key: '10ef653cbae8e1ed92a23fa17f3396082e35951f', class: Object.assign({ [mode]: true, 'picker-col': true, 'picker-opts-left': this.col.align === 'left', 'picker-opts-right': this.col.align === 'right' }, getClassMap(col.cssClass)), style: {
+        return (h(Host, { key: '88a3c9397c9ac92dd814074c8ae6ecf8e3420a2c', class: Object.assign({ [mode]: true, 'picker-col': true, 'picker-opts-left': this.col.align === 'left', 'picker-opts-right': this.col.align === 'right' }, getClassMap(col.cssClass)), style: {
                 'max-width': this.col.columnWidth,
-            } }, col.prefix && (h("div", { key: '253066708012034206b1d3d466ea48d0a3be3323', class: "picker-prefix", style: { width: col.prefixWidth } }, col.prefix)), h("div", { key: '15fa07307d4d2b4994504a5bf2de8db05b51cd2c', class: "picker-opts", style: { maxWidth: col.optionsWidth }, ref: (el) => (this.optsEl = el) }, col.options.map((o, index) => (h("button", { "aria-label": o.ariaLabel, class: { 'picker-opt': true, 'picker-opt-disabled': !!o.disabled }, "opt-index": index }, o.text)))), col.suffix && (h("div", { key: '4db779830b1e6aa6b324e5a72541d4f610ac1ff5', class: "picker-suffix", style: { width: col.suffixWidth } }, col.suffix))));
+            } }, col.prefix && (h("div", { key: '4491a705d15337e6f45f3cf6fd21af5242474729', class: "picker-prefix", style: { width: col.prefixWidth } }, col.prefix)), h("div", { key: 'b0dd4b7a7a4c1edc4b73e7fb134ac85264072365', class: "picker-opts", style: { maxWidth: col.optionsWidth }, ref: (el) => (this.optsEl = el) }, col.options.map((o, index) => (h("button", { "aria-label": o.ariaLabel, class: { 'picker-opt': true, 'picker-opt-disabled': !!o.disabled }, "opt-index": index }, o.text)))), col.suffix && (h("div", { key: 'c16419ce6481d60fc3ba6b8d102a4edf0ede02aa', class: "picker-suffix", style: { width: col.suffixWidth } }, col.suffix))));
     }
     static get is() { return "ion-picker-legacy-column"; }
     static get originalStyleUrls() {

package/dist/collection/components/searchbar/searchbar.js

@@ -378,8 +378,8 @@ export class Searchbar {
         const clearIcon = this.clearIcon || (mode === 'ios' ? closeCircle : closeSharp);
         const searchIcon = this.searchIcon || (mode === 'ios' ? searchOutline : searchSharp);
         const shouldShowCancelButton = this.shouldShowCancelButton();
-        const cancelButton = this.showCancelButton !== 'never' && (h("button", { key: '4a4bddfaf44acb9ea71d37d11c3fc11450134a5c', "aria-label": cancelButtonText, "aria-hidden": shouldShowCancelButton ? undefined : 'true', type: "button", tabIndex: mode === 'ios' && !shouldShowCancelButton ? -1 : undefined, onMouseDown: this.onCancelSearchbar, onTouchStart: this.onCancelSearchbar, class: "searchbar-cancel-button" }, h("div", { key: '24424547e34a80422f617f5597965724a3ef65f0', "aria-hidden": "true" }, mode === 'md' ? (h("ion-icon", { "aria-hidden": "true", mode: mode, icon: this.cancelButtonIcon, lazy: false })) : (cancelButtonText))));
-        return (h(Host, { key: '0c0e7334cb2af87081a278e5a3f6be3dc646a073', role: "search", "aria-disabled": this.disabled ? 'true' : null, class: createColorClasses(this.color, {
+        const cancelButton = this.showCancelButton !== 'never' && (h("button", { key: '989f3e84c472ada6e66dd9b249d0d268bf17ce26', "aria-label": cancelButtonText, "aria-hidden": shouldShowCancelButton ? undefined : 'true', type: "button", tabIndex: mode === 'ios' && !shouldShowCancelButton ? -1 : undefined, onMouseDown: this.onCancelSearchbar, onTouchStart: this.onCancelSearchbar, class: "searchbar-cancel-button" }, h("div", { key: '7d335d4fde33822dc79d26b748ba2e98db7494bb', "aria-hidden": "true" }, mode === 'md' ? (h("ion-icon", { "aria-hidden": "true", mode: mode, icon: this.cancelButtonIcon, lazy: false })) : (cancelButtonText))));
+        return (h(Host, { key: 'd1a1972725e949fb102c91487aaa7b9d10c2d718', role: "search", "aria-disabled": this.disabled ? 'true' : null, class: createColorClasses(this.color, {
                 [mode]: true,
                 'searchbar-animated': animated,
                 'searchbar-disabled': this.disabled,
@@ -389,14 +389,14 @@ export class Searchbar {
                 'searchbar-has-focus': this.focused,
                 'searchbar-should-show-clear': this.shouldShowClearButton(),
                 'searchbar-should-show-cancel': this.shouldShowCancelButton(),
-            }) }, h("div", { key: '859da78b062b9059701eba166be3bc5417f7395b', class: "searchbar-input-container" }, h("input", Object.assign({ key: '840fd06a1e4b5a8d7f6d7439d02aef9fcb9720b6', "aria-label": "search text", disabled: this.disabled, ref: (el) => (this.nativeInput = el), class: "searchbar-input", inputMode: this.inputmode, enterKeyHint: this.enterkeyhint, name: this.name, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, minLength: this.minlength, maxLength: this.maxlength, placeholder: this.placeholder, type: this.type, value: this.getValue(), autoCapitalize: autocapitalize === 'default' ? undefined : autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, spellcheck: this.spellcheck }, this.inheritedAttributes)), mode === 'md' && cancelButton, h("ion-icon", { key: 'a5aaa6a2204d38433cac283dd47b6197499fa585', "aria-hidden": "true", mode: mode, icon: searchIcon, lazy: false, class: "searchbar-search-icon" }), h("button", { key: 'cf62c8969c5c916ac838e122a0ad45b2ae234791', "aria-label": "reset", type: "button", "no-blur": true, class: "searchbar-clear-button", onPointerDown: (ev) => {
+            }) }, h("div", { key: 'add53640b2994cb6b2bf02792dafe51aba6b1684', class: "searchbar-input-container" }, h("input", Object.assign({ key: '160cc36459a4a652e7f41ccd14dcdc782278779e', "aria-label": "search text", disabled: this.disabled, ref: (el) => (this.nativeInput = el), class: "searchbar-input", inputMode: this.inputmode, enterKeyHint: this.enterkeyhint, name: this.name, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, minLength: this.minlength, maxLength: this.maxlength, placeholder: this.placeholder, type: this.type, value: this.getValue(), autoCapitalize: autocapitalize === 'default' ? undefined : autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, spellcheck: this.spellcheck }, this.inheritedAttributes)), mode === 'md' && cancelButton, h("ion-icon", { key: '8825fd13af0d2dea451ccc0e00ae7b5021dc01c4', "aria-hidden": "true", mode: mode, icon: searchIcon, lazy: false, class: "searchbar-search-icon" }), h("button", { key: '8a7b56da278b9ca5c4f5a4ee9c01924fd5ae29d8', "aria-label": "reset", type: "button", "no-blur": true, class: "searchbar-clear-button", onPointerDown: (ev) => {
                 /**
                  * This prevents mobile browsers from
                  * blurring the input when the clear
                  * button is activated.
                  */
                 ev.preventDefault();
-            }, onClick: () => this.onClearInput(true) }, h("ion-icon", { key: 'b1a75f0964fc2119479e246dc27bef7cc33bd19f', "aria-hidden": "true", mode: mode, icon: clearIcon, lazy: false, class: "searchbar-clear-icon" }))), mode === 'ios' && cancelButton));
+            }, onClick: () => this.onClearInput(true) }, h("ion-icon", { key: '24c55274516ab012d8c25f03525c6cdb9409e52f', "aria-hidden": "true", mode: mode, icon: clearIcon, lazy: false, class: "searchbar-clear-icon" }))), mode === 'ios' && cancelButton));
     }
     static get is() { return "ion-searchbar"; }
     static get encapsulation() { return "scoped"; }
@@ -545,7 +545,7 @@ export class Searchbar {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Set the cancel button text. Only applies to `ios` mode."
+                    "text": "Set the the cancel button text. Only applies to `ios` mode."
                 },
                 "attribute": "cancel-button-text",
                 "reflect": false,

package/dist/docs.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2025-05-27T23:27:48",
+  "timestamp": "2025-05-29T13:38:24",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.20.0",
@@ -25567,7 +25567,7 @@
           "mutable": false,
           "attr": "cancel-button-text",
           "reflectToAttr": false,
-          "docs": "Set the cancel button text. Only applies to `ios` mode.",
+          "docs": "Set the the cancel button text. Only applies to `ios` mode.",
           "docsTags": [],
           "default": "'Cancel'",
           "values": [

package/dist/esm/ion-button_2.entry.js

@@ -1,7 +1,7 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { j as getAssetPath, r as registerInstance, c as createEvent, i as forceUpdate, h, e as Host, f as getElement } from './index-527b9e34.js';
+import { j as getAssetPath, r as registerInstance, c as createEvent, h, e as Host, f as getElement } from './index-527b9e34.js';
 import { m as hasShadowDom, i as inheritAriaAttributes } from './helpers-d94bc8ad.js';
 import { p as printIonWarning } from './index-cfd9c1f2.js';
 import { o as openURL, c as createColorClasses$1, h as hostContext } from './theme-01f3f29c.js';
@@ -206,20 +206,6 @@ const Button = class {
             this.formButtonEl.disabled = disabled;
         }
     }
-    /**
-     * This component is used within the `ion-input-password-toggle` component
-     * to toggle the visibility of the password input.
-     * These attributes need to update based on the state of the password input.
-     * Otherwise, the values will be stale.
-     *
-     * @param newValue
-     * @param _oldValue
-     * @param propName
-     */
-    onAriaChanged(newValue, _oldValue, propName) {
-        this.inheritedAttributes = Object.assign(Object.assign({}, this.inheritedAttributes), { [propName]: newValue });
-        forceUpdate(this);
-    }
     /**
      * This is responsible for rendering a hidden native
      * button element inside the associated form. This allows
@@ -357,7 +343,7 @@ const Button = class {
         {
             type !== 'button' && this.renderHiddenButton();
         }
-        return (h(Host, { key: 'b105ad09215adb3ca2298acdadf0dc9154bbb9b0', onClick: this.handleClick, "aria-disabled": disabled ? 'true' : null, class: createColorClasses$1(color, {
+        return (h(Host, { key: 'e213b0bb76b3f90f883b1a0ea463bb86c2df69c3', onClick: this.handleClick, "aria-disabled": disabled ? 'true' : null, class: createColorClasses$1(color, {
                 [mode]: true,
                 [buttonType]: true,
                 [`${buttonType}-${expand}`]: expand !== undefined,
@@ -372,13 +358,11 @@ const Button = class {
                 'button-disabled': disabled,
                 'ion-activatable': true,
                 'ion-focusable': true,
-            }) }, h(TagType, Object.assign({ key: '66b4e7112bcb9e41d5a723fbbadb0a3104f9ee1d' }, attrs, { class: "button-native", part: "native", disabled: disabled, onFocus: this.onFocus, onBlur: this.onBlur }, inheritedAttributes), h("span", { key: '1439fc3da280221028dcf7ce8ec9dab273c4d4bb', class: "button-inner" }, h("slot", { key: 'd5269ae1afc87ec7b99746032f59cbae93720a9f', name: "icon-only", onSlotchange: this.slotChanged }), h("slot", { key: '461c83e97aa246aa86d83e14f1e15a288d35041e', name: "start" }), h("slot", { key: '807170d47101f9f6a333dd4ff489c89284f306fe' }), h("slot", { key: 'e67f116dd0349a0d27893e4f3ff0ccef1d402f80', name: "end" })), mode === 'md' && h("ion-ripple-effect", { key: '273f0bd9645a36c1bfd18a5c2ab4f81e22b7b989', type: this.rippleType }))));
+            }) }, h(TagType, Object.assign({ key: 'b7c2a46fb994024841219316f4089335fa463d84' }, attrs, { class: "button-native", part: "native", disabled: disabled, onFocus: this.onFocus, onBlur: this.onBlur }, inheritedAttributes), h("span", { key: '3e07a5c9f86836f9fbaefc6c617bdde6eb6f70cd', class: "button-inner" }, h("slot", { key: '41c08ae09aed16faaa57707d229ff75d97f0731c', name: "icon-only", onSlotchange: this.slotChanged }), h("slot", { key: 'ab8b749e4572884cc04970a7594466b4a24c886e', name: "start" }), h("slot", { key: '397f7ff48ea45e82029414be95d29ae86e12c3a9' }), h("slot", { key: '9a5627713002e8be3738d392b616f6e951b70e12', name: "end" })), mode === 'md' && h("ion-ripple-effect", { key: '105566543ceda102474edab7ca8a44c7e71af589', type: this.rippleType }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
-        "disabled": ["disabledChanged"],
-        "aria-checked": ["onAriaChanged"],
-        "aria-label": ["onAriaChanged"]
+        "disabled": ["disabledChanged"]
     }; }
 };
 Button.style = {

package/dist/esm/ion-datetime_3.entry.js

@@ -683,18 +683,19 @@ const Datetime = class {
                 warnIfValueOutOfBounds(valueToProcess, minParts, maxParts);
             }
             /**
-             * If there are multiple values, clamp to the last one.
-             * This is because the last value is the one that the user
-             * has most recently interacted with.
+             * If there are multiple values, pick an arbitrary one to clamp to. This way,
+             * if the values are across months, we always show at least one of them. Note
+             * that the values don't necessarily have to be in order.
              */
-            const singleValue = Array.isArray(valueToProcess) ? valueToProcess[valueToProcess.length - 1] : valueToProcess;
+            const singleValue = Array.isArray(valueToProcess) ? valueToProcess[0] : valueToProcess;
             const targetValue = clampDate(singleValue, minParts, maxParts);
             const { month, day, year, hour, minute } = targetValue;
             const ampm = parseAmPm(hour);
             /**
-             * Since `activeParts` indicates a value that been explicitly selected
-             * either by the user or the app, only update `activeParts` if the
-             * `value` property is set.
+             * Since `activeParts` indicates a value that
+             * been explicitly selected either by the
+             * user or the app, only update `activeParts`
+             * if the `value` property is set.
              */
             if (hasValue) {
                 if (Array.isArray(valueToProcess)) {
@@ -719,28 +720,51 @@ const Datetime = class {
                  */
                 this.activeParts = [];
             }
+            /**
+             * 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)
+             */
             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) {
-                /**
-                 * 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)
-                 */
-                this.animateToDate(targetValue);
+            let areAllSelectedDatesInSameMonth = true;
+            if (Array.isArray(valueToProcess)) {
+                const firstMonth = valueToProcess[0].month;
+                for (const date of valueToProcess) {
+                    if (date.month !== firstMonth) {
+                        areAllSelectedDatesInSameMonth = false;
+                        break;
+                    }
+                }
             }
-            else {
-                this.setWorkingParts({
-                    month,
-                    day,
-                    year,
-                    hour,
-                    minute,
-                    ampm,
-                });
+            /**
+             * If there is more than one date selected
+             * and the dates aren't all in the same month,
+             * then we should neither animate to the date
+             * nor update the working parts because we do
+             * not know which date the user wants to view.
+             */
+            if (areAllSelectedDatesInSameMonth) {
+                if (isGridStyle && didChangeMonth && bodyIsVisible && !showMonthAndYear) {
+                    this.animateToDate(targetValue);
+                }
+                else {
+                    /**
+                     * We only need to do this if we didn't just animate to a new month,
+                     * since that calls prevMonth/nextMonth which calls setWorkingParts for us.
+                     */
+                    this.setWorkingParts({
+                        month,
+                        day,
+                        year,
+                        hour,
+                        minute,
+                        ampm,
+                    });
+                }
             }
         };
         this.animateToDate = async (targetValue) => {
@@ -1735,7 +1759,7 @@ const Datetime = class {
         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: '20e64fb4cfe3fbd74b24038c89e00651d78b500c', "aria-disabled": disabled ? 'true' : null, onFocus: this.onFocus, onBlur: this.onBlur, class: Object.assign({}, createColorClasses(color, {
+        return (h(Host, { key: 'c3dfea8f46fcbcef38eb9e8a69b1b46a4e4b82fd', "aria-disabled": disabled ? 'true' : null, onFocus: this.onFocus, onBlur: this.onBlur, class: Object.assign({}, createColorClasses(color, {
                 [mode]: true,
                 ['datetime-readonly']: readonly,
                 ['datetime-disabled']: disabled,
@@ -1745,7 +1769,7 @@ const Datetime = class {
                 [`datetime-size-${size}`]: true,
                 [`datetime-prefer-wheel`]: hasWheelVariant,
                 [`datetime-grid`]: isGridStyle,
-            })) }, h("div", { key: '488fe7bf6b9052e208d65206a580d5d65b945a62', class: "intersection-tracker", ref: (el) => (this.intersectionTrackerRef = el) }), this.renderDatetime(mode)));
+            })) }, h("div", { key: '75c91243cf6a51f44b83d7cf7d8c0c96bfd3c83f', class: "intersection-tracker", ref: (el) => (this.intersectionTrackerRef = el) }), this.renderDatetime(mode)));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -2355,7 +2379,7 @@ const PickerColumnCmp = class {
         const colEl = this.optsEl;
         if (colEl) {
             // DOM READ
-            // We perfom a DOM read over a rendered item, this needs to happen after the first render or after the column has changed
+            // We perfom a DOM read over a rendered item, this needs to happen after the first render or after the the column has changed
             this.optHeight = colEl.firstElementChild ? colEl.firstElementChild.clientHeight : 0;
         }
         this.refresh(forceRefresh, animated);
@@ -2363,9 +2387,9 @@ const PickerColumnCmp = class {
     render() {
         const col = this.col;
         const mode = getIonMode(this);
-        return (h(Host, { key: '10ef653cbae8e1ed92a23fa17f3396082e35951f', class: Object.assign({ [mode]: true, 'picker-col': true, 'picker-opts-left': this.col.align === 'left', 'picker-opts-right': this.col.align === 'right' }, getClassMap(col.cssClass)), style: {
+        return (h(Host, { key: '88a3c9397c9ac92dd814074c8ae6ecf8e3420a2c', class: Object.assign({ [mode]: true, 'picker-col': true, 'picker-opts-left': this.col.align === 'left', 'picker-opts-right': this.col.align === 'right' }, getClassMap(col.cssClass)), style: {
                 'max-width': this.col.columnWidth,
-            } }, col.prefix && (h("div", { key: '253066708012034206b1d3d466ea48d0a3be3323', class: "picker-prefix", style: { width: col.prefixWidth } }, col.prefix)), h("div", { key: '15fa07307d4d2b4994504a5bf2de8db05b51cd2c', class: "picker-opts", style: { maxWidth: col.optionsWidth }, ref: (el) => (this.optsEl = el) }, col.options.map((o, index) => (h("button", { "aria-label": o.ariaLabel, class: { 'picker-opt': true, 'picker-opt-disabled': !!o.disabled }, "opt-index": index }, o.text)))), col.suffix && (h("div", { key: '4db779830b1e6aa6b324e5a72541d4f610ac1ff5', class: "picker-suffix", style: { width: col.suffixWidth } }, col.suffix))));
+            } }, col.prefix && (h("div", { key: '4491a705d15337e6f45f3cf6fd21af5242474729', class: "picker-prefix", style: { width: col.prefixWidth } }, col.prefix)), h("div", { key: 'b0dd4b7a7a4c1edc4b73e7fb134ac85264072365', class: "picker-opts", style: { maxWidth: col.optionsWidth }, ref: (el) => (this.optsEl = el) }, col.options.map((o, index) => (h("button", { "aria-label": o.ariaLabel, class: { 'picker-opt': true, 'picker-opt-disabled': !!o.disabled }, "opt-index": index }, o.text)))), col.suffix && (h("div", { key: 'c16419ce6481d60fc3ba6b8d102a4edf0ede02aa', class: "picker-suffix", style: { width: col.suffixWidth } }, col.suffix))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/ion-input-password-toggle.entry.js

@@ -67,14 +67,14 @@ const InputPasswordToggle = class {
         const isPasswordVisible = type === 'text';
         return (h(Host, { key: '1a28e078c83e74c72d8bb8189ece93ec2e3fa3d0', class: createColorClasses(color, {
                 [mode]: true,
-            }) }, h("ion-button", { key: '61591d11d97f3065240e51d8887f831339fd36cf', mode: mode, color: color, fill: "clear", shape: "round", "aria-checked": isPasswordVisible ? 'true' : 'false', "aria-label": isPasswordVisible ? 'Hide password' : 'Show password', role: "switch", type: "button", onPointerDown: (ev) => {
+            }) }, h("ion-button", { key: '039d1bab764093bb6fe4a34299b0872abda087fd', mode: mode, color: color, fill: "clear", shape: "round", "aria-checked": isPasswordVisible ? 'true' : 'false', "aria-label": "show password", role: "switch", type: "button", onPointerDown: (ev) => {
                 /**
                  * This prevents mobile browsers from
                  * blurring the input when the password toggle
                  * button is activated.
                  */
                 ev.preventDefault();
-            }, onClick: this.togglePasswordVisibility }, h("ion-icon", { key: '9d98e6675d5e2adea5c0f56ab67e98b6f57521dd', slot: "icon-only", "aria-hidden": "true", icon: isPasswordVisible ? hidePasswordIcon : showPasswordIcon }))));
+            }, onClick: this.togglePasswordVisibility }, h("ion-icon", { key: '26477ee97b808c3d79944bf5e33d4e05f1ae0b3f', slot: "icon-only", "aria-hidden": "true", icon: isPasswordVisible ? hidePasswordIcon : showPasswordIcon }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {