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

package/hydrate/index.js

@@ -16029,7 +16029,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,
@@ -16037,28 +16055,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
@@ -16144,14 +16146,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
@@ -16162,15 +16156,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
@@ -16220,7 +16205,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
@@ -16986,6 +16971,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*/.sc-ion-datetime-ios-h{display:-ms-flexbox;display:flex;-ms-flex-flow:column;flex-flow:column;background:var(--background);overflow:hidden}/*!@ion-picker-column-internal*/ion-picker-column-internal.sc-ion-datetime-ios{min-width:26px}/*!@:host(.datetime-size-fixed)*/.datetime-size-fixed.sc-ion-datetime-ios-h{width:auto;height:auto}/*!@:host(.datetime-size-fixed:not(.datetime-prefer-wheel))*/.datetime-size-fixed.sc-ion-datetime-ios-h:not(.datetime-prefer-wheel){max-width:350px}/*!@:host(.datetime-size-fixed.datetime-prefer-wheel)*/.datetime-size-fixed.datetime-prefer-wheel.sc-ion-datetime-ios-h{min-width:350px;max-width:-webkit-max-content;max-width:-moz-max-content;max-width:max-content}/*!@:host(.datetime-size-cover)*/.datetime-size-cover.sc-ion-datetime-ios-h{width:100%}/*!@:host .calendar-body,\n:host .datetime-year*/.sc-ion-datetime-ios-h .calendar-body.sc-ion-datetime-ios,.sc-ion-datetime-ios-h .datetime-year.sc-ion-datetime-ios{opacity:0}/*!@:host(:not(.datetime-ready)) .datetime-year*/.sc-ion-datetime-ios-h:not(.datetime-ready) .datetime-year.sc-ion-datetime-ios{position:absolute;pointer-events:none}/*!@:host(.datetime-ready) .calendar-body*/.datetime-ready.sc-ion-datetime-ios-h .calendar-body.sc-ion-datetime-ios{opacity:1}/*!@:host(.datetime-ready) .datetime-year*/.datetime-ready.sc-ion-datetime-ios-h .datetime-year.sc-ion-datetime-ios{display:none;opacity:1}/*!@:host .wheel-order-year-first .day-column*/.sc-ion-datetime-ios-h .wheel-order-year-first.sc-ion-datetime-ios .day-column.sc-ion-datetime-ios{-ms-flex-order:3;order:3;text-align:end}/*!@:host .wheel-order-year-first .month-column*/.sc-ion-datetime-ios-h .wheel-order-year-first.sc-ion-datetime-ios .month-column.sc-ion-datetime-ios{-ms-flex-order:2;order:2;text-align:end}/*!@:host .wheel-order-year-first .year-column*/.sc-ion-datetime-ios-h .wheel-order-year-first.sc-ion-datetime-ios .year-column.sc-ion-datetime-ios{-ms-flex-order:1;order:1;text-align:start}/*!@:host .datetime-calendar,\n:host .datetime-year*/.sc-ion-datetime-ios-h .datetime-calendar.sc-ion-datetime-ios,.sc-ion-datetime-ios-h .datetime-year.sc-ion-datetime-ios{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*/.show-month-and-year.sc-ion-datetime-ios-h .datetime-year.sc-ion-datetime-ios{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,\n  :host(.show-month-and-year) .calendar-days-of-week,\n  :host(.show-month-and-year) .calendar-body,\n  :host(.show-month-and-year) .datetime-time*/.show-month-and-year.sc-ion-datetime-ios-h .calendar-next-prev.sc-ion-datetime-ios,.show-month-and-year.sc-ion-datetime-ios-h .calendar-days-of-week.sc-ion-datetime-ios,.show-month-and-year.sc-ion-datetime-ios-h .calendar-body.sc-ion-datetime-ios,.show-month-and-year.sc-ion-datetime-ios-h .datetime-time.sc-ion-datetime-ios{position:absolute;visibility:hidden;pointer-events:none}/*!@@supports (inset-inline-start: 0)*/@supports .sc-ion-datetime-ios (inset-inline-start.sc-ion-datetime-ios: 0).sc-ion-datetime-ios{.sc-ion-datetime-ios-h.show-month-and-year .calendar-next-prev,.sc-ion-datetime-ios-h.show-month-and-year .calendar-days-of-week,.sc-ion-datetime-ios-h.show-month-and-year .calendar-body,.sc-ion-datetime-ios-h.show-month-and-year .datetime-time{inset-inline-start:-99999px}}/*!@@supports not (inset-inline-start: 0)*/@supports .sc-ion-datetime-ios not.sc-ion-datetime-ios (inset-inline-start.sc-ion-datetime-ios: 0).sc-ion-datetime-ios{.sc-ion-datetime-ios-h.show-month-and-year .calendar-next-prev,.sc-ion-datetime-ios-h.show-month-and-year .calendar-days-of-week,.sc-ion-datetime-ios-h.show-month-and-year .calendar-body,.sc-ion-datetime-ios-h.show-month-and-year .datetime-time{left:-99999px}.sc-ion-datetime-ios-h[dir=rtl].sc-ion-datetime-ios-h.show-month-and-year .calendar-next-prev,[dir=rtl] .sc-ion-datetime-ios-h.sc-ion-datetime-ios-h.show-month-and-year .calendar-next-prev,.sc-ion-datetime-ios-h[dir=rtl].show-month-and-year .calendar-next-prev,[dir=rtl] .sc-ion-datetime-ios-h.show-month-and-year .calendar-next-prev,.sc-ion-datetime-ios-h[dir=rtl].sc-ion-datetime-ios-h.show-month-and-year .calendar-days-of-week,[dir=rtl] .sc-ion-datetime-ios-h.sc-ion-datetime-ios-h.show-month-and-year .calendar-days-of-week,.sc-ion-datetime-ios-h[dir=rtl].show-month-and-year .calendar-days-of-week,[dir=rtl] .sc-ion-datetime-ios-h.show-month-and-year .calendar-days-of-week,.sc-ion-datetime-ios-h[dir=rtl].sc-ion-datetime-ios-h.show-month-and-year .calendar-body,[dir=rtl] .sc-ion-datetime-ios-h.sc-ion-datetime-ios-h.show-month-and-year .calendar-body,.sc-ion-datetime-ios-h[dir=rtl].show-month-and-year .calendar-body,[dir=rtl] .sc-ion-datetime-ios-h.show-month-and-year .calendar-body,.sc-ion-datetime-ios-h[dir=rtl].sc-ion-datetime-ios-h.show-month-and-year .datetime-time,[dir=rtl] .sc-ion-datetime-ios-h.sc-ion-datetime-ios-h.show-month-and-year .datetime-time,.sc-ion-datetime-ios-h[dir=rtl].show-month-and-year .datetime-time,[dir=rtl] .sc-ion-datetime-ios-h.show-month-and-year .datetime-time{left:unset;right:unset;right:-99999px}@supports selector(:dir(rtl)){.sc-ion-datetime-ios-h.show-month-and-year:dir(rtl) .calendar-next-prev,.sc-ion-datetime-ios-h.show-month-and-year:dir(rtl) .calendar-days-of-week,.sc-ion-datetime-ios-h.show-month-and-year:dir(rtl) .calendar-body,.sc-ion-datetime-ios-h.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,\n  :host(.show-month-and-year) .calendar-days-of-week,\n  :host(.show-month-and-year) .calendar-body,\n  :host(.show-month-and-year) .datetime-time*/.show-month-and-year.sc-ion-datetime-ios-h .calendar-next-prev.sc-ion-datetime-ios,.show-month-and-year.sc-ion-datetime-ios-h .calendar-days-of-week.sc-ion-datetime-ios,.show-month-and-year.sc-ion-datetime-ios-h .calendar-body.sc-ion-datetime-ios,.show-month-and-year.sc-ion-datetime-ios-h .datetime-time.sc-ion-datetime-ios{display:none}}/*!@:host(.month-year-picker-open) .datetime-footer*/.month-year-picker-open.sc-ion-datetime-ios-h .datetime-footer.sc-ion-datetime-ios{display:none}/*!@:host(.datetime-disabled)*/.datetime-disabled.sc-ion-datetime-ios-h{pointer-events:none}/*!@:host(.datetime-disabled) .calendar-days-of-week,\n:host(.datetime-disabled) .datetime-time*/.datetime-disabled.sc-ion-datetime-ios-h .calendar-days-of-week.sc-ion-datetime-ios,.datetime-disabled.sc-ion-datetime-ios-h .datetime-time.sc-ion-datetime-ios{opacity:0.4}/*!@:host(.datetime-readonly)*/.datetime-readonly.sc-ion-datetime-ios-h{pointer-events:none}/*!@:host(.datetime-readonly) .calendar-action-buttons,\n:host(.datetime-readonly) .calendar-body,\n:host(.datetime-readonly) .datetime-year*/.datetime-readonly.sc-ion-datetime-ios-h .calendar-action-buttons.sc-ion-datetime-ios,.datetime-readonly.sc-ion-datetime-ios-h .calendar-body.sc-ion-datetime-ios,.datetime-readonly.sc-ion-datetime-ios-h .datetime-year.sc-ion-datetime-ios{pointer-events:initial}/*!@:host(.datetime-readonly) .calendar-day[disabled]:not(.calendar-day-constrained),\n:host(.datetime-readonly) .datetime-action-buttons ion-button[disabled]*/.datetime-readonly.sc-ion-datetime-ios-h .calendar-day[disabled].sc-ion-datetime-ios:not(.calendar-day-constrained),.datetime-readonly.sc-ion-datetime-ios-h .datetime-action-buttons.sc-ion-datetime-ios ion-button[disabled].sc-ion-datetime-ios{opacity:1}/*!@:host .datetime-header .datetime-title*/.sc-ion-datetime-ios-h .datetime-header.sc-ion-datetime-ios .datetime-title.sc-ion-datetime-ios{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}/*!@:host .datetime-action-buttons.has-clear-button*/.sc-ion-datetime-ios-h .datetime-action-buttons.has-clear-button.sc-ion-datetime-ios{width:100%}/*!@:host .datetime-action-buttons ion-buttons*/.sc-ion-datetime-ios-h .datetime-action-buttons.sc-ion-datetime-ios ion-buttons.sc-ion-datetime-ios{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between}/*!@.datetime-action-buttons .datetime-action-buttons-container*/.datetime-action-buttons.sc-ion-datetime-ios .datetime-action-buttons-container.sc-ion-datetime-ios{display:-ms-flexbox;display:flex}/*!@:host .calendar-action-buttons*/.sc-ion-datetime-ios-h .calendar-action-buttons.sc-ion-datetime-ios{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between}/*!@:host .calendar-action-buttons ion-item,\n:host .calendar-action-buttons ion-button*/.sc-ion-datetime-ios-h .calendar-action-buttons.sc-ion-datetime-ios ion-item.sc-ion-datetime-ios,.sc-ion-datetime-ios-h .calendar-action-buttons.sc-ion-datetime-ios ion-button.sc-ion-datetime-ios{--background:translucent}/*!@:host .calendar-action-buttons ion-item ion-label*/.sc-ion-datetime-ios-h .calendar-action-buttons.sc-ion-datetime-ios ion-item.sc-ion-datetime-ios ion-label.sc-ion-datetime-ios{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;width:auto}/*!@:host .calendar-action-buttons ion-item ion-icon*/.sc-ion-datetime-ios-h .calendar-action-buttons.sc-ion-datetime-ios ion-item.sc-ion-datetime-ios ion-icon.sc-ion-datetime-ios{-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*/.sc-ion-datetime-ios-h .calendar-days-of-week.sc-ion-datetime-ios{display:grid;grid-template-columns:repeat(7, 1fr);text-align:center}/*!@.calendar-days-of-week .day-of-week*/.calendar-days-of-week.sc-ion-datetime-ios .day-of-week.sc-ion-datetime-ios{-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*/.sc-ion-datetime-ios-h .calendar-body.sc-ion-datetime-ios{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*/.sc-ion-datetime-ios-h .calendar-body.sc-ion-datetime-ios .calendar-month.sc-ion-datetime-ios{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*/.sc-ion-datetime-ios-h .calendar-body.sc-ion-datetime-ios .calendar-month-disabled.sc-ion-datetime-ios{scroll-snap-align:none}/*!@:host .calendar-body::-webkit-scrollbar*/.sc-ion-datetime-ios-h .calendar-body.sc-ion-datetime-ios::-webkit-scrollbar{display:none}/*!@:host .calendar-body .calendar-month-grid*/.sc-ion-datetime-ios-h .calendar-body.sc-ion-datetime-ios .calendar-month-grid.sc-ion-datetime-ios{display:grid;grid-template-columns:repeat(7, 1fr)}/*!@:host .calendar-day-wrapper*/.sc-ion-datetime-ios-h .calendar-day-wrapper.sc-ion-datetime-ios{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*/.calendar-day.sc-ion-datetime-ios{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]*/.sc-ion-datetime-ios-h .calendar-day[disabled].sc-ion-datetime-ios{pointer-events:none;opacity:0.4}/*!@.calendar-day:focus*/.calendar-day.sc-ion-datetime-ios: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*/.sc-ion-datetime-ios-h .datetime-time.sc-ion-datetime-ios{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between}/*!@:host(.datetime-presentation-time) .datetime-time*/.datetime-presentation-time.sc-ion-datetime-ios-h .datetime-time.sc-ion-datetime-ios{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0}/*!@:host ion-popover*/.sc-ion-datetime-ios-h ion-popover.sc-ion-datetime-ios{--height:200px}/*!@:host .time-header*/.sc-ion-datetime-ios-h .time-header.sc-ion-datetime-ios{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}/*!@:host .time-body*/.sc-ion-datetime-ios-h .time-body.sc-ion-datetime-ios{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*/.sc-ion-datetime-ios-h .time-body-active.sc-ion-datetime-ios{color:var(--ion-color-base)}/*!@:host(.in-item)*/.in-item.sc-ion-datetime-ios-h{position:static}/*!@:host(.show-month-and-year) .calendar-action-buttons ion-item*/.show-month-and-year.sc-ion-datetime-ios-h .calendar-action-buttons.sc-ion-datetime-ios ion-item.sc-ion-datetime-ios{--color:var(--ion-color-base)}/*!@:host*/.sc-ion-datetime-ios-h{--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)),\n:host(.datetime-presentation-time-date:not(.datetime-prefer-wheel)),\n:host(.datetime-presentation-date:not(.datetime-prefer-wheel))*/.datetime-presentation-date-time.sc-ion-datetime-ios-h:not(.datetime-prefer-wheel),.datetime-presentation-time-date.sc-ion-datetime-ios-h:not(.datetime-prefer-wheel),.datetime-presentation-date.sc-ion-datetime-ios-h:not(.datetime-prefer-wheel){min-height:350px}/*!@:host .datetime-header*/.sc-ion-datetime-ios-h .datetime-header.sc-ion-datetime-ios{-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*/.sc-ion-datetime-ios-h .datetime-header.sc-ion-datetime-ios .datetime-title.sc-ion-datetime-ios{color:var(--title-color)}/*!@:host .datetime-header .datetime-selected-date*/.sc-ion-datetime-ios-h .datetime-header.sc-ion-datetime-ios .datetime-selected-date.sc-ion-datetime-ios{margin-top:10px}/*!@:host .calendar-action-buttons ion-item*/.sc-ion-datetime-ios-h .calendar-action-buttons.sc-ion-datetime-ios ion-item.sc-ion-datetime-ios{--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,\n:host .calendar-action-buttons ion-buttons ion-button*/.sc-ion-datetime-ios-h .calendar-action-buttons.sc-ion-datetime-ios ion-item.sc-ion-datetime-ios ion-icon.sc-ion-datetime-ios,.sc-ion-datetime-ios-h .calendar-action-buttons.sc-ion-datetime-ios ion-buttons.sc-ion-datetime-ios ion-button.sc-ion-datetime-ios{color:var(--ion-color-base)}/*!@:host .calendar-action-buttons ion-buttons*/.sc-ion-datetime-ios-h .calendar-action-buttons.sc-ion-datetime-ios ion-buttons.sc-ion-datetime-ios{padding-left:0;padding-right:0;padding-top:8px;padding-bottom:0}/*!@:host .calendar-action-buttons ion-buttons ion-button*/.sc-ion-datetime-ios-h .calendar-action-buttons.sc-ion-datetime-ios ion-buttons.sc-ion-datetime-ios ion-button.sc-ion-datetime-ios{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0}/*!@:host .calendar-days-of-week*/.sc-ion-datetime-ios-h .calendar-days-of-week.sc-ion-datetime-ios{-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*/.calendar-days-of-week.sc-ion-datetime-ios .day-of-week.sc-ion-datetime-ios{width:clamp(20px, calc(mod(min(1rem, 24px), 24px) * 10), 100%);height:24px;overflow:hidden}/*!@.calendar-day*/.calendar-day.sc-ion-datetime-ios{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*/.calendar-days-of-week.sc-ion-datetime-ios .day-of-week.sc-ion-datetime-ios{width:auto;height:auto;overflow:initial}/*!@.calendar-day*/.calendar-day.sc-ion-datetime-ios{border-radius:32px}}/*!@:host .calendar-body .calendar-month .calendar-month-grid*/.sc-ion-datetime-ios-h .calendar-body.sc-ion-datetime-ios .calendar-month.sc-ion-datetime-ios .calendar-month-grid.sc-ion-datetime-ios{-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*/.sc-ion-datetime-ios-h .calendar-day-wrapper.sc-ion-datetime-ios{-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*/.sc-ion-datetime-ios-h .calendar-day.sc-ion-datetime-ios{width:40px;min-width:40px;height:40px;font-size:min(1.25rem, 32px)}/*!@.calendar-day.calendar-day-active*/.calendar-day.calendar-day-active.sc-ion-datetime-ios{background:rgba(var(--ion-color-base-rgb), 0.2)}/*!@:host .calendar-day.calendar-day-today*/.sc-ion-datetime-ios-h .calendar-day.calendar-day-today.sc-ion-datetime-ios{color:var(--ion-color-base)}/*!@:host .calendar-day.calendar-day-active*/.sc-ion-datetime-ios-h .calendar-day.calendar-day-active.sc-ion-datetime-ios{color:var(--ion-color-base);font-weight:600}/*!@:host .calendar-day.calendar-day-today.calendar-day-active*/.sc-ion-datetime-ios-h .calendar-day.calendar-day-today.calendar-day-active.sc-ion-datetime-ios{background:var(--ion-color-base);color:var(--ion-color-contrast)}/*!@:host .datetime-time*/.sc-ion-datetime-ios-h .datetime-time.sc-ion-datetime-ios{-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*/.sc-ion-datetime-ios-h .datetime-time.sc-ion-datetime-ios .time-header.sc-ion-datetime-ios{font-weight:600}/*!@:host .datetime-buttons*/.sc-ion-datetime-ios-h .datetime-buttons.sc-ion-datetime-ios{-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),\n:host .datetime-buttons ion-buttons*/.sc-ion-datetime-ios-h .datetime-buttons .sc-ion-datetime-ios-s>ion-buttons,.sc-ion-datetime-ios-h .datetime-buttons.sc-ion-datetime-ios ion-buttons.sc-ion-datetime-ios{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between}/*!@:host .datetime-action-buttons*/.sc-ion-datetime-ios-h .datetime-action-buttons.sc-ion-datetime-ios{width:100%}";
 var IonDatetimeIosStyle0 = datetimeIosCss;
 
@@ -17634,6 +17661,7 @@ class Datetime {
         this.color = 'primary';
         this.name = this.inputId;
         this.disabled = false;
+        this.formatOptions = undefined;
         this.readonly = false;
         this.isDateEnabled = undefined;
         this.min = undefined;
@@ -17661,6 +17689,11 @@ class Datetime {
         this.size = 'fixed';
         this.preferWheel = false;
     }
+    formatOptionsChanged() {
+        const { el, formatOptions, presentation } = this;
+        checkForPresentationFormatMismatch(el, presentation, formatOptions);
+        warnIfTimeZoneProvided(el, formatOptions);
+    }
     disabledChanged() {
         this.emitStyle();
     }
@@ -17670,6 +17703,10 @@ class Datetime {
     maxChanged() {
         this.processMaxParts();
     }
+    presentationChanged() {
+        const { el, formatOptions, presentation } = this;
+        checkForPresentationFormatMismatch(el, presentation, formatOptions);
+    }
     get isGridStyle() {
         const { presentation, preferWheel } = this;
         const hasDatePresentation = presentation === 'date' || presentation === 'date-time' || presentation === 'time-date';
@@ -17772,6 +17809,7 @@ class Datetime {
         this.initializeKeyboardListeners();
     }
     componentDidLoad() {
+        const { el, intersectionTrackerRef } = this;
         /**
          * If a scrollable element is hidden using `display: none`,
          * it will not have a scroll height meaning we cannot scroll elements
@@ -17797,14 +17835,14 @@ class Datetime {
                 this.el.classList.add('datetime-ready');
             });
         };
-        const visibleIO = new IntersectionObserver(visibleCallback, { threshold: 0.01 });
+        const visibleIO = new IntersectionObserver(visibleCallback, { threshold: 0.01, root: el });
         /**
          * Use raf to avoid a race condition between the component loading and
          * its display animation starting (such as when shown in a modal). This
          * could cause the datetime to start at a visibility of 0, erroneously
          * triggering the `hiddenIO` observer below.
          */
-        raf(() => visibleIO === null || visibleIO === void 0 ? void 0 : visibleIO.observe(this.el));
+        raf(() => visibleIO === null || visibleIO === void 0 ? void 0 : visibleIO.observe(intersectionTrackerRef));
         /**
          * We need to clean up listeners when the datetime is hidden
          * in a popover/modal so that we can properly scroll containers
@@ -17830,8 +17868,8 @@ class Datetime {
                 this.el.classList.remove('datetime-ready');
             });
         };
-        const hiddenIO = new IntersectionObserver(hiddenCallback, { threshold: 0 });
-        raf(() => hiddenIO === null || hiddenIO === void 0 ? void 0 : hiddenIO.observe(this.el));
+        const hiddenIO = new IntersectionObserver(hiddenCallback, { threshold: 0, root: el });
+        raf(() => hiddenIO === null || hiddenIO === void 0 ? void 0 : hiddenIO.observe(intersectionTrackerRef));
         /**
          * Datetime uses Ionic components that emit
          * ionFocus and ionBlur. These events are
@@ -17905,7 +17943,7 @@ 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);
@@ -17922,6 +17960,10 @@ class Datetime {
                 printIonWarning('The highlightedDates property is not supported with preferWheel="true".', el);
             }
         }
+        if (formatOptions) {
+            checkForPresentationFormatMismatch(el, presentation, formatOptions);
+            warnIfTimeZoneProvided(el, formatOptions);
+        }
         const hourValues = (this.parsedHourValues = convertToArrayOfNumbers(this.hourValues));
         const minuteValues = (this.parsedMinuteValues = convertToArrayOfNumbers(this.minuteValues));
         const monthValues = (this.parsedMonthValues = convertToArrayOfNumbers(this.monthValues));
@@ -18429,7 +18471,7 @@ class Datetime {
         return hAsync("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 [
@@ -18449,7 +18491,7 @@ 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)),
             hAsync("ion-popover", { alignment: "center", translucent: true, overlayIndex: 1, arrow: false, onWillPresent: (ev) => {
                     /**
                      * Intersection Observers do not consistently fire between Blink and Webkit
@@ -18472,7 +18514,8 @@ 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) {
@@ -18488,7 +18531,7 @@ 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;
     }
@@ -18577,7 +18620,7 @@ class Datetime {
         const hasDatePresentation = presentation === 'date' || presentation === 'date-time' || presentation === 'time-date';
         const hasWheelVariant = hasDatePresentation && preferWheel;
         renderHiddenInput(true, el, name, formatValue(value), disabled);
-        return (hAsync(Host, { key: 'b00545b7bbba3ccf35d53c1eec4f1614fb830c11', "aria-disabled": disabled ? 'true' : null, onFocus: this.onFocus, onBlur: this.onBlur, class: Object.assign({}, createColorClasses$1(color, {
+        return (hAsync(Host, { key: '064dc72b5494a687e93e7605f7e1ec2d00f523ad', "aria-disabled": disabled ? 'true' : null, onFocus: this.onFocus, onBlur: this.onBlur, class: Object.assign({}, createColorClasses$1(color, {
                 [mode]: true,
                 ['datetime-readonly']: readonly,
                 ['datetime-disabled']: disabled,
@@ -18587,13 +18630,15 @@ class Datetime {
                 [`datetime-size-${size}`]: true,
                 [`datetime-prefer-wheel`]: hasWheelVariant,
                 [`datetime-grid`]: isGridStyle,
-            })) }, this.renderDatetime(mode)));
+            })) }, hAsync("div", { key: '258b34ca5d9bacfaa886a7de278f41a30be48c44', class: "intersection-tracker", ref: (el) => (this.intersectionTrackerRef = el) }), this.renderDatetime(mode)));
     }
     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"],
@@ -18612,6 +18657,7 @@ class Datetime {
             "color": [1],
             "name": [1],
             "disabled": [4],
+            "formatOptions": [16],
             "readonly": [4],
             "isDateEnabled": [16],
             "min": [1025],
@@ -18694,11 +18740,12 @@ 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
@@ -18721,8 +18768,8 @@ 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}`;
                     }
@@ -18745,20 +18792,20 @@ 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;
             }
         };
@@ -18987,7 +19034,7 @@ class DatetimeButton {
     render() {
         const { color, dateText, timeText, selectedButton, datetimeActive, disabled } = this;
         const mode = getIonMode$1(this);
-        return (hAsync(Host, { key: '36fe34d4225940611d74bdef5b954d54749d2dca', class: createColorClasses$1(color, {
+        return (hAsync(Host, { key: 'a38773e24ea0a28315be89baf0ef97f564b5d74b', class: createColorClasses$1(color, {
                 [mode]: true,
                 [`${selectedButton}-active`]: datetimeActive,
                 ['datetime-button-disabled']: disabled,
@@ -19065,12 +19112,12 @@ class Fab {
     render() {
         const { horizontal, vertical, edge } = this;
         const mode = getIonMode$1(this);
-        return (hAsync(Host, { key: 'eb7470763cfaadd229036fe4e04913cb4a0551c7', class: {
+        return (hAsync(Host, { key: '2960656845d8ab1d643e56870cfeefbceb44fb20', class: {
                 [mode]: true,
                 [`fab-horizontal-${horizontal}`]: horizontal !== undefined,
                 [`fab-vertical-${vertical}`]: vertical !== undefined,
                 'fab-edge': edge,
-            } }, hAsync("slot", { key: 'daf53f8c644db866f69d41401dba7a2791c37ac3' })));
+            } }, hAsync("slot", { key: 'eed164a50594167959905a90d678d417bc99098d' })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -19160,7 +19207,7 @@ class FabButton {
                 rel: this.rel,
                 target: this.target,
             };
-        return (hAsync(Host, { key: '78f11aaac39bf0fcb25b64885ee61619223e4241', onClick: this.onClick, "aria-disabled": disabled ? 'true' : null, class: createColorClasses$1(color, {
+        return (hAsync(Host, { key: 'c6d1a3ea95ee1fb6c86447881ff8ed7d885b9fb5', onClick: this.onClick, "aria-disabled": disabled ? 'true' : null, class: createColorClasses$1(color, {
                 [mode]: true,
                 'fab-button-in-list': inList,
                 'fab-button-translucent-in-list': inList && translucent,
@@ -19171,7 +19218,7 @@ class FabButton {
                 'ion-activatable': true,
                 'ion-focusable': true,
                 [`fab-button-${size}`]: size !== undefined,
-            }) }, hAsync(TagType, Object.assign({ key: 'a29b5eff122006d463ef3e10e1abe8378de07dc5' }, attrs, { class: "button-native", part: "native", disabled: disabled, onFocus: this.onFocus, onBlur: this.onBlur, onClick: (ev) => openURL(href, ev, this.routerDirection, this.routerAnimation) }, inheritedAttributes), hAsync("ion-icon", { key: 'e554c978fd9825eec9ca958f5b481f662ed6daa4', "aria-hidden": "true", icon: this.closeIcon, part: "close-icon", class: "close-icon", lazy: false }), hAsync("span", { key: 'd7dd93e93343767d223800899f0fd4c405845023', class: "button-inner" }, hAsync("slot", { key: 'dd5df0945385480e7551e24117d136cd6b231638' })), mode === 'md' && hAsync("ion-ripple-effect", null))));
+            }) }, hAsync(TagType, Object.assign({ key: 'd57e55e43e3e1fa7a255e25bfb9eb81a20200aa4' }, attrs, { class: "button-native", part: "native", disabled: disabled, onFocus: this.onFocus, onBlur: this.onBlur, onClick: (ev) => openURL(href, ev, this.routerDirection, this.routerAnimation) }, inheritedAttributes), hAsync("ion-icon", { key: '561252585dc5f5ed260987fc8fef2558700b2700', "aria-hidden": "true", icon: this.closeIcon, part: "close-icon", class: "close-icon", lazy: false }), hAsync("span", { key: 'd156660a55d4d849c24368ee79217e66c6423b37', class: "button-inner" }, hAsync("slot", { key: '35d4507eec7e4f646e1ef9206b8d6c9fd5a43c37' })), mode === 'md' && hAsync("ion-ripple-effect", null))));
     }
     get el() { return getElement(this); }
     static get style() { return {
@@ -19222,11 +19269,11 @@ class FabList {
     }
     render() {
         const mode = getIonMode$1(this);
-        return (hAsync(Host, { key: 'c786680f9868700913a182f908f25a612ec08498', class: {
+        return (hAsync(Host, { key: 'edbed7730aa2f177a6fb39a89af805b9699bc9ae', class: {
                 [mode]: true,
                 'fab-list-active': this.activated,
                 [`fab-list-side-${this.side}`]: true,
-            } }, hAsync("slot", { key: '547f8cb69ab2371095e3deeef1dc13fc1053bdf6' })));
+            } }, hAsync("slot", { key: '3ecb467b6d09dc02a1ab3cb76403f7c56e8ec6b2' })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -19678,7 +19725,7 @@ class Footer {
         const mode = getIonMode$1(this);
         const tabs = this.el.closest('ion-tabs');
         const tabBar = tabs === null || tabs === void 0 ? void 0 : tabs.querySelector(':scope > ion-tab-bar');
-        return (hAsync(Host, { key: '550b8b8fb614e541e1d369fc1ac5ba1f083913b4', role: "contentinfo", class: {
+        return (hAsync(Host, { key: '6f2827ba2e64d1a889c0631bc2a6d5df97b338ce', role: "contentinfo", class: {
                 [mode]: true,
                 // Used internally for styling
                 [`footer-${mode}`]: true,
@@ -19686,7 +19733,7 @@ class Footer {
                 [`footer-translucent-${mode}`]: translucent,
                 ['footer-toolbar-padding']: !this.keyboardVisible && (!tabBar || tabBar.slot !== 'bottom'),
                 [`footer-collapse-${collapse}`]: collapse !== undefined,
-            } }, mode === 'ios' && translucent && hAsync("div", { class: "footer-background" }), hAsync("slot", { key: 'd25187ecc2ce7848ba882af078cb634e9d5e8814' })));
+            } }, mode === 'ios' && translucent && hAsync("div", { class: "footer-background" }), hAsync("slot", { key: 'b07574feb587a1089b001e7d158fd8d05e32304b' })));
     }
     get el() { return getElement(this); }
     static get style() { return {
@@ -19717,10 +19764,10 @@ class Grid {
     }
     render() {
         const mode = getIonMode$1(this);
-        return (hAsync(Host, { key: '03a8975bb9320192033219fc9e06fe7afa4fae4a', class: {
+        return (hAsync(Host, { key: '265ab989098511c0b7e7d99edc792081f3ac7dfe', class: {
                 [mode]: true,
                 'grid-fixed': this.fixed,
-            } }, hAsync("slot", { key: '8d95abb4614e73a46a274668c13fe7c7f011c537' })));
+            } }, hAsync("slot", { key: '83e3ea4d1a60d1a6dab6b592e70a98924c0cfd7c' })));
     }
     static get style() { return IonGridStyle0; }
     static get cmpMeta() { return {
@@ -20051,14 +20098,14 @@ class Header {
         const collapse = this.collapse || 'none';
         // banner role must be at top level, so remove role if inside a menu
         const roleType = hostContext('ion-menu', this.el) ? 'none' : 'banner';
-        return (hAsync(Host, Object.assign({ key: 'a33e7e1818cb4718ae36b8bcfa811c4138b85fac', role: roleType, class: {
+        return (hAsync(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 && hAsync("div", { class: "header-background" }), hAsync("slot", { key: '7e2fa75034f7422a3dc5691e9b3c25393e16c0ca' })));
+            } }, inheritedAttributes), mode === 'ios' && translucent && hAsync("div", { class: "header-background" }), hAsync("slot", { key: '74c401fb331aeb40c733605fd580949ad53989b8' })));
     }
     get el() { return getElement(this); }
     static get style() { return {
@@ -20337,7 +20384,7 @@ class Img {
     render() {
         const { loadSrc, alt, onLoad, loadError, inheritedAttributes } = this;
         const { draggable } = inheritedAttributes;
-        return (hAsync(Host, { key: '1983ddd575d8f870f249d37a3897dbcc110bf4d7', class: getIonMode$1(this) }, hAsync("img", { key: 'f2ba013804f6ed9e5dadb08c75e47c0f844e67f3', decoding: "async", src: loadSrc, alt: alt, onLoad: onLoad, onError: loadError, part: "image", draggable: isDraggable(draggable) })));
+        return (hAsync(Host, { key: '212cb19b83defa47a677e44659eccc5e7e1bc5a2', class: getIonMode$1(this) }, hAsync("img", { key: '975230d5ef5f262c8e5f040eb59cd1033241f3c8', decoding: "async", src: loadSrc, alt: alt, onLoad: onLoad, onError: loadError, part: "image", draggable: isDraggable(draggable) })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -20544,7 +20591,7 @@ class InfiniteScroll {
     render() {
         const mode = getIonMode$1(this);
         const disabled = this.disabled;
-        return (hAsync(Host, { key: '8b5da92c7a1c118cd6c6a6be8f21b11b79f166bd', class: {
+        return (hAsync(Host, { key: 'cf712b0f22fe89b41377402da44f5575118ed34f', class: {
                 [mode]: true,
                 'infinite-scroll-loading': this.isLoading,
                 'infinite-scroll-enabled': !disabled,
@@ -20600,11 +20647,11 @@ class InfiniteScrollContent {
     }
     render() {
         const mode = getIonMode$1(this);
-        return (hAsync(Host, { key: '8ffd8ff4c951be0c2b1f48fd4be3a2d7765a989f', class: {
+        return (hAsync(Host, { key: '38c67d2c7ea4c304e71dacea64add0bffab69906', class: {
                 [mode]: true,
                 // Used internally for styling
                 [`infinite-scroll-content-${mode}`]: true,
-            } }, hAsync("div", { key: 'd7d03485501b5e2fde7c132309bb6358818eb0cd', class: "infinite-loading" }, this.loadingSpinner && (hAsync("div", { class: "infinite-loading-spinner" }, hAsync("ion-spinner", { name: this.loadingSpinner }))), this.loadingText !== undefined && this.renderLoadingText())));
+            } }, hAsync("div", { key: 'a23484ccbaf65e0e3ecb59befea425cfdbc782fd', class: "infinite-loading" }, this.loadingSpinner && (hAsync("div", { class: "infinite-loading-spinner" }, hAsync("ion-spinner", { name: this.loadingSpinner }))), this.loadingText !== undefined && this.renderLoadingText())));
     }
     static get style() { return {
         ios: IonInfiniteScrollContentIosStyle0,
@@ -21611,11 +21658,11 @@ class ItemDivider {
     }
     render() {
         const mode = getIonMode$1(this);
-        return (hAsync(Host, { key: '8422b960dfcce4ff1370d9c185e285bb4a3688d5', class: createColorClasses$1(this.color, {
+        return (hAsync(Host, { key: 'd9d5993694639e8f1ed589f0e8c3f4920ce30e02', class: createColorClasses$1(this.color, {
                 [mode]: true,
                 'item-divider-sticky': this.sticky,
                 item: true,
-            }) }, hAsync("slot", { key: '240514b96ec48262040460775c8eb0a58d6acfa8', name: "start" }), hAsync("div", { key: 'ec18c092c81cb96f8c49ed7d4dede96c9a3e3f97', class: "item-divider-inner" }, hAsync("div", { key: '9c3f3dcb9b14fd1d37fb1104b3ba953dc9a3e894', class: "item-divider-wrapper" }, hAsync("slot", { key: '6b8e51eb86a5567b80a91034b26228105796a82d' })), hAsync("slot", { key: '7ccb661e1309c1ecca09a823f8e08b1cf90d95dd', name: "end" }))));
+            }) }, hAsync("slot", { key: '1da8c38cbf07ef591ceae94b0d70bf620990e568', name: "start" }), hAsync("div", { key: '349a581fd1688b01ce7c67da99ae22cb4a5a85f7', class: "item-divider-inner" }, hAsync("div", { key: '80e22ba4f5da2af40bb32a445b840baa59edfbcc', class: "item-divider-wrapper" }, hAsync("slot", { key: '6d3fb95c8eba128e56defccbcc5d4b1fa3ec4c4a' })), hAsync("slot", { key: '83a97c131348c8cf840c30ccbf83c78edc125c14', name: "end" }))));
     }
     get el() { return getElement(this); }
     static get style() { return {
@@ -21647,7 +21694,7 @@ class ItemGroup {
     }
     render() {
         const mode = getIonMode$1(this);
-        return (hAsync(Host, { key: 'b33f23544ddeeeb61847b146b1dcb7a9ba30af18', role: "group", class: {
+        return (hAsync(Host, { key: '1d7de42c40d5f37324342fa7be2420bf6499705e', role: "group", class: {
                 [mode]: true,
                 // Used internally for styling
                 [`item-group-${mode}`]: true,
@@ -21715,12 +21762,12 @@ class ItemOption {
                 href: this.href,
                 target: this.target,
             };
-        return (hAsync(Host, { key: '8d8ef0455e0e46d31a84b6f9e83e377e0579f04b', onClick: this.onClick, class: createColorClasses$1(this.color, {
+        return (hAsync(Host, { key: '7e208b463b2d36984791a7c9c1d24af88b468a03', onClick: this.onClick, class: createColorClasses$1(this.color, {
                 [mode]: true,
                 'item-option-disabled': disabled,
                 'item-option-expandable': expandable,
                 'ion-activatable': true,
-            }) }, hAsync(TagType, Object.assign({ key: '0d4833cefd206862a75fdef8744e659cff24a39f' }, attrs, { class: "button-native", part: "native", disabled: disabled }), hAsync("span", { key: 'bfbdab3ee6cfc884eb2bd60c92cf919f4b671c27', class: "button-inner" }, hAsync("slot", { key: '968ebecbd9e8ca5015106d79e5d29b4a1999d39b', name: "top" }), hAsync("div", { key: '38677cd72df6447a4e934695ab08857460be800d', class: "horizontal-wrapper" }, hAsync("slot", { key: 'e65131d2e3f12c3743c7229b0a7f381824a45281', name: "start" }), hAsync("slot", { key: 'c3a9bd83c455a79395574ff4d862299fd9340cd2', name: "icon-only" }), hAsync("slot", { key: '161ca1daed265e8990d28f74744476a37d555d85' }), hAsync("slot", { key: 'd5ecafceada1f8c3c16a2cb6511368828009081f', name: "end" })), hAsync("slot", { key: '39e6a9dffc2cb9e2e9a200f6c669ed47f9a485aa', name: "bottom" })), mode === 'md' && hAsync("ion-ripple-effect", null))));
+            }) }, hAsync(TagType, Object.assign({ key: '9f48210793e88f25b675add863453432e6d8be51' }, attrs, { class: "button-native", part: "native", disabled: disabled }), hAsync("span", { key: '3ebb5d9b7369f77ca49c8d700a95e4e2335a7f24', class: "button-inner" }, hAsync("slot", { key: '7df01a2c40554effe0e36e7fe29ac469a89ad395', name: "top" }), hAsync("div", { key: '1bdc411990a89a0523dd170bf4d61c2f28af3018', class: "horizontal-wrapper" }, hAsync("slot", { key: '967a0cc8ff611439fddf28c20c3f197be1a314a5', name: "start" }), hAsync("slot", { key: '7848ded44ce1b0e303f1c1a423fc1ae51e5997d4', name: "icon-only" }), hAsync("slot", { key: '6076bb1a50cebe374ecd8507133eaccd2ee2d08b' }), hAsync("slot", { key: '71505008df081744492fb22b41229ada64506834', name: "end" })), hAsync("slot", { key: 'c213321eafe801c1ace8573b4736c2f0ab585703', name: "bottom" })), mode === 'md' && hAsync("ion-ripple-effect", null))));
     }
     get el() { return getElement(this); }
     static get style() { return {
@@ -21767,7 +21814,7 @@ class ItemOptions {
     render() {
         const mode = getIonMode$1(this);
         const isEnd = isEndSide(this.side);
-        return (hAsync(Host, { key: '04d6baf62154da6ab9db5e679f982fe3fe276f89', class: {
+        return (hAsync(Host, { key: '42ec58a1a2a6a886309595103468d2c39e81f58b', class: {
                 [mode]: true,
                 // Used internally for styling
                 [`item-options-${mode}`]: true,
@@ -22229,7 +22276,7 @@ class ItemSliding {
     }
     render() {
         const mode = getIonMode$1(this);
-        return (hAsync(Host, { key: 'f666dd119a72247feac11dcd704059fce7677325', class: {
+        return (hAsync(Host, { key: '83e1673fc5af892612deb9b49d5e792b8b0b6473', class: {
                 [mode]: true,
                 'item-sliding-active-slide': this.state !== 2 /* SlidingState.Disabled */,
                 'item-sliding-active-options-end': (this.state & 8 /* SlidingState.End */) !== 0,
@@ -22338,7 +22385,7 @@ class Label {
     render() {
         const position = this.position;
         const mode = getIonMode$1(this);
-        return (hAsync(Host, { key: '813192a6460057c6d1e42f50f3f257bee2f550d8', class: createColorClasses$1(this.color, {
+        return (hAsync(Host, { key: 'c80cc1b4dcd56f614efc1e63ca80bca2f20a7151', class: createColorClasses$1(this.color, {
                 [mode]: true,
                 'in-item-color': hostContext('ion-item.ion-color', this.el),
                 [`label-${position}`]: position !== undefined,
@@ -22400,7 +22447,7 @@ class List {
     render() {
         const mode = getIonMode$1(this);
         const { lines, inset } = this;
-        return (hAsync(Host, { key: '2cb1b689d9460d9576b471bb8b13d14fe34d1c2c', role: "list", class: {
+        return (hAsync(Host, { key: '7f259d2a107807065a440cca848ececa0da60458', role: "list", class: {
                 [mode]: true,
                 // Used internally for styling
                 [`list-${mode}`]: true,
@@ -22446,10 +22493,10 @@ class ListHeader {
     render() {
         const { lines } = this;
         const mode = getIonMode$1(this);
-        return (hAsync(Host, { key: '1b832a6882307d40fe4afc9a95a5db4fbdff60a3', class: createColorClasses$1(this.color, {
+        return (hAsync(Host, { key: '27a08e9dc880db9377608ea262e254b0856b0d5c', class: createColorClasses$1(this.color, {
                 [mode]: true,
                 [`list-header-lines-${lines}`]: lines !== undefined,
-            }) }, hAsync("div", { key: 'a53a3f05727b510d1b912c10c92a4aa58f4fe860', class: "list-header-inner" }, hAsync("slot", { key: '9377dee83f050b2cb2c5b7c5d106668cc81d8f90' }))));
+            }) }, hAsync("div", { key: 'edd68f126ee5d815e6ae13e9662e8cedbd2d46e5', class: "list-header-inner" }, hAsync("slot", { key: 'dae94a382ef09bb90d3ff3fbb2306515acfc2014' }))));
     }
     static get style() { return {
         ios: IonListHeaderIosStyle0,
@@ -22715,9 +22762,9 @@ class Loading {
          * Otherwise, don't set aria-labelledby.
          */
         const ariaLabelledBy = message !== undefined ? msgId : null;
-        return (hAsync(Host, Object.assign({ key: '95123f54ba1db5e59563d79db075315b43ed20f7', role: "dialog", "aria-modal": "true", "aria-labelledby": ariaLabelledBy, tabindex: "-1" }, htmlAttributes, { style: {
+        return (hAsync(Host, Object.assign({ key: '7d4f3df4a869e66b59ce237b50b374cac4a296d3', 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 }) }), hAsync("ion-backdrop", { key: 'e113bf123eaad38f2dafce8ea5d2ebef409d0c0f', visible: this.showBackdrop, tappable: this.backdropDismiss }), hAsync("div", { key: '1268c9480854383c7883a79d597350540ade93c2', tabindex: "0" }), hAsync("div", { key: 'e86fc71504ebd578117dea2232d9740a087d1249', class: "loading-wrapper ion-overlay-wrapper" }, spinner && (hAsync("div", { class: "loading-spinner" }, hAsync("ion-spinner", { name: spinner, "aria-hidden": "true" }))), message !== undefined && this.renderLoadingMessage(msgId)), hAsync("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 }) }), hAsync("ion-backdrop", { key: '9d72026f73b56bc38a5317992caa17068f8402b5', visible: this.showBackdrop, tappable: this.backdropDismiss }), hAsync("div", { key: '67848b3058d4875b55cef88ccc0b5160cc9f5d9d', tabindex: "0" }), hAsync("div", { key: 'c275700b6cd77d7a0404b59e89ea97a75a4a22e9', class: "loading-wrapper ion-overlay-wrapper" }, spinner && (hAsync("div", { class: "loading-spinner" }, hAsync("ion-spinner", { name: spinner, "aria-hidden": "true" }))), message !== undefined && this.renderLoadingMessage(msgId)), hAsync("div", { key: '2333ff2f0d76bebe58cba85da0e5a38262ce33e7', tabindex: "0" })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -23715,13 +23762,13 @@ class Menu {
          * the ionBackButton listener in the menu controller
          * will handle closing the menu when Escape is pressed.
          */
-        return (hAsync(Host, { key: 'c6bf01fd87e31cda09c0c35900cb01ea19d61781', onKeyDown: shouldUseCloseWatcher() ? null : this.onKeydown, role: "navigation", "aria-label": inheritedAttributes['aria-label'] || 'menu', class: {
+        return (hAsync(Host, { key: '6c63bd340b8e2fc19b638189af44eae3627f8c0a', onKeyDown: shouldUseCloseWatcher() ? null : this.onKeydown, role: "navigation", "aria-label": inheritedAttributes['aria-label'] || 'menu', class: {
                 [mode]: true,
                 [`menu-type-${type}`]: true,
                 'menu-enabled': !disabled,
                 [`menu-side-${side}`]: true,
                 'menu-pane-visible': isPaneVisible,
-            } }, hAsync("div", { key: '6d818a470a74c11c10554d45d8586436a51f961e', class: "menu-inner", part: "container", ref: (el) => (this.menuInnerEl = el) }, hAsync("slot", { key: '3512e444ec6c6bf2a719b1dd713be9a7652f77c9' })), hAsync("ion-backdrop", { key: '618a5316462406fa47929e4dcd5a8e8c9057a418', ref: (el) => (this.backdropEl = el), class: "menu-backdrop", tappable: false, stopPropagation: false, part: "backdrop" })));
+            } }, hAsync("div", { key: '8cad9e601c8ca1d1dca32681937362a55311e015', class: "menu-inner", part: "container", ref: (el) => (this.menuInnerEl = el) }, hAsync("slot", { key: 'ce8ab737360c3a71ac6408d21fcb71485a189827' })), hAsync("ion-backdrop", { key: 'a7e5f9ebe98996c7f5ab0ef27223a2f24bf63646', ref: (el) => (this.backdropEl = el), class: "menu-backdrop", tappable: false, stopPropagation: false, part: "backdrop" })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -23824,7 +23871,7 @@ class MenuButton {
             type: this.type,
         };
         const ariaLabel = inheritedAttributes['aria-label'] || 'menu';
-        return (hAsync(Host, { key: '2fd7130b8d28695162f7efebbd2131e5e9e4f330', onClick: this.onClick, "aria-disabled": disabled ? 'true' : null, "aria-hidden": hidden ? 'true' : null, class: createColorClasses$1(color, {
+        return (hAsync(Host, { key: '23364bf8eae83c3a422bacb0f43bf957551a7b7a', onClick: this.onClick, "aria-disabled": disabled ? 'true' : null, "aria-hidden": hidden ? 'true' : null, class: createColorClasses$1(color, {
                 [mode]: true,
                 button: true, // ion-buttons target .button
                 'menu-button-hidden': hidden,
@@ -23833,7 +23880,7 @@ class MenuButton {
                 'in-toolbar-color': hostContext('ion-toolbar[color]', this.el),
                 'ion-activatable': true,
                 'ion-focusable': true,
-            }) }, hAsync("button", Object.assign({ key: 'fa6b1fb9291df812b04065b4b0ebdfd28e5217eb' }, attrs, { disabled: disabled, class: "button-native", part: "native", "aria-label": ariaLabel }), hAsync("span", { key: '88106a08070ebff7457c581301efe649829aded2', class: "button-inner" }, hAsync("slot", { key: 'e3edfb89e5705b2c08c66f3d3452457667de3657' }, hAsync("ion-icon", { key: '24678e9c3bb2f1f3db113a2ae0ec93e407a7de0c', part: "icon", icon: menuIcon, mode: mode, lazy: false, "aria-hidden": "true" }))), mode === 'md' && hAsync("ion-ripple-effect", { type: "unbounded" }))));
+            }) }, hAsync("button", Object.assign({ key: 'dacfa6f0881366385f3c3305fb656e5e8d4eaab8' }, attrs, { disabled: disabled, class: "button-native", part: "native", "aria-label": ariaLabel }), hAsync("span", { key: '2a11edcf830bde847cca810af461f4bcffd6aa30', class: "button-inner" }, hAsync("slot", { key: 'f6b1299cf096abe6f25e1f60ce6be2bbdfddcc73' }, hAsync("ion-icon", { key: '32c900a4b75ab90b149227075df4598539d09b5f', part: "icon", icon: menuIcon, mode: mode, lazy: false, "aria-hidden": "true" }))), mode === 'md' && hAsync("ion-ripple-effect", { type: "unbounded" }))));
     }
     get el() { return getElement(this); }
     static get style() { return {
@@ -23882,10 +23929,10 @@ class MenuToggle {
     render() {
         const mode = getIonMode$1(this);
         const hidden = this.autoHide && !this.visible;
-        return (hAsync(Host, { key: '5b75baade530bf9e7ed9165a5db3e513975e22f2', onClick: this.onClick, "aria-hidden": hidden ? 'true' : null, class: {
+        return (hAsync(Host, { key: '981008b9e03870363f2eba75d9d22823ed79753e', onClick: this.onClick, "aria-hidden": hidden ? 'true' : null, class: {
                 [mode]: true,
                 'menu-toggle-hidden': hidden,
-            } }, hAsync("slot", { key: '65dea458274b685125c22af54aa153cf4977113c' })));
+            } }, hAsync("slot", { key: '1c88aec9c2ee7c67ee37be71814fed35144bbea7' })));
     }
     static get style() { return IonMenuToggleStyle0; }
     static get cmpMeta() { return {
@@ -25762,9 +25809,9 @@ class Modal {
         const mode = getIonMode$1(this);
         const isCardModal = presentingElement !== undefined && mode === 'ios';
         const isHandleCycle = handleBehavior === 'cycle';
-        return (hAsync(Host, Object.assign({ key: '856aa156d687382cbd4a7ee47f553b96105fcf7d', "no-router": true, tabindex: "-1" }, htmlAttributes, { style: {
+        return (hAsync(Host, Object.assign({ key: '67ef0269a5e9b542d0c2acaa03a2f7f46b8cf0b5', "no-router": true, tabindex: "-1" }, htmlAttributes, { style: {
                 zIndex: `${20000 + this.overlayIndex}`,
-            }, class: Object.assign({ [mode]: true, ['modal-default']: !isCardModal && !isSheetModal, [`modal-card`]: isCardModal, [`modal-sheet`]: isSheetModal, 'overlay-hidden': true }, getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonModalDidPresent: this.onLifecycle, onIonModalWillPresent: this.onLifecycle, onIonModalWillDismiss: this.onLifecycle, onIonModalDidDismiss: this.onLifecycle }), hAsync("ion-backdrop", { key: '98205df704505f77c4878cd0b92598c1525b1a85', ref: (el) => (this.backdropEl = el), visible: this.showBackdrop, tappable: this.backdropDismiss, part: "backdrop" }), mode === 'ios' && hAsync("div", { class: "modal-shadow" }), hAsync("div", Object.assign({ key: '412e76909a459f80bdd3c311d88407890c9aed4f',
+            }, class: Object.assign({ [mode]: true, ['modal-default']: !isCardModal && !isSheetModal, [`modal-card`]: isCardModal, [`modal-sheet`]: isSheetModal, 'overlay-hidden': true }, getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonModalDidPresent: this.onLifecycle, onIonModalWillPresent: this.onLifecycle, onIonModalWillDismiss: this.onLifecycle, onIonModalDidDismiss: this.onLifecycle }), hAsync("ion-backdrop", { key: 'edd98375e98d887dbea232adb81b74f164fa058b', ref: (el) => (this.backdropEl = el), visible: this.showBackdrop, tappable: this.backdropDismiss, part: "backdrop" }), mode === 'ios' && hAsync("div", { class: "modal-shadow" }), hAsync("div", Object.assign({ key: '40437670391544b57b8a9943ef3b49de7acbd873',
             /*
               role and aria-modal must be used on the
               same element. They must also be set inside the
@@ -25773,7 +25820,7 @@ class Modal {
             */
             role: "dialog" }, inheritedAttributes, { "aria-modal": "true", class: "modal-wrapper ion-overlay-wrapper", part: "content", ref: (el) => (this.wrapperEl = el) }), showHandle && (hAsync("button", { class: "modal-handle",
             // Prevents the handle from receiving keyboard focus when it does not cycle
-            tabIndex: !isHandleCycle ? -1 : 0, "aria-label": "Activate to adjust the size of the dialog overlaying the screen", onClick: isHandleCycle ? this.onHandleClick : undefined, part: "handle" })), hAsync("slot", { key: '3e532328bc1eeb1d1213f9b3c098e89b77590620' }))));
+            tabIndex: !isHandleCycle ? -1 : 0, "aria-label": "Activate to adjust the size of the dialog overlaying the screen", onClick: isHandleCycle ? this.onHandleClick : undefined, part: "handle" })), hAsync("slot", { key: 'dfe2095d9e1adb075dc09d1927ef24ea09ea5435' }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -26718,7 +26765,7 @@ class Nav {
         }
     }
     render() {
-        return hAsync("slot", { key: '654286a8a7ef03d4a22497eb51e781a9a8979774' });
+        return hAsync("slot", { key: '8254ea10bef0575c13f8b0ddbe4643bec19f2366' });
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -26790,7 +26837,7 @@ class NavLink {
         this.routerAnimation = undefined;
     }
     render() {
-        return hAsync(Host, { key: 'a781794425ad0866705bc6691256184b93477a74', onClick: this.onClick });
+        return hAsync(Host, { key: 'dfbfc1a69c48248a8861463ed31c693be6543f32', onClick: this.onClick });
     }
     get el() { return getElement(this); }
     static get cmpMeta() { return {
@@ -26824,9 +26871,9 @@ class Note {
     }
     render() {
         const mode = getIonMode$1(this);
-        return (hAsync(Host, { key: 'eebc0ea94483a248192408a1546739700281d2ae', class: createColorClasses$1(this.color, {
+        return (hAsync(Host, { key: 'de9f59a3e1700776780e61def3044901e1d1bef5', class: createColorClasses$1(this.color, {
                 [mode]: true,
-            }) }, hAsync("slot", { key: '33018e11967398327a0e7c20522547a4d9e8f55b' })));
+            }) }, hAsync("slot", { key: '30f98649d4d31a297ab71d23ed38fa021540a8f2' })));
     }
     static get style() { return {
         ios: IonNoteIosStyle0,
@@ -27078,11 +27125,11 @@ class Picker {
     render() {
         const { htmlAttributes } = this;
         const mode = getIonMode$1(this);
-        return (hAsync(Host, Object.assign({ key: 'c266cc072afaba2da22f70d8b62dc4bc6756d188', "aria-modal": "true", tabindex: "-1" }, htmlAttributes, { style: {
+        return (hAsync(Host, Object.assign({ key: 'd2a0406625c8de0604a926a807f63c7f25bf4bab', "aria-modal": "true", tabindex: "-1" }, htmlAttributes, { style: {
                 zIndex: `${20000 + this.overlayIndex}`,
             }, class: Object.assign({ [mode]: true,
                 // Used internally for styling
-                [`picker-${mode}`]: true, 'overlay-hidden': true }, getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonPickerWillDismiss: this.dispatchCancelHandler }), hAsync("ion-backdrop", { key: '35ee3e5028028835580e28ac2c8db65a924d5d6a', visible: this.showBackdrop, tappable: this.backdropDismiss }), hAsync("div", { key: '8b454e6edbcfc45c57d3d8baf7c14b7905921a6e', tabindex: "0" }), hAsync("div", { key: 'e0fee78ec6d097bf0963190f748e5daad602e0f7', class: "picker-wrapper ion-overlay-wrapper", role: "dialog" }, hAsync("div", { key: 'ce66bca18fc3e982ad7d6660f27cb1a03fb8247b', class: "picker-toolbar" }, this.buttons.map((b) => (hAsync("div", { class: buttonWrapperClass(b) }, hAsync("button", { type: "button", onClick: () => this.buttonClick(b), class: buttonClass$1(b) }, b.text))))), hAsync("div", { key: 'a58b9523fe16f109dd6de0610717c5077fed964b', class: "picker-columns" }, hAsync("div", { key: 'acd54c0314cff51e8513a08dd9755c4b847c0617', class: "picker-above-highlight" }), this.presented && this.columns.map((c) => hAsync("ion-picker-column", { col: c })), hAsync("div", { key: '604730bd87582d048d850c6e0a0f29ba33258918', class: "picker-below-highlight" }))), hAsync("div", { key: '93baf5e6e57aec5f084d7d5b24af14e7d8126b5a', tabindex: "0" })));
+                [`picker-${mode}`]: true, 'overlay-hidden': true }, getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonPickerWillDismiss: this.dispatchCancelHandler }), hAsync("ion-backdrop", { key: '776a45c3df93ab4683727bb5c8ba0085f4336586', visible: this.showBackdrop, tappable: this.backdropDismiss }), hAsync("div", { key: 'fc34d3838cfc5c38097dac9e749dbf7433e1a10a', tabindex: "0" }), hAsync("div", { key: '49bf9e92e301cbe12e2e683df110cccd6c9b8042', class: "picker-wrapper ion-overlay-wrapper", role: "dialog" }, hAsync("div", { key: 'f2810a07ea067be31c169f36cbb44ca8a5dc219b', class: "picker-toolbar" }, this.buttons.map((b) => (hAsync("div", { class: buttonWrapperClass(b) }, hAsync("button", { type: "button", onClick: () => this.buttonClick(b), class: buttonClass$1(b) }, b.text))))), hAsync("div", { key: 'f2d2a4652a8e368e40d4462d2b5e4c8095001b64', class: "picker-columns" }, hAsync("div", { key: '143ee78c8e0543f3a2f897097ff09e18f5b68016', class: "picker-above-highlight" }), this.presented && this.columns.map((c) => hAsync("ion-picker-column", { col: c })), hAsync("div", { key: '47716d2e923ca096a0bd48a07fee2deae1b1a567', class: "picker-below-highlight" }))), hAsync("div", { key: 'ecd3b459cae6492330c7c5847c2b4cd214c9c615', tabindex: "0" })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -27473,9 +27520,9 @@ class PickerColumnCmp {
     render() {
         const col = this.col;
         const mode = getIonMode$1(this);
-        return (hAsync(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 (hAsync(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 && (hAsync("div", { class: "picker-prefix", style: { width: col.prefixWidth } }, col.prefix)), hAsync("div", { key: '14bea013788d899edf7155eb3cc10f79fe8e4690', class: "picker-opts", style: { maxWidth: col.optionsWidth }, ref: (el) => (this.optsEl = el) }, col.options.map((o, index) => (hAsync("button", { "aria-label": o.ariaLabel, class: { 'picker-opt': true, 'picker-opt-disabled': !!o.disabled }, "opt-index": index }, o.text)))), col.suffix && (hAsync("div", { class: "picker-suffix", style: { width: col.suffixWidth } }, col.suffix))));
+            } }, col.prefix && (hAsync("div", { class: "picker-prefix", style: { width: col.prefixWidth } }, col.prefix)), hAsync("div", { key: '2c0471c265bc3dfa2d415da77b8a70850e74458e', class: "picker-opts", style: { maxWidth: col.optionsWidth }, ref: (el) => (this.optsEl = el) }, col.options.map((o, index) => (hAsync("button", { "aria-label": o.ariaLabel, class: { 'picker-opt': true, 'picker-opt-disabled': !!o.disabled }, "opt-index": index }, o.text)))), col.suffix && (hAsync("div", { class: "picker-suffix", style: { width: col.suffixWidth } }, col.suffix))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -27746,7 +27793,11 @@ class PickerColumnInternal {
      */
     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;
@@ -27835,18 +27886,18 @@ class PickerColumnInternal {
          * the attribute can be moved to datetime.tsx and set on every
          * instance of ion-picker-column-internal there instead.
          */
-        return (hAsync(Host, { key: 'd0e3818aa4ab06aefd988d1b42ae754244727b8f', exportparts: `${PICKER_ITEM_PART}, ${PICKER_ITEM_ACTIVE_PART}`, disabled: pickerDisabled, tabindex: pickerDisabled ? null : 0, class: createColorClasses$1(color, {
+        return (hAsync(Host, { key: 'eeb70e31fca7bff943a2fc29a3da0383520fdd84', exportparts: `${PICKER_ITEM_PART}, ${PICKER_ITEM_ACTIVE_PART}`, disabled: pickerDisabled, tabindex: pickerDisabled ? null : 0, class: createColorClasses$1(color, {
                 [mode]: true,
                 ['picker-column-active']: isActive,
                 ['picker-column-numeric-input']: numericInput,
-            }) }, hAsync("div", { key: 'ec3b16415db5f64e3fab37fda023560ebcdc9423', class: "picker-item picker-item-empty", "aria-hidden": "true" }, "\u00A0"), hAsync("div", { key: '40c78c9a1277807572d73e23048c2730cab88f5a', class: "picker-item picker-item-empty", "aria-hidden": "true" }, "\u00A0"), hAsync("div", { key: 'c51fa817f6999356cf3568a46098e954936b45d5', class: "picker-item picker-item-empty", "aria-hidden": "true" }, "\u00A0"), items.map((item, index) => {
+            }) }, hAsync("div", { key: '08cffb51ab2ce1a4b83e35b25afd2880d6949d8e', class: "picker-item picker-item-empty", "aria-hidden": "true" }, "\u00A0"), hAsync("div", { key: '88389ba5287ee5e251fa36a0e13a888c8dfbf8e8', class: "picker-item picker-item-empty", "aria-hidden": "true" }, "\u00A0"), hAsync("div", { key: '2dc958f37a939a0fbbc35d92482e9c64741d8f5a', class: "picker-item picker-item-empty", "aria-hidden": "true" }, "\u00A0"), items.map((item, index) => {
             const isItemDisabled = pickerDisabled || item.disabled || false;
             return (hAsync("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));
-        }), hAsync("div", { key: '80a7461dfe571f46466219b05007b021711aed32', class: "picker-item picker-item-empty", "aria-hidden": "true" }, "\u00A0"), hAsync("div", { key: 'fed82263295f58c51e2b753d0c06c7d71872b8a7', class: "picker-item picker-item-empty", "aria-hidden": "true" }, "\u00A0"), hAsync("div", { key: 'e805dff4122cc4e5fb4d7dcb96054fee8ad3bd07', class: "picker-item picker-item-empty", "aria-hidden": "true" }, "\u00A0")));
+        }), hAsync("div", { key: 'd31f134aa67a10ad1b796a4e1ffbea439b2b3723', class: "picker-item picker-item-empty", "aria-hidden": "true" }, "\u00A0"), hAsync("div", { key: '3015f7f774b44d349f445e585b73295814c76326', class: "picker-item picker-item-empty", "aria-hidden": "true" }, "\u00A0"), hAsync("div", { key: 'df165c76253e51bd6968bdcd8071ad69467bda4c', class: "picker-item picker-item-empty", "aria-hidden": "true" }, "\u00A0")));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -28351,7 +28402,7 @@ class PickerInternal {
         this.emitInputModeChange();
     }
     render() {
-        return (hAsync(Host, { key: 'f6b301345583f5ccfc31cce536176af7aeefd193', onPointerDown: (ev) => this.onPointerDown(ev), onClick: () => this.onClick() }, hAsync("input", { key: 'e57fd191d49cc500b719d5b9ad35054d55e96c43', "aria-hidden": "true", tabindex: -1, inputmode: "numeric", type: "number", onKeyDown: (ev) => {
+        return (hAsync(Host, { key: '49581a3c11cd7808555c576c46b833ac9d60f71a', onPointerDown: (ev) => this.onPointerDown(ev), onClick: () => this.onClick() }, hAsync("input", { key: '92628e29f76914b955aa11d4e45797a941821159', "aria-hidden": "true", tabindex: -1, inputmode: "numeric", type: "number", onKeyDown: (ev) => {
                 var _a;
                 /**
                  * The "Enter" key represents
@@ -28366,7 +28417,7 @@ class PickerInternal {
                 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() }), hAsync("div", { key: '3360e7d913f87293844928e430acde69d399f68e', class: "picker-before" }), hAsync("div", { key: '4db89e681458d4eec5d60ff47d3e0ba9fd116682', class: "picker-after" }), hAsync("div", { key: 'a21b20d77dac8141623995b5a53f416d3d9fc1ef', class: "picker-highlight", ref: (el) => (this.highlightEl = el) }), hAsync("slot", { key: '86c7d926523b615b4769bd1a4e9713b351089369' })));
+            }, ref: (el) => (this.inputEl = el), onInput: () => this.onInputChange(), onBlur: () => this.exitInputMode() }), hAsync("div", { key: '455d7ef6dd1425e882d86f49e0d817883fe222b2', class: "picker-before" }), hAsync("div", { key: '0351296cf171d22840542eb178ec3fae1e90f5d5', class: "picker-after" }), hAsync("div", { key: 'b4ecaa88d0bbbd69e72b3d4f27ad3bd91f3da84d', class: "picker-highlight", ref: (el) => (this.highlightEl = el) }), hAsync("slot", { key: 'fac29c179707002861f39d2ba1ea53479d0d9b74' })));
     }
     get el() { return getElement(this); }
     static get style() { return {
@@ -29672,9 +29723,9 @@ class Popover {
         const { onLifecycle, parentPopover, dismissOnSelect, side, arrow, htmlAttributes } = this;
         const desktop = isPlatform('desktop');
         const enableArrow = arrow && !parentPopover;
-        return (hAsync(Host, Object.assign({ key: '104a5bf92a9bbd2efc71d499a8500e5d55f81711', "aria-modal": "true", "no-router": true, tabindex: "-1" }, htmlAttributes, { style: {
+        return (hAsync(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 && hAsync("ion-backdrop", { tappable: this.backdropDismiss, visible: this.showBackdrop, part: "backdrop" }), hAsync("div", { key: 'ef0baa04c22444d4bc705220235a892308d67586', class: "popover-wrapper ion-overlay-wrapper", onClick: dismissOnSelect ? () => this.dismiss() : undefined }, enableArrow && hAsync("div", { class: "popover-arrow", part: "arrow" }), hAsync("div", { key: '5cc5f5c353de614e484e9cfeacecfca9fbfde0e0', class: "popover-content", part: "content" }, hAsync("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 && hAsync("ion-backdrop", { tappable: this.backdropDismiss, visible: this.showBackdrop, part: "backdrop" }), hAsync("div", { key: '99d26b7ebd403061f4fe75c10b8106d5795cbbc0', class: "popover-wrapper ion-overlay-wrapper", onClick: dismissOnSelect ? () => this.dismiss() : undefined }, enableArrow && hAsync("div", { class: "popover-arrow", part: "arrow" }), hAsync("div", { key: '6179601846f042b7b3be20c93845464ec8bef98a', class: "popover-content", part: "content" }, hAsync("slot", { key: '2ba4f3ba26adfd3d42fa78ca6b6561d4088be8a8' })))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -29763,7 +29814,7 @@ class ProgressBar {
         const { color, type, reversed, value, buffer } = this;
         const paused = config.getBoolean('_testing');
         const mode = getIonMode$1(this);
-        return (hAsync(Host, { key: '384d09558f91dc8119e689c3a8923e67c54c7eb2', role: "progressbar", "aria-valuenow": type === 'determinate' ? value : null, "aria-valuemin": "0", "aria-valuemax": "1", class: createColorClasses$1(color, {
+        return (hAsync(Host, { key: '4dbdfe17c039ed9b2e0badec30655cb9e7dac768', role: "progressbar", "aria-valuenow": type === 'determinate' ? value : null, "aria-valuemin": "0", "aria-valuemax": "1", class: createColorClasses$1(color, {
                 [mode]: true,
                 [`progress-bar-${type}`]: true,
                 'progress-paused': paused,
@@ -30186,7 +30237,7 @@ class RadioGroup {
         const { label, labelId, el, name, value } = this;
         const mode = getIonMode$1(this);
         renderHiddenInput(true, el, name, value, false);
-        return hAsync(Host, { key: 'd8e84feca8f4dbe7605bc4ad096b6e68b482ba68', role: "radiogroup", "aria-labelledby": label ? labelId : null, onClick: this.onClick, class: mode });
+        return hAsync(Host, { key: 'c0784903ad0b3914f448cca4b91172ad3af3ed70', role: "radiogroup", "aria-labelledby": label ? labelId : null, onClick: this.onClick, class: mode });
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -31767,7 +31818,7 @@ class Refresher {
     }
     render() {
         const mode = getIonMode$1(this);
-        return (hAsync(Host, { key: '9cf8e306e367e0ffd99f8a242dce0c9d78f96317', slot: "fixed", class: {
+        return (hAsync(Host, { key: 'af60b9453ee4bbf61ed9651d509700fddd91f2c2', slot: "fixed", class: {
                 [mode]: true,
                 // Used internally for styling
                 [`refresher-${mode}`]: true,
@@ -31995,7 +32046,7 @@ class RefresherContent {
         const pullingIcon = this.pullingIcon;
         const hasSpinner = pullingIcon != null && SPINNERS[pullingIcon] !== undefined;
         const mode = getIonMode$1(this);
-        return (hAsync(Host, { key: '537e4d601fd09804d072e9fed9b2c6ba8d890548', class: mode }, hAsync("div", { key: '67f46df746f7da2fc60c47da9216a2920c25166f', class: "refresher-pulling" }, this.pullingIcon && hasSpinner && (hAsync("div", { class: "refresher-pulling-icon" }, hAsync("div", { class: "spinner-arrow-container" }, hAsync("ion-spinner", { name: this.pullingIcon, paused: true }), mode === 'md' && this.pullingIcon === 'circular' && (hAsync("div", { class: "arrow-container" }, hAsync("ion-icon", { icon: caretBackSharp, "aria-hidden": "true" })))))), this.pullingIcon && !hasSpinner && (hAsync("div", { class: "refresher-pulling-icon" }, hAsync("ion-icon", { icon: this.pullingIcon, lazy: false, "aria-hidden": "true" }))), this.pullingText !== undefined && this.renderPullingText()), hAsync("div", { key: '216f96af452e1567df7906c4d9e6fbf8c397ad21', class: "refresher-refreshing" }, this.refreshingSpinner && (hAsync("div", { class: "refresher-refreshing-icon" }, hAsync("ion-spinner", { name: this.refreshingSpinner }))), this.refreshingText !== undefined && this.renderRefreshingText())));
+        return (hAsync(Host, { key: '85e47044192d174d82e0a8cc6171e862c395f385', class: mode }, hAsync("div", { key: 'e8ce4fc1cad510da18988cb8c1e095c62a7af418', class: "refresher-pulling" }, this.pullingIcon && hasSpinner && (hAsync("div", { class: "refresher-pulling-icon" }, hAsync("div", { class: "spinner-arrow-container" }, hAsync("ion-spinner", { name: this.pullingIcon, paused: true }), mode === 'md' && this.pullingIcon === 'circular' && (hAsync("div", { class: "arrow-container" }, hAsync("ion-icon", { icon: caretBackSharp, "aria-hidden": "true" })))))), this.pullingIcon && !hasSpinner && (hAsync("div", { class: "refresher-pulling-icon" }, hAsync("ion-icon", { icon: this.pullingIcon, lazy: false, "aria-hidden": "true" }))), this.pullingText !== undefined && this.renderPullingText()), hAsync("div", { key: 'a55e3bd94ae381d1502da2799472b6bd1402487c', class: "refresher-refreshing" }, this.refreshingSpinner && (hAsync("div", { class: "refresher-refreshing-icon" }, hAsync("ion-spinner", { name: this.refreshingSpinner }))), this.refreshingText !== undefined && this.renderRefreshingText())));
     }
     get el() { return getElement(this); }
     static get cmpMeta() { return {
@@ -32038,7 +32089,7 @@ class Reorder {
     render() {
         const mode = getIonMode$1(this);
         const reorderIcon = mode === 'ios' ? reorderThreeOutline : reorderTwoSharp;
-        return (hAsync(Host, { key: 'e625707b1810f93f5c667e38b8e2904988a3cff0', class: mode }, hAsync("slot", { key: 'fd0c3167e8a7955a6f841b338345de0528535ff5' }, hAsync("ion-icon", { key: '3fc7bb1adb0dde839ec4898361e359c640e81067', icon: reorderIcon, lazy: false, class: "reorder-icon", part: "icon", "aria-hidden": "true" }))));
+        return (hAsync(Host, { key: '811f71aa6f4b45ee8a597f504af6c43d34cc8c53', class: mode }, hAsync("slot", { key: '78e1898b412b322053fe924db7934d5840184bfc' }, hAsync("ion-icon", { key: '171f86c625d64ce3c5b5ebc54372a6573fc437ef', icon: reorderIcon, lazy: false, class: "reorder-icon", part: "icon", "aria-hidden": "true" }))));
     }
     get el() { return getElement(this); }
     static get style() { return {
@@ -32292,7 +32343,7 @@ class ReorderGroup {
     }
     render() {
         const mode = getIonMode$1(this);
-        return (hAsync(Host, { key: '067b8ff26887c4e458163f70f7308723c90a53f8', class: {
+        return (hAsync(Host, { key: '5a8c5c11fa48ff2cec319a1a07ba74427c2a42e5', class: {
                 [mode]: true,
                 'reorder-enabled': !this.disabled,
                 'reorder-list-active': this.state !== 0 /* ReorderGroupState.Idle */,
@@ -32400,7 +32451,7 @@ class RippleEffect {
     }
     render() {
         const mode = getIonMode$1(this);
-        return (hAsync(Host, { key: 'a9ff1956627908ee4071002ca018eaa80f87cd59', role: "presentation", class: {
+        return (hAsync(Host, { key: '9f2578664e5ff8a0a7e27cd90b2339bd430e72b8', role: "presentation", class: {
                 [mode]: true,
                 unbounded: this.unbounded,
             } }));
@@ -33342,10 +33393,10 @@ class RouterLink {
             rel: this.rel,
             target: this.target,
         };
-        return (hAsync(Host, { key: '9944573e56abecc47afd2df03b386e38fc7ed2f3', onClick: this.onClick, class: createColorClasses$1(this.color, {
+        return (hAsync(Host, { key: 'ca8b357234ae511a20f6a47487bb86cbaaa5f5ef', onClick: this.onClick, class: createColorClasses$1(this.color, {
                 [mode]: true,
                 'ion-activatable': true,
-            }) }, hAsync("a", Object.assign({ key: '383de10c02eb9ab87e27890548ef681dccf2a765' }, attrs), hAsync("slot", { key: '584a5a52e2b116f3827596cc5869a3557d6bcb6b' }))));
+            }) }, hAsync("a", Object.assign({ key: 'f590738389776d480014f18f599d753c68840e49' }, attrs), hAsync("slot", { key: '525ff073d71ede310e9f790b49f7414bf5a0919b' }))));
     }
     static get style() { return IonRouterLinkStyle0; }
     static get cmpMeta() { return {
@@ -33540,7 +33591,7 @@ class RouterOutlet {
         return true;
     }
     render() {
-        return hAsync("slot", { key: '69b452a0dc0c10440bdd8700cf4843c43154c707' });
+        return hAsync("slot", { key: 'e4eaa40478f70742d0ff7602ed5f83879da9f1b4' });
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -33574,7 +33625,7 @@ class Row {
         registerInstance(this, hostRef);
     }
     render() {
-        return (hAsync(Host, { key: 'de94b93c001a93b2a88bcb8e959f421fd5ad4a65', class: getIonMode$1(this) }, hAsync("slot", { key: '41fa951758d3644bb77d80002caf6e25a79393ce' })));
+        return (hAsync(Host, { key: '36d12784e6f8339a1d03ff6f03af5c7b3f437293', class: getIonMode$1(this) }, hAsync("slot", { key: '54cc627f95bb091d31a550aca00b14ab73d2f1bf' })));
     }
     static get style() { return IonRowStyle0; }
     static get cmpMeta() { return {
@@ -33609,6 +33660,7 @@ class Searchbar {
         this.isCancelVisible = false;
         this.shouldAlignLeft = true;
         this.inputId = `ion-searchbar-${searchbarIds++}`;
+        this.inheritedAttributes = {};
         /**
          * Clears the input field and triggers the control change.
          */
@@ -33709,6 +33761,7 @@ class Searchbar {
         this.noAnimate = true;
         this.color = undefined;
         this.animated = false;
+        this.autocapitalize = undefined;
         this.autocomplete = 'off';
         this.autocorrect = 'off';
         this.cancelButtonIcon = config.get('backButtonIcon', arrowBackSharp);
@@ -33718,6 +33771,8 @@ class Searchbar {
         this.disabled = false;
         this.inputmode = undefined;
         this.enterkeyhint = undefined;
+        this.maxlength = undefined;
+        this.minlength = undefined;
         this.name = this.inputId;
         this.placeholder = 'Search';
         this.searchIcon = undefined;
@@ -33727,6 +33782,19 @@ class Searchbar {
         this.type = 'search';
         this.value = '';
     }
+    /**
+     * lang and dir are globally enumerated attributes.
+     * As a result, creating these as properties
+     * can have unintended side effects. Instead, we
+     * listen for attribute changes and inherit them
+     * to the inner `<input>` element.
+     */
+    onLangChanged(newValue) {
+        this.inheritedAttributes = Object.assign(Object.assign({}, this.inheritedAttributes), { lang: newValue });
+    }
+    onDirChanged(newValue) {
+        this.inheritedAttributes = Object.assign(Object.assign({}, this.inheritedAttributes), { dir: newValue });
+    }
     debounceChanged() {
         const { ionInput, debounce, originalIonInput } = this;
         /**
@@ -33750,6 +33818,9 @@ class Searchbar {
     connectedCallback() {
         this.emitStyle();
     }
+    componentWillLoad() {
+        this.inheritedAttributes = Object.assign({}, inheritAttributes$1(this.el, ['lang', 'dir']));
+    }
     componentDidLoad() {
         this.originalIonInput = this.ionInput;
         this.positionElements();
@@ -33948,8 +34019,8 @@ class Searchbar {
         const clearIcon = this.clearIcon || (mode === 'ios' ? closeCircle : closeSharp);
         const searchIcon = this.searchIcon || (mode === 'ios' ? searchOutline : searchSharp);
         const shouldShowCancelButton = this.shouldShowCancelButton();
-        const cancelButton = this.showCancelButton !== 'never' && (hAsync("button", { key: '1de9b9bc6bad708bafcf4d31fa82838355120486', "aria-label": cancelButtonText, "aria-hidden": shouldShowCancelButton ? undefined : 'true', type: "button", tabIndex: mode === 'ios' && !shouldShowCancelButton ? -1 : undefined, onMouseDown: this.onCancelSearchbar, onTouchStart: this.onCancelSearchbar, class: "searchbar-cancel-button" }, hAsync("div", { key: 'e5178016e17104a80732edbae73c0dfc264bfe52', "aria-hidden": "true" }, mode === 'md' ? (hAsync("ion-icon", { "aria-hidden": "true", mode: mode, icon: this.cancelButtonIcon, lazy: false })) : (cancelButtonText))));
-        return (hAsync(Host, { key: '2c88a7b6ec7f33ada7dae560881210d7a8800f76', role: "search", "aria-disabled": this.disabled ? 'true' : null, class: createColorClasses$1(this.color, {
+        const cancelButton = this.showCancelButton !== 'never' && (hAsync("button", { key: '31e1551828be00d292dbccc68acd43a0df27839e', "aria-label": cancelButtonText, "aria-hidden": shouldShowCancelButton ? undefined : 'true', type: "button", tabIndex: mode === 'ios' && !shouldShowCancelButton ? -1 : undefined, onMouseDown: this.onCancelSearchbar, onTouchStart: this.onCancelSearchbar, class: "searchbar-cancel-button" }, hAsync("div", { key: '925d1e54980c00c7e268d4bb1fb591d7c473f1e7', "aria-hidden": "true" }, mode === 'md' ? (hAsync("ion-icon", { "aria-hidden": "true", mode: mode, icon: this.cancelButtonIcon, lazy: false })) : (cancelButtonText))));
+        return (hAsync(Host, { key: 'c677626a8d9395063dd41dc4b1df8eeefde0fb4c', role: "search", "aria-disabled": this.disabled ? 'true' : null, class: createColorClasses$1(this.color, {
                 [mode]: true,
                 'searchbar-animated': animated,
                 'searchbar-disabled': this.disabled,
@@ -33959,17 +34030,19 @@ class Searchbar {
                 'searchbar-has-focus': this.focused,
                 'searchbar-should-show-clear': this.shouldShowClearButton(),
                 'searchbar-should-show-cancel': this.shouldShowCancelButton(),
-            }) }, hAsync("div", { key: '8e914264a99453748a2bf370943e4047a0a587fb', class: "searchbar-input-container" }, hAsync("input", { key: 'd772f3e8d42301e50fbd6c9deb332fbdf3c435ac', "aria-label": "search text", disabled: this.disabled, ref: (el) => (this.nativeInput = el), class: "searchbar-input", inputMode: this.inputmode, enterKeyHint: this.enterkeyhint, name: this.name, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, placeholder: this.placeholder, type: this.type, value: this.getValue(), autoComplete: this.autocomplete, autoCorrect: this.autocorrect, spellcheck: this.spellcheck }), mode === 'md' && cancelButton, hAsync("ion-icon", { key: '8d9b461c2c34729b1bb562c227868cf817a353bc', "aria-hidden": "true", mode: mode, icon: searchIcon, lazy: false, class: "searchbar-search-icon" }), hAsync("button", { key: 'bcc39be721f4b825af31aae4dfb3058722d889a8', "aria-label": "reset", type: "button", "no-blur": true, class: "searchbar-clear-button", onPointerDown: (ev) => {
+            }) }, hAsync("div", { key: '6752074931e6ce320a7f05844d471627bd896cf2', class: "searchbar-input-container" }, hAsync("input", Object.assign({ key: 'f74ba66f1eb9ec26ec3e8a0d149d11eadf106a67', "aria-label": "search text", disabled: this.disabled, ref: (el) => (this.nativeInput = el), class: "searchbar-input", inputMode: this.inputmode, enterKeyHint: this.enterkeyhint, name: this.name, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, minLength: this.minlength, maxLength: this.maxlength, placeholder: this.placeholder, type: this.type, value: this.getValue(), autoCapitalize: this.autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, spellcheck: this.spellcheck }, this.inheritedAttributes)), mode === 'md' && cancelButton, hAsync("ion-icon", { key: '7817d383dab14abf89638ffdde796cf4412fde9e', "aria-hidden": "true", mode: mode, icon: searchIcon, lazy: false, class: "searchbar-search-icon" }), hAsync("button", { key: 'edd2093966b8250cb158a053ebb8a2cd5525b589', "aria-label": "reset", type: "button", "no-blur": true, class: "searchbar-clear-button", onPointerDown: (ev) => {
                 /**
                  * This prevents mobile browsers from
                  * blurring the input when the clear
                  * button is activated.
                  */
                 ev.preventDefault();
-            }, onClick: () => this.onClearInput(true) }, hAsync("ion-icon", { key: '9a6478e1f1482aa6e62c88bd96cd19cacbfb8d60', "aria-hidden": "true", mode: mode, icon: clearIcon, lazy: false, class: "searchbar-clear-icon" }))), mode === 'ios' && cancelButton));
+            }, onClick: () => this.onClearInput(true) }, hAsync("ion-icon", { key: 'a1deef96cfdeb19f28fc77fda63c04c7424348c7', "aria-hidden": "true", mode: mode, icon: clearIcon, lazy: false, class: "searchbar-clear-icon" }))), mode === 'ios' && cancelButton));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
+        "lang": ["onLangChanged"],
+        "dir": ["onDirChanged"],
         "debounce": ["debounceChanged"],
         "value": ["valueChanged"],
         "showCancelButton": ["showCancelButtonChanged"]
@@ -33984,6 +34057,7 @@ class Searchbar {
         "$members$": {
             "color": [513],
             "animated": [4],
+            "autocapitalize": [1],
             "autocomplete": [1],
             "autocorrect": [1],
             "cancelButtonIcon": [1, "cancel-button-icon"],
@@ -33993,6 +34067,8 @@ class Searchbar {
             "disabled": [4],
             "inputmode": [1],
             "enterkeyhint": [1],
+            "maxlength": [2],
+            "minlength": [2],
             "name": [1],
             "placeholder": [1],
             "searchIcon": [1, "search-icon"],
@@ -34435,14 +34511,14 @@ class Segment {
     }
     render() {
         const mode = getIonMode$1(this);
-        return (hAsync(Host, { key: '971e62fdaef3b6380aa1bf214605a5bfde662abf', role: "tablist", onClick: this.onClick, class: createColorClasses$1(this.color, {
+        return (hAsync(Host, { key: '0cf2e11e5599a0de2b0c7dc2a46917f4894ceb05', role: "tablist", onClick: this.onClick, class: createColorClasses$1(this.color, {
                 [mode]: true,
                 'in-toolbar': hostContext('ion-toolbar', this.el),
                 'in-toolbar-color': hostContext('ion-toolbar[color]', this.el),
                 'segment-activated': this.activated,
                 'segment-disabled': this.disabled,
                 'segment-scrollable': this.scrollable,
-            }) }, hAsync("slot", { key: 'eaa7a8a3d5237c8bbc03f57690fd0aa7e4c124e3' })));
+            }) }, hAsync("slot", { key: '913f2e4a823d3a58ea074dfb95314651c46739db' })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -34552,7 +34628,7 @@ class SegmentButton {
         const { checked, type, disabled, hasIcon, hasLabel, layout, segmentEl } = this;
         const mode = getIonMode$1(this);
         const hasSegmentColor = () => (segmentEl === null || segmentEl === void 0 ? void 0 : segmentEl.color) !== undefined;
-        return (hAsync(Host, { key: 'b50b375ed817b47720b743078202f38c737a4034', class: {
+        return (hAsync(Host, { key: '5fda697569eb875991bb948be553ee0716ac9aa2', class: {
                 [mode]: true,
                 'in-toolbar': hostContext('ion-toolbar', this.el),
                 'in-toolbar-color': hostContext('ion-toolbar[color]', this.el),
@@ -34568,10 +34644,10 @@ class SegmentButton {
                 'ion-activatable': true,
                 'ion-activatable-instant': true,
                 'ion-focusable': true,
-            } }, hAsync("button", Object.assign({ key: '402f6467ec9ce97aa1df2c72382d07242b51c114', "aria-selected": checked ? 'true' : 'false', role: "tab", ref: (el) => (this.nativeEl = el), type: type, class: "button-native", part: "native", disabled: disabled }, this.inheritedAttributes), hAsync("span", { key: '4f5a1988296c4e59e64255feff264bbbe2ccc312', class: "button-inner" }, hAsync("slot", { key: '35b2a26cca8c76a111e447fa8cae464c504fcb97' })), mode === 'md' && hAsync("ion-ripple-effect", null)), hAsync("div", { key: 'adca0f1e0efcf18b575013d4fb2f22814c81c147', part: "indicator", class: {
+            } }, hAsync("button", Object.assign({ key: '86686e25d3bb8f487869a4d34c1e99a5d04105ec', "aria-selected": checked ? 'true' : 'false', role: "tab", ref: (el) => (this.nativeEl = el), type: type, class: "button-native", part: "native", disabled: disabled }, this.inheritedAttributes), hAsync("span", { key: '5c22e853fd385e2b7825335113346537ecefed31', class: "button-inner" }, hAsync("slot", { key: 'cef944331f246a820747f98dff55e844281cb822' })), mode === 'md' && hAsync("ion-ripple-effect", null)), hAsync("div", { key: '737b4b08c122a7738d5a5ed7a44f544da4c67649', part: "indicator", class: {
                 'segment-button-indicator': true,
                 'segment-button-indicator-animated': true,
-            } }, hAsync("div", { key: '8a23ffe49dc115ee0603e298bb6a39834b910b67', part: "indicator-background", class: "segment-button-indicator-background" }))));
+            } }, hAsync("div", { key: 'e78696ff315d7e8ba76b97b82ea341379e9be7e5', part: "indicator-background", class: "segment-button-indicator-background" }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -35369,7 +35445,7 @@ class SelectOption {
         this.value = undefined;
     }
     render() {
-        return hAsync(Host, { key: 'fe62f2d62ede6866e20969a2e7ae25453648fcef', role: "option", id: this.inputId, class: getIonMode$1(this) });
+        return hAsync(Host, { key: '69bd6a2dbbc0ab32cc607a74df10f3fb3d6e3295', role: "option", id: this.inputId, class: getIonMode$1(this) });
     }
     get el() { return getElement(this); }
     static get style() { return IonSelectOptionStyle0; }
@@ -35489,7 +35565,7 @@ class SelectPopover {
     render() {
         const { header, message, options, subHeader } = this;
         const hasSubHeaderOrMessage = subHeader !== undefined || message !== undefined;
-        return (hAsync(Host, { key: '9d3995131364d4f1d282e0a1fc34e778e94c9f98', class: getIonMode$1(this) }, hAsync("ion-list", { key: '14244dcd6375eb61d65f3a9450d42a5d7b2d6541' }, header !== undefined && hAsync("ion-list-header", null, header), hasSubHeaderOrMessage && (hAsync("ion-item", null, hAsync("ion-label", { class: "ion-text-wrap" }, subHeader !== undefined && hAsync("h3", null, subHeader), message !== undefined && hAsync("p", null, message)))), this.renderOptions(options))));
+        return (hAsync(Host, { key: '46e495ce7001131eb8b54073018de89401a99b81', class: getIonMode$1(this) }, hAsync("ion-list", { key: 'afdb72359c3751c6b372af1a778398463d1da397' }, header !== undefined && hAsync("ion-list-header", null, header), hasSubHeaderOrMessage && (hAsync("ion-item", null, hAsync("ion-label", { class: "ion-text-wrap" }, subHeader !== undefined && hAsync("h3", null, subHeader), message !== undefined && hAsync("p", null, message)))), this.renderOptions(options))));
     }
     get el() { return getElement(this); }
     static get style() { return {
@@ -35537,11 +35613,11 @@ class SkeletonText {
         const animated = this.animated && config.getBoolean('animated', true);
         const inMedia = hostContext('ion-avatar', this.el) || hostContext('ion-thumbnail', this.el);
         const mode = getIonMode$1(this);
-        return (hAsync(Host, { key: 'ee3cd9a5448fb69c8ddfc88a993f9968e1a381ff', class: {
+        return (hAsync(Host, { key: '2d9e785d3026faf76d0e970e3bfe33258f29046b', class: {
                 [mode]: true,
                 'skeleton-text-animated': animated,
                 'in-media': inMedia,
-            } }, hAsync("span", { key: '8aa792724a3b77877062e9aae838d9e1572b576f' }, "\u00A0")));
+            } }, hAsync("span", { key: 'd1800f5fd176a8daa216e8b889e427770bf64a05' }, "\u00A0")));
     }
     get el() { return getElement(this); }
     static get style() { return IonSkeletonTextStyle0; }
@@ -35594,7 +35670,7 @@ class Spinner {
                 svgs.push(buildLine(spinner, duration, i, spinner.lines));
             }
         }
-        return (hAsync(Host, { key: '47cd6cd98e36e5b99fbe263a6a102610cae240c3', class: createColorClasses$1(self.color, {
+        return (hAsync(Host, { key: 'cfd0e19ebf41412300d1ba80721c12b4b8d32263', class: createColorClasses$1(self.color, {
                 [mode]: true,
                 [`spinner-${spinnerName}`]: true,
                 'spinner-paused': self.paused || config.getBoolean('_testing'),
@@ -35687,12 +35763,12 @@ class SplitPane {
     }
     render() {
         const mode = getIonMode$1(this);
-        return (hAsync(Host, { key: '3efe241375d23ae12c47927aa1fc1f3f4b4e5807', class: {
+        return (hAsync(Host, { key: '220208ab603f4f307672a73c4e9e8218aa5196dc', class: {
                 [mode]: true,
                 // Used internally for styling
                 [`split-pane-${mode}`]: true,
                 'split-pane-visible': this.visible,
-            } }, hAsync("slot", { key: 'd5c94319658e2291dcc356e6ed7a9abc1a48a8b9' })));
+            } }, hAsync("slot", { key: 'bbf9321d4728265a04bb969a74ffa574206b9060' })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -35760,10 +35836,10 @@ class Tab {
     }
     render() {
         const { tab, active, component } = this;
-        return (hAsync(Host, { key: '0f4b90f0b1027e89bd447ace17af31c8e155a827', role: "tabpanel", "aria-hidden": !active ? 'true' : null, "aria-labelledby": `tab-button-${tab}`, class: {
+        return (hAsync(Host, { key: 'fa5c567bf59eb8bd46a7d2b85a560e43c43563fe', role: "tabpanel", "aria-hidden": !active ? 'true' : null, "aria-labelledby": `tab-button-${tab}`, class: {
                 'ion-page': component === undefined,
                 'tab-hidden': !active,
-            } }, hAsync("slot", { key: 'ec3eaacf8b7085510e89273aa8373805ee98a381' })));
+            } }, hAsync("slot", { key: '133871ad0bafa16539dfec4a6bd640367c998039' })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -35841,11 +35917,11 @@ class TabBar {
         const { color, translucent, keyboardVisible } = this;
         const mode = getIonMode$1(this);
         const shouldHide = keyboardVisible && this.el.getAttribute('slot') !== 'top';
-        return (hAsync(Host, { key: 'e2b4b50270f171ed251359df6c65c5e7e4d526a4', role: "tablist", "aria-hidden": shouldHide ? 'true' : null, class: createColorClasses$1(color, {
+        return (hAsync(Host, { key: '51e4bdbce8c7107c1114a39618b4a9a941876bb1', role: "tablist", "aria-hidden": shouldHide ? 'true' : null, class: createColorClasses$1(color, {
                 [mode]: true,
                 'tab-bar-translucent': translucent,
                 'tab-bar-hidden': shouldHide,
-            }) }, hAsync("slot", { key: '37495b2eddd01a758ceaeb36426abc9bd20bcca3' })));
+            }) }, hAsync("slot", { key: 'c11618f97e93deb0a56f33c904481b4811c685ec' })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -35943,7 +36019,7 @@ class TabButton {
             rel,
             target,
         };
-        return (hAsync(Host, { key: '9926f9392e7910ff3159397e4f907e0d7d2cf5a0', onClick: this.onClick, onKeyup: this.onKeyUp, id: tab !== undefined ? `tab-button-${tab}` : null, class: {
+        return (hAsync(Host, { key: '32ec1fb183523dadaaed6689add4a042d0fdd69a', onClick: this.onClick, onKeyup: this.onKeyUp, id: tab !== undefined ? `tab-button-${tab}` : null, class: {
                 [mode]: true,
                 'tab-selected': selected,
                 'tab-disabled': disabled,
@@ -35955,7 +36031,7 @@ class TabButton {
                 'ion-activatable': true,
                 'ion-selectable': true,
                 'ion-focusable': true,
-            } }, hAsync("a", Object.assign({ key: '4b3ace749583a5502e94462f9a70c5158fe0194a' }, attrs, { class: "button-native", part: "native", role: "tab", "aria-selected": selected ? 'true' : null, "aria-disabled": disabled ? 'true' : null, tabindex: disabled ? '-1' : undefined }, inheritedAttributes), hAsync("span", { key: 'a2a30c02fbd5052da12586a5ab00a45f3bf53b88', class: "button-inner" }, hAsync("slot", { key: '3fb22ffbb09000d99537b531220c029330ae6940' })), mode === 'md' && hAsync("ion-ripple-effect", { type: "unbounded" }))));
+            } }, hAsync("a", Object.assign({ key: '9e56304c52e30ae3a3dca434fa0b41eccc873faa' }, attrs, { class: "button-native", part: "native", role: "tab", "aria-selected": selected ? 'true' : null, "aria-disabled": disabled ? 'true' : null, tabindex: disabled ? '-1' : undefined }, inheritedAttributes), hAsync("span", { key: '34eae18c23584742a25d20b4038aa1742d9ab0d8', class: "button-inner" }, hAsync("slot", { key: '4bc9629861f5ce3f1ef87ac77bc027ba0dea694c' })), mode === 'md' && hAsync("ion-ripple-effect", { type: "unbounded" }))));
     }
     get el() { return getElement(this); }
     static get style() { return {
@@ -36121,7 +36197,7 @@ class Tabs {
         return Array.from(this.el.querySelectorAll('ion-tab'));
     }
     render() {
-        return (hAsync(Host, { key: '9044f05f4716fd9c158864175290dfb044e63539', onIonTabButtonClick: this.onTabClicked }, hAsync("slot", { key: '178492f52f15a042e47531007a3564a935847818', name: "top" }), hAsync("div", { key: 'b3affaaeb7752194acde36d9de74dbe2b3280cd1', class: "tabs-inner" }, hAsync("slot", { key: '98f0f4e2903f1a6cec041e06b75073c57960a912' })), hAsync("slot", { key: '0899482561bdaf35e97e5a40860c40978daca03a', name: "bottom" })));
+        return (hAsync(Host, { key: '5c76b077d508b1379a985503618dade63a9db514', onIonTabButtonClick: this.onTabClicked }, hAsync("slot", { key: '357ba85e01de10d3c0e52adcb1977bbc0dbbf587', name: "top" }), hAsync("div", { key: 'c8c59aac4e1394a1a7505f201cbf609b9b0c6ea9', class: "tabs-inner" }, hAsync("slot", { key: '00951068088580ab408f9c24ede39144b212b0d6' })), hAsync("slot", { key: 'a1118402fbd5995b07f7676f216b2efbc6052f12', name: "bottom" })));
     }
     get el() { return getElement(this); }
     static get style() { return IonTabsStyle0; }
@@ -36163,9 +36239,9 @@ class Text {
     }
     render() {
         const mode = getIonMode$1(this);
-        return (hAsync(Host, { key: '8922ebdd7486c9cb9f9b547a49e5be2261df4ba1', class: createColorClasses$1(this.color, {
+        return (hAsync(Host, { key: '66ed5ea3af47d2a4bdaee79914a2f5ae2cb54a9d', class: createColorClasses$1(this.color, {
                 [mode]: true,
-            }) }, hAsync("slot", { key: '164cbd0f81a00adfac04f544524e905f721c121c' })));
+            }) }, hAsync("slot", { key: '61239138ae5e25c2cceb839f70c50069fc42338e' })));
     }
     static get style() { return IonTextStyle0; }
     static get cmpMeta() { return {
@@ -36664,7 +36740,7 @@ class Thumbnail {
         registerInstance(this, hostRef);
     }
     render() {
-        return (hAsync(Host, { key: '2b3d5139161f4b9075dce537c14b4087986b37c4', class: getIonMode$1(this) }, hAsync("slot", { key: '3c4838c43e1230f9413a3cb66584417fd11382b2' })));
+        return (hAsync(Host, { key: 'a12bfff6f372b19f6890a81f93ca6137701ee360', class: getIonMode$1(this) }, hAsync("slot", { key: 'f546320896fee05677cc30f13aa7fa7c0360d69d' })));
     }
     static get style() { return IonThumbnailStyle0; }
     static get cmpMeta() { return {
@@ -37497,9 +37573,9 @@ class Toast {
         if (layout === 'stacked' && startButtons.length > 0 && endButtons.length > 0) {
             printIonWarning('This toast is using start and end buttons with the stacked toast layout. We recommend following the best practice of using either start or end buttons with the stacked toast layout.', el);
         }
-        return (hAsync(Host, Object.assign({ key: 'c8d7e7d2baa01d3ed5d65a845bc61acf087c0b18', tabindex: "-1" }, this.htmlAttributes, { style: {
+        return (hAsync(Host, Object.assign({ key: 'f01e1dd2f7cc0680a24f6aa4ee3f677f86d255f4', tabindex: "-1" }, this.htmlAttributes, { style: {
                 zIndex: `${60000 + this.overlayIndex}`,
-            }, class: createColorClasses$1(this.color, Object.assign(Object.assign({ [mode]: true }, getClassMap(this.cssClass)), { 'overlay-hidden': true, 'toast-translucent': this.translucent })), onIonToastWillDismiss: this.dispatchCancelHandler }), hAsync("div", { key: '27c0feeb89c4efb47c42623a4b036ed84338ed10', class: wrapperClass }, hAsync("div", { key: '41d5a3069f92e4a6acef2793fa4e236cdbdaae88', class: "toast-container", part: "container" }, this.renderButtons(startButtons, 'start'), this.icon !== undefined && (hAsync("ion-icon", { class: "toast-icon", part: "icon", icon: this.icon, lazy: false, "aria-hidden": "true" })), hAsync("div", { key: '176f497bc990ef2ecc14c7fa90dd3a54a912030a', class: "toast-content", role: "status", "aria-atomic": "true", "aria-live": "polite" }, !revealContentToScreenReader && header !== undefined && this.renderHeader('oldHeader', 'true'), !revealContentToScreenReader && message !== undefined && this.renderToastMessage('oldMessage', 'true'), revealContentToScreenReader && header !== undefined && this.renderHeader('header'), revealContentToScreenReader && message !== undefined && this.renderToastMessage('header')), this.renderButtons(endButtons, 'end')))));
+            }, class: createColorClasses$1(this.color, Object.assign(Object.assign({ [mode]: true }, getClassMap(this.cssClass)), { 'overlay-hidden': true, 'toast-translucent': this.translucent })), onIonToastWillDismiss: this.dispatchCancelHandler }), hAsync("div", { key: '603468c5e6abfb284df3fcdfa33c4f45d899fb2a', class: wrapperClass }, hAsync("div", { key: '0eebff71a0caf3bece4d042199cbf9226251a1a0', class: "toast-container", part: "container" }, this.renderButtons(startButtons, 'start'), this.icon !== undefined && (hAsync("ion-icon", { class: "toast-icon", part: "icon", icon: this.icon, lazy: false, "aria-hidden": "true" })), hAsync("div", { key: 'a84a9b0c0b719f588aa1ace4ef822bb105578c29', class: "toast-content", role: "status", "aria-atomic": "true", "aria-live": "polite" }, !revealContentToScreenReader && header !== undefined && this.renderHeader('oldHeader', 'true'), !revealContentToScreenReader && message !== undefined && this.renderToastMessage('oldMessage', 'true'), revealContentToScreenReader && header !== undefined && this.renderHeader('header'), revealContentToScreenReader && message !== undefined && this.renderToastMessage('header')), this.renderButtons(endButtons, 'end')))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -37885,10 +37961,10 @@ class Toolbar {
         this.childrenStyles.forEach((value) => {
             Object.assign(childStyles, value);
         });
-        return (hAsync(Host, { key: 'afac0f08f3981483c072984ce047df5dc9cc1e99', class: Object.assign(Object.assign({}, childStyles), createColorClasses$1(this.color, {
+        return (hAsync(Host, { key: 'fdd8621b4f69ce650b5aaf4fb6bffde29aa5ad65', class: Object.assign(Object.assign({}, childStyles), createColorClasses$1(this.color, {
                 [mode]: true,
                 'in-toolbar': hostContext('ion-toolbar', this.el),
-            })) }, hAsync("div", { key: '30d4f1d0ec01cc646398301b5f7d469391eb35d2', class: "toolbar-background" }), hAsync("div", { key: '175d1f283e670b57a9bf8fd2a8c5e7d0da749aa8', class: "toolbar-container" }, hAsync("slot", { key: '4853b18092737b32b5995457536fa5a7fc2816ef', name: "start" }), hAsync("slot", { key: '6eb4921200aad02d7977d134edad6cff2aad91ad', name: "secondary" }), hAsync("div", { key: '024e0339c74c4b9a886d49e96723243719643dc2', class: "toolbar-content" }, hAsync("slot", { key: 'b6452c84692fedd6efe33ac67907d01253b76f8f' })), hAsync("slot", { key: '636e56eeaa318ce45a9c3854a30b8eb2819a33e0', name: "primary" }), hAsync("slot", { key: 'a45c19b93dca3719d75bd4d99acc49de87137a7d', name: "end" }))));
+            })) }, hAsync("div", { key: 'c6ad5434546e2046a83574ea92a03a3f77d0a9e3', class: "toolbar-background" }), hAsync("div", { key: '3b79dd20c3e8252cacfd46a82428df9ba0b8b86e', class: "toolbar-container" }, hAsync("slot", { key: '514259a8b76db9f3a587a7667b5e37fd8ade9481', name: "start" }), hAsync("slot", { key: 'd9ab68f0626f4ac8b83d21663eb67a47b76d809b', name: "secondary" }), hAsync("div", { key: '2c21da88b67a7d7eef280e517bda9982264c7be4', class: "toolbar-content" }, hAsync("slot", { key: 'ac2b7c8f20c5ac755df9032809c73eab9e767e36' })), hAsync("slot", { key: '2ddd3b7e3803f2d56c32743dcfc114ddcb8684a2', name: "primary" }), hAsync("slot", { key: '27483847d4333b4492506da33185c9ba1aa824a7', name: "end" }))));
     }
     get el() { return getElement(this); }
     static get style() { return {
@@ -37938,11 +38014,11 @@ class ToolbarTitle {
     render() {
         const mode = getIonMode$1(this);
         const size = this.getSize();
-        return (hAsync(Host, { key: 'b68a272a33ec81d282629a569676f64d3215a0c7', class: createColorClasses$1(this.color, {
+        return (hAsync(Host, { key: '2642d433ba678b67503b7f1e9d0ae0390250bec8', class: createColorClasses$1(this.color, {
                 [mode]: true,
                 [`title-${size}`]: true,
                 'title-rtl': document.dir === 'rtl',
-            }) }, hAsync("div", { key: '9069816a14e6e358695c5bd465787cf297c761bc', class: "toolbar-title" }, hAsync("slot", { key: '8894bd04f2292b54050ee864abb5396deadf9874' }))));
+            }) }, hAsync("div", { key: '355184542e26b53296f7143d099cfebc3de7b569', class: "toolbar-title" }, hAsync("slot", { key: 'aed07a34c22e4b1f34cdf40fea35481674d8941f' }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {