@ionic/core 7.7.3-dev.11707927732.13defc00 → 7.7.3-dev.11709159644.114cd8b1

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

@@ -4,12 +4,30 @@
 import { newSpecPage } from "@stencil/core/testing";
 import { Searchbar } from "../searchbar";
 describe('searchbar: rendering', () => {
-    it('should inherit attributes', async () => {
+    it('should inherit properties on load', async () => {
         const page = await newSpecPage({
             components: [Searchbar],
-            html: '<ion-searchbar name="search"></ion-searchbar>',
+            html: '<ion-searchbar autocapitalize="off" maxlength="4" minlength="2" name="search"></ion-searchbar>',
         });
         const nativeEl = page.body.querySelector('ion-searchbar input');
         expect(nativeEl.getAttribute('name')).toBe('search');
+        expect(nativeEl.getAttribute('maxlength')).toBe('4');
+        expect(nativeEl.getAttribute('minlength')).toBe('2');
+        expect(nativeEl.getAttribute('autocapitalize')).toBe('off');
+    });
+    it('should inherit watched attributes', async () => {
+        const page = await newSpecPage({
+            components: [Searchbar],
+            html: '<ion-searchbar dir="ltr" lang="en-US"></ion-searchbar>',
+        });
+        const searchbarEl = page.body.querySelector('ion-searchbar');
+        const nativeEl = searchbarEl.querySelector('input');
+        expect(nativeEl.getAttribute('lang')).toBe('en-US');
+        expect(nativeEl.getAttribute('dir')).toBe('ltr');
+        searchbarEl.setAttribute('lang', 'es-ES');
+        searchbarEl.setAttribute('dir', 'rtl');
+        await page.waitForChanges();
+        expect(nativeEl.getAttribute('lang')).toBe('es-ES');
+        expect(nativeEl.getAttribute('dir')).toBe('rtl');
     });
 });

package/dist/docs.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2024-02-14T16:24:00",
+  "timestamp": "2024-02-28T22:36:34",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.12.2",
@@ -7086,6 +7086,44 @@
           "optional": false,
           "required": false
         },
+        {
+          "name": "formatOptions",
+          "type": "undefined | { date: DateTimeFormatOptions; time?: DateTimeFormatOptions | undefined; } | { date?: DateTimeFormatOptions | undefined; time: DateTimeFormatOptions; }",
+          "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"
+              }
+            }
+          },
+          "mutable": false,
+          "reflectToAttr": false,
+          "docs": "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).",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "undefined"
+            },
+            {
+              "type": "{ date: DateTimeFormatOptions; time?: DateTimeFormatOptions"
+            },
+            {
+              "type": "undefined; }"
+            },
+            {
+              "type": "{ date?: DateTimeFormatOptions"
+            },
+            {
+              "type": "undefined; time: DateTimeFormatOptions; }"
+            }
+          ],
+          "optional": true,
+          "required": false
+        },
         {
           "name": "highlightedDates",
           "type": "((dateIsoString: string) => DatetimeHighlightStyle | undefined) | DatetimeHighlight[] | undefined",
@@ -22393,6 +22431,27 @@
           "optional": false,
           "required": false
         },
