voyager-ionic-core 8.0.0-beta.1 → 8.0.0-beta.2

package/dist/collection/components/card-header/card-header.js

@@ -14,11 +14,11 @@ export class CardHeader {
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { key: '070294064c4b17c941961c9cccf1ae6592b385b6', class: createColorClasses(this.color, {
+        return (h(Host, { key: '05a406ae897dd0d1564bb9d0e213c5c2c21445fa', class: createColorClasses(this.color, {
                 'card-header-translucent': this.translucent,
                 'ion-inherit-color': true,
                 [mode]: true,
-            }) }, h("slot", { key: 'adac918d5e93bf69b07c5bda329ebf8c719bd623' })));
+            }) }, h("slot", { key: '505a74bfb528182bad69d519b848ac2060f4552f' })));
     }
     static get is() { return "ion-card-header"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/card-subtitle/card-subtitle.js

@@ -13,10 +13,10 @@ export class CardSubtitle {
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { key: 'ae115cf349cd13f88d20b1fbab6b8a813a87b925', role: "heading", "aria-level": "3", class: createColorClasses(this.color, {
+        return (h(Host, { key: '4494e715bdff695b17df995bca3c9924cc9dec6c', role: "heading", "aria-level": "3", class: createColorClasses(this.color, {
                 'ion-inherit-color': true,
                 [mode]: true,
-            }) }, h("slot", { key: 'f5dd779b34b5c5c541cbbe56cc8a877e50513252' })));
+            }) }, h("slot", { key: '717e7f2b865b7bb6ae570922eb740c4ae731d85d' })));
     }
     static get is() { return "ion-card-subtitle"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/card-title/card-title.js

@@ -13,10 +13,10 @@ export class CardTitle {
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { key: '432d7bf971fda63c30c748986143ec2a8be9e4af', role: "heading", "aria-level": "2", class: createColorClasses(this.color, {
+        return (h(Host, { key: '1f26cd9bd47f87540dfaff6ac8150a80bcf14475', role: "heading", "aria-level": "2", class: createColorClasses(this.color, {
                 'ion-inherit-color': true,
                 [mode]: true,
-            }) }, h("slot", { key: '3c5dcf6ac1bf981c6c0488f0027765269c80db5a' })));
+            }) }, h("slot", { key: 'b2d51db6dc9284e17cb900af557b36ef866cdc3c' })));
     }
     static get is() { return "ion-card-title"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/checkbox/checkbox.js

@@ -72,7 +72,7 @@ export class Checkbox {
         const mode = getIonMode(this);
         const path = getSVGPath(mode, indeterminate);
         renderHiddenInput(true, el, name, checked ? value : '', disabled);
-        return (h(Host, { key: 'be30606f48a3adf62eddc68b7d7f908d0c46f96d', class: createColorClasses(color, {
+        return (h(Host, { key: '93550068abf4a5103a5d7f06e88e8d004382c203', "aria-checked": indeterminate ? 'mixed' : `${checked}`, class: createColorClasses(color, {
                 [mode]: true,
                 'in-item': hostContext('ion-item', el),
                 'checkbox-checked': checked,
@@ -82,10 +82,10 @@ export class Checkbox {
                 [`checkbox-justify-${justify}`]: true,
                 [`checkbox-alignment-${alignment}`]: true,
                 [`checkbox-label-placement-${labelPlacement}`]: true,
-            }), onClick: this.onClick }, h("label", { key: '96c3f85a0ae6970743f6965d614033426cf2b163', class: "checkbox-wrapper" }, h("input", Object.assign({ key: 'd998089218bcb6065228095e38af936eebfa3780', type: "checkbox", checked: checked ? true : undefined, disabled: disabled, id: inputId, onChange: this.toggleChecked, onFocus: () => this.onFocus(), onBlur: () => this.onBlur(), ref: (focusEl) => (this.focusEl = focusEl) }, inheritedAttributes)), h("div", { key: 'f2374957e47eec899aa2ca49ede4cfdf8397fc18', class: {
+            }), onClick: this.onClick }, h("label", { key: '43c0a59f152c8b836fcfcefd29db16962568b1e1', class: "checkbox-wrapper" }, h("input", Object.assign({ key: '7dc4216a96c001216a99349290d7615032952aee', type: "checkbox", checked: checked ? true : undefined, disabled: disabled, id: inputId, onChange: this.toggleChecked, onFocus: () => this.onFocus(), onBlur: () => this.onBlur(), ref: (focusEl) => (this.focusEl = focusEl) }, inheritedAttributes)), h("div", { key: 'a7454e4c99eb6ea3fe4db171c0071b803949c4d0', class: {
                 'label-text-wrapper': true,
                 'label-text-wrapper-hidden': el.textContent === '',
-            }, part: "label" }, h("slot", { key: '3bd6bc289c26e96cc0b4a8b39154fec1d02ba426' })), h("div", { key: '30397663226d628859d3814f9dc53ee4aad57de5', class: "native-wrapper" }, h("svg", { key: '53374f787677adfdb3b693ead3f8d86412127c10', class: "checkbox-icon", viewBox: "0 0 24 24", part: "container" }, path)))));
+            }, part: "label" }, h("slot", { key: '41741533b49c0281d8ff496c7b5eeccd944d2b2a' })), h("div", { key: 'e3b43df785386c2cd87fb3a38777c34a7d9b32e0', class: "native-wrapper" }, h("svg", { key: 'd3cfb07ec4c7b3e45b9cf5a049fcc841fdb4e2c3', class: "checkbox-icon", viewBox: "0 0 24 24", part: "container" }, path)))));
     }
     getSVGPath(mode, indeterminate) {
         let path = indeterminate ? (h("path", { d: "M6 12L18 12", part: "mark" })) : (h("path", { d: "M5.9,12.5l3.8,3.8l8.8-8.8", part: "mark" }));

package/dist/collection/components/checkbox/test/checkbox.spec.js

@@ -32,3 +32,15 @@ describe('ion-checkbox: disabled', () => {
         expect(checkbox.checked).toBe(false);
     });
 });
+describe('ion-checkbox: indeterminate', () => {
+    it('should have a mixed value for aria-checked', async () => {
+        const page = await newSpecPage({
+            components: [Checkbox],
+            html: `
+        <ion-checkbox indeterminate="true">Checkbox</ion-checkbox>
+      `,
+        });
+        const checkbox = page.body.querySelector('ion-checkbox');
+        expect(checkbox.getAttribute('aria-checked')).toBe('mixed');
+    });
+});

package/dist/collection/components/chip/chip.js

@@ -15,12 +15,12 @@ export class Chip {
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { key: '4c8c83eefc650c00f2c515937df63094f9468bbd', "aria-disabled": this.disabled ? 'true' : null, class: createColorClasses(this.color, {
+        return (h(Host, { key: '6c6497d9397407443784f1b79df0b58d6d24eed2', "aria-disabled": this.disabled ? 'true' : null, class: createColorClasses(this.color, {
                 [mode]: true,
                 'chip-outline': this.outline,
                 'chip-disabled': this.disabled,
                 'ion-activatable': true,
-            }) }, h("slot", { key: '5a94dafd29f2ea7255ba2d4fa173f5eff92146aa' }), mode === 'md' && h("ion-ripple-effect", null)));
+            }) }, h("slot", { key: 'a4d431e3b066420890fcaa30bbc99f1240dff11c' }), mode === 'md' && h("ion-ripple-effect", null)));
     }
     static get is() { return "ion-chip"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/col/col.js

@@ -111,9 +111,9 @@ export class Col {
     render() {
         const isRTL = document.dir === 'rtl';
         const mode = getIonMode(this);
-        return (h(Host, { key: '8bb465c85b64001d6613e8b38cd4f4fd2b4c4a90', class: {
+        return (h(Host, { key: 'af31133e071846ac6609a46eabe59cc481dafdb7', class: {
                 [mode]: true,
-            }, style: Object.assign(Object.assign(Object.assign(Object.assign({}, this.calculateOffset(isRTL)), this.calculatePull(isRTL)), this.calculatePush(isRTL)), this.calculateSize()) }, h("slot", { key: 'fe9f9ce55c86771638413457a0d5dcd9dce29217' })));
+            }, style: Object.assign(Object.assign(Object.assign(Object.assign({}, this.calculateOffset(isRTL)), this.calculatePull(isRTL)), this.calculatePush(isRTL)), this.calculateSize()) }, h("slot", { key: 'd11a95925819a0e2dc69966b7893f0d3efc62eb9' })));
     }
     static get is() { return "ion-col"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/content/content.js

@@ -335,7 +335,7 @@ export class Content {
         const forceOverscroll = this.shouldForceOverscroll();
         const transitionShadow = mode === 'ios';
         this.resize();
-        return (h(Host, { key: '5b6d5c2b8b91ac84dcdf6cf6178a8f7fb970ca00', role: isMainContent ? 'main' : undefined, class: createColorClasses(this.color, {
+        return (h(Host, { key: '133795359748c29c2f26f2c4b05315c1ee2ebf14', role: isMainContent ? 'main' : undefined, class: createColorClasses(this.color, {
                 [mode]: true,
                 'content-sizing': hostContext('ion-popover', this.el),
                 overscroll: forceOverscroll,
@@ -343,12 +343,12 @@ export class Content {
             }), style: {
                 '--offset-top': `${this.cTop}px`,
                 '--offset-bottom': `${this.cBottom}px`,
-            } }, h("div", { key: '4fa58c187e2c2f7f3bc365f485dd80dc0c059d8b', ref: (el) => (this.backgroundContentEl = el), id: "background-content", part: "background" }), h("div", { key: 'f595d0d59e0957acdebd0b16ae79e88da8ed973d', class: {
+            } }, h("div", { key: 'cec324eeb397b9947b48706a726a71c0a338c47b', ref: (el) => (this.backgroundContentEl = el), id: "background-content", part: "background" }), h("div", { key: 'da55ddf94fe7fba83e3625f08ce0561136911828', class: {
                 'inner-scroll': true,
                 'scroll-x': scrollX,
                 'scroll-y': scrollY,
                 overscroll: (scrollX || scrollY) && forceOverscroll,
-            }, ref: (scrollEl) => (this.scrollEl = scrollEl), onScroll: this.scrollEvents ? (ev) => this.onScroll(ev) : undefined, part: "scroll" }, h("slot", { key: '1aceb64f45d13574ea1e20c0885191ced5a0b961' })), transitionShadow ? (h("div", { class: "transition-effect" }, h("div", { class: "transition-cover" }), h("div", { class: "transition-shadow" }))) : null, h("slot", { key: 'd6c4f4d9001da024ec652358f7ae880db75d3a4e', name: "fixed" })));
+            }, ref: (scrollEl) => (this.scrollEl = scrollEl), onScroll: this.scrollEvents ? (ev) => this.onScroll(ev) : undefined, part: "scroll" }, h("slot", { key: '5277456fa0cca2680fbb3ae48f90100ba16bf90d' })), transitionShadow ? (h("div", { class: "transition-effect" }, h("div", { class: "transition-cover" }), h("div", { class: "transition-shadow" }))) : null, h("slot", { key: 'e3dfb4aa64d29e5cc24e8b0cd75a7eb1e0d6954c', name: "fixed" })));
     }
     static get is() { return "ion-content"; }
     static get encapsulation() { return "shadow"; }

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

@@ -11,11 +11,12 @@ 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";
 import { getCalendarDayState, getHighlightStyles, isDayDisabled, isMonthDisabled, isNextMonthDisabled, isPrevMonthDisabled, } from "./utils/state";
+import { checkForPresentationFormatMismatch, warnIfTimeZoneProvided } from "./utils/validate";
 /**
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
  *
@@ -650,6 +651,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 +679,11 @@ export class Datetime {
         this.size = 'fixed';
         this.preferWheel = false;
     }
+    formatOptionsChanged() {
+        const { el, formatOptions, presentation } = this;
+        checkForPresentationFormatMismatch(el, presentation, formatOptions);
+        warnIfTimeZoneProvided(el, formatOptions);
+    }
     disabledChanged() {
         this.emitStyle();
     }
@@ -686,6 +693,10 @@ export class Datetime {
     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';
@@ -921,7 +932,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 +949,10 @@ export class Datetime {
                 printIonWarning('The highlightedDates property is not supported with preferWheel="true".', el);
             }
         }
+        if (formatOptions) {
+            checkForPresentationFormatMismatch(el, presentation, formatOptions);
+            warnIfTimeZoneProvided(el, formatOptions);
+        }
         const hourValues = (this.parsedHourValues = convertToArrayOfNumbers(this.hourValues));
         const minuteValues = (this.parsedMinuteValues = convertToArrayOfNumbers(this.minuteValues));
         const monthValues = (this.parsedMonthValues = convertToArrayOfNumbers(this.monthValues));
@@ -1391,7 +1406,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 [
@@ -1411,7 +1426,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
@@ -1434,7 +1449,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) {
@@ -1450,7 +1466,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;
     }
@@ -1539,7 +1555,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: '2e5ff577327018558a145cff23f03661c2d19c41', "aria-disabled": disabled ? 'true' : null, onFocus: this.onFocus, onBlur: this.onBlur, class: Object.assign({}, createColorClasses(color, {
+        return (h(Host, { key: '1dac1c5d908ba080b2ed4cb9c02fd346ca8e8fa5', "aria-disabled": disabled ? 'true' : null, onFocus: this.onFocus, onBlur: this.onBlur, class: Object.assign({}, createColorClasses(color, {
                 [mode]: true,
                 ['datetime-readonly']: readonly,
                 ['datetime-disabled']: disabled,
@@ -1627,6 +1643,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,
@@ -2322,6 +2359,9 @@ export class Datetime {
     static get elementRef() { return "el"; }
     static get watchers() {
         return [{
+                "propName": "formatOptions",
+                "methodName": "formatOptionsChanged"
+            }, {
                 "propName": "disabled",
                 "methodName": "disabledChanged"
             }, {
@@ -2330,6 +2370,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

@@ -414,3 +414,80 @@ 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 = {}
+        </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 either a date or time object (or both) 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, 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 };
@@ -24,20 +24,6 @@ describe('generateDayAriaLabel()', () => {
         expect(generateDayAriaLabel('en-US', false, reference)).toEqual('Saturday, April 1');
     });
 });
-describe('getMonthAndDay()', () => {
-    it('should return Tue, May 11', () => {
-        expect(getMonthAndDay('en-US', { month: 5, day: 11, year: 2021 })).toEqual('Tue, May 11');
-    });
-    it('should return mar, 11 may', () => {
-        expect(getMonthAndDay('es-ES', { month: 5, day: 11, year: 2021 })).toEqual('mar, 11 may');
-    });
-    it('should return Sat, Apr 1', () => {
-        expect(getMonthAndDay('en-US', { month: 4, day: 1, year: 2006 })).toEqual('Sat, Apr 1');
-    });
-    it('should return sáb, 1 abr', () => {
-        expect(getMonthAndDay('es-ES', { month: 4, day: 1, year: 2006 })).toEqual('sáb, 1 abr');
-    });
-});
 describe('getFormattedHour()', () => {
     it('should only add padding if using 24 hour time', () => {
         expect(getFormattedHour(1, 'h11')).toEqual('1');
@@ -121,4 +107,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',
+        });
+    });
 });

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

@@ -9,7 +9,26 @@ const getFormattedDayPeriod = (dayPeriod) => {
     }
     return dayPeriod.toUpperCase();
 };
-export const getLocalizedTime = (locale, refParts, hourCycle) => {
+/**
+ * Including time zone options may lead to the rendered text showing a
+ * different time from what was selected in the Datetime, which could cause
+ * confusion.
+ */
+export const stripTimeZone = (formatOptions) => {
+    return Object.assign(Object.assign({}, formatOptions), {
+        /**
+         * Setting the time zone to UTC ensures that the value shown is always the
+         * same as what was selected and safeguards against older Safari bugs with
+         * Intl.DateTimeFormat.
+         */
+        timeZone: 'UTC',
+        /**
+         * We do not want to display the time zone name
+         */
+        timeZoneName: undefined
+    });
+};
+export const getLocalizedTime = (locale, refParts, hourCycle, formatOptions = { hour: 'numeric', minute: 'numeric' }) => {
     const timeParts = {
         hour: refParts.hour,
         minute: refParts.minute,
@@ -17,28 +36,13 @@ export const getLocalizedTime = (locale, refParts, hourCycle) => {
     if (timeParts.hour === undefined || timeParts.minute === undefined) {
         return 'Invalid Time';
     }
-    return new Intl.DateTimeFormat(locale, {
-        hour: 'numeric',
-        minute: 'numeric',
-        /**
-         * Setting the timeZone to UTC prevents
-         * new Intl.DatetimeFormat from subtracting
-         * the user's current timezone offset
-         * when formatting the time.
-         */
-        timeZone: 'UTC',
+    return new Intl.DateTimeFormat(locale, Object.assign(Object.assign({}, stripTimeZone(formatOptions)), {
         /**
          * We use hourCycle here instead of hour12 due to:
          * https://bugs.chromium.org/p/chromium/issues/detail?id=1347316&q=hour12&can=2
          */
-        hourCycle,
-        /**
-         * Setting Z at the end indicates that this
-         * date string is in the UTC time zone. This
-         * prevents new Date from adding the time zone
-         * offset when getting the ISO string.
-         */
-    }).format(new Date(convertDataToISO(Object.assign({
+        hourCycle
+    })).format(new Date(convertDataToISO(Object.assign({
         /**
          * JS uses a simplified ISO 8601 format which allows for
          * date-only formats and date-time formats, but not
@@ -125,14 +129,6 @@ export const generateDayAriaLabel = (locale, today, refParts) => {
      */
     return today ? `Today, ${labelString}` : labelString;
 };
-/**
- * Gets the day of the week, month, and day
- * Used for the header in MD mode.
- */
-export const getMonthAndDay = (locale, refParts) => {
-    const date = getNormalizedDate(refParts);
-    return new Intl.DateTimeFormat(locale, { weekday: 'short', month: 'short', day: 'numeric', timeZone: 'UTC' }).format(date);
-};
 /**
  * Given a locale and a date object,
  * return a formatted string that includes
@@ -143,15 +139,6 @@ export const getMonthAndYear = (locale, refParts) => {
     const date = getNormalizedDate(refParts);
     return new Intl.DateTimeFormat(locale, { month: 'long', year: 'numeric', timeZone: 'UTC' }).format(date);
 };
-/**
- * Given a locale and a date object,
- * return a formatted string that includes
- * the short month, numeric day, and full year.
- * Example: Apr 22, 2021
- */
-export const getMonthDayAndYear = (locale, refParts) => {
-    return getLocalizedDateTime(locale, refParts, { month: 'short', day: 'numeric', year: 'numeric' });
-};
 /**
  * Given a locale and a date object,
  * return a formatted string that includes
@@ -201,7 +188,7 @@ export const getNormalizedDate = (refParts) => {
  */
 export const getLocalizedDateTime = (locale, refParts, options) => {
     const date = getNormalizedDate(refParts);
-    return getDateTimeFormat(locale, options).format(date);
+    return getDateTimeFormat(locale, stripTimeZone(options)).format(date);
 };
 /**
  * Given a locale, DatetimeParts, and options

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

@@ -0,0 +1,45 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { printIonWarning } from "../../../utils/logging/index";
+/**
+ * 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.
+ */
+export 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)) {
+        printIonWarning('Datetime: "timeZone" and "timeZoneName" are not supported in "formatOptions".', el);
+    }
+};
+export 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) {
+                printIonWarning(`Datetime: The '${presentation}' presentation requires a date object in formatOptions.`, el);
+            }
+            break;
+        case 'time':
+            if (formatOptions.time === undefined) {
+                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) {
+                printIonWarning(`Datetime: The '${presentation}' presentation requires either a date or time object (or both) in formatOptions.`, el);
+            }
+            break;
+    }
+};