@ionic/core 8.8.16-dev.11784913436.1a334b43 → 8.8.16-dev.11784916402.10d0804c

package/dist/cjs/ion-nav_2.cjs.entry.js

@@ -3,12 +3,13 @@
  */
 'use strict';
 
-var index = require('./index-Ct7gcRif.js');
+var index = require('./index-GZU9YrFc.js');
 var cubicBezier = require('./cubic-bezier-DAjy1V-e.js');
-var helpers = require('./helpers-Cv23MFHM.js');
-var index$1 = require('./index-BERfRao3.js');
-var ionicGlobal = require('./ionic-global-CbxQmwkf.js');
-var frameworkDelegate = require('./framework-delegate-BtICZDHr.js');
+var helpers = require('./helpers-DiOgV5hw.js');
+var index$1 = require('./index-BaJ7_YbC.js');
+var ionicGlobal = require('./ionic-global-QoUqobrQ.js');
+var frameworkDelegate = require('./framework-delegate-DC5nq_NN.js');
+require('./focus-visible-BIj-I3-C.js');
 
 const VIEW_STATE_NEW = 1;
 const VIEW_STATE_ATTACHED = 2;
@@ -45,6 +46,15 @@ class ViewController {
         this.state = VIEW_STATE_DESTROYED;
     }
 }
