@ionic/core 8.8.19 → 8.8.20-dev.11787158518.168a2fea

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

@@ -1,19 +1,19 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { r as registerInstance, c as createEvent, f as printIonWarning, h, d as Host, g as getElement } from './index-tcQvqkiX.js';
-import { B as BACKDROP, j as prepareOverlay, k as setOverlayId, f as present, n as focusFirstDescendant, g as dismiss, h as eventMethod, F as FOCUS_TRAP_DISABLE_CLASS } from './overlays-COCl_nm9.js';
-import { C as CoreDelegate, a as attachComponent, d as detachComponent } from './framework-delegate-B9yvYzqV.js';
-import { g as getElementRoot, r as raf, f as addEventListener, h as hasLazyBuild } from './helpers-DkCLSLI9.js';
+import { r as registerInstance, c as createEvent, g as getElement, f as printIonWarning, h, d as Host } from './index-ChhhtsGZ.js';
+import { h as prepareOverlay, j as cleanupRootFocusTrapAccessibility, k as setOverlayId, e as present, n as focusFirstDescendant, f as dismiss, g as eventMethod, B as BACKDROP, F as FOCUS_TRAP_DISABLE_CLASS } from './overlays-CPmIs9Ls.js';
+import { C as CoreDelegate, a as attachComponent, d as detachComponent } from './framework-delegate-BHTU2Ip9.js';
+import { g as getElementRoot, r as raf, f as addEventListener, h as hasLazyBuild } from './helpers-CAGf8Wgp.js';
 import { c as createLockController } from './lock-controller-B-hirT0v.js';
-import { b as getIonMode, a as isPlatform } from './ionic-global-Cp_eT4sZ.js';
-import { g as getClassMap } from './theme-DiVJyqlX.js';
-import { e as deepReady, w as waitForMount } from './index-Dsz7OTeL.js';
-import { c as createAnimation } from './animation-DLJpuoEz.js';
+import { b as getIonMode, a as isPlatform } from './ionic-global-BVB7BrLT.js';
+import { g as getClassMap } from './theme-byZM6qHV.js';
+import { e as deepReady, w as waitForMount } from './index-WlteAIqz.js';
+import { c as createAnimation } from './animation-CGFdmGk9.js';
 import './index-ZjP4CjeZ.js';
-import './hardware-back-button-B93Gru0Y.js';
-import './gesture-controller-BTEOs1at.js';
-import './dir-o8OKV5aD.js';
+import './hardware-back-button-gLJHMX_F.js';
+import './gesture-controller-TXPDHL13.js';
+import './dir-Dojwmvde.js';
 
 /**
  * Shared per-frame cache for safe-area insets. Avoids creating a temporary
@@ -327,10 +327,9 @@ const focusItem = (item) => {
 const isTriggerElement = (el) => el.hasAttribute('data-ion-popover-trigger');
 const configureKeyboardInteraction = (popoverEl) => {
     const callback = async (ev) => {
-        var _a;
         const activeElement = document.activeElement;
         let items = [];
-        const targetTagName = (_a = ev.target) === null || _a === void 0 ? void 0 : _a.tagName;
+        const targetTagName = ev.target?.tagName;
         /**
          * Only handle custom keyboard interactions for the host popover element
          * and children ion-item elements.
@@ -351,7 +350,7 @@ const configureKeyboardInteraction = (popoverEl) => {
             items = Array.from(popoverEl.querySelectorAll('ion-item:not(ion-popover ion-popover *):not([disabled])'));
             /* eslint-disable-next-line */
         }
