voyager-ionic-core 7.7.3 → 7.8.6

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

@@ -5,12 +5,12 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-0ffe376d.js');
+const index = require('./index-22617dd6.js');
 const formController = require('./form-controller-c83330c0.js');
 const helpers = require('./helpers-da4c0ed1.js');
 const index$1 = require('./index-5915f9b3.js');
 const theme = require('./theme-d1c573d2.js');
-const ionicGlobal = require('./ionic-global-59a10130.js');
+const ionicGlobal = require('./ionic-global-c5503e93.js');
 
 const checkboxIosCss = ":host{--checkbox-background-checked:var(--ion-color-primary, #3880ff);--border-color-checked:var(--ion-color-primary, #3880ff);--checkmark-color:var(--ion-color-primary-contrast, #fff);--checkmark-width:1;--transition:none;display:inline-block;position:relative;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:2}:host(.in-item){width:100%;height:100%}:host([slot=start]:not(.legacy-checkbox)),:host([slot=end]:not(.legacy-checkbox)){width:auto}:host(.legacy-checkbox){width:var(--size);height:var(--size)}:host(.ion-color){--checkbox-background-checked:var(--ion-color-base);--border-color-checked:var(--ion-color-base);--checkmark-color:var(--ion-color-contrast)}:host(.legacy-checkbox) label{top:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;position:absolute;width:100%;height:100%;border:0;background:transparent;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:none;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;opacity:0}@supports (inset-inline-start: 0){:host(.legacy-checkbox) label{inset-inline-start:0}}@supports not (inset-inline-start: 0){:host(.legacy-checkbox) label{left:0}:host-context([dir=rtl]):host(.legacy-checkbox) label,:host-context([dir=rtl]).legacy-checkbox label{left:unset;right:unset;right:0}@supports selector(:dir(rtl)){:host(.legacy-checkbox:dir(rtl)) label{left:unset;right:unset;right:0}}}:host(.legacy-checkbox) label::-moz-focus-inner{border:0}.checkbox-wrapper{display:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1;-ms-flex-align:center;align-items:center;height:inherit;cursor:inherit}.label-text-wrapper{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}:host(.in-item:not(.legacy-checkbox)) .label-text-wrapper{margin-top:10px;margin-bottom:10px}:host(.in-item.checkbox-label-placement-stacked) .label-text-wrapper{margin-top:10px;margin-bottom:16px}:host(.in-item.checkbox-label-placement-stacked) .native-wrapper{margin-bottom:10px}.label-text-wrapper-hidden{display:none}input{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;margin:0;padding:0;border:0;outline:0;clip:rect(0 0 0 0);opacity:0;overflow:hidden;-webkit-appearance:none;-moz-appearance:none}.native-wrapper{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.checkbox-icon{border-radius:var(--border-radius);position:relative;-webkit-transition:var(--transition);transition:var(--transition);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);background:var(--checkbox-background);-webkit-box-sizing:border-box;box-sizing:border-box}:host(.legacy-checkbox) .checkbox-icon{display:block;width:100%;height:100%}:host(:not(.legacy-checkbox)) .checkbox-icon{width:var(--size);height:var(--size)}.checkbox-icon path{fill:none;stroke:var(--checkmark-color);stroke-width:var(--checkmark-width);opacity:0}:host(.checkbox-justify-space-between) .checkbox-wrapper{-ms-flex-pack:justify;justify-content:space-between}:host(.checkbox-justify-start) .checkbox-wrapper{-ms-flex-pack:start;justify-content:start}:host(.checkbox-justify-end) .checkbox-wrapper{-ms-flex-pack:end;justify-content:end}:host(.checkbox-alignment-start) .checkbox-wrapper{-ms-flex-align:start;align-items:start}:host(.checkbox-alignment-center) .checkbox-wrapper{-ms-flex-align:center;align-items:center}:host(.checkbox-label-placement-start) .checkbox-wrapper{-ms-flex-direction:row;flex-direction:row}:host(.checkbox-label-placement-start) .label-text-wrapper{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px}:host(.checkbox-label-placement-end) .checkbox-wrapper{-ms-flex-direction:row-reverse;flex-direction:row-reverse}:host(.checkbox-label-placement-end) .label-text-wrapper{-webkit-margin-start:16px;margin-inline-start:16px;-webkit-margin-end:0;margin-inline-end:0}:host(.checkbox-label-placement-fixed) .label-text-wrapper{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px}:host(.checkbox-label-placement-fixed) .label-text-wrapper{-ms-flex:0 0 100px;flex:0 0 100px;width:100px;min-width:100px;max-width:200px}:host(.checkbox-label-placement-stacked) .checkbox-wrapper{-ms-flex-direction:column;flex-direction:column}:host(.checkbox-label-placement-stacked) .label-text-wrapper{-webkit-transform:scale(0.75);transform:scale(0.75);margin-left:0;margin-right:0;margin-bottom:16px;max-width:calc(100% / 0.75)}:host(.checkbox-label-placement-stacked.checkbox-alignment-start) .label-text-wrapper{-webkit-transform-origin:left top;transform-origin:left top}:host-context([dir=rtl]):host(.checkbox-label-placement-stacked.checkbox-alignment-start) .label-text-wrapper,:host-context([dir=rtl]).checkbox-label-placement-stacked.checkbox-alignment-start .label-text-wrapper{-webkit-transform-origin:right top;transform-origin:right top}@supports selector(:dir(rtl)){:host(.checkbox-label-placement-stacked.checkbox-alignment-start:dir(rtl)) .label-text-wrapper{-webkit-transform-origin:right top;transform-origin:right top}}:host(.checkbox-label-placement-stacked.checkbox-alignment-center) .label-text-wrapper{-webkit-transform-origin:center top;transform-origin:center top}:host-context([dir=rtl]):host(.checkbox-label-placement-stacked.checkbox-alignment-center) .label-text-wrapper,:host-context([dir=rtl]).checkbox-label-placement-stacked.checkbox-alignment-center .label-text-wrapper{-webkit-transform-origin:calc(100% - center) top;transform-origin:calc(100% - center) top}@supports selector(:dir(rtl)){:host(.checkbox-label-placement-stacked.checkbox-alignment-center:dir(rtl)) .label-text-wrapper{-webkit-transform-origin:calc(100% - center) top;transform-origin:calc(100% - center) top}}:host(.checkbox-checked) .checkbox-icon,:host(.checkbox-indeterminate) .checkbox-icon{border-color:var(--border-color-checked);background:var(--checkbox-background-checked)}:host(.checkbox-checked) .checkbox-icon path,:host(.checkbox-indeterminate) .checkbox-icon path{opacity:1}:host(.checkbox-disabled){pointer-events:none}:host{--border-radius:50%;--border-width:0.0625rem;--border-style:solid;--border-color:rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.23);--checkbox-background:var(--ion-item-background, var(--ion-background-color, #fff));--size:min(1.625rem, 65.988px)}:host(.checkbox-disabled){opacity:0.3}:host(.in-item.legacy-checkbox){-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:8px;margin-inline-end:8px;margin-top:10px;margin-bottom:9px;display:block;position:static}:host(.in-item.legacy-checkbox[slot=start]){-webkit-margin-start:2px;margin-inline-start:2px;-webkit-margin-end:16px;margin-inline-end:16px;margin-top:8px;margin-bottom:8px}";
 const IonCheckboxIosStyle0 = checkboxIosCss;
