voyager-ionic-core 8.6.1 → 8.7.1

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

@@ -4,7 +4,7 @@
 import { Host, h, writeTask } from "@stencil/core";
 import { findIonContent, printIonContentErrorMsg } from "../../utils/content/index";
 import { CoreDelegate, attachComponent, detachComponent } from "../../utils/framework-delegate";
-import { raf, inheritAttributes, hasLazyBuild } from "../../utils/helpers";
+import { raf, inheritAttributes, hasLazyBuild, getElementRoot } from "../../utils/helpers";
 import { createLockController } from "../../utils/lock-controller";
 import { printIonWarning } from "../../utils/logging/index";
 import { Style as StatusBarStyle, StatusBar } from "../../utils/native/status-bar";
@@ -16,10 +16,11 @@ import { getIonMode } from "../../global/ionic-global";
 import { KEYBOARD_DID_OPEN } from "../../utils/keyboard/keyboard";
 import { iosEnterAnimation } from "./animations/ios.enter";
 import { iosLeaveAnimation } from "./animations/ios.leave";
+import { portraitToLandscapeTransition, landscapeToPortraitTransition } from "./animations/ios.transition";
 import { mdEnterAnimation } from "./animations/md.enter";
 import { mdLeaveAnimation } from "./animations/md.leave";
 import { createSheetGesture } from "./gestures/sheet";
