From 940545327fc9283d5dd15f7d19876b36eb13ada9 Mon Sep 17 00:00:00 2001
From: Sean Perkins <sean@ionic.io>
Date: Wed, 22 Jun 2022 00:11:17 -0400
Subject: [PATCH 01/11] docs(nav): nav link component playground

---
 docs/api/nav.md                               |  4 +-
 .../nav-link/angular/app_component_html.md    |  3 +
 .../nav/nav-link/angular/app_component_ts.md  | 13 +++
 .../nav/nav-link/angular/app_module_ts.md     | 20 +++++
 .../nav-link/angular/page_one_component_ts.md | 25 ++++++
 .../angular/page_three_component_ts.md        | 21 +++++
 .../nav-link/angular/page_two_component_ts.md | 30 +++++++
 static/usage/nav/nav-link/demo.html           | 84 +++++++++++++++++++
 static/usage/nav/nav-link/index.md            | 27 ++++++
 static/usage/nav/nav-link/javascript.md       | 67 +++++++++++++++
 10 files changed, 293 insertions(+), 1 deletion(-)
 create mode 100644 static/usage/nav/nav-link/angular/app_component_html.md
 create mode 100644 static/usage/nav/nav-link/angular/app_component_ts.md
 create mode 100644 static/usage/nav/nav-link/angular/app_module_ts.md
 create mode 100644 static/usage/nav/nav-link/angular/page_one_component_ts.md
 create mode 100644 static/usage/nav/nav-link/angular/page_three_component_ts.md
 create mode 100644 static/usage/nav/nav-link/angular/page_two_component_ts.md
 create mode 100644 static/usage/nav/nav-link/demo.html
 create mode 100644 static/usage/nav/nav-link/index.md
 create mode 100644 static/usage/nav/nav-link/javascript.md

diff --git a/docs/api/nav.md b/docs/api/nav.md
index 678969eca07..4cd9f5587d7 100644
--- a/docs/api/nav.md
+++ b/docs/api/nav.md
@@ -42,7 +42,9 @@ TODO: Playground Example
 
 ## Using NavLink
 
-TODO: Playground Example
+import NavLinkExample from '@site/static/usage/nav/nav-link/index.md';
+
+<NavLinkExample />
 
 ## Navigation within a Modal
 
diff --git a/static/usage/nav/nav-link/angular/app_component_html.md b/static/usage/nav/nav-link/angular/app_component_html.md
new file mode 100644
index 00000000000..078dc23a556
--- /dev/null
+++ b/static/usage/nav/nav-link/angular/app_component_html.md
@@ -0,0 +1,3 @@
+```html
+<ion-nav [root]="pageOne"></ion-nav>
+```
diff --git a/static/usage/nav/nav-link/angular/app_component_ts.md b/static/usage/nav/nav-link/angular/app_component_ts.md
new file mode 100644
index 00000000000..4b261cd344f
--- /dev/null
+++ b/static/usage/nav/nav-link/angular/app_component_ts.md
@@ -0,0 +1,13 @@
+```ts
+import { Component } from '@angular/core';
+
+import { PageOneComponent } from './page-one.component';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: 'app.component.html',
+})
+export class AppComponent {
+  pageOne = PageOneComponent;
+}
+```
diff --git a/static/usage/nav/nav-link/angular/app_module_ts.md b/static/usage/nav/nav-link/angular/app_module_ts.md
new file mode 100644
index 00000000000..599b26a1d54
--- /dev/null
+++ b/static/usage/nav/nav-link/angular/app_module_ts.md
@@ -0,0 +1,20 @@
+```ts
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { RouterModule } from '@angular/router';
+
+import { IonicModule } from '@ionic/angular';
+
+import { AppComponent } from './app.component';
+
+import { PageOneComponent } from './page-one.component';
+import { PageTwoComponent } from './page-two.component';
+import { PageThreeComponent } from './page-three.component';
+
+@NgModule({
+  imports: [BrowserModule, RouterModule, IonicModule.forRoot({})],
+  declarations: [AppComponent, PageOneComponent, PageTwoComponent, PageThreeComponent],
+  bootstrap: [AppComponent],
+})
+export class AppModule {}
+```
diff --git a/static/usage/nav/nav-link/angular/page_one_component_ts.md b/static/usage/nav/nav-link/angular/page_one_component_ts.md
new file mode 100644
index 00000000000..0145562aeb9
--- /dev/null
+++ b/static/usage/nav/nav-link/angular/page_one_component_ts.md
@@ -0,0 +1,25 @@
+```ts
+import { Component } from '@angular/core';
+
+import { PageTwoComponent } from './page-two.component';
+
+@Component({
+  selector: 'app-page-one',
+  template: `
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>Page One</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content class="ion-padding">
+      <h1>Page One</h1>
+      <ion-nav-link router-direction="forward" [component]="pageTwo">
+        <ion-button>Go to Page Two</ion-button>
+      </ion-nav-link>
+    </ion-content>
+  `,
+})
+export class PageOneComponent {
+  pageTwo = PageTwoComponent;
+}
+```
diff --git a/static/usage/nav/nav-link/angular/page_three_component_ts.md b/static/usage/nav/nav-link/angular/page_three_component_ts.md
new file mode 100644
index 00000000000..d9e95ed7218
--- /dev/null
+++ b/static/usage/nav/nav-link/angular/page_three_component_ts.md
@@ -0,0 +1,21 @@
+```ts
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-page-one',
+  template: `
+    <ion-header>
+      <ion-toolbar>
+        <ion-buttons slot="start">
+          <ion-back-button></ion-back-button>
+        </ion-buttons>
+        <ion-title>Page Three</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content class="ion-padding">
+      <h1>Page Three</h1>
+    </ion-content>
+  `,
+})
+export class PageThreeComponent {}
+```
diff --git a/static/usage/nav/nav-link/angular/page_two_component_ts.md b/static/usage/nav/nav-link/angular/page_two_component_ts.md
new file mode 100644
index 00000000000..a2938a0e7a1
--- /dev/null
+++ b/static/usage/nav/nav-link/angular/page_two_component_ts.md
@@ -0,0 +1,30 @@
+```ts
+import { Component } from '@angular/core';
+
+import { PageThreeComponent } from './page-three.component';
+
+@Component({
+  selector: 'app-page-two',
+  template: `
+    <ion-header>
+      <ion-toolbar>
+        <ion-buttons slot="start">
+          <ion-back-button></ion-back-button>
+        </ion-buttons>
+        <ion-title>Page Two</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content class="ion-padding">
+      <h1>Page Two</h1>
+      <div>
+        <ion-nav-link router-direction="forward" [component]="pageThree">
+          <ion-button>Go to Page Three</ion-button>
+        </ion-nav-link>
+      </div>
+    </ion-content>
+  `,
+})
+export class PageTwoComponent {
+  pageThree = PageThreeComponent;
+}
+```
diff --git a/static/usage/nav/nav-link/demo.html b/static/usage/nav/nav-link/demo.html
new file mode 100644
index 00000000000..d813dfe8a87
--- /dev/null
+++ b/static/usage/nav/nav-link/demo.html
@@ -0,0 +1,84 @@
+<!DOCTYPE html>
+
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Nav | NavLink</title>
+  <link rel="stylesheet" href="../../common.css" />
+  <script src="../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+</head>
+
+<body>
+  <ion-app>
+    <ion-nav root="page-one"></ion-nav>
+  </ion-app>
+
+  <script>
+    class PageOne extends HTMLElement {
+      connectedCallback() {
+        this.innerHTML = `
+        <ion-header>
+          <ion-toolbar>
+            <ion-title>Page One</ion-title>
+          </ion-toolbar>
+        </ion-header>
+        <ion-content class="ion-padding">
+          <h1>Page One</h1>
+          <ion-nav-link router-direction="forward" component="page-two">
+            <ion-button>Go to Page Two</ion-button>
+          </ion-nav-link>
+        </ion-content>
+      `;
+      }
+    }
+    class PageTwo extends HTMLElement {
+      connectedCallback() {
+        this.innerHTML = `
+        <ion-header>
+          <ion-toolbar>
+            <ion-buttons slot="start">
+              <ion-back-button></ion-back-button>
+            </ion-buttons>
+            <ion-title>Page Two</ion-title>
+          </ion-toolbar>
+        </ion-header>
+        <ion-content class="ion-padding">
+          <h1>Page Two</h1>
+          <div>
+            <ion-nav-link router-direction="forward" component="page-three">
+              <ion-button>Go to Page Three</ion-button>
+            </ion-nav-link>
+          </div>
+        </ion-content>
+      `;
+      }
+    }
+    class PageThree extends HTMLElement {
+      connectedCallback() {
+        this.innerHTML = `
+        <ion-header>
+          <ion-toolbar>
+            <ion-buttons slot="start">
+              <ion-back-button></ion-back-button>
+            </ion-buttons>
+            <ion-title>Page Three</ion-title>
+          </ion-toolbar>
+        </ion-header>
+        <ion-content class="ion-padding">
+          <h1>Page Three</h1>
+        </ion-content>
+      `;
+      }
+    }
+    customElements.define('page-one', PageOne);
+    customElements.define('page-two', PageTwo);
+    customElements.define('page-three', PageThree);
+  </script>
+
+</body>
+
+</html>
diff --git a/static/usage/nav/nav-link/index.md b/static/usage/nav/nav-link/index.md
new file mode 100644
index 00000000000..fe46fd7a3fa
--- /dev/null
+++ b/static/usage/nav/nav-link/index.md
@@ -0,0 +1,27 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import angular_app_module_ts from './angular/app_module_ts.md';
+import angular_app_component_html from './angular/app_component_html.md';
+import angular_app_component_ts from './angular/app_component_ts.md';
+import angular_page_one_component_ts from './angular/page_one_component_ts.md';
+import angular_page_two_component_ts from './angular/page_two_component_ts.md';
+import angular_page_three_component_ts from './angular/page_three_component_ts.md';
+
+<Playground
+  code={{
+    javascript,
+    angular: {
+      files: {
+        'src/app/app.component.html': angular_app_component_html,
+        'src/app/app.component.ts': angular_app_component_ts,
+        'src/app/page-one.component.ts': angular_page_one_component_ts,
+        'src/app/page-two.component.ts': angular_page_two_component_ts,
+        'src/app/page-three.component.ts': angular_page_three_component_ts,
+        'src/app/app.module.ts': angular_app_module_ts,
+      },
+    },
+  }}
+  src="usage/nav/nav-link/demo.html"
+/>
diff --git a/static/usage/nav/nav-link/javascript.md b/static/usage/nav/nav-link/javascript.md
new file mode 100644
index 00000000000..faf19dc3ca7
--- /dev/null
+++ b/static/usage/nav/nav-link/javascript.md
@@ -0,0 +1,67 @@
+```html
+<ion-app>
+  <ion-nav root="page-one"></ion-nav>
+</ion-app>
+
+<script>
+  class PageOne extends HTMLElement {
+    connectedCallback() {
+      this.innerHTML = `
+        <ion-header>
+          <ion-toolbar>
+            <ion-title>Page One</ion-title>
+          </ion-toolbar>
+        </ion-header>
+        <ion-content class="ion-padding">
+          <h1>Page One</h1>
+          <ion-nav-link router-direction="forward" component="page-two">
+            <ion-button>Go to Page Two</ion-button>
+          </ion-nav-link>
+        </ion-content>
+      `;
+    }
+  }
+  class PageTwo extends HTMLElement {
+    connectedCallback() {
+      this.innerHTML = `
+        <ion-header>
+          <ion-toolbar>
+            <ion-buttons slot="start">
+              <ion-back-button></ion-back-button>
+            </ion-buttons>
+            <ion-title>Page Two</ion-title>
+          </ion-toolbar>
+        </ion-header>
+        <ion-content class="ion-padding">
+          <h1>Page Two</h1>
+          <div>
+            <ion-nav-link router-direction="forward" component="page-three">
+              <ion-button>Go to Page Three</ion-button>
+            </ion-nav-link>
+          </div>
+        </ion-content>
+      `;
+    }
+  }
+  class PageThree extends HTMLElement {
+    connectedCallback() {
+      this.innerHTML = `
+        <ion-header>
+          <ion-toolbar>
+            <ion-buttons slot="start">
+              <ion-back-button></ion-back-button>
+            </ion-buttons>
+            <ion-title>Page Three</ion-title>
+          </ion-toolbar>
+        </ion-header>
+        <ion-content class="ion-padding">
+          <h1>Page Three</h1>
+        </ion-content>
+      `;
+    }
+  }
+  customElements.define('page-one', PageOne);
+  customElements.define('page-two', PageTwo);
+  customElements.define('page-three', PageThree);
+</script>
+```

