@amwaljs/checkout-button 0.2.9 → 0.3.1

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

@@ -1,18 +1,14 @@
 'use strict';
 
-var index = require('./index-BPGqVQtz.js');
+var index$1 = require('./index-DncWzXDA.js');
 var focusVisible = require('./focus-visible-Da2o6bTP.js');
-var helpers = require('./helpers-C5_WrFOI.js');
-var overlays = require('./overlays-gyJEvMkB.js');
+var helpers = require('./helpers-B4vhh9gt.js');
+var index = require('./index-CH3IFTaK.js');
 var dir = require('./dir-Br-7_bel.js');
 var theme = require('./theme-DbHdw1Nx.js');
-var index$1 = require('./index-DseJYF57.js');
-var ionicGlobal = require('./ionic-global-BmDUlKDf.js');
-var data = require('./data-CjHlPfPW.js');
-require('./index-D3mJ1Cix.js');
-require('./hardware-back-button-B1WYQg6m.js');
-require('./framework-delegate-BoMy23Lz.js');
-require('./gesture-controller-CiprlUhH.js');
+var index$2 = require('./index-6eOg4xTk.js');
+var ionicGlobal = require('./ionic-global-DRLi5Iq3.js');
+var data = require('./data-UgkxeXMB.js');
 
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
@@ -166,7 +162,6 @@ const getHighlightStyles = (highlightedDates, dateIsoString, el) => {
             return {
                 textColor: matchingHighlight.textColor,
                 backgroundColor: matchingHighlight.backgroundColor,
-                border: matchingHighlight.border,
             };
         }
     }
@@ -179,7 +174,7 @@ const getHighlightStyles = (highlightedDates, dateIsoString, el) => {
             return highlightedDates(dateIsoString);
         }
         catch (e) {
-            index.printIonError('[ion-datetime] - Exception thrown from provided `highlightedDates` callback. Please check your function and try again.', el, e);
+            index.printIonError('Exception thrown from provided `highlightedDates` callback. Please check your function and try again.', el, e);
         }
     }
     return undefined;
@@ -199,7 +194,7 @@ const warnIfTimeZoneProvided = (el, formatOptions) => {
         ((_b = formatOptions === null || formatOptions === void 0 ? void 0 : formatOptions.date) === null || _b === void 0 ? void 0 : _b.timeZoneName) ||
         ((_c = formatOptions === null || formatOptions === void 0 ? void 0 : formatOptions.time) === null || _c === void 0 ? void 0 : _c.timeZone) ||
         ((_d = formatOptions === null || formatOptions === void 0 ? void 0 : formatOptions.time) === null || _d === void 0 ? void 0 : _d.timeZoneName)) {
-        index.printIonWarning('[ion-datetime] - "timeZone" and "timeZoneName" are not supported in "formatOptions".', el);
+        index.printIonWarning('Datetime: "timeZone" and "timeZoneName" are not supported in "formatOptions".', el);
     }
 };
 const checkForPresentationFormatMismatch = (el, presentation, formatOptions) => {
@@ -213,163 +208,39 @@ const checkForPresentationFormatMismatch = (el, presentation, formatOptions) =>
         case 'month':
         case 'year':
             if (formatOptions.date === undefined) {
-                index.printIonWarning(`[ion-datetime] - The '${presentation}' presentation requires a date object in formatOptions.`, el);
+                index.printIonWarning(`Datetime: The '${presentation}' presentation requires a date object in formatOptions.`, el);
             }
             break;
         case 'time':
             if (formatOptions.time === undefined) {
-                index.printIonWarning(`[ion-datetime] - The 'time' presentation requires a time object in formatOptions.`, el);
+                index.printIonWarning(`Datetime: The 'time' presentation requires a time object in formatOptions.`, el);
             }
             break;
         case 'date-time':
         case 'time-date':
             if (formatOptions.date === undefined && formatOptions.time === undefined) {
-                index.printIonWarning(`[ion-datetime] - The '${presentation}' presentation requires either a date or time object (or both) in formatOptions.`, el);
+                index.printIonWarning(`Datetime: The '${presentation}' presentation requires either a date or time object (or both) in formatOptions.`, el);
             }
             break;
     }
 };
 
