@ionic/core 7.6.2-dev.11702924017.193c825c → 7.6.2-dev.11702933439.181fa64e

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

@@ -1,17 +1,16 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { r as registerInstance, d as createEvent, h, H as Host, f as getElement } from './index-b7d870cf.js';
+import { r as registerInstance, d as createEvent, h, H as Host, f as getElement } from './index-78d39194.js';
 import { E as ENABLE_HTML_CONTENT_DEFAULT, a as sanitizeDOMString } from './config-49c88215.js';
 import { r as raf } from './helpers-ae653409.js';
 import { c as createLockController } from './lock-controller-316928be.js';
-import { d as createDelegateController, e as createTriggerController, B as BACKDROP, j as prepareOverlay, k as setOverlayId, f as present, g as dismiss, h as eventMethod } from './overlays-94dac1cb.js';
+import { d as createDelegateController, e as createTriggerController, B as BACKDROP, j as prepareOverlay, k as setOverlayId, f as present, g as dismiss, h as eventMethod } from './overlays-55cf1508.js';
 import { g as getClassMap } from './theme-01f3f29c.js';
-import { c as config, b as getIonMode } from './ionic-global-1f99b929.js';
+import { c as config, b as getIonMode } from './ionic-global-6270e632.js';
 import { c as createAnimation } from './animation-dde8cc0d.js';
 import './index-a5d50daf.js';
 import './framework-delegate-bc1fd82a.js';
-import './gesture-controller-314a54f6.js';
 import './hardware-back-button-b2bc76db.js';
 import './index-9b0d46f4.js';
 

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

@@ -1,15 +1,15 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { r as registerInstance, d as createEvent, h, H as Host, f as getElement } from './index-b7d870cf.js';
+import { r as registerInstance, d as createEvent, h, H as Host, f as getElement } from './index-78d39194.js';
 import { g as getTimeGivenProgression } from './cubic-bezier-fe2083dc.js';
-import { G as GESTURE_CONTROLLER } from './gesture-controller-314a54f6.js';
+import { G as GESTURE_CONTROLLER } from './gesture-controller-1bf57181.js';
 import { p as isEndSide, i as inheritAriaAttributes, o as assert, l as clamp } from './helpers-ae653409.js';
-import { m as menuController } from './index-1193f005.js';
-import { q as getPresentedOverlay } from './overlays-94dac1cb.js';
-import { c as config, b as getIonMode } from './ionic-global-1f99b929.js';
+import { m as menuController } from './index-c4ebf628.js';
+import { q as getPresentedOverlay } from './overlays-55cf1508.js';
+import { c as config, b as getIonMode } from './ionic-global-6270e632.js';
 import { c as createColorClasses, h as hostContext } from './theme-01f3f29c.js';
-import { u as menuOutline, v as menuSharp } from './index-c132c5f1.js';
+import { u as menuOutline, v as menuSharp } from './index-4d016006.js';
 import './index-a5d50daf.js';
 import './hardware-back-button-b2bc76db.js';
 import './index-9b0d46f4.js';
