merge release-4.10.3

master Release 4.10.3

.circleci/config.yml

@@ -108,6 +108,58 @@ jobs:
           paths:
             - "*"
 
+  build-react:
+    <<: *defaults
+    steps:
+      - checkout
+      - attach_workspace:
+          at: /tmp/workspace
+      - run:
+          command: npm install
+          working_directory: /tmp/workspace/packages/react
+      - run:
+          command: sudo npm link
+          working_directory: /tmp/workspace/core
+      - run:
+          command: sudo npm link @ionic/core
+          working_directory: /tmp/workspace/packages/react
+      - run:
+          command: npm run build
+          working_directory: /tmp/workspace/packages/react
+      - persist_to_workspace:
+          root: /tmp/workspace
+          paths:
+            - "*"
+
+  build-react-router:
+    <<: *defaults
+    steps:
+      - checkout
+      - attach_workspace:
+          at: /tmp/workspace
+      - run:
+          command: npm install
+          working_directory: /tmp/workspace/packages/react-router
+      - run:
+          command: sudo npm link
+          working_directory: /tmp/workspace/core
+      - run:
+          command: sudo npm link @ionic/core
+          working_directory: /tmp/workspace/packages/react-router
+      - run:
+          command: sudo npm link
+          working_directory: /tmp/workspace/packages/react
+      - run:
+          command: sudo npm link @ionic/react
+          working_directory: /tmp/workspace/packages/react-router
+      - run:
+          command: npm run build
+          working_directory: /tmp/workspace/packages/react-router
+      - persist_to_workspace:
+          root: /tmp/workspace
+          paths:
+            - "*"
+
   test-core-clean-build:
     <<: *defaults
     steps:
@@ -181,6 +233,64 @@ jobs:
           command: npm run lint
           working_directory: /tmp/workspace/angular
 
+  test-react-lint:
+    <<: *defaults
+    steps:
+      - checkout
+      - attach_workspace:
+          at: /tmp/workspace
+      - run:
+          command: npm run lint
+          working_directory: /tmp/workspace/packages/react
+
+  test-react-router-lint:
+    <<: *defaults
+    steps:
+      - checkout
+      - attach_workspace:
+          at: /tmp/workspace
+      - run:
+          command: npm run lint
+          working_directory: /tmp/workspace/packages/react-router
+
+  test-react-spec:
+    <<: *defaults
+    steps:
+      - checkout
+      - attach_workspace:
+          at: /tmp/workspace
+      - run:
+          command: sudo npm link
+          working_directory: /tmp/workspace/core
+      - run:
+          command: sudo npm link @ionic/core
+          working_directory: /tmp/workspace/packages/react
+      - run:
+          command: npm run test.spec
+          working_directory: /tmp/workspace/packages/react
+
+  test-react-router-spec:
+    <<: *defaults
+    steps:
+      - checkout
+      - attach_workspace:
+          at: /tmp/workspace
+      - run:
+          command: sudo npm link
+          working_directory: /tmp/workspace/core
+      - run:
+          command: sudo npm link @ionic/core
+          working_directory: /tmp/workspace/packages/react
+      - run:
+          command: sudo npm link
+          working_directory: /tmp/workspace/packages/react
+      - run:
+          command: sudo npm link @ionic/react
+          working_directory: /tmp/workspace/packages/react-router
+      - run:
+          command: npm run test.spec
+          working_directory: /tmp/workspace/packages/react-router
+
   test-angular-e2e:
     <<: *defaults
     steps:
@@ -227,6 +337,18 @@ workflows:
           requires: [build-core]
       - build-angular-server:
           requires: [build-angular]
+      - build-react:
+          requires: [build-core]
+      - build-react-router:
+          requires: [build-core, build-react]
+      - test-react-lint:
+          requires: [build-react]
+      - test-react-router-lint:
+          requires: [build-react-router]
+      - test-react-spec:
+          requires: [build-react]
+      - test-react-router-spec:
+          requires: [build-react-router]
       - test-angular-lint:
           requires: [build-angular]
       - test-angular-e2e:

.gitignore

@@ -57,6 +57,7 @@ prerender-static.html
 
 # stencil
 angular/css/
+packages/react/css/
 core/css/
 core/hydrate/
 core/loader/

.scripts/common.js

@@ -11,6 +11,8 @@ const packages = [
   'core',
   'docs',
   'angular',
+  'packages/react',
+  'packages/react-router'
 ];
 
 function readPkg(project) {
@@ -36,33 +38,47 @@ function checkGit(tasks) {
   tasks.push(
     {
       title: 'Check current branch',
-      task: () => execa.stdout('git', ['symbolic-ref', '--short', 'HEAD']).then(branch => {
-        if (branch.indexOf('release') === -1 && branch.indexOf('hotfix') === -1) {
-          throw new Error(`Must be on a "release" or "hotfix" branch.`);
-        }
-      })
+      task: () =>
+        execa.stdout('git', ['symbolic-ref', '--short', 'HEAD']).then(branch => {
+          if (branch.indexOf('release') === -1 && branch.indexOf('hotfix') === -1) {
+            throw new Error(`Must be on a "release" or "hotfix" branch.`);
+          }
+        })
     },
     {
       title: 'Check local working tree',
-      task: () => execa.stdout('git', ['status', '--porcelain']).then(status => {
-        if (status !== '') {
-          throw new Error(`Unclean working tree. Commit or stash changes first.`);
-        }
-      })
+      task: () =>
+        execa.stdout('git', ['status', '--porcelain']).then(status => {
+          if (status !== '') {
+            throw new Error(`Unclean working tree. Commit or stash changes first.`);
+          }
+        })
     },
     {
       title: 'Check remote history',
-      task: () => execa.stdout('git', ['rev-list', '--count', '--left-only', '@{u}...HEAD']).then(result => {
-        if (result !== '0') {
-          throw new Error(`Remote history differs. Please pull changes.`);
-        }
-      })
+      task: () =>
+        execa.stdout('git', ['rev-list', '--count', '--left-only', '@{u}...HEAD']).then(result => {
+          if (result !== '0') {
+            throw new Error(`Remote history differs. Please pull changes.`);
+          }
+        })
     }
   );
 }
 
-const isValidVersion = input => Boolean(semver.valid(input));
+function checkTestDist(tasks) {
+  tasks.push({
+    title: 'Check dist folders for required files',
+    task: () =>
+      execa.stdout('node', ['.scripts/test-dist.js']).then(status => {
+        if (status.indexOf('✅ test.dist') === -1) {
+          throw new Error(`Test Dist did not find some required files`);
+        }
+      })
+  });
+}
 
+const isValidVersion = input => Boolean(semver.valid(input));
 
 function preparePackage(tasks, package, version, install) {
   const projectRoot = projectPath(package);
@@ -74,7 +90,9 @@ function preparePackage(tasks, package, version, install) {
       title: `${pkg.name}: validate new version`,
       task: () => {
         if (!isVersionGreater(pkg.version, version)) {
-          throw new Error(`New version \`${version}\` should be higher than current version \`${pkg.version}\``);
+          throw new Error(
+            `New version \`${version}\` should be higher than current version \`${pkg.version}\``
+          );
         }
       }
     });
@@ -82,7 +100,7 @@ function preparePackage(tasks, package, version, install) {
       projectTasks.push({
         title: `${pkg.name}: install npm dependencies`,
         task: async () => {
-          await fs.remove(path.join(projectRoot, 'node_modules'))
+          await fs.remove(path.join(projectRoot, 'node_modules'));
           await execa('npm', ['i'], { cwd: projectRoot });
         }
       });
@@ -95,6 +113,13 @@ function preparePackage(tasks, package, version, install) {
         title: `${pkg.name}: npm link @ionic/core`,
         task: () => execa('npm', ['link', '@ionic/core'], { cwd: projectRoot })
       });
+
+      if (package === 'packages/react-router') {
+        projectTasks.push({
+          title: `${pkg.name}: npm link @ionic/react`,
+          task: () => execa('npm', ['link', '@ionic/react'], { cwd: projectRoot })
+        });
+      }
     }
 
     if (version) {
@@ -105,7 +130,7 @@ function preparePackage(tasks, package, version, install) {
       projectTasks.push({
         title: `${pkg.name}: update ionic/core dep to ${version}`,
         task: () => {
-          updateDependency(pkg, "@ionic/core", version);
+          updateDependency(pkg, '@ionic/core', version);
           writePkg(package, pkg);
         }
       });
@@ -134,7 +159,6 @@ function preparePackage(tasks, package, version, install) {
   });
 }
 
-
 function prepareDevPackage(tasks, package, version) {
   const projectRoot = projectPath(package);
   const pkg = readPkg(package);
@@ -152,7 +176,7 @@ function prepareDevPackage(tasks, package, version) {
     projectTasks.push({
       title: `${pkg.name}: update ionic/core dep to ${version}`,
       task: () => {
-        updateDependency(pkg, "@ionic/core", version);
+        updateDependency(pkg, '@ionic/core', version);
         writePkg(package, pkg);
       }
     });
@@ -181,33 +205,38 @@ 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);
-          }
-        },
+    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);
+        }
       }
-    )
+    });
+    if (package === 'packages/react-router') {
+      tasks.push({
+        title: `${package} update @ionic/react dependency, if present ${tc.dim(`(${version})`)}`,
+        task: async () => {
+          const pkg = readPkg(package);
+          updateDependency(pkg, '@ionic/react', 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 });
-      }
+  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') {
@@ -237,7 +266,7 @@ function publishPackages(tasks, packages, version, tag = 'latest') {
       title: `${package}: publish to ${tag} tag`,
       task: async () => {
         await execa('npm', ['publish', '--tag', tag], { cwd: projectRoot });
-      },
+      }
     });
   });
 }
@@ -261,11 +290,12 @@ function isVersionGreater(oldVersion, newVersion) {
 function copyCDNLoader(tasks, version) {
   tasks.push({
     title: `Copy CDN loader`,
-    task: () => execa('node', ['copy-cdn-loader.js', version], { cwd: path.join(rootDir, 'core', 'scripts') }),
+    task: () => execa('node', ['copy-cdn-loader.js', version], { cwd: path.join(rootDir, 'core', 'scripts') })
   });
 }
 
 module.exports = {
+  checkTestDist,
   checkGit,
   isValidVersion,
   isVersionGreater,
@@ -281,5 +311,5 @@ module.exports = {
   updateDependency,
   updatePackageVersion,
   updatePackageVersions,
-  writePkg,
+  writePkg
 };

.scripts/prepare.js

@@ -107,13 +107,14 @@ async function preparePackages(packages, version, install) {
   });
 
   // add update package.json of each project
-  packages.forEach(package => {
-    common.updatePackageVersion(tasks, package, version);
-  });
+  common.updatePackageVersions(tasks, packages, version);
 
   // generate changelog
   generateChangeLog(tasks);
 
+  // check dist folders
+  common.checkTestDist(tasks);
+
   // update core readme with version number
   updateCoreReadme(tasks, version);
   common.copyCDNLoader(tasks, version);

.scripts/release.js

@@ -5,6 +5,7 @@
 const tc = require('turbocolor');
 const execa = require('execa');
 const Listr = require('listr');
+const path = require('path');
 const octokit = require('@octokit/rest')()
 const common = require('./common');
 const fs = require('fs-extra');
@@ -16,6 +17,8 @@ async function main() {
       throw new Error('env.GH_TOKEN is undefined');
     }
 
+    checkProductionRelease();
+
     const tasks = [];
     const { version } = common.readPkg('core');
     const changelog = findChangelog();
@@ -39,6 +42,15 @@ async function main() {
   }
 }
 
