From 7cdbc1b5ad004e17a7c51363653e0e67f50e6860 Mon Sep 17 00:00:00 2001
From: Shawn Taylor <shawn@ionic.io>
Date: Thu, 22 Feb 2024 12:45:47 -0500
Subject: [PATCH 1/8] feat(datetime): formatOptions property for Datetime
 (#29065)

Issue number: Internal

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->
The Datetime header, Datetime time button, and Datetime Button have
default date formatting that cannot be set by the developer.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- The developer can customize the date and time formatting for the
Datetime header and time button
- The developer can customize the date and time formatting for the
Datetime Button
- A warning will appear in the console if they try to provide a time
zone (the time zone will not get used)
- A warning will be logged if they do not include the date or time
object for formatOptions as needed for the presentation of the Datetime

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!--
  If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
  2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#footer
for more information.
-->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

These changes have been reviewed in #29009 and #29059. This PR just adds
them to the feature branch now that the separate tickets are complete.

---------

Co-authored-by: ionitron <hi@ionicframework.com>
Co-authored-by: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
---
 core/api.txt                                  |   1 +
 core/src/components.d.ts                      |  12 +-
 .../datetime-button/datetime-button.tsx       |  30 +++--
 .../test/basic/datetime-button.e2e.ts         |  83 ++++++++++++++
 .../datetime-button/test/basic/index.html     |  33 ++++++
 .../components/datetime/datetime-interface.ts |  13 +++
 core/src/components/datetime/datetime.tsx     |  43 +++++++-
 .../datetime/test/basic/datetime.e2e.ts       | 104 ++++++++++++++++++
 .../components/datetime/test/basic/index.html |  13 +++
 .../components/datetime/test/format.spec.ts   |  96 ++++++++++++----
 core/src/components/datetime/utils/format.ts  |  61 +++++-----
 .../src/components/datetime/utils/validate.ts |  54 +++++++++
 packages/angular/src/directives/proxies.ts    |   4 +-
 packages/vue/src/proxies.ts                   |   1 +
 14 files changed, 478 insertions(+), 70 deletions(-)
 create mode 100644 core/src/components/datetime/utils/validate.ts

diff --git a/core/api.txt b/core/api.txt
index fa3825d290..acdcb8d0fa 100644
--- a/core/api.txt
+++ b/core/api.txt
@@ -394,6 +394,7 @@ ion-datetime,prop,dayValues,number | number[] | string | undefined,undefined,fal
 ion-datetime,prop,disabled,boolean,false,false,false
 ion-datetime,prop,doneText,string,'Done',false,false
 ion-datetime,prop,firstDayOfWeek,number,0,false,false
+ion-datetime,prop,formatOptions,undefined | { date: DateTimeFormatOptions; time?: DateTimeFormatOptions | undefined; } | { date?: DateTimeFormatOptions | undefined; time: DateTimeFormatOptions; },undefined,false,false
 ion-datetime,prop,highlightedDates,((dateIsoString: string) => DatetimeHighlightStyle | undefined) | DatetimeHighlight[] | undefined,undefined,false,false
 ion-datetime,prop,hourCycle,"h11" | "h12" | "h23" | "h24" | undefined,undefined,false,false
 ion-datetime,prop,hourValues,number | number[] | string | undefined,undefined,false,false
diff --git a/core/src/components.d.ts b/core/src/components.d.ts
index a706eb8971..ab938b5bc1 100644
--- a/core/src/components.d.ts
+++ b/core/src/components.d.ts
@@ -15,7 +15,7 @@ import { RouteID, RouterDirection, RouterEventDetail, RouteWrite } from "./compo
 import { BreadcrumbCollapsedClickEventDetail } from "./components/breadcrumb/breadcrumb-interface";
 import { CheckboxChangeEventDetail } from "./components/checkbox/checkbox-interface";
 import { ScrollBaseDetail, ScrollDetail } from "./components/content/content-interface";
-import { DatetimeChangeEventDetail, DatetimeHighlight, DatetimeHighlightCallback, DatetimeHourCycle, DatetimePresentation, TitleSelectedDatesFormatter } from "./components/datetime/datetime-interface";
+import { DatetimeChangeEventDetail, DatetimeHighlight, DatetimeHighlightCallback, DatetimeHourCycle, DatetimePresentation, FormatOptions, TitleSelectedDatesFormatter } from "./components/datetime/datetime-interface";
 import { SpinnerTypes } from "./components/spinner/spinner-configs";
 import { InputChangeEventDetail, InputInputEventDetail } from "./components/input/input-interface";
 import { CounterFormatter } from "./components/item/item-interface";
@@ -51,7 +51,7 @@ export { RouteID, RouterDirection, RouterEventDetail, RouteWrite } from "./compo
 export { BreadcrumbCollapsedClickEventDetail } from "./components/breadcrumb/breadcrumb-interface";
 export { CheckboxChangeEventDetail } from "./components/checkbox/checkbox-interface";
 export { ScrollBaseDetail, ScrollDetail } from "./components/content/content-interface";
-export { DatetimeChangeEventDetail, DatetimeHighlight, DatetimeHighlightCallback, DatetimeHourCycle, DatetimePresentation, TitleSelectedDatesFormatter } from "./components/datetime/datetime-interface";
+export { DatetimeChangeEventDetail, DatetimeHighlight, DatetimeHighlightCallback, DatetimeHourCycle, DatetimePresentation, FormatOptions, TitleSelectedDatesFormatter } from "./components/datetime/datetime-interface";
 export { SpinnerTypes } from "./components/spinner/spinner-configs";
 export { InputChangeEventDetail, InputInputEventDetail } from "./components/input/input-interface";
 export { CounterFormatter } from "./components/item/item-interface";
@@ -858,6 +858,10 @@ export namespace Components {
           * The first day of the week to use for `ion-datetime`. The default value is `0` and represents Sunday.
          */
         "firstDayOfWeek": number;
+        /**
+          * Formatting options for dates and times. Should include a 'date' and/or 'time' object, each of which is of type [Intl.DateTimeFormatOptions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat#options).
+         */
+        "formatOptions"?: FormatOptions;
         /**
           * Used to apply custom text and background colors to specific dates.  Can be either an array of objects containing ISO strings and colors, or a callback that receives an ISO string and returns the colors.  Only applies to the `date`, `date-time`, and `time-date` presentations, with `preferWheel="false"`.
          */
@@ -5541,6 +5545,10 @@ declare namespace LocalJSX {
           * The first day of the week to use for `ion-datetime`. The default value is `0` and represents Sunday.
          */
         "firstDayOfWeek"?: number;
+        /**
+          * Formatting options for dates and times. Should include a 'date' and/or 'time' object, each of which is of type [Intl.DateTimeFormatOptions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat#options).
+         */
+        "formatOptions"?: FormatOptions;
         /**
           * Used to apply custom text and background colors to specific dates.  Can be either an array of objects containing ISO strings and colors, or a callback that receives an ISO string and returns the colors.  Only applies to the `date`, `date-time`, and `time-date` presentations, with `preferWheel="false"`.
          */
diff --git a/core/src/components/datetime-button/datetime-button.tsx b/core/src/components/datetime-button/datetime-button.tsx
index 7ce3ca4163..519fb42da6 100644
--- a/core/src/components/datetime-button/datetime-button.tsx
+++ b/core/src/components/datetime-button/datetime-button.tsx
@@ -8,7 +8,7 @@ import { getIonMode } from '../../global/ionic-global';
 import type { Color } from '../../interface';
 import type { DatetimePresentation } from '../datetime/datetime-interface';
 import { getToday } from '../datetime/utils/data';
-import { getMonthAndYear, getMonthDayAndYear, getLocalizedDateTime, getLocalizedTime } from '../datetime/utils/format';
+import { getLocalizedDateTime, getLocalizedTime } from '../datetime/utils/format';
 import { getHourCycle } from '../datetime/utils/helpers';
 import { parseDate } from '../datetime/utils/parse';
 /**
@@ -196,7 +196,7 @@ export class DatetimeButton implements ComponentInterface {
       return;
     }
 
-    const { value, locale, hourCycle, preferWheel, multiple, titleSelectedDatesFormatter } = datetimeEl;
+    const { value, locale, formatOptions, hourCycle, preferWheel, multiple, titleSelectedDatesFormatter } = datetimeEl;
 
     const parsedValues = this.getParsedDateValues(value);
 
@@ -225,8 +225,12 @@ export class DatetimeButton implements ComponentInterface {
     switch (datetimePresentation) {
       case 'date-time':
       case 'time-date':
-        const dateText = getMonthDayAndYear(locale, firstParsedDatetime);
-        const timeText = getLocalizedTime(locale, firstParsedDatetime, computedHourCycle);
+        const dateText = getLocalizedDateTime(
+          locale,
+          firstParsedDatetime,
+          formatOptions?.date ?? { month: 'short', day: 'numeric', year: 'numeric' }
+        );
+        const timeText = getLocalizedTime(locale, firstParsedDatetime, computedHourCycle, formatOptions?.time);
         if (preferWheel) {
           this.dateText = `${dateText} ${timeText}`;
         } else {
@@ -246,20 +250,28 @@ export class DatetimeButton implements ComponentInterface {
           }
           this.dateText = headerText;
         } else {
-          this.dateText = getMonthDayAndYear(locale, firstParsedDatetime);
+          this.dateText = getLocalizedDateTime(
+            locale,
+            firstParsedDatetime,
+            formatOptions?.date ?? { month: 'short', day: 'numeric', year: 'numeric' }
+          );
         }
         break;
       case 'time':
-        this.timeText = getLocalizedTime(locale, firstParsedDatetime, computedHourCycle);
+        this.timeText = getLocalizedTime(locale, firstParsedDatetime, computedHourCycle, formatOptions?.time);
         break;
       case 'month-year':
-        this.dateText = getMonthAndYear(locale, firstParsedDatetime);
+        this.dateText = getLocalizedDateTime(
+          locale,
+          firstParsedDatetime,
+          formatOptions?.date ?? { month: 'long', year: 'numeric' }
+        );
         break;
       case 'month':
-        this.dateText = getLocalizedDateTime(locale, firstParsedDatetime, { month: 'long' });
+        this.dateText = getLocalizedDateTime(locale, firstParsedDatetime, formatOptions?.time ?? { month: 'long' });
         break;
       case 'year':
-        this.dateText = getLocalizedDateTime(locale, firstParsedDatetime, { year: 'numeric' });
+        this.dateText = getLocalizedDateTime(locale, firstParsedDatetime, formatOptions?.time ?? { year: 'numeric' });
         break;
     }
   };
diff --git a/core/src/components/datetime-button/test/basic/datetime-button.e2e.ts b/core/src/components/datetime-button/test/basic/datetime-button.e2e.ts
index 938ce976e5..7024527de2 100644
--- a/core/src/components/datetime-button/test/basic/datetime-button.e2e.ts
+++ b/core/src/components/datetime-button/test/basic/datetime-button.e2e.ts
@@ -244,4 +244,87 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
       await expect(page.locator('#time-button')).not.toBeVisible();
     });
   });
+
+  test.describe(title('datetime-button: formatOptions'), () => {
+    test('should include date and time for presentation date-time', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-datetime-button datetime="datetime"></ion-datetime-button>
+        <ion-datetime id="datetime" presentation="date-time" value="2023-11-02T01:22:00" locale="en-US"></ion-datetime>
+        <script>
+          const datetime = document.querySelector('ion-datetime');
+          datetime.formatOptions = {
+            date: {
+              weekday: "short",
+              month: "long",
+              day: "2-digit"
+            },
+            time: {
+              hour: "2-digit",
+              minute: "2-digit"
+            }
+          }
+        </script>
+      `,
+        config
+      );
+
+      await page.locator('.datetime-ready').waitFor();
+
+      await expect(page.locator('#date-button')).toContainText('Thu, November 02');
+      await expect(page.locator('#time-button')).toContainText('01:22 AM');
+    });
+
+    test('should include date for presentation date', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-datetime-button datetime="datetime"></ion-datetime-button>
+        <ion-datetime id="datetime" presentation="date" value="2023-11-02" locale="en-US"></ion-datetime>
+        <script>
+          const datetime = document.querySelector('ion-datetime');
+          datetime.formatOptions = {
+            date: {
+              weekday: "short",
+              month: "long",
+              day: "2-digit"
+            }
+          }
+        </script>
+      `,
+        config
+      );
+
+      await page.locator('.datetime-ready').waitFor();
+
+      await expect(page.locator('#date-button')).toContainText('Thu, November 02');
+    });
+
+    test('should include date and time in same button for preferWheel', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-datetime-button datetime="datetime"></ion-datetime-button>
+        <ion-datetime id="datetime" presentation="date-time" value="2023-11-02T01:22:00" locale="en-US" prefer-wheel="true"></ion-datetime>
+        <script>
+        const datetime = document.querySelector('ion-datetime');
+        datetime.formatOptions = {
+          date: {
+            weekday: "short",
+            month: "long",
+            day: "2-digit"
+          },
+          time: {
+            hour: "2-digit",
+            minute: "2-digit"
+          }
+        }
+        </script>
+      `,
+        config
+      );
+
+      await page.locator('.datetime-ready').waitFor();
+
+      await expect(page.locator('ion-datetime-button')).toContainText('Thu, November 02 01:22 AM');
+    });
+  });
 });
diff --git a/core/src/components/datetime-button/test/basic/index.html b/core/src/components/datetime-button/test/basic/index.html
index c446544a0a..dd269d984e 100644
--- a/core/src/components/datetime-button/test/basic/index.html
+++ b/core/src/components/datetime-button/test/basic/index.html
@@ -215,8 +215,41 @@
               ></ion-datetime>
             </ion-popover>
           </div>
+
+          <div class="grid-item">
+            <h2>formatOptions</h2>
+
+            <ion-item>
+              <ion-label>Start Date</ion-label>
+              <ion-datetime-button datetime="format-options" slot="end"></ion-datetime-button>
+            </ion-item>
+
+            <ion-popover arrow="false">
+              <ion-datetime
+                id="format-options"
+                presentation="date-time"
+                value="2023-11-02T01:22:00"
+                locale="en-US"
+              ></ion-datetime>
+            </ion-popover>
+          </div>
         </div>
       </ion-content>
     </ion-app>
   </body>
+
+  <script>
+    const formatOptionsDatetime = document.querySelector('#format-options');
+    formatOptionsDatetime.formatOptions = {
+      date: {
+        weekday: 'short',
+        month: 'long',
+        day: '2-digit',
+      },
+      time: {
+        hour: '2-digit',
+        minute: '2-digit',
+      },
+    };
+  </script>
 </html>
diff --git a/core/src/components/datetime/datetime-interface.ts b/core/src/components/datetime/datetime-interface.ts
index 255f39e22d..475a672d06 100644
--- a/core/src/components/datetime/datetime-interface.ts
+++ b/core/src/components/datetime/datetime-interface.ts
@@ -36,3 +36,16 @@ export type DatetimeHighlight = { date: string } & DatetimeHighlightStyle;
 export type DatetimeHighlightCallback = (dateIsoString: string) => DatetimeHighlightStyle | undefined;
 
 export type DatetimeHourCycle = 'h11' | 'h12' | 'h23' | 'h24';
+
+/**
+ * FormatOptions must include date and/or time; it cannot be an empty object
+ */
+export type FormatOptions =
+  | {
+      date: Intl.DateTimeFormatOptions;
+      time?: Intl.DateTimeFormatOptions;
+    }
+  | {
+      date?: Intl.DateTimeFormatOptions;
+      time: Intl.DateTimeFormatOptions;
+    };
diff --git a/core/src/components/datetime/datetime.tsx b/core/src/components/datetime/datetime.tsx
index 57f275e25f..f6a827d8e5 100644
--- a/core/src/components/datetime/datetime.tsx
+++ b/core/src/components/datetime/datetime.tsx
@@ -20,6 +20,7 @@ import type {
   DatetimeHighlightStyle,
   DatetimeHighlightCallback,
   DatetimeHourCycle,
+  FormatOptions,
 } from './datetime-interface';
 import { isSameDay, warnIfValueOutOfBounds, isBefore, isAfter } from './utils/comparison';
 import {
@@ -33,7 +34,7 @@ import {
   getTimeColumnsData,
   getCombinedDateColumnData,
 } from './utils/data';
-import { formatValue, getLocalizedTime, getMonthAndDay, getMonthAndYear } from './utils/format';
+import { formatValue, getLocalizedDateTime, getLocalizedTime, getMonthAndYear } from './utils/format';
 import { isLocaleDayPeriodRTL, isMonthFirstLocale, getNumDaysInMonth, getHourCycle } from './utils/helpers';
 import {
   calculateHourFromAMPM,
@@ -68,6 +69,7 @@ import {
   isNextMonthDisabled,
   isPrevMonthDisabled,
 } from './utils/state';
+import { checkForPresentationFormatMismatch, warnIfTimeZoneProvided } from './utils/validate';
 
 /**
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
@@ -171,6 +173,20 @@ export class Datetime implements ComponentInterface {
    */
   @Prop() disabled = false;
 
+  /**
+   * Formatting options for dates and times.
+   * Should include a 'date' and/or 'time' object, each of which is of type [Intl.DateTimeFormatOptions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat#options).
+   *
+   */
+  @Prop() formatOptions?: FormatOptions;
+
+  @Watch('formatOptions')
+  protected formatOptionsChanged() {
+    const { el, formatOptions, presentation } = this;
+    checkForPresentationFormatMismatch(el, presentation, formatOptions);
+    warnIfTimeZoneProvided(el, formatOptions);
+  }
+
   /**
    * If `true`, the datetime appears normal but the selected date cannot be changed.
    */
@@ -235,6 +251,12 @@ export class Datetime implements ComponentInterface {
    */
   @Prop() presentation: DatetimePresentation = 'date-time';
 
+  @Watch('presentation')
+  protected presentationChanged() {
+    const { el, formatOptions, presentation } = this;
+    checkForPresentationFormatMismatch(el, presentation, formatOptions);
+  }
+
   private get isGridStyle() {
     const { presentation, preferWheel } = this;
     const hasDatePresentation = presentation === 'date' || presentation === 'date-time' || presentation === 'time-date';
@@ -1357,7 +1379,7 @@ export class Datetime implements ComponentInterface {
   };
 
   componentWillLoad() {
-    const { el, highlightedDates, multiple, presentation, preferWheel } = this;
+    const { el, formatOptions, highlightedDates, multiple, presentation, preferWheel } = this;
 
     if (multiple) {
       if (presentation !== 'date') {
@@ -1382,6 +1404,11 @@ export class Datetime implements ComponentInterface {
       }
     }
 
+    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));
@@ -2354,7 +2381,7 @@ export class Datetime implements ComponentInterface {
   }
 
   private renderTimeOverlay() {
-    const { disabled, hourCycle, isTimePopoverOpen, locale } = this;
+    const { disabled, hourCycle, isTimePopoverOpen, locale, formatOptions } = this;
     const computedHourCycle = getHourCycle(locale, hourCycle);
     const activePart = this.getActivePartsWithFallback();
 
@@ -2389,7 +2416,7 @@ export class Datetime implements ComponentInterface {
           }
         }}
       >
-        {getLocalizedTime(locale, activePart, computedHourCycle)}
+        {getLocalizedTime(locale, activePart, computedHourCycle, formatOptions?.time)}
       </button>,
       <ion-popover
         alignment="center"
@@ -2424,7 +2451,7 @@ export class Datetime implements ComponentInterface {
   }
 
   private getHeaderSelectedDateText() {
-    const { activeParts, multiple, titleSelectedDatesFormatter } = this;
+    const { activeParts, formatOptions, multiple, titleSelectedDatesFormatter } = this;
     const isArray = Array.isArray(activeParts);
 
     let headerText: string;
@@ -2439,7 +2466,11 @@ export class Datetime implements ComponentInterface {
       }
     } 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(),
+        formatOptions?.date ?? { weekday: 'short', month: 'short', day: 'numeric' }
+      );
     }
 
     return headerText;
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts b/core/src/components/datetime/test/basic/datetime.e2e.ts
index 48b0b0ceec..32b4ee4e7e 100644
--- a/core/src/components/datetime/test/basic/datetime.e2e.ts
+++ b/core/src/components/datetime/test/basic/datetime.e2e.ts
@@ -565,3 +565,107 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
     });
   });
 });