From efcdd0dd8d09b840ffc29933df82f5801ec8259a Mon Sep 17 00:00:00 2001
From: Sean Perkins <sean@ionic.io>
Date: Wed, 22 Jun 2022 11:55:31 -0400
Subject: [PATCH 02/11] wip(): react example

---
 docs/api/nav.md                               |  2 +
 static/usage/nav/nav-link/index.md            | 13 +++++++
 static/usage/nav/nav-link/react/main_tsx.md   | 11 ++++++
 .../usage/nav/nav-link/react/page_one_tsx.md  | 26 +++++++++++++
 .../nav/nav-link/react/page_three_tsx.md      | 24 ++++++++++++
 .../usage/nav/nav-link/react/page_two_tsx.md  | 39 +++++++++++++++++++
 6 files changed, 115 insertions(+)
 create mode 100644 static/usage/nav/nav-link/react/main_tsx.md
 create mode 100644 static/usage/nav/nav-link/react/page_one_tsx.md
 create mode 100644 static/usage/nav/nav-link/react/page_three_tsx.md
 create mode 100644 static/usage/nav/nav-link/react/page_two_tsx.md

diff --git a/docs/api/nav.md b/docs/api/nav.md
index 4cd9f5587d7..5e649ae8912 100644
--- a/docs/api/nav.md
+++ b/docs/api/nav.md
@@ -42,6 +42,8 @@ TODO: Playground Example
 
 ## Using NavLink
 
+NavLink is a simplified API when interacting with Nav. Developers can customize the component, pass along component properties, modify the direction of the route animation or define a custom animation when navigating. 
+
 import NavLinkExample from '@site/static/usage/nav/nav-link/index.md';
 
 <NavLinkExample />
diff --git a/static/usage/nav/nav-link/index.md b/static/usage/nav/nav-link/index.md
index fe46fd7a3fa..0b309dc58f0 100644
--- a/static/usage/nav/nav-link/index.md
+++ b/static/usage/nav/nav-link/index.md
@@ -9,6 +9,11 @@ import angular_page_one_component_ts from './angular/page_one_component_ts.md';
 import angular_page_two_component_ts from './angular/page_two_component_ts.md';
 import angular_page_three_component_ts from './angular/page_three_component_ts.md';
 
+import react_main_tsx from './react/main_tsx.md';
+import react_page_one_tsx from './react/page_one_tsx.md';
+import react_page_two_tsx from './react/page_two_tsx.md';
+import react_page_three_tsx from './react/page_three_tsx.md';
+
 <Playground
   code={{
     javascript,
@@ -22,6 +27,14 @@ import angular_page_three_component_ts from './angular/page_three_component_ts.m
         'src/app/app.module.ts': angular_app_module_ts,
       },
     },
+    react: {
+      files: {
+        'src/main.tsx': react_main_tsx,
+        'src/page-one.tsx': react_page_one_tsx,
+        'src/page-two.tsx': react_page_two_tsx,
+        'src/page-three.tsx': react_page_three_tsx,
+      },
+    },
   }}
   src="usage/nav/nav-link/demo.html"
 />
diff --git a/static/usage/nav/nav-link/react/main_tsx.md b/static/usage/nav/nav-link/react/main_tsx.md
new file mode 100644
index 00000000000..f6196a362e9
--- /dev/null
+++ b/static/usage/nav/nav-link/react/main_tsx.md
@@ -0,0 +1,11 @@
+```tsx
+import React from 'react';
+import { IonNav } from '@ionic/react';
+
+import PageOne from './page-one';
+
+function Example() {
+  return <IonNav root={() => <PageOne />}></IonNav>;
+}
+export default Example;
+```
diff --git a/static/usage/nav/nav-link/react/page_one_tsx.md b/static/usage/nav/nav-link/react/page_one_tsx.md
new file mode 100644
index 00000000000..25cb4d087c2
--- /dev/null
+++ b/static/usage/nav/nav-link/react/page_one_tsx.md
@@ -0,0 +1,26 @@
+```tsx
+import React from 'react';
+import { IonButton, IonHeader, IonContent, IonNavLink, IonToolbar, IonTitle, IonPage } from '@ionic/react';
+
+import PageTwo from './page-two';
+
+function PageOne() {
+  return (
+    <IonPage>
+      <IonHeader>
+        <IonToolbar>
+          <IonTitle>Page One</IonTitle>
+        </IonToolbar>
+      </IonHeader>
+      <IonContent class="ion-padding">
+        <h1>Page One</h1>
+        <IonNavLink routerDirection="forward" component={() => <PageTwo />}>
+          <IonButton>Go to Page Two</IonButton>
+        </IonNavLink>
+      </IonContent>
+    </IonPage>
+  );
+}
+
+export default PageOne;
+```
diff --git a/static/usage/nav/nav-link/react/page_three_tsx.md b/static/usage/nav/nav-link/react/page_three_tsx.md
new file mode 100644
index 00000000000..02b5ba6b406
--- /dev/null
+++ b/static/usage/nav/nav-link/react/page_three_tsx.md
@@ -0,0 +1,24 @@
+```tsx
+import React from 'react';
+import { IonBackButton, IonButtons, IonHeader, IonContent, IonToolbar, IonTitle, IonPage } from '@ionic/react';
+
+function PageThree() {
+  return (
+    <IonPage>
+      <IonHeader>
+        <IonToolbar>
+          <IonButtons slot="start">
+            <IonBackButton></IonBackButton>
+          </IonButtons>
+          <IonTitle>Page Three</IonTitle>
+        </IonToolbar>
+      </IonHeader>
+      <IonContent class="ion-padding">
+        <h1>Page Three</h1>
+      </IonContent>
+    </IonPage>
+  );
+}
+
+export default PageThree;
+```
diff --git a/static/usage/nav/nav-link/react/page_two_tsx.md b/static/usage/nav/nav-link/react/page_two_tsx.md
new file mode 100644
index 00000000000..2ba3d75f7ab
--- /dev/null
+++ b/static/usage/nav/nav-link/react/page_two_tsx.md
@@ -0,0 +1,39 @@
+```tsx
+import React from 'react';
+import {
+  IonBackButton,
+  IonButtons,
+  IonButton,
+  IonHeader,
+  IonContent,
+  IonNavLink,
+  IonToolbar,
+  IonTitle,
+  IonPage,
+} from '@ionic/react';
+
+import PageThree from './page-three';
+
+function PageTwo() {
+  return (
+    <IonPage>
+      <IonHeader>
+        <IonToolbar>
+          <IonButtons slot="start">
+            <IonBackButton></IonBackButton>
+          </IonButtons>
+          <IonTitle>Page Two</IonTitle>
+        </IonToolbar>
+      </IonHeader>
+      <IonContent class="ion-padding">
+        <h1>Page Two</h1>
+        <IonNavLink routerDirection="forward" component={() => <PageThree />}>
+          <IonButton>Go to Page Three</IonButton>
+        </IonNavLink>
+      </IonContent>
+    </IonPage>
+  );
+}
+
+export default PageTwo;
+```

