@ionic/core 7.6.7-dev.11706551083.17301493 → 7.6.7-dev.11706551842.118ce6e0

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

@@ -7,12 +7,12 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-71f41461.js');
 const cubicBezier = require('./cubic-bezier-f2dccc53.js');
-const gestureController = require('./gesture-controller-c40c045a.js');
+const gestureController = require('./gesture-controller-9436f482.js');
 const helpers = require('./helpers-76bb7efb.js');
 const index$1 = require('./index-96a721a7.js');
-const overlays = require('./overlays-8285b485.js');
-const ionicGlobal = require('./ionic-global-c70c3fb5.js');
+const overlays = require('./overlays-3afa911d.js');
 const theme = require('./theme-d1c573d2.js');
+const ionicGlobal = require('./ionic-global-c70c3fb5.js');
 const index$2 = require('./index-f52c6d38.js');
 require('./index-c8d52405.js');
 require('./hardware-back-button-76833cac.js');
@@ -20,9 +20,9 @@ require('./index-5915f9b3.js');
 require('./animation-9b401d39.js');
 require('./framework-delegate-1c29b14a.js');
 
-const menuIosCss = ":host{--width:304px;--min-width:auto;--max-width:auto;--height:100%;--min-height:auto;--max-height:auto;--background:var(--ion-background-color, #fff);left:0;right:0;top:0;bottom:0;display:none;position:absolute;contain:strict}:host(.show-menu){display:block}.menu-inner{-webkit-transform:translateX(-9999px);transform:translateX(-9999px);display:-ms-flexbox;display:flex;position:absolute;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:justify;justify-content:space-between;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);contain:strict}:host(.menu-side-start) .menu-inner{--ion-safe-area-right:0px;top:0;bottom:0}@supports (inset-inline-start: 0){:host(.menu-side-start) .menu-inner{inset-inline-start:0;inset-inline-end:auto}}@supports not (inset-inline-start: 0){:host(.menu-side-start) .menu-inner{left:0;right:auto}:host-context([dir=rtl]):host(.menu-side-start) .menu-inner,:host-context([dir=rtl]).menu-side-start .menu-inner{left:unset;right:unset;left:auto;right:0}@supports selector(:dir(rtl)){:host(.menu-side-start:dir(rtl)) .menu-inner{left:unset;right:unset;left:auto;right:0}}}:host-context([dir=rtl]):host(.menu-side-start) .menu-inner,:host-context([dir=rtl]).menu-side-start .menu-inner{--ion-safe-area-right:unset;--ion-safe-area-left:0px}@supports selector(:dir(rtl)){:host(.menu-side-start:dir(rtl)) .menu-inner{--ion-safe-area-right:unset;--ion-safe-area-left:0px}}:host(.menu-side-end) .menu-inner{--ion-safe-area-left:0px;top:0;bottom:0}@supports (inset-inline-start: 0){:host(.menu-side-end) .menu-inner{inset-inline-start:auto;inset-inline-end:0}}@supports not (inset-inline-start: 0){:host(.menu-side-end) .menu-inner{left:auto;right:0}:host-context([dir=rtl]):host(.menu-side-end) .menu-inner,:host-context([dir=rtl]).menu-side-end .menu-inner{left:unset;right:unset;left:0;right:auto}@supports selector(:dir(rtl)){:host(.menu-side-end:dir(rtl)) .menu-inner{left:unset;right:unset;left:0;right:auto}}}:host-context([dir=rtl]):host(.menu-side-end) .menu-inner,:host-context([dir=rtl]).menu-side-end .menu-inner{--ion-safe-area-left:unset;--ion-safe-area-right:0px}@supports selector(:dir(rtl)){:host(.menu-side-end:dir(rtl)) .menu-inner{--ion-safe-area-left:unset;--ion-safe-area-right:0px}}ion-backdrop{display:none;opacity:0.01;z-index:-1}@media (max-width: 340px){.menu-inner{--width:264px}}:host(.menu-type-reveal){z-index:0}:host(.menu-type-reveal.show-menu) .menu-inner{-webkit-transform:translate3d(0,  0,  0);transform:translate3d(0,  0,  0)}:host(.menu-type-overlay){z-index:1000}:host(.menu-type-overlay) .show-backdrop{display:block;cursor:pointer}:host(.menu-pane-visible){width:var(--width);min-width:var(--min-width);max-width:var(--max-width)}:host(.menu-pane-visible) .menu-inner{left:0;right:0;width:auto;-webkit-transform:none;transform:none;-webkit-box-shadow:none;box-shadow:none}:host(.menu-pane-visible) ion-backdrop{display:hidden !important}:host(.menu-type-push){z-index:1000}:host(.menu-type-push) .show-backdrop{display:block}";
+const menuIosCss = ":host{--width:304px;--min-width:auto;--max-width:auto;--height:100%;--min-height:auto;--max-height:auto;--background:var(--ion-background-color, #fff);left:0;right:0;top:0;bottom:0;display:none;position:absolute;contain:strict}:host(.show-menu){display:block}.menu-inner{-webkit-transform:translateX(-9999px);transform:translateX(-9999px);display:-ms-flexbox;display:flex;position:absolute;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:justify;justify-content:space-between;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);contain:strict}:host(.menu-side-start) .menu-inner{--ion-safe-area-right:0px;top:0;bottom:0}@supports (inset-inline-start: 0){:host(.menu-side-start) .menu-inner{inset-inline-start:0;inset-inline-end:auto}}@supports not (inset-inline-start: 0){:host(.menu-side-start) .menu-inner{left:0;right:auto}:host-context([dir=rtl]):host(.menu-side-start) .menu-inner,:host-context([dir=rtl]).menu-side-start .menu-inner{left:unset;right:unset;left:auto;right:0}@supports selector(:dir(rtl)){:host(.menu-side-start:dir(rtl)) .menu-inner{left:unset;right:unset;left:auto;right:0}}}:host-context([dir=rtl]):host(.menu-side-start) .menu-inner,:host-context([dir=rtl]).menu-side-start .menu-inner{--ion-safe-area-right:unset;--ion-safe-area-left:0px}@supports selector(:dir(rtl)){:host(.menu-side-start:dir(rtl)) .menu-inner{--ion-safe-area-right:unset;--ion-safe-area-left:0px}}:host(.menu-side-end) .menu-inner{--ion-safe-area-left:0px;top:0;bottom:0}@supports (inset-inline-start: 0){:host(.menu-side-end) .menu-inner{inset-inline-start:auto;inset-inline-end:0}}@supports not (inset-inline-start: 0){:host(.menu-side-end) .menu-inner{left:auto;right:0}:host-context([dir=rtl]):host(.menu-side-end) .menu-inner,:host-context([dir=rtl]).menu-side-end .menu-inner{left:unset;right:unset;left:0;right:auto}@supports selector(:dir(rtl)){:host(.menu-side-end:dir(rtl)) .menu-inner{left:unset;right:unset;left:0;right:auto}}}:host-context([dir=rtl]):host(.menu-side-end) .menu-inner,:host-context([dir=rtl]).menu-side-end .menu-inner{--ion-safe-area-left:unset;--ion-safe-area-right:0px}@supports selector(:dir(rtl)){:host(.menu-side-end:dir(rtl)) .menu-inner{--ion-safe-area-left:unset;--ion-safe-area-right:0px}}ion-backdrop{display:none;opacity:0.01;z-index:-1}@media (max-width: 340px){.menu-inner{--width:264px}}:host(.menu-type-reveal){z-index:0}:host(.menu-type-reveal.show-menu) .menu-inner{-webkit-transform:translate3d(0,  0,  0);transform:translate3d(0,  0,  0)}:host(.menu-type-overlay){z-index:1000}:host(.menu-type-overlay) .show-backdrop{display:block;cursor:pointer}:host(.menu-pane-visible){-ms-flex:0 1 auto;flex:0 1 auto;width:var(--side-width, var(--width));min-width:var(--side-min-width, var(--min-width));max-width:var(--side-max-width, var(--max-width))}:host(.menu-pane-visible.split-pane-side){left:0;right:0;top:0;bottom:0;position:relative;-webkit-box-shadow:none;box-shadow:none;z-index:0}:host(.menu-pane-visible.split-pane-side.menu-enabled){display:-ms-flexbox;display:flex;-ms-flex-negative:0;flex-shrink:0}:host(.menu-pane-visible.split-pane-side){-ms-flex-order:-1;order:-1}:host(.menu-pane-visible.split-pane-side[side=end]){-ms-flex-order:1;order:1}:host(.menu-pane-visible) .menu-inner{left:0;right:0;width:auto;-webkit-transform:none;transform:none;-webkit-box-shadow:none;box-shadow:none}:host(.menu-pane-visible) ion-backdrop{display:hidden !important}:host(.menu-pane-visible.split-pane-side){-webkit-border-start:0;border-inline-start:0;-webkit-border-end:var(--border);border-inline-end:var(--border);border-top:0;border-bottom:0;min-width:var(--side-min-width);max-width:var(--side-max-width)}:host(.menu-pane-visible.split-pane-side[side=end]){-webkit-border-start:var(--border);border-inline-start:var(--border);-webkit-border-end:0;border-inline-end:0;border-top:0;border-bottom:0;min-width:var(--side-min-width);max-width:var(--side-max-width)}:host(.menu-type-push){z-index:1000}:host(.menu-type-push) .show-backdrop{display:block}";
 
