remove old lines

only fire pressUp if press was fired; allow overriding of other gesture params
add angular integration
2026-03-13 10:22:08 +08:00 · 2019-11-18 15:03:42 -05:00 · 2019-11-18 15:02:38 -05:00 · 2019-11-12 11:39:21 -05:00 · 2019-11-12 11:33:42 -05:00 · 2019-11-07 15:20:49 -05:00
320 changed files with 2234 additions and 7228 deletions
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -310,6 +310,9 @@ jobs:
      - run:
          command: npm install
          working_directory: /tmp/workspace/angular/test/test-app
+      - run:
+          command: npm run sync
+          working_directory: /tmp/workspace/angular/test/test-app
      - run:
          command: npm test
          working_directory: /tmp/workspace/angular/test/test-app
--- a/.scripts/common.js
+++ b/.scripts/common.js
@@ -13,8 +13,7 @@ const packages = [
  'docs',
  'angular',
  'packages/react',
-  'packages/react-router',
-  'packages/angular-server'
+  'packages/react-router'
 ];

 function readPkg(project) {
@@ -152,26 +151,21 @@ function preparePackage(tasks, package, version, install) {
      }
    }

-    // Lint, Test, Bump Core dependency
    if (version) {
      projectTasks.push({
        title: `${pkg.name}: lint`,
        task: () => execa('npm', ['run', 'lint'], { cwd: projectRoot })
      });
-      // TODO will not work due to https://github.com/ionic-team/ionic/issues/20136
-      // projectTasks.push({
-      //   title: `${pkg.name}: test`,
-      //   task: async () => await execa('npm', ['test'], { cwd: projectRoot })
-      // });
+      projectTasks.push({
+        title: `${pkg.name}: test`,
+        task: async () => await execa('npm', ['test'], { cwd: projectRoot })
+      });
    }

-    // Build
    projectTasks.push({
      title: `${pkg.name}: build`,
      task: () => execa('npm', ['run', 'build'], { cwd: projectRoot })
    });
-
-    // Link core or react for sub projects
    if (package === 'core' || package === 'packages/react') {
      projectTasks.push({
        title: `${pkg.name}: npm link`,
@@ -253,23 +247,6 @@ function updatePackageVersions(tasks, packages, version) {
        }
      }
    });
