@ionic/core 8.0.0-dev.11712072527.1dd97c66 → 8.0.0-dev.11712932867.11504809

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

@@ -5,21 +5,20 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index$1 = require('./index-af6d0fbb.js');
+const index = require('./index-af6d0fbb.js');
 const focusVisible = require('./focus-visible-7a0ce04f.js');
 const helpers = require('./helpers-afaa9001.js');
-const index = require('./index-5915f9b3.js');
+const ionicGlobal = require('./ionic-global-2734c454.js');
 const dir = require('./dir-94c21456.js');
 const theme = require('./theme-d1c573d2.js');
-const index$2 = require('./index-073c7cdc.js');
-const ionicGlobal = require('./ionic-global-1adf9bc4.js');
-const data = require('./data-21dc0f81.js');
+const index$1 = require('./index-073c7cdc.js');
+const data = require('./data-99329b16.js');
 const lockController = require('./lock-controller-6585a42a.js');
-const overlays = require('./overlays-6487955a.js');
+const overlays = require('./overlays-a247b257.js');
 const animation = require('./animation-b4fdf128.js');
 const haptic = require('./haptic-f6b37aa3.js');
 require('./index-c8d52405.js');
-require('./hardware-back-button-ad9299b4.js');
+require('./hardware-back-button-6084a439.js');
 require('./framework-delegate-55f5683a.js');
 require('./gesture-controller-9436f482.js');
 require('./capacitor-c04564bf.js');
@@ -185,7 +184,7 @@ const getHighlightStyles = (highlightedDates, dateIsoString, el) => {
             return highlightedDates(dateIsoString);
         }
         catch (e) {
-            index.printIonError('Exception thrown from provided `highlightedDates` callback. Please check your function and try again.', el, e);
+            ionicGlobal.printIonError('Exception thrown from provided `highlightedDates` callback. Please check your function and try again.', el, e);
         }
     }
     return undefined;
@@ -202,7 +201,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('Datetime: "timeZone" and "timeZoneName" are not supported in "formatOptions".', el);
+        ionicGlobal.printIonWarning('Datetime: "timeZone" and "timeZoneName" are not supported in "formatOptions".', el);
     }
 };
 const checkForPresentationFormatMismatch = (el, presentation, formatOptions) => {
@@ -216,23 +215,26 @@ const checkForPresentationFormatMismatch = (el, presentation, formatOptions) =>
         case 'month':
         case 'year':
             if (formatOptions.date === undefined) {
-                index.printIonWarning(`Datetime: The '${presentation}' presentation requires a date object in formatOptions.`, el);
+                ionicGlobal.printIonWarning(`Datetime: The '${presentation}' presentation requires a date object in formatOptions.`, el);
             }
             break;
         case 'time':
             if (formatOptions.time === undefined) {
-                index.printIonWarning(`Datetime: The 'time' presentation requires a time object in formatOptions.`, el);
+                ionicGlobal.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(`Datetime: The '${presentation}' presentation requires either a date or time object (or both) in formatOptions.`, el);
+                ionicGlobal.printIonWarning(`Datetime: The '${presentation}' presentation requires either a date or time object (or both) in formatOptions.`, el);
             }
             break;
     }
 };
 
