@ionic/core 7.7.5 → 7.8.1-dev.11710449785.14ebd5a0

package/components/label.js

@@ -63,7 +63,7 @@ const Label = /*@__PURE__*/ proxyCustomElement(class Label extends HTMLElement {
     render() {
         const position = this.position;
         const mode = getIonMode(this);
-        return (h(Host, { key: '813192a6460057c6d1e42f50f3f257bee2f550d8', class: createColorClasses(this.color, {
+        return (h(Host, { key: 'c80cc1b4dcd56f614efc1e63ca80bca2f20a7151', class: createColorClasses(this.color, {
                 [mode]: true,
                 'in-item-color': hostContext('ion-item.ion-color', this.el),
                 [`label-${position}`]: position !== undefined,

package/components/list-header.js

@@ -22,10 +22,10 @@ const ListHeader = /*@__PURE__*/ proxyCustomElement(class ListHeader extends HTM
     render() {
         const { lines } = this;
         const mode = getIonMode(this);
-        return (h(Host, { key: '1b832a6882307d40fe4afc9a95a5db4fbdff60a3', class: createColorClasses(this.color, {
+        return (h(Host, { key: '27a08e9dc880db9377608ea262e254b0856b0d5c', class: createColorClasses(this.color, {
                 [mode]: true,
                 [`list-header-lines-${lines}`]: lines !== undefined,
-            }) }, h("div", { key: 'a53a3f05727b510d1b912c10c92a4aa58f4fe860', class: "list-header-inner" }, h("slot", { key: '9377dee83f050b2cb2c5b7c5d106668cc81d8f90' }))));
+            }) }, h("div", { key: 'edd68f126ee5d815e6ae13e9662e8cedbd2d46e5', class: "list-header-inner" }, h("slot", { key: 'dae94a382ef09bb90d3ff3fbb2306515acfc2014' }))));
     }
     static get style() { return {
         ios: IonListHeaderIosStyle0,

package/components/list.js

@@ -33,7 +33,7 @@ const List = /*@__PURE__*/ proxyCustomElement(class List extends HTMLElement {
     render() {
         const mode = getIonMode(this);
         const { lines, inset } = this;
-        return (h(Host, { key: '2cb1b689d9460d9576b471bb8b13d14fe34d1c2c', role: "list", class: {
+        return (h(Host, { key: '7f259d2a107807065a440cca848ececa0da60458', role: "list", class: {
                 [mode]: true,
                 // Used internally for styling
                 [`list-${mode}`]: true,

package/components/note.js

@@ -20,9 +20,9 @@ const Note = /*@__PURE__*/ proxyCustomElement(class Note extends HTMLElement {
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { key: 'eebc0ea94483a248192408a1546739700281d2ae', class: createColorClasses(this.color, {
+        return (h(Host, { key: 'de9f59a3e1700776780e61def3044901e1d1bef5', class: createColorClasses(this.color, {
                 [mode]: true,
-            }) }, h("slot", { key: '33018e11967398327a0e7c20522547a4d9e8f55b' })));
+            }) }, h("slot", { key: '30f98649d4d31a297ab71d23ed38fa021540a8f2' })));
     }
     static get style() { return {
         ios: IonNoteIosStyle0,

package/components/picker-column-internal.js

@@ -250,7 +250,11 @@ const PickerColumnInternal = /*@__PURE__*/ proxyCustomElement(class PickerColumn
      */
     componentWillLoad() {
         const visibleCallback = (entries) => {
-            const ev = entries[0];
+            /**
+             * Browsers will sometimes group multiple IO events into a single callback.
+             * As a result, we want to grab the last/most recent event in case there are multiple events.
+             */
+            const ev = entries[entries.length - 1];
             if (ev.isIntersecting) {
                 const { activeItem, el } = this;
                 this.isColumnVisible = true;
@@ -339,18 +343,18 @@ const PickerColumnInternal = /*@__PURE__*/ proxyCustomElement(class PickerColumn
          * the attribute can be moved to datetime.tsx and set on every
          * instance of ion-picker-column-internal there instead.
          */
-        return (h(Host, { key: 'd0e3818aa4ab06aefd988d1b42ae754244727b8f', exportparts: `${PICKER_ITEM_PART}, ${PICKER_ITEM_ACTIVE_PART}`, disabled: pickerDisabled, tabindex: pickerDisabled ? null : 0, class: createColorClasses(color, {
+        return (h(Host, { key: 'eeb70e31fca7bff943a2fc29a3da0383520fdd84', exportparts: `${PICKER_ITEM_PART}, ${PICKER_ITEM_ACTIVE_PART}`, disabled: pickerDisabled, tabindex: pickerDisabled ? null : 0, class: createColorClasses(color, {
                 [mode]: true,
                 ['picker-column-active']: isActive,
                 ['picker-column-numeric-input']: numericInput,
-            }) }, h("div", { key: 'ec3b16415db5f64e3fab37fda023560ebcdc9423', class: "picker-item picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: '40c78c9a1277807572d73e23048c2730cab88f5a', class: "picker-item picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: 'c51fa817f6999356cf3568a46098e954936b45d5', class: "picker-item picker-item-empty", "aria-hidden": "true" }, "\u00A0"), items.map((item, index) => {
+            }) }, h("div", { key: '08cffb51ab2ce1a4b83e35b25afd2880d6949d8e', class: "picker-item picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: '88389ba5287ee5e251fa36a0e13a888c8dfbf8e8', class: "picker-item picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: '2dc958f37a939a0fbbc35d92482e9c64741d8f5a', class: "picker-item picker-item-empty", "aria-hidden": "true" }, "\u00A0"), items.map((item, index) => {
             const isItemDisabled = pickerDisabled || item.disabled || false;
             return (h("button", { tabindex: "-1", class: {
                     'picker-item': true,
                 }, "data-value": item.value, "data-index": index, onClick: (ev) => {
                     this.centerPickerItemInView(ev.target, true);
                 }, disabled: isItemDisabled, part: PICKER_ITEM_PART }, item.text));
-        }), h("div", { key: '80a7461dfe571f46466219b05007b021711aed32', class: "picker-item picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: 'fed82263295f58c51e2b753d0c06c7d71872b8a7', class: "picker-item picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: 'e805dff4122cc4e5fb4d7dcb96054fee8ad3bd07', class: "picker-item picker-item-empty", "aria-hidden": "true" }, "\u00A0")));
+        }), h("div", { key: 'd31f134aa67a10ad1b796a4e1ffbea439b2b3723', class: "picker-item picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: '3015f7f774b44d349f445e585b73295814c76326', class: "picker-item picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: 'df165c76253e51bd6968bdcd8071ad69467bda4c', class: "picker-item picker-item-empty", "aria-hidden": "true" }, "\u00A0")));
     }
     get el() { return this; }
     static get watchers() { return {

package/components/picker-column.js

@@ -343,9 +343,9 @@ const PickerColumnCmp = /*@__PURE__*/ proxyCustomElement(class PickerColumnCmp e
     render() {
         const col = this.col;
         const mode = getIonMode(this);
-        return (h(Host, { key: '06e2ae483a3bcf4fe721ad0c48cded6a1efdc6c0', class: Object.assign({ [mode]: true, 'picker-col': true, 'picker-opts-left': this.col.align === 'left', 'picker-opts-right': this.col.align === 'right' }, getClassMap(col.cssClass)), style: {
+        return (h(Host, { key: 'b0d3c8b8315f130f1bcddcbc53ee9949676423bf', class: Object.assign({ [mode]: true, 'picker-col': true, 'picker-opts-left': this.col.align === 'left', 'picker-opts-right': this.col.align === 'right' }, getClassMap(col.cssClass)), style: {
                 'max-width': this.col.columnWidth,
-            } }, col.prefix && (h("div", { class: "picker-prefix", style: { width: col.prefixWidth } }, col.prefix)), h("div", { key: '14bea013788d899edf7155eb3cc10f79fe8e4690', class: "picker-opts", style: { maxWidth: col.optionsWidth }, ref: (el) => (this.optsEl = el) }, col.options.map((o, index) => (h("button", { "aria-label": o.ariaLabel, class: { 'picker-opt': true, 'picker-opt-disabled': !!o.disabled }, "opt-index": index }, o.text)))), col.suffix && (h("div", { class: "picker-suffix", style: { width: col.suffixWidth } }, col.suffix))));
+            } }, col.prefix && (h("div", { class: "picker-prefix", style: { width: col.prefixWidth } }, col.prefix)), h("div", { key: '2c0471c265bc3dfa2d415da77b8a70850e74458e', class: "picker-opts", style: { maxWidth: col.optionsWidth }, ref: (el) => (this.optsEl = el) }, col.options.map((o, index) => (h("button", { "aria-label": o.ariaLabel, class: { 'picker-opt': true, 'picker-opt-disabled': !!o.disabled }, "opt-index": index }, o.text)))), col.suffix && (h("div", { class: "picker-suffix", style: { width: col.suffixWidth } }, col.suffix))));
     }
     get el() { return this; }
     static get watchers() { return {

package/components/picker-internal.js

@@ -475,7 +475,7 @@ const PickerInternal = /*@__PURE__*/ proxyCustomElement(class PickerInternal ext
         this.emitInputModeChange();
     }
     render() {
-        return (h(Host, { key: 'f6b301345583f5ccfc31cce536176af7aeefd193', onPointerDown: (ev) => this.onPointerDown(ev), onClick: () => this.onClick() }, h("input", { key: 'e57fd191d49cc500b719d5b9ad35054d55e96c43', "aria-hidden": "true", tabindex: -1, inputmode: "numeric", type: "number", onKeyDown: (ev) => {
+        return (h(Host, { key: '49581a3c11cd7808555c576c46b833ac9d60f71a', onPointerDown: (ev) => this.onPointerDown(ev), onClick: () => this.onClick() }, h("input", { key: '92628e29f76914b955aa11d4e45797a941821159', "aria-hidden": "true", tabindex: -1, inputmode: "numeric", type: "number", onKeyDown: (ev) => {
                 var _a;
                 /**
                  * The "Enter" key represents
@@ -490,7 +490,7 @@ const PickerInternal = /*@__PURE__*/ proxyCustomElement(class PickerInternal ext
                 if (ev.key === 'Enter') {
                     (_a = this.inputEl) === null || _a === void 0 ? void 0 : _a.blur();
                 }
-            }, ref: (el) => (this.inputEl = el), onInput: () => this.onInputChange(), onBlur: () => this.exitInputMode() }), h("div", { key: '3360e7d913f87293844928e430acde69d399f68e', class: "picker-before" }), h("div", { key: '4db89e681458d4eec5d60ff47d3e0ba9fd116682', class: "picker-after" }), h("div", { key: 'a21b20d77dac8141623995b5a53f416d3d9fc1ef', class: "picker-highlight", ref: (el) => (this.highlightEl = el) }), h("slot", { key: '86c7d926523b615b4769bd1a4e9713b351089369' })));
+            }, ref: (el) => (this.inputEl = el), onInput: () => this.onInputChange(), onBlur: () => this.exitInputMode() }), h("div", { key: '455d7ef6dd1425e882d86f49e0d817883fe222b2', class: "picker-before" }), h("div", { key: '0351296cf171d22840542eb178ec3fae1e90f5d5', class: "picker-after" }), h("div", { key: 'b4ecaa88d0bbbd69e72b3d4f27ad3bd91f3da84d', class: "picker-highlight", ref: (el) => (this.highlightEl = el) }), h("slot", { key: 'fac29c179707002861f39d2ba1ea53479d0d9b74' })));
     }
     get el() { return this; }
     static get style() { return {

package/components/popover.js

@@ -1292,9 +1292,9 @@ const Popover = /*@__PURE__*/ proxyCustomElement(class Popover extends HTMLEleme
         const { onLifecycle, parentPopover, dismissOnSelect, side, arrow, htmlAttributes } = this;
         const desktop = isPlatform('desktop');
         const enableArrow = arrow && !parentPopover;
-        return (h(Host, Object.assign({ key: '104a5bf92a9bbd2efc71d499a8500e5d55f81711', "aria-modal": "true", "no-router": true, tabindex: "-1" }, htmlAttributes, { style: {
+        return (h(Host, Object.assign({ key: 'b35e04a59d2feff922709efc5045e4e9f65db80d', "aria-modal": "true", "no-router": true, tabindex: "-1" }, htmlAttributes, { style: {
                 zIndex: `${20000 + this.overlayIndex}`,
-            }, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [mode]: true, 'popover-translucent': this.translucent, 'overlay-hidden': true, 'popover-desktop': desktop, [`popover-side-${side}`]: true, 'popover-nested': !!parentPopover }), onIonPopoverDidPresent: onLifecycle, onIonPopoverWillPresent: onLifecycle, onIonPopoverWillDismiss: onLifecycle, onIonPopoverDidDismiss: onLifecycle, onIonBackdropTap: this.onBackdropTap }), !parentPopover && h("ion-backdrop", { tappable: this.backdropDismiss, visible: this.showBackdrop, part: "backdrop" }), h("div", { key: 'ef0baa04c22444d4bc705220235a892308d67586', class: "popover-wrapper ion-overlay-wrapper", onClick: dismissOnSelect ? () => this.dismiss() : undefined }, enableArrow && h("div", { class: "popover-arrow", part: "arrow" }), h("div", { key: '5cc5f5c353de614e484e9cfeacecfca9fbfde0e0', class: "popover-content", part: "content" }, h("slot", { key: '2d85c591cdc85efa98afbf40f676525f1402efcf' })))));
+            }, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [mode]: true, 'popover-translucent': this.translucent, 'overlay-hidden': true, 'popover-desktop': desktop, [`popover-side-${side}`]: true, 'popover-nested': !!parentPopover }), onIonPopoverDidPresent: onLifecycle, onIonPopoverWillPresent: onLifecycle, onIonPopoverWillDismiss: onLifecycle, onIonPopoverDidDismiss: onLifecycle, onIonBackdropTap: this.onBackdropTap }), !parentPopover && h("ion-backdrop", { tappable: this.backdropDismiss, visible: this.showBackdrop, part: "backdrop" }), h("div", { key: '99d26b7ebd403061f4fe75c10b8106d5795cbbc0', class: "popover-wrapper ion-overlay-wrapper", onClick: dismissOnSelect ? () => this.dismiss() : undefined }, enableArrow && h("div", { class: "popover-arrow", part: "arrow" }), h("div", { key: '6179601846f042b7b3be20c93845464ec8bef98a', class: "popover-content", part: "content" }, h("slot", { key: '2ba4f3ba26adfd3d42fa78ca6b6561d4088be8a8' })))));
     }
     get el() { return this; }
     static get watchers() { return {

package/components/radio-group.js

@@ -158,7 +158,7 @@ const RadioGroup = /*@__PURE__*/ proxyCustomElement(class RadioGroup extends HTM
         const { label, labelId, el, name, value } = this;
         const mode = getIonMode(this);
         renderHiddenInput(true, el, name, value, false);
-        return h(Host, { key: 'd8e84feca8f4dbe7605bc4ad096b6e68b482ba68', role: "radiogroup", "aria-labelledby": label ? labelId : null, onClick: this.onClick, class: mode });
+        return h(Host, { key: 'c0784903ad0b3914f448cca4b91172ad3af3ed70', role: "radiogroup", "aria-labelledby": label ? labelId : null, onClick: this.onClick, class: mode });
     }
     get el() { return this; }
     static get watchers() { return {

package/components/ripple-effect.js

@@ -66,7 +66,7 @@ const RippleEffect = /*@__PURE__*/ proxyCustomElement(class RippleEffect extends
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { key: 'a9ff1956627908ee4071002ca018eaa80f87cd59', role: "presentation", class: {
+        return (h(Host, { key: '9f2578664e5ff8a0a7e27cd90b2339bd430e72b8', role: "presentation", class: {
                 [mode]: true,
                 unbounded: this.unbounded,
             } }));

package/components/select-popover.js

@@ -118,7 +118,7 @@ const SelectPopover = /*@__PURE__*/ proxyCustomElement(class SelectPopover exten
     render() {
         const { header, message, options, subHeader } = this;
         const hasSubHeaderOrMessage = subHeader !== undefined || message !== undefined;
-        return (h(Host, { key: '9d3995131364d4f1d282e0a1fc34e778e94c9f98', class: getIonMode(this) }, h("ion-list", { key: '14244dcd6375eb61d65f3a9450d42a5d7b2d6541' }, header !== undefined && h("ion-list-header", null, header), hasSubHeaderOrMessage && (h("ion-item", null, h("ion-label", { class: "ion-text-wrap" }, subHeader !== undefined && h("h3", null, subHeader), message !== undefined && h("p", null, message)))), this.renderOptions(options))));
+        return (h(Host, { key: '46e495ce7001131eb8b54073018de89401a99b81', class: getIonMode(this) }, h("ion-list", { key: 'afdb72359c3751c6b372af1a778398463d1da397' }, header !== undefined && h("ion-list-header", null, header), hasSubHeaderOrMessage && (h("ion-item", null, h("ion-label", { class: "ion-text-wrap" }, subHeader !== undefined && h("h3", null, subHeader), message !== undefined && h("p", null, message)))), this.renderOptions(options))));
     }
     get el() { return this; }
     static get style() { return {

package/components/spinner.js

@@ -185,7 +185,7 @@ const Spinner = /*@__PURE__*/ proxyCustomElement(class Spinner extends HTMLEleme
                 svgs.push(buildLine(spinner, duration, i, spinner.lines));
             }
         }
-        return (h(Host, { key: '47cd6cd98e36e5b99fbe263a6a102610cae240c3', class: createColorClasses(self.color, {
+        return (h(Host, { key: 'cfd0e19ebf41412300d1ba80721c12b4b8d32263', class: createColorClasses(self.color, {
                 [mode]: true,
                 [`spinner-${spinnerName}`]: true,
                 'spinner-paused': self.paused || config.getBoolean('_testing'),

package/dist/cjs/{data-a5109f09.js → data-4487a815.js}

@@ -834,7 +834,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,
@@ -842,28 +860,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
@@ -949,14 +951,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
@@ -967,15 +961,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
@@ -1025,7 +1010,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
@@ -1641,10 +1626,8 @@ exports.getEndOfWeek = getEndOfWeek;
 exports.getHourCycle = getHourCycle;
 exports.getLocalizedDateTime = getLocalizedDateTime;
 exports.getLocalizedTime = getLocalizedTime;
-exports.getMonthAndDay = getMonthAndDay;
 exports.getMonthAndYear = getMonthAndYear;
 exports.getMonthColumnData = getMonthColumnData;
-exports.getMonthDayAndYear = getMonthDayAndYear;
 exports.getNextDay = getNextDay;
 exports.getNextMonth = getNextMonth;
 exports.getNextWeek = getNextWeek;

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

@@ -657,7 +657,7 @@ const Footer = class {
         const mode = ionicGlobal.getIonMode(this);
         const tabs = this.el.closest('ion-tabs');
         const tabBar = tabs === null || tabs === void 0 ? void 0 : tabs.querySelector(':scope > ion-tab-bar');
-        return (index.h(index.Host, { key: '550b8b8fb614e541e1d369fc1ac5ba1f083913b4', role: "contentinfo", class: {
+        return (index.h(index.Host, { key: '6f2827ba2e64d1a889c0631bc2a6d5df97b338ce', role: "contentinfo", class: {
                 [mode]: true,
                 // Used internally for styling
                 [`footer-${mode}`]: true,
@@ -665,7 +665,7 @@ const Footer = class {
                 [`footer-translucent-${mode}`]: translucent,
                 ['footer-toolbar-padding']: !this.keyboardVisible && (!tabBar || tabBar.slot !== 'bottom'),
                 [`footer-collapse-${collapse}`]: collapse !== undefined,
-            } }, mode === 'ios' && translucent && index.h("div", { class: "footer-background" }), index.h("slot", { key: 'd25187ecc2ce7848ba882af078cb634e9d5e8814' })));
+            } }, mode === 'ios' && translucent && index.h("div", { class: "footer-background" }), index.h("slot", { key: 'b07574feb587a1089b001e7d158fd8d05e32304b' })));
     }
     get el() { return index.getElement(this); }
 };
@@ -987,14 +987,14 @@ const Header = class {
         const collapse = this.collapse || 'none';
         // banner role must be at top level, so remove role if inside a menu
         const roleType = theme.hostContext('ion-menu', this.el) ? 'none' : 'banner';
-        return (index.h(index.Host, Object.assign({ key: 'a33e7e1818cb4718ae36b8bcfa811c4138b85fac', role: roleType, class: {
+        return (index.h(index.Host, Object.assign({ key: 'be4386a218c20dc4c18320dbbcfb25574d13d27e', role: roleType, class: {
                 [mode]: true,
                 // Used internally for styling
                 [`header-${mode}`]: true,
                 [`header-translucent`]: this.translucent,
                 [`header-collapse-${collapse}`]: true,
                 [`header-translucent-${mode}`]: this.translucent,
-            } }, inheritedAttributes), mode === 'ios' && translucent && index.h("div", { class: "header-background" }), index.h("slot", { key: '7e2fa75034f7422a3dc5691e9b3c25393e16c0ca' })));
+            } }, inheritedAttributes), mode === 'ios' && translucent && index.h("div", { class: "header-background" }), index.h("slot", { key: '74c401fb331aeb40c733605fd580949ad53989b8' })));
     }
     get el() { return index.getElement(this); }
 };
@@ -1178,7 +1178,7 @@ const RouterOutlet = class {
         return true;
     }
     render() {
-        return index.h("slot", { key: '69b452a0dc0c10440bdd8700cf4843c43154c707' });
+        return index.h("slot", { key: 'e4eaa40478f70742d0ff7602ed5f83879da9f1b4' });
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
@@ -1218,11 +1218,11 @@ const ToolbarTitle = class {
     render() {
         const mode = ionicGlobal.getIonMode(this);
         const size = this.getSize();
-        return (index.h(index.Host, { key: 'b68a272a33ec81d282629a569676f64d3215a0c7', class: theme.createColorClasses(this.color, {
+        return (index.h(index.Host, { key: '2642d433ba678b67503b7f1e9d0ae0390250bec8', class: theme.createColorClasses(this.color, {
                 [mode]: true,
                 [`title-${size}`]: true,
                 'title-rtl': document.dir === 'rtl',
-            }) }, index.h("div", { key: '9069816a14e6e358695c5bd465787cf297c761bc', class: "toolbar-title" }, index.h("slot", { key: '8894bd04f2292b54050ee864abb5396deadf9874' }))));
+            }) }, index.h("div", { key: '355184542e26b53296f7143d099cfebc3de7b569', class: "toolbar-title" }, index.h("slot", { key: 'aed07a34c22e4b1f34cdf40fea35481674d8941f' }))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
@@ -1290,10 +1290,10 @@ const Toolbar = class {
         this.childrenStyles.forEach((value) => {
             Object.assign(childStyles, value);
         });
-        return (index.h(index.Host, { key: 'afac0f08f3981483c072984ce047df5dc9cc1e99', class: Object.assign(Object.assign({}, childStyles), theme.createColorClasses(this.color, {
+        return (index.h(index.Host, { key: 'fdd8621b4f69ce650b5aaf4fb6bffde29aa5ad65', class: Object.assign(Object.assign({}, childStyles), theme.createColorClasses(this.color, {
                 [mode]: true,
                 'in-toolbar': theme.hostContext('ion-toolbar', this.el),
-            })) }, index.h("div", { key: '30d4f1d0ec01cc646398301b5f7d469391eb35d2', class: "toolbar-background" }), index.h("div", { key: '175d1f283e670b57a9bf8fd2a8c5e7d0da749aa8', class: "toolbar-container" }, index.h("slot", { key: '4853b18092737b32b5995457536fa5a7fc2816ef', name: "start" }), index.h("slot", { key: '6eb4921200aad02d7977d134edad6cff2aad91ad', name: "secondary" }), index.h("div", { key: '024e0339c74c4b9a886d49e96723243719643dc2', class: "toolbar-content" }, index.h("slot", { key: 'b6452c84692fedd6efe33ac67907d01253b76f8f' })), index.h("slot", { key: '636e56eeaa318ce45a9c3854a30b8eb2819a33e0', name: "primary" }), index.h("slot", { key: 'a45c19b93dca3719d75bd4d99acc49de87137a7d', name: "end" }))));
+            })) }, index.h("div", { key: 'c6ad5434546e2046a83574ea92a03a3f77d0a9e3', class: "toolbar-background" }), index.h("div", { key: '3b79dd20c3e8252cacfd46a82428df9ba0b8b86e', class: "toolbar-container" }, index.h("slot", { key: '514259a8b76db9f3a587a7667b5e37fd8ade9481', name: "start" }), index.h("slot", { key: 'd9ab68f0626f4ac8b83d21663eb67a47b76d809b', name: "secondary" }), index.h("div", { key: '2c21da88b67a7d7eef280e517bda9982264c7be4', class: "toolbar-content" }, index.h("slot", { key: 'ac2b7c8f20c5ac755df9032809c73eab9e767e36' })), index.h("slot", { key: '2ddd3b7e3803f2d56c32743dcfc114ddcb8684a2', name: "primary" }), index.h("slot", { key: '27483847d4333b4492506da33185c9ba1aa824a7', name: "end" }))));
     }
     get el() { return index.getElement(this); }
 };

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

@@ -59,7 +59,7 @@ const Thumbnail = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: '2b3d5139161f4b9075dce537c14b4087986b37c4', class: ionicGlobal.getIonMode(this) }, index.h("slot", { key: '3c4838c43e1230f9413a3cb66584417fd11382b2' })));
+        return (index.h(index.Host, { key: 'a12bfff6f372b19f6890a81f93ca6137701ee360', class: ionicGlobal.getIonMode(this) }, index.h("slot", { key: 'f546320896fee05677cc30f13aa7fa7c0360d69d' })));
     }
 };
 Thumbnail.style = IonThumbnailStyle0;

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

@@ -157,10 +157,10 @@ const Grid = class {
     }
     render() {
         const mode = ionicGlobal.getIonMode(this);
-        return (index.h(index.Host, { key: '03a8975bb9320192033219fc9e06fe7afa4fae4a', class: {
+        return (index.h(index.Host, { key: '265ab989098511c0b7e7d99edc792081f3ac7dfe', class: {
                 [mode]: true,
                 'grid-fixed': this.fixed,
-            } }, index.h("slot", { key: '8d95abb4614e73a46a274668c13fe7c7f011c537' })));
+            } }, index.h("slot", { key: '83e3ea4d1a60d1a6dab6b592e70a98924c0cfd7c' })));
     }
 };
 Grid.style = IonGridStyle0;
@@ -173,7 +173,7 @@ const Row = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: 'de94b93c001a93b2a88bcb8e959f421fd5ad4a65', class: ionicGlobal.getIonMode(this) }, index.h("slot", { key: '41fa951758d3644bb77d80002caf6e25a79393ce' })));
+        return (index.h(index.Host, { key: '36d12784e6f8339a1d03ff6f03af5c7b3f437293', class: ionicGlobal.getIonMode(this) }, index.h("slot", { key: '54cc627f95bb091d31a550aca00b14ab73d2f1bf' })));
     }
 };
 Row.style = IonRowStyle0;

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

@@ -10,7 +10,7 @@ const helpers = require('./helpers-da4c0ed1.js');
 const index$1 = require('./index-5915f9b3.js');
 const theme = require('./theme-d1c573d2.js');
 const ionicGlobal = require('./ionic-global-34d0d04a.js');
-const data = require('./data-a5109f09.js');
+const data = require('./data-4487a815.js');
 
 const iosDatetimeButtonCss = ":host{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}:host button{border-radius:8px;-webkit-padding-start:12px;padding-inline-start:12px;-webkit-padding-end:12px;padding-inline-end:12px;padding-top:6px;padding-bottom:6px;-webkit-margin-start:2px;margin-inline-start:2px;-webkit-margin-end:2px;margin-inline-end:2px;margin-top:0px;margin-bottom:0px;position:relative;-webkit-transition:150ms color ease-in-out;transition:150ms color ease-in-out;border:none;background:var(--ion-color-step-300, #edeef0);color:var(--ion-text-color, #000);font-family:inherit;font-size:1rem;cursor:pointer;overflow:hidden;-webkit-appearance:none;-moz-appearance:none;appearance:none}:host(.time-active) #time-button,:host(.date-active) #date-button{color:var(--ion-color-base)}:host(.datetime-button-disabled){pointer-events:none}:host(.datetime-button-disabled) button{opacity:0.4}";
 const IonDatetimeButtonIosStyle0 = iosDatetimeButtonCss;
@@ -44,11 +44,12 @@ const DatetimeButton = class {
          * to the locale specified on ion-datetime.
          */
         this.setDateTimeText = () => {
+            var _a, _b, _c, _d, _e;
             const { datetimeEl, datetimePresentation } = this;
             if (!datetimeEl) {
                 return;
             }
-            const { value, locale, hourCycle, preferWheel, multiple, titleSelectedDatesFormatter } = datetimeEl;
+            const { value, locale, formatOptions, hourCycle, preferWheel, multiple, titleSelectedDatesFormatter } = datetimeEl;
             const parsedValues = this.getParsedDateValues(value);
             /**
              * Both ion-datetime and ion-datetime-button default
@@ -71,8 +72,8 @@ const DatetimeButton = class {
             switch (datetimePresentation) {
                 case 'date-time':
                 case 'time-date':
-                    const dateText = data.getMonthDayAndYear(locale, firstParsedDatetime);
-                    const timeText = data.getLocalizedTime(locale, firstParsedDatetime, computedHourCycle);
+                    const dateText = data.getLocalizedDateTime(locale, firstParsedDatetime, (_a = formatOptions === null || formatOptions === void 0 ? void 0 : formatOptions.date) !== null && _a !== void 0 ? _a : { month: 'short', day: 'numeric', year: 'numeric' });
+                    const timeText = data.getLocalizedTime(locale, firstParsedDatetime, computedHourCycle, formatOptions === null || formatOptions === void 0 ? void 0 : formatOptions.time);
                     if (preferWheel) {
                         this.dateText = `${dateText} ${timeText}`;
                     }
@@ -95,20 +96,20 @@ const DatetimeButton = class {
                         this.dateText = headerText;
                     }
                     else {
-                        this.dateText = data.getMonthDayAndYear(locale, firstParsedDatetime);
+                        this.dateText = data.getLocalizedDateTime(locale, firstParsedDatetime, (_b = formatOptions === null || formatOptions === void 0 ? void 0 : formatOptions.date) !== null && _b !== void 0 ? _b : { month: 'short', day: 'numeric', year: 'numeric' });
                     }
                     break;
                 case 'time':
-                    this.timeText = data.getLocalizedTime(locale, firstParsedDatetime, computedHourCycle);
+                    this.timeText = data.getLocalizedTime(locale, firstParsedDatetime, computedHourCycle, formatOptions === null || formatOptions === void 0 ? void 0 : formatOptions.time);
                     break;
                 case 'month-year':
-                    this.dateText = data.getMonthAndYear(locale, firstParsedDatetime);
+                    this.dateText = data.getLocalizedDateTime(locale, firstParsedDatetime, (_c = formatOptions === null || formatOptions === void 0 ? void 0 : formatOptions.date) !== null && _c !== void 0 ? _c : { month: 'long', year: 'numeric' });
                     break;
                 case 'month':
-                    this.dateText = data.getLocalizedDateTime(locale, firstParsedDatetime, { month: 'long' });
+                    this.dateText = data.getLocalizedDateTime(locale, firstParsedDatetime, (_d = formatOptions === null || formatOptions === void 0 ? void 0 : formatOptions.time) !== null && _d !== void 0 ? _d : { month: 'long' });
                     break;
                 case 'year':
-                    this.dateText = data.getLocalizedDateTime(locale, firstParsedDatetime, { year: 'numeric' });
+                    this.dateText = data.getLocalizedDateTime(locale, firstParsedDatetime, (_e = formatOptions === null || formatOptions === void 0 ? void 0 : formatOptions.time) !== null && _e !== void 0 ? _e : { year: 'numeric' });
                     break;
             }
         };
@@ -337,7 +338,7 @@ const DatetimeButton = class {
     render() {
         const { color, dateText, timeText, selectedButton, datetimeActive, disabled } = this;
         const mode = ionicGlobal.getIonMode(this);
-        return (index.h(index.Host, { key: '36fe34d4225940611d74bdef5b954d54749d2dca', class: theme.createColorClasses(color, {
+        return (index.h(index.Host, { key: 'a38773e24ea0a28315be89baf0ef97f564b5d74b', class: theme.createColorClasses(color, {
                 [mode]: true,
                 [`${selectedButton}-active`]: datetimeActive,
                 ['datetime-button-disabled']: disabled,