From b27d02148e01406708ec1fc12a5b83b219693a92 Mon Sep 17 00:00:00 2001
From: Sean Perkins <sean@ionic.io>
Date: Tue, 5 Jul 2022 22:00:26 -0400
Subject: [PATCH 03/11] docs(): vue nav-link example

---
 static/usage/nav/nav-link/index.md            | 13 ++++++++
 static/usage/nav/nav-link/vue/example_vue.md  | 19 ++++++++++++
 static/usage/nav/nav-link/vue/page_one_vue.md | 31 +++++++++++++++++++
 .../usage/nav/nav-link/vue/page_three_vue.md  | 25 +++++++++++++++
 static/usage/nav/nav-link/vue/page_two_vue.md | 31 +++++++++++++++++++
 5 files changed, 119 insertions(+)
 create mode 100644 static/usage/nav/nav-link/vue/example_vue.md
 create mode 100644 static/usage/nav/nav-link/vue/page_one_vue.md
 create mode 100644 static/usage/nav/nav-link/vue/page_three_vue.md
 create mode 100644 static/usage/nav/nav-link/vue/page_two_vue.md

diff --git a/static/usage/nav/nav-link/index.md b/static/usage/nav/nav-link/index.md
index 0b309dc58f0..e0bcea0661b 100644
--- a/static/usage/nav/nav-link/index.md
+++ b/static/usage/nav/nav-link/index.md
@@ -14,6 +14,11 @@ import react_page_one_tsx from './react/page_one_tsx.md';
 import react_page_two_tsx from './react/page_two_tsx.md';
 import react_page_three_tsx from './react/page_three_tsx.md';
 
+import vue_example from './vue/example_vue.md';
+import vue_page_one from './vue/page_one_vue.md';
+import vue_page_two from './vue/page_two_vue.md';
+import vue_page_three from './vue/page_three_vue.md';
+
 <Playground
   code={{
     javascript,
@@ -35,6 +40,14 @@ import react_page_three_tsx from './react/page_three_tsx.md';
         'src/page-three.tsx': react_page_three_tsx,
       },
     },
+    vue: {
+      files: {
+        'src/components/Example.vue': vue_example,
+        'src/components/PageOne.vue': vue_page_one,
+        'src/components/PageTwo.vue': vue_page_two,
+        'src/components/PageThree.vue': vue_page_three,
+      },
+    },
   }}
   src="usage/nav/nav-link/demo.html"
 />
diff --git a/static/usage/nav/nav-link/vue/example_vue.md b/static/usage/nav/nav-link/vue/example_vue.md
new file mode 100644
index 00000000000..ec054a80749
--- /dev/null
+++ b/static/usage/nav/nav-link/vue/example_vue.md
@@ -0,0 +1,19 @@
+```html
+<template>
+  <ion-nav :root="component"></ion-nav>
+</template>
+
+<script lang="ts">
+  import { IonNav } from '@ionic/vue';
+  import PageOne from './PageOne.vue';
+
+  export default {
+    components: { IonNav },
+    data() {
+      return {
+        component: PageOne,
+      };
+    },
+  };
+</script>
+```
diff --git a/static/usage/nav/nav-link/vue/page_one_vue.md b/static/usage/nav/nav-link/vue/page_one_vue.md
new file mode 100644
index 00000000000..0cd03901703
--- /dev/null
+++ b/static/usage/nav/nav-link/vue/page_one_vue.md
@@ -0,0 +1,31 @@
+```html
+<template>
+  <ion-page>
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>Page One</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content class="ion-padding">
+      <h1>Page One</h1>
+      <ion-nav-link router-direction="forward" :component="component">
+        <ion-button>Go to Page Two</ion-button>
+      </ion-nav-link>
+    </ion-content>
+  </ion-page>
+</template>
+
+<script lang="ts">
+  import { IonPage, IonHeader, IonTitle, IonToolbar, IonContent, IonNavLink, IonButton } from '@ionic/vue';
+  import PageTwo from './PageTwo.vue';
+
+  export default {
+    components: { IonPage, IonHeader, IonTitle, IonToolbar, IonContent, IonNavLink, IonButton },
+    data() {
+      return {
+        component: PageTwo,
+      };
+    },
+  };
+</script>
+```
diff --git a/static/usage/nav/nav-link/vue/page_three_vue.md b/static/usage/nav/nav-link/vue/page_three_vue.md
new file mode 100644
index 00000000000..542cfb916d9
--- /dev/null
+++ b/static/usage/nav/nav-link/vue/page_three_vue.md
@@ -0,0 +1,25 @@
+```html
+<template>
+  <ion-page>
+    <ion-header>
+      <ion-toolbar>
+        <ion-buttons slot="start">
+          <ion-back-button></ion-back-button>
+        </ion-buttons>
+        <ion-title>Page Three</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content class="ion-padding">
+      <h1>Page Three</h1>
+    </ion-content>
+  </ion-page>
+</template>
+
+<script lang="ts">
+  import { IonPage, IonHeader, IonTitle, IonToolbar, IonContent, IonButtons, IonBackButton } from '@ionic/vue';
+
+  export default {
+    components: { IonPage, IonHeader, IonTitle, IonToolbar, IonContent, IonButtons, IonBackButton },
+  };
+</script>
+```
diff --git a/static/usage/nav/nav-link/vue/page_two_vue.md b/static/usage/nav/nav-link/vue/page_two_vue.md
new file mode 100644
index 00000000000..a02a9bc6d9d
--- /dev/null
+++ b/static/usage/nav/nav-link/vue/page_two_vue.md
@@ -0,0 +1,31 @@
+```html
+<template>
+  <ion-page>
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>Page Two</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content class="ion-padding">
+      <h1>Page Two</h1>
+      <ion-nav-link router-direction="forward" :component="component">
+        <ion-button>Go to Page Three</ion-button>
+      </ion-nav-link>
+    </ion-content>
+  </ion-page>
+</template>
+
+<script lang="ts">
+  import { IonPage, IonHeader, IonTitle, IonToolbar, IonContent, IonNavLink, IonButton } from '@ionic/vue';
+  import PageThree from './PageThree.vue';
+
+  export default {
+    components: { IonPage, IonHeader, IonTitle, IonToolbar, IonContent, IonNavLink, IonButton },
+    data() {
+      return {
+        component: PageThree,
+      };
+    },
+  };
+</script>
+```

From fe321b77e1d26ecb97a2a2b6eb3c279886b51336 Mon Sep 17 00:00:00 2001
From: Sean Perkins <sean@ionic.io>
Date: Tue, 5 Jul 2022 22:03:41 -0400
Subject: [PATCH 04/11] docs(): make angular example match other examples

---
 static/usage/nav/nav-link/angular/app_component_html.md    | 2 +-
 static/usage/nav/nav-link/angular/app_component_ts.md      | 2 +-
 static/usage/nav/nav-link/angular/page_one_component_ts.md | 4 ++--
 static/usage/nav/nav-link/angular/page_two_component_ts.md | 4 ++--
 4 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/static/usage/nav/nav-link/angular/app_component_html.md b/static/usage/nav/nav-link/angular/app_component_html.md
index 078dc23a556..1534ea3a6ec 100644
--- a/static/usage/nav/nav-link/angular/app_component_html.md
+++ b/static/usage/nav/nav-link/angular/app_component_html.md
@@ -1,3 +1,3 @@
 ```html
-<ion-nav [root]="pageOne"></ion-nav>
+<ion-nav [root]="component"></ion-nav>
 ```
diff --git a/static/usage/nav/nav-link/angular/app_component_ts.md b/static/usage/nav/nav-link/angular/app_component_ts.md
index 4b261cd344f..472f41634da 100644
--- a/static/usage/nav/nav-link/angular/app_component_ts.md
+++ b/static/usage/nav/nav-link/angular/app_component_ts.md
@@ -8,6 +8,6 @@ import { PageOneComponent } from './page-one.component';
   templateUrl: 'app.component.html',
 })
 export class AppComponent {
-  pageOne = PageOneComponent;
+  component = PageOneComponent;
 }
 ```
diff --git a/static/usage/nav/nav-link/angular/page_one_component_ts.md b/static/usage/nav/nav-link/angular/page_one_component_ts.md
index 0145562aeb9..06c42b342cf 100644
--- a/static/usage/nav/nav-link/angular/page_one_component_ts.md
+++ b/static/usage/nav/nav-link/angular/page_one_component_ts.md
@@ -13,13 +13,13 @@ import { PageTwoComponent } from './page-two.component';
     </ion-header>
     <ion-content class="ion-padding">
       <h1>Page One</h1>
-      <ion-nav-link router-direction="forward" [component]="pageTwo">
+      <ion-nav-link router-direction="forward" [component]="component">
         <ion-button>Go to Page Two</ion-button>
       </ion-nav-link>
     </ion-content>
   `,
 })
 export class PageOneComponent {
-  pageTwo = PageTwoComponent;
+  component = PageTwoComponent;
 }
 ```
diff --git a/static/usage/nav/nav-link/angular/page_two_component_ts.md b/static/usage/nav/nav-link/angular/page_two_component_ts.md
index a2938a0e7a1..d6edd90a593 100644
--- a/static/usage/nav/nav-link/angular/page_two_component_ts.md
+++ b/static/usage/nav/nav-link/angular/page_two_component_ts.md
@@ -17,7 +17,7 @@ import { PageThreeComponent } from './page-three.component';
     <ion-content class="ion-padding">
       <h1>Page Two</h1>
       <div>
-        <ion-nav-link router-direction="forward" [component]="pageThree">
+        <ion-nav-link router-direction="forward" [component]="component">
           <ion-button>Go to Page Three</ion-button>
         </ion-nav-link>
       </div>
@@ -25,6 +25,6 @@ import { PageThreeComponent } from './page-three.component';
   `,
 })
 export class PageTwoComponent {
-  pageThree = PageThreeComponent;
+  component = PageThreeComponent;
 }
 ```

From fbc7f74828242896d99e21ab94639cdf99b97531 Mon Sep 17 00:00:00 2001
From: Sean Perkins <sean@ionic.io>
Date: Wed, 6 Jul 2022 10:20:02 -0400
Subject: [PATCH 05/11] docs(): wip modal nav

---
 docs/api/nav.md                               |   4 +-
 static/usage/nav/modal-navigation/demo.html   | 100 ++++++++++++++++++
 static/usage/nav/modal-navigation/index.md    |  11 ++
 .../usage/nav/modal-navigation/javascript.md  |  82 ++++++++++++++
 4 files changed, 196 insertions(+), 1 deletion(-)
 create mode 100644 static/usage/nav/modal-navigation/demo.html
 create mode 100644 static/usage/nav/modal-navigation/index.md
 create mode 100644 static/usage/nav/modal-navigation/javascript.md

diff --git a/docs/api/nav.md b/docs/api/nav.md
index 5e649ae8912..77949adfe2f 100644
--- a/docs/api/nav.md
+++ b/docs/api/nav.md
@@ -50,7 +50,9 @@ import NavLinkExample from '@site/static/usage/nav/nav-link/index.md';
 
 ## Navigation within a Modal
 
-TODO: Playground Example
+import ModalNavigationExample from '@site/static/usage/nav/modal-navigation/index.md';
+
+<ModalNavigationExample />
 
 ## Animations
 
diff --git a/static/usage/nav/modal-navigation/demo.html b/static/usage/nav/modal-navigation/demo.html
new file mode 100644
index 00000000000..9397bb087cd
--- /dev/null
+++ b/static/usage/nav/modal-navigation/demo.html
@@ -0,0 +1,100 @@
+<!DOCTYPE html>
+
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Nav | Modal Navigation</title>
+  <link rel="stylesheet" href="../../common.css" />
+  <script src="../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+</head>
+
+<body>
+  <ion-app>
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>Modal Navigation</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content>
+      <ion-button id="openModal">Open Modal</ion-button>
+      <ion-modal trigger="openModal">
+        <ion-header>
+          <ion-toolbar>
+            <ion-buttons slot="start">
+              <ion-button id="backButton" disabled="true" onclick="navigateBack()">
+                <ion-icon slot="icon-only" name="chevron-back-outline"></ion-icon>
+              </ion-button>
+            </ion-buttons>
+            <ion-title>Modal</ion-title>
+          </ion-toolbar>
+        </ion-header>
+        <ion-content>
+          <ion-nav></ion-nav>
+        </ion-content>
+      </ion-modal>
+    </ion-content>
+  </ion-app>
+
+  <script>
+    const modal = document.querySelector('ion-modal');
+    const nav = document.querySelector('ion-nav');
+    const backButton = document.querySelector('#backButton');
+
+    modal.addEventListener('willPresent', () => {
+      nav.push('page-one');
+    });
+
+    const navigate = (component) => {
+      nav.push(component);
+      backButton.disabled = false;
+    }
+
+    const navigateBack = () => {
+      nav.pop();
+    }
+
+    class PageOne extends HTMLElement {
+      connectedCallback() {
+        this.innerHTML = `
+        <ion-content class="ion-padding">
+          <h1>Page One</h1>
+          <ion-button onclick="navigate('page-two')">Go to Page Two</ion-button>
+        </ion-content>
+      `;
+      }
+    }
+
+    class PageTwo extends HTMLElement {
+      connectedCallback() {
+        this.innerHTML = `
+        <ion-content class="ion-padding">
+          <h1>Page Two</h1>
+          <ion-button onclick="navigate('page-three')">Go to Page Three</ion-button>
+        </ion-content>
+      `;
+      }
+    }
+
+    class PageThree extends HTMLElement {
+      connectedCallback() {
+        this.innerHTML = `
+        <ion-content class="ion-padding">
+          <h1>Page Three</h1>
+        </ion-content>
+      `;
+      }
+    }
+
+    customElements.define('page-one', PageOne);
+    customElements.define('page-two', PageTwo);
+    customElements.define('page-three', PageThree);
+
+  </script>
+
+</body>
+
+</html>
diff --git a/static/usage/nav/modal-navigation/index.md b/static/usage/nav/modal-navigation/index.md
new file mode 100644
index 00000000000..53d11c3ccb5
--- /dev/null
+++ b/static/usage/nav/modal-navigation/index.md
@@ -0,0 +1,11 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+<Playground
+  code={{
+    javascript,
+  }}
+  src="usage/nav/modal-navigation/demo.html"
+  devicePreview
+/>
diff --git a/static/usage/nav/modal-navigation/javascript.md b/static/usage/nav/modal-navigation/javascript.md
new file mode 100644
index 00000000000..27151fd05e2
--- /dev/null
+++ b/static/usage/nav/modal-navigation/javascript.md
@@ -0,0 +1,82 @@
+```html
+<ion-app>
+  <ion-header>
+    <ion-toolbar>
+      <ion-title>Modal Navigation</ion-title>
+    </ion-toolbar>
+  </ion-header>
+  <ion-content>
+    <ion-button id="openModal">Open Modal</ion-button>
+    <ion-modal trigger="openModal">
+      <ion-header>
+        <ion-toolbar>
+          <ion-buttons slot="start">
+            <ion-button id="backButton" disabled="true" onclick="navigateBack()">
+              <ion-icon slot="icon-only" name="chevron-back-outline"></ion-icon>
+            </ion-button>
+          </ion-buttons>
+          <ion-title>Modal</ion-title>
+        </ion-toolbar>
+      </ion-header>
+      <ion-content>
+        <ion-nav></ion-nav>
+      </ion-content>
+    </ion-modal>
+  </ion-content>
+</ion-app>
+
+<script>
+  const modal = document.querySelector('ion-modal');
+  const nav = document.querySelector('ion-nav');
+  const backButton = document.querySelector('#backButton');
+
+  modal.addEventListener('willPresent', () => {
+    nav.push('page-one');
+  });
+
+  const navigate = (component) => {
+    nav.push(component);
+    backButton.disabled = false;
+  };
+
+  const navigateBack = () => {
+    nav.pop();
+  };
+
+  class PageOne extends HTMLElement {
+    connectedCallback() {
+      this.innerHTML = `
+        <ion-content class="ion-padding">
+          <h1>Page One</h1>
+          <ion-button onclick="navigate('page-two')">Go to Page Two</ion-button>
+        </ion-content>
+      `;
+    }
+  }
+
+  class PageTwo extends HTMLElement {
+    connectedCallback() {
+      this.innerHTML = `
+        <ion-content class="ion-padding">
+          <h1>Page Two</h1>
+          <ion-button onclick="navigate('page-three')">Go to Page Three</ion-button>
+        </ion-content>
+      `;
+    }
+  }
+
+  class PageThree extends HTMLElement {
+    connectedCallback() {
+      this.innerHTML = `
+        <ion-content class="ion-padding">
+          <h1>Page Three</h1>
+        </ion-content>
+      `;
+    }
+  }
+
+  customElements.define('page-one', PageOne);
+  customElements.define('page-two', PageTwo);
+  customElements.define('page-three', PageThree);
+</script>
+```

From af701cbbae6de3600d8341938d4abc420da500f0 Mon Sep 17 00:00:00 2001
From: Sean Perkins <sean@ionic.io>
Date: Fri, 15 Jul 2022 12:44:23 -0400
Subject: [PATCH 06/11] chore(): update demo

---
 docs/api/nav.md                               |  3 +++
 static/usage/nav/modal-navigation/demo.html   | 20 ++++++++++++-------
 .../usage/nav/modal-navigation/javascript.md  | 20 +++++++++++--------
 3 files changed, 28 insertions(+), 15 deletions(-)

diff --git a/docs/api/nav.md b/docs/api/nav.md
index 77949adfe2f..4dfcdc74401 100644
--- a/docs/api/nav.md
+++ b/docs/api/nav.md
@@ -50,6 +50,9 @@ import NavLinkExample from '@site/static/usage/nav/nav-link/index.md';
 
 ## Navigation within a Modal
 
+
+Modal experiences can use Nav to offer navigation within the overlay. This is useful for navigation that is independent of the apps URL.
+
 import ModalNavigationExample from '@site/static/usage/nav/modal-navigation/index.md';
 
 <ModalNavigationExample />
diff --git a/static/usage/nav/modal-navigation/demo.html b/static/usage/nav/modal-navigation/demo.html
index 9397bb087cd..e8d3f5e84ab 100644
--- a/static/usage/nav/modal-navigation/demo.html
+++ b/static/usage/nav/modal-navigation/demo.html
@@ -24,12 +24,12 @@
       <ion-modal trigger="openModal">
         <ion-header>
           <ion-toolbar>
-            <ion-buttons slot="start">
-              <ion-button id="backButton" disabled="true" onclick="navigateBack()">
-                <ion-icon slot="icon-only" name="chevron-back-outline"></ion-icon>
+            <ion-title>Modal</ion-title>
+            <ion-buttons slot="end">
+              <ion-button onclick="dismiss()">
+                Close
               </ion-button>
             </ion-buttons>
-            <ion-title>Modal</ion-title>
           </ion-toolbar>
         </ion-header>
         <ion-content>
@@ -42,21 +42,25 @@
   <script>
     const modal = document.querySelector('ion-modal');
     const nav = document.querySelector('ion-nav');
-    const backButton = document.querySelector('#backButton');
 
     modal.addEventListener('willPresent', () => {
-      nav.push('page-one');
+      nav.setRoot('page-one');
     });
 
+    const dismiss = () => modal.dismiss();
+
     const navigate = (component) => {
       nav.push(component);
-      backButton.disabled = false;
     }
 
     const navigateBack = () => {
       nav.pop();
     }
 
+    const navigateToRoot = () => {
+      nav.popToRoot();
+    }
+
     class PageOne extends HTMLElement {
       connectedCallback() {
         this.innerHTML = `
@@ -84,6 +88,8 @@ <h1>Page Two</h1>
         this.innerHTML = `
         <ion-content class="ion-padding">
           <h1>Page Three</h1>
+          <ion-button onclick="navigateBack()">Go Back</ion-button>
+          <ion-button onclick="navigateToRoot()">Go to Root</ion-button>
         </ion-content>
       `;
       }
diff --git a/static/usage/nav/modal-navigation/javascript.md b/static/usage/nav/modal-navigation/javascript.md
index 27151fd05e2..511ca67ad53 100644
--- a/static/usage/nav/modal-navigation/javascript.md
+++ b/static/usage/nav/modal-navigation/javascript.md
@@ -10,12 +10,10 @@
     <ion-modal trigger="openModal">
       <ion-header>
         <ion-toolbar>
-          <ion-buttons slot="start">
-            <ion-button id="backButton" disabled="true" onclick="navigateBack()">
-              <ion-icon slot="icon-only" name="chevron-back-outline"></ion-icon>
-            </ion-button>
-          </ion-buttons>
           <ion-title>Modal</ion-title>
+          <ion-buttons slot="end">
+            <ion-button onclick="dismiss()"> Close </ion-button>
+          </ion-buttons>
         </ion-toolbar>
       </ion-header>
       <ion-content>
@@ -28,21 +26,25 @@
 <script>
   const modal = document.querySelector('ion-modal');
   const nav = document.querySelector('ion-nav');
-  const backButton = document.querySelector('#backButton');
 
   modal.addEventListener('willPresent', () => {
-    nav.push('page-one');
+    nav.setRoot('page-one');
   });
 
+  const dismiss = () => modal.dismiss();
+
   const navigate = (component) => {
     nav.push(component);
-    backButton.disabled = false;
   };
 
   const navigateBack = () => {
     nav.pop();
   };
 