-const datetimeIosCss = () => `:host{display:flex;flex-flow:column;background:var(--background);overflow:hidden}:host(.datetime-size-fixed){width:auto;height:auto}:host(.datetime-size-fixed:not(.datetime-prefer-wheel)){max-width:350px}:host(.datetime-size-fixed.datetime-prefer-wheel){min-width:350px;max-width:max-content}:host(.datetime-size-cover){width:100%}:host .calendar-body,:host .datetime-year{opacity:0}:host(:not(.datetime-ready)) .datetime-year{position:absolute;pointer-events:none}:host(.datetime-ready) .calendar-body{opacity:1}:host(.datetime-ready) .datetime-year{display:none;opacity:1}:host .wheel-order-year-first .day-column{order:3;text-align:end}:host .wheel-order-year-first .month-column{order:2;text-align:end}:host .wheel-order-year-first .year-column{order:1;text-align:start}:host .datetime-calendar,:host .datetime-year{display:flex;flex:1 1 auto;flex-flow:column}:host(.show-month-and-year) .datetime-year{display:flex}:host(.show-month-and-year) .calendar-next-prev,:host(.show-month-and-year) .calendar-days-of-week,:host(.show-month-and-year) .calendar-body,:host(.show-month-and-year) .datetime-time{display:none}:host(.month-year-picker-open) .datetime-footer{display:none}:host(.datetime-disabled){pointer-events:none}:host(.datetime-disabled) .calendar-days-of-week,:host(.datetime-disabled) .datetime-time{opacity:0.4}:host(.datetime-readonly){pointer-events:none;}:host(.datetime-readonly) .calendar-action-buttons,:host(.datetime-readonly) .calendar-body,:host(.datetime-readonly) .datetime-year{pointer-events:initial}:host(.datetime-readonly) .calendar-day[disabled]:not(.calendar-day-constrained),:host(.datetime-readonly) .datetime-action-buttons ion-button[disabled]{opacity:1}:host .datetime-header .datetime-title{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}:host .datetime-action-buttons.has-clear-button{width:100%}:host .datetime-action-buttons ion-buttons{display:flex;justify-content:space-between}.datetime-action-buttons .datetime-action-buttons-container{display:flex}:host .calendar-action-buttons{display:flex;justify-content:space-between}:host .calendar-action-buttons ion-button{--background:transparent}:host .calendar-days-of-week{display:grid;grid-template-columns:repeat(7, 1fr);text-align:center}.calendar-days-of-week .day-of-week{-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{display:flex;flex-grow:1;scroll-snap-type:x mandatory;overflow-x:scroll;overflow-y:hidden;scrollbar-width:none;outline:none}:host .calendar-body .calendar-month{display:flex;flex-flow:column;scroll-snap-align:start;scroll-snap-stop:always;flex-shrink:0;width:100%}:host .calendar-body .calendar-month-disabled{scroll-snap-align:none}:host .calendar-body::-webkit-scrollbar{display:none}:host .calendar-body .calendar-month-grid{display:grid;grid-template-columns:repeat(7, 1fr)}:host .calendar-day-wrapper{display:flex;align-items:center;justify-content:center;min-width:0;min-height:0;overflow:visible}.calendar-day{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:flex;position:relative;align-items:center;justify-content:center;border:none;outline:none;background:none;color:currentColor;font-family:var(--ion-font-family, inherit);cursor:pointer;appearance:none;z-index:0}:host .calendar-day[disabled]{pointer-events:none;opacity:0.4}.calendar-day:not(.calendar-day-adjacent-day):focus{background: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{display:flex;justify-content:space-between}:host(.datetime-presentation-time) .datetime-time{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0}:host ion-popover{--height:200px}:host .time-header{display:flex;align-items:center}:host .time-body{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:flex;border:none;background:var(--ion-color-step-300, var(--ion-background-color-step-300, #edeef0));color:var(--ion-text-color, #000);font-family:inherit;font-size:inherit;cursor:pointer;appearance:none}:host .time-body-active{color:var(--ion-color-base)}:host(.in-item){position:static}:host(.show-month-and-year) .calendar-action-buttons .calendar-month-year-toggle{color:var(--ion-color-base)}.calendar-month-year{min-width:0}.calendar-month-year-toggle{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{left:0;right:0;top:0;bottom:0;position:absolute;content:"";opacity:0;transition:opacity 15ms linear, background-color 15ms linear;z-index:-1}.calendar-month-year-toggle.ion-focused::after{background:currentColor}.calendar-month-year-toggle:disabled{opacity:0.3;pointer-events:none}.calendar-month-year-toggle ion-icon{-webkit-padding-start:4px;padding-inline-start:4px;-webkit-padding-end:0;padding-inline-end:0;padding-top:0;padding-bottom:0;flex-shrink:0}.calendar-month-year-toggle #toggle-wrapper{display:inline-flex;align-items:center}ion-picker{--highlight-background:var(--wheel-highlight-background);--highlight-border-radius:var(--wheel-highlight-border-radius);--fade-background-rgb:var(--wheel-fade-background-rgb)}:host{--background:var(--ion-color-light, #f4f5f8);--background-rgb:var(--ion-color-light-rgb, 244, 245, 248);--title-color:var(--ion-color-step-600, var(--ion-text-color-step-400, #666666))}:host(.datetime-presentation-date-time:not(.datetime-prefer-wheel)),:host(.datetime-presentation-time-date:not(.datetime-prefer-wheel)),:host(.datetime-presentation-date:not(.datetime-prefer-wheel)){min-height:350px}:host .datetime-header{-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, var(--ion-background-color-step-200, #cccccc));font-size:min(0.875rem, 22.4px)}:host .datetime-header .datetime-title{color:var(--title-color)}:host .datetime-header .datetime-selected-date{margin-top:10px}.calendar-month-year-toggle{-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{opacity:0.15}.calendar-month-year-toggle #toggle-wrapper{-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,:host .calendar-action-buttons ion-buttons ion-button{color:var(--ion-color-base)}:host .calendar-action-buttons ion-buttons{padding-left:0;padding-right:0;padding-top:8px;padding-bottom:0}:host .calendar-action-buttons ion-buttons ion-button{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0}:host .calendar-days-of-week{-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, var(--ion-text-color-step-700, #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{width:clamp(20px, calc(mod(min(1rem, 24px), 24px) * 10), 100%);height:24px;overflow:hidden}.calendar-day{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{width:auto;height:auto;overflow:initial}.calendar-day{border-radius:32px}}:host .calendar-body .calendar-month .calendar-month-grid{-webkit-padding-start:8px;padding-inline-start:8px;-webkit-padding-end:8px;padding-inline-end:8px;padding-top:8px;padding-bottom:8px;align-items:center;height:calc(100% - 16px)}:host .calendar-day-wrapper{-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{width:40px;min-width:40px;height:40px;font-size:min(1.25rem, 32px)}.calendar-day.calendar-day-active{background:rgba(var(--ion-color-base-rgb), 0.2);font-size:min(1.375rem, 35.2px)}:host .calendar-day.calendar-day-today{color:var(--ion-color-base)}:host .calendar-day.calendar-day-active,:host .calendar-day.calendar-day-adjacent-day.calendar-day-active{color:var(--ion-color-base);font-weight:600}:host .calendar-day.calendar-day-today.calendar-day-active{background:var(--ion-color-base);color:var(--ion-color-contrast)}:host .calendar-day.calendar-day-adjacent-day{color:var(--ion-color-step-300, var(--ion-text-color-step-700, #b3b3b3))}:host .datetime-time{-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{font-weight:600}:host .datetime-buttons{-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, var(--ion-background-color-step-200, #cccccc))}:host .datetime-buttons ::slotted(ion-buttons),:host .datetime-buttons ion-buttons{display:flex;align-items:center;justify-content:space-between}:host .datetime-action-buttons{width:100%}`;
+const datetimeIosCss = () => `:host{display:flex;flex-flow:column;background:var(--background);overflow:hidden}ion-picker-column-internal{min-width:26px}:host(.datetime-size-fixed){width:auto;height:auto}:host(.datetime-size-fixed:not(.datetime-prefer-wheel)){max-width:350px}:host(.datetime-size-fixed.datetime-prefer-wheel){min-width:350px;max-width:max-content}:host(.datetime-size-cover){width:100%}:host .calendar-body,:host .datetime-year{opacity:0}:host(:not(.datetime-ready)) .datetime-year{position:absolute;pointer-events:none}:host(.datetime-ready) .calendar-body{opacity:1}:host(.datetime-ready) .datetime-year{display:none;opacity:1}:host .wheel-order-year-first .day-column{order:3;text-align:end}:host .wheel-order-year-first .month-column{order:2;text-align:end}:host .wheel-order-year-first .year-column{order:1;text-align:start}:host .datetime-calendar,:host .datetime-year{display:flex;flex:1 1 auto;flex-flow:column}:host(.show-month-and-year) .datetime-year{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,:host(.show-month-and-year) .calendar-days-of-week,:host(.show-month-and-year) .calendar-body,:host(.show-month-and-year) .datetime-time{position:absolute;visibility:hidden;pointer-events:none}@supports (inset-inline-start: 0){:host(.show-month-and-year) .calendar-next-prev,:host(.show-month-and-year) .calendar-days-of-week,:host(.show-month-and-year) .calendar-body,:host(.show-month-and-year) .datetime-time{inset-inline-start:-99999px}}@supports not (inset-inline-start: 0){:host(.show-month-and-year) .calendar-next-prev,:host(.show-month-and-year) .calendar-days-of-week,:host(.show-month-and-year) .calendar-body,:host(.show-month-and-year) .datetime-time{left:-99999px}:host-context([dir=rtl]):host(.show-month-and-year) .calendar-next-prev,:host-context([dir=rtl]).show-month-and-year .calendar-next-prev,:host-context([dir=rtl]):host(.show-month-and-year) .calendar-days-of-week,:host-context([dir=rtl]).show-month-and-year .calendar-days-of-week,:host-context([dir=rtl]):host(.show-month-and-year) .calendar-body,:host-context([dir=rtl]).show-month-and-year .calendar-body,:host-context([dir=rtl]):host(.show-month-and-year) .datetime-time,:host-context([dir=rtl]).show-month-and-year .datetime-time{left:unset;right:unset;right:-99999px}@supports selector(:dir(rtl)){:host(.show-month-and-year:dir(rtl)) .calendar-next-prev,:host(.show-month-and-year:dir(rtl)) .calendar-days-of-week,:host(.show-month-and-year:dir(rtl)) .calendar-body,:host(.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,:host(.show-month-and-year) .calendar-days-of-week,:host(.show-month-and-year) .calendar-body,:host(.show-month-and-year) .datetime-time{display:none}}:host(.month-year-picker-open) .datetime-footer{display:none}:host(.datetime-disabled){pointer-events:none}:host(.datetime-disabled) .calendar-days-of-week,:host(.datetime-disabled) .datetime-time{opacity:0.4}:host(.datetime-readonly){pointer-events:none;}:host(.datetime-readonly) .calendar-action-buttons,:host(.datetime-readonly) .calendar-body,:host(.datetime-readonly) .datetime-year{pointer-events:initial}:host(.datetime-readonly) .calendar-day[disabled]:not(.calendar-day-constrained),:host(.datetime-readonly) .datetime-action-buttons ion-button[disabled]{opacity:1}:host .datetime-header .datetime-title{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}:host .datetime-action-buttons.has-clear-button{width:100%}:host .datetime-action-buttons ion-buttons{display:flex;justify-content:space-between}.datetime-action-buttons .datetime-action-buttons-container{display:flex}:host .calendar-action-buttons{display:flex;justify-content:space-between}:host .calendar-action-buttons ion-item,:host .calendar-action-buttons ion-button{--background:translucent}:host .calendar-action-buttons ion-item ion-label{display:flex;align-items:center;width:auto}:host .calendar-action-buttons ion-item ion-icon{-webkit-padding-start:4px;padding-inline-start:4px;-webkit-padding-end:0;padding-inline-end:0;padding-top:0;padding-bottom:0}:host .calendar-days-of-week{display:grid;grid-template-columns:repeat(7, 1fr);text-align:center}.calendar-days-of-week .day-of-week{-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{display:flex;flex-grow:1;scroll-snap-type:x mandatory;overflow-x:scroll;overflow-y:hidden;scrollbar-width:none;outline:none}:host .calendar-body .calendar-month{display:flex;flex-flow:column;scroll-snap-align:start;scroll-snap-stop:always;flex-shrink:0;width:100%}:host .calendar-body .calendar-month-disabled{scroll-snap-align:none}:host .calendar-body::-webkit-scrollbar{display:none}:host .calendar-body .calendar-month-grid{display:grid;grid-template-columns:repeat(7, 1fr)}:host .calendar-day-wrapper{display:flex;align-items:center;justify-content:center;min-width:0;min-height:0;overflow:visible}.calendar-day{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:flex;position:relative;align-items:center;justify-content:center;border:none;outline:none;background:none;color:currentColor;font-family:var(--ion-font-family, inherit);cursor:pointer;appearance:none;z-index:0}:host .calendar-day[disabled]{pointer-events:none;opacity:0.4}.calendar-day:focus{background: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{display:flex;justify-content:space-between}:host(.datetime-presentation-time) .datetime-time{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0}:host ion-popover{--height:200px}:host .time-header{display:flex;align-items:center}:host .time-body{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:flex;border:none;background:var(--ion-color-step-300, #edeef0);color:var(--ion-text-color, #000);font-family:inherit;font-size:inherit;cursor:pointer;appearance:none}:host .time-body-active{color:var(--ion-color-base)}:host(.in-item){position:static}:host(.show-month-and-year) .calendar-action-buttons ion-item{--color:var(--ion-color-base)}:host{--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)),:host(.datetime-presentation-time-date:not(.datetime-prefer-wheel)),:host(.datetime-presentation-date:not(.datetime-prefer-wheel)){min-height:350px}:host .datetime-header{-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{color:var(--title-color)}:host .datetime-header .datetime-selected-date{margin-top:10px}:host .calendar-action-buttons ion-item{--padding-start:16px;--background-hover:transparent;--background-activated:transparent;font-size:min(1rem, 25.6px);font-weight:600}:host .calendar-action-buttons ion-item ion-icon,:host .calendar-action-buttons ion-buttons ion-button{color:var(--ion-color-base)}:host .calendar-action-buttons ion-buttons{padding-left:0;padding-right:0;padding-top:8px;padding-bottom:0}:host .calendar-action-buttons ion-buttons ion-button{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0}:host .calendar-days-of-week{-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{width:clamp(20px, calc(mod(min(1rem, 24px), 24px) * 10), 100%);height:24px;overflow:hidden}.calendar-day{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{width:auto;height:auto;overflow:initial}.calendar-day{border-radius:32px}}:host .calendar-body .calendar-month .calendar-month-grid{-webkit-padding-start:8px;padding-inline-start:8px;-webkit-padding-end:8px;padding-inline-end:8px;padding-top:8px;padding-bottom:8px;align-items:center;height:calc(100% - 16px)}:host .calendar-day-wrapper{-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{width:40px;min-width:40px;height:40px;font-size:min(1.25rem, 32px)}.calendar-day.calendar-day-active{background:rgba(var(--ion-color-base-rgb), 0.2)}:host .calendar-day.calendar-day-today{color:var(--ion-color-base)}:host .calendar-day.calendar-day-active{color:var(--ion-color-base);font-weight:600}:host .calendar-day.calendar-day-today.calendar-day-active{background:var(--ion-color-base);color:var(--ion-color-contrast)}:host .datetime-time{-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{font-weight:600}:host .datetime-buttons{-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),:host .datetime-buttons ion-buttons{display:flex;align-items:center;justify-content:space-between}:host .datetime-action-buttons{width:100%}`;
 
