@ionic/core 7.7.2-dev.11707881769.185d2a14 → 7.7.2-dev.11707926434.1affaed4

package/dist/cjs/{overlays-fb7ca451.js → overlays-330df245.js}

@@ -4,8 +4,8 @@
 'use strict';
 
 const index = require('./index-c8d52405.js');
-const hardwareBackButton = require('./hardware-back-button-2696acaf.js');
-const ionicGlobal = require('./ionic-global-59a10130.js');
+const hardwareBackButton = require('./hardware-back-button-d23873bb.js');
+const ionicGlobal = require('./ionic-global-7358c23e.js');
 const frameworkDelegate = require('./framework-delegate-a3e6d060.js');
 const helpers = require('./helpers-2e1028fa.js');
 const index$1 = require('./index-5915f9b3.js');
@@ -410,15 +410,6 @@ const present = async (overlay, name, iosEnterAnimation, mdEnterAnimation, opts)
         return;
     }
     setRootAriaHidden(true);
-    /**
-     * Hide all other overlays from screen readers so only this one
-     * can be read. Note that presenting an overlay always makes
-     * it the topmost one.
-     */
-    if (index.doc !== undefined) {
-        const presentedOverlays = getPresentedOverlays(index.doc);
-        presentedOverlays.forEach((o) => o.setAttribute('aria-hidden', 'true'));
-    }
     overlay.presented = true;
     overlay.willPresent.emit();
     (_a = overlay.willPresentShorthand) === null || _a === void 0 ? void 0 : _a.emit();
@@ -441,7 +432,7 @@ const present = async (overlay, name, iosEnterAnimation, mdEnterAnimation, opts)
      * from returning focus as a result.
      */
     if (overlay.el.tagName !== 'ION-TOAST') {
-        restoreElementFocus(overlay.el);
+        focusPreviousElementOnDismiss(overlay.el);
     }
     /**
      * If the focused element is already
@@ -452,14 +443,6 @@ const present = async (overlay, name, iosEnterAnimation, mdEnterAnimation, opts)
     if (overlay.keyboardClose && (document.activeElement === null || !overlay.el.contains(document.activeElement))) {
         overlay.el.focus();
     }
-    /**
-     * If this overlay was previously dismissed without being
-     * the topmost one (such as by manually calling dismiss()),
-     * it would still have aria-hidden on being presented again.
-     * Removing it here ensures the overlay is visible to screen
-     * readers.
-     */
-    overlay.el.removeAttribute('aria-hidden');
 };
 /**
  * When an overlay component is dismissed,
@@ -471,7 +454,7 @@ const present = async (overlay, name, iosEnterAnimation, mdEnterAnimation, opts)
  * to where they were before they
  * opened the overlay.
  */
