@ionic/core 7.5.7-dev.11701113479.149fdab6 → 7.5.7-dev.11701201960.104b3a1f

package/hydrate/index.js

@@ -14479,7 +14479,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',
@@ -14826,9 +14826,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-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 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*/ion-picker-column.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-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-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}";
+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*/ion-picker-column.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-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.
@@ -15799,7 +15799,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'
@@ -15858,7 +15858,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, items: items, 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
@@ -15942,7 +15942,7 @@ 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) => {
+    return (hAsync("ion-picker-column", { 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) => {
         // 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
@@ -15964,7 +15964,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, items: months, 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
@@ -15986,7 +15986,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, items: years, 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
@@ -16029,7 +16029,7 @@ 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, items: hoursData, 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();
@@ -16040,7 +16040,7 @@ class Datetime {
     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, items: minutesData, 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();
@@ -16053,7 +16053,7 @@ 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, items: dayPeriodData, 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 }));
@@ -16244,7 +16244,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: {
@@ -24463,655 +24463,778 @@ 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-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 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-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}}}";
+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() {
-    printIonWarning('ion-picker-legacy and ion-picker-legacy-column have been deprecated in favor 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.
+     * When picker columns receive focus
+     * the parent picker needs to determine
+     * whether to enter/exit input mode.
      */
-    if (this.isOpen === true) {
-      raf(() => this.present());
-    }
-  }
-  /**
-   * 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.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;
       }
-    }
-    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-legacy-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-legacy",
-    "$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) `;
+      /**
+       * 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 {
-          translateY = -9999;
+          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') {
+            /**
+             * 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 {
+          /**
+           * 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();
-      }
+  /**
+   * 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();
+  }
+  componentWillLoad() {
+    getElementRoot(this.el).addEventListener('focusin', this.onFocusIn);
+    getElementRoot(this.el).addEventListener('focusout', this.onFocusOut);
+  }
+  /**
+   * @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;
     }
-    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();
+    this.useInputMode = false;
+    this.inputModeColumn = undefined;
+    inputEl.blur();
+    inputEl.value = '';
+    if (this.destroyKeypressListener) {
+      this.destroyKeypressListener();
+      this.destroyKeypressListener = undefined;
     }
+    this.emitInputModeChange();
   }
-  indexForY(y) {
-    return Math.min(Math.max(Math.abs(Math.round(y / this.optHeight)), 0), this.col.options.length - 1);
+  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)));
   }
-  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();
+  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();
     }
-    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);
-      }
+    else if (newValue === false && oldValue === true) {
+      this.dismiss();
     }
-    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;
+  triggerChanged() {
+    const { trigger, el, triggerController } = this;
+    if (trigger) {
+      triggerController.addClickListener(el, trigger);
     }
-    else if (y < this.maxY) {
-      // scrolling down below scroll area
-      y += Math.pow(this.maxY - y, 0.9);
-      this.bounceFrom = y;
+  }
+  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 {
-      this.bounceFrom = 0;
+  }
+  /**
+   * 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.update(y, 0, false);
+    unlock();
   }
-  onEnd(detail) {
-    if (this.bounceFrom > 0) {
-      // bounce back up
-      this.update(this.minY, 100, true);
-      this.emitColChange();
-      return;
+  /**
+   * 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 if (this.bounceFrom < 0) {
-      // bounce back down
-      this.update(this.maxY, 100, true);
-      this.emitColChange();
-      return;
+    const dismissed = await dismiss(this, data, role, 'pickerLeave', iosLeaveAnimation$2, iosLeaveAnimation$2);
+    if (dismissed) {
+      this.delegateController.removeViewFromDom();
     }
-    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();
+    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);
     }
-    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 shouldDismiss = await this.callButtonHandler(button);
+    if (shouldDismiss) {
+      return this.dismiss(this.getSelected(), button.role);
     }
+    return Promise.resolve();
   }
-  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);
+  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;
       }
     }
-    /**
-     * 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;
-    }
-    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);
-    }
+    return 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);
+  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-legacy-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{-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-ios-h::-webkit-scrollbar{display:none}/*!@: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)*/.sc-ion-picker-column-ios-h:focus{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{-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-md-h::-webkit-scrollbar{display:none}/*!@: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)*/.sc-ion-picker-column-md-h:focus{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
  */
-class PickerColumnInternal {
+class PickerColumn {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.ionChange = createEvent(this, "ionChange", 7);
@@ -25373,7 +25496,7 @@ class PickerColumnInternal {
       }
     };
     new IntersectionObserver(visibleCallback, { threshold: 0.001 }).observe(this.el);
-    const parentEl = (this.parentEl = this.el.closest('ion-picker-internal'));
+    const parentEl = (this.parentEl = this.el.closest('ion-picker'));
     if (parentEl !== null) {
       // TODO(FW-2832): type
       parentEl.addEventListener('ionInputModeChange', (ev) => this.inputModeChange(ev));
@@ -25433,7 +25556,7 @@ class PickerColumnInternal {
      * 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.
+     * instance of ion-picker-column 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,
@@ -25453,12 +25576,12 @@ class PickerColumnInternal {
     "value": ["valueChange"]
   }; }
   static get style() { return {
-    ios: pickerColumnInternalIosCss,
-    md: pickerColumnInternalMdCss
+    ios: pickerColumnIosCss$1,
+    md: pickerColumnMdCss$1
   }; }
   static get cmpMeta() { return {
     "$flags$": 41,
-    "$tagName$": "ion-picker-column-internal",
+    "$tagName$": "ion-picker-column",
     "$members$": {
       "disabled": [4],
       "items": [16],
@@ -25478,494 +25601,369 @@ 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 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 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%)}";
+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)}";
 
 /**
- * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
  * @internal
  */
-class PickerInternal {
+class PickerColumnCmp {
   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.
-           */
+    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 {
-          /**
-           * 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);
-          };
-        }
-        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-internal.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;
+          translateY = -9999;
         }
-        inputEl.focus();
       }
       else {
-        el.addEventListener('keypress', this.onKeyPress);
-        this.destroyKeypressListener = () => {
-          el.removeEventListener('keypress', this.onKeyPress);
-        };
-      }
-      this.emitInputModeChange();
-    };
-    this.onKeyPress = (ev) => {
-      const { inputEl } = this;
-      if (!inputEl) {
-        return;
-      }
-      const parsedValue = parseInt(ev.key, 10);
-      /**
-       * Only numbers should be allowed
-       */
-      if (!Number.isNaN(parsedValue)) {
-        inputEl.value += ev.key;
-        this.onInputChange();
-      }
-    };
-    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();
+        translateZ = 0;
+        translateY = optOffset;
       }
-    };
-    /**
-     * 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);
+      const selected = selectedIndex === i;
+      transform += `translate3d(0px,${translateY}px,${translateZ}px) `;
+      if (this.scaleFactor !== 1 && !selected) {
+        transform += scaleStr;
       }
-    };
-    this.selectMultiColumn = () => {
-      const { inputEl, el } = this;
-      if (!inputEl) {
-        return;
+      // Update transition duration
+      if (this.noAnimate) {
+        opt.duration = 0;
+        button.style.transitionDuration = '';
       }
-      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;
+      else if (duration !== opt.duration) {
+        opt.duration = duration;
+        button.style.transitionDuration = durationStr;
       }
-    };
-    /**
-     * 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;
+      // Update transform
+      if (transform !== opt.transform) {
+        opt.transform = transform;
       }
-      if (inputModeColumn) {
-        this.selectSingleColumn();
+      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);
       }
       else {
-        this.selectMultiColumn();
+        button.classList.remove(PICKER_OPT_SELECTED);
       }
-    };
-    /**
-     * 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,
-      });
-    };
+    }
+    this.col.prevSelected = prevSelected;
+    if (saveY) {
+      this.y = y;
+    }
+    if (this.lastIndex !== selectedIndex) {
+      // have not set a last index yet
+      hapticSelectionChanged();
+      this.lastIndex = selectedIndex;
+    }
   }
-  /**
-   * 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();
+  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();
+    }
   }
-  componentWillLoad() {
-    getElementRoot(this.el).addEventListener('focusin', this.onFocusIn);
-    getElementRoot(this.el).addEventListener('focusout', this.onFocusOut);
+  indexForY(y) {
+    return Math.min(Math.max(Math.abs(Math.round(y / this.optHeight)), 0), this.col.options.length - 1);
   }
-  /**
-   * @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) {
+  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;
     }
-    this.useInputMode = false;
-    this.inputModeColumn = undefined;
-    inputEl.blur();
-    inputEl.value = '';
-    if (this.destroyKeypressListener) {
-      this.destroyKeypressListener();
-      this.destroyKeypressListener = undefined;
+    else if (this.bounceFrom < 0) {
+      // bounce back down
+      this.update(this.maxY, 100, true);
+      this.emitColChange();
+      return;
     }
-    this.emitInputModeChange();
+    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);
+      }
+    }
+    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();
+    }
+  }
+  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;
+    }
+    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() {
-    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 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: pickerInternalIosCss,
-    md: pickerInternalMdCss
+    ios: pickerColumnIosCss,
+    md: pickerColumnMdCss
   }; }
   static get cmpMeta() { return {
-    "$flags$": 41,
-    "$tagName$": "ion-picker-internal",
+    "$flags$": 32,
+    "$tagName$": "ion-picker-legacy-column",
     "$members$": {
-      "exitInputMode": [64]
+      "col": [16]
     },
-    "$listeners$": [[1, "touchstart", "preventTouchStartPropagation"]],
+    "$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;
 
 /**
  * Returns the dimensions of the popover
@@ -34930,10 +34928,10 @@ registerComponents([
   Nav,
   NavLink,
   Note,
+  Picker$1,
   Picker,
+  PickerColumn,
   PickerColumnCmp,
-  PickerColumnInternal,
-  PickerInternal,
   Popover,
   ProgressBar,
   Radio,