+  const navigateToRoot = () => {
+    nav.popToRoot();
+  };
+
   class PageOne extends HTMLElement {
     connectedCallback() {
       this.innerHTML = `
@@ -70,6 +72,8 @@
       this.innerHTML = `
         <ion-content class="ion-padding">
           <h1>Page Three</h1>
+          <ion-button onclick="navigateBack()">Go Back</ion-button>
+          <ion-button onclick="navigateToRoot()">Go to Root</ion-button>
         </ion-content>
       `;
     }

From ed775fb3c7d3183d341d63632372945e41ec9535 Mon Sep 17 00:00:00 2001
From: Sean Perkins <sean@ionic.io>
Date: Mon, 18 Jul 2022 16:07:44 -0400
Subject: [PATCH 07/11] wip(): vue and angular examples, react in progress

---
 docs/api/nav.md                               |  2 +
 .../angular/app_component_html.md             | 25 ++++++++
 .../angular/app_component_ts.md               | 18 ++++++
 .../modal-navigation/angular/app_module_ts.md | 20 +++++++
 .../angular/page_one_component_ts.md          | 23 +++++++
 .../angular/page_three_component_ts.md        | 26 ++++++++
 .../angular/page_two_component_ts.md          | 25 ++++++++
 static/usage/nav/modal-navigation/index.md    | 43 +++++++++++++
 .../nav/modal-navigation/react/main_tsx.md    | 33 ++++++++++
 .../modal-navigation/react/page_one_tsx.md    | 18 ++++++
 .../modal-navigation/react/page_three_tsx.md  | 19 ++++++
 .../modal-navigation/react/page_two_tsx.md    | 19 ++++++
 .../nav/modal-navigation/vue/example_vue.md   | 60 +++++++++++++++++++
 .../nav/modal-navigation/vue/page_one_vue.md  | 24 ++++++++
 .../modal-navigation/vue/page_three_vue.md    | 28 +++++++++
 .../nav/modal-navigation/vue/page_two_vue.md  | 24 ++++++++
 16 files changed, 407 insertions(+)
 create mode 100644 static/usage/nav/modal-navigation/angular/app_component_html.md
 create mode 100644 static/usage/nav/modal-navigation/angular/app_component_ts.md
 create mode 100644 static/usage/nav/modal-navigation/angular/app_module_ts.md
 create mode 100644 static/usage/nav/modal-navigation/angular/page_one_component_ts.md
 create mode 100644 static/usage/nav/modal-navigation/angular/page_three_component_ts.md
 create mode 100644 static/usage/nav/modal-navigation/angular/page_two_component_ts.md
 create mode 100644 static/usage/nav/modal-navigation/react/main_tsx.md
 create mode 100644 static/usage/nav/modal-navigation/react/page_one_tsx.md
 create mode 100644 static/usage/nav/modal-navigation/react/page_three_tsx.md
 create mode 100644 static/usage/nav/modal-navigation/react/page_two_tsx.md
 create mode 100644 static/usage/nav/modal-navigation/vue/example_vue.md
 create mode 100644 static/usage/nav/modal-navigation/vue/page_one_vue.md
 create mode 100644 static/usage/nav/modal-navigation/vue/page_three_vue.md
 create mode 100644 static/usage/nav/modal-navigation/vue/page_two_vue.md

diff --git a/docs/api/nav.md b/docs/api/nav.md
index 4dfcdc74401..678c4c6ab61 100644
--- a/docs/api/nav.md
+++ b/docs/api/nav.md
@@ -53,6 +53,8 @@ import NavLinkExample from '@site/static/usage/nav/nav-link/index.md';
 
 Modal experiences can use Nav to offer navigation within the overlay. This is useful for navigation that is independent of the apps URL.
 
+The example below uses a reference to Nav and the public method APIs to push and pop views. It is recommended to use NavLink in implementations that do not require this level of granular access and control.
+
 import ModalNavigationExample from '@site/static/usage/nav/modal-navigation/index.md';
 
 <ModalNavigationExample />
diff --git a/static/usage/nav/modal-navigation/angular/app_component_html.md b/static/usage/nav/modal-navigation/angular/app_component_html.md
new file mode 100644
index 00000000000..0a41e05a60c
--- /dev/null
+++ b/static/usage/nav/modal-navigation/angular/app_component_html.md
@@ -0,0 +1,25 @@
+```html
+<ion-header>
+  <ion-toolbar>
+    <ion-title>Modal Navigation</ion-title>
+  </ion-toolbar>
+</ion-header>
+<ion-content>
+  <ion-button id="openModal">Open Modal</ion-button>
+  <ion-modal #modal trigger="openModal" (willPresent)="onWillPresent()">
+    <ng-template>
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Modal</ion-title>
+          <ion-buttons slot="end">
+            <ion-button (click)="modal.dismiss()"> Close </ion-button>
+          </ion-buttons>
+        </ion-toolbar>
+      </ion-header>
+      <ion-content>
+        <ion-nav #nav></ion-nav>
+      </ion-content>
+    </ng-template>
+  </ion-modal>
+</ion-content>
+```
diff --git a/static/usage/nav/modal-navigation/angular/app_component_ts.md b/static/usage/nav/modal-navigation/angular/app_component_ts.md
new file mode 100644
index 00000000000..4d5bc2bd1c5
--- /dev/null
+++ b/static/usage/nav/modal-navigation/angular/app_component_ts.md
@@ -0,0 +1,18 @@
+```ts
+import { Component, ViewChild } from '@angular/core';
+import { IonNav } from '@ionic/angular';
+
+import { PageOneComponent } from './page-one.component';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: 'app.component.html',
+})
+export class AppComponent {
+  @ViewChild('nav') private nav: IonNav;
+
+  onWillPresent() {
+    this.nav.setRoot(PageOneComponent);
+  }
+}
+```
diff --git a/static/usage/nav/modal-navigation/angular/app_module_ts.md b/static/usage/nav/modal-navigation/angular/app_module_ts.md
new file mode 100644
index 00000000000..17eb272293f
--- /dev/null
+++ b/static/usage/nav/modal-navigation/angular/app_module_ts.md
@@ -0,0 +1,20 @@
+```ts
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { RouterModule } from '@angular/router';
+
+import { IonicModule } from '@ionic/angular';
+
+import { AppComponent } from './app.component';
+
+import { PageOneComponent } from './page-one.component';
+import { PageTwoComponent } from './page-two.component';
+import { PageThreeComponent } from './page-three.component';
+
+@NgModule({
+  imports: [BrowserModule, RouterModule.forRoot([]), IonicModule.forRoot({})],
+  declarations: [AppComponent, PageOneComponent, PageTwoComponent, PageThreeComponent],
+  bootstrap: [AppComponent],
+})
+export class AppModule {}
+```
diff --git a/static/usage/nav/modal-navigation/angular/page_one_component_ts.md b/static/usage/nav/modal-navigation/angular/page_one_component_ts.md
new file mode 100644
index 00000000000..3c9ec863d04
--- /dev/null
+++ b/static/usage/nav/modal-navigation/angular/page_one_component_ts.md
@@ -0,0 +1,23 @@
+```ts
+import { Component } from '@angular/core';
+import { IonNav } from '@ionic/angular';
+
+import { PageTwoComponent } from './page-two.component';
+
+@Component({
+  selector: 'app-page-one',
+  template: `
+    <ion-content class="ion-padding">
+      <h1>Page One</h1>
+      <ion-button (click)="navigateToPageTwo()">Go to Page Two</ion-button>
+    </ion-content>
+  `,
+})
+export class PageOneComponent {
+  constructor(private nav: IonNav) {}
+
+  navigateToPageTwo() {
+    this.nav.push(PageTwoComponent);
+  }
+}
+```
diff --git a/static/usage/nav/modal-navigation/angular/page_three_component_ts.md b/static/usage/nav/modal-navigation/angular/page_three_component_ts.md
new file mode 100644
index 00000000000..5b1b70c3474
--- /dev/null
+++ b/static/usage/nav/modal-navigation/angular/page_three_component_ts.md
@@ -0,0 +1,26 @@
+```ts
+import { Component } from '@angular/core';
+import { IonNav } from '@ionic/angular';
+
+@Component({
+  selector: 'app-page-one',
+  template: `
+    <ion-content class="ion-padding">
+      <h1>Page Three</h1>
+      <ion-button (click)="navigateBack()">Go Back</ion-button>
+      <ion-button (click)="navigateToRoot()">Go to Root</ion-button>
+    </ion-content>
+  `,
+})
+export class PageThreeComponent {
+  constructor(private nav: IonNav) {}
+
+  navigateBack() {
+    this.nav.pop();
+  }
+
+  navigateToRoot() {
+    this.nav.popToRoot();
+  }
+}
+```
diff --git a/static/usage/nav/modal-navigation/angular/page_two_component_ts.md b/static/usage/nav/modal-navigation/angular/page_two_component_ts.md
new file mode 100644
index 00000000000..0cd5713c062
--- /dev/null
+++ b/static/usage/nav/modal-navigation/angular/page_two_component_ts.md
@@ -0,0 +1,25 @@
+```ts
+import { Component } from '@angular/core';
+import { IonNav } from '@ionic/angular';
+
+import { PageThreeComponent } from './page-three.component';
+
+@Component({
+  selector: 'app-page-two',
+  template: `
+    <ion-content class="ion-padding">
+      <h1>Page Two</h1>
+      <ion-button (click)="navigateToPageThree()">Go to Page Three</ion-button>
+    </ion-content>
+  `,
+})
+export class PageTwoComponent {
+  component = PageThreeComponent;
+
+  constructor(private nav: IonNav) {}
+
+  navigateToPageThree() {
+    this.nav.push(PageThreeComponent);
+  }
+}
+```
diff --git a/static/usage/nav/modal-navigation/index.md b/static/usage/nav/modal-navigation/index.md
index 53d11c3ccb5..5821f957c0c 100644
--- a/static/usage/nav/modal-navigation/index.md
+++ b/static/usage/nav/modal-navigation/index.md
@@ -2,9 +2,52 @@ import Playground from '@site/src/components/global/Playground';
 
 import javascript from './javascript.md';
 
+import angular_app_module_ts from './angular/app_module_ts.md';
+import angular_app_component_ts from './angular/app_component_ts.md';
+import angular_app_component_html from './angular/app_component_html.md';
+import angular_page_one_component_ts from './angular/page_one_component_ts.md';
+import angular_page_two_component_ts from './angular/page_two_component_ts.md';
+import angular_page_three_component_ts from './angular/page_three_component_ts.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_page_one_tsx from './react/page_one_tsx.md';
+import react_page_two_tsx from './react/page_two_tsx.md';
+import react_page_three_tsx from './react/page_three_tsx.md';
+
+import vue_example from './vue/example_vue.md';
+import vue_page_one from './vue/page_one_vue.md';
+import vue_page_two from './vue/page_two_vue.md';
+import vue_page_three from './vue/page_three_vue.md';
+
 <Playground
   code={{
     javascript,
+    angular: {
+      files: {
+        'src/app/app.component.html': angular_app_component_html,
+        'src/app/app.component.ts': angular_app_component_ts,
+        'src/app/page-one.component.ts': angular_page_one_component_ts,
+        'src/app/page-two.component.ts': angular_page_two_component_ts,
+        'src/app/page-three.component.ts': angular_page_three_component_ts,
+        'src/app/app.module.ts': angular_app_module_ts,
+      },
+    },
+    react: {
+      files: {
+        'src/main.tsx': react_main_tsx,
+        'src/page-one.tsx': react_page_one_tsx,
+        'src/page-two.tsx': react_page_two_tsx,
+        'src/page-three.tsx': react_page_three_tsx,
+      },
+    },
+    vue: {
+      files: {
+        'src/components/Example.vue': vue_example,
+        'src/components/PageOne.vue': vue_page_one,
+        'src/components/PageTwo.vue': vue_page_two,
+        'src/components/PageThree.vue': vue_page_three,
+      },
+    },
   }}
   src="usage/nav/modal-navigation/demo.html"
   devicePreview
diff --git a/static/usage/nav/modal-navigation/react/main_tsx.md b/static/usage/nav/modal-navigation/react/main_tsx.md
new file mode 100644
index 00000000000..cde75ce76b7
--- /dev/null
+++ b/static/usage/nav/modal-navigation/react/main_tsx.md
@@ -0,0 +1,33 @@
+```tsx
+import React, { useRef } from 'react';
+import { IonNav, IonPage, IonHeader, IonToolbar, IonTitle, IonButton, IonContent, IonModal } from '@ionic/react';
+
+import PageOne from './page-one';
+
+function Example() {
+  const nav = useRef<HTMLIonNavElement>();
+
+  const onWillPresent = () => {
+    if (nav.current) {
+      nav.current.setRoot(PageOne, { nav: nav.current });
+    }
+  };
+
+  return (
+    <IonPage>
+      <IonHeader>
+        <IonToolbar>
+          <IonTitle>Modal Navigation</IonTitle>
+        </IonToolbar>
+      </IonHeader>
+      <IonContent>
+        <IonButton id="openModal">Open Modal</IonButton>
+        <IonModal trigger="openModal" onWillPresent={onWillPresent}>
+          <IonNav></IonNav>
+        </IonModal>
+      </IonContent>
+    </IonPage>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/nav/modal-navigation/react/page_one_tsx.md b/static/usage/nav/modal-navigation/react/page_one_tsx.md
new file mode 100644
index 00000000000..ce5c266e21b
--- /dev/null
+++ b/static/usage/nav/modal-navigation/react/page_one_tsx.md
@@ -0,0 +1,18 @@
+```tsx
+import React from 'react';
+import { IonButton, IonContent } from '@ionic/react';
+
+import PageTwo from './page-two';
+
+function PageOne({ nav }: { nav: HTMLIonNavElement }) {
+  const navigateToPageTwo = () => nav.push(PageTwo, { nav });
+  return (
+    <IonContent class="ion-padding">
+      <h1>Page One</h1>
+      <IonButton onClick={navigateToPageTwo}>Go to Page Two</IonButton>
+    </IonContent>
+  );
+}
+
+export default PageOne;
+```
diff --git a/static/usage/nav/modal-navigation/react/page_three_tsx.md b/static/usage/nav/modal-navigation/react/page_three_tsx.md
new file mode 100644
index 00000000000..3613967edfd
--- /dev/null
+++ b/static/usage/nav/modal-navigation/react/page_three_tsx.md
@@ -0,0 +1,19 @@
+```tsx
+import React from 'react';
+import { IonButton, IonContent } from '@ionic/react';
+
+function PageThree({ nav }: { nav: HTMLIonNavElement }) {
+  const navigateBack = () => nav.pop();
+  const navigateToRoot = () => nav.popToRoot();
+
+  return (
+    <IonContent class="ion-padding">
+      <h1>Page Three</h1>
+      <IonButton onClick={navigateBack}>Go Back</IonButton>
+      <IonButton onClick={navigateToRoot}>Go to Root</IonButton>
+    </IonContent>
+  );
+}
+
+export default PageThree;
+```
diff --git a/static/usage/nav/modal-navigation/react/page_two_tsx.md b/static/usage/nav/modal-navigation/react/page_two_tsx.md
new file mode 100644
index 00000000000..48562bd23cd
--- /dev/null
+++ b/static/usage/nav/modal-navigation/react/page_two_tsx.md
@@ -0,0 +1,19 @@
+```tsx
+import React from 'react';
+import { IonButton, IonContent } from '@ionic/react';
+
+import PageThree from './page-three';
+
+function PageTwo({ nav }: { nav: HTMLIonNavElement }) {
+  const navigateToPageThree = () => nav.push(PageThree, { nav });
+
+  return (
+    <IonContent class="ion-padding">
+      <h1>Page Two</h1>
+      <IonButton onClick={navigateToPageThree}>Go to Page Three</IonButton>
+    </IonContent>
+  );
+}
+
+export default PageTwo;
+```
diff --git a/static/usage/nav/modal-navigation/vue/example_vue.md b/static/usage/nav/modal-navigation/vue/example_vue.md
new file mode 100644
index 00000000000..018fb3369d2
--- /dev/null
+++ b/static/usage/nav/modal-navigation/vue/example_vue.md
@@ -0,0 +1,60 @@
+```html
+<template>
+  <ion-page>
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>Modal Navigation</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content>
+      <ion-button id="openModal">Open Modal</ion-button>
+      <ion-modal ref="modal" trigger="openModal" @will-present="onWillPresent">
+        <ion-header>
+          <ion-toolbar>
+            <ion-title>Modal</ion-title>
+            <ion-buttons slot="end">
+              <ion-button @click="dismiss"> Close </ion-button>
+            </ion-buttons>
+          </ion-toolbar>
+        </ion-header>
+        <ion-content>
+          <ion-nav ref="nav"></ion-nav>
+        </ion-content>
+      </ion-modal>
+    </ion-content>
+  </ion-page>
+</template>
+
+<script lang="ts">
+  import { nextTick } from 'vue';
+  import {
+    IonNav,
+    IonPage,
+    IonHeader,
+    IonToolbar,
+    IonTitle,
+    IonContent,
+    IonButton,
+    IonModal,
+    IonButtons,
+  } from '@ionic/vue';
+  import PageOne from './PageOne.vue';
+
+  export default {
+    components: { IonNav, IonPage, IonHeader, IonToolbar, IonTitle, IonContent, IonButton, IonModal, IonButtons },
+    methods: {
+      dismiss() {
+        this.$refs.modal.$el.dismiss();
+      },
+      async onWillPresent() {
+        // Need to wait two ticks before the ref is set
+        await nextTick();
+        await nextTick();
+
+        const nav = this.$refs.nav.$el;
+        nav.setRoot(PageOne, { nav });
+      },
+    },
+  };
+</script>
+```
diff --git a/static/usage/nav/modal-navigation/vue/page_one_vue.md b/static/usage/nav/modal-navigation/vue/page_one_vue.md
new file mode 100644
index 00000000000..94613725139
--- /dev/null
+++ b/static/usage/nav/modal-navigation/vue/page_one_vue.md
@@ -0,0 +1,24 @@
+```html
+<template>
+  <ion-content class="ion-padding">
+    <h1>Page One</h1>
+    <ion-button @click="navigateToPageTwo">Go to Page Two</ion-button>
+  </ion-content>
+</template>
+
+<script lang="ts">
+  import { IonContent, IonButton } from '@ionic/vue';
+  import PageTwo from './PageTwo.vue';
+
+  export default {
+    components: { IonContent, IonButton },
+    props: ['nav'],
+    methods: {
+      navigateToPageTwo() {
+        const { nav } = this;
+        nav.push(PageTwo, { nav });
+      },
+    },
+  };
+</script>
+```
diff --git a/static/usage/nav/modal-navigation/vue/page_three_vue.md b/static/usage/nav/modal-navigation/vue/page_three_vue.md
new file mode 100644
index 00000000000..9dde8817996
--- /dev/null
+++ b/static/usage/nav/modal-navigation/vue/page_three_vue.md
@@ -0,0 +1,28 @@
+```html
+<template>
+  <ion-content class="ion-padding">
+    <h1>Page Three</h1>
+    <ion-button @click="navigateBack">Go Back</ion-button>
+    <ion-button @click="navigateToRoot">Go to Root</ion-button>
+  </ion-content>
+</template>
+
+<script lang="ts">
+  import { IonContent, IonButton } from '@ionic/vue';
+
+  export default {
+    components: { IonContent, IonButton },
+    props: ['nav'],
+    methods: {
+      navigateBack() {
+        const { nav } = this;
+        nav.pop();
+      },
+      navigateToRoot() {
+        const { nav } = this;
+        nav.popToRoot();
+      },
+    },
+  };
+</script>
+```
diff --git a/static/usage/nav/modal-navigation/vue/page_two_vue.md b/static/usage/nav/modal-navigation/vue/page_two_vue.md
new file mode 100644
index 00000000000..737fa71158b
--- /dev/null
+++ b/static/usage/nav/modal-navigation/vue/page_two_vue.md
@@ -0,0 +1,24 @@
+```html
+<template>
+  <ion-content class="ion-padding">
+    <h1>Page Two</h1>
+    <ion-button @click="navigateToPageThree">Go to Page Three</ion-button>
+  </ion-content>
+</template>
+
+<script lang="ts">
+  import { IonContent, IonButton } from '@ionic/vue';
+  import PageThree from './PageThree.vue';
+
+  export default {
+    components: { IonContent, IonButton },
+    props: ['nav'],
+    methods: {
+      navigateToPageThree() {
+        const { nav } = this;
+        nav.push(PageThree, { nav });
+      },
+    },
+  };
+</script>
+```

From 539567d5c4ac56365e1353057dadc408c094b843 Mon Sep 17 00:00:00 2001
From: Sean Perkins <sean@ionic.io>
Date: Tue, 26 Jul 2022 15:06:09 -0400
Subject: [PATCH 08/11] fix(): remaining examples

---
 .../usage/nav/modal-navigation/javascript.md  |  8 ++--
 .../nav/modal-navigation/react/main_tsx.md    | 37 ++++++++++++++++---
 2 files changed, 36 insertions(+), 9 deletions(-)

diff --git a/static/usage/nav/modal-navigation/javascript.md b/static/usage/nav/modal-navigation/javascript.md
index 511ca67ad53..c6e571959a5 100644
--- a/static/usage/nav/modal-navigation/javascript.md
+++ b/static/usage/nav/modal-navigation/javascript.md
@@ -31,17 +31,17 @@
     nav.setRoot('page-one');
   });
 