-const restoreElementFocus = async (overlayEl) => {
+const focusPreviousElementOnDismiss = async (overlayEl) => {
     let previousElement = document.activeElement;
     if (!previousElement) {
         return;
@@ -482,36 +465,10 @@ const restoreElementFocus = async (overlayEl) => {
         previousElement = shadowRoot.querySelector(focusableQueryString) || previousElement;
     }
     await overlayEl.onDidDismiss();
-    /**
-     * After onDidDismiss, the overlay loses focus
-     * because it is removed from the document
-     *
-     * > An element will also lose focus [...]
-     * > if the element is removed from the document)
-     *
-     * https://developer.mozilla.org/en-US/docs/Web/API/Element/blur_event
-     *
-     * Additionally, `document.activeElement` returns:
-     *
-     * > The Element which currently has focus,
-     * > `<body>` or null if there is
-     * > no focused element.
-     *
-     * https://developer.mozilla.org/en-US/docs/Web/API/Document/activeElement#value
-     *
-     * However, if the user has already focused
-     * an element sometime between onWillDismiss
-     * and onDidDismiss (for example, focusing a
-     * text box after tapping a button in an
-     * action sheet) then don't restore focus to
-     * previous element
-     */
-    if (document.activeElement === null || document.activeElement === document.body) {
-        previousElement.focus();
-    }
+    previousElement.focus();
 };
 const dismiss = async (overlay, data, role, name, iosLeaveAnimation, mdLeaveAnimation, opts) => {
-    var _a, _b, _c;
+    var _a, _b;
     if (!overlay.presented) {
         return false;
     }
@@ -562,13 +519,6 @@ const dismiss = async (overlay, data, role, name, iosLeaveAnimation, mdLeaveAnim
         console.error(err);
     }
     overlay.el.remove();
-    /**
-     * If there are other overlays presented, unhide the new
-     * topmost one from screen readers.
-     */
-    if (index.doc !== undefined) {
-        (_c = getPresentedOverlay(index.doc)) === null || _c === void 0 ? void 0 : _c.removeAttribute('aria-hidden');
-    }
     return true;
 };
 const getAppRoot = (doc) => {

package/dist/cjs/{status-tap-692f6d32.js → status-tap-b0bfea34.js}

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-const index = require('./index-0ffe376d.js');
+const index = require('./index-5a471146.js');
 const index$1 = require('./index-53d162b2.js');
 const helpers = require('./helpers-2e1028fa.js');
 require('./index-5915f9b3.js');

package/dist/collection/collection-manifest.json

@@ -94,7 +94,7 @@
   ],
   "compiler": {
     "name": "@stencil/core",
-    "version": "4.12.2",
+    "version": "4.12.0",
     "typescriptVersion": "5.3.3"
   },
   "collections": [

package/dist/collection/components/action-sheet/action-sheet.js

@@ -79,10 +79,6 @@ export class ActionSheet {
      * This can be useful in a button handler for determining which button was
      * clicked to dismiss the action sheet.
      * Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.
-     *
-     * This is a no-op if the overlay has not been presented yet. If you want
-     * to remove an overlay from the DOM that was never presented, use the
-     * [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
      */
     async dismiss(data, role) {
         const unlock = await this.lockController.lock();
@@ -191,12 +187,12 @@ export class ActionSheet {
         const cancelButton = allButtons.find((b) => b.role === 'cancel');
         const buttons = allButtons.filter((b) => b.role !== 'cancel');
         const headerID = `action-sheet-${overlayIndex}-header`;
-        return (h(Host, Object.assign({ key: 'cd141d12d7d86d3402fd220c4afb61cdbf064c04', role: "dialog", "aria-modal": "true", "aria-labelledby": header !== undefined ? headerID : null, tabindex: "-1" }, htmlAttributes, { style: {
+        return (h(Host, Object.assign({ key: '98851ef73ef85bb1e364111f090480102929a197', role: "dialog", "aria-modal": "true", "aria-labelledby": header !== undefined ? headerID : null, tabindex: "-1" }, htmlAttributes, { style: {
                 zIndex: `${20000 + this.overlayIndex}`,
-            }, class: Object.assign(Object.assign({ [mode]: true }, getClassMap(this.cssClass)), { 'overlay-hidden': true, 'action-sheet-translucent': this.translucent }), onIonActionSheetWillDismiss: this.dispatchCancelHandler, onIonBackdropTap: this.onBackdropTap }), h("ion-backdrop", { key: 'b6a051e2cf5e101edbf59c8a40a04d8f7107fb3c', tappable: this.backdropDismiss }), h("div", { key: '5bfa2b37a417aaff3776f06d92a8544dfcbf714f', tabindex: "0" }), h("div", { key: '77d5a217803fd7be8f8dbedcd0ef5e59f0fd9800', class: "action-sheet-wrapper ion-overlay-wrapper", ref: (el) => (this.wrapperEl = el) }, h("div", { key: '3901d56215f05cdab074e2ec321391281a165097', class: "action-sheet-container" }, h("div", { key: '275f5c7981b2ee44fb632b3d137c7209cbfcf45c', class: "action-sheet-group", ref: (el) => (this.groupEl = el) }, header !== undefined && (h("div", { id: headerID, class: {
+            }, class: Object.assign(Object.assign({ [mode]: true }, getClassMap(this.cssClass)), { 'overlay-hidden': true, 'action-sheet-translucent': this.translucent }), onIonActionSheetWillDismiss: this.dispatchCancelHandler, onIonBackdropTap: this.onBackdropTap }), h("ion-backdrop", { key: 'e2520342ca16aae4dac0bd7bff59b2150aeb2171', tappable: this.backdropDismiss }), h("div", { key: 'c95f2ec4edde1dc3a8860e68b4a86b82f6797aee', tabindex: "0" }), h("div", { key: '7af9edad368e308508801c8ef2225928ced63159', class: "action-sheet-wrapper ion-overlay-wrapper", ref: (el) => (this.wrapperEl = el) }, h("div", { key: 'd1d92b4d1814d34eb7d8134ff77ee260ca521a6d', class: "action-sheet-container" }, h("div", { key: 'cc774b45a9992e95bfee788cb484d99364b76d22', class: "action-sheet-group", ref: (el) => (this.groupEl = el) }, header !== undefined && (h("div", { id: headerID, class: {
                 'action-sheet-title': true,
                 'action-sheet-has-sub-title': this.subHeader !== undefined,
-            } }, header, this.subHeader && h("div", { class: "action-sheet-sub-title" }, this.subHeader))), buttons.map((b) => (h("button", Object.assign({}, b.htmlAttributes, { type: "button", id: b.id, class: buttonClass(b), onClick: () => this.buttonClick(b) }), h("span", { class: "action-sheet-button-inner" }, b.icon && h("ion-icon", { icon: b.icon, "aria-hidden": "true", lazy: false, class: "action-sheet-icon" }), b.text), mode === 'md' && h("ion-ripple-effect", null))))), cancelButton && (h("div", { class: "action-sheet-group action-sheet-group-cancel" }, h("button", Object.assign({}, cancelButton.htmlAttributes, { type: "button", class: buttonClass(cancelButton), onClick: () => this.buttonClick(cancelButton) }), h("span", { class: "action-sheet-button-inner" }, cancelButton.icon && (h("ion-icon", { icon: cancelButton.icon, "aria-hidden": "true", lazy: false, class: "action-sheet-icon" })), cancelButton.text), mode === 'md' && h("ion-ripple-effect", null)))))), h("div", { key: '4285893438675be9b40838a93c2ff382a1074cd3', tabindex: "0" })));
+            } }, header, this.subHeader && h("div", { class: "action-sheet-sub-title" }, this.subHeader))), buttons.map((b) => (h("button", Object.assign({}, b.htmlAttributes, { type: "button", id: b.id, class: buttonClass(b), onClick: () => this.buttonClick(b) }), h("span", { class: "action-sheet-button-inner" }, b.icon && h("ion-icon", { icon: b.icon, "aria-hidden": "true", lazy: false, class: "action-sheet-icon" }), b.text), mode === 'md' && h("ion-ripple-effect", null))))), cancelButton && (h("div", { class: "action-sheet-group action-sheet-group-cancel" }, h("button", Object.assign({}, cancelButton.htmlAttributes, { type: "button", class: buttonClass(cancelButton), onClick: () => this.buttonClick(cancelButton) }), h("span", { class: "action-sheet-button-inner" }, cancelButton.icon && (h("ion-icon", { icon: cancelButton.icon, "aria-hidden": "true", lazy: false, class: "action-sheet-icon" })), cancelButton.text), mode === 'md' && h("ion-ripple-effect", null)))))), h("div", { key: '9a013adda7dec101cf0c90feb02f5b7f5582a0b3', tabindex: "0" })));
     }
     static get is() { return "ion-action-sheet"; }
     static get encapsulation() { return "scoped"; }
@@ -694,7 +690,7 @@ export class ActionSheet {
                         }, {
                             "name": "role",
                             "type": "string | undefined",
-                            "docs": "The role of the element that is dismissing the action sheet.\nThis can be useful in a button handler for determining which button was\nclicked to dismiss the action sheet.\nSome examples include: ``\"cancel\"`, `\"destructive\"`, \"selected\"`, and `\"backdrop\"`.\n\nThis is a no-op if the overlay has not been presented yet. If you want\nto remove an overlay from the DOM that was never presented, use the\n[remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method."
+                            "docs": "The role of the element that is dismissing the action sheet.\nThis can be useful in a button handler for determining which button was\nclicked to dismiss the action sheet.\nSome examples include: ``\"cancel\"`, `\"destructive\"`, \"selected\"`, and `\"backdrop\"`."
                         }],
                     "references": {
                         "Promise": {
@@ -711,7 +707,7 @@ export class ActionSheet {
                             "text": "data Any data to emit in the dismiss events."
                         }, {
                             "name": "param",
-                            "text": "role The role of the element that is dismissing the action sheet.\nThis can be useful in a button handler for determining which button was\nclicked to dismiss the action sheet.\nSome examples include: ``\"cancel\"`, `\"destructive\"`, \"selected\"`, and `\"backdrop\"`.\n\nThis is a no-op if the overlay has not been presented yet. If you want\nto remove an overlay from the DOM that was never presented, use the\n[remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method."
+                            "text": "role The role of the element that is dismissing the action sheet.\nThis can be useful in a button handler for determining which button was\nclicked to dismiss the action sheet.\nSome examples include: ``\"cancel\"`, `\"destructive\"`, \"selected\"`, and `\"backdrop\"`."
                         }]
                 }
             },

package/dist/collection/components/alert/alert.js

@@ -220,10 +220,6 @@ export class Alert {
      * This can be useful in a button handler for determining which button was
      * clicked to dismiss the alert.
      * Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.
-     *
-     * This is a no-op if the overlay has not been presented yet. If you want
-     * to remove an overlay from the DOM that was never presented, use the
-     * [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
      */
     async dismiss(data, role) {
         const unlock = await this.lockController.lock();
@@ -391,9 +387,9 @@ export class Alert {
          * If neither is defined, don't set aria-labelledby.
          */
         const ariaLabelledBy = header ? hdrId : subHeader ? subHdrId : null;
-        return (h(Host, Object.assign({ key: '4b7f7880dc5f39aa9b61981af0a821ac0350af7f', role: role, "aria-modal": "true", "aria-labelledby": ariaLabelledBy, "aria-describedby": message !== undefined ? msgId : null, tabindex: "-1" }, htmlAttributes, { style: {
+        return (h(Host, Object.assign({ key: '8327e1aef6c404c2021d43aaa542d86e839817f5', role: role, "aria-modal": "true", "aria-labelledby": ariaLabelledBy, "aria-describedby": message !== undefined ? msgId : null, tabindex: "-1" }, htmlAttributes, { style: {
                 zIndex: `${20000 + overlayIndex}`,
-            }, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [mode]: true, 'overlay-hidden': true, 'alert-translucent': this.translucent }), onIonAlertWillDismiss: this.dispatchCancelHandler, onIonBackdropTap: this.onBackdropTap }), h("ion-backdrop", { key: '961a2684013ac61d59882914fd8d759ddb542fe7', tappable: this.backdropDismiss }), h("div", { key: '2ec08c3719b3cd8a4cae09d2c6ac778ffad5f940', tabindex: "0" }), h("div", { key: 'ee543683d20693c9a9497aca4d41f032aa580c9c', class: "alert-wrapper ion-overlay-wrapper", ref: (el) => (this.wrapperEl = el) }, h("div", { key: '55015102b67d080249a8859fc8788f3a82d5ead9', class: "alert-head" }, header && (h("h2", { id: hdrId, class: "alert-title" }, header)), subHeader && (h("h2", { id: subHdrId, class: "alert-sub-title" }, subHeader))), this.renderAlertMessage(msgId), this.renderAlertInputs(), this.renderAlertButtons()), h("div", { key: 'df7bcfb0cb41965f169de05edd631a050d5ce648', tabindex: "0" })));
+            }, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [mode]: true, 'overlay-hidden': true, 'alert-translucent': this.translucent }), onIonAlertWillDismiss: this.dispatchCancelHandler, onIonBackdropTap: this.onBackdropTap }), h("ion-backdrop", { key: '814a4e1b4f7560026b089b762c68401b6277355e', tappable: this.backdropDismiss }), h("div", { key: 'b31ce08019e7223a098d18cb857f72eddc245e98', tabindex: "0" }), h("div", { key: '77efa4b9f7062f55ba0998a09a24550ec0b9b4f5', class: "alert-wrapper ion-overlay-wrapper", ref: (el) => (this.wrapperEl = el) }, h("div", { key: '648e0768610ee57f9e5c84b8955da497ec9b0b82', class: "alert-head" }, header && (h("h2", { id: hdrId, class: "alert-title" }, header)), subHeader && (h("h2", { id: subHdrId, class: "alert-sub-title" }, subHeader))), this.renderAlertMessage(msgId), this.renderAlertInputs(), this.renderAlertButtons()), h("div", { key: 'f3d752cce77ca021dc959611ad5078b94b7f3cec', tabindex: "0" })));
     }
     static get is() { return "ion-alert"; }
     static get encapsulation() { return "scoped"; }
@@ -936,7 +932,7 @@ export class Alert {
                         }, {
                             "name": "role",
                             "type": "string | undefined",
-                            "docs": "The role of the element that is dismissing the alert.\nThis can be useful in a button handler for determining which button was\nclicked to dismiss the alert.\nSome examples include: ``\"cancel\"`, `\"destructive\"`, \"selected\"`, and `\"backdrop\"`.\n\nThis is a no-op if the overlay has not been presented yet. If you want\nto remove an overlay from the DOM that was never presented, use the\n[remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method."
+                            "docs": "The role of the element that is dismissing the alert.\nThis can be useful in a button handler for determining which button was\nclicked to dismiss the alert.\nSome examples include: ``\"cancel\"`, `\"destructive\"`, \"selected\"`, and `\"backdrop\"`."
                         }],
                     "references": {
                         "Promise": {
@@ -953,7 +949,7 @@ export class Alert {
                             "text": "data Any data to emit in the dismiss events."
                         }, {
                             "name": "param",
-                            "text": "role The role of the element that is dismissing the alert.\nThis can be useful in a button handler for determining which button was\nclicked to dismiss the alert.\nSome examples include: ``\"cancel\"`, `\"destructive\"`, \"selected\"`, and `\"backdrop\"`.\n\nThis is a no-op if the overlay has not been presented yet. If you want\nto remove an overlay from the DOM that was never presented, use the\n[remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method."
+                            "text": "role The role of the element that is dismissing the alert.\nThis can be useful in a button handler for determining which button was\nclicked to dismiss the alert.\nSome examples include: ``\"cancel\"`, `\"destructive\"`, \"selected\"`, and `\"backdrop\"`."
                         }]
                 }
             },

package/dist/collection/components/datetime/datetime.js

@@ -11,7 +11,7 @@ import { caretDownSharp, caretUpSharp, chevronBack, chevronDown, chevronForward
 import { getIonMode } from "../../global/ionic-global";
 import { isSameDay, warnIfValueOutOfBounds, isBefore, isAfter } from "./utils/comparison";
 import { generateMonths, getDaysOfMonth, getDaysOfWeek, getToday, getMonthColumnData, getDayColumnData, getYearColumnData, getTimeColumnsData, getCombinedDateColumnData, } from "./utils/data";
-import { formatValue, getLocalizedTime, getMonthAndDay, getMonthAndYear } from "./utils/format";
+import { formatValue, getLocalizedDateTime, getLocalizedTime, getMonthAndYear } from "./utils/format";
 import { isLocaleDayPeriodRTL, isMonthFirstLocale, getNumDaysInMonth, getHourCycle } from "./utils/helpers";
 import { calculateHourFromAMPM, convertDataToISO, getClosestValidDate, getEndOfWeek, getNextDay, getNextMonth, getNextWeek, getNextYear, getPreviousDay, getPreviousMonth, getPreviousWeek, getPreviousYear, getStartOfWeek, validateParts, } from "./utils/manipulation";
 import { clampDate, convertToArrayOfNumbers, getPartsFromCalendarDay, parseAmPm, parseDate, parseMaxParts, parseMinParts, } from "./utils/parse";
@@ -592,6 +592,34 @@ export class Datetime {
             this.resolveForceDateScrolling = undefined;
             this.forceRenderDate = undefined;
         };
+        this.checkForPresentationFormatMismatch = () => {
+            const { formatOptions, presentation } = this;
+            // 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) {
+                        printIonWarning(`Datetime: The '${presentation}' presentation requires a date object in formatOptions.`, this.el);
+                    }
+                    break;
+                case 'time':
+                    if (formatOptions.time === undefined) {
+                        printIonWarning(`Datetime: The 'time' presentation requires a time object in formatOptions.`, this.el);
+                    }
+                    break;
+                case 'date-time':
+                case 'time-date':
+                    if (formatOptions.date === undefined || formatOptions.time === undefined) {
+                        printIonWarning(`Datetime: The '${presentation}' presentation requires both a date and time object in formatOptions.`, this.el);
+                    }
+                    break;
+            }
+        };
         this.onFocus = () => {
             this.ionFocus.emit();
         };