+function checkProductionRelease() {
+  const corePath = common.projectPath('core');
+  const hasEsm = fs.existsSync(path.join(corePath, 'dist', 'esm'));
+  const hasEsmEs5 = fs.existsSync(path.join(corePath, 'dist', 'esm-es5'));
+  const hasCjs = fs.existsSync(path.join(corePath, 'dist', 'cjs'));
+  if (!hasEsm || !hasEsmEs5 || !hasCjs) {
+    throw new Error('core build is not a production build');
+  }
+}
 
 function publishGit(tasks, version, changelog) {
   const tag = `v${version}`;

.scripts/test-dist.js

@@ -0,0 +1,82 @@
+const path = require('path');
+const fs = require('fs');
+
+// Test dist build:
+// Double-triple check all the packages
+// and files are good to go before publishing
+[
+  // core
+  {
+    files: ['../core/dist/index.js', '../core/dist/ionic/index.esm.js']
+  },
+  // angular
+  {
+    files: ['../angular/dist/fesm5.cjs.js']
+  },
+  // react
+  {
+    files: ['../packages/react/dist/index.js']
+  },
+  // react-router
+  {
+    files: ['../packages/react-router/dist/index.js']
+  }
+].forEach(testPackage);
+
+function testPackage(testPkg) {
+  if (testPkg.packageJson) {
+    const pkgDir = path.dirname(testPkg.packageJson);
+    const pkgJson = require(testPkg.packageJson);
+
+    if (!pkgJson.name) {
+      throw new Error('missing package.json name: ' + testPkg.packageJson);
+    }
+
+    if (!pkgJson.main) {
+      throw new Error('missing package.json main: ' + testPkg.packageJson);
+    }
+
+    const pkgPath = path.join(pkgDir, pkgJson.main);
+    const pkgImport = require(pkgPath);
+
+    if (testPkg.files) {
+      if (!Array.isArray(pkgJson.files)) {
+        throw new Error(testPkg.packageJson + ' missing "files" property');
+      }
+      testPkg.files.forEach(testPkgFile => {
+        if (!pkgJson.files.includes(testPkgFile)) {
+          throw new Error(testPkg.packageJson + ' missing file ' + testPkgFile);
+        }
+
+        const filePath = path.join(__dirname, pkgDir, testPkgFile);
+        fs.accessSync(filePath);
+      });
+    }
+
+    if (pkgJson.module) {
+      const moduleIndex = path.join(__dirname, pkgDir, pkgJson.module);
+      fs.accessSync(moduleIndex);
+    }
+
+    if (pkgJson.types) {
+      const pkgTypes = path.join(__dirname, pkgDir, pkgJson.types);
+      fs.accessSync(pkgTypes);
+    }
+
+    if (testPkg.exports) {
+      testPkg.exports.forEach(exportName => {
+        const m = pkgImport[exportName];
+        if (!m) {
+          throw new Error('export "' + exportName + '" not found in: ' + testPkg.packageJson);
+        }
+      });
+    }
+  } else if (testPkg.files) {
+    testPkg.files.forEach(file => {
+      const filePath = path.join(__dirname, file);
+      fs.statSync(filePath);
+    });
+  }
+}
+
+console.log(`✅ test.dist`);

CHANGELOG.md

@@ -1,3 +1,157 @@
+## [4.10.3](https://github.com/ionic-team/ionic/compare/v4.10.2...v4.10.3) (2019-10-09)
+
+
+### Bug Fixes
+
+* **content:** set overscroll only on iOS ([#19470](https://github.com/ionic-team/ionic/issues/19470)) ([63c2008](https://github.com/ionic-team/ionic/commit/63c2008a86de19847677fda7b9fedce73ed7669f)), closes [#19465](https://github.com/ionic-team/ionic/issues/19465)
+* **searchbar:** update alignment of chips and other elements in toolbar ([#19596](https://github.com/ionic-team/ionic/issues/19596)) ([637f26b](https://github.com/ionic-team/ionic/commit/637f26b3642a266b6ef3b9d3d71b7327a5d3cc37)), closes [#19495](https://github.com/ionic-team/ionic/issues/19495) [#19502](https://github.com/ionic-team/ionic/issues/19502)
+
+
+
+## [4.10.2](https://github.com/ionic-team/ionic/compare/v4.10.1...v4.10.2) (2019-10-08)
+
+
+### Bug Fixes
+
+* **overlay:** ensure lifecycle events fire properly ([#19579](https://github.com/ionic-team/ionic/issues/19579)) ([a7b9642](https://github.com/ionic-team/ionic/commit/a7b9642)), closes [#19576](https://github.com/ionic-team/ionic/issues/19576)
+
+
+
+## [4.10.1](https://github.com/ionic-team/ionic/compare/v4.10.0...v4.10.1) (2019-10-07)
+
+
+### Bug Fixes
+
+* **animation:** animation timer fallback now accounts for iterations ([#19527](https://github.com/ionic-team/ionic/issues/19527)) ([9f5ed23](https://github.com/ionic-team/ionic/commit/9f5ed23))
+* **css:** update deprecations to remove wrap ([#19535](https://github.com/ionic-team/ionic/issues/19535)) ([bfb704e](https://github.com/ionic-team/ionic/commit/bfb704e)), closes [#19499](https://github.com/ionic-team/ionic/issues/19499)
+* **header:** fix collapsing iOS header when using with split pane ([#19480](https://github.com/ionic-team/ionic/issues/19480)) ([dea1c26](https://github.com/ionic-team/ionic/commit/dea1c26)), closes [#19541](https://github.com/ionic-team/ionic/issues/19541)
+* **list:** add bottom border for first item in inset list ([#19525](https://github.com/ionic-team/ionic/issues/19525)) ([71b8853](https://github.com/ionic-team/ionic/commit/71b8853)), closes [#19507](https://github.com/ionic-team/ionic/issues/19507)
+* **md:** fix flicker when navigating back in MD mode on certain Android devices ([#19553](https://github.com/ionic-team/ionic/issues/19553)) ([19ee21a](https://github.com/ionic-team/ionic/commit/19ee21a)), closes [#19491](https://github.com/ionic-team/ionic/issues/19491)
+* **searchbar:** update padding and button alignment ([#19532](https://github.com/ionic-team/ionic/issues/19532)) ([77658e6](https://github.com/ionic-team/ionic/commit/77658e6)), closes [#19502](https://github.com/ionic-team/ionic/issues/19502)
+
+
+
+# [4.10.0 Neon](https://github.com/ionic-team/ionic/compare/v4.9.1...v4.10.0) (2019-09-27)
+
+
+### Bug Fixes
+
+* **angular:** add warning if initialized more than once ([#19393](https://github.com/ionic-team/ionic/issues/19393)) ([e98769e](https://github.com/ionic-team/ionic/commit/e98769e))
+* **animation:** set property defaults to avoid inconsistencies ([#19321](https://github.com/ionic-team/ionic/issues/19321)) ([1cbb52c](https://github.com/ionic-team/ionic/commit/1cbb52c))
+* **animation:** fallback to CSS Animations on older versions of Chrome ([#19288](https://github.com/ionic-team/ionic/issues/19288)) ([2d39c07](https://github.com/ionic-team/ionic/commit/2d39c07)), closes [#19272](https://github.com/ionic-team/ionic/issues/19272)
+* **animation:** animations of duration 0 now run in Safari ([#19287](https://github.com/ionic-team/ionic/issues/19287)) ([4e544f1](https://github.com/ionic-team/ionic/commit/4e544f1)), closes [#19285](https://github.com/ionic-team/ionic/issues/19285)
+* **components:** fix crash in IE11 when using classList add() or remove() ([#19460](https://github.com/ionic-team/ionic/issues/19460)) ([b4d92c6](https://github.com/ionic-team/ionic/commit/b4d92c6))
+* **components:** improve CSS Variable support in IE11 ([#19473](https://github.com/ionic-team/ionic/issues/19473)) ([44ad074](https://github.com/ionic-team/ionic/commit/44ad074))
+* **content:** remove pointer-events from iOS transition shadow ([#19471](https://github.com/ionic-team/ionic/issues/19471)) ([8a52c7d](https://github.com/ionic-team/ionic/commit/8a52c7d)), closes [#19466](https://github.com/ionic-team/ionic/issues/19466)
+* **menu:** menus show proper drop shadows ([#19454](https://github.com/ionic-team/ionic/issues/19454)) ([eab0865](https://github.com/ionic-team/ionic/commit/eab0865)), closes [#19387](https://github.com/ionic-team/ionic/issues/19387)
+* **radio-group:** get radios before caching value to avoid infinite loop ([#19448](https://github.com/ionic-team/ionic/issues/19448)) ([cf223e4](https://github.com/ionic-team/ionic/commit/cf223e4)), closes [#19277](https://github.com/ionic-team/ionic/issues/19277)
+* **react:** update events to use proper types ([c79e74b](https://github.com/ionic-team/ionic/commit/c79e74b))
+* **router-outlet:** hide leaving view after transition finishes ([#19335](https://github.com/ionic-team/ionic/issues/19335)) ([bfa17d1](https://github.com/ionic-team/ionic/commit/bfa17d1))
+
+
+### Features
+
+* **config:** expose getMode() and deprecate Config.set() ([#19104](https://github.com/ionic-team/ionic/issues/19104)) ([0f05ea4](https://github.com/ionic-team/ionic/commit/0f05ea4))
+* **docs:** add VSCode docs support ([#19309](https://github.com/ionic-team/ionic/issues/19309)) ([a3f345c](https://github.com/ionic-team/ionic/commit/a3f345c))
+* **title:** add support for small title ([#19215](https://github.com/ionic-team/ionic/issues/19215)) ([e27962d](https://github.com/ionic-team/ionic/commit/e27962d)), closes [#18898](https://github.com/ionic-team/ionic/issues/18898)
+* **title:** add support for large title (experimental) ([#19268](https://github.com/ionic-team/ionic/issues/19268)) ([923312e](https://github.com/ionic-team/ionic/commit/923312e)), closes [#16885](https://github.com/ionic-team/ionic/issues/16885)
+
+
+### Performance Improvements
+
+* **animation:** avoid ngzone with requestAnimationFrame ([#19457](https://github.com/ionic-team/ionic/issues/19457)) ([8ca97ce](https://github.com/ionic-team/ionic/commit/8ca97ce))
+
+
+
+## [4.9.1](https://github.com/ionic-team/ionic/compare/v4.9.0...v4.9.1) (2019-09-16)
+
+
+### Bug Fixes
+
+* **platform:** properly detect iPads running iPadOS ([#19258](https://github.com/ionic-team/ionic/issues/19258)) ([4a90096](https://github.com/ionic-team/ionic/commit/4a90096))
+
+
+
+# [4.9.0 Fluorine](https://github.com/ionic-team/ionic/compare/v4.8.1...v4.9.0) (2019-09-04)
+
+
+### Bug Fixes
+
+* **all:** allow elements to be reused once removed from the DOM ([#18963](https://github.com/ionic-team/ionic/pull/18963)) ([48a2763](https://github.com/ionic-team/ionic/commit/48a2763)), closes [#18843](https://github.com/ionic-team/ionic/issues/18843) [#17344](https://github.com/ionic-team/ionic/issues/17344) [#16453](https://github.com/ionic-team/ionic/issues/16453) [#15879](https://github.com/ionic-team/ionic/issues/15879) [#15788](https://github.com/ionic-team/ionic/issues/15788) [#15484](https://github.com/ionic-team/ionic/issues/15484) [#17890](https://github.com/ionic-team/ionic/issues/17890) [#16364](https://github.com/ionic-team/ionic/issues/16364)
+* **animation:** add correct `onFinish` interface parameters ([#19199](https://github.com/ionic-team/ionic/issues/19199)) ([a81653b](https://github.com/ionic-team/ionic/commit/a81653b))
+* **animation:** improve Web Animation feature detection accuracy ([#19212](https://github.com/ionic-team/ionic/issues/19212)) ([6eca5b0](https://github.com/ionic-team/ionic/commit/6eca5b0)), closes [#19205](https://github.com/ionic-team/ionic/issues/19205)
+* **animation:** properly clean up elements when using `destroy` ([#19210](https://github.com/ionic-team/ionic/issues/19210)) ([93f2064](https://github.com/ionic-team/ionic/commit/93f2064))
+* **segment:** do not emit ionChange until didLoad ([#19218](https://github.com/ionic-team/ionic/issues/19218)) ([9751f14](https://github.com/ionic-team/ionic/commit/9751f14)), closes [#19204](https://github.com/ionic-team/ionic/issues/19204)
+
+### Features
+
+* **nav-link:** add `nav-link` and deprecate `nav-push`, `nav-pop`, and `nav-set-root` ([#18909](https://github.com/ionic-team/ionic/issues/18909)) ([c3044f5](https://github.com/ionic-team/ionic/commit/c3044f5))
+* **slides:** expose full Swiper API ([#19137](https://github.com/ionic-team/ionic/issues/19137)) ([e1fa461](https://github.com/ionic-team/ionic/commit/e1fa461))
+
+
+
+## [4.8.1](https://github.com/ionic-team/ionic/compare/v4.8.0...v4.8.1) (2019-08-27)
+
+
+### Bug Fixes
+
+* **animation:** enable backwards compatibility for overlay animations ([#19160](https://github.com/ionic-team/ionic/issues/19160)) ([fb70980](https://github.com/ionic-team/ionic/commit/fb70980))
+* **gesture:** account for negative step values with Web Animations ([#19196](https://github.com/ionic-team/ionic/issues/19196)) ([b3c7436](https://github.com/ionic-team/ionic/commit/b3c7436))
+* **ios:** clear opacity on toolbar background after iOS transition ([#19169](https://github.com/ionic-team/ionic/issues/19169)) ([fa958a5](https://github.com/ionic-team/ionic/commit/fa958a5))
+* **md:** set fill mode on MD transition to `both` ([#19161](https://github.com/ionic-team/ionic/issues/19161)) ([0e8ab49](https://github.com/ionic-team/ionic/commit/0e8ab49))
+
+
+
+# [4.8.0 Oxygen](https://github.com/ionic-team/ionic/compare/v4.7.4...v4.8.0) (2019-08-21)
+
+
+### Bug Fixes
+
+* **alert:** apply styling to disabled items ([#18545](https://github.com/ionic-team/ionic/issues/18545)) ([67ed89d](https://github.com/ionic-team/ionic/commit/67ed89d))
+* **platform:** properly detect Electron platform ([#19044](https://github.com/ionic-team/ionic/issues/19044)) ([e8cdda0](https://github.com/ionic-team/ionic/commit/e8cdda0)), closes [#19043](https://github.com/ionic-team/ionic/issues/19043)
+* **toggle:** change background to use CSS variable ([#19012](https://github.com/ionic-team/ionic/issues/19012)) ([94e525c](https://github.com/ionic-team/ionic/commit/94e525c)), closes [#18940](https://github.com/ionic-team/ionic/issues/18940)
+* **transition:** enable iOS transition shadow by default ([#19051](https://github.com/ionic-team/ionic/issues/19051)) ([a5d3c6b](https://github.com/ionic-team/ionic/commit/a5d3c6b))
+
+
+### Features
+
+* **animation:** add animation utility (experimental) ([#18918](https://github.com/ionic-team/ionic/issues/18918)) ([30ca46a](https://github.com/ionic-team/ionic/commit/30ca46a))
+* **gesture:** add gesture utility (experimental) ([#18918](https://github.com/ionic-team/ionic/issues/18918)) ([30ca46a](https://github.com/ionic-team/ionic/commit/30ca46a))
+* **searchbar:** add `inputmode` property ([#18980](https://github.com/ionic-team/ionic/issues/18980)) ([1187dc2](https://github.com/ionic-team/ionic/commit/1187dc2))
+* **spinner:** add circular spinner for MD default ([#19052](https://github.com/ionic-team/ionic/issues/19052)) ([e33cf85](https://github.com/ionic-team/ionic/commit/e33cf85))
+
+
+
+## [4.7.4](https://github.com/ionic-team/ionic/compare/v4.7.3...v4.7.4) (2019-08-07)
+
+
+### Bug Fixes
+
+* **core:** remove extra semicolons being rendered ([#19033](https://github.com/ionic-team/ionic/issues/19033)) ([39f0768](https://github.com/ionic-team/ionic/commit/39f0768))
+
+
+
+## [4.7.3](https://github.com/ionic-team/ionic/compare/v4.7.2...v4.7.3) (2019-08-07)
+
+* **core:** fix an issue with production builds of `@ionic/core`
+
+
+
+## [4.7.2](https://github.com/ionic-team/ionic/compare/v4.7.1...v4.7.2) (2019-08-07)
+
+
+### Bug Fixes
+
+* **angular:** hardware back button subscribeWithPriority triggers change detection ([#18962](https://github.com/ionic-team/ionic/issues/18962)) ([3a22105](https://github.com/ionic-team/ionic/commit/3a22105)), closes [#18959](https://github.com/ionic-team/ionic/issues/18959)
+* **angular:** nested inputs no longer conflict with each other ([#18976](https://github.com/ionic-team/ionic/issues/18976)) ([6bbdb80](https://github.com/ionic-team/ionic/commit/6bbdb80)), closes [#18248](https://github.com/ionic-team/ionic/issues/18248)
+* **range:** ion-range value now submitted with form ([#19008](https://github.com/ionic-team/ionic/issues/19008)) ([8f7853c](https://github.com/ionic-team/ionic/commit/8f7853c))
+* **reorder:** only move item if reorder happens ([#19007](https://github.com/ionic-team/ionic/issues/19007)) ([d237e80](https://github.com/ionic-team/ionic/commit/d237e80))
+* **router:** partial swipe to go back gesture no longer breaks view([#18977](https://github.com/ionic-team/ionic/issues/18977)) ([713ea8a](https://github.com/ionic-team/ionic/commit/713ea8a)), closes [#18462](https://github.com/ionic-team/ionic/issues/18462)
+* **toast:** allow loading ion-icon from asset path ([#18969](https://github.com/ionic-team/ionic/issues/18969)) ([23f327e](https://github.com/ionic-team/ionic/commit/23f327e))
+* **vue:** rename swipeEnable to swipeGesture ([#17346](https://github.com/ionic-team/ionic/issues/17346)) ([c2348f7](https://github.com/ionic-team/ionic/commit/c2348f7)), closes [#16002](https://github.com/ionic-team/ionic/issues/16002)
+
+
+
 ## [4.7.1](https://github.com/ionic-team/ionic/compare/v4.7.0...v4.7.1) (2019-07-26)
 
 

README.md

@@ -13,7 +13,7 @@ Ionic is based on [Web Components](https://www.webcomponents.org/introduction) a
 | **Core** | [`@ionic/core`](https://www.npmjs.com/package/@ionic/core) | [![version](https://img.shields.io/npm/v/@ionic/core/latest.svg)](https://www.npmjs.com/package/@ionic/core) | [`README.md`](core/README.md)
 | **Angular** | [`@ionic/angular`](https://www.npmjs.com/package/@ionic/angular) | [![version](https://img.shields.io/npm/v/@ionic/angular/latest.svg)](https://www.npmjs.com/package/@ionic/angular) | [`README.md`](angular/README.md)
 | **Vue** | [`@ionic/vue`](https://www.npmjs.com/package/@ionic/vue) | [![version](https://img.shields.io/npm/v/@ionic/vue/latest.svg)](https://www.npmjs.com/package/@ionic/vue) | [`README.md`](vue/README.md)
-| **React** | [`@ionic/react`](https://www.npmjs.com/package/@ionic/react) | [![version](https://img.shields.io/npm/v/@ionic/react/latest.svg)](https://www.npmjs.com/package/@ionic/react) | [`README.md`](react/README.md)
+| **React** | [`@ionic/react`](https://www.npmjs.com/package/@ionic/react) | [![version](https://img.shields.io/npm/v/@ionic/react/latest.svg)](https://www.npmjs.com/package/@ionic/react) | [`README.md`](packages/react/README.md)
 
 Looking for the `ionic-angular` package? Ionic 3 has been moved to the [`ionic-v3`](https://github.com/ionic-team/ionic-v3) repo. See [Earlier Versions](#earlier-versions).
 

angular/BREAKING.md

@@ -62,7 +62,7 @@ A list of the breaking changes introduced to each component in Ionic Angular v4.
 
 ## Action Sheet
 
-The `title`, `subTitle` and `enableBackdropDismiss` properties has been renamed to `header`, `subHeader` and `backdropDismiss` respectively.
+The `title`, `subTitle` and `enableBackdropDismiss` properties have been renamed to `header`, `subHeader` and `backdropDismiss` respectively.
 
 **Old Usage Example:**
 
@@ -89,7 +89,7 @@ await actionSheet.present();
 
 ## Alert
 
-The `title`, `subTitle` and `enableBackdropDismiss` properties has been renamed to `header`, `subHeader` and `backdropDismiss` respectively.
+The `title`, `subTitle` and `enableBackdropDismiss` properties have been renamed to `header`, `subHeader` and `backdropDismiss` respectively.
 
 **Old Usage Example:**
 
@@ -498,7 +498,7 @@ The `<ion-fab>` container was previously placed inside of the fixed content by d
 
 ### Markup Changed
 
-The Grid has been refactored in order to support css variables and a dynamic number of columns. The following column attributes have been changed.
+The Grid has been refactored in order to support CSS variables and a dynamic number of columns. The following column attributes have been changed.
 
 _In the following examples, `{breakpoint}` refers to the optional screen breakpoint (xs, sm, md, lg, xl) and `{value}` refers to the number of columns (`auto` or a number between `1` and `12`)._
 
@@ -507,7 +507,7 @@ _In the following examples, `{breakpoint}` refers to the optional screen breakpo
 - `push-{breakpoint}-{value}` attributes have been renamed to `push-{breakpoint}=“{value}”`
 - `pull-{breakpoint}-{value}` attributes have been renamed to `pull-{breakpoint}=“{value}”`
 
-Customizing the padding and width of a grid should now be done with css variables. For more information, see [Grid Layout](https://github.com/ionic-team/ionic-docs/blob/master/src/content/layout/grid.md).
+Customizing the padding and width of a grid should now be done with CSS variables. For more information, see [Grid Layout](https://github.com/ionic-team/ionic-docs/blob/master/src/content/layout/grid.md).
 
 ## Icon
 
@@ -1092,7 +1092,7 @@ openLoading() {
 ```javascript
 async openLoading() {
   let loading = this.loadingCtrl.create({
-    content: 'Loading...'
+    message: 'Loading...'
   });
 
   await loading.present();
@@ -1798,7 +1798,7 @@ To include the stylesheet for testing such as in a Plunker, Codepen, or anywhere
 
 #### Production
 
-To use the css in production, we recommend importing it into a global file, such as `app/global.scss`:
+To use the CSS in production, we recommend importing it into a global file, such as `app/global.scss`:
 
 ```css
 /** Basic CSS for Ionic Apps */

angular/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ionic/angular",
-  "version": "4.7.1",
+  "version": "4.10.3",
   "description": "Angular specific wrappers for @ionic/core",
   "keywords": [
     "ionic",
@@ -49,7 +49,7 @@
     "css/"
   ],
   "dependencies": {
-    "@ionic/core": "4.7.1",
+    "@ionic/core": "4.10.3",
     "tslib": "^1.9.3"
   },
   "peerDependencies": {

angular/src/app-initialize.ts

@@ -5,10 +5,16 @@ import { Config } from './providers/config';
 import { IonicWindow } from './types/interfaces';
 import { raf } from './util/util';
 
+let didInitialize = false;
+
 export const appInitialize = (config: Config, doc: Document, zone: NgZone) => {
   return (): any => {
     const win: IonicWindow | undefined = doc.defaultView as any;
     if (win) {
+      if (didInitialize) {
+        console.warn('Ionic Angular was already initialized. Make sure IonicModule.forRoot() is just called once.');
+      }
+      didInitialize = true;
       const Ionic = win.Ionic = win.Ionic || {};
 
       Ionic.config = {

angular/src/directives/control-value-accessors/value-accessor.ts

@@ -74,16 +74,16 @@ const getClasses = (element: HTMLElement) => {
 
 const setClasses = (element: HTMLElement, classes: string[]) => {
   const classList = element.classList;
-
-  classList.remove(
+  [
     'ion-valid',
     'ion-invalid',
     'ion-touched',
     'ion-untouched',
     'ion-dirty',
     'ion-pristine'
-  );
-  classList.add(...classes);
+  ].forEach(c => classList.remove(c));
+
+  classes.forEach(c => classList.add(c));
 };
 
 const startsWith = (input: string, search: string): boolean => {

angular/src/directives/css-utils-deprecations.ts

@@ -0,0 +1,134 @@
+import { Directive, ElementRef } from '@angular/core';
+
+@Directive({
+  selector: '[align-self-start], [align-self-end], [align-self-center], [align-self-stretch], [align-self-baseline], [align-self-auto], [wrap-reverse], [justify-content-start], [justify-content-center], [justify-content-end], [justify-content-around], [justify-content-between], [justify-content-evenly], [align-items-start], [align-items-center], [align-items-end], [align-items-stretch], [align-items-baseline], [float-left], [float-right], [float-start], [float-end], [float-sm-left], [float-sm-right], [float-sm-start], [float-sm-end], [float-md-left], [float-md-right], [float-md-start], [float-md-end], [float-lg-left], [float-lg-right], [float-lg-start], [float-lg-end], [float-xl-left], [float-xl-right], [float-xl-start], [float-xl-end], [text-center], [text-justify], [text-start], [text-end], [text-left], [text-right], [text-nowrap], [text-wrap], [text-sm-center], [text-sm-justify], [text-sm-start], [text-sm-end], [text-sm-left], [text-sm-right], [text-sm-nowrap], [text-sm-wrap], [text-md-center], [text-md-justify], [text-md-start], [text-md-end], [text-md-left], [text-md-right], [text-md-nowrap], [text-md-wrap], [text-lg-center], [text-lg-justify], [text-lg-start], [text-lg-end], [text-lg-left], [text-lg-right], [text-lg-nowrap], [text-lg-wrap], [text-xl-center], [text-xl-justify], [text-xl-start], [text-xl-end], [text-xl-left], [text-xl-right], [text-xl-nowrap], [text-xl-wrap], [text-uppercase], [text-lowercase], [text-capitalize], [text-sm-uppercase], [text-sm-lowercase], [text-sm-capitalize], [text-md-uppercase], [text-md-lowercase], [text-md-capitalize], [text-lg-uppercase], [text-lg-lowercase], [text-lg-capitalize], [text-xl-uppercase], [text-xl-lowercase], [text-xl-capitalize], [no-padding], [padding], [padding-top], [padding-bottom], [padding-start], [padding-end], [padding-vertical], [padding-horizontal], [no-margin], [margin], [margin-top], [margin-bottom], [margin-start], [margin-end], [margin-vertical], [margin-horizontal]',
+})
+export class CssUtilsDeprecations {
+  constructor(ref: ElementRef) {
+    const el = (ref.nativeElement as HTMLElement);
+    const attributes = Array.from(el.attributes)
+      .map(a => a.name)
+      .filter(n => DEPRECATED_ATTRIBUTES.includes(n));
+
+    if (attributes.length > 0) {
+      console.warn(`[DEPRECATED][CSS] Ionic CSS attributes are deprecated.
+Replace:
+'<${el.tagName.toLowerCase()} ${attributes.map(n => `${n}`).join(' ')}>'
+
+With:
+'<${el.tagName.toLowerCase()} class="${attributes.map(n => `ion-${n}`).join(' ')}">'
+      `);
+    }
+  }
+}
+const DEPRECATED_ATTRIBUTES = [
+  'align-self-start',
+  'align-self-end',
+  'align-self-center',
+  'align-self-stretch',
+  'align-self-baseline',
+  'align-self-auto',
+  'wrap-reverse',
+  'justify-content-start',
+  'justify-content-center',
+  'justify-content-end',
+  'justify-content-around',
+  'justify-content-between',
+  'justify-content-evenly',
+  'align-items-start',
+  'align-items-center',
+  'align-items-end',
+  'align-items-stretch',
+  'align-items-baseline',
+  'float-left',
+  'float-right',
+  'float-start',
+  'float-end',
+  'float-sm-left',
+  'float-sm-right',
+  'float-sm-start',
+  'float-sm-end',
+  'float-md-left',
+  'float-md-right',
+  'float-md-start',
+  'float-md-end',
+  'float-lg-left',
+  'float-lg-right',
+  'float-lg-start',
+  'float-lg-end',
+  'float-xl-left',
+  'float-xl-right',
+  'float-xl-start',
+  'float-xl-end',
+  'text-center',
+  'text-justify',
+  'text-start',
+  'text-end',
+  'text-left',
+  'text-right',
+  'text-nowrap',
+  'text-wrap',
+  'text-sm-center',
+  'text-sm-justify',
+  'text-sm-start',
+  'text-sm-end',
+  'text-sm-left',
+  'text-sm-right',
+  'text-sm-nowrap',
+  'text-sm-wrap',
+  'text-md-center',
+  'text-md-justify',
+  'text-md-start',
+  'text-md-end',
+  'text-md-left',
+  'text-md-right',
+  'text-md-nowrap',
+  'text-md-wrap',
+  'text-lg-center',
+  'text-lg-justify',
+  'text-lg-start',
+  'text-lg-end',
+  'text-lg-left',
+  'text-lg-right',
+  'text-lg-nowrap',
+  'text-lg-wrap',
+  'text-xl-center',
+  'text-xl-justify',
+  'text-xl-start',
+  'text-xl-end',
+  'text-xl-left',
+  'text-xl-right',
+  'text-xl-nowrap',
+  'text-xl-wrap',
+  'text-uppercase',
+  'text-lowercase',
+  'text-capitalize',
+  'text-sm-uppercase',
+  'text-sm-lowercase',
+  'text-sm-capitalize',
+  'text-md-uppercase',
+  'text-md-lowercase',
+  'text-md-capitalize',
+  'text-lg-uppercase',
+  'text-lg-lowercase',
+  'text-lg-capitalize',
+  'text-xl-uppercase',
+  'text-xl-lowercase',
+  'text-xl-capitalize',
+  'no-padding',
+  'padding',
+  'padding-top',
+  'padding-bottom',
+  'padding-start',
+  'padding-end',
+  'padding-vertical',
+  'padding-horizontal',
+  'no-margin',
+  'margin',
+  'margin-top',
+  'margin-bottom',
+  'margin-start',
+  'margin-end',
+  'margin-vertical',
+  'margin-horizontal'
+];

angular/src/directives/navigation/stack-controller.ts

@@ -230,7 +230,8 @@ export class StackController {
     const leavingEl = leavingView ? leavingView.element : undefined;
     const containerEl = this.containerEl;
     if (enteringEl && enteringEl !== leavingEl) {
-      enteringEl.classList.add('ion-page', 'ion-page-invisible');
+      enteringEl.classList.add('ion-page');
+      enteringEl.classList.add('ion-page-invisible');
       if (enteringEl.parentElement !== containerEl) {
         containerEl.appendChild(enteringEl);
       }

angular/src/directives/proxies-list.txt

@@ -43,6 +43,7 @@ d.IonApp,
   d.IonMenuButton,
   d.IonMenuToggle,
   d.IonNav,
+  d.IonNavLink,
   d.IonNavPop,
   d.IonNavPush,
   d.IonNavSetRoot,

angular/src/directives/proxies-utils.ts

@@ -1,7 +1,7 @@
 /* tslint:disable */
 import { fromEvent } from 'rxjs';
 
-export function proxyInputs(Cmp: any, inputs: string[]) {
+export const proxyInputs = (Cmp: any, inputs: string[]) => {
   const Prototype = Cmp.prototype;
   inputs.forEach(item => {
     Object.defineProperty(Prototype, item, {
@@ -11,9 +11,9 @@ export function proxyInputs(Cmp: any, inputs: string[]) {
       },
     });
   });
-}
+};
 
-export function proxyMethods(Cmp: any, methods: string[]) {
+export const proxyMethods = (Cmp: any, methods: string[]) => {
   const Prototype = Cmp.prototype;
   methods.forEach(methodName => {
     Prototype[methodName] = function() {
@@ -21,8 +21,8 @@ export function proxyMethods(Cmp: any, methods: string[]) {
       return this.z.runOutsideAngular(() => this.el[methodName].apply(this.el, args));
     };
   });
-}
+};
 
-export function proxyOutputs(instance: any, el: any, events: string[]) {
+export const proxyOutputs = (instance: any, el: any, events: string[]) => {
   events.forEach(eventName => instance[eventName] = fromEvent(el, eventName));
-}
+};

angular/src/directives/proxies.ts

@@ -75,7 +75,7 @@ export class IonButton {
 proxyInputs(IonButton, ['buttonType', 'color', 'disabled', 'download', 'expand', 'fill', 'href', 'mode', 'rel', 'routerDirection', 'shape', 'size', 'strong', 'target', 'type']);
 
 export declare interface IonButtons extends Components.IonButtons {}
-@Component({ selector: 'ion-buttons', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>' })
+@Component({ selector: 'ion-buttons', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>', inputs: ['collapse'] })
 export class IonButtons {
   protected el: HTMLElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
@@ -83,6 +83,7 @@ export class IonButtons {
     this.el = r.nativeElement;
   }
 }
+proxyInputs(IonButtons, ['collapse']);
 
 export declare interface IonCard extends Components.IonCard {}
 @Component({ selector: 'ion-card', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>', inputs: ['button', 'color', 'disabled', 'download', 'href', 'mode', 'rel', 'routerDirection', 'target', 'type'] })
@@ -269,7 +270,7 @@ export class IonGrid {
 proxyInputs(IonGrid, ['fixed']);
 
 export declare interface IonHeader extends Components.IonHeader {}
-@Component({ selector: 'ion-header', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>', inputs: ['mode', 'translucent'] })
+@Component({ selector: 'ion-header', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>', inputs: ['collapse', 'mode', 'translucent'] })
 export class IonHeader {
   protected el: HTMLElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
@@ -277,7 +278,7 @@ export class IonHeader {
     this.el = r.nativeElement;
   }
 }
-proxyInputs(IonHeader, ['mode', 'translucent']);
+proxyInputs(IonHeader, ['collapse', 'mode', 'translucent']);
 
 export declare interface IonIcon extends Components.IonIcon {}
 @Component({ selector: 'ion-icon', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>', inputs: ['ariaLabel', 'color', 'flipRtl', 'icon', 'ios', 'lazy', 'md', 'mode', 'name', 'size', 'src'] })
@@ -505,6 +506,17 @@ export class IonNav {
 proxyMethods(IonNav, ['push', 'insert', 'insertPages', 'pop', 'popTo', 'popToRoot', 'removeIndex', 'setRoot', 'setPages', 'getActive', 'getByIndex', 'canGoBack', 'getPrevious']);
 proxyInputs(IonNav, ['animated', 'animation', 'root', 'rootParams', 'swipeGesture']);
 
+export declare interface IonNavLink extends Components.IonNavLink {}
+@Component({ selector: 'ion-nav-link', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>', inputs: ['component', 'componentProps', 'routerDirection'] })
+export class IonNavLink {
+  protected el: HTMLElement;
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+    c.detach();
+    this.el = r.nativeElement;
+  }
+}
+proxyInputs(IonNavLink, ['component', 'componentProps', 'routerDirection']);
+
 export declare interface IonNavPop extends Components.IonNavPop {}
 @Component({ selector: 'ion-nav-pop', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>' })
 export class IonNavPop {
@@ -676,7 +688,7 @@ export class IonRow {
 }
 
 export declare interface IonSearchbar extends Components.IonSearchbar {}
-@Component({ selector: 'ion-searchbar', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>', inputs: ['animated', 'autocomplete', 'autocorrect', 'cancelButtonIcon', 'cancelButtonText', 'clearIcon', 'color', 'debounce', 'disabled', 'mode', 'placeholder', 'searchIcon', 'showCancelButton', 'spellcheck', 'type', 'value'] })
+@Component({ selector: 'ion-searchbar', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>', inputs: ['animated', 'autocomplete', 'autocorrect', 'cancelButtonIcon', 'cancelButtonText', 'clearIcon', 'color', 'debounce', 'disabled', 'inputmode', 'mode', 'placeholder', 'searchIcon', 'showCancelButton', 'spellcheck', 'type', 'value'] })
 export class IonSearchbar {
   ionInput!: EventEmitter<CustomEvent>;
   ionChange!: EventEmitter<CustomEvent>;
@@ -692,18 +704,17 @@ export class IonSearchbar {
   }
 }
 proxyMethods(IonSearchbar, ['setFocus', 'getInputElement']);
-proxyInputs(IonSearchbar, ['animated', 'autocomplete', 'autocorrect', 'cancelButtonIcon', 'cancelButtonText', 'clearIcon', 'color', 'debounce', 'disabled', 'mode', 'placeholder', 'searchIcon', 'showCancelButton', 'spellcheck', 'type', 'value']);
+proxyInputs(IonSearchbar, ['animated', 'autocomplete', 'autocorrect', 'cancelButtonIcon', 'cancelButtonText', 'clearIcon', 'color', 'debounce', 'disabled', 'inputmode', 'mode', 'placeholder', 'searchIcon', 'showCancelButton', 'spellcheck', 'type', 'value']);
 
 export declare interface IonSegment extends Components.IonSegment {}
 @Component({ selector: 'ion-segment', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>', inputs: ['color', 'disabled', 'mode', 'scrollable', 'value'] })
 export class IonSegment {
   ionChange!: EventEmitter<CustomEvent>;
-  ionStyle!: EventEmitter<CustomEvent>;
   protected el: HTMLElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
-    proxyOutputs(this, this.el, ['ionChange', 'ionStyle']);
+    proxyOutputs(this, this.el, ['ionChange']);
   }
 }
 proxyInputs(IonSegment, ['color', 'disabled', 'mode', 'scrollable', 'value']);
@@ -796,7 +807,7 @@ export class IonSlides {
     proxyOutputs(this, this.el, ['ionSlidesDidLoad', 'ionSlideTap', 'ionSlideDoubleTap', 'ionSlideWillChange', 'ionSlideDidChange', 'ionSlideNextStart', 'ionSlidePrevStart', 'ionSlideNextEnd', 'ionSlidePrevEnd', 'ionSlideTransitionStart', 'ionSlideTransitionEnd', 'ionSlideDrag', 'ionSlideReachStart', 'ionSlideReachEnd', 'ionSlideTouchStart', 'ionSlideTouchEnd']);
   }
 }
-proxyMethods(IonSlides, ['update', 'updateAutoHeight', 'slideTo', 'slideNext', 'slidePrev', 'getActiveIndex', 'getPreviousIndex', 'length', 'isEnd', 'isBeginning', 'startAutoplay', 'stopAutoplay', 'lockSwipeToNext', 'lockSwipeToPrev', 'lockSwipes']);
+proxyMethods(IonSlides, ['update', 'updateAutoHeight', 'slideTo', 'slideNext', 'slidePrev', 'getActiveIndex', 'getPreviousIndex', 'length', 'isEnd', 'isBeginning', 'startAutoplay', 'stopAutoplay', 'lockSwipeToNext', 'lockSwipeToPrev', 'lockSwipes', 'getSwiper']);
 proxyInputs(IonSlides, ['mode', 'options', 'pager', 'scrollbar']);
 
 export declare interface IonSpinner extends Components.IonSpinner {}
@@ -884,7 +895,7 @@ export class IonThumbnail {
 }
 
 export declare interface IonTitle extends Components.IonTitle {}
-@Component({ selector: 'ion-title', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>', inputs: ['color'] })
+@Component({ selector: 'ion-title', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>', inputs: ['color', 'size'] })
 export class IonTitle {
   protected el: HTMLElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
@@ -892,7 +903,7 @@ export class IonTitle {
     this.el = r.nativeElement;
   }
 }
-proxyInputs(IonTitle, ['color']);
+proxyInputs(IonTitle, ['color', 'size']);
 
 export declare interface IonToggle extends Components.IonToggle {}
 @Component({ selector: 'ion-toggle', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>', inputs: ['checked', 'color', 'disabled', 'mode', 'name', 'value'] })

angular/src/index.ts

@@ -14,6 +14,7 @@ export { IonVirtualScroll } from './directives/virtual-scroll/virtual-scroll';
 export { VirtualItem } from './directives/virtual-scroll/virtual-item';
 export { VirtualHeader } from './directives/virtual-scroll/virtual-header';
 export { VirtualFooter } from './directives/virtual-scroll/virtual-footer';
+export { CssUtilsDeprecations } from './directives/css-utils-deprecations';
 export * from './directives/proxies';
 
 // PROVIDERS

angular/src/ionic-module.ts

@@ -8,12 +8,13 @@ import { NumericValueAccessor } from './directives/control-value-accessors/numer
 import { RadioValueAccessor } from './directives/control-value-accessors/radio-value-accessor';
 import { SelectValueAccessor } from './directives/control-value-accessors/select-value-accessor';
 import { TextValueAccessor } from './directives/control-value-accessors/text-value-accessor';
+import { CssUtilsDeprecations } from './directives/css-utils-deprecations';
 import { IonBackButtonDelegate } from './directives/navigation/ion-back-button';
 import { IonRouterOutlet } from './directives/navigation/ion-router-outlet';
 import { IonTabs } from './directives/navigation/ion-tabs';
 import { NavDelegate } from './directives/navigation/nav-delegate';
 import { RouterLinkDelegate } from './directives/navigation/router-link-delegate';
-import { IonApp, IonAvatar, IonBackButton, IonBackdrop, IonBadge, IonButton, IonButtons, IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle, IonCheckbox, IonChip, IonCol, IonContent, IonDatetime, IonFab, IonFabButton, IonFabList, IonFooter, IonGrid, IonHeader, IonIcon, IonImg, IonInfiniteScroll, IonInfiniteScrollContent, IonInput, IonItem, IonItemDivider, IonItemGroup, IonItemOption, IonItemOptions, IonItemSliding, IonLabel, IonList, IonListHeader, IonMenu, IonMenuButton, IonMenuToggle, IonNav, IonNavPop, IonNavPush, IonNavSetRoot, IonNote, IonProgressBar, IonRadio, IonRadioGroup, IonRange, IonRefresher, IonRefresherContent, IonReorder, IonReorderGroup, IonRippleEffect, IonRow, IonSearchbar, IonSegment, IonSegmentButton, IonSelect, IonSelectOption, IonSkeletonText, IonSlide, IonSlides, IonSpinner, IonSplitPane, IonTabBar, IonTabButton, IonText, IonTextarea, IonThumbnail, IonTitle, IonToggle, IonToolbar } from './directives/proxies';
+import { IonApp, IonAvatar, IonBackButton, IonBackdrop, IonBadge, IonButton, IonButtons, IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle, IonCheckbox, IonChip, IonCol, IonContent, IonDatetime, IonFab, IonFabButton, IonFabList, IonFooter, IonGrid, IonHeader, IonIcon, IonImg, IonInfiniteScroll, IonInfiniteScrollContent, IonInput, IonItem, IonItemDivider, IonItemGroup, IonItemOption, IonItemOptions, IonItemSliding, IonLabel, IonList, IonListHeader, IonMenu, IonMenuButton, IonMenuToggle, IonNav, IonNavLink, IonNavPop, IonNavPush, IonNavSetRoot, IonNote, IonProgressBar, IonRadio, IonRadioGroup, IonRange, IonRefresher, IonRefresherContent, IonReorder, IonReorderGroup, IonRippleEffect, IonRow, IonSearchbar, IonSegment, IonSegmentButton, IonSelect, IonSelectOption, IonSkeletonText, IonSlide, IonSlides, IonSpinner, IonSplitPane, IonTabBar, IonTabButton, IonText, IonTextarea, IonThumbnail, IonTitle, IonToggle, IonToolbar } from './directives/proxies';
 import { VirtualFooter } from './directives/virtual-scroll/virtual-footer';
 import { VirtualHeader } from './directives/virtual-scroll/virtual-header';
 import { VirtualItem } from './directives/virtual-scroll/virtual-item';
@@ -66,6 +67,7 @@ const DECLARATIONS = [
   IonMenuButton,
   IonMenuToggle,
   IonNav,
+  IonNavLink,
   IonNavPop,
   IonNavPush,
   IonNavSetRoot,
@@ -118,7 +120,10 @@ const DECLARATIONS = [
   VirtualFooter,
   VirtualHeader,
   VirtualItem,
-  IonVirtualScroll
+  IonVirtualScroll,
+
+  // Deprecations
+  CssUtilsDeprecations
 ];
 
 @NgModule({

angular/src/providers/config.ts

@@ -33,6 +33,7 @@ export class Config {
   }
 
   set(key: keyof IonicConfig, value?: any) {
+    console.warn(`[DEPRECATION][Config]: The Config.set() method is deprecated and will be removed in the next major release.`);
     const c = getConfig();
     if (c) {
       c.set(key, value);
@@ -44,7 +45,7 @@ export const ConfigToken = new InjectionToken<any>('USERCONFIG');
 
 const getConfig = (): CoreConfig | null => {
   if (typeof (window as any) !== 'undefined') {
-    const Ionic = (window as IonicWindow).Ionic;
+    const Ionic = (window as any as IonicWindow).Ionic;
     if (Ionic && Ionic.config) {
       return Ionic.config;
     }

angular/src/providers/events.ts

@@ -7,6 +7,11 @@ export type EventHandler = (...args: any[]) => any;
 export class Events {
   private c = new Map<string, EventHandler[]>();
 
+  constructor() {
+    console.warn(`[DEPRECATION][Events]: The Events provider is deprecated and it will be removed in the next major release.
+  - Use "Observables" for a similar pub/sub architecture: https://angular.io/guide/observables
+  - Use "Redux" for advanced state management: https://ngrx.io`);
+  }
   /**
    * Subscribe to an event topic. Events that get posted to that topic will trigger the provided handler.
    *

angular/src/providers/menu-controller.ts

@@ -1,24 +1,18 @@
-import { DOCUMENT } from '@angular/common';
-import { Inject, Injectable } from '@angular/core';
+import { Injectable } from '@angular/core';
+import { menuController } from '@ionic/core';
 
-import { proxyMethod } from '../util/util';
-
-const CTRL = 'ion-menu-controller';
 @Injectable({
   providedIn: 'root',
 })
 export class MenuController {
 
-  constructor(@Inject(DOCUMENT) private doc: any) {
-  }
-
   /**
    * Programmatically open the Menu.
    * @param [menuId]  Optionally get the menu by its id, or side.
    * @return returns a promise when the menu is fully opened
    */
-  open(menuId?: string): Promise<boolean> {
-    return proxyMethod(CTRL, this.doc, 'open', menuId);
+  open(menuId?: string) {
+    return menuController.open(menuId);
   }
 
   /**
@@ -28,8 +22,8 @@ export class MenuController {
    * @param [menuId]  Optionally get the menu by its id, or side.
    * @return returns a promise when the menu is fully closed
    */
-  close(menuId?: string): Promise<boolean> {
-    return proxyMethod(CTRL, this.doc, 'close', menuId);
+  close(menuId?: string) {
+    return menuController.close(menuId);
   }
 
   /**
@@ -38,8 +32,8 @@ export class MenuController {
    * @param [menuId]  Optionally get the menu by its id, or side.
    * @return returns a promise when the menu has been toggled
    */
-  toggle(menuId?: string): Promise<boolean> {
-    return proxyMethod(CTRL, this.doc, 'toggle', menuId);
+  toggle(menuId?: string) {
+    return menuController.toggle(menuId);
   }
 
   /**
@@ -50,8 +44,8 @@ export class MenuController {
    * @param [menuId]  Optionally get the menu by its id, or side.
    * @return Returns the instance of the menu, which is useful for chaining.
    */
-  enable(shouldEnable: boolean, menuId?: string): Promise<HTMLIonMenuElement> {
-    return proxyMethod(CTRL, this.doc, 'enable', shouldEnable, menuId);
+  enable(shouldEnable: boolean, menuId?: string) {
+    return menuController.enable(shouldEnable, menuId);
   }
 
   /**
@@ -59,10 +53,10 @@ export class MenuController {
    * @param shouldEnable  True if it should be swipe-able, false if not.
    * @param [menuId]  Optionally get the menu by its id, or side.
    * @return Returns the instance of the menu, which is useful for chaining.
-   * @deprecated Use swipeGesture() instead
+   * @deprecated Use swipeGesture() instead.
    */
-  swipeEnable(shouldEnable: boolean, menuId?: string): Promise<HTMLIonMenuElement> {
-    console.warn('MenuController.swipeEnable is deprecated. Use MenuController.swipeGesture() instead');
+  swipeEnable(shouldEnable: boolean, menuId?: string) {
+    console.warn('[DEPRECATED][ion-menu-controller] swipeEnable() is deprecated. Use MenuController.swipeGesture() instead');
     return this.swipeGesture(shouldEnable, menuId);
   }
 
@@ -72,8 +66,8 @@ export class MenuController {
    * @param [menuId]  Optionally get the menu by its id, or side.
    * @return Returns the instance of the menu, which is useful for chaining.
    */
-  swipeGesture(shouldEnable: boolean, menuId?: string): Promise<HTMLIonMenuElement> {
-    return proxyMethod(CTRL, this.doc, 'swipeGesture', shouldEnable, menuId);
+  swipeGesture(shouldEnable: boolean, menuId?: string) {
+    return menuController.swipeGesture(shouldEnable, menuId);
   }
 
   /**
@@ -81,16 +75,16 @@ export class MenuController {
    * @return Returns true if the specified menu is currently open, otherwise false.
    * If the menuId is not specified, it returns true if ANY menu is currenly open.
    */
-  isOpen(menuId?: string): Promise<boolean> {
-    return proxyMethod(CTRL, this.doc, 'isOpen', menuId);
+  isOpen(menuId?: string) {
+    return menuController.isOpen(menuId);
   }
 
   /**
    * @param [menuId]  Optionally get the menu by its id, or side.
    * @return Returns true if the menu is currently enabled, otherwise false.
    */
-  isEnabled(menuId?: string): Promise<boolean> {
-    return proxyMethod(CTRL, this.doc, 'isEnabled', menuId);
+  isEnabled(menuId?: string) {
+    return menuController.isEnabled(menuId);
   }
 
   /**
@@ -102,21 +96,21 @@ export class MenuController {
    * @param [menuId]  Optionally get the menu by its id, or side.
    * @return Returns the instance of the menu if found, otherwise `null`.
    */
-  get(menuId?: string): Promise<HTMLIonMenuElement> {
-    return proxyMethod(CTRL, this.doc, 'get', menuId);
+  get(menuId?: string) {
+    return menuController.get(menuId);
   }
 
   /**
    * @return Returns the instance of the menu already opened, otherwise `null`.
    */
-  getOpen(): Promise<HTMLIonMenuElement> {
-    return proxyMethod(CTRL, this.doc, 'getOpen');
+  getOpen() {
+    return menuController.getOpen();
   }
 
   /**
    * @return Returns an array of all menu instances.
    */
-  getMenus(): Promise<HTMLIonMenuElement[]> {
-    return proxyMethod(CTRL, this.doc, 'getMenus');
+  getMenus() {
+    return menuController.getMenus();
   }
 }

angular/src/util/util.ts

@@ -1,4 +1,3 @@
-import { HTMLStencilElement } from '../types/interfaces';
 
 declare const __zone_symbol__requestAnimationFrame: any;
 declare const requestAnimationFrame: any;
@@ -12,18 +11,3 @@ export const raf = (h: any) => {
   }
   return setTimeout(h);
 };
-
-export const proxyMethod = (ctrlName: string, doc: Document, methodName: string, ...args: any[]) => {
-  const controller = ensureElementInBody(ctrlName, doc);
-  return controller.componentOnReady()
-    .then(() => (controller as any)[methodName].apply(controller, args));
-};
-
-export const ensureElementInBody = (elementName: string, doc: Document) => {
-  let element = doc.querySelector(elementName);
-  if (!element) {
-    element = doc.createElement(elementName);
-    doc.body.appendChild(element);
-  }
-  return element as HTMLStencilElement;
-};

angular/test/test-app/e2e/src/navigation.e2e-spec.ts

@@ -7,7 +7,8 @@ describe('navigation', () => {
     return handleErrorMessages();
   });
 
-  it ('should swipe and abort', async () => {
+  // TODO: Fix flaky tests
+  xit ('should swipe and abort', async () => {
     await browser.get('/router-link?ionic:mode=ios');
     await waitTime(500);
     await element(by.css('#routerLink')).click();
@@ -24,7 +25,7 @@ describe('navigation', () => {
     expect(await pageVisible.getAttribute('class')).toEqual('ion-page can-go-back');
   });
 
-  it ('should swipe and go back', async () => {
+  xit ('should swipe and go back', async () => {
     await browser.get('/router-link?ionic:mode=ios');
     await waitTime(500);
     await element(by.css('#routerLink')).click();

angular/test/test-app/e2e/src/tabs.e2e-spec.ts

@@ -17,6 +17,15 @@ describe('tabs', () => {
       await testState(1, 'account');
     });
 
+    it('should navigate between tabs and ionChange events should be dispatched ', async () => {
+      let tab = await testTabTitle('Tab 1 - Page 1');
+      expect(await tab.$('.segment-changed').getText()).toEqual('false');
+
+      await element(by.css('#tab-button-contact')).click();
+      tab = await testTabTitle('Tab 2 - Page 1');
+      expect(await tab.$('.segment-changed').getText()).toEqual('false');
+    });
+
     it('should simulate stack + double tab click', async () => {
       let tab = await getSelectedTab() as ElementFinder;
       await tab.$('#goto-tab1-page2').click();

angular/test/test-app/karma.conf.js

@@ -8,8 +8,6 @@ module.exports = function (config) {
     plugins: [
       require('karma-jasmine'),
       require('karma-chrome-launcher'),
-      require('karma-jasmine-html-reporter'),
-      require('karma-coverage-istanbul-reporter'),
       require('@angular-devkit/build-angular/plugins/karma')
     ],
     client: {

angular/test/test-app/package.json

@@ -15,49 +15,46 @@
     "compile:server": "webpack --config webpack.server.config.js --progress --colors",
     "serve:ssr": "node dist/server",
     "build:ssr": "npm run build:client-and-server-bundles && npm run compile:server",
-    "build:client-and-server-bundles": "npm run build && ng run test-app:server:production"
+    "build:client-and-server-bundles": "npm run build && ng run test-app:server:production --bundleDependencies all"
   },
   "dependencies": {
-    "@angular/animations": "~8.2.0",
-    "@angular/common": "~8.2.0",
-    "@angular/compiler": "~8.2.0",
-    "@angular/core": "~8.2.0",
-    "@angular/forms": "~8.2.0",
-    "@angular/platform-browser": "~8.2.0",
-    "@angular/platform-browser-dynamic": "~8.2.0",
-    "@angular/platform-server": "~8.2.0",
-    "@angular/router": "~8.2.0",
+    "@angular/animations": "^8.2.8",
+    "@angular/common": "^8.2.8",
+    "@angular/compiler": "^8.2.8",
+    "@angular/core": "^8.2.8",
+    "@angular/forms": "^8.2.8",
+    "@angular/platform-browser": "^8.2.8",
+    "@angular/platform-browser-dynamic": "^8.2.8",
+    "@angular/platform-server": "^8.2.8",
+    "@angular/router": "^8.2.8",
     "@ionic/angular": "^4.7.0",
     "@ionic/angular-server": "^0.0.2",
     "@nguniversal/express-engine": "~8.1.1",
     "@nguniversal/module-map-ngfactory-loader": "~8.1.1",
     "core-js": "^2.6.2",
     "express": "^4.15.2",
-    "rxjs": "~6.5.2",
+    "rxjs": "^6.5.3",
     "tslib": "^1.9.0",
-    "zone.js": "~0.10.0"
+    "zone.js": "~0.9.1"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~0.802.0",
-    "@angular/cli": "~8.2.0",
-    "@angular/compiler-cli": "~8.2.0",
-    "@angular/language-service": "~8.2.0",
-    "@types/jasmine": "~3.3.16",
-    "@types/jasminewd2": "~2.0.3",
-    "@types/node": "~12.6.8",
-    "codelyzer": "^5.0.1",
-    "jasmine-core": "~2.99.1",
-    "jasmine-spec-reporter": "~4.2.1",
-    "karma": "~4.2.0",
-    "karma-chrome-launcher": "~3.0.0",
-    "karma-coverage-istanbul-reporter": "~2.1.0",
-    "karma-jasmine": "~2.0.1",
-    "karma-jasmine-html-reporter": "^1.4.2",
-    "protractor": "~5.4.2",
-    "ts-loader": "^5.2.0",
-    "ts-node": "~8.3.0",
+    "@angular-devkit/build-angular": "^0.803.6",
+    "@angular/cli": "^8.3.6",
+    "@angular/compiler-cli": "^8.2.8",
+    "@angular/language-service": "^8.2.8",
+    "@types/jasmine": "3.4.1",
+    "@types/node": "12.7.8",
+    "codelyzer": "^5.1.2",
+    "jasmine-core": "3.5.0",
+    "jasmine-spec-reporter": "4.2.1",
+    "karma": "4.3.0",
+    "karma-chrome-launcher": "3.1.0",
+    "karma-jasmine": "2.0.1",
+    "protractor": "5.4.2",
+    "ts-loader": "^6.1.2",
+    "ts-node": "8.4.1",
     "tslint": "~5.18.0",
     "typescript": "~3.5.3",
-    "webpack-cli": "^3.1.0"
+    "webpack-cli": "^3.3.9"
   }
 }

angular/test/test-app/src/app/alert/alert.component.html

@@ -5,6 +5,6 @@
     </ion-title>
   </ion-toolbar>
 </ion-header>
-<ion-content padding>
+<ion-content>
   <p>Change Detections: <span id="counter">{{counter()}}</span></p>
 </ion-content>

angular/test/test-app/src/app/modal-example/modal-example.component.html

@@ -8,7 +8,7 @@
   </ion-toolbar>
 </ion-header>
 
-<ion-content padding>
+<ion-content class="ion-padding">
   <h1>Value</h1>
   <h2>{{value}}</h2>
   <h3>{{valueFromParams}}</h3>

angular/test/test-app/src/app/modal/modal.component.html

@@ -5,7 +5,7 @@
       </ion-title>
     </ion-toolbar>
   </ion-header>
-<ion-content padding>
+<ion-content class="ion-padding">
   <ion-button (click)="openModal()" id="action-button">Open Modal</ion-button>
   <ion-button (click)="openNav()" id="action-button-2">Open Nav in Modal</ion-button>
   <p>

angular/test/test-app/src/app/providers/providers.component.html

@@ -5,7 +5,7 @@
       </ion-title>
     </ion-toolbar>
   </ion-header>
-  <ion-content padding>
+  <ion-content class="ion-padding">
     <p>
       isLoaded: <span id="is-loaded">{{isLoaded}}</span>
     </p>

angular/test/test-app/src/app/router-link-page/router-link-page.component.html

@@ -7,7 +7,7 @@
   </ion-toolbar>
 </ion-header>
 
-<ion-content padding>
+<ion-content class="ion-padding">
   <p>ngOnInit: <span id="ngOnInit">{{onInit}}</span></p>
   <p>canGoBack: <span id="canGoBack">{{canGoBack}}</span></p>
   <p>ionViewWillEnter: <span id="ionViewWillEnter">{{willEnter}}</span></p>

angular/test/test-app/src/app/router-link-page2/router-link-page2.component.html

@@ -7,6 +7,6 @@
   </ion-toolbar>
 </ion-header>
 
-<ion-content padding>
+<ion-content class="ion-padding">
   <ion-button routerLink="/router-link-page3" id="goToPage3">Go to Page 3</ion-button>
 </ion-content>

angular/test/test-app/src/app/router-link-page3/router-link-page3.component.html

@@ -7,6 +7,6 @@
   </ion-toolbar>
 </ion-header>
 
-<ion-content padding>
+<ion-content class="ion-padding">
   Page 3
 </ion-content>

angular/test/test-app/src/app/router-link/router-link.component.html

@@ -5,7 +5,7 @@
     </ion-title>
   </ion-toolbar>
 </ion-header>
-<ion-content padding>
+<ion-content class="ion-padding">
   <p>ngOnInit: <span id="ngOnInit">{{onInit}}</span></p>
   <p>ionViewWillEnter: <span id="ionViewWillEnter">{{willEnter}}</span></p>
   <p>ionViewDidEnter: <span id="ionViewDidEnter">{{didEnter}}</span></p>

angular/test/test-app/src/app/tabs-lazy/tabs-tab3-nested/tabs-tab3-nested.component.html

@@ -7,7 +7,7 @@
   </ion-toolbar>
 </ion-header>
 
-<ion-content padding>
+<ion-content class="ion-padding">
   <p>
     <ion-button routerLink="/tabs/account" id="goto-tab1-page1">Go to Tab 1 - Page 1</ion-button>
     <ion-button routerLink="/tabs/account/nested/1" id="goto-tab1-page2">Go to Tab 1 - Page 2</ion-button>

angular/test/test-app/src/app/tabs-lazy/tabs-tab3/tabs-tab3.component.html

@@ -4,7 +4,7 @@
   </ion-toolbar>
 </ion-header>
 
-<ion-content padding>
+<ion-content class="ion-padding">
   <h1>LAZY LOADED TAB</h1>
   <p>
     <ion-button routerLink="/tabs/account" id="goto-tab1-page1">Go to Tab 1 - Page 1</ion-button>

angular/test/test-app/src/app/tabs-tab1-nested/tabs-tab1-nested.component.html

@@ -7,7 +7,7 @@
   </ion-toolbar>
 </ion-header>
 
-<ion-content padding>
+<ion-content class="ion-padding">
   <h1>Welcome to NESTED PAGE {{id}}</h1>
   <p>
     <ion-button routerLink="/tabs/account" id="goto-tab1-page1">Go to Tab 1 - Page 1</ion-button>

angular/test/test-app/src/app/tabs-tab1/tabs-tab1.component.html

@@ -4,8 +4,15 @@
   </ion-toolbar>
 </ion-header>
 
-<ion-content padding>
+<ion-content class="ion-padding">
   <h1>Welcome to Tab1</h1>
+  <ion-segment [(ngModel)]="segment" (ionChange)="segmentChanged($event)">
+    <ion-segment-button value="one">One</ion-segment-button>
+    <ion-segment-button value="two">Two</ion-segment-button>
+  </ion-segment>
+  <p>
+    Segment changed: <span class="segment-changed">{{changed}}</span>
+  </p>
   <p>
     <ion-button routerLink="/tabs/account/nested/1" id="goto-tab1-page2">Go to Page 2</ion-button>
     <ion-button routerLink="/tabs/lazy/nested" id="goto-tab3-page2">Go to Tab 3 - Page 2</ion-button>

angular/test/test-app/src/app/tabs-tab1/tabs-tab1.component.ts

@@ -6,6 +6,8 @@ import { Component, NgZone } from '@angular/core';
 })
 export class TabsTab1Component {
   title = 'ERROR';
+  segment = 'one';
+  changed = 'false';
 
   ionViewWillEnter() {
     NgZone.assertInAngularZone();
@@ -14,4 +16,9 @@ export class TabsTab1Component {
       this.title = 'Tab 1 - Page 1';
     });
   }
+
+  segmentChanged(ev: any) {
+    console.log('Segment changed', ev);
+    this.changed = 'true';
+  }
 }

angular/test/test-app/src/app/tabs-tab2/tabs-tab2.component.html

@@ -4,8 +4,15 @@
   </ion-toolbar>
 </ion-header>
 
-<ion-content padding>
+<ion-content class="ion-padding">
   <h1>Welcome to Tab 2</h1>
+  <ion-segment [(ngModel)]="segment" (ionChange)="segmentChanged($event)">
+    <ion-segment-button value="one">One</ion-segment-button>
+    <ion-segment-button value="two">Two</ion-segment-button>
+  </ion-segment>
+  <p>
+    Segment changed: <span class="segment-changed">{{changed}}</span>
+  </p>
   <p>
     <ion-button routerLink="/tabs/account" id="goto-tab1-page1">Go to Tab 1 - Page 1</ion-button>
     <ion-button routerLink="/tabs/account/nested/1" id="goto-tab1-page2">Go to Tab 1 - Page 2</ion-button>

angular/test/test-app/src/app/tabs-tab2/tabs-tab2.component.ts

@@ -6,6 +6,8 @@ import { Component, NgZone } from '@angular/core';
 })
 export class TabsTab2Component {
   title = 'ERROR';
+  segment = 'two';
+  changed = 'false';
 
   ngOnInit() {
     NgZone.assertInAngularZone();
@@ -14,4 +16,9 @@ export class TabsTab2Component {
       this.title = 'Tab 2 - Page 1';
     });
   }
+
+  segmentChanged(ev: any) {
+    console.log('Segment changed', ev);
+    this.changed = 'true';
+  }
 }

angular/test/test-app/src/app/view-child/view-child.component.html

@@ -5,7 +5,7 @@
     </ion-title>
   </ion-toolbar>
 </ion-header>
-<ion-content padding>
+<ion-content class="ion-padding">
   <ion-slides>
     <ion-slide #slide>
         <ion-button id="color-button">Hello! it's a button</ion-button>

angular/test/test-app/src/app/virtual-scroll-detail/virtual-scroll-detail.component.html

@@ -7,7 +7,7 @@
     </ion-toolbar>
   </ion-header>
 
-  <ion-content padding>
+  <ion-content class="ion-padding">
     <h1>Item {{itemNu}}</h1>
     <p>ngOnInit: <span id="ngOnInit">{{onInit}}</span></p>
     <p>ionViewWillEnter: <span id="ionViewWillEnter">{{willEnter}}</span></p>

angular/test/test-app/tsconfig.json

@@ -6,6 +6,8 @@
     "sourceMap": true,
     "declaration": false,
     "moduleResolution": "node",
+    "module": "esnext",
+    "target": "es2015",
     "emitDecoratorMetadata": true,
     "experimentalDecorators": true,
     "typeRoots": [

core/api.txt

@@ -178,6 +178,7 @@ ion-button,css-prop,--ripple-color
 ion-button,css-prop,--transition
 
 ion-buttons,scoped
+ion-buttons,prop,collapse,boolean,false,false,false
 
 ion-card,scoped
 ion-card,prop,button,boolean,false,false,false
@@ -399,6 +400,7 @@ ion-grid,css-prop,--ion-grid-width-xl
 ion-grid,css-prop,--ion-grid-width-xs
 
 ion-header,none
+ion-header,prop,collapse,"condense" | undefined,undefined,false,false
 ion-header,prop,mode,"ios" | "md",undefined,false,false
 ion-header,prop,translucent,boolean,false,false,false
 
@@ -417,7 +419,7 @@ ion-infinite-scroll,method,complete,complete() => Promise<void>
 ion-infinite-scroll,event,ionInfinite,void,true
 
 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,loadingSpinner,"bubbles" | "circles" | "circular" | "crescent" | "dots" | "lines" | "lines-small" | null | undefined,undefined,false,false
 ion-infinite-scroll-content,prop,loadingText,string | undefined,undefined,false,false
 
 ion-input,scoped
@@ -431,7 +433,7 @@ ion-input,prop,clearOnEdit,boolean | undefined,undefined,false,false
 ion-input,prop,color,string | undefined,undefined,false,false
 ion-input,prop,debounce,number,0,false,false
 ion-input,prop,disabled,boolean,false,false,false
-ion-input,prop,inputmode,string | undefined,undefined,false,false
+ion-input,prop,inputmode,"decimal" | "email" | "none" | "numeric" | "search" | "tel" | "text" | "url" | undefined,undefined,false,false
 ion-input,prop,max,string | undefined,undefined,false,false
 ion-input,prop,maxlength,number | undefined,undefined,false,false
 ion-input,prop,min,string | undefined,undefined,false,false
@@ -585,7 +587,7 @@ ion-loading,prop,leaveAnimation,((Animation: Animation, baseEl: any, opts?: any)
 ion-loading,prop,message,string | undefined,undefined,false,false
 ion-loading,prop,mode,"ios" | "md",undefined,false,false
 ion-loading,prop,showBackdrop,boolean,true,false,false
-ion-loading,prop,spinner,"bubbles" | "circles" | "crescent" | "dots" | "lines" | "lines-small" | null | undefined,undefined,false,false
+ion-loading,prop,spinner,"bubbles" | "circles" | "circular" | "crescent" | "dots" | "lines" | "lines-small" | null | undefined,undefined,false,false
 ion-loading,prop,translucent,boolean,false,false,false
 ion-loading,method,dismiss,dismiss(data?: any, role?: string | undefined) => Promise<boolean>
 ion-loading,method,onDidDismiss,onDidDismiss() => Promise<OverlayEventDetail<any>>
@@ -663,7 +665,7 @@ ion-menu-controller,method,isAnimating,isAnimating() => Promise<boolean>
 ion-menu-controller,method,isEnabled,isEnabled(menu?: string | null | undefined) => Promise<boolean>
 ion-menu-controller,method,isOpen,isOpen(menu?: string | null | undefined) => Promise<boolean>
 ion-menu-controller,method,open,open(menu?: string | null | undefined) => Promise<boolean>
-ion-menu-controller,method,registerAnimation,registerAnimation(name: string, animation: AnimationBuilder) => Promise<void>
+ion-menu-controller,method,registerAnimation,registerAnimation(name: string, animation: AnimationBuilder | ((menu: MenuI) => IonicAnimation)) => Promise<void>
 ion-menu-controller,method,swipeGesture,swipeGesture(enable: boolean, menu?: string | null | undefined) => Promise<HTMLIonMenuElement | undefined>
 ion-menu-controller,method,toggle,toggle(menu?: string | null | undefined) => Promise<boolean>
 
@@ -729,6 +731,11 @@ ion-nav,method,setRoot,setRoot<T extends NavComponent>(component: T, componentPr
 ion-nav,event,ionNavDidChange,void,false
 ion-nav,event,ionNavWillChange,void,false
 
+ion-nav-link,none
+ion-nav-link,prop,component,Function | HTMLElement | ViewController | null | string | undefined,undefined,false,false
+ion-nav-link,prop,componentProps,undefined | { [key: string]: any; },undefined,false,false
+ion-nav-link,prop,routerDirection,"back" | "forward" | "root",'forward',false,false
+
 ion-nav-pop,none
 
 ion-nav-push,none
@@ -874,6 +881,8 @@ ion-range,css-prop,--knob-background
 ion-range,css-prop,--knob-border-radius
 ion-range,css-prop,--knob-box-shadow
 ion-range,css-prop,--knob-size
+ion-range,css-prop,--pin-background
+ion-range,css-prop,--pin-color
 
 ion-refresher,none
 ion-refresher,prop,closeDuration,string,'280ms',false,false
@@ -892,7 +901,7 @@ ion-refresher,event,ionStart,void,true
 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,refreshingSpinner,"bubbles" | "circles" | "circular" | "crescent" | "dots" | "lines" | "lines-small" | null | undefined,undefined,false,false
 ion-refresher-content,prop,refreshingText,string | undefined,undefined,false,false
 
 ion-reorder,shadow
@@ -951,6 +960,7 @@ ion-searchbar,prop,clearIcon,string | undefined,undefined,false,false
 ion-searchbar,prop,color,string | undefined,undefined,false,false
 ion-searchbar,prop,debounce,number,250,false,false
 ion-searchbar,prop,disabled,boolean,false,false,false
+ion-searchbar,prop,inputmode,"decimal" | "email" | "none" | "numeric" | "search" | "tel" | "text" | "url",'search',false,false
 ion-searchbar,prop,mode,"ios" | "md",undefined,false,false
 ion-searchbar,prop,placeholder,string,'Search',false,false
 ion-searchbar,prop,searchIcon,string,'search',false,false
@@ -983,7 +993,6 @@ ion-segment,prop,mode,"ios" | "md",undefined,false,false
 ion-segment,prop,scrollable,boolean,false,false,false
 ion-segment,prop,value,null | string | undefined,undefined,false,false
 ion-segment,event,ionChange,SegmentChangeEventDetail,true
-ion-segment,event,ionStyle,StyleEventDetail,true
 
 ion-segment-button,shadow
 ion-segment-button,prop,checked,boolean,false,false,false
@@ -1062,6 +1071,7 @@ ion-slides,prop,pager,boolean,false,false,false
 ion-slides,prop,scrollbar,boolean,false,false,false
 ion-slides,method,getActiveIndex,getActiveIndex() => Promise<number>
 ion-slides,method,getPreviousIndex,getPreviousIndex() => Promise<number>
+ion-slides,method,getSwiper,getSwiper() => Promise<any>
 ion-slides,method,isBeginning,isBeginning() => Promise<boolean>
 ion-slides,method,isEnd,isEnd() => Promise<boolean>
 ion-slides,method,length,length() => Promise<number>
@@ -1097,7 +1107,7 @@ ion-slides,css-prop,--bullet-background-active
 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,name,"bubbles" | "circles" | "circular" | "crescent" | "dots" | "lines" | "lines-small" | undefined,undefined,false,false
 ion-spinner,prop,paused,boolean,false,false,false
 ion-spinner,css-prop,--color
 
@@ -1197,6 +1207,7 @@ ion-thumbnail,css-prop,--size
 
 ion-title,shadow
 ion-title,prop,color,string | undefined,undefined,false,false
+ion-title,prop,size,"large" | "small" | undefined,undefined,false,false
 ion-title,css-prop,--color
 
 ion-toast,shadow

core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ionic/core",
-  "version": "4.7.1",
+  "version": "4.10.3",
   "description": "Base components for Ionic",
   "keywords": [
     "ionic",
@@ -30,33 +30,32 @@
     "loader/"
   ],
   "dependencies": {
-    "ionicons": "^4.6.2",
+    "ionicons": "^4.6.3",
     "tslib": "^1.10.0"
   },
   "devDependencies": {
-    "@stencil/core": "1.2.3",
-    "@stencil/sass": "1.0.0",
-    "@types/jest": "24.0.13",
-    "@types/node": "10.12.18",
-    "@types/puppeteer": "1.12.4",
-    "@types/swiper": "4.4.1",
-    "aws-sdk": "^2.320.0",
-    "chromedriver": "^2.38.3",
+    "@stencil/core": "1.6.1",
+    "@stencil/sass": "1.0.1",
+    "@types/jest": "24.0.17",
+    "@types/node": "12.7.1",
+    "@types/puppeteer": "1.19.1",
+    "@types/swiper": "4.4.4",
+    "aws-sdk": "^2.497.0",
     "clean-css-cli": "^4.1.11",
     "domino": "^2.1.3",
     "fs-extra": "^8.0.1",
     "jest": "24.8.0",
     "jest-cli": "24.8.0",
-    "np": "^3.0.4",
+    "np": "^5.0.3",
     "pixelmatch": "4.0.2",
-    "puppeteer": "1.17.0",
-    "rollup": "1.16.2",
-    "rollup-plugin-node-resolve": "5.1.0",
+    "puppeteer": "1.20.0",
+    "rollup": "1.19.4",
+    "rollup-plugin-node-resolve": "5.2.0",
     "rollup-plugin-virtual": "^1.0.1",
-    "sass": "^1.22.0",
+    "sass": "^1.22.9",
     "stylelint": "10.1.0",
-    "stylelint-order": "3.0.0",
-    "swiper": "4.4.6",
+    "stylelint-order": "3.0.1",
+    "swiper": "4.5.1",
     "tslint": "^5.10.0",
     "tslint-ionic-rules": "0.0.21",
     "tslint-react": "^3.6.0"

core/scripts/testing/scripts.js

@@ -5,8 +5,16 @@
     document.documentElement.setAttribute('dir', 'rtl');
   }
 
+  if (window.location.search.indexOf('ionic:_testing=true') > -1) {
+    const style = document.createElement('style');
+    style.innerHTML = `
+* {
+  caret-color: transparent !important;
+}`;
+    document.head.appendChild(style);
+  }
+
   window.Ionic = window.Ionic || {};
   window.Ionic.config = window.Ionic.config || {};
-  window.Ionic.config.experimentalTransitionShadow = true;
 
 })();

core/src/components.d.ts

@@ -25,12 +25,13 @@ import {
   HeaderFn,
   HeaderHeightFn,
   InputChangeEventDetail,
+  IonicAnimation,
   ItemHeightFn,
   ItemRenderFn,
   ItemReorderEventDetail,
   LoadingOptions,
   MenuChangeEventDetail,
-  MenuControllerI,
+  MenuI,
   ModalOptions,
   NavComponent,
   NavOptions,
@@ -388,7 +389,12 @@ export namespace Components {
     */
     'type': 'submit' | 'reset' | 'button';
   }
-  interface IonButtons {}
+  interface IonButtons {
+    /**
+    * If true, buttons will disappear when its parent toolbar has fully collapsed if the toolbar is not the first toolbar. If the toolbar is the first toolbar, the buttons will be hidden and will only be shown once all toolbars have fully collapsed.  Only applies in `ios` mode with `collapse` set to `true` on `ion-header`.  Typically used for [Collapsible Large Titles](https://ionicframework.com/docs/api/title#collapsible-large-titles)
+    */
+    'collapse': boolean;
+  }
   interface IonCard {
     /**
     * If `true`, a button tag will be rendered and the card will be tappable.
@@ -864,6 +870,10 @@ export namespace Components {
     'fixed': boolean;
   }
   interface IonHeader {
+    /**
+    * Describes the scroll effect that will be applied to the header `condense` only applies in iOS mode.  Typically used for [Collapsible Large Titles](https://ionicframework.com/docs/api/title#collapsible-large-titles)
+    */
+    'collapse'?: 'condense';
     /**
     * The mode determines which platform styles to use.
     */
@@ -879,7 +889,7 @@ export namespace Components {
     */
     'alt'?: string;
     /**
-    * The image URL. This attribute is mandatory for the <img> element.
+    * The image URL. This attribute is mandatory for the `<img>` element.
     */
     'src'?: string;
   }
@@ -957,9 +967,9 @@ export namespace Components {
     */
     'getInputElement': () => Promise<HTMLInputElement>;
     /**
-    * A hint to the browser for which keyboard to display. This attribute applies when the value of the type attribute is `"text"`, `"password"`, `"email"`, or `"url"`. Possible values are: `"verbatim"`, `"latin"`, `"latin-name"`, `"latin-prose"`, `"full-width-latin"`, `"kana"`, `"katakana"`, `"numeric"`, `"tel"`, `"email"`, `"url"`.
+    * A hint to the browser for which keyboard to display. Possible values: `"none"`, `"text"`, `"tel"`, `"url"`, `"email"`, `"numeric"`, `"decimal"`, and `"search"`.
     */
-    'inputmode'?: string;
+    'inputmode'?: 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search';
     /**
     * The maximum value, which must not be less than its minimum (min attribute) value.
     */
@@ -1376,7 +1386,6 @@ export namespace Components {
     'type': 'submit' | 'reset' | 'button';
   }
   interface IonMenuController {
-    '_getInstance': () => Promise<MenuControllerI>;
     /**
     * Close the menu. If a menu is specified, it will close that menu. If no menu is specified, then it will close any menu that is open. If it does not find any open menus, it will return `false`.
     * @param menu The menuId or side of the menu to close.
@@ -1425,7 +1434,7 @@ export namespace Components {
     * @param name The name of the animation to register.
     * @param animation The animation function to register.
     */
-    'registerAnimation': (name: string, animation: AnimationBuilder) => Promise<void>;
+    'registerAnimation': (name: string, animation: AnimationBuilder | ((menu: MenuI) => IonicAnimation)) => Promise<void>;
     /**
     * Enable or disable the ability to swipe open the menu.
     * @param enable If `true`, the menu swipe gesture should be enabled.
@@ -1639,6 +1648,20 @@ export namespace Components {
     */
     'swipeGesture'?: boolean;
   }
+  interface IonNavLink {
+    /**
+    * Component to navigate to. Only used if the `routerDirection` is `"forward"` or `"root"`.
+    */
+    'component'?: NavComponent;
+    /**
+    * Data you want to pass to the component as props. Only used if the `"routerDirection"` is `"forward"` or `"root"`.
+    */
+    'componentProps'?: ComponentProps;
+    /**
+    * The transition direction when navigating to another page.
+    */
+    'routerDirection': RouterDirection;
+  }
   interface IonNavPop {}
   interface IonNavPush {
     /**
@@ -2182,6 +2205,10 @@ export namespace Components {
     */
     'getInputElement': () => Promise<HTMLInputElement>;
     /**
+    * A hint to the browser for which keyboard to display. Possible values: `"none"`, `"text"`, `"tel"`, `"url"`, `"email"`, `"numeric"`, `"decimal"`, and `"search"`.
+    */
+    'inputmode': 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search';
+    /**
     * The mode determines which platform styles to use.
     */
     'mode'?: "ios" | "md";
@@ -2370,6 +2397,10 @@ export namespace Components {
     */
     'getPreviousIndex': () => Promise<number>;
     /**
+    * Get the Swiper instance. Use this to access the full Swiper API. See https://idangero.us/swiper/api/ for all API options.
+    */
+    'getSwiper': () => Promise<any>;
+    /**
     * Get whether or not the current slide is the first slide.
     */
     'isBeginning': () => Promise<boolean>;
@@ -2674,6 +2705,10 @@ export namespace Components {
     * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
     */
     'color'?: Color;
+    /**
+    * The size of the toolbar title.
+    */
+    'size'?: 'large' | 'small';
   }
   interface IonToast {
     /**
@@ -3182,6 +3217,12 @@ declare global {
     new (): HTMLIonNavElement;
   };
 
+  interface HTMLIonNavLinkElement extends Components.IonNavLink, HTMLStencilElement {}
+  var HTMLIonNavLinkElement: {
+    prototype: HTMLIonNavLinkElement;
+    new (): HTMLIonNavLinkElement;
+  };
+
   interface HTMLIonNavPopElement extends Components.IonNavPop, HTMLStencilElement {}
   var HTMLIonNavPopElement: {
     prototype: HTMLIonNavPopElement;
@@ -3520,6 +3561,7 @@ declare global {
     'ion-modal': HTMLIonModalElement;
     'ion-modal-controller': HTMLIonModalControllerElement;
     'ion-nav': HTMLIonNavElement;
+    'ion-nav-link': HTMLIonNavLinkElement;
     'ion-nav-pop': HTMLIonNavPopElement;
     'ion-nav-push': HTMLIonNavPushElement;
     'ion-nav-set-root': HTMLIonNavSetRootElement;
@@ -3572,7 +3614,7 @@ declare global {
 }
 
 declare namespace LocalJSX {
-  interface IonActionSheet extends JSXBase.HTMLAttributes<HTMLIonActionSheetElement> {
+  interface IonActionSheet {
     /**
     * If `true`, the action sheet will animate.
     */
@@ -3634,8 +3676,8 @@ declare namespace LocalJSX {
     */
     'translucent'?: boolean;
   }
-  interface IonActionSheetController extends JSXBase.HTMLAttributes<HTMLIonActionSheetControllerElement> {}
-  interface IonAlert extends JSXBase.HTMLAttributes<HTMLIonAlertElement> {
+  interface IonActionSheetController {}
+  interface IonAlert {
     /**
     * If `true`, the alert will animate.
     */
@@ -3705,8 +3747,8 @@ declare namespace LocalJSX {
     */
     'translucent'?: boolean;
   }
-  interface IonAlertController extends JSXBase.HTMLAttributes<HTMLIonAlertControllerElement> {}
-  interface IonAnchor extends JSXBase.HTMLAttributes<HTMLIonAnchorElement> {
+  interface IonAlertController {}
+  interface IonAnchor {
     /**
     * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
     */
@@ -3724,9 +3766,9 @@ declare namespace LocalJSX {
     */
     'routerDirection'?: RouterDirection;
   }
-  interface IonApp extends JSXBase.HTMLAttributes<HTMLIonAppElement> {}
-  interface IonAvatar extends JSXBase.HTMLAttributes<HTMLIonAvatarElement> {}
-  interface IonBackButton extends JSXBase.HTMLAttributes<HTMLIonBackButtonElement> {
+  interface IonApp {}
+  interface IonAvatar {}
+  interface IonBackButton {
     /**
     * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
     */
@@ -3756,7 +3798,7 @@ declare namespace LocalJSX {
     */
     'type'?: 'submit' | 'reset' | 'button';
   }
-  interface IonBackdrop extends JSXBase.HTMLAttributes<HTMLIonBackdropElement> {
+  interface IonBackdrop {
     /**
     * Emitted when the backdrop is tapped.
     */
@@ -3774,7 +3816,7 @@ declare namespace LocalJSX {
     */
     'visible'?: boolean;
   }
-  interface IonBadge extends JSXBase.HTMLAttributes<HTMLIonBadgeElement> {
+  interface IonBadge {
     /**
     * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
     */
@@ -3784,7 +3826,7 @@ declare namespace LocalJSX {
     */
     'mode'?: "ios" | "md";
   }
-  interface IonButton extends JSXBase.HTMLAttributes<HTMLIonButtonElement> {
+  interface IonButton {
     /**
     * The type of button.
     */
@@ -3854,8 +3896,13 @@ declare namespace LocalJSX {
     */
     'type'?: 'submit' | 'reset' | 'button';
   }
-  interface IonButtons extends JSXBase.HTMLAttributes<HTMLIonButtonsElement> {}
-  interface IonCard extends JSXBase.HTMLAttributes<HTMLIonCardElement> {
+  interface IonButtons {
+    /**
+    * If true, buttons will disappear when its parent toolbar has fully collapsed if the toolbar is not the first toolbar. If the toolbar is the first toolbar, the buttons will be hidden and will only be shown once all toolbars have fully collapsed.  Only applies in `ios` mode with `collapse` set to `true` on `ion-header`.  Typically used for [Collapsible Large Titles](https://ionicframework.com/docs/api/title#collapsible-large-titles)
+    */
+    'collapse'?: boolean;
+  }
+  interface IonCard {
     /**
     * If `true`, a button tag will be rendered and the card will be tappable.
     */
@@ -3897,13 +3944,13 @@ declare namespace LocalJSX {
     */
     'type'?: 'submit' | 'reset' | 'button';
   }
-  interface IonCardContent extends JSXBase.HTMLAttributes<HTMLIonCardContentElement> {
+  interface IonCardContent {
     /**
     * The mode determines which platform styles to use.
     */
     'mode'?: "ios" | "md";
   }
-  interface IonCardHeader extends JSXBase.HTMLAttributes<HTMLIonCardHeaderElement> {
+  interface IonCardHeader {
     /**
     * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
     */
@@ -3917,7 +3964,7 @@ declare namespace LocalJSX {
     */
     'translucent'?: boolean;
   }
-  interface IonCardSubtitle extends JSXBase.HTMLAttributes<HTMLIonCardSubtitleElement> {
+  interface IonCardSubtitle {
     /**
     * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
     */
@@ -3927,7 +3974,7 @@ declare namespace LocalJSX {
     */
     'mode'?: "ios" | "md";
   }
-  interface IonCardTitle extends JSXBase.HTMLAttributes<HTMLIonCardTitleElement> {
+  interface IonCardTitle {
     /**
     * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
     */
@@ -3937,7 +3984,7 @@ declare namespace LocalJSX {
     */
     'mode'?: "ios" | "md";
   }
-  interface IonCheckbox extends JSXBase.HTMLAttributes<HTMLIonCheckboxElement> {
+  interface IonCheckbox {
     /**
     * If `true`, the checkbox is selected.
     */
@@ -3979,7 +4026,7 @@ declare namespace LocalJSX {
     */
     'value'?: string;
   }
-  interface IonChip extends JSXBase.HTMLAttributes<HTMLIonChipElement> {
+  interface IonChip {
     /**
     * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
     */
@@ -3993,7 +4040,7 @@ declare namespace LocalJSX {
     */
     'outline'?: boolean;
   }
-  interface IonCol extends JSXBase.HTMLAttributes<HTMLIonColElement> {
+  interface IonCol {
     /**
     * The amount to offset the column, in terms of how many columns it should shift to the end of the total available.
     */
@@ -4091,7 +4138,7 @@ declare namespace LocalJSX {
     */
     'sizeXs'?: string;
   }
-  interface IonContent extends JSXBase.HTMLAttributes<HTMLIonContentElement> {
+  interface IonContent {
     /**
     * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
     */
@@ -4129,7 +4176,7 @@ declare namespace LocalJSX {
     */
     'scrollY'?: boolean;
   }
-  interface IonDatetime extends JSXBase.HTMLAttributes<HTMLIonDatetimeElement> {
+  interface IonDatetime {
     /**
     * The text to display on the picker's cancel button.
     */
@@ -4235,7 +4282,7 @@ declare namespace LocalJSX {
     */
     'yearValues'?: number[] | number | string;
   }
-  interface IonFab extends JSXBase.HTMLAttributes<HTMLIonFabElement> {
+  interface IonFab {
     /**
     * If `true`, both the `ion-fab-button` and all `ion-fab-list` inside `ion-fab` will become active. That means `ion-fab-button` will become a `close` icon and `ion-fab-list` will become visible.
     */
@@ -4253,7 +4300,7 @@ declare namespace LocalJSX {
     */
     'vertical'?: 'top' | 'bottom' | 'center';
   }
-  interface IonFabButton extends JSXBase.HTMLAttributes<HTMLIonFabButtonElement> {
+  interface IonFabButton {
     /**
     * If `true`, the fab button will be show a close icon.
     */
@@ -4315,7 +4362,7 @@ declare namespace LocalJSX {
     */
     'type'?: 'submit' | 'reset' | 'button';
   }
-  interface IonFabList extends JSXBase.HTMLAttributes<HTMLIonFabListElement> {
+  interface IonFabList {
     /**
     * If `true`, the fab list will show all fab buttons in the list.
     */
@@ -4325,7 +4372,7 @@ declare namespace LocalJSX {
     */
     'side'?: 'start' | 'end' | 'top' | 'bottom';
   }
-  interface IonFooter extends JSXBase.HTMLAttributes<HTMLIonFooterElement> {
+  interface IonFooter {
     /**
     * The mode determines which platform styles to use.
     */
@@ -4335,13 +4382,17 @@ declare namespace LocalJSX {
     */
     'translucent'?: boolean;
   }
-  interface IonGrid extends JSXBase.HTMLAttributes<HTMLIonGridElement> {
+  interface IonGrid {
     /**
     * If `true`, the grid will have a fixed width based on the screen size.
     */
     'fixed'?: boolean;
   }
-  interface IonHeader extends JSXBase.HTMLAttributes<HTMLIonHeaderElement> {
+  interface IonHeader {
+    /**
+    * Describes the scroll effect that will be applied to the header `condense` only applies in iOS mode.  Typically used for [Collapsible Large Titles](https://ionicframework.com/docs/api/title#collapsible-large-titles)
+    */
+    'collapse'?: 'condense';
     /**
     * The mode determines which platform styles to use.
     */
@@ -4351,7 +4402,7 @@ declare namespace LocalJSX {
     */
     'translucent'?: boolean;
   }
-  interface IonImg extends JSXBase.HTMLAttributes<HTMLIonImgElement> {
+  interface IonImg {
     /**
     * This attribute defines the alternative text describing the image. Users will see this text displayed if the image URL is wrong, the image is not in one of the supported formats, or if the image is not yet downloaded.
     */
@@ -4369,11 +4420,11 @@ declare namespace LocalJSX {
     */
     'onIonImgWillLoad'?: (event: CustomEvent<void>) => void;
     /**
-    * The image URL. This attribute is mandatory for the <img> element.
+    * The image URL. This attribute is mandatory for the `<img>` element.
     */
     'src'?: string;
   }
-  interface IonInfiniteScroll extends JSXBase.HTMLAttributes<HTMLIonInfiniteScrollElement> {
+  interface IonInfiniteScroll {
     /**
     * If `true`, the infinite scroll will be hidden and scroll event listeners will be removed.  Set this to true to disable the infinite scroll from actively trying to receive new data while scrolling. This is useful when it is known that there is no more data that can be added, and the infinite scroll is no longer needed.
     */
@@ -4391,7 +4442,7 @@ declare namespace LocalJSX {
     */
     'threshold'?: string;
   }
-  interface IonInfiniteScrollContent extends JSXBase.HTMLAttributes<HTMLIonInfiniteScrollContentElement> {
+  interface IonInfiniteScrollContent {
     /**
     * An animated SVG spinner that shows while loading.
     */
@@ -4401,7 +4452,7 @@ declare namespace LocalJSX {
     */
     'loadingText'?: string;
   }
-  interface IonInput extends JSXBase.HTMLAttributes<HTMLIonInputElement> {
+  interface IonInput {
     /**
     * If the value of the type attribute is `"file"`, then this attribute will indicate the types of files that the server accepts, otherwise it will be ignored. The value must be a comma-separated list of unique content type specifiers.
     */
@@ -4443,9 +4494,9 @@ declare namespace LocalJSX {
     */
     'disabled'?: boolean;
     /**
-    * A hint to the browser for which keyboard to display. This attribute applies when the value of the type attribute is `"text"`, `"password"`, `"email"`, or `"url"`. Possible values are: `"verbatim"`, `"latin"`, `"latin-name"`, `"latin-prose"`, `"full-width-latin"`, `"kana"`, `"katakana"`, `"numeric"`, `"tel"`, `"email"`, `"url"`.
+    * A hint to the browser for which keyboard to display. Possible values: `"none"`, `"text"`, `"tel"`, `"url"`, `"email"`, `"numeric"`, `"decimal"`, and `"search"`.
     */
-    'inputmode'?: string;
+    'inputmode'?: 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search';
     /**
     * The maximum value, which must not be less than its minimum (min attribute) value.
     */
@@ -4527,7 +4578,7 @@ declare namespace LocalJSX {
     */
     'value'?: string | null;
   }
-  interface IonItem extends JSXBase.HTMLAttributes<HTMLIonItemElement> {
+  interface IonItem {
     /**
     * If `true`, a button tag will be rendered and the item will be tappable.
     */
@@ -4581,7 +4632,7 @@ declare namespace LocalJSX {
     */
     'type'?: 'submit' | 'reset' | 'button';
   }
-  interface IonItemDivider extends JSXBase.HTMLAttributes<HTMLIonItemDividerElement> {
+  interface IonItemDivider {
     /**
     * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
     */
@@ -4595,8 +4646,8 @@ declare namespace LocalJSX {
     */
     'sticky'?: boolean;
   }
-  interface IonItemGroup extends JSXBase.HTMLAttributes<HTMLIonItemGroupElement> {}
-  interface IonItemOption extends JSXBase.HTMLAttributes<HTMLIonItemOptionElement> {
+  interface IonItemGroup {}
+  interface IonItemOption {
     /**
     * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
     */
@@ -4634,7 +4685,7 @@ declare namespace LocalJSX {
     */
     'type'?: 'submit' | 'reset' | 'button';
   }
-  interface IonItemOptions extends JSXBase.HTMLAttributes<HTMLIonItemOptionsElement> {
+  interface IonItemOptions {
     /**
     * Emitted when the item has been fully swiped.
     */
@@ -4644,7 +4695,7 @@ declare namespace LocalJSX {
     */
     'side'?: Side;
   }
-  interface IonItemSliding extends JSXBase.HTMLAttributes<HTMLIonItemSlidingElement> {
+  interface IonItemSliding {
     /**
     * If `true`, the user cannot interact with the sliding item.
     */
@@ -4654,7 +4705,7 @@ declare namespace LocalJSX {
     */
     'onIonDrag'?: (event: CustomEvent<any>) => void;
   }
-  interface IonLabel extends JSXBase.HTMLAttributes<HTMLIonLabelElement> {
+  interface IonLabel {
     /**
     * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
     */
@@ -4668,7 +4719,7 @@ declare namespace LocalJSX {
     */
     'position'?: 'fixed' | 'stacked' | 'floating';
   }
-  interface IonList extends JSXBase.HTMLAttributes<HTMLIonListElement> {
+  interface IonList {
     /**
     * If `true`, the list will have margin around it and rounded corners.
     */
@@ -4682,7 +4733,7 @@ declare namespace LocalJSX {
     */
     'mode'?: "ios" | "md";
   }
-  interface IonListHeader extends JSXBase.HTMLAttributes<HTMLIonListHeaderElement> {
+  interface IonListHeader {
     /**
     * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
     */
@@ -4692,7 +4743,7 @@ declare namespace LocalJSX {
     */
     'mode'?: "ios" | "md";
   }
-  interface IonLoading extends JSXBase.HTMLAttributes<HTMLIonLoadingElement> {
+  interface IonLoading {
     /**
     * If `true`, the loading indicator will animate.
     */
@@ -4758,8 +4809,8 @@ declare namespace LocalJSX {
     */
     'translucent'?: boolean;
   }
-  interface IonLoadingController extends JSXBase.HTMLAttributes<HTMLIonLoadingControllerElement> {}
-  interface IonMenu extends JSXBase.HTMLAttributes<HTMLIonMenuElement> {
+  interface IonLoadingController {}
+  interface IonMenu {
     /**
     * The content's id the menu should use.
     */
@@ -4805,7 +4856,7 @@ declare namespace LocalJSX {
     */
     'type'?: string;
   }
-  interface IonMenuButton extends JSXBase.HTMLAttributes<HTMLIonMenuButtonElement> {
+  interface IonMenuButton {
     /**
     * Automatically hides the menu button when the corresponding menu is not active
     */
@@ -4827,8 +4878,8 @@ declare namespace LocalJSX {
     */
     'type'?: 'submit' | 'reset' | 'button';
   }
-  interface IonMenuController extends JSXBase.HTMLAttributes<HTMLIonMenuControllerElement> {}
-  interface IonMenuToggle extends JSXBase.HTMLAttributes<HTMLIonMenuToggleElement> {
+  interface IonMenuController {}
+  interface IonMenuToggle {
     /**
     * Automatically hides the content when the corresponding menu is not active.  By default, it's `true`. Change it to `false` in order to keep `ion-menu-toggle` always visible regardless the state of the menu.
     */
@@ -4838,7 +4889,7 @@ declare namespace LocalJSX {
     */
     'menu'?: string;
   }
-  interface IonModal extends JSXBase.HTMLAttributes<HTMLIonModalElement> {
+  interface IonModal {
     /**
     * If `true`, the modal will animate.
     */
@@ -4896,8 +4947,8 @@ declare namespace LocalJSX {
     */
     'showBackdrop'?: boolean;
   }
-  interface IonModalController extends JSXBase.HTMLAttributes<HTMLIonModalControllerElement> {}
-  interface IonNav extends JSXBase.HTMLAttributes<HTMLIonNavElement> {
+  interface IonModalController {}
+  interface IonNav {
     /**
     * If `true`, the nav should animate the transition of components.
     */
@@ -4927,8 +4978,22 @@ declare namespace LocalJSX {
     */
     'swipeGesture'?: boolean;
   }
-  interface IonNavPop extends JSXBase.HTMLAttributes<HTMLIonNavPopElement> {}
-  interface IonNavPush extends JSXBase.HTMLAttributes<HTMLIonNavPushElement> {
+  interface IonNavLink {
+    /**
+    * Component to navigate to. Only used if the `routerDirection` is `"forward"` or `"root"`.
+    */
+    'component'?: NavComponent;
+    /**
+    * Data you want to pass to the component as props. Only used if the `"routerDirection"` is `"forward"` or `"root"`.
+    */
+    'componentProps'?: ComponentProps;
+    /**
+    * The transition direction when navigating to another page.
+    */
+    'routerDirection'?: RouterDirection;
+  }
+  interface IonNavPop {}
+  interface IonNavPush {
     /**
     * Component to navigate to
     */
@@ -4938,7 +5003,7 @@ declare namespace LocalJSX {
     */
     'componentProps'?: ComponentProps;
   }
-  interface IonNavSetRoot extends JSXBase.HTMLAttributes<HTMLIonNavSetRootElement> {
+  interface IonNavSetRoot {
     /**
     * Component you want to make root for the navigation stack
     */
@@ -4948,7 +5013,7 @@ declare namespace LocalJSX {
     */
     'componentProps'?: ComponentProps;
   }
-  interface IonNote extends JSXBase.HTMLAttributes<HTMLIonNoteElement> {
+  interface IonNote {
     /**
     * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
     */
@@ -4958,7 +5023,7 @@ declare namespace LocalJSX {
     */
     'mode'?: "ios" | "md";
   }
-  interface IonPicker extends JSXBase.HTMLAttributes<HTMLIonPickerElement> {
+  interface IonPicker {
     /**
     * If `true`, the picker will animate.
     */
@@ -5020,14 +5085,14 @@ declare namespace LocalJSX {
     */
     'showBackdrop'?: boolean;
   }
-  interface IonPickerColumn extends JSXBase.HTMLAttributes<HTMLIonPickerColumnElement> {
+  interface IonPickerColumn {
     /**
     * Picker column data
     */
     'col': PickerColumn;
   }
-  interface IonPickerController extends JSXBase.HTMLAttributes<HTMLIonPickerControllerElement> {}
-  interface IonPopover extends JSXBase.HTMLAttributes<HTMLIonPopoverElement> {
+  interface IonPickerController {}
+  interface IonPopover {
     /**
     * If `true`, the popover will animate.
     */
@@ -5093,8 +5158,8 @@ declare namespace LocalJSX {
     */
     'translucent'?: boolean;
   }
-  interface IonPopoverController extends JSXBase.HTMLAttributes<HTMLIonPopoverControllerElement> {}
-  interface IonProgressBar extends JSXBase.HTMLAttributes<HTMLIonProgressBarElement> {
+  interface IonPopoverController {}
+  interface IonProgressBar {
     /**
     * If the buffer and value are smaller than 1, the buffer circles will show. The buffer should be between [0, 1].
     */
@@ -5120,7 +5185,7 @@ declare namespace LocalJSX {
     */
     'value'?: number;
   }
-  interface IonRadio extends JSXBase.HTMLAttributes<HTMLIonRadioElement> {
+  interface IonRadio {
     /**
     * If `true`, the radio is selected.
     */
@@ -5158,7 +5223,7 @@ declare namespace LocalJSX {
     */
     'value'?: any | null;
   }
-  interface IonRadioGroup extends JSXBase.HTMLAttributes<HTMLIonRadioGroupElement> {
+  interface IonRadioGroup {
     /**
     * If `true`, the radios can be deselected.
     */
@@ -5176,7 +5241,7 @@ declare namespace LocalJSX {
     */
     'value'?: any | null;
   }
-  interface IonRange extends JSXBase.HTMLAttributes<HTMLIonRangeElement> {
+  interface IonRange {
     /**
     * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
     */
@@ -5242,7 +5307,7 @@ declare namespace LocalJSX {
     */
     'value'?: RangeValue;
   }
-  interface IonRefresher extends JSXBase.HTMLAttributes<HTMLIonRefresherElement> {
+  interface IonRefresher {
     /**
     * Time it takes to close the refresher.
     */
@@ -5280,7 +5345,7 @@ declare namespace LocalJSX {
     */
     'snapbackDuration'?: string;
   }
-  interface IonRefresherContent extends JSXBase.HTMLAttributes<HTMLIonRefresherContentElement> {
+  interface IonRefresherContent {
     /**
     * A static icon to display when you begin to pull down
     */
@@ -5298,8 +5363,8 @@ declare namespace LocalJSX {
     */
     'refreshingText'?: string;
   }
-  interface IonReorder extends JSXBase.HTMLAttributes<HTMLIonReorderElement> {}
-  interface IonReorderGroup extends JSXBase.HTMLAttributes<HTMLIonReorderGroupElement> {
+  interface IonReorder {}
+  interface IonReorderGroup {
     /**
     * If `true`, the reorder will be hidden.
     */
@@ -5309,13 +5374,13 @@ declare namespace LocalJSX {
     */
     'onIonItemReorder'?: (event: CustomEvent<ItemReorderEventDetail>) => void;
   }
-  interface IonRippleEffect extends JSXBase.HTMLAttributes<HTMLIonRippleEffectElement> {
+  interface IonRippleEffect {
     /**
     * Sets the type of ripple-effect:  - `bounded`: the ripple effect expands from the user's click position - `unbounded`: the ripple effect expands from the center of the button and overflows the container.  NOTE: Surfaces for bounded ripples should have the overflow property set to hidden, while surfaces for unbounded ripples should have it set to visible.
     */
     'type'?: 'bounded' | 'unbounded';
   }
-  interface IonRoute extends JSXBase.HTMLAttributes<HTMLIonRouteElement> {
+  interface IonRoute {
     /**
     * Name of the component to load/select in the navigation outlet (`ion-tabs`, `ion-nav`) when the route matches.  The value of this property is not always the tagname of the component to load, in `ion-tabs` it actually refers to the name of the `ion-tab` to select.
     */
@@ -5333,7 +5398,7 @@ declare namespace LocalJSX {
     */
     'url'?: string;
   }
-  interface IonRouteRedirect extends JSXBase.HTMLAttributes<HTMLIonRouteRedirectElement> {
+  interface IonRouteRedirect {
     /**
     * A redirect route, redirects "from" a URL "to" another URL. This property is that "from" URL. It needs to be an exact match of the navigated URL in order to apply.  The path specified in this value is always an absolute path, even if the initial `/` slash is not specified.
     */
@@ -5347,7 +5412,7 @@ declare namespace LocalJSX {
     */
     'to': string | undefined | null;
   }
-  interface IonRouter extends JSXBase.HTMLAttributes<HTMLIonRouterElement> {
+  interface IonRouter {
     /**
     * Emitted when the route had changed
     */
@@ -5365,7 +5430,7 @@ declare namespace LocalJSX {
     */
     'useHash'?: boolean;
   }
-  interface IonRouterLink extends JSXBase.HTMLAttributes<HTMLIonRouterLinkElement> {
+  interface IonRouterLink {
     /**
     * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
     */
@@ -5387,7 +5452,7 @@ declare namespace LocalJSX {
     */
     'target'?: string | undefined;
   }
-  interface IonRouterOutlet extends JSXBase.HTMLAttributes<HTMLIonRouterOutletElement> {
+  interface IonRouterOutlet {
     /**
     * If `true`, the router-outlet should animate the transition of components.
     */
@@ -5401,8 +5466,8 @@ declare namespace LocalJSX {
     */
     'mode'?: "ios" | "md";
   }
-  interface IonRow extends JSXBase.HTMLAttributes<HTMLIonRowElement> {}
-  interface IonSearchbar extends JSXBase.HTMLAttributes<HTMLIonSearchbarElement> {
+  interface IonRow {}
+  interface IonSearchbar {
     /**
     * If `true`, enable searchbar animation.
     */
@@ -5440,6 +5505,10 @@ declare namespace LocalJSX {
     */
     'disabled'?: boolean;
     /**
+    * A hint to the browser for which keyboard to display. Possible values: `"none"`, `"text"`, `"tel"`, `"url"`, `"email"`, `"numeric"`, `"decimal"`, and `"search"`.
+    */
+    'inputmode'?: 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search';
+    /**
     * The mode determines which platform styles to use.
     */
     'mode'?: "ios" | "md";
@@ -5492,7 +5561,7 @@ declare namespace LocalJSX {
     */
     'value'?: string | null;
   }
-  interface IonSegment extends JSXBase.HTMLAttributes<HTMLIonSegmentElement> {
+  interface IonSegment {
     /**
     * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
     */
@@ -5510,10 +5579,6 @@ declare namespace LocalJSX {
     */
     'onIonChange'?: (event: CustomEvent<SegmentChangeEventDetail>) => void;
     /**
-    * Emitted when the styles change.
-    */
-    'onIonStyle'?: (event: CustomEvent<StyleEventDetail>) => void;
-    /**
     * If `true`, the segment buttons will overflow and the user can swipe to see them.
     */
     'scrollable'?: boolean;
@@ -5522,7 +5587,7 @@ declare namespace LocalJSX {
     */
     'value'?: string | null;
   }
-  interface IonSegmentButton extends JSXBase.HTMLAttributes<HTMLIonSegmentButtonElement> {
+  interface IonSegmentButton {
     /**
     * If `true`, the segment button is selected.
     */
@@ -5552,7 +5617,7 @@ declare namespace LocalJSX {
     */
     'value'?: string;
   }
-  interface IonSelect extends JSXBase.HTMLAttributes<HTMLIonSelectElement> {
+  interface IonSelect {
     /**
     * The text to display on the cancel button.
     */
@@ -5618,7 +5683,7 @@ declare namespace LocalJSX {
     */
     'value'?: any | null;
   }
-  interface IonSelectOption extends JSXBase.HTMLAttributes<HTMLIonSelectOptionElement> {
+  interface IonSelectOption {
     /**
     * If `true`, the user cannot interact with the select option.
     */
@@ -5632,7 +5697,7 @@ declare namespace LocalJSX {
     */
     'value'?: any | null;
   }
-  interface IonSelectPopover extends JSXBase.HTMLAttributes<HTMLIonSelectPopoverElement> {
+  interface IonSelectPopover {
     /**
     * Header text for the popover
     */
@@ -5650,7 +5715,7 @@ declare namespace LocalJSX {
     */
     'subHeader'?: string;
   }
-  interface IonSkeletonText extends JSXBase.HTMLAttributes<HTMLIonSkeletonTextElement> {
+  interface IonSkeletonText {
     /**
     * If `true`, the skeleton text will animate.
     */
@@ -5660,8 +5725,8 @@ declare namespace LocalJSX {
     */
     'width'?: string;
   }
-  interface IonSlide extends JSXBase.HTMLAttributes<HTMLIonSlideElement> {}
-  interface IonSlides extends JSXBase.HTMLAttributes<HTMLIonSlidesElement> {
+  interface IonSlide {}
+  interface IonSlides {
     /**
     * The mode determines which platform styles to use.
     */
@@ -5743,7 +5808,7 @@ declare namespace LocalJSX {
     */
     'scrollbar'?: boolean;
   }
-  interface IonSpinner extends JSXBase.HTMLAttributes<HTMLIonSpinnerElement> {
+  interface IonSpinner {
     /**
     * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
     */
@@ -5761,7 +5826,7 @@ declare namespace LocalJSX {
     */
     'paused'?: boolean;
   }
-  interface IonSplitPane extends JSXBase.HTMLAttributes<HTMLIonSplitPaneElement> {
+  interface IonSplitPane {
     /**
     * The content `id` of the split-pane's main content. This property can be used instead of the `[main]` attribute to select the `main` content of the split-pane.
     */
@@ -5779,7 +5844,7 @@ declare namespace LocalJSX {
     */
     'when'?: string | boolean;
   }
-  interface IonTab extends JSXBase.HTMLAttributes<HTMLIonTabElement> {
+  interface IonTab {
     /**
     * The component to display inside of the tab.
     */
@@ -5789,7 +5854,7 @@ declare namespace LocalJSX {
     */
     'tab': string;
   }
-  interface IonTabBar extends JSXBase.HTMLAttributes<HTMLIonTabBarElement> {
+  interface IonTabBar {
     /**
     * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
     */
@@ -5807,7 +5872,7 @@ declare namespace LocalJSX {
     */
     'translucent'?: boolean;
   }
-  interface IonTabButton extends JSXBase.HTMLAttributes<HTMLIonTabButtonElement> {
+  interface IonTabButton {
     /**
     * If `true`, the user cannot interact with the tab button.
     */
@@ -5845,7 +5910,7 @@ declare namespace LocalJSX {
     */
     'target'?: string | undefined;
   }
-  interface IonTabs extends JSXBase.HTMLAttributes<HTMLIonTabsElement> {
+  interface IonTabs {
     /**
     * Emitted when the navigation has finished transitioning to a new component.
     */
@@ -5855,7 +5920,7 @@ declare namespace LocalJSX {
     */
     'onIonTabsWillChange'?: (event: CustomEvent<{tab: string}>) => void;
   }
-  interface IonText extends JSXBase.HTMLAttributes<HTMLIonTextElement> {
+  interface IonText {
     /**
     * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
     */
@@ -5865,7 +5930,7 @@ declare namespace LocalJSX {
     */
     'mode'?: "ios" | "md";
   }
-  interface IonTextarea extends JSXBase.HTMLAttributes<HTMLIonTextareaElement> {
+  interface IonTextarea {
     /**
     * If `true`, the element height will increase based on the value.
     */
@@ -5959,14 +6024,18 @@ declare namespace LocalJSX {
     */
     'wrap'?: 'hard' | 'soft' | 'off';
   }
-  interface IonThumbnail extends JSXBase.HTMLAttributes<HTMLIonThumbnailElement> {}
-  interface IonTitle extends JSXBase.HTMLAttributes<HTMLIonTitleElement> {
+  interface IonThumbnail {}
+  interface IonTitle {
     /**
     * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
     */
     'color'?: Color;
+    /**
+    * The size of the toolbar title.
+    */
+    'size'?: 'large' | 'small';
   }
-  interface IonToast extends JSXBase.HTMLAttributes<HTMLIonToastElement> {
+  interface IonToast {
     /**
     * If `true`, the toast will animate.
     */
@@ -6044,8 +6113,8 @@ declare namespace LocalJSX {
     */
     'translucent'?: boolean;
   }
-  interface IonToastController extends JSXBase.HTMLAttributes<HTMLIonToastControllerElement> {}
-  interface IonToggle extends JSXBase.HTMLAttributes<HTMLIonToggleElement> {
+  interface IonToastController {}
+  interface IonToggle {
     /**
     * If `true`, the toggle is selected.
     */
@@ -6083,7 +6152,7 @@ declare namespace LocalJSX {
     */
     'value'?: string | null;
   }
-  interface IonToolbar extends JSXBase.HTMLAttributes<HTMLIonToolbarElement> {
+  interface IonToolbar {
     /**
     * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
     */
@@ -6093,7 +6162,7 @@ declare namespace LocalJSX {
     */
     'mode'?: "ios" | "md";
   }
-  interface IonVirtualScroll extends JSXBase.HTMLAttributes<HTMLIonVirtualScrollElement> {
+  interface IonVirtualScroll {
     /**
     * The approximate width of each footer template's cell. This dimension is used to help determine how many cells should be created when initialized, and to help calculate the height of the scrollable area. This height value can only use `px` units. Note that the actual rendered size of each cell comes from the app's CSS, whereas this approximation is used to help calculate initial dimensions before the item has been rendered.
     */
@@ -6199,6 +6268,7 @@ declare namespace LocalJSX {
     'ion-modal': IonModal;
     'ion-modal-controller': IonModalController;
     'ion-nav': IonNav;
+    'ion-nav-link': IonNavLink;
     'ion-nav-pop': IonNavPop;
     'ion-nav-push': IonNavPush;
     'ion-nav-set-root': IonNavSetRoot;
@@ -6255,7 +6325,107 @@ export { LocalJSX as JSX };
 
 declare module "@stencil/core" {
   export namespace JSX {
-    interface IntrinsicElements extends LocalJSX.IntrinsicElements {}
+    interface IntrinsicElements {
+      'ion-action-sheet': LocalJSX.IonActionSheet & JSXBase.HTMLAttributes<HTMLIonActionSheetElement>;
+      'ion-action-sheet-controller': LocalJSX.IonActionSheetController & JSXBase.HTMLAttributes<HTMLIonActionSheetControllerElement>;
+      'ion-alert': LocalJSX.IonAlert & JSXBase.HTMLAttributes<HTMLIonAlertElement>;
+      'ion-alert-controller': LocalJSX.IonAlertController & JSXBase.HTMLAttributes<HTMLIonAlertControllerElement>;
+      'ion-anchor': LocalJSX.IonAnchor & JSXBase.HTMLAttributes<HTMLIonAnchorElement>;
+      'ion-app': LocalJSX.IonApp & JSXBase.HTMLAttributes<HTMLIonAppElement>;
+      'ion-avatar': LocalJSX.IonAvatar & JSXBase.HTMLAttributes<HTMLIonAvatarElement>;
+      'ion-back-button': LocalJSX.IonBackButton & JSXBase.HTMLAttributes<HTMLIonBackButtonElement>;
+      'ion-backdrop': LocalJSX.IonBackdrop & JSXBase.HTMLAttributes<HTMLIonBackdropElement>;
+      'ion-badge': LocalJSX.IonBadge & JSXBase.HTMLAttributes<HTMLIonBadgeElement>;
+      'ion-button': LocalJSX.IonButton & JSXBase.HTMLAttributes<HTMLIonButtonElement>;
+      'ion-buttons': LocalJSX.IonButtons & JSXBase.HTMLAttributes<HTMLIonButtonsElement>;
+      'ion-card': LocalJSX.IonCard & JSXBase.HTMLAttributes<HTMLIonCardElement>;
+      'ion-card-content': LocalJSX.IonCardContent & JSXBase.HTMLAttributes<HTMLIonCardContentElement>;
+      'ion-card-header': LocalJSX.IonCardHeader & JSXBase.HTMLAttributes<HTMLIonCardHeaderElement>;
+      'ion-card-subtitle': LocalJSX.IonCardSubtitle & JSXBase.HTMLAttributes<HTMLIonCardSubtitleElement>;
+      'ion-card-title': LocalJSX.IonCardTitle & JSXBase.HTMLAttributes<HTMLIonCardTitleElement>;
+      'ion-checkbox': LocalJSX.IonCheckbox & JSXBase.HTMLAttributes<HTMLIonCheckboxElement>;
+      'ion-chip': LocalJSX.IonChip & JSXBase.HTMLAttributes<HTMLIonChipElement>;
+      'ion-col': LocalJSX.IonCol & JSXBase.HTMLAttributes<HTMLIonColElement>;
+      'ion-content': LocalJSX.IonContent & JSXBase.HTMLAttributes<HTMLIonContentElement>;
+      'ion-datetime': LocalJSX.IonDatetime & JSXBase.HTMLAttributes<HTMLIonDatetimeElement>;
+      'ion-fab': LocalJSX.IonFab & JSXBase.HTMLAttributes<HTMLIonFabElement>;
+      'ion-fab-button': LocalJSX.IonFabButton & JSXBase.HTMLAttributes<HTMLIonFabButtonElement>;
+      'ion-fab-list': LocalJSX.IonFabList & JSXBase.HTMLAttributes<HTMLIonFabListElement>;
+      'ion-footer': LocalJSX.IonFooter & JSXBase.HTMLAttributes<HTMLIonFooterElement>;
+      'ion-grid': LocalJSX.IonGrid & JSXBase.HTMLAttributes<HTMLIonGridElement>;
+      'ion-header': LocalJSX.IonHeader & JSXBase.HTMLAttributes<HTMLIonHeaderElement>;
+      'ion-img': LocalJSX.IonImg & JSXBase.HTMLAttributes<HTMLIonImgElement>;
+      'ion-infinite-scroll': LocalJSX.IonInfiniteScroll & JSXBase.HTMLAttributes<HTMLIonInfiniteScrollElement>;
+      'ion-infinite-scroll-content': LocalJSX.IonInfiniteScrollContent & JSXBase.HTMLAttributes<HTMLIonInfiniteScrollContentElement>;
+      'ion-input': LocalJSX.IonInput & JSXBase.HTMLAttributes<HTMLIonInputElement>;
+      'ion-item': LocalJSX.IonItem & JSXBase.HTMLAttributes<HTMLIonItemElement>;
+      'ion-item-divider': LocalJSX.IonItemDivider & JSXBase.HTMLAttributes<HTMLIonItemDividerElement>;
+      'ion-item-group': LocalJSX.IonItemGroup & JSXBase.HTMLAttributes<HTMLIonItemGroupElement>;
+      'ion-item-option': LocalJSX.IonItemOption & JSXBase.HTMLAttributes<HTMLIonItemOptionElement>;
+      'ion-item-options': LocalJSX.IonItemOptions & JSXBase.HTMLAttributes<HTMLIonItemOptionsElement>;
+      'ion-item-sliding': LocalJSX.IonItemSliding & JSXBase.HTMLAttributes<HTMLIonItemSlidingElement>;
+      'ion-label': LocalJSX.IonLabel & JSXBase.HTMLAttributes<HTMLIonLabelElement>;
+      'ion-list': LocalJSX.IonList & JSXBase.HTMLAttributes<HTMLIonListElement>;
+      'ion-list-header': LocalJSX.IonListHeader & JSXBase.HTMLAttributes<HTMLIonListHeaderElement>;
+      'ion-loading': LocalJSX.IonLoading & JSXBase.HTMLAttributes<HTMLIonLoadingElement>;
+      'ion-loading-controller': LocalJSX.IonLoadingController & JSXBase.HTMLAttributes<HTMLIonLoadingControllerElement>;
+      'ion-menu': LocalJSX.IonMenu & JSXBase.HTMLAttributes<HTMLIonMenuElement>;
+      'ion-menu-button': LocalJSX.IonMenuButton & JSXBase.HTMLAttributes<HTMLIonMenuButtonElement>;
+      'ion-menu-controller': LocalJSX.IonMenuController & JSXBase.HTMLAttributes<HTMLIonMenuControllerElement>;
+      'ion-menu-toggle': LocalJSX.IonMenuToggle & JSXBase.HTMLAttributes<HTMLIonMenuToggleElement>;
+      'ion-modal': LocalJSX.IonModal & JSXBase.HTMLAttributes<HTMLIonModalElement>;
+      'ion-modal-controller': LocalJSX.IonModalController & JSXBase.HTMLAttributes<HTMLIonModalControllerElement>;
+      'ion-nav': LocalJSX.IonNav & JSXBase.HTMLAttributes<HTMLIonNavElement>;
+      'ion-nav-link': LocalJSX.IonNavLink & JSXBase.HTMLAttributes<HTMLIonNavLinkElement>;
+      'ion-nav-pop': LocalJSX.IonNavPop & JSXBase.HTMLAttributes<HTMLIonNavPopElement>;
+      'ion-nav-push': LocalJSX.IonNavPush & JSXBase.HTMLAttributes<HTMLIonNavPushElement>;
+      'ion-nav-set-root': LocalJSX.IonNavSetRoot & JSXBase.HTMLAttributes<HTMLIonNavSetRootElement>;
+      'ion-note': LocalJSX.IonNote & JSXBase.HTMLAttributes<HTMLIonNoteElement>;
+      'ion-picker': LocalJSX.IonPicker & JSXBase.HTMLAttributes<HTMLIonPickerElement>;
+      'ion-picker-column': LocalJSX.IonPickerColumn & JSXBase.HTMLAttributes<HTMLIonPickerColumnElement>;
+      'ion-picker-controller': LocalJSX.IonPickerController & JSXBase.HTMLAttributes<HTMLIonPickerControllerElement>;
+      'ion-popover': LocalJSX.IonPopover & JSXBase.HTMLAttributes<HTMLIonPopoverElement>;
+      'ion-popover-controller': LocalJSX.IonPopoverController & JSXBase.HTMLAttributes<HTMLIonPopoverControllerElement>;
+      'ion-progress-bar': LocalJSX.IonProgressBar & JSXBase.HTMLAttributes<HTMLIonProgressBarElement>;
+      'ion-radio': LocalJSX.IonRadio & JSXBase.HTMLAttributes<HTMLIonRadioElement>;
+      'ion-radio-group': LocalJSX.IonRadioGroup & JSXBase.HTMLAttributes<HTMLIonRadioGroupElement>;
+      'ion-range': LocalJSX.IonRange & JSXBase.HTMLAttributes<HTMLIonRangeElement>;
+      'ion-refresher': LocalJSX.IonRefresher & JSXBase.HTMLAttributes<HTMLIonRefresherElement>;
+      'ion-refresher-content': LocalJSX.IonRefresherContent & JSXBase.HTMLAttributes<HTMLIonRefresherContentElement>;
+      'ion-reorder': LocalJSX.IonReorder & JSXBase.HTMLAttributes<HTMLIonReorderElement>;
+      'ion-reorder-group': LocalJSX.IonReorderGroup & JSXBase.HTMLAttributes<HTMLIonReorderGroupElement>;
+      'ion-ripple-effect': LocalJSX.IonRippleEffect & JSXBase.HTMLAttributes<HTMLIonRippleEffectElement>;
+      'ion-route': LocalJSX.IonRoute & JSXBase.HTMLAttributes<HTMLIonRouteElement>;
+      'ion-route-redirect': LocalJSX.IonRouteRedirect & JSXBase.HTMLAttributes<HTMLIonRouteRedirectElement>;
+      'ion-router': LocalJSX.IonRouter & JSXBase.HTMLAttributes<HTMLIonRouterElement>;
+      'ion-router-link': LocalJSX.IonRouterLink & JSXBase.HTMLAttributes<HTMLIonRouterLinkElement>;
+      'ion-router-outlet': LocalJSX.IonRouterOutlet & JSXBase.HTMLAttributes<HTMLIonRouterOutletElement>;
+      'ion-row': LocalJSX.IonRow & JSXBase.HTMLAttributes<HTMLIonRowElement>;
+      'ion-searchbar': LocalJSX.IonSearchbar & JSXBase.HTMLAttributes<HTMLIonSearchbarElement>;
+      'ion-segment': LocalJSX.IonSegment & JSXBase.HTMLAttributes<HTMLIonSegmentElement>;
+      'ion-segment-button': LocalJSX.IonSegmentButton & JSXBase.HTMLAttributes<HTMLIonSegmentButtonElement>;
+      'ion-select': LocalJSX.IonSelect & JSXBase.HTMLAttributes<HTMLIonSelectElement>;
+      'ion-select-option': LocalJSX.IonSelectOption & JSXBase.HTMLAttributes<HTMLIonSelectOptionElement>;
+      'ion-select-popover': LocalJSX.IonSelectPopover & JSXBase.HTMLAttributes<HTMLIonSelectPopoverElement>;
+      'ion-skeleton-text': LocalJSX.IonSkeletonText & JSXBase.HTMLAttributes<HTMLIonSkeletonTextElement>;
+      'ion-slide': LocalJSX.IonSlide & JSXBase.HTMLAttributes<HTMLIonSlideElement>;
+      'ion-slides': LocalJSX.IonSlides & JSXBase.HTMLAttributes<HTMLIonSlidesElement>;
+      'ion-spinner': LocalJSX.IonSpinner & JSXBase.HTMLAttributes<HTMLIonSpinnerElement>;
+      'ion-split-pane': LocalJSX.IonSplitPane & JSXBase.HTMLAttributes<HTMLIonSplitPaneElement>;
+      'ion-tab': LocalJSX.IonTab & JSXBase.HTMLAttributes<HTMLIonTabElement>;
+      'ion-tab-bar': LocalJSX.IonTabBar & JSXBase.HTMLAttributes<HTMLIonTabBarElement>;
+      'ion-tab-button': LocalJSX.IonTabButton & JSXBase.HTMLAttributes<HTMLIonTabButtonElement>;
+      'ion-tabs': LocalJSX.IonTabs & JSXBase.HTMLAttributes<HTMLIonTabsElement>;
+      'ion-text': LocalJSX.IonText & JSXBase.HTMLAttributes<HTMLIonTextElement>;
+      'ion-textarea': LocalJSX.IonTextarea & JSXBase.HTMLAttributes<HTMLIonTextareaElement>;
+      'ion-thumbnail': LocalJSX.IonThumbnail & JSXBase.HTMLAttributes<HTMLIonThumbnailElement>;
+      'ion-title': LocalJSX.IonTitle & JSXBase.HTMLAttributes<HTMLIonTitleElement>;
+      'ion-toast': LocalJSX.IonToast & JSXBase.HTMLAttributes<HTMLIonToastElement>;
+      'ion-toast-controller': LocalJSX.IonToastController & JSXBase.HTMLAttributes<HTMLIonToastControllerElement>;
+      'ion-toggle': LocalJSX.IonToggle & JSXBase.HTMLAttributes<HTMLIonToggleElement>;
+      'ion-toolbar': LocalJSX.IonToolbar & JSXBase.HTMLAttributes<HTMLIonToolbarElement>;
+      'ion-virtual-scroll': LocalJSX.IonVirtualScroll & JSXBase.HTMLAttributes<HTMLIonVirtualScrollElement>;
+    }
   }
 }
 

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

@@ -1,13 +1,24 @@
-import { Component, ComponentInterface, Method } from '@stencil/core';
+import { Build, Component, ComponentInterface, Method } from '@stencil/core';
 
 import { ActionSheetOptions, OverlayController } from '../../interface';
 import { createOverlay, dismissOverlay, getOverlay } from '../../utils/overlays';
 
+/**
+ * @deprecated Use the `actionSheetController` exported from core.
+ */
 @Component({
   tag: 'ion-action-sheet-controller'
 })
 export class ActionSheetController implements ComponentInterface, OverlayController {
 
+  constructor() {
+    if (Build.isDev) {
+      console.warn(`[DEPRECATED][ion-action-sheet-controller] Use the actionSheetController export from @ionic/core:
+  import { actionSheetController } from '@ionic/core';
+  const actionSheet = await actionSheetController.create({...});`);
+    }
+  }
+
   /**
    * Create an action sheet overlay with action sheet options.
    *

core/src/components/action-sheet-controller/readme.md

@@ -5,6 +5,8 @@ Action Sheet controllers programmatically control the action sheet component. Ac
 <!-- Auto Generated Below -->
 
 
+> **[DEPRECATED]** Use the `actionSheetController` exported from core.
+
 ## Methods
 
 ### `create(options: ActionSheetOptions) => Promise<HTMLIonActionSheetElement>`

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

@@ -65,6 +65,8 @@
 }
 
 .action-sheet-button {
+  display: block;
+
   width: 100%;
 
   border: 0;

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

@@ -1,8 +1,8 @@
 import { Component, ComponentInterface, Element, Event, EventEmitter, Host, Method, Prop, h } from '@stencil/core';
 
 import { getIonMode } from '../../global/ionic-global';
-import { ActionSheetButton, Animation, AnimationBuilder, CssClassMap, OverlayEventDetail, OverlayInterface } from '../../interface';
-import { BACKDROP, dismiss, eventMethod, isCancel, present, safeCall } from '../../utils/overlays';
+import { ActionSheetButton, AnimationBuilder, CssClassMap, OverlayEventDetail, OverlayInterface } from '../../interface';
+import { BACKDROP, dismiss, eventMethod, isCancel, prepareOverlay, present, safeCall } from '../../utils/overlays';
 import { getClassMap } from '../../utils/theme';
 
 import { iosEnterAnimation } from './animations/ios.enter';
@@ -24,10 +24,10 @@ import { mdLeaveAnimation } from './animations/md.leave';
 export class ActionSheet implements ComponentInterface, OverlayInterface {
 
   presented = false;
-  animation?: Animation;
+  animation?: any;
   mode = getIonMode(this);
 
-  @Element() el!: HTMLElement;
+  @Element() el!: HTMLIonActionSheetElement;
 
   /** @internal */
   @Prop() overlayIndex!: number;
@@ -113,6 +113,10 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
     return present(this, 'actionSheetEnter', iosEnterAnimation, mdEnterAnimation);
   }
 
+  constructor() {
+    prepareOverlay(this.el);
+  }
+
   /**
    * Dismiss the action sheet overlay after it has been presented.
    *

core/src/components/action-sheet/animations/ios.enter.ts

@@ -1,27 +1,25 @@
-import { Animation } from '../../../interface';
+import { IonicAnimation } from '../../../interface';
+import { createAnimation } from '../../../utils/animation/animation';
 
 /**
  * iOS Action Sheet Enter Animation
  */
-export const iosEnterAnimation = (AnimationC: Animation, baseEl: HTMLElement): Promise<Animation> => {
-  const baseAnimation = new AnimationC();
+export const iosEnterAnimation = (baseEl: HTMLElement): IonicAnimation => {
+  const baseAnimation = createAnimation();
+  const backdropAnimation = createAnimation();
+  const wrapperAnimation = createAnimation();
 
-  const backdropAnimation = new AnimationC();
-  backdropAnimation.addElement(baseEl.querySelector('ion-backdrop'));
+  backdropAnimation
+    .addElement(baseEl.querySelector('ion-backdrop')!)
+    .fromTo('opacity', 0.01, 0.4);
 
-  const wrapperAnimation = new AnimationC();
-  wrapperAnimation.addElement(baseEl.querySelector('.action-sheet-wrapper'));
+  wrapperAnimation
+    .addElement(baseEl.querySelector('.action-sheet-wrapper')!)
+    .fromTo('transform', 'translateY(100%)', 'translateY(0%)');
 
-  backdropAnimation.fromTo('opacity', 0.01, 0.4);
-
-  wrapperAnimation.fromTo('translateY', '100%', '0%');
-
-  const ani = baseAnimation
+  return baseAnimation
     .addElement(baseEl)
     .easing('cubic-bezier(.36,.66,.04,1)')
     .duration(400)
-    .add(backdropAnimation)
-    .add(wrapperAnimation);
-
-  return Promise.resolve(ani);
+    .addAnimation([backdropAnimation, wrapperAnimation]);
 };

core/src/components/action-sheet/animations/ios.leave.ts

@@ -1,27 +1,25 @@
-import { Animation } from '../../../interface';
+import { IonicAnimation } from '../../../interface';
+import { createAnimation } from '../../../utils/animation/animation';
 
 /**
  * iOS Action Sheet Leave Animation
  */
-export const iosLeaveAnimation = (AnimationC: Animation, baseEl: HTMLElement): Promise<Animation> => {
-  const baseAnimation = new AnimationC();
+export const iosLeaveAnimation = (baseEl: HTMLElement): IonicAnimation => {
+  const baseAnimation = createAnimation();
+  const backdropAnimation = createAnimation();
+  const wrapperAnimation = createAnimation();
 
-  const backdropAnimation = new AnimationC();
-  backdropAnimation.addElement(baseEl.querySelector('ion-backdrop'));
+  backdropAnimation
+    .addElement(baseEl.querySelector('ion-backdrop')!)
+    .fromTo('opacity', 0.4, 0);
 
-  const wrapperAnimation = new AnimationC();
-  wrapperAnimation.addElement(baseEl.querySelector('.action-sheet-wrapper'));
+  wrapperAnimation
+    .addElement(baseEl.querySelector('.action-sheet-wrapper')!)
+    .fromTo('transform', 'translateY(0%)', 'translateY(100%)');
 
-  backdropAnimation.fromTo('opacity', 0.4, 0);
-
-  wrapperAnimation.fromTo('translateY', '0%', '100%');
-
-  const ani = baseAnimation
+  return baseAnimation
     .addElement(baseEl)
     .easing('cubic-bezier(.36,.66,.04,1)')
     .duration(450)
-    .add(backdropAnimation)
-    .add(wrapperAnimation);
-
-  return Promise.resolve(ani);
+    .addAnimation([backdropAnimation, wrapperAnimation]);
 };

core/src/components/action-sheet/animations/md.enter.ts

@@ -1,27 +1,25 @@
-
-import { Animation } from '../../../interface';
+import { IonicAnimation } from '../../../interface';
+import { createAnimation } from '../../../utils/animation/animation';
 
 /**
  * MD Action Sheet Enter Animation
  */
-export const mdEnterAnimation = (AnimationC: Animation, baseEl: HTMLElement): Promise<Animation> => {
-  const baseAnimation = new AnimationC();
+export const mdEnterAnimation = (baseEl: HTMLElement): IonicAnimation => {
+  const baseAnimation = createAnimation();
+  const backdropAnimation = createAnimation();
+  const wrapperAnimation = createAnimation();
 
-  const backdropAnimation = new AnimationC();
-  backdropAnimation.addElement(baseEl.querySelector('ion-backdrop'));
+  backdropAnimation
+    .addElement(baseEl.querySelector('ion-backdrop')!)
+    .fromTo('opacity', 0.01, 0.32);
 
-  const wrapperAnimation = new AnimationC();
-  wrapperAnimation.addElement(baseEl.querySelector('.action-sheet-wrapper'));
+  wrapperAnimation
+    .addElement(baseEl.querySelector('.action-sheet-wrapper')!)
+    .fromTo('transform', 'translateY(100%)', 'translateY(0%)');
 
-  backdropAnimation.fromTo('opacity', 0.01, 0.32);
-  wrapperAnimation.fromTo('translateY', '100%', '0%');
-
-  const ani = baseAnimation
+  return baseAnimation
     .addElement(baseEl)
     .easing('cubic-bezier(.36,.66,.04,1)')
     .duration(400)
-    .add(backdropAnimation)
-    .add(wrapperAnimation);
-
-  return Promise.resolve(ani);
+    .addAnimation([backdropAnimation, wrapperAnimation]);
 };

core/src/components/action-sheet/animations/md.leave.ts

@@ -1,27 +1,25 @@
-import { Animation } from '../../../interface';
+import { IonicAnimation } from '../../../interface';
+import { createAnimation } from '../../../utils/animation/animation';
 
 /**
  * MD Action Sheet Leave Animation
  */
-export const mdLeaveAnimation = (AnimationC: Animation, baseEl: HTMLElement): Promise<Animation> => {
+export const mdLeaveAnimation = (baseEl: HTMLElement): IonicAnimation => {
+  const baseAnimation = createAnimation();
+  const backdropAnimation = createAnimation();
+  const wrapperAnimation = createAnimation();
 
-  const baseAnimation = new AnimationC();
+  backdropAnimation
+    .addElement(baseEl.querySelector('ion-backdrop')!)
+    .fromTo('opacity', 0.32, 0);
 
-  const backdropAnimation = new AnimationC();
-  backdropAnimation.addElement(baseEl.querySelector('ion-backdrop'));
+  wrapperAnimation
+    .addElement(baseEl.querySelector('.action-sheet-wrapper')!)
+    .fromTo('transform', 'translateY(0%)', 'translateY(100%)');
 
-  const wrapperAnimation = new AnimationC();
-  wrapperAnimation.addElement(baseEl.querySelector('.action-sheet-wrapper'));
-
-  backdropAnimation.fromTo('opacity', 0.32, 0);
-  wrapperAnimation.fromTo('translateY', '0%', '100%');
-
-  const ani = baseAnimation
+  return baseAnimation
     .addElement(baseEl)
     .easing('cubic-bezier(.36,.66,.04,1)')
     .duration(450)
-    .add(backdropAnimation)
-    .add(wrapperAnimation);
-
-  return Promise.resolve(ani);
+    .addAnimation([backdropAnimation, wrapperAnimation]);
 };

core/src/components/action-sheet/readme.md

@@ -4,7 +4,7 @@ An Action Sheet is a dialog that displays a set of options. It appears on top of
 
 ### Creating
 
-An action sheet can be created by the [Action Sheet Controller](../action-sheet-controller) from an array of `buttons`, with each button including properties for its `text`, and optionally a `handler` and `role`. If a handler returns `false` then the action sheet will not be dismissed. An action sheet can also optionally have a `title`, `subTitle` and an `icon`.
+An action sheet can be created by the [Action Sheet Controller](../action-sheet-controller) from an array of `buttons`, with each button including properties for its `text`, and optionally a `handler` and `role`. If a handler returns `false` then the action sheet will not be dismissed. An action sheet can also optionally have a `header` and a `subHeader`.
 
 ### Buttons
 
@@ -79,45 +79,45 @@ export class ActionSheetExample {
 
 ```javascript
 async function presentActionSheet() {
-  const actionSheetController = document.querySelector('ion-action-sheet-controller');
 
-  const actionSheet = await actionSheetController.create({
-    header: "Albums",
-    buttons: [{
-      text: 'Delete',
-      role: 'destructive',
-      icon: 'trash',
-      handler: () => {
-        console.log('Delete clicked');
-      }
-    }, {
-      text: 'Share',
-      icon: 'share',
-      handler: () => {
-        console.log('Share clicked');
-      }
-    }, {
-      text: 'Play (open modal)',
-      icon: 'arrow-dropright-circle',
-      handler: () => {
-        console.log('Play clicked');
-      }
-    }, {
-      text: 'Favorite',
-      icon: 'heart',
-      handler: () => {
-        console.log('Favorite clicked');
-      }
-    }, {
-      text: 'Cancel',
-      icon: 'close',
-      role: 'cancel',
-      handler: () => {
-        console.log('Cancel clicked');
-      }
-    }]
-  });
-  await actionSheet.present();
+  const actionSheet = document.createElement('ion-action-sheet');
+
+  actionSheet.header = "Albums";
+  actionSheet.buttons = [{
+    text: 'Delete',
+    role: 'destructive',
+    icon: 'trash',
+    handler: () => {
+      console.log('Delete clicked');
+    }
+  }, {
+    text: 'Share',
+    icon: 'share',
+    handler: () => {
+      console.log('Share clicked');
+    }
+  }, {
+    text: 'Play (open modal)',
+    icon: 'arrow-dropright-circle',
+    handler: () => {
+      console.log('Play clicked');
+    }
+  }, {
+    text: 'Favorite',
+    icon: 'heart',
+    handler: () => {
+      console.log('Favorite clicked');
+    }
+  }, {
+    text: 'Cancel',
+    icon: 'close',
+    role: 'cancel',
+    handler: () => {
+      console.log('Cancel clicked');
+    }
+  }];
+  document.body.appendChild(actionSheet);
+  return actionSheet.present();
 }
 ```
 
@@ -128,7 +128,7 @@ async function presentActionSheet() {
 import React, { useState } from 'react'
 import { IonActionSheet, IonContent, IonButton } from '@ionic/react';
 
-export const ActionSheetExample: React.FunctionComponent = () => {
+export const ActionSheetExample: React.FC = () => {
 
   const [showActionSheet, setShowActionSheet] = useState(false);
 

core/src/components/action-sheet/test/basic/index.html

@@ -13,9 +13,6 @@
 
 <body>
   <ion-app>
-    <ion-action-sheet-controller></ion-action-sheet-controller>
-    <ion-alert-controller></ion-alert-controller>
-
     <ion-header>
       <ion-toolbar>
         <ion-title>Action Sheet - Basic</ion-title>
@@ -59,8 +56,7 @@
     async function presentBasic() {
       const mode = Ionic.mode;
 
-      const actionSheetController = document.querySelector('ion-action-sheet-controller');
-      const actionSheetElement = await actionSheetController.create({
+      const actionSheetElement = Object.assign(document.createElement('ion-action-sheet'), {
         header: "Albums",
         buttons: [{
           text: 'Delete',
@@ -97,17 +93,16 @@
           }
         }]
       });
+      document.body.append(actionSheetElement);
       await actionSheetElement.present();
     }
 
     async function presentAlert() {
-      const actionSheetController = document.querySelector('ion-action-sheet-controller');
-      const actionSheetElement = await actionSheetController.create({
+      const actionSheetElement = Object.assign(document.createElement('ion-action-sheet'), {
         buttons: [{
           text: 'Open Alert',
           handler: async () => {
-            const alertController = document.querySelector('ion-alert-controller');
-            const alert = await alertController.create({
+            const alert = Object.assign(document.createElement('ion-alert'), {
               header: 'Alert from Action Sheet',
               subHeader: 'Subtitle',
               message: 'This is an alert message.',
@@ -119,6 +114,7 @@
                 }
               }]
             });
+            document.body.appendChild(alert);
             await alert.present();
             return false;
           }
@@ -130,12 +126,12 @@
           }
         }]
       });
+      document.body.append(actionSheetElement);
       await actionSheetElement.present();
     }
 
     async function presentCancelOnly() {
-      const actionSheetController = document.querySelector('ion-action-sheet-controller');
-      const actionSheetElement = await actionSheetController.create({
+      const actionSheetElement = Object.assign(document.createElement('ion-action-sheet'), {
         buttons: [
           {
             text: 'Cancel',
@@ -146,12 +142,12 @@
           }
         ]
       });
+      document.body.append(actionSheetElement);
       await actionSheetElement.present();
     }
 
     async function presentWithCssClass() {
-      const actionSheetController = document.querySelector('ion-action-sheet-controller');
-      const actionSheetElement = await actionSheetController.create({
+      const actionSheetElement = Object.assign(document.createElement('ion-action-sheet'), {
         header: "Custom Css Class",
         cssClass: "my-color-class my-custom-class",
         buttons: [
@@ -194,14 +190,14 @@
           }
         ]
       });
+      document.body.append(actionSheetElement);
       await actionSheetElement.present();
     }
 
     async function presentIcons() {
       const mode = Ionic.mode;
 
-      const actionSheetController = document.querySelector('ion-action-sheet-controller');
-      const actionSheetElement = await actionSheetController.create({
+      const actionSheetElement = Object.assign(document.createElement('ion-action-sheet'), {
         header: "Albums",
         buttons: [{
           text: 'Delete',
@@ -237,13 +233,13 @@
             console.log('Cancel clicked');
           }
         }]
-      })
+      });
+      document.body.append(actionSheetElement);
       await actionSheetElement.present();
     }
 
     async function presentNoBackdropDismiss() {
-      const actionSheetController = document.querySelector('ion-action-sheet-controller');
-      const actionSheetElement = await actionSheetController.create({
+      const actionSheetElement = Object.assign(document.createElement('ion-action-sheet'), {
         backdropDismiss: false,
         buttons: [{
           text: 'Archive',
@@ -264,12 +260,12 @@
           }
         }]
       });
+      document.body.append(actionSheetElement);
       await actionSheetElement.present();
     }
 
     async function presentScroll() {
-      const actionSheetController = document.querySelector('ion-action-sheet-controller');
-      const actionSheetElement = await actionSheetController.create({
+      const actionSheetElement = Object.assign(document.createElement('ion-action-sheet'), {
         buttons: [
           {
             text: 'Add Reaction',
@@ -357,12 +353,12 @@
           }
         ]
       });
+      document.body.append(actionSheetElement);
       await actionSheetElement.present();
     }
 
     async function presentScrollNoCancel() {
-      const actionSheetController = document.querySelector('ion-action-sheet-controller');
-      const actionSheetElement = await actionSheetController.create({
+      const actionSheetElement = Object.assign(document.createElement('ion-action-sheet'), {
         buttons: [
           {
             text: 'Add Reaction',
@@ -428,6 +424,7 @@
           }
         ]
       });
+      document.body.append(actionSheetElement);
       await actionSheetElement.present();
     }
   </script>

core/src/components/action-sheet/test/spec/index.html

@@ -21,8 +21,6 @@
     </ion-header>
 
     <ion-content class="ion-padding">
-      <ion-action-sheet-controller></ion-action-sheet-controller>
-
       <ion-button expand="block" id="spec" onclick="presentSpec()">Spec</ion-button>
     </ion-content>
 
@@ -34,8 +32,7 @@
     async function presentSpec() {
       const mode = Ionic.mode;
 
-      const actionSheetController = document.querySelector('ion-action-sheet-controller');
-      const actionSheetElement = await actionSheetController.create({
+      const actionSheetElement = Object.assign(document.createElement('ion-action-sheet'), {
         header: "Open in",
         buttons: [{
           text: 'Item 1',
@@ -69,6 +66,7 @@
           }
         }]
       });
+      document.body.appendChild(actionSheetElement);
       await actionSheetElement.present();
     }
   </script>

core/src/components/action-sheet/test/standalone/index.html

@@ -21,8 +21,6 @@
   <button id="icons" onclick="presentIcons()">Icons</button>
   <button id="cssClass" onclick="presentWithCssClass()">Custom CSS Class</button>
 
-  <ion-action-sheet-controller></ion-action-sheet-controller>
-
   <style>
     body > button {
       display: block;
@@ -39,9 +37,8 @@
 
   <script>
     window.addEventListener('ionActionSheetDidDismiss', function(e){console.log('didDismiss', e)})
-    async function presentBasic() {
-      const actionSheetController = document.querySelector('ion-action-sheet-controller');
-      const actionSheetElement = await actionSheetController.create({
+    function presentBasic() {
+      const actionSheetElement = Object.assign(document.createElement('ion-action-sheet'), {
         header: "Albums",
         buttons: [{
           text: 'Delete',
@@ -76,15 +73,15 @@
             console.log('Cancel clicked');
           }
         }]
-      })
-      await actionSheetElement.present();
+      });
+      document.body.appendChild(actionSheetElement);
+      return actionSheetElement.present();
     }
 
-    async function presentIcons() {
+    function presentIcons() {
       const mode = Ionic.mode;
 
-      const actionSheetController = document.querySelector('ion-action-sheet-controller');
-      const actionSheetElement = await actionSheetController.create({
+      const actionSheetElement = Object.assign(document.createElement('ion-action-sheet'), {
         header: "Albums",
         buttons: [{
           text: 'Delete',
@@ -119,13 +116,13 @@
             console.log('Cancel clicked');
           }
         }]
-      })
-      await actionSheetElement.present();
+      });
+      document.body.appendChild(actionSheetElement);
+      return actionSheetElement.present();
     }
 
-    async function presentNoBackdropDismiss() {
-      const actionSheetController = document.querySelector('ion-action-sheet-controller');
-      const actionSheetElement = await actionSheetController.create({
+    function presentNoBackdropDismiss() {
+      const actionSheetElement = Object.assign(document.createElement('ion-action-sheet'), {
         buttons: [{
           text: 'Archive',
           handler: () => {
@@ -145,12 +142,12 @@
           }
         }]
       });
-      await actionSheetElement.present();
+      document.body.appendChild(actionSheetElement);
+      return actionSheetElement.present();
     }
 
-    async function presentAlert() {
-      const actionSheetController = document.querySelector('ion-action-sheet-controller');
-      const actionSheetElement = await actionSheetController.create({
+    function presentAlert() {
+      const actionSheetElement = Object.assign(document.createElement('ion-action-sheet'), {
         buttons: [{
           text: 'Open Alert',
           handler: () => {
@@ -164,12 +161,12 @@
           }
         }]
       });
-      await actionSheetElement.present();
+      document.body.appendChild(actionSheetElement);
+      return actionSheetElement.present();
     }
 
-    async function presentScroll() {
-      const actionSheetController = document.querySelector('ion-action-sheet-controller');
-      const actionSheetElement = await actionSheetController.create({
+    function presentScroll() {
+      const actionSheetElement = Object.assign(document.createElement('ion-action-sheet'), {
         buttons: [
           {
             text: 'Add Reaction',
@@ -241,12 +238,12 @@
           }
         ]
       });
-      await actionSheetElement.present();
+      document.body.appendChild(actionSheetElement);
+      return actionSheetElement.present();
     }
 
-    async function presentScrollNoCancel() {
-      const actionSheetController = document.querySelector('ion-action-sheet-controller');
-      const actionSheetElement = await actionSheetController.create({
+    function presentScrollNoCancel() {
+      const actionSheetElement = Object.assign(document.createElement('ion-action-sheet'), {
         buttons: [
           {
             text: 'Add Reaction',
@@ -312,12 +309,12 @@
           }
         ]
       });
-      await actionSheetElement.present();
+      document.body.appendChild(actionSheetElement);
+      return actionSheetElement.present();
     }
 
-    async function presentCancelOnly() {
-      const actionSheetController = document.querySelector('ion-action-sheet-controller');
-      const actionSheetElement = await actionSheetController.create({
+    function presentCancelOnly() {
+      const actionSheetElement = Object.assign(document.createElement('ion-action-sheet'), {
         buttons: [
           {
             text: 'Cancel',
@@ -328,12 +325,12 @@
           }
         ]
       });
-      await actionSheetElement.present();
+      document.body.append(actionSheetElement);
+      return actionSheetElement.present();
     }
 
-    async function presentWithCssClass() {
-      const actionSheetController = document.querySelector('ion-action-sheet-controller');
-      const actionSheetElement = await actionSheetController.create({
+    function presentWithCssClass() {
+      const actionSheetElement = Object.assign(document.createElement('ion-action-sheet'), {
         header: "Custom Css Class",
         cssClass: "my-class my-custom-class",
         buttons: [
@@ -347,7 +344,8 @@
           }
         ]
       });
-      await actionSheetElement.present();
+      document.body.appendChild(actionSheetElement);
+      return actionSheetElement.present();
     }
 
   </script>

core/src/components/action-sheet/test/test.utils.ts

@@ -66,19 +66,15 @@ export const testActionSheetAlert = async (
   page: any,
   screenshotCompares: any
 ) => {
-  try {
-    const openAlertBtn = await page.find({ text: 'Open Alert' });
-    await openAlertBtn.click();
+  const openAlertBtn = await page.find({ text: 'Open Alert' });
+  await openAlertBtn.click();
 
-    const alert = await page.find('ion-alert');
-    await alert.waitForVisible();
-    await page.waitFor(250);
+  const alert = await page.find('ion-alert');
+  await alert.waitForVisible();
+  await page.waitFor(250);
 
-    screenshotCompares.push(await page.compareScreenshot(`alert open`));
+  screenshotCompares.push(await page.compareScreenshot(`alert open`));
 
-    const alertOkayBtn = await page.find({ contains: 'Okay' });
-    await alertOkayBtn.click();
-  } catch (err) {
-    throw err;
-  }
+  const alertOkayBtn = await page.find({ contains: 'Okay' });
+  await alertOkayBtn.click();
 };

core/src/components/action-sheet/test/translucent/index.html

@@ -14,37 +14,35 @@
 <body>
   <ion-app>
 
-      <ion-header>
-        <ion-toolbar>
-          <ion-title>Action Sheet - Translucent</ion-title>
-        </ion-toolbar>
-      </ion-header>
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>Action Sheet - Translucent</ion-title>
+      </ion-toolbar>
+    </ion-header>
 
-      <ion-content class="ion-padding">
-        <ion-action-sheet-controller></ion-action-sheet-controller>
-
-        <ion-button expand="block" id="basic" onclick="presentBasic()">Basic</ion-button>
-        <ion-button expand="block" id="noBackdropDismiss" onclick="presentNoBackdropDismiss()">No Backdrop Dismiss</ion-button>
-        <ion-button expand="block" id="alertFromActionSheet" onclick="presentAlert()">Alert from Action Sheet</ion-button>
-        <ion-button expand="block" id="scrollableOptions" onclick="presentScroll()">Scrollable Options</ion-button>
-        <ion-button expand="block" id="scrollWithoutCancel" onclick="presentScrollNoCancel()">Scroll Without Cancel</ion-button>
-        <ion-button expand="block" id="cancelOnly" onclick="presentCancelOnly()">Cancel Only</ion-button>
-
-        <ion-grid>
-          <ion-row>
-            <ion-col size="4"><f class="red"></f></ion-col>
-            <ion-col size="4"><f class="green"></f></ion-col>
-            <ion-col size="4"><f class="blue"></f></ion-col>
-            <ion-col size="4"><f class="yellow"></f></ion-col>
-            <ion-col size="4"><f class="pink"></f></ion-col>
-            <ion-col size="4"><f class="purple"></f></ion-col>
-            <ion-col size="4"><f class="black"></f></ion-col>
-            <ion-col size="4"><f class="fuchsia"></f></ion-col>
-            <ion-col size="4"><f class="orange"></f></ion-col>
-          </ion-row>
-        </ion-grid>
-      </ion-content>
+    <ion-content class="ion-padding">
+      <ion-button expand="block" id="basic" onclick="presentBasic()">Basic</ion-button>
+      <ion-button expand="block" id="noBackdropDismiss" onclick="presentNoBackdropDismiss()">No Backdrop Dismiss</ion-button>
+      <ion-button expand="block" id="alertFromActionSheet" onclick="presentAlert()">Alert from Action Sheet</ion-button>
+      <ion-button expand="block" id="scrollableOptions" onclick="presentScroll()">Scrollable Options</ion-button>
+      <ion-button expand="block" id="scrollWithoutCancel" onclick="presentScrollNoCancel()">Scroll Without Cancel</ion-button>
+      <ion-button expand="block" id="cancelOnly" onclick="presentCancelOnly()">Cancel Only</ion-button>
 
+      <ion-grid>
+        <ion-row>
+          <ion-col size="4"><f class="red"></f></ion-col>
+          <ion-col size="4"><f class="green"></f></ion-col>
+          <ion-col size="4"><f class="blue"></f></ion-col>
+          <ion-col size="4"><f class="yellow"></f></ion-col>
+          <ion-col size="4"><f class="pink"></f></ion-col>
+          <ion-col size="4"><f class="purple"></f></ion-col>
+          <ion-col size="4"><f class="black"></f></ion-col>
+          <ion-col size="4"><f class="fuchsia"></f></ion-col>
+          <ion-col size="4"><f class="orange"></f></ion-col>
+        </ion-row>
+      </ion-grid>
+    </ion-content>
+    <ion-action-sheet-controller></ion-action-sheet-controller>
   </ion-app>
 
   <script>

core/src/components/action-sheet/usage/javascript.md

@@ -1,43 +1,43 @@
 ```javascript
 async function presentActionSheet() {
-  const actionSheetController = document.querySelector('ion-action-sheet-controller');
 
-  const actionSheet = await actionSheetController.create({
-    header: "Albums",
-    buttons: [{
-      text: 'Delete',
-      role: 'destructive',
-      icon: 'trash',
-      handler: () => {
-        console.log('Delete clicked');
-      }
-    }, {
-      text: 'Share',
-      icon: 'share',
-      handler: () => {
-        console.log('Share clicked');
-      }
-    }, {
-      text: 'Play (open modal)',
-      icon: 'arrow-dropright-circle',
-      handler: () => {
-        console.log('Play clicked');
-      }
-    }, {
-      text: 'Favorite',
-      icon: 'heart',
-      handler: () => {
-        console.log('Favorite clicked');
-      }
-    }, {
-      text: 'Cancel',
-      icon: 'close',
-      role: 'cancel',
-      handler: () => {
-        console.log('Cancel clicked');
-      }
-    }]
-  });
-  await actionSheet.present();
+  const actionSheet = document.createElement('ion-action-sheet');
+
+  actionSheet.header = "Albums";
+  actionSheet.buttons = [{
+    text: 'Delete',
+    role: 'destructive',
+    icon: 'trash',
+    handler: () => {
+      console.log('Delete clicked');
+    }
+  }, {
+    text: 'Share',
+    icon: 'share',
+    handler: () => {
+      console.log('Share clicked');
+    }
+  }, {
+    text: 'Play (open modal)',
+    icon: 'arrow-dropright-circle',
+    handler: () => {
+      console.log('Play clicked');
+    }
+  }, {
+    text: 'Favorite',
+    icon: 'heart',
+    handler: () => {
+      console.log('Favorite clicked');
+    }
+  }, {
+    text: 'Cancel',
+    icon: 'close',
+    role: 'cancel',
+    handler: () => {
+      console.log('Cancel clicked');
+    }
+  }];
+  document.body.appendChild(actionSheet);
+  return actionSheet.present();
 }
 ```

core/src/components/action-sheet/usage/react.md

@@ -2,7 +2,7 @@
 import React, { useState } from 'react'
 import { IonActionSheet, IonContent, IonButton } from '@ionic/react';
 
-export const ActionSheetExample: React.FunctionComponent = () => {
+export const ActionSheetExample: React.FC = () => {
 
   const [showActionSheet, setShowActionSheet] = useState(false);
 

core/src/components/alert-controller/alert-controller.tsx

@@ -1,13 +1,24 @@
-import { Component, ComponentInterface, Method } from '@stencil/core';
+import { Build, Component, ComponentInterface, Method } from '@stencil/core';
 
 import { AlertOptions, OverlayController } from '../../interface';
 import { createOverlay, dismissOverlay, getOverlay } from '../../utils/overlays';
 
+/**
+ * @deprecated Use the `alertController` exported from core.
+ */
 @Component({
   tag: 'ion-alert-controller'
 })
 export class AlertController implements ComponentInterface, OverlayController {
 
+  constructor() {
+    if (Build.isDev) {
+      console.warn(`[DEPRECATED][ion-alert-controller] Use the alertController export from @ionic/core:
+  import { alertController } from '@ionic/core';
+  const alert = await alertController.create({...});`);
+    }
+  }
+
   /**
    * Create an alert overlay with alert options.
    *

core/src/components/alert-controller/readme.md

@@ -6,6 +6,8 @@ Alert controllers programmatically control the alert component. Alerts can be cr
 <!-- Auto Generated Below -->
 
 
+> **[DEPRECATED]** Use the `alertController` exported from core.
+
 ## Methods
 
 ### `create(options: AlertOptions) => Promise<HTMLIonAlertElement>`

core/src/components/alert/alert.scss

@@ -150,6 +150,17 @@
   height: 100%;
 }
 
+
+// Alert Button: Disabled
+// --------------------------------------------------
+.alert-input-disabled,
+.alert-checkbox-button-disabled .alert-button-inner,
+.alert-radio-button-disabled .alert-button-inner {
+  cursor: default;
+  opacity: .5;
+  pointer-events: none;
+}
+
 .alert-tappable {
   @include margin(0);
   @include padding(0);

core/src/components/alert/alert.tsx

@@ -2,7 +2,7 @@ import { Component, ComponentInterface, Element, Event, EventEmitter, Host, Meth
 
 import { getIonMode } from '../../global/ionic-global';
 import { AlertButton, AlertInput, Animation, AnimationBuilder, CssClassMap, OverlayEventDetail, OverlayInterface } from '../../interface';
-import { BACKDROP, dismiss, eventMethod, isCancel, present, safeCall } from '../../utils/overlays';
+import { BACKDROP, dismiss, eventMethod, isCancel, prepareOverlay, present, safeCall } from '../../utils/overlays';
 import { sanitizeDOMString } from '../../utils/sanitization';
 import { getClassMap } from '../../utils/theme';
 
@@ -163,6 +163,10 @@ export class Alert implements ComponentInterface, OverlayInterface {
     }) as AlertInput);
   }
 
+  constructor() {
+    prepareOverlay(this.el);
+  }
+
   componentWillLoad() {
     this.inputsChanged();
     this.buttonsChanged();
@@ -303,7 +307,13 @@ export class Alert implements ComponentInterface, OverlayInterface {
             disabled={i.disabled}
             tabIndex={0}
             role="checkbox"
-            class="alert-tappable alert-checkbox alert-checkbox-button ion-focusable"
+            class={{
+              'alert-tappable': true,
+              'alert-checkbox': true,
+              'alert-checkbox-button': true,
+              'ion-focusable': true,
+              'alert-checkbox-button-disabled': i.disabled || false
+            }}
           >
             <div class="alert-button-inner">
               <div class="alert-checkbox-icon">
@@ -335,7 +345,13 @@ export class Alert implements ComponentInterface, OverlayInterface {
             disabled={i.disabled}
             id={i.id}
             tabIndex={0}
-            class="alert-radio-button alert-tappable alert-radio ion-focusable"
+            class={{
+              'alert-radio-button': true,
+              'alert-tappable': true,
+              'alert-radio': true,
+              'ion-focusable': true,
+              'alert-radio-button-disabled': i.disabled || false
+            }}
             role="radio"
           >
             <div class="alert-button-inner">
@@ -369,7 +385,10 @@ export class Alert implements ComponentInterface, OverlayInterface {
               id={i.id}
               disabled={i.disabled}
               tabIndex={0}
-              class="alert-input"
+              class={{
+                'alert-input': true,
+                'alert-input-disabled': i.disabled || false
+              }}
             />
           </div>
         ))}

core/src/components/alert/animations/ios.enter.ts

@@ -1,27 +1,28 @@
-import { Animation } from '../../../interface';
+import { IonicAnimation } from '../../../interface';
+import { createAnimation } from '../../../utils/animation/animation';
 
 /**
  * iOS Alert Enter Animation
  */
-export const iosEnterAnimation = (AnimationC: Animation, baseEl: HTMLElement): Promise<Animation> => {
-  const baseAnimation = new AnimationC();
+export const iosEnterAnimation = (baseEl: HTMLElement): IonicAnimation => {
+  const baseAnimation = createAnimation();
+  const backdropAnimation = createAnimation();
+  const wrapperAnimation = createAnimation();
 
-  const backdropAnimation = new AnimationC();
-  backdropAnimation.addElement(baseEl.querySelector('ion-backdrop'));
+  backdropAnimation
+    .addElement(baseEl.querySelector('ion-backdrop')!)
+    .fromTo('opacity', 0.01, 0.3);
 
-  const wrapperAnimation = new AnimationC();
-  wrapperAnimation.addElement(baseEl.querySelector('.alert-wrapper'));
+  wrapperAnimation
+    .addElement(baseEl.querySelector('.alert-wrapper')!)
+    .keyframes([
+      { offset: 0, opacity: '0.01', transform: 'scale(1.1)' },
+      { offset: 1, opacity: '1', transform: 'scale(1)' }
+    ]);
 
-  backdropAnimation.fromTo('opacity', 0.01, 0.3);
-
-  wrapperAnimation.fromTo('opacity', 0.01, 1).fromTo('scale', 1.1, 1);
-
-  const ani = baseAnimation
+  return baseAnimation
     .addElement(baseEl)
     .easing('ease-in-out')
     .duration(200)
-    .add(backdropAnimation)
-    .add(wrapperAnimation);
-
-  return Promise.resolve(ani);
+    .addAnimation([backdropAnimation, wrapperAnimation]);
 };

core/src/components/alert/animations/ios.leave.ts

@@ -1,27 +1,28 @@
-import { Animation } from '../../../interface';
+import { IonicAnimation } from '../../../interface';
+import { createAnimation } from '../../../utils/animation/animation';
 
 /**
  * iOS Alert Leave Animation
  */
-export const iosLeaveAnimation = (AnimationC: Animation, baseEl: HTMLElement): Promise<Animation> => {
-  const baseAnimation = new AnimationC();
+export const iosLeaveAnimation = (baseEl: HTMLElement): IonicAnimation => {
+  const baseAnimation = createAnimation();
+  const backdropAnimation = createAnimation();
+  const wrapperAnimation = createAnimation();
 
-  const backdropAnimation = new AnimationC();
-  backdropAnimation.addElement(baseEl.querySelector('ion-backdrop'));
+  backdropAnimation
+    .addElement(baseEl.querySelector('ion-backdrop')!)
+    .fromTo('opacity', 0.3, 0);
 
-  const wrapperAnimation = new AnimationC();
-  wrapperAnimation.addElement(baseEl.querySelector('.alert-wrapper'));
+  wrapperAnimation
+    .addElement(baseEl.querySelector('.alert-wrapper')!)
+    .keyframes([
+      { offset: 0, opacity: 0.99, transform: 'scale(1)' },
+      { offset: 1, opacity: 0, transform: 'scale(0.9)' }
+    ]);
 
-  backdropAnimation.fromTo('opacity', 0.3, 0);
-
-  wrapperAnimation.fromTo('opacity', 0.99, 0).fromTo('scale', 1, 0.9);
-
-  const ani = baseAnimation
+  return baseAnimation
     .addElement(baseEl)
     .easing('ease-in-out')
     .duration(200)
-    .add(backdropAnimation)
-    .add(wrapperAnimation);
-
-  return Promise.resolve(ani);
+    .addAnimation([backdropAnimation, wrapperAnimation]);
 };

core/src/components/alert/animations/md.enter.ts

@@ -1,25 +1,28 @@
-import { Animation } from '../../../interface';
+import { IonicAnimation } from '../../../interface';
+import { createAnimation } from '../../../utils/animation/animation';
 
 /**
  * Md Alert Enter Animation
  */
-export const mdEnterAnimation = (AnimationC: Animation, baseEl: HTMLElement): Promise<Animation> => {
-  const baseAnimation = new AnimationC();
+export const mdEnterAnimation = (baseEl: HTMLElement): IonicAnimation => {
+  const baseAnimation = createAnimation();
+  const backdropAnimation = createAnimation();
+  const wrapperAnimation = createAnimation();
 
-  const backdropAnimation = new AnimationC();
-  backdropAnimation.addElement(baseEl.querySelector('ion-backdrop'));
+  backdropAnimation
+    .addElement(baseEl.querySelector('ion-backdrop')!)
+    .fromTo('opacity', 0.01, 0.32);
 
-  const wrapperAnimation = new AnimationC();
-  wrapperAnimation.addElement(baseEl.querySelector('.alert-wrapper'));
+  wrapperAnimation
+    .addElement(baseEl.querySelector('.alert-wrapper')!)
+    .keyframes([
+      { offset: 0, opacity: '0.01', transform: 'scale(0.9)' },
+      { offset: 1, opacity: '1', transform: 'scale(1)' }
+    ]);
 
-  backdropAnimation.fromTo('opacity', 0.01, 0.32);
-
-  wrapperAnimation.fromTo('opacity', 0.01, 1).fromTo('scale', 0.9, 1);
-
-  return Promise.resolve(baseAnimation
+  return baseAnimation
     .addElement(baseEl)
     .easing('ease-in-out')
     .duration(150)
-    .add(backdropAnimation)
-    .add(wrapperAnimation));
+    .addAnimation([backdropAnimation, wrapperAnimation]);
 };

core/src/components/alert/animations/md.leave.ts

@@ -1,25 +1,25 @@
-import { Animation } from '../../../interface';
+import { IonicAnimation } from '../../../interface';
+import { createAnimation } from '../../../utils/animation/animation';
 
 /**
  * Md Alert Leave Animation
  */
-export const mdLeaveAnimation = (AnimationC: Animation, baseEl: HTMLElement): Promise<Animation> => {
-  const baseAnimation = new AnimationC();
+export const mdLeaveAnimation = (baseEl: HTMLElement): IonicAnimation => {
+  const baseAnimation = createAnimation();
+  const backdropAnimation = createAnimation();
+  const wrapperAnimation = createAnimation();
 
-  const backdropAnimation = new AnimationC();
-  backdropAnimation.addElement(baseEl.querySelector('ion-backdrop'));
+  backdropAnimation
+    .addElement(baseEl.querySelector('ion-backdrop')!)
+    .fromTo('opacity', 0.32, 0);
 
-  const wrapperAnimation = new AnimationC();
-  wrapperAnimation.addElement(baseEl.querySelector('.alert-wrapper'));
+  wrapperAnimation
+    .addElement(baseEl.querySelector('.alert-wrapper')!)
+    .fromTo('opacity', 0.99, 0);
 
-  backdropAnimation.fromTo('opacity', 0.32, 0);
-
-  wrapperAnimation.fromTo('opacity', 0.99, 0);
-
-  return Promise.resolve(baseAnimation
+  return baseAnimation
     .addElement(baseEl)
     .easing('ease-in-out')
     .duration(150)
-    .add(backdropAnimation)
-    .add(wrapperAnimation));
+    .addAnimation([backdropAnimation, wrapperAnimation]);
 };

core/src/components/alert/readme.md

@@ -287,235 +287,228 @@ export class AlertExample {
 ### Javascript
 
 ```javascript
-async function presentAlert() {
-  const alertController = document.querySelector('ion-alert-controller');
+function presentAlert() {
+  const alert = document.createElement('ion-alert');
+  alert.header = 'Alert';
+  alert.subHeader = 'Subtitle';
+  alert.message = 'This is an alert message.';
+  alert.buttons = ['OK'];
 
-  const alert = await alertController.create({
-    header: 'Alert',
-    subHeader: 'Subtitle',
-    message: 'This is an alert message.',
-    buttons: ['OK']
-  });
-  return await alert.present();
+  document.body.appendChild(alert);
+  return alert.present();
 }
 
-async function presentAlertMultipleButtons() {
-  const alertController = document.querySelector('ion-alert-controller');
+function presentAlertMultipleButtons() {
+  const alert = document.createElement('ion-alert');
+  alert.header = 'Alert';
+  alert.subHeader = 'Subtitle';
+  alert.message = 'This is an alert message.';
+  alert.buttons = ['Cancel', 'Open Modal', 'Delete'];
 
-  const alert = await alertController.create({
-    header: 'Alert',
-    subHeader: 'Subtitle',
-    message: 'This is an alert message.',
-    buttons: ['Cancel', 'Open Modal', 'Delete']
-  });
-  return await alert.present();
+  document.body.appendChild(alert);
+  return alert.present();
 }
 
-async function presentAlertConfirm() {
-  const alertController = document.querySelector('ion-alert-controller');
-
-  const alert = await alertController.create({
-    header: 'Confirm!',
-    message: 'Message <strong>text</strong>!!!',
-    buttons: [
-      {
-        text: 'Cancel',
-        role: 'cancel',
-        cssClass: 'secondary',
-        handler: (blah) => {
-          console.log('Confirm Cancel: blah');
-        }
-      }, {
-        text: 'Okay',
-        handler: () => {
-          console.log('Confirm Okay')
-        }
+function presentAlertConfirm() {
+  const alert = document.createElement('ion-alert');
+  alert.header = 'Confirm!';
+  alert.message = 'Message <strong>text</strong>!!!';
+  alert.buttons = [
+    {
+      text: 'Cancel',
+      role: 'cancel',
+      cssClass: 'secondary',
+      handler: (blah) => {
+        console.log('Confirm Cancel: blah');
       }
-    ]
-  });
-  return await alert.present();
+    }, {
+      text: 'Okay',
+      handler: () => {
+        console.log('Confirm Okay')
+      }
+    }
+  ];
+
+  document.body.appendChild(alert);
+  return alert.present();
 }
 
-async function presentAlertPrompt() {
-  const alertController = document.querySelector('ion-alert-controller');
+function presentAlertPrompt() {
+  const alert = document.createElement('ion-alert');
+  alert.header = 'Prompt!';
+  alert.inputs = [
+    {
+      placeholder: 'Placeholder 1'
+    },
+    {
+      name: 'name2',
+      id: 'name2-id',
+      value: 'hello',
+      placeholder: 'Placeholder 2'
+    },
+    {
+      name: 'name3',
+      value: 'http://ionicframework.com',
+      type: 'url',
+      placeholder: 'Favorite site ever'
+    },
+    // input date with min & max
+    {
+      name: 'name4',
+      type: 'date',
+      min: '2017-03-01',
+      max: '2018-01-12'
+    },
+    // input date without min nor max
+    {
+      name: 'name5',
+      type: 'date'
+    },
+    {
+      name: 'name6',
+      type: 'number',
+      min: -5,
+      max: 10
+    },
+    {
+      name: 'name7',
+      type: 'number'
+    }
+  ];
+  alert.buttons = [
+    {
+      text: 'Cancel',
+      role: 'cancel',
+      cssClass: 'secondary',
+      handler: () => {
+        console.log('Confirm Cancel')
+      }
+    }, {
+      text: 'Ok',
+      handler: () => {
+        console.log('Confirm Ok')
+      }
+    }
+  ];
 
-  const alert = await alertController.create({
-    header: 'Prompt!',
-    inputs: [
-      {
-        placeholder: 'Placeholder 1'
-      },
-      {
-        name: 'name2',
-        id: 'name2-id',
-        value: 'hello',
-        placeholder: 'Placeholder 2'
-      },
-      {
-        name: 'name3',
-        value: 'http://ionicframework.com',
-        type: 'url',
-        placeholder: 'Favorite site ever'
-      },
-      // input date with min & max
-      {
-        name: 'name4',
-        type: 'date',
-        min: '2017-03-01',
-        max: '2018-01-12'
-      },
-      // input date without min nor max
-      {
-        name: 'name5',
-        type: 'date'
-      },
-      {
-        name: 'name6',
-        type: 'number',
-        min: -5,
-        max: 10
-      },
-      {
-        name: 'name7',
-        type: 'number'
-      }
-    ],
-    buttons: [
-      {
-        text: 'Cancel',
-        role: 'cancel',
-        cssClass: 'secondary',
-        handler: () => {
-          console.log('Confirm Cancel')
-        }
-      }, {
-        text: 'Ok',
-        handler: () => {
-          console.log('Confirm Ok')
-        }
-      }
-    ]
-  });
-  return await alert.present();
+  document.body.appendChild(alert);
+  return alert.present();
 }
 
-async function presentAlertRadio() {
-  const alertController = document.querySelector('ion-alert-controller');
-
-  const alert = await alertController.create({
-    header: 'Radio',
-    inputs: [
-      {
-        type: 'radio',
-        label: 'Radio 1',
-        value: 'value1',
-        checked: true
-      },
-      {
-        type: 'radio',
-        label: 'Radio 2',
-        value: 'value2'
-      },
-      {
-        type: 'radio',
-        label: 'Radio 3',
-        value: 'value3'
-      },
-      {
-        type: 'radio',
-        label: 'Radio 4',
-        value: 'value4'
-      },
-      {
-        type: 'radio',
-        label: 'Radio 5',
-        value: 'value5'
-      },
-      {
-        type: 'radio',
-        label: 'Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 ',
-        value: 'value6'
+function presentAlertRadio() {
+  const alert = document.createElement('ion-alert');
+  alert.header = 'Radio';
+  alert.inputs = [
+    {
+      type: 'radio',
+      label: 'Radio 1',
+      value: 'value1',
+      checked: true
+    },
+    {
+      type: 'radio',
+      label: 'Radio 2',
+      value: 'value2'
+    },
+    {
+      type: 'radio',
+      label: 'Radio 3',
+      value: 'value3'
+    },
+    {
+      type: 'radio',
+      label: 'Radio 4',
+      value: 'value4'
+    },
+    {
+      type: 'radio',
+      label: 'Radio 5',
+      value: 'value5'
+    },
+    {
+      type: 'radio',
+      label: 'Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 ',
+      value: 'value6'
+    }
+  ];
+  alert.buttons = [
+    {
+      text: 'Cancel',
+      role: 'cancel',
+      cssClass: 'secondary',
+      handler: () => {
+        console.log('Confirm Cancel')
       }
-    ],
-    buttons: [
-      {
-        text: 'Cancel',
-        role: 'cancel',
-        cssClass: 'secondary',
-        handler: () => {
-          console.log('Confirm Cancel')
-        }
-      }, {
-        text: 'Ok',
-        handler: () => {
-          console.log('Confirm Ok')
-        }
+    }, {
+      text: 'Ok',
+      handler: () => {
+        console.log('Confirm Ok')
       }
-    ]
-  });
-  return await alert.present();
+    }
+  ];
+  document.body.appendChild(alert);
+  return alert.present();
 }
 
-async function presentAlertCheckbox() {
-  const alertController = document.querySelector('ion-alert-controller');
+function presentAlertCheckbox() {
+  const alert = document.createElement('ion-alert');
+  alert.header = 'Checkbox';
+  alert.inputs = [
+    {
+      type: 'checkbox',
+      label: 'Checkbox 1',
+      value: 'value1',
+      checked: true
+    },
 
-  const alert = await alertController.create({
-    header: 'Checkbox',
-    inputs: [
-      {
-        type: 'checkbox',
-        label: 'Checkbox 1',
-        value: 'value1',
-        checked: true
-      },
+    {
+      type: 'checkbox',
+      label: 'Checkbox 2',
+      value: 'value2'
+    },
 
-      {
-        type: 'checkbox',
-        label: 'Checkbox 2',
-        value: 'value2'
-      },
+    {
+      type: 'checkbox',
+      label: 'Checkbox 3',
+      value: 'value3'
+    },
 
-      {
-        type: 'checkbox',
-        label: 'Checkbox 3',
-        value: 'value3'
-      },
+    {
+      type: 'checkbox',
+      label: 'Checkbox 4',
+      value: 'value4'
+    },
 
-      {
-        type: 'checkbox',
-        label: 'Checkbox 4',
-        value: 'value4'
-      },
+    {
+      type: 'checkbox',
+      label: 'Checkbox 5',
+      value: 'value5'
+    },
 
-      {
-        type: 'checkbox',
-        label: 'Checkbox 5',
-        value: 'value5'
-      },
-
-      {
-        type: 'checkbox',
-        label: 'Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6',
-        value: 'value6'
+    {
+      type: 'checkbox',
+      label: 'Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6',
+      value: 'value6'
+    }
+  ];
+  alert.buttons = [
+    {
+      text: 'Cancel',
+      role: 'cancel',
+      cssClass: 'secondary',
+      handler: () => {
+        console.log('Confirm Cancel')
       }
-    ],
-    buttons: [
-      {
-        text: 'Cancel',
-        role: 'cancel',
-        cssClass: 'secondary',
-        handler: () => {
-          console.log('Confirm Cancel')
-        }
-      }, {
-        text: 'Ok',
-        handler: () => {
-          console.log('Confirm Ok')
-        }
+    }, {
+      text: 'Ok',
+      handler: () => {
+        console.log('Confirm Ok')
       }
-    ]
-  });
-  return await alert.present();
+    }
+  ];
+
+  document.body.appendChild(alert);
+  return alert.present();
 }
 ```
 
@@ -526,7 +519,7 @@ async function presentAlertCheckbox() {
 import React, { useState } from 'react';
 import { IonAlert, IonButton, IonContent } from '@ionic/react';
 
-export const AlertExample: React.FunctionComponent = () => {
+export const AlertExample: React.FC = () => {
 
   const [showAlert1, setShowAlert1] = useState(false);
   const [showAlert2, setShowAlert2] = useState(false);

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

@@ -21,8 +21,6 @@
     </ion-header>
 
     <ion-content class="ion-padding">
-      <ion-alert-controller></ion-alert-controller>
-
       <ion-button id="basic" expand="block" onclick="presentAlert()">Alert</ion-button>
       <ion-button id="longMessage" expand="block" onclick="presentAlertLongMessage()">Alert Long Message</ion-button>
       <ion-button id="multipleButtons" expand="block" onclick="presentAlertMultipleButtons()">Multiple Buttons (>2)</ion-button>
@@ -48,50 +46,49 @@
     window.addEventListener('ionAlertDidDismiss', function (e) { console.log('didDismiss', e) })
     window.addEventListener('ionAlertWillDismiss', function (e) { console.log('willDismiss', e) })
 
-    async function presentAlert() {
-      const alertController = document.querySelector('ion-alert-controller');
-      const alert = await alertController.create({
+    function presentAlert() {
+      const alert = Object.assign(document.createElement('ion-alert'), {
         header: 'Alert',
         subHeader: 'Subtitle',
         message: 'This is an alert message.',
         buttons: ['OK']
       });
-      return await alert.present();
+      document.body.append(alert);
+      return alert.present();
     }
 
-    async function presentAlertLongMessage() {
-      const alertController = document.querySelector('ion-alert-controller');
-      const alert = await alertController.create({
+    function presentAlertLongMessage() {
+      const alert = Object.assign(document.createElement('ion-alert'), {
         header: 'Alert',
         message: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum hendrerit diam lorem, a faucibus turpis sagittis eu. In finibus augue in dui varius convallis. Donec vulputate nibh gravida odio vulputate commodo. Suspendisse imperdiet consequat egestas. Nulla feugiat consequat urna eu tincidunt. Cras nec blandit turpis, eu auctor nunc. Pellentesque finibus, magna eu vestibulum imperdiet, arcu ex lacinia massa, eget volutpat quam leo a orci. Etiam mauris est, elementum at feugiat at, dictum in sapien. Mauris efficitur eros sodales convallis egestas. Phasellus eu faucibus nisl. In eu diam vitae libero egestas lacinia. Integer sed convallis metus, nec commodo felis. Duis libero augue, ornare at tempus non, posuere vel augue. Cras mattis dui at tristique aliquam. Phasellus fermentum nibh ligula, porta hendrerit ligula elementum eu. Suspendisse sollicitudin enim at libero iaculis pulvinar. Donec ac massa id purus laoreet rutrum quis eu urna. Mauris luctus erat vel magna porttitor, vel varius erat rhoncus. Donec eu turpis vestibulum, feugiat urna id, gravida mauris. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer at lobortis tortor. Nam ultrices volutpat elit, sed pharetra nulla suscipit at. Nunc eu accumsan eros, id auctor libero. Suspendisse potenti. Nam vitae dapibus metus. Maecenas nisi dui, sagittis et condimentum eu, bibendum vel eros. Vivamus malesuada, tortor in accumsan iaculis, urna velit consectetur ante, nec semper sem diam a diam. In et semper ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus blandit, velit vel porttitor euismod, neque risus blandit nulla, non laoreet libero dolor et odio. Nulla enim risus, feugiat eu urna sed, ultrices semper felis. Sed blandit mi diam. Nunc quis mi ligula. Pellentesque a elit eu orci volutpat egestas. Aenean fermentum eleifend quam, ut tincidunt eros tristique et. Nam dapibus tincidunt ligula, id faucibus felis sodales quis. Donec tincidunt lectus ipsum, ac semper tellus cursus ac. Vestibulum nec dui a lectus accumsan vestibulum quis et velit. Aliquam finibus justo et odio euismod, viverra condimentum eros tristique. Sed eget luctus risus. Pellentesque lorem magna, dictum non congue sodales, laoreet eget quam. In sagittis vulputate dolor a ultricies. Donec viverra leo sed ex maximus, in finibus elit gravida. Aliquam posuere vulputate mi. Suspendisse potenti. Nunc consectetur congue arcu, at pharetra dui varius non. Etiam vestibulum congue felis, id ullamcorper neque convallis ultrices. Aenean congue, diam a iaculis mollis, nisl eros maximus arcu, nec hendrerit purus felis porta diam. Nullam vitae ultrices dui, ac dictum sapien. Phasellus eu magna luctus, varius urna id, molestie quam. Nulla in semper tellus. Curabitur lacinia tellus sit amet lacinia dapibus. Sed id condimentum tellus, nec aliquam sapien. Vivamus luctus at ante a tincidunt.',
         buttons: ['Cancel', 'OK']
       });
-      return await alert.present();
+      document.body.append(alert);
+      return alert.present();
     }
 
-    async function presentAlertMultipleButtons() {
-      const alertController = document.querySelector('ion-alert-controller');
-      const alert = await alertController.create({
+    function presentAlertMultipleButtons() {
+      const alert = Object.assign(document.createElement('ion-alert'), {
         header: 'Alert',
         subHeader: 'Subtitle',
         message: 'This is an alert message.',
         buttons: ['Cancel', 'Open Modal', 'Delete']
       });
-      return await alert.present();
+      document.body.append(alert);
+      return alert.present();
     }
 
-    async function presentAlertNoMessage() {
-      const alertController = document.querySelector('ion-alert-controller');
-      const alert = await alertController.create({
+    function presentAlertNoMessage() {
+      const alert = Object.assign(document.createElement('ion-alert'), {
         header: 'Alert',
         buttons: ['OK']
       });
-      return await alert.present();
+      document.body.append(alert);
+      return alert.present();
     }
 
-    async function presentAlertConfirm() {
-      const alertController = document.querySelector('ion-alert-controller');
-      const alert = await alertController.create({
+    function presentAlertConfirm() {
+      const alert = Object.assign(document.createElement('ion-alert'), {
         header: 'Confirm!',
         message: 'Message <strong>text</strong>!!!',
         buttons: [
@@ -110,12 +107,12 @@
           }
         ]
       });
-      return await alert.present();
+      document.body.append(alert);
+      return alert.present();
     }
 
-    async function presentAlertPrompt() {
-      const alertController = document.querySelector('ion-alert-controller');
-      const alert = await alertController.create({
+    function presentAlertPrompt() {
+      const alert = Object.assign(document.createElement('ion-alert'), {
         header: 'Prompt!',
         inputs: [
           {
@@ -129,6 +126,11 @@
             value: 'hello',
             placeholder: 'Placeholder 2'
           },
+          {
+            type: 'text',
+            placeholder: 'Placeholder 3',
+            disabled: true
+          },
           {
             name: 'name3',
             type: 'text',
@@ -175,12 +177,12 @@
           }
         ]
       });
-      return await alert.present();
+      document.body.append(alert);
+      return alert.present();
     }
 
-    async function presentAlertRadio() {
-      const alertController = document.querySelector('ion-alert-controller');
-      const alert = await alertController.create({
+    function presentAlertRadio() {
+      const alert = Object.assign(document.createElement('ion-alert'), {
         header: 'Radio',
         inputs: [
           {
@@ -207,7 +209,8 @@
           {
             type: 'radio',
             label: 'Radio 5',
-            value: 'value5'
+            value: 'value5',
+            disabled: true
           },
           {
             type: 'radio',
@@ -231,12 +234,12 @@
           }
         ]
       });
-      return await alert.present();
+      document.body.append(alert);
+      return alert.present();
     }
 
-    async function presentAlertCheckbox() {
-      const alertController = document.querySelector('ion-alert-controller');
-      const alert = await alertController.create({
+    function presentAlertCheckbox() {
+      const alert = Object.assign(document.createElement('ion-alert'), {
         header: 'Checkbox',
         inputs: [
           {
@@ -267,7 +270,8 @@
           {
             type: 'checkbox',
             label: 'Checkbox 5',
-            value: 'value5'
+            value: 'value5',
+            disabled: true
           },
 
           {
@@ -292,12 +296,12 @@
           }
         ]
       });
-      return await alert.present();
+      document.body.append(alert);
+      return alert.present();
     }
 
-    async function presentWithCssClass() {
-      const alertController = document.querySelector('ion-alert-controller');
-      const alert = await alertController.create({
+    function presentWithCssClass() {
+      const alert = Object.assign(document.createElement('ion-alert'), {
         header: 'Alert',
         subHeader: 'Subtitle',
         cssClass: 'my-class my-custom-class   ',
@@ -310,7 +314,8 @@
           }
         }]
       });
-      return await alert.present();
+      document.body.append(alert);
+      return alert.present();
     }
 
   </script>

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

@@ -34,23 +34,22 @@
   <div class="f"></div>
 
   <dialog id="favDialog">
-      <form method="dialog">
-        <section>
-          <p><label for="favAnimal">Favorite animal:</label>
-          <select id="favAnimal">
-            <option></option>
-            <option>Brine shrimp</option>
-            <option>Red panda</option>
-            <option>Spider monkey</option>
-          </select></p>
-        </section>
-        <menu>
-          <button id="cancel" type="reset">Cancel</button>
-          <button type="submit">Confirm</button>
-        </menu>
-      </form>
-    </dialog>
-  <ion-alert-controller></ion-alert-controller>
+    <form method="dialog">
+      <section>
+        <p><label for="favAnimal">Favorite animal:</label>
+        <select id="favAnimal">
+          <option></option>
+          <option>Brine shrimp</option>
+          <option>Red panda</option>
+          <option>Spider monkey</option>
+        </select></p>
+      </section>
+      <menu>
+        <button id="cancel" type="reset">Cancel</button>
+        <button type="submit">Confirm</button>
+      </menu>
+    </form>
+  </dialog>
 
   <style>
     .f {
@@ -77,50 +76,49 @@
     window.addEventListener('ionAlertDidDismiss', function(e){console.log('didDismiss', e)})
     window.addEventListener('ionAlertWillDismiss', function(e){console.log('willDismiss', e)})
 
-    async function presentAlert() {
-      const alertController = document.querySelector('ion-alert-controller');
-      const alert = await alertController.create({
+    function presentAlert() {
+      const alert = Object.assign(document.createElement('ion-alert'), {
         header: 'Alert',
         subHeader: 'Subtitle',
         message: 'This is an alert message.',
         buttons: ['OK']
       });
-      return await alert.present();
+      document.body.appendChild(alert);
+      return alert.present();
     }
 
-    async function presentAlertLongMessage() {
-      const alertController = document.querySelector('ion-alert-controller');
-      const alert = await alertController.create({
+    function presentAlertLongMessage() {
+      const alert = Object.assign(document.createElement('ion-alert'), {
         header: 'Alert',
         message: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum hendrerit diam lorem, a faucibus turpis sagittis eu. In finibus augue in dui varius convallis. Donec vulputate nibh gravida odio vulputate commodo. Suspendisse imperdiet consequat egestas. Nulla feugiat consequat urna eu tincidunt. Cras nec blandit turpis, eu auctor nunc. Pellentesque finibus, magna eu vestibulum imperdiet, arcu ex lacinia massa, eget volutpat quam leo a orci. Etiam mauris est, elementum at feugiat at, dictum in sapien. Mauris efficitur eros sodales convallis egestas. Phasellus eu faucibus nisl. In eu diam vitae libero egestas lacinia. Integer sed convallis metus, nec commodo felis. Duis libero augue, ornare at tempus non, posuere vel augue. Cras mattis dui at tristique aliquam. Phasellus fermentum nibh ligula, porta hendrerit ligula elementum eu. Suspendisse sollicitudin enim at libero iaculis pulvinar. Donec ac massa id purus laoreet rutrum quis eu urna. Mauris luctus erat vel magna porttitor, vel varius erat rhoncus. Donec eu turpis vestibulum, feugiat urna id, gravida mauris. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer at lobortis tortor. Nam ultrices volutpat elit, sed pharetra nulla suscipit at. Nunc eu accumsan eros, id auctor libero. Suspendisse potenti. Nam vitae dapibus metus. Maecenas nisi dui, sagittis et condimentum eu, bibendum vel eros. Vivamus malesuada, tortor in accumsan iaculis, urna velit consectetur ante, nec semper sem diam a diam. In et semper ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus blandit, velit vel porttitor euismod, neque risus blandit nulla, non laoreet libero dolor et odio. Nulla enim risus, feugiat eu urna sed, ultrices semper felis. Sed blandit mi diam. Nunc quis mi ligula. Pellentesque a elit eu orci volutpat egestas. Aenean fermentum eleifend quam, ut tincidunt eros tristique et. Nam dapibus tincidunt ligula, id faucibus felis sodales quis. Donec tincidunt lectus ipsum, ac semper tellus cursus ac. Vestibulum nec dui a lectus accumsan vestibulum quis et velit. Aliquam finibus justo et odio euismod, viverra condimentum eros tristique. Sed eget luctus risus. Pellentesque lorem magna, dictum non congue sodales, laoreet eget quam. In sagittis vulputate dolor a ultricies. Donec viverra leo sed ex maximus, in finibus elit gravida. Aliquam posuere vulputate mi. Suspendisse potenti. Nunc consectetur congue arcu, at pharetra dui varius non. Etiam vestibulum congue felis, id ullamcorper neque convallis ultrices. Aenean congue, diam a iaculis mollis, nisl eros maximus arcu, nec hendrerit purus felis porta diam. Nullam vitae ultrices dui, ac dictum sapien. Phasellus eu magna luctus, varius urna id, molestie quam. Nulla in semper tellus. Curabitur lacinia tellus sit amet lacinia dapibus. Sed id condimentum tellus, nec aliquam sapien. Vivamus luctus at ante a tincidunt.',
         buttons: ['Cancel', 'OK']
       });
-      return await alert.present();
+      document.body.appendChild(alert);
+      return alert.present();
     }
 
-    async function presentAlertMultipleButtons() {
-      const alertController = document.querySelector('ion-alert-controller');
-      const alert = await alertController.create({
+    function presentAlertMultipleButtons() {
+      const alert = Object.assign(document.createElement('ion-alert'), {
         header: 'Alert',
         subHeader: 'Subtitle',
         message: 'This is an alert message.',
         buttons: ['Cancel', 'Open Modal', 'Delete']
       });
-      return await alert.present();
+      document.body.appendChild(alert);
+      return alert.present();
     }
 
-    async function presentAlertNoMessage() {
-      const alertController = document.querySelector('ion-alert-controller');
-      const alert = await alertController.create({
+    function presentAlertNoMessage() {
+      const alert = Object.assign(document.createElement('ion-alert'), {
         header: 'Alert',
         buttons: ['OK']
       });
-      return await alert.present();
+      document.body.appendChild(alert);
+      return alert.present();
     }
 
-    async function presentAlertConfirm() {
-      const alertController = document.querySelector('ion-alert-controller');
-      const alert = await alertController.create({
+    function presentAlertConfirm() {
+      const alert = Object.assign(document.createElement('ion-alert'), {
         header: 'Confirm!',
         message: 'Message <strong>text</strong>!!!',
         buttons: [
@@ -139,12 +137,12 @@
           }
         ]
       });
-      return await alert.present();
+      document.body.appendChild(alert);
+      return alert.present();
     }
 
-    async function presentAlertPrompt() {
-      const alertController = document.querySelector('ion-alert-controller');
-      const alert = await alertController.create({
+    function presentAlertPrompt() {
+      const alert = Object.assign(document.createElement('ion-alert'), {
         header: 'Prompt!',
         inputs: [
           {
@@ -201,12 +199,12 @@
           }
         ]
       });
-      return await alert.present();
+      document.body.appendChild(alert);
+      return alert.present();
     }
 
-    async function presentAlertRadio() {
-      const alertController = document.querySelector('ion-alert-controller');
-      const alert = await alertController.create({
+    function presentAlertRadio() {
+      const alert = Object.assign(document.createElement('ion-alert'), {
         header: 'Radio',
         inputs: [
           {
@@ -257,12 +255,12 @@
           }
         ]
       });
-      return await alert.present();
+      document.body.appendChild(alert);
+      return alert.present();
     }
 
-    async function presentAlertCheckbox() {
-      const alertController = document.querySelector('ion-alert-controller');
-      const alert = await alertController.create({
+    function presentAlertCheckbox() {
+      const alert = Object.assign(document.createElement('ion-alert'), {
         header: 'Checkbox',
         inputs: [
           {
@@ -318,12 +316,12 @@
           }
         ]
       });
-      return await alert.present();
+      document.body.appendChild(alert);
+      return alert.present();
     }
 
-    async function presentWithCssClass() {
-      const alertController = document.querySelector('ion-alert-controller');
-      const alert = await alertController.create({
+    function presentWithCssClass() {
+      const alert = Object.assign(document.createElement('ion-alert'), {
         header: 'Alert',
         subHeader: 'Subtitle',
         cssClass: 'my-class my-customClass   ',
@@ -336,7 +334,8 @@
             }
           }]
       });
-      return await alert.present();
+      document.body.appendChild(alert);
+      return alert.present();
     }
 
 </script>

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

@@ -21,7 +21,6 @@
       </ion-header>
 
       <ion-content class="ion-padding">
-        <ion-alert-controller></ion-alert-controller>
 
         <ion-button expand="block" onclick="presentAlert()">Alert</ion-button>
         <ion-button expand="block" color="secondary" onclick="presentAlertLongMessage()">Alert Long Message</ion-button>
@@ -51,56 +50,53 @@
   </ion-app>
 
   <script>
-
-
-    async function presentAlert() {
-      const alertController = document.querySelector('ion-alert-controller');
-      const alert = await alertController.create({
+    function presentAlert() {
+      const alert = Object.assign(document.createElement('ion-alert'), {
         header: 'Alert',
         subHeader: 'Subtitle',
         message: 'This is an alert message.',
         buttons: ['OK'],
         translucent: true
       });
-      return await alert.present();
+      document.body.appendChild(alert);
+      return alert.present();
     }
 
-    async function presentAlertLongMessage() {
-      const alertController = document.querySelector('ion-alert-controller');
-      const alert = await alertController.create({
+    function presentAlertLongMessage() {
+      const alert = Object.assign(document.createElement('ion-alert'), {
         header: 'Alert',
         message: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum hendrerit diam lorem, a faucibus turpis sagittis eu. In finibus augue in dui varius convallis. Donec vulputate nibh gravida odio vulputate commodo. Suspendisse imperdiet consequat egestas. Nulla feugiat consequat urna eu tincidunt. Cras nec blandit turpis, eu auctor nunc. Pellentesque finibus, magna eu vestibulum imperdiet, arcu ex lacinia massa, eget volutpat quam leo a orci. Etiam mauris est, elementum at feugiat at, dictum in sapien. Mauris efficitur eros sodales convallis egestas. Phasellus eu faucibus nisl. In eu diam vitae libero egestas lacinia. Integer sed convallis metus, nec commodo felis. Duis libero augue, ornare at tempus non, posuere vel augue. Cras mattis dui at tristique aliquam. Phasellus fermentum nibh ligula, porta hendrerit ligula elementum eu. Suspendisse sollicitudin enim at libero iaculis pulvinar. Donec ac massa id purus laoreet rutrum quis eu urna. Mauris luctus erat vel magna porttitor, vel varius erat rhoncus. Donec eu turpis vestibulum, feugiat urna id, gravida mauris. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer at lobortis tortor. Nam ultrices volutpat elit, sed pharetra nulla suscipit at. Nunc eu accumsan eros, id auctor libero. Suspendisse potenti. Nam vitae dapibus metus. Maecenas nisi dui, sagittis et condimentum eu, bibendum vel eros. Vivamus malesuada, tortor in accumsan iaculis, urna velit consectetur ante, nec semper sem diam a diam. In et semper ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus blandit, velit vel porttitor euismod, neque risus blandit nulla, non laoreet libero dolor et odio. Nulla enim risus, feugiat eu urna sed, ultrices semper felis. Sed blandit mi diam. Nunc quis mi ligula. Pellentesque a elit eu orci volutpat egestas. Aenean fermentum eleifend quam, ut tincidunt eros tristique et. Nam dapibus tincidunt ligula, id faucibus felis sodales quis. Donec tincidunt lectus ipsum, ac semper tellus cursus ac. Vestibulum nec dui a lectus accumsan vestibulum quis et velit. Aliquam finibus justo et odio euismod, viverra condimentum eros tristique. Sed eget luctus risus. Pellentesque lorem magna, dictum non congue sodales, laoreet eget quam. In sagittis vulputate dolor a ultricies. Donec viverra leo sed ex maximus, in finibus elit gravida. Aliquam posuere vulputate mi. Suspendisse potenti. Nunc consectetur congue arcu, at pharetra dui varius non. Etiam vestibulum congue felis, id ullamcorper neque convallis ultrices. Aenean congue, diam a iaculis mollis, nisl eros maximus arcu, nec hendrerit purus felis porta diam. Nullam vitae ultrices dui, ac dictum sapien. Phasellus eu magna luctus, varius urna id, molestie quam. Nulla in semper tellus. Curabitur lacinia tellus sit amet lacinia dapibus. Sed id condimentum tellus, nec aliquam sapien. Vivamus luctus at ante a tincidunt.',
         buttons: ['Cancel', 'OK'],
         translucent: true
       });
-      return await alert.present();
+      document.body.appendChild(alert);
+      return alert.present();
     }
 
-    async function presentAlertMultipleButtons() {
-      const alertController = document.querySelector('ion-alert-controller');
-      const alert = await alertController.create({
+    function presentAlertMultipleButtons() {
+      const alert = Object.assign(document.createElement('ion-alert'), {
         header: 'Alert',
         subHeader: 'Subtitle',
         message: 'This is an alert message.',
         buttons: ['Cancel', 'Open Modal', 'Delete'],
         translucent: true
       });
-      return await alert.present();
+      document.body.appendChild(alert);
+      return alert.present();
     }
 
-    async function presentAlertNoMessage() {
-      const alertController = document.querySelector('ion-alert-controller');
-      const alert = await alertController.create({
+    function presentAlertNoMessage() {
+      const alert = Object.assign(document.createElement('ion-alert'), {
         header: 'Alert',
         buttons: ['OK'],
         translucent: true
       });
-      return await alert.present();
+      document.body.appendChild(alert);
+      return alert.present();
     }
 
-    async function presentAlertConfirm() {
-      const alertController = document.querySelector('ion-alert-controller');
-      const alert = await alertController.create({
+    function presentAlertConfirm() {
+      const alert = Object.assign(document.createElement('ion-alert'), {
         header: 'Confirm!',
         message: 'Message <strong>text</strong>!!!',
         buttons: [
@@ -120,12 +116,12 @@
         ],
         translucent: true
       });
-      return await alert.present();
+      document.body.appendChild(alert);
+      return alert.present();
     }
 
-    async function presentAlertPrompt() {
-      const alertController = document.querySelector('ion-alert-controller');
-      const alert = await alertController.create({
+    function presentAlertPrompt() {
+      const alert = Object.assign(document.createElement('ion-alert'), {
         header: 'Prompt!',
         inputs: [
           {
@@ -183,12 +179,12 @@
         ],
         translucent: true
       });
-      return await alert.present();
+      document.body.appendChild(alert);
+      return alert.present();
     }
 
-    async function presentAlertRadio() {
-      const alertController = document.querySelector('ion-alert-controller');
-      const alert = await alertController.create({
+    function presentAlertRadio() {
+      const alert = Object.assign(document.createElement('ion-alert'), {
         header: 'Radio',
         inputs: [
           {
@@ -240,13 +236,12 @@
         ],
         translucent: true
       });
-      return await alert.present();
+      document.body.appendChild(alert);
+      return alert.present();
     }
 
-    async function presentAlertCheckbox() {
-
-      const alertController = document.querySelector('ion-alert-controller');
-      const alert = await alertController.create({
+    function presentAlertCheckbox() {
+      const alert = Object.assign(document.createElement('ion-alert'), {
         header: 'Checkbox',
         inputs: [
           {
@@ -303,7 +298,8 @@
         ],
         translucent: true
       });
-      return await alert.present();
+      document.body.appendChild(alert);
+      return alert.present();
     }
 
   </script>

core/src/components/alert/usage/javascript.md

@@ -1,232 +1,225 @@
 ```javascript
-async function presentAlert() {
-  const alertController = document.querySelector('ion-alert-controller');
+function presentAlert() {
+  const alert = document.createElement('ion-alert');
+  alert.header = 'Alert';
+  alert.subHeader = 'Subtitle';
+  alert.message = 'This is an alert message.';
+  alert.buttons = ['OK'];
 
-  const alert = await alertController.create({
-    header: 'Alert',
-    subHeader: 'Subtitle',
-    message: 'This is an alert message.',
-    buttons: ['OK']
-  });
-  return await alert.present();
+  document.body.appendChild(alert);
+  return alert.present();
 }
 
-async function presentAlertMultipleButtons() {
-  const alertController = document.querySelector('ion-alert-controller');
+function presentAlertMultipleButtons() {
+  const alert = document.createElement('ion-alert');
+  alert.header = 'Alert';
+  alert.subHeader = 'Subtitle';
+  alert.message = 'This is an alert message.';
+  alert.buttons = ['Cancel', 'Open Modal', 'Delete'];
 
-  const alert = await alertController.create({
-    header: 'Alert',
-    subHeader: 'Subtitle',
-    message: 'This is an alert message.',
-    buttons: ['Cancel', 'Open Modal', 'Delete']
-  });
-  return await alert.present();
+  document.body.appendChild(alert);
+  return alert.present();
 }
 
-async function presentAlertConfirm() {
-  const alertController = document.querySelector('ion-alert-controller');
-
-  const alert = await alertController.create({
-    header: 'Confirm!',
-    message: 'Message <strong>text</strong>!!!',
-    buttons: [
-      {
-        text: 'Cancel',
-        role: 'cancel',
-        cssClass: 'secondary',
-        handler: (blah) => {
-          console.log('Confirm Cancel: blah');
-        }
-      }, {
-        text: 'Okay',
-        handler: () => {
-          console.log('Confirm Okay')
-        }
+function presentAlertConfirm() {
+  const alert = document.createElement('ion-alert');
+  alert.header = 'Confirm!';
+  alert.message = 'Message <strong>text</strong>!!!';
+  alert.buttons = [
+    {
+      text: 'Cancel',
+      role: 'cancel',
+      cssClass: 'secondary',
+      handler: (blah) => {
+        console.log('Confirm Cancel: blah');
       }
-    ]
-  });
-  return await alert.present();
+    }, {
+      text: 'Okay',
+      handler: () => {
+        console.log('Confirm Okay')
+      }
+    }
+  ];
+
+  document.body.appendChild(alert);
+  return alert.present();
 }
 
-async function presentAlertPrompt() {
-  const alertController = document.querySelector('ion-alert-controller');
+function presentAlertPrompt() {
+  const alert = document.createElement('ion-alert');
+  alert.header = 'Prompt!';
+  alert.inputs = [
+    {
+      placeholder: 'Placeholder 1'
+    },
+    {
+      name: 'name2',
+      id: 'name2-id',
+      value: 'hello',
+      placeholder: 'Placeholder 2'
+    },
+    {
+      name: 'name3',
+      value: 'http://ionicframework.com',
+      type: 'url',
+      placeholder: 'Favorite site ever'
+    },
+    // input date with min & max
+    {
+      name: 'name4',
+      type: 'date',
+      min: '2017-03-01',
+      max: '2018-01-12'
+    },
+    // input date without min nor max
+    {
+      name: 'name5',
+      type: 'date'
+    },
+    {
+      name: 'name6',
+      type: 'number',
+      min: -5,
+      max: 10
+    },
+    {
+      name: 'name7',
+      type: 'number'
+    }
+  ];
+  alert.buttons = [
+    {
+      text: 'Cancel',
+      role: 'cancel',
+      cssClass: 'secondary',
+      handler: () => {
+        console.log('Confirm Cancel')
+      }
+    }, {
+      text: 'Ok',
+      handler: () => {
+        console.log('Confirm Ok')
+      }
+    }
+  ];
 
-  const alert = await alertController.create({
-    header: 'Prompt!',
-    inputs: [
-      {
-        placeholder: 'Placeholder 1'
-      },
-      {
-        name: 'name2',
-        id: 'name2-id',
-        value: 'hello',
-        placeholder: 'Placeholder 2'
-      },
-      {
-        name: 'name3',
-        value: 'http://ionicframework.com',
-        type: 'url',
-        placeholder: 'Favorite site ever'
-      },
-      // input date with min & max
-      {
-        name: 'name4',
-        type: 'date',
-        min: '2017-03-01',
-        max: '2018-01-12'
-      },
-      // input date without min nor max
-      {
-        name: 'name5',
-        type: 'date'
-      },
-      {
-        name: 'name6',
-        type: 'number',
-        min: -5,
-        max: 10
-      },
-      {
-        name: 'name7',
-        type: 'number'
-      }
-    ],
-    buttons: [
-      {
-        text: 'Cancel',
-        role: 'cancel',
-        cssClass: 'secondary',
-        handler: () => {
-          console.log('Confirm Cancel')
-        }
-      }, {
-        text: 'Ok',
-        handler: () => {
-          console.log('Confirm Ok')
-        }
-      }
-    ]
-  });
-  return await alert.present();
+  document.body.appendChild(alert);
+  return alert.present();
 }
 
-async function presentAlertRadio() {
-  const alertController = document.querySelector('ion-alert-controller');
-
-  const alert = await alertController.create({
-    header: 'Radio',
-    inputs: [
-      {
-        type: 'radio',
-        label: 'Radio 1',
-        value: 'value1',
-        checked: true
-      },
-      {
-        type: 'radio',
-        label: 'Radio 2',
-        value: 'value2'
-      },
-      {
-        type: 'radio',
-        label: 'Radio 3',
-        value: 'value3'
-      },
-      {
-        type: 'radio',
-        label: 'Radio 4',
-        value: 'value4'
-      },
-      {
-        type: 'radio',
-        label: 'Radio 5',
-        value: 'value5'
-      },
-      {
-        type: 'radio',
-        label: 'Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 ',
-        value: 'value6'
+function presentAlertRadio() {
+  const alert = document.createElement('ion-alert');
+  alert.header = 'Radio';
+  alert.inputs = [
+    {
+      type: 'radio',
+      label: 'Radio 1',
+      value: 'value1',
+      checked: true
+    },
+    {
+      type: 'radio',
+      label: 'Radio 2',
+      value: 'value2'
+    },
+    {
+      type: 'radio',
+      label: 'Radio 3',
+      value: 'value3'
+    },
+    {
+      type: 'radio',
+      label: 'Radio 4',
+      value: 'value4'
+    },
+    {
+      type: 'radio',
+      label: 'Radio 5',
+      value: 'value5'
+    },
+    {
+      type: 'radio',
+      label: 'Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 ',
+      value: 'value6'
+    }
+  ];
+  alert.buttons = [
+    {
+      text: 'Cancel',
+      role: 'cancel',
+      cssClass: 'secondary',
+      handler: () => {
+        console.log('Confirm Cancel')
       }
-    ],
-    buttons: [
-      {
-        text: 'Cancel',
-        role: 'cancel',
-        cssClass: 'secondary',
-        handler: () => {
-          console.log('Confirm Cancel')
-        }
-      }, {
-        text: 'Ok',
-        handler: () => {
-          console.log('Confirm Ok')
-        }
+    }, {
+      text: 'Ok',
+      handler: () => {
+        console.log('Confirm Ok')
       }
-    ]
-  });
-  return await alert.present();
+    }
+  ];
+  document.body.appendChild(alert);
+  return alert.present();
 }
 
-async function presentAlertCheckbox() {
-  const alertController = document.querySelector('ion-alert-controller');
+function presentAlertCheckbox() {
+  const alert = document.createElement('ion-alert');
+  alert.header = 'Checkbox';
+  alert.inputs = [
+    {
+      type: 'checkbox',
+      label: 'Checkbox 1',
+      value: 'value1',
+      checked: true
+    },
 
-  const alert = await alertController.create({
-    header: 'Checkbox',
-    inputs: [
-      {
-        type: 'checkbox',
-        label: 'Checkbox 1',
-        value: 'value1',
-        checked: true
-      },
+    {
+      type: 'checkbox',
+      label: 'Checkbox 2',
+      value: 'value2'
+    },
 
-      {
-        type: 'checkbox',
-        label: 'Checkbox 2',
-        value: 'value2'
-      },
+    {
+      type: 'checkbox',
+      label: 'Checkbox 3',
+      value: 'value3'
+    },
 
-      {
-        type: 'checkbox',
-        label: 'Checkbox 3',
-        value: 'value3'
-      },
+    {
+      type: 'checkbox',
+      label: 'Checkbox 4',
+      value: 'value4'
+    },
 
-      {
-        type: 'checkbox',
-        label: 'Checkbox 4',
-        value: 'value4'
-      },
+    {
+      type: 'checkbox',
+      label: 'Checkbox 5',
+      value: 'value5'
+    },
 
-      {
-        type: 'checkbox',
-        label: 'Checkbox 5',
-        value: 'value5'
-      },
-
-      {
-        type: 'checkbox',
-        label: 'Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6',
-        value: 'value6'
+    {
+      type: 'checkbox',
+      label: 'Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6',
+      value: 'value6'
+    }
+  ];
+  alert.buttons = [
+    {
+      text: 'Cancel',
+      role: 'cancel',
+      cssClass: 'secondary',
+      handler: () => {
+        console.log('Confirm Cancel')
       }
-    ],
-    buttons: [
-      {
-        text: 'Cancel',
-        role: 'cancel',
-        cssClass: 'secondary',
-        handler: () => {
-          console.log('Confirm Cancel')
-        }
-      }, {
-        text: 'Ok',
-        handler: () => {
-          console.log('Confirm Ok')
-        }
+    }, {
+      text: 'Ok',
+      handler: () => {
+        console.log('Confirm Ok')
       }
-    ]
-  });
-  return await alert.present();
+    }
+  ];
+
+  document.body.appendChild(alert);
+  return alert.present();
 }
 ```

core/src/components/alert/usage/react.md

@@ -2,7 +2,7 @@
 import React, { useState } from 'react';
 import { IonAlert, IonButton, IonContent } from '@ionic/react';
 
-export const AlertExample: React.FunctionComponent = () => {
+export const AlertExample: React.FC = () => {
 
   const [showAlert1, setShowAlert1] = useState(false);
   const [showAlert2, setShowAlert2] = useState(false);

core/src/components/anchor/anchor.tsx

@@ -40,7 +40,7 @@ export class Anchor implements ComponentInterface {
   @Prop() routerDirection: RouterDirection = 'forward';
 
   componentDidLoad() {
-    console.warn('The <ion-anchor> component has been deprecated. Please use an <ion-router-link> if you are using a vanilla JS or Stencil project or an <a> with the Angular router.');
+    console.warn('[DEPRECATED][ion-anchor] The <ion-anchor> component has been deprecated. Please use an <ion-router-link> if you are using a vanilla JS or Stencil project or an <a> with the Angular router.');
   }
 
   private onClick = (ev: Event) => {

core/src/components/app/app.tsx

@@ -1,8 +1,7 @@
-import { Component, ComponentInterface, Element, Host, h } from '@stencil/core';
+import { Build, Component, ComponentInterface, Element, Host, h } from '@stencil/core';
 
 import { config } from '../../global/config';
 import { getIonMode } from '../../global/ionic-global';
-import { rIC } from '../../utils/helpers';
 import { isPlatform } from '../../utils/platform';
 
 @Component({
@@ -14,23 +13,24 @@ export class App implements ComponentInterface {
   @Element() el!: HTMLElement;
 
   componentDidLoad() {
-    rIC(() => {
-      const isHybrid = isPlatform(window, 'hybrid');
-      if (!config.getBoolean('_testing')) {
-        import('../../utils/tap-click').then(module => module.startTapClick(config));
-      }
-      if (config.getBoolean('statusTap', isHybrid)) {
-        import('../../utils/status-tap').then(module => module.startStatusTap());
-      }
-      if (config.getBoolean('inputShims', needInputShims())) {
-        import('../../utils/input-shims/input-shims').then(module => module.startInputShims(config));
-      }
-      if (config.getBoolean('hardwareBackButton', isHybrid)) {
-        import('../../utils/hardware-back-button').then(module => module.startHardwareBackButton());
-      }
-      import('../../utils/focus-visible').then(module => module.startFocusVisible());
-
-    });
+    if (Build.isBrowser) {
+      rIC(() => {
+        const isHybrid = isPlatform(window, 'hybrid');
+        if (!config.getBoolean('_testing')) {
+          import('../../utils/tap-click').then(module => module.startTapClick(config));
+        }
+        if (config.getBoolean('statusTap', isHybrid)) {
+          import('../../utils/status-tap').then(module => module.startStatusTap());
+        }
+        if (config.getBoolean('inputShims', needInputShims())) {
+          import('../../utils/input-shims/input-shims').then(module => module.startInputShims(config));
+        }
+        if (config.getBoolean('hardwareBackButton', isHybrid)) {
+          import('../../utils/hardware-back-button').then(module => module.startHardwareBackButton());
+        }
+        import('../../utils/focus-visible').then(module => module.startFocusVisible());
+      });
+    }
   }
 
   render() {
@@ -51,3 +51,11 @@ export class App implements ComponentInterface {
 const needInputShims = () => {
   return isPlatform(window, 'ios') && isPlatform(window, 'mobile');
 };
+
+const rIC = (callback: () => void) => {
+  if ('requestIdleCallback' in window) {
+    (window as any).requestIdleCallback(callback);
+  } else {
+    setTimeout(callback, 32);
+  }
+};

core/src/components/app/test/safe-area/index.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html dir="ltr">
+<html dir="ltr" class="safe-area">
 
 <head>
   <meta charset="UTF-8">
@@ -19,15 +19,15 @@
   </style>
   <script>
     async function showActionSheet() {
-      const actionSheet = await document.querySelector('ion-action-sheet-controller')
-        .create({
-          header: 'Action Sheet',
-          buttons: [
-            'First',
-            'Second',
-            'Third'
-          ]
-        });
+      const actionSheet = Object.assign(document.createElement('ion-action-sheet'), {
+        header: 'Action Sheet',
+        buttons: [
+          'First',
+          'Second',
+          'Third'
+        ]
+      });
+      document.body.appendChild(actionSheet);
       await actionSheet.present();
     }
 
@@ -37,38 +37,38 @@
     }
 
     async function showPicker() {
-      const picker = await document.querySelector('ion-picker-controller')
-        .create({
-          columns: [
-            {
-              name: 'Picker',
-              selectedIndex: 2,
-              options: [
-                { text: 'First' },
-                { text: 'Second' },
-                { text: 'Third' },
-                { text: 'Fourth' },
-                { text: 'Fifth' },
-              ]
-            }
-          ]
-        });
+      const picker = Object.assign(document.createElement('ion-picker'), {
+        columns: [
+          {
+            name: 'Picker',
+            selectedIndex: 2,
+            options: [
+              { text: 'First' },
+              { text: 'Second' },
+              { text: 'Third' },
+              { text: 'Fourth' },
+              { text: 'Fifth' },
+            ]
+          }
+        ]
+      });
+      document.body.appendChild(picker);
       await picker.present();
     }
 
     async function showToast() {
-      const toast = await document.querySelector('ion-toast-controller')
-        .create({
-          message: 'Hello world!',
-          showCloseButton: true
-        });
+      const toast = Object.assign(document.createElement('ion-toast'), {
+        message: 'Hello world!',
+        showCloseButton: true
+      });
+      document.body.appendChild(toast);
       await toast.present();
     }
   </script>
 </head>
 
 <body>
-  <ion-app class="safe-area">
+  <ion-app>
     <ion-menu>
       <ion-header>
         <ion-toolbar>
@@ -142,7 +142,6 @@
       </ion-toolbar>
     </ion-footer>
 
-    <ion-action-sheet-controller></ion-action-sheet-controller>
     <ion-picker-controller></ion-picker-controller>
     <ion-toast-controller></ion-toast-controller>
   </ion-app>

core/src/components/avatar/readme.md

@@ -39,7 +39,7 @@ Avatars can be used by themselves or inside of any element. If placed inside of
 import React from 'react'
 import { IonAvatar, IonChip, IonItem, IonLabel, IonContent } from '@ionic/react';
 
-export const AvatarExample: React.FunctionComponent = () => (
+export const AvatarExample: React.FC = () => (
   <IonContent>
     <IonAvatar>
       <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y" />

core/src/components/avatar/usage/react.md

@@ -2,7 +2,7 @@
 import React from 'react'
 import { IonAvatar, IonChip, IonItem, IonLabel, IonContent } from '@ionic/react';
 
-export const AvatarExample: React.FunctionComponent = () => (
+export const AvatarExample: React.FC = () => (
   <IonContent>
     <IonAvatar>
       <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y" />

core/src/components/back-button/readme.md

@@ -121,7 +121,7 @@ To change what is displayed in the back button, use the `text` and `icon` proper
 import React from 'react';
 import { IonBackButton, IonHeader, IonToolbar, IonButtons, IonMenuButton, IonContent } from '@ionic/react';
 
-export const BackButtonExample: React.FunctionComponent = () => (
+export const BackButtonExample: React.FC = () => (
   <IonContent>
     {/*-- Default back button --*/}
     <IonHeader>
@@ -190,7 +190,7 @@ export const BackButtonExample: React.FunctionComponent = () => (
   <ion-header>
     <ion-toolbar>
       <ion-buttons slot="start">
-        <ion-back-button defaultHref="home"></ion-back-button>
+        <ion-back-button default-href="home"></ion-back-button>
       </ion-buttons>
     </ion-toolbar>
   </ion-header>

core/src/components/back-button/usage/react.md

@@ -2,7 +2,7 @@
 import React from 'react';
 import { IonBackButton, IonHeader, IonToolbar, IonButtons, IonMenuButton, IonContent } from '@ionic/react';
 
-export const BackButtonExample: React.FunctionComponent = () => (
+export const BackButtonExample: React.FC = () => (
   <IonContent>
     {/*-- Default back button --*/}
     <IonHeader>

core/src/components/back-button/usage/vue.md

@@ -13,7 +13,7 @@
   <ion-header>
     <ion-toolbar>
       <ion-buttons slot="start">
-        <ion-back-button defaultHref="home"></ion-back-button>
+        <ion-back-button default-href="home"></ion-back-button>
       </ion-buttons>
     </ion-toolbar>
   </ion-header>

core/src/components/backdrop/backdrop.tsx

@@ -39,14 +39,14 @@ export class Backdrop implements ComponentInterface {
    */
   @Event() ionBackdropTap!: EventEmitter<void>;
 
-  componentDidLoad() {
+  connectedCallback() {
     if (this.stopPropagation) {
       this.blocker.block();
     }
   }
 
-  componentDidUnload() {
-    this.blocker.destroy();
+  disconnectedCallback() {
+    this.blocker.unblock();
   }
 
   @Listen('touchstart', { passive: false, capture: true })

core/src/components/backdrop/readme.md

@@ -80,7 +80,7 @@ backdrop.stopPropagation = false;
 import React from 'react';
 import { IonBackdrop, IonContent } from '@ionic/react';
 
-export const BackdropExample: React.FunctionComponent = () => (
+export const BackdropExample: React.FC = () => (
   <IonContent>
     {/*-- Default backdrop --*/}
     <IonBackdrop />

core/src/components/backdrop/usage/react.md

@@ -2,7 +2,7 @@
 import React from 'react';
 import { IonBackdrop, IonContent } from '@ionic/react';
 
-export const BackdropExample: React.FunctionComponent = () => (
+export const BackdropExample: React.FC = () => (
   <IonContent>
     {/*-- Default backdrop --*/}
     <IonBackdrop />

core/src/components/badge/readme.md

@@ -40,7 +40,7 @@ Badges are inline block elements that usually appear near another element. Typic
 import React from 'react';
 import { IonBadge, IonItem, IonLabel, IonContent } from '@ionic/react';
 
-export const BadgeExample: React.FunctionComponent = () => (
+export const BadgeExample: React.FC = () => (
   <IonContent>
     {/*-- Default --*/}
     <IonBadge>99</IonBadge>

core/src/components/badge/usage/react.md

@@ -2,7 +2,7 @@
 import React from 'react';
 import { IonBadge, IonItem, IonLabel, IonContent } from '@ionic/react';
 
-export const BadgeExample: React.FunctionComponent = () => (
+export const BadgeExample: React.FC = () => (
   <IonContent>
     {/*-- Default --*/}
     <IonBadge>99</IonBadge>

core/src/components/button/readme.md

@@ -98,7 +98,7 @@ import React from 'react';
 
 import { IonButton, IonIcon, IonContent } from '@ionic/react';
 
-export const ButtonExample: React.FunctionComponent = () => (
+export const ButtonExample: React.FC = () => (
   <IonContent>
     {/*-- Default --*/}
     <IonButton>Default</IonButton>

core/src/components/button/usage/react.md

@@ -3,7 +3,7 @@ import React from 'react';
 
 import { IonButton, IonIcon, IonContent } from '@ionic/react';
 
-export const ButtonExample: React.FunctionComponent = () => (
+export const ButtonExample: React.FC = () => (
   <IonContent>
     {/*-- Default --*/}
     <IonButton>Default</IonButton>

core/src/components/buttons/buttons.tsx

@@ -1,4 +1,4 @@
-import { Component, ComponentInterface, Host, h } from '@stencil/core';
+import { Component, ComponentInterface, Host, Prop, h } from '@stencil/core';
 
 import { getIonMode } from '../../global/ionic-global';
 
@@ -12,9 +12,29 @@ import { getIonMode } from '../../global/ionic-global';
 })
 export class Buttons implements ComponentInterface {
 
+  /**
+   * If true, buttons will disappear when its
+   * parent toolbar has fully collapsed if the toolbar
+   * is not the first toolbar. If the toolbar is the
+   * first toolbar, the buttons will be hidden and will
+   * only be shown once all toolbars have fully collapsed.
+   *
+   * Only applies in `ios` mode with `collapse` set to
+   * `true` on `ion-header`.
+   *
+   * Typically used for [Collapsible Large Titles](https://ionicframework.com/docs/api/title#collapsible-large-titles)
+   */
+  @Prop() collapse = false;
+
   render() {
+    const mode = getIonMode(this);
     return (
-      <Host class={getIonMode(this)}>
+      <Host
+        class={{
+          [mode]: true,
+          ['buttons-collapse']: this.collapse
+        }}
+      >
       </Host>
     );
   }

core/src/components/buttons/readme.md

@@ -55,6 +55,15 @@ The `<ion-buttons>` element can be positioned inside of the toolbar using a name
     <ion-menu-button autoHide="false"></ion-menu-button>
   </ion-buttons>
 </ion-toolbar>
+
+<ion-toolbar>
+  <ion-buttons collapse="true">
+    <ion-button>
+      <ion-icon slot="icon-only" name="star"></ion-icon>
+    </ion-button>
+  </ion-buttons>
+  <ion-title>Collapsible Buttons</ion-title>
+</ion-toolbar>
 ```
 
 
@@ -100,6 +109,15 @@ The `<ion-buttons>` element can be positioned inside of the toolbar using a name
     </ion-menu-toggle>
   </ion-buttons>
 </ion-toolbar>
+
+<ion-toolbar>
+  <ion-buttons collapse="true">
+    <ion-button>
+      <ion-icon slot="icon-only" name="star"></ion-icon>
+    </ion-button>
+  </ion-buttons>
+  <ion-title>Collapsible Buttons</ion-title>
+</ion-toolbar>
 ```
 
 
@@ -118,7 +136,7 @@ import {
   IonContent
 } from '@ionic/react';
 
-export const ButtonsExample: React.FunctionComponent = () => (
+export const ButtonsExample: React.FC = () => (
   <IonContent>
     <IonToolbar>
       <IonButtons slot="start">
@@ -155,6 +173,15 @@ export const ButtonsExample: React.FunctionComponent = () => (
         <IonMenuButton autoHide={false} />
       </IonButtons>
     </IonToolbar>
+    
+    <IonToolbar>
+      <IonButtons collapse="true">
+        <IonButton>
+          <IonIcon slot="icon-only" name="star" />
+        </IonButton>
+      </IonButtons>
+      <IonTitle>Collapsible Buttons</IonTitle>
+    </IonToolbar>
   </IonContent>
 );
 ```
@@ -199,11 +226,27 @@ export const ButtonsExample: React.FunctionComponent = () => (
       <ion-menu-button autoHide="false"></ion-menu-button>
     </ion-buttons>
   </ion-toolbar>
+  
+  <ion-toolbar>
+    <ion-buttons collapse="true">
+      <ion-button>
+        <ion-icon slot="icon-only" name="star"></ion-icon>
+      </ion-button>
+    </ion-buttons>
+    <ion-title>Collapsible Buttons</ion-title>
+  </ion-toolbar>
 </template>
 ```
 
 
 
+## Properties
+
+| Property   | Attribute  | Description                                                                                                                                                                                                                                                                                                                                                                                                                                       | Type      | Default |
+| ---------- | ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- | ------- |
+| `collapse` | `collapse` | If true, buttons will disappear when its parent toolbar has fully collapsed if the toolbar is not the first toolbar. If the toolbar is the first toolbar, the buttons will be hidden and will only be shown once all toolbars have fully collapsed.  Only applies in `ios` mode with `collapse` set to `true` on `ion-header`.  Typically used for [Collapsible Large Titles](https://ionicframework.com/docs/api/title#collapsible-large-titles) | `boolean` | `false` |
+
+
 ----------------------------------------------
 
 *Built with [StencilJS](https://stenciljs.com/)*

core/src/components/buttons/usage/angular.md

@@ -34,4 +34,13 @@
     <ion-menu-button autoHide="false"></ion-menu-button>
   </ion-buttons>
 </ion-toolbar>
+
+<ion-toolbar>
+  <ion-buttons collapse="true">
+    <ion-button>
+      <ion-icon slot="icon-only" name="star"></ion-icon>
+    </ion-button>
+  </ion-buttons>
+  <ion-title>Collapsible Buttons</ion-title>
+</ion-toolbar>
 ```

core/src/components/buttons/usage/javascript.md

@@ -38,4 +38,13 @@
     </ion-menu-toggle>
   </ion-buttons>
 </ion-toolbar>
+
+<ion-toolbar>
+  <ion-buttons collapse="true">
+    <ion-button>
+      <ion-icon slot="icon-only" name="star"></ion-icon>
+    </ion-button>
+  </ion-buttons>
+  <ion-title>Collapsible Buttons</ion-title>
+</ion-toolbar>
 ```

core/src/components/buttons/usage/react.md

@@ -11,7 +11,7 @@ import {
   IonContent
 } from '@ionic/react';
 
-export const ButtonsExample: React.FunctionComponent = () => (
+export const ButtonsExample: React.FC = () => (
   <IonContent>
     <IonToolbar>
       <IonButtons slot="start">
@@ -48,6 +48,15 @@ export const ButtonsExample: React.FunctionComponent = () => (
         <IonMenuButton autoHide={false} />
       </IonButtons>
     </IonToolbar>
+    
+    <IonToolbar>
+      <IonButtons collapse="true">
+        <IonButton>
+          <IonIcon slot="icon-only" name="star" />
+        </IonButton>
+      </IonButtons>
+      <IonTitle>Collapsible Buttons</IonTitle>
+    </IonToolbar>
   </IonContent>
 );
 ```

core/src/components/buttons/usage/vue.md

@@ -35,5 +35,14 @@
       <ion-menu-button autoHide="false"></ion-menu-button>
     </ion-buttons>
   </ion-toolbar>
+  
+  <ion-toolbar>
+    <ion-buttons collapse="true">
+      <ion-button>
+        <ion-icon slot="icon-only" name="star"></ion-icon>
+      </ion-button>
+    </ion-buttons>
+    <ion-title>Collapsible Buttons</ion-title>
+  </ion-toolbar>
 </template>
 ```