@ionic/core 7.5.8-dev.11701806358.1ca1b519 → 7.5.8-dev.11701894917.1c1465bd

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

@@ -6,18 +6,18 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-bbb4336c.js');
-const index$1 = require('./index-306a7476.js');
 const helpers = require('./helpers-76bb7efb.js');
 const haptic = require('./haptic-216df36c.js');
 const ionicGlobal = require('./ionic-global-f4a2093b.js');
 const theme = require('./theme-d1c573d2.js');
 require('./capacitor-46980811.js');
+require('./index-306a7476.js');
 
-const pickerColumnIosCss = ":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-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-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) .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 pickerColumnMdCss = ":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-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-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) .picker-opts{outline:none;background:rgba(var(--ion-color-base-rgb), 0.2)}}:host .picker-item-active{color:var(--ion-color-base)}";
+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 PickerColumn = class {
+const PickerColumnInternal = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.ionChange = index.createEvent(this, "ionChange", 7);
@@ -25,11 +25,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
@@ -38,7 +38,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,
@@ -107,13 +107,11 @@ const PickerColumn = class {
              * be disabled on Android.
              */
             const enableHaptics = ionicGlobal.isPlatform('ios');
-            const { el, scrollEl } = this;
+            const { el } = this;
             let timeout;
             let activeEl = this.activeItem;
             const scrollCallback = () => {
                 helpers.raf(() => {
-                    if (!scrollEl)
-                        return;
                     if (timeout) {
                         clearTimeout(timeout);
                         timeout = undefined;
@@ -126,54 +124,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 : index$1.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 && haptic.hapticSelectionChanged();
                         if (this.canExitInputMode) {
                             /**
@@ -190,8 +155,8 @@ const PickerColumn = class {
                             this.exitInputMode();
                         }
                     }
-                    activeEl = newActiveElement;
-                    this.setPickerItemActiveState(newActiveElement, true);
+                    activeEl = activeElement;
+                    this.setPickerItemActiveState(activeElement, true);
                     timeout = setTimeout(() => {
                         this.isScrolling = false;
                         enableHaptics && haptic.hapticSelectionEnd();
@@ -213,7 +178,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);
                 });
             };
@@ -222,11 +200,9 @@ const PickerColumn = class {
              * does not fire when component is initially shown.
              */
             helpers.raf(() => {
-                if (!scrollEl)
-                    return;
-                scrollEl.addEventListener('scroll', scrollCallback);
+                el.addEventListener('scroll', scrollCallback);
                 this.destroyScrollListener = () => {
-                    scrollEl.removeEventListener('scroll', scrollCallback);
+                    el.removeEventListener('scroll', scrollCallback);
                 };
             });
         };
@@ -303,25 +279,28 @@ 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);
             }
         }
     }
@@ -340,64 +319,52 @@ const PickerColumn = class {
      * @internal
      */
     async setValue(value) {
-        if (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 helpers.getElementRoot(this.el).querySelector(selector);
     }
     render() {
-        const { color, disabled: pickerDisabled, isActive, numericInput } = this;
+        const { items, color, disabled: pickerDisabled, isActive, numericInput } = this;
         const mode = ionicGlobal.getIonMode(this);
         /**
          * 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 there instead.
-         * TODO FW-5580 remove exportparts
+         * instance of ion-picker-column-internal there instead.
          */
-        return (index.h(index.Host, { exportparts: `${PICKER_ITEM_PART}, ${PICKER_ITEM_ACTIVE_PART}`, disabled: pickerDisabled, class: theme.createColorClasses(color, {
+        return (index.h(index.Host, { exportparts: `${PICKER_ITEM_PART}, ${PICKER_ITEM_ACTIVE_PART}`, disabled: pickerDisabled, tabindex: pickerDisabled ? null : 0, class: theme.createColorClasses(color, {
                 [mode]: true,
                 ['picker-column-active']: isActive,
                 ['picker-column-numeric-input']: numericInput,
-            }) }, index.h("slot", { name: "prefix" }), index.h("div", { class: "picker-opts", tabindex: pickerDisabled ? undefined : 0, ref: (el) => {
-                this.scrollEl = el;
-            } }, index.h("div", { class: "picker-item picker-item-empty", "aria-hidden": "true" }, "\u00A0"), index.h("div", { class: "picker-item picker-item-empty", "aria-hidden": "true" }, "\u00A0"), index.h("div", { class: "picker-item picker-item-empty", "aria-hidden": "true" }, "\u00A0"), index.h("slot", null), index.h("div", { class: "picker-item picker-item-empty", "aria-hidden": "true" }, "\u00A0"), index.h("div", { class: "picker-item picker-item-empty", "aria-hidden": "true" }, "\u00A0"), index.h("div", { class: "picker-item picker-item-empty", "aria-hidden": "true" }, "\u00A0")), index.h("slot", { name: "suffix" })));
+            }) }, index.h("div", { class: "picker-item picker-item-empty", "aria-hidden": "true" }, "\u00A0"), index.h("div", { class: "picker-item picker-item-empty", "aria-hidden": "true" }, "\u00A0"), index.h("div", { class: "picker-item picker-item-empty", "aria-hidden": "true" }, "\u00A0"), items.map((item, index$1) => {
+            const isItemDisabled = pickerDisabled || item.disabled || false;
+            return (index.h("button", { tabindex: "-1", class: {
+                    'picker-item': true,
+                }, "data-value": item.value, "data-index": index$1, onClick: (ev) => {
+                    this.centerPickerItemInView(ev.target, true);
+                }, disabled: isItemDisabled, part: PICKER_ITEM_PART }, item.text));
+        }), index.h("div", { class: "picker-item picker-item-empty", "aria-hidden": "true" }, "\u00A0"), index.h("div", { class: "picker-item picker-item-empty", "aria-hidden": "true" }, "\u00A0"), index.h("div", { class: "picker-item picker-item-empty", "aria-hidden": "true" }, "\u00A0")));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
         "value": ["valueChange"]
     }; }
 };
-const PICKER_ITEM_ACTIVE_CLASS = 'option-active';
+const PICKER_ITEM_ACTIVE_CLASS = 'picker-item-active';
 const PICKER_ITEM_PART = 'wheel-item';
 const PICKER_ITEM_ACTIVE_PART = 'active';
-PickerColumn.style = {
-    ios: pickerColumnIosCss,
-    md: pickerColumnMdCss
+PickerColumnInternal.style = {
+    ios: pickerColumnInternalIosCss,
+    md: pickerColumnInternalMdCss
 };
 
-exports.ion_picker_column = PickerColumn;
+exports.ion_picker_column_internal = PickerColumnInternal;

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

@@ -8,11 +8,11 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-bbb4336c.js');
 const helpers = require('./helpers-76bb7efb.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: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: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(--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 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: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: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(--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 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) {
         index.registerInstance(this, hostRef);
         this.ionInputModeChange = index.createEvent(this, "ionInputModeChange", 7);
@@ -44,7 +44,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();
             }
         };
@@ -62,7 +62,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;
             }
             /**
@@ -129,7 +129,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
@@ -163,7 +163,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);
@@ -197,7 +197,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;
             }
@@ -326,7 +326,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;
@@ -478,9 +478,9 @@ const Picker = class {
     }
     get el() { return index.getElement(this); }
 };
-Picker.style = {
-    ios: pickerIosCss,
-    md: pickerMdCss
+PickerInternal.style = {
+    ios: pickerInternalIosCss,
+    md: pickerInternalMdCss
 };
 
-exports.ion_picker = Picker;
+exports.ion_picker_internal = PickerInternal;

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

@@ -10,7 +10,7 @@ const frameworkDelegate = require('./framework-delegate-1c29b14a.js');
 const helpers = require('./helpers-76bb7efb.js');
 const lockController = require('./lock-controller-6585a42a.js');
 const index$1 = require('./index-5915f9b3.js');
-const overlays = require('./overlays-e8e05b0e.js');
+const overlays = require('./overlays-2c6b1072.js');
 const ionicGlobal = require('./ionic-global-f4a2093b.js');
 const theme = require('./theme-d1c573d2.js');
 const index$2 = require('./index-d4c2e02c.js');

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

@@ -10,7 +10,7 @@ const formController = require('./form-controller-7d42a722.js');
 const notchController = require('./notch-controller-1dce508a.js');
 const helpers = require('./helpers-76bb7efb.js');
 const index$1 = require('./index-5915f9b3.js');
-const overlays = require('./overlays-e8e05b0e.js');
+const overlays = require('./overlays-2c6b1072.js');
 const dir = require('./dir-94c21456.js');
 const theme = require('./theme-d1c573d2.js');
 const watchOptions = require('./watch-options-f5f3e158.js');

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

@@ -10,7 +10,7 @@ const config = require('./config-4f60b98a.js');
 const helpers = require('./helpers-76bb7efb.js');
 const lockController = require('./lock-controller-6585a42a.js');
 const index$1 = require('./index-5915f9b3.js');
-const overlays = require('./overlays-e8e05b0e.js');
+const overlays = require('./overlays-2c6b1072.js');
 const theme = require('./theme-d1c573d2.js');
 const ionicGlobal = require('./ionic-global-f4a2093b.js');
 const animation = require('./animation-cc40e39c.js');