+const ionicDatetimeMdCss = ":host{display:-ms-flexbox;display:flex;-ms-flex-flow:column;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:-webkit-max-content;max-width:-moz-max-content;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{-ms-flex-order:3;order:3;text-align:end}:host .wheel-order-year-first .month-column{-ms-flex-order:2;order:2;text-align:end}:host .wheel-order-year-first .year-column{-ms-flex-order:1;order:1;text-align:start}:host .datetime-calendar,:host .datetime-year{display:-ms-flexbox;display:flex;-ms-flex:1 1 auto;flex:1 1 auto;-ms-flex-flow:column;flex-flow:column}:host(.show-month-and-year) .datetime-year{display:-ms-flexbox;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:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between}.datetime-action-buttons .datetime-action-buttons-container{display:-ms-flexbox;display:flex}:host .calendar-action-buttons{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;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:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1;-webkit-scroll-snap-type:x mandatory;-ms-scroll-snap-type:x mandatory;scroll-snap-type:x mandatory;overflow-x:scroll;overflow-y:hidden;scrollbar-width:none;outline:none}:host .calendar-body .calendar-month{display:-ms-flexbox;display:flex;-ms-flex-flow:column;flex-flow:column;scroll-snap-align:start;scroll-snap-stop:always;-ms-flex-negative:0;flex-shrink:0;width:100%}:host .calendar-body .calendar-month-disabled{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:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;min-width:0;min-height:0;overflow:visible}.calendar-day{border-radius:50%;-webkit-padding-start:0px;padding-inline-start:0px;-webkit-padding-end:0px;padding-inline-end:0px;padding-top:0px;padding-bottom:0px;-webkit-margin-start:0px;margin-inline-start:0px;-webkit-margin-end:0px;margin-inline-end:0px;margin-top:0px;margin-bottom:0px;display:-ms-flexbox;display:flex;position:relative;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;border:none;outline:none;background:none;color:currentColor;font-family:var(--ion-font-family, inherit);cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;z-index:0}:host .calendar-day[disabled]{pointer-events:none;opacity:0.4}.calendar-day:focus{background:rgba(var(--ion-color-base-rgb), 0.2);-webkit-box-shadow:0px 0px 0px 4px rgba(var(--ion-color-base-rgb), 0.2);box-shadow:0px 0px 0px 4px rgba(var(--ion-color-base-rgb), 0.2)}:host .datetime-time{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;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:-ms-flexbox;display:flex;-ms-flex-align:center;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:-ms-flexbox;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;-webkit-appearance:none;-moz-appearance:none;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;-webkit-transition:opacity 15ms linear, background-color 15ms linear;transition:opacity 15ms linear, background-color 15ms linear;z-index:-1}.calendar-month-year-toggle.ion-focused::after{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;-ms-flex-negative:0;flex-shrink:0}.calendar-month-year-toggle #toggle-wrapper{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;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{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, 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:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:end;justify-content:flex-end}";
+const IonDatetimeIonicStyle0 = ionicDatetimeMdCss;
+
 const datetimeIosCss = ":host{display:-ms-flexbox;display:flex;-ms-flex-flow:column;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:-webkit-max-content;max-width:-moz-max-content;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{-ms-flex-order:3;order:3;text-align:end}:host .wheel-order-year-first .month-column{-ms-flex-order:2;order:2;text-align:end}:host .wheel-order-year-first .year-column{-ms-flex-order:1;order:1;text-align:start}:host .datetime-calendar,:host .datetime-year{display:-ms-flexbox;display:flex;-ms-flex:1 1 auto;flex:1 1 auto;-ms-flex-flow:column;flex-flow:column}:host(.show-month-and-year) .datetime-year{display:-ms-flexbox;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:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between}.datetime-action-buttons .datetime-action-buttons-container{display:-ms-flexbox;display:flex}:host .calendar-action-buttons{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;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:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1;-webkit-scroll-snap-type:x mandatory;-ms-scroll-snap-type:x mandatory;scroll-snap-type:x mandatory;overflow-x:scroll;overflow-y:hidden;scrollbar-width:none;outline:none}:host .calendar-body .calendar-month{display:-ms-flexbox;display:flex;-ms-flex-flow:column;flex-flow:column;scroll-snap-align:start;scroll-snap-stop:always;-ms-flex-negative:0;flex-shrink:0;width:100%}:host .calendar-body .calendar-month-disabled{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:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;min-width:0;min-height:0;overflow:visible}.calendar-day{border-radius:50%;-webkit-padding-start:0px;padding-inline-start:0px;-webkit-padding-end:0px;padding-inline-end:0px;padding-top:0px;padding-bottom:0px;-webkit-margin-start:0px;margin-inline-start:0px;-webkit-margin-end:0px;margin-inline-end:0px;margin-top:0px;margin-bottom:0px;display:-ms-flexbox;display:flex;position:relative;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;border:none;outline:none;background:none;color:currentColor;font-family:var(--ion-font-family, inherit);cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;z-index:0}:host .calendar-day[disabled]{pointer-events:none;opacity:0.4}.calendar-day:focus{background:rgba(var(--ion-color-base-rgb), 0.2);-webkit-box-shadow:0px 0px 0px 4px rgba(var(--ion-color-base-rgb), 0.2);box-shadow:0px 0px 0px 4px rgba(var(--ion-color-base-rgb), 0.2)}:host .datetime-time{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;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:-ms-flexbox;display:flex;-ms-flex-align:center;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:-ms-flexbox;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;-webkit-appearance:none;-moz-appearance:none;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;-webkit-transition:opacity 15ms linear, background-color 15ms linear;transition:opacity 15ms linear, background-color 15ms linear;z-index:-1}.calendar-month-year-toggle.ion-focused::after{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;-ms-flex-negative:0;flex-shrink:0}.calendar-month-year-toggle #toggle-wrapper{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;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;-ms-flex-align:center;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{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, var(--ion-background-color-step-200, #cccccc))}:host .datetime-buttons ::slotted(ion-buttons),:host .datetime-buttons ion-buttons{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between}:host .datetime-action-buttons{width:100%}";
 const IonDatetimeIosStyle0 = datetimeIosCss;
 