+
+/**
+ * This behavior does not differ across
+ * directions.
+ */
+configs({ directions: ['ltr'] }).forEach(({ title, config }) => {
+  test.describe(title('datetime: formatOptions'), () => {
+    test('should format header and time button', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-datetime value="2022-02-01T16:30:00">
+          <span slot="title">Select Date</span>
+        </ion-datetime>
+        <script>
+          const datetime = document.querySelector('ion-datetime');
+          datetime.formatOptions = {
+            time: { hour: '2-digit', minute: '2-digit' },
+            date: { day: '2-digit', month: 'long', era: 'short' },
+          }
+        </script>
+      `,
+        config
+      );
+
+      await page.locator('.datetime-ready').waitFor();
+
+      const headerDate = page.locator('ion-datetime .datetime-selected-date');
+      await expect(headerDate).toHaveText('February 01 AD');
+
+      const timeBody = page.locator('ion-datetime .time-body');
+      await expect(timeBody).toHaveText('04:30 PM');
+    });
+  });
+});
+
+/**
+ * This behavior does not differ across
+ * modes/directions.
+ */
+configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
+  test.describe(title('datetime: formatOptions misconfiguration errors'), () => {
+    test('should log a warning if time zone is provided', async ({ page }) => {
+      const logs: string[] = [];
+
+      page.on('console', (msg) => {
+        if (msg.type() === 'warning') {
+          logs.push(msg.text());
+        }
+      });
+
+      await page.setContent(
+        `
+        <ion-datetime value="2022-02-01T16:30:00" presentation="date">
+          <span slot="title">Select Date</span>
+        </ion-datetime>
+        <script>
+          const datetime = document.querySelector('ion-datetime');
+          datetime.formatOptions = {
+            date: { timeZone: 'UTC' },
+          }
+        </script>
+      `,
+        config
+      );
+
+      await page.locator('.datetime-ready').waitFor();
+
+      expect(logs.length).toBe(1);
+      expect(logs[0]).toContain(
+        '[Ionic Warning]: Datetime: "timeZone" and "timeZoneName" are not supported in "formatOptions".'
+      );
+    });
+
+    test('should log a warning if the required formatOptions are not provided for a presentation', async ({ page }) => {
+      const logs: string[] = [];
+
+      page.on('console', (msg) => {
+        if (msg.type() === 'warning') {
+          logs.push(msg.text());
+        }
+      });
+
+      await page.setContent(
+        `
+        <ion-datetime value="2022-02-01T16:30:00">
+          <span slot="title">Select Date</span>
+        </ion-datetime>
+        <script>
+          const datetime = document.querySelector('ion-datetime');
+          datetime.formatOptions = {}
+        </script>
+      `,
+        config
+      );
+
+      await page.locator('.datetime-ready').waitFor();
+
+      expect(logs.length).toBe(1);
+      expect(logs[0]).toContain(
+        "[Ionic Warning]: Datetime: The 'date-time' presentation requires either a date or time object (or both) in formatOptions."
+      );
+    });
+  });
+});
diff --git a/core/src/components/datetime/test/basic/index.html b/core/src/components/datetime/test/basic/index.html
index 2023b4a119..b3afa76688 100644
--- a/core/src/components/datetime/test/basic/index.html
+++ b/core/src/components/datetime/test/basic/index.html
@@ -308,6 +308,13 @@
               </ion-datetime>
             </ion-modal>
           </div>
+
+          <div class="grid-item">
+            <h2>formatOptions</h2>
+            <ion-datetime value="2020-03-14T14:23:00.000Z" id="format-options-datetime">
+              <span slot="title">Select Date</span>
+            </ion-datetime>
+          </div>
         </div>
       </ion-content>
       <script>
@@ -403,6 +410,12 @@
           app.appendChild(modalElement);
           return modalElement;
         };
+
+        const formatOptions = document.querySelector('#format-options-datetime');
+        formatOptions.formatOptions = {
+          time: { hour: '2-digit', minute: '2-digit' },
+          date: { day: '2-digit', month: 'long', era: 'short' },
+        };
       </script>
     </ion-app>
   </body>
diff --git a/core/src/components/datetime/test/format.spec.ts b/core/src/components/datetime/test/format.spec.ts
index 5ff218167d..7161a1aeae 100644
--- a/core/src/components/datetime/test/format.spec.ts
+++ b/core/src/components/datetime/test/format.spec.ts
@@ -1,12 +1,12 @@
 import type { DatetimeParts } from '../datetime-interface';
 import {
   generateDayAriaLabel,
-  getMonthAndDay,
   getFormattedHour,
   addTimePadding,
   getMonthAndYear,
   getLocalizedDayPeriod,
   getLocalizedTime,
+  stripTimeZone,
 } from '../utils/format';
 
 describe('generateDayAriaLabel()', () => {
@@ -37,24 +37,6 @@ describe('generateDayAriaLabel()', () => {
   });
 });
 
-describe('getMonthAndDay()', () => {
-  it('should return Tue, May 11', () => {
-    expect(getMonthAndDay('en-US', { month: 5, day: 11, year: 2021 })).toEqual('Tue, May 11');
-  });
-
-  it('should return mar, 11 may', () => {
-    expect(getMonthAndDay('es-ES', { month: 5, day: 11, year: 2021 })).toEqual('mar, 11 may');
-  });
-
-  it('should return Sat, Apr 1', () => {
-    expect(getMonthAndDay('en-US', { month: 4, day: 1, year: 2006 })).toEqual('Sat, Apr 1');
-  });
-
-  it('should return sáb, 1 abr', () => {
-    expect(getMonthAndDay('es-ES', { month: 4, day: 1, year: 2006 })).toEqual('sáb, 1 abr');
-  });
-});
-
 describe('getFormattedHour()', () => {
   it('should only add padding if using 24 hour time', () => {
     expect(getFormattedHour(1, 'h11')).toEqual('1');
@@ -144,6 +126,7 @@ describe('getLocalizedTime', () => {
 
     expect(getLocalizedTime('en-GB', datetimeParts, 'h12')).toEqual('12:00 am');
   });
+
   it('should parse time-only values correctly', () => {
     const datetimeParts: Partial<DatetimeParts> = {
       hour: 22,
@@ -153,4 +136,79 @@ describe('getLocalizedTime', () => {
     expect(getLocalizedTime('en-US', datetimeParts as DatetimeParts, 'h12')).toEqual('10:40 PM');
     expect(getLocalizedTime('en-US', datetimeParts as DatetimeParts, 'h23')).toEqual('22:40');
   });
+
+  it('should use formatOptions', () => {
+    const datetimeParts: DatetimeParts = {
+      day: 1,
+      month: 1,
+      year: 2022,
+      hour: 9,
+      minute: 40,
+    };
+
+    const formatOptions: Intl.DateTimeFormatOptions = {
+      hour: '2-digit',
+      minute: '2-digit',
+      dayPeriod: 'short',
+      day: '2-digit',
+    };
+
+    // Even though this method is intended to be used for time, the date may be displayed as well when passing formatOptions
+    expect(getLocalizedTime('en-US', datetimeParts, 'h12', formatOptions)).toEqual('01, 09:40 in the morning');
+  });
+
+  it('should override provided time zone with UTC', () => {
+    const datetimeParts: DatetimeParts = {
+      day: 1,
+      month: 1,
+      year: 2022,
+      hour: 9,
+      minute: 40,
+    };
+
+    const formatOptions: Intl.DateTimeFormatOptions = {
+      timeZone: 'Australia/Sydney',
+      timeZoneName: 'long',
+      hour: 'numeric',
+      minute: 'numeric',
+    };
+
+    expect(getLocalizedTime('en-US', datetimeParts, 'h12', formatOptions)).toEqual('9:40 AM');
+  });
+
+  it('should not include time zone name', () => {
+    const datetimeParts: DatetimeParts = {
+      day: 1,
+      month: 1,
+      year: 2022,
+      hour: 9,
+      minute: 40,
+    };
+
+    const formatOptions: Intl.DateTimeFormatOptions = {
+      timeZone: 'America/Los_Angeles',
+      timeZoneName: 'long',
+      hour: 'numeric',
+      minute: 'numeric',
+    };
+
+    expect(getLocalizedTime('en-US', datetimeParts, 'h12', formatOptions)).toEqual('9:40 AM');
+  });
+});
+
+describe('stripTimeZone', () => {
+  it('should remove the time zone name from the options and set the time zone to UTC', () => {
+    const formatOptions: Intl.DateTimeFormatOptions = {
+      timeZone: 'America/Los_Angeles',
+      timeZoneName: 'long',
+      hour: 'numeric',
+      minute: 'numeric',
+    };
+
+    expect(stripTimeZone(formatOptions)).toEqual({
+      timeZone: 'UTC',
+      hour: 'numeric',
+      minute: 'numeric',
+    });
+  });
 });
diff --git a/core/src/components/datetime/utils/format.ts b/core/src/components/datetime/utils/format.ts
index 0f70299dc5..6443e1b546 100644
--- a/core/src/components/datetime/utils/format.ts
+++ b/core/src/components/datetime/utils/format.ts
@@ -11,7 +11,33 @@ const getFormattedDayPeriod = (dayPeriod?: string) => {
   return dayPeriod.toUpperCase();
 };
 
-export const getLocalizedTime = (locale: string, refParts: DatetimeParts, hourCycle: DatetimeHourCycle): string => {
+/**
+ * Including time zone options may lead to the rendered text showing a
+ * different time from what was selected in the Datetime, which could cause
+ * confusion.
+ */
+export const stripTimeZone = (formatOptions: Intl.DateTimeFormatOptions): Intl.DateTimeFormatOptions => {
+  return {
+    ...formatOptions,
+    /**
+     * Setting the time zone to UTC ensures that the value shown is always the
+     * same as what was selected and safeguards against older Safari bugs with
+     * Intl.DateTimeFormat.
+     */
+    timeZone: 'UTC',
+    /**
+     * We do not want to display the time zone name
+     */
+    timeZoneName: undefined,
+  };
+};
+
+export const getLocalizedTime = (
+  locale: string,
+  refParts: DatetimeParts,
+  hourCycle: DatetimeHourCycle,
+  formatOptions: Intl.DateTimeFormatOptions = { hour: 'numeric', minute: 'numeric' }
+): string => {
   const timeParts: Pick<DatetimeParts, 'hour' | 'minute'> = {
     hour: refParts.hour,
     minute: refParts.minute,
@@ -22,15 +48,7 @@ export const getLocalizedTime = (locale: string, refParts: DatetimeParts, hourCy
   }
 
   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',
+    ...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
@@ -146,17 +164,6 @@ export const generateDayAriaLabel = (locale: string, today: boolean, refParts: D
   return today ? `Today, ${labelString}` : labelString;
 };
 
-/**
- * Gets the day of the week, month, and day
- * Used for the header in MD mode.
- */
-export const getMonthAndDay = (locale: string, refParts: DatetimeParts) => {
-  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
@@ -168,16 +175,6 @@ export const getMonthAndYear = (locale: string, refParts: DatetimeParts) => {
   return new Intl.DateTimeFormat(locale, { month: 'long', year: 'numeric', timeZone: 'UTC' }).format(date);
 };
 
-/**
- * Given a locale and a date object,
- * return a formatted string that includes
- * the short month, numeric day, and full year.
- * Example: Apr 22, 2021
- */
-export const getMonthDayAndYear = (locale: string, refParts: DatetimeParts) => {
-  return getLocalizedDateTime(locale, refParts, { month: 'short', day: 'numeric', year: 'numeric' });
-};
-
 /**
  * Given a locale and a date object,
  * return a formatted string that includes
@@ -235,7 +232,7 @@ export const getLocalizedDateTime = (
   options: Intl.DateTimeFormatOptions
 ): string => {
   const date = getNormalizedDate(refParts);
-  return getDateTimeFormat(locale, options).format(date);
+  return getDateTimeFormat(locale, stripTimeZone(options)).format(date);
 };
 
 /**
diff --git a/core/src/components/datetime/utils/validate.ts b/core/src/components/datetime/utils/validate.ts
new file mode 100644
index 0000000000..46c3fe633b
--- /dev/null
+++ b/core/src/components/datetime/utils/validate.ts
@@ -0,0 +1,54 @@
+import { printIonWarning } from '@utils/logging';
+
+import type { DatetimePresentation, FormatOptions } from '../datetime-interface';
+
+/**
+ * If a time zone is provided in the format options, the rendered text could
+ * differ from what was selected in the Datetime, which could cause
+ * confusion.
+ */
+export const warnIfTimeZoneProvided = (el: HTMLElement, formatOptions?: FormatOptions) => {
+  if (
+    formatOptions?.date?.timeZone ||
+    formatOptions?.date?.timeZoneName ||
+    formatOptions?.time?.timeZone ||
+    formatOptions?.time?.timeZoneName
+  ) {
+    printIonWarning('Datetime: "timeZone" and "timeZoneName" are not supported in "formatOptions".', el);
+  }
+};
+
+export const checkForPresentationFormatMismatch = (
+  el: HTMLElement,
+  presentation: DatetimePresentation,
+  formatOptions?: 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;
+  }
+};
diff --git a/packages/angular/src/directives/proxies.ts b/packages/angular/src/directives/proxies.ts
index be168ed870..a592c55894 100644
--- a/packages/angular/src/directives/proxies.ts
+++ b/packages/angular/src/directives/proxies.ts
@@ -635,7 +635,7 @@ Set `scrollEvents` to `true` to enable.
 
 
 @ProxyCmp({
-  inputs: ['cancelText', 'clearText', 'color', 'dayValues', 'disabled', 'doneText', 'firstDayOfWeek', 'highlightedDates', 'hourCycle', 'hourValues', 'isDateEnabled', 'locale', 'max', 'min', 'minuteValues', 'mode', 'monthValues', 'multiple', 'name', 'preferWheel', 'presentation', 'readonly', 'showClearButton', 'showDefaultButtons', 'showDefaultTimeLabel', 'showDefaultTitle', 'size', 'titleSelectedDatesFormatter', 'value', 'yearValues'],
+  inputs: ['cancelText', 'clearText', 'color', 'dayValues', 'disabled', 'doneText', 'firstDayOfWeek', 'formatOptions', 'highlightedDates', 'hourCycle', 'hourValues', 'isDateEnabled', 'locale', 'max', 'min', 'minuteValues', 'mode', 'monthValues', 'multiple', 'name', 'preferWheel', 'presentation', 'readonly', 'showClearButton', 'showDefaultButtons', 'showDefaultTimeLabel', 'showDefaultTitle', 'size', 'titleSelectedDatesFormatter', 'value', 'yearValues'],
   methods: ['confirm', 'reset', 'cancel']
 })
 @Component({
@@ -643,7 +643,7 @@ Set `scrollEvents` to `true` to enable.
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['cancelText', 'clearText', 'color', 'dayValues', 'disabled', 'doneText', 'firstDayOfWeek', 'highlightedDates', 'hourCycle', 'hourValues', 'isDateEnabled', 'locale', 'max', 'min', 'minuteValues', 'mode', 'monthValues', 'multiple', 'name', 'preferWheel', 'presentation', 'readonly', 'showClearButton', 'showDefaultButtons', 'showDefaultTimeLabel', 'showDefaultTitle', 'size', 'titleSelectedDatesFormatter', 'value', 'yearValues'],
+  inputs: ['cancelText', 'clearText', 'color', 'dayValues', 'disabled', 'doneText', 'firstDayOfWeek', 'formatOptions', 'highlightedDates', 'hourCycle', 'hourValues', 'isDateEnabled', 'locale', 'max', 'min', 'minuteValues', 'mode', 'monthValues', 'multiple', 'name', 'preferWheel', 'presentation', 'readonly', 'showClearButton', 'showDefaultButtons', 'showDefaultTimeLabel', 'showDefaultTitle', 'size', 'titleSelectedDatesFormatter', 'value', 'yearValues'],
 })
 export class IonDatetime {
   protected el: HTMLElement;
diff --git a/packages/vue/src/proxies.ts b/packages/vue/src/proxies.ts
index 1ea101fb23..57380e47bd 100644
--- a/packages/vue/src/proxies.ts
+++ b/packages/vue/src/proxies.ts
@@ -274,6 +274,7 @@ export const IonDatetime = /*@__PURE__*/ defineContainer<JSX.IonDatetime, JSX.Io
   'color',
   'name',
   'disabled',
+  'formatOptions',
   'readonly',
   'isDateEnabled',
   'min',

From a0a77f799df0732d9f7182f15866035a3ce5a1eb Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Fri, 1 Mar 2024 17:12:05 -0500
Subject: [PATCH 2/8] feat(searchbar): autocapitalize, dir, lang, maxlength,
 and minlength are inherited to native input (#29098)

Issue number: resolves #27606

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->

Certain attributes are not be inherited to the inner searchbar.
Developers need control over these attributes to provide important
context to users for things like language and text direction.
Additionally, being able to control things like autocapitalize,
maxlength, and minlength can help improve the user experience by a)
guiding what should be entered into an input and b) removing
autocapitalize where it's not appropriate.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- Added autocapitalize, maxlength, and minlength properties
- lang and dir are global attributes, so adding them as properties will
cause issues. However, developers can still set them as attributes and
they will be inherited to the native `input` element. We also watch them
so any changes to the attributes are also inherited to the native
`input`.

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!--
  If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
  2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#footer
for more information.
-->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

Note: We expanded the scope of this work to also include input and
textarea, and this work will be handled separately. However, the
original request was only for searchbar so that's why I associated this
PR with the linked issue.

Dev build: `7.7.3-dev.11709159644.114cd8b1`
---
 core/api.txt                                  |  3 +
 core/src/components.d.ts                      | 24 +++++++
 core/src/components/searchbar/searchbar.tsx   | 70 ++++++++++++++++++-
 .../searchbar/test/searchbar.spec.ts          | 28 +++++++-
 packages/angular/src/directives/proxies.ts    |  4 +-
 packages/vue/src/proxies.ts                   |  3 +
 6 files changed, 127 insertions(+), 5 deletions(-)

diff --git a/core/api.txt b/core/api.txt
index acdcb8d0fa..498263defe 100644
--- a/core/api.txt
+++ b/core/api.txt
@@ -1158,6 +1158,7 @@ ion-row,shadow
 
 ion-searchbar,scoped
 ion-searchbar,prop,animated,boolean,false,false,false
+ion-searchbar,prop,autocapitalize,string,undefined,true,false
 ion-searchbar,prop,autocomplete,"name" | "email" | "tel" | "url" | "on" | "off" | "honorific-prefix" | "given-name" | "additional-name" | "family-name" | "honorific-suffix" | "nickname" | "username" | "new-password" | "current-password" | "one-time-code" | "organization-title" | "organization" | "street-address" | "address-line1" | "address-line2" | "address-line3" | "address-level4" | "address-level3" | "address-level2" | "address-level1" | "country" | "country-name" | "postal-code" | "cc-name" | "cc-given-name" | "cc-additional-name" | "cc-family-name" | "cc-number" | "cc-exp" | "cc-exp-month" | "cc-exp-year" | "cc-csc" | "cc-type" | "transaction-currency" | "transaction-amount" | "language" | "bday" | "bday-day" | "bday-month" | "bday-year" | "sex" | "tel-country-code" | "tel-national" | "tel-area-code" | "tel-local" | "tel-extension" | "impp" | "photo",'off',false,false
 ion-searchbar,prop,autocorrect,"off" | "on",'off',false,false
 ion-searchbar,prop,cancelButtonIcon,string,config.get('backButtonIcon', arrowBackSharp) as string,false,false
@@ -1168,6 +1169,8 @@ ion-searchbar,prop,debounce,number | undefined,undefined,false,false
 ion-searchbar,prop,disabled,boolean,false,false,false
 ion-searchbar,prop,enterkeyhint,"done" | "enter" | "go" | "next" | "previous" | "search" | "send" | undefined,undefined,false,false
 ion-searchbar,prop,inputmode,"decimal" | "email" | "none" | "numeric" | "search" | "tel" | "text" | "url" | undefined,undefined,false,false
+ion-searchbar,prop,maxlength,number | undefined,undefined,false,false
+ion-searchbar,prop,minlength,number | undefined,undefined,false,false
 ion-searchbar,prop,mode,"ios" | "md",undefined,false,false
 ion-searchbar,prop,name,string,this.inputId,false,false
 ion-searchbar,prop,placeholder,string,'Search',false,false
diff --git a/core/src/components.d.ts b/core/src/components.d.ts
index ab938b5bc1..6102aa8db7 100644
--- a/core/src/components.d.ts
+++ b/core/src/components.d.ts
@@ -2552,6 +2552,10 @@ export namespace Components {
           * If `true`, enable searchbar animation.
          */
         "animated": boolean;
+        /**
+          * Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user. Available options: `"off"`, `"none"`, `"on"`, `"sentences"`, `"words"`, `"characters"`.
+         */
+        "autocapitalize": string;
         /**
           * Set the input's autocomplete property.
          */
@@ -2596,6 +2600,14 @@ export namespace Components {
           * A hint to the browser for which keyboard to display. Possible values: `"none"`, `"text"`, `"tel"`, `"url"`, `"email"`, `"numeric"`, `"decimal"`, and `"search"`.
          */
         "inputmode"?: 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search';
+        /**
+          * This attribute specifies the maximum number of characters that the user can enter.
+         */
+        "maxlength"?: number;
+        /**
+          * This attribute specifies the minimum number of characters that the user can enter.
+         */
+        "minlength"?: number;
         /**
           * The mode determines which platform styles to use.
          */
@@ -7280,6 +7292,10 @@ declare namespace LocalJSX {
           * If `true`, enable searchbar animation.
          */
         "animated"?: boolean;
+        /**
+          * Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user. Available options: `"off"`, `"none"`, `"on"`, `"sentences"`, `"words"`, `"characters"`.
+         */
+        "autocapitalize": string;
         /**
           * Set the input's autocomplete property.
          */
@@ -7320,6 +7336,14 @@ declare namespace LocalJSX {
           * A hint to the browser for which keyboard to display. Possible values: `"none"`, `"text"`, `"tel"`, `"url"`, `"email"`, `"numeric"`, `"decimal"`, and `"search"`.
          */
         "inputmode"?: 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search';
+        /**
+          * This attribute specifies the maximum number of characters that the user can enter.
+         */
+        "maxlength"?: number;
+        /**
+          * This attribute specifies the minimum number of characters that the user can enter.
+         */
+        "minlength"?: number;
         /**
           * The mode determines which platform styles to use.
          */
diff --git a/core/src/components/searchbar/searchbar.tsx b/core/src/components/searchbar/searchbar.tsx
index 21fed733d2..cf48cf4a04 100644
--- a/core/src/components/searchbar/searchbar.tsx
+++ b/core/src/components/searchbar/searchbar.tsx
@@ -1,6 +1,7 @@
 import type { ComponentInterface, EventEmitter } from '@stencil/core';
 import { Component, Element, Event, Host, Method, Prop, State, Watch, forceUpdate, h } from '@stencil/core';
-import { debounceEvent, raf, componentOnReady } from '@utils/helpers';
+import { debounceEvent, raf, componentOnReady, inheritAttributes } from '@utils/helpers';
+import type { Attributes } from '@utils/helpers';
 import { isRTL } from '@utils/rtl';
 import { createColorClasses } from '@utils/theme';
 import { arrowBackSharp, closeCircle, closeSharp, searchOutline, searchSharp } from 'ionicons/icons';
@@ -28,6 +29,7 @@ export class Searchbar implements ComponentInterface {
   private shouldAlignLeft = true;
   private originalIonInput?: EventEmitter<SearchbarInputEventDetail>;
   private inputId = `ion-searchbar-${searchbarIds++}`;
+  private inheritedAttributes: Attributes = {};
 
   /**
    * The value of the input when the textarea is focused.
@@ -39,6 +41,31 @@ export class Searchbar implements ComponentInterface {
   @State() focused = false;
   @State() noAnimate = true;
 
+  /**
+   * 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.
+   */
+  @Watch('lang')
+  onLangChanged(newValue: string) {
+    this.inheritedAttributes = {
+      ...this.inheritedAttributes,
+      lang: newValue,
+    };
+    forceUpdate(this);
+  }
+
+  @Watch('dir')
+  onDirChanged(newValue: string) {
+    this.inheritedAttributes = {
+      ...this.inheritedAttributes,
+      dir: newValue,
+    };
+    forceUpdate(this);
+  }
+
   /**
    * The color to use from your application's color palette.
    * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
@@ -51,6 +78,27 @@ export class Searchbar implements ComponentInterface {
    */
   @Prop() animated = false;
 
+  /**
+   * Prior to the addition of this property
+   * autocapitalize was enabled by default on iOS
+   * and disabled by default on Android
+   * for Searchbar. The autocapitalize type on HTMLElement
+   * requires that it be a string and never undefined.
+   * However, setting it to a string value would be a breaking change
+   * in behavior, so we use "!" to tell TypeScript that this property
+   * is always defined so we can rely on the browser defaults. Browsers
+   * will automatically set a default value if the developer does not set one.
+   *
+   * In the future, this property will default to "off" to align with
+   * Input and Textarea, and the "!" will not be needed.
+   */
+
+  /**
+   * Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user.
+   * Available options: `"off"`, `"none"`, `"on"`, `"sentences"`, `"words"`, `"characters"`.
+   */
+  @Prop() autocapitalize!: string;
+
   /**
    * Set the input's autocomplete property.
    */
@@ -112,6 +160,16 @@ export class Searchbar implements ComponentInterface {
    */
   @Prop() enterkeyhint?: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send';
 
+  /**
+   * This attribute specifies the maximum number of characters that the user can enter.
+   */
+  @Prop() maxlength?: number;
+
+  /**
+   * This attribute specifies the minimum number of characters that the user can enter.
+   */
+  @Prop() minlength?: number;
+
   /**
    * If used in a form, set the name of the control, which is submitted with the form data.
    */
@@ -232,6 +290,12 @@ export class Searchbar implements ComponentInterface {
     this.emitStyle();
   }
 
+  componentWillLoad() {
+    this.inheritedAttributes = {
+      ...inheritAttributes(this.el, ['lang', 'dir']),
+    };
+  }
+
   componentDidLoad() {
     this.originalIonInput = this.ionInput;
     this.positionElements();
@@ -614,12 +678,16 @@ export class Searchbar implements ComponentInterface {
             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}
diff --git a/core/src/components/searchbar/test/searchbar.spec.ts b/core/src/components/searchbar/test/searchbar.spec.ts
index ad3a1f9137..0622a69ace 100644
--- a/core/src/components/searchbar/test/searchbar.spec.ts
+++ b/core/src/components/searchbar/test/searchbar.spec.ts
@@ -3,13 +3,37 @@ import { newSpecPage } from '@stencil/core/testing';
 import { Searchbar } from '../searchbar';
 
 describe('searchbar: rendering', () => {
-  it('should inherit attributes', async () => {
+  it('should inherit properties on load', async () => {
     const page = await newSpecPage({
       components: [Searchbar],
-      html: '<ion-searchbar name="search"></ion-searchbar>',
+      html: '<ion-searchbar autocapitalize="off" maxlength="4" minlength="2" name="search"></ion-searchbar>',
     });
 
     const nativeEl = page.body.querySelector('ion-searchbar input')!;
     expect(nativeEl.getAttribute('name')).toBe('search');
+    expect(nativeEl.getAttribute('maxlength')).toBe('4');
+    expect(nativeEl.getAttribute('minlength')).toBe('2');
+    expect(nativeEl.getAttribute('autocapitalize')).toBe('off');
+  });
+
+  it('should inherit watched attributes', async () => {
+    const page = await newSpecPage({
+      components: [Searchbar],
+      html: '<ion-searchbar dir="ltr" lang="en-US"></ion-searchbar>',
+    });
+
+    const searchbarEl = page.body.querySelector('ion-searchbar')!;
+    const nativeEl = searchbarEl.querySelector('input')!;
+
+    expect(nativeEl.getAttribute('lang')).toBe('en-US');
+    expect(nativeEl.getAttribute('dir')).toBe('ltr');
+
+    searchbarEl.setAttribute('lang', 'es-ES');
+    searchbarEl.setAttribute('dir', 'rtl');
+
+    await page.waitForChanges();
+
+    expect(nativeEl.getAttribute('lang')).toBe('es-ES');
+    expect(nativeEl.getAttribute('dir')).toBe('rtl');
   });
 });
diff --git a/packages/angular/src/directives/proxies.ts b/packages/angular/src/directives/proxies.ts
index a592c55894..b60fd38f7f 100644
--- a/packages/angular/src/directives/proxies.ts
+++ b/packages/angular/src/directives/proxies.ts
@@ -1788,7 +1788,7 @@ export declare interface IonRow extends Components.IonRow {}
 
 
 @ProxyCmp({
-  inputs: ['animated', 'autocomplete', 'autocorrect', 'cancelButtonIcon', 'cancelButtonText', 'clearIcon', 'color', 'debounce', 'disabled', 'enterkeyhint', 'inputmode', 'mode', 'name', 'placeholder', 'searchIcon', 'showCancelButton', 'showClearButton', 'spellcheck', 'type', 'value'],
+  inputs: ['animated', 'autocapitalize', 'autocomplete', 'autocorrect', 'cancelButtonIcon', 'cancelButtonText', 'clearIcon', 'color', 'debounce', 'disabled', 'enterkeyhint', 'inputmode', 'maxlength', 'minlength', 'mode', 'name', 'placeholder', 'searchIcon', 'showCancelButton', 'showClearButton', 'spellcheck', 'type', 'value'],
   methods: ['setFocus', 'getInputElement']
 })
 @Component({
@@ -1796,7 +1796,7 @@ export declare interface IonRow extends Components.IonRow {}
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['animated', 'autocomplete', 'autocorrect', 'cancelButtonIcon', 'cancelButtonText', 'clearIcon', 'color', 'debounce', 'disabled', 'enterkeyhint', 'inputmode', 'mode', 'name', 'placeholder', 'searchIcon', 'showCancelButton', 'showClearButton', 'spellcheck', 'type', 'value'],
+  inputs: ['animated', 'autocapitalize', 'autocomplete', 'autocorrect', 'cancelButtonIcon', 'cancelButtonText', 'clearIcon', 'color', 'debounce', 'disabled', 'enterkeyhint', 'inputmode', 'maxlength', 'minlength', 'mode', 'name', 'placeholder', 'searchIcon', 'showCancelButton', 'showClearButton', 'spellcheck', 'type', 'value'],
 })
 export class IonSearchbar {
   protected el: HTMLElement;
diff --git a/packages/vue/src/proxies.ts b/packages/vue/src/proxies.ts
index 57380e47bd..5d0272ce08 100644
--- a/packages/vue/src/proxies.ts
+++ b/packages/vue/src/proxies.ts
@@ -676,6 +676,7 @@ export const IonRow = /*@__PURE__*/ defineContainer<JSX.IonRow>('ion-row', defin
 export const IonSearchbar = /*@__PURE__*/ defineContainer<JSX.IonSearchbar, JSX.IonSearchbar["value"]>('ion-searchbar', defineIonSearchbar, [
   'color',
   'animated',
+  'autocapitalize',
   'autocomplete',
   'autocorrect',
   'cancelButtonIcon',
@@ -685,6 +686,8 @@ export const IonSearchbar = /*@__PURE__*/ defineContainer<JSX.IonSearchbar, JSX.
   'disabled',
   'inputmode',
   'enterkeyhint',
+  'maxlength',
+  'minlength',
   'name',
   'placeholder',
   'searchIcon',

From c0f5e5ebc0c9d45d71e10e09903b00b3ba8e6bba Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Tue, 12 Mar 2024 17:34:55 -0400
Subject: [PATCH 3/8] fix(overlay): do not hide overlay if toast is presented
 (#29140)

Issue number: resolves #29139

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->

When implementing
https://github.com/ionic-team/ionic-framework/pull/28997 we did not
consider the case where a Toast could be presented. When presenting a
Toast after presenting a Modal the linked change causes the Modal to be
hidden from screen readers.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- If the top-most overlay is a Toast then the closest non-Toast overlay
is also not hidden from screen readers.

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!--
  If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
  2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#footer
for more information.
-->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

Dev build: `7.7.5-dev.11710260658.1fc29a6c`

---------

Co-authored-by: Amanda Johnston <90629384+amandaejohnston@users.noreply.github.com>
---
 core/src/utils/overlays.ts                    | 81 +++++++++++++++----
 core/src/utils/test/overlays/overlays.spec.ts | 67 +++++++++++++++
 2 files changed, 131 insertions(+), 17 deletions(-)

diff --git a/core/src/utils/overlays.ts b/core/src/utils/overlays.ts
index 11ec2f5669..b248206151 100644
--- a/core/src/utils/overlays.ts
+++ b/core/src/utils/overlays.ts
@@ -541,16 +541,7 @@ export const present = async <OverlayPresentOptions>(
   }
 
   setRootAriaHidden(true);
-
-  /**
-   * Hide all other overlays from screen readers so only this one
-   * can be read. Note that presenting an overlay always makes
-   * it the topmost one.
-   */
-  if (doc !== undefined) {
-    const presentedOverlays = getPresentedOverlays(doc);
-    presentedOverlays.forEach((o) => o.setAttribute('aria-hidden', 'true'));
-  }
+  hideOverlaysFromScreenReaders(overlay.el);
 
   overlay.presented = true;
   overlay.willPresent.emit();
@@ -723,13 +714,7 @@ export const dismiss = async <OverlayDismissOptions>(
 
   overlay.el.remove();
 
-  /**
-   * If there are other overlays presented, unhide the new
-   * topmost one from screen readers.
-   */
-  if (doc !== undefined) {
-    getPresentedOverlay(doc)?.removeAttribute('aria-hidden');
-  }
+  revealOverlaysToScreenReaders();
 
   return true;
 };
@@ -966,3 +951,65 @@ export const createTriggerController = () => {
     removeClickListener,
   };
 };
+
+/**
+ * Ensure that underlying overlays have aria-hidden if necessary so that screen readers
+ * cannot move focus to these elements. Note that we cannot rely on focus/focusin/focusout
+ * events here because those events do not fire when the screen readers moves to a non-focusable
+ * element such as text.
+ * Without this logic screen readers would be able to move focus outside of the top focus-trapped overlay.
+ *
+ * @param newTopMostOverlay - The overlay that is being presented. Since the overlay has not been
+ * fully presented yet at the time this function is called it will not be included in the getPresentedOverlays result.
+ */
+const hideOverlaysFromScreenReaders = (newTopMostOverlay: HTMLIonOverlayElement) => {
+  if (doc === undefined) return;
+
+  const overlays = getPresentedOverlays(doc);
+
+  for (let i = overlays.length - 1; i >= 0; i--) {
+    const presentedOverlay = overlays[i];
+    const nextPresentedOverlay = overlays[i + 1] ?? newTopMostOverlay;
+
+    /**
+     * If next overlay has aria-hidden then all remaining overlays will have it too.
+     * Or, if the next overlay is a Toast that does not have aria-hidden then current overlay
+     * should not have aria-hidden either so focus can remain in the current overlay.
+     */
+    if (nextPresentedOverlay.hasAttribute('aria-hidden') || nextPresentedOverlay.tagName !== 'ION-TOAST') {
+      presentedOverlay.setAttribute('aria-hidden', 'true');
+    }
+  }
+};
+
+/**
+ * When dismissing an overlay we need to reveal the new top-most overlay to screen readers.
+ * If the top-most overlay is a Toast we potentially need to reveal more overlays since
+ * focus is never automatically moved to the Toast.
+ */
+const revealOverlaysToScreenReaders = () => {
+  if (doc === undefined) return;
+
+  const overlays = getPresentedOverlays(doc);
+
+  for (let i = overlays.length - 1; i >= 0; i--) {
+    const currentOverlay = overlays[i];
+
+    /**
+     * If the current we are looking at is a Toast then we can remove aria-hidden.
+     * However, we potentially need to keep looking at the overlay stack because there
+     * could be more Toasts underneath. Additionally, we need to unhide the closest non-Toast
+     * overlay too so focus can move there since focus is never automatically moved to the Toast.
+     */
+    currentOverlay.removeAttribute('aria-hidden');
+
+    /**
+     * If we found a non-Toast element then we can just remove aria-hidden and stop searching entirely
+     * since this overlay should always receive focus. As a result, all underlying overlays should still
+     * be hidden from screen readers.
+     */
+    if (currentOverlay.tagName !== 'ION-TOAST') {
+      break;
+    }
+  }
+};
diff --git a/core/src/utils/test/overlays/overlays.spec.ts b/core/src/utils/test/overlays/overlays.spec.ts
index 7b67a22183..29a77c3c26 100644
--- a/core/src/utils/test/overlays/overlays.spec.ts
+++ b/core/src/utils/test/overlays/overlays.spec.ts
@@ -1,6 +1,7 @@
 import { newSpecPage } from '@stencil/core/testing';
 
 import { Modal } from '../../../components/modal/modal';
+import { Toast } from '../../../components/toast/toast';
 import { Nav } from '../../../components/nav/nav';
 import { RouterOutlet } from '../../../components/router-outlet/router-outlet';
 import { setRootAriaHidden } from '../../overlays';
@@ -193,4 +194,70 @@ describe('aria-hidden on individual overlays', () => {
     await modalOne.present();
     expect(modalOne.hasAttribute('aria-hidden')).toEqual(false);
   });
+
+  it('should not hide previous overlay if top-most overlay is toast', async () => {
+    const page = await newSpecPage({
+      components: [Modal, Toast],
+      html: `
+        <ion-modal id="m-one"></ion-modal>
+        <ion-modal id="m-two"></ion-modal>
+        <ion-toast id="t-one"></ion-toast>
+        <ion-toast id="t-two"></ion-toast>
+      `,
+    });
+
+    const modalOne = page.body.querySelector<HTMLIonModalElement>('ion-modal#m-one')!;
+    const modalTwo = page.body.querySelector<HTMLIonModalElement>('ion-modal#m-two')!;
+    const toastOne = page.body.querySelector<HTMLIonModalElement>('ion-toast#t-one')!;
+    const toastTwo = page.body.querySelector<HTMLIonModalElement>('ion-toast#t-two')!;
+
+    await modalOne.present();
+    await modalTwo.present();
+    await toastOne.present();
+    await toastTwo.present();
+
+    expect(modalOne.hasAttribute('aria-hidden')).toEqual(true);
+    expect(modalTwo.hasAttribute('aria-hidden')).toEqual(false);
+    expect(toastOne.hasAttribute('aria-hidden')).toEqual(false);
+    expect(toastTwo.hasAttribute('aria-hidden')).toEqual(false);
+
+    await toastTwo.dismiss();
+
+    expect(modalOne.hasAttribute('aria-hidden')).toEqual(true);
+    expect(modalTwo.hasAttribute('aria-hidden')).toEqual(false);
+    expect(toastOne.hasAttribute('aria-hidden')).toEqual(false);
+
+    await toastOne.dismiss();
+
+    expect(modalOne.hasAttribute('aria-hidden')).toEqual(true);
+    expect(modalTwo.hasAttribute('aria-hidden')).toEqual(false);
+  });
+
+  it('should hide previous overlay even with a toast that is not the top-most overlay', async () => {
+    const page = await newSpecPage({
+      components: [Modal, Toast],
+      html: `
+        <ion-modal id="m-one"></ion-modal>
+        <ion-toast id="t-one"></ion-toast>
+        <ion-modal id="m-two"></ion-modal>
+      `,
+    });
+
+    const modalOne = page.body.querySelector<HTMLIonModalElement>('ion-modal#m-one')!;
+    const modalTwo = page.body.querySelector<HTMLIonModalElement>('ion-modal#m-two')!;
+    const toastOne = page.body.querySelector<HTMLIonModalElement>('ion-toast#t-one')!;
+
+    await modalOne.present();
+    await toastOne.present();
+    await modalTwo.present();
+
+    expect(modalOne.hasAttribute('aria-hidden')).toEqual(true);
+    expect(toastOne.hasAttribute('aria-hidden')).toEqual(true);
+    expect(modalTwo.hasAttribute('aria-hidden')).toEqual(false);
+
+    await modalTwo.dismiss();
+
+    expect(modalOne.hasAttribute('aria-hidden')).toEqual(false);
+    expect(toastOne.hasAttribute('aria-hidden')).toEqual(false);
+  });
 });

From 487ffca11e01100517e030b401367f46b0d8cda4 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Tue, 12 Mar 2024 17:52:38 -0400
Subject: [PATCH 4/8] chore: fix typo with close watcher const (#29146)

The variable was spelled incorrectly.
---
 core/src/components/app/app.tsx        | 6 +++---
 core/src/components/menu/menu.tsx      | 4 ++--
 core/src/utils/hardware-back-button.ts | 4 ++--
 core/src/utils/overlays.ts             | 4 ++--
 4 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/core/src/components/app/app.tsx b/core/src/components/app/app.tsx
index 44a67d2a15..d38b0bd37a 100644
--- a/core/src/components/app/app.tsx
+++ b/core/src/components/app/app.tsx
@@ -1,7 +1,7 @@
 import type { ComponentInterface } from '@stencil/core';
 import { Build, Component, Element, Host, Method, h } from '@stencil/core';
 import type { FocusVisibleUtility } from '@utils/focus-visible';
-import { shoudUseCloseWatcher } from '@utils/hardware-back-button';
+import { shouldUseCloseWatcher } from '@utils/hardware-back-button';
 import { printIonWarning } from '@utils/logging';
 import { isPlatform } from '@utils/platform';
 
@@ -36,7 +36,7 @@ export class App implements ComponentInterface {
           import('../../utils/input-shims/input-shims').then((module) => module.startInputShims(config, platform));
         }
         const hardwareBackButtonModule = await import('../../utils/hardware-back-button');
-        const supportsHardwareBackButtonEvents = isHybrid || shoudUseCloseWatcher();
+        const supportsHardwareBackButtonEvents = isHybrid || shouldUseCloseWatcher();
         if (config.getBoolean('hardwareBackButton', supportsHardwareBackButtonEvents)) {
           hardwareBackButtonModule.startHardwareBackButton();
         } else {
@@ -44,7 +44,7 @@ export class App implements ComponentInterface {
            * If an app sets hardwareBackButton: false and experimentalCloseWatcher: true
            * then the close watcher will not be used.
            */
-          if (shoudUseCloseWatcher()) {
+          if (shouldUseCloseWatcher()) {
             printIonWarning(
               'experimentalCloseWatcher was set to `true`, but hardwareBackButton was set to `false`. Both config options must be `true` for the Close Watcher API to be used.'
             );
diff --git a/core/src/components/menu/menu.tsx b/core/src/components/menu/menu.tsx
index 437c536345..a7bcc2573c 100644
--- a/core/src/components/menu/menu.tsx
+++ b/core/src/components/menu/menu.tsx
@@ -2,7 +2,7 @@ import type { ComponentInterface, EventEmitter } from '@stencil/core';
 import { Build, Component, Element, Event, Host, Listen, Method, Prop, State, Watch, h } from '@stencil/core';
 import { getTimeGivenProgression } from '@utils/animation/cubic-bezier';
 import { GESTURE_CONTROLLER } from '@utils/gesture';
-import { shoudUseCloseWatcher } from '@utils/hardware-back-button';
+import { shouldUseCloseWatcher } from '@utils/hardware-back-button';
 import type { Attributes } from '@utils/helpers';
 import { inheritAriaAttributes, assert, clamp, isEndSide as isEnd } from '@utils/helpers';
 import { menuController } from '@utils/menu-controller';
@@ -788,7 +788,7 @@ export class Menu implements ComponentInterface, MenuI {
      */
     return (
       <Host
-        onKeyDown={shoudUseCloseWatcher() ? null : this.onKeydown}
+        onKeyDown={shouldUseCloseWatcher() ? null : this.onKeydown}
         role="navigation"
         aria-label={inheritedAttributes['aria-label'] || 'menu'}
         class={{
diff --git a/core/src/utils/hardware-back-button.ts b/core/src/utils/hardware-back-button.ts
index 1005497faa..dbd5d70783 100644
--- a/core/src/utils/hardware-back-button.ts
+++ b/core/src/utils/hardware-back-button.ts
@@ -30,7 +30,7 @@ interface HandlerRegister {
  * moment this file is evaluated which could be
  * before the config is set.
  */
-export const shoudUseCloseWatcher = () =>
+export const shouldUseCloseWatcher = () =>
   config.get('experimentalCloseWatcher', false) && win !== undefined && 'CloseWatcher' in win;
 
 /**
@@ -109,7 +109,7 @@ export const startHardwareBackButton = () => {
    * backbutton event otherwise we may get duplicate
    * events firing.
    */
-  if (shoudUseCloseWatcher()) {
+  if (shouldUseCloseWatcher()) {
     let watcher: CloseWatcher | undefined;
 
     const configureWatcher = () => {
diff --git a/core/src/utils/overlays.ts b/core/src/utils/overlays.ts
index b248206151..dfc17ca327 100644
--- a/core/src/utils/overlays.ts
+++ b/core/src/utils/overlays.ts
@@ -1,6 +1,6 @@
 import { doc } from '@utils/browser';
 import type { BackButtonEvent } from '@utils/hardware-back-button';
-import { shoudUseCloseWatcher } from '@utils/hardware-back-button';
+import { shouldUseCloseWatcher } from '@utils/hardware-back-button';
 
 import { config } from '../global/config';
 import { getIonMode } from '../global/ionic-global';
@@ -428,7 +428,7 @@ const connectListeners = (doc: Document) => {
      * this behavior will be handled via the ionBackButton
      * event.
      */
-    if (!shoudUseCloseWatcher()) {
+    if (!shouldUseCloseWatcher()) {
       doc.addEventListener('keydown', (ev) => {
         if (ev.key === 'Escape') {
           const lastOverlay = getPresentedOverlay(doc);

From 82e90f28b4c05ee8434e45fb860d073c8215bfa0 Mon Sep 17 00:00:00 2001
From: ionitron <hi@ionicframework.com>
Date: Wed, 13 Mar 2024 13:15:09 +0000
Subject: [PATCH 5/8] v7.7.5

---
 CHANGELOG.md                              | 13 +++++++++++++
 core/CHANGELOG.md                         | 12 ++++++++++++
 core/package-lock.json                    |  4 ++--
 core/package.json                         |  2 +-
 docs/CHANGELOG.md                         |  8 ++++++++
 docs/package-lock.json                    |  4 ++--
 docs/package.json                         |  2 +-
 lerna.json                                |  2 +-
 packages/angular-server/CHANGELOG.md      |  8 ++++++++
 packages/angular-server/package-lock.json |  6 +++---
 packages/angular-server/package.json      |  4 ++--
 packages/angular/CHANGELOG.md             | 11 +++++++++++
 packages/angular/package-lock.json        |  6 +++---
 packages/angular/package.json             |  4 ++--
 packages/react-router/CHANGELOG.md        |  8 ++++++++
 packages/react-router/package-lock.json   |  6 +++---
 packages/react-router/package.json        |  4 ++--
 packages/react/CHANGELOG.md               |  8 ++++++++
 packages/react/package-lock.json          |  6 +++---
 packages/react/package.json               |  4 ++--
 packages/vue-router/CHANGELOG.md          |  8 ++++++++
 packages/vue-router/package-lock.json     |  6 +++---
 packages/vue-router/package.json          |  4 ++--
 packages/vue/CHANGELOG.md                 |  8 ++++++++
 packages/vue/package-lock.json            |  6 +++---
 packages/vue/package.json                 |  4 ++--
 26 files changed, 121 insertions(+), 37 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 8c01808b55..9ec911b1c9 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -3,6 +3,19 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [7.7.5](https://github.com/ionic-team/ionic-framework/compare/v7.7.4...v7.7.5) (2024-03-13)
+
+
+### Bug Fixes
+
+* **angular:** add ionNavWillChange and ionNavDidChange types for nav ([#29122](https://github.com/ionic-team/ionic-framework/issues/29122)) ([85b9d5c](https://github.com/ionic-team/ionic-framework/commit/85b9d5c35f626ffc273d220549b0126ddc1f7e4b)), closes [#29114](https://github.com/ionic-team/ionic-framework/issues/29114)
+* **checkbox:** set aria-checked of indeterminate checkbox to 'mixed' ([#29115](https://github.com/ionic-team/ionic-framework/issues/29115)) ([b2d636f](https://github.com/ionic-team/ionic-framework/commit/b2d636f14dcd33313f6604cfd4a64b542c831b34))
+* **overlay:** do not hide overlay if toast is presented ([#29140](https://github.com/ionic-team/ionic-framework/issues/29140)) ([c0f5e5e](https://github.com/ionic-team/ionic-framework/commit/c0f5e5ebc0c9d45d71e10e09903b00b3ba8e6bba)), closes [#29139](https://github.com/ionic-team/ionic-framework/issues/29139)
+
+
+
+
+
 ## [7.7.4](https://github.com/ionic-team/ionic-framework/compare/v7.7.3...v7.7.4) (2024-03-06)
 
 
diff --git a/core/CHANGELOG.md b/core/CHANGELOG.md
index e72d106d9d..7caaac91fc 100644
--- a/core/CHANGELOG.md
+++ b/core/CHANGELOG.md
@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [7.7.5](https://github.com/ionic-team/ionic-framework/compare/v7.7.4...v7.7.5) (2024-03-13)
+
+
+### Bug Fixes
+
+* **checkbox:** set aria-checked of indeterminate checkbox to 'mixed' ([#29115](https://github.com/ionic-team/ionic-framework/issues/29115)) ([b2d636f](https://github.com/ionic-team/ionic-framework/commit/b2d636f14dcd33313f6604cfd4a64b542c831b34))
+* **overlay:** do not hide overlay if toast is presented ([#29140](https://github.com/ionic-team/ionic-framework/issues/29140)) ([c0f5e5e](https://github.com/ionic-team/ionic-framework/commit/c0f5e5ebc0c9d45d71e10e09903b00b3ba8e6bba)), closes [#29139](https://github.com/ionic-team/ionic-framework/issues/29139)
+
+
+
+
+
 ## [7.7.4](https://github.com/ionic-team/ionic-framework/compare/v7.7.3...v7.7.4) (2024-03-06)
 
 
diff --git a/core/package-lock.json b/core/package-lock.json
index d4ab8346bf..30741bed7f 100644
--- a/core/package-lock.json
+++ b/core/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@ionic/core",
-  "version": "7.7.4",
+  "version": "7.7.5",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/core",
-      "version": "7.7.4",
+      "version": "7.7.5",
       "license": "MIT",
       "dependencies": {
         "@stencil/core": "^4.12.2",
diff --git a/core/package.json b/core/package.json
index 6a602c14a1..bb58562171 100644
--- a/core/package.json
+++ b/core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ionic/core",
-  "version": "7.7.4",
+  "version": "7.7.5",
   "description": "Base components for Ionic",
   "keywords": [
     "ionic",
diff --git a/docs/CHANGELOG.md b/docs/CHANGELOG.md
index fbe0280e55..8307ac9f32 100644
--- a/docs/CHANGELOG.md
+++ b/docs/CHANGELOG.md
@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [7.7.5](https://github.com/ionic-team/ionic-framework/compare/v7.7.4...v7.7.5) (2024-03-13)
+
+**Note:** Version bump only for package @ionic/docs
+
+
+
+
+
 ## [7.7.4](https://github.com/ionic-team/ionic-framework/compare/v7.7.3...v7.7.4) (2024-03-06)
 
 **Note:** Version bump only for package @ionic/docs
diff --git a/docs/package-lock.json b/docs/package-lock.json
index 18da5dac04..245545f844 100644
--- a/docs/package-lock.json
+++ b/docs/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@ionic/docs",
-  "version": "7.7.4",
+  "version": "7.7.5",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/docs",
-      "version": "7.7.4",
+      "version": "7.7.5",
       "license": "MIT"
     }
   }
diff --git a/docs/package.json b/docs/package.json
index dec2878417..f3b0c7aaeb 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ionic/docs",
-  "version": "7.7.4",
+  "version": "7.7.5",
   "description": "Pre-packaged API documentation for the Ionic docs.",
   "main": "core.json",
   "types": "core.d.ts",
diff --git a/lerna.json b/lerna.json
index 11c4eeea41..f528118e91 100644
--- a/lerna.json
+++ b/lerna.json
@@ -4,5 +4,5 @@
     "docs",
     "packages/*"
   ],
-  "version": "7.7.4"
+  "version": "7.7.5"
 }
diff --git a/packages/angular-server/CHANGELOG.md b/packages/angular-server/CHANGELOG.md
index 03c3eadb16..c8a5f1025a 100644
--- a/packages/angular-server/CHANGELOG.md
+++ b/packages/angular-server/CHANGELOG.md
@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [7.7.5](https://github.com/ionic-team/ionic-framework/compare/v7.7.4...v7.7.5) (2024-03-13)
+
+**Note:** Version bump only for package @ionic/angular-server
+
+
+
+
+
 ## [7.7.4](https://github.com/ionic-team/ionic-framework/compare/v7.7.3...v7.7.4) (2024-03-06)
 
 **Note:** Version bump only for package @ionic/angular-server
diff --git a/packages/angular-server/package-lock.json b/packages/angular-server/package-lock.json
index 1320564095..7b8d28df89 100644
--- a/packages/angular-server/package-lock.json
+++ b/packages/angular-server/package-lock.json
@@ -1,15 +1,15 @@
 {
   "name": "@ionic/angular-server",
-  "version": "7.7.4",
+  "version": "7.7.5",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/angular-server",
-      "version": "7.7.4",
+      "version": "7.7.5",
       "license": "MIT",
       "dependencies": {
-        "@ionic/core": "^7.7.4"
+        "@ionic/core": "^7.7.5"
       },
       "devDependencies": {
         "@angular-eslint/eslint-plugin": "^14.0.0",
diff --git a/packages/angular-server/package.json b/packages/angular-server/package.json
index e565e85747..792d1a4b99 100644
--- a/packages/angular-server/package.json
+++ b/packages/angular-server/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ionic/angular-server",
-  "version": "7.7.4",
+  "version": "7.7.5",
   "description": "Angular SSR Module for Ionic",
   "keywords": [
     "ionic",
@@ -62,6 +62,6 @@
   },
   "prettier": "@ionic/prettier-config",
   "dependencies": {
-    "@ionic/core": "^7.7.4"
+    "@ionic/core": "^7.7.5"
   }
 }
diff --git a/packages/angular/CHANGELOG.md b/packages/angular/CHANGELOG.md
index ea06bc4d42..a4c116c8cd 100644
--- a/packages/angular/CHANGELOG.md
+++ b/packages/angular/CHANGELOG.md
@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [7.7.5](https://github.com/ionic-team/ionic-framework/compare/v7.7.4...v7.7.5) (2024-03-13)
+
+
+### Bug Fixes
+
+* **angular:** add ionNavWillChange and ionNavDidChange types for nav ([#29122](https://github.com/ionic-team/ionic-framework/issues/29122)) ([85b9d5c](https://github.com/ionic-team/ionic-framework/commit/85b9d5c35f626ffc273d220549b0126ddc1f7e4b)), closes [#29114](https://github.com/ionic-team/ionic-framework/issues/29114)
+
+
+
+
+
 ## [7.7.4](https://github.com/ionic-team/ionic-framework/compare/v7.7.3...v7.7.4) (2024-03-06)
 
 **Note:** Version bump only for package @ionic/angular
diff --git a/packages/angular/package-lock.json b/packages/angular/package-lock.json
index 3f876eb950..9005a104e9 100644
--- a/packages/angular/package-lock.json
+++ b/packages/angular/package-lock.json
@@ -1,15 +1,15 @@
 {
   "name": "@ionic/angular",
-  "version": "7.7.4",
+  "version": "7.7.5",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/angular",
-      "version": "7.7.4",
+      "version": "7.7.5",
       "license": "MIT",
       "dependencies": {
-        "@ionic/core": "^7.7.4",
+        "@ionic/core": "^7.7.5",
         "ionicons": "^7.0.0",
         "jsonc-parser": "^3.0.0",
         "tslib": "^2.3.0"
diff --git a/packages/angular/package.json b/packages/angular/package.json
index 1a1d440f7f..0c7c0ca5fe 100644
--- a/packages/angular/package.json
+++ b/packages/angular/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ionic/angular",
-  "version": "7.7.4",
+  "version": "7.7.5",
   "description": "Angular specific wrappers for @ionic/core",
   "keywords": [
     "ionic",
@@ -47,7 +47,7 @@
     }
   },
   "dependencies": {
-    "@ionic/core": "^7.7.4",
+    "@ionic/core": "^7.7.5",
     "ionicons": "^7.0.0",
     "jsonc-parser": "^3.0.0",
     "tslib": "^2.3.0"
diff --git a/packages/react-router/CHANGELOG.md b/packages/react-router/CHANGELOG.md
index 071805c2ec..88b223faf8 100644
--- a/packages/react-router/CHANGELOG.md
+++ b/packages/react-router/CHANGELOG.md
@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [7.7.5](https://github.com/ionic-team/ionic-framework/compare/v7.7.4...v7.7.5) (2024-03-13)
+
+**Note:** Version bump only for package @ionic/react-router
+
+
+
+
+
 ## [7.7.4](https://github.com/ionic-team/ionic-framework/compare/v7.7.3...v7.7.4) (2024-03-06)
 
 **Note:** Version bump only for package @ionic/react-router
diff --git a/packages/react-router/package-lock.json b/packages/react-router/package-lock.json
index e5d772cec3..8641156ce3 100644
--- a/packages/react-router/package-lock.json
+++ b/packages/react-router/package-lock.json
@@ -1,15 +1,15 @@
 {
   "name": "@ionic/react-router",
-  "version": "7.7.4",
+  "version": "7.7.5",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/react-router",
-      "version": "7.7.4",
+      "version": "7.7.5",
       "license": "MIT",
       "dependencies": {
-        "@ionic/react": "^7.7.4",
+        "@ionic/react": "^7.7.5",
         "tslib": "*"
       },
       "devDependencies": {
diff --git a/packages/react-router/package.json b/packages/react-router/package.json
index 7ce2c09e58..fe529b1a43 100644
--- a/packages/react-router/package.json
+++ b/packages/react-router/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ionic/react-router",
-  "version": "7.7.4",
+  "version": "7.7.5",
   "description": "React Router wrapper for @ionic/react",
   "keywords": [
     "ionic",
@@ -36,7 +36,7 @@
     "dist/"
   ],
   "dependencies": {
-    "@ionic/react": "^7.7.4",
+    "@ionic/react": "^7.7.5",
     "tslib": "*"
   },
   "peerDependencies": {
diff --git a/packages/react/CHANGELOG.md b/packages/react/CHANGELOG.md
index d120fed4e5..3196bd673f 100644
--- a/packages/react/CHANGELOG.md
+++ b/packages/react/CHANGELOG.md
@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [7.7.5](https://github.com/ionic-team/ionic-framework/compare/v7.7.4...v7.7.5) (2024-03-13)
+
+**Note:** Version bump only for package @ionic/react
+
+
+
+
+
 ## [7.7.4](https://github.com/ionic-team/ionic-framework/compare/v7.7.3...v7.7.4) (2024-03-06)
 
 **Note:** Version bump only for package @ionic/react
diff --git a/packages/react/package-lock.json b/packages/react/package-lock.json
index dd510c5dbe..4086cae5b6 100644
--- a/packages/react/package-lock.json
+++ b/packages/react/package-lock.json
@@ -1,15 +1,15 @@
 {
   "name": "@ionic/react",
-  "version": "7.7.4",
+  "version": "7.7.5",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/react",
-      "version": "7.7.4",
+      "version": "7.7.5",
       "license": "MIT",
       "dependencies": {
-        "@ionic/core": "^7.7.4",
+        "@ionic/core": "^7.7.5",
         "ionicons": "^7.0.0",
         "tslib": "*"
       },
diff --git a/packages/react/package.json b/packages/react/package.json
index 17e1119eb9..2175f1ad82 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ionic/react",
-  "version": "7.7.4",
+  "version": "7.7.5",
   "description": "React specific wrapper for @ionic/core",
   "keywords": [
     "ionic",
@@ -39,7 +39,7 @@
     "css/"
   ],
   "dependencies": {
-    "@ionic/core": "^7.7.4",
+    "@ionic/core": "^7.7.5",
     "ionicons": "^7.0.0",
     "tslib": "*"
   },
diff --git a/packages/vue-router/CHANGELOG.md b/packages/vue-router/CHANGELOG.md
index 1d030fd08a..3001908473 100644
--- a/packages/vue-router/CHANGELOG.md
+++ b/packages/vue-router/CHANGELOG.md
@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [7.7.5](https://github.com/ionic-team/ionic-framework/compare/v7.7.4...v7.7.5) (2024-03-13)
+
+**Note:** Version bump only for package @ionic/vue-router
+
+
+
+
+
 ## [7.7.4](https://github.com/ionic-team/ionic-framework/compare/v7.7.3...v7.7.4) (2024-03-06)
 
 **Note:** Version bump only for package @ionic/vue-router
diff --git a/packages/vue-router/package-lock.json b/packages/vue-router/package-lock.json
index 1660a0a3a2..e8edda35cb 100644
--- a/packages/vue-router/package-lock.json
+++ b/packages/vue-router/package-lock.json
@@ -1,15 +1,15 @@
 {
   "name": "@ionic/vue-router",
-  "version": "7.7.4",
+  "version": "7.7.5",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/vue-router",
-      "version": "7.7.4",
+      "version": "7.7.5",
       "license": "MIT",
       "dependencies": {
-        "@ionic/vue": "^7.7.4"
+        "@ionic/vue": "^7.7.5"
       },
       "devDependencies": {
         "@ionic/eslint-config": "^0.3.0",
diff --git a/packages/vue-router/package.json b/packages/vue-router/package.json
index 6556cfebbd..9640b8d052 100644
--- a/packages/vue-router/package.json
+++ b/packages/vue-router/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ionic/vue-router",
-  "version": "7.7.4",
+  "version": "7.7.5",
   "description": "Vue Router integration for @ionic/vue",
   "scripts": {
     "test.spec": "jest",
@@ -44,7 +44,7 @@
   },
   "homepage": "https://github.com/ionic-team/ionic#readme",
   "dependencies": {
-    "@ionic/vue": "^7.7.4"
+    "@ionic/vue": "^7.7.5"
   },
   "devDependencies": {
     "@ionic/eslint-config": "^0.3.0",
diff --git a/packages/vue/CHANGELOG.md b/packages/vue/CHANGELOG.md
index 7fffea71ae..68c9e79237 100644
--- a/packages/vue/CHANGELOG.md
+++ b/packages/vue/CHANGELOG.md
@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [7.7.5](https://github.com/ionic-team/ionic-framework/compare/v7.7.4...v7.7.5) (2024-03-13)
+
+**Note:** Version bump only for package @ionic/vue
+
+
+
+
+
 ## [7.7.4](https://github.com/ionic-team/ionic-framework/compare/v7.7.3...v7.7.4) (2024-03-06)
 
 **Note:** Version bump only for package @ionic/vue
diff --git a/packages/vue/package-lock.json b/packages/vue/package-lock.json
index 006d333331..4dd80ee5ae 100644
--- a/packages/vue/package-lock.json
+++ b/packages/vue/package-lock.json
@@ -1,15 +1,15 @@
 {
   "name": "@ionic/vue",
-  "version": "7.7.4",
+  "version": "7.7.5",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/vue",
-      "version": "7.7.4",
+      "version": "7.7.5",
       "license": "MIT",
       "dependencies": {
-        "@ionic/core": "^7.7.4",
+        "@ionic/core": "^7.7.5",
         "ionicons": "^7.0.0"
       },
       "devDependencies": {
diff --git a/packages/vue/package.json b/packages/vue/package.json
index 707afae94c..b1a0412ccc 100644
--- a/packages/vue/package.json
+++ b/packages/vue/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ionic/vue",
-  "version": "7.7.4",
+  "version": "7.7.5",
   "description": "Vue specific wrapper for @ionic/core",
   "scripts": {
     "eslint": "eslint src",
@@ -66,7 +66,7 @@
     "vue-router": "^4.0.16"
   },
   "dependencies": {
-    "@ionic/core": "^7.7.4",
+    "@ionic/core": "^7.7.5",
     "ionicons": "^7.0.0"
   },
   "vetur": {

From ddcda78ac9f345baddc77ac1860a73a20e510a96 Mon Sep 17 00:00:00 2001
From: ionitron <hi@ionicframework.com>
Date: Wed, 13 Mar 2024 13:15:50 +0000
Subject: [PATCH 6/8] chore(): update package lock files

---
 packages/angular-server/package-lock.json | 12 +++----
 packages/angular/package-lock.json        | 12 +++----
 packages/react-router/package-lock.json   | 40 +++++++++++------------
 packages/react/package-lock.json          | 12 +++----
 packages/vue-router/package-lock.json     | 40 +++++++++++------------
 packages/vue/package-lock.json            | 12 +++----
 6 files changed, 64 insertions(+), 64 deletions(-)

diff --git a/packages/angular-server/package-lock.json b/packages/angular-server/package-lock.json
index 7b8d28df89..7bbe44948e 100644
--- a/packages/angular-server/package-lock.json
+++ b/packages/angular-server/package-lock.json
@@ -1060,9 +1060,9 @@
       "dev": true
     },
     "node_modules/@ionic/core": {
-      "version": "7.7.4",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.7.4.tgz",
-      "integrity": "sha512-zThio3ZfbTu+3eM6QBdyeEk5OBc7M0ApFwSlP/G7rrFVcTPm12FNvG9VPD+aN5NwnYy0EsV3hlMkxbawoqjVLw==",
+      "version": "7.7.5",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.7.5.tgz",
+      "integrity": "sha512-/ozFH0Wxh415uER8vc4pcGeRLlh71TfL9gZTHRPAsRT7FnampW8Y45T2fDNNLSmN8UGrN9rj2sXr/QLVq1NbIA==",
       "dependencies": {
         "@stencil/core": "^4.12.2",
         "ionicons": "^7.2.2",
@@ -7330,9 +7330,9 @@
       "dev": true
     },
     "@ionic/core": {
-      "version": "7.7.4",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.7.4.tgz",
-      "integrity": "sha512-zThio3ZfbTu+3eM6QBdyeEk5OBc7M0ApFwSlP/G7rrFVcTPm12FNvG9VPD+aN5NwnYy0EsV3hlMkxbawoqjVLw==",
+      "version": "7.7.5",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.7.5.tgz",
+      "integrity": "sha512-/ozFH0Wxh415uER8vc4pcGeRLlh71TfL9gZTHRPAsRT7FnampW8Y45T2fDNNLSmN8UGrN9rj2sXr/QLVq1NbIA==",
       "requires": {
         "@stencil/core": "^4.12.2",
         "ionicons": "^7.2.2",
diff --git a/packages/angular/package-lock.json b/packages/angular/package-lock.json
index 9005a104e9..8ed662d031 100644
--- a/packages/angular/package-lock.json
+++ b/packages/angular/package-lock.json
@@ -1407,9 +1407,9 @@
       "dev": true
     },
     "node_modules/@ionic/core": {
-      "version": "7.7.4",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.7.4.tgz",
-      "integrity": "sha512-zThio3ZfbTu+3eM6QBdyeEk5OBc7M0ApFwSlP/G7rrFVcTPm12FNvG9VPD+aN5NwnYy0EsV3hlMkxbawoqjVLw==",
+      "version": "7.7.5",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.7.5.tgz",
+      "integrity": "sha512-/ozFH0Wxh415uER8vc4pcGeRLlh71TfL9gZTHRPAsRT7FnampW8Y45T2fDNNLSmN8UGrN9rj2sXr/QLVq1NbIA==",
       "dependencies": {
         "@stencil/core": "^4.12.2",
         "ionicons": "^7.2.2",
@@ -9697,9 +9697,9 @@
       "dev": true
     },
     "@ionic/core": {
-      "version": "7.7.4",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.7.4.tgz",
-      "integrity": "sha512-zThio3ZfbTu+3eM6QBdyeEk5OBc7M0ApFwSlP/G7rrFVcTPm12FNvG9VPD+aN5NwnYy0EsV3hlMkxbawoqjVLw==",
+      "version": "7.7.5",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.7.5.tgz",
+      "integrity": "sha512-/ozFH0Wxh415uER8vc4pcGeRLlh71TfL9gZTHRPAsRT7FnampW8Y45T2fDNNLSmN8UGrN9rj2sXr/QLVq1NbIA==",
       "requires": {
         "@stencil/core": "^4.12.2",
         "ionicons": "^7.2.2",
diff --git a/packages/react-router/package-lock.json b/packages/react-router/package-lock.json
index 8641156ce3..160c9415e0 100644
--- a/packages/react-router/package-lock.json
+++ b/packages/react-router/package-lock.json
@@ -238,9 +238,9 @@
       "dev": true
     },
     "node_modules/@ionic/core": {
-      "version": "7.7.4",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.7.4.tgz",
-      "integrity": "sha512-zThio3ZfbTu+3eM6QBdyeEk5OBc7M0ApFwSlP/G7rrFVcTPm12FNvG9VPD+aN5NwnYy0EsV3hlMkxbawoqjVLw==",
+      "version": "7.7.5",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.7.5.tgz",
+      "integrity": "sha512-/ozFH0Wxh415uER8vc4pcGeRLlh71TfL9gZTHRPAsRT7FnampW8Y45T2fDNNLSmN8UGrN9rj2sXr/QLVq1NbIA==",
       "dependencies": {
         "@stencil/core": "^4.12.2",
         "ionicons": "^7.2.2",
@@ -414,11 +414,11 @@
       }
     },
     "node_modules/@ionic/react": {
-      "version": "7.7.4",
-      "resolved": "https://registry.npmjs.org/@ionic/react/-/react-7.7.4.tgz",
-      "integrity": "sha512-UBNBUjBN1fmCUyH8hetu0/q3F4pSNFVpjhh3Bt3s/bUXy0ksCuGbiYg/hET9QW1ja17ijq0+coqREXEB8lTmrA==",
+      "version": "7.7.5",
+      "resolved": "https://registry.npmjs.org/@ionic/react/-/react-7.7.5.tgz",
+      "integrity": "sha512-XLWJ5yQsAhwbrzRk+QaCM0WFhQAOOuuTcwh7IDkz4UqSphFA8GEhwercYfIZyR1s6XBCvyA1riboklJYne5gRQ==",
       "dependencies": {
-        "@ionic/core": "7.7.4",
+        "@ionic/core": "7.7.5",
         "ionicons": "^7.0.0",
         "tslib": "*"
       },
@@ -667,9 +667,9 @@
       ]
     },
     "node_modules/@stencil/core": {
-      "version": "4.12.5",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.12.5.tgz",
-      "integrity": "sha512-vSyFjY7XSEx0ufa9SebOd437CvnneaTXlCpuGDhjUDxAjGBlu6ie5qHyubobVGBth//aErc6wZPHc6W75Vp3iQ==",
+      "version": "4.12.6",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.12.6.tgz",
+      "integrity": "sha512-15JO2TdaxGVKNdLZb/2TtDa+juj3XGD/V0y/disgdzYYSnajgSh06nwODfdHz9eTUh1Hisz+KIo857I1rCZrfg==",
       "bin": {
         "stencil": "bin/stencil"
       },
@@ -4050,9 +4050,9 @@
       "dev": true
     },
     "@ionic/core": {
-      "version": "7.7.4",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.7.4.tgz",
-      "integrity": "sha512-zThio3ZfbTu+3eM6QBdyeEk5OBc7M0ApFwSlP/G7rrFVcTPm12FNvG9VPD+aN5NwnYy0EsV3hlMkxbawoqjVLw==",
+      "version": "7.7.5",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.7.5.tgz",
+      "integrity": "sha512-/ozFH0Wxh415uER8vc4pcGeRLlh71TfL9gZTHRPAsRT7FnampW8Y45T2fDNNLSmN8UGrN9rj2sXr/QLVq1NbIA==",
       "requires": {
         "@stencil/core": "^4.12.2",
         "ionicons": "^7.2.2",
@@ -4156,11 +4156,11 @@
       "requires": {}
     },
     "@ionic/react": {
-      "version": "7.7.4",
-      "resolved": "https://registry.npmjs.org/@ionic/react/-/react-7.7.4.tgz",
-      "integrity": "sha512-UBNBUjBN1fmCUyH8hetu0/q3F4pSNFVpjhh3Bt3s/bUXy0ksCuGbiYg/hET9QW1ja17ijq0+coqREXEB8lTmrA==",
+      "version": "7.7.5",
+      "resolved": "https://registry.npmjs.org/@ionic/react/-/react-7.7.5.tgz",
+      "integrity": "sha512-XLWJ5yQsAhwbrzRk+QaCM0WFhQAOOuuTcwh7IDkz4UqSphFA8GEhwercYfIZyR1s6XBCvyA1riboklJYne5gRQ==",
       "requires": {
-        "@ionic/core": "7.7.4",
+        "@ionic/core": "7.7.5",
         "ionicons": "^7.0.0",
         "tslib": "*"
       }
@@ -4297,9 +4297,9 @@
       "optional": true
     },
     "@stencil/core": {
-      "version": "4.12.5",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.12.5.tgz",
-      "integrity": "sha512-vSyFjY7XSEx0ufa9SebOd437CvnneaTXlCpuGDhjUDxAjGBlu6ie5qHyubobVGBth//aErc6wZPHc6W75Vp3iQ=="
+      "version": "4.12.6",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.12.6.tgz",
+      "integrity": "sha512-15JO2TdaxGVKNdLZb/2TtDa+juj3XGD/V0y/disgdzYYSnajgSh06nwODfdHz9eTUh1Hisz+KIo857I1rCZrfg=="
     },
     "@types/estree": {
       "version": "1.0.4",
diff --git a/packages/react/package-lock.json b/packages/react/package-lock.json
index 4086cae5b6..8dd58d428e 100644
--- a/packages/react/package-lock.json
+++ b/packages/react/package-lock.json
@@ -811,9 +811,9 @@
       "dev": true
     },
     "node_modules/@ionic/core": {
-      "version": "7.7.4",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.7.4.tgz",
-      "integrity": "sha512-zThio3ZfbTu+3eM6QBdyeEk5OBc7M0ApFwSlP/G7rrFVcTPm12FNvG9VPD+aN5NwnYy0EsV3hlMkxbawoqjVLw==",
+      "version": "7.7.5",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.7.5.tgz",
+      "integrity": "sha512-/ozFH0Wxh415uER8vc4pcGeRLlh71TfL9gZTHRPAsRT7FnampW8Y45T2fDNNLSmN8UGrN9rj2sXr/QLVq1NbIA==",
       "dependencies": {
         "@stencil/core": "^4.12.2",
         "ionicons": "^7.2.2",
@@ -12857,9 +12857,9 @@
       "dev": true
     },
     "@ionic/core": {
-      "version": "7.7.4",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.7.4.tgz",
-      "integrity": "sha512-zThio3ZfbTu+3eM6QBdyeEk5OBc7M0ApFwSlP/G7rrFVcTPm12FNvG9VPD+aN5NwnYy0EsV3hlMkxbawoqjVLw==",
+      "version": "7.7.5",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.7.5.tgz",
+      "integrity": "sha512-/ozFH0Wxh415uER8vc4pcGeRLlh71TfL9gZTHRPAsRT7FnampW8Y45T2fDNNLSmN8UGrN9rj2sXr/QLVq1NbIA==",
       "requires": {
         "@stencil/core": "^4.12.2",
         "ionicons": "^7.2.2",
diff --git a/packages/vue-router/package-lock.json b/packages/vue-router/package-lock.json
index e8edda35cb..271d52ad35 100644
--- a/packages/vue-router/package-lock.json
+++ b/packages/vue-router/package-lock.json
@@ -661,9 +661,9 @@
       "dev": true
     },
     "node_modules/@ionic/core": {
-      "version": "7.7.4",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.7.4.tgz",
-      "integrity": "sha512-zThio3ZfbTu+3eM6QBdyeEk5OBc7M0ApFwSlP/G7rrFVcTPm12FNvG9VPD+aN5NwnYy0EsV3hlMkxbawoqjVLw==",
+      "version": "7.7.5",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.7.5.tgz",
+      "integrity": "sha512-/ozFH0Wxh415uER8vc4pcGeRLlh71TfL9gZTHRPAsRT7FnampW8Y45T2fDNNLSmN8UGrN9rj2sXr/QLVq1NbIA==",
       "dependencies": {
         "@stencil/core": "^4.12.2",
         "ionicons": "^7.2.2",
@@ -852,11 +852,11 @@
       }
     },
     "node_modules/@ionic/vue": {
-      "version": "7.7.4",
-      "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-7.7.4.tgz",
-      "integrity": "sha512-THrMMoQHU2Ym+JaTj/dm/FV8FyB7ZXmc6kierZ/+BSvOncIekla8Afe6Qk2c2U1afOPos0MBINf9xXkwxnHfIw==",
+      "version": "7.7.5",
+      "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-7.7.5.tgz",
+      "integrity": "sha512-Ilm11iOQRnhv4ei7Wj7cxP44L2orR2RnNOTTHGD9FE6o24k7VInP2lMRVvewjKXAbBb21pZE3AyMaJr5JMubFA==",
       "dependencies": {
-        "@ionic/core": "7.7.4",
+        "@ionic/core": "7.7.5",
         "ionicons": "^7.0.0"
       }
     },
@@ -1508,9 +1508,9 @@
       }
     },
     "node_modules/@stencil/core": {
-      "version": "4.12.5",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.12.5.tgz",
-      "integrity": "sha512-vSyFjY7XSEx0ufa9SebOd437CvnneaTXlCpuGDhjUDxAjGBlu6ie5qHyubobVGBth//aErc6wZPHc6W75Vp3iQ==",
+      "version": "4.12.6",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.12.6.tgz",
+      "integrity": "sha512-15JO2TdaxGVKNdLZb/2TtDa+juj3XGD/V0y/disgdzYYSnajgSh06nwODfdHz9eTUh1Hisz+KIo857I1rCZrfg==",
       "bin": {
         "stencil": "bin/stencil"
       },
@@ -7878,9 +7878,9 @@
       "dev": true
     },
     "@ionic/core": {
-      "version": "7.7.4",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.7.4.tgz",
-      "integrity": "sha512-zThio3ZfbTu+3eM6QBdyeEk5OBc7M0ApFwSlP/G7rrFVcTPm12FNvG9VPD+aN5NwnYy0EsV3hlMkxbawoqjVLw==",
+      "version": "7.7.5",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.7.5.tgz",
+      "integrity": "sha512-/ozFH0Wxh415uER8vc4pcGeRLlh71TfL9gZTHRPAsRT7FnampW8Y45T2fDNNLSmN8UGrN9rj2sXr/QLVq1NbIA==",
       "requires": {
         "@stencil/core": "^4.12.2",
         "ionicons": "^7.2.2",
@@ -7993,11 +7993,11 @@
       "requires": {}
     },
     "@ionic/vue": {
-      "version": "7.7.4",
-      "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-7.7.4.tgz",
-      "integrity": "sha512-THrMMoQHU2Ym+JaTj/dm/FV8FyB7ZXmc6kierZ/+BSvOncIekla8Afe6Qk2c2U1afOPos0MBINf9xXkwxnHfIw==",
+      "version": "7.7.5",
+      "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-7.7.5.tgz",
+      "integrity": "sha512-Ilm11iOQRnhv4ei7Wj7cxP44L2orR2RnNOTTHGD9FE6o24k7VInP2lMRVvewjKXAbBb21pZE3AyMaJr5JMubFA==",
       "requires": {
-        "@ionic/core": "7.7.4",
+        "@ionic/core": "7.7.5",
         "ionicons": "^7.0.0"
       }
     },
@@ -8461,9 +8461,9 @@
       }
     },
     "@stencil/core": {
-      "version": "4.12.5",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.12.5.tgz",
-      "integrity": "sha512-vSyFjY7XSEx0ufa9SebOd437CvnneaTXlCpuGDhjUDxAjGBlu6ie5qHyubobVGBth//aErc6wZPHc6W75Vp3iQ=="
+      "version": "4.12.6",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.12.6.tgz",
+      "integrity": "sha512-15JO2TdaxGVKNdLZb/2TtDa+juj3XGD/V0y/disgdzYYSnajgSh06nwODfdHz9eTUh1Hisz+KIo857I1rCZrfg=="
     },
     "@tootallnate/once": {
       "version": "2.0.0",
diff --git a/packages/vue/package-lock.json b/packages/vue/package-lock.json
index 4dd80ee5ae..315a13b4e0 100644
--- a/packages/vue/package-lock.json
+++ b/packages/vue/package-lock.json
@@ -208,9 +208,9 @@
       "dev": true
     },
     "node_modules/@ionic/core": {
-      "version": "7.7.4",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.7.4.tgz",
-      "integrity": "sha512-zThio3ZfbTu+3eM6QBdyeEk5OBc7M0ApFwSlP/G7rrFVcTPm12FNvG9VPD+aN5NwnYy0EsV3hlMkxbawoqjVLw==",
+      "version": "7.7.5",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.7.5.tgz",
+      "integrity": "sha512-/ozFH0Wxh415uER8vc4pcGeRLlh71TfL9gZTHRPAsRT7FnampW8Y45T2fDNNLSmN8UGrN9rj2sXr/QLVq1NbIA==",
       "dependencies": {
         "@stencil/core": "^4.12.2",
         "ionicons": "^7.2.2",
@@ -3959,9 +3959,9 @@
       "dev": true
     },
     "@ionic/core": {
-      "version": "7.7.4",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.7.4.tgz",
-      "integrity": "sha512-zThio3ZfbTu+3eM6QBdyeEk5OBc7M0ApFwSlP/G7rrFVcTPm12FNvG9VPD+aN5NwnYy0EsV3hlMkxbawoqjVLw==",
+      "version": "7.7.5",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.7.5.tgz",
+      "integrity": "sha512-/ozFH0Wxh415uER8vc4pcGeRLlh71TfL9gZTHRPAsRT7FnampW8Y45T2fDNNLSmN8UGrN9rj2sXr/QLVq1NbIA==",
       "requires": {
         "@stencil/core": "^4.12.2",
         "ionicons": "^7.2.2",

From 400013d6cbd05b1e84bef4352612a9da369971b7 Mon Sep 17 00:00:00 2001
From: ionitron <hi@ionicframework.com>
Date: Wed, 13 Mar 2024 13:47:29 +0000
Subject: [PATCH 7/8] v7.8.0

---
 CHANGELOG.md                              | 12 ++++++++++++
 core/CHANGELOG.md                         | 12 ++++++++++++
 core/package-lock.json                    |  4 ++--
 core/package.json                         |  2 +-
 docs/CHANGELOG.md                         |  8 ++++++++
 docs/package-lock.json                    |  4 ++--
 docs/package.json                         |  2 +-
 lerna.json                                |  2 +-
 packages/angular-server/CHANGELOG.md      |  8 ++++++++
 packages/angular-server/package-lock.json |  6 +++---
 packages/angular-server/package.json      |  4 ++--
 packages/angular/CHANGELOG.md             | 12 ++++++++++++
 packages/angular/package-lock.json        |  6 +++---
 packages/angular/package.json             |  4 ++--
 packages/react-router/CHANGELOG.md        |  8 ++++++++
 packages/react-router/package-lock.json   |  6 +++---
 packages/react-router/package.json        |  4 ++--
 packages/react/CHANGELOG.md               |  8 ++++++++
 packages/react/package-lock.json          |  6 +++---
 packages/react/package.json               |  4 ++--
 packages/vue-router/CHANGELOG.md          |  8 ++++++++
 packages/vue-router/package-lock.json     |  6 +++---
 packages/vue-router/package.json          |  4 ++--
 packages/vue/CHANGELOG.md                 | 12 ++++++++++++
 packages/vue/package-lock.json            |  6 +++---
 packages/vue/package.json                 |  4 ++--
 26 files changed, 125 insertions(+), 37 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 9ec911b1c9..24c64ca781 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [7.8.0](https://github.com/ionic-team/ionic-framework/compare/v7.7.5...v7.8.0) (2024-03-13)
+
+
+### Features
+
+* **datetime:** formatOptions property for Datetime ([#29065](https://github.com/ionic-team/ionic-framework/issues/29065)) ([7cdbc1b](https://github.com/ionic-team/ionic-framework/commit/7cdbc1b5ad004e17a7c51363653e0e67f50e6860))
+* **searchbar:** autocapitalize, dir, lang, maxlength, and minlength are inherited to native input ([#29098](https://github.com/ionic-team/ionic-framework/issues/29098)) ([a0a77f7](https://github.com/ionic-team/ionic-framework/commit/a0a77f799df0732d9f7182f15866035a3ce5a1eb)), closes [#27606](https://github.com/ionic-team/ionic-framework/issues/27606)
+
+
+
+
+
 ## [7.7.5](https://github.com/ionic-team/ionic-framework/compare/v7.7.4...v7.7.5) (2024-03-13)
 
 
diff --git a/core/CHANGELOG.md b/core/CHANGELOG.md
index 7caaac91fc..6333207bfa 100644
--- a/core/CHANGELOG.md
+++ b/core/CHANGELOG.md
@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [7.8.0](https://github.com/ionic-team/ionic-framework/compare/v7.7.5...v7.8.0) (2024-03-13)
+
+
+### Features
+
+* **datetime:** formatOptions property for Datetime ([#29065](https://github.com/ionic-team/ionic-framework/issues/29065)) ([7cdbc1b](https://github.com/ionic-team/ionic-framework/commit/7cdbc1b5ad004e17a7c51363653e0e67f50e6860))
+* **searchbar:** autocapitalize, dir, lang, maxlength, and minlength are inherited to native input ([#29098](https://github.com/ionic-team/ionic-framework/issues/29098)) ([a0a77f7](https://github.com/ionic-team/ionic-framework/commit/a0a77f799df0732d9f7182f15866035a3ce5a1eb)), closes [#27606](https://github.com/ionic-team/ionic-framework/issues/27606)
+
+
+
+
+
 ## [7.7.5](https://github.com/ionic-team/ionic-framework/compare/v7.7.4...v7.7.5) (2024-03-13)
 
 
diff --git a/core/package-lock.json b/core/package-lock.json
index 30741bed7f..dfe8884fd2 100644
--- a/core/package-lock.json
+++ b/core/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@ionic/core",
-  "version": "7.7.5",
+  "version": "7.8.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/core",
-      "version": "7.7.5",
+      "version": "7.8.0",
       "license": "MIT",
       "dependencies": {
         "@stencil/core": "^4.12.2",
diff --git a/core/package.json b/core/package.json
index bb58562171..b8af89e593 100644
--- a/core/package.json
+++ b/core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ionic/core",
-  "version": "7.7.5",
+  "version": "7.8.0",
   "description": "Base components for Ionic",
   "keywords": [
     "ionic",
diff --git a/docs/CHANGELOG.md b/docs/CHANGELOG.md
index 8307ac9f32..e2f4e2ee72 100644
--- a/docs/CHANGELOG.md
+++ b/docs/CHANGELOG.md
@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [7.8.0](https://github.com/ionic-team/ionic-framework/compare/v7.7.5...v7.8.0) (2024-03-13)
+
+**Note:** Version bump only for package @ionic/docs
+
+
+
+
+
 ## [7.7.5](https://github.com/ionic-team/ionic-framework/compare/v7.7.4...v7.7.5) (2024-03-13)
 
 **Note:** Version bump only for package @ionic/docs
diff --git a/docs/package-lock.json b/docs/package-lock.json
index 245545f844..499e198463 100644
--- a/docs/package-lock.json
+++ b/docs/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@ionic/docs",
-  "version": "7.7.5",
+  "version": "7.8.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/docs",
-      "version": "7.7.5",
+      "version": "7.8.0",
       "license": "MIT"
     }
   }
diff --git a/docs/package.json b/docs/package.json
index f3b0c7aaeb..2e36d5d309 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ionic/docs",
-  "version": "7.7.5",
+  "version": "7.8.0",
   "description": "Pre-packaged API documentation for the Ionic docs.",
   "main": "core.json",
   "types": "core.d.ts",
diff --git a/lerna.json b/lerna.json
index f528118e91..77bf87ff96 100644
--- a/lerna.json
+++ b/lerna.json
@@ -4,5 +4,5 @@
     "docs",
     "packages/*"
   ],
-  "version": "7.7.5"
+  "version": "7.8.0"
 }
diff --git a/packages/angular-server/CHANGELOG.md b/packages/angular-server/CHANGELOG.md
index c8a5f1025a..17db42772a 100644
--- a/packages/angular-server/CHANGELOG.md
+++ b/packages/angular-server/CHANGELOG.md
@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [7.8.0](https://github.com/ionic-team/ionic-framework/compare/v7.7.5...v7.8.0) (2024-03-13)
+
+**Note:** Version bump only for package @ionic/angular-server
+
+
+
+
+
 ## [7.7.5](https://github.com/ionic-team/ionic-framework/compare/v7.7.4...v7.7.5) (2024-03-13)
 
 **Note:** Version bump only for package @ionic/angular-server
diff --git a/packages/angular-server/package-lock.json b/packages/angular-server/package-lock.json
index 7bbe44948e..37a09a485b 100644
--- a/packages/angular-server/package-lock.json
+++ b/packages/angular-server/package-lock.json
@@ -1,15 +1,15 @@
 {
   "name": "@ionic/angular-server",
-  "version": "7.7.5",
+  "version": "7.8.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/angular-server",
-      "version": "7.7.5",
+      "version": "7.8.0",
       "license": "MIT",
       "dependencies": {
-        "@ionic/core": "^7.7.5"
+        "@ionic/core": "^7.8.0"
       },
       "devDependencies": {
         "@angular-eslint/eslint-plugin": "^14.0.0",
diff --git a/packages/angular-server/package.json b/packages/angular-server/package.json
index 792d1a4b99..a8f4a8e83f 100644
--- a/packages/angular-server/package.json
+++ b/packages/angular-server/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ionic/angular-server",
-  "version": "7.7.5",
+  "version": "7.8.0",
   "description": "Angular SSR Module for Ionic",
   "keywords": [
     "ionic",
@@ -62,6 +62,6 @@
   },
   "prettier": "@ionic/prettier-config",
   "dependencies": {
-    "@ionic/core": "^7.7.5"
+    "@ionic/core": "^7.8.0"
   }
 }
diff --git a/packages/angular/CHANGELOG.md b/packages/angular/CHANGELOG.md
index a4c116c8cd..3849b1a652 100644
--- a/packages/angular/CHANGELOG.md
+++ b/packages/angular/CHANGELOG.md
@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [7.8.0](https://github.com/ionic-team/ionic-framework/compare/v7.7.5...v7.8.0) (2024-03-13)
+
+
+### Features
+
+* **datetime:** formatOptions property for Datetime ([#29065](https://github.com/ionic-team/ionic-framework/issues/29065)) ([7cdbc1b](https://github.com/ionic-team/ionic-framework/commit/7cdbc1b5ad004e17a7c51363653e0e67f50e6860))
+* **searchbar:** autocapitalize, dir, lang, maxlength, and minlength are inherited to native input ([#29098](https://github.com/ionic-team/ionic-framework/issues/29098)) ([a0a77f7](https://github.com/ionic-team/ionic-framework/commit/a0a77f799df0732d9f7182f15866035a3ce5a1eb)), closes [#27606](https://github.com/ionic-team/ionic-framework/issues/27606)
+
+
+
+
+
 ## [7.7.5](https://github.com/ionic-team/ionic-framework/compare/v7.7.4...v7.7.5) (2024-03-13)
 
 
diff --git a/packages/angular/package-lock.json b/packages/angular/package-lock.json
index 8ed662d031..30e8291c60 100644
--- a/packages/angular/package-lock.json
+++ b/packages/angular/package-lock.json
@@ -1,15 +1,15 @@
 {
   "name": "@ionic/angular",
-  "version": "7.7.5",
+  "version": "7.8.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/angular",
-      "version": "7.7.5",
+      "version": "7.8.0",
       "license": "MIT",
       "dependencies": {
-        "@ionic/core": "^7.7.5",
+        "@ionic/core": "^7.8.0",
         "ionicons": "^7.0.0",
         "jsonc-parser": "^3.0.0",
         "tslib": "^2.3.0"
diff --git a/packages/angular/package.json b/packages/angular/package.json
index 0c7c0ca5fe..6da3f09d96 100644
--- a/packages/angular/package.json
+++ b/packages/angular/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ionic/angular",
-  "version": "7.7.5",
+  "version": "7.8.0",
   "description": "Angular specific wrappers for @ionic/core",
   "keywords": [
     "ionic",
@@ -47,7 +47,7 @@
     }
   },
   "dependencies": {
-    "@ionic/core": "^7.7.5",
+    "@ionic/core": "^7.8.0",
     "ionicons": "^7.0.0",
     "jsonc-parser": "^3.0.0",
     "tslib": "^2.3.0"
diff --git a/packages/react-router/CHANGELOG.md b/packages/react-router/CHANGELOG.md
index 88b223faf8..6a5277f491 100644
--- a/packages/react-router/CHANGELOG.md
+++ b/packages/react-router/CHANGELOG.md
@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [7.8.0](https://github.com/ionic-team/ionic-framework/compare/v7.7.5...v7.8.0) (2024-03-13)
+
+**Note:** Version bump only for package @ionic/react-router
+
+
+
+
+
 ## [7.7.5](https://github.com/ionic-team/ionic-framework/compare/v7.7.4...v7.7.5) (2024-03-13)
 
 **Note:** Version bump only for package @ionic/react-router
diff --git a/packages/react-router/package-lock.json b/packages/react-router/package-lock.json
index 160c9415e0..ad423f29b7 100644
--- a/packages/react-router/package-lock.json
+++ b/packages/react-router/package-lock.json
@@ -1,15 +1,15 @@
 {
   "name": "@ionic/react-router",
-  "version": "7.7.5",
+  "version": "7.8.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/react-router",
-      "version": "7.7.5",
+      "version": "7.8.0",
       "license": "MIT",
       "dependencies": {
-        "@ionic/react": "^7.7.5",
+        "@ionic/react": "^7.8.0",
         "tslib": "*"
       },
       "devDependencies": {
diff --git a/packages/react-router/package.json b/packages/react-router/package.json
index fe529b1a43..25f79a4556 100644
--- a/packages/react-router/package.json
+++ b/packages/react-router/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ionic/react-router",
-  "version": "7.7.5",
+  "version": "7.8.0",
   "description": "React Router wrapper for @ionic/react",
   "keywords": [
     "ionic",
@@ -36,7 +36,7 @@
     "dist/"
   ],
   "dependencies": {
-    "@ionic/react": "^7.7.5",
+    "@ionic/react": "^7.8.0",
     "tslib": "*"
   },
   "peerDependencies": {
diff --git a/packages/react/CHANGELOG.md b/packages/react/CHANGELOG.md
index 3196bd673f..03b2d56923 100644
--- a/packages/react/CHANGELOG.md
+++ b/packages/react/CHANGELOG.md
@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [7.8.0](https://github.com/ionic-team/ionic-framework/compare/v7.7.5...v7.8.0) (2024-03-13)
+
+**Note:** Version bump only for package @ionic/react
+
+
+
+
+
 ## [7.7.5](https://github.com/ionic-team/ionic-framework/compare/v7.7.4...v7.7.5) (2024-03-13)
 
 **Note:** Version bump only for package @ionic/react
diff --git a/packages/react/package-lock.json b/packages/react/package-lock.json
index 8dd58d428e..a171f91780 100644
--- a/packages/react/package-lock.json
+++ b/packages/react/package-lock.json
@@ -1,15 +1,15 @@
 {
   "name": "@ionic/react",
-  "version": "7.7.5",
+  "version": "7.8.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/react",
-      "version": "7.7.5",
+      "version": "7.8.0",
       "license": "MIT",
       "dependencies": {
-        "@ionic/core": "^7.7.5",
+        "@ionic/core": "^7.8.0",
         "ionicons": "^7.0.0",
         "tslib": "*"
       },
diff --git a/packages/react/package.json b/packages/react/package.json
index 2175f1ad82..3a50dd3e2c 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ionic/react",
-  "version": "7.7.5",
+  "version": "7.8.0",
   "description": "React specific wrapper for @ionic/core",
   "keywords": [
     "ionic",
@@ -39,7 +39,7 @@
     "css/"
   ],
   "dependencies": {
-    "@ionic/core": "^7.7.5",
+    "@ionic/core": "^7.8.0",
     "ionicons": "^7.0.0",
     "tslib": "*"
   },
diff --git a/packages/vue-router/CHANGELOG.md b/packages/vue-router/CHANGELOG.md
index 3001908473..522fccf6b2 100644
--- a/packages/vue-router/CHANGELOG.md
+++ b/packages/vue-router/CHANGELOG.md
@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [7.8.0](https://github.com/ionic-team/ionic-framework/compare/v7.7.5...v7.8.0) (2024-03-13)
+
+**Note:** Version bump only for package @ionic/vue-router
+
+
+
+
+
 ## [7.7.5](https://github.com/ionic-team/ionic-framework/compare/v7.7.4...v7.7.5) (2024-03-13)
 
 **Note:** Version bump only for package @ionic/vue-router
diff --git a/packages/vue-router/package-lock.json b/packages/vue-router/package-lock.json
index 271d52ad35..22dec54bdd 100644
--- a/packages/vue-router/package-lock.json
+++ b/packages/vue-router/package-lock.json
@@ -1,15 +1,15 @@
 {
   "name": "@ionic/vue-router",
-  "version": "7.7.5",
+  "version": "7.8.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/vue-router",
-      "version": "7.7.5",
+      "version": "7.8.0",
       "license": "MIT",
       "dependencies": {
-        "@ionic/vue": "^7.7.5"
+        "@ionic/vue": "^7.8.0"
       },
       "devDependencies": {
         "@ionic/eslint-config": "^0.3.0",
diff --git a/packages/vue-router/package.json b/packages/vue-router/package.json
index 9640b8d052..a0c22a2a1e 100644
--- a/packages/vue-router/package.json
+++ b/packages/vue-router/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ionic/vue-router",
-  "version": "7.7.5",
+  "version": "7.8.0",
   "description": "Vue Router integration for @ionic/vue",
   "scripts": {
     "test.spec": "jest",
@@ -44,7 +44,7 @@
   },
   "homepage": "https://github.com/ionic-team/ionic#readme",
   "dependencies": {
-    "@ionic/vue": "^7.7.5"
+    "@ionic/vue": "^7.8.0"
   },
   "devDependencies": {
     "@ionic/eslint-config": "^0.3.0",
diff --git a/packages/vue/CHANGELOG.md b/packages/vue/CHANGELOG.md
index 68c9e79237..88d0ad79c9 100644
--- a/packages/vue/CHANGELOG.md
+++ b/packages/vue/CHANGELOG.md
@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [7.8.0](https://github.com/ionic-team/ionic-framework/compare/v7.7.5...v7.8.0) (2024-03-13)
+
+
+### Features
+
+* **datetime:** formatOptions property for Datetime ([#29065](https://github.com/ionic-team/ionic-framework/issues/29065)) ([7cdbc1b](https://github.com/ionic-team/ionic-framework/commit/7cdbc1b5ad004e17a7c51363653e0e67f50e6860))
+* **searchbar:** autocapitalize, dir, lang, maxlength, and minlength are inherited to native input ([#29098](https://github.com/ionic-team/ionic-framework/issues/29098)) ([a0a77f7](https://github.com/ionic-team/ionic-framework/commit/a0a77f799df0732d9f7182f15866035a3ce5a1eb)), closes [#27606](https://github.com/ionic-team/ionic-framework/issues/27606)
+
+
+
+
+
 ## [7.7.5](https://github.com/ionic-team/ionic-framework/compare/v7.7.4...v7.7.5) (2024-03-13)
 
 **Note:** Version bump only for package @ionic/vue
diff --git a/packages/vue/package-lock.json b/packages/vue/package-lock.json
index 315a13b4e0..8876d00a6b 100644
--- a/packages/vue/package-lock.json
+++ b/packages/vue/package-lock.json
@@ -1,15 +1,15 @@
 {
   "name": "@ionic/vue",
-  "version": "7.7.5",
+  "version": "7.8.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/vue",
-      "version": "7.7.5",
+      "version": "7.8.0",
       "license": "MIT",
       "dependencies": {
-        "@ionic/core": "^7.7.5",
+        "@ionic/core": "^7.8.0",
         "ionicons": "^7.0.0"
       },
       "devDependencies": {
diff --git a/packages/vue/package.json b/packages/vue/package.json
index b1a0412ccc..6262b49836 100644
--- a/packages/vue/package.json
+++ b/packages/vue/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ionic/vue",
-  "version": "7.7.5",
+  "version": "7.8.0",
   "description": "Vue specific wrapper for @ionic/core",
   "scripts": {
     "eslint": "eslint src",
@@ -66,7 +66,7 @@
     "vue-router": "^4.0.16"
   },
   "dependencies": {
-    "@ionic/core": "^7.7.5",
+    "@ionic/core": "^7.8.0",
     "ionicons": "^7.0.0"
   },
   "vetur": {

From 7be6d9f72d31b8c4a0e3be27da282984d52fd990 Mon Sep 17 00:00:00 2001
From: ionitron <hi@ionicframework.com>
Date: Wed, 13 Mar 2024 13:48:18 +0000
Subject: [PATCH 8/8] chore(): update package lock files

---
 packages/angular-server/package-lock.json | 12 +++++-----
 packages/angular/package-lock.json        | 12 +++++-----
 packages/react-router/package-lock.json   | 28 +++++++++++------------
 packages/react/package-lock.json          | 12 +++++-----
 packages/vue-router/package-lock.json     | 28 +++++++++++------------
 packages/vue/package-lock.json            | 12 +++++-----
 6 files changed, 52 insertions(+), 52 deletions(-)

diff --git a/packages/angular-server/package-lock.json b/packages/angular-server/package-lock.json
index 37a09a485b..0394453e53 100644
--- a/packages/angular-server/package-lock.json
+++ b/packages/angular-server/package-lock.json
@@ -1060,9 +1060,9 @@
       "dev": true
     },
     "node_modules/@ionic/core": {
-      "version": "7.7.5",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.7.5.tgz",
-      "integrity": "sha512-/ozFH0Wxh415uER8vc4pcGeRLlh71TfL9gZTHRPAsRT7FnampW8Y45T2fDNNLSmN8UGrN9rj2sXr/QLVq1NbIA==",
+      "version": "7.8.0",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.8.0.tgz",
+      "integrity": "sha512-rogQw6lWH367E5XQnovbAIB4pT1YmuTz7OvyQm0cp4pO2/64faKyTGteSxc99stG01CoARW+pjJN1K09hfKFPw==",
       "dependencies": {
         "@stencil/core": "^4.12.2",
         "ionicons": "^7.2.2",
@@ -7330,9 +7330,9 @@
       "dev": true
     },
     "@ionic/core": {
-      "version": "7.7.5",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.7.5.tgz",
-      "integrity": "sha512-/ozFH0Wxh415uER8vc4pcGeRLlh71TfL9gZTHRPAsRT7FnampW8Y45T2fDNNLSmN8UGrN9rj2sXr/QLVq1NbIA==",
+      "version": "7.8.0",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.8.0.tgz",
+      "integrity": "sha512-rogQw6lWH367E5XQnovbAIB4pT1YmuTz7OvyQm0cp4pO2/64faKyTGteSxc99stG01CoARW+pjJN1K09hfKFPw==",
       "requires": {
         "@stencil/core": "^4.12.2",
         "ionicons": "^7.2.2",
diff --git a/packages/angular/package-lock.json b/packages/angular/package-lock.json
index 30e8291c60..76d3820eba 100644
--- a/packages/angular/package-lock.json
+++ b/packages/angular/package-lock.json
@@ -1407,9 +1407,9 @@
       "dev": true
     },
     "node_modules/@ionic/core": {
-      "version": "7.7.5",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.7.5.tgz",
-      "integrity": "sha512-/ozFH0Wxh415uER8vc4pcGeRLlh71TfL9gZTHRPAsRT7FnampW8Y45T2fDNNLSmN8UGrN9rj2sXr/QLVq1NbIA==",
+      "version": "7.8.0",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.8.0.tgz",
+      "integrity": "sha512-rogQw6lWH367E5XQnovbAIB4pT1YmuTz7OvyQm0cp4pO2/64faKyTGteSxc99stG01CoARW+pjJN1K09hfKFPw==",
       "dependencies": {
         "@stencil/core": "^4.12.2",
         "ionicons": "^7.2.2",
@@ -9697,9 +9697,9 @@
       "dev": true
     },
     "@ionic/core": {
-      "version": "7.7.5",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.7.5.tgz",
-      "integrity": "sha512-/ozFH0Wxh415uER8vc4pcGeRLlh71TfL9gZTHRPAsRT7FnampW8Y45T2fDNNLSmN8UGrN9rj2sXr/QLVq1NbIA==",
+      "version": "7.8.0",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.8.0.tgz",
+      "integrity": "sha512-rogQw6lWH367E5XQnovbAIB4pT1YmuTz7OvyQm0cp4pO2/64faKyTGteSxc99stG01CoARW+pjJN1K09hfKFPw==",
       "requires": {
         "@stencil/core": "^4.12.2",
         "ionicons": "^7.2.2",
diff --git a/packages/react-router/package-lock.json b/packages/react-router/package-lock.json
index ad423f29b7..64ab0ba574 100644
--- a/packages/react-router/package-lock.json
+++ b/packages/react-router/package-lock.json
@@ -238,9 +238,9 @@
       "dev": true
     },
     "node_modules/@ionic/core": {
-      "version": "7.7.5",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.7.5.tgz",
-      "integrity": "sha512-/ozFH0Wxh415uER8vc4pcGeRLlh71TfL9gZTHRPAsRT7FnampW8Y45T2fDNNLSmN8UGrN9rj2sXr/QLVq1NbIA==",
+      "version": "7.8.0",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.8.0.tgz",
+      "integrity": "sha512-rogQw6lWH367E5XQnovbAIB4pT1YmuTz7OvyQm0cp4pO2/64faKyTGteSxc99stG01CoARW+pjJN1K09hfKFPw==",
       "dependencies": {
         "@stencil/core": "^4.12.2",
         "ionicons": "^7.2.2",
@@ -414,11 +414,11 @@
       }
     },
     "node_modules/@ionic/react": {
-      "version": "7.7.5",
-      "resolved": "https://registry.npmjs.org/@ionic/react/-/react-7.7.5.tgz",
-      "integrity": "sha512-XLWJ5yQsAhwbrzRk+QaCM0WFhQAOOuuTcwh7IDkz4UqSphFA8GEhwercYfIZyR1s6XBCvyA1riboklJYne5gRQ==",
+      "version": "7.8.0",
+      "resolved": "https://registry.npmjs.org/@ionic/react/-/react-7.8.0.tgz",
+      "integrity": "sha512-OpP3WWnbD0cdP98afJk/Z6DmXk4t1ZBOLzZvBaNlRUMbnkTZOjt/PufCK+qvaPVGc2OKfKhv+XRckbx9uX5Few==",
       "dependencies": {
-        "@ionic/core": "7.7.5",
+        "@ionic/core": "7.8.0",
         "ionicons": "^7.0.0",
         "tslib": "*"
       },
@@ -4050,9 +4050,9 @@
       "dev": true
     },
     "@ionic/core": {
-      "version": "7.7.5",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.7.5.tgz",
-      "integrity": "sha512-/ozFH0Wxh415uER8vc4pcGeRLlh71TfL9gZTHRPAsRT7FnampW8Y45T2fDNNLSmN8UGrN9rj2sXr/QLVq1NbIA==",
+      "version": "7.8.0",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.8.0.tgz",
+      "integrity": "sha512-rogQw6lWH367E5XQnovbAIB4pT1YmuTz7OvyQm0cp4pO2/64faKyTGteSxc99stG01CoARW+pjJN1K09hfKFPw==",
       "requires": {
         "@stencil/core": "^4.12.2",
         "ionicons": "^7.2.2",
@@ -4156,11 +4156,11 @@
       "requires": {}
     },
     "@ionic/react": {
-      "version": "7.7.5",
-      "resolved": "https://registry.npmjs.org/@ionic/react/-/react-7.7.5.tgz",
-      "integrity": "sha512-XLWJ5yQsAhwbrzRk+QaCM0WFhQAOOuuTcwh7IDkz4UqSphFA8GEhwercYfIZyR1s6XBCvyA1riboklJYne5gRQ==",
+      "version": "7.8.0",
+      "resolved": "https://registry.npmjs.org/@ionic/react/-/react-7.8.0.tgz",
+      "integrity": "sha512-OpP3WWnbD0cdP98afJk/Z6DmXk4t1ZBOLzZvBaNlRUMbnkTZOjt/PufCK+qvaPVGc2OKfKhv+XRckbx9uX5Few==",
       "requires": {
-        "@ionic/core": "7.7.5",
+        "@ionic/core": "7.8.0",
         "ionicons": "^7.0.0",
         "tslib": "*"
       }
diff --git a/packages/react/package-lock.json b/packages/react/package-lock.json
index a171f91780..492694e883 100644
--- a/packages/react/package-lock.json
+++ b/packages/react/package-lock.json
@@ -811,9 +811,9 @@
       "dev": true
     },
     "node_modules/@ionic/core": {
-      "version": "7.7.5",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.7.5.tgz",
-      "integrity": "sha512-/ozFH0Wxh415uER8vc4pcGeRLlh71TfL9gZTHRPAsRT7FnampW8Y45T2fDNNLSmN8UGrN9rj2sXr/QLVq1NbIA==",
+      "version": "7.8.0",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.8.0.tgz",
+      "integrity": "sha512-rogQw6lWH367E5XQnovbAIB4pT1YmuTz7OvyQm0cp4pO2/64faKyTGteSxc99stG01CoARW+pjJN1K09hfKFPw==",
       "dependencies": {
         "@stencil/core": "^4.12.2",
         "ionicons": "^7.2.2",
@@ -12857,9 +12857,9 @@
       "dev": true
     },
     "@ionic/core": {
-      "version": "7.7.5",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.7.5.tgz",
-      "integrity": "sha512-/ozFH0Wxh415uER8vc4pcGeRLlh71TfL9gZTHRPAsRT7FnampW8Y45T2fDNNLSmN8UGrN9rj2sXr/QLVq1NbIA==",
+      "version": "7.8.0",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.8.0.tgz",
+      "integrity": "sha512-rogQw6lWH367E5XQnovbAIB4pT1YmuTz7OvyQm0cp4pO2/64faKyTGteSxc99stG01CoARW+pjJN1K09hfKFPw==",
       "requires": {
         "@stencil/core": "^4.12.2",
         "ionicons": "^7.2.2",
diff --git a/packages/vue-router/package-lock.json b/packages/vue-router/package-lock.json
index 22dec54bdd..ea8b3477ff 100644
--- a/packages/vue-router/package-lock.json
+++ b/packages/vue-router/package-lock.json
@@ -661,9 +661,9 @@
       "dev": true
     },
     "node_modules/@ionic/core": {
-      "version": "7.7.5",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.7.5.tgz",
-      "integrity": "sha512-/ozFH0Wxh415uER8vc4pcGeRLlh71TfL9gZTHRPAsRT7FnampW8Y45T2fDNNLSmN8UGrN9rj2sXr/QLVq1NbIA==",
+      "version": "7.8.0",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.8.0.tgz",
+      "integrity": "sha512-rogQw6lWH367E5XQnovbAIB4pT1YmuTz7OvyQm0cp4pO2/64faKyTGteSxc99stG01CoARW+pjJN1K09hfKFPw==",
       "dependencies": {
         "@stencil/core": "^4.12.2",
         "ionicons": "^7.2.2",
@@ -852,11 +852,11 @@
       }
     },
     "node_modules/@ionic/vue": {
-      "version": "7.7.5",
-      "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-7.7.5.tgz",
-      "integrity": "sha512-Ilm11iOQRnhv4ei7Wj7cxP44L2orR2RnNOTTHGD9FE6o24k7VInP2lMRVvewjKXAbBb21pZE3AyMaJr5JMubFA==",
+      "version": "7.8.0",
+      "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-7.8.0.tgz",
+      "integrity": "sha512-IXOUO9SQHXU3Ec/9u6u2JPNcu9VL8jamvM+elzBam7e0GDSQ56cyYDRnptROBdfBYop2EGiNJvzjWxAuZnM6kw==",
       "dependencies": {
-        "@ionic/core": "7.7.5",
+        "@ionic/core": "7.8.0",
         "ionicons": "^7.0.0"
       }
     },
@@ -7878,9 +7878,9 @@
       "dev": true
     },
     "@ionic/core": {
-      "version": "7.7.5",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.7.5.tgz",
-      "integrity": "sha512-/ozFH0Wxh415uER8vc4pcGeRLlh71TfL9gZTHRPAsRT7FnampW8Y45T2fDNNLSmN8UGrN9rj2sXr/QLVq1NbIA==",
+      "version": "7.8.0",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.8.0.tgz",
+      "integrity": "sha512-rogQw6lWH367E5XQnovbAIB4pT1YmuTz7OvyQm0cp4pO2/64faKyTGteSxc99stG01CoARW+pjJN1K09hfKFPw==",
       "requires": {
         "@stencil/core": "^4.12.2",
         "ionicons": "^7.2.2",
@@ -7993,11 +7993,11 @@
       "requires": {}
     },
     "@ionic/vue": {
-      "version": "7.7.5",
-      "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-7.7.5.tgz",
-      "integrity": "sha512-Ilm11iOQRnhv4ei7Wj7cxP44L2orR2RnNOTTHGD9FE6o24k7VInP2lMRVvewjKXAbBb21pZE3AyMaJr5JMubFA==",
+      "version": "7.8.0",
+      "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-7.8.0.tgz",
+      "integrity": "sha512-IXOUO9SQHXU3Ec/9u6u2JPNcu9VL8jamvM+elzBam7e0GDSQ56cyYDRnptROBdfBYop2EGiNJvzjWxAuZnM6kw==",
       "requires": {
-        "@ionic/core": "7.7.5",
+        "@ionic/core": "7.8.0",
         "ionicons": "^7.0.0"
       }
     },
diff --git a/packages/vue/package-lock.json b/packages/vue/package-lock.json
index 8876d00a6b..f373f41b70 100644
--- a/packages/vue/package-lock.json
+++ b/packages/vue/package-lock.json
@@ -208,9 +208,9 @@
       "dev": true
     },
     "node_modules/@ionic/core": {
-      "version": "7.7.5",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.7.5.tgz",
-      "integrity": "sha512-/ozFH0Wxh415uER8vc4pcGeRLlh71TfL9gZTHRPAsRT7FnampW8Y45T2fDNNLSmN8UGrN9rj2sXr/QLVq1NbIA==",
+      "version": "7.8.0",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.8.0.tgz",
+      "integrity": "sha512-rogQw6lWH367E5XQnovbAIB4pT1YmuTz7OvyQm0cp4pO2/64faKyTGteSxc99stG01CoARW+pjJN1K09hfKFPw==",
       "dependencies": {
         "@stencil/core": "^4.12.2",
         "ionicons": "^7.2.2",
@@ -3959,9 +3959,9 @@
       "dev": true
     },
     "@ionic/core": {
-      "version": "7.7.5",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.7.5.tgz",
-      "integrity": "sha512-/ozFH0Wxh415uER8vc4pcGeRLlh71TfL9gZTHRPAsRT7FnampW8Y45T2fDNNLSmN8UGrN9rj2sXr/QLVq1NbIA==",
+      "version": "7.8.0",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.8.0.tgz",
+      "integrity": "sha512-rogQw6lWH367E5XQnovbAIB4pT1YmuTz7OvyQm0cp4pO2/64faKyTGteSxc99stG01CoARW+pjJN1K09hfKFPw==",
       "requires": {
         "@stencil/core": "^4.12.2",
         "ionicons": "^7.2.2",