@@ -112,7 +112,7 @@ const Checkbox = class {
         const mode = ionicGlobal.getIonMode(this);
         const path = getSVGPath(mode, indeterminate);
         helpers.renderHiddenInput(true, el, name, checked ? value : '', disabled);
-        return (index.h(index.Host, { class: theme.createColorClasses(color, {
+        return (index.h(index.Host, { "aria-checked": indeterminate ? 'mixed' : `${checked}`, class: theme.createColorClasses(color, {
                 [mode]: true,
                 'in-item': theme.hostContext('ion-item', el),
                 'checkbox-checked': checked,

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

@@ -5,9 +5,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-0ffe376d.js');
+const index = require('./index-22617dd6.js');
 const theme = require('./theme-d1c573d2.js');
-const ionicGlobal = require('./ionic-global-59a10130.js');
+const ionicGlobal = require('./ionic-global-c5503e93.js');
 
 const chipIosCss = ":host{--background:rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.12);--color:rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.87);border-radius:16px;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;-webkit-margin-start:4px;margin-inline-start:4px;-webkit-margin-end:4px;margin-inline-end:4px;margin-top:4px;margin-bottom:4px;-webkit-padding-start:12px;padding-inline-start:12px;-webkit-padding-end:12px;padding-inline-end:12px;padding-top:6px;padding-bottom:6px;display:-ms-inline-flexbox;display:inline-flex;position:relative;-ms-flex-align:center;align-items:center;min-height:32px;background:var(--background);color:var(--color);font-family:var(--ion-font-family, inherit);cursor:pointer;overflow:hidden;vertical-align:middle;-webkit-box-sizing:border-box;box-sizing:border-box}:host(.chip-disabled){cursor:default;opacity:0.4;pointer-events:none}:host(.ion-color){background:rgba(var(--ion-color-base-rgb), 0.08);color:var(--ion-color-shade)}:host(.ion-color:focus){background:rgba(var(--ion-color-base-rgb), 0.12)}:host(.ion-color.ion-activated){background:rgba(var(--ion-color-base-rgb), 0.16)}:host(.chip-outline){border-width:1px;border-style:solid}:host(.chip-outline){border-color:rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.32);background:transparent}:host(.chip-outline.ion-color){border-color:rgba(var(--ion-color-base-rgb), 0.32)}:host(.chip-outline:not(.ion-color):focus){background:rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.04)}:host(.chip-outline.ion-activated:not(.ion-color)){background:rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.08)}::slotted(ion-icon){font-size:1.4285714286em}:host(:not(.ion-color)) ::slotted(ion-icon){color:rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.54)}::slotted(ion-icon:first-child){-webkit-margin-start:-4px;margin-inline-start:-4px;-webkit-margin-end:8px;margin-inline-end:8px;margin-top:-4px;margin-bottom:-4px}::slotted(ion-icon:last-child){-webkit-margin-start:8px;margin-inline-start:8px;-webkit-margin-end:-4px;margin-inline-end:-4px;margin-top:-4px;margin-bottom:-4px}::slotted(ion-avatar){-ms-flex-negative:0;flex-shrink:0;width:1.7142857143em;height:1.7142857143em}::slotted(ion-avatar:first-child){-webkit-margin-start:-8px;margin-inline-start:-8px;-webkit-margin-end:8px;margin-inline-end:8px;margin-top:-4px;margin-bottom:-4px}::slotted(ion-avatar:last-child){-webkit-margin-start:8px;margin-inline-start:8px;-webkit-margin-end:-8px;margin-inline-end:-8px;margin-top:-4px;margin-bottom:-4px}:host(:focus){outline:none}:host(:focus){--background:rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.16)}:host(.ion-activated){--background:rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.2)}@media (any-hover: hover){:host(:hover){--background:rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.16)}:host(.ion-color:hover){background:rgba(var(--ion-color-base-rgb), 0.12)}:host(.chip-outline:not(.ion-color):hover){background:rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.04)}}:host{font-size:clamp(13px, 0.875rem, 22px)}";
 const IonChipIosStyle0 = chipIosCss;
@@ -24,12 +24,12 @@ const Chip = class {
     }
     render() {
         const mode = ionicGlobal.getIonMode(this);
-        return (index.h(index.Host, { key: 'eca7cc616c0c9dd2ab28efd41e203fa094880e9e', "aria-disabled": this.disabled ? 'true' : null, class: theme.createColorClasses(this.color, {
+        return (index.h(index.Host, { key: '886c26b6e7b3e3ca8622a4a0926bdf6dea0a71d4', "aria-disabled": this.disabled ? 'true' : null, class: theme.createColorClasses(this.color, {
                 [mode]: true,
                 'chip-outline': this.outline,
                 'chip-disabled': this.disabled,
                 'ion-activatable': true,
-            }) }, index.h("slot", { key: 'b64c9067132791f73a8434c37d5a335fb2d96f74' }), mode === 'md' && index.h("ion-ripple-effect", null)));
+            }) }, index.h("slot", { key: 'd24353e79ac84013758cee1acb1b0f9b2ebb4d67' }), mode === 'md' && index.h("ion-ripple-effect", { key: 'b69bb3ce3d464251d5e11ba6a5240e4567f72f05' })));
     }
 };
 Chip.style = {

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

@@ -5,8 +5,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-0ffe376d.js');
-const ionicGlobal = require('./ionic-global-59a10130.js');
+const index = require('./index-22617dd6.js');
+const ionicGlobal = require('./ionic-global-c5503e93.js');
 
 const SIZE_TO_MEDIA = {
     xs: '(min-width: 0px)',
@@ -140,9 +140,9 @@ const Col = class {
     render() {
         const isRTL = document.dir === 'rtl';
         const mode = ionicGlobal.getIonMode(this);
-        return (index.h(index.Host, { key: 'c186972dd12d10a4600975c326f20666fed96abf', class: {
+        return (index.h(index.Host, { key: '56ecf3b3f2be05d5f179f2d136d4ab05a4525da9', class: {
                 [mode]: true,
-            }, style: Object.assign(Object.assign(Object.assign(Object.assign({}, this.calculateOffset(isRTL)), this.calculatePull(isRTL)), this.calculatePush(isRTL)), this.calculateSize()) }, index.h("slot", { key: '54cc8bd92f94cfd30d9f3e8e59e0f0dc38abfd63' })));
+            }, style: Object.assign(Object.assign(Object.assign(Object.assign({}, this.calculateOffset(isRTL)), this.calculatePull(isRTL)), this.calculatePush(isRTL)), this.calculateSize()) }, index.h("slot", { key: '8f1113d39dcb709300ebbeaf81bc092c1dd8da3e' })));
     }
 };
 Col.style = IonColStyle0;
@@ -157,10 +157,10 @@ const Grid = class {
     }
     render() {
         const mode = ionicGlobal.getIonMode(this);
-        return (index.h(index.Host, { key: '03a8975bb9320192033219fc9e06fe7afa4fae4a', class: {
+        return (index.h(index.Host, { key: 'a1c2ff77f97761c2bbcd869b2cc7b1558032b406', class: {
                 [mode]: true,
                 'grid-fixed': this.fixed,
-            } }, index.h("slot", { key: '8d95abb4614e73a46a274668c13fe7c7f011c537' })));
+            } }, index.h("slot", { key: 'cd25166436cf3a63a11ad436a9b9c5a607e72600' })));
     }
 };
 Grid.style = IonGridStyle0;
@@ -173,7 +173,7 @@ const Row = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: 'de94b93c001a93b2a88bcb8e959f421fd5ad4a65', class: ionicGlobal.getIonMode(this) }, index.h("slot", { key: '41fa951758d3644bb77d80002caf6e25a79393ce' })));
+        return (index.h(index.Host, { key: '242c9a45b0bb39af2aebf412fdfa9a176babc834', class: ionicGlobal.getIonMode(this) }, index.h("slot", { key: 'd9015d663d631bbf20bd3e0821fed874cd6c5156' })));
     }
 };
 Row.style = IonRowStyle0;

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

@@ -5,12 +5,12 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-0ffe376d.js');
+const index = require('./index-22617dd6.js');
 const helpers = require('./helpers-da4c0ed1.js');
 const index$1 = require('./index-5915f9b3.js');
 const theme = require('./theme-d1c573d2.js');
-const ionicGlobal = require('./ionic-global-59a10130.js');
-const data = require('./data-a5109f09.js');
+const ionicGlobal = require('./ionic-global-c5503e93.js');
+const data = require('./data-4487a815.js');
 
 const iosDatetimeButtonCss = ":host{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}:host button{border-radius:8px;-webkit-padding-start:12px;padding-inline-start:12px;-webkit-padding-end:12px;padding-inline-end:12px;padding-top:6px;padding-bottom:6px;-webkit-margin-start:2px;margin-inline-start:2px;-webkit-margin-end:2px;margin-inline-end:2px;margin-top:0px;margin-bottom:0px;position:relative;-webkit-transition:150ms color ease-in-out;transition:150ms color ease-in-out;border:none;background:var(--ion-color-step-300, #edeef0);color:var(--ion-text-color, #000);font-family:inherit;font-size:1rem;cursor:pointer;overflow:hidden;-webkit-appearance:none;-moz-appearance:none;appearance:none}:host(.time-active) #time-button,:host(.date-active) #date-button{color:var(--ion-color-base)}:host(.datetime-button-disabled){pointer-events:none}:host(.datetime-button-disabled) button{opacity:0.4}";
 const IonDatetimeButtonIosStyle0 = iosDatetimeButtonCss;
@@ -44,11 +44,12 @@ const DatetimeButton = class {
          * to the locale specified on ion-datetime.
          */
         this.setDateTimeText = () => {
+            var _a, _b, _c, _d, _e;
             const { datetimeEl, datetimePresentation } = this;
             if (!datetimeEl) {
                 return;
             }
-            const { value, locale, hourCycle, preferWheel, multiple, titleSelectedDatesFormatter } = datetimeEl;
+            const { value, locale, formatOptions, hourCycle, preferWheel, multiple, titleSelectedDatesFormatter } = datetimeEl;
             const parsedValues = this.getParsedDateValues(value);
             /**
              * Both ion-datetime and ion-datetime-button default
@@ -71,8 +72,8 @@ const DatetimeButton = class {
             switch (datetimePresentation) {
                 case 'date-time':
                 case 'time-date':
-                    const dateText = data.getMonthDayAndYear(locale, firstParsedDatetime);
-                    const timeText = data.getLocalizedTime(locale, firstParsedDatetime, computedHourCycle);
+                    const dateText = data.getLocalizedDateTime(locale, firstParsedDatetime, (_a = formatOptions === null || formatOptions === void 0 ? void 0 : formatOptions.date) !== null && _a !== void 0 ? _a : { month: 'short', day: 'numeric', year: 'numeric' });
+                    const timeText = data.getLocalizedTime(locale, firstParsedDatetime, computedHourCycle, formatOptions === null || formatOptions === void 0 ? void 0 : formatOptions.time);
                     if (preferWheel) {
                         this.dateText = `${dateText} ${timeText}`;
                     }
@@ -95,20 +96,20 @@ const DatetimeButton = class {
                         this.dateText = headerText;
                     }
                     else {
-                        this.dateText = data.getMonthDayAndYear(locale, firstParsedDatetime);
+                        this.dateText = data.getLocalizedDateTime(locale, firstParsedDatetime, (_b = formatOptions === null || formatOptions === void 0 ? void 0 : formatOptions.date) !== null && _b !== void 0 ? _b : { month: 'short', day: 'numeric', year: 'numeric' });
                     }
                     break;
                 case 'time':
-                    this.timeText = data.getLocalizedTime(locale, firstParsedDatetime, computedHourCycle);
+                    this.timeText = data.getLocalizedTime(locale, firstParsedDatetime, computedHourCycle, formatOptions === null || formatOptions === void 0 ? void 0 : formatOptions.time);
                     break;
                 case 'month-year':
-                    this.dateText = data.getMonthAndYear(locale, firstParsedDatetime);
+                    this.dateText = data.getLocalizedDateTime(locale, firstParsedDatetime, (_c = formatOptions === null || formatOptions === void 0 ? void 0 : formatOptions.date) !== null && _c !== void 0 ? _c : { month: 'long', year: 'numeric' });
                     break;
                 case 'month':
-                    this.dateText = data.getLocalizedDateTime(locale, firstParsedDatetime, { month: 'long' });
+                    this.dateText = data.getLocalizedDateTime(locale, firstParsedDatetime, (_d = formatOptions === null || formatOptions === void 0 ? void 0 : formatOptions.time) !== null && _d !== void 0 ? _d : { month: 'long' });
                     break;
                 case 'year':
-                    this.dateText = data.getLocalizedDateTime(locale, firstParsedDatetime, { year: 'numeric' });
+                    this.dateText = data.getLocalizedDateTime(locale, firstParsedDatetime, (_e = formatOptions === null || formatOptions === void 0 ? void 0 : formatOptions.time) !== null && _e !== void 0 ? _e : { year: 'numeric' });
                     break;
             }
         };
@@ -337,11 +338,11 @@ const DatetimeButton = class {
     render() {
         const { color, dateText, timeText, selectedButton, datetimeActive, disabled } = this;
         const mode = ionicGlobal.getIonMode(this);
-        return (index.h(index.Host, { key: '36fe34d4225940611d74bdef5b954d54749d2dca', class: theme.createColorClasses(color, {
+        return (index.h(index.Host, { key: 'ab6c21a4c185dee71c8f14cafad82e38831c68d0', class: theme.createColorClasses(color, {
                 [mode]: true,
                 [`${selectedButton}-active`]: datetimeActive,
                 ['datetime-button-disabled']: disabled,
-            }) }, dateText && (index.h("button", { class: "ion-activatable", id: "date-button", "aria-expanded": datetimeActive ? 'true' : 'false', onClick: this.handleDateClick, disabled: disabled, part: "native", ref: (el) => (this.dateTargetEl = el) }, index.h("slot", { name: "date-target" }, dateText), mode === 'md' && index.h("ion-ripple-effect", null))), timeText && (index.h("button", { class: "ion-activatable", id: "time-button", "aria-expanded": datetimeActive ? 'true' : 'false', onClick: this.handleTimeClick, disabled: disabled, part: "native", ref: (el) => (this.timeTargetEl = el) }, index.h("slot", { name: "time-target" }, timeText), mode === 'md' && index.h("ion-ripple-effect", null)))));
+            }) }, dateText && (index.h("button", { key: 'cbda6f3386c3714567a04b5a97a96c71d59822c8', class: "ion-activatable", id: "date-button", "aria-expanded": datetimeActive ? 'true' : 'false', onClick: this.handleDateClick, disabled: disabled, part: "native", ref: (el) => (this.dateTargetEl = el) }, index.h("slot", { key: 'a00ff431512827bfef8c02982ef37099b2f21508', name: "date-target" }, dateText), mode === 'md' && index.h("ion-ripple-effect", { key: '67935989628a2ed0492edb813fb0475bfd88abe7' }))), timeText && (index.h("button", { key: '4207c94de5bece91b8388332e0192d1756403e62', class: "ion-activatable", id: "time-button", "aria-expanded": datetimeActive ? 'true' : 'false', onClick: this.handleTimeClick, disabled: disabled, part: "native", ref: (el) => (this.timeTargetEl = el) }, index.h("slot", { key: '9ffa7ef4417571933bd1757950ec805c49704759', name: "time-target" }, timeText), mode === 'md' && index.h("ion-ripple-effect", { key: 'fbcad00cf828c9719074d1d06f4e13246b28903e' })))));
     }
     get el() { return index.getElement(this); }
 };

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

@@ -5,21 +5,21 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index$1 = require('./index-0ffe376d.js');
+const index$1 = require('./index-22617dd6.js');
 const focusVisible = require('./focus-visible-7a0ce04f.js');
 const helpers = require('./helpers-da4c0ed1.js');
 const index = require('./index-5915f9b3.js');
 const dir = require('./dir-94c21456.js');
 const theme = require('./theme-d1c573d2.js');
 const index$2 = require('./index-f52c6d38.js');
-const ionicGlobal = require('./ionic-global-59a10130.js');
-const data = require('./data-a5109f09.js');
+const ionicGlobal = require('./ionic-global-c5503e93.js');
+const data = require('./data-4487a815.js');
 const lockController = require('./lock-controller-6585a42a.js');
-const overlays = require('./overlays-db5d96f3.js');
+const overlays = require('./overlays-129dfc13.js');
 const animation = require('./animation-c2840aea.js');
 const haptic = require('./haptic-b882e0bb.js');
 require('./index-c8d52405.js');
-require('./hardware-back-button-2696acaf.js');
+require('./hardware-back-button-adba3ac7.js');
 require('./framework-delegate-e0e13baa.js');
 require('./capacitor-c04564bf.js');
 
@@ -190,6 +190,48 @@ const getHighlightStyles = (highlightedDates, dateIsoString, el) => {
     return undefined;
 };
 
+/**
+ * If a time zone is provided in the format options, the rendered text could
+ * differ from what was selected in the Datetime, which could cause
+ * confusion.
+ */
+const warnIfTimeZoneProvided = (el, formatOptions) => {
+    var _a, _b, _c, _d;
+    if (((_a = formatOptions === null || formatOptions === void 0 ? void 0 : formatOptions.date) === null || _a === void 0 ? void 0 : _a.timeZone) ||
+        ((_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);
+    }
+};
+const checkForPresentationFormatMismatch = (el, presentation, formatOptions) => {
+    // formatOptions is not required
+    if (!formatOptions)
+        return;
+    // If formatOptions is provided, the date and/or time objects are required, depending on the presentation
+    switch (presentation) {
+        case 'date':
+        case 'month-year':
+        case 'month':
+        case 'year':
+            if (formatOptions.date === undefined) {
+                index.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);
+            }
+            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);
+            }
+            break;
+    }
+};
+
 const datetimeIosCss = ":host{display:-ms-flexbox;display:flex;-ms-flex-flow:column;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:-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}@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:-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-item,:host .calendar-action-buttons ion-button{--background:translucent}:host .calendar-action-buttons ion-item ion-label{display:-ms-flexbox;display:flex;-ms-flex-align:center;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:-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, #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 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;-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)}: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:-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;
 
@@ -814,6 +856,7 @@ const Datetime = class {
         this.color = 'primary';
         this.name = this.inputId;
         this.disabled = false;
+        this.formatOptions = undefined;
         this.readonly = false;
         this.isDateEnabled = undefined;
         this.min = undefined;
@@ -841,6 +884,11 @@ const Datetime = class {
         this.size = 'fixed';
         this.preferWheel = false;
     }
+    formatOptionsChanged() {
+        const { el, formatOptions, presentation } = this;
+        checkForPresentationFormatMismatch(el, presentation, formatOptions);
+        warnIfTimeZoneProvided(el, formatOptions);
+    }
     disabledChanged() {
         this.emitStyle();
     }
@@ -850,6 +898,10 @@ const Datetime = class {
     maxChanged() {
         this.processMaxParts();
     }
+    presentationChanged() {
+        const { el, formatOptions, presentation } = this;
+        checkForPresentationFormatMismatch(el, presentation, formatOptions);
+    }
     get isGridStyle() {
         const { presentation, preferWheel } = this;
         const hasDatePresentation = presentation === 'date' || presentation === 'date-time' || presentation === 'time-date';
@@ -952,6 +1004,7 @@ const Datetime = class {
         this.initializeKeyboardListeners();
     }
     componentDidLoad() {
+        const { el, intersectionTrackerRef } = this;
         /**
          * If a scrollable element is hidden using `display: none`,
          * it will not have a scroll height meaning we cannot scroll elements
@@ -977,14 +1030,14 @@ const Datetime = class {
                 this.el.classList.add('datetime-ready');
             });
         };
-        const visibleIO = new IntersectionObserver(visibleCallback, { threshold: 0.01 });
+        const visibleIO = new IntersectionObserver(visibleCallback, { threshold: 0.01, root: el });
         /**
          * Use raf to avoid a race condition between the component loading and
          * its display animation starting (such as when shown in a modal). This
          * could cause the datetime to start at a visibility of 0, erroneously
          * triggering the `hiddenIO` observer below.
          */
-        helpers.raf(() => visibleIO === null || visibleIO === void 0 ? void 0 : visibleIO.observe(this.el));
+        helpers.raf(() => visibleIO === null || visibleIO === void 0 ? void 0 : visibleIO.observe(intersectionTrackerRef));
         /**
          * We need to clean up listeners when the datetime is hidden
          * in a popover/modal so that we can properly scroll containers
@@ -1010,8 +1063,8 @@ const Datetime = class {
                 this.el.classList.remove('datetime-ready');
             });
         };
-        const hiddenIO = new IntersectionObserver(hiddenCallback, { threshold: 0 });
-        helpers.raf(() => hiddenIO === null || hiddenIO === void 0 ? void 0 : hiddenIO.observe(this.el));
+        const hiddenIO = new IntersectionObserver(hiddenCallback, { threshold: 0, root: el });
+        helpers.raf(() => hiddenIO === null || hiddenIO === void 0 ? void 0 : hiddenIO.observe(intersectionTrackerRef));
         /**
          * Datetime uses Ionic components that emit
          * ionFocus and ionBlur. These events are
@@ -1085,7 +1138,7 @@ const Datetime = class {
         });
     }
     componentWillLoad() {
-        const { el, highlightedDates, multiple, presentation, preferWheel } = this;
+        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);
@@ -1102,6 +1155,10 @@ const Datetime = class {
                 index.printIonWarning('The highlightedDates property is not supported with preferWheel="true".', el);
             }
         }
+        if (formatOptions) {
+            checkForPresentationFormatMismatch(el, presentation, formatOptions);
+            warnIfTimeZoneProvided(el, formatOptions);
+        }
         const hourValues = (this.parsedHourValues = data.convertToArrayOfNumbers(this.hourValues));
         const minuteValues = (this.parsedMinuteValues = data.convertToArrayOfNumbers(this.minuteValues));
         const monthValues = (this.parsedMonthValues = data.convertToArrayOfNumbers(this.monthValues));
@@ -1609,7 +1666,7 @@ const Datetime = class {
         return index$1.h("slot", { name: "time-label" }, "Time");
     }
     renderTimeOverlay() {
-        const { disabled, hourCycle, isTimePopoverOpen, locale } = this;
+        const { disabled, hourCycle, isTimePopoverOpen, locale, formatOptions } = this;
         const computedHourCycle = data.getHourCycle(locale, hourCycle);
         const activePart = this.getActivePartsWithFallback();
         return [
@@ -1629,7 +1686,7 @@ const Datetime = class {
                         await popoverRef.onWillDismiss();
                         this.isTimePopoverOpen = false;
                     }
-                } }, data.getLocalizedTime(locale, activePart, computedHourCycle)),
+                } }, 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) => {
                     /**
                      * Intersection Observers do not consistently fire between Blink and Webkit
@@ -1652,7 +1709,8 @@ const Datetime = class {
         ];
     }
     getHeaderSelectedDateText() {
-        const { activeParts, multiple, titleSelectedDatesFormatter } = this;
+        var _a;
+        const { activeParts, formatOptions, multiple, titleSelectedDatesFormatter } = this;
         const isArray = Array.isArray(activeParts);
         let headerText;
         if (multiple && isArray && activeParts.length !== 1) {
@@ -1668,7 +1726,7 @@ const Datetime = class {
         }
         else {
             // for exactly 1 day selected (multiple set or not), show a formatted version of that
-            headerText = data.getMonthAndDay(this.locale, this.getActivePartsWithFallback());
+            headerText = data.getLocalizedDateTime(this.locale, this.getActivePartsWithFallback(), (_a = formatOptions === null || formatOptions === void 0 ? void 0 : formatOptions.date) !== null && _a !== void 0 ? _a : { weekday: 'short', month: 'short', day: 'numeric' });
         }
         return headerText;
     }
@@ -1757,7 +1815,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$1.h(index$1.Host, { key: 'b00545b7bbba3ccf35d53c1eec4f1614fb830c11', "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,
@@ -1767,13 +1825,15 @@ const Datetime = class {
                 [`datetime-size-${size}`]: true,
                 [`datetime-prefer-wheel`]: hasWheelVariant,
                 [`datetime-grid`]: isGridStyle,
-            })) }, this.renderDatetime(mode)));
+            })) }, index$1.h("div", { key: 'a2959c07ed871f9004a2f11ab1385a5a7b5737fd', class: "intersection-tracker", ref: (el) => (this.intersectionTrackerRef = el) }), this.renderDatetime(mode)));
     }
     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"],
@@ -2018,11 +2078,11 @@ const Picker = class {
     render() {
         const { htmlAttributes } = this;
         const mode = ionicGlobal.getIonMode(this);
-        return (index$1.h(index$1.Host, Object.assign({ key: 'c266cc072afaba2da22f70d8b62dc4bc6756d188', "aria-modal": "true", tabindex: "-1" }, htmlAttributes, { style: {
+        return (index$1.h(index$1.Host, Object.assign({ key: 'eb5f91ea74fb11daa6942f779ef461742cad9ecb', "aria-modal": "true", tabindex: "-1" }, htmlAttributes, { style: {
                 zIndex: `${20000 + this.overlayIndex}`,
             }, class: Object.assign({ [mode]: true,
                 // Used internally for styling
-                [`picker-${mode}`]: true, 'overlay-hidden': true }, theme.getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonPickerWillDismiss: this.dispatchCancelHandler }), index$1.h("ion-backdrop", { key: '35ee3e5028028835580e28ac2c8db65a924d5d6a', visible: this.showBackdrop, tappable: this.backdropDismiss }), index$1.h("div", { key: '8b454e6edbcfc45c57d3d8baf7c14b7905921a6e', tabindex: "0" }), index$1.h("div", { key: 'e0fee78ec6d097bf0963190f748e5daad602e0f7', class: "picker-wrapper ion-overlay-wrapper", role: "dialog" }, index$1.h("div", { key: 'ce66bca18fc3e982ad7d6660f27cb1a03fb8247b', 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: 'a58b9523fe16f109dd6de0610717c5077fed964b', class: "picker-columns" }, index$1.h("div", { key: 'acd54c0314cff51e8513a08dd9755c4b847c0617', class: "picker-above-highlight" }), this.presented && this.columns.map((c) => index$1.h("ion-picker-column", { col: c })), index$1.h("div", { key: '604730bd87582d048d850c6e0a0f29ba33258918', class: "picker-below-highlight" }))), index$1.h("div", { key: '93baf5e6e57aec5f084d7d5b24af14e7d8126b5a', tabindex: "0" })));
+                [`picker-${mode}`]: true, 'overlay-hidden': true }, theme.getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonPickerWillDismiss: this.dispatchCancelHandler }), index$1.h("ion-backdrop", { key: '7ea872d939e62f14129fff15334b2822ad2360c9', visible: this.showBackdrop, tappable: this.backdropDismiss }), index$1.h("div", { key: '2d77c225091eacab0207e28c96b966122afafef0', tabindex: "0" }), index$1.h("div", { key: '630d21e0c60ad97b71462cdc540858bb6ced0b8f', class: "picker-wrapper ion-overlay-wrapper", role: "dialog" }, index$1.h("div", { key: 'fa8553ec8d2ce8bf93e16e02334b6475cb51b5d4', 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: '177d1bcbd0ce38f16d9c936295a917fb981d02d7', class: "picker-columns" }, index$1.h("div", { key: 'be99b6e0279c210ef91a88ccc81acc7d37917a53', class: "picker-above-highlight" }), this.presented && this.columns.map((c) => index$1.h("ion-picker-column", { col: c })), index$1.h("div", { key: 'b36b21e8133b59e873e1d3447a1279f1b971c854', class: "picker-below-highlight" }))), index$1.h("div", { key: '17cea6dd24dbb0a08073ca4a84bfe027eb24833d', tabindex: "0" })));
     }
     get el() { return index$1.getElement(this); }
     static get watchers() { return {
@@ -2379,9 +2439,9 @@ const PickerColumnCmp = class {
     render() {
         const col = this.col;
         const mode = ionicGlobal.getIonMode(this);
-        return (index$1.h(index$1.Host, { key: '06e2ae483a3bcf4fe721ad0c48cded6a1efdc6c0', 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: {
+        return (index$1.h(index$1.Host, { key: '49bb4c67a67c7318d4c305df78ceabae36355112', 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: {
                 '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: '14bea013788d899edf7155eb3cc10f79fe8e4690', 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$1.h("div", { key: '7e65761d24473e4ba0ce2d4fc707a5c5e8127903', class: "picker-prefix", style: { width: col.prefixWidth } }, col.prefix)), index$1.h("div", { key: '65c3aea609401e8ae4ea6d363a1b9436796c0a86', 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", { key: 'c2e5a324ba95dd8832d3eb81b139e1f674d74a35', class: "picker-suffix", style: { width: col.suffixWidth } }, col.suffix))));
     }
     get el() { return index$1.getElement(this); }
     static get watchers() { return {

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

@@ -5,8 +5,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-0ffe376d.js');
-const ionicGlobal = require('./ionic-global-59a10130.js');
+const index = require('./index-22617dd6.js');
+const ionicGlobal = require('./ionic-global-c5503e93.js');
 const helpers = require('./helpers-da4c0ed1.js');
 const theme = require('./theme-d1c573d2.js');
 const index$1 = require('./index-f52c6d38.js');
@@ -59,12 +59,12 @@ const Fab = class {
     render() {
         const { horizontal, vertical, edge } = this;
         const mode = ionicGlobal.getIonMode(this);
-        return (index.h(index.Host, { key: 'eb7470763cfaadd229036fe4e04913cb4a0551c7', class: {
+        return (index.h(index.Host, { key: '71df1068c3a2739a69d3571c2fe9bdf401a252cb', class: {
                 [mode]: true,
                 [`fab-horizontal-${horizontal}`]: horizontal !== undefined,
                 [`fab-vertical-${vertical}`]: vertical !== undefined,
                 'fab-edge': edge,
-            } }, index.h("slot", { key: 'daf53f8c644db866f69d41401dba7a2791c37ac3' })));
+            } }, index.h("slot", { key: 'c3afd4a009d355d664f8c04057acf86196bda844' })));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
@@ -133,7 +133,7 @@ const FabButton = class {
                 rel: this.rel,
                 target: this.target,
             };
-        return (index.h(index.Host, { key: '78f11aaac39bf0fcb25b64885ee61619223e4241', onClick: this.onClick, "aria-disabled": disabled ? 'true' : null, class: theme.createColorClasses(color, {
+        return (index.h(index.Host, { key: '5b5e73a0236eabb3e994f0f33ee9ab6f75a12b24', onClick: this.onClick, "aria-disabled": disabled ? 'true' : null, class: theme.createColorClasses(color, {
                 [mode]: true,
                 'fab-button-in-list': inList,
                 'fab-button-translucent-in-list': inList && translucent,
@@ -144,7 +144,7 @@ const FabButton = class {
                 'ion-activatable': true,
                 'ion-focusable': true,
                 [`fab-button-${size}`]: size !== undefined,
-            }) }, index.h(TagType, Object.assign({ key: 'a29b5eff122006d463ef3e10e1abe8378de07dc5' }, attrs, { class: "button-native", part: "native", disabled: disabled, onFocus: this.onFocus, onBlur: this.onBlur, onClick: (ev) => theme.openURL(href, ev, this.routerDirection, this.routerAnimation) }, inheritedAttributes), index.h("ion-icon", { key: 'e554c978fd9825eec9ca958f5b481f662ed6daa4', "aria-hidden": "true", icon: this.closeIcon, part: "close-icon", class: "close-icon", lazy: false }), index.h("span", { key: 'd7dd93e93343767d223800899f0fd4c405845023', class: "button-inner" }, index.h("slot", { key: 'dd5df0945385480e7551e24117d136cd6b231638' })), mode === 'md' && index.h("ion-ripple-effect", null))));
+            }) }, index.h(TagType, Object.assign({ key: 'e3c85ff305b6790519543603401b85f294aabed1' }, attrs, { class: "button-native", part: "native", disabled: disabled, onFocus: this.onFocus, onBlur: this.onBlur, onClick: (ev) => theme.openURL(href, ev, this.routerDirection, this.routerAnimation) }, inheritedAttributes), index.h("ion-icon", { key: '39241f9fa051506717c8680e1b809dbf2e56f1a1', "aria-hidden": "true", icon: this.closeIcon, part: "close-icon", class: "close-icon", lazy: false }), index.h("span", { key: '03f0ec1c25352f3a5decb33ebc060b9043ab569e', class: "button-inner" }, index.h("slot", { key: '11c1a17bc0c54b840a96b96e03fffc23f0e64ff2' })), mode === 'md' && index.h("ion-ripple-effect", { key: '9b1642dba0beb3a22658ad0aead26b2ab57f0367' }))));
     }
     get el() { return index.getElement(this); }
 };
@@ -172,11 +172,11 @@ const FabList = class {
     }
     render() {
         const mode = ionicGlobal.getIonMode(this);
-        return (index.h(index.Host, { key: 'c786680f9868700913a182f908f25a612ec08498', class: {
+        return (index.h(index.Host, { key: '3de1b0db4eb0230d4d2954e4265ddeb3c930b4dc', class: {
                 [mode]: true,
                 'fab-list-active': this.activated,
                 [`fab-list-side-${this.side}`]: true,
-            } }, index.h("slot", { key: '547f8cb69ab2371095e3deeef1dc13fc1053bdf6' })));
+            } }, index.h("slot", { key: '970aac2239ad9ea2b6b6c3c3ea45a18c45b37df2' })));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

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

@@ -5,9 +5,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-0ffe376d.js');
+const index = require('./index-22617dd6.js');
 const helpers = require('./helpers-da4c0ed1.js');
-const ionicGlobal = require('./ionic-global-59a10130.js');
+const ionicGlobal = require('./ionic-global-c5503e93.js');
 
 const imgCss = ":host{display:block;-o-object-fit:contain;object-fit:contain}img{display:block;width:100%;height:100%;-o-object-fit:inherit;object-fit:inherit;-o-object-position:inherit;object-position:inherit}";
 const IonImgStyle0 = imgCss;
@@ -80,7 +80,7 @@ const Img = class {
     render() {
         const { loadSrc, alt, onLoad, loadError, inheritedAttributes } = this;
         const { draggable } = inheritedAttributes;
-        return (index.h(index.Host, { key: '1983ddd575d8f870f249d37a3897dbcc110bf4d7', class: ionicGlobal.getIonMode(this) }, index.h("img", { key: 'f2ba013804f6ed9e5dadb08c75e47c0f844e67f3', decoding: "async", src: loadSrc, alt: alt, onLoad: onLoad, onError: loadError, part: "image", draggable: isDraggable(draggable) })));
+        return (index.h(index.Host, { key: 'efff4d1bd0e54dbeff140c137eb50b803a9f6f60', class: ionicGlobal.getIonMode(this) }, index.h("img", { key: '3a1e0276ae67a7e40ec8c4ecd0061634573b2094', decoding: "async", src: loadSrc, alt: alt, onLoad: onLoad, onError: loadError, part: "image", draggable: isDraggable(draggable) })));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/ion-infinite-scroll_2.cjs.entry.js

@@ -5,9 +5,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-0ffe376d.js');
+const index = require('./index-22617dd6.js');
 const index$1 = require('./index-bef98850.js');
-const ionicGlobal = require('./ionic-global-59a10130.js');
+const ionicGlobal = require('./ionic-global-c5503e93.js');
 const config = require('./config-4f60b98a.js');
 require('./helpers-da4c0ed1.js');
 require('./index-5915f9b3.js');
@@ -180,7 +180,7 @@ const InfiniteScroll = class {
     render() {
         const mode = ionicGlobal.getIonMode(this);
         const disabled = this.disabled;
-        return (index.h(index.Host, { key: '8b5da92c7a1c118cd6c6a6be8f21b11b79f166bd', class: {
+        return (index.h(index.Host, { key: 'c2248d06232dd7771dd155693ec75f9258dc969e', class: {
                 [mode]: true,
                 'infinite-scroll-loading': this.isLoading,
                 'infinite-scroll-enabled': !disabled,
@@ -222,11 +222,11 @@ const InfiniteScrollContent = class {
     }
     render() {
         const mode = ionicGlobal.getIonMode(this);
-        return (index.h(index.Host, { key: '8ffd8ff4c951be0c2b1f48fd4be3a2d7765a989f', class: {
+        return (index.h(index.Host, { key: '2f4afb07bcfe3e12528eb9cee8646a097e0b359f', class: {
                 [mode]: true,
                 // Used internally for styling
                 [`infinite-scroll-content-${mode}`]: true,
-            } }, index.h("div", { key: 'd7d03485501b5e2fde7c132309bb6358818eb0cd', class: "infinite-loading" }, this.loadingSpinner && (index.h("div", { class: "infinite-loading-spinner" }, index.h("ion-spinner", { name: this.loadingSpinner }))), this.loadingText !== undefined && this.renderLoadingText())));
+            } }, index.h("div", { key: 'af038177bf10c88c8970682487a4328689aaa5f2', class: "infinite-loading" }, this.loadingSpinner && (index.h("div", { key: '1da5d419bc6a978b6a509fdab47dae347fc8d221', class: "infinite-loading-spinner" }, index.h("ion-spinner", { key: '60cc5c64e0a317ac0005d5afe42c4bb8da58136f', name: this.loadingSpinner }))), this.loadingText !== undefined && this.renderLoadingText())));
     }
 };
 InfiniteScrollContent.style = {