@@ -650,6 +678,7 @@ export class Datetime {
         this.color = 'primary';
         this.name = this.inputId;
         this.disabled = false;
+        this.formatOptions = undefined;
         this.readonly = false;
         this.isDateEnabled = undefined;
         this.min = undefined;
@@ -677,6 +706,10 @@ export class Datetime {
         this.size = 'fixed';
         this.preferWheel = false;
     }
+    formatOptionsChanged() {
+        this.checkForPresentationFormatMismatch();
+        this.errorIfTimeZoneProvided();
+    }
     disabledChanged() {
         this.emitStyle();
     }
@@ -686,6 +719,9 @@ export class Datetime {
     maxChanged() {
         this.processMaxParts();
     }
+    presentationChanged() {
+        this.checkForPresentationFormatMismatch();
+    }
     get isGridStyle() {
         const { presentation, preferWheel } = this;
         const hasDatePresentation = presentation === 'date' || presentation === 'date-time' || presentation === 'time-date';
@@ -921,7 +957,7 @@ export class Datetime {
         });
     }
     componentWillLoad() {
-        const { el, highlightedDates, multiple, presentation, preferWheel } = this;
+        const { el, formatOptions, highlightedDates, multiple, presentation, preferWheel } = this;
         if (multiple) {
             if (presentation !== 'date') {
                 printIonWarning('Multiple date selection is only supported for presentation="date".', el);
@@ -938,6 +974,10 @@ export class Datetime {
                 printIonWarning('The highlightedDates property is not supported with preferWheel="true".', el);
             }
         }
+        if (formatOptions) {
+            this.checkForPresentationFormatMismatch();
+            this.errorIfTimeZoneProvided();
+        }
         const hourValues = (this.parsedHourValues = convertToArrayOfNumbers(this.hourValues));
         const minuteValues = (this.parsedMinuteValues = convertToArrayOfNumbers(this.minuteValues));
         const monthValues = (this.parsedMonthValues = convertToArrayOfNumbers(this.monthValues));
@@ -959,6 +999,21 @@ export class Datetime {
         this.processValue(this.value);
         this.emitStyle();
     }
+    /**
+     * 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.
+     */
+    errorIfTimeZoneProvided() {
+        var _a, _b, _c, _d;
+        const { formatOptions } = this;
+        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)) {
+            printIonWarning('Datetime: "timeZone" and "timeZoneName" are not supported in "formatOptions".');
+        }
+    }
     emitStyle() {
         this.ionStyle.emit({
             interactive: true,
@@ -1445,7 +1500,7 @@ export class Datetime {
         return h("slot", { name: "time-label" }, "Time");
     }
     renderTimeOverlay() {
-        const { disabled, hourCycle, isTimePopoverOpen, locale } = this;
+        const { disabled, hourCycle, isTimePopoverOpen, locale, formatOptions } = this;
         const computedHourCycle = getHourCycle(locale, hourCycle);
         const activePart = this.getActivePartsWithFallback();
         return [
@@ -1465,7 +1520,7 @@ export class Datetime {
                         await popoverRef.onWillDismiss();
                         this.isTimePopoverOpen = false;
                     }
-                } }, getLocalizedTime(locale, activePart, computedHourCycle)),
+                } }, getLocalizedTime(locale, activePart, computedHourCycle, formatOptions === null || formatOptions === void 0 ? void 0 : formatOptions.time)),
             h("ion-popover", { alignment: "center", translucent: true, overlayIndex: 1, arrow: false, onWillPresent: (ev) => {
                     /**
                      * Intersection Observers do not consistently fire between Blink and Webkit
@@ -1488,7 +1543,8 @@ export class Datetime {
         ];
     }
     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) {
@@ -1504,7 +1560,7 @@ export class Datetime {
         }
         else {
             // for exactly 1 day selected (multiple set or not), show a formatted version of that
-            headerText = getMonthAndDay(this.locale, this.getActivePartsWithFallback());
+            headerText = 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;
     }
@@ -1593,7 +1649,7 @@ export class Datetime {
         const hasDatePresentation = presentation === 'date' || presentation === 'date-time' || presentation === 'time-date';
         const hasWheelVariant = hasDatePresentation && preferWheel;
         renderHiddenInput(true, el, name, formatValue(value), disabled);
-        return (h(Host, { key: 'b00545b7bbba3ccf35d53c1eec4f1614fb830c11', "aria-disabled": disabled ? 'true' : null, onFocus: this.onFocus, onBlur: this.onBlur, class: Object.assign({}, createColorClasses(color, {
+        return (h(Host, { key: 'ff50a7d344831b3af2e7f5cfe52b0a71c8c4b8d1', "aria-disabled": disabled ? 'true' : null, onFocus: this.onFocus, onBlur: this.onBlur, class: Object.assign({}, createColorClasses(color, {
                 [mode]: true,
                 ['datetime-readonly']: readonly,
                 ['datetime-disabled']: disabled,
@@ -1681,6 +1737,27 @@ export class Datetime {
                 "reflect": false,
                 "defaultValue": "false"
             },
+            "formatOptions": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "FormatOptions",
+                    "resolved": "undefined | { date: DateTimeFormatOptions; time?: DateTimeFormatOptions | undefined; } | { date?: DateTimeFormatOptions | undefined; time: DateTimeFormatOptions; }",
+                    "references": {
+                        "FormatOptions": {
+                            "location": "import",
+                            "path": "./datetime-interface",
+                            "id": "src/components/datetime/datetime-interface.ts::FormatOptions"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Formatting options for dates and times.\nShould include a 'date' and/or 'time' object, each of which is of type [Intl.DateTimeFormatOptions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat#options)."
+                }
+            },
             "readonly": {
                 "type": "boolean",
                 "mutable": false,
@@ -2376,6 +2453,9 @@ export class Datetime {
     static get elementRef() { return "el"; }
     static get watchers() {
         return [{
+                "propName": "formatOptions",
+                "methodName": "formatOptionsChanged"
+            }, {
                 "propName": "disabled",
                 "methodName": "disabledChanged"
             }, {
@@ -2384,6 +2464,9 @@ export class Datetime {
             }, {
                 "propName": "max",
                 "methodName": "maxChanged"
+            }, {
+                "propName": "presentation",
+                "methodName": "presentationChanged"
             }, {
                 "propName": "yearValues",
                 "methodName": "yearValuesChanged"

package/dist/collection/components/datetime/test/basic/datetime.e2e.js

@@ -402,3 +402,82 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
         });
     });
 });
+/**
+ * This behavior does not differ across
+ * directions.
+ */
+configs({ directions: ['ltr'] }).forEach(({ title, config }) => {
+    test.describe(title('datetime: formatOptions'), () => {
+        test('should format header and time button', async ({ page }) => {
+            await page.setContent(`
+        <ion-datetime value="2022-02-01T16:30:00">
+          <span slot="title">Select Date</span>
+        </ion-datetime>
+        <script>
+          const datetime = document.querySelector('ion-datetime');
+          datetime.formatOptions = {
+            time: { hour: '2-digit', minute: '2-digit' },
+            date: { day: '2-digit', month: 'long', era: 'short' },
+          }
+        </script>
+      `, config);
+            await page.locator('.datetime-ready').waitFor();
+            const headerDate = page.locator('ion-datetime .datetime-selected-date');
+            await expect(headerDate).toHaveText('February 01 AD');
+            const timeBody = page.locator('ion-datetime .time-body');
+            await expect(timeBody).toHaveText('04:30 PM');
+        });
+    });
+});
+/**
+ * This behavior does not differ across
+ * modes/directions.
+ */
+configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
+    test.describe(title('datetime: formatOptions misconfiguration errors'), () => {
+        test('should log a warning if time zone is provided', async ({ page }) => {
+            const logs = [];
+            page.on('console', (msg) => {
+                if (msg.type() === 'warning') {
+                    logs.push(msg.text());
+                }
+            });
+            await page.setContent(`
+        <ion-datetime value="2022-02-01T16:30:00" presentation="date">
+          <span slot="title">Select Date</span>
+        </ion-datetime>
+        <script>
+          const datetime = document.querySelector('ion-datetime');
+          datetime.formatOptions = {
+            date: { timeZone: 'UTC' },
+          }
+        </script>
+      `, config);
+            await page.locator('.datetime-ready').waitFor();
+            expect(logs.length).toBe(1);
+            expect(logs[0]).toContain('[Ionic Warning]: Datetime: "timeZone" and "timeZoneName" are not supported in "formatOptions".');
+        });
+        test('should log a warning if the required formatOptions are not provided for a presentation', async ({ page }) => {
+            const logs = [];
+            page.on('console', (msg) => {
+                if (msg.type() === 'warning') {
+                    logs.push(msg.text());
+                }
+            });
+            await page.setContent(`
+        <ion-datetime value="2022-02-01T16:30:00">
+          <span slot="title">Select Date</span>
+        </ion-datetime>
+        <script>
+          const datetime = document.querySelector('ion-datetime');
+          datetime.formatOptions = {
+            time: { hour: '2-digit', minute: '2-digit' },
+          }
+        </script>
+      `, config);
+            await page.locator('.datetime-ready').waitFor();
+            expect(logs.length).toBe(1);
+            expect(logs[0]).toContain("[Ionic Warning]: Datetime: The 'date-time' presentation requires both a date and time object in formatOptions.");
+        });
+    });
+});

package/dist/collection/components/datetime/test/format.spec.js

@@ -1,7 +1,7 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { generateDayAriaLabel, getMonthAndDay, getFormattedHour, addTimePadding, getMonthAndYear, getLocalizedDayPeriod, getLocalizedTime, } from "../utils/format";
+import { generateDayAriaLabel, getMonthAndDay, getFormattedHour, addTimePadding, getMonthAndYear, getLocalizedDayPeriod, getLocalizedTime, stripTimeZone, } from "../utils/format";
 describe('generateDayAriaLabel()', () => {
     it('should return Wednesday, May 12', () => {
         const reference = { month: 5, day: 12, year: 2021 };
@@ -121,4 +121,68 @@ describe('getLocalizedTime', () => {
         expect(getLocalizedTime('en-US', datetimeParts, 'h12')).toEqual('10:40 PM');
         expect(getLocalizedTime('en-US', datetimeParts, 'h23')).toEqual('22:40');
     });
+    it('should use formatOptions', () => {
+        const datetimeParts = {
+            day: 1,
+            month: 1,
+            year: 2022,
+            hour: 9,
+            minute: 40,
+        };
+        const formatOptions = {
+            hour: '2-digit',
+            minute: '2-digit',
+            dayPeriod: 'short',
+            day: '2-digit',
+        };
+        // Even though this method is intended to be used for time, the date may be displayed as well when passing formatOptions
+        expect(getLocalizedTime('en-US', datetimeParts, 'h12', formatOptions)).toEqual('01, 09:40 in the morning');
+    });
+    it('should override provided time zone with UTC', () => {
+        const datetimeParts = {
+            day: 1,
+            month: 1,
+            year: 2022,
+            hour: 9,
+            minute: 40,
+        };
+        const formatOptions = {
+            timeZone: 'Australia/Sydney',
+            timeZoneName: 'long',
+            hour: 'numeric',
+            minute: 'numeric',
+        };
+        expect(getLocalizedTime('en-US', datetimeParts, 'h12', formatOptions)).toEqual('9:40 AM');
+    });
+    it('should not include time zone name', () => {
+        const datetimeParts = {
+            day: 1,
+            month: 1,
+            year: 2022,
+            hour: 9,
+            minute: 40,
+        };
+        const formatOptions = {
+            timeZone: 'America/Los_Angeles',
+            timeZoneName: 'long',
+            hour: 'numeric',
+            minute: 'numeric',
+        };
+        expect(getLocalizedTime('en-US', datetimeParts, 'h12', formatOptions)).toEqual('9:40 AM');
+    });
+});
+describe('stripTimeZone', () => {
+    it('should remove the time zone name from the options and set the time zone to UTC', () => {
+        const formatOptions = {
+            timeZone: 'America/Los_Angeles',
+            timeZoneName: 'long',
+            hour: 'numeric',
+            minute: 'numeric',
+        };
+        expect(stripTimeZone(formatOptions)).toEqual({
+            timeZone: 'UTC',
+            hour: 'numeric',
+            minute: 'numeric',
+        });
+    });
 });