-import { createSwipeToCloseGesture } from "./gestures/swipe-to-close";
+import { createSwipeToCloseGesture, SwipeToCloseDefaults } from "./gestures/swipe-to-close";
 import { setCardStatusBarDark, setCardStatusBarDefault } from "./utils";
 // TODO(FW-2832): types
 /**
@@ -184,6 +185,37 @@ export class Modal {
                 el.dispatchEvent(ev);
             }
         };
+        /**
+         * When the modal receives focus directly, pass focus to the handle
+         * if it exists and is focusable, otherwise let the focus trap handle it.
+         */
+        this.onModalFocus = (ev) => {
+            const { dragHandleEl, el } = this;
+            // Only handle focus if the modal itself was focused (not a child element)
+            if (ev.target === el && dragHandleEl && dragHandleEl.tabIndex !== -1) {
+                dragHandleEl.focus();
+            }
+        };
+        /**
+         * When the slot changes, we need to find all the modals in the slot
+         * and set the data-parent-ion-modal attribute on them so we can find them
+         * and dismiss them when we get dismissed.
+         * We need to do it this way because when a modal is opened, it's moved to
+         * the end of the body and is no longer an actual child of the modal.
+         */
+        this.onSlotChange = ({ target }) => {
+            const slot = target;
+            slot.assignedElements().forEach((el) => {
+                el.querySelectorAll('ion-modal').forEach((childModal) => {
+                    // We don't need to write to the DOM if the modal is already tagged
+                    // If this is a deeply nested modal, this effect should cascade so we don't
+                    // need to worry about another modal claiming the same child.
+                    if (childModal.getAttribute('data-parent-ion-modal') === null) {
+                        childModal.setAttribute('data-parent-ion-modal', this.el.id);
+                    }
+                });
+            });
+        };
     }
     onIsOpenChange(newValue, oldValue) {
         if (newValue === true && oldValue === false) {
@@ -199,6 +231,16 @@ export class Modal {
             triggerController.addClickListener(el, trigger);
         }
     }
+    onWindowResize() {
+        // Only handle resize for iOS card modals when no custom animations are provided
+        if (getIonMode(this) !== 'ios' || !this.presentingElement || this.enterAnimation || this.leaveAnimation) {
+            return;
+        }
+        clearTimeout(this.resizeTimeout);
+        this.resizeTimeout = setTimeout(() => {
+            this.handleViewTransition();
+        }, 50); // Debounce to avoid excessive calls during active resizing
+    }
     breakpointsChanged(breakpoints) {
         if (breakpoints !== undefined) {
             this.sortedBreakpoints = breakpoints.sort((a, b) => a - b);
@@ -211,6 +253,8 @@ export class Modal {
     }
     disconnectedCallback() {
         this.triggerController.removeClickListener();
+        this.cleanupViewTransitionListener();
+        this.cleanupParentRemovalObserver();
     }
     componentWillLoad() {
         var _a;
@@ -218,6 +262,10 @@ export class Modal {
         const isSheetModal = (this.isSheetModal = breakpoints !== undefined && initialBreakpoint !== undefined);
         const attributesToInherit = ['aria-label', 'role'];
         this.inheritedAttributes = inheritAttributes(el, attributesToInherit);
+        // Cache original parent before modal gets moved to body during presentation
+        if (el.parentNode) {
+            this.cachedOriginalParent = el.parentNode;
+        }
         /**
          * When using a controller modal you can set attributes
          * using the htmlAttributes property. Since the above attributes
@@ -421,6 +469,10 @@ export class Modal {
         else if (hasCardModal) {
             this.initSwipeToClose();
         }
+        // Initialize view transition listener for iOS card modals
+        this.initViewTransitionListener();
+        // Initialize parent removal observer
+        this.initParentRemovalObserver();
         unlock();
     }
     initSwipeToClose() {
@@ -515,13 +567,13 @@ export class Modal {
     }
     /**
      * Dismiss the modal overlay after it has been presented.
-     *
-     * @param data Any data to emit in the dismiss events.
-     * @param role The role of the element that is dismissing the modal. For example, 'cancel' or 'backdrop'.
-     *
      * This is a no-op if the overlay has not been presented yet. If you want
      * to remove an overlay from the DOM that was never presented, use the
      * [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
+     *
+     * @param data Any data to emit in the dismiss events.
+     * @param role The role of the element that is dismissing the modal.
+     * For example, `cancel` or `backdrop`.
      */
     async dismiss(data, role) {
         var _a;
@@ -534,6 +586,12 @@ export class Modal {
          * in case the dismiss transition does run.
          */
         const unlock = await this.lockController.lock();
+        /**
+         * Dismiss all child modals. This is especially important in
+         * Angular and React because it's possible to lose control of a child
+         * modal when the parent modal is dismissed.
+         */
+        await this.dismissNestedModals();
         /**
          * If a canDismiss handler is responsible
          * for calling the dismiss method, we should
@@ -574,6 +632,8 @@ export class Modal {
             if (this.gesture) {
                 this.gesture.destroy();
             }
+            this.cleanupViewTransitionListener();
+            this.cleanupParentRemovalObserver();
         }
         this.currentBreakpoint = undefined;
         this.animation = undefined;
@@ -593,8 +653,10 @@ export class Modal {
         return eventMethod(this.el, 'ionModalWillDismiss');
     }
     /**
-     * Move a sheet style modal to a specific breakpoint. The breakpoint value must
-     * be a value defined in your `breakpoints` array.
+     * Move a sheet style modal to a specific breakpoint.
+     *
+     * @param breakpoint The breakpoint value to move the sheet modal to.
+     * Must be a value defined in your `breakpoints` array.
      */
     async setCurrentBreakpoint(breakpoint) {
         if (!this.isSheetModal) {
@@ -647,24 +709,190 @@ export class Modal {
         await this.setCurrentBreakpoint(nextBreakpoint);
         return true;
     }
+    initViewTransitionListener() {
+        // Only enable for iOS card modals when no custom animations are provided
+        if (getIonMode(this) !== 'ios' || !this.presentingElement || this.enterAnimation || this.leaveAnimation) {
+            return;
+        }
+        // Set initial view state
+        this.currentViewIsPortrait = window.innerWidth < 768;
+    }
+    handleViewTransition() {
+        const isPortrait = window.innerWidth < 768;
+        // Only transition if view state actually changed
+        if (this.currentViewIsPortrait === isPortrait) {
+            return;
+        }
+        // Cancel any ongoing transition animation
+        if (this.viewTransitionAnimation) {
+            this.viewTransitionAnimation.destroy();
+            this.viewTransitionAnimation = undefined;
+        }
+        const { presentingElement } = this;
+        if (!presentingElement) {
+            return;
+        }
+        // Create transition animation
+        let transitionAnimation;
+        if (this.currentViewIsPortrait && !isPortrait) {
+            // Portrait to landscape transition
+            transitionAnimation = portraitToLandscapeTransition(this.el, {
+                presentingEl: presentingElement,
+                currentBreakpoint: this.currentBreakpoint,
+                backdropBreakpoint: this.backdropBreakpoint,
+                expandToScroll: this.expandToScroll,
+            });
+        }
+        else {
+            // Landscape to portrait transition
+            transitionAnimation = landscapeToPortraitTransition(this.el, {
+                presentingEl: presentingElement,
+                currentBreakpoint: this.currentBreakpoint,
+                backdropBreakpoint: this.backdropBreakpoint,
+                expandToScroll: this.expandToScroll,
+            });
+        }
+        // Update state and play animation
+        this.currentViewIsPortrait = isPortrait;
+        this.viewTransitionAnimation = transitionAnimation;
+        transitionAnimation.play().then(() => {
+            this.viewTransitionAnimation = undefined;
+            // After orientation transition, recreate the swipe-to-close gesture
+            // with updated animation that reflects the new presenting element state
+            this.reinitSwipeToClose();
+        });
+    }
+    cleanupViewTransitionListener() {
+        // Clear any pending resize timeout
+        if (this.resizeTimeout) {
+            clearTimeout(this.resizeTimeout);
+            this.resizeTimeout = undefined;
+        }
+        if (this.viewTransitionAnimation) {
+            this.viewTransitionAnimation.destroy();
+            this.viewTransitionAnimation = undefined;
+        }
+    }
+    reinitSwipeToClose() {
+        // Only reinitialize if we have a presenting element and are on iOS
+        if (getIonMode(this) !== 'ios' || !this.presentingElement) {
+            return;
+        }
+        // Clean up existing gesture and animation
+        if (this.gesture) {
+            this.gesture.destroy();
+            this.gesture = undefined;
+        }
+        if (this.animation) {
+            // Properly end the progress-based animation at initial state before destroying
+            // to avoid leaving modal in intermediate swipe position
+            this.animation.progressEnd(0, 0, 0);
+            this.animation.destroy();
+            this.animation = undefined;
+        }
+        // Force the modal back to the correct position or it could end up
+        // in a weird state after destroying the animation
+        raf(() => {
+            this.ensureCorrectModalPosition();
+            this.initSwipeToClose();
+        });
+    }
+    ensureCorrectModalPosition() {
+        const { el, presentingElement } = this;
+        const root = getElementRoot(el);
+        const wrapperEl = root.querySelector('.modal-wrapper');
+        if (wrapperEl) {
+            wrapperEl.style.transform = 'translateY(0vh)';
+            wrapperEl.style.opacity = '1';
+        }
+        if ((presentingElement === null || presentingElement === void 0 ? void 0 : presentingElement.tagName) === 'ION-MODAL') {
+            const isPortrait = window.innerWidth < 768;
+            if (isPortrait) {
+                const transformOffset = !CSS.supports('width', 'max(0px, 1px)')
+                    ? '30px'
+                    : 'max(30px, var(--ion-safe-area-top))';
+                const scale = SwipeToCloseDefaults.MIN_PRESENTING_SCALE;
+                presentingElement.style.transform = `translateY(${transformOffset}) scale(${scale})`;
+            }
+            else {
+                presentingElement.style.transform = 'translateY(0px) scale(1)';
+            }
+        }
+    }
+    async dismissNestedModals() {
+        const nestedModals = document.querySelectorAll(`ion-modal[data-parent-ion-modal="${this.el.id}"]`);
+        nestedModals === null || nestedModals === void 0 ? void 0 : nestedModals.forEach(async (modal) => {
+            await modal.dismiss(undefined, 'parent-dismissed');
+        });
+    }
+    initParentRemovalObserver() {
+        if (typeof MutationObserver === 'undefined') {
+            return;
+        }
+        // Only observe if we have a cached parent and are in browser environment
+        if (typeof window === 'undefined' || !this.cachedOriginalParent) {
+            return;
+        }
+        // Don't observe document or fragment nodes as they can't be "removed"
+        if (this.cachedOriginalParent.nodeType === Node.DOCUMENT_NODE ||
+            this.cachedOriginalParent.nodeType === Node.DOCUMENT_FRAGMENT_NODE) {
+            return;
+        }
+        this.parentRemovalObserver = new MutationObserver((mutations) => {
+            mutations.forEach((mutation) => {
+                if (mutation.type === 'childList' && mutation.removedNodes.length > 0) {
+                    // Check if our cached original parent was removed
+                    const cachedParentWasRemoved = Array.from(mutation.removedNodes).some((node) => {
+                        var _a, _b;
+                        const isDirectMatch = node === this.cachedOriginalParent;
+                        const isContainedMatch = this.cachedOriginalParent
+                            ? (_b = (_a = node).contains) === null || _b === void 0 ? void 0 : _b.call(_a, this.cachedOriginalParent)
+                            : false;
+                        return isDirectMatch || isContainedMatch;
+                    });
+                    // Also check if parent is no longer connected to DOM
+                    const cachedParentDisconnected = this.cachedOriginalParent && !this.cachedOriginalParent.isConnected;
+                    if (cachedParentWasRemoved || cachedParentDisconnected) {
+                        this.dismiss(undefined, 'parent-removed');
+                        // Release the reference to the cached original parent
+                        // so we don't have a memory leak
+                        this.cachedOriginalParent = undefined;
+                    }
+                }
+            });
+        });
+        // Observe document body with subtree to catch removals at any level
+        this.parentRemovalObserver.observe(document.body, {
+            childList: true,
+            subtree: true,
+        });
+    }
+    cleanupParentRemovalObserver() {
+        var _a;
+        (_a = this.parentRemovalObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.parentRemovalObserver = undefined;
+    }
     render() {
         const { handle, isSheetModal, presentingElement, htmlAttributes, handleBehavior, inheritedAttributes, focusTrap, expandToScroll, } = this;
         const showHandle = handle !== false && isSheetModal;
         const mode = getIonMode(this);
         const isCardModal = presentingElement !== undefined && mode === 'ios';
         const isHandleCycle = handleBehavior === 'cycle';
-        return (h(Host, Object.assign({ key: '0bcbdcfcd7d890eb599da3f97f21c317d34f8e0e', "no-router": true, tabindex: "-1" }, htmlAttributes, { style: {
+        const isSheetModalWithHandle = isSheetModal && showHandle;
+        return (h(Host, Object.assign({ key: '9e9a7bd591eb17a225a00b4fa2e379e94601d17f', "no-router": true,
+            // Allow the modal to be navigable when the handle is focusable
+            tabIndex: isHandleCycle && isSheetModalWithHandle ? 0 : -1 }, htmlAttributes, { style: {
                 zIndex: `${20000 + this.overlayIndex}`,
-            }, class: Object.assign({ [mode]: true, ['modal-default']: !isCardModal && !isSheetModal, [`modal-card`]: isCardModal, [`modal-sheet`]: isSheetModal, [`modal-no-expand-scroll`]: isSheetModal && !expandToScroll, 'overlay-hidden': true, [FOCUS_TRAP_DISABLE_CLASS]: focusTrap === false }, getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonModalDidPresent: this.onLifecycle, onIonModalWillPresent: this.onLifecycle, onIonModalWillDismiss: this.onLifecycle, onIonModalDidDismiss: this.onLifecycle }), h("ion-backdrop", { key: 'd72159e73daa5af7349aa9e8f695aa435eb43069', ref: (el) => (this.backdropEl = el), visible: this.showBackdrop, tappable: this.backdropDismiss, part: "backdrop" }), mode === 'ios' && h("div", { key: 'fd2d9b13676ae72473881649a397b6eacde03a03', class: "modal-shadow" }), h("div", Object.assign({ key: '908eccb1ad982dcde2dbcff0cbb18b6e60f8ba74',
+            }, class: Object.assign({ [mode]: true, ['modal-default']: !isCardModal && !isSheetModal, [`modal-card`]: isCardModal, [`modal-sheet`]: isSheetModal, [`modal-no-expand-scroll`]: isSheetModal && !expandToScroll, 'overlay-hidden': true, [FOCUS_TRAP_DISABLE_CLASS]: focusTrap === false }, getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonModalDidPresent: this.onLifecycle, onIonModalWillPresent: this.onLifecycle, onIonModalWillDismiss: this.onLifecycle, onIonModalDidDismiss: this.onLifecycle, onFocus: this.onModalFocus }), h("ion-backdrop", { key: 'e5eae2c14f830f75e308fcd7f4c10c86fac5b962', ref: (el) => (this.backdropEl = el), visible: this.showBackdrop, tappable: this.backdropDismiss, part: "backdrop" }), mode === 'ios' && h("div", { key: 'e268f9cd310c3cf4e051b5b92524ce4fb70d005e', class: "modal-shadow" }), h("div", Object.assign({ key: '9c380f36c18144c153077b15744d1c3346bce63e',
             /*
               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", { key: '332dc0b40363a77c7be62331d9f26def91c790e9', 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: '2d5ee6d5959d97309c306e8ce72eb0f2c19be144', 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: 'c32698350193c450327e97049daf8b8d1fda0d0e' }))));
+            tabIndex: !isHandleCycle ? -1 : 0, "aria-label": "Activate to adjust the size of the dialog overlaying the screen", onClick: isHandleCycle ? this.onHandleClick : undefined, part: "handle", ref: (el) => (this.dragHandleEl = el) })), h("slot", { key: '5590434c35ea04c42fc006498bc189038e15a298', onSlotchange: this.onSlotChange }))));
     }
     static get is() { return "ion-modal"; }
     static get encapsulation() { return "shadow"; }
@@ -1452,7 +1680,7 @@ export class Modal {
                         }, {
                             "name": "role",
                             "type": "string | undefined",
-                            "docs": "The role of the element that is dismissing the modal. For example, 'cancel' or 'backdrop'.\n\nThis is a no-op if the overlay has not been presented yet. If you want\nto remove an overlay from the DOM that was never presented, use the\n[remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method."
+                            "docs": "The role of the element that is dismissing the modal.\nFor example, `cancel` or `backdrop`."
                         }],
                     "references": {
                         "Promise": {
@@ -1467,13 +1695,13 @@ export class Modal {
                     "return": "Promise<boolean>"
                 },
                 "docs": {
-                    "text": "Dismiss the modal overlay after it has been presented.",
+                    "text": "Dismiss the modal overlay after it has been presented.\nThis is a no-op if the overlay has not been presented yet. If you want\nto remove an overlay from the DOM that was never presented, use the\n[remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.",
                     "tags": [{
                             "name": "param",
                             "text": "data Any data to emit in the dismiss events."
                         }, {
                             "name": "param",
-                            "text": "role The role of the element that is dismissing the modal. For example, 'cancel' or 'backdrop'.\n\nThis is a no-op if the overlay has not been presented yet. If you want\nto remove an overlay from the DOM that was never presented, use the\n[remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method."
+                            "text": "role The role of the element that is dismissing the modal.\nFor example, `cancel` or `backdrop`."
                         }]
                 }
             },
@@ -1535,7 +1763,7 @@ export class Modal {
                     "parameters": [{
                             "name": "breakpoint",
                             "type": "number",
-                            "docs": ""
+                            "docs": "The breakpoint value to move the sheet modal to.\nMust be a value defined in your `breakpoints` array."
                         }],
                     "references": {
                         "Promise": {
@@ -1546,8 +1774,11 @@ export class Modal {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "Move a sheet style modal to a specific breakpoint. The breakpoint value must\nbe a value defined in your `breakpoints` array.",
-                    "tags": []
+                    "text": "Move a sheet style modal to a specific breakpoint.",
+                    "tags": [{
+                            "name": "param",
+                            "text": "breakpoint The breakpoint value to move the sheet modal to.\nMust be a value defined in your `breakpoints` array."
+                        }]
                 }
             },
             "getCurrentBreakpoint": {
@@ -1579,6 +1810,15 @@ export class Modal {
                 "methodName": "triggerChanged"
             }];
     }
+    static get listeners() {
+        return [{
+                "name": "resize",
+                "method": "onWindowResize",
+                "target": "window",
+                "capture": false,
+                "passive": true
+            }];
+    }
 }
 const LIFECYCLE_MAP = {
     ionModalDidPresent: 'ionViewDidEnter',

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

@@ -180,7 +180,25 @@ export class PickerColumn {
                      * elementsFromPoint can returns multiple elements
                      * so find the relevant picker column option if one exists.
                      */
-                    const newActiveElement = elementsAtPoint.find((el) => el.tagName === 'ION-PICKER-COLUMN-OPTION');
+                    let newActiveElement = elementsAtPoint.find((el) => el.tagName === 'ION-PICKER-COLUMN-OPTION');
+                    /**
+                     * TODO(FW-6594): Remove this workaround when iOS 16 is no longer
+                     * supported.
+                     *
+                     * If `elementsFromPoint` failed to find the active element (a known
+                     * issue on iOS 16 when elements are in a Shadow DOM and the
+                     * referenceNode is the document), a fallback to `elementFromPoint`
+                     * is used. While `elementsFromPoint` returns all elements,
+                     * `elementFromPoint` returns only the top-most, which is sufficient
+                     * for this use case and appears to handle Shadow DOM retargeting
+                     * more reliably in this specific iOS bug.
+                     */
+                    if (newActiveElement === undefined) {
+                        const fallbackActiveElement = referenceNode.elementFromPoint(centerX, centerY);
+                        if ((fallbackActiveElement === null || fallbackActiveElement === void 0 ? void 0 : fallbackActiveElement.tagName) === 'ION-PICKER-COLUMN-OPTION') {
+                            newActiveElement = fallbackActiveElement;
+                        }
+                    }
                     if (activeEl !== undefined) {
                         this.setPickerItemActiveState(activeEl, false);
                     }
@@ -550,12 +568,12 @@ export class PickerColumn {
     render() {
         const { color, disabled, isActive, numericInput } = this;
         const mode = getIonMode(this);
-        return (h(Host, { key: 'a221dc10f1eb7c41637a16d2c7167c16939822fd', class: createColorClasses(color, {
+        return (h(Host, { key: 'ea0280355b2f87895bf7dddd289ccf473aa759f3', class: createColorClasses(color, {
                 [mode]: true,
                 ['picker-column-active']: isActive,
                 ['picker-column-numeric-input']: numericInput,
                 ['picker-column-disabled']: disabled,
-            }) }, this.renderAssistiveFocusable(), h("slot", { key: '81b0656f606856f3dc0a657bf167d81a5011405e', name: "prefix" }), h("div", { key: '71b9de67c04150255dd66592601c9d926db0c31c', "aria-hidden": "true", class: "picker-opts", ref: (el) => {
+            }) }, this.renderAssistiveFocusable(), h("slot", { key: '482992131cdeb85b1f61430d7fe1322a16345769', name: "prefix" }), h("div", { key: '43f7f80d621d411ef366b3ca1396299e8c9a0c97', "aria-hidden": "true", class: "picker-opts", ref: (el) => {
                 this.scrollEl = el;
             },
             /**
@@ -576,7 +594,7 @@ export class PickerColumn {
              * To prevent this, we set the tabIndex to -1. This
              * will match the behavior of the other browsers.
              */
-            tabIndex: -1 }, h("div", { key: 'ebdc2f08c83db0cf17b4be29f28fcb00f529601e', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: '04ab56fcb8e6a7d6af00204c4560feb99ff34a56', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: '6cf8f538903faf0fe1e4130f3eaf7b4e2e17cb52', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("slot", { key: '1cc392307b70c576be5b81b5226ceba735957f0f' }), h("div", { key: '23e3f28e2a99b9aa8b7c8f68ad9583e3ca63e9e2', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: '8a0563f09780c3116af0caebe4f40587ec1f041f', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: '13207e248fc0009f37e0c90a3ee2bac2f130b856', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0")), h("slot", { key: '55ecf2ab5f214f936c2468cbdb7952daf89416b8', name: "suffix" })));
+            tabIndex: -1 }, h("div", { key: '13a9ee686132af32240710730765de4c0003a9e8', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: 'dbccba4920833cfcebe9b0fc763458ec3053705a', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: '682b43f83a5ea2e46067457f3af118535e111edb', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("slot", { key: 'd27e1e1dc0504b2f4627a29912a05bb91e8e413a' }), h("div", { key: '61c948dbb9cf7469aed3018542bc0954211585ba', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: 'cf46c277fbee65e35ff44ce0d53ce12aa9cbf9db', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: 'bbc0e2d491d3f836ab849493ade2f7fa6ad9244e', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0")), h("slot", { key: 'd25cbbe14b2914fe7b878d43b4e3f4a8c8177d24', name: "suffix" })));
     }
     static get is() { return "ion-picker-column"; }
     static get encapsulation() { return "shadow"; }

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

@@ -309,6 +309,8 @@ export class Popover {
      * Developers can pass a mouse, touch, or pointer event
      * to position the popover relative to where that event
      * was dispatched.
+     *
+     * @param event The event to position the popover relative to.
      */
     async present(event) {
         const unlock = await this.lockController.lock();
@@ -372,15 +374,14 @@ export class Popover {
     }
     /**
      * Dismiss the popover overlay after it has been presented.
+     * This is a no-op if the overlay has not been presented yet. If you want
+     * to remove an overlay from the DOM that was never presented, use the
+     * [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
      *
      * @param data Any data to emit in the dismiss events.
-     * @param role The role of the element that is dismissing the popover. For example, 'cancel' or 'backdrop'.
+     * @param role The role of the element that is dismissing the popover. For example, `cancel` or `backdrop`.
      * @param dismissParentPopover If `true`, dismissing this popover will also dismiss
      * a parent popover if this popover is nested. Defaults to `true`.
-     *
-     * This is a no-op if the overlay has not been presented yet. If you want
-     * to remove an overlay from the DOM that was never presented, use the
-     * [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
      */
     async dismiss(data, role, dismissParentPopover = true) {
         const unlock = await this.lockController.lock();
@@ -432,9 +433,9 @@ export class Popover {
         const { onLifecycle, parentPopover, dismissOnSelect, side, arrow, htmlAttributes, focusTrap } = this;
         const desktop = isPlatform('desktop');
         const enableArrow = arrow && !parentPopover;
-        return (h(Host, Object.assign({ key: '1de4862099cfcb5035e78008e6dc7c1371846f9a', "aria-modal": "true", "no-router": true, tabindex: "-1" }, htmlAttributes, { style: {
+        return (h(Host, Object.assign({ key: '16866c02534968c982cf4730d2936d03a5107c8b', "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, [FOCUS_TRAP_DISABLE_CLASS]: focusTrap === false, 'popover-nested': !!parentPopover }), onIonPopoverDidPresent: onLifecycle, onIonPopoverWillPresent: onLifecycle, onIonPopoverWillDismiss: onLifecycle, onIonPopoverDidDismiss: onLifecycle, onIonBackdropTap: this.onBackdropTap }), !parentPopover && h("ion-backdrop", { key: '981aa4e0102cb93312ffbd8243cdf2a0cdc60469', tappable: this.backdropDismiss, visible: this.showBackdrop, part: "backdrop" }), h("div", { key: '1a28ed55e9d34ef78cf0eb0178643301fd2dd75d', class: "popover-wrapper ion-overlay-wrapper", onClick: dismissOnSelect ? () => this.dismiss() : undefined }, enableArrow && h("div", { key: '1c206ea5eb3c0b5883a3d45c34cd22dd5ffe4b65', class: "popover-arrow", part: "arrow" }), h("div", { key: '5ba561486a328c0c7ab825995fdbfb7a196429a4', class: "popover-content", part: "content" }, h("slot", { key: '00fc244ce9dcc2dfc677e6c34b7c8e7a330b2b03' })))));
+            }, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [mode]: true, 'popover-translucent': this.translucent, 'overlay-hidden': true, 'popover-desktop': desktop, [`popover-side-${side}`]: true, [FOCUS_TRAP_DISABLE_CLASS]: focusTrap === false, 'popover-nested': !!parentPopover }), onIonPopoverDidPresent: onLifecycle, onIonPopoverWillPresent: onLifecycle, onIonPopoverWillDismiss: onLifecycle, onIonPopoverDidDismiss: onLifecycle, onIonBackdropTap: this.onBackdropTap }), !parentPopover && h("ion-backdrop", { key: '0df258601a4d30df3c27aa8234a7d5e056c3ecbb', tappable: this.backdropDismiss, visible: this.showBackdrop, part: "backdrop" }), h("div", { key: 'f94e80ed996b957b5cd09b826472b4f60e8fcc78', class: "popover-wrapper ion-overlay-wrapper", onClick: dismissOnSelect ? () => this.dismiss() : undefined }, enableArrow && h("div", { key: '185ce22f6386e8444a9cc7b8818dbfc16c463c99', class: "popover-arrow", part: "arrow" }), h("div", { key: '206202b299404e110de5397b229678cca18568d3', class: "popover-content", part: "content" }, h("slot", { key: 'ee543a0b92d6e35a837c0a0e4617c7b0fc4ad0b0' })))));
     }
     static get is() { return "ion-popover"; }
     static get encapsulation() { return "shadow"; }
@@ -1259,7 +1260,7 @@ export class Popover {
                     "parameters": [{
                             "name": "event",
                             "type": "MouseEvent | PointerEvent | TouchEvent | CustomEvent<any> | undefined",
-                            "docs": ""
+                            "docs": "The event to position the popover relative to."
                         }],
                     "references": {
                         "Promise": {
@@ -1291,7 +1292,10 @@ export class Popover {
                 },
                 "docs": {
                     "text": "Present the popover overlay after it has been created.\nDevelopers can pass a mouse, touch, or pointer event\nto position the popover relative to where that event\nwas dispatched.",
-                    "tags": []
+                    "tags": [{
+                            "name": "param",
+                            "text": "event The event to position the popover relative to."
+                        }]
                 }
             },
             "dismiss": {
@@ -1304,11 +1308,11 @@ export class Popover {
                         }, {
                             "name": "role",
                             "type": "string | undefined",
-                            "docs": "The role of the element that is dismissing the popover. For example, 'cancel' or 'backdrop'."
+                            "docs": "The role of the element that is dismissing the popover. For example, `cancel` or `backdrop`."
                         }, {
                             "name": "dismissParentPopover",
                             "type": "boolean",
-                            "docs": "If `true`, dismissing this popover will also dismiss\na parent popover if this popover is nested. Defaults to `true`.\n\nThis is a no-op if the overlay has not been presented yet. If you want\nto remove an overlay from the DOM that was never presented, use the\n[remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method."
+                            "docs": "If `true`, dismissing this popover will also dismiss\na parent popover if this popover is nested. Defaults to `true`."
                         }],
                     "references": {
                         "Promise": {
@@ -1323,16 +1327,16 @@ export class Popover {
                     "return": "Promise<boolean>"
                 },
                 "docs": {
-                    "text": "Dismiss the popover overlay after it has been presented.",
+                    "text": "Dismiss the popover overlay after it has been presented.\nThis is a no-op if the overlay has not been presented yet. If you want\nto remove an overlay from the DOM that was never presented, use the\n[remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.",
                     "tags": [{
                             "name": "param",
                             "text": "data Any data to emit in the dismiss events."
                         }, {
                             "name": "param",
-                            "text": "role The role of the element that is dismissing the popover. For example, 'cancel' or 'backdrop'."
+                            "text": "role The role of the element that is dismissing the popover. For example, `cancel` or `backdrop`."
                         }, {
                             "name": "param",
-                            "text": "dismissParentPopover If `true`, dismissing this popover will also dismiss\na parent popover if this popover is nested. Defaults to `true`.\n\nThis is a no-op if the overlay has not been presented yet. If you want\nto remove an overlay from the DOM that was never presented, use the\n[remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method."
+                            "text": "dismissParentPopover If `true`, dismissing this popover will also dismiss\na parent popover if this popover is nested. Defaults to `true`."
                         }]
                 }
             },

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

@@ -190,6 +190,7 @@ const renderProgress = (value, buffer) => {
          * When finalBuffer === 1, we use display: none
          * instead of removing the element to avoid flickering.
          */
+        // TODO(FW-6697): change `ion-hide` class to `ion-display-none` or another class
         h("div", { class: { 'buffer-circles-container': true, 'ion-hide': finalBuffer === 1 }, style: { transform: `translateX(${finalBuffer * 100}%)` } }, h("div", { class: "buffer-circles-container", style: { transform: `translateX(-${finalBuffer * 100}%)` } }, h("div", { part: "stream", class: "buffer-circles" }))),
         h("div", { part: "track", class: "progress-buffer-bar", style: { transform: `scaleX(${finalBuffer})` } }),
     ];