+        {
+          "name": "autocapitalize",
+          "type": "string",
+          "complexType": {
+            "original": "string",
+            "resolved": "string",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "autocapitalize",
+          "reflectToAttr": false,
+          "docs": "Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user.\nAvailable options: `\"off\"`, `\"none\"`, `\"on\"`, `\"sentences\"`, `\"words\"`, `\"characters\"`.",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": true
+        },
         {
           "name": "autocomplete",
           "type": "\"name\" | \"email\" | \"tel\" | \"url\" | \"on\" | \"off\" | \"honorific-prefix\" | \"given-name\" | \"additional-name\" | \"family-name\" | \"honorific-suffix\" | \"nickname\" | \"username\" | \"new-password\" | \"current-password\" | \"one-time-code\" | \"organization-title\" | \"organization\" | \"street-address\" | \"address-line1\" | \"address-line2\" | \"address-line3\" | \"address-level4\" | \"address-level3\" | \"address-level2\" | \"address-level1\" | \"country\" | \"country-name\" | \"postal-code\" | \"cc-name\" | \"cc-given-name\" | \"cc-additional-name\" | \"cc-family-name\" | \"cc-number\" | \"cc-exp\" | \"cc-exp-month\" | \"cc-exp-year\" | \"cc-csc\" | \"cc-type\" | \"transaction-currency\" | \"transaction-amount\" | \"language\" | \"bday\" | \"bday-day\" | \"bday-month\" | \"bday-year\" | \"sex\" | \"tel-country-code\" | \"tel-national\" | \"tel-area-code\" | \"tel-local\" | \"tel-extension\" | \"impp\" | \"photo\"",
@@ -22943,6 +23002,54 @@
           "optional": true,
           "required": false
         },
+        {
+          "name": "maxlength",
+          "type": "number | undefined",
+          "complexType": {
+            "original": "number",
+            "resolved": "number | undefined",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "maxlength",
+          "reflectToAttr": false,
+          "docs": "This attribute specifies the maximum number of characters that the user can enter.",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "number"
+            },
+            {
+              "type": "undefined"
+            }
+          ],
+          "optional": true,
+          "required": false
+        },
+        {
+          "name": "minlength",
+          "type": "number | undefined",
+          "complexType": {
+            "original": "number",
+            "resolved": "number | undefined",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "minlength",
+          "reflectToAttr": false,
+          "docs": "This attribute specifies the minimum number of characters that the user can enter.",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "number"
+            },
+            {
+              "type": "undefined"
+            }
+          ],
+          "optional": true,
+          "required": false
+        },
         {
           "name": "mode",
           "type": "\"ios\" | \"md\"",
@@ -29369,6 +29476,11 @@
       "docstring": "",
       "path": "src/components/content/content-interface.ts"
     },
+    "src/components/datetime/datetime-interface.ts::FormatOptions": {
+      "declaration": "export type FormatOptions =\n  | {\n      date: Intl.DateTimeFormatOptions;\n      time?: Intl.DateTimeFormatOptions;\n    }\n  | {\n      date?: Intl.DateTimeFormatOptions;\n      time: Intl.DateTimeFormatOptions;\n    };",
+      "docstring": "",
+      "path": "src/components/datetime/datetime-interface.ts"
+    },
     "src/components/datetime/datetime-interface.ts::DatetimePresentation": {
       "declaration": "export type DatetimePresentation = 'date-time' | 'time-date' | 'date' | 'time' | 'month' | 'year' | 'month-year';",
       "docstring": "",

package/dist/esm/{data-0f3ab200.js → data-bb424ba8.js}

@@ -832,7 +832,25 @@ const getFormattedDayPeriod = (dayPeriod) => {
     }
     return dayPeriod.toUpperCase();
 };
