diff --git a/.scripts/common.js b/.scripts/common.js
index 86a64be7671..09832ddaddc 100644
--- a/.scripts/common.js
+++ b/.scripts/common.js
@@ -21,7 +21,7 @@ function readPkg(project) {
 function writePkg(project, pkg) {
   const packageJsonPath = packagePath(project);
   const text = JSON.stringify(pkg, null, 2);
-  return fs.writeFileSync(packageJsonPath, text);
+  return fs.writeFileSync(packageJsonPath, `${text}\n`);
 }
 
 function packagePath(project) {
@@ -133,6 +133,113 @@ function preparePackage(tasks, package, version) {
 }
 
 
+function prepareDevPackage(tasks, package, version) {
+  const projectRoot = projectPath(package);
+  const pkg = readPkg(package);
+
+  const projectTasks = [];
+
+  if (package !== 'docs') {
+    if (package !== 'core') {
+      projectTasks.push({
+        title: `${pkg.name}: npm link @ionic/core`,
+        task: () => execa('npm', ['link', '@ionic/core'], { cwd: projectRoot })
+      });
+    }
+
+    projectTasks.push({
+      title: `${pkg.name}: update ionic/core dep to ${version}`,
+      task: () => {
+        updateDependency(pkg, "@ionic/core", version);
+        writePkg(package, pkg);
+      }
+    });
+
+    projectTasks.push({
+      title: `${pkg.name}: build`,
+      task: () => execa('npm', ['run', 'build'], { cwd: projectRoot })
+    });
+
+    if (package === 'core') {
+      projectTasks.push({
+        title: `${pkg.name}: npm link`,
+        task: () => execa('npm', ['link'], { cwd: projectRoot })
+      });
+    }
+  }
+
+  // Add project tasks
+  tasks.push({
+    title: `Prepare dev build: ${tc.bold(pkg.name)}`,
+    task: () => new Listr(projectTasks)
+  });
+}
+
+function updatePackageVersions(tasks, packages, version) {
+  packages.forEach(package => {
+    updatePackageVersion(tasks, package, version);
+
+    tasks.push(
+      {
+        title: `${package} update @ionic/core dependency, if present ${tc.dim(`(${version})`)}`,
+        task: async () => {
+          if (package !== 'core') {
+            const pkg = readPkg(package);
+            updateDependency(pkg, '@ionic/core', version);
+            writePkg(package, pkg);
+          }
+        },
+      }
+    )
+  });
+}
+
+
+function updatePackageVersion(tasks, package, version) {
+  const projectRoot = projectPath(package);
+
+  tasks.push(
+    {
+      title: `${package}: update package.json ${tc.dim(`(${version})`)}`,
+      task: async () => {
+        await execa('npm', ['version', version], { cwd: projectRoot });
+      }
+    }
+  );
+}
+
+function publishPackages(tasks, packages, version, tag = 'latest') {
+  // first verify version
+  packages.forEach(package => {
+    if (package === 'core') {
+      return;
+    }
+
+    tasks.push({
+      title: `${package}: check version (must match: ${version})`,
+      task: () => {
+        const pkg = readPkg(package);
+
+        if (version !== pkg.version) {
+          throw new Error(`${pkg.name} version ${pkg.version} must match ${version}`);
+        }
+      }
+    });
+  });
+
+  // next publish
+  packages.forEach(package => {
+    const projectRoot = projectPath(package);
+
+    tasks.push({
+      title: `${package}: publish to ${tag} tag`,
+      task: async () => {
+        await execa('npm', ['publish', '--tag', tag], { cwd: projectRoot });
+      },
+    });
+  });
+}
+
 function updateDependency(pkg, dependency, version) {
   if (pkg.dependencies && pkg.dependencies[dependency]) {
     pkg.dependencies[dependency] = version;
@@ -151,13 +258,19 @@ function isVersionGreater(oldVersion, newVersion) {
 
 
 module.exports = {
+  checkGit,
   isValidVersion,
   isVersionGreater,
+  packages,
+  packagePath,
+  prepareDevPackage,
+  preparePackage,
+  projectPath,
+  publishPackages,
   readPkg,
-  writePkg,
   rootDir,
-  projectPath,
-  checkGit,
-  packages,
-  preparePackage
+  updateDependency,
+  updatePackageVersion,
+  updatePackageVersions,
+  writePkg,
 };
diff --git a/.scripts/prepare.js b/.scripts/prepare.js
index 32adac9b8fd..6111b1e4248 100644
--- a/.scripts/prepare.js
+++ b/.scripts/prepare.js
@@ -6,7 +6,6 @@ const tc = require('turbocolor');
 const execa = require('execa');
 const inquirer = require('inquirer');
 const Listr = require('listr');
-const fs = require('fs-extra');
 const semver = require('semver');
 const common = require('./common');
 const path = require('path');
@@ -108,7 +107,7 @@ async function preparePackages(packages, version) {
 
   // add update package.json of each project
   packages.forEach(package => {
-    updatePackageVersion(tasks, package, version);
+    common.updatePackageVersion(tasks, package, version);
   });
 
   // generate changelog
@@ -155,20 +154,6 @@ function validateGit(tasks, version) {
   );
 }
 
-function updatePackageVersion(tasks, package, version) {
-  const projectRoot = common.projectPath(package);
-  const pkg = common.readPkg(package);
-
-  tasks.push(
-    {
-      title: `${pkg.name}: update package.json ${tc.dim(`(${version})`)}`,
-      task: async () => {
-        await execa('npm', ['version', version], { cwd: projectRoot });
-      }
-    }
-  );
-}
-
 
 function generateChangeLog(tasks) {
   tasks.push({
diff --git a/.scripts/release-dev.js b/.scripts/release-dev.js
new file mode 100644
index 00000000000..12960e0d7c2
--- /dev/null
+++ b/.scripts/release-dev.js
@@ -0,0 +1,102 @@
+const tc = require('turbocolor');
+const semver = require('semver');
+const execa = require('execa');
+const inquirer = require('inquirer');
+const Listr = require('listr');
+const fs = require('fs-extra');
+
+const common = require('./common');
+
+const DIST_TAG = 'dev';
+
+async function main() {
+  const { packages } = common;
+
+  const orgPkg = packages.map(package => {
+    const packageJsonPath = common.packagePath(package);
+    return {
+      filePath: packageJsonPath,
+      packageContent: fs.readFileSync(packageJsonPath, 'utf-8')
+    }
+  });
+
+  try {
+    const originalVersion = common.readPkg('core').version;
+    const devVersion = await getDevVersion(originalVersion);
+
+    const confirm = await askDevVersion(devVersion);
+    if (!confirm) {
+      console.log(``);
+      return;
+    }
+
+    const tasks = [];
+
+    await setPackageVersionChanges(packages, devVersion);
+
+    packages.forEach(package => {
+      common.prepareDevPackage(tasks, package, devVersion);
+    });
+    common.publishPackages(tasks, packages, devVersion, DIST_TAG);
+
+    const listr = new Listr(tasks);
+    await listr.run();
+
+    console.log(`\nionic ${devVersion} published!! 🎉\n`);
+
+  } catch (err) {
+    console.log('\n', tc.red(err), '\n');
+    process.exit(1);
+  }
+
+  orgPkg.forEach(pkg => {
+    fs.writeFileSync(pkg.filePath, pkg.packageContent);
+  });
+}
+
+async function askDevVersion(devVersion) {
+
+  const prompts = [
+    {
+      type: 'confirm',
+      name: 'confirm',
+      value: true,
+      message: () => {
+        return `Publish the dev build ${tc.cyan(devVersion)}?`;
+      }
+    }
+  ];
+
+  const { confirm } = await inquirer.prompt(prompts);
+  return confirm;
+}
+
+async function setPackageVersionChanges(packages, version) {
+  await Promise.all(packages.map(async package => {
+    if (package !== 'core') {
+      const pkg = common.readPkg(package);
+      common.updateDependency(pkg, '@ionic/core', version);
+      common.writePkg(package, pkg);
+    }
+    const projectRoot = common.projectPath(package);
+    await execa('npm', ['version', version], { cwd: projectRoot });
+  }));
+}
+
+async function getDevVersion(originalVersion) {
+  const { stdout: sha } = await execa('git', ['log', '-1', '--format=%H']);
+  const shortSha = sha.substring(0, 7);
+  const baseVersion = semver.inc(originalVersion, 'minor');
+
+  const d = new Date();
+
+  let timestamp = (d.getUTCFullYear() + '');
+  timestamp += ('0' + (d.getUTCMonth() + 1)).slice(-2);
+  timestamp += ('0' + d.getUTCDate()).slice(-2);
+  timestamp += ('0' + d.getUTCHours()).slice(-2);
+  timestamp += ('0' + d.getUTCMinutes()).slice(-2);
+
+  return `${baseVersion}-${DIST_TAG}.${timestamp}.${shortSha}`;
+}
+
+main();
diff --git a/.scripts/release.js b/.scripts/release.js
index dd750aa6f1e..a67c752492e 100644
--- a/.scripts/release.js
+++ b/.scripts/release.js
@@ -24,7 +24,7 @@ async function main() {
     common.checkGit(tasks);
 
     // publish each package in NPM
-    publishPackages(tasks, common.packages, version);
+    common.publishPackages(tasks, common.packages, version);
 
     // push tag to git remote
     publishGit(tasks, version, changelog);
@@ -40,36 +40,6 @@ async function main() {
 }
 
 
-async function publishPackages(tasks, packages, version) {
-  // first verify version
-  packages.forEach(package => {
-    if (package === 'core') {
-      return;
-    }
-
-    const pkg = common.readPkg(package);
-    tasks.push({
-      title: `${pkg.name}: check version (must match: ${version})`,
-      task: () => {
-        if (version !== pkg.version) {
-          throw new Error(`${pkg.name} version ${pkg.version} must match ${version}`);
-        }
-      }
-    });
-  });
-
-  // next publish
-  packages.forEach(package => {
-    const pkg = common.readPkg(package);
-    const projectRoot = common.projectPath(package);
-
-    tasks.push({
-      title: `${pkg.name}: publish ${pkg.version}`,
-      task: () => execa('npm', ['publish', '--tag', 'latest'], { cwd: projectRoot })
-    });
-  });
-}
-
 function publishGit(tasks, version, changelog) {
   const tag = `v${version}`;
 
diff --git a/angular/BREAKING.md b/angular/BREAKING.md
index 11c207bc899..647ac23cbc0 100644
--- a/angular/BREAKING.md
+++ b/angular/BREAKING.md
@@ -787,7 +787,7 @@ Previously an `ion-label` would automatically get added to an `ion-list-header`
 
 ## Loading
 
-`dismissOnPageChange` was removed. Fortunatelly all the navigation API is promise based and there are global events  (`ionNavWillChange`) you can listen in order to detect when navigation occurs.
+`dismissOnPageChange` was removed. Fortunately all the navigation API is promise based and there are global events  (`ionNavWillChange`) you can listen in order to detect when navigation occurs.
 
 You should take advantage of these APIs in order to dismiss your loading overlay explicitally.
 
@@ -1155,7 +1155,7 @@ The `enabled` property (with a default value of `true`) has been renamed to `dis
 
 ## Scroll
 
-`ion-scroll` has been removed, fortunatelly `ion-content` can work as a drop-in replacement:
+`ion-scroll` has been removed, fortunately `ion-content` can work as a drop-in replacement:
 
 ```diff
 - <ion-scroll scrollX="true">
diff --git a/angular/src/directives/navigation/ion-back-button.ts b/angular/src/directives/navigation/ion-back-button.ts
index b10fd6ef240..1ab072056a1 100644
--- a/angular/src/directives/navigation/ion-back-button.ts
+++ b/angular/src/directives/navigation/ion-back-button.ts
@@ -1,4 +1,4 @@
-import { Directive, ElementRef, HostListener, Optional } from '@angular/core';
+import { Directive, HostListener, Optional } from '@angular/core';
 
 import { NavController } from '../../providers/nav-controller';
 
@@ -10,19 +10,16 @@ import { IonRouterOutlet } from './ion-router-outlet';
 })
 export class IonBackButtonDelegate {
 
-  set defaultHref(value: string | undefined | null) {
-    this.elementRef.nativeElement.defaultHref = value;
-  }
-  get defaultHref(): string | undefined | null {
-    return this.elementRef.nativeElement.defaultHref;
-  }
+  defaultHref: string | undefined | null;
 
   constructor(
     @Optional() private routerOutlet: IonRouterOutlet,
-    private navCtrl: NavController,
-    private elementRef: ElementRef,
+    private navCtrl: NavController
   ) {}
 
+  /**
+   * @internal
+   */
   @HostListener('click', ['$event'])
   onClick(ev: Event) {
     if (this.routerOutlet && this.routerOutlet.canGoBack()) {
diff --git a/angular/src/directives/navigation/ion-tabs.ts b/angular/src/directives/navigation/ion-tabs.ts
index 99d3372fcdf..0e6e603716b 100644
--- a/angular/src/directives/navigation/ion-tabs.ts
+++ b/angular/src/directives/navigation/ion-tabs.ts
@@ -49,6 +49,9 @@ export class IonTabs {
     private navCtrl: NavController,
   ) {}
 
+  /**
+   * @internal
+   */
   @HostListener('ionRouterOutletActivated', ['$event.detail'])
   onPageSelected(detail: {view: RouteView}) {
     if (this.tabBar) {
@@ -58,9 +61,9 @@ export class IonTabs {
 
   @HostListener('ionTabButtonClick', ['$event.detail.tab'])
   select(tab: string) {
-    const selected = this.outlet.getActiveStackId() === tab;
+    const alreadySelected = this.outlet.getActiveStackId() === tab;
     const href = `${this.outlet.tabsPrefix}/${tab}`;
-    const url = selected
+    const url = alreadySelected
       ? href
       : this.outlet.getLastUrl(tab) || href;
 
@@ -69,4 +72,8 @@ export class IonTabs {
       animationDirection: 'back'
     });
   }
+
+  getSelected(): string | undefined {
+    return this.outlet.getActiveStackId();
+  }
 }
diff --git a/angular/src/directives/navigation/router-link-delegate.ts b/angular/src/directives/navigation/router-link-delegate.ts
index 632202441d7..b3c73c7bb79 100644
--- a/angular/src/directives/navigation/router-link-delegate.ts
+++ b/angular/src/directives/navigation/router-link-delegate.ts
@@ -45,6 +45,9 @@ export class RouterLinkDelegate {
     }
   }
 
+  /**
+   * @internal
+   */
   @HostListener('click', ['$event'])
   onClick(ev: UIEvent) {
     this.navCtrl.setDirection(this.routerDirection);
diff --git a/angular/src/directives/proxies.ts b/angular/src/directives/proxies.ts
index 6fff4598a90..f7c23a9a8ea 100644
--- a/angular/src/directives/proxies.ts
+++ b/angular/src/directives/proxies.ts
@@ -8,7 +8,7 @@ type StencilComponents<T extends keyof StencilElementInterfaces> = StencilElemen
 export declare interface IonApp extends StencilComponents<'IonApp'> {}
 @Component({ selector: 'ion-app', changeDetection: 0, template: '<ng-content></ng-content>' })
 export class IonApp {
-  el: HTMLElement;
+  protected el: HTMLElement;
   constructor(c: ChangeDetectorRef, r: ElementRef) {
     c.detach();
     this.el = r.nativeElement;
@@ -18,7 +18,7 @@ export class IonApp {
 export declare interface IonAvatar extends StencilComponents<'IonAvatar'> {}
 @Component({ selector: 'ion-avatar', changeDetection: 0, template: '<ng-content></ng-content>' })
 export class IonAvatar {
-  el: HTMLElement;
+  protected el: HTMLElement;
   constructor(c: ChangeDetectorRef, r: ElementRef) {
     c.detach();
     this.el = r.nativeElement;
@@ -28,7 +28,7 @@ export class IonAvatar {
 export declare interface IonBackButton extends StencilComponents<'IonBackButton'> {}
 @Component({ selector: 'ion-back-button', changeDetection: 0, template: '<ng-content></ng-content>', inputs: ['color', 'mode', 'defaultHref', 'icon', 'text'] })
 export class IonBackButton {
-  el: HTMLElement;
+  protected el: HTMLElement;
   constructor(c: ChangeDetectorRef, r: ElementRef) {
     c.detach();
     this.el = r.nativeElement;
@@ -40,7 +40,7 @@ export declare interface IonBackdrop extends StencilComponents<'IonBackdrop'> {}
 @Component({ selector: 'ion-backdrop', changeDetection: 0, template: '<ng-content></ng-content>', inputs: ['visible', 'tappable', 'stopPropagation'] })
 export class IonBackdrop {
   ionBackdropTap!: EventEmitter<CustomEvent>;
-  el: HTMLElement;
+  protected el: HTMLElement;
   constructor(c: ChangeDetectorRef, r: ElementRef) {
     c.detach();
     this.el = r.nativeElement;
@@ -52,7 +52,7 @@ proxyInputs(IonBackdrop, ['visible', 'tappable', 'stopPropagation']);
 export declare interface IonBadge extends StencilComponents<'IonBadge'> {}
 @Component({ selector: 'ion-badge', changeDetection: 0, template: '<ng-content></ng-content>', inputs: ['color', 'mode'] })
 export class IonBadge {
-  el: HTMLElement;
+  protected el: HTMLElement;
   constructor(c: ChangeDetectorRef, r: ElementRef) {
     c.detach();
     this.el = r.nativeElement;
@@ -65,7 +65,7 @@ export declare interface IonButton extends StencilComponents<'IonButton'> {}
 export class IonButton {
   ionFocus!: EventEmitter<CustomEvent>;
   ionBlur!: EventEmitter<CustomEvent>;
-  el: HTMLElement;
+  protected el: HTMLElement;
   constructor(c: ChangeDetectorRef, r: ElementRef) {
     c.detach();
     this.el = r.nativeElement;
@@ -77,7 +77,7 @@ proxyInputs(IonButton, ['color', 'mode', 'buttonType', 'disabled', 'expand', 'fi
 export declare interface IonButtons extends StencilComponents<'IonButtons'> {}
 @Component({ selector: 'ion-buttons', changeDetection: 0, template: '<ng-content></ng-content>' })
 export class IonButtons {
-  el: HTMLElement;
+  protected el: HTMLElement;
   constructor(c: ChangeDetectorRef, r: ElementRef) {
     c.detach();
     this.el = r.nativeElement;
@@ -87,7 +87,7 @@ export class IonButtons {
 export declare interface IonCard extends StencilComponents<'IonCard'> {}
 @Component({ selector: 'ion-card', changeDetection: 0, template: '<ng-content></ng-content>', inputs: ['color', 'mode'] })
 export class IonCard {
-  el: HTMLElement;
+  protected el: HTMLElement;
   constructor(c: ChangeDetectorRef, r: ElementRef) {
     c.detach();
     this.el = r.nativeElement;
@@ -98,7 +98,7 @@ proxyInputs(IonCard, ['color', 'mode']);
 export declare interface IonCardContent extends StencilComponents<'IonCardContent'> {}
 @Component({ selector: 'ion-card-content', changeDetection: 0, template: '<ng-content></ng-content>', inputs: ['mode'] })
 export class IonCardContent {
-  el: HTMLElement;
+  protected el: HTMLElement;
   constructor(c: ChangeDetectorRef, r: ElementRef) {
     c.detach();
     this.el = r.nativeElement;
@@ -109,7 +109,7 @@ proxyInputs(IonCardContent, ['mode']);
 export declare interface IonCardHeader extends StencilComponents<'IonCardHeader'> {}
 @Component({ selector: 'ion-card-header', changeDetection: 0, template: '<ng-content></ng-content>', inputs: ['color', 'mode', 'translucent'] })
 export class IonCardHeader {
-  el: HTMLElement;
+  protected el: HTMLElement;
   constructor(c: ChangeDetectorRef, r: ElementRef) {
     c.detach();
     this.el = r.nativeElement;
@@ -120,7 +120,7 @@ proxyInputs(IonCardHeader, ['color', 'mode', 'translucent']);
 export declare interface IonCardSubtitle extends StencilComponents<'IonCardSubtitle'> {}
 @Component({ selector: 'ion-card-subtitle', changeDetection: 0, template: '<ng-content></ng-content>', inputs: ['color', 'mode'] })
 export class IonCardSubtitle {
-  el: HTMLElement;
+  protected el: HTMLElement;
   constructor(c: ChangeDetectorRef, r: ElementRef) {
     c.detach();
     this.el = r.nativeElement;
@@ -131,7 +131,7 @@ proxyInputs(IonCardSubtitle, ['color', 'mode']);
 export declare interface IonCardTitle extends StencilComponents<'IonCardTitle'> {}
 @Component({ selector: 'ion-card-title', changeDetection: 0, template: '<ng-content></ng-content>', inputs: ['color', 'mode'] })
 export class IonCardTitle {
-  el: HTMLElement;
+  protected el: HTMLElement;
   constructor(c: ChangeDetectorRef, r: ElementRef) {
     c.detach();
     this.el = r.nativeElement;
@@ -145,7 +145,7 @@ export class IonCheckbox {
   ionChange!: EventEmitter<CustomEvent>;
   ionFocus!: EventEmitter<CustomEvent>;
   ionBlur!: EventEmitter<CustomEvent>;
-  el: HTMLElement;
+  protected el: HTMLElement;
   constructor(c: ChangeDetectorRef, r: ElementRef) {
     c.detach();
     this.el = r.nativeElement;
@@ -157,7 +157,7 @@ proxyInputs(IonCheckbox, ['color', 'mode', 'name', 'checked', 'disabled', 'value
 export declare interface IonChip extends StencilComponents<'IonChip'> {}
 @Component({ selector: 'ion-chip', changeDetection: 0, template: '<ng-content></ng-content>', inputs: ['color', 'mode', 'outline'] })
 export class IonChip {
-  el: HTMLElement;
+  protected el: HTMLElement;
   constructor(c: ChangeDetectorRef, r: ElementRef) {
     c.detach();
     this.el = r.nativeElement;
@@ -168,7 +168,7 @@ proxyInputs(IonChip, ['color', 'mode', 'outline']);
 export declare interface IonCol extends StencilComponents<'IonCol'> {}
 @Component({ selector: 'ion-col', changeDetection: 0, template: '<ng-content></ng-content>', inputs: ['offset', 'offsetXs', 'offsetSm', 'offsetMd', 'offsetLg', 'offsetXl', 'pull', 'pullXs', 'pullSm', 'pullMd', 'pullLg', 'pullXl', 'push', 'pushXs', 'pushSm', 'pushMd', 'pushLg', 'pushXl', 'size', 'sizeXs', 'sizeSm', 'sizeMd', 'sizeLg', 'sizeXl'] })
 export class IonCol {
-  el: HTMLElement;
+  protected el: HTMLElement;
   constructor(c: ChangeDetectorRef, r: ElementRef) {
     c.detach();
     this.el = r.nativeElement;
@@ -182,7 +182,7 @@ export class IonContent {
   ionScrollStart!: EventEmitter<CustomEvent>;
   ionScroll!: EventEmitter<CustomEvent>;
   ionScrollEnd!: EventEmitter<CustomEvent>;
-  el: HTMLElement;
+  protected el: HTMLElement;
   constructor(c: ChangeDetectorRef, r: ElementRef) {
     c.detach();
     this.el = r.nativeElement;
@@ -199,7 +199,7 @@ export class IonDatetime {
   ionChange!: EventEmitter<CustomEvent>;
   ionFocus!: EventEmitter<CustomEvent>;
   ionBlur!: EventEmitter<CustomEvent>;
-  el: HTMLElement;
+  protected el: HTMLElement;
   constructor(c: ChangeDetectorRef, r: ElementRef) {
     c.detach();
     this.el = r.nativeElement;
@@ -212,7 +212,7 @@ proxyInputs(IonDatetime, ['mode', 'name', 'disabled', 'min', 'max', 'displayForm
 export declare interface IonFab extends StencilComponents<'IonFab'> {}
 @Component({ selector: 'ion-fab', changeDetection: 0, template: '<ng-content></ng-content>', inputs: ['horizontal', 'vertical', 'edge', 'activated'] })
 export class IonFab {
-  el: HTMLElement;
+  protected el: HTMLElement;
   constructor(c: ChangeDetectorRef, r: ElementRef) {
     c.detach();
     this.el = r.nativeElement;
@@ -226,7 +226,7 @@ export declare interface IonFabButton extends StencilComponents<'IonFabButton'>
 export class IonFabButton {
   ionFocus!: EventEmitter<CustomEvent>;
   ionBlur!: EventEmitter<CustomEvent>;
-  el: HTMLElement;
+  protected el: HTMLElement;
   constructor(c: ChangeDetectorRef, r: ElementRef) {
     c.detach();
     this.el = r.nativeElement;
@@ -238,7 +238,7 @@ proxyInputs(IonFabButton, ['mode', 'color', 'activated', 'disabled', 'href', 'ro
 export declare interface IonFabList extends StencilComponents<'IonFabList'> {}
 @Component({ selector: 'ion-fab-list', changeDetection: 0, template: '<ng-content></ng-content>', inputs: ['activated', 'side'] })
 export class IonFabList {
-  el: HTMLElement;
+  protected el: HTMLElement;
   constructor(c: ChangeDetectorRef, r: ElementRef) {
     c.detach();
     this.el = r.nativeElement;
@@ -249,7 +249,7 @@ proxyInputs(IonFabList, ['activated', 'side']);
 export declare interface IonFooter extends StencilComponents<'IonFooter'> {}
 @Component({ selector: 'ion-footer', changeDetection: 0, template: '<ng-content></ng-content>', inputs: ['mode', 'translucent'] })
 export class IonFooter {
-  el: HTMLElement;
+  protected el: HTMLElement;
   constructor(c: ChangeDetectorRef, r: ElementRef) {
     c.detach();
     this.el = r.nativeElement;
@@ -260,7 +260,7 @@ proxyInputs(IonFooter, ['mode', 'translucent']);
 export declare interface IonGrid extends StencilComponents<'IonGrid'> {}
 @Component({ selector: 'ion-grid', changeDetection: 0, template: '<ng-content></ng-content>', inputs: ['fixed'] })
 export class IonGrid {
-  el: HTMLElement;
+  protected el: HTMLElement;
   constructor(c: ChangeDetectorRef, r: ElementRef) {
     c.detach();
     this.el = r.nativeElement;
@@ -271,7 +271,7 @@ proxyInputs(IonGrid, ['fixed']);
 export declare interface IonHeader extends StencilComponents<'IonHeader'> {}
 @Component({ selector: 'ion-header', changeDetection: 0, template: '<ng-content></ng-content>', inputs: ['mode', 'translucent'] })
 export class IonHeader {
-  el: HTMLElement;
+  protected el: HTMLElement;
   constructor(c: ChangeDetectorRef, r: ElementRef) {
     c.detach();
     this.el = r.nativeElement;
@@ -282,7 +282,7 @@ proxyInputs(IonHeader, ['mode', 'translucent']);
 export declare interface IonIcon extends StencilComponents<'IonIcon'> {}
 @Component({ selector: 'ion-icon', changeDetection: 0, template: '<ng-content></ng-content>', inputs: ['ariaLabel', 'color', 'icon', 'ios', 'lazy', 'md', 'mode', 'name', 'size', 'src'] })
 export class IonIcon {
-  el: HTMLElement;
+  protected el: HTMLElement;
   constructor(c: ChangeDetectorRef, r: ElementRef) {
     c.detach();
     this.el = r.nativeElement;
@@ -294,7 +294,7 @@ export declare interface IonImg extends StencilComponents<'IonImg'> {}
 @Component({ selector: 'ion-img', changeDetection: 0, template: '<ng-content></ng-content>', inputs: ['alt', 'src'] })
 export class IonImg {
   ionImgDidLoad!: EventEmitter<CustomEvent>;
-  el: HTMLElement;
+  protected el: HTMLElement;
   constructor(c: ChangeDetectorRef, r: ElementRef) {
     c.detach();
     this.el = r.nativeElement;
@@ -307,7 +307,7 @@ export declare interface IonInfiniteScroll extends StencilComponents<'IonInfinit
 @Component({ selector: 'ion-infinite-scroll', changeDetection: 0, template: '<ng-content></ng-content>', inputs: ['threshold', 'disabled', 'position'] })
 export class IonInfiniteScroll {
   ionInfinite!: EventEmitter<CustomEvent>;
-  el: HTMLElement;
+  protected el: HTMLElement;
   constructor(c: ChangeDetectorRef, r: ElementRef) {
     c.detach();
     this.el = r.nativeElement;
@@ -320,7 +320,7 @@ proxyInputs(IonInfiniteScroll, ['threshold', 'disabled', 'position']);
 export declare interface IonInfiniteScrollContent extends StencilComponents<'IonInfiniteScrollContent'> {}
 @Component({ selector: 'ion-infinite-scroll-content', changeDetection: 0, template: '<ng-content></ng-content>', inputs: ['loadingSpinner', 'loadingText'] })
 export class IonInfiniteScrollContent {
-  el: HTMLElement;
+  protected el: HTMLElement;
   constructor(c: ChangeDetectorRef, r: ElementRef) {
     c.detach();
     this.el = r.nativeElement;
@@ -335,7 +335,7 @@ export class IonInput {
   ionChange!: EventEmitter<CustomEvent>;
   ionBlur!: EventEmitter<CustomEvent>;
   ionFocus!: EventEmitter<CustomEvent>;
-  el: HTMLElement;
+  protected el: HTMLElement;
   constructor(c: ChangeDetectorRef, r: ElementRef) {
     c.detach();
     this.el = r.nativeElement;
@@ -348,7 +348,7 @@ proxyInputs(IonInput, ['color', 'mode', 'accept', 'autocapitalize', 'autocomplet
 export declare interface IonItem extends StencilComponents<'IonItem'> {}
 @Component({ selector: 'ion-item', changeDetection: 0, template: '<ng-content></ng-content>', inputs: ['color', 'mode', 'button', 'detail', 'detailIcon', 'disabled', 'href', 'lines', 'routerDirection', 'type'] })
 export class IonItem {
-  el: HTMLElement;
+  protected el: HTMLElement;
   constructor(c: ChangeDetectorRef, r: ElementRef) {
     c.detach();
     this.el = r.nativeElement;
@@ -359,7 +359,7 @@ proxyInputs(IonItem, ['color', 'mode', 'button', 'detail', 'detailIcon', 'disabl
 export declare interface IonItemDivider extends StencilComponents<'IonItemDivider'> {}
 @Component({ selector: 'ion-item-divider', changeDetection: 0, template: '<ng-content></ng-content>', inputs: ['color', 'mode', 'sticky'] })
 export class IonItemDivider {
-  el: HTMLElement;
+  protected el: HTMLElement;
   constructor(c: ChangeDetectorRef, r: ElementRef) {
     c.detach();
     this.el = r.nativeElement;
@@ -370,7 +370,7 @@ proxyInputs(IonItemDivider, ['color', 'mode', 'sticky']);
 export declare interface IonItemGroup extends StencilComponents<'IonItemGroup'> {}
 @Component({ selector: 'ion-item-group', changeDetection: 0, template: '<ng-content></ng-content>' })
 export class IonItemGroup {
-  el: HTMLElement;
+  protected el: HTMLElement;
   constructor(c: ChangeDetectorRef, r: ElementRef) {
     c.detach();
     this.el = r.nativeElement;
@@ -380,7 +380,7 @@ export class IonItemGroup {
 export declare interface IonItemOption extends StencilComponents<'IonItemOption'> {}
 @Component({ selector: 'ion-item-option', changeDetection: 0, template: '<ng-content></ng-content>', inputs: ['color', 'mode', 'disabled', 'expandable', 'href'] })
 export class IonItemOption {
-  el: HTMLElement;
+  protected el: HTMLElement;
   constructor(c: ChangeDetectorRef, r: ElementRef) {
     c.detach();
     this.el = r.nativeElement;
@@ -392,7 +392,7 @@ export declare interface IonItemOptions extends StencilComponents<'IonItemOption
 @Component({ selector: 'ion-item-options', changeDetection: 0, template: '<ng-content></ng-content>', inputs: ['side'] })
 export class IonItemOptions {
   ionSwipe!: EventEmitter<CustomEvent>;
-  el: HTMLElement;
+  protected el: HTMLElement;
   constructor(c: ChangeDetectorRef, r: ElementRef) {
     c.detach();
     this.el = r.nativeElement;
@@ -405,7 +405,7 @@ export declare interface IonItemSliding extends StencilComponents<'IonItemSlidin
 @Component({ selector: 'ion-item-sliding', changeDetection: 0, template: '<ng-content></ng-content>', inputs: ['disabled'] })
 export class IonItemSliding {
   ionDrag!: EventEmitter<CustomEvent>;
-  el: HTMLElement;
+  protected el: HTMLElement;
   constructor(c: ChangeDetectorRef, r: ElementRef) {
     c.detach();
     this.el = r.nativeElement;
@@ -418,7 +418,7 @@ proxyInputs(IonItemSliding, ['disabled']);
 export declare interface IonLabel extends StencilComponents<'IonLabel'> {}
 @Component({ selector: 'ion-label', changeDetection: 0, template: '<ng-content></ng-content>', inputs: ['color', 'mode', 'position'] })
 export class IonLabel {
-  el: HTMLElement;
+  protected el: HTMLElement;
   constructor(c: ChangeDetectorRef, r: ElementRef) {
     c.detach();
     this.el = r.nativeElement;
@@ -429,7 +429,7 @@ proxyInputs(IonLabel, ['color', 'mode', 'position']);
 export declare interface IonList extends StencilComponents<'IonList'> {}
 @Component({ selector: 'ion-list', changeDetection: 0, template: '<ng-content></ng-content>', inputs: ['mode', 'lines', 'inset'] })
 export class IonList {
-  el: HTMLElement;
+  protected el: HTMLElement;
   constructor(c: ChangeDetectorRef, r: ElementRef) {
     c.detach();
     this.el = r.nativeElement;
@@ -441,7 +441,7 @@ proxyInputs(IonList, ['mode', 'lines', 'inset']);
 export declare interface IonListHeader extends StencilComponents<'IonListHeader'> {}
 @Component({ selector: 'ion-list-header', changeDetection: 0, template: '<ng-content></ng-content>', inputs: ['mode', 'color'] })
 export class IonListHeader {
-  el: HTMLElement;
+  protected el: HTMLElement;
   constructor(c: ChangeDetectorRef, r: ElementRef) {
     c.detach();
     this.el = r.nativeElement;
@@ -456,7 +456,7 @@ export class IonMenu {
   ionWillClose!: EventEmitter<CustomEvent>;
   ionDidOpen!: EventEmitter<CustomEvent>;
   ionDidClose!: EventEmitter<CustomEvent>;
-  el: HTMLElement;
+  protected el: HTMLElement;
   constructor(c: ChangeDetectorRef, r: ElementRef) {
     c.detach();
     this.el = r.nativeElement;
@@ -469,7 +469,7 @@ proxyInputs(IonMenu, ['contentId', 'menuId', 'type', 'disabled', 'side', 'swipeG
 export declare interface IonMenuButton extends StencilComponents<'IonMenuButton'> {}
 @Component({ selector: 'ion-menu-button', changeDetection: 0, template: '<ng-content></ng-content>', inputs: ['color', 'mode', 'menu', 'autoHide'] })
 export class IonMenuButton {
-  el: HTMLElement;
+  protected el: HTMLElement;
   constructor(c: ChangeDetectorRef, r: ElementRef) {
     c.detach();
     this.el = r.nativeElement;
@@ -480,7 +480,7 @@ proxyInputs(IonMenuButton, ['color', 'mode', 'menu', 'autoHide']);
 export declare interface IonMenuToggle extends StencilComponents<'IonMenuToggle'> {}
 @Component({ selector: 'ion-menu-toggle', changeDetection: 0, template: '<ng-content></ng-content>', inputs: ['menu', 'autoHide'] })
 export class IonMenuToggle {
-  el: HTMLElement;
+  protected el: HTMLElement;
   constructor(c: ChangeDetectorRef, r: ElementRef) {
     c.detach();
     this.el = r.nativeElement;
@@ -491,14 +491,13 @@ proxyInputs(IonMenuToggle, ['menu', 'autoHide']);
 export declare interface IonNav extends StencilComponents<'IonNav'> {}
 @Component({ selector: 'ion-nav', changeDetection: 0, template: '<ng-content></ng-content>', inputs: ['swipeGesture', 'animated', 'animation', 'rootParams', 'root'] })
 export class IonNav {
-  ionNavWillLoad!: EventEmitter<CustomEvent>;
   ionNavWillChange!: EventEmitter<CustomEvent>;
   ionNavDidChange!: EventEmitter<CustomEvent>;
-  el: HTMLElement;
+  protected el: HTMLElement;
   constructor(c: ChangeDetectorRef, r: ElementRef) {
     c.detach();
     this.el = r.nativeElement;
-    proxyOutputs(this, this.el, ['ionNavWillLoad', 'ionNavWillChange', 'ionNavDidChange']);
+    proxyOutputs(this, this.el, ['ionNavWillChange', 'ionNavDidChange']);
   }
 }
 proxyMethods(IonNav, ['push', 'insert', 'insertPages', 'pop', 'popTo', 'popToRoot', 'removeIndex', 'setRoot', 'setPages', 'getActive', 'getByIndex', 'canGoBack', 'getPrevious']);
@@ -507,7 +506,7 @@ proxyInputs(IonNav, ['swipeGesture', 'animated', 'animation', 'rootParams', 'roo
 export declare interface IonNavPop extends StencilComponents<'IonNavPop'> {}
 @Component({ selector: 'ion-nav-pop', changeDetection: 0, template: '<ng-content></ng-content>' })
 export class IonNavPop {
-  el: HTMLElement;
+  protected el: HTMLElement;
   constructor(c: ChangeDetectorRef, r: ElementRef) {
     c.detach();
     this.el = r.nativeElement;
@@ -517,7 +516,7 @@ export class IonNavPop {
 export declare interface IonNavPush extends StencilComponents<'IonNavPush'> {}
 @Component({ selector: 'ion-nav-push', changeDetection: 0, template: '<ng-content></ng-content>', inputs: ['component', 'componentProps'] })
 export class IonNavPush {
-  el: HTMLElement;
+  protected el: HTMLElement;
   constructor(c: ChangeDetectorRef, r: ElementRef) {
     c.detach();
     this.el = r.nativeElement;
@@ -528,7 +527,7 @@ proxyInputs(IonNavPush, ['component', 'componentProps']);
 export declare interface IonNavSetRoot extends StencilComponents<'IonNavSetRoot'> {}
 @Component({ selector: 'ion-nav-set-root', changeDetection: 0, template: '<ng-content></ng-content>', inputs: ['component', 'componentProps'] })
 export class IonNavSetRoot {
-  el: HTMLElement;
+  protected el: HTMLElement;
   constructor(c: ChangeDetectorRef, r: ElementRef) {
     c.detach();
     this.el = r.nativeElement;
@@ -539,7 +538,7 @@ proxyInputs(IonNavSetRoot, ['component', 'componentProps']);
 export declare interface IonNote extends StencilComponents<'IonNote'> {}
 @Component({ selector: 'ion-note', changeDetection: 0, template: '<ng-content></ng-content>', inputs: ['color', 'mode'] })
 export class IonNote {
-  el: HTMLElement;
+  protected el: HTMLElement;
   constructor(c: ChangeDetectorRef, r: ElementRef) {
     c.detach();
     this.el = r.nativeElement;
@@ -550,7 +549,7 @@ proxyInputs(IonNote, ['color', 'mode']);
 export declare interface IonProgressBar extends StencilComponents<'IonProgressBar'> {}
 @Component({ selector: 'ion-progress-bar', changeDetection: 0, template: '<ng-content></ng-content>', inputs: ['mode', 'type', 'reversed', 'value', 'buffer', 'color'] })
 export class IonProgressBar {
-  el: HTMLElement;
+  protected el: HTMLElement;
   constructor(c: ChangeDetectorRef, r: ElementRef) {
     c.detach();
     this.el = r.nativeElement;
@@ -564,7 +563,7 @@ export class IonRadio {
   ionSelect!: EventEmitter<CustomEvent>;
   ionFocus!: EventEmitter<CustomEvent>;
   ionBlur!: EventEmitter<CustomEvent>;
-  el: HTMLElement;
+  protected el: HTMLElement;
   constructor(c: ChangeDetectorRef, r: ElementRef) {
     c.detach();
     this.el = r.nativeElement;
@@ -577,7 +576,7 @@ export declare interface IonRadioGroup extends StencilComponents<'IonRadioGroup'
 @Component({ selector: 'ion-radio-group', changeDetection: 0, template: '<ng-content></ng-content>', inputs: ['allowEmptySelection', 'name', 'value'] })
 export class IonRadioGroup {
   ionChange!: EventEmitter<CustomEvent>;
-  el: HTMLElement;
+  protected el: HTMLElement;
   constructor(c: ChangeDetectorRef, r: ElementRef) {
     c.detach();
     this.el = r.nativeElement;
@@ -592,7 +591,7 @@ export class IonRange {
   ionChange!: EventEmitter<CustomEvent>;
   ionFocus!: EventEmitter<CustomEvent>;
   ionBlur!: EventEmitter<CustomEvent>;
-  el: HTMLElement;
+  protected el: HTMLElement;
   constructor(c: ChangeDetectorRef, r: ElementRef) {
     c.detach();
     this.el = r.nativeElement;
@@ -607,7 +606,7 @@ export class IonRefresher {
   ionRefresh!: EventEmitter<CustomEvent>;
   ionPull!: EventEmitter<CustomEvent>;
   ionStart!: EventEmitter<CustomEvent>;
-  el: HTMLElement;
+  protected el: HTMLElement;
   constructor(c: ChangeDetectorRef, r: ElementRef) {
     c.detach();
     this.el = r.nativeElement;
@@ -620,7 +619,7 @@ proxyInputs(IonRefresher, ['pullMin', 'pullMax', 'closeDuration', 'snapbackDurat
 export declare interface IonRefresherContent extends StencilComponents<'IonRefresherContent'> {}
 @Component({ selector: 'ion-refresher-content', changeDetection: 0, template: '<ng-content></ng-content>', inputs: ['pullingIcon', 'pullingText', 'refreshingSpinner', 'refreshingText'] })
 export class IonRefresherContent {
-  el: HTMLElement;
+  protected el: HTMLElement;
   constructor(c: ChangeDetectorRef, r: ElementRef) {
     c.detach();
     this.el = r.nativeElement;
@@ -631,7 +630,7 @@ proxyInputs(IonRefresherContent, ['pullingIcon', 'pullingText', 'refreshingSpinn
 export declare interface IonReorder extends StencilComponents<'IonReorder'> {}
 @Component({ selector: 'ion-reorder', changeDetection: 0, template: '<ng-content></ng-content>' })
 export class IonReorder {
-  el: HTMLElement;
+  protected el: HTMLElement;
   constructor(c: ChangeDetectorRef, r: ElementRef) {
     c.detach();
     this.el = r.nativeElement;
@@ -642,7 +641,7 @@ export declare interface IonReorderGroup extends StencilComponents<'IonReorderGr
 @Component({ selector: 'ion-reorder-group', changeDetection: 0, template: '<ng-content></ng-content>', inputs: ['disabled'] })
 export class IonReorderGroup {
   ionItemReorder!: EventEmitter<CustomEvent>;
-  el: HTMLElement;
+  protected el: HTMLElement;
   constructor(c: ChangeDetectorRef, r: ElementRef) {
     c.detach();
     this.el = r.nativeElement;
@@ -655,7 +654,7 @@ proxyInputs(IonReorderGroup, ['disabled']);
 export declare interface IonRippleEffect extends StencilComponents<'IonRippleEffect'> {}
 @Component({ selector: 'ion-ripple-effect', changeDetection: 0, template: '<ng-content></ng-content>', inputs: ['type'] })
 export class IonRippleEffect {
-  el: HTMLElement;
+  protected el: HTMLElement;
   constructor(c: ChangeDetectorRef, r: ElementRef) {
     c.detach();
     this.el = r.nativeElement;
@@ -667,7 +666,7 @@ proxyInputs(IonRippleEffect, ['type']);
 export declare interface IonRow extends StencilComponents<'IonRow'> {}
 @Component({ selector: 'ion-row', changeDetection: 0, template: '<ng-content></ng-content>' })
 export class IonRow {
-  el: HTMLElement;
+  protected el: HTMLElement;
   constructor(c: ChangeDetectorRef, r: ElementRef) {
     c.detach();
     this.el = r.nativeElement;
@@ -683,7 +682,7 @@ export class IonSearchbar {
   ionClear!: EventEmitter<CustomEvent>;
   ionBlur!: EventEmitter<CustomEvent>;
   ionFocus!: EventEmitter<CustomEvent>;
-  el: HTMLElement;
+  protected el: HTMLElement;
   constructor(c: ChangeDetectorRef, r: ElementRef) {
     c.detach();
     this.el = r.nativeElement;
@@ -698,7 +697,7 @@ export declare interface IonSegment extends StencilComponents<'IonSegment'> {}
 export class IonSegment {
   ionChange!: EventEmitter<CustomEvent>;
   ionStyle!: EventEmitter<CustomEvent>;
-  el: HTMLElement;
+  protected el: HTMLElement;
   constructor(c: ChangeDetectorRef, r: ElementRef) {
     c.detach();
     this.el = r.nativeElement;
@@ -711,7 +710,7 @@ export declare interface IonSegmentButton extends StencilComponents<'IonSegmentB
 @Component({ selector: 'ion-segment-button', changeDetection: 0, template: '<ng-content></ng-content>', inputs: ['mode', 'checked', 'disabled', 'layout', 'value'] })
 export class IonSegmentButton {
   ionSelect!: EventEmitter<CustomEvent>;
-  el: HTMLElement;
+  protected el: HTMLElement;
   constructor(c: ChangeDetectorRef, r: ElementRef) {
     c.detach();
     this.el = r.nativeElement;
@@ -727,7 +726,7 @@ export class IonSelect {
   ionCancel!: EventEmitter<CustomEvent>;
   ionFocus!: EventEmitter<CustomEvent>;
   ionBlur!: EventEmitter<CustomEvent>;
-  el: HTMLElement;
+  protected el: HTMLElement;
   constructor(c: ChangeDetectorRef, r: ElementRef) {
     c.detach();
     this.el = r.nativeElement;
@@ -740,7 +739,7 @@ proxyInputs(IonSelect, ['mode', 'disabled', 'cancelText', 'okText', 'placeholder
 export declare interface IonSelectOption extends StencilComponents<'IonSelectOption'> {}
 @Component({ selector: 'ion-select-option', changeDetection: 0, template: '<ng-content></ng-content>', inputs: ['disabled', 'selected', 'value'] })
 export class IonSelectOption {
-  el: HTMLElement;
+  protected el: HTMLElement;
   constructor(c: ChangeDetectorRef, r: ElementRef) {
     c.detach();
     this.el = r.nativeElement;
@@ -751,7 +750,7 @@ proxyInputs(IonSelectOption, ['disabled', 'selected', 'value']);
 export declare interface IonSkeletonText extends StencilComponents<'IonSkeletonText'> {}
 @Component({ selector: 'ion-skeleton-text', changeDetection: 0, template: '<ng-content></ng-content>', inputs: ['width'] })
 export class IonSkeletonText {
-  el: HTMLElement;
+  protected el: HTMLElement;
   constructor(c: ChangeDetectorRef, r: ElementRef) {
     c.detach();
     this.el = r.nativeElement;
@@ -762,7 +761,7 @@ proxyInputs(IonSkeletonText, ['width']);
 export declare interface IonSlide extends StencilComponents<'IonSlide'> {}
 @Component({ selector: 'ion-slide', changeDetection: 0, template: '<ng-content></ng-content>' })
 export class IonSlide {
-  el: HTMLElement;
+  protected el: HTMLElement;
   constructor(c: ChangeDetectorRef, r: ElementRef) {
     c.detach();
     this.el = r.nativeElement;
@@ -788,7 +787,7 @@ export class IonSlides {
   ionSlideReachEnd!: EventEmitter<CustomEvent>;
   ionSlideTouchStart!: EventEmitter<CustomEvent>;
   ionSlideTouchEnd!: EventEmitter<CustomEvent>;
-  el: HTMLElement;
+  protected el: HTMLElement;
   constructor(c: ChangeDetectorRef, r: ElementRef) {
     c.detach();
     this.el = r.nativeElement;
@@ -801,7 +800,7 @@ proxyInputs(IonSlides, ['mode', 'options', 'pager', 'scrollbar']);
 export declare interface IonSpinner extends StencilComponents<'IonSpinner'> {}
 @Component({ selector: 'ion-spinner', changeDetection: 0, template: '<ng-content></ng-content>', inputs: ['color', 'duration', 'name', 'paused'] })
 export class IonSpinner {
-  el: HTMLElement;
+  protected el: HTMLElement;
   constructor(c: ChangeDetectorRef, r: ElementRef) {
     c.detach();
     this.el = r.nativeElement;
@@ -812,13 +811,12 @@ proxyInputs(IonSpinner, ['color', 'duration', 'name', 'paused']);
 export declare interface IonSplitPane extends StencilComponents<'IonSplitPane'> {}
 @Component({ selector: 'ion-split-pane', changeDetection: 0, template: '<ng-content></ng-content>', inputs: ['contentId', 'disabled', 'when'] })
 export class IonSplitPane {
-  ionChange!: EventEmitter<CustomEvent>;
   ionSplitPaneVisible!: EventEmitter<CustomEvent>;
-  el: HTMLElement;
+  protected el: HTMLElement;
   constructor(c: ChangeDetectorRef, r: ElementRef) {
     c.detach();
     this.el = r.nativeElement;
-    proxyOutputs(this, this.el, ['ionChange', 'ionSplitPaneVisible']);
+    proxyOutputs(this, this.el, ['ionSplitPaneVisible']);
   }
 }
 proxyInputs(IonSplitPane, ['contentId', 'disabled', 'when']);
@@ -826,7 +824,7 @@ proxyInputs(IonSplitPane, ['contentId', 'disabled', 'when']);
 export declare interface IonTabBar extends StencilComponents<'IonTabBar'> {}
 @Component({ selector: 'ion-tab-bar', changeDetection: 0, template: '<ng-content></ng-content>', inputs: ['mode', 'color', 'selectedTab', 'translucent'] })
 export class IonTabBar {
-  el: HTMLElement;
+  protected el: HTMLElement;
   constructor(c: ChangeDetectorRef, r: ElementRef) {
     c.detach();
     this.el = r.nativeElement;
@@ -837,7 +835,7 @@ proxyInputs(IonTabBar, ['mode', 'color', 'selectedTab', 'translucent']);
 export declare interface IonTabButton extends StencilComponents<'IonTabButton'> {}
 @Component({ selector: 'ion-tab-button', changeDetection: 0, template: '<ng-content></ng-content>', inputs: ['selected', 'mode', 'layout', 'href', 'tab', 'disabled'] })
 export class IonTabButton {
-  el: HTMLElement;
+  protected el: HTMLElement;
   constructor(c: ChangeDetectorRef, r: ElementRef) {
     c.detach();
     this.el = r.nativeElement;
@@ -848,7 +846,7 @@ proxyInputs(IonTabButton, ['selected', 'mode', 'layout', 'href', 'tab', 'disable
 export declare interface IonText extends StencilComponents<'IonText'> {}
 @Component({ selector: 'ion-text', changeDetection: 0, template: '<ng-content></ng-content>', inputs: ['color', 'mode'] })
 export class IonText {
-  el: HTMLElement;
+  protected el: HTMLElement;
   constructor(c: ChangeDetectorRef, r: ElementRef) {
     c.detach();
     this.el = r.nativeElement;
@@ -863,7 +861,7 @@ export class IonTextarea {
   ionInput!: EventEmitter<CustomEvent>;
   ionBlur!: EventEmitter<CustomEvent>;
   ionFocus!: EventEmitter<CustomEvent>;
-  el: HTMLElement;
+  protected el: HTMLElement;
   constructor(c: ChangeDetectorRef, r: ElementRef) {
     c.detach();
     this.el = r.nativeElement;
@@ -876,7 +874,7 @@ proxyInputs(IonTextarea, ['mode', 'color', 'autocapitalize', 'autofocus', 'clear
 export declare interface IonThumbnail extends StencilComponents<'IonThumbnail'> {}
 @Component({ selector: 'ion-thumbnail', changeDetection: 0, template: '<ng-content></ng-content>' })
 export class IonThumbnail {
-  el: HTMLElement;
+  protected el: HTMLElement;
   constructor(c: ChangeDetectorRef, r: ElementRef) {
     c.detach();
     this.el = r.nativeElement;
@@ -886,7 +884,7 @@ export class IonThumbnail {
 export declare interface IonTitle extends StencilComponents<'IonTitle'> {}
 @Component({ selector: 'ion-title', changeDetection: 0, template: '<ng-content></ng-content>', inputs: ['color'] })
 export class IonTitle {
-  el: HTMLElement;
+  protected el: HTMLElement;
   constructor(c: ChangeDetectorRef, r: ElementRef) {
     c.detach();
     this.el = r.nativeElement;
@@ -900,7 +898,7 @@ export class IonToggle {
   ionChange!: EventEmitter<CustomEvent>;
   ionFocus!: EventEmitter<CustomEvent>;
   ionBlur!: EventEmitter<CustomEvent>;
-  el: HTMLElement;
+  protected el: HTMLElement;
   constructor(c: ChangeDetectorRef, r: ElementRef) {
     c.detach();
     this.el = r.nativeElement;
@@ -912,7 +910,7 @@ proxyInputs(IonToggle, ['mode', 'color', 'name', 'checked', 'disabled', 'value']
 export declare interface IonToolbar extends StencilComponents<'IonToolbar'> {}
 @Component({ selector: 'ion-toolbar', changeDetection: 0, template: '<ng-content></ng-content>', inputs: ['color', 'mode'] })
 export class IonToolbar {
-  el: HTMLElement;
+  protected el: HTMLElement;
   constructor(c: ChangeDetectorRef, r: ElementRef) {
     c.detach();
     this.el = r.nativeElement;
diff --git a/angular/src/providers/nav-controller.ts b/angular/src/providers/nav-controller.ts
index 570f7fc820c..fd8d6ea8f2a 100644
--- a/angular/src/providers/nav-controller.ts
+++ b/angular/src/providers/nav-controller.ts
@@ -44,19 +44,19 @@ export class NavController {
     platform.backButton.subscribeWithPriority(0, () => this.goBack());
   }
 
-  navigateForward(url: string | UrlTree | any[], options: NavigationOptions = {}) {
+  navigateForward(url: string | UrlTree | any[], options: NavigationOptions = {}): Promise<boolean> {
     this.setDirection('forward', options.animated, options.animationDirection);
-    this.navigate(url, options);
+    return this.navigate(url, options);
   }
 
-  navigateBack(url: string | UrlTree | any[], options: NavigationOptions = {}) {
+  navigateBack(url: string | UrlTree | any[], options: NavigationOptions = {}): Promise<boolean> {
     this.setDirection('back', options.animated, options.animationDirection);
-    this.navigate(url, options);
+    return this.navigate(url, options);
   }
 
-  navigateRoot(url: string | UrlTree | any[], options: NavigationOptions = {}) {
+  navigateRoot(url: string | UrlTree | any[], options: NavigationOptions = {}): Promise<boolean> {
     this.setDirection('root', options.animated, options.animationDirection);
-    this.navigate(url, options);
+    return this.navigate(url, options);
   }
 
   navigate(url: string | UrlTree | any[], options: NavigationOptions) {
diff --git a/angular/test/test-app/e2e/src/slides.e2e-spec.ts b/angular/test/test-app/e2e/src/slides.e2e-spec.ts
new file mode 100644
index 00000000000..b586870b01b
--- /dev/null
+++ b/angular/test/test-app/e2e/src/slides.e2e-spec.ts
@@ -0,0 +1,40 @@
+import { browser, element, by } from 'protractor';
+import { handleErrorMessages, waitTime } from './utils';
+
+describe('slides', () => {
+
+  beforeEach(async () => {
+    await browser.get('/slides');
+  });
+  afterEach(() => {
+    handleErrorMessages();
+  });
+
+  it('should change index on slide change', async () => {
+    await checkIndex('0');
+
+    await nextSlide();
+    await checkIndex('1');
+
+    await nextSlide();
+    await checkIndex('2');
+
+    await prevSlide();
+    await checkIndex('1');
+  });
+});
+
+async function checkIndex(index: string) {
+  expect(await element(by.css('#slide-index')).getText()).toEqual(index);
+  expect(await element(by.css('#slide-index-2')).getText()).toEqual(index);
+}
+
+async function nextSlide() {
+  await element(by.css('#btn-next')).click();
+  await waitTime(800);
+}
+
+async function prevSlide() {
+  await element(by.css('#btn-prev')).click();
+  await waitTime(800);
+}
\ No newline at end of file
diff --git a/angular/test/test-app/e2e/src/view-child.e2e-spec.ts b/angular/test/test-app/e2e/src/view-child.e2e-spec.ts
index 214e8f79126..a0472fc0c77 100644
--- a/angular/test/test-app/e2e/src/view-child.e2e-spec.ts
+++ b/angular/test/test-app/e2e/src/view-child.e2e-spec.ts
@@ -15,7 +15,7 @@ describe('view-child', () => {
     expect(await element(by.css('#color-button.ion-color-danger')).isPresent()).toBeTruthy();
 
     // tabs should be found
-    expect(await element(by.css('#tabs-result')).getText()).toEqual('tabs found');
+    expect(await element(by.css('#tabs-result')).getText()).toEqual('all found');
   });
 
 });
diff --git a/angular/test/test-app/scripts/sync.sh b/angular/test/test-app/scripts/sync.sh
index 67b907e8c51..413a1a63d1a 100644
--- a/angular/test/test-app/scripts/sync.sh
+++ b/angular/test/test-app/scripts/sync.sh
@@ -6,6 +6,7 @@ cp -a ../../package.json node_modules/@ionic/angular/package.json
 # Copy core dist
 rm -rf node_modules/@ionic/core/dist
 cp -a ../../../core/dist node_modules/@ionic/core/dist
+cp -a ../../../core/loader node_modules/@ionic/core/loader
 cp -a ../../../core/package.json node_modules/@ionic/core/package.json
 
 # Copy ionicons
diff --git a/angular/test/test-app/src/app/app-routing.module.ts b/angular/test/test-app/src/app/app-routing.module.ts
index e55c2ff9bd6..3e52216f662 100644
--- a/angular/test/test-app/src/app/app-routing.module.ts
+++ b/angular/test/test-app/src/app/app-routing.module.ts
@@ -16,6 +16,7 @@ import { NestedOutletPageComponent } from './nested-outlet-page/nested-outlet-pa
 import { NestedOutletPage2Component } from './nested-outlet-page2/nested-outlet-page2.component';
 import { ViewChildComponent } from './view-child/view-child.component';
 import { ProvidersComponent } from './providers/providers.component';
+import { SlidesComponent } from './slides/slides.component';
 
 const routes: Routes = [
   { path: '', component: HomePageComponent },
@@ -25,6 +26,7 @@ const routes: Routes = [
   { path: 'providers', component: ProvidersComponent },
   { path: 'router-link', component: RouterLinkComponent },
   { path: 'router-link-page', component: RouterLinkPageComponent },
+  { path: 'slides', component: SlidesComponent },
   { path: 'virtual-scroll', component: VirtualScrollComponent },
   { path: 'virtual-scroll-detail/:itemId', component: VirtualScrollDetailComponent },
   { path: 'tabs', redirectTo: '/tabs/account', pathMatch: 'full' },
diff --git a/angular/test/test-app/src/app/app.module.ts b/angular/test/test-app/src/app/app.module.ts
index 94c7723f92c..d831ecc8e68 100644
--- a/angular/test/test-app/src/app/app.module.ts
+++ b/angular/test/test-app/src/app/app.module.ts
@@ -24,6 +24,7 @@ import { NestedOutletPage2Component } from './nested-outlet-page2/nested-outlet-
 import { NavComponent } from './nav/nav.component';
 import { ViewChildComponent } from './view-child/view-child.component';
 import { ProvidersComponent } from './providers/providers.component';
+import { SlidesComponent } from './slides/slides.component';
 
 @NgModule({
   declarations: [
@@ -46,7 +47,8 @@ import { ProvidersComponent } from './providers/providers.component';
     NestedOutletPage2Component,
     NavComponent,
     ViewChildComponent,
-    ProvidersComponent
+    ProvidersComponent,
+    SlidesComponent
   ],
   imports: [
     BrowserModule,
diff --git a/angular/test/test-app/src/app/home-page/home-page.component.html b/angular/test/test-app/src/app/home-page/home-page.component.html
index 0f624416ddd..9d228c8ea8b 100644
--- a/angular/test/test-app/src/app/home-page/home-page.component.html
+++ b/angular/test/test-app/src/app/home-page/home-page.component.html
@@ -27,6 +27,11 @@
           Tabs test
         </ion-label>
       </ion-item>
+      <ion-item routerLink="/slides">
+        <ion-label>
+          Slides test
+        </ion-label>
+      </ion-item>
       <ion-item routerLink="/virtual-scroll">
         <ion-label>
           Virtual Scroll
diff --git a/angular/test/test-app/src/app/slides/slides.component.html b/angular/test/test-app/src/app/slides/slides.component.html
new file mode 100644
index 00000000000..2a2e81efc16
--- /dev/null
+++ b/angular/test/test-app/src/app/slides/slides.component.html
@@ -0,0 +1,35 @@
+<ion-header>
+  <ion-toolbar>
+    <ion-title>
+      Slides Test
+    </ion-title>
+  </ion-toolbar>
+</ion-header>
+<ion-content>
+  <ion-slides pager="true" (ionSlideDidChange)="checkIndex()">
+
+    <ion-slide>
+      <h1>Slide 1</h1>
+    </ion-slide>
+
+    <ion-slide>
+      <h1>Slide 2</h1>
+    </ion-slide>
+
+    <ion-slide>
+      <h1>Slide 3</h1>
+    </ion-slide>
+  </ion-slides>
+
+  <p>
+    index: <span id="slide-index">{{slideIndex}}</span>
+    index2: <span id="slide-index-2">{{slideIndex2}}</span>
+  </p>
+
+  <ion-button id="btn-prev" (click)="prevSlide()">
+    Prev Slide
+  </ion-button>
+  <ion-button id="btn-next" (click)="nextSlide()">
+    Next Slide
+  </ion-button>
+</ion-content>
\ No newline at end of file
diff --git a/angular/test/test-app/src/app/slides/slides.component.ts b/angular/test/test-app/src/app/slides/slides.component.ts
new file mode 100644
index 00000000000..1a13ebfedf0
--- /dev/null
+++ b/angular/test/test-app/src/app/slides/slides.component.ts
@@ -0,0 +1,34 @@
+import { Component, OnInit, ViewChild, AfterViewInit } from '@angular/core';
+import { IonSlides } from '@ionic/angular';
+
+@Component({
+  selector: 'app-slides',
+  templateUrl: './slides.component.html',
+})
+export class SlidesComponent implements AfterViewInit {
+  @ViewChild(IonSlides) slides: IonSlides;
+
+  slideIndex = 0;
+  slideIndex2 = 0;
+
+  constructor() { }
+
+  ngAfterViewInit() {
+    this.slides.ionSlideDidChange.subscribe(async () => {
+      this.slideIndex2 = await this.slides.getActiveIndex();
+    });
+  }
+
+  prevSlide() {
+    this.slides.slidePrev();
+  }
+
+  nextSlide() {
+    this.slides.slideNext();
+  }
+
+  async checkIndex() {
+    this.slideIndex = await this.slides.getActiveIndex();
+  }
+
+}
diff --git a/angular/test/test-app/src/app/view-child/view-child.component.html b/angular/test/test-app/src/app/view-child/view-child.component.html
index ee17a22f88b..bc34b1da815 100644
--- a/angular/test/test-app/src/app/view-child/view-child.component.html
+++ b/angular/test/test-app/src/app/view-child/view-child.component.html
@@ -6,8 +6,15 @@
   </ion-toolbar>
 </ion-header>
 <ion-content padding>
-  <ion-button id="color-button">Hello! it's a button</ion-button>
-  <div #div id="tabs-result"></div>
-  <ion-tabs>
-  </ion-tabs>
+  <ion-slides>
+    <ion-slide #slide>
+        <ion-button id="color-button">Hello! it's a button</ion-button>
+        <div #div id="tabs-result"></div>
+        <ion-tabs>
+        </ion-tabs>
+    </ion-slide>
+    <ion-slide>
+      <h1>Second slide</h1>
+    </ion-slide>
+  </ion-slides>
 </ion-content>
diff --git a/angular/test/test-app/src/app/view-child/view-child.component.ts b/angular/test/test-app/src/app/view-child/view-child.component.ts
index a938a3bf081..95783ff9307 100644
--- a/angular/test/test-app/src/app/view-child/view-child.component.ts
+++ b/angular/test/test-app/src/app/view-child/view-child.component.ts
@@ -1,5 +1,5 @@
 import { Component, ViewChild, AfterViewInit, ElementRef } from '@angular/core';
-import { IonTabs, IonButton } from '@ionic/angular';
+import { IonTabs, IonButton, IonSlides, IonSlide } from '@ionic/angular';
 
 @Component({
   selector: 'app-view-child',
@@ -7,14 +7,17 @@ import { IonTabs, IonButton } from '@ionic/angular';
 })
 export class ViewChildComponent implements AfterViewInit {
 
+  @ViewChild(IonSlides) slides: IonSlides;
   @ViewChild(IonButton) button: IonButton;
   @ViewChild(IonTabs) tabs: IonTabs;
   @ViewChild('div') div: ElementRef;
+  @ViewChild('slide') slide: IonSlide;
 
   ngAfterViewInit() {
+    const loaded = !!(this.slides && this.button && this.tabs && this.div && this.slide);
     this.button.color = 'danger';
-    if (this.tabs != null) {
-      this.div.nativeElement.textContent = 'tabs found';
+    if (loaded) {
+      this.div.nativeElement.textContent = 'all found';
     }
   }
 }
diff --git a/core/api.txt b/core/api.txt
index fccb88c3df7..04267b17a92 100644
--- a/core/api.txt
+++ b/core/api.txt
@@ -1,10 +1,10 @@
 
-ion-action-sheet-controller
+ion-action-sheet-controller,none
 ion-action-sheet-controller,method,create,create(opts: ActionSheetOptions) => Promise<HTMLIonActionSheetElement>
 ion-action-sheet-controller,method,dismiss,dismiss(data?: any, role?: string | undefined, id?: string | undefined) => Promise<boolean>
 ion-action-sheet-controller,method,getTop,getTop() => Promise<HTMLIonActionSheetElement | undefined>
 
-ion-action-sheet
+ion-action-sheet,scoped
 ion-action-sheet,prop,animated,boolean,true,false,false
 ion-action-sheet,prop,backdropDismiss,boolean,true,false,false
 ion-action-sheet,prop,buttons,(string | ActionSheetButton)[],undefined,true,false
@@ -35,12 +35,12 @@ ion-action-sheet,css-prop,--min-height
 ion-action-sheet,css-prop,--min-width
 ion-action-sheet,css-prop,--width
 
-ion-alert-controller
+ion-alert-controller,none
 ion-alert-controller,method,create,create(opts: AlertOptions) => Promise<HTMLIonAlertElement>
 ion-alert-controller,method,dismiss,dismiss(data?: any, role?: string | undefined, id?: string | undefined) => Promise<boolean>
 ion-alert-controller,method,getTop,getTop() => Promise<HTMLIonAlertElement | undefined>
 
-ion-alert
+ion-alert,scoped
 ion-alert,prop,animated,boolean,true,false,false
 ion-alert,prop,backdropDismiss,boolean,true,false,false
 ion-alert,prop,buttons,(string | AlertButton)[],[],false,false
@@ -70,19 +70,19 @@ ion-alert,css-prop,--min-height
 ion-alert,css-prop,--min-width
 ion-alert,css-prop,--width
 
-ion-anchor
+ion-anchor,shadow
 ion-anchor,prop,color,string | undefined,undefined,false,false
 ion-anchor,prop,href,string | undefined,undefined,false,false
 ion-anchor,prop,routerDirection,"back" | "forward" | "root",'forward',false,false
 ion-anchor,css-prop,--background
 ion-anchor,css-prop,--color
 
-ion-app
+ion-app,none
 
-ion-avatar
+ion-avatar,shadow
 ion-avatar,css-prop,--border-radius
 
-ion-back-button
+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,icon,null | string | undefined,undefined,false,false
@@ -115,13 +115,13 @@ ion-back-button,css-prop,--padding-top
 ion-back-button,css-prop,--ripple-color
 ion-back-button,css-prop,--transition
 
-ion-backdrop
+ion-backdrop,shadow
 ion-backdrop,prop,stopPropagation,boolean,true,false,false
 ion-backdrop,prop,tappable,boolean,true,false,false
 ion-backdrop,prop,visible,boolean,true,false,false
 ion-backdrop,event,ionBackdropTap,void,true
 
-ion-badge
+ion-badge,shadow
 ion-badge,prop,color,string | undefined,undefined,false,false
 ion-badge,prop,mode,"ios" | "md",undefined,false,false
 ion-badge,css-prop,--background
@@ -131,7 +131,7 @@ ion-badge,css-prop,--padding-end
 ion-badge,css-prop,--padding-start
 ion-badge,css-prop,--padding-top
 
-ion-button
+ion-button,shadow
 ion-button,prop,buttonType,string,'button',false,false
 ion-button,prop,color,string | undefined,undefined,false,false
 ion-button,prop,disabled,boolean,false,false,true
@@ -165,33 +165,33 @@ ion-button,css-prop,--padding-top
 ion-button,css-prop,--ripple-color
 ion-button,css-prop,--transition
 
-ion-buttons
+ion-buttons,scoped
 
-ion-card-content
+ion-card-content,none
 ion-card-content,prop,mode,"ios" | "md",undefined,false,false
 
-ion-card-header
+ion-card-header,shadow
 ion-card-header,prop,color,string | undefined,undefined,false,false
 ion-card-header,prop,mode,"ios" | "md",undefined,false,false
 ion-card-header,prop,translucent,boolean,false,false,false
 
-ion-card-subtitle
+ion-card-subtitle,shadow
 ion-card-subtitle,prop,color,string | undefined,undefined,false,false
 ion-card-subtitle,prop,mode,"ios" | "md",undefined,false,false
 ion-card-subtitle,css-prop,--color
 
-ion-card-title
+ion-card-title,shadow
 ion-card-title,prop,color,string | undefined,undefined,false,false
 ion-card-title,prop,mode,"ios" | "md",undefined,false,false
 ion-card-title,css-prop,--color
 
-ion-card
+ion-card,scoped
 ion-card,prop,color,string | undefined,undefined,false,false
 ion-card,prop,mode,"ios" | "md",undefined,false,false
 ion-card,css-prop,--background
 ion-card,css-prop,--color
 
-ion-checkbox
+ion-checkbox,shadow
 ion-checkbox,prop,checked,boolean,false,false,false
 ion-checkbox,prop,color,string | undefined,undefined,false,false
 ion-checkbox,prop,disabled,boolean,false,false,false
@@ -212,14 +212,14 @@ ion-checkbox,css-prop,--checkmark-color
 ion-checkbox,css-prop,--size
 ion-checkbox,css-prop,--transition
 
-ion-chip
+ion-chip,shadow
 ion-chip,prop,color,string | undefined,undefined,false,false
 ion-chip,prop,mode,"ios" | "md",undefined,false,false
 ion-chip,prop,outline,boolean,false,false,false
 ion-chip,css-prop,--background
 ion-chip,css-prop,--color
 
-ion-col
+ion-col,shadow
 ion-col,prop,offset,string | undefined,undefined,false,false
 ion-col,prop,offsetLg,string | undefined,undefined,false,false
 ion-col,prop,offsetMd,string | undefined,undefined,false,false
@@ -252,7 +252,7 @@ ion-col,css-prop,--ion-grid-column-padding-xl
 ion-col,css-prop,--ion-grid-column-padding-xs
 ion-col,css-prop,--ion-grid-columns
 
-ion-content
+ion-content,shadow
 ion-content,prop,color,string | undefined,undefined,false,false
 ion-content,prop,forceOverscroll,boolean | undefined,undefined,false,false
 ion-content,prop,fullscreen,boolean,false,false,false
@@ -277,7 +277,7 @@ ion-content,css-prop,--padding-end
 ion-content,css-prop,--padding-start
 ion-content,css-prop,--padding-top
 
-ion-datetime
+ion-datetime,shadow
 ion-datetime,prop,cancelText,string,'Cancel',false,false
 ion-datetime,prop,dayNames,string | string[] | undefined,undefined,false,false
 ion-datetime,prop,dayShortNames,string | string[] | undefined,undefined,false,false
@@ -310,7 +310,7 @@ ion-datetime,css-prop,--padding-start
 ion-datetime,css-prop,--padding-top
 ion-datetime,css-prop,--placeholder-color
 
-ion-fab-button
+ion-fab-button,shadow
 ion-fab-button,prop,activated,boolean,false,false,false
 ion-fab-button,prop,color,string | undefined,undefined,false,false
 ion-fab-button,prop,disabled,boolean,false,false,false
@@ -341,22 +341,22 @@ ion-fab-button,css-prop,--padding-top
 ion-fab-button,css-prop,--ripple-color
 ion-fab-button,css-prop,--transition
 
-ion-fab-list
+ion-fab-list,shadow
 ion-fab-list,prop,activated,boolean,false,false,false
 ion-fab-list,prop,side,"bottom" | "end" | "start" | "top",'bottom',false,false
 
-ion-fab
+ion-fab,shadow
 ion-fab,prop,activated,boolean,false,false,false
 ion-fab,prop,edge,boolean,false,false,false
 ion-fab,prop,horizontal,"center" | "end" | "start" | undefined,undefined,false,false
 ion-fab,prop,vertical,"bottom" | "center" | "top" | undefined,undefined,false,false
 ion-fab,method,close,close() => void
 
-ion-footer
+ion-footer,none
 ion-footer,prop,mode,"ios" | "md",undefined,false,false
 ion-footer,prop,translucent,boolean,false,false,false
 
-ion-grid
+ion-grid,shadow
 ion-grid,prop,fixed,boolean,false,false,false
 ion-grid,css-prop,--ion-grid-padding
 ion-grid,css-prop,--ion-grid-padding-lg
@@ -371,27 +371,27 @@ ion-grid,css-prop,--ion-grid-width-sm
 ion-grid,css-prop,--ion-grid-width-xl
 ion-grid,css-prop,--ion-grid-width-xs
 
-ion-header
+ion-header,none
 ion-header,prop,mode,"ios" | "md",undefined,false,false
 ion-header,prop,translucent,boolean,false,false,false
 
-ion-img
+ion-img,shadow
 ion-img,prop,alt,string | undefined,undefined,false,false
 ion-img,prop,src,string | undefined,undefined,false,false
 ion-img,event,ionImgDidLoad,void,true
 
-ion-infinite-scroll-content
+ion-infinite-scroll-content,none
 ion-infinite-scroll-content,prop,loadingSpinner,"bubbles" | "circles" | "crescent" | "dots" | "lines" | "lines-small" | null | undefined,undefined,false,false
 ion-infinite-scroll-content,prop,loadingText,string | undefined,undefined,false,false
 
-ion-infinite-scroll
+ion-infinite-scroll,none
 ion-infinite-scroll,prop,disabled,boolean,false,false,false
 ion-infinite-scroll,prop,position,"bottom" | "top",'bottom',false,false
 ion-infinite-scroll,prop,threshold,string,'15%',false,false
 ion-infinite-scroll,method,complete,complete() => void
 ion-infinite-scroll,event,ionInfinite,void,true
 
-ion-input
+ion-input,scoped
 ion-input,prop,accept,string | undefined,undefined,false,false
 ion-input,prop,autocapitalize,string,'off',false,false
 ion-input,prop,autocomplete,"off" | "on",'off',false,false
@@ -435,7 +435,7 @@ ion-input,css-prop,--placeholder-font-style
 ion-input,css-prop,--placeholder-font-weight
 ion-input,css-prop,--placeholder-opacity
 
-ion-item-divider
+ion-item-divider,shadow
 ion-item-divider,prop,color,string | undefined,undefined,false,false
 ion-item-divider,prop,mode,"ios" | "md",undefined,false,false
 ion-item-divider,prop,sticky,boolean,false,false,false
@@ -446,9 +446,9 @@ ion-item-divider,css-prop,--padding-end
 ion-item-divider,css-prop,--padding-start
 ion-item-divider,css-prop,--padding-top
 
-ion-item-group
+ion-item-group,none
 
-ion-item-option
+ion-item-option,shadow
 ion-item-option,prop,color,string | undefined,undefined,false,false
 ion-item-option,prop,disabled,boolean,false,false,false
 ion-item-option,prop,expandable,boolean,false,false,false
@@ -457,11 +457,11 @@ ion-item-option,prop,mode,"ios" | "md",undefined,false,false
 ion-item-option,css-prop,--background
 ion-item-option,css-prop,--color
 
-ion-item-options
+ion-item-options,none
 ion-item-options,prop,side,"end" | "start",'end',false,false
 ion-item-options,event,ionSwipe,any,true
 
-ion-item-sliding
+ion-item-sliding,none
 ion-item-sliding,prop,disabled,boolean,false,false,false
 ion-item-sliding,method,close,close() => Promise<void>
 ion-item-sliding,method,closeOpened,closeOpened() => Promise<boolean>
@@ -469,7 +469,7 @@ ion-item-sliding,method,getOpenAmount,getOpenAmount() => Promise<number>
 ion-item-sliding,method,getSlidingRatio,getSlidingRatio() => Promise<number>
 ion-item-sliding,event,ionDrag,void,true
 
-ion-item
+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
@@ -508,30 +508,30 @@ ion-item,css-prop,--padding-start
 ion-item,css-prop,--padding-top
 ion-item,css-prop,--transition
 
-ion-label
+ion-label,scoped
 ion-label,prop,color,string | undefined,undefined,false,false
 ion-label,prop,mode,"ios" | "md",undefined,false,false
 ion-label,prop,position,"fixed" | "floating" | "stacked" | undefined,undefined,false,false
 ion-label,css-prop,--color
 
-ion-list-header
+ion-list-header,shadow
 ion-list-header,prop,color,string | 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,--color
 
-ion-list
+ion-list,none
 ion-list,prop,inset,boolean,false,false,false
 ion-list,prop,lines,"full" | "inset" | "none" | undefined,undefined,false,false
 ion-list,prop,mode,"ios" | "md",undefined,false,false
 ion-list,method,closeSlidingItems,closeSlidingItems() => Promise<boolean>
 
-ion-loading-controller
+ion-loading-controller,none
 ion-loading-controller,method,create,create(opts?: LoadingOptions | undefined) => Promise<HTMLIonLoadingElement>
 ion-loading-controller,method,dismiss,dismiss(data?: any, role?: string | undefined, id?: string | undefined) => Promise<boolean>
 ion-loading-controller,method,getTop,getTop() => Promise<HTMLIonLoadingElement | undefined>
 
-ion-loading
+ion-loading,scoped
 ion-loading,prop,animated,boolean,true,false,false
 ion-loading,prop,backdropDismiss,boolean,false,false,false
 ion-loading,prop,cssClass,string | string[] | undefined,undefined,false,false
@@ -561,14 +561,14 @@ ion-loading,css-prop,--min-width
 ion-loading,css-prop,--spinner-color
 ion-loading,css-prop,--width
 
-ion-menu-button
+ion-menu-button,shadow
 ion-menu-button,prop,autoHide,boolean,true,false,false
 ion-menu-button,prop,color,string | undefined,undefined,false,false
 ion-menu-button,prop,menu,string | undefined,undefined,false,false
 ion-menu-button,prop,mode,"ios" | "md",undefined,false,false
 ion-menu-button,css-prop,--color
 
-ion-menu-controller
+ion-menu-controller,none
 ion-menu-controller,method,close,close(menuId?: string | null | undefined) => Promise<boolean>
 ion-menu-controller,method,enable,enable(shouldEnable: boolean, menuId?: string | null | undefined) => Promise<HTMLIonMenuElement | undefined>
 ion-menu-controller,method,get,get(menuId?: string | null | undefined) => Promise<HTMLIonMenuElement | undefined>
@@ -582,11 +582,11 @@ ion-menu-controller,method,registerAnimation,registerAnimation(name: string, ani
 ion-menu-controller,method,swipeGesture,swipeGesture(shouldEnable: boolean, menuId?: string | null | undefined) => Promise<HTMLIonMenuElement | undefined>
 ion-menu-controller,method,toggle,toggle(menuId?: string | null | undefined) => Promise<boolean>
 
-ion-menu-toggle
+ion-menu-toggle,shadow
 ion-menu-toggle,prop,autoHide,boolean,true,false,false
 ion-menu-toggle,prop,menu,string | undefined,undefined,false,false
 
-ion-menu
+ion-menu,shadow
 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
@@ -612,12 +612,12 @@ ion-menu,css-prop,--min-height
 ion-menu,css-prop,--min-width
 ion-menu,css-prop,--width
 
-ion-modal-controller
+ion-modal-controller,none
 ion-modal-controller,method,create,create<T extends ComponentRef>(opts: ModalOptions<T>) => Promise<HTMLIonModalElement>
 ion-modal-controller,method,dismiss,dismiss(data?: any, role?: string | undefined, id?: string | undefined) => Promise<boolean>
 ion-modal-controller,method,getTop,getTop() => Promise<HTMLIonModalElement | undefined>
 
-ion-modal
+ion-modal,scoped
 ion-modal,prop,animated,boolean,true,false,false
 ion-modal,prop,backdropDismiss,boolean,true,false,false
 ion-modal,prop,component,Function | HTMLElement | null | string,undefined,true,false
@@ -648,17 +648,17 @@ ion-modal,css-prop,--min-height
 ion-modal,css-prop,--min-width
 ion-modal,css-prop,--width
 
-ion-nav-pop
+ion-nav-pop,none
 
-ion-nav-push
+ion-nav-push,none
 ion-nav-push,prop,component,Function | HTMLElement | ViewController | null | string | undefined,undefined,false,false
 ion-nav-push,prop,componentProps,undefined | { [key: string]: any; },undefined,false,false
 
-ion-nav-set-root
+ion-nav-set-root,none
 ion-nav-set-root,prop,component,Function | HTMLElement | ViewController | null | string | undefined,undefined,false,false
 ion-nav-set-root,prop,componentProps,undefined | { [key: string]: any; },undefined,false,false
 
-ion-nav
+ion-nav,shadow
 ion-nav,prop,animated,boolean,true,false,false
 ion-nav,prop,animation,((Animation: Animation, baseEl: any, opts?: any) => Promise<Animation>) | undefined,undefined,false,false
 ion-nav,prop,root,Function | HTMLElement | ViewController | null | string | undefined,undefined,false,false
@@ -677,21 +677,20 @@ ion-nav,method,push,push<T extends NavComponent>(component: T, componentProps?:
 ion-nav,method,removeIndex,removeIndex(startIndex: number, removeCount?: number, opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise<boolean>
 ion-nav,method,setPages,setPages(views: any[], opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise<boolean>
 ion-nav,method,setRoot,setRoot<T extends NavComponent>(component: T, componentProps?: ComponentProps<T> | null | undefined, opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise<boolean>
-ion-nav,event,ionNavDidChange,void,true
-ion-nav,event,ionNavWillChange,void,true
-ion-nav,event,ionNavWillLoad,void,true
+ion-nav,event,ionNavDidChange,void,false
+ion-nav,event,ionNavWillChange,void,false
 
-ion-note
+ion-note,shadow
 ion-note,prop,color,string | undefined,undefined,false,false
 ion-note,prop,mode,"ios" | "md",undefined,false,false
 ion-note,css-prop,--color
 
-ion-picker-controller
+ion-picker-controller,none
 ion-picker-controller,method,create,create(opts: PickerOptions) => Promise<HTMLIonPickerElement>
 ion-picker-controller,method,dismiss,dismiss(data?: any, role?: string | undefined, id?: string | undefined) => Promise<boolean>
 ion-picker-controller,method,getTop,getTop() => Promise<HTMLIonPickerElement | undefined>
 
-ion-picker
+ion-picker,scoped
 ion-picker,prop,animated,boolean,true,false,false
 ion-picker,prop,backdropDismiss,boolean,true,false,false
 ion-picker,prop,buttons,PickerButton[],[],false,false
@@ -725,12 +724,12 @@ ion-picker,css-prop,--min-height
 ion-picker,css-prop,--min-width
 ion-picker,css-prop,--width
 
-ion-popover-controller
+ion-popover-controller,none
 ion-popover-controller,method,create,create<T extends ComponentRef>(opts: PopoverOptions<T>) => Promise<HTMLIonPopoverElement>
 ion-popover-controller,method,dismiss,dismiss(data?: any, role?: string | undefined, id?: string | undefined) => Promise<boolean>
 ion-popover-controller,method,getTop,getTop() => Promise<HTMLIonPopoverElement | undefined>
 
-ion-popover
+ion-popover,scoped
 ion-popover,prop,animated,boolean,true,false,false
 ion-popover,prop,backdropDismiss,boolean,true,false,false
 ion-popover,prop,component,Function | HTMLElement | null | string,undefined,true,false
@@ -760,7 +759,7 @@ ion-popover,css-prop,--min-height
 ion-popover,css-prop,--min-width
 ion-popover,css-prop,--width
 
-ion-progress-bar
+ion-progress-bar,shadow
 ion-progress-bar,prop,buffer,number,1,false,false
 ion-progress-bar,prop,color,string | undefined,undefined,false,false
 ion-progress-bar,prop,mode,"ios" | "md",undefined,false,false
@@ -771,13 +770,13 @@ ion-progress-bar,css-prop,--background
 ion-progress-bar,css-prop,--buffer-background
 ion-progress-bar,css-prop,--progress-background
 
-ion-radio-group
+ion-radio-group,none
 ion-radio-group,prop,allowEmptySelection,boolean,false,false,false
 ion-radio-group,prop,name,string,this.inputId,false,false
 ion-radio-group,prop,value,any,undefined,false,false
 ion-radio-group,event,ionChange,RadioGroupChangeEventDetail,true
 
-ion-radio
+ion-radio,shadow
 ion-radio,prop,checked,boolean,false,false,false
 ion-radio,prop,color,string | undefined,undefined,false,false
 ion-radio,prop,disabled,boolean,false,false,false
@@ -790,7 +789,7 @@ ion-radio,event,ionSelect,RadioChangeEventDetail,true
 ion-radio,css-prop,--color
 ion-radio,css-prop,--color-checked
 
-ion-range
+ion-range,shadow
 ion-range,prop,color,string | undefined,undefined,false,false
 ion-range,prop,debounce,number,0,false,false
 ion-range,prop,disabled,boolean,false,false,false
@@ -816,13 +815,13 @@ ion-range,css-prop,--knob-border-radius
 ion-range,css-prop,--knob-box-shadow
 ion-range,css-prop,--knob-size
 
-ion-refresher-content
+ion-refresher-content,none
 ion-refresher-content,prop,pullingIcon,null | string | undefined,undefined,false,false
 ion-refresher-content,prop,pullingText,string | undefined,undefined,false,false
 ion-refresher-content,prop,refreshingSpinner,"bubbles" | "circles" | "crescent" | "dots" | "lines" | "lines-small" | null | undefined,undefined,false,false
 ion-refresher-content,prop,refreshingText,string | undefined,undefined,false,false
 
-ion-refresher
+ion-refresher,none
 ion-refresher,prop,closeDuration,string,'280ms',false,false
 ion-refresher,prop,disabled,boolean,false,false,false
 ion-refresher,prop,pullMax,number,this.pullMin + 60,false,false
@@ -835,33 +834,33 @@ ion-refresher,event,ionPull,void,true
 ion-refresher,event,ionRefresh,RefresherEventDetail,true
 ion-refresher,event,ionStart,void,true
 
-ion-reorder-group
+ion-reorder-group,none
 ion-reorder-group,prop,disabled,boolean,true,false,false
 ion-reorder-group,method,complete,complete(listOrReorder?: boolean | any[] | undefined) => Promise<any>
 ion-reorder-group,event,ionItemReorder,ItemReorderEventDetail,true
 
-ion-reorder
+ion-reorder,shadow
 
-ion-ripple-effect
+ion-ripple-effect,shadow
 ion-ripple-effect,prop,type,"bounded" | "unbounded",'bounded',false,false
 ion-ripple-effect,method,addRipple,addRipple(pageX: number, pageY: number) => Promise<() => void>
 
-ion-route-redirect
+ion-route-redirect,none
 ion-route-redirect,prop,from,string,undefined,true,false
 ion-route-redirect,prop,to,null | string | undefined,undefined,true,false
 ion-route-redirect,event,ionRouteRedirectChanged,void,true
 
-ion-route
+ion-route,none
 ion-route,prop,component,string,undefined,true,false
 ion-route,prop,componentProps,undefined | { [key: string]: any; },undefined,false,false
 ion-route,prop,url,string,'',false,false
 ion-route,event,ionRouteDataChanged,any,true
 
-ion-router-outlet
+ion-router-outlet,shadow
 ion-router-outlet,prop,animated,boolean,true,false,false
 ion-router-outlet,prop,animation,((Animation: Animation, baseEl: any, opts?: any) => Promise<Animation>) | undefined,undefined,false,false
 
-ion-router
+ion-router,none
 ion-router,prop,root,string,'/',false,false
 ion-router,prop,useHash,boolean,true,false,false
 ion-router,method,goBack,goBack() => Promise<void>
@@ -869,9 +868,9 @@ ion-router,method,push,push(url: string, direction?: RouterDirection) => Promise
 ion-router,event,ionRouteDidChange,RouterEventDetail,true
 ion-router,event,ionRouteWillChange,RouterEventDetail,true
 
-ion-row
+ion-row,shadow
 
-ion-searchbar
+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
@@ -904,7 +903,7 @@ ion-searchbar,css-prop,--placeholder-font-style
 ion-searchbar,css-prop,--placeholder-font-weight
 ion-searchbar,css-prop,--placeholder-opacity
 
-ion-segment-button
+ion-segment-button,shadow
 ion-segment-button,prop,checked,boolean,false,false,false
 ion-segment-button,prop,disabled,boolean,false,false,false
 ion-segment-button,prop,layout,"icon-bottom" | "icon-end" | "icon-hide" | "icon-start" | "icon-top" | "label-hide" | undefined,'icon-top',false,false
@@ -936,7 +935,7 @@ ion-segment-button,css-prop,--padding-start
 ion-segment-button,css-prop,--padding-top
 ion-segment-button,css-prop,--transition
 
-ion-segment
+ion-segment,scoped
 ion-segment,prop,color,string | undefined,undefined,false,false
 ion-segment,prop,disabled,boolean,false,false,false
 ion-segment,prop,mode,"ios" | "md",undefined,false,false
@@ -945,12 +944,12 @@ ion-segment,prop,value,null | string | undefined,undefined,false,false
 ion-segment,event,ionChange,SegmentChangeEventDetail,true
 ion-segment,event,ionStyle,StyleEventDetail,true
 
-ion-select-option
+ion-select-option,shadow
 ion-select-option,prop,disabled,boolean,false,false,false
 ion-select-option,prop,selected,boolean,false,false,false
 ion-select-option,prop,value,any,undefined,false,false
 
-ion-select
+ion-select,shadow
 ion-select,prop,cancelText,string,'Cancel',false,false
 ion-select,prop,disabled,boolean,false,false,false
 ion-select,prop,interface,"action-sheet" | "alert" | "popover",'alert',false,false
@@ -972,13 +971,13 @@ ion-select,css-prop,--padding-end
 ion-select,css-prop,--padding-start
 ion-select,css-prop,--padding-top
 
-ion-skeleton-text
+ion-skeleton-text,shadow
 ion-skeleton-text,prop,width,string,'100%',false,false
 ion-skeleton-text,css-prop,--background
 
-ion-slide
+ion-slide,none
 
-ion-slides
+ion-slides,none
 ion-slides,prop,mode,"ios" | "md",undefined,false,false
 ion-slides,prop,options,any,{},false,false
 ion-slides,prop,pager,boolean,false,false,false
@@ -1016,22 +1015,21 @@ ion-slides,event,ionSlideWillChange,void,true
 ion-slides,css-prop,--bullet-background
 ion-slides,css-prop,--bullet-background-active
 
-ion-spinner
+ion-spinner,shadow
 ion-spinner,prop,color,string | undefined,undefined,false,false
 ion-spinner,prop,duration,number | undefined,undefined,false,false
 ion-spinner,prop,name,"bubbles" | "circles" | "crescent" | "dots" | "lines" | "lines-small" | undefined,undefined,false,false
 ion-spinner,prop,paused,boolean,false,false,false
 ion-spinner,css-prop,--color
 
-ion-split-pane
+ion-split-pane,none
 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,ionChange,{visible: boolean},false
-ion-split-pane,event,ionSplitPaneVisible,void,true
+ion-split-pane,event,ionSplitPaneVisible,{visible: boolean},true
 ion-split-pane,css-prop,--border
 
-ion-tab-bar
+ion-tab-bar,shadow
 ion-tab-bar,prop,color,string | undefined,undefined,false,false
 ion-tab-bar,prop,mode,"ios" | "md",undefined,false,false
 ion-tab-bar,prop,selectedTab,string | undefined,undefined,false,false
@@ -1040,7 +1038,7 @@ ion-tab-bar,css-prop,--background
 ion-tab-bar,css-prop,--border
 ion-tab-bar,css-prop,--color
 
-ion-tab-button
+ion-tab-button,shadow
 ion-tab-button,prop,disabled,boolean,false,false,false
 ion-tab-button,prop,href,string | undefined,undefined,false,false
 ion-tab-button,prop,layout,"icon-bottom" | "icon-end" | "icon-hide" | "icon-start" | "icon-top" | "label-hide" | undefined,undefined,false,false
@@ -1057,25 +1055,23 @@ ion-tab-button,css-prop,--padding-start
 ion-tab-button,css-prop,--padding-top
 ion-tab-button,css-prop,--ripple-color
 
-ion-tab
+ion-tab,shadow
 ion-tab,prop,component,Function | HTMLElement | null | string | undefined,undefined,false,false
 ion-tab,prop,tab,string,undefined,true,false
 ion-tab,method,setActive,setActive() => Promise<void>
 
-ion-tabs
-ion-tabs,method,getSelected,getSelected() => Promise<HTMLIonTabElement | undefined>
+ion-tabs,shadow
+ion-tabs,method,getSelected,getSelected() => Promise<string | undefined>
 ion-tabs,method,getTab,getTab(tab: string | HTMLIonTabElement) => Promise<HTMLIonTabElement | undefined>
 ion-tabs,method,select,select(tab: string | HTMLIonTabElement) => Promise<boolean>
-ion-tabs,event,ionChange,{tab: HTMLIonTabElement},true
-ion-tabs,event,ionNavDidChange,void,true
-ion-tabs,event,ionNavWillChange,void,true
-ion-tabs,event,ionNavWillLoad,void,true
+ion-tabs,event,ionTabsDidChange,{tab: string},false
+ion-tabs,event,ionTabsWillChange,{tab: string},false
 
-ion-text
+ion-text,shadow
 ion-text,prop,color,string | undefined,undefined,false,false
 ion-text,prop,mode,"ios" | "md",undefined,false,false
 
-ion-textarea
+ion-textarea,scoped
 ion-textarea,prop,autocapitalize,string,'none',false,false
 ion-textarea,prop,autofocus,boolean,false,false,false
 ion-textarea,prop,clearOnEdit,boolean,false,false,false
@@ -1111,20 +1107,20 @@ ion-textarea,css-prop,--placeholder-font-style
 ion-textarea,css-prop,--placeholder-font-weight
 ion-textarea,css-prop,--placeholder-opacity
 
-ion-thumbnail
+ion-thumbnail,shadow
 ion-thumbnail,css-prop,--border-radius
 ion-thumbnail,css-prop,--size
 
-ion-title
+ion-title,shadow
 ion-title,prop,color,string | undefined,undefined,false,false
 ion-title,css-prop,--color
 
-ion-toast-controller
+ion-toast-controller,none
 ion-toast-controller,method,create,create(opts?: ToastOptions | undefined) => Promise<HTMLIonToastElement>
 ion-toast-controller,method,dismiss,dismiss(data?: any, role?: string | undefined, id?: string | undefined) => Promise<boolean>
 ion-toast-controller,method,getTop,getTop() => Promise<HTMLIonToastElement | undefined>
 
-ion-toast
+ion-toast,shadow
 ion-toast,prop,animated,boolean,true,false,false
 ion-toast,prop,closeButtonText,string | undefined,undefined,false,false
 ion-toast,prop,color,string | undefined,undefined,false,false
@@ -1161,7 +1157,7 @@ ion-toast,css-prop,--min-height
 ion-toast,css-prop,--min-width
 ion-toast,css-prop,--width
 
-ion-toggle
+ion-toggle,shadow
 ion-toggle,prop,checked,boolean,false,false,false
 ion-toggle,prop,color,string | undefined,undefined,false,false
 ion-toggle,prop,disabled,boolean,false,false,false
@@ -1176,7 +1172,7 @@ ion-toggle,css-prop,--background-checked
 ion-toggle,css-prop,--handle-background
 ion-toggle,css-prop,--handle-background-checked
 
-ion-toolbar
+ion-toolbar,shadow
 ion-toolbar,prop,color,string | undefined,undefined,false,false
 ion-toolbar,prop,mode,"ios" | "md",undefined,false,false
 ion-toolbar,css-prop,--background
@@ -1191,7 +1187,7 @@ ion-toolbar,css-prop,--padding-end
 ion-toolbar,css-prop,--padding-start
 ion-toolbar,css-prop,--padding-top
 
-ion-virtual-scroll
+ion-virtual-scroll,none
 ion-virtual-scroll,prop,approxFooterHeight,number,30,false,false
 ion-virtual-scroll,prop,approxHeaderHeight,number,30,false,false
 ion-virtual-scroll,prop,approxItemHeight,number,45,false,false
diff --git a/core/package.json b/core/package.json
index cc46e84da69..d1a228c2623 100644
--- a/core/package.json
+++ b/core/package.json
@@ -21,7 +21,6 @@
   "es2015": "dist/esm/es2017/index.js",
   "es2017": "dist/esm/es2017/index.js",
   "jsnext:main": "dist/esm/es2017/index.js",
-  "sideEffects": false,
   "types": "dist/types/interface.d.ts",
   "collection": "dist/collection/collection-manifest.json",
   "webComponents": "dist/web-components.json",
@@ -34,7 +33,7 @@
     "ionicons": "4.5.1"
   },
   "devDependencies": {
-    "@stencil/core": "0.16.2",
+    "@stencil/core": "0.16.3",
     "@stencil/sass": "0.1.1",
     "@stencil/utils": "latest",
     "@types/jest": "^23.3.1",
diff --git a/core/scripts/api-spec-generator.js b/core/scripts/api-spec-generator.js
index 20705ca9a72..003f7530ace 100644
--- a/core/scripts/api-spec-generator.js
+++ b/core/scripts/api-spec-generator.js
@@ -17,7 +17,7 @@ function apiSpecGenerator(opts) {
 
 function generateComponent(component, content) {
   content.push('');
-  content.push(component.tag);
+  content.push(`${component.tag},${component.encapsulation}`);
 
   component.props.forEach(prop => {
     content.push(`${component.tag},prop,${prop.name},${prop.type},${prop.default},${prop.required},${prop.reflectToAttr}`);
diff --git a/core/src/components.d.ts b/core/src/components.d.ts
index fe896a52952..939287478ac 100644
--- a/core/src/components.d.ts
+++ b/core/src/components.d.ts
@@ -2768,10 +2768,6 @@ export namespace Components {
     */
     'onIonNavWillChange'?: (event: CustomEvent<void>) => void;
     /**
-    * Event fired when Nav will load a component
-    */
-    'onIonNavWillLoad'?: (event: CustomEvent<void>) => void;
-    /**
     * Root NavComponent to load
     */
     'root'?: NavComponent;
@@ -4322,13 +4318,9 @@ export namespace Components {
     */
     'disabled'?: boolean;
     /**
-    * Emitted when the split pane is visible.
-    */
-    'onIonChange'?: (event: CustomEvent<{visible: boolean}>) => void;
-    /**
     * Expression to be called when the split-pane visibility has changed
     */
-    'onIonSplitPaneVisible'?: (event: CustomEvent) => void;
+    'onIonSplitPaneVisible'?: (event: CustomEvent<{visible: boolean}>) => void;
     /**
     * When the split-pane should be shown. Can be a CSS media query expression, or a shortcut expression. Can also be a boolean expression.
     */
@@ -4457,9 +4449,9 @@ export namespace Components {
     /**
     * Get the currently selected tab
     */
-    'getSelected': () => Promise<HTMLIonTabElement | undefined>;
+    'getSelected': () => Promise<string | undefined>;
     /**
-    * Get the tab at the given index
+    * Get the tab element given the tab name
     */
     'getTab': (tab: string | HTMLIonTabElement) => Promise<HTMLIonTabElement | undefined>;
     /**
@@ -4470,22 +4462,14 @@ export namespace Components {
     'useRouter': boolean;
   }
   interface IonTabsAttributes extends StencilHTMLAttributes {
-    /**
-    * Emitted when the tab changes.
-    */
-    'onIonChange'?: (event: CustomEvent<{tab: HTMLIonTabElement}>) => void;
     /**
     * Emitted when the navigation has finished transitioning to a new component.
     */
-    'onIonNavDidChange'?: (event: CustomEvent<void>) => void;
+    'onIonTabsDidChange'?: (event: CustomEvent<{tab: string}>) => void;
     /**
     * Emitted when the navigation is about to transition to a new component.
     */
-    'onIonNavWillChange'?: (event: CustomEvent<void>) => void;
-    /**
-    * Emitted when the navigation will load a component.
-    */
-    'onIonNavWillLoad'?: (event: CustomEvent<void>) => void;
+    'onIonTabsWillChange'?: (event: CustomEvent<{tab: string}>) => void;
   }
 
   interface IonText {
diff --git a/core/src/components/back-button/back-button.tsx b/core/src/components/back-button/back-button.tsx
index 5f551763449..da593edaaa2 100644
--- a/core/src/components/back-button/back-button.tsx
+++ b/core/src/components/back-button/back-button.tsx
@@ -72,9 +72,13 @@ export class BackButton implements ComponentInterface {
 
   render() {
     const defaultBackButtonText = this.mode === 'ios' ? 'Back' : null;
-    const backButtonIcon = this.icon != null ? this.icon : this.config.get('backButtonIcon', 'arrow-back');
     const backButtonText = this.text != null ? this.text : this.config.get('backButtonText', defaultBackButtonText);
 
+    let backButtonIcon = this.icon != null ? this.icon : this.config.get('backButtonIcon', 'arrow-back');
+    if (backButtonIcon === 'arrow-back' && document.dir === 'rtl') {
+      backButtonIcon = 'arrow-forward';
+    }
+
     return (
       <button
         type="button"
diff --git a/core/src/components/content/content.tsx b/core/src/components/content/content.tsx
index 18965bc138a..ccf445e9fe5 100644
--- a/core/src/components/content/content.tsx
+++ b/core/src/components/content/content.tsx
@@ -1,4 +1,4 @@
-import { Component, ComponentInterface, Element, Event, EventEmitter, Listen, Method, Prop, QueueApi } from '@stencil/core';
+import { Component, ComponentInterface, Element, Event, EventEmitter, Method, Prop, QueueApi } from '@stencil/core';
 
 import { Color, Config, Mode, ScrollBaseDetail, ScrollDetail } from '../../interface';
 import { isPlatform } from '../../utils/platform';
@@ -102,11 +102,6 @@ export class Content implements ComponentInterface {
    */
   @Event() ionScrollEnd!: EventEmitter<ScrollBaseDetail>;
 
-  @Listen('body:ionNavDidChange')
-  onNavChanged() {
-    this.resize();
-  }
-
   componentWillLoad() {
     if (this.forceOverscroll === undefined) {
       this.forceOverscroll = this.mode === 'ios' && isPlatform(this.win, 'mobile');
diff --git a/core/src/components/item/test/inputs/e2e.ts b/core/src/components/item/test/inputs/e2e.ts
index 22ba5aa0c1f..0edef815a87 100644
--- a/core/src/components/item/test/inputs/e2e.ts
+++ b/core/src/components/item/test/inputs/e2e.ts
@@ -8,6 +8,7 @@ test('item: inputs', async () => {
   // check form
   await page.click('#submit');
   await checkFormResult(page, '{"date":"","select":"n64","toggle":"","input":"","input2":"","checkbox":""}');
+  await page.waitFor(100);
 
   // Default case, enabled and no value
   let compare = await page.compareScreenshot();
@@ -15,11 +16,11 @@ test('item: inputs', async () => {
 
   // Disable everything
   await page.click('#btnDisabled');
-  await page.waitFor(250);
 
   // check form
   await page.click('#submit');
   await checkFormResult(page, '{}');
+  await page.waitFor(100);
 
   // screenshot
   compare = await page.compareScreenshot('should disable all');
@@ -33,27 +34,28 @@ test('item: inputs', async () => {
   // check form
   await page.click('#submit');
   await checkFormResult(page, '{"date":"2016-12-09","select":"nes","toggle":"on","input":"Some text","input2":"Some text","checkbox":"on"}');
+  await page.waitFor(100);
 
   compare = await page.compareScreenshot('should reenable and set value');
   expect(compare).toMatchScreenshot();
 
   // Set "null"
   await page.click('#btnNullValue');
-  await page.waitFor(250);
+  await page.waitFor(100);
 
   compare = await page.compareScreenshot('should set null');
   expect(compare).toMatchScreenshot();
 
   // Set "empty"
   await page.click('#btnEmptyValue');
-  await page.waitFor(250);
+  await page.waitFor(100);
 
   compare = await page.compareScreenshot('should set empty');
   expect(compare).toMatchScreenshot();
 
   // Set "empty"
   await page.click('#btnEmptyValue');
-  await page.waitFor(250);
+  await page.waitFor(100);
 
   compare = await page.compareScreenshot('should set empty');
   expect(compare).toMatchScreenshot();
diff --git a/core/src/components/menu/test/basic/e2e.ts b/core/src/components/menu/test/basic/e2e.ts
index 6f2260b2c3f..9ac055e39b7 100644
--- a/core/src/components/menu/test/basic/e2e.ts
+++ b/core/src/components/menu/test/basic/e2e.ts
@@ -13,8 +13,12 @@ test('menu: basic', async () => {
   ]);
 
   await start.callMethod('open');
+  await start.waitForVisible();
+  await page.waitFor(250);
   expect(await page.compareScreenshot('start menu')).toMatchScreenshot();
+
   await start.callMethod('close');
+  await page.waitFor(250);
 
   const end = await page.find('ion-menu[side="end"]');
   expect(end).toHaveClasses([
@@ -24,5 +28,7 @@ test('menu: basic', async () => {
   ]);
 
   await end.callMethod('open');
+  await end.waitForVisible();
+  await page.waitFor(250);
   expect(await page.compareScreenshot('end menu')).toMatchScreenshot();
 });
diff --git a/core/src/components/menu/test/standalone/e2e.ts b/core/src/components/menu/test/standalone/e2e.ts
index ab2749379ac..3be93f7d62c 100644
--- a/core/src/components/menu/test/standalone/e2e.ts
+++ b/core/src/components/menu/test/standalone/e2e.ts
@@ -14,8 +14,12 @@ test('menu: standalone', async () => {
   ]);
 
   await start.callMethod('open');
+  await start.waitForVisible();
+  await page.waitFor(250);
   expect(await page.compareScreenshot('start menu')).toMatchScreenshot();
+
   await start.callMethod('close');
+  await page.waitFor(250);
 
   const end = await page.find('ion-menu[side="end"]');
   expect(end).toHaveClasses([
@@ -25,5 +29,7 @@ test('menu: standalone', async () => {
   ]);
 
   await end.callMethod('open');
+  await end.waitForVisible();
+  await page.waitFor(250);
   expect(await page.compareScreenshot('end menu')).toMatchScreenshot();
 });
diff --git a/core/src/components/nav/nav.tsx b/core/src/components/nav/nav.tsx
index b1a150fc2db..0146bc9f27f 100644
--- a/core/src/components/nav/nav.tsx
+++ b/core/src/components/nav/nav.tsx
@@ -81,16 +81,17 @@ export class Nav implements NavOutlet {
 
   /**
    * Event fired when Nav will load a component
+   * @internal
    */
   @Event() ionNavWillLoad!: EventEmitter<void>;
   /**
    * Event fired when the nav will components
    */
-  @Event() ionNavWillChange!: EventEmitter<void>;
+  @Event({ bubbles: false }) ionNavWillChange!: EventEmitter<void>;
   /**
    * Event fired when the nav has changed components
    */
-  @Event() ionNavDidChange!: EventEmitter<void>;
+  @Event({ bubbles: false }) ionNavDidChange!: EventEmitter<void>;
 
   componentWillLoad() {
     this.useRouter =
diff --git a/core/src/components/nav/readme.md b/core/src/components/nav/readme.md
index 438c64f275d..aceaba226a3 100644
--- a/core/src/components/nav/readme.md
+++ b/core/src/components/nav/readme.md
@@ -24,7 +24,6 @@ Unlike RouterOutlet, Nav is not tied to a particular router. Meaning that if we
 | ------------------ | ----------------------------------------------- | ------------------- |
 | `ionNavDidChange`  | Event fired when the nav has changed components | `CustomEvent<void>` |
 | `ionNavWillChange` | Event fired when the nav will components        | `CustomEvent<void>` |
-| `ionNavWillLoad`   | Event fired when Nav will load a component      | `CustomEvent<void>` |
 
 
 ## Methods
diff --git a/core/src/components/router-outlet/route-outlet.tsx b/core/src/components/router-outlet/route-outlet.tsx
index e54ca220862..ea7449cfdc4 100644
--- a/core/src/components/router-outlet/route-outlet.tsx
+++ b/core/src/components/router-outlet/route-outlet.tsx
@@ -53,10 +53,10 @@ export class RouterOutlet implements ComponentInterface, NavOutlet {
   @Event() ionNavWillLoad!: EventEmitter<void>;
 
   /** @internal */
-  @Event() ionNavWillChange!: EventEmitter<void>;
+  @Event({ bubbles: false }) ionNavWillChange!: EventEmitter<void>;
 
   /** @internal */
-  @Event() ionNavDidChange!: EventEmitter<void>;
+  @Event({ bubbles: false }) ionNavDidChange!: EventEmitter<void>;
 
   componentWillLoad() {
     this.ionNavWillLoad.emit();
diff --git a/core/src/components/split-pane/readme.md b/core/src/components/split-pane/readme.md
index 3f38e02ea17..f404caec897 100644
--- a/core/src/components/split-pane/readme.md
+++ b/core/src/components/split-pane/readme.md
@@ -96,8 +96,7 @@ SplitPane also provides some predefined media queries that can be used.
 
 | Event                 | Description                                                        | Type                              |
 | --------------------- | ------------------------------------------------------------------ | --------------------------------- |
-| `ionChange`           | Emitted when the split pane is visible.                            | `CustomEvent<{visible: boolean}>` |
-| `ionSplitPaneVisible` | Expression to be called when the split-pane visibility has changed | `CustomEvent<void>`               |
+| `ionSplitPaneVisible` | Expression to be called when the split-pane visibility has changed | `CustomEvent<{visible: boolean}>` |
 
 
 ## CSS Custom Properties
diff --git a/core/src/components/split-pane/split-pane.tsx b/core/src/components/split-pane/split-pane.tsx
index 1d23f806082..db9d112f5f8 100644
--- a/core/src/components/split-pane/split-pane.tsx
+++ b/core/src/components/split-pane/split-pane.tsx
@@ -60,20 +60,14 @@ export class SplitPane implements ComponentInterface {
    */
   @Prop() when: string | boolean = QUERY['lg'];
 
-  /**
-   * Emitted when the split pane is visible.
-   */
-  @Event({ bubbles: false }) ionChange!: EventEmitter<{visible: boolean}>;
-
   /**
    * Expression to be called when the split-pane visibility has changed
    */
-  @Event() ionSplitPaneVisible!: EventEmitter;
+  @Event() ionSplitPaneVisible!: EventEmitter<{visible: boolean}>;
 
   @Watch('visible')
   visibleChanged(visible: boolean) {
     const detail = { visible, isPane: this.isPane.bind(this) };
-    this.ionChange.emit(detail);
     this.ionSplitPaneVisible.emit(detail);
   }
 
diff --git a/core/src/components/tab/tab.tsx b/core/src/components/tab/tab.tsx
index 81c8015b92a..1d8b7401980 100644
--- a/core/src/components/tab/tab.tsx
+++ b/core/src/components/tab/tab.tsx
@@ -49,12 +49,16 @@ export class Tab implements ComponentInterface {
     this.active = true;
   }
 
-  private prepareLazyLoaded(): Promise<HTMLElement | void> {
+  private async prepareLazyLoaded(): Promise<HTMLElement | undefined> {
     if (!this.loaded && this.component != null) {
       this.loaded = true;
-      return attachComponent(this.delegate, this.el, this.component, ['ion-page']);
+      try {
+        return attachComponent(this.delegate, this.el, this.component, ['ion-page']);
+      } catch (e) {
+        console.error(e);
+      }
     }
-    return Promise.resolve();
+    return undefined;
   }
 
   hostData() {
diff --git a/core/src/components/tabs/readme.md b/core/src/components/tabs/readme.md
index 1e7e6d7cbcd..aa70a6e48f7 100644
--- a/core/src/components/tabs/readme.md
+++ b/core/src/components/tabs/readme.md
@@ -166,29 +166,27 @@ Using tabs with Angular's router is fairly straight forward. Here you only need
 
 ## Events
 
-| Event              | Description                                                                | Type                                    |
-| ------------------ | -------------------------------------------------------------------------- | --------------------------------------- |
-| `ionChange`        | Emitted when the tab changes.                                              | `CustomEvent<{tab: HTMLIonTabElement}>` |
-| `ionNavDidChange`  | Emitted when the navigation has finished transitioning to a new component. | `CustomEvent<void>`                     |
-| `ionNavWillChange` | Emitted when the navigation is about to transition to a new component.     | `CustomEvent<void>`                     |
-| `ionNavWillLoad`   | Emitted when the navigation will load a component.                         | `CustomEvent<void>`                     |
+| Event               | Description                                                                | Type                         |
+| ------------------- | -------------------------------------------------------------------------- | ---------------------------- |
+| `ionTabsDidChange`  | Emitted when the navigation has finished transitioning to a new component. | `CustomEvent<{tab: string}>` |
+| `ionTabsWillChange` | Emitted when the navigation is about to transition to a new component.     | `CustomEvent<{tab: string}>` |
 
 
 ## Methods
 
-### `getSelected() => Promise<HTMLIonTabElement | undefined>`
+### `getSelected() => Promise<string | undefined>`
 
 Get the currently selected tab
 
 #### Returns
 
-Type: `Promise<HTMLIonTabElement | undefined>`
+Type: `Promise<string | undefined>`
 
 
 
 ### `getTab(tab: string | HTMLIonTabElement) => Promise<HTMLIonTabElement | undefined>`
 
-Get the tab at the given index
+Get the tab element given the tab name
 
 #### Parameters
 
diff --git a/core/src/components/tabs/tabs.tsx b/core/src/components/tabs/tabs.tsx
index 122ffd96ee3..e0d958ce6c9 100644
--- a/core/src/components/tabs/tabs.tsx
+++ b/core/src/components/tabs/tabs.tsx
@@ -23,25 +23,21 @@ export class Tabs implements NavOutlet {
   /** @internal */
   @Prop({ mutable: true }) useRouter = false;
 
-  /**
-   * Emitted when the tab changes.
-   */
-  @Event() ionChange!: EventEmitter<{tab: HTMLIonTabElement}>;
-
   /**
    * Emitted when the navigation will load a component.
+   * @internal
    */
   @Event() ionNavWillLoad!: EventEmitter<void>;
 
   /**
    * Emitted when the navigation is about to transition to a new component.
    */
-  @Event() ionNavWillChange!: EventEmitter<void>;
+  @Event({ bubbles: false }) ionTabsWillChange!: EventEmitter<{tab: string}>;
 
   /**
    * Emitted when the navigation has finished transitioning to a new component.
    */
-  @Event() ionNavDidChange!: EventEmitter<void>;
+  @Event({ bubbles: false }) ionTabsDidChange!: EventEmitter<{tab: string}>;
 
   async componentWillLoad() {
     if (!this.useRouter) {
@@ -99,6 +95,29 @@ export class Tabs implements NavOutlet {
     return true;
   }
 
+  /**
+   * Get the tab element given the tab name
+   */
+  @Method()
+  async getTab(tab: string | HTMLIonTabElement): Promise<HTMLIonTabElement | undefined> {
+    const tabEl = (typeof tab === 'string')
+      ? this.tabs.find(t => t.tab === tab)
+      : tab;
+
+    if (!tabEl) {
+      console.error(`tab with id: "${tabEl}" does not exist`);
+    }
+    return tabEl;
+  }
+
+  /**
+   * Get the currently selected tab
+   */
+  @Method()
+  getSelected(): Promise<string | undefined> {
+    return Promise.resolve(this.selectedTab ? this.selectedTab.tab : undefined);
+  }
+
   /** @internal */
   @Method()
   async setRouteId(id: string): Promise<RouteWrite> {
@@ -122,27 +141,6 @@ export class Tabs implements NavOutlet {
     return tabId !== undefined ? { id: tabId, element: this.selectedTab } : undefined;
   }
 
-  /** Get the tab at the given index */
-  @Method()
-  async getTab(tab: string | HTMLIonTabElement): Promise<HTMLIonTabElement | undefined> {
-    const tabEl = (typeof tab === 'string')
-      ? this.tabs.find(t => t.tab === tab)
-      : tab;
-
-    if (!tabEl) {
-      console.error(`tab with id: "${tabEl}" does not exist`);
-    }
-    return tabEl;
-  }
-
-  /**
-   * Get the currently selected tab
-   */
-  @Method()
-  getSelected(): Promise<HTMLIonTabElement | undefined> {
-    return Promise.resolve(this.selectedTab);
-  }
-
   private async initSelect(): Promise<void> {
     if (this.useRouter) {
       return;
@@ -160,7 +158,7 @@ export class Tabs implements NavOutlet {
     this.transitioning = true;
     this.leavingTab = this.selectedTab;
     this.selectedTab = selectedTab;
-    this.ionNavWillChange.emit();
+    this.ionTabsWillChange.emit({ tab: selectedTab.tab });
     return selectedTab.setActive();
   }
 
@@ -178,8 +176,7 @@ export class Tabs implements NavOutlet {
       if (leavingTab) {
         leavingTab.active = false;
       }
-      this.ionChange.emit({ tab: selectedTab });
-      this.ionNavDidChange.emit();
+      this.ionTabsDidChange.emit({ tab: selectedTab.tab });
     }
   }
 
diff --git a/package.json b/package.json
index f52509bff0f..0ae09a5ab42 100644
--- a/package.json
+++ b/package.json
@@ -5,6 +5,7 @@
   "private": true,
   "scripts": {
     "build": "node .scripts/build.js",
+    "release.dev": "node .scripts/release-dev.js",
     "release.prepare": "node .scripts/prepare.js",
     "release": "node .scripts/release.js",
     "changelog": "conventional-changelog -p angular -i ./CHANGELOG.md -k core -s"