-  const dismiss = () => modal.dismiss();
+  var dismiss = () => modal.dismiss();
 
-  const navigate = (component) => {
+  var navigate = (component) => {
     nav.push(component);
   };
 
-  const navigateBack = () => {
+  var navigateBack = () => {
     nav.pop();
   };
 
-  const navigateToRoot = () => {
+  var navigateToRoot = () => {
     nav.popToRoot();
   };
 
diff --git a/static/usage/nav/modal-navigation/react/main_tsx.md b/static/usage/nav/modal-navigation/react/main_tsx.md
index cde75ce76b7..be4c01e1972 100644
--- a/static/usage/nav/modal-navigation/react/main_tsx.md
+++ b/static/usage/nav/modal-navigation/react/main_tsx.md
@@ -1,18 +1,35 @@
 ```tsx
 import React, { useRef } from 'react';
-import { IonNav, IonPage, IonHeader, IonToolbar, IonTitle, IonButton, IonContent, IonModal } from '@ionic/react';
+import {
+  IonNav,
+  IonPage,
+  IonHeader,
+  IonToolbar,
+  IonTitle,
+  IonButton,
+  IonButtons,
+  IonContent,
+  IonModal,
+} from '@ionic/react';
 
 import PageOne from './page-one';
 
 function Example() {
-  const nav = useRef<HTMLIonNavElement>();
+  const nav = useRef<HTMLIonNavElement>(null);
+  const modal = useRef<HTMLIonModalElement>(null);
 
-  const onWillPresent = () => {
+  const didPresent = () => {
     if (nav.current) {
       nav.current.setRoot(PageOne, { nav: nav.current });
     }
   };
 
+  const dismiss = () => {
+    if (modal.current) {
+      modal.current.dismiss();
+    }
+  };
+
   return (
     <IonPage>
       <IonHeader>
@@ -22,8 +39,18 @@ function Example() {
       </IonHeader>
       <IonContent>
         <IonButton id="openModal">Open Modal</IonButton>
-        <IonModal trigger="openModal" onWillPresent={onWillPresent}>
-          <IonNav></IonNav>
+        <IonModal ref={modal} trigger="openModal" onDidPresent={didPresent}>
+          <IonHeader>
+            <IonToolbar>
+              <IonTitle>Modal</IonTitle>
+              <IonButtons slot="end">
+                <IonButton onClick={dismiss}>Close</IonButton>
+              </IonButtons>
+            </IonToolbar>
+          </IonHeader>
+          <IonContent>
+            <IonNav ref={nav}></IonNav>
+          </IonContent>
         </IonModal>
       </IonContent>
     </IonPage>

From 54957da1c427256f80fd98dc89031088d3761029 Mon Sep 17 00:00:00 2001
From: Sean Perkins <sean@ionic.io>
Date: Mon, 15 Aug 2022 16:48:48 -0400
Subject: [PATCH 09/11] chore(): clean-up + bump package lock

---
 docs/api/nav.md                               | 17 ++----
 .../code/stackblitz/react/package-lock.json   | 61 ++++++++++++-------
 2 files changed, 44 insertions(+), 34 deletions(-)

diff --git a/docs/api/nav.md b/docs/api/nav.md
index 678c4c6ab61..dfb9f7c7ec9 100644
--- a/docs/api/nav.md
+++ b/docs/api/nav.md
@@ -36,10 +36,6 @@ Nav is a standalone component for loading arbitrary components and pushing new c
 
 Unlike Router Outlet, Nav is not tied to a particular router. This means that if we load a Nav component, and push other components to the stack, they will not affect the app's overall router. This fits use cases where you could have a modal, which needs its own sub-navigation, without making it tied to the apps URL.
 
-## Using NavController
-
-TODO: Playground Example
-
 ## Using NavLink
 
 NavLink is a simplified API when interacting with Nav. Developers can customize the component, pass along component properties, modify the direction of the route animation or define a custom animation when navigating. 
@@ -50,23 +46,18 @@ import NavLinkExample from '@site/static/usage/nav/nav-link/index.md';
 
 ## Navigation within a Modal
 
+Modal can use Nav to offer a linear navigation that is independent of the URL.
 
-Modal experiences can use Nav to offer navigation within the overlay. This is useful for navigation that is independent of the apps URL.
+:::note
 
 The example below uses a reference to Nav and the public method APIs to push and pop views. It is recommended to use NavLink in implementations that do not require this level of granular access and control.
 
+:::
+
 import ModalNavigationExample from '@site/static/usage/nav/modal-navigation/index.md';
 
 <ModalNavigationExample />
 
-## Animations
-
-TODO: Playground Example
-
-## Event Handling
-
-TODO: Playground Example
-
 ## Interfaces
 
 ### NavCustomEvent
diff --git a/static/code/stackblitz/react/package-lock.json b/static/code/stackblitz/react/package-lock.json
index 4531aeadb45..614b0d32709 100644
--- a/static/code/stackblitz/react/package-lock.json
+++ b/static/code/stackblitz/react/package-lock.json
@@ -8,7 +8,7 @@
       "name": "create-react-app-typescript",
       "version": "0.1.0",
       "dependencies": {
-        "@ionic/react": "^6.0.0",
+        "@ionic/react": "^6.2.0",
         "@types/node": "^16.11.35",
         "@types/react": "^18.0.9",
         "@types/react-dom": "^18.0.4",
@@ -2187,9 +2187,9 @@
       "integrity": "sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA=="
     },
     "node_modules/@ionic/core": {
-      "version": "6.1.10",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.1.10.tgz",
-      "integrity": "sha512-QmQvIe+IklQhNhbq438I3eCnL6XjfTxrgO1+paOdGNKk3R3o4mqJmV0YYT5r9iwnieHgDxKbo3ovs9UnTXhI7g==",
+      "version": "6.2.2",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.2.2.tgz",
+      "integrity": "sha512-neE+JhtQ7Kb4nGoKR3e55edHQot5BZTw+woV9+pbyCXP1jGeyFeWWPYBYYOkm05TSEkHgh0v6NkV9y31k8GTNw==",
       "dependencies": {
         "@stencil/core": "^2.16.0",
         "ionicons": "^6.0.2",
@@ -2197,11 +2197,11 @@
       }
     },
     "node_modules/@ionic/react": {
-      "version": "6.1.10",
-      "resolved": "https://registry.npmjs.org/@ionic/react/-/react-6.1.10.tgz",
-      "integrity": "sha512-3XivIon+43cD0QLBAkfi9+9BX0tFL1P0g34Og+DStHdXXtDBgSwqqVW8P96K45uRb7gZuBx9bccb9z9ntOCcig==",
+      "version": "6.2.2",
+      "resolved": "https://registry.npmjs.org/@ionic/react/-/react-6.2.2.tgz",
+      "integrity": "sha512-CRuDJbNDn9bbDba37/5v9aZ2gd450XGklGqXmsxEfadh1iq7iWmqcgw14S0ZDAXQt0aE/J+TeKhTyjyutjsAww==",
       "dependencies": {
-        "@ionic/core": "^6.1.10",
+        "@ionic/core": "^6.2.2",
         "ionicons": "^6.0.2",
         "tslib": "*"
       },
@@ -3124,9 +3124,9 @@
       }
     },
     "node_modules/@stencil/core": {
-      "version": "2.16.1",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.16.1.tgz",
-      "integrity": "sha512-s/UJp9qxExL3DyQPT70kiuWeb3AdjbUZM+5lEIXn30I2DLcLYPOPXfsoWJODieQywq+3vPiLZeIdkoqjf6jcSw==",
+      "version": "2.17.3",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.17.3.tgz",
+      "integrity": "sha512-qw2DZzOpyaltLLEfYRTj3n+XbvRtkmv4QQimYDJubC6jMY0NXK9r6H2+VyszdbbVmvK1D9GqZtyvY0NmOrztsg==",
       "bin": {
         "stencil": "bin/stencil"
       },
@@ -8307,6 +8307,18 @@
         "@stencil/core": "~2.16.0"
       }
     },
+    "node_modules/ionicons/node_modules/@stencil/core": {
+      "version": "2.16.1",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.16.1.tgz",
+      "integrity": "sha512-s/UJp9qxExL3DyQPT70kiuWeb3AdjbUZM+5lEIXn30I2DLcLYPOPXfsoWJODieQywq+3vPiLZeIdkoqjf6jcSw==",
+      "bin": {
+        "stencil": "bin/stencil"
+      },
+      "engines": {
+        "node": ">=12.10.0",
+        "npm": ">=6.0.0"
+      }
+    },
     "node_modules/ipaddr.js": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-2.0.1.tgz",
@@ -17539,9 +17551,9 @@
       "integrity": "sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA=="
     },
     "@ionic/core": {
-      "version": "6.1.10",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.1.10.tgz",
-      "integrity": "sha512-QmQvIe+IklQhNhbq438I3eCnL6XjfTxrgO1+paOdGNKk3R3o4mqJmV0YYT5r9iwnieHgDxKbo3ovs9UnTXhI7g==",
+      "version": "6.2.2",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.2.2.tgz",
+      "integrity": "sha512-neE+JhtQ7Kb4nGoKR3e55edHQot5BZTw+woV9+pbyCXP1jGeyFeWWPYBYYOkm05TSEkHgh0v6NkV9y31k8GTNw==",
       "requires": {
         "@stencil/core": "^2.16.0",
         "ionicons": "^6.0.2",
@@ -17549,11 +17561,11 @@
       }
     },
     "@ionic/react": {
-      "version": "6.1.10",
-      "resolved": "https://registry.npmjs.org/@ionic/react/-/react-6.1.10.tgz",
-      "integrity": "sha512-3XivIon+43cD0QLBAkfi9+9BX0tFL1P0g34Og+DStHdXXtDBgSwqqVW8P96K45uRb7gZuBx9bccb9z9ntOCcig==",
+      "version": "6.2.2",
+      "resolved": "https://registry.npmjs.org/@ionic/react/-/react-6.2.2.tgz",
+      "integrity": "sha512-CRuDJbNDn9bbDba37/5v9aZ2gd450XGklGqXmsxEfadh1iq7iWmqcgw14S0ZDAXQt0aE/J+TeKhTyjyutjsAww==",
       "requires": {
-        "@ionic/core": "^6.1.10",
+        "@ionic/core": "^6.2.2",
         "ionicons": "^6.0.2",
         "tslib": "*"
       }
@@ -18218,9 +18230,9 @@
       }
     },
     "@stencil/core": {
-      "version": "2.16.1",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.16.1.tgz",
-      "integrity": "sha512-s/UJp9qxExL3DyQPT70kiuWeb3AdjbUZM+5lEIXn30I2DLcLYPOPXfsoWJODieQywq+3vPiLZeIdkoqjf6jcSw=="
+      "version": "2.17.3",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.17.3.tgz",
+      "integrity": "sha512-qw2DZzOpyaltLLEfYRTj3n+XbvRtkmv4QQimYDJubC6jMY0NXK9r6H2+VyszdbbVmvK1D9GqZtyvY0NmOrztsg=="
     },
     "@surma/rollup-plugin-off-main-thread": {
       "version": "2.2.3",
@@ -21996,6 +22008,13 @@
       "integrity": "sha512-AyKfFaUKVoBz4eB8XkU7H1R5HFnVsgq5ijqSdbXC0lES9PDK/J6LUQz6XUJq0mVVQF5k9kczSPOLMW3mszG0mQ==",
       "requires": {
         "@stencil/core": "~2.16.0"
+      },
+      "dependencies": {
+        "@stencil/core": {
+          "version": "2.16.1",
+          "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.16.1.tgz",
+          "integrity": "sha512-s/UJp9qxExL3DyQPT70kiuWeb3AdjbUZM+5lEIXn30I2DLcLYPOPXfsoWJODieQywq+3vPiLZeIdkoqjf6jcSw=="
+        }
       }
     },
     "ipaddr.js": {

From 772410ffad570f552e7fae627f9bf743c28ec7f9 Mon Sep 17 00:00:00 2001
From: Sean Perkins <sean@ionic.io>
Date: Mon, 15 Aug 2022 17:03:35 -0400
Subject: [PATCH 10/11] chore(): remove inline TOC

---
 docs/api/nav.md | 11 -----------
 1 file changed, 11 deletions(-)

diff --git a/docs/api/nav.md b/docs/api/nav.md
index dfb9f7c7ec9..90b3bf8114c 100644
--- a/docs/api/nav.md
+++ b/docs/api/nav.md
@@ -1,6 +1,5 @@
 ---
 title: "ion-nav"
-hide_table_of_contents: true
 ---
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
@@ -22,16 +21,6 @@ import APITOCInline from '@components/page/api/APITOCInline';
 
 <EncapsulationPill type="shadow" />
 
-<h2 className="table-of-contents__title">Contents</h2>
-
-<APITOCInline
-  toc={toc}
-  maxHeadingLevel={2}
-  autogenerated={[Props, Events, Methods, Parts, CustomProps, Slots]}
-/>
-
-
-
 Nav is a standalone component for loading arbitrary components and pushing new components on to the stack.
 
 Unlike Router Outlet, Nav is not tied to a particular router. This means that if we load a Nav component, and push other components to the stack, they will not affect the app's overall router. This fits use cases where you could have a modal, which needs its own sub-navigation, without making it tied to the apps URL.

From 45b76dfbc6075787f83dda4457a78d2033c2c3fe Mon Sep 17 00:00:00 2001
From: Sean Perkins <sean@ionic.io>
Date: Wed, 17 Aug 2022 10:42:00 -0400
Subject: [PATCH 11/11] chore(): add padding to modal demo example

---
 static/usage/nav/modal-navigation/demo.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/static/usage/nav/modal-navigation/demo.html b/static/usage/nav/modal-navigation/demo.html
index e8d3f5e84ab..9ef92b54a39 100644
--- a/static/usage/nav/modal-navigation/demo.html
+++ b/static/usage/nav/modal-navigation/demo.html
@@ -19,7 +19,7 @@
         <ion-title>Modal Navigation</ion-title>
       </ion-toolbar>
     </ion-header>
-    <ion-content>
+    <ion-content class="ion-padding">
       <ion-button id="openModal">Open Modal</ion-button>
       <ion-modal trigger="openModal">
         <ion-header>