-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.
+ */
+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 });
+};
+const getLocalizedTime = (locale, refParts, hourCycle, formatOptions = { hour: 'numeric', minute: 'numeric' }) => {
     const timeParts = {
         hour: refParts.hour,
         minute: refParts.minute,
@@ -840,28 +858,12 @@ 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
@@ -947,14 +949,6 @@ 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.
- */
-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
@@ -965,15 +959,6 @@ 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
- */
-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
@@ -1023,7 +1008,7 @@ const getNormalizedDate = (refParts) => {
  */
 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
@@ -1622,4 +1607,4 @@ const getTimeColumnsData = (locale, refParts, hourCycle, minParts, maxParts, all
     };
 };
 
-export { getNumDaysInMonth as A, getCombinedDateColumnData as B, getMonthColumnData as C, getDayColumnData as D, getYearColumnData as E, isMonthFirstLocale as F, getTimeColumnsData as G, isLocaleDayPeriodRTL as H, getDaysOfWeek as I, getMonthAndYear as J, getDaysOfMonth as K, getHourCycle as L, getLocalizedTime as M, getMonthAndDay as N, formatValue as O, clampDate as P, parseAmPm as Q, calculateHourFromAMPM as R, getLocalizedDateTime as S, getMonthDayAndYear as T, getDay as a, isAfter as b, isSameDay as c, getPreviousMonth as d, getNextMonth as e, getPartsFromCalendarDay as f, generateDayAriaLabel as g, getNextYear as h, isBefore as i, getPreviousYear as j, getEndOfWeek as k, getStartOfWeek as l, getPreviousDay as m, getNextDay as n, getPreviousWeek as o, getNextWeek as p, parseMinParts as q, parseMaxParts as r, parseDate as s, convertToArrayOfNumbers as t, convertDataToISO as u, validateParts as v, warnIfValueOutOfBounds as w, getToday as x, getClosestValidDate as y, generateMonths as z };
+export { getNumDaysInMonth as A, getCombinedDateColumnData as B, getMonthColumnData as C, getDayColumnData as D, getYearColumnData as E, isMonthFirstLocale as F, getTimeColumnsData as G, isLocaleDayPeriodRTL as H, getDaysOfWeek as I, getMonthAndYear as J, getDaysOfMonth as K, getHourCycle as L, getLocalizedTime as M, getLocalizedDateTime as N, formatValue as O, clampDate as P, parseAmPm as Q, calculateHourFromAMPM as R, getDay as a, isAfter as b, isSameDay as c, getPreviousMonth as d, getNextMonth as e, getPartsFromCalendarDay as f, generateDayAriaLabel as g, getNextYear as h, isBefore as i, getPreviousYear as j, getEndOfWeek as k, getStartOfWeek as l, getPreviousDay as m, getNextDay as n, getPreviousWeek as o, getNextWeek as p, parseMinParts as q, parseMaxParts as r, parseDate as s, convertToArrayOfNumbers as t, convertDataToISO as u, validateParts as v, warnIfValueOutOfBounds as w, getToday as x, getClosestValidDate as y, generateMonths as z };

package/dist/esm/ion-app_8.entry.js

@@ -471,9 +471,8 @@ const Content = class {
         const forceOverscroll = this.shouldForceOverscroll();
         const transitionShadow = mode === 'ios';
         const TagType = isMainContent ? 'main' : 'div';
-        console.log('content render');
         this.resize();
-        return (h(Host, { key: '633a697a4212fd7f291052bc5e2907c12992dc0c', class: createColorClasses(this.color, {
+        return (h(Host, { key: '65d85e1f7f85876a76eec79addc4bd9f697a5d84', class: createColorClasses(this.color, {
                 [mode]: true,
                 'content-sizing': hostContext('ion-popover', this.el),
                 overscroll: forceOverscroll,
@@ -481,12 +480,12 @@ const Content = class {
             }), style: {
                 '--offset-top': `${this.cTop}px`,
                 '--offset-bottom': `${this.cBottom}px`,
-            } }, h("div", { key: 'dddbbeb79797bbcab9d75915c843d0be12e1bb59', ref: (el) => (this.backgroundContentEl = el), id: "background-content", part: "background" }), h(TagType, { key: '18f37ebafb0c136ceaf55714c135a2324691d9a9', class: {
+            } }, h("div", { key: 'e2ac474a62cbc864772c497469100436f41289ff', ref: (el) => (this.backgroundContentEl = el), id: "background-content", part: "background" }), h(TagType, { key: '567a4bc2bcb13adfd987b088f95ac4b20b789f2c', 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: '3893e1142367938e35c6ff67095b6074a2b5dad1' })), transitionShadow ? (h("div", { class: "transition-effect" }, h("div", { class: "transition-cover" }), h("div", { class: "transition-shadow" }))) : null, h("slot", { key: '2fb9cdb61bae969d23ee8b190ab26e403a46481d', name: "fixed" })));
+            }, ref: (scrollEl) => (this.scrollEl = scrollEl), onScroll: this.scrollEvents ? (ev) => this.onScroll(ev) : undefined, part: "scroll" }, h("slot", { key: '13909f87dd9f49bf1664ad95038499da376b9480' })), transitionShadow ? (h("div", { class: "transition-effect" }, h("div", { class: "transition-cover" }), h("div", { class: "transition-shadow" }))) : null, h("slot", { key: '05b56c139e203cfd1e3dd08054e99328e97e9243', name: "fixed" })));
     }
     get el() { return getElement(this); }
 };

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

@@ -6,7 +6,7 @@ import { a as addEventListener, c as componentOnReady } from './helpers-c0b9ca37
 import { a as printIonError } from './index-9b0d46f4.js';
 import { c as createColorClasses } from './theme-01f3f29c.js';
 import { b as getIonMode } from './ionic-global-ad9a1810.js';
-import { s as parseDate, x as getToday, L as getHourCycle, S as getLocalizedDateTime, J as getMonthAndYear, M as getLocalizedTime, T as getMonthDayAndYear } from './data-0f3ab200.js';
+import { s as parseDate, x as getToday, L as getHourCycle, N as getLocalizedDateTime, M as getLocalizedTime } from './data-bb424ba8.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;
@@ -40,11 +40,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
@@ -67,8 +68,8 @@ const DatetimeButton = class {
             switch (datetimePresentation) {
                 case 'date-time':
                 case 'time-date':
-                    const dateText = getMonthDayAndYear(locale, firstParsedDatetime);
-                    const timeText = getLocalizedTime(locale, firstParsedDatetime, computedHourCycle);
+                    const dateText = 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 = getLocalizedTime(locale, firstParsedDatetime, computedHourCycle, formatOptions === null || formatOptions === void 0 ? void 0 : formatOptions.time);
                     if (preferWheel) {
                         this.dateText = `${dateText} ${timeText}`;
                     }
@@ -91,20 +92,20 @@ const DatetimeButton = class {
                         this.dateText = headerText;
                     }
                     else {
-                        this.dateText = getMonthDayAndYear(locale, firstParsedDatetime);
+                        this.dateText = 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 = getLocalizedTime(locale, firstParsedDatetime, computedHourCycle);
+                    this.timeText = getLocalizedTime(locale, firstParsedDatetime, computedHourCycle, formatOptions === null || formatOptions === void 0 ? void 0 : formatOptions.time);
                     break;
                 case 'month-year':
-                    this.dateText = getMonthAndYear(locale, firstParsedDatetime);
+                    this.dateText = 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 = getLocalizedDateTime(locale, firstParsedDatetime, { month: 'long' });
+                    this.dateText = 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 = getLocalizedDateTime(locale, firstParsedDatetime, { year: 'numeric' });
+                    this.dateText = getLocalizedDateTime(locale, firstParsedDatetime, (_e = formatOptions === null || formatOptions === void 0 ? void 0 : formatOptions.time) !== null && _e !== void 0 ? _e : { year: 'numeric' });
                     break;
             }
         };
@@ -333,7 +334,7 @@ const DatetimeButton = class {
     render() {
         const { color, dateText, timeText, selectedButton, datetimeActive, disabled } = this;
         const mode = getIonMode(this);
-        return (h(Host, { key: '36fe34d4225940611d74bdef5b954d54749d2dca', class: createColorClasses(color, {
+        return (h(Host, { key: '861a08f4a239de771875aee9b505e06ac7064b32', class: createColorClasses(color, {
                 [mode]: true,
                 [`${selectedButton}-active`]: datetimeActive,
                 ['datetime-button-disabled']: disabled,

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

@@ -9,7 +9,7 @@ import { i as isRTL } from './dir-babeabeb.js';
 import { c as createColorClasses, g as getClassMap } from './theme-01f3f29c.js';
 import { c as chevronBack, o as chevronForward, l as chevronDown, p as caretUpSharp, q as caretDownSharp } from './index-f7dc70ba.js';
 import { b as getIonMode } from './ionic-global-ad9a1810.js';
-import { g as generateDayAriaLabel, a as getDay, i as isBefore, b as isAfter, c as isSameDay, d as getPreviousMonth, e as getNextMonth, v as validateParts, f as getPartsFromCalendarDay, h as getNextYear, j as getPreviousYear, k as getEndOfWeek, l as getStartOfWeek, m as getPreviousDay, n as getNextDay, o as getPreviousWeek, p as getNextWeek, q as parseMinParts, r as parseMaxParts, s as parseDate, w as warnIfValueOutOfBounds, t as convertToArrayOfNumbers, u as convertDataToISO, x as getToday, y as getClosestValidDate, z as generateMonths, A as getNumDaysInMonth, B as getCombinedDateColumnData, C as getMonthColumnData, D as getDayColumnData, E as getYearColumnData, F as isMonthFirstLocale, G as getTimeColumnsData, H as isLocaleDayPeriodRTL, I as getDaysOfWeek, J as getMonthAndYear, K as getDaysOfMonth, L as getHourCycle, M as getLocalizedTime, N as getMonthAndDay, O as formatValue, P as clampDate, Q as parseAmPm, R as calculateHourFromAMPM } from './data-0f3ab200.js';
+import { g as generateDayAriaLabel, a as getDay, i as isBefore, b as isAfter, c as isSameDay, d as getPreviousMonth, e as getNextMonth, v as validateParts, f as getPartsFromCalendarDay, h as getNextYear, j as getPreviousYear, k as getEndOfWeek, l as getStartOfWeek, m as getPreviousDay, n as getNextDay, o as getPreviousWeek, p as getNextWeek, q as parseMinParts, r as parseMaxParts, s as parseDate, w as warnIfValueOutOfBounds, t as convertToArrayOfNumbers, u as convertDataToISO, x as getToday, y as getClosestValidDate, z as generateMonths, A as getNumDaysInMonth, B as getCombinedDateColumnData, C as getMonthColumnData, D as getDayColumnData, E as getYearColumnData, F as isMonthFirstLocale, G as getTimeColumnsData, H as isLocaleDayPeriodRTL, I as getDaysOfWeek, J as getMonthAndYear, K as getDaysOfMonth, L as getHourCycle, M as getLocalizedTime, N as getLocalizedDateTime, O as formatValue, P as clampDate, Q as parseAmPm, R as calculateHourFromAMPM } from './data-bb424ba8.js';
 import { c as createLockController } from './lock-controller-316928be.js';
 import { d as createDelegateController, e as createTriggerController, B as BACKDROP, i as isCancel, j as prepareOverlay, k as setOverlayId, f as present, g as dismiss, h as eventMethod, s as safeCall } from './overlays-04a9a43f.js';
 import { c as createAnimation } from './animation-60dbdd13.js';
@@ -186,6 +186,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)) {
+        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) {
+                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;
+    }
+};
+
 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;
 
@@ -810,6 +852,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;
@@ -837,6 +880,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();
     }
@@ -846,6 +894,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';
@@ -1081,7 +1133,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') {
                 printIonWarning('Multiple date selection is only supported for presentation="date".', el);
@@ -1098,6 +1150,10 @@ const Datetime = class {
                 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));
@@ -1605,7 +1661,7 @@ const Datetime = class {
         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 [
@@ -1625,7 +1681,7 @@ const Datetime = class {
                         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
@@ -1648,7 +1704,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) {
@@ -1664,7 +1721,7 @@ const Datetime = class {
         }
         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;
     }
@@ -1753,7 +1810,7 @@ const Datetime = class {
         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: 'b12b07aebad0a686f93f70dbe29bd039b4c4104f', "aria-disabled": disabled ? 'true' : null, onFocus: this.onFocus, onBlur: this.onBlur, class: Object.assign({}, createColorClasses(color, {
                 [mode]: true,
                 ['datetime-readonly']: readonly,
                 ['datetime-disabled']: disabled,
@@ -1767,9 +1824,11 @@ const Datetime = class {
     }
     get el() { return getElement(this); }
     static get watchers() { return {
+        "formatOptions": ["formatOptionsChanged"],
         "disabled": ["disabledChanged"],
         "min": ["minChanged"],
         "max": ["maxChanged"],
+        "presentation": ["presentationChanged"],
         "yearValues": ["yearValuesChanged"],
         "monthValues": ["monthValuesChanged"],
         "dayValues": ["dayValuesChanged"],