-const menuMdCss = ":host{--width:304px;--min-width:auto;--max-width:auto;--height:100%;--min-height:auto;--max-height:auto;--background:var(--ion-background-color, #fff);left:0;right:0;top:0;bottom:0;display:none;position:absolute;contain:strict}:host(.show-menu){display:block}.menu-inner{-webkit-transform:translateX(-9999px);transform:translateX(-9999px);display:-ms-flexbox;display:flex;position:absolute;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:justify;justify-content:space-between;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);contain:strict}:host(.menu-side-start) .menu-inner{--ion-safe-area-right:0px;top:0;bottom:0}@supports (inset-inline-start: 0){:host(.menu-side-start) .menu-inner{inset-inline-start:0;inset-inline-end:auto}}@supports not (inset-inline-start: 0){:host(.menu-side-start) .menu-inner{left:0;right:auto}:host-context([dir=rtl]):host(.menu-side-start) .menu-inner,:host-context([dir=rtl]).menu-side-start .menu-inner{left:unset;right:unset;left:auto;right:0}@supports selector(:dir(rtl)){:host(.menu-side-start:dir(rtl)) .menu-inner{left:unset;right:unset;left:auto;right:0}}}:host-context([dir=rtl]):host(.menu-side-start) .menu-inner,:host-context([dir=rtl]).menu-side-start .menu-inner{--ion-safe-area-right:unset;--ion-safe-area-left:0px}@supports selector(:dir(rtl)){:host(.menu-side-start:dir(rtl)) .menu-inner{--ion-safe-area-right:unset;--ion-safe-area-left:0px}}:host(.menu-side-end) .menu-inner{--ion-safe-area-left:0px;top:0;bottom:0}@supports (inset-inline-start: 0){:host(.menu-side-end) .menu-inner{inset-inline-start:auto;inset-inline-end:0}}@supports not (inset-inline-start: 0){:host(.menu-side-end) .menu-inner{left:auto;right:0}:host-context([dir=rtl]):host(.menu-side-end) .menu-inner,:host-context([dir=rtl]).menu-side-end .menu-inner{left:unset;right:unset;left:0;right:auto}@supports selector(:dir(rtl)){:host(.menu-side-end:dir(rtl)) .menu-inner{left:unset;right:unset;left:0;right:auto}}}:host-context([dir=rtl]):host(.menu-side-end) .menu-inner,:host-context([dir=rtl]).menu-side-end .menu-inner{--ion-safe-area-left:unset;--ion-safe-area-right:0px}@supports selector(:dir(rtl)){:host(.menu-side-end:dir(rtl)) .menu-inner{--ion-safe-area-left:unset;--ion-safe-area-right:0px}}ion-backdrop{display:none;opacity:0.01;z-index:-1}@media (max-width: 340px){.menu-inner{--width:264px}}:host(.menu-type-reveal){z-index:0}:host(.menu-type-reveal.show-menu) .menu-inner{-webkit-transform:translate3d(0,  0,  0);transform:translate3d(0,  0,  0)}:host(.menu-type-overlay){z-index:1000}:host(.menu-type-overlay) .show-backdrop{display:block;cursor:pointer}:host(.menu-pane-visible){width:var(--width);min-width:var(--min-width);max-width:var(--max-width)}:host(.menu-pane-visible) .menu-inner{left:0;right:0;width:auto;-webkit-transform:none;transform:none;-webkit-box-shadow:none;box-shadow:none}:host(.menu-pane-visible) ion-backdrop{display:hidden !important}:host(.menu-type-overlay) .menu-inner{-webkit-box-shadow:4px 0px 16px rgba(0, 0, 0, 0.18);box-shadow:4px 0px 16px rgba(0, 0, 0, 0.18)}";
+const menuMdCss = ":host{--width:304px;--min-width:auto;--max-width:auto;--height:100%;--min-height:auto;--max-height:auto;--background:var(--ion-background-color, #fff);left:0;right:0;top:0;bottom:0;display:none;position:absolute;contain:strict}:host(.show-menu){display:block}.menu-inner{-webkit-transform:translateX(-9999px);transform:translateX(-9999px);display:-ms-flexbox;display:flex;position:absolute;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:justify;justify-content:space-between;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);contain:strict}:host(.menu-side-start) .menu-inner{--ion-safe-area-right:0px;top:0;bottom:0}@supports (inset-inline-start: 0){:host(.menu-side-start) .menu-inner{inset-inline-start:0;inset-inline-end:auto}}@supports not (inset-inline-start: 0){:host(.menu-side-start) .menu-inner{left:0;right:auto}:host-context([dir=rtl]):host(.menu-side-start) .menu-inner,:host-context([dir=rtl]).menu-side-start .menu-inner{left:unset;right:unset;left:auto;right:0}@supports selector(:dir(rtl)){:host(.menu-side-start:dir(rtl)) .menu-inner{left:unset;right:unset;left:auto;right:0}}}:host-context([dir=rtl]):host(.menu-side-start) .menu-inner,:host-context([dir=rtl]).menu-side-start .menu-inner{--ion-safe-area-right:unset;--ion-safe-area-left:0px}@supports selector(:dir(rtl)){:host(.menu-side-start:dir(rtl)) .menu-inner{--ion-safe-area-right:unset;--ion-safe-area-left:0px}}:host(.menu-side-end) .menu-inner{--ion-safe-area-left:0px;top:0;bottom:0}@supports (inset-inline-start: 0){:host(.menu-side-end) .menu-inner{inset-inline-start:auto;inset-inline-end:0}}@supports not (inset-inline-start: 0){:host(.menu-side-end) .menu-inner{left:auto;right:0}:host-context([dir=rtl]):host(.menu-side-end) .menu-inner,:host-context([dir=rtl]).menu-side-end .menu-inner{left:unset;right:unset;left:0;right:auto}@supports selector(:dir(rtl)){:host(.menu-side-end:dir(rtl)) .menu-inner{left:unset;right:unset;left:0;right:auto}}}:host-context([dir=rtl]):host(.menu-side-end) .menu-inner,:host-context([dir=rtl]).menu-side-end .menu-inner{--ion-safe-area-left:unset;--ion-safe-area-right:0px}@supports selector(:dir(rtl)){:host(.menu-side-end:dir(rtl)) .menu-inner{--ion-safe-area-left:unset;--ion-safe-area-right:0px}}ion-backdrop{display:none;opacity:0.01;z-index:-1}@media (max-width: 340px){.menu-inner{--width:264px}}:host(.menu-type-reveal){z-index:0}:host(.menu-type-reveal.show-menu) .menu-inner{-webkit-transform:translate3d(0,  0,  0);transform:translate3d(0,  0,  0)}:host(.menu-type-overlay){z-index:1000}:host(.menu-type-overlay) .show-backdrop{display:block;cursor:pointer}:host(.menu-pane-visible){-ms-flex:0 1 auto;flex:0 1 auto;width:var(--side-width, var(--width));min-width:var(--side-min-width, var(--min-width));max-width:var(--side-max-width, var(--max-width))}:host(.menu-pane-visible.split-pane-side){left:0;right:0;top:0;bottom:0;position:relative;-webkit-box-shadow:none;box-shadow:none;z-index:0}:host(.menu-pane-visible.split-pane-side.menu-enabled){display:-ms-flexbox;display:flex;-ms-flex-negative:0;flex-shrink:0}:host(.menu-pane-visible.split-pane-side){-ms-flex-order:-1;order:-1}:host(.menu-pane-visible.split-pane-side[side=end]){-ms-flex-order:1;order:1}:host(.menu-pane-visible) .menu-inner{left:0;right:0;width:auto;-webkit-transform:none;transform:none;-webkit-box-shadow:none;box-shadow:none}:host(.menu-pane-visible) ion-backdrop{display:hidden !important}:host(.menu-pane-visible.split-pane-side){-webkit-border-start:0;border-inline-start:0;-webkit-border-end:var(--border);border-inline-end:var(--border);border-top:0;border-bottom:0;min-width:var(--side-min-width);max-width:var(--side-max-width)}:host(.menu-pane-visible.split-pane-side[side=end]){-webkit-border-start:var(--border);border-inline-start:var(--border);-webkit-border-end:0;border-inline-end:0;border-top:0;border-bottom:0;min-width:var(--side-min-width);max-width:var(--side-max-width)}:host(.menu-type-overlay) .menu-inner{-webkit-box-shadow:4px 0px 16px rgba(0, 0, 0, 0.18);box-shadow:4px 0px 16px rgba(0, 0, 0, 0.18)}";
 
 const iosEasing = 'cubic-bezier(0.32,0.72,0,1)';
 const mdEasing = 'cubic-bezier(0.0,0.0,0.2,1)';
