voyager-ionic-core 7.7.2 → 7.8.6

package/dist/collection/components/menu/menu.js

@@ -4,7 +4,7 @@
 import { Build, Host, h } from "@stencil/core";
 import { getTimeGivenProgression } from "../../utils/animation/cubic-bezier";
 import { GESTURE_CONTROLLER } from "../../utils/gesture/index";
-import { shoudUseCloseWatcher } from "../../utils/hardware-back-button";
+import { shouldUseCloseWatcher } from "../../utils/hardware-back-button";
 import { inheritAriaAttributes, assert, clamp, isEndSide as isEnd } from "../../utils/helpers";
 import { menuController } from "../../utils/menu-controller/index";
 import { getPresentedOverlay } from "../../utils/overlays";
@@ -601,13 +601,13 @@ export class Menu {
          * the ionBackButton listener in the menu controller
          * will handle closing the menu when Escape is pressed.
          */
-        return (h(Host, { key: 'be7145625a30951e5cc26646f6121ee4fa4c910f', onKeyDown: shoudUseCloseWatcher() ? null : this.onKeydown, role: "navigation", "aria-label": inheritedAttributes['aria-label'] || 'menu', class: {
+        return (h(Host, { key: '7443f67fbe5122052025bab862136044fc942401', onKeyDown: shouldUseCloseWatcher() ? null : this.onKeydown, role: "navigation", "aria-label": inheritedAttributes['aria-label'] || 'menu', class: {
                 [mode]: true,
                 [`menu-type-${type}`]: true,
                 'menu-enabled': !disabled,
                 [`menu-side-${side}`]: true,
                 'menu-pane-visible': isPaneVisible,
-            } }, h("div", { key: 'ecd6e0641ed67691db270190801f7be365a2d121', class: "menu-inner", part: "container", ref: (el) => (this.menuInnerEl = el) }, h("slot", { key: 'aea3780e259f2b3ea84697a509bb7f13fa9531e9' })), h("ion-backdrop", { key: 'be3253506a34c4c00eb1814621c674196b72db46', ref: (el) => (this.backdropEl = el), class: "menu-backdrop", tappable: false, stopPropagation: false, part: "backdrop" })));
+            } }, h("div", { key: '45c7d37ace20f663a4bea89cb38bbc798f88dfbd', class: "menu-inner", part: "container", ref: (el) => (this.menuInnerEl = el) }, h("slot", { key: '975437a5d4029cc200b6dbc2d47a16b4318c00aa' })), h("ion-backdrop", { key: 'acc8a1f5dc1b1e2a34757bf797e794017f545bdc', ref: (el) => (this.backdropEl = el), class: "menu-backdrop", tappable: false, stopPropagation: false, part: "backdrop" })));
     }
     static get is() { return "ion-menu"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/menu-button/menu-button.js

@@ -46,7 +46,7 @@ export class MenuButton {
             type: this.type,
         };
         const ariaLabel = inheritedAttributes['aria-label'] || 'menu';
-        return (h(Host, { key: '2fd7130b8d28695162f7efebbd2131e5e9e4f330', onClick: this.onClick, "aria-disabled": disabled ? 'true' : null, "aria-hidden": hidden ? 'true' : null, class: createColorClasses(color, {
+        return (h(Host, { key: '7a4543dfcbf559f0d3a473683f8e0bd1d4c3542a', onClick: this.onClick, "aria-disabled": disabled ? 'true' : null, "aria-hidden": hidden ? 'true' : null, class: createColorClasses(color, {
                 [mode]: true,
                 button: true, // ion-buttons target .button
                 'menu-button-hidden': hidden,
@@ -55,7 +55,7 @@ export class MenuButton {
                 'in-toolbar-color': hostContext('ion-toolbar[color]', this.el),
                 'ion-activatable': true,
                 'ion-focusable': true,
-            }) }, h("button", Object.assign({ key: 'fa6b1fb9291df812b04065b4b0ebdfd28e5217eb' }, attrs, { disabled: disabled, class: "button-native", part: "native", "aria-label": ariaLabel }), h("span", { key: '88106a08070ebff7457c581301efe649829aded2', class: "button-inner" }, h("slot", { key: 'e3edfb89e5705b2c08c66f3d3452457667de3657' }, h("ion-icon", { key: '24678e9c3bb2f1f3db113a2ae0ec93e407a7de0c', part: "icon", icon: menuIcon, mode: mode, lazy: false, "aria-hidden": "true" }))), mode === 'md' && h("ion-ripple-effect", { type: "unbounded" }))));
+            }) }, h("button", Object.assign({ key: '2b6944dc130fa765ac7559077254555583529ec3' }, attrs, { disabled: disabled, class: "button-native", part: "native", "aria-label": ariaLabel }), h("span", { key: 'b4d1006bec8c9e761c64ae3e2fb64848dfc30307', class: "button-inner" }, h("slot", { key: 'eaf1d57cd2e841c70095821576c52062dc76500b' }, h("ion-icon", { key: '105ddb806aae2e6add6cb3989fd4a5cf5ee7d952', part: "icon", icon: menuIcon, mode: mode, lazy: false, "aria-hidden": "true" }))), mode === 'md' && h("ion-ripple-effect", { key: '8a312aab747de2bdd6adee74fb0bfcbbde12c191', type: "unbounded" }))));
     }
     static get is() { return "ion-menu-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/menu-toggle/menu-toggle.js

@@ -26,10 +26,10 @@ export class MenuToggle {
     render() {
         const mode = getIonMode(this);
         const hidden = this.autoHide && !this.visible;
-        return (h(Host, { key: '5b75baade530bf9e7ed9165a5db3e513975e22f2', onClick: this.onClick, "aria-hidden": hidden ? 'true' : null, class: {
+        return (h(Host, { key: '94a0815a634c6fb1991854bfbcf5b2b4b61d7710', onClick: this.onClick, "aria-hidden": hidden ? 'true' : null, class: {
                 [mode]: true,
                 'menu-toggle-hidden': hidden,
-            } }, h("slot", { key: '65dea458274b685125c22af54aa153cf4977113c' })));
+            } }, h("slot", { key: 'f3ac6d17d5421390ab05f3f31ad00ec4f2ca5c7c' })));
     }
     static get is() { return "ion-menu-toggle"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,8 +1,9 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
+import { isIonContent, findClosestIonContent } from "../../../utils/content/index";
 import { createGesture } from "../../../utils/gesture/index";
-import { clamp, raf } from "../../../utils/helpers";
+import { clamp, raf, getElementRoot } from "../../../utils/helpers";
 import { getBackdropValueForSheet } from "../utils";
 import { calculateSpringStep, handleCanDismiss } from "./utils";
 export const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, backdropBreakpoint, animation, breakpoints = [], getCurrentBreakpoint, onDismiss, onBreakpointChange) => {
@@ -87,19 +88,32 @@ export const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpo
     }
     const canStart = (detail) => {
         /**
-         * If the sheet is fully expanded and
-         * the user is swiping on the content,
-         * the gesture should not start to
-         * allow for scrolling on the content.
+         * If we are swiping on the content, swiping should only be possible if the content
+         * is scrolled all the way to the top so that we do not interfere with scrolling.
+         *
+         * We cannot assume that the `ion-content` target will remain consistent between swipes.
+         * For example, when using ion-nav within a modal it is possible to swipe, push a view,
+         * and then swipe again. The target content will not be the same between swipes.
          */
-        const content = detail.event.target.closest('ion-content');
+        const contentEl = findClosestIonContent(detail.event.target);
         currentBreakpoint = getCurrentBreakpoint();
-        if (currentBreakpoint === 1 && content) {
-            return false;
+        if (currentBreakpoint === 1 && contentEl) {
+            /**
+             * The modal should never swipe to close on the content with a refresher.
+             * Note 1: We cannot solve this by making this gesture have a higher priority than
+             * the refresher gesture as the iOS native refresh gesture uses a scroll listener in
+             * addition to a gesture.
+             *
+             * Note 2: Do not use getScrollElement here because we need this to be a synchronous
+             * operation, and getScrollElement is asynchronous.
+             */
+            const scrollEl = isIonContent(contentEl) ? getElementRoot(contentEl).querySelector('.inner-scroll') : contentEl;
+            const hasRefresherInContent = !!contentEl.querySelector('ion-refresher');
+            return !hasRefresherInContent && scrollEl.scrollTop === 0;
         }
         return true;
     };
-    const onStart = () => {
+    const onStart = (detail) => {
         /**
          * If canDismiss is anything other than `true`
          * then users should be able to swipe down
@@ -114,11 +128,10 @@ export const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpo
          */
         canDismissBlocksGesture = baseEl.canDismiss !== undefined && baseEl.canDismiss !== true && minBreakpoint === 0;
         /**
-         * If swiping on the content
-         * we should disable scrolling otherwise
-         * the sheet will expand and the content will scroll.
+         * If we are pulling down, then it is possible we are pulling on the content.
+         * We do not want scrolling to happen at the same time as the gesture.
          */
-        if (contentEl) {
+        if (detail.deltaY > 0 && contentEl) {
             contentEl.scrollY = false;
         }
         raf(() => {
@@ -131,6 +144,15 @@ export const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpo
         animation.progressStart(true, 1 - currentBreakpoint);
     };
     const onMove = (detail) => {
+        /**
+         * If we are pulling down, then it is possible we are pulling on the content.
+         * We do not want scrolling to happen at the same time as the gesture.
+         * This accounts for when the user scrolls down, scrolls all the way up, and then
+         * pulls down again such that the modal should start to move.
+         */
+        if (detail.deltaY > 0 && contentEl) {
+            contentEl.scrollY = false;
+        }
         /**
          * Given the change in gesture position on the Y axis,
          * compute where the offset of the animation should be
@@ -233,6 +255,16 @@ export const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpo
         else if (!shouldRemainOpen) {
             onDismiss();
         }
+        /**
+         * If the sheet is going to be fully expanded then we should enable
+         * scrolling immediately. The sheet modal animation takes ~500ms to finish
+         * so if we wait until then there is a visible delay for when scrolling is
+         * re-enabled. Native iOS allows for scrolling on the sheet modal as soon
+         * as the gesture is released, so we align with that.
+         */
+        if (contentEl && snapToBreakpoint === breakpoints[breakpoints.length - 1]) {
+            contentEl.scrollY = true;
+        }
         return new Promise((resolve) => {
             animation
                 .onFinish(() => {
@@ -251,13 +283,6 @@ export const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpo
                             animation.progressStart(true, 1 - snapToBreakpoint);
                             currentBreakpoint = snapToBreakpoint;
                             onBreakpointChange(currentBreakpoint);
-                            /**
-                             * If the sheet is fully expanded, we can safely
-                             * enable scrolling again.
-                             */
-                            if (contentEl && currentBreakpoint === breakpoints[breakpoints.length - 1]) {
-                                contentEl.scrollY = true;
-                            }
                             /**
                              * Backdrop should become enabled
                              * after the backdropBreakpoint value

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

@@ -131,9 +131,41 @@ export class Modal {
         this.triggerController.removeClickListener();
     }
     componentWillLoad() {
-        const { breakpoints, initialBreakpoint, el } = this;
+        const { breakpoints, initialBreakpoint, el, htmlAttributes } = this;
         const isSheetModal = (this.isSheetModal = breakpoints !== undefined && initialBreakpoint !== undefined);
-        this.inheritedAttributes = inheritAttributes(el, ['aria-label', 'role']);
+        const attributesToInherit = ['aria-label', 'role'];
+        this.inheritedAttributes = inheritAttributes(el, attributesToInherit);
+        /**
+         * When using a controller modal you can set attributes
+         * using the htmlAttributes property. Since the above attributes
+         * need to be inherited inside of the modal, we need to look
+         * and see if these attributes are being set via htmlAttributes.
+         *
+         * We could alternatively move this to componentDidLoad to simplify the work
+         * here, but we'd then need to make inheritedAttributes a State variable,
+         * thus causing another render to always happen after the first render.
+         */
+        if (htmlAttributes !== undefined) {
+            attributesToInherit.forEach((attribute) => {
+                const attributeValue = htmlAttributes[attribute];
+                if (attributeValue) {
+                    /**
+                     * If an attribute we need to inherit was
+                     * set using htmlAttributes then add it to
+                     * inheritedAttributes and remove it from htmlAttributes.
+                     * This ensures the attribute is inherited and not
+                     * set on the host.
+                     *
+                     * In this case, if an inherited attribute is set
+                     * on the host element and using htmlAttributes then
+                     * htmlAttributes wins, but that's not a pattern that we recommend.
+                     * The only time you'd need htmlAttributes is when using modalController.
+                     */
+                    this.inheritedAttributes = Object.assign(Object.assign({}, this.inheritedAttributes), { [attribute]: htmlAttributes[attribute] });
+                    delete htmlAttributes[attribute];
+                }
+            });
+        }
         if (isSheetModal) {
             this.currentBreakpoint = this.initialBreakpoint;
         }
@@ -530,18 +562,18 @@ export class Modal {
         const mode = getIonMode(this);
         const isCardModal = presentingElement !== undefined && mode === 'ios';
         const isHandleCycle = handleBehavior === 'cycle';
-        return (h(Host, Object.assign({ key: '0c2c4369ab2df4ef4660addea5e927c6a0232864', "no-router": true, tabindex: "-1" }, htmlAttributes, { style: {
+        return (h(Host, Object.assign({ key: 'e4ad28e6e794560d85252aebdca7f4752e4e7e99', "no-router": true, tabindex: "-1" }, htmlAttributes, { style: {
                 zIndex: `${20000 + this.overlayIndex}`,
-            }, class: Object.assign({ [mode]: true, ['modal-default']: !isCardModal && !isSheetModal, [`modal-card`]: isCardModal, [`modal-sheet`]: isSheetModal, 'overlay-hidden': true }, getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonModalDidPresent: this.onLifecycle, onIonModalWillPresent: this.onLifecycle, onIonModalWillDismiss: this.onLifecycle, onIonModalDidDismiss: this.onLifecycle }), h("ion-backdrop", { key: 'd044383a776c2ee1703f996caedaedca47f2948f', ref: (el) => (this.backdropEl = el), visible: this.showBackdrop, tappable: this.backdropDismiss, part: "backdrop" }), mode === 'ios' && h("div", { class: "modal-shadow" }), h("div", Object.assign({ key: '8d23b6a3cc9069e4d46fa0645cde9db3e6f89507',
+            }, class: Object.assign({ [mode]: true, ['modal-default']: !isCardModal && !isSheetModal, [`modal-card`]: isCardModal, [`modal-sheet`]: isSheetModal, 'overlay-hidden': true }, getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonModalDidPresent: this.onLifecycle, onIonModalWillPresent: this.onLifecycle, onIonModalWillDismiss: this.onLifecycle, onIonModalDidDismiss: this.onLifecycle }), h("ion-backdrop", { key: '6efd67361a062d15488390f9f0d6c0841e541893', ref: (el) => (this.backdropEl = el), visible: this.showBackdrop, tappable: this.backdropDismiss, part: "backdrop" }), mode === 'ios' && h("div", { key: '557b1c6b297df75acc80d1350b971e65ace6c343', class: "modal-shadow" }), h("div", Object.assign({ key: '67f9b27b662303fbaadaee2ae89972caadfd9994',
             /*
               role and aria-modal must be used on the
               same element. They must also be set inside the
               shadow DOM otherwise ion-button will not be highlighted
               when using VoiceOver: https://bugs.webkit.org/show_bug.cgi?id=247134
             */
-            role: "dialog" }, inheritedAttributes, { "aria-modal": "true", class: "modal-wrapper ion-overlay-wrapper", part: "content", ref: (el) => (this.wrapperEl = el) }), showHandle && (h("button", { class: "modal-handle",
+            role: "dialog" }, inheritedAttributes, { "aria-modal": "true", class: "modal-wrapper ion-overlay-wrapper", part: "content", ref: (el) => (this.wrapperEl = el) }), showHandle && (h("button", { key: '8f1eecc451b52467a8c3cfe500335cf6254bbfbc', class: "modal-handle",
             // Prevents the handle from receiving keyboard focus when it does not cycle
-            tabIndex: !isHandleCycle ? -1 : 0, "aria-label": "Activate to adjust the size of the dialog overlaying the screen", onClick: isHandleCycle ? this.onHandleClick : undefined, part: "handle" })), h("slot", { key: '3fbb689e4bf5575fbb26ad1000f6ac5993f3bf8f' }))));
+            tabIndex: !isHandleCycle ? -1 : 0, "aria-label": "Activate to adjust the size of the dialog overlaying the screen", onClick: isHandleCycle ? this.onHandleClick : undefined, part: "handle" })), h("slot", { key: 'cdc923404f01a14b9071a434c68547da3b22c71e' }))));
     }
     static get is() { return "ion-modal"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/modal/test/modal-attributes.spec.js

@@ -0,0 +1,32 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { h } from "@stencil/core";
+import { newSpecPage } from "@stencil/core/testing";
+import { Modal } from "../modal";
+it('should inherit attributes', async () => {
+    /**
+     * Note: This example should not be used in production.
+     * This only serves to check that `role` can be customized.
+     */
+    const page = await newSpecPage({
+        components: [Modal],
+        template: () => h("ion-modal", { overlayIndex: 1, "aria-label": "my label", role: "presentation" }),
+    });
+    const modal = page.body.querySelector('ion-modal');
+    const contentWrapper = modal.shadowRoot.querySelector('[part="content"]');
+    expect(contentWrapper.getAttribute('aria-label')).toBe('my label');
+    expect(contentWrapper.getAttribute('role')).toBe('presentation');
+});
+it('should inherit attributes when set via htmlAttributes', async () => {
+    const page = await newSpecPage({
+        components: [Modal],
+        template: () => (h("ion-modal", { overlayIndex: 1, htmlAttributes: { 'aria-label': 'my label', role: 'presentation' } })),
+    });
+    const modal = page.body.querySelector('ion-modal');
+    const contentWrapper = modal.shadowRoot.querySelector('[part="content"]');
+    expect(contentWrapper.getAttribute('aria-label')).toBe('my label');
+    expect(contentWrapper.getAttribute('role')).toBe('presentation');
+    expect(modal.hasAttribute('aria-label')).toBe(false);
+    expect(modal.hasAttribute('role')).toBe(false);
+});

package/dist/collection/components/nav/nav.js

@@ -827,7 +827,7 @@ export class Nav {
         }
     }
     render() {
-        return h("slot", { key: '654286a8a7ef03d4a22497eb51e781a9a8979774' });
+        return h("slot", { key: '6894eccc60e446294b01261477691ea1e88348ab' });
     }
     static get is() { return "ion-nav"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/nav-link/nav-link.js

@@ -14,7 +14,7 @@ export class NavLink {
         this.routerAnimation = undefined;
     }
     render() {
-        return h(Host, { key: 'a781794425ad0866705bc6691256184b93477a74', onClick: this.onClick });
+        return h(Host, { key: 'dab6e8a908395d99c87452c5e5aa4e61d9e72435', onClick: this.onClick });
     }
     static get is() { return "ion-nav-link"; }
     static get properties() {

package/dist/collection/components/note/note.js

@@ -13,9 +13,9 @@ export class Note {
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { key: 'eebc0ea94483a248192408a1546739700281d2ae', class: createColorClasses(this.color, {
+        return (h(Host, { key: '79a17a318ec6e8326c9741b4a9bb4598acdc225e', class: createColorClasses(this.color, {
                 [mode]: true,
-            }) }, h("slot", { key: '33018e11967398327a0e7c20522547a4d9e8f55b' })));
+            }) }, h("slot", { key: '5adeaccfabb4bee7b84ea5c5de804bd255b29255' })));
     }
     static get is() { return "ion-note"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/picker/picker.js

@@ -184,11 +184,11 @@ export class Picker {
     render() {
         const { htmlAttributes } = this;
         const mode = getIonMode(this);
-        return (h(Host, Object.assign({ key: 'c266cc072afaba2da22f70d8b62dc4bc6756d188', "aria-modal": "true", tabindex: "-1" }, htmlAttributes, { style: {
+        return (h(Host, Object.assign({ key: 'eb5f91ea74fb11daa6942f779ef461742cad9ecb', "aria-modal": "true", tabindex: "-1" }, htmlAttributes, { style: {
                 zIndex: `${20000 + this.overlayIndex}`,
             }, class: Object.assign({ [mode]: true,
                 // Used internally for styling
-                [`picker-${mode}`]: true, 'overlay-hidden': true }, getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonPickerWillDismiss: this.dispatchCancelHandler }), h("ion-backdrop", { key: '35ee3e5028028835580e28ac2c8db65a924d5d6a', visible: this.showBackdrop, tappable: this.backdropDismiss }), h("div", { key: '8b454e6edbcfc45c57d3d8baf7c14b7905921a6e', tabindex: "0" }), h("div", { key: 'e0fee78ec6d097bf0963190f748e5daad602e0f7', class: "picker-wrapper ion-overlay-wrapper", role: "dialog" }, h("div", { key: 'ce66bca18fc3e982ad7d6660f27cb1a03fb8247b', class: "picker-toolbar" }, this.buttons.map((b) => (h("div", { class: buttonWrapperClass(b) }, h("button", { type: "button", onClick: () => this.buttonClick(b), class: buttonClass(b) }, b.text))))), h("div", { key: 'a58b9523fe16f109dd6de0610717c5077fed964b', class: "picker-columns" }, h("div", { key: 'acd54c0314cff51e8513a08dd9755c4b847c0617', class: "picker-above-highlight" }), this.presented && this.columns.map((c) => h("ion-picker-column", { col: c })), h("div", { key: '604730bd87582d048d850c6e0a0f29ba33258918', class: "picker-below-highlight" }))), h("div", { key: '93baf5e6e57aec5f084d7d5b24af14e7d8126b5a', tabindex: "0" })));
+                [`picker-${mode}`]: true, 'overlay-hidden': true }, getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonPickerWillDismiss: this.dispatchCancelHandler }), h("ion-backdrop", { key: '7ea872d939e62f14129fff15334b2822ad2360c9', visible: this.showBackdrop, tappable: this.backdropDismiss }), h("div", { key: '2d77c225091eacab0207e28c96b966122afafef0', tabindex: "0" }), h("div", { key: '630d21e0c60ad97b71462cdc540858bb6ced0b8f', class: "picker-wrapper ion-overlay-wrapper", role: "dialog" }, h("div", { key: 'fa8553ec8d2ce8bf93e16e02334b6475cb51b5d4', class: "picker-toolbar" }, this.buttons.map((b) => (h("div", { class: buttonWrapperClass(b) }, h("button", { type: "button", onClick: () => this.buttonClick(b), class: buttonClass(b) }, b.text))))), h("div", { key: '177d1bcbd0ce38f16d9c936295a917fb981d02d7', class: "picker-columns" }, h("div", { key: 'be99b6e0279c210ef91a88ccc81acc7d37917a53', class: "picker-above-highlight" }), this.presented && this.columns.map((c) => h("ion-picker-column", { col: c })), h("div", { key: 'b36b21e8133b59e873e1d3447a1279f1b971c854', class: "picker-below-highlight" }))), h("div", { key: '17cea6dd24dbb0a08073ca4a84bfe027eb24833d', tabindex: "0" })));
     }
     static get is() { return "ion-picker"; }
     static get encapsulation() { return "scoped"; }

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

@@ -336,9 +336,9 @@ export class PickerColumnCmp {
     render() {
         const col = this.col;
         const mode = getIonMode(this);
-        return (h(Host, { key: '06e2ae483a3bcf4fe721ad0c48cded6a1efdc6c0', 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: '49bb4c67a67c7318d4c305df78ceabae36355112', 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", { class: "picker-prefix", style: { width: col.prefixWidth } }, col.prefix)), h("div", { key: '14bea013788d899edf7155eb3cc10f79fe8e4690', 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", { class: "picker-suffix", style: { width: col.suffixWidth } }, col.suffix))));
+            } }, col.prefix && (h("div", { key: '7e65761d24473e4ba0ce2d4fc707a5c5e8127903', class: "picker-prefix", style: { width: col.prefixWidth } }, col.prefix)), h("div", { key: '65c3aea609401e8ae4ea6d363a1b9436796c0a86', 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: 'c2e5a324ba95dd8832d3eb81b139e1f674d74a35', class: "picker-suffix", style: { width: col.suffixWidth } }, col.suffix))));
     }
     static get is() { return "ion-picker-column"; }
     static get originalStyleUrls() {

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

@@ -244,7 +244,11 @@ export class PickerColumnInternal {
      */
     componentWillLoad() {
         const visibleCallback = (entries) => {
-            const ev = entries[0];
+            /**
+             * Browsers will sometimes group multiple IO events into a single callback.
+             * As a result, we want to grab the last/most recent event in case there are multiple events.
+             */
+            const ev = entries[entries.length - 1];
             if (ev.isIntersecting) {
                 const { activeItem, el } = this;
                 this.isColumnVisible = true;
@@ -333,11 +337,11 @@ export class PickerColumnInternal {
          * the attribute can be moved to datetime.tsx and set on every
          * instance of ion-picker-column-internal there instead.
          */
-        return (h(Host, { key: 'd0e3818aa4ab06aefd988d1b42ae754244727b8f', exportparts: `${PICKER_ITEM_PART}, ${PICKER_ITEM_ACTIVE_PART}`, disabled: pickerDisabled, tabindex: pickerDisabled ? null : 0, class: createColorClasses(color, {
+        return (h(Host, { key: '42a034f2533d30d19f96a121eb74d5f757e1c684', exportparts: `${PICKER_ITEM_PART}, ${PICKER_ITEM_ACTIVE_PART}`, disabled: pickerDisabled, tabindex: pickerDisabled ? null : 0, class: createColorClasses(color, {
                 [mode]: true,
                 ['picker-column-active']: isActive,
                 ['picker-column-numeric-input']: numericInput,
-            }) }, h("div", { key: 'ec3b16415db5f64e3fab37fda023560ebcdc9423', class: "picker-item picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: '40c78c9a1277807572d73e23048c2730cab88f5a', class: "picker-item picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: 'c51fa817f6999356cf3568a46098e954936b45d5', class: "picker-item picker-item-empty", "aria-hidden": "true" }, "\u00A0"), items.map((item, index) => {
+            }) }, h("div", { key: '85efccb40c87d473c06026b8041d57b40d2369c3', class: "picker-item picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: '9fae4dd6697f23acba18c218ba250ea77954b18d', class: "picker-item picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: 'f117afeb204a4f6bb34a1cd0e1b786fa479d8b32', class: "picker-item picker-item-empty", "aria-hidden": "true" }, "\u00A0"), items.map((item, index) => {
             const isItemDisabled = pickerDisabled || item.disabled || false;
             {
                 /*
@@ -354,7 +358,7 @@ export class PickerColumnInternal {
                 }, "data-value": item.value, "data-index": index, onClick: (ev) => {
                     this.centerPickerItemInView(ev.target, true);
                 }, disabled: isItemDisabled, part: PICKER_ITEM_PART }, item.text));
-        }), h("div", { key: '80a7461dfe571f46466219b05007b021711aed32', class: "picker-item picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: 'fed82263295f58c51e2b753d0c06c7d71872b8a7', class: "picker-item picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: 'e805dff4122cc4e5fb4d7dcb96054fee8ad3bd07', class: "picker-item picker-item-empty", "aria-hidden": "true" }, "\u00A0")));
+        }), h("div", { key: '28aa37f9ce90e88b9c3a5b2c399e3066e9f339e1', class: "picker-item picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: 'ef4ae6bee2b17918f0c2aba9d5c720c1d95987e4', class: "picker-item picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: '564967bc8e42a9018163850da3a967a933b3de7b', class: "picker-item picker-item-empty", "aria-hidden": "true" }, "\u00A0")));
     }
     static get is() { return "ion-picker-column-internal"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/picker-internal/picker-internal.js

@@ -468,7 +468,7 @@ export class PickerInternal {
         this.emitInputModeChange();
     }
     render() {
-        return (h(Host, { key: 'f6b301345583f5ccfc31cce536176af7aeefd193', onPointerDown: (ev) => this.onPointerDown(ev), onClick: () => this.onClick() }, h("input", { key: 'e57fd191d49cc500b719d5b9ad35054d55e96c43', "aria-hidden": "true", tabindex: -1, inputmode: "numeric", type: "number", onKeyDown: (ev) => {
+        return (h(Host, { key: '01cbd466787242ad070b01909714089570b4d67f', onPointerDown: (ev) => this.onPointerDown(ev), onClick: () => this.onClick() }, h("input", { key: '7ff8c0a74c107610a6f0dd9fbc2fc7a4a6dc2468', "aria-hidden": "true", tabindex: -1, inputmode: "numeric", type: "number", onKeyDown: (ev) => {
                 var _a;
                 /**
                  * The "Enter" key represents
@@ -483,7 +483,7 @@ export class PickerInternal {
                 if (ev.key === 'Enter') {
                     (_a = this.inputEl) === null || _a === void 0 ? void 0 : _a.blur();
                 }
-            }, ref: (el) => (this.inputEl = el), onInput: () => this.onInputChange(), onBlur: () => this.exitInputMode() }), h("div", { key: '3360e7d913f87293844928e430acde69d399f68e', class: "picker-before" }), h("div", { key: '4db89e681458d4eec5d60ff47d3e0ba9fd116682', class: "picker-after" }), h("div", { key: 'a21b20d77dac8141623995b5a53f416d3d9fc1ef', class: "picker-highlight", ref: (el) => (this.highlightEl = el) }), h("slot", { key: '86c7d926523b615b4769bd1a4e9713b351089369' })));
+            }, ref: (el) => (this.inputEl = el), onInput: () => this.onInputChange(), onBlur: () => this.exitInputMode() }), h("div", { key: '4700c9d877f54ae8f3fb173122193c27637f70a4', class: "picker-before" }), h("div", { key: '7ceae834b15d559f3819ec2116f83669cf6665fc', class: "picker-after" }), h("div", { key: '2d3bfda76279c2ee14edc067c53651be23b8b525', class: "picker-highlight", ref: (el) => (this.highlightEl = el) }), h("slot", { key: '4797def7a3882a8a911ad47949b76f58a9f448d1' })));
     }
     static get is() { return "ion-picker-internal"; }
     static get encapsulation() { return "shadow"; }

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

@@ -141,7 +141,6 @@
   --ion-safe-area-left: 0px;
   display: flex;
   flex-direction: column;
-  overflow: hidden;
 }
 
 :host(.popover-nested.popover-side-left) {

package/dist/collection/components/popover/popover.js

@@ -335,9 +335,9 @@ export class Popover {
         const { onLifecycle, parentPopover, dismissOnSelect, side, arrow, htmlAttributes } = this;
         const desktop = isPlatform('desktop');
         const enableArrow = arrow && !parentPopover;
-        return (h(Host, Object.assign({ key: '104a5bf92a9bbd2efc71d499a8500e5d55f81711', "aria-modal": "true", "no-router": true, tabindex: "-1" }, htmlAttributes, { style: {
+        return (h(Host, Object.assign({ key: 'f3b86c7bc6ef6b1b27a6ac78e7ddd98e46223bd4', "aria-modal": "true", "no-router": true, tabindex: "-1" }, htmlAttributes, { style: {
                 zIndex: `${20000 + this.overlayIndex}`,
-            }, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [mode]: true, 'popover-translucent': this.translucent, 'overlay-hidden': true, 'popover-desktop': desktop, [`popover-side-${side}`]: true, 'popover-nested': !!parentPopover }), onIonPopoverDidPresent: onLifecycle, onIonPopoverWillPresent: onLifecycle, onIonPopoverWillDismiss: onLifecycle, onIonPopoverDidDismiss: onLifecycle, onIonBackdropTap: this.onBackdropTap }), !parentPopover && h("ion-backdrop", { tappable: this.backdropDismiss, visible: this.showBackdrop, part: "backdrop" }), h("div", { key: 'ef0baa04c22444d4bc705220235a892308d67586', class: "popover-wrapper ion-overlay-wrapper", onClick: dismissOnSelect ? () => this.dismiss() : undefined }, enableArrow && h("div", { class: "popover-arrow", part: "arrow" }), h("div", { key: '5cc5f5c353de614e484e9cfeacecfca9fbfde0e0', class: "popover-content", part: "content" }, h("slot", { key: '2d85c591cdc85efa98afbf40f676525f1402efcf' })))));
+            }, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [mode]: true, 'popover-translucent': this.translucent, 'overlay-hidden': true, 'popover-desktop': desktop, [`popover-side-${side}`]: true, 'popover-nested': !!parentPopover }), onIonPopoverDidPresent: onLifecycle, onIonPopoverWillPresent: onLifecycle, onIonPopoverWillDismiss: onLifecycle, onIonPopoverDidDismiss: onLifecycle, onIonBackdropTap: this.onBackdropTap }), !parentPopover && h("ion-backdrop", { key: 'f7fbd914100838ed7d419eedd19e6b1efa691127', tappable: this.backdropDismiss, visible: this.showBackdrop, part: "backdrop" }), h("div", { key: 'a651cb4daa6556e761c2e2b672306ad25e4c9429', class: "popover-wrapper ion-overlay-wrapper", onClick: dismissOnSelect ? () => this.dismiss() : undefined }, enableArrow && h("div", { key: '7c5c7d8d6f9530535124e3fc75a38055f68b7589', class: "popover-arrow", part: "arrow" }), h("div", { key: '9f92fff4f36941e8f7de9774aef7d7508ca5cfe5', class: "popover-content", part: "content" }, h("slot", { key: '26c4e3df40a4832caff996ead3321c656eb5704f' })))));
     }
     static get is() { return "ion-popover"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/popover/popover.md.css

@@ -141,7 +141,6 @@
   --ion-safe-area-left: 0px;
   display: flex;
   flex-direction: column;
-  overflow: hidden;
 }
 
 :host(.popover-nested.popover-side-left) {

package/dist/collection/components/popover/test/basic/popover.e2e.js

@@ -46,6 +46,82 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
  * Translucent popovers are only available on iOS
  */
 configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+    test.describe(title('popover: scrolling'), async () => {
+        test.beforeEach(({ skip }) => {
+            test.info().annotations.push({
+                type: 'issue',
+                description: 'https://github.com/ionic-team/ionic-framework/issues/29211',
+            });
+            // We are testing if Ionic sets overflow is set correctly on elements,
+            // so we do not need to test across browsers
+            skip.browser('webkit', 'Behavior does not vary across browsers');
+            skip.browser('firefox', 'Behavior does not vary across browsers');
+        });
+        test('should scroll to bottom without IonContent', async ({ page }) => {
+            await page.setContent(`
+        <style>
+          ion-popover {
+            --height: 150px;
+          }
+        </style>
+        <ion-popover>
+          <p>Text</p>
+          <p>Text</p>
+          <p>Text</p>
+          <p>Text</p>
+          <p>Text</p>
+          <p>Text</p>
+          <p>Text</p>
+          <p>Text</p>
+          <p>Text</p>
+          <p>Text</p>
+        </ion-popover>
+      `, config);
+            const popover = page.locator('ion-popover');
+            const viewport = popover.locator('.popover-viewport');
+            const p = popover.locator('p');
+            const lastP = await p.last();
+            await popover.evaluate((el) => el.present());
+            await expect(lastP).not.toBeInViewport();
+            // hover over viewport and scroll to bottom
+            await viewport.hover();
+            await page.mouse.wheel(0, 500);
+            await expect(lastP).toBeInViewport();
+        });
+        test('should scroll to bottom with IonContent', async ({ page }) => {
+            await page.setContent(`
+        <style>
+          ion-popover {
+            --height: 150px;
+          }
+        </style>
+        <ion-popover>
+          <ion-content>
+            <p>Text</p>
+            <p>Text</p>
+            <p>Text</p>
+            <p>Text</p>
+            <p>Text</p>
+            <p>Text</p>
+            <p>Text</p>
+            <p>Text</p>
+            <p>Text</p>
+            <p>Text</p>
+          </ion-content>
+        </ion-popover>
+      `, config);
+            const popover = page.locator('ion-popover');
+            const content = popover.locator('ion-content');
+            const p = popover.locator('p');
+            const lastP = await p.last();
+            await popover.evaluate((el) => el.present());
+            await expect(lastP).not.toBeInViewport();
+            // hover over viewport and scroll to bottom
+            await content.hover();
+            await page.mouse.wheel(0, 500);
+            await expect(lastP).toBeInViewport();
+        });
+    });
     test.describe(title('popover: translucent variants'), async () => {
         let popoverFixture;
         test.beforeEach(async ({ page }) => {

package/dist/collection/components/progress-bar/progress-bar.js

@@ -26,7 +26,7 @@ export class ProgressBar {
         const { color, type, reversed, value, buffer } = this;
         const paused = config.getBoolean('_testing');
         const mode = getIonMode(this);
-        return (h(Host, { key: '384d09558f91dc8119e689c3a8923e67c54c7eb2', role: "progressbar", "aria-valuenow": type === 'determinate' ? value : null, "aria-valuemin": "0", "aria-valuemax": "1", class: createColorClasses(color, {
+        return (h(Host, { key: '944b79ed6fce1b2c0ed48681cd8517a5abbddd80', role: "progressbar", "aria-valuenow": type === 'determinate' ? value : null, "aria-valuemin": "0", "aria-valuemax": "1", class: createColorClasses(color, {
                 [mode]: true,
                 [`progress-bar-${type}`]: true,
                 'progress-paused': paused,

package/dist/collection/components/radio-group/radio-group.js

@@ -153,7 +153,7 @@ export class RadioGroup {
         const { label, labelId, el, name, value } = this;
         const mode = getIonMode(this);
         renderHiddenInput(true, el, name, value, false);
-        return h(Host, { key: 'd8e84feca8f4dbe7605bc4ad096b6e68b482ba68', role: "radiogroup", "aria-labelledby": label ? labelId : null, onClick: this.onClick, class: mode });
+        return h(Host, { key: '6065674a08ac2ead25e87219b5628879a759b75a', role: "radiogroup", "aria-labelledby": label ? labelId : null, onClick: this.onClick, class: mode });
     }
     static get is() { return "ion-radio-group"; }
     static get properties() {