add annotation

.github/workflows/label.yml

@@ -11,13 +11,9 @@ on:
 
 jobs:
   triage:
-    permissions:
-      contents: read
-      pull-requests: write
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v4
-    - uses: actions/labeler@v4
+    - uses: actions/labeler@main
       with:
         repo-token: "${{ secrets.GITHUB_TOKEN }}"
         sync-labels: true

core/scripts/testing/themes/dark.css

@@ -1,151 +0,0 @@
-/*
- * Dark Colors
- * -------------------------------------------
- */
-
-:root {
-  --ion-color-primary: #428cff;
-  --ion-color-primary-rgb: 66, 140, 255;
-  --ion-color-primary-contrast: #ffffff;
-  --ion-color-primary-contrast-rgb: 255, 255, 255;
-  --ion-color-primary-shade: #3a7be0;
-  --ion-color-primary-tint: #5598ff;
-
-  --ion-color-secondary: #50c8ff;
-  --ion-color-secondary-rgb: 80, 200, 255;
-  --ion-color-secondary-contrast: #ffffff;
-  --ion-color-secondary-contrast-rgb: 255, 255, 255;
-  --ion-color-secondary-shade: #46b0e0;
-  --ion-color-secondary-tint: #62ceff;
-
-  --ion-color-tertiary: #6a64ff;
-  --ion-color-tertiary-rgb: 106, 100, 255;
-  --ion-color-tertiary-contrast: #ffffff;
-  --ion-color-tertiary-contrast-rgb: 255, 255, 255;
-  --ion-color-tertiary-shade: #5d58e0;
-  --ion-color-tertiary-tint: #7974ff;
-
-  --ion-color-success: #2fdf75;
-  --ion-color-success-rgb: 47, 223, 117;
-  --ion-color-success-contrast: #000000;
-  --ion-color-success-contrast-rgb: 0, 0, 0;
-  --ion-color-success-shade: #29c467;
-  --ion-color-success-tint: #44e283;
-
-  --ion-color-warning: #ffd534;
-  --ion-color-warning-rgb: 255, 213, 52;
-  --ion-color-warning-contrast: #000000;
-  --ion-color-warning-contrast-rgb: 0, 0, 0;
-  --ion-color-warning-shade: #e0bb2e;
-  --ion-color-warning-tint: #ffd948;
-
-  --ion-color-danger: #ff4961;
-  --ion-color-danger-rgb: 255, 73, 97;
-  --ion-color-danger-contrast: #ffffff;
-  --ion-color-danger-contrast-rgb: 255, 255, 255;
-  --ion-color-danger-shade: #e04055;
-  --ion-color-danger-tint: #ff5b71;
-
-  --ion-color-dark: #f4f5f8;
-  --ion-color-dark-rgb: 244, 245, 248;
-  --ion-color-dark-contrast: #000000;
-  --ion-color-dark-contrast-rgb: 0, 0, 0;
-  --ion-color-dark-shade: #d7d8da;
-  --ion-color-dark-tint: #f5f6f9;
-
-  --ion-color-medium: #989aa2;
-  --ion-color-medium-rgb: 152, 154, 162;
-  --ion-color-medium-contrast: #000000;
-  --ion-color-medium-contrast-rgb: 0, 0, 0;
-  --ion-color-medium-shade: #86888f;
-  --ion-color-medium-tint: #a2a4ab;
-
-  --ion-color-light: #222428;
-  --ion-color-light-rgb: 34, 36, 40;
-  --ion-color-light-contrast: #ffffff;
-  --ion-color-light-contrast-rgb: 255, 255, 255;
-  --ion-color-light-shade: #1e2023;
-  --ion-color-light-tint: #383a3e;
-}
-
-/*
- * iOS Dark Theme
- * -------------------------------------------
- */
-
-.ios body {
-  --ion-background-color: #000000;
-  --ion-background-color-rgb: 0, 0, 0;
-
-  --ion-text-color: #ffffff;
-  --ion-text-color-rgb: 255, 255, 255;
-
-  --ion-color-step-50: #0d0d0d;
-  --ion-color-step-100: #1a1a1a;
-  --ion-color-step-150: #262626;
-  --ion-color-step-200: #333333;
-  --ion-color-step-250: #404040;
-  --ion-color-step-300: #4d4d4d;
-  --ion-color-step-350: #595959;
-  --ion-color-step-400: #666666;
-  --ion-color-step-450: #737373;
-  --ion-color-step-500: #808080;
-  --ion-color-step-550: #8c8c8c;
-  --ion-color-step-600: #999999;
-  --ion-color-step-650: #a6a6a6;
-  --ion-color-step-700: #b3b3b3;
-  --ion-color-step-750: #bfbfbf;
-  --ion-color-step-800: #cccccc;
-  --ion-color-step-850: #d9d9d9;
-  --ion-color-step-900: #e6e6e6;
-  --ion-color-step-950: #f2f2f2;
-
-  --ion-toolbar-background: #0d0d0d;
-
-  --ion-item-background: #000000;
-
-  --ion-card-background: #1c1c1d;
-}
-
-/*
- * Material Design Dark Theme
- * -------------------------------------------
- */
-
-.md body {
-  --ion-background-color: #121212;
-  --ion-background-color-rgb: 18, 18, 18;
-
-  --ion-text-color: #ffffff;
-  --ion-text-color-rgb: 255, 255, 255;
-
-  --ion-border-color: #222222;
-
-  --ion-color-step-50: #1e1e1e;
-  --ion-color-step-100: #2a2a2a;
-  --ion-color-step-150: #363636;
-  --ion-color-step-200: #414141;
-  --ion-color-step-250: #4d4d4d;
-  --ion-color-step-300: #595959;
-  --ion-color-step-350: #656565;
-  --ion-color-step-400: #717171;
-  --ion-color-step-450: #7d7d7d;
-  --ion-color-step-500: #898989;
-  --ion-color-step-550: #949494;
-  --ion-color-step-600: #a0a0a0;
-  --ion-color-step-650: #acacac;
-  --ion-color-step-700: #b8b8b8;
-  --ion-color-step-750: #c4c4c4;
-  --ion-color-step-800: #d0d0d0;
-  --ion-color-step-850: #dbdbdb;
-  --ion-color-step-900: #e7e7e7;
-  --ion-color-step-950: #f3f3f3;
-
-  --ion-item-background: #1e1e1e;
-
-  --ion-toolbar-background: #1f1f1f;
-
-  --ion-tab-bar-background: #1f1f1f;
-
-  --ion-card-background: #1e1e1e;
-}

