@ionic/core 7.7.2-dev.11707932366.16baf005 → 7.7.2-dev.11707941206.120570b8

package/dist/esm/{ion-picker-column.entry.js → ion-picker-column-internal.entry.js}

@@ -2,17 +2,20 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { r as registerInstance, d as createEvent, h, H as Host, f as getElement } from './index-73881b51.js';
-import { d as doc } from './index-a5d50daf.js';
 import { r as raf, g as getElementRoot } from './helpers-c0b9ca37.js';
 import { a as hapticSelectionStart, b as hapticSelectionChanged, h as hapticSelectionEnd } from './haptic-554688a5.js';
 import { a as isPlatform, b as getIonMode } from './ionic-global-778b7863.js';
 import { c as createColorClasses } from './theme-01f3f29c.js';
 import './capacitor-59395cbd.js';
+import './index-a5d50daf.js';
 
-const pickerColumnCss = ":host{display:-ms-flexbox;display:flex;-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}.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 IonPickerColumnStyle0 = pickerColumnCss;
+const pickerColumnInternalIosCss = ":host{-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px;padding-top:0px;padding-bottom:0px;height:200px;outline:none;font-size:22px;-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;text-align:center}:host::-webkit-scrollbar{display:none}:host .picker-item{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;cursor:pointer;overflow:hidden;scroll-snap-align:center}:host .picker-item-empty,:host .picker-item[disabled]{cursor:default}:host .picker-item-empty,:host(:not([disabled])) .picker-item[disabled]{scroll-snap-align:none}:host([disabled]){overflow-y:hidden}:host .picker-item[disabled]{opacity:0.4}:host(.picker-column-active) .picker-item.picker-item-active{color:var(--ion-color-base)}@media (any-hover: hover){:host(:focus){outline:none;background:rgba(var(--ion-color-base-rgb), 0.2)}}";
+const IonPickerColumnInternalIosStyle0 = pickerColumnInternalIosCss;
 