@@ -133,7 +133,7 @@ const Menu = class {
         // register this menu with the app's menu controller
         index$1.menuController._register(this);
         this.menuChanged();
-        this.gesture = (await Promise.resolve().then(function () { return require('./index-d1b59ffa.js'); })).createGesture({
+        this.gesture = (await Promise.resolve().then(function () { return require('./index-ee07ed59.js'); })).createGesture({
             el: document,
             gestureName: 'menu-swipe',
             gesturePriority: 30,
@@ -152,6 +152,19 @@ const Menu = class {
     }
     async componentDidLoad() {
         this.didLoad = true;
+        /**
+         * A menu inside of a split pane is assumed
+         * to be a side pane.
+         *
+         * When the menu is loaded it needs to
+         * see if it should be considered visible inside
+         * of the split pane. If the split pane is
+         * hidden then the menu should be too.
+         */
+        const splitPane = this.el.closest('ion-split-pane');
+        if (splitPane !== null) {
+            this.isPaneVisible = await splitPane.isVisible();
+        }
         this.menuChanged();
         this.updateState();
     }
@@ -187,20 +200,11 @@ const Menu = class {
         this.contentEl = undefined;
     }
     onSplitPaneChanged(ev) {
-        const { target } = ev;
         const closestSplitPane = this.el.closest('ion-split-pane');
-        /**
-         * Menu listens on the body for "ionSplitPaneVisible".
-         * However, this means the callback will run any time
-         * a SplitPane changes visibility. As a result, we only want
-         * Menu's visibility state to update if its parent SplitPane
-         * changes visibility.
-         */
-        if (target !== closestSplitPane) {
-            return;
+        if (closestSplitPane !== null && closestSplitPane === ev.target) {
+            this.isPaneVisible = ev.detail.visible;
+            this.updateState();
         }
-        this.isPaneVisible = ev.detail.isPane(this.el);
-        this.updateState();
     }
     onBackdropClick(ev) {
         // TODO(FW-2832): type (CustomEvent triggers errors which should be sorted)
@@ -607,7 +611,7 @@ const Menu = class {
         }
     }
     render() {
-        const { type, disabled, isPaneVisible, inheritedAttributes, side } = this;
+        const { type, disabled, el, isPaneVisible, inheritedAttributes, side } = this;
         const mode = ionicGlobal.getIonMode(this);
         return (index.h(index.Host, { role: "navigation", "aria-label": inheritedAttributes['aria-label'] || 'menu', class: {
                 [mode]: true,
@@ -615,6 +619,7 @@ const Menu = class {
                 'menu-enabled': !disabled,
                 [`menu-side-${side}`]: true,
                 'menu-pane-visible': isPaneVisible,
+                'split-pane-side': theme.hostContext('ion-split-pane', el),
             } }, index.h("div", { class: "menu-inner", part: "container", ref: (el) => (this.menuInnerEl = el) }, index.h("slot", null)), index.h("ion-backdrop", { ref: (el) => (this.backdropEl = el), class: "menu-backdrop", tappable: false, stopPropagation: false, part: "backdrop" })));
     }
     get el() { return index.getElement(this); }
@@ -650,7 +655,7 @@ const updateVisibility = async (menu) => {
     return !!(menuEl && (await menuEl.isActive()));
 };
 
-const menuButtonIosCss = ":host{--background:transparent;--color-focused:currentColor;--border-radius:initial;--padding-top:0;--padding-bottom:0;color:var(--color);text-align:center;text-decoration:none;text-overflow:ellipsis;text-transform:none;white-space:nowrap;-webkit-font-kerning:none;font-kerning:none}.button-native{border-radius:var(--border-radius);font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end);padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:-ms-flexbox;display:flex;position:relative;-ms-flex-flow:row nowrap;flex-flow:row nowrap;-ms-flex-negative:0;flex-shrink:0;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:100%;height:100%;min-height:inherit;border:0;outline:none;background:var(--background);line-height:1;cursor:pointer;overflow:hidden;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:0;-webkit-appearance:none;-moz-appearance:none;appearance:none}.button-inner{display:-ms-flexbox;display:flex;position:relative;-ms-flex-flow:row nowrap;flex-flow:row nowrap;-ms-flex-negative:0;flex-shrink:0;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:100%;height:100%;min-height:inherit;z-index:1}ion-icon{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;pointer-events:none}:host(.menu-button-hidden){display:none}:host(.menu-button-disabled){cursor:default;opacity:0.5;pointer-events:none}:host(.ion-focused) .button-native{color:var(--color-focused)}:host(.ion-focused) .button-native::after{background:var(--background-focused);opacity:var(--background-focused-opacity)}.button-native::after{left:0;right:0;top:0;bottom:0;position:absolute;content:\"\";opacity:0}@media (any-hover: hover){:host(:hover) .button-native{color:var(--color-hover)}:host(:hover) .button-native::after{background:var(--background-hover);opacity:var(--background-hover-opacity, 0)}}:host(.ion-color) .button-native{color:var(--ion-color-base)}:host(.in-toolbar:not(.in-toolbar-color)){color:var(--ion-toolbar-color, var(--color))}:host{--background-focused:currentColor;--background-focused-opacity:.1;--border-radius:4px;--color:var(--ion-color-primary, #3880ff);--padding-start:5px;--padding-end:5px;min-height:32px;font-size:clamp(31px, 1.9375rem, 38.13px)}:host(.ion-activated){opacity:0.4}@media (any-hover: hover){:host(:hover){opacity:0.6}}";
+const menuButtonIosCss = ":host{--background:transparent;--color-focused:currentColor;--border-radius:initial;--padding-top:0;--padding-bottom:0;color:var(--color);text-align:center;text-decoration:none;text-overflow:ellipsis;text-transform:none;white-space:nowrap;-webkit-font-kerning:none;font-kerning:none}.button-native{border-radius:var(--border-radius);font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end);padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:-ms-flexbox;display:flex;position:relative;-ms-flex-flow:row nowrap;flex-flow:row nowrap;-ms-flex-negative:0;flex-shrink:0;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:100%;height:100%;min-height:inherit;border:0;outline:none;background:var(--background);line-height:1;cursor:pointer;overflow:hidden;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:0;-webkit-appearance:none;-moz-appearance:none;appearance:none}.button-inner{display:-ms-flexbox;display:flex;position:relative;-ms-flex-flow:row nowrap;flex-flow:row nowrap;-ms-flex-negative:0;flex-shrink:0;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:100%;height:100%;min-height:inherit;z-index:1}ion-icon{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;pointer-events:none}:host(.menu-button-hidden){display:none}:host(.menu-button-disabled){cursor:default;opacity:0.5;pointer-events:none}:host(.ion-focused) .button-native{color:var(--color-focused)}:host(.ion-focused) .button-native::after{background:var(--background-focused);opacity:var(--background-focused-opacity)}.button-native::after{left:0;right:0;top:0;bottom:0;position:absolute;content:\"\";opacity:0}@media (any-hover: hover){:host(:hover) .button-native{color:var(--color-hover)}:host(:hover) .button-native::after{background:var(--background-hover);opacity:var(--background-hover-opacity, 0)}}:host(.ion-color) .button-native{color:var(--ion-color-base)}:host(.in-toolbar:not(.in-toolbar-color)){color:var(--ion-toolbar-color, var(--color))}:host{--background-focused:currentColor;--background-focused-opacity:.1;--border-radius:4px;--color:var(--ion-color-primary, #0054e9);--padding-start:5px;--padding-end:5px;min-height:32px;font-size:clamp(31px, 1.9375rem, 38.13px)}:host(.ion-activated){opacity:0.4}@media (any-hover: hover){:host(:hover){opacity:0.6}}";
 
 const menuButtonMdCss = ":host{--background:transparent;--color-focused:currentColor;--border-radius:initial;--padding-top:0;--padding-bottom:0;color:var(--color);text-align:center;text-decoration:none;text-overflow:ellipsis;text-transform:none;white-space:nowrap;-webkit-font-kerning:none;font-kerning:none}.button-native{border-radius:var(--border-radius);font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end);padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:-ms-flexbox;display:flex;position:relative;-ms-flex-flow:row nowrap;flex-flow:row nowrap;-ms-flex-negative:0;flex-shrink:0;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:100%;height:100%;min-height:inherit;border:0;outline:none;background:var(--background);line-height:1;cursor:pointer;overflow:hidden;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:0;-webkit-appearance:none;-moz-appearance:none;appearance:none}.button-inner{display:-ms-flexbox;display:flex;position:relative;-ms-flex-flow:row nowrap;flex-flow:row nowrap;-ms-flex-negative:0;flex-shrink:0;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:100%;height:100%;min-height:inherit;z-index:1}ion-icon{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;pointer-events:none}:host(.menu-button-hidden){display:none}:host(.menu-button-disabled){cursor:default;opacity:0.5;pointer-events:none}:host(.ion-focused) .button-native{color:var(--color-focused)}:host(.ion-focused) .button-native::after{background:var(--background-focused);opacity:var(--background-focused-opacity)}.button-native::after{left:0;right:0;top:0;bottom:0;position:absolute;content:\"\";opacity:0}@media (any-hover: hover){:host(:hover) .button-native{color:var(--color-hover)}:host(:hover) .button-native::after{background:var(--background-hover);opacity:var(--background-hover-opacity, 0)}}:host(.ion-color) .button-native{color:var(--ion-color-base)}:host(.in-toolbar:not(.in-toolbar-color)){color:var(--ion-toolbar-color, var(--color))}:host{--background-focused:currentColor;--background-focused-opacity:.12;--background-hover:currentColor;--background-hover-opacity:.04;--border-radius:50%;--color:initial;--padding-start:8px;--padding-end:8px;width:3rem;height:3rem;font-size:1.5rem}:host(.ion-color.ion-focused)::after{background:var(--ion-color-base)}@media (any-hover: hover){:host(.ion-color:hover) .button-native::after{background:var(--ion-color-base)}}";
 

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

@@ -12,18 +12,18 @@ const helpers = require('./helpers-76bb7efb.js');
 const lockController = require('./lock-controller-6585a42a.js');
 const index$4 = require('./index-5915f9b3.js');
 const capacitor = require('./capacitor-c04564bf.js');
-const overlays = require('./overlays-8285b485.js');
+const overlays = require('./overlays-3afa911d.js');
 const theme = require('./theme-d1c573d2.js');
 const index$5 = require('./index-6bb6b651.js');
 const ionicGlobal = require('./ionic-global-c70c3fb5.js');
 const keyboard = require('./keyboard-af1bb365.js');
 const animation = require('./animation-9b401d39.js');
 const cubicBezier = require('./cubic-bezier-f2dccc53.js');
-const index$1 = require('./index-d1b59ffa.js');
+const index$1 = require('./index-ee07ed59.js');
 const index = require('./index-c8d52405.js');
+require('./gesture-controller-9436f482.js');
 require('./hardware-back-button-76833cac.js');
 require('./keyboard-0272231f.js');
-require('./gesture-controller-c40c045a.js');
 
 var Style;
 (function (Style) {

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

@@ -135,7 +135,7 @@ const Nav = class {
         // We want to set this flag before any watch callbacks are manually called
         this.didLoad = true;
         this.rootChanged();
-        this.gesture = (await Promise.resolve().then(function () { return require('./swipe-back-2a858bbd.js'); })).createSwipeBackGesture(this.el, this.canStart.bind(this), this.onStart.bind(this), this.onMove.bind(this), this.onEnd.bind(this));
+        this.gesture = (await Promise.resolve().then(function () { return require('./swipe-back-b8f2330b.js'); })).createSwipeBackGesture(this.el, this.canStart.bind(this), this.onStart.bind(this), this.onMove.bind(this), this.onEnd.bind(this));
         this.swipeGestureChanged();
     }
     connectedCallback() {
@@ -391,8 +391,11 @@ const Nav = class {
     async getPrevious(view) {
         return this.getPreviousSync(view);
     }
-    getLength() {
-        return this.views.length;
+    /**
+     * Returns the number of views in the stack.
+     */
+    async getLength() {
+        return Promise.resolve(this.views.length);
     }
     getActiveSync() {
         return this.views[this.views.length - 1];

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

@@ -0,0 +1,104 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-71f41461.js');
+const helpers = require('./helpers-76bb7efb.js');
+const theme = require('./theme-d1c573d2.js');
+const ionicGlobal = require('./ionic-global-c70c3fb5.js');
+
+const pickerColumnOptionIosCss = "button{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;width:100%;height:34px;border:0px;outline:none;background:transparent;color:inherit;font-family:var(--ion-font-family, inherit);font-size:inherit;line-height:34px;text-align:inherit;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;overflow:hidden}:host(.option-disabled){opacity:0.4}:host(.option-disabled) button{cursor:default}";
+
+const pickerColumnOptionMdCss = "button{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;width:100%;height:34px;border:0px;outline:none;background:transparent;color:inherit;font-family:var(--ion-font-family, inherit);font-size:inherit;line-height:34px;text-align:inherit;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;overflow:hidden}:host(.option-disabled){opacity:0.4}:host(.option-disabled) button{cursor:default}:host(.option-active){color:var(--ion-color-base)}";
+
+const PickerColumnOption = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        /**
+         * We keep track of the parent picker column
+         * so we can update the value of it when
+         * clicking an enable option.
+         */
+        this.pickerColumn = null;
+        this.ariaLabel = null;
+        this.disabled = false;
+        this.value = undefined;
+        this.color = 'primary';
+    }
+    /**
+     * The aria-label of the option has changed after the
+     * first render and needs to be updated within the component.
+     *
+     * @param ariaLbl The new aria-label value.
+     */
+    onAriaLabelChange(ariaLbl) {
+        this.ariaLabel = ariaLbl;
+    }
+    componentWillLoad() {
+        const inheritedAttributes = helpers.inheritAttributes(this.el, ['aria-label']);
+        /**
+         * The initial value of `aria-label` needs to be set for
+         * the first render.
+    
+         */
+        this.ariaLabel = inheritedAttributes['aria-label'] || null;
+    }
+    connectedCallback() {
+        this.pickerColumn = this.el.closest('ion-picker-column');
+    }
+    disconnectedCallback() {
+        this.pickerColumn = null;
+    }
+    /**
+     * The column options can load at any time
+     * so the options needs to tell the
+     * parent picker column when it is loaded
+     * so the picker column can ensure it is
+     * centered in the view.
+     *
+     * We intentionally run this for every
+     * option. If we only ran this from
+     * the selected option then if the newly
+     * loaded options were not selected then
+     * scrollActiveItemIntoView would not be called.
+     */
+    componentDidLoad() {
+        const { pickerColumn } = this;
+        if (pickerColumn !== null) {
+            pickerColumn.scrollActiveItemIntoView();
+        }
+    }
+    /**
+     * When an option is clicked, update the
+     * parent picker column value. This
+     * component will handle centering the option
+     * in the column view.
+     */
+    onClick() {
+        const { pickerColumn } = this;
+        if (pickerColumn !== null) {
+            pickerColumn.setValue(this.value);
+        }
+    }
+    render() {
+        const { color, disabled, ariaLabel } = this;
+        const mode = ionicGlobal.getIonMode(this);
+        return (index.h(index.Host, { class: theme.createColorClasses(color, {
+                [mode]: true,
+                ['option-disabled']: disabled,
+            }) }, index.h("button", { tabindex: "-1", "aria-label": ariaLabel, disabled: disabled, onClick: () => this.onClick() }, index.h("slot", null))));
+    }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "aria-label": ["onAriaLabelChange"]
+    }; }
+};
+PickerColumnOption.style = {
+    ios: pickerColumnOptionIosCss,
+    md: pickerColumnOptionMdCss
+};
+
+exports.ion_picker_column_option = PickerColumnOption;

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

@@ -6,18 +6,16 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-71f41461.js');
+const index$1 = require('./index-c8d52405.js');
 const helpers = require('./helpers-76bb7efb.js');
 const haptic = require('./haptic-b882e0bb.js');
 const ionicGlobal = require('./ionic-global-c70c3fb5.js');
 const theme = require('./theme-d1c573d2.js');
 require('./capacitor-c04564bf.js');
-require('./index-c8d52405.js');
 
-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 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 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 {
+const PickerColumn = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.ionChange = index.createEvent(this, "ionChange", 7);
@@ -25,11 +23,11 @@ const PickerColumnInternal = class {
         this.isColumnVisible = false;
         this.canExitInputMode = true;
         this.centerPickerItemInView = (target, smooth = true, canExitInputMode = true) => {
-            const { el, isColumnVisible } = this;
-            if (isColumnVisible) {
+            const { isColumnVisible, scrollEl } = this;
+            if (isColumnVisible && scrollEl) {
                 // (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 (el.scrollTop !== top) {
+                if (scrollEl.scrollTop !== top) {
                     /**
                      * Setting this flag prevents input
                      * mode from exiting in the picker column's
@@ -38,7 +36,7 @@ const PickerColumnInternal = class {
                      * of these can cause a scroll to occur.
                      */
                     this.canExitInputMode = canExitInputMode;
-                    el.scroll({
+                    scrollEl.scroll({
                         top,
                         left: 0,
                         behavior: smooth ? 'smooth' : undefined,
@@ -49,11 +47,9 @@ const PickerColumnInternal = 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);
             }
         };
         /**
@@ -107,11 +103,13 @@ const PickerColumnInternal = class {
              * be disabled on Android.
              */
             const enableHaptics = ionicGlobal.isPlatform('ios');
-            const { el } = this;
+            const { el, scrollEl } = this;
             let timeout;
             let activeEl = this.activeItem;
             const scrollCallback = () => {
                 helpers.raf(() => {
+                    if (!scrollEl)
+                        return;
                     if (timeout) {
                         clearTimeout(timeout);
                         timeout = undefined;
@@ -124,21 +122,54 @@ const PickerColumnInternal = class {
                      * Select item in the center of the column
                      * which is the month/year that we want to select
                      */
-                    const bbox = el.getBoundingClientRect();
+                    const bbox = scrollEl.getBoundingClientRect();
                     const centerX = bbox.x + bbox.width / 2;
                     const centerY = bbox.y + bbox.height / 2;
-                    const activeElement = el.shadowRoot.elementFromPoint(centerX, centerY);
-                    if (activeEl !== null) {
+                    /**
+                     * 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) {
                         this.setPickerItemActiveState(activeEl, false);
                     }
-                    if (activeElement === null || activeElement.disabled) {
+                    if (newActiveElement === undefined || newActiveElement.disabled) {
                         return;
                     }
                     /**
                      * If we are selecting a new value,
                      * we need to run haptics again.
                      */
-                    if (activeElement !== activeEl) {
+                    if (newActiveElement !== activeEl) {
                         enableHaptics && haptic.hapticSelectionChanged();
                         if (this.canExitInputMode) {
                             /**
@@ -155,8 +186,8 @@ const PickerColumnInternal = class {
                             this.exitInputMode();
                         }
                     }
-                    activeEl = activeElement;
-                    this.setPickerItemActiveState(activeElement, true);
+                    activeEl = newActiveElement;
+                    this.setPickerItemActiveState(newActiveElement, true);
                     timeout = setTimeout(() => {
                         this.isScrolling = false;
                         enableHaptics && haptic.hapticSelectionEnd();
@@ -178,20 +209,7 @@ const PickerColumnInternal = class {
                          * case, we should exit input mode.
                          */
                         this.canExitInputMode = true;
-                        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);
-                        }
+                        this.setValue(newActiveElement.value);
                     }, 250);
                 });
             };
@@ -200,9 +218,11 @@ const PickerColumnInternal = class {
              * does not fire when component is initially shown.
              */
             helpers.raf(() => {
-                el.addEventListener('scroll', scrollCallback);
+                if (!scrollEl)
+                    return;
+                scrollEl.addEventListener('scroll', scrollCallback);
                 this.destroyScrollListener = () => {
-                    el.removeEventListener('scroll', scrollCallback);
+                    scrollEl.removeEventListener('scroll', scrollCallback);
                 };
             });
         };
@@ -230,7 +250,6 @@ const PickerColumnInternal = class {
         };
         this.isActive = false;
         this.disabled = false;
-        this.items = [];
         this.value = undefined;
         this.color = 'primary';
         this.numericInput = false;
@@ -241,7 +260,7 @@ const PickerColumnInternal = class {
              * Only scroll the active item into view when the picker column
              * is actively visible to the user.
              */
-            this.scrollActiveItemIntoView();
+            this.scrollActiveItemIntoView(true);
         }
     }
     /**
@@ -279,36 +298,33 @@ const PickerColumnInternal = class {
             }
         };
         new IntersectionObserver(visibleCallback, { threshold: 0.001 }).observe(this.el);
-        const parentEl = (this.parentEl = this.el.closest('ion-picker-internal'));
+        const parentEl = (this.parentEl = this.el.closest('ion-picker'));
         if (parentEl !== null) {
             // TODO(FW-2832): type
             parentEl.addEventListener('ionInputModeChange', (ev) => this.inputModeChange(ev));
         }
     }
     componentDidRender() {
-        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);
+        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);
             }
         }
     }
     /** @internal  */
-    async scrollActiveItemIntoView() {
+    async scrollActiveItemIntoView(smooth = false) {
         const activeEl = this.activeItem;
         if (activeEl) {
-            this.centerPickerItemInView(activeEl, false, false);
+            this.centerPickerItemInView(activeEl, smooth, false);
         }
     }
     /**
@@ -319,52 +335,53 @@ const PickerColumnInternal = class {
      * @internal
      */
     async setValue(value) {
-        const { items } = this;
+        if (this.disabled === true || this.value === value) {
+            return;
+        }
         this.value = value;
-        const findItem = items.find((item) => item.value === value && item.disabled !== true);
-        if (findItem) {
-            this.ionChange.emit(findItem);
+        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();
         }
     }
     get activeItem() {
-        // 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);
+        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;
+        });
     }
     render() {
-        const { items, color, disabled: pickerDisabled, isActive, numericInput } = this;
+        const { color, disabled, 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-internal there instead.
-         */
-        return (index.h(index.Host, { exportparts: `${PICKER_ITEM_PART}, ${PICKER_ITEM_ACTIVE_PART}`, disabled: pickerDisabled, tabindex: pickerDisabled ? null : 0, class: theme.createColorClasses(color, {
+        return (index.h(index.Host, { class: theme.createColorClasses(color, {
                 [mode]: true,
                 ['picker-column-active']: isActive,
                 ['picker-column-numeric-input']: numericInput,
-            }) }, 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")));
+                ['picker-column-disabled']: disabled,
+            }) }, index.h("slot", { name: "prefix" }), index.h("div", { class: "picker-opts", tabindex: disabled ? undefined : 0, ref: (el) => {
+                this.scrollEl = el;
+            } }, index.h("div", { class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), index.h("div", { class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), index.h("div", { class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), index.h("slot", null), index.h("div", { class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), index.h("div", { class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), index.h("div", { class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0")), index.h("slot", { name: "suffix" })));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
         "value": ["valueChange"]
     }; }
 };
-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
-};
+const PICKER_ITEM_ACTIVE_CLASS = 'option-active';
+PickerColumn.style = pickerColumnCss;
 
-exports.ion_picker_column_internal = PickerColumnInternal;
+exports.ion_picker_column = PickerColumn;