core/src/components.d.ts

@@ -1162,7 +1162,7 @@ export namespace Components {
          */
         "autocorrect": 'on' | 'off';
         /**
-          * Sets the [`autofocus` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus) on the native input element.  This may not be sufficient for the element to be focused on page load. See [managing focus](/docs/developing/managing-focus) for more information.
+          * This Boolean attribute lets you specify that a form control should have input focus when the page loads.
          */
         "autofocus": boolean;
         /**
@@ -1274,7 +1274,7 @@ export namespace Components {
          */
         "required": boolean;
         /**
-          * Sets focus on the native `input` in `ion-input`. Use this method instead of the global `input.focus()`.  Developers who wish to focus an input when a page enters should call `setFocus()` in the `ionViewDidEnter()` lifecycle method.  Developers who wish to focus an input when an overlay is presented should call `setFocus` after `didPresent` has resolved.  See [managing focus](/docs/developing/managing-focus) for more information.
+          * Sets focus on the native `input` in `ion-input`. Use this method instead of the global `input.focus()`.  Developers who wish to focus an input when a page enters should call `setFocus()` in the `ionViewDidEnter()` lifecycle method.  Developers who wish to focus an input when an overlay is presented should call `setFocus` after `didPresent` has resolved.
          */
         "setFocus": () => Promise<void>;
         /**
@@ -2601,7 +2601,7 @@ export namespace Components {
          */
         "searchIcon"?: string;
         /**
-          * Sets focus on the native `input` in `ion-searchbar`. Use this method instead of the global `input.focus()`.  Developers who wish to focus an input when a page enters should call `setFocus()` in the `ionViewDidEnter()` lifecycle method.  Developers who wish to focus an input when an overlay is presented should call `setFocus` after `didPresent` has resolved.  See [managing focus](/docs/developing/managing-focus) for more information.
+          * Sets focus on the native `input` in `ion-searchbar`. Use this method instead of the global `input.focus()`.  Developers who wish to focus an input when a page enters should call `setFocus()` in the `ionViewDidEnter()` lifecycle method.  Developers who wish to focus an input when an overlay is presented should call `setFocus` after `didPresent` has resolved.
          */
         "setFocus": () => Promise<void>;
         /**
@@ -2950,7 +2950,7 @@ export namespace Components {
          */
         "autocapitalize": string;
         /**
-          * Sets the [`autofocus` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus) on the native input element.  This may not be sufficient for the element to be focused on page load. See [managing focus](/docs/developing/managing-focus) for more information.
+          * This Boolean attribute lets you specify that a form control should have input focus when the page loads.
          */
         "autofocus": boolean;
         /**
@@ -3050,7 +3050,7 @@ export namespace Components {
          */
         "rows"?: number;
         /**
-          * Sets focus on the native `textarea` in `ion-textarea`. Use this method instead of the global `textarea.focus()`.  See [managing focus](/docs/developing/managing-focus) for more information.
+          * Sets focus on the native `textarea` in `ion-textarea`. Use this method instead of the global `textarea.focus()`.
          */
         "setFocus": () => Promise<void>;
         /**
@@ -5854,7 +5854,7 @@ declare namespace LocalJSX {
          */
         "autocorrect"?: 'on' | 'off';
         /**
-          * Sets the [`autofocus` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus) on the native input element.  This may not be sufficient for the element to be focused on page load. See [managing focus](/docs/developing/managing-focus) for more information.
+          * This Boolean attribute lets you specify that a form control should have input focus when the page loads.
          */
         "autofocus"?: boolean;
         /**
@@ -7699,7 +7699,7 @@ declare namespace LocalJSX {
          */
         "autocapitalize"?: string;
         /**
-          * Sets the [`autofocus` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus) on the native input element.  This may not be sufficient for the element to be focused on page load. See [managing focus](/docs/developing/managing-focus) for more information.
+          * This Boolean attribute lets you specify that a form control should have input focus when the page loads.
          */
         "autofocus"?: boolean;
         /**

core/src/components/action-sheet/action-sheet.tsx

@@ -337,17 +337,6 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
     if (this.isOpen === true) {
       raf(() => this.present());
     }
-
-    /**
-     * When binding values in frameworks such as Angular
-     * it is possible for the value to be set after the Web Component
-     * initializes but before the value watcher is set up in Stencil.
-     * As a result, the watcher callback may not be fired.
-     * We work around this by manually calling the watcher
-     * callback when the component has loaded and the watcher
-     * is configured.
-     */
-    this.triggerChanged();
   }
 
   render() {

core/src/components/alert/alert.tsx

@@ -376,17 +376,6 @@ export class Alert implements ComponentInterface, OverlayInterface {
     if (this.isOpen === true) {
       raf(() => this.present());
     }
-
-    /**
-     * When binding values in frameworks such as Angular
-     * it is possible for the value to be set after the Web Component
-     * initializes but before the value watcher is set up in Stencil.
-     * As a result, the watcher callback may not be fired.
-     * We work around this by manually calling the watcher
-     * callback when the component has loaded and the watcher
-     * is configured.
-     */
-    this.triggerChanged();
   }
 
   /**

core/src/components/datetime/datetime.tsx

@@ -1272,21 +1272,31 @@ export class Datetime implements ComponentInterface {
       (month !== undefined && month !== workingParts.month) || (year !== undefined && year !== workingParts.year);
     const bodyIsVisible = el.classList.contains('datetime-ready');
     const { isGridStyle, showMonthAndYear } = this;
-    if (isGridStyle && didChangeMonth && bodyIsVisible && !showMonthAndYear) {
-      this.animateToDate(targetValue);
-    } else {
-      /**
-       * We only need to do this if we didn't just animate to a new month,
-       * since that calls prevMonth/nextMonth which calls setWorkingParts for us.
-       */
-      this.setWorkingParts({
-        month,
-        day,
-        year,
-        hour,
-        minute,
-        ampm,
-      });
+    const hasSingleDateSelected = Array.isArray(valueToProcess) ? valueToProcess.length === 1 : true;
+
+    /**
+     * If there is more than one date selected
+     * then we should neither animate to the date
+     * nor update the working parts because we do
+     * not know which date the user wants to view.
+     */
+    if (hasSingleDateSelected) {
+      if (isGridStyle && didChangeMonth && bodyIsVisible && !showMonthAndYear) {
+        this.animateToDate(targetValue);
+      } else {
+        /**
+         * We only need to do this if we didn't just animate to a new month,
+         * since that calls prevMonth/nextMonth which calls setWorkingParts for us.
+         */
+        this.setWorkingParts({
+          month,
+          day,
+          year,
+          hour,
+          minute,
+          ampm,
+        });
+      }
     }
   };
 