-
-    // angular & angular-server need to update their dist versions
-    if (package === 'angular' || package === 'packages/angular-server') {
-      const distPackage = path.join(package, 'dist');
-
-      updatePackageVersion(tasks, distPackage, version);
-
-      tasks.push({
-        title: `${package} update @ionic/core dependency, if present ${tc.dim(`(${version})`)}`,
-        task: async () => {
-          const pkg = readPkg(distPackage);
-          updateDependency(pkg, '@ionic/core', version);
-          writePkg(distPackage, pkg);
-        }
-      });
-    }
-
    if (package === 'packages/react-router') {
      tasks.push({
        title: `${package} update @ionic/react dependency, if present ${tc.dim(`(${version})`)}`,
@@ -294,22 +271,6 @@ function updatePackageVersion(tasks, package, version) {
  });
 }

-function copyPackageToDist(tasks, packages) {
-  packages.forEach(package => {
-    const projectRoot = projectPath(package);
-
-    // angular and angular-server are the only packages that publish dist
-    if (package !== 'angular' && package !== 'packages/angular-server') {
-      return;
-    }
-
-    tasks.push({
-      title: `${package}: Copy package.json to dist`,
-      task: () => execa('node', ['copy-package.js', package], { cwd: path.join(rootDir, '.scripts') })
-    });
-  });
-}
-
 function publishPackages(tasks, packages, version, tag = 'latest') {
  // first verify version
  packages.forEach(package => {
@@ -329,13 +290,9 @@ function publishPackages(tasks, packages, version, tag = 'latest') {
    });
  });

-  // Publish
+  // next publish
  packages.forEach(package => {
-    let projectRoot = projectPath(package);
-
-    if (package === 'packages/angular-server' || package === 'angular') {
-      projectRoot = path.join(projectRoot, 'dist')
-    }
+    const projectRoot = projectPath(package);

    tasks.push({
      title: `${package}: publish to ${tag} tag`,
@@ -379,7 +336,6 @@ module.exports = {
  isValidVersion,
  isVersionGreater,
  copyCDNLoader,
-  copyPackageToDist,
  packages,
  packagePath,
  prepareDevPackage,
--- a/.scripts/test-dist.js
+++ b/.scripts/test-dist.js
@@ -11,22 +11,7 @@ const fs = require('fs');
  },
  // angular
  {
-    files: [
-      '../angular/dist/schematics/collection.json',
-      '../angular/dist/fesm5/ionic-angular.js',
-      '../angular/dist/fesm2015/ionic-angular.js',
-      '../angular/dist/ionic-angular.d.ts',
-      '../angular/dist/ionic-angular.metadata.json'
-    ]
-  },
-  // angular-server
-  {
-    files: [
-      '../packages/angular-server/dist/fesm5/ionic-angular-server.js',
-      '../packages/angular-server/dist/fesm2015/ionic-angular-server.js',
-      '../packages/angular-server/dist/ionic-angular-server.d.ts',
-      '../packages/angular-server/dist/ionic-angular-server.metadata.json'
-    ]
+    files: ['../angular/dist/fesm5.cjs.js']
  },
  // react
  {
--- a/BREAKING.md
+++ b/BREAKING.md
@@ -1,416 +1,3 @@
 # Breaking Changes

-This is a comprehensive list of the breaking changes introduced in the major version releases of Ionic Framework.
-
-## Versions
-
- [Version 5.x](#version-5x)
- [Version 4.x](#version-4x)
- [Legacy](#legacy)
-
-
-## Version 5.x
-
- [CSS](#css)
-  * [CSS Utilities](#css-utilities)
-  * [Display Classes](#display-classes)
-  * [Activated, Focused, Hover States](#activated--focused--hover-states)
-  * [Distributed Sass](#distributed-sass)
- [Components](#components)
-  * [Anchor](#anchor)
-  * [Back Button](#back-button)
-  * [Card](#card)
-  * [Controllers](#controllers)
-  * [Header / Footer](#header---footer)
-  * [List Header](#list-header)
-  * [Menu](#menu)
-  * [Nav Link](#nav-link)
-  * [Searchbar](#searchbar)
-  * [Segment](#segment)
-  * [Skeleton Text](#skeleton-text)
-  * [Split Pane](#split-pane)
-  * [Toast](#toast)
- [Colors](#colors)
- [Events](#events)
- [Mode](#mode)
- [Ionicons](#ionicons)
-
-
-### CSS
-
-#### CSS Utilities
-
-We originally added CSS utility attributes for styling components because it was a quick and easy way to wrap text or add padding to an element. Once we added support for multiple frameworks as part of our "Ionic for everyone" approach, we quickly determined there were problems with using CSS attributes with frameworks that use JSX and Typescript. In order to solve this we added CSS classes. Rather than support CSS attributes in certain frameworks and classes in others, we decided to remove the CSS attributes and support what works in all of them, classes, for consistency. In addition to this, changing to classes prefixed with `ion` avoids conflict with native attributes & user's CSS. In the latest version of Ionic 4, there are deprecation warnings printed in the console to show what the new classes are, and the documentation has been updated since support for classes was added to remove all references to attributes: https://ionicframework.com/docs/layout/css-utilities.
-
-Some examples of what's changed are below. *This is not all-inclusive, see the documentation linked above for all of the available CSS utility classes.*
-
-```html
-<ion-header text-center></ion-header>
-<ion-content padding></ion-content>
-<ion-label text-wrap></ion-label>
-<ion-item wrap></ion-item>
-```
-
-becomes
-
-```html
-<ion-header class="ion-text-center"></ion-header>
-<ion-content class="ion-padding"></ion-content>
-<ion-label class="ion-text-wrap"></ion-label>
-<ion-item class="ion-wrap"></ion-item>
-```
-
-
-#### Display Classes
-
-The responsive display classes found in the `display.css` file have had their media queries updated to better reflect how they should work. Instead of using the maximum value of the breakpoint for `.ion-hide-{breakpoint}-down` classes it will use the minimum of that breakpoint.
-
-The [Ionic breakpoints](https://ionicframework.com/docs/layout/css-utilities#ionic-breakpoints) are the following:
-
-
-| Breakpoint Name | Width   |
-| ----------------| --------|
-| xs              | 0       |
-| sm              | 576px   |
-| md              | 768px   |
-| lg              | 992px   |
-| xl              | 1200px  |
-
-Previously, if you added the class `ion-hide-md-down` to an element, it would hide the element when the screen size was `991px` (the maximum of the `md` breakpoint) or smaller. Now, using this same class will hide the element when the maximum screen size is `768px`.
-
-Below is a table of how the media queries have changed for each class:
-
-| Class Name          | Ionic 4                      | Ionic 5                      |
-| --------------------| -----------------------------| -----------------------------|
-| `.ion-hide-down`    | `@media (max-width: 575px)`  | all screen sizes             |
-| `.ion-hide-sm-down` | `@media (max-width: 767px)`  | `@media (max-width: 576px)`  |
-| `.ion-hide-md-down` | `@media (max-width: 991px)`  | `@media (max-width: 768px)`  |
-| `.ion-hide-lg-down` | `@media (max-width: 1199px)` | `@media (max-width: 992px)`  |
-| `.ion-hide-xl-down` | all screen sizes             | `@media (max-width: 1200px)` |
-
-_Note that no changes were made to the `.ion-hide-{breakpoint}-up` classes._
-
-See the [CSS Utilities responsive display documentation](https://ionicframework.com/docs/layout/css-utilities#responsive-display-attributes) for more information.
-
-
-#### Activated, Focused, Hover States
-
-The `.activated` class that gets added has been renamed to `.ion-activated` for consistency with how we add focused to elements and to avoid conflicts in users' CSS.
-
-<!-- TODO mention some of the changes to the hover values: https://github.com/ionic-team/ionic/pull/19440 -->
-
-#### Distributed Sass
-
-The `scss` files have been removed from `dist/`. CSS variables should be used to theme instead.
-
-
-### Components
-
-#### Anchor
-
-The `ion-anchor` component has been renamed to `ion-router-link` as this is a better description of which component it should be used with. This component should still only be used in vanilla and Stencil JavaScript projects. Angular projects should use an `<a>` and `routerLink` with the Angular router. See the [documentation for router-link](https://ionicframework.com/docs/api/router-link) for more information.
-
-#### Back Button
-
-Converted `ion-back-button` to use [shadow DOM](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM).
-
-#### Card
-
-Converted `ion-card` to use [shadow DOM](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM).
-
-
-### Controllers
-
-The controller components (`ion-action-sheet-controller`, `ion-alert-controller`, `ion-loading-controller`, `ion-menu-controller`, `ion-modal-controller`, `ion-picker-controller`, `ion-popover-controller`, `ion-toast-controller`) have been removed from Ionic core as elements. They should be imported from `@ionic/core` instead. This will not affect projects that use Angular or React. Below is an example of the loading controller change in a JavaScript project, but this change applies to all controller elements.
-
-
-```html
-<ion-loading-controller></ion-loading-controller>
-
-<script>
-  async function presentLoading() {
-    const loadingController = document.querySelector('ion-loading-controller');
-
-    const loading = await loadingController.create({
-      message: 'Hello',
-      duration: 2000
-    });
-    await loading.present();
-  }
-</script>
-
-```
-
-becomes
-
-```html
-<script type="module">
-  import { loadingController } from '@ionic/core';
-  window.loadingController = loadingController;
-</script>
-
-<script>
-  async function presentLoading() {
-    const loading = await loadingController.create({
-      message: 'Hello',
-      duration: 2000
-    });
-    await loading.present();
-  }
-</script>
-```
-
-
-#### Header / Footer
-
-The `no-border` attribute has been removed, use `ion-no-border` class instead. See [CSS Utilities](#css-utilities) above for more information on why this change was made.
-
-
-#### List Header
-
-The list header has been redesigned to match the latest iOS spec. This may break the design of your application as the previous design had a small font size with uppercase text. The latest design includes a larger, bolder text. If the old look is desired, use custom CSS to achieve it.
-
-
-#### Menu
-
- The `swipeEnable()` function has been removed in Angular, use `swipeGesture()` instead.
- The `side` values `left` and `right` have been removed, use `start` and `end` instead.
- Removed the `main` attribute, use `content-id` (for vanilla JS / Vue) and `contentId` (for Angular / React) instead.
-  ```html
-  <ion-menu>...</ion-menu>
-  <ion-content main>...</ion-content>
-  ```
-
-  becomes
-
-  ```html
-  <ion-menu content-id="main"></ion-menu>
-  <ion-content id="main">...</ion-content>
-  ```
- The presentation type in `ios` now defaults to `"overlay"`.
-
-#### Nav Link
-
-The `ion-nav-push`, `ion-nav-back`, and `ion-nav-set-root` components have been removed in favor of using `ion-nav-link` with a `router-direction` property which accepts `”root”`, `“forward”`, and `“back”`. This reduces the need for maintaining multiple components when they all do the same thing with different transition directions. See the [documentation for nav-link](https://ionicframework.com/docs/api/nav-link) for more information.
-
-
-#### Searchbar
-
-##### Show Cancel Button
-
-The `show-cancel-button` property of the searchbar no longer accepts boolean values. Accepted values are strings: `"focus"`, `"always"`, `"never"`.
-
-```html
-<ion-searchbar show-cancel-button>
-<ion-searchbar show-cancel-button="true">
-<ion-searchbar show-cancel-button="false">
-```
-
-becomes
-
-```html
-<ion-searchbar show-cancel-button="focus">
-<ion-searchbar show-cancel-button="focus">
-<ion-searchbar show-cancel-button="never">
-```
-
-See the [Searchbar documentation](https://ionicframework.com/docs/api/searchbar#properties) for more information.
-
-##### Inputmode
-
-The `inputmode` property for `ion-searchbar` now defaults to `undefined`. To get the old behavior, set the inputmode property to `"search"`.
-
-
-#### Segment
-
-<!-- TODO https://gist.github.com/brandyscarney/e6cfe43c359bb2c932e12f8d615e1669 -->
-
-
-#### Skeleton Text
-
-The `width` property has been removed in favor of using CSS styling.
-
-
-#### Split Pane
- Converted to use [shadow DOM](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM).
- Removed the `main` attribute, use `content-id` (for vanilla JS / Vue) and `contentId` (for Angular / React) instead.
-  ```html
-  <ion-split-pane>
-    ...
-    <div main>...</div>
-  </ion-split-pane>
-  ```
-
-  becomes
-
-  ```html
-  <ion-split-pane content-id="main">
-    ...
-    <div id="main">...</div>
-  </ion-split-pane>
-  ```
-
-#### Toast
-
-The close button properties (`showCloseButton` and `closeButtonText`) have been removed. Use the `buttons` array instead with `role: 'cancel'`. See the [usage documentation](https://ionicframework.com/docs/api/toast#usage) for more information.
-
-```javascript
-async presentToast() {
-  const toast = await this.toastController.create({
-    message: 'Your settings have been saved.',
-    showCloseButton: true,
-    closeButtonText: 'Close'
-  });
-  toast.present();
-}
-```
-
-becomes
-
-```javascript
-async presentToast() {
-  const toast = await this.toastController.create({
-    message: 'Your settings have been saved.',
-    buttons: [
-      {
-        text: 'Close',
-        role: 'cancel',
-        handler: () => {
-          console.log('Close clicked');
-        }
-      }
-    ]
-  });
-  toast.present();
-}
-```
-
-### Colors
-
-The default Ionic colors have been updated to the following:
-
-```scss
-primary:         #3880ff
-secondary:       #3dc2ff
-tertiary:        #5260ff
-success:         #2dd36f
-warning:         #ffc409
-danger:          #eb445a
-light:           #f4f5f8
-medium:          #92949c
-dark:            #222428
-```
-
-`primary`, `light` and `dark` have not changed. The contrast color for `warning` has been updated to `#000`.
-
-This will only be a breaking change in your app if you are not using one of our starters & not overriding the defaults. If you are overriding the defaults already these will need to be manually updated if desired.
-
-
-### Events
-
-The `@ionic/angular` Events service has been removed.
-
- Use "Observables" for a similar pub/sub architecture: https://angular.io/guide/observables
- Use "Redux" for advanced state management: https://ngrx.io
-
-
-### Mode
-
-Mode is now cascaded from the parent to the child component. Previously, if you wanted to update a component and its children to use the same mode, you'd have to set it on all components. For example, if you wanted to use a `md` segment no matter the mode, you'd have to write the following:
-
-```html
-<ion-segment mode="md">
-  <ion-segment-button mode="md">Button</ion-segment-button>
-  <ion-segment-button mode="md">Button</ion-segment-button>
-</ion-segment>
-```
-
-Now, the `mode` only needs to be set on the `ion-segment` and it will be inherited. If this behavior is not desired set a different mode on the child component.
-
-
-### Ionicons
-
-<!-- TODO verify / add link to site -->
-
-The table below outlines icons that were removed or renamed.
-
-
-| Icon Name                    |             | Status      | Notes                                                                 |
-| -----------------------------| ------------| ------------| ----------------------------------------------------------------------|
-| add-circle            	     | :x:         | deleted     | re-added as "circled" icon                                            |
-| add-circle-outline    	     | :x:         | deleted     | re-added as "circled" icon                                            |
-| appstore                     | :x:         | deleted     | added as google play & apple app store logos                          |
-| arrow-dropdown-circle        | :pencil2:   | renamed     | renamed to "arrow-down-circle"                                        |
-| arrow-dropdown               | :pencil2:   | renamed     | renamed to "arrow-down"                                               |
-| arrow-dropleft-circle        | :pencil2:   | renamed     | renamed to "arrow-back-circle"                                        |
-| arrow-dropleft               | :pencil2:   | renamed     | renamed to "arrow-back"                                               |
-| arrow-dropright-circle       | :pencil2:   | renamed     | renamed to "arrow-forward-circle"                                     |
-| arrow-dropright              | :pencil2:   | renamed     | renamed to "arrow-forward"                                            |
-| arrow-dropup-circle          | :pencil2:   | renamed     | renamed to "arrow-up-circle"                                          |
-| arrow-dropup                 | :pencil2:   | renamed     | renamed to "arrow-up"                                                 |
-| arrow-round-back             | :x:         | deleted     | becomes "arrow-back"                                                  |
-| arrow-round-down             | :x:         | deleted     | becomes "arrow-down"                                                  |
-| arrow-round-forward          | :x:         | deleted     | becomes "arrow-forward"                                               |
-| arrow-round-up               | :x:         | deleted     | becomes "arrow-up"                                                    |
-| bowtie                       | :x:         | deleted     |                                                                       |
-| chatboxes                    | :pencil2:   | renamed     | renamed to "chatbox"                                                  |
-| checkbox-outline             | :x:         | deleted     |                                                                       |
-| checkmark-circle-outline     | :x:         | deleted     |                                                                       |
-| clock                        | :x:         | deleted     |                                                                       |
-| close-circle-outline         | :x:         | deleted     |                                                                       |
-| cloud-outline                | :pencil2:   | renamed     | renamed to "cloud"                                                    |
-| contact                      | :pencil2:   | renamed     | renamed to "person-circle"                                            |
-| contacts                     | :pencil2:   | renamed     | renamed to "person-circle"                                            |
-| done-all                     | :pencil2:   | renamed     | renamed to "checkmark-done"                                           |
-| fastforward	                 | :pencil2:   | renamed     | renamed to "play-forward"                                             |
-| filing                       | :pencil2:   | renamed     | renamed to "file-tray"                                                |
-| freebsd-devil                | :x:         | deleted     |                                                                       |
-| game-controller-a            | :x:         | deleted     |                                                                       |
-| game-controller-b            | :x:         | deleted     | added as "game-controller"                                            |
-| googleplus                   | :x:         | deleted     |                                                                       |
-| hand                         | :x:         | deleted     | split into "hand-left" and "hand-right"                               |
-| heart-empty                  | :pencil2:   | renamed     | renamed to "heart"                                                    |
-| help-circle-outline          | :x:         | deleted     | exists as circled version                                             |
-| information-circle-outline   | :x:         | deleted     | exists as circled version                                             |
-| jet                          | :x:         | deleted     | use "airplane"                                                        |
-| list-box                     | :x:         | deleted     |                                                                       |
-| lock                         | :pencil2:   | renamed     | renamed to "lock-closed"                                              |
-| microphone                   | :x:         | deleted     |                                                                       |
-| model-s                      | :x:         | deleted     | added as "car-sport"                                                  |
-| more                         | :x:         | deleted     | use "ellipsis-horizontal" for `ios` and "ellipsis-vertical" for `md`  |
-| notifications-outline        | :x:         | deleted     | exists as circled version                                             |
-| outlet                       | :x:         | deleted     |                                                                       |
-| paper                        | :pencil2:   | renamed     | renamed to "newspaper"                                                |
-| pie                          | :pencil2:   | renamed     | renamed to "pie chart"                                                |
-| pint                         | :x:         | deleted     |                                                                       |
-| photos                       | :x:         | deleted     | use "image" or "images"                                               |
-| qr-scanner                   | :pencil2:   | renamed     | renamed to "scanner"                                                  |
-| quote                        | :x:         | deleted     |                                                                       |
-| redo                         | :pencil2:   | renamed     | renamed to "arrow-redo"                                               |
-| remove-circle-outline        | :x:         | deleted     | exists as circled version                                             |
-| reorder                      | :x:         | deleted     | added as reorder-two, reorder-three, reorder-four                     |
-| return-left                  | :pencil2:   | renamed     | renamed to "return-right-up/down-arrow"                               |
-| return-right                 | :pencil2:   | renamed     | renamed to "return-right-up/down-arrow"                               |
-| rewind                       | :pencil2:   | renamed     | renamed to "play-back"                                                |
-| reverse-camera               | :pencil2:   | renamed     | renamed to "camera-reverse"                                           |
-| share-alt                    | :x:         | deleted     |                                                                       |
-| skip-backward	               | :pencil2:   | renamed     | renamed to "play-skip-back"					                                 |
-| skip-forward	               | :pencil2:   | renamed     | renamed to "play-skip-forward"					                               |
-| star-outline                 | :pencil2:   | renamed     | renamed to "star"                                                     |
-| stats	                       | :pencil2:   | renamed     | renamed to "stats-chart"                                              |
-| swap                         | :x:         | deleted     | use "swap-horizontal" or "swap-vertical"                              |
-| text                         | :pencil2:   | renamed     | renamed to "chatbox-ellipsis"                                         |
-| undo                         | :pencil2:   | renamed     | renamed to "arrow-undo"	                                             |
-| unlock                       | :pencil2:   | renamed     | renamed to "lock-open"		                                             |
-
-
-
--------------------------------------------------------------------------------------------------
-
-## Version 4.x
-
-The list of the breaking changes introduced in Ionic Angular v4 can be found in [angular/BREAKING.md](https://github.com/ionic-team/ionic/blob/master/angular/BREAKING.md).
-
-## Legacy
-
-For the breaking changes of the older legacy versions (versions 2.x & 3.x) of Ionic Framework, see the [v3 changelog](https://github.com/ionic-team/ionic-v3/blob/master/CHANGELOG.md).
+The list of the breaking changes introduced in Ionic Angular v4 has been moved to [angular/BREAKING.md](https://github.com/ionic-team/ionic/blob/master/angular/BREAKING.md).
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,138 +1,3 @@
-# [5.0.0-beta.4](https://github.com/ionic-team/ionic/compare/v5.0.0-beta.3...v5.0.0-beta.4) (2020-01-06)
-
-
-### Features
-
-* **refresher:** add MD native refresher ([#20096](https://github.com/ionic-team/ionic/issues/20096)) ([5b81bdf](https://github.com/ionic-team/ionic/commit/5b81bdfcf18ed182bde14bbea4957b49ea886322)), closes [#17316](https://github.com/ionic-team/ionic/issues/17316)
-
-
-
-# [5.0.0-beta.3](https://github.com/ionic-team/ionic/compare/v4.11.7...v5.0.0-beta.3) (2020-01-03)
-
-
-### Bug Fixes
-
-* **animation:** support css animation on older devices ([#20020](https://github.com/ionic-team/ionic/issues/20020)) ([49c394c](https://github.com/ionic-team/ionic/commit/49c394c3d335795fd100f54a5b29db009d413dff)), closes [#20017](https://github.com/ionic-team/ionic/issues/20017)
-* **icons:** fix the ellipsis fill in ionicons ([#20137](https://github.com/ionic-team/ionic/issues/20137)) ([9318d24](https://github.com/ionic-team/ionic/commit/9318d2418ec144bbce4a3b7ead33cf099d6ec25b))
-* **modal:** account for safe area on devices with a notch ([#20072](https://github.com/ionic-team/ionic/issues/20072)) ([1cabb53](https://github.com/ionic-team/ionic/commit/1cabb5365097d0675447a36223583824a58a140c))
-* **react:** fire lifecycle events on initial render, fixes [#20071](https://github.com/ionic-team/ionic/issues/20071) ([2dcf3ee](https://github.com/ionic-team/ionic/commit/2dcf3ee7b570be73be35c52f03ccfa09baf5d830))
-
-
-### Code Refactoring
-
-* **searchbar:** set inputmode default to undefined ([#20080](https://github.com/ionic-team/ionic/issues/20080)) ([6612604](https://github.com/ionic-team/ionic/commit/6612604733ac1b3e46546625f24ef6efa5be1538)), closes [#20074](https://github.com/ionic-team/ionic/issues/20074)
-
-
-### Features
-
-* **angular:** angular 9 support ([#19515](https://github.com/ionic-team/ionic/issues/19515)) ([2344d0b](https://github.com/ionic-team/ionic/commit/2344d0b272105e368c00ef611f28909215162f7c))
-* **checkbox:** add --checkmark-width variable ([#19933](https://github.com/ionic-team/ionic/issues/19933)) ([c32a7bc](https://github.com/ionic-team/ionic/commit/c32a7bcd202993056923857a5d9eed14f5be8580)), closes [#16803](https://github.com/ionic-team/ionic/issues/16803)
-* **radio:** add --border-radius and --inner-border-radius variables ([#20140](https://github.com/ionic-team/ionic/issues/20140)) ([a01c102](https://github.com/ionic-team/ionic/commit/a01c10267e18a48f30af2f552c556d31dad582e9))
-* **refresher:** add iOS native refresher ([#20037](https://github.com/ionic-team/ionic/issues/20037)) ([04e7c03](https://github.com/ionic-team/ionic/commit/04e7c031326ec551531af291ef1a03878d168378)), closes [#18664](https://github.com/ionic-team/ionic/issues/18664)
-* **toggle:** add --border-radius and --handle-border-radius variables ([#20141](https://github.com/ionic-team/ionic/issues/20141)) ([02a46a1](https://github.com/ionic-team/ionic/commit/02a46a1007dde820cb158d34d4e3f243c07251dc))
-
-
-### BREAKING CHANGES
-
-* **searchbar:** The `inputmode` property for `ion-searchbar` now defaults to `undefined`. To get the old behavior, set the `inputmode` property to `"search"`.
-
-
-
-
-## [4.11.7](https://github.com/ionic-team/ionic/compare/v4.11.6...v4.11.7) (2019-12-12)
-
-
-### Bug Fixes
-
-* **react:** fire lifecycle events on initial render, fixes [#20071](https://github.com/ionic-team/ionic/issues/20071) ([9ea75eb](https://github.com/ionic-team/ionic/commit/9ea75ebec7b1367fc0e319fe61c1f42516357e10))
-
-# [5.0.0-beta.2](https://github.com/ionic-team/ionic/compare/v5.0.0-beta.1...v5.0.0-beta.2) (2019-12-11)
-
-
-### Bug Fixes
-
-* **animation:** convert hyphenated properties to camel case when using Web Animations ([#20059](https://github.com/ionic-team/ionic/issues/20059)) ([56f67bd](https://github.com/ionic-team/ionic/commit/56f67bd9a5c8c81768e310560b2605e44bf7a9f0)), closes [#20058](https://github.com/ionic-team/ionic/issues/20058)
-* **animation:** properly update Web Animation object ([#19964](https://github.com/ionic-team/ionic/issues/19964)) ([e766194](https://github.com/ionic-team/ionic/commit/e76619478c3c49469fcc22e264cc831d498abf8d))
-* **picker:** pass selected value to handler on dismiss ([#20042](https://github.com/ionic-team/ionic/issues/20042)) ([6e0b9c4](https://github.com/ionic-team/ionic/commit/6e0b9c45489889266620ee2ca38c33fdf8ce3f3b)), closes [#20036](https://github.com/ionic-team/ionic/issues/20036)
-* **tabs:** preserve route navigation extras when changing tabs ([#18493](https://github.com/ionic-team/ionic/issues/18493)) ([4c8f32f](https://github.com/ionic-team/ionic/commit/4c8f32fae99db4022aa9dc75187e2f161e8e678e)), closes [#18717](https://github.com/ionic-team/ionic/issues/18717)
-* **title:** add correct safe area to large title nav transition ([#20029](https://github.com/ionic-team/ionic/issues/20029)) ([300d543](https://github.com/ionic-team/ionic/commit/300d54356df925bb94f22b6805e48c88d1e56a26)), closes [#20028](https://github.com/ionic-team/ionic/issues/20028)
-
-
-
-### Features
-
-* **modal:** add card-style presentation with swipe to close gesture ([#19428](https://github.com/ionic-team/ionic/issues/19428)) ([b3b3312](https://github.com/ionic-team/ionic/commit/b3b33127115bb966980a1288a0005dfb09306881)), closes [#18660](https://github.com/ionic-team/ionic/issues/18660)
-
-
-## [4.11.6](https://github.com/ionic-team/ionic/compare/v4.11.5...v4.11.6) (2019-12-11)
-
-### Bug Fixes
-
-* **react:** don't show back button when not appropriate ([684293d](https://github.com/ionic-team/ionic/commit/684293ddbf1ad4edce590d56f7ff66fcd6c817a5))
-* **react:** first render performance improvements ([1c7d1e5](https://github.com/ionic-team/ionic/commit/1c7d1e5cf1ad7e53ebbee2566e8fa89f567f7fb5))
-* **react:** fix refs for controllers, overlays, ionpage, and ionrouteroutlet, fixes [#19924](https://github.com/ionic-team/ionic/issues/19924) ([#20012](https://github.com/ionic-team/ionic/issues/20012)) ([eef55bb](https://github.com/ionic-team/ionic/commit/eef55bb0072a9e54b1fd7d1c8c69e7fd43b2a5c5))
-* **react:** support for 'root' router direction, fixes [#19982](https://github.com/ionic-team/ionic/issues/19982) ([#20052](https://github.com/ionic-team/ionic/issues/20052)) ([e116712](https://github.com/ionic-team/ionic/commit/e1167122758b23221935e897bcd65839b75c59aa))
-* **react:** support navigating to same page and route updates in IonRouterOutlet, fixes [#19891](https://github.com/ionic-team/ionic/issues/19891), [#19892](https://github.com/ionic-team/ionic/issues/19892), [#19986](https://github.com/ionic-team/ionic/issues/19986) ([f9bf8db](https://github.com/ionic-team/ionic/commit/f9bf8dbe6f952ee53b6b213a4c0d043d25f49b93))
-
-### Upgrade Note
-
-If you run into a "Property 'translate' is missing in type" error building after updating to 4.11.6, update your React Typings library to the latest:
-
-npm i @types/react@latest @types/react-dom@latest
-
-# [5.0.0-beta.1](https://github.com/ionic-team/ionic/compare/v5.0.0-beta.0...v5.0.0-beta.1) (2019-11-20)
-
-
-### Bug Fixes
-
-* **animation:** track correctly when updating CSS Animation ([#19813](https://github.com/ionic-team/ionic/issues/19813)) ([7bd4412](https://github.com/ionic-team/ionic/commit/7bd44128895b9fa4992142c0cc30cf75092cb794))
-* **card:** update background to use the same as item ([#19602](https://github.com/ionic-team/ionic/issues/19602)) ([1a8b7a4](https://github.com/ionic-team/ionic/commit/1a8b7a4559860b3efa4778a78c905e30f18587bf))
-* **content:** set fixed content to position absolute ([#19867](https://github.com/ionic-team/ionic/issues/19867)) ([fce3e24](https://github.com/ionic-team/ionic/commit/fce3e24600be6f04b285cda62fe2f21c49d809e2)), closes [#17754](https://github.com/ionic-team/ionic/issues/17754)
-* **gesture:** release gesture when disabling ([#19855](https://github.com/ionic-team/ionic/issues/19855)) ([21484f1](https://github.com/ionic-team/ionic/commit/21484f1f3a9ebe46096c979fe3f2035892a53a62)), closes [#19848](https://github.com/ionic-team/ionic/issues/19848)
-* **header:** avoid flicker on collapsible header load ([#19682](https://github.com/ionic-team/ionic/issues/19682)) ([0a7aae2](https://github.com/ionic-team/ionic/commit/0a7aae28a7eb0270cdcd100933c01850403b66db))
-* **header:** avoid flicker when collapsing ([#19850](https://github.com/ionic-team/ionic/issues/19850)) ([a3666dd](https://github.com/ionic-team/ionic/commit/a3666ddf0ccc44c696121a8d6107015dbe7aeabb)), closes [#19839](https://github.com/ionic-team/ionic/issues/19839)
-* **header:** support collapsible header with multiple toolbars ([#19909](https://github.com/ionic-team/ionic/issues/19909)) ([fc4bb2d](https://github.com/ionic-team/ionic/commit/fc4bb2db5c5715841347135bdfa1bf66718d647d))
-* **header:** translucent toolbars now work with collapsible header ([#19774](https://github.com/ionic-team/ionic/issues/19774)) ([b642b53](https://github.com/ionic-team/ionic/commit/b642b532e8846042f1317dc936191d0934b23945)), closes [#19773](https://github.com/ionic-team/ionic/issues/19773)
-* **title:** only animate large title if back button is in start slot ([#19846](https://github.com/ionic-team/ionic/issues/19846)) ([cace1b3](https://github.com/ionic-team/ionic/commit/cace1b357e5acd54d49f2b662ecee5de90add708)), closes [#19840](https://github.com/ionic-team/ionic/issues/19840)
-* **nav-params:** set generic type on navigation parameters get() ([#19195](https://github.com/ionic-team/ionic/issues/19195)) ([504051d](https://github.com/ionic-team/ionic/commit/504051d709c8afe08d588747866d2ee924baf804))
-* **picker:** pass data and role to dismiss ([#19787](https://github.com/ionic-team/ionic/issues/19787)) ([7988720](https://github.com/ionic-team/ionic/commit/7988720b1cf46a651d9c140f0fe95726d3feb48c)), closes [#18454](https://github.com/ionic-team/ionic/issues/18454)
-* **searchbar:** use back button config value for cancel icon ([#19353](https://github.com/ionic-team/ionic/issues/19353)) ([3d6f3b9](https://github.com/ionic-team/ionic/commit/ed6f3b9f3f42ef85f3f2d083fa7fe37a69b491c8))
-* **textarea:** remove padding from textarea placeholder ([#19694](https://github.com/ionic-team/ionic/issues/19694)) ([f63d37a](https://github.com/ionic-team/ionic/commit/f63d37a4c506801a19b9bf6e5ef05d415d680b0c)), closes [#19616](https://github.com/ionic-team/ionic/issues/19616)
-* **toast:** call button handler on cancel ([#19793](https://github.com/ionic-team/ionic/issues/19793)) ([420aa66](https://github.com/ionic-team/ionic/commit/420aa6639214e7d2e7b7413e699ace3d7fd35e40)), closes [#19791](https://github.com/ionic-team/ionic/issues/19791)
-
-
-
-### Features
-
-* **animation:** animation identifiers ([#19771](https://github.com/ionic-team/ionic/issues/19771)) ([7d41715](https://github.com/ionic-team/ionic/commit/7d417154c5f1ba89e0a30084807ff7e164dd6eba)), closes [#19550](https://github.com/ionic-team/ionic/issues/19550)
-* **animation:** cubic-bezier easing conversion utility (experimental) ([#19788](https://github.com/ionic-team/ionic/issues/19788)) ([96a5e60](https://github.com/ionic-team/ionic/commit/96a5e600e563489d93a26d5956d210f246f6fea5)), closes [#19789](https://github.com/ionic-team/ionic/issues/19789)
-* **alert:** add support for textarea inputs ([#16851](https://github.com/ionic-team/ionic/issues/16851)) ([b28cf02](https://github.com/ionic-team/ionic/commit/b28cf02ef3979c844c498a8e30ee977937984828)), closes [#14153](https://github.com/ionic-team/ionic/issues/14153)
-* **angular:** expose Ionic Animations via AnimationController ([#19745](https://github.com/ionic-team/ionic/issues/19745)) ([67a7e23](https://github.com/ionic-team/ionic/commit/67a7e232b9058620653feec5ed99e0ebf22b6620))
-* **angular:** expose Ionic Gestures via GestureController ([#19864](https://github.com/ionic-team/ionic/issues/19864)) ([48a7662](https://github.com/ionic-team/ionic/commit/48a766246d08170c709345bba235275eef0bd020))
-* **searchbar:** add --box-shadow variable to style searchbar input ([#19838](https://github.com/ionic-team/ionic/issues/19838)) ([1ab7066](https://github.com/ionic-team/ionic/commit/1ab7066aa085bc0185a6dd3d162439f7f82415fa))
-* **select:** add --placeholder-opacity and --placeholder-color, expose shadow parts ([#19893](https://github.com/ionic-team/ionic/issues/19893)) ([bef0f53](https://github.com/ionic-team/ionic/commit/bef0f53d0dcb15c58221c2dec8c4c274d3b5c77e)), closes [#17446](https://github.com/ionic-team/ionic/issues/17446)
-* **split-pane:** convert to shadow component, add width, max-width, and min-width vars ([#19754](https://github.com/ionic-team/ionic/issues/19754)) ([d80f455](https://github.com/ionic-team/ionic/commit/d80f45516d5dca62b77db1773206ef274d42f3ef)), closes [#17088](https://github.com/ionic-team/ionic/issues/17088)
-
-
-
-### Breaking Changes
-
-> We recommend updating to the latest version of 4.x before trying out version 5 in order to see deprecation warnings related to your app in the console.
-
-* **back-button:** convert back button to shadow ([#19411](https://github.com/ionic-team/ionic/pull/19411)) ([0d40d3f](https://github.com/ionic-team/ionic/commit/0d40d3f3b72aac7932ac71e6573d8bbb65a01515))
-* **ionicons:** update to Ionicons v5. See https://ionicons.com for more information. ([#19670](https://github.com/ionic-team/ionic/pull/19670)) ([69e10de](https://github.com/ionic-team/ionic/commit/69e10de718dcba4d43e82bd37aeacd2585dd9a79))
-* **list-header:** redesign list header to match latest iOS spec ([#19915](https://github.com/ionic-team/ionic/issues/19915)) ([5bbb95f](https://github.com/ionic-team/ionic/commit/5bbb95fae1e371021d6a0edc17fbb021a598b285))
-* **split-pane:** convert split-pane to shadow ([#19754](https://github.com/ionic-team/ionic/issues/19754)) ([d80f455](https://github.com/ionic-team/ionic/commit/d80f45516d5dca62b77db1773206ef274d42f3ef))
-
-
-## [4.11.5](https://github.com/ionic-team/ionic/compare/v4.11.0...v4.11.5) (2019-11-14)
-
-
-### Bug Fixes
-
-* **react:** improved lifecycle hooks to deal with stale closures, fixes [#19873](https://github.com/ionic-team/ionic/issues/19873) ([#19874](https://github.com/ionic-team/ionic/issues/19874)) ([5ff786a](https://github.com/ionic-team/ionic/commit/5ff786a23d5aa32281bbf5daaa7f8156de39caca))
-
-
 ## [4.11.4](https://github.com/ionic-team/ionic/compare/v4.11.1...v4.11.4) (2019-11-07)


--- a/angular/BREAKING.md
+++ b/angular/BREAKING.md
@@ -507,7 +507,7 @@ _In the following examples, `{breakpoint}` refers to the optional screen breakpo
 - `push-{breakpoint}-{value}` attributes have been renamed to `push-{breakpoint}=“{value}”`
 - `pull-{breakpoint}-{value}` attributes have been renamed to `pull-{breakpoint}=“{value}”`

-Customizing the padding and width of a grid should now be done with CSS variables. For more information, see [Grid Layout](https://github.com/ionic-team/ionic-docs/blob/master/src/pages/layout/grid.md).
+Customizing the padding and width of a grid should now be done with CSS variables. For more information, see [Grid Layout](https://github.com/ionic-team/ionic-docs/blob/master/src/content/layout/grid.md).

 ## Icon

--- a/angular/package.json
+++ b/angular/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@ionic/angular",
-  "version": "5.0.0-beta.4",
+  "version": "5.0.0-beta.0",
  "description": "Angular specific wrappers for @ionic/core",
  "keywords": [
    "ionic",
@@ -24,11 +24,11 @@
  },
  "homepage": "https://ionicframework.com/",
  "scripts": {
-    "build": "npm run clean && npm run build.ng && npm run build.core && npm run clean-generated",
+    "build": "npm run clean && npm run build.core && npm run build.ng && npm run clean-generated",
    "build.core": "node scripts/build-core.js",
    "build.fesm": "rollup --config ./scripts/rollup.config.js",
    "build.link": "npm run build && node scripts/link-copy.js",
-    "build.ng": "ng-packagr -p package.json",
+    "build.ng": "npm run build.es2015 && npm run build.es5",
    "build.es2015": "ngc -p tsconfig.json && rollup --config ./scripts/rollup.config.js",
    "build.es5": "ngc -p tsconfig.legacy.json && rollup --config ./scripts/rollup.config.legacy.js",
    "clean": "node scripts/clean.js",
@@ -41,46 +41,53 @@
    "tsc": "tsc -p .",
    "validate": "npm i && npm run lint && npm run test && npm run build"
  },
+  "module": "dist/fesm5.js",
+  "main": "dist/fesm5.cjs.js",
+  "types": "dist/core.d.ts",
+  "files": [
+    "dist/",
+    "css/"
+  ],
  "dependencies": {
-    "@ionic/core": "5.0.0-beta.4",
+    "@ionic/core": "5.0.0-beta.0",
    "tslib": "^1.9.3"
  },
  "peerDependencies": {
-    "@angular/core": ">=8.2.7",
-    "@angular/forms": ">=8.2.7",
-    "@angular/router": ">=8.2.7",
+    "@angular-devkit/core": "7.2.1 - 8",
+    "@angular-devkit/schematics": "7.2.1 - 8",
+    "@angular/core": "7.2.1 - 8",
+    "@angular/common": "7.2.1 - 8",
+    "@angular/forms": "7.2.1 - 8",
+    "@angular/router": "7.2.1 - 8",
+    "@angular/compiler": "7.2.1 - 8",
+    "@angular/compiler-cli": "7.2.1 - 8",
+    "@angular/platform-browser": "7.2.1 - 8",
+    "@angular/platform-browser-dynamic": "7.2.1 - 8",
    "rxjs": ">=6.2.0",
    "zone.js": ">=0.8.26"
  },
  "devDependencies": {
-    "@angular-devkit/core": "8.3.17",
-    "@angular-devkit/schematics": "8.3.17",
-    "@angular/common": "8.2.13",
-    "@angular/compiler": "8.2.13",
-    "@angular/compiler-cli": "8.2.13",
-    "@angular/core": "8.2.13",
-    "@angular/forms": "8.2.13",
-    "@angular/router": "8.2.13",
-    "@types/node": "12.12.5",
+    "@angular-devkit/core": "^7.2.1",
+    "@angular-devkit/schematics": "^7.2.1",
+    "@angular/common": "^7.2.1",
+    "@angular/compiler": "^7.2.1",
+    "@angular/compiler-cli": "^7.2.1",
+    "@angular/core": "^7.2.1",
+    "@angular/forms": "^7.2.1",
+    "@angular/platform-browser": "^7.2.1",
+    "@angular/platform-browser-dynamic": "^7.2.1",
+    "@angular/router": "^7.2.1",
+    "@types/node": "~12.0.12",
    "fs-extra": "^7.0.0",
    "glob": "^7.1.4",
-    "ng-packagr": "5.7.1",
    "rollup": "~1.17.0",
    "rollup-plugin-node-resolve": "~5.2.0",
    "rxjs": "^6.5.2",
    "tsickle": "^0.34.0",
    "tslint": "^5.12.1",
    "tslint-ionic-rules": "0.0.21",
-    "typescript": "3.4.5",
-    "zone.js": "^0.8.28"
+    "typescript": "~3.2.2",
+    "zone.js": "~0.8.26"
  },
-  "schematics": "schematics/collection.json",
-  "ngPackage": {
-    "lib": {
-      "entryFile": "src/index.ts"
-    },
-    "whitelistedNonPeerDependencies": [
-      "@ionic/core"
-    ]
-  }
+  "schematics": "./dist/schematics/collection.json"
 }
--- a/angular/scripts/build-core.js
+++ b/angular/scripts/build-core.js
@@ -15,7 +15,7 @@ function copyIonicons() {

 function copyCSS() {
  const src = path.join(__dirname, '..', '..', 'core', 'css');
-  const dst = path.join(__dirname, '..','dist', 'css');
+  const dst = path.join(__dirname, '..', 'css');

  fs.removeSync(dst);
  fs.copySync(src, dst);
--- a/angular/scripts/rollup.config.js
+++ b/angular/scripts/rollup.config.js
@@ -16,7 +16,7 @@ export default {
  },
  plugins: [
    resolve({
-       mainFields: ['module']
+      module: true,
    })
  ]
-};
+};
--- a/angular/src/app-initialize.ts
+++ b/angular/src/app-initialize.ts
@@ -10,7 +10,7 @@ let didInitialize = false;
 export const appInitialize = (config: Config, doc: Document, zone: NgZone) => {
  return (): any => {
    const win: IonicWindow | undefined = doc.defaultView as any;
-    if (win && typeof (window as any) !== 'undefined') {
+    if (win) {
      if (didInitialize) {
        console.warn('Ionic Angular was already initialized. Make sure IonicModule.forRoot() is just called once.');
      }
--- a/angular/src/directives/navigation/ion-back-button.ts
+++ b/angular/src/directives/navigation/ion-back-button.ts
@@ -6,7 +6,7 @@ import { IonRouterOutlet } from './ion-router-outlet';

@Directive({
  selector: 'ion-back-button',
-  inputs: ['defaultHref'],
+  inputs: ['defaultHref']
 })
 export class IonBackButtonDelegate {

--- a/angular/src/directives/navigation/ion-router-outlet.ts
+++ b/angular/src/directives/navigation/ion-router-outlet.ts
@@ -16,8 +16,6 @@ import { RouteView, getUrl } from './stack-utils';
  inputs: ['animated', 'swipeGesture']
 })
 export class IonRouterOutlet implements OnDestroy, OnInit {
-  nativeEl: HTMLIonRouterOutletElement;
-
  private activated: ComponentRef<any> | null = null;
  private activatedView: RouteView | null = null;

@@ -25,6 +23,7 @@ export class IonRouterOutlet implements OnDestroy, OnInit {
  private _swipeGesture?: boolean;
  private name: string;
  private stackCtrl: StackController;
+  private nativeEl: HTMLIonRouterOutletElement;

  // Maintain map of activated route proxies for each component instance
  private proxyMap = new WeakMap<any, ActivatedRoute>();
@@ -242,22 +241,6 @@ export class IonRouterOutlet implements OnDestroy, OnInit {
    return active ? active.url : undefined;
  }

-  /**
-   * Returns the RouteView of the active page of each stack.
-   * @internal
-   */
-  getLastRouteView(stackId?: string): RouteView | undefined {
-    return this.stackCtrl.getLastUrl(stackId);
-  }
-
-  /**
-   * Returns the root view in the tab stack.
-   * @internal
-   */
-  getRootView(stackId?: string): RouteView | undefined {
-    return this.stackCtrl.getRootUrl(stackId);
-  }
-
  /**
   * Returns the active stack ID. In the context of ion-tabs, it means the active tab.
   */
@@ -331,7 +314,7 @@ class OutletInjector implements Injector {
    private route: ActivatedRoute,
    private childContexts: ChildrenOutletContexts,
    private parent: Injector
-  ) { }
+  ) {}

  get(token: any, notFoundValue?: any): any {
    if (token === ActivatedRoute) {
--- a/angular/src/directives/navigation/ion-tabs.ts
+++ b/angular/src/directives/navigation/ion-tabs.ts
@@ -42,15 +42,15 @@ import { StackEvent } from './stack-utils';
 })
 export class IonTabs {

-  @ViewChild('outlet', { read: IonRouterOutlet, static: false }) outlet: IonRouterOutlet;
-  @ContentChild(IonTabBar, { static: false }) tabBar: IonTabBar | undefined;
+  @ViewChild('outlet', { read: IonRouterOutlet }) outlet: IonRouterOutlet;
+  @ContentChild(IonTabBar) tabBar: IonTabBar | undefined;

-  @Output() ionTabsWillChange = new EventEmitter<{ tab: string }>();
-  @Output() ionTabsDidChange = new EventEmitter<{ tab: string }>();
+  @Output() ionTabsWillChange = new EventEmitter<{tab: string}>();
+  @Output() ionTabsDidChange = new EventEmitter<{tab: string}>();

  constructor(
    private navCtrl: NavController,
-  ) { }
+  ) {}

  /**
   * @internal
@@ -66,53 +66,18 @@ export class IonTabs {
    }
  }

-  /**
-   * When a tab button is clicked, there are several scenarios:
-   * 1. If the selected tab is currently active (the tab button has been clicked
-   *    again), then it should go to the root view for that tab.
-   *
-   *   a. Get the saved root view from the router outlet. If the saved root view
-   *      matches the tabRootUrl, set the route view to this view including the
-   *      navigation extras.
-   *   b. If the saved root view from the router outlet does
-   *      not match, navigate to the tabRootUrl. No navigation extras are
-   *      included.
-   *
-   * 2. If the current tab tab is not currently selected, get the last route
-   *    view from the router outlet.
-   *
-   *   a. If the last route view exists, navigate to that view including any
-   *      navigation extras
-   *   b. If the last route view doesn't exist, then navigate
-   *      to the default tabRootUrl
-   */
  @HostListener('ionTabButtonClick', ['$event.detail.tab'])
  select(tab: string) {
    const alreadySelected = this.outlet.getActiveStackId() === tab;
-    const tabRootUrl = `${this.outlet.tabsPrefix}/${tab}`;
-    if (alreadySelected) {
-      const rootView = this.outlet.getRootView(tab);
-      const navigationExtras = rootView && tabRootUrl === rootView.url && rootView.savedExtras;
-      return this.navCtrl.navigateRoot(tabRootUrl, {
-        ...(navigationExtras),
-        animated: true,
-        animationDirection: 'back',
-      });
-    } else {
-      const lastRoute = this.outlet.getLastRouteView(tab);
-      /**
-       * If there is a lastRoute, goto that, otherwise goto the fallback url of the
-       * selected tab
-       */
-      const url = lastRoute && lastRoute.url || tabRootUrl;
-      const navigationExtras = lastRoute && lastRoute.savedExtras;
+    const href = `${this.outlet.tabsPrefix}/${tab}`;
+    const url = alreadySelected
+      ? href
+      : this.outlet.getLastUrl(tab) || href;

-      return this.navCtrl.navigateRoot(url, {
-        ...(navigationExtras),
-        animated: true,
-        animationDirection: 'back',
-      });
-    }
+    return this.navCtrl.navigateRoot(url, {
+      animated: true,
+      animationDirection: 'back'
+    });
  }

  getSelected(): string | undefined {
--- a/angular/src/directives/navigation/nav-delegate.ts
+++ b/angular/src/directives/navigation/nav-delegate.ts
@@ -1,17 +1,11 @@
 import { ComponentFactoryResolver, Directive, ElementRef, Injector, ViewContainerRef } from '@angular/core';

 import { AngularDelegate } from '../../providers/angular-delegate';
-import { ProxyCmp, proxyOutputs } from '../proxies-utils';

-@ProxyCmp({
-  inputs: ['animated', 'animation', 'root', 'rootParams', 'swipeGesture'],
-  methods: ['push', 'insert', 'insertPages', 'pop', 'popTo', 'popToRoot', 'removeIndex', 'setRoot', 'setPages', 'getActive', 'getByIndex', 'canGoBack', 'getPrevious']
-})
@Directive({
-  selector: 'ion-nav'
+  selector: 'ion-nav',
 })
 export class NavDelegate {
-  protected el: HTMLElement;
  constructor(
    ref: ElementRef,
    resolver: ComponentFactoryResolver,
@@ -19,8 +13,6 @@ export class NavDelegate {
    angularDelegate: AngularDelegate,
    location: ViewContainerRef
  ) {
-    this.el = ref.nativeElement;
    ref.nativeElement.delegate = angularDelegate.create(resolver, injector, location);
-    proxyOutputs(this, this.el, ['ionNavDidChange' , 'ionNavWillChange' ]);
  }
 }
--- a/angular/src/directives/navigation/stack-controller.ts
+++ b/angular/src/directives/navigation/stack-controller.ts
@@ -70,7 +70,7 @@ export class StackController {
    if (router.getCurrentNavigation) {
      currentNavigation = router.getCurrentNavigation();

-      // Angular < 7.2.0
+    // Angular < 7.2.0
    } else if (
      router.navigations &&
      router.navigations.value
@@ -191,14 +191,6 @@ export class StackController {
    return views.length > 0 ? views[views.length - 1] : undefined;
  }

-  /**
-   * @internal
-   */
-  getRootUrl(stackId?: string) {
-    const views = this.getStack(stackId);
-    return views.length > 0 ? views[0] : undefined;
-  }
-
  getActiveStackId(): string | undefined {
    return this.activeView ? this.activeView.stackId : undefined;
  }
--- a/angular/src/directives/proxies-utils.ts
+++ b/angular/src/directives/proxies-utils.ts
@@ -5,12 +5,10 @@ export const proxyInputs = (Cmp: any, inputs: string[]) => {
  const Prototype = Cmp.prototype;
  inputs.forEach(item => {
    Object.defineProperty(Prototype, item, {
-      get() {
-        return this.el[item];
-      },
+      get() { return this.el[item]; },
      set(val: any) {
-        this.z.runOutsideAngular(() => (this.el[item] = val));
-      }
+        this.z.runOutsideAngular(() => this.el[item] = val);
+      },
    });
  });
 };
@@ -18,29 +16,13 @@ export const proxyInputs = (Cmp: any, inputs: string[]) => {
 export const proxyMethods = (Cmp: any, methods: string[]) => {
  const Prototype = Cmp.prototype;
  methods.forEach(methodName => {
-    Prototype[methodName] = function () {
+    Prototype[methodName] = function() {
      const args = arguments;
-      return this.z.runOutsideAngular(() =>
-        this.el[methodName].apply(this.el, args)
-      );
+      return this.z.runOutsideAngular(() => this.el[methodName].apply(this.el, args));
    };
  });
 };

 export const proxyOutputs = (instance: any, el: any, events: string[]) => {
  events.forEach(eventName => instance[eventName] = fromEvent(el, eventName));
-}
-
-// tslint:disable-next-line: only-arrow-functions
-export function ProxyCmp(opts: { inputs?: any; methods?: any }) {
-  const decorator =  function(cls: any){
-    if (opts.inputs) {
-      proxyInputs(cls, opts.inputs);
-    }
-    if (opts.methods) {
-      proxyMethods(cls, opts.methods);
-    }
-    return cls;
-  };
-  return decorator;
-}
+};
--- a/angular/src/directives/proxies.ts
+++ b/angular/src/directives/proxies.ts
@@ -1,12 +1,11 @@
 /* tslint:disable */
 /* auto-generated angular directive proxies */
 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EventEmitter, NgZone } from '@angular/core';
-import { ProxyCmp, proxyOutputs } from './proxies-utils';
+import { proxyInputs, proxyMethods, proxyOutputs } from './proxies-utils';

 import { Components } from '@ionic/core';

 export declare interface IonApp extends Components.IonApp {}
-
@Component({ selector: 'ion-app', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>' })
 export class IonApp {
  protected el: HTMLElement;
@@ -17,7 +16,6 @@ export class IonApp {
 }

 export declare interface IonAvatar extends Components.IonAvatar {}
-
@Component({ selector: 'ion-avatar', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>' })
 export class IonAvatar {
  protected el: HTMLElement;
@@ -28,7 +26,6 @@ export class IonAvatar {
 }

 export declare interface IonBackButton extends Components.IonBackButton {}
-@ProxyCmp({inputs: ['color', 'defaultHref', 'disabled', 'icon', 'mode', 'text', 'type']})
@Component({ selector: 'ion-back-button', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>', inputs: ['color', 'defaultHref', 'disabled', 'icon', 'mode', 'text', 'type'] })
 export class IonBackButton {
  protected el: HTMLElement;
@@ -37,9 +34,9 @@ export class IonBackButton {
    this.el = r.nativeElement;
  }
 }
+proxyInputs(IonBackButton, ['color', 'defaultHref', 'disabled', 'icon', 'mode', 'text', 'type']);

 export declare interface IonBackdrop extends Components.IonBackdrop {}
-@ProxyCmp({inputs: ['stopPropagation', 'tappable', 'visible']})
@Component({ selector: 'ion-backdrop', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>', inputs: ['stopPropagation', 'tappable', 'visible'] })
 export class IonBackdrop {
  ionBackdropTap!: EventEmitter<CustomEvent>;
@@ -50,9 +47,9 @@ export class IonBackdrop {
    proxyOutputs(this, this.el, ['ionBackdropTap']);
  }
 }
+proxyInputs(IonBackdrop, ['stopPropagation', 'tappable', 'visible']);

 export declare interface IonBadge extends Components.IonBadge {}
-@ProxyCmp({inputs: ['color', 'mode']})
@Component({ selector: 'ion-badge', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>', inputs: ['color', 'mode'] })
 export class IonBadge {
  protected el: HTMLElement;
@@ -61,9 +58,9 @@ export class IonBadge {
    this.el = r.nativeElement;
  }
 }
+proxyInputs(IonBadge, ['color', 'mode']);

 export declare interface IonButton extends Components.IonButton {}
-@ProxyCmp({inputs: ['buttonType', 'color', 'disabled', 'download', 'expand', 'fill', 'href', 'mode', 'rel', 'routerDirection', 'shape', 'size', 'strong', 'target', 'type']})
@Component({ selector: 'ion-button', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>', inputs: ['buttonType', 'color', 'disabled', 'download', 'expand', 'fill', 'href', 'mode', 'rel', 'routerDirection', 'shape', 'size', 'strong', 'target', 'type'] })
 export class IonButton {
  ionFocus!: EventEmitter<CustomEvent>;
@@ -75,9 +72,9 @@ export class IonButton {
    proxyOutputs(this, this.el, ['ionFocus', 'ionBlur']);
  }
 }
+proxyInputs(IonButton, ['buttonType', 'color', 'disabled', 'download', 'expand', 'fill', 'href', 'mode', 'rel', 'routerDirection', 'shape', 'size', 'strong', 'target', 'type']);

 export declare interface IonButtons extends Components.IonButtons {}
-@ProxyCmp({inputs: ['collapse']})
@Component({ selector: 'ion-buttons', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>', inputs: ['collapse'] })
 export class IonButtons {
  protected el: HTMLElement;
@@ -86,9 +83,9 @@ export class IonButtons {
    this.el = r.nativeElement;
  }
 }
+proxyInputs(IonButtons, ['collapse']);

 export declare interface IonCard extends Components.IonCard {}
-@ProxyCmp({inputs: ['button', 'color', 'disabled', 'download', 'href', 'mode', 'rel', 'routerDirection', 'target', 'type']})
@Component({ selector: 'ion-card', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>', inputs: ['button', 'color', 'disabled', 'download', 'href', 'mode', 'rel', 'routerDirection', 'target', 'type'] })
 export class IonCard {
  protected el: HTMLElement;
@@ -97,9 +94,9 @@ export class IonCard {
    this.el = r.nativeElement;
  }
 }
+proxyInputs(IonCard, ['button', 'color', 'disabled', 'download', 'href', 'mode', 'rel', 'routerDirection', 'target', 'type']);

 export declare interface IonCardContent extends Components.IonCardContent {}
-@ProxyCmp({inputs: ['mode']})
@Component({ selector: 'ion-card-content', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>', inputs: ['mode'] })
 export class IonCardContent {
  protected el: HTMLElement;
@@ -108,9 +105,9 @@ export class IonCardContent {
    this.el = r.nativeElement;
  }
 }
+proxyInputs(IonCardContent, ['mode']);

 export declare interface IonCardHeader extends Components.IonCardHeader {}
-@ProxyCmp({inputs: ['color', 'mode', 'translucent']})
@Component({ selector: 'ion-card-header', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>', inputs: ['color', 'mode', 'translucent'] })
 export class IonCardHeader {
  protected el: HTMLElement;
@@ -119,9 +116,9 @@ export class IonCardHeader {
    this.el = r.nativeElement;
  }
 }
+proxyInputs(IonCardHeader, ['color', 'mode', 'translucent']);

 export declare interface IonCardSubtitle extends Components.IonCardSubtitle {}
-@ProxyCmp({inputs: ['color', 'mode']})
@Component({ selector: 'ion-card-subtitle', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>', inputs: ['color', 'mode'] })
 export class IonCardSubtitle {
  protected el: HTMLElement;
@@ -130,9 +127,9 @@ export class IonCardSubtitle {
    this.el = r.nativeElement;
  }
 }
+proxyInputs(IonCardSubtitle, ['color', 'mode']);

 export declare interface IonCardTitle extends Components.IonCardTitle {}
-@ProxyCmp({inputs: ['color', 'mode']})
@Component({ selector: 'ion-card-title', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>', inputs: ['color', 'mode'] })
 export class IonCardTitle {
  protected el: HTMLElement;
@@ -141,9 +138,9 @@ export class IonCardTitle {
    this.el = r.nativeElement;
  }
 }
+proxyInputs(IonCardTitle, ['color', 'mode']);

 export declare interface IonCheckbox extends Components.IonCheckbox {}
-@ProxyCmp({inputs: ['checked', 'color', 'disabled', 'indeterminate', 'mode', 'name', 'value']})
@Component({ selector: 'ion-checkbox', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>', inputs: ['checked', 'color', 'disabled', 'indeterminate', 'mode', 'name', 'value'] })
 export class IonCheckbox {
  ionChange!: EventEmitter<CustomEvent>;
@@ -156,9 +153,9 @@ export class IonCheckbox {
    proxyOutputs(this, this.el, ['ionChange', 'ionFocus', 'ionBlur']);
  }
 }
+proxyInputs(IonCheckbox, ['checked', 'color', 'disabled', 'indeterminate', 'mode', 'name', 'value']);

 export declare interface IonChip extends Components.IonChip {}
-@ProxyCmp({inputs: ['color', 'mode', 'outline']})
@Component({ selector: 'ion-chip', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>', inputs: ['color', 'mode', 'outline'] })
 export class IonChip {
  protected el: HTMLElement;
@@ -167,9 +164,9 @@ export class IonChip {
    this.el = r.nativeElement;
  }
 }
+proxyInputs(IonChip, ['color', 'mode', 'outline']);

 export declare interface IonCol extends Components.IonCol {}
-@ProxyCmp({inputs: ['offset', 'offsetLg', 'offsetMd', 'offsetSm', 'offsetXl', 'offsetXs', 'pull', 'pullLg', 'pullMd', 'pullSm', 'pullXl', 'pullXs', 'push', 'pushLg', 'pushMd', 'pushSm', 'pushXl', 'pushXs', 'size', 'sizeLg', 'sizeMd', 'sizeSm', 'sizeXl', 'sizeXs']})
@Component({ selector: 'ion-col', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>', inputs: ['offset', 'offsetLg', 'offsetMd', 'offsetSm', 'offsetXl', 'offsetXs', 'pull', 'pullLg', 'pullMd', 'pullSm', 'pullXl', 'pullXs', 'push', 'pushLg', 'pushMd', 'pushSm', 'pushXl', 'pushXs', 'size', 'sizeLg', 'sizeMd', 'sizeSm', 'sizeXl', 'sizeXs'] })
 export class IonCol {
  protected el: HTMLElement;
@@ -178,9 +175,9 @@ export class IonCol {
    this.el = r.nativeElement;
  }
 }
+proxyInputs(IonCol, ['offset', 'offsetLg', 'offsetMd', 'offsetSm', 'offsetXl', 'offsetXs', 'pull', 'pullLg', 'pullMd', 'pullSm', 'pullXl', 'pullXs', 'push', 'pushLg', 'pushMd', 'pushSm', 'pushXl', 'pushXs', 'size', 'sizeLg', 'sizeMd', 'sizeSm', 'sizeXl', 'sizeXs']);

 export declare interface IonContent extends Components.IonContent {}
-@ProxyCmp({inputs: ['color', 'forceOverscroll', 'fullscreen', 'scrollEvents', 'scrollX', 'scrollY'], 'methods': ['getScrollElement', 'scrollToTop', 'scrollToBottom', 'scrollByPoint', 'scrollToPoint']})
@Component({ selector: 'ion-content', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>', inputs: ['color', 'forceOverscroll', 'fullscreen', 'scrollEvents', 'scrollX', 'scrollY'] })
 export class IonContent {
  ionScrollStart!: EventEmitter<CustomEvent>;
@@ -193,10 +190,11 @@ export class IonContent {
    proxyOutputs(this, this.el, ['ionScrollStart', 'ionScroll', 'ionScrollEnd']);
  }
 }
+proxyMethods(IonContent, ['getScrollElement', 'scrollToTop', 'scrollToBottom', 'scrollByPoint', 'scrollToPoint']);
+proxyInputs(IonContent, ['color', 'forceOverscroll', 'fullscreen', 'scrollEvents', 'scrollX', 'scrollY']);

 export declare interface IonDatetime extends Components.IonDatetime {}
-@ProxyCmp({inputs: ['cancelText', 'dayNames', 'dayShortNames', 'dayValues', 'disabled', 'displayFormat', 'displayTimezone', 'doneText', 'hourValues', 'max', 'min', 'minuteValues', 'mode', 'monthNames', 'monthShortNames', 'monthValues', 'name', 'pickerFormat', 'pickerOptions', 'placeholder', 'readonly', 'value', 'yearValues'], 'methods': ['open']})
-@Component({ selector: 'ion-datetime', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>', inputs: ['cancelText', 'dayNames', 'dayShortNames', 'dayValues', 'disabled', 'displayFormat', 'displayTimezone', 'doneText', 'hourValues', 'max', 'min', 'minuteValues', 'mode', 'monthNames', 'monthShortNames', 'monthValues', 'name', 'pickerFormat', 'pickerOptions', 'placeholder', 'readonly', 'value', 'yearValues'] })
+@Component({ selector: 'ion-datetime', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>', inputs: ['cancelText', 'dayNames', 'dayShortNames', 'dayValues', 'disabled', 'displayFormat', 'doneText', 'hourValues', 'max', 'min', 'minuteValues', 'mode', 'monthNames', 'monthShortNames', 'monthValues', 'name', 'pickerFormat', 'pickerOptions', 'placeholder', 'readonly', 'value', 'yearValues'] })
 export class IonDatetime {
  ionCancel!: EventEmitter<CustomEvent>;
  ionChange!: EventEmitter<CustomEvent>;
@@ -209,9 +207,10 @@ export class IonDatetime {
    proxyOutputs(this, this.el, ['ionCancel', 'ionChange', 'ionFocus', 'ionBlur']);
  }
 }
+proxyMethods(IonDatetime, ['open']);
+proxyInputs(IonDatetime, ['cancelText', 'dayNames', 'dayShortNames', 'dayValues', 'disabled', 'displayFormat', 'doneText', 'hourValues', 'max', 'min', 'minuteValues', 'mode', 'monthNames', 'monthShortNames', 'monthValues', 'name', 'pickerFormat', 'pickerOptions', 'placeholder', 'readonly', 'value', 'yearValues']);

 export declare interface IonFab extends Components.IonFab {}
-@ProxyCmp({inputs: ['activated', 'edge', 'horizontal', 'vertical'], 'methods': ['close']})
@Component({ selector: 'ion-fab', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>', inputs: ['activated', 'edge', 'horizontal', 'vertical'] })
 export class IonFab {
  protected el: HTMLElement;
@@ -220,9 +219,10 @@ export class IonFab {
    this.el = r.nativeElement;
  }
 }
+proxyMethods(IonFab, ['close']);
+proxyInputs(IonFab, ['activated', 'edge', 'horizontal', 'vertical']);

 export declare interface IonFabButton extends Components.IonFabButton {}
-@ProxyCmp({inputs: ['activated', 'color', 'disabled', 'download', 'href', 'mode', 'rel', 'routerDirection', 'show', 'size', 'target', 'translucent', 'type']})
@Component({ selector: 'ion-fab-button', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>', inputs: ['activated', 'color', 'disabled', 'download', 'href', 'mode', 'rel', 'routerDirection', 'show', 'size', 'target', 'translucent', 'type'] })
 export class IonFabButton {
  ionFocus!: EventEmitter<CustomEvent>;
@@ -234,9 +234,9 @@ export class IonFabButton {
    proxyOutputs(this, this.el, ['ionFocus', 'ionBlur']);
  }
 }
+proxyInputs(IonFabButton, ['activated', 'color', 'disabled', 'download', 'href', 'mode', 'rel', 'routerDirection', 'show', 'size', 'target', 'translucent', 'type']);

 export declare interface IonFabList extends Components.IonFabList {}
-@ProxyCmp({inputs: ['activated', 'side']})
@Component({ selector: 'ion-fab-list', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>', inputs: ['activated', 'side'] })
 export class IonFabList {
  protected el: HTMLElement;
@@ -245,9 +245,9 @@ export class IonFabList {
    this.el = r.nativeElement;
  }
 }
+proxyInputs(IonFabList, ['activated', 'side']);

 export declare interface IonFooter extends Components.IonFooter {}
-@ProxyCmp({inputs: ['mode', 'translucent']})
@Component({ selector: 'ion-footer', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>', inputs: ['mode', 'translucent'] })
 export class IonFooter {
  protected el: HTMLElement;
@@ -256,9 +256,9 @@ export class IonFooter {
    this.el = r.nativeElement;
  }
 }
+proxyInputs(IonFooter, ['mode', 'translucent']);

 export declare interface IonGrid extends Components.IonGrid {}
-@ProxyCmp({inputs: ['fixed']})
@Component({ selector: 'ion-grid', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>', inputs: ['fixed'] })
 export class IonGrid {
  protected el: HTMLElement;
@@ -267,9 +267,9 @@ export class IonGrid {
    this.el = r.nativeElement;
  }
 }
+proxyInputs(IonGrid, ['fixed']);

 export declare interface IonHeader extends Components.IonHeader {}
-@ProxyCmp({inputs: ['collapse', 'mode', 'translucent']})
@Component({ selector: 'ion-header', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>', inputs: ['collapse', 'mode', 'translucent'] })
 export class IonHeader {
  protected el: HTMLElement;
@@ -278,9 +278,9 @@ export class IonHeader {
    this.el = r.nativeElement;
  }
 }
+proxyInputs(IonHeader, ['collapse', 'mode', 'translucent']);

 export declare interface IonIcon extends Components.IonIcon {}
-@ProxyCmp({inputs: ['ariaLabel', 'color', 'flipRtl', 'icon', 'ios', 'lazy', 'md', 'mode', 'name', 'size', 'src']})
@Component({ selector: 'ion-icon', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>', inputs: ['ariaLabel', 'color', 'flipRtl', 'icon', 'ios', 'lazy', 'md', 'mode', 'name', 'size', 'src'] })
 export class IonIcon {
  protected el: HTMLElement;
@@ -289,9 +289,9 @@ export class IonIcon {
    this.el = r.nativeElement;
  }
 }
+proxyInputs(IonIcon, ['ariaLabel', 'color', 'flipRtl', 'icon', 'ios', 'lazy', 'md', 'mode', 'name', 'size', 'src']);

 export declare interface IonImg extends Components.IonImg {}
-@ProxyCmp({inputs: ['alt', 'src']})
@Component({ selector: 'ion-img', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>', inputs: ['alt', 'src'] })
 export class IonImg {
  ionImgWillLoad!: EventEmitter<CustomEvent>;
@@ -304,9 +304,9 @@ export class IonImg {
    proxyOutputs(this, this.el, ['ionImgWillLoad', 'ionImgDidLoad', 'ionError']);
  }
 }
+proxyInputs(IonImg, ['alt', 'src']);

 export declare interface IonInfiniteScroll extends Components.IonInfiniteScroll {}
-@ProxyCmp({inputs: ['disabled', 'position', 'threshold'], 'methods': ['complete']})
@Component({ selector: 'ion-infinite-scroll', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>', inputs: ['disabled', 'position', 'threshold'] })
 export class IonInfiniteScroll {
  ionInfinite!: EventEmitter<CustomEvent>;
@@ -317,9 +317,10 @@ export class IonInfiniteScroll {
    proxyOutputs(this, this.el, ['ionInfinite']);
  }
 }
+proxyMethods(IonInfiniteScroll, ['complete']);
+proxyInputs(IonInfiniteScroll, ['disabled', 'position', 'threshold']);

 export declare interface IonInfiniteScrollContent extends Components.IonInfiniteScrollContent {}
-@ProxyCmp({inputs: ['loadingSpinner', 'loadingText']})
@Component({ selector: 'ion-infinite-scroll-content', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>', inputs: ['loadingSpinner', 'loadingText'] })
 export class IonInfiniteScrollContent {
  protected el: HTMLElement;
@@ -328,9 +329,9 @@ export class IonInfiniteScrollContent {
    this.el = r.nativeElement;
  }
 }
+proxyInputs(IonInfiniteScrollContent, ['loadingSpinner', 'loadingText']);

 export declare interface IonInput extends Components.IonInput {}
-@ProxyCmp({inputs: ['accept', 'autocapitalize', 'autocomplete', 'autocorrect', 'autofocus', 'clearInput', 'clearOnEdit', 'color', 'debounce', 'disabled', 'inputmode', 'max', 'maxlength', 'min', 'minlength', 'mode', 'multiple', 'name', 'pattern', 'placeholder', 'readonly', 'required', 'size', 'spellcheck', 'step', 'type', 'value'], 'methods': ['setFocus', 'getInputElement']})
@Component({ selector: 'ion-input', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>', inputs: ['accept', 'autocapitalize', 'autocomplete', 'autocorrect', 'autofocus', 'clearInput', 'clearOnEdit', 'color', 'debounce', 'disabled', 'inputmode', 'max', 'maxlength', 'min', 'minlength', 'mode', 'multiple', 'name', 'pattern', 'placeholder', 'readonly', 'required', 'size', 'spellcheck', 'step', 'type', 'value'] })
 export class IonInput {
  ionInput!: EventEmitter<CustomEvent>;
@@ -344,9 +345,10 @@ export class IonInput {
    proxyOutputs(this, this.el, ['ionInput', 'ionChange', 'ionBlur', 'ionFocus']);
  }
 }
+proxyMethods(IonInput, ['setFocus', 'getInputElement']);
+proxyInputs(IonInput, ['accept', 'autocapitalize', 'autocomplete', 'autocorrect', 'autofocus', 'clearInput', 'clearOnEdit', 'color', 'debounce', 'disabled', 'inputmode', 'max', 'maxlength', 'min', 'minlength', 'mode', 'multiple', 'name', 'pattern', 'placeholder', 'readonly', 'required', 'size', 'spellcheck', 'step', 'type', 'value']);

 export declare interface IonItem extends Components.IonItem {}
-@ProxyCmp({inputs: ['button', 'color', 'detail', 'detailIcon', 'disabled', 'download', 'href', 'lines', 'mode', 'rel', 'routerDirection', 'target', 'type']})
@Component({ selector: 'ion-item', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>', inputs: ['button', 'color', 'detail', 'detailIcon', 'disabled', 'download', 'href', 'lines', 'mode', 'rel', 'routerDirection', 'target', 'type'] })
 export class IonItem {
  protected el: HTMLElement;
@@ -355,9 +357,9 @@ export class IonItem {
    this.el = r.nativeElement;
  }
 }
+proxyInputs(IonItem, ['button', 'color', 'detail', 'detailIcon', 'disabled', 'download', 'href', 'lines', 'mode', 'rel', 'routerDirection', 'target', 'type']);

 export declare interface IonItemDivider extends Components.IonItemDivider {}
-@ProxyCmp({inputs: ['color', 'mode', 'sticky']})
@Component({ selector: 'ion-item-divider', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>', inputs: ['color', 'mode', 'sticky'] })
 export class IonItemDivider {
  protected el: HTMLElement;
@@ -366,9 +368,9 @@ export class IonItemDivider {
    this.el = r.nativeElement;
  }
 }
+proxyInputs(IonItemDivider, ['color', 'mode', 'sticky']);

 export declare interface IonItemGroup extends Components.IonItemGroup {}
-
@Component({ selector: 'ion-item-group', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>' })
 export class IonItemGroup {
  protected el: HTMLElement;
@@ -379,7 +381,6 @@ export class IonItemGroup {
 }

 export declare interface IonItemOption extends Components.IonItemOption {}
-@ProxyCmp({inputs: ['color', 'disabled', 'download', 'expandable', 'href', 'mode', 'rel', 'target', 'type']})
@Component({ selector: 'ion-item-option', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>', inputs: ['color', 'disabled', 'download', 'expandable', 'href', 'mode', 'rel', 'target', 'type'] })
 export class IonItemOption {
  protected el: HTMLElement;
@@ -388,9 +389,9 @@ export class IonItemOption {
    this.el = r.nativeElement;
  }
 }
+proxyInputs(IonItemOption, ['color', 'disabled', 'download', 'expandable', 'href', 'mode', 'rel', 'target', 'type']);

 export declare interface IonItemOptions extends Components.IonItemOptions {}
-@ProxyCmp({inputs: ['side']})
@Component({ selector: 'ion-item-options', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>', inputs: ['side'] })
 export class IonItemOptions {
  ionSwipe!: EventEmitter<CustomEvent>;
@@ -401,9 +402,9 @@ export class IonItemOptions {
    proxyOutputs(this, this.el, ['ionSwipe']);
  }
 }
+proxyInputs(IonItemOptions, ['side']);

 export declare interface IonItemSliding extends Components.IonItemSliding {}
-@ProxyCmp({inputs: ['disabled'], 'methods': ['getOpenAmount', 'getSlidingRatio', 'open', 'close', 'closeOpened']})
@Component({ selector: 'ion-item-sliding', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>', inputs: ['disabled'] })
 export class IonItemSliding {
  ionDrag!: EventEmitter<CustomEvent>;
@@ -414,9 +415,10 @@ export class IonItemSliding {
    proxyOutputs(this, this.el, ['ionDrag']);
  }
 }
+proxyMethods(IonItemSliding, ['getOpenAmount', 'getSlidingRatio', 'open', 'close', 'closeOpened']);
+proxyInputs(IonItemSliding, ['disabled']);

 export declare interface IonLabel extends Components.IonLabel {}
-@ProxyCmp({inputs: ['color', 'mode', 'position']})
@Component({ selector: 'ion-label', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>', inputs: ['color', 'mode', 'position'] })
 export class IonLabel {
  protected el: HTMLElement;
@@ -425,9 +427,9 @@ export class IonLabel {
    this.el = r.nativeElement;
  }
 }
+proxyInputs(IonLabel, ['color', 'mode', 'position']);

 export declare interface IonList extends Components.IonList {}
-@ProxyCmp({inputs: ['inset', 'lines', 'mode'], 'methods': ['closeSlidingItems']})
@Component({ selector: 'ion-list', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>', inputs: ['inset', 'lines', 'mode'] })
 export class IonList {
  protected el: HTMLElement;
@@ -436,10 +438,11 @@ export class IonList {
    this.el = r.nativeElement;
  }
 }
+proxyMethods(IonList, ['closeSlidingItems']);
+proxyInputs(IonList, ['inset', 'lines', 'mode']);

 export declare interface IonListHeader extends Components.IonListHeader {}
-@ProxyCmp({inputs: ['color', 'lines', 'mode']})
-@Component({ selector: 'ion-list-header', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>', inputs: ['color', 'lines', 'mode'] })
+@Component({ selector: 'ion-list-header', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>', inputs: ['color', 'mode'] })
 export class IonListHeader {
  protected el: HTMLElement;
  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
@@ -447,9 +450,9 @@ export class IonListHeader {
    this.el = r.nativeElement;
  }
 }
+proxyInputs(IonListHeader, ['color', 'mode']);

 export declare interface IonMenu extends Components.IonMenu {}
-@ProxyCmp({inputs: ['contentId', 'disabled', 'maxEdgeStart', 'menuId', 'side', 'swipeGesture', 'type'], 'methods': ['isOpen', 'isActive', 'open', 'close', 'toggle', 'setOpen']})
@Component({ selector: 'ion-menu', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>', inputs: ['contentId', 'disabled', 'maxEdgeStart', 'menuId', 'side', 'swipeGesture', 'type'] })
 export class IonMenu {
  ionWillOpen!: EventEmitter<CustomEvent>;
@@ -463,9 +466,10 @@ export class IonMenu {
    proxyOutputs(this, this.el, ['ionWillOpen', 'ionWillClose', 'ionDidOpen', 'ionDidClose']);
  }
 }
+proxyMethods(IonMenu, ['isOpen', 'isActive', 'open', 'close', 'toggle', 'setOpen']);
+proxyInputs(IonMenu, ['contentId', 'disabled', 'maxEdgeStart', 'menuId', 'side', 'swipeGesture', 'type']);

 export declare interface IonMenuButton extends Components.IonMenuButton {}
-@ProxyCmp({inputs: ['autoHide', 'color', 'disabled', 'menu', 'type']})
@Component({ selector: 'ion-menu-button', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>', inputs: ['autoHide', 'color', 'disabled', 'menu', 'type'] })
 export class IonMenuButton {
  protected el: HTMLElement;
@@ -474,9 +478,9 @@ export class IonMenuButton {
    this.el = r.nativeElement;
  }
 }
+proxyInputs(IonMenuButton, ['autoHide', 'color', 'disabled', 'menu', 'type']);

 export declare interface IonMenuToggle extends Components.IonMenuToggle {}
-@ProxyCmp({inputs: ['autoHide', 'menu']})
@Component({ selector: 'ion-menu-toggle', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>', inputs: ['autoHide', 'menu'] })
 export class IonMenuToggle {
  protected el: HTMLElement;
@@ -485,9 +489,9 @@ export class IonMenuToggle {
    this.el = r.nativeElement;
  }
 }
+proxyInputs(IonMenuToggle, ['autoHide', 'menu']);

 export declare interface IonNav extends Components.IonNav {}
-@ProxyCmp({inputs: ['animated', 'animation', 'root', 'rootParams', 'swipeGesture'], 'methods': ['push', 'insert', 'insertPages', 'pop', 'popTo', 'popToRoot', 'removeIndex', 'setRoot', 'setPages', 'getActive', 'getByIndex', 'canGoBack', 'getPrevious']})
@Component({ selector: 'ion-nav', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>', inputs: ['animated', 'animation', 'root', 'rootParams', 'swipeGesture'] })
 export class IonNav {
  ionNavWillChange!: EventEmitter<CustomEvent>;
@@ -499,9 +503,10 @@ export class IonNav {
    proxyOutputs(this, this.el, ['ionNavWillChange', 'ionNavDidChange']);
  }
 }
+proxyMethods(IonNav, ['push', 'insert', 'insertPages', 'pop', 'popTo', 'popToRoot', 'removeIndex', 'setRoot', 'setPages', 'getActive', 'getByIndex', 'canGoBack', 'getPrevious']);
+proxyInputs(IonNav, ['animated', 'animation', 'root', 'rootParams', 'swipeGesture']);

 export declare interface IonNavLink extends Components.IonNavLink {}
-@ProxyCmp({inputs: ['component', 'componentProps', 'routerDirection']})
@Component({ selector: 'ion-nav-link', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>', inputs: ['component', 'componentProps', 'routerDirection'] })
 export class IonNavLink {
  protected el: HTMLElement;
@@ -510,9 +515,9 @@ export class IonNavLink {
    this.el = r.nativeElement;
  }
 }
+proxyInputs(IonNavLink, ['component', 'componentProps', 'routerDirection']);

 export declare interface IonNote extends Components.IonNote {}
-@ProxyCmp({inputs: ['color', 'mode']})
@Component({ selector: 'ion-note', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>', inputs: ['color', 'mode'] })
 export class IonNote {
  protected el: HTMLElement;
@@ -521,9 +526,9 @@ export class IonNote {
    this.el = r.nativeElement;
  }
 }
+proxyInputs(IonNote, ['color', 'mode']);

 export declare interface IonProgressBar extends Components.IonProgressBar {}
-@ProxyCmp({inputs: ['buffer', 'color', 'mode', 'reversed', 'type', 'value']})
@Component({ selector: 'ion-progress-bar', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>', inputs: ['buffer', 'color', 'mode', 'reversed', 'type', 'value'] })
 export class IonProgressBar {
  protected el: HTMLElement;
@@ -532,9 +537,9 @@ export class IonProgressBar {
    this.el = r.nativeElement;
  }
 }
+proxyInputs(IonProgressBar, ['buffer', 'color', 'mode', 'reversed', 'type', 'value']);

 export declare interface IonRadio extends Components.IonRadio {}
-@ProxyCmp({inputs: ['checked', 'color', 'disabled', 'mode', 'name', 'value']})
@Component({ selector: 'ion-radio', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>', inputs: ['checked', 'color', 'disabled', 'mode', 'name', 'value'] })
 export class IonRadio {
  ionSelect!: EventEmitter<CustomEvent>;
@@ -547,9 +552,9 @@ export class IonRadio {
    proxyOutputs(this, this.el, ['ionSelect', 'ionFocus', 'ionBlur']);
  }
 }
+proxyInputs(IonRadio, ['checked', 'color', 'disabled', 'mode', 'name', 'value']);

 export declare interface IonRadioGroup extends Components.IonRadioGroup {}
-@ProxyCmp({inputs: ['allowEmptySelection', 'name', 'value']})
@Component({ selector: 'ion-radio-group', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>', inputs: ['allowEmptySelection', 'name', 'value'] })
 export class IonRadioGroup {
  ionChange!: EventEmitter<CustomEvent>;
@@ -560,9 +565,9 @@ export class IonRadioGroup {
    proxyOutputs(this, this.el, ['ionChange']);
  }
 }
+proxyInputs(IonRadioGroup, ['allowEmptySelection', 'name', 'value']);

 export declare interface IonRange extends Components.IonRange {}
-@ProxyCmp({inputs: ['color', 'debounce', 'disabled', 'dualKnobs', 'max', 'min', 'mode', 'name', 'pin', 'snaps', 'step', 'ticks', 'value']})
@Component({ selector: 'ion-range', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>', inputs: ['color', 'debounce', 'disabled', 'dualKnobs', 'max', 'min', 'mode', 'name', 'pin', 'snaps', 'step', 'ticks', 'value'] })
 export class IonRange {
  ionChange!: EventEmitter<CustomEvent>;
@@ -575,9 +580,9 @@ export class IonRange {
    proxyOutputs(this, this.el, ['ionChange', 'ionFocus', 'ionBlur']);
  }
 }
+proxyInputs(IonRange, ['color', 'debounce', 'disabled', 'dualKnobs', 'max', 'min', 'mode', 'name', 'pin', 'snaps', 'step', 'ticks', 'value']);

 export declare interface IonRefresher extends Components.IonRefresher {}
-@ProxyCmp({inputs: ['closeDuration', 'disabled', 'pullFactor', 'pullMax', 'pullMin', 'snapbackDuration'], 'methods': ['complete', 'cancel', 'getProgress']})
@Component({ selector: 'ion-refresher', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>', inputs: ['closeDuration', 'disabled', 'pullFactor', 'pullMax', 'pullMin', 'snapbackDuration'] })
 export class IonRefresher {
  ionRefresh!: EventEmitter<CustomEvent>;
@@ -590,9 +595,10 @@ export class IonRefresher {
    proxyOutputs(this, this.el, ['ionRefresh', 'ionPull', 'ionStart']);
  }
 }
+proxyMethods(IonRefresher, ['complete', 'cancel', 'getProgress']);
+proxyInputs(IonRefresher, ['closeDuration', 'disabled', 'pullFactor', 'pullMax', 'pullMin', 'snapbackDuration']);

 export declare interface IonRefresherContent extends Components.IonRefresherContent {}
-@ProxyCmp({inputs: ['pullingIcon', 'pullingText', 'refreshingSpinner', 'refreshingText']})
@Component({ selector: 'ion-refresher-content', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>', inputs: ['pullingIcon', 'pullingText', 'refreshingSpinner', 'refreshingText'] })
 export class IonRefresherContent {
  protected el: HTMLElement;
@@ -601,9 +607,9 @@ export class IonRefresherContent {
    this.el = r.nativeElement;
  }
 }
+proxyInputs(IonRefresherContent, ['pullingIcon', 'pullingText', 'refreshingSpinner', 'refreshingText']);

 export declare interface IonReorder extends Components.IonReorder {}
-
@Component({ selector: 'ion-reorder', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>' })
 export class IonReorder {
  protected el: HTMLElement;
@@ -614,7 +620,6 @@ export class IonReorder {
 }

 export declare interface IonReorderGroup extends Components.IonReorderGroup {}
-@ProxyCmp({inputs: ['disabled'], 'methods': ['complete']})
@Component({ selector: 'ion-reorder-group', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>', inputs: ['disabled'] })
 export class IonReorderGroup {
  ionItemReorder!: EventEmitter<CustomEvent>;
@@ -625,9 +630,10 @@ export class IonReorderGroup {
    proxyOutputs(this, this.el, ['ionItemReorder']);
  }
 }
+proxyMethods(IonReorderGroup, ['complete']);
+proxyInputs(IonReorderGroup, ['disabled']);

 export declare interface IonRippleEffect extends Components.IonRippleEffect {}
-@ProxyCmp({inputs: ['type'], 'methods': ['addRipple']})
@Component({ selector: 'ion-ripple-effect', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>', inputs: ['type'] })
 export class IonRippleEffect {
  protected el: HTMLElement;
@@ -636,9 +642,10 @@ export class IonRippleEffect {
    this.el = r.nativeElement;
  }
 }
+proxyMethods(IonRippleEffect, ['addRipple']);
+proxyInputs(IonRippleEffect, ['type']);

 export declare interface IonRow extends Components.IonRow {}
-
@Component({ selector: 'ion-row', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>' })
 export class IonRow {
  protected el: HTMLElement;
@@ -649,7 +656,6 @@ export class IonRow {
 }

 export declare interface IonSearchbar extends Components.IonSearchbar {}
-@ProxyCmp({inputs: ['animated', 'autocomplete', 'autocorrect', 'cancelButtonIcon', 'cancelButtonText', 'clearIcon', 'color', 'debounce', 'disabled', 'inputmode', 'mode', 'placeholder', 'searchIcon', 'showCancelButton', 'spellcheck', 'type', 'value'], 'methods': ['setFocus', 'getInputElement']})
@Component({ selector: 'ion-searchbar', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>', inputs: ['animated', 'autocomplete', 'autocorrect', 'cancelButtonIcon', 'cancelButtonText', 'clearIcon', 'color', 'debounce', 'disabled', 'inputmode', 'mode', 'placeholder', 'searchIcon', 'showCancelButton', 'spellcheck', 'type', 'value'] })
 export class IonSearchbar {
  ionInput!: EventEmitter<CustomEvent>;
@@ -665,9 +671,10 @@ export class IonSearchbar {
    proxyOutputs(this, this.el, ['ionInput', 'ionChange', 'ionCancel', 'ionClear', 'ionBlur', 'ionFocus']);
  }
 }
+proxyMethods(IonSearchbar, ['setFocus', 'getInputElement']);
+proxyInputs(IonSearchbar, ['animated', 'autocomplete', 'autocorrect', 'cancelButtonIcon', 'cancelButtonText', 'clearIcon', 'color', 'debounce', 'disabled', 'inputmode', 'mode', 'placeholder', 'searchIcon', 'showCancelButton', 'spellcheck', 'type', 'value']);

 export declare interface IonSegment extends Components.IonSegment {}
-@ProxyCmp({inputs: ['color', 'disabled', 'mode', 'scrollable', 'value']})
@Component({ selector: 'ion-segment', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>', inputs: ['color', 'disabled', 'mode', 'scrollable', 'value'] })
 export class IonSegment {
  ionChange!: EventEmitter<CustomEvent>;
@@ -678,9 +685,9 @@ export class IonSegment {
    proxyOutputs(this, this.el, ['ionChange']);
  }
 }
+proxyInputs(IonSegment, ['color', 'disabled', 'mode', 'scrollable', 'value']);

 export declare interface IonSegmentButton extends Components.IonSegmentButton {}
-@ProxyCmp({inputs: ['checked', 'disabled', 'layout', 'mode', 'type', 'value']})
@Component({ selector: 'ion-segment-button', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>', inputs: ['checked', 'disabled', 'layout', 'mode', 'type', 'value'] })
 export class IonSegmentButton {
  ionSelect!: EventEmitter<CustomEvent>;
@@ -691,9 +698,9 @@ export class IonSegmentButton {
    proxyOutputs(this, this.el, ['ionSelect']);
  }
 }
+proxyInputs(IonSegmentButton, ['checked', 'disabled', 'layout', 'mode', 'type', 'value']);

 export declare interface IonSelect extends Components.IonSelect {}
-@ProxyCmp({inputs: ['cancelText', 'compareWith', 'disabled', 'interface', 'interfaceOptions', 'mode', 'multiple', 'name', 'okText', 'placeholder', 'selectedText', 'value'], 'methods': ['open']})
@Component({ selector: 'ion-select', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>', inputs: ['cancelText', 'compareWith', 'disabled', 'interface', 'interfaceOptions', 'mode', 'multiple', 'name', 'okText', 'placeholder', 'selectedText', 'value'] })
 export class IonSelect {
  ionChange!: EventEmitter<CustomEvent>;
@@ -707,9 +714,10 @@ export class IonSelect {
    proxyOutputs(this, this.el, ['ionChange', 'ionCancel', 'ionFocus', 'ionBlur']);
  }
 }
+proxyMethods(IonSelect, ['open']);
+proxyInputs(IonSelect, ['cancelText', 'compareWith', 'disabled', 'interface', 'interfaceOptions', 'mode', 'multiple', 'name', 'okText', 'placeholder', 'selectedText', 'value']);

 export declare interface IonSelectOption extends Components.IonSelectOption {}
-@ProxyCmp({inputs: ['disabled', 'selected', 'value']})
@Component({ selector: 'ion-select-option', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>', inputs: ['disabled', 'selected', 'value'] })
 export class IonSelectOption {
  protected el: HTMLElement;
@@ -718,9 +726,9 @@ export class IonSelectOption {
    this.el = r.nativeElement;
  }
 }
+proxyInputs(IonSelectOption, ['disabled', 'selected', 'value']);

 export declare interface IonSkeletonText extends Components.IonSkeletonText {}
-@ProxyCmp({inputs: ['animated']})
@Component({ selector: 'ion-skeleton-text', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>', inputs: ['animated'] })
 export class IonSkeletonText {
  protected el: HTMLElement;
@@ -729,9 +737,9 @@ export class IonSkeletonText {
    this.el = r.nativeElement;
  }
 }
+proxyInputs(IonSkeletonText, ['animated']);

 export declare interface IonSlide extends Components.IonSlide {}
-
@Component({ selector: 'ion-slide', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>' })
 export class IonSlide {
  protected el: HTMLElement;
@@ -742,7 +750,6 @@ export class IonSlide {
 }

 export declare interface IonSlides extends Components.IonSlides {}
-@ProxyCmp({inputs: ['mode', 'options', 'pager', 'scrollbar'], 'methods': ['update', 'updateAutoHeight', 'slideTo', 'slideNext', 'slidePrev', 'getActiveIndex', 'getPreviousIndex', 'length', 'isEnd', 'isBeginning', 'startAutoplay', 'stopAutoplay', 'lockSwipeToNext', 'lockSwipeToPrev', 'lockSwipes', 'getSwiper']})
@Component({ selector: 'ion-slides', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>', inputs: ['mode', 'options', 'pager', 'scrollbar'] })
 export class IonSlides {
  ionSlidesDidLoad!: EventEmitter<CustomEvent>;
@@ -768,9 +775,10 @@ export class IonSlides {
    proxyOutputs(this, this.el, ['ionSlidesDidLoad', 'ionSlideTap', 'ionSlideDoubleTap', 'ionSlideWillChange', 'ionSlideDidChange', 'ionSlideNextStart', 'ionSlidePrevStart', 'ionSlideNextEnd', 'ionSlidePrevEnd', 'ionSlideTransitionStart', 'ionSlideTransitionEnd', 'ionSlideDrag', 'ionSlideReachStart', 'ionSlideReachEnd', 'ionSlideTouchStart', 'ionSlideTouchEnd']);
  }
 }
+proxyMethods(IonSlides, ['update', 'updateAutoHeight', 'slideTo', 'slideNext', 'slidePrev', 'getActiveIndex', 'getPreviousIndex', 'length', 'isEnd', 'isBeginning', 'startAutoplay', 'stopAutoplay', 'lockSwipeToNext', 'lockSwipeToPrev', 'lockSwipes', 'getSwiper']);
+proxyInputs(IonSlides, ['mode', 'options', 'pager', 'scrollbar']);

 export declare interface IonSpinner extends Components.IonSpinner {}
-@ProxyCmp({inputs: ['color', 'duration', 'name', 'paused']})
@Component({ selector: 'ion-spinner', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>', inputs: ['color', 'duration', 'name', 'paused'] })
 export class IonSpinner {
  protected el: HTMLElement;
@@ -779,9 +787,9 @@ export class IonSpinner {
    this.el = r.nativeElement;
  }
 }
+proxyInputs(IonSpinner, ['color', 'duration', 'name', 'paused']);

 export declare interface IonSplitPane extends Components.IonSplitPane {}
-@ProxyCmp({inputs: ['contentId', 'disabled', 'when']})
@Component({ selector: 'ion-split-pane', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>', inputs: ['contentId', 'disabled', 'when'] })
 export class IonSplitPane {
  ionSplitPaneVisible!: EventEmitter<CustomEvent>;
@@ -792,9 +800,9 @@ export class IonSplitPane {
    proxyOutputs(this, this.el, ['ionSplitPaneVisible']);
  }
 }
+proxyInputs(IonSplitPane, ['contentId', 'disabled', 'when']);

 export declare interface IonTabBar extends Components.IonTabBar {}
-@ProxyCmp({inputs: ['color', 'mode', 'selectedTab', 'translucent']})
@Component({ selector: 'ion-tab-bar', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>', inputs: ['color', 'mode', 'selectedTab', 'translucent'] })
 export class IonTabBar {
  protected el: HTMLElement;
@@ -803,9 +811,9 @@ export class IonTabBar {
    this.el = r.nativeElement;
  }
 }
+proxyInputs(IonTabBar, ['color', 'mode', 'selectedTab', 'translucent']);

 export declare interface IonTabButton extends Components.IonTabButton {}
-@ProxyCmp({inputs: ['disabled', 'download', 'href', 'layout', 'mode', 'rel', 'selected', 'tab', 'target']})
@Component({ selector: 'ion-tab-button', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>', inputs: ['disabled', 'download', 'href', 'layout', 'mode', 'rel', 'selected', 'tab', 'target'] })
 export class IonTabButton {
  protected el: HTMLElement;
@@ -814,9 +822,9 @@ export class IonTabButton {
    this.el = r.nativeElement;
  }
 }
+proxyInputs(IonTabButton, ['disabled', 'download', 'href', 'layout', 'mode', 'rel', 'selected', 'tab', 'target']);

 export declare interface IonText extends Components.IonText {}
-@ProxyCmp({inputs: ['color', 'mode']})
@Component({ selector: 'ion-text', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>', inputs: ['color', 'mode'] })
 export class IonText {
  protected el: HTMLElement;
@@ -825,9 +833,9 @@ export class IonText {
    this.el = r.nativeElement;
  }
 }
+proxyInputs(IonText, ['color', 'mode']);

 export declare interface IonTextarea extends Components.IonTextarea {}
-@ProxyCmp({inputs: ['autoGrow', 'autocapitalize', 'autofocus', 'clearOnEdit', 'color', 'cols', 'debounce', 'disabled', 'maxlength', 'minlength', 'mode', 'name', 'placeholder', 'readonly', 'required', 'rows', 'spellcheck', 'value', 'wrap'], 'methods': ['setFocus', 'getInputElement']})
@Component({ selector: 'ion-textarea', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>', inputs: ['autoGrow', 'autocapitalize', 'autofocus', 'clearOnEdit', 'color', 'cols', 'debounce', 'disabled', 'maxlength', 'minlength', 'mode', 'name', 'placeholder', 'readonly', 'required', 'rows', 'spellcheck', 'value', 'wrap'] })
 export class IonTextarea {
  ionChange!: EventEmitter<CustomEvent>;
@@ -841,9 +849,10 @@ export class IonTextarea {
    proxyOutputs(this, this.el, ['ionChange', 'ionInput', 'ionBlur', 'ionFocus']);
  }
 }
+proxyMethods(IonTextarea, ['setFocus', 'getInputElement']);
+proxyInputs(IonTextarea, ['autoGrow', 'autocapitalize', 'autofocus', 'clearOnEdit', 'color', 'cols', 'debounce', 'disabled', 'maxlength', 'minlength', 'mode', 'name', 'placeholder', 'readonly', 'required', 'rows', 'spellcheck', 'value', 'wrap']);

 export declare interface IonThumbnail extends Components.IonThumbnail {}
-
@Component({ selector: 'ion-thumbnail', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>' })
 export class IonThumbnail {
  protected el: HTMLElement;
@@ -854,7 +863,6 @@ export class IonThumbnail {
 }

 export declare interface IonTitle extends Components.IonTitle {}
-@ProxyCmp({inputs: ['color', 'size']})
@Component({ selector: 'ion-title', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>', inputs: ['color', 'size'] })
 export class IonTitle {
  protected el: HTMLElement;
@@ -863,9 +871,9 @@ export class IonTitle {
    this.el = r.nativeElement;
  }
 }
+proxyInputs(IonTitle, ['color', 'size']);

 export declare interface IonToggle extends Components.IonToggle {}
-@ProxyCmp({inputs: ['checked', 'color', 'disabled', 'mode', 'name', 'value']})
@Component({ selector: 'ion-toggle', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>', inputs: ['checked', 'color', 'disabled', 'mode', 'name', 'value'] })
 export class IonToggle {
  ionChange!: EventEmitter<CustomEvent>;
@@ -878,9 +886,9 @@ export class IonToggle {
    proxyOutputs(this, this.el, ['ionChange', 'ionFocus', 'ionBlur']);
  }
 }
+proxyInputs(IonToggle, ['checked', 'color', 'disabled', 'mode', 'name', 'value']);

 export declare interface IonToolbar extends Components.IonToolbar {}
-@ProxyCmp({inputs: ['color', 'mode']})
@Component({ selector: 'ion-toolbar', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>', inputs: ['color', 'mode'] })
 export class IonToolbar {
  protected el: HTMLElement;
@@ -889,3 +897,4 @@ export class IonToolbar {
    this.el = r.nativeElement;
  }
 }
+proxyInputs(IonToolbar, ['color', 'mode']);
--- a/angular/src/directives/virtual-scroll/virtual-scroll.ts
+++ b/angular/src/directives/virtual-scroll/virtual-scroll.ts
@@ -1,7 +1,7 @@
 import { ChangeDetectionStrategy, Component, ContentChild, ElementRef, EmbeddedViewRef, IterableDiffer, IterableDiffers, NgZone, SimpleChanges, TrackByFunction } from '@angular/core';
 import { Cell, CellType, FooterHeightFn, HeaderFn, HeaderHeightFn, ItemHeightFn } from '@ionic/core';

-import { ProxyCmp } from '../proxies-utils';
+import { proxyInputs, proxyMethods } from '../proxies-utils';

 import { VirtualFooter } from './virtual-footer';
 import { VirtualHeader } from './virtual-header';
@@ -112,10 +112,6 @@ export declare interface IonVirtualScroll {
  'positionForItem': (index: number) => Promise<number>;
 }

-@ProxyCmp({
-  inputs: ['approxItemHeight', 'approxHeaderHeight', 'approxFooterHeight', 'headerFn', 'footerFn', 'items', 'itemHeight', 'headerHeight', 'footerHeight'],
-  methods: ['checkEnd', 'checkRange', 'positionForItem']
-})
@Component({
  selector: 'ion-virtual-scroll',
  template: '<ng-content></ng-content>',
@@ -137,11 +133,11 @@ export class IonVirtualScroll {

  private differ?: IterableDiffer<any>;
  private el: HTMLIonVirtualScrollElement;
-  private refMap = new WeakMap<HTMLElement, EmbeddedViewRef<VirtualContext>>();
+  private refMap = new WeakMap<HTMLElement, EmbeddedViewRef<VirtualContext>> ();

-  @ContentChild(VirtualItem, { static: false }) itmTmp!: VirtualItem;
-  @ContentChild(VirtualHeader, { static: false }) hdrTmp!: VirtualHeader;
-  @ContentChild(VirtualFooter, { static: false }) ftrTmp!: VirtualFooter;
+  @ContentChild(VirtualItem) itmTmp!: VirtualItem;
+  @ContentChild(VirtualHeader) hdrTmp!: VirtualHeader;
+  @ContentChild(VirtualFooter) ftrTmp!: VirtualFooter;

  constructor(
    private z: NgZone,
@@ -219,3 +215,21 @@ const getElement = (view: EmbeddedViewRef<VirtualContext>): HTMLElement => {
  }
  throw new Error('virtual element was not created');
 };
+
+proxyInputs(IonVirtualScroll, [
+  'approxItemHeight',
+  'approxHeaderHeight',
+  'approxFooterHeight',
+  'headerFn',
+  'footerFn',
+  'items',
+  'itemHeight',
+  'headerHeight',
+  'footerHeight'
+]);
+
+proxyMethods(IonVirtualScroll, [
+  'checkEnd',
+  'checkRange',
+  'positionForItem'
+]);
--- a/angular/src/ionic-module.ts
+++ b/angular/src/ionic-module.ts
@@ -126,7 +126,7 @@ const DECLARATIONS = [
  imports: [CommonModule]
 })
 export class IonicModule {
-  static forRoot(config?: IonicConfig): ModuleWithProviders<IonicModule> {
+  static forRoot(config?: IonicConfig): ModuleWithProviders {
    return {
      ngModule: IonicModule,
      providers: [
--- a/angular/src/providers/config.ts
+++ b/angular/src/providers/config.ts
@@ -33,7 +33,7 @@ export class Config {
  }

  set(key: keyof IonicConfig, value?: any) {
-    console.warn(`[DEPRECATION][Config]: The Config.set() method is deprecated and will be removed in Ionic Framework 6.0. Please see https://ionicframework.com/docs/angular/config for alternatives.`);
+    console.warn(`[DEPRECATION][Config]: The Config.set() method is deprecated and will be removed in the next major release.`);
    const c = getConfig();
    if (c) {
      c.set(key, value);
--- a/angular/src/providers/gesture-controller.ts
+++ b/angular/src/providers/gesture-controller.ts
@@ -1,5 +1,5 @@
 import { Injectable } from '@angular/core';
-import { Gesture, GestureConfig, createGesture } from '@ionic/core';
+import { Gesture, GestureConfig, PressRecognizerOptions, createGesture, createPressRecognizer } from '@ionic/core';

@Injectable({
  providedIn: 'root',
@@ -11,4 +11,11 @@ export class GestureController {
  create(opts: GestureConfig): Gesture {
    return createGesture(opts);
  }
+
+  /**
+   * Create a new Press recognizer gesture
+   */
+  pressRecognizer(opts: PressRecognizerOptions): Gesture {
+    return createPressRecognizer(opts);
+  }
 }
--- a/angular/test/test-app/angular.json
+++ b/angular/test/test-app/angular.json
@@ -13,13 +13,11 @@
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
-            "aot": true,
-            "outputPath": "dist/test-app/browser",
+            "outputPath": "dist/browser",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
-            "buildOptimizer": true,
            "assets": [
              "src/favicon.ico",
              {
@@ -59,10 +57,6 @@
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
-                },
-                {
-                  "type": "anyComponentStyle",
-                  "maximumWarning": "6kb"
                }
              ]
            }
@@ -122,44 +116,20 @@
        "server": {
          "builder": "@angular-devkit/build-angular:server",
          "options": {
-            "outputPath": "dist/test-app/server",
-            "main": "server.ts",
+            "outputPath": "dist/server",
+            "main": "src/main.server.ts",
            "tsConfig": "tsconfig.server.json"
          },
          "configurations": {
            "production": {
-              "outputHashing": "media",
              "fileReplacements": [
                {
-                  "replace": "src/environments/environment.ts",
-                  "with": "src/environments/environment.prod.ts"
+                  "src": "src/environments/environment.ts",
+                  "replaceWith": "src/environments/environment.prod.ts"
                }
-              ],
-              "sourceMap": false,
-              "optimization": true
+              ]
            }
          }
-        },
-        "serve-ssr": {
-          "builder": "@nguniversal/builders:ssr-dev-server",
-          "options": {
-            "browserTarget": "test-app:build",
-            "serverTarget": "test-app:server"
-          },
-          "configurations": {
-            "production": {
-              "browserTarget": "test-app:build:production",
-              "serverTarget": "test-app:server:production"
-            }
-          }
-        },
-        "prerender": {
-          "builder": "@nguniversal/builders:prerender",
-          "options": {
-            "browserTarget": "test-app:build:production",
-            "serverTarget": "test-app:server:production",
-            "routes": []
-          }
        }
      }
    }
--- a/angular/test/test-app/e2e/protractor.conf.js
+++ b/angular/test/test-app/e2e/protractor.conf.js
@@ -1,4 +1,4 @@
-// @ts-check
+  // @ts-check
 // Protractor configuration file, see link for more information
 // https://github.com/angular/protractor/blob/master/lib/config.ts

@@ -23,7 +23,7 @@ exports.config = {
  framework: 'jasmine',
  jasmineNodeOpts: {
    showColors: true,
-    defaultTimeoutInterval: 100000,
+    defaultTimeoutInterval: 70000,
    print: function() {}
  },
  onPrepare() {
--- a/angular/test/test-app/e2e/src/tabs.e2e-spec.ts
+++ b/angular/test/test-app/e2e/src/tabs.e2e-spec.ts
@@ -1,5 +1,5 @@
-import { browser, by, element, ElementFinder, ExpectedConditions } from 'protractor';
-import { handleErrorMessages, testStack, waitTime } from './utils';
+import { browser, element, by, ElementFinder } from 'protractor';
+import { waitTime, testStack, handleErrorMessages } from './utils';

 describe('tabs', () => {
  afterEach(() => {
@@ -131,94 +131,6 @@ describe('tabs', () => {
      await testTabTitle('Tab 3 - Page 1');
      await testStack('ion-tabs ion-router-outlet', ['app-tabs-tab1', 'app-tabs-tab3']);
    });
-
-    it('should preserve navigation extras when switching tabs', async () => {
-      const expectUrlToContain = 'search=hello#fragment';
-      let tab = await getSelectedTab() as ElementFinder;
-      await tab.$('#goto-nested-page1-with-query-params').click();
-      await testTabTitle('Tab 1 - Page 2 (1)');
-      await testUrlContains(expectUrlToContain);
-
-      await element(by.css('#tab-button-contact')).click();
-      await testTabTitle('Tab 2 - Page 1');
-
-      await element(by.css('#tab-button-account')).click();
-      tab = await testTabTitle('Tab 1 - Page 2 (1)');
-      await testUrlContains(expectUrlToContain);
-    });
-
-    it('should set root when clicking on an active tab to navigate to the root', async () => {
-      const expectNestedTabUrlToContain = 'search=hello#fragment';
-      let tab = await getSelectedTab() as ElementFinder;
-      const initialUrl = await browser.getCurrentUrl();
-      await tab.$('#goto-nested-page1-with-query-params').click();
-      await testTabTitle('Tab 1 - Page 2 (1)');
-      await testUrlContains(expectNestedTabUrlToContain);
-
-      await element(by.css('#tab-button-account')).click();
-      await testTabTitle('Tab 1 - Page 1');
-
-      await testUrlEquals(initialUrl);
-    });
-
-  });
-
-  describe('entry tab contains navigation extras', () => {
-    const expectNestedTabUrlToContain = 'search=hello#fragment';
-    const rootUrlParams = 'test=123#rootFragment';
-    const rootUrl = `/tabs/account?${rootUrlParams}`;
-
-    beforeEach(async () => {
-      await browser.get(rootUrl);
-      await waitTime(30);
-    });
-
-    it('should preserve root url navigation extras when clicking on an active tab to navigate to the root', async () => {
-      await browser.get(rootUrl);
-
-      let tab = await getSelectedTab() as ElementFinder;
-      await tab.$('#goto-nested-page1-with-query-params').click();
-      await testTabTitle('Tab 1 - Page 2 (1)');
-      await testUrlContains(expectNestedTabUrlToContain);
-
-      await element(by.css('#tab-button-account')).click();
-      await testTabTitle('Tab 1 - Page 1');
-
-      await testUrlContains(rootUrl);
-    });
-
-    it('should preserve root url navigation extras when changing tabs', async () => {
-      await browser.get(rootUrl);
-
-      let tab = await getSelectedTab() as ElementFinder;
-      await element(by.css('#tab-button-contact')).click();
-      tab = await testTabTitle('Tab 2 - Page 1');
-
-      await element(by.css('#tab-button-account')).click();
-      await testTabTitle('Tab 1 - Page 1');
-
-      await testUrlContains(rootUrl);
-    });
-
-    it('should navigate deep then go home and preserve navigation extras', async () => {
-      let tab = await getSelectedTab();
-      await tab.$('#goto-tab1-page2').click();
-      tab = await testTabTitle('Tab 1 - Page 2 (1)');
-
-      await tab.$('#goto-next').click();
-      tab = await testTabTitle('Tab 1 - Page 2 (2)');
-
-      await element(by.css('#tab-button-contact')).click();
-      tab = await testTabTitle('Tab 2 - Page 1');
-
-      await element(by.css('#tab-button-account')).click();
-      await testTabTitle('Tab 1 - Page 2 (2)');
-
-      await element(by.css('#tab-button-account')).click();
-      await testTabTitle('Tab 1 - Page 1');
-
-      await testUrlContains(rootUrl);
-    });
  });

  describe('entry url - /tabs/account/nested/1', () => {
@@ -247,7 +159,7 @@ describe('tabs', () => {
      await tab.$('#goto-next').click();
      tab = await testTabTitle('Tab 1 - Page 2 (3)');

-      await testStack('ion-tabs ion-router-outlet', [
+      await testStack('ion-tabs ion-router-outlet',[
        'app-tabs-tab1-nested',
        'app-tabs-tab1-nested',
        'app-tabs-tab1-nested'
@@ -314,18 +226,6 @@ async function testTabTitle(title: string) {
  return tab;
 }

-async function testUrlContains(urlFragment: string) {
-  await browser.wait(ExpectedConditions.urlContains(urlFragment),
-    5000,
-    `expected ${browser.getCurrentUrl()} to contain ${urlFragment}`);
-}
-
-async function testUrlEquals(url: string) {
-  await browser.wait(ExpectedConditions.urlIs(url),
-    5000,
-    `expected ${browser.getCurrentUrl()} to equal ${url}`);
-}
-
 async function getSelectedTab(): Promise<ElementFinder> {
  const tabs = element.all(by.css('ion-tabs ion-router-outlet > *:not(.ion-page-hidden)'));
  expect(await tabs.count()).toEqual(1);
--- a/angular/test/test-app/karma.conf.js
+++ b/angular/test/test-app/karma.conf.js
@@ -8,8 +8,6 @@ module.exports = function (config) {
    plugins: [
      require('karma-jasmine'),
      require('karma-chrome-launcher'),
-      require('karma-jasmine-html-reporter'),
-      require('karma-coverage-istanbul-reporter'),
      require('@angular-devkit/build-angular/plugins/karma')
    ],
    client: {
@@ -26,7 +24,6 @@ module.exports = function (config) {
    logLevel: config.LOG_INFO,
    autoWatch: true,
    browsers: ['Chrome'],
-    singleRun: false,
-    restartOnFileChange: true
+    singleRun: false
  });
-};
+};
--- a/angular/test/test-app/package.json
+++ b/angular/test/test-app/package.json
@@ -11,53 +11,50 @@
    "test": "ng e2e --prod",
    "test.dev": "npm run sync && ng e2e",
    "lint": "ng lint",
-    "postinstall": "npm run sync && ngcc",
-    "serve:ssr": "node dist/test-app/server/main.js",
-    "build:ssr": "ng build --prod && ng run test-app:server:production",
-    "dev:ssr": "ng run test-app:serve-ssr",
-    "prerender": "ng run test-app:prerender"
+    "postinstall": "npm run sync",
+    "compile:server": "webpack --config webpack.server.config.js --progress --colors",
+    "serve:ssr": "node dist/server",
+    "build:ssr": "npm run build:client-and-server-bundles && npm run compile:server",
+    "build:client-and-server-bundles": "npm run build && ng run test-app:server:production --bundleDependencies all"
  },
  "dependencies": {
-    "@angular/animations": "^9.0.0-rc.2",
-    "@angular/common": "^9.0.0-rc.2",
-    "@angular/compiler": "^9.0.0-rc.2",
-    "@angular/core": "^9.0.0-rc.2",
-    "@angular/forms": "^9.0.0-rc.2",
-    "@angular/platform-browser": "^9.0.0-rc.2",
-    "@angular/platform-browser-dynamic": "^9.0.0-rc.2",
-    "@angular/platform-server": "^9.0.0-rc.2",
-    "@angular/router": "^9.0.0-rc.2",
+    "@angular/animations": "^8.2.8",
+    "@angular/common": "^8.2.8",
+    "@angular/compiler": "^8.2.8",
+    "@angular/core": "^8.2.8",
+    "@angular/forms": "^8.2.8",
+    "@angular/platform-browser": "^8.2.8",
+    "@angular/platform-browser-dynamic": "^8.2.8",
+    "@angular/platform-server": "^8.2.8",
+    "@angular/router": "^8.2.8",
    "@ionic/angular": "^4.7.0",
    "@ionic/angular-server": "^0.0.2",
-    "@nguniversal/express-engine": "9.0.0-next.9",
+    "@nguniversal/express-engine": "~8.1.1",
+    "@nguniversal/module-map-ngfactory-loader": "~8.1.1",
    "core-js": "^2.6.2",
    "express": "^4.15.2",
    "rxjs": "^6.5.3",
-    "tslib": "^1.10.0",
-    "zone.js": "~0.10.2"
+    "tslib": "^1.9.0",
+    "zone.js": "~0.9.1"
  },
  "devDependencies": {
-    "@angular-devkit/build-angular": "~0.900.0-rc.2",
-    "@angular/cli": "^9.0.0-rc.2",
-    "@angular/compiler-cli": "^9.0.0-rc.2",
-    "@angular/language-service": "^9.0.0-rc.2",
-    "@nguniversal/builders": "^9.0.0-next.9",
-    "@types/express": "^4.17.0",
+    "@angular-devkit/build-angular": "^0.803.6",
+    "@angular/cli": "^8.3.6",
+    "@angular/compiler-cli": "^8.2.8",
+    "@angular/language-service": "^8.2.8",
    "@types/jasmine": "3.4.1",
-    "@types/node": "^12.11.1",
+    "@types/node": "12.7.8",
    "codelyzer": "^5.1.2",
-    "jasmine-core": "~3.5.0",
-    "jasmine-spec-reporter": "~4.2.1",
-    "karma": "~4.3.0",
-    "karma-chrome-launcher": "~3.1.0",
-    "karma-coverage-istanbul-reporter": "~2.1.0",
-    "karma-jasmine": "~2.0.1",
-    "karma-jasmine-html-reporter": "^1.4.2",
-    "protractor": "~5.4.2",
+    "jasmine-core": "3.5.0",
+    "jasmine-spec-reporter": "4.2.1",
+    "karma": "4.3.0",
+    "karma-chrome-launcher": "3.1.0",
+    "karma-jasmine": "2.0.1",
+    "protractor": "5.4.2",
    "ts-loader": "^6.1.2",
    "ts-node": "8.4.1",
    "tslint": "~5.18.0",
-    "typescript": "~3.6.4",
+    "typescript": "~3.5.3",
    "webpack-cli": "^3.3.9"
  }
 }
--- a/angular/test/test-app/scripts/sync.sh
+++ b/angular/test/test-app/scripts/sync.sh
@@ -1,10 +1,15 @@
 # Copy angular dist
 rm -rf node_modules/@ionic/angular
-cp -a ../../dist node_modules/@ionic/angular
+mkdir node_modules/@ionic/angular
+cp -a ../../dist node_modules/@ionic/angular/dist
+cp -a ../../css node_modules/@ionic/angular/css
+cp -a ../../package.json node_modules/@ionic/angular/package.json

 # Copy angular server
 rm -rf node_modules/@ionic/angular-server
-cp -a ../../../packages/angular-server/dist node_modules/@ionic/angular-server
+mkdir node_modules/@ionic/angular-server
+cp -a ../../../packages/angular-server/dist node_modules/@ionic/angular-server/dist
+cp -a ../../../packages/angular-server/package.json node_modules/@ionic/angular-server/package.json

 # # Copy core dist
 rm -rf node_modules/@ionic/core
--- a/angular/test/test-app/server.ts
+++ b/angular/test/test-app/server.ts
@@ -1,57 +1,58 @@
+/**
+ * *** NOTE ON IMPORTING FROM ANGULAR AND NGUNIVERSAL IN THIS FILE ***
+ *
+ * If your application uses third-party dependencies, you'll need to
+ * either use Webpack or the Angular CLI's `bundleDependencies` feature
+ * in order to adequately package them for use on the server without a
+ * node_modules directory.
+ *
+ * However, due to the nature of the CLI's `bundleDependencies`, importing
+ * Angular in this file will create a different instance of Angular than
+ * the version in the compiled application code. This leads to unavoidable
+ * conflicts. Therefore, please do not explicitly import from @angular or
+ * @nguniversal in this file. You can export any needed resources
+ * from your application's main.server.ts file, as seen below with the
+ * import for `ngExpressEngine`.
+ */
+
 import 'zone.js/dist/zone-node';

-import { ngExpressEngine } from '@nguniversal/express-engine';
 import * as express from 'express';
-import { join } from 'path';
+import {join} from 'path';

-import { AppServerModule } from './src/main.server';
-import { APP_BASE_HREF } from '@angular/common';
+// Express server
+const app = express();

-// The Express app is exported so that it can be used by serverless Functions.
-export function app() {
-  const server = express();
-  const distFolder = join(process.cwd(), 'dist/test-app/browser');
+const PORT = process.env.PORT || 4000;
+const DIST_FOLDER = join(process.cwd(), 'dist/browser');

-  // Our Universal express-engine (found @ https://github.com/angular/universal/tree/master/modules/express-engine)
-  server.engine('html', ngExpressEngine({
-    bootstrap: AppServerModule,
-  }));
+// * NOTE :: leave this as require() since this file is built Dynamically from webpack
+const {AppServerModuleNgFactory, LAZY_MODULE_MAP, ngExpressEngine, provideModuleMap} = require('./dist/server/main');

-  server.set('view engine', 'html');
-  server.set('views', distFolder);
+// Our Universal express-engine (found @ https://github.com/angular/universal/tree/master/modules/express-engine)
+app.engine('html', ngExpressEngine({
+  bootstrap: AppServerModuleNgFactory,
+  providers: [
+    provideModuleMap(LAZY_MODULE_MAP)
+  ]
+}));

-  // Example Express Rest API endpoints
-  // app.get('/api/**', (req, res) => { });
-  // Serve static files from /browser
-  server.get('*.*', express.static(distFolder, {
-    maxAge: '1y'
-  }));
+app.set('view engine', 'html');
+app.set('views', DIST_FOLDER);

-  // All regular routes use the Universal engine
-  server.get('*', (req, res) => {
-    res.render('index', { req, providers: [{ provide: APP_BASE_HREF, useValue: req.baseUrl }] });
-  });
+// Example Express Rest API endpoints
+// app.get('/api/**', (req, res) => { });
+// Serve static files from /browser
+app.get('*.*', express.static(DIST_FOLDER, {
+  maxAge: '1y'
+}));

-  return server;
-}
+// All regular routes use the Universal engine
+app.get('*', (req, res) => {
+  res.render('index', { req });
+});

-function run() {
-  const port = process.env.PORT || 4000;
-
-  // Start up the Node server
-  const server = app();
-  server.listen(port, () => {
-    console.log(`Node Express server listening on http://localhost:${port}`);
-  });
-}
-
-// Webpack will replace 'require' with '__webpack_require__'
-// '__non_webpack_require__' is a proxy to Node 'require'
-// The below code is to ensure that the server is run only when not requiring the bundle.
-declare const __non_webpack_require__: NodeRequire;
-const mainModule = __non_webpack_require__.main;
-if (mainModule && mainModule.filename === __filename) {
-  run();
-}
-
-export * from './src/main.server';
+// Start up the Node server
+app.listen(PORT, () => {
+  console.log(`Node Express server listening on http://localhost:${PORT}`);
+});
--- a/angular/test/test-app/src/app/app.server.module.ts
+++ b/angular/test/test-app/src/app/app.server.module.ts
@@ -1,13 +1,17 @@
 import { NgModule } from '@angular/core';
 import { ServerModule } from '@angular/platform-server';
+
 import { IonicServerModule } from '@ionic/angular-server';
+
 import { AppModule } from './app.module';
 import { AppComponent } from './app.component';
+import { ModuleMapLoaderModule } from '@nguniversal/module-map-ngfactory-loader';

@NgModule({
  imports: [
    AppModule,
    ServerModule,
+    ModuleMapLoaderModule,
    IonicServerModule
  ],
  bootstrap: [AppComponent],
--- a/angular/test/test-app/src/app/tabs-tab1/tabs-tab1.component.html
+++ b/angular/test/test-app/src/app/tabs-tab1/tabs-tab1.component.html
@@ -15,8 +15,6 @@
  </p>
  <p>
    <ion-button routerLink="/tabs/account/nested/1" id="goto-tab1-page2">Go to Page 2</ion-button>
-    <ion-button routerLink="/tabs/account/nested/1" [queryParams]="{search:'hello'}" fragment="fragment"
-      id="goto-nested-page1-with-query-params">Go to Page 2 with Query Params</ion-button>
    <ion-button routerLink="/tabs/lazy/nested" id="goto-tab3-page2">Go to Tab 3 - Page 2</ion-button>
    <ion-button routerLink="/nested-outlet/page" id="goto-nested-page1">Go to nested</ion-button>
  </p>
--- a/angular/test/test-app/src/main.server.ts
+++ b/angular/test/test-app/src/main.server.ts
@@ -7,4 +7,5 @@ if (environment.production) {
 }

 export { AppServerModule } from './app/app.server.module';
-export { renderModule, renderModuleFactory } from '@angular/platform-server';
+export { ngExpressEngine } from '@nguniversal/express-engine';
+export { provideModuleMap } from '@nguniversal/module-map-ngfactory-loader';
--- a/angular/test/test-app/src/main.ts
+++ b/angular/test/test-app/src/main.ts
@@ -10,6 +10,6 @@ if (environment.production) {

 document.addEventListener('DOMContentLoaded', () => {
  platformBrowserDynamic()
-  .bootstrapModule(AppModule)
-  .catch(err => console.error(err));
+    .bootstrapModule(AppModule)
+    .catch(err => console.error(err));
 });
--- a/angular/test/test-app/src/polyfills.ts
+++ b/angular/test/test-app/src/polyfills.ts
@@ -43,7 +43,7 @@
 *
 * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
 * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
- * (window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
+ * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
 *
 *  in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
 *  with the following flag, it will bypass `zone.js` patch for IE/Edge
@@ -52,12 +52,9 @@
 *
 */

-import './zone-flags.ts';
-
 /***************************************************************************************************
 * Zone JS is required by default for Angular itself.
 */
-
 import 'zone.js/dist/zone';  // Included with Angular CLI.


--- a/angular/test/test-app/src/zone-flags.ts
+++ b/angular/test/test-app/src/zone-flags.ts
@@ -1,5 +0,0 @@
-/**
- * Prevents Angular change detection from
- * running with certain Web Component callbacks
- */
-(window as any).__Zone_disable_customElements = true;
--- a/angular/test/test-app/tsconfig.app.json
+++ b/angular/test/test-app/tsconfig.app.json
@@ -3,10 +3,6 @@
  "compilerOptions": {
    "outDir": "./out-tsc/app"
  },
-  "files": [
-    "src/main.ts",
-    "src/polyfills.ts",
-    "src/zone-flags.ts"
-  ],
-  "include": ["src/**/*.d.ts"]
+  "include": ["src/**/*.ts"],
+  "exclude": ["src/test.ts", "src/**/*.spec.ts"]
 }
--- a/angular/test/test-app/tsconfig.server.json
+++ b/angular/test/test-app/tsconfig.server.json
@@ -1,16 +1,8 @@
 {
  "extends": "./tsconfig.app.json",
  "compilerOptions": {
-    "outDir": "./out-tsc/app-server",
-    "module": "commonjs",
-    "types": [
-      "node"
-    ]
+    "outDir": "../out-tsc/app-server"
  },
-  "files": [
-    "src/main.server.ts",
-    "server.ts"
-  ],
  "angularCompilerOptions": {
    "entryModule": "./src/app/app.server.module#AppServerModule"
  }
--- a/angular/test/test-app/webpack.server.config.js
+++ b/angular/test/test-app/webpack.server.config.js
@@ -0,0 +1,53 @@
+// Work around for https://github.com/angular/angular-cli/issues/7200
+
+const path = require('path');
+const webpack = require('webpack');
+
+module.exports = {
+  mode: 'none',
+  entry: {
+    // This is our Express server for Dynamic universal
+    server: './server.ts'
+  },
+  externals: {
+    './dist/server/main': 'require("./server/main")'
+  },
+  target: 'node',
+  resolve: {
+    mainFields: ['module', 'main'],
+    extensions: ['.ts', '.js']
+  },
+  optimization: {
+    minimize: false
+  },
+  output: {
+    // Puts the output at the root of the dist folder
+    path: path.join(__dirname, 'dist'),
+    filename: '[name].js'
+  },
+  module: {
+    rules: [
+      { test: /\.ts$/, loader: 'ts-loader' },
+      {
+        // Mark files inside `@angular/core` as using SystemJS style dynamic imports.
+        // Removing this will cause deprecation warnings to appear.
+        test: /(\\|\/)@angular(\\|\/)core(\\|\/).+\.js$/,
+        parser: { system: true },
+      },
+    ]
+  },
+  plugins: [
+    new webpack.ContextReplacementPlugin(
+      // fixes WARNING Critical dependency: the request of a dependency is an expression
+      /(.+)?angular(\\|\/)core(.+)?/,
+      path.join(__dirname, 'src'), // location of your src
+      {} // a map of your routes
+    ),
+    new webpack.ContextReplacementPlugin(
+      // fixes WARNING Critical dependency: the request of a dependency is an expression
+      /(.+)?express(\\|\/)(.+)?/,
+      path.join(__dirname, 'src'),
+      {}
+    )
+  ]
+};
--- a/angular/tsconfig.json
+++ b/angular/tsconfig.json
@@ -1,13 +1,11 @@
 {
  "angularCompilerOptions": {
    "annotateForClosureCompiler": true,
-    "strictMetadataEmit": true,
+    "strictMetadataEmit" : true,
    "flatModuleOutFile": "core.js",
    "flatModuleId": "@ionic/angular",
    "skipTemplateCodegen": true,
-    "fullTemplateTypeCheck": false,
-    "enableResourceInlining": true,
-    "enableIvy": false
+    "fullTemplateTypeCheck": false
  },
  "compilerOptions": {
    "alwaysStrict": true,
@@ -34,8 +32,12 @@
    "target": "es2015",
    "baseUrl": ".",
    "paths": {
-      "@ionic/core/hydrate": ["../core/hydrate"],
-      "@ionic/core": ["../core"]
+      "@ionic/core/hydrate": [
+        "../core/hydrate"
+      ],
+      "@ionic/core": [
+        "../core"
+      ]
    }
  },
  "exclude": ["node_modules", "src/schematics"],
--- a/core/CONTRIBUTING.md
+++ b/core/CONTRIBUTING.md
@@ -51,7 +51,7 @@ npm start

 You should be able to navigate to `http://localhost:3333` which will look like a file browser.

-E2E tests are located inside the `src/components` folder, in the following way: `http://localhost:3333/src/components/{COMPONENT}/test/`
+E2E tests are located inside the `src/component` folder, in the following way: `http://localhost:3333/src/components/{COMPONENT}/test/`


 **Path examples:**
--- a/core/api.txt
+++ b/core/api.txt
@@ -77,7 +77,7 @@ ion-app,none
 ion-avatar,shadow
 ion-avatar,css-prop,--border-radius

-ion-back-button,shadow
+ion-back-button,scoped
 ion-back-button,prop,color,string | undefined,undefined,false,false
 ion-back-button,prop,defaultHref,string | undefined,undefined,false,false
 ion-back-button,prop,disabled,boolean,false,false,true
@@ -225,7 +225,6 @@ ion-checkbox,css-prop,--border-radius
 ion-checkbox,css-prop,--border-style
 ion-checkbox,css-prop,--border-width
 ion-checkbox,css-prop,--checkmark-color
-ion-checkbox,css-prop,--checkmark-width
 ion-checkbox,css-prop,--size
 ion-checkbox,css-prop,--transition

@@ -301,7 +300,6 @@ ion-datetime,prop,dayShortNames,string | string[] | undefined,undefined,false,fa
 ion-datetime,prop,dayValues,number | number[] | string | undefined,undefined,false,false
 ion-datetime,prop,disabled,boolean,false,false,false
 ion-datetime,prop,displayFormat,string,'MMM D, YYYY',false,false
-ion-datetime,prop,displayTimezone,string | undefined,undefined,false,false
 ion-datetime,prop,doneText,string,'Done',false,false
 ion-datetime,prop,hourValues,number | number[] | string | undefined,undefined,false,false
 ion-datetime,prop,max,string | undefined,undefined,false,false
@@ -467,7 +465,7 @@ ion-item,shadow
 ion-item,prop,button,boolean,false,false,false
 ion-item,prop,color,string | undefined,undefined,false,false
 ion-item,prop,detail,boolean | undefined,undefined,false,false
-ion-item,prop,detailIcon,string,'chevron-forward',false,false
+ion-item,prop,detailIcon,string,'ios-arrow-forward',false,false
 ion-item,prop,disabled,boolean,false,false,false
 ion-item,prop,download,string | undefined,undefined,false,false
 ion-item,prop,href,string | undefined,undefined,false,false
@@ -568,14 +566,9 @@ ion-list,method,closeSlidingItems,closeSlidingItems() => Promise<boolean>

 ion-list-header,shadow
 ion-list-header,prop,color,string | undefined,undefined,false,false
-ion-list-header,prop,lines,"full" | "inset" | "none" | undefined,undefined,false,false
 ion-list-header,prop,mode,"ios" | "md",undefined,false,false
 ion-list-header,css-prop,--background
-ion-list-header,css-prop,--border-color
-ion-list-header,css-prop,--border-style
-ion-list-header,css-prop,--border-width
 ion-list-header,css-prop,--color
-ion-list-header,css-prop,--inner-border-width

 ion-loading,scoped
 ion-loading,prop,animated,boolean,true,false,false
@@ -614,10 +607,10 @@ ion-loading-controller,method,dismiss,dismiss(data?: any, role?: string | undefi
 ion-loading-controller,method,getTop,getTop() => Promise<HTMLIonLoadingElement | undefined>

 ion-menu,shadow
-ion-menu,prop,contentId,string | undefined,undefined,false,true
+ion-menu,prop,contentId,string | undefined,undefined,false,false
 ion-menu,prop,disabled,boolean,false,false,false
 ion-menu,prop,maxEdgeStart,number,50,false,false
-ion-menu,prop,menuId,string | undefined,undefined,false,true
+ion-menu,prop,menuId,string | undefined,undefined,false,false
 ion-menu,prop,side,"end" | "start",'start',false,true
 ion-menu,prop,swipeGesture,boolean,true,false,false
 ion-menu,prop,type,string | undefined,undefined,false,false
@@ -685,9 +678,7 @@ ion-modal,prop,enterAnimation,((baseEl: any, opts?: any) => Animation) | undefin
 ion-modal,prop,keyboardClose,boolean,true,false,false
 ion-modal,prop,leaveAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
 ion-modal,prop,mode,"ios" | "md",undefined,false,false
-ion-modal,prop,presentingElement,HTMLElement | undefined,undefined,false,false
 ion-modal,prop,showBackdrop,boolean,true,false,false
-ion-modal,prop,swipeToClose,boolean,false,false,false
 ion-modal,method,dismiss,dismiss(data?: any, role?: string | undefined) => Promise<boolean>
 ion-modal,method,onDidDismiss,onDidDismiss() => Promise<OverlayEventDetail<any>>
 ion-modal,method,onWillDismiss,onWillDismiss() => Promise<OverlayEventDetail<any>>
@@ -843,10 +834,8 @@ ion-radio,prop,value,any,undefined,false,false
 ion-radio,event,ionBlur,void,true
 ion-radio,event,ionFocus,void,true
 ion-radio,event,ionSelect,RadioChangeEventDetail,true
-ion-radio,css-prop,--border-radius
 ion-radio,css-prop,--color
 ion-radio,css-prop,--color-checked
-ion-radio,css-prop,--inner-border-radius

 ion-radio-group,none
 ion-radio-group,prop,allowEmptySelection,boolean,false,false,false
@@ -953,16 +942,16 @@ ion-searchbar,scoped
 ion-searchbar,prop,animated,boolean,false,false,false
 ion-searchbar,prop,autocomplete,"off" | "on",'off',false,false
 ion-searchbar,prop,autocorrect,"off" | "on",'off',false,false
-ion-searchbar,prop,cancelButtonIcon,string,config.get('backButtonIcon', 'arrow-back-sharp') as string,false,false
+ion-searchbar,prop,cancelButtonIcon,string,config.get('backButtonIcon', 'md-arrow-back') as string,false,false
 ion-searchbar,prop,cancelButtonText,string,'Cancel',false,false
 ion-searchbar,prop,clearIcon,string | undefined,undefined,false,false
 ion-searchbar,prop,color,string | undefined,undefined,false,false
 ion-searchbar,prop,debounce,number,250,false,false
 ion-searchbar,prop,disabled,boolean,false,false,false
-ion-searchbar,prop,inputmode,"decimal" | "email" | "none" | "numeric" | "search" | "tel" | "text" | "url" | undefined,undefined,false,false
+ion-searchbar,prop,inputmode,"decimal" | "email" | "none" | "numeric" | "search" | "tel" | "text" | "url",'search',false,false
 ion-searchbar,prop,mode,"ios" | "md",undefined,false,false
 ion-searchbar,prop,placeholder,string,'Search',false,false
-ion-searchbar,prop,searchIcon,string | undefined,undefined,false,false
+ion-searchbar,prop,searchIcon,string,'search',false,false
 ion-searchbar,prop,showCancelButton,"always" | "focus" | "never",'never',false,false
 ion-searchbar,prop,spellcheck,boolean,false,false,false
 ion-searchbar,prop,type,"email" | "number" | "password" | "search" | "tel" | "text" | "url",'search',false,false
@@ -1117,7 +1106,7 @@ ion-spinner,prop,paused,boolean,false,false,false
 ion-spinner,css-prop,--color

 ion-split-pane,shadow
-ion-split-pane,prop,contentId,string | undefined,undefined,false,true
+ion-split-pane,prop,contentId,string | undefined,undefined,false,false
 ion-split-pane,prop,disabled,boolean,false,false,false
 ion-split-pane,prop,when,boolean | string,QUERY['lg'],false,false
 ion-split-pane,event,ionSplitPaneVisible,{ visible: boolean; },true
@@ -1274,10 +1263,8 @@ ion-toggle,event,ionChange,ToggleChangeEventDetail,true
 ion-toggle,event,ionFocus,void,true
 ion-toggle,css-prop,--background
 ion-toggle,css-prop,--background-checked
-ion-toggle,css-prop,--border-radius
 ion-toggle,css-prop,--handle-background
 ion-toggle,css-prop,--handle-background-checked
-ion-toggle,css-prop,--handle-border-radius

 ion-toolbar,shadow
 ion-toolbar,prop,color,string | undefined,undefined,false,false
--- a/core/package.json
+++ b/core/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@ionic/core",
-  "version": "5.0.0-beta.4",
+  "version": "5.0.0-beta.0",
  "description": "Base components for Ionic",
  "keywords": [
    "ionic",
@@ -30,11 +30,11 @@
    "loader/"
  ],
  "dependencies": {
-    "ionicons": "5.0.0-15",
+    "ionicons": "^4.6.3",
    "tslib": "^1.10.0"
  },
  "devDependencies": {
-    "@stencil/core": "1.8.3",
+    "@stencil/core": "1.7.5",
    "@stencil/sass": "1.0.1",
    "@types/jest": "24.0.21",
    "@types/node": "12.12.3",
--- a/core/src/components.d.ts
+++ b/core/src/components.d.ts
@@ -680,10 +680,6 @@ export namespace Components {
    */
    'displayFormat': string;
    /**
-    * The timezone to use for display purposes only. See [Date.prototype.toLocaleString()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleString) for a list of supported timezones. If no value is provided, the component will default to displaying times in the user's local timezone.
-    */
-    'displayTimezone'?: string;
-    /**
    * The text to display on the picker's "Done" button.
    */
    'doneText': string;
@@ -1203,10 +1199,6 @@ export namespace Components {
    */
    'color'?: Color;
    /**
-    * How the bottom border should be displayed on the list header.
-    */
-    'lines'?: 'full' | 'inset' | 'none';
-    /**
    * The mode determines which platform styles to use.
    */
    'mode'?: "ios" | "md";
@@ -1504,17 +1496,9 @@ export namespace Components {
    */
    'present': () => Promise<void>;
    /**
-    * The element that presented the modal. This is used for card presentation effects and for stacking multiple modals on top of each other. Only applies in iOS mode.
-    */
-    'presentingElement'?: HTMLElement;
-    /**
    * If `true`, a backdrop will be displayed behind the modal.
    */
    'showBackdrop': boolean;
-    /**
-    * If `true`, the modal can be swiped to dismiss. Only applies in iOS mode.
-    */
-    'swipeToClose': boolean;
  }
  interface IonModalController {
    /**
@@ -1977,7 +1961,7 @@ export namespace Components {
    */
    'cancel': () => Promise<void>;
    /**
-    * Time it takes to close the refresher. Does not apply when the refresher content uses a spinner, enabling the native refresher.
+    * Time it takes to close the refresher.
    */
    'closeDuration': string;
    /**
@@ -1993,27 +1977,27 @@ export namespace Components {
    */
    'getProgress': () => Promise<number>;
    /**
-    * How much to multiply the pull speed by. To slow the pull animation down, pass a number less than `1`. To speed up the pull, pass a number greater than `1`. The default value is `1` which is equal to the speed of the cursor. If a negative value is passed in, the factor will be `1` instead.  For example: If the value passed is `1.2` and the content is dragged by `10` pixels, instead of `10` pixels the content will be pulled by `12` pixels (an increase of 20 percent). If the value passed is `0.8`, the dragged amount will be `8` pixels, less than the amount the cursor has moved.  Does not apply when the refresher content uses a spinner, enabling the native refresher.
+    * How much to multiply the pull speed by. To slow the pull animation down, pass a number less than `1`. To speed up the pull, pass a number greater than `1`. The default value is `1` which is equal to the speed of the cursor. If a negative value is passed in, the factor will be `1` instead.  For example: If the value passed is `1.2` and the content is dragged by `10` pixels, instead of `10` pixels the content will be pulled by `12` pixels (an increase of 20 percent). If the value passed is `0.8`, the dragged amount will be `8` pixels, less than the amount the cursor has moved.
    */
    'pullFactor': number;
    /**
-    * The maximum distance of the pull until the refresher will automatically go into the `refreshing` state. Defaults to the result of `pullMin + 60`. Does not apply when  the refresher content uses a spinner, enabling the native refresher.
+    * The maximum distance of the pull until the refresher will automatically go into the `refreshing` state. Defaults to the result of `pullMin + 60`.
    */
    'pullMax': number;
    /**
-    * The minimum distance the user must pull down until the refresher will go into the `refreshing` state. Does not apply when the refresher content uses a spinner, enabling the native refresher.
+    * The minimum distance the user must pull down until the refresher will go into the `refreshing` state.
    */
    'pullMin': number;
    /**
-    * Time it takes the refresher to to snap back to the `refreshing` state. Does not apply when the refresher content uses a spinner, enabling the native refresher.
+    * Time it takes the refresher to to snap back to the `refreshing` state.
    */
    'snapbackDuration': string;
  }
  interface IonRefresherContent {
    /**
-    * A static icon or a spinner to display when you begin to pull down. A spinner name can be provided to gradually show tick marks when pulling down on iOS devices.
+    * A static icon to display when you begin to pull down
    */
-    'pullingIcon'?: SpinnerTypes | string | null;
+    'pullingIcon'?: string | null;
    /**
    * The text you want to display when you begin to pull down. `pullingText` can accept either plaintext or HTML as a string. To display characters normally reserved for HTML, they must be escaped. For example `<Ionic>` would become `&lt;Ionic&gt;`  For more information: [Security Documentation](https://ionicframework.com/docs/faq/security)
    */
@@ -2153,7 +2137,7 @@ export namespace Components {
    */
    'autocorrect': 'on' | 'off';
    /**
-    * Set the cancel button icon. Only applies to `md` mode. Defaults to `"arrow-back-sharp"`.
+    * Set the cancel button icon. Only applies to `md` mode.
    */
    'cancelButtonIcon': string;
    /**
@@ -2161,7 +2145,7 @@ export namespace Components {
    */
    'cancelButtonText': string;
    /**
-    * Set the clear icon. Defaults to `"close-circle"` for `ios` and `"close-sharp"` for `md`.
+    * Set the clear icon. Defaults to `"close-circle"` for `ios` and `"close"` for `md`.
    */
    'clearIcon'?: string;
    /**
@@ -2183,7 +2167,7 @@ export namespace Components {
    /**
    * A hint to the browser for which keyboard to display. Possible values: `"none"`, `"text"`, `"tel"`, `"url"`, `"email"`, `"numeric"`, `"decimal"`, and `"search"`.
    */
-    'inputmode'?: 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search';
+    'inputmode': 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search';
    /**
    * The mode determines which platform styles to use.
    */
@@ -2193,9 +2177,9 @@ export namespace Components {
    */
    'placeholder': string;
    /**
-    * The icon to use as the search icon. Defaults to `"search-outline"` in `ios` mode and `"search-sharp"` in `md` mode.
+    * The icon to use as the search icon.
    */
-    'searchIcon'?: string;
+    'searchIcon': string;
    /**
    * Sets focus on the specified `ion-searchbar`. Use this method instead of the global `input.focus()`.
    */
@@ -4120,10 +4104,6 @@ declare namespace LocalJSX {
    */
    'displayFormat'?: string;
    /**
-    * The timezone to use for display purposes only. See [Date.prototype.toLocaleString()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleString) for a list of supported timezones. If no value is provided, the component will default to displaying times in the user's local timezone.
-    */
-    'displayTimezone'?: string;
-    /**
    * The text to display on the picker's "Done" button.
    */
    'doneText'?: string;
@@ -4460,7 +4440,7 @@ declare namespace LocalJSX {
    */
    'onIonFocus'?: (event: CustomEvent<void>) => void;
    /**
-    * Emitted when a keyboard input occurred.
+    * Emitted when a keyboard input ocurred.
    */
    'onIonInput'?: (event: CustomEvent<KeyboardEvent>) => void;
    /**
@@ -4661,10 +4641,6 @@ declare namespace LocalJSX {
    */
    'color'?: Color;
    /**
-    * How the bottom border should be displayed on the list header.
-    */
-    'lines'?: 'full' | 'inset' | 'none';
-    /**
    * The mode determines which platform styles to use.
    */
    'mode'?: "ios" | "md";
@@ -4869,17 +4845,9 @@ declare namespace LocalJSX {
    */
    'onIonModalWillPresent'?: (event: CustomEvent<void>) => void;
    /**
-    * The element that presented the modal. This is used for card presentation effects and for stacking multiple modals on top of each other. Only applies in iOS mode.
-    */
-    'presentingElement'?: HTMLElement;
-    /**
    * If `true`, a backdrop will be displayed behind the modal.
    */
    'showBackdrop'?: boolean;
-    /**
-    * If `true`, the modal can be swiped to dismiss. Only applies in iOS mode.
-    */
-    'swipeToClose'?: boolean;
  }
  interface IonModalController {}
  interface IonNav {
@@ -5222,7 +5190,7 @@ declare namespace LocalJSX {
  }
  interface IonRefresher {
    /**
-    * Time it takes to close the refresher. Does not apply when the refresher content uses a spinner, enabling the native refresher.
+    * Time it takes to close the refresher.
    */
    'closeDuration'?: string;
    /**
@@ -5242,27 +5210,27 @@ declare namespace LocalJSX {
    */
    'onIonStart'?: (event: CustomEvent<void>) => void;
    /**
-    * How much to multiply the pull speed by. To slow the pull animation down, pass a number less than `1`. To speed up the pull, pass a number greater than `1`. The default value is `1` which is equal to the speed of the cursor. If a negative value is passed in, the factor will be `1` instead.  For example: If the value passed is `1.2` and the content is dragged by `10` pixels, instead of `10` pixels the content will be pulled by `12` pixels (an increase of 20 percent). If the value passed is `0.8`, the dragged amount will be `8` pixels, less than the amount the cursor has moved.  Does not apply when the refresher content uses a spinner, enabling the native refresher.
+    * How much to multiply the pull speed by. To slow the pull animation down, pass a number less than `1`. To speed up the pull, pass a number greater than `1`. The default value is `1` which is equal to the speed of the cursor. If a negative value is passed in, the factor will be `1` instead.  For example: If the value passed is `1.2` and the content is dragged by `10` pixels, instead of `10` pixels the content will be pulled by `12` pixels (an increase of 20 percent). If the value passed is `0.8`, the dragged amount will be `8` pixels, less than the amount the cursor has moved.
    */
    'pullFactor'?: number;
    /**
-    * The maximum distance of the pull until the refresher will automatically go into the `refreshing` state. Defaults to the result of `pullMin + 60`. Does not apply when  the refresher content uses a spinner, enabling the native refresher.
+    * The maximum distance of the pull until the refresher will automatically go into the `refreshing` state. Defaults to the result of `pullMin + 60`.
    */
    'pullMax'?: number;
    /**
-    * The minimum distance the user must pull down until the refresher will go into the `refreshing` state. Does not apply when the refresher content uses a spinner, enabling the native refresher.
+    * The minimum distance the user must pull down until the refresher will go into the `refreshing` state.
    */
    'pullMin'?: number;
    /**
-    * Time it takes the refresher to to snap back to the `refreshing` state. Does not apply when the refresher content uses a spinner, enabling the native refresher.
+    * Time it takes the refresher to to snap back to the `refreshing` state.
    */
    'snapbackDuration'?: string;
  }
  interface IonRefresherContent {
    /**
-    * A static icon or a spinner to display when you begin to pull down. A spinner name can be provided to gradually show tick marks when pulling down on iOS devices.
+    * A static icon to display when you begin to pull down
    */
-    'pullingIcon'?: SpinnerTypes | string | null;
+    'pullingIcon'?: string | null;
    /**
    * The text you want to display when you begin to pull down. `pullingText` can accept either plaintext or HTML as a string. To display characters normally reserved for HTML, they must be escaped. For example `<Ionic>` would become `&lt;Ionic&gt;`  For more information: [Security Documentation](https://ionicframework.com/docs/faq/security)
    */
@@ -5394,7 +5362,7 @@ declare namespace LocalJSX {
    */
    'autocorrect'?: 'on' | 'off';
    /**
-    * Set the cancel button icon. Only applies to `md` mode. Defaults to `"arrow-back-sharp"`.
+    * Set the cancel button icon. Only applies to `md` mode.
    */
    'cancelButtonIcon'?: string;
    /**
@@ -5402,7 +5370,7 @@ declare namespace LocalJSX {
    */
    'cancelButtonText'?: string;
    /**
-    * Set the clear icon. Defaults to `"close-circle"` for `ios` and `"close-sharp"` for `md`.
+    * Set the clear icon. Defaults to `"close-circle"` for `ios` and `"close"` for `md`.
    */
    'clearIcon'?: string;
    /**
@@ -5446,7 +5414,7 @@ declare namespace LocalJSX {
    */
    'onIonFocus'?: (event: CustomEvent<void>) => void;
    /**
-    * Emitted when a keyboard input occurred.
+    * Emitted when a keyboard input ocurred.
    */
    'onIonInput'?: (event: CustomEvent<KeyboardEvent>) => void;
    /**
@@ -5454,7 +5422,7 @@ declare namespace LocalJSX {
    */
    'placeholder'?: string;
    /**
-    * The icon to use as the search icon. Defaults to `"search-outline"` in `ios` mode and `"search-sharp"` in `md` mode.
+    * The icon to use as the search icon.
    */
    'searchIcon'?: string;
    /**
@@ -5901,7 +5869,7 @@ declare namespace LocalJSX {
    */
    'onIonFocus'?: (event: CustomEvent<void>) => void;
    /**
-    * Emitted when a keyboard input occurred.
+    * Emitted when a keyboard input ocurred.
    */
    'onIonInput'?: (event: CustomEvent<KeyboardEvent>) => void;
    /**
--- a/core/src/components/action-sheet/action-sheet.ios.scss
+++ b/core/src/components/action-sheet/action-sheet.ios.scss
@@ -32,6 +32,8 @@
 .action-sheet-group {
  @include border-radius($action-sheet-ios-border-radius);
  @include margin(null, null, $action-sheet-ios-group-margin-bottom - 2, null);
+
+  overflow: hidden;
 }

 .action-sheet-group:first-child {
--- a/core/src/components/action-sheet/action-sheet.scss
+++ b/core/src/components/action-sheet/action-sheet.scss
@@ -27,7 +27,7 @@
  --max-width: #{$action-sheet-max-width};
  --min-height: auto;
  --height: 100%;
-  --max-height: calc(100% - (var(--ion-safe-area-top) + var(--ion-safe-area-bottom)));
+  --max-height: 100%;

  @include font-smoothing();
  @include position(0, 0, 0, 0);
--- a/core/src/components/action-sheet/test/basic/index.html
+++ b/core/src/components/action-sheet/test/basic/index.html
@@ -79,7 +79,7 @@
          }
        }, {
          text: 'Play (open modal)',
-          icon: 'chevron-forward-circle',
+          icon: 'arrow-dropright-circle',
          handler: () => {
            console.log('Play clicked');
          }
@@ -221,7 +221,7 @@
          }
        }, {
          text: 'Play (open modal)',
-          icon: 'chevron-forward-circle',
+          icon: 'arrow-dropright-circle',
          handler: () => {
            console.log('Play clicked');
          }
--- a/core/src/components/action-sheet/test/standalone/index.html
+++ b/core/src/components/action-sheet/test/standalone/index.html
@@ -55,7 +55,7 @@
          }
        }, {
          text: 'Play (open modal)',
-          icon: 'chevron-forward-circle',
+          icon: 'arrow-dropright-circle',
          handler: () => {
            console.log('Play clicked');
          }
@@ -98,7 +98,7 @@
          }
        }, {
          text: 'Play (open modal)',
-          icon: 'chevron-forward-circle',
+          icon: 'arrow-dropright-circle',
          handler: () => {
            console.log('Play clicked');
          }
--- a/core/src/components/action-sheet/test/translucent/index.html
+++ b/core/src/components/action-sheet/test/translucent/index.html
@@ -68,7 +68,7 @@
          }
        }, {
          text: 'Play (open modal)',
-          icon: 'chevron-forward-circle',
+          icon: 'arrow-dropright-circle',
          handler: () => {
            console.log('Play clicked');
          }
--- a/core/src/components/alert/alert.tsx
+++ b/core/src/components/alert/alert.tsx
@@ -1,7 +1,7 @@
 import { Component, ComponentInterface, Element, Event, EventEmitter, Host, Method, Prop, Watch, h } from '@stencil/core';

 import { getIonMode } from '../../global/ionic-global';
-import { AlertButton, AlertInput, AnimationBuilder, CssClassMap, OverlayEventDetail, OverlayInterface } from '../../interface';
+import { AlertButton, AlertInput, Animation, AnimationBuilder, CssClassMap, OverlayEventDetail, OverlayInterface } from '../../interface';
 import { BACKDROP, dismiss, eventMethod, isCancel, prepareOverlay, present, safeCall } from '../../utils/overlays';
 import { sanitizeDOMString } from '../../utils/sanitization';
 import { getClassMap } from '../../utils/theme';
@@ -30,6 +30,7 @@ export class Alert implements ComponentInterface, OverlayInterface {
  private processedButtons: AlertButton[] = [];

  presented = false;
+  animation?: Animation;
  mode = getIonMode(this);

  @Element() el!: HTMLIonAlertElement;
--- a/core/src/components/app/test/safe-area/index.html
+++ b/core/src/components/app/test/safe-area/index.html
@@ -60,7 +60,7 @@
      const toast = Object.assign(document.createElement('ion-toast'), {
        message: 'Hello world!',
        buttons: [
-          { text: 'Close', role: 'cancel' }
+          { text: 'Close', role: 'close' }
        ]
      });
      document.body.appendChild(toast);
@@ -71,7 +71,7 @@

 <body>
  <ion-app>
-    <ion-menu content-id="main">
+    <ion-menu>
      <ion-header>
        <ion-toolbar>
          <ion-title>Menu</ion-title>
@@ -94,7 +94,7 @@
      </ion-toolbar>
    </ion-header>

-    <ion-content id="main">
+    <ion-content main>
      <ion-card>
        <ion-card-header>
          <ion-card-title>Card</ion-card-title>
--- a/core/src/components/back-button/back-button.scss
+++ b/core/src/components/back-button/back-button.scss
@@ -102,6 +102,7 @@
 // Back Button States
 // --------------------------------------------------

+:host-context(.can-go-back > ion-header),
 :host(.show-back-button) {
  display: block;
 }
--- a/core/src/components/back-button/back-button.tsx
+++ b/core/src/components/back-button/back-button.tsx
@@ -15,11 +15,11 @@ import { createColorClasses, openURL } from '../../utils/theme';
    ios: 'back-button.ios.scss',
    md: 'back-button.md.scss'
  },
-  shadow: true
+  scoped: true
 })
 export class BackButton implements ComponentInterface, ButtonInterface {

-  mode = getIonMode(this);
+  private mode = getIonMode(this);
  @Element() el!: HTMLElement;

  /**
@@ -54,32 +54,20 @@ export class BackButton implements ComponentInterface, ButtonInterface {
   */
  @Prop() type: 'submit' | 'reset' | 'button' = 'button';

-  get backButtonIcon() {
-    const icon = this.icon;
-    if (icon != null) {
-      // icon is set on the component or by the config
-      return icon;
-    }
-
-    if (this.mode === 'ios') {
-      // default ios back button icon
-      return config.get('backButtonIcon', 'chevron-back');
-    }
-
-    // default md back button icon
-    return config.get('backButtonIcon', 'arrow-back-sharp');
+  private get backButtonIcon() {
+    return this.icon != null ? this.icon : config.get('backButtonIcon', 'arrow-back');
  }

-  get backButtonText() {
+  private get backButtonText() {
    const defaultBackButtonText = this.mode === 'ios' ? 'Back' : null;
    return this.text != null ? this.text : config.get('backButtonText', defaultBackButtonText);
  }

-  get hasIconOnly() {
+  private get hasIconOnly() {
    return this.backButtonIcon && !this.backButtonText;
  }

-  get rippleType() {
+  private get rippleType() {
    // If the button only has an icon we use the unbounded
    // "circular" ripple effect
    if (this.hasIconOnly) {
@@ -118,10 +106,10 @@ export class BackButton implements ComponentInterface, ButtonInterface {
          'show-back-button': showBackButton
        }}
      >
-        <button type={type} disabled={disabled} class="button-native" part="button">
+        <button type={type} disabled={disabled} class="button-native">
          <span class="button-inner">
-            {backButtonIcon && <ion-icon icon={backButtonIcon} lazy={false} part="icon"></ion-icon>}
-            {backButtonText && <span class="button-text" part="text">{backButtonText}</span>}
+            {backButtonIcon && <ion-icon icon={backButtonIcon} lazy={false}></ion-icon>}
+            {backButtonText && <span class="button-text">{backButtonText}</span>}
          </span>
          {mode === 'md' && <ion-ripple-effect type={this.rippleType}></ion-ripple-effect>}
        </button>
--- a/core/src/components/back-button/test/back-button.spec.ts
+++ b/core/src/components/back-button/test/back-button.spec.ts
@@ -1,59 +0,0 @@
-import { BackButton } from "../back-button";
-import { config } from "../../../global/config";
-
-
-describe('back button', () => {
-  let bb: BackButton;
-
-  beforeEach(() => {
-    config.reset({});
-    bb = new BackButton();
-  });
-
-  describe('backButtonIcon', () => {
-
-    it('set custom icon on the instance, override config', () => {
-      bb.icon = 'custom-icon-instance';
-      config.reset({
-        backButtonIcon: 'custom-icon-config'
-      });
-      expect(bb.backButtonIcon).toBe('custom-icon-instance');
-    });
-
-    it('set custom icon in the config', () => {
-      config.reset({
-        backButtonIcon: 'custom-icon-config'
-      });
-      expect(bb.backButtonIcon).toBe('custom-icon-config');
-    });
-
-    it('set custom icon on the instance', () => {
-      bb.icon = 'custom-icon-instance';
-      expect(bb.backButtonIcon).toBe('custom-icon-instance');
-    });
-
-    it('default icon for ios mode', () => {
-      bb.mode = 'ios';
-      expect(bb.backButtonIcon).toBe('chevron-back');
-    });
-
-    it('default icon', () => {
-      expect(bb.backButtonIcon).toBe('arrow-back-sharp');
-    });
-
-  });
-
-  describe('backButtonText', () => {
-
-    it('default text for ios mode', () => {
-      bb.mode = 'ios';
-      expect(bb.backButtonText).toBe('Back');
-    });
-
-    it('default text', () => {
-      expect(bb.backButtonText).toBe(null);
-    });
-
-  });
-
-});
--- a/core/src/components/badge/test/basic/index.html
+++ b/core/src/components/badge/test/basic/index.html
@@ -22,11 +22,7 @@

    <ion-content id="content">
      <ion-list>
-        <ion-list-header>
-          <ion-label>
-            Badges Right
-          </ion-label>
-        </ion-list-header>
+        <ion-list-header>Badges Right</ion-list-header>
        <ion-item>
          <ion-label>Default Badge</ion-label>
          <ion-badge slot="end">00</ion-badge>
@@ -74,11 +70,7 @@
      </ion-list>

      <ion-list>
-        <ion-list-header>
-          <ion-label>
-            Badges Left
-          </ion-label>
-        </ion-list-header>
+        <ion-list-header>Badges Left</ion-list-header>
        <ion-item>
          <ion-label>Default Badge</ion-label>
          <ion-badge slot="start">00</ion-badge>
--- a/core/src/components/button/button.ios.scss
+++ b/core/src/components/button/button.ios.scss
@@ -68,11 +68,6 @@
  --background-focused: #{ion-color(primary, base, .1)};
  --color-activated: #{ion-color(primary, base)};
  --color-focused: #{ion-color(primary, base)};
-
-  font-size: #{$button-ios-clear-font-size};
-  font-weight: #{$button-ios-clear-font-weight};
-
-  letter-spacing: #{$button-ios-clear-letter-spacing};
 }


--- a/core/src/components/button/button.ios.vars.scss
+++ b/core/src/components/button/button.ios.vars.scss
@@ -153,15 +153,6 @@ $button-ios-outline-background-color-focused:         ion-color(primary, base, $
 // iOS Clear Button
 // --------------------------------------------------

-/// @prop - Font size of the clear button
-$button-ios-clear-font-size:                          17px !default;
-
-/// @prop - Font weight of the clear button
-$button-ios-clear-font-weight:                        normal !default;
-
-/// @prop - Letter spacing of the clear button
-$button-ios-clear-letter-spacing:                     0 !default;
-
 /// @prop - Border color of the clear button
 $button-ios-clear-border-color:                       transparent !default;

--- a/core/src/components/button/button.tsx
+++ b/core/src/components/button/button.tsx
@@ -23,9 +23,9 @@ import { createColorClasses, openURL } from '../../utils/theme';
  shadow: true,
 })
 export class Button implements ComponentInterface, AnchorInterface, ButtonInterface {
-  private inItem = false;
-  private inListHeader = false;
+
  private inToolbar = false;
+  private inItem = false;

  @Element() el!: HTMLElement;

@@ -124,7 +124,6 @@ export class Button implements ComponentInterface, AnchorInterface, ButtonInterf

  componentWillLoad() {
    this.inToolbar = !!this.el.closest('ion-buttons');
-    this.inListHeader = !!this.el.closest('ion-list-header');
    this.inItem = !!this.el.closest('ion-item') || !!this.el.closest('ion-item-divider');
  }

@@ -190,7 +189,7 @@ export class Button implements ComponentInterface, AnchorInterface, ButtonInterf

    let fill = this.fill;
    if (fill === undefined) {
-      fill = this.inToolbar || this.inListHeader ? 'clear' : 'solid';
+      fill = this.inToolbar ? 'clear' : 'solid';
    }
    return (
      <Host
--- a/core/src/components/button/test/toolbar/index.html
+++ b/core/src/components/button/test/toolbar/index.html
@@ -32,7 +32,7 @@
      <ion-toolbar>
        <ion-buttons slot="secondary">
          <ion-button>
-            <ion-icon slot="icon-only" name="person-circle"></ion-icon>
+            <ion-icon slot="icon-only" name="contact"></ion-icon>
          </ion-button>
          <ion-button>
            <ion-icon slot="icon-only" name="search"></ion-icon>
@@ -40,7 +40,7 @@
        </ion-buttons>
        <ion-buttons slot="primary">
          <ion-button color="secondary">
-            <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
+            <ion-icon slot="icon-only" name="more"></ion-icon>
          </ion-button>
        </ion-buttons>
        <ion-title>This is a long title with buttons. It just goes on and on my friend.</ion-title>
@@ -57,7 +57,7 @@
        </ion-buttons>
        <ion-buttons slot="primary">
          <ion-button color="secondary">
-            <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
+            <ion-icon slot="icon-only" name="more"></ion-icon>
          </ion-button>
        </ion-buttons>
        <ion-title>This is a long title with buttons. It just goes on and on my friend.</ion-title>
@@ -74,7 +74,7 @@
        </ion-buttons>
        <ion-buttons slot="primary">
          <ion-button fill="solid" color="secondary">
-            <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
+            <ion-icon slot="icon-only" name="more"></ion-icon>
          </ion-button>
        </ion-buttons>
        <ion-title>This is a long title with buttons. It just goes on and on my friend.</ion-title>
@@ -83,7 +83,7 @@
      <ion-toolbar>
        <ion-buttons slot="secondary">
          <ion-button>
-            <ion-icon slot="icon-only" name="person-circle"></ion-icon>
+            <ion-icon slot="icon-only" name="contact"></ion-icon>
          </ion-button>
          <ion-button>
            <ion-icon slot="icon-only" name="search"></ion-icon>
@@ -91,7 +91,7 @@
        </ion-buttons>
        <ion-buttons slot="primary">
          <ion-button color="secondary">
-            <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
+            <ion-icon slot="icon-only" name="more"></ion-icon>
          </ion-button>
        </ion-buttons>
        <ion-title>Defaults</ion-title>
@@ -100,7 +100,7 @@
      <ion-toolbar>
        <ion-buttons slot="secondary">
          <ion-button class="activated">
-            <ion-icon slot="icon-only" name="person-circle"></ion-icon>
+            <ion-icon slot="icon-only" name="contact"></ion-icon>
          </ion-button>
          <ion-button class="activated">
            <ion-icon slot="icon-only" name="search"></ion-icon>
@@ -108,7 +108,7 @@
        </ion-buttons>
        <ion-buttons slot="primary">
          <ion-button color="secondary" class="activated">
-            <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
+            <ion-icon slot="icon-only" name="more"></ion-icon>
          </ion-button>
        </ion-buttons>
        <ion-title>Defaults.activated</ion-title>
@@ -117,10 +117,10 @@
      <ion-toolbar>
        <ion-buttons slot="secondary">
          <ion-button fill="solid">
-            <ion-icon slot="icon-only" name="person-circle"></ion-icon>
+            <ion-icon slot="icon-only" name="contact"></ion-icon>
          </ion-button>
          <ion-button fill="solid">
-            <ion-icon name="person-circle" slot="start"></ion-icon>
+            <ion-icon name="contact" slot="start"></ion-icon>
            Solid
          </ion-button>
        </ion-buttons>
@@ -136,10 +136,10 @@
      <ion-toolbar>
        <ion-buttons slot="secondary">
          <ion-button fill="solid" class="activated">
-            <ion-icon slot="icon-only" name="person-circle"></ion-icon>
+            <ion-icon slot="icon-only" name="contact"></ion-icon>
          </ion-button>
          <ion-button fill="solid" class="activated">
-            <ion-icon name="person-circle" slot="start"></ion-icon>
+            <ion-icon name="contact" slot="start"></ion-icon>
            Solid
          </ion-button>
        </ion-buttons>
@@ -155,7 +155,7 @@
      <ion-toolbar>
        <ion-buttons slot="secondary">
          <ion-button fill="outline">
-            <ion-icon slot="icon-only" name="person-circle"></ion-icon>
+            <ion-icon slot="icon-only" name="contact"></ion-icon>
          </ion-button>
          <ion-button fill="outline">
            <ion-icon name="star" slot="start"></ion-icon>
@@ -164,7 +164,7 @@
        </ion-buttons>
        <ion-buttons slot="primary">
          <ion-button color="secondary" fill="outline">
-            <ion-icon slot="icon-only" name="person-circle"></ion-icon>
+            <ion-icon slot="icon-only" name="contact"></ion-icon>
          </ion-button>
        </ion-buttons>
        <ion-title>Outline</ion-title>
@@ -173,7 +173,7 @@
      <ion-toolbar>
        <ion-buttons slot="secondary">
          <ion-button fill="outline" class="activated">
-            <ion-icon slot="icon-only" name="person-circle"></ion-icon>
+            <ion-icon slot="icon-only" name="contact"></ion-icon>
          </ion-button>
          <ion-button fill="outline" class="activated">
            <ion-icon name="star" slot="start"></ion-icon>
@@ -182,7 +182,7 @@
        </ion-buttons>
        <ion-buttons slot="primary">
          <ion-button color="secondary" fill="outline" class="activated">
-            <ion-icon slot="icon-only" name="person-circle"></ion-icon>
+            <ion-icon slot="icon-only" name="contact"></ion-icon>
          </ion-button>
        </ion-buttons>
        <ion-title>Outline.activated</ion-title>
@@ -191,7 +191,7 @@
      <ion-toolbar>
        <ion-buttons slot="secondary">
          <ion-button>
-            <ion-icon name="person-circle" slot="start"></ion-icon>
+            <ion-icon name="contact" slot="start"></ion-icon>
            Clear
          </ion-button>
        </ion-buttons>
--- a/core/src/components/buttons/readme.md
+++ b/core/src/components/buttons/readme.md
@@ -30,7 +30,7 @@ The `<ion-buttons>` element can be positioned inside of the toolbar using a name
 <ion-toolbar>
  <ion-buttons slot="secondary">
    <ion-button>
-      <ion-icon slot="icon-only" name="person-circle"></ion-icon>
+      <ion-icon slot="icon-only" name="contact"></ion-icon>
    </ion-button>
    <ion-button>
      <ion-icon slot="icon-only" name="search"></ion-icon>
@@ -39,7 +39,7 @@ The `<ion-buttons>` element can be positioned inside of the toolbar using a name
  <ion-title>Default Buttons</ion-title>
  <ion-buttons slot="primary">
    <ion-button color="secondary">
-      <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
+      <ion-icon slot="icon-only" name="more"></ion-icon>
    </ion-button>
  </ion-buttons>
 </ion-toolbar>
@@ -80,7 +80,7 @@ The `<ion-buttons>` element can be positioned inside of the toolbar using a name
 <ion-toolbar>
  <ion-buttons slot="secondary">
    <ion-button>
-      <ion-icon slot="icon-only" name="person-circle"></ion-icon>
+      <ion-icon slot="icon-only" name="contact"></ion-icon>
    </ion-button>
    <ion-button>
      <ion-icon slot="icon-only" name="search"></ion-icon>
@@ -89,7 +89,7 @@ The `<ion-buttons>` element can be positioned inside of the toolbar using a name
  <ion-title>Default Buttons</ion-title>
  <ion-buttons slot="primary">
    <ion-button color="secondary">
-      <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
+      <ion-icon slot="icon-only" name="more"></ion-icon>
    </ion-button>
  </ion-buttons>
 </ion-toolbar>
@@ -148,7 +148,7 @@ export const ButtonsExample: React.FC = () => (
    <IonToolbar>
      <IonButtons slot="secondary">
        <IonButton>
-          <IonIcon slot="icon-only" name="person-circle" />
+          <IonIcon slot="icon-only" name="contact" />
        </IonButton>
        <IonButton>
          <IonIcon slot="icon-only" name="search" />
@@ -157,7 +157,7 @@ export const ButtonsExample: React.FC = () => (
      <IonTitle>Default Buttons</IonTitle>
      <IonButtons slot="primary">
        <IonButton color="secondary">
-          <IonIcon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical" />
+          <IonIcon slot="icon-only" name="more" />
        </IonButton>
      </IonButtons>
    </IonToolbar>
@@ -173,7 +173,7 @@ export const ButtonsExample: React.FC = () => (
        <IonMenuButton autoHide={false} />
      </IonButtons>
    </IonToolbar>
-
+    
    <IonToolbar>
      <IonButtons collapse="true">
        <IonButton>
@@ -201,7 +201,7 @@ export const ButtonsExample: React.FC = () => (
  <ion-toolbar>
    <ion-buttons slot="secondary">
      <ion-button>
-        <ion-icon slot="icon-only" name="person-circle"></ion-icon>
+        <ion-icon slot="icon-only" name="contact"></ion-icon>
      </ion-button>
      <ion-button>
        <ion-icon slot="icon-only" name="search"></ion-icon>
@@ -210,7 +210,7 @@ export const ButtonsExample: React.FC = () => (
    <ion-title>Default Buttons</ion-title>
    <ion-buttons slot="primary">
      <ion-button color="secondary">
-        <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
+        <ion-icon slot="icon-only" name="more"></ion-icon>
      </ion-button>
    </ion-buttons>
  </ion-toolbar>
@@ -226,7 +226,7 @@ export const ButtonsExample: React.FC = () => (
      <ion-menu-button autoHide="false"></ion-menu-button>
    </ion-buttons>
  </ion-toolbar>
-
+  
  <ion-toolbar>
    <ion-buttons collapse="true">
      <ion-button>
--- a/core/src/components/buttons/test/icon/index.html
+++ b/core/src/components/buttons/test/icon/index.html
@@ -22,7 +22,7 @@
        </ion-buttons>
        <ion-buttons slot="primary">
          <ion-button slot="icon-only">
-            <ion-icon ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
+            <ion-icon name="more"></ion-icon>
          </ion-button>
        </ion-buttons>
      </ion-toolbar>
--- a/core/src/components/buttons/usage/angular.md
+++ b/core/src/components/buttons/usage/angular.md
@@ -9,7 +9,7 @@
 <ion-toolbar>
  <ion-buttons slot="secondary">
    <ion-button>
-      <ion-icon slot="icon-only" name="person-circle"></ion-icon>
+      <ion-icon slot="icon-only" name="contact"></ion-icon>
    </ion-button>
    <ion-button>
      <ion-icon slot="icon-only" name="search"></ion-icon>
@@ -18,7 +18,7 @@
  <ion-title>Default Buttons</ion-title>
  <ion-buttons slot="primary">
    <ion-button color="secondary">
-      <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
+      <ion-icon slot="icon-only" name="more"></ion-icon>
    </ion-button>
  </ion-buttons>
 </ion-toolbar>
--- a/core/src/components/buttons/usage/javascript.md
+++ b/core/src/components/buttons/usage/javascript.md
@@ -9,7 +9,7 @@
 <ion-toolbar>
  <ion-buttons slot="secondary">
    <ion-button>
-      <ion-icon slot="icon-only" name="person-circle"></ion-icon>
+      <ion-icon slot="icon-only" name="contact"></ion-icon>
    </ion-button>
    <ion-button>
      <ion-icon slot="icon-only" name="search"></ion-icon>
@@ -18,7 +18,7 @@
  <ion-title>Default Buttons</ion-title>
  <ion-buttons slot="primary">
    <ion-button color="secondary">
-      <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
+      <ion-icon slot="icon-only" name="more"></ion-icon>
    </ion-button>
  </ion-buttons>
 </ion-toolbar>
--- a/core/src/components/buttons/usage/react.md
+++ b/core/src/components/buttons/usage/react.md
@@ -23,7 +23,7 @@ export const ButtonsExample: React.FC = () => (
    <IonToolbar>
      <IonButtons slot="secondary">
        <IonButton>
-          <IonIcon slot="icon-only" name="person-circle" />
+          <IonIcon slot="icon-only" name="contact" />
        </IonButton>
        <IonButton>
          <IonIcon slot="icon-only" name="search" />
@@ -32,7 +32,7 @@ export const ButtonsExample: React.FC = () => (
      <IonTitle>Default Buttons</IonTitle>
      <IonButtons slot="primary">
        <IonButton color="secondary">
-          <IonIcon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical" />
+          <IonIcon slot="icon-only" name="more" />
        </IonButton>
      </IonButtons>
    </IonToolbar>
@@ -48,7 +48,7 @@ export const ButtonsExample: React.FC = () => (
        <IonMenuButton autoHide={false} />
      </IonButtons>
    </IonToolbar>
-
+    
    <IonToolbar>
      <IonButtons collapse="true">
        <IonButton>
--- a/core/src/components/buttons/usage/vue.md
+++ b/core/src/components/buttons/usage/vue.md
@@ -10,7 +10,7 @@
  <ion-toolbar>
    <ion-buttons slot="secondary">
      <ion-button>
-        <ion-icon slot="icon-only" name="person-circle"></ion-icon>
+        <ion-icon slot="icon-only" name="contact"></ion-icon>
      </ion-button>
      <ion-button>
        <ion-icon slot="icon-only" name="search"></ion-icon>
@@ -19,7 +19,7 @@
    <ion-title>Default Buttons</ion-title>
    <ion-buttons slot="primary">
      <ion-button color="secondary">
-        <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
+        <ion-icon slot="icon-only" name="more"></ion-icon>
      </ion-button>
    </ion-buttons>
  </ion-toolbar>
@@ -35,7 +35,7 @@
      <ion-menu-button autoHide="false"></ion-menu-button>
    </ion-buttons>
  </ion-toolbar>
-
+  
  <ion-toolbar>
    <ion-buttons collapse="true">
      <ion-button>
--- a/core/src/components/card/test/translucent/index.html
+++ b/core/src/components/card/test/translucent/index.html
@@ -232,7 +232,7 @@
            </ion-col>
            <ion-col class="ion-no-padding ion-text-right">
              <ion-button fill="clear" size="small" color="dark">
-                <ion-icon slot="start" name="share"></ion-icon>
+                <ion-icon slot="start" name="share-alt"></ion-icon>
                Share
              </ion-button>
            </ion-col>
--- a/core/src/components/checkbox/checkbox.md.scss
+++ b/core/src/components/checkbox/checkbox.md.scss
@@ -10,7 +10,6 @@
  --border-width: #{$checkbox-md-icon-border-width};
  --border-style: #{$checkbox-md-icon-border-style};
  --border-color: #{$checkbox-md-icon-border-color-off};
-  --checkmark-width: 3;

  // Background
  --background: #{$checkbox-md-icon-background-color-off};
@@ -28,6 +27,7 @@
 .checkbox-icon path {
  stroke-dasharray: 30;
  stroke-dashoffset: 30;
+  stroke-width: 3;
 }

 // Material Design Checkbox: Checked / Indeterminate
--- a/core/src/components/checkbox/checkbox.scss
+++ b/core/src/components/checkbox/checkbox.scss
@@ -19,12 +19,10 @@
   * @prop --transition: Transition of the checkbox icon
   *
   * @prop --checkmark-color: Color of the checkbox checkmark when checked
-   * @prop --checkmark-width: Stroke width of the checkbox checkmark
   */
  --background-checked: #{ion-color(primary, base)};
  --border-color-checked: #{ion-color(primary, base)};
  --checkmark-color: #{ion-color(primary, contrast)};
-  --checkmark-width: 1;
  --transition: none;

  display: inline-block;
@@ -67,7 +65,7 @@ button {
 .checkbox-icon path {
  fill: none;
  stroke: var(--checkmark-color);
-  stroke-width: var(--checkmark-width);
+  stroke-width: 1;

  opacity: 0;
 }
--- a/core/src/components/checkbox/readme.md
+++ b/core/src/components/checkbox/readme.md
@@ -218,7 +218,6 @@ export const CheckboxExample: React.FC = () => (
 | `--border-style`         | Border style of the checkbox icon              |
 | `--border-width`         | Border width of the checkbox icon              |
 | `--checkmark-color`      | Color of the checkbox checkmark when checked   |
-| `--checkmark-width`      | Stroke width of the checkbox checkmark         |
 | `--size`                 | Size of the checkbox icon                      |
 | `--transition`           | Transition of the checkbox icon                |

--- a/core/src/components/checkbox/test/basic/index.html
+++ b/core/src/components/checkbox/test/basic/index.html
@@ -76,11 +76,6 @@
        <ion-checkbox checked color="dark" slot="start" style="--size: 100px;"></ion-checkbox>
      </ion-item>

-      <ion-item>
-        <ion-label>Checkmark width</ion-label>
-        <ion-checkbox checked color="dark" slot="start" style="--checkmark-width: 7;"></ion-checkbox>
-      </ion-item>
-
      <ion-item>
        <ion-label>Unchecked by Default</ion-label>
        <ion-checkbox></ion-checkbox>
--- a/core/src/components/checkbox/test/indeterminate/index.html
+++ b/core/src/components/checkbox/test/indeterminate/index.html
@@ -23,9 +23,7 @@

    <ion-content id="content">
      <ion-list-header>
-        <ion-label>
-          Native
-        </ion-label>
+        Native
      </ion-list-header>

      <div class="ion-padding-start">
@@ -51,9 +49,7 @@
      </div>

      <ion-list-header>
-        <ion-label>
-          Ionic
-        </ion-label>
+        Ionic
      </ion-list-header>
      <ion-item>
        <ion-label>Unchecked</ion-label>
@@ -76,9 +72,7 @@
      </ion-item>

      <ion-list-header>
-        <ion-label>
-          Colors
-        </ion-label>
+        Colors
      </ion-list-header>
      <div class="ion-padding-start">
        <ion-checkbox indeterminate></ion-checkbox>
@@ -93,9 +87,7 @@
      </div>

      <ion-list-header>
-        <ion-label>
-          Parent
-        </ion-label>
+        Parent
      </ion-list-header>

      <ul>
--- a/core/src/components/content/content.scss
+++ b/core/src/components/content/content.scss
@@ -120,8 +120,6 @@
 }

 .transition-effect {
-  
-  display: none;
  position: absolute;

  /* stylelint-disable property-blacklist */
--- a/core/src/components/content/content.tsx
+++ b/core/src/components/content/content.tsx
@@ -330,9 +330,7 @@ export class Content implements ComponentInterface {
          ref={el => this.scrollEl = el!}
          onScroll={ev => this.onScroll(ev)}
        >
-          <div id="scroll-content">
-            <slot></slot>
-          </div>
+          <slot></slot>
        </main>

        {transitionShadow ? (
--- a/core/src/components/datetime/datetime-util.ts
+++ b/core/src/components/datetime/datetime-util.ts
@@ -242,13 +242,12 @@ export const parseDate = (val: string | undefined | null): DatetimeData | undefi
 };

 /**
- * Converts a valid UTC datetime string to JS Date time object.
- * By default uses the users local timezone, but an optional
- * timezone can be provided.
+ * Converts a valid UTC datetime string
+ * To the user's local timezone
 * Note: This is not meant for time strings
 * such as "01:47"
 */
-export const getDateTime = (dateString: any = '', timeZone: any = ''): Date => {
+export const getLocalDateTime = (dateString: any = ''): Date => {
  /**
   * If user passed in undefined
   * or null, convert it to the
@@ -274,7 +273,7 @@ export const getDateTime = (dateString: any = '', timeZone: any = ''): Date => {
  }

  const date = (typeof dateString === 'string' && dateString.length > 0) ? new Date(dateString) : new Date();
-  const localDateTime = new Date(
+  return new Date(
    Date.UTC(
      date.getFullYear(),
      date.getMonth(),
@@ -285,26 +284,14 @@ export const getDateTime = (dateString: any = '', timeZone: any = ''): Date => {
      date.getMilliseconds()
    )
  );
-
-  if (timeZone && timeZone.length > 0) {
-    return new Date(date.getTime() - getTimezoneOffset(localDateTime, timeZone));
-  }
-
-  return localDateTime;
 };

-export const getTimezoneOffset = (localDate: Date, timeZone: string) => {
-  const utcDateTime = new Date(localDate.toLocaleString('en-US', { timeZone: 'utc' }));
-  const tzDateTime = new Date(localDate.toLocaleString('en-US', { timeZone }));
-  return utcDateTime.getTime() - tzDateTime.getTime();
-};
-
-export const updateDate = (existingData: DatetimeData, newData: any, displayTimezone?: string): boolean => {
+export const updateDate = (existingData: DatetimeData, newData: any): boolean => {

  if (!newData || typeof newData === 'string') {
-    const dateTime = getDateTime(newData, displayTimezone);
-    if (!Number.isNaN(dateTime.getTime())) {
-      newData = dateTime.toISOString();
+    const localDateTime = getLocalDateTime(newData);
+    if (!Number.isNaN(localDateTime.getTime())) {
+      newData = localDateTime.toISOString();
    }
  }

--- a/core/src/components/datetime/datetime.tsx
+++ b/core/src/components/datetime/datetime.tsx
@@ -6,7 +6,7 @@ import { clamp, findItemLabel, renderHiddenInput } from '../../utils/helpers';
 import { pickerController } from '../../utils/overlays';
 import { hostContext } from '../../utils/theme';

-import { DatetimeData, LocaleData, convertDataToISO, convertFormatToKey, convertToArrayOfNumbers, convertToArrayOfStrings, dateDataSortValue, dateSortValue, dateValueRange, daysInMonth, getDateValue, getTimezoneOffset, parseDate, parseTemplate, renderDatetime, renderTextFormat, updateDate } from './datetime-util';
+import { DatetimeData, LocaleData, convertDataToISO, convertFormatToKey, convertToArrayOfNumbers, convertToArrayOfStrings, dateDataSortValue, dateSortValue, dateValueRange, daysInMonth, getDateValue, parseDate, parseTemplate, renderDatetime, renderTextFormat, updateDate } from './datetime-util';

 /**
 * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
@@ -81,14 +81,6 @@ export class Datetime implements ComponentInterface {
   */
  @Prop() displayFormat = 'MMM D, YYYY';

-  /**
-   * The timezone to use for display purposes only. See
-   * [Date.prototype.toLocaleString()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleString)
-   * for a list of supported timezones. If no value is provided, the
-   * component will default to displaying times in the user's local timezone.
-   */
-  @Prop() displayTimezone?: string;
-
  /**
   * The format of the date and time picker columns the user selects.
   * A datetime input can have one or many datetime parts, each getting their
@@ -295,7 +287,7 @@ export class Datetime implements ComponentInterface {
  }

  private updateDatetimeValue(value: any) {
-    updateDate(this.datetimeValue, value, this.displayTimezone);
+    updateDate(this.datetimeValue, value);
  }

  private generatePickerOptions(): PickerOptions {
@@ -334,11 +326,7 @@ export class Datetime implements ComponentInterface {
             * there can be 1 hr difference when dealing w/ DST
             */
            const date = new Date(convertDataToISO(this.datetimeValue));
-
-            // If a custom display timezone is provided, use that tzOffset value instead
-            this.datetimeValue.tzOffset = (this.displayTimezone !== undefined && this.displayTimezone.length > 0)
-              ? ((getTimezoneOffset(date, this.displayTimezone)) / 1000 / 60) * -1
-              : date.getTimezoneOffset() * -1;
+            this.datetimeValue.tzOffset = date.getTimezoneOffset() * -1;

            this.value = convertDataToISO(this.datetimeValue);
          }
--- a/core/src/components/datetime/readme.md
+++ b/core/src/components/datetime/readme.md
@@ -58,24 +58,9 @@ above can be passed in to the display format in any combination.
 | `YYYY, MMMM`          | `2005, June`            |
 | `MMM DD, YYYY HH:mm`  | `Jun 17, 2005 11:06`    |

-**Important**: `ion-datetime` will by default display values relative to the user's timezone.
+**Important**: `ion-datetime` will always display values relative to the user's timezone.
 Given a value of `09:00:00+01:00`, the datetime component will
 display it as `04:00:00-04:00` for users in a `-04:00` timezone offset.
-To change the display to use a different timezone, use the displayTimezone property described below.
-
-### Display Timezone
-
-The `displayTimezone` property allows you to change the default behavior
-of displaying values relative to the user's local timezone. In addition to "UTC" valid
-time zone values are determined by the browser, and in most cases follow the time zone names
-of the [IANA time zone database](https://www.iana.org/time-zones), such as "Asia/Shanghai",
-"Asia/Kolkata", "America/New_York". In the following example:
-
-```html
-<ion-datetime value="2019-10-01T15:43:40.394Z" display-timezone="utc"></ion-datetime>
-```
-
-The displayed value will not be converted and will be displayed as provided (UTC).


 ### Picker Format
@@ -665,7 +650,6 @@ export const DateTimeExample: React.FC = () => (
 | `dayValues`       | `day-values`        | Values used to create the list of selectable days. By default every day is shown for the given month. However, to control exactly which days of the month to display, the `dayValues` input can take a number, an array of numbers, or a string of comma separated numbers. Note that even if the array days have an invalid number for the selected month, like `31` in February, it will correctly not show days which are not valid for the selected month.                                    | `number \| number[] \| string \| undefined`                                                                                                                                                                                                                                                                                                                                                                              | `undefined`     |
 | `disabled`        | `disabled`          | If `true`, the user cannot interact with the datetime.                                                                                                                                                                                                                                                                                                                                                                                                                                            | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                | `false`         |
 | `displayFormat`   | `display-format`    | The display format of the date and time as text that shows within the item. When the `pickerFormat` input is not used, then the `displayFormat` is used for both display the formatted text, and determining the datetime picker's columns. See the `pickerFormat` input description for more info. Defaults to `MMM D, YYYY`.                                                                                                                                                                    | `string`                                                                                                                                                                                                                                                                                                                                                                                                                 | `'MMM D, YYYY'` |
-| `displayTimezone` | `display-timezone`  | The timezone to use for display purposes only. See [Date.prototype.toLocaleString()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleString) for a list of supported timezones. If no value is provided, the component will default to displaying times in the user's local timezone.                                                                                                                                                               | `string \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                    | `undefined`     |
 | `doneText`        | `done-text`         | The text to display on the picker's "Done" button.                                                                                                                                                                                                                                                                                                                                                                                                                                                | `string`                                                                                                                                                                                                                                                                                                                                                                                                                 | `'Done'`        |
 | `hourValues`      | `hour-values`       | Values used to create the list of selectable hours. By default the hour values range from `0` to `23` for 24-hour, or `1` to `12` for 12-hour. However, to control exactly which hours to display, the `hourValues` input can take a number, an array of numbers, or a string of comma separated numbers.                                                                                                                                                                                         | `number \| number[] \| string \| undefined`                                                                                                                                                                                                                                                                                                                                                                              | `undefined`     |
 | `max`             | `max`               | The maximum datetime allowed. Value must be a date string following the [ISO 8601 datetime format standard](https://www.w3.org/TR/NOTE-datetime), `1996-12-19`. The format does not have to be specific to an exact datetime. For example, the maximum could just be the year, such as `1994`. Defaults to the end of this year.                                                                                                                                                                  | `string \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                    | `undefined`     |
--- a/core/src/components/datetime/test/basic/index.html
+++ b/core/src/components/datetime/test/basic/index.html
@@ -31,12 +31,12 @@
          <ion-label>Default</ion-label>
          <ion-datetime></ion-datetime>
        </ion-item>
-
+        
        <ion-item>
          <ion-label position="floating">Default with floating label</ion-label>
          <ion-datetime></ion-datetime>
        </ion-item>
-
+        
        <ion-item>
          <ion-label position="floating">Placeholder with floating label</ion-label>
          <ion-datetime placeholder="Select a date"></ion-datetime>
@@ -142,23 +142,6 @@
        </ion-item>
      </ion-list>

-      <ion-list>
-        <ion-item>
-          <ion-label>Display UTC 00:00 in Local Timezone (default behavior)</ion-label>
-          <ion-datetime display-format="MMM DD, YYYY HH:mm" value="2020-01-01T00:00:00Z"></ion-datetime>
-        </ion-item>
-
-        <ion-item>
-          <ion-label>Display UTC 00:00 in UTC (display-timezone = 'utc')</ion-label>
-          <ion-datetime display-format="MMM DD, YYYY HH:mm" value="2020-01-01T00:00:00Z" display-timezone="utc"></ion-datetime>
-        </ion-item>
-
-        <ion-item>
-          <ion-label>Display UTC 00:00 in US Pacific Time (display-timezone = 'America/Los_Angeles')</ion-label>
-          <ion-datetime display-format="MMM DD, YYYY HH:mm" value="2020-01-01T00:00:00Z" display-timezone="America/Los_Angeles"></ion-datetime>
-        </ion-item>
-      </ion-list>
-
      <ion-list>
        <ion-item>
          <ion-label>HH:mm:ss</ion-label>
--- a/core/src/components/datetime/test/datetime.spec.ts
+++ b/core/src/components/datetime/test/datetime.spec.ts
@@ -1,4 +1,4 @@
-import { DatetimeData, daysInMonth, getDateValue, getDateTime, renderDatetime } from '../datetime-util';
+import { DatetimeData, daysInMonth, getDateValue, getLocalDateTime, renderDatetime } from '../datetime-util';

 describe('Datetime', () => {
  describe('getDateValue()', () => {
@@ -32,7 +32,7 @@ describe('Datetime', () => {
    });
  });

-  describe('getDateTime()', () => {
+  describe('getLocalDateTime()', () => {
    it('should format a datetime string according to the local timezone', () => {

      const dateStringTests = [
@@ -44,7 +44,7 @@ describe('Datetime', () => {
      ];

      dateStringTests.forEach(test => {
-        const convertToLocal = getDateTime(test.input);
+        const convertToLocal = getLocalDateTime(test.input);

        const timeZoneOffset = convertToLocal.getTimezoneOffset() / 60;
        const expectedDateString = test.expectedOutput.replace('%HOUR%', padNumber(test.expectedHourUTC - timeZoneOffset));
@@ -65,32 +65,19 @@ describe('Datetime', () => {
      ];

      dateStringTests.forEach(test => {
-        const convertToLocal = getDateTime(test.input);
+        const convertToLocal = getLocalDateTime(test.input);
        expect(convertToLocal.toISOString()).toContain(test.expectedOutput);
      });
    });

-    it('should format a datetime string using provided timezone', () => {
-      const dateStringTests = [
-        { displayTimezone: 'utc', input: `2019-03-02T12:00:00.000Z`, expectedOutput: `2019-03-02T12:00:00.000Z` },
-        { displayTimezone: 'America/New_York', input: `2019-03-02T12:00:00.000Z`, expectedOutput: `2019-03-02T07:00:00.000Z` },
-        { displayTimezone: 'Asia/Tokyo', input: `2019-03-02T12:00:00.000Z`, expectedOutput: `2019-03-02T21:00:00.000Z` },
-      ];
-
-      dateStringTests.forEach(test => {
-        const convertToLocal = getDateTime(test.input, test.displayTimezone);
-        expect(convertToLocal.toISOString()).toEqual(test.expectedOutput);
-      });
-    });
-
    it('should default to today for null and undefined cases', () => {
      const today = new Date();
      const todayString = renderDatetime('YYYY-MM-DD', { year: today.getFullYear(), month: today.getMonth() + 1, day: today.getDate() } )

-      const convertToLocalUndefined = getDateTime(undefined);
+      const convertToLocalUndefined = getLocalDateTime(undefined);
      expect(convertToLocalUndefined.toISOString()).toContain(todayString);

-      const convertToLocalNull = getDateTime(null);
+      const convertToLocalNull = getLocalDateTime(null);
      expect(convertToLocalNull.toISOString()).toContain(todayString);
    });
  });
--- a/core/src/components/fab/readme.md
+++ b/core/src/components/fab/readme.md
@@ -21,21 +21,21 @@ Fabs are container elements that contain one or more fab buttons. They should be
  <!-- fab placed to the bottom end -->
  <ion-fab vertical="bottom" horizontal="end" slot="fixed">
    <ion-fab-button>
-      <ion-icon name="arrow-forward-circle"></ion-icon>
+      <ion-icon name="arrow-dropleft"></ion-icon>
    </ion-fab-button>
  </ion-fab>

  <!-- fab placed to the top start -->
  <ion-fab vertical="top" horizontal="start" slot="fixed">
    <ion-fab-button>
-      <ion-icon name="arrow-back-circle"></ion-icon>
+      <ion-icon name="arrow-dropright"></ion-icon>
    </ion-fab-button>
  </ion-fab>

  <!-- fab placed to the bottom start -->
  <ion-fab vertical="bottom" horizontal="start" slot="fixed">
    <ion-fab-button>
-      <ion-icon name="arrow-up-circle"></ion-icon>
+      <ion-icon name="arrow-dropup"></ion-icon>
    </ion-fab-button>
  </ion-fab>

@@ -110,21 +110,21 @@ export const FabExample: React.FC = () => (
    {/*-- fab placed to the bottom end --*/}
    <IonFab vertical="bottom" horizontal="end" slot="fixed">
      <IonFabButton>
-        <IonIcon name="arrow-forward-circle" />
+        <IonIcon name="arrow-dropleft" />
      </IonFabButton>
    </IonFab>

    {/*-- fab placed to the top start --*/}
    <IonFab vertical="top" horizontal="start" slot="fixed">
      <IonFabButton>
-        <IonIcon name="arrow-back-circle" />
+        <IonIcon name="arrow-dropright" />
      </IonFabButton>
    </IonFab>

    {/*-- fab placed to the bottom start --*/}
    <IonFab vertical="bottom" horizontal="start" slot="fixed">
      <IonFabButton>
-        <IonIcon name="arrow-up-circle" />
+        <IonIcon name="arrow-dropup" />
      </IonFabButton>
    </IonFab>

@@ -197,21 +197,21 @@ export const FabExample: React.FC = () => (
    <!-- fab placed to the bottom end -->
    <ion-fab vertical="bottom" horizontal="end" slot="fixed">
      <ion-fab-button>
-        <ion-icon name="arrow-forward-circle"></ion-icon>
+        <ion-icon name="arrow-dropleft"></ion-icon>
      </ion-fab-button>
    </ion-fab>

    <!-- fab placed to the top start -->
    <ion-fab vertical="top" horizontal="start" slot="fixed">
      <ion-fab-button>
-        <ion-icon name="arrow-back-circle"></ion-icon>
+        <ion-icon name="arrow-dropright"></ion-icon>
      </ion-fab-button>
    </ion-fab>

    <!-- fab placed to the bottom start -->
    <ion-fab vertical="bottom" horizontal="start" slot="fixed">
      <ion-fab-button>
-        <ion-icon name="arrow-up-circle"></ion-icon>
+        <ion-icon name="arrow-dropup"></ion-icon>
      </ion-fab-button>
    </ion-fab>

--- a/core/src/components/fab/test/basic/index.html
+++ b/core/src/components/fab/test/basic/index.html
@@ -50,7 +50,7 @@

      <ion-fab vertical="bottom" horizontal="end" edge id="fab2" slot="fixed">
        <ion-fab-button onclick="clickMainFAB('fab2')" color="dark" class="e2eFabBottomRight" disabled>
-          <ion-icon name="arrow-back-circle"></ion-icon>
+          <ion-icon name="arrow-dropleft"></ion-icon>
        </ion-fab-button>
        <ion-fab-list side="start">
          <ion-fab-button onclick="openSocial('facebook', 'fab2')">
@@ -70,7 +70,7 @@

      <ion-fab vertical="top" horizontal="start" id="fab3" slot="fixed">
        <ion-fab-button onclick="clickMainFAB('fab3')" color="secondary" class="e2eFabTopLeft">
-          <ion-icon name="arrow-forward-circle"></ion-icon>
+          <ion-icon name="arrow-dropright"></ion-icon>
        </ion-fab-button>
        <ion-fab-list side="end">
          <ion-fab-button onclick="openSocial('facebook', 'fab3')">
@@ -90,7 +90,7 @@

      <ion-fab vertical="bottom" horizontal="start" id="fab4" slot="fixed">
        <ion-fab-button onclick="clickMainFAB('fab4')" color="light" class="e2eFabBottomLeft">
-          <ion-icon name="arrow-up-circle"></ion-icon>
+          <ion-icon name="arrow-dropup"></ion-icon>
        </ion-fab-button>
        <ion-fab-list side="top">
          <ion-fab-button onclick="openSocial('facebook', 'fab4')">
@@ -110,7 +110,7 @@

      <ion-fab vertical="center" horizontal="center" id="fab5" slot="fixed">
        <ion-fab-button onclick="clickMainFAB('fab5')" class="e2eFabCenter">
-          <ion-icon name="share"></ion-icon>
+          <ion-icon name="md-share"></ion-icon>
        </ion-fab-button>
        <ion-fab-list side="top">
          <ion-fab-button onclick="openSocial('vimeo', 'fab5')" color="primary">
--- a/core/src/components/fab/test/translucent/index.html
+++ b/core/src/components/fab/test/translucent/index.html
@@ -48,7 +48,7 @@
        </ion-fab>

        <ion-fab vertical="bottom" horizontal="end" edge id="fab2" slot="fixed">
-          <ion-fab-button translucent onclick="clickMainFAB('fab2')" color="dark" class="e2eFabBottomRight"><ion-icon name="arrow-back-circle"></ion-icon></ion-fab-button>
+          <ion-fab-button translucent onclick="clickMainFAB('fab2')" color="dark" class="e2eFabBottomRight"><ion-icon name="arrow-dropleft"></ion-icon></ion-fab-button>
          <ion-fab-list side="start">
            <ion-fab-button translucent onclick="openSocial('facebook', 'fab2')"><ion-icon name="logo-facebook"></ion-icon></ion-fab-button>
            <ion-fab-button translucent onclick="openSocial('twitter', 'fab2')"><ion-icon name="logo-twitter"></ion-icon></ion-fab-button>
@@ -58,7 +58,7 @@
        </ion-fab>

        <ion-fab vertical="top" horizontal="start" id="fab3" slot="fixed">
-          <ion-fab-button translucent onclick="clickMainFAB('fab3')" color="secondary" class="e2eFabTopLeft"><ion-icon name="arrow-forward-circle"></ion-icon></ion-fab-button>
+          <ion-fab-button translucent onclick="clickMainFAB('fab3')" color="secondary" class="e2eFabTopLeft"><ion-icon name="arrow-dropright"></ion-icon></ion-fab-button>
          <ion-fab-list side="end">
            <ion-fab-button translucent onclick="openSocial('facebook', 'fab3')"><ion-icon name="logo-facebook"></ion-icon></ion-fab-button>
            <ion-fab-button translucent onclick="openSocial('twitter', 'fab3')"><ion-icon name="logo-twitter"></ion-icon></ion-fab-button>
@@ -68,7 +68,7 @@
        </ion-fab>

        <ion-fab vertical="bottom" horizontal="start" id="fab4" slot="fixed">
-          <ion-fab-button translucent onclick="clickMainFAB('fab4')" color="light" class="e2eFabBottomLeft"><ion-icon name="arrow-up-circle"></ion-icon></ion-fab-button>
+          <ion-fab-button translucent onclick="clickMainFAB('fab4')" color="light" class="e2eFabBottomLeft"><ion-icon name="arrow-dropup"></ion-icon></ion-fab-button>
          <ion-fab-list side="top">
            <ion-fab-button translucent onclick="openSocial('facebook', 'fab4')"><ion-icon name="logo-facebook"></ion-icon></ion-fab-button>
            <ion-fab-button translucent onclick="openSocial('twitter', 'fab4')"><ion-icon name="logo-twitter"></ion-icon></ion-fab-button>
@@ -78,7 +78,7 @@
        </ion-fab>

        <ion-fab horizontal="center" vertical="center" id="fab5" slot="fixed">
-          <ion-fab-button translucent onclick="clickMainFAB('fab5')" class="e2eFabCenter"><ion-icon name="share"></ion-icon></ion-fab-button>
+          <ion-fab-button translucent onclick="clickMainFAB('fab5')" class="e2eFabCenter"><ion-icon name="md-share"></ion-icon></ion-fab-button>
          <ion-fab-list side="top">
            <ion-fab-button translucent onclick="openSocial('vimeo', 'fab5')" color="primary"><ion-icon name="logo-vimeo"></ion-icon></ion-fab-button>
          </ion-fab-list>
--- a/core/src/components/fab/usage/angular.md
+++ b/core/src/components/fab/usage/angular.md
@@ -10,21 +10,21 @@
  <!-- fab placed to the bottom end -->
  <ion-fab vertical="bottom" horizontal="end" slot="fixed">
    <ion-fab-button>
-      <ion-icon name="arrow-forward-circle"></ion-icon>
+      <ion-icon name="arrow-dropleft"></ion-icon>
    </ion-fab-button>
  </ion-fab>

  <!-- fab placed to the top start -->
  <ion-fab vertical="top" horizontal="start" slot="fixed">
    <ion-fab-button>
-      <ion-icon name="arrow-back-circle"></ion-icon>
+      <ion-icon name="arrow-dropright"></ion-icon>
    </ion-fab-button>
  </ion-fab>

  <!-- fab placed to the bottom start -->
  <ion-fab vertical="bottom" horizontal="start" slot="fixed">
    <ion-fab-button>
-      <ion-icon name="arrow-up-circle"></ion-icon>
+      <ion-icon name="arrow-dropup"></ion-icon>
    </ion-fab-button>
  </ion-fab>

--- a/core/src/components/fab/usage/javascript.md
+++ b/core/src/components/fab/usage/javascript.md
@@ -10,21 +10,21 @@
  <!-- fab placed to the bottom end -->
  <ion-fab vertical="bottom" horizontal="end" slot="fixed">
    <ion-fab-button>
-      <ion-icon name="arrow-forward-circle"></ion-icon>
+      <ion-icon name="arrow-dropleft"></ion-icon>
    </ion-fab-button>
  </ion-fab>

  <!-- fab placed to the top start -->
  <ion-fab vertical="top" horizontal="start" slot="fixed">
    <ion-fab-button>
-      <ion-icon name="arrow-back-circle"></ion-icon>
+      <ion-icon name="arrow-dropright"></ion-icon>
    </ion-fab-button>
  </ion-fab>

  <!-- fab placed to the bottom start -->
  <ion-fab vertical="bottom" horizontal="start" slot="fixed">
    <ion-fab-button>
-      <ion-icon name="arrow-up-circle"></ion-icon>
+      <ion-icon name="arrow-dropup"></ion-icon>
    </ion-fab-button>
  </ion-fab>

--- a/core/src/components/fab/usage/react.md
+++ b/core/src/components/fab/usage/react.md
@@ -14,21 +14,21 @@ export const FabExample: React.FC = () => (
    {/*-- fab placed to the bottom end --*/}
    <IonFab vertical="bottom" horizontal="end" slot="fixed">
      <IonFabButton>
-        <IonIcon name="arrow-forward-circle" />
+        <IonIcon name="arrow-dropleft" />
      </IonFabButton>
    </IonFab>

    {/*-- fab placed to the top start --*/}
    <IonFab vertical="top" horizontal="start" slot="fixed">
      <IonFabButton>
-        <IonIcon name="arrow-back-circle" />
+        <IonIcon name="arrow-dropright" />
      </IonFabButton>
    </IonFab>

    {/*-- fab placed to the bottom start --*/}
    <IonFab vertical="bottom" horizontal="start" slot="fixed">
      <IonFabButton>
-        <IonIcon name="arrow-up-circle" />
+        <IonIcon name="arrow-dropup" />
      </IonFabButton>
    </IonFab>

--- a/core/src/components/fab/usage/vue.md
+++ b/core/src/components/fab/usage/vue.md
@@ -11,21 +11,21 @@
    <!-- fab placed to the bottom end -->
    <ion-fab vertical="bottom" horizontal="end" slot="fixed">
      <ion-fab-button>
-        <ion-icon name="arrow-forward-circle"></ion-icon>
+        <ion-icon name="arrow-dropleft"></ion-icon>
      </ion-fab-button>
    </ion-fab>

    <!-- fab placed to the top start -->
    <ion-fab vertical="top" horizontal="start" slot="fixed">
      <ion-fab-button>
-        <ion-icon name="arrow-back-circle"></ion-icon>
+        <ion-icon name="arrow-dropright"></ion-icon>
      </ion-fab-button>
    </ion-fab>

    <!-- fab placed to the bottom start -->
    <ion-fab vertical="bottom" horizontal="start" slot="fixed">
      <ion-fab-button>
-        <ion-icon name="arrow-up-circle"></ion-icon>
+        <ion-icon name="arrow-dropup"></ion-icon>
      </ion-fab-button>
    </ion-fab>

--- a/core/src/components/header/header.tsx
+++ b/core/src/components/header/header.tsx
@@ -101,10 +101,7 @@ export class Header implements ComponentInterface {
    if (!mainHeaderIndex || !scrollHeaderIndex) { return; }

    setHeaderActive(mainHeaderIndex, false);
-
-    mainHeaderIndex.toolbars.forEach(toolbar => {
-      setToolbarBackgroundOpacity(toolbar, 0);
-    });
+    setToolbarBackgroundOpacity(mainHeaderIndex.toolbars[0], 0);

    readTask(() => {
        const mainHeaderHeight = mainHeaderIndex.el.clientHeight;
@@ -117,14 +114,14 @@ export class Header implements ComponentInterface {
         */
        const toolbarIntersection = (ev: any) => { handleToolbarIntersection(ev, mainHeaderIndex, scrollHeaderIndex); };
        this.intersectionObserver = new IntersectionObserver(toolbarIntersection, { threshold: [0.25, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1], rootMargin: `-${mainHeaderHeight}px 0px 0px 0px` });
-        this.intersectionObserver.observe(scrollHeaderIndex.toolbars[scrollHeaderIndex.toolbars.length - 1].el);
+        this.intersectionObserver.observe(scrollHeaderIndex.toolbars[0].el);

      /**
       * Handle scaling of large iOS titles and
       * showing/hiding border on last toolbar
       * in primary header
       */
-        this.contentScrollCallback = () => { handleContentScroll(this.scrollEl!, scrollHeaderIndex, contentEl); };
+        this.contentScrollCallback = () => { handleContentScroll(this.scrollEl!, scrollHeaderIndex); };
        this.scrollEl!.addEventListener('scroll', this.contentScrollCallback);
    });

--- a/core/src/components/header/header.utils.ts
+++ b/core/src/components/header/header.utils.ts
@@ -49,18 +49,14 @@ export const createHeaderIndex = (headerEl: HTMLElement | undefined): HeaderInde
  } as HeaderIndex;
 };

-export const handleContentScroll = (scrollEl: HTMLElement, scrollHeaderIndex: HeaderIndex, contentEl: HTMLElement) => {
+export const handleContentScroll = (scrollEl: HTMLElement, scrollHeaderIndex: HeaderIndex) => {
  readTask(() => {
    const scrollTop = scrollEl.scrollTop;
    const scale = clamp(1, 1 + (-scrollTop / 500), 1.1);

-    // Native refresher should not cause titles to scale
-    const nativeRefresher = contentEl.querySelector('ion-refresher.refresher-native');
-    if (nativeRefresher === null) {
-      writeTask(() => {
-        scaleLargeTitles(scrollHeaderIndex.toolbars, scale);
-      });
-    }
+    writeTask(() => {
+      scaleLargeTitles(scrollHeaderIndex.toolbars, scale);
+    });
  });
 };

@@ -76,10 +72,7 @@ const handleToolbarBorderIntersection = (ev: any, mainHeaderIndex: HeaderIndex)
  if (!ev[0].isIntersecting) { return; }

  const scale = ((1 - ev[0].intersectionRatio) * 100) / 75;
-
-  mainHeaderIndex.toolbars.forEach(toolbar => {
-    setToolbarBackgroundOpacity(toolbar, (scale === 1) ? undefined : scale);
-  });
+  setToolbarBackgroundOpacity(mainHeaderIndex.toolbars[0], (scale === 1) ? undefined : scale);
 };

 /**
--- a/core/src/components/icon/readme.md
+++ b/core/src/components/icon/readme.md
@@ -4,15 +4,9 @@

 Icons can be used on their own as a standalone component, or inside of another component.

-By default, Ionicons will use the same icon for each platform (iOS or Material Design). In previous versions of Ionicons, icons would automatically update based on the platform. As of Ionicons 5.0, apps will have to handle this on a per-icon basis, if needed.
+Ionicons provide platform continuity out of the box in Ionic by rendering a different icon based on the device the app is running on. For example, by setting the icon `name` to `alarm` the icon will automatically use the `ios-alarm` on an iOS device, and the `md-alarm` for any device running Material Design. This allows the developer to write the markup once while Ionic handles displaying the appropriate icon based on the mode.

-To use different icons depending on platform, set the `ios` and `md` properties or attributes. In the example below, when the app has the `ios` mode applied, it'll show the `logo-apple` icon. When using `md`, it'll show the `logo-android` icon.
-
-```
-<ion-icon ios="logo-apple" md="logo-android"></ion-icon>
-```
-
-For a full list of available icons and more usage explanations, please check out the [Ionicons documentation](https://ionicons.com/).
+For a full list of available icons and more usage explanations, check out the [Ionicons documentation](https://ionicons.com/).

 <!-- Auto Generated Below -->

--- a/core/src/components/icon/test/basic/index.html
+++ b/core/src/components/icon/test/basic/index.html
@@ -50,19 +50,55 @@
        </ion-item>

        <ion-item>
-          <ion-icon name="STAR" slot="end"></ion-icon>
+          <ion-icon name="md-home" slot="start"></ion-icon>
          <ion-label>
            <code>
-              name="STAR"
+              name="md-home"
            </code>
          </ion-label>
        </ion-item>

        <ion-item>
-          <ion-icon icon="home" color="primary" slot="start"></ion-icon>
+          <ion-icon name="ios-home" slot="start"></ion-icon>
          <ion-label>
            <code>
-              icon="home"
+              name="ios-home"
+            </code>
+          </ion-label>
+        </ion-item>
+
+        <ion-item>
+          <ion-icon name="ios-home" slot="end"></ion-icon>
+          <ion-label>
+            <code>
+              name="ios-home"
+            </code>
+          </ion-label>
+        </ion-item>
+
+        <ion-item>
+          <ion-icon name="ios-star-outline" slot="start"></ion-icon>
+          <ion-label>
+            <code>
+              name="ios-star-outline"
+            </code>
+          </ion-label>
+        </ion-item>
+
+        <ion-item>
+          <ion-icon name="IOS-STAR-OUTLINE" slot="end"></ion-icon>
+          <ion-label>
+            <code>
+              name="IOS-STAR-OUTLINE"
+            </code>
+          </ion-label>
+        </ion-item>
+
+        <ion-item>
+          <ion-icon name="md-home" color="primary" slot="start"></ion-icon>
+          <ion-label>
+            <code>
+              name="md-home"
            </code>
          </ion-label>
        </ion-item>
@@ -94,6 +130,24 @@
          </ion-label>
        </ion-item>

+        <ion-item>
+          <ion-icon ios="ios-color-filter" md="md-color-filter" slot="start"></ion-icon>
+          <ion-label>
+            <code>
+              ios="ios-color-filter" md="md-color-filter"
+            </code>
+          </ion-label>
+        </ion-item>
+
+        <ion-item>
+          <ion-icon ios="MD-COLOR-FILTER" md="IOS-COLOR-FILTER" slot="start"></ion-icon>
+          <ion-label>
+            <code>
+              ios="MD-COLOR-FILTER" md="IOS-COLOR-FILTER"
+            </code>
+          </ion-label>
+        </ion-item>
+
        <ion-item>
          <ion-icon slot="start"></ion-icon>
          <ion-label>
--- a/core/src/components/icon/test/dir/index.html
+++ b/core/src/components/icon/test/dir/index.html
@@ -51,17 +51,25 @@
      <ion-grid>
        <ion-row class="ion-align-items-center">
          <ion-col size="auto"><code>null</code></ion-col>
+          <ion-col><ion-icon name="arrow-dropright"></ion-icon></ion-col>
+          <ion-col><ion-icon name="arrow-dropright-circle"></ion-icon></ion-col>
          <ion-col><ion-icon name="arrow-forward"></ion-icon></ion-col>
-          <ion-col><ion-icon name="arrow-forward-circle"></ion-icon></ion-col>
+          <ion-col><ion-icon name="arrow-round-forward"></ion-icon></ion-col>
+          <ion-col><ion-icon name="arrow-dropleft"></ion-icon></ion-col>
+          <ion-col><ion-icon name="arrow-dropleft-circle"></ion-icon></ion-col>
          <ion-col><ion-icon name="arrow-back"></ion-icon></ion-col>
-          <ion-col><ion-icon name="arrow-back-circle"></ion-icon></ion-col>
+          <ion-col><ion-icon name="arrow-round-back"></ion-icon></ion-col>
        </ion-row>
        <ion-row class="ion-align-items-center">
          <ion-col size="auto"><code>false</code></ion-col>
+          <ion-col><ion-icon name="arrow-dropright" flip-rtl="false"></ion-icon></ion-col>
+          <ion-col><ion-icon name="arrow-dropright-circle" flip-rtl="false"></ion-icon></ion-col>
          <ion-col><ion-icon name="arrow-forward" flip-rtl="false"></ion-icon></ion-col>
-          <ion-col><ion-icon name="arrow-forward-circle" flip-rtl="false"></ion-icon></ion-col>
+          <ion-col><ion-icon name="arrow-round-forward" flip-rtl="false"></ion-icon></ion-col>
+          <ion-col><ion-icon name="arrow-dropleft" flip-rtl="false"></ion-icon></ion-col>
+          <ion-col><ion-icon name="arrow-dropleft-circle" flip-rtl="false"></ion-icon></ion-col>
          <ion-col><ion-icon name="arrow-back" flip-rtl="false"></ion-icon></ion-col>
-          <ion-col><ion-icon name="arrow-back-circle" flip-rtl="false"></ion-icon></ion-col>
+          <ion-col><ion-icon name="arrow-round-back" flip-rtl="false"></ion-icon></ion-col>
        </ion-row>
      </ion-grid>

--- a/core/src/components/icon/test/items/index.html
+++ b/core/src/components/icon/test/items/index.html
@@ -56,16 +56,30 @@
        </ion-item>

        <ion-item>
-          <ion-icon name="home" is-active="true" slot="start"></ion-icon>
+          <ion-icon name="md-home" is-active="true" slot="start"></ion-icon>
          <code>
-            name="home" is-active="true"
+            name="md-home" is-active="true"
          </code>
        </ion-item>

        <ion-item>
-          <ion-icon name="home" color="primary" slot="start"></ion-icon>
+          <ion-icon name="ios-home" is-active="true" slot="start"></ion-icon>
          <code>
-            name="home"
+            name="ios-home" is-active="true"
+          </code>
+        </ion-item>
+
+        <ion-item>
+          <ion-icon name="ios-home" slot="start"></ion-icon>
+          <code>
+            name="ios-home"
+          </code>
+        </ion-item>
+
+        <ion-item>
+          <ion-icon name="md-home" color="primary" slot="start"></ion-icon>
+          <code>
+            name="md-home"
          </code>
        </ion-item>

@@ -82,11 +96,18 @@
            ios="logo-apple" md="logo-android"
          </code>
        </ion-item>
-        
+
        <ion-item>
-          <ion-icon ios="logo-apple" md="logo-android" slot="start" id-active="false"></ion-icon>
+          <ion-icon ios="md-color-filter" md="ios-color-filter" slot="start"></ion-icon>
          <code>
-            ios="logo-apple" md="logo-android" is-active="false"
+            ios="md-color-filter" md="ios-color-filter"
+          </code>
+        </ion-item>
+
+        <ion-item>
+          <ion-icon ios="md-color-filter" md="ios-color-filter" is-active="false" slot="start"></ion-icon>
+          <code>
+            ios="md-color-filter" md="ios-color-filter" is-active="false"
          </code>
        </ion-item>

--- a/core/src/components/icon/test/standalone/index.html
+++ b/core/src/components/icon/test/standalone/index.html
@@ -20,12 +20,12 @@
  <ion-icon name="happy" color="warning"></ion-icon>
  <ion-icon name="people"></ion-icon>
  <ion-icon name="person" color="tertiary"></ion-icon>
-  <ion-icon name="person-circle"></ion-icon>
+  <ion-icon name="contact"></ion-icon>

  <ion-icon name="apps"></ion-icon>
-  <ion-icon name="lock-closed"></ion-icon>
+  <ion-icon name="lock"></ion-icon>
  <ion-icon name="key" color="success"></ion-icon>
-  <ion-icon name="lock-open"></ion-icon>
+  <ion-icon name="unlock"></ion-icon>

  <ion-icon name="map" color="secondary"></ion-icon>
  <ion-icon name="navigate"></ion-icon>
@@ -35,6 +35,7 @@
  <ion-icon name="mic"></ion-icon>
  <ion-icon name="musical-notes" color="warning"></ion-icon>
  <ion-icon name="volume-high"></ion-icon>
+  <ion-icon name="microphone" color="tertiary"></ion-icon>

  <ion-icon name="cafe" color="success"></ion-icon>
  <ion-icon name="calculator"></ion-icon>
@@ -46,9 +47,9 @@
  <ion-icon name="star" color="success"></ion-icon>
  <ion-icon name="pin"></ion-icon>

-  <ion-icon name="arrow-up-circle" color="warning"></ion-icon>
+  <ion-icon name="arrow-dropup-circle" color="warning"></ion-icon>
  <ion-icon name="arrow-back"></ion-icon>
-  <ion-icon name="arrow-down-circle"></ion-icon>
+  <ion-icon name="arrow-dropdown"></ion-icon>
  <ion-icon name="arrow-forward"></ion-icon>

  <ion-icon name="cloud"></ion-icon>
--- a/core/src/components/icon/usage/angular.md
+++ b/core/src/components/icon/usage/angular.md
@@ -1,9 +1,13 @@
 ```html
-<!-- uses "star" icon for both modes -->
+<!-- automatically uses the correct "star" icon depending on the mode -->
 <ion-icon name="star"></ion-icon>

 <!-- explicitly set the icon for each mode -->
-<ion-icon ios="home" md="star"></ion-icon>
+<ion-icon ios="ios-home" md="md-home"></ion-icon>
+
+<!-- always use the same icon, no matter what the mode is -->
+<ion-icon name="ios-clock"></ion-icon>
+<ion-icon name="logo-twitter"></ion-icon>

 <!-- use a custom svg icon -->
 <ion-icon src="/path/to/external/file.svg"></ion-icon>
--- a/core/src/components/icon/usage/javascript.md
+++ b/core/src/components/icon/usage/javascript.md
@@ -1,9 +1,13 @@
 ```html
-<!-- uses "star" icon for both modes -->
+<!-- automatically uses the correct "star" icon depending on the mode -->
 <ion-icon name="star"></ion-icon>

 <!-- explicitly set the icon for each mode -->
-<ion-icon ios="home" md="star"></ion-icon>
+<ion-icon ios="ios-home" md="md-home"></ion-icon>
+
+<!-- always use the same icon, no matter what the mode is -->
+<ion-icon name="ios-clock"></ion-icon>
+<ion-icon name="logo-twitter"></ion-icon>

 <!-- use a custom svg icon -->
 <ion-icon src="/path/to/external/file.svg"></ion-icon>
--- a/core/src/components/icon/usage/react.md
+++ b/core/src/components/icon/usage/react.md
@@ -5,18 +5,22 @@ import { IonIcon } from '@ionic/react';

 const Example: React.FC<{}> = () => (
  <>
-    {/*-- uses "star" icon for both modes --*/}
-    <IonIcon name="star"/>
+    {/*-- automatically uses the correct "star" icon depending on the mode --*/}
+    <IonIcon name="star" />

    {/*-- explicitly set the icon for each mode --*/}
-    <IonIcon ios="home" md="star"/>
+    <IonIcon ios="ios-home" md="md-home" />
+
+    {/*-- always use the same icon, no matter what the mode is --*/}
+    <IonIcon name="ios-clock" />
+    <IonIcon name="logo-twitter" />

    {/*-- use a custom svg icon --*/}
-    <IonIcon src="/path/to/external/file.svg"/>
+    <IonIcon src="/path/to/external/file.svg" />

    {/*-- set the icon size --*/}
-    <IonIcon size="small" name="heart"/>
-    <IonIcon size="large" name="heart"/>
+    <IonIcon size="small" name="heart" />
+    <IonIcon size="large" name="heart" />
  </>
 );

--- a/core/src/components/icon/usage/vue.md
+++ b/core/src/components/icon/usage/vue.md
@@ -1,10 +1,14 @@
 ```html
 <template>
-  <!-- uses "star" icon for both modes -->
+  <!-- automatically uses the correct "star" icon depending on the mode -->
  <ion-icon name="star"></ion-icon>

  <!-- explicitly set the icon for each mode -->
-  <ion-icon ios="home" md="star"></ion-icon>
+  <ion-icon ios="ios-home" md="md-home"></ion-icon>
+
+  <!-- always use the same icon, no matter what the mode is -->
+  <ion-icon name="ios-clock"></ion-icon>
+  <ion-icon name="logo-twitter"></ion-icon>

  <!-- use a custom svg icon -->
  <ion-icon src="/path/to/external/file.svg"></ion-icon>
--- a/core/src/components/input/input.tsx
+++ b/core/src/components/input/input.tsx
@@ -181,7 +181,7 @@ export class Input implements ComponentInterface {
  }

  /**
-   * Emitted when a keyboard input occurred.
+   * Emitted when a keyboard input ocurred.
   */
  @Event() ionInput!: EventEmitter<KeyboardEvent>;

--- a/core/src/components/input/readme.md
+++ b/core/src/components/input/readme.md
@@ -243,12 +243,12 @@ export const InputExample: React.FC = () => (

 ## Events

-| Event       | Description                             | Type                                  |
-| ----------- | --------------------------------------- | ------------------------------------- |
-| `ionBlur`   | Emitted when the input loses focus.     | `CustomEvent<void>`                   |
-| `ionChange` | Emitted when the value has changed.     | `CustomEvent<InputChangeEventDetail>` |
-| `ionFocus`  | Emitted when the input has focus.       | `CustomEvent<void>`                   |
-| `ionInput`  | Emitted when a keyboard input occurred. | `CustomEvent<KeyboardEvent>`          |
+| Event       | Description                            | Type                                  |
+| ----------- | -------------------------------------- | ------------------------------------- |
+| `ionBlur`   | Emitted when the input loses focus.    | `CustomEvent<void>`                   |
+| `ionChange` | Emitted when the value has changed.    | `CustomEvent<InputChangeEventDetail>` |
+| `ionFocus`  | Emitted when the input has focus.      | `CustomEvent<void>`                   |
+| `ionInput`  | Emitted when a keyboard input ocurred. | `CustomEvent<KeyboardEvent>`          |


 ## Methods
--- a/core/src/components/item-sliding/readme.md
+++ b/core/src/components/item-sliding/readme.md
@@ -108,7 +108,7 @@ Options can be expanded to take up the full width of the item if you swipe past
    </ion-item>
    <ion-item-options>
      <ion-item-option color="primary">
-        <ion-icon slot="start" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
+        <ion-icon slot="start" name="more"></ion-icon>
        More
      </ion-item-option>
      <ion-item-option color="secondary">
@@ -127,7 +127,7 @@ Options can be expanded to take up the full width of the item if you swipe past
    </ion-item>
    <ion-item-options>
      <ion-item-option color="primary">
-        <ion-icon slot="end" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
+        <ion-icon slot="end" name="more"></ion-icon>
        More
      </ion-item-option>
      <ion-item-option color="secondary">
@@ -146,7 +146,7 @@ Options can be expanded to take up the full width of the item if you swipe past
    </ion-item>
    <ion-item-options>
      <ion-item-option color="primary">
-        <ion-icon slot="top" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
+        <ion-icon slot="top" name="more"></ion-icon>
        More
      </ion-item-option>
      <ion-item-option color="secondary">
@@ -165,7 +165,7 @@ Options can be expanded to take up the full width of the item if you swipe past
    </ion-item>
    <ion-item-options>
      <ion-item-option color="primary">
-        <ion-icon slot="bottom" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
+        <ion-icon slot="bottom" name="more"></ion-icon>
        More
      </ion-item-option>
      <ion-item-option color="secondary">
@@ -255,7 +255,7 @@ Options can be expanded to take up the full width of the item if you swipe past
    </ion-item>
    <ion-item-options>
      <ion-item-option color="primary">
-        <ion-icon slot="start" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
+        <ion-icon slot="start" name="more"></ion-icon>
        More
      </ion-item-option>
      <ion-item-option color="secondary">
@@ -274,7 +274,7 @@ Options can be expanded to take up the full width of the item if you swipe past
    </ion-item>
    <ion-item-options>
      <ion-item-option color="primary">
-        <ion-icon slot="end" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
+        <ion-icon slot="end" name="more"></ion-icon>
        More
      </ion-item-option>
      <ion-item-option color="secondary">
@@ -293,7 +293,7 @@ Options can be expanded to take up the full width of the item if you swipe past
    </ion-item>
    <ion-item-options>
      <ion-item-option color="primary">
-        <ion-icon slot="top" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
+        <ion-icon slot="top" name="more"></ion-icon>
        More
      </ion-item-option>
      <ion-item-option color="secondary">
@@ -312,7 +312,7 @@ Options can be expanded to take up the full width of the item if you swipe past
    </ion-item>
    <ion-item-options>
      <ion-item-option color="primary">
-        <ion-icon slot="bottom" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
+        <ion-icon slot="bottom" name="more"></ion-icon>
        More
      </ion-item-option>
      <ion-item-option color="secondary">
@@ -406,7 +406,7 @@ export const ItemSlidingExample: React.FC = () => (
    </IonItem>
    <IonItemOptions>
      <IonItemOption color="primary">
-        <IonIcon slot="start" ios="ellipsis-horizontal" md="ellipsis-vertical"></IonIcon>
+        <IonIcon slot="start" name="more"></IonIcon>
        More
      </IonItemOption>
      <IonItemOption color="secondary">
@@ -425,7 +425,7 @@ export const ItemSlidingExample: React.FC = () => (
    </IonItem>
    <IonItemOptions>
      <IonItemOption color="primary">
-        <IonIcon slot="end" ios="ellipsis-horizontal" md="ellipsis-vertical"></IonIcon>
+        <IonIcon slot="end" name="more"></IonIcon>
        More
      </IonItemOption>
      <IonItemOption color="secondary">
@@ -444,7 +444,7 @@ export const ItemSlidingExample: React.FC = () => (
    </IonItem>
    <IonItemOptions>
      <IonItemOption color="primary">
-        <IonIcon slot="top" ios="ellipsis-horizontal" md="ellipsis-vertical"></IonIcon>
+        <IonIcon slot="top" name="more"></IonIcon>
        More
      </IonItemOption>
      <IonItemOption color="secondary">
@@ -463,7 +463,7 @@ export const ItemSlidingExample: React.FC = () => (
    </IonItem>
    <IonItemOptions>
      <IonItemOption color="primary">
-        <IonIcon slot="bottom" ios="ellipsis-horizontal" md="ellipsis-vertical"></IonIcon>
+        <IonIcon slot="bottom" name="more"></IonIcon>
        More
      </IonItemOption>
      <IonItemOption color="secondary">
@@ -555,7 +555,7 @@ export const ItemSlidingExample: React.FC = () => (
      </ion-item>
      <ion-item-options>
        <ion-item-option color="primary">
-          <ion-icon slot="start" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
+          <ion-icon slot="start" name="more"></ion-icon>
          More
        </ion-item-option>
        <ion-item-option color="secondary">
@@ -574,7 +574,7 @@ export const ItemSlidingExample: React.FC = () => (
      </ion-item>
      <ion-item-options>
        <ion-item-option color="primary">
-          <ion-icon slot="end" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
+          <ion-icon slot="end" name="more"></ion-icon>
          More
        </ion-item-option>
        <ion-item-option color="secondary">
@@ -593,7 +593,7 @@ export const ItemSlidingExample: React.FC = () => (
      </ion-item>
      <ion-item-options>
        <ion-item-option color="primary">
-          <ion-icon slot="top" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
+          <ion-icon slot="top" name="more"></ion-icon>
          More
        </ion-item-option>
        <ion-item-option color="secondary">
@@ -612,7 +612,7 @@ export const ItemSlidingExample: React.FC = () => (
      </ion-item>
      <ion-item-options>
        <ion-item-option color="primary">
-          <ion-icon slot="bottom" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
+          <ion-icon slot="bottom" name="more"></ion-icon>
          More
        </ion-item-option>
        <ion-item-option color="secondary">
--- a/core/src/components/item-sliding/test/basic/index.html
+++ b/core/src/components/item-sliding/test/basic/index.html
@@ -62,7 +62,7 @@
            </ion-item>
            <ion-item-options class="show-options">
              <ion-item-option color="primary">
-                <ion-icon slot="start" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
+                <ion-icon slot="start" name="more"></ion-icon>
                <span class="more-text"></span>
              </ion-item-option>
              <ion-item-option color="secondary" onclick="archive('item6')">
@@ -80,12 +80,12 @@
            </ion-item>
            <ion-item-options side="start">
              <ion-item-option color="primary">
-                <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
+                <ion-icon slot="icon-only" name="more"></ion-icon>
              </ion-item-option>
            </ion-item-options>
            <ion-item-options side="end" class="show-options">
              <ion-item-option color="primary">
-                <ion-icon slot="start" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
+                <ion-icon slot="start" name="more"></ion-icon>
                <span class="more-text"></span>
              </ion-item-option>
              <ion-item-option color="secondary" onclick="archive('item6')">
@@ -183,7 +183,7 @@
            </ion-item>
            <ion-item-options side="start" class="sliding-enabled">
              <ion-item-option color="secondary" expandable onclick="unread('item2')">
-                <ion-icon slot="start" name="checkmark"></ion-icon>
+                <ion-icon slot="start" name="ios-checkmark"></ion-icon>
                Unread
              </ion-item-option>
            </ion-item-options>
@@ -209,7 +209,7 @@
            </ion-item>
            <ion-item-options side="start" icon-start class="sliding-enabled">
              <ion-item-option color="secondary" expandable onclick="unread('item3')">
-                <ion-icon slot="start" name="checkmark"></ion-icon>
+                <ion-icon slot="start" name="ios-checkmark"></ion-icon>
                Unread
              </ion-item-option>
            </ion-item-options>
@@ -254,7 +254,7 @@
            </ion-item>
            <ion-item-options>
              <ion-item-option color="primary" expandable>
-                <ion-icon slot="start" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
+                <ion-icon slot="start" name="more"></ion-icon>
                More
              </ion-item-option>
              <ion-item-option color="secondary" onclick="archive('item5')">
@@ -277,7 +277,7 @@
            </ion-item>
            <ion-item-options icon-start>
              <ion-item-option color="primary">
-                <ion-icon slot="start" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
+                <ion-icon slot="start" name="more"></ion-icon>
                <span class="more-text"></span>
              </ion-item-option>
              <ion-item-option color="secondary" onclick="archive('item7')">
@@ -332,19 +332,19 @@
            </ion-item>
            <ion-item-options side="start" class="sliding-enabled">
              <ion-item-option color="primary" expandable>
-                <ion-icon slot="start" name="checkmark"></ion-icon>
+                <ion-icon slot="start" name="ios-checkmark"></ion-icon>
                Btn 1
              </ion-item-option>
              <ion-item-option color="secondary" expandable>
-                <ion-icon slot="start" name="checkmark"></ion-icon>
+                <ion-icon slot="start" name="ios-checkmark"></ion-icon>
                Btn 2
              </ion-item-option>
              <ion-item-option color="danger" expandable>
-                <ion-icon slot="start" name="checkmark"></ion-icon>
+                <ion-icon slot="start" name="ios-checkmark"></ion-icon>
                Btn 3
              </ion-item-option>
              <ion-item-option color="tertiary" expandable>
-                <ion-icon slot="start" name="checkmark"></ion-icon>
+                <ion-icon slot="start" name="ios-checkmark"></ion-icon>
                Btn 4
              </ion-item-option>
            </ion-item-options>
--- a/core/src/components/item-sliding/test/lines/index.html
+++ b/core/src/components/item-sliding/test/lines/index.html
@@ -22,38 +22,22 @@

    <ion-content>
      <ion-list>
-        <ion-list-header>
-          <ion-label>
-            Default List
-          </ion-label>
-        </ion-list-header>
+        <ion-list-header>Default List</ion-list-header>
        <!-- Sliding items are generated below -->
      </ion-list>

      <ion-list lines="full">
-        <ion-list-header>
-          <ion-label>
-            Full List
-          </ion-label>
-        </ion-list-header>
+        <ion-list-header>Full List</ion-list-header>
        <!-- Sliding items are generated below -->
      </ion-list>

      <ion-list lines="inset">
-        <ion-list-header>
-          <ion-label>
-            Inset List
-          </ion-label>
-        </ion-list-header>
+        <ion-list-header>Inset List</ion-list-header>
        <!-- Sliding items are generated below -->
      </ion-list>

      <ion-list lines="none">
-        <ion-list-header>
-          <ion-label>
-            No Lines List
-          </ion-label>
-        </ion-list-header>
+        <ion-list-header>No Lines List</ion-list-header>
        <!-- Sliding items are generated below -->
      </ion-list>
    </ion-content>
@@ -80,7 +64,7 @@
          </ion-item>
          <ion-item-options side="start">
            <ion-item-option color="secondary" expandable>
-              <ion-icon name="checkmark"></ion-icon>
+              <ion-icon name="ios-checkmark"></ion-icon>
              Unread
            </ion-item-option>
          </ion-item-options>
--- a/core/src/components/item-sliding/test/standalone/index.html
+++ b/core/src/components/item-sliding/test/standalone/index.html
@@ -86,7 +86,7 @@
    </ion-item>
    <ion-item-options>
      <ion-item-option color="primary">
-        <ion-icon slot="start" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
+        <ion-icon slot="start" name="more"></ion-icon>
        More
      </ion-item-option>
      <ion-item-option color="secondary">
@@ -105,7 +105,7 @@
    </ion-item>
    <ion-item-options>
      <ion-item-option color="primary">
-        <ion-icon slot="end" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
+        <ion-icon slot="end" name="more"></ion-icon>
        More
      </ion-item-option>
      <ion-item-option color="secondary">
@@ -124,7 +124,7 @@
    </ion-item>
    <ion-item-options>
      <ion-item-option color="primary">
-        <ion-icon slot="top" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
+        <ion-icon slot="top" name="more"></ion-icon>
        More
      </ion-item-option>
      <ion-item-option color="secondary">
@@ -143,7 +143,7 @@
    </ion-item>
    <ion-item-options>
      <ion-item-option color="primary">
-        <ion-icon slot="bottom" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
+        <ion-icon slot="bottom" name="more"></ion-icon>
        More
      </ion-item-option>
      <ion-item-option color="secondary">
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Liam DeBeasi	926b119231	remove old lines	2019-11-18 15:03:42 -05:00
Liam DeBeasi	256c7de469	only fire pressUp if press was fired; allow overriding of other gesture params	2019-11-18 15:02:38 -05:00
Liam DeBeasi	b7b5b94cce	add angular integration	2019-11-12 11:39:21 -05:00
Liam DeBeasi	5e1e883585	sync with master	2019-11-12 11:33:42 -05:00
Liam DeBeasi	ad747b05f1	add press up handler	2019-11-07 15:20:49 -05:00
Liam DeBeasi	3b52074a10	fix typo	2019-11-07 15:17:26 -05:00
Liam DeBeasi	9eac7266a0	Fix	2019-11-07 15:04:18 -05:00
Liam DeBeasi	12a4c974b4	add press recognizer	2019-11-07 15:03:05 -05:00