@ionic/core 7.7.2-dev.11707840956.16e27b4c → 7.7.2-dev.11707926434.1affaed4

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',
+        });
+    });
 });

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

@@ -9,7 +9,25 @@ 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) => {
+    /**
+     * We do not want to display the time zone name
+     */
+    delete formatOptions.timeZoneName;
+    /**
+     * 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.
+     */
+    formatOptions.timeZone = 'UTC';
+    return formatOptions;
+};
+export const getLocalizedTime = (locale, refParts, hourCycle, formatOptions) => {
     const timeParts = {
         hour: refParts.hour,
         minute: refParts.minute,
@@ -17,28 +35,18 @@ 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',
+    const defaultFormatOptions = { hour: 'numeric', minute: 'numeric' };
+    /**
+     * If any options are provided, don't use any of the defaults.
+     */
+    const options = stripTimeZone(formatOptions !== null && formatOptions !== void 0 ? formatOptions : defaultFormatOptions);
+    return new Intl.DateTimeFormat(locale, Object.assign(Object.assign({}, options), {
         /**
          * 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
@@ -201,7 +209,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-button/datetime-button.js

@@ -7,7 +7,7 @@ import { printIonError } from "../../utils/logging/index";
 import { createColorClasses } from "../../utils/theme";
 import { getIonMode } from "../../global/ionic-global";
 import { getToday } from "../datetime/utils/data";
-import { getMonthAndYear, getMonthDayAndYear, getLocalizedDateTime, getLocalizedTime } from "../datetime/utils/format";
+import { getLocalizedDateTime, getLocalizedTime } from "../datetime/utils/format";
 import { getHourCycle } from "../datetime/utils/helpers";
 import { parseDate } from "../datetime/utils/parse";
 /**
@@ -43,11 +43,12 @@ export class DatetimeButton {
          * 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
@@ -70,8 +71,8 @@ export class DatetimeButton {
             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}`;
                     }
@@ -94,20 +95,20 @@ export class DatetimeButton {
                         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;
             }
         };
@@ -336,7 +337,7 @@ export class DatetimeButton {
     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/collection/components/datetime-button/test/basic/datetime-button.e2e.js

@@ -174,4 +174,70 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
             await expect(page.locator('#time-button')).not.toBeVisible();
         });
     });
+    test.describe(title('datetime-button: formatOptions'), () => {
+        test('should include date and time for presentation date-time', async ({ page }) => {
+            await page.setContent(`
+        <ion-datetime-button datetime="datetime"></ion-datetime-button>
+        <ion-datetime id="datetime" presentation="date-time" value="2023-11-02T01:22:00" locale="en-US"></ion-datetime>
+        <script>
+          const datetime = document.querySelector('ion-datetime');
+          datetime.formatOptions = {
+            date: {
+              weekday: "short",
+              month: "long",
+              day: "2-digit"
+            },
+            time: {
+              hour: "2-digit",
+              minute: "2-digit"
+            }
+          }
+        </script>
+      `, config);
+            await page.locator('.datetime-ready').waitFor();
+            await expect(page.locator('#date-button')).toContainText('Thu, November 02');
+            await expect(page.locator('#time-button')).toContainText('01:22 AM');
+        });
+        test('should include date for presentation date', async ({ page }) => {
+            await page.setContent(`
+        <ion-datetime-button datetime="datetime"></ion-datetime-button>
+        <ion-datetime id="datetime" presentation="date" value="2023-11-02" locale="en-US"></ion-datetime>
+        <script>
+          const datetime = document.querySelector('ion-datetime');
+          datetime.formatOptions = {
+            date: {
+              weekday: "short",
+              month: "long",
+              day: "2-digit"
+            }
+          }
+        </script>
+      `, config);
+            await page.locator('.datetime-ready').waitFor();
+            await expect(page.locator('#date-button')).toContainText('Thu, November 02');
+        });
+        test('should include date and time in same button for preferWheel', async ({ page }) => {
+            await page.setContent(`
+        <ion-datetime-button datetime="datetime"></ion-datetime-button>
+        <ion-datetime id="datetime" presentation="date-time" value="2023-11-02T01:22:00" locale="en-US" prefer-wheel="true"></ion-datetime>
+        <script>
+        const datetime = document.querySelector('ion-datetime');
+        datetime.formatOptions = {
+          date: {
+            weekday: "short",
+            month: "long",
+            day: "2-digit"
+          },
+          time: {
+            hour: "2-digit",
+            minute: "2-digit"
+          }
+        }
+        </script>
+      `, config);
+            await page.locator('.datetime-ready').waitFor();
+            await page.pause();
+            await expect(page.locator('ion-datetime-button')).toContainText('Thu, November 02 01:22 AM');
+        });
+    });
 });

package/dist/collection/components/label/label.ios.css

@@ -71,6 +71,10 @@
   overflow: hidden;
 }
 
+:host-context(.item:not(.item-input):not(.item-legacy)) {
+  flex-grow: 1;
+}
+
 :host(.ion-color) {
   color: var(--ion-color-base);
 }

package/dist/collection/components/label/label.md.css

@@ -71,6 +71,10 @@
   overflow: hidden;
 }
 
+:host-context(.item:not(.item-input):not(.item-legacy)) {
+  flex-grow: 1;
+}
+
 :host(.ion-color) {
   color: var(--ion-color-base);
 }

package/dist/collection/components/loading/loading.js

@@ -113,10 +113,6 @@ export class Loading {
      * This can be useful in a button handler for determining which button was
      * clicked to dismiss the loading.
      * 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();
@@ -158,9 +154,9 @@ export class Loading {
          * Otherwise, don't set aria-labelledby.
          */
         const ariaLabelledBy = message !== undefined ? msgId : null;
-        return (h(Host, Object.assign({ key: '95123f54ba1db5e59563d79db075315b43ed20f7', role: "dialog", "aria-modal": "true", "aria-labelledby": ariaLabelledBy, tabindex: "-1" }, htmlAttributes, { style: {
+        return (h(Host, Object.assign({ key: '81295894ca6e047124918420f2483c092ebf91b9', role: "dialog", "aria-modal": "true", "aria-labelledby": ariaLabelledBy, tabindex: "-1" }, htmlAttributes, { style: {
                 zIndex: `${40000 + this.overlayIndex}`,
-            }, onIonBackdropTap: this.onBackdropTap, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [mode]: true, 'overlay-hidden': true, 'loading-translucent': this.translucent }) }), h("ion-backdrop", { key: 'e113bf123eaad38f2dafce8ea5d2ebef409d0c0f', visible: this.showBackdrop, tappable: this.backdropDismiss }), h("div", { key: '1268c9480854383c7883a79d597350540ade93c2', tabindex: "0" }), h("div", { key: 'e86fc71504ebd578117dea2232d9740a087d1249', class: "loading-wrapper ion-overlay-wrapper" }, spinner && (h("div", { class: "loading-spinner" }, h("ion-spinner", { name: spinner, "aria-hidden": "true" }))), message !== undefined && this.renderLoadingMessage(msgId)), h("div", { key: '3b91e2492e06aa65ebe77ed2b6ffb9d2f84bdd9c', tabindex: "0" })));
+            }, onIonBackdropTap: this.onBackdropTap, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [mode]: true, 'overlay-hidden': true, 'loading-translucent': this.translucent }) }), h("ion-backdrop", { key: 'db9fbd946cf3eb03c3a70f2e71c49ab233df1879', visible: this.showBackdrop, tappable: this.backdropDismiss }), h("div", { key: 'd27b03de0b450c0668d4b4077d76bc5b283f03cf', tabindex: "0" }), h("div", { key: '7112719ddd487365c1e36fc4dec32aac888dbb52', class: "loading-wrapper ion-overlay-wrapper" }, spinner && (h("div", { class: "loading-spinner" }, h("ion-spinner", { name: spinner, "aria-hidden": "true" }))), message !== undefined && this.renderLoadingMessage(msgId)), h("div", { key: '5715dd7dae209ae58e5557cb60f3ae514752b822', tabindex: "0" })));
     }
     static get is() { return "ion-loading"; }
     static get encapsulation() { return "scoped"; }
@@ -684,7 +680,7 @@ export class Loading {
                         }, {
                             "name": "role",
                             "type": "string | undefined",
-                            "docs": "The role of the element that is dismissing the loading.\nThis can be useful in a button handler for determining which button was\nclicked to dismiss the loading.\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 loading.\nThis can be useful in a button handler for determining which button was\nclicked to dismiss the loading.\nSome examples include: ``\"cancel\"`, `\"destructive\"`, \"selected\"`, and `\"backdrop\"`."
                         }],
                     "references": {
                         "Promise": {
@@ -701,7 +697,7 @@ export class Loading {
                             "text": "data Any data to emit in the dismiss events."
                         }, {
                             "name": "param",
-                            "text": "role The role of the element that is dismissing the loading.\nThis can be useful in a button handler for determining which button was\nclicked to dismiss the loading.\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 loading.\nThis can be useful in a button handler for determining which button was\nclicked to dismiss the loading.\nSome examples include: ``\"cancel\"`, `\"destructive\"`, \"selected\"`, and `\"backdrop\"`."
                         }]
                 }
             },