add custom anim support to nav outlet

Issue number: Resolves #21320

---------

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

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

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

`onDoubleClick` bindings on Ionic components do not fire when the
element is double clicked.

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

- `onDoubleClick` fires on Ionic components
- Fixed the unit testing set-up for the react test apps

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->


## Other information

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

.github/CODEOWNERS

@@ -11,9 +11,6 @@
 # In each subsection folders are ordered first by depth, then alphabetically.
 # This should make it easy to add new rules without breaking existing ones.
 
-# Global owners
-* @ionic-team/framework
-
 # Frameworks
 
 ## Angular
@@ -56,9 +53,6 @@
 /core/src/components/refresher/ @liamdebeasi
 /core/src/components/refresher-content/ @liamdebeasi
 
-# Codeowner should own the source, but everyone should own the tests
-/core/src/components/**/test/ @ionic-team/framework
-
 # Utilities
 
 /core/src/utils/animation/ @liamdebeasi

.github/workflows/actions/build-core-stencil-prerelease/action.yml

@@ -1,5 +1,10 @@
-name: 'Build Ionic Core with Stencil Nightly'
-description: 'Build Ionic Core with a Nightly Build of Stencil'
+name: 'Build Ionic Core with Stencil Prerelease'
+description: 'Build Ionic Core with a Prerelease Build of Stencil'
+inputs:
+  stencil-version:
+    description: 'The NPM tag of @stencil/core to install.'
+    type: string
+    required: true
 runs:
   using: 'composite'
   steps:
@@ -12,9 +17,9 @@ runs:
       run: npm ci
       working-directory: ./core
       shell: bash
-    - name: Install Stencil Nightly
+    - name: Install Stencil ${{ inputs.stencil-version }}
       working-directory: ./core
-      run: npm i @stencil/core@nightly
+      run: npm i @stencil/core@${{ inputs.stencil-version }}
       shell: bash
     - name: Build Core
       run: npm run build -- --ci

.github/workflows/stencil-nightly.yml

@@ -22,7 +22,9 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v3
-      - uses: ./.github/workflows/actions/build-core-stencil-nightly
+      - uses: ./.github/workflows/actions/build-core-stencil-prerelease
+        with:
+          stencil-version: nightly
 
   test-core-clean-build:
     needs: [build-core-with-stencil-nightly]

.github/workflows/stencil-v4.yml

@@ -0,0 +1,220 @@
+# This workflow is intended to run against the `HEAD` of Stencil's primary branch.
+# See https://github.com/ionic-team/stencil for contents of the repository
+name: 'Stencil v4 Build'
+
+on:
+  schedule:
+    # Run every Monday-Friday
+    # at 6:00 UTC (6:00 am UTC)
+    - cron: '00 06 * * 1-5'
+  workflow_dispatch:
+    # allows for manual invocations in the GitHub UI
+
+# When pushing a new commit we should
+# cancel the previous test run to not
+# consume more runners than we need to.
+concurrency:
+  group: ${{ github.ref }}
+  cancel-in-progress: false
+
+jobs:
+  build-core-with-stencil-v4:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: ./.github/workflows/actions/build-core-stencil-prerelease
+        with:
+          stencil-version: v4-next
+
+  test-core-clean-build:
+    needs: [build-core-with-stencil-v4]
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: ./.github/workflows/actions/test-core-clean-build
+
+  test-core-lint:
+    needs: [build-core-with-stencil-v4]
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: ./.github/workflows/actions/test-core-lint
+
+  test-core-spec:
+    needs: [build-core-with-stencil-v4]
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: ./.github/workflows/actions/test-core-spec
+
+  test-core-screenshot:
+    strategy:
+      # This ensures that all screenshot shard
+      # failures are reported so the dev can
+      # review everything at once.
+      fail-fast: false
+      matrix:
+        # Divide the tests into n buckets
+        # and run those buckets in parallel.
+        # To increase the number of shards,
+        # add new items to the shard array
+        # and change the value of totalShards
+        # to be the length of the shard array.
+        shard: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20]
+        totalShards: [20]
+    needs: [build-core-with-stencil-v4]
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: ./.github/workflows/actions/test-core-screenshot
+        with:
+          shard: ${{ matrix.shard }}
+          totalShards: ${{ matrix.totalShards }}
+
+  # Screenshots are required to pass
+  # in order for the branch to be merge
+  # eligible. However, the screenshot tests
+  # are run on n runners where n can change
+  # over time. The verify-screenshots step allows
+  # us to have a required status check for screenshot
+  # results without having to manually add each
+  # matrix run in the branch protection rules
+  # Source: https://github.community/t/status-check-for-a-matrix-jobs/127354
+  verify-screenshots:
+    if: ${{ always() }}
+    needs: test-core-screenshot
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check build matrix status
+        if: ${{ needs.test-core-screenshot.result != 'success' }}
+        run: exit 1
+
+  build-vue:
+    needs: [build-core-with-stencil-v4]
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v3
+    - uses: ./.github/workflows/actions/build-vue
+
+  build-vue-router:
+    needs: [build-vue]
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v3
+    - uses: ./.github/workflows/actions/build-vue-router
+
+  test-vue-e2e:
+    strategy:
+      fail-fast: false
+      matrix:
+        apps: [vue3]
+    needs: [build-vue, build-vue-router]
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v3
+    - uses: ./.github/workflows/actions/test-vue-e2e
+      with:
+        app: ${{ matrix.apps }}
+
+  verify-test-vue-e2e:
+    if: ${{ always() }}
+    needs: test-vue-e2e
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check build matrix status
+        if: ${{ needs.test-vue-e2e.result != 'success' }}
+        run: exit 1
+
+  build-angular:
+    needs: [build-core-with-stencil-v4]
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v3
+    - uses: ./.github/workflows/actions/build-angular
+
+  build-angular-server:
+    needs: [build-angular]
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v3
+    - uses: ./.github/workflows/actions/build-angular-server
+
+  test-angular-e2e:
+    strategy:
+      fail-fast: false
+      matrix:
+        apps: [ng12, ng13, ng14, ng15]
+    needs: [build-angular, build-angular-server]
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v3
+    - uses: ./.github/workflows/actions/test-angular-e2e
+      with:
+        app: ${{ matrix.apps }}
+
+  verify-test-angular-e2e:
+    if: ${{ always() }}
+    needs: test-angular-e2e
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check build matrix status
+        if: ${{ needs.test-angular-e2e.result != 'success' }}
+        run: exit 1
+
+  build-react:
+    needs: [build-core-with-stencil-v4]
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v3
+    - uses: ./.github/workflows/actions/build-react
+
+  build-react-router:
+    needs: [build-react]
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v3
+    - uses: ./.github/workflows/actions/build-react-router
+
+  test-react-router-e2e:
+    strategy:
+      fail-fast: false
+      matrix:
+        apps: [reactrouter5]
+    needs: [build-react, build-react-router]
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v3
+    - uses: ./.github/workflows/actions/test-react-router-e2e
+      with:
+        app: ${{ matrix.apps }}
+
+  verify-test-react-router-e2e:
+    if: ${{ always() }}
+    needs: test-react-router-e2e
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check build matrix status
+        if: ${{ needs.test-react-router-e2e.result != 'success' }}
+        run: exit 1
+
+  test-react-e2e:
+    strategy:
+      fail-fast: false
+      matrix:
+        apps: [react17, react18]
+    needs: [build-react, build-react-router]
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v3
+    - uses: ./.github/workflows/actions/test-react-e2e
+      with:
+        app: ${{ matrix.apps }}
+
+  verify-test-react-e2e:
+    if: ${{ always() }}
+    needs: test-react-e2e
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check build matrix status
+        if: ${{ needs.test-react-e2e.result != 'success' }}
+        run: exit 1