@@ -129,7 +129,7 @@ const Menu = class {
         // register this menu with the app's menu controller
         menuController._register(this);
         this.menuChanged();
-        this.gesture = (await import('./index-39782642.js')).createGesture({
+        this.gesture = (await import('./index-2cf77112.js')).createGesture({
             el: document,
             gestureName: 'menu-swipe',
             gesturePriority: 30,

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

@@ -1,25 +1,25 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { r as registerInstance, d as createEvent, w as writeTask, h, H as Host, f as getElement } from './index-b7d870cf.js';
+import { r as registerInstance, d as createEvent, w as writeTask, h, H as Host, f as getElement } from './index-78d39194.js';
 import { f as findClosestIonContent, i as isIonContent, d as disableContentScrollY, r as resetContentScrollY, a as findIonContent, p as printIonContentErrorMsg } from './index-b9e742e5.js';
 import { C as CoreDelegate, a as attachComponent, d as detachComponent } from './framework-delegate-bc1fd82a.js';
 import { g as getElementRoot, l as clamp, r as raf, k as inheritAttributes, m as hasLazyBuild } from './helpers-ae653409.js';
 import { c as createLockController } from './lock-controller-316928be.js';
 import { p as printIonWarning } from './index-9b0d46f4.js';
 import { g as getCapacitor } from './capacitor-59395cbd.js';
-import { G as GESTURE, O as OVERLAY_GESTURE_PRIORITY, e as createTriggerController, B as BACKDROP, j as prepareOverlay, k as setOverlayId, f as present, n as activeAnimations, g as dismiss, h as eventMethod } from './overlays-94dac1cb.js';
+import { G as GESTURE, O as OVERLAY_GESTURE_PRIORITY, e as createTriggerController, B as BACKDROP, j as prepareOverlay, k as setOverlayId, f as present, n as activeAnimations, g as dismiss, h as eventMethod } from './overlays-55cf1508.js';
 import { g as getClassMap } from './theme-01f3f29c.js';
-import { e as deepReady, w as waitForMount } from './index-4743453d.js';
-import { b as getIonMode, c as config } from './ionic-global-1f99b929.js';
+import { e as deepReady, w as waitForMount } from './index-6b0e432e.js';
+import { b as getIonMode, c as config } from './ionic-global-6270e632.js';
 import { KEYBOARD_DID_OPEN } from './keyboard-52278bd7.js';
 import { c as createAnimation } from './animation-dde8cc0d.js';
 import { g as getTimeGivenProgression } from './cubic-bezier-fe2083dc.js';
-import { createGesture } from './index-39782642.js';
+import { createGesture } from './index-2cf77112.js';
 import { w as win } from './index-a5d50daf.js';
-import './gesture-controller-314a54f6.js';
 import './hardware-back-button-b2bc76db.js';
 import './keyboard-73175e24.js';
+import './gesture-controller-1bf57181.js';
 
 var Style;
 (function (Style) {

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

@@ -1,11 +1,11 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { r as registerInstance, d as createEvent, h, f as getElement, H as Host } from './index-b7d870cf.js';
+import { r as registerInstance, d as createEvent, h, f as getElement, H as Host } from './index-78d39194.js';
 import { g as getTimeGivenProgression } from './cubic-bezier-fe2083dc.js';
 import { o as assert, s as shallowEqualStringMap } from './helpers-ae653409.js';
-import { l as lifecycle, t as transition, s as setPageHidden, d as LIFECYCLE_WILL_UNLOAD, b as LIFECYCLE_WILL_LEAVE, c as LIFECYCLE_DID_LEAVE } from './index-4743453d.js';
-import { b as getIonMode, c as config } from './ionic-global-1f99b929.js';
+import { l as lifecycle, t as transition, s as setPageHidden, d as LIFECYCLE_WILL_UNLOAD, b as LIFECYCLE_WILL_LEAVE, c as LIFECYCLE_DID_LEAVE } from './index-6b0e432e.js';
+import { b as getIonMode, c as config } from './ionic-global-6270e632.js';
 import { a as attachComponent } from './framework-delegate-bc1fd82a.js';
 
 const VIEW_STATE_NEW = 1;
@@ -131,7 +131,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 import('./swipe-back-a8ca7f93.js')).createSwipeBackGesture(this.el, this.canStart.bind(this), this.onStart.bind(this), this.onMove.bind(this), this.onEnd.bind(this));
+        this.gesture = (await import('./swipe-back-a6f386fc.js')).createSwipeBackGesture(this.el, this.canStart.bind(this), this.onStart.bind(this), this.onMove.bind(this), this.onEnd.bind(this));
         this.swipeGestureChanged();
     }
     connectedCallback() {

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

@@ -1,17 +1,19 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { r as registerInstance, d as createEvent, h, H as Host, f as getElement } from './index-b7d870cf.js';
-import { d as doc } from './index-a5d50daf.js';
+import { r as registerInstance, d as createEvent, h, H as Host, f as getElement } from './index-78d39194.js';
 import { r as raf, g as getElementRoot } from './helpers-ae653409.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-1f99b929.js';
+import { a as isPlatform, b as getIonMode } from './ionic-global-6270e632.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 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 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 PickerColumnInternal = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.ionChange = createEvent(this, "ionChange", 7);
@@ -19,11 +21,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
@@ -32,7 +34,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,
@@ -43,9 +45,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);
             }
         };
         /**
@@ -99,13 +103,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;
@@ -118,54 +120,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) {
                             /**
@@ -182,8 +151,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();
@@ -205,7 +174,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);
                 });
             };
@@ -214,11 +196,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);
                 };
             });
         };
@@ -246,6 +226,7 @@ const PickerColumn = class {
         };
         this.isActive = false;
         this.disabled = false;
+        this.items = [];
         this.value = undefined;
         this.color = 'primary';
         this.numericInput = false;
@@ -256,7 +237,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();
         }
     }
     /**
@@ -294,33 +275,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);
         }
     }
     /**
@@ -331,53 +315,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, { 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, { 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", { name: "prefix" }), h("div", { class: "picker-opts", tabindex: disabled ? undefined : 0, ref: (el) => {
-                this.scrollEl = el;
-            } }, h("div", { class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("slot", null), h("div", { class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0")), h("slot", { name: "suffix" })));
+            }) }, h("div", { class: "picker-item picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { class: "picker-item picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { 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", { class: "picker-item picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { class: "picker-item picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { 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 = pickerColumnCss;
+const PICKER_ITEM_ACTIVE_CLASS = 'picker-item-active';
+const PICKER_ITEM_PART = 'wheel-item';
+const PICKER_ITEM_ACTIVE_PART = 'active';
+PickerColumnInternal.style = {
+    ios: pickerColumnInternalIosCss,
+    md: pickerColumnInternalMdCss
+};
 
-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}

@@ -1,14 +1,14 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { r as registerInstance, d as createEvent, h, H as Host, f as getElement } from './index-b7d870cf.js';
+import { r as registerInstance, d as createEvent, h, H as Host, f as getElement } from './index-78d39194.js';
 import { g as getElementRoot } from './helpers-ae653409.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}@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: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, #eeeeef))}";
+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 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}@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: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 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 Picker = class {
+const PickerInternal = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.ionInputModeChange = createEvent(this, "ionInputModeChange", 7);
@@ -40,7 +40,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();
             }
         };
@@ -58,7 +58,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;
             }
             /**
@@ -125,7 +125,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
@@ -159,7 +159,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);
@@ -193,7 +193,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;
             }
@@ -246,7 +246,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
@@ -286,13 +286,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) {
@@ -317,11 +312,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 = () => {
@@ -329,7 +322,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;
@@ -481,9 +474,9 @@ const Picker = class {
     }
     get el() { return getElement(this); }
 };
-Picker.style = {
-    ios: pickerIosCss,
-    md: pickerMdCss
+PickerInternal.style = {
+    ios: pickerInternalIosCss,
+    md: pickerInternalMdCss
 };
 
-export { Picker as ion_picker };
+export { PickerInternal as ion_picker_internal };

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

@@ -1,18 +1,17 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { r as registerInstance, d as createEvent, h, H as Host, f as getElement } from './index-b7d870cf.js';
+import { r as registerInstance, d as createEvent, h, H as Host, f as getElement } from './index-78d39194.js';
 import { C as CoreDelegate, a as attachComponent, d as detachComponent } from './framework-delegate-bc1fd82a.js';
 import { r as raf, g as getElementRoot, a as addEventListener, m as hasLazyBuild } from './helpers-ae653409.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, o as focusFirstDescendant, g as dismiss, h as eventMethod } from './overlays-94dac1cb.js';
-import { b as getIonMode, a as isPlatform } from './ionic-global-1f99b929.js';
+import { B as BACKDROP, j as prepareOverlay, k as setOverlayId, f as present, o as focusFirstDescendant, g as dismiss, h as eventMethod } from './overlays-55cf1508.js';
+import { b as getIonMode, a as isPlatform } from './ionic-global-6270e632.js';
 import { g as getClassMap } from './theme-01f3f29c.js';
-import { e as deepReady, w as waitForMount } from './index-4743453d.js';
+import { e as deepReady, w as waitForMount } from './index-6b0e432e.js';
 import { c as createAnimation } from './animation-dde8cc0d.js';
 import './index-a5d50daf.js';
-import './gesture-controller-314a54f6.js';
 import './hardware-back-button-b2bc76db.js';
 
 /**