-const datetimeMdCss = () => `:host{display:flex;flex-flow:column;background:var(--background);overflow:hidden}:host(.datetime-size-fixed){width:auto;height:auto}:host(.datetime-size-fixed:not(.datetime-prefer-wheel)){max-width:350px}:host(.datetime-size-fixed.datetime-prefer-wheel){min-width:350px;max-width:max-content}:host(.datetime-size-cover){width:100%}:host .calendar-body,:host .datetime-year{opacity:0}:host(:not(.datetime-ready)) .datetime-year{position:absolute;pointer-events:none}:host(.datetime-ready) .calendar-body{opacity:1}:host(.datetime-ready) .datetime-year{display:none;opacity:1}:host .wheel-order-year-first .day-column{order:3;text-align:end}:host .wheel-order-year-first .month-column{order:2;text-align:end}:host .wheel-order-year-first .year-column{order:1;text-align:start}:host .datetime-calendar,:host .datetime-year{display:flex;flex:1 1 auto;flex-flow:column}:host(.show-month-and-year) .datetime-year{display:flex}:host(.show-month-and-year) .calendar-next-prev,:host(.show-month-and-year) .calendar-days-of-week,:host(.show-month-and-year) .calendar-body,:host(.show-month-and-year) .datetime-time{display:none}:host(.month-year-picker-open) .datetime-footer{display:none}:host(.datetime-disabled){pointer-events:none}:host(.datetime-disabled) .calendar-days-of-week,:host(.datetime-disabled) .datetime-time{opacity:0.4}:host(.datetime-readonly){pointer-events:none;}:host(.datetime-readonly) .calendar-action-buttons,:host(.datetime-readonly) .calendar-body,:host(.datetime-readonly) .datetime-year{pointer-events:initial}:host(.datetime-readonly) .calendar-day[disabled]:not(.calendar-day-constrained),:host(.datetime-readonly) .datetime-action-buttons ion-button[disabled]{opacity:1}:host .datetime-header .datetime-title{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}:host .datetime-action-buttons.has-clear-button{width:100%}:host .datetime-action-buttons ion-buttons{display:flex;justify-content:space-between}.datetime-action-buttons .datetime-action-buttons-container{display:flex}:host .calendar-action-buttons{display:flex;justify-content:space-between}:host .calendar-action-buttons ion-button{--background:transparent}:host .calendar-days-of-week{display:grid;grid-template-columns:repeat(7, 1fr);text-align:center}.calendar-days-of-week .day-of-week{-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{display:flex;flex-grow:1;scroll-snap-type:x mandatory;overflow-x:scroll;overflow-y:hidden;scrollbar-width:none;outline:none}:host .calendar-body .calendar-month{display:flex;flex-flow:column;scroll-snap-align:start;scroll-snap-stop:always;flex-shrink:0;width:100%}:host .calendar-body .calendar-month-disabled{scroll-snap-align:none}:host .calendar-body::-webkit-scrollbar{display:none}:host .calendar-body .calendar-month-grid{display:grid;grid-template-columns:repeat(7, 1fr)}:host .calendar-day-wrapper{display:flex;align-items:center;justify-content:center;min-width:0;min-height:0;overflow:visible}.calendar-day{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:flex;position:relative;align-items:center;justify-content:center;border:none;outline:none;background:none;color:currentColor;font-family:var(--ion-font-family, inherit);cursor:pointer;appearance:none;z-index:0}:host .calendar-day[disabled]{pointer-events:none;opacity:0.4}.calendar-day:not(.calendar-day-adjacent-day):focus{background: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{display:flex;justify-content:space-between}:host(.datetime-presentation-time) .datetime-time{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0}:host ion-popover{--height:200px}:host .time-header{display:flex;align-items:center}:host .time-body{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:flex;border:none;background:var(--ion-color-step-300, var(--ion-background-color-step-300, #edeef0));color:var(--ion-text-color, #000);font-family:inherit;font-size:inherit;cursor:pointer;appearance:none}:host .time-body-active{color:var(--ion-color-base)}:host(.in-item){position:static}:host(.show-month-and-year) .calendar-action-buttons .calendar-month-year-toggle{color:var(--ion-color-base)}.calendar-month-year{min-width:0}.calendar-month-year-toggle{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{left:0;right:0;top:0;bottom:0;position:absolute;content:"";opacity:0;transition:opacity 15ms linear, background-color 15ms linear;z-index:-1}.calendar-month-year-toggle.ion-focused::after{background:currentColor}.calendar-month-year-toggle:disabled{opacity:0.3;pointer-events:none}.calendar-month-year-toggle ion-icon{-webkit-padding-start:4px;padding-inline-start:4px;-webkit-padding-end:0;padding-inline-end:0;padding-top:0;padding-bottom:0;flex-shrink:0}.calendar-month-year-toggle #toggle-wrapper{display:inline-flex;align-items:center}ion-picker{--highlight-background:var(--wheel-highlight-background);--highlight-border-radius:var(--wheel-highlight-border-radius);--fade-background-rgb:var(--wheel-fade-background-rgb)}:host{--background:var(--ion-color-step-100, var(--ion-background-color-step-100, #ffffff));--title-color:var(--ion-color-contrast)}:host .datetime-header{-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{font-size:0.75rem;text-transform:uppercase}:host .datetime-header .datetime-selected-date{margin-top:30px;font-size:2.125rem}:host .calendar-action-buttons ion-button{--color:var(--ion-color-step-650, var(--ion-text-color-step-350, #595959))}.calendar-month-year-toggle{-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, var(--ion-text-color-step-350, #595959));z-index:1}.calendar-month-year-toggle.ion-focused::after{opacity:0.04}.calendar-month-year-toggle ion-ripple-effect{color:currentColor}@media (any-hover: hover){.calendar-month-year-toggle.ion-activatable:not(.ion-focused):hover::after{background:currentColor;opacity:0.04}}:host .calendar-days-of-week{-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, var(--ion-text-color-step-500, gray));font-size:0.875rem;line-height:36px}:host .calendar-body .calendar-month .calendar-month-grid{-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{width:42px;min-width:42px;height:42px;font-size:0.875rem}:host .calendar-day.calendar-day-today{border:1px solid var(--ion-color-base);color:var(--ion-color-base)}:host .calendar-day.calendar-day-active,:host .calendar-day.calendar-day-adjacent-day.calendar-day-active{color:var(--ion-color-contrast)}.calendar-day.calendar-day-active,.calendar-day.calendar-day-active:focus{border:1px solid var(--ion-color-base);background:var(--ion-color-base)}:host .calendar-day.calendar-day-adjacent-day{color:var(--ion-color-step-500, var(--ion-text-color-step-500, gray))}:host .datetime-time{-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{color:var(--ion-color-step-650, var(--ion-text-color-step-350, #595959))}:host(.datetime-presentation-month) .datetime-year,:host(.datetime-presentation-year) .datetime-year,:host(.datetime-presentation-month-year) .datetime-year{margin-top:20px;margin-bottom:20px}:host .datetime-buttons{-webkit-padding-start:10px;padding-inline-start:10px;-webkit-padding-end:10px;padding-inline-end:10px;padding-top:10px;padding-bottom:10px;display:flex;align-items:center;justify-content:flex-end}`;
+const datetimeMdCss = () => `:host{display:flex;flex-flow:column;background:var(--background);overflow:hidden}ion-picker-column-internal{min-width:26px}:host(.datetime-size-fixed){width:auto;height:auto}:host(.datetime-size-fixed:not(.datetime-prefer-wheel)){max-width:350px}:host(.datetime-size-fixed.datetime-prefer-wheel){min-width:350px;max-width:max-content}:host(.datetime-size-cover){width:100%}:host .calendar-body,:host .datetime-year{opacity:0}:host(:not(.datetime-ready)) .datetime-year{position:absolute;pointer-events:none}:host(.datetime-ready) .calendar-body{opacity:1}:host(.datetime-ready) .datetime-year{display:none;opacity:1}:host .wheel-order-year-first .day-column{order:3;text-align:end}:host .wheel-order-year-first .month-column{order:2;text-align:end}:host .wheel-order-year-first .year-column{order:1;text-align:start}:host .datetime-calendar,:host .datetime-year{display:flex;flex:1 1 auto;flex-flow:column}:host(.show-month-and-year) .datetime-year{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,:host(.show-month-and-year) .calendar-days-of-week,:host(.show-month-and-year) .calendar-body,:host(.show-month-and-year) .datetime-time{position:absolute;visibility:hidden;pointer-events:none}@supports (inset-inline-start: 0){:host(.show-month-and-year) .calendar-next-prev,:host(.show-month-and-year) .calendar-days-of-week,:host(.show-month-and-year) .calendar-body,:host(.show-month-and-year) .datetime-time{inset-inline-start:-99999px}}@supports not (inset-inline-start: 0){:host(.show-month-and-year) .calendar-next-prev,:host(.show-month-and-year) .calendar-days-of-week,:host(.show-month-and-year) .calendar-body,:host(.show-month-and-year) .datetime-time{left:-99999px}:host-context([dir=rtl]):host(.show-month-and-year) .calendar-next-prev,:host-context([dir=rtl]).show-month-and-year .calendar-next-prev,:host-context([dir=rtl]):host(.show-month-and-year) .calendar-days-of-week,:host-context([dir=rtl]).show-month-and-year .calendar-days-of-week,:host-context([dir=rtl]):host(.show-month-and-year) .calendar-body,:host-context([dir=rtl]).show-month-and-year .calendar-body,:host-context([dir=rtl]):host(.show-month-and-year) .datetime-time,:host-context([dir=rtl]).show-month-and-year .datetime-time{left:unset;right:unset;right:-99999px}@supports selector(:dir(rtl)){:host(.show-month-and-year:dir(rtl)) .calendar-next-prev,:host(.show-month-and-year:dir(rtl)) .calendar-days-of-week,:host(.show-month-and-year:dir(rtl)) .calendar-body,:host(.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,:host(.show-month-and-year) .calendar-days-of-week,:host(.show-month-and-year) .calendar-body,:host(.show-month-and-year) .datetime-time{display:none}}:host(.month-year-picker-open) .datetime-footer{display:none}:host(.datetime-disabled){pointer-events:none}:host(.datetime-disabled) .calendar-days-of-week,:host(.datetime-disabled) .datetime-time{opacity:0.4}:host(.datetime-readonly){pointer-events:none;}:host(.datetime-readonly) .calendar-action-buttons,:host(.datetime-readonly) .calendar-body,:host(.datetime-readonly) .datetime-year{pointer-events:initial}:host(.datetime-readonly) .calendar-day[disabled]:not(.calendar-day-constrained),:host(.datetime-readonly) .datetime-action-buttons ion-button[disabled]{opacity:1}:host .datetime-header .datetime-title{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}:host .datetime-action-buttons.has-clear-button{width:100%}:host .datetime-action-buttons ion-buttons{display:flex;justify-content:space-between}.datetime-action-buttons .datetime-action-buttons-container{display:flex}:host .calendar-action-buttons{display:flex;justify-content:space-between}:host .calendar-action-buttons ion-item,:host .calendar-action-buttons ion-button{--background:translucent}:host .calendar-action-buttons ion-item ion-label{display:flex;align-items:center;width:auto}:host .calendar-action-buttons ion-item ion-icon{-webkit-padding-start:4px;padding-inline-start:4px;-webkit-padding-end:0;padding-inline-end:0;padding-top:0;padding-bottom:0}:host .calendar-days-of-week{display:grid;grid-template-columns:repeat(7, 1fr);text-align:center}.calendar-days-of-week .day-of-week{-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{display:flex;flex-grow:1;scroll-snap-type:x mandatory;overflow-x:scroll;overflow-y:hidden;scrollbar-width:none;outline:none}:host .calendar-body .calendar-month{display:flex;flex-flow:column;scroll-snap-align:start;scroll-snap-stop:always;flex-shrink:0;width:100%}:host .calendar-body .calendar-month-disabled{scroll-snap-align:none}:host .calendar-body::-webkit-scrollbar{display:none}:host .calendar-body .calendar-month-grid{display:grid;grid-template-columns:repeat(7, 1fr)}:host .calendar-day-wrapper{display:flex;align-items:center;justify-content:center;min-width:0;min-height:0;overflow:visible}.calendar-day{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:flex;position:relative;align-items:center;justify-content:center;border:none;outline:none;background:none;color:currentColor;font-family:var(--ion-font-family, inherit);cursor:pointer;appearance:none;z-index:0}:host .calendar-day[disabled]{pointer-events:none;opacity:0.4}.calendar-day:focus{background: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{display:flex;justify-content:space-between}:host(.datetime-presentation-time) .datetime-time{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0}:host ion-popover{--height:200px}:host .time-header{display:flex;align-items:center}:host .time-body{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:flex;border:none;background:var(--ion-color-step-300, #edeef0);color:var(--ion-text-color, #000);font-family:inherit;font-size:inherit;cursor:pointer;appearance:none}:host .time-body-active{color:var(--ion-color-base)}:host(.in-item){position:static}:host(.show-month-and-year) .calendar-action-buttons ion-item{--color:var(--ion-color-base)}:host{--background:var(--ion-color-step-100, #ffffff);--title-color:var(--ion-color-contrast)}:host .datetime-header{-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{font-size:0.75rem;text-transform:uppercase}:host .datetime-header .datetime-selected-date{margin-top:30px;font-size:2.125rem}:host .datetime-calendar .calendar-action-buttons ion-item{--padding-start:20px}:host .calendar-action-buttons ion-item,:host .calendar-action-buttons ion-button{--color:var(--ion-color-step-650, #595959)}:host .calendar-days-of-week{-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{-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{width:42px;min-width:42px;height:42px;font-size:0.875rem}:host .calendar-day.calendar-day-today{border:1px solid var(--ion-color-base);color:var(--ion-color-base)}:host .calendar-day.calendar-day-active{color:var(--ion-color-contrast)}.calendar-day.calendar-day-active{border:1px solid var(--ion-color-base);background:var(--ion-color-base)}:host .datetime-time{-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{color:var(--ion-color-step-650, #595959)}:host(.datetime-presentation-month) .datetime-year,:host(.datetime-presentation-year) .datetime-year,:host(.datetime-presentation-month-year) .datetime-year{margin-top:20px;margin-bottom:20px}:host .datetime-buttons{-webkit-padding-start:10px;padding-inline-start:10px;-webkit-padding-end:10px;padding-inline-end:10px;padding-top:10px;padding-bottom:10px;display:flex;align-items:center;justify-content:flex-end}`;
 
 const Datetime = class {
     constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.ionCancel = index.createEvent(this, "ionCancel", 7);
-        this.ionChange = index.createEvent(this, "ionChange", 7);
-        this.ionValueChange = index.createEvent(this, "ionValueChange", 7);
-        this.ionFocus = index.createEvent(this, "ionFocus", 7);
-        this.ionBlur = index.createEvent(this, "ionBlur", 7);
-        this.ionStyle = index.createEvent(this, "ionStyle", 7);
-        this.ionRender = index.createEvent(this, "ionRender", 7);
+        index$1.registerInstance(this, hostRef);
+        this.ionCancel = index$1.createEvent(this, "ionCancel", 7);
+        this.ionChange = index$1.createEvent(this, "ionChange", 7);
+        this.ionValueChange = index$1.createEvent(this, "ionValueChange", 7);
+        this.ionFocus = index$1.createEvent(this, "ionFocus", 7);
+        this.ionBlur = index$1.createEvent(this, "ionBlur", 7);
+        this.ionStyle = index$1.createEvent(this, "ionStyle", 7);
+        this.ionRender = index$1.createEvent(this, "ionRender", 7);
         this.inputId = `ion-dt-${datetimeIds++}`;
         this.prevPresentation = null;
-        this.showMonthAndYear = false;
-        this.activeParts = [];
-        this.workingParts = {
-            month: 5,
-            day: 28,
-            year: 2021,
-            hour: 13,
-            minute: 52,
-            ampm: 'pm',
-            isAdjacentDay: false,
-        };
-        this.isTimePopoverOpen = false;
-        /**
-         * The color to use from your application's color palette.
-         * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
-         * For more information on colors, see [theming](/docs/theming/basics).
-         */
-        this.color = 'primary';
-        /**
-         * The name of the control, which is submitted with the form data.
-         */
-        this.name = this.inputId;
-        /**
-         * If `true`, the user cannot interact with the datetime.
-         */
-        this.disabled = false;
-        /**
-         * If `true`, the datetime appears normal but the selected date cannot be changed.
-         */
-        this.readonly = false;
-        /**
-         * If `true`, the datetime calendar displays a six-week (42-day) layout,
-         * including days from the previous and next months to fill the grid.
-         * These adjacent days are selectable unless disabled.
-         */
-        this.showAdjacentDays = false;
-        /**
-         * Which values you want to select. `"date"` will show
-         * a calendar picker to select the month, day, and year. `"time"`
-         * will show a time picker to select the hour, minute, and (optionally)
-         * AM/PM. `"date-time"` will show the date picker first and time picker second.
-         * `"time-date"` will show the time picker first and date picker second.
-         */
-        this.presentation = 'date-time';
-        /**
-         * The text to display on the picker's cancel button.
-         */
-        this.cancelText = 'Cancel';
-        /**
-         * The text to display on the picker's "Done" button.
-         */
-        this.doneText = 'Done';
-        /**
-         * The text to display on the picker's "Clear" button.
-         */
-        this.clearText = 'Clear';
-        /**
-         * The locale to use for `ion-datetime`. This
-         * impacts month and day name formatting.
-         * The `"default"` value refers to the default
-         * locale set by your device.
-         */
-        this.locale = 'default';
-        /**
-         * The first day of the week to use for `ion-datetime`. The
-         * default value is `0` and represents Sunday.
-         */
-        this.firstDayOfWeek = 0;
-        /**
-         * If `true`, multiple dates can be selected at once. Only
-         * applies to `presentation="date"` and `preferWheel="false"`.
-         */
-        this.multiple = false;
-        /**
-         * If `true`, a header will be shown above the calendar
-         * picker. This will include both the slotted title, and
-         * the selected date.
-         */
-        this.showDefaultTitle = false;
-        /**
-         * If `true`, the default "Cancel" and "OK" buttons
-         * will be rendered at the bottom of the `ion-datetime`
-         * component. Developers can also use the `button` slot
-         * if they want to customize these buttons. If custom
-         * buttons are set in the `button` slot then the
-         * default buttons will not be rendered.
-         */
-        this.showDefaultButtons = false;
-        /**
-         * If `true`, a "Clear" button will be rendered alongside
-         * the default "Cancel" and "OK" buttons at the bottom of the `ion-datetime`
-         * component. Developers can also use the `button` slot
-         * if they want to customize these buttons. If custom
-         * buttons are set in the `button` slot then the
-         * default buttons will not be rendered.
-         */
-        this.showClearButton = false;
-        /**
-         * If `true`, the default "Time" label will be rendered
-         * for the time selector of the `ion-datetime` component.
-         * Developers can also use the `time-label` slot
-         * if they want to customize this label. If a custom
-         * label is set in the `time-label` slot then the
-         * default label will not be rendered.
-         */
-        this.showDefaultTimeLabel = true;
-        /**
-         * If `cover`, the `ion-datetime` will expand to cover the full width of its container.
-         * If `fixed`, the `ion-datetime` will have a fixed width.
-         */
-        this.size = 'fixed';
-        /**
-         * If `true`, a wheel picker will be rendered instead of a calendar grid
-         * where possible. If `false`, a calendar grid will be rendered instead of
-         * a wheel picker where possible.
-         *
-         * A wheel picker can be rendered instead of a grid when `presentation` is
-         * one of the following values: `"date"`, `"date-time"`, or `"time-date"`.
-         *
-         * A wheel picker will always be rendered regardless of
-         * the `preferWheel` value when `presentation` is one of the following values:
-         * `"time"`, `"month"`, `"month-year"`, or `"year"`.
-         */
-        this.preferWheel = false;
         this.warnIfIncorrectValueUsage = () => {
             const { multiple, value } = this;
             if (!multiple && Array.isArray(value)) {
@@ -381,7 +252,7 @@ const Datetime = class {
                  * Default toString() behavior: a,b
                  * Custom behavior: ['a', 'b']
                  */
-                index.printIonWarning(`[ion-datetime] - An array of values was passed, but multiple is "false". This is incorrect usage and may result in unexpected behaviors. To dismiss this warning, pass a string to the "value" property when multiple="false".
+                index.printIonWarning(`ion-datetime was passed an array of values, but multiple="false". This is incorrect usage and may result in unexpected behaviors. To dismiss this warning, pass a string to the "value" property when multiple="false".
 
   Value Passed: [${value.map((v) => `'${v}'`).join(', ')}]
 `, this.el);
@@ -410,10 +281,10 @@ const Datetime = class {
             const { activeParts } = this;
             return Array.isArray(activeParts) ? activeParts[0] : activeParts;
         };
-        this.closeParentOverlay = (role) => {
+        this.closeParentOverlay = () => {
             const popoverOrModal = this.el.closest('ion-modal, ion-popover');
             if (popoverOrModal) {
-                popoverOrModal.dismiss(undefined, role);
+                popoverOrModal.dismiss();
             }
         };
         this.setWorkingParts = (parts) => {
@@ -564,15 +435,12 @@ const Datetime = class {
         };
         this.focusWorkingDay = (currentMonth) => {
             /**
-             * Get the number of offset days so
+             * Get the number of padding days so
              * we know how much to offset our next selector by
              * to grab the correct calendar-day element.
              */
-            const { day, month, year } = this.workingParts;
-            const firstOfMonth = new Date(`${month}/1/${year}`).getDay();
-            const offset = firstOfMonth >= this.firstDayOfWeek
-                ? firstOfMonth - this.firstDayOfWeek
-                : 7 - (this.firstDayOfWeek - firstOfMonth);
+            const padding = currentMonth.querySelectorAll('.calendar-day-padding');
+            const { day } = this.workingParts;
             if (day === null) {
                 return;
             }
@@ -580,7 +448,7 @@ const Datetime = class {
              * Get the calendar day element
              * and focus it.
              */
-            const dayEl = currentMonth.querySelector(`.calendar-day-wrapper:nth-of-type(${offset + day}) .calendar-day`);
+            const dayEl = currentMonth.querySelector(`.calendar-day-wrapper:nth-of-type(${padding.length + day}) .calendar-day`);
             if (dayEl) {
                 dayEl.focus();
             }
@@ -633,7 +501,7 @@ const Datetime = class {
              * scrollIntoView() will scroll entire page
              * if element is not in viewport. Use scrollLeft instead.
              */
-            index.writeTask(() => {
+            index$1.writeTask(() => {
                 calendarBodyRef.scrollLeft = startMonth.clientWidth * (dir.isRTL(this.el) ? -1 : 1);
                 const getChangedMonth = (parts) => {
                     const box = calendarBodyRef.getBoundingClientRect();
@@ -647,8 +515,7 @@ const Datetime = class {
                      * Check below the next line ensures that we did not
                      * swipe and abort (i.e. we swiped but we are still on the current month).
                      */
-                    const condition = dir.isRTL(this.el) ? calendarBodyRef.scrollLeft >= -2 : calendarBodyRef.scrollLeft <= 2;
-                    const month = condition ? startMonth : endMonth;
+                    const month = calendarBodyRef.scrollLeft <= 2 ? startMonth : endMonth;
                     /**
                      * The edge of the month must be lined up with
                      * the edge of the calendar body in order for
@@ -725,7 +592,7 @@ const Datetime = class {
                      * but older/slower device may have a flicker
                      * if we did not do this.
                      */
-                    index.writeTask(() => {
+                    index$1.writeTask(() => {
                         this.setWorkingParts(Object.assign(Object.assign({}, this.workingParts), { month, day: day, year }));
                         calendarBodyRef.scrollLeft = workingMonth.clientWidth * (dir.isRTL(this.el) ? -1 : 1);
                         calendarBodyRef.style.removeProperty('overflow');
@@ -785,30 +652,8 @@ const Datetime = class {
                 destroyKeyboardMO();
             }
         };
-        /**
-         * TODO(FW-6931): Remove this fallback upon solving the root cause
-         * Fallback to ensure the datetime becomes ready even if
-         * IntersectionObserver never reports it as intersecting.
-         *
-         * This is primarily used in environments where the observer
-         * might not fire as expected, such as when running under
-         * synthetic tests that stub IntersectionObserver.
-         */
-        this.ensureReadyIfVisible = () => {
-            if (this.el.classList.contains('datetime-ready')) {
-                return;
-            }
-            const rect = this.el.getBoundingClientRect();
-            if (rect.width === 0 || rect.height === 0) {
-                return;
-            }
-            this.initializeListeners();
-            index.writeTask(() => {
-                this.el.classList.add('datetime-ready');
-            });
-        };
         this.processValue = (value) => {
-            const hasValue = value !== null && value !== undefined && value !== '' && (!Array.isArray(value) || value.length > 0);
+            const hasValue = value !== null && value !== undefined && (!Array.isArray(value) || value.length > 0);
             const valueToProcess = hasValue ? data.parseDate(value) : this.defaultParts;
             const { minParts, maxParts, workingParts, el } = this;
             this.warnIfIncorrectValueUsage();
@@ -831,18 +676,19 @@ const Datetime = class {
                 data.warnIfValueOutOfBounds(valueToProcess, minParts, maxParts);
             }
             /**
-             * If there are multiple values, clamp to the last one.
-             * This is because the last value is the one that the user
-             * has most recently interacted with.
+             * If there are multiple values, pick an arbitrary one to clamp to. This way,
+             * if the values are across months, we always show at least one of them. Note
+             * that the values don't necessarily have to be in order.
              */
-            const singleValue = Array.isArray(valueToProcess) ? valueToProcess[valueToProcess.length - 1] : valueToProcess;
+            const singleValue = Array.isArray(valueToProcess) ? valueToProcess[0] : valueToProcess;
             const targetValue = data.clampDate(singleValue, minParts, maxParts);
             const { month, day, year, hour, minute } = targetValue;
             const ampm = data.parseAmPm(hour);
             /**
-             * Since `activeParts` indicates a value that been explicitly selected
-             * either by the user or the app, only update `activeParts` if the
-             * `value` property is set.
+             * Since `activeParts` indicates a value that
+             * been explicitly selected either by the
+             * user or the app, only update `activeParts`
+             * if the `value` property is set.
              */
             if (hasValue) {
                 if (Array.isArray(valueToProcess)) {
@@ -867,28 +713,51 @@ const Datetime = class {
                  */
                 this.activeParts = [];
             }
+            /**
+             * Only animate if:
+             * 1. We're using grid style (wheel style pickers should just jump to new value)
+             * 2. The month and/or year actually changed, and both are defined (otherwise there's nothing to animate to)
+             * 3. The calendar body is visible (prevents animation when in collapsed datetime-button, for example)
+             * 4. The month/year picker is not open (since you wouldn't see the animation anyway)
+             */
             const didChangeMonth = (month !== undefined && month !== workingParts.month) || (year !== undefined && year !== workingParts.year);
             const bodyIsVisible = el.classList.contains('datetime-ready');
             const { isGridStyle, showMonthAndYear } = this;
-            if (isGridStyle && didChangeMonth && bodyIsVisible && !showMonthAndYear) {
-                /**
-                 * Only animate if:
-                 * 1. We're using grid style (wheel style pickers should just jump to new value)
-                 * 2. The month and/or year actually changed, and both are defined (otherwise there's nothing to animate to)
-                 * 3. The calendar body is visible (prevents animation when in collapsed datetime-button, for example)
-                 * 4. The month/year picker is not open (since you wouldn't see the animation anyway)
-                 */
-                this.animateToDate(targetValue);
+            let areAllSelectedDatesInSameMonth = true;
+            if (Array.isArray(valueToProcess)) {
+                const firstMonth = valueToProcess[0].month;
+                for (const date of valueToProcess) {
+                    if (date.month !== firstMonth) {
+                        areAllSelectedDatesInSameMonth = false;
+                        break;
+                    }
+                }
             }
-            else {
-                this.setWorkingParts({
-                    month,
-                    day,
-                    year,
-                    hour,
-                    minute,
-                    ampm,
-                });
+            /**
+             * If there is more than one date selected
+             * and the dates aren't all in the same month,
+             * then we should neither animate to the date
+             * nor update the working parts because we do
+             * not know which date the user wants to view.
+             */
+            if (areAllSelectedDatesInSameMonth) {
+                if (isGridStyle && didChangeMonth && bodyIsVisible && !showMonthAndYear) {
+                    this.animateToDate(targetValue);
+                }
+                else {
+                    /**
+                     * We only need to do this if we didn't just animate to a new month,
+                     * since that calls prevMonth/nextMonth which calls setWorkingParts for us.
+                     */
+                    this.setWorkingParts({
+                        month,
+                        day,
+                        year,
+                        hour,
+                        minute,
+                        ampm,
+                    });
+                }
             }
         };
         this.animateToDate = async (targetValue) => {
@@ -963,6 +832,48 @@ const Datetime = class {
         this.toggleMonthAndYearView = () => {
             this.showMonthAndYear = !this.showMonthAndYear;
         };
+        this.showMonthAndYear = false;
+        this.activeParts = [];
+        this.workingParts = {
+            month: 5,
+            day: 28,
+            year: 2021,
+            hour: 13,
+            minute: 52,
+            ampm: 'pm',
+        };
+        this.isTimePopoverOpen = false;
+        this.forceRenderDate = undefined;
+        this.color = 'primary';
+        this.name = this.inputId;
+        this.disabled = false;
+        this.formatOptions = undefined;
+        this.readonly = false;
+        this.isDateEnabled = undefined;
+        this.min = undefined;
+        this.max = undefined;
+        this.presentation = 'date-time';
+        this.cancelText = 'Cancel';
+        this.doneText = 'Done';
+        this.clearText = 'Clear';
+        this.yearValues = undefined;
+        this.monthValues = undefined;
+        this.dayValues = undefined;
+        this.hourValues = undefined;
+        this.minuteValues = undefined;
+        this.locale = 'default';
+        this.firstDayOfWeek = 0;
+        this.titleSelectedDatesFormatter = undefined;
+        this.multiple = false;
+        this.highlightedDates = undefined;
+        this.value = undefined;
+        this.showDefaultTitle = false;
+        this.showDefaultButtons = false;
+        this.showClearButton = false;
+        this.showDefaultTimeLabel = true;
+        this.hourCycle = undefined;
+        this.size = 'fixed';
+        this.preferWheel = false;
     }
     formatOptionsChanged() {
         const { el, formatOptions, presentation } = this;
@@ -1017,8 +928,6 @@ const Datetime = class {
      * Confirms the selected datetime value, updates the
      * `value` property, and optionally closes the popover
      * or modal that the datetime was presented in.
-     *
-     * @param closeOverlay If `true`, closes the parent overlay. Defaults to `false`.
      */
     async confirm(closeOverlay = false) {
         const { isCalendarPicker, activeParts, preferWheel, workingParts } = this;
@@ -1045,15 +954,13 @@ const Datetime = class {
             }
         }
         if (closeOverlay) {
-            this.closeParentOverlay(CONFIRM_ROLE);
+            this.closeParentOverlay();
         }
     }
     /**
      * Resets the internal state of the datetime but does not update the value.
      * Passing a valid ISO-8601 string will reset the state of the component to the provided date.
      * If no value is provided, the internal state will be reset to the clamped value of the min, max and today.
-     *
-     * @param startDate A valid [ISO-8601 string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date#date_time_string_format) to reset the datetime state to.
      */
     async reset(startDate) {
         this.processValue(startDate);
@@ -1063,13 +970,11 @@ const Datetime = class {
      * optionally closes the popover
      * or modal that the datetime was
      * presented in.
-     *
-     * @param closeOverlay If `true`, closes the parent overlay. Defaults to `false`.
      */
     async cancel(closeOverlay = false) {
         this.ionCancel.emit();
         if (closeOverlay) {
-            this.closeParentOverlay(CANCEL_ROLE);
+            this.closeParentOverlay();
         }
     }
     get isCalendarPicker() {
@@ -1112,7 +1017,7 @@ const Datetime = class {
              * is that the content will pop into view a frame after. Maybe there
              * is a better way to handle this?
              */
-            index.writeTask(() => {
+            index$1.writeTask(() => {
                 this.el.classList.add('datetime-ready');
             });
         };
@@ -1124,17 +1029,6 @@ const Datetime = class {
          * triggering the `hiddenIO` observer below.
          */
         helpers.raf(() => visibleIO === null || visibleIO === void 0 ? void 0 : visibleIO.observe(intersectionTrackerRef));
-        /**
-         * TODO(FW-6931): Remove this fallback upon solving the root cause
-         * Fallback: If IntersectionObserver never reports that the
-         * datetime is visible but the host clearly has layout, ensure
-         * we still initialize listeners and mark the component as ready.
-         *
-         * We schedule this after everything has had a chance to run.
-         */
-        setTimeout(() => {
-            this.ensureReadyIfVisible();
-        }, 100);
         /**
          * We need to clean up listeners when the datetime is hidden
          * in a popover/modal so that we can properly scroll containers
@@ -1156,7 +1050,7 @@ const Datetime = class {
              * As a result, the wrong month will be shown.
              */
             this.showMonthAndYear = false;
-            index.writeTask(() => {
+            index$1.writeTask(() => {
                 this.el.classList.remove('datetime-ready');
             });
         };
@@ -1238,18 +1132,18 @@ const Datetime = class {
         const { el, formatOptions, highlightedDates, multiple, presentation, preferWheel } = this;
         if (multiple) {
             if (presentation !== 'date') {
-                index.printIonWarning('[ion-datetime] - Multiple date selection is only supported for presentation="date".', el);
+                index.printIonWarning('Multiple date selection is only supported for presentation="date".', el);
             }
             if (preferWheel) {
-                index.printIonWarning('[ion-datetime] - Multiple date selection is not supported with preferWheel="true".', el);
+                index.printIonWarning('Multiple date selection is not supported with preferWheel="true".', el);
             }
         }
         if (highlightedDates !== undefined) {
             if (presentation !== 'date' && presentation !== 'date-time' && presentation !== 'time-date') {
-                index.printIonWarning('[ion-datetime] - The highlightedDates property is only supported with the date, date-time, and time-date presentations.', el);
+                index.printIonWarning('The highlightedDates property is only supported with the date, date-time, and time-date presentations.', el);
             }
             if (preferWheel) {
-                index.printIonWarning('[ion-datetime] - The highlightedDates property is not supported with preferWheel="true".', el);
+                index.printIonWarning('The highlightedDates property is not supported with preferWheel="true".', el);
             }
         }
         if (formatOptions) {
@@ -1312,10 +1206,10 @@ const Datetime = class {
          * OK - Dismisses the datetime and
          * updates the `value` prop.
          */
-        return (index.h("div", { class: "datetime-footer" }, index.h("div", { class: "datetime-buttons" }, index.h("div", { class: {
+        return (index$1.h("div", { class: "datetime-footer" }, index$1.h("div", { class: "datetime-buttons" }, index$1.h("div", { class: {
                 ['datetime-action-buttons']: true,
                 ['has-clear-button']: this.showClearButton,
-            } }, index.h("slot", { name: "buttons" }, index.h("ion-buttons", null, showDefaultButtons && (index.h("ion-button", { id: "cancel-button", color: this.color, onClick: () => this.cancel(true), disabled: isButtonDisabled }, this.cancelText)), index.h("div", { class: "datetime-action-buttons-container" }, showClearButton && (index.h("ion-button", { id: "clear-button", color: this.color, onClick: () => clearButtonClick(), disabled: isButtonDisabled }, this.clearText)), showDefaultButtons && (index.h("ion-button", { id: "confirm-button", color: this.color, onClick: () => this.confirm(true), disabled: isButtonDisabled }, this.doneText)))))))));
+            } }, index$1.h("slot", { name: "buttons" }, index$1.h("ion-buttons", null, showDefaultButtons && (index$1.h("ion-button", { id: "cancel-button", color: this.color, onClick: () => this.cancel(true), disabled: isButtonDisabled }, this.cancelText)), index$1.h("div", { class: "datetime-action-buttons-container" }, showClearButton && (index$1.h("ion-button", { id: "clear-button", color: this.color, onClick: () => clearButtonClick(), disabled: isButtonDisabled }, this.clearText)), showDefaultButtons && (index$1.h("ion-button", { id: "confirm-button", color: this.color, onClick: () => this.confirm(true), disabled: isButtonDisabled }, this.doneText)))))))));
     }
     /**
      * Wheel picker render methods
@@ -1333,7 +1227,7 @@ const Datetime = class {
         const renderArray = forcePresentation === 'time-date'
             ? [this.renderTimePickerColumns(forcePresentation), this.renderDatePickerColumns(forcePresentation)]
             : [this.renderDatePickerColumns(forcePresentation), this.renderTimePickerColumns(forcePresentation)];
-        return index.h("ion-picker", { class: overlays.FOCUS_TRAP_DISABLE_CLASS }, renderArray);
+        return index$1.h("ion-picker-internal", null, renderArray);
     }
     renderDatePickerColumns(forcePresentation) {
         return forcePresentation === 'date-time' || forcePresentation === 'time-date'
@@ -1380,7 +1274,7 @@ const Datetime = class {
                     disabled = !isDateEnabled(data.convertDataToISO(referenceParts));
                 }
                 catch (e) {
-                    index.printIonError('[ion-datetime] - Exception thrown from provided `isDateEnabled` function. Please check your function and try again.', e);
+                    index.printIonError('Exception thrown from provided `isDateEnabled` function. Please check your function and try again.', e);
                 }
                 return Object.assign(Object.assign({}, itemObject), { disabled });
             });
@@ -1392,13 +1286,23 @@ const Datetime = class {
         const todayString = workingParts.day !== null
             ? `${workingParts.year}-${workingParts.month}-${workingParts.day}`
             : `${defaultParts.year}-${defaultParts.month}-${defaultParts.day}`;
-        return (index.h("ion-picker-column", { "aria-label": "Select a date", class: "date-column", color: this.color, disabled: disabled, value: todayString, onIonChange: (ev) => {
+        return (index$1.h("ion-picker-column-internal", { 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
+                // and trigger a re-render.
+                if (this.destroyCalendarListener) {
+                    this.destroyCalendarListener();
+                }
                 const { value } = ev.detail;
                 const findPart = parts.find(({ month, day, year }) => value === `${year}-${month}-${day}`);
                 this.setWorkingParts(Object.assign(Object.assign({}, workingParts), findPart));
                 this.setActiveParts(Object.assign(Object.assign({}, activePart), findPart));
+                // We can re-attach the scroll listener after
+                // the working parts have been updated.
+                this.initializeCalendarListener();
                 ev.stopPropagation();
-            } }, items.map((item) => (index.h("ion-picker-column-option", { part: item.value === todayString ? `${WHEEL_ITEM_PART} ${WHEEL_ITEM_ACTIVE_PART}` : WHEEL_ITEM_PART, key: item.value, disabled: item.disabled, value: item.value }, item.text)))));
+            } }));
     }
     renderIndividualDatePickerColumns(forcePresentation) {
         const { workingParts, isDateEnabled } = this;
@@ -1429,7 +1333,7 @@ const Datetime = class {
                     disabled = !isDateEnabled(data.convertDataToISO(referenceParts));
                 }
                 catch (e) {
-                    index.printIonError('[ion-datetime] - Exception thrown from provided `isDateEnabled` function. Please check your function and try again.', e);
+                    index.printIonError('Exception thrown from provided `isDateEnabled` function. Please check your function and try again.', e);
                 }
                 return Object.assign(Object.assign({}, dayObject), { disabled });
             });
@@ -1466,12 +1370,21 @@ const Datetime = class {
         }
         const { disabled, workingParts } = this;
         const activePart = this.getActivePartsWithFallback();
-        const pickerColumnValue = (_a = (workingParts.day !== null ? workingParts.day : this.defaultParts.day)) !== null && _a !== void 0 ? _a : undefined;
-        return (index.h("ion-picker-column", { "aria-label": "Select a day", class: "day-column", color: this.color, disabled: disabled, value: pickerColumnValue, onIonChange: (ev) => {
+        return (index$1.h("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) => {
+                // 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
+                // and trigger a re-render.
+                if (this.destroyCalendarListener) {
+                    this.destroyCalendarListener();
+                }
                 this.setWorkingParts(Object.assign(Object.assign({}, workingParts), { day: ev.detail.value }));
                 this.setActiveParts(Object.assign(Object.assign({}, activePart), { day: ev.detail.value }));
+                // We can re-attach the scroll listener after
+                // the working parts have been updated.
+                this.initializeCalendarListener();
                 ev.stopPropagation();
-            } }, days.map((day) => (index.h("ion-picker-column-option", { part: day.value === pickerColumnValue ? `${WHEEL_ITEM_PART} ${WHEEL_ITEM_ACTIVE_PART}` : WHEEL_ITEM_PART, key: day.value, disabled: day.disabled, value: day.value }, day.text)))));
+            } }));
     }
     renderMonthPickerColumn(months) {
         if (months.length === 0) {
@@ -1479,11 +1392,21 @@ const Datetime = class {
         }
         const { disabled, workingParts } = this;
         const activePart = this.getActivePartsWithFallback();
-        return (index.h("ion-picker-column", { "aria-label": "Select a month", class: "month-column", color: this.color, disabled: disabled, value: workingParts.month, onIonChange: (ev) => {
+        return (index$1.h("ion-picker-column-internal", { 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
+                // and trigger a re-render.
+                if (this.destroyCalendarListener) {
+                    this.destroyCalendarListener();
+                }
                 this.setWorkingParts(Object.assign(Object.assign({}, workingParts), { month: ev.detail.value }));
                 this.setActiveParts(Object.assign(Object.assign({}, activePart), { month: ev.detail.value }));
+                // We can re-attach the scroll listener after
+                // the working parts have been updated.
+                this.initializeCalendarListener();
                 ev.stopPropagation();
-            } }, months.map((month) => (index.h("ion-picker-column-option", { part: month.value === workingParts.month ? `${WHEEL_ITEM_PART} ${WHEEL_ITEM_ACTIVE_PART}` : WHEEL_ITEM_PART, key: month.value, disabled: month.disabled, value: month.value }, month.text)))));
+            } }));
     }
     renderYearPickerColumn(years) {
         if (years.length === 0) {
@@ -1491,11 +1414,21 @@ const Datetime = class {
         }
         const { disabled, workingParts } = this;
         const activePart = this.getActivePartsWithFallback();
-        return (index.h("ion-picker-column", { "aria-label": "Select a year", class: "year-column", color: this.color, disabled: disabled, value: workingParts.year, onIonChange: (ev) => {
+        return (index$1.h("ion-picker-column-internal", { 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
+                // and trigger a re-render.
+                if (this.destroyCalendarListener) {
+                    this.destroyCalendarListener();
+                }
                 this.setWorkingParts(Object.assign(Object.assign({}, workingParts), { year: ev.detail.value }));
                 this.setActiveParts(Object.assign(Object.assign({}, activePart), { year: ev.detail.value }));
+                // We can re-attach the scroll listener after
+                // the working parts have been updated.
+                this.initializeCalendarListener();
                 ev.stopPropagation();
-            } }, years.map((year) => (index.h("ion-picker-column-option", { part: year.value === workingParts.year ? `${WHEEL_ITEM_PART} ${WHEEL_ITEM_ACTIVE_PART}` : WHEEL_ITEM_PART, key: year.value, disabled: year.disabled, value: year.value }, year.text)))));
+            } }));
     }
     renderTimePickerColumns(forcePresentation) {
         if (['date', 'month', 'month-year', 'year'].includes(forcePresentation)) {
@@ -1524,22 +1457,22 @@ const Datetime = class {
         if (hoursData.length === 0)
             return [];
         const activePart = this.getActivePartsWithFallback();
-        return (index.h("ion-picker-column", { "aria-label": "Select an hour", color: this.color, disabled: disabled, value: activePart.hour, numericInput: true, onIonChange: (ev) => {
+        return (index$1.h("ion-picker-column-internal", { 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({}, this.getActivePartsWithFallback()), { hour: ev.detail.value }));
+                this.setActiveParts(Object.assign(Object.assign({}, activePart), { hour: ev.detail.value }));
                 ev.stopPropagation();
-            } }, hoursData.map((hour) => (index.h("ion-picker-column-option", { part: hour.value === activePart.hour ? `${WHEEL_ITEM_PART} ${WHEEL_ITEM_ACTIVE_PART}` : WHEEL_ITEM_PART, key: hour.value, disabled: hour.disabled, value: hour.value }, hour.text)))));
+            } }));
     }
     renderMinutePickerColumn(minutesData) {
         const { disabled, workingParts } = this;
         if (minutesData.length === 0)
             return [];
         const activePart = this.getActivePartsWithFallback();
-        return (index.h("ion-picker-column", { "aria-label": "Select a minute", color: this.color, disabled: disabled, value: activePart.minute, numericInput: true, onIonChange: (ev) => {
+        return (index$1.h("ion-picker-column-internal", { 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({}, this.getActivePartsWithFallback()), { minute: ev.detail.value }));
+                this.setActiveParts(Object.assign(Object.assign({}, activePart), { minute: ev.detail.value }));
                 ev.stopPropagation();
-            } }, minutesData.map((minute) => (index.h("ion-picker-column-option", { part: minute.value === activePart.minute ? `${WHEEL_ITEM_PART} ${WHEEL_ITEM_ACTIVE_PART}` : WHEEL_ITEM_PART, key: minute.value, disabled: minute.disabled, value: minute.value }, minute.text)))));
+            } }));
     }
     renderDayPeriodPickerColumn(dayPeriodData) {
         const { disabled, workingParts } = this;
@@ -1548,18 +1481,18 @@ const Datetime = class {
         }
         const activePart = this.getActivePartsWithFallback();
         const isDayPeriodRTL = data.isLocaleDayPeriodRTL(this.locale);
-        return (index.h("ion-picker-column", { "aria-label": "Select a day period", style: isDayPeriodRTL ? { order: '-1' } : {}, color: this.color, disabled: disabled, value: activePart.ampm, onIonChange: (ev) => {
+        return (index$1.h("ion-picker-column-internal", { style: isDayPeriodRTL ? { order: '-1' } : {}, color: this.color, disabled: disabled, value: activePart.ampm, items: dayPeriodData, onIonChange: (ev) => {
                 const hour = data.calculateHourFromAMPM(workingParts, ev.detail.value);
                 this.setWorkingParts(Object.assign(Object.assign({}, workingParts), { ampm: ev.detail.value, hour }));
-                this.setActiveParts(Object.assign(Object.assign({}, this.getActivePartsWithFallback()), { ampm: ev.detail.value, hour }));
+                this.setActiveParts(Object.assign(Object.assign({}, activePart), { ampm: ev.detail.value, hour }));
                 ev.stopPropagation();
-            } }, dayPeriodData.map((dayPeriod) => (index.h("ion-picker-column-option", { part: dayPeriod.value === activePart.ampm ? `${WHEEL_ITEM_PART} ${WHEEL_ITEM_ACTIVE_PART}` : WHEEL_ITEM_PART, key: dayPeriod.value, disabled: dayPeriod.disabled, value: dayPeriod.value }, dayPeriod.text)))));
+            } }));
     }
     renderWheelView(forcePresentation) {
         const { locale } = this;
         const showMonthFirst = data.isMonthFirstLocale(locale);
         const columnOrder = showMonthFirst ? 'month-first' : 'year-first';
-        return (index.h("div", { class: {
+        return (index$1.h("div", { class: {
                 [`wheel-order-${columnOrder}`]: true,
             } }, this.renderWheelPicker(forcePresentation)));
     }
@@ -1568,18 +1501,33 @@ const Datetime = class {
      */
     renderCalendarHeader(mode) {
         const { disabled } = this;
-        const expandedIcon = mode === 'ios' ? index$1.chevronDown : index$1.caretUpSharp;
-        const collapsedIcon = mode === 'ios' ? index$1.chevronForward : index$1.caretDownSharp;
+        const expandedIcon = mode === 'ios' ? index$2.chevronDown : index$2.caretUpSharp;
+        const collapsedIcon = mode === 'ios' ? index$2.chevronForward : index$2.caretDownSharp;
         const prevMonthDisabled = disabled || isPrevMonthDisabled(this.workingParts, this.minParts, this.maxParts);
         const nextMonthDisabled = disabled || isNextMonthDisabled(this.workingParts, this.maxParts);
         // don't use the inheritAttributes util because it removes dir from the host, and we still need that
         const hostDir = this.el.getAttribute('dir') || undefined;
-        return (index.h("div", { class: "calendar-header" }, index.h("div", { class: "calendar-action-buttons" }, index.h("div", { class: "calendar-month-year" }, index.h("button", { class: {
-                'calendar-month-year-toggle': true,
-                'ion-activatable': true,
-                'ion-focusable': true,
-            }, part: "month-year-button", disabled: disabled, "aria-label": this.showMonthAndYear ? 'Hide year picker' : 'Show year picker', onClick: () => this.toggleMonthAndYearView() }, index.h("span", { id: "toggle-wrapper" }, data.getMonthAndYear(this.locale, this.workingParts), index.h("ion-icon", { "aria-hidden": "true", icon: this.showMonthAndYear ? expandedIcon : collapsedIcon, lazy: false, flipRtl: true })), mode === 'md' && index.h("ion-ripple-effect", null))), index.h("div", { class: "calendar-next-prev" }, index.h("ion-buttons", null, index.h("ion-button", { "aria-label": "Previous month", disabled: prevMonthDisabled, onClick: () => this.prevMonth() }, index.h("ion-icon", { dir: hostDir, "aria-hidden": "true", slot: "icon-only", icon: index$1.chevronBack, lazy: false, flipRtl: true })), index.h("ion-button", { "aria-label": "Next month", disabled: nextMonthDisabled, onClick: () => this.nextMonth() }, index.h("ion-icon", { dir: hostDir, "aria-hidden": "true", slot: "icon-only", icon: index$1.chevronForward, lazy: false, flipRtl: true }))))), index.h("div", { class: "calendar-days-of-week", "aria-hidden": "true" }, data.getDaysOfWeek(this.locale, mode, this.firstDayOfWeek % 7).map((d) => {
-            return index.h("div", { class: "day-of-week" }, d);
+        return (index$1.h("div", { class: "calendar-header" }, index$1.h("div", { class: "calendar-action-buttons" }, index$1.h("div", { class: "calendar-month-year" }, index$1.h("ion-item", { part: "month-year-button", ref: (el) => (this.monthYearToggleItemRef = el), button: true, "aria-label": "Show year picker", detail: false, lines: "none", disabled: disabled, onClick: () => {
+                var _a;
+                this.toggleMonthAndYearView();
+                /**
+                 * TODO: FW-3547
+                 *
+                 * Currently there is not a way to set the aria-label on the inner button
+                 * on the `ion-item` and have it be reactive to changes. This is a workaround
+                 * until we either refactor `ion-item` to a button or Stencil adds a way to
+                 * have reactive props for built-in properties, such as `aria-label`.
+                 */
+                const { monthYearToggleItemRef } = this;
+                if (monthYearToggleItemRef) {
+                    const btn = (_a = monthYearToggleItemRef.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.item-native');
+                    if (btn) {
+                        const monthYearAriaLabel = this.showMonthAndYear ? 'Hide year picker' : 'Show year picker';
+                        btn.setAttribute('aria-label', monthYearAriaLabel);
+                    }
+                }
+            } }, index$1.h("ion-label", null, data.getMonthAndYear(this.locale, this.workingParts), index$1.h("ion-icon", { "aria-hidden": "true", icon: this.showMonthAndYear ? expandedIcon : collapsedIcon, lazy: false, flipRtl: true })))), index$1.h("div", { class: "calendar-next-prev" }, index$1.h("ion-buttons", null, index$1.h("ion-button", { "aria-label": "Previous month", disabled: prevMonthDisabled, onClick: () => this.prevMonth() }, index$1.h("ion-icon", { dir: hostDir, "aria-hidden": "true", slot: "icon-only", icon: index$2.chevronBack, lazy: false, flipRtl: true })), index$1.h("ion-button", { "aria-label": "Next month", disabled: nextMonthDisabled, onClick: () => this.nextMonth() }, index$1.h("ion-icon", { dir: hostDir, "aria-hidden": "true", slot: "icon-only", icon: index$2.chevronForward, lazy: false, flipRtl: true }))))), index$1.h("div", { class: "calendar-days-of-week", "aria-hidden": "true" }, data.getDaysOfWeek(this.locale, mode, this.firstDayOfWeek % 7).map((d) => {
+            return index$1.h("div", { class: "day-of-week" }, d);
         }))));
     }
     renderMonth(month, year) {
@@ -1605,40 +1553,14 @@ const Datetime = class {
         // can free-scroll the calendar.
         const isWorkingMonth = this.workingParts.month === month && this.workingParts.year === year;
         const activePart = this.getActivePartsWithFallback();
-        return (index.h("div", { "aria-hidden": !isWorkingMonth ? 'true' : null, class: {
+        return (index$1.h("div", { "aria-hidden": !isWorkingMonth ? 'true' : null, class: {
                 'calendar-month': true,
                 // Prevents scroll snap swipe gestures for months outside of the min/max bounds
                 'calendar-month-disabled': !isWorkingMonth && swipeDisabled,
-            } }, index.h("div", { class: "calendar-month-grid" }, data.getDaysOfMonth(month, year, this.firstDayOfWeek % 7, this.showAdjacentDays).map((dateObject, index$1) => {
-            const { day, dayOfWeek, isAdjacentDay } = dateObject;
-            const { el, highlightedDates, isDateEnabled, multiple, showAdjacentDays } = this;
-            let _month = month;
-            let _year = year;
-            if (showAdjacentDays && isAdjacentDay && day !== null) {
-                if (day > 20) {
-                    // Leading with the adjacent day from the previous month
-                    // if its a adjacent day and is higher than '20' (last week even in feb)
-                    if (month === 1) {
-                        _year = year - 1;
-                        _month = 12;
-                    }
-                    else {
-                        _month = month - 1;
-                    }
-                }
-                else if (day < 15) {
-                    // Leading with the adjacent day from the next month
-                    // if its a adjacent day and is lower than '15' (first two weeks)
-                    if (month === 12) {
-                        _year = year + 1;
-                        _month = 1;
-                    }
-                    else {
-                        _month = month + 1;
-                    }
-                }
-            }
-            const referenceParts = { month: _month, day, year: _year, isAdjacentDay };
+            } }, index$1.h("div", { class: "calendar-month-grid" }, data.getDaysOfMonth(month, year, this.firstDayOfWeek % 7).map((dateObject, index$2) => {
+            const { day, dayOfWeek } = dateObject;
+            const { el, highlightedDates, isDateEnabled, multiple } = this;
+            const referenceParts = { month, day, year };
             const isCalendarPadding = day === null;
             const { isActive, isToday, ariaLabel, ariaSelected, disabled: isDayDisabled, text, } = getCalendarDayState(this.locale, referenceParts, this.activeParts, this.todayParts, this.minParts, this.maxParts, this.parsedDayValues);
             const dateIsoString = data.convertDataToISO(referenceParts);
@@ -1653,7 +1575,7 @@ const Datetime = class {
                     isCalDayDisabled = !isDateEnabled(dateIsoString);
                 }
                 catch (e) {
-                    index.printIonError('[ion-datetime] - Exception thrown from provided `isDateEnabled` function. Please check your function and try again.', el, e);
+                    index.printIonError('Exception thrown from provided `isDateEnabled` function. Please check your function and try again.', el, e);
                 }
             }
             /**
@@ -1668,19 +1590,16 @@ const Datetime = class {
              * Custom highlight styles should not override the style for selected dates,
              * nor apply to "filler days" at the start of the grid.
              */
-            if (highlightedDates !== undefined && !isActive && day !== null && !isAdjacentDay) {
+            if (highlightedDates !== undefined && !isActive && day !== null) {
                 dateStyle = getHighlightStyles(highlightedDates, dateIsoString, el);
             }
             let dateParts = undefined;
             // "Filler days" at the beginning of the grid should not get the calendar day
             // CSS parts added to them
-            if (!isCalendarPadding && !isAdjacentDay) {
+            if (!isCalendarPadding) {
                 dateParts = `calendar-day${isActive ? ' active' : ''}${isToday ? ' today' : ''}${isCalDayDisabled ? ' disabled' : ''}`;
             }
-            else if (isAdjacentDay) {
-                dateParts = `calendar-day${isCalDayDisabled ? ' disabled' : ''}`;
-            }
-            return (index.h("div", { class: "calendar-day-wrapper" }, index.h("button", {
+            return (index$1.h("div", { class: "calendar-day-wrapper" }, index$1.h("button", {
                 // We need to use !important for the inline styles here because
                 // otherwise the CSS shadow parts will override these styles.
                 // See https://github.com/WICG/webcomponents/issues/847
@@ -1691,62 +1610,59 @@ const Datetime = class {
                     if (el) {
                         el.style.setProperty('color', `${dateStyle ? dateStyle.textColor : ''}`, 'important');
                         el.style.setProperty('background-color', `${dateStyle ? dateStyle.backgroundColor : ''}`, 'important');
-                        el.style.setProperty('border', `${dateStyle ? dateStyle.border : ''}`, 'important');
                     }
-                }, tabindex: "-1", "data-day": day, "data-month": _month, "data-year": _year, "data-index": index$1, "data-day-of-week": dayOfWeek, disabled: isButtonDisabled, class: {
+                }, tabindex: "-1", "data-day": day, "data-month": month, "data-year": year, "data-index": index$2, "data-day-of-week": dayOfWeek, disabled: isButtonDisabled, class: {
                     'calendar-day-padding': isCalendarPadding,
                     'calendar-day': true,
                     'calendar-day-active': isActive,
                     'calendar-day-constrained': isCalDayConstrained,
                     'calendar-day-today': isToday,
-                    'calendar-day-adjacent-day': isAdjacentDay,
                 }, part: dateParts, "aria-hidden": isCalendarPadding ? 'true' : null, "aria-selected": ariaSelected, "aria-label": ariaLabel, onClick: () => {
                     if (isCalendarPadding) {
                         return;
                     }
-                    if (isAdjacentDay) {
-                        // The user selected a day outside the current month. Ignore this button, as the month will be re-rendered.
-                        this.el.blur();
-                        this.activeParts = Object.assign(Object.assign({}, activePart), referenceParts);
-                        this.animateToDate(referenceParts);
-                        this.confirm();
+                    this.setWorkingParts(Object.assign(Object.assign({}, this.workingParts), { month,
+                        day,
+                        year }));
+                    // multiple only needs date info, so we can wipe out other fields like time
+                    if (multiple) {
+                        this.setActiveParts({
+                            month,
+                            day,
+                            year,
+                        }, isActive);
                     }
                     else {
-                        this.setWorkingParts(Object.assign(Object.assign({}, this.workingParts), referenceParts));
-                        // Multiple only needs date info so we can wipe out other fields like time.
-                        if (multiple) {
-                            this.setActiveParts(referenceParts, isActive);
-                        }
-                        else {
-                            this.setActiveParts(Object.assign(Object.assign({}, activePart), referenceParts));
-                        }
+                        this.setActiveParts(Object.assign(Object.assign({}, activePart), { month,
+                            day,
+                            year }));
                     }
                 }
             }, text)));
         }))));
     }
     renderCalendarBody() {
-        return (index.h("div", { class: "calendar-body ion-focusable", ref: (el) => (this.calendarBodyRef = el), tabindex: "0" }, data.generateMonths(this.workingParts, this.forceRenderDate).map(({ month, year }) => {
+        return (index$1.h("div", { class: "calendar-body ion-focusable", ref: (el) => (this.calendarBodyRef = el), tabindex: "0" }, data.generateMonths(this.workingParts, this.forceRenderDate).map(({ month, year }) => {
             return this.renderMonth(month, year);
         })));
     }
     renderCalendar(mode) {
-        return (index.h("div", { class: "datetime-calendar", key: "datetime-calendar" }, this.renderCalendarHeader(mode), this.renderCalendarBody()));
+        return (index$1.h("div", { class: "datetime-calendar", key: "datetime-calendar" }, this.renderCalendarHeader(mode), this.renderCalendarBody()));
     }
     renderTimeLabel() {
         const hasSlottedTimeLabel = this.el.querySelector('[slot="time-label"]') !== null;
         if (!hasSlottedTimeLabel && !this.showDefaultTimeLabel) {
             return;
         }
-        return index.h("slot", { name: "time-label" }, "Time");
+        return index$1.h("slot", { name: "time-label" }, "Time");
     }
     renderTimeOverlay() {
         const { disabled, hourCycle, isTimePopoverOpen, locale, formatOptions } = this;
         const computedHourCycle = data.getHourCycle(locale, hourCycle);
         const activePart = this.getActivePartsWithFallback();
         return [
-            index.h("div", { class: "time-header" }, this.renderTimeLabel()),
-            index.h("button", { class: {
+            index$1.h("div", { class: "time-header" }, this.renderTimeLabel()),
+            index$1.h("button", { class: {
                     'time-body': true,
                     'time-body-active': isTimePopoverOpen,
                 }, part: `time-button${isTimePopoverOpen ? ' active' : ''}`, "aria-expanded": "false", "aria-haspopup": "true", disabled: disabled, onClick: async (ev) => {
@@ -1762,7 +1678,7 @@ const Datetime = class {
                         this.isTimePopoverOpen = false;
                     }
                 } }, data.getLocalizedTime(locale, activePart, computedHourCycle, formatOptions === null || formatOptions === void 0 ? void 0 : formatOptions.time)),
-            index.h("ion-popover", { alignment: "center", translucent: true, overlayIndex: 1, arrow: false, onWillPresent: (ev) => {
+            index$1.h("ion-popover", { alignment: "center", translucent: true, overlayIndex: 1, arrow: false, onWillPresent: (ev) => {
                     /**
                      * Intersection Observers do not consistently fire between Blink and Webkit
                      * when toggling the visibility of the popover and trying to scroll the picker
@@ -1771,7 +1687,7 @@ const Datetime = class {
                      * 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');
+                    const cols = ev.target.querySelectorAll('ion-picker-column-internal');
                     // TODO (FW-615): Potentially remove this when intersection observers are fixed in picker column
                     cols.forEach((col) => col.scrollActiveItemIntoView());
                 }, style: {
@@ -1795,7 +1711,7 @@ const Datetime = class {
                     headerText = titleSelectedDatesFormatter(data.convertDataToISO(activeParts));
                 }
                 catch (e) {
-                    index.printIonError('[ion-datetime] - Exception in provided `titleSelectedDatesFormatter`:', e);
+                    index.printIonError('Exception in provided `titleSelectedDatesFormatter`: ', e);
                 }
             }
         }
@@ -1810,7 +1726,7 @@ const Datetime = class {
         if (!hasSlottedTitle && !this.showDefaultTitle) {
             return;
         }
-        return (index.h("div", { class: "datetime-header" }, index.h("div", { class: "datetime-title" }, index.h("slot", { name: "title" }, "Select Date")), showExpandedHeader && index.h("div", { class: "datetime-selected-date" }, this.getHeaderSelectedDateText())));
+        return (index$1.h("div", { class: "datetime-header" }, index$1.h("div", { class: "datetime-title" }, index$1.h("slot", { name: "title" }, "Select Date")), showExpandedHeader && index$1.h("div", { class: "datetime-selected-date" }, this.getHeaderSelectedDateText())));
     }
     /**
      * Render time picker inside of datetime.
@@ -1822,7 +1738,7 @@ const Datetime = class {
     renderTime() {
         const { presentation } = this;
         const timeOnlyPresentation = presentation === 'time';
-        return (index.h("div", { class: "datetime-time" }, timeOnlyPresentation ? this.renderWheelPicker() : this.renderTimeOverlay()));
+        return (index$1.h("div", { class: "datetime-time" }, timeOnlyPresentation ? this.renderWheelPicker() : this.renderTimeOverlay()));
     }
     /**
      * Renders the month/year picker that is
@@ -1833,7 +1749,7 @@ const Datetime = class {
      * toggle in the calendar header.
      */
     renderCalendarViewMonthYearPicker() {
-        return index.h("div", { class: "datetime-year" }, this.renderWheelView('month-year'));
+        return index$1.h("div", { class: "datetime-year" }, this.renderWheelView('month-year'));
     }
     /**
      * Render entry point
@@ -1890,7 +1806,7 @@ const Datetime = class {
         const hasDatePresentation = presentation === 'date' || presentation === 'date-time' || presentation === 'time-date';
         const hasWheelVariant = hasDatePresentation && preferWheel;
         helpers.renderHiddenInput(true, el, name, data.formatValue(value), disabled);
-        return (index.h(index.Host, { key: 'efdbc0922670a841bc667ceac392cdc1dedffd01', "aria-disabled": disabled ? 'true' : null, onFocus: this.onFocus, onBlur: this.onBlur, class: Object.assign({}, theme.createColorClasses(color, {
+        return (index$1.h(index$1.Host, { key: '8490192beb6c5c6064ed8f2a7be2d51846f84f36', "aria-disabled": disabled ? 'true' : null, onFocus: this.onFocus, onBlur: this.onBlur, class: Object.assign({}, theme.createColorClasses(color, {
                 [mode]: true,
                 ['datetime-readonly']: readonly,
                 ['datetime-disabled']: disabled,
@@ -1900,32 +1816,49 @@ const Datetime = class {
                 [`datetime-size-${size}`]: true,
                 [`datetime-prefer-wheel`]: hasWheelVariant,
                 [`datetime-grid`]: isGridStyle,
-            })) }, index.h("div", { key: '3f8bb75fcb0baff55182ef3aa1b535eacc58d81f', class: "intersection-tracker", ref: (el) => (this.intersectionTrackerRef = el) }), this.renderDatetime(mode)));
+            })) }, index$1.h("div", { key: 'a2959c07ed871f9004a2f11ab1385a5a7b5737fd', class: "intersection-tracker", ref: (el) => (this.intersectionTrackerRef = el) }), this.renderDatetime(mode)));
     }
-    get el() { return index.getElement(this); }
+    get el() { return index$1.getElement(this); }
     static get watchers() { return {
-        "formatOptions": ["formatOptionsChanged"],
-        "disabled": ["disabledChanged"],
-        "min": ["minChanged"],
-        "max": ["maxChanged"],
-        "presentation": ["presentationChanged"],
-        "yearValues": ["yearValuesChanged"],
-        "monthValues": ["monthValuesChanged"],
-        "dayValues": ["dayValuesChanged"],
-        "hourValues": ["hourValuesChanged"],
-        "minuteValues": ["minuteValuesChanged"],
-        "value": ["valueChanged"]
+        "formatOptions": [{
+                "formatOptionsChanged": 0
+            }],
+        "disabled": [{
+                "disabledChanged": 0
+            }],
+        "min": [{
+                "minChanged": 0
+            }],
+        "max": [{
+                "maxChanged": 0
+            }],
+        "presentation": [{
+                "presentationChanged": 0
+            }],
+        "yearValues": [{
+                "yearValuesChanged": 0
+            }],
+        "monthValues": [{
+                "monthValuesChanged": 0
+            }],
+        "dayValues": [{
+                "dayValuesChanged": 0
+            }],
+        "hourValues": [{
+                "hourValuesChanged": 0
+            }],
+        "minuteValues": [{
+                "minuteValuesChanged": 0
+            }],
+        "value": [{
+                "valueChanged": 0
+            }]
     }; }
 };
 let datetimeIds = 0;
-const CANCEL_ROLE = 'datetime-cancel';
-const CONFIRM_ROLE = 'datetime-confirm';
-const WHEEL_ITEM_PART = 'wheel-item';
-const WHEEL_ITEM_ACTIVE_PART = `active`;
 Datetime.style = {
     ios: datetimeIosCss(),
     md: datetimeMdCss()
 };
 
 exports.ion_datetime = Datetime;
-//# sourceMappingURL=ion-datetime.entry.cjs.js.map