core/src/components/datetime/test/set-value/datetime.e2e.ts

@@ -62,5 +62,34 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
       const calendarHeader = datetime.locator('.calendar-month-year');
       await expect(calendarHeader).toHaveText(/May 2021/);
     });
+
+    test('should scroll to new month when value is initially set and then updated with multiple selection', async ({
+      page,
+    }) => {
+      test.info().annotations.push({
+        type: 'issue',
+        description: 'https://github.com/ionic-team/ionic-framework/issues/28602',
+      });
+
+      await page.setContent(
+        `
+        <ion-datetime multiple="true" presentation="date"></ion-datetime>
+        <script>
+          const datetime = document.querySelector('ion-datetime');
+          datetime.value = ['2021-04-25'];
+        </script>
+      `,
+        config
+      );
+
+      await page.waitForSelector('.datetime-ready');
+
+      const datetime = page.locator('ion-datetime');
+      await datetime.evaluate((el: HTMLIonDatetimeElement) => (el.value = '2021-05-25T12:40:00.000Z'));
+      await page.waitForChanges();
+
+      const calendarHeader = datetime.locator('.calendar-month-year');
+      await expect(calendarHeader).toHaveText(/May 2021/);
+    });
   });
 });

core/src/components/input/input.tsx

@@ -95,9 +95,7 @@ export class Input implements ComponentInterface {
   @Prop() autocorrect: 'on' | 'off' = 'off';
 
   /**
-   * Sets the [`autofocus` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus) on the native input element.
-   *
-   * This may not be sufficient for the element to be focused on page load. See [managing focus](/docs/developing/managing-focus) for more information.
+   * This Boolean attribute lets you specify that a form control should have input focus when the page loads.
    */
   @Prop() autofocus = false;
 
@@ -426,8 +424,6 @@ export class Input implements ComponentInterface {
    *
    * Developers who wish to focus an input when an overlay is presented
    * should call `setFocus` after `didPresent` has resolved.
-   *
-   * See [managing focus](/docs/developing/managing-focus) for more information.
    */
   @Method()
   async setFocus() {

core/src/components/loading/loading.tsx

@@ -225,17 +225,6 @@ export class Loading implements ComponentInterface, OverlayInterface {
     if (this.isOpen === true) {
       raf(() => this.present());
     }
-
-    /**
-     * When binding values in frameworks such as Angular
-     * it is possible for the value to be set after the Web Component
-     * initializes but before the value watcher is set up in Stencil.
-     * As a result, the watcher callback may not be fired.
-     * We work around this by manually calling the watcher
-     * callback when the component has loaded and the watcher
-     * is configured.
-     */
-    this.triggerChanged();
   }
 
   disconnectedCallback() {

core/src/components/modal/modal.tsx

@@ -368,17 +368,6 @@ export class Modal implements ComponentInterface, OverlayInterface {
       raf(() => this.present());
     }
     this.breakpointsChanged(this.breakpoints);
-
-    /**
-     * When binding values in frameworks such as Angular
-     * it is possible for the value to be set after the Web Component
-     * initializes but before the value watcher is set up in Stencil.
-     * As a result, the watcher callback may not be fired.
-     * We work around this by manually calling the watcher
-     * callback when the component has loaded and the watcher
-     * is configured.
-     */
-    this.triggerChanged();
   }
 
   /**

core/src/components/picker/picker.tsx

@@ -209,17 +209,6 @@ export class Picker implements ComponentInterface, OverlayInterface {
     if (this.isOpen === true) {
       raf(() => this.present());
     }
-
-    /**
-     * When binding values in frameworks such as Angular
-     * it is possible for the value to be set after the Web Component
-     * initializes but before the value watcher is set up in Stencil.
-     * As a result, the watcher callback may not be fired.
-     * We work around this by manually calling the watcher
-     * callback when the component has loaded and the watcher
-     * is configured.
-     */
-    this.triggerChanged();
   }
 
   /**

core/src/components/popover/popover.tsx

@@ -370,17 +370,6 @@ export class Popover implements ComponentInterface, PopoverInterface {
         this.dismiss(undefined, undefined, false);
       });
     }
-
-    /**
-     * When binding values in frameworks such as Angular
-     * it is possible for the value to be set after the Web Component
-     * initializes but before the value watcher is set up in Stencil.
-     * As a result, the watcher callback may not be fired.
-     * We work around this by manually calling the watcher
-     * callback when the component has loaded and the watcher
-     * is configured.
-     */
-    this.configureTriggerInteraction();
   }
 
   /**

core/src/components/searchbar/searchbar.tsx

@@ -257,8 +257,6 @@ export class Searchbar implements ComponentInterface {
    *
    * Developers who wish to focus an input when an overlay is presented
    * should call `setFocus` after `didPresent` has resolved.
-   *
-   * See [managing focus](/docs/developing/managing-focus) for more information.
    */
   @Method()
   async setFocus() {

core/src/components/textarea/textarea.tsx

@@ -93,9 +93,7 @@ export class Textarea implements ComponentInterface {
   @Prop() autocapitalize = 'none';
 
   /**
-   * Sets the [`autofocus` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus) on the native input element.
-   *
-   * This may not be sufficient for the element to be focused on page load. See [managing focus](/docs/developing/managing-focus) for more information.
+   * This Boolean attribute lets you specify that a form control should have input focus when the page loads.
    */
   @Prop() autofocus = false;
 
@@ -374,8 +372,6 @@ export class Textarea implements ComponentInterface {
   /**
    * Sets focus on the native `textarea` in `ion-textarea`. Use this method instead of the global
    * `textarea.focus()`.
-   *
-   * See [managing focus](/docs/developing/managing-focus) for more information.
    */
   @Method()
   async setFocus() {

core/src/components/toast/toast.tsx

@@ -288,17 +288,6 @@ export class Toast implements ComponentInterface, OverlayInterface {
     if (this.isOpen === true) {
       raf(() => this.present());
     }
-
-    /**
-     * When binding values in frameworks such as Angular
-     * it is possible for the value to be set after the Web Component
-     * initializes but before the value watcher is set up in Stencil.
-     * As a result, the watcher callback may not be fired.
-     * We work around this by manually calling the watcher
-     * callback when the component has loaded and the watcher
-     * is configured.
-     */
-    this.triggerChanged();
   }
 
   /**

core/src/utils/test/playwright/generator.ts

@@ -1,12 +1,5 @@
 export type Mode = 'ios' | 'md';
 export type Direction = 'ltr' | 'rtl';
-/**
- * The theme to use for the playwright test.
- *
- * - `light`: The fallback theme values. Theme stylesheet will not be included.
- * - `dark`: The dark theme values.
- */
-export type Theme = 'light' | 'dark';
 
 export type TitleFn = (title: string) => string;
 export type ScreenshotFn = (fileName: string) => string;
@@ -14,7 +7,6 @@ export type ScreenshotFn = (fileName: string) => string;
 export interface TestConfig {
   mode: Mode;
   direction: Direction;
-  theme: Theme;
 }
 
 interface TestUtilities {
@@ -26,7 +18,6 @@ interface TestUtilities {
 interface TestConfigOption {
   modes?: Mode[];
   directions?: Direction[];
-  themes?: Theme[];
 }
 
 /**
@@ -36,19 +27,9 @@ interface TestConfigOption {
  * each test title is unique.
  */
 const generateTitle = (title: string, config: TestConfig): string => {
-  const { mode, direction, theme } = config;
+  const { mode, direction } = config;
 
-  if (theme === 'light') {
-    /**
-     * Ionic has many existing tests that existed prior to
-     * the introduction of theme testing. To maintain backwards
-     * compatibility, we will not include the theme in the test
-     * title if the theme is set to light.
-     */
-    return `${title} - ${mode}/${direction}`;
-  }
-
-  return `${title} - ${mode}/${direction}/${theme}`;
+  return `${title} - ${mode}/${direction}`;
 };
 
 /**
@@ -56,19 +37,9 @@ const generateTitle = (title: string, config: TestConfig): string => {
  * and a test config.
  */
 const generateScreenshotName = (fileName: string, config: TestConfig): string => {
-  const { mode, direction, theme } = config;
+  const { mode, direction } = config;
 
-  if (theme === 'light') {
-    /**
-     * Ionic has many existing tests that existed prior to
-     * the introduction of theme testing. To maintain backwards
-     * compatibility, we will not include the theme in the screenshot
-     * name if the theme is set to light.
-     */
-    return `${fileName}-${mode}-${direction}.png`;
-  }
-
-  return `${fileName}-${mode}-${direction}-${theme}.png`;
+  return `${fileName}-${mode}-${direction}.png`;
 };
 
 /**
@@ -83,15 +54,12 @@ export const configs = (testConfig: TestConfigOption = DEFAULT_TEST_CONFIG_OPTIO
    * If certain options are not provided,
    * fall back to the defaults.
    */
-  const processedMode = modes ?? DEFAULT_MODES;
-  const processedDirection = directions ?? DEFAULT_DIRECTIONS;
-  const processedTheme = testConfig.themes ?? DEFAULT_THEMES;
+  const processedMode: Mode[] = modes ?? DEFAULT_MODES;
+  const processedDirection: Direction[] = directions ?? DEFAULT_DIRECTIONS;
 
-  processedMode.forEach((mode) => {
-    processedDirection.forEach((direction) => {
-      processedTheme.forEach((theme) => {
-        configs.push({ mode, direction, theme });
-      });
+  processedMode.forEach((mode: Mode) => {
+    processedDirection.forEach((direction: Direction) => {
+      configs.push({ mode, direction });
     });
   });
 
@@ -106,7 +74,6 @@ export const configs = (testConfig: TestConfigOption = DEFAULT_TEST_CONFIG_OPTIO
 
 const DEFAULT_MODES: Mode[] = ['ios', 'md'];
 const DEFAULT_DIRECTIONS: Direction[] = ['ltr', 'rtl'];
-const DEFAULT_THEMES: Theme[] = ['light'];
 
 const DEFAULT_TEST_CONFIG_OPTION = {
   modes: DEFAULT_MODES,

core/src/utils/test/playwright/page/utils/set-content.ts

@@ -1,5 +1,5 @@
 import type { Page, TestInfo } from '@playwright/test';
-import type { E2EPageOptions, Mode, Direction, Theme } from '@utils/test/playwright';
+import type { E2EPageOptions, Mode, Direction } from '@utils/test/playwright';
 
 /**
  * Overwrites the default Playwright page.setContent method.
@@ -19,16 +19,13 @@ export const setContent = async (page: Page, html: string, testInfo: TestInfo, o
 
   let mode: Mode;
   let direction: Direction;
-  let theme: Theme;
 
   if (options == undefined) {
     mode = testInfo.project.metadata.mode;
     direction = testInfo.project.metadata.rtl ? 'rtl' : 'ltr';
-    theme = testInfo.project.metadata.theme;
   } else {
     mode = options.mode;
     direction = options.direction;
-    theme = options.theme;
   }
 
   const baseUrl = process.env.PLAYWRIGHT_TEST_BASE_URL;
@@ -42,7 +39,6 @@ export const setContent = async (page: Page, html: string, testInfo: TestInfo, o
         <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
         <link href="${baseUrl}/css/ionic.bundle.css" rel="stylesheet" />
         <link href="${baseUrl}/scripts/testing/styles.css" rel="stylesheet" />
-        ${theme !== 'light' ? `<link href="${baseUrl}/scripts/testing/themes/${theme}.css" rel="stylesheet" />` : ''}
         <script src="${baseUrl}/scripts/testing/scripts.js"></script>
         <script type="module" src="${baseUrl}/dist/ionic/ionic.esm.js"></script>
         <script>
@@ -59,11 +55,6 @@ export const setContent = async (page: Page, html: string, testInfo: TestInfo, o
     </html>
   `;
 
-  testInfo.annotations.push({
-    type: 'theme',
-    description: theme,
-  });
-
   if (baseUrl) {
     await page.route(baseUrl, (route) => {
       if (route.request().url() === `${baseUrl}/`) {

packages/react-router/src/ReactRouter/ReactRouterViewStack.tsx

@@ -1,8 +1,7 @@
 import type { RouteInfo, ViewItem } from '@ionic/react';
 import { IonRoute, ViewLifeCycleManager, ViewStacks, generateId } from '@ionic/react';
 import React from 'react';
-
-import { matchPath } from './utils/matchPath';
+import { matchPath } from 'react-router';
 
 export class ReactRouterViewStack extends ViewStacks {
   constructor() {
@@ -24,16 +23,21 @@ export class ReactRouterViewStack extends ViewStacks {
       ionRoute: false,
     };
 
+    const matchProps = {
+      exact: reactElement.props.exact,
+      path: reactElement.props.path || reactElement.props.from,
+      component: reactElement.props.component,
+    };
+
+    const match = matchPath(routeInfo.pathname, matchProps);
+
     if (reactElement.type === IonRoute) {
       viewItem.ionRoute = true;
       viewItem.disableIonPageManagement = reactElement.props.disableIonPageManagement;
     }
 
     viewItem.routeData = {
-      match: matchPath({
-        pathname: routeInfo.pathname,
-        componentProps: reactElement.props,
-      }),
+      match,
       childProps: reactElement.props,
     };
 
@@ -102,7 +106,7 @@ export class ReactRouterViewStack extends ViewStacks {
   }
 
   findLeavingViewItemByRouteInfo(routeInfo: RouteInfo, outletId?: string, mustBeIonRoute = true) {
-    const { viewItem } = this.findViewItemByPath(routeInfo.lastPathname!, outletId, mustBeIonRoute);
+    const { viewItem } = this.findViewItemByPath(routeInfo.lastPathname!, outletId, false, mustBeIonRoute);
     return viewItem;
   }
 
@@ -111,10 +115,7 @@ export class ReactRouterViewStack extends ViewStacks {
     return viewItem;
   }
 
-  /**
-   * Returns the matching view item and the match result for a given pathname.
-   */
-  private findViewItemByPath(pathname: string, outletId?: string, mustBeIonRoute?: boolean) {
+  private findViewItemByPath(pathname: string, outletId?: string, forceExact?: boolean, mustBeIonRoute?: boolean) {
     let viewItem: ViewItem | undefined;
     let match: ReturnType<typeof matchPath> | undefined;
     let viewStack: ViewItem[];
@@ -139,24 +140,16 @@ export class ReactRouterViewStack extends ViewStacks {
       if (mustBeIonRoute && !v.ionRoute) {
         return false;
       }
-
-      match = matchPath({
-        pathname,
-        componentProps: v.routeData.childProps,
-      });
-
-      if (match) {
-        /**
-         * Even though we have a match from react-router, we do not know if the match
-         * is for this specific view item.
-         *
-         * To validate this, we need to check if the path and url match the view item's route data.
-         */
-        const hasParameter = match.path.includes(':');
-        if (!hasParameter || (hasParameter && match.url === v.routeData?.match?.url)) {
-          viewItem = v;
-          return true;
-        }
+      const matchProps = {
+        exact: forceExact ? true : v.routeData.childProps.exact,
+        path: v.routeData.childProps.path || v.routeData.childProps.from,
+        component: v.routeData.childProps.component,
+      };
+      const myMatch = matchPath(pathname, matchProps);
+      if (myMatch) {
+        viewItem = v;
+        match = myMatch;
+        return true;
       }
       return false;
     }
@@ -178,9 +171,13 @@ export class ReactRouterViewStack extends ViewStacks {
   }
 }
 
-function matchComponent(node: React.ReactElement, pathname: string) {
-  return matchPath({
-    pathname,
-    componentProps: node.props,
-  });
+function matchComponent(node: React.ReactElement, pathname: string, forceExact?: boolean) {
+  const matchProps = {
+    exact: forceExact ? true : node.props.exact,
+    path: node.props.path || node.props.from,
+    component: node.props.component,
+  };
+  const match = matchPath(pathname, matchProps);
+
+  return match;
 }

packages/react-router/src/ReactRouter/StackManager.tsx

@@ -1,9 +1,9 @@
 import type { RouteInfo, StackContextState, ViewItem } from '@ionic/react';
 import { RouteManagerContext, StackContext, generateId, getConfig } from '@ionic/react';
 import React from 'react';
+import { matchPath } from 'react-router-dom';
 
 import { clonePageElement } from './clonePageElement';
-import { matchPath } from './utils/matchPath';
 
 // TODO(FW-2959): types
 
@@ -433,10 +433,12 @@ export default StackManager;
 function matchRoute(node: React.ReactNode, routeInfo: RouteInfo) {
   let matchedNode: React.ReactNode;
   React.Children.forEach(node as React.ReactElement, (child: React.ReactElement) => {
-    const match = matchPath({
-      pathname: routeInfo.pathname,
-      componentProps: child.props,
-    });
+    const matchProps = {
+      exact: child.props.exact,
+      path: child.props.path || child.props.from,
+      component: child.props.component,
+    };
+    const match = matchPath(routeInfo.pathname, matchProps);
     if (match) {
       matchedNode = child;
     }
@@ -457,11 +459,12 @@ function matchRoute(node: React.ReactNode, routeInfo: RouteInfo) {
 }
 
 function matchComponent(node: React.ReactElement, pathname: string, forceExact?: boolean) {
-  return matchPath({
-    pathname,
-    componentProps: {
-      ...node.props,
-      exact: forceExact,
-    },
-  });
+  const matchProps = {
+    exact: forceExact ? true : node.props.exact,
+    path: node.props.path || node.props.from,
+    component: node.props.component,
+  };
+  const match = matchPath(pathname, matchProps);
+
+  return match;
 }

packages/react-router/src/ReactRouter/utils/matchPath.ts

@@ -1,47 +0,0 @@
-import { matchPath as reactRouterMatchPath } from 'react-router';
-
-interface MatchPathOptions {
-  /**
-   * The pathname to match against.
-   */
-  pathname: string;
-  /**
-   * The props to match against, they are identical to the matching props `Route` accepts.
-   */
-  componentProps: {
-    path?: string;
-    from?: string;
-    component?: any;
-    exact?: boolean;
-  };
-}
-
-/**
- * @see https://v5.reactrouter.com/web/api/matchPath
- */
-export const matchPath = ({
-  pathname,
-  componentProps,
-}: MatchPathOptions): false | ReturnType<typeof reactRouterMatchPath> => {
-  const { exact, component } = componentProps;
-
-  const path = componentProps.path || componentProps.from;
-  /***
-   * The props to match against, they are identical
-   * to the matching props `Route` accepts. It could also be a string
-   * or an array of strings as shortcut for `{ path }`.
-   */
-  const matchProps = {
-    exact,
-    path,
-    component,
-  };
-
-  const match = reactRouterMatchPath(pathname, matchProps);
-
-  if (!match) {
-    return false;
-  }
-
-  return match;
-};

packages/react-router/test/base/src/pages/routing/Details.tsx

@@ -24,6 +24,10 @@ const Details: React.FC<DetailsProps> = () => {
     return () => console.log('Home Details unmount');
   }, []);
 
+  // useIonViewWillEnter(() => {
+  //   console.log('IVWE Details')
+  // })
+
   const nextId = parseInt(id, 10) + 1;
 
   return (
@@ -54,9 +58,6 @@ const Details: React.FC<DetailsProps> = () => {
         <IonButton routerLink={`/routing/tabs/settings/details/1`}>
           <IonLabel>Go to Settings Details 1</IonLabel>
         </IonButton>
-        <br />
-        <br />
-        <input data-testid="details-input" />
       </IonContent>
     </IonPage>
   );

packages/react-router/test/base/tests/e2e/specs/routing.cy.js

@@ -309,41 +309,6 @@ describe('Routing Tests', () => {
     cy.ionPageDoesNotExist('home-details-page-1');
     cy.ionPageVisible('home-page');
   });
-
-  it('should mount new view item instances of parameterized routes', () => {
-    cy.visit(`http://localhost:${port}/routing/tabs/home/details/1`);
-
-    cy.get('div.ion-page[data-pageid=home-details-page-1]')
-      .get('[data-testid="details-input"]')
-      .should('have.value', '');
-
-    cy.get('div.ion-page[data-pageid=home-details-page-1] [data-testid="details-input"]').type('1');
-
-    cy.ionNav('ion-button', 'Go to Details 2');
-    cy.ionPageVisible('home-details-page-2');
-
-    cy.get('div.ion-page[data-pageid=home-details-page-2] [data-testid="details-input"]').should('have.value', '');
-
-    cy.get('div.ion-page[data-pageid=home-details-page-2] [data-testid="details-input"]').type('2');
-
-    cy.ionNav('ion-button', 'Go to Details 3');
-    cy.ionPageVisible('home-details-page-3');
-
-    cy.get('div.ion-page[data-pageid=home-details-page-3] [data-testid="details-input"]').should('have.value', '');
-
-    cy.get('div.ion-page[data-pageid=home-details-page-3] [data-testid="details-input"]').type('3');
-
-    cy.ionBackClick('home-details-page-3');
-    cy.ionPageVisible('home-details-page-2');
-
-    cy.get('div.ion-page[data-pageid=home-details-page-2] [data-testid="details-input"]').should('have.value', '2');
-
-    cy.ionBackClick('home-details-page-2');
-    cy.ionPageVisible('home-details-page-1');
-
-    cy.get('div.ion-page[data-pageid=home-details-page-1] [data-testid="details-input"]').should('have.value', '1');
-  });
-
   /*
     Tests to add:
     Test that lifecycle events fire

packages/vue/src/components/IonNav.ts

@@ -4,7 +4,7 @@ import { defineComponent, h, shallowRef } from "vue";
 
 import { VueDelegate } from "../framework-delegate";
 
-export const IonNav = /*@__PURE__*/ defineComponent((props) => {
+export const IonNav = /*@__PURE__*/ defineComponent(() => {
   defineCustomElement();
   const views = shallowRef([]);
 
@@ -19,39 +19,8 @@ export const IonNav = /*@__PURE__*/ defineComponent((props) => {
 
   const delegate = VueDelegate(addView, removeView);
   return () => {
-    return h("ion-nav", { ...props, delegate }, views.value);
+    return h("ion-nav", { delegate }, views.value);
   };
 });
 
 IonNav.name = "IonNav";
-
-/**
- * The default values follow what is defined at
- * https://ionicframework.com/docs/api/nav#properties
- * otherwise the default values on the Web Component
- * may be overridden. For example, if the default animated value
- * is not `true` below, then Vue would default the prop to `false`
- * which would override the Web Component default of `true`.
- */
-IonNav.props = {
-  animated: {
-    type: Boolean,
-    default: true,
-  },
-  animation: {
-    type: Function,
-    default: undefined,
-  },
-  root: {
-    type: [Function, Object, String],
-    default: undefined,
-  },
-  rootParams: {
-    type: Object,
-    default: undefined,
-  },
-  swipeGesture: {
-    type: Boolean,
-    default: undefined,
-  },
-};

packages/vue/test/base/src/components/Nav.vue

@@ -1,12 +1,16 @@
 <template>
-  <ion-nav :root="NavRoot" :root-params="rootParams"></ion-nav>
+  <ion-nav :root="NavRoot"></ion-nav>
 </template>
 
-<script setup lang="ts">
-import { IonNav } from "@ionic/vue";
-import NavRoot from "@/components/NavRoot.vue";
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { IonNav } from '@ionic/vue';
+import NavRoot from '@/components/NavRoot.vue';
 
-const rootParams = {
-  message: "Hello World!",
-};
+export default defineComponent({
+  components: { IonNav },
+  setup() {
+    return { NavRoot }
+  }
+});
 </script>

packages/vue/test/base/src/components/NavRoot.vue

@@ -8,14 +8,11 @@
     </ion-toolbar>
   </ion-header>
   <ion-content class="ion-padding">
-    <div id="nav-root-params">Message: {{ message }}</div>
-    <ion-button expand="block" @click="pushPage" id="push-nav-child"
-      >Go to Nav Child</ion-button
-    >
+    <ion-button expand="block" @click="pushPage" id="push-nav-child">Go to Nav Child</ion-button>
   </ion-content>
 </template>
 
-<script setup lang="ts">
+<script lang="ts">
 import {
   IonButtons,
   IonButton,
@@ -23,20 +20,28 @@ import {
   IonHeader,
   IonTitle,
   IonToolbar,
-  modalController,
-} from "@ionic/vue";
-import NavChild from "@/components/NavChild.vue";
+  modalController
+} from '@ionic/vue';
+import { defineComponent } from 'vue';
+import NavChild from '@/components/NavChild.vue';
 
-defineProps<{
-  message: string;
-}>();
-
-function pushPage() {
-  const ionNav = document.querySelector("ion-nav") as any;
-  ionNav.push(NavChild, { title: "Custom Title" });
-}
-
-async function dismiss() {
-  await modalController.dismiss();
-}
+export default defineComponent({
+  components: {
+    IonButtons,
+    IonButton,
+    IonContent,
+    IonHeader,
+    IonTitle,
+    IonToolbar
+  },
+  methods: {
+    pushPage: function() {
+      const ionNav = document.querySelector('ion-nav') as any;
+      ionNav.push(NavChild, { title: 'Custom Title' });
+    },
+    dismiss: async function() {
+      await modalController.dismiss();
+    }
+  }
+})
 </script>

packages/vue/test/base/tests/e2e/specs/navigation.cy.js

@@ -10,10 +10,4 @@ describe('Navigation', () => {
 
     cy.get('#nav-child-content').should('have.text', 'Custom Title');
   });
-
-  it('nav should support kebab-case root-params', () => {
-    cy.get('#open-nav-modal').click();
-
-    cy.get('#nav-root-params').should('have.text', 'Message: Hello World!');
-  });
 });