@ionic/core 7.5.8-dev.11701791090.18ebbea8 → 7.5.8-dev.11701806358.1ca1b519

package/hydrate/index.js

@@ -8355,7 +8355,7 @@ const focusLastDescendant = (ref, overlay) => {
  * Should NOT include: Toast
  */
 const trapKeyboardFocus = (ev, doc) => {
-    const lastOverlay = getPresentedOverlay(doc, 'ion-alert,ion-action-sheet,ion-loading,ion-modal,ion-picker,ion-popover');
+    const lastOverlay = getPresentedOverlay(doc, 'ion-alert,ion-action-sheet,ion-loading,ion-modal,ion-picker-legacy,ion-popover');
     const target = ev.target;
     /**
      * If no active overlay, ignore this event.
@@ -8540,7 +8540,7 @@ const dismissOverlay = (doc, data, role, overlayTag, id) => {
  */
 const getOverlays = (doc, selector) => {
     if (selector === undefined) {
-        selector = 'ion-alert,ion-action-sheet,ion-loading,ion-modal,ion-picker,ion-popover,ion-toast';
+        selector = 'ion-alert,ion-action-sheet,ion-loading,ion-modal,ion-picker-legacy,ion-popover,ion-toast';
     }
     return Array.from(doc.querySelectorAll(selector)).filter((c) => c.overlayIndex > 0);
 };
@@ -8606,6 +8606,7 @@ const present = async (overlay, name, iosEnterAnimation, mdEnterAnimation, opts)
         return;
     }
     setRootAriaHidden(true);
+    document.body.classList.add(BACKDROP_NO_SCROLL);
     overlay.presented = true;
     overlay.willPresent.emit();
     (_a = overlay.willPresentShorthand) === null || _a === void 0 ? void 0 : _a.emit();
@@ -8668,12 +8669,14 @@ const dismiss = async (overlay, data, role, name, iosLeaveAnimation, mdLeaveAnim
     if (!overlay.presented) {
         return false;
     }
+    const lastOverlay = doc !== undefined && getPresentedOverlays(doc).length === 1;
     /**
      * If this is the last visible overlay then
      * we want to re-add the root to the accessibility tree.
      */
-    if (doc !== undefined && getPresentedOverlays(doc).length === 1) {
+    if (lastOverlay) {
         setRootAriaHidden(false);
+        document.body.classList.remove(BACKDROP_NO_SCROLL);
     }
     overlay.presented = false;
     try {
@@ -11189,21 +11192,10 @@ class Backdrop {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.ionBackdropTap = createEvent(this, "ionBackdropTap", 7);
-        this.blocker = GESTURE_CONTROLLER.createBlocker({
-            disableScroll: true,
-        });
         this.visible = true;
         this.tappable = true;
         this.stopPropagation = true;
     }
-    connectedCallback() {
-        if (this.stopPropagation) {
-            this.blocker.block();
-        }
-    }
-    disconnectedCallback() {
-        this.blocker.unblock();
-    }
     onMouseDown(ev) {
         this.emitTap(ev);
     }
@@ -12654,7 +12646,7 @@ const isRTL$1 = (hostEl) => {
     return (document === null || document === void 0 ? void 0 : document.dir.toLowerCase()) === 'rtl';
 };
 
-const contentCss = "/*!@:host*/.sc-ion-content-h{--background:var(--ion-background-color, #fff);--color:var(--ion-text-color, #000);--padding-top:0px;--padding-bottom:0px;--padding-start:0px;--padding-end:0px;--keyboard-offset:0px;--offset-top:0px;--offset-bottom:0px;--overflow:auto;display:block;position:relative;-ms-flex:1;flex:1;width:100%;height:100%;margin:0 !important;padding:0 !important;font-family:var(--ion-font-family, inherit);contain:size style}/*!@:host(.ion-color) .inner-scroll*/.ion-color.sc-ion-content-h .inner-scroll.sc-ion-content{background:var(--ion-color-base);color:var(--ion-color-contrast)}/*!@:host(.outer-content)*/.outer-content.sc-ion-content-h{--background:var(--ion-color-step-50, #f2f2f2)}/*!@#background-content*/#background-content.sc-ion-content{left:0px;right:0px;top:calc(var(--offset-top) * -1);bottom:calc(var(--offset-bottom) * -1);position:absolute;background:var(--background)}/*!@.inner-scroll*/.inner-scroll.sc-ion-content{left:0px;right:0px;top:calc(var(--offset-top) * -1);bottom:calc(var(--offset-bottom) * -1);-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:calc(var(--padding-top) + var(--offset-top));padding-bottom:calc(var(--padding-bottom) + var(--keyboard-offset) + var(--offset-bottom));position:absolute;color:var(--color);-webkit-box-sizing:border-box;box-sizing:border-box;overflow:hidden;-ms-touch-action:pan-x pan-y pinch-zoom;touch-action:pan-x pan-y pinch-zoom}/*!@.scroll-y,\n.scroll-x*/.scroll-y.sc-ion-content,.scroll-x.sc-ion-content{-webkit-overflow-scrolling:touch;z-index:0;will-change:scroll-position}/*!@.scroll-y*/.scroll-y.sc-ion-content{overflow-y:var(--overflow);overscroll-behavior-y:contain}/*!@.scroll-x*/.scroll-x.sc-ion-content{overflow-x:var(--overflow);overscroll-behavior-x:contain}/*!@.overscroll::before,\n.overscroll::after*/.overscroll.sc-ion-content::before,.overscroll.sc-ion-content::after{position:absolute;width:1px;height:1px;content:\"\"}/*!@.overscroll::before*/.overscroll.sc-ion-content::before{bottom:-1px}/*!@.overscroll::after*/.overscroll.sc-ion-content::after{top:-1px}/*!@:host(.content-sizing)*/.content-sizing.sc-ion-content-h{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;min-height:0;contain:none}/*!@:host(.content-sizing) .inner-scroll*/.content-sizing.sc-ion-content-h .inner-scroll.sc-ion-content{position:relative;top:0;bottom:0;margin-top:calc(var(--offset-top) * -1);margin-bottom:calc(var(--offset-bottom) * -1)}/*!@.transition-effect*/.transition-effect.sc-ion-content{display:none;position:absolute;width:100%;height:100vh;opacity:0;pointer-events:none}/*!@:host(.content-ltr) .transition-effect*/.content-ltr.sc-ion-content-h .transition-effect.sc-ion-content{left:-100%}/*!@:host(.content-rtl) .transition-effect*/.content-rtl.sc-ion-content-h .transition-effect.sc-ion-content{right:-100%}/*!@.transition-cover*/.transition-cover.sc-ion-content{position:absolute;right:0;width:100%;height:100%;background:black;opacity:0.1}/*!@.transition-shadow*/.transition-shadow.sc-ion-content{display:block;position:absolute;width:100%;height:100%;-webkit-box-shadow:inset -9px 0 9px 0 rgba(0, 0, 100, 0.03);box-shadow:inset -9px 0 9px 0 rgba(0, 0, 100, 0.03)}/*!@:host(.content-ltr) .transition-shadow*/.content-ltr.sc-ion-content-h .transition-shadow.sc-ion-content{right:0}/*!@:host(.content-rtl) .transition-shadow*/.content-rtl.sc-ion-content-h .transition-shadow.sc-ion-content{left:0;-webkit-transform:scaleX(-1);transform:scaleX(-1)}/*!@::slotted([slot=fixed])*/.sc-ion-content-s>[slot=fixed]{position:absolute;-webkit-transform:translateZ(0);transform:translateZ(0)}";
+const contentCss = "/*!@:host*/.sc-ion-content-h{--background:var(--ion-background-color, #fff);--color:var(--ion-text-color, #000);--padding-top:0px;--padding-bottom:0px;--padding-start:0px;--padding-end:0px;--keyboard-offset:0px;--offset-top:0px;--offset-bottom:0px;--overflow:auto;display:block;position:relative;-ms-flex:1;flex:1;width:100%;height:100%;margin:0 !important;padding:0 !important;font-family:var(--ion-font-family, inherit);contain:size style}/*!@:host(.ion-color) .inner-scroll*/.ion-color.sc-ion-content-h .inner-scroll.sc-ion-content{background:var(--ion-color-base);color:var(--ion-color-contrast)}/*!@#background-content*/#background-content.sc-ion-content{left:0px;right:0px;top:calc(var(--offset-top) * -1);bottom:calc(var(--offset-bottom) * -1);position:absolute;background:var(--background)}/*!@.inner-scroll*/.inner-scroll.sc-ion-content{left:0px;right:0px;top:calc(var(--offset-top) * -1);bottom:calc(var(--offset-bottom) * -1);-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:calc(var(--padding-top) + var(--offset-top));padding-bottom:calc(var(--padding-bottom) + var(--keyboard-offset) + var(--offset-bottom));position:absolute;color:var(--color);-webkit-box-sizing:border-box;box-sizing:border-box;overflow:hidden;-ms-touch-action:pan-x pan-y pinch-zoom;touch-action:pan-x pan-y pinch-zoom}/*!@.scroll-y,\n.scroll-x*/.scroll-y.sc-ion-content,.scroll-x.sc-ion-content{-webkit-overflow-scrolling:touch;z-index:0;will-change:scroll-position}/*!@.scroll-y*/.scroll-y.sc-ion-content{overflow-y:var(--overflow);overscroll-behavior-y:contain}/*!@.scroll-x*/.scroll-x.sc-ion-content{overflow-x:var(--overflow);overscroll-behavior-x:contain}/*!@.overscroll::before,\n.overscroll::after*/.overscroll.sc-ion-content::before,.overscroll.sc-ion-content::after{position:absolute;width:1px;height:1px;content:\"\"}/*!@.overscroll::before*/.overscroll.sc-ion-content::before{bottom:-1px}/*!@.overscroll::after*/.overscroll.sc-ion-content::after{top:-1px}/*!@:host(.content-sizing)*/.content-sizing.sc-ion-content-h{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;min-height:0;contain:none}/*!@:host(.content-sizing) .inner-scroll*/.content-sizing.sc-ion-content-h .inner-scroll.sc-ion-content{position:relative;top:0;bottom:0;margin-top:calc(var(--offset-top) * -1);margin-bottom:calc(var(--offset-bottom) * -1)}/*!@.transition-effect*/.transition-effect.sc-ion-content{display:none;position:absolute;width:100%;height:100vh;opacity:0;pointer-events:none}/*!@:host(.content-ltr) .transition-effect*/.content-ltr.sc-ion-content-h .transition-effect.sc-ion-content{left:-100%}/*!@:host(.content-rtl) .transition-effect*/.content-rtl.sc-ion-content-h .transition-effect.sc-ion-content{right:-100%}/*!@.transition-cover*/.transition-cover.sc-ion-content{position:absolute;right:0;width:100%;height:100%;background:black;opacity:0.1}/*!@.transition-shadow*/.transition-shadow.sc-ion-content{display:block;position:absolute;width:100%;height:100%;-webkit-box-shadow:inset -9px 0 9px 0 rgba(0, 0, 100, 0.03);box-shadow:inset -9px 0 9px 0 rgba(0, 0, 100, 0.03)}/*!@:host(.content-ltr) .transition-shadow*/.content-ltr.sc-ion-content-h .transition-shadow.sc-ion-content{right:0}/*!@:host(.content-rtl) .transition-shadow*/.content-rtl.sc-ion-content-h .transition-shadow.sc-ion-content{left:0;-webkit-transform:scaleX(-1);transform:scaleX(-1)}/*!@::slotted([slot=fixed])*/.sc-ion-content-s>[slot=fixed]{position:absolute;-webkit-transform:translateZ(0);transform:translateZ(0)}";
 
 /**
  * @slot - Content is placed in the scrollable area if provided without a slot.
@@ -14526,7 +14518,7 @@ const getMonthColumnData = (locale, refParts, minParts, maxParts, monthValues, f
  * @param minParts The minimum bound on the date that can be returned
  * @param maxParts The maximum bound on the date that can be returned
  * @param dayValues The allowed date values
- * @returns Date data to be used in ion-picker-column-internal
+ * @returns Date data to be used in ion-picker-column
  */
 const getDayColumnData = (locale, refParts, minParts, maxParts, dayValues, formatOptions = {
     day: 'numeric',
@@ -14873,9 +14865,9 @@ const getHighlightStyles = (highlightedDates, dateIsoString, el) => {
     return undefined;
 };
 
-const datetimeIosCss = "/*!@:host*/.sc-ion-datetime-ios-h{display:-ms-flexbox;display:flex;-ms-flex-flow:column;flex-flow:column;background:var(--background);overflow:hidden}/*!@ion-picker-column-internal*/ion-picker-column-internal.sc-ion-datetime-ios{min-width:26px}/*!@:host(.datetime-size-fixed)*/.datetime-size-fixed.sc-ion-datetime-ios-h{width:auto;height:auto}/*!@:host(.datetime-size-fixed:not(.datetime-prefer-wheel))*/.datetime-size-fixed.sc-ion-datetime-ios-h:not(.datetime-prefer-wheel){max-width:350px}/*!@:host(.datetime-size-fixed.datetime-prefer-wheel)*/.datetime-size-fixed.datetime-prefer-wheel.sc-ion-datetime-ios-h{min-width:350px;max-width:-webkit-max-content;max-width:-moz-max-content;max-width:max-content}/*!@:host(.datetime-size-cover)*/.datetime-size-cover.sc-ion-datetime-ios-h{width:100%}/*!@:host .calendar-body,\n:host .datetime-year*/.sc-ion-datetime-ios-h .calendar-body.sc-ion-datetime-ios,.sc-ion-datetime-ios-h .datetime-year.sc-ion-datetime-ios{opacity:0}/*!@:host(:not(.datetime-ready)) .datetime-year*/.sc-ion-datetime-ios-h:not(.datetime-ready) .datetime-year.sc-ion-datetime-ios{position:absolute;pointer-events:none}/*!@:host(.datetime-ready) .calendar-body*/.datetime-ready.sc-ion-datetime-ios-h .calendar-body.sc-ion-datetime-ios{opacity:1}/*!@:host(.datetime-ready) .datetime-year*/.datetime-ready.sc-ion-datetime-ios-h .datetime-year.sc-ion-datetime-ios{display:none;opacity:1}/*!@:host .wheel-order-year-first .day-column*/.sc-ion-datetime-ios-h .wheel-order-year-first.sc-ion-datetime-ios .day-column.sc-ion-datetime-ios{-ms-flex-order:3;order:3;text-align:end}/*!@:host .wheel-order-year-first .month-column*/.sc-ion-datetime-ios-h .wheel-order-year-first.sc-ion-datetime-ios .month-column.sc-ion-datetime-ios{-ms-flex-order:2;order:2;text-align:end}/*!@:host .wheel-order-year-first .year-column*/.sc-ion-datetime-ios-h .wheel-order-year-first.sc-ion-datetime-ios .year-column.sc-ion-datetime-ios{-ms-flex-order:1;order:1;text-align:start}/*!@:host .datetime-calendar,\n:host .datetime-year*/.sc-ion-datetime-ios-h .datetime-calendar.sc-ion-datetime-ios,.sc-ion-datetime-ios-h .datetime-year.sc-ion-datetime-ios{display:-ms-flexbox;display:flex;-ms-flex:1 1 auto;flex:1 1 auto;-ms-flex-flow:column;flex-flow:column}/*!@:host(.show-month-and-year) .datetime-year*/.show-month-and-year.sc-ion-datetime-ios-h .datetime-year.sc-ion-datetime-ios{display:-ms-flexbox;display:flex}@supports (background: -webkit-named-image(apple-pay-logo-black)) and (not (aspect-ratio: 1/1)){/*!@:host(.show-month-and-year) .calendar-next-prev,\n  :host(.show-month-and-year) .calendar-days-of-week,\n  :host(.show-month-and-year) .calendar-body,\n  :host(.show-month-and-year) .datetime-time*/.show-month-and-year.sc-ion-datetime-ios-h .calendar-next-prev.sc-ion-datetime-ios,.show-month-and-year.sc-ion-datetime-ios-h .calendar-days-of-week.sc-ion-datetime-ios,.show-month-and-year.sc-ion-datetime-ios-h .calendar-body.sc-ion-datetime-ios,.show-month-and-year.sc-ion-datetime-ios-h .datetime-time.sc-ion-datetime-ios{position:absolute;visibility:hidden;pointer-events:none}/*!@@supports (inset-inline-start: 0)*/@supports .sc-ion-datetime-ios (inset-inline-start.sc-ion-datetime-ios: 0).sc-ion-datetime-ios{.sc-ion-datetime-ios-h.show-month-and-year .calendar-next-prev,.sc-ion-datetime-ios-h.show-month-and-year .calendar-days-of-week,.sc-ion-datetime-ios-h.show-month-and-year .calendar-body,.sc-ion-datetime-ios-h.show-month-and-year .datetime-time{inset-inline-start:-99999px}}/*!@@supports not (inset-inline-start: 0)*/@supports .sc-ion-datetime-ios not.sc-ion-datetime-ios (inset-inline-start.sc-ion-datetime-ios: 0).sc-ion-datetime-ios{.sc-ion-datetime-ios-h.show-month-and-year .calendar-next-prev,.sc-ion-datetime-ios-h.show-month-and-year .calendar-days-of-week,.sc-ion-datetime-ios-h.show-month-and-year .calendar-body,.sc-ion-datetime-ios-h.show-month-and-year .datetime-time{left:-99999px}.sc-ion-datetime-ios-h[dir=rtl].sc-ion-datetime-ios-h.show-month-and-year .calendar-next-prev,[dir=rtl] .sc-ion-datetime-ios-h.sc-ion-datetime-ios-h.show-month-and-year .calendar-next-prev,.sc-ion-datetime-ios-h[dir=rtl].show-month-and-year .calendar-next-prev,[dir=rtl] .sc-ion-datetime-ios-h.show-month-and-year .calendar-next-prev,.sc-ion-datetime-ios-h[dir=rtl].sc-ion-datetime-ios-h.show-month-and-year .calendar-days-of-week,[dir=rtl] .sc-ion-datetime-ios-h.sc-ion-datetime-ios-h.show-month-and-year .calendar-days-of-week,.sc-ion-datetime-ios-h[dir=rtl].show-month-and-year .calendar-days-of-week,[dir=rtl] .sc-ion-datetime-ios-h.show-month-and-year .calendar-days-of-week,.sc-ion-datetime-ios-h[dir=rtl].sc-ion-datetime-ios-h.show-month-and-year .calendar-body,[dir=rtl] .sc-ion-datetime-ios-h.sc-ion-datetime-ios-h.show-month-and-year .calendar-body,.sc-ion-datetime-ios-h[dir=rtl].show-month-and-year .calendar-body,[dir=rtl] .sc-ion-datetime-ios-h.show-month-and-year .calendar-body,.sc-ion-datetime-ios-h[dir=rtl].sc-ion-datetime-ios-h.show-month-and-year .datetime-time,[dir=rtl] .sc-ion-datetime-ios-h.sc-ion-datetime-ios-h.show-month-and-year .datetime-time,.sc-ion-datetime-ios-h[dir=rtl].show-month-and-year .datetime-time,[dir=rtl] .sc-ion-datetime-ios-h.show-month-and-year .datetime-time{left:unset;right:unset;right:-99999px}@supports selector(:dir(rtl)){.sc-ion-datetime-ios-h.show-month-and-year:dir(rtl) .calendar-next-prev,.sc-ion-datetime-ios-h.show-month-and-year:dir(rtl) .calendar-days-of-week,.sc-ion-datetime-ios-h.show-month-and-year:dir(rtl) .calendar-body,.sc-ion-datetime-ios-h.show-month-and-year:dir(rtl) .datetime-time{left:unset;right:unset;right:-99999px}}}}@supports (not (background: -webkit-named-image(apple-pay-logo-black))) or ((background: -webkit-named-image(apple-pay-logo-black)) and (aspect-ratio: 1/1)){/*!@:host(.show-month-and-year) .calendar-next-prev,\n  :host(.show-month-and-year) .calendar-days-of-week,\n  :host(.show-month-and-year) .calendar-body,\n  :host(.show-month-and-year) .datetime-time*/.show-month-and-year.sc-ion-datetime-ios-h .calendar-next-prev.sc-ion-datetime-ios,.show-month-and-year.sc-ion-datetime-ios-h .calendar-days-of-week.sc-ion-datetime-ios,.show-month-and-year.sc-ion-datetime-ios-h .calendar-body.sc-ion-datetime-ios,.show-month-and-year.sc-ion-datetime-ios-h .datetime-time.sc-ion-datetime-ios{display:none}}/*!@:host(.month-year-picker-open) .datetime-footer*/.month-year-picker-open.sc-ion-datetime-ios-h .datetime-footer.sc-ion-datetime-ios{display:none}/*!@:host(.datetime-disabled)*/.datetime-disabled.sc-ion-datetime-ios-h{pointer-events:none}/*!@:host(.datetime-disabled) .calendar-days-of-week,\n:host(.datetime-disabled) .datetime-time*/.datetime-disabled.sc-ion-datetime-ios-h .calendar-days-of-week.sc-ion-datetime-ios,.datetime-disabled.sc-ion-datetime-ios-h .datetime-time.sc-ion-datetime-ios{opacity:0.4}/*!@:host(.datetime-readonly)*/.datetime-readonly.sc-ion-datetime-ios-h{pointer-events:none}/*!@:host(.datetime-readonly) .calendar-action-buttons,\n:host(.datetime-readonly) .calendar-body,\n:host(.datetime-readonly) .datetime-year*/.datetime-readonly.sc-ion-datetime-ios-h .calendar-action-buttons.sc-ion-datetime-ios,.datetime-readonly.sc-ion-datetime-ios-h .calendar-body.sc-ion-datetime-ios,.datetime-readonly.sc-ion-datetime-ios-h .datetime-year.sc-ion-datetime-ios{pointer-events:initial}/*!@:host(.datetime-readonly) .calendar-day[disabled]:not(.calendar-day-constrained),\n:host(.datetime-readonly) .datetime-action-buttons ion-button[disabled]*/.datetime-readonly.sc-ion-datetime-ios-h .calendar-day[disabled].sc-ion-datetime-ios:not(.calendar-day-constrained),.datetime-readonly.sc-ion-datetime-ios-h .datetime-action-buttons.sc-ion-datetime-ios ion-button[disabled].sc-ion-datetime-ios{opacity:1}/*!@:host .datetime-header .datetime-title*/.sc-ion-datetime-ios-h .datetime-header.sc-ion-datetime-ios .datetime-title.sc-ion-datetime-ios{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}/*!@:host .datetime-action-buttons.has-clear-button*/.sc-ion-datetime-ios-h .datetime-action-buttons.has-clear-button.sc-ion-datetime-ios{width:100%}/*!@:host .datetime-action-buttons ion-buttons*/.sc-ion-datetime-ios-h .datetime-action-buttons.sc-ion-datetime-ios ion-buttons.sc-ion-datetime-ios{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between}/*!@.datetime-action-buttons .datetime-action-buttons-container*/.datetime-action-buttons.sc-ion-datetime-ios .datetime-action-buttons-container.sc-ion-datetime-ios{display:-ms-flexbox;display:flex}/*!@:host .calendar-action-buttons*/.sc-ion-datetime-ios-h .calendar-action-buttons.sc-ion-datetime-ios{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between}/*!@:host .calendar-action-buttons ion-item,\n:host .calendar-action-buttons ion-button*/.sc-ion-datetime-ios-h .calendar-action-buttons.sc-ion-datetime-ios ion-item.sc-ion-datetime-ios,.sc-ion-datetime-ios-h .calendar-action-buttons.sc-ion-datetime-ios ion-button.sc-ion-datetime-ios{--background:translucent}/*!@:host .calendar-action-buttons ion-item ion-label*/.sc-ion-datetime-ios-h .calendar-action-buttons.sc-ion-datetime-ios ion-item.sc-ion-datetime-ios ion-label.sc-ion-datetime-ios{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}/*!@:host .calendar-action-buttons ion-item ion-icon*/.sc-ion-datetime-ios-h .calendar-action-buttons.sc-ion-datetime-ios ion-item.sc-ion-datetime-ios ion-icon.sc-ion-datetime-ios{-webkit-padding-start:4px;padding-inline-start:4px;-webkit-padding-end:0;padding-inline-end:0;padding-top:0;padding-bottom:0}/*!@:host .calendar-days-of-week*/.sc-ion-datetime-ios-h .calendar-days-of-week.sc-ion-datetime-ios{display:grid;grid-template-columns:repeat(7, 1fr);text-align:center}/*!@.calendar-days-of-week .day-of-week*/.calendar-days-of-week.sc-ion-datetime-ios .day-of-week.sc-ion-datetime-ios{-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;margin-top:0;margin-bottom:0}/*!@:host .calendar-body*/.sc-ion-datetime-ios-h .calendar-body.sc-ion-datetime-ios{display:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1;-webkit-scroll-snap-type:x mandatory;-ms-scroll-snap-type:x mandatory;scroll-snap-type:x mandatory;overflow-x:scroll;overflow-y:hidden;scrollbar-width:none;outline:none}/*!@:host .calendar-body .calendar-month*/.sc-ion-datetime-ios-h .calendar-body.sc-ion-datetime-ios .calendar-month.sc-ion-datetime-ios{display:-ms-flexbox;display:flex;-ms-flex-flow:column;flex-flow:column;scroll-snap-align:start;scroll-snap-stop:always;-ms-flex-negative:0;flex-shrink:0;width:100%}/*!@:host .calendar-body .calendar-month-disabled*/.sc-ion-datetime-ios-h .calendar-body.sc-ion-datetime-ios .calendar-month-disabled.sc-ion-datetime-ios{scroll-snap-align:none}/*!@:host .calendar-body::-webkit-scrollbar*/.sc-ion-datetime-ios-h .calendar-body.sc-ion-datetime-ios::-webkit-scrollbar{display:none}/*!@:host .calendar-body .calendar-month-grid*/.sc-ion-datetime-ios-h .calendar-body.sc-ion-datetime-ios .calendar-month-grid.sc-ion-datetime-ios{display:grid;grid-template-columns:repeat(7, 1fr)}/*!@:host .calendar-day-wrapper*/.sc-ion-datetime-ios-h .calendar-day-wrapper.sc-ion-datetime-ios{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;min-width:0;min-height:0;overflow:visible}/*!@.calendar-day*/.calendar-day.sc-ion-datetime-ios{border-radius:50%;-webkit-padding-start:0px;padding-inline-start:0px;-webkit-padding-end:0px;padding-inline-end:0px;padding-top:0px;padding-bottom:0px;-webkit-margin-start:0px;margin-inline-start:0px;-webkit-margin-end:0px;margin-inline-end:0px;margin-top:0px;margin-bottom:0px;display:-ms-flexbox;display:flex;position:relative;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;border:none;outline:none;background:none;color:currentColor;font-family:var(--ion-font-family, inherit);cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;z-index:0}/*!@:host .calendar-day[disabled]*/.sc-ion-datetime-ios-h .calendar-day[disabled].sc-ion-datetime-ios{pointer-events:none;opacity:0.4}/*!@.calendar-day:focus*/.calendar-day.sc-ion-datetime-ios:focus{background:rgba(var(--ion-color-base-rgb), 0.2);-webkit-box-shadow:0px 0px 0px 4px rgba(var(--ion-color-base-rgb), 0.2);box-shadow:0px 0px 0px 4px rgba(var(--ion-color-base-rgb), 0.2)}/*!@:host .datetime-time*/.sc-ion-datetime-ios-h .datetime-time.sc-ion-datetime-ios{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between}/*!@:host(.datetime-presentation-time) .datetime-time*/.datetime-presentation-time.sc-ion-datetime-ios-h .datetime-time.sc-ion-datetime-ios{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0}/*!@:host ion-popover*/.sc-ion-datetime-ios-h ion-popover.sc-ion-datetime-ios{--height:200px}/*!@:host .time-header*/.sc-ion-datetime-ios-h .time-header.sc-ion-datetime-ios{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}/*!@:host .time-body*/.sc-ion-datetime-ios-h .time-body.sc-ion-datetime-ios{border-radius:8px;-webkit-padding-start:12px;padding-inline-start:12px;-webkit-padding-end:12px;padding-inline-end:12px;padding-top:6px;padding-bottom:6px;display:-ms-flexbox;display:flex;border:none;background:var(--ion-color-step-300, #edeef0);color:var(--ion-text-color, #000);font-family:inherit;font-size:inherit;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}/*!@:host .time-body-active*/.sc-ion-datetime-ios-h .time-body-active.sc-ion-datetime-ios{color:var(--ion-color-base)}/*!@:host(.in-item)*/.in-item.sc-ion-datetime-ios-h{position:static}/*!@:host(.show-month-and-year) .calendar-action-buttons ion-item*/.show-month-and-year.sc-ion-datetime-ios-h .calendar-action-buttons.sc-ion-datetime-ios ion-item.sc-ion-datetime-ios{--color:var(--ion-color-base)}/*!@:host*/.sc-ion-datetime-ios-h{--background:var(--ion-color-light, #ffffff);--background-rgb:var(--ion-color-light-rgb);--title-color:var(--ion-color-step-600, #666666)}/*!@:host(.datetime-presentation-date-time:not(.datetime-prefer-wheel)),\n:host(.datetime-presentation-time-date:not(.datetime-prefer-wheel)),\n:host(.datetime-presentation-date:not(.datetime-prefer-wheel))*/.datetime-presentation-date-time.sc-ion-datetime-ios-h:not(.datetime-prefer-wheel),.datetime-presentation-time-date.sc-ion-datetime-ios-h:not(.datetime-prefer-wheel),.datetime-presentation-date.sc-ion-datetime-ios-h:not(.datetime-prefer-wheel){min-height:350px}/*!@:host .datetime-header*/.sc-ion-datetime-ios-h .datetime-header.sc-ion-datetime-ios{-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px;padding-top:16px;padding-bottom:16px;border-bottom:0.55px solid var(--ion-color-step-200, #cccccc);font-size:min(0.875rem, 22.4px)}/*!@:host .datetime-header .datetime-title*/.sc-ion-datetime-ios-h .datetime-header.sc-ion-datetime-ios .datetime-title.sc-ion-datetime-ios{color:var(--title-color)}/*!@:host .datetime-header .datetime-selected-date*/.sc-ion-datetime-ios-h .datetime-header.sc-ion-datetime-ios .datetime-selected-date.sc-ion-datetime-ios{margin-top:10px}/*!@:host .calendar-action-buttons ion-item*/.sc-ion-datetime-ios-h .calendar-action-buttons.sc-ion-datetime-ios ion-item.sc-ion-datetime-ios{--padding-start:16px;--background-hover:transparent;--background-activated:transparent;font-size:min(1rem, 25.6px);font-weight:600}/*!@:host .calendar-action-buttons ion-item ion-icon,\n:host .calendar-action-buttons ion-buttons ion-button*/.sc-ion-datetime-ios-h .calendar-action-buttons.sc-ion-datetime-ios ion-item.sc-ion-datetime-ios ion-icon.sc-ion-datetime-ios,.sc-ion-datetime-ios-h .calendar-action-buttons.sc-ion-datetime-ios ion-buttons.sc-ion-datetime-ios ion-button.sc-ion-datetime-ios{color:var(--ion-color-base)}/*!@:host .calendar-action-buttons ion-buttons*/.sc-ion-datetime-ios-h .calendar-action-buttons.sc-ion-datetime-ios ion-buttons.sc-ion-datetime-ios{padding-left:0;padding-right:0;padding-top:8px;padding-bottom:0}/*!@:host .calendar-action-buttons ion-buttons ion-button*/.sc-ion-datetime-ios-h .calendar-action-buttons.sc-ion-datetime-ios ion-buttons.sc-ion-datetime-ios ion-button.sc-ion-datetime-ios{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0}/*!@:host .calendar-days-of-week*/.sc-ion-datetime-ios-h .calendar-days-of-week.sc-ion-datetime-ios{-webkit-padding-start:8px;padding-inline-start:8px;-webkit-padding-end:8px;padding-inline-end:8px;padding-top:0;padding-bottom:0;color:var(--ion-color-step-300, #b3b3b3);font-size:min(0.75rem, 19.2px);font-weight:600;line-height:24px;text-transform:uppercase}@supports (border-radius: mod(1px, 1px)){/*!@.calendar-days-of-week .day-of-week*/.calendar-days-of-week.sc-ion-datetime-ios .day-of-week.sc-ion-datetime-ios{width:clamp(20px, calc(mod(min(1rem, 24px), 24px) * 10), 100%);height:24px;overflow:hidden}/*!@.calendar-day*/.calendar-day.sc-ion-datetime-ios{border-radius:max(8px, mod(min(1rem, 24px), 24px) * 10)}}@supports ((border-radius: mod(1px, 1px)) and (background: -webkit-named-image(apple-pay-logo-black)) and (not (contain-intrinsic-size: none))) or (not (border-radius: mod(1px, 1px))){/*!@.calendar-days-of-week .day-of-week*/.calendar-days-of-week.sc-ion-datetime-ios .day-of-week.sc-ion-datetime-ios{width:auto;height:auto;overflow:initial}/*!@.calendar-day*/.calendar-day.sc-ion-datetime-ios{border-radius:32px}}/*!@:host .calendar-body .calendar-month .calendar-month-grid*/.sc-ion-datetime-ios-h .calendar-body.sc-ion-datetime-ios .calendar-month.sc-ion-datetime-ios .calendar-month-grid.sc-ion-datetime-ios{-webkit-padding-start:8px;padding-inline-start:8px;-webkit-padding-end:8px;padding-inline-end:8px;padding-top:8px;padding-bottom:8px;-ms-flex-align:center;align-items:center;height:calc(100% - 16px)}/*!@:host .calendar-day-wrapper*/.sc-ion-datetime-ios-h .calendar-day-wrapper.sc-ion-datetime-ios{-webkit-padding-start:4px;padding-inline-start:4px;-webkit-padding-end:4px;padding-inline-end:4px;padding-top:4px;padding-bottom:4px;height:0;min-height:1rem}/*!@:host .calendar-day*/.sc-ion-datetime-ios-h .calendar-day.sc-ion-datetime-ios{width:40px;min-width:40px;height:40px;font-size:min(1.25rem, 32px)}/*!@.calendar-day.calendar-day-active*/.calendar-day.calendar-day-active.sc-ion-datetime-ios{background:rgba(var(--ion-color-base-rgb), 0.2)}/*!@:host .calendar-day.calendar-day-today*/.sc-ion-datetime-ios-h .calendar-day.calendar-day-today.sc-ion-datetime-ios{color:var(--ion-color-base)}/*!@:host .calendar-day.calendar-day-active*/.sc-ion-datetime-ios-h .calendar-day.calendar-day-active.sc-ion-datetime-ios{color:var(--ion-color-base);font-weight:600}/*!@:host .calendar-day.calendar-day-today.calendar-day-active*/.sc-ion-datetime-ios-h .calendar-day.calendar-day-today.calendar-day-active.sc-ion-datetime-ios{color:var(--ion-color-contrast)}/*!@:host .datetime-time*/.sc-ion-datetime-ios-h .datetime-time.sc-ion-datetime-ios{-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px;padding-top:8px;padding-bottom:16px;font-size:min(1rem, 25.6px)}/*!@:host .datetime-time .time-header*/.sc-ion-datetime-ios-h .datetime-time.sc-ion-datetime-ios .time-header.sc-ion-datetime-ios{font-weight:600}/*!@:host .datetime-buttons*/.sc-ion-datetime-ios-h .datetime-buttons.sc-ion-datetime-ios{-webkit-padding-start:8px;padding-inline-start:8px;-webkit-padding-end:8px;padding-inline-end:8px;padding-top:8px;padding-bottom:8px;border-top:0.55px solid var(--ion-color-step-200, #cccccc)}/*!@:host .datetime-buttons ::slotted(ion-buttons),\n:host .datetime-buttons ion-buttons*/.sc-ion-datetime-ios-h .datetime-buttons .sc-ion-datetime-ios-s>ion-buttons,.sc-ion-datetime-ios-h .datetime-buttons.sc-ion-datetime-ios ion-buttons.sc-ion-datetime-ios{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between}/*!@:host .datetime-action-buttons*/.sc-ion-datetime-ios-h .datetime-action-buttons.sc-ion-datetime-ios{width:100%}";
+const datetimeIosCss = "/*!@:host*/.sc-ion-datetime-ios-h{display:-ms-flexbox;display:flex;-ms-flex-flow:column;flex-flow:column;background:var(--background);overflow:hidden}/*!@:host(.datetime-size-fixed)*/.datetime-size-fixed.sc-ion-datetime-ios-h{width:auto;height:auto}/*!@:host(.datetime-size-fixed:not(.datetime-prefer-wheel))*/.datetime-size-fixed.sc-ion-datetime-ios-h:not(.datetime-prefer-wheel){max-width:350px}/*!@:host(.datetime-size-fixed.datetime-prefer-wheel)*/.datetime-size-fixed.datetime-prefer-wheel.sc-ion-datetime-ios-h{min-width:350px;max-width:-webkit-max-content;max-width:-moz-max-content;max-width:max-content}/*!@:host(.datetime-size-cover)*/.datetime-size-cover.sc-ion-datetime-ios-h{width:100%}/*!@:host .calendar-body,\n:host .datetime-year*/.sc-ion-datetime-ios-h .calendar-body.sc-ion-datetime-ios,.sc-ion-datetime-ios-h .datetime-year.sc-ion-datetime-ios{opacity:0}/*!@:host(:not(.datetime-ready)) .datetime-year*/.sc-ion-datetime-ios-h:not(.datetime-ready) .datetime-year.sc-ion-datetime-ios{position:absolute;pointer-events:none}/*!@:host(.datetime-ready) .calendar-body*/.datetime-ready.sc-ion-datetime-ios-h .calendar-body.sc-ion-datetime-ios{opacity:1}/*!@:host(.datetime-ready) .datetime-year*/.datetime-ready.sc-ion-datetime-ios-h .datetime-year.sc-ion-datetime-ios{display:none;opacity:1}/*!@:host .wheel-order-year-first .day-column*/.sc-ion-datetime-ios-h .wheel-order-year-first.sc-ion-datetime-ios .day-column.sc-ion-datetime-ios{-ms-flex-order:3;order:3;text-align:end}/*!@:host .wheel-order-year-first .month-column*/.sc-ion-datetime-ios-h .wheel-order-year-first.sc-ion-datetime-ios .month-column.sc-ion-datetime-ios{-ms-flex-order:2;order:2;text-align:end}/*!@:host .wheel-order-year-first .year-column*/.sc-ion-datetime-ios-h .wheel-order-year-first.sc-ion-datetime-ios .year-column.sc-ion-datetime-ios{-ms-flex-order:1;order:1;text-align:start}/*!@:host .datetime-calendar,\n:host .datetime-year*/.sc-ion-datetime-ios-h .datetime-calendar.sc-ion-datetime-ios,.sc-ion-datetime-ios-h .datetime-year.sc-ion-datetime-ios{display:-ms-flexbox;display:flex;-ms-flex:1 1 auto;flex:1 1 auto;-ms-flex-flow:column;flex-flow:column}/*!@:host(.show-month-and-year) .datetime-year*/.show-month-and-year.sc-ion-datetime-ios-h .datetime-year.sc-ion-datetime-ios{display:-ms-flexbox;display:flex}@supports (background: -webkit-named-image(apple-pay-logo-black)) and (not (aspect-ratio: 1/1)){/*!@:host(.show-month-and-year) .calendar-next-prev,\n  :host(.show-month-and-year) .calendar-days-of-week,\n  :host(.show-month-and-year) .calendar-body,\n  :host(.show-month-and-year) .datetime-time*/.show-month-and-year.sc-ion-datetime-ios-h .calendar-next-prev.sc-ion-datetime-ios,.show-month-and-year.sc-ion-datetime-ios-h .calendar-days-of-week.sc-ion-datetime-ios,.show-month-and-year.sc-ion-datetime-ios-h .calendar-body.sc-ion-datetime-ios,.show-month-and-year.sc-ion-datetime-ios-h .datetime-time.sc-ion-datetime-ios{position:absolute;visibility:hidden;pointer-events:none}/*!@@supports (inset-inline-start: 0)*/@supports .sc-ion-datetime-ios (inset-inline-start.sc-ion-datetime-ios: 0).sc-ion-datetime-ios{.sc-ion-datetime-ios-h.show-month-and-year .calendar-next-prev,.sc-ion-datetime-ios-h.show-month-and-year .calendar-days-of-week,.sc-ion-datetime-ios-h.show-month-and-year .calendar-body,.sc-ion-datetime-ios-h.show-month-and-year .datetime-time{inset-inline-start:-99999px}}/*!@@supports not (inset-inline-start: 0)*/@supports .sc-ion-datetime-ios not.sc-ion-datetime-ios (inset-inline-start.sc-ion-datetime-ios: 0).sc-ion-datetime-ios{.sc-ion-datetime-ios-h.show-month-and-year .calendar-next-prev,.sc-ion-datetime-ios-h.show-month-and-year .calendar-days-of-week,.sc-ion-datetime-ios-h.show-month-and-year .calendar-body,.sc-ion-datetime-ios-h.show-month-and-year .datetime-time{left:-99999px}.sc-ion-datetime-ios-h[dir=rtl].sc-ion-datetime-ios-h.show-month-and-year .calendar-next-prev,[dir=rtl] .sc-ion-datetime-ios-h.sc-ion-datetime-ios-h.show-month-and-year .calendar-next-prev,.sc-ion-datetime-ios-h[dir=rtl].show-month-and-year .calendar-next-prev,[dir=rtl] .sc-ion-datetime-ios-h.show-month-and-year .calendar-next-prev,.sc-ion-datetime-ios-h[dir=rtl].sc-ion-datetime-ios-h.show-month-and-year .calendar-days-of-week,[dir=rtl] .sc-ion-datetime-ios-h.sc-ion-datetime-ios-h.show-month-and-year .calendar-days-of-week,.sc-ion-datetime-ios-h[dir=rtl].show-month-and-year .calendar-days-of-week,[dir=rtl] .sc-ion-datetime-ios-h.show-month-and-year .calendar-days-of-week,.sc-ion-datetime-ios-h[dir=rtl].sc-ion-datetime-ios-h.show-month-and-year .calendar-body,[dir=rtl] .sc-ion-datetime-ios-h.sc-ion-datetime-ios-h.show-month-and-year .calendar-body,.sc-ion-datetime-ios-h[dir=rtl].show-month-and-year .calendar-body,[dir=rtl] .sc-ion-datetime-ios-h.show-month-and-year .calendar-body,.sc-ion-datetime-ios-h[dir=rtl].sc-ion-datetime-ios-h.show-month-and-year .datetime-time,[dir=rtl] .sc-ion-datetime-ios-h.sc-ion-datetime-ios-h.show-month-and-year .datetime-time,.sc-ion-datetime-ios-h[dir=rtl].show-month-and-year .datetime-time,[dir=rtl] .sc-ion-datetime-ios-h.show-month-and-year .datetime-time{left:unset;right:unset;right:-99999px}@supports selector(:dir(rtl)){.sc-ion-datetime-ios-h.show-month-and-year:dir(rtl) .calendar-next-prev,.sc-ion-datetime-ios-h.show-month-and-year:dir(rtl) .calendar-days-of-week,.sc-ion-datetime-ios-h.show-month-and-year:dir(rtl) .calendar-body,.sc-ion-datetime-ios-h.show-month-and-year:dir(rtl) .datetime-time{left:unset;right:unset;right:-99999px}}}}@supports (not (background: -webkit-named-image(apple-pay-logo-black))) or ((background: -webkit-named-image(apple-pay-logo-black)) and (aspect-ratio: 1/1)){/*!@:host(.show-month-and-year) .calendar-next-prev,\n  :host(.show-month-and-year) .calendar-days-of-week,\n  :host(.show-month-and-year) .calendar-body,\n  :host(.show-month-and-year) .datetime-time*/.show-month-and-year.sc-ion-datetime-ios-h .calendar-next-prev.sc-ion-datetime-ios,.show-month-and-year.sc-ion-datetime-ios-h .calendar-days-of-week.sc-ion-datetime-ios,.show-month-and-year.sc-ion-datetime-ios-h .calendar-body.sc-ion-datetime-ios,.show-month-and-year.sc-ion-datetime-ios-h .datetime-time.sc-ion-datetime-ios{display:none}}/*!@:host(.month-year-picker-open) .datetime-footer*/.month-year-picker-open.sc-ion-datetime-ios-h .datetime-footer.sc-ion-datetime-ios{display:none}/*!@:host(.datetime-disabled)*/.datetime-disabled.sc-ion-datetime-ios-h{pointer-events:none}/*!@:host(.datetime-disabled) .calendar-days-of-week,\n:host(.datetime-disabled) .datetime-time*/.datetime-disabled.sc-ion-datetime-ios-h .calendar-days-of-week.sc-ion-datetime-ios,.datetime-disabled.sc-ion-datetime-ios-h .datetime-time.sc-ion-datetime-ios{opacity:0.4}/*!@:host(.datetime-readonly)*/.datetime-readonly.sc-ion-datetime-ios-h{pointer-events:none}/*!@:host(.datetime-readonly) .calendar-action-buttons,\n:host(.datetime-readonly) .calendar-body,\n:host(.datetime-readonly) .datetime-year*/.datetime-readonly.sc-ion-datetime-ios-h .calendar-action-buttons.sc-ion-datetime-ios,.datetime-readonly.sc-ion-datetime-ios-h .calendar-body.sc-ion-datetime-ios,.datetime-readonly.sc-ion-datetime-ios-h .datetime-year.sc-ion-datetime-ios{pointer-events:initial}/*!@:host(.datetime-readonly) .calendar-day[disabled]:not(.calendar-day-constrained),\n:host(.datetime-readonly) .datetime-action-buttons ion-button[disabled]*/.datetime-readonly.sc-ion-datetime-ios-h .calendar-day[disabled].sc-ion-datetime-ios:not(.calendar-day-constrained),.datetime-readonly.sc-ion-datetime-ios-h .datetime-action-buttons.sc-ion-datetime-ios ion-button[disabled].sc-ion-datetime-ios{opacity:1}/*!@:host .datetime-header .datetime-title*/.sc-ion-datetime-ios-h .datetime-header.sc-ion-datetime-ios .datetime-title.sc-ion-datetime-ios{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}/*!@:host .datetime-action-buttons.has-clear-button*/.sc-ion-datetime-ios-h .datetime-action-buttons.has-clear-button.sc-ion-datetime-ios{width:100%}/*!@:host .datetime-action-buttons ion-buttons*/.sc-ion-datetime-ios-h .datetime-action-buttons.sc-ion-datetime-ios ion-buttons.sc-ion-datetime-ios{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between}/*!@.datetime-action-buttons .datetime-action-buttons-container*/.datetime-action-buttons.sc-ion-datetime-ios .datetime-action-buttons-container.sc-ion-datetime-ios{display:-ms-flexbox;display:flex}/*!@:host .calendar-action-buttons*/.sc-ion-datetime-ios-h .calendar-action-buttons.sc-ion-datetime-ios{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between}/*!@:host .calendar-action-buttons ion-button*/.sc-ion-datetime-ios-h .calendar-action-buttons.sc-ion-datetime-ios ion-button.sc-ion-datetime-ios{--background:transparent}/*!@:host .calendar-days-of-week*/.sc-ion-datetime-ios-h .calendar-days-of-week.sc-ion-datetime-ios{display:grid;grid-template-columns:repeat(7, 1fr);text-align:center}/*!@.calendar-days-of-week .day-of-week*/.calendar-days-of-week.sc-ion-datetime-ios .day-of-week.sc-ion-datetime-ios{-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;margin-top:0;margin-bottom:0}/*!@:host .calendar-body*/.sc-ion-datetime-ios-h .calendar-body.sc-ion-datetime-ios{display:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1;-webkit-scroll-snap-type:x mandatory;-ms-scroll-snap-type:x mandatory;scroll-snap-type:x mandatory;overflow-x:scroll;overflow-y:hidden;scrollbar-width:none;outline:none}/*!@:host .calendar-body .calendar-month*/.sc-ion-datetime-ios-h .calendar-body.sc-ion-datetime-ios .calendar-month.sc-ion-datetime-ios{display:-ms-flexbox;display:flex;-ms-flex-flow:column;flex-flow:column;scroll-snap-align:start;scroll-snap-stop:always;-ms-flex-negative:0;flex-shrink:0;width:100%}/*!@:host .calendar-body .calendar-month-disabled*/.sc-ion-datetime-ios-h .calendar-body.sc-ion-datetime-ios .calendar-month-disabled.sc-ion-datetime-ios{scroll-snap-align:none}/*!@:host .calendar-body::-webkit-scrollbar*/.sc-ion-datetime-ios-h .calendar-body.sc-ion-datetime-ios::-webkit-scrollbar{display:none}/*!@:host .calendar-body .calendar-month-grid*/.sc-ion-datetime-ios-h .calendar-body.sc-ion-datetime-ios .calendar-month-grid.sc-ion-datetime-ios{display:grid;grid-template-columns:repeat(7, 1fr)}/*!@:host .calendar-day-wrapper*/.sc-ion-datetime-ios-h .calendar-day-wrapper.sc-ion-datetime-ios{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;min-width:0;min-height:0;overflow:visible}/*!@.calendar-day*/.calendar-day.sc-ion-datetime-ios{border-radius:50%;-webkit-padding-start:0px;padding-inline-start:0px;-webkit-padding-end:0px;padding-inline-end:0px;padding-top:0px;padding-bottom:0px;-webkit-margin-start:0px;margin-inline-start:0px;-webkit-margin-end:0px;margin-inline-end:0px;margin-top:0px;margin-bottom:0px;display:-ms-flexbox;display:flex;position:relative;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;border:none;outline:none;background:none;color:currentColor;font-family:var(--ion-font-family, inherit);cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;z-index:0}/*!@:host .calendar-day[disabled]*/.sc-ion-datetime-ios-h .calendar-day[disabled].sc-ion-datetime-ios{pointer-events:none;opacity:0.4}/*!@.calendar-day:focus*/.calendar-day.sc-ion-datetime-ios:focus{background:rgba(var(--ion-color-base-rgb), 0.2);-webkit-box-shadow:0px 0px 0px 4px rgba(var(--ion-color-base-rgb), 0.2);box-shadow:0px 0px 0px 4px rgba(var(--ion-color-base-rgb), 0.2)}/*!@:host .datetime-time*/.sc-ion-datetime-ios-h .datetime-time.sc-ion-datetime-ios{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between}/*!@:host(.datetime-presentation-time) .datetime-time*/.datetime-presentation-time.sc-ion-datetime-ios-h .datetime-time.sc-ion-datetime-ios{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0}/*!@:host ion-popover*/.sc-ion-datetime-ios-h ion-popover.sc-ion-datetime-ios{--height:200px}/*!@:host .time-header*/.sc-ion-datetime-ios-h .time-header.sc-ion-datetime-ios{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}/*!@:host .time-body*/.sc-ion-datetime-ios-h .time-body.sc-ion-datetime-ios{border-radius:8px;-webkit-padding-start:12px;padding-inline-start:12px;-webkit-padding-end:12px;padding-inline-end:12px;padding-top:6px;padding-bottom:6px;display:-ms-flexbox;display:flex;border:none;background:var(--ion-color-step-300, #edeef0);color:var(--ion-text-color, #000);font-family:inherit;font-size:inherit;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}/*!@:host .time-body-active*/.sc-ion-datetime-ios-h .time-body-active.sc-ion-datetime-ios{color:var(--ion-color-base)}/*!@:host(.in-item)*/.in-item.sc-ion-datetime-ios-h{position:static}/*!@:host(.show-month-and-year) .calendar-action-buttons .calendar-month-year-toggle*/.show-month-and-year.sc-ion-datetime-ios-h .calendar-action-buttons.sc-ion-datetime-ios .calendar-month-year-toggle.sc-ion-datetime-ios{color:var(--ion-color-base)}/*!@.calendar-month-year*/.calendar-month-year.sc-ion-datetime-ios{min-width:0}/*!@.calendar-month-year-toggle*/.calendar-month-year-toggle.sc-ion-datetime-ios{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;position:relative;border:0;outline:none;background:transparent;cursor:pointer;z-index:1}/*!@.calendar-month-year-toggle::after*/.calendar-month-year-toggle.sc-ion-datetime-ios::after{left:0;right:0;top:0;bottom:0;position:absolute;content:\"\";opacity:0;-webkit-transition:opacity 15ms linear, background-color 15ms linear;transition:opacity 15ms linear, background-color 15ms linear;z-index:-1}/*!@.calendar-month-year-toggle.ion-focused::after*/.calendar-month-year-toggle.ion-focused.sc-ion-datetime-ios::after{background:currentColor}/*!@.calendar-month-year-toggle:disabled*/.calendar-month-year-toggle.sc-ion-datetime-ios:disabled{opacity:0.3;pointer-events:none}/*!@.calendar-month-year-toggle ion-icon*/.calendar-month-year-toggle.sc-ion-datetime-ios ion-icon.sc-ion-datetime-ios{-webkit-padding-start:4px;padding-inline-start:4px;-webkit-padding-end:0;padding-inline-end:0;padding-top:0;padding-bottom:0;-ms-flex-negative:0;flex-shrink:0}/*!@.calendar-month-year-toggle #toggle-wrapper*/.calendar-month-year-toggle.sc-ion-datetime-ios #toggle-wrapper.sc-ion-datetime-ios{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center}/*!@:host*/.sc-ion-datetime-ios-h{--background:var(--ion-color-light, #ffffff);--background-rgb:var(--ion-color-light-rgb);--title-color:var(--ion-color-step-600, #666666)}/*!@:host(.datetime-presentation-date-time:not(.datetime-prefer-wheel)),\n:host(.datetime-presentation-time-date:not(.datetime-prefer-wheel)),\n:host(.datetime-presentation-date:not(.datetime-prefer-wheel))*/.datetime-presentation-date-time.sc-ion-datetime-ios-h:not(.datetime-prefer-wheel),.datetime-presentation-time-date.sc-ion-datetime-ios-h:not(.datetime-prefer-wheel),.datetime-presentation-date.sc-ion-datetime-ios-h:not(.datetime-prefer-wheel){min-height:350px}/*!@:host .datetime-header*/.sc-ion-datetime-ios-h .datetime-header.sc-ion-datetime-ios{-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px;padding-top:16px;padding-bottom:16px;border-bottom:0.55px solid var(--ion-color-step-200, #cccccc);font-size:min(0.875rem, 22.4px)}/*!@:host .datetime-header .datetime-title*/.sc-ion-datetime-ios-h .datetime-header.sc-ion-datetime-ios .datetime-title.sc-ion-datetime-ios{color:var(--title-color)}/*!@:host .datetime-header .datetime-selected-date*/.sc-ion-datetime-ios-h .datetime-header.sc-ion-datetime-ios .datetime-selected-date.sc-ion-datetime-ios{margin-top:10px}/*!@.calendar-month-year-toggle*/.calendar-month-year-toggle.sc-ion-datetime-ios{-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px;padding-top:0px;padding-bottom:0px;min-height:44px;font-size:min(1rem, 25.6px);font-weight:600}/*!@.calendar-month-year-toggle.ion-focused::after*/.calendar-month-year-toggle.ion-focused.sc-ion-datetime-ios::after{opacity:0.15}/*!@.calendar-month-year-toggle #toggle-wrapper*/.calendar-month-year-toggle.sc-ion-datetime-ios #toggle-wrapper.sc-ion-datetime-ios{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:8px;margin-inline-end:8px;margin-top:10px;margin-bottom:10px}/*!@:host .calendar-action-buttons .calendar-month-year-toggle ion-icon,\n:host .calendar-action-buttons ion-buttons ion-button*/.sc-ion-datetime-ios-h .calendar-action-buttons.sc-ion-datetime-ios .calendar-month-year-toggle.sc-ion-datetime-ios ion-icon.sc-ion-datetime-ios,.sc-ion-datetime-ios-h .calendar-action-buttons.sc-ion-datetime-ios ion-buttons.sc-ion-datetime-ios ion-button.sc-ion-datetime-ios{color:var(--ion-color-base)}/*!@:host .calendar-action-buttons ion-buttons*/.sc-ion-datetime-ios-h .calendar-action-buttons.sc-ion-datetime-ios ion-buttons.sc-ion-datetime-ios{padding-left:0;padding-right:0;padding-top:8px;padding-bottom:0}/*!@:host .calendar-action-buttons ion-buttons ion-button*/.sc-ion-datetime-ios-h .calendar-action-buttons.sc-ion-datetime-ios ion-buttons.sc-ion-datetime-ios ion-button.sc-ion-datetime-ios{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0}/*!@:host .calendar-days-of-week*/.sc-ion-datetime-ios-h .calendar-days-of-week.sc-ion-datetime-ios{-webkit-padding-start:8px;padding-inline-start:8px;-webkit-padding-end:8px;padding-inline-end:8px;padding-top:0;padding-bottom:0;color:var(--ion-color-step-300, #b3b3b3);font-size:min(0.75rem, 19.2px);font-weight:600;line-height:24px;text-transform:uppercase}@supports (border-radius: mod(1px, 1px)){/*!@.calendar-days-of-week .day-of-week*/.calendar-days-of-week.sc-ion-datetime-ios .day-of-week.sc-ion-datetime-ios{width:clamp(20px, calc(mod(min(1rem, 24px), 24px) * 10), 100%);height:24px;overflow:hidden}/*!@.calendar-day*/.calendar-day.sc-ion-datetime-ios{border-radius:max(8px, mod(min(1rem, 24px), 24px) * 10)}}@supports ((border-radius: mod(1px, 1px)) and (background: -webkit-named-image(apple-pay-logo-black)) and (not (contain-intrinsic-size: none))) or (not (border-radius: mod(1px, 1px))){/*!@.calendar-days-of-week .day-of-week*/.calendar-days-of-week.sc-ion-datetime-ios .day-of-week.sc-ion-datetime-ios{width:auto;height:auto;overflow:initial}/*!@.calendar-day*/.calendar-day.sc-ion-datetime-ios{border-radius:32px}}/*!@:host .calendar-body .calendar-month .calendar-month-grid*/.sc-ion-datetime-ios-h .calendar-body.sc-ion-datetime-ios .calendar-month.sc-ion-datetime-ios .calendar-month-grid.sc-ion-datetime-ios{-webkit-padding-start:8px;padding-inline-start:8px;-webkit-padding-end:8px;padding-inline-end:8px;padding-top:8px;padding-bottom:8px;-ms-flex-align:center;align-items:center;height:calc(100% - 16px)}/*!@:host .calendar-day-wrapper*/.sc-ion-datetime-ios-h .calendar-day-wrapper.sc-ion-datetime-ios{-webkit-padding-start:4px;padding-inline-start:4px;-webkit-padding-end:4px;padding-inline-end:4px;padding-top:4px;padding-bottom:4px;height:0;min-height:1rem}/*!@:host .calendar-day*/.sc-ion-datetime-ios-h .calendar-day.sc-ion-datetime-ios{width:40px;min-width:40px;height:40px;font-size:min(1.25rem, 32px)}/*!@.calendar-day.calendar-day-active*/.calendar-day.calendar-day-active.sc-ion-datetime-ios{background:rgba(var(--ion-color-base-rgb), 0.2)}/*!@:host .calendar-day.calendar-day-today*/.sc-ion-datetime-ios-h .calendar-day.calendar-day-today.sc-ion-datetime-ios{color:var(--ion-color-base)}/*!@:host .calendar-day.calendar-day-active*/.sc-ion-datetime-ios-h .calendar-day.calendar-day-active.sc-ion-datetime-ios{color:var(--ion-color-base);font-weight:600}/*!@:host .calendar-day.calendar-day-today.calendar-day-active*/.sc-ion-datetime-ios-h .calendar-day.calendar-day-today.calendar-day-active.sc-ion-datetime-ios{color:var(--ion-color-contrast)}/*!@:host .datetime-time*/.sc-ion-datetime-ios-h .datetime-time.sc-ion-datetime-ios{-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px;padding-top:8px;padding-bottom:16px;font-size:min(1rem, 25.6px)}/*!@:host .datetime-time .time-header*/.sc-ion-datetime-ios-h .datetime-time.sc-ion-datetime-ios .time-header.sc-ion-datetime-ios{font-weight:600}/*!@:host .datetime-buttons*/.sc-ion-datetime-ios-h .datetime-buttons.sc-ion-datetime-ios{-webkit-padding-start:8px;padding-inline-start:8px;-webkit-padding-end:8px;padding-inline-end:8px;padding-top:8px;padding-bottom:8px;border-top:0.55px solid var(--ion-color-step-200, #cccccc)}/*!@:host .datetime-buttons ::slotted(ion-buttons),\n:host .datetime-buttons ion-buttons*/.sc-ion-datetime-ios-h .datetime-buttons .sc-ion-datetime-ios-s>ion-buttons,.sc-ion-datetime-ios-h .datetime-buttons.sc-ion-datetime-ios ion-buttons.sc-ion-datetime-ios{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between}/*!@:host .datetime-action-buttons*/.sc-ion-datetime-ios-h .datetime-action-buttons.sc-ion-datetime-ios{width:100%}";
 
-const datetimeMdCss = "/*!@:host*/.sc-ion-datetime-md-h{display:-ms-flexbox;display:flex;-ms-flex-flow:column;flex-flow:column;background:var(--background);overflow:hidden}/*!@ion-picker-column-internal*/ion-picker-column-internal.sc-ion-datetime-md{min-width:26px}/*!@:host(.datetime-size-fixed)*/.datetime-size-fixed.sc-ion-datetime-md-h{width:auto;height:auto}/*!@:host(.datetime-size-fixed:not(.datetime-prefer-wheel))*/.datetime-size-fixed.sc-ion-datetime-md-h:not(.datetime-prefer-wheel){max-width:350px}/*!@:host(.datetime-size-fixed.datetime-prefer-wheel)*/.datetime-size-fixed.datetime-prefer-wheel.sc-ion-datetime-md-h{min-width:350px;max-width:-webkit-max-content;max-width:-moz-max-content;max-width:max-content}/*!@:host(.datetime-size-cover)*/.datetime-size-cover.sc-ion-datetime-md-h{width:100%}/*!@:host .calendar-body,\n:host .datetime-year*/.sc-ion-datetime-md-h .calendar-body.sc-ion-datetime-md,.sc-ion-datetime-md-h .datetime-year.sc-ion-datetime-md{opacity:0}/*!@:host(:not(.datetime-ready)) .datetime-year*/.sc-ion-datetime-md-h:not(.datetime-ready) .datetime-year.sc-ion-datetime-md{position:absolute;pointer-events:none}/*!@:host(.datetime-ready) .calendar-body*/.datetime-ready.sc-ion-datetime-md-h .calendar-body.sc-ion-datetime-md{opacity:1}/*!@:host(.datetime-ready) .datetime-year*/.datetime-ready.sc-ion-datetime-md-h .datetime-year.sc-ion-datetime-md{display:none;opacity:1}/*!@:host .wheel-order-year-first .day-column*/.sc-ion-datetime-md-h .wheel-order-year-first.sc-ion-datetime-md .day-column.sc-ion-datetime-md{-ms-flex-order:3;order:3;text-align:end}/*!@:host .wheel-order-year-first .month-column*/.sc-ion-datetime-md-h .wheel-order-year-first.sc-ion-datetime-md .month-column.sc-ion-datetime-md{-ms-flex-order:2;order:2;text-align:end}/*!@:host .wheel-order-year-first .year-column*/.sc-ion-datetime-md-h .wheel-order-year-first.sc-ion-datetime-md .year-column.sc-ion-datetime-md{-ms-flex-order:1;order:1;text-align:start}/*!@:host .datetime-calendar,\n:host .datetime-year*/.sc-ion-datetime-md-h .datetime-calendar.sc-ion-datetime-md,.sc-ion-datetime-md-h .datetime-year.sc-ion-datetime-md{display:-ms-flexbox;display:flex;-ms-flex:1 1 auto;flex:1 1 auto;-ms-flex-flow:column;flex-flow:column}/*!@:host(.show-month-and-year) .datetime-year*/.show-month-and-year.sc-ion-datetime-md-h .datetime-year.sc-ion-datetime-md{display:-ms-flexbox;display:flex}@supports (background: -webkit-named-image(apple-pay-logo-black)) and (not (aspect-ratio: 1/1)){/*!@:host(.show-month-and-year) .calendar-next-prev,\n  :host(.show-month-and-year) .calendar-days-of-week,\n  :host(.show-month-and-year) .calendar-body,\n  :host(.show-month-and-year) .datetime-time*/.show-month-and-year.sc-ion-datetime-md-h .calendar-next-prev.sc-ion-datetime-md,.show-month-and-year.sc-ion-datetime-md-h .calendar-days-of-week.sc-ion-datetime-md,.show-month-and-year.sc-ion-datetime-md-h .calendar-body.sc-ion-datetime-md,.show-month-and-year.sc-ion-datetime-md-h .datetime-time.sc-ion-datetime-md{position:absolute;visibility:hidden;pointer-events:none}/*!@@supports (inset-inline-start: 0)*/@supports .sc-ion-datetime-md (inset-inline-start.sc-ion-datetime-md: 0).sc-ion-datetime-md{.sc-ion-datetime-md-h.show-month-and-year .calendar-next-prev,.sc-ion-datetime-md-h.show-month-and-year .calendar-days-of-week,.sc-ion-datetime-md-h.show-month-and-year .calendar-body,.sc-ion-datetime-md-h.show-month-and-year .datetime-time{inset-inline-start:-99999px}}/*!@@supports not (inset-inline-start: 0)*/@supports .sc-ion-datetime-md not.sc-ion-datetime-md (inset-inline-start.sc-ion-datetime-md: 0).sc-ion-datetime-md{.sc-ion-datetime-md-h.show-month-and-year .calendar-next-prev,.sc-ion-datetime-md-h.show-month-and-year .calendar-days-of-week,.sc-ion-datetime-md-h.show-month-and-year .calendar-body,.sc-ion-datetime-md-h.show-month-and-year .datetime-time{left:-99999px}.sc-ion-datetime-md-h[dir=rtl].sc-ion-datetime-md-h.show-month-and-year .calendar-next-prev,[dir=rtl] .sc-ion-datetime-md-h.sc-ion-datetime-md-h.show-month-and-year .calendar-next-prev,.sc-ion-datetime-md-h[dir=rtl].show-month-and-year .calendar-next-prev,[dir=rtl] .sc-ion-datetime-md-h.show-month-and-year .calendar-next-prev,.sc-ion-datetime-md-h[dir=rtl].sc-ion-datetime-md-h.show-month-and-year .calendar-days-of-week,[dir=rtl] .sc-ion-datetime-md-h.sc-ion-datetime-md-h.show-month-and-year .calendar-days-of-week,.sc-ion-datetime-md-h[dir=rtl].show-month-and-year .calendar-days-of-week,[dir=rtl] .sc-ion-datetime-md-h.show-month-and-year .calendar-days-of-week,.sc-ion-datetime-md-h[dir=rtl].sc-ion-datetime-md-h.show-month-and-year .calendar-body,[dir=rtl] .sc-ion-datetime-md-h.sc-ion-datetime-md-h.show-month-and-year .calendar-body,.sc-ion-datetime-md-h[dir=rtl].show-month-and-year .calendar-body,[dir=rtl] .sc-ion-datetime-md-h.show-month-and-year .calendar-body,.sc-ion-datetime-md-h[dir=rtl].sc-ion-datetime-md-h.show-month-and-year .datetime-time,[dir=rtl] .sc-ion-datetime-md-h.sc-ion-datetime-md-h.show-month-and-year .datetime-time,.sc-ion-datetime-md-h[dir=rtl].show-month-and-year .datetime-time,[dir=rtl] .sc-ion-datetime-md-h.show-month-and-year .datetime-time{left:unset;right:unset;right:-99999px}@supports selector(:dir(rtl)){.sc-ion-datetime-md-h.show-month-and-year:dir(rtl) .calendar-next-prev,.sc-ion-datetime-md-h.show-month-and-year:dir(rtl) .calendar-days-of-week,.sc-ion-datetime-md-h.show-month-and-year:dir(rtl) .calendar-body,.sc-ion-datetime-md-h.show-month-and-year:dir(rtl) .datetime-time{left:unset;right:unset;right:-99999px}}}}@supports (not (background: -webkit-named-image(apple-pay-logo-black))) or ((background: -webkit-named-image(apple-pay-logo-black)) and (aspect-ratio: 1/1)){/*!@:host(.show-month-and-year) .calendar-next-prev,\n  :host(.show-month-and-year) .calendar-days-of-week,\n  :host(.show-month-and-year) .calendar-body,\n  :host(.show-month-and-year) .datetime-time*/.show-month-and-year.sc-ion-datetime-md-h .calendar-next-prev.sc-ion-datetime-md,.show-month-and-year.sc-ion-datetime-md-h .calendar-days-of-week.sc-ion-datetime-md,.show-month-and-year.sc-ion-datetime-md-h .calendar-body.sc-ion-datetime-md,.show-month-and-year.sc-ion-datetime-md-h .datetime-time.sc-ion-datetime-md{display:none}}/*!@:host(.month-year-picker-open) .datetime-footer*/.month-year-picker-open.sc-ion-datetime-md-h .datetime-footer.sc-ion-datetime-md{display:none}/*!@:host(.datetime-disabled)*/.datetime-disabled.sc-ion-datetime-md-h{pointer-events:none}/*!@:host(.datetime-disabled) .calendar-days-of-week,\n:host(.datetime-disabled) .datetime-time*/.datetime-disabled.sc-ion-datetime-md-h .calendar-days-of-week.sc-ion-datetime-md,.datetime-disabled.sc-ion-datetime-md-h .datetime-time.sc-ion-datetime-md{opacity:0.4}/*!@:host(.datetime-readonly)*/.datetime-readonly.sc-ion-datetime-md-h{pointer-events:none}/*!@:host(.datetime-readonly) .calendar-action-buttons,\n:host(.datetime-readonly) .calendar-body,\n:host(.datetime-readonly) .datetime-year*/.datetime-readonly.sc-ion-datetime-md-h .calendar-action-buttons.sc-ion-datetime-md,.datetime-readonly.sc-ion-datetime-md-h .calendar-body.sc-ion-datetime-md,.datetime-readonly.sc-ion-datetime-md-h .datetime-year.sc-ion-datetime-md{pointer-events:initial}/*!@:host(.datetime-readonly) .calendar-day[disabled]:not(.calendar-day-constrained),\n:host(.datetime-readonly) .datetime-action-buttons ion-button[disabled]*/.datetime-readonly.sc-ion-datetime-md-h .calendar-day[disabled].sc-ion-datetime-md:not(.calendar-day-constrained),.datetime-readonly.sc-ion-datetime-md-h .datetime-action-buttons.sc-ion-datetime-md ion-button[disabled].sc-ion-datetime-md{opacity:1}/*!@:host .datetime-header .datetime-title*/.sc-ion-datetime-md-h .datetime-header.sc-ion-datetime-md .datetime-title.sc-ion-datetime-md{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}/*!@:host .datetime-action-buttons.has-clear-button*/.sc-ion-datetime-md-h .datetime-action-buttons.has-clear-button.sc-ion-datetime-md{width:100%}/*!@:host .datetime-action-buttons ion-buttons*/.sc-ion-datetime-md-h .datetime-action-buttons.sc-ion-datetime-md ion-buttons.sc-ion-datetime-md{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between}/*!@.datetime-action-buttons .datetime-action-buttons-container*/.datetime-action-buttons.sc-ion-datetime-md .datetime-action-buttons-container.sc-ion-datetime-md{display:-ms-flexbox;display:flex}/*!@:host .calendar-action-buttons*/.sc-ion-datetime-md-h .calendar-action-buttons.sc-ion-datetime-md{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between}/*!@:host .calendar-action-buttons ion-item,\n:host .calendar-action-buttons ion-button*/.sc-ion-datetime-md-h .calendar-action-buttons.sc-ion-datetime-md ion-item.sc-ion-datetime-md,.sc-ion-datetime-md-h .calendar-action-buttons.sc-ion-datetime-md ion-button.sc-ion-datetime-md{--background:translucent}/*!@:host .calendar-action-buttons ion-item ion-label*/.sc-ion-datetime-md-h .calendar-action-buttons.sc-ion-datetime-md ion-item.sc-ion-datetime-md ion-label.sc-ion-datetime-md{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}/*!@:host .calendar-action-buttons ion-item ion-icon*/.sc-ion-datetime-md-h .calendar-action-buttons.sc-ion-datetime-md ion-item.sc-ion-datetime-md ion-icon.sc-ion-datetime-md{-webkit-padding-start:4px;padding-inline-start:4px;-webkit-padding-end:0;padding-inline-end:0;padding-top:0;padding-bottom:0}/*!@:host .calendar-days-of-week*/.sc-ion-datetime-md-h .calendar-days-of-week.sc-ion-datetime-md{display:grid;grid-template-columns:repeat(7, 1fr);text-align:center}/*!@.calendar-days-of-week .day-of-week*/.calendar-days-of-week.sc-ion-datetime-md .day-of-week.sc-ion-datetime-md{-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;margin-top:0;margin-bottom:0}/*!@:host .calendar-body*/.sc-ion-datetime-md-h .calendar-body.sc-ion-datetime-md{display:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1;-webkit-scroll-snap-type:x mandatory;-ms-scroll-snap-type:x mandatory;scroll-snap-type:x mandatory;overflow-x:scroll;overflow-y:hidden;scrollbar-width:none;outline:none}/*!@:host .calendar-body .calendar-month*/.sc-ion-datetime-md-h .calendar-body.sc-ion-datetime-md .calendar-month.sc-ion-datetime-md{display:-ms-flexbox;display:flex;-ms-flex-flow:column;flex-flow:column;scroll-snap-align:start;scroll-snap-stop:always;-ms-flex-negative:0;flex-shrink:0;width:100%}/*!@:host .calendar-body .calendar-month-disabled*/.sc-ion-datetime-md-h .calendar-body.sc-ion-datetime-md .calendar-month-disabled.sc-ion-datetime-md{scroll-snap-align:none}/*!@:host .calendar-body::-webkit-scrollbar*/.sc-ion-datetime-md-h .calendar-body.sc-ion-datetime-md::-webkit-scrollbar{display:none}/*!@:host .calendar-body .calendar-month-grid*/.sc-ion-datetime-md-h .calendar-body.sc-ion-datetime-md .calendar-month-grid.sc-ion-datetime-md{display:grid;grid-template-columns:repeat(7, 1fr)}/*!@:host .calendar-day-wrapper*/.sc-ion-datetime-md-h .calendar-day-wrapper.sc-ion-datetime-md{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;min-width:0;min-height:0;overflow:visible}/*!@.calendar-day*/.calendar-day.sc-ion-datetime-md{border-radius:50%;-webkit-padding-start:0px;padding-inline-start:0px;-webkit-padding-end:0px;padding-inline-end:0px;padding-top:0px;padding-bottom:0px;-webkit-margin-start:0px;margin-inline-start:0px;-webkit-margin-end:0px;margin-inline-end:0px;margin-top:0px;margin-bottom:0px;display:-ms-flexbox;display:flex;position:relative;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;border:none;outline:none;background:none;color:currentColor;font-family:var(--ion-font-family, inherit);cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;z-index:0}/*!@:host .calendar-day[disabled]*/.sc-ion-datetime-md-h .calendar-day[disabled].sc-ion-datetime-md{pointer-events:none;opacity:0.4}/*!@.calendar-day:focus*/.calendar-day.sc-ion-datetime-md:focus{background:rgba(var(--ion-color-base-rgb), 0.2);-webkit-box-shadow:0px 0px 0px 4px rgba(var(--ion-color-base-rgb), 0.2);box-shadow:0px 0px 0px 4px rgba(var(--ion-color-base-rgb), 0.2)}/*!@:host .datetime-time*/.sc-ion-datetime-md-h .datetime-time.sc-ion-datetime-md{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between}/*!@:host(.datetime-presentation-time) .datetime-time*/.datetime-presentation-time.sc-ion-datetime-md-h .datetime-time.sc-ion-datetime-md{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0}/*!@:host ion-popover*/.sc-ion-datetime-md-h ion-popover.sc-ion-datetime-md{--height:200px}/*!@:host .time-header*/.sc-ion-datetime-md-h .time-header.sc-ion-datetime-md{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}/*!@:host .time-body*/.sc-ion-datetime-md-h .time-body.sc-ion-datetime-md{border-radius:8px;-webkit-padding-start:12px;padding-inline-start:12px;-webkit-padding-end:12px;padding-inline-end:12px;padding-top:6px;padding-bottom:6px;display:-ms-flexbox;display:flex;border:none;background:var(--ion-color-step-300, #edeef0);color:var(--ion-text-color, #000);font-family:inherit;font-size:inherit;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}/*!@:host .time-body-active*/.sc-ion-datetime-md-h .time-body-active.sc-ion-datetime-md{color:var(--ion-color-base)}/*!@:host(.in-item)*/.in-item.sc-ion-datetime-md-h{position:static}/*!@:host(.show-month-and-year) .calendar-action-buttons ion-item*/.show-month-and-year.sc-ion-datetime-md-h .calendar-action-buttons.sc-ion-datetime-md ion-item.sc-ion-datetime-md{--color:var(--ion-color-base)}/*!@:host*/.sc-ion-datetime-md-h{--background:var(--ion-color-step-100, #ffffff);--title-color:var(--ion-color-contrast)}/*!@:host .datetime-header*/.sc-ion-datetime-md-h .datetime-header.sc-ion-datetime-md{-webkit-padding-start:20px;padding-inline-start:20px;-webkit-padding-end:20px;padding-inline-end:20px;padding-top:20px;padding-bottom:20px;background:var(--ion-color-base);color:var(--title-color)}/*!@:host .datetime-header .datetime-title*/.sc-ion-datetime-md-h .datetime-header.sc-ion-datetime-md .datetime-title.sc-ion-datetime-md{font-size:0.75rem;text-transform:uppercase}/*!@:host .datetime-header .datetime-selected-date*/.sc-ion-datetime-md-h .datetime-header.sc-ion-datetime-md .datetime-selected-date.sc-ion-datetime-md{margin-top:30px;font-size:2.125rem}/*!@:host .datetime-calendar .calendar-action-buttons ion-item*/.sc-ion-datetime-md-h .datetime-calendar.sc-ion-datetime-md .calendar-action-buttons.sc-ion-datetime-md ion-item.sc-ion-datetime-md{--padding-start:20px}/*!@:host .calendar-action-buttons ion-item,\n:host .calendar-action-buttons ion-button*/.sc-ion-datetime-md-h .calendar-action-buttons.sc-ion-datetime-md ion-item.sc-ion-datetime-md,.sc-ion-datetime-md-h .calendar-action-buttons.sc-ion-datetime-md ion-button.sc-ion-datetime-md{--color:var(--ion-color-step-650, #595959)}/*!@:host .calendar-days-of-week*/.sc-ion-datetime-md-h .calendar-days-of-week.sc-ion-datetime-md{-webkit-padding-start:10px;padding-inline-start:10px;-webkit-padding-end:10px;padding-inline-end:10px;padding-top:0px;padding-bottom:0px;color:var(--ion-color-step-500, gray);font-size:0.875rem;line-height:36px}/*!@:host .calendar-body .calendar-month .calendar-month-grid*/.sc-ion-datetime-md-h .calendar-body.sc-ion-datetime-md .calendar-month.sc-ion-datetime-md .calendar-month-grid.sc-ion-datetime-md{-webkit-padding-start:10px;padding-inline-start:10px;-webkit-padding-end:10px;padding-inline-end:10px;padding-top:4px;padding-bottom:4px;grid-template-rows:repeat(6, 1fr)}/*!@:host .calendar-day*/.sc-ion-datetime-md-h .calendar-day.sc-ion-datetime-md{width:42px;min-width:42px;height:42px;font-size:0.875rem}/*!@:host .calendar-day.calendar-day-today*/.sc-ion-datetime-md-h .calendar-day.calendar-day-today.sc-ion-datetime-md{border:1px solid var(--ion-color-base);color:var(--ion-color-base)}/*!@:host .calendar-day.calendar-day-active*/.sc-ion-datetime-md-h .calendar-day.calendar-day-active.sc-ion-datetime-md{color:var(--ion-color-contrast)}/*!@.calendar-day.calendar-day-active*/.calendar-day.calendar-day-active.sc-ion-datetime-md{border:1px solid var(--ion-color-base);background:var(--ion-color-base)}/*!@:host .datetime-time*/.sc-ion-datetime-md-h .datetime-time.sc-ion-datetime-md{-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px;padding-top:8px;padding-bottom:8px}/*!@:host .time-header*/.sc-ion-datetime-md-h .time-header.sc-ion-datetime-md{color:var(--ion-color-step-650, #595959)}/*!@:host(.datetime-presentation-month) .datetime-year,\n:host(.datetime-presentation-year) .datetime-year,\n:host(.datetime-presentation-month-year) .datetime-year*/.datetime-presentation-month.sc-ion-datetime-md-h .datetime-year.sc-ion-datetime-md,.datetime-presentation-year.sc-ion-datetime-md-h .datetime-year.sc-ion-datetime-md,.datetime-presentation-month-year.sc-ion-datetime-md-h .datetime-year.sc-ion-datetime-md{margin-top:20px;margin-bottom:20px}/*!@:host .datetime-buttons*/.sc-ion-datetime-md-h .datetime-buttons.sc-ion-datetime-md{-webkit-padding-start:10px;padding-inline-start:10px;-webkit-padding-end:10px;padding-inline-end:10px;padding-top:10px;padding-bottom:10px;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:end;justify-content:flex-end}";
+const datetimeMdCss = "/*!@:host*/.sc-ion-datetime-md-h{display:-ms-flexbox;display:flex;-ms-flex-flow:column;flex-flow:column;background:var(--background);overflow:hidden}/*!@:host(.datetime-size-fixed)*/.datetime-size-fixed.sc-ion-datetime-md-h{width:auto;height:auto}/*!@:host(.datetime-size-fixed:not(.datetime-prefer-wheel))*/.datetime-size-fixed.sc-ion-datetime-md-h:not(.datetime-prefer-wheel){max-width:350px}/*!@:host(.datetime-size-fixed.datetime-prefer-wheel)*/.datetime-size-fixed.datetime-prefer-wheel.sc-ion-datetime-md-h{min-width:350px;max-width:-webkit-max-content;max-width:-moz-max-content;max-width:max-content}/*!@:host(.datetime-size-cover)*/.datetime-size-cover.sc-ion-datetime-md-h{width:100%}/*!@:host .calendar-body,\n:host .datetime-year*/.sc-ion-datetime-md-h .calendar-body.sc-ion-datetime-md,.sc-ion-datetime-md-h .datetime-year.sc-ion-datetime-md{opacity:0}/*!@:host(:not(.datetime-ready)) .datetime-year*/.sc-ion-datetime-md-h:not(.datetime-ready) .datetime-year.sc-ion-datetime-md{position:absolute;pointer-events:none}/*!@:host(.datetime-ready) .calendar-body*/.datetime-ready.sc-ion-datetime-md-h .calendar-body.sc-ion-datetime-md{opacity:1}/*!@:host(.datetime-ready) .datetime-year*/.datetime-ready.sc-ion-datetime-md-h .datetime-year.sc-ion-datetime-md{display:none;opacity:1}/*!@:host .wheel-order-year-first .day-column*/.sc-ion-datetime-md-h .wheel-order-year-first.sc-ion-datetime-md .day-column.sc-ion-datetime-md{-ms-flex-order:3;order:3;text-align:end}/*!@:host .wheel-order-year-first .month-column*/.sc-ion-datetime-md-h .wheel-order-year-first.sc-ion-datetime-md .month-column.sc-ion-datetime-md{-ms-flex-order:2;order:2;text-align:end}/*!@:host .wheel-order-year-first .year-column*/.sc-ion-datetime-md-h .wheel-order-year-first.sc-ion-datetime-md .year-column.sc-ion-datetime-md{-ms-flex-order:1;order:1;text-align:start}/*!@:host .datetime-calendar,\n:host .datetime-year*/.sc-ion-datetime-md-h .datetime-calendar.sc-ion-datetime-md,.sc-ion-datetime-md-h .datetime-year.sc-ion-datetime-md{display:-ms-flexbox;display:flex;-ms-flex:1 1 auto;flex:1 1 auto;-ms-flex-flow:column;flex-flow:column}/*!@:host(.show-month-and-year) .datetime-year*/.show-month-and-year.sc-ion-datetime-md-h .datetime-year.sc-ion-datetime-md{display:-ms-flexbox;display:flex}@supports (background: -webkit-named-image(apple-pay-logo-black)) and (not (aspect-ratio: 1/1)){/*!@:host(.show-month-and-year) .calendar-next-prev,\n  :host(.show-month-and-year) .calendar-days-of-week,\n  :host(.show-month-and-year) .calendar-body,\n  :host(.show-month-and-year) .datetime-time*/.show-month-and-year.sc-ion-datetime-md-h .calendar-next-prev.sc-ion-datetime-md,.show-month-and-year.sc-ion-datetime-md-h .calendar-days-of-week.sc-ion-datetime-md,.show-month-and-year.sc-ion-datetime-md-h .calendar-body.sc-ion-datetime-md,.show-month-and-year.sc-ion-datetime-md-h .datetime-time.sc-ion-datetime-md{position:absolute;visibility:hidden;pointer-events:none}/*!@@supports (inset-inline-start: 0)*/@supports .sc-ion-datetime-md (inset-inline-start.sc-ion-datetime-md: 0).sc-ion-datetime-md{.sc-ion-datetime-md-h.show-month-and-year .calendar-next-prev,.sc-ion-datetime-md-h.show-month-and-year .calendar-days-of-week,.sc-ion-datetime-md-h.show-month-and-year .calendar-body,.sc-ion-datetime-md-h.show-month-and-year .datetime-time{inset-inline-start:-99999px}}/*!@@supports not (inset-inline-start: 0)*/@supports .sc-ion-datetime-md not.sc-ion-datetime-md (inset-inline-start.sc-ion-datetime-md: 0).sc-ion-datetime-md{.sc-ion-datetime-md-h.show-month-and-year .calendar-next-prev,.sc-ion-datetime-md-h.show-month-and-year .calendar-days-of-week,.sc-ion-datetime-md-h.show-month-and-year .calendar-body,.sc-ion-datetime-md-h.show-month-and-year .datetime-time{left:-99999px}.sc-ion-datetime-md-h[dir=rtl].sc-ion-datetime-md-h.show-month-and-year .calendar-next-prev,[dir=rtl] .sc-ion-datetime-md-h.sc-ion-datetime-md-h.show-month-and-year .calendar-next-prev,.sc-ion-datetime-md-h[dir=rtl].show-month-and-year .calendar-next-prev,[dir=rtl] .sc-ion-datetime-md-h.show-month-and-year .calendar-next-prev,.sc-ion-datetime-md-h[dir=rtl].sc-ion-datetime-md-h.show-month-and-year .calendar-days-of-week,[dir=rtl] .sc-ion-datetime-md-h.sc-ion-datetime-md-h.show-month-and-year .calendar-days-of-week,.sc-ion-datetime-md-h[dir=rtl].show-month-and-year .calendar-days-of-week,[dir=rtl] .sc-ion-datetime-md-h.show-month-and-year .calendar-days-of-week,.sc-ion-datetime-md-h[dir=rtl].sc-ion-datetime-md-h.show-month-and-year .calendar-body,[dir=rtl] .sc-ion-datetime-md-h.sc-ion-datetime-md-h.show-month-and-year .calendar-body,.sc-ion-datetime-md-h[dir=rtl].show-month-and-year .calendar-body,[dir=rtl] .sc-ion-datetime-md-h.show-month-and-year .calendar-body,.sc-ion-datetime-md-h[dir=rtl].sc-ion-datetime-md-h.show-month-and-year .datetime-time,[dir=rtl] .sc-ion-datetime-md-h.sc-ion-datetime-md-h.show-month-and-year .datetime-time,.sc-ion-datetime-md-h[dir=rtl].show-month-and-year .datetime-time,[dir=rtl] .sc-ion-datetime-md-h.show-month-and-year .datetime-time{left:unset;right:unset;right:-99999px}@supports selector(:dir(rtl)){.sc-ion-datetime-md-h.show-month-and-year:dir(rtl) .calendar-next-prev,.sc-ion-datetime-md-h.show-month-and-year:dir(rtl) .calendar-days-of-week,.sc-ion-datetime-md-h.show-month-and-year:dir(rtl) .calendar-body,.sc-ion-datetime-md-h.show-month-and-year:dir(rtl) .datetime-time{left:unset;right:unset;right:-99999px}}}}@supports (not (background: -webkit-named-image(apple-pay-logo-black))) or ((background: -webkit-named-image(apple-pay-logo-black)) and (aspect-ratio: 1/1)){/*!@:host(.show-month-and-year) .calendar-next-prev,\n  :host(.show-month-and-year) .calendar-days-of-week,\n  :host(.show-month-and-year) .calendar-body,\n  :host(.show-month-and-year) .datetime-time*/.show-month-and-year.sc-ion-datetime-md-h .calendar-next-prev.sc-ion-datetime-md,.show-month-and-year.sc-ion-datetime-md-h .calendar-days-of-week.sc-ion-datetime-md,.show-month-and-year.sc-ion-datetime-md-h .calendar-body.sc-ion-datetime-md,.show-month-and-year.sc-ion-datetime-md-h .datetime-time.sc-ion-datetime-md{display:none}}/*!@:host(.month-year-picker-open) .datetime-footer*/.month-year-picker-open.sc-ion-datetime-md-h .datetime-footer.sc-ion-datetime-md{display:none}/*!@:host(.datetime-disabled)*/.datetime-disabled.sc-ion-datetime-md-h{pointer-events:none}/*!@:host(.datetime-disabled) .calendar-days-of-week,\n:host(.datetime-disabled) .datetime-time*/.datetime-disabled.sc-ion-datetime-md-h .calendar-days-of-week.sc-ion-datetime-md,.datetime-disabled.sc-ion-datetime-md-h .datetime-time.sc-ion-datetime-md{opacity:0.4}/*!@:host(.datetime-readonly)*/.datetime-readonly.sc-ion-datetime-md-h{pointer-events:none}/*!@:host(.datetime-readonly) .calendar-action-buttons,\n:host(.datetime-readonly) .calendar-body,\n:host(.datetime-readonly) .datetime-year*/.datetime-readonly.sc-ion-datetime-md-h .calendar-action-buttons.sc-ion-datetime-md,.datetime-readonly.sc-ion-datetime-md-h .calendar-body.sc-ion-datetime-md,.datetime-readonly.sc-ion-datetime-md-h .datetime-year.sc-ion-datetime-md{pointer-events:initial}/*!@:host(.datetime-readonly) .calendar-day[disabled]:not(.calendar-day-constrained),\n:host(.datetime-readonly) .datetime-action-buttons ion-button[disabled]*/.datetime-readonly.sc-ion-datetime-md-h .calendar-day[disabled].sc-ion-datetime-md:not(.calendar-day-constrained),.datetime-readonly.sc-ion-datetime-md-h .datetime-action-buttons.sc-ion-datetime-md ion-button[disabled].sc-ion-datetime-md{opacity:1}/*!@:host .datetime-header .datetime-title*/.sc-ion-datetime-md-h .datetime-header.sc-ion-datetime-md .datetime-title.sc-ion-datetime-md{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}/*!@:host .datetime-action-buttons.has-clear-button*/.sc-ion-datetime-md-h .datetime-action-buttons.has-clear-button.sc-ion-datetime-md{width:100%}/*!@:host .datetime-action-buttons ion-buttons*/.sc-ion-datetime-md-h .datetime-action-buttons.sc-ion-datetime-md ion-buttons.sc-ion-datetime-md{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between}/*!@.datetime-action-buttons .datetime-action-buttons-container*/.datetime-action-buttons.sc-ion-datetime-md .datetime-action-buttons-container.sc-ion-datetime-md{display:-ms-flexbox;display:flex}/*!@:host .calendar-action-buttons*/.sc-ion-datetime-md-h .calendar-action-buttons.sc-ion-datetime-md{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between}/*!@:host .calendar-action-buttons ion-button*/.sc-ion-datetime-md-h .calendar-action-buttons.sc-ion-datetime-md ion-button.sc-ion-datetime-md{--background:transparent}/*!@:host .calendar-days-of-week*/.sc-ion-datetime-md-h .calendar-days-of-week.sc-ion-datetime-md{display:grid;grid-template-columns:repeat(7, 1fr);text-align:center}/*!@.calendar-days-of-week .day-of-week*/.calendar-days-of-week.sc-ion-datetime-md .day-of-week.sc-ion-datetime-md{-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;margin-top:0;margin-bottom:0}/*!@:host .calendar-body*/.sc-ion-datetime-md-h .calendar-body.sc-ion-datetime-md{display:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1;-webkit-scroll-snap-type:x mandatory;-ms-scroll-snap-type:x mandatory;scroll-snap-type:x mandatory;overflow-x:scroll;overflow-y:hidden;scrollbar-width:none;outline:none}/*!@:host .calendar-body .calendar-month*/.sc-ion-datetime-md-h .calendar-body.sc-ion-datetime-md .calendar-month.sc-ion-datetime-md{display:-ms-flexbox;display:flex;-ms-flex-flow:column;flex-flow:column;scroll-snap-align:start;scroll-snap-stop:always;-ms-flex-negative:0;flex-shrink:0;width:100%}/*!@:host .calendar-body .calendar-month-disabled*/.sc-ion-datetime-md-h .calendar-body.sc-ion-datetime-md .calendar-month-disabled.sc-ion-datetime-md{scroll-snap-align:none}/*!@:host .calendar-body::-webkit-scrollbar*/.sc-ion-datetime-md-h .calendar-body.sc-ion-datetime-md::-webkit-scrollbar{display:none}/*!@:host .calendar-body .calendar-month-grid*/.sc-ion-datetime-md-h .calendar-body.sc-ion-datetime-md .calendar-month-grid.sc-ion-datetime-md{display:grid;grid-template-columns:repeat(7, 1fr)}/*!@:host .calendar-day-wrapper*/.sc-ion-datetime-md-h .calendar-day-wrapper.sc-ion-datetime-md{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;min-width:0;min-height:0;overflow:visible}/*!@.calendar-day*/.calendar-day.sc-ion-datetime-md{border-radius:50%;-webkit-padding-start:0px;padding-inline-start:0px;-webkit-padding-end:0px;padding-inline-end:0px;padding-top:0px;padding-bottom:0px;-webkit-margin-start:0px;margin-inline-start:0px;-webkit-margin-end:0px;margin-inline-end:0px;margin-top:0px;margin-bottom:0px;display:-ms-flexbox;display:flex;position:relative;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;border:none;outline:none;background:none;color:currentColor;font-family:var(--ion-font-family, inherit);cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;z-index:0}/*!@:host .calendar-day[disabled]*/.sc-ion-datetime-md-h .calendar-day[disabled].sc-ion-datetime-md{pointer-events:none;opacity:0.4}/*!@.calendar-day:focus*/.calendar-day.sc-ion-datetime-md:focus{background:rgba(var(--ion-color-base-rgb), 0.2);-webkit-box-shadow:0px 0px 0px 4px rgba(var(--ion-color-base-rgb), 0.2);box-shadow:0px 0px 0px 4px rgba(var(--ion-color-base-rgb), 0.2)}/*!@:host .datetime-time*/.sc-ion-datetime-md-h .datetime-time.sc-ion-datetime-md{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between}/*!@:host(.datetime-presentation-time) .datetime-time*/.datetime-presentation-time.sc-ion-datetime-md-h .datetime-time.sc-ion-datetime-md{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0}/*!@:host ion-popover*/.sc-ion-datetime-md-h ion-popover.sc-ion-datetime-md{--height:200px}/*!@:host .time-header*/.sc-ion-datetime-md-h .time-header.sc-ion-datetime-md{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}/*!@:host .time-body*/.sc-ion-datetime-md-h .time-body.sc-ion-datetime-md{border-radius:8px;-webkit-padding-start:12px;padding-inline-start:12px;-webkit-padding-end:12px;padding-inline-end:12px;padding-top:6px;padding-bottom:6px;display:-ms-flexbox;display:flex;border:none;background:var(--ion-color-step-300, #edeef0);color:var(--ion-text-color, #000);font-family:inherit;font-size:inherit;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}/*!@:host .time-body-active*/.sc-ion-datetime-md-h .time-body-active.sc-ion-datetime-md{color:var(--ion-color-base)}/*!@:host(.in-item)*/.in-item.sc-ion-datetime-md-h{position:static}/*!@:host(.show-month-and-year) .calendar-action-buttons .calendar-month-year-toggle*/.show-month-and-year.sc-ion-datetime-md-h .calendar-action-buttons.sc-ion-datetime-md .calendar-month-year-toggle.sc-ion-datetime-md{color:var(--ion-color-base)}/*!@.calendar-month-year*/.calendar-month-year.sc-ion-datetime-md{min-width:0}/*!@.calendar-month-year-toggle*/.calendar-month-year-toggle.sc-ion-datetime-md{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;position:relative;border:0;outline:none;background:transparent;cursor:pointer;z-index:1}/*!@.calendar-month-year-toggle::after*/.calendar-month-year-toggle.sc-ion-datetime-md::after{left:0;right:0;top:0;bottom:0;position:absolute;content:\"\";opacity:0;-webkit-transition:opacity 15ms linear, background-color 15ms linear;transition:opacity 15ms linear, background-color 15ms linear;z-index:-1}/*!@.calendar-month-year-toggle.ion-focused::after*/.calendar-month-year-toggle.ion-focused.sc-ion-datetime-md::after{background:currentColor}/*!@.calendar-month-year-toggle:disabled*/.calendar-month-year-toggle.sc-ion-datetime-md:disabled{opacity:0.3;pointer-events:none}/*!@.calendar-month-year-toggle ion-icon*/.calendar-month-year-toggle.sc-ion-datetime-md ion-icon.sc-ion-datetime-md{-webkit-padding-start:4px;padding-inline-start:4px;-webkit-padding-end:0;padding-inline-end:0;padding-top:0;padding-bottom:0;-ms-flex-negative:0;flex-shrink:0}/*!@.calendar-month-year-toggle #toggle-wrapper*/.calendar-month-year-toggle.sc-ion-datetime-md #toggle-wrapper.sc-ion-datetime-md{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center}/*!@:host*/.sc-ion-datetime-md-h{--background:var(--ion-color-step-100, #ffffff);--title-color:var(--ion-color-contrast)}/*!@:host .datetime-header*/.sc-ion-datetime-md-h .datetime-header.sc-ion-datetime-md{-webkit-padding-start:20px;padding-inline-start:20px;-webkit-padding-end:20px;padding-inline-end:20px;padding-top:20px;padding-bottom:20px;background:var(--ion-color-base);color:var(--title-color)}/*!@:host .datetime-header .datetime-title*/.sc-ion-datetime-md-h .datetime-header.sc-ion-datetime-md .datetime-title.sc-ion-datetime-md{font-size:0.75rem;text-transform:uppercase}/*!@:host .datetime-header .datetime-selected-date*/.sc-ion-datetime-md-h .datetime-header.sc-ion-datetime-md .datetime-selected-date.sc-ion-datetime-md{margin-top:30px;font-size:2.125rem}/*!@:host .calendar-action-buttons ion-button*/.sc-ion-datetime-md-h .calendar-action-buttons.sc-ion-datetime-md ion-button.sc-ion-datetime-md{--color:var(--ion-color-step-650, #595959)}/*!@.calendar-month-year-toggle*/.calendar-month-year-toggle.sc-ion-datetime-md{-webkit-padding-start:20px;padding-inline-start:20px;-webkit-padding-end:16px;padding-inline-end:16px;padding-top:12px;padding-bottom:12px;min-height:48px;background:transparent;color:var(--ion-color-step-650, #595959);z-index:1}/*!@.calendar-month-year-toggle.ion-focused::after*/.calendar-month-year-toggle.ion-focused.sc-ion-datetime-md::after{opacity:0.04}/*!@.calendar-month-year-toggle ion-ripple-effect*/.calendar-month-year-toggle.sc-ion-datetime-md ion-ripple-effect.sc-ion-datetime-md{color:currentColor}@media (any-hover: hover){/*!@.calendar-month-year-toggle.ion-activatable:not(.ion-focused):hover::after*/.calendar-month-year-toggle.ion-activatable.sc-ion-datetime-md:not(.ion-focused):hover::after{background:currentColor;opacity:0.04}}/*!@:host .calendar-days-of-week*/.sc-ion-datetime-md-h .calendar-days-of-week.sc-ion-datetime-md{-webkit-padding-start:10px;padding-inline-start:10px;-webkit-padding-end:10px;padding-inline-end:10px;padding-top:0px;padding-bottom:0px;color:var(--ion-color-step-500, gray);font-size:0.875rem;line-height:36px}/*!@:host .calendar-body .calendar-month .calendar-month-grid*/.sc-ion-datetime-md-h .calendar-body.sc-ion-datetime-md .calendar-month.sc-ion-datetime-md .calendar-month-grid.sc-ion-datetime-md{-webkit-padding-start:10px;padding-inline-start:10px;-webkit-padding-end:10px;padding-inline-end:10px;padding-top:4px;padding-bottom:4px;grid-template-rows:repeat(6, 1fr)}/*!@:host .calendar-day*/.sc-ion-datetime-md-h .calendar-day.sc-ion-datetime-md{width:42px;min-width:42px;height:42px;font-size:0.875rem}/*!@:host .calendar-day.calendar-day-today*/.sc-ion-datetime-md-h .calendar-day.calendar-day-today.sc-ion-datetime-md{border:1px solid var(--ion-color-base);color:var(--ion-color-base)}/*!@:host .calendar-day.calendar-day-active*/.sc-ion-datetime-md-h .calendar-day.calendar-day-active.sc-ion-datetime-md{color:var(--ion-color-contrast)}/*!@.calendar-day.calendar-day-active*/.calendar-day.calendar-day-active.sc-ion-datetime-md{border:1px solid var(--ion-color-base);background:var(--ion-color-base)}/*!@:host .datetime-time*/.sc-ion-datetime-md-h .datetime-time.sc-ion-datetime-md{-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px;padding-top:8px;padding-bottom:8px}/*!@:host .time-header*/.sc-ion-datetime-md-h .time-header.sc-ion-datetime-md{color:var(--ion-color-step-650, #595959)}/*!@:host(.datetime-presentation-month) .datetime-year,\n:host(.datetime-presentation-year) .datetime-year,\n:host(.datetime-presentation-month-year) .datetime-year*/.datetime-presentation-month.sc-ion-datetime-md-h .datetime-year.sc-ion-datetime-md,.datetime-presentation-year.sc-ion-datetime-md-h .datetime-year.sc-ion-datetime-md,.datetime-presentation-month-year.sc-ion-datetime-md-h .datetime-year.sc-ion-datetime-md{margin-top:20px;margin-bottom:20px}/*!@:host .datetime-buttons*/.sc-ion-datetime-md-h .datetime-buttons.sc-ion-datetime-md{-webkit-padding-start:10px;padding-inline-start:10px;-webkit-padding-end:10px;padding-inline-end:10px;padding-top:10px;padding-bottom:10px;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:end;justify-content:flex-end}";
 
 /**
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
@@ -15846,7 +15838,7 @@ class Datetime {
         const renderArray = forcePresentation === 'time-date'
             ? [this.renderTimePickerColumns(forcePresentation), this.renderDatePickerColumns(forcePresentation)]
             : [this.renderDatePickerColumns(forcePresentation), this.renderTimePickerColumns(forcePresentation)];
-        return hAsync("ion-picker-internal", null, renderArray);
+        return hAsync("ion-picker", null, renderArray);
     }
     renderDatePickerColumns(forcePresentation) {
         return forcePresentation === 'date-time' || forcePresentation === 'time-date'
@@ -15905,7 +15897,7 @@ class Datetime {
         const todayString = workingParts.day !== null
             ? `${workingParts.year}-${workingParts.month}-${workingParts.day}`
             : `${defaultParts.year}-${defaultParts.month}-${defaultParts.day}`;
-        return (hAsync("ion-picker-column-internal", { class: "date-column", color: this.color, disabled: disabled, items: items, value: todayString, onIonChange: (ev) => {
+        return (hAsync("ion-picker-column", { class: "date-column", color: this.color, disabled: disabled, value: todayString, onIonChange: (ev) => {
                 // TODO(FW-1823) Remove this when iOS 14 support is dropped.
                 // Due to a Safari 14 issue we need to destroy
                 // the scroll listener before we update state
@@ -15921,7 +15913,7 @@ class Datetime {
                 // the working parts have been updated.
                 this.initializeCalendarListener();
                 ev.stopPropagation();
-            } }));
+            } }, items.map((item) => (hAsync("ion-picker-column-option", { part: item.value === todayString ? `${WHEEL_ITEM_PART} ${WHEEL_ITEM_ACTIVE_PART}` : WHEEL_ITEM_PART, key: item.value, disabled: item.disabled, value: item.value }, item.text)))));
     }
     renderIndividualDatePickerColumns(forcePresentation) {
         const { workingParts, isDateEnabled } = this;
@@ -15989,7 +15981,8 @@ class Datetime {
         }
         const { disabled, workingParts } = this;
         const activePart = this.getActivePartsWithFallback();
-        return (hAsync("ion-picker-column-internal", { class: "day-column", color: this.color, disabled: disabled, items: days, value: (_a = (workingParts.day !== null ? workingParts.day : this.defaultParts.day)) !== null && _a !== void 0 ? _a : undefined, onIonChange: (ev) => {
+        const pickerColumnValue = (_a = (workingParts.day !== null ? workingParts.day : this.defaultParts.day)) !== null && _a !== void 0 ? _a : undefined;
+        return (hAsync("ion-picker-column", { class: "day-column", color: this.color, disabled: disabled, value: pickerColumnValue, onIonChange: (ev) => {
                 // TODO(FW-1823) Remove this when iOS 14 support is dropped.
                 // Due to a Safari 14 issue we need to destroy
                 // the scroll listener before we update state
@@ -16003,7 +15996,7 @@ class Datetime {
                 // the working parts have been updated.
                 this.initializeCalendarListener();
                 ev.stopPropagation();
-            } }));
+            } }, days.map((day) => (hAsync("ion-picker-column-option", { part: day.value === pickerColumnValue ? `${WHEEL_ITEM_PART} ${WHEEL_ITEM_ACTIVE_PART}` : WHEEL_ITEM_PART, key: day.value, disabled: day.disabled, value: day.value }, day.text)))));
     }
     renderMonthPickerColumn(months) {
         if (months.length === 0) {
@@ -16011,7 +16004,7 @@ class Datetime {
         }
         const { disabled, workingParts } = this;
         const activePart = this.getActivePartsWithFallback();
-        return (hAsync("ion-picker-column-internal", { class: "month-column", color: this.color, disabled: disabled, items: months, value: workingParts.month, onIonChange: (ev) => {
+        return (hAsync("ion-picker-column", { class: "month-column", color: this.color, disabled: disabled, value: workingParts.month, onIonChange: (ev) => {
                 // TODO(FW-1823) Remove this when iOS 14 support is dropped.
                 // Due to a Safari 14 issue we need to destroy
                 // the scroll listener before we update state
@@ -16025,7 +16018,7 @@ class Datetime {
                 // the working parts have been updated.
                 this.initializeCalendarListener();
                 ev.stopPropagation();
-            } }));
+            } }, months.map((month) => (hAsync("ion-picker-column-option", { part: month.value === workingParts.month ? `${WHEEL_ITEM_PART} ${WHEEL_ITEM_ACTIVE_PART}` : WHEEL_ITEM_PART, key: month.value, disabled: month.disabled, value: month.value }, month.text)))));
     }
     renderYearPickerColumn(years) {
         if (years.length === 0) {
@@ -16033,7 +16026,7 @@ class Datetime {
         }
         const { disabled, workingParts } = this;
         const activePart = this.getActivePartsWithFallback();
-        return (hAsync("ion-picker-column-internal", { class: "year-column", color: this.color, disabled: disabled, items: years, value: workingParts.year, onIonChange: (ev) => {
+        return (hAsync("ion-picker-column", { class: "year-column", color: this.color, disabled: disabled, value: workingParts.year, onIonChange: (ev) => {
                 // TODO(FW-1823) Remove this when iOS 14 support is dropped.
                 // Due to a Safari 14 issue we need to destroy
                 // the scroll listener before we update state
@@ -16047,7 +16040,7 @@ class Datetime {
                 // the working parts have been updated.
                 this.initializeCalendarListener();
                 ev.stopPropagation();
-            } }));
+            } }, years.map((year) => (hAsync("ion-picker-column-option", { part: year.value === workingParts.year ? `${WHEEL_ITEM_PART} ${WHEEL_ITEM_ACTIVE_PART}` : WHEEL_ITEM_PART, key: year.value, disabled: year.disabled, value: year.value }, year.text)))));
     }
     renderTimePickerColumns(forcePresentation) {
         if (['date', 'month', 'month-year', 'year'].includes(forcePresentation)) {
@@ -16076,22 +16069,22 @@ class Datetime {
         if (hoursData.length === 0)
             return [];
         const activePart = this.getActivePartsWithFallback();
-        return (hAsync("ion-picker-column-internal", { color: this.color, disabled: disabled, value: activePart.hour, items: hoursData, numericInput: true, onIonChange: (ev) => {
+        return (hAsync("ion-picker-column", { color: this.color, disabled: disabled, value: activePart.hour, numericInput: true, onIonChange: (ev) => {
                 this.setWorkingParts(Object.assign(Object.assign({}, workingParts), { hour: ev.detail.value }));
                 this.setActiveParts(Object.assign(Object.assign({}, activePart), { hour: ev.detail.value }));
                 ev.stopPropagation();
-            } }));
+            } }, hoursData.map((hour) => (hAsync("ion-picker-column-option", { part: hour.value === activePart.hour ? `${WHEEL_ITEM_PART} ${WHEEL_ITEM_ACTIVE_PART}` : WHEEL_ITEM_PART, key: hour.value, disabled: hour.disabled, value: hour.value }, hour.text)))));
     }
     renderMinutePickerColumn(minutesData) {
         const { disabled, workingParts } = this;
         if (minutesData.length === 0)
             return [];
         const activePart = this.getActivePartsWithFallback();
-        return (hAsync("ion-picker-column-internal", { color: this.color, disabled: disabled, value: activePart.minute, items: minutesData, numericInput: true, onIonChange: (ev) => {
+        return (hAsync("ion-picker-column", { color: this.color, disabled: disabled, value: activePart.minute, numericInput: true, onIonChange: (ev) => {
                 this.setWorkingParts(Object.assign(Object.assign({}, workingParts), { minute: ev.detail.value }));
                 this.setActiveParts(Object.assign(Object.assign({}, activePart), { minute: ev.detail.value }));
                 ev.stopPropagation();
-            } }));
+            } }, minutesData.map((minute) => (hAsync("ion-picker-column-option", { part: minute.value === activePart.minute ? `${WHEEL_ITEM_PART} ${WHEEL_ITEM_ACTIVE_PART}` : WHEEL_ITEM_PART, key: minute.value, disabled: minute.disabled, value: minute.value }, minute.text)))));
     }
     renderDayPeriodPickerColumn(dayPeriodData) {
         const { disabled, workingParts } = this;
@@ -16100,12 +16093,12 @@ class Datetime {
         }
         const activePart = this.getActivePartsWithFallback();
         const isDayPeriodRTL = isLocaleDayPeriodRTL(this.locale);
-        return (hAsync("ion-picker-column-internal", { style: isDayPeriodRTL ? { order: '-1' } : {}, color: this.color, disabled: disabled, value: activePart.ampm, items: dayPeriodData, onIonChange: (ev) => {
+        return (hAsync("ion-picker-column", { style: isDayPeriodRTL ? { order: '-1' } : {}, color: this.color, disabled: disabled, value: activePart.ampm, onIonChange: (ev) => {
                 const hour = calculateHourFromAMPM(workingParts, ev.detail.value);
                 this.setWorkingParts(Object.assign(Object.assign({}, workingParts), { ampm: ev.detail.value, hour }));
                 this.setActiveParts(Object.assign(Object.assign({}, activePart), { ampm: ev.detail.value, hour }));
                 ev.stopPropagation();
-            } }));
+            } }, dayPeriodData.map((dayPeriod) => (hAsync("ion-picker-column-option", { part: dayPeriod.value === activePart.ampm ? `${WHEEL_ITEM_PART} ${WHEEL_ITEM_ACTIVE_PART}` : WHEEL_ITEM_PART, key: dayPeriod.value, disabled: dayPeriod.disabled, value: dayPeriod.value }, dayPeriod.text)))));
     }
     renderWheelView(forcePresentation) {
         const { locale } = this;
@@ -16126,26 +16119,11 @@ class Datetime {
         const nextMonthDisabled = disabled || isNextMonthDisabled(this.workingParts, this.maxParts);
         // don't use the inheritAttributes util because it removes dir from the host, and we still need that
         const hostDir = this.el.getAttribute('dir') || undefined;
-        return (hAsync("div", { class: "calendar-header" }, hAsync("div", { class: "calendar-action-buttons" }, hAsync("div", { class: "calendar-month-year" }, hAsync("ion-item", { part: "month-year-button", ref: (el) => (this.monthYearToggleItemRef = el), button: true, "aria-label": "Show year picker", detail: false, lines: "none", disabled: disabled, onClick: () => {
-                var _a;
-                this.toggleMonthAndYearView();
-                /**
-                 * TODO: FW-3547
-                 *
-                 * Currently there is not a way to set the aria-label on the inner button
-                 * on the `ion-item` and have it be reactive to changes. This is a workaround
-                 * until we either refactor `ion-item` to a button or Stencil adds a way to
-                 * have reactive props for built-in properties, such as `aria-label`.
-                 */
-                const { monthYearToggleItemRef } = this;
-                if (monthYearToggleItemRef) {
-                    const btn = (_a = monthYearToggleItemRef.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.item-native');
-                    if (btn) {
-                        const monthYearAriaLabel = this.showMonthAndYear ? 'Hide year picker' : 'Show year picker';
-                        btn.setAttribute('aria-label', monthYearAriaLabel);
-                    }
-                }
-            } }, hAsync("ion-label", null, getMonthAndYear(this.locale, this.workingParts), hAsync("ion-icon", { "aria-hidden": "true", icon: this.showMonthAndYear ? expandedIcon : collapsedIcon, lazy: false, flipRtl: true })))), hAsync("div", { class: "calendar-next-prev" }, hAsync("ion-buttons", null, hAsync("ion-button", { "aria-label": "Previous month", disabled: prevMonthDisabled, onClick: () => this.prevMonth() }, hAsync("ion-icon", { dir: hostDir, "aria-hidden": "true", slot: "icon-only", icon: chevronBack, lazy: false, flipRtl: true })), hAsync("ion-button", { "aria-label": "Next month", disabled: nextMonthDisabled, onClick: () => this.nextMonth() }, hAsync("ion-icon", { dir: hostDir, "aria-hidden": "true", slot: "icon-only", icon: chevronForward, lazy: false, flipRtl: true }))))), hAsync("div", { class: "calendar-days-of-week", "aria-hidden": "true" }, getDaysOfWeek(this.locale, mode, this.firstDayOfWeek % 7).map((d) => {
+        return (hAsync("div", { class: "calendar-header" }, hAsync("div", { class: "calendar-action-buttons" }, hAsync("div", { class: "calendar-month-year" }, hAsync("button", { class: {
+                'calendar-month-year-toggle': true,
+                'ion-activatable': true,
+                'ion-focusable': true,
+            }, part: "month-year-button", disabled: disabled, "aria-label": this.showMonthAndYear ? 'Hide year picker' : 'Show year picker', onClick: () => this.toggleMonthAndYearView() }, hAsync("span", { id: "toggle-wrapper" }, getMonthAndYear(this.locale, this.workingParts), hAsync("ion-icon", { "aria-hidden": "true", icon: this.showMonthAndYear ? expandedIcon : collapsedIcon, lazy: false, flipRtl: true })), mode === 'md' && hAsync("ion-ripple-effect", null))), hAsync("div", { class: "calendar-next-prev" }, hAsync("ion-buttons", null, hAsync("ion-button", { "aria-label": "Previous month", disabled: prevMonthDisabled, onClick: () => this.prevMonth() }, hAsync("ion-icon", { dir: hostDir, "aria-hidden": "true", slot: "icon-only", icon: chevronBack, lazy: false, flipRtl: true })), hAsync("ion-button", { "aria-label": "Next month", disabled: nextMonthDisabled, onClick: () => this.nextMonth() }, hAsync("ion-icon", { dir: hostDir, "aria-hidden": "true", slot: "icon-only", icon: chevronForward, lazy: false, flipRtl: true }))))), hAsync("div", { class: "calendar-days-of-week", "aria-hidden": "true" }, getDaysOfWeek(this.locale, mode, this.firstDayOfWeek % 7).map((d) => {
             return hAsync("div", { class: "day-of-week" }, d);
         }))));
     }
@@ -16306,7 +16284,7 @@ class Datetime {
                      * This will correctly scroll the element position to the correct time value,
                      * before the popover is fully presented.
                      */
-                    const cols = ev.target.querySelectorAll('ion-picker-column-internal');
+                    const cols = ev.target.querySelectorAll('ion-picker-column');
                     // TODO (FW-615): Potentially remove this when intersection observers are fixed in picker column
                     cols.forEach((col) => col.scrollActiveItemIntoView());
                 }, style: {
@@ -16500,6 +16478,8 @@ class Datetime {
     }; }
 }
 let datetimeIds = 0;
+const WHEEL_ITEM_PART = 'wheel-item';
+const WHEEL_ITEM_ACTIVE_PART = `active`;
 
 const iosDatetimeButtonCss = "/*!@:host*/.sc-ion-datetime-button-ios-h{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}/*!@:host button*/.sc-ion-datetime-button-ios-h button.sc-ion-datetime-button-ios{border-radius:8px;-webkit-padding-start:12px;padding-inline-start:12px;-webkit-padding-end:12px;padding-inline-end:12px;padding-top:6px;padding-bottom:6px;-webkit-margin-start:2px;margin-inline-start:2px;-webkit-margin-end:2px;margin-inline-end:2px;margin-top:0px;margin-bottom:0px;position:relative;-webkit-transition:150ms color ease-in-out;transition:150ms color ease-in-out;border:none;background:var(--ion-color-step-300, #edeef0);color:var(--ion-text-color, #000);font-family:inherit;font-size:1rem;cursor:pointer;overflow:hidden;-webkit-appearance:none;-moz-appearance:none;appearance:none}/*!@:host(.time-active) #time-button,\n:host(.date-active) #date-button*/.time-active.sc-ion-datetime-button-ios-h #time-button.sc-ion-datetime-button-ios,.date-active.sc-ion-datetime-button-ios-h #date-button.sc-ion-datetime-button-ios{color:var(--ion-color-base)}/*!@:host(.datetime-button-disabled)*/.datetime-button-disabled.sc-ion-datetime-button-ios-h{pointer-events:none}/*!@:host(.datetime-button-disabled) button*/.datetime-button-disabled.sc-ion-datetime-button-ios-h button.sc-ion-datetime-button-ios{opacity:0.4}";
 
@@ -18827,34 +18807,15 @@ class Input {
         if (!this.shouldClearOnEdit()) {
             return;
         }
-        /**
-         * The following keys do not modify the
-         * contents of the input. As a result, pressing
-         * them should not edit the input.
-         *
-         * We can't check to see if the value of the input
-         * was changed because we call checkClearOnEdit
-         * in a keydown listener, and the key has not yet
-         * been added to the input.
-         */
-        const IGNORED_KEYS = ['Enter', 'Tab', 'Shift', 'Meta', 'Alt', 'Control'];
-        const pressedIgnoredKey = IGNORED_KEYS.includes(ev.key);
         /**
          * Clear the input if the control has not been previously cleared during focus.
          * Do not clear if the user hitting enter to submit a form.
          */
-        if (!this.didInputClearOnEdit && this.hasValue() && !pressedIgnoredKey) {
+        if (!this.didInputClearOnEdit && this.hasValue() && ev.key !== 'Enter' && ev.key !== 'Tab') {
             this.value = '';
             this.emitInputChange(ev);
         }
-        /**
-         * Pressing an IGNORED_KEYS first and
-         * then an allowed key will cause the input to not
-         * be cleared.
-         */
-        if (!pressedIgnoredKey) {
-            this.didInputClearOnEdit = true;
-        }
+        this.didInputClearOnEdit = true;
     }
     hasValue() {
         return this.getValue().length > 0;
@@ -24566,664 +24527,783 @@ class Note {
     }; }
 }
 
-/**
- * iOS Picker Enter Animation
- */
-const iosEnterAnimation$2 = (baseEl) => {
-    const baseAnimation = createAnimation();
-    const backdropAnimation = createAnimation();
-    const wrapperAnimation = createAnimation();
-    backdropAnimation
-        .addElement(baseEl.querySelector('ion-backdrop'))
-        .fromTo('opacity', 0.01, 'var(--backdrop-opacity)')
-        .beforeStyles({
-        'pointer-events': 'none',
-    })
-        .afterClearStyles(['pointer-events']);
-    wrapperAnimation
-        .addElement(baseEl.querySelector('.picker-wrapper'))
-        .fromTo('transform', 'translateY(100%)', 'translateY(0%)');
-    return baseAnimation
-        .addElement(baseEl)
-        .easing('cubic-bezier(.36,.66,.04,1)')
-        .duration(400)
-        .addAnimation([backdropAnimation, wrapperAnimation]);
-};
-
-/**
- * iOS Picker Leave Animation
- */
-const iosLeaveAnimation$2 = (baseEl) => {
-    const baseAnimation = createAnimation();
-    const backdropAnimation = createAnimation();
-    const wrapperAnimation = createAnimation();
-    backdropAnimation
-        .addElement(baseEl.querySelector('ion-backdrop'))
-        .fromTo('opacity', 'var(--backdrop-opacity)', 0.01);
-    wrapperAnimation
-        .addElement(baseEl.querySelector('.picker-wrapper'))
-        .fromTo('transform', 'translateY(0%)', 'translateY(100%)');
-    return baseAnimation
-        .addElement(baseEl)
-        .easing('cubic-bezier(.36,.66,.04,1)')
-        .duration(400)
-        .addAnimation([backdropAnimation, wrapperAnimation]);
-};
-
-const pickerIosCss = ".sc-ion-picker-ios-h{--border-radius:0;--border-style:solid;--min-width:auto;--width:100%;--max-width:500px;--min-height:auto;--max-height:auto;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;top:0;display:block;position:absolute;width:100%;height:100%;outline:none;font-family:var(--ion-font-family, inherit);contain:strict;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:1001}@supports (inset-inline-start: 0){.sc-ion-picker-ios-h{inset-inline-start:0}}@supports not (inset-inline-start: 0){.sc-ion-picker-ios-h{left:0}[dir=rtl].sc-ion-picker-ios-h,[dir=rtl] .sc-ion-picker-ios-h{left:unset;right:unset;right:0}@supports selector(:dir(rtl)){.sc-ion-picker-ios-h:dir(rtl){left:unset;right:unset;right:0}}}.overlay-hidden.sc-ion-picker-ios-h{display:none}.picker-wrapper.sc-ion-picker-ios{border-radius:var(--border-radius);left:0;right:0;bottom:0;-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;margin-top:auto;margin-bottom:auto;-webkit-transform:translate3d(0,  100%,  0);transform:translate3d(0,  100%,  0);display:-ms-flexbox;display:flex;position:absolute;-ms-flex-direction:column;flex-direction:column;width:var(--width);min-width:var(--min-width);max-width:var(--max-width);height:var(--height);min-height:var(--min-height);max-height:var(--max-height);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);background:var(--background);contain:strict;overflow:hidden;z-index:10}.picker-toolbar.sc-ion-picker-ios{width:100%;background:transparent;contain:strict;z-index:1}.picker-button.sc-ion-picker-ios{border:0;font-family:inherit}.picker-button.sc-ion-picker-ios:active,.picker-button.sc-ion-picker-ios:focus{outline:none}.picker-columns.sc-ion-picker-ios{display:-ms-flexbox;display:flex;position:relative;-ms-flex-pack:center;justify-content:center;margin-bottom:var(--ion-safe-area-bottom, 0);contain:strict;overflow:hidden}.picker-above-highlight.sc-ion-picker-ios,.picker-below-highlight.sc-ion-picker-ios{display:none;pointer-events:none}.sc-ion-picker-ios-h{--background:var(--ion-background-color, #fff);--border-width:1px 0 0;--border-color:var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-250, #c8c7cc)));--height:260px;--backdrop-opacity:var(--ion-backdrop-opacity, 0.26);color:var(--ion-item-color, var(--ion-text-color, #000))}.picker-toolbar.sc-ion-picker-ios{display:-ms-flexbox;display:flex;height:44px;border-bottom:0.55px solid var(--border-color)}.picker-toolbar-button.sc-ion-picker-ios{-ms-flex:1;flex:1;text-align:end}.picker-toolbar-button.sc-ion-picker-ios:last-child .picker-button.sc-ion-picker-ios{font-weight:600}.picker-toolbar-button.sc-ion-picker-ios:first-child{font-weight:normal;text-align:start}.picker-button.sc-ion-picker-ios,.picker-button.ion-activated.sc-ion-picker-ios{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;-webkit-padding-start:1em;padding-inline-start:1em;-webkit-padding-end:1em;padding-inline-end:1em;padding-top:0;padding-bottom:0;height:44px;background:transparent;color:var(--ion-color-primary, #3880ff);font-size:16px}.picker-columns.sc-ion-picker-ios{height:215px;-webkit-perspective:1000px;perspective:1000px}.picker-above-highlight.sc-ion-picker-ios{top:0;-webkit-transform:translate3d(0,  0,  90px);transform:translate3d(0,  0,  90px);display:block;position:absolute;width:100%;height:81px;border-bottom:1px solid var(--border-color);background:-webkit-gradient(linear, left top, left bottom, color-stop(20%, var(--background, var(--ion-background-color, #fff))), to(rgba(var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255)), 0.8)));background:linear-gradient(to bottom, var(--background, var(--ion-background-color, #fff)) 20%, rgba(var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255)), 0.8) 100%);z-index:10}@supports (inset-inline-start: 0){.picker-above-highlight.sc-ion-picker-ios{inset-inline-start:0}}@supports not (inset-inline-start: 0){.picker-above-highlight.sc-ion-picker-ios{left:0}[dir=rtl].sc-ion-picker-ios-h .picker-above-highlight.sc-ion-picker-ios,[dir=rtl] .sc-ion-picker-ios-h .picker-above-highlight.sc-ion-picker-ios{left:unset;right:unset;right:0}[dir=rtl].sc-ion-picker-ios .picker-above-highlight.sc-ion-picker-ios{left:unset;right:unset;right:0}@supports selector(:dir(rtl)){.picker-above-highlight.sc-ion-picker-ios:dir(rtl){left:unset;right:unset;right:0}}}.picker-below-highlight.sc-ion-picker-ios{top:115px;-webkit-transform:translate3d(0,  0,  90px);transform:translate3d(0,  0,  90px);display:block;position:absolute;width:100%;height:119px;border-top:1px solid var(--border-color);background:-webkit-gradient(linear, left bottom, left top, color-stop(30%, var(--background, var(--ion-background-color, #fff))), to(rgba(var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255)), 0.8)));background:linear-gradient(to top, var(--background, var(--ion-background-color, #fff)) 30%, rgba(var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255)), 0.8) 100%);z-index:11}@supports (inset-inline-start: 0){.picker-below-highlight.sc-ion-picker-ios{inset-inline-start:0}}@supports not (inset-inline-start: 0){.picker-below-highlight.sc-ion-picker-ios{left:0}[dir=rtl].sc-ion-picker-ios-h .picker-below-highlight.sc-ion-picker-ios,[dir=rtl] .sc-ion-picker-ios-h .picker-below-highlight.sc-ion-picker-ios{left:unset;right:unset;right:0}[dir=rtl].sc-ion-picker-ios .picker-below-highlight.sc-ion-picker-ios{left:unset;right:unset;right:0}@supports selector(:dir(rtl)){.picker-below-highlight.sc-ion-picker-ios:dir(rtl){left:unset;right:unset;right:0}}}";
+const pickerIosCss$1 = "/*!@:host*/.sc-ion-picker-ios-h{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,\n:host .picker-after*/.sc-ion-picker-ios-h .picker-before.sc-ion-picker-ios,.sc-ion-picker-ios-h .picker-after.sc-ion-picker-ios{position:absolute;width:100%;-webkit-transform:translateZ(0);transform:translateZ(0);z-index:1;pointer-events:none}/*!@:host .picker-before*/.sc-ion-picker-ios-h .picker-before.sc-ion-picker-ios{top:0;height:83px}@supports (inset-inline-start: 0){/*!@:host .picker-before*/.sc-ion-picker-ios-h .picker-before.sc-ion-picker-ios{inset-inline-start:0}}@supports not (inset-inline-start: 0){/*!@:host .picker-before*/.sc-ion-picker-ios-h .picker-before.sc-ion-picker-ios{left:0}/*!@:host-context([dir=rtl]) .picker-before*/[dir=rtl].sc-ion-picker-ios-h .picker-before.sc-ion-picker-ios,[dir=rtl] .sc-ion-picker-ios-h .picker-before.sc-ion-picker-ios{left:unset;right:unset;right:0}/*!@@supports selector(:dir(rtl))*/@supports .sc-ion-picker-ios selector(.sc-ion-picker-ios:dir(rtl)){.sc-ion-picker-ios-h:dir(rtl) .picker-before{left:unset;right:unset;right:0}}}/*!@:host .picker-after*/.sc-ion-picker-ios-h .picker-after.sc-ion-picker-ios{top:116px;height:84px}@supports (inset-inline-start: 0){/*!@:host .picker-after*/.sc-ion-picker-ios-h .picker-after.sc-ion-picker-ios{inset-inline-start:0}}@supports not (inset-inline-start: 0){/*!@:host .picker-after*/.sc-ion-picker-ios-h .picker-after.sc-ion-picker-ios{left:0}/*!@:host-context([dir=rtl]) .picker-after*/[dir=rtl].sc-ion-picker-ios-h .picker-after.sc-ion-picker-ios,[dir=rtl] .sc-ion-picker-ios-h .picker-after.sc-ion-picker-ios{left:unset;right:unset;right:0}/*!@@supports selector(:dir(rtl))*/@supports .sc-ion-picker-ios selector(.sc-ion-picker-ios:dir(rtl)){.sc-ion-picker-ios-h:dir(rtl) .picker-after{left:unset;right:unset;right:0}}}/*!@:host .picker-highlight*/.sc-ion-picker-ios-h .picker-highlight.sc-ion-picker-ios{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*/.sc-ion-picker-ios-h input.sc-ion-picker-ios{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)*/.sc-ion-picker-ios-h .sc-ion-picker-ios-s>ion-picker-column:first-of-type{text-align:start}/*!@:host ::slotted(ion-picker-column:last-of-type)*/.sc-ion-picker-ios-h .sc-ion-picker-ios-s>ion-picker-column:last-of-type{text-align:end}/*!@:host ::slotted(ion-picker-column:only-child)*/.sc-ion-picker-ios-h .sc-ion-picker-ios-s>ion-picker-column:only-child{text-align:center}/*!@:host .picker-before*/.sc-ion-picker-ios-h .picker-before.sc-ion-picker-ios{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*/.sc-ion-picker-ios-h .picker-after.sc-ion-picker-ios{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*/.sc-ion-picker-ios-h .picker-highlight.sc-ion-picker-ios{background:var(--wheel-highlight-background, var(--ion-color-step-150, #eeeeef))}";
 
-const pickerMdCss = ".sc-ion-picker-md-h{--border-radius:0;--border-style:solid;--min-width:auto;--width:100%;--max-width:500px;--min-height:auto;--max-height:auto;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;top:0;display:block;position:absolute;width:100%;height:100%;outline:none;font-family:var(--ion-font-family, inherit);contain:strict;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:1001}@supports (inset-inline-start: 0){.sc-ion-picker-md-h{inset-inline-start:0}}@supports not (inset-inline-start: 0){.sc-ion-picker-md-h{left:0}[dir=rtl].sc-ion-picker-md-h,[dir=rtl] .sc-ion-picker-md-h{left:unset;right:unset;right:0}@supports selector(:dir(rtl)){.sc-ion-picker-md-h:dir(rtl){left:unset;right:unset;right:0}}}.overlay-hidden.sc-ion-picker-md-h{display:none}.picker-wrapper.sc-ion-picker-md{border-radius:var(--border-radius);left:0;right:0;bottom:0;-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;margin-top:auto;margin-bottom:auto;-webkit-transform:translate3d(0,  100%,  0);transform:translate3d(0,  100%,  0);display:-ms-flexbox;display:flex;position:absolute;-ms-flex-direction:column;flex-direction:column;width:var(--width);min-width:var(--min-width);max-width:var(--max-width);height:var(--height);min-height:var(--min-height);max-height:var(--max-height);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);background:var(--background);contain:strict;overflow:hidden;z-index:10}.picker-toolbar.sc-ion-picker-md{width:100%;background:transparent;contain:strict;z-index:1}.picker-button.sc-ion-picker-md{border:0;font-family:inherit}.picker-button.sc-ion-picker-md:active,.picker-button.sc-ion-picker-md:focus{outline:none}.picker-columns.sc-ion-picker-md{display:-ms-flexbox;display:flex;position:relative;-ms-flex-pack:center;justify-content:center;margin-bottom:var(--ion-safe-area-bottom, 0);contain:strict;overflow:hidden}.picker-above-highlight.sc-ion-picker-md,.picker-below-highlight.sc-ion-picker-md{display:none;pointer-events:none}.sc-ion-picker-md-h{--background:var(--ion-background-color, #fff);--border-width:0.55px 0 0;--border-color:var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-150, rgba(0, 0, 0, 0.13))));--height:260px;--backdrop-opacity:var(--ion-backdrop-opacity, 0.26);color:var(--ion-item-color, var(--ion-text-color, #000))}.picker-toolbar.sc-ion-picker-md{display:-ms-flexbox;display:flex;-ms-flex-pack:end;justify-content:flex-end;height:44px}.picker-button.sc-ion-picker-md,.picker-button.ion-activated.sc-ion-picker-md{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;-webkit-padding-start:1.1em;padding-inline-start:1.1em;-webkit-padding-end:1.1em;padding-inline-end:1.1em;padding-top:0;padding-bottom:0;height:44px;background:transparent;color:var(--ion-color-primary, #3880ff);font-size:14px;font-weight:500;text-transform:uppercase;-webkit-box-shadow:none;box-shadow:none}.picker-columns.sc-ion-picker-md{height:216px;-webkit-perspective:1800px;perspective:1800px}.picker-above-highlight.sc-ion-picker-md{top:0;-webkit-transform:translate3d(0,  0,  90px);transform:translate3d(0,  0,  90px);position:absolute;width:100%;height:81px;border-bottom:1px solid var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-150, rgba(0, 0, 0, 0.13))));background:-webkit-gradient(linear, left top, left bottom, color-stop(20%, var(--ion-background-color, #fff)), to(rgba(var(--ion-background-color-rgb, 255, 255, 255), 0.8)));background:linear-gradient(to bottom, var(--ion-background-color, #fff) 20%, rgba(var(--ion-background-color-rgb, 255, 255, 255), 0.8) 100%);z-index:10}@supports (inset-inline-start: 0){.picker-above-highlight.sc-ion-picker-md{inset-inline-start:0}}@supports not (inset-inline-start: 0){.picker-above-highlight.sc-ion-picker-md{left:0}[dir=rtl].sc-ion-picker-md-h .picker-above-highlight.sc-ion-picker-md,[dir=rtl] .sc-ion-picker-md-h .picker-above-highlight.sc-ion-picker-md{left:unset;right:unset;right:0}[dir=rtl].sc-ion-picker-md .picker-above-highlight.sc-ion-picker-md{left:unset;right:unset;right:0}@supports selector(:dir(rtl)){.picker-above-highlight.sc-ion-picker-md:dir(rtl){left:unset;right:unset;right:0}}}.picker-below-highlight.sc-ion-picker-md{top:115px;-webkit-transform:translate3d(0,  0,  90px);transform:translate3d(0,  0,  90px);position:absolute;width:100%;height:119px;border-top:1px solid var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-150, rgba(0, 0, 0, 0.13))));background:-webkit-gradient(linear, left bottom, left top, color-stop(30%, var(--ion-background-color, #fff)), to(rgba(var(--ion-background-color-rgb, 255, 255, 255), 0.8)));background:linear-gradient(to top, var(--ion-background-color, #fff) 30%, rgba(var(--ion-background-color-rgb, 255, 255, 255), 0.8) 100%);z-index:11}@supports (inset-inline-start: 0){.picker-below-highlight.sc-ion-picker-md{inset-inline-start:0}}@supports not (inset-inline-start: 0){.picker-below-highlight.sc-ion-picker-md{left:0}[dir=rtl].sc-ion-picker-md-h .picker-below-highlight.sc-ion-picker-md,[dir=rtl] .sc-ion-picker-md-h .picker-below-highlight.sc-ion-picker-md{left:unset;right:unset;right:0}[dir=rtl].sc-ion-picker-md .picker-below-highlight.sc-ion-picker-md{left:unset;right:unset;right:0}@supports selector(:dir(rtl)){.picker-below-highlight.sc-ion-picker-md:dir(rtl){left:unset;right:unset;right:0}}}";
+const pickerMdCss$1 = "/*!@:host*/.sc-ion-picker-md-h{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,\n:host .picker-after*/.sc-ion-picker-md-h .picker-before.sc-ion-picker-md,.sc-ion-picker-md-h .picker-after.sc-ion-picker-md{position:absolute;width:100%;-webkit-transform:translateZ(0);transform:translateZ(0);z-index:1;pointer-events:none}/*!@:host .picker-before*/.sc-ion-picker-md-h .picker-before.sc-ion-picker-md{top:0;height:83px}@supports (inset-inline-start: 0){/*!@:host .picker-before*/.sc-ion-picker-md-h .picker-before.sc-ion-picker-md{inset-inline-start:0}}@supports not (inset-inline-start: 0){/*!@:host .picker-before*/.sc-ion-picker-md-h .picker-before.sc-ion-picker-md{left:0}/*!@:host-context([dir=rtl]) .picker-before*/[dir=rtl].sc-ion-picker-md-h .picker-before.sc-ion-picker-md,[dir=rtl] .sc-ion-picker-md-h .picker-before.sc-ion-picker-md{left:unset;right:unset;right:0}/*!@@supports selector(:dir(rtl))*/@supports .sc-ion-picker-md selector(.sc-ion-picker-md:dir(rtl)){.sc-ion-picker-md-h:dir(rtl) .picker-before{left:unset;right:unset;right:0}}}/*!@:host .picker-after*/.sc-ion-picker-md-h .picker-after.sc-ion-picker-md{top:116px;height:84px}@supports (inset-inline-start: 0){/*!@:host .picker-after*/.sc-ion-picker-md-h .picker-after.sc-ion-picker-md{inset-inline-start:0}}@supports not (inset-inline-start: 0){/*!@:host .picker-after*/.sc-ion-picker-md-h .picker-after.sc-ion-picker-md{left:0}/*!@:host-context([dir=rtl]) .picker-after*/[dir=rtl].sc-ion-picker-md-h .picker-after.sc-ion-picker-md,[dir=rtl] .sc-ion-picker-md-h .picker-after.sc-ion-picker-md{left:unset;right:unset;right:0}/*!@@supports selector(:dir(rtl))*/@supports .sc-ion-picker-md selector(.sc-ion-picker-md:dir(rtl)){.sc-ion-picker-md-h:dir(rtl) .picker-after{left:unset;right:unset;right:0}}}/*!@:host .picker-highlight*/.sc-ion-picker-md-h .picker-highlight.sc-ion-picker-md{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*/.sc-ion-picker-md-h input.sc-ion-picker-md{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)*/.sc-ion-picker-md-h .sc-ion-picker-md-s>ion-picker-column:first-of-type{text-align:start}/*!@:host ::slotted(ion-picker-column:last-of-type)*/.sc-ion-picker-md-h .sc-ion-picker-md-s>ion-picker-column:last-of-type{text-align:end}/*!@:host ::slotted(ion-picker-column:only-child)*/.sc-ion-picker-md-h .sc-ion-picker-md-s>ion-picker-column:only-child{text-align:center}/*!@:host .picker-before*/.sc-ion-picker-md-h .picker-before.sc-ion-picker-md{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*/.sc-ion-picker-md-h .picker-after.sc-ion-picker-md{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%)}";
 
-// TODO(FW-2832): types
 /**
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
  */
-class Picker {
+class Picker$1 {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.didPresent = createEvent(this, "ionPickerDidPresent", 7);
-        this.willPresent = createEvent(this, "ionPickerWillPresent", 7);
-        this.willDismiss = createEvent(this, "ionPickerWillDismiss", 7);
-        this.didDismiss = createEvent(this, "ionPickerDidDismiss", 7);
-        this.didPresentShorthand = createEvent(this, "didPresent", 7);
-        this.willPresentShorthand = createEvent(this, "willPresent", 7);
-        this.willDismissShorthand = createEvent(this, "willDismiss", 7);
-        this.didDismissShorthand = createEvent(this, "didDismiss", 7);
-        this.delegateController = createDelegateController(this);
-        this.lockController = createLockController();
-        this.triggerController = createTriggerController();
-        this.onBackdropTap = () => {
-            this.dismiss(undefined, BACKDROP);
+        this.ionInputModeChange = createEvent(this, "ionInputModeChange", 7);
+        this.useInputMode = false;
+        this.isInHighlightBounds = (ev) => {
+            const { highlightEl } = this;
+            if (!highlightEl) {
+                return false;
+            }
+            const bbox = highlightEl.getBoundingClientRect();
+            /**
+             * Check to see if the user clicked
+             * outside the bounds of the highlight.
+             */
+            const outsideX = ev.clientX < bbox.left || ev.clientX > bbox.right;
+            const outsideY = ev.clientY < bbox.top || ev.clientY > bbox.bottom;
+            if (outsideX || outsideY) {
+                return false;
+            }
+            return true;
         };
-        this.dispatchCancelHandler = (ev) => {
-            const role = ev.detail.role;
-            if (isCancel(role)) {
-                const cancelButton = this.buttons.find((b) => b.role === 'cancel');
-                this.callButtonHandler(cancelButton);
+        /**
+         * If we are no longer focused
+         * on a picker column, then we should
+         * exit input mode. An exception is made
+         * for the input in the picker since having
+         * that focused means we are still in input mode.
+         */
+        this.onFocusOut = (ev) => {
+            // TODO(FW-2832): type
+            const { relatedTarget } = ev;
+            if (!relatedTarget || (relatedTarget.tagName !== 'ION-PICKER-COLUMN' && relatedTarget !== this.inputEl)) {
+                this.exitInputMode();
             }
         };
-        this.presented = false;
-        this.overlayIndex = undefined;
-        this.delegate = undefined;
-        this.hasController = false;
-        this.keyboardClose = true;
-        this.enterAnimation = undefined;
-        this.leaveAnimation = undefined;
-        this.buttons = [];
-        this.columns = [];
-        this.cssClass = undefined;
-        this.duration = 0;
-        this.showBackdrop = true;
-        this.backdropDismiss = true;
-        this.animated = true;
-        this.htmlAttributes = undefined;
-        this.isOpen = false;
-        this.trigger = undefined;
-    }
-    onIsOpenChange(newValue, oldValue) {
-        if (newValue === true && oldValue === false) {
-            this.present();
-        }
-        else if (newValue === false && oldValue === true) {
-            this.dismiss();
-        }
-    }
-    triggerChanged() {
-        const { trigger, el, triggerController } = this;
-        if (trigger) {
-            triggerController.addClickListener(el, trigger);
-        }
-    }
-    connectedCallback() {
-        prepareOverlay(this.el);
-        this.triggerChanged();
-    }
-    disconnectedCallback() {
-        this.triggerController.removeClickListener();
-    }
-    componentWillLoad() {
-        setOverlayId(this.el);
-    }
-    componentDidLoad() {
         /**
-         * If picker was rendered with isOpen="true"
-         * then we should open picker immediately.
+         * When picker columns receive focus
+         * the parent picker needs to determine
+         * whether to enter/exit input mode.
          */
-        if (this.isOpen === true) {
-            raf(() => this.present());
-        }
+        this.onFocusIn = (ev) => {
+            // TODO(FW-2832): type
+            const { target } = ev;
+            /**
+             * Due to browser differences in how/when focus
+             * is dispatched on certain elements, we need to
+             * make sure that this function only ever runs when
+             * focusing a picker column.
+             */
+            if (target.tagName !== 'ION-PICKER-COLUMN') {
+                return;
+            }
+            /**
+             * If we have actionOnClick
+             * then this means the user focused
+             * a picker column via mouse or
+             * touch (i.e. a PointerEvent). As a result,
+             * we should not enter/exit input mode
+             * until the click event has fired, which happens
+             * after the `focusin` event.
+             *
+             * Otherwise, the user likely focused
+             * the column using their keyboard and
+             * we should enter/exit input mode automatically.
+             */
+            if (!this.actionOnClick) {
+                const columnEl = target;
+                const allowInput = columnEl.numericInput;
+                if (allowInput) {
+                    this.enterInputMode(columnEl, false);
+                }
+                else {
+                    this.exitInputMode();
+                }
+            }
+        };
         /**
-         * When binding values in frameworks such as Angular
-         * it is possible for the value to be set after the Web Component
-         * initializes but before the value watcher is set up in Stencil.
-         * As a result, the watcher callback may not be fired.
-         * We work around this by manually calling the watcher
-         * callback when the component has loaded and the watcher
-         * is configured.
+         * On click we need to run an actionOnClick
+         * function that has been set in onPointerDown
+         * so that we enter/exit input mode correctly.
          */
-        this.triggerChanged();
-    }
-    /**
-     * Present the picker overlay after it has been created.
-     */
-    async present() {
-        const unlock = await this.lockController.lock();
-        await this.delegateController.attachViewToDom();
-        await present(this, 'pickerEnter', iosEnterAnimation$2, iosEnterAnimation$2, undefined);
-        if (this.duration > 0) {
-            this.durationTimeout = setTimeout(() => this.dismiss(), this.duration);
-        }
-        unlock();
-    }
-    /**
-     * Dismiss the picker overlay after it has been presented.
-     *
-     * @param data Any data to emit in the dismiss events.
-     * @param role The role of the element that is dismissing the picker.
-     * This can be useful in a button handler for determining which button was
-     * clicked to dismiss the picker.
-     * Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.
-     */
-    async dismiss(data, role) {
-        const unlock = await this.lockController.lock();
-        if (this.durationTimeout) {
-            clearTimeout(this.durationTimeout);
-        }
-        const dismissed = await dismiss(this, data, role, 'pickerLeave', iosLeaveAnimation$2, iosLeaveAnimation$2);
-        if (dismissed) {
-            this.delegateController.removeViewFromDom();
-        }
-        unlock();
-        return dismissed;
-    }
-    /**
-     * Returns a promise that resolves when the picker did dismiss.
-     */
-    onDidDismiss() {
-        return eventMethod(this.el, 'ionPickerDidDismiss');
-    }
-    /**
-     * Returns a promise that resolves when the picker will dismiss.
-     */
-    onWillDismiss() {
-        return eventMethod(this.el, 'ionPickerWillDismiss');
-    }
-    /**
-     * Get the column that matches the specified name.
-     *
-     * @param name The name of the column.
-     */
-    getColumn(name) {
-        return Promise.resolve(this.columns.find((column) => column.name === name));
-    }
-    async buttonClick(button) {
-        const role = button.role;
-        if (isCancel(role)) {
-            return this.dismiss(undefined, role);
-        }
-        const shouldDismiss = await this.callButtonHandler(button);
-        if (shouldDismiss) {
-            return this.dismiss(this.getSelected(), button.role);
-        }
-        return Promise.resolve();
-    }
-    async callButtonHandler(button) {
-        if (button) {
-            // a handler has been provided, execute it
-            // pass the handler the values from the inputs
-            const rtn = await safeCall(button.handler, this.getSelected());
-            if (rtn === false) {
-                // if the return value of the handler is false then do not dismiss
-                return false;
+        this.onClick = () => {
+            const { actionOnClick } = this;
+            if (actionOnClick) {
+                actionOnClick();
+                this.actionOnClick = undefined;
             }
-        }
-        return true;
-    }
-    getSelected() {
-        const selected = {};
-        this.columns.forEach((col, index) => {
-            const selectedColumn = col.selectedIndex !== undefined ? col.options[col.selectedIndex] : undefined;
-            selected[col.name] = {
-                text: selectedColumn ? selectedColumn.text : undefined,
-                value: selectedColumn ? selectedColumn.value : undefined,
-                columnIndex: index,
-            };
-        });
-        return selected;
-    }
-    render() {
-        const { htmlAttributes } = this;
-        const mode = getIonMode$1(this);
-        return (hAsync(Host, Object.assign({ "aria-modal": "true", tabindex: "-1" }, htmlAttributes, { style: {
-                zIndex: `${20000 + this.overlayIndex}`,
-            }, class: Object.assign({ [mode]: true,
-                // Used internally for styling
-                [`picker-${mode}`]: true, 'overlay-hidden': true }, getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonPickerWillDismiss: this.dispatchCancelHandler }), hAsync("ion-backdrop", { visible: this.showBackdrop, tappable: this.backdropDismiss }), hAsync("div", { tabindex: "0" }), hAsync("div", { class: "picker-wrapper ion-overlay-wrapper", role: "dialog" }, hAsync("div", { class: "picker-toolbar" }, this.buttons.map((b) => (hAsync("div", { class: buttonWrapperClass(b) }, hAsync("button", { type: "button", onClick: () => this.buttonClick(b), class: buttonClass$1(b) }, b.text))))), hAsync("div", { class: "picker-columns" }, hAsync("div", { class: "picker-above-highlight" }), this.presented && this.columns.map((c) => hAsync("ion-picker-column", { col: c })), hAsync("div", { class: "picker-below-highlight" }))), hAsync("div", { tabindex: "0" })));
-    }
-    get el() { return getElement(this); }
-    static get watchers() { return {
-        "isOpen": ["onIsOpenChange"],
-        "trigger": ["triggerChanged"]
-    }; }
-    static get style() { return {
-        ios: pickerIosCss,
-        md: pickerMdCss
-    }; }
-    static get cmpMeta() { return {
-        "$flags$": 34,
-        "$tagName$": "ion-picker",
-        "$members$": {
-            "overlayIndex": [2, "overlay-index"],
-            "delegate": [16],
-            "hasController": [4, "has-controller"],
-            "keyboardClose": [4, "keyboard-close"],
-            "enterAnimation": [16],
-            "leaveAnimation": [16],
-            "buttons": [16],
-            "columns": [16],
-            "cssClass": [1, "css-class"],
-            "duration": [2],
-            "showBackdrop": [4, "show-backdrop"],
-            "backdropDismiss": [4, "backdrop-dismiss"],
-            "animated": [4],
-            "htmlAttributes": [16],
-            "isOpen": [4, "is-open"],
-            "trigger": [1],
-            "presented": [32],
-            "present": [64],
-            "dismiss": [64],
-            "onDidDismiss": [64],
-            "onWillDismiss": [64],
-            "getColumn": [64]
-        },
-        "$listeners$": undefined,
-        "$lazyBundleId$": "-",
-        "$attrsToReflect$": []
-    }; }
-}
-const buttonWrapperClass = (button) => {
-    return {
-        [`picker-toolbar-${button.role}`]: button.role !== undefined,
-        'picker-toolbar-button': true,
-    };
-};
-const buttonClass$1 = (button) => {
-    return Object.assign({ 'picker-button': true, 'ion-activatable': true }, getClassMap(button.cssClass));
-};
-
-const pickerColumnIosCss = ".picker-col{display:-ms-flexbox;display:flex;position:relative;-ms-flex:1;flex:1;-ms-flex-pack:center;justify-content:center;height:100%;-webkit-box-sizing:content-box;box-sizing:content-box;contain:content}.picker-opts{position:relative;-ms-flex:1;flex:1;max-width:100%}.picker-opt{top:0;display:block;position:absolute;width:100%;border:0;text-align:center;text-overflow:ellipsis;white-space:nowrap;contain:strict;overflow:hidden;will-change:transform}@supports (inset-inline-start: 0){.picker-opt{inset-inline-start:0}}@supports not (inset-inline-start: 0){.picker-opt{left:0}:host-context([dir=rtl]) .picker-opt{left:unset;right:unset;right:0}[dir=rtl] .picker-opt{left:unset;right:unset;right:0}@supports selector(:dir(rtl)){.picker-opt:dir(rtl){left:unset;right:unset;right:0}}}.picker-opt.picker-opt-disabled{pointer-events:none}.picker-opt-disabled{opacity:0}.picker-opts-left{-ms-flex-pack:start;justify-content:flex-start}.picker-opts-right{-ms-flex-pack:end;justify-content:flex-end}.picker-opt:active,.picker-opt:focus{outline:none}.picker-prefix{position:relative;-ms-flex:1;flex:1;text-align:end;white-space:nowrap}.picker-suffix{position:relative;-ms-flex:1;flex:1;text-align:start;white-space:nowrap}.picker-col{-webkit-padding-start:4px;padding-inline-start:4px;-webkit-padding-end:4px;padding-inline-end:4px;padding-top:0;padding-bottom:0;-webkit-transform-style:preserve-3d;transform-style:preserve-3d}.picker-prefix,.picker-suffix,.picker-opts{top:77px;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;color:inherit;font-size:20px;line-height:42px;pointer-events:none}.picker-opt{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;-webkit-transform-origin:center center;transform-origin:center center;height:46px;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-transition-timing-function:ease-out;transition-timing-function:ease-out;background:transparent;color:inherit;font-size:20px;line-height:42px;-webkit-backface-visibility:hidden;backface-visibility:hidden;pointer-events:auto}:host-context([dir=rtl]) .picker-opt{-webkit-transform-origin:calc(100% - center) center;transform-origin:calc(100% - center) center}[dir=rtl] .picker-opt{-webkit-transform-origin:calc(100% - center) center;transform-origin:calc(100% - center) center}@supports selector(:dir(rtl)){.picker-opt:dir(rtl){-webkit-transform-origin:calc(100% - center) center;transform-origin:calc(100% - center) center}}";
-
-const pickerColumnMdCss = ".picker-col{display:-ms-flexbox;display:flex;position:relative;-ms-flex:1;flex:1;-ms-flex-pack:center;justify-content:center;height:100%;-webkit-box-sizing:content-box;box-sizing:content-box;contain:content}.picker-opts{position:relative;-ms-flex:1;flex:1;max-width:100%}.picker-opt{top:0;display:block;position:absolute;width:100%;border:0;text-align:center;text-overflow:ellipsis;white-space:nowrap;contain:strict;overflow:hidden;will-change:transform}@supports (inset-inline-start: 0){.picker-opt{inset-inline-start:0}}@supports not (inset-inline-start: 0){.picker-opt{left:0}:host-context([dir=rtl]) .picker-opt{left:unset;right:unset;right:0}[dir=rtl] .picker-opt{left:unset;right:unset;right:0}@supports selector(:dir(rtl)){.picker-opt:dir(rtl){left:unset;right:unset;right:0}}}.picker-opt.picker-opt-disabled{pointer-events:none}.picker-opt-disabled{opacity:0}.picker-opts-left{-ms-flex-pack:start;justify-content:flex-start}.picker-opts-right{-ms-flex-pack:end;justify-content:flex-end}.picker-opt:active,.picker-opt:focus{outline:none}.picker-prefix{position:relative;-ms-flex:1;flex:1;text-align:end;white-space:nowrap}.picker-suffix{position:relative;-ms-flex:1;flex:1;text-align:start;white-space:nowrap}.picker-col{-webkit-padding-start:8px;padding-inline-start:8px;-webkit-padding-end:8px;padding-inline-end:8px;padding-top:0;padding-bottom:0;-webkit-transform-style:preserve-3d;transform-style:preserve-3d}.picker-prefix,.picker-suffix,.picker-opts{top:77px;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;color:inherit;font-size:22px;line-height:42px;pointer-events:none}.picker-opt{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;height:43px;-webkit-transition-timing-function:ease-out;transition-timing-function:ease-out;background:transparent;color:inherit;font-size:22px;line-height:42px;-webkit-backface-visibility:hidden;backface-visibility:hidden;pointer-events:auto}.picker-prefix,.picker-suffix,.picker-opt.picker-opt-selected{color:var(--ion-color-primary, #3880ff)}";
-
-/**
- * @internal
- */
-class PickerColumnCmp {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.ionPickerColChange = createEvent(this, "ionPickerColChange", 7);
-        this.optHeight = 0;
-        this.rotateFactor = 0;
-        this.scaleFactor = 1;
-        this.velocity = 0;
-        this.y = 0;
-        this.noAnimate = true;
-        // `colDidChange` is a flag that gets set when the column is changed
-        // dynamically. When this flag is set, the column will refresh
-        // after the component re-renders to incorporate the new column data.
-        // This is necessary because `this.refresh` queries for the option elements,
-        // so it needs to wait for the latest elements to be available in the DOM.
-        // Ex: column is created with 3 options. User updates the column data
-        // to have 5 options. The column will still think it only has 3 options.
-        this.colDidChange = false;
-        this.col = undefined;
-    }
-    colChanged() {
-        this.colDidChange = true;
-    }
-    async connectedCallback() {
-        let pickerRotateFactor = 0;
-        let pickerScaleFactor = 0.81;
-        const mode = getIonMode$1(this);
-        if (mode === 'ios') {
-            pickerRotateFactor = -0.46;
-            pickerScaleFactor = 1;
-        }
-        this.rotateFactor = pickerRotateFactor;
-        this.scaleFactor = pickerScaleFactor;
-        this.gesture = (await Promise.resolve().then(function () { return index; })).createGesture({
-            el: this.el,
-            gestureName: 'picker-swipe',
-            gesturePriority: 100,
-            threshold: 0,
-            passive: false,
-            onStart: (ev) => this.onStart(ev),
-            onMove: (ev) => this.onMove(ev),
-            onEnd: (ev) => this.onEnd(ev),
-        });
-        this.gesture.enable();
-        // Options have not been initialized yet
-        // Animation must be disabled through the `noAnimate` flag
-        // Otherwise, the options will render
-        // at the top of the column and transition down
-        this.tmrId = setTimeout(() => {
-            this.noAnimate = false;
-            // After initialization, `refresh()` will be called
-            // At this point, animation will be enabled. The options will
-            // animate as they are being selected.
-            this.refresh(true);
-        }, 250);
-    }
-    componentDidLoad() {
-        this.onDomChange();
-    }
-    componentDidUpdate() {
-        // Options may have changed since last update.
-        if (this.colDidChange) {
-            // Animation must be disabled through the `onDomChange` parameter.
-            // Otherwise, the recently added options will render
-            // at the top of the column and transition down
-            this.onDomChange(true, false);
-            this.colDidChange = false;
-        }
-    }
-    disconnectedCallback() {
-        if (this.rafId !== undefined)
-            cancelAnimationFrame(this.rafId);
-        if (this.tmrId)
-            clearTimeout(this.tmrId);
-        if (this.gesture) {
-            this.gesture.destroy();
-            this.gesture = undefined;
-        }
-    }
-    emitColChange() {
-        this.ionPickerColChange.emit(this.col);
-    }
-    setSelected(selectedIndex, duration) {
-        // if there is a selected index, then figure out it's y position
-        // if there isn't a selected index, then just use the top y position
-        const y = selectedIndex > -1 ? -(selectedIndex * this.optHeight) : 0;
-        this.velocity = 0;
-        // set what y position we're at
-        if (this.rafId !== undefined)
-            cancelAnimationFrame(this.rafId);
-        this.update(y, duration, true);
-        this.emitColChange();
-    }
-    update(y, duration, saveY) {
-        if (!this.optsEl) {
-            return;
-        }
-        // ensure we've got a good round number :)
-        let translateY = 0;
-        let translateZ = 0;
-        const { col, rotateFactor } = this;
-        const prevSelected = col.selectedIndex;
-        const selectedIndex = (col.selectedIndex = this.indexForY(-y));
-        const durationStr = duration === 0 ? '' : duration + 'ms';
-        const scaleStr = `scale(${this.scaleFactor})`;
-        const children = this.optsEl.children;
-        for (let i = 0; i < children.length; i++) {
-            const button = children[i];
-            const opt = col.options[i];
-            const optOffset = i * this.optHeight + y;
-            let transform = '';
-            if (rotateFactor !== 0) {
-                const rotateX = optOffset * rotateFactor;
-                if (Math.abs(rotateX) <= 90) {
-                    translateY = 0;
-                    translateZ = 90;
-                    transform = `rotateX(${rotateX}deg) `;
+        };
+        /**
+         * Clicking a column also focuses the column on
+         * certain browsers, so we use onPointerDown
+         * to tell the onFocusIn function that users
+         * are trying to click the column rather than
+         * focus the column using the keyboard. When the
+         * user completes the click, the onClick function
+         * runs and runs the actionOnClick callback.
+         */
+        this.onPointerDown = (ev) => {
+            const { useInputMode, inputModeColumn, el } = this;
+            if (this.isInHighlightBounds(ev)) {
+                /**
+                 * If we were already in
+                 * input mode, then we should determine
+                 * if we tapped a particular column and
+                 * should switch to input mode for
+                 * that specific column.
+                 */
+                if (useInputMode) {
+                    /**
+                     * If we tapped a picker column
+                     * then we should either switch to input
+                     * mode for that column or all columns.
+                     * Otherwise we should exit input mode
+                     * since we just tapped the highlight and
+                     * not a column.
+                     */
+                    if (ev.target.tagName === 'ION-PICKER-COLUMN') {
+                        /**
+                         * If user taps 2 different columns
+                         * then we should just switch to input mode
+                         * for the new column rather than switching to
+                         * input mode for all columns.
+                         */
+                        if (inputModeColumn && inputModeColumn === ev.target) {
+                            this.actionOnClick = () => {
+                                this.enterInputMode();
+                            };
+                        }
+                        else {
+                            this.actionOnClick = () => {
+                                this.enterInputMode(ev.target);
+                            };
+                        }
+                    }
+                    else {
+                        this.actionOnClick = () => {
+                            this.exitInputMode();
+                        };
+                    }
+                    /**
+                     * If we were not already in
+                     * input mode, then we should
+                     * enter input mode for all columns.
+                     */
                 }
                 else {
-                    translateY = -9999;
+                    /**
+                     * 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 columnEl = columns.length === 1 ? ev.target : undefined;
+                    this.actionOnClick = () => {
+                        this.enterInputMode(columnEl);
+                    };
+                }
+                return;
+            }
+            this.actionOnClick = () => {
+                this.exitInputMode();
+            };
+        };
+        /**
+         * Enters input mode to allow
+         * for text entry of numeric values.
+         * If on mobile, we focus a hidden input
+         * field so that the on screen keyboard
+         * is brought up. When tabbing using a
+         * keyboard, picker columns receive an outline
+         * to indicate they are focused. As a result,
+         * we should not focus the hidden input as it
+         * would cause the outline to go away, preventing
+         * users from having any visual indication of which
+         * column is focused.
+         */
+        this.enterInputMode = (columnEl, focusInput = true) => {
+            const { inputEl, el } = this;
+            if (!inputEl) {
+                return;
+            }
+            /**
+             * 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');
+            if (!hasInputColumn) {
+                return;
+            }
+            /**
+             * If columnEl is undefined then
+             * it is assumed that all numeric pickers
+             * are eligible for text entry.
+             * (i.e. hour and minute columns)
+             */
+            this.useInputMode = true;
+            this.inputModeColumn = columnEl;
+            /**
+             * Users with a keyboard and mouse can
+             * activate input mode where the input is
+             * focused as well as when it is not focused,
+             * so we need to make sure we clean up any
+             * old listeners.
+             */
+            if (focusInput) {
+                if (this.destroyKeypressListener) {
+                    this.destroyKeypressListener();
+                    this.destroyKeypressListener = undefined;
                 }
+                inputEl.focus();
             }
             else {
-                translateZ = 0;
-                translateY = optOffset;
+                el.addEventListener('keypress', this.onKeyPress);
+                this.destroyKeypressListener = () => {
+                    el.removeEventListener('keypress', this.onKeyPress);
+                };
             }
-            const selected = selectedIndex === i;
-            transform += `translate3d(0px,${translateY}px,${translateZ}px) `;
-            if (this.scaleFactor !== 1 && !selected) {
-                transform += scaleStr;
+            this.emitInputModeChange();
+        };
+        this.onKeyPress = (ev) => {
+            const { inputEl } = this;
+            if (!inputEl) {
+                return;
             }
-            // Update transition duration
-            if (this.noAnimate) {
-                opt.duration = 0;
-                button.style.transitionDuration = '';
+            const parsedValue = parseInt(ev.key, 10);
+            /**
+             * Only numbers should be allowed
+             */
+            if (!Number.isNaN(parsedValue)) {
+                inputEl.value += ev.key;
+                this.onInputChange();
             }
-            else if (duration !== opt.duration) {
-                opt.duration = duration;
-                button.style.transitionDuration = durationStr;
+        };
+        this.selectSingleColumn = () => {
+            const { inputEl, inputModeColumn, singleColumnSearchTimeout } = this;
+            if (!inputEl || !inputModeColumn) {
+                return;
+            }
+            const values = inputModeColumn.items.filter((item) => item.disabled !== true);
+            /**
+             * If users pause for a bit, the search
+             * value should be reset similar to how a
+             * <select> behaves. So typing "34", waiting,
+             * then typing "5" should select "05".
+             */
+            if (singleColumnSearchTimeout) {
+                clearTimeout(singleColumnSearchTimeout);
+            }
+            this.singleColumnSearchTimeout = setTimeout(() => {
+                inputEl.value = '';
+                this.singleColumnSearchTimeout = undefined;
+            }, 1000);
+            /**
+             * For values that are longer than 2 digits long
+             * we should shift the value over 1 character
+             * to the left. So typing "456" would result in "56".
+             * TODO: If we want to support more than just
+             * time entry, we should update this value to be
+             * the max length of all of the picker items.
+             */
+            if (inputEl.value.length >= 3) {
+                const startIndex = inputEl.value.length - 2;
+                const newString = inputEl.value.substring(startIndex);
+                inputEl.value = newString;
+                this.selectSingleColumn();
+                return;
+            }
+            /**
+             * Checking the value of the input gets priority
+             * first. For example, if the value of the input
+             * is "1" and we entered "2", then the complete value
+             * is "12" and we should select hour 12.
+             *
+             * Regex removes any leading zeros from values like "02",
+             * but it keeps a single zero if there are only zeros in the string.
+             * 0+(?=[1-9]) --> Match 1 or more zeros that are followed by 1-9
+             * 0+(?=0$) --> Match 1 or more zeros that must be followed by one 0 and end.
+             */
+            const findItemFromCompleteValue = values.find(({ text }) => {
+                const parsedText = text.replace(/^0+(?=[1-9])|0+(?=0$)/, '');
+                return parsedText === inputEl.value;
+            });
+            if (findItemFromCompleteValue) {
+                inputModeColumn.setValue(findItemFromCompleteValue.value);
+                return;
+            }
+            /**
+             * If we typed "56" to get minute 56, then typed "7",
+             * we should select "07" as "567" is not a valid minute.
+             */
+            if (inputEl.value.length === 2) {
+                const changedCharacter = inputEl.value.substring(inputEl.value.length - 1);
+                inputEl.value = changedCharacter;
+                this.selectSingleColumn();
+            }
+        };
+        /**
+         * Searches a list of column items for a particular
+         * value. This is currently used for numeric values.
+         * The zeroBehavior can be set to account for leading
+         * or trailing zeros when looking at the item text.
+         */
+        this.searchColumn = (colEl, value, zeroBehavior = 'start') => {
+            const behavior = zeroBehavior === 'start' ? /^0+/ : /0$/;
+            const item = colEl.items.find(({ text, disabled }) => disabled !== true && text.replace(behavior, '') === value);
+            if (item) {
+                colEl.setValue(item.value);
+            }
+        };
+        this.selectMultiColumn = () => {
+            const { inputEl, el } = this;
+            if (!inputEl) {
+                return;
+            }
+            const numericPickers = Array.from(el.querySelectorAll('ion-picker-column')).filter((col) => col.numericInput);
+            const firstColumn = numericPickers[0];
+            const lastColumn = numericPickers[1];
+            let value = inputEl.value;
+            let minuteValue;
+            switch (value.length) {
+                case 1:
+                    this.searchColumn(firstColumn, value);
+                    break;
+                case 2:
+                    /**
+                     * If the first character is `0` or `1` it is
+                     * possible that users are trying to type `09`
+                     * or `11` into the hour field, so we should look
+                     * at that first.
+                     */
+                    const firstCharacter = inputEl.value.substring(0, 1);
+                    value = firstCharacter === '0' || firstCharacter === '1' ? inputEl.value : firstCharacter;
+                    this.searchColumn(firstColumn, value);
+                    /**
+                     * If only checked the first value,
+                     * we can check the second value
+                     * for a match in the minutes column
+                     */
+                    if (value.length === 1) {
+                        minuteValue = inputEl.value.substring(inputEl.value.length - 1);
+                        this.searchColumn(lastColumn, minuteValue, 'end');
+                    }
+                    break;
+                case 3:
+                    /**
+                     * If the first character is `0` or `1` it is
+                     * possible that users are trying to type `09`
+                     * or `11` into the hour field, so we should look
+                     * at that first.
+                     */
+                    const firstCharacterAgain = inputEl.value.substring(0, 1);
+                    value =
+                        firstCharacterAgain === '0' || firstCharacterAgain === '1'
+                            ? inputEl.value.substring(0, 2)
+                            : firstCharacterAgain;
+                    this.searchColumn(firstColumn, value);
+                    /**
+                     * If only checked the first value,
+                     * we can check the second value
+                     * for a match in the minutes column
+                     */
+                    minuteValue = value.length === 1 ? inputEl.value.substring(1) : inputEl.value.substring(2);
+                    this.searchColumn(lastColumn, minuteValue, 'end');
+                    break;
+                case 4:
+                    /**
+                     * If the first character is `0` or `1` it is
+                     * possible that users are trying to type `09`
+                     * or `11` into the hour field, so we should look
+                     * at that first.
+                     */
+                    const firstCharacterAgainAgain = inputEl.value.substring(0, 1);
+                    value =
+                        firstCharacterAgainAgain === '0' || firstCharacterAgainAgain === '1'
+                            ? inputEl.value.substring(0, 2)
+                            : firstCharacterAgainAgain;
+                    this.searchColumn(firstColumn, value);
+                    /**
+                     * If only checked the first value,
+                     * we can check the second value
+                     * for a match in the minutes column
+                     */
+                    const minuteValueAgain = value.length === 1
+                        ? inputEl.value.substring(1, inputEl.value.length)
+                        : inputEl.value.substring(2, inputEl.value.length);
+                    this.searchColumn(lastColumn, minuteValueAgain, 'end');
+                    break;
+                default:
+                    const startIndex = inputEl.value.length - 4;
+                    const newString = inputEl.value.substring(startIndex);
+                    inputEl.value = newString;
+                    this.selectMultiColumn();
+                    break;
             }
-            // Update transform
-            if (transform !== opt.transform) {
-                opt.transform = transform;
+        };
+        /**
+         * Searches the value of the active column
+         * to determine which value users are trying
+         * to select
+         */
+        this.onInputChange = () => {
+            const { useInputMode, inputEl, inputModeColumn } = this;
+            if (!useInputMode || !inputEl) {
+                return;
             }
-            button.style.transform = transform;
-            /**
-             * Ensure that the select column
-             * item has the selected class
-             */
-            opt.selected = selected;
-            if (selected) {
-                button.classList.add(PICKER_OPT_SELECTED);
+            if (inputModeColumn) {
+                this.selectSingleColumn();
             }
             else {
-                button.classList.remove(PICKER_OPT_SELECTED);
+                this.selectMultiColumn();
             }
-        }
-        this.col.prevSelected = prevSelected;
-        if (saveY) {
-            this.y = y;
-        }
-        if (this.lastIndex !== selectedIndex) {
-            // have not set a last index yet
-            hapticSelectionChanged();
-            this.lastIndex = selectedIndex;
-        }
+        };
+        /**
+         * Emit ionInputModeChange. Picker columns
+         * listen for this event to determine whether
+         * or not their column is "active" for text input.
+         */
+        this.emitInputModeChange = () => {
+            const { useInputMode, inputModeColumn } = this;
+            this.ionInputModeChange.emit({
+                useInputMode,
+                inputModeColumn,
+            });
+        };
     }
-    decelerate() {
-        if (this.velocity !== 0) {
-            // still decelerating
-            this.velocity *= DECELERATION_FRICTION;
-            // do not let it go slower than a velocity of 1
-            this.velocity = this.velocity > 0 ? Math.max(this.velocity, 1) : Math.min(this.velocity, -1);
-            let y = this.y + this.velocity;
-            if (y > this.minY) {
-                // whoops, it's trying to scroll up farther than the options we have!
-                y = this.minY;
-                this.velocity = 0;
-            }
-            else if (y < this.maxY) {
-                // gahh, it's trying to scroll down farther than we can!
-                y = this.maxY;
-                this.velocity = 0;
-            }
-            this.update(y, 0, true);
-            const notLockedIn = Math.round(y) % this.optHeight !== 0 || Math.abs(this.velocity) > 1;
-            if (notLockedIn) {
-                // isn't locked in yet, keep decelerating until it is
-                this.rafId = requestAnimationFrame(() => this.decelerate());
-            }
-            else {
-                this.velocity = 0;
-                this.emitColChange();
-                hapticSelectionEnd();
-            }
-        }
-        else if (this.y % this.optHeight !== 0) {
-            // needs to still get locked into a position so options line up
-            const currentPos = Math.abs(this.y % this.optHeight);
-            // create a velocity in the direction it needs to scroll
-            this.velocity = currentPos > this.optHeight / 2 ? 1 : -1;
-            this.decelerate();
-        }
+    /**
+     * When the picker is interacted with
+     * we need to prevent touchstart so other
+     * gestures do not fire. For example,
+     * scrolling on the wheel picker
+     * in ion-datetime should not cause
+     * a card modal to swipe to close.
+     */
+    preventTouchStartPropagation(ev) {
+        ev.stopPropagation();
     }
-    indexForY(y) {
-        return Math.min(Math.max(Math.abs(Math.round(y / this.optHeight)), 0), this.col.options.length - 1);
+    componentWillLoad() {
+        getElementRoot(this.el).addEventListener('focusin', this.onFocusIn);
+        getElementRoot(this.el).addEventListener('focusout', this.onFocusOut);
     }
-    onStart(detail) {
-        // We have to prevent default in order to block scrolling under the picker
-        // but we DO NOT have to stop propagation, since we still want
-        // some "click" events to capture
-        if (detail.event.cancelable) {
-            detail.event.preventDefault();
+    /**
+     * @internal
+     * Exits text entry mode for the picker
+     * This method blurs the hidden input
+     * and cause the keyboard to dismiss.
+     */
+    async exitInputMode() {
+        const { inputEl, useInputMode } = this;
+        if (!useInputMode || !inputEl) {
+            return;
         }
-        detail.event.stopPropagation();
-        hapticSelectionStart();
-        // reset everything
-        if (this.rafId !== undefined)
-            cancelAnimationFrame(this.rafId);
-        const options = this.col.options;
-        let minY = options.length - 1;
-        let maxY = 0;
-        for (let i = 0; i < options.length; i++) {
-            if (!options[i].disabled) {
-                minY = Math.min(minY, i);
-                maxY = Math.max(maxY, i);
-            }
+        this.useInputMode = false;
+        this.inputModeColumn = undefined;
+        inputEl.blur();
+        inputEl.value = '';
+        if (this.destroyKeypressListener) {
+            this.destroyKeypressListener();
+            this.destroyKeypressListener = undefined;
         }
-        this.minY = -(minY * this.optHeight);
-        this.maxY = -(maxY * this.optHeight);
+        this.emitInputModeChange();
     }
-    onMove(detail) {
-        if (detail.event.cancelable) {
-            detail.event.preventDefault();
-        }
-        detail.event.stopPropagation();
-        // update the scroll position relative to pointer start position
-        let y = this.y + detail.deltaY;
-        if (y > this.minY) {
-            // scrolling up higher than scroll area
-            y = Math.pow(y, 0.8);
-            this.bounceFrom = y;
+    render() {
+        return (hAsync(Host, { onPointerDown: (ev) => this.onPointerDown(ev), onClick: () => this.onClick() }, hAsync("input", { "aria-hidden": "true", tabindex: -1, inputmode: "numeric", type: "number", ref: (el) => (this.inputEl = el), onInput: () => this.onInputChange(), onBlur: () => this.exitInputMode() }), hAsync("div", { class: "picker-before" }), hAsync("div", { class: "picker-after" }), hAsync("div", { class: "picker-highlight", ref: (el) => (this.highlightEl = el) }), hAsync("slot", null)));
+    }
+    get el() { return getElement(this); }
+    static get style() { return {
+        ios: pickerIosCss$1,
+        md: pickerMdCss$1
+    }; }
+    static get cmpMeta() { return {
+        "$flags$": 41,
+        "$tagName$": "ion-picker",
+        "$members$": {
+            "exitInputMode": [64]
+        },
+        "$listeners$": [[1, "touchstart", "preventTouchStartPropagation"]],
+        "$lazyBundleId$": "-",
+        "$attrsToReflect$": []
+    }; }
+}
+
+/**
+ * iOS Picker Enter Animation
+ */
+const iosEnterAnimation$2 = (baseEl) => {
+    const baseAnimation = createAnimation();
+    const backdropAnimation = createAnimation();
+    const wrapperAnimation = createAnimation();
+    backdropAnimation
+        .addElement(baseEl.querySelector('ion-backdrop'))
+        .fromTo('opacity', 0.01, 'var(--backdrop-opacity)')
+        .beforeStyles({
+        'pointer-events': 'none',
+    })
+        .afterClearStyles(['pointer-events']);
+    wrapperAnimation
+        .addElement(baseEl.querySelector('.picker-wrapper'))
+        .fromTo('transform', 'translateY(100%)', 'translateY(0%)');
+    return baseAnimation
+        .addElement(baseEl)
+        .easing('cubic-bezier(.36,.66,.04,1)')
+        .duration(400)
+        .addAnimation([backdropAnimation, wrapperAnimation]);
+};
+
+/**
+ * iOS Picker Leave Animation
+ */
+const iosLeaveAnimation$2 = (baseEl) => {
+    const baseAnimation = createAnimation();
+    const backdropAnimation = createAnimation();
+    const wrapperAnimation = createAnimation();
+    backdropAnimation
+        .addElement(baseEl.querySelector('ion-backdrop'))
+        .fromTo('opacity', 'var(--backdrop-opacity)', 0.01);
+    wrapperAnimation
+        .addElement(baseEl.querySelector('.picker-wrapper'))
+        .fromTo('transform', 'translateY(0%)', 'translateY(100%)');
+    return baseAnimation
+        .addElement(baseEl)
+        .easing('cubic-bezier(.36,.66,.04,1)')
+        .duration(400)
+        .addAnimation([backdropAnimation, wrapperAnimation]);
+};
+
+const pickerIosCss = ".sc-ion-picker-legacy-ios-h{--border-radius:0;--border-style:solid;--min-width:auto;--width:100%;--max-width:500px;--min-height:auto;--max-height:auto;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;top:0;display:block;position:absolute;width:100%;height:100%;outline:none;font-family:var(--ion-font-family, inherit);contain:strict;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:1001}@supports (inset-inline-start: 0){.sc-ion-picker-legacy-ios-h{inset-inline-start:0}}@supports not (inset-inline-start: 0){.sc-ion-picker-legacy-ios-h{left:0}[dir=rtl].sc-ion-picker-legacy-ios-h,[dir=rtl] .sc-ion-picker-legacy-ios-h{left:unset;right:unset;right:0}@supports selector(:dir(rtl)){.sc-ion-picker-legacy-ios-h:dir(rtl){left:unset;right:unset;right:0}}}.overlay-hidden.sc-ion-picker-legacy-ios-h{display:none}.picker-wrapper.sc-ion-picker-legacy-ios{border-radius:var(--border-radius);left:0;right:0;bottom:0;-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;margin-top:auto;margin-bottom:auto;-webkit-transform:translate3d(0,  100%,  0);transform:translate3d(0,  100%,  0);display:-ms-flexbox;display:flex;position:absolute;-ms-flex-direction:column;flex-direction:column;width:var(--width);min-width:var(--min-width);max-width:var(--max-width);height:var(--height);min-height:var(--min-height);max-height:var(--max-height);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);background:var(--background);contain:strict;overflow:hidden;z-index:10}.picker-toolbar.sc-ion-picker-legacy-ios{width:100%;background:transparent;contain:strict;z-index:1}.picker-button.sc-ion-picker-legacy-ios{border:0;font-family:inherit}.picker-button.sc-ion-picker-legacy-ios:active,.picker-button.sc-ion-picker-legacy-ios:focus{outline:none}.picker-columns.sc-ion-picker-legacy-ios{display:-ms-flexbox;display:flex;position:relative;-ms-flex-pack:center;justify-content:center;margin-bottom:var(--ion-safe-area-bottom, 0);contain:strict;overflow:hidden}.picker-above-highlight.sc-ion-picker-legacy-ios,.picker-below-highlight.sc-ion-picker-legacy-ios{display:none;pointer-events:none}.sc-ion-picker-legacy-ios-h{--background:var(--ion-background-color, #fff);--border-width:1px 0 0;--border-color:var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-250, #c8c7cc)));--height:260px;--backdrop-opacity:var(--ion-backdrop-opacity, 0.26);color:var(--ion-item-color, var(--ion-text-color, #000))}.picker-toolbar.sc-ion-picker-legacy-ios{display:-ms-flexbox;display:flex;height:44px;border-bottom:0.55px solid var(--border-color)}.picker-toolbar-button.sc-ion-picker-legacy-ios{-ms-flex:1;flex:1;text-align:end}.picker-toolbar-button.sc-ion-picker-legacy-ios:last-child .picker-button.sc-ion-picker-legacy-ios{font-weight:600}.picker-toolbar-button.sc-ion-picker-legacy-ios:first-child{font-weight:normal;text-align:start}.picker-button.sc-ion-picker-legacy-ios,.picker-button.ion-activated.sc-ion-picker-legacy-ios{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;-webkit-padding-start:1em;padding-inline-start:1em;-webkit-padding-end:1em;padding-inline-end:1em;padding-top:0;padding-bottom:0;height:44px;background:transparent;color:var(--ion-color-primary, #3880ff);font-size:16px}.picker-columns.sc-ion-picker-legacy-ios{height:215px;-webkit-perspective:1000px;perspective:1000px}.picker-above-highlight.sc-ion-picker-legacy-ios{top:0;-webkit-transform:translate3d(0,  0,  90px);transform:translate3d(0,  0,  90px);display:block;position:absolute;width:100%;height:81px;border-bottom:1px solid var(--border-color);background:-webkit-gradient(linear, left top, left bottom, color-stop(20%, var(--background, var(--ion-background-color, #fff))), to(rgba(var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255)), 0.8)));background:linear-gradient(to bottom, var(--background, var(--ion-background-color, #fff)) 20%, rgba(var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255)), 0.8) 100%);z-index:10}@supports (inset-inline-start: 0){.picker-above-highlight.sc-ion-picker-legacy-ios{inset-inline-start:0}}@supports not (inset-inline-start: 0){.picker-above-highlight.sc-ion-picker-legacy-ios{left:0}[dir=rtl].sc-ion-picker-legacy-ios-h .picker-above-highlight.sc-ion-picker-legacy-ios,[dir=rtl] .sc-ion-picker-legacy-ios-h .picker-above-highlight.sc-ion-picker-legacy-ios{left:unset;right:unset;right:0}[dir=rtl].sc-ion-picker-legacy-ios .picker-above-highlight.sc-ion-picker-legacy-ios{left:unset;right:unset;right:0}@supports selector(:dir(rtl)){.picker-above-highlight.sc-ion-picker-legacy-ios:dir(rtl){left:unset;right:unset;right:0}}}.picker-below-highlight.sc-ion-picker-legacy-ios{top:115px;-webkit-transform:translate3d(0,  0,  90px);transform:translate3d(0,  0,  90px);display:block;position:absolute;width:100%;height:119px;border-top:1px solid var(--border-color);background:-webkit-gradient(linear, left bottom, left top, color-stop(30%, var(--background, var(--ion-background-color, #fff))), to(rgba(var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255)), 0.8)));background:linear-gradient(to top, var(--background, var(--ion-background-color, #fff)) 30%, rgba(var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255)), 0.8) 100%);z-index:11}@supports (inset-inline-start: 0){.picker-below-highlight.sc-ion-picker-legacy-ios{inset-inline-start:0}}@supports not (inset-inline-start: 0){.picker-below-highlight.sc-ion-picker-legacy-ios{left:0}[dir=rtl].sc-ion-picker-legacy-ios-h .picker-below-highlight.sc-ion-picker-legacy-ios,[dir=rtl] .sc-ion-picker-legacy-ios-h .picker-below-highlight.sc-ion-picker-legacy-ios{left:unset;right:unset;right:0}[dir=rtl].sc-ion-picker-legacy-ios .picker-below-highlight.sc-ion-picker-legacy-ios{left:unset;right:unset;right:0}@supports selector(:dir(rtl)){.picker-below-highlight.sc-ion-picker-legacy-ios:dir(rtl){left:unset;right:unset;right:0}}}";
+
+const pickerMdCss = ".sc-ion-picker-legacy-md-h{--border-radius:0;--border-style:solid;--min-width:auto;--width:100%;--max-width:500px;--min-height:auto;--max-height:auto;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;top:0;display:block;position:absolute;width:100%;height:100%;outline:none;font-family:var(--ion-font-family, inherit);contain:strict;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:1001}@supports (inset-inline-start: 0){.sc-ion-picker-legacy-md-h{inset-inline-start:0}}@supports not (inset-inline-start: 0){.sc-ion-picker-legacy-md-h{left:0}[dir=rtl].sc-ion-picker-legacy-md-h,[dir=rtl] .sc-ion-picker-legacy-md-h{left:unset;right:unset;right:0}@supports selector(:dir(rtl)){.sc-ion-picker-legacy-md-h:dir(rtl){left:unset;right:unset;right:0}}}.overlay-hidden.sc-ion-picker-legacy-md-h{display:none}.picker-wrapper.sc-ion-picker-legacy-md{border-radius:var(--border-radius);left:0;right:0;bottom:0;-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;margin-top:auto;margin-bottom:auto;-webkit-transform:translate3d(0,  100%,  0);transform:translate3d(0,  100%,  0);display:-ms-flexbox;display:flex;position:absolute;-ms-flex-direction:column;flex-direction:column;width:var(--width);min-width:var(--min-width);max-width:var(--max-width);height:var(--height);min-height:var(--min-height);max-height:var(--max-height);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);background:var(--background);contain:strict;overflow:hidden;z-index:10}.picker-toolbar.sc-ion-picker-legacy-md{width:100%;background:transparent;contain:strict;z-index:1}.picker-button.sc-ion-picker-legacy-md{border:0;font-family:inherit}.picker-button.sc-ion-picker-legacy-md:active,.picker-button.sc-ion-picker-legacy-md:focus{outline:none}.picker-columns.sc-ion-picker-legacy-md{display:-ms-flexbox;display:flex;position:relative;-ms-flex-pack:center;justify-content:center;margin-bottom:var(--ion-safe-area-bottom, 0);contain:strict;overflow:hidden}.picker-above-highlight.sc-ion-picker-legacy-md,.picker-below-highlight.sc-ion-picker-legacy-md{display:none;pointer-events:none}.sc-ion-picker-legacy-md-h{--background:var(--ion-background-color, #fff);--border-width:0.55px 0 0;--border-color:var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-150, rgba(0, 0, 0, 0.13))));--height:260px;--backdrop-opacity:var(--ion-backdrop-opacity, 0.26);color:var(--ion-item-color, var(--ion-text-color, #000))}.picker-toolbar.sc-ion-picker-legacy-md{display:-ms-flexbox;display:flex;-ms-flex-pack:end;justify-content:flex-end;height:44px}.picker-button.sc-ion-picker-legacy-md,.picker-button.ion-activated.sc-ion-picker-legacy-md{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;-webkit-padding-start:1.1em;padding-inline-start:1.1em;-webkit-padding-end:1.1em;padding-inline-end:1.1em;padding-top:0;padding-bottom:0;height:44px;background:transparent;color:var(--ion-color-primary, #3880ff);font-size:14px;font-weight:500;text-transform:uppercase;-webkit-box-shadow:none;box-shadow:none}.picker-columns.sc-ion-picker-legacy-md{height:216px;-webkit-perspective:1800px;perspective:1800px}.picker-above-highlight.sc-ion-picker-legacy-md{top:0;-webkit-transform:translate3d(0,  0,  90px);transform:translate3d(0,  0,  90px);position:absolute;width:100%;height:81px;border-bottom:1px solid var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-150, rgba(0, 0, 0, 0.13))));background:-webkit-gradient(linear, left top, left bottom, color-stop(20%, var(--ion-background-color, #fff)), to(rgba(var(--ion-background-color-rgb, 255, 255, 255), 0.8)));background:linear-gradient(to bottom, var(--ion-background-color, #fff) 20%, rgba(var(--ion-background-color-rgb, 255, 255, 255), 0.8) 100%);z-index:10}@supports (inset-inline-start: 0){.picker-above-highlight.sc-ion-picker-legacy-md{inset-inline-start:0}}@supports not (inset-inline-start: 0){.picker-above-highlight.sc-ion-picker-legacy-md{left:0}[dir=rtl].sc-ion-picker-legacy-md-h .picker-above-highlight.sc-ion-picker-legacy-md,[dir=rtl] .sc-ion-picker-legacy-md-h .picker-above-highlight.sc-ion-picker-legacy-md{left:unset;right:unset;right:0}[dir=rtl].sc-ion-picker-legacy-md .picker-above-highlight.sc-ion-picker-legacy-md{left:unset;right:unset;right:0}@supports selector(:dir(rtl)){.picker-above-highlight.sc-ion-picker-legacy-md:dir(rtl){left:unset;right:unset;right:0}}}.picker-below-highlight.sc-ion-picker-legacy-md{top:115px;-webkit-transform:translate3d(0,  0,  90px);transform:translate3d(0,  0,  90px);position:absolute;width:100%;height:119px;border-top:1px solid var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-150, rgba(0, 0, 0, 0.13))));background:-webkit-gradient(linear, left bottom, left top, color-stop(30%, var(--ion-background-color, #fff)), to(rgba(var(--ion-background-color-rgb, 255, 255, 255), 0.8)));background:linear-gradient(to top, var(--ion-background-color, #fff) 30%, rgba(var(--ion-background-color-rgb, 255, 255, 255), 0.8) 100%);z-index:11}@supports (inset-inline-start: 0){.picker-below-highlight.sc-ion-picker-legacy-md{inset-inline-start:0}}@supports not (inset-inline-start: 0){.picker-below-highlight.sc-ion-picker-legacy-md{left:0}[dir=rtl].sc-ion-picker-legacy-md-h .picker-below-highlight.sc-ion-picker-legacy-md,[dir=rtl] .sc-ion-picker-legacy-md-h .picker-below-highlight.sc-ion-picker-legacy-md{left:unset;right:unset;right:0}[dir=rtl].sc-ion-picker-legacy-md .picker-below-highlight.sc-ion-picker-legacy-md{left:unset;right:unset;right:0}@supports selector(:dir(rtl)){.picker-below-highlight.sc-ion-picker-legacy-md:dir(rtl){left:unset;right:unset;right:0}}}";
+
+// TODO(FW-2832): types
+/**
+ * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
+ */
+class Picker {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.didPresent = createEvent(this, "ionPickerDidPresent", 7);
+        this.willPresent = createEvent(this, "ionPickerWillPresent", 7);
+        this.willDismiss = createEvent(this, "ionPickerWillDismiss", 7);
+        this.didDismiss = createEvent(this, "ionPickerDidDismiss", 7);
+        this.didPresentShorthand = createEvent(this, "didPresent", 7);
+        this.willPresentShorthand = createEvent(this, "willPresent", 7);
+        this.willDismissShorthand = createEvent(this, "willDismiss", 7);
+        this.didDismissShorthand = createEvent(this, "didDismiss", 7);
+        this.delegateController = createDelegateController(this);
+        this.lockController = createLockController();
+        this.triggerController = createTriggerController();
+        this.onBackdropTap = () => {
+            this.dismiss(undefined, BACKDROP);
+        };
+        this.dispatchCancelHandler = (ev) => {
+            const role = ev.detail.role;
+            if (isCancel(role)) {
+                const cancelButton = this.buttons.find((b) => b.role === 'cancel');
+                this.callButtonHandler(cancelButton);
+            }
+        };
+        this.presented = false;
+        this.overlayIndex = undefined;
+        this.delegate = undefined;
+        this.hasController = false;
+        this.keyboardClose = true;
+        this.enterAnimation = undefined;
+        this.leaveAnimation = undefined;
+        this.buttons = [];
+        this.columns = [];
+        this.cssClass = undefined;
+        this.duration = 0;
+        this.showBackdrop = true;
+        this.backdropDismiss = true;
+        this.animated = true;
+        this.htmlAttributes = undefined;
+        this.isOpen = false;
+        this.trigger = undefined;
+    }
+    onIsOpenChange(newValue, oldValue) {
+        if (newValue === true && oldValue === false) {
+            this.present();
         }
-        else if (y < this.maxY) {
-            // scrolling down below scroll area
-            y += Math.pow(this.maxY - y, 0.9);
-            this.bounceFrom = y;
+        else if (newValue === false && oldValue === true) {
+            this.dismiss();
         }
-        else {
-            this.bounceFrom = 0;
+    }
+    triggerChanged() {
+        const { trigger, el, triggerController } = this;
+        if (trigger) {
+            triggerController.addClickListener(el, trigger);
         }
-        this.update(y, 0, false);
     }
-    onEnd(detail) {
-        if (this.bounceFrom > 0) {
-            // bounce back up
-            this.update(this.minY, 100, true);
-            this.emitColChange();
-            return;
+    connectedCallback() {
+        prepareOverlay(this.el);
+        this.triggerChanged();
+    }
+    disconnectedCallback() {
+        this.triggerController.removeClickListener();
+    }
+    componentWillLoad() {
+        setOverlayId(this.el);
+    }
+    componentDidLoad() {
+        printIonWarning('ion-picker-legacy and ion-picker-legacy-column have been deprecated in favor of new versions of the ion-picker and ion-picker-column components. These new components display inline with your page content allowing for more presentation flexibility than before.', this.el);
+        /**
+         * If picker was rendered with isOpen="true"
+         * then we should open picker immediately.
+         */
+        if (this.isOpen === true) {
+            raf(() => this.present());
         }
-        else if (this.bounceFrom < 0) {
-            // bounce back down
-            this.update(this.maxY, 100, true);
-            this.emitColChange();
-            return;
+    }
+    /**
+     * Present the picker overlay after it has been created.
+     */
+    async present() {
+        const unlock = await this.lockController.lock();
+        await this.delegateController.attachViewToDom();
+        await present(this, 'pickerEnter', iosEnterAnimation$2, iosEnterAnimation$2, undefined);
+        if (this.duration > 0) {
+            this.durationTimeout = setTimeout(() => this.dismiss(), this.duration);
         }
-        this.velocity = clamp(-MAX_PICKER_SPEED, detail.velocityY * 23, MAX_PICKER_SPEED);
-        if (this.velocity === 0 && detail.deltaY === 0) {
-            const opt = detail.event.target.closest('.picker-opt');
-            if (opt === null || opt === void 0 ? void 0 : opt.hasAttribute('opt-index')) {
-                this.setSelected(parseInt(opt.getAttribute('opt-index'), 10), TRANSITION_DURATION);
-            }
+        unlock();
+    }
+    /**
+     * Dismiss the picker overlay after it has been presented.
+     *
+     * @param data Any data to emit in the dismiss events.
+     * @param role The role of the element that is dismissing the picker.
+     * This can be useful in a button handler for determining which button was
+     * clicked to dismiss the picker.
+     * Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.
+     */
+    async dismiss(data, role) {
+        const unlock = await this.lockController.lock();
+        if (this.durationTimeout) {
+            clearTimeout(this.durationTimeout);
         }
-        else {
-            this.y += detail.deltaY;
-            if (Math.abs(detail.velocityY) < 0.05) {
-                const isScrollingUp = detail.deltaY > 0;
-                const optHeightFraction = (Math.abs(this.y) % this.optHeight) / this.optHeight;
-                if (isScrollingUp && optHeightFraction > 0.5) {
-                    this.velocity = Math.abs(this.velocity) * -1;
-                }
-                else if (!isScrollingUp && optHeightFraction <= 0.5) {
-                    this.velocity = Math.abs(this.velocity);
-                }
-            }
-            this.decelerate();
+        const dismissed = await dismiss(this, data, role, 'pickerLeave', iosLeaveAnimation$2, iosLeaveAnimation$2);
+        if (dismissed) {
+            this.delegateController.removeViewFromDom();
         }
+        unlock();
+        return dismissed;
     }
-    refresh(forceRefresh, animated) {
-        var _a;
-        let min = this.col.options.length - 1;
-        let max = 0;
-        const options = this.col.options;
-        for (let i = 0; i < options.length; i++) {
-            if (!options[i].disabled) {
-                min = Math.min(min, i);
-                max = Math.max(max, i);
-            }
-        }
-        /**
-         * Only update selected value if column has a
-         * velocity of 0. If it does not, then the
-         * column is animating might land on
-         * a value different than the value at
-         * selectedIndex
-         */
-        if (this.velocity !== 0) {
-            return;
+    /**
+     * Returns a promise that resolves when the picker did dismiss.
+     */
+    onDidDismiss() {
+        return eventMethod(this.el, 'ionPickerDidDismiss');
+    }
+    /**
+     * Returns a promise that resolves when the picker will dismiss.
+     */
+    onWillDismiss() {
+        return eventMethod(this.el, 'ionPickerWillDismiss');
+    }
+    /**
+     * Get the column that matches the specified name.
+     *
+     * @param name The name of the column.
+     */
+    getColumn(name) {
+        return Promise.resolve(this.columns.find((column) => column.name === name));
+    }
+    async buttonClick(button) {
+        const role = button.role;
+        if (isCancel(role)) {
+            return this.dismiss(undefined, role);
         }
-        const selectedIndex = clamp(min, (_a = this.col.selectedIndex) !== null && _a !== void 0 ? _a : 0, max);
-        if (this.col.prevSelected !== selectedIndex || forceRefresh) {
-            const y = selectedIndex * this.optHeight * -1;
-            const duration = animated ? TRANSITION_DURATION : 0;
-            this.velocity = 0;
-            this.update(y, duration, true);
+        const shouldDismiss = await this.callButtonHandler(button);
+        if (shouldDismiss) {
+            return this.dismiss(this.getSelected(), button.role);
         }
+        return Promise.resolve();
     }
-    onDomChange(forceRefresh, animated) {
-        const colEl = this.optsEl;
-        if (colEl) {
-            // DOM READ
-            // We perfom a DOM read over a rendered item, this needs to happen after the first render or after the the column has changed
-            this.optHeight = colEl.firstElementChild ? colEl.firstElementChild.clientHeight : 0;
+    async callButtonHandler(button) {
+        if (button) {
+            // a handler has been provided, execute it
+            // pass the handler the values from the inputs
+            const rtn = await safeCall(button.handler, this.getSelected());
+            if (rtn === false) {
+                // if the return value of the handler is false then do not dismiss
+                return false;
+            }
         }
-        this.refresh(forceRefresh, animated);
+        return true;
+    }
+    getSelected() {
+        const selected = {};
+        this.columns.forEach((col, index) => {
+            const selectedColumn = col.selectedIndex !== undefined ? col.options[col.selectedIndex] : undefined;
+            selected[col.name] = {
+                text: selectedColumn ? selectedColumn.text : undefined,
+                value: selectedColumn ? selectedColumn.value : undefined,
+                columnIndex: index,
+            };
+        });
+        return selected;
     }
     render() {
-        const col = this.col;
+        const { htmlAttributes } = this;
         const mode = getIonMode$1(this);
-        return (hAsync(Host, { class: Object.assign({ [mode]: true, 'picker-col': true, 'picker-opts-left': this.col.align === 'left', 'picker-opts-right': this.col.align === 'right' }, getClassMap(col.cssClass)), style: {
-                'max-width': this.col.columnWidth,
-            } }, col.prefix && (hAsync("div", { class: "picker-prefix", style: { width: col.prefixWidth } }, col.prefix)), hAsync("div", { class: "picker-opts", style: { maxWidth: col.optionsWidth }, ref: (el) => (this.optsEl = el) }, col.options.map((o, index) => (hAsync("button", { "aria-label": o.ariaLabel, class: { 'picker-opt': true, 'picker-opt-disabled': !!o.disabled }, "opt-index": index }, o.text)))), col.suffix && (hAsync("div", { class: "picker-suffix", style: { width: col.suffixWidth } }, col.suffix))));
+        return (hAsync(Host, Object.assign({ "aria-modal": "true", tabindex: "-1" }, htmlAttributes, { style: {
+                zIndex: `${20000 + this.overlayIndex}`,
+            }, class: Object.assign({ [mode]: true,
+                // Used internally for styling
+                [`picker-${mode}`]: true, 'overlay-hidden': true }, getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonPickerWillDismiss: this.dispatchCancelHandler }), hAsync("ion-backdrop", { visible: this.showBackdrop, tappable: this.backdropDismiss }), hAsync("div", { tabindex: "0" }), hAsync("div", { class: "picker-wrapper ion-overlay-wrapper", role: "dialog" }, hAsync("div", { class: "picker-toolbar" }, this.buttons.map((b) => (hAsync("div", { class: buttonWrapperClass(b) }, hAsync("button", { type: "button", onClick: () => this.buttonClick(b), class: buttonClass$1(b) }, b.text))))), hAsync("div", { class: "picker-columns" }, hAsync("div", { class: "picker-above-highlight" }), this.presented && this.columns.map((c) => hAsync("ion-picker-legacy-column", { col: c })), hAsync("div", { class: "picker-below-highlight" }))), hAsync("div", { tabindex: "0" })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
-        "col": ["colChanged"]
+        "isOpen": ["onIsOpenChange"],
+        "trigger": ["triggerChanged"]
     }; }
     static get style() { return {
-        ios: pickerColumnIosCss,
-        md: pickerColumnMdCss
+        ios: pickerIosCss,
+        md: pickerMdCss
     }; }
     static get cmpMeta() { return {
-        "$flags$": 32,
-        "$tagName$": "ion-picker-column",
+        "$flags$": 34,
+        "$tagName$": "ion-picker-legacy",
         "$members$": {
-            "col": [16]
+            "overlayIndex": [2, "overlay-index"],
+            "delegate": [16],
+            "hasController": [4, "has-controller"],
+            "keyboardClose": [4, "keyboard-close"],
+            "enterAnimation": [16],
+            "leaveAnimation": [16],
+            "buttons": [16],
+            "columns": [16],
+            "cssClass": [1, "css-class"],
+            "duration": [2],
+            "showBackdrop": [4, "show-backdrop"],
+            "backdropDismiss": [4, "backdrop-dismiss"],
+            "animated": [4],
+            "htmlAttributes": [16],
+            "isOpen": [4, "is-open"],
+            "trigger": [1],
+            "presented": [32],
+            "present": [64],
+            "dismiss": [64],
+            "onDidDismiss": [64],
+            "onWillDismiss": [64],
+            "getColumn": [64]
         },
         "$listeners$": undefined,
         "$lazyBundleId$": "-",
         "$attrsToReflect$": []
     }; }
 }
-const PICKER_OPT_SELECTED = 'picker-opt-selected';
-const DECELERATION_FRICTION = 0.97;
-const MAX_PICKER_SPEED = 90;
-const TRANSITION_DURATION = 150;
+const buttonWrapperClass = (button) => {
+    return {
+        [`picker-toolbar-${button.role}`]: button.role !== undefined,
+        'picker-toolbar-button': true,
+    };
+};
+const buttonClass$1 = (button) => {
+    return Object.assign({ 'picker-button': true, 'ion-activatable': true }, getClassMap(button.cssClass));
+};
 
-const pickerColumnInternalIosCss = "/*!@:host*/.sc-ion-picker-column-internal-ios-h{-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*/.sc-ion-picker-column-internal-ios-h::-webkit-scrollbar{display:none}/*!@:host .picker-item*/.sc-ion-picker-column-internal-ios-h .picker-item.sc-ion-picker-column-internal-ios{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,\n:host .picker-item[disabled]*/.sc-ion-picker-column-internal-ios-h .picker-item-empty.sc-ion-picker-column-internal-ios,.sc-ion-picker-column-internal-ios-h .picker-item[disabled].sc-ion-picker-column-internal-ios{cursor:default}/*!@:host .picker-item-empty,\n:host(:not([disabled])) .picker-item[disabled]*/.sc-ion-picker-column-internal-ios-h .picker-item-empty.sc-ion-picker-column-internal-ios,.sc-ion-picker-column-internal-ios-h:not([disabled]) .picker-item[disabled].sc-ion-picker-column-internal-ios{scroll-snap-align:none}/*!@:host([disabled])*/[disabled].sc-ion-picker-column-internal-ios-h{overflow-y:hidden}/*!@:host .picker-item[disabled]*/.sc-ion-picker-column-internal-ios-h .picker-item[disabled].sc-ion-picker-column-internal-ios{opacity:0.4}/*!@:host(.picker-column-active) .picker-item.picker-item-active*/.picker-column-active.sc-ion-picker-column-internal-ios-h .picker-item.picker-item-active.sc-ion-picker-column-internal-ios{color:var(--ion-color-base)}@media (any-hover: hover){/*!@:host(:focus)*/.sc-ion-picker-column-internal-ios-h:focus{outline:none;background:rgba(var(--ion-color-base-rgb), 0.2)}}";
+const pickerColumnIosCss$1 = "/*!@:host*/.sc-ion-picker-column-ios-h{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*/.picker-opts.sc-ion-picker-column-ios{-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*/.picker-opts.sc-ion-picker-column-ios::-webkit-scrollbar{display:none}/*!@::slotted(ion-picker-column-option)*/.sc-ion-picker-column-ios-s>ion-picker-column-option{display:block;scroll-snap-align:center}/*!@.picker-item-empty,\n:host(:not([disabled])) ::slotted(ion-picker-column-option.option-disabled)*/.picker-item-empty.sc-ion-picker-column-ios,.sc-ion-picker-column-ios-h:not([disabled]).sc-ion-picker-column-ios-s>ion-picker-column-option.option-disabled,.sc-ion-picker-column-ios-h:not([disabled]) .sc-ion-picker-column-ios-s>ion-picker-column-option.option-disabled{scroll-snap-align:none}/*!@::slotted([slot=prefix]), ::slotted([slot=suffix])*/.sc-ion-picker-column-ios-s>[slot=prefix],.sc-ion-picker-column-ios-s>[slot=suffix]{max-width:200px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}/*!@::slotted([slot=prefix])*/.sc-ion-picker-column-ios-s>[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])*/.sc-ion-picker-column-ios-s>[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*/.sc-ion-picker-column-ios-h .picker-item.sc-ion-picker-column-ios{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,\n:host .picker-item[disabled]*/.sc-ion-picker-column-ios-h .picker-item-empty.sc-ion-picker-column-ios,.sc-ion-picker-column-ios-h .picker-item[disabled].sc-ion-picker-column-ios{cursor:default}/*!@:host .picker-item-empty,\n:host(:not([disabled])) .picker-item[disabled]*/.sc-ion-picker-column-ios-h .picker-item-empty.sc-ion-picker-column-ios,.sc-ion-picker-column-ios-h:not([disabled]) .picker-item[disabled].sc-ion-picker-column-ios{scroll-snap-align:none}/*!@:host([disabled])*/[disabled].sc-ion-picker-column-ios-h{overflow-y:hidden}/*!@:host .picker-item[disabled]*/.sc-ion-picker-column-ios-h .picker-item[disabled].sc-ion-picker-column-ios{opacity:0.4}/*!@:host(.picker-column-active) .picker-item.picker-item-active*/.picker-column-active.sc-ion-picker-column-ios-h .picker-item.picker-item-active.sc-ion-picker-column-ios{color:var(--ion-color-base)}@media (any-hover: hover){/*!@:host(:focus) .picker-opts*/.sc-ion-picker-column-ios-h:focus .picker-opts.sc-ion-picker-column-ios{outline:none;background:rgba(var(--ion-color-base-rgb), 0.2)}}";
 
-const pickerColumnInternalMdCss = "/*!@:host*/.sc-ion-picker-column-internal-md-h{-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*/.sc-ion-picker-column-internal-md-h::-webkit-scrollbar{display:none}/*!@:host .picker-item*/.sc-ion-picker-column-internal-md-h .picker-item.sc-ion-picker-column-internal-md{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,\n:host .picker-item[disabled]*/.sc-ion-picker-column-internal-md-h .picker-item-empty.sc-ion-picker-column-internal-md,.sc-ion-picker-column-internal-md-h .picker-item[disabled].sc-ion-picker-column-internal-md{cursor:default}/*!@:host .picker-item-empty,\n:host(:not([disabled])) .picker-item[disabled]*/.sc-ion-picker-column-internal-md-h .picker-item-empty.sc-ion-picker-column-internal-md,.sc-ion-picker-column-internal-md-h:not([disabled]) .picker-item[disabled].sc-ion-picker-column-internal-md{scroll-snap-align:none}/*!@:host([disabled])*/[disabled].sc-ion-picker-column-internal-md-h{overflow-y:hidden}/*!@:host .picker-item[disabled]*/.sc-ion-picker-column-internal-md-h .picker-item[disabled].sc-ion-picker-column-internal-md{opacity:0.4}/*!@:host(.picker-column-active) .picker-item.picker-item-active*/.picker-column-active.sc-ion-picker-column-internal-md-h .picker-item.picker-item-active.sc-ion-picker-column-internal-md{color:var(--ion-color-base)}@media (any-hover: hover){/*!@:host(:focus)*/.sc-ion-picker-column-internal-md-h:focus{outline:none;background:rgba(var(--ion-color-base-rgb), 0.2)}}/*!@:host .picker-item-active*/.sc-ion-picker-column-internal-md-h .picker-item-active.sc-ion-picker-column-internal-md{color:var(--ion-color-base)}";
+const pickerColumnMdCss$1 = "/*!@:host*/.sc-ion-picker-column-md-h{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*/.picker-opts.sc-ion-picker-column-md{-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*/.picker-opts.sc-ion-picker-column-md::-webkit-scrollbar{display:none}/*!@::slotted(ion-picker-column-option)*/.sc-ion-picker-column-md-s>ion-picker-column-option{display:block;scroll-snap-align:center}/*!@.picker-item-empty,\n:host(:not([disabled])) ::slotted(ion-picker-column-option.option-disabled)*/.picker-item-empty.sc-ion-picker-column-md,.sc-ion-picker-column-md-h:not([disabled]).sc-ion-picker-column-md-s>ion-picker-column-option.option-disabled,.sc-ion-picker-column-md-h:not([disabled]) .sc-ion-picker-column-md-s>ion-picker-column-option.option-disabled{scroll-snap-align:none}/*!@::slotted([slot=prefix]), ::slotted([slot=suffix])*/.sc-ion-picker-column-md-s>[slot=prefix],.sc-ion-picker-column-md-s>[slot=suffix]{max-width:200px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}/*!@::slotted([slot=prefix])*/.sc-ion-picker-column-md-s>[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])*/.sc-ion-picker-column-md-s>[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*/.sc-ion-picker-column-md-h .picker-item.sc-ion-picker-column-md{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,\n:host .picker-item[disabled]*/.sc-ion-picker-column-md-h .picker-item-empty.sc-ion-picker-column-md,.sc-ion-picker-column-md-h .picker-item[disabled].sc-ion-picker-column-md{cursor:default}/*!@:host .picker-item-empty,\n:host(:not([disabled])) .picker-item[disabled]*/.sc-ion-picker-column-md-h .picker-item-empty.sc-ion-picker-column-md,.sc-ion-picker-column-md-h:not([disabled]) .picker-item[disabled].sc-ion-picker-column-md{scroll-snap-align:none}/*!@:host([disabled])*/[disabled].sc-ion-picker-column-md-h{overflow-y:hidden}/*!@:host .picker-item[disabled]*/.sc-ion-picker-column-md-h .picker-item[disabled].sc-ion-picker-column-md{opacity:0.4}/*!@:host(.picker-column-active) .picker-item.picker-item-active*/.picker-column-active.sc-ion-picker-column-md-h .picker-item.picker-item-active.sc-ion-picker-column-md{color:var(--ion-color-base)}@media (any-hover: hover){/*!@:host(:focus) .picker-opts*/.sc-ion-picker-column-md-h:focus .picker-opts.sc-ion-picker-column-md{outline:none;background:rgba(var(--ion-color-base-rgb), 0.2)}}/*!@:host .picker-item-active*/.sc-ion-picker-column-md-h .picker-item-active.sc-ion-picker-column-md{color:var(--ion-color-base)}";
 
 /**
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
- * @internal
+ *
+ * @slot prefix - Content to show on the left side of the picker options.
+ * @slot suffix - Content to show on the right side of the picker options.
  */
-class PickerColumnInternal {
+// TODO FW-5580 we can likely go back to a single stylesheet here
+// the per-mode styles were moved to ion-picker-column-option
+class PickerColumn {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.ionChange = createEvent(this, "ionChange", 7);
@@ -25231,11 +25311,11 @@ class PickerColumnInternal {
         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
@@ -25244,7 +25324,7 @@ class PickerColumnInternal {
                      * of these can cause a scroll to occur.
                      */
                     this.canExitInputMode = canExitInputMode;
-                    el.scroll({
+                    scrollEl.scroll({
                         top,
                         left: 0,
                         behavior: smooth ? 'smooth' : undefined,
@@ -25313,11 +25393,13 @@ class PickerColumnInternal {
              * be disabled on Android.
              */
             const enableHaptics = isPlatform('ios');
-            const { el } = this;
+            const { el, scrollEl } = this;
             let timeout;
             let activeEl = this.activeItem;
             const scrollCallback = () => {
                 raf(() => {
+                    if (!scrollEl)
+                        return;
                     if (timeout) {
                         clearTimeout(timeout);
                         timeout = undefined;
@@ -25330,21 +25412,54 @@ class PickerColumnInternal {
                      * 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 : 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 && hapticSelectionChanged();
                         if (this.canExitInputMode) {
                             /**
@@ -25361,8 +25476,8 @@ class PickerColumnInternal {
                             this.exitInputMode();
                         }
                     }
-                    activeEl = activeElement;
-                    this.setPickerItemActiveState(activeElement, true);
+                    activeEl = newActiveElement;
+                    this.setPickerItemActiveState(newActiveElement, true);
                     timeout = setTimeout(() => {
                         this.isScrolling = false;
                         enableHaptics && hapticSelectionEnd();
@@ -25382,22 +25497,9 @@ class PickerColumnInternal {
                          * next scroll interaction could
                          * be a scroll from the user. In this
                          * 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.canExitInputMode = true;
+                        this.setValue(newActiveElement.value);
                     }, 250);
                 });
             };
@@ -25406,9 +25508,11 @@ class PickerColumnInternal {
              * does not fire when component is initially shown.
              */
             raf(() => {
-                el.addEventListener('scroll', scrollCallback);
+                if (!scrollEl)
+                    return;
+                scrollEl.addEventListener('scroll', scrollCallback);
                 this.destroyScrollListener = () => {
-                    el.removeEventListener('scroll', scrollCallback);
+                    scrollEl.removeEventListener('scroll', scrollCallback);
                 };
             });
         };
@@ -25450,632 +25554,621 @@ class PickerColumnInternal {
             this.scrollActiveItemIntoView();
         }
     }
-    /**
-     * Only setup scroll listeners
-     * when the picker is visible, otherwise
-     * the container will have a scroll
-     * height of 0px.
-     */
-    componentWillLoad() {
-        const visibleCallback = (entries) => {
-            const ev = entries[0];
-            if (ev.isIntersecting) {
-                const { activeItem, el } = this;
-                this.isColumnVisible = true;
-                /**
-                 * Because this initial call to scrollActiveItemIntoView has to fire before
-                 * the scroll listener is set up, we need to manage the active class manually.
-                 */
-                const oldActive = getElementRoot(el).querySelector(`.${PICKER_ITEM_ACTIVE_CLASS}`);
-                if (oldActive) {
-                    this.setPickerItemActiveState(oldActive, false);
-                }
-                this.scrollActiveItemIntoView();
-                if (activeItem) {
-                    this.setPickerItemActiveState(activeItem, true);
-                }
-                this.initializeScrollListener();
-            }
-            else {
-                this.isColumnVisible = false;
-                if (this.destroyScrollListener) {
-                    this.destroyScrollListener();
-                    this.destroyScrollListener = undefined;
-                }
-            }
-        };
-        new IntersectionObserver(visibleCallback, { threshold: 0.001 }).observe(this.el);
-        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() {
-        var _a;
-        const { activeItem, items, isColumnVisible, value } = this;
-        if (isColumnVisible) {
-            if (activeItem) {
-                this.scrollActiveItemIntoView();
-            }
-            else if (((_a = items[0]) === null || _a === void 0 ? void 0 : _a.value) !== value) {
-                /**
-                 * If the picker column does not have an active item and the current value
-                 * does not match the first item in the picker column, that means
-                 * the value is out of bounds. In this case, we assign the value to the
-                 * first item to match the scroll position of the column.
-                 *
-                 */
-                this.setValue(items[0].value);
-            }
-        }
-    }
-    /** @internal  */
-    async scrollActiveItemIntoView() {
-        const activeEl = this.activeItem;
-        if (activeEl) {
-            this.centerPickerItemInView(activeEl, false, false);
-        }
-    }
-    /**
-     * Sets the value prop and fires the ionChange event.
-     * This is used when we need to fire ionChange from
-     * user-generated events that cannot be caught with normal
-     * input/change event listeners.
-     * @internal
-     */
-    async setValue(value) {
-        const { items } = this;
-        this.value = value;
-        const findItem = items.find((item) => item.value === value && item.disabled !== true);
-        if (findItem) {
-            this.ionChange.emit(findItem);
-        }
-    }
-    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 getElementRoot(this.el).querySelector(selector);
-    }
-    render() {
-        const { items, color, disabled: pickerDisabled, isActive, numericInput } = this;
-        const mode = getIonMode$1(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 (hAsync(Host, { exportparts: `${PICKER_ITEM_PART}, ${PICKER_ITEM_ACTIVE_PART}`, disabled: pickerDisabled, tabindex: pickerDisabled ? null : 0, class: createColorClasses$1(color, {
-                [mode]: true,
-                ['picker-column-active']: isActive,
-                ['picker-column-numeric-input']: numericInput,
-            }) }, hAsync("div", { class: "picker-item picker-item-empty", "aria-hidden": "true" }, "\u00A0"), hAsync("div", { class: "picker-item picker-item-empty", "aria-hidden": "true" }, "\u00A0"), hAsync("div", { class: "picker-item picker-item-empty", "aria-hidden": "true" }, "\u00A0"), items.map((item, index) => {
-            const isItemDisabled = pickerDisabled || item.disabled || false;
-            return (hAsync("button", { tabindex: "-1", class: {
-                    'picker-item': true,
-                }, "data-value": item.value, "data-index": index, onClick: (ev) => {
-                    this.centerPickerItemInView(ev.target, true);
-                }, disabled: isItemDisabled, part: PICKER_ITEM_PART }, item.text));
-        }), hAsync("div", { class: "picker-item picker-item-empty", "aria-hidden": "true" }, "\u00A0"), hAsync("div", { class: "picker-item picker-item-empty", "aria-hidden": "true" }, "\u00A0"), hAsync("div", { class: "picker-item picker-item-empty", "aria-hidden": "true" }, "\u00A0")));
-    }
-    get el() { return getElement(this); }
-    static get watchers() { return {
-        "value": ["valueChange"]
-    }; }
-    static get style() { return {
-        ios: pickerColumnInternalIosCss,
-        md: pickerColumnInternalMdCss
-    }; }
-    static get cmpMeta() { return {
-        "$flags$": 41,
-        "$tagName$": "ion-picker-column-internal",
-        "$members$": {
-            "disabled": [4],
-            "items": [16],
-            "value": [1032],
-            "color": [513],
-            "numericInput": [4, "numeric-input"],
-            "isActive": [32],
-            "scrollActiveItemIntoView": [64],
-            "setValue": [64]
-        },
-        "$listeners$": undefined,
-        "$lazyBundleId$": "-",
-        "$attrsToReflect$": [["color", "color"]]
-    }; }
-}
-const PICKER_ITEM_ACTIVE_CLASS = 'picker-item-active';
-const PICKER_ITEM_PART = 'wheel-item';
-const PICKER_ITEM_ACTIVE_PART = 'active';
-
-const pickerInternalIosCss = "/*!@:host*/.sc-ion-picker-internal-ios-h{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,\n:host .picker-after*/.sc-ion-picker-internal-ios-h .picker-before.sc-ion-picker-internal-ios,.sc-ion-picker-internal-ios-h .picker-after.sc-ion-picker-internal-ios{position:absolute;width:100%;-webkit-transform:translateZ(0);transform:translateZ(0);z-index:1;pointer-events:none}/*!@:host .picker-before*/.sc-ion-picker-internal-ios-h .picker-before.sc-ion-picker-internal-ios{top:0;height:83px}@supports (inset-inline-start: 0){/*!@:host .picker-before*/.sc-ion-picker-internal-ios-h .picker-before.sc-ion-picker-internal-ios{inset-inline-start:0}}@supports not (inset-inline-start: 0){/*!@:host .picker-before*/.sc-ion-picker-internal-ios-h .picker-before.sc-ion-picker-internal-ios{left:0}/*!@:host-context([dir=rtl]) .picker-before*/[dir=rtl].sc-ion-picker-internal-ios-h .picker-before.sc-ion-picker-internal-ios,[dir=rtl] .sc-ion-picker-internal-ios-h .picker-before.sc-ion-picker-internal-ios{left:unset;right:unset;right:0}/*!@@supports selector(:dir(rtl))*/@supports .sc-ion-picker-internal-ios selector(.sc-ion-picker-internal-ios:dir(rtl)){.sc-ion-picker-internal-ios-h:dir(rtl) .picker-before{left:unset;right:unset;right:0}}}/*!@:host .picker-after*/.sc-ion-picker-internal-ios-h .picker-after.sc-ion-picker-internal-ios{top:116px;height:84px}@supports (inset-inline-start: 0){/*!@:host .picker-after*/.sc-ion-picker-internal-ios-h .picker-after.sc-ion-picker-internal-ios{inset-inline-start:0}}@supports not (inset-inline-start: 0){/*!@:host .picker-after*/.sc-ion-picker-internal-ios-h .picker-after.sc-ion-picker-internal-ios{left:0}/*!@:host-context([dir=rtl]) .picker-after*/[dir=rtl].sc-ion-picker-internal-ios-h .picker-after.sc-ion-picker-internal-ios,[dir=rtl] .sc-ion-picker-internal-ios-h .picker-after.sc-ion-picker-internal-ios{left:unset;right:unset;right:0}/*!@@supports selector(:dir(rtl))*/@supports .sc-ion-picker-internal-ios selector(.sc-ion-picker-internal-ios:dir(rtl)){.sc-ion-picker-internal-ios-h:dir(rtl) .picker-after{left:unset;right:unset;right:0}}}/*!@:host .picker-highlight*/.sc-ion-picker-internal-ios-h .picker-highlight.sc-ion-picker-internal-ios{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*/.sc-ion-picker-internal-ios-h input.sc-ion-picker-internal-ios{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)*/.sc-ion-picker-internal-ios-h .sc-ion-picker-internal-ios-s>ion-picker-column-internal:first-of-type{text-align:start}/*!@:host ::slotted(ion-picker-column-internal:last-of-type)*/.sc-ion-picker-internal-ios-h .sc-ion-picker-internal-ios-s>ion-picker-column-internal:last-of-type{text-align:end}/*!@:host ::slotted(ion-picker-column-internal:only-child)*/.sc-ion-picker-internal-ios-h .sc-ion-picker-internal-ios-s>ion-picker-column-internal:only-child{text-align:center}/*!@:host .picker-before*/.sc-ion-picker-internal-ios-h .picker-before.sc-ion-picker-internal-ios{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*/.sc-ion-picker-internal-ios-h .picker-after.sc-ion-picker-internal-ios{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*/.sc-ion-picker-internal-ios-h .picker-highlight.sc-ion-picker-internal-ios{background:var(--wheel-highlight-background, var(--ion-color-step-150, #eeeeef))}";
-
-const pickerInternalMdCss = "/*!@:host*/.sc-ion-picker-internal-md-h{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,\n:host .picker-after*/.sc-ion-picker-internal-md-h .picker-before.sc-ion-picker-internal-md,.sc-ion-picker-internal-md-h .picker-after.sc-ion-picker-internal-md{position:absolute;width:100%;-webkit-transform:translateZ(0);transform:translateZ(0);z-index:1;pointer-events:none}/*!@:host .picker-before*/.sc-ion-picker-internal-md-h .picker-before.sc-ion-picker-internal-md{top:0;height:83px}@supports (inset-inline-start: 0){/*!@:host .picker-before*/.sc-ion-picker-internal-md-h .picker-before.sc-ion-picker-internal-md{inset-inline-start:0}}@supports not (inset-inline-start: 0){/*!@:host .picker-before*/.sc-ion-picker-internal-md-h .picker-before.sc-ion-picker-internal-md{left:0}/*!@:host-context([dir=rtl]) .picker-before*/[dir=rtl].sc-ion-picker-internal-md-h .picker-before.sc-ion-picker-internal-md,[dir=rtl] .sc-ion-picker-internal-md-h .picker-before.sc-ion-picker-internal-md{left:unset;right:unset;right:0}/*!@@supports selector(:dir(rtl))*/@supports .sc-ion-picker-internal-md selector(.sc-ion-picker-internal-md:dir(rtl)){.sc-ion-picker-internal-md-h:dir(rtl) .picker-before{left:unset;right:unset;right:0}}}/*!@:host .picker-after*/.sc-ion-picker-internal-md-h .picker-after.sc-ion-picker-internal-md{top:116px;height:84px}@supports (inset-inline-start: 0){/*!@:host .picker-after*/.sc-ion-picker-internal-md-h .picker-after.sc-ion-picker-internal-md{inset-inline-start:0}}@supports not (inset-inline-start: 0){/*!@:host .picker-after*/.sc-ion-picker-internal-md-h .picker-after.sc-ion-picker-internal-md{left:0}/*!@:host-context([dir=rtl]) .picker-after*/[dir=rtl].sc-ion-picker-internal-md-h .picker-after.sc-ion-picker-internal-md,[dir=rtl] .sc-ion-picker-internal-md-h .picker-after.sc-ion-picker-internal-md{left:unset;right:unset;right:0}/*!@@supports selector(:dir(rtl))*/@supports .sc-ion-picker-internal-md selector(.sc-ion-picker-internal-md:dir(rtl)){.sc-ion-picker-internal-md-h:dir(rtl) .picker-after{left:unset;right:unset;right:0}}}/*!@:host .picker-highlight*/.sc-ion-picker-internal-md-h .picker-highlight.sc-ion-picker-internal-md{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*/.sc-ion-picker-internal-md-h input.sc-ion-picker-internal-md{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)*/.sc-ion-picker-internal-md-h .sc-ion-picker-internal-md-s>ion-picker-column-internal:first-of-type{text-align:start}/*!@:host ::slotted(ion-picker-column-internal:last-of-type)*/.sc-ion-picker-internal-md-h .sc-ion-picker-internal-md-s>ion-picker-column-internal:last-of-type{text-align:end}/*!@:host ::slotted(ion-picker-column-internal:only-child)*/.sc-ion-picker-internal-md-h .sc-ion-picker-internal-md-s>ion-picker-column-internal:only-child{text-align:center}/*!@:host .picker-before*/.sc-ion-picker-internal-md-h .picker-before.sc-ion-picker-internal-md{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*/.sc-ion-picker-internal-md-h .picker-after.sc-ion-picker-internal-md{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%)}";
-
-/**
- * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
- * @internal
- */
-class PickerInternal {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.ionInputModeChange = createEvent(this, "ionInputModeChange", 7);
-        this.useInputMode = false;
-        this.isInHighlightBounds = (ev) => {
-            const { highlightEl } = this;
-            if (!highlightEl) {
-                return false;
-            }
-            const bbox = highlightEl.getBoundingClientRect();
-            /**
-             * Check to see if the user clicked
-             * outside the bounds of the highlight.
-             */
-            const outsideX = ev.clientX < bbox.left || ev.clientX > bbox.right;
-            const outsideY = ev.clientY < bbox.top || ev.clientY > bbox.bottom;
-            if (outsideX || outsideY) {
-                return false;
-            }
-            return true;
-        };
-        /**
-         * If we are no longer focused
-         * on a picker column, then we should
-         * exit input mode. An exception is made
-         * for the input in the picker since having
-         * that focused means we are still in input mode.
-         */
-        this.onFocusOut = (ev) => {
-            // TODO(FW-2832): type
-            const { relatedTarget } = ev;
-            if (!relatedTarget || (relatedTarget.tagName !== 'ION-PICKER-COLUMN-INTERNAL' && relatedTarget !== this.inputEl)) {
-                this.exitInputMode();
-            }
-        };
-        /**
-         * When picker columns receive focus
-         * the parent picker needs to determine
-         * whether to enter/exit input mode.
-         */
-        this.onFocusIn = (ev) => {
-            // TODO(FW-2832): type
-            const { target } = ev;
-            /**
-             * Due to browser differences in how/when focus
-             * is dispatched on certain elements, we need to
-             * make sure that this function only ever runs when
-             * focusing a picker column.
-             */
-            if (target.tagName !== 'ION-PICKER-COLUMN-INTERNAL') {
-                return;
-            }
-            /**
-             * If we have actionOnClick
-             * then this means the user focused
-             * a picker column via mouse or
-             * touch (i.e. a PointerEvent). As a result,
-             * we should not enter/exit input mode
-             * until the click event has fired, which happens
-             * after the `focusin` event.
-             *
-             * Otherwise, the user likely focused
-             * the column using their keyboard and
-             * we should enter/exit input mode automatically.
-             */
-            if (!this.actionOnClick) {
-                const columnEl = target;
-                const allowInput = columnEl.numericInput;
-                if (allowInput) {
-                    this.enterInputMode(columnEl, false);
-                }
-                else {
-                    this.exitInputMode();
-                }
-            }
-        };
-        /**
-         * On click we need to run an actionOnClick
-         * function that has been set in onPointerDown
-         * so that we enter/exit input mode correctly.
-         */
-        this.onClick = () => {
-            const { actionOnClick } = this;
-            if (actionOnClick) {
-                actionOnClick();
-                this.actionOnClick = undefined;
-            }
-        };
-        /**
-         * Clicking a column also focuses the column on
-         * certain browsers, so we use onPointerDown
-         * to tell the onFocusIn function that users
-         * are trying to click the column rather than
-         * focus the column using the keyboard. When the
-         * user completes the click, the onClick function
-         * runs and runs the actionOnClick callback.
-         */
-        this.onPointerDown = (ev) => {
-            const { useInputMode, inputModeColumn, el } = this;
-            if (this.isInHighlightBounds(ev)) {
-                /**
-                 * If we were already in
-                 * input mode, then we should determine
-                 * if we tapped a particular column and
-                 * should switch to input mode for
-                 * that specific column.
-                 */
-                if (useInputMode) {
-                    /**
-                     * If we tapped a picker column
-                     * then we should either switch to input
-                     * mode for that column or all columns.
-                     * Otherwise we should exit input mode
-                     * since we just tapped the highlight and
-                     * not a column.
-                     */
-                    if (ev.target.tagName === 'ION-PICKER-COLUMN-INTERNAL') {
-                        /**
-                         * If user taps 2 different columns
-                         * then we should just switch to input mode
-                         * for the new column rather than switching to
-                         * input mode for all columns.
-                         */
-                        if (inputModeColumn && inputModeColumn === ev.target) {
-                            this.actionOnClick = () => {
-                                this.enterInputMode();
-                            };
-                        }
-                        else {
-                            this.actionOnClick = () => {
-                                this.enterInputMode(ev.target);
-                            };
-                        }
-                    }
-                    else {
-                        this.actionOnClick = () => {
-                            this.exitInputMode();
-                        };
-                    }
-                    /**
-                     * If we were not already in
-                     * input mode, then we should
-                     * enter input mode for all columns.
-                     */
+    /**
+     * Only setup scroll listeners
+     * when the picker is visible, otherwise
+     * the container will have a scroll
+     * height of 0px.
+     */
+    componentWillLoad() {
+        const visibleCallback = (entries) => {
+            const ev = entries[0];
+            if (ev.isIntersecting) {
+                const { activeItem, el } = this;
+                this.isColumnVisible = true;
+                /**
+                 * Because this initial call to scrollActiveItemIntoView has to fire before
+                 * the scroll listener is set up, we need to manage the active class manually.
+                 */
+                const oldActive = getElementRoot(el).querySelector(`.${PICKER_ITEM_ACTIVE_CLASS}`);
+                if (oldActive) {
+                    this.setPickerItemActiveState(oldActive, false);
                 }
-                else {
-                    /**
-                     * If there is only 1 numeric input column
-                     * then we should skip multi column 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);
-                    };
+                this.scrollActiveItemIntoView();
+                if (activeItem) {
+                    this.setPickerItemActiveState(activeItem, true);
                 }
-                return;
+                this.initializeScrollListener();
             }
-            this.actionOnClick = () => {
-                this.exitInputMode();
-            };
-        };
-        /**
-         * Enters input mode to allow
-         * for text entry of numeric values.
-         * If on mobile, we focus a hidden input
-         * field so that the on screen keyboard
-         * is brought up. When tabbing using a
-         * keyboard, picker columns receive an outline
-         * to indicate they are focused. As a result,
-         * we should not focus the hidden input as it
-         * would cause the outline to go away, preventing
-         * users from having any visual indication of which
-         * column is focused.
-         */
-        this.enterInputMode = (columnEl, focusInput = true) => {
-            const { inputEl, el } = this;
-            if (!inputEl) {
-                return;
+            else {
+                this.isColumnVisible = false;
+                if (this.destroyScrollListener) {
+                    this.destroyScrollListener();
+                    this.destroyScrollListener = undefined;
+                }
             }
+        };
+        new IntersectionObserver(visibleCallback, { threshold: 0.001 }).observe(this.el);
+        const parentEl = (this.parentEl = this.el.closest('ion-picker'));
+        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');
             /**
-             * Only active input mode if there is at
-             * least one column that accepts numeric input.
+             * 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.
+             *
              */
-            const hasInputColumn = el.querySelector('ion-picker-column-internal.picker-column-numeric-input');
-            if (!hasInputColumn) {
-                return;
+            if (firstOption !== null && firstOption.value !== value) {
+                this.setValue(firstOption.value);
             }
+        }
+    }
+    /** @internal  */
+    async scrollActiveItemIntoView() {
+        const activeEl = this.activeItem;
+        if (activeEl) {
+            this.centerPickerItemInView(activeEl, false, false);
+        }
+    }
+    /**
+     * Sets the value prop and fires the ionChange event.
+     * This is used when we need to fire ionChange from
+     * user-generated events that cannot be caught with normal
+     * input/change event listeners.
+     * @internal
+     */
+    async setValue(value) {
+        if (this.value === value) {
+            return;
+        }
+        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();
+        }
+    }
+    get activeItem() {
+        const { value } = this;
+        const options = Array.from(this.el.querySelectorAll('ion-picker-column-option'));
+        return options.find((option) => {
             /**
-             * If columnEl is undefined then
-             * it is assumed that all numeric pickers
-             * are eligible for text entry.
-             * (i.e. hour and minute columns)
-             */
-            this.useInputMode = true;
-            this.inputModeColumn = columnEl;
-            /**
-             * Users with a keyboard and mouse can
-             * activate input mode where the input is
-             * focused as well as when it is not focused,
-             * so we need to make sure we clean up any
-             * old listeners.
+             * 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 (focusInput) {
-                if (this.destroyKeypressListener) {
-                    this.destroyKeypressListener();
-                    this.destroyKeypressListener = undefined;
+            if (!this.disabled && option.disabled) {
+                return false;
+            }
+            return option.value === value;
+        });
+    }
+    render() {
+        const { color, disabled: pickerDisabled, isActive, numericInput } = this;
+        const mode = getIonMode$1(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
+         */
+        return (hAsync(Host, { exportparts: `${PICKER_ITEM_PART}, ${PICKER_ITEM_ACTIVE_PART}`, disabled: pickerDisabled, class: createColorClasses$1(color, {
+                [mode]: true,
+                ['picker-column-active']: isActive,
+                ['picker-column-numeric-input']: numericInput,
+            }) }, hAsync("slot", { name: "prefix" }), hAsync("div", { class: "picker-opts", tabindex: pickerDisabled ? undefined : 0, ref: (el) => {
+                this.scrollEl = el;
+            } }, hAsync("div", { class: "picker-item picker-item-empty", "aria-hidden": "true" }, "\u00A0"), hAsync("div", { class: "picker-item picker-item-empty", "aria-hidden": "true" }, "\u00A0"), hAsync("div", { class: "picker-item picker-item-empty", "aria-hidden": "true" }, "\u00A0"), hAsync("slot", null), hAsync("div", { class: "picker-item picker-item-empty", "aria-hidden": "true" }, "\u00A0"), hAsync("div", { class: "picker-item picker-item-empty", "aria-hidden": "true" }, "\u00A0"), hAsync("div", { class: "picker-item picker-item-empty", "aria-hidden": "true" }, "\u00A0")), hAsync("slot", { name: "suffix" })));
+    }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "value": ["valueChange"]
+    }; }
+    static get style() { return {
+        ios: pickerColumnIosCss$1,
+        md: pickerColumnMdCss$1
+    }; }
+    static get cmpMeta() { return {
+        "$flags$": 41,
+        "$tagName$": "ion-picker-column",
+        "$members$": {
+            "disabled": [4],
+            "items": [16],
+            "value": [1032],
+            "color": [513],
+            "numericInput": [4, "numeric-input"],
+            "isActive": [32],
+            "scrollActiveItemIntoView": [64],
+            "setValue": [64],
+            "setFocus": [64]
+        },
+        "$listeners$": undefined,
+        "$lazyBundleId$": "-",
+        "$attrsToReflect$": [["color", "color"]]
+    }; }
+}
+const PICKER_ITEM_ACTIVE_CLASS = 'option-active';
+const PICKER_ITEM_PART = 'wheel-item';
+const PICKER_ITEM_ACTIVE_PART = 'active';
+
+const pickerColumnIosCss = ".picker-col{display:-ms-flexbox;display:flex;position:relative;-ms-flex:1;flex:1;-ms-flex-pack:center;justify-content:center;height:100%;-webkit-box-sizing:content-box;box-sizing:content-box;contain:content}.picker-opts{position:relative;-ms-flex:1;flex:1;max-width:100%}.picker-opt{top:0;display:block;position:absolute;width:100%;border:0;text-align:center;text-overflow:ellipsis;white-space:nowrap;contain:strict;overflow:hidden;will-change:transform}@supports (inset-inline-start: 0){.picker-opt{inset-inline-start:0}}@supports not (inset-inline-start: 0){.picker-opt{left:0}:host-context([dir=rtl]) .picker-opt{left:unset;right:unset;right:0}[dir=rtl] .picker-opt{left:unset;right:unset;right:0}@supports selector(:dir(rtl)){.picker-opt:dir(rtl){left:unset;right:unset;right:0}}}.picker-opt.picker-opt-disabled{pointer-events:none}.picker-opt-disabled{opacity:0}.picker-opts-left{-ms-flex-pack:start;justify-content:flex-start}.picker-opts-right{-ms-flex-pack:end;justify-content:flex-end}.picker-opt:active,.picker-opt:focus{outline:none}.picker-prefix{position:relative;-ms-flex:1;flex:1;text-align:end;white-space:nowrap}.picker-suffix{position:relative;-ms-flex:1;flex:1;text-align:start;white-space:nowrap}.picker-col{-webkit-padding-start:4px;padding-inline-start:4px;-webkit-padding-end:4px;padding-inline-end:4px;padding-top:0;padding-bottom:0;-webkit-transform-style:preserve-3d;transform-style:preserve-3d}.picker-prefix,.picker-suffix,.picker-opts{top:77px;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;color:inherit;font-size:20px;line-height:42px;pointer-events:none}.picker-opt{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;-webkit-transform-origin:center center;transform-origin:center center;height:46px;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-transition-timing-function:ease-out;transition-timing-function:ease-out;background:transparent;color:inherit;font-size:20px;line-height:42px;-webkit-backface-visibility:hidden;backface-visibility:hidden;pointer-events:auto}:host-context([dir=rtl]) .picker-opt{-webkit-transform-origin:calc(100% - center) center;transform-origin:calc(100% - center) center}[dir=rtl] .picker-opt{-webkit-transform-origin:calc(100% - center) center;transform-origin:calc(100% - center) center}@supports selector(:dir(rtl)){.picker-opt:dir(rtl){-webkit-transform-origin:calc(100% - center) center;transform-origin:calc(100% - center) center}}";
+
+const pickerColumnMdCss = ".picker-col{display:-ms-flexbox;display:flex;position:relative;-ms-flex:1;flex:1;-ms-flex-pack:center;justify-content:center;height:100%;-webkit-box-sizing:content-box;box-sizing:content-box;contain:content}.picker-opts{position:relative;-ms-flex:1;flex:1;max-width:100%}.picker-opt{top:0;display:block;position:absolute;width:100%;border:0;text-align:center;text-overflow:ellipsis;white-space:nowrap;contain:strict;overflow:hidden;will-change:transform}@supports (inset-inline-start: 0){.picker-opt{inset-inline-start:0}}@supports not (inset-inline-start: 0){.picker-opt{left:0}:host-context([dir=rtl]) .picker-opt{left:unset;right:unset;right:0}[dir=rtl] .picker-opt{left:unset;right:unset;right:0}@supports selector(:dir(rtl)){.picker-opt:dir(rtl){left:unset;right:unset;right:0}}}.picker-opt.picker-opt-disabled{pointer-events:none}.picker-opt-disabled{opacity:0}.picker-opts-left{-ms-flex-pack:start;justify-content:flex-start}.picker-opts-right{-ms-flex-pack:end;justify-content:flex-end}.picker-opt:active,.picker-opt:focus{outline:none}.picker-prefix{position:relative;-ms-flex:1;flex:1;text-align:end;white-space:nowrap}.picker-suffix{position:relative;-ms-flex:1;flex:1;text-align:start;white-space:nowrap}.picker-col{-webkit-padding-start:8px;padding-inline-start:8px;-webkit-padding-end:8px;padding-inline-end:8px;padding-top:0;padding-bottom:0;-webkit-transform-style:preserve-3d;transform-style:preserve-3d}.picker-prefix,.picker-suffix,.picker-opts{top:77px;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;color:inherit;font-size:22px;line-height:42px;pointer-events:none}.picker-opt{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;height:43px;-webkit-transition-timing-function:ease-out;transition-timing-function:ease-out;background:transparent;color:inherit;font-size:22px;line-height:42px;-webkit-backface-visibility:hidden;backface-visibility:hidden;pointer-events:auto}.picker-prefix,.picker-suffix,.picker-opt.picker-opt-selected{color:var(--ion-color-primary, #3880ff)}";
+
+/**
+ * @internal
+ */
+class PickerColumnCmp {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.ionPickerColChange = createEvent(this, "ionPickerColChange", 7);
+        this.optHeight = 0;
+        this.rotateFactor = 0;
+        this.scaleFactor = 1;
+        this.velocity = 0;
+        this.y = 0;
+        this.noAnimate = true;
+        // `colDidChange` is a flag that gets set when the column is changed
+        // dynamically. When this flag is set, the column will refresh
+        // after the component re-renders to incorporate the new column data.
+        // This is necessary because `this.refresh` queries for the option elements,
+        // so it needs to wait for the latest elements to be available in the DOM.
+        // Ex: column is created with 3 options. User updates the column data
+        // to have 5 options. The column will still think it only has 3 options.
+        this.colDidChange = false;
+        this.col = undefined;
+    }
+    colChanged() {
+        this.colDidChange = true;
+    }
+    async connectedCallback() {
+        let pickerRotateFactor = 0;
+        let pickerScaleFactor = 0.81;
+        const mode = getIonMode$1(this);
+        if (mode === 'ios') {
+            pickerRotateFactor = -0.46;
+            pickerScaleFactor = 1;
+        }
+        this.rotateFactor = pickerRotateFactor;
+        this.scaleFactor = pickerScaleFactor;
+        this.gesture = (await Promise.resolve().then(function () { return index; })).createGesture({
+            el: this.el,
+            gestureName: 'picker-swipe',
+            gesturePriority: 100,
+            threshold: 0,
+            passive: false,
+            onStart: (ev) => this.onStart(ev),
+            onMove: (ev) => this.onMove(ev),
+            onEnd: (ev) => this.onEnd(ev),
+        });
+        this.gesture.enable();
+        // Options have not been initialized yet
+        // Animation must be disabled through the `noAnimate` flag
+        // Otherwise, the options will render
+        // at the top of the column and transition down
+        this.tmrId = setTimeout(() => {
+            this.noAnimate = false;
+            // After initialization, `refresh()` will be called
+            // At this point, animation will be enabled. The options will
+            // animate as they are being selected.
+            this.refresh(true);
+        }, 250);
+    }
+    componentDidLoad() {
+        this.onDomChange();
+    }
+    componentDidUpdate() {
+        // Options may have changed since last update.
+        if (this.colDidChange) {
+            // Animation must be disabled through the `onDomChange` parameter.
+            // Otherwise, the recently added options will render
+            // at the top of the column and transition down
+            this.onDomChange(true, false);
+            this.colDidChange = false;
+        }
+    }
+    disconnectedCallback() {
+        if (this.rafId !== undefined)
+            cancelAnimationFrame(this.rafId);
+        if (this.tmrId)
+            clearTimeout(this.tmrId);
+        if (this.gesture) {
+            this.gesture.destroy();
+            this.gesture = undefined;
+        }
+    }
+    emitColChange() {
+        this.ionPickerColChange.emit(this.col);
+    }
+    setSelected(selectedIndex, duration) {
+        // if there is a selected index, then figure out it's y position
+        // if there isn't a selected index, then just use the top y position
+        const y = selectedIndex > -1 ? -(selectedIndex * this.optHeight) : 0;
+        this.velocity = 0;
+        // set what y position we're at
+        if (this.rafId !== undefined)
+            cancelAnimationFrame(this.rafId);
+        this.update(y, duration, true);
+        this.emitColChange();
+    }
+    update(y, duration, saveY) {
+        if (!this.optsEl) {
+            return;
+        }
+        // ensure we've got a good round number :)
+        let translateY = 0;
+        let translateZ = 0;
+        const { col, rotateFactor } = this;
+        const prevSelected = col.selectedIndex;
+        const selectedIndex = (col.selectedIndex = this.indexForY(-y));
+        const durationStr = duration === 0 ? '' : duration + 'ms';
+        const scaleStr = `scale(${this.scaleFactor})`;
+        const children = this.optsEl.children;
+        for (let i = 0; i < children.length; i++) {
+            const button = children[i];
+            const opt = col.options[i];
+            const optOffset = i * this.optHeight + y;
+            let transform = '';
+            if (rotateFactor !== 0) {
+                const rotateX = optOffset * rotateFactor;
+                if (Math.abs(rotateX) <= 90) {
+                    translateY = 0;
+                    translateZ = 90;
+                    transform = `rotateX(${rotateX}deg) `;
+                }
+                else {
+                    translateY = -9999;
                 }
-                inputEl.focus();
             }
             else {
-                el.addEventListener('keypress', this.onKeyPress);
-                this.destroyKeypressListener = () => {
-                    el.removeEventListener('keypress', this.onKeyPress);
-                };
+                translateZ = 0;
+                translateY = optOffset;
             }
-            this.emitInputModeChange();
-        };
-        this.onKeyPress = (ev) => {
-            const { inputEl } = this;
-            if (!inputEl) {
-                return;
+            const selected = selectedIndex === i;
+            transform += `translate3d(0px,${translateY}px,${translateZ}px) `;
+            if (this.scaleFactor !== 1 && !selected) {
+                transform += scaleStr;
             }
-            const parsedValue = parseInt(ev.key, 10);
-            /**
-             * Only numbers should be allowed
-             */
-            if (!Number.isNaN(parsedValue)) {
-                inputEl.value += ev.key;
-                this.onInputChange();
+            // Update transition duration
+            if (this.noAnimate) {
+                opt.duration = 0;
+                button.style.transitionDuration = '';
             }
-        };
-        this.selectSingleColumn = () => {
-            const { inputEl, inputModeColumn, singleColumnSearchTimeout } = this;
-            if (!inputEl || !inputModeColumn) {
-                return;
+            else if (duration !== opt.duration) {
+                opt.duration = duration;
+                button.style.transitionDuration = durationStr;
             }
-            const values = inputModeColumn.items.filter((item) => item.disabled !== true);
-            /**
-             * If users pause for a bit, the search
-             * value should be reset similar to how a
-             * <select> behaves. So typing "34", waiting,
-             * then typing "5" should select "05".
-             */
-            if (singleColumnSearchTimeout) {
-                clearTimeout(singleColumnSearchTimeout);
+            // Update transform
+            if (transform !== opt.transform) {
+                opt.transform = transform;
             }
-            this.singleColumnSearchTimeout = setTimeout(() => {
-                inputEl.value = '';
-                this.singleColumnSearchTimeout = undefined;
-            }, 1000);
+            button.style.transform = transform;
             /**
-             * For values that are longer than 2 digits long
-             * we should shift the value over 1 character
-             * to the left. So typing "456" would result in "56".
-             * TODO: If we want to support more than just
-             * time entry, we should update this value to be
-             * the max length of all of the picker items.
+             * Ensure that the select column
+             * item has the selected class
              */
-            if (inputEl.value.length >= 3) {
-                const startIndex = inputEl.value.length - 2;
-                const newString = inputEl.value.substring(startIndex);
-                inputEl.value = newString;
-                this.selectSingleColumn();
-                return;
+            opt.selected = selected;
+            if (selected) {
+                button.classList.add(PICKER_OPT_SELECTED);
             }
-            /**
-             * Checking the value of the input gets priority
-             * first. For example, if the value of the input
-             * is "1" and we entered "2", then the complete value
-             * is "12" and we should select hour 12.
-             *
-             * Regex removes any leading zeros from values like "02",
-             * but it keeps a single zero if there are only zeros in the string.
-             * 0+(?=[1-9]) --> Match 1 or more zeros that are followed by 1-9
-             * 0+(?=0$) --> Match 1 or more zeros that must be followed by one 0 and end.
-             */
-            const findItemFromCompleteValue = values.find(({ text }) => {
-                const parsedText = text.replace(/^0+(?=[1-9])|0+(?=0$)/, '');
-                return parsedText === inputEl.value;
-            });
-            if (findItemFromCompleteValue) {
-                inputModeColumn.setValue(findItemFromCompleteValue.value);
-                return;
+            else {
+                button.classList.remove(PICKER_OPT_SELECTED);
             }
-            /**
-             * If we typed "56" to get minute 56, then typed "7",
-             * we should select "07" as "567" is not a valid minute.
-             */
-            if (inputEl.value.length === 2) {
-                const changedCharacter = inputEl.value.substring(inputEl.value.length - 1);
-                inputEl.value = changedCharacter;
-                this.selectSingleColumn();
+        }
+        this.col.prevSelected = prevSelected;
+        if (saveY) {
+            this.y = y;
+        }
+        if (this.lastIndex !== selectedIndex) {
+            // have not set a last index yet
+            hapticSelectionChanged();
+            this.lastIndex = selectedIndex;
+        }
+    }
+    decelerate() {
+        if (this.velocity !== 0) {
+            // still decelerating
+            this.velocity *= DECELERATION_FRICTION;
+            // do not let it go slower than a velocity of 1
+            this.velocity = this.velocity > 0 ? Math.max(this.velocity, 1) : Math.min(this.velocity, -1);
+            let y = this.y + this.velocity;
+            if (y > this.minY) {
+                // whoops, it's trying to scroll up farther than the options we have!
+                y = this.minY;
+                this.velocity = 0;
             }
-        };
-        /**
-         * Searches a list of column items for a particular
-         * value. This is currently used for numeric values.
-         * The zeroBehavior can be set to account for leading
-         * or trailing zeros when looking at the item text.
-         */
-        this.searchColumn = (colEl, value, zeroBehavior = 'start') => {
-            const behavior = zeroBehavior === 'start' ? /^0+/ : /0$/;
-            const item = colEl.items.find(({ text, disabled }) => disabled !== true && text.replace(behavior, '') === value);
-            if (item) {
-                colEl.setValue(item.value);
+            else if (y < this.maxY) {
+                // gahh, it's trying to scroll down farther than we can!
+                y = this.maxY;
+                this.velocity = 0;
+            }
+            this.update(y, 0, true);
+            const notLockedIn = Math.round(y) % this.optHeight !== 0 || Math.abs(this.velocity) > 1;
+            if (notLockedIn) {
+                // isn't locked in yet, keep decelerating until it is
+                this.rafId = requestAnimationFrame(() => this.decelerate());
+            }
+            else {
+                this.velocity = 0;
+                this.emitColChange();
+                hapticSelectionEnd();
+            }
+        }
+        else if (this.y % this.optHeight !== 0) {
+            // needs to still get locked into a position so options line up
+            const currentPos = Math.abs(this.y % this.optHeight);
+            // create a velocity in the direction it needs to scroll
+            this.velocity = currentPos > this.optHeight / 2 ? 1 : -1;
+            this.decelerate();
+        }
+    }
+    indexForY(y) {
+        return Math.min(Math.max(Math.abs(Math.round(y / this.optHeight)), 0), this.col.options.length - 1);
+    }
+    onStart(detail) {
+        // We have to prevent default in order to block scrolling under the picker
+        // but we DO NOT have to stop propagation, since we still want
+        // some "click" events to capture
+        if (detail.event.cancelable) {
+            detail.event.preventDefault();
+        }
+        detail.event.stopPropagation();
+        hapticSelectionStart();
+        // reset everything
+        if (this.rafId !== undefined)
+            cancelAnimationFrame(this.rafId);
+        const options = this.col.options;
+        let minY = options.length - 1;
+        let maxY = 0;
+        for (let i = 0; i < options.length; i++) {
+            if (!options[i].disabled) {
+                minY = Math.min(minY, i);
+                maxY = Math.max(maxY, i);
+            }
+        }
+        this.minY = -(minY * this.optHeight);
+        this.maxY = -(maxY * this.optHeight);
+    }
+    onMove(detail) {
+        if (detail.event.cancelable) {
+            detail.event.preventDefault();
+        }
+        detail.event.stopPropagation();
+        // update the scroll position relative to pointer start position
+        let y = this.y + detail.deltaY;
+        if (y > this.minY) {
+            // scrolling up higher than scroll area
+            y = Math.pow(y, 0.8);
+            this.bounceFrom = y;
+        }
+        else if (y < this.maxY) {
+            // scrolling down below scroll area
+            y += Math.pow(this.maxY - y, 0.9);
+            this.bounceFrom = y;
+        }
+        else {
+            this.bounceFrom = 0;
+        }
+        this.update(y, 0, false);
+    }
+    onEnd(detail) {
+        if (this.bounceFrom > 0) {
+            // bounce back up
+            this.update(this.minY, 100, true);
+            this.emitColChange();
+            return;
+        }
+        else if (this.bounceFrom < 0) {
+            // bounce back down
+            this.update(this.maxY, 100, true);
+            this.emitColChange();
+            return;
+        }
+        this.velocity = clamp(-MAX_PICKER_SPEED, detail.velocityY * 23, MAX_PICKER_SPEED);
+        if (this.velocity === 0 && detail.deltaY === 0) {
+            const opt = detail.event.target.closest('.picker-opt');
+            if (opt === null || opt === void 0 ? void 0 : opt.hasAttribute('opt-index')) {
+                this.setSelected(parseInt(opt.getAttribute('opt-index'), 10), TRANSITION_DURATION);
             }
-        };
-        this.selectMultiColumn = () => {
-            const { inputEl, el } = this;
-            if (!inputEl) {
-                return;
+        }
+        else {
+            this.y += detail.deltaY;
+            if (Math.abs(detail.velocityY) < 0.05) {
+                const isScrollingUp = detail.deltaY > 0;
+                const optHeightFraction = (Math.abs(this.y) % this.optHeight) / this.optHeight;
+                if (isScrollingUp && optHeightFraction > 0.5) {
+                    this.velocity = Math.abs(this.velocity) * -1;
+                }
+                else if (!isScrollingUp && optHeightFraction <= 0.5) {
+                    this.velocity = Math.abs(this.velocity);
+                }
             }
-            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;
-            let minuteValue;
-            switch (value.length) {
-                case 1:
-                    this.searchColumn(firstColumn, value);
-                    break;
-                case 2:
-                    /**
-                     * If the first character is `0` or `1` it is
-                     * possible that users are trying to type `09`
-                     * or `11` into the hour field, so we should look
-                     * at that first.
-                     */
-                    const firstCharacter = inputEl.value.substring(0, 1);
-                    value = firstCharacter === '0' || firstCharacter === '1' ? inputEl.value : firstCharacter;
-                    this.searchColumn(firstColumn, value);
-                    /**
-                     * If only checked the first value,
-                     * we can check the second value
-                     * for a match in the minutes column
-                     */
-                    if (value.length === 1) {
-                        minuteValue = inputEl.value.substring(inputEl.value.length - 1);
-                        this.searchColumn(lastColumn, minuteValue, 'end');
-                    }
-                    break;
-                case 3:
-                    /**
-                     * If the first character is `0` or `1` it is
-                     * possible that users are trying to type `09`
-                     * or `11` into the hour field, so we should look
-                     * at that first.
-                     */
-                    const firstCharacterAgain = inputEl.value.substring(0, 1);
-                    value =
-                        firstCharacterAgain === '0' || firstCharacterAgain === '1'
-                            ? inputEl.value.substring(0, 2)
-                            : firstCharacterAgain;
-                    this.searchColumn(firstColumn, value);
-                    /**
-                     * If only checked the first value,
-                     * we can check the second value
-                     * for a match in the minutes column
-                     */
-                    minuteValue = value.length === 1 ? inputEl.value.substring(1) : inputEl.value.substring(2);
-                    this.searchColumn(lastColumn, minuteValue, 'end');
-                    break;
-                case 4:
-                    /**
-                     * If the first character is `0` or `1` it is
-                     * possible that users are trying to type `09`
-                     * or `11` into the hour field, so we should look
-                     * at that first.
-                     */
-                    const firstCharacterAgainAgain = inputEl.value.substring(0, 1);
-                    value =
-                        firstCharacterAgainAgain === '0' || firstCharacterAgainAgain === '1'
-                            ? inputEl.value.substring(0, 2)
-                            : firstCharacterAgainAgain;
-                    this.searchColumn(firstColumn, value);
-                    /**
-                     * If only checked the first value,
-                     * we can check the second value
-                     * for a match in the minutes column
-                     */
-                    const minuteValueAgain = value.length === 1
-                        ? inputEl.value.substring(1, inputEl.value.length)
-                        : inputEl.value.substring(2, inputEl.value.length);
-                    this.searchColumn(lastColumn, minuteValueAgain, 'end');
-                    break;
-                default:
-                    const startIndex = inputEl.value.length - 4;
-                    const newString = inputEl.value.substring(startIndex);
-                    inputEl.value = newString;
-                    this.selectMultiColumn();
-                    break;
+            this.decelerate();
+        }
+    }
+    refresh(forceRefresh, animated) {
+        var _a;
+        let min = this.col.options.length - 1;
+        let max = 0;
+        const options = this.col.options;
+        for (let i = 0; i < options.length; i++) {
+            if (!options[i].disabled) {
+                min = Math.min(min, i);
+                max = Math.max(max, i);
             }
-        };
+        }
         /**
-         * Searches the value of the active column
-         * to determine which value users are trying
-         * to select
+         * Only update selected value if column has a
+         * velocity of 0. If it does not, then the
+         * column is animating might land on
+         * a value different than the value at
+         * selectedIndex
          */
-        this.onInputChange = () => {
-            const { useInputMode, inputEl, inputModeColumn } = this;
-            if (!useInputMode || !inputEl) {
-                return;
-            }
-            if (inputModeColumn) {
-                this.selectSingleColumn();
-            }
-            else {
-                this.selectMultiColumn();
-            }
-        };
+        if (this.velocity !== 0) {
+            return;
+        }
+        const selectedIndex = clamp(min, (_a = this.col.selectedIndex) !== null && _a !== void 0 ? _a : 0, max);
+        if (this.col.prevSelected !== selectedIndex || forceRefresh) {
+            const y = selectedIndex * this.optHeight * -1;
+            const duration = animated ? TRANSITION_DURATION : 0;
+            this.velocity = 0;
+            this.update(y, duration, true);
+        }
+    }
+    onDomChange(forceRefresh, animated) {
+        const colEl = this.optsEl;
+        if (colEl) {
+            // DOM READ
+            // We perfom a DOM read over a rendered item, this needs to happen after the first render or after the the column has changed
+            this.optHeight = colEl.firstElementChild ? colEl.firstElementChild.clientHeight : 0;
+        }
+        this.refresh(forceRefresh, animated);
+    }
+    render() {
+        const col = this.col;
+        const mode = getIonMode$1(this);
+        return (hAsync(Host, { class: Object.assign({ [mode]: true, 'picker-col': true, 'picker-opts-left': this.col.align === 'left', 'picker-opts-right': this.col.align === 'right' }, getClassMap(col.cssClass)), style: {
+                'max-width': this.col.columnWidth,
+            } }, col.prefix && (hAsync("div", { class: "picker-prefix", style: { width: col.prefixWidth } }, col.prefix)), hAsync("div", { class: "picker-opts", style: { maxWidth: col.optionsWidth }, ref: (el) => (this.optsEl = el) }, col.options.map((o, index) => (hAsync("button", { "aria-label": o.ariaLabel, class: { 'picker-opt': true, 'picker-opt-disabled': !!o.disabled }, "opt-index": index }, o.text)))), col.suffix && (hAsync("div", { class: "picker-suffix", style: { width: col.suffixWidth } }, col.suffix))));
+    }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "col": ["colChanged"]
+    }; }
+    static get style() { return {
+        ios: pickerColumnIosCss,
+        md: pickerColumnMdCss
+    }; }
+    static get cmpMeta() { return {
+        "$flags$": 32,
+        "$tagName$": "ion-picker-legacy-column",
+        "$members$": {
+            "col": [16]
+        },
+        "$listeners$": undefined,
+        "$lazyBundleId$": "-",
+        "$attrsToReflect$": []
+    }; }
+}
+const PICKER_OPT_SELECTED = 'picker-opt-selected';
+const DECELERATION_FRICTION = 0.97;
+const MAX_PICKER_SPEED = 90;
+const TRANSITION_DURATION = 150;
+
+const pickerColumnOptionIosCss = "/*!@button*/button.sc-ion-picker-column-option-ios{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)*/.option-disabled.sc-ion-picker-column-option-ios-h{opacity:0.4}/*!@:host(.option-disabled) button*/.option-disabled.sc-ion-picker-column-option-ios-h button.sc-ion-picker-column-option-ios{cursor:default}";
+
+const pickerColumnOptionMdCss = "/*!@button*/button.sc-ion-picker-column-option-md{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)*/.option-disabled.sc-ion-picker-column-option-md-h{opacity:0.4}/*!@:host(.option-disabled) button*/.option-disabled.sc-ion-picker-column-option-md-h button.sc-ion-picker-column-option-md{cursor:default}/*!@:host(.option-active)*/.option-active.sc-ion-picker-column-option-md-h{color:var(--ion-color-base)}";
+
+class PickerColumnOption {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
         /**
-         * Emit ionInputModeChange. Picker columns
-         * listen for this event to determine whether
-         * or not their column is "active" for text input.
+         * We keep track of the parent picker column
+         * so we can update the value of it when
+         * clicking an enable option.
          */
-        this.emitInputModeChange = () => {
-            const { useInputMode, inputModeColumn } = this;
-            this.ionInputModeChange.emit({
-                useInputMode,
-                inputModeColumn,
-            });
-        };
+        this.pickerColumn = null;
+        this.ariaLabel = null;
+        this.disabled = false;
+        this.value = undefined;
+        this.color = 'primary';
     }
     /**
-     * When the picker is interacted with
-     * we need to prevent touchstart so other
-     * gestures do not fire. For example,
-     * scrolling on the wheel picker
-     * in ion-datetime should not cause
-     * a card modal to swipe to close.
+     * 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.
      */
-    preventTouchStartPropagation(ev) {
-        ev.stopPropagation();
+    onAriaLabelChange(ariaLbl) {
+        this.ariaLabel = ariaLbl;
     }
     componentWillLoad() {
-        getElementRoot(this.el).addEventListener('focusin', this.onFocusIn);
-        getElementRoot(this.el).addEventListener('focusout', this.onFocusOut);
+        const inheritedAttributes = inheritAttributes$1(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;
     }
     /**
-     * @internal
-     * Exits text entry mode for the picker
-     * This method blurs the hidden input
-     * and cause the keyboard to dismiss.
+     * 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.
      */
-    async exitInputMode() {
-        const { inputEl, useInputMode } = this;
-        if (!useInputMode || !inputEl) {
-            return;
+    componentDidLoad() {
+        const { pickerColumn } = this;
+        if (pickerColumn !== null) {
+            pickerColumn.scrollActiveItemIntoView();
         }
-        this.useInputMode = false;
-        this.inputModeColumn = undefined;
-        inputEl.blur();
-        inputEl.value = '';
-        if (this.destroyKeypressListener) {
-            this.destroyKeypressListener();
-            this.destroyKeypressListener = undefined;
+    }
+    /**
+     * 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);
         }
-        this.emitInputModeChange();
     }
     render() {
-        return (hAsync(Host, { onPointerDown: (ev) => this.onPointerDown(ev), onClick: () => this.onClick() }, hAsync("input", { "aria-hidden": "true", tabindex: -1, inputmode: "numeric", type: "number", ref: (el) => (this.inputEl = el), onInput: () => this.onInputChange(), onBlur: () => this.exitInputMode() }), hAsync("div", { class: "picker-before" }), hAsync("div", { class: "picker-after" }), hAsync("div", { class: "picker-highlight", ref: (el) => (this.highlightEl = el) }), hAsync("slot", null)));
+        const { color, disabled, ariaLabel } = this;
+        const mode = getIonMode$1(this);
+        return (hAsync(Host, { class: createColorClasses$1(color, {
+                [mode]: true,
+                ['option-disabled']: disabled,
+            }) }, hAsync("button", { tabindex: "-1", "aria-label": ariaLabel, disabled: disabled, onClick: () => this.onClick() }, hAsync("slot", null))));
     }
     get el() { return getElement(this); }
+    static get watchers() { return {
+        "aria-label": ["onAriaLabelChange"]
+    }; }
     static get style() { return {
-        ios: pickerInternalIosCss,
-        md: pickerInternalMdCss
+        ios: pickerColumnOptionIosCss,
+        md: pickerColumnOptionMdCss
     }; }
     static get cmpMeta() { return {
         "$flags$": 41,
-        "$tagName$": "ion-picker-internal",
+        "$tagName$": "ion-picker-column-option",
         "$members$": {
-            "exitInputMode": [64]
+            "disabled": [4],
+            "value": [8],
+            "color": [513],
+            "ariaLabel": [32]
         },
-        "$listeners$": [[1, "touchstart", "preventTouchStartPropagation"]],
+        "$listeners$": undefined,
         "$lazyBundleId$": "-",
-        "$attrsToReflect$": []
+        "$attrsToReflect$": [["color", "color"]]
     }; }
 }
 
@@ -33860,38 +33953,15 @@ class Textarea {
         if (!this.clearOnEdit) {
             return;
         }
-        /**
-         * The following keys do not modify the
-         * contents of the input. As a result, pressing
-         * them should not edit the textarea.
-         *
-         * We can't check to see if the value of the textarea
-         * was changed because we call checkClearOnEdit
-         * in a keydown listener, and the key has not yet
-         * been added to the textarea.
-         *
-         * Unlike ion-input, the "Enter" key does modify the
-         * textarea by adding a new line, so "Enter" is not
-         * included in the IGNORED_KEYS array.
-         */
-        const IGNORED_KEYS = ['Tab', 'Shift', 'Meta', 'Alt', 'Control'];
-        const pressedIgnoredKey = IGNORED_KEYS.includes(ev.key);
         /**
          * Clear the textarea if the control has not been previously cleared
          * during focus.
          */
-        if (!this.didTextareaClearOnEdit && this.hasValue() && !pressedIgnoredKey) {
+        if (!this.didTextareaClearOnEdit && this.hasValue() && ev.key !== 'Tab') {
             this.value = '';
             this.emitInputChange(ev);
         }
-        /**
-         * Pressing an IGNORED_KEYS first and
-         * then an allowed key will cause the input to not
-         * be cleared.
-         */
-        if (!pressedIgnoredKey) {
-            this.didTextareaClearOnEdit = true;
-        }
+        this.didTextareaClearOnEdit = true;
     }
     focusChange() {
         this.emitStyle();
@@ -35089,10 +35159,11 @@ registerComponents([
   Nav,
   NavLink,
   Note,
+  Picker$1,
   Picker,
+  PickerColumn,
   PickerColumnCmp,
-  PickerColumnInternal,
-  PickerInternal,
+  PickerColumnOption,
   Popover,
   ProgressBar,
   Radio,