+const matches = (view, id, params) => {
+    if (!view) {
+        return false;
+    }
+    if (view.component !== id) {
+        return false;
+    }
+    return helpers.shallowEqualStringMap(view.params, params);
+};
 const convertToView = (page, params) => {
     if (!page) {
         return null;
@@ -68,7 +78,7 @@ const convertToViews = (pages) => {
         .filter((v) => v !== null);
 };
 
-const navCss = () => `:host{left:0;right:0;top:0;bottom:0;position:absolute;contain:layout size style;z-index:0}`;
+const navCss = () => `:host{right:0;left:0;top:0;bottom:0;position:absolute;contain:layout size style;z-index:0}`;
 
 const Nav = class {
     constructor(hostRef) {
@@ -78,6 +88,7 @@ const Nav = class {
         this.ionNavDidChange = index.createEvent(this, "ionNavDidChange", 3);
         this.transInstr = [];
         this.gestureOrAnimationInProgress = false;
+        this.useRouter = false;
         this.isTransitioning = false;
         this.destroyed = false;
         this.views = [];
@@ -103,9 +114,14 @@ const Nav = class {
              */
             return;
         }
-        this.setRoot(this.root, this.rootParams);
+        if (!this.useRouter) {
+            if (this.root !== undefined) {
+                this.setRoot(this.root, this.rootParams);
+            }
+        }
     }
     componentWillLoad() {
+        this.useRouter = document.querySelector('ion-router') !== null && this.el.closest('[no-router]') === null;
         if (this.swipeGesture === undefined) {
             const mode = ionicGlobal.getIonMode(this);
             this.swipeGesture = index.config.getBoolean('swipeBackEnabled', mode === 'ios');
@@ -116,7 +132,7 @@ const Nav = class {
         // We want to set this flag before any watch callbacks are manually called
         this.didLoad = true;
         this.rootChanged();
-        this.gesture = (await Promise.resolve().then(function () { return require('./swipe-back-C0GCB18x.js'); })).createSwipeBackGesture(this.el, this.canStart.bind(this), this.onStart.bind(this), this.onMove.bind(this), this.onEnd.bind(this));
+        this.gesture = (await Promise.resolve().then(function () { return require('./swipe-back-CvZt_4YX.js'); })).createSwipeBackGesture(this.el, this.canStart.bind(this), this.onStart.bind(this), this.onMove.bind(this), this.onEnd.bind(this));
         this.swipeGestureChanged();
     }
     connectedCallback() {
@@ -270,6 +286,78 @@ const Nav = class {
             opts,
         }, done);
     }
+    /**
+     * Called by the router to update the view.
+     *
+     * @param id The component tag.
+     * @param params The component params.
+     * @param direction A direction hint.
+     * @param animation an AnimationBuilder.
+     *
+     * @return the status.
+     * @internal
+     */
+    setRouteId(id, params, direction, animation) {
+        const active = this.getActiveSync();
+        if (matches(active, id, params)) {
+            return Promise.resolve({
+                changed: false,
+                element: active.element,
+            });
+        }
+        let resolve;
+        const promise = new Promise((r) => (resolve = r));
+        let finish;
+        const commonOpts = {
+            updateURL: false,
+            viewIsReady: (enteringEl) => {
+                let mark;
+                const p = new Promise((r) => (mark = r));
+                resolve({
+                    changed: true,
+                    element: enteringEl,
+                    markVisible: async () => {
+                        mark();
+                        await finish;
+                    },
+                });
+                return p;
+            },
+        };
+        if (direction === 'root') {
+            finish = this.setRoot(id, params, commonOpts);
+        }
+        else {
+            // Look for a view matching the target in the view stack.
+            const viewController = this.views.find((v) => matches(v, id, params));
+            if (viewController) {
+                finish = this.popTo(viewController, Object.assign(Object.assign({}, commonOpts), { direction: 'back', animationBuilder: animation }));
+            }
+            else if (direction === 'forward') {
+                finish = this.push(id, params, Object.assign(Object.assign({}, commonOpts), { animationBuilder: animation }));
+            }
+            else if (direction === 'back') {
+                finish = this.setRoot(id, params, Object.assign(Object.assign({}, commonOpts), { direction: 'back', animated: true, animationBuilder: animation }));
+            }
+        }
+        return promise;
+    }
+    /**
+     * Called by <ion-router> to retrieve the current component.
+     *
+     * @internal
+     */
+    async getRouteId() {
+        const active = this.getActiveSync();
+        if (active) {
+            return {
+                id: active.element.tagName,
+                params: active.params,
+                element: active.element,
+            };
+        }
+        return undefined;
+    }
     /**
      * Get the active view.
      */
@@ -335,6 +423,25 @@ const Nav = class {
             ti.reject = reject;
         });
         ti.done = done;
+        /**
+         * If using router, check to see if navigation hooks
+         * will allow us to perform this transition. This
+         * is required in order for hooks to work with
+         * the ion-back-button or swipe to go back.
+         */
+        if (ti.opts && ti.opts.updateURL !== false && this.useRouter) {
+            const router = document.querySelector('ion-router');
+            if (router) {
+                const canTransition = await router.canTransition();
+                if (canTransition === false) {
+                    return false;
+                }
+                if (typeof canTransition === 'string') {
+                    router.push(canTransition, ti.opts.direction || 'back');
+                    return false;
+                }
+            }
+        }
         // Normalize empty
         if (((_b = ti.insertViews) === null || _b === void 0 ? void 0 : _b.length) === 0) {
             ti.insertViews = undefined;
@@ -355,6 +462,13 @@ const Nav = class {
             ti.done(result.hasCompleted, result.requiresTransition, result.enteringView, result.leavingView, result.direction);
         }
         ti.resolve(result.hasCompleted);
+        if (ti.opts.updateURL !== false && this.useRouter) {
+            const router = document.querySelector('ion-router');
+            if (router) {
+                const direction = result.direction === 'back' ? 'back' : 'forward';
+                router.navChanged(direction);
+            }
+        }
     }
     failed(rejectReason, ti) {
         if (this.destroyed) {
@@ -627,11 +741,13 @@ const Nav = class {
                 }
             }
             : undefined;
-        const mode = ionicGlobal.getIonMode(this);
+        const theme = ionicGlobal.getIonTheme(this);
+        const mode = ionicGlobal.getIonMode(this, theme);
         const enteringEl = enteringView.element;
         // eslint-disable-next-line @typescript-eslint/prefer-optional-chain
         const leavingEl = leavingView && leavingView.element;
-        const animationOpts = Object.assign(Object.assign({ mode, showGoBack: this.canGoBackSync(enteringView), baseEl: this.el, progressCallback, animated: this.animated && index.config.getBoolean('animated', true), enteringEl,
+        const animationOpts = Object.assign(Object.assign({ mode,
+            theme, showGoBack: this.canGoBackSync(enteringView), baseEl: this.el, progressCallback, animated: this.animated && index.config.getBoolean('animated', true), enteringEl,
             leavingEl }, opts), { animationBuilder: opts.animationBuilder || this.animation || index.config.get('navAnimation') });
         const { hasCompleted } = await index$1.transition(animationOpts);
         return this.transitionFinish(hasCompleted, enteringView, leavingView, opts);
@@ -784,7 +900,7 @@ const Nav = class {
         }
     }
     render() {
-        return index.h("slot", { key: 'bb4a201a3a8079548f5474ff42293b28fc7599fb' });
+        return index.h("slot", { key: '3dfe9c2a5f3ea75cb6d82b76b240733105cddfad' });
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
@@ -830,7 +946,7 @@ const NavLink = class {
         };
     }
     render() {
-        return index.h(index.Host, { key: 'd4d80feb51c0d92b0bedf6952c892f9df3002046', onClick: this.onClick });
+        return index.h(index.Host, { key: '476bfb5bb6fba4f422ec40315fc3ef466d01f757', onClick: this.onClick });
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/ion-picker-column-option.cjs.entry.js

@@ -3,14 +3,17 @@
  */
 'use strict';
 
-var index = require('./index-Ct7gcRif.js');
-var helpers = require('./helpers-Cv23MFHM.js');
-var theme = require('./theme-CeDs6Hcv.js');
-var ionicGlobal = require('./ionic-global-CbxQmwkf.js');
+var index = require('./index-GZU9YrFc.js');
+var helpers = require('./helpers-DiOgV5hw.js');
+var theme = require('./theme-IlOsGAz7.js');
+var ionicGlobal = require('./ionic-global-QoUqobrQ.js');
+require('./focus-visible-BIj-I3-C.js');
+
+const ionicPickerColumnOptionMdCss = () => `.picker-column-option-button{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;width:100%;height:34px;border:0px;outline:none;background:transparent;color:inherit;font-family:var(--ion-font-family, inherit);font-size:inherit;line-height:34px;text-align:inherit;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;overflow:hidden}:host(.option-disabled){opacity:0.4}:host(.option-disabled) .picker-column-option-button{cursor:default}:host(.option-active),:host([part~=active]){color:var(--ion-color-base)}`;
 
 const pickerColumnOptionIosCss = () => `.picker-column-option-button{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;width:100%;height:34px;border:0px;outline:none;background:transparent;color:inherit;font-family:var(--ion-font-family, inherit);font-size:inherit;line-height:34px;text-align:inherit;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;overflow:hidden}:host(.option-disabled){opacity:0.4}:host(.option-disabled) .picker-column-option-button{cursor:default}`;
 
-const pickerColumnOptionMdCss = () => `.picker-column-option-button{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;width:100%;height:34px;border:0px;outline:none;background:transparent;color:inherit;font-family:var(--ion-font-family, inherit);font-size:inherit;line-height:34px;text-align:inherit;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;overflow:hidden}:host(.option-disabled){opacity:0.4}:host(.option-disabled) .picker-column-option-button{cursor:default}:host(.option-active),:host([part~=active]){color:var(--ion-color-primary, #0054e9)}:host(.ion-color.option-active),:host(.ion-color[part~=active]){color:var(--ion-color-base)}`;
+const pickerColumnOptionMdCss = () => `.picker-column-option-button{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;width:100%;height:34px;border:0px;outline:none;background:transparent;color:inherit;font-family:var(--ion-font-family, inherit);font-size:inherit;line-height:34px;text-align:inherit;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;overflow:hidden}:host(.option-disabled){opacity:0.4}:host(.option-disabled) .picker-column-option-button{cursor:default}:host(.option-active),:host([part~=active]){color:var(--ion-color-base)}`;
 
 const PickerColumnOption = class {
     constructor(hostRef) {
@@ -34,6 +37,12 @@ const PickerColumnOption = class {
          * If `true`, the user cannot interact with the picker column option.
          */
         this.disabled = false;
+        /**
+         * The color to use from your application's color palette.
+         * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
+         * For more information on colors, see [theming](/docs/theming/basics).
+         */
+        this.color = 'primary';
     }
     /**
      * The aria-label of the option has changed after the
@@ -92,11 +101,11 @@ const PickerColumnOption = class {
     }
     render() {
         const { color, disabled, ariaLabel } = this;
-        const mode = ionicGlobal.getIonMode(this);
-        return (index.h(index.Host, { key: '98109dc9aeced749a3e879394d9a24de24204433', class: theme.createColorClasses(color, {
-                [mode]: true,
+        const theme$1 = ionicGlobal.getIonTheme(this);
+        return (index.h(index.Host, { key: 'fe9553e3157d35f5c28a3f2457715bd598ec1e00', class: theme.createColorClasses(color, {
+                [theme$1]: true,
                 ['option-disabled']: disabled,
-            }) }, index.h("div", { key: '42cb75738ea6925a7780b3ec9c1ff6823e340a24', class: 'picker-column-option-button', role: "button", "aria-label": ariaLabel, onClick: () => this.onClick() }, index.h("slot", { key: '1f1b3862cdfb2b432016014e2e56330c0247d0b5' }))));
+            }) }, index.h("div", { key: '9bc334f020012537144972b5a8a1aed7c35ccec5', class: 'picker-column-option-button', role: "button", "aria-label": ariaLabel, onClick: () => this.onClick() }, index.h("slot", { key: 'bd076e43c98ad920486230684c7f63e7e0b187f8' }))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
@@ -106,6 +115,7 @@ const PickerColumnOption = class {
     }; }
 };
 PickerColumnOption.style = {
+    ionic: ionicPickerColumnOptionMdCss(),
     ios: pickerColumnOptionIosCss(),
     md: pickerColumnOptionMdCss()
 };

package/dist/cjs/ion-picker-column.cjs.entry.js

@@ -3,15 +3,15 @@
  */
 'use strict';
 
-var index = require('./index-Ct7gcRif.js');
-var index$1 = require('./index-DkNv4J_i.js');
-var helpers = require('./helpers-Cv23MFHM.js');
-var haptic = require('./haptic-ClPPQ_PS.js');
-var ionicGlobal = require('./ionic-global-CbxQmwkf.js');
-var theme = require('./theme-CeDs6Hcv.js');
-require('./capacitor-DmA66EwP.js');
+var index = require('./index-GZU9YrFc.js');
+var ionicGlobal = require('./ionic-global-QoUqobrQ.js');
+var helpers = require('./helpers-DiOgV5hw.js');
+var haptic = require('./haptic-eix26ESE.js');
+var theme = require('./theme-IlOsGAz7.js');
+require('./focus-visible-BIj-I3-C.js');
+require('./capacitor-CQSg1uCo.js');
 
-const pickerColumnCss = () => `:host{display:-ms-flexbox;display:flex;position:relative;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;max-width:100%;height:200px;font-size:22px;text-align:center}.assistive-focusable{left:0;right:0;top:0;bottom:0;position:absolute;z-index:1;pointer-events:none}.assistive-focusable:focus{outline:none}.picker-opts{-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px;padding-top:0px;padding-bottom:0px;min-width:26px;max-height:200px;outline:none;text-align:inherit;-webkit-scroll-snap-type:y mandatory;-ms-scroll-snap-type:y mandatory;scroll-snap-type:y mandatory;overflow-x:hidden;overflow-y:scroll;scrollbar-width:none}.picker-item-empty{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;display:block;width:100%;height:34px;border:0px;outline:none;background:transparent;color:inherit;font-family:var(--ion-font-family, inherit);font-size:inherit;line-height:34px;text-align:inherit;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.picker-opts::-webkit-scrollbar{display:none}::slotted(ion-picker-column-option){display:block;scroll-snap-align:center}.picker-item-empty,:host(:not([disabled])) ::slotted(ion-picker-column-option.option-disabled){scroll-snap-align:none}::slotted([slot=prefix]),::slotted([slot=suffix]){max-width:200px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::slotted([slot=prefix]){-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px;padding-top:0;padding-bottom:0;-ms-flex-pack:end;justify-content:end}::slotted([slot=suffix]){-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px;padding-top:0;padding-bottom:0;-ms-flex-pack:start;justify-content:start}:host(.picker-column-disabled) .picker-opts{overflow-y:hidden}:host(.picker-column-disabled) ::slotted(ion-picker-column-option){cursor:default;opacity:0.4;pointer-events:none}@media (any-hover: hover){:host(:focus) .picker-opts{outline:none;background:rgba(var(--ion-color-primary-rgb, 0, 84, 233), 0.2)}:host(.ion-color:focus) .picker-opts{background:rgba(var(--ion-color-base-rgb), 0.2)}}`;
+const pickerColumnCss = () => `:host{display:-ms-flexbox;display:flex;position:relative;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;max-width:100%;height:200px;font-size:22px;text-align:center}.assistive-focusable{right:0;left:0;top:0;bottom:0;position:absolute;z-index:1;pointer-events:none}.assistive-focusable:focus{outline:none}.picker-opts{-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px;padding-top:0px;padding-bottom:0px;min-width:26px;max-height:200px;outline:none;text-align:inherit;-webkit-scroll-snap-type:y mandatory;-ms-scroll-snap-type:y mandatory;scroll-snap-type:y mandatory;overflow-x:hidden;overflow-y:scroll;scrollbar-width:none}.picker-item-empty{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;display:block;width:100%;height:34px;border:0px;outline:none;background:transparent;color:inherit;font-family:var(--ion-font-family, inherit);font-size:inherit;line-height:34px;text-align:inherit;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.picker-opts::-webkit-scrollbar{display:none}::slotted(ion-picker-column-option){display:block;scroll-snap-align:center}.picker-item-empty,:host(:not([disabled])) ::slotted(ion-picker-column-option.option-disabled){scroll-snap-align:none}::slotted([slot=prefix]),::slotted([slot=suffix]){max-width:200px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::slotted([slot=prefix]){-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px;padding-top:0;padding-bottom:0;-ms-flex-pack:end;justify-content:end}::slotted([slot=suffix]){-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px;padding-top:0;padding-bottom:0;-ms-flex-pack:start;justify-content:start}:host(.picker-column-disabled) .picker-opts{overflow-y:hidden}:host(.picker-column-disabled) ::slotted(ion-picker-column-option){cursor:default;opacity:0.4;pointer-events:none}@media (any-hover: hover){:host(:focus) .picker-opts{outline:none;background:rgba(var(--ion-color-base-rgb), 0.2)}}`;
 
 const PickerColumn = class {
     constructor(hostRef) {
@@ -27,6 +27,12 @@ const PickerColumn = class {
          * If `true`, the user cannot interact with the picker.
          */
         this.disabled = false;
+        /**
+         * The color to use from your application's color palette.
+         * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
+         * For more information on colors, see [theming](/docs/theming/basics).
+         */
+        this.color = 'primary';
         /**
          * If `true`, tapping the picker will
          * reveal a number input keyboard that lets
@@ -161,7 +167,7 @@ const PickerColumn = class {
                      */
                     const rootNode = el.getRootNode();
                     const hasParentShadow = rootNode instanceof ShadowRoot;
-                    const referenceNode = hasParentShadow ? rootNode : index$1.doc;
+                    const referenceNode = hasParentShadow ? rootNode : ionicGlobal.doc;
                     /**
                      * If the reference node is undefined
                      * then it's likely that doc is undefined
@@ -543,15 +549,15 @@ const PickerColumn = class {
     }
     render() {
         const { color, disabled, isActive, numericInput } = this;
-        const mode = ionicGlobal.getIonMode(this);
-        return (index.h(index.Host, { key: '78b46ad10d88ea1bb43ca8c36748767912f03224', class: theme.createColorClasses(color, {
-                [mode]: true,
+        const theme$1 = ionicGlobal.getIonTheme(this);
+        return (index.h(index.Host, { key: 'f93a206d4f4b96bf4e574e5c920910ea22e1b447', class: theme.createColorClasses(color, {
+                [theme$1]: true,
                 ['picker-column-active']: isActive,
                 ['picker-column-numeric-input']: numericInput,
                 ['picker-column-disabled']: disabled,
-            }) }, index.h("slot", { key: '761e501df77f7de896ffb3ebb99ebf88c5c3bf70', name: "prefix" }), index.h("div", { key: '9f4caaeef8ab704522a85f30876d371712f47c5c', class: "picker-opts", ref: (el) => {
+            }) }, index.h("slot", { key: 'c2954a494c50a907529dc71e6fb91092773ad8a6', name: "prefix" }), index.h("div", { key: '1957b8a3a3835980bb22ea3b46b2cb5e6bcc2432', class: "picker-opts", ref: (el) => {
                 this.scrollEl = el;
-            }, role: "slider", tabindex: this.disabled ? undefined : 0, "aria-label": this.ariaLabel, "aria-valuemin": 0, "aria-valuemax": 0, "aria-valuenow": 0, "aria-valuetext": this.getOptionValueText(this.activeItem), "aria-orientation": "vertical", onKeyDown: (ev) => this.onKeyDown(ev) }, index.h("div", { key: '9d3533436aba6c61c93f65f84a077fba832194a0', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), index.h("div", { key: '3f18d3a47361f06f55321b65fdf5742a61722b26', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), index.h("div", { key: 'eac0d20ab8c533ef829875e323e93e1ee2067d6d', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), index.h("slot", { key: '92e25989ef41cf6f910c73238e1a0a5ac03f1c1f' }), index.h("div", { key: '33a84644ebdc84108b44a8e3a129b54e824939c8', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), index.h("div", { key: '128ad61a3a68c7ff2d2e44a6e968424fcc608a15', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), index.h("div", { key: '6e4d59a4f75befcbbf47279a263f28a69b12dbbd', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0")), index.h("slot", { key: '3c6621b64438792a3024c90e3d9916a0a3614506', name: "suffix" })));
+            }, role: "slider", tabindex: this.disabled ? undefined : 0, "aria-label": this.ariaLabel, "aria-valuemin": 0, "aria-valuemax": 0, "aria-valuenow": 0, "aria-valuetext": this.getOptionValueText(this.activeItem), "aria-orientation": "vertical", onKeyDown: (ev) => this.onKeyDown(ev) }, index.h("div", { key: 'c7218ed79d73cef4de55b248d3a4808146e2eee4', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), index.h("div", { key: '00d6c9dd149302d006a3a97b9ab61a5399196494', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), index.h("div", { key: 'f47359409deae7f7d73c8a8a64bc23053efc20d9', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), index.h("slot", { key: '791172a636d85a1b49c140066ce867a4f6e8403d' }), index.h("div", { key: 'f442c5ab5d84acf7b41782fd2b3908ca68a4bd1e', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), index.h("div", { key: 'b378ca562795326183353f35e328957ac592148c', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), index.h("div", { key: 'f0c8e825cb890718389395b741aa1b7839dba1b1', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0")), index.h("slot", { key: '6a11f3a2c46181d4b982a4d14170e71e3345973b', name: "suffix" })));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/ion-picker.cjs.entry.js

@@ -3,12 +3,15 @@
  */
 'use strict';
 
-var index = require('./index-Ct7gcRif.js');
-var helpers = require('./helpers-Cv23MFHM.js');
+var index = require('./index-GZU9YrFc.js');
+var helpers = require('./helpers-DiOgV5hw.js');
+require('./focus-visible-BIj-I3-C.js');
 
-const pickerIosCss = () => `:host{display:-ms-flexbox;display:flex;position:relative;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:100%;height:200px;direction:ltr;z-index:0}:host .picker-before,:host .picker-after{position:absolute;width:100%;-webkit-transform:translateZ(0);transform:translateZ(0);z-index:1;pointer-events:none}:host .picker-before{top:0;height:83px}:host .picker-before{inset-inline-start:0}:host .picker-after{top:116px;height:84px}:host .picker-after{inset-inline-start:0}:host .picker-highlight{border-radius:var(--highlight-border-radius, 8px);left:0;right:0;top:50%;bottom:0;-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;margin-top:0;margin-bottom:0;position:absolute;width:calc(100% - 16px);height:34px;-webkit-transform:translateY(-50%);transform:translateY(-50%);background:var(--highlight-background);z-index:-1}:host input{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;margin:0;padding:0;border:0;outline:0;clip:rect(0 0 0 0);opacity:0;overflow:hidden;-webkit-appearance:none;-moz-appearance:none}:host ::slotted(ion-picker-column:first-of-type){text-align:start}:host ::slotted(ion-picker-column:last-of-type){text-align:end}:host ::slotted(ion-picker-column:only-child){text-align:center}:host .picker-before{background:-webkit-gradient(linear, left top, left bottom, color-stop(20%, rgba(var(--fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 1)), to(rgba(var(--fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 0.8)));background:linear-gradient(to bottom, rgba(var(--fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 1) 20%, rgba(var(--fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 0.8) 100%)}:host .picker-after{background:-webkit-gradient(linear, left bottom, left top, color-stop(20%, rgba(var(--fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 1)), to(rgba(var(--fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 0.8)));background:linear-gradient(to top, rgba(var(--fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 1) 20%, rgba(var(--fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 0.8) 100%)}:host .picker-highlight{background:var(--highlight-background, var(--ion-color-step-150, var(--ion-background-color-step-150, #eeeeef)))}`;
+const ionicPickerMdCss = () => `:host{display:-ms-flexbox;display:flex;position:relative;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:100%;height:200px;direction:ltr;z-index:0}:host .picker-before,:host .picker-after{position:absolute;width:100%;-webkit-transform:translateZ(0);transform:translateZ(0);z-index:1;pointer-events:none}:host .picker-before{top:0;height:83px}:host .picker-before{inset-inline-start:0}:host .picker-after{top:116px;height:84px}:host .picker-after{inset-inline-start:0}:host .picker-highlight{border-radius:var(--highlight-border-radius, 8px);right:0;left:0;top:50%;bottom:0;-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;margin-top:0;margin-bottom:0;position:absolute;width:calc(100% - 16px);height:34px;-webkit-transform:translateY(-50%);transform:translateY(-50%);background:var(--highlight-background);z-index:-1}:host input{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;margin:0;padding:0;border:0;outline:0;opacity:0;overflow:hidden;clip:rect(0 0 0 0);-webkit-appearance:none;-moz-appearance:none}:host ::slotted(ion-picker-column:first-of-type){text-align:start}:host ::slotted(ion-picker-column:last-of-type){text-align:end}:host ::slotted(ion-picker-column:only-child){text-align:center}:host .picker-before{background:-webkit-gradient(linear, left top, left bottom, color-stop(20%, rgba(var(--fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 1)), color-stop(90%, rgba(var(--fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 0)));background:linear-gradient(to bottom, rgba(var(--fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 1) 20%, rgba(var(--fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 0) 90%)}:host .picker-after{background:-webkit-gradient(linear, left bottom, left top, color-stop(30%, rgba(var(--fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 1)), color-stop(90%, rgba(var(--fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 0)));background:linear-gradient(to top, rgba(var(--fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 1) 30%, rgba(var(--fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 0) 90%)}`;
 
-const pickerMdCss = () => `:host{display:-ms-flexbox;display:flex;position:relative;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:100%;height:200px;direction:ltr;z-index:0}:host .picker-before,:host .picker-after{position:absolute;width:100%;-webkit-transform:translateZ(0);transform:translateZ(0);z-index:1;pointer-events:none}:host .picker-before{top:0;height:83px}:host .picker-before{inset-inline-start:0}:host .picker-after{top:116px;height:84px}:host .picker-after{inset-inline-start:0}:host .picker-highlight{border-radius:var(--highlight-border-radius, 8px);left:0;right:0;top:50%;bottom:0;-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;margin-top:0;margin-bottom:0;position:absolute;width:calc(100% - 16px);height:34px;-webkit-transform:translateY(-50%);transform:translateY(-50%);background:var(--highlight-background);z-index:-1}:host input{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;margin:0;padding:0;border:0;outline:0;clip:rect(0 0 0 0);opacity:0;overflow:hidden;-webkit-appearance:none;-moz-appearance:none}:host ::slotted(ion-picker-column:first-of-type){text-align:start}:host ::slotted(ion-picker-column:last-of-type){text-align:end}:host ::slotted(ion-picker-column:only-child){text-align:center}:host .picker-before{background:-webkit-gradient(linear, left top, left bottom, color-stop(20%, rgba(var(--fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 1)), color-stop(90%, rgba(var(--fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 0)));background:linear-gradient(to bottom, rgba(var(--fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 1) 20%, rgba(var(--fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 0) 90%)}:host .picker-after{background:-webkit-gradient(linear, left bottom, left top, color-stop(30%, rgba(var(--fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 1)), color-stop(90%, rgba(var(--fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 0)));background:linear-gradient(to top, rgba(var(--fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 1) 30%, rgba(var(--fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 0) 90%)}`;
+const pickerIosCss = () => `:host{display:-ms-flexbox;display:flex;position:relative;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:100%;height:200px;direction:ltr;z-index:0}:host .picker-before,:host .picker-after{position:absolute;width:100%;-webkit-transform:translateZ(0);transform:translateZ(0);z-index:1;pointer-events:none}:host .picker-before{top:0;height:83px}:host .picker-before{inset-inline-start:0}:host .picker-after{top:116px;height:84px}:host .picker-after{inset-inline-start:0}:host .picker-highlight{border-radius:var(--highlight-border-radius, 8px);right:0;left:0;top:50%;bottom:0;-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;margin-top:0;margin-bottom:0;position:absolute;width:calc(100% - 16px);height:34px;-webkit-transform:translateY(-50%);transform:translateY(-50%);background:var(--highlight-background);z-index:-1}:host input{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;margin:0;padding:0;border:0;outline:0;opacity:0;overflow:hidden;clip:rect(0 0 0 0);-webkit-appearance:none;-moz-appearance:none}:host ::slotted(ion-picker-column:first-of-type){text-align:start}:host ::slotted(ion-picker-column:last-of-type){text-align:end}:host ::slotted(ion-picker-column:only-child){text-align:center}:host .picker-before{background:-webkit-gradient(linear, left top, left bottom, color-stop(20%, rgba(var(--fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 1)), to(rgba(var(--fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 0.8)));background:linear-gradient(to bottom, rgba(var(--fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 1) 20%, rgba(var(--fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 0.8) 100%)}:host .picker-after{background:-webkit-gradient(linear, left bottom, left top, color-stop(20%, rgba(var(--fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 1)), to(rgba(var(--fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 0.8)));background:linear-gradient(to top, rgba(var(--fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 1) 20%, rgba(var(--fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 0.8) 100%)}:host .picker-highlight{background:var(--highlight-background, var(--ion-color-step-150, var(--ion-background-color-step-150, #eeeeef)))}`;
+
+const pickerMdCss = () => `:host{display:-ms-flexbox;display:flex;position:relative;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:100%;height:200px;direction:ltr;z-index:0}:host .picker-before,:host .picker-after{position:absolute;width:100%;-webkit-transform:translateZ(0);transform:translateZ(0);z-index:1;pointer-events:none}:host .picker-before{top:0;height:83px}:host .picker-before{inset-inline-start:0}:host .picker-after{top:116px;height:84px}:host .picker-after{inset-inline-start:0}:host .picker-highlight{border-radius:var(--highlight-border-radius, 8px);right:0;left:0;top:50%;bottom:0;-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;margin-top:0;margin-bottom:0;position:absolute;width:calc(100% - 16px);height:34px;-webkit-transform:translateY(-50%);transform:translateY(-50%);background:var(--highlight-background);z-index:-1}:host input{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;margin:0;padding:0;border:0;outline:0;opacity:0;overflow:hidden;clip:rect(0 0 0 0);-webkit-appearance:none;-moz-appearance:none}:host ::slotted(ion-picker-column:first-of-type){text-align:start}:host ::slotted(ion-picker-column:last-of-type){text-align:end}:host ::slotted(ion-picker-column:only-child){text-align:center}:host .picker-before{background:-webkit-gradient(linear, left top, left bottom, color-stop(20%, rgba(var(--fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 1)), color-stop(90%, rgba(var(--fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 0)));background:linear-gradient(to bottom, rgba(var(--fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 1) 20%, rgba(var(--fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 0) 90%)}:host .picker-after{background:-webkit-gradient(linear, left bottom, left top, color-stop(30%, rgba(var(--fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 1)), color-stop(90%, rgba(var(--fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 0)));background:linear-gradient(to top, rgba(var(--fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 1) 30%, rgba(var(--fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 0) 90%)}`;
 
 const Picker = class {
     constructor(hostRef) {
@@ -457,7 +460,7 @@ const Picker = class {
         this.emitInputModeChange();
     }
     render() {
-        return (index.h(index.Host, { key: '28f81e4ed44a633178561757c5199c2c98f94b74', onPointerDown: (ev) => this.onPointerDown(ev), onClick: () => this.onClick() }, index.h("input", { key: 'abb3d1ad25ef63856af7804111175a4d50008bc0', "aria-hidden": "true", tabindex: -1, inputmode: "numeric", type: "number", onKeyDown: (ev) => {
+        return (index.h(index.Host, { key: '0e3b8112fd28191ff6af8313fee72919d9b23ee7', onPointerDown: (ev) => this.onPointerDown(ev), onClick: () => this.onClick() }, index.h("input", { key: '92e86aab71f000c35fcf5f4082116285f2e43016', "aria-hidden": "true", tabindex: -1, inputmode: "numeric", type: "number", onKeyDown: (ev) => {
                 var _a;
                 /**
                  * The "Enter" key represents
@@ -472,11 +475,12 @@ const Picker = class {
                 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() }), index.h("div", { key: '334a5abdc02e6b127c57177f626d7e4ff5526183', class: "picker-before" }), index.h("div", { key: 'ffd6271931129e88fc7c820e919d684899e420c5', class: "picker-after" }), index.h("div", { key: '78d1d95fd09e04f154ea59f24a1cece72c47ed7b', class: "picker-highlight", ref: (el) => (this.highlightEl = el) }), index.h("slot", { key: '0bd5b9f875d3c71f6cbbde2054baeb1b0a2e8cd5' })));
+            }, ref: (el) => (this.inputEl = el), onInput: () => this.onInputChange(), onBlur: () => this.exitInputMode() }), index.h("div", { key: '5fad8573cd44bee093f26cd4d7cabad836789e79', class: "picker-before" }), index.h("div", { key: 'fd26db9e86a3cafe125283eeff0da8be7ea2928e', class: "picker-after" }), index.h("div", { key: '8174b0f258f3ce00707132c674ff53d3b9fc2aee', class: "picker-highlight", ref: (el) => (this.highlightEl = el) }), index.h("slot", { key: 'a118b0ec709164758ae95fcb9e110befb574138f' })));
     }
     get el() { return index.getElement(this); }
 };
 Picker.style = {
+    ionic: ionicPickerMdCss(),
     ios: pickerIosCss(),
     md: pickerMdCss()
 };

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

@@ -3,18 +3,17 @@
  */
 'use strict';
 
-var index = require('./index-Ct7gcRif.js');
-var overlays = require('./overlays-DJVbo1cW.js');
-var frameworkDelegate = require('./framework-delegate-BtICZDHr.js');
-var helpers = require('./helpers-Cv23MFHM.js');
+var index = require('./index-GZU9YrFc.js');
+var overlays = require('./overlays-CFGbPUmE.js');
+var frameworkDelegate = require('./framework-delegate-DC5nq_NN.js');
+var helpers = require('./helpers-DiOgV5hw.js');
 var lockController = require('./lock-controller-aDB9wrEf.js');
-var ionicGlobal = require('./ionic-global-CbxQmwkf.js');
-var theme = require('./theme-CeDs6Hcv.js');
-var index$1 = require('./index-BERfRao3.js');
-var animation = require('./animation-BJq0kcy2.js');
-require('./index-DkNv4J_i.js');
-require('./hardware-back-button-iUuF_76h.js');
+var ionicGlobal = require('./ionic-global-QoUqobrQ.js');
+var theme = require('./theme-IlOsGAz7.js');
+var index$1 = require('./index-BaJ7_YbC.js');
+var animation = require('./animation-B3xfVcDO.js');
 require('./gesture-controller-dtqlP_q4.js');
+require('./focus-visible-BIj-I3-C.js');
 
 /**
  * Shared per-frame cache for safe-area insets. Avoids creating a temporary
@@ -1090,9 +1089,11 @@ 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(.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 popoverIonicCss = () => `@charset "UTF-8";:host{--background:var(--ion-background-color, #fff);--min-width:0;--min-height:0;--max-width:auto;--height:auto;--offset-x:0px;--offset-y:0px;right:0;left: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:var(--token-elevation-4, 0px 3px 12px 0px rgba(0, 0, 0, 0.12), 0px 15px 48px 0px rgba(0, 0, 0, 0.18));--backdrop-opacity:0.3}.popover-content{border-radius:var(--token-border-radius-400, var(--token-scale-400, 16px));-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}`;
 
-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 popoverIosCss = () => `@charset "UTF-8";:host{--background:var(--ion-background-color, #fff);--min-width:0;--min-height:0;--max-width:auto;--height:auto;--offset-x:0px;--offset-y:0px;right:0;left: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 = () => `@charset "UTF-8";:host{--background:var(--ion-background-color, #fff);--min-width:0;--min-height:0;--max-width:auto;--height:auto;--offset-x:0px;--offset-y:0px;right:0;left: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) {
@@ -1132,7 +1133,7 @@ const Popover = class {
         this.showBackdrop = true;
         /**
          * If `true`, the popover will be translucent.
-         * Only applies when the mode is `"ios"` and the device supports
+         * Only applies when the theme is `"ios"` and the device supports
          * [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).
          */
         this.translucent = false;
@@ -1180,7 +1181,7 @@ const Popover = class {
         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.
+         * `reference` on `"ios"` theme.
          */
         this.arrow = true;
         /**
@@ -1306,10 +1307,6 @@ const Popover = class {
             this.headerResizeObserver.disconnect();
             this.headerResizeObserver = undefined;
         }
-        // Clean up aria-hidden if removed without dismiss() being called
-        if (this.presented) {
-            overlays.cleanupRootFocusTrapAccessibility();
-        }
     }
     componentWillLoad() {
         var _a, _b;
@@ -1317,7 +1314,7 @@ const Popover = class {
         const popoverId = (_b = (_a = this.htmlAttributes) === null || _a === void 0 ? void 0 : _a.id) !== null && _b !== void 0 ? _b : overlays.setOverlayId(el);
         this.parentPopover = el.closest(`ion-popover:not(#${popoverId})`);
         if (this.alignment === undefined) {
-            this.alignment = ionicGlobal.getIonMode(this) === 'ios' ? 'center' : 'start';
+            this.alignment = ionicGlobal.getIonTheme(this) === 'ios' ? 'center' : 'start';
         }
     }
     componentDidLoad() {
@@ -1439,7 +1436,7 @@ const Popover = class {
         else if (!this.keepContentsMounted) {
             await index$1.waitForMount();
         }
-        await overlays.present(this, 'popoverEnter', iosEnterAnimation, mdEnterAnimation, {
+        await overlays.present(this, 'popoverEnter', iosEnterAnimation, mdEnterAnimation, undefined, {
             event: event || this.event,
             size: this.size,
             trigger: this.triggerEl,
@@ -1544,13 +1541,13 @@ const Popover = class {
         return overlays.eventMethod(this.el, 'ionPopoverWillDismiss');
     }
     render() {
-        const mode = ionicGlobal.getIonMode(this);
+        const theme$1 = ionicGlobal.getIonTheme(this);
         const { onLifecycle, parentPopover, dismissOnSelect, side, arrow, htmlAttributes, focusTrap } = this;
         const desktop = ionicGlobal.isPlatform('desktop');
         const enableArrow = arrow && !parentPopover;
-        return (index.h(index.Host, Object.assign({ key: 'd7f3aa2c2fa93a93585e3eda9e4a6d0daaa541be', "aria-modal": "true", "no-router": true, tabindex: "-1" }, htmlAttributes, { style: {
+        return (index.h(index.Host, Object.assign({ key: '3319e6ea7524a30478985c014634403aceedab6f', "aria-modal": "true", "no-router": true, tabindex: "-1" }, htmlAttributes, { style: {
                 zIndex: `${20000 + this.overlayIndex}`,
-            }, class: Object.assign(Object.assign({}, theme.getClassMap(this.cssClass)), { [mode]: true, 'popover-translucent': this.translucent, 'overlay-hidden': true, 'popover-desktop': desktop, [`popover-side-${side}`]: true, [overlays.FOCUS_TRAP_DISABLE_CLASS]: focusTrap === false, 'popover-nested': !!parentPopover }), onIonPopoverDidPresent: onLifecycle, onIonPopoverWillPresent: onLifecycle, onIonPopoverWillDismiss: onLifecycle, onIonPopoverDidDismiss: onLifecycle, onIonBackdropTap: this.onBackdropTap }), !parentPopover && index.h("ion-backdrop", { key: 'b87be2ef14219997b9c47dcbaf904eb770d0e057', tappable: this.backdropDismiss, visible: this.showBackdrop, part: "backdrop" }), index.h("div", { key: 'e6243572faf1b871ae2b34923410b2a6638469f0', class: "popover-wrapper ion-overlay-wrapper", onClick: dismissOnSelect ? () => this.dismiss() : undefined }, enableArrow && index.h("div", { key: '3d4938c9d0764a644398e0e7a4361106da1bd926', class: "popover-arrow", part: "arrow" }), index.h("div", { key: '24ad6d777828aad2881d56595693e6022fc9cb8e', class: "popover-content", part: "content" }, index.h("slot", { key: '79f83df74a5c5e3dd7650f15c1aa50795b90a345' })))));
+            }, class: Object.assign(Object.assign({}, theme.getClassMap(this.cssClass)), { [theme$1]: true, 'popover-translucent': this.translucent, 'overlay-hidden': true, 'popover-desktop': desktop, [`popover-side-${side}`]: true, [overlays.FOCUS_TRAP_DISABLE_CLASS]: focusTrap === false, 'popover-nested': !!parentPopover }), onIonPopoverDidPresent: onLifecycle, onIonPopoverWillPresent: onLifecycle, onIonPopoverWillDismiss: onLifecycle, onIonPopoverDidDismiss: onLifecycle, onIonBackdropTap: this.onBackdropTap }), !parentPopover && index.h("ion-backdrop", { key: '45265b1f8e5e6e822b3c8d4992039975c472b10b', tappable: this.backdropDismiss, visible: this.showBackdrop, part: "backdrop" }), index.h("div", { key: '8707fb5c5b9523fd786c4e4d02d41dfb386be187', class: "popover-wrapper ion-overlay-wrapper", onClick: dismissOnSelect ? () => this.dismiss() : undefined }, enableArrow && index.h("div", { key: '17bd682e56939ba10ab4b2ab3c9e916087a7e19a', class: "popover-arrow", part: "arrow" }), index.h("div", { key: '02f1bd119d2ffecd2f2541969111fc6e156db9d3', class: "popover-content", part: "content" }, index.h("slot", { key: 'dec29181eee87f28f731d6a0ba1ef3c81867d527' })))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
@@ -1572,6 +1569,7 @@ const LIFECYCLE_MAP = {
     ionPopoverDidDismiss: 'ionViewDidLeave',
 };
 Popover.style = {
+    ionic: popoverIonicCss(),
     ios: popoverIosCss(),
     md: popoverMdCss()
 };