-        catch (_b) { }
+        catch { }
         switch (ev.key) {
             /**
              * If we are in a child popover
@@ -432,7 +431,6 @@ const configureKeyboardInteraction = (popoverEl) => {
  * and viewport dimensions.
  */
 const getPopoverPosition = (isRTL, contentWidth, contentHeight, arrowWidth, arrowHeight, reference, side, align, defaultPosition, triggerEl, event) => {
-    var _a;
     let referenceCoordinates = {
         top: 0,
         left: 0,
@@ -477,8 +475,8 @@ const getPopoverPosition = (isRTL, contentWidth, contentHeight, arrowWidth, arro
              * as a whole.
              */
             const actualTriggerEl = (triggerEl ||
-                ((_a = customEv === null || customEv === void 0 ? void 0 : customEv.detail) === null || _a === void 0 ? void 0 : _a.ionShadowTarget) ||
-                (customEv === null || customEv === void 0 ? void 0 : customEv.target));
+                customEv?.detail?.ionShadowTarget ||
+                customEv?.target);
             if (!actualTriggerEl) {
                 return defaultPosition;
             }
@@ -847,7 +845,6 @@ const POPOVER_IOS_MIN_EDGE_MARGIN = 25;
  */
 // TODO(FW-2832): types
 const iosEnterAnimation = (baseEl, opts) => {
-    var _a;
     const { event: ev, size, trigger, reference, side, align } = opts;
     const doc = baseEl.ownerDocument;
     const isRTL = doc.dir === 'rtl';
@@ -856,7 +853,7 @@ const iosEnterAnimation = (baseEl, opts) => {
     const root = getElementRoot(baseEl);
     const contentEl = root.querySelector('.popover-content');
     const arrowEl = root.querySelector('.popover-arrow');
-    const referenceSizeEl = trigger || ((_a = ev === null || ev === void 0 ? void 0 : ev.detail) === null || _a === void 0 ? void 0 : _a.ionShadowTarget) || (ev === null || ev === void 0 ? void 0 : ev.target);
+    const referenceSizeEl = trigger || ev?.detail?.ionShadowTarget || ev?.target;
     const { contentWidth, contentHeight } = getPopoverDimensions(size, contentEl, referenceSizeEl);
     const { arrowWidth, arrowHeight } = getArrowDimensions(arrowEl);
     const defaultPosition = {
@@ -984,7 +981,6 @@ const POPOVER_MD_BODY_PADDING = 12;
  */
 // TODO(FW-2832): types
 const mdEnterAnimation = (baseEl, opts) => {
-    var _a;
     const { event: ev, size, trigger, reference, side, align } = opts;
     const doc = baseEl.ownerDocument;
     const isRTL = doc.dir === 'rtl';
@@ -992,7 +988,7 @@ const mdEnterAnimation = (baseEl, opts) => {
     const bodyHeight = doc.defaultView.innerHeight;
     const root = getElementRoot(baseEl);
     const contentEl = root.querySelector('.popover-content');
-    const referenceSizeEl = trigger || ((_a = ev === null || ev === void 0 ? void 0 : ev.detail) === null || _a === void 0 ? void 0 : _a.ionShadowTarget) || (ev === null || ev === void 0 ? void 0 : ev.target);
+    const referenceSizeEl = trigger || ev?.detail?.ionShadowTarget || ev?.target;
     const { contentWidth, contentHeight } = getPopoverDimensions(size, contentEl, referenceSizeEl);
     const defaultPosition = {
         top: bodyHeight / 2 - contentHeight / 2,
@@ -1089,9 +1085,9 @@ const mdLeaveAnimation = (baseEl) => {
         .addAnimation([backdropAnimation, wrapperAnimation]);
 };
 
-const popoverIosCss = () => `:host{--background:var(--ion-background-color, #fff);--min-width:0;--min-height:0;--max-width:auto;--height:auto;--offset-x:0px;--offset-y:0px;left:0;right:0;top:0;bottom:0;display:-ms-flexbox;display:flex;position:fixed;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;outline:none;color:var(--ion-text-color, #000);z-index:1001}:host(.popover-nested){pointer-events:none}:host(.popover-nested) .popover-wrapper{pointer-events:auto}:host(.overlay-hidden){display:none}.popover-wrapper{z-index:10}.popover-content{display:-ms-flexbox;display:flex;position:absolute;-ms-flex-direction:column;flex-direction:column;width:var(--width);min-width:var(--min-width);max-width:var(--max-width);height:var(--height);min-height:var(--min-height);max-height:var(--max-height);background:var(--background);-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow);overflow:auto;z-index:10}::slotted(.popover-viewport){--ion-safe-area-top:0px;--ion-safe-area-right:0px;--ion-safe-area-bottom:0px;--ion-safe-area-left:0px;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}:host(.popover-nested.popover-side-left){--offset-x:5px}:host(.popover-nested.popover-side-right){--offset-x:-5px}:host(.popover-nested.popover-side-start){--offset-x:5px}:host-context([dir=rtl]):host(.popover-nested.popover-side-start),:host-context([dir=rtl]).popover-nested.popover-side-start{--offset-x:-5px}@supports selector(:dir(rtl)){:host(.popover-nested.popover-side-start:dir(rtl)){--offset-x:-5px}}:host(.popover-nested.popover-side-end){--offset-x:-5px}:host-context([dir=rtl]):host(.popover-nested.popover-side-end),:host-context([dir=rtl]).popover-nested.popover-side-end{--offset-x:5px}@supports selector(:dir(rtl)){:host(.popover-nested.popover-side-end:dir(rtl)){--offset-x:5px}}:host{--width:200px;--max-height:90%;--box-shadow:none;--backdrop-opacity:var(--ion-backdrop-opacity, 0.08)}:host(.popover-desktop){--box-shadow:0px 4px 16px 0px rgba(0, 0, 0, 0.12)}.popover-content{border-radius:10px}:host(.popover-desktop) .popover-content{border:0.5px solid var(--ion-color-step-100, var(--ion-background-color-step-100, #e6e6e6))}.popover-arrow{display:block;position:absolute;width:20px;height:10px;overflow:hidden;z-index:11}.popover-arrow::after{top:3px;border-radius:3px;position:absolute;width:14px;height:14px;-webkit-transform:rotate(45deg);transform:rotate(45deg);background:var(--background);content:"";z-index:10}.popover-arrow::after{inset-inline-start:3px}:host(.popover-bottom) .popover-arrow{top:auto;bottom:-10px}:host(.popover-bottom) .popover-arrow::after{top:-6px}:host(.popover-side-left) .popover-arrow{-webkit-transform:rotate(90deg);transform:rotate(90deg)}:host(.popover-side-right) .popover-arrow{-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}:host(.popover-side-top) .popover-arrow{-webkit-transform:rotate(180deg);transform:rotate(180deg)}:host(.popover-side-start) .popover-arrow{-webkit-transform:rotate(90deg);transform:rotate(90deg)}:host-context([dir=rtl]):host(.popover-side-start) .popover-arrow,:host-context([dir=rtl]).popover-side-start .popover-arrow{-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}@supports selector(:dir(rtl)){:host(.popover-side-start:dir(rtl)) .popover-arrow{-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}}:host(.popover-side-end) .popover-arrow{-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}:host-context([dir=rtl]):host(.popover-side-end) .popover-arrow,:host-context([dir=rtl]).popover-side-end .popover-arrow{-webkit-transform:rotate(90deg);transform:rotate(90deg)}@supports selector(:dir(rtl)){:host(.popover-side-end:dir(rtl)) .popover-arrow{-webkit-transform:rotate(90deg);transform:rotate(90deg)}}.popover-arrow,.popover-content{opacity:0}@supports ((-webkit-backdrop-filter: blur(0)) or (backdrop-filter: blur(0))){:host(.popover-translucent) .popover-content,:host(.popover-translucent) .popover-arrow::after{background:rgba(var(--ion-background-color-rgb, 255, 255, 255), 0.8);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px)}}`;
+const popoverIosCss = () => `:host{--background:var(--ion-background-color, #fff);--min-width:0;--min-height:0;--max-width:auto;--height:auto;--offset-x:0px;--offset-y:0px;left:0;right:0;top:0;bottom:0;display:-ms-flexbox;display:flex;position:fixed;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;outline:none;color:var(--ion-text-color, #000);z-index:1001}:host(.popover-nested){pointer-events:none}:host(.popover-nested) .popover-wrapper{pointer-events:auto}:host(.overlay-hidden){display:none}.popover-wrapper{z-index:10}.popover-content{display:-ms-flexbox;display:flex;position:absolute;-ms-flex-direction:column;flex-direction:column;width:var(--width);min-width:var(--min-width);max-width:var(--max-width);height:var(--height);min-height:var(--min-height);max-height:var(--max-height);background:var(--background);-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow);overflow:auto;z-index:10}::slotted(.popover-viewport){--ion-safe-area-top:0px;--ion-safe-area-right:0px;--ion-safe-area-bottom:0px;--ion-safe-area-left:0px;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}:host(.popover-nested.popover-side-left){--offset-x:5px}:host(.popover-nested.popover-side-right){--offset-x:-5px}:host(.popover-nested.popover-side-start){--offset-x:5px}:host-context([dir=rtl]):host(.popover-nested.popover-side-start),:host-context([dir=rtl]).popover-nested.popover-side-start{--offset-x:-5px}@supports selector(:dir(rtl)){:host(.popover-nested.popover-side-start:dir(rtl)){--offset-x:-5px}}:host(.popover-nested.popover-side-end){--offset-x:-5px}:host-context([dir=rtl]):host(.popover-nested.popover-side-end),:host-context([dir=rtl]).popover-nested.popover-side-end{--offset-x:5px}@supports selector(:dir(rtl)){:host(.popover-nested.popover-side-end:dir(rtl)){--offset-x:5px}}:host(.select-popover-rich-content){--width:clamp(250px, calc(100vw - 40px), 400px)}:host{--width:200px;--max-height:90%;--box-shadow:none;--backdrop-opacity:var(--ion-backdrop-opacity, 0.08)}:host(.popover-desktop){--box-shadow:0px 4px 16px 0px rgba(0, 0, 0, 0.12)}.popover-content{border-radius:10px}:host(.popover-desktop) .popover-content{border:0.5px solid var(--ion-color-step-100, var(--ion-background-color-step-100, #e6e6e6))}.popover-arrow{display:block;position:absolute;width:20px;height:10px;overflow:hidden;z-index:11}.popover-arrow::after{top:3px;border-radius:3px;position:absolute;width:14px;height:14px;-webkit-transform:rotate(45deg);transform:rotate(45deg);background:var(--background);content:"";z-index:10}.popover-arrow::after{inset-inline-start:3px}:host(.popover-bottom) .popover-arrow{top:auto;bottom:-10px}:host(.popover-bottom) .popover-arrow::after{top:-6px}:host(.popover-side-left) .popover-arrow{-webkit-transform:rotate(90deg);transform:rotate(90deg)}:host(.popover-side-right) .popover-arrow{-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}:host(.popover-side-top) .popover-arrow{-webkit-transform:rotate(180deg);transform:rotate(180deg)}:host(.popover-side-start) .popover-arrow{-webkit-transform:rotate(90deg);transform:rotate(90deg)}:host-context([dir=rtl]):host(.popover-side-start) .popover-arrow,:host-context([dir=rtl]).popover-side-start .popover-arrow{-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}@supports selector(:dir(rtl)){:host(.popover-side-start:dir(rtl)) .popover-arrow{-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}}:host(.popover-side-end) .popover-arrow{-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}:host-context([dir=rtl]):host(.popover-side-end) .popover-arrow,:host-context([dir=rtl]).popover-side-end .popover-arrow{-webkit-transform:rotate(90deg);transform:rotate(90deg)}@supports selector(:dir(rtl)){:host(.popover-side-end:dir(rtl)) .popover-arrow{-webkit-transform:rotate(90deg);transform:rotate(90deg)}}.popover-arrow,.popover-content{opacity:0}@supports ((-webkit-backdrop-filter: blur(0)) or (backdrop-filter: blur(0))){:host(.popover-translucent) .popover-content,:host(.popover-translucent) .popover-arrow::after{background:rgba(var(--ion-background-color-rgb, 255, 255, 255), 0.8);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px)}}`;
 
-const popoverMdCss = () => `:host{--background:var(--ion-background-color, #fff);--min-width:0;--min-height:0;--max-width:auto;--height:auto;--offset-x:0px;--offset-y:0px;left:0;right:0;top:0;bottom:0;display:-ms-flexbox;display:flex;position:fixed;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;outline:none;color:var(--ion-text-color, #000);z-index:1001}:host(.popover-nested){pointer-events:none}:host(.popover-nested) .popover-wrapper{pointer-events:auto}:host(.overlay-hidden){display:none}.popover-wrapper{z-index:10}.popover-content{display:-ms-flexbox;display:flex;position:absolute;-ms-flex-direction:column;flex-direction:column;width:var(--width);min-width:var(--min-width);max-width:var(--max-width);height:var(--height);min-height:var(--min-height);max-height:var(--max-height);background:var(--background);-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow);overflow:auto;z-index:10}::slotted(.popover-viewport){--ion-safe-area-top:0px;--ion-safe-area-right:0px;--ion-safe-area-bottom:0px;--ion-safe-area-left:0px;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}:host(.popover-nested.popover-side-left){--offset-x:5px}:host(.popover-nested.popover-side-right){--offset-x:-5px}:host(.popover-nested.popover-side-start){--offset-x:5px}:host-context([dir=rtl]):host(.popover-nested.popover-side-start),:host-context([dir=rtl]).popover-nested.popover-side-start{--offset-x:-5px}@supports selector(:dir(rtl)){:host(.popover-nested.popover-side-start:dir(rtl)){--offset-x:-5px}}:host(.popover-nested.popover-side-end){--offset-x:-5px}:host-context([dir=rtl]):host(.popover-nested.popover-side-end),:host-context([dir=rtl]).popover-nested.popover-side-end{--offset-x:5px}@supports selector(:dir(rtl)){:host(.popover-nested.popover-side-end:dir(rtl)){--offset-x:5px}}:host{--width:250px;--max-height:90%;--box-shadow:0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);--backdrop-opacity:var(--ion-backdrop-opacity, 0.32)}.popover-content{border-radius:4px;-webkit-transform-origin:left top;transform-origin:left top}:host-context([dir=rtl]) .popover-content{-webkit-transform-origin:right top;transform-origin:right top}[dir=rtl] .popover-content{-webkit-transform-origin:right top;transform-origin:right top}@supports selector(:dir(rtl)){.popover-content:dir(rtl){-webkit-transform-origin:right top;transform-origin:right top}}.popover-viewport{-webkit-transition-delay:100ms;transition-delay:100ms}.popover-wrapper{opacity:0}`;
+const popoverMdCss = () => `:host{--background:var(--ion-background-color, #fff);--min-width:0;--min-height:0;--max-width:auto;--height:auto;--offset-x:0px;--offset-y:0px;left:0;right:0;top:0;bottom:0;display:-ms-flexbox;display:flex;position:fixed;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;outline:none;color:var(--ion-text-color, #000);z-index:1001}:host(.popover-nested){pointer-events:none}:host(.popover-nested) .popover-wrapper{pointer-events:auto}:host(.overlay-hidden){display:none}.popover-wrapper{z-index:10}.popover-content{display:-ms-flexbox;display:flex;position:absolute;-ms-flex-direction:column;flex-direction:column;width:var(--width);min-width:var(--min-width);max-width:var(--max-width);height:var(--height);min-height:var(--min-height);max-height:var(--max-height);background:var(--background);-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow);overflow:auto;z-index:10}::slotted(.popover-viewport){--ion-safe-area-top:0px;--ion-safe-area-right:0px;--ion-safe-area-bottom:0px;--ion-safe-area-left:0px;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}:host(.popover-nested.popover-side-left){--offset-x:5px}:host(.popover-nested.popover-side-right){--offset-x:-5px}:host(.popover-nested.popover-side-start){--offset-x:5px}:host-context([dir=rtl]):host(.popover-nested.popover-side-start),:host-context([dir=rtl]).popover-nested.popover-side-start{--offset-x:-5px}@supports selector(:dir(rtl)){:host(.popover-nested.popover-side-start:dir(rtl)){--offset-x:-5px}}:host(.popover-nested.popover-side-end){--offset-x:-5px}:host-context([dir=rtl]):host(.popover-nested.popover-side-end),:host-context([dir=rtl]).popover-nested.popover-side-end{--offset-x:5px}@supports selector(:dir(rtl)){:host(.popover-nested.popover-side-end:dir(rtl)){--offset-x:5px}}:host(.select-popover-rich-content){--width:clamp(250px, calc(100vw - 40px), 400px)}:host{--width:250px;--max-height:90%;--box-shadow:0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);--backdrop-opacity:var(--ion-backdrop-opacity, 0.32)}.popover-content{border-radius:4px;-webkit-transform-origin:left top;transform-origin:left top}:host-context([dir=rtl]) .popover-content{-webkit-transform-origin:right top;transform-origin:right top}[dir=rtl] .popover-content{-webkit-transform-origin:right top;transform-origin:right top}@supports selector(:dir(rtl)){.popover-content:dir(rtl){-webkit-transform-origin:right top;transform-origin:right top}}.popover-viewport{-webkit-transition-delay:100ms;transition-delay:100ms}.popover-wrapper{opacity:0}`;
 
 const Popover = class {
     constructor(hostRef) {
@@ -1105,181 +1101,183 @@ const Popover = class {
         this.willDismissShorthand = createEvent(this, "willDismiss", 7);
         this.didDismissShorthand = createEvent(this, "didDismiss", 7);
         this.ionMount = createEvent(this, "ionMount", 7);
-        this.parentPopover = null;
-        this.coreDelegate = CoreDelegate();
-        this.lockController = createLockController();
-        this.inline = false;
-        this.focusDescendantOnPresent = false;
-        this.presented = false;
-        /** @internal */
-        this.hasController = false;
-        /**
-         * If `true`, the keyboard will be automatically dismissed when the overlay is presented.
-         */
-        this.keyboardClose = true;
-        /**
-         * If `true`, the popover will be dismissed when the backdrop is clicked.
-         */
-        this.backdropDismiss = true;
-        /**
-         * If `true`, a backdrop will be displayed behind the popover.
-         * This property controls whether or not the backdrop
-         * darkens the screen when the popover is presented.
-         * It does not control whether or not the backdrop
-         * is active or present in the DOM.
-         */
-        this.showBackdrop = true;
-        /**
-         * If `true`, the popover will be translucent.
-         * Only applies when the mode is `"ios"` and the device supports
-         * [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).
-         */
-        this.translucent = false;
-        /**
-         * If `true`, the popover will animate.
-         */
-        this.animated = true;
-        /**
-         * Describes what kind of interaction with the trigger that
-         * should cause the popover to open. Does not apply when the `trigger`
-         * property is `undefined`.
-         * If `"click"`, the popover will be presented when the trigger is left clicked.
-         * If `"hover"`, the popover will be presented when a pointer hovers over the trigger.
-         * If `"context-menu"`, the popover will be presented when the trigger is right
-         * clicked on desktop and long pressed on mobile. This will also prevent your
-         * device's normal context menu from appearing.
-         */
-        this.triggerAction = 'click';
-        /**
-         * Describes how to calculate the popover width.
-         * If `"cover"`, the popover width will match the width of the trigger.
-         * If `"auto"`, the popover width will be set to a static default value.
-         */
-        this.size = 'auto';
-        /**
-         * If `true`, the popover will be automatically
-         * dismissed when the content has been clicked.
-         */
-        this.dismissOnSelect = false;
-        /**
-         * Describes what to position the popover relative to.
-         * If `"trigger"`, the popover will be positioned relative
-         * to the trigger button. If passing in an event, this is
-         * determined via event.target.
-         * If `"event"`, the popover will be positioned relative
-         * to the x/y coordinates of the trigger action. If passing
-         * in an event, this is determined via event.clientX and event.clientY.
-         */
-        this.reference = 'trigger';
-        /**
-         * Describes which side of the `reference` point to position
-         * the popover on. The `"start"` and `"end"` values are RTL-aware,
-         * and the `"left"` and `"right"` values are not.
-         */
-        this.side = 'bottom';
-        /**
-         * If `true`, the popover will display an arrow that points at the
-         * `reference` when running in `ios` mode. Does not apply in `md` mode.
-         */
-        this.arrow = true;
-        /**
-         * If `true`, the popover will open. If `false`, the popover will close.
-         * Use this if you need finer grained control over presentation, otherwise
-         * just use the popoverController or the `trigger` property.
-         * Note: `isOpen` will not automatically be set back to `false` when
-         * the popover dismisses. You will need to do that in your code.
-         */
-        this.isOpen = false;
-        /**
-         * @internal
-         *
-         * If `true` the popover will not register its own keyboard event handlers.
-         * This allows the contents of the popover to handle their own keyboard interactions.
-         *
-         * If `false`, the popover will register its own keyboard event handlers for
-         * navigating `ion-list` items within a popover (up/down/home/end/etc.).
-         * This will also cancel browser keyboard event bindings to prevent scroll
-         * behavior in a popover using a list of items.
-         */
-        this.keyboardEvents = false;
-        /**
-         * If `true`, focus will not be allowed to move outside of this overlay.
-         * If `false`, focus will be allowed to move outside of the overlay.
-         *
-         * In most scenarios this property should remain set to `true`. Setting
-         * this property to `false` can cause severe accessibility issues as users
-         * relying on assistive technologies may be able to move focus into
-         * a confusing state. We recommend only setting this to `false` when
-         * absolutely necessary.
-         *
-         * Developers may want to consider disabling focus trapping if this
-         * overlay presents a non-Ionic overlay from a 3rd party library.
-         * Developers would disable focus trapping on the Ionic overlay
-         * when presenting the 3rd party overlay and then re-enable
-         * focus trapping when dismissing the 3rd party overlay and moving
-         * focus back to the Ionic overlay.
-         */
-        this.focusTrap = true;
-        /**
-         * If `true`, the component passed into `ion-popover` will
-         * automatically be mounted when the popover is created. The
-         * component will remain mounted even when the popover is dismissed.
-         * However, the component will be destroyed when the popover is
-         * destroyed. This property is not reactive and should only be
-         * used when initially creating a popover.
-         *
-         * Note: This feature only applies to inline popovers in JavaScript
-         * frameworks such as Angular, React, and Vue.
-         */
-        this.keepContentsMounted = false;
-        this.onBackdropTap = () => {
-            this.dismiss(undefined, BACKDROP);
-        };
-        this.onLifecycle = (modalEvent) => {
-            const el = this.usersElement;
-            const name = LIFECYCLE_MAP[modalEvent.type];
-            if (el && name) {
-                const event = new CustomEvent(name, {
-                    bubbles: false,
-                    cancelable: false,
-                    detail: modalEvent.detail,
-                });
-                el.dispatchEvent(event);
-            }
-        };
-        this.configureTriggerInteraction = () => {
-            const { trigger, triggerAction, el, destroyTriggerInteraction } = this;
-            if (destroyTriggerInteraction) {
-                destroyTriggerInteraction();
-            }
-            if (trigger === undefined) {
-                return;
-            }
-            const triggerEl = (this.triggerEl = trigger !== undefined ? document.getElementById(trigger) : null);
-            if (!triggerEl) {
-                printIonWarning(`[ion-popover] - A trigger element with the ID "${trigger}" was not found in the DOM. The trigger element must be in the DOM when the "trigger" property is set on ion-popover.`, this.el);
-                return;
-            }
-            this.destroyTriggerInteraction = configureTriggerInteraction(triggerEl, triggerAction, el);
-        };
-        this.configureKeyboardInteraction = () => {
-            const { destroyKeyboardInteraction, el } = this;
-            if (destroyKeyboardInteraction) {
-                destroyKeyboardInteraction();
-            }
-            this.destroyKeyboardInteraction = configureKeyboardInteraction(el);
-        };
-        this.configureDismissInteraction = () => {
-            const { destroyDismissInteraction, parentPopover, triggerAction, triggerEl, el } = this;
-            if (!parentPopover || !triggerEl) {
-                return;
-            }
-            if (destroyDismissInteraction) {
-                destroyDismissInteraction();
-            }
-            this.destroyDismissInteraction = configureDismissInteraction(triggerEl, triggerAction, el, parentPopover);
-        };
     }
+    usersElement;
+    triggerEl;
+    parentPopover = null;
+    coreDelegate = CoreDelegate();
+    lockController = createLockController();
+    destroyTriggerInteraction;
+    destroyKeyboardInteraction;
+    destroyDismissInteraction;
+    headerResizeObserver;
+    inline = false;
+    workingDelegate;
+    focusDescendantOnPresent = false;
+    lastFocus;
+    presented = false;
+    get el() { return getElement(this); }
+    /** @internal */
+    hasController = false;
+    /** @internal */
+    delegate;
+    /** @internal */
+    overlayIndex;
+    /**
+     * Animation to use when the popover is presented.
+     */
+    enterAnimation;
+    /**
+     * Animation to use when the popover is dismissed.
+     */
+    leaveAnimation;
+    /**
+     * The component to display inside of the popover.
+     * You only need to use this if you are not using
+     * a JavaScript framework. Otherwise, you can just
+     * slot your component inside of `ion-popover`.
+     */
+    component;
+    /**
+     * The data to pass to the popover component.
+     * You only need to use this if you are not using
+     * a JavaScript framework. Otherwise, you can just
+     * set the props directly on your component.
+     */
+    componentProps;
+    /**
+     * If `true`, the keyboard will be automatically dismissed when the overlay is presented.
+     */
+    keyboardClose = true;
+    /**
+     * Additional classes to apply for custom CSS. If multiple classes are
+     * provided they should be separated by spaces.
+     * @internal
+     */
+    cssClass;
+    /**
+     * If `true`, the popover will be dismissed when the backdrop is clicked.
+     */
+    backdropDismiss = true;
+    /**
+     * The event to pass to the popover animation.
+     */
+    event;
+    /**
+     * If `true`, a backdrop will be displayed behind the popover.
+     * This property controls whether or not the backdrop
+     * darkens the screen when the popover is presented.
+     * It does not control whether or not the backdrop
+     * is active or present in the DOM.
+     */
+    showBackdrop = true;
+    /**
+     * If `true`, the popover will be translucent.
+     * Only applies when the mode is `"ios"` and the device supports
+     * [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).
+     */
+    translucent = false;
+    /**
+     * If `true`, the popover will animate.
+     */
+    animated = true;
+    /**
+     * Additional attributes to pass to the popover.
+     */
+    htmlAttributes;
+    /**
+     * Describes what kind of interaction with the trigger that
+     * should cause the popover to open. Does not apply when the `trigger`
+     * property is `undefined`.
+     * If `"click"`, the popover will be presented when the trigger is left clicked.
+     * If `"hover"`, the popover will be presented when a pointer hovers over the trigger.
+     * If `"context-menu"`, the popover will be presented when the trigger is right
+     * clicked on desktop and long pressed on mobile. This will also prevent your
+     * device's normal context menu from appearing.
+     */
+    triggerAction = 'click';
+    /**
+     * An ID corresponding to the trigger element that
+     * causes the popover to open. Use the `trigger-action`
+     * property to customize the interaction that results in
+     * the popover opening.
+     */
+    trigger;
+    /**
+     * Describes how to calculate the popover width.
+     * If `"cover"`, the popover width will match the width of the trigger.
+     * If `"auto"`, the popover width will be set to a static default value.
+     */
+    size = 'auto';
+    /**
+     * If `true`, the popover will be automatically
+     * dismissed when the content has been clicked.
+     */
+    dismissOnSelect = false;
+    /**
+     * Describes what to position the popover relative to.
+     * If `"trigger"`, the popover will be positioned relative
+     * to the trigger button. If passing in an event, this is
+     * determined via event.target.
+     * If `"event"`, the popover will be positioned relative
+     * to the x/y coordinates of the trigger action. If passing
+     * in an event, this is determined via event.clientX and event.clientY.
+     */
+    reference = 'trigger';
+    /**
+     * Describes which side of the `reference` point to position
+     * the popover on. The `"start"` and `"end"` values are RTL-aware,
+     * and the `"left"` and `"right"` values are not.
+     */
+    side = 'bottom';
+    /**
+     * Describes how to align the popover content with the `reference` point.
+     * Defaults to `"center"` for `ios` mode, and `"start"` for `md` mode.
+     */
+    alignment;
+    /**
+     * If `true`, the popover will display an arrow that points at the
+     * `reference` when running in `ios` mode. Does not apply in `md` mode.
+     */
+    arrow = true;
+    /**
+     * If `true`, the popover will open. If `false`, the popover will close.
+     * Use this if you need finer grained control over presentation, otherwise
+     * just use the popoverController or the `trigger` property.
+     * Note: `isOpen` will not automatically be set back to `false` when
+     * the popover dismisses. You will need to do that in your code.
+     */
+    isOpen = false;
+    /**
+     * @internal
+     *
+     * If `true` the popover will not register its own keyboard event handlers.
+     * This allows the contents of the popover to handle their own keyboard interactions.
+     *
+     * If `false`, the popover will register its own keyboard event handlers for
+     * navigating `ion-list` items within a popover (up/down/home/end/etc.).
+     * This will also cancel browser keyboard event bindings to prevent scroll
+     * behavior in a popover using a list of items.
+     */
+    keyboardEvents = false;
+    /**
+     * If `true`, focus will not be allowed to move outside of this overlay.
+     * If `false`, focus will be allowed to move outside of the overlay.
+     *
+     * In most scenarios this property should remain set to `true`. Setting
+     * this property to `false` can cause severe accessibility issues as users
+     * relying on assistive technologies may be able to move focus into
+     * a confusing state. We recommend only setting this to `false` when
+     * absolutely necessary.
+     *
+     * Developers may want to consider disabling focus trapping if this
+     * overlay presents a non-Ionic overlay from a 3rd party library.
+     * Developers would disable focus trapping on the Ionic overlay
+     * when presenting the 3rd party overlay and then re-enable
+     * focus trapping when dismissing the 3rd party overlay and moving
+     * focus back to the Ionic overlay.
+     */
+    focusTrap = true;
     onTriggerChange() {
         this.configureTriggerInteraction();
     }
@@ -1291,6 +1289,66 @@ const Popover = class {
             this.dismiss();
         }
     }
+    /**
+     * If `true`, the component passed into `ion-popover` will
+     * automatically be mounted when the popover is created. The
+     * component will remain mounted even when the popover is dismissed.
+     * However, the component will be destroyed when the popover is
+     * destroyed. This property is not reactive and should only be
+     * used when initially creating a popover.
+     *
+     * Note: This feature only applies to inline popovers in JavaScript
+     * frameworks such as Angular, React, and Vue.
+     */
+    keepContentsMounted = false;
+    /**
+     * Emitted after the popover has presented.
+     */
+    didPresent;
+    /**
+     * Emitted before the popover has presented.
+     */
+    willPresent;
+    /**
+     * Emitted before the popover has dismissed.
+     */
+    willDismiss;
+    /**
+     * Emitted after the popover has dismissed.
+     */
+    didDismiss;
+    /**
+     * Emitted after the popover has presented.
+     * Shorthand for ionPopoverWillDismiss.
+     */
+    didPresentShorthand;
+    /**
+     * Emitted before the popover has presented.
+     * Shorthand for ionPopoverWillPresent.
+     */
+    willPresentShorthand;
+    /**
+     * Emitted before the popover has dismissed.
+     * Shorthand for ionPopoverWillDismiss.
+     */
+    willDismissShorthand;
+    /**
+     * Emitted after the popover has dismissed.
+     * Shorthand for ionPopoverDidDismiss.
+     */
+    didDismissShorthand;
+    /**
+     * Emitted before the popover has presented, but after the component
+     * has been mounted in the DOM.
+     * This event exists for ion-popover to resolve an issue with the
+     * popover and the lazy build, that the transition is unable to get
+     * the correct dimensions of the popover with auto sizing.
+     * This is not required for other overlays, since the existing
+     * overlay transitions are not effected by auto sizing content.
+     *
+     * @internal
+     */
+    ionMount;
     connectedCallback() {
         const { configureTriggerInteraction, el } = this;
         prepareOverlay(el);
@@ -1305,11 +1363,14 @@ const Popover = class {
             this.headerResizeObserver.disconnect();
             this.headerResizeObserver = undefined;
         }
+        // Clean up aria-hidden if removed without dismiss() being called
+        if (this.presented) {
+            cleanupRootFocusTrapAccessibility();
+        }
     }
     componentWillLoad() {
-        var _a, _b;
         const { el } = this;
-        const popoverId = (_b = (_a = this.htmlAttributes) === null || _a === void 0 ? void 0 : _a.id) !== null && _b !== void 0 ? _b : setOverlayId(el);
+        const popoverId = this.htmlAttributes?.id ?? setOverlayId(el);
         this.parentPopover = el.closest(`ion-popover:not(#${popoverId})`);
         if (this.alignment === undefined) {
             this.alignment = getIonMode(this) === 'ios' ? 'center' : 'start';
@@ -1459,8 +1520,7 @@ const Popover = class {
      * of the content to the height of the header correctly.
      */
     recalculateContentOnHeaderReady() {
-        var _a;
-        const popoverContent = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.popover-content');
+        const popoverContent = this.el.shadowRoot?.querySelector('.popover-content');
         if (!popoverContent) {
             return;
         }
@@ -1471,9 +1531,8 @@ const Popover = class {
             return;
         }
         this.headerResizeObserver = new ResizeObserver(async () => {
-            var _a;
             if (header.offsetHeight > 0) {
-                (_a = this.headerResizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+                this.headerResizeObserver?.disconnect();
                 this.headerResizeObserver = undefined;
                 for (const contentEl of contentElements) {
                     await contentEl.recalculateDimensions();
@@ -1538,16 +1597,71 @@ const Popover = class {
     onWillDismiss() {
         return eventMethod(this.el, 'ionPopoverWillDismiss');
     }
+    onBackdropTap = () => {
+        this.dismiss(undefined, BACKDROP);
+    };
+    onLifecycle = (modalEvent) => {
+        const el = this.usersElement;
+        const name = LIFECYCLE_MAP[modalEvent.type];
+        if (el && name) {
+            const event = new CustomEvent(name, {
+                bubbles: false,
+                cancelable: false,
+                detail: modalEvent.detail,
+            });
+            el.dispatchEvent(event);
+        }
+    };
+    configureTriggerInteraction = () => {
+        const { trigger, triggerAction, el, destroyTriggerInteraction } = this;
+        if (destroyTriggerInteraction) {
+            destroyTriggerInteraction();
+        }
+        if (trigger === undefined) {
+            return;
+        }
+        const triggerEl = (this.triggerEl = trigger !== undefined ? document.getElementById(trigger) : null);
+        if (!triggerEl) {
+            printIonWarning(`[ion-popover] - A trigger element with the ID "${trigger}" was not found in the DOM. The trigger element must be in the DOM when the "trigger" property is set on ion-popover.`, this.el);
+            return;
+        }
+        this.destroyTriggerInteraction = configureTriggerInteraction(triggerEl, triggerAction, el);
+    };
+    configureKeyboardInteraction = () => {
+        const { destroyKeyboardInteraction, el } = this;
+        if (destroyKeyboardInteraction) {
+            destroyKeyboardInteraction();
+        }
+        this.destroyKeyboardInteraction = configureKeyboardInteraction(el);
+    };
+    configureDismissInteraction = () => {
+        const { destroyDismissInteraction, parentPopover, triggerAction, triggerEl, el } = this;
+        if (!parentPopover || !triggerEl) {
+            return;
+        }
+        if (destroyDismissInteraction) {
+            destroyDismissInteraction();
+        }
+        this.destroyDismissInteraction = configureDismissInteraction(triggerEl, triggerAction, el, parentPopover);
+    };
     render() {
         const mode = getIonMode(this);
         const { onLifecycle, parentPopover, dismissOnSelect, side, arrow, htmlAttributes, focusTrap } = this;
         const desktop = isPlatform('desktop');
         const enableArrow = arrow && !parentPopover;
-        return (h(Host, Object.assign({ key: '2edd8333c630efbce59071f8a383e4326e928dbc', "aria-modal": "true", "no-router": true, tabindex: "-1" }, htmlAttributes, { style: {
+        return (h(Host, { key: '52ffc7116969ae1b8b927e67f2acbfe5f5434f70', "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: 'aac4e68b08197534375e8ea3f8c9ea0c10ab2af4', tappable: this.backdropDismiss, visible: this.showBackdrop, part: "backdrop" }), h("div", { key: 'b7f4ebf57d4148b32856b0075d286f454be8de5d', class: "popover-wrapper ion-overlay-wrapper", onClick: dismissOnSelect ? () => this.dismiss() : undefined }, enableArrow && h("div", { key: '607d94c28d73e8e957175a7c0f6e8a99ec4dcd53', class: "popover-arrow", part: "arrow" }), h("div", { key: '4366a5a5de550c09895e923f345583508e1ec30c', class: "popover-content", part: "content" }, h("slot", { key: 'eb7886fbc99c15b667b7d825d24f1c12d9380f03' })))));
+            }, class: {
+                ...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: '79a8e851dbd22119e21ffb2f4709c555251045c8', tappable: this.backdropDismiss, visible: this.showBackdrop, part: "backdrop" }), h("div", { key: 'c46c9f62c3ef3f902e23f27404eaa446a5d8cf88', class: "popover-wrapper ion-overlay-wrapper", onClick: dismissOnSelect ? () => this.dismiss() : undefined }, enableArrow && h("div", { key: '9fdcbbc4ea6c7bde74f646d48eb77296b2c9dd83', class: "popover-arrow", part: "arrow" }), h("div", { key: '138e56bb83462ebb0908edb522b45ecf94b82aeb', class: "popover-content", part: "content" }, h("slot", { key: 'daeefcf002e8d89e91d6e0faf7f63f75b68a2dbe' })))));
     }
-    get el() { return getElement(this); }
     static get watchers() { return {
         "trigger": [{
                 "onTriggerChange": 0