@@ -241,14 +243,14 @@ const IonDatetimeMdStyle0 = datetimeMdCss;
 
 const Datetime = class {
     constructor(hostRef) {
-        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);
+        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);
         this.inputId = `ion-dt-${datetimeIds++}`;
         this.prevPresentation = null;
         this.warnIfIncorrectValueUsage = () => {
@@ -262,7 +264,7 @@ const Datetime = class {
                  * Default toString() behavior: a,b
                  * Custom behavior: ['a', 'b']
                  */
-                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".
+                ionicGlobal.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);
@@ -291,10 +293,10 @@ const Datetime = class {
             const { activeParts } = this;
             return Array.isArray(activeParts) ? activeParts[0] : activeParts;
         };
-        this.closeParentOverlay = () => {
+        this.closeParentOverlay = (role) => {
             const popoverOrModal = this.el.closest('ion-modal, ion-popover');
             if (popoverOrModal) {
-                popoverOrModal.dismiss();
+                popoverOrModal.dismiss(undefined, role);
             }
         };
         this.setWorkingParts = (parts) => {
@@ -511,7 +513,7 @@ const Datetime = class {
              * scrollIntoView() will scroll entire page
              * if element is not in viewport. Use scrollLeft instead.
              */
-            index$1.writeTask(() => {
+            index.writeTask(() => {
                 calendarBodyRef.scrollLeft = startMonth.clientWidth * (dir.isRTL(this.el) ? -1 : 1);
                 const getChangedMonth = (parts) => {
                     const box = calendarBodyRef.getBoundingClientRect();
@@ -602,7 +604,7 @@ const Datetime = class {
                      * but older/slower device may have a flicker
                      * if we did not do this.
                      */
-                    index$1.writeTask(() => {
+                    index.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');
@@ -964,7 +966,7 @@ const Datetime = class {
             }
         }
         if (closeOverlay) {
-            this.closeParentOverlay();
+            this.closeParentOverlay(CONFIRM_ROLE);
         }
     }
     /**
@@ -984,7 +986,7 @@ const Datetime = class {
     async cancel(closeOverlay = false) {
         this.ionCancel.emit();
         if (closeOverlay) {
-            this.closeParentOverlay();
+            this.closeParentOverlay(CANCEL_ROLE);
         }
     }
     get isCalendarPicker() {
@@ -1027,7 +1029,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$1.writeTask(() => {
+            index.writeTask(() => {
                 this.el.classList.add('datetime-ready');
             });
         };
@@ -1060,7 +1062,7 @@ const Datetime = class {
              * As a result, the wrong month will be shown.
              */
             this.showMonthAndYear = false;
-            index$1.writeTask(() => {
+            index.writeTask(() => {
                 this.el.classList.remove('datetime-ready');
             });
         };
@@ -1142,18 +1144,18 @@ const Datetime = class {
         const { el, formatOptions, highlightedDates, multiple, presentation, preferWheel } = this;
         if (multiple) {
             if (presentation !== 'date') {
-                index.printIonWarning('Multiple date selection is only supported for presentation="date".', el);
+                ionicGlobal.printIonWarning('Multiple date selection is only supported for presentation="date".', el);
             }
             if (preferWheel) {
-                index.printIonWarning('Multiple date selection is not supported with preferWheel="true".', el);
+                ionicGlobal.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('The highlightedDates property is only supported with the date, date-time, and time-date presentations.', el);
+                ionicGlobal.printIonWarning('The highlightedDates property is only supported with the date, date-time, and time-date presentations.', el);
             }
             if (preferWheel) {
-                index.printIonWarning('The highlightedDates property is not supported with preferWheel="true".', el);
+                ionicGlobal.printIonWarning('The highlightedDates property is not supported with preferWheel="true".', el);
             }
         }
         if (formatOptions) {
@@ -1216,10 +1218,10 @@ const Datetime = class {
          * OK - Dismisses the datetime and
          * updates the `value` prop.
          */
-        return (index$1.h("div", { class: "datetime-footer" }, index$1.h("div", { class: "datetime-buttons" }, index$1.h("div", { class: {
+        return (index.h("div", { class: "datetime-footer" }, index.h("div", { class: "datetime-buttons" }, index.h("div", { class: {
                 ['datetime-action-buttons']: true,
                 ['has-clear-button']: this.showClearButton,
-            } }, 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)))))))));
+            } }, 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)))))))));
     }
     /**
      * Wheel picker render methods
@@ -1237,7 +1239,7 @@ const Datetime = class {
         const renderArray = forcePresentation === 'time-date'
             ? [this.renderTimePickerColumns(forcePresentation), this.renderDatePickerColumns(forcePresentation)]
             : [this.renderDatePickerColumns(forcePresentation), this.renderTimePickerColumns(forcePresentation)];
-        return index$1.h("ion-picker", null, renderArray);
+        return index.h("ion-picker", null, renderArray);
     }
     renderDatePickerColumns(forcePresentation) {
         return forcePresentation === 'date-time' || forcePresentation === 'time-date'
@@ -1272,8 +1274,8 @@ const Datetime = class {
         let items = result.items;
         const parts = result.parts;
         if (isDateEnabled) {
-            items = items.map((itemObject, index$1) => {
-                const referenceParts = parts[index$1];
+            items = items.map((itemObject, index) => {
+                const referenceParts = parts[index];
                 let disabled;
                 try {
                     /**
@@ -1284,7 +1286,7 @@ const Datetime = class {
                     disabled = !isDateEnabled(data.convertDataToISO(referenceParts));
                 }
                 catch (e) {
-                    index.printIonError('Exception thrown from provided `isDateEnabled` function. Please check your function and try again.', e);
+                    ionicGlobal.printIonError('Exception thrown from provided `isDateEnabled` function. Please check your function and try again.', e);
                 }
                 return Object.assign(Object.assign({}, itemObject), { disabled });
             });
@@ -1296,13 +1298,13 @@ const Datetime = class {
         const todayString = workingParts.day !== null
             ? `${workingParts.year}-${workingParts.month}-${workingParts.day}`
             : `${defaultParts.year}-${defaultParts.month}-${defaultParts.day}`;
-        return (index$1.h("ion-picker-column", { class: "date-column", color: this.color, disabled: disabled, value: todayString, onIonChange: (ev) => {
+        return (index.h("ion-picker-column", { class: "date-column", color: this.color, disabled: disabled, value: todayString, onIonChange: (ev) => {
                 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));
                 ev.stopPropagation();
-            } }, items.map((item) => (index$1.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)))));
+            } }, 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;
@@ -1333,7 +1335,7 @@ const Datetime = class {
                     disabled = !isDateEnabled(data.convertDataToISO(referenceParts));
                 }
                 catch (e) {
-                    index.printIonError('Exception thrown from provided `isDateEnabled` function. Please check your function and try again.', e);
+                    ionicGlobal.printIonError('Exception thrown from provided `isDateEnabled` function. Please check your function and try again.', e);
                 }
                 return Object.assign(Object.assign({}, dayObject), { disabled });
             });
@@ -1371,11 +1373,11 @@ 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$1.h("ion-picker-column", { class: "day-column", color: this.color, disabled: disabled, value: pickerColumnValue, onIonChange: (ev) => {
+        return (index.h("ion-picker-column", { class: "day-column", color: this.color, disabled: disabled, value: pickerColumnValue, onIonChange: (ev) => {
                 this.setWorkingParts(Object.assign(Object.assign({}, workingParts), { day: ev.detail.value }));
                 this.setActiveParts(Object.assign(Object.assign({}, activePart), { day: ev.detail.value }));
                 ev.stopPropagation();
-            } }, days.map((day) => (index$1.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)))));
+            } }, 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) {
@@ -1383,11 +1385,11 @@ const Datetime = class {
         }
         const { disabled, workingParts } = this;
         const activePart = this.getActivePartsWithFallback();
-        return (index$1.h("ion-picker-column", { class: "month-column", color: this.color, disabled: disabled, value: workingParts.month, onIonChange: (ev) => {
+        return (index.h("ion-picker-column", { class: "month-column", color: this.color, disabled: disabled, value: workingParts.month, onIonChange: (ev) => {
                 this.setWorkingParts(Object.assign(Object.assign({}, workingParts), { month: ev.detail.value }));
                 this.setActiveParts(Object.assign(Object.assign({}, activePart), { month: ev.detail.value }));
                 ev.stopPropagation();
-            } }, months.map((month) => (index$1.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)))));
+            } }, 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) {
@@ -1395,11 +1397,11 @@ const Datetime = class {
         }
         const { disabled, workingParts } = this;
         const activePart = this.getActivePartsWithFallback();
-        return (index$1.h("ion-picker-column", { class: "year-column", color: this.color, disabled: disabled, value: workingParts.year, onIonChange: (ev) => {
+        return (index.h("ion-picker-column", { class: "year-column", color: this.color, disabled: disabled, value: workingParts.year, onIonChange: (ev) => {
                 this.setWorkingParts(Object.assign(Object.assign({}, workingParts), { year: ev.detail.value }));
                 this.setActiveParts(Object.assign(Object.assign({}, activePart), { year: ev.detail.value }));
                 ev.stopPropagation();
-            } }, years.map((year) => (index$1.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)))));
+            } }, 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)) {
@@ -1428,22 +1430,22 @@ const Datetime = class {
         if (hoursData.length === 0)
             return [];
         const activePart = this.getActivePartsWithFallback();
-        return (index$1.h("ion-picker-column", { color: this.color, disabled: disabled, value: activePart.hour, numericInput: true, onIonChange: (ev) => {
+        return (index.h("ion-picker-column", { color: this.color, disabled: disabled, value: activePart.hour, numericInput: true, onIonChange: (ev) => {
                 this.setWorkingParts(Object.assign(Object.assign({}, workingParts), { hour: ev.detail.value }));
                 this.setActiveParts(Object.assign(Object.assign({}, activePart), { hour: ev.detail.value }));
                 ev.stopPropagation();
-            } }, hoursData.map((hour) => (index$1.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)))));
+            } }, 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$1.h("ion-picker-column", { color: this.color, disabled: disabled, value: activePart.minute, numericInput: true, onIonChange: (ev) => {
+        return (index.h("ion-picker-column", { color: this.color, disabled: disabled, value: activePart.minute, numericInput: true, onIonChange: (ev) => {
                 this.setWorkingParts(Object.assign(Object.assign({}, workingParts), { minute: ev.detail.value }));
                 this.setActiveParts(Object.assign(Object.assign({}, activePart), { minute: ev.detail.value }));
                 ev.stopPropagation();
-            } }, minutesData.map((minute) => (index$1.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)))));
+            } }, 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;
@@ -1452,38 +1454,38 @@ const Datetime = class {
         }
         const activePart = this.getActivePartsWithFallback();
         const isDayPeriodRTL = data.isLocaleDayPeriodRTL(this.locale);
-        return (index$1.h("ion-picker-column", { style: isDayPeriodRTL ? { order: '-1' } : {}, color: this.color, disabled: disabled, value: activePart.ampm, onIonChange: (ev) => {
+        return (index.h("ion-picker-column", { style: isDayPeriodRTL ? { order: '-1' } : {}, color: this.color, disabled: disabled, value: activePart.ampm, 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({}, activePart), { ampm: ev.detail.value, hour }));
                 ev.stopPropagation();
-            } }, dayPeriodData.map((dayPeriod) => (index$1.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)))));
+            } }, 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$1.h("div", { class: {
+        return (index.h("div", { class: {
                 [`wheel-order-${columnOrder}`]: true,
             } }, this.renderWheelPicker(forcePresentation)));
     }
     /**
      * Grid Render Methods
      */
-    renderCalendarHeader(mode) {
+    renderCalendarHeader(theme) {
         const { disabled } = this;
-        const expandedIcon = mode === 'ios' ? index$2.chevronDown : index$2.caretUpSharp;
-        const collapsedIcon = mode === 'ios' ? index$2.chevronForward : index$2.caretDownSharp;
+        const expandedIcon = theme === 'ios' ? index$1.chevronDown : index$1.caretUpSharp;
+        const collapsedIcon = theme === 'ios' ? index$1.chevronForward : index$1.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$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("button", { class: {
+        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$1.h("span", { id: "toggle-wrapper" }, data.getMonthAndYear(this.locale, this.workingParts), index$1.h("ion-icon", { "aria-hidden": "true", icon: this.showMonthAndYear ? expandedIcon : collapsedIcon, lazy: false, flipRtl: true })), mode === 'md' && index$1.h("ion-ripple-effect", null))), 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);
+            }, 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 })), theme === '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, theme, this.firstDayOfWeek % 7).map((d) => {
+            return index.h("div", { class: "day-of-week" }, d);
         }))));
     }
     renderMonth(month, year) {
@@ -1509,11 +1511,11 @@ const Datetime = class {
         // can free-scroll the calendar.
         const isWorkingMonth = this.workingParts.month === month && this.workingParts.year === year;
         const activePart = this.getActivePartsWithFallback();
-        return (index$1.h("div", { "aria-hidden": !isWorkingMonth ? 'true' : null, class: {
+        return (index.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$1.h("div", { class: "calendar-month-grid" }, data.getDaysOfMonth(month, year, this.firstDayOfWeek % 7).map((dateObject, index$2) => {
+            } }, index.h("div", { class: "calendar-month-grid" }, data.getDaysOfMonth(month, year, this.firstDayOfWeek % 7).map((dateObject, index$1) => {
             const { day, dayOfWeek } = dateObject;
             const { el, highlightedDates, isDateEnabled, multiple } = this;
             const referenceParts = { month, day, year };
@@ -1531,7 +1533,7 @@ const Datetime = class {
                     isCalDayDisabled = !isDateEnabled(dateIsoString);
                 }
                 catch (e) {
-                    index.printIonError('Exception thrown from provided `isDateEnabled` function. Please check your function and try again.', el, e);
+                    ionicGlobal.printIonError('Exception thrown from provided `isDateEnabled` function. Please check your function and try again.', el, e);
                 }
             }
             /**
@@ -1555,7 +1557,7 @@ const Datetime = class {
             if (!isCalendarPadding) {
                 dateParts = `calendar-day${isActive ? ' active' : ''}${isToday ? ' today' : ''}${isCalDayDisabled ? ' disabled' : ''}`;
             }
-            return (index$1.h("div", { class: "calendar-day-wrapper" }, index$1.h("button", {
+            return (index.h("div", { class: "calendar-day-wrapper" }, index.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
@@ -1567,7 +1569,7 @@ const Datetime = class {
                         el.style.setProperty('color', `${dateStyle ? dateStyle.textColor : ''}`, 'important');
                         el.style.setProperty('background-color', `${dateStyle ? dateStyle.backgroundColor : ''}`, 'important');
                     }
-                }, tabindex: "-1", "data-day": day, "data-month": month, "data-year": year, "data-index": index$2, "data-day-of-week": dayOfWeek, disabled: isButtonDisabled, class: {
+                }, tabindex: "-1", "data-day": day, "data-month": month, "data-year": year, "data-index": index$1, "data-day-of-week": dayOfWeek, disabled: isButtonDisabled, class: {
                     'calendar-day-padding': isCalendarPadding,
                     'calendar-day': true,
                     'calendar-day-active': isActive,
@@ -1598,27 +1600,27 @@ const Datetime = class {
         }))));
     }
     renderCalendarBody() {
-        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 (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 this.renderMonth(month, year);
         })));
     }
-    renderCalendar(mode) {
-        return (index$1.h("div", { class: "datetime-calendar", key: "datetime-calendar" }, this.renderCalendarHeader(mode), this.renderCalendarBody()));
+    renderCalendar(theme) {
+        return (index.h("div", { class: "datetime-calendar", key: "datetime-calendar" }, this.renderCalendarHeader(theme), this.renderCalendarBody()));
     }
     renderTimeLabel() {
         const hasSlottedTimeLabel = this.el.querySelector('[slot="time-label"]') !== null;
         if (!hasSlottedTimeLabel && !this.showDefaultTimeLabel) {
             return;
         }
-        return index$1.h("slot", { name: "time-label" }, "Time");
+        return index.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$1.h("div", { class: "time-header" }, this.renderTimeLabel()),
-            index$1.h("button", { class: {
+            index.h("div", { class: "time-header" }, this.renderTimeLabel()),
+            index.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) => {
@@ -1634,7 +1636,7 @@ const Datetime = class {
                         this.isTimePopoverOpen = false;
                     }
                 } }, data.getLocalizedTime(locale, activePart, computedHourCycle, formatOptions === null || formatOptions === void 0 ? void 0 : formatOptions.time)),
-            index$1.h("ion-popover", { alignment: "center", translucent: true, overlayIndex: 1, arrow: false, onWillPresent: (ev) => {
+            index.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
@@ -1667,7 +1669,7 @@ const Datetime = class {
                     headerText = titleSelectedDatesFormatter(data.convertDataToISO(activeParts));
                 }
                 catch (e) {
-                    index.printIonError('Exception in provided `titleSelectedDatesFormatter`: ', e);
+                    ionicGlobal.printIonError('Exception in provided `titleSelectedDatesFormatter`: ', e);
                 }
             }
         }
@@ -1682,7 +1684,7 @@ const Datetime = class {
         if (!hasSlottedTitle && !this.showDefaultTitle) {
             return;
         }
-        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())));
+        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())));
     }
     /**
      * Render time picker inside of datetime.
@@ -1694,7 +1696,7 @@ const Datetime = class {
     renderTime() {
         const { presentation } = this;
         const timeOnlyPresentation = presentation === 'time';
-        return (index$1.h("div", { class: "datetime-time" }, timeOnlyPresentation ? this.renderWheelPicker() : this.renderTimeOverlay()));
+        return (index.h("div", { class: "datetime-time" }, timeOnlyPresentation ? this.renderWheelPicker() : this.renderTimeOverlay()));
     }
     /**
      * Renders the month/year picker that is
@@ -1705,13 +1707,13 @@ const Datetime = class {
      * toggle in the calendar header.
      */
     renderCalendarViewMonthYearPicker() {
-        return index$1.h("div", { class: "datetime-year" }, this.renderWheelView('month-year'));
+        return index.h("div", { class: "datetime-year" }, this.renderWheelView('month-year'));
     }
     /**
      * Render entry point
      * All presentation types are rendered from here.
      */
-    renderDatetime(mode) {
+    renderDatetime(theme) {
         const { presentation, preferWheel } = this;
         /**
          * Certain presentation types have separate grid and wheel displays.
@@ -1725,7 +1727,7 @@ const Datetime = class {
             case 'date-time':
                 return [
                     this.renderHeader(),
-                    this.renderCalendar(mode),
+                    this.renderCalendar(theme),
                     this.renderCalendarViewMonthYearPicker(),
                     this.renderTime(),
                     this.renderFooter(),
@@ -1734,7 +1736,7 @@ const Datetime = class {
                 return [
                     this.renderHeader(),
                     this.renderTime(),
-                    this.renderCalendar(mode),
+                    this.renderCalendar(theme),
                     this.renderCalendarViewMonthYearPicker(),
                     this.renderFooter(),
                 ];
@@ -1747,7 +1749,7 @@ const Datetime = class {
             default:
                 return [
                     this.renderHeader(),
-                    this.renderCalendar(mode),
+                    this.renderCalendar(theme),
                     this.renderCalendarViewMonthYearPicker(),
                     this.renderFooter(),
                 ];
@@ -1755,15 +1757,15 @@ const Datetime = class {
     }
     render() {
         const { name, value, disabled, el, color, readonly, showMonthAndYear, preferWheel, presentation, size, isGridStyle, } = this;
-        const mode = ionicGlobal.getIonMode(this);
+        const theme$1 = ionicGlobal.getIonTheme(this);
         const isMonthAndYearPresentation = presentation === 'year' || presentation === 'month' || presentation === 'month-year';
         const shouldShowMonthAndYear = showMonthAndYear || isMonthAndYearPresentation;
         const monthYearPickerOpen = showMonthAndYear && !isMonthAndYearPresentation;
         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$1.h(index$1.Host, { key: '89de4c9f54e7c11038c62ecaa2e90aea47948393', "aria-disabled": disabled ? 'true' : null, onFocus: this.onFocus, onBlur: this.onBlur, class: Object.assign({}, theme.createColorClasses(color, {
-                [mode]: true,
+        return (index.h(index.Host, { key: 'e3d716bf7a1613d6b4d458809c1ce0951bed5c79', "aria-disabled": disabled ? 'true' : null, onFocus: this.onFocus, onBlur: this.onBlur, class: Object.assign({}, theme.createColorClasses(color, {
+                [theme$1]: true,
                 ['datetime-readonly']: readonly,
                 ['datetime-disabled']: disabled,
                 'show-month-and-year': shouldShowMonthAndYear,
@@ -1772,9 +1774,9 @@ const Datetime = class {
                 [`datetime-size-${size}`]: true,
                 [`datetime-prefer-wheel`]: hasWheelVariant,
                 [`datetime-grid`]: isGridStyle,
-            })) }, index$1.h("div", { key: 'b9de6cc68dc7b7773bb408fd55a7d1872460a5f9', class: "intersection-tracker", ref: (el) => (this.intersectionTrackerRef = el) }), this.renderDatetime(mode)));
+            })) }, index.h("div", { key: '4de2a99b47ddb7d9522a632af6b2f28009fa92bc', class: "intersection-tracker", ref: (el) => (this.intersectionTrackerRef = el) }), this.renderDatetime(theme$1)));
     }
-    get el() { return index$1.getElement(this); }
+    get el() { return index.getElement(this); }
     static get watchers() { return {
         "formatOptions": ["formatOptionsChanged"],
         "disabled": ["disabledChanged"],
@@ -1790,9 +1792,12 @@ const Datetime = class {
     }; }
 };
 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 = {
+    ionic: IonDatetimeIonicStyle0,
     ios: IonDatetimeIosStyle0,
     md: IonDatetimeMdStyle0
 };
@@ -1849,15 +1854,15 @@ const IonPickerLegacyMdStyle0 = pickerMdCss;
 
 const Picker = class {
     constructor(hostRef) {
-        index$1.registerInstance(this, hostRef);
-        this.didPresent = index$1.createEvent(this, "ionPickerDidPresent", 7);
-        this.willPresent = index$1.createEvent(this, "ionPickerWillPresent", 7);
-        this.willDismiss = index$1.createEvent(this, "ionPickerWillDismiss", 7);
-        this.didDismiss = index$1.createEvent(this, "ionPickerDidDismiss", 7);
-        this.didPresentShorthand = index$1.createEvent(this, "didPresent", 7);
-        this.willPresentShorthand = index$1.createEvent(this, "willPresent", 7);
-        this.willDismissShorthand = index$1.createEvent(this, "willDismiss", 7);
-        this.didDismissShorthand = index$1.createEvent(this, "didDismiss", 7);
+        index.registerInstance(this, hostRef);
+        this.didPresent = index.createEvent(this, "ionPickerDidPresent", 7);
+        this.willPresent = index.createEvent(this, "ionPickerWillPresent", 7);
+        this.willDismiss = index.createEvent(this, "ionPickerWillDismiss", 7);
+        this.didDismiss = index.createEvent(this, "ionPickerDidDismiss", 7);
+        this.didPresentShorthand = index.createEvent(this, "didPresent", 7);
+        this.willPresentShorthand = index.createEvent(this, "willPresent", 7);
+        this.willDismissShorthand = index.createEvent(this, "willDismiss", 7);
+        this.didDismissShorthand = index.createEvent(this, "didDismiss", 7);
         this.delegateController = overlays.createDelegateController(this);
         this.lockController = lockController.createLockController();
         this.triggerController = overlays.createTriggerController();
@@ -1914,7 +1919,7 @@ const Picker = class {
         overlays.setOverlayId(this.el);
     }
     componentDidLoad() {
-        index.printIonWarning('ion-picker-legacy and ion-picker-legacy-column have been deprecated in favor of new versions of the ion-picker and ion-picker-column components. These new components display inline with your page content allowing for more presentation flexibility than before.', this.el);
+        ionicGlobal.printIonWarning('ion-picker-legacy and ion-picker-legacy-column have been deprecated in favor of new versions of the ion-picker and ion-picker-column components. These new components display inline with your page content allowing for more presentation flexibility than before.', this.el);
         /**
          * If picker was rendered with isOpen="true"
          * then we should open picker immediately.
@@ -2023,14 +2028,14 @@ const Picker = class {
     }
     render() {
         const { htmlAttributes } = this;
-        const mode = ionicGlobal.getIonMode(this);
-        return (index$1.h(index$1.Host, Object.assign({ key: '1cf2f8a25a3eca7ac59eff969803c85540f102fc', "aria-modal": "true", tabindex: "-1" }, htmlAttributes, { style: {
+        const theme$1 = ionicGlobal.getIonTheme(this);
+        return (index.h(index.Host, Object.assign({ key: 'd988de06290eb92ff6f7be07959780d0d19fadb3', "aria-modal": "true", tabindex: "-1" }, htmlAttributes, { style: {
                 zIndex: `${20000 + this.overlayIndex}`,
-            }, class: Object.assign({ [mode]: true,
+            }, class: Object.assign({ [theme$1]: true,
                 // Used internally for styling
-                [`picker-${mode}`]: true, 'overlay-hidden': true }, theme.getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonPickerWillDismiss: this.dispatchCancelHandler }), index$1.h("ion-backdrop", { key: '3a70c7c6e0457afda2e9ef4619cb253b583b7805', visible: this.showBackdrop, tappable: this.backdropDismiss }), index$1.h("div", { key: '4c90cf7dfeb9d2bdb5e947739864dbc2d1e327e0', tabindex: "0" }), index$1.h("div", { key: '050098ced341fd86bfcd72595b1f7a52c3b01b46', class: "picker-wrapper ion-overlay-wrapper", role: "dialog" }, index$1.h("div", { key: 'b0d9420fb053d0c71af04c88224a38f804fd99ba', class: "picker-toolbar" }, this.buttons.map((b) => (index$1.h("div", { class: buttonWrapperClass(b) }, index$1.h("button", { type: "button", onClick: () => this.buttonClick(b), class: buttonClass(b) }, b.text))))), index$1.h("div", { key: '82cd2788c394079cb8843c240c17e3629eef0953', class: "picker-columns" }, index$1.h("div", { key: '34d2ce59e88b5967e52fe8077ef3a151c6ce38e5', class: "picker-above-highlight" }), this.presented && this.columns.map((c) => index$1.h("ion-picker-legacy-column", { col: c })), index$1.h("div", { key: 'b604b101bc0006efc246aea9320d9f44419c531f', class: "picker-below-highlight" }))), index$1.h("div", { key: '70437d735b009386b4f5ae250b555c039c366183', tabindex: "0" })));
+                [`picker-${theme$1}`]: true, 'overlay-hidden': true }, theme.getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonPickerWillDismiss: this.dispatchCancelHandler }), index.h("ion-backdrop", { key: '17f85a6ff9c41b38de985d86e58f0f91315c767e', visible: this.showBackdrop, tappable: this.backdropDismiss }), index.h("div", { key: '46358c402039738cdf47496228564b8f836ca1ca', tabindex: "0" }), index.h("div", { key: 'fb6a2892d259042a10fb1766bb0e1fce6a048e2b', class: "picker-wrapper ion-overlay-wrapper", role: "dialog" }, index.h("div", { key: '082583fd8895f1f12de7a4761af718c886ad1c89', class: "picker-toolbar" }, this.buttons.map((b) => (index.h("div", { class: buttonWrapperClass(b) }, index.h("button", { type: "button", onClick: () => this.buttonClick(b), class: buttonClass(b) }, b.text))))), index.h("div", { key: 'b6d169cbe219ada5875c818e1fbff2b3b8e75343', class: "picker-columns" }, index.h("div", { key: '3598b21e94c321adfffb83778ddc3ac9f5c7daba', class: "picker-above-highlight" }), this.presented && this.columns.map((c) => index.h("ion-picker-legacy-column", { col: c })), index.h("div", { key: 'afbd8f751a842f52d1fe23fc409b01f5074e0f57', class: "picker-below-highlight" }))), index.h("div", { key: '248251b4ddfed8078ce242e5ce52b53caa49ccf0', tabindex: "0" })));
     }
-    get el() { return index$1.getElement(this); }
+    get el() { return index.getElement(this); }
     static get watchers() { return {
         "isOpen": ["onIsOpenChange"],
         "trigger": ["triggerChanged"]
@@ -2058,8 +2063,8 @@ const IonPickerLegacyColumnMdStyle0 = pickerColumnMdCss;
 
 const PickerColumnCmp = class {
     constructor(hostRef) {
-        index$1.registerInstance(this, hostRef);
-        this.ionPickerColChange = index$1.createEvent(this, "ionPickerColChange", 7);
+        index.registerInstance(this, hostRef);
+        this.ionPickerColChange = index.createEvent(this, "ionPickerColChange", 7);
         this.optHeight = 0;
         this.rotateFactor = 0;
         this.scaleFactor = 1;
@@ -2384,12 +2389,12 @@ const PickerColumnCmp = class {
     }
     render() {
         const col = this.col;
-        const mode = ionicGlobal.getIonMode(this);
-        return (index$1.h(index$1.Host, { key: '0337ac8379be177501b8d61f0ac0f68ecbb8344d', class: Object.assign({ [mode]: true, 'picker-col': true, 'picker-opts-left': this.col.align === 'left', 'picker-opts-right': this.col.align === 'right' }, theme.getClassMap(col.cssClass)), style: {
+        const theme$1 = ionicGlobal.getIonTheme(this);
+        return (index.h(index.Host, { key: 'b8c99747752c30cc7dbd4e63c6a10e1b713b0958', class: Object.assign({ [theme$1]: true, 'picker-col': true, 'picker-opts-left': this.col.align === 'left', 'picker-opts-right': this.col.align === 'right' }, theme.getClassMap(col.cssClass)), style: {
                 'max-width': this.col.columnWidth,
-            } }, col.prefix && (index$1.h("div", { class: "picker-prefix", style: { width: col.prefixWidth } }, col.prefix)), index$1.h("div", { key: '013ba8ea1c2fe4fe717386b9cc87484913c234f7', class: "picker-opts", style: { maxWidth: col.optionsWidth }, ref: (el) => (this.optsEl = el) }, col.options.map((o, index) => (index$1.h("button", { "aria-label": o.ariaLabel, class: { 'picker-opt': true, 'picker-opt-disabled': !!o.disabled }, "opt-index": index }, o.text)))), col.suffix && (index$1.h("div", { class: "picker-suffix", style: { width: col.suffixWidth } }, col.suffix))));
+            } }, col.prefix && (index.h("div", { class: "picker-prefix", style: { width: col.prefixWidth } }, col.prefix)), index.h("div", { key: '5f22527170ea87eacfff014b5ef8f0ba48a116b8', class: "picker-opts", style: { maxWidth: col.optionsWidth }, ref: (el) => (this.optsEl = el) }, col.options.map((o, index$1) => (index.h("button", { "aria-label": o.ariaLabel, class: { 'picker-opt': true, 'picker-opt-disabled': !!o.disabled }, "opt-index": index$1 }, o.text)))), col.suffix && (index.h("div", { class: "picker-suffix", style: { width: col.suffixWidth } }, col.suffix))));
     }
-    get el() { return index$1.getElement(this); }
+    get el() { return index.getElement(this); }
     static get watchers() { return {
         "col": ["colChanged"]
     }; }