CHANGELOG.md

@@ -3,6 +3,61 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [7.0.12](https://github.com/ionic-team/ionic-framework/compare/v7.0.11...v7.0.12) (2023-06-08)
+
+
+### Bug Fixes
+
+* **refresher:** scroll styles are reset when using non-native refresher ([#27602](https://github.com/ionic-team/ionic-framework/issues/27602)) ([92c5545](https://github.com/ionic-team/ionic-framework/commit/92c55452fdf4ac7b8d15ce75a4e867aab9321cfb)), closes [#27601](https://github.com/ionic-team/ionic-framework/issues/27601)
+
+
+
+
+
+## [7.0.11](https://github.com/ionic-team/ionic-framework/compare/v7.0.9...v7.0.11) (2023-06-07)
+
+
+### Bug Fixes
+
+* **header, footer:** resolve CSP violations with box shadow ([#27560](https://github.com/ionic-team/ionic-framework/issues/27560)) ([e75fa58](https://github.com/ionic-team/ionic-framework/commit/e75fa582c4ca507b09f62bbce649f02ca49da7a0))
+* **item-sliding:** refresh sliding behavior when options are added or removed asynchronously ([#27572](https://github.com/ionic-team/ionic-framework/issues/27572)) ([b2a226a](https://github.com/ionic-team/ionic-framework/commit/b2a226ae663695be0666cd862510d8d843c80b9a)), closes [#25578](https://github.com/ionic-team/ionic-framework/issues/25578)
+* **keyboard:** listen on correct events for keyboard lifecycle ([#27569](https://github.com/ionic-team/ionic-framework/issues/27569)) ([7871210](https://github.com/ionic-team/ionic-framework/commit/7871210e9e4ecc09353b821b60f977498a01ee8d)), closes [#27558](https://github.com/ionic-team/ionic-framework/issues/27558)
+* **radio:** radio with modern syntax is keyboard navigable ([#27530](https://github.com/ionic-team/ionic-framework/issues/27530)) ([d87e692](https://github.com/ionic-team/ionic-framework/commit/d87e692c6c2c3d146514b093853d5e262137a9e5)), closes [#27268](https://github.com/ionic-team/ionic-framework/issues/27268)
+* **select:** prevent click event from firing twice ([#27570](https://github.com/ionic-team/ionic-framework/issues/27570)) ([ba7e60e](https://github.com/ionic-team/ionic-framework/commit/ba7e60e8669b1980b9a0c6267617894e16b4a2d4))
+
+
+
+
+
+## [7.0.10](https://github.com/ionic-team/ionic-framework/compare/v7.0.9...v7.0.10) (2023-05-31)
+
+
+### Bug Fixes
+
+* **angular:** remove invalid z-index style ([#27559](https://github.com/ionic-team/ionic-framework/issues/27559)) ([2ce00cf](https://github.com/ionic-team/ionic-framework/commit/2ce00cf292e01664e02ecaf64af229d6a371c480))
+
+
+### Performance Improvements
+
+* passive event listener for focus visible ([#27568](https://github.com/ionic-team/ionic-framework/issues/27568)) ([e54bf14](https://github.com/ionic-team/ionic-framework/commit/e54bf142c39743913d982a1f1709629b4b034969)), closes [#27566](https://github.com/ionic-team/ionic-framework/issues/27566)
+
+
+
+
+
+## [7.0.9](https://github.com/ionic-team/ionic-framework/compare/v7.0.8...v7.0.9) (2023-05-25)
+
+
+### Bug Fixes
+
+* **core:** handle uncaught native keyboard exceptions ([#27514](https://github.com/ionic-team/ionic-framework/issues/27514)) ([0e7359c](https://github.com/ionic-team/ionic-framework/commit/0e7359c07f53eccb362ff2bf331396c0376ba6f3)), closes [#27503](https://github.com/ionic-team/ionic-framework/issues/27503)
+* **react, vue:** inline modals apply ion-page class ([#27481](https://github.com/ionic-team/ionic-framework/issues/27481)) ([02678f3](https://github.com/ionic-team/ionic-framework/commit/02678f3652be5139cf0c17d0f1260c145acd1a48)), closes [#27470](https://github.com/ionic-team/ionic-framework/issues/27470)
+* **segment:** remove duplicate ripple effect on pointerup ([#27448](https://github.com/ionic-team/ionic-framework/issues/27448)) ([01f9959](https://github.com/ionic-team/ionic-framework/commit/01f99597f71b35a60a70f6d76c1e3e1917978d6d)), closes [#27338](https://github.com/ionic-team/ionic-framework/issues/27338)
+
+
+
+
+
 ## [7.0.8](https://github.com/ionic-team/ionic-framework/compare/v7.0.7...v7.0.8) (2023-05-24)
 
 

angular/CHANGELOG.md

@@ -3,6 +3,41 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [7.0.12](https://github.com/ionic-team/ionic-framework/compare/v7.0.11...v7.0.12) (2023-06-08)
+
+**Note:** Version bump only for package @ionic/angular
+
+
+
+
+
+## [7.0.11](https://github.com/ionic-team/ionic-framework/compare/v7.0.10...v7.0.11) (2023-06-07)
+
+**Note:** Version bump only for package @ionic/angular
+
+
+
+
+
+## [7.0.10](https://github.com/ionic-team/ionic-framework/compare/v7.0.9...v7.0.10) (2023-05-31)
+
+
+### Bug Fixes
+
+* **angular:** remove invalid z-index style ([#27559](https://github.com/ionic-team/ionic-framework/issues/27559)) ([2ce00cf](https://github.com/ionic-team/ionic-framework/commit/2ce00cf292e01664e02ecaf64af229d6a371c480))
+
+
+
+
+
+## [7.0.9](https://github.com/ionic-team/ionic-framework/compare/v7.0.8...v7.0.9) (2023-05-25)
+
+**Note:** Version bump only for package @ionic/angular
+
+
+
+
+
 ## [7.0.8](https://github.com/ionic-team/ionic-framework/compare/v7.0.7...v7.0.8) (2023-05-24)
 
 **Note:** Version bump only for package @ionic/angular

angular/package-lock.json

@@ -1,15 +1,15 @@
 {
   "name": "@ionic/angular",
-  "version": "7.0.8",
+  "version": "7.0.12",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/angular",
-      "version": "7.0.8",
+      "version": "7.0.12",
       "license": "MIT",
       "dependencies": {
-        "@ionic/core": "^7.0.8",
+        "@ionic/core": "^7.0.12",
         "ionicons": "^7.0.0",
         "jsonc-parser": "^3.0.0",
         "tslib": "^2.3.0"
@@ -1227,19 +1227,19 @@
       "dev": true
     },
     "node_modules/@ionic/core": {
-      "version": "7.0.7",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.0.7.tgz",
-      "integrity": "sha512-3ps2j3Utx49CVazKHHWsPS8QBZYujnh6/dwz1ovHIDTq7HXKzUNbMtHm0UAZC2YkW5rE/Pm41CIBMwfFV0ImKg==",
+      "version": "7.0.12",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.0.12.tgz",
+      "integrity": "sha512-DCBrxKQ59oghBxZOWqbJihedJ9rkVpi4ka+VGclOtndvz8PbEOsPArVUDYPGI7md3SVZ0qaVelbSwqQbyHRY7g==",
       "dependencies": {
-        "@stencil/core": "^3.2.2",
+        "@stencil/core": "^3.3.1",
         "ionicons": "^7.1.0",
         "tslib": "^2.1.0"
       }
     },
     "node_modules/@ionic/core/node_modules/@stencil/core": {
-      "version": "3.2.2",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-3.2.2.tgz",
-      "integrity": "sha512-wXb9cVWL0T3cTwYLveekdTFCRGx6+9hpVDEXna+N8K8OPoW6xtFAHRLv+LjOM7k59PkA8MG3IinAfV7Y+xa0Hw==",
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-3.3.1.tgz",
+      "integrity": "sha512-I+660Oe9OMLiU+thjV1GgcI27dcvrSpF3xisHWBOU/4mzRtho3YW0cI8lSjcqyB1KirGTA6QeQ0Xif5UHqn8hw==",
       "bin": {
         "stencil": "bin/stencil"
       },
@@ -8104,19 +8104,19 @@
       "dev": true
     },
     "@ionic/core": {
-      "version": "7.0.7",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.0.7.tgz",
-      "integrity": "sha512-3ps2j3Utx49CVazKHHWsPS8QBZYujnh6/dwz1ovHIDTq7HXKzUNbMtHm0UAZC2YkW5rE/Pm41CIBMwfFV0ImKg==",
+      "version": "7.0.12",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.0.12.tgz",
+      "integrity": "sha512-DCBrxKQ59oghBxZOWqbJihedJ9rkVpi4ka+VGclOtndvz8PbEOsPArVUDYPGI7md3SVZ0qaVelbSwqQbyHRY7g==",
       "requires": {
-        "@stencil/core": "^3.2.2",
+        "@stencil/core": "^3.3.1",
         "ionicons": "^7.1.0",
         "tslib": "^2.1.0"
       },
       "dependencies": {
         "@stencil/core": {
-          "version": "3.2.2",
-          "resolved": "https://registry.npmjs.org/@stencil/core/-/core-3.2.2.tgz",
-          "integrity": "sha512-wXb9cVWL0T3cTwYLveekdTFCRGx6+9hpVDEXna+N8K8OPoW6xtFAHRLv+LjOM7k59PkA8MG3IinAfV7Y+xa0Hw=="
+          "version": "3.3.1",
+          "resolved": "https://registry.npmjs.org/@stencil/core/-/core-3.3.1.tgz",
+          "integrity": "sha512-I+660Oe9OMLiU+thjV1GgcI27dcvrSpF3xisHWBOU/4mzRtho3YW0cI8lSjcqyB1KirGTA6QeQ0Xif5UHqn8hw=="
         }
       }
     },

angular/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ionic/angular",
-  "version": "7.0.8",
+  "version": "7.0.12",
   "description": "Angular specific wrappers for @ionic/core",
   "keywords": [
     "ionic",
@@ -47,7 +47,7 @@
     }
   },
   "dependencies": {
-    "@ionic/core": "^7.0.8",
+    "@ionic/core": "^7.0.12",
     "ionicons": "^7.0.0",
     "jsonc-parser": "^3.0.0",
     "tslib": "^2.3.0"

angular/src/directives/navigation/ion-tabs.ts

@@ -8,7 +8,7 @@ import { StackEvent } from './stack-utils';
 
 @Component({
   selector: 'ion-tabs',
-  template: ` <ng-content select="[slot=top]"></ng-content>
+  template: `<ng-content select="[slot=top]"></ng-content>
     <div class="tabs-inner">
       <ion-router-outlet #outlet tabs="true" (stackEvents)="onPageSelected($event)"></ion-router-outlet>
     </div>
@@ -29,7 +29,6 @@ import { StackEvent } from './stack-utils';
         height: 100%;
 
         contain: layout size style;
-        z-index: $z-index-page-container;
       }
       .tabs-inner {
         position: relative;

core/CHANGELOG.md

@@ -3,6 +3,60 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [7.0.12](https://github.com/ionic-team/ionic-framework/compare/v7.0.11...v7.0.12) (2023-06-08)
+
+
+### Bug Fixes
+
+* **refresher:** scroll styles are reset when using non-native refresher ([#27602](https://github.com/ionic-team/ionic-framework/issues/27602)) ([92c5545](https://github.com/ionic-team/ionic-framework/commit/92c55452fdf4ac7b8d15ce75a4e867aab9321cfb)), closes [#27601](https://github.com/ionic-team/ionic-framework/issues/27601)
+
+
+
+
+
+## [7.0.11](https://github.com/ionic-team/ionic-framework/compare/v7.0.9...v7.0.11) (2023-06-07)
+
+
+### Bug Fixes
+
+* **header, footer:** resolve CSP violations with box shadow ([#27560](https://github.com/ionic-team/ionic-framework/issues/27560)) ([e75fa58](https://github.com/ionic-team/ionic-framework/commit/e75fa582c4ca507b09f62bbce649f02ca49da7a0))
+* **item-sliding:** refresh sliding behavior when options are added or removed asynchronously ([#27572](https://github.com/ionic-team/ionic-framework/issues/27572)) ([b2a226a](https://github.com/ionic-team/ionic-framework/commit/b2a226ae663695be0666cd862510d8d843c80b9a)), closes [#25578](https://github.com/ionic-team/ionic-framework/issues/25578)
+* **keyboard:** listen on correct events for keyboard lifecycle ([#27569](https://github.com/ionic-team/ionic-framework/issues/27569)) ([7871210](https://github.com/ionic-team/ionic-framework/commit/7871210e9e4ecc09353b821b60f977498a01ee8d)), closes [#27558](https://github.com/ionic-team/ionic-framework/issues/27558)
+* **radio:** radio with modern syntax is keyboard navigable ([#27530](https://github.com/ionic-team/ionic-framework/issues/27530)) ([d87e692](https://github.com/ionic-team/ionic-framework/commit/d87e692c6c2c3d146514b093853d5e262137a9e5)), closes [#27268](https://github.com/ionic-team/ionic-framework/issues/27268)
+* **select:** prevent click event from firing twice ([#27570](https://github.com/ionic-team/ionic-framework/issues/27570)) ([ba7e60e](https://github.com/ionic-team/ionic-framework/commit/ba7e60e8669b1980b9a0c6267617894e16b4a2d4))
+
+
+### Performance Improvements
+
+* passive event listener for focus visible ([#27568](https://github.com/ionic-team/ionic-framework/issues/27568)) ([e54bf14](https://github.com/ionic-team/ionic-framework/commit/e54bf142c39743913d982a1f1709629b4b034969)), closes [#27566](https://github.com/ionic-team/ionic-framework/issues/27566)
+
+
+
+
+
+## [7.0.10](https://github.com/ionic-team/ionic-framework/compare/v7.0.9...v7.0.10) (2023-05-31)
+
+
+### Performance Improvements
+
+* passive event listener for focus visible ([#27568](https://github.com/ionic-team/ionic-framework/issues/27568)) ([e54bf14](https://github.com/ionic-team/ionic-framework/commit/e54bf142c39743913d982a1f1709629b4b034969)), closes [#27566](https://github.com/ionic-team/ionic-framework/issues/27566)
+
+
+
+
+
+## [7.0.9](https://github.com/ionic-team/ionic-framework/compare/v7.0.8...v7.0.9) (2023-05-25)
+
+
+### Bug Fixes
+
+* **core:** handle uncaught native keyboard exceptions ([#27514](https://github.com/ionic-team/ionic-framework/issues/27514)) ([0e7359c](https://github.com/ionic-team/ionic-framework/commit/0e7359c07f53eccb362ff2bf331396c0376ba6f3)), closes [#27503](https://github.com/ionic-team/ionic-framework/issues/27503)
+* **segment:** remove duplicate ripple effect on pointerup ([#27448](https://github.com/ionic-team/ionic-framework/issues/27448)) ([01f9959](https://github.com/ionic-team/ionic-framework/commit/01f99597f71b35a60a70f6d76c1e3e1917978d6d)), closes [#27338](https://github.com/ionic-team/ionic-framework/issues/27338)
+
+
+
+
+
 ## [7.0.8](https://github.com/ionic-team/ionic-framework/compare/v7.0.7...v7.0.8) (2023-05-24)
 
 

core/package-lock.json

@@ -1,30 +1,30 @@
 {
   "name": "@ionic/core",
-  "version": "7.0.8",
+  "version": "7.0.12",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/core",
-      "version": "7.0.8",
+      "version": "7.0.12",
       "license": "MIT",
       "dependencies": {
-        "@stencil/core": "^3.2.2",
+        "@stencil/core": "^3.3.1",
         "ionicons": "^7.1.0",
         "tslib": "^2.1.0"
       },
       "devDependencies": {
-        "@axe-core/playwright": "^4.7.1",
+        "@axe-core/playwright": "^4.7.2",
         "@ionic/eslint-config": "^0.3.0",
         "@ionic/prettier-config": "^2.0.0",
         "@jest/core": "^27.5.1",
-        "@playwright/test": "^1.33.0",
+        "@playwright/test": "^1.34.3",
         "@rollup/plugin-node-resolve": "^8.4.0",
         "@rollup/plugin-virtual": "^2.0.3",
-        "@stencil/angular-output-target": "^0.7.0",
-        "@stencil/react-output-target": "^0.5.0",
-        "@stencil/sass": "^3.0.3",
-        "@stencil/vue-output-target": "^0.8.5",
+        "@stencil/angular-output-target": "^0.7.1",
+        "@stencil/react-output-target": "^0.5.3",
+        "@stencil/sass": "^3.0.4",
+        "@stencil/vue-output-target": "^0.8.6",
         "@types/jest": "^27.5.2",
         "@types/node": "^14.6.0",
         "@typescript-eslint/eslint-plugin": "^5.17.0",
@@ -53,15 +53,15 @@
       "dev": true
     },
     "node_modules/@axe-core/playwright": {
-      "version": "4.7.1",
-      "resolved": "https://registry.npmjs.org/@axe-core/playwright/-/playwright-4.7.1.tgz",
-      "integrity": "sha512-09UDwLChlGiqw9004QJib6Maesy99EOZ9zsLfhBYAt2s5UwufabnD+MoTAmwe+PCv2Jex9k1taeUhebDwIJKqw==",
+      "version": "4.7.2",
+      "resolved": "https://registry.npmjs.org/@axe-core/playwright/-/playwright-4.7.2.tgz",
+      "integrity": "sha512-k5f6KGVkPsZ7wR56XnRZYS4b1Wd8wkVTpjqeScFYZMTJxKVv3FGKoBqQVBoCphWtP0oMWQc41zQgHO6gaYTcQw==",
       "dev": true,
       "dependencies": {
         "axe-core": "^4.7.0"
       },
       "peerDependencies": {
-        "playwright": ">= 1.0.0"
+        "playwright-core": ">= 1.0.0"
       }
     },
     "node_modules/@babel/code-frame": {
@@ -1501,13 +1501,13 @@
       }
     },
     "node_modules/@playwright/test": {
-      "version": "1.33.0",
-      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.33.0.tgz",
-      "integrity": "sha512-YunBa2mE7Hq4CfPkGzQRK916a4tuZoVx/EpLjeWlTVOnD4S2+fdaQZE0LJkbfhN5FTSKNLdcl7MoT5XB37bTkg==",
+      "version": "1.34.3",
+      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.34.3.tgz",
+      "integrity": "sha512-zPLef6w9P6T/iT6XDYG3mvGOqOyb6eHaV9XtkunYs0+OzxBtrPAAaHotc0X+PJ00WPPnLfFBTl7mf45Mn8DBmw==",
       "dev": true,
       "dependencies": {
         "@types/node": "*",
-        "playwright-core": "1.33.0"
+        "playwright-core": "1.34.3"
       },
       "bin": {
         "playwright": "cli.js"
@@ -1585,18 +1585,18 @@
       }
     },
     "node_modules/@stencil/angular-output-target": {
-      "version": "0.7.0",
-      "resolved": "https://registry.npmjs.org/@stencil/angular-output-target/-/angular-output-target-0.7.0.tgz",
-      "integrity": "sha512-OMK5oQHlMB2MTYMwU28TP1PfjkQWXHnH7f57sWis0XvFPznBtYTHAGCqiCjLM6toPCncEiZYsswZD+rm77QSGQ==",
+      "version": "0.7.1",
+      "resolved": "https://registry.npmjs.org/@stencil/angular-output-target/-/angular-output-target-0.7.1.tgz",
+      "integrity": "sha512-lxJbCAbyAQVAKGgEpNTjSF7GZZszbrJnNdNVgzuD1hLRFJyElA6kUSL0GQrZMbiPG5lC/cYdbQwpyWHX4xN8mw==",
       "dev": true,
       "peerDependencies": {
-        "@stencil/core": "^2.9.0 || ^3.0.0"
+        "@stencil/core": ">=2.0.0 || >=3 || >= 4.0.0-beta.0 || >= 4.0.0"
       }
     },
     "node_modules/@stencil/core": {
-      "version": "3.2.2",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-3.2.2.tgz",
-      "integrity": "sha512-wXb9cVWL0T3cTwYLveekdTFCRGx6+9hpVDEXna+N8K8OPoW6xtFAHRLv+LjOM7k59PkA8MG3IinAfV7Y+xa0Hw==",
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-3.3.1.tgz",
+      "integrity": "sha512-I+660Oe9OMLiU+thjV1GgcI27dcvrSpF3xisHWBOU/4mzRtho3YW0cI8lSjcqyB1KirGTA6QeQ0Xif5UHqn8hw==",
       "bin": {
         "stencil": "bin/stencil"
       },
@@ -1606,30 +1606,30 @@
       }
     },
     "node_modules/@stencil/react-output-target": {
-      "version": "0.5.0",
-      "resolved": "https://registry.npmjs.org/@stencil/react-output-target/-/react-output-target-0.5.0.tgz",
-      "integrity": "sha512-m2UwgrFuVXzi1h4m6I+EWDGeZV4n1wPHkzbRCS9QaqysiQEN5VIi9zjLzvPQF7O9Gg3E/W28z0yElp0kY3VuFQ==",
+      "version": "0.5.3",
+      "resolved": "https://registry.npmjs.org/@stencil/react-output-target/-/react-output-target-0.5.3.tgz",
+      "integrity": "sha512-68jwRp35CjAcwhTJ9yFD/3n+jrHOqvEH2jreVuPVvZK+4tkhPlYlwz0d1E1RlF3jyifUSfdkWUGgXIEy8Fo3yw==",
       "dev": true,
       "peerDependencies": {
-        "@stencil/core": "^2.9.0 || ^3.0.0"
+        "@stencil/core": ">=2.0.0 || >=3 || >= 4.0.0-beta.0 || >= 4.0.0"
       }
     },
     "node_modules/@stencil/sass": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/@stencil/sass/-/sass-3.0.3.tgz",
-      "integrity": "sha512-MnRxCbPji4Wr7Ilu22WlEbf1F0gyRGp617ADib0zx2d46aRg/brYdRrhcn8eaANmEXZgT6s8zGh8QO/9LZHN2A==",
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@stencil/sass/-/sass-3.0.4.tgz",
+      "integrity": "sha512-k1dP0A2QBx62m250FATc1hErXxXs6Jnf4TBxdL1C/dc32Kzz2n5aCT4SodBz0ebT5WMnITauZyFqYxzCzDoKag==",
       "dev": true,
       "peerDependencies": {
-        "@stencil/core": ">=2.0.0 || >=3.0.0-beta.0"
+        "@stencil/core": ">=2.0.0 || >=3.0.0-beta.0 || >= 4.0.0-beta.0 || >= 4.0.0"
       }
     },
     "node_modules/@stencil/vue-output-target": {
-      "version": "0.8.5",
-      "resolved": "https://registry.npmjs.org/@stencil/vue-output-target/-/vue-output-target-0.8.5.tgz",
-      "integrity": "sha512-AOse8WGzdH3lYhw+yQ/MYvobcaSOFd7B/xQ+oWv3GZLZpCw5fw+eOfFv1734mdA/Jjx+kWADlgsZ4w+cmiR+ZQ==",
+      "version": "0.8.6",
+      "resolved": "https://registry.npmjs.org/@stencil/vue-output-target/-/vue-output-target-0.8.6.tgz",
+      "integrity": "sha512-B1gQW8FWeU7x/KBPm9R28jYFGN5NsZTZR4jwfDMhKBmU1Q2dIxFY52ARhbrfj5tJQxKoxr2tQJD2S14r9t1v7w==",
       "dev": true,
       "peerDependencies": {
-        "@stencil/core": "^2.9.0 || ^3.0.0"
+        "@stencil/core": ">=2.0.0 || >=3 || >= 4.0.0-beta.0 || >= 4.0.0"
       }
     },
     "node_modules/@stylelint/postcss-css-in-js": {
@@ -8149,30 +8149,13 @@
         "node": ">=8"
       }
     },
-    "node_modules/playwright": {
-      "version": "1.33.0",
-      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.33.0.tgz",
-      "integrity": "sha512-+zzU3V2TslRX2ETBRgQKsKytYBkJeLZ2xzUj4JohnZnxQnivoUvOvNbRBYWSYykQTO0Y4zb8NwZTYFUO+EpPBQ==",
-      "dev": true,
-      "hasInstallScript": true,
-      "peer": true,
-      "dependencies": {
-        "playwright-core": "1.33.0"
-      },
-      "bin": {
-        "playwright": "cli.js"
-      },
-      "engines": {
-        "node": ">=14"
-      }
-    },
     "node_modules/playwright-core": {
-      "version": "1.33.0",
-      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.33.0.tgz",
-      "integrity": "sha512-aizyPE1Cj62vAECdph1iaMILpT0WUDCq3E6rW6I+dleSbBoGbktvJtzS6VHkZ4DKNEOG9qJpiom/ZxO+S15LAw==",
+      "version": "1.34.3",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.34.3.tgz",
+      "integrity": "sha512-2pWd6G7OHKemc5x1r1rp8aQcpvDh7goMBZlJv6Co5vCNLVcQJdhxRL09SGaY6HcyHH9aT4tiynZabMofVasBYw==",
       "dev": true,
       "bin": {
-        "playwright": "cli.js"
+        "playwright-core": "cli.js"
       },
       "engines": {
         "node": ">=14"
@@ -10352,9 +10335,9 @@
   },
   "dependencies": {
     "@axe-core/playwright": {
-      "version": "4.7.1",
-      "resolved": "https://registry.npmjs.org/@axe-core/playwright/-/playwright-4.7.1.tgz",
-      "integrity": "sha512-09UDwLChlGiqw9004QJib6Maesy99EOZ9zsLfhBYAt2s5UwufabnD+MoTAmwe+PCv2Jex9k1taeUhebDwIJKqw==",
+      "version": "4.7.2",
+      "resolved": "https://registry.npmjs.org/@axe-core/playwright/-/playwright-4.7.2.tgz",
+      "integrity": "sha512-k5f6KGVkPsZ7wR56XnRZYS4b1Wd8wkVTpjqeScFYZMTJxKVv3FGKoBqQVBoCphWtP0oMWQc41zQgHO6gaYTcQw==",
       "dev": true,
       "requires": {
         "axe-core": "^4.7.0"
@@ -11398,14 +11381,14 @@
       }
     },
     "@playwright/test": {
-      "version": "1.33.0",
-      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.33.0.tgz",
-      "integrity": "sha512-YunBa2mE7Hq4CfPkGzQRK916a4tuZoVx/EpLjeWlTVOnD4S2+fdaQZE0LJkbfhN5FTSKNLdcl7MoT5XB37bTkg==",
+      "version": "1.34.3",
+      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.34.3.tgz",
+      "integrity": "sha512-zPLef6w9P6T/iT6XDYG3mvGOqOyb6eHaV9XtkunYs0+OzxBtrPAAaHotc0X+PJ00WPPnLfFBTl7mf45Mn8DBmw==",
       "dev": true,
       "requires": {
         "@types/node": "*",
         "fsevents": "2.3.2",
-        "playwright-core": "1.33.0"
+        "playwright-core": "1.34.3"
       }
     },
     "@rollup/plugin-node-resolve": {
@@ -11460,35 +11443,35 @@
       }
     },
     "@stencil/angular-output-target": {
-      "version": "0.7.0",
-      "resolved": "https://registry.npmjs.org/@stencil/angular-output-target/-/angular-output-target-0.7.0.tgz",
-      "integrity": "sha512-OMK5oQHlMB2MTYMwU28TP1PfjkQWXHnH7f57sWis0XvFPznBtYTHAGCqiCjLM6toPCncEiZYsswZD+rm77QSGQ==",
+      "version": "0.7.1",
+      "resolved": "https://registry.npmjs.org/@stencil/angular-output-target/-/angular-output-target-0.7.1.tgz",
+      "integrity": "sha512-lxJbCAbyAQVAKGgEpNTjSF7GZZszbrJnNdNVgzuD1hLRFJyElA6kUSL0GQrZMbiPG5lC/cYdbQwpyWHX4xN8mw==",
       "dev": true,
       "requires": {}
     },
     "@stencil/core": {
-      "version": "3.2.2",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-3.2.2.tgz",
-      "integrity": "sha512-wXb9cVWL0T3cTwYLveekdTFCRGx6+9hpVDEXna+N8K8OPoW6xtFAHRLv+LjOM7k59PkA8MG3IinAfV7Y+xa0Hw=="
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-3.3.1.tgz",
+      "integrity": "sha512-I+660Oe9OMLiU+thjV1GgcI27dcvrSpF3xisHWBOU/4mzRtho3YW0cI8lSjcqyB1KirGTA6QeQ0Xif5UHqn8hw=="
     },
     "@stencil/react-output-target": {
-      "version": "0.5.0",
-      "resolved": "https://registry.npmjs.org/@stencil/react-output-target/-/react-output-target-0.5.0.tgz",
-      "integrity": "sha512-m2UwgrFuVXzi1h4m6I+EWDGeZV4n1wPHkzbRCS9QaqysiQEN5VIi9zjLzvPQF7O9Gg3E/W28z0yElp0kY3VuFQ==",
+      "version": "0.5.3",
+      "resolved": "https://registry.npmjs.org/@stencil/react-output-target/-/react-output-target-0.5.3.tgz",
+      "integrity": "sha512-68jwRp35CjAcwhTJ9yFD/3n+jrHOqvEH2jreVuPVvZK+4tkhPlYlwz0d1E1RlF3jyifUSfdkWUGgXIEy8Fo3yw==",
       "dev": true,
       "requires": {}
     },
     "@stencil/sass": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/@stencil/sass/-/sass-3.0.3.tgz",
-      "integrity": "sha512-MnRxCbPji4Wr7Ilu22WlEbf1F0gyRGp617ADib0zx2d46aRg/brYdRrhcn8eaANmEXZgT6s8zGh8QO/9LZHN2A==",
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@stencil/sass/-/sass-3.0.4.tgz",
+      "integrity": "sha512-k1dP0A2QBx62m250FATc1hErXxXs6Jnf4TBxdL1C/dc32Kzz2n5aCT4SodBz0ebT5WMnITauZyFqYxzCzDoKag==",
       "dev": true,
       "requires": {}
     },
     "@stencil/vue-output-target": {
-      "version": "0.8.5",
-      "resolved": "https://registry.npmjs.org/@stencil/vue-output-target/-/vue-output-target-0.8.5.tgz",
-      "integrity": "sha512-AOse8WGzdH3lYhw+yQ/MYvobcaSOFd7B/xQ+oWv3GZLZpCw5fw+eOfFv1734mdA/Jjx+kWADlgsZ4w+cmiR+ZQ==",
+      "version": "0.8.6",
+      "resolved": "https://registry.npmjs.org/@stencil/vue-output-target/-/vue-output-target-0.8.6.tgz",
+      "integrity": "sha512-B1gQW8FWeU7x/KBPm9R28jYFGN5NsZTZR4jwfDMhKBmU1Q2dIxFY52ARhbrfj5tJQxKoxr2tQJD2S14r9t1v7w==",
       "dev": true,
       "requires": {}
     },
@@ -16274,20 +16257,10 @@
         "find-up": "^4.0.0"
       }
     },
-    "playwright": {
-      "version": "1.33.0",
-      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.33.0.tgz",
-      "integrity": "sha512-+zzU3V2TslRX2ETBRgQKsKytYBkJeLZ2xzUj4JohnZnxQnivoUvOvNbRBYWSYykQTO0Y4zb8NwZTYFUO+EpPBQ==",
-      "dev": true,
-      "peer": true,
-      "requires": {
-        "playwright-core": "1.33.0"
-      }
-    },
     "playwright-core": {
-      "version": "1.33.0",
-      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.33.0.tgz",
-      "integrity": "sha512-aizyPE1Cj62vAECdph1iaMILpT0WUDCq3E6rW6I+dleSbBoGbktvJtzS6VHkZ4DKNEOG9qJpiom/ZxO+S15LAw==",
+      "version": "1.34.3",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.34.3.tgz",
+      "integrity": "sha512-2pWd6G7OHKemc5x1r1rp8aQcpvDh7goMBZlJv6Co5vCNLVcQJdhxRL09SGaY6HcyHH9aT4tiynZabMofVasBYw==",
       "dev": true
     },
     "postcss": {

core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ionic/core",
-  "version": "7.0.8",
+  "version": "7.0.12",
   "description": "Base components for Ionic",
   "keywords": [
     "ionic",
@@ -31,22 +31,22 @@
     "loader/"
   ],
   "dependencies": {
-    "@stencil/core": "^3.2.2",
+    "@stencil/core": "^3.3.1",
     "ionicons": "^7.1.0",
     "tslib": "^2.1.0"
   },
   "devDependencies": {
-    "@axe-core/playwright": "^4.7.1",
+    "@axe-core/playwright": "^4.7.2",
     "@ionic/eslint-config": "^0.3.0",
     "@ionic/prettier-config": "^2.0.0",
     "@jest/core": "^27.5.1",
-    "@playwright/test": "^1.33.0",
+    "@playwright/test": "^1.34.3",
     "@rollup/plugin-node-resolve": "^8.4.0",
     "@rollup/plugin-virtual": "^2.0.3",
-    "@stencil/angular-output-target": "^0.7.0",
-    "@stencil/react-output-target": "^0.5.0",
-    "@stencil/sass": "^3.0.3",
-    "@stencil/vue-output-target": "^0.8.5",
+    "@stencil/angular-output-target": "^0.7.1",
+    "@stencil/react-output-target": "^0.5.3",
+    "@stencil/sass": "^3.0.4",
+    "@stencil/vue-output-target": "^0.8.6",
     "@types/jest": "^27.5.2",
     "@types/node": "^14.6.0",
     "@typescript-eslint/eslint-plugin": "^5.17.0",

core/src/components/alert/test/trigger/index.html

@@ -11,6 +11,13 @@
     <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
     <script src="../../../../../scripts/testing/scripts.js"></script>
     <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
+
+    <script type="module">
+      import * as motion from 'https://esm.run/motion';
+
+      window.motionOne = motion;
+    </script>
+
   </head>
 
   <body>
@@ -23,25 +30,47 @@
 
       <ion-content class="ion-padding">
         <ion-button id="default">Open Alert</ion-button>
-        <ion-button id="timeout">Open Alert, Close After 500ms</ion-button>
 
-        <ion-alert id="default-alert" trigger="default" header="Alert" message="Hello World!"></ion-alert>
-        <ion-alert id="timeout-alert" trigger="timeout" header="Alert" message="Hello World!"></ion-alert>
+        <ion-alert id="custom-alert" trigger="default" header="Alert" message="Hello World!"></ion-alert>
       </ion-content>
     </ion-app>
 
     <script>
-      const defaultAlert = document.querySelector('#default-alert');
-      const timeoutAlert = document.querySelector('#timeout-alert');
+      const customAlert = document.querySelector('#custom-alert');
 
-      defaultAlert.buttons = ['OK'];
-      timeoutAlert.buttons = ['OK'];
+      customAlert.enterAnimation = async (el, opts, done) => {
+        const { animate } = window.motionOne;
+        const backdropAni = animate('#custom-alert ion-backdrop', {
+          opacity: 'var(--backdrop-opacity)'
+        });
 
-      timeoutAlert.addEventListener('didPresent', () => {
-        setTimeout(() => {
-          timeoutAlert.dismiss();
-        }, 500);
-      });
+        const wrapperAni = animate('#custom-alert .alert-wrapper', {
+          opacity: 1,
+          transform: ['scale(1.5)', 'scale(1)']
+        })
+
+        await Promise.all([wrapperAni.finished, backdropAni.finished]);
+
+        done();
+      }
+
+      customAlert.leaveAnimation = async (el, opts, done) => {
+        const { animate } = window.motionOne;
+        const backdropAni = animate('#custom-alert ion-backdrop', {
+          opacity: 0
+        });
+
+        const wrapperAni = animate('#custom-alert .alert-wrapper', {
+          opacity: 0,
+          transform: 'scale(0.5)'
+        })
+
+        await Promise.all([wrapperAni.finished, backdropAni.finished]);
+
+        done();
+      }
+
+      customAlert.buttons = ['OK'];
     </script>
   </body>
 </html>

core/src/components/back-button/test/navigation/index.html

@@ -1,130 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" dir="ltr">
-  <head>
-    <meta charset="UTF-8" />
-    <title>Back Button - Navigation</title>
-    <meta
-      name="viewport"
-      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
-    />
-    <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
-    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
-    <script src="../../../../../scripts/testing/scripts.js"></script>
-    <script src="../../../../../dist/ionic/ionic.js"></script>
-  </head>
-
-  <body onload="loadFirstPage()">
-    <ion-app>
-      <ion-nav></ion-nav>
-    </ion-app>
-  </body>
-
-  <script>
-    async function loadFirstPage() {
-      const nav = document.querySelector('ion-nav');
-      const firstPage = document.createElement('div');
-      firstPage.classList.add('first-page');
-      firstPage.innerHTML = `
-      <ion-header>
-        <ion-toolbar>
-          <ion-buttons slot="start">
-            <ion-back-button></ion-back-button>
-          </ion-buttons>
-          <ion-title>Page One</ion-title>
-        </ion-toolbar>
-      </ion-header>
-      <ion-content class="ion-padding">
-        <h1>Page One</h1>
-        <ion-button class="next">Go to Page Two</ion-button>
-      </ion-content>
-    `;
-
-      await nav.setRoot(firstPage);
-
-      // okay cool, we're in the DOM now
-      const button = firstPage.querySelector('.next');
-      button.addEventListener('click', async () => {
-        await goToPageTwo(nav);
-      });
-    }
-
-    async function goToPageTwo(nav) {
-      const secondPage = document.createElement('div');
-      secondPage.classList.add('second-page');
-      secondPage.innerHTML = `
-      <ion-header>
-        <ion-toolbar color="secondary">
-          <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>
-        <p>Just an empty <code>ion-back-button</code></p>
-        <ion-button class="next">Go to Page Three</ion-button>
-      </ion-content>
-    `;
-
-      // okay cool, we're in the DOM now
-      await nav.push(secondPage);
-
-      const nextButton = secondPage.querySelector('ion-button.next');
-      nextButton.addEventListener('click', async () => {
-        await goToPageThree(nav);
-      });
-    }
-
-    async function goToPageThree(nav) {
-      const thirdPage = document.createElement('div');
-      thirdPage.classList.add('third-page');
-      thirdPage.innerHTML = `
-      <ion-header>
-        <ion-toolbar>
-          <ion-buttons slot="start">
-            <ion-back-button color="danger" text="Text!" icon="add"></ion-back-button>
-          </ion-buttons>
-          <ion-title>Page Three</ion-title>
-        </ion-toolbar>
-      </ion-header>
-      <ion-content class="ion-padding">
-        <h1>Page Three</h1>
-        <p>Custom back button</p>
-        <ion-button class="next">Go to Page Four</ion-button>
-      </ion-content>
-    `;
-
-      // okay cool, we're in the DOM now
-      await nav.push(thirdPage);
-
-      const nextButton = thirdPage.querySelector('ion-button.next');
-      nextButton.addEventListener('click', async () => {
-        await goToPageFour(nav);
-      });
-    }
-
-    async function goToPageFour(nav) {
-      const fourthPage = document.createElement('div');
-      fourthPage.classList.add('fourth-page');
-      fourthPage.innerHTML = `
-      <ion-header>
-        <ion-toolbar>
-          <ion-buttons slot="start">
-            <ion-menu-button auto-hide="false"></ion-menu-button>
-            <ion-back-button color="danger"></ion-back-button>
-          </ion-buttons>
-          <ion-title>Page Four</ion-title>
-        </ion-toolbar>
-      </ion-header>
-      <ion-content class="ion-padding">
-        <h1>Page Four</h1>
-        <p>Back button and menu button</p>
-      </ion-content>
-    `;
-
-      // okay cool, we're in the DOM now
-      await nav.push(fourthPage);
-    }
-  </script>
-</html>