-const PickerColumn = class {
+const pickerColumnInternalMdCss = ":host{-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px;padding-top:0px;padding-bottom:0px;height:200px;outline:none;font-size:22px;-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;text-align:center}:host::-webkit-scrollbar{display:none}:host .picker-item{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;cursor:pointer;overflow:hidden;scroll-snap-align:center}:host .picker-item-empty,:host .picker-item[disabled]{cursor:default}:host .picker-item-empty,:host(:not([disabled])) .picker-item[disabled]{scroll-snap-align:none}:host([disabled]){overflow-y:hidden}:host .picker-item[disabled]{opacity:0.4}:host(.picker-column-active) .picker-item.picker-item-active{color:var(--ion-color-base)}@media (any-hover: hover){:host(:focus){outline:none;background:rgba(var(--ion-color-base-rgb), 0.2)}}:host .picker-item-active{color:var(--ion-color-base)}";
+const IonPickerColumnInternalMdStyle0 = pickerColumnInternalMdCss;
+
+const PickerColumnInternal = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.ionChange = createEvent(this, "ionChange", 7);
@@ -20,11 +23,11 @@ const PickerColumn = class {
         this.isColumnVisible = false;
         this.canExitInputMode = true;
         this.centerPickerItemInView = (target, smooth = true, canExitInputMode = true) => {
-            const { isColumnVisible, scrollEl } = this;
-            if (isColumnVisible && scrollEl) {
+            const { el, isColumnVisible } = this;
+            if (isColumnVisible) {
                 // (Vertical offset from parent) - (three empty picker rows) + (half the height of the target to ensure the scroll triggers)
                 const top = target.offsetTop - 3 * target.clientHeight + target.clientHeight / 2;
-                if (scrollEl.scrollTop !== top) {
+                if (el.scrollTop !== top) {
                     /**
                      * Setting this flag prevents input
                      * mode from exiting in the picker column's
@@ -33,7 +36,7 @@ const PickerColumn = class {
                      * of these can cause a scroll to occur.
                      */
                     this.canExitInputMode = canExitInputMode;
-                    scrollEl.scroll({
+                    el.scroll({
                         top,
                         left: 0,
                         behavior: smooth ? 'smooth' : undefined,
@@ -44,9 +47,11 @@ const PickerColumn = class {
         this.setPickerItemActiveState = (item, isActive) => {
             if (isActive) {
                 item.classList.add(PICKER_ITEM_ACTIVE_CLASS);
+                item.part.add(PICKER_ITEM_ACTIVE_PART);
             }
             else {
                 item.classList.remove(PICKER_ITEM_ACTIVE_CLASS);
+                item.part.remove(PICKER_ITEM_ACTIVE_PART);
             }
         };
         /**
@@ -100,13 +105,11 @@ const PickerColumn = class {
              * be disabled on Android.
              */
             const enableHaptics = isPlatform('ios');
-            const { el, scrollEl } = this;
+            const { el } = this;
             let timeout;
             let activeEl = this.activeItem;
             const scrollCallback = () => {
                 raf(() => {
-                    if (!scrollEl)
-                        return;
                     if (timeout) {
                         clearTimeout(timeout);
                         timeout = undefined;
@@ -119,54 +122,21 @@ const PickerColumn = class {
                      * Select item in the center of the column
                      * which is the month/year that we want to select
                      */
-                    const bbox = scrollEl.getBoundingClientRect();
+                    const bbox = el.getBoundingClientRect();
                     const centerX = bbox.x + bbox.width / 2;
                     const centerY = bbox.y + bbox.height / 2;
-                    /**
-                     * elementFromPoint returns the top-most element.
-                     * This means that if an ion-backdrop is overlaying the
-                     * picker then the appropriate picker column option will
-                     * not be selected. To account for this, we use elementsFromPoint
-                     * and use an Array.find to find the appropriate column option
-                     * at that point.
-                     *
-                     * Additionally, the picker column could be used in the
-                     * Shadow DOM (i.e. in ion-datetime) so we need to make
-                     * sure we are choosing the correct host otherwise
-                     * the elements returns by elementsFromPoint will be
-                     * retargeted. To account for this, we check to see
-                     * if the picker column has a parent shadow root. If
-                     * so, we use that shadow root when doing elementsFromPoint.
-                     * Otherwise, we just use the document.
-                     */
-                    const rootNode = el.getRootNode();
-                    const hasParentShadow = rootNode instanceof ShadowRoot;
-                    const referenceNode = hasParentShadow ? rootNode : doc;
-                    /**
-                     * If the reference node is undefined
-                     * then it's likely that doc is undefined
-                     * due to being in an SSR environment.
-                     */
-                    if (referenceNode === undefined) {
-                        return;
-                    }
-                    const elementsAtPoint = referenceNode.elementsFromPoint(centerX, centerY);
-                    /**
-                     * elementsFromPoint can returns multiple elements
-                     * so find the relevant picker column option if one exists.
-                     */
-                    const newActiveElement = elementsAtPoint.find((el) => el.tagName === 'ION-PICKER-COLUMN-OPTION');
-                    if (activeEl !== undefined) {
+                    const activeElement = el.shadowRoot.elementFromPoint(centerX, centerY);
+                    if (activeEl !== null) {
                         this.setPickerItemActiveState(activeEl, false);
                     }
-                    if (newActiveElement === undefined || newActiveElement.disabled) {
+                    if (activeElement === null || activeElement.disabled) {
                         return;
                     }
                     /**
                      * If we are selecting a new value,
                      * we need to run haptics again.
                      */
-                    if (newActiveElement !== activeEl) {
+                    if (activeElement !== activeEl) {
                         enableHaptics && hapticSelectionChanged();
                         if (this.canExitInputMode) {
                             /**
@@ -183,8 +153,8 @@ const PickerColumn = class {
                             this.exitInputMode();
                         }
                     }
-                    activeEl = newActiveElement;
-                    this.setPickerItemActiveState(newActiveElement, true);
+                    activeEl = activeElement;
+                    this.setPickerItemActiveState(activeElement, true);
                     timeout = setTimeout(() => {
                         this.isScrolling = false;
                         enableHaptics && hapticSelectionEnd();
@@ -206,7 +176,20 @@ const PickerColumn = class {
                          * case, we should exit input mode.
                          */
                         this.canExitInputMode = true;
-                        this.setValue(newActiveElement.value);
+                        const dataIndex = activeElement.getAttribute('data-index');
+                        /**
+                         * If no value it is
+                         * possible we hit one of the
+                         * empty padding columns.
+                         */
+                        if (dataIndex === null) {
+                            return;
+                        }
+                        const index = parseInt(dataIndex, 10);
+                        const selectedItem = this.items[index];
+                        if (selectedItem.value !== this.value) {
+                            this.setValue(selectedItem.value);
+                        }
                     }, 250);
                 });
             };
@@ -215,11 +198,9 @@ const PickerColumn = class {
              * does not fire when component is initially shown.
              */
             raf(() => {
-                if (!scrollEl)
-                    return;
-                scrollEl.addEventListener('scroll', scrollCallback);
+                el.addEventListener('scroll', scrollCallback);
                 this.destroyScrollListener = () => {
-                    scrollEl.removeEventListener('scroll', scrollCallback);
+                    el.removeEventListener('scroll', scrollCallback);
                 };
             });
         };
@@ -247,6 +228,7 @@ const PickerColumn = class {
         };
         this.isActive = false;
         this.disabled = false;
+        this.items = [];
         this.value = undefined;
         this.color = 'primary';
         this.numericInput = false;
@@ -257,7 +239,7 @@ const PickerColumn = class {
              * Only scroll the active item into view when the picker column
              * is actively visible to the user.
              */
-            this.scrollActiveItemIntoView(true);
+            this.scrollActiveItemIntoView();
         }
     }
     /**
@@ -295,33 +277,36 @@ const PickerColumn = class {
             }
         };
         new IntersectionObserver(visibleCallback, { threshold: 0.001 }).observe(this.el);
-        const parentEl = (this.parentEl = this.el.closest('ion-picker'));
+        const parentEl = (this.parentEl = this.el.closest('ion-picker-internal'));
         if (parentEl !== null) {
             // TODO(FW-2832): type
             parentEl.addEventListener('ionInputModeChange', (ev) => this.inputModeChange(ev));
         }
     }
     componentDidRender() {
-        const { el, activeItem, isColumnVisible, value } = this;
-        if (isColumnVisible && !activeItem) {
-            const firstOption = el.querySelector('ion-picker-column-option');
-            /**
-             * If the picker column does not have an active item and the current value
-             * does not match the first item in the picker column, that means
-             * the value is out of bounds. In this case, we assign the value to the
-             * first item to match the scroll position of the column.
-             *
-             */
-            if (firstOption !== null && firstOption.value !== value) {
-                this.setValue(firstOption.value);
+        var _a;
+        const { activeItem, items, isColumnVisible, value } = this;
+        if (isColumnVisible) {
+            if (activeItem) {
+                this.scrollActiveItemIntoView();
+            }
+            else if (((_a = items[0]) === null || _a === void 0 ? void 0 : _a.value) !== value) {
+                /**
+                 * If the picker column does not have an active item and the current value
+                 * does not match the first item in the picker column, that means
+                 * the value is out of bounds. In this case, we assign the value to the
+                 * first item to match the scroll position of the column.
+                 *
+                 */
+                this.setValue(items[0].value);
             }
         }
     }
     /** @internal  */
-    async scrollActiveItemIntoView(smooth = false) {
+    async scrollActiveItemIntoView() {
         const activeEl = this.activeItem;
         if (activeEl) {
-            this.centerPickerItemInView(activeEl, smooth, false);
+            this.centerPickerItemInView(activeEl, false, false);
         }
     }
     /**
@@ -332,53 +317,52 @@ const PickerColumn = class {
      * @internal
      */
     async setValue(value) {
-        if (this.disabled === true || this.value === value) {
-            return;
-        }
+        const { items } = this;
         this.value = value;
-        this.ionChange.emit({ value });
-    }
-    /**
-     * Sets focus on the scrollable container within the picker column.
-     * Use this method instead of the global `pickerColumn.focus()`.
-     */
-    async setFocus() {
-        if (this.scrollEl) {
-            this.scrollEl.focus();
+        const findItem = items.find((item) => item.value === value && item.disabled !== true);
+        if (findItem) {
+            this.ionChange.emit(findItem);
         }
     }
     get activeItem() {
-        const { value } = this;
-        const options = Array.from(this.el.querySelectorAll('ion-picker-column-option'));
-        return options.find((option) => {
-            /**
-             * If the whole picker column is disabled, the current value should appear active
-             * If the current value item is specifically disabled, it should not appear active
-             */
-            if (!this.disabled && option.disabled) {
-                return false;
-            }
-            return option.value === value;
-        });
+        // If the whole picker column is disabled, the current value should appear active
+        // If the current value item is specifically disabled, it should not appear active
+        const selector = `.picker-item[data-value="${this.value}"]${this.disabled ? '' : ':not([disabled])'}`;
+        return getElementRoot(this.el).querySelector(selector);
     }
     render() {
-        const { color, disabled, isActive, numericInput } = this;
+        const { items, color, disabled: pickerDisabled, isActive, numericInput } = this;
         const mode = getIonMode(this);
-        return (h(Host, { key: '4803f7215ee2272e74d76b562553098dc4e2f0bc', class: createColorClasses(color, {
+        /**
+         * exportparts is needed so ion-datetime can expose the parts
+         * from two layers of shadow nesting. If this causes problems,
+         * the attribute can be moved to datetime.tsx and set on every
+         * instance of ion-picker-column-internal there instead.
+         */
+        return (h(Host, { key: 'd0e3818aa4ab06aefd988d1b42ae754244727b8f', exportparts: `${PICKER_ITEM_PART}, ${PICKER_ITEM_ACTIVE_PART}`, disabled: pickerDisabled, tabindex: pickerDisabled ? null : 0, class: createColorClasses(color, {
                 [mode]: true,
                 ['picker-column-active']: isActive,
                 ['picker-column-numeric-input']: numericInput,
-                ['picker-column-disabled']: disabled,
-            }) }, h("slot", { key: 'f486e4903f7818021c8d02e3251300ef0bd64e7f', name: "prefix" }), h("div", { key: '3f0f2c4e77b1bd55b425235fa428c95c793d65ba', class: "picker-opts", tabindex: disabled ? undefined : 0, ref: (el) => {
-                this.scrollEl = el;
-            } }, h("div", { key: '84a373222f1e2084312de67781bdf72f6b40a9e9', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: '948311d8ea52ff1ead1e52c27a2d959164cb9b67', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: '7cf18267fda32b762bf20f7213810bc800136a4f', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("slot", { key: 'c068963fd65ea1eb70e2fc3dc8125c6b4deff68d' }), h("div", { key: '63442e50269c3266c907d525e66782c8e753af60', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: '4f18258bd9f1822725420208491315b970d19aff', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: '5d1d3e37d88872284a756ab63078943f732d2293', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0")), h("slot", { key: '7c68b8237cc1a3954d174df34aa3ab2797466a38', name: "suffix" })));
+            }) }, h("div", { key: 'ec3b16415db5f64e3fab37fda023560ebcdc9423', class: "picker-item picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: '40c78c9a1277807572d73e23048c2730cab88f5a', class: "picker-item picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: 'c51fa817f6999356cf3568a46098e954936b45d5', class: "picker-item picker-item-empty", "aria-hidden": "true" }, "\u00A0"), items.map((item, index) => {
+            const isItemDisabled = pickerDisabled || item.disabled || false;
+            return (h("button", { tabindex: "-1", class: {
+                    'picker-item': true,
+                }, "data-value": item.value, "data-index": index, onClick: (ev) => {
+                    this.centerPickerItemInView(ev.target, true);
+                }, disabled: isItemDisabled, part: PICKER_ITEM_PART }, item.text));
+        }), h("div", { key: '80a7461dfe571f46466219b05007b021711aed32', class: "picker-item picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: 'fed82263295f58c51e2b753d0c06c7d71872b8a7', class: "picker-item picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: 'e805dff4122cc4e5fb4d7dcb96054fee8ad3bd07', class: "picker-item picker-item-empty", "aria-hidden": "true" }, "\u00A0")));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
         "value": ["valueChange"]
     }; }
 };
-const PICKER_ITEM_ACTIVE_CLASS = 'option-active';
-PickerColumn.style = IonPickerColumnStyle0;
+const PICKER_ITEM_ACTIVE_CLASS = 'picker-item-active';
+const PICKER_ITEM_PART = 'wheel-item';
+const PICKER_ITEM_ACTIVE_PART = 'active';
+PickerColumnInternal.style = {
+    ios: IonPickerColumnInternalIosStyle0,
+    md: IonPickerColumnInternalMdStyle0
+};
 
-export { PickerColumn as ion_picker_column };
+export { PickerColumnInternal as ion_picker_column_internal };

package/dist/esm/{ion-picker.entry.js → ion-picker-internal.entry.js}

@@ -4,13 +4,13 @@
 import { r as registerInstance, d as createEvent, h, H as Host, f as getElement } from './index-73881b51.js';
 import { g as getElementRoot } from './helpers-c0b9ca37.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 IonPickerIosStyle0 = pickerIosCss;
+const pickerInternalIosCss = ":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}@supports (inset-inline-start: 0){:host .picker-before{inset-inline-start:0}}@supports not (inset-inline-start: 0){:host .picker-before{left:0}:host-context([dir=rtl]) .picker-before{left:unset;right:unset;right:0}@supports selector(:dir(rtl)){:host(:dir(rtl)) .picker-before{left:unset;right:unset;right:0}}}:host .picker-after{top:116px;height:84px}@supports (inset-inline-start: 0){:host .picker-after{inset-inline-start:0}}@supports not (inset-inline-start: 0){:host .picker-after{left:0}:host-context([dir=rtl]) .picker-after{left:unset;right:unset;right:0}@supports selector(:dir(rtl)){:host(:dir(rtl)) .picker-after{left:unset;right:unset;right:0}}}:host .picker-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(--wheel-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-internal:first-of-type){text-align:start}:host ::slotted(ion-picker-column-internal:last-of-type){text-align:end}:host ::slotted(ion-picker-column-internal:only-child){text-align:center}:host .picker-before{background:-webkit-gradient(linear, left top, left bottom, color-stop(20%, rgba(var(--wheel-fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 1)), to(rgba(var(--wheel-fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 0.8)));background:linear-gradient(to bottom, rgba(var(--wheel-fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 1) 20%, rgba(var(--wheel-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(--wheel-fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 1)), to(rgba(var(--wheel-fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 0.8)));background:linear-gradient(to top, rgba(var(--wheel-fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 1) 20%, rgba(var(--wheel-fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 0.8) 100%)}:host .picker-highlight{background:var(--wheel-highlight-background, var(--ion-color-step-150, #eeeeef))}";
+const IonPickerInternalIosStyle0 = pickerInternalIosCss;
 
-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 IonPickerMdStyle0 = pickerMdCss;
+const pickerInternalMdCss = ":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}@supports (inset-inline-start: 0){:host .picker-before{inset-inline-start:0}}@supports not (inset-inline-start: 0){:host .picker-before{left:0}:host-context([dir=rtl]) .picker-before{left:unset;right:unset;right:0}@supports selector(:dir(rtl)){:host(:dir(rtl)) .picker-before{left:unset;right:unset;right:0}}}:host .picker-after{top:116px;height:84px}@supports (inset-inline-start: 0){:host .picker-after{inset-inline-start:0}}@supports not (inset-inline-start: 0){:host .picker-after{left:0}:host-context([dir=rtl]) .picker-after{left:unset;right:unset;right:0}@supports selector(:dir(rtl)){:host(:dir(rtl)) .picker-after{left:unset;right:unset;right:0}}}:host .picker-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(--wheel-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-internal:first-of-type){text-align:start}:host ::slotted(ion-picker-column-internal:last-of-type){text-align:end}:host ::slotted(ion-picker-column-internal:only-child){text-align:center}:host .picker-before{background:-webkit-gradient(linear, left top, left bottom, color-stop(20%, rgba(var(--wheel-fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 1)), color-stop(90%, rgba(var(--wheel-fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 0)));background:linear-gradient(to bottom, rgba(var(--wheel-fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 1) 20%, rgba(var(--wheel-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(--wheel-fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 1)), color-stop(90%, rgba(var(--wheel-fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 0)));background:linear-gradient(to top, rgba(var(--wheel-fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 1) 30%, rgba(var(--wheel-fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 0) 90%)}";
+const IonPickerInternalMdStyle0 = pickerInternalMdCss;
 
-const Picker = class {
+const PickerInternal = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.ionInputModeChange = createEvent(this, "ionInputModeChange", 7);
@@ -42,7 +42,7 @@ const Picker = class {
         this.onFocusOut = (ev) => {
             // TODO(FW-2832): type
             const { relatedTarget } = ev;
-            if (!relatedTarget || (relatedTarget.tagName !== 'ION-PICKER-COLUMN' && relatedTarget !== this.inputEl)) {
+            if (!relatedTarget || (relatedTarget.tagName !== 'ION-PICKER-COLUMN-INTERNAL' && relatedTarget !== this.inputEl)) {
                 this.exitInputMode();
             }
         };
@@ -60,7 +60,7 @@ const Picker = class {
              * make sure that this function only ever runs when
              * focusing a picker column.
              */
-            if (target.tagName !== 'ION-PICKER-COLUMN') {
+            if (target.tagName !== 'ION-PICKER-COLUMN-INTERNAL') {
                 return;
             }
             /**
@@ -127,7 +127,7 @@ const Picker = class {
                      * since we just tapped the highlight and
                      * not a column.
                      */
-                    if (ev.target.tagName === 'ION-PICKER-COLUMN') {
+                    if (ev.target.tagName === 'ION-PICKER-COLUMN-INTERNAL') {
                         /**
                          * If user taps 2 different columns
                          * then we should just switch to input mode
@@ -161,7 +161,7 @@ const Picker = class {
                      * If there is only 1 numeric input column
                      * then we should skip multi column input.
                      */
-                    const columns = el.querySelectorAll('ion-picker-column.picker-column-numeric-input');
+                    const columns = el.querySelectorAll('ion-picker-column-internal.picker-column-numeric-input');
                     const columnEl = columns.length === 1 ? ev.target : undefined;
                     this.actionOnClick = () => {
                         this.enterInputMode(columnEl);
@@ -195,7 +195,7 @@ const Picker = class {
              * Only active input mode if there is at
              * least one column that accepts numeric input.
              */
-            const hasInputColumn = el.querySelector('ion-picker-column.picker-column-numeric-input');
+            const hasInputColumn = el.querySelector('ion-picker-column-internal.picker-column-numeric-input');
             if (!hasInputColumn) {
                 return;
             }
@@ -249,7 +249,7 @@ const Picker = class {
             if (!inputEl || !inputModeColumn) {
                 return;
             }
-            const options = Array.from(inputModeColumn.querySelectorAll('ion-picker-column-option')).filter((el) => el.disabled !== true);
+            const values = inputModeColumn.items.filter((item) => item.disabled !== true);
             /**
              * If users pause for a bit, the search
              * value should be reset similar to how a
@@ -289,13 +289,8 @@ const Picker = class {
              * 0+(?=[1-9]) --> Match 1 or more zeros that are followed by 1-9
              * 0+(?=0$) --> Match 1 or more zeros that must be followed by one 0 and end.
              */
-            const findItemFromCompleteValue = options.find(({ textContent }) => {
-                /**
-                 * Keyboard entry is currently only used inside of Datetime
-                 * where we guarantee textContent is set.
-                 * If we end up exposing this feature publicly we should revisit this assumption.
-                 */
-                const parsedText = textContent.replace(/^0+(?=[1-9])|0+(?=0$)/, '');
+            const findItemFromCompleteValue = values.find(({ text }) => {
+                const parsedText = text.replace(/^0+(?=[1-9])|0+(?=0$)/, '');
                 return parsedText === inputEl.value;
             });
             if (findItemFromCompleteValue) {
@@ -320,11 +315,9 @@ const Picker = class {
          */
         this.searchColumn = (colEl, value, zeroBehavior = 'start') => {
             const behavior = zeroBehavior === 'start' ? /^0+/ : /0$/;
-            const option = Array.from(colEl.querySelectorAll('ion-picker-column-option')).find((el) => {
-                return el.disabled !== true && el.textContent.replace(behavior, '') === value;
-            });
-            if (option) {
-                colEl.setValue(option.value);
+            const item = colEl.items.find(({ text, disabled }) => disabled !== true && text.replace(behavior, '') === value);
+            if (item) {
+                colEl.setValue(item.value);
             }
         };
         this.selectMultiColumn = () => {
@@ -332,7 +325,7 @@ const Picker = class {
             if (!inputEl) {
                 return;
             }
-            const numericPickers = Array.from(el.querySelectorAll('ion-picker-column')).filter((col) => col.numericInput);
+            const numericPickers = Array.from(el.querySelectorAll('ion-picker-column-internal')).filter((col) => col.numericInput);
             const firstColumn = numericPickers[0];
             const lastColumn = numericPickers[1];
             let value = inputEl.value;
@@ -480,7 +473,7 @@ const Picker = class {
         this.emitInputModeChange();
     }
     render() {
-        return (h(Host, { key: '69a87b004f01d3c85818c24550d71ab8b1217574', onPointerDown: (ev) => this.onPointerDown(ev), onClick: () => this.onClick() }, h("input", { key: '42f208ad6693b223150d175855a4e3a940fcbf8a', "aria-hidden": "true", tabindex: -1, inputmode: "numeric", type: "number", onKeyDown: (ev) => {
+        return (h(Host, { key: 'f6b301345583f5ccfc31cce536176af7aeefd193', onPointerDown: (ev) => this.onPointerDown(ev), onClick: () => this.onClick() }, h("input", { key: 'e57fd191d49cc500b719d5b9ad35054d55e96c43', "aria-hidden": "true", tabindex: -1, inputmode: "numeric", type: "number", onKeyDown: (ev) => {
                 var _a;
                 /**
                  * The "Enter" key represents
@@ -495,13 +488,13 @@ 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() }), h("div", { key: 'c3a20925dae51059cdbce7c3aa78789591de36e9', class: "picker-before" }), h("div", { key: '0a949c776a3c5d83feb7eca32ec85f6e26aab1b8', class: "picker-after" }), h("div", { key: '80e96a86a89bc223faf65badf66a56c971c846aa', class: "picker-highlight", ref: (el) => (this.highlightEl = el) }), h("slot", { key: '5110775b45ddf3ad8cce397b910063fdea173409' })));
+            }, ref: (el) => (this.inputEl = el), onInput: () => this.onInputChange(), onBlur: () => this.exitInputMode() }), h("div", { key: '3360e7d913f87293844928e430acde69d399f68e', class: "picker-before" }), h("div", { key: '4db89e681458d4eec5d60ff47d3e0ba9fd116682', class: "picker-after" }), h("div", { key: 'a21b20d77dac8141623995b5a53f416d3d9fc1ef', class: "picker-highlight", ref: (el) => (this.highlightEl = el) }), h("slot", { key: '86c7d926523b615b4769bd1a4e9713b351089369' })));
     }
     get el() { return getElement(this); }
 };
-Picker.style = {
-    ios: IonPickerIosStyle0,
-    md: IonPickerMdStyle0
+PickerInternal.style = {
+    ios: IonPickerInternalIosStyle0,
+    md: IonPickerInternalMdStyle0
 };
 
-export { Picker as ion_picker };
+export { PickerInternal as ion_picker_internal };

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

@@ -6,14 +6,13 @@ import { C as CoreDelegate, a as attachComponent, d as detachComponent } from '.
 import { r as raf, g as getElementRoot, a as addEventListener, m as hasLazyBuild } from './helpers-c0b9ca37.js';
 import { c as createLockController } from './lock-controller-316928be.js';
 import { p as printIonWarning } from './index-9b0d46f4.js';
-import { B as BACKDROP, j as prepareOverlay, k as setOverlayId, f as present, n as focusFirstDescendant, g as dismiss, h as eventMethod } from './overlays-2d8629c6.js';
+import { B as BACKDROP, j as prepareOverlay, k as setOverlayId, f as present, n as focusFirstDescendant, g as dismiss, h as eventMethod } from './overlays-33ae3ea0.js';
 import { b as getIonMode, a as isPlatform } from './ionic-global-778b7863.js';
 import { g as getClassMap } from './theme-01f3f29c.js';
 import { e as deepReady, w as waitForMount } from './index-4b98143d.js';
 import { c as createAnimation } from './animation-60dbdd13.js';
 import './index-a5d50daf.js';
 import './hardware-back-button-f42b9c80.js';
-import './gesture-controller-314a54f6.js';
 
 /**
  * Returns the dimensions of the popover
@@ -967,7 +966,7 @@ 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;overflow:hidden}: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}.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;overflow:hidden}: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, #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}@supports (inset-inline-start: 0){.popover-arrow::after{inset-inline-start:3px}}@supports not (inset-inline-start: 0){.popover-arrow::after{left:3px}:host-context([dir=rtl]) .popover-arrow::after{left:unset;right:unset;right:3px}[dir=rtl] .popover-arrow::after{left:unset;right:unset;right:3px}@supports selector(:dir(rtl)){.popover-arrow::after:dir(rtl){left:unset;right:unset;right: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 IonPopoverIosStyle0 = popoverIosCss;
 
 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;overflow:hidden}: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}";
@@ -1288,9 +1287,9 @@ const Popover = class {
         const { onLifecycle, parentPopover, dismissOnSelect, side, arrow, htmlAttributes } = this;
         const desktop = isPlatform('desktop');
         const enableArrow = arrow && !parentPopover;
-        return (h(Host, Object.assign({ key: '5c65659c22a8190ac3f7488fe97b8fe3545bb32a', "aria-modal": "true", "no-router": true, tabindex: "-1" }, htmlAttributes, { style: {
+        return (h(Host, Object.assign({ key: 'f335ae001173483e6a973b2084f8a7b6b895ae5d', "aria-modal": "true", "no-router": true, tabindex: "-1" }, htmlAttributes, { style: {
                 zIndex: `${20000 + this.overlayIndex}`,
-            }, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [mode]: true, 'popover-translucent': this.translucent, 'overlay-hidden': true, 'popover-desktop': desktop, [`popover-side-${side}`]: true, 'popover-nested': !!parentPopover }), onIonPopoverDidPresent: onLifecycle, onIonPopoverWillPresent: onLifecycle, onIonPopoverWillDismiss: onLifecycle, onIonPopoverDidDismiss: onLifecycle, onIonBackdropTap: this.onBackdropTap }), !parentPopover && h("ion-backdrop", { tappable: this.backdropDismiss, visible: this.showBackdrop, part: "backdrop" }), h("div", { key: '6055fc5309dadb56d6c17f0a1cb19631e6e5731e', class: "popover-wrapper ion-overlay-wrapper", onClick: dismissOnSelect ? () => this.dismiss() : undefined }, enableArrow && h("div", { class: "popover-arrow", part: "arrow" }), h("div", { key: '71f67c60fee7a29c2883c0350f19493793527be9', class: "popover-content", part: "content" }, h("slot", { key: '8fdf91d4c5ae7db8be34bfd03f703b613c73d64f' })))));
+            }, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [mode]: true, 'popover-translucent': this.translucent, 'overlay-hidden': true, 'popover-desktop': desktop, [`popover-side-${side}`]: true, 'popover-nested': !!parentPopover }), onIonPopoverDidPresent: onLifecycle, onIonPopoverWillPresent: onLifecycle, onIonPopoverWillDismiss: onLifecycle, onIonPopoverDidDismiss: onLifecycle, onIonBackdropTap: this.onBackdropTap }), !parentPopover && h("ion-backdrop", { tappable: this.backdropDismiss, visible: this.showBackdrop, part: "backdrop" }), h("div", { key: '8468f39b0a0f30b42ae9cac51950e5f0b9be1069', class: "popover-wrapper ion-overlay-wrapper", onClick: dismissOnSelect ? () => this.dismiss() : undefined }, enableArrow && h("div", { class: "popover-arrow", part: "arrow" }), h("div", { key: 'cb4eeaef385187f3c8e566931844e30edd5451c4', class: "popover-content", part: "content" }, h("slot", { key: '80a5739a4beb6